/*
 * Sistema de diseño — 3Destiny
 *
 * Único lugar donde viven los valores. Ningún componente escribe un color,
 * un tamaño o un espaciado a mano: todo sale de acá.
 *
 * Este archivo es TAMBIÉN la fuente de la paleta del editor: `theme.json` no
 * repite ningún hex, sus presets apuntan a estas variables (ver theme.json).
 * Cambiar un color acá lo cambia en el sitio y en el editor a la vez.
 *
 * Procedencia de cada valor:
 *
 *   MEDIDO   muestreado del lienzo de Figma a 100% sobre un área plana grande.
 *            Fiable: la compresión de la captura casi no afecta a superficies
 *            amplias de color uniforme.
 *
 *   PACTADO  valor acordado por escrito con el cliente (acta del 18/08/2026 y
 *            propuesta de mejora de contraste del contrato).
 *
 *   TODO(figma)  todavía aproximado. Son los colores de acento, que en el
 *            diseño aparecen como líneas de 2-3 px e iconos chicos sobre fondo
 *            negro. Ahí el submuestreo de color de la captura promedia el
 *            acento con el fondo y lo devuelve lavado, así que no se pueden
 *            recuperar por muestreo: hay que leerlos del modo desarrollo.
 */

:root {
  /* ---- Superficies ---------------------------------------------------- *
   * `--c-bg` es el TOKEN MADRE. Todo el resto de la escala de superficies se
   * deriva de él mezclando un tinte frío (`--c-lift`) en proporciones fijas:
   * subir o bajar el fondo mueve la escala entera sin dejar ningún gris
   * huérfano que haya que recordar actualizar a mano.
   *
   * El tinte no es blanco puro a propósito: en el diseño las superficies se
   * van poniendo levemente más azules a medida que suben, y mezclar blanco
   * las desaturaría hacia un gris plano.
   */
  --c-lift: #c3cee6;

  /*
   * PACTADO (acta 18/08): el cliente ve el negro del Figma (#07080C) demasiado
   * oscuro y pide como base el tono de la sección "Lo que diferencia a
   * 3Destiny". Este valor es un escalón perceptible por encima del negro
   * original (≈2,4× su luminancia) y mantiene el registro "dark, pero no tan
   * oscuro".
   *
   * TODO(figma): reemplazar por el hex exacto de esa sección en cuanto llegue
   * el modo desarrollo. Es UN valor: el resto de la escala se recalcula solo.
   */
  --c-bg: #0f1217;

  /*
   * Las proporciones NO son estéticas: son la separación que hace falta para
   * que un escalón se vea. Un cambio de superficie empieza a leerse alrededor
   * de 1,10:1 de contraste entre las dos; por debajo de eso el ojo no lo
   * registra y la página se lee plana aunque el CSS diga que hay bandas.
   *
   * Las anteriores (2,5 / 4,5 / 8 / 9 / 15 %) daban esto, medido en navegador:
   *
   *   bg → bg-elev      1,045:1   ← la alternancia de bandas, invisible
   *   bg → surface      1,077:1   ← la tarjeta sobre el fondo, invisible
   *   surface → soft    1,110:1   ← el borde de la tarjeta, invisible
   *
   * Es la causa mecánica del "no se sigue un estilo / se ve plano": el borde
   * era lo único que separaba una caja de su fondo, y tampoco llegaba.
   *
   * El techo NO es estético, es de contraste: el texto atenuado
   * (`--c-text-faint` / `--c-text-mono`) vive sobre `--c-surface`, y cuanto
   * más clara la superficie, menos contrasta. A 10 % de tinte la superficie
   * queda en #21252c y el texto atenuado da 4,83:1 — por encima del 4,5:1 de
   * AA y por encima del peor par que tenía el sitio antes (4,81:1). Un punto
   * más de tinte lo baja de ese piso, así que 10 % es el máximo, no una
   * preferencia.
   *
   * Los dos escalones de borde SÍ pueden subir todo lo que haga falta: no
   * llevan texto encima. Suben hasta 1,67:1 y 2,11:1 contra el fondo, que es
   * donde un borde de 1 px se lee como el canto de una caja.
   *
   * Contraste resultante contra `--c-bg`, medido:
   *   bg-elev 1,111 · surface 1,220 · surface-2 1,340 · soft 1,674 · border 2,112
   */
  --c-bg-elev:     color-mix(in srgb, var(--c-lift) 6%, var(--c-bg));
  --c-surface:     color-mix(in srgb, var(--c-lift) 10%, var(--c-bg));
  --c-surface-2:   color-mix(in srgb, var(--c-lift) 15%, var(--c-bg));
  --c-border-soft: color-mix(in srgb, var(--c-lift) 22%, var(--c-bg));
  --c-border:      color-mix(in srgb, var(--c-lift) 30%, var(--c-bg));

  /* Derivados del fondo que antes estaban escritos a mano en dos hojas: la
     cabecera translúcida y el halo del anillo de foco. */
  --c-header-bg:   color-mix(in srgb, var(--c-bg) 82%, transparent);
  --c-focus-halo:  color-mix(in srgb, var(--c-bg) 85%, transparent);

  /* ---- Texto ---------------------------------------------------------- *
   * Los tonos secundarios salen de la propuesta de mejora de contraste del
   * contrato: el cuerpo sube de #87888C a #A3A4A9 y las etiquetas de #66676C
   * (3,3:1, por debajo de AA) al gris de acá abajo.
   */
  --c-text: #ffffff;          /* MEDIDO */
  --c-text-muted: #a3a4a9;    /* PACTADO cuerpo de texto */

  /*
   * PACTADO, ajustado por medición DOS veces — y las dos por el mismo motivo:
   * el tono se elige contra la superficie más clara donde va a caer, no contra
   * el fondo.
   *
   *   1ª (18/08) el contrato proponía ~#84848a. Daba 4,34:1 sobre la
   *      superficie de entonces: por debajo de AA. Subió a #8b8c91 → 4,81:1.
   *
   *   2ª (21/08) al separar la escala de superficies (ver arriba), la
   *      superficie de tarjeta pasó de #171a20 a #21252c y #8b8c91 caía a
   *      4,58:1. Sigue siendo AA, pero por debajo del piso que el sitio ya
   *      tenía. Con #8f9095 —cuatro puntos por canal, imperceptible— vuelve a
   *      4,83:1 y ningún par de texto queda peor que antes del cambio.
   *
   * El ajuste siempre va hacia MÁS contraste: nunca se compra una superficie
   * más clara bajando el texto.
   */
  --c-text-faint: #8f9095;    /* etiquetas y antetítulos */
  --c-text-mono: #8f9095;     /* fuentes del dato y marcadores */

  /* ---- Marca ---------------------------------------------------------- *
   * El diseño usa dos tonos del mismo azul con papeles distintos:
   * el sólido para superficies (botón, línea superior de tarjeta) y el claro
   * para texto sobre fondo oscuro (etiquetas, enlaces, iconos). El claro
   * existe porque el sólido sobre negro no llega a contraste de lectura.
   */
  --c-primary: #1179c3;       /* MEDIDO botón y título del hero */

  /*
   * El azul del hover está en el TECHO de AA, y el techo está calculado.
   *
   * Era #1587d8 y daba 3,83:1 con texto blanco: por debajo del 4,5:1 que pide
   * la WCAG 1.4.3, en los cuatro sitios donde el sistema pinta un botón lleno.
   * Fallaba solo bajo el cursor, que es lo que hizo que pasara tres QA.
   *
   * Con texto blanco, 4,5:1 exige luminancia relativa Y <= 0,18333. El reposo
   * (#1179c3) ya gasta Y = 0,17734, así que para el hover queda un margen de
   * 3,4 % de Y y nada más. Barriendo los enteros de 8 bits de este mismo tono,
   * #107bc5 es el más claro que entra: Y = 0,18307 y 4,505:1.
   *
   * El primer candidato fue #147bc5, calculado en OKLCh sin redondear. El
   * navegador lo devolvió en 4,498:1 — el redondeo a 8 bits se comía los 0,03
   * que faltaban. Los números de acá salen de medir el hex, no el continuo.
   *
   * Y ahí está lo que hay que saber: ese escalón es de 0,695 en L* (49,172 ->
   * 49,867), por debajo del umbral en que el ojo distingue dos tonos planos
   * (~1,0). O sea que el hover "más claro" ya no se puede VER. Subir el croma
   * tampoco sirve: a este tono el color ya está en el borde de la gama sRGB.
   *
   * El margen sobre el 4,5 es de 0,005: si algún día cambia `--c-on-primary` o
   * el cuerpo del rótulo (hoy 14 px / 600, o sea texto normal y no grande),
   * este número hay que volver a calcularlo.
   *
   * Por eso la señal de "responde" no la lleva sola el relleno: la lleva el
   * FILO del botón, que ya existía (los tres llevan `border: 1px solid
   * transparent`) y que no es fondo de ningún texto, así que puede aclararse
   * todo lo que haga falta sin entrar en el cálculo de contraste.
   */
  --c-primary-hover: #107bc5;
  --c-primary-filo-hover: color-mix(in srgb, var(--c-on-primary) 55%, var(--c-primary-hover));
  --c-accent: #53b9fc;        /* MEDIDO enlaces e iconos */

  /* ---- El logotipo gigante del pie ------------------------------------ *
   * Tinta del wordmark que cierra la página (parts/footer-marca.php).
   *
   * Es decoración declarada (`aria-hidden`), así que NO le aplica el umbral
   * de contraste de texto. El criterio es el opuesto: tiene que leerse como
   * el cierre de la página sin robarle jerarquía al aviso legal, que va justo
   * debajo y ése sí es texto. Sale de la misma mezcla que la escala de
   * superficies —no es un gris huérfano: si mañana se mueve `--c-bg`, se
   * mueve con ella—.
   *
   * El 30 % está elegido comparando en navegador contra 22 / 26 / 34 / 40:
   * por debajo la marca se lee como una mancha y deja de ser un cierre; por
   * encima empieza a pelearse con los enlaces del pie, que sí hay que leer.
   *
   * Da el mismo valor que `--c-border`, y aun así vive aparte a propósito:
   * un borde delimita una caja y tiene que verse siempre; esto es decoración
   * `aria-hidden` sin piso de contraste. Atarlos haría que tocar el canto de
   * las tarjetas moviera el logotipo del pie.
   */
  --c-marca-pie: color-mix(in srgb, var(--c-lift) 30%, var(--c-bg));

  /*
   * Los tres colores del ISOTIPO (la variante "completo" del pie). No son los
   * de la paleta del sitio y no deben serlo: son los del archivo de marca que
   * mandó el cliente. El azul del logo (#1579BE) está a cuatro puntos del
   * `--c-primary` medido en el Figma (#1179C3) — parecidos, pero no el mismo,
   * y el logotipo se pinta con SU azul.
   */
  --c-marca-iso-disco: #1579be;
  --c-marca-iso-lente: #ffffff;
  --c-marca-iso-pupila: #fb2723;

  /*
   * Proporción de la tinta de cada variante, para reservar el alto de la caja
   * antes de pintar y no mover un píxel de la maqueta.
   *
   * Son el bbox MEDIDO con `getBBox()` sobre el archivo de marca (no el
   * viewBox del archivo, que trae aire alrededor). Las mismas cuatro cifras
   * están en el `viewBox` que emite parts/footer-marca.php: si cambia el
   * archivo de marca, cambian los dos sitios o la caja deja de coincidir con
   * la tinta y aparecen bandas vacías arriba y abajo.
   */
  --ratio-marca-wordmark: 315.3 / 70.5;
  --ratio-marca-completo: 539.6 / 189.2;

  /* La variante `lockup` no sale del archivo: se arma reencuadrando las dos
     piezas (el cálculo está en parts/footer-marca.php). Su caja es el
     resultado de ese armado, por eso las cifras no son un bbox medido. */
  --ratio-marca-lockup: 424.58 / 88.13;

  /*
   * Cuánto se le come el pie al wordmark por abajo.
   *
   * Es un PORCENTAJE DEL ANCHO del contenedor, no píxeles: así el gesto es
   * idéntico a 320 y a 2560 sin una sola media query, y el número no sale de
   * "lo que se veía bien en mi pantalla".
   *
   * --pie-a-recorte   La geometría, medida con `getBBox()` sobre el archivo: el
   *   bbox va de y=58,4 a y=128,9; la LÍNEA DE BASE está en y=116,9 (el bottom
   *   máximo de siete de los ocho trazos) y lo que sigue hasta 128,9 son las
   *   12,0 unidades de la cola de la "y".
   *
   *   Se probaron los dos cortes y se eligió el segundo:
   *
   *     3,806 %  (= 12,0 / 315,3) corta EXACTAMENTE en la línea de base. El
   *              gesto es el más limpio de los dos —la raya cae sobre una línea
   *              tipográfica que ya existía—, pero la cola de la "y" desaparece
   *              entera y la marca pasa a leerse "3Destinv". Verificado en
   *              captura a 1440: no es una sospecha.
   *     1,903 %  (la mitad) corta a mitad de la cola. La "y" sigue siendo una
   *              "y", y se ve que la raya la cruza. Es lo que está puesto.
   *
   *   Cambiar entre los dos es cambiar este número y nada más.
   *
   *   ── Decidido en revisión con el cliente: 0 % ──────────────────────────
   *
   *   Los dos cortes se descartaron mirándolos, no razonándolos. El gesto de
   *   la referencia (Resend) funciona porque "Resend" NO TIENE DESCENDENTE:
   *   la línea de base es el borde natural de la palabra. "3Destiny" termina
   *   en "y", así que cualquier corte se come la cola:
   *
   *     3.806 %  al ras de la línea de base → se lee "3Destinv".
   *     1.903 %  media cola → la "y" sigue siendo una "y", pero el cliente la
   *              vio en pantalla y le pareció que quedaba mal. Tenía razón:
   *              una cola cortada a la mitad no se lee como un recorte
   *              deliberado, se lee como un error de exportación.
   *
   *   En 0 % el wordmark entra entero y la raya de la retícula pasa justo por
   *   debajo de la cola. Se conserva lo que importaba —la marca a todo el
   *   ancho, la raya pegada— y se deja de dañar el logotipo. Si algún día la
   *   marca pierde la "y", los dos valores de arriba vuelven a servir.
   */
  --pie-a-recorte: 0%;

  /* ---- Panel claro (embebidos de terceros) ---------------------------- *
   * El formulario y el calendario de HubSpot se montan en un <iframe> de otro
   * origen: su interior no se puede estilar desde acá, y pinta blanco. Antes
   * ese blanco caía crudo sobre la página oscura y se leía como un error.
   *
   * La respuesta no es esconderlo: es enmarcarlo. Estos tres tokens definen
   * "panel de luz dentro de una página oscura" —el mismo recurso que usa una
   * ficha impresa sobre fondo negro— para que el blanco del tercero quede
   * dentro de una caja que SÍ es del sistema: mismo radio, misma sombra y la
   * línea de acento de la vertical arriba.
   *
   * `--c-panel` no es blanco puro: un blanco de 255 sobre este fondo vibra en
   * los bordes. Es el mismo azul frío de `--c-lift` llevado a su extremo
   * claro, así que el panel pertenece a la paleta y no parece pegado.
   */
  --c-panel: #f2f4f8;
  --c-panel-line: #d9dee7;   /* canto del panel y separadores dentro de él */
  --c-on-panel: #14171c;     /* texto propio sobre el panel — 15,6:1 */

  /*
   * Aire entre el canto del panel y el widget de dentro. Empieza en CERO y no
   * en un valor cómodo por una medida dura: el calendario de HubSpot tiene un
   * ancho mínimo propio de 312 px, y a 320 px de ventana la caja disponible ya
   * queda por debajo de eso. Cada píxel de relleno es un píxel más de
   * calendario que hay que arrastrar para ver.
   *
   * Desde 480 px sobra ancho y el panel puede permitirse el marco.
   */
  --panel-inset: 0px;

  /*
   * Los dos cantos del panel claro. Están acá y no escritos dentro de la regla
   * porque el alto reservado del embebido tiene que sumarlos para no dejar
   * hueco ni provocar salto: con el valor suelto en dos sitios, cambiar el
   * borde de arriba dejaría el cálculo mintiendo en silencio.
   */
  --panel-linea: 1px;         /* canto del panel */
  --panel-linea-acento: 3px;  /* línea de la vertical, arriba */

  /* Texto que va ENCIMA del azul sólido (botones, enlace de salto). No es
     `--c-text` por casualidad de que ambos sean blancos: si el botón cambiara
     a un fondo claro, este token cambia y el del sitio no. */
  --c-on-primary: #ffffff;

  /* ---- Acentos por vertical ------------------------------------------- *
   * Una sola plantilla de vertical: la página define --c-vertical y
   * --c-vertical-soft, y todos los componentes de esa página los heredan.
   * Cambiar de vertical es cambiar dos variables, no duplicar CSS.
   */
  --c-farma: #147bc2;              /* MEDIDO línea superior de tarjeta */
  --c-farma-soft: #53b9fc;         /* MEDIDO etiqueta, icono y enlace */
  --c-capacitacion: #13b7b6;       /* MEDIDO */
  --c-capacitacion-soft: #52dddd;  /* MEDIDO */
  --c-ecommerce: #7b52e0;          /* TODO(figma) derivado del icono medido #a280ff */
  --c-ecommerce-soft: #a280ff;     /* MEDIDO */
  --c-marketing: #e0453d;          /* TODO(figma) derivado del icono medido #ff625a */
  --c-marketing-soft: #ff625a;     /* MEDIDO */

  /*
   * Acento de una vertical que todavía no tiene color propio (el cliente crea
   * una quinta línea de negocio). Es un gris azulado del sistema, a propósito:
   * si cayera en el azul de marca sería casi el mismo tono que Farma (#147bc2)
   * y las dos tarjetas se leerían como la misma vertical. Un neutro dice
   * "todavía sin color asignado" sin romper la paleta.
   *
   * El tono claro es el que va sobre texto: 8,9:1 contra la superficie oscura.
   */
  --c-vertical-neutral: #7c8794;
  --c-vertical-neutral-soft: #c3cad4;

  --c-vertical: var(--c-primary);
  --c-vertical-soft: var(--c-accent);

  /* ---- Tipografía ------------------------------------------------------ *
   * Montserrat, auto-alojada (acta 18/08: licencia SIL OFL, se sirve desde el
   * dominio del cliente). Los cuatro pesos del diseño viven en assets/fonts/
   * como subconjunto latino; el bloque @font-face está al final del archivo.
   *
   * "Montserrat Fallback" es Arial con sus métricas ajustadas a las de
   * Montserrat: mientras la fuente propia carga, el texto ya ocupa el alto y
   * el ancho definitivos, así que al llegar no salta nada. Sin ese ajuste el
   * intercambio mueve el titular, que es justo el elemento que mide el LCP y
   * el que aporta el CLS.
   */
  --font-sans: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* El diseño usa monoespaciada para antetítulos, fuentes de datos y los
     marcadores de media. Es un recurso de estilo, no un accidente. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /*
   * La escala tipográfica es fluida contra la VENTANA (`vw`) a propósito, y es
   * la única familia de valores del sistema que lo hace. El cuerpo de texto de
   * una página no se elige contra el ancho de la caja donde cae —si no, el
   * mismo párrafo se leería a un tamaño dentro de una tarjeta y a otro dentro
   * de una columna—, se elige contra la pantalla que lo está leyendo. Lo que sí
   * se mide contra el contenedor son los rellenos y los repartos internos de
   * cada componente: ahí el sistema usa `cqw` (ver el bloque "Contenedores" al
   * final de components.css).
   */
  --fs-display: clamp(2.25rem, 1.35rem + 4vw, 4.5rem);

  /*
   * Los dos escalones POR ENCIMA de `--fs-display`. No son titulares: son
   * cifras y palabras que funcionan como imagen —la palabra de la cinta de
   * verticales y el "404"—. Estaban escritos a mano dentro de su componente,
   * que es como el sitio terminó con dos tamaños de pantalla completa que
   * nadie podía comparar sin abrir dos archivos.
   */
  --fs-display-l: clamp(2.5rem, 1rem + 7vw, 7rem);    /* palabra de la cinta */
  --fs-display-xl: clamp(5rem, 3rem + 18vw, 11rem);   /* cifra de la 404 */

  --fs-h1: clamp(2rem, 1.3rem + 3.1vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h4: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);

  /*
   * La BAJADA: el párrafo que va debajo de un titular de cabecera (el hero, el
   * índice del blog, la entradilla de un artículo). Es un escalón propio entre
   * `--fs-body` (17) y `--fs-h3` (28), y existía tres veces escrito a mano con
   * tres topes distintos —24, 22 y 21 px— para el mismo papel. 22 px es el del
   * medio: unifica sin dejar ninguna de las tres irreconocible.
   */
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);

  /*
   * LA CIFRA. Los números grandes del sitio —los cuatro de la tarjeta de
   * resultados, el dato destacado de una ficha de caso— no son titulares: se
   * leen de un vistazo y de lejos, así que tienen su propia pareja de escalones
   * por encima de `--fs-h1`. Estaban escritos a mano dentro de su componente,
   * con dos tamaños que nadie podía comparar sin abrir dos archivos.
   *
   * Hubo un segundo escalón, `--fs-metric-lg`, para la cifra ÚNICA de la ficha
   * de caso. La ficha se retiró (6650556) y el bloque que la reemplaza pone su
   * métrica en `--fs-h2` a propósito —es el dato del caso, no el titular—, así
   * que ese escalón se quedó sin un solo consumidor y se retiró con él.
   */
  --fs-metric: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);

  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Letra auxiliar: pies de imagen, marcadores de media, textos de ayuda y
     errores del formulario. Estaba escrita a mano cinco veces. */
  --fs-micro: 0.8125rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;

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

  --tracking-eyebrow: 0.12em;

  /* Versalitas en la fuente de texto (no en la monoespaciada): el rótulo del
     botón principal, el nombre de la marca en una ficha de caso. Sin espaciar,
     las mayúsculas de Montserrat se apelmazan. Estaba escrito a mano cuatro
     veces con el mismo valor. */
  --tracking-caps: 0.04em;

  /* Los titulares grandes cierran el espaciado; cuanto mayor el cuerpo, más.
     Son dos escalones, no siete valores sueltos repartidos por el archivo. */
  --tracking-tight: -0.025em;    /* títulos de sección y de ficha */
  --tracking-tighter: -0.03em;   /* cifras y titulares de pantalla completa */

  /* Sólo para `--fs-display-xl`. A 176 px el espaciado normal abre huecos que
     se leen como si el número estuviera partido; a este cuerpo la letra tiene
     que cerrar mucho más que un titular. No usar por debajo de 80 px. */
  --tracking-display: -0.05em;

  /* ---- Espaciado ------------------------------------------------------- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-s: 1rem;
  --sp-m: 1.5rem;
  --sp-l: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;

  /* Aire vertical entre secciones, también fluido */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 760px;  /* cuerpo de los posts */

  /* Ancho de un formulario corto en una columna (el buscador). Existía tres
     veces con tres valores distintos según en qué página cayera. */
  --measure-form: 32rem;

  /*
   * MEDIDA DE LECTURA. Ancho máximo de un bloque de texto corrido.
   *
   * El número sale de una medición, no del ojo. Medido en este sitio, con
   * Montserrat y el copy real en español:
   *
   *   1ch (el ancho del "0")            = 11,253 px sobre un cuerpo de 17 px  → 0,662em
   *   avance medio de un carácter       =  8,740 px sobre ese mismo cuerpo    → 0,514em
   *                                       (760 px de columna daban 87 caracteres por línea)
   *
   *   56ch × 0,662 / 0,514 ≈ 72 caracteres por línea.
   *
   * 72 cae dentro de la franja cómoda de 60-75 que exige la auditoría, con un
   * punto de margen antes del techo. Va en `ch` y no en píxeles justamente para
   * que la CUENTA se conserve: si mañana cambia el cuerpo o la fuente, el ancho
   * se mueve con ella y las líneas siguen teniendo 72 caracteres.
   *
   * Contexto de por qué hacía falta: `--container-narrow` (760 px) se venía
   * usando como si fuera la medida de lectura, y medido da 87 caracteres por
   * línea — 12 por encima del techo. Son dos cosas distintas: 760 px es el
   * ancho de la COLUMNA de un artículo (donde también caen imágenes, tablas y
   * vídeos a ancho completo); esto es el ancho del PÁRRAFO dentro de ella.
   */
  --measure: 56ch;

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


  /*
   * Alto y ancho mínimos de cualquier cosa que se pueda tocar con el dedo:
   * botones, campos, números de paginación, chips. Es el mínimo que pide la
   * WCAG 2.5.8 (24 px) con el margen cómodo que recomienda la 2.5.5 (44 px).
   * Vive acá para que subirlo sea una línea y no una cacería por el archivo.
   */
  --tap-target: 44px;

  /* El piso absoluto: 24 px es lo que exige la WCAG 2.5.8 y por debajo de eso
     no baja NADA que se pueda pulsar, ni siquiera un enlace de texto dentro de
     una tarjeta. `--tap-target` es la medida cómoda; esta es la infranqueable. */
  --tap-target-min: 24px;

  /*
   * Alto de los controles. DOS escalones y no cuatro: el sitio tenía cuatro
   * definiciones del mismo botón con tres alturas distintas (44 / 48 / 52) y
   * dos rellenos horizontales, que es exactamente lo que el cliente lee como
   * "no se sigue un estilo".
   *
   *   --control-h      todo lo que se pulsa: botones, campos, enviar del
   *                    buscador, chips, píldoras. Es `--tap-target`, así que
   *                    la medida cómoda de dedo y la altura del botón son el
   *                    mismo número por definición y no pueden separarse.
   *
   *   --control-h-lg   la llamada a la acción principal de una pantalla. Hay
   *                    una por página como mucho; si hubiera dos, ninguna
   *                    sería la principal.
   */
  --control-h: var(--tap-target);
  --control-h-lg: 3.25rem;

  /* Relleno horizontal del control. UNO solo: estaba escrito a mano en cada
     botón y por eso el de enviar del formulario no coincidía con el de al
     lado. El tamaño grande crece de alto, no de ancho. */
  --control-pad-x: var(--sp-m);

  /*
   * Alto real de la cabecera pegajosa. Este valor es sólo el respaldo para el
   * primer pintado y para cuando no hay JavaScript: `assets/js/nav.js` lo
   * reescribe con el alto MEDIDO y lo mantiene al día con un ResizeObserver.
   *
   * Hace falta medirlo porque la cabecera no tiene un alto fijo: a 320 px la
   * fila envuelve y pasa de 73 a 97 px sin que ninguna media query lo sepa.
   * De acá sale el desplazamiento de los saltos a ancla (ver base.css).
   *
   * No confundir con `--header-bottom`, que también escribe `nav.js`: aquélla
   * es la POSICIÓN del borde inferior contando desde el borde de la ventana
   * —incluye los 3 px de la franja de acento mientras la página está sin
   * desplazar— y de ahí sale el alto máximo del panel desplegable. Medido: 76
   * contra 73. Las dos vivían bajo este nombre y la segunda pisaba a la primera.
   */
  --header-h: 73px;

  /* ---- Logos de cliente ------------------------------------------------ *
   * Los 48 archivos entran normalizados dentro de un lienzo de 240×120 con
   * alfa (ver scripts/normalizar-logos.py), así que TODOS tienen la misma
   * proporción: darles una caja fija y `object-fit: contain` los deja
   * comparables entre sí, y deja de importar la proporción del archivo que
   * suba el cliente mañana — el que no sea 2:1 se centra en la caja en vez de
   * deformarse.
   *
   * 48 px de alto y no 28: a 28 el lienzo se ve entero, pero la tinta de un
   * logotipo apaisado ocupa solo su franja central. Medido sobre los
   * archivos: Johnson & Johnson dibuja 43 px de los 120 del lienzo, así que a
   * 28 px de caja su nombre quedaba en 10 px y era ilegible. A 48 sube a 17.
   */
  --logo-h: 2.5rem;
  --logo-w: 5rem;

  /*
   * Curva de igualación de la tinta gris, MEDIDA sobre los 27 logos que van
   * en el trato "color".
   *
   * Antes era `brightness(1.6)`, que multiplica: cualquier tono por encima de
   * 0,63 sale a blanco puro. Medido sobre los archivos reales, eso convertía
   * en un rectángulo blanco al 100 % de la tinta de Merck, al 95 % de la de
   * Tottus y al 60 % de la de McCain — logotipos cuya marca ES un bloque de
   * color sólido.
   *
   * `contrast(0.55) brightness(1.29)` es la misma idea sin recortar: comprime
   * el rango contra el medio y lo sube, y está calibrada para que el blanco
   * puro caiga EXACTAMENTE en 1,0 (0,775 × 1,29 = 1,0). Nada satura.
   * Medido: la mediana de tinta del grupo pasa de 0,39 a 0,57 sobre 1 —el
   * mismo peso visual que buscaba el 1,6— con cero píxeles quemados.
   */
  --logo-tint: contrast(0.55) brightness(1.29);

  /* ---- Formas ---------------------------------------------------------- */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  /* ---- Sombras ---------------------------------------------------------- *
   * Dos, y con papeles distintos: la de la tarjeta que se eleva al pasar el
   * ratón, y la del panel que flota sobre el contenido (submenú). El halo del
   * foco no está acá porque no es profundidad: es el anillo de `--c-focus-halo`.
   */
  --shadow-card: 0 14px 34px rgb(0 0 0 / 0.35);
  --shadow-pop:  0 18px 40px rgb(0 0 0 / 0.45);

  /* ---- Movimiento ------------------------------------------------------ */
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Una cinta que acelera y frena no es una cinta: las dos del sitio van a
     velocidad constante y por eso su curva se declara, no se improvisa. */
  --ease-linear: linear;

  /* Escalón del encadenado de entrada del hero. Un solo valor gobierna el
     ritmo de toda la secuencia. */
  --stagger: 90ms;

  /* ---- Capas ------------------------------------------------------------ */
  --z-header: 100;
  --z-overlay: 200;
}

