/* tokens.css — origen unico de color, tipografia, tiempo y medida.
   Lo enlaza el puesto de mando (web/ui/index.html) y el tema de Quartz del sitio publico:
   un solo mundo visual, pintado una vez.
   Los hex estan verificados por tests/test_ui_contraste.py — no cambies uno sin correrlo.

   2026-08-25 — TERCERA PIEL: de Dala (vacio y violeta) a BRASA (oscuridad calida de museo).
   Decision de Carlos: el cerebro como pieza unica flotando en penumbra calida, tipografia
   crema como unica decoracion, inspirado en el sistema ORYZO (referencia aportada por Carlos,
   usada como ejemplo, no copiada). Piel unica oscura: se retira el tema dia, la Lampara y
   el Foco; la referencia vive en git.
   Los NOMBRES de token no se tocan a proposito: estilo.css, app.js, la portada que hornea
   publica.py y los huecos de color de Quartz piden var(--catodo) sin saber de que color es.
   `--catodo` vuelve a ser naranja —el naranja de catodo original, ahora como brasa editorial:
   acento de texto y unico boton relleno, con tinta oscura encima. */

/* 2026-09-15: Inter se sirve desde aqui. Antes era «Inter si el visitante la tiene» y casi nadie la
   tiene: cada visitante veia la fuente de su sistema. Variable (100-900) en un solo woff2. */
