/* ════════════════════════════════════════════════════════════════════════
   Calculadora Real — sistema de diseño

   Las decisiones de COLOR no están tomadas por "qué significa cada color",
   porque eso no tiene respaldo experimental. Están tomadas sobre lo que sí:

   1. SATURACIÓN Y BRILLO, no el tono. (Valdez y Mehrabian, 1994: el placer lo
      predice el brillo con β=.69 y la activación la saturación con β=.60.)
      De ahí: fondo casi blanco y color saturado en dos o tres elementos como
      mucho — nunca por encima del 10 % del área pintada.

      El ACENTO es azul profundo, y el motivo NO es «el azul transmite
      confianza», que es folclore sin ningún respaldo experimental. Son dos:
        · el verde y el rojo ya están ocupados por la convención de bolsa, y
          pelearse con una asociación aprendida es tirar dinero;
        · el significado del color SÍ es aprendido y cultural (Palmer y
          Schloss, 2010), y en España los bancos, Hacienda y la Seguridad
          Social son azules. Es lo que este público espera de una herramienta
          de dinero.

   2. EL ROJO EN CIFRAS FINANCIERAS CAMBIA LA CONDUCTA. (Bazley, Cronqvist y
      Mormann, 2021, Management Science: ~25 % más aversión al riesgo y
      expectativas más pesimistas solo por pintar la pérdida de rojo.)
      LA CIFRA PRINCIPAL NUNCA VA EN ROJO. Ni los intereses, ni los impuestos,
      ni lo que se lleva la inflación.

   3. EL CONTRASTE BAJO ES EL FALLO NÚMERO UNO DE LA WEB (83,9 % de las
      portadas, WebAIM Million 2026) y este público tiene entre 35 y 65 años.
      PROHIBIDO cualquier gris de texto más claro que #767676.

   4. EL COLOR NUNCA ES EL ÚNICO PORTADOR. Un 8 % de los hombres no distingue
      rojo de verde. Los cinco colores del reparto están separados además por
      LUMINOSIDAD, y toda cifra lleva su etiqueta.

   Las decisiones de FORMA salen de medir productos que sí se sienten caros
   (Stripe, Linear, Mercury, Ramp, Wise, Monarch) frente a las calculadoras
   españolas que rankean. Lo que los separa es un presupuesto de recursos:
   menos pesos, menos colores, menos sombras — y todos calibrados.

   Todos los contrastes de este fichero están MEDIDOS, no supuestos:
   `python pruebas/prueba-contraste.py`
   ════════════════════════════════════════════════════════════════════════ */

/* ── fuentes propias ────────────────────────────────────────────────────
   Servidas desde aquí, NO enlazadas a Google. Enlazarlas mete un tercer
   dominio en la ruta crítica del renderizado y además es un problema de RGPD
   en España. Con unicode-range el navegador solo descarga el subconjunto que
   necesita: para español, 20 KB. Una sola familia para toda la web. */
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url(/fuentes/figtree-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;
}
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url(/fuentes/figtree-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    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;
}

