/* ==========================================================================
   Variables — tokens de diseño de Easy Vans
   ========================================================================== */

:root {
  /* ---------- Color: marca (regla 60/30/10) ----------
     60 % Midnight Navy (#131D38): fondos. La escala --klein-* (el
          nombre quedó de la prueba con Klein Blue) sale de ese tono: más
          clara en la luz central, casi negra en las orillas.
     30 % Chalk White (#EEEDE8): títulos, texto, íconos, bordes finos y
          superficies claras (tarjetas de preguntas). Blanco cálido, no
          puro: es lo que le da calidez al azul.
     10 % Naranja (#FF7B2C): solo acentos (CTA, indicador del menú,
          "fácil y seguro", ruta, pines, anillos de badges, hover).
     Contraste: chalk sobre navy ~14:1; naranja sobre navy 6.4:1. Sobre
     chalk el naranja no da contraste: ahí nunca va en texto. */
  --klein-900: #0B1124;  /* orillas de la viñeta, casi negro azulado */
  --klein-800: #0F172D;  /* superficies hundidas y degradados */
  --klein-700: #131D38;  /* Midnight Navy: color principal (60 %) */
  --klein-500: #2A3F6E;  /* luz del centro */
  --glow: #5B7DB8;       /* brillo central, siempre con baja opacidad */
  --chalk: #EEEDE8;      /* Chalk White: color secundario (30 %) */
  --orange-500: #FF7B2C; /* acentos (10 %) y CTA */
  --orange-400: #FF9452; /* hover y parte alta del CTA */
  --orange-600: #EE6614; /* parte baja del degradado del CTA */
  --white: #FFFFFF;      /* solo brillos */
  --text-muted: color-mix(in srgb, var(--chalk) 80%, var(--klein-700)); /* ~11:1 sobre navy */
  --line: rgba(238, 237, 232, 0.22); /* bordes finos en chalk */
  --line-strong: rgba(238, 237, 232, 0.38); /* borde exterior de los badges */
  --whatsapp-500: #25D366; /* botón flotante de WhatsApp (color de la marca WhatsApp) */

  /* ---------- Color: header ---------- */
  --nav-pill-bg: rgba(238, 237, 232, 0.04);
  --menu-overlay-bg: color-mix(in srgb, var(--klein-900) 90%, transparent);

  /* Brillo --glow del hero: degradado de muchos pasos que cae suave hasta
     transparente, en lugar de un filter: blur (caro al animarse) */
  --glow-soft: radial-gradient(
    closest-side,
    var(--glow) 0%,
    color-mix(in srgb, var(--glow) 82%, transparent) 18%,
    color-mix(in srgb, var(--glow) 58%, transparent) 36%,
    color-mix(in srgb, var(--glow) 34%, transparent) 54%,
    color-mix(in srgb, var(--glow) 15%, transparent) 72%,
    color-mix(in srgb, var(--glow) 4%, transparent) 88%,
    transparent 100%
  );

  /* ---------- Color: alias semánticos ---------- */
  --color-bg: var(--klein-700);
  --color-text: var(--chalk);
  --color-text-muted: var(--text-muted);
  --color-accent: var(--orange-500);
  --color-accent-hover: var(--orange-400);
  --color-on-accent: var(--klein-900); /* texto sobre naranja: ~6.8:1 (el blanco da 2.3:1 y no pasa AA) */
  --color-focus: var(--orange-400);

  /* ---------- Tipografía ---------- */
  --font-display: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  /* H1 del hero en 2 líneas: "FÁCIL Y SEGURO." debe caber en la
     columna de texto (35% del hero) desde 1024px */
  --fs-display: clamp(2.25rem, 4.6vw - 0.75rem, 3.4rem);

  --lh-display: 1.1;  /* mayúsculas con acento (Á) sin tocar la línea de arriba */
  --lh-tight: 1.12;
  --lh-snug: 1.25;
  --lh-body: 1.55;

  --tracking-eyebrow: 0.3em;
  --tracking-display: 0; /* títulos en mayúsculas */

  /* ---------- Espaciado (escala de 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);

  /* ---------- Layout ---------- */
  --container-max: 90rem; /* 1440px */
  --header-h: clamp(4.5rem, 3.8rem + 3vw, 7rem);
  --hero-min-h: 45rem;    /* 720px en desktop, solo con scroll normal */
  /* Alto de cada pantalla del inicio (.page-section). dvh sigue a la
     barra del navegador en celular; vh queda de respaldo */
  --page-h: 100vh;

  /* ---------- Radios ---------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 0.125rem 0.5rem rgba(0, 9, 45, 0.35);
  --shadow-md: 0 0.75rem 2rem rgba(0, 9, 45, 0.45);
  --shadow-lg: 0 1.5rem 4rem rgba(0, 9, 45, 0.6);
  --shadow-cta: 0 0.75rem 2rem rgba(255, 123, 44, 0.35);
  --shadow-cta-hover: 0 1rem 2.75rem rgba(255, 123, 44, 0.5);
  /* Volumen del CTA: filo de luz arriba, borde oscuro abajo y sombra de contacto */
  --shadow-cta-bevel:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -0.1875rem 0 rgba(150, 55, 0, 0.2),
    0 0.25rem 0.5rem rgba(0, 9, 45, 0.35);
  --shadow-glow: 0 0 6rem rgba(76, 125, 255, 0.35);

  /* ---------- Capas (z-index) ---------- */
  --z-backdrop: 0;
  --z-base: 1;
  --z-scene: 10;
  --z-van: 20;
  --z-overlay: 30;
  --z-float: 90;   /* WhatsApp flotante: bajo el header y su overlay */
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 300;

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 700ms;

  /* ---------- Movimiento: coreografía de entrada del hero (Fase 6) ----------
     Los delays cuentan desde que main.js agrega .is-loaded al body.
     Para retocar la entrada basta con mover estos valores. */
  /* Salida tipo "quart out": arranca con menos golpe que una expo, así
     el movimiento se ve continuo aunque se pierda algún cuadro inicial */
  --ease-enter: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* ruta punteada */

  /* Cambio de pantalla en el inicio: arranca de inmediato (responde en
     el primer cuadro) y frena suave al llegar. Una curva que arranca
     lento se sentía con retraso. main.js lee --page-duration para saber
     cuándo termina */
  --page-duration: 0.8s;
  --ease-page: cubic-bezier(0.25, 0.8, 0.25, 1);

  --delay-light: 0s;      /* luz central: se prende el reflector */
  --delay-glow: 0.3s;     /* brillo: primera respiración fuerte */
  --delay-van: 0.5s;      /* van, sombra y reflejo del piso */
  --delay-title: 0.9s;    /* 1.ª línea del H1 */
  --delay-header: 1.1s;   /* logo, pastilla y redes */
  --delay-route: 1.3s;    /* ruta punteada */
  --delay-pin: 1.5s;      /* pin de inicio (el final se calcula con la ruta) */
  --delay-boxes: 1.6s;    /* 1.ª caja */
  --delay-content: 1.8s;  /* eyebrow, párrafo, CTA y beneficios */
  --delay-badges: 2s;     /* 1.er badge */
  --delay-float: 2.4s;    /* WhatsApp flotante */

  --dur-light: 0.9s;
  --dur-glow: 2.2s;
  --dur-van: 1.4s;
  --dur-title: 1.1s;
  --dur-header: 1s;
  --dur-route: 1.4s;
  --dur-pin: 0.7s;
  --dur-rise: 1s;         /* cajas y textos */
  --dur-badge: 1.1s;

  --stagger-title: 0.12s;
  --stagger-nav: 0.05s;
  --stagger-boxes: 0.1s;
  --stagger-content: 0.08s;
  --stagger-badges: 0.12s;

  /* El pin final aterriza (40% de su caída ≈ 0.28s) justo cuando la
     ruta llega a él: si se mueve la ruta, el pin la sigue. */
  --delay-pin-end: calc(var(--delay-route) + var(--dur-route) - var(--dur-pin) * 0.4);
}

@supports (height: 100dvh) {
  :root {
    --page-h: 100dvh;
  }
}