/* Frontend unificado — estilo terminal técnico, oscuro y responsivo.
   Paleta alineada con los dashboards existentes (garp/morning/calculadora). */

:root {
    --bg: #0d1117;
    --bg-alt: #11161e;
    --panel: #161b22;
    --panel-2: #1c232c;
    --borde: #2a323d;
    --texto: #e6edf3;
    --texto-suave: #c3ccd6;      /* cuerpos de texto largos: menos contraste que --texto */
    --texto-dim: #7d8590;        /* más oscuro que el #8b949e anterior: separa más del blanco
                                     y conserva 5.07:1 sobre el fondo (AA) */
    --acento: #73a5de;          /* más suave que el #58a6ff anterior (saturación 100% -> 62%),
                                     como el azul apagado de la referencia: 7.36:1 sobre el fondo */

    /* Medianil (criterio de Gus, 24-Sep-2026): el aire que un texto necesita para no golpearse con
       el bloque de al lado. En las tarjetas no hace falta —tienen borde y padding propio—, pero
       entre dos textos el `gap` de .45rem de la grilla es un choque. Va DENTRO de la celda y no en
       el `gap`, para que las columnas sigan coincidiendo con las tarjetas.
       1.4rem = 22.4 px: el mismo valor que usaba la cabecera vieja entre el título y su nota. */
    --medianil: 1.4rem;
    /* EL ANCHO DE DOS COLUMNAS DE LA GRILLA DE CUATRO. Regla de Gus: «nada ocupa más de dos
       columnas de las cuatro». La grilla es `repeat(4, minmax(0,1fr))` con `column-gap: .45rem`, así
       que dos columnas con su medianil son la mitad del contenedor menos medio gap. Se usa en los
       textos centrales —las bajadas— para que no se estiren a toda la página.
       ⚠️ Va en `calc()` y NO en un valor fijo: con 38.5rem (los 616 px que dan las dos columnas a
       1240) el tope dejaba de cumplirse en pantallas más angostas, donde el contenedor encoge y dos
       columnas miden menos (medido a 900 px: 430 px, contra los 616 del fijo). Con el `calc` el tope
       es dos columnas en cualquier ancho.
       Medido el 25-Sep-2026: sin esto, `p.lead` medía 864 px a 1280, o sea 2,7 columnas. */
    --dos-columnas: calc(50% - .225rem);
    /* El alto del encabezado, para que la portada sepa cuánta ventana le queda: es lo que usa
       `min-height: calc(100vh - var(--alto-header))` para que el pie de la portada caiga sobre el
       borde inferior y la portada no tenga scroll propio. Medido: 84 px en escritorio (5.25rem).
       Abajo de 640 px el encabezado pasa a dos filas y la variable se redefine en su media query. */
    --alto-header: 5.25rem;
    /* El padding lateral del `main`. Va en variable porque el pie de la portada tiene que salir del
       contenedor para cruzar la ventana entera (ver «El PIE de la portada»), y abajo de 640 px el
       `main` lo cambia a .9rem: compensar con un número fijo dejaba la banda 6 px corrida a la
       izquierda. Medido a 390. */
    --pad-main: 1.25rem;
    /* El verde es un MENTA/AGUA (matiz 162°), no el verde hierba de GitHub (matiz 133°). Referencia
       que pasó Gus el 23-Sep-2026 (captura de perplexity.ai/computer): medido pixel a pixel sobre
       la captura, el color converge en #68ccae — matiz 161-163°, sat ~50%, val ~80% en las tres
       zonas verdes de la imagen (el chip, +5.00% y +0.52%). Se adoptó tal cual, sin oscurecer: sobre
       el fondo del tema oscuro da 9.77:1 (el verde anterior daba 7.45:1) y 7.96:1 sobre el relleno
       translúcido de las píldoras (antes 6.31:1). O sea: además de ser el color pedido, contrasta
       más. El matiz es lo que cambia la lectura: el verde de antes tiraba a hierba, éste a agua. */
    --verde: #68ccae;
    --ambar: #d29922;           /* superficie: relleno y borde */
    --ambar-tinta: #d29922;     /* texto. En oscuro es el mismo valor: el ambar claro sobre fondo
                                   oscuro se lee y sigue siendo ambar, no hace falta separarlos. */
    --rojo: #d3453e;             /* rojo más profundo: el anterior (#f85149) contrastaba de más */
    --violeta: #8b5cf6;
    /* La monoespaciada del sitio, AUTOALOJADA (Roboto Mono, ver assets/vendor/fonts.css). Estaba
       apuntando sólo a las del sistema —`ui-monospace, SFMono-Regular, Menlo…`—: el peso estaba en
       todos lados y la fuente no. El resultado es que cada dispositivo mostraba los números con una
       tipografía distinta (SF Mono en el iPhone, Consolas en Windows, DejaVu en Linux) y ninguna
       coincidía con la maqueta (Gus, 24-Sep-2026: «los números están en la typo equivocada»).
       Los del sistema quedan de respaldo, por si el .woff2 no llega. */
    --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --radio: 10px;
}

/* Tema claro: mismas variables, otros valores. Las reglas no tienen colores literales
   (0 usos de rgba(255,255,255) ni de rgba(0,0,0) como color de texto/fondo), así que el
   tema se resuelve acá y en ningún otro lado.
   ⚠️ Los valores de acento, verde y ámbar NO son los de GitHub tal cual: están oscurecidos un
   punto a propósito, por contraste medido. En el tema claro los originales daban acento 4.13:1 y
   ámbar 4.34:1 contra los fondos claros — por debajo del mínimo AA (4.5:1) — y ahí estaba el
   «no funciona» del color en claro. Y hay que compensar además el fondo translúcido del propio
   color que ahora llevan las píldoras y el chip activo: ese fondo acerca el fondo al color del
   texto y baja el contraste, así que el texto tiene que ser más oscuro que antes.
   Valores medidos con el auditor de contraste el 23-Sep-2026, con el fondo translúcido ya puesto. */
html[data-tema="claro"] {
    --bg: #f6f7f9;
    --bg-alt: #ffffff;
    --panel: #ffffff;
    --panel-2: #f0f2f5;
    --borde: #d7dee6;
    --texto: #1b2027;
    --texto-suave: #39424e;
    --texto-dim: #616c7a;
    --acento: #0b5ed7;          /* era #1f6feb: 4.13:1 -> 4.89:1 con el tinte encima */
    --verde: #0b7052;           /* era #146c2e: 6.1:1 sobre el fondo claro y 5.11:1 con el tinte de
                                   la píldora. Es el MISMO menta del tema oscuro (matiz 162°)
                                   oscurecido, porque un menta claro sobre fondo claro no se lee —
                                   es la situación del ámbar al revés: acá el color de la referencia
                                   es un color de tema oscuro y en claro hay que bajarlo.
                                   #0b7052 es el menta MÁS VIVO que aguanta AA con el relleno
                                   translúcido encima: 5.67:1 sobre el fondo y 4.79:1 con el tinte.
                                   Techo medido: arriba de V=45% el tinte lo baja de 4.6:1. */
    /* El ÁMBAR es el único color que necesita DOS tonos en tema claro (Gus, 23-Sep-2026: «el ámbar
       está muy marrón»). No es un capricho: cualquier ámbar con 4,5:1 sobre fondo claro es marrón,
       porque para bajarle la luminosidad hay que apagarlo. Mi intento anterior —oscurecerlo a
       #855500 para pasar AA— fue exactamente eso: un marrón. La salida no es elegir mejor el tono
       de texto, es dejar de pedirle al ámbar que sea texto: el color se muda al RELLENO y al BORDE
       (donde no hay requisito de contraste) y el texto va oscuro encima. Así se lee ámbar Y se lee
       el texto. En el verde y el rojo no pasa: oscurecidos siguen siendo verde y rojo. */
    --ambar: #eab308;           /* superficie */
    --ambar-tinta: #7a5200;     /* texto: 8,3:1 sobre blanco y 7,0:1 sobre el relleno ámbar */
    --rojo: #cf222e;
    --violeta: #6f42c1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* Columna del alto de la ventana: encabezado, `main` (que se estira) y pie. Es lo que hace que
       el pie caiga sobre el borde inferior aunque la página tenga poco contenido, en vez de quedar
       pegado al último bloque (Gus, 24-Sep-2026: «en el /home el footer debería ajustarse a la
       altura de la pantalla»). Los `<script>` al final del body son items de 0 px: no se ven.
       `100dvh` después de `100vh` para el teléfono, donde `vh` cuenta la barra de direcciones. */
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh;
    background: var(--bg);
    color: var(--texto);
    /* Space Grotesk autoalojada y VARIABLE (ver assets/vendor/spacegrotesk.css): un archivo por
       subset sirve los pesos 300-700, así que el 600 que el sitio pide en 14 reglas es una cara
       real —con Lato no existía y el 600 y el 700 eran el mismo archivo—. La monoespaciada —la
       pila del sistema— sigue a cargo de las cifras. Si el navegador no tiene la fuente, cae a la
       pila del sistema. Elegida por Gus el 24-Sep-2026, con un A/B medido. */
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/* Una sola columna para todo el sitio: encabezado, menú, contenido y pie alineados.
   Las franjas (header/menú/pie) ocupan el ancho con su fondo y borde; el contenido de
   cada una vive en la misma columna que `main`. */
.contenedor { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }

/* ── EL TEXTO NO SE INFLA EN EL TELÉFONO (2-Oct-2026) ─────────────────────────────────────────
   Gus: «queda escondido parte del modulito del usuario y el español/inglés a la derecha, como ves en
   mi captura». La barra es `position: fixed` anclada a la ventana y en mis mediciones entra hasta los
   280 px sin desbordar, así que la causa no estaba en el ancho: los navegadores de celular **inflan
   el texto** de los bloques que les parecen de lectura (font boosting de Chrome Android, y el ajuste
   equivalente de iOS) y este sitio nunca lo declaraba. Con el texto inflado, la marca ocupa más de lo
   que mide su caja y empuja la columna de la derecha fuera de la pantalla — exactamente el corte que
   se ve en la captura, con la marca arrancando más adentro y los controles a medias.
   `100%` significa «no lo agrandes»: respeta el tamaño que declaró la hoja de estilos, que es el que
   todos los demás anchos del sitio ya asumen. Sin esto, el mismo CSS mide distinto en cada teléfono. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Barra superior en UNA fila: marca · menú · acciones. Antes eran dos franjas (encabezado
   y menú de pestañas) que costaban 141 px de alto. El menú son enlaces, no botones: cada
   sección tiene URL propia y el botón atrás del navegador funciona.
   La barra es una grilla de 1fr · auto · 1fr: con las dos columnas laterales iguales, el
   menú queda centrado en la columna del sitio, no en el espacio que sobra.
   En pantalla angosta pasa a dos filas y el menú se centra en la suya. */
/* LA BARRA QUEDA PEGADA Y COMPACTA (Gus, 28-Sep-2026).
   Costo que hay que tener presente: mide 84 px (5.25rem) y en un teléfono de 844 eso es el 10% de la
   pantalla, para siempre; este sitio es aire. Por eso, apenas el contenido empieza a pasar abajo se
   compacta: baja a ~45 px (se va el subtítulo y se ajusta el aire) y recupera casi la mitad.
   `z-index: 20` la deja arriba del contenido y abajo del menú de cuenta (`.popover`, z-index 30).
   El fondo es OPACO a propósito: con el mismo color que el contenido, lo que pasa abajo se lee como
   roto si la barra no se despega con su borde y su sombra. */
header.app-header {
    /* FUERA DEL FLUJO, no `sticky` (29-Sep-2026): con `sticky` la barra ocupa lugar, así que al
       compactarse encogía y EMPUJABA el contenido hacia arriba — el salto que reportó Gus («se
       transforma y desplaza»). `fixed` la saca del flujo: compactar no mueve nada. El lugar que deja
       lo reserva el `body` con `--alto-barra`, que el script MIDE de la barra real (el alto cambia
       por breakpoint: 84 escritorio, 110,7 teléfono, y distinto en la portada). */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 1.45rem 0 .8rem;
    border-bottom: 1px solid var(--borde);
    background: var(--bg-alt);
    transition: padding .18s ease, box-shadow .18s ease;
}
header.app-header.pegada {
    padding: .55rem 0 .45rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
/* ── EN EL TELÉFONO, PEGADA QUEDA SÓLO EL MENÚ Y LOS DOS ÍCONOS (Gus, 29-Sep-2026) ────────────
   «lo que queda del header es solamente la línea del menú y los dos iconos: logo y usuario se iban».
   La barra del teléfono mide 110,7 px (marca + menú + cuenta + botones en dos filas): pegada baja a
   ~45, o sea devuelve dos tercios de lo que se había comido. La marca se va SALVO en la portada,
   donde no hay menú y la bajada ES la identidad del producto: sin ella quedaría un botón solo. */
@media (max-width: 899px) {
    body:not(.portada) header.app-header.pegada .marca { display: none; }
    header.app-header.pegada .acciones-cuenta { display: none; }
    /* Los dos que quedan pasan a la fila 1 y se va el espacio entre filas: si no, la fila vacía de
       arriba seguía sumando su `row-gap` (8 px) y el menú quedaba descolgado de los íconos. */
    header.app-header.pegada .barra { row-gap: 0; }
    header.app-header.pegada .barra > nav.menu { grid-row: 1; }
    header.app-header.pegada .barra > .acciones > .acciones-botones { grid-row: 1; }
    /* ⚠️ Y el botón del menú plegado, que reemplaza al menú cuando la barra está compacta (2-Oct-2026).
       Gus: «cuando se empieza a volver a subir y el header queda trancado, los íconos están
       desfasados, no suben juntos». Medido a 390 con la barra pegada: el menú va a la fila 1, pero el
       botón —que ahora es el que ocupa su lugar— seguía en la fila 2, así que quedaba un renglón de
       aire con las barritas abajo y la luna arriba. Esta regla es la que los junta. */
    header.app-header.pegada .barra > .menu-btn { grid-row: 1; }
}
/* El subtítulo es lo primero que se va: es el descriptor del producto, no la navegación. */
header.app-header.pegada .sub { display: none; }
/* El lugar de la barra en el flujo. El valor lo publica el script; 5.25rem es el respaldo (el alto
   del escritorio) por si el JS no llegó a correr. */
body { padding-top: var(--alto-barra, 5.25rem); }
/* Con la barra clavada, saltar a un ancla (`#progreso`, `#vision-macro`) dejaría el destino TAPADO
   por la barra: `scroll-margin-top` lo corre. Se usa el alto de referencia y no el compacto, porque
   el salto puede pasar con la página arriba, cuando la barra todavía no compactó. */
main [id] { scroll-margin-top: var(--alto-header); }
header.app-header .barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .4rem 1.4rem;
}
/* ── EL ORDEN DE LA BARRA (Gus, 24-Sep-2026) ─────────────────────────────────
   Menú a la IZQUIERDA, marca en el CENTRO, acciones a la derecha. El motivo es la entrada al
   sistema: con la marca a la izquierda, entrar la movía ~500 px (medido: centro 639 con la página
   de 1280 en la portada, x=20 adentro) y ese salto se veía justo cuando la portada se va. Centrada
   queda clavada, y al entrar lo único que CAMBIA es que aparecen el menú (izquierda) y las acciones
   (derecha) en los huecos que la portada ya deja libres.
   Las dos columnas laterales son `1fr`, así que el `auto` del medio cae en el centro REAL de la
   página sin depender de cuánto mida el menú — y el menú, al ser enlaces cortos, no lo corre.
   ⚠️ `grid-area: 1 / n` no es decorativo: sin la fila explícita, el auto-placement manda el tercer
   ítem a una fila nueva en cuanto el orden de las columnas no coincide con el del DOM.
   El orden del DOM NO cambia (marca → menú → acciones): el `h1` sigue siendo lo primero que lee un
   lector de pantalla, y la posición es sólo visual. */
header.app-header .menu     { grid-area: 1 / 1; justify-self: start; }
header.app-header .marca    { display: flex; align-items: center; min-width: 0;
                              grid-area: 1 / 2; justify-self: center; justify-content: center; }
header.app-header .acciones { grid-area: 1 / 3; justify-self: end; }
.marca-txt { display: flex; flex-direction: column; min-width: 0;
             align-items: center; text-align: center; }
/* La marca es el enlace al inicio (21-Sep-2026): sin subrayado y con el color del texto, porque
   es navegación y no un enlace en prosa.
   ⚠️ El hover que la pintaba de azul se SACÓ (Gus, 23-Sep-2026: «el logo es azul algunas veces y
   blanco otras, debería ser siempre blanco»). Es el único texto que identifica al producto: no
   puede cambiar de color. En escritorio el azul aparecía al pasar el mouse; en el teléfono, al
   tocarla, el estado `:hover` queda pegado y la marca se quedaba azul hasta el siguiente toque.
   El color es SIEMPRE el del texto del tema (blanco en oscuro, grafito en claro): fijarlo ahora
   evita que cualquier regla nueva lo herede mal. */
header.app-header a.marca-txt { color: inherit; text-decoration: none; }
header.app-header a.marca-txt:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
/* El color de la marca va en la MISMA regla que su tamaño (y no en una suelta más arriba: dos
   reglas del mismo selector en distintas partes del archivo es cómo una pisa a la otra sin que se
   vea). El valor es el del texto del tema, no un blanco fijo: en el tema claro, blanco sobre claro
   no se lee — «siempre blanco» quiere decir «siempre el color del texto», nunca azul. */
header.app-header h1 { margin: 0; font-size: 1.45rem; letter-spacing: .2px; line-height: 1.2;
                       color: var(--texto); }
header.app-header .sub { color: var(--texto-dim); font-size: .8rem; font-family: var(--mono); }
/* LA PÍLDORA «beta», PEGADA AL NOMBRE (Gus, 25-Sep-2026: «deberíamos poner un beta en algún lado del
   sitio»). Va acá y no en el pie porque el encabezado es el único lugar que se ve en TODAS las
   pantallas, incluida la portada; y va pegada al nombre porque es el estado del producto, no del
   contenido de una sección.
   Dos cosas que se ajustan solas: el tamaño, porque `.pill` fija el suyo (.7rem) y no hereda los
   23,2 px del `h1` —acá queda en .6rem, que es el escalón de las píldoras chicas—, y la alineación,
   porque el `h1` lleva `line-height: 1.2` y la píldora, con su borde, quedaría alta: `vertical-align`
   la baja a la altura de las minúsculas. `neutro` (gris) y no `acento`: la marca es blanca siempre
   (Gus, 23-Sep-2026) y un color al lado del nombre vuelve a discutir eso. */
header.app-header h1 .pill { font-size: .6rem; padding: .08rem .42rem; letter-spacing: .02em;
                             vertical-align: .16em; margin-left: .35rem; }

nav.menu { display: flex; align-items: center; gap: 1.1rem; justify-self: center; overflow-x: auto; }
nav.menu a {
    color: var(--texto-dim);
    text-decoration: none;
    font-size: .9rem;
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
nav.menu a:hover { color: var(--texto); }
nav.menu a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acento); }

/* ── EL MENÚ PLEGADO DEL TELÉFONO (Gus, 1-Oct-2026) ─────────────────────────────────────────────
   «Tenemos un problema con el largo del menú: «Economía de agentes» es más larga y se mete atrás de
   la lunita… estamos necesariamente en celular para empezar a meter un menú hamburguesa, porque
   estamos atados al largo de las palabras». Medido a 390 px: el tercer enlace se cortaba justo donde
   empieza el botón de tema.
   El botón vive en la MISMA celda de la grilla que el menú (`grid-area: 1 / 1`), así que los dos
   ocupan el mismo lugar y el ANCHO decide cuál se ve: acá el botón no existe, y en el @media de abajo
   se invierte. Las tres barritas se dibujan con CSS (y no con un glifo) porque el ícono tiene que
   salir con la tipografía del sitio, no con la que cada equipo tenga para ese carácter. */
