/* ── fuentes autohospedadas ──
   Antes venían de fonts.googleapis.com, que es una hoja de estilo bloqueante en un tercer
   origen: el navegador tenía que resolver DNS, negociar TLS y leer ese CSS antes de pintar
   nada, y recién ahí descubría los woff2 en un CUARTO origen. Ahora viajan con sv.css, que
   ya se estaba pidiendo igual.

   Se piden como rango variable (500..700) y no como tres instancias estáticas: son los
   mismos tres pesos en un archivo de 75 KB en vez de tres de 75 KB.

   Viven bajo /assets/ porque netlify.toml cachea eso siete días, y un woff2 no cambia. */
/* Bricolage Grotesque · latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fuentes/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque · latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fuentes/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Schibsted Grotesk · latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fuentes/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Schibsted Grotesk · latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fuentes/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Spline Sans Mono · latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fuentes/spline-sans-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Spline Sans Mono · latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/assets/fuentes/spline-sans-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Secreto Viajero, sistema visual · "amanecer a 35.000 pies"
   Cielo nocturno casi negro, arco de ruta, y el degradado del horizonte al amanecer
   (violeta → rosa → ámbar) reservado para el titular y los resplandores.
   Todo el sistema vive en esa paleta: el acento es el rosa del horizonte, las acciones
   llevan el degradado completo, y los sellos OFICIAL se distinguen por el degradado, no
   por un color ajeno.

   Superficies y elevación: perfil Developer Tool/IDE de ui-ux-pro-max, oscurecido.
   Oscuro es el modo por defecto; el claro existe completo. */

:root{
  /* cielo */
  --papel:#05070F;
  --superficie:#0B0F1D;
  --superficie-2:#121729;
  --bruma:#1A2136;
  /* El papel es casi negro (#05070F), así que la sombra no puede separar nada: cualquier
     color más oscuro que el papel ya no existe. En oscuro la elevación la hace la LUZ, y
     la línea es la que lleva el peso. Por eso --linea sube de #171D30 (1,20:1 contra el
     papel, invisible) a un gris azulado que se ve, y --linea-viva, que es el borde de todo
     lo que se toca (controles, tarjetas, paneles), llega a 3:1, que es lo que pide
     WCAG 1.4.11 para el límite de un componente. Se descartó subir --fuerza-sombra: una
     sombra más opaca sobre negro sigue siendo negro sobre negro. */
  --linea:#333B57;
  --linea-viva:#525E86;
  /* La tabla necesita sus propios dos colores. Con --superficie-2 la banda de cabecera
     daba 1,07:1 contra las celdas y con --linea la línea de fila daba 1,14:1: en una tabla
     de tres columnas que se lee cruzando la fila con la vista, esa línea es el único
     apoyo. No se toca --superficie-2 porque lo usan el hover de fila, los botones
     segmentados y media docena de fondos más, que no quieren este salto. */
  --tabla-cab:#39415F;
  --tabla-linea:#55608A;
  /* tinta */
  --tinta:#EEF1FA;
  --tinta-2:#AEB6CC;
  --tenue:#7A839C;
  /* rojo de error. En oscuro tiene que ser claro para despegarse del papel. */
  --alerta:#F08A5D;
  /* acción y señal, dentro de la misma paleta */
  --acento:#7CC0F0;
  --acento-vivo:#A5D6F8;
  --acento-suave:#0D2133;
  --acento-tinta:#081722;
  --sobre-acento:#06131D;
  --ambar:#F5B978;
  --ambar-suave:#241B10;
  /* horizonte: solo titular y resplandores, nunca texto de lectura */
  --alba-1:#9BD2F7;
  --alba-2:#7CC0F0;
  --alba-3:#4A93CC;
  --horizonte:linear-gradient(100deg, var(--alba-1) 0%, var(--alba-2) 46%, var(--alba-3) 100%);
  /* profundidad */
  --sombra:0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.6);
  --sombra-alta:0 1px 0 rgba(255,255,255,.05) inset, 0 22px 50px -26px rgba(0,0,0,1);
  --brillo:0 0 0 1px rgba(124,192,240,.32), 0 10px 34px -14px rgba(124,192,240,.42);
  /* medidas */
  --radio:14px;
  --radio-chico:10px;
  --ancho:1120px;
  /* 68ch daban 88-92 caracteres por renglón, no 68: el `ch` mide el ancho del cero, que en
     Schibsted Grotesk es bastante más ancho que la letra media. 58ch aterrizan en 76-79,
     dentro de la franja cómoda de 60 a 80. */
  --ancho-texto:58ch;
  /* ── escala tipográfica ──
     Antes había 22 tamaños entre 9,5 y 20px separados por medio píxel: medio punto a 15px
     no se percibe, pero obliga a decidir la jerarquía 40 veces. Acá quedan diez pasos con
     razón ~1,12 anclados en el cuerpo (17px), y cada font-size suelto se remapea al paso
     más cercano. En los empates (14 está a la misma distancia de 13,5 y de 15; 15,5 de 15
     y de 17) la prosa sube y los rótulos de control bajan: es la única regla que se
     necesita para no volver a inventar tamaños.
     El piso es 12px y no 10,5: ese nivel de micro-etiqueta aparece 826 veces en el sitio,
     así que era el cuerpo más leído de todos y estaba bajo el mínimo cómodo. */
  --t-micro:12px;
  --t-min:13.5px;
  --t-s:15px;
  --t-base:17px;
  --t-l:19px;
  --t-xl:21.5px;
  --t-2xl:24px;
  --t-3xl:27px;
  --t-4xl:31px;
  --t-5xl:34px;
}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --papel:#FAFAF6; --superficie:#FFFFFF; --superficie-2:#F2F2EC; --bruma:#E3E5DC;
    --linea:#DCDED3; --linea-viva:#B7BCAB;
    --tabla-cab:#C8CABE; --tabla-linea:#8E9488;
    --tinta:#12140F; --tinta-2:#3A4038; --tenue:#5C6357;
    --acento:#1F6899; --acento-vivo:#15507A; --acento-suave:#E1EFF9;
    --acento-tinta:#0A2438; --sobre-acento:#FFFFFF;
    --ambar:#B57A21; --ambar-suave:#F6EBD8; --alerta:#B33A08;
    --alba-1:#3E8FC4; --alba-2:#1F6899; --alba-3:#0E4B70;
    --sombra:0 1px 2px rgba(18,20,15,.04), 0 14px 34px -22px rgba(18,20,15,.3);
    --sombra-alta:0 2px 4px rgba(18,20,15,.05), 0 24px 60px -30px rgba(18,20,15,.45);
    --brillo:0 0 0 1px rgba(31,104,153,.26), 0 8px 26px -14px rgba(31,104,153,.32);
  }
}
:root[data-theme="light"]{
  --papel:#FAFAF6; --superficie:#FFFFFF; --superficie-2:#F2F2EC; --bruma:#E3E5DC;
  --linea:#DCDED3; --linea-viva:#B7BCAB;
  --tabla-cab:#C8CABE; --tabla-linea:#8E9488;
  --tinta:#12140F; --tinta-2:#3A4038; --tenue:#5C6357;
  --acento:#1F6899; --acento-vivo:#15507A; --acento-suave:#E1EFF9;
  --acento-tinta:#0A2438; --sobre-acento:#FFFFFF;
  --ambar:#B57A21; --ambar-suave:#F6EBD8; --alerta:#B33A08;
  --alba-1:#3E8FC4; --alba-2:#1F6899; --alba-3:#0E4B70;
  --sombra:0 1px 2px rgba(18,20,15,.04), 0 14px 34px -22px rgba(18,20,15,.3);
  --sombra-alta:0 2px 4px rgba(18,20,15,.05), 0 24px 60px -30px rgba(18,20,15,.45);
  --brillo:0 0 0 1px rgba(31,104,153,.26), 0 8px 26px -14px rgba(31,104,153,.32);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }

body{
  margin:0; background:var(--papel); color:var(--tinta); position:relative;
  font-family:"Schibsted Grotesk",-apple-system,system-ui,sans-serif;
  font-size:var(--t-base); line-height:1.6; -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01";
}
/* el cielo: resplandor del horizonte al amanecer, alto y ancho, detrás de todo */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(58rem 34rem at 50% -14%, color-mix(in srgb, var(--alba-1) 26%, transparent), transparent 64%),
    radial-gradient(40rem 24rem at 16% -6%, color-mix(in srgb, var(--alba-2) 14%, transparent), transparent 62%),
    radial-gradient(44rem 26rem at 88% 2%, color-mix(in srgb, var(--alba-3) 12%, transparent), transparent 60%);
}
/* la carta de navegación: rutas de gran círculo, retícula y aviones.
   Reemplaza al campo de estrellas, que leía "espacio" en vez de "vuelo". A diferencia
   de las estrellas, esta capa existe en los dos modos: el claro no tenía textura.
   Se desvanece antes de la zona de lectura, es atmósfera, no contenido. */
.carta{
  position:fixed; inset:0 0 auto; height:92vh; pointer-events:none; z-index:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 0%, #000 38%, transparent 92%);
  mask-image:linear-gradient(#000 0%, #000 38%, transparent 92%);
  animation:carta-entra .9s cubic-bezier(.22,.7,.3,1) both;
}
.carta svg{width:100%; height:100%; display:block}
@keyframes carta-entra{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none} }

/* la retícula es el papel, no el dibujo: tiene que estar y no verse */
.carta .reticula{fill:none; stroke:var(--tinta); stroke-width:1; opacity:.055}
/* las rutas sí se ven: son la firma de la página */
.carta .rutas{
  fill:none; stroke:url(#sv-ruta); stroke-width:1.7;
  stroke-dasharray:7 9; stroke-linecap:round; opacity:.34;
}
.carta .hitos{fill:none; stroke:url(#sv-ruta); stroke-width:1.6; opacity:.5}
.carta .aviones{fill:var(--alba-2); opacity:.62}
.carta .aviones .lejano{opacity:.5}
/* El avión del margen izquierdo vive en la franja que queda fuera de la columna
   de lectura. La carta va en position:fixed y el texto pasa por debajo al hacer
   scroll, así que un avión dentro de esa columna termina SIEMPRE sobre alguna
   línea: no hay coordenada segura, solo margen seguro. Bajo 1200 px el margen
   desaparece y con él el avión. */
@media (max-width:1200px){ .carta .aviones .margen{display:none} }

/* en claro el papel es casi blanco: la tinta pesa más, así que se baja todo */
:root[data-theme="light"] .carta .reticula{stroke:var(--tinta); opacity:.07}
:root[data-theme="light"] .carta .rutas{opacity:.3}
:root[data-theme="light"] .carta .aviones{opacity:.5}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .carta .reticula{stroke:var(--tinta); opacity:.07}
  :root:not([data-theme="dark"]) .carta .rutas{opacity:.3}
  :root:not([data-theme="dark"]) .carta .aviones{opacity:.5}
}
/* grano: le quita el plano digital a los fondos oscuros */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::before{opacity:.42}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) body::before{opacity:.42} }
.nav, .env, .env-angosto, .pie, section, header{position:relative; z-index:1}

.env{max-width:var(--ancho); margin:0 auto; padding:0 24px}
.env-angosto{max-width:820px; margin:0 auto; padding:0 24px}

h1,h2,h3,h4{font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif; font-weight:600; letter-spacing:-.025em; margin:0; text-wrap:balance}
/* el mínimo bajó de 38 a 34px para que «los que viajan seguido.» quepa en una línea
   en un teléfono de 390px: a 38 se partía y dejaba «seguido.» sola. */
h1{font-size:clamp(34px,6vw,66px); line-height:1.02}
.alba{
  background:var(--horizonte); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; display:inline-block;
}
/* si el navegador no recorta el degradado sobre el texto, queda legible igual */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .alba{color:var(--alba-3); -webkit-text-fill-color:var(--alba-3)}
}
/* El h2 medía 36px en portada y hubs y 27px en guías: el mismo nivel semántico se leía a
   2,32× el cuerpo en un hub y a 1,59× en una guía, y en el teléfono la brecha se cerraba a
   4px. Los dos clamps se acercan (34 y 31 arriba, 25 y 24 abajo) en vez de igualarse: una
   guía tiene once h2 en un documento largo y un hub tiene tres, así que el titular de guía
   puede pesar algo menos, pero no la mitad. */
h2{font-size:clamp(25px,3.2vw,34px); line-height:1.12}
h3{font-size:var(--t-l); line-height:1.25; letter-spacing:-.015em}
p{margin:0 0 16px; max-width:var(--ancho-texto)}
a{color:var(--acento); text-decoration-thickness:1px; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:2px}

/* la voz "boarding pass" */
.dato{font-family:"Spline Sans Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.etiqueta{
  font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--tenue);
}
.etiqueta-marca{color:var(--acento)}

