/* ============================================================
   cuentapropia.cl — sistema de diseño

   Concepto: una hoja de trabajo con total en vivo.
   Los insumos fluyen en una columna angosta y sin cromo;
   la respuesta es el único bloque sólido de la página y en
   el celular se despega como barra fija, para que el número
   nunca salga de vista mientras escribes.

   Color   papel frío (no crema), tinta azulada, un acento
           saturado que solo aparece en la respuesta.
   Tipo    Bricolage Grotesque (display) · Archivo (texto)
           IBM Plex Mono (cifras y etiquetas)
   ============================================================ */

:root{
  /* superficies: papel frío con sesgo azul, nunca crema */
  --bg:#FBFBFD; --card:#FFFFFF; --card-2:#F3F4F8; --sunk:#EEF0F6;
  /* tinta con sesgo azul, no gris puro */
  --ink:#12131C; --ink-2:#4A4E63; --ink-3:#61657A;
  --line:#E4E6EF; --line-2:#CBCEDD;
  /* acento: índigo eléctrico. Se gasta en un solo lugar. */
  --accent:#2C43E8; --accent-2:#ECEEFE; --accent-ink:#1B2BA8;
  /* el botón del veredicto es blanco en ambos temas: su texto no sigue al acento */
  --sobre-blanco:#1B2BA8;
  /* Y el inverso, que faltaba: la tinta que va ENCIMA del acento. El acento es
     oscuro en claro y claro en oscuro, así que `color:#fff` fijo sobre él deja
     doce superficies ilegibles en tema oscuro: la tarjeta destacada de la
     portada a 2,7:1, el «Continuar» de la guía a 2,7:1, los botones de
     guardar. Se venían parchando de a una, cada vez que alguien miraba. */
  --sobre-acento:#FFFFFF;
  /* Semánticos, separados del acento. El ámbar y el rojo son los de
     Appsociate Insight (#8A6300, #B3261E): los dos sistemas habían llegado
     por separado a la misma familia —24 y 23 puntos de distancia sobre 765—
     así que alinearlos no cambia nada a la vista y deja un solo significado
     de «atención» y de «brecha» entre los dos productos. Los fondos y bordes
     conservan su luminosidad y su saturación, solo adoptan el matiz nuevo.
     El verde NO se alinea: el de Insight (#1E7B34) pierde ocho décimas de
     contraste, así que el que debería moverse es el otro. — 17-09-2026 */
  --pos:#0A7048; --pos-bg:#E4F5EC; --pos-line:#9AD5B8;
  --neg:#B3261E; --neg-bg:#FDE8E7; --neg-line:#F2A29D;
  --warn:#8A6300; --warn-bg:#FFF5DC; --warn-line:#EBCD82;
  --shadow:0 1px 2px rgba(18,19,28,.04),0 12px 32px -22px rgba(18,19,28,.35);
  --lift:0 2px 6px rgba(44,67,232,.10),0 18px 40px -24px rgba(44,67,232,.45);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:"Bricolage Grotesque",Archivo,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0C12; --card:#14161F; --card-2:#1B1E29; --sunk:#10121A;
    --ink:#ECEEF6; --ink-2:#AFB4C7; --ink-3:#949AB1;
    --line:#252936; --line-2:#3A3F51;
    --accent:#8395FF; --accent-2:#191D3A; --accent-ink:#AAB6FF;
    --sobre-blanco:#1B2BA8;
    --sobre-acento:#0B0C12;
    --pos:#4FC98D; --pos-bg:#0E2A1E; --pos-line:#1F5B40;
    --neg:#FF7D76; --neg-bg:#2E1210; --neg-line:#6B231F;
    --warn:#E0B64C; --warn-bg:#2A210A; --warn-line:#5C4918;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -22px rgba(0,0,0,.9);
    --lift:0 2px 6px rgba(131,149,255,.12),0 18px 40px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0C12; --card:#14161F; --card-2:#1B1E29; --sunk:#10121A;
  --ink:#ECEEF6; --ink-2:#AFB4C7; --ink-3:#949AB1;
  --line:#252936; --line-2:#3A3F51;
  --accent:#8395FF; --accent-2:#191D3A; --accent-ink:#AAB6FF;
  --sobre-blanco:#1B2BA8;
  --sobre-acento:#0B0C12;
  --pos:#4FC98D; --pos-bg:#0E2A1E; --pos-line:#1F5B40;
  --neg:#FF7D76; --neg-bg:#2E1210; --neg-line:#6B231F;
  --warn:#E0B64C; --warn-bg:#2A210A; --warn-line:#5C4918;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -22px rgba(0,0,0,.9);
  --lift:0 2px 6px rgba(131,149,255,.12),0 18px 40px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Con la letra del sistema muy ampliada, un titular largo se salía por 5px.
   Ningún encabezado debería empujar la página hacia los lados. */
h1,h2,h3,h4{overflow-wrap:break-word}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.wrap{max-width:640px;margin:0 auto;padding-inline:20px;padding-block:0 80px}
.wrap.ancho{max-width:720px}

/* ---------- Navegación: marca + enlaces, sin quiebre de línea ---------- */
/* Envuelve. La fila era marca + tres enlaces, todos con white-space:nowrap y
   sin permiso para bajar de línea: a 360px —el ancho más común de los Android
   de gama media— se pasaba 10px del viewport y diez de las doce páginas
   quedaban con scroll horizontal. A 320px, las doce. Con flex-wrap solo baja
   de línea cuando hace falta, así que a 390px no cambia nada. */
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:18px 14px;
  border-bottom:1px solid var(--line);font-size:.82rem}
.nav .marca{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);
  text-decoration:none;letter-spacing:-.02em;font-family:var(--disp);font-size:.98rem;
  margin-right:auto;white-space:nowrap}
/* La marca: la boleta y la franja que el SII retiene antes de que el dinero
   llegue. Hereda el acento en los dos temas, así que no hay una versión clara
   y otra oscura que mantener. */
.nav .marca .mk{width:22px;height:22px;flex:none;display:block;color:var(--accent)}
.nav .lk{color:var(--ink-3);text-decoration:none;padding:4px 8px;border-radius:6px;
  white-space:nowrap}
.nav .lk:hover{color:var(--accent);background:var(--accent-2)}
.nav .lk[aria-current="page"]{color:var(--accent);background:var(--accent-2);font-weight:600}
@media (max-width:560px){
  .nav{gap:2px;font-size:.76rem}
  .nav .lk{padding:4px 6px}
}
/* Debajo de 380px la marca se lleva su propia línea: apretar más los enlaces
   los dejaría por debajo del área táctil mínima. */
@media (max-width:380px){
  .nav{gap:4px 2px}
  .nav .marca{flex:1 0 100%;margin-right:0;margin-bottom:2px}
}

/* ---------- Barra fija con la respuesta viva (celular) ---------- */
.pin{display:none}
@media (max-width:760px){
  .pin{display:flex;align-items:baseline;gap:10px;position:sticky;
    top:env(safe-area-inset-top,0px);z-index:20;
    margin-inline:-20px;padding:10px 20px calc(10px + env(safe-area-inset-top,0px));
    background:var(--ink);color:var(--bg);
    box-shadow:0 8px 24px -16px rgba(0,0,0,.6)}
  /* La etiqueta la escribe el JavaScript y ocupa una o dos líneas según la
     herramienta. Entre la primera pintura y ese momento la barra crecía y
     empujaba la página entera: 0,097 de CLS medido en
     /independiente-vs-dependiente, casi todo el presupuesto del umbral
     «bueno» gastado en un texto que siempre iba a llegar. Se reservan las
     dos líneas desde el principio. — 18-09-2026 */
  .pin .pl{font-family:var(--mono);font-size:11px;letter-spacing:.11em;
    text-transform:uppercase;opacity:.72;margin-right:auto;max-width:26ch;
    line-height:1.2;min-height:2.4em;display:flex;align-items:center}
  .pin .pv{font-family:var(--disp);font-size:1.5rem;font-weight:800;
    font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
  .pin.pos .pv{color:var(--pos-line)}
  .pin.neg .pv{color:var(--neg-line)}
}

/* ---------- Cabecera ---------- */
header{padding-block:40px 24px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px;font-weight:600}
h1{font-family:var(--disp);font-size:clamp(2.1rem,7vw,3.1rem);font-weight:800;
  line-height:1.02;letter-spacing:-.035em;margin:0 0 14px;text-wrap:balance}
.sub{color:var(--ink-2);margin:0;font-size:1.02rem;max-width:46ch}

/* ---------- Reloj ---------- */
.clock{display:flex;align-items:center;gap:16px;margin-top:26px;
  padding:16px 18px;border-radius:12px;background:var(--card-2);
  border:1px solid var(--line)}
.clock .n{font-family:var(--disp);font-size:2.9rem;font-weight:800;color:var(--accent);
  line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.045em;flex:none}
.clock .t{font-size:.87rem;color:var(--ink-2);margin:0;max-width:34ch;line-height:1.45}
.clock .t strong{color:var(--ink)}

/* ---------- Secciones ---------- */
section{padding-block:30px;border-top:1px solid var(--line)}
h2{font-size:.74rem;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px;font-weight:600}
h2.titulo{font-family:var(--disp);font-size:1.5rem;font-weight:700;letter-spacing:-.025em;
  text-transform:none;color:var(--ink);margin:0 0 8px;text-wrap:balance}
.lede{color:var(--ink-3);font-size:.92rem;margin:0 0 22px;max-width:52ch}
p{margin:0 0 14px;max-width:58ch}

/* ---------- Formulario: sin cajas, solo ritmo ---------- */
.card{background:transparent;border:0;border-radius:0;padding:0;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.card:last-of-type{border-bottom:0}
label{display:block;font-size:.85rem;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.hint{font-size:.77rem;color:var(--ink-3);margin-top:5px;line-height:1.45;max-width:52ch}
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--card);color:var(--ink);font-size:1.05rem;font-family:var(--mono);
  font-variant-numeric:tabular-nums;transition:border-color .12s,box-shadow .12s}
select{font-family:var(--sans);font-size:.95rem}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-2)}
/* El alcance de una cotización se escribe en prosa, no en cifras: fuente de
   texto, no la monoespaciada de los montos, y que se pueda estirar a lo alto
   pero nunca a lo ancho, que es lo que rompe la maqueta en un teléfono. */
