.landing-page {
  /* Modo claro (base Urbana) */
  --color-bg: #f5f0ee;
  --color-bg-elevated: #ffffff;
  --color-bg-glass: rgba(255, 255, 255, 0.55);
  --color-bg-soft: #ece6e3;
  --color-fg: #242424;
  --color-fg-muted: #6a6663;
  --color-fg-subtle: #b5b1b0;
  --color-border: rgba(36, 36, 36, 0.08);
  --color-border-strong: rgba(36, 36, 36, 0.16);

  /* Zonas oscuras */
  --color-bg-dark: #242424;
  --color-bg-dark-elevated: #2e2e2e;
  --color-bg-dark-soft: #1a1a1a;
  --color-fg-dark: #f5f0ee;
  --color-fg-dark-muted: #b5b1b0;
  --color-fg-dark-subtle: #6a6663;
  --color-border-dark: rgba(245, 240, 238, 0.10);
  --color-border-dark-strong: rgba(245, 240, 238, 0.18);

  /* Acentos Urbana */
  --color-brand: #c5e4e7;
  --color-brand-glow: #d8eef0;
  --color-brand-dark: #8fc5cb;

  --color-accent-proyecto: #d5e4c2;
  --color-accent-proyecto-glow: #e3eed4;
  --color-accent-mercado: #b5b1b0;
  --color-accent-mercado-glow: #cfcbc9;
  --color-accent-creditos: #242424;
  --color-accent-creditos-glow: #f5f0ee;

  /* Tipografía */
  --font-display: var(--font-museo);
  --font-sans: var(--font-museo);
  --font-mono: var(--font-museo);

  --font-museo: "MuseoModerno";
    background: var(--color-bg);
    color: var(--color-fg);
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: var(--font-sans), system-ui, sans-serif;
    overflow-x: hidden;
}

.landing-page ::selection {
    background: var(--color-fg);
    color: var(--color-bg);
}

.landing-page *:focus-visible {
    outline: 2px solid var(--color-fg);
    outline-offset: 3px;
    border-radius: 4px;
}

.landing-page .border-border {
  border-color: var(--color-border);
}