:root{
  /* superficies: prácticamente blancas. El fondo lleva un punto de gris frío
     para que las tarjetas blancas se despeguen: en pantalla se lee como
     blanco, pero da una capa de profundidad que el #FFF plano no da. */
  --fondo:#F7F8FA;
  --papel:#FFFFFF;
  --papel-2:#F1F3F6;
  --papel-3:#E7EAEF;

  /* tinta: ningún gris de texto por encima de #767676 */
  --tinta:#16191D;
  --tinta-media:#3F454E;
  --tinta-suave:#555C67;
  --tinta-rgb:22,25,29;

  /* líneas. Las decorativas pueden ser suaves; las de un CONTROL no:
     WCAG 2.2 §1.4.11 pide 3:1 para los bordes de componentes de interfaz. */
  --linea:#E2E5EA;
  --linea-control:#868C96;

  /* el único color saturado de la web */
  --acento:#0E3260;
  --acento-fuerte:#08203F;
  --acento-lavado:#EFF2F7;
  --acento-borde:#93A9C4;
  --btn-texto:#FFFFFF;

  /* reparto del dinero: desaturados y separados también por LUMINOSIDAD,
     para que se lean en escala de grises y con daltonismo */
  --seg-tuyo:#5B6770;
  --seg-queda:#0E3260;
  --seg-comision:#9F864B;
  --seg-impuesto:#5F4568;
  --seg-inflacion:#8F705B;

  /* el ámbar advierte de una CONDICIÓN, nunca pinta una cifra de dinero */
  --aviso:#8A6A22;
  --aviso-lavado:#FAF3E4;

  --grafico-rejilla:#E2E5EA;
  --grafico-texto:#555C67;

  /* escala de espacio 4/8. No hay ni un valor fuera de esta lista. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --e7:48px; --e8:64px; --e9:96px;

  /* esquinas menos redondas: en contexto institucional, lo muy redondeado
     resta seriedad. Dos radios, y ninguno más. */
  --radio-s:4px;
  --radio:8px;

  /* sombras: tintadas con la tinta de marca, desplazamiento SOLO en Y, spread
     negativo para que no se derramen de lado, y ninguna capa por encima de
     alfa .10. La sombra única y oscura es el tell de plantilla barata. */
  /* UNA capa, casi imperceptible. El peso lo lleva el borde de 1 px, no la
     sombra: es lo que hacen los productos que se leen serios. */
  --sombra:0 1px 3px rgba(var(--tinta-rgb),.05);
  --sombra-alta:0 2px 4px rgba(var(--tinta-rgb),.05),
                0 12px 24px -6px rgba(var(--tinta-rgb),.09),
                0 32px 64px -16px rgba(var(--tinta-rgb),.10);

  /* movimiento: el color cambia más rápido que la forma. Nunca ease-in. */
  --dur-color:120ms;
  --dur-ui:180ms;
  --dur-panel:260ms;
  --ease:cubic-bezier(.25,1,.5,1);
  --ease-salida:cubic-bezier(.23,1,.32,1);

  --ancho:1000px;
  --texto:68ch;

  /* UNA sola familia. Figtree tiene la redondez amable de las geométricas
     pero letras distinguibles entre sí y cifras de ancho fijo de verdad.
     Para cambiarla, se cambia AQUÍ y se descarga el .woff2 a /fuentes/. */
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── DECISIÓN: la web es CLARA para todo el mundo ────────────────────────
   Se quita a propósito el seguimiento de `prefers-color-scheme`. El sector con
   el que compite —bancos, Hacienda, Seguridad Social— es blanco, y la
   polaridad positiva (texto oscuro sobre fondo claro) rinde mejor en lectura
   sostenida, que es lo que se hace en las páginas de contenido.

   La paleta oscura NO se borra: sigue viva bajo [data-theme="dark"], así que
   basta con estampar ese atributo en <html> para recuperarla si algún día se
   añade un selector de tema. Es una decisión, no una omisión. */

:root[data-theme="dark"]{
  --fondo:#15181D; --papel:#1B1F25; --papel-2:#20242A; --papel-3:#272C33;
  --tinta:#E9ECF1; --tinta-media:#BCC3CE; --tinta-suave:#98A0AC; --tinta-rgb:0,0,0;
  --linea:#282D34; --linea-control:#7B828D;
  --acento:#5F97CC; --acento-fuerte:#7FAFDD; --acento-lavado:#141C26;
  --acento-borde:#3A5F85; --btn-texto:#0A1626;
  --seg-tuyo:#9DAAB3; --seg-queda:#5F97CC; --seg-comision:#DFCC9F;
  --seg-impuesto:#9464A4; --seg-inflacion:#D1B6A2;
  --aviso:#C9A45B; --aviso-lavado:#2A2416;
  --grafico-rejilla:#282D34; --grafico-texto:#98A0AC;
}

*{box-sizing:border-box}
/* Le dice al navegador que pinte SUS controles en claro. Sin esto, un móvil
   en modo oscuro dibuja los desplegables y las barras de scroll en negro
   sobre nuestra página blanca. */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.env{max-width:var(--ancho); margin:0 auto; padding:0 var(--e4)}
@media(min-width:720px){ .env{padding:0 var(--e5)} }

/* ── CIFRAS ────────────────────────────────────────────────────────────
   Sin cifras de ancho fijo el resultado BAILA al recalcular: medido, hasta
   82 px de salto entre "1.111,11 €" y "4.444,44 €". Ninguna de las
   calculadoras españolas que rankean lo usa. Es el detalle más rentable de
   toda la lista. 'zero' y 'cv01' mejoran la lectura sin cambiar el ancho. */
.cifra-grande, .dato b, .leyenda em, table, .mini-dato b, .entrada input,
.contexto b, .bloque-cifra, td, th{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1,"zero" 1,"cv01" 1;
}

.saltar{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--acento); color:var(--btn-texto);
  padding:var(--e3) var(--e4); border-radius:0 0 var(--radio-s) 0; font-weight:500}