textarea{font-family:var(--sans);font-size:.95rem;line-height:1.55;resize:vertical;
  min-height:96px}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
/* Ayuda escrita DEBAJO de un .grid2. El -8px compensa el margen inferior del
   campo de la izquierda, que estira la fila cuando hay dos columnas. En una
   sola columna ese margen no existe: sin la regla del móvil el texto queda
   montado sobre el control de arriba. */
.tras-grid2{margin-top:-8px}
@media (max-width:520px){.tras-grid2{margin-top:10px}}

.seg{display:flex;background:var(--sunk);border-radius:9px;padding:3px;gap:3px}
.seg button{flex:1;padding:9px 8px;border:0;background:transparent;color:var(--ink-2);
  font-family:var(--sans);font-size:.86rem;font-weight:500;cursor:pointer;
  border-radius:7px;transition:background .13s,color .13s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--accent);font-weight:600;
  box-shadow:0 1px 2px rgba(18,19,28,.10)}

/* ---------- El veredicto: el único bloque sólido ---------- */
.verdict{border-radius:16px;padding:26px 24px;margin-bottom:26px;
  background:var(--accent);color:var(--sobre-acento);box-shadow:var(--lift)}
.verdict.pos{background:var(--pos)}
.verdict.neg{background:var(--neg)}
/* Todo lo de adentro hereda del token, así que las tres reglas de tema que
   había acá sobran. Una de ellas —`:root:not([data-theme="light"]) .verdict`—
   estaba además fuera de su media query y se aplicaba también en claro; no se
   notaba solo porque cada hijo volvía a escribir #fff encima. */
.verdict .vlabel{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 10px;font-weight:600;color:inherit;opacity:.9}
/* El piso del clamp está en rem, así que sube con la preferencia de tamaño de
   letra del sistema —como debe ser— pero al 200% «$521.683» llegaba al borde
   mismo de la tarjeta y un monto de siete cifras se salía. Piso un poco más
   bajo y permiso para partir: preferimos un número en dos líneas a un número
   fuera de la caja. */
.verdict .vnum{font-family:var(--disp);font-size:min(clamp(2.2rem,12vw,4rem),13vw);font-weight:800;
  line-height:.94;letter-spacing:-.045em;margin:0 0 14px;font-variant-numeric:tabular-nums;
  color:inherit;overflow-wrap:anywhere}
@media (min-width:620px){.verdict .vnum{font-size:clamp(2.2rem,12vw,4rem)}}
.verdict p{margin:0;font-size:.89rem;line-height:1.55;color:inherit;opacity:.9;max-width:50ch}
.verdict p strong{opacity:1;font-weight:600}

/* ---------- Celdas de salida ---------- */
.out,.gap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.gap{margin-top:18px}
@media(max-width:480px){.out,.gap{grid-template-columns:1fr}}
.o,.g{background:var(--card-2);padding:15px 16px;border-radius:11px;
  border:1px solid var(--line)}
.o .ol,.g .gl{font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 5px;font-weight:600}
.o .ov,.g .gv{font-family:var(--disp);font-size:1.45rem;font-weight:700;margin:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.o.hi{background:var(--accent-2);border-color:var(--accent)}
.o.hi .ov{color:var(--accent-ink)}
.g.loss .gv{color:var(--neg)}
.gap .g:first-child .gv{color:var(--pos)}

/* ---------- Tablas ---------- */
.tabla{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 0;text-align:left;font-size:.89rem;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
td.r,th.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.total td,tr.step td{border-bottom:0;border-top:1.5px solid var(--line-2);font-weight:600;
  padding-top:13px}
tr.sub td{color:var(--ink-3);font-size:.8rem;border-bottom:0;padding-top:0;padding-bottom:9px}
tr.minor td{color:var(--ink-3);font-size:.83rem}
tr.fin td{border-bottom:0;border-top:2px solid var(--accent);font-weight:700;padding-top:13px;
  font-size:1rem;color:var(--accent-ink)}

.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;
  margin-left:7px;vertical-align:1px}
.pill.ok{background:var(--pos-bg);color:var(--pos)}
.pill.part{background:var(--warn-bg);color:var(--warn)}
.pill.no{background:var(--neg-bg);color:var(--neg)}

/* ---------- Desplegables ---------- */
details{border:1px solid var(--line);border-radius:12px;background:var(--card);
  margin-bottom:16px}
summary{padding:14px 18px;cursor:pointer;font-size:.86rem;font-weight:500;
  color:var(--ink-2);list-style:none;border-radius:12px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--accent);font-family:var(--mono);
  font-weight:600;margin-right:8px}
details[open] summary::before{content:"–"}
details[open] summary{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.dbody{padding:20px 18px}

/* ---------- Notas ---------- */
.note{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;
  padding:16px 18px;margin-bottom:16px}
.note.neutra{background:var(--card-2);border-color:var(--line)}
.note p{margin:0;font-size:.86rem;color:var(--ink);line-height:1.55;max-width:none}
.note p+p{margin-top:9px}
.note strong{font-weight:600}

/* ---------- Hilo del año ---------- */
ol.hilo{list-style:none;margin:0;padding:0;counter-reset:h}
ol.hilo li{counter-increment:h;position:relative;padding:0 0 24px 40px;
  border-left:1.5px solid var(--line);margin-left:11px}
ol.hilo li:last-child{border-left-color:transparent;padding-bottom:0}
ol.hilo li::before{content:counter(h);position:absolute;left:-11px;top:-1px;
  width:22px;height:22px;border-radius:50%;background:var(--card);
  border:1.5px solid var(--line-2);color:var(--ink-3);display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600}
ol.hilo li.now::before{background:var(--accent);border-color:var(--accent);color:var(--sobre-acento)}
ol.hilo h3{margin:0 0 3px;font-size:.96rem;font-weight:600;letter-spacing:-.01em}
ol.hilo p{margin:0;font-size:.87rem;color:var(--ink-2);max-width:48ch}
ol.hilo .tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:3px}
ol.hilo li.now .tag{color:var(--accent);font-weight:600}

/* ---------- Tarjetas de herramienta ---------- */
.tools{display:grid;gap:12px}
.tool{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.tool:hover,.tool:focus-visible{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:var(--shadow)}
.tool.feat{background:var(--accent-2);border-color:var(--accent)}
.tool .tt{font-family:var(--disp);font-size:1.12rem;font-weight:700;margin:0 0 6px;
  letter-spacing:-.022em}
.tool .td{font-size:.88rem;color:var(--ink-2);margin:0 0 12px;max-width:48ch}
.tool .tg{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:600}

/* ---------- Calculadora del hub ---------- */
.calc{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px 22px;box-shadow:var(--shadow)}
.calc h3{font-family:var(--disp);font-size:1.1rem;font-weight:700;margin:0 0 4px;
  letter-spacing:-.022em}
.calc .ch{font-size:.83rem;color:var(--ink-3);margin:0 0 18px;max-width:50ch}
/* Las nueve calculadoras avisan que sus valores son de ejemplo; la portada
   era la única que no lo hacía, y es donde llega el que nunca ha entrado. */
.calc .ejem{display:inline-block;margin-left:2px;padding:2px 8px;border-radius:99px;
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);
  font:600 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  vertical-align:1px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:480px){.duo{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
footer{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-3);line-height:1.85}
footer p{margin:0 0 9px;max-width:60ch}
/* Los enlaces del pie son la fuente oficial y la página de datos. Van con relleno
   vertical para llegar a 24px de alto tocable aunque vivan dentro de una frase. */
footer a{color:var(--ink-2);padding:5px 0;text-underline-offset:3px}

/* ---------- Pasos numerados: qué tengo que hacer ---------- */
.paso{position:relative;padding-left:38px;margin-bottom:26px;padding-bottom:22px;
  border-bottom:1px solid var(--line)}
.paso:last-of-type{border-bottom:0;padding-bottom:0}
.paso>.n{position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:50%;
  background:var(--accent);color:var(--sobre-acento);display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:600;line-height:1}
.paso>.h{font-family:var(--disp);font-size:1.02rem;font-weight:700;margin:0 0 3px;
  letter-spacing:-.02em;padding-top:1px}
.paso>.d{font-size:.84rem;color:var(--ink-3);margin:0 0 16px;max-width:50ch}
@media (max-width:480px){.paso{padding-left:33px}.paso>.n{width:23px;height:23px;font-size:11px}}

/* ---------- Aterrizaje: propuesta de valor ---------- */
.lead{padding-block:44px 8px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-2);border-radius:20px;padding:5px 12px;margin:0 0 18px;
  font-weight:600}
