/* ChatAnalytica · 06 «La elegida» · maqueta (7-oct-2026; segunda vuelta 8-oct). El estilo de la 01 Bóveda con las piezas
   elegidas de 02–05. Sistema Consola del Chat en oscuro, Geist local, la Vault (la de la 05) como escenario. Un solo CSS.
   Segunda vuelta: más sobria (referencias-openai.md): sin viñeta, grano, resplandores ni velos bajo el texto; el naranja,
   solo en la acción principal y en la señal de la Vault; una sección por pantalla y el scroll por paradas (base.js). */

@font-face { font-family: 'Geist'; src: url('/sitio/fuentes/geist-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/sitio/fuentes/geist-mono-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --lienzo: #080808; --panel: #0E0E0E; --sup2: #161616; --sup3: #1C1C1C; --filete: #222222; --filete-2: #2C2C2C;
  --t1: #EDEDED; --t2: #A3A3A3; --t3: #8A8A8A; --t-apoyo: #C9C9C9;
  --sube: #45BE80; --baja: #E5605C; --estimado: #D9A53F;
  --naranja: #ED8135; --naranja-a: #FFA24C; --naranja-b: #E5641F; --sobre-naranja: #0B0B0C; --naranja-texto: #ED8135;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --e-sal: cubic-bezier(.23, 1, .32, 1);
  --e-mov: cubic-bezier(.77, 0, .175, 1);
  --e-quint: cubic-bezier(.22, 1, .36, 1);
  --margen: clamp(16px, 4vw, 56px);
  --ancho: 1360px;
  --r-ctl: 10px; --r-tarjeta: 16px; --r-ventana: 16px;
  --barra-h: 64px;
}
:root[data-tema="claro"] {
  color-scheme: light;
  --lienzo: #F7F7F7; --panel: #FFFFFF; --sup2: #EDEDED; --sup3: #E6E6E6; --filete: #E3E3E3; --filete-2: #D6D6D6;
  --t1: #0F0F0F; --t2: #474747; --t3: #5E5E5E; --t-apoyo: #2E2E2E;
  --sube: #147246; --baja: #BF282D; --estimado: #845500; --naranja-texto: #A84B0C;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--lienzo); scroll-behavior: auto; }
body { position: relative; margin: 0; background: var(--lienzo); color: var(--t1); font-family: var(--sans); font-size: 17px; line-height: 1.6; letter-spacing: -.01em; font-feature-settings: 'ss01' 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
[hidden] { display: none !important; }
ul, ol { list-style: none; }
::selection { background: rgba(237, 129, 53, .32); color: var(--t1); }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }
.saltar { position: fixed; left: 16px; top: -60px; z-index: 1000; background: var(--naranja); color: var(--sobre-naranja); padding: 10px 14px; border-radius: 8px; font-weight: 600; transition: top .2s var(--e-sal); }
.saltar:focus { top: 12px; }
.barra svg, .boton svg, .ctl svg, .ctl-texto svg, .meta-icono svg, .enlace-flecha svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- La Vault de fondo ---------- */
#boveda { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: 0; pointer-events: none; }
#boveda .vault-canvas { display: block; width: 100%; height: 100%; }
/* Etiquetas de los nodos que enciende una pregunta (de la 05) */
.etiquetas-vault { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.etq { position: absolute; left: 0; top: 0; transform: translate3d(-999px, -999px, 0); display: flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 13px/1 var(--sans); letter-spacing: -.005em; color: var(--t1);
  opacity: 0; transition: opacity .36s var(--e-sal); will-change: transform; }
.etq.vista { opacity: 1; }
.etq::before { content: ''; width: 18px; height: 1px; background: rgba(237, 237, 237, .4); }
.etq span { padding: 4px 9px; border-radius: 999px; background: rgba(14, 14, 14, .86); border: 1px solid rgba(237, 237, 237, .14); }
[data-tema="claro"] .etq span { background: rgba(255, 255, 255, .85); }
.sin-webgl #boveda { background: var(--lienzo); }
main, .pie { position: relative; z-index: 10; }
main { overflow-x: clip; }
/* Nada de velos ni manchas detrás del texto: se lee por la composición (dónde está la Vault y cuánto brilla en cada parada) */

/* ---------- Scroll por paradas (base.js) ---------- */
/* marcas invisibles: cada una es una parada; scroll-snap obligatorio, una por gesto */
html.con-paradas { scroll-snap-type: y mandatory; }
html.con-paradas.guiando { scroll-snap-type: none; }
.paradas { position: absolute; left: 0; top: 0; width: 1px; height: 0; pointer-events: none; }
.paradas i { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
/* Una sección = una pantalla: el contenido centrado en vertical, libre de la barra */
.pantalla > .contenedor { width: 100%; }
.pantalla { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--barra-h) + clamp(24px, 5vh, 64px)); padding-bottom: clamp(32px, 7vh, 88px); }
/* Una escena por pasos: [data-pasos="N"] mide N pantallas (--pasos lo pone base.js) y su contenido se queda pegado */
.js [data-pasos] { height: calc(var(--pasos, 1) * 100svh); }
.escena-fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rm [data-pasos] { height: auto; }
.rm .escena-fija { position: relative; height: auto; overflow: visible; }

/* ---------- Tipografía ---------- */
/* Escala: grande y apretada en el héroe; titulares de sección de peso medio; el apoyo, en gris claro (referencias-openai.md) */
.titular-xxl { font-size: clamp(2.75rem, 8.6vw, 7.5rem); font-weight: 600; letter-spacing: -.045em; line-height: .96; text-wrap: balance; }
.titular-xl { font-size: clamp(2.3rem, 5.2vw, 4.75rem); font-weight: 560; letter-spacing: -.038em; line-height: 1; text-wrap: balance; }
.titular-l { font-size: clamp(2rem, 3.7vw, 3.5rem); font-weight: 560; letter-spacing: -.032em; line-height: 1.04; text-wrap: balance; }
.titular-m { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 560; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.entradilla { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--t-apoyo); letter-spacing: -.01em; text-wrap: pretty; }
.cuerpo { font-size: 1.0625rem; line-height: 1.65; color: var(--t2); max-width: 58ch; text-wrap: pretty; }
.meta { font-size: .875rem; line-height: 1.45; color: var(--t2); letter-spacing: -.005em; }
.naranja { color: var(--naranja-texto); }
em.serif, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.titular-xxl em.serif, .titular-xl em.serif, .titular-l em.serif { padding-right: .04em; }
.antetitulo { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--t-apoyo); letter-spacing: -.01em; font-weight: 500; }
.nodo { display: none; }
.tab { font-variant-numeric: tabular-nums; }
code, .mono { font-family: var(--mono); font-feature-settings: 'zero' 1; }

/* Líneas que suben desde su máscara */
.lineas .l { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lineas .l > span { display: block; transform: translate3d(0, 108%, 0); transition: transform 1s var(--e-quint) calc(var(--d, 0) * 90ms); }
.listo .intro .lineas .l > span, .lineas.visto .l > span { transform: none; }
.entra { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .9s var(--e-sal) calc(var(--d, 0) * 90ms + 250ms), transform 1s var(--e-quint) calc(var(--d, 0) * 90ms + 250ms); }
.listo .entra { opacity: 1; transform: none; }
[data-revela]:not(.lineas) { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .8s var(--e-sal), transform .9s var(--e-quint); }
[data-revela].visto:not(.lineas) { opacity: 1; transform: none; }

/* ---------- Controles ---------- */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .16s var(--e-sal), background-color .2s, border-color .2s, color .2s; }
.boton:active { transform: scale(.98); }
.boton svg { transition: transform .3s var(--e-sal); }
.boton-grande { height: 48px; padding: 0 24px; font-size: 1rem; }
.boton-primario { background: var(--naranja); color: var(--sobre-naranja); }
.boton-fantasma { color: var(--t1); border: 1px solid rgba(237, 237, 237, .22); background: transparent; }
[data-tema="claro"] .boton-fantasma { border-color: rgba(15, 15, 15, .22); }
@media (hover: hover) and (pointer: fine) {
  .boton-primario:hover { background: #F28E47; }
  .boton:hover svg { transform: translateX(2px); }
  .boton-fantasma:hover { border-color: rgba(237, 237, 237, .4); background: rgba(237, 237, 237, .05); }
}
.ctl { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--r-ctl); color: var(--t2); font-size: .875rem; font-weight: 500; transition: color .2s, background-color .2s; }
.ctl-icono { width: 36px; padding: 0; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .ctl:hover { color: var(--t1); background: rgba(237, 237, 237, .06); } }
.ctl-texto { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--t3); padding: 6px 8px; border-radius: 8px; transition: color .2s; }
.ctl-texto:hover { color: var(--t1); }
.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.enlace-flecha svg { transition: transform .3s var(--e-sal); }
.enlace-flecha:hover { color: var(--t1); }
.enlace-flecha:hover svg { transform: translateX(3px); }
.enlace-grande { font-size: 1.0625rem; font-weight: 500; color: var(--t1); padding: 8px 0; }
.meta-icono { display: inline-flex; align-items: center; gap: 8px; }
/* Antes chips de color: ahora texto (el estimado conserva su color del sistema, el amarillo de «estimado») */
.chip-estimado { display: inline-block; font-size: .875rem; color: var(--estimado); }
.chip-estimado i { display: none; }
.chip-pronto { display: inline-flex; align-items: baseline; gap: 8px; font-size: .9375rem; color: var(--t-apoyo); font-weight: 500; }
.chip-pronto i { font-style: normal; font-weight: 400; color: var(--t2); }
.chip-pronto i::before { content: '· '; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Barra ---------- */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--barra-h); }
.barra::before { content: ''; position: absolute; inset: 0; background: rgba(8, 8, 8, .74); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); opacity: 0; transition: opacity .4s var(--e-sal); }
[data-tema="claro"] .barra::before { background: rgba(247, 247, 247, .78); }
.barra.con-fondo::before { opacity: 1; }
.barra-in { position: relative; height: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); display: flex; align-items: center; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 640; font-size: 1.06rem; letter-spacing: -.02em; flex: none; }
.marca-logo { width: 28px; height: 28px; }
/* El logo: la 04 Rejilla (Alex, 8-oct; plan/logo/svg/04-rejilla.svg): celdas encendidas en naranja y apagadas en gris */
.marca-logo rect, .marca-logo path, .logo-mini rect, .logo-mini path, .toma-logo rect, .toma-logo path { stroke: none; }
.marca-logo .enc, .logo-mini .enc, .toma-logo .enc { fill: var(--naranja); }
.marca-logo .apag, .logo-mini .apag, .toma-logo .apag { fill: #2A2A2A; }
[data-tema="claro"] .marca-logo .apag, [data-tema="claro"] .logo-mini .apag, [data-tema="claro"] .toma-logo .apag { fill: #E0E0E0; }
/* Las puertas (M3, 9-oct-2026): «ChatAnalytica Finance» con el nombre de la Vault en su color (paleta 01 de magnet-system/plan/marca-vaults) */
.marca-vault { font-weight: 500; color: var(--naranja-texto); }
html[data-puerta="design"] { --vault: #9879ED; --vault-texto: #9879ED; }
html[data-puerta="design"][data-tema="claro"] { --vault-texto: #7860BB; }
html[data-puerta="design"] .marca-vault { color: var(--vault-texto); }
html[data-puerta="design"] .marca-logo .enc { fill: var(--vault-texto); }
/* La madre (ChatAnalytica, en blanco y negro; Alex, 9-oct): la Rejilla y la acción principal en tinta. El naranja queda para Finance. */
html[data-puerta="madre"] .marca-logo .enc { fill: var(--t1); }
html[data-puerta="madre"] .boton-primario { background: var(--t1); color: var(--lienzo); }
html[data-puerta="madre"] :focus-visible { outline-color: var(--t1); }
html[data-puerta="madre"] .saltar { background: var(--t1); color: var(--lienzo); }
html[data-puerta="madre"] .menu-idioma > [aria-checked="true"]::after { background: var(--t1); }
html[data-puerta="madre"] .menu-movil nav a[aria-current="page"] { color: var(--t1); }
.logo-mini { display: inline-block; flex: none; }
.nav { display: flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.nav a { position: relative; padding: 8px 12px; font-size: .875rem; color: var(--t-apoyo); font-weight: 400; border-radius: 8px; transition: color .2s; }
.nav a:hover { color: var(--t1); }
.nav a[aria-current="page"] { color: var(--t1); font-weight: 500; }
.barra-der { display: flex; align-items: center; gap: 4px; }
.boton-barra { height: 36px; padding: 0 16px; font-size: .875rem; margin-left: 8px; }
.ctl svg path { stroke-width: 1.5; }
.i-sol { display: none; }
[data-tema="claro"] .i-sol { display: block; }
[data-tema="claro"] .i-luna { display: none; }
.ctl-menu { display: none; }
.barra-filete { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(237, 237, 237, .06); opacity: 0; transition: opacity .4s; }
.con-fondo .barra-filete { opacity: 1; }
.barra-filete i { display: none; }
.idioma { position: relative; }
.idioma .ctl svg { transition: transform .2s var(--e-sal); }
.idioma .ctl[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-idioma { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; padding: 6px; background: var(--sup2); border: 1px solid var(--filete-2); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); transform-origin: top right; animation: menu-in .16s var(--e-sal); }
.menu-idioma > * { display: flex; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: .875rem; color: var(--t2); text-align: left; }
.menu-idioma > [aria-checked="true"] { color: var(--t1); }
.menu-idioma > [aria-checked="true"]::after { content: ''; margin-left: auto; width: 6px; height: 6px; align-self: center; border-radius: 50%; background: var(--naranja); }
.menu-idioma > *:hover { background: var(--sup3); color: var(--t1); }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.menu-movil { position: fixed; inset: 0; z-index: 35; padding: calc(var(--barra-h) + 24px) var(--margen) 32px; background: rgba(8, 8, 8, .96); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transition: opacity .3s var(--e-sal), visibility 0s .3s; }
[data-tema="claro"] .menu-movil { background: rgba(247, 247, 247, .97); }
.menu-movil[data-abierto="true"] { opacity: 1; visibility: visible; transition: opacity .3s var(--e-sal); }
.menu-movil nav { display: flex; flex-direction: column; gap: 4px; }
.menu-movil nav a { font-size: 2.4rem; font-weight: 600; letter-spacing: -.035em; padding: 6px 0; border-bottom: 1px solid var(--filete); transform: translateY(10px); opacity: 0; transition: transform .5s var(--e-quint), opacity .4s; }
.menu-movil[data-abierto="true"] nav a { transform: none; opacity: 1; }
.menu-movil[data-abierto="true"] nav a:nth-child(2) { transition-delay: 40ms; }
.menu-movil[data-abierto="true"] nav a:nth-child(3) { transition-delay: 80ms; }
.menu-movil[data-abierto="true"] nav a:nth-child(4) { transition-delay: 120ms; }
.menu-movil nav a[aria-current="page"] { color: var(--naranja-texto); }

/* ---------- Héroe de portada ---------- */
.heroe { position: relative; min-height: 100svh; min-height: max(100svh, 600px); display: grid; place-items: center; padding: calc(var(--barra-h) + 24px) var(--margen) 110px; }
.heroe, .cierre { overflow-x: clip; }
.heroe-centro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; max-width: 1200px; }
.heroe .titular-xxl { margin-top: -6px; }
.heroe .entradilla { max-width: 34ch; }
.heroe .acciones { justify-content: center; margin-top: 6px; }
.heroe-pie { position: absolute; left: 0; right: 0; bottom: 22px; padding: 0 var(--margen); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.hp-izq { display: flex; align-items: center; gap: 6px 18px; justify-self: start; flex-wrap: wrap; }
.heroe-pie .enlace-flecha { justify-self: end; color: var(--t2); }
.bajar { visibility: hidden; width: 1px; height: 1px; }

/* ---------- Contenedores ---------- */
.contenedor { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); }

/* ---------- Portada · el vuelo por dentro de la Vault (escena por pasos: la intro y una región por paso) ----------
   Cada paso se ve entero; al llegar, lo que estaba sale hacia donde va el gesto y lo nuevo entra (por tiempo). */
.viaje-escena { display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr); padding: calc(var(--barra-h) + 24px) var(--margen) 32px; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.viaje-intro, .regiones { grid-area: 1 / 1; min-height: 0; }
.viaje-intro { align-self: center; width: min(560px, 46vw); display: flex; flex-direction: column; gap: 24px; }
.viaje-intro .cuerpo { max-width: 42ch; }
.regiones { display: grid; }
.region { grid-area: 1 / 1; align-self: center; width: min(560px, 44vw); display: flex; flex-direction: column; gap: 12px; }
.region-nombre { font-size: clamp(2.5rem, 4.8vw, 4.5rem); font-weight: 560; letter-spacing: -.04em; line-height: 1; }
.region-desc { font-size: 1.0625rem; color: var(--t-apoyo); margin-bottom: 16px; max-width: 40ch; }
/* lo que no está en su paso: transparente y sin recibir clics (sigue pudiendo tomar el foco: base.js lleva a su paso) */
.js:not(.rm) .viaje-intro, .js:not(.rm) .region { opacity: 0; pointer-events: none; transform: translate3d(0, 32px, 0);
  transition: opacity .4s var(--e-sal), transform .55s var(--e-quint); }
.js:not(.rm) .viaje-intro[data-lado="arriba"], .js:not(.rm) .region[data-lado="arriba"] { transform: translate3d(0, -32px, 0); }
.js:not(.rm) .viaje-intro.activo, .js:not(.rm) .region.activo { opacity: 1; pointer-events: auto; transform: none;
  transition: opacity .7s var(--e-sal) .3s, transform .9s var(--e-quint) .3s; }
/* el índice: seis nombres; el de la región que se ve, en blanco */
.viaje-indice { grid-row: 2; padding-top: 28px; }
.js:not(.rm) .viaje-indice { opacity: 0; transition: opacity .5s var(--e-sal); }
.js:not(.rm) .viaje-indice.visto { opacity: 1; }
.viaje-indice ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.viaje-indice li { padding-top: 14px; border-top: 1px solid rgba(237, 237, 237, .14); font-size: .875rem; color: var(--t2); white-space: nowrap; transition: color .4s, border-color .4s; }
.viaje-indice li.pasado { border-top-color: rgba(237, 237, 237, .34); }
.viaje-indice li.activo { color: var(--t1); border-top-color: var(--t1); }
[data-tema="claro"] .viaje-indice li { border-top-color: rgba(15, 15, 15, .14); }
[data-tema="claro"] .viaje-indice li.pasado { border-top-color: rgba(15, 15, 15, .34); }
[data-tema="claro"] .viaje-indice li.activo { border-top-color: var(--t1); }
.viaje-salida { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; }

/* Gráficos de región: tarjetas sobrias (radio 16, filete del 7 %, sin sombra ni brillo); se dibujan al llegar a su paso */
.g { position: relative; padding: 22px 24px 20px; border-radius: var(--r-tarjeta); background: rgba(14, 14, 14, .92); border: 1px solid rgba(237, 237, 237, .07); display: flex; flex-direction: column; gap: 16px; }
[data-tema="claro"] .g { background: rgba(255, 255, 255, .94); border-color: var(--filete); }
.g-cab { display: flex; flex-direction: column; gap: 4px; }
.g-tit { font-size: 1.0625rem; font-weight: 560; letter-spacing: -.015em; }
.g-sub { font-size: .9375rem; color: var(--t-apoyo); line-height: 1.5; }
.g-nota { font-size: .875rem; color: var(--t2); line-height: 1.45; }
.g-svg { width: 100%; height: auto; overflow: visible; }
.g-barras ul { display: flex; flex-direction: column; gap: 14px; }
.g-barras li { display: grid; gap: 8px; font-size: .9375rem; color: var(--t-apoyo); }
.g-barras li i { display: block; height: 4px; border-radius: 2px; background: rgba(237, 237, 237, .42); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--e-quint) calc(var(--i) * 100ms + .4s); width: calc(var(--v) * 100%); }
[data-tema="claro"] .g-barras li i { background: rgba(15, 15, 15, .32); }
.g-barras li.destacada { color: var(--t1); }
.g-barras li.destacada i { background: var(--t1); }
.activo .g-barras li i { transform: scaleX(1); }
.cal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.cal-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: .8125rem; text-align: center; color: var(--t2); font-variant-numeric: tabular-nums; }
.cal-mes span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; opacity: 0; transition: opacity .4s var(--e-sal) calc(var(--i) * 14ms + .35s); }
.cal-mes span.dia-sem { font-size: .75rem; }
.cal-mes span.marca-fomc { background: var(--t1); color: var(--lienzo); font-weight: 600; }
.activo .cal-mes span { opacity: 1; }
.cal-ficha { display: flex; flex-direction: column; gap: 6px; }
.cal-fecha { display: flex; align-items: baseline; gap: 10px; }
.cal-fecha span { font-size: 2.5rem; font-weight: 560; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.cal-fecha small { font-size: .875rem; color: var(--t2); }
.cal-evento { font-size: 1.0625rem; font-weight: 600; }
.cal-que { font-size: .875rem; color: var(--t-apoyo); }
.cal-vault { font-size: .875rem; color: var(--t2); }
.red-lineas path { fill: none; stroke: rgba(237, 237, 237, .45); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--e-mov) calc(var(--i) * 120ms + .4s); }
[data-tema="claro"] .red-lineas path { stroke: rgba(15, 15, 15, .4); }
.red-nodos circle { fill: var(--t1); opacity: 0; transition: opacity .4s calc(var(--i) * 120ms + .4s); }
.red-nodos .red-centro { transition-delay: 1.1s; }
.red-textos text { font-family: var(--sans); font-size: 13px; fill: var(--t2); opacity: 0; transition: opacity .5s .8s; }
.red-textos .red-ent { fill: var(--t1); font-weight: 600; }
.activo .red-lineas path { stroke-dashoffset: 0; }
.activo .red-nodos circle, .activo .red-textos text { opacity: 1; }
.redes-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.redes-fila p { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; color: var(--t2); }
.redes-fila b { font-size: 1.0625rem; color: var(--t1); font-weight: 600; }
.muestra { display: grid; grid-template-columns: repeat(12, 6px); gap: 4px; }
.muestra i { width: 6px; height: 6px; border-radius: 50%; background: rgba(237, 237, 237, .14); transition: background-color .3s calc(var(--i) * 24ms + .4s); }
[data-tema="claro"] .muestra i { background: rgba(15, 15, 15, .12); }
.activo .muestra i.si { background: var(--t1); }
/* antes chips: ahora texto seguido */
.chips { display: flex; flex-wrap: wrap; font-size: .875rem; line-height: 1.5; color: var(--t2); }
.chips li + li::before { content: '·'; margin: 0 8px; }
.evid { display: flex; flex-direction: column; font-size: .875rem; }
.evid-f { display: grid; grid-template-columns: 1fr 1fr .8fr 1.1fr; gap: 8px; padding: 7px 0; color: var(--t-apoyo); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .5s var(--e-sal), transform .6s var(--e-quint); transition-delay: calc(var(--i, 0) * 140ms + .4s); }
.evid-f span:first-child { color: var(--t1); }
.evid-cab { color: var(--t2); font-size: .8125rem; opacity: 1; transform: none; padding-top: 0; }
.evid-cab span:first-child { color: var(--t2); }
.activo .evid-f { opacity: 1; transform: none; }
.est { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.est-ok { background: var(--t1); }
.est-estimado { background: var(--estimado); }
.est-vacio { border: 1px solid var(--t2); }
.evid-f span:last-child { white-space: nowrap; }
/* Los modos y «Qué puede hacer / Lo que no hace»: listas limpias, sin filetes */
.modos { display: flex; flex-direction: column; gap: 14px; }
.modos div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.modos dt { font-weight: 600; }
.modos dd { color: var(--t-apoyo); font-size: .9375rem; line-height: 1.5; }
.puede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.puede h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; }
.puede ul { display: flex; flex-direction: column; gap: 8px; }
.puede li { font-size: .9375rem; color: var(--t-apoyo); padding-left: 18px; position: relative; line-height: 1.45; }
.puede li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--t2); }
/* La ventana del Chat: marco limpio, sin luz ni brillo; entra una vez, por tiempo, inclinada y se endereza (la de la 01) */
.ventana-escena { perspective: 1800px; perspective-origin: 50% 30%; display: grid; place-items: center; min-width: 0; }
.ventana { position: relative; width: 100%; max-width: 1180px; transform-origin: 50% 70%; }
.js:not(.rm) .chat-ventana { opacity: 0; transform: translate3d(0, 6vh, 0) rotateX(18deg) scale(.95); transition: opacity .9s var(--e-sal), transform 1.4s var(--e-quint); }
.js:not(.rm) .chat-ventana.dentro { opacity: 1; transform: none; }
.ventana-marco { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-ventana); overflow: hidden; background: #0A0A0A; border: 1px solid rgba(237, 237, 237, .1); }
[data-tema="claro"] .ventana-marco { border-color: rgba(15, 15, 15, .14); }
.ventana figcaption { margin-top: 14px; text-align: right; }