.saltar:focus{left:0}

/* foco visible en todo lo enfocable (WCAG 2.2 §2.4.11 y §2.4.13) */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
  border-radius:var(--radio-s);
}

/* ─────────── cabecera ─────────── */
.cab{background:var(--papel); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:40}
.cab .env{display:flex; align-items:center; justify-content:space-between;
  gap:var(--e5); min-height:60px; flex-wrap:wrap}
.marca{display:inline-flex; align-items:center; gap:var(--e2); text-decoration:none;
  color:var(--tinta); font-weight:600; font-size:17px; letter-spacing:-.02em;
  padding:var(--e3) 0; line-height:1.2}
.marca svg{color:var(--acento); flex-shrink:0}
.marca span{color:var(--acento)}
.cab nav{display:flex; gap:var(--e1); flex-wrap:wrap; padding-bottom:var(--e1)}
.cab nav a{color:var(--tinta-suave); text-decoration:none; font-size:14.5px;
  font-weight:450; line-height:1.4; padding:var(--e2) var(--e3);
  border-radius:var(--radio-s); min-height:24px; display:inline-flex; align-items:center;
  transition:color var(--dur-color) var(--ease), background var(--dur-color) var(--ease)}
.cab nav a:hover{color:var(--acento); background:var(--acento-lavado)}
.cab nav a.activo{color:var(--acento); background:var(--acento-lavado); font-weight:500}

/* ─────────── titular ───────────
   El serif en el titular es lo que separa "editorial de confianza" de
   "plantilla de SaaS". El cuerpo y las cifras siguen en la grotesca. */
.intro{padding:var(--e6) 0 var(--e5); max-width:var(--texto)}
h1{margin:0 0 var(--e3); font-weight:600;
  font-size:clamp(30px,4.6vw,42px); line-height:1.1; letter-spacing:-.03em;
  text-wrap:balance}
.bajada{margin:0; color:var(--tinta-media); font-size:18px; line-height:1.6;
  letter-spacing:-.005em; text-wrap:pretty}
.bajada strong{color:var(--tinta); font-weight:500}

/* ─────────── la tarjeta de la herramienta ─────────── */
.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:var(--e5); scroll-margin-top:76px}
@media(min-width:760px){ .tarjeta{padding:var(--e6)} }

.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(182px,1fr)); gap:var(--e4)}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* ── ALINEACIÓN DE LOS CAMPOS ──
   Dentro de una fila, los recuadros tienen que quedar a la misma altura aunque
   unas etiquetas lleven línea de pista y otras no, y aunque unos campos tengan
   deslizador y otros no. Son tres filas internas: etiqueta, recuadro, deslizador.

   Con `subgrid` cada campo comparte las filas de la rejilla madre, así que las
   tres se alinean solas en todo el ancho. Es la solución correcta y no depende
   de medir alturas a mano.

   El respaldo en flex, para navegadores sin subgrid, empuja el contenido abajo:
   no queda tan fino pero tampoco descolocado. */