/* Enlace de salto. Sin esto hay que atravesar los doce controles de la nav en cada una
   de las 134 páginas antes de llegar al texto, y sin <main> tampoco existe el atajo de
   "ir al contenido principal" de NVDA, JAWS y VoiceOver. Es WCAG 2.4.1, nivel A.
   Fuera de pantalla y no `display:none`, que lo sacaría del orden de tabulación. */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--acento); color:var(--sobre-acento);
  padding:11px 18px; border-radius:0 0 var(--radio-chico) 0;
  font-family:"Schibsted Grotesk",sans-serif; font-size:var(--t-s); font-weight:600;
  text-decoration:none;
}
.saltar:focus{left:0}
main:focus{outline:none}

/* ── nav ── */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--papel) 82%,transparent);
  backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid var(--linea);
}
.nav .env{display:flex; align-items:center; justify-content:space-between; gap:24px; height:62px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinta)}
/* El anillo se conserva y el punto pasa a ser un avión de papel. El anillo ya no se
   dibuja con `border`, porque el trazo del SVG y el del borde nunca terminan de calzar
   a tamaños chicos: ahora la marca entera es un solo dibujo vectorial, nítido a
   cualquier tamaño y del mismo peso que el punto que reemplaza. `currentColor` para
   que herede el acento de cada tema sin repetirlo acá. */
.marca .glifo{
  width:26px; height:26px; display:block; flex:none; color:var(--acento);
}
.marca .glifo svg{width:100%; height:100%; display:block}
.marca b{font-family:"Bricolage Grotesque",sans-serif; font-size:var(--t-base); font-weight:600; letter-spacing:-.03em}
/* El bloque de enlaces cede espacio antes de partirse: sin `min-width:0` un hijo flex
   no puede encogerse por debajo de su contenido, y con 8 entradas eso empujaba el menú
   a tres líneas. `nowrap` es el seguro: si algún día no cabe, se ve apretado, nunca
   apilado. */
.nav ul{
  display:flex; gap:26px; list-style:none; margin:0; padding:0;
  flex:0 1 auto; min-width:0; flex-wrap:nowrap;
}
.nav ul a{white-space:nowrap}
/* nowrap: sin esto un ítem de dos palabras se parte por la mitad y la barra crece
   a tres líneas. */
.nav ul a{font-size:var(--t-s); color:var(--tinta-2); text-decoration:none; font-weight:500;
          white-space:nowrap}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--acento)}
.nav-derecha{display:flex; align-items:center; gap:10px}
.nav-cta{
  font-family:"Schibsted Grotesk",sans-serif; font-size:var(--t-min); font-weight:600;
  padding:9px 17px; border-radius:var(--radio-chico); background:var(--acento);
  color:var(--sobre-acento); text-decoration:none; white-space:nowrap;
  transition:background .18s, box-shadow .18s;
}
.nav-cta{background:var(--horizonte); box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.nav-cta:hover{filter:brightness(1.06)}
/* alternador de tema: patrón de producto, no de blog */
.tema-btn{
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-chico);
  color:var(--tinta-2); transition:border-color .18s, color .18s;
}
.tema-btn:hover{border-color:var(--linea-viva); color:var(--acento)}
.tema-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6}
.tema-btn .luna{display:none}
:root[data-theme="light"] .tema-btn .luna{display:block}
:root[data-theme="light"] .tema-btn .sol{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .tema-btn .luna{display:block}
  :root:not([data-theme="dark"]) .tema-btn .sol{display:none}
}
/* Entre 820 y 1080px la nav no cabe con ocho ítems y empujaba la página al scroll
   horizontal. Se aprieta antes de colapsar, en vez de subir el punto de colapso: la
   nav es la única navegación que hay arriba, y esconderla en tablet es peor. */
/* Tres tramos, no uno: con 8 entradas el salto de 26 px a 14 px de una vez dejaba el
   menú suelto a 1200 px y apretado a 1000 px. */
@media(max-width:1240px){ .nav ul{gap:20px} }
@media(max-width:1080px){ .nav ul{gap:14px} .nav ul a{font-size:var(--t-min)} }
/* Entre 821 y 1010px los ocho enlaces no caben y no se estaban apretando: se estaban
   MONTANDO. Medido a 840px, la lista pedía 498px sobre un hueco de 437, y como `.nav ul`
   no recorta nada, los dos últimos enlaces quedaban 47px por debajo del botón de tema y
   del CTA, o sea que el clic se lo llevaba el botón de arriba y "Comparativas" era
   inalcanzable con el ratón.
   El CTA "Preguntar" del header apunta al mismo /preguntar/ que el PRIMER ítem de la
   lista, así que en ese tramo es un duplicado que cuesta 108px (98 de botón y 10 de
   hueco), justo el ancho que falta. Retirarlo no saca ningún destino de la barra, solo
   deja de ofrecer el mismo dos veces, y es el recurso que esta hoja ya usa bajo 560px.
   Se descartó subir el punto de colapso del menú a 1010px, que era la otra salida:
   esconder las ocho secciones detrás de una hamburguesa en tablet pierde mucho más que un
   botón repetido. */
@media(min-width:821px) and (max-width:1010px){ .nav-cta{display:none} }
/* Con esos 108px de vuelta, el piso de la escala solo hace falta hasta 900px: de ahí
   arriba la lista entra completa con el paso de 13,5px del tramo anterior, y la
   navegación principal deja de componerse en el tamaño reservado a las micro-etiquetas.
   El corte va en 900 y no en 880, que era lo justo: a 881px la lista todavía pedía 13px
   más de los que tenía y se los robaba al hueco que la separa del botón de tema. */
@media(max-width:900px){ .nav ul{gap:10px} .nav ul a{font-size:var(--t-micro)} .nav .env{gap:14px} }

/* ── menu de hamburguesa ──
   Bajo 820 px los ocho enlaces no caben y antes se ocultaban y punto: en movil la marca
   y el boton Preguntar eran la unica navegacion, y las ocho secciones quedaban fuera de
   alcance desde el header. El panel cuelga de `.nav .env`, que ya es `position:relative`,
   asi que no necesita calculos de viewport. Ojo con una trampa: el bloque contenedor de un
   absolute es la caja de RELLENO, y `.env` lleva `padding:0 24px`, asi que `left:0`
   cae en el canto de la pantalla, no en la columna de contenido. Por eso el panel va
   con `left:24px; right:24px`: es el unico elemento del sitio que se salia de la
   reticula, con las esquinas de 14px y el borde cortados contra el borde del telefono. */
