/* tokens.css del panel · copia de src/styles/tokens.css (7-oct-2026); wp-admin no puede importar src/;
   regenerar con `cp` cuando cambie:
     cp src/styles/tokens.css panel/themes/ostos-panel/assets/tokens.css
   y volver a pegar debajo el bloque «Derivados del panel» (todo lo que va después de la marca
   «DERIVADOS DEL PANEL»). Hasta esa marca el archivo es idéntico byte a byte al del sitio:
   probar-piel.mjs compara los valores computados de :root contra src/styles/tokens.css. */

/* tokens.css · Ostos Rincón Gallardo · única fuente de valores del sitio y del DS.
   Deriva de ostos-marca/marca.json (paleta, tipografías) y de la escala de la referencia
   BelArosa (docs/fuente/belarosa-referencia.md). Un número escrito a mano fuera de aquí es un
   defecto (ADR-2). Los tokens de movimiento (--dur-*, --ease-*) se fijan con los valores medidos
   en docs/fuente/belarosa-animaciones.md. */

:root {
  /* ── Paleta de marca (los seis tonos, nada más) ── */
  --c-verde: #434F4B;        /* Verde institucional */
  --c-gris: #5B676B;         /* Gris azulado oscuro */
  --c-noche: #1E2523;        /* Verde noche */
  --c-salvia: #B8C6BF;       /* Salvia */
  --c-marfil: #F2EFE9;       /* Marfil */
  --c-blanco: #FFFFFF;       /* Blanco */
  --c-error: #9B2C2C;        /* color de servicio, solo error de formulario (6.5:1 sobre Marfil) */
  --c-error-inv: #F2B8B5;    /* error de servicio sobre banda oscura, añadido 18-sep-2026 (revisión
                                 fase 2, corrección 2): --c-error da 1.13:1 sobre Verde y 2.08:1 sobre
                                 Verde noche, invisible. Este rojo claro mide 5.00:1 sobre Verde y
                                 9.15:1 sobre Verde noche (fórmula WCAG 2.x, medido, no estimado). */

  /* ── Superficies (niveles, de claro a oscuro) ── */
  --sup-0: var(--c-marfil);  /* lienzo */
  --sup-1: var(--c-blanco);  /* banda clara alterna */
  --sup-2: var(--c-verde);   /* banda oscura, hero */
  --sup-3: var(--c-noche);   /* pie, cierre, hover profundo */

  /* ── Tintas por banda ── */
  --tinta: var(--c-verde);           /* texto sobre claro · 7.44 sobre Marfil */
  --tinta-2: var(--c-gris);          /* secundario sobre claro · 5.09 sobre Marfil */
  --tinta-inv: var(--c-marfil);      /* texto sobre oscuro · 7.44 sobre Verde */
  --tinta-inv-2: var(--c-salvia);    /* secundario sobre oscuro · 4.83 sobre Verde */
  --acento: var(--c-salvia);         /* decorativo: subrayado activo, hairline, medallón. Nunca relleno de botón */
  --scrim: color-mix(in srgb, var(--c-noche) 45%, transparent);      /* revisión fase 2, corrección
    13 (PCB-26): antes rgba(30,37,35,0.45) a mano en ds.css, fuera de tokens.css */
  --hover-inv: color-mix(in srgb, var(--c-marfil) 12%, transparent); /* revisión fase 2, corrección
    13 (PCB-26): antes rgba(242,239,233,0.12) a mano en Example.astro y Menu.astro */

  /* ── Bordes y hairlines ── */
  --hairline: var(--c-salvia);                 /* 1 px sobre claro */
  --hairline-inv: rgba(184, 198, 191, 0.4);    /* 1 px sobre oscuro (Salvia al 40 %) */
  --hairline-hoja: rgba(16, 24, 40, 0.08);     /* contorno de modal y hoja sobre claro */
  --hairline-hoja-inv: rgba(255, 255, 255, 0.08);
  --borde: var(--c-verde);                     /* botón de contorno sobre claro */
  --borde-inv: var(--c-marfil);                /* botón de contorno sobre oscuro */
  --borde-w: 1.5px;
  --hairline-w: 1px;         /* grosor de hairline literal, ~20 apariciones sin token (revisión
                                 fase 2, corrección 13) */

  /* ── Tipografía ── */
  --f-serif: 'Noto Serif', 'Noto Serif respaldo', Georgia, 'Times New Roman', serif;
  --f-sans: 'Noto Sans', 'Noto Sans respaldo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;  /* revisión fase 2, corrección 23 (P2
    PCB-9/PCB-199): chrome de documentación del DS (bloques de código), no tipografía de marca;
    no rompe la regla de dos familias */

  --t-caption: 0.75rem;                          /* 12 */
  --t-label: 0.875rem;                           /* 14 · botones, sub-nav, etiqueta sobre titular.
                                                     Revisión inspección-1 (F-fd875735): antes
                                                     0.8125rem (13px), un escalón fuera de la
                                                     escala 12/14/16/20/24/29/32-40/36-48/40-64 y
                                                     sin diferencia perceptible frente a 14. Colapsa
                                                     al mismo valor que --text-body-sm de la
                                                     referencia (14px/1.43/0.167em ≈ 2.34px
                                                     tracking), que es el rol real que cubre: la
                                                     otra mitad del rol "eyebrow 12-14px" de la
                                                     referencia la cubre --t-caption (12px). */
  --t-body-sm: 0.875rem;                         /* 14 */
  --t-body: 1rem;                                /* 16 */
  --t-sub: 1.25rem;                              /* 20 */
  --t-h4: 1.5rem;                                /* 24 */
  --t-h3: 1.8125rem;                             /* 29 · ratio 1.21 desde h4 y 1.38 hasta h2
                                                     (revisión fase 2, corrección 16: 28px daba
                                                     1.167, tres milésimas bajo el piso de 1.17
                                                     en todos los anchos) */
  --t-h2: clamp(2rem, 4vw, 2.5rem);              /* 32 → 40 */

  --lh-tight: 1.15;          /* F-3964b135: 1,1 cerraba la mancha del titular más que la referencia */
  --lh-display: 1.2;
  --lh-heading: 1.25;
  --lh-body: 1.5;
  --lh-label: 1.43;

  --track-caps: 0.125em;     /* versales en etiquetas y navegación secundaria */
  --track-caps-lg: 0.167em;  /* versales en botones y etiqueta sobre titular */
  --track-h2: -0.01em;

  /* ── Voces editoriales (rediseño, dirección creativa §4: "la identidad sin logotipo") ──
     Cinco tokens con nombre, cada uno con su propia interlínea y tracking, en vez de una escala de
     titulares compartida. Fundaciones-2, 19-sep-2026 (lote rediseño, ola 1).

     --t-display CAMBIA DE VALOR: antes era el "titular de página interior" (36-48px, --track-display
     0, ahora retirado); ahora es la voz Display de la dirección (statement del hero, cierre, numeral
     de área), 112 a 136px con clamp. El rol antiguo de --t-display (36-48, casi idéntico a la nueva
     voz Editorial) lo hereda --t-editorial: es el mapeo que usa la clase .t-display en global.css
     para no romper los organismos que aún no migraron (ver DECISIONES del informe de fundaciones-2).
     Metadata trae su propio par escritorio/móvil (12/11); Navegación no varía por ancho.

     A-3 (inspección A, 19-sep-2026): el Display se parte en DOS tamaños con nombre, y el serif
     baja de siete tamaños renderizados a cuatro.
       · `--t-display` (88 → 136) es el statement de cuatro a seis palabras: portada y cierre. El
         piso baja de 112 a 88 porque a 1024 un statement a 112 px no cabía en diez columnas y la
         respuesta anterior había sido capar el tamaño dentro de dos componentes
         (`max(--t-editorial, min(--t-display, 5.2vw))` en Statement y Cierre), lo que dejaba el
         statement de la portada en 74,88 px, MÁS PEQUEÑO que el H1 del aviso de privacidad, y la
         razón Display/Editorial en 1,16× a 1024. Ese tope se retira: una voz con dos tamaños
         según el componente no es una voz.
       · `--t-display-2` (56 → 96) es el H1 de las rutas interiores, que antes tomaba la voz
         Display entera y por eso se partía con guion en siete de trece títulos.
       · `--t-editorial-sm` (20 → 24) es el escalón Editorial pequeño: nombres del equipo, títulos
         de pieza de perspectiva, cita corta. Sustituye a los cuatro tamaños serif sueltos que la
         portada renderizaba fuera de las voces (29/700 de la cifra, 29/400 de los títulos de
         área, 24/400 del pull quote, 20/400 de nombres y piezas).
     Los cuatro serif del sitio quedan en 136 / 96 / 48 / 24 a 1440: razones de 1,5 · 1,8 · 2,0,
     escalones que se leen sin comparar (FCB-98, FCB-100). */
  --t-display: 3.25rem;                                     /* 52px, bajo 768 (dirección §4, columna 390) */
  --t-display-2: 2.5rem;                                    /* 40px, bajo 768 */
  --t-editorial: 1.75rem;                                   /* 28px, bajo 768 */
  --t-editorial-sm: 1.125rem;                               /* 18px, bajo 768 */
  --t-cuerpo: 1rem;                                          /* 16px, bajo 768 */
  --t-meta: 0.6875rem;                                       /* 11px, bajo 768 */
  --t-nav: 0.75rem;                                          /* 12px, sin variante móvil */
  --lh-voz-display: 1;         /* 0,95 a 1: el extremo abierto vive bajo 768, el cerrado desde 768 */
  --lh-voz-editorial: 1.15;
  --lh-voz-cuerpo: 1.55;
  --lh-voz-meta: 1.4;
  --lh-voz-nav: 1;
  --track-voz-display: -0.02em;
  --track-voz-meta: 0.14em;
  --track-voz-nav: 0.12em;

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

  /* ── Espaciado (grilla de 4, base 8) ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-30: 120px;
  --s-40: 160px;
  --s-60: 240px;

  --seccion-y: var(--s-20);          /* 80 escritorio */
  --seccion-y-md: var(--s-16);       /* 64 tableta */
  --seccion-y-sm: var(--s-12);       /* 48 móvil, nunca menos */
  --gutter: var(--s-6);              /* 24 */
  --ancho-pagina: 1200px; /* revisión inspección-1 (F-b09d8d7f): el tope de min() que evita tocar
    el borde a 1200 exactos vive solo en el media query de abajo (>=1200), no aquí. Puesto en
    :root sin condición, `100vw - 2×48` se vuelve la medida vinculante en TODO viewport bajo
    ~1296px (incluidos 390 y 768), porque ahí siempre da menos que 1200: dobla el gutter de 24 a
    72 en todo el sitio a móvil y tableta. Aquí se queda el valor plano de siempre; no cambia nada
    por debajo de 1200. */
  --ancho-hero: 42rem;       /* columna del titular del hero: no es prosa (reinspección: con --ancho-lectura el H1 pasaba a 4 líneas y el cambio de fuente daba CLS 0,05) */
  --ancho-lectura: 56ch; /* reinspección 19-sep: 68ch medían 81 a 86 caracteres reales (ch es el ancho del cero, un 24 % más que la media de Noto Sans); 56ch dan 65 a 72. revisión inspección-1 (F-6b1dd5cb): antes 680px fijo daba 88-93
    caracteres por línea a 16px (99 en el aviso del formulario a 14px), muy por encima del
    contrato de DESIGN.md §2 (65-72 ch) y de FCB-43/PCB-3 (45-75, nunca sobre 80). En `ch` la
    medida se ata al tamaño de fuente real del elemento que la consume, así que se sostiene sin
    importar en qué tamaño caiga el texto que la usa. */
  --publicacion-min: 240px;         /* ancho mínimo de una entrada de publicación en la rejilla de escritorio (18-sep) */
  --ancho-tarjeta: 700px;  /* añadido por organisms, 18-sep-2026: TarjetaEditorial.astro, "unidad
                              centrada de hasta 700 px" (docs/briefs/organisms.md, literal del brief;
                              no coincide con --ancho-lectura de 680px, así que es un token propio) */
  --ancho-media-tarjeta: 420px;   /* revisión fase 2, corrección 13: TarjetaEditorial.astro,
                                     max-width de la imagen, literal sin token */
  --ancho-publicacion: 320px;     /* revisión fase 2, corrección 13: Publicaciones.astro, ancho de
                                     una entrada en la tira horizontal, literal sin token */
  --gap: var(--s-6);
  --gap-fino: 2px;   /* revisión fase 2, corrección 13: Medallon.astro, separación entre renglones
                        del medallón informativo; por debajo de la grilla de 4, documentado aparte */
  --casilla: 20px;          /* revisión fase 2, corrección 13: cuadro de 20×20 (checkbox, insignia
                               numerada del sidebar del DS) */
  --icono-trazo: 2;         /* grosor del set de iconos en unidades del viewBox de 24 (iconos, 19-sep) */
  --icono-grupo: 18px;      /* revisión fase 2, corrección 13: icono de grupo del sidebar del DS */
  --kbd: 20px;               /* revisión fase 2, corrección 13: tecla <kbd> de la leyenda del DS */
  --punto: 8px;              /* revisión fase 2, corrección 13: punto romboidal de Enlace--dot y NavItem */
  --ds-buscador-icono: 15px; /* revisión fase 2, corrección 13: icono de lupa del buscador del DS */

  /* ── Forma ── */
  --r-0: 0;
  --r-campo: 4px;
  --r-pildora: 999px;
  --r-circulo: 50%;
  --medallon-aro-fuente: 7px;    /* en unidades del viewBox de 100 del aro del medallón (~11 px reales); el texto se ajusta a la circunferencia con textLength */
  --dur-aro: 60s;              /* una vuelta del aro del medallón */
  --hero-fondo-opacidad: 0.14; /* grabado a sangre del hero en luminosidad (ola 5) */
  --marco-hero: 280px;  /* añadido por atoms-molecules: tamaño del Marco.astro del hero (DESIGN.md, atom Marco) */
  --marco-hero-movil: 40vw;  /* fase 6, corrección 10 (P1 FCB): los dos marcos del hero lado a lado
                                 sin solape por debajo de 768px; antes uno tenía un margen negativo
                                 a mano que los solapaba un 35%. */

  /* ── Tacto ── */
  --tap-min: 44px;
  --retrato: 120px;          /* medallón de perfil con retrato real (18-sep: llegaron los retratos del equipo) */
  --logo-ancho-horizontal: 230px;  /* fase 6, corrección 2 (P0 BCB-25/319/33): mínimo del lockup
                                       horizontal completo (ostos-marca minimos_logo). */
  --logo-ancho-vertical: 160px;    /* fase 6, corrección 2: mínimo del lockup vertical completo. */
  --logo-ancho-intro: 160px;  /* monograma de la cortina de intro (LogoAnimado) */

  /* ── Foco ── */
  --foco-color: var(--c-verde);
  --foco-color-inv: var(--c-marfil);
  --foco-w: 2px;
  --foco-offset: 2px;

  /* ── Capas ── */
  --z-base: 0;
  --z-raised: 10;
  --z-header: 100;
  --z-overlay: 200;
  --z-menu: 300;
  --z-cortina: 400; /* añadido por organisms, 18-sep-2026: la cortina de página (§3.1) cubre
                        incluso el menú a pantalla completa durante la navegación; faltaba un
                        nivel por encima de --z-menu. Reportado en el informe final. */

  /* ── Movimiento editorial en CSS (rediseño, informe 02(b)/(c)/(e)/(f) y «Tokens») ──
     Sustituye el sistema medido de BelArosa (GSAP + ScrollTrigger + Lenis) por seis coreografías
     desde un solo primitivo (@keyframes revelar, src/styles/motion.css), IntersectionObserver y
     @view-transition. Fundaciones-2, 19-sep-2026 (lote rediseño, ola 1). */
  --dur-rapida: 200ms;        /* hover, foco: acompaña el desplazamiento de 2px del icono (ACB-62) */
  --dur-media: 300ms;         /* asiento, cascada, fondo de menú, entrada de <main> (ACB-73) */
  --dur-intro: 1400ms;        /* intro de marca en la primera visita de la sesión (ACB-84) */
  --dur-titular: 560ms;       /* máscara de línea del titular, por línea */
  --dur-cortinilla: 900ms;    /* revelado de imagen por recorte */
  --dur-trazo: 480ms;         /* hairline que se dibuja */
  --dur-vista: 320ms;         /* entrada de <main> en @view-transition (informe 02(e)) */
  --retardo-vista: 80ms;      /* retardo antes de esa entrada; navegación total 400ms */
  --paso-linea: 80ms;         /* desfase entre líneas de un titular (ACB-227, por encima a propósito) */
  --paso-cascada: 60ms;       /* desfase entre hermanos; 40ms bajo 768 (ver móvil, abajo) */
  --paso-menu: min(60ms, (600ms - var(--delay-1) - var(--dur-media)) / 7); /* P1-7 (informe B): el
    paso de la cascada del menú topado como manda 02(b)#3 ("si el grupo tiene más de diez piezas,
    el paso se acorta hasta caber"), aplicado aquí porque el grupo 1 del menú ya tiene 8 elementos
    (marca + seis enlaces, ver P1-8) y con --paso-cascada (60ms) la apertura llegaba a 800ms
    medidos, fuera de ACB-231 (500 a 700ms). F-a4d970d5 (lote navegacion, 19-sep-2026): la primera
    fórmula topaba el PASO pero no restaba --delay-1 (200ms), que motion.css sí suma al
    animation-delay de cada hijo (calc(var(--delay-1) + var(--paso-menu) * var(--i))): el último de
    los ocho hijos resolvía en delay-1(200) + paso(42,857)×7 = 500ms, más --dur-media(300) = 800ms
    igual que antes de "corregirlo". Restando --delay-1 del presupuesto de 600ms, el paso baja a
    ≈14,29ms, el último delay a 300ms y el total a 600ms, dentro de 500-700. */
  --delay-1: 200ms;
  --delay-2: 300ms;
  --delay-3: 500ms;           /* retirado del sistema nuevo; alias vivo: Cabecera.astro (fase 6,
                                  corrección de color diferido) todavía lo consume. Retirar en ola 2. */
  --dur-aro: 60s;              /* retirado del sistema nuevo (el aro se detiene, informe 02(b)); alias
                                  vivo: Medallon.astro todavía calcula su giro con este token. Retirar
                                  en ola 2 cuando ese organism detenga la animación. */
  --ease-editorial: cubic-bezier(0.645, 0.045, 0.355, 1); /* la curva de la casa: titular, cortinilla, trazo */
  --ease-entrada: cubic-bezier(0, 0, 0.2, 1);             /* todo lo que llega: asiento, cascada, <main> */
  --ease-salida: cubic-bezier(0.4, 0, 1, 1);              /* todo lo que se va: cierre de menú/modal.
                                                              Reemplaza el valor anterior (power3.out,
                                                              una curva de ENTRADA con nombre de salida,
                                                              informe 02 «Se retiran»): ahora sí es
                                                              ease-in (ACB-24). */
  --ease-marca: var(--ease-editorial); /* retirado como nombre propio; alias vivo mientras ~17
                                           componentes (NavItem, FilaArea, Boton, SubNav, Campo,
                                           Checkbox, BloqueContacto, Publicacion, Perfil, Enlace,
                                           Formulario, Menu, SeccionPartida, Cabecera, Example, DS
                                           motion/hero/cortina/menu/cabecera) todavía lo consumen; ver
                                           informe de fundaciones-2. Retirar en ola 2. */
  --ease-inout: cubic-bezier(0.455, 0.03, 0.515, 0.955);  /* inOutQuad, sin cambio */
  --ease-circ: cubic-bezier(0.075, 0.82, 0.165, 1);       /* circ.out, sin cambio */
  --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);   /* outBack, sin cambio */
  --ease-quinta: cubic-bezier(0.23, 1, 0.32, 1);          /* outQuint, sin cambio */
  --escala-hover: 1;          /* ningún hover del sitio escala nada (informe 02(d)/(f)); alias vivo:
                                  TarjetaEditorial.astro y SeccionPartida.astro todavía lo leen para
                                  su transform de hover. Valor final, no placeholder: se puede quedar
                                  en 1 aunque el nombre se retire en ola 2. */

  /* ── Las cuatro variables que parametrizan @keyframes revelar (informe 02 «Tokens», motion.css) ──
     P0-4 (informe B): --anim-recorte NO se declara aquí a propósito. Declararlo en :root con
     cualquier valor (antes: inset(0 0 0 100%)) hace que el `var(--anim-recorte, inset(0 0 0 0))`
     del keyframe NUNCA caiga en su respaldo neutro, así que TODAS las coreografías (asiento,
     cascada, máscara de línea, apertura del menú) heredaban un barrido horizontal que solo la
     cortinilla debía tener. Sin declaración aquí, el respaldo del `var()` resuelve a
     `inset(0 0 0 0)` (sin recorte) para todo el mundo, y únicamente `.m-cortinilla.es-visible`
     (motion.css) redeclara `--anim-recorte` en su propia regla. */
  --anim-x: 0;
  --anim-y: 1rem;
  --anim-opacidad: 0;

  /* Añadidos por organisms, 18-sep-2026 (docs/briefs/organisms.md, Cabecera con scroll §3.3):
     el alto grande de la cabecera (6rem) no tenía token · no es un valor de espaciado, es la
     medida propia de ese organism, igual que --ds-topbar-h; el compacto (3rem) sí lo tenía
     (--s-12). El color del texto de la cabecera cruza su umbral en 200ms, valor que --dur-rapida
     (300ms) no cubre exacto. Reportados en el informe final de organisms. */
  --cabecera-h: 96px;
  --cabecera-h-compacta: var(--s-12); /* F-08aeb77c (lote navegacion, 19-sep-2026): 48px, la altura
    real de [data-cabecera] tras cruzar el centinela de scroll (.cabecera--compacta{height:var(--s-12)}
    en Cabecera.astro). Los pegajosos que quedan bajo la cabecera fija (DoblePagina, LineaDeTiempo,
    FichaArea) usaban --cabecera-h (96px, la altura EN REPOSO) en su `top`, así que dejaban 48px de
    hueco muerto bajo el cromo ya compactado en cuanto el usuario cruzaba el centinela. */
  --dur-color: 200ms;
  --retardo-color: 80ms;  /* P2-12 (informe B): desfasa el cruce de color de la cabecera para que
    el fondo (instantáneo) ya haya terminado antes de que el texto empiece a interpolar; evita el
    instante de contraste bajo medido a mitad del cruce (1,00:1). */
  --recorte-mascara-margen: 0.35em;  /* P0-3 (informe B): overflow-clip-margin de la máscara de
    línea del titular. A 74,88px la caja de glifos de Noto Serif mide ~102px (ascendente 1,069em +
    descendente 0,293em) contra un line-height de 71,1px: el recorte se comía ~15px por arriba y
    ~14 por abajo, en reposo. 0.35em cubre el margen medido con aire de sobra. */

  /* ── Retícula de doce columnas (dirección creativa §9) ──
     A-1 (inspección A, 19-sep-2026, el hallazgo que producía otros seis): había DOS fuentes de
     verdad para el ancho de columna y diferían un 29 %. `.reticula` declaraba
     `max-width: --ancho-pagina` y, dentro de esa misma caja, `padding-inline: --margen-pagina`
     con `box-sizing: border-box`: el margen se comía del presupuesto en vez de sumarse fuera, así
     que las doce columnas vivían en 1200 − 192 = 1008 px y cada pista medía 54,66 en vez de 70,67.
     Y `--col` se calculaba aparte, desde `--ancho-pagina` entero, así que ningún componente que
     pidiera `n * --col` caía sobre una línea de la retícula real.

     La cura es una sola caja con nombre. `--ancho-reticula` es el ancho REAL de las doce columnas
     (el presupuesto contratado, o lo que quepa en el viewport una vez restados los dos márgenes),
     `--col` se deriva de ella, y `.reticula` (global.css) declara
     `max-width: calc(--ancho-reticula + 2 * --margen-pagina)`, de modo que el relleno lateral cae
     FUERA del presupuesto. A 1440: caja 1200, pista (1200 − 11×32)/12 = 70,67, texto de 120 a 1320.

     `--gutter-col` baja por corte AQUÍ y no dentro de `.reticula`: un custom property se sustituye
     en el elemento donde se declara, así que `--col`, declarado en `:root`, resolvía siempre con
     los 32 px de `:root` aunque `.reticula` bajara el canal a 8 px a 390. Declarado en el mismo
     sitio, las dos medidas no pueden volver a divergir. */
  --gutter-col: var(--s-8);          /* 32px desde 1024; baja por corte (11 gutters de 32 desbordaban 10 px a 390) */
  --margen-pagina: var(--s-6);       /* 24px, móvil (dirección §9: "márgenes 24") */
  --ancho-reticula: min(var(--ancho-pagina), 100vw - 2 * var(--margen-pagina));
  --col: calc((var(--ancho-reticula) - 11 * var(--gutter-col)) / 12);
}