/* ---------- Portada · avances: una pantalla cada uno ---------- */
.avance { position: relative; }
.avance > .contenedor { width: 100%; }
.av-rejilla { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.av-anillo { position: relative; width: min(58vh, 38vw); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.av-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.an-fondo { fill: none; stroke: rgba(237, 237, 237, .14); stroke-width: .5; }
[data-tema="claro"] .an-fondo { stroke: rgba(15, 15, 15, .14); }
/* el anillo se llena hasta el 80 % por tiempo al llegar (portada.js pone .lleno) */
.an-valor { fill: none; stroke: var(--t1); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s var(--e-quint); }
.an-valor.lleno { stroke-dashoffset: 20; }
.av-cifra { text-align: center; }
.av-num { font-size: clamp(4.5rem, 10vw, 9rem); font-weight: 600; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
#av-num { display: inline-block; min-width: 1.2em; text-align: right; }
.av-num .pc { font-size: .42em; color: var(--t2); letter-spacing: -.02em; }
.av-lema { margin-top: 12px; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 560; color: var(--t1); line-height: 1.25; }
.av-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.av-texto .cuerpo { color: var(--t-apoyo); }
.av-rejilla-inv .av-texto { grid-column: 1; }
.av-hueco { min-height: 50vh; }
.etiqueta-nodo { position: fixed; left: 0; top: 0; z-index: 12; pointer-events: none; transform: translate3d(var(--ex, -999px), var(--ey, -999px), 0); opacity: var(--eo, 0); transition: opacity .3s; }
.etiqueta-nodo.izq code { transform: translate(calc(-100% - 14px), -50%); }
.etiqueta-nodo code { display: block; transform: translate(14px, -50%); font-size: .8125rem; color: var(--t1); padding: 5px 10px; border-radius: 8px; background: rgba(14, 14, 14, .9); border: 1px solid rgba(237, 237, 237, .16); white-space: nowrap; }
[data-tema="claro"] .etiqueta-nodo code { background: rgba(255, 255, 255, .94); border-color: rgba(15, 15, 15, .16); }

/* ---------- Cierre ---------- */
.cierre { position: relative; min-height: calc(100vh - var(--alto-pie, 0px)); min-height: calc(100svh - var(--alto-pie, 0px)); display: grid; place-items: center; padding: calc(var(--barra-h) + 4vh) 0 6vh; text-align: center; }
.cierre-in { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cierre .acciones { justify-content: center; }

/* ---------- Pie ---------- */
.pie { background: var(--lienzo); padding: 0 0 28px; margin-top: 0; }
.pie-horizonte { height: 1px; background: rgba(237, 237, 237, .08); }
.pie-horizonte i { display: none; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 48px; }
.pie-marca { display: flex; flex-direction: column; gap: 14px; }
.pie-marca p { color: var(--t3); font-size: .875rem; }
.pie h2 { font-size: .875rem; font-weight: 500; color: var(--t1); margin-bottom: 16px; }
.pie ul { display: flex; flex-direction: column; gap: 10px; }
.pie ul a { font-size: .875rem; color: var(--t2); transition: color .2s; }
.pie ul a:hover { color: var(--t1); }
.pie .pronto { color: var(--t3); font-size: .78rem; margin-left: 4px; }
.pie-base { border-top: 1px solid rgba(237, 237, 237, .06); padding-top: 20px; }
.pie-base p { font-size: .8125rem; color: var(--t2); }

/* ---------- Por qué la Vault: todo su estilo va junto, en su bloque («Por qué la Vault · segunda vuelta», más abajo) ---------- */
.oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Comunes de datos ---------- */
.sube { color: var(--sube); }
.baja { color: var(--baja); }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes parpadeo { 50% { opacity: 0; } }

/* ---------- Conecta tu IA · héroe (una pantalla; la Vault a la derecha, entera y clara) ---------- */
/* cada sección es una .pantalla (columna flexible): el contenedor, a todo el ancho de la rejilla */
.ci-heroe > .contenedor, .funciona > .contenedor, .tres > .contenedor, .pedir > .contenedor, .refs > .contenedor, .api > .contenedor, .reutiliza > .contenedor { width: 100%; }
.ci-izq { max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.ci-izq .entradilla { max-width: 42ch; }
.ci-izq .acciones { margin-top: 4px; }

/* ---------- Conecta · funcionará con: los clientes convergen en la Vault, que es el destino ---------- */
.fun-rejilla { display: flex; flex-direction: column; gap: clamp(28px, 4.5vh, 44px); }
.fun-cab { display: flex; flex-direction: column; gap: 12px; }
.fun-cab .titular-m { color: var(--t2); font-weight: 500; }
.fun-mapa { position: relative; display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; }
.clientes { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.clientes li { font-size: clamp(2.2rem, 5.6vw, 5.4rem); font-weight: 600; letter-spacing: -.042em; line-height: 1.02; color: var(--t3); transition: color .7s var(--e-sal); }
.clientes li span { display: inline-block; }
.clientes .cualquiera { font-size: clamp(1.1rem, 1.8vw, 1.6rem); letter-spacing: -.012em; font-weight: 500; margin-top: 16px; }
.fun-mapa.visto .clientes li { color: var(--t1); }
.fun-mapa.visto .clientes li:nth-child(2) { transition-delay: .2s; } .fun-mapa.visto .clientes li:nth-child(3) { transition-delay: .4s; } .fun-mapa.visto .clientes li:nth-child(4) { transition-delay: .6s; color: var(--t-apoyo); }
.fun-lineas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fun-lineas path { fill: none; stroke: rgba(237, 237, 237, .24); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--e-mov) .3s; }
.fun-lineas path:nth-child(2) { transition-delay: .42s; } .fun-lineas path:nth-child(3) { transition-delay: .54s; } .fun-lineas path:nth-child(4) { transition-delay: .66s; }
.fun-mapa.visto .fun-lineas path { stroke-dashoffset: 0; }
.fun-destino { grid-column: 3; display: flex; align-items: center; gap: 4px; position: relative; z-index: 1; }
.fd-hueco { position: relative; flex: none; width: clamp(200px, 18vw, 264px); aspect-ratio: 1; }   /* aquí la cámara pone la Vault */
.fd-nodo { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; }
.fun-destino p { opacity: 0; transform: translate3d(10px, 0, 0); transition: opacity .6s var(--e-sal) 1.2s, transform .8s var(--e-quint) 1.2s; }
.fun-mapa.visto .fun-destino p { opacity: 1; transform: none; }
.fun-destino b { display: block; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.fun-destino p span { color: var(--t-apoyo); font-size: .9375rem; }

/* ---------- Conecta · tres pasos: el número en texto; una línea fina recorre los tres, uno tras otro ---------- */
.tres .titular-l { margin-bottom: clamp(36px, 6vh, 64px); }
.tres-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.tres-lista li { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--filete-2); }
.tres-lista li::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--t2); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--e-mov); }
.tres-lista.visto li::before { transform: scaleX(1); }
.tres-lista.visto li:nth-child(1)::before { transition-delay: .2s; } .tres-lista.visto li:nth-child(2)::before { transition-delay: 1.1s; } .tres-lista.visto li:nth-child(3)::before { transition-delay: 2s; }
.tp-num { font-size: .9375rem; font-weight: 500; color: var(--t2); line-height: 1; }
.tres-lista h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 560; letter-spacing: -.02em; line-height: 1.25; }
.tres-lista li > .meta { color: var(--t2); }
/* en producción (8-oct-2026): los cuatro renglones de cada paso, alineados entre las tres columnas (un titular de dos líneas, como
   el del paso 3 en inglés, no descuadra las demos) */
@media (min-width: 761px) { .tres-lista { row-gap: 14px; } .tres-lista li { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; } .tres-lista li > * { min-width: 0; } }
.tp-demo { border: 1px solid var(--filete); border-radius: 12px; background: var(--panel); padding: 10px 10px 10px 14px; display: flex; align-items: center; gap: 10px; min-height: 86px; }
.tp-copia code { font-size: .875rem; color: var(--t1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copiar { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--sup3); font-size: .875rem; font-weight: 500; color: var(--t1); flex: none; transition: background-color .2s, color .2s, transform .16s var(--e-sal); }
.copiar svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.copiar:active { transform: scale(.97); }
.copiar.copiado { color: var(--sube); }
@media (hover: hover) and (pointer: fine) { .copiar:hover { background: #262626; } }
.tp-campo { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; }
.tp-campo > .meta { font-size: .875rem; }
.tp-input { display: flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(237, 237, 237, .2); background: var(--lienzo); font-family: var(--mono); font-size: .8125rem; overflow: hidden; }
.tp-pegado { white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(29) 1.3s; }
.tres-lista.visto .tp-pegado { clip-path: inset(0 0 0 0); }
.tp-cursor { flex: none; width: 1px; height: 16px; margin-left: 1px; background: var(--t1); animation: parpadeo 1s steps(1) infinite; }
.tp-cuenta { justify-content: space-between; flex-wrap: wrap; }
.tp-boton { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--sup3); font-size: .875rem; font-weight: 500; }
.tp-ok { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--sube); opacity: 0; transition: opacity .5s 2.4s; }
.tres-lista.visto .tp-ok { opacity: 1; }
.tp-ok i { width: 6px; height: 6px; border-radius: 50%; background: var(--sube); }

/* ---------- Conecta · qué puede pedir: la lista a la izquierda, lo que devuelve a la derecha; la Vault, bajo el titular ---------- */
.pedir-rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.pedir-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pedir-hueco { flex: 1 1 auto; align-self: stretch; min-height: 200px; margin-top: 12px; }   /* aquí la cámara pone la Vault */
.solo-lectura { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 1rem; color: var(--t-apoyo); line-height: 1.5; max-width: 34ch; }
.solo-lectura svg { flex: none; margin-top: 3px; fill: none; stroke: var(--t2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.explorador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border: 1px solid var(--filete); border-radius: var(--r-tarjeta); overflow: hidden; background: var(--panel); min-height: 460px; }
.ex-lista { display: flex; flex-direction: column; border-right: 1px solid var(--filete); }
.ex-lista button { flex: 1 1 auto; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 20px; border-bottom: 1px solid var(--filete); position: relative; transition: background-color .2s; }
.ex-lista button:last-child { border-bottom: 0; }
.ex-lista code { font-size: .8125rem; color: var(--t2); transition: color .2s; }
.ex-lista button > span { font-size: .9375rem; color: var(--t2); line-height: 1.4; transition: color .2s; }
.ex-lista button[aria-selected="true"] { background: var(--sup2); }
.ex-lista button[aria-selected="true"] code, .ex-lista button[aria-selected="true"] > span { color: var(--t1); }
.ex-lista button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--t1); transform: scaleY(0); transition: transform .3s var(--e-sal); }
.ex-lista button[aria-selected="true"]::before { transform: scaleY(1); }
.ex-lista.auto button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(237, 237, 237, .32); transform-origin: left; animation: llenar 3.6s linear both; }
@keyframes llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) { .ex-lista button:hover { background: rgba(237, 237, 237, .035); } .ex-lista button[aria-selected="true"]:hover { background: var(--sup2); } }
.ex-vista { position: relative; padding: 24px; min-width: 0; }
.ex-panel { display: flex; flex-direction: column; gap: 16px; animation: panel-in .35s var(--e-sal); }
@keyframes panel-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
.xv-pide code { display: inline-block; font-size: .8125rem; color: var(--t-apoyo); padding: 6px 10px; border-radius: 8px; background: var(--sup2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xv-campo { display: flex; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--filete-2); border-radius: 10px; font-size: 1rem; }
.xv-campo i { width: 1px; height: 18px; margin-left: 2px; background: var(--t1); animation: parpadeo 1s steps(1) infinite; }
.xv-fila { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; background: var(--sup2); margin-top: 8px; }
.xv-fila b { font-weight: 600; }
.xv-precio { font-size: 1rem; color: var(--t2); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.xv-precio b { font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; color: var(--t1); line-height: 1; }
.xv-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 4px; }
.xv-dl dt { font-size: .875rem; color: var(--t2); }
.xv-dl dd { font-weight: 600; font-size: 1.125rem; }
.xv-fuente { font-size: .875rem; color: var(--t2); }
.xv-panel li { display: grid; grid-template-columns: 1.1fr 1.3fr auto 4.8em; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--filete); font-size: .9375rem; }
.xv-panel li > span:first-child { font-weight: 600; }
.xv-panel b { font-weight: 600; text-align: right; }
.xv-panel li > :last-child { text-align: right; }
.xv-est { color: var(--t2); font-size: .875rem; }
.xv-comp { width: 100%; height: auto; }
.xv-comp path { fill: none; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 1.3s var(--e-mov) forwards; }
.xv-comp .c1 { stroke: var(--t1); } .xv-comp .c2 { stroke: #9A9A9A; animation-delay: .15s; } .xv-comp .c3 { stroke: #565656; animation-delay: .3s; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.xv-ley { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--t2); }
.xv-ley span { width: 14px; height: 2px; border-radius: 1px; background: var(--t1); margin-left: 6px; }
.xv-ley .l2 { background: #9A9A9A; } .xv-ley .l3 { background: #565656; }
.xv-noticias li { display: grid; grid-template-columns: 5.4em 1fr; gap: 3px 12px; padding: 10px 0; border-bottom: 1px solid var(--filete); font-size: .9375rem; }
.tono { grid-row: span 2; align-self: start; font-size: .875rem; font-weight: 500; }
.tono-alza { color: var(--sube); } .tono-neutro { color: var(--t2); } .tono-baja { color: var(--baja); }
.xv-personas li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--filete); font-size: .9375rem; }
.xv-cara { width: 36px; height: 36px; border-radius: 50%; background: var(--sup3); display: grid; place-items: center; color: var(--t2); font-weight: 600; }
.xv-personas small { display: block; font-size: .875rem; }
.xv-panel .meta, .xv-noticias .meta, .xv-personas .meta, .xv-fila .meta { color: var(--t2); }