.nav-burger{display:none}
@media(max-width:820px){
  .nav-burger{
    width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
    background:var(--superficie); border:1px solid var(--linea);
    border-radius:var(--radio-chico); color:var(--tinta-2);
    transition:border-color .18s, color .18s;
  }
  .nav-burger:hover{border-color:var(--linea-viva); color:var(--acento)}
  .nav-burger svg{width:18px; height:18px; fill:none; stroke:currentColor;
                  stroke-width:1.7; stroke-linecap:round}
  /* Las tres barras se vuelven una X cuando el menu esta abierto. El giro se hace sobre
     el centro del viewBox para que las diagonales se crucen donde corresponde. */
  .nav-burger svg path{transition:transform .2s, opacity .15s; transform-origin:12px 12px}
  .nav[data-menu="abierto"] .nav-burger .b1{transform:translateY(5px) rotate(45deg)}
  .nav[data-menu="abierto"] .nav-burger .b2{opacity:0}
  .nav[data-menu="abierto"] .nav-burger .b3{transform:translateY(-5px) rotate(-45deg)}

  .nav ul{
    display:block; position:absolute; top:calc(100% + 8px); left:24px; right:24px;
    background:var(--papel); border:1px solid var(--linea);
    border-radius:var(--radio); box-shadow:0 18px 40px rgba(0,0,0,.22);
    padding:6px; margin:0; z-index:60;
    /* `visibility` y no `display`: `display` no se puede animar y ademas sacaria los
       enlaces del arbol de accesibilidad de golpe. */
    visibility:hidden; opacity:0; transform:translateY(-6px); pointer-events:none;
    /* `visibility 0s .18s`: al CERRAR espera a que termine el desvanecido, y al ABRIR
       (regla de abajo, sin retardo) cambia de inmediato. Con `visibility .18s` en ambas
       direcciones el panel seguía computando `hidden` durante el primer fotograma, y a
       un elemento invisible el navegador le niega el foco: al abrir con el teclado la
       llamada a focus() fallaba en silencio. */
    transition:opacity .18s ease, transform .18s ease, visibility 0s .18s;
  }
  .nav[data-menu="abierto"] ul{
    visibility:visible; opacity:1; transform:none; pointer-events:auto;
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .nav ul li{display:block}
  .nav ul a{
    display:block; padding:11px 13px; font-size:var(--t-s); border-radius:var(--radio-chico);
    transition:background .14s, color .14s;
  }
  .nav ul a:hover{background:var(--superficie)}
  .nav ul a[aria-current]{background:var(--superficie); color:var(--acento)}
}
/* A 375 px la barra media 396 y el boton Preguntar se cortaba contra el borde: marca
   (170) + hamburguesa + tema + CTA (101) no caben. Se retira el CTA y el primer item del
   panel toma su lugar y su color, que es el mismo destino. La conversion no se pierde,
   cambia de sitio. */
@media(max-width:560px){
  .nav-cta{display:none}
  .nav ul li:first-child a{
    background:var(--horizonte); color:var(--sobre-acento); font-weight:600;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  }
  .nav ul li:first-child a:hover{background:var(--horizonte); filter:brightness(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .nav ul, .nav-burger svg path{transition:none}
}

/* ── hero ── */
.hero{padding:74px 0 52px; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-40% 0 0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, var(--linea) 1px, transparent 0);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(60% 50% at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(60% 50% at 50% 0%, #000 0%, transparent 75%);
}
.hero .kicker{margin-bottom:22px}
.pildora{
  position:relative; display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 7px;
  border:1px solid transparent; border-radius:100px;
  background:
    linear-gradient(var(--superficie), var(--superficie)) padding-box,
    var(--horizonte) border-box;
  font-size:var(--t-min); color:var(--tinta-2); margin-bottom:24px; text-decoration:none;
  transition:border-color .18s, transform .18s;
}
.pildora:hover{transform:translateY(-1px); box-shadow:0 8px 26px -14px var(--alba-2)}
.pildora b{
  font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); letter-spacing:.1em;
  text-transform:uppercase; background:var(--horizonte); color:var(--sobre-acento);
  padding:4px 9px; border-radius:100px; font-weight:500;
}
.pildora .flecha{color:var(--tenue)}
/* 15ch cortaba la segunda línea del titular en dos. El ancho va en ch para que la
   proporción se mantenga cuando el clamp del font-size achica el título. */
.hero h1{max-width:17ch}
.hero .bajada{margin:22px 0 0; font-size:var(--t-l); color:var(--tinta-2); max-width:52ch}
/* troquel: el detalle de viaje, sutil */
.troquel{height:1px; background-image:linear-gradient(90deg,var(--linea) 0 6px,transparent 6px 12px); background-size:12px 1px; margin:34px 0}
/* arco de ruta: el gesto de viaje que ocupa el lugar del típico arco decorativo */
.ruta{
  position:absolute; left:50%; top:-46%; width:min(1600px,164%); transform:translateX(-50%);
  pointer-events:none; z-index:0; opacity:.75;
}
@media(max-width:820px){ .ruta{top:-30%; opacity:.5} }
.ruta svg{width:100%; height:auto; display:block}
.ruta .trazo{fill:none; stroke:url(#alba); stroke-width:1.2; opacity:.55}
.ruta .trazo-punteado{fill:none; stroke:var(--linea-viva); stroke-width:1; stroke-dasharray:2 9; opacity:.8}
.ruta .nodo{fill:var(--acento)}
.ruta .halo{fill:var(--acento); opacity:.18}
:root[data-theme="light"] .ruta{opacity:.5}

/* ── buscador ── */
.buscador{margin-top:34px; max-width:760px}
/* La caja tiene que leerse como caja de escribir antes de que nadie la toque. Con un
   borde de 1px en --linea-viva y el botón grande adentro, en móvil el botón se llevaba
   toda la atención y el campo parecía decoración: la persona no se daba cuenta de que
   ahí se escribe. Ahora el borde es de 1,5px y tira al acento, hay una lupa a la
   izquierda, y el cursor de texto se extiende a toda la caja para que el objetivo táctil
   sea la caja entera y no solo el textarea. */
.buscador-caja{
  display:flex; gap:10px; align-items:flex-end; cursor:text;
  background:color-mix(in srgb, var(--superficie) 78%, transparent);
  backdrop-filter:blur(14px);
  border:1.5px solid color-mix(in srgb, var(--acento) 42%, var(--linea-viva));
  border-radius:var(--radio); padding:8px 8px 8px 14px;
  box-shadow:var(--sombra-alta); transition:border-color .18s, box-shadow .18s;
}
.buscador-caja:hover{border-color:color-mix(in srgb, var(--acento) 62%, var(--linea-viva))}
.buscador-caja:focus-within{border-color:var(--acento); box-shadow:var(--brillo)}
/* Lupa y campo van juntos en su propia fila. Cuando la caja se apila en móvil, sin esto
   el icono se quedaba solo en un renglón de 48 px encima del texto, separado de lo que
   acompaña y comiéndose el alto de la caja. */
.buscador-campo{display:flex; gap:10px; align-items:flex-start; flex:1; min-width:0}
.buscador-ico{
  display:flex; align-items:center; height:48px; flex:none; color:var(--tenue);
  transition:color .18s;
}
.buscador-ico .ico{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
                   stroke-linecap:round}
.buscador-caja:focus-within .buscador-ico{color:var(--acento)}
/* El cursor que parpadea al final del texto que se escribe solo. Es un borde derecho y no
   un pseudoelemento porque el marcador de posición no admite hijos. */
.buscador textarea.rotando::placeholder{color:var(--tinta-2)}
@keyframes sv-cursor{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
.buscador textarea{
  flex:1; border:none; background:none; resize:none; color:var(--tinta);
  font-family:"Schibsted Grotesk",sans-serif; font-size:var(--t-l); line-height:1.4;
  padding:12px 0; min-height:48px; max-height:180px; overflow-y:auto;
}
.buscador textarea:focus{outline:none}
.buscador textarea::placeholder{color:var(--tenue)}
.btn-preguntar{
  font-family:"Schibsted Grotesk",sans-serif; font-size:var(--t-s); font-weight:600;
  height:48px; padding:0 22px; border:none; border-radius:var(--radio-chico);
  background:var(--horizonte); color:var(--sobre-acento); cursor:pointer; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3); transition:filter .15s, box-shadow .15s;
}
.btn-preguntar:hover{filter:brightness(1.06)}

.btn-preguntar:disabled{opacity:.4; cursor:not-allowed}
/* Con flex-wrap el reparto lo decidía el ancho natural de cada cifra (148/164/114/105px),
   así que las cuatro métricas caían 1/1/2 a 320px y 1/2/1 a 375px: la prueba social de la
   portada se leía como una lista rota y el patrón cambiaba entre dos teléfonos. En grilla
   son 2×2 abajo y una fila de cuatro arriba, siempre igual. */
.metricas{display:grid; grid-template-columns:repeat(2,1fr); gap:24px 20px; margin-top:30px; padding-top:24px; border-top:1px solid var(--linea)}
@media(min-width:760px){ .metricas{grid-template-columns:repeat(4,1fr); gap:28px} }
.metrica b{
  display:block; font-family:"Spline Sans Mono",monospace; font-size:var(--t-2xl);
  letter-spacing:-.03em; margin-bottom:3px;
  background:var(--horizonte); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .metrica b{color:var(--tinta); -webkit-text-fill-color:var(--tinta)}
}
.metrica span{font-size:var(--t-min); color:var(--tenue)}

.ejemplos{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.ejemplo{
  font-family:"Schibsted Grotesk",sans-serif; font-size:var(--t-min); padding:8px 14px;
  border:1px solid var(--linea); border-radius:100px; background:transparent;
  color:var(--tinta-2); cursor:pointer; transition:.15s; text-align:left;
}
.ejemplo:hover{border-color:var(--acento); color:var(--acento); background:var(--superficie)}

/* ── secciones ── */
.seccion{padding:64px 0; border-top:1px solid var(--linea)}
.seccion-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap}
.etiqueta-marca::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--acento); margin-right:9px; vertical-align:2px;
  box-shadow:0 0 8px var(--acento);
}
.seccion-cab p{margin:10px 0 0; color:var(--tinta-2); max-width:56ch}
/* Sin `white-space:nowrap`. Con él, el rótulo largo de las calculadoras ("Pregúntalo y te
   respondemos con la fuente", 308px) no podía partirse y empujaba el documento a 332px
   sobre una ventana de 320: scroll horizontal en toda la página, nav pegajosa descuadrada
   y el fondo estirado. Los otros once usos son etiquetas de dos palabras que no se parten
   igual. Lo único que sigue sin poder quedarse solo es la flecha, y para eso basta el
   espacio duro del ::after: viaja pegada a la última palabra. */
.ver-todo{font-size:var(--t-s); font-weight:500; text-decoration:none}
.ver-todo::after{content:"\00a0→"}

/* ── grillas y tarjetas ── */
.grilla{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.bento .tarjeta{display:flex; flex-direction:column; justify-content:space-between}
.bento .ancho-2{grid-column:span 2}
.bento .alto-2{grid-row:span 2}
@media(max-width:900px){ .bento{grid-template-columns:repeat(2,1fr)} .bento .ancho-2{grid-column:span 2} }
@media(max-width:560px){ .bento{grid-template-columns:1fr} .bento .ancho-2{grid-column:span 1} }
@media(max-width:860px){ .g3{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .g2,.g3{grid-template-columns:1fr} }

.tarjeta{
  background:color-mix(in srgb, var(--superficie) 72%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:20px 22px; text-align:left; font:inherit; color:inherit; cursor:pointer;
  transition:border-color .16s, transform .16s, box-shadow .16s; display:block;
  text-decoration:none; width:100%;
}
.tarjeta{position:relative; overflow:hidden}
.tarjeta::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, color-mix(in srgb, var(--acento) 45%, transparent), transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
  opacity:0; transition:opacity .2s;
}
.tarjeta:hover::after{opacity:1}
.tarjeta:hover{
  border-color:transparent; background:var(--superficie-2);
  transform:translateY(-3px); box-shadow:var(--sombra-alta);
}
.tarjeta:hover h3{color:var(--acento)}
.tarjeta h3{transition:color .16s}
.tarjeta h3{margin-bottom:7px}
.tarjeta p{margin:0; font-size:var(--t-s); color:var(--tenue)}
.tarjeta .etiqueta{display:block; margin-bottom:11px}

/* pregunta popular: se lee como una pregunta, con flecha que aparece */
.pregunta-pop{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.pregunta-pop span:first-child{font-size:var(--t-base); font-weight:500; line-height:1.4}
.pregunta-pop .flecha{color:var(--acento); opacity:0; transform:translateX(-4px); transition:.16s; flex:none}
.tarjeta:hover .flecha{opacity:1; transform:translateX(0)}

/* tema: icono lineal + nombre */
.tema{display:flex; gap:15px; align-items:flex-start}
.insignia{
  position:relative; width:44px; height:44px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 30%, var(--superficie-2), var(--superficie));
  border:1px solid var(--linea-viva);
}
/* retículas de instrumento: cuatro marcas en las esquinas del cuadro que la contiene */
.insignia::before, .insignia::after{
  content:""; position:absolute; pointer-events:none; opacity:.5;
}
.insignia::before{
  inset:-9px; border-radius:2px;
  background:
    radial-gradient(circle 1.5px at 0 0, var(--linea-viva) 0 1.5px, transparent 1.5px),
    radial-gradient(circle 1.5px at 100% 0, var(--linea-viva) 0 1.5px, transparent 1.5px),
    radial-gradient(circle 1.5px at 0 100%, var(--linea-viva) 0 1.5px, transparent 1.5px),
    radial-gradient(circle 1.5px at 100% 100%, var(--linea-viva) 0 1.5px, transparent 1.5px);
}
/* línea guía que cruza la tarjeta a la altura del instrumento */
.insignia::after{
  left:-24px; right:-999px; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 78%, transparent);
  opacity:.55;
}
.tema svg{width:19px; height:19px; stroke:var(--acento); fill:none; stroke-width:1.5; position:relative; z-index:1}
.tarjeta:hover .insignia{border-color:color-mix(in srgb, var(--acento) 55%, transparent)}
.tema b{display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:var(--t-base); font-weight:600; margin-bottom:3px}
.tema span{font-size:var(--t-min); color:var(--tenue); line-height:1.4}

/* ── sellos de fuente ── */
.sello{
  display:inline-flex; align-items:center; gap:6px; font-family:"Spline Sans Mono",monospace;
  font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; padding:4px 9px;
  border-radius:3px; font-weight:500;
}
.sello-oficial{background:var(--horizonte); color:var(--sobre-acento)}
.sello-comunidad{background:var(--superficie-2); color:var(--tinta-2); border:1px solid var(--linea-viva)}
.chip-pronto{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:100px;
  border:1px solid var(--linea-viva); background:var(--superficie-2);
  font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--tenue); vertical-align:2px;
}
.sello-cambio{background:var(--ambar-suave); color:var(--ambar); border:1px solid color-mix(in srgb,var(--ambar) 35%,transparent)}

/* ── feed de cambios ── */
.feed{border-top:1px solid var(--linea)}
.evento{display:grid; grid-template-columns:130px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--linea); align-items:start}
@media(max-width:620px){ .evento{grid-template-columns:1fr; gap:8px} }
.evento .fecha{font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); color:var(--tenue); padding-top:2px}
.evento h3{font-size:var(--t-base); margin-bottom:6px}
.evento p{margin:0; font-size:var(--t-base); color:var(--tinta-2)}
.evento.alerta .fecha{color:var(--ambar)}

/* ── respuesta ── */
.respuesta{
  background:var(--superficie); border:1px solid var(--linea);
  border-left:3px solid var(--acento); border-radius:0 var(--radio) var(--radio) 0;
  padding:26px 30px; box-shadow:var(--sombra-alta); font-size:var(--t-base);
}
.respuesta p:last-child{margin-bottom:0}
.respuesta ul{margin:0 0 14px; padding-left:22px}
.respuesta li{margin-bottom:7px}
.respuesta strong{font-weight:600}
.respuesta code{font-family:"Spline Sans Mono",monospace; font-size:.87em; background:var(--superficie-2); padding:1px 5px; border-radius:3px}
/* El caso concreto es una frase, no un módulo: la caja de color lo convertía en
   un bloque de producto al final de cada respuesta, y con una etiqueta encima que
   anunciaba lo obvio. Ahora es lo que era, una nota al pie del argumento, con un
   filo a la izquierda que la separa sin gritar. */
.caso{
  margin:18px 0 0; padding:2px 0 2px 16px;
  border-left:2px solid color-mix(in srgb,var(--acento) 40%,transparent);
  color:var(--tinta-2); font-size:var(--t-base);
}
.caso p:last-child{margin-bottom:0}
.cursor{display:inline-block; width:8px; height:1.05em; background:var(--acento); vertical-align:-2px; animation:parpadeo 1s steps(2) infinite}
@keyframes parpadeo{50%{opacity:0}}

/* el bloque de fuentes, plegado: presente pero sin tapar la respuesta */
.fuentes{margin-top:30px; border-top:1px solid var(--linea); padding-top:16px}
.fuentes summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border:1px solid var(--linea-viva); border-radius:999px;
  background:var(--superficie); transition:border-color .18s, background .18s;
}
.fuentes summary::-webkit-details-marker{display:none}
.fuentes summary::after{
  content:""; width:6px; height:6px; margin-left:2px;
  border-right:1.6px solid var(--tenue); border-bottom:1.6px solid var(--tenue);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s;
}
.fuentes[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.fuentes summary:hover{border-color:var(--acento); background:var(--superficie-2)}
.fuentes summary:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

.fuente-card{
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio);
  padding:15px 17px; transition:border-color .16s;
}
.fuente-card:hover{border-color:var(--linea-viva)}
.fuente-card .sello{margin-bottom:9px}
.fuente-card h4{font-size:var(--t-s); margin:0 0 6px; font-family:"Schibsted Grotesk",sans-serif; font-weight:600}
.fuente-card p{margin:0; font-size:var(--t-min); color:var(--tinta-2)}
.fuente-card .url{font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); color:var(--tenue); word-break:break-all; margin-top:9px; display:block; text-decoration:none}
.fuente-card .url:hover{color:var(--acento)}

/* ── tablas ── */
.tabla-env{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); background:var(--superficie)}
/* El mínimo de 560px era único para las 163 tablas del sitio, y 51 de ellas tienen dos
   columnas: a 320px eso escondía 290px, el 52% de la tabla, y cortaba la respuesta a
   mitad de palabra ("36 me…"). Con dos columnas el contenido cabe envolviendo texto, así
   que el mínimo solo se aplica desde la tercera columna. :has() es la única forma de
   contarlas sin tocar el generador; donde no exista, el @supports devuelve el mínimo
   viejo para todas, que es el comportamiento de antes. */
table{border-collapse:collapse; width:100%; font-size:var(--t-s); min-width:0}
.tabla-env table:has(thead th:nth-child(3)){min-width:560px}
@supports not (selector(:has(*))){ .tabla-env table{min-width:560px} }
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--tabla-linea)}
th{font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2); font-weight:500; background:var(--tabla-cab)}
tbody tr{transition:background .14s}
tbody tr:hover{background:var(--superficie-2)}
td:first-child{font-weight:500}
tr:last-child td{border-bottom:none}
td.si{color:var(--acento); font-weight:600}
td.no{color:var(--tenue)}