.campo{display:flex; flex-direction:column; justify-content:flex-end;
  gap:var(--e2); min-width:0}
@supports (grid-template-rows: subgrid){
  .rejilla{grid-auto-rows:auto}
  .campo{display:grid; grid-template-rows:subgrid; grid-row:span 3; align-content:start}
}
.campo>label{font-size:13.5px; font-weight:500; color:var(--tinta-media);
  line-height:1.4; letter-spacing:0}
.campo .pista{display:block; font-size:12.5px; font-weight:400; color:var(--tinta-suave);
  letter-spacing:.01em}
.entrada{position:relative; display:flex; align-items:center}
.entrada input, .entrada select{
  width:100%; min-height:46px; padding:var(--e3); font:inherit; font-size:16.5px;
  font-weight:450; line-height:1.3; color:var(--tinta); background:var(--papel);
  border:1px solid var(--linea-control); border-radius:var(--radio-s); outline:none;
  transition:border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.entrada select{padding-right:var(--e6); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 21px, calc(100% - 12px) 21px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.entrada input:hover, .entrada select:hover{border-color:var(--tinta-suave)}
.entrada input:focus, .entrada select:focus{
  border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-lavado)}
.entrada input[type=number]{-moz-appearance:textfield; padding-right:var(--e7)}
.entrada input::-webkit-outer-spin-button,
.entrada input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.entrada .sufijo{position:absolute; right:var(--e3); color:var(--tinta-suave);
  font-size:14.5px; font-weight:450; pointer-events:none}

/* ─── deslizador ───
   Es un afford visual, no un control aparte: va aria-hidden y fuera del foco,
   porque el campo numérico de arriba ya expone el mismo valor y es más preciso
   para teclado y lector de pantalla.
   La parte recorrida se pinta con --recorrido, que actualiza nucleo.js. */
.rango{
  -webkit-appearance:none; appearance:none;
  width:100%; height:20px; margin:var(--e1) 0 0; padding:0;
  background:transparent; cursor:pointer; display:block;
}
.rango::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(to right,
    var(--acento) 0 var(--recorrido, 0%), var(--papel-3) var(--recorrido, 0%) 100%);
}
.rango::-moz-range-track{height:4px; border-radius:2px; background:var(--papel-3)}
.rango::-moz-range-progress{height:4px; border-radius:2px; background:var(--acento)}
.rango::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-7px; border-radius:50%;
  background:var(--papel); border:2px solid var(--acento);
  box-shadow:0 1px 3px rgba(var(--tinta-rgb),.18);
  transition:transform var(--dur-color) var(--ease);
}
.rango::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; border:2px solid var(--acento);
  background:var(--papel); box-shadow:0 1px 3px rgba(var(--tinta-rgb),.18);
}
.rango:hover::-webkit-slider-thumb, .rango:active::-webkit-slider-thumb{transform:scale(1.12)}
@media (prefers-reduced-motion:reduce){
  .rango::-webkit-slider-thumb{transition:none}
  .rango:hover::-webkit-slider-thumb, .rango:active::-webkit-slider-thumb{transform:none}
}