.menu-btn {
    grid-area: 1 / 1; justify-self: start;
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    /* ⚠️ SIN CÍRCULO (Gus, 2-Oct-2026): «no me gusta que el menú tenga también un círculo… si fuera
       sin círculo lo metería con los otros tres». Queda sólo el ícono de tres barritas: el área de
       toque de 40×40 se conserva —es lo que lo hace cómodo en el teléfono— pero sin fondo, sin borde
       y sin esquina redondeada, así no compite con los botones que sí son pastillas. */
    background: none; border: 0; border-radius: 0;
    color: var(--texto-suave); cursor: pointer; font: inherit;
}
.menu-btn-barras, .menu-btn-barras::before, .menu-btn-barras::after {
    /* Un 40% más grande, con la MISMA línea (Gus, 2-Oct-2026): «creo que igual está chico; lo
       agrandaría un 40% de tamaño, pero sin engrosar las líneas». Se fue de 16 px de largo a 22 y la
       separación de ±5 a ±7, con el grosor en 2 px.
       Y después el afinado (Gus, mismo día): «ya que lo vas a tocar, afinaría un 20% las rayitas del
       menú; creo que no están elegantes». Medido sobre el ícono grande, quedó así: largo 22 → 20,
       grosor 2 → 1,5 px, separación ±7 → ±6. La línea más fina es lo que lo vuelve elegante —el
       problema no era el tamaño sino el trazo— y el conjunto sigue siendo un 25% más grande que el
       original en largo y un 25% más fino en grosor. */
    display: block; width: 20px; height: 1.5px; border-radius: 2px; background: currentColor;
}
.menu-btn-barras { position: relative; }
.menu-btn-barras::before, .menu-btn-barras::after { content: ''; position: absolute; left: 0; }
.menu-btn-barras::before { top: -6px; }
.menu-btn-barras::after { top: 6px; }
.menu-btn:hover { color: var(--texto); }
.menu-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* En la portada no hay menú ni navegación: el botón tampoco. */
body.portada .menu-btn { display: none; }

/* ⚠️ Hasta 899 px, no 719: medido, entre 720 y 880 el menú completo choca con la MARCA centrada
   —a 730 y a 800 el enlace «Economía de agentes» se monta sobre «Silicaa» y su bajada, y a 860
   todavía se tocan—. O sea: el rango intermedio (tablet) no tiene lugar para los tres enlaces.
   899 es además el corte de escritorio que el sitio ya usa para la barra compacta, así que el menú
   plegado y la barra compacta cambian de estado en el mismo ancho. */
@media (max-width: 899px) {
    header.app-header .barra { position: relative; }
    header.app-header .barra > nav.menu { display: none; }
    .menu-btn { display: inline-flex; }
    /* ⚠️ El selector lleva las TRES clases + el elemento, igual que el que oculta el menú: con
       `nav.menu.abierto` a secas (0,2,1) la regla de arriba (0,3,2) le gana y el panel NUNCA se abre
       —el botón cambia a `aria-expanded="true"` y no pasa nada—. Medido el 1-Oct-2026. */
    /* El panel cuelga de la barra y ocupa el ancho, como una hoja. `absolute` para que NO empuje el
       contenido: abrir el menú no puede mover la página.
       ⚠️ `grid-column: 1 / -1` NO es decorativo: un hijo absoluto de un contenedor de grilla se
       posiciona dentro de SU ÁREA (la columna 1 de la barra del teléfono, 228 px), así que con
       `left: 0; right: 0` el panel medía 200 px —el ancho de su columna— en vez del ancho de la
       barra. Cruzando las dos columnas, el área es toda la barra. Medido el 1-Oct-2026. */
    /* ── EL DESPLIEGUE CUELGA DEL BOTÓN, PEGADO A LA IZQUIERDA (Gus, 2-Oct-2026) ────────────────
       Primero probé pantalla completa con un velo gris y no le gustó nada: «tiene un gris que no es
       propio del sitio, está muy claro; y el texto quedaba mejor antes, más cerca del menú, los ítems
       justificados a la izquierda: uno toca el menú y tiene cerca de donde tocó los ítems, como
       cualquier índice, no centrado, que no le veo ningún sentido».
       Entonces: índice desplegable, colgado de la barra y arrancando donde está el botón (a la
       izquierda), con los colores del propio sitio —`--panel`, `--borde`— y los ítems alineados a la
       izquierda. Sin velo: la página de atrás queda como está.
       ⚠️ `justify-self: start` acá NO es cosmético (es la misma trampa que documenta la línea de
       arriba): un hijo absoluto de una grilla se alinea dentro de su área con esta propiedad, así que
       `start` lo pega al borde izquierdo y le deja el ancho del contenido. Y `position: absolute` con
       `top: 100%` lo cuelga de la barra sin empujar el contenido. */
    header.app-header .barra > nav.menu.abierto {
        grid-column: 1 / -1;
        justify-self: start;
        position: absolute; top: calc(100% + .35rem); left: 0;
        width: max-content; min-width: 13rem; max-width: min(100%, 20rem);
        display: flex; flex-direction: column; align-items: stretch;
        background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
        padding: .35rem; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); z-index: 40;
    }
    header.app-header .barra > nav.menu.abierto a {
        padding: .7rem .85rem; text-align: left; border-bottom: 0; border-radius: 8px;
        font-size: .95rem; color: var(--texto-suave);
    }
    /* El activo se marca con el fondo y el color del texto, NO con negrita: Gus, «el texto del tercer
       ítem de Economía de Agentes está más grueso que los otros» — el peso distinto entre ítems se lee
       como un error, no como un estado. */
    header.app-header .barra > nav.menu.abierto a[aria-current="page"] {
        background: rgba(127, 127, 127, .12); color: var(--texto); }
}

header.app-header .acciones {
    position: relative;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* ── LOS DOS BLOQUES DE LA BARRA (26-Sep-2026, diseño de Gus) ─────────────────────────────────
   Los botones que van juntos (tema e idioma) en un bloque, y la pastilla del usuario en otro. Acá
   (escritorio) `.acciones` sigue siendo una fila con los dos bloques adentro y el orden lo da el
   DOM: botones primero, cuenta al final. La barra no cambia ni un píxel.
   En el teléfono el índice rearma la barra como grilla y cada bloque cae en su celda: ver el
   bloque de `max-width: 640px`, más abajo, donde está el porqué de cada valor. */
header.app-header .acciones-botones,
header.app-header .acciones-cuenta { display: flex; align-items: center; }
header.app-header .acciones-botones { gap: .5rem; }
.punto {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex: 0 0 auto;
}
/* El punto del rastrillaje usa el COLOR para decir la antigüedad, antes de que alguien lea el texto:
   verde = al día · ámbar = atrasado · rojo = dos ciclos sin correr, o sin dato. Es lo que hace que
   una búsqueda abandonada no se vea igual que una al día. */
.punto.verde { color: var(--verde); }
.punto.ambar { color: var(--ambar-tinta); }
.punto.rojo { color: var(--rojo); }
.punto.neutro { color: var(--texto-dim); }

/* Botón de cuenta (rincón derecho). Era un círculo fantasma de 34 px con el ícono solo:
   Gus pidió engrosarlo el 18-Sep-2026. Ahora es una píldora con cuerpo —ícono + «Cuenta»—
   para que el rincón derecho tenga peso propio. En móvil queda sólo el ícono. */
button.icono {
    appearance: none;
    min-height: 40px;
    padding: 0 .75rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 999px;
    color: var(--texto-suave);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;      /* Lato no trae 500 ni 600: el 600 lo sirve la cara 700 (ver lato.css) */
}
button.icono:hover { color: var(--texto); background: var(--panel-2); }
button.icono[aria-expanded="true"] { color: var(--texto); background: var(--panel-2); border-color: var(--acento); }
button.icono svg { width: 20px; height: 20px; display: block; flex: 0 0 auto; }

/* ── El botón de tema (luna / sol) ─────────────────────────────────────────────
   Mismo cuerpo que el botón de cuenta (40 px, píldora, borde `--borde`), así que en la barra
   quedan dos controles parejos. El ícono que se ve es el del tema al que VA: luna en el tema claro,
   sol en el oscuro. Sin estas reglas los dos SVG saldrían superpuestos, porque `button.icono svg`
   los pone en `display: block`. Pedido de Gus (23-Sep-2026) con la referencia de
   perplexity.ai/computer: un botón de ícono, no dos botones con las palabras «Oscuro» y «Claro». */
button.icono .ico-sol { display: none; }
html[data-tema="oscuro"] button.icono .ico-luna { display: none; }
html[data-tema="oscuro"] button.icono .ico-sol { display: block; }

/* Menú de cuenta: un solo panel con la cartera que se está viendo y los datos de la cuenta. El
   tema salió de acá el 23-Sep-2026 (pasó al botón de ícono de la barra). Un ícono con nombre
   accesible (aria-label) en vez de dos bloques de texto en la barra. */
.popover {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 30;
    min-width: 268px;
    max-width: min(320px, calc(100vw - 2rem));
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .8rem .9rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    /* Con la ficha de la cuenta adentro el menú creció: en una ventana baja no puede salirse
       de la pantalla (medido: 454 px de alto contra 577 de ventana). */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}
/* La ficha de la cuenta se mudó acá (18-Sep-2026): en un menú angosto la tarjeta anidada
   no aporta y el cuerpo de texto grande hace un panel larguísimo. Se aplana y se compacta. */
.popover .card { background: none; border: 0; padding: 0; }
.popover .fila { font-size: .78rem; }
.popover .nota { font-size: .74rem; margin: .5rem 0 0; }
.popover .grupo + .grupo { margin-top: .85rem; }
.popover h4 { margin: 0 0 .35rem; }
.popover .segmentado { margin: .25rem 0 0; }
/* El enlace a la Cartera, dentro del menú de Cuenta (24-Sep-2026): la cartera es del usuario —«no hay
   cartera sin usuario»—, así que no tiene puerta propia en el menú y se entra desde acá. */
.enlace-cartera { display: block; margin-top: .55rem; font-size: .82rem; color: var(--acento); }
.popover select { width: 100%; }

main { padding: var(--pad-main, 1.25rem); max-width: 1280px; margin: 0 auto;
       /* El `main` se lleva todo el alto que sobra y el pie cierra abajo (Gus, 24-Sep-2026: «en el
          /home el footer debería ajustarse a la altura de la pantalla»). Antes cada página medía lo
          que medía su contenido y el pie quedaba pegado al último bloque.
          ⚠️ `main` como columna: los paneles son sus items y el `[hidden]` los saca de la cuenta. El
          interior de cada panel NO cambia —siguen siendo bloques, así que el colapso de márgenes de
          adentro queda igual—; sólo `#panel-home` se vuelve columna, más abajo. */
       flex: 1; display: flex; flex-direction: column;
       /* ⚠️ `width: 100%` NO es redundante: con `margin: 0 auto` el `main` deja de estirarse como
          item de flex (los márgenes automáticos absorben el espacio libre) y se encoge al ancho de
          su contenido — medido: 746 px en una ventana de 1265, con la grilla cayendo de cuatro
          columnas a dos. Es el mismo efecto que tuvo `.explicacion` dentro de su columna. */
       width: 100%; }
main > .tab-panel > p.nota:first-of-type { margin-top: 0; }
section.tab-panel[hidden] { display: none; }

/* Jerarquía: h1 (sitio) · h2 (PÁGINA) · h3 (sección) · h4 (subgrupo).
   El título de página volvió cuando las pestañas se volvieron enlaces: la barra de arriba es
   navegación y esto es dónde estás. La diferencia con el que se había sacado (6ª revisión,
   "es raro que se repita explorador abajo del menú, casi con el mismo tamaño") es el tamaño:
   la pestaña competía; un enlace chico arriba y un título grande abajo no se repiten.
   ⚠️ 1.45rem desde el 24-Sep-2026 (Gus: «tiene que haber un título fuerte y en blanco»): es el
   MISMO cuerpo que el título azul de la portada, así que las dos pantallas principales del sitio
   tienen el mismo escalón. El color es el del texto (blanco en oscuro), no el apagado de antes. */
main h2 { font-size: 1.45rem; font-weight: 600; text-transform: none; letter-spacing: 0;
          color: var(--texto); margin: 0 0 .25rem; }
/* El título de sección, un escalón abajo y apagado: «ya mucho más chico… es mucho menos
   importante» (Gus, 24-Sep-2026). Antes medía lo mismo que un cuerpo de texto (1rem) y competía
   con el título de la página. */
main h3 { font-size: .9rem; font-weight: 600; color: var(--texto-suave); margin: 1.7rem 0 .5rem; }
/* El título de sección que ABRE un contenedor no necesita el aire completo: arriba ya está el
   título de la página. ⚠️ Era `:first-of-type` y eso mira la ETIQUETA, no la posición: en el bloque
   del macro «Termómetros» es el primer `h3` de su contenedor —los títulos de arriba son `h4`— así
   que se llevaba los 9,6 px y quedaba pegado a la última fila de instrumentos, mientras «Noticias
   del día» (segundo `h3`) sí tenía los 27,2 px. Gus, 25-Sep-2026: «los títulos tendrían que tener el
   mismo espacio arriba que Noticias del día. Mirá termómetros lo apretado que está». Con
   `:first-child` la regla alcanza sólo al que de verdad arranca el bloque. Medido: arriba de
   «Termómetros» 9,6 → 27,2 px; «Noticias del día» queda igual. */
main h3:first-child { margin-top: .6rem; }

/* Cabecera de página: el nombre de la sección y, al costado, qué se ve ahí. El texto de
   costado es lo que hace ganar altura (antes iba debajo y empujaba todo media pantalla).
   Medido contra el mockup del 18-Sep: columna del rótulo 177 px y 45 px de aire hasta el
   bloque siguiente. */
/* ── LA JERARQUÍA DE LA PÁGINA (Gus, 24-Sep-2026) ───────────────────────────────────────────────
   «Tiene que haber un título fuerte y en blanco que diga Selección GARP. Después un texto
   justificado de izquierda, que sea la explicación general de la página. Y después, ya mucho más
   chico, el título de la sección.»
   Las tres piezas, en orden y con su peso:
     1. TÍTULO de página  — `main h2`, 1.45rem, peso 600, color de texto (blanco): es lo que dice
        dónde estás. Antes la página no lo tenía (el nombre se leía en el menú, criterio del
        21-Sep) y por eso el título aparecía como una bajada más, en gris y chico;
     2. EXPLICACIÓN       — `p.lead`, tamaño de lectura, alineada a la IZQUIERDA y arrancando en
        el mismo riel que el título. Antes vivía en las columnas 2-3 y centrada respecto de la
        página: con el menú a la izquierda eso la dejaba flotando en el medio;
     3. TÍTULOS DE SECCIÓN — `h3`, un escalón abajo (ver `main h3`), más apagados.
   ⚠️ La cabecera con título es UNA COLUMNA: el título arriba y su explicación abajo, los dos
   alineados al borde izquierdo. La grilla de dos columnas (`11rem 1fr`) ponía la explicación al
   costado del título, que es el patrón que Gus descartó. */
.cabecera {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    margin: 0 0 1.6rem;
}
.cabecera h2 { margin: 0; }
/* Cabecera sin título (21-Sep-2026): la pestaña está en el menú y su nombre ya se lee ahí, así que
   la fila arranca con la bajada a todo el ancho en vez de dejar la columna del título vacía.
   Queda para las páginas que todavía no tienen título propio (Macro y Cartera). */
.cabecera.sin-titulo { grid-template-columns: 1fr; }
.cabecera.sin-titulo p.lead { max-width: var(--dos-columnas); }
/* El tope de las bajadas es el de DOS COLUMNAS de la grilla de cuatro (ver `--dos-columnas`). Gus,
   25-Sep-2026: «los textos centrales están con una columna larga, habíamos definido que nada
   ocupara más de dos». Antes: 74ch acá, 54rem (864 px, 2,7 columnas) en las vistas con título y
   95ch en la regla general; las tres medían lo mismo en pantalla y las tres pasaban de dos. */
.cabecera p.lead { margin: 0; max-width: var(--dos-columnas); }

/* ── Encabezado de página con SANGRÍA (28-Sep-2026, pedido de Gus) ───────────────────────────────
   En PC, el encabezado de cada página se corre a la derecha hasta quedar alineado con la «M» de
   «Momentum» del menú, y gana aire: 30% más arriba y 20% abajo. La idea es que la cabecera tenga
   destaque y que la página respire antes de la información dura.
   Medido a 1280 px: la M cae en 74 px y el contenido arranca en 20, así que la sangría son 54 px
   (el ancho del menú no depende del ancho de la ventana: `.menu` va `justify-self: start`).
   El aire de arriba era 41 px y pasa a 53 (el margen de 12 px); el de abajo era 1.6rem y pasa a
   1.6rem × 1.2 = 30.7 px.
   ⚠️ Excluye `.cabecera-seccion`: esas viven en la grilla de cuatro columnas y su título tiene que
   seguir cayendo sobre la primera tarjeta de abajo. Y es sólo de PC: en el teléfono el encabezado
   sigue a todo el ancho.
   ⚠️ Y el texto de destaque NO puede pasar el medianil (Gus, 29-Sep-2026: «no debería pasar del
   medio de la página y de hecho quedarse un poquito antes, tomando en cuenta el medianil… su largo
   sería el de dos columnas menos la sangría»). Con la sangría puesta, `--dos-columnas` (50% − medio
   `gap`) se resolvía contra el ancho YA sangrado, así que el texto terminaba pasado del medio.
   Medido antes del arreglo, a 1280 px: el texto de GARP arrancaba en 74 y terminaba en **656**,
   cuando el borde de las columnas 1-2 cae en **629** y la columna derecha empieza en **636** — se
   metía 27 px. La cuenta del ancho correcto sale de ahí:
     el borde de dos columnas es `W/2 − gap/2` (el medio menos medio medianil), y como el bloque
     arranca en `S`, el ancho es `W/2 − gap/2 − S`. Lo que da la hoja es `50% − gap/2`, y ese 50%
     ya es `(W − S)/2`, así que falta descontar **la mitad de la sangría**: de ahí el `/ 2`.
   Da igual el ancho de ventana: el resultado cae siempre sobre el borde de la segunda columna. */
@media (min-width: 900px) {
    .tab-panel > .cabecera:not(.cabecera-seccion) {
        --sangria-cabecera: 54px;
        margin: 12px 0 calc(1.6rem * 1.2) var(--sangria-cabecera);
    }
    /* El destaque (`.lead`) y la bajada de las vistas que todavía la llevan como nota (Crypto) topan
       los dos en el medianil: mismas piezas, misma regla. */
    .tab-panel > .cabecera:not(.cabecera-seccion) p.lead,
    .tab-panel > .cabecera:not(.cabecera-seccion) p.nota {
        max-width: calc(50% - .225rem - var(--sangria-cabecera) / 2);
    }
}

/* Cabecera de sección: mismo patrón, un escalón más chico (h3 + su nota al costado). */
.cabecera.cabecera-seccion { margin: 1.7rem 0 1.2rem; }
main .cabecera-seccion h3 { margin: 0; }
.cabecera-seccion p.nota { margin: 0; }

/* ⚠️ La cabecera de sección se ata a la MISMA grilla de cuatro columnas que las filas de tarjetas
   (`.lista`), no a un ancho propio. Hasta el 24-Sep-2026 heredaba `11rem 1fr` de `.cabecera`: la
   columna del título medía 176 px FIJOS y todo título que pidiera más se partía en dos renglones
   (reportado por Gus: «Selección vigente (1–15 Sep)»). Medido con la tipografía nueva: ese título
   necesita 257 px, «Universo evaluado — 20 acciones» 299 px y «Proyectos cripto para agentes
   autónomos» 382 px.
   Con la grilla de la página, el título ocupa las columnas 1-2 (616 px sobre 1240) y entra en UN
   renglón; el texto va en las columnas 3-4, así que su borde izquierdo cae sobre la misma línea
   vertical que la tercera tarjeta de la fila de abajo. La medida de lectura del texto no se toca
   (`p.nota` sigue topeada en 62ch = 540 px por la regla de medida, que es más específica).
   Sólo desde 900 px: más abajo las cuatro columnas quedan demasiado angostas y manda el apilado
   de `.cabecera { grid-template-columns: 1fr }` del bloque de 640. */
@media (min-width: 900px) {
    .cabecera.cabecera-seccion { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: .45rem; }
    /* El título cede el MEDIANIL por su derecha: sin esto su texto puede terminar a 8 px del texto
       de la derecha (el `gap` de .45rem de la grilla, que en las tarjetas alcanza porque tienen
       borde y padding). Con el padding, entre el título y su nota quedan 22.4 px de aire. */
    .cabecera.cabecera-seccion > :first-child { grid-column: 1 / span 2; padding-right: var(--medianil); }
    .cabecera.cabecera-seccion > :nth-child(2) { grid-column: 3 / span 2; }
}
/* La explicación general de la página: tamaño de lectura (no de interfaz) y en el tono suave, que
   se lee sin competir con el título. Era .92rem en `--texto-dim` —el tono más apagado de la
   paleta— y Gus la leyó como un subtítulo más, no como lo que es (24-Sep-2026). */
p.lead { font-size: .98rem; line-height: 1.6; color: var(--texto-suave); margin: 0 0 .3rem; max-width: var(--dos-columnas); }
p.nota.chica { font-size: .76rem; margin: 1.2rem 0 .2rem; }
/* Nota a la COLUMNA DERECHA (28-Sep-2026, pedido de Gus: la nota del alpha de GARP tenía que caer
   «como los otros grises»). Las bajadas de las cabeceras de sección ocupan las columnas 3-4, así que
   esta nota usa el mismo borde izquierdo (`calc(50% + .225rem)` = la mitad más medio `gap`), y el
   mismo aire arriba que una cabecera de sección: 1.7rem, el que separa un bloque de otro.
   ⚠️ El `margin-top` va con el peso de `main > .tab-panel > p.nota:first-of-type` —la regla que le
   quita el aire a la primera nota del panel— porque si no, la nota queda pegada a la gráfica (medido:
   hueco de 0 px). Conserva el tope de lectura de 62ch del resto de las notas: con él, el texto
   termina sobre el mismo borde que las bajadas de arriba (medido: 1176 px las dos). */
/* Aire del bloque, ARRIBA Y ABAJO: con el 0 de abajo, la nota se pegaba al cuadro que viniera después
   y con el gráfico de rendimiento se superponían (reportado por Gus con captura del teléfono,
   28-Sep-2026). */
main > .tab-panel > p.nota.columna-derecha { margin: 1.7rem 0 1.7rem; }
/* Rótulo que abre un bloque de nota (hoy el de rendimiento de Momentum): marca de qué es la nota, con
   la fecha. Va en el tono del texto pero con peso, y la nota que sigue se le pega: son una pieza. */
/* El rótulo está PEGADO a su nota (son una pieza), con el ritmo de un `h4` de la casa. */
main > .tab-panel > p.nota.rotulo-nota { font-weight: 600; margin-bottom: .45rem; }
main > .tab-panel > p.nota.rotulo-nota + p.nota.columna-derecha { margin-top: 0; }
/* Lo que CIERRA una sección (hoy la descarga de GARP) lleva el mismo aire arriba que el resto de los
   bloques: sin esto quedaba pegada al bloque anterior con un hueco de 0 px (medido 28-Sep-2026). */
.cierre-seccion { margin-top: 1.7rem; }
/* El pie de un gráfico (lo que explica la diagonal) también respira: como `p.nota` solo trae .2rem
   arriba, quedaba a 3 px de la caja del gráfico. */
.nota.pie-grafico { margin: 1.7rem 0 1.7rem; }
@media (min-width: 900px) {
    main > .tab-panel > p.nota.columna-derecha { margin-left: calc(50% + .225rem); }
}
/* ── DOS COLUMNAS DENTRO DE UN BLOQUE (Gus, 29-Sep-2026, sobre su maqueta) ───────────────────────
   El rótulo a la izquierda (columnas 1-2) y su texto a la derecha (columnas 3-4), en la MISMA fila.
   Usa la grilla de la página —cuatro columnas de `minmax(0, 1fr)` con el `gap` de .45rem—, así el
   borde izquierdo de la segunda mitad cae sobre la misma vertical que las bajadas de las cabeceras
   (`calc(50% + .225rem)`) y que el borde de la 3ª tarjeta de una fila. Abajo de 900 px se apila: ahí
   cuatro columnas son ilegibles, y el orden es el del DOM (izquierda y después derecha). */
@media (min-width: 900px) {
    .bloque-dos-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: .45rem; }
    .bloque-dos-columnas > .col-izq { grid-column: 1 / span 2; }
    .bloque-dos-columnas > .col-der { grid-column: 3 / span 2; }
    /* El aviso de «sin señales» es un bloque de dos columnas ADENTRO del recuadro: el rótulo en las
       columnas 1-2 y el texto en las 3-4. La mitad de adentro arranca a 1rem del borde —el padding
       de `.vacio`— sobre la mitad de afuera, así que el texto queda a 1-2 px de la vertical de las
       otras segundas mitades (medido: 641 contra 643). */
    .vacio.aviso-senales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: .45rem; }
    .vacio.aviso-senales > strong { grid-column: 1 / span 2; }
    .vacio.aviso-senales > .texto { grid-column: 3 / span 2; }
}
/* El texto del aviso lleva la MISMA medida de lectura que las notas (hoy 616 px = el ancho de dos
   columnas): sin tope llenaba su celda —592 px a la fecha— y el bloque de abajo terminaba 52 px
   antes, así que las dos columnas de la derecha parecían de ancho distinto (reportado por Gus,
   29-Sep-2026: «se corta antes»). Con el tope, las tres piezas de la derecha terminan en la misma
   vertical. */