.lead .sub{font-size:1.1rem;max-width:44ch;color:var(--ink-2)}

.valor{display:grid;gap:12px;margin-top:26px}
@media (min-width:620px){.valor{grid-template-columns:repeat(3,1fr)}}
.v{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px 17px}
.v .vh{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px;font-weight:600}
.v .vt{font-size:.9rem;margin:0;color:var(--ink);line-height:1.5;max-width:none}
.v .vt strong{font-weight:600}

/* franja de prueba: el dato que justifica probarlo */
.prueba{margin-top:26px;border-radius:14px;padding:22px 22px;background:var(--ink);
  color:var(--bg)}
.prueba .ph{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  opacity:.65;margin:0 0 9px;font-weight:600}
.prueba .pt{font-family:var(--disp);font-size:1.22rem;font-weight:700;line-height:1.3;
  letter-spacing:-.022em;margin:0 0 10px;max-width:38ch;text-wrap:balance}
.prueba .pd{font-size:.86rem;opacity:.75;margin:0;max-width:48ch;line-height:1.55}

/* fila de "cómo funciona" */
.como{display:grid;gap:14px;counter-reset:c}
@media (min-width:620px){.como{grid-template-columns:repeat(3,1fr)}}
.c{counter-increment:c;position:relative;padding-top:34px}
.c::before{content:counter(c);position:absolute;top:0;left:0;width:26px;height:26px;
  border-radius:8px;background:var(--accent-2);color:var(--accent);display:grid;
  place-items:center;font-family:var(--mono);font-size:12px;font-weight:600}
.c h3{font-size:.95rem;font-weight:600;margin:0 0 4px;letter-spacing:-.015em}
.c p{font-size:.85rem;color:var(--ink-2);margin:0;max-width:40ch}

/* botón principal */
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--sobre-acento);
  text-decoration:none;font-weight:600;font-size:.94rem;padding:13px 20px;border-radius:10px;
  box-shadow:var(--lift);transition:transform .14s}
.cta:hover{transform:translateY(-1px)}
.cta .ar{font-family:var(--mono);opacity:.8}
/* .cta ya lo resuelve --sobre-acento. .prueba no: su fondo es var(--ink), que
   es otro token, y le faltaba además la variante por preferencia del sistema:
   quien tiene el sistema en oscuro y no ha tocado el interruptor del sitio la
   veía con la tinta equivocada. */
:root[data-theme="dark"] .prueba{color:#0B0C12}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .prueba{color:#0B0C12}
}

/* ---------- Procedencia: fuente y fecha por herramienta ---------- */
.proc{border:1px solid var(--line);border-radius:12px;background:var(--card-2);
  padding:16px 18px;margin-bottom:16px}
.proc h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;font-weight:600}
.proc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.8rem}
.proc dt{color:var(--ink-3)}
.proc dd{margin:0;color:var(--ink-2)}
.proc .est,.reqs .est,.sabermas .est{display:inline-block;padding:1px 7px;border-radius:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;font-weight:600;
  text-transform:uppercase;margin-left:6px}
.proc .est.of,.reqs .est.ok,.sabermas .est.ok{background:var(--pos-bg);color:var(--pos)}
.proc .est.es,.reqs .est.es,.sabermas .est.es{background:var(--warn-bg);color:var(--warn)}
.sabermas .est.neg{background:var(--neg-bg);color:var(--neg)}
.reqs .est{margin-left:0}
.proc ul{margin:10px 0 0;padding-left:18px;font-size:.79rem;color:var(--ink-3)}
.proc li{margin-bottom:3px}
/* Los enlaces de fuente son objetivos tocables de verdad: 24px de alto mínimo
   (WCAG 2.5.8) y no palabras encadenadas con puntos medios dentro de un párrafo. */
.fuentes{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.proc .fl{width:100%;margin:0 0 2px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
/* La ficha de fuente se dibujaba solo dentro de .proc, pero se usa en tres
   sitios: ahí, en «Saber más» y en la lista de correcciones de /escenarios.
   En los otros dos salía como un enlace de texto de 17px de alto — bajo el
   mínimo táctil de 24px de la 2.5.8— y sin la flecha de «se abre fuera».
   Una clase, una apariencia. */
.fue{display:inline-flex;align-items:center;min-height:28px;padding:4px 11px;
  border:1px solid var(--line);border-radius:20px;background:var(--card);
  font-size:.79rem;color:var(--ink-2);text-decoration:none;line-height:1.25}
.fue:hover{border-color:var(--accent);color:var(--accent)}
.fue::after{content:'↗';margin-left:6px;font-size:.72rem;opacity:.7}
.proc .pfe{margin:12px 0 0;font-size:.78rem;color:var(--ink-3)}

/* ---------- Capa de calendario: la próxima fecha que te afecta ----------
   Va arriba, antes de los campos, y contesta «¿esto está a punto de cambiar?».
   Deliberadamente sin el acento: el acento es del bloque del resultado. */
.fechas{display:flex;flex-direction:column;gap:10px;margin:0 0 20px}
.fecha{border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 12px 12px 0;background:var(--card-2);padding:14px 17px}
.fecha .fc{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 5px}
.fecha .fcd{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
/* Sin opacidad: el .85 mezclaba --ink-3 con el fondo de la tarjeta y dejaba la
   fecha —el dato de la tarjeta— en 3,85:1 en once páginas. */
.fecha .fcf{font-family:var(--mono);font-size:.73rem;color:var(--ink-3)}
.fecha .ft{margin:0;font-weight:600;font-size:1rem;color:var(--ink);line-height:1.34}
.fecha .fcam{margin:6px 0 0;font-size:.88rem;color:var(--ink-2)}
.fecha .fcam b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);
  font-weight:600}
.fecha .fa{color:var(--ink-3);margin:0 2px}
.fecha .fq{margin:6px 0 0;font-size:.89rem;color:var(--ink-2);line-height:1.5;max-width:58ch}
.fecha .fn{margin:5px 0 0;font-size:.8rem;color:var(--ink-3);line-height:1.45;max-width:58ch}
.fecha .ff{margin:9px 0 0}
.fecha .ff a{display:inline-flex;align-items:center;min-height:24px;padding:2px 0;
  font-family:var(--mono);font-size:.73rem;color:var(--ink-3);text-underline-offset:3px}
.fecha .ff a:hover{color:var(--accent)}
.fecha .ff a::after{content:'↗';margin-left:5px;opacity:.7}
/* Treinta días o menos: ámbar, que acá ya significa «mira esto». */
.fecha.ya{border-color:var(--warn-line);border-left-color:var(--warn);background:var(--warn-bg)}
.fecha.ya .fcd{color:var(--warn)}
.fecha.ya .fcf{color:var(--warn);opacity:.8}

/* ---------- Siguiente paso entre herramientas ---------- */
.sigue{margin:26px 0 16px}
.sigue h2{margin-bottom:12px}
.sigue .fila{display:grid;gap:10px}
@media (min-width:620px){.sigue .fila{grid-template-columns:1fr 1fr}}
.sig{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.sig:hover,.sig:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.sig .sq{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 5px}
.sig .st{font-family:var(--disp);font-size:1rem;font-weight:700;margin:0;letter-spacing:-.02em}
.sig .sp{font-size:.82rem;line-height:1.45;color:var(--ink-3);margin:6px 0 0}

/* ---------- Guardar escenario ---------- */
.guardar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;
  padding:14px 16px;border:1px dashed var(--line-2);border-radius:12px}
.guardar p{margin:0;font-size:.82rem;color:var(--ink-3);flex:1;min-width:180px}
.guardar button{border:0;background:var(--accent);color:var(--sobre-acento);font-family:var(--sans);
  font-size:.85rem;font-weight:600;padding:9px 16px;border-radius:9px;cursor:pointer}
.guardar button:disabled{opacity:.5;cursor:default}
.guardar .ok{color:var(--pos);font-weight:600}
.guardar p a,.guardar .ok a{padding:5px 0;text-underline-offset:3px}

/* ---------- Categorías del inicio ---------- */
.cat{padding-block:28px;border-top:1px solid var(--line)}
.cat .ch{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cat .ch h2{margin:0}
.cat .pron{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line-2);border-radius:20px;padding:2px 8px}
.plan{display:grid;gap:8px;margin-top:12px}
@media (min-width:620px){.plan{grid-template-columns:1fr 1fr}}
.pl{padding:12px 14px;border:1px dashed var(--line-2);border-radius:10px;background:transparent}
.pl .pt{font-size:.9rem;font-weight:600;margin:0 0 2px;color:var(--ink-2)}
.pl .pd{font-size:.79rem;color:var(--ink-3);margin:0}

/* Dentro del veredicto, las celdas no heredan el color semántico de otras páginas */
.verdict .gap .g{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.verdict .gap .gl{color:inherit;opacity:1}
.verdict .gap .gv,
.verdict .gap .g:first-child .gv,
.verdict .gap .g.loss .gv{color:inherit}
/* El color ya lo hereda del veredicto; acá solo queda el velo, que sí cambia:
   en oscuro el fondo es claro y un velo blanco encima no se vería. */
:root[data-theme="dark"] .verdict .gap .g{background:rgba(11,12,18,.10);border-color:rgba(11,12,18,.18)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .verdict .gap .g{background:rgba(11,12,18,.10);border-color:rgba(11,12,18,.18)}
}

/* ---------- Captura de correo ---------- */
.visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.correo{margin:26px 0 16px;padding:22px 20px;border-radius:14px;
  background:var(--card-2);border:1px solid var(--line)}
.correo .ct{font-family:var(--disp);font-size:1.12rem;font-weight:700;margin:0 0 6px;
  letter-spacing:-.022em}
.correo .cd{font-size:.86rem;color:var(--ink-2);margin:0 0 16px;max-width:52ch}
.cf{display:flex;gap:10px;flex-wrap:wrap}
.cf input{flex:1;min-width:190px;padding:12px 13px;border:1px solid var(--line-2);
  border-radius:9px;background:var(--card);color:var(--ink);font-size:1rem;
  font-family:var(--sans)}
.cf input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-2)}
.cf button{border:0;background:var(--accent);color:var(--sobre-acento);font-family:var(--sans);
  font-size:.9rem;font-weight:600;padding:12px 20px;border-radius:9px;cursor:pointer;
  white-space:nowrap}