/* ---------- Conecta · referencias: el titular arriba; la respuesta de ejemplo y sus tres notas, una al lado de otra.
   Dos bloques (.refs-bloque): en escritorio no cuentan (display: contents) y en móvil son dos paradas ---------- */
.refs-rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(28px, 4.5vh, 44px); align-items: center; }
.refs-bloque { display: contents; }
.refs-cab { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.refs-cab .cuerpo { color: var(--t-apoyo); }
.an-codigo { grid-column: 1; border: 1px solid var(--filete); border-radius: var(--r-tarjeta); background: var(--panel); padding: 18px 0 20px; overflow: hidden; min-width: 0; }
.an-tit { padding: 0 20px 12px; }
.an-codigo pre { margin: 0; font-family: var(--mono); font-size: clamp(.78rem, .94vw, .875rem); line-height: 1.9; overflow-x: auto; }
.an-codigo pre code { display: flex; flex-direction: column; }   /* una línea por campo (sin las líneas en blanco de los saltos) */
.ln { display: block; padding: 0 20px 0 18px; border-left: 2px solid transparent; transition: background-color .3s, border-color .3s; }
.an-codigo .k { color: var(--t2); } .an-codigo .v, .an-codigo .n { color: var(--t1); }
.anatomia[data-foco="a"] .ln[data-r="a"], .anatomia[data-foco="b"] .ln[data-r="b"], .anatomia[data-foco="c"] .ln[data-r="c"] { background: rgba(237, 237, 237, .055); border-left-color: rgba(237, 237, 237, .7); }
.an-notas { grid-column: 2; display: flex; flex-direction: column; gap: 6px; }
.an-notas li { display: flex; padding: 14px 0 14px 20px; border-left: 2px solid var(--filete-2); transition: border-color .3s; cursor: default; }
.an-marca { display: none; }
.an-notas h3 { font-size: 1.25rem; font-weight: 560; letter-spacing: -.02em; margin-bottom: 6px; transition: color .3s; }
.an-notas p { color: var(--t2); font-size: .9375rem; line-height: 1.55; transition: color .3s; }
.anatomia[data-foco] .an-notas h3 { color: var(--t2); }
.anatomia[data-foco="a"] .an-notas li[data-r="a"], .anatomia[data-foco="b"] .an-notas li[data-r="b"], .anatomia[data-foco="c"] .an-notas li[data-r="c"] { border-left-color: rgba(237, 237, 237, .7); }
.anatomia[data-foco="a"] .an-notas li[data-r="a"] h3, .anatomia[data-foco="b"] .an-notas li[data-r="b"] h3, .anatomia[data-foco="c"] .an-notas li[data-r="c"] h3 { color: var(--t1); }
.anatomia[data-foco="a"] .an-notas li[data-r="a"] p, .anatomia[data-foco="b"] .an-notas li[data-r="b"] p, .anatomia[data-foco="c"] .an-notas li[data-r="c"] p { color: var(--t-apoyo); }
.desplegable { grid-column: 1 / -1; border-top: 1px solid var(--filete); }
.desplegable summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 4px; font-weight: 500; color: var(--t-apoyo); }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .3s var(--e-sal); }
.desplegable[open] summary svg { transform: rotate(45deg); }
.desplegable p { padding: 10px 0 4px; color: var(--t2); max-width: 70ch; }