.vacio.aviso-senales > .texto { max-width: 593px; font-size: .92rem; }
/* El aviso se lee como una caja de las que están pero podrían no estar (Gus, 29-Sep-2026: «un
   fondito gris, igual que la gráfica, línea clara y fondo apenas griseado»). Sólo se le agrega el
   FONDO —el mismo token que el marco del gráfico (`.chart-wrap`), no una paleta nueva— y el borde
   queda como estaba, **punteado**: Gus, 29-Sep-2026: «lo del punteado no está mal para esa idea de
   que es provisorio». Rayado = provisorio, fondo = presente; el punteado sin fondo era lo que lo
   hacía leer como un hueco. */
.vacio.aviso-senales {
    background: var(--panel);
    /* Gus, 29-Sep-2026: «haría más gruesa la punteada, que se note». 2 px sobre el `--borde` que ya
       usa el resto de las cajas: el trazo de 1 px con `--borde` (#2a323d en oscuro) es casi
       invisible para una línea que tiene que leerse como intención, no como borde de tarjeta. */
    border-width: 2px;
}
/* El título de la sección sigue llevando su aire de bloque aunque ahora abra una mitad: sin esto,
   `main h3:first-child` lo alcanza —es el primer hijo de su div— y le baja el margen de 1.7rem
   a .6rem. */
.bloque-dos-columnas .col-izq > h3:first-child { margin-top: 1.7rem; }
/* El rótulo y su nota son UNA pieza (las reglas de `main > .tab-panel > p.nota…` ya no los alcanzan:
   ahora viven dentro de un div). El `margin-top` de 1.7rem es el mismo del h3 de la izquierda: por
   eso las dos mitades arrancan a la misma altura y se leen como una fila. */
.bloque-dos-columnas .col-der > .rotulo-nota { font-weight: 600; margin: 1.7rem 0 .45rem; }
.bloque-dos-columnas .col-der > .rotulo-nota + p.nota { margin-top: 0; }

/* Contadores del día en LISTA (Gus, 29-Sep-2026: «esto podría ser una lista en vertical, en vez de un
   texto de una línea»). Antes era un renglón corrido con `·` y la última cuenta —«4 descartadas
   (quedan en el registro)»— se partía sola; en vertical cada número se lee sin compararlo con el
   vecino. El número va en la mono del sitio (como los valores de `.datos-linea`) y la etiqueta en el
   tono de nota; con `auto` en la primera celda, las etiquetas quedan alineadas entre renglones sin
   fijar un ancho a mano. */
.lista-contadores { list-style: none; margin: .2rem 0 1rem; padding: 0; max-width: 593px; }
.lista-contadores li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45rem;
                       font-size: .92rem; line-height: 1.7; color: var(--texto-dim); }
.lista-contadores li > strong { font-family: var(--mono); font-weight: 600; color: var(--texto-suave);
                                text-align: right; }

/* Convención de la plataforma: lo importante a la izquierda, lo accesorio a la derecha. */
.derecha { text-align: right; }

/* El enlace que cierra una fila de tarjetas («Visita el análisis detallado…», `nota chica derecha`)
   no puede quedar con el tope de lectura de 62ch: con `text-align: right` el texto terminaba en el
   MEDIO de la página —alineado con nada— (medido el 24-Sep-2026: caja de 20 a 503 px, entre las
   columnas 1 y 2, cuando el borde de la 2ª columna está en 332 y el de la 4ª en 1259, que es donde
   terminan las tarjetas de arriba).
   Sin tope, el texto se alinea contra el borde derecho de la página = el de la 4ª columna. Es una
   línea corta, así que el ancho no se lee como columna ancha: si algún día el texto crece, hay que
   darle su propia medida. */
.nota.chica.derecha { max-width: none; }
main h4 { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
          color: var(--texto-dim); margin: 1.1rem 0 .45rem; }
.card h3 { margin: 0 0 .55rem; font-size: .95rem; }
p.nota { color: var(--texto-dim); font-size: .92rem; margin: .2rem 0 1rem; }

.grid {
    display: grid;
    gap: .75rem;
    /* ancho máximo por tarjeta: con 2 o 3 elementos no se estiran a media pantalla */
    grid-template-columns: repeat(auto-fit, minmax(210px, 260px));
    justify-content: start;
}
.grid-kpi { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 1rem; }

.card {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .85rem .9rem;
}
.card .titulo { display: flex; align-items: baseline; gap: .5rem; }
.card .ticker { font-family: var(--mono); font-weight: 700; font-size: 1rem; }
.card .nombre { color: var(--texto-dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .fila { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; margin-top: .35rem; }
.card .fila .k { color: var(--texto-dim); }
.card .fila .v { font-family: var(--mono); }
/* Los renglones de dato dentro de una tarjeta abierta (`.item`, la que abre el momentum y el
   explorador) no tenían layout: la etiqueta quedaba pegada al valor («CapitalizaciónUS$
   78,2 B», reportado por Gus el 19-Sep-2026). Y al abrirse la tarjeta ocupa la fila entera,
   así que `space-between` los separaba 900 px. Dos columnas: etiqueta a la izquierda, valor
   alineado a 12rem — se leen juntos y los valores quedan en columna. */
.item .cuerpo .fila { display: grid; grid-template-columns: 12rem 1fr; gap: .2rem .75rem;
                      justify-content: start; align-items: baseline; margin-top: .3rem; }
.item .cuerpo .fila .k { color: var(--texto-dim); }
.item .cuerpo .fila .v { font-family: var(--mono); }
.card .motivo { color: var(--texto-dim); font-size: .78rem; margin-top: .5rem; }

.kpi { background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .75rem; }
.kpi .k { color: var(--texto-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.kpi .v { font-family: var(--mono); font-size: 1.45rem; font-weight: 600; }
.kpi .v.palabra { font-family: inherit; font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
.kpi .v.verde { color: var(--verde); }
.kpi .v.rojo { color: var(--rojo); }
.kpi .v.ambar { color: var(--ambar-tinta); }
/* Tinte sutil del KPI que resume: fondo y borde apenas teñidos, no un bloque de color.
   El alfa sale de la misma variable semántica con `color-mix`, así el tema claro hereda
   el tinte correcto sin un segundo juego de colores literales. */
.kpi.tinte-verde {
    background: color-mix(in srgb, var(--verde) 8%, transparent);
    border-color: color-mix(in srgb, var(--verde) 38%, transparent);
}
.kpi.tinte-rojo {
    background: color-mix(in srgb, var(--rojo) 8%, transparent);
    border-color: color-mix(in srgb, var(--rojo) 38%, transparent);
}

.pill {
    display: inline-block;
    white-space: nowrap;            /* el texto de una píldora nunca se parte en dos líneas */
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 700;
    padding: .12rem .5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    /* El FONDO translúcido del propio color: es lo que refuerza el color de la píldora — sin esto
       quedaba como un contorno vacío, y en el tema claro el color se leía todavía menos. Mismo
       recurso que el control del GARP en el menú (que mezcla el acento con el panel), pero con
       `currentColor` en vez de una variable: así la píldora hereda el color de su variante
       (`verde`/`ambar`/`rojo`/`neutro`/`acento`/`violeta`) y sigue al tema sin una regla por color.
       Cuidado al subir este número: cuanto más cerca está el fondo del color del texto, menos
       contraste tiene la píldora. Los colores del tema claro están oscurecidos justo para esto
       (ver el bloque `html[data-tema="claro"]`). */
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.pill.verde { color: var(--verde); }
.pill.ambar { color: var(--ambar-tinta); border-color: var(--ambar);
               background: color-mix(in srgb, var(--ambar) 26%, transparent); }
.pill.rojo { color: var(--rojo); }
.pill.neutro { color: var(--texto-dim); }
.pill.acento { color: var(--acento); }
.pill.violeta { color: var(--violeta); }

table { width: 100%; border-collapse: collapse; font-size: .85rem; }
table th, table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--borde); }
table th { color: var(--texto-dim); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
table td.num { font-family: var(--mono); }
table tbody tr:hover { background: var(--panel); }
/* Signo del rendimiento en la planilla de momentum (28-Sep-2026). El sitio marca el signo
   con `verde`/`rojo`; la tabla no tenía regla propia y el número salía sin color. */
table td.num.verde { color: var(--verde); }
table td.num.rojo { color: var(--rojo); }
/* La planilla de momentum (28-Sep-2026): sin `nowrap` la fecha se partía en dos líneas («Sep» /
   «25») porque la tabla se encoge al 100% del contenedor. Con el ancho real, el scroll de
   `.tabla-scroll` es el que resuelve el teléfono, y en escritorio no aparece. */
table.planilla th, table.planilla td { white-space: nowrap; }

.chart-wrap { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .85rem; }
/* ── LA TABLA NO PUEDE ENSANCHAR LA PÁGINA (2-Oct-2026) ────────────────────────────────────────
   Gus: «sigo teniendo problemas con el ancho de la página: se me salen para afuera, para la derecha,
   los tres circulitos». Medido en el Home entrado, a 390 px: la tabla del calendario macro
   (HORA / DATO / CONSENSO / ANTERIOR / IMPACTO) mide **369 px dentro de una caja de 346** → 23 px de
   desborde que ensanchan la PÁGINA. La barra es `fixed` y se ancla a la ventana, así que se va con la
   página: los controles de la derecha quedan fuera de la pantalla.
   La tabla ya tiene su letra y su relleno chicos en el `@media` de más abajo (`.78rem` y
   `.35rem .4rem`) y aun así no entra: son cinco columnas cuyo contenido no baja de ~369 px. Lo que
   resuelve el caso es que la caja scrollee: el desborde se queda adentro de la tarjeta en vez de
   correr toda la página. Es el MISMO patrón que ya usa la planilla de Momentum en el teléfono. */
.chart-wrap.angosta { overflow-x: auto; }
/* ⚠️ AIRE ARRIBA, EL MISMO QUE ABAJO (1-Oct-2026). Gus: «en momentum el resultado a monitorear se pega
   a la gráfica, tanto en mobile como en pc». Medido: el bloque de números quedaba a 16 px de la caja de
   la gráfica (12,8 px en la vista con sesión, por el `.banda.datos`) mientras el resto de la página
   respira 27 px —el número que se mira pegado al gráfico que lo explica.
   La clase `.grafico` la ponen SÓLO los dos gráficos de verdad (`garp.js`): el mismo `.chart-wrap` se
   usa para enmarcar TABLAS en el Home y en Cartera, y ahí el margen de arriba lo decide su vecino.
   El margen va acá y no en cada vista porque el gráfico es el mismo componente en las dos versiones de
   la página (pública y con sesión). Los márgenes verticales de hermanos COLAPSAN en bloque, así que el
   más grande gana: no se suman a los .8-1rem que ya traía el bloque de arriba. */
.chart-wrap.grafico { margin-top: 1.7rem; }
.chart-wrap canvas { width: 100% !important; }
/* Altura del área de dibujo. Chart.js dimensiona el canvas a partir de este contenedor. */
.lienzo { position: relative; height: 200px; }
/* Un gráfico de dispersión necesita más alto que una serie temporal: 200 px dejan los ejes sin aire
   (medido en la maqueta del gráfico de rendimiento, 28-Sep-2026). */
.lienzo.alto { height: 260px; }

.carga { color: var(--texto-dim); font-family: var(--mono); font-size: .85rem; padding: 1rem 0; }

/* Línea de frescura de cada sección: de cuándo son los datos que se ven abajo. */
p.frescura {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--texto-dim);
    font-family: var(--mono);
    font-size: .78rem;
    margin: 0 0 .7rem;
}
/* La frescura puede ir a la DERECHA cuando es un dato secundario del bloque —la convención del
   sitio: lo importante a la izquierda, lo accesorio a la derecha— (Gus, 24-Sep-2026: «Mercado al 24
   de sep, 17 inst., justificado a la derecha de la página, como todo lo secundario»).
   ⚠️ `justify-content` y no `text-align`: `.frescura` es flex (el punto y el texto son dos spans),
   así que el `text-align` no mueve nada. Y se levanta el tope de 62ch, que es una medida de LECTURA:
   acá no hay prosa que leer, hay una fecha que tiene que caer sobre el borde derecho. */
p.frescura.derecha { justify-content: flex-end; max-width: none; }
.error-box {
    border: 1px solid var(--rojo);
    border-radius: var(--radio);
    background: color-mix(in srgb, var(--rojo) 8%, transparent);
    padding: .75rem .9rem;
    color: var(--texto);
    font-size: .85rem;
}
.vacio {
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    padding: 1rem;
    color: var(--texto-dim);
    font-size: .85rem;
}
/* El aviso de cuenta vive adentro de un vacío (F8, 28-Sep-2026): llegar al borde del área con cuenta
   es un ESTADO, no un error, así que no lleva el rojo de `.error-box` (pedido de Gus). El link tiene
   que leerse como link y el rótulo no se pierde en el gris del vacío. */
.vacio strong { color: var(--texto-suave); }
.vacio a { color: var(--acento); text-decoration: none; }
.vacio a:hover { text-decoration: underline; }
/* ── identidad dentro del menú de cuenta ─────────────────────────────── */
#perfil-header { display: flex; flex-direction: column; gap: .15rem; }
#perfil-header .sub { color: var(--texto-dim); font-size: .72rem; }
#perfil-header .dato-usuario { font-family: var(--mono); font-size: .92rem; }
#perfil-header select {
    background: var(--panel-2);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: .35rem .5rem;
    font-family: var(--mono);
    font-size: .78rem;
}

/* ── formulario de alta de posición ──────────────────────────────────── */
.fila-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.fila-form input {
    background: var(--bg-alt);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: .45rem .6rem;
    font: inherit;
    font-size: .85rem;
    min-width: 0;
    flex: 1 1 150px;
}
.fila-form input:focus { outline: none; border-color: var(--acento); }
.fila-form input#alta-moneda { flex: 0 0 74px; }

button.btn-accion, button.btn-baja {
    font: inherit;
    font-size: .82rem;
    line-height: 1;
    padding: .45rem .8rem;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}
button.btn-accion { color: var(--verde); }
button.btn-accion:hover:not(:disabled) { background: color-mix(in srgb, var(--verde) 12%, transparent); }
/* Quitar: discreto por defecto (no compite con el dato), se enciende en rojo al señalarlo */
button.btn-baja {
    color: var(--texto-dim);
    font-size: .85rem;
    padding: .3rem .5rem;
    border: none;
}
button.btn-baja:hover:not(:disabled) { color: var(--rojo); background: color-mix(in srgb, var(--rojo) 12%, transparent); }
button.btn-accion:disabled, button.btn-baja:disabled { opacity: .45; cursor: not-allowed; }

.ok-box {
    border: 1px solid var(--verde);
    border-radius: var(--radio);
    background: color-mix(in srgb, var(--verde) 10%, transparent);
    padding: .6rem .8rem;
    font-size: .85rem;
    margin: .6rem 0;
}

/* calculadora de posición */
.grid-calc {
    display: grid;
    gap: .6rem .9rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: .6rem 0;
}
.campo { display: flex; flex-direction: column; gap: .2rem; }
.campo label { font-size: .75rem; color: var(--texto-dim); font-family: var(--mono); }
.campo input, .campo select {
    font: inherit;
    font-size: .85rem;
    padding: .4rem .5rem;
    border-radius: 8px;
    border: 1px solid var(--borde);
    background: var(--bg);
    color: var(--texto);
}
.resultados { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.resultados .card { background: var(--bg); }
p.aviso-liquida {
    margin: .5rem 0 0;
    padding: .5rem .7rem;
    border: 1px solid var(--rojo);
    border-radius: 8px;
    color: var(--rojo);
    font-size: .82rem;
}
p.aviso-liquida[hidden] { display: none; }

/* ⚠️ Acá vivían `.ref-linea` y `.ref-semaforo`: la leyenda del semáforo de Cartera (los tres
   estados con su punto de color). Se fueron con la leyenda el 23-Sep-2026 — «no tiene sentido tener
   el semáforo, lo sacamos entero de ahí» — y no quedaron como CSS muerto. */
/* El `.ref-link` SÍ sigue en uso (Explorador, Crypto IA y las fichas): es el enlace de referencia
   dentro de una prosa, y por eso trae su propio margen a la izquierda. */
.ref-link { font-size: .78rem; color: var(--acento); text-decoration: none; margin-left: .6rem; }
.ref-link:hover { text-decoration: underline; }

/* notas al pie de la pestaña: aclaraciones y avisos, fuera del camino de los datos */
footer.notas {
    margin-top: 2rem;
    padding-top: .8rem;
    border-top: 1px solid var(--borde);
    color: var(--texto-dim);
    font-size: .78rem;
}
footer.notas h4 {
    margin: .8rem 0 .25rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-dim);
}
footer.notas p { margin: 0 0 .4rem; max-width: 80ch; line-height: 1.5; }

/* herramienta (calculadora): se abre desde un botón, no es una nota */
details.herramienta { margin: 1.4rem 0 .4rem; }
details.herramienta > summary {
    display: inline-block;
    cursor: pointer;
    font-size: .85rem;
    padding: .45rem .85rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--panel);
    color: var(--texto);
    list-style: none;
}
details.herramienta > summary::-webkit-details-marker { display: none; }
details.herramienta > summary::before { content: "+ "; color: var(--texto-dim); }
details.herramienta[open] > summary::before { content: "− "; }
details.herramienta[open] > summary { border-color: var(--acento); color: var(--acento); }

/* Banda: título + control (o dato) en la misma franja. Los elementos se AGRUPAN: no se
   reparten a los extremos, que en pantalla ancha dejan un mar en el medio. */
.banda {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.4rem;
    margin: 1.7rem 0 .5rem;
}
.banda h2 { margin: 0; }
/* Franja de datos: los KPI ocupan el espacio disponible y el control queda a la derecha,
   sin dejar un hueco en el medio. */
.banda.datos { margin: .2rem 0 .8rem; }
.banda.datos .grid-kpi {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    flex: 1 1 420px;
    margin: 0;
}
.banda .revisiones { margin-left: auto; padding-left: 1.2rem; }   /* control de revisión, a la derecha */
.revisiones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-left: auto;              /* las revisiones van al extremo derecho de la línea */
}
.chip {
    font: inherit;
    font-size: .78rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--panel);
    color: var(--texto-dim);
    cursor: pointer;
    white-space: nowrap;
}
.chip:hover { color: var(--texto); }
/* El chip activo lleva el tinte del acento, no un gris: mismo recurso que el control del GARP.
   Con el fondo gris (`--panel-2`) el color quedaba sólo en el texto y el borde, y en el tema claro
   el texto del acento daba 4.13:1 — por debajo del mínimo AA. El tinte refuerza el color y el
   acento del tema claro está oscurecido para que el texto siga pasando con el fondo encima. */