/* El canal de la retícula por corte (ver la nota de arriba: vive en `:root` para que `--col` lo
   vea). 11 canales de 32 px suman 352 y la caja útil a 390 mide 342. */
@media (max-width: 1023px) { :root { --gutter-col: var(--s-4); } }
@media (max-width: 767px)  { :root { --gutter-col: var(--s-2); } }

/* Voces editoriales, desde tableta: --t-display sube a su clamp de 112-136 (112 es el piso hasta
   que el viewport es lo bastante ancho para que el 9vw supere 136 y el clamp tope); --t-editorial y
   --t-cuerpo suben igual; --t-meta pasa a su valor plano de escritorio (12, sin fluidez: solo hay un
   escalón contra el 11 de móvil, no un rango). --t-nav no cambia: la dirección solo da un valor. */
@media (min-width: 768px) {
  :root {
    --t-display: clamp(5.5rem, 9vw, 8.5rem);        /* 88 → 136 (A-3) */
    --t-display-2: clamp(3.5rem, 6vw, 6rem);         /* 56 → 96 (A-3) */
    --t-editorial: clamp(2.5rem, 4.5vw, 3rem);       /* 40 → 48 */
    --t-editorial-sm: clamp(1.25rem, 1.8vw, 1.5rem); /* 20 → 24 (A-3) */
    --t-cuerpo: clamp(1.0625rem, 0.99rem + 0.15vw, 1.125rem); /* 17 → 18 */
    --t-meta: 0.75rem;                                /* 12px */
    --lh-voz-display: 0.95;
  }
}