/* ---------- Conecta · la API, en segundo plano: el texto y la petición de ejemplo, sin caja alrededor ---------- */
.api-tarjeta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.api-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.api-texto .titular-m { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.api-texto .cuerpo { color: var(--t-apoyo); }
.api-codigo { margin: 0; padding: 22px 24px; border-radius: var(--r-tarjeta); background: var(--panel); border: 1px solid var(--filete); font-family: var(--mono); font-size: .875rem; line-height: 1.8; color: var(--t2); overflow-x: auto; white-space: pre; min-width: 0; }
.api-codigo .m { color: var(--t1); font-weight: 600; } .api-codigo .v { color: var(--t1); } .api-codigo .c { color: var(--t2); }

/* ---------- Conecta · reutiliza ---------- */
.reu-in { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.reu-in > * { max-width: 720px; }   /* el texto, a la izquierda de la rejilla; la Vault, a la derecha */
.reu-in .cuerpo { color: var(--t-apoyo); }

/* ---------- Portada solo con el héroe (?solo=heroe) ---------- */
.solo-heroe #recorrido { display: none; }
/* la última parada: el pie y, encima, un hueco para la Vault (sin cortar el héroe a medias) */
.solo-heroe main::after { content: ''; display: block; height: calc(100vh - var(--alto-pie, 0px)); height: calc(100svh - var(--alto-pie, 0px)); }

/* ---------- Paso entre páginas ---------- */
.saliendo main, .saliendo .pie, .saliendo #boveda { opacity: 0; transition: opacity .28s cubic-bezier(.4, 0, .2, 1); }

/* ---------- Pantallas medianas y móvil ---------- */
@media (max-width: 1080px) {
  .nav a { padding: 8px 9px; font-size: .86rem; }
}
@media (max-width: 920px) {
  .nav, .barra-der .idioma, .barra-der [data-tema-boton] { display: none; }
  .ctl-menu { display: inline-flex; margin-left: 2px; }
  .barra-der { margin-left: auto; }
  .boton-barra { height: 36px; padding: 0 14px; font-size: .86rem; }
  .ventana-escena { align-self: start; }
}
/* Con el nombre de la Vault («ChatAnalytica Finance», M3 9-oct-2026) la barra del móvil no cabe con «Menú» escrito: el menú, solo con su
   icono (la palabra sigue para el lector de pantalla) y la marca un poco más compacta. */
@media (max-width: 440px) {
  html[data-puerta] .barra-in { gap: 12px; }
  html[data-puerta] .barra .marca { gap: 8px; font-size: 1rem; }
  html[data-puerta] .barra .marca-logo { width: 24px; height: 24px; }
  html[data-puerta] .boton-barra { padding: 0 12px; margin-left: 4px; }
  html[data-puerta] .ctl-menu { padding: 0 8px; }
  html[data-puerta] .ctl-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* en los más estrechos (320 px), el Chat queda en el menú y en el héroe */
@media (max-width: 359px) { html[data-puerta] .boton-barra { display: none; } }
@media (max-width: 760px) {
  :root { --barra-h: 56px; }
  .heroe { padding-bottom: 120px; }
  .heroe-centro { gap: 22px; }
  .heroe-pie { grid-template-columns: 1fr auto; bottom: 18px; }
  .heroe-pie .bajar { display: none; }
  .hp-izq { flex-direction: column; align-items: flex-start; }
  .hp-izq .ctl-texto { padding-left: 0; border-left: 0; }
  .heroe .acciones { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
  /* el vuelo en móvil: el índice (seis tramos) arriba, la Vault en la mitad de arriba y cada paso entero abajo */
  .viaje-escena { grid-template: auto minmax(0, 1fr) / minmax(0, 1fr); padding: calc(var(--barra-h) + 12px) var(--margen) max(20px, 3svh); }
  .viaje-indice { grid-row: 1; padding-top: 0; }
  .viaje-indice ol { gap: 6px; }
  .viaje-indice li { font-size: 0; line-height: 0; padding-top: 0; height: 0; border-top-width: 2px; }
  .viaje-intro, .regiones { grid-row: 2; align-self: end; }
  .viaje-intro { width: auto; gap: 16px; }
  .region { width: auto; align-self: end; gap: 8px; }
  .region-desc { font-size: 1rem; margin-bottom: 8px; }
  .g { padding: 16px 16px 14px; gap: 12px; }
  .g-sub { font-size: .875rem; }
  .g-barras ul { gap: 10px; }
  .cal { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cal-mes { max-width: 260px; }
  .g-red .g-svg { max-height: 160px; }
  .red-textos text { font-size: 16px; }
  .viaje-salida { margin-top: 8px; gap: 10px 20px; }
  .av-rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .av-anillo { width: min(68vw, 34svh); }
  .av-hueco { min-height: 26svh; order: -1; }
  /* el pie, compacto: cabe con el cierre en la última pantalla */
  .pie-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; padding-top: 28px; padding-bottom: 20px; }
  .pie-marca { display: none; }
  .pie h2 { margin-bottom: 10px; font-size: .8125rem; }
  .pie ul { gap: 7px; }
  .pie ul a { font-size: .8125rem; }
  .pie .pronto { display: block; margin: 0; }
  .pie-base { padding-top: 14px; }
  .cierre { padding: calc(var(--barra-h) + 16px) 0 28px; }
  .cierre .acciones { flex-direction: column; align-items: stretch; width: min(100%, 320px); }

  /* Conecta tu IA en móvil: el héroe abajo (la Vault arriba, en el hueco); «Reutiliza» arriba (la Vault debajo);
     cada sección cabe en una pantalla salvo las referencias, que son dos paradas de una pantalla cada una */
  .ci-heroe { justify-content: flex-end; }
  .ci-izq { gap: 20px; }
  .fun-mapa { grid-template-columns: minmax(0, 1fr); }
  .fun-lineas { display: none; }
  .fun-destino { grid-column: 1; margin-top: 10px; gap: 14px; }
  .fd-hueco { width: 112px; }
  .tres-lista { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .tres-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px 10px; padding-top: 16px; }
  .tres-lista li > .tp-demo, .tres-lista li > .meta { grid-column: 1 / -1; }
  .tres-lista h3 { font-size: 1.125rem; }
  .tp-demo { min-height: 54px; }
  .pedir-rejilla, .api-tarjeta { grid-template-columns: minmax(0, 1fr); }
  .pedir-rejilla { gap: 24px; }
  .pedir-cab { gap: 16px; }
  .pedir-hueco { display: none; }
  .explorador { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ex-lista { border-right: 0; border-bottom: 1px solid var(--filete); flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .ex-lista button { flex: none; min-width: 168px; justify-content: flex-start; padding: 12px 16px; border-bottom: 0; border-right: 1px solid var(--filete); }
  .ex-lista button::before { top: auto; left: 0; right: 0; width: auto; height: 2px; transform: scaleX(0); }
  .ex-lista button[aria-selected="true"]::before { transform: scaleX(1); }
  /* los seis paneles en la misma celda: la caja mide lo del más alto y la sección no salta al cambiar de petición
     (los ocultos ocupan su sitio sin verse; pasa por encima del [hidden] de la base) */
  .ex-vista { padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr); }
  .ex-panel { grid-area: 1 / 1; min-width: 0; }
  .ex-vista > .ex-panel[hidden] { display: flex !important; visibility: hidden; animation: none; }
  .ex-panel[hidden] .xv-comp path { animation: none; }
  .xv-precio b { font-size: 2.1rem; }
  .xv-panel li { grid-template-columns: 1fr auto 4.4em; }
  .xv-panel li > .meta { display: none; }
  .refs.pantalla { padding-top: var(--barra-h); padding-bottom: 0; justify-content: flex-start; }
  .refs-rejilla { display: block; }
  .refs-bloque { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 20px 0; }
  .refs-bloque:first-child { min-height: calc(100svh - var(--barra-h) - 8px); }
  .refs-bloque:last-child { min-height: calc(100svh - var(--barra-h) - 16px); }
  .an-codigo pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; line-height: 1.8; }
  .ln { padding: 0 14px 0 12px; }
  .an-notas { gap: 4px; }
  .an-notas li { padding: 12px 0 12px 16px; }
  .an-notas h3 { font-size: 1.125rem; }
  .api-tarjeta { gap: 28px; }
  .api-codigo { white-space: pre-wrap; overflow-wrap: anywhere; padding: 18px 20px; font-size: .8125rem; }
  .reutiliza.pantalla { justify-content: flex-start; padding-top: calc(var(--barra-h) + 7svh); }
}

/* ---------- Movimiento reducido: todo quieto y legible ---------- */
.rm .lineas .l > span, .rm .entra, .rm [data-revela] { transform: none !important; opacity: 1 !important; filter: none !important; transition: none !important; }
/* portada: el vuelo y el Chat en columna, quietos; cada bloque ([data-parada]) ocupa una pantalla con su contenido en el
   centro, para que base.js pare en cada uno entero (el alto deja la parada siguiente a menos de una pantalla) */
.rm .viaje-escena, .rm .chat-escena { display: flex; flex-direction: column; gap: 16px; padding: calc(var(--barra-h) + 16px) var(--margen) 24px; overflow-x: clip; }
.rm .regiones { display: flex; flex-direction: column; gap: 16px; }
.rm .chat-visual { display: contents; }
.rm .viaje-intro, .rm .region, .rm .chat-texto { min-height: calc(100svh - var(--barra-h) - 40px); justify-content: center; align-self: flex-start; }
.rm .chat .ventana-escena, .rm .chat .puede { min-height: calc(100svh - var(--barra-h) - 40px); align-content: center; }
.rm .chat-texto { width: min(560px, 100%); }
.rm .chat .puede { align-self: center; }
.rm .viaje-indice { display: none; }
.rm .etiqueta-nodo { display: none; }

.rm .red-lineas path { stroke-dashoffset: 0; transition: none; }
.rm .tp-pegado { clip-path: none; transition: none; }
.rm .tp-ok, .rm .fun-destino p { opacity: 1; transform: none; transition: none; }
.rm .tres-lista li::before { transform: none; transition: none; }
.rm .fun-lineas path { stroke-dashoffset: 0; transition: none; }
.rm .ex-panel { animation: none; }
.rm .xv-comp path { animation: none; stroke-dashoffset: 0; }
/* Conecta con movimiento reducido: la Vault no va a su hueco (está quieta en el héroe): el destino es un nodo */
.rm .fd-hueco { width: 10px; margin-right: 12px; }
.rm .fd-nodo { left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--t2); }
.rm .pedir-hueco { min-height: 0; }
.rm *, .rm *::before, .rm *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .boton, .boton svg, .enlace-flecha svg { transition: none; }
}


/* ==========================================================================
   Portada: piezas traídas de 02–05 y arreglos (antes css/_portada.css)
   ========================================================================== */
/* ChatAnalytica · 06 «La elegida» · la portada (index.html). Segunda vuelta (8-oct): el vuelo y el Chat son escenas
   por pasos (base.js) animadas por tiempo; sin velos ni brillos; el naranja, solo en la señal y la acción principal.
   Evidencia lleva «Descubrir las Vaults» debajo, en su mismo paso. */

/* =====================================================================================================
   Región «Mercados»: el mapa de puntos del mundo con los índices (de la 05 «Señal», css/senal.css · .m-mapa),
   en el panel de gráfico de la 01 (.g). Sustituye a la serie ilustrativa (.g-linea).
   ===================================================================================================== */
.mm { gap: 14px; }
.mm-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mm-hora { font-size: .875rem; color: var(--t2); }
.mm-mapa { position: relative; padding-top: 30px; }
.mm-mapa canvas { display: block; width: 100%; height: auto; aspect-ratio: 2.05; }
.mm-marca { position: absolute; left: calc(var(--fx, 0) * 100%); top: calc(30px + var(--fy, 0) * (100% - 30px)); }
/* la marca de cada índice: un punto blanco con un aro del color del fondo, sin halo */
.mm-marca i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--t1);
  box-shadow: 0 0 0 3px var(--panel); transform: scale(0); transition: transform .5s var(--e-sal); }
.mm-marca.on i { transform: scale(1); }
.mm-ficha { position: absolute; left: 50%; padding: 6px 9px 7px; border-radius: 10px; background: var(--sup2); border: 1px solid rgba(237, 237, 237, .07);
  white-space: nowrap; opacity: 0; transition: opacity .4s var(--e-sal) .15s, transform .5s var(--e-sal) .15s; }