/* ─── eco del valor, ya formateado, junto a la etiqueta ─── */
.campo>label{display:flex; align-items:baseline; justify-content:space-between; gap:var(--e2)}
.campo>label>span:first-child{min-width:0}
.valor{
  flex-shrink:0; font-size:13px; font-weight:600; color:var(--acento);
  background:var(--acento-lavado); border-radius:var(--radio-s);
  padding:2px var(--e2); line-height:1.5; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* bloque plegable de ajustes finos */
.avanzado{margin-top:var(--e5); border-top:1px solid var(--linea); padding-top:var(--e5)}
.avanzado>summary{cursor:pointer; list-style:none; display:flex; align-items:center;
  gap:var(--e2); font-size:15px; font-weight:500; color:var(--acento);
  padding:var(--e1) 0; min-height:24px; line-height:1.4}
.avanzado>summary::-webkit-details-marker{display:none}
.avanzado>summary::before{content:""; width:0; height:0; flex-shrink:0;
  border-left:5px solid currentColor; border-top:4px solid transparent;
  border-bottom:4px solid transparent; transform:rotate(90deg);
  transition:transform var(--dur-ui) var(--ease)}
.avanzado:not([open])>summary::before{transform:rotate(0deg)}
.avanzado .nota{margin:var(--e2) 0 var(--e4); font-size:14px; line-height:1.6;
  color:var(--tinta-suave); max-width:var(--texto)}
.interruptor{display:flex; gap:var(--e3); align-items:flex-start; margin-top:var(--e4);
  cursor:pointer; font-size:14.5px; color:var(--tinta-media); line-height:1.55}
.interruptor input{margin:2px 0 0; width:20px; height:20px; accent-color:var(--acento);
  flex-shrink:0}
/* En pantalla táctil el objetivo sube a 24 px, que es el mínimo de WCAG 2.2
   §2.5.8. La etiqueta entera también es pulsable, pero así no depende de
   ninguna excepción del criterio. */
@media (pointer:coarse){
  .interruptor input{width:24px; height:24px; margin-top:0}
}

/* ─────────── el resultado ─────────── */
.resultado{margin-top:var(--e6); padding-top:var(--e5); border-top:1px solid var(--linea);
  animation:aparece var(--dur-panel) var(--ease-salida) both}
@keyframes aparece{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

.dos-cifras{display:grid; grid-template-columns:1fr 1fr; gap:var(--e3)}
@media(max-width:620px){ .dos-cifras{grid-template-columns:1fr} }

.bloque-cifra{border-radius:var(--radio); padding:var(--e4) var(--e5);
  border:1px solid var(--linea); background:var(--papel-2)}
.bloque-cifra.principal{background:var(--acento-lavado); border-color:var(--acento-borde)}
.bloque-cifra .et{margin:0 0 var(--e2); font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); line-height:1.4}
/* peso 500-600, nunca 700: el bold masivo es la señal de web barata */
.cifra-grande{font-size:clamp(32px,6vw,48px); line-height:1; font-weight:500;
  letter-spacing:-.025em; color:var(--tinta-media)}
.bloque-cifra.principal .cifra-grande{color:var(--acento); font-weight:600}
.bloque-cifra .pie{margin:var(--e2) 0 0; font-size:14px; line-height:1.55;
  color:var(--tinta-suave)}

/* Un dato incómodo NUNCA va solo ni en rojo: va en tinta normal y siempre
   acompañado de qué se puede hacer con él (efecto avestruz, Karlsson 2009). */
.contexto{margin:var(--e4) 0 0; padding:var(--e4) var(--e5); border-radius:var(--radio);
  background:var(--papel-2); border:1px solid var(--linea); font-size:15.5px;
  color:var(--tinta-media); line-height:1.6}
.contexto b{color:var(--tinta); font-weight:600}
.contexto .accion{display:block; margin-top:var(--e2); color:var(--tinta-suave); font-size:14.5px}
.contexto.atencion{background:var(--aviso-lavado); border-color:var(--aviso)}
.contexto.atencion b{color:var(--tinta)}

/* fila de datos secundarios */
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  margin-top:var(--e5); background:var(--linea); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden}
.dato{background:var(--papel); padding:var(--e3) var(--e4)}
.dato span{display:block; font-size:12px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-suave); margin-bottom:var(--e1); line-height:1.4}
.dato b{font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--tinta); line-height:1.25}
.dato em{font-style:normal; display:block; font-size:13px; color:var(--tinta-suave);
  margin-top:2px; line-height:1.45}

/* ─────────── reparto del dinero ─────────── */
.seccion-res{margin-top:var(--e6)}
.seccion-res>h2, .tabla-caja>h2{margin:0 0 var(--e3); font-size:12px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-suave); line-height:1.4}
.barras{display:flex; height:38px; border-radius:var(--radio-s); overflow:hidden;
  border:1px solid var(--linea); background:var(--papel-2)}