/* Márgenes de página de la retícula (dirección §9): 24 bajo 1024, luego 48/80/96. */
@media (min-width: 1024px) { :root { --margen-pagina: var(--s-12); } }  /* 48px */
@media (min-width: 1280px) { :root { --margen-pagina: var(--s-20); } }  /* 80px */
@media (min-width: 1440px) { :root { --margen-pagina: calc(var(--s-12) * 2); } }  /* 96px, sin escalón propio en la grilla de espaciado */

/* Móvil (informe 02(f) #3 y #4): la cascada baja de 60 a 40ms de paso y el desplazamiento del
   asiento baja de 16 a 8px (P1-13, informe B: medido en 16px/1rem, fuera de contrato). */
@media (max-width: 767px) {
  :root {
    --paso-cascada: 40ms;
    --anim-y: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0ms;
    --dur-media: 0ms;
    --dur-intro: 0ms;
    --dur-color: 0ms;
    --dur-titular: 0ms;
    --dur-cortinilla: 0ms;
    --dur-trazo: 0ms;
    --dur-vista: 0ms;
    --retardo-vista: 0ms;
    --paso-linea: 0ms;
    --paso-cascada: 0ms;
    --delay-1: 0ms;
    --delay-2: 0ms;
    --delay-3: 0ms;
    --dur-aro: 0s;         /* el aro del medallón no giraba bajo movimiento reducido antes de hoy
                               (alias vivo, ver arriba): un bucle infinito es justo lo que
                               reduced-motion tiene que apagar (ACB-104). */
    --escala-hover: 1;   /* DESIGN.md §6: "los hovers conservan solo el cambio de color". */
    --anim-x: 0;
    --anim-y: 0;
    --anim-opacidad: 1;
    --anim-recorte: inset(0 0 0 0);   /* belt-and-suspenders: aunque revelar.ts no observe nada bajo
                                          movimiento reducido y marque todo visible de inmediato, si
                                          algún consumidor solo tiene CSS (sin JS), el primitivo
                                          también resuelve ya visible por su cuenta. */
  }
}