[data-tema="claro"] .mm-ficha { background: #FFFFFF; border-color: var(--filete); }
.mm-ficha.arriba { top: auto; bottom: 14px; transform: translate(-50%, 6px); }
.mm-ficha.abajo { top: 14px; transform: translate(-50%, -6px); }
.mm-marca.on .mm-ficha { opacity: 1; transform: translate(-50%, 0); }
.mm-ficha small { display: block; font-size: .75rem; color: var(--t2); margin-bottom: 2px; }
.mm-ficha b { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.mm-ficha .mono { display: block; font-size: .75rem; margin-top: 2px; color: var(--t1); }
.mm-barrido { position: absolute; top: 30px; bottom: 0; left: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(237, 237, 237, .7), transparent); opacity: 0; pointer-events: none; will-change: transform; }
.mm-regiones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mm-regiones div { display: grid; gap: 4px; font-size: .875rem; line-height: 1.35; color: var(--t2); min-width: 0; }
.mm-regiones b { font: 500 1rem/1.2 var(--mono); }
@media (max-width: 760px) {
  .mm-mapa { padding-top: 6px; }
  .mm-marca { top: calc(6px + var(--fy, 0) * (100% - 6px)); }
  .mm-barrido { top: 6px; }
  .mm-ficha { display: none; }
  .mm-regiones { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mm-regiones div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .mm-regiones b { font-size: .9375rem; }
}

/* =====================================================================================================
   El Chat de verdad: la escena de la 02 «Consola» (index.html #chat, js/portada-chat.js) con el marco de ventana
   de la 01. Escena por pasos: en escritorio, el texto, la ventana y «Qué puede hacer» a la vez, y cada paso es un
   momento de la ventana; en tableta y móvil (pila), el texto y «Qué puede hacer» tienen su propio paso.
   ===================================================================================================== */
.chat-escena { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: clamp(28px, 3.6vw, 56px); align-items: center;
  padding: calc(var(--barra-h) + 16px) var(--margen) 24px; max-width: calc(1600px + 2 * var(--margen)); margin: 0 auto; }
.chat-texto { display: flex; flex-direction: column; gap: 22px; }
.chat-texto .entradilla { max-width: 34ch; }
.chat-visual { --ancho-v: min(100%, calc((100svh - 400px) * 1.6)); display: flex; flex-direction: column; align-items: center; gap: 28px; min-width: 0; }
.chat .ventana-escena { width: 100%; }
.chat-ventana { width: var(--ancho-v); max-width: none; }
.chat-ventana .ventana-marco { aspect-ratio: 16 / 10; background: var(--lienzo); container: marco / inline-size; }
.chat .titular-l { font-size: clamp(2.1rem, 3.6vw, 3.5rem); }
.chat .puede { width: var(--ancho-v); }
/* las capas entran por tiempo al llegar (portada-chat.js pone .vista); lo que no está en su paso espera arriba o abajo */
.js:not(.rm) .chat-texto, .js:not(.rm) .chat .ventana-escena, .js:not(.rm) .chat .puede { opacity: 0; pointer-events: none; transform: translate3d(0, 24px, 0);
  transition: opacity .4s var(--e-sal), transform .55s var(--e-quint); }
.js:not(.rm) .chat [data-lado="arriba"] { transform: translate3d(0, -24px, 0); }
.js:not(.rm) .chat .vista { opacity: 1; pointer-events: auto; transform: none; transition: opacity .7s var(--e-sal) .2s, transform .9s var(--e-quint) .2s; }
@media (min-width: 1180px) { .js:not(.rm) .chat .puede.vista { transition-delay: .6s; } }

/* Pie de la ventana: la nota de la marca que se ve (frases de la web de antes) y de dónde salen las cifras */
.chat-ventana .chat-pie { margin-top: 14px; display: grid; gap: 6px; text-align: left; }
.chat-notas { display: grid; min-height: 22px; }
.chat-notas li { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 10px; font-size: .9375rem; color: var(--t1); opacity: 0; transform: translate3d(0, 4px, 0);
  transition: opacity .35s var(--e-sal), transform .45s var(--e-quint); }
.chat-notas li.activa { opacity: 1; transform: none; }
.chat-notas b { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--t1); color: var(--lienzo); font: 600 .75rem/1 var(--sans); transform: translateY(-1px); }
.chat-fuente { font-size: .875rem; line-height: 1.45; color: var(--t2); }

/* ---------- El Chat recreado (tokens Consola; densidad del real) ---------- */
.ch-app { position: absolute; inset: 0; display: grid; grid-template-rows: 40px minmax(0, 1fr) 24px; background: var(--lienzo); color: var(--t1); font: 400 12px/1.45 var(--sans); letter-spacing: 0; text-align: left; overflow: hidden; }
.ch-app b, .ch-app strong { font-weight: 600; }
.ch-ico { width: 13px; height: 13px; flex: none; }
.ch-mono { font-family: var(--mono); font-feature-settings: 'zero' 1, 'tnum' 1; }
.ch-t2 { font-size: 11px; color: var(--t2); }
.ch-t3 { color: var(--t3); }
.ch-kbd { display: inline-flex; align-items: center; justify-content: center; height: 16px; min-width: 16px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--filete-2); background: var(--sup2); color: var(--t2); font: 500 10px/12px var(--mono); }
.ch-punto { display: inline-block; width: 5px; height: 5px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px currentColor; }
.ch-cab { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--filete); background: var(--lienzo); font-size: 12px; color: var(--t2); min-width: 0; }
.ch-marca { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); color: var(--t1); white-space: nowrap; }
.ch-marca img { width: 20px; height: 20px; }
.ch-der { margin-left: auto; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.ch-der > span { display: inline-flex; align-items: center; gap: 6px; }
.ch-tema { display: inline-flex; border: 1px solid var(--filete-2); border-radius: 999px; padding: 2px; }
.ch-tema i { width: 20px; height: 16px; border-radius: 999px; display: block; }
.ch-tema i:last-child { background: var(--sup3); }
.ch-cuerpo { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 336px; min-height: 0; }
.ch-rail { border-right: 1px solid var(--filete); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; background: var(--lienzo); overflow: hidden; }
.ch-tile { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; }
.ch-tile .ch-ico { width: 15px; height: 15px; }
.ch-rail hr { width: 32px; border: 0; border-top: 1px solid var(--filete); margin: 6px 0; }
.ch-rail .ch-g { width: 17px; height: 17px; color: var(--t3); }
.ch-centro { position: relative; overflow: hidden; background: var(--panel); border-right: 1px solid var(--filete); min-width: 0; container: centro / inline-size; }
.ch-centro-in { position: relative; will-change: transform; transition: transform 1.2s var(--e-mov); }
.ch-barra-c { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--filete); background: var(--panel); }
.ch-volver { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--naranja); color: var(--sobre-naranja); font: 600 12px/1 var(--sans); white-space: nowrap; }
.ch-volver .ch-kbd { border-color: rgba(0, 0, 0, .28); background: transparent; color: var(--sobre-naranja); }
.ch-pregunta { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--sup2); font: 500 12px/1 var(--sans); color: var(--t1); white-space: nowrap; }
.ch-mig { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--filete); font-size: 12px; color: var(--t1); white-space: nowrap; }
.ch-mig .ch-mono { font-size: 11px; }
.ch-bandera { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #C8102E 0 32%, #fff 34%); flex: none; }
.ch-mod { border-bottom: 1px solid var(--filete); }
.ch-mod-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; font: 600 13px/1 var(--sans); color: var(--t1); }
.ch-reloj { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); color: var(--t3); }
.ch-mod-pie { padding: 9px 14px; border-top: 1px solid var(--filete); font-size: 11px; color: var(--t3); }
.ch-tri { font-size: 8px; margin: 0 2px; }
.ch-ind { display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid var(--filete); }
.ch-ind-g { border-right: 1px solid var(--filete); padding: 12px 14px; display: flex; flex-direction: column; }
.ch-etq-a { font-size: 11px; color: var(--t1); }
.ch-medidor { position: relative; width: 150px; height: 100px; margin: 14px auto 0; flex: none; }
.ch-medidor svg { width: 150px; height: auto; overflow: visible; }
.ch-medidor path { stroke: var(--sup3); transition: stroke .25s; }
.ch-medidor path.on { stroke: var(--tramo); }
.ch-medidor circle { fill: var(--t1); stroke: var(--panel); stroke-width: 2.5; }
.ch-medidor-l { position: absolute; left: 0; right: 0; top: 34px; text-align: center; }
.ch-medidor-l strong { display: block; font: 600 22px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch-medidor-l span { display: block; margin-top: 20px; font: 600 11px/1 var(--sans); color: #8FCE39; }
.ch-ind-d { display: flex; flex-direction: column; min-width: 0; container: ind / inline-size; }
.ch-ind-cel { display: grid; grid-template-columns: 1fr 1fr 1.6fr; border-bottom: 1px solid var(--filete); }
.ch-ind-cel > div { padding: 11px 12px; border-right: 1px solid var(--filete); min-width: 0; }
.ch-ind-cel > div:last-child { border-right: 0; }
.ch-k { font-size: 11px; line-height: 14px; color: var(--t1); display: block; min-height: 28px; }
.ch-v { display: block; margin-top: 6px; font: 600 20px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch-v small { font-size: 11px; font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.ch-amp { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 10px; color: var(--t3); white-space: nowrap; }
.ch-amp b { font: 600 17px/1 var(--sans); color: var(--t1); margin-right: 4px; font-variant-numeric: tabular-nums; }
.ch-amp-barra { display: flex; gap: 2px; height: 4px; margin-top: 8px; }
.ch-amp-barra i { display: block; height: 100%; transform: scaleX(0); transition: transform 1s var(--e-sal); }
.ch-amp-barra .ch-s { background: var(--sube); transform-origin: left; }
.ch-amp-barra .ch-b { background: var(--baja); transform-origin: right; transition-delay: .25s; }
.dibujado .ch-amp-barra i { transform: scaleX(1); }
.ch-lect { padding: 6px 12px 8px; }
.ch-lect li { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; gap: 12px; align-items: center; min-height: 22px; font-size: 11px; color: var(--t1); }
.ch-lect li > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-lect li b { font: 600 11px/1 var(--sans); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-bar { height: 3px; background: var(--sup3); position: relative; overflow: hidden; }
.ch-bar i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--c, #8FCE39); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--e-sal); transition-delay: calc(var(--i, 0) * 70ms + .3s); }
.dibujado .ch-bar i { transform: scaleX(1); }
.ch-tabs { display: flex; gap: 6px; padding: 0 14px 10px; overflow: hidden; }
.ch-tabs span { height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; color: var(--t2); background: var(--sup2); white-space: nowrap; }
.ch-tabs span.ch-on { background: var(--t1); color: var(--lienzo); }
.ch-sub { padding: 0 14px 8px; font-size: 11px; color: var(--t3); }
.ch-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.ch-tabla th { font: 400 11px/1 var(--sans); color: var(--t3); text-align: left; padding: 8px 6px; border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); white-space: nowrap; }
.ch-tabla th:first-child, .ch-tabla td:first-child { padding-left: 14px; }
.ch-tabla th:last-child, .ch-tabla td:last-child { padding-right: 14px; }
.ch-tabla .ch-d { text-align: right; }
.ch-tabla td { padding: 0 6px; height: 38px; border-bottom: 1px solid var(--filete); white-space: nowrap; }
.ch-tabla.ch-comp td { height: 34px; }
.ch-pos { color: var(--t3); font: 500 10px/1 var(--mono); width: 18px; }
.ch-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-id em { font-style: normal; color: var(--t2); overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.ch-mg { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 8px/1 var(--sans); color: var(--t1); background: var(--mg, rgba(255, 255, 255, .08)); flex: none; letter-spacing: -.02em; }
.ch-ult { font: 500 12px/1 var(--mono); font-feature-settings: 'zero' 1, 'tnum' 1; color: var(--t1); text-align: right; }
.ch-ult small { display: block; font: 400 9px/1 var(--sans); color: var(--t3); margin-top: 3px; }
.ch-pct { font: 500 12px/1 var(--mono); font-feature-settings: 'tnum' 1; }
.ch-fecha { font-size: 11px; }
.ch-spark { width: 130px; height: 22px; overflow: visible; display: inline-block; vertical-align: middle; }
.ch-spark path { fill: none; stroke: var(--t2); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; }
.ch-spark .ch-s { fill: var(--sube); } .ch-spark .ch-b { fill: var(--baja); }
.ch-ver-todas { display: flex; align-items: center; gap: 6px; padding: 12px 14px; font-size: 12px; color: var(--naranja-texto); }
.ch-ver-todas .ch-ico { width: 12px; height: 12px; }
.ch-dos { display: grid; grid-template-columns: 1.15fr 1fr; }
.ch-dos > section { min-width: 0; }
.ch-dos > section:first-child { border-right: 1px solid var(--filete); }
.ch-mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 0 10px 10px; }
.ch-mosaico div { min-height: 74px; padding: 9px; background: color-mix(in srgb, var(--sube) calc(var(--t, 10) * 1%), var(--panel)); min-width: 0; opacity: 0; transform: scale(.96);
  transition: opacity .5s var(--e-sal), transform .5s var(--e-sal); transition-delay: calc(var(--i, 0) * 45ms + .1s); }
.dibujado .ch-mosaico div { opacity: 1; transform: none; }
.ch-mosaico b { display: block; font: 600 11px/14px var(--sans); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-mosaico span { display: block; margin-top: 3px; font: 600 13px/1 var(--mono); color: var(--sube); }
.ch-mosaico em { display: block; margin-top: 5px; font-style: normal; font-size: 9px; line-height: 12px; color: var(--t2); }
.ch-ibex { display: grid; grid-template-columns: 1fr 1fr; }
.ch-ibex-g { padding: 12px 14px; border-right: 1px solid var(--filete); }
.ch-cifra { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.ch-cifra strong { font: 600 26px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ch-cifra .ch-mono { font-size: 11px; }
.ch-ibex-g svg { width: 100%; height: 96px; margin-top: 10px; overflow: visible; color: var(--t1); }
.ch-linea { fill: none; stroke: var(--t1); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 1 1; vector-effect: non-scaling-stroke; }
.ch-area { fill: url(#ch-area-ibex); opacity: 0; transition: opacity .8s .6s; }
.dibujado .ch-area { opacity: 1; }
.ch-base { stroke: var(--filete-2); stroke-dasharray: 2 3; fill: none; vector-effect: non-scaling-stroke; }
.ch-fin { fill: var(--sube); }
.ch-eje { font-size: 10px; color: var(--t3); margin-top: 6px; }
.ch-amp-ibex { margin-top: 16px; }
.ch-sub-ibex { padding-top: 12px; }
.ch-nada { padding: 14px; }
[data-mod]:not(.dibujado) .ch-spark path, [data-mod]:not(.dibujado) .ch-linea { stroke-dashoffset: 1; }
[data-mod]:not(.dibujado) .ch-spark circle, [data-mod]:not(.dibujado) .ch-fin { opacity: 0; }
/* la columna del chat: la del Chat vacío, como en las capturas 2x */
.ch-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--lienzo); }
.ch-chat-tabs { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--filete); }
.ch-chat-tabs span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px; color: var(--t2); }
.ch-chat-tabs span.ch-on { background: var(--sup2); color: var(--t1); font-weight: 600; }
.ch-chat-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--filete); font: 600 13px/1 var(--sans); }
.ch-chat-cab > span { display: inline-flex; align-items: center; gap: 8px; }
.ch-mas { width: 26px; height: 26px; border-radius: 50%; background: var(--naranja); display: grid !important; place-items: center; color: #fff; }
.ch-chat-cuerpo { flex: 1; min-height: 0; overflow: hidden; padding: 22px 14px 12px; display: flex; flex-direction: column; gap: 18px; }
.ch-hola .ch-hola-i { width: 26px; height: 26px; color: var(--t1); stroke-width: 1.2; margin-bottom: 14px; }
.ch-hola h4 { font: 500 19px/1.2 var(--sans); letter-spacing: -.015em; color: var(--t1); }
.ch-hola p { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--t2); }
.ch-sug { border: 1px solid var(--filete); }
.ch-sug div { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; font-size: 12px; line-height: 1.3; color: var(--t1); border-bottom: 1px solid var(--filete); }
.ch-sug div:last-child { border-bottom: 0; }
.ch-sug .ch-ico { color: var(--t3); }
.ch-fl { margin-left: auto; color: var(--t3); display: inline-flex; }
.ch-fl .ch-ico { width: 12px; height: 12px; }
.ch-compositor { margin: 0 10px 6px; border: 1px solid var(--filete-2); border-radius: 8px; background: var(--sup2); padding: 10px 12px; }
.ch-ph { font-size: 13px; color: var(--t3); min-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-ph.escrito { color: var(--t1); }
.ch-cursor { display: inline-block; width: 1px; height: 14px; background: var(--t1); vertical-align: -2px; margin-left: 1px; animation: ch-parpadeo 1s steps(1) infinite; }
@keyframes ch-parpadeo { 50% { opacity: 0; } }
.ch-fila-c { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 11px; color: var(--t2); }
.ch-circulo { width: 12px; height: 12px; border: 1.5px solid var(--t2); border-radius: 50%; display: inline-block; }
.ch-env { margin-left: auto; height: 24px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; background: var(--sup3); color: var(--t2); font-weight: 600; }
.ch-aviso { padding: 0 10px 8px; font-size: 9px; color: var(--t3); text-align: center; }
.ch-estado { display: flex; align-items: center; gap: 14px; padding: 0 12px; border-top: 1px solid var(--filete); background: var(--panel); font-size: 10px; color: var(--t3); white-space: nowrap; overflow: hidden; }
.ch-estado > span { display: inline-flex; align-items: center; gap: 5px; }
.ch-r { margin-left: auto; gap: 8px !important; }
.ch-r .ch-kbd { height: 14px; min-width: 14px; font-size: 9px; }
/* el Chat real al llegar (captura 2x) y el barrido que abre el panel de Bolsa */
.ch-llegada { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--lienzo); overflow: hidden; will-change: transform; transition: transform 1.1s var(--e-mov), visibility 0s; }
.ch-llegada.fuera { transform: translate3d(101%, 0, 0); visibility: hidden; transition: transform 1.1s var(--e-mov), visibility 0s 1.1s; }
.ch-llegada img { display: block; width: 100%; height: auto; max-width: none; }
.ch-llegada::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(237, 237, 237, .55); z-index: 1; opacity: 0; transition: opacity .25s; }
.ch-llegada.fuera::before { opacity: 1; }
/* marcas 1–3 sobre la ventana */
.ch-capa-refs { position: absolute; inset: 0; pointer-events: none; }
.ch-ref { position: absolute; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; font: 600 10px/1 var(--mono); background: var(--lienzo); color: var(--t2); border: 1px solid var(--filete-2); z-index: 2;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s; }
.ch-ref.activa { background: var(--t1); color: var(--lienzo); border-color: var(--t1); }

/* La ventana del Chat se adapta a su propio ancho (consultas de contenedor) */
@container marco (max-width: 979px) { .ch-cuerpo { grid-template-columns: 48px minmax(0, 1fr) 264px; } .ch-hola h4 { font-size: 17px; } }
@container marco (max-width: 819px) { .ch-cuerpo { grid-template-columns: 48px minmax(0, 1fr) 240px; } .ch-chat-cuerpo { padding-top: 16px; gap: 14px; } }
@container marco (max-width: 639px) {
  .ch-cuerpo { grid-template-columns: 48px minmax(0, 1fr); }
  .ch-chat { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 100%); z-index: 3; border-left: 1px solid var(--filete); transform: translate3d(101%, 0, 0); transition: transform .7s var(--e-quint); }
  .ch-cuerpo.con-chat .ch-chat { transform: none; }
}
@container marco (max-width: 520px) {
  .ch-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ch-rail, .ch-der > span:not(.ch-tema-env), .ch-pregunta .ch-largo, .ch-r { display: none; }
  .ch-chat { width: 100%; border-left: 0; }
}
@container ind (max-width: 459px) {
  .ch-ind-cel { grid-template-columns: 1fr 1fr; }
  .ch-ind-cel > div:nth-child(2) { border-right: 0; }
  .ch-ind-cel > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--filete); }
  .ch-lect li { grid-template-columns: minmax(0, 1fr) auto; align-items: start; row-gap: 4px; padding: 5px 0; }
  .ch-lect li > span:first-child { white-space: normal; line-height: 14px; }
  .ch-lect li b { line-height: 14px; }
  .ch-lect .ch-bar { grid-column: 1 / -1; }
}
@container centro (max-width: 699px) {
  .ch-ind { grid-template-columns: 190px minmax(0, 1fr); }
  .ch-dos, .ch-ibex { grid-template-columns: minmax(0, 1fr); }
  .ch-dos > section:first-child, .ch-ibex-g { border-right: 0; border-bottom: 1px solid var(--filete); }
}
@container centro (max-width: 559px) {
  .ch-spark { width: 90px; }
  .ch-id em { max-width: 96px; }
}
@container centro (max-width: 399px) {
  .ch-ind { grid-template-columns: minmax(0, 1fr); }
  .ch-ind-g { border-right: 0; border-bottom: 1px solid var(--filete); flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 14px; }
  .ch-medidor { margin: 0 12px 0 0; }
  .ch-tabla .ch-sp-col, .ch-id em, .ch-resultados { display: none; }
  .ch-dos { display: block; }
  .ch-dos > section:first-child { border-bottom: 0; }
}

/* ---------- Tableta y móvil (pila): tres capas en el mismo sitio, una por paso: el texto (con los modos y Abrir Chat),
   la ventana (cinco momentos) y «Qué puede hacer / Lo que no hace» ---------- */