.barras i{display:block; height:100%}
.leyenda{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--e2) var(--e5); margin-top:var(--e3); font-size:14.5px}
.leyenda span{display:flex; align-items:center; gap:var(--e2); color:var(--tinta-media);
  line-height:1.5}
.leyenda b{width:11px; height:11px; border-radius:3px; flex-shrink:0}
.leyenda em{font-style:normal; margin-left:auto; font-weight:500; color:var(--tinta)}

/* ─────────── gráfico ─────────── */
.grafico-caja{margin-top:var(--e6)}
.grafico-caja canvas{width:100%; height:240px; display:block}
.grafico-leyenda{display:flex; gap:var(--e5); flex-wrap:wrap; margin-top:var(--e3);
  font-size:14px; color:var(--tinta-suave)}
.grafico-leyenda span{display:flex; align-items:center; gap:var(--e2)}
.grafico-leyenda i{width:16px; height:3px; border-radius:2px; display:block}

/* ─────────── botones ───────────
   Bajos, poco redondeados y NO en negrita: en contexto financiero serio, ni
   peso 700 ni radio de píldora. */
.acciones{display:flex; flex-wrap:wrap; gap:var(--e3); margin-top:var(--e6)}
.btn{appearance:none; border:1px solid transparent; cursor:pointer; font:inherit;
  font-size:16px; font-weight:500; letter-spacing:0; padding:var(--e3) var(--e5);
  min-height:48px; border-radius:var(--radio-s); background:var(--acento);
  color:var(--btn-texto); display:inline-flex; align-items:center; justify-content:center;
  gap:var(--e2); text-decoration:none; line-height:1.3;
  transition:background var(--dur-color) var(--ease), transform 160ms var(--ease)}
.btn:hover{background:var(--acento-fuerte)}
.btn:active{transform:scale(.97)}
.btn.sec{background:transparent; color:var(--tinta-media); border-color:var(--linea-control)}
.btn.sec:hover{background:var(--papel-2); color:var(--acento); border-color:var(--acento)}
.btn.sec.hecho{color:var(--acento); border-color:var(--acento); background:var(--acento-lavado)}
.btn svg{flex-shrink:0}

.privado{display:flex; align-items:center; gap:var(--e2); margin:var(--e4) 0 0;
  font-size:14.5px; line-height:1.55; color:var(--tinta-suave); max-width:var(--texto)}
.privado svg{color:var(--acento); flex-shrink:0}

/* ─────────── tabla ─────────── */
.tabla-caja{margin-top:var(--e6)}
.scrollx{overflow:auto; max-height:400px; border:1px solid var(--linea);
  border-radius:var(--radio); background:var(--papel)}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:520px}
th,td{padding:var(--e2) var(--e4); text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--linea); line-height:1.5}
th{position:sticky; top:0; z-index:1; background:var(--papel-2); color:var(--tinta-suave);
  font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase}
th:first-child, td:first-child{text-align:left}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--papel-2)}
td strong{font-weight:600; color:var(--acento)}

/* ─────────── huecos de anuncio ─────────── */
.ad-slot{display:flex; align-items:center; justify-content:center; margin:var(--e6) 0;
  border:1px dashed var(--linea-control); border-radius:var(--radio);
  background:var(--papel-2); color:var(--tinta-suave); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-align:center; overflow:hidden}
.ad-slot::after{content:"ANUNCIO"}
/* altura reservada SIEMPRE: un anuncio que aparece tarde y empuja el contenido
   es exactamente lo que penalizan las Core Web Vitals */
.ad-slot[data-formato=leaderboard]{min-height:100px}
.ad-slot[data-formato=rectangulo]{min-height:280px}
.ad-slot[data-formato=cuadrado]{min-height:250px; margin:var(--e4) 0}
.ad-slot[data-formato=esquina]{min-height:110px; margin:0}
@media(min-width:768px){ .ad-slot[data-formato=leaderboard]{min-height:90px} }