.chip.activo { color: var(--acento); border-color: var(--acento);
               background: color-mix(in srgb, var(--acento) 14%, var(--panel-2)); }

/* Entrada del Explorador: el control del módulo, centrado y con aire alrededor */
.barra-explorador {
    display: flex;
    /* El control del módulo va al centro de la franja: criterio de Gus (18-Sep) — lo más
       importante al centro, después izquierda y por último derecha. */
    justify-content: center;
    align-items: flex-start;
    gap: .6rem 1.6rem;
    margin: 0 0 1.5rem;
}
.barra-explorador .segmentado { margin: 0; flex: 0 0 auto; }
@media (max-width: 640px) {
    .barra-explorador { gap: .5rem; }
    /* ⚠️ El selector lleva las TRES clases (`.banda.datos .grid-kpi`) a propósito, igual que la regla
       de escritorio de arriba. La versión anterior decía `.banda .grid-kpi` —dos clases— y **perdía
       siempre**: la regla base (`.banda.datos .grid-kpi`, tres clases) la pisaba por especificidad,
       porque un `@media` NO aporta especificidad por sí solo. Resultado: en el celular la grilla
       seguía con `minmax(120px, 1fr)` y la tercera tarjeta se salía del viewport (medido a 388 px:
       grid de 384 dentro de una banda de 344, la tarjeta «ALPHA» hasta 398, overflow de 25 px).
       Es el bug que Gus reportó el 23-Sep-2026 con la captura del Progreso.
       Y DOS columnas, no tres: `minmax(0, 1fr)` deja encoger la columna, pero no el texto de
       adentro. Medido en el celular: 344 px de banda − 24 de separaciones = 107 por tarjeta, y el
       valor más largo («+1,98pp», mono a 1.4rem) necesita 124. Con dos columnas hay 166 cada una. */
    .banda.datos .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; }
    .banda { gap: .4rem .8rem; }
    .banda .revisiones { margin-left: 0; padding-left: 0; width: 100%; }
}

/* Segunda selección (Explorador: GARP / MOMENTUM): control segmentado, no pestañas */
.segmentado {
    display: inline-flex;
    gap: .15rem;
    margin: .8rem 0 0;
    padding: .18rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--panel);
}
.segmentado button {
    font: inherit;
    font-size: .82rem;
    padding: .3rem .95rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--texto-dim);
    cursor: pointer;
}
.segmentado button:hover { color: var(--texto); }
/* Seleccionado: azul de acento, el mismo lenguaje que el menú de arriba (`aria-current`)
   y que `.chip.activo`. Antes se distinguía sólo por un gris más claro (--panel-2) y no
   se leía a simple vista. Sin colores literales: el tema claro hereda el tinte. */
.segmentado button[aria-selected="true"],
.segmentado button[aria-pressed="true"] {
    background: color-mix(in srgb, var(--acento) 14%, var(--panel));
    color: var(--acento);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 45%, transparent);
}
.segmentado.chico button { font-size: .76rem; padding: .22rem .7rem; }

/* Tesis de inclusión dentro de una señal del momentum: llega del histórico y se separa de
   las métricas con una línea. Es el contenido que antes sólo viajaba en el mensaje. */
.tesis { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--borde); }
.tesis h4 { margin: 0 0 .35rem; }
.tesis p { margin: 0 0 .25rem; }
.tesis p:last-child { margin-bottom: 0; }

/* ── filtros por grupo (Explorador) ──────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem .4rem; margin: .4rem 0 1.1rem; }
/* El aire entre filas (25-Sep-2026): con `gap: .4rem` parejo, las dos barras de pastillas se
   leían como una sola maraña. La fila respira más que la columna, que es lo que las separa. */
button.filtro {
    font: inherit;
    font-size: .8rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--panel);
    color: var(--texto-dim);
    cursor: pointer;
}
button.filtro:hover { color: var(--texto); }
button.filtro.activo { color: var(--texto); border-color: currentColor; background: var(--panel-2); }
button.filtro.verde.activo { color: var(--verde); }
button.filtro.ambar.activo { color: var(--ambar-tinta); border-color: var(--ambar);
                             background: color-mix(in srgb, var(--ambar) 26%, transparent); }
button.filtro.rojo.activo { color: var(--rojo); }

/* texto de la guía (Cuenta) */
.fila .v.guia { font-family: inherit; font-size: .82rem; color: var(--texto-dim); text-align: left; }
/* fila de formulario: pegado a la izquierda, sin estirarse a todo el ancho */
.fila.corta { justify-content: flex-start; gap: .6rem; }

/* ── El pie: grilla de columnas y cierre ───────────────────────────────────────
   Tres decisiones del 22-Sep-2026:
   · GRILLA en vez de texto corrido: a todo el ancho de la ventana, cuatro frases de descargo son
     una columna de lectura que nadie lee. `auto-fit` con mínimo 190 px da 4 columnas en escritorio,
     2 en pantalla media y 1 en el teléfono, sin media query propia.
   · SIN monoespaciada en el cuerpo: el pie venía en mono y el descargo en mono se lee peor que en
     la sans del resto del sitio. La mono queda para el RÓTULO, que es donde el sitio ya la usa
     (`.card.kpi .k`).
   · `max-width` en el texto: es el guarda de «nunca columnas anchas». Cuando el `auto-fit` deja
     dos columnas de 600 px, sin esto cada línea pasa de 90 caracteres. */
footer.app-footer {
    border-top: 1px solid var(--borde);
    color: var(--texto-dim);
    padding: 1.3rem 0 1.6rem;
}
.pie-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
              gap: 1.1rem 1.8rem; }
.pie-grilla .col .k { font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
                      letter-spacing: .06em; color: var(--texto-dim); }
.pie-grilla .col p { margin: .3rem 0 0; font-size: .74rem; line-height: 1.5;
                     color: var(--texto-suave); max-width: 44ch; }

/* El CIERRE: lo que hace que el final de la página se vea como un final y no como un párrafo que se
   corta. Es SÓLO la línea: Gus sacó el texto el 24-Sep-2026 («el silicaa del footer tiene que salir,
   dejar la línea y un espacio mínimo») — el «Silicaa» centrado que había acá repetía la marca por
   cuarta vez sin agregar nada.
   ⚠️ Sin `text-align`, `font` ni `color`: ya no hay texto que alinear. El aire de ABAJO queda a
   cargo del `padding` del `footer` (1.6rem), que es el «espacio mínimo» que pidió. */
.pie-fin { margin-top: 1.5rem; border-top: 1px solid var(--borde); }

/* ── Medida de lectura ─────────────────────────────────────────────────────────
   Regla del sitio (Gus, 22-Sep-2026): «nunca usar columnas tan anchas». Ninguna columna de texto
   corrido pasa de ~72 caracteres — arriba de eso el ojo pierde el renglón al volver.
   ⚠️ 29-Sep-2026, segunda vuelta: la unidad `ch` miente en el tamaño de las notas. Medido sobre el
   texto real de Momentum, «62ch» (540 px a .85rem) daba **84 caracteres por línea**, no 72: `ch` es
   el ancho del CERO, más ancho que la letra promedio. Es decir que el tope no estaba frenando el
   ancho de la columna sino el del texto, y quedaba un hueco visible de 52 px contra el borde de la
   columna (Gus: «las columnas de la derecha… podría agarrar un poco más de ancho»).
   Decisión de Gus (opción C, medida antes de aplicar): la medida pasa a **593 px** y el cuerpo de la
   nota sube de .85rem a **.92rem**. Los 593 px no son capricho: son los que a .92rem dan los MISMOS
   84 caracteres por línea que hoy (84 × el ancho medio de la letra a ese cuerpo). Subir sólo el ancho
   y dejar el cuerpo en .85rem llevaba la línea a 91 caracteres (medido).
   ⚠️ No se pone el ancho de la celda (616 px al contenido máximo): ahí la línea se va a 92 — el
   cuerpo tendría que subir a .97rem para compensar, y eso deja las notas del tamaño del `p.lead` y
   aplana la jerarquía. Con 593 px quedan 7-30 px de aire contra el borde de la columna según la
   ventana: imperceptible, y la lectura no cambia.
   Los bloques que ya tienen su propia medida —`.explicacion .texto` (34rem) y las columnas del
   pie (44ch)— la conservan: son más específicos y sus topes son más chicos que este.
   `.noticias` (la prosa del brief) queda como estaba: usa `column-width` para partirse sola. */
.nota, .resumen, .por-que, .cuerpo p, footer.notas p, .frescura { max-width: 593px; }

/* ── Morning Brief: noticias y volcados ──────────────────────────────── */
/* 62ch y no 90ch: misma regla de medida que el resto del sitio (22-Sep-2026). */
.noticias { font-size: .87rem; line-height: 1.55; max-width: 62ch; color: var(--texto-suave); }
.noticias p { margin: .45rem 0; }
.noticias strong { color: var(--texto); font-weight: 600; }   /* el titular sí, el cuerpo no */
/* El enlace a la nota (la fuente entre paréntesis) desde el 8-Oct-2026. Va con `--acento`, que es
   el color de TODOS los enlaces del sitio (`a { color: var(--acento) }`), y con el mismo trato que
   `.vacio a` y `.ref-link`: sin subrayado en reposo, subrayado al pasar. El ámbar es color de
   ESTADO (pastillas, KPI, filtros), no de enlace, y además el token cambia entre tema claro y
   oscuro mientras que un hexadecimal fijo no. */
.noticias a { color: var(--acento); text-decoration: none; }
.noticias a:hover { text-decoration: underline; }
/* `column-width` en vez de `column-count: 2`: el navegador mete tantas columnas de ~40ch como
   entren, así la medida se sostiene sola en cualquier ancho. Con un conteo fijo, en una pantalla
   ancha cada columna pasaba de 90 caracteres — justo lo que la regla de medida evita. */
@media (min-width: 900px) {
    .noticias { column-width: 40ch; column-gap: 2.2rem; max-width: none; }
    /* El texto corre de una columna a la siguiente, como en un diario: cada noticia es un párrafo
       y PUEDE partirse en el salto. ⚠️ Acá decía `break-inside: avoid`, que obliga a cada noticia a
       quedar entera y deja huecos enormes al pie de las columnas —medido a 1280 px el 25-Sep-2026:
       151 px libres en la primera columna y 201 en la tercera, con la tarjeta de 374 px de alto—.
       Gus: *«este texto está raro así, se puede leer continuo, termina una noticia y empieza la
       siguiente, como en un diario. No se necesita que cada noticia quede entera, puede haber saltos
       a la siguiente columna»*. `orphans`/`widows` en 2 evitan que del salto quede un renglón solo. */
    .noticias p { break-inside: auto; orphans: 2; widows: 2; }
}
.noticias:empty::before { content: "sin noticias"; color: var(--texto-dim); }
/* tablas de valores cortos: no se estiran a todo el ancho */
.angosta { max-width: 760px; }

pre.volcado {
    white-space: pre-wrap;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--texto-dim);
    max-height: 260px;
    overflow: auto;
    margin: .3rem 0 0;
}
h4.titulo-grupo .pill.violeta { border-color: var(--violeta); }

/* ── rúbrica desplegable (GARP) ──────────────────────────────────────── */
details { margin-top: .6rem; border-top: 1px solid var(--borde); padding-top: .5rem; }
details summary {
    cursor: pointer;
    color: var(--acento);
    font-size: .8rem;
    font-family: var(--mono);
    list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; }
details[open] summary::before { content: "▾ "; }
details[open] summary { margin-bottom: .5rem; }
details h4 { margin: .7rem 0 .3rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-dim); }
details ul { margin: .2rem 0 .2rem 1.1rem; padding: 0; font-size: .82rem; color: var(--texto-dim); }
details p { font-size: .82rem; }
details p.resumen { color: var(--texto-suave); }   /* párrafo largo: mismo criterio que las noticias */
/* Al abrir la rúbrica la tarjeta ocupa toda la fila: la evidencia necesita ancho */
.grid:has(details[open]) { align-items: start; }
.card:has(details[open]) { grid-column: 1 / -1; }
table.rubrica { font-size: .78rem; margin-top: .3rem; }
table.rubrica td.evidencia { color: var(--texto-dim); line-height: 1.4; }
table.rubrica th:nth-child(2), table.rubrica td:nth-child(2) { width: 72px; }
.titulo-grupo { margin: 1.1rem 0 .5rem; }
.titulo-grupo.verde .pill { border-color: var(--verde); }
.titulo-grupo.ambar .pill { border-color: var(--ambar); }
.titulo-grupo.rojo .pill { border-color: var(--rojo); }

/* El `footer.app-footer` viejo estaba ACÁ, después de las reglas del pie nuevo, y por orden las
   pisaba: dejaba el texto del descargo en monoespaciada y con otro padding. Se consolidó arriba,
   junto a `.pie-grilla` y `.pie-fin` (22-Sep-2026). No volver a declararlo suelto acá. */

a { color: var(--acento); }

/* Listas compactas: un renglón por elemento. En pantalla ancha se reparten en columnas
   (nunca una sola columna de lado a lado, que deja los datos a un extremo y otro); en
   pantalla angosta queda una sola columna. */
.lista {
    display: grid;
    /* auto-fill (no auto-fit): los elementos conservan su ancho aunque la fila quede incompleta */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .45rem;
    align-items: start;
}
.lista > .item {
    padding: .45rem .65rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--panel);
    min-width: 0;
}
.item .linea1 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.item .linea1 .pri { font-weight: 600; }
.item .linea2 {
    display: flex;
    /* `wrap`: el nombre de la empresa y la etiqueta de fase no entran juntos en una tarjeta
       (medido: 180-248 px + 229 px contra ~335 disponibles). Con `nowrap` uno de los dos
       aplastaba al otro —el nombre llegaba a quedar en 6 px de ancho—; así la fase baja a la
       línea siguiente y el nombre se lee completo. */
    flex-wrap: wrap;
    gap: .15rem .7rem;
    align-items: baseline;
    margin-top: .15rem;
    font-size: .78rem;
    color: var(--texto-dim);
    min-width: 0;
}
/* una sola línea por elemento: el contexto se recorta antes que envolver (alturas parejas) */
.item .linea2 span { white-space: nowrap; }   /* los valores no se parten: la línea mide igual */
/* El contexto toma la línea entera y la fase queda siempre en la de abajo. Es a propósito:
   nombre y fase no entran juntos en una tarjeta (medido: 180-248 px + 229-316 px contra
   246-301 disponibles), y dejar que envuelvan «sólo si hace falta» daba tarjetas de 76 px al
   lado de otras de 98 —Gus lo reportó el 18-Sep-2026—. Con la fase siempre abajo, todas las
   tarjetas de una lista miden lo mismo y el nombre se lee completo. */