/*
 * Contraste MEDIDO en navegador (no estimado) de los pares que existen de
 * verdad en el sitio. Se recalculó entero al separar la escala de superficies
 * (21/08):
 *
 *   sobre el fondo (#0f1217)
 *     blanco   #ffffff  → 18,76:1   AAA
 *     cuerpo   #a3a4a9  →  7,54:1   AAA   (el contrato pedía ≥7:1)
 *     etiqueta #8f9095  →  5,89:1   AA
 *     enlace   #53b9fc  →  8,68:1   AAA
 *
 *   sobre la banda alterna (#1a1d23)
 *     cuerpo   #a3a4a9  →  6,79:1   AA
 *     etiqueta #8f9095  →  5,30:1   AA
 *
 *   sobre la superficie de tarjeta (#21252c), que es el peor caso del texto
 *     cuerpo   #a3a4a9  →  6,18:1   AA
 *     etiqueta #8f9095  →  4,83:1   AA   ← el piso del sistema
 *
 *   sobre la superficie de hover (#2a2e36) NO va texto atenuado: solo blanco
 *   (13,6:1) y cuerpo (5,47:1). Es una regla del sistema, no una casualidad —
 *   ahí el atenuado daría 4,28:1 y no pasaría AA.
 *
 *   blanco sobre el botón #1179c3 → 4,62:1  AA (texto normal)
 *
 * Y el contraste de los bordes contra lo que delimitan, que es lo que hace
 * que una tarjeta se lea como una caja:
 *   --c-border-soft (#373b45) sobre el fondo 1,67:1 · sobre la tarjeta 1,37:1
 *   --c-border      (#454a55) sobre el fondo 2,11:1 · sobre la tarjeta 1,73:1
 *
 * Acentos por vertical sobre el fondo, en su variante `-soft` (la que se usa
 * en texto chico): farma 8,68 · capacitación 11,39 · ecommerce 6,32 ·
 * marketing 6,39 — las cuatro por encima de 4,5:1.
 *
 * Los acentos SÓLIDOS (#147bc2 4,15 · #13b7b6 7,57 · #7b52e0 3,69 · #e0453d
 * 4,55) se usan solo en texto grande —el titular del hero y las palabras de la
 * cinta— y en trazos decorativos, donde el mínimo AA es 3:1. Ninguno se aplica
 * a texto chico: para eso está la variante clara.
 */