/* ── avisos ── */
/* ── insignias de categoría LATAM Pass ── */
/* PNG de 133-144px: hasta 48 de despliegue se ven nítidas, más arriba no. */
.ins-cat{display:inline-block; vertical-align:-.22em; flex:none}
.cat-col{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.cat-col > span{white-space:nowrap}
/* en la fila de encabezado la tabla centra la columna completa */
th .cat-col{margin:0 auto}
/* la insignia en el resultado de la calculadora, al lado del nombre de la categoría.
   El flex separa; sin esto la imagen y el nombre quedaban pegados o desalineados. */
.cat-linea{display:flex; align-items:center; gap:10px}
.cat-linea .ins-cat{vertical-align:baseline}

/* ── hubs de tema: prosa dentro de una columna ancha ── */
.hub-prosa{max-width:var(--ancho-texto)}
.hub-prosa ul{margin:0 0 16px; padding-left:22px}
.hub-prosa li{margin-bottom:9px}
.hub-prosa p:last-child, .hub-prosa ul:last-child{margin-bottom:0}
.aviso.hub-prosa, .caso.hub-prosa{max-width:none}
.aviso.hub-prosa p, .caso.hub-prosa p{max-width:none}

.aviso{background:var(--ambar-suave); border-left:3px solid var(--ambar); border-radius:0 var(--radio) var(--radio) 0; padding:15px 19px; font-size:var(--t-base)}
.aviso p:last-child{margin-bottom:0}
.nota{font-size:var(--t-min); color:var(--tenue)}

/* ── confianza (3 columnas) ── */
.pilar h3{margin-bottom:9px}
.pilar p{font-size:var(--t-base); color:var(--tinta-2); margin:0}
.pilar .num{font-family:"Spline Sans Mono",monospace; font-size:var(--t-4xl); color:var(--acento); display:block; margin-bottom:10px; letter-spacing:-.03em}

/* ── comunidad teaser ── */
.teaser{
  background:
    radial-gradient(30rem 18rem at 15% 0%, color-mix(in srgb, var(--alba-1) 22%, transparent), transparent 70%),
    linear-gradient(140deg, var(--superficie-2), var(--superficie));
  border:1px solid var(--linea-viva); color:var(--tinta);
  border-radius:var(--radio); padding:44px; position:relative; overflow:hidden;
}
.teaser h2{color:var(--tinta); max-width:18ch}
.teaser p{color:var(--tinta-2); max-width:48ch; margin-top:14px}
.teaser .etiqueta{color:var(--acento)}

/* ── footer ── */
.pie{border-top:1px solid var(--linea); padding:44px 0 56px; margin-top:20px}
.pie .env{display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px}
@media(max-width:720px){ .pie .env{grid-template-columns:1fr; gap:24px} }
/* «Producto» y «Transparencia» encabezan columnas de enlaces de 15px y salían a 10,5px en
   --tenue: el título quedaba 28% más chico y más apagado que sus propios hijos. Sube al
   piso de la escala y al color del cuerpo; el tracking de .16em y las mayúsculas ya lo
   separan de la lista sin necesidad de achicarlo. */
.pie h4{font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); font-weight:500; margin:0 0 12px}
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pie a{font-size:var(--t-s); color:var(--tinta-2); text-decoration:none}
.pie a:hover{color:var(--acento)}
.pie .legal{font-size:var(--t-min); color:var(--tenue); max-width:46ch; margin-top:14px}

/* ── responsive: el buscador se apila en pantallas chicas ── */
@media(max-width:560px){
  .buscador-caja{flex-direction:column; align-items:stretch; padding:14px}
  /* Dos renglones de alto: la pregunta que se escribe sola no cabe en uno a este
     ancho, y con 48 px aparecía una barra de scroll dentro del campo vacío. */
  .buscador textarea{padding:0 0 12px; font-size:var(--t-base); min-height:66px}
  .buscador-ico{height:30px}
  .btn-preguntar{width:100%; height:46px}
  .hero{padding:52px 0 40px}
  .iata{top:34px; font-size:64px}
  .seccion{padding:48px 0}
  .teaser{padding:28px 22px}
  .respuesta{padding:20px}
  .evento{padding:16px 0}
}

/* ══ calculadoras ═══════════════════════════════════════════════════════════
   Dos columnas: los controles a la izquierda, el resultado pegado a la derecha
   mientras mueves los sliders. En pantalla chica el resultado va primero,
   porque es lo que la persona vino a ver.
   Todo el movimiento muere solo bajo prefers-reduced-motion (regla global). */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
@media(max-width:940px){
  .calc{grid-template-columns:1fr; gap:18px}
  .calc-controles{order:2}
  .calc-salida{order:1}
}
/* ── el hueco reservado de la calculadora ──────────────────────────────────
   El HTML entrega `<div id="calc" data-calc="…"></div>` vacío y calc.js le mete entre
   2.056 y 5.298 px DENTRO del primer viewport: si el navegador pinta antes de que lleguen
   los 140 KB de JS (lo normal en 4G), todo lo que hay debajo se desplaza de golpe, con una
   fracción de impacto de ~0,35 contra un umbral de 0,1. Acá se reserva ese alto.

   `:empty` y no `min-height` a secas: la reserva vale exactamente mientras el div está
   vacío, y en cuanto calc.js escribe el primer nodo deja de aplicar y manda el alto real.
   Así una reserva imperfecta no puede recortar ni estirar la calculadora ya montada.
   `contain-intrinsic-size` no sirve acá: pide `content-visibility`, que además se salta el
   pintado del contenido cuando el elemento SÍ tiene hijos.

   Los valores son alturas medidas en el navegador, una por calculadora y por tramo de
   ancho, porque el alto de una columna de controles depende del ancho: la misma
   calculadora mide 5.298 px a 375 y 2.254 px a 1.280. Los tramos siguen los saltos reales
   del layout (940px es donde .calc pasa a dos columnas, 1.120px es el tope de --ancho).
   Si se agrega o se saca un control hay que volver a medir. */
#calc[data-calc="pasaje"]:empty{min-height:5662px}
#calc[data-calc="canje"]:empty{min-height:4712px}
#calc[data-calc="categoria"]:empty{min-height:3467px}
#calc[data-calc="club"]:empty{min-height:2286px}
#calc[data-calc="salones"]:empty{min-height:2189px}
@media(max-width:360px){
  #calc[data-calc="pasaje"]:empty{min-height:5935px}
  #calc[data-calc="canje"]:empty{min-height:5283px}
  #calc[data-calc="categoria"]:empty{min-height:3978px}
  #calc[data-calc="club"]:empty{min-height:2926px}
  #calc[data-calc="salones"]:empty{min-height:2565px}
}
@media(min-width:480px){
  #calc[data-calc="pasaje"]:empty{min-height:4116px}
  #calc[data-calc="canje"]:empty{min-height:3159px}
  #calc[data-calc="categoria"]:empty{min-height:2895px}
  #calc[data-calc="club"]:empty{min-height:1916px}
  #calc[data-calc="salones"]:empty{min-height:1640px}
}
@media(min-width:700px){
  #calc[data-calc="pasaje"]:empty{min-height:3664px}
  #calc[data-calc="canje"]:empty{min-height:2692px}
  #calc[data-calc="categoria"]:empty{min-height:2690px}
  #calc[data-calc="club"]:empty{min-height:1668px}
  #calc[data-calc="salones"]:empty{min-height:1477px}
}
@media(min-width:941px){
  #calc[data-calc="pasaje"]:empty{min-height:2995px}
  #calc[data-calc="canje"]:empty{min-height:1795px}
  #calc[data-calc="categoria"]:empty{min-height:1753px}
  #calc[data-calc="club"]:empty{min-height:1290px}
  #calc[data-calc="salones"]:empty{min-height:880px}
}
@media(min-width:1120px){
  #calc[data-calc="pasaje"]:empty{min-height:2422px}
  #calc[data-calc="canje"]:empty{min-height:1680px}
  #calc[data-calc="categoria"]:empty{min-height:1667px}
  #calc[data-calc="club"]:empty{min-height:1100px}
  #calc[data-calc="salones"]:empty{min-height:802px}
}

.calc-salida{position:sticky; top:78px; display:grid; gap:14px}
.calc-controles{display:grid; gap:14px; align-content:start}
@media(max-width:940px){ .calc-salida{position:static} }
.calc-oculto{display:none !important}

/* entrada escalonada de cada bloque */
@keyframes entra{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.entra{animation:entra .5s cubic-bezier(.22,1,.36,1) both}
@keyframes cambia{0%{opacity:.25; transform:translateY(-2px)} 100%{opacity:1; transform:none}}
.cambia{animation:cambia .28s ease-out}

.panel{
  background:color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--linea); border-radius:var(--radio); padding:22px;
  box-shadow:var(--sombra); position:relative; overflow:hidden;
}
.panel::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acento) 45%,transparent),transparent);
  opacity:.5;
}
.panel > h3, .panel-cab h3{font-size:var(--t-s)}
.panel > h3{margin-bottom:16px}
.panel-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}

/* ── campos ── */
.campo{margin-bottom:18px}
.campo:last-child{margin-bottom:0}
.campo .rotulo{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:var(--t-min); font-weight:500; color:var(--tinta); margin-bottom:9px;
}
.campo .valor{
  font-family:"Spline Sans Mono",monospace; font-size:var(--t-min); color:var(--acento);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.campo .ayuda{display:block; font-size:var(--t-min); color:var(--tenue); margin-top:8px; line-height:1.6}

/* control segmentado */
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg button{
  flex:1 1 auto; min-width:0; padding:9px 12px; border-radius:var(--radio-chico);
  border:1px solid var(--linea-viva); background:var(--superficie-2);
  color:var(--tinta-2); font-family:inherit; font-size:var(--t-min); font-weight:500;
  cursor:pointer; transition:border-color .16s, color .16s, background .16s, transform .16s;
  text-align:center; white-space:nowrap; position:relative; overflow:hidden;
}
.seg button:hover{border-color:var(--acento); color:var(--acento); transform:translateY(-1px)}
.seg button[aria-pressed="true"]{
  background:var(--acento-suave); border-color:var(--acento); color:var(--acento);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acento) 35%,transparent), 0 6px 18px -12px var(--acento);
}
@keyframes late{0%{transform:scale(1)} 40%{transform:scale(1.045)} 100%{transform:scale(1)}}
.seg button.late{animation:late .34s cubic-bezier(.22,1,.36,1)}
.seg.seg-lista{flex-direction:column}
.seg.seg-lista button{text-align:left; white-space:normal; flex:none}
.seg.seg-2 button{flex:1 1 calc(50% - 3px)}

/* slider con pista rellena.
   El alto de 44px es blanco tactil, no dibujo: la pista sigue midiendo 5px y el pulgar
   22px, lo que crece es el area que recibe el dedo. Antes eran 18px de pulgar dentro de un
   control de 24px, y el dedo cubre unos 45px: se fallaba el agarre, se tocaba la pista y
   el valor saltaba de golpe en vez de deslizarse. En estas paginas el slider ES el control
   principal, hay once repartidos en las cinco calculadoras.
   El margen negativo del pulgar se calcula contra el alto del control: WebKit apoya la
   pista arriba del cuadro de contenido, asi que la mitad del alto menos la mitad de la
   pista menos la mitad del pulgar es lo que hay que bajar. */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:44px;
  background:transparent; cursor:pointer; display:block; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:3px; margin:19.5px 0;
  background:linear-gradient(90deg,var(--alba-1),var(--alba-2)) 0/var(--pct,50%) 100% no-repeat, var(--bruma);
}
input[type=range]::-moz-range-track{
  height:5px; border-radius:3px;
  background:linear-gradient(90deg,var(--alba-1),var(--alba-2)) 0/var(--pct,50%) 100% no-repeat, var(--bruma);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-10.5px;
  border-radius:50%; background:var(--papel); border:2px solid var(--acento);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 14%,transparent), 0 4px 12px -4px var(--acento);
  transition:box-shadow .16s, transform .12s;
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--papel);
  border:2px solid var(--acento);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 14%,transparent);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:active::-webkit-slider-thumb{
  box-shadow:0 0 0 7px color-mix(in srgb,var(--acento) 20%,transparent), 0 4px 14px -4px var(--acento);
}
input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 7px color-mix(in srgb,var(--acento) 26%,transparent);
}