.item .linea2 .contexto { flex: 1 1 100%; }
.item .contexto { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.item .linea1 .pri { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La fase no se encoge nunca (el contexto se recorta antes: la altura queda pareja), pero se
   le pone tope al ancho de la tarjeta para que una etiqueta larga —«Fase 1 (ajustado):
   Expansión de Consenso»— no se derrame sobre la tarjeta de al lado. */
.item .linea2 .fin { margin-left: 0; font-family: var(--mono); flex: 0 0 auto; min-width: 0;
                     max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.item summary .linea1 { flex: 1 1 auto; }
/* al abrirse, el elemento ocupa la fila completa: el detalle necesita ancho */
details.item[open] { grid-column: 1 / -1; }
.item .pri { font-weight: 600; }
.item .fin { font-family: var(--mono); font-size: .82rem; }
.item .fin.verde { color: var(--verde); }
.item .fin.rojo { color: var(--rojo); }
.item .fin.ambar { color: var(--ambar-tinta); }
.item .fin + .fin, .item .fin + .pill { margin-left: .55rem; }
/* La pastilla de estado, cuando va en la línea del TÍTULO, se pega al número: el título queda a la
   izquierda y «estado + número» juntos contra el borde derecho. Sin esto, el `space-between` de
   `.linea1` repartía los tres elementos y la pastilla quedaba flotando en el medio de la fila
   (los termómetros, 25-Sep-2026). Donde la pastilla es el último elemento —las señales del GARP—
   no cambia nada: ya estaba contra el borde. */
.item .linea1 .pill { margin-left: auto; }
/* Los termómetros son filas del mismo componente que las listas de instrumentos (`.item`), con su
   propio ancho de pista: cada uno lleva título, estado, número y una línea de lectura, y en 300 px
   —la medida de las listas de mercado— la fila del AAII no entra (medido: 308 px de contenido
   contra 275 disponibles, y el que se recortaría es el título). DOS columnas desde 900 px (a 1280
   miden 609 px y entran las cuatro en dos filas) y una sola abajo, donde la fila queda larga y
   cómoda. Los anchos del medio (900-1100) tampoco van a una sola columna: ahí el título y el
   número quedarían a 800 px de distancia, que es el defecto que ya se arregló en `.item .fila`. */
.lista.termometros { grid-template-columns: 1fr; align-items: stretch; }
/* ⚠️ El `@media` va DESPUÉS de la regla base, no antes: las dos tienen la misma especificidad
   (dos clases) y el `@media` no aporta ninguna, así que la que está más abajo en el archivo es la
   que gana. Puesto arriba —donde vivía el otro `@media (min-width: 900px)`— la regla de dos
   columnas quedaba muerta y los cuatro termómetros salían uno por fila a 1280 (medido). */
@media (min-width: 900px) {
    .lista.termometros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Rótulo chico y en mayúsculas del bloque numerado del Home (`.card.capa`): es lo que queda de la
   familia de «tarjeta de dato suelto» que usaban los termómetros hasta el 25-Sep-2026. El valor
   (`.card > .v`) y el rótulo con píldora (`.card > .k.con-badge`) se fueron con ellos —los
   termómetros ahora son filas de `.lista`/`.item`— y no quedó ningún otro consumidor: las tarjetas
   de la calculadora y de la cartera tienen `.fila` adentro, y los `.kpi` su propia regla. */
.card > .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-dim); }
.datos-linea { margin: .5rem 0; }
.datos-linea .fila { font-size: .82rem; }
/* ⚠️ Las filas de `.datos-linea` quedaban SIN regla de layout: `.k` (rótulo) y `.v` (valor) son dos
   spans inline, así que salían PEGADOS — «Contrato0x6BEF15D938d4E72056AC92Ea4bDD0D76B1C4ad29».
   Reportado por Gus el 22-Sep-2026: «los textos se quedan pegados en varias partes». El resto de
   las fichas del sitio sí tiene la suya (`.card .fila`, `.item .cuerpo .fila`, `.ficha .captura`);
   a esta se le había pasado — y como `.datos-linea` se usa en la ficha de crypto Y en una de GARP,
   el arreglo va acá y no en un módulo.
   GRID y no flex: con `flex-wrap`, la decisión de saltar de línea usa el ancho MÁXIMO del valor,
   así que una dirección de contrato de 42 caracteres se iba siempre a la línea siguiente y dejaba
   el rótulo solo (medido: 41 de 187 filas, y 67 con `flex`). Con dos columnas fijas el rótulo
   nunca se despega y el valor se parte DENTRO de su celda. Los rótulos arrancan todos en la misma
   columna: 6.6rem supera al más ancho real (88 px, «Volumen del día»), así que ninguno se recorta. */
.datos-linea .fila { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr);
                     gap: .15rem .6rem; align-items: baseline; }
.datos-linea .fila .k { color: var(--texto-dim); }
/* Una dirección de contrato son 42 caracteres sin un solo espacio: sin esto se sale de la ficha.
   `minmax(0, 1fr)` en la columna + `min-width: 0` acá es lo que deja que el texto se parta —
   sin el `0`, el mínimo automático del grid es el contenido y vuelve a desbordar.
   `anywhere` y no `break-word`: hace falta el corte real entre caracteres. */
.datos-linea .fila .v { font-family: var(--mono); min-width: 0; overflow-wrap: anywhere; }
/* `.ref-link` trae `margin-left: .6rem` para separarse de un texto que lo precede, y `.78rem` de
   cuerpo. Acá la separación ya la da la columna del grid y el cuerpo lo fija la fila: sin esto,
   los valores con enlace (SDK, Sitio) quedaban 9,6 px a la derecha y un punto más chicos que el
   resto de la lista (medido el 22-Sep-2026). Uniformar la lista es el punto. */
.datos-linea .fila .v.ref-link { margin-left: 0; font-size: inherit; }

/* Elemento desplegable: el summary ES la línea compacta; el detalle aparece al abrirlo. */
details.item { padding: 0; }
details.item > summary {
    display: block;
    position: relative;
    padding: .45rem .65rem .45rem 1.35rem;
    cursor: pointer;
    list-style: none;
    color: var(--texto);
}
details.item > summary::-webkit-details-marker { display: none; }
details.item > summary::before {
    content: "▸";
    position: absolute;
    left: .5rem;
    top: .5rem;
    color: var(--texto-dim);
    font-size: .7rem;
}
details.item[open] > summary::before { content: "▾"; }
details.item[open] > summary { background: var(--panel-2); }
details.item > .cuerpo { padding: .2rem .8rem .8rem 1.6rem; }

/* ── La TESIS de la ficha, a la COLUMNA DERECHA (10-Oct-2026, prueba de Gus) ────────────────────
   Pedido: «el texto que está en la izquierda, debajo de GOOGL, en la columna derecha, como está el
   gris arriba… probemos primero en blanco». El resumen ejecutivo sale del cuerpo y pasa a ser
   HERMANO del `summary` (en `filaAuditada`), y la ficha abierta se vuelve la misma grilla de cuatro
   columnas que la cabecera de sección: el encabezado —ticker, nombre, precio, PEG— en las columnas
   1-2 y la tesis en las 3-4, a la altura del ticker. El tono es el de TEXTO (blanco) y no el suave,
   que es el que usa la bajada gris de la cabecera. El resto del cuerpo —gráfico, rúbrica, riesgos,
   datos— sigue a todo el ancho, abajo.
   ⚠️ El `:has(> p.resumen)` es lo que acota la regla a ESTAS fichas: `details.item` también lo usan
   la calculadora y las fichas de crypto (`details.item suelto`), y con el grid suelto su encabezado
   quedaría a media tarjeta. Una ficha sin resumen tampoco lo toma: se queda como estaba.
   ⚠️ `::details-content { display: contents }` es lo que hace que el resumen y el cuerpo sean ítems
   de la grilla. Desde Chrome 131 el navegador envuelve el contenido del `<details>` en una caja
   anónima (el pseudo-elemento `::details-content`), y sin esta línea TODO el contenido cae dentro de
   un solo ítem del tamaño de una columna: medido en la maqueta, 295 px de ancho en vez de 605. Donde
   el pseudo-elemento no existe la línea no hace nada y el grid funciona igual.
   Abajo de 900 px se apila en el orden del DOM (encabezado y después la tesis, los dos a todo el
   ancho), que es como se lee en el teléfono. */
details.item > p.resumen { margin: .45rem 0 .2rem; color: var(--texto); }
@media (min-width: 900px) {
    details.item[open]:has(> p.resumen) {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: .45rem;
        align-items: start;
    }
    details.item[open]:has(> p.resumen)::details-content { display: contents; }
    details.item[open]:has(> p.resumen) > summary { grid-column: 1 / span 2; grid-row: 1; }
    details.item[open]:has(> p.resumen) > p.resumen { grid-column: 3 / span 2; grid-row: 1; }
    details.item[open]:has(> p.resumen) > .cuerpo { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Explorador · CRYPTO IA ────────────────────────────────────────────────
   La ficha del proyecto tiene tres datos cortos en la línea 2 (red · SDK · market cap):
   la red no necesita la línea entera como el nombre de una empresa, así que acá el
   contexto vuelve a compartir renglón. El caso de uso se lee siempre —es el contenido
   de la vista— y lo que se despliega es la ficha técnica (contrato, SDK, fuente). */
.ficha .linea2 .contexto { flex: 0 1 auto; }
.ficha .resumen { margin: .4rem 0 0; font-size: .84rem; color: var(--texto-suave); }
/* El motivo del veredicto: lo que hace accionable un «Monitorear» (dice qué falta).
   Va pegado al veredicto y fuera del desplegable: si hay que abrir para saberlo, no sirve. */
.ficha .por-que { margin: .45rem 0 0; padding-left: .5rem; font-size: .8rem;
                  color: var(--texto-dim); border-left: 2px solid var(--borde); }
/* Tokenómica: los cuatro datos de dilución/concentración en una franja propia y VISIBLE
   (no dentro del desplegable: la dilución pendiente se decide de un vistazo o no se ve).
   El badge de color va dentro de la franja y lo calcula la API. Envuelve en pantalla
   angosta: son cinco celdas cortas, no una tabla. */
.ficha .tokenomics { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .95rem;
                     margin: .5rem 0 0; padding: .42rem .6rem; font-size: .78rem;
                     background: var(--panel-2); border: 1px solid var(--borde);
                     border-radius: var(--radio); }
.ficha .tokenomics .tk { display: inline-flex; align-items: baseline; gap: .3rem; }
.ficha .tokenomics .tk .k { color: var(--texto-dim); }
.ficha .tokenomics .tk .v { font-family: var(--mono); }
.ficha .tokenomics .pill { font-size: .7rem; }
/* Captura de valor (22-Sep-2026): el mecanismo por el que el token captura el valor del
   agente y cuán atado está a su uso real, en franja propia y VISIBLE —es la pregunta que
   decide si el token acompaña al producto o vive al lado—. Va entre el motivo y la
   tokenómica. La franja la arma el módulo: sin nada curado no se dibuja, así no queda un
   renglón de guiones ocupando lugar. */
.ficha .captura { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .95rem;
                  margin: .5rem 0 0; padding: .42rem .6rem; font-size: .78rem;
                  background: var(--panel-2); border: 1px solid var(--borde);
                  border-radius: var(--radio); }
.ficha .captura .k { color: var(--texto-dim); }
.ficha .captura .v { font-family: var(--mono); }
.ficha .captura .pill { font-size: .7rem; }
/* La advertencia de desacople se muestra compacta («⚠ Desacople») y el texto largo vive en el
   tooltip, así que ya no necesita regla propia. Antes iba entera en su propio renglón con
   `flex-basis: 100%` y el `nowrap` de `.pill` la hacía desbordar el borde de la tarjeta: las
   dos reglas se sacaron el 22-Sep-2026 al acortar el texto. */
/* Las fichas de crypto tienen cuatro bloques (resumen, motivo, tokenómica, ficha técnica) y el
   texto de cada una mide distinto: con `align-items: start` (el default de `.lista`) la tarjeta
   corta termina más arriba y su franja de tokenómica queda desfasada respecto de las vecinas —
   reportado por Gus el 21-Sep-2026. Acá la tarjeta se estira a lo alto de la fila y la franja se
   ancla al pie, así el semáforo y el desplegable quedan a la misma altura en todas. */
.vista-crypto .lista { align-items: stretch; }
/* ── Acá vivía `.intro-vista` (24-Sep-2026) ─────────────────────────────────────────────────────
   Era la bajada de cada vista del Explorador, con su propio nivel de cuerpo (.95rem) y colgada de
   las columnas 2-3, centrada respecto de la página. Todo eso se fue: la explicación general es hoy
   el `p.lead` de la CABECERA de la página (`cabeceraPagina(titulo, texto)`), pegada al título y
   arrancando en el mismo riel izquierdo. Con el menú a la izquierda, un bloque centrado flotando
   en el medio era justo lo que Gus marcó como fuera de lugar. */
.vista-crypto .ficha { display: flex; flex-direction: column; }
.vista-crypto .ficha .tokenomics { margin-top: auto; }
.ficha > details { margin-top: .45rem; }
.ficha > details > summary { font-size: .78rem; color: var(--texto-dim); cursor: pointer; }
/* Desplegable suelto (fuera de `.lista`): sin esto queda sin marco ni fondo. */
details.item.suelto { border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); }
/* Los cuatro ejes y el nivel no entran en una franja angosta: las barras envuelven. */
.vista-crypto .banda { flex-wrap: wrap; row-gap: .5rem; }

/* ── HOME · presentación del sistema ───────────────────────────────────────
   Tres KPI en vivo y la matriz de las cuatro capas. Ambos usan `auto-fit` con un mínimo
   de 240/260 px: en pantalla angosta caen a una columna sin media query propia, y en
   escritorio entran tres y cuatro sin estirarse de lado a lado. */
/* La portada no muestra NADA de la interfaz: ni menú, ni el estado de la API, ni el botón de
   cuenta, ni el pie del sitio. El header queda con la marca sola. Es la segunda pasada del mismo
   pedido —«lo dejaría más desnudo todavía»— con lo que Gus tachó sobre la captura del
   22-Sep-2026. Todo está scopeado a `body.portada`: adentro del sistema siguen existiendo. */
/* La portada no muestra la interfaz del sistema: ni menú, ni el botón de cuenta, ni el pie. Y desde
   el 27-Sep-2026 tampoco el botón de TEMA, pero SÍ el de IDIOMA (Gus: «debería ser solamente el de
   idioma, no los otros dos, esos los dejaría ya dentro del home»): la portada se lee en el idioma
   deseado ANTES de entrar, y el tema y la cuenta son cosas de adentro.
   ⚠️ Antes esta regla escondía `.acciones` ENTERO, y en el teléfono no funcionaba: la grilla de la
   barra mobile declara `header.app-header .barra > .acciones { display: contents }` —más específico y
   más abajo en la hoja—, así que en la portada del teléfono se veían los TRES botones mientras en la
   del escritorio no se veía ninguno. Gus lo reportó el 27-Sep-2026 («en pantalla no veo el switch»)
   mirando el escritorio, donde el idioma nunca apareció. Ahora la regla nombra a los hijos: gana en
   los dos anchos y hay un solo criterio. La cuenta y el tema viven adentro, donde no cambian. */
body.portada nav.menu,
body.portada .acciones-cuenta,
body.portada #btn-tema,
body.portada footer.app-footer { display: none; }
/* La marca del encabezado SALE de la portada (Gus, 24-Sep-2026: «saqué la doble marca, a ver qué te
   parece»): «Silicaa» ya está en grande en el bloque, y verlo dos veces en la misma pantalla era una
   repetición. Va con `visibility: hidden` y NO con `display: none`, por dos razones: mantiene el
   alto del encabezado —en la maqueta el tagline queda en la mitad de abajo, con el aire de siempre—
   y lo saca del árbol accesible, así el único `h1` de la portada es el de la marca grande. */
/* ⚠️ SÓLO EL NOMBRE, no la bajada (corregido el 24-Sep-2026, dos veces en el mismo día):
   · con la marca entera oculta, Gus reportó «el header no tiene la bajada de texto» — y tiene razón:
     la bajada es el tagline del producto, no repite nada, y en la portada el encabezado quedaba
     completamente vacío;
   · con la marca entera visible, el NOMBRE aparece dos veces en la misma pantalla —«se está
     repitiendo Silicaa en la portada, en el grande y arriba en el header»—.
   La que sobra es el nombre, porque está en grande tres centímetros más abajo. La bajada se queda.
   Va con `visibility: hidden` y NO con `display: none`, por dos razones: mantiene el
   alto del encabezado —en la maqueta el tagline queda en la mitad de abajo, con el aire de
   siempre— y lo saca del árbol accesible, así el único `h1` de la portada es el de la marca grande. */
body.portada header.app-header .marca h1 { visibility: hidden; }
/* Sin scroll propio: medido el 24-Sep-2026, a 577 px de alto la portada sobraba 78 px de
   `scrollHeight` — una rueda que se movía y no llevaba a ningún lado, que es exactamente el gesto
   que ahora entra.
   ⚠️ YA NO HACE FALTA BLOQUEARLO (24-Sep-2026, tarde): con el cuerpo en `flex: 1` y el pie clavado
   al fondo, la portada mide EXACTAMENTE la ventana menos el encabezado, así que el scroll fantasma
   no existe y el gesto de entrar no compite con nada. Y bloquearlo ahora sería un problema: si en
   una ventana muy baja el bloque no entra, el pie quedaría recortado y sin forma de alcanzarlo. */
body.portada { overflow: visible; }
/* La clase en el `html` la sigue poniendo `marcarPortada()` —es la que scopea las reglas de la
   portada que dependen del elemento raíz— pero ya no oculta el desborde. */

/* ── La marca en la portada: YA NO HAY NADA ESPECIAL ─────────────────────────────────────────
   Acá vivían dos reglas (`body.portada header.app-header .marca` con `grid-column: 1 / -1` y el
   `marca-txt` centrado) que centraban la marca SÓLO en la portada, porque adentro la barra la
   quería a la izquierda con el menú al lado. Gus rompió esa dicotomía el 24-Sep-2026: «si el menú
   general pasa a la izquierda y mantenemos el logo en el centro, tocamos menos entre portada y el
   resto». Centrada SIEMPRE, la entrada al sistema no mueve la marca ni un píxel: se ve desaparecer
   el hueco vacío y aparecer el menú. El centrado vive ahora en la regla base de la barra, arriba.
   ⚠️ El `justify-content: center` que estaba acá —y el bug del celular que documentaba— se mudó a
   esa regla base en vez de perderse: abajo de 640 px la `.barra` es flex con la marca en su propia
   fila, y ahí `grid-area`/`justify-self` no hacen nada. Ver «EL ORDEN DE LA BARRA». */

/* El bloque de EXPLICACIÓN — qué es el sistema. Vive SOLO en la portada: adentro no se repite, ya
   se leyó al entrar (Gus, 22-Sep-2026). Va centrado y a tamaño de LECTURA (1.02rem), no de
   interfaz: es lo que lo vuelve una bienvenida en vez de una sección más. */
/* 48.5rem (776 px) de tope para el BLOQUE, no para el texto: en la maqueta la cadena llega a
   771 px y con el tope anterior (44rem = 704 px) la recortaba justo a 704 — el ancho de la cadena
   estaba limitado por el contenedor, no por sus pasos. El texto se acota aparte, con el suyo. */
/* ── La portada en DOS COLUMNAS (maqueta de Gus, 24-Sep-2026) ────────────────────────────────
   El texto a la izquierda y las cuatro capas a la derecha como un PAQUETE 2×2.
   ⚠️ Se ata a la MISMA grilla de cuatro columnas que el interior —criterio de Gus: «tomá en cuenta
   las medidas que ya tenemos de las otras páginas, por ejemplo las columnas que veníamos usando»—:
   `repeat(4, minmax(0, 1fr))` con el `gap` de .45rem de las filas de tarjetas. Así el texto ocupa
   las columnas 1-2 y el paquete las 3-4, y el borde izquierdo del paquete cae EXACTAMENTE sobre la
   línea de la tercera tarjeta del interior (x=644 a 1280 de ancho). Sin anchos propios: el bloque
   llena el contenedor (1240), igual que el resto del sitio.
   El aire de abajo es el que separa el paquete del botón: Gus (24-Sep-2026) lo vio «muy cerca del
   resto» con los 1.6rem que tenía. Va en `clamp` en `vh` como el resto del aire de la portada, para
   que crezca en pantallas altas sin despegarse en las bajas. */
.explicacion { margin: 0; width: 100%; display: grid; text-align: left;
               grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: .45rem;
               /* ALINEADAS AL PIE (maqueta de Gus, 24-Sep-2026): «alinea las tarjetas a la parte baja
                  del texto». Era `center`, que las dejaba flotando 28 px más arriba que la última
                  línea del párrafo (medido: párrafo hasta 439, tarjetas hasta 411). Al pie, el borde
                  inferior del paquete coincide con el del texto — en la maqueta la diferencia es de
                  4 px, que es el aire propio de la última línea. */
               align-items: end; }
/* La columna de texto cede el medianil por su derecha: es lo que impide que el párrafo se golpee con
   la primera tarjeta del paquete (misma regla que la cabecera de sección). */
.explicacion-texto { grid-column: 1 / span 2; padding-right: var(--medianil); }
/* La marca en escala grande: la primera prueba de la línea «escalas mayores» que pidió Gus.
   Es un `h1` con un enlace adentro desde el 24-Sep-2026, cuando «Silicaa» salió del encabezado en
   la portada: el encabezado lo conserva para adentro, y acá el `h1` es el de la página (uno solo por
   estado). El enlace lleva al sistema, igual que el botón del pie.
   Lo único que cambia en :hover es la opacidad — con 232 px de ancho, un cambio de color a todo el
   bloque sería un flash. */
.marca-portada { margin: 0 0 1.4rem; font-size: 5rem; font-weight: 700;
                 line-height: .9; letter-spacing: -.035em; color: var(--texto); }
/* 1.4rem de margen: la maqueta del 24-Sep-2026 pide que la marca quede «más libre del texto» —
   medido en la maqueta, 32 px entre la tinta del «Silicaa» y la del título azul, contra los 9 px
   que daba el `.55rem` anterior. Con 1.4rem la separación de tinta queda en ~35 px (medido: 18,4 de
   cajas + el aire propio de las dos cajas). */
.marca-portada a { color: inherit; text-decoration: none; cursor: pointer;
                   transition: opacity .18s ease; }
.marca-portada a:hover { opacity: .82; }
.marca-portada a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
/* ⚠️ 48.5rem (776 px) era el tope con Lato, y con Space Grotesk NO alcanza: la fila de
   las cuatro tarjetas de la cadena mide 771 px con Lato y 784 con Space Grotesk (la
   tercera pasa de 168 a 181), así que la cuarta se caía a una segunda fila —la cadena
   pasaba de 89 a 189 px de alto— y su flecha «→» quedaba apuntando al vacío. 50rem
   (800 px) le devuelve la fila única. Medido el 24-Sep-2026, a 1280 y a 390. */
.explicacion h2 { font-size: 1.45rem; font-weight: 600; margin: 0 0 .9rem; letter-spacing: 0;
                  text-transform: none; color: var(--acento);
                  /* Sin «mercado» solita al final (Gus, 24-Sep-2026: «en el título “mercado” está
                     solita, debería bajar “el”»). En el teléfono el título no entra en una línea y
                     partía como «Cuatro capas para mirar / mercado»; `balance` reparte las dos
                     líneas parejas: «Cuatro capas para mirar / el mercado». En escritorio entra en
                     una sola línea y no cambia nada. */
                  text-wrap: balance; }
/* El AZUL que Gus quiere acá (23-Sep-2026): «el que puede ser azul es el destacado del texto del
   home: Cuatro capas para mirar el mercado». Es el único texto del sitio con color de acento en vez
   del color de texto, y le corresponde: es el título que dice de qué se trata el sistema, no una
   etiqueta de interfaz. Contraste verificado: #73a5de sobre el fondo oscuro 7.36:1, #0b5ed7 sobre
   el claro 4.89:1 — y a 1.45rem (23 px) es texto grande, donde el umbral es 3:1. */
/* 34rem y no 38rem: en la maqueta del 22-Sep-2026 (medida pixel por pixel) la línea más larga
   mide 535 px, y con 38rem el texto quedaba en 608 px — la columna de texto salía más ancha que
   la cadena de abajo y el bloque perdía la proporción. */
/* En la columna izquierda el texto se alinea a la izquierda y ocupa lo que da la columna (496 px a
   1280): mantiene el tope de lectura propio y ya no se centra solo. */
.explicacion .texto { max-width: 34rem; margin: 0; font-size: 1.02rem; line-height: 1.7;
                      color: var(--texto-suave);
                      /* Sin palabras sueltas al final (Gus, 24-Sep-2026: «cuidá que no queden
                         palabras sueltas, tipo viudas, por mercado o auditar… que las dos últimas no
                         se despeguen»). `pretty` es la condición en CSS: el navegador reparte las
                         últimas líneas para que ninguna quede con una sola palabra. No toca el resto
                         del párrafo. */
                      text-wrap: pretty; }

/* En la PORTADA, el mismo bloque con el aire de una página de entrada y el botón después.
   El aire de arriba es `clamp` en `vh` para que respire igual en pantalla baja sin despegarse de
   más en una muy alta; el 11.5vh sale de la maqueta (99 px medidos entre la línea del header y el
   título, menos los 20 px de padding del `main`). El de ABAJO es proposital, no un sobrante: ahí
   van a ir métricas, partners o lo que venga («con el tiempo ahí podrá haber mejores métricas,
   partners, lo que sea»).
   ⚠️ `text-align: center` va ACÁ y no en `.explicacion`: el botón es hermano de `.explicacion`,
   no hijo suyo, así que sin esta línea queda pegado al borde izquierdo (bug visto en la captura
   del 22-Sep-2026, después de partir el bloque en dos). */
/* ── LA PORTADA: cuerpo centrado y PIE (maqueta de Gus, 24-Sep-2026) ──────────────────────────
   La maqueta trae tres cambios de una: el bloque central MÁS ABAJO («bajé todo el bloque central,
   para que haya más aire arriba»), un pie que enmarca el botón («agregué un footer para que el botón
   no quede solo») y la marca del encabezado fuera de la portada.
   La estructura son dos piezas: el cuerpo, que se lleva todo el aire libre y centra su contenido, y
   el pie, clavado al fondo. Así el aire de arriba NO es un número fijo: en la maqueta son 138 px
   sobre 670 de alto (20,6%), y con `flex: 1` + centrado el bloque queda siempre repartido entre el
   encabezado y el pie — crece en pantallas altas, se aprieta en las bajas y nunca se despega.
   ⚠️ Reemplaza al `margin-top: clamp(3.5rem, 11.5vh, 6.5rem)` y al `padding-bottom` en `vh`: esos
   dos números eran el «aire» cuando la portada era un solo bloque suelto, y con el pie ya no
   describen nada. El `padding` del cuerpo es el piso: sin él, en una ventana baja el «Silicaa» se
   pega a la línea del encabezado.
   ⚠️ El alto del encabezado va en variable (abajo) porque en el teléfono tiene dos filas. */
.portada-hero { display: flex; flex-direction: column;
                min-height: calc(100vh - var(--alto-header, 5.25rem)); text-align: center; }
.portada-cuerpo { flex: 1; display: flex; flex-direction: column;
                  max-width: 1280px; width: 100%; margin: 0 auto; }
/* ── LOS DOS AIRES, EN LA PROPORCIÓN DE LA MAQUETA ─────────────────────────────────────────────
   La maqueta reparte el espacio libre entre el encabezado y el pie en 139 : 95 = 1.45 : 1 (el
   bloque queda un poco por debajo del centro, no pegado al fondo).
   Los dos pseudo-elementos son espaciadores elásticos: se reparten TODO el espacio libre en esa
   proporción, a cualquier altura de ventana. Es lo que reemplaza al `padding` asimétrico anterior,
   que sumaba un número fijo y en una ventana baja dejaba el bloque contra el pie —el «está todo
   más contra abajo» de Gus—. Ventana de 800: 149 arriba y 104 abajo, que es la maqueta al detalle.
   ⚠️ El `padding-top` es un PISO, no el aire: en una ventana donde no sobra nada evita que el
   «Silicaa» toque la línea del encabezado. */
.portada-cuerpo::before { content: ''; flex: 1.45 1 0; min-height: 1rem; }
.portada-cuerpo::after { content: ''; flex: 1 1 0; }
/* El PIE de la portada. La banda se lee como cierre: fondo del encabezado (`--bg-alt`), su línea
   arriba y el aire repartido — 41 px arriba del botón y 45 abajo, medidos en la maqueta (2.55rem y
   2.8rem). Con el botón de 43 la banda da 129, que es la altura de la maqueta. El botón NO lleva
   margen propio acá: lo centra el pie.
   ⚠️ `margin` lateral negativo: la banda cruza TODO el ancho de la ventana, como el encabezado (en
   la maqueta su línea va de borde a borde, 1278 de 1280 px). El `main` tiene un padding lateral que
   sale de `--pad-main`, así que se compensa con la misma variable. */
.portada-pie { border-top: 1px solid var(--borde); background: var(--bg-alt);
               padding: 2.55rem 0 2.8rem; margin: 0 calc(-1 * var(--pad-main, 1.25rem)); }
.portada-pie .portada-cta { margin-top: 0; }
/* En la portada el `main` no aporta padding VERTICAL ni tope de ancho:
   · el padding: el aire de arriba lo reparten los espaciadores y el pie cierra sobre el borde
     inferior. Sin esto el hero arrancaba en 104 en vez de 84 —los 20 px del `main`— y la portada
     sobraba 40 px de alto, o sea aparecía una barra de scroll que además le robaba 15 px de ancho a
     la grilla (tarjetas de 272 en vez de 297);
   · el `max-width: 1280px`: con él, en una ventana más ancha que 1280 el `main` queda centrado con
     márgenes laterales y el pie —aunque salga de su padding— NO llega a los bordes de la pantalla.
     Gus lo vio exactamente así (24-Sep-2026: «la zona gris quedó delimitada a un ancho de una caja y
     no al ancho de toda la pantalla»). El tope se muda al `.portada-cuerpo`, que es el que tiene que
     seguir alineado con la grilla del resto del sitio; el pie queda libre y cruza la ventana entera. */
body.portada main { padding-top: 0; padding-bottom: 0; max-width: none; }

/* La cadena de las cuatro capas: el único gráfico de la portada. No son las tarjetas del Home de
   adentro, son una cadena — las flechas son lo que dice que van en orden y se encadenan.
   ⚠️ TODAS las medidas salen de la maqueta del 22-Sep-2026, medida pixel por pixel. La primera
   versión usaba las medidas «naturales» del CSS y Gus las vio mucho más chicas: el problema no era
   el ancho sino el TEXTO de adentro y la separación entre tarjetas.
     · tarjeta 162 x 89 (interior 130 px con 16 px de padding por lado)
     · separación 39 px entre tarjetas; las cuatro suman ~765 px
     · «01» ~11 px, título ~15 px, descripción ~14 px
   La descripción es la que más cambió (.74rem -> .86rem): a .74rem el texto quedaba 17% más chico
   que en la maqueta y era el grueso de la diferencia. «Aceleración del CapEx» entra justo en los
   130 px interiores a .86rem; si se agranda esa fuente, la tarjeta se estira y se rompe la fila. */
/* La separación va en `column-gap`, NO en un `margin-right` del `.paso`.
   ⚠️ Ese `margin-right` en `:not(:last-child)` era el bug del celular (reportado por Gus el
   23-Sep-2026: «se desalinean las cuatro tarjetas del home, la última cae afuera de la columna»).
   Con `flex-wrap` y una tarjeta por fila, las tres primeras arrastran 31 px de margen colgante a la
   derecha —así que su caja centrada deja el CONTENIDO 15 px a la izquierda del centro— y la última,
   que no es `:not(:last-child)`, se centra sola. Medido a 388 px: 01/02/03 en x=90 y la 04 en x=106.
   El margen sobra por definición: lo que separa a dos cajas es el espacio entre ellas, y en la
   última fila no hay ninguna caja después. Un `gap` no deja residuo y el centrado sale simétrico.
   2.44rem = 39 px, la separación que sale de la maqueta (las cuatro tarjetas suman 765 px). */
/* El PAQUETE de cuatro: 2×2 y no una fila (maqueta de Gus, 24-Sep-2026). Va sobre las columnas 3-4
   de la grilla del sitio, así que las tarjetas miden lo que da la grilla —(616 − medianil) / 2 =
   297 px a 1280— y no un ancho propio. El medianil separa las columnas (ahí vive el →) y 1.6
   medianiles separan las filas, que es lo mínimo que aguanta el glifo ↓ sin tocar las tarjetas.
   Las dos de cada fila quedan igual de altas solas: la grilla estira las celdas. */
.portada-cadena { grid-column: 3 / span 2; display: grid;
                  grid-template-columns: repeat(2, minmax(0, 1fr));
                  column-gap: var(--medianil); row-gap: calc(var(--medianil) * 1.6); margin: 0; }
/* ── LA TARJETA DEL PAQUETE: número y título en la misma línea (maqueta de Gus, 24-Sep-2026) ────
   La maqueta deja la tarjeta de Optic con un cambio de escalas —«en la tarjeta de optic ensayé un
   cambio de escalas, mirala y llevá las otras a esa proporción»— y las otras tres en la escala
   vieja. La proporción, medida EN LA MAQUETA entre sus propias tarjetas: el título pasa de 11 px de
   alto de tinta a 17 (×1,55) y el número de 8 a 15 (×1,87). Sobre el sitio eso es el título de
   .94rem a **1.45rem** y el número de .68rem a **1.3rem**.
   ⚠️ La primera versión los dejó en 1.6rem y 1.45rem —un 8 y un 11% más— y Gus lo vio al instante:
   «el optic que agrandaste se ve mucho más grande que el de mi mockup… quedaron grandes y muy
   pesados». La cuenta que faltaba: el alto de la TINTA, no el de la caja.
   La descripción NO sube (.86rem): en la maqueta mide lo mismo que la del sitio (medido: 91 px de
   tinta contra los 90 que da el cuerpo actual).
   El cambio de escalas obliga a cambiar el layout: con el número arriba, tres líneas grandes no
   entran en la altura de la tarjeta. En la maqueta el `01` va en una COLUMNA a la izquierda y el
   título y la descripción apilados a su derecha (medido: `01` en x 662-683, «Optic» y «Régimen
   macro» arrancando los dos en x 700). Eso es el grid de abajo: `auto 1fr` con 1.2rem de separación
   —los 17 px de la maqueta a escala del sitio— y las dos filas de la segunda columna.
   ⚠️ `align-items: baseline` y no `center`: en la maqueta la base del `01` (y=290) y la de «Optic»
   (y=291) coinciden; con `center` el número queda flotando alto, porque su caja es más baja.
   ⚠️ `line-height: 1.1` en el número y el título: con el 1.5 heredado, la tarjeta crecía de 89 a
   ~105 px y el paquete perdía la proporción de la maqueta (78 px, que acá son 87). */
.portada-cadena .paso { position: relative; display: grid;
                        grid-template-columns: auto 1fr; column-gap: 1.2rem; row-gap: .1rem;
                        align-items: baseline; align-content: start;
                        min-width: 10.125rem; padding: 1.3rem 1rem .45rem; text-align: left;
                        border: 1px solid var(--borde); border-radius: var(--radio);
                        background: var(--panel); }
/* ── EL AIRE DE ADENTRO: MÁS ARRIBA QUE ABAJO (Gus, 24-Sep-2026) ───────────────────────────────
   «Los textos están un poco volando, en mi referencia están más abajo, hay más aire sobre Optic».
   Medido en la maqueta: 25 px de aire arriba del texto y 13 abajo (1,92 : 1) — el contenido NO va
   centrado, va un poco bajo. El `align-content: center` anterior daba 15 y 15.
   Los valores salen de esa proporción sobre las cajas de acá (no sobre la tinta): con 1.3rem y .45rem
   la tarjeta vuelve a medir 78 px —el alto de la maqueta— y la proporción de aire queda 1,96.
   ⚠️ `align-content: start` en vez de `center` para que el padding de arriba mande: con `center` el
   aire se reparte solo y el `padding` no cambia nada. */
/* La flecha de la cadena. En escritorio dice el orden a lo ancho; cuando las tarjetas se apilan, una
   flecha que apunta a la derecha apunta al vacío — la siguiente está ABAJO. Por eso cambia de
   dirección en el ancho donde ya no entran tres: la columna de la cadena más los dos paddings del
   layout dejan de dar para 3 × 162 + 2 × 39. */
/* Las flechas viven en el medianil: el → queda centrado en los 22.4 px de la separación entre
   columnas, y el ↓ en los 35.8 de la separación entre filas. */
.portada-cadena .paso:not(:last-child)::after {
    content: '→'; position: absolute; right: -1.15rem; top: 50%;
    transform: translateY(-50%); color: var(--texto-dim); }
/* Las dos ↓ de la primera fila. La flecha NO dice «cadena 01→04»: Gus la puso para mostrar que el
   sistema «no es necesariamente lineal», así que quedan las dos bajadas más los dos → de cada fila. */
.portada-cadena .paso:nth-child(-n+2)::after {
    content: '↓'; right: auto; left: 50%; top: auto; bottom: -1.7rem;
    transform: translateX(-50%); }

/* Las escalas base. ⚠️ VAN ANTES DE LAS MEDIA QUERIES, y no después: `.portada-cadena .paso .n`
   tiene la MISMA especificidad acá y adentro del `@media (max-width: 440px)`, así que un `@media`
   no le gana por sí solo — gana la que está más abajo en el archivo. Con estas tres al final, la
   versión de escritorio pisaba a la del teléfono y los títulos quedaban a 25,6 px en una pantalla
   de 390 (medido: la tarjeta desbordaba y «Capital agéntico» se partía en dos líneas). */
.portada-cadena .paso .n { grid-column: 1; grid-row: 1; font-family: var(--mono);
                           font-size: 1.3rem; line-height: 1.1; color: var(--acento); }
.portada-cadena .paso .t { grid-column: 2; grid-row: 1; font-size: 1.45rem; font-weight: 600;
                           line-height: 1.1; }
.portada-cadena .paso .d { grid-column: 2; grid-row: 2; font-size: .86rem; color: var(--texto-dim); }

/* ── La tablet y el teléfono ─────────────────────────────────────────────────────────────────
   Pedido de Gus (24-Sep-2026): «apilar las pastillas abajo, en un paquete de cuatro, y no en
   vertical como están ahora». Así que el 2×2 se mantiene también abajo; lo que cambia es el aire y
   el cuerpo de adentro. Debajo de 900 px la portada ya no tiene ancho para dos columnas: el texto
   arriba y el paquete abajo, centrado.
   ⚠️ `min-width: 0` en `.paso` es imprescindible: con su mínimo de 10.125rem, dos columnas suman
   341 px y en pantallas de 360 o menos la grilla desbordaba. */
@media (max-width: 899px) {
    /* Una sola columna: el texto arriba y el paquete abajo. El texto pierde el medianil (ya no hay
       columna a su derecha) y el paquete ocupa el ancho completo, con tarjetas del orden de las del
       interior a ese ancho: 353 px contra 360 que dan las filas de tarjetas (la diferencia es el
       medianil, que acá tiene que dar lugar a la flecha →). */
    .explicacion { grid-template-columns: 1fr; row-gap: 2.4rem; }
    .explicacion-texto { grid-column: auto; padding-right: 0; }
    .portada-cadena { grid-column: auto; }
    /* ⚠️ Acá los espaciadores elásticos NO alcanzan: con la portada apilada el contenido es más alto
       que la pantalla, así que no sobra espacio y el bloque quedaba pegado arriba y el pie pegado a
       las tarjetas —los dos síntomas que reportó Gus el 24-Sep-2026: «en mobile el logo grande se
       subió mucho, debería estar más abajo» y «el footer gris quedó pegado a las tarjetas»—. En este
       ancho el aire es un MÍNIMO fijo: 4rem arriba (el aire que tenía antes de los espaciadores) y
       3rem abajo, que es lo que despega el pie del paquete. */
    .portada-cuerpo::before { min-height: 4rem; }
    .portada-cuerpo::after { min-height: 3rem; }
}
@media (max-width: 440px) {
    .portada-cadena { column-gap: 1.1rem; row-gap: 2.1rem; }
    .portada-cadena .paso { min-width: 0; padding: .6rem .7rem; column-gap: .55rem;
                            /* Una COLUMNA en el teléfono: el número vuelve arriba y el título y la
                               descripción usan el ancho entero de la tarjeta. Al lado, la columna 2
                               queda en ~114 px y «Aceleración del CapEx» (.74rem, ~120 px) se parte
                               en dos líneas — con lo que la fila 2 quedaba 18 px más alta que la 1
                               (medido a 390: alturas 59 y 77). */
                            grid-template-columns: 1fr; }
    .portada-cadena .paso .n { grid-column: 1; grid-row: 1; font-size: 1rem; }
    .portada-cadena .paso .t { grid-column: 1; grid-row: 2; font-size: 1.05rem; }
    .portada-cadena .paso .d { grid-column: 1; grid-row: 3; font-size: .74rem; }
    /* las flechas siguen al medianil nuevo, que es más chico que el de escritorio */
    .portada-cadena .paso:not(:last-child)::after { right: -1.05rem; }
    .portada-cadena .paso:nth-child(-n+2)::after { right: auto; bottom: -1.75rem; }
}
/* 360 px (Galaxy S, y muchos Android): la tarjeta baja a ~127 px útiles y «Aceleración del CapEx»
   a .74rem mide ~130, así que se parte en dos líneas y la fila 2 queda 18 px más alta que la 1
   (medido: 78 y 96). Un punto menos de cuerpo y vuelven a quedar las cuatro parejas. */
@media (max-width: 380px) {
    .portada-cadena .paso .d { font-size: .68rem; }
}

/* El botón es la única acción de la portada, así que tiene cuerpo de botón y no de enlace.
   Medidas de la maqueta del 22-Sep-2026: 185 x 50 px. La del 24-Sep-2026 lo mide más chico —182 x 43—
   y Gus confirmó que ése es el tamaño que quiere («el botón de conocer el sistema parece estar más
   grande, nomás comparando la imagen que me pasaste»). De 1.05rem a .94rem: el texto mide ~139 px y
   el botón queda en ~187 x 42, que es la medida de la maqueta. */
.portada-cta { margin-top: 1.1rem; font: inherit; font-size: .94rem; cursor: pointer;
               line-height: 1.2; padding: .7rem 1.5rem; border-radius: 999px; color: var(--acento);
               border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
               background: color-mix(in srgb, var(--acento) 12%, transparent); }
.portada-cta:hover { background: color-mix(in srgb, var(--acento) 22%, transparent); }

/* El BRILLO del botón de la portada (pedido de Gus, 24-Sep-2026: «algún brillito, algo que
   aparezca y desaparezca, algo que le dé movimiento»). Es un barrido de luz que cruza la píldora y
   se va: el resto del ciclo el botón está quieto, así que no queda nada latiendo todo el tiempo.
   ⚠️ Sólo `transform` (regla de la sección MOVIMIENTO): el brillo no entra en el layout, así que no
   puede mover el botón ni empujar la página.
   ⚠️ Va en un `::after` y no en el `background`: así el `:hover` sigue funcionando y el barrido no
   lo pisa. `overflow: hidden` + el `border-radius` heredado son lo que lo recorta dentro de la
   píldora, y `pointer-events: none` lo deja clickeable.
   ⚠️ El `transition` del fondo es del hover: sin él el cambio de color era un corte seco. */
.portada-cta { position: relative; overflow: hidden; transition: background-color .18s ease; }
.portada-cta::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(105deg, transparent 38%,
                color-mix(in srgb, var(--acento) 32%, transparent) 50%, transparent 62%);
    transform: translateX(-100%);
    animation: cta-brillo 4.6s ease-in-out 1.4s infinite;
}
/* 0-62 %: fuera de cuadro (el botón quieto) · 62-78 %: el barrido (0,74 s de los 4,6) · 78-100 %:
   ya pasó y no vuelve hasta el ciclo siguiente. Así «aparece y desaparece» en vez de quedarse. */
@keyframes cta-brillo {
    0%, 62%   { transform: translateX(-100%); }
    78%, 100% { transform: translateX(100%); }
}

/* Acá vivía `.portada-flecha` (la flecha ↓ con latido que delataba el gesto de entrar bajando). Se
   SACÓ el 24-Sep-2026 — Gus: «sacamos la flechita de abajo del botón, no tiene sentido». Con el pie
   que ahora enmarca el botón, la flecha sobraba: el botón es la invitación y el gesto es el atajo. */

/* ── MOVIMIENTO · de la portada al sistema ─────────────────────────────────
   Gusto de Gus (23-Sep-2026): «¿algún tipo de animación entre el Home y el visitar? Las tarjetas
   se pueden ir de a una, o el texto desvanecerse suavemente». Hasta acá el click era un corte
   seco: el CSS no tenía NI UNA transición (verificado: 0 `transition`, 0 `@keyframes`).

   La secuencia completa, en orden:
     1. el hero se va como BLOQUE (420 ms) — no escalonado: escalonar una salida hace que el ojo
        siga un elemento que se está yendo;
     2. el chrome que la portada escondía entra con fade (`body.entrando`, abajo);
     3. el contenido se ARMA de a uno (`armando`, lo pone home.js cuando termina el fetch).
   El escalonado rinde en la ENTRADA, y ahí sí dice algo: las cuatro capas aparecen 01→04, en el
   mismo orden que la cadena de la portada. Después los números, que son la comprobación de lo
   que se acaba de leer, no la bienvenida (mismo criterio que el orden del render).

   ⚠️ Sólo `opacity` y `transform`, nunca `margin`/`width`: `transform` no entra en el layout, así
   que la cadena de la portada (`.paso`, 10.125rem de mínimo) no puede romper fila desde acá. */

@keyframes mv-aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mv-irse     { from { opacity: 1; transform: none; }          to { opacity: 0; transform: translateY(-18px); } }
@keyframes mv-chrome   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* LA DIRECCIÓN ES UNA SOLA, Y ES HACIA ARRIBA (Gus, 24-Sep-2026): entrar ya no es sólo un click,
   es el gesto de bajar. Con el gesto pedido, el movimiento tiene que ACOMPAÑARLO — el hero se va
   hacia arriba (por eso -18 px y no los -8 de antes) y el chrome entra desde abajo (por eso +10 y
   no -6), igual que los KPI y las tarjetas, que ya entraban con `mv-aparecer` desde +6. Resultado:
   la portada no «cambia», se la empuja hacia arriba y aparece lo de abajo. Si algún día se agrega
   un elemento que entre desde arriba, se rompe la lectura del conjunto. */

/* (1) la portada se retira. `both` es imprescindible: sin el fill-mode, el hero vuelve a opacidad
   plena en el frame entre terminar la animación y el re-render que lo reemplaza.
   ⚠️ Este número está ACOPLADO al `espera` de `entrarAlSistema()` en index.html: el render no puede
   pisar al hero antes de que la animación termine, o el elemento desaparece a mitad de camino. */
.portada-hero.saliendo { animation: mv-irse 420ms cubic-bezier(.4, 0, 1, 1) both; }

/* (2) menú, acciones y pie, que en la portada están en `display: none`.
   ⚠️ CON EL GESTO, LOS TIEMPOS SUBIERON (Gus, 24-Sep-2026: «dale más tiempo a las transiciones,
   no hay apuro»). Un click tolera 230 ms; un gesto de rueda es un movimiento continuo y a esa
   velocidad se siente un tirón. El arco entero —hero afuera + chrome adentro + armado— pasó de
   ~810 ms a ~1,4 s. No se estiró nada suelto: se estiró la MISMA secuencia, con las proporciones
   y los escalones en el mismo lugar, para que siga leyéndose como un solo movimiento. */
body.entrando nav.menu { animation: mv-chrome 520ms ease-out 140ms both; }
body.entrando .acciones { animation: mv-chrome 520ms ease-out 140ms both; }
body.entrando footer.app-footer { animation: mv-aparecer 560ms ease-out 320ms both; }

/* El «Cargando el estado del sistema…» entra suave en vez de aparecer de golpe: con la API local
   el fetch gana la carrera y casi no se ve, pero cuando tarda es lo único en pantalla. */
.tab-panel > .carga { animation: mv-aparecer 380ms ease-out both; }

/* (3) el Home se arma. Los delays son acumulativos con la duración para que el último en entrar
   cierre el arco.
   ⚠️ Si se alarga el último delay o la duración, subir el `setTimeout` de `armarEntrada()` en
   home.js: al quitarse la clase `armando` las animaciones se CANCELAN en el acto. */
.tab-panel.armando > * { animation: mv-aparecer 520ms ease-out both; }
.tab-panel.armando > *:nth-child(1) { animation-delay: 0ms; }     /* «Arquitectura del sistema» */
.tab-panel.armando > *:nth-child(2) { animation-delay: 140ms; }   /* la matriz de las 4 capas */
/* El bloque del MACRO, último: entra cuando las tarjetas ya terminaron de acomodarse (la 04 cierra
   a 470 + 520 = 990 ms; el bloque arranca a 620 y cierra a 1,14 s). Antes acá estaba la frescura de
   los datos, que salió del Home el 24-Sep-2026. */
.tab-panel.armando > *:nth-child(3) { animation-delay: 620ms; }
.tab-panel.armando > *:nth-child(4) { animation-delay: 700ms; }
.tab-panel.armando .matriz > *,
.tab-panel.armando .tablero > * { animation: mv-aparecer 520ms ease-out both; }
/* Las capas, 01→04: 110 ms de escalón. Con la animación más larga, el escalón también tiene que
   crecer: si no, las cuatro se solapan y se leen como un bloque que aparece junto. */
.tab-panel.armando .matriz > *:nth-child(1) { animation-delay: 140ms; }
.tab-panel.armando .matriz > *:nth-child(2) { animation-delay: 250ms; }
.tab-panel.armando .matriz > *:nth-child(3) { animation-delay: 360ms; }
.tab-panel.armando .matriz > *:nth-child(4) { animation-delay: 470ms; }
.tab-panel.armando .tablero > *:nth-child(1) { animation-delay: 520ms; }
.tab-panel.armando .tablero > *:nth-child(2) { animation-delay: 610ms; }
.tab-panel.armando .tablero > *:nth-child(3) { animation-delay: 700ms; }

/* Quien pide menos movimiento, no lo recibe: corte directo, exactamente como era antes. Va al
   final del archivo y con `!important` porque estas reglas tienen que ganarle a las de arriba,
   que son más específicas en algunos casos (`.tab-panel.armando > *:nth-child(n)`). */
@media (prefers-reduced-motion: reduce) {
    .portada-hero.saliendo,
    body.entrando nav.menu,
    body.entrando .acciones,
    body.entrando footer.app-footer,
    .tab-panel > .carga,
    .tab-panel.armando > *,
    .tab-panel.armando .matriz > *,
    .tab-panel.armando .tablero > *,
    .portada-cta::after { animation: none !important; }
}

.tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
           gap: .45rem; }