/* pop-up de descarga */
dialog.modal{border:0; padding:0; background:transparent; max-width:min(92vw,430px)}
dialog.modal::backdrop{background:rgba(12,16,15,.6)}
.modal-caja{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:var(--e5); box-shadow:var(--sombra-alta)}
.modal-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3)}
.modal-cab h2{margin:0; font-weight:600; font-size:19px;
  line-height:1.25; letter-spacing:-.02em}
.modal-cab p{margin:var(--e1) 0 0; font-size:14.5px; line-height:1.55; color:var(--tinta-suave)}
.cerrar{appearance:none; cursor:pointer; flex-shrink:0; width:38px; height:38px;
  border:1px solid var(--linea-control); background:var(--papel-2);
  border-radius:var(--radio-s); color:var(--tinta-media); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; font-family:var(--sans);
  transition:color var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease),
             background var(--dur-color) var(--ease)}
.cerrar:hover{color:var(--tinta); border-color:var(--acento); background:var(--acento-lavado)}
.modal-caja .btn{width:100%}

/* aviso de esquina */
.esquina{position:fixed; right:var(--e4); bottom:var(--e4); z-index:60;
  width:min(300px,calc(100vw - 32px)); background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra-alta); padding:var(--e3);
  transform:translateY(130%); transition:transform var(--dur-panel) var(--ease-salida);
  visibility:hidden}
.esquina.visible{transform:translateY(0); visibility:visible}
.esquina .barra{display:flex; align-items:center; justify-content:space-between;
  gap:var(--e3); margin-bottom:var(--e2)}
.esquina .barra span{font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-suave)}
.esquina .cerrar{width:28px; height:28px; font-size:17px}

/* ─────────── contenido ───────────
   Por defecto el texto va atenuado y el contraste máximo se reserva para el
   resultado y los titulares. Si todo va a tinta plena, nada destaca. */
.contenido{padding:var(--e3) 0 var(--e7)}
.contenido h2{margin:var(--e7) 0 var(--e4); font-weight:600;
  font-size:clamp(23px,2.8vw,28px); line-height:1.2; letter-spacing:-.022em;
  color:var(--tinta); text-wrap:balance; max-width:var(--texto)}
.contenido h3{margin:var(--e6) 0 var(--e2); font-size:18.5px; font-weight:600;
  line-height:1.35; letter-spacing:-.012em; color:var(--tinta); max-width:var(--texto)}
.contenido p, .contenido>ul>li, .contenido>ol>li{max-width:var(--texto); color:var(--tinta-media)}
.contenido p{margin:0 0 var(--e4); line-height:1.68; text-wrap:pretty}
.contenido strong{color:var(--tinta); font-weight:600}
.contenido a{color:var(--acento); text-underline-offset:3px}
.contenido a:hover{color:var(--acento-fuerte)}
.contenido ol{padding-left:var(--e5)}
.contenido ol li{margin-bottom:var(--e2); line-height:1.65}

.pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--e4); margin:var(--e5) 0; padding:0; list-style:none; max-width:none}
.pasos li{background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:var(--e4); color:var(--tinta-media); font-size:15.5px; line-height:1.62;
  max-width:none;}
.pasos b{display:block; color:var(--acento); font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--e2)}

.mini-dato{display:flex; gap:var(--e3); align-items:baseline; padding:var(--e3) 0;
  border-bottom:1px solid var(--linea); max-width:var(--texto)}
.mini-dato:last-of-type{border-bottom:0}
.mini-dato b{min-width:100px; flex-shrink:0; color:var(--acento); font-weight:600; font-size:15px}
.mini-dato span{color:var(--tinta-media); font-size:15.5px; line-height:1.6}

/* preguntas frecuentes */
.faqs{max-width:var(--texto); border-top:1px solid var(--linea)}
details.faq{border-bottom:1px solid var(--linea)}
details.faq summary{cursor:pointer; list-style:none; display:flex; gap:var(--e4);
  align-items:flex-start; justify-content:space-between; padding:var(--e4) 0;
  font-size:16.5px; font-weight:500; color:var(--tinta); line-height:1.5}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--acento); font-size:22px; line-height:1;
  flex-shrink:0; font-weight:400}