.cf button:disabled{opacity:.55;cursor:default}
.cm{font-size:.82rem;margin:10px 0 0;min-height:1em;color:var(--ink-3)}
.cm.ok{color:var(--pos);font-weight:600}
.cm.err{color:var(--neg)}

/* ============================================================
   Capa de comprensión: término explicable, ayuda por campo,
   veredicto con las tres preguntas, y traza del cálculo.
   ============================================================ */

/* --- Término del glosario --- */
.term{
  border-bottom:1.5px dotted var(--accent); cursor:pointer; font-weight:inherit;
  color:inherit; background:none; padding:0;
}
.term::after{
  content:"?"; display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-left:3px; border-radius:50%;
  background:var(--accent); color:var(--sobre-acento); font:600 11px/1 var(--mono);
  vertical-align:super; font-family:var(--mono);
}
/* El `outline:none` mataba el anillo de foco y lo reemplazaba por un fondo
   que nunca existió: --accent-soft no estaba declarado en ninguna parte, así
   que los términos del glosario —presentes en seis páginas y una de las
   interacciones centrales del sitio— no tenían NINGÚN indicio de foco al
   tabular, ni respuesta al pasar el mouse. El fondo ahora es el token real y
   el anillo se conserva: son dos señales distintas para dos cosas distintas. */
.term:hover{background:var(--accent-2)}
.term:focus-visible{background:var(--accent-2)}
.term[aria-expanded="true"]::after{content:"×";font-size:11px}
.termdef{
  display:block; margin:10px 0 12px; padding:13px 15px;
  background:var(--accent-2); border-left:3px solid var(--accent);
  border-radius:0 6px 6px 0; font-size:.93rem; line-height:1.58;
}
.termdef .tt{display:block;font-weight:700;color:var(--ink);margin-bottom:4px}
.termdef .ts{display:block;color:var(--ink-2)}
.termdef .te{display:block;margin-top:7px;color:var(--ink-3);font-size:.89rem}
.termdef .tm{display:block;margin-top:6px;color:var(--ink-3);font-size:.85rem;font-style:italic}

/* --- Ayuda por campo --- */
.ayuda{margin-top:7px}
.ayuda>summary{
  display:inline-block; cursor:pointer; list-style:none;
  font-size:.83rem; color:var(--accent); font-weight:500;
  padding:2px 0; border-bottom:1px dotted var(--accent);
}
.ayuda>summary::-webkit-details-marker{display:none}
.ayuda>summary:hover{color:var(--ink)}
.ayuda[open]>summary{margin-bottom:8px}
.ayuda .abody{
  padding:12px 14px; background:var(--card-2); border-radius:7px;
  font-size:.9rem; line-height:1.56; color:var(--ink-2);
}
.ayuda .abody p{margin:0 0 7px}
.ayuda .abody p:last-child{margin:0}
.ayuda .abody b{color:var(--ink);font-weight:600}
.ayuda .aej{color:var(--ink-3)}

/* --- Veredicto --- */
/* Velo OSCURO, no claro. Con un velo blanco encima del acento la píldora se
   aclaraba y el texto blanco de 11px caía a 4,0:1 —y a 3,6:1 sobre el verde—,
   bajo el mínimo de 4,5:1 para texto pequeño. Oscurecer funciona en los dos
   temas: en claro el fondo es oscuro y la tinta blanca, en oscuro es al revés
   y la tinta oscura gana contraste con el mismo velo. */
.verdict .vej{
  display:inline-block; margin:0 0 12px; padding:3px 9px; border-radius:99px;
  background:rgba(0,0,0,.24); color:inherit; opacity:1;
  font:600 11px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase;
}
/* La variante parcial nombra los campos, así que no cabe en una píldora de
   una línea: se deja fluir y se baja la caja alta, que a este largo no se lee. */
.verdict .vejp{
  display:block; text-transform:none; letter-spacing:.01em;
  font:500 12px/1.5 var(--mono); padding:6px 11px; border-radius:10px;
}
.verdict .vtipo{
  display:inline-block; margin:0 0 9px; padding:4px 11px; border-radius:99px;
  background:rgba(0,0,0,.24); color:inherit; opacity:1;
  font:600 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase;
}
/* En oscuro el veredicto es claro y la tinta oscura: ahí el velo tiene que
   ACLARAR, no oscurecer, para que la tinta gane contraste. Es el mismo
   principio que arriba, invertido con el tema. */
:root[data-theme="dark"] .verdict .vej,
:root[data-theme="dark"] .verdict .vtipo{background:rgba(255,255,255,.34)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .verdict .vej,
  :root:not([data-theme="light"]) .verdict .vtipo{background:rgba(255,255,255,.34)}
}
.verdict .vqes{margin:6px 0 0;font-size:.95rem;opacity:.95}
.verdict .vsec{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22)}
.verdict .vh{
  margin:0 0 6px; font:600 11px/1.4 var(--mono);
  letter-spacing:.08em; text-transform:uppercase; opacity:.92;
}
.verdict .vsec p{margin:0;font-size:.96rem;line-height:1.6}
.verdict .vacc{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.verdict .vb{
  display:inline-block; padding:10px 15px; border-radius:8px;
  background:#fff; color:var(--sobre-blanco); font-weight:600; font-size:.92rem;
  text-decoration:none; border:none;
}
.verdict .vb:hover{background:rgba(255,255,255,.88)}
.verdict .vnota{margin:14px 0 0;font-size:.86rem;opacity:.92;line-height:1.55}

/* --- Traza del cálculo --- */
.comose{margin-top:4px}
.comose>summary{
  display:inline-block; cursor:pointer; list-style:none;
  font-size:.89rem; color:var(--accent); font-weight:500;
  padding:3px 0; border-bottom:1px dotted var(--accent);
}
.comose>summary::-webkit-details-marker{display:none}
.comose[open]>summary{margin-bottom:12px}
.comose .chint{margin:0 0 12px;font-size:.89rem;color:var(--ink-3);line-height:1.55}

@media (max-width:520px){
  .verdict .vacc{flex-direction:column}
  .verdict .vb{width:100%;text-align:center}
}
.comose table td.r{white-space:nowrap;font-variant-numeric:tabular-nums}
.comose table td:first-child{padding-right:12px}
/* la ayuda por campo no es una tarjeta: es una nota colgada del campo */
.ayuda{border:none;background:none;padding:0;box-shadow:none}
.ayuda>summary{border-radius:0}

/* --- Aviso de contexto compartido --- */
.ctx{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  justify-content:space-between; margin:0 0 20px; padding:13px 16px;
  background:var(--accent-2); border:1px solid var(--accent);
  border-radius:10px;
}
.ctx p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2);flex:1 1 240px}
.ctx p strong{color:var(--ink)}
.ctx button{
  flex:0 0 auto; padding:8px 14px; border-radius:7px; cursor:pointer;
  background:transparent; border:1px solid var(--accent); color:var(--accent);
  font:600 .85rem/1 inherit; font-family:inherit;
}
.ctx button:hover{background:var(--accent);color:var(--sobre-acento)}
/* Aviso de recálculo: trae además qué corrección se está aplicando, así que
   necesita ocupar el ancho entero en vez de repartirse en columnas. */