/* ── Chrome del sitio del Design System (Sweet Grape), añadidos por el constructor shell (18-sep-2026).
   No son decisión de marca: son la arquitectura fija del propio sitio de documentación
   (docs/briefs/design-system.md), replicada 1:1 de src/layouts/DocsLayout.astro de vianella-web.
   El punto de quiebre del drawer móvil (960px, docs/briefs/design-system.md §«las seis reglas»)
   queda como literal dentro del único @media que lo usa: una custom property no es consumible
   dentro de la condición de un @media, así que no hay token posible para ese valor. ── */
:root {
  --ds-topbar-h: 58px;
  --ds-sidebar-w: 264px;
  --ds-contenido-max: 1000px;
  --ds-tinte-activo: color-mix(in srgb, var(--tinta) 8%, var(--sup-0));
  --ds-tinte-activo-inv: color-mix(in srgb, var(--tinta-inv) 14%, var(--sup-3));
  --ds-num-bg: color-mix(in srgb, var(--tinta) 6%, var(--sup-0));
  --ds-iframe-h: 900px; /* añadido por organisms, 18-sep-2026: pages/inicio.astro y pages/area.astro
                            incrustan la página completa en iframe; sin un alto explícito el marco
                            colapsa a 150px (valor por defecto del navegador). */
  --ds-sidebar-extra: 40px; /* revisión fase 2, corrección 13: ancho extra del drawer móvil sobre
                                --ds-sidebar-w (min(sidebar + extra, 85vw)), literal sin token */
}