.card.kpi { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .8rem; }
.card.kpi .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
               color: var(--texto-dim); }
.card.kpi .valor { font-family: var(--mono); font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.card.kpi.verde .valor { color: var(--verde); }
.card.kpi.ambar .valor { color: var(--ambar-tinta); }
.card.kpi.rojo .valor { color: var(--rojo); }
.card.kpi.sin-dato .valor { color: var(--texto-dim); }
.card.kpi .detalle { font-size: .75rem; color: var(--texto-dim); }
.matriz { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .45rem; }
/* ── EL HOME, SIN LOS TRES DATOS (Gus, 24-Sep-2026) ──────────────────────────────────────────────
   «Por ahora sacarle los 3 datos, dejar las tarjetas y ampliarles su contenido».
   Con los KPI afuera, las cuatro capas son el contenido de la pantalla entera: el panel es una
   columna y la matriz se lleva todo el alto que sobra, así las tarjetas crecen hasta llenar la
   pantalla en vez de quedarse en 154 px con un vacío abajo. El `flex: 1` va en la MATRIZ y no en
   cada tarjeta: las celdas de una grilla se estiran solas con el alto de la fila.
   ⚠️ Sólo `#panel-home`: el Explorador y Macro conservan su layout de bloques, donde el colapso de
   márgenes entre secciones sigue funcionando como siempre. */
/* ⚠️ `:not([hidden])` NO es adorno: `#panel-home` es un selector de ID y le GANA por especificidad a
   `section.tab-panel[hidden] { display: none }`, así que el panel seguía visible al cambiar de
   sección —medido: el Home y GARP apilados en la misma pantalla—. Con el `:not([hidden])` la regla
   sólo aplica cuando el panel está activo. */
#panel-home:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
#panel-home .matriz { flex: 1; }
/* El título de la sección, más cerca del contenido: con los KPI afuera, los 46 px de margen de la
   cabecera (1.7rem arriba + 1.2rem abajo) hacían que el Home no entrara en una pantalla de 577 —
   medido: 592 px de documento, 15 de scroll, con el pie cortado abajo—. En las otras secciones el
   margen queda como estaba: ahí hay más contenido y el aire no molesta.
   ⚠️ El AIRE DE ARRIBA pasó a 2.1rem el 24-Sep-2026, medido sobre el mockup: el encabezado del
   sistema arranca a 58 px del borde del encabezado (mockup: borde en 75, tinta del título en 133).
   Antes eran 27 px y la página arrancaba pegada a la barra. */
#panel-home .cabecera-seccion { margin: 2.1rem 0 1.1rem; }
/* ── EL BLOQUE DEL MACRO, EN LAS PROPORCIONES DEL MOCKUP (Gus, 24-Sep-2026) ─────────────────────
   Medido sobre su mockup (1280 x 680) y traducido a las distancias de acá:
   · 37 px entre el pie de las tarjetas de capa y la línea   → `margin-top: 2.3rem`
   · 19 px de la línea a la tinta del título                 → `padding-top: 1rem`
   · el título y la fecha del mercado en la MISMA fila, la una contra la otra (el título a la
     izquierda, la fecha al pie de esa misma línea, como todo lo secundario).
   La línea separa el mapa del sistema —las cuatro capas— del mercado del día. */
#panel-home .macro-en-home { margin-top: 2.3rem; padding-top: .3rem;
                             border-top: 1px solid var(--borde); }