details.faq[open] summary::after{content:"\2212"}
.faq-cuerpo{padding:0 0 var(--e4)}
.faq-cuerpo p{margin:0 0 var(--e3); color:var(--tinta-media); font-size:16px; line-height:1.68}
.faq-cuerpo p:last-child{margin-bottom:0}

/* otras calculadoras */
.fichas{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--e3); margin:var(--e5) 0 0; padding:0; list-style:none; max-width:none}
.fichas li{max-width:none}
.fichas a{display:block; height:100%; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:var(--e4); text-decoration:none; color:var(--tinta);
  transition:border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease)}
.fichas a:hover{border-color:var(--acento); background:var(--acento-lavado)}
.fichas strong{display:block; font-size:16.5px; font-weight:600; letter-spacing:-.015em;
  margin-bottom:var(--e1); line-height:1.35}
.fichas span{display:block; font-size:14.5px; color:var(--tinta-suave); line-height:1.58}

/* aviso legal al pie del contenido */
.descargo{margin-top:var(--e7); padding:var(--e4) var(--e5); background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:var(--radio); font-size:14.5px; color:var(--tinta-suave);
  line-height:1.65; max-width:var(--texto)}
.descargo strong{color:var(--tinta)}
.descargo .fechado{display:block; margin-top:var(--e2); padding-top:var(--e2);
  border-top:1px solid var(--linea)}
.descargo a{color:var(--acento)}

/* ─────────── pie ─────────── */
.pie{background:var(--papel); border-top:1px solid var(--linea);
  padding:var(--e6) 0 var(--e7); font-size:14.5px; color:var(--tinta-suave)}
.pie .env{display:flex; flex-wrap:wrap; gap:var(--e3) var(--e5);
  justify-content:space-between; align-items:center}
.pie nav{display:flex; flex-wrap:wrap; gap:var(--e1)}
.pie a{color:var(--tinta-suave); text-decoration:none; padding:var(--e2);
  border-radius:var(--radio-s);
  transition:color var(--dur-color) var(--ease), background var(--dur-color) var(--ease)}
.pie a:hover{color:var(--acento); background:var(--acento-lavado)}

/* ─────────── portada ───────────
   Deliberadamente escueta. Quien entra en la home viene a elegir herramienta,
   no a leer: titular, una línea y las tarjetas. El texto largo vive en las
   páginas de cada calculadora, que es donde además sirve para posicionar. */
.portada{padding:var(--e7) 0 var(--e5); max-width:var(--texto)}
.portada h1{font-size:clamp(32px,5.2vw,46px); margin-bottom:var(--e2)}
.portada .bajada{font-size:18.5px}

.rejilla-fichas{margin:0}
/* en la portada las tarjetas SON el contenido principal, así que respiran más */
.portada + .rejilla-fichas a{padding:var(--e5)}
.portada + .rejilla-fichas strong{font-size:18px; margin-bottom:var(--e2)}

.tres-claves{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--e3) var(--e5); list-style:none; padding:0;
  margin:var(--e6) 0 0; font-size:14.5px; color:var(--tinta-suave); line-height:1.55}
.tres-claves li{display:flex; flex-direction:column; gap:2px}
.tres-claves b{color:var(--tinta); font-weight:600; font-size:14.5px}
.tres-claves a{color:var(--acento)}

/* Mientras el sistema cambia de tema se apagan todas las transiciones.
   Sin esto, una transición cuyo color sale de una variable CSS se queda
   pegada al valor del tema anterior. Lo pone y lo quita nucleo.js. */
.cambiando-tema, .cambiando-tema *, .cambiando-tema *::before, .cambiando-tema *::after{
  transition:none !important;
}

/* ─────────── movimiento reducido ───────────
   Solo se apaga lo intrusivo. El foco y los cambios de color se quedan. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .resultado{animation:none}
  .esquina{transition:none}
  .btn:active{transform:none}
  .avanzado>summary::before{transition:none}
}