/* ── cabecera del resultado ── */
.res-cabecera{
  position:relative; overflow:hidden; border-radius:var(--radio); padding:26px 24px;
  border:1px solid var(--linea-viva);
  background:linear-gradient(150deg, var(--superficie-2), var(--superficie) 62%);
  box-shadow:var(--sombra-alta);
}
.res-cabecera::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:150%;
  background:
    radial-gradient(18rem 12rem at 18% 8%, color-mix(in srgb,var(--alba-1) 40%,transparent), transparent 65%),
    radial-gradient(16rem 11rem at 78% 4%, color-mix(in srgb,var(--alba-2) 32%,transparent), transparent 62%);
  opacity:.5; filter:blur(6px); animation:deriva 16s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes deriva{
  from{transform:translate3d(-3%,0,0) scale(1)}
  to{transform:translate3d(5%,3%,0) scale(1.08)}
}
.res-cabecera > *{position:relative; z-index:1}
/* destello cuando cruzas un hito o cambia el veredicto */
@keyframes logro{
  0%{box-shadow:var(--sombra-alta), 0 0 0 0 color-mix(in srgb,var(--acento) 55%,transparent)}
  100%{box-shadow:var(--sombra-alta), 0 0 0 16px transparent}
}
.res-cabecera.logro{animation:logro .75s ease-out}
.res-cabecera[data-zona="no"]{border-color:var(--linea-viva)}
.res-cabecera[data-zona="ojo"]{border-color:color-mix(in srgb,var(--ambar) 42%,var(--linea-viva))}
.res-cabecera[data-zona="si"]{border-color:color-mix(in srgb,var(--acento) 45%,var(--linea-viva))}

.cifra{
  font-family:"Spline Sans Mono",monospace; font-size:clamp(36px,5.6vw,52px);
  line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums;
  display:block; margin:6px 0 7px; font-weight:500;
}
.cifra-sub{font-size:var(--t-s); color:var(--tinta-2); margin:0}
.cifra-par{display:flex; gap:30px; flex-wrap:wrap; margin-top:20px; padding-top:17px; border-top:1px solid var(--linea)}
.cifra-par > div > b{
  display:block; font-family:"Spline Sans Mono",monospace; font-size:var(--t-xl);
  letter-spacing:-.03em; color:var(--tinta); font-weight:500; font-variant-numeric:tabular-nums;
}
.cifra-par > div > span{font-size:var(--t-min); color:var(--tenue)}

/* barra de metas */
.metas{margin-top:22px}
.meta-pista{
  position:relative; height:10px; border-radius:6px; background:var(--bruma);
  overflow:hidden; margin-bottom:10px;
}
.meta-avance{
  height:100%; border-radius:6px; background:var(--horizonte);
  transition:width .55s cubic-bezier(.22,1,.36,1); position:relative; overflow:hidden;
}
.meta-avance::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-100%); animation:barrido 2.6s ease-in-out infinite;
}
@keyframes barrido{0%{transform:translateX(-100%)} 55%,100%{transform:translateX(220%)}}
.meta-hitos{position:relative; height:36px}
.meta-hito{
  position:absolute; top:0; transform:translateX(-50%); text-align:center;
  font-size:var(--t-micro); color:var(--tenue); font-family:"Spline Sans Mono",monospace;
  line-height:1.4; transition:color .3s;
}
.meta-hito::before{
  content:""; display:block; width:1px; height:8px; background:var(--linea-viva);
  margin:0 auto 5px; transition:background .3s, box-shadow .3s;
}
.meta-hito:first-child{transform:translateX(-25%)}
.meta-hito:first-child::before{margin-left:0}
.meta-hito:last-child{transform:translateX(-88%); text-align:right}
.meta-hito:last-child::before{margin-right:3px}
.meta-hito.logrado{color:var(--acento)}
.meta-hito.logrado::before{background:var(--acento); box-shadow:0 0 8px var(--acento)}

/* ── filas de resultado ── */
.filas{display:grid}
.fila{
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--linea); transition:padding .2s;
}
.fila:last-child{border-bottom:none}
.fila b{font-size:var(--t-s); font-weight:500; display:block}
.fila .porque{font-size:var(--t-min); color:var(--tenue); margin-top:5px; line-height:1.6; max-width:46ch}
.fila .porque b{display:inline; font-size:inherit; color:var(--tinta-2)}
.marca{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); padding:5px 10px 5px 8px;
  border-radius:99px; white-space:nowrap; border:1px solid transparent;
  transition:background .25s, color .25s, border-color .25s;
}
.ico-mini{
  width:12px; height:12px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.marca-si{background:var(--acento-suave); color:var(--acento); border-color:color-mix(in srgb,var(--acento) 32%,transparent)}
.marca-no{background:var(--superficie-2); color:var(--tenue); border-color:var(--linea-viva)}
.marca-ojo{background:var(--ambar-suave); color:var(--ambar); border-color:color-mix(in srgb,var(--ambar) 34%,transparent)}

/* ── medidor del canje ── */
.veredicto{text-align:center; padding:4px 0 2px}
.veredicto .cifra{font-size:clamp(42px,7.4vw,64px)}
.medidor{
  position:relative; height:10px; border-radius:6px; margin:22px 0 9px;
  /* los cortes están en $9 y $13 sobre una escala de $0 a $20 */
  background:linear-gradient(90deg,
    var(--bruma) 0%, var(--bruma) 42%,
    color-mix(in srgb,var(--ambar) 55%,var(--bruma)) 45%,
    color-mix(in srgb,var(--ambar) 55%,var(--bruma)) 62%,
    color-mix(in srgb,var(--acento) 60%,var(--bruma)) 65%,
    var(--acento) 100%);
}
.aguja{
  position:absolute; top:-6px; width:3px; height:22px; border-radius:3px;
  background:var(--tinta); transform:translateX(-50%);
  transition:left .5s cubic-bezier(.34,1.4,.64,1);
  box-shadow:0 0 0 2px var(--papel), 0 0 12px -2px var(--tinta);
}
.medidor-rotulos{display:flex; justify-content:space-between; font-size:var(--t-micro); color:var(--tenue); font-family:"Spline Sans Mono",monospace}

/* ── cierre y hallazgos ── */
.cierre{
  position:relative; overflow:hidden;
  border-left:3px solid var(--acento); background:var(--acento-suave);
  border-radius:0 var(--radio) var(--radio) 0; padding:17px 20px; font-size:var(--t-base); line-height:1.6;
}
.cierre::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(14rem 8rem at 92% 110%, color-mix(in srgb,var(--alba-1) 26%,transparent), transparent 70%);
}
.cierre p{margin:0; position:relative; z-index:1; max-width:none}
.cierre .etiqueta{display:block; margin-bottom:8px; color:var(--acento); position:relative; z-index:1}
.cierre b{color:var(--tinta)}
.hallazgo{
  border:1px solid var(--linea-viva); border-radius:var(--radio);
  background:linear-gradient(140deg, color-mix(in srgb,var(--superficie-2) 70%,transparent), transparent);
  padding:15px 18px; font-size:var(--t-s); color:var(--tinta-2); line-height:1.6;
}
.hallazgo b{color:var(--tinta)}
.pie-fuente{
  display:flex; flex-wrap:wrap; gap:9px 16px; align-items:center;
  font-size:var(--t-micro); color:var(--tenue); font-family:"Spline Sans Mono",monospace;
}
.btn-copiar{
  margin-left:auto; padding:9px 15px; border-radius:var(--radio-chico);
  border:1px solid var(--linea-viva); background:var(--superficie-2); color:var(--tinta-2);
  font-family:inherit; font-size:var(--t-micro); font-weight:500; cursor:pointer; transition:.16s;
}
.btn-copiar:hover{border-color:var(--acento); color:var(--acento)}
.btn-copiar.listo{border-color:var(--acento); color:var(--acento); background:var(--acento-suave)}

/* ── tarjetas del índice de calculadoras ── */
.calc-card{position:relative; overflow:hidden}
.calc-card .num-calc{
  font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); color:var(--tenue);
  letter-spacing:.16em; display:block; margin-bottom:12px;
}
.calc-card .mini{
  display:flex; gap:5px; align-items:flex-end; height:38px; margin-top:18px;
}
.calc-card .mini i{
  display:block; width:8px; border-radius:3px; background:var(--bruma);
  transform-origin:bottom; transition:background .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
/* al pasar el cursor las barras se encienden en cascada, como si calcularan */
.calc-card:hover .mini i{transform:scaleY(1.14)}
.calc-card:hover .mini i:nth-child(1){background:var(--alba-1); transition-delay:0s}
.calc-card:hover .mini i:nth-child(2){background:color-mix(in srgb,var(--alba-1),var(--alba-2)); transition-delay:.05s}
.calc-card:hover .mini i:nth-child(3){background:var(--alba-2); transition-delay:.1s}
.calc-card:hover .mini i:nth-child(4){background:var(--alba-3); transition-delay:.15s}

/* ══ iconos ═════════════════════════════════════════════════════════════════
   Un solo set, trazo de 1.5 sobre grilla de 24. El detalle en violeta
   (class="ac") es el momento que cuenta el icono: la milla que vuela, el sello
   que verifica. Nunca va en el contorno principal. */
.ico{
  width:20px; height:20px; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .2s;
}
.ico .ac{stroke:var(--alba-1); stroke-width:1.25}
.tema svg .ac{stroke:var(--alba-1)}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .ico .ac,
  :root:not([data-theme="dark"]) .tema svg .ac{stroke:#1F6899}
}
:root[data-theme="light"] .ico .ac, :root[data-theme="light"] .tema svg .ac{stroke:#1F6899}

/* icono dentro de una fila de resultado */
.fila{grid-template-columns:auto 1fr auto; gap:13px}
.fila-ico{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--linea); background:var(--superficie-2); margin-top:1px;
  transition:border-color .22s, background .22s, transform .22s;
}
.fila-ico .ico{width:17px; height:17px; stroke:var(--tenue)}
.fila:hover .fila-ico{border-color:color-mix(in srgb,var(--acento) 42%,transparent); transform:translateY(-1px)}
.fila:hover .fila-ico .ico{stroke:var(--acento)}
.fila[data-estado="si"] .fila-ico{background:var(--acento-suave); border-color:color-mix(in srgb,var(--acento) 26%,transparent)}
.fila[data-estado="si"] .fila-ico .ico{stroke:var(--acento)}
.fila[data-estado="ojo"] .fila-ico{background:var(--ambar-suave); border-color:color-mix(in srgb,var(--ambar) 26%,transparent)}
.fila[data-estado="ojo"] .fila-ico .ico{stroke:var(--ambar)}

/* icono en el título de un panel */
.panel > h3, .panel-cab h3{display:flex; align-items:center; gap:9px}
.panel > h3 .ico, .panel-cab h3 .ico{width:17px; height:17px; stroke:var(--acento)}

/* icono en los hallazgos y en el cierre */
.hallazgo{display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start}
.hallazgo > .ico{width:19px; height:19px; stroke:var(--ambar); margin-top:2px}
.cierre .etiqueta{display:flex; align-items:center; gap:7px}
.cierre .etiqueta .ico{width:14px; height:14px; stroke:var(--acento)}

/* insignia suelta: en las tarjetas verticales el instrumento va arriba */
.tarjeta > .insignia{margin-bottom:15px}
.insignia .ico{width:19px; height:19px; stroke:var(--acento); position:relative; z-index:1}
.tarjeta:hover .insignia .ico{stroke:var(--acento-vivo)}

/* hoja de contacto para revisar el set completo de un vistazo */
.hoja{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px}
.hoja figure{
  margin:0; padding:15px 8px 11px; border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--superficie); display:grid; justify-items:center; gap:10px;
}
.hoja .grande{width:40px; height:40px; stroke:var(--tinta)}
.hoja .chico{width:19px; height:19px; stroke:var(--acento)}
.hoja figcaption{font-family:"Spline Sans Mono",monospace; font-size:var(--t-micro); color:var(--tenue); text-align:center; word-break:break-all}

/* ══ capa de efectos ════════════════════════════════════════════════════════
   Una sola curva (.22,1,.36,1) y una sola idea de luz para todo el sitio.
   El estado oculto lo pone tools/site/efectos.js: sin JavaScript la página
   llega entera y quieta, nunca en blanco. */

/* el titular entra palabra por palabra, del desenfoque al foco */
.revela .pal, .hero .bajada.pal{
  display:inline-block;
  animation:palabra .9s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 58ms + 60ms);
}
.hero .bajada.pal{animation-duration:1.1s}
@keyframes palabra{
  from{opacity:0; transform:translateY(.4em); filter:blur(10px)}
  60%{opacity:1}
  to{opacity:1; transform:none; filter:blur(0)}
}

/* revelado al alcanzar la sección */
.con-efectos .rev{
  opacity:0; transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 65ms);
}
.con-efectos .rev.visible{opacity:1; transform:none}

/* resplandor detrás de la cifra grande: la luz vive en el número, no alrededor */
.cifra{position:relative; isolation:isolate}
.cifra::after{
  content:""; position:absolute; inset:-38% -14%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--alba-2) 30%, transparent), transparent 72%);
  filter:blur(16px); opacity:.85;
}
.veredicto .cifra::after{inset:-42% -22%}