/* La fila del título y la fecha. `baseline` y no `center`: las dos tipografías miden distinto y lo
   que tiene que coincidir es la base del renglón, que es como se alinean dos textos de una misma
   línea. `space-between` los lleva a los dos extremos. */
.fila-macro { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
.fila-macro h3 { margin: 0; }
.fila-macro .frescura { margin: 0; }
/* ── EN EL TELÉFONO, APILADOS (Gus, 24-Sep-2026) ────────────────────────────────────────────────
   «En el móvil eso así no funciona bien. Quería que “El mercado de hoy” esté en una línea y “Mercado
   al 24 de septiembre” en otra abajo». Tenía razón y la medición lo explica: en 390 px de ancho, las
   dos piezas —el título (14.4 px) y la fecha (12.48 px en mono)— suman más que el ancho disponible,
   así que las DOS se partían en dos renglones y la fila quedaba apretada y despareja.
   Apilados: el título arriba, a la izquierda, y la fecha abajo —alineada a la derecha igual, porque
   sigue siendo lo secundario—. El `baseline` de arriba deja de tener sentido cuando están en
   columnas: ahí el que manda es el borde izquierdo. */
@media (max-width: 640px) {
    .fila-macro { flex-direction: column; align-items: flex-start; gap: .15rem; }
    .fila-macro .frescura { align-self: flex-end; }
}
/* La tarjeta de capa es un enlace completo: toda su superficie es clickeable y el `ir` se
   ancla al pie, así las cuatro cierran a la misma altura aunque el texto mida distinto. */
a.card.capa { display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1.15rem 1.05rem;
              text-decoration: none; color: var(--texto); }
a.card.capa:hover { border-color: var(--acento); }
a.card.capa:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Los cuerpos subieron con el espacio que dejaron los KPI (24-Sep-2026): el número de .78 a 1.15rem,
   el nombre de 1rem a 1.35rem y el detalle de .8 a .95rem. Es la misma escala que la cadena de la
   portada, para que las cuatro capas se lean igual en las dos pantallas.
   ── Y AHORA TAMBIÉN LOS COLORES (Gus, 24-Sep-2026) ────────────────────────────────────────────
   «Las tarjetas no mantienen el código de la página anterior: el Optic está en gris y no blanco, el
   texto está en blanco y no gris». El código es el de la cadena de la portada, el mismo que se
   midió para la escala: número en acento · TÍTULO en el color del texto · descripción apagada.
   ⚠️ El NOMBRE tenía el color pisado: `a.card.capa .nombre` no declaraba `color`, así que ganaba por
   cascada la regla de las tarjetas de indicadores (`.card .nombre { color: var(--texto-dim) }`), que
   es de OTRA tarjeta y está pensada para otra cosa. Medido antes del fix: rgb(125,133,144) =
   `--texto-dim`, cuando el título de la cadena mide `--texto` (blanco). Se declara acá y se
   desactivan las tres propiedades que venían de esa regla y no corresponden a un título de tarjeta
   (`nowrap`, `overflow`, `ellipsis`: el nombre de una capa puede partirse si hace falta). */
a.card.capa .k { font-family: var(--mono); font-size: 1.15rem; line-height: 1.1; color: var(--acento); }
a.card.capa .nombre { font-size: 1.35rem; font-weight: 600; line-height: 1.15; color: var(--texto);
                      white-space: normal; overflow: visible; text-overflow: clip; }
a.card.capa .detalle { margin: .35rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--texto-dim); }
a.card.capa .ir { margin-top: auto; padding-top: .6rem; font-size: .85rem; color: var(--acento); }