/* ═══════════════════════════════ DERIVADOS DEL PANEL ═══════════════════════════════
   Lo que el sitio no tiene y el panel de escritura sí (DESIGN.md, «Panel de Opinión: derivados», y
   docs/blog/prototipos/css/base.css). Ningún valor nuevo de paleta: todo sale de los tokens de arriba.
   Las hojas del tema (admin.css, login.css, editor.css, preview.css) solo leen variables; ningún
   número a mano fuera de este archivo salvo hairlines por token. */
:root{
  /* Retícula del panel: 24/24 bajo un ancho de 1440; 16 en móvil */
  --margen-panel: var(--s-6);
  --gutter-panel: var(--s-6);
  --ancho-panel: 1440px;

  /* Escala del panel: 12, 14, 16, 20, 24, 32, 40 px; piso de 12 */
  --fs-12: var(--t-caption);
  --fs-14: var(--t-body-sm);
  --fs-16: var(--t-body);
  --fs-20: var(--t-sub);
  --fs-24: var(--t-h4);
  --fs-32: var(--t-h2);
  --fs-min: var(--t-caption);

  /* Objetivo táctil y medidas de control */
  --objetivo: var(--tap-min);                         /* 44 px: botón, campo, fila de menú, acción de fila */
  --barra-alto: 56px;                                 /* barra superior de herramienta (la cabecera del sitio es de 96) */
  --simbolo-barra: 22px;                              /* alto del símbolo ORG en la barra */
  --simbolo-proporcion: 307 / 164;                    /* viewBox del símbolo canónico (public/marca/logo/simbolo.svg) */
  --logo-proporcion: 582.52 / 81.25;                  /* viewBox del logotipo horizontal */
  --menu-ancho: 160px;                                /* menú lateral de wp-admin: el ancho de fábrica, que el editor también supone */
  --chip-alto: calc(var(--s-6) + var(--gap-fino));    /* 26 px: chip de estado */
  --chip-ancho: 152px;                                /* cabe «EN REVISIÓN» con el tracking de etiqueta */
  --miniatura-ancho: var(--s-12);                     /* 48 × 32: miniatura de fila */
  --miniatura-alto: var(--s-8);
  --ancho-tarjeta-entrada: 400px;
  --ancho-buscador: 420px;
  --ancho-dialogo: 440px;
  --ancho-avisos: 380px;
  --ancho-selector: 1280px;
  --ancho-sidebar-editor: 320px;
  --marca-ancho: calc(var(--casilla) / 4);            /* palomita dibujada en la casilla */
  --marca-alto: calc(var(--casilla) * .45);
  --filete-w: calc(var(--hairline-w) * 2);            /* filete de 2 px: activo de menú, cabecera, cita */
  --rotulo-riel: 200px;                               /* margen de rótulos de bloque en el lienzo del editor */
  --icono-16: var(--s-4);
  --icono-20: var(--casilla);
  --icono-24: var(--s-6);

  /* Campos: contorno de Campo.astro (Verde, 7,44:1 sobre Marfil, ≥ 3:1 exigido) */
  --borde-campo: var(--borde);

  /* Superficies de estado (el sitio no tiene filas seleccionables) */
  --sup-hover: color-mix(in srgb, var(--c-verde) 6%, transparent);
  --sup-sel: color-mix(in srgb, var(--c-verde) 10%, transparent);
  --sup-cebra: color-mix(in srgb, var(--c-verde) 4.5%, transparent);

  /* Profundidad: solo diálogos, menús y avisos (regla global: sombra más hairline en toda hoja) */
  --sombra-dialogo: 0 var(--s-6) var(--s-12) color-mix(in srgb, var(--c-noche) 18%, transparent);
  --sombra-aviso: 0 var(--s-1) var(--s-3) color-mix(in srgb, var(--c-noche) 14%, transparent);

  /* Capas */
  --z-pegajoso: var(--z-raised);
  --z-barra: var(--z-header);
  --z-popover: calc(var(--z-header) + var(--z-raised));
  --z-telon: var(--z-overlay);
  --z-dialogo: calc(var(--z-overlay) + var(--z-raised));
  --z-aviso: var(--z-menu);

  /* Fotografía: blanco y negro en toda superficie de foto */
  --foto-filtro: grayscale(1) contrast(1.05);

  /* Movimiento: los nombres del panel apuntan a la escala del DS */
  --dur-instant: calc(var(--dur-rapida) / 2);
  --dur-fast: var(--dur-rapida);
  --dur-base: var(--dur-media);
  --ease-out: var(--ease-entrada);
  --ease-in: var(--ease-salida);
  --ease-in-out: var(--ease-editorial);

  /* ── Roles del panel en claro (las hojas leen estos nombres; el oscuro solo los remapea) ── */
  color-scheme: light;
  --op-lienzo: var(--sup-0);
  --op-superficie: var(--sup-1);
  --op-sup-campo: var(--sup-1);
  --op-tinta: var(--tinta);
  --op-tinta-2: var(--tinta-2);
  --op-titular: var(--c-noche);
  --op-linea: var(--hairline);
  --op-hoja: var(--hairline-hoja);
  --op-borde-campo: var(--borde-campo);
  --op-borde-boton: var(--borde);
  --op-primario: var(--c-verde);
  --op-primario-texto: var(--c-marfil);
  --op-primario-hover: var(--c-noche);
  --op-error: var(--c-error);
  --op-foco: var(--foco-color);
  --op-hover: var(--sup-hover);
  --op-sel: var(--sup-sel);
  --op-cebra: var(--sup-cebra);
  --op-cab-tabla: var(--c-verde);
  --op-cab-tabla-texto: var(--tinta-inv);
  --op-barra: var(--sup-3);
  --op-barra-texto: var(--tinta-inv);
  --op-barra-texto-2: var(--tinta-inv-2);
  --op-barra-hover: var(--hover-inv);
  --op-barra-linea: var(--hairline-inv);
  --op-telon: var(--scrim);
}
@media (max-width: 767px){ :root{ --margen-panel: var(--s-4); } }