/* ---- Tipografía propia ------------------------------------------------- *
 * Subconjunto latino de Montserrat (SIL OFL 1.1, repo oficial de Julieta
 * Ulanovsky, servido por Google Fonts). Cuatro pesos, ~16 KB cada uno.
 *
 * font-display: swap es deliberado: el texto se pinta de inmediato con el
 * respaldo métrico y cambia al cargar la definitiva. Con "block" el titular
 * quedaría invisible hasta que la fuente llegue, y ese titular es el elemento
 * que mide el LCP.
 *
 * Los pesos 400 y 700 se precargan desde inc/performance.php: son los dos que
 * aparecen sobre el pliegue (cuerpo y titular).
 */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Respaldo métrico. No es una fuente nueva: es la Arial del sistema (o su
 * equivalente métrico) con las métricas de Montserrat forzadas encima.
 *
 * Montserrat es ~10% más ancha y ~7% más alta que Arial al mismo tamaño en px.
 * Sin ajustar, el titular se reacomoda entero cuando llega la fuente propia:
 * medido acá, 7 px de diferencia de alto de línea por cada 100 px de cuerpo, y
 * un ancho de línea 10% menor que cambia dónde corta el texto. Con el ajuste,
 * el respaldo ya ocupa el sitio definitivo y el intercambio no mueve un píxel.
 *
 * Van DOS caras y no una: `local("Arial")` resuelve siempre a la Arial regular,
 * así que una sola cara declarada de 400 a 700 servía el titular en regular
 * estirado —y volvía a fallar el ancho por 4,5%—. Cada cara pide su variante.
 *
 * Origen de los números, todos medidos en navegador contra la Montserrat ya
 * cargada: size-adjust = relación de anchos (110,2%); ascendente y descendente
 * = las métricas de Montserrat (968 y 251 sobre 1000 unidades por em)
 * divididas por ese size-adjust, porque el navegador las escala después.
 */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("Arimo");
  font-weight: 400 500;
  font-style: normal;
  size-adjust: 110.2%;
  ascent-override: 87.84%;
  descent-override: 22.78%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 600 700;
  font-style: normal;
  size-adjust: 110.2%;
  ascent-override: 87.84%;
  descent-override: 22.78%;
  line-gap-override: 0%;
}

/* Desde 480 px el panel de los embebidos ya puede permitirse su marco: por
   debajo compite con el ancho mínimo del calendario (ver `--panel-inset`). */
@media (min-width: 480px) {
  :root { --panel-inset: var(--sp-2xs); }
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --stagger: 0ms;
  }
}