/* barrido de luz cuando el resultado cruza un hito o cambia el veredicto */
.res-cabecera::after{
  content:""; position:absolute; inset:-40% -20%; pointer-events:none; opacity:0;
  background:linear-gradient(104deg, transparent 34%,
    color-mix(in srgb, #FFFFFF 30%, transparent) 47%,
    color-mix(in srgb, var(--alba-3) 26%, transparent) 52%, transparent 66%);
  transform:translate3d(-55%,0,0);
}
.res-cabecera.logro::after{animation:barrido-luz 1.15s cubic-bezier(.3,.9,.4,1)}
@keyframes barrido-luz{
  0%{opacity:0; transform:translate3d(-55%,0,0)}
  14%{opacity:1}
  100%{opacity:0; transform:translate3d(55%,0,0)}
}
/* y la cifra respira una vez, en el mismo tiempo */
.res-cabecera.logro .cifra{animation:respira .9s cubic-bezier(.22,1,.36,1)}
@keyframes respira{0%{transform:none} 32%{transform:scale(1.035)} 100%{transform:none}}

/* la frase de cierre acusa el cambio con un pulso en su filo */
.cierre{--filo:0}
.cierre.cambia-filo{animation:filo 1s ease-out}
@keyframes filo{
  0%{box-shadow:-3px 0 0 0 var(--acento), 0 0 26px -6px color-mix(in srgb,var(--acento) 65%,transparent)}
  100%{box-shadow:-3px 0 0 0 transparent, 0 0 26px -6px transparent}
}

/* tablero de aeropuerto: la palabra que cambió vuelve a caer */
.cifra-par > div, .veredicto{perspective:700px}
.voltea{
  display:inline-block; transform-origin:50% 0%; backface-visibility:hidden;
  animation:voltea .52s cubic-bezier(.22,1,.36,1);
}
@keyframes voltea{
  0%{transform:rotateX(-86deg); opacity:0; filter:blur(4px)}
  52%{opacity:1}
  100%{transform:none; opacity:1; filter:blur(0)}
}

/* apagado total: la página se entiende igual, solo que quieta */
@media (prefers-reduced-motion: reduce){
  .revela .pal, .hero .bajada.pal{animation:none !important; opacity:1 !important; filter:none !important; transform:none !important}
  .con-efectos .rev{opacity:1 !important; transform:none !important}
  .res-cabecera::after, .cifra::after{display:none}
  .voltea{animation:none !important}
}

/* ══ capa premium ═══════════════════════════════════════════════════════════
   Un compás común, una sola fuente de luz y ningún brillo en bucle.
   Sustituye por cascada a las reglas equivalentes de más arriba. */

/* ── el compás: una curva, una duración, un escalón ── */
:root{
  --e:cubic-bezier(.22,1,.36,1);          /* llega y se asienta */
  --e-sale:cubic-bezier(.55,.06,.86,.3);  /* lo que se apaga, sin despedirse */
  --e-encaja:cubic-bezier(.3,1.35,.5,1);  /* SOLO lo que encaja en su sitio */
  --t:440ms; --t-corto:220ms; --t-largo:660ms; --paso:52ms;
  /* Una sola luz: de dónde viene y cuánto tiñe. En oscuro --tinte-sombra es más oscuro
     que el propio papel, así que las cuatro capas de sombra dan 1,01:1 y no pintan nada:
     el único canal de elevación que queda es el filo superior, y por eso sube de .045
     a .10. Subirlo más lo convierte en una línea blanca sobre la tarjeta. */
  --tinte-sombra:2 4 10; --fuerza-sombra:1; --filo-luz:.10;
  /* ámbar legible sobre texto chico en modo claro (el de marca da 3,2:1) */
  --ambar-tinta:#8A5A12;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){--tinte-sombra:26 33 54; --fuerza-sombra:.35; --filo-luz:.9}
}
:root[data-theme="light"]{--tinte-sombra:26 33 54; --fuerza-sombra:.35; --filo-luz:.9}

/* mientras el dedo arrastra un control, el sistema se vuelve síncrono */
.arrastrando{--t:180ms; --t-corto:120ms; --t-largo:220ms}

/* ── una sola luz: la sombra cae según dónde está la pieza ──
   --luz-x lo escribe efectos.js entre -0.7 y 0.7. Sin JS queda en 0 y
   todas las sombras caen rectas: no se rompe nada. */
.tarjeta, .panel, .res-cabecera, .teaser{--luz-x:0; --elev:1}
/* El borde toma el trabajo que la sombra no puede hacer sobre un papel casi negro. Va acá
   y no en la regla base de .tarjeta para que se lea junto a las sombras que reemplaza. */
.tarjeta, .panel, .tabla-env{border-color:var(--linea-viva)}
.tarjeta, .panel{
  box-shadow:
    0 1px 0 rgb(255 255 255 / var(--filo-luz)) inset,
    calc(var(--luz-x) * .5px) 1px 1.5px rgb(var(--tinte-sombra) / calc(.40 * var(--fuerza-sombra))),
    calc(var(--luz-x) * 1.6px) calc(var(--elev) * 5px) calc(var(--elev) * 11px)
      rgb(var(--tinte-sombra) / calc(.26 * var(--fuerza-sombra))),
    calc(var(--luz-x) * 4px) calc(var(--elev) * 14px) calc(var(--elev) * 22px) calc(var(--elev) * -6px)
      rgb(var(--tinte-sombra) / calc(.34 * var(--fuerza-sombra)));
  transition:box-shadow var(--t) var(--e), transform var(--t) var(--e),
             border-color var(--t-corto) var(--e);
}
.res-cabecera, .teaser{
  --elev:1.8;
  box-shadow:
    0 1px 0 rgb(255 255 255 / var(--filo-luz)) inset,
    calc(var(--luz-x) * .6px) 2px 2px rgb(var(--tinte-sombra) / calc(.45 * var(--fuerza-sombra))),
    calc(var(--luz-x) * 5px) calc(var(--elev) * 12px) calc(var(--elev) * 22px) calc(var(--elev) * -8px)
      rgb(var(--tinte-sombra) / calc(.5 * var(--fuerza-sombra)));
}
/* al pasar el cursor no cambia el color: cambia la altura, y la sombra se abre sola */
.tarjeta:hover, .tarjeta:focus-within{--elev:2.2; transform:translate3d(0,-2px,0)}
.panel:focus-within{--elev:1.5}
@supports not (color: rgb(2 4 10 / .5)){
  .tarjeta, .panel{box-shadow:var(--sombra)}
  .res-cabecera, .teaser{box-shadow:var(--sombra-alta)}
  .tarjeta:hover, .tarjeta:focus-within{box-shadow:var(--sombra-alta)}
}

/* ── barrido con dirección: la barra deja de animar width y deja de brillar sola ── */
.meta-pista{
  box-shadow:inset 0 1px 2px rgb(var(--tinte-sombra) / calc(.5 * var(--fuerza-sombra)));
}
.meta-avance{
  position:absolute; inset:0; width:auto !important; height:auto;
  border-radius:inherit; background:var(--horizonte);
  clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0 round 6px);
  transition:clip-path .55s var(--e);
}
.meta-avance::after{content:none}      /* se jubila el bucle infinito de 2,6 s */
.meta-barrido{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background-image:linear-gradient(90deg, transparent, rgb(255 255 255 / .6), transparent);
  background-size:26% 100%; background-repeat:no-repeat;
  transform:translate3d(-26%,0,0); mix-blend-mode:screen;
}
.meta-barrido.baja{
  background-image:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--tenue) 85%, transparent), transparent);
  mix-blend-mode:normal;
}
:root[data-theme="light"] .meta-barrido{background-image:linear-gradient(90deg, transparent, rgb(255 255 255 / .92), transparent);
  mix-blend-mode:normal;}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .meta-barrido{background-image:linear-gradient(90deg, transparent, rgb(255 255 255 / .92), transparent);
  mix-blend-mode:normal;} }
/* el hito no se enciende: queda sellado, y solo golpea en el cuadro del cruce */
.meta-hito::before{transform-origin:bottom center; opacity:.45}
.meta-hito.logrado::before{
  opacity:1; background:var(--acento);
  box-shadow:0 0 8px var(--acento), 0 1px 0 rgb(var(--tinte-sombra) / .8);
}
.meta-hito.recien::before{animation:hito-golpe .42s var(--e-encaja)}
@keyframes hito-golpe{0%{transform:scaleY(1)} 32%{transform:scaleY(2.1)} 100%{transform:scaleY(1)}}

/* la aguja deja de animar left: 1cqw es el 1% del ancho del medidor */
.medidor{container-type:inline-size}
.aguja{
  left:0;
  transform:translate3d(calc(var(--vpm,0) * 1cqw),0,0) translateX(-50%);
  transition:transform .5s var(--e-encaja);
}
@supports not (width:1cqw){
  .aguja{left:calc(var(--vpm,0) * 1%); transform:translateX(-50%); transition:left .5s var(--e-encaja)}
}

@media (prefers-reduced-motion:reduce){
  .meta-barrido{display:none !important}
  .meta-avance{transition:none !important}
}

/* ── halo de meta: la luz de la cabecera dice cuán cerca estás ──
   Frío (violeta) cuando estás lejos, cálido (ámbar) cuando cruzas. Dos capas
   estáticas cruzadas por opacidad: el degradado no se repinta, solo se
   compone. Reemplaza a la aurora que derivaba en bucle: ahora la luz
   significa algo en vez de solo moverse. */
.res-cabecera{isolation:isolate}
.res-cabecera::before{animation:none; opacity:.22}
.halo{position:absolute; inset:-30% -12% auto -12%; height:170%; z-index:0; display:block; pointer-events:none; --p:0}
.halo::before, .halo::after{
  content:""; position:absolute; inset:0;
  transform:translate3d(0,0,0) scale(calc(.94 + var(--p,0) * .08));
  transform-origin:50% 10%;
  transition:opacity var(--t-largo) var(--e), transform var(--t-largo) var(--e);
}
.halo::before{
  background:radial-gradient(58% 100% at 50% 0%,
    color-mix(in srgb, var(--alba-1) 52%, transparent) 0%,
    color-mix(in srgb, var(--alba-1) 16%, transparent) 46%, transparent 74%);
  opacity:calc((1 - var(--p,0)) * .40);
}
.halo::after{
  background:radial-gradient(64% 100% at 50% 0%,
    color-mix(in srgb, var(--alba-3) 64%, transparent) 0%,
    color-mix(in srgb, var(--alba-2) 26%, transparent) 42%, transparent 76%);
  opacity:calc(var(--p,0) * var(--p,0) * .58);   /* cuadrática: el calor no es lineal */
}
:root[data-theme="light"] .halo::before{opacity:calc((1 - var(--p,0)) * .24);}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .halo::before{opacity:calc((1 - var(--p,0)) * .24);} }
:root[data-theme="light"] .halo::after{opacity:calc(var(--p,0) * var(--p,0) * .34);}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .halo::after{opacity:calc(var(--p,0) * var(--p,0) * .34);} }

/* ── sello y descarte ──
   El momento más importante de la calculadora es cuando un beneficio pasa
   de "no te corre" a "sí te corre". Eso no puede ser un cambio de color de
   250 ms: se sella. Y la fila descartada no se apaga con opacidad, eso le
   quita contraste, se desatura y cambia de token, que sigue siendo legible. */
.marca{
  position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.1' intercept='-.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23t)'/%3E%3C/svg%3E");
  background-size:90px 90px;
  background-blend-mode:overlay;
  box-shadow:0 1px 0 rgb(var(--tinte-sombra) / calc(.35 * var(--fuerza-sombra)));
}
:root[data-theme="light"] .marca{background-blend-mode:multiply}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .marca{background-blend-mode:multiply} }
@supports not (background-blend-mode: overlay){ .marca{background-image:none} }

@keyframes sello{
  0%{transform:scale(1.05); filter:blur(.7px)}
  42%{transform:scale(.988); filter:blur(0)}
  100%{transform:none; filter:none}
}
.marca.sellada{animation:sello .42s cubic-bezier(.2,.9,.2,1)}

.fila{position:relative; filter:saturate(1); color:var(--tinta);
  transition:filter var(--t) var(--e), color var(--t) var(--e)}
.fila[data-estado="no"]{
  filter:saturate(.28); color:var(--tinta-2);
  transition-timing-function:var(--e-sale); transition-duration:var(--t-corto);
}
.fila[data-estado="no"] .porque, .fila[data-estado="no"] .porque b{color:var(--tinta-2)}
.fila[data-estado="no"] .ico .ac{stroke:var(--tenue)}
.fila[data-estado="no"] .marca{filter:saturate(1)}   /* canal redundante: la píldora no se apaga */
.fila::before{
  content:""; position:absolute; left:-10px; top:8%; bottom:8%; width:2px;
  border-radius:2px; background:var(--tenue);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--t) var(--e-sale);
}
.fila[data-estado="no"]::before{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){ .marca.sellada{animation:none !important} }