@font-face {
  font-family: Inter;
  src: url("tipos/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* piel brasa (unica) — el vacio calido ES el diseño: negro nogal, nunca negro puro */
  --fondo: #100904;          /* nogal: el lienzo y el vacio detras de cada pieza */
  --panel: #160c06;          /* medio escalon arriba: la separacion la hace el aire, no la caja */
  --hueso: #ffedd7;          /* crema calido — nunca #fff: el tinte calido es la firma */
  --hueso-2: #d8c3a8;        /* crema apagado — cuerpo secundario */
  --hueso-3: #a89987;        /* gris calido — nav apagada, metadatos, fantasmas legibles */
  --catodo: #dc5000;         /* brasa — acento editorial y unico boton relleno; se gana su rareza */
  --catodo-tinta: #100904;   /* lo que se escribe ENCIMA de la brasa: tinta nogal */
  --bronce: #8a7a68;         /* madera — hairlines, bordes y micro-rotulos */
  --oro: #e8bb55;            /* el metal de la moneda de marca: oro calido, familia del bronce */
  --oro-sombra: #6b4e2a;     /* el cuero caliente que el oro refleja por debajo */
  --aviso: #ff7a66;          /* rojo calido de fallo: funcional, no de marca */
  --fantasma: rgba(255, 237, 215, .14);
  --rejilla: rgba(255, 237, 215, .05);
  --pozo: rgba(255, 237, 215, .055);  /* la luz calida detras de la pieza: alfa bajo, sin halo de color */
  --halo: 0 0 8px rgba(220, 80, 0, .55), 0 0 30px rgba(220, 80, 0, .25);
  /* tipografia — UNA familia para todo, geometrica sans: Inter autoalojada (@font-face arriba),
     detras la del sistema. `--datos` sigue monoespaciada: eso es funcion (cifras y codigo
     alineados), no estilo. */
  --condensada: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --prosa: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --datos: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  /* R1 «tipografía de oficio» (2026-09-24): una sola escala de interletrado. El display se cierra;
     la caja normal respira a su medida; el aire extra queda reservado a micro-rótulos en mayúsculas. */
  --tracking-display: -.022em;
  --tracking-texto: 0;
  --tracking-rotulo: .06em;
  /* tiempo */
  --t-golpe: 120ms;
  --t-decae: 400ms;
  --t-seccion: 180ms;
  --t-piel: 600ms;
  --t-fila: 260ms;
  --t-moneda: 600ms;         /* lo que tarda la moneda en cruzar la pantalla */
  --t-llegada: 480ms;        /* lo que tarda en revelarse una respuesta al llegar (Fase 3) */
  /* La respuesta al toque: lo que tarda el boton en bajar el brillo con el dedo encima. Es un
     acuse de recibo, no una coreografia, asi que va por debajo de `t-golpe`. */
  --t-toque: 80ms;
  /* La curva de esa llegada: ease-out exponencial — entra rapido y se posa, no rebota. */
  --curva-llegada: cubic-bezier(.16, 1, .3, 1);
  /* medida */
  --alto-barra: 64px;
  /* La barra inferior de secciones del telefono (spec 2026-09-22). 56 es lo que pide una fila de
     cinco pestanas con su rotulo a .75rem y 44px de alto minimo por boton; lleva encima el
     `env(safe-area-inset-bottom)` del iPhone, que no es una medida nuestra sino del aparato. */
  --alto-tabbar: 56px;
  --ancho-instrumentos: 300px;
  --moneda-grande: 104px;    /* el lado de la moneda cuando aterriza en la columna derecha */
  --alto-entrada: 96px;
  /* La franja de composicion de la cartera: su alto. El ancho lo pone el numero de posiciones. */
  --alto-franja: 18px;
  /* La columna de prosa de las secciones de lectura. En escritorio se centra en el espacio que
     queda entre el margen y el rail: pegada a la izquierda dejaba 590px de vacio a 1440. */
  --ancho-lectura: 68ch;
  --ancho-escenarios: 1000px;   /* Escenarios en escritorio: controles 380 + resultado ~580 */
  /* A1 (ronda 2026-09-22 tarde): la columna unica del chat en escritorio — caja, sugerencias,
     historial y respuesta comparten este ancho, centrado en la pagina. */
  --ancho-conversacion: 46rem;
  /* B4: el fundido por encima de la caja de pregunta, que ahora es opaca. */
  --fundido-entrada: 32px;
  /* B7: el selector de edicion deja de medir lo que su opcion mas larga. */
  --ancho-selector-edicion: 28rem;
  /* B6: la pieza en el telefono, para que el cerebro entero quepa sobre la caja fija. */
  --cerebro-movil: min(300px, 76vw);
  /* Escenarios (spec 2026-09-23): la anchura minima de una columna de campo. Con 208px entran dos
     columnas dentro de --ancho-lectura en escritorio y una sola a 390px (354px utiles). */
  --escenario-campo: 208px;
  /* D1 (plan 2026-09-24): el selector de herramienta y las dos columnas desde 1024px.
     `--escenario-columnas` es el punto donde el ancho util ya da para [controles | resultado]:
     por debajo, una columna y el resultado cae debajo del formulario —que a 900px de ancho daria
     dos cajas de menos de 300px—. Los controles miden entre --escenario-control-min y
     --escenario-control-max, y el resultado se lleva lo que sobre con tope en --ancho-lectura:
     una linea de texto de mas de 68ch se sigue con el dedo. */
  --escenario-columnas: 1024px;
  --escenario-control-min: 300px;
  --escenario-control-max: 380px;
  --escenario-rejilla: 132px;  /* la fila de pastillas de caida; --escenario-campo es la de los campos */
  /* El hueco del sufijo DENTRO del campo (`%`, `años`, `al mes`). Va en tokens y no en estilo.css
     porque el ancho del campo se calcula con el —`padding-right: calc(12px + var(--ancho-sufijo))`—
     y un sufijo mas largo se comeria la cifra escrita en vez de dar error. */
  --ancho-sufijo: 52px;
  /* D1: el alto minimo del campo de un escenario. Debajo de 44px, en un telefono, no se toca; y a
     16px de letra es lo que evita el zoom automatico de iOS al enfocar (spec §3). */
  --alto-campo: 48px;
  /* D1: el fundido del paso de pestaña ([Proyectar | Si cae]). Es --t-golpe dicho con el nombre de
     lo que hace aqui: un cambio de estado, no una coreografia. Con prefers-reduced-motion el
     estado cambia igual y solo se queda sin el fundido (regla global, mas abajo). */
  --t-fundido: var(--t-golpe);
  /* D1c §11: la subnavegación de Cartera hereda la misma altura, separación y filete que las
     pestañas de herramienta. Los valores viven aquí para que la fila y `.escenario-pestanas` no
     puedan separarse al tocarlas. */
  --alto-subnavegacion: 44px;
  --hueco-subnavegacion: 4px;
  --grosor-subnavegacion: 3px;
  --grosor-foco-subnavegacion: 2px;
  --desplazamiento-foco-subnavegacion: 3px;
  --texto-subnavegacion: 1.05rem;
  --linea-subnavegacion: 1.4;
  --hueco-subnavegacion-borde: 12px;
  /* D5: la base de la subnavegación y el selector segmentado de herramientas (nivel 2). */
  --grosor-base-subnavegacion: 1px;
  --filete-subnavegacion: color-mix(in srgb, var(--bronce) 40%, transparent);
  --hueco-segmento: 3px;
  --alto-segmento: 40px;
  --relleno-segmento: 16px;
  --texto-segmento: .95rem;
  /* D2: la cuenta espera a que el visitante termine de mover un supuesto. No es decoracion: evita
     que cada pulsacion repinte una proyeccion intermedia que el visitante todavia no ha pedido. */
  --t-recalculo: 200ms;
  --t-copiado: 2000ms;
  --escenario-espacio-lectura: 12px;
  --escenario-espacio-composicion: 8px;
  --escenario-label: .78rem;
  --escenario-lectura: 1.75rem;
  --escenario-lectura-movil: 1.375rem;
  --escenario-cruce: 1rem;
  --escenario-acciones-gap: 12px;
  --escenario-linea: 1.45;
  --escenario-espacio-chico: 8px;
  --escenario-borde: 2px;
  --escenario-dato: .95rem;
  --escenario-dato-label: .85rem;
  --escenario-detalle: .8rem;
  --escenario-espacio-bloque: 12px;
  --escenario-espacio-acciones: 18px;
  --escenario-cifra-tracking: -.015em;
  --escenario-texto-movil: .95rem;
  --escenario-linea-larga: 1.6;
  /* D2: el último resultado bueno sigue a la vista cuando un campo se vuelve invalido. Se atenua
     para que se lea como contexto, no como la respuesta a los valores que ahora hay escritos. */
  --opacidad-resultado-anterior: .45;
  /* D2b: la pieza didáctica usa medidas propias para no disfrazar la barra de una tarjeta.
     La marca de hoy es un filete de 2 px; la altura de la barra y el hueco de sus rótulos también
     viven aquí, igual que cualquier otro tamaño visual del mundo Brasa. */
  --alto-composicion: 18px;
  --grosor-marca-hoy: 3px;
  --anillo-marca-hoy: 2px;
  --espacio-composicion: 8px;
  --grosor-borde-composicion: 1px;
  --radio-glosario: 50%;
  --lado-glosario: 24px;
  --grosor-rayas-comision: 5px;
  --hueco-rayas-comision: 5px;
  --angulo-rayas-comision: 135deg;
  --alto-caida-barra: 12px;
  --grosor-borde-caida: 2px;
  --alfa-caida: 18%;
  --radio-caida: 3px;
  --alto-glosario: 16px;
  --texto-glosario: .85rem;
  --linea-glosario: 1.55;
  --ancho-glosario-max: 34ch;
  --ancho-glosario-viewport: calc(100vw - var(--alto-barra) - var(--alto-barra));
  --glosario-izquierda-inicial: 0px;
  --glosario-arriba-inicial: 0px;
  --espacio-borde-glosario: 16px;
  --capa-glosario: 20;
  --capa-marca-hoy: 1;
  --hueco-composicion-ramos: 12px;
  --hueco-linea-composicion: 1px;
  --alfa-comision: 18%;
  --lado-marca-hoy: 11px;
  --giro-marca-hoy: 45deg;
  --desplazamiento-marca-hoy: -3px;
  --desplazamiento-cruce-glosario: -5px;
  --espacio-nota-composicion: 3px;
  --linea-composicion-cifra: 1.2;
  --linea-composicion-palabra: 1.35;
  --linea-composicion-titulo: 1.35;
  --linea-composicion-escala: 1.35;
  --linea-composicion-nota: 1.45;
  --linea-glosario-boton: 1;
  --tracking-ejemplo: 0;
  --mezcla-borde-lectura: 45%;
  --margen-lectura-borde: 6px;
  --margen-campo-etiqueta: 6px;
  --margen-campo-basico: 6px;
  --margen-rango: 5px;
  --margen-error: 5px;
  --margen-dato-movil: 10px;
  --margen-diferencia-dato: 0;
  /* D4b: la ficha histórica y su línea temporal. Son medidas de contenido, no de chrome: el
     tempo visual va en tokens para que la pieza pueda ajustarse sin buscar un número suelto. */
  --alto-tiempo-historia: 10px;
  --grosor-borde-historia: 1px;
  --hueco-tiempo-historia: 10px;
  --linea-tiempo-historia: 1.4;
  --tracking-historia: 0;
  --margen-historia-bloque: 18px;
  --margen-historia-texto: 5px;
  --ancho-ficha-historia: 68ch;
  /* D3: la caja del gráfico se mide, no se escala. El texto del SVG queda en 12 px reales;
     el alto cambia una sola vez al pasar de teléfono a escritorio. */
  --alto-grafico: 180px;
  --t-grafico-redibujo: 80ms;
  --t-grafico-inicial: 0ms;
  --t-lector-grafico: 80ms;
  --margen-grafico-izquierdo: 64px;
  --margen-grafico-derecho: 12px;
  --margen-grafico-arriba: 16px;
  --margen-grafico-abajo: 28px;
  --margen-grafico: 18px;
  --desplazamiento-etiqueta-grafico: 6px;
  --largo-marca-x: 5px;
  --altura-texto-x: 18px;
  --radio-halo-cruce-grafico: 7px;
  --radio-cruce-grafico: 3.5px;
  --separacion-etiqueta-grafico: 14px;
  --texto-grafico: 12px;
  --grosor-rejilla-grafico: 1px;
  --grosor-guia-grafico: 1px;
  --grosor-linea-grafico: 2px;
  --grosor-linea-aportado-grafico: 1.5px;
  --grosor-halo-cruce-grafico: 0px;
  --grosor-punto-cruce-grafico: 1.5px;
  --guion-linea-grafico: 5px 4px;
  --espacio-lector-grafico: 8px;
  --linea-lector-grafico: 1.45;
  --alto-lector-grafico: 18px;
  --margen-leyenda-grafico: 10px;
  --hueco-leyenda-grafico: 4px 18px;
  --texto-leyenda-grafico: .8125rem;
  --linea-leyenda-grafico: 1.5;
  --ancho-muestra-grafico: 22px;
  --grosor-muestra-grafico: 2px;
  --hueco-muestra-grafico: 8px;
  --margen-ejes-grafico: 4px;
  --texto-ejes-grafico: .78rem;
  --linea-ejes-grafico: 1.5;
  --peso-directa-grafico: 500;
  --grosor-foco-grafico: 2px;
  --desplazamiento-foco-grafico: 3px;
  --peso-texto-grafico: 400;
  /* Buzón de sugerencias (2026-09-24): medidas y capas propias para que su ancla respete
     la barra del teléfono y no compita con la acción rellena de cada vista. */
  --buzon-capa: 35;
  --buzon-borde: 1px;
  --buzon-grosor-foco: 2px;
  --buzon-desplazamiento-foco: 3px;
  --buzon-boton-ancho: 144px;
  --buzon-boton-alto: 44px;
  --buzon-boton-radio: 999px;
  --buzon-boton-borde: 16px;
  --buzon-boton-gap: 9px;
  --buzon-boton-padding-block: 10px;
  --buzon-boton-padding-inline: 16px;
  --buzon-boton-texto: .75rem;
  --buzon-boton-linea: 1;
  --buzon-boton-tracking: 0;
  --buzon-boton-centro: 50%;
  --buzon-centro-desplazamiento: -50%;
  --buzon-fondo-boton: color-mix(in srgb, var(--fondo) 92%, transparent);
  --buzon-medida: 100%;
  --buzon-vista-ancho: 100vw;
  --buzon-transparente: transparent;
  --buzon-oculto: 1px;
  --buzon-clip: rect(0 0 0 0);
  --buzon-cero: 0;
  --buzon-uno: 1;
  --buzon-opacidad-cero: 0;
  --buzon-grid-min: 0;
  --buzon-grid-frac: 1fr;
  --buzon-tone-columnas: 3;
  --buzon-movil-columnas: 1;
  --buzon-alto-caja-respaldo: 64px;
  --buzon-alto-pastillas-respaldo: 0px;
  --buzon-peso-medio: 500;
  --buzon-peso-normal: 400;
  --buzon-panel-ancho: 430px;
  --buzon-panel-alto-movil: min(78svh, 620px);
  --buzon-panel-padding: 28px;
  --buzon-panel-padding-movil: 20px;
  --buzon-panel-radio: 14px;
  --buzon-panel-sombra: 0 18px 50px color-mix(in srgb, var(--fondo) 76%, transparent);
  --buzon-velo: 76%;
  --buzon-hueco-movil: 12px;
  /* En Newsletter, sobre el botón «Arriba» (44 px + su hueco de 12). */
  --buzon-reserva-boletin: 56px;
  --buzon-hueco-panel-movil: 12px;
  --buzon-lado-movil: 12px;
  --buzon-gap: 12px;
  --buzon-marca-margin: 8px;
  --buzon-marca-texto: .7rem;
  --buzon-marca-linea: 1;
  --buzon-marca-tracking: .14em;
  --buzon-titulo-size: clamp(1.7rem, 3vw, 2.35rem);
  --buzon-titulo-linea: 1;
  --buzon-titulo-tracking: -.02em;
  --buzon-cerrar-padding-block: 8px;
  --buzon-cerrar-texto: .75rem;
  --buzon-intro-margin-top: 18px;
  --buzon-intro-margin-bottom: 24px;
  --buzon-intro-texto: .95rem;
  --buzon-intro-linea: 1.6;
  --buzon-form-gap: 20px;
  --buzon-legend-margin: 10px;
  --buzon-legend-texto: .875rem;
  --buzon-legend-linea: 1.4;
  --buzon-tone-gap: 8px;
  --buzon-opcion-min: 88px;
  --buzon-opcion-padding: 16px;
  --buzon-opcion-padding-inline: 8px;
  --buzon-opcion-gap: 8px;
  --buzon-opcion-texto: .8rem;
  --buzon-opcion-linea: 1.2;
  --buzon-opcion-centro: center;
  --buzon-opcion-radio: 10px;
  --buzon-icono: 28px;
  --buzon-icono-grosor: 1.7;
  --buzon-campo-gap: 7px;
  --buzon-texto-min: 144px;
  --buzon-texto-padding: 12px;
  --buzon-texto-linea: 1.55;
  --buzon-campo-alto: 48px;
  --buzon-campo-padding-block: 10px;
  --buzon-campo-padding-inline: 12px;
  --buzon-campo-radio: 4px;
  --buzon-contador-texto: .75rem;
  --buzon-contador-linea: 1.4;
  --buzon-error-texto: .85rem;
  --buzon-error-linea: 1.5;
  --buzon-exito-icono: 42px;
  --buzon-exito-titulo: 1.6rem;
  --buzon-exito-linea: 1.1;
  --buzon-exito-texto: .95rem;
  --buzon-exito-linea-larga: 1.6;
  --buzon-exito-medida: 34ch;
  --buzon-movil-boton: 48px;
  --buzon-movil-opcion-min: 64px;
  --buzon-movil-opcion-padding-block: 10px;
  --buzon-movil-opcion-padding-inline: 14px;
  --buzon-transicion: var(--t-seccion);
  --rejilla-tecnologica: color-mix(in srgb, var(--hueso) 3%, transparent);
  --filete-tecnologico: color-mix(in srgb, var(--catodo) 42%, var(--bronce));
  --paso-rejilla: 32px;
  --grosor-rejilla-tecnologica: 1px;
  --rejilla-tecnologica-inset-y: 7%;
  --rejilla-tecnologica-inset-x: 5%;
  --ancho-marca-cabecera: 180px;
  --alto-marca-cabecera: 48px;
  --proporcion-marca-cabecera: 38%;
  --proporcion-marca-cabecera-movil: 42%;
  --alto-marca-cabecera-movil: 40px;
  --largo-filete-cabecera: 64px;
  --espacio-cabecera-tecnologica: 14px;
  --espacio-cabecera-tecnologica-movil: 12px;
  --grosor-filete-tecnologico: 1px;
  --grosor-borde-menu-herramientas: 2px;
  --margen-menu-movil: 12px;
  --ancho-max-menu-movil: calc(100vw - 24px);
  --herramientas-enlace-padding-inline: 12px;
  --texto-menu-herramientas: .875rem;
  --linea-menu-herramientas: 1.4;
  --alto-menu-herramientas: 44px;
  --ancho-menu-herramientas: 176px;
  --desplazamiento-menu-herramientas: 8px;
  --desplazamiento-menu-cartera: 26px;
  --padding-menu-herramientas: 6px;
  --grosor-menu-herramientas: 1px;
  --capa-menu-herramientas: 36;
  --radio-menu-herramientas: 4px;
  --fondo-menu-herramientas: var(--panel);
  --borde-menu-herramientas: color-mix(in srgb, var(--bronce) 60%, transparent);
  --sombra-menu-herramientas: 0 18px 42px color-mix(in srgb, var(--fondo) 78%, transparent);
  --opacidad-rejilla-tecnologica: .72;
  --opacidad-marca-tecnologica: .56;
  /* P2 sistema de diseño
     La escala, el aire, la forma, la superficie y el tiempo de la ronda P2, en un solo bloque y
     con nombres que L2, L3 y L4 leen tal cual. Aquí no vive ningún hex: las superficies se
     COMBINAN con el crema sobre el nogal que ya son la piel, y por eso en tema oscuro subir una
     tarjeta es echarle más luz, no ponerle una sombra. Los 39 tokens van declarados aquí, en el
     :root que se aplica a cualquier ancho: un token dentro de un @media existe a ratos, y el que
     lo lee sin él se queda con la declaración invalidada y sin ningún error que lo diga. */
  /* escala: display enorme y cerrado (--tracking-display), cuerpo pequeño y calmado */
  --ds-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  --ds-linea-display: 1.02;
  --ds-titulo-1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --ds-titulo-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --ds-titulo-3: 1.25rem;
  --ds-linea-titulo: 1.12;
  --ds-cuerpo-grande: 1.1875rem;
  --ds-cuerpo: 1rem;
  --ds-pie: .8125rem;
  --ds-rotulo: .75rem;
  --ds-linea-cuerpo: 1.6;
  /* aire: la escala va de 4 a 128 y el ritmo de sección se mide solo (64 a 128 según el ancho) */
  --ds-esp-1: 4px;
  --ds-esp-2: 8px;
  --ds-esp-3: 12px;
  --ds-esp-4: 16px;
  --ds-esp-5: 24px;
  --ds-esp-6: 32px;
  --ds-esp-7: 48px;
  --ds-esp-8: 64px;
  --ds-esp-9: 96px;
  --ds-esp-10: 128px;
  --ds-seccion: clamp(64px, 8vw, 128px);
  --ds-ancho-max: 1200px;
  /* forma: radio grande y sin sombra; la pildora es el borde redondo de los botones */
  --ds-radio-s: 8px;
  --ds-radio-m: 14px;
  --ds-radio-l: 22px;
  --ds-radio-pildora: 999px;
  /* superficie: tres escalones de luz, un filete, un filete de madera y el brillo del canto */
  --ds-superficie-1: color-mix(in srgb, var(--hueso) 3%, var(--fondo));
  --ds-superficie-2: color-mix(in srgb, var(--hueso) 6%, var(--fondo));
  --ds-superficie-3: color-mix(in srgb, var(--hueso) 9%, var(--fondo));
  --ds-borde: color-mix(in srgb, var(--hueso) 10%, transparent);
  --ds-borde-fuerte: color-mix(in srgb, var(--bronce) 70%, transparent);
  --ds-borde-activo: color-mix(in srgb, var(--catodo) 70%, var(--bronce));
  --ds-brillo-superior: inset 0 1px 0 color-mix(in srgb, var(--hueso) 7%, transparent);
  /* tiempo: corto y con la curva de llegada. El alzado es el travel de una tarjeta al apuntarla. */
  --ds-t-rapida: 120ms;
  --ds-t-media: 240ms;
  --ds-t-lenta: 320ms;
  --ds-curva: var(--curva-llegada);
  --ds-alzado: -2px;
}

@media (min-width: 600px) {
  :root { --alto-grafico: 220px; }
}

/* En movil la barra son dos filas fijas: marca arriba, secciones abajo en una sola linea que se
   desplaza. El alto es un token porque #contenido y scroll-padding lo leen. */
@media (max-width: 999px) {
  :root { --alto-barra: 136px; }
}
/* B5 (ronda 2026-09-22 tarde): en tableta las cinco pestanas van en UNA fila — marca 44 + pestanas
   44 + 16 de aire. Se pisa aqui y no arriba: el bloque <600 de abajo la vuelve a dejar en 56. */
@media (max-width: 999px) {
  :root { --alto-barra: 104px; }
}

/* Por debajo de 600px la barra vuelve a UNA fila —moneda y marca— porque las secciones se van a la
   barra inferior fija: los 136px eran de una segunda fila que ya no existe, y dejarlos era 80px de
   aire muerto en cada pantalla de telefono. */
@media (max-width: 599px) {
  :root { --alto-barra: 56px; }
}