.ctxrec{display:block;border-color:var(--warn-line);background:var(--warn-bg)}
.ctxrec p{flex:none}
.ctxrec ul{margin:10px 0 12px;padding-left:18px}
.ctxrec li{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin:0 0 6px}
.ctxrec li b{color:var(--ink)}

/* --- Portada: "¿Qué quieres resolver?" --- */
.qq{
  margin:34px 0 14px; font-family:var(--disp);
  font-size:clamp(1.25rem,4.5vw,1.6rem); letter-spacing:-.01em;
}
.quiero{display:grid;gap:10px}
.q{
  display:block; padding:16px 18px; border-radius:12px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); transition:border-color .12s, transform .12s;
}
.q:hover{border-color:var(--accent);transform:translateY(-1px)}
.q .qt{display:block;font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.35}
.q .qd{display:block;margin-top:5px;font-size:.9rem;color:var(--ink-3);line-height:1.5}
.q .qa{
  display:inline-block;margin-top:11px;font-weight:600;font-size:.92rem;color:var(--accent);
}
/* La tarjeta destacada de la portada: el llamado más visible del sitio. Tenía
   texto blanco fijo sobre el acento, así que en tema oscuro quedaba en 2,7:1 y
   su descripción en 2,3:1 — ilegible justo donde más gente entra. */
.q1{background:var(--accent);border-color:var(--accent);color:var(--sobre-acento)}
.q1 .qt{color:inherit;font-size:1.12rem}
.q1 .qd{color:inherit;opacity:.82}
.q1 .qa{color:inherit}
.q1:hover{background:var(--accent-h,var(--accent));opacity:.94}
.qnota{margin:16px 0 0;font-size:.88rem;color:var(--ink-3)}