.landing-page .border-border\/60 {
  border-color: color-mix(in srgb, var(--color-border) 60%, transparent);
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  /* ==========================================================================
     GLASS / HAIRLINES
     ========================================================================== */
  .glass {
    background: var(--color-bg-glass);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
      inset 0 0 0 1px rgba(11, 11, 9, 0.06),
      0 1px 0 0 rgba(255, 255, 255, 0.5);
  }

  .glass-dark {
    background: rgba(21, 20, 15, 0.6);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
      inset 0 0 0 1px rgba(250, 250, 247, 0.06),
      0 1px 0 0 rgba(250, 250, 247, 0.04);
  }

  .hairline {
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .hairline-strong {
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
  }
  .hairline-dark {
    box-shadow: inset 0 0 0 1px var(--color-border-dark);
  }
  .hairline-dark-strong {
    box-shadow: inset 0 0 0 1px var(--color-border-dark-strong);
  }

  /* ==========================================================================
     AURORA MESH — gradients granulados estilo Reform
     ========================================================================== */
  .aurora {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg);
  }

  /* Hero — paleta completa, todos los acentos en juego (Urbana: bajado a la mitad) */
  .aurora-hero {
    background-image:
      radial-gradient(900px 700px at 12% 18%, color-mix(in oklab, var(--color-accent-mercado-glow) 18%, transparent), transparent 60%),
      radial-gradient(800px 700px at 82% 14%, color-mix(in oklab, var(--color-accent-proyecto-glow) 20%, transparent), transparent 62%),
      radial-gradient(700px 620px at 50% 90%, color-mix(in oklab, var(--color-brand-glow) 18%, transparent), transparent 62%),
      radial-gradient(650px 560px at 92% 72%, color-mix(in oklab, var(--color-accent-creditos-glow) 18%, transparent), transparent 60%),
      radial-gradient(560px 480px at 8% 78%, color-mix(in oklab, var(--color-accent-mercado) 12%, transparent), transparent 60%);
  }

  /* Variantes por acento (zonas individuales) */
  .aurora-proyecto {
    background-image:
      radial-gradient(720px 600px at 80% 18%, color-mix(in oklab, var(--color-accent-proyecto-glow) 22%, transparent), transparent 62%),
      radial-gradient(620px 520px at 22% 78%, color-mix(in oklab, var(--color-accent-proyecto) 14%, transparent), transparent 60%),
      radial-gradient(420px 360px at 50% 50%, color-mix(in oklab, var(--color-brand-glow) 8%, transparent), transparent 60%);
  }
  .aurora-crm {
    background-image:
      radial-gradient(820px 660px at 50% 12%, color-mix(in oklab, var(--color-brand-glow) 20%, transparent), transparent 62%),
      radial-gradient(620px 520px at 12% 82%, color-mix(in oklab, var(--color-accent-proyecto-glow) 14%, transparent), transparent 60%),
      radial-gradient(620px 520px at 88% 82%, color-mix(in oklab, var(--color-brand) 12%, transparent), transparent 60%);
  }
  .aurora-mercado {
    background-image:
      radial-gradient(820px 680px at 18% 22%, color-mix(in oklab, var(--color-accent-mercado-glow) 22%, transparent), transparent 60%),
      radial-gradient(620px 520px at 82% 78%, color-mix(in oklab, var(--color-accent-mercado) 14%, transparent), transparent 60%),
      radial-gradient(420px 360px at 50% 50%, color-mix(in oklab, var(--color-accent-creditos-glow) 8%, transparent), transparent 60%);
  }
  .aurora-creditos {
    background-image:
      radial-gradient(820px 680px at 78% 22%, color-mix(in oklab, var(--color-accent-creditos-glow) 22%, transparent), transparent 60%),
      radial-gradient(620px 520px at 18% 80%, color-mix(in oklab, var(--color-accent-creditos) 8%, transparent), transparent 60%),
      radial-gradient(420px 360px at 50% 50%, color-mix(in oklab, var(--color-accent-proyecto-glow) 10%, transparent), transparent 60%);
  }

  /* Spot reactivo al cursor — usa --mx / --my actualizadas por JS */
  .aurora-cursor::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      420px 420px at var(--mx, 50%) var(--my, 50%),
      color-mix(in oklab, var(--cursor-tint, var(--color-brand-glow)) 22%, transparent),
      transparent 65%
    );
    transition: background 600ms cubic-bezier(0.4, 0, 0.2, 1);
    mix-blend-mode: multiply;
  }

  /* Grano (existente, mantener) */
  .grain {
    position: relative;
  }
  .grain::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
    opacity: 0.018;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 1;
  }

  /* ==========================================================================
     HERO CANVAS — mesh-gradient cohesivo con grano (estilo Reform, paleta Urbana)
     Un solo campo de color continuo (cyan · mint · cream) en vez de parches
     dispersos, con grano de película encima para el acabado "material".
     ========================================================================== */
  .aurora-hero-rich {
    background-color: var(--color-bg);
    background-image:
      radial-gradient(1300px 1000px at 12% 4%, color-mix(in oklab, var(--color-brand) 100%, transparent), transparent 58%),
      radial-gradient(1250px 980px at 92% 10%, color-mix(in oklab, var(--color-accent-proyecto) 100%, transparent), transparent 56%),
      radial-gradient(1250px 1020px at 82% 94%, color-mix(in oklab, var(--color-brand-dark) 88%, transparent), transparent 60%),
      radial-gradient(1050px 880px at 16% 98%, color-mix(in oklab, var(--color-accent-proyecto) 92%, transparent), transparent 58%),
      radial-gradient(1000px 820px at 50% 44%, color-mix(in oklab, var(--color-brand) 72%, transparent), transparent 64%),
      radial-gradient(820px 700px at 66% 26%, color-mix(in oklab, var(--color-accent-mercado) 44%, transparent), transparent 58%),
      radial-gradient(720px 640px at 90% 58%, color-mix(in oklab, color-mix(in oklab, var(--color-brand-dark) 78%, var(--color-accent-creditos)) 62%, transparent), transparent 60%);
    background-repeat: no-repeat;
  }

  /* Grano de película más presente que .grain, para el lienzo del hero */
  .noise-layer {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
    opacity: 0.18;
    pointer-events: none;
    mix-blend-mode: multiply;
  }

  /* ==========================================================================
     MASKS
     ========================================================================== */
  .gradient-fade-b {
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
  .gradient-fade-x {
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  }
  .gradient-fade-t {
    -webkit-mask-image: linear-gradient(to top, black 70%, transparent 100%);
    mask-image: linear-gradient(to top, black 70%, transparent 100%);
  }

  /* ==========================================================================
     GLOWS
     ========================================================================== */
  .glow-brand {
    background: radial-gradient(60% 50% at 50% 50%, color-mix(in oklab, var(--color-brand) 55%, transparent), transparent 70%);
    filter: blur(40px);
  }
  .glow-proyecto {
    background: radial-gradient(60% 50% at 50% 50%, color-mix(in oklab, var(--color-accent-proyecto) 55%, transparent), transparent 70%);
    filter: blur(40px);
  }
  .glow-mercado {
    background: radial-gradient(60% 50% at 50% 50%, color-mix(in oklab, var(--color-accent-mercado) 45%, transparent), transparent 70%);
    filter: blur(40px);
  }
  .glow-creditos {
    background: radial-gradient(60% 50% at 50% 50%, color-mix(in oklab, var(--color-accent-creditos) 20%, transparent), transparent 70%);
    filter: blur(40px);
  }

  /* ==========================================================================
     SPOTLIGHT — sigue cursor en cards
     ========================================================================== */
  .spotlight {
    position: relative;
    isolation: isolate;
  }
  .spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(
      320px 320px at var(--mx, 50%) var(--my, 50%),
      color-mix(in oklab, var(--spot-color, var(--color-brand-glow)) 45%, transparent),
      transparent 70%
    );
    opacity: 0;
    transition: opacity 250ms ease;
  }
  .spotlight:hover::before {
    opacity: 1;
  }

  /* ==========================================================================
     ANIMACIONES
     ========================================================================== */
  .anim-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
  }
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.75; }
  }

  .anim-float {
    animation: float 7s ease-in-out infinite;
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  .anim-flow {
    stroke-dasharray: 4 8;
    animation: flow 1.6s linear infinite;
  }
  @keyframes flow {
    to { stroke-dashoffset: -24; }
  }

  /* Aurora subtly drifting — para hero */
  .anim-aurora-drift {
    animation: aurora-drift 22s ease-in-out infinite;
  }
  @keyframes aurora-drift {
    0%, 100% {
      background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
      filter: saturate(1);
    }
    50% {
      background-position: 4% -3%, -3% 2%, 2% 4%, -2% -3%, 3% 2%;
      filter: saturate(1.1);
    }
  }

  /* Cursor blink para typing UI */
  .anim-blink {
    animation: blink 1.1s steps(2, end) infinite;
  }
  @keyframes blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
  }

  /* ==========================================================================
     TIPOGRAFÍA DISPLAY — MuseoModerno (Urbana)
     ========================================================================== */
  .font-display {
    font-family: var(--font-display), system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  .font-display-sm {
    font-family: var(--font-display), system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  /* ==========================================================================
     MAGNETIC button — pulled by JS, just smooth transition
     ========================================================================== */
  .magnetic {
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  /* ==========================================================================
     TEXTURAS — auroras horneadas en PNG usadas como "material" detrás de mockups
     ========================================================================== */
  .texture-paper    { background-image: url("/landing/textures/texture_02.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
  .texture-bloom    { background-image: url("/landing/textures/texture_01.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
  .texture-warm     { background-image: url("/landing/textures/texture_04.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
  .texture-spectrum { background-image: url("/landing/textures/textura_03.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
  /* Mesh orgánico generado en la paleta REAL de Urbana (teal + sage) */
  .texture-urbana   { background-image: url("/landing/textures/hero-urbana.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
  /* Lienzos por módulo (mismo lenguaje, un acento cada uno) */
  .grad-proyecto    { background-image: url("/landing/textures/grad-proyecto.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
  .grad-crm         { background-image: url("/landing/textures/grad-crm.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
  .grad-mercado     { background-image: url("/landing/textures/grad-mercado.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
  .grad-creditos    { background-image: url("/landing/textures/grad-creditos.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }

  /* Tray: sangra la textura más allá del mockup con máscara radial para que se vea como "material" */
  .texture-tray {
    position: absolute;
    inset: -10% -8%;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at center, black 35%, transparent 90%);
            mask-image: radial-gradient(ellipse 75% 70% at center, black 35%, transparent 90%);
  }

  /* ==========================================================================
     HALO MOCKUP — sangrado de color saturado detrás de un product-shot
     ========================================================================== */
  .halo-mockup {
    position: absolute;
    inset: -10% -8% -6% -8%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      60% 50% at 50% 60%,
      color-mix(in oklab, var(--halo-color, var(--color-brand-glow)) 55%, transparent),
      transparent 70%
    );
    filter: blur(72px);
    opacity: 0.75;
  }

  /* ==========================================================================
     GRADIENT TEXT — para KPIs y números grandes
     ========================================================================== */
  .text-gradient {
    background: linear-gradient(
      135deg,
      var(--grad-from, var(--color-fg)),
      var(--grad-to, var(--color-fg-muted))
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* ==========================================================================
     TICKER — barrido infinito horizontal
     ========================================================================== */
  .ticker-track {
    animation: ticker 32s linear infinite;
    will-change: transform;
  }
  @keyframes ticker {
    to { transform: translateX(-50%); }
  }

  /* ==========================================================================
     ANIM DEBLUR — entrada con desblureado para headings hero
     ========================================================================== */
  .anim-deblur {
    animation: deblur 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes deblur {
    from { filter: blur(8px); opacity: 0; transform: translateY(6px); }
    to   { filter: blur(0);   opacity: 1; transform: translateY(0); }
  }

  /* ==========================================================================
     SECTION DIVIDER — hairline rica con textura horneada sangrando arriba/abajo
     ========================================================================== */
  .section-divider {
    position: relative;
    height: 1px;
    overflow: visible;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-border-strong) 20%,
      var(--color-border-strong) 80%,
      transparent
    );
  }
  .section-divider::after {
    content: "";
    position: absolute;
    inset: -96px 0;
    pointer-events: none;
    z-index: -1;
    background-image: url("/landing/textures/textura_03.webp");
    background-size: 180% 220%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.4;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 50%, transparent);
            mask-image: linear-gradient(to bottom, transparent, black 50%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}