/* Oscuro del panel: solo por preferencia del sistema, sin conmutador, y solo dentro de wp-admin
   (la entrada y la previsualización se quedan en claro). Es la banda oscura del sitio: lienzo Verde
   noche, superficie Verde institucional, tintas Marfil y Salvia, hairline Salvia al 40 %. */
@media (prefers-color-scheme: dark){
  body.wp-admin{
    color-scheme: dark;
    --op-lienzo: var(--sup-3);
    --op-superficie: var(--sup-2);
    --op-sup-campo: var(--sup-3);
    --op-tinta: var(--tinta-inv);
    --op-tinta-2: var(--tinta-inv-2);
    --op-titular: var(--tinta-inv);
    --op-linea: var(--hairline-inv);
    --op-hoja: var(--hairline-hoja-inv);
    --op-borde-campo: var(--borde-inv);
    --op-borde-boton: var(--borde-inv);
    --op-primario: var(--c-marfil);
    --op-primario-texto: var(--c-noche);
    --op-primario-hover: var(--c-salvia);
    --op-error: var(--c-error-inv);
    --op-foco: var(--foco-color-inv);
    --op-hover: var(--hover-inv);
    --op-sel: color-mix(in srgb, var(--c-marfil) 16%, transparent);
    --op-cebra: color-mix(in srgb, var(--c-marfil) 4%, transparent);
    --op-cab-tabla: var(--sup-3);
    --op-cab-tabla-texto: var(--tinta-inv);
    --op-barra: var(--sup-3);
    --op-barra-linea: var(--hairline-inv);
    --sombra-dialogo: 0 var(--s-6) var(--s-12) color-mix(in srgb, var(--c-noche) 70%, transparent);
    --sombra-aviso: 0 var(--s-1) var(--s-3) color-mix(in srgb, var(--c-noche) 60%, transparent);
  }
}