@media (max-width: 1179px) {
  .chat-escena { grid-template: minmax(0, 1fr) / minmax(0, 1fr); max-width: 1000px; }
  .chat-visual { display: contents; }
  .chat-texto, .chat .ventana-escena, .chat .puede { grid-area: 1 / 1; min-width: 0; }
  .chat-texto { max-width: 560px; }
  .chat-ventana { width: min(100%, calc((100svh - var(--barra-h) - 200px) * 1.6)); }
  .chat .puede { width: auto; max-width: 720px; }
}
@media (max-width: 760px) {
  .chat-escena { padding: calc(var(--barra-h) + 12px) var(--margen) 20px; }
  .chat-ventana { width: 100%; }
  .chat-ventana .ventana-marco { aspect-ratio: auto; height: min(calc(100svh - var(--barra-h) - 120px), 660px); border-radius: 14px; }
  /* la llegada en el móvil: no la captura de escritorio (recortada, cortaba palabras), sino la columna del chat recreada
     en HTML, a todo el ancho de la ventana y a un tamaño legible; el barrido la saca por la derecha (portada-chat.js) */
  .ch-llegada { display: none; }
  .chat-ventana .ch-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .chat-ventana .ch-rail { display: none; }
  .chat-ventana .ch-chat { position: absolute; inset: 0; width: 100%; z-index: 3; border-left: 1px solid var(--filete-2); box-shadow: none; transform: translate3d(101%, 0, 0); transition: transform .9s var(--e-mov); }
  .chat-ventana .ch-cuerpo.con-chat .ch-chat { transform: none; }
  .chat-ventana .ch-chat-tabs span { font-size: 13px; }
  .chat-ventana .ch-chat-cuerpo { padding: 20px 16px 12px; gap: 16px; }
  .chat-ventana .ch-hola .ch-hola-i { margin-bottom: 12px; }
  .chat-ventana .ch-hola h4 { font-size: 21px; }
  .chat-ventana .ch-hola p { font-size: 14px; }
  .chat-ventana .ch-sug div { font-size: 14px; min-height: 42px; }
  .chat-ventana .ch-ph { font-size: 14px; }
  .chat-ventana .ch-fila-c { font-size: 12px; }
  .chat-ventana .ch-aviso { font-size: 11px; }
  .chat-notas, .ch-capa-refs { display: none; }
  .chat-ventana .chat-pie { margin-top: 10px; }
  .chat .puede { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .chat-texto > .acciones .boton { width: min(100%, 320px); }
}
/* móviles bajos: fuera la cabecera «Chat» repetida, el icono y las últimas sugerencias, para que la columna del chat se vea
   entera, sin sugerencias cortadas */
@media (max-width: 760px) and (max-height: 720px) {
  .chat-ventana .ch-chat-cab, .chat-ventana .ch-hola .ch-hola-i, .chat-ventana .ch-sug div:nth-child(n+4) { display: none; }
}
@media (max-width: 760px) and (max-height: 660px) {
  .chat-ventana .ch-sug div:nth-child(n+3) { display: none; }
}

/* ---------- Movimiento reducido: la escena quieta, el panel de Bolsa abierto y dibujado, todo a la vista ---------- */
.rm .ch-llegada { display: none; }
.rm .chat-notas { gap: 6px; }
.rm .chat-notas li { grid-area: auto; opacity: 1; transform: none; }
.rm .ch-spark path, .rm .ch-linea { stroke-dashoffset: 0 !important; }


/* ==========================================================================
   Por qué la Vault: piezas traídas de 02–05 y arreglos (antes css/_porque.css)
   ========================================================================== */
/* ==========================================================================================
   Por qué la Vault · 06 «La elegida» · segunda vuelta (8-oct-2026). Todo el estilo de la página, junto.
   Scroll por paradas: la apertura, los esquemas, la tabla y el cierre son pantallas; la toma, el campo y el proceso,
   escenas por pasos ([data-pasos], .escena-fija). Sobria (referencias-openai.md): sin velos, resplandores ni filetes de luz;
   el naranja, solo en la señal (el bloque de 2.400, la toma y el pulso de la Vault) y en la acción principal.
   ========================================================================================== */

/* Marcas de página (js/porque.js · paginar): lo que no cabe en una pantalla se reparte en páginas enteras */
.pag { display: block; height: 14px; margin: 0; padding: 0; border: 0; list-style: none; pointer-events: none; }

/* ---------- Apertura · el 80 %, medido sobre la rejilla de 12 columnas (de la 02 Consola) ---------- */
.pv-heroe.ochenta { position: relative; display: block; min-height: 100vh; min-height: 100svh; padding: calc(var(--barra-h) + 24px) 0 36px; }
.och-in { min-height: calc(100vh - var(--barra-h) - 60px); min-height: calc(100svh - var(--barra-h) - 60px); display: flex; flex-direction: column; gap: 28px; }
.och-cab { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px 32px; }
.och-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pv-cifra { font-size: clamp(6.5rem, 15vw, 14rem); font-weight: 620; letter-spacing: -.055em; line-height: .8; font-variant-numeric: tabular-nums; margin: 4px 0 0 -.05em; }
.pv-cifra .pc { font-size: .4em; letter-spacing: -.02em; color: var(--t-apoyo); }
/* en inglés va «80%», sin el espacio duro del español: un respiro para que el signo no pise el 0 (el interletra de la cifra es negativo) */
html[lang="en"] .pv-cifra .pc { margin-left: .1em; }
.ochenta .cuerpo { color: var(--t-apoyo); }
/* las cifras que cuentan guardan el ancho de su valor final (nada salta) */
.cuenta { display: inline-grid; justify-items: start; }
.cuenta > * { grid-area: 1 / 1; }
.cuenta-molde { visibility: hidden; }
.pv-leyenda { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 20px; padding-bottom: 4px; text-align: right; }
.ley-item { display: inline-flex; align-items: center; gap: 8px; }
.ley-a, .ley-b { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ley-a { background: var(--naranja); }
.ley-b { background: rgba(237, 237, 237, .3); }
/* la escala: 12 columnas de 1.000 tokens (en móvil, 4 de 3.000) */
.och-escala { position: relative; isolation: isolate; }
.och-rejilla { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% + 32vh); z-index: -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 150px, transparent 100%); mask-image: linear-gradient(to top, #000 0, #000 150px, transparent 100%); }
.och-rejilla i { border-left: 1px solid rgba(237, 237, 237, .07); transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s var(--e-mov) calc(var(--n) * 40ms + 200ms); }
.och-rejilla i:last-child { border-right: 1px solid rgba(237, 237, 237, .07); }
.listo .och-rejilla i { transform: none; }
.och-ticks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 30px; font-size: .875rem; line-height: 1; color: var(--t2); font-variant-numeric: tabular-nums; }
.och-ticks span { padding: 2px 0 0 8px; }
.och-ticks.d4 { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.och-fila { position: relative; height: 64px; border-top: 1px solid var(--filete); }
.och-fila:last-child { border-bottom: 1px solid var(--filete); }
/* las barras y el −9.600 los mueve js/porque.js por tiempo (transform y opacity directos) */
.och-barra { position: absolute; left: 0; top: 12px; bottom: 12px; width: var(--w); border-radius: 8px; background: rgba(237, 237, 237, .09); transform-origin: left; }
.prep .och-barra { background: var(--naranja); }
.och-etq { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px; font-size: .9375rem; color: var(--t1); white-space: nowrap; }
.och-etq b { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; }
.prep .och-etq { width: var(--w); gap: 10px; padding: 0 14px; color: var(--sobre-naranja); font-weight: 500; }
.prep .och-etq b { color: var(--sobre-naranja); }
.och-dif { position: absolute; top: 12px; bottom: 12px; left: var(--w); right: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(237, 237, 237, .24); border-left: 0; border-radius: 0 8px 8px 0;
  font-size: .9375rem; font-weight: 500; color: var(--t-apoyo); font-variant-numeric: tabular-nums; }
.och-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.tk-cifra { font-size: 1.0625rem; color: var(--t-apoyo); }
.tk-cifra b { font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; color: var(--t1); font-variant-numeric: tabular-nums; }
.tk-desc { display: inline-block; margin-left: 8px; font-size: .9375rem; color: var(--t2); }
.och-pie .enlace-flecha { margin-left: auto; font-size: .9375rem; color: var(--t-apoyo); }

/* ---------- La toma de color (de la 01), por pasos y por tiempo ----------
   .t-sube (paso ≥ 0): el naranja sube y cubre la pantalla; la frase blanca pasa a negra al cruzarla.
   .t-l2 (≥ 1): la segunda frase.  .t-logo (≥ 2): la placa se encoge en el cuerpo del logo, centrado en el núcleo de la
   Vault (--logo, --pos: las pone js/porque.js al cambiar de tamaño); se dibujan las barras, entra el logo y se encoge
   hasta ser el nodo central.  .t-textos (≥ 3): los dos textos, a los lados.  Al volver, lo mismo hacia atrás. */
.toma { position: relative; --L: 120px; }
.toma-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; text-align: center; padding: 0 var(--margen); }
.toma-capa .antetitulo { margin-bottom: 1vh; }
.toma-l1 { font-size: clamp(2.4rem, 6.6vw, 6.8rem); font-weight: 600; letter-spacing: -.04em; line-height: .95; }
.toma-l2 { font-size: clamp(3rem, 11vw, 11.5rem); font-weight: 620; letter-spacing: -.048em; line-height: .88; }
.toma-l2 .serif { letter-spacing: -.03em; }
.toma-l2.hueco { visibility: hidden; }
/* sin la segunda frase, la primera va centrada (--medio: js/porque.js, al cambiar de tamaño) */
.toma-capa > .antetitulo, .toma-capa > .toma-l1 { transform: translate3d(0, var(--medio, 0px), 0); transition: transform .9s var(--e-quint) .05s; }
.toma.t-l2 .toma-capa > .antetitulo, .toma.t-l2 .toma-capa > .toma-l1 { transform: none; }
.toma-blanca { transition: opacity 0s; }
.toma.t-sube .toma-blanca { opacity: 0; transition: opacity 0s 1.4s; }
.toma-placa { position: absolute; inset: 0; background: var(--naranja); clip-path: inset(100% 0 0 0 round 0px); transition: clip-path .7s var(--e-mov), visibility 0s; }
.toma.t-sube .toma-placa { clip-path: inset(0 0 0 0 round 0px); transition: clip-path 1.05s var(--e-mov) .3s, visibility 0s .3s; }
.toma.t-sube.t-logo .toma-placa { clip-path: var(--logo, inset(46% 46% 46% 46% round 24px)); visibility: hidden; transition: clip-path .95s var(--e-mov), visibility 0s 1.2s; }
.toma-negra { color: var(--sobre-naranja); transition: opacity .4s var(--e-sal) .85s; }
.toma.t-logo .toma-negra { opacity: 0; transition: opacity .25s linear; }
.toma-negra .antetitulo { color: rgba(11, 11, 12, .72); }
.toma-negra .toma-l2 { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity .4s var(--e-sal), transform .5s var(--e-sal); }
.toma.t-l2 .toma-negra .toma-l2 { opacity: 1; transform: none; transition: opacity .7s var(--e-sal) .05s, transform .9s var(--e-quint) .05s; }
/* La placa se posa como la celda del centro de la Rejilla (32, 26,5 de 64) y el gráfico se enciende desde ella,
   en el orden de plan/logo/marcas.js; el bocadillo, al final */
.toma-logo { position: absolute; left: 50%; top: 50%; width: var(--L); height: var(--L); margin: calc(var(--L) * -.4140625) 0 0 calc(var(--L) * -.5); overflow: visible; transform-origin: 50% 41.40625%;
  opacity: 0; transform: var(--pos, none) scale(1); transition: opacity .12s linear .28s, transform .3s var(--e-sal); }
.toma.t-logo .toma-logo { opacity: 1; transform: var(--pos, none) scale(.4); transition: opacity .15s linear, transform .7s var(--e-quint) .1s; }
.toma[data-paso="2"] .toma-logo { transition: opacity .15s linear 1s, transform .7s var(--e-quint) 1.12s; }
.toma[data-paso="4"] .toma-logo { opacity: 0; transition: opacity .3s linear; }
.toma-logo .enc { opacity: 0; transition: opacity .15s linear; }
.toma-logo .enc[style*="--i:0"] { opacity: 1; }
.toma.t-logo .toma-logo .enc { opacity: 1; transition: opacity .28s var(--e-sal) calc(1.05s + var(--i) * .1s); }
.rm .toma-logo .enc { opacity: 1; }
.toma-textos { position: absolute; inset: 0; pointer-events: none; }
.tt-a, .tt-b { position: absolute; top: 50%; width: min(340px, 26vw); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; opacity: 0; transition: opacity .3s var(--e-sal), transform .4s var(--e-sal); }
.tt-a { left: var(--margen); transform: translate3d(-20px, -50%, 0); }
.tt-b { right: var(--margen); transform: translate3d(20px, -50%, 0); }
.toma.t-textos .tt-a, .toma.t-textos .tt-b { opacity: 1; transform: translate3d(0, -50%, 0); pointer-events: auto; transition: opacity .8s var(--e-sal) .15s, transform 1s var(--e-quint) .15s; }
.tt-a .cuerpo, .tt-b .cuerpo { color: var(--t1); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }
/* Mientras el naranja cubre la pantalla (pasos 0 y 1; js/porque.js pone html.pv-naranja), la barra pierde su fondo oscuro
   (no queda una franja marrón) y sus textos y el logo pasan a negro; «Abrir Chat», negro sobre naranja. El cambio llega
   con el naranja (≈ 1,2 s) y, al irse el naranja, la barra vuelve enseguida. */
html.pv-naranja:not(.menu-abierto) .barra::before, html.pv-naranja:not(.menu-abierto) .barra-filete { opacity: 0; transition: opacity .2s linear 1.15s; }
html.pv-naranja:not(.menu-abierto) .barra .marca, html.pv-naranja:not(.menu-abierto) .barra .marca-vault, html.pv-naranja:not(.menu-abierto) .barra .nav a, html.pv-naranja:not(.menu-abierto) .barra .ctl { color: var(--sobre-naranja); transition: color .2s linear 1.15s; }
html.pv-naranja:not(.menu-abierto) .barra .marca-logo .enc { fill: var(--sobre-naranja); transition: fill .2s linear 1.15s; }
html.pv-naranja:not(.menu-abierto) .barra .marca-logo .apag { fill: color-mix(in srgb, var(--sobre-naranja) 30%, transparent); transition: fill .2s linear 1.15s; }
html.pv-naranja:not(.menu-abierto) .barra .boton-barra { background: var(--sobre-naranja); color: #EDEDED; transition: background-color .2s linear 1.15s, color .2s linear 1.15s; }
html.pv-naranja:not(.menu-abierto) .barra :focus-visible { outline-color: var(--sobre-naranja); }
/* movimiento reducido: si solo asoma bajo la barra el final de la placa, la barra se vuelve opaca y lo tapa */
html.pv-opaca .barra::before { background: var(--lienzo); opacity: 1; }

/* ---------- El contexto que importa · el campo de 12.000 cuadros (de la 03 Editorial), por pasos ---------- */
.ctx { position: relative; }
.ctx-escena { display: flex; flex-direction: column; }
.ctx-rejilla { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.4vw, 76px); padding-top: calc(var(--barra-h) + 3vh); padding-bottom: 4vh; }
.ctx-texto { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ctx-cifra { display: flex; align-items: baseline; gap: .2em; font-size: clamp(3.4rem, 6.3vw, 6.4rem); font-weight: 620; letter-spacing: -.05em; line-height: .86; color: var(--t1); transition: color .7s var(--e-sal); }
.ctx-cifra em { font-size: .36em; letter-spacing: -.01em; color: var(--t2); }
.ctx-cifra.reunido { color: var(--naranja-texto); }
.nota { color: var(--t2); font-size: .9375rem; line-height: 1.6; max-width: 52ch; text-wrap: pretty; }
.ctx-figura { min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.ctx-lienzo { display: block; flex: 1; min-height: 0; width: 100%; }
.ctx-ley { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: .875rem; color: var(--t2); }
.ctx-ley p { display: flex; align-items: center; gap: 8px; }
.ctx-ley b { color: var(--t1); font-weight: 600; }
.ctx-ley b.naranja { color: var(--naranja-texto); }
.ctx-ley .meta { margin-left: auto; }
.cq-a, .cq-b { width: 8px; height: 8px; border-radius: 2px; background: rgba(237, 237, 237, .5); flex: none; }
.cq-b { background: var(--naranja); }
/* en móvil, el texto del ejemplo va en su propia pantalla (en escritorio, en la escena) */
.ctx-nota-movil { display: none; }
.ctx-nota-in { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

/* ---------- El ahorro empieza en el proceso · los tres esquemas que se dibujan (de la 02 Consola) ---------- */
.ahorro { position: relative; }
.ahorro-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 920px; margin-bottom: clamp(40px, 7vh, 76px); }
.proceso3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(32px, 4.4vw, 72px); }
.p3 { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p3[data-revela] { transition-delay: calc(var(--d, 0) * 120ms); }
.p3 svg { width: 100%; height: 160px; overflow: visible; margin-bottom: 20px; }
.p3 h3 { font-size: clamp(1.3rem, 1.8vw, 1.75rem); font-weight: 560; letter-spacing: -.024em; line-height: 1.12; text-wrap: balance; }
.p3 p { font-size: 1rem; line-height: 1.6; color: var(--t2); max-width: 44ch; text-wrap: pretty; }
/* piezas de los esquemas (la letra, a 14 px en pantalla: --dib-fs, de js/porque-dibujos.js) */
.dib-t { font-family: var(--sans); font-size: var(--dib-fs, 14px); font-weight: 500; fill: var(--t2); }
.dib-t.t1 { fill: var(--t1); }
.dib-t.am { fill: var(--estimado); }
.dib-caja { fill: rgba(237, 237, 237, .035); stroke: rgba(237, 237, 237, .28); stroke-width: 1; }
.dib-l { fill: none; stroke: rgba(237, 237, 237, .12); stroke-width: 1; }
.dib-l.on { stroke: rgba(237, 237, 237, .45); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--e-mov) calc(var(--d, 0) * 120ms + var(--i, 0) * 70ms + 260ms); }
.p3.visto .dib-l.on { stroke-dashoffset: 0; }
.dib-n { fill: var(--t1); opacity: 0; transition: opacity .35s var(--e-sal) calc(var(--d, 0) * 120ms + var(--i, 0) * 70ms + 1000ms); }
.p3.visto .dib-n { opacity: 1; }
.dib-c { fill: var(--sup2); stroke: var(--filete-2); stroke-width: 1; transition: fill .45s var(--e-sal), stroke .45s var(--e-sal); transition-delay: calc(var(--d, 0) * 120ms + var(--i, 0) * 55ms + 520ms); }
.p3.visto .dib-c[data-on] { fill: var(--naranja); stroke: var(--naranja); }
.dib-f { opacity: 0; transform: translate3d(-6px, 0, 0); transition: opacity .45s var(--e-sal), transform .55s var(--e-quint); transition-delay: calc(var(--d, 0) * 120ms + var(--i, 0) * 110ms + 380ms); }
.p3.visto .dib-f { opacity: 1; transform: none; }

/* ---------- Cómo cambia el proceso (de la 01), un paso por fase: el hilo y las fases, por tiempo ---------- */
.proceso { position: relative; }
.proceso-escena { display: flex; }
.proceso-in { width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(var(--barra-h) + 8vh); padding-bottom: 10vh; }
.proc-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.proc-pista { position: relative; }
.proc-pista ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.proc-pista li { position: relative; padding-top: 34px; display: flex; flex-direction: column; gap: 8px; opacity: .5; transition: opacity .4s var(--e-sal); }
.proc-pista li.lit { opacity: 1; transition: opacity .6s var(--e-sal) .3s; }
.pp-nodo { position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(237, 237, 237, .4); background: var(--lienzo); transition: background-color .3s, border-color .3s; }
.proc-pista li.lit .pp-nodo { background: var(--t1); border-color: var(--t1); transition: background-color .4s .35s, border-color .4s .35s; }
.pp-num { font-size: .875rem; color: var(--t2); }
.proc-pista h3 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 560; letter-spacing: -.03em; line-height: 1.05; }
.proc-pista p { color: var(--t-apoyo); font-size: 1rem; max-width: 26ch; }
.proc-hilo { position: absolute; left: 4px; right: calc(25% - 18px); top: 0; height: 1px; background: rgba(237, 237, 237, .14); }
.proc-hilo i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: rgba(237, 237, 237, .7); transition: transform .9s var(--e-mov); }