/* --- Flujo guiado --- */
.prog{margin:0 0 26px}
.pbar{height:5px;border-radius:99px;background:var(--card-2);overflow:hidden}
.pbar span{display:block;height:100%;background:var(--accent);transition:width .35s ease}
.prog .pt{margin:7px 0 0;font:600 11px/1.4 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

.gpaso{padding:26px 0 30px;border-top:1px solid var(--line)}
.gpaso:first-of-type{border-top:none;padding-top:4px}
.gpaso .gn{margin:0 0 8px;font:600 11px/1.4 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
/* El h2 base de este sitio es una etiqueta chica en versalitas grises, y todo
   encabezado de verdad lleva .titulo para salir de ahí. Estas preguntas
   sobreescribían el tamaño y la familia pero no la caja alta ni el color, así
   que las seis preguntas de la guía salían a 20px EN MAYÚSCULAS Y EN GRIS:
   del tamaño de un titular y con el aspecto de un pie de foto. */
.gpaso h2{margin:0 0 10px;font-family:var(--disp);font-weight:700;
  text-transform:none;color:var(--ink);
  font-size:clamp(1.3rem,5vw,1.65rem);line-height:1.22;letter-spacing:-.01em;
  text-wrap:balance}
.gpaso .gpor{margin:0 0 18px;color:var(--ink-2);font-size:.96rem;line-height:1.6;max-width:60ch}
.gpaso .gtip{margin:10px 0 0;font-size:.88rem;color:var(--ink-3);line-height:1.5}
.gpaso.saltado{opacity:.5}
.gpaso.saltado::after{content:"Saltaste esta pregunta";display:block;margin-top:8px;
  font:600 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

.gerr{margin:8px 0 0;padding:10px 13px;border-radius:8px;font-size:.9rem;line-height:1.5;
  background:var(--neg-bg);color:var(--neg)}
.gest{margin:8px 0 0;padding:10px 13px;border-radius:8px;font-size:.87rem;line-height:1.5;
  background:var(--accent-2);color:var(--ink-2)}

.gacc{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.gbtn{padding:13px 22px;border:none;border-radius:9px;background:var(--accent);color:var(--sobre-acento);
  font:600 1rem/1 inherit;font-family:inherit;cursor:pointer}
.gbtn:hover{opacity:.92}
.gno,.gsalto{padding:13px 16px;border:1px solid var(--line);border-radius:9px;background:transparent;
  color:var(--ink-3);font:500 .92rem/1 inherit;font-family:inherit;cursor:pointer}
.gno:hover,.gsalto:hover{border-color:var(--accent);color:var(--accent)}
.vinculo{background:none;border:none;padding:0;color:var(--accent);text-decoration:underline;
  cursor:pointer;font:inherit}

/* --- Brecha --- */
.brechas{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.br{padding:16px 18px;border-radius:11px;background:var(--card-2);border:1px solid var(--line)}
.br .bl{margin:0 0 5px;font:600 11px/1.4 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.br .bv{margin:0;font-family:var(--mono);font-size:1.5rem;font-weight:600;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.br .bd{margin:6px 0 0;font-size:.82rem;color:var(--ink-3);line-height:1.45}
.br.ok{background:var(--pos-bg);border-color:var(--pos)}
.br.ok .bv{color:var(--pos)}
.br.falta{background:var(--neg-bg);border-color:var(--neg)}
.br.falta .bv{color:var(--neg)}
.bexp{margin:16px 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-2)}

@media (max-width:520px){
  .gacc{flex-direction:column;align-items:stretch}
  .gbtn,.gno,.gsalto{width:100%;text-align:center}
}

/* --- Panel "lo que ya nos contaste" --- */
.mios{margin:34px 0 0;padding:20px 22px;border-radius:12px;
  background:var(--card-2);border:1px solid var(--line)}
.mios h2{margin:0 0 6px;font-family:var(--disp);font-size:1.15rem;letter-spacing:-.01em;
  font-weight:700;text-transform:none;color:var(--ink)}
.mios .hint{margin:0 0 16px}
.miosl{display:grid;grid-template-columns:1fr auto;gap:0;margin:0}
.miosl dt{padding:9px 0;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink-2)}
.miosl dd{padding:9px 0;border-top:1px solid var(--line);margin:0;text-align:right;
  font-family:var(--mono);font-size:.92rem;font-variant-numeric:tabular-nums}
.miosl dd .mio-o{display:block;margin-top:2px;font-family:inherit;font-size:.75rem;
  color:var(--ink-3);font-weight:400}
.miosb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.miosb button{padding:11px 16px;border-radius:8px;cursor:pointer;background:transparent;
  border:1px solid var(--line);color:var(--ink-3);font:500 .9rem/1 inherit;font-family:inherit}
.miosb button:hover{border-color:var(--neg);color:var(--neg)}
@media (max-width:480px){
  .miosl{grid-template-columns:1fr}
  .miosl dd{text-align:left;border-top:none;padding-top:0}
  .miosl dt{padding-bottom:2px}
  .miosb{flex-direction:column;align-items:stretch}
  .miosb .cta,.miosb button{width:100%;text-align:center}
}

/* --- Escenarios guardados --- */
.esc{padding:20px 22px;margin:0 0 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sombra,none)}
.esch{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between}
.escq{margin:0;font:600 11px/1.4 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.esct{margin:3px 0 0;font-family:var(--disp);font-size:1.1rem;letter-spacing:-.01em;line-height:1.25}
.escf{margin:0;font-size:.82rem;color:var(--ink-3);white-space:nowrap}
.escv{margin:12px 0 0;padding:10px 13px;border-radius:8px;font-size:.87rem;line-height:1.5;
  background:var(--card-2);color:var(--ink-2)}
.escg{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:18px 0 16px}
.escl{margin:0 0 8px;font:600 11px/1.4 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.escd{display:grid;grid-template-columns:1fr auto;gap:0;margin:0}
.escd dt{padding:6px 10px 6px 0;border-top:1px solid var(--line);font-size:.87rem;color:var(--ink-2)}
.escd dd{padding:6px 0;border-top:1px solid var(--line);margin:0;text-align:right;
  font-family:var(--mono);font-size:.87rem;font-variant-numeric:tabular-nums}
.esca{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.escab{padding:10px 15px;border:none;border-radius:8px;background:var(--accent);color:var(--sobre-acento);
  font:600 .9rem/1 inherit;font-family:inherit;cursor:pointer}
.escab:hover{opacity:.92}
.escax{padding:10px 15px;border:1px solid var(--line);border-radius:8px;background:transparent;
  color:var(--ink-3);font:500 .9rem/1 inherit;font-family:inherit;cursor:pointer}
.escax:hover{border-color:var(--neg);color:var(--neg)}
@media (max-width:480px){
  .escd{grid-template-columns:1fr}
  .escd dd{text-align:left;border-top:none;padding-top:0}
  .escd dt{padding-bottom:1px}
  .esca{flex-direction:column}
  .escab,.escax{width:100%;text-align:center}
}
.proc .est{margin-left:7px}

/* --- Saltar al contenido: primera parada del teclado y del lector de pantalla --- */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:12px 18px; border-radius:0 0 10px 0; background:var(--accent); color:var(--sobre-acento);
  font-weight:600; text-decoration:none;
}
.saltar:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ── Saber más · el componente que responde «¿por qué este número?» ───────── */
.sabermas{border:1px solid var(--line);border-radius:12px;background:var(--card);
  margin-top:18px;overflow:hidden}
.sabermas>summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;min-height:44px}
.sabermas>summary::-webkit-details-marker{display:none}
.sabermas>summary::after{content:'';margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .15s}
.sabermas[open]>summary::after{transform:rotate(-135deg)}
.sabermas>summary:hover{background:var(--card-2)}
.sabermas .smq{font-weight:600;font-size:.94rem;color:var(--ink)}
.sabermas .smt{font-size:.88rem;color:var(--ink-3)}
.smbody{padding:2px 16px 18px;border-top:1px solid var(--line)}
.smbody .smh{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:17px 0 6px}
.smbody p{font-size:.92rem;color:var(--ink-2);line-height:1.55;margin:0}
.smres{font-family:var(--mono);font-size:1.5rem;color:var(--ink)!important;margin-top:14px!important}
.smres .smu{font-size:.8rem;color:var(--ink-3)}
.smcalc{font-family:var(--mono);font-size:.85rem;background:var(--sunk);
  border-radius:8px;padding:11px 13px;line-height:1.7;overflow-x:auto}
.smbody ul{margin:0;padding-left:18px;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.smbody ul li{margin-bottom:7px}
.smreglas>li>b{color:var(--ink);font-weight:600}
.smmeta{display:block;font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin-top:3px}
.smexc{margin-top:5px!important;padding-left:16px!important;font-size:.86rem!important;
  color:var(--ink-3)!important}
.smsup li,.smadv li{color:var(--warn)}
.smok{color:var(--pos)!important}
.smacc{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.smacc .sig{flex:1 1 180px}
.proc .pper{margin:-6px 0 12px;color:var(--ink-3)}
.proc ul.sup li{color:var(--warn)}
.note.estres p{margin:0}

/* ── Escenario que requiere revisión (D-4) ───────────────────────────────── */
.escrev{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;
  padding:13px 15px;margin:12px 0}
.escrt{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--warn);margin:0 0 5px}
.escrd{font-size:.9rem;color:var(--ink);margin:0 0 10px;font-weight:600}
.escrl{margin:0;padding-left:17px;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.escrl li{margin-bottom:10px}
.escrl b{color:var(--ink);display:block}
.escrq{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--warn);margin:3px 0}
.escre{display:block;margin-top:3px}
.escrl .fue{margin-top:6px}

/* Un divisor en cero no se usa: el campo lo dice en vez de propagar NaN. */
input[aria-invalid="true"]{border-color:var(--neg);background:var(--neg-bg)}

/* ── Requisitos de elegibilidad del subsidio (D-5A) ──────────────────────── */
.reqs{margin:0;display:grid;gap:0;border:1px solid var(--line);border-radius:11px;
  background:var(--card);overflow:hidden}
.reqs dt{padding:12px 15px 5px;font-size:.93rem;color:var(--ink);font-weight:500;line-height:1.45}
.reqs dd{margin:0;padding:0 15px 12px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.reqs dd br{display:none}
.reqs dd .chint{font-size:.83rem;color:var(--ink-3);line-height:1.45}
.reqs dd:last-child{border-bottom:0}
.reqs .chint{margin:0}

/* Diferencia entre un escenario y su recálculo. La corrección dice qué regla
   cambió; esto dice cuánta plata cambió, que es la pregunta de verdad. */
.escdif{margin:12px 0 0}
.escdl{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.escdl li{font-size:.9rem;line-height:1.45;color:var(--ink-2);
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}
.escdl li b{color:var(--ink)}
.escdv{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;
  color:var(--ink-3);margin-top:4px}

/* Salida de la calculadora de la portada. Era el único punto del sitio donde
   alguien obtenía un resultado y no se le ofrecía a dónde ir. */
.calcsal{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.csl{margin:0 0 12px;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.csb{display:flex;flex-wrap:wrap;gap:10px}
.csa{display:inline-block;padding:12px 18px;border-radius:11px;border:1px solid var(--accent);
  background:var(--accent);color:var(--sobre-acento);font:600 .92rem/1.3 var(--sans),system-ui,sans-serif;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,filter .12s ease}
.csa:hover,.csa:focus-visible{transform:translateY(-1px);filter:brightness(1.06)}
.csa.csb2{background:transparent;color:var(--accent-ink);border-color:var(--line-2)}
.csa.csb2:hover,.csa.csb2:focus-visible{border-color:var(--accent);filter:none}

/* «Antes de empezar», plegada. Sigue siendo una tarjeta: solo deja de ocupar
   la pantalla entera antes de que la persona pueda escribir su primer dato. */
details.antes{padding:0}
details.antes > summary{
  list-style:none; cursor:pointer; padding:16px 18px;
  display:flex; align-items:center; gap:12px;
}
details.antes > summary::-webkit-details-marker{display:none}
/* El «+» ya lo pone la regla general de summary::before. Añadir uno propio
   dejaba la tarjeta con un signo a cada lado del título. */
details.antes > summary h2{margin:0;
  font-family:var(--disp); font-size:1.05rem; font-weight:700;
  letter-spacing:-.02em; text-transform:none; color:var(--ink);
}
details.antes > summary:hover h2,
details.antes > summary:focus-visible h2{color:var(--accent)}
.antesb{padding:0 18px 18px}
.antesb > p:first-child{margin-top:0}


/* Aviso de «borré esto, puedes deshacerlo». Vive arriba de la lista, no flota:
   un aviso flotante en un teléfono tapa justo lo que la persona está mirando. */
.undo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:0 0 18px;padding:13px 16px;border-radius:10px;
  background:var(--warn-bg);border:1px solid var(--warn-line)}
.undo p{margin:0;flex:1 1 200px;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.undo p b{color:var(--ink)}
.undo button{border:1px solid var(--ink-2);background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:.85rem;font-weight:600;
  padding:9px 16px;border-radius:9px;cursor:pointer}
.undo button:hover{border-color:var(--accent);color:var(--accent)}

/* ── Diagnóstico · qué te aplica ────────────────────────────────────────── */
.dopc{display:grid;gap:9px;margin-top:14px}
@media (min-width:520px){.dopc{grid-template-columns:1fr 1fr}}
.dop{text-align:left;padding:14px 16px;border:1px solid var(--line-2);border-radius:11px;
  background:var(--card);color:var(--ink);font:500 .95rem/1.35 var(--sans);cursor:pointer;
  transition:border-color .12s ease,background .12s ease}
.dop:hover{border-color:var(--accent);background:var(--accent-2)}
.dop[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-2);
  color:var(--accent-ink);font-weight:600}

.hal{border:1px solid var(--line);border-left:3px solid var(--line-2);
  border-radius:0 12px 12px 0;padding:18px 18px;margin:0 0 12px;background:var(--card)}
.hal-si{border-left-color:var(--accent)}
.hal-no{border-left-color:var(--ink-3)}
.hal-otro{border-left-color:var(--warn)}
.hal-falta{border-left-color:var(--warn)}
.hal-nadie{border-left-color:var(--neg)}
.halq{margin:0 0 8px;font:600 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.hal-si .halq{color:var(--accent)}
.hal-otro .halq,.hal-falta .halq{color:var(--warn)}
.hal-nadie .halq{color:var(--neg)}
.halt{margin:0 0 8px;font-family:var(--disp);font-size:1.05rem;font-weight:700;
  line-height:1.3;letter-spacing:-.02em}
.hald{margin:0 0 10px;font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.halp{margin:0;font-size:.87rem;line-height:1.55;color:var(--ink-3)}
.halc{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin:0 0 12px;
  padding:11px 13px;border-radius:9px;background:var(--sunk)}
.halc dt{margin:0;font-size:.84rem;color:var(--ink-3)}
.halc dd{margin:0;font-family:var(--mono);font-size:.88rem;font-weight:600;
  text-align:right;font-variant-numeric:tabular-nums}
.halr{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:9px}
.halr li{font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.halr li b{display:block;color:var(--ink);font-weight:500}
.halau{display:block;margin-top:3px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;color:var(--ink-3)}
.halnd{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:99px;
  background:var(--neg-bg);color:var(--neg);font:600 10px/1.5 var(--mono);
  letter-spacing:.06em;text-transform:uppercase}
.halh{display:inline-block;margin-top:14px;font-size:.88rem;font-weight:600;
  color:var(--accent);text-decoration:none;padding:6px 0}
.halh:hover{text-decoration:underline;text-underline-offset:3px}
.gn{margin:0 0 4px;font:600 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.ghint{margin:0 0 4px;font-size:.88rem;line-height:1.55;color:var(--ink-3)}

/* ── Calendario · una fecha, qué cambia y a dónde ir ─────────────────────── */
.hito{position:relative;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;padding:18px 18px;margin:0 0 12px;background:var(--card)}
.hito-urg{border-left-color:var(--warn)}
.hito-paso{border-left-color:var(--line-2);background:var(--card-2)}
.hitoc{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 8px}
.hitod{margin:0;font:600 10px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.hito-urg .hitod{color:var(--warn)}
.hito-paso .hitod{color:var(--ink-3)}
.hitof{margin:0;font-family:var(--mono);font-size:.78rem;color:var(--ink-3)}
.hitot{margin:0 0 10px;font-family:var(--disp);font-size:1.08rem;font-weight:700;
  line-height:1.3;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.hitoq{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 14px;margin:0 0 10px;padding:10px 13px;border-radius:9px;background:var(--sunk)}
.hitoq .hn{font-size:.84rem;color:var(--ink-3)}
.hitoq .hv{font-family:var(--mono);font-size:.9rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.hitoq .hv b{color:var(--ink);font-weight:600}
.hitoe{margin:0 0 10px;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.hiton{margin:0 0 10px;font-size:.84rem;line-height:1.5;color:var(--ink-3)}
.hitoa{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.hitoh{font-size:.88rem;font-weight:600;color:var(--accent);text-decoration:none;padding:6px 0}
.hitoh:hover{text-decoration:underline;text-underline-offset:3px}

.hlista{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hlista li{display:flex;flex-wrap:wrap;gap:4px 14px;padding:11px 0;
  border-top:1px solid var(--line);font-size:.92rem}
.hlista li:first-child{border-top:none}
/* «Ya pasó» se dice, no se atenúa. Bajar la opacidad dejaba esas filas en
   2,26:1 —el mismo error que la fecha de las tarjetas de calendario— y además
   atenuar es una señal que hay que adivinar. Es la segunda vez que caigo en
   esto: la opacidad sobre un token de texto es siempre un problema de
   contraste disfrazado de decisión estética. */
.hlista li.pas .hlf{color:var(--ink-3)}
.hlp{font:600 9px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line-2);border-radius:99px;
  padding:1px 7px;flex:0 0 auto;align-self:center}
.hlf{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);flex:0 0 auto;min-width:11em}
.hlt{color:var(--ink-2);flex:1 1 auto}
details.antes > summary h3{margin:0;font-family:var(--disp);font-size:1.02rem;
  font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
details.antes > summary:hover h3,
details.antes > summary:focus-visible h3{color:var(--accent)}

/* ── Tu año mes a mes ────────────────────────────────────────────────────── */
.meses{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 12px;margin-top:6px}
@media (min-width:560px){.meses{grid-template-columns:repeat(3,1fr)}}
@media (min-width:860px){.meses{grid-template-columns:repeat(4,1fr)}}
.mes{display:flex;flex-direction:column;gap:4px}
.mes label{font-size:.78rem;color:var(--ink-3);font-family:var(--mono);
  letter-spacing:.04em;text-transform:uppercase}
.mes input{width:100%;padding:10px 11px;font-size:.95rem}
.mesacc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.mesacc button{border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  font-family:var(--sans);font-size:.84rem;font-weight:600;padding:8px 14px;
  border-radius:9px;cursor:pointer}
.mesacc button:hover{border-color:var(--accent);color:var(--accent)}
.mesacc .hint{margin:0}

/* La tira: doce barras y la línea del promedio. No es un gráfico de análisis,
   es una forma de ver de un vistazo si el año fue parejo o no. */
.tira{position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  gap:3px;align-items:end;height:170px;padding:16px 0 0;
  border-bottom:1px solid var(--line-2)}
.tb{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;min-width:0}
.tbar{display:block;width:100%;background:var(--accent);border-radius:3px 3px 0 0;
  min-height:2px;transition:height .18s ease}
.tbajo .tbar{background:var(--accent-2);border:1px solid var(--accent);border-bottom:none}
.tmax .tbar{background:var(--accent-ink)}
.tm{position:absolute;bottom:-20px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.6rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tprom{position:absolute;left:0;right:0;border-top:1px dashed var(--ink-3);
  pointer-events:none}
/* La marca del plan de cada mes. Es una REFERENCIA, no una segunda serie:
   una barra fantasma al lado haría parecer que compiten dos cosas del
   mismo tipo, y lo que hay es un logro y la vara contra la que se mide.
   Por eso es una línea y no una barra, y por eso usa tinta y no un color
   de serie — el color queda entero para el dato.
   El anillo de 2px en el color de la superficie es lo que la mantiene
   legible donde cruza la barra; no es un borde decorativo. */
.tplan{position:absolute;left:0;right:0;height:2px;border-radius:1px;
  background:var(--ink-2);box-shadow:0 0 0 2px var(--card);
  pointer-events:none}
/* Cuando el mes llegó a su plan, la marca se apaga: ya no es información
   que haya que buscar, y compite con la barra que sí lo es. */
.tb.cumple .tplan{background:var(--ink-3);opacity:.5;box-shadow:none}
.tpie{margin:28px 0 0;font-size:.84rem;color:var(--ink-3)}
.tpie b{color:var(--ink-2);font-family:var(--mono)}

/* ── Avisos · lo que el sitio tiene que decirte hoy ──────────────────────
   Cuatro voces distintas y se tienen que ver distintas. Una obligación
   legal y una proyección sobre tus propios meses no pueden compartir
   color, porque la diferencia entre las dos es justo lo que el sitio
   promete no borrar. */
.avs{display:grid;gap:12px;margin:0 0 26px}
.av{padding:16px 18px;border-radius:12px;border:1px solid var(--line);
  background:var(--card)}
.av.urgente{border-color:var(--warn-line);background:var(--warn-bg)}
.av.atencion{border-color:var(--line-2)}
.avp{display:inline-block;padding:2px 9px;border-radius:99px;
  font:600 10.5px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  background:var(--card-2);color:var(--ink-3);border:1px solid var(--line)}
.avp.obligacion{background:var(--neg-bg);color:var(--neg);border-color:transparent}
.avp.calculo{background:var(--accent-2);color:var(--accent-ink);border-color:transparent}
.avp.estimacion{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.avp.recomendacion{background:var(--card-2);color:var(--ink-2)}
.avt{margin:10px 0 0;font-family:var(--disp);font-size:1.05rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.3}
.avq{margin:6px 0 0;font-size:.87rem;line-height:1.55;color:var(--ink-2);max-width:62ch}
.ava{display:inline-block;margin-top:11px;font-size:.85rem;font-weight:600;
  color:var(--accent);text-decoration:none}
.ava:hover{text-decoration:underline}
.avvoz{display:block;margin-top:7px;font-size:.76rem;color:var(--ink-3)}

/* ── Mi CuentaPropia · perfil y bitácora ───────────────────────────────── */
.pfl{display:grid;gap:0;margin:0}
.pf{display:grid;grid-template-columns:1fr auto auto;gap:10px 14px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line)}
.pf:first-child{border-top:0}
.pfn{font-size:.9rem;color:var(--ink-2);min-width:0}
.pfn small{display:block;font-size:.74rem;color:var(--ink-3);margin-top:2px}
.pfv{font-family:var(--mono);font-size:.95rem;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.pfx{border:1px solid var(--line);background:transparent;color:var(--ink-3);
  font:500 .78rem/1 inherit;font-family:inherit;padding:7px 10px;border-radius:7px;cursor:pointer}
.pfx:hover{border-color:var(--neg);color:var(--neg)}
@media (max-width:520px){
  .pf{grid-template-columns:1fr auto}
  .pfx{grid-column:2;justify-self:end}
  .pfv{grid-column:1/-1;text-align:left}
}
.bit{list-style:none;margin:0;padding:0}
.bit li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--line);font-size:.87rem;color:var(--ink-2)}
.bit li:first-child{border-top:0}
.bit .bf{margin-left:auto;font-family:var(--mono);font-size:.76rem;color:var(--ink-3);
  white-space:nowrap}
.bit .bd{color:var(--ink-3);font-size:.8rem}
.bit li.sens .bq::before{content:"•";color:var(--neg);margin-right:6px}

/* ── Cotizaciones comerciales ──────────────────────────────────────────── */
.cot{padding:18px 20px;margin:0 0 14px;border-radius:12px;background:var(--card);
  border:1px solid var(--line)}
.coth{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between}
.cotn{margin:0;font:600 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent)}
.cott{margin:4px 0 0;font-family:var(--disp);font-size:1.1rem;letter-spacing:-.01em;line-height:1.25}
.cotc{margin:3px 0 0;font-size:.85rem;color:var(--ink-3)}
.cotp{font-family:var(--disp);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;white-space:nowrap}
.cota{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.lin{display:grid;grid-template-columns:1fr 90px 130px auto;gap:10px;align-items:end;
  margin-bottom:12px}
@media (max-width:620px){.lin{grid-template-columns:1fr 1fr;gap:10px}
  .lin .lind{grid-column:1/-1}}
.lin label{font-size:.76rem}
.linx{border:1px solid var(--line);background:transparent;color:var(--ink-3);
  font:500 .8rem/1 inherit;font-family:inherit;padding:11px 12px;border-radius:8px;cursor:pointer}
.linx:hover{border-color:var(--neg);color:var(--neg)}

/* El documento imprimible. Sigue siendo la misma página: lo que cambia es
   qué se ve cuando el navegador la manda al PDF. */
.doc{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:30px 28px;margin:0 0 22px}
.docenc{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  align-items:flex-start;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.docem{font-family:var(--disp);font-size:1.25rem;font-weight:700;margin:0;letter-spacing:-.02em}
.docem+p{margin:3px 0 0;font-size:.85rem;color:var(--ink-3);line-height:1.5}
.docmeta{text-align:right;font-family:var(--mono);font-size:.8rem;color:var(--ink-3);line-height:1.7}
.docmeta b{color:var(--ink);font-size:.9rem}
.docs2{margin-top:22px}
.docs2 h3{font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px}
.doctot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:18px;padding-top:14px;border-top:2px solid var(--ink)}
.doctot .dtl{font:600 12px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.doctot .dtv{font-family:var(--disp);font-size:1.8rem;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.docpie{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-3);line-height:1.6}
@media (max-width:520px){
  .doc{padding:20px 18px}
  .docmeta{text-align:left}
  .doctot .dtv{font-size:1.45rem}
}

@media print{
  .nav,footer,.saltar,.noimp,.avs,details{display:none !important}
  body{background:#fff}
  .wrap{max-width:100%;padding:0}
  .doc{border:0;border-radius:0;padding:0;box-shadow:none;background:#fff}
  .doc,.doc *{color:#000 !important;background:transparent !important}
  .docenc,.doctot{border-color:#000 !important}
  th,td{border-color:#bbb !important}
  a[href]{text-decoration:none}
  @page{margin:18mm 16mm}
}

/* Nombre técnico dentro de una tabla de prosa: monoespaciado y más chico,
   porque es una referencia, no el contenido. */
td.mono,th.mono{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);
  white-space:nowrap}

/* La tabla del documento lleva tres columnas de cifras y en un teléfono
   quedaban pegadas: «40$25.000$1.000.000». Padding solo en las numéricas,
   que son las que se leen de derecha a izquierda. */
/* Toda columna que no sea la primera necesita aire a la izquierda, no solo
   las numéricas: en el resumen del año la tercera columna es la nota, y sin
   esto quedaba pegada al monto — «$1.311.111sobre los meses anotados». */
.doc td:not(:first-child),.doc th:not(:first-child){padding-left:12px}
.doc td.r,.doc th.r{padding-left:14px}
.doc th,.doc td{font-size:.85rem}
@media (max-width:420px){.doc th,.doc td{font-size:.8rem}.doc td.r,.doc th.r{padding-left:9px}}

/* ── Elegir de qué fechas avisar ────────────────────────────────────────
   Una casilla por fecha, con lo que pasa ese día al lado. La caja entera
   es el objetivo táctil: en un teléfono, apuntarle al cuadradito de 16px
   es exactamente lo que hace que alguien marque la fecha equivocada. */
.opc{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:15px 16px;margin:0 0 10px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--card);cursor:pointer;transition:border-color .13s,background .13s}
.opc:hover{border-color:var(--accent)}
.opc:has(input:checked){border-color:var(--accent);background:var(--accent-2)}
.opc:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.opc input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.opcb{display:grid;gap:3px;min-width:0}
.opct{font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:-.018em;
  line-height:1.3;color:var(--ink)}
.opcf{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--accent-ink);
  font-weight:600}
.opcq{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin-top:3px}
.opca{font-size:.78rem;color:var(--ink-3);margin-top:4px}
.hint.err{color:var(--neg)}

/* ── Centro de confianza · de dónde sale cada número ────────────────────
   Las cifras que NO son firmes van primero y se ven distinto. Lo normal
   en un producto es esconder la salvedad; acá es el argumento. */
.abi{padding:18px 20px;margin:0 0 12px;border-radius:12px;background:var(--card);
  border:1px solid var(--line)}
.abi.mal{border-color:var(--neg-bg)}
.abih{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.abiv{font-family:var(--mono);font-size:.95rem;font-variant-numeric:tabular-nums;
  color:var(--ink-2);text-align:right}
.abit{margin:11px 0 5px;font-family:var(--disp);font-size:1.05rem;font-weight:700;
  letter-spacing:-.018em;line-height:1.3}
.abiq{margin:0;font-size:.89rem;line-height:1.55;color:var(--ink-2);max-width:62ch}
.abin{margin:9px 0 0;font-size:.83rem;line-height:1.55;color:var(--ink-3);max-width:62ch}
.abif{margin:9px 0 0;font-family:var(--mono);font-size:.76rem;color:var(--ink-3)}
.abi .fue{margin-top:12px}

/* Píldora de estado dentro de una tabla densa: más chica que .pill y sin
   mayúsculas, porque acá se repite en veintiocho filas. */
.epil{display:inline-block;padding:2px 8px;border-radius:99px;font-family:var(--mono);
  font-size:10.5px;font-weight:600;letter-spacing:.03em;white-space:nowrap}
.epil.ok{background:var(--pos-bg);color:var(--pos)}
.epil.ojo{background:var(--warn-bg);color:var(--warn)}

.fnt{padding:14px 0;border-top:1px solid var(--line)}
.fnt:first-of-type{border-top:0;padding-top:0}
.fntd{margin:0;font-size:.92rem;font-weight:600;line-height:1.4;color:var(--ink)}
.fnto{margin:3px 0 0;font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;
  color:var(--ink-3)}
.fntv{margin:8px 0 0;font-size:.82rem;line-height:1.55;color:var(--ink-2)}
.fntn{margin:8px 0 0;font-size:.8rem;line-height:1.55;color:var(--ink-3);max-width:66ch}
.fnt .fue{margin-top:10px}

/* Lista de promesas en prosa. Sin viñeta redonda: una raya corta, que no
   compite con el texto y no parece una lista de características. */
ul.claro{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
ul.claro li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.6;
  color:var(--ink-2);max-width:62ch}
ul.claro li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;
  border-radius:1px;background:var(--accent)}
ul.claro strong{color:var(--ink);font-weight:600}

/* Las dos frases de confianza bajo el titular de la portada. Discretas: el
   argumento está en las páginas que enlazan, no en repetirlo acá. */
.confia{margin:14px 0 0;font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;
  color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 10px}
.confia a{color:var(--ink-3)}
.confia a:hover{color:var(--accent)}

/* Los enlaces a la norma dentro de la tabla de cifras son el contenido
   entero de su celda, así que no les vale la excepción de «enlace dentro de
   una frase» de la 2.5.8: un «SII» de 15×14 px es imposible de apretar con
   el pulgar. El área crece con padding y el margen negativo la devuelve al
   sitio, para que la tabla no se estire. */
#parametros td a{display:inline-block;min-width:24px;padding:5px 7px;margin:-5px -7px;
  border-radius:6px;text-align:left}
#parametros td a:hover{background:var(--accent-2)}

/* Tres opciones de texto largo no caben en una fila de 320 px. En vez de
   encogerlas hasta que no se lean, se apilan: el segmentado de dos sigue
   horizontal y este baja a columna. La pregunta que abre
   /independiente-vs-dependiente es una frase, no una etiqueta. */
.seg3{flex-direction:column}
.seg3 button{text-align:left;padding:11px 13px;line-height:1.35}
@media(min-width:760px){
  .seg3{flex-direction:row}
  .seg3 button{text-align:center;padding:10px 10px}
}

/* Las dos columnas de «lo que no se convierte en pesos». El título de cada
   columna no es un <h3> porque no abre una sección: rotula una lista. */
#otras>div>.h{font-family:var(--disp);font-size:1rem;font-weight:700;margin:0;
  color:var(--ink)}
#otras ul.claro{margin-top:12px}
#otras .hint{display:block;margin-top:2px}

/* /mi-privacidad. Un derecho y un tratamiento se leen igual: un título,
   una explicación y dos columnas que dicen qué pasa en cada lado. */
.der,.trat{padding:16px 0;border-top:1px solid var(--line)}
.der:first-child,.trat:first-child{border-top:0;padding-top:0}
.der>.h,.trat>.h{font-family:var(--disp);font-size:1.02rem;font-weight:700;
  margin:0 0 4px;color:var(--ink)}
.der>.d,.trat>.d{font-size:.9rem;color:var(--ink-2);margin:0 0 12px;max-width:62ch}
.der .grid2{gap:12px 22px;margin:0 0 10px}
.der .dl{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 3px}
.der .grid2 p:not(.dl){font-size:.9rem;line-height:1.55;color:var(--ink-2);margin:0}
.trat p{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin:0 0 7px}
.trat p strong{color:var(--ink)}
.der .hint,.trat .hint{margin-top:2px}
#central td:first-child,#local td:first-child{max-width:30ch}