/* ── contraste del ámbar sobre texto chico ──
   El ámbar de marca (#F5B978) da 3,2:1 sobre papel claro: sirve para un
   icono o un filo, no para texto de 12 px. Donde el ámbar ES el texto, se
   usa --ambar-tinta (#8A5A12), que sostiene AA en los dos modos. */
:root[data-theme="light"] .marca-ojo{color:var(--ambar-tinta)}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .marca-ojo{color:var(--ambar-tinta)} }
:root[data-theme="light"] .evento.alerta .fecha{color:var(--ambar-tinta)}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .evento.alerta .fecha{color:var(--ambar-tinta)} }

/* ── el veredicto, arriba y en píldora ──
   Es lo que la persona vino a buscar: no puede ir de subtítulo chico debajo
   de la cifra. Va sobre ella, con su marca y su color de estado. */
.fallo{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px 9px 14px; border-radius:99px; margin-bottom:15px;
  font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;
  font-weight:600; font-size:var(--t-l); letter-spacing:-.015em; line-height:1;
  border:1px solid transparent; transition:background .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
.fallo .ico{width:17px; height:17px; stroke-width:2.2; flex:none}
.fallo-si{
  background:var(--acento-suave); color:var(--acento);
  border-color:color-mix(in srgb,var(--acento) 40%,transparent);
  box-shadow:0 8px 26px -14px var(--acento);
}
.fallo-ojo{
  background:var(--ambar-suave); color:var(--ambar);
  border-color:color-mix(in srgb,var(--ambar) 40%,transparent);
}
.fallo-no{background:var(--superficie-2); color:var(--tinta-2); border-color:var(--linea-viva)}
:root[data-theme="light"] .fallo-ojo{color:var(--ambar-tinta)}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .fallo-ojo{color:var(--ambar-tinta)} }
.fallo.sellada{animation:sello .42s cubic-bezier(.2,.9,.2,1)}
@media(max-width:420px){ .fallo{font-size:var(--t-base); padding:8px 15px 8px 12px} }

/* ── píldoras: color plano ──
   La trama de papel sobre la píldora se veía sucia, sobre todo en claro y con
   zoom. Fuera la textura, y los tres estados suben de color para que se
   distingan de un vistazo: el fondo es un tinte sólido del color del estado,
   no una transparencia que se mezcla con lo que haya debajo. */
.marca{
  background-image:none !important;
  background-blend-mode:normal;
  border-width:1px; font-weight:500;
}
.marca-si{
  background:color-mix(in srgb, var(--acento) 22%, var(--superficie));
  color:var(--acento-vivo);
  border-color:color-mix(in srgb, var(--acento) 70%, transparent);
}
.marca-ojo{
  background:color-mix(in srgb, var(--ambar) 22%, var(--superficie));
  color:var(--ambar);
  border-color:color-mix(in srgb, var(--ambar) 70%, transparent);
}
.marca-no{
  background:var(--bruma);
  color:var(--tinta-2);
  border-color:var(--linea-viva);
}
/* en claro el ámbar de marca no llega a AA sobre texto de 12 px */
:root[data-theme="light"] .marca-ojo{color:var(--ambar-tinta);
  background:color-mix(in srgb, var(--ambar) 26%, var(--superficie));
  border-color:color-mix(in srgb, var(--ambar-tinta) 40%, transparent);}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .marca-ojo{color:var(--ambar-tinta);
  background:color-mix(in srgb, var(--ambar) 26%, var(--superficie));
  border-color:color-mix(in srgb, var(--ambar-tinta) 40%, transparent);} }
:root[data-theme="light"] .marca-si{color:var(--acento); background:color-mix(in srgb, var(--acento) 18%, #FFFFFF);
  border-color:color-mix(in srgb, var(--acento) 55%, transparent);}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .marca-si{color:var(--acento); background:color-mix(in srgb, var(--acento) 18%, #FFFFFF);
  border-color:color-mix(in srgb, var(--acento) 55%, transparent);} }
:root[data-theme="light"] .marca-no{background:var(--bruma); color:var(--tinta-2); border-color:var(--linea-viva);}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .marca-no{background:var(--bruma); color:var(--tinta-2); border-color:var(--linea-viva);} }

/* ── enlace a un trámite oficial ──
   Va dentro del cuerpo de una respuesta, así que no puede competir con el
   veredicto: subrayado y color de acento, sin caja ni botón. La flecha dice que
   sale del sitio sin necesidad de escribirlo. */
.enlace-oficial{
  color:var(--acento); font-weight:500;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--acento) 45%,transparent);
  transition:text-decoration-color var(--t-corto) var(--e), color var(--t-corto) var(--e);
}
.enlace-oficial:hover{color:var(--acento-vivo); text-decoration-color:currentColor}
/* enlace a una página del propio sitio: mismo tratamiento, sin la flecha de salida */
.enlace-interno{
  color:var(--acento); font-weight:500;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--acento) 45%,transparent);
  transition:text-decoration-color var(--t-corto) var(--e), color var(--t-corto) var(--e);
}
.enlace-interno:hover{color:var(--acento-vivo); text-decoration-color:currentColor}
.enlace-oficial::after{content:" ↗"; font-size:.88em; opacity:.7}

/* ── tarjetas de plan del Club ──
   Tres planes que hay que comparar de un vistazo. La prosa no sirve para eso: lo
   que compara es una fila de cifras alineadas y una barra que ubica el precio
   contra el rango de mercado.
   Van apiladas, no en tres columnas: la calculadora vive en la mitad derecha de
   la pantalla, así que tres columnas ahí dan 200 px por tarjeta y las cifras se
   parten en tres líneas. Apiladas, cada una usa el ancho completo y los cuatro
   números entran en una sola fila. El recomendado se distingue por borde e
   insignia, nunca por tamaño: si una tarjeta fuera más grande dejarían de ser
   comparables. */
.planes{display:grid; gap:12px}

.plan{
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--superficie); padding:15px 17px 13px;
  display:grid; gap:11px;
  transition:border-color var(--t-corto) var(--e), box-shadow var(--t-corto) var(--e);
}
.plan[data-reco="1"]{
  border-color:color-mix(in srgb,var(--acento) 55%,transparent);
  box-shadow:var(--brillo);
}

.plan-cab{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 9px}
.plan-nombre{
  font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;
  font-size:var(--t-l); letter-spacing:-.02em; line-height:1;
}
.plan-mes{font-size:var(--t-min); color:var(--tenue); font-variant-numeric:tabular-nums}
.plan-insignia{
  display:none; align-items:center; gap:5px; margin-left:auto;
  padding:3px 9px 3px 7px; border-radius:99px;
  background:var(--acento-suave); color:var(--acento);
  font-size:var(--t-micro); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap;
}
.plan-insignia .ico-mini{width:12px; height:12px; stroke:currentColor; flex:none}
.plan[data-reco="1"] .plan-insignia{display:inline-flex}

/* los cuatro números, en una sola fila: rótulo arriba, cifra abajo */
.plan-cuenta{
  margin:0; display:grid; gap:10px 18px;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
}
.plan-cuenta > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.plan-cuenta dt{
  margin:0; font-size:var(--t-micro); letter-spacing:.03em; text-transform:uppercase;
  color:var(--tenue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.plan-cuenta dd{
  margin:0; font-variant-numeric:tabular-nums; font-weight:500; font-size:var(--t-s);
  white-space:nowrap;
}
.plan-cuenta .suma dd{color:var(--acento)}
.plan-cuenta .suma.sin dt,.plan-cuenta .suma.sin dd{color:var(--tenue); font-weight:400}
.plan-cuenta .total dd{font-weight:600}
.plan-cuenta .total dt{color:var(--tinta-2)}

/* el precio y la barra comparten fila cuando hay espacio */
.plan-precio{display:flex; align-items:baseline; gap:6px}
.plan-precio b{
  font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;
  font-size:var(--t-3xl); letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.plan-precio span{font-size:var(--t-min); color:var(--tenue)}
.plan[data-estado="si"] .plan-precio b{color:var(--acento)}
.plan[data-estado="no"] .plan-precio b{color:var(--tenue)}

/* la barra: 0 a 20 pesos, con la franja de mercado marcada */
.plan-barra{
  position:relative; height:8px; border-radius:99px;
  background:var(--bruma);
}
.plan-banda{
  position:absolute; top:0; bottom:0; border-radius:99px;
  background:color-mix(in srgb,var(--acento) 28%,transparent);
}
.plan-punto{
  position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--tinta); border:2px solid var(--superficie);
  transition:left var(--t) var(--e);
}
.plan[data-estado="si"] .plan-punto{background:var(--acento)}
.plan[data-estado="no"] .plan-punto{background:var(--tenue)}
.plan-escala{
  display:flex; justify-content:space-between; gap:8px; margin-top:-4px;
  font-size:var(--t-micro); color:var(--tenue); font-variant-numeric:tabular-nums;
}
.plan-escala-mercado{color:var(--acento)}
@media (prefers-reduced-motion:reduce){ .plan-punto{transition:none} }

/* ── banda de ancho completo bajo las dos columnas ──
   La calculadora es una grilla de dos columnas. Todo lo que no hay que leer
   mirando el control al mismo tiempo (los avisos, la letra chica, el cierre)
   cabe mejor abajo y a todo el ancho: en la columna angosta quedaban párrafos
   de 46 caracteres con media pantalla vacía al lado. */
/* Ya no es item de la grilla (ver el comentario en calc.js): va como hermana de
   .calc, así que hereda el ancho del contenedor y necesita su propia separación. */
.calc-ancho{display:grid; gap:14px; margin-top:26px}
@media(max-width:940px){ .calc-ancho{margin-top:18px} }

/* los avisos, repartidos en vez de apilados */
.avisos-fila{display:grid; gap:12px; align-items:start}
@media(min-width:820px){ .avisos-fila{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))} }
.avisos-fila .hallazgo{height:100%}

/* la letra chica en tres tarjetas, no en tres filas de una columna */
.filas-3{display:grid; gap:12px}
@media(min-width:820px){ .filas-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} }
.filas-3 .fila{
  grid-template-columns:auto 1fr;
  align-content:start; gap:9px 12px;
  padding:14px; border:1px solid var(--linea); border-radius:var(--radio-chico);
}
.filas-3 .fila::before{content:none}
.filas-3 .fila .marca{grid-column:1 / -1; justify-self:start}
.filas-3 .fila .porque{max-width:none}

/* ── FAQ en acordeón ─────────────────────────────────────────────────────
   Reemplaza la grilla de tarjetas de los hubs. Tres tarjetas de alto muy
   distinto dejaban huecos enormes, y una lista de diez items abiertos es un
   muro. En acordeón la pregunta es el índice: se ve todo lo que el hub
   responde en una pantalla y se abre solo lo que interesa.

   <details>/<summary> nativo: funciona sin JS y es navegable por teclado sin
   que implementemos nada. La animación de apertura es CSS puro (grid de 0fr a
   1fr, lo único que transiciona bien sin medir alturas); la de CIERRE la
   coordina efectos.js, porque al quitar `open` el navegador esconde el
   contenido de golpe y no hay nada que transicionar. Sin JS, cierra seco. */
.faq{display:grid; gap:9px; max-width:var(--ancho-texto)}
.faq-intro{margin-bottom:26px}

.faq details{
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--superficie); overflow:hidden;
  transition:border-color .24s ease, box-shadow .3s ease, background-color .24s ease;
}
.faq details:hover{border-color:var(--linea-viva)}
.faq details[open]{
  border-color:color-mix(in srgb, var(--acento) 38%, var(--linea));
  box-shadow:var(--sombra);
}

.faq summary{
  display:flex; align-items:center; gap:16px; padding:15px 17px;
  cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--acento); outline-offset:-2px; border-radius:var(--radio)}

/* El numeral es el ancla visual de la columna de tips: se lee la lista por los
   números antes que por los títulos. Arranca apagado y se enciende al abrir. */
.faq-num{
  flex:none; width:46px; text-align:left;
  font-family:"Bricolage Grotesque","Schibsted Grotesk",sans-serif;
  font-variant-numeric:tabular-nums; font-size:var(--t-5xl); line-height:.86;
  font-weight:600; letter-spacing:-.055em;
  color:color-mix(in srgb, var(--acento) 30%, transparent);
  transition:color .3s ease, transform .34s cubic-bezier(.22,1,.36,1);
}
.faq summary:hover .faq-num{color:color-mix(in srgb, var(--acento) 62%, transparent)}
.faq details[open] .faq-num{color:var(--acento); transform:translateX(2px)}

.faq-t{
  flex:1; min-width:0; font-size:var(--t-base); font-weight:600; line-height:1.4;
  color:var(--tinta); transition:color .2s ease;
}
.faq summary:hover .faq-t, .faq details[open] .faq-t{color:var(--acento)}

/* El signo: dos trazos sobre un disco. Al abrir gira media vuelta y el trazo
   vertical se encoge hasta desaparecer, así que el mas se vuelve menos girando. */