/* ---------- La diferencia está en la preparación · la tabla (de la 01), sin caja ni barrido de luz ---------- */
.tabla-sec { position: relative; }
.tabla-in { width: 100%; }
.tabla-sec .titular-l { margin-bottom: clamp(32px, 5vh, 52px); }
.tabla-caja { position: relative; }
.tabla { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.tabla caption { caption-side: bottom; text-align: left; padding: 16px 0 0; color: var(--t2); font-size: .875rem; }
.tabla th, .tabla td { text-align: left; padding: 20px 28px 20px 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
.tabla thead th { font-size: .875rem; color: var(--t2); font-weight: 500; padding: 0 28px 14px 0; border-bottom-color: rgba(237, 237, 237, .18); }
.tabla thead th.t-vault { color: var(--t1); }
.tabla tbody th { font-weight: 560; color: var(--t1); width: 18%; }
.tabla td { color: var(--t2); width: 41%; }
.tabla td.t-vault { color: var(--t1); }
.tabla tbody tr { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .5s, transform .6s var(--e-quint); transition-delay: calc(var(--i, 0) * 140ms + .25s); }
.tabla-caja.visto tbody tr { opacity: 1; transform: none; }
.tabla tbody tr.pag { padding: 0; border: 0; opacity: 1; transform: none; }
.tabla-nota { margin-top: 28px; max-width: 90ch; }

/* ---------- Cierre de esta página (comparte la última pantalla con el pie) ----------
   El texto, a la izquierda; a la derecha queda el hueco de la Vault, que va entera, entre la barra y el pie y sin
   preguntas (js/porque.js · medirCierre lee este padding-right). En móvil no hay hueco: el texto ocupa la pantalla
   que deja el pie y la Vault descansa detrás, casi apagada. */
body[data-pagina="porque"] .cierre { padding: calc(var(--barra-h) + 2vh) 0 3vh; }
body[data-pagina="porque"] .cierre-in { gap: 20px; }
@media (min-width: 761px) {
  body[data-pagina="porque"] .cierre { place-items: center stretch; text-align: left; }
  body[data-pagina="porque"] .cierre-in { width: 100%; align-items: flex-start; padding-right: calc(var(--margen) + 40px + clamp(240px, 30vw, 460px)); }
  body[data-pagina="porque"] .cierre .titular-xl { font-size: clamp(2.125rem, 4.1vw, 3.75rem); }
  body[data-pagina="porque"] .cierre .acciones { justify-content: flex-start; }
}

/* ---------- Tema claro (no rompe) ---------- */
[data-tema="claro"] .och-rejilla i { border-color: rgba(15, 15, 15, .08); }
[data-tema="claro"] .och-barra { background: rgba(15, 15, 15, .07); }
[data-tema="claro"] .prep .och-barra { background: var(--naranja); }
[data-tema="claro"] .och-dif { border-color: rgba(15, 15, 15, .25); }
[data-tema="claro"] .ley-b { background: rgba(15, 15, 15, .22); }
[data-tema="claro"] .dib-caja { fill: rgba(15, 15, 15, .03); stroke: rgba(15, 15, 15, .3); }
[data-tema="claro"] .dib-l { stroke: rgba(15, 15, 15, .14); }
[data-tema="claro"] .dib-l.on { stroke: rgba(15, 15, 15, .45); }
[data-tema="claro"] .cq-a { background: rgba(15, 15, 15, .4); }
[data-tema="claro"] .pp-nodo { border-color: rgba(15, 15, 15, .4); }
[data-tema="claro"] .proc-hilo { background: rgba(15, 15, 15, .14); }
[data-tema="claro"] .proc-hilo i { background: rgba(15, 15, 15, .7); }
[data-tema="claro"] .tabla thead th { border-bottom-color: rgba(15, 15, 15, .18); }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1380px) {
  .prep .och-etq { width: auto; padding-left: calc(var(--w) + 16px); gap: 14px; justify-content: flex-start; color: var(--t1); font-weight: 400; }
  .prep .och-etq b { color: var(--t1); }
  .och-dif { justify-content: flex-end; padding-right: 16px; }
}
/* tableta: los tres esquemas caben en una pantalla (columnas iguales y dibujos más bajos; la letra sigue a 14 px) */
@media (max-width: 1080px) {
  .proceso3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .p3 svg { height: 140px; margin-bottom: 16px; }
}
/* tableta estrecha: el reparto, a todo el ancho; los otros dos, juntos debajo */
@media (max-width: 899px) {
  .proceso3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .p3:first-child { grid-column: 1 / -1; }
  .p3 svg { height: 130px; max-width: 460px; }
}
/* tableta en vertical: los dos textos de la toma, arriba y abajo (como en móvil), y la Vault, más pequeña, entre los dos
   (js/porque.js · tabletaVertical): así no caen sobre los radios naranjas */
@media (min-width: 761px) and (max-width: 1080px) and (orientation: portrait) {
  .tt-a, .tt-b { width: auto; max-width: 560px; left: var(--margen); right: var(--margen); }
  .tt-a { top: calc(var(--barra-h) + 28px); transform: translate3d(0, -12px, 0); }
  .tt-b { top: auto; bottom: 5vh; transform: translate3d(0, 12px, 0); }
  .toma.t-textos .tt-a, .toma.t-textos .tt-b { transform: none; }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .pv-heroe.ochenta { padding-top: calc(var(--barra-h) + 30vh); padding-bottom: 24px; }
  .och-in { min-height: 0; gap: 22px; }
  .och-cab { grid-template-columns: 1fr; gap: 18px; }
  .pv-cifra { font-size: clamp(6rem, 34vw, 9rem); }
  .pv-leyenda { justify-self: start; justify-content: flex-start; text-align: left; gap: 6px 16px; }
  .och-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; -webkit-mask-image: none; mask-image: none; }
  .och-rejilla i:nth-child(n + 5) { display: none; }
  .och-rejilla i:nth-child(4) { border-right: 1px solid rgba(237, 237, 237, .07); }
  .och-ticks.d12 { display: none; }
  .och-ticks.d4 { display: grid; }
  .och-fila { height: auto; }
  .och-etq, .prep .och-etq { height: auto; width: auto; padding: 12px 0 52px; justify-content: space-between; color: var(--t1); font-size: .9375rem; font-weight: 400; }
  .och-barra, .och-dif { top: auto; bottom: 12px; height: 28px; }
  .och-dif { font-size: .875rem; padding-right: 12px; }
  .och-pie { gap: 12px 20px; }
  .tk-desc { display: block; margin: 2px 0 0; }
  .och-pie .enlace-flecha { margin-left: 0; }

  .toma { --L: 96px; }
  .tt-a, .tt-b { width: auto; left: var(--margen); right: var(--margen); }
  .tt-a { top: calc(var(--barra-h) + 20px); transform: translate3d(0, -12px, 0); }
  .tt-b { top: auto; bottom: 5vh; transform: translate3d(0, 12px, 0); }
  .toma.t-textos .tt-a, .toma.t-textos .tt-b { transform: none; }
  .tt-a .cuerpo, .tt-b .cuerpo { font-size: 1.0625rem; }

  .ctx-rejilla { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 18px; padding-top: calc(var(--barra-h) + 20px); padding-bottom: 20px; }
  .ctx-texto { align-self: start; gap: 14px; }
  .ctx-detalle { display: none; }
  .ctx-cifra { font-size: 3.25rem; }
  .ctx-figura { gap: 14px; }
  .ctx-ley { gap: 6px 16px; }
  .ctx-ley .meta { margin-left: 0; width: 100%; }
  .ctx-nota-movil { display: flex; justify-content: flex-start; padding-top: calc(var(--barra-h) + 40px); }

  .ahorro-cab { gap: 16px; margin-bottom: 36px; }
  .proceso3 { grid-template-columns: 1fr; gap: 48px; }
  .p3:first-child { grid-column: auto; }
  .p3 svg { height: 140px; margin-bottom: 16px; }

  .proceso-in { padding-top: calc(var(--barra-h) + 4vh); padding-bottom: 4vh; }
  .proc-cab { gap: 14px; }
  .proc-cab .titular-l { font-size: 1.9rem; }
  .proc-pista ol { grid-template-columns: 1fr; gap: 0; padding-left: 28px; }
  .proc-pista li { padding: 0 0 18px; gap: 4px; }
  .pp-nodo { left: -28px; top: 6px; }
  .proc-hilo { left: 4px; right: auto; top: 10px; bottom: 64px; width: 1px; height: auto; }
  .proc-hilo i { transform-origin: top; transform: scaleY(0); }
  .proc-pista h3 { font-size: 1.35rem; }
  .proc-pista p { font-size: .9375rem; }

  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td, .tabla caption { display: block; width: auto; }
  .tabla caption { padding: 0 0 6px; }
  .tabla tbody tr { padding: 18px 0; border-bottom: 1px solid var(--filete); }
  .tabla tbody th { padding: 0 0 8px; border: 0; width: auto; font-size: 1.0625rem; }
  .tabla td { padding: 6px 0; border: 0; width: auto; }
  .tabla td::before { content: attr(data-c); display: block; font-size: .875rem; color: var(--t2); margin-bottom: 2px; }
  .tabla td.t-vault::before { color: var(--t-apoyo); }
  .tabla-nota { margin-top: 20px; }

  /* el cierre y el pie caben juntos en la última pantalla */
  body[data-pagina="porque"] .cierre { padding: calc(var(--barra-h) + 10px) 0 18px; }
  body[data-pagina="porque"] .cierre-in { gap: 18px; }
  body[data-pagina="porque"] .cierre .titular-xl { font-size: 2.125rem; }
  body[data-pagina="porque"] .cierre .entradilla { font-size: 1.0625rem; }
}

/* ---------- Movimiento reducido: las escenas, quietas y enteras (base.js no las trata por pasos) ---------- */
.rm .och-rejilla i { transform: none; }
.rm .toma-escena { display: flex; flex-direction: column; }
.rm .toma-blanca { display: none; }
.rm .toma-placa { position: relative; clip-path: none; visibility: visible; min-height: calc(100vh - 30px); min-height: calc(100svh - 30px); padding: calc(var(--barra-h) + 4vh) 0 4vh; display: flex; flex-direction: column; justify-content: center; }
.rm .toma-capa { position: relative; }
.rm .proceso-escena { min-height: 100vh; min-height: 100svh; }
.rm .toma-negra { opacity: 1; }
.rm .toma-negra .toma-l2, .rm .toma-capa > .antetitulo, .rm .toma-capa > .toma-l1 { opacity: 1; transform: none; }
.rm .toma-logo { position: relative; left: auto; top: auto; margin: 10vh auto 4vh; opacity: 1; transform: none; }
.rm .toma-textos { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding: 0 var(--margen) 12vh; pointer-events: auto; }
.rm .tt-a, .rm .tt-b { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; opacity: 1; width: min(420px, 100%); pointer-events: auto; }
.rm .ctx-rejilla { padding-top: calc(var(--barra-h) + 8vh); padding-bottom: 8vh; }
.rm .ctx-lienzo { flex: none; height: 62vh; }
.rm .proceso-in { gap: 48px; padding-bottom: 6vh; }
.rm .proc-pista li { opacity: 1; }
.rm .tabla tbody tr { opacity: 1; transform: none; }
.rm .dib-l.on { stroke-dashoffset: 0; }
.rm .dib-n, .rm .dib-f { opacity: 1; transform: none; }
.rm .dib-c[data-on] { fill: var(--naranja); stroke: var(--naranja); }
@media (max-width: 760px) {
  .rm .ctx-rejilla { grid-template-rows: auto; padding-top: calc(var(--barra-h) + 24px); padding-bottom: 24px; }
  .rm .ctx-lienzo { height: 56vh; }
  .rm .tt-a, .rm .tt-b { width: 100%; }
}


/* ==========================================================================
   Conecta tu IA: piezas traídas de 02–05 y arreglos (antes css/_conecta.css)
   ========================================================================== */