/* En pantalla angosta sólo perduran las columnas esenciales. */
.oculta-movil { }
@media (max-width: 640px) {
    body { font-size: 14px; }
    .fila-form input { flex: 1 1 100%; }
    /* Dos filas: marca + acciones arriba y el menú en su propia fila, arrastrable.
       En una sola fila no entra: los enlaces del menú ocupan el ancho disponible. */
    .contenedor { padding: 0 1rem; }
    /* El aire de ABAJO no es decorativo: sin padding-bottom, el botón de cuenta y el menú quedaban
       pegados a la línea del header — medido el 23-Sep-2026 a 390 px, 2 px el botón y 1 px el menú
       (Gus: «el globito del usuario se pega a la línea»). En escritorio el header tiene .8rem abajo;
       en el teléfono se había ido a 0. Ahora .6rem, que deja el botón a ~10 px de la línea sin
       desbalancear el .8rem de arriba. Va declarado UNA sola vez: había otra regla del mismo
       selector al final del bloque y la de más abajo ganaba sin que se viera. */
    header.app-header { padding: .8rem 0 .6rem; }
    /* ── LA BARRA DEL TELÉFONO: DOS COLUMNAS (26-Sep-2026, diseño de Gus) ──────────────────────
       Izquierda: la marca arriba y el menú abajo. Derecha: la pastilla del usuario arriba (a la
       altura de la marca) y los dos botones, tema e idioma, abajo con el menú. Es el mismo bloque
       de tres pastillas del escritorio, repartido en las dos filas que el teléfono ya tenía.
       Por qué `display: contents` en `.acciones`: sus dos bloques pasan a ser celdas de esta
       grilla, y así cada uno se centra en SU fila. Con una sola columna que abarcara las dos filas
       (`.acciones` entero en la celda de la derecha) la cuenta se centraba contra el total y a 360
       quedaba 9,4 px corrida respecto de la fila del menú (medido).
       Por qué `minmax(0, 1fr)` y no `1fr`: con `1fr` el mínimo de la columna izquierda es el
       min-content del menú (214 px) y en un teléfono de 360 la grilla desborda.
       Medido a 390: barra 110,7 px (con los tres botones en una fila eran 158,3) y el texto del
       menú alineado con el centro de los círculos a 0,0 px, medido sobre la TINTA (la caja de línea
       da -1,8 px, que es el espacio del descendente: alinear por la caja sería el error). */
    header.app-header .barra {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1.4rem;
        row-gap: .5rem;
        align-items: center;
    }
    /* ── LA MARCA ARRANCA EN EL MISMO BORDE QUE TODO LO DEMÁS (Gus, 2-Oct-2026) ──────────────────
       «…hay un bug: Silicaa y Quantitative en la cabecera están desaliñados con el círculo».
       Medido a 390: el bloque de la marca arrancaba en 24,5 px mientras el botón del menú, el de
       tema y el de idioma arrancan en 16 — la marca se centra en su celda (regla base del
       escritorio) y su texto se centra adentro, así que en el teléfono quedaba corrida ~8 px.
       Se alinea al borde como el resto; en escritorio sigue centrada, que es donde el centrado
       tiene sentido (marca al medio, menú a la izquierda, acciones a la derecha).
       ⚠️ `grid-column: 1; grid-row: 1` NO se puede perder en este cambio: la regla base del
       escritorio pone la marca en la columna 2 (`grid-area: 1 / 2`), y sin la ubicación explícita
       hereda esa y se va al medio de la pantalla (medido: 128,6 px en vez de 16). */
    header.app-header .barra > .marca { grid-column: 1; grid-row: 1; justify-self: start; }
    header.app-header .barra > .marca .marca-txt { align-items: flex-start; text-align: left; }
    header.app-header .barra > nav.menu { grid-column: 1; grid-row: 2; }
    /* ⚠️ El botón del menú plegado ocupa la celda del menú (fila 2), NO la de la marca (1-Oct-2026).
       Medido a 386 px con `grid-area: 1 / 1`: el botón caía en la celda de la marca y la tapaba
       —la marca arranca en x=16 y el botón dibujaba encima, «Si» quedaba debajo del ícono—. La
       grilla del teléfono es de DOS columnas (marca+menú | cuenta+botones), así que la fila importa:
       en la base (escritorio) el `grid-area` del botón alcanza porque ahí el menú vive en la fila 1. */
    header.app-header .barra > .menu-btn { grid-column: 1; grid-row: 2; }
    header.app-header .barra > .acciones { display: contents; }
    header.app-header .barra > .acciones > .acciones-cuenta {
        grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
        position: relative;   /* el menú de cuenta se ancla a la pastilla */
    }
    header.app-header .barra > .acciones > .acciones-botones {
        grid-column: 2; grid-row: 2; justify-self: end; align-self: center;
    }
    /* ── LA PORTADA EN EL TELÉFONO: UNA SOLA FILA (Gus, 27-Sep-2026) ──────────────────────────
       Gus, sobre la captura del teléfono: «texto de header a izquierda, volver a achicar la altura
       del encabezado y probar ES fuera del header o alineado al texto Quantitative…». Medido antes
       del cambio, a 390: barra de 110,7 px, el tagline a 48,5 del borde (la marca hereda
       `justify-self: center` del escritorio y quedaba centrada en su celda) y el botón de idioma en
       la fila 2 (y=62), solo, porque en la portada el menú y la cuenta no existen: esa fila no
       hacía nada más que sostenerlo y era la que daba la altura.
       Ahora la portada tiene UNA fila: la bajada a la izquierda, pegada al margen como el resto del
       sitio, y el botón de idioma en la misma fila, alineado con ella. Se probó «fuera del header»
       y no hace falta: dentro, en la fila del texto, queda a la misma altura sin sumar nada. */
    body.portada header.app-header { padding: .55rem 0; }
    body.portada header.app-header .barra { row-gap: 0; }
    body.portada header.app-header .barra > .marca { justify-self: start; }
    body.portada header.app-header .barra > .acciones > .acciones-botones {
        grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
    }
    /* La marca se alinea a la izquierda y el nombre COLAPSA: en la portada está oculto con
       `visibility: hidden`, que le conserva el alto y por eso sobraba aire arriba de la bajada.
       El nombre grande ya está tres centímetros más abajo, así que en el encabezado no queda nada
       que mostrar. */
    body.portada header.app-header .marca-txt { align-items: flex-start; text-align: left; }
    body.portada header.app-header .marca h1 { display: none; }
    /* El encabezado del teléfono tiene DOS filas (marca arriba, menú y cuenta abajo), así que la
       portada tiene menos ventana: sin redefinir esto, el pie de la portada quedaba ~20 px por
       debajo del borde. */
    :root { --alto-header: 6.5rem; }
    /* …y en la PORTADA el encabezado tiene UNA sola fila desde el 27-Sep-2026: medido, 56,6 px. La
       variable se usa en `min-height: calc(100vh - var(--alto-header))` del hero, así que sin esto
       la portada se calculaba con los 104 px de adentro y le sobraban ~47 px de aire al pie. */
    body.portada { --alto-header: 3.55rem; }
    /* ⚠️ Acá vivía `header.app-header .barra { display: flex; flex-wrap: wrap; row-gap: .5rem }`.
       Se SACÓ el 26-Sep-2026 al pasar la barra a grilla (la regla está arriba, en este mismo bloque):
       con el mismo selector y más abajo, este `display: flex` le ganaba a la grilla y no se veía
       ningún cambio. Es el pitfall de siempre: media queries no aportan especificidad, gana la que
       está más abajo en el archivo. */
    /* La marca ocupa la columna izquierda de la grilla (el nombre es largo) y debajo va el menú,
       con los dos botones a la derecha, alineados con su fila (26-Sep-2026).
       ⚠️ Y en el teléfono va a la IZQUIERDA (Gus, 24-Sep-2026: «en mobile no veo ningún sentido que
       arriba el logo y la bajada estén centradas»). El centrado de la marca es del escritorio, donde
       la barra tiene tres columnas y la marca es la del medio; acá la fila es suya, así que no hay
       nada que centrar: se alinea con el menú y con todo el resto de la página, que en el teléfono
       es a la izquierda. Ojo: el `justify-content: center` que se anula es el de la marca —el que
       la centra en su fila—, no el de la barra. */
    header.app-header .marca { flex: 1 1 100%; justify-content: flex-start; }
    header.app-header .marca .marca-txt { align-items: flex-start; text-align: left; }
    /* El botón de cuenta queda sólo con el ícono: el rótulo no entra al lado de la marca. */
    button.icono .etiqueta { display: none; }
    /* Los dos íconos de la barra (tema y cuenta) un 20% más chicos: 20 → 16 px. Pedido de Gus el
       23-Sep-2026: «en mobile los dos iconos quedan un poco grandes, se pueden achicar un 20%».
       ⚠️ El ALTO del botón NO se toca (38 px): el área táctil se mantiene y el ícono queda centrado
       —achicar el botón también habría bajado el blanco de toque, que ya está por debajo de los
       44 px recomendados—. Lo que sí sube un punto es el padding: con el ícono de 16 px y .6rem por
       lado la píldora medía 35×38 (un óvalo vertical); con .69rem queda 38×38, cuadrada, y libera
       3 px de ancho en una barra que en el teléfono va justa. */
    button.icono svg { width: 16px; height: 16px; }
    button.icono { min-height: 38px; padding: 0 .69rem; }
    header.app-header h1 { font-size: 1.15rem; }
    header.app-header .acciones { order: 4; margin-left: auto; }
    /* Alineado a la izquierda (21-Sep-2026, pedido de Gus: centrado no quedaba bien en el
       teléfono). Con `flex-start` y sin margen negativo, el primer ítem arranca en el mismo
       borde que la marca; el arrastre horizontal sigue disponible si algún día no entran. */
    /* ⚠️ `padding-bottom: 0` y `order: 0` (26-Sep-2026): los dos eran del layout viejo, cuando el
       menú iba en su propia fila. Con la grilla nueva, ese `.4rem` de abajo dejaba el texto del menú
       del centro: medido sobre la tinta del primer ítem, el centro quedaba ~1,4 px por encima del
       centro de los círculos. Sin el padding queda en 0,0 px y la barra baja 6,4 px más. */
    nav.menu { flex: 1 1 auto; order: 0; justify-content: flex-start;
               margin: 0; padding-bottom: 0; }
    /* El rótulo y su texto van al costado sólo si hay ancho: en el teléfono se apilan. */
    .cabecera { grid-template-columns: 1fr; gap: .25rem 0; margin-bottom: 1.8rem; }
    .cabecera.cabecera-seccion { margin-bottom: 1.2rem; }
    /* La bajada de la cabecera en el teléfono: a la izquierda y sin tope de ancho (el tope es para
       pantallas anchas). Antes acá se devolvía a la izquierda el bloque `.intro-vista`, que estaba
       centrado; ese bloque se fue el 24-Sep-2026 y la explicación ya nace alineada a la izquierda. */
    .cabecera p.lead { max-width: none; }
    /* (Acá iba `.estado-api span:last-child { display: none }`, que en el teléfono dejaba el punto
       de la API sin su texto. El indicador se eliminó el 24-Sep-2026 junto con el resto.) */
    .popover { right: -.25rem; }
    .filtros { gap: .3rem; }
    button.filtro { font-size: .75rem; padding: .3rem .6rem; }
    .fila .v.guia { text-align: left; }
    /* columnas secundarias fuera: en el teléfono sólo lo esencial */
    .oculta-movil { display: none !important; }
    .lista { grid-template-columns: 1fr; }
    /* Las dos columnas del cuerpo de una tarjeta no entran en el teléfono: con 12rem fijos
       para la etiqueta, al valor le quedan ~90 px y se parte en tres renglones («US$ 11,9 /
       B · / grande», reportado por Gus el 19-Sep-2026). Etiqueta y valor a los extremos. */
    .item .cuerpo .fila { display: flex; justify-content: space-between; gap: .5rem;
                          grid-template-columns: none; }
    .revisiones { margin-left: 0; width: 100%; }
    /* la rúbrica pasa a lista: criterio + nota en una línea, el fundamento debajo */
    table.rubrica thead { display: none; }
    table.rubrica tbody tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: .3rem;
        border-bottom: 1px solid var(--borde);
        padding: .45rem 0;
    }
    table.rubrica td { display: block; border: none; padding: 0; }
    table.rubrica td.evidencia { flex: 1 0 100%; margin-top: .2rem; }
    .fila-form input#alta-moneda { flex: 0 0 90px; }
    button.btn-accion { flex: 1 1 100%; }
    main { padding: var(--pad-main); }
    :root { --pad-main: .9rem; }
    /* ⚠️ Acá había otra declaración de `header.app-header` (con padding-bottom 0) que le ganaba por
       orden a la de más arriba dentro del mismo bloque. Se sacó: el padding del header se declara
       una sola vez, en la primera parte de este bloque. */
    /* ⚠️ Acá decía `.grid { grid-template-columns: 1fr 1fr }`, y ese `1fr` es `minmax(auto, 1fr)`:
       el mínimo automático de una columna es su **min-content**, así que un solo ítem que no se
       parte se queda con la mitad de la grilla y al vecino lo deja en un palmo. Pasó con el
       termómetro del AAII —su línea de rótulo es rótulo en `nowrap` + píldora en `nowrap`—, que
       imponía 241 px: medido a 390 px el 25-Sep-2026, columnas de **96,1 / 241,3** px, con
       «AMPLITUD DEL MERCADO» en tres renglones y el valor en cinco (uno de ellos con el «·» solo),
       y la fila 1 estirada a 246 px por la tarjeta más alta —145 px vacíos al pie de Opciones—.
       Reportado por Gus: *«esto habría que arreglarlo»*. Con `minmax(0, 1fr)` las dos columnas
       miden lo mismo (168,7 px), el rótulo baja a dos renglones, el valor también, y la grilla
       pasa de 430 a 312 px de alto. Es la MISMA lección —y la misma corrección— que la regla de
       `.banda.datos .grid-kpi` de más arriba: en el teléfono, DOS columnas y con `minmax(0, 1fr)`.
       ⚠️ La hermana `.grid-kpi` de la línea siguiente sigue con `1fr 1fr`: mismo patrón latente,
       sin caso medido todavía. */
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
    .grid-kpi { grid-template-columns: 1fr 1fr; }
    .lienzo { height: 190px; }
    table { font-size: .78rem; }
    table th, table td { padding: .35rem .4rem; }
}

/* ── Análisis a fondo (bloque del Home, 25-Sep-2026) ─────────────────────────────────────────────
   Un análisis por fila, con el proyecto, la fecha y el número que lo define. La tarjeta puede
   ocupar el ancho de la grilla; la PROSA de adentro va topeada a dos columnas, que es la regla.
   El título y la fecha del bloque reusan `.fila-macro` (título a la izquierda, fecha a la derecha),
   como el bloque del macro: es la misma fila, no una nueva. */
.analisis-home { margin: 0 0 2.4rem; }
.analisis-home .fila-macro { margin: 0 0 .7rem; }
.analisis-card { display: block; text-decoration: none; color: inherit; margin: 0 0 .55rem;
                 padding: .95rem 1.1rem; border: 1px solid var(--borde); }
.analisis-card:hover { border-color: var(--acento); }
.analisis-card .linea-analisis { display: flex; justify-content: space-between; gap: .8rem;
                                 align-items: baseline; }
.analisis-card .proyecto { font-weight: 600; color: var(--texto); }
.analisis-card .fecha, .analisis-card .numero { font-family: var(--mono); font-size: .74rem;
                                               color: var(--texto-suave); }
.analisis-card .titulo { margin: .3rem 0 .35rem; font-size: 1rem; color: var(--texto); }
.analisis-card .numero { margin: 0 0 .45rem; }
.analisis-card .detalle { margin: 0; max-width: var(--dos-columnas); line-height: 1.5; }
.analisis-home .nota { margin: .6rem 0 0; }

/* ── Página de lectura: los artículos de análisis (25-Sep-2026) ───────────────────────────────────
   Las páginas de `/analisis.html` y `/analisis-prove.html` usan el sistema del sitio; acá viven sus
   reglas de lectura, para que el índice y el artículo no tengan cada uno su copia.

   ⚠️ EL BUG DE MOBILE, medido el 25-Sep-2026: `--dos-columnas` es un tope RELATIVO
   (`calc(50% - .225rem)`), porque está pensado para la grilla de cuatro columnas de la SPA. En un
   teléfono, el 50% del ancho son ~194 px: el artículo quedaba en una tira angosta y larguísima.
   Gus: «en mobile es un desastre, quedó toda como en una columna muy angosta y muy larga para abajo».
   La SPA no tiene este problema porque `.cabecera p.lead` recibe `max-width: none` en el mismo
   breakpoint (640). Acá se hace lo mismo: el tope de dos columnas vale donde hay cuatro columnas,
   no donde hay una. */
/* ⚠️ `display: block` NO ES DECORACIÓN. El `body` del sitio es una grilla en columna (encabezado,
   `main` que se estira, pie) y en una grilla la columna implícita mide `minmax(auto, max-content)`:
   una tabla de cinco columnas que no puede encogerse **estira el ancho de toda la página**. Medido el
   25-Sep-2026 con la ventana en 390: el `body` quedaba en 563 px y la columna de texto en 563, con la
   mitad del contenido fuera de pantalla en mobile. Con `display: block` la página de lectura deja de
   heredar la grilla del tablero y el ancho es el de la ventana. */
body.lectura { padding: 0; display: block; }
.lectura-caja { max-width: var(--dos-columnas); margin: 0 auto; padding: 0 20px 5rem; }
/* La tabla scrollea sola cuando no entra (mobile): el ancho de la página no lo decide una tabla. */
.tabla-scroll { overflow-x: auto; max-width: 100%; }
.lectura-caja p, .lectura-caja li { line-height: 1.65; }
.lectura-caja h1 { font-size: 1.9rem; line-height: 1.25; margin: 2.5rem 0 .5rem; }
.lectura-caja h2 { font-size: 1.25rem; margin: 2.6rem 0 .7rem; padding-top: 1.2rem;
                   border-top: 1px solid var(--borde); }
.lectura-caja h3 { font-size: 1rem; margin: 1.9rem 0 .5rem; }
.lectura-caja table { width: 100%; border-collapse: collapse; margin: 1.1rem 0; font-size: .84rem; }
.lectura-caja th, .lectura-caja td { text-align: left; padding: .45rem .6rem;
                                     border-bottom: 1px solid var(--borde); vertical-align: top; }
.lectura-caja th { font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
                   letter-spacing: .04em; color: var(--texto-suave); font-weight: 600; }
.lectura-caja ul, .lectura-caja ol { padding-left: 1.3rem; }
.lectura-caja li { margin: .3rem 0; }
/* El código en línea NO lleva caja. La primera versión le puso fondo y borde («como un marco»), y Gus
   lo marcó el 25-Sep-2026: eso no es de nadie, porque el sitio no tiene convención de código en línea
   (la SPA no emite `<code>` nunca). Lo único que hace falta es que se lea como un identificador
   literal: la monoespaciada lo distingue sola, sin fondo ni marco. */
.lectura-caja code { font-family: var(--mono); font-size: .88em; background: none; border: 0;
                     padding: 0; color: var(--texto); }
/* ── El destacado: la capa de lectura rápida (25-Sep-2026) ────────────────────────────────────────
   Gus: «es una cantidad de texto increíble… necesita más TLDRs, más textos destacados cada tanto que
   recapitulen de qué estamos hablando». Es un bloque con la barra de acento a la izquierda, para que
   se pueda leer en diagonal sólo mirando las barras: quien lee las recapitulaciones se lleva la tesis.
   No es una cita (esa es gris y sin color): es un resumen, y por eso lleva el acento. */
.lectura-caja .destacado { margin: 1.1rem 0 1.5rem; padding: .85rem 1rem;
                           border-left: 3px solid var(--acento); background: var(--panel);
                           border-radius: 0 var(--radio) var(--radio) 0;
                           font-size: .95rem; line-height: 1.6; }
/* ⚠️ Sin tope propio: la caja ocupa el ancho de lectura que ya está topeado por `.lectura-caja`.
   Ponerle `max-width: var(--dos-columnas)` a la CAJA la dejaba en la mitad de la columna (291 px
   medidos) y el texto de cinco líneas pasaba a diez. El tope va al ancho del contenedor, no a cada
   bloque: es la misma confusión que la tarjeta del Home. */
.lectura-caja .destacado strong { color: var(--texto); }
.lectura-caja hr { border: 0; border-top: 1px solid var(--borde); margin: 2.4rem 0; }
.lectura-caja blockquote { margin: 1rem 0; padding-left: .9rem; border-left: 2px solid var(--borde);
                           color: var(--texto-suave); }
.lectura-volver { display: inline-block; margin: 1.6rem 0 0; font-family: var(--mono);
                  font-size: .78rem; color: var(--texto-suave); text-decoration: none; }
.lectura-volver:hover { color: var(--acento); }
.lectura-fecha { font-family: var(--mono); font-size: .78rem; color: var(--texto-suave); }

@media (max-width: 640px) {
    /* Donde no hay cuatro columnas, la lectura usa el ancho que hay. */
    .lectura-caja { max-width: none; }
    .lectura-caja h1 { font-size: 1.45rem; }
    .lectura-caja table { font-size: .76rem; }
    .lectura-caja th, .lectura-caja td { padding: .35rem .4rem; }
}

/* ── Índice de análisis (`/analisis.html`, 25-Sep-2026) ───────────────────────────────────────────
   Una tarjeta por artículo: proyecto y fecha arriba, el título, el número que lo define y el resumen.
   La tarjeta puede ocupar el ancho; el resumen no. */
.indice-card { display: block; text-decoration: none; color: inherit; background: var(--panel);
               border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem;
               margin: 0 0 .7rem; }
.indice-card:hover { border-color: var(--acento); }
.indice-linea { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.indice-proyecto { font-weight: 600; color: var(--texto); }
.indice-fecha, .indice-numero, .indice-estado { font-family: var(--mono); font-size: .76rem;
                                               color: var(--texto-suave); }
.indice-card h3 { margin: .45rem 0 .35rem; font-size: 1.02rem; color: var(--texto); }
.indice-resumen { margin: 0 0 .5rem; max-width: var(--dos-columnas); color: var(--texto-suave);
                  line-height: 1.55; }
.indice-estado { display: inline-block; border: 1px solid var(--borde); border-radius: 3px;
                 padding: .05rem .35rem; }

/* ── El bloque de frescura de Crypto (25-Sep-2026) ────────────────────────────────────────────────
   Gus: «abajo vienen tres aclaraciones de fechas que me parece que es confuso». Eran dos relojes
   distintos (la actualización diaria del market cap y el rastrillaje semanal) más dos conteos,
   todo apilado sin aire. Ahora cada línea es una cosa y hay espacio entre ellas. */
.frescura-bloque { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.1rem; }
.frescura-bloque .nota.conteos { margin: 0; color: var(--texto-dim); }
/* El link a los análisis, entre la bajada y el título de la sección: con aire propio, porque es un
   anuncio y no contenido de la lista. */
.nota.analisis-link { margin: 0 0 1.4rem; }

/* ── Gráfico Precio vs. ganancias, dentro de la ficha auditada (5-Oct-2026) ───────────────────────
   Dos franjas apiladas: el precio (con el % de crecimiento anotado en cada balance) arriba y la
   valuación abajo. Son DOS gráficos con el eje de tiempo sincronizado, no dos paneles de uno: la
   librería deja el gráfico en blanco cuando una misma instancia lleva dos series.
   Las alturas van en px y no en vh: en el teléfono el vh cambia con la barra del navegador y el
   canvas se mide antes de tiempo (la franja de abajo quedaba vacía). */
.grafico-fund { margin: .9rem 0 1.2rem; }
.grafico-fund h4 { margin: 0 0 .45rem; }
.tarjeta-grafico { background: var(--bg); border: 1px solid var(--borde); border-radius: var(--radio);
                   padding: .45rem .35rem .25rem; }
.grafico-fund-precio { width: 100%; height: 280px; }
.grafico-fund-val { width: 100%; height: 120px; border-top: 1px solid var(--borde); }
.grafico-fund-val .nota { margin: .8rem .4rem; }
.grafico-fund-sel { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem .2rem .1rem; }
.grafico-fund-sel .filtro { font-size: .72rem; padding: .22rem .55rem; }
@media (min-width: 760px) {
    .grafico-fund-precio { height: 320px; }
    .grafico-fund-val { height: 140px; }
}