.faq summary::after{
  content:""; flex:none; width:27px; height:27px; margin-left:4px; border-radius:50%;
  border:1px solid var(--linea-viva); background-color:transparent;
  background-image:linear-gradient(var(--acento),var(--acento)),
                   linear-gradient(var(--acento),var(--acento));
  background-repeat:no-repeat; background-position:center, center;
  background-size:11px 1.5px, 1.5px 11px;
  transition:transform .42s cubic-bezier(.22,1,.36,1), background-size .34s ease,
             border-color .24s ease, background-color .24s ease;
}
.faq summary:hover::after{border-color:var(--acento)}
.faq details[open] summary::after{
  transform:rotate(180deg); background-size:11px 1.5px, 1.5px 0;
  border-color:var(--acento); background-color:var(--acento-suave);
}

/* El alto lo anima efectos.js con Web Animations (ver el comentario allá: el
   truco CSS de grid 0fr a 1fr no resulta dentro de un <details>). Acá queda
   solo el desvanecido del contenido, que sí transiciona bien. */
.faq-wrap{display:block}
.faq-inner{overflow:hidden}
.faq-txt{
  padding:0 17px 17px 17px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .3s ease .05s, transform .36s cubic-bezier(.22,1,.36,1) .05s;
}
.faq details[open] .faq-txt{opacity:1; transform:none}
.faq-txt p{margin:0; color:var(--tinta-2); max-width:none}

@media(max-width:620px){
  .faq summary{gap:12px; padding:14px}
  .faq-num{width:38px; font-size:var(--t-3xl)}
  .faq-t{font-size:var(--t-s)}
  .faq-txt{padding:0 14px 14px}
}

/* Dos acordeones lado a lado. Uno solo deja media pantalla vacía en un monitor
   ancho, porque los sumarios están capados a la medida de lectura y no crecen
   con el contenedor. Dentro del par se suelta ese tope: cada columna manda.
   Se apila bajo 900px, que es donde dos columnas de ~510px empiezan a partir
   los títulos en demasiadas líneas. */
.faq-par{display:grid; grid-template-columns:1fr 1fr; gap:26px 44px; align-items:start}
.faq-par .faq, .faq-par .faq-intro{max-width:none}
.faq-par h2{font-size:clamp(24px,2.4vw,30px)}
.faq-par .faq-col{min-width:0}
@media(max-width:900px){
  .faq-par{grid-template-columns:1fr; gap:52px}
  .faq-par .faq, .faq-par .faq-intro{max-width:var(--ancho-texto)}
}

/* ── la caja de preguntar, cuando va al pie del hub ──────────────────────
   Sale del hero a proposito: ahi competia con el titular y empujaba el
   contenido bajo el pliegue. Abajo llega despues de que el hub ya respondio
   lo que sabe, que es cuando la pregunta del lector es de verdad. */
.preguntar-caja{
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--superficie); padding:30px 30px 28px; box-shadow:var(--sombra);
}
.preguntar-caja h2{margin:10px 0 0; font-size:clamp(23px,2.5vw,31px)}
.preguntar-caja .bajada-caja{margin:12px 0 0; color:var(--tinta-2); max-width:62ch}
.preguntar-caja .buscador{margin-top:22px}
.preguntar-caja #sv-panel:empty{display:none}
@media(max-width:620px){ .preguntar-caja{padding:22px 18px 20px} }

/* ── glosario ────────────────────────────────────────────────────────────
   La página que faltaba. El sitio usaba "milla" 183 veces sin definirla una
   sola vez, y el único glosario que existía era material interno del modelo.
   Dos columnas en escritorio porque son definiciones cortas: una sola columna
   dejaba una franja de texto angosta y kilométrica. */
.glosario{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.termino{
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--superficie); padding:19px 21px;
  transition:border-color .2s ease;
}
.termino:hover{border-color:var(--linea-viva)}
.termino h3{font-size:var(--t-l); margin:0 0 9px; color:var(--acento)}
.termino .def{margin:0 0 10px; font-weight:600; color:var(--tinta); max-width:none}
.termino .ej{margin:0; font-size:var(--t-s); color:var(--tinta-2); max-width:none}
@media(max-width:760px){ .glosario{grid-template-columns:1fr} }

/* ── guías del racimo ────────────────────────────────────────────────────
   La respuesta corta va destacada a propósito: es el bloque que un modelo de
   lenguaje copia en su respuesta cuando cita el sitio, y el primero que lee
   quien llega desde un buscador. */
.g-pilar{margin:14px 0 0; font-size:var(--t-s); color:var(--tinta-2)}
/* El sello de fecha va discreto: es una credencial, no un titular. Pero va ARRIBA y
   no en el pie, porque es lo que separa a este sitio de un foro sin fecha, y quien
   decide si confiar lo decide antes de leer. */
/* Nada de `display:flex` acá: convertiría el texto y el <time> en dos ítems distintos y
   el `gap` metería un espacio de más justo antes de la fecha. El punto va en línea. */
.g-verificado{margin:8px 0 0; font-size:var(--t-min); color:var(--tinta-2)}
.g-verificado::before{
  content:""; display:inline-block; vertical-align:middle;
  width:6px; height:6px; border-radius:50%; background:var(--acento);
  margin:-1px 7px 0 0; opacity:.75;
}
.g-verificado time{color:inherit; font-variant-numeric:tabular-nums}
.pie .legal a{color:var(--tinta-2); border-bottom:1px solid var(--linea-viva);
              text-decoration:none}
.pie .legal a:hover{color:var(--acento); border-color:currentColor}
.g-portada{width:100%; height:auto; border-radius:var(--radio); margin:22px 0 4px; display:block}
.g-corta{
  border-left:3px solid var(--acento); background:var(--acento-suave);
  border-radius:0 var(--radio) var(--radio) 0; padding:18px 22px; margin:26px 0 0;
}
.g-corta p{margin:0; font-size:var(--t-l); line-height:1.6; color:var(--tinta)}
.g-simple{
  border:1px dashed var(--linea-viva); border-radius:var(--radio);
  padding:15px 19px; margin:14px 0 0; background:var(--superficie-2);
}
.g-simple p:last-child{margin:6px 0 0; font-size:var(--t-s); color:var(--tinta-2)}
.g-indice{
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:16px 20px; margin:26px 0 0; background:var(--superficie);
}
.g-indice ul{margin:8px 0 0; padding-left:18px}
.g-indice li{margin-bottom:5px; font-size:var(--t-s)}
/* Eran 1.029 enlaces sin color de enlace y sin subrayado, y solo se delataban al pasar el
   cursor, gesto que en el teléfono no existe. Se queda en --tinta-2 para no competir con
   el cuerpo, pero recupera el subrayado con el mismo tratamiento de .enlace-interno: la
   línea a media tinta dice «esto se toca» sin encender once líneas de acento. */
.g-indice a{
  color:var(--tinta-2);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--tinta-2) 45%,transparent);
  transition:color var(--t-corto) var(--e), text-decoration-color var(--t-corto) var(--e);
}
.g-indice a:hover{color:var(--acento); text-decoration-color:currentColor}
/* En un teléfono de 320px el índice medía 602px, casi una pantalla entera, y empujaba la
   primera sección del artículo a 2.062px. Plegarlo de verdad pide un <details> en el HTML
   (queda anotado como pendiente del generador); mientras tanto se compacta: cuerpo de la
   escala menor, interlineado de letra chica y menos aire entre ítems. */
@media(max-width:620px){
  .g-indice{padding:13px 16px; margin-top:20px}
  .g-indice ul{margin-top:6px; padding-left:16px}
  .g-indice li{margin-bottom:2px; font-size:var(--t-min); line-height:1.4}
}
.g-cuerpo{padding:6px 0 40px}
.g-sec{padding-top:34px}
.g-sec h2{font-size:clamp(24px,3vw,31px); margin-bottom:12px}
/* El `max-width:none` de antes apagaba el token de medida justo en las 103 páginas de
   texto largo: el cuerpo llegaba a 100 caracteres por renglón sobre una columna de 772px,
   y sobre 90 el ojo pierde el salto de línea. Ahora el párrafo hereda el token del sistema
   (la regla global de `p`) y la lista se cuelga del mismo ancho. Lo único que se suelta
   son los ítems de las listas con icono, que no son renglones de prosa sino tarjetas en
   una retícula de dos columnas: capadas a 68ch dejarían un hueco dentro de la tarjeta. */
.g-sec li{max-width:var(--ancho-texto)}
.g-sec .g-tips li, .g-sec .g-errores li{max-width:none}
.g-pasos{padding-left:20px}
.g-pasos li{margin-bottom:10px}
.g-aviso{margin-top:28px}
.g-fuente{padding-bottom:30px}
.g-relacionadas{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.g-relacionadas a{
  display:block; border:1px solid var(--linea); border-radius:var(--radio);
  padding:14px 18px; background:var(--superficie); color:var(--tinta);
  text-decoration:none; font-weight:600; transition:border-color .18s, color .18s;
}
.g-relacionadas a:hover{border-color:var(--acento); color:var(--acento)}

/* Entrada y cierre del artículo. La entrada es prosa de apertura, así que va con el
   mismo tamaño del cuerpo pero un poco más suelta: es lo primero que se lee corrido. */
.g-entrada{margin:26px 0 0}
.g-entrada p{font-size:var(--t-base); line-height:1.6; color:var(--tinta)}
.g-entrada p:first-child::first-letter{font-size:1.05em; font-weight:600}
.g-cierre{border-top:1px solid var(--linea); padding-top:34px}

/* Tarjeta con portada. La imagen se sale del padding de la tarjeta para pegarse a los
   bordes: con el padding alrededor se veía como una foto pegada dentro de una caja, no
   como la portada de un artículo. El overflow:hidden de .tarjeta la recorta sola. */
.tarjeta-con-foto{padding-top:0}
.tarjeta-portada{
  display:block; width:calc(100% + 44px); margin:0 -22px 16px; height:auto;
  aspect-ratio:16/9; object-fit:cover;
  border-bottom:1px solid var(--linea);
}
.tarjeta-con-foto .etiqueta{margin-top:0}

/* Tips y errores: la capa que no está publicada por bancos ni aerolíneas. Se listan con
   icono porque el lector los escanea sueltos, no los lee como un argumento corrido. */
.g-tips, .g-errores{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px}
.g-tip, .g-error{
  display:flex; gap:13px; align-items:flex-start;
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:15px 17px; background:color-mix(in srgb, var(--superficie) 60%, transparent);
}
.g-tip-ico, .g-error-ico{
  flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--acento-suave); color:var(--acento);
}
.g-error-ico{background:color-mix(in srgb, var(--alerta) 12%, transparent); color:var(--alerta)}
.g-tip-ico .ico, .g-error-ico .ico{width:17px; height:17px}
.g-tip strong, .g-error strong{display:block; margin-bottom:3px; font-size:var(--t-base)}
.g-tip span:last-child, .g-error span:last-child{font-size:var(--t-base); line-height:1.6; color:var(--tenue)}
@media (min-width:760px){ .g-tips{grid-template-columns:1fr 1fr} }

/* Filtro de temas del índice de guías. Reusa .seg, que ya es el control segmentado del
   sitio, así que no hay un segundo lenguaje visual para lo mismo. Lo que cambia: acá las
   píldoras NO se estiran a partes iguales, porque los nombres de tema tienen largos muy
   distintos y repartirlos parejo dejaba "Millas" del ancho de "Documentación". */
.seg-filtro{margin:0 0 26px; gap:8px}
.seg-filtro button{flex:0 0 auto; padding:9px 15px; border-radius:999px}
/* Catorce pastillas envueltas ocupaban 304px en siete filas a 320px: el 53% de la primera
   pantalla de /guias/ era un muro de píldoras y no se veía ni una guía sin desplazar.
   En una sola fila que se arrastra bajan a ~43px. Van ordenadas por volumen, así que lo
   que queda fuera de vista es lo menos usado, que es exactamente lo que antes empujaba el
   contenido. El teclado llega igual: los botones son focusables y el foco arrastra la
   fila solo. El padding inferior deja sitio a la barra de desplazamiento y evita que
   recorte el foco de la pastilla. */
@media(max-width:620px){
  .seg-filtro{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding-bottom:8px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .seg-filtro button{scroll-snap-align:start}
}
.seg-n{
  display:inline-block; margin-left:6px; font-size:var(--t-micro); font-weight:600;
  color:var(--tenue); font-variant-numeric:tabular-nums;
}
.seg-filtro button[aria-pressed="true"] .seg-n{color:var(--acento)}
.filtro-vacio{margin:-14px 0 26px}
/* OBLIGATORIO, y no es defensivo: `.tarjeta` fija `display:block`, y cualquier regla de
   autor le gana al `[hidden]{display:none}` de la hoja del navegador. Sin esta línea el
   filtro marcaba la píldora y ponía el atributo, pero las tarjetas seguían a la vista. */
.grilla [data-tema][hidden]{display:none}