/* ---------- Conecta tu IA · la escena en tres capas (06 «La elegida»; por paradas desde el 8-oct-2026) ----------
   De la 04 Profundidad: la idea (tu IA → conector MCP → Financial Vault, unidas por un haz por el que va la pregunta
   y vuelve el dato). Cinco paradas ([data-pasos="5"], base.js); entre una y otra, todo va por tiempo (js/conecta.js
   pone clases; aquí, sus transiciones). Paneles lisos, sin sombras ni bordes con luz; el naranja, solo en la señal
   (el tramo que viaja por el haz y el pulso de la Vault). La tercera capa no es un panel: es la Vault del fondo (la de
   la 05), que una estación de cámara coloca en el hueco del final del haz. */
.capas { position: relative; }
.capas-fijo { display: grid; grid-template-rows: minmax(0, 1fr); padding: calc(var(--barra-h) + 3vh) var(--margen) 5vh; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; }
.capas-fila { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(44px, 6vw, 96px); min-height: 0; }
.cp-bloque { display: contents; }

/* El haz: una línea fina entre capas que se dibuja al llegar; la llamada y el dato viajan por ella como un tramo naranja */
.capas-haz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.hz-base { fill: none; stroke: rgba(237, 237, 237, .22); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--e-mov) .3s, opacity .4s; }
#hz-b { transition-delay: .7s, 0s; }
.capas.en-escena .hz-base { stroke-dashoffset: 0; }
.hz-luz { fill: none; stroke: var(--naranja); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.hz-luz.on { opacity: 1; }
[data-tema="claro"] .hz-base { stroke: rgba(15, 15, 15, .22); }

/* Las capas llegan con la propia sección (sin fundido aparte: medido, el fundido costaba un cuadro lento en el móvil);
   por tiempo, al llegar, se dibuja el haz y aparece el nombre de la Vault cuando la cámara la ha puesto en su hueco */
.capa { position: relative; min-width: 0; }
.capa-ia, .capa-con { flex: none; display: flex; flex-direction: column; border-radius: var(--r-ventana); background: var(--panel); border: 1px solid rgba(237, 237, 237, .09); overflow: hidden; transition: border-color .4s; }
[data-tema="claro"] .capa-ia, [data-tema="claro"] .capa-con { border-color: var(--filete); }
.capa-ia { width: clamp(340px, 30vw, 452px); }
.capa-con { width: clamp(256px, 20vw, 288px); }
.capa-vault { flex: 1; align-self: stretch; min-width: 240px; }
.js .capas:not(.llega) .capa-vault .capa-cab { opacity: 0; }
.capa.activa { border-color: rgba(237, 237, 237, .26); }
[data-tema="claro"] .capa.activa { border-color: rgba(15, 15, 15, .3); }

.capa-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 18px; border-bottom: 1px solid var(--filete); font-size: .9375rem; }
.capa-cab b { font-weight: 600; }
.capa-cab .meta { margin-left: auto; }
.capa-nodo { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); flex: none; transition: background-color .35s; }
.capa.activa .capa-nodo { background: var(--naranja); }
.capa-vault .capa-cab { position: absolute; left: 0; right: 0; top: 0; border: 0; padding: 0; gap: 4px 10px; justify-content: center; transition: opacity .6s var(--e-sal) .5s; }
.capa-vault .capa-cab .meta { margin-left: 0; }
.capa-con .capa-cab .meta { flex-basis: 100%; margin-left: 16px; }

/* Capa 1 · tu IA: la conversación de ejemplo */
.cp-hilo { display: flex; flex-direction: column; gap: 12px; padding: 18px; transition: transform .7s var(--e-quint); }
.cp-yo { align-self: flex-end; max-width: 88%; background: var(--sup3); border-radius: 16px 16px 4px 16px; padding: 10px 14px; transition: opacity .4s var(--e-sal); }
.cp-yo p, .cp-resp { font-size: .9375rem; line-height: 1.55; }
.cp-yo .resto { visibility: hidden; }
.cp-yo .cursor { position: relative; }
.cp-yo p.escribiendo .cursor::after { content: ''; position: absolute; left: 1px; top: .12em; width: 1px; height: 1.15em; background: var(--t1); animation: parpadeo 1s steps(1) infinite; }
.cp-llamada { align-self: flex-start; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--filete-2); background: var(--sup2); font-size: .875rem;
  opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .35s var(--e-sal), transform .45s var(--e-quint); }
.cp-llamada.on { opacity: 1; transform: none; }
.cp-icono { display: grid; place-items: center; }
.cp-nombre { font-weight: 600; }
.cp-llamada code { font-size: .8125rem; color: var(--t-apoyo); }
.cp-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); font-size: .875rem; }
.cp-estado i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--t2); border-right-color: transparent; animation: girar .8s linear infinite; }
.cp-llamada.recibido .cp-estado i { animation: none; border: 0; width: 6px; height: 6px; background: var(--sube); }
.cp-ia { display: flex; flex-direction: column; gap: 10px; }
.cp-resp { color: var(--t1); }
.cp-resp .w { opacity: 0; transition: opacity .25s; }
.cp-resp .w.on { opacity: 1; }
.cp-ref, .cp-aviso { font-size: .875rem; line-height: 1.5; color: var(--t2); opacity: 0; transition: opacity .4s; }
.cp-ref span { color: var(--t1); margin-right: 6px; }
.cp-aviso { padding-top: 10px; border-top: 1px solid var(--filete); }
.cp-ia.fin .cp-ref, .cp-ia.fin .cp-aviso { opacity: 1; }

/* Capa 2 · el conector MCP: la petición y, a la vuelta, el dato con su fuente y su hora */
.cp-cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.cp-peticion { display: flex; flex-direction: column; gap: 7px; }
.cp-marca { display: flex; align-items: center; gap: 8px; font-size: .9375rem; margin-bottom: 2px; }
.cp-lin { font-family: var(--mono); font-size: .8125rem; color: var(--t-apoyo); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .35s var(--e-sal), transform .45s var(--e-quint); }
.cp-lin b { color: var(--t1); font-weight: 500; }
.cp-lin.cp-lect { font-family: var(--sans); font-size: .875rem; color: var(--t2); transition-delay: .08s; }
.capa-con.pide .cp-lin { opacity: 1; transform: none; }
.cp-res { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.cp-res::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--sup2); opacity: 0; transition: opacity .4s var(--e-sal); }
.capa-con.dato .cp-res::before { opacity: 1; }
.cp-res > * { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .4s var(--e-sal), transform .5s var(--e-quint); }
.capa-con.dato .cp-res > * { opacity: 1; transform: none; }
.capa-con.dato .cp-res > :nth-child(2) { transition-delay: .06s; } .capa-con.dato .cp-res > :nth-child(3) { transition-delay: .12s; }
.capa-con.dato .cp-res > :nth-child(4) { transition-delay: .18s; } .capa-con.dato .cp-res > :nth-child(5) { transition-delay: .24s; } .capa-con.dato .cp-res > :nth-child(6) { transition-delay: .3s; }
.cp-act { font-size: .875rem; color: var(--t2); } .cp-act b { color: var(--t1); margin-right: 5px; }
.cp-precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cp-precio b { font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.cp-mon { color: var(--t2); font-size: .875rem; }
.cp-ej { font-size: .875rem; color: var(--estimado); }
.cp-var { font-size: .875rem; color: var(--t2); } .cp-var .sube { font-weight: 560; }
.cp-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 2px; }
.cp-datos dt { font-size: .875rem; line-height: 1.3; color: var(--t2); }
.cp-datos dd { font-weight: 600; font-size: .9375rem; margin-top: 2px; }
.cp-fuente { font-size: .875rem; line-height: 1.45; color: var(--t-apoyo); }
.cp-fuente span { color: var(--t2); margin-right: 6px; }

/* Capa 3 · Financial Vault: el hueco donde la cámara pone la Vault del fondo (con movimiento reducido, una Vault quieta) */
.cp-mini { display: none; }

/* Al final, la frase de la página de antes que cierra la escena */
.capas-pie { position: absolute; z-index: 2; left: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; max-width: min(980px, 100%); }
.capas-pie .cuerpo { color: var(--t-apoyo); opacity: 0; transition: opacity .6s var(--e-sal) .25s; }
.capas-pie.visto .cuerpo { opacity: 1; }
.capas-pie .titular-m em.serif { padding-right: .04em; }

/* La llamada y el dato llevan su etiqueta por el haz y por la Vault (.etiqueta-nodo de web.css; js/conecta.js la mueve
   con transform y opacity directos) */
#cp-etiqueta.dato code { border-color: rgba(69, 190, 128, .5); }
[data-tema="claro"] #cp-etiqueta code { background: rgba(255, 255, 255, .94); border-color: rgba(15, 15, 15, .16); }
#cp-etiqueta.arriba code { transform: translate(-50%, calc(-100% - 14px)); }

/* El cierre (de la base) y el pie, juntos en la última pantalla también a 1280 × 800 y en móvil */
body[data-pagina="conecta"] .cierre { padding: calc(var(--barra-h) + 16px) 0 32px; }
body[data-pagina="conecta"] .cierre-in { gap: 20px; }
@media (max-width: 760px) { body[data-pagina="conecta"] .cierre { padding: calc(var(--barra-h) + 12px) 0 24px; } }

/* ---------- Tableta y móvil: las tres capas apiladas, enteras en cada paso ---------- */
@media (max-width: 980px) {
  .capas-fijo { padding: calc(var(--barra-h) + 12px) var(--margen) 16px; }
  .capas-fila { flex-direction: column; align-items: stretch; gap: 22px; }
  .capa-ia, .capa-con { width: auto; }
  /* la conversación, en una ventana que llena lo que dejan las otras dos y sube sola cuando llega la respuesta */
  .capa-ia { flex: 1 1 auto; min-height: 0; }
  .capa-ia .capa-cab { position: relative; z-index: 1; background: var(--panel); }
  .capa-ia.hilo-sube .cp-yo, .capa-ia.hilo-sube-mas .cp-llamada { opacity: 0; }
  .capa-vault { flex: 0 0 auto; min-height: 150px; min-width: 0; }
  .cp-cuerpo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
  .capa-con .capa-cab .meta { flex-basis: auto; margin-left: auto; }
  /* al final, la frase de cierre ocupa el sitio de la Vault (que se aparta y baja su luz) */
  .capas-pie { left: 0; right: 0; bottom: 4px; justify-content: center; text-align: center; }
  .capas-pie .titular-m { font-size: 1.5rem; }
  .capas-pie .cuerpo { font-size: .9375rem; }
  .capas-pie:not(.visto) { visibility: hidden; transition: visibility 0s .6s; }
  .capas.final .capa-vault .capa-cab { opacity: 0; transition-delay: 0s; }
  .capas.final #hz-b { opacity: 0; }
}
@media (max-width: 760px) {
  .capa-cab { padding: 11px 14px; font-size: .875rem; }
  .capa-vault .capa-cab { justify-content: flex-start; gap: 0 10px; padding-left: 2px; }
  .capa-vault .capa-cab .meta { flex-basis: 100%; padding-left: 16px; }
  .cp-hilo { padding: 12px 14px 14px; gap: 9px; }
  .cp-yo { padding: 8px 12px; }
  .cp-yo p, .cp-resp { font-size: .875rem; line-height: 1.5; }
  /* nada por debajo de 14 px salvo el código (13 px); el sitio sale de la ficha (sin .cp-act ni .cp-datos) y del relleno */
  .cp-llamada { padding: 5px 10px; font-size: .875rem; }
  .cp-llamada code { font-size: .8125rem; }
  .cp-ref, .cp-aviso { line-height: 1.45; }
  .cp-aviso { padding-top: 8px; }
  .cp-cuerpo { gap: 10px; padding: 10px 12px 12px; }
  /* en producción (8-oct-2026): la petición, algo más ancha para que «→ factsheet · NVDA» (inglés) quepa en una línea a 375 */
  .cp-cuerpo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .cp-res { padding: 9px 10px; gap: 3px; }
  .cp-act, .cp-datos { display: none; }
  .cp-precio b { font-size: 1.35rem; }
  .cp-fuente { line-height: 1.4; }
  .cp-marca { font-size: .875rem; }
  .cp-lin { font-size: .8125rem; }
}

/* ---------- Movimiento reducido: la escena completa y quieta (base.js no la trata por pasos) ---------- */
.rm .capas-fijo { min-height: 100vh; min-height: 100svh; align-content: center; padding-top: calc(var(--barra-h) + 6vh); padding-bottom: 8vh; grid-template-rows: auto; }
.rm .capas-fila { flex-wrap: wrap; row-gap: 5vh; }
.rm .capa-ia, .rm .capa-con, .rm .capa-vault .capa-cab { opacity: 1; transform: none; }
.rm .cp-hilo { transform: none !important; }
.rm .cp-yo { opacity: 1 !important; }
.rm .cp-llamada, .rm .cp-lin, .rm .cp-res > *, .rm .cp-resp .w, .rm .cp-ref, .rm .cp-aviso, .rm .capas-pie .cuerpo { opacity: 1 !important; transform: none !important; }
.rm .capas-pie { position: relative; left: auto; right: auto; bottom: auto; visibility: visible; flex-basis: 100%; }
.rm .capa-vault { min-height: 420px; display: flex; flex-direction: column; gap: 12px; }
.rm .capa-vault .capa-cab { position: relative; top: 0 !important; }
.rm .cp-mini { display: block; position: relative; flex: 1; width: 100%; min-height: 0; }
.rm .cp-mini .vault-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rm .hz-base { stroke-dashoffset: 0; }
@media (max-width: 980px) {
  .rm .capa-ia { flex: none; }
  .rm .capa-vault { min-height: 300px; }
  .rm .capas-pie { text-align: left; justify-content: flex-start; }
}
/* en móvil, dos paradas de una pantalla cada una: la conversación y el conector; la Vault y la frase de cierre */
@media (max-width: 760px) {
  .rm .capas-fijo { padding: var(--barra-h) var(--margen) 0; }
  .rm .capas-fila { flex-wrap: nowrap; gap: 0; }
  .rm .cp-bloque { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 20px 0; min-height: calc(100svh - var(--barra-h) - 8px); }
  .rm .cp-final { min-height: calc(100svh - var(--barra-h) - 16px); }
  .rm .cp-final .capa-vault { flex: 1 1 auto; min-height: 260px; }
  .rm .cp-final .capas-pie { flex: none; }
}

/* ==========================================================================
   Arreglos de la revisión final (7-oct)
   ========================================================================== */
/* El foco nunca cae en algo invisible (respaldo de base.js · foco()) */
[data-revela]:focus-within, .viaje-salida:focus-within, .region:focus-within, .tt-a:focus-within, .tt-b:focus-within { opacity: 1 !important; filter: none !important; pointer-events: auto !important; }
/* La región Mercados lleva el mapa de índices: más ancha en escritorio para que el barrido se vea */
@media (min-width: 1080px) { .region[data-region="0"] { width: min(640px, 46vw); } }
/* Menú móvil: idioma y tema, que en la barra se esconden */
.menu-ajustes { display: flex; align-items: center; gap: 18px; margin-top: 24px; font-size: 1rem; color: var(--t2); }
.menu-ajustes a[aria-current="true"] { color: var(--t1); font-weight: 600; }
.menu-ajustes .ctl-icono { margin-left: auto; }
.pie-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }


/* ---------- En producción (8-oct-2026) ---------- */
/* el logo de la Rejilla dentro del Chat recreado (portada-chat.js) */
.ch-marca svg { width: 20px; height: 20px; }
/* El héroe se pinta en el primer cuadro (LCP): sus textos de apoyo suben sin fundido, solo con transform, como las líneas del titular */
.heroe .entradilla.entra { opacity: 1; transform: translate3d(0, 14px, 0); transition: transform 1s var(--e-quint) calc(var(--d, 0) * 90ms + 250ms); }
.listo .heroe .entradilla.entra { transform: none; }