/* ============================================================================
   AbyNova · tokens.css
   Autoalojado en Cloudflare Pages, entra por CSSBLOCK_FILE. Nunca dentro de
   <style>: el sanitizador de Bitrix lo borra.

   POSICIONAMIENTO: "AbyNova no se configura. Se contrata."

   Dos superficies, no dos temas:
     · PAPEL  — la superficie por defecto. Ahí vive el 80% del contenido.
     · NOCHE  — solo las bandas donde aparece la escena 3D.
   No es una preferencia del usuario: son dos zonas de la misma página, y cada
   una lleva su propio juego de textos verificado contra WCAG.

   Todos los ratios de abajo están CALCULADOS con la fórmula WCAG 2.1
   (luminancia relativa, (L1+0.05)/(L2+0.05)), no estimados a ojo.
   ============================================================================ */

:root {
  color-scheme: light;

  /* ================================================== ESPACIADO · base 4px */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* El techo de 7rem era el delator más grande después de la fuente: los sitios
     de plantilla viven entre 64 y 96 px, los caros entre 120 y 180. Y el PISO
     importa más, porque el móvil es donde más barato se lee. */
  /* TRES pesos, no uno. Antes las 12 secciones tenían exactamente el mismo
     padding —129,6 px medidos, las doce, sin una excepción— y una página con un
     solo espacio "entre cosas" se lee como un metrónomo: el visitante no puede
     decir cuál sección importa más, porque el diseño no se lo dice. */
  --section-py: clamp(4.5rem, 9vw, 9.5rem);        /* 72 -> 152 · el defecto */
  --section-py-sm: clamp(3rem, 5.5vw, 5.5rem);     /* 48 -> 88  · apoyo */
  --section-py-lg: clamp(6.5rem, 13vw, 13.5rem);   /* 104 -> 216 · los momentos */
  --section-gap: clamp(2.5rem, 5.5vw, 4.5rem); /* encabezado -> contenido */
  --stack: var(--sp-4);

  /* ================================================== TIPOGRAFÍA */
  /* Las dos familias se cargan en fonts.css, autoalojadas. El respaldo NO es la
     pila del sistema pelada: es una familia con métricas ajustadas, que ocupa
     el mismo alto que la real y por eso el texto no salta cuando la web entra. */
  --font-sans: "Archivo", "Archivo Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", "Serif Respaldo", Georgia, "Times New Roman", serif;

  --fs-100: .75rem;                                     /* 12 · legales */
  --fs-200: .8125rem;                                   /* 13 · chips */
  --fs-300: .875rem;                                    /* 14 · UI secundaria */
  --fs-400: clamp(1rem, .97rem + .15vw, 1.0625rem);     /* 16→17 · cuerpo */
  --fs-500: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem); /* 18→21 · bajada */
  --fs-600: clamp(1.25rem, 1.14rem + .55vw, 1.625rem);  /* 20→26 · h4 */
  --fs-700: clamp(1.5rem, 1.28rem + 1.05vw, 2.0625rem); /* 24→33 · h3 */
  /* ── el corte entre "texto" y "display" ─────────────────────────────
     Antes la escala era 17·20·24·28·40·52: pasos de 1,18 · 1,20 · 1,17 y un
     salto de solo 1,30 de h2 a h1. En móvil el titular del héroe era 4,6 px
     más grande que el de "Preguntas": eso no es jerarquía, es empate. */
  --fs-800: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);  /* 28->40 · h2 de apoyo. Era 26->36 y perdia contra el h3 */  /* 26→36 · h2 de apoyo */
  --fs-850: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);       /* 32→52 · h2 de los momentos */
  --fs-900: clamp(2.5rem, 1.55rem + 3.9vw, 4.25rem);    /* 40→68 · h1, uno por página */

  /* 🔑 1.06 era un bug esperando en ES y PT: las MAYÚSCULAS ACENTUADAS
     —Á É Í Ó Ú, Ã Õ— son más altas que la altura de mayúscula. A 1.06, un
     titular de dos líneas donde la segunda empieza con Á y la primera termina
     en g/j/p se choca. 1.08 es el piso. */
  --lh-tight: 1.08;  --lh-snug: 1.2;  --lh-ui: 1.4;
  --lh-body: 1.55;   --lh-loose: 1.65;

  --tracking-tight: -.02em;   /* solo de --fs-800 para arriba */
  --tracking-wide: .09em;     /* eyebrows en mayúsculas: .06 era muy apretado a 13 px */

  --fs-precio: clamp(2.75rem, 2rem + 3.2vw, 4rem);  /* 44→64 · el precio es el número grande */

  --measure-bajada: 52ch;     /* una bajada se lee de una pasada o no se lee: 71ch era un párrafo con tamaño de bajada */
  --measure: 62ch;            /* 66 es el número del libro de texto; el copy de marketing va en 60-62 */
  --measure-tight: 46ch;      /* bajada del héroe */

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ================================================== COLOR · PRIMITIVOS */
  /* --- Papel: blanco CÁLIDO. Toda la categoría usa grises fríos de Tailwind;
         un papel cálido se lee como impreso, como algo que ya existía. Es el
         cambio de un solo carácter que más diferencia produce. */
  --papel:        #FCFAF6;
  --papel-hundido:#F4F0E8;
  --papel-alto:   #FFFFFF;
  --divisor:      #E6DFD2;

  --tinta:        #17151F;   /* 17.31:1 sobre papel — AAA */
  --tinta-2:      #4F4859;   /*  8.38:1 sobre papel — AAA */
  --tinta-3:      #6E6879;   /*  5.14:1 sobre papel — AA  */
  --borde-control:#857E8F;   /*  3.75:1 sobre papel — AA UI (1.4.11) */

  /* --- Latón. Reemplaza al "Oro Nova" #FFB224 (14-ago-2026).
     POR QUÉ SE FUE EL ORO: medido, #FFB224 está a ΔE76 = 12,0 del amarillo de
     McDonald's (#FFC72C) — "misma familia de un vistazo" — y con saturación
     100%, igual que Lay's y Shell. Pero el color no era el problema: el
     problema era el ÁREA. Había 675 botones rellenos de ese amarillo contra 20
     bandas .noche. El sitio era un cartel amarillo con veinte momentos oscuros.

     🔑 REGLA QUE NO SE ROMPE: sobre superficie CLARA el latón nunca rellena un
     área mayor a 44×44 px. Es filete, ícono y tipo chico. Sobre .noche sí puede
     rellenar, porque ahí el metal es luz y no pintura. Sin esta frase, en seis
     meses alguien vuelve a poner un botón dorado. */
  --laton:        #8C6A1E;   /*  4.80:1 sobre papel — AA · íconos y filetes con información */
  --laton-linea:  #C4A15A;   /*  2.34:1 — DECORATIVO PURO, jamás porta información */
  --arena:        #F1E9D8;   /* fondo de pastilla de acento */
  --bronce:       #5E3F14;   /*  9.17:1 sobre papel — AAA · texto de acento */
  --bronce-icono: #8C6A1E;   /*  4.80:1 sobre papel — AA  */
  /* Metal sobre oscuro: ahí sí rellena. */
  --laton-noche:   #E7C67F;  /* 11.54:1 sobre noche — AAA */
  --laton-relleno: #D9B463;  /* relleno metálico, SOLO sobre oscuro o video */
  --sobre-laton:   #141005;  /*  9.64:1 sobre --laton-relleno — AAA */

  /* --- Secundarios. Aparecen poco y a propósito. */
  --corona:       #A3125C;   /*  7.20:1 sobre papel — AAA */
  --indigo:       #4B3FA8;   /*  7.82:1 sobre papel — AAA */

  /* --- Noche: índigo-ciruela, no negro. Un #0A0A0A neutro se come el resplandor
         del render y deja un halo sucio; el índigo le da al oro un fondo
         complementario y el objeto emisivo flota en vez de quedar pegado. */
  --noche:        #120E1E;
  --noche-1:      #1B1630;
  --noche-2:      #241E3D;
  --noche-divisor:#342C52;

  --noche-text:   #F6F2EA;   /* 16.99:1 sobre noche — AAA */
  --noche-text-2: #C4BBD1;   /* 10.27:1 sobre noche — AAA */
  --noche-text-3: #9A90AD;   /*  6.29:1 sobre noche — AA  */
  --noche-oro:    #E7C67F;   /* 11.54:1 sobre noche — AAA (era #FFC24D) */
  --noche-borde:  #7A6BA6;   /*  4.05:1 sobre noche — AA UI */

  /* ================================================== COLOR · SEMÁNTICOS */
  --bg:            var(--papel);
  --bg-alt:        var(--papel-hundido);
  --surface:       var(--papel-alto);

  --text:          var(--tinta);
  --text-muted:    var(--tinta-2);
  --text-subtle:   var(--tinta-3);      /* PROHIBIDO en cuerpo: solo metadatos */

  --border:        var(--divisor);
  --border-strong: var(--borde-control);

  /* 🔑 El botón primario es TINTA, no metal. Es el cambio que arregla el 90%
     del problema y toca los 675 botones de una sola vez: una pastilla amarilla
     saturada repetida 675 veces es lo que se leía como comida rápida. */
  --accent:        var(--tinta);        /* relleno de botón */
  --accent-hover:  #2A2340;             /* 14.26:1 con papel encima — AAA */
  --accent-text:   var(--bronce);       /* enlaces y texto de acento */
  --accent-icon:   var(--bronce-icono);
  --on-accent:     var(--papel);        /* 17.31:1 sobre tinta — AAA */

  --focus:         var(--indigo);       /* 7.82:1 sobre claro */
  --focus-noche:   var(--noche-oro);    /* 11.81:1 sobre oscuro */

  /* --- Estados. El VERDE significa éxito y nada más: es el verde de WhatsApp,
         y usarlo como color de marca nos vuelve uno más de los trescientos
         "conectá tu WhatsApp" del mercado.
         Ningún estado se comunica SOLO por color: cada uno lleva icono y
         palabra. Entre el 6% y el 8% de los varones tiene deficiencia al
         rojo-verde, y el comprador es mayoritariamente varón de 35 a 60. */
  --ok:        #0E7A4B;   /* 5.16:1 sobre papel */
  --ok-soft:   #DFF2EA;
  --aviso:     #7A4A00;   /* 7.18:1 sobre papel */
  --aviso-soft:#FBEFD2;
  --error:     #B3261E;   /* 6.27:1 sobre papel */
  --error-soft:#FDE4E4;
  --info:      var(--indigo);

  --ok-noche:    #4ADE9B;  /* 11.03:1 sobre noche */
  --aviso-noche: #FFCB6B;  /* 12.65:1 sobre noche */
  --error-noche: #FF9A9A;  /*  9.34:1 sobre noche */

  /* ================================================== ESCENA 3D
     Los leia el modulo 3D con getComputedStyle. Cambiar la paleta no obligaba a tocar
     un shader.
     La progresión núcleo casi blanco -> medio saturado -> borde saturado es
     cómo se ve una estrella de verdad. Poner emisión en un saturado puro hace
     que el resplandor se acumule y salga mostaza. */
  /* Una nova de verdad tiene el núcleo BLANCO, no amarillo. El error nunca fue
     el nombre: fue pintar la nova con el color del acento de interfaz, en vez
     de sacar el acento de la nova. */
  --gl-nucleo:   #FFF4D6;   /* centro casi blanco: el punto más brillante */
  --gl-medio:    #E7C67F;   /* latón, no oro saturado (era #FFC24D) */
  --gl-borde:    #E4568C;   /* contorno fresnel: define la silueta, no baña */
  --gl-profundo: #2A1A3E;   /* las crestas frías, para que no caigan a negro */
  --gl-polvo:    #E7C67F;
  --gl-fondo:    #0E0A18;

  /* ================================================== RADIOS
     16 px sobre una tarjeta de 340 es la proporción exacta de la app de
     delivery: Rappi, las billeteras, la comida rápida, todas viven entre 12 y
     20. Lo premium en 2026 es BIMODAL — filoso (0-4 px) o píldora entera
     (999 px) en contraste contra contenedores filosos. Lo que no es premium es
     todo lo que está en el medio. Una píldora adentro de una caja de 4 px hace
     que las dos se lean como decisiones; todo a 16 px no se lee como nada. */
  --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px;
  --r-full: 999px;
  --r-card: var(--r-md);   /* 4 px · era 16 */
  --r-btn: var(--r-sm);    /* 3 px · era 12 */
  --r-input: var(--r-sm);
  --r-media: 6px;          /* fotos y video: apenas más que las cajas */

  /* ================================================== ELEVACIÓN
     Una tarjeta que no se mueve lleva CERO sombra y 1 px de borde. Cuatro
     niveles de elevación es un hábito de librería de componentes, y varias
     sombras suaves sobre un fondo cálido son tarjetas flotando sobre beige:
     la estética exacta de la app que estamos tratando de no parecer.
     La sombra aparece en hover, y solo si el elemento de verdad se levanta. */
  --sombra: 32 20% 14%;
  --e1: 0 1px 2px hsl(var(--sombra)/.04);
  --e2: 0 1px 2px hsl(var(--sombra)/.05), 0 8px 24px hsl(var(--sombra)/.07);
  /* --e3 y --e4 se retiraron: nada en una landing necesita cuatro niveles. */

  /* ================================================== MOVIMIENTO */
  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 240ms; --dur-4: 380ms; --dur-5: 520ms;
  /* Con el primer punto de control en (.16, 1) la curva cubre el 90% de la
     distancia en el primer tercio del tiempo y después planea. Ese perfil
     —llega temprano, se asienta tarde— se lee como masa física. La curva
     anterior era casi lineal y se leía como interfaz. */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-entrada: cubic-bezier(.22,1,.36,1);

  /* ================================================== LAYOUT
     1200 px es el ancho por defecto de Bootstrap y de Tailwind: lo tiene
     literalmente todo. Bajarlo no quita contenido, agrega margen lateral — y
     el margen lateral es la señal más barata de "esto lo decidió alguien". */
  --container: 68rem;          /* 1088 · era 75rem/1200 */
  --container-narrow: 44rem;   /* 704 · texto largo, FAQ, legal */
  --container-wide: 84rem;     /* 1344 · solo el héroe */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --grid-gap: clamp(1.25rem, 2vw, 1.75rem);
  /* El padding interno de una tarjeta tiene que ser >= al hueco entre tarjetas.
     Al revés, las cajas se leen como fichas sueltas en un tablero. */
  --pad-card: clamp(1.5rem, 2.5vw, 2rem);

  --z-sticky: 100; --z-header: 200; --z-cta-movil: 300; --z-modal: 500;

  --tap-min: 44px;             /* nunca menos: se toca con el pulgar */
  --header-h: 56px;
  --cta-movil-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 48em) { :root { --header-h: 72px; } }

/* ============================================================================
   Nota sobre el modo oscuro: NO hay toggle de tema.
   La superficie por defecto es Papel a propósito (ver ESTADO_PROYECTO.md).
   El oscuro existe solo como banda .noche, y esas bandas llevan su propio juego
   de textos verificado — no dependen de ninguna media query. Así el sitio se ve
   igual en todos lados y no hay flash: el loader de Bitrix ejecuta el JS después
   del parseo, así que cualquier tema resuelto por JS parpadea.
   ========================================================================= */