/* ==========================================================================
   app.css — Calculadora Compra vs Alquiler
   Mobile-first. Los estilos base son los del móvil; los breakpoints amplían.
   ========================================================================== */

/* hidden tiene que ocultar SIEMPRE. Cualquier regla con display (flex, grid)
   le gana al atributo en el navegador: así se colaron «Atrás» y «Siguiente» de
   la guía fuera de ella. Las excepciones intencionadas usan una clase y
   !important, que pesa más que esta (p. ej. .lead-icono[hidden]). */
[hidden] { display: none !important; }

:root {
  /* Neutros con sesgo frío, elegidos (no heredados).
     --ink-faint se oscureció de #64727f a #5d6b78: el anterior se quedaba en
     4,15:1 sobre los campos grises, por debajo del 4,5:1 de WCAG AA, y era
     justo el color de los textos más pequeños. */
  --ink:        #17202b;
  --ink-soft:   #48505c;
  --ink-faint:  #5b636f;
  /* Papel cálido y no gris azulado: el gris frío con tarjetas blancas es el
     aspecto de cualquier panel de administración. Los neutros cálidos, con la
     tinta azul noche y el par terracota / verde azulado, dan una identidad de
     publicación técnica. Contrastes AA medidos: --ink-faint da 5,0:1 sobre
     --surface-2, el fondo más oscuro donde aparece. */
  --paper:      #f4f2ed;
  --surface:    #ffffff;
  --surface-2:  #ece9e2;
  --line:       #d9d4ca;
  --line-soft:  #e6e2d9;

  /* Marca e interacción: tinta azul noche. Los únicos colores con matiz de
     la interfaz son los de las dos respuestas (terracota, comprar; verde
     azulado, alquilar), y así destacan. Lo que se toca va en tinta: no lleva
     el color de una opción (antes todo «olía» a alquilar) ni el azul genérico
     de framework que tuvo después. Un verde chocaría con alquilar y con «ok». */
  --brand:       #1d2d3e;
  --brand-hover: #33475c;
  --brand-wash:  #e9e9e6;
  --on-brand:    #ffffff;

  /* Par semántico: las dos opciones que compara el producto. Solo para eso. */
  --buy:        #a64f2b;
  --buy-wash:   #f6e9e1;
  --rent:       #216a70;
  --rent-wash:  #dfecec;

  /* Estado */
  --ok:         #2f6437;
  --ok-wash:    #e3ede2;
  --warn:       #8a6414;
  --warn-wash:  #f6eed9;
  /* Carmín y no rojo ladrillo: el anterior (#922c3c) quedaba a 27° de tono del
     terracota de comprar, y «comprar deja más» podía leerse como un error. */
  --bad:        #a8235a;
  --bad-wash:   #f6e3ea;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Solo titulares: la voz editorial. La interfaz y las cifras siguen en la sans. */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  /* Solo para código (páginas legales). Las cifras usan la sans con
     tabular-nums: alinean igual y no dan aspecto de terminal. Además se deja
     de descargar una familia tipográfica entera. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala tipográfica: seis tamaños y ninguno más. Antes había 24 distintos,
     de 9,5 a 26 px, algunos a medio píxel de distancia. 12 px es el mínimo. */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  19px;
  --fs-xl:  24px;
  --fs-2xl: 32px;

  /* Fondo de la tarjeta que contiene la respuesta: papel algo más cálido que
     el blanco, para que destaque sin recuadros de colores ni filetes. */
  --surface-destacado: #f4ecdc;
  --line-destacado:    #e5dbc5;

  --r: 10px;
  --pad: 16px;
  --shadow: 0 1px 2px rgba(22, 32, 42, .05), 0 6px 18px -8px rgba(22, 32, 42, .14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #e7e5e0;
    --ink-soft:  #b3b5b7;
    --ink-faint: #9aa0a6;
    --paper:     #111519;
    --surface:   #181d23;
    --surface-2: #20262d;
    --line:      #313840;
    --line-soft: #262c33;
    --buy:       #dd8759;
    --buy-wash:  #2f2019;
    --rent:      #57abb0;
    --rent-wash: #13272a;
    --brand:       #e7e5e0;
    --brand-hover: #ffffff;
    --brand-wash:  #262c33;
    --surface-destacado: #232a31;
    --line-destacado:    #39424c;
    --on-brand:    #0e151b;
    --ok:        #74af7b;
    --ok-wash:   #1a2a1c;
    --warn:      #d2a747;
    --warn-wash: #2b2413;
    --bad:       #e27aa6;
    --bad-wash:  #2e1a26;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --ink:       #e7e5e0;
  --ink-soft:  #b3b5b7;
  --ink-faint: #9aa0a6;
  --paper:     #111519;
  --surface:   #181d23;
  --surface-2: #20262d;
  --line:      #313840;
  --line-soft: #262c33;
  --buy:       #dd8759;
  --buy-wash:  #2f2019;
  --rent:      #57abb0;
  --rent-wash: #13272a;
  --brand:       #e7e5e0;
  --brand-hover: #ffffff;
  --brand-wash:  #262c33;
  --surface-destacado: #232a31;
  --line-destacado:    #39424c;
  --on-brand:    #0e151b;
  --ok:        #74af7b;
  --ok-wash:   #1a2a1c;
  --warn:      #d2a747;
  --warn-wash: #2b2413;
  --bad:       #e27aa6;
  --bad-wash:  #2e1a26;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -8px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.011em; text-wrap: balance; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 2px; }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.num { font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }

/* ---------------------------------------------------------------- cabecera */
/* Cabecera y menú, fijos arriba: se apartan al avanzar por la página y vuelven
   en cuanto se retrocede (js/ui/cabecera.js). */
.barra-sitio {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
body.barra-oculta .barra-sitio { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .barra-sitio { transition: none; } }

/* La cabecera y la barra de secciones miden lo mismo en todas las páginas,
   aunque el contenido de debajo sea más estrecho (guías, legales): si no, el
   logotipo y el botón de tema saltaban de sitio al navegar. La especificidad
   (.top > .wrap) gana a la .wrap de hub.css. */
.top > .wrap, .nav-sitio > .wrap { max-width: 760px; }
@media (min-width: 1024px) {
  .top > .wrap, .nav-sitio > .wrap { max-width: 1180px; }
}

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}
.brand {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
}
/* Logotipo: una casa partida en las dos opciones. Es el único sitio donde
   el par comprar/alquilar se usa como identidad y no como dato. */
.brand .logo { width: 26px; height: 26px; flex: none; display: block; }
.brand .logo .l-compra   { fill: var(--buy); }
.brand .logo .l-alquiler { fill: var(--rent); }
.brand small {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-faint);
  align-self: baseline;
}
.icon-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-soft);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: var(--fs-md);
  flex: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* --------------------------------------------------------------- veredicto */
/* El veredicto se compacta al bajar, y antes eso movía toda la página: el
   elemento fijo ocupaba su hueco, pasaba de 148 a 37 px y el contenido subía
   111 px de golpe bajo el dedo. Ahora lo fijo es esta zona, que mantiene el
   alto del veredicto completo (app.js lo mide) y es transparente y no
   recibe toques: al compactarse, el veredicto encoge dentro de ella y lo que
   hay debajo se ve a través, sin que nada cambie de sitio. */
.verdict-zona {
  position: sticky;
  /* Se pega justo debajo de la barra cuando está visible, y arriba cuando no */
  top: var(--alto-barra-visible, 0px);
  transition: top .28s cubic-bezier(.2, .7, .2, 1);
  z-index: 20;
  pointer-events: none;
}
.verdict {
  position: relative;
  pointer-events: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.verdict .wrap { padding-top: 12px; padding-bottom: 12px; }

/* Al bajar, el veredicto se reduce a una linea. Fijo y completo ocupaba casi
   un tercio de la pantalla del movil durante todo el formulario. */
.verdict.compacto .wrap { padding-top: 7px; padding-bottom: 7px; }
.verdict.compacto .verdict-head {
  font-size: var(--fs-md);
  margin-bottom: 0;
  /* Compacto es una linea: si no cabe, puntos suspensivos antes que dos */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.verdict.compacto .conf .pct { font-size: var(--fs-md); }

.verdict-row { display: flex; align-items: center; gap: 12px; }

.verdict-main { min-width: 0; flex: 1; }
/* Mientras son datos de ejemplo el veredicto va atenuado y el epigrafe lo
   dice: es la diferencia entre «mira lo que hace esto» y «este es tu
   resultado». En cuanto se toca un solo campo, vuelve a su peso normal. */
/* .85 y no menos: con .62 el titular bajaba a 2,7:1 de contraste, por debajo
   del 3:1 que WCAG exige incluso a texto grande. Con .85 queda en 4,2:1 en el
   peor caso (comprar, tema claro). */
.verdict.es-ejemplo .verdict-head { opacity: .85; }
.verdict.es-ejemplo .verdict-lead { color: var(--warn); font-weight: 600; }

.verdict-lead {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.3;
  margin-bottom: 2px;
}
.verdict-head {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.verdict[data-win="compra"]   .verdict-head { color: var(--buy); }
.verdict[data-win="alquiler"] .verdict-head { color: var(--rent); }
.verdict[data-win="error"]    .verdict-head { color: var(--bad); }
.verdict[data-win="error"]    .verdict-sub  { color: var(--ink); }
.verdict-sub {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: 1.35;
  margin-top: 3px;
}
.verdict-sub b { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-soft); }

.conf {
  flex: none;
  text-align: right;
  border-left: 1px solid var(--line-soft);
  padding-left: 12px;
}
.conf .pct {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.conf .lbl {
  font-size: var(--fs-xs);
  line-height: 1.25;
  color: var(--ink-faint);
  margin-top: 4px;
  max-width: 104px;
}

/* ------------------------------------------------------------------ bloques */
main { padding: 18px 0 60px; }

/* Titular de la portada. Antes el unico h1 era la marca de la cabecera:
   poco para buscadores y sin decir de que va la pagina. */
.titular {
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}

/* El veredicto fijo tapa lo que queda debajo de él: los saltos (enlaces,
   «ver todos los parámetros», el foco de un campo) dejan su hueco. */
html:has(body.calculadora) { scroll-padding-top: 64px; }
body.calculadora .card, body.calculadora .titular { scroll-margin-top: 64px; }

/* Lo que acaba de aparecer se señala un momento, para saber qué ha cambiado */
.recien-abierto { animation: senalar 1.6s ease-out; }
.recien-abierto:focus { outline: none; }
@keyframes senalar {
  0%, 35% { box-shadow: 0 0 0 3px var(--brand); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}

/* Mientras el aviso de cookies está abierto, el final de la página no queda
   debajo de él */
body.con-aviso { padding-bottom: calc(var(--aviso-alto, 200px) + 16px + env(safe-area-inset-bottom)); }

/* Frase de entrada: que se sepa en que se distingue antes de tocar nada */
.intro {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.intro strong { color: var(--ink); font-weight: 600; }

/* Portada. En movil, una columna: los envoltorios desaparecen y cada
   seccion se coloca por su `order`. En escritorio, dos columnas. */
body.calculadora main > .wrap { display: flex; flex-direction: column; }
.portada, .col-datos, .col-resultado, .referencia { display: contents; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 14px;
  overflow: hidden;
}
.card > .card-in { padding: var(--pad); }

.card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 2px;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 14px;
}
/* El titulo no se parte por culpa del comentario de al lado: baja el comentario */
.card-title h2 { flex: 0 0 auto; }
.card-title h2 {
  font: inherit;
  margin: 0;
  letter-spacing: inherit;
  color: inherit;
}
.card-title .aside { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-faint); }

/* --------------------------------------------------------------- controles */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.field-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.field label { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; }
/* Coste que se ajusta solo al precio: se dice, para que no parezca un dato fijo */
.field.auto label::after {
  content: "según el precio";
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-faint);
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.4; margin-top: 6px; }

/* Valor editable en línea */
.val {
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  min-width: 88px;
  text-align: right;
  flex: none;
  -moz-appearance: textfield;
}
.val::-webkit-outer-spin-button, .val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.val:focus { border-color: var(--brand); background: var(--surface); outline: none; }
.val.invalido, select.invalido {
  border-color: var(--bad);
  background: var(--bad-wash);
  box-shadow: inset 0 0 0 1px var(--bad);
}
.val.wide { min-width: 118px; }
/* Un input de texto mide 20 caracteres por defecto: sin ancho explicito, el
   de precio empujaba la etiqueta a tres lineas en movil. */
.val.wide[data-miles] { width: 132px; }
/* Los importes con puntos de millar son campos de texto, que miden 20
   caracteres por defecto: sin ancho, «Alquiler de un piso parecido» se partía
   en cuatro líneas */
.val[data-miles]:not(.wide) { width: 108px; }

.val-wrap { display: flex; align-items: baseline; gap: 6px; flex: none; }
.val-wrap .unit {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  min-width: 34px;
  text-align: left;
  white-space: nowrap;
}

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  margin: 0;
  display: block;
  cursor: pointer;
  /* El gesto vertical es siempre scroll de la página, nunca del deslizador */
  touch-action: pan-y;
}

/* En pantallas táctiles, SOLO el círculo responde. Cada campo lleva un
   deslizador a todo el ancho, así que media pantalla del formulario eran
   deslizadores: el dedo que empezaba a hacer scroll encima de uno cambiaba
   el precio o el ahorro sin querer, y tocar la barra saltaba el valor.
   A cambio, el círculo crece para seguir siendo fácil de agarrar, y el campo
   numérico de al lado sigue ahí para escribir el valor exacto. */
@media (pointer: coarse) {
  input[type=range] { pointer-events: none; height: 40px; }
  input[type=range]::-webkit-slider-thumb {
    pointer-events: auto;
    width: 32px !important; height: 32px !important; margin-top: -14px !important;
  }
  input[type=range]::-moz-range-thumb { pointer-events: auto; width: 32px; height: 32px; }
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; background: var(--surface-2); border-radius: 2px;
}
input[type=range]::-moz-range-track {
  height: 4px; background: var(--surface-2); border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -10px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}

select, input[type=text], input[type=number] {
  font-family: inherit;
  font-size: var(--fs-md);            /* 16px evita el zoom automático en iOS */
  color: var(--ink);
}
select {
  width: 100%;
  min-height: 44px;
  padding: 0 34px 0 11px;
  background: var(--surface-2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237e8d9a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  appearance: none; -webkit-appearance: none;
}

/* Grupo de botones tipo segmento */
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1;
  min-height: 44px;
  padding: 0 10px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.check span { font-size: var(--fs-sm); line-height: 1.4; }
.check .hint { display: block; font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 2px; }

/* ---------------------------------------------------------------- desglose */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.row:last-child { border-bottom: none; }
.row > span { color: var(--ink-soft); min-width: 0; }
.row > b { font-variant-numeric: tabular-nums; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row.sum { border-top: 1px solid var(--line); border-bottom: none; margin-top: 4px; padding-top: 12px; }
.row.sum > span { color: var(--ink); font-weight: 600; }
.row.sum > b { font-size: var(--fs-lg); font-weight: 600; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.duo > div { background: var(--surface); padding: 14px; }
.duo .k { font-size: var(--fs-xs); font-variant-numeric: tabular-nums;color: var(--ink-faint); margin-bottom: 6px; }
.duo .v { font-variant-numeric: tabular-nums; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.duo .n { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 5px; line-height: 1.35; }
.duo .buy  .v { color: var(--buy); }
.duo .rent .v { color: var(--rent); }

/* --------------------------------------------------------------- solvencia */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 4px;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.viable   { background: var(--ok-wash);  color: var(--ok); }
.status.ajustado { background: var(--warn-wash); color: var(--warn); }
.status.inviable { background: var(--bad-wash); color: var(--bad); }

.alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
/* Avisos: recuadro completo con fondo tintado y borde fino del mismo tono.
   Sin barra lateral de color, que es un adorno y no jerarquía. */
.alert {
  font-size: var(--fs-sm);
  line-height: 1.45;
  padding: 11px 13px;
  border-radius: var(--r);
  border: 1px solid;
}
.alert.critico { background: var(--bad-wash);  border-color: color-mix(in srgb, var(--bad) 30%, transparent);  color: var(--ink); }
.alert.aviso   { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--ink); }

.meter { margin-top: 14px; }
.meter + .meter { margin-top: 12px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); margin-bottom: 6px; }
.meter-top span { color: var(--ink-soft); }
.meter-top b { font-variant-numeric: tabular-nums; font-weight: 500; font-variant-numeric: tabular-nums; }
.bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--ok); transition: width .25s ease; }
.bar[data-state="aviso"] i { background: var(--warn); }
.bar[data-state="mal"] i   { background: var(--bad); }
.bar u {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink-faint); opacity: .55;
}

/* ----------------------------------------------------------------- gráfico */
.chart { width: 100%; display: block; overflow: visible; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 10px;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; flex: none; }

/* --------------------------------------------------------------- matriz */
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
table.matrix { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); margin: 0 auto; }
table.matrix th, table.matrix td {
  border: 1px solid var(--line-soft);
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
}
table.matrix th { color: var(--ink-faint); font-weight: 500; }
table.matrix th.corner { font-size: var(--fs-xs); line-height: 1.2; color: var(--ink-faint); }
table.matrix td { font-weight: 600; min-width: 44px; }
table.matrix td.c { background: var(--buy-wash);  color: var(--buy); }
table.matrix td.a { background: var(--rent-wash); color: var(--rent); }
table.matrix td.e { background: var(--surface-2); color: var(--ink-faint); }
table.matrix td.here { outline: 2px solid var(--ink); outline-offset: -2px; }

.dist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 14px; }
.dist > div { background: var(--surface); padding: 12px 10px; text-align: center; }
.dist .k { font-size: var(--fs-xs); font-variant-numeric: tabular-nums;color: var(--ink-faint); margin-bottom: 5px; }
.dist .v { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- acordeones */
details.acc { border-top: 1px solid var(--line-soft); }
details.acc:first-of-type { border-top: none; }
details.acc > summary {
  list-style: none;
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--pad);
  font-size: var(--fs-md);
  font-weight: 500;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary h2 { font: inherit; margin: 0; letter-spacing: inherit; }
details.acc > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.8px solid var(--ink-faint);
  border-bottom: 1.8px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
details.acc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.acc > summary .sum-val { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--ink-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
details.acc > .acc-in { padding: 0 var(--pad) var(--pad); }

.aviso-version {
  margin: 0;
  padding: 10px var(--pad);
  background: var(--warn-wash);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.aviso-version[hidden] { display: none !important; }

/* ------------------------------------------------------- modo simple ----- */
body[data-modo="simple"] .solo-experto { display: none !important; }
body[data-modo="experto"] .cambiar-modo .note { display: none; }

.cambiar-modo .btn { width: 100%; }

/* «Por qué sale esto»: la explicación del resultado, no el resultado */
ul.porque {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
ul.porque li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
ul.porque li b { color: var(--ink); font-weight: 600; }
ul.porque .marca {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: 1px;
}
ul.porque .marca.compra   { background: var(--buy-wash);  color: var(--buy); }
ul.porque .marca.alquiler { background: var(--rent-wash); color: var(--rent); }
ul.porque .marca.neutro   { background: var(--surface-2); color: var(--ink-faint); }

/* ------------------------------------------------------------ metodologia */
p.metodo, ul.metodo { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); }
ul.metodo { padding-left: 20px; }
ul.metodo li { margin-bottom: 7px; }

/* Leyenda: la serie discontinua se identifica sin depender del color */
.chart-legend i.linea-discontinua {
  background: none !important;
  height: 0;
  border-top: 3px dashed var(--rent);
}

/* ==========================================================================
   Siguiente paso
   La propuesta comercial tiene que LEERSE como comercial. monetization.md §15
   prohibe aparentar neutralidad cuando el enlace esta pagado, asi que lleva
   tratamiento visual distinto del producto y su aviso, no escondido.
   ========================================================================== */
.siguiente-util {
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  background: var(--brand-wash);
  border-radius: var(--r);
  padding: 14px 16px;
}
.siguiente-util p { font-size: var(--fs-sm); line-height: 1.55; margin: 0; color: var(--ink); }
.siguiente-util p + p { margin-top: 8px; }
.siguiente-util b { font-weight: 600; }

.oferta {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 14px 16px;
  margin-top: 12px;
}
.oferta:first-child { margin-top: 0; }

/* La etiqueta es obligatoria, no decorativa */
.oferta .marca-comercial {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 6px;
  margin-bottom: 9px;
}
.oferta h3 { font-size: var(--fs-md); font-weight: 600; margin: 0 0 5px; }
.oferta .detalle { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
.oferta .aviso-comercial {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 10px 0 0;
}
.oferta .btn { width: 100%; }

/* ==========================================================================
   Navegacion del sitio
   La portada, el termometro y los hubs eran islas sin ningun enlace entre
   ellos: dos productos que nadie encontraba (seo.md §9). Va por debajo de la
   cabecera y por encima del veredicto, y en movil desplaza en horizontal en
   lugar de partirse en dos lineas.
   ========================================================================== */
.nav-sitio {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-sitio::-webkit-scrollbar { display: none; }
.nav-sitio .wrap {
  display: flex;
  gap: 2px;
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
}
.nav-sitio a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-sitio a:hover { color: var(--ink); }
.nav-sitio a.actual {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

/* ---------------------------------------------------------------- fuentes */
h3.sub {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  margin: 22px 0 10px;
}
h3.sub:first-child { margin-top: 0; }

.reglas { display: flex; flex-direction: column; gap: 10px; }
.regla {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  background: var(--surface);
}
.regla-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.regla-top b { font-size: var(--fs-sm); font-weight: 600; }
.regla .valor {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.regla .meta { font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.5; }
.regla .meta a { color: var(--ink-soft); }
.regla .cond { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; margin-top: 6px; }

.sello {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.sello::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sello.ok       { background: var(--ok-wash);   color: var(--ok); }
.sello.pendiente{ background: var(--warn-wash); color: var(--warn); }
.sello.caducado { background: var(--bad-wash);  color: var(--bad); }
.sello.vivo     { background: var(--ok-wash);   color: var(--ok); }
.sello.cache    { background: var(--surface-2); color: var(--ink-soft); }
.sello.defecto  { background: var(--warn-wash); color: var(--warn); }

.fuentes-lista { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
.fuente-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.fuente-item .quien { min-width: 0; }
.fuente-item .quien a { font-weight: 500; }
.fuente-item .quien span { display: block; color: var(--ink-faint); font-size: var(--fs-xs); margin-top: 2px; }
.fuente-item .como {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  white-space: nowrap;
  flex: none;
}

/* Aviso en línea cuando el tipo aplicado no está contrastado */
.hint .sello { margin-left: 6px; vertical-align: 1px; }

/* ---------------------------------------------------------------- acciones */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn {
  min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  padding: 0 14px;
}
.btn:hover { background: var(--surface); border-color: var(--ink-faint); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.note {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-faint);
  margin-top: 12px;
}
.note a { color: var(--ink-soft); }

/* --------------------------------------------------------------- pie legal */
footer.legal {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding: 20px 0 40px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-faint);
}
footer.legal nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
footer.legal a { color: var(--ink-soft); }

/* ------------------------------------------------------- aviso de cookies */
/* Una franja y no un bloque: el aviso anterior se comia el ultimo tercio de
   la primera pantalla en movil, justo donde empieza el formulario. */

/* -------------------------------------------------------------- respuestas */
@media (min-width: 680px) {
  :root { --pad: 22px; }
  main { padding-top: 24px; }
  .verdict-head { font-size: var(--fs-xl); }
  .conf .pct { font-size: var(--fs-xl); }
  .conf .lbl { max-width: 120px; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .cols > .card { margin-bottom: 0; }
  .actions { grid-template-columns: repeat(4, 1fr); }
  table.matrix { font-size: var(--fs-xs); width: 100%; }
  table.matrix td { min-width: 0; }
}

/* Escritorio: datos a la izquierda, resultado a la derecha. A 1024 px la
   columna unica de 760 dejaba media pantalla en gris. */
@media (min-width: 1024px) {
  body.calculadora .wrap { max-width: 1180px; }
  body.calculadora .consent-in { max-width: 1180px; }
  .portada {
    display: grid;
    grid-template-columns: minmax(360px, 5fr) 7fr;
    gap: 20px;
    align-items: start;
  }
  .col-datos, .col-resultado { display: block; min-width: 0; }
  .referencia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 6px;
  }
  .titular { font-size: var(--fs-2xl); margin-bottom: 8px; }
  .intro { font-size: var(--fs-md); max-width: 70ch; margin-bottom: 18px; }
}

/* ==========================================================================
   Movimiento
   Discreto y siempre prescindible: con «reducir movimiento» activado en el
   sistema, todo esto se apaga y la página se ve igual, quieta. La lógica que
   decide qué se anima está en js/ui/movimiento.js.
   ========================================================================== */
:root { --suave: cubic-bezier(.2, .7, .2, 1); }

html { scroll-behavior: smooth; }

/* Entre páginas del sitio, un fundido en vez de un corte. La cabecera y la
   barra de secciones se quedan quietas: es la misma web, no otra. Solo en
   navegadores que lo soportan; en el resto, navegación normal. */
@view-transition { navigation: auto; }
.top { view-transition-name: cabecera; }
.nav-sitio { view-transition-name: secciones; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .24s; animation-timing-function: var(--suave); }

/* Secciones que aparecen al llegar a ellas */
.con-movimiento .revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--suave), transform .55s var(--suave);
}
.con-movimiento .revelar.visible { opacity: 1; transform: none; }

/* El gráfico se traza de izquierda a derecha la primera vez que se ve */
/* Solo con movimiento: sin él, el gráfico se ve entero desde el principio */
.con-movimiento .chart:not(.entra):not(.trazado) .series { clip-path: inset(0 100% 0 0); }
.con-movimiento .chart.entra .series { animation: trazar 1.1s var(--suave) both; }
@keyframes trazar {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Veredicto: compactar con transición, no a saltos */
.verdict { transition: box-shadow .25s var(--suave); }
.verdict .wrap { transition: padding .25s var(--suave); }
.verdict-head, .conf .pct { transition: font-size .25s var(--suave), color .3s; }
.verdict-lead, .verdict-sub, .conf .lbl {
  max-height: 5em;
  overflow: hidden;
  transition: max-height .25s var(--suave), opacity .2s, margin .25s var(--suave);
}
.verdict.compacto .verdict-lead,
.verdict.compacto .verdict-sub,
.verdict.compacto .conf .lbl { display: block; max-height: 0; opacity: 0; margin: 0; }

/* Barra de secciones: subrayado que crece desde el centro */
.nav-sitio a { position: relative; border-bottom: none; transition: color .2s; }
.nav-sitio a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .3s var(--suave);
}
.nav-sitio a.actual::after { transform: scaleX(1); }
@media (hover: hover) {
  .nav-sitio a:not(.actual):hover::after { transform: scaleX(.4); opacity: .5; }
}

/* Respuesta al tocar */
.btn, .seg button, a.cta, .icon-btn {
  transition: background-color .18s, border-color .18s, color .18s,
              box-shadow .2s var(--suave), transform .2s var(--suave), filter .18s;
}
.btn:active, .seg button:active, .icon-btn:active { transform: scale(.97); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(22, 32, 42, .45); }
  a.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(22, 32, 42, .55); }
}
input[type=range]::-webkit-slider-thumb { transition: transform .15s var(--suave); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }

/* Desplegables: el contenido entra, no aparece de golpe */
details[open] > .acc-in,
details.pregunta[open] > div { animation: desplegar .3s var(--suave); }
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* La propuesta y los avisos que aparecen tras calcular */
.alert, .siguiente-util, .oferta, .sugerencia { animation: desplegar .35s var(--suave); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .con-movimiento .revelar { opacity: 1; transform: none; }
  .chart .series { clip-path: none !important; }
}

@media print {
  .revelar { opacity: 1 !important; transform: none !important; }
  .chart .series { clip-path: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .verdict-zona { position: static !important; height: auto !important; transform: none !important; visibility: visible !important; }
  .verdict { box-shadow: none; }
  .consent, .icon-btn, .actions { display: none !important; }
  body { background: #fff; }
}

/* Enlace de accion dentro de una pista */
.enlace-sugerencia {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.enlace-sugerencia:hover { filter: brightness(1.15); }
.sugerencia { margin-top: 6px; }

/* Campo «¿Dónde?» */
.campo-zona input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);
}
.campo-zona input:focus { border-color: var(--brand); background: var(--surface); outline: none; }
.campo-zona.elegida input { border-color: var(--brand); background: var(--brand-wash); }

/* Sugerencias sobre los datos: se proponen, no se imponen */
.sugerencia-dato {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.sugerencia-dato.aviso { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-wash); color: var(--ink); }
.sugerencia-dato .enlace-sugerencia { margin-left: 4px; white-space: nowrap; }

/* Resumen de lo que conviene revisar y no está a la vista (modo sencillo o
   grupo plegado): si no, el aviso existiría pero nadie lo vería */
.revisar-datos {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--warn-wash);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  font-size: var(--fs-sm);
}
.revisar-datos ul { margin: 6px 0 0; padding-left: 18px; }
.revisar-datos li { margin-top: 4px; }

/* ========================================================================
   Argumentario y preguntas frecuentes
   La calculadora es lo primero; esto vive debajo del resultado, para quien
   quiera saber por que fiarse de el (seo.md §12, product.md §3).
   ======================================================================== */
.prosa {
  /* Separada de la calculadora: aquí empieza la explicación, no el resultado */
  margin: 56px 0 10px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  max-width: 68ch;
}
/* «Cómo lo calculamos», dentro del argumentario, entre los rasgos y las preguntas */
.prosa .metodo-prosa { margin: 22px 0 8px; }
details.acc > summary h3 { font: inherit; margin: 0; letter-spacing: inherit; }
.prosa h2 {
  font-size: var(--fs-lg);
  letter-spacing: -.015em;
  margin: 34px 0 12px;
}
.prosa h2:first-child { margin-top: 0; }
.prosa > p {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.prosa strong { color: var(--ink); font-weight: 600; }

.rasgos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.rasgo { background: var(--surface); padding: 16px 18px; }
.rasgo h3 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.35;
}
.rasgo p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.faq {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
details.pregunta { border-top: 1px solid var(--line-soft); }
details.pregunta:first-child { border-top: none; }
details.pregunta > summary {
  list-style: none;
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
}
details.pregunta > summary::-webkit-details-marker { display: none; }
details.pregunta > summary h3 {
  font-size: var(--fs-sm);
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}
details.pregunta > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.8px solid var(--ink-faint);
  border-bottom: 1.8px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
details.pregunta[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.pregunta[open] > summary h3 { font-weight: 600; }
details.pregunta > div { padding: 0 18px 16px; }
details.pregunta p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
details.pregunta p:last-child { margin-bottom: 0; }

@media (min-width: 680px) {
  .rasgos { grid-template-columns: 1fr 1fr; }
  .prosa h2 { font-size: var(--fs-xl); }
}

/* leads:inicio */
/* ==========================================================================
   Estudio hipotecario (ui/lead.js, docs/leads.md)
   Un bloque que invita y un diálogo de tres pasos. Se lee como servicio de un
   tercero (monetization.md §15), pero sin pedir perdón: es útil de verdad
   para quien ya ha visto que la operación encaja.
   ========================================================================== */
.lead-oferta {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--brand-wash) 0%, transparent 60%),
    var(--surface);
  padding: 18px 16px 16px;
  margin-top: 12px;
  overflow: hidden;
}
.lead-oferta:first-child { margin-top: 0; }
.lead-oferta .marca-comercial {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; margin-bottom: 10px;
  background: var(--surface);
}
.lead-oferta h3 { font-size: var(--fs-lg); line-height: 1.3; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.lead-oferta > p { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-soft); margin: 0; }

.lead-caso {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin: 14px 0;
}
.lead-caso > div { background: var(--surface); padding: 10px 10px 9px; min-width: 0; }
.lead-caso dt { font-size: var(--fs-xs); color: var(--ink-faint); margin-bottom: 3px; }
.lead-caso dd { margin: 0; font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lead-ventajas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.lead-ventajas li { position: relative; padding-left: 26px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }
.lead-ventajas li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--ok-wash);
}
.lead-ventajas li::after {
  content: ""; position: absolute; left: 6px; top: 4px;
  width: 5px; height: 9px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lead-abrir { width: 100%; min-height: 54px; font-size: var(--fs-md); font-weight: 600; }
.lead-abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--suave); }
.lead-abrir:hover svg { transform: translateX(3px); }
.lead-oferta .aviso-comercial { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-faint); margin: 10px 0 0; }
.lead-oferta .lead-micro { text-align: center; font-size: var(--fs-xs); color: var(--ink-faint); margin: 8px 0 0; }

/* ---------------------------------------------------------------- diálogo */
dialog.lead {
  padding: 0; border: 0; color: var(--ink); background: var(--surface);
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0;
}
dialog.lead[open] { display: flex; animation: lead-subir .32s var(--suave); }
dialog.lead::backdrop { background: rgba(10, 16, 22, .55); backdrop-filter: blur(3px); animation: lead-fundido .25s ease; }
@keyframes lead-subir { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lead-fundido { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 680px) {
  dialog.lead {
    width: min(520px, calc(100% - 32px)); height: auto; max-height: min(780px, calc(100dvh - 48px));
    margin: auto; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
  }
}
body:has(dialog.lead[open]) { overflow: hidden; }

.lead-form { display: flex; flex-direction: column; width: 100%; min-height: 0; }

.lead-cab {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.lead-icono {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.lead-icono:hover { background: var(--surface-2); color: var(--ink); }
.lead-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lead-icono[hidden] { display: grid !important; visibility: hidden; }
.lead-progreso { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.lead-progreso i { display: block; height: 100%; width: 33%; background: var(--brand); border-radius: 2px; transition: width .45s var(--suave); }
.lead-pasos { flex: none; font-size: var(--fs-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.lead-demo {
  margin: 0; padding: 8px 16px; font-size: var(--fs-xs); font-weight: 600; text-align: center;
  background: var(--warn-wash); color: var(--warn);
}

.lead-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
@media (min-width: 680px) { .lead-cuerpo { padding: 26px 28px 8px; } }
.lead-paso { animation: lead-entrar .38s var(--suave); }
.lead-paso.atras { animation-name: lead-volver; }
@keyframes lead-entrar { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes lead-volver { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.lead-paso h2 { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 0 0 6px; outline: none; }
.lead-sub { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); margin: 0 0 20px; }

/* Opciones grandes: un toque y avanza */
.lead-opciones { display: grid; gap: 10px; }
.lead-opcion {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface);
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s var(--suave);
}
.lead-opcion:hover { border-color: var(--ink-faint); }
.lead-opcion:active { transform: scale(.985); }
.lead-opcion input, .lead-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lead-opcion-ico {
  flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-soft); transition: background .15s ease, color .15s ease;
}
.lead-opcion-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lead-opcion-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lead-opcion-txt b { font-size: var(--fs-md); font-weight: 600; }
.lead-opcion-txt small { font-size: var(--fs-sm); color: var(--ink-faint); }
.lead-opcion.marcada { border-color: var(--brand); background: var(--brand-wash); }
.lead-opcion.marcada .lead-opcion-ico { background: var(--brand); color: var(--on-brand); }
.lead-opcion:focus-within, .lead-seg label:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Campos */
.lead-campo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.lead-campo > label, .lead-campo legend { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 7px; padding: 0; }
.lead-leyenda-nota, .lead-opcional { font-weight: 400; color: var(--ink-faint); }
.lead-campo input[type=text], .lead-campo input[type=tel], .lead-campo input[type=email] {
  width: 100%; min-height: 52px; padding: 0 14px;
  font: inherit; font-size: var(--fs-md); color: var(--ink);
  background: var(--surface-2); border: 1.5px solid transparent; border-radius: 10px;
  transition: border-color .15s ease, background .15s ease;
}
.lead-campo input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.lead-campo input[aria-invalid="true"] { border-color: var(--bad); background: var(--surface); }
.lead-importe, .lead-tel { position: relative; }
.lead-campo .lead-importe input { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; padding-right: 44px; min-height: 60px; }
.lead-campo .lead-importe input::placeholder { font-weight: 400; font-size: var(--fs-md); color: var(--ink-faint); }
.lead-campo input::placeholder { color: var(--ink-faint); opacity: 1; }
.lead-importe span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: var(--fs-lg); color: var(--ink-faint); pointer-events: none; }
.lead-tel span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-variant-numeric: tabular-nums; pointer-events: none; }
.lead-campo .lead-tel input { padding-left: 54px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lead-hint { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-faint); margin: 6px 0 0; }
.lead-error { font-size: var(--fs-xs); line-height: 1.45; color: var(--bad); font-weight: 500; margin: 6px 0 0; }
.lead-error:empty { display: none; }

.lead-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lead-seg label { position: relative; cursor: pointer; border-radius: 10px; }
.lead-seg label span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 0 10px; border-radius: 10px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft);
  background: var(--surface-2); border: 1.5px solid transparent;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.lead-seg label:hover span { color: var(--ink); }
.lead-seg input:checked + span { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* La cuenta hecha delante: lo que más ayuda a seguir */
.lead-veredicto {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 10px; padding: 11px 13px; border-radius: 10px;
  font-size: var(--fs-sm); line-height: 1.45; color: var(--ink);
  animation: desplegar .3s var(--suave);
}
.lead-veredicto[hidden] { display: none; }
.lead-veredicto.cabe { background: var(--ok-wash); }
.lead-veredicto.justo { background: var(--warn-wash); }
.lead-veredicto.no-cabe { background: var(--bad-wash); }
.lead-veredicto b { font-variant-numeric: tabular-nums; }
.lead-veredicto p { margin: 0; }
.lead-veredicto .medidor { flex: none; width: 38px; height: 38px; }
.lead-veredicto .medidor circle { fill: none; stroke-width: 4; }
.lead-veredicto .medidor .fondo { stroke: var(--line); }
.lead-veredicto .medidor .valor { stroke: currentColor; stroke-linecap: round; transition: stroke-dasharray .4s var(--suave); }
.lead-veredicto .medidor text { fill: var(--ink); font-size: 10px; font-weight: 600; font-family: var(--sans); }
.lead-veredicto.cabe .medidor { color: var(--ok); }
.lead-veredicto.justo .medidor { color: var(--warn); }
.lead-veredicto.no-cabe .medidor { color: var(--bad); }
.lead-veredicto .btn { margin-top: 10px; min-height: 42px; }

/* Transparencia antes de enviar */
.lead-envio { margin: 4px 0 14px; border: 1px solid var(--line-soft); border-radius: 10px; }
.lead-envio summary { cursor: pointer; padding: 11px 14px; font-size: var(--fs-sm); color: var(--ink-soft); list-style: none; }
.lead-envio summary::-webkit-details-marker { display: none; }
.lead-envio summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .2s ease; }
.lead-envio[open] summary::before { transform: rotate(90deg); }
.lead-resumen { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 0 14px 12px; font-size: var(--fs-xs); }
.lead-resumen dt { color: var(--ink-faint); }
.lead-resumen dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }

.lead-check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; }
.lead-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand); }
.lead-check span { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); }
.lead-check[hidden] { display: none; }
.lead-legal { font-size: var(--fs-xs); line-height: 1.55; color: var(--ink-faint); margin: 10px 0 4px; }
.lead-legal a { color: var(--ink-soft); }

/* Pie fijo con el botón: siempre a mano, también con el teclado abierto */
.lead-pie {
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft); background: var(--surface);
}
@media (min-width: 680px) { .lead-pie { padding: 14px 28px 18px; } }
.lead-cta { width: 100%; min-height: 54px; font-size: var(--fs-md); font-weight: 600; border-radius: 10px; }
.lead-cta[disabled] { opacity: .7; cursor: progress; }
.lead-cta .girando { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lead-girar .7s linear infinite; }
@keyframes lead-girar { to { transform: rotate(360deg); } }
.lead-garantia { text-align: center; font-size: var(--fs-xs); color: var(--ink-faint); margin: 8px 0 0; }
.lead-fallo { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); background: var(--bad-wash); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
.lead-fallo[hidden] { display: none; }

/* Hecho */
.lead-hecho { text-align: center; padding-top: 8px; }
.lead-hecho .lead-sub { margin-bottom: 22px; }
.lead-sello { width: 76px; height: 76px; margin: 4px auto 16px; color: var(--ok); }
.lead-sello svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lead-sello circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: lead-trazo .6s var(--suave) forwards; }
.lead-sello path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: lead-trazo .35s var(--suave) .45s forwards; }
@keyframes lead-trazo { to { stroke-dashoffset: 0; } }
.lead-docs { text-align: left; background: var(--surface-2); border-radius: 12px; padding: 14px 16px; }
.lead-docs h3 { font-size: var(--fs-sm); font-weight: 600; margin: 0 0 8px; }
.lead-docs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.lead-docs li { position: relative; padding-left: 22px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); }
.lead-docs li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  dialog.lead[open], dialog.lead::backdrop, .lead-paso, .lead-veredicto { animation: none; }
  .lead-sello circle, .lead-sello path { animation: none; stroke-dashoffset: 0; }
  .lead-progreso i { transition: none; }
}
/* leads:fin */

/* ==========================================================================
   Comprensión
   Tras una prueba con una persona real («no entiendo nada», «no sé qué he
   tocado», «no sé qué ha cambiado»). Cuatro ideas:
   1. Recorrido numerado: tu situación → lo que suponemos → qué significa.
   2. Cada dato dice de dónde sale: de ejemplo, de la zona o tuyo.
   3. Cada toque dice qué ha movido en el resultado, y se puede deshacer.
   4. El resultado se lee con palabras antes que con cifras y gráficos.
   ========================================================================== */

/* --- 1. Recorrido ------------------------------------------------------- */
.paso-n {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--brand-wash);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: 1px;
}
/* En modo simple, los supuestos van justo después de «Tu situación» */

/* --- 2. De dónde sale cada dato ---------------------------------------- */
label .origen {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 2px;
}
.origen:empty { display: none !important; }
.origen[data-origen="ejemplo"] { color: var(--warn); }
.origen[data-origen="zona"]    { color: var(--ink-faint); }
/* El valor de ejemplo se ve distinto del que ha escrito la persona */
.field[data-origen="ejemplo"] .val { color: var(--ink-soft); font-style: italic; }

/* Supuestos del modelo, a la vista */
dl.supuestos { margin: 0 0 14px; }
.supuesto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.supuesto:first-child { border-top: none; padding-top: 0; }
.supuesto dt { font-size: var(--fs-sm); color: var(--ink-soft); grid-column: 1; grid-row: 1; }
.supuesto dd { display: contents; }
.supuesto-v {
  grid-column: 2; grid-row: 1;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.supuesto-n { grid-column: 1; grid-row: 2; font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.4; }
.supuesto-cambiar { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; font-size: var(--fs-xs); }
.supuesto.propio dt::after {
  content: "tuyo";
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--brand-wash);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* --- 3. Qué ha cambiado ------------------------------------------------ */
.verdict-head .vh-corto { display: none; }
.verdict.compacto .verdict-head .vh-largo { display: none; }
.verdict.compacto .verdict-head .vh-corto { display: inline; }
/* Compacto, el titular corto ya cabe: sin puntos suspensivos que corten la cifra */
.verdict.compacto .verdict-head { text-overflow: clip; }
@media (max-width: 679px) {
  .verdict.compacto .conf { display: none; }
}

.v-cambio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin-top: 8px;
  padding: 6px 6px 6px 10px;
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  line-height: 1.35;
  animation: desplegar .25s var(--suave);
}
.v-cambio[hidden] { display: none; }
.v-cambio-campo { color: var(--ink-soft); }
.v-cambio-efecto { font-weight: 600; color: var(--ink); }
.v-cambio-efecto[data-tono="compra"]   { color: var(--buy); }
.v-cambio-efecto[data-tono="alquiler"] { color: var(--rent); }
.v-deshacer {
  margin-left: auto;
  min-height: 32px;
  padding: 0 10px;
  font: inherit;
  font-weight: 600;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.v-deshacer:hover { border-color: var(--brand); }
/* Compacto (al bajar por el formulario): una sola línea con el efecto */
.verdict.compacto .v-cambio { margin-top: 4px; padding: 3px 4px 3px 8px; flex-wrap: nowrap; }
@media (max-width: 679px) { .verdict.compacto .v-cambio-campo { display: none; } }
.v-deshacer[hidden] { display: none; }
.verdict.compacto .v-cambio-efecto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.verdict.compacto .v-deshacer { min-height: 28px; }

/* Resultado que acaba de moverse por un toque */
.cambio { animation: cambio-senal 1.6s ease-out; border-radius: 3px; }
@keyframes cambio-senal {
  0%, 30% { background-color: var(--brand-wash); box-shadow: 0 0 0 3px var(--brand-wash); }
  100%    { background-color: transparent; box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cambio { background-color: var(--brand-wash); box-shadow: 0 0 0 3px var(--brand-wash); }
}

/* --- 4. Qué significa ---------------------------------------------------- */
.lectura {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.lectura strong { color: var(--ink); font-weight: 600; }
.lectura[data-win="compra"] strong   { color: var(--buy); }
.lectura[data-win="alquiler"] strong { color: var(--rent); }

/* Cifra clave, no aviso: se resalta con el tamaño de la cifra y un fondo
   neutro, sin color de marca ni barra lateral */
.equilibrio {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.equilibrio-k { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.equilibrio-v {
  display: inline-block;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 4px;
}
.equilibrio[data-hay="false"] .equilibrio-v { font-size: var(--fs-lg); }
.equilibrio-t { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); margin: 0; }

.duo.final { margin-bottom: 16px; }
.duo.final .v { display: inline-block; }

.leyenda-porque {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: var(--fs-xs); color: var(--ink-faint);
  margin: -4px 0 12px;
}
.leyenda-porque > span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-porque .marca {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 600;
}
.leyenda-porque .marca.compra   { background: var(--buy-wash);  color: var(--buy); }
.leyenda-porque .marca.alquiler { background: var(--rent-wash); color: var(--rent); }

.lectura-grafico { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; }

/* Solvencia en palabras */
.meter-top span small { display: block; font-size: var(--fs-xs); color: var(--ink-faint); }
.status.pendiente { background: var(--surface-2); color: var(--ink-soft); }
.aviso-ejemplo {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink);
  background: var(--warn-wash);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--r);
  padding: 10px 12px;
  margin: 0 0 4px;
}
.aviso-ejemplo[hidden] { display: none; }

/* Móvil: la probabilidad va debajo, en una línea, y el titular gana el ancho */
@media (max-width: 679px) {
  .verdict:not(.compacto) .verdict-row { flex-wrap: wrap; row-gap: 6px; }
  .verdict:not(.compacto) .conf {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-align: left;
    border-left: none;
    border-top: 1px solid var(--line-soft);
    padding: 6px 0 0 16px;
  }
  .verdict:not(.compacto) .conf .pct { font-size: var(--fs-sm); }
  .verdict:not(.compacto) .conf .lbl { max-width: none; margin-top: 0; }
}

/* ==========================================================================
   Inicio paso a paso (js/ui/guia.js)
   Una pregunta cada vez; el resultado y los supuestos aparecen al terminar.
   «Ver todo de golpe» está en todos los pasos.
   ========================================================================== */
.con-guia { display: none; }
body[data-guia="activa"] .con-guia { display: inline; }
body[data-guia="activa"] .sin-guia { display: none; }

body[data-guia="activa"] .verdict-zona,
body[data-guia="activa"] .col-resultado > *,
body[data-guia="activa"] .cambiar-modo,
body[data-guia="activa"] #card-ajustes,
body[data-guia="activa"] .referencia,
body[data-guia="activa"] .guia-empezar,
body[data-guia="activa"] .campo-zona .hint,
body[data-guia="activa"] .campo-zona .field-top,
body[data-guia="activa"] .card-title { display: none !important; }
body[data-guia="activa"] .field.guia-fuera { display: none !important; }
/* La explicación de la pregunta ya dice lo mismo que la ayuda fija del campo:
   se deja solo la que cambia con los datos (las que llevan id) */
body[data-guia="activa"] .field > .hint:not([id]) { display: none !important; }

/* Sin la tarjeta de fuentes (vista sencilla), «Cómo lo calculamos» ocupa todo
   el ancho en vez de quedarse sola a media anchura */
@media (min-width: 1024px) {
  body[data-modo="simple"] .referencia { grid-template-columns: 1fr; }
}

/* En escritorio, sin resultado todavía, la tarjeta va sola y centrada */
@media (min-width: 1024px) {
  body[data-guia="activa"] .portada { grid-template-columns: minmax(0, 620px); justify-content: center; }
  body[data-guia="activa"] .col-resultado { display: none; }
  body[data-guia="activa"] .titular,
  body[data-guia="activa"] .intro { text-align: center; margin-left: auto; margin-right: auto; }
}

.guia { margin-bottom: 18px; }
.guia-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guia-paso { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.guia-saltar {
  min-height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.guia-saltar:hover { border-color: var(--brand); }
.guia-pregunta { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 6px; }
.guia-pregunta:focus { outline: none; }
.guia-ayuda { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); margin: 0; }

.guia-nav { display: flex; gap: 10px; margin-top: 22px; }
.guia-nav .btn { flex: 1; min-height: 48px; font-size: var(--fs-md); }
.guia-nav .btn[hidden] { display: none; }
body[data-guia="activa"] .field { margin-bottom: 16px; }

.guia-empezar { font-size: var(--fs-xs); }

/* ==========================================================================
   Vista avanzada en palabras, límites de los deslizadores, comparar
   ========================================================================== */
.grupo-intro { margin: 0 0 16px !important; font-size: var(--fs-sm) !important; color: var(--ink-soft) !important; }
.origen[data-origen="supuesto"] { color: var(--ink-faint); font-weight: 400; }

.rango-lim {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: -2px;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.comparar { margin: 4px 0 18px; }
.comparar > .btn { width: 100%; }
.comparar-nota { margin-top: 6px !important; }
.comparar-nota[hidden], .comparar > .btn[hidden] { display: none; }
.comparar-caja {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}
.comparar-caja[hidden] { display: none; }
.comparar-fila { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); padding: 3px 0; }
.comparar-fila span { color: var(--ink-soft); }
.comparar-fila b { font-variant-numeric: tabular-nums; font-weight: 600; }
.comparar-efecto { font-size: var(--fs-sm); font-weight: 600; margin: 8px 0 6px; color: var(--ink); }
.comparar-efecto[data-tono="compra"]   { color: var(--buy); }
.comparar-efecto[data-tono="alquiler"] { color: var(--rent); }
.comparar-cambios { margin: 0 0 12px; padding-left: 18px; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.comparar-cambios:focus { outline: none; }
.comparar-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comparar-acciones .btn { min-height: 40px; font-size: var(--fs-xs); }

/* ==========================================================================
   Resultado sin abrumar
   Al terminar la guía se veían unas 35 cifras y 13 campos a la vez. Ahora:
   - un único bloque «Tu resultado» abierto (frase, punto de equilibrio y los
     dos supuestos que más lo mueven);
   - «Tus datos» en una línea con «Editar» en el móvil, y abiertos y fijos a la
     izquierda en escritorio;
   - todo lo demás plegado, con un resumen de una línea;
   - el veredicto de arriba solo flota cuando el resultado no se ve.
   ========================================================================== */

/* --- Veredicto flotante ------------------------------------------------- */
.verdict-zona {
  position: fixed;
  left: 0;
  right: 0;
  height: auto !important;
  transform: translateY(-130%);
  visibility: hidden;
  transition: transform .25s var(--suave), top .28s var(--suave), visibility 0s linear .25s;
}
body.veredicto-flotante .verdict-zona {
  transform: none;
  visibility: visible;
  transition: transform .25s var(--suave), top .28s var(--suave), visibility 0s;
}

/* --- Tus datos ------------------------------------------------------------ */
.datos-resumen {
  display: flex;
  align-items: center;
  gap: 12px;
}
.datos-resumen p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.datos-resumen .btn { flex: none; min-height: 40px; }
.datos-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.datos-pie .btn { min-height: 42px; padding: 0 22px; }

/* Móvil: plegados muestran el resumen; abiertos, los campos y «Listo» */
body:not([data-guia="activa"]) #card-datos[data-datos="plegado"] .card-in > .field,
body:not([data-guia="activa"]) #card-datos[data-datos="plegado"] .datos-pie { display: none; }
#card-datos[data-datos="abierto"] .datos-resumen { display: none; }
body[data-guia="activa"] .datos-resumen,
body[data-guia="activa"] .datos-pie { display: none !important; }
#card-datos .card-title { margin-bottom: 10px; }

@media (min-width: 1024px) {
  /* Escritorio: los campos siempre a la vista, sin resumen ni «Listo» */
  #card-datos .datos-resumen { display: none !important; }
  /* Sin .solo-experto: esta regla, con id e !important, le ganaba a la que
     oculta los campos de la vista avanzada, y «Entrada que aportas» salía en
     la sencilla */
  body:not([data-guia="activa"]) #card-datos .card-in > .field:not(.solo-experto) { display: block !important; }
  body[data-modo="experto"]:not([data-guia="activa"]) #card-datos .card-in > .field.solo-experto { display: block !important; }
  body:not([data-guia="activa"]) #card-datos .datos-pie { display: flex !important; }
  #datos-listo { display: none; }

  /* Y la columna de datos se queda fija mientras se lee el resultado: llena el
     hueco que dejaba y mantiene los controles junto a lo que cambian */
  body:not([data-guia="activa"]) .col-datos {
    position: sticky;
    /* --datos-ajuste es negativo cuando la columna no cabe en la pantalla: así
       baja con la página hasta enseñar su final y se queda fija ahí, en vez
       de cortarse (app.js lo mide) */
    top: calc(var(--alto-barra-visible, 0px) + 58px + var(--datos-ajuste, 0px));
  }
}

/* --- Tu resultado -------------------------------------------------------- */
/* El menú de Compartir sale fuera de la tarjeta: las tarjetas recortan su
   contenido (overflow: hidden) y las siguientes se pintaban encima, así que
   las opciones quedaban tapadas. Esta no recorta y va por encima de ellas
   (por debajo del veredicto flotante, que está en 20). */
.card.resultado { overflow: visible; position: relative; z-index: 2; }
.resultado .card-title { margin-bottom: 8px; }
.resultado-titular {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.resultado-titular[data-win="compra"]   { color: var(--buy); }
.resultado-titular[data-win="alquiler"] { color: var(--rent); }
.resultado-sub { margin: 6px 0 14px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); }

.resultado .equilibrio { margin-bottom: 12px; padding: 10px 14px; }
.resultado .equilibrio-v { font-size: var(--fs-lg); margin: 1px 0 2px; }

.supuestos-clave {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.supuestos-clave b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.supuestos-clave .enlace-sugerencia { font-size: var(--fs-xs); margin: 0 2px; }

.r-cambio { margin: 0 0 14px; }

.resultado-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.resultado-acciones > .btn { flex: 1 1 auto; }
.compartir { position: relative; flex: 1 1 auto; }
.compartir > summary { list-style: none; width: 100%; cursor: pointer; }
.compartir > summary::-webkit-details-marker { display: none; }
.compartir > summary::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: 4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.compartir-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 15;
  min-width: 190px;
  display: grid;
  gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.compartir-menu .btn { justify-content: flex-start; min-height: 40px; }
.accion-msg { margin-top: 8px !important; }
.resultado .comparar-caja { margin-top: 14px; }

/* Resumen del plegable a la derecha, también cuando es un estado */
details.acc > summary .status { margin-left: auto; }
.supuestos-intro { margin: 0 0 12px !important; }

/* Debajo de la calculadora: centrado con el ancho de lectura, no a lo ancho.
   Pegado a la izquierda dejaba casi media pantalla vacía a la derecha bajo
   las dos columnas; a todo el ancho, las líneas pasarían de 150 caracteres. */
@media (min-width: 1024px) {
  body.calculadora .prosa,
  body.calculadora footer.legal {
    width: 100%;
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Pulido de interfaz
   Reglas: un solo azul para lo que se toca, jerarquía primario / secundario
   clara, campos que parecen campos (fondo blanco, borde, anillo de foco),
   radios y sombras coherentes, y estados visibles (pulsado, foco, relleno).
   ========================================================================== */
/* Anillo de foco doble (hueco + tinta): con la tinta al 22 % apenas se veía */
:root { --r-campo: 8px; --anillo: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }

/* --- Tarjetas: borde suave y una sombra mínima que las separa del fondo */
.card { border-color: var(--line-soft); box-shadow: 0 1px 2px rgba(22, 32, 42, .04), 0 1px 1px rgba(22, 32, 42, .02); }

/* --- Botones */
.btn {
  min-height: 44px;
  font-weight: 600;
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  border-radius: var(--r-campo);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-faint); }
.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 35%, transparent);
}
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); filter: none; }
.btn:focus-visible, .seg button:focus-visible { outline: none; box-shadow: var(--anillo); border-color: var(--brand); }

/* --- Campos numéricos, selector y buscador: blancos con borde y anillo */
.val {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-campo);
  padding: 6px 10px;
}
.val:hover { border-color: var(--ink-faint); }
.val:focus, select:focus, .campo-zona input:focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: var(--anillo);
  outline: none;
}
select, .campo-zona input {
  background-color: var(--surface);
  border-radius: var(--r-campo);
  min-height: 46px;
}
.campo-zona input::placeholder { color: var(--ink-faint); }
.field label { font-weight: 600; color: var(--ink); }

/* --- Deslizador: el tramo recorrido va en azul (--lleno lo pone app.js) */
input[type=range] { --lleno: 0%; }
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--brand) var(--lleno), var(--surface-2) var(--lleno));
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface-2); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brand); }
input[type=range]::-webkit-slider-thumb {
  width: 22px; height: 22px; margin-top: -8px;
  background: var(--surface);
  border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(22, 32, 42, .25);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--surface);
  border: 2px solid var(--brand);
}
@media (pointer: coarse) {
  input[type=range]::-webkit-slider-thumb { margin-top: -13px !important; }
}

/* --- Segmentos (Usada / Obra nueva…): el elegido, relleno suave de marca */
.seg { gap: 0; padding: 3px; background: var(--surface-2); border-radius: calc(var(--r-campo) + 3px); }
.seg button { background: transparent; border: 1px solid transparent; border-radius: var(--r-campo); color: var(--ink-soft); min-height: 40px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(22, 32, 42, .08);
  font-weight: 600;
}

/* --- Enlaces de acción */
.enlace-sugerencia { font-weight: 600; text-decoration-thickness: 1px; }

/* --- Guía: indicador de pasos con nombre y campos agrupados */
.guia { margin-bottom: 20px; }
.guia-pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 18px;
  padding: 0;
}
.guia-pasos li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 3px solid var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
  min-width: 0;
}
.guia-pasos li.actual { border-top-color: var(--brand); color: var(--ink); }
.guia-pasos li.hecho  { border-top-color: color-mix(in srgb, var(--brand) 45%, var(--surface-2)); color: var(--ink-soft); }
.guia-pasos-n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 11px;
  background: var(--surface-2);
  color: var(--ink-soft);
}
.guia-pasos li.actual .guia-pasos-n { background: var(--brand); color: var(--on-brand); }
.guia-pasos li.hecho .guia-pasos-n  { background: var(--brand-wash); color: var(--brand); }
@media (max-width: 420px) {
  /* En pantallas estrechas, solo el número del paso que no es el actual */
  .guia-pasos li:not(.actual) { font-size: 0; gap: 0; }
  .guia-pasos li:not(.actual) .guia-pasos-n { font-size: 11px; }
}
.guia-paso { font-weight: 500; }
.guia-saltar { min-height: 36px; border-radius: var(--r-campo); font-weight: 600; }
.guia-pregunta { font-size: var(--fs-xl); font-weight: 700; }
.guia-ayuda { margin-top: 4px; }

body[data-guia="activa"] #card-datos .card-in { padding: 22px; }
body[data-guia="activa"] #card-datos .field:not(.guia-fuera) {
  padding: 14px 0;
  margin: 0;
  border-top: 1px solid var(--line-soft);
}
body[data-guia="activa"] .guia-nav { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
body[data-guia="activa"] .guia-nav .btn.primary { flex: 2; }
@media (min-width: 1024px) {
  body[data-guia="activa"] .portada { grid-template-columns: minmax(0, 640px); }
}

/* ==========================================================================
   Aviso de analítica
   Antes: una línea de 12 px pegada al borde inferior, que casi nadie leía ni
   pulsaba. Sin respuesta no se carga la analítica, así que se perdía casi
   toda. Ahora es una tarjeta que se ve, con título, el porqué en una frase y
   dos botones del mismo peso: rechazar cuesta lo mismo que aceptar (AEPD).
   No bloquea la página ni tapa la calculadora con un velo.
   ========================================================================== */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.consent-in {
  pointer-events: auto;
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px -12px rgba(22, 32, 42, .35), 0 2px 6px rgba(22, 32, 42, .08);
  animation: aviso-entra .35s var(--suave, ease-out) both;
}
.consent p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); }
.consent .consent-titulo { font-size: var(--fs-md); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.consent-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-acciones .btn {
  min-height: 46px;
  font-size: var(--fs-md);
  font-weight: 600;
  background: var(--surface);
  border: 1.5px solid var(--brand);
  color: var(--brand);
}
.consent-acciones .btn:hover { background: var(--brand); color: var(--on-brand); }
@media (min-width: 680px) {
  .consent { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .consent-in { grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 20px 22px; }
  .consent-acciones { grid-template-columns: auto auto; }
  .consent-acciones .btn { min-width: 120px; }
}
@keyframes aviso-entra { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .consent-in { animation: none; } }

/* ==========================================================================
   Guía: campos en blanco y comunidad deducida
   ========================================================================== */
/* Comunidad: con ciudad elegida se enseña cuál es, sin selector */
.ccaa-deducida { font-weight: 600; color: var(--ink); text-align: right; }
.campo-ccaa.deducida .field-top { margin-bottom: 0; }
body:not([data-guia="activa"]) #ccaa-sin-zona { display: none; }
body[data-guia="activa"] #ccaa-nota,
body[data-guia="activa"] .origen { display: none !important; }
body[data-guia="activa"] .campo-zona input { min-height: 50px; font-size: var(--fs-md); }

/* Campo vacío: el deslizador no aparenta un valor */
.val::placeholder { color: var(--ink-faint); font-style: normal; font-weight: 400; opacity: 1; }
.field.vacio input[type=range]::-webkit-slider-thumb { border-color: var(--line); box-shadow: none; }
.field.vacio input[type=range]::-moz-range-thumb { border-color: var(--line); }
.field.vacio .rango-lim { opacity: .6; }
/* Ni pistas calculadas («Con esto pagas…»): saldrían del valor de ejemplo */
.field.vacio > .hint { display: none !important; }

/* Falta un dato para seguir */
.guia-falta {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-campo);
  background: var(--bad-wash);
  color: var(--bad);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.guia-falta-campo { border-color: var(--bad) !important; box-shadow: 0 0 0 1px var(--bad) !important; }

/* ==========================================================================
   Sistema visual — septiembre de 2026
   --------------------------------------------------------------------------
   La web funcionaba, pero se leía como una herramienta interna: tarjetas
   blancas sobre gris frío, todo del mismo peso y enlaces subrayados en
   cualquier sitio, que es lo que hace que una página parezca de 2009.
   Cuatro decisiones, y ninguna es decorativa:

   1. DOS VOCES TIPOGRÁFICAS. Titulares en serif (Source Serif 4) y toda la
      interfaz y las cifras en la sans de siempre. El contraste entre las dos
      distingue una publicación con criterio de un panel de control.
   2. PAPEL CÁLIDO. Los neutros pasan de gris azulado a cálido. Con la tinta
      azul noche y el par terracota / verde azulado del logotipo, la paleta se
      reconoce; el gris frío no es de nadie.
   3. ENLACES SEGÚN SU PAPEL. Subrayado solo dentro de un texto corrido, que
      es donde hace falta distinguirlo palabra a palabra. La navegación, las
      tablas y el pie se distinguen por sitio, peso y color, y se subrayan al
      apuntarlos.
   4. MENOS CAJAS. Lo que es dato (cifras, tablas, resultado) sigue en tarjeta;
      lo que es texto pasa a filetes y aire. Antes todo era una tarjeta, así
      que ninguna destacaba.
   ========================================================================== */

/* --------------------------------------------------------------- tipografía */
/* La única excepción a la escala de seis tamaños: el titular de cada página
   crece con el ancho. A 32 px fijos, en escritorio no abría la página. */
h1, .titular, .guia-pregunta, .prosa h2, .verdict-head, .resultado-titular {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.005em;
}
.titular {
  font-size: clamp(28px, 5.4vw, 38px);
  line-height: 1.08;
  margin-bottom: 10px;
}
.prosa h2 { letter-spacing: -.01em; line-height: 1.15; }
.guia-pregunta { font-weight: 600; letter-spacing: -.01em; }
.verdict-head, .resultado-titular { letter-spacing: -.01em; }
/* Las cifras del serif, alineadas en columna igual que en la sans */
.verdict-head, .resultado-titular, .titular { font-variant-numeric: lining-nums tabular-nums; }

/* Rótulos de dato: pequeños, en mayúscula espaciada. Marcan qué es etiqueta y
   qué es cifra sin gastar otro color. */
.pie-titulo, .respuesta-k, .datos-clave dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ enlaces */
a { color: var(--ink); text-decoration: none; }
/* Dentro de un texto corrido el enlace se subraya: es el único sitio donde
   hace falta distinguirlo palabra a palabra. Fino y separado de la base. */
/* Sin clases en el selector a propósito: así cualquier componente con clase
   (.btn, .cta, .enlace-sugerencia, .migas, .pie, .herramientas…) le gana por
   especificidad y decide su propio tratamiento. */
:where(main p, main li, main dd, .doc p, .doc li, .pie-nota, .pie-meta, .hint, .note) a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: .18em;
}
:where(main p, main li, main dd, .doc p, .doc li, .pie-nota, .pie-meta, .hint, .note) a:hover {
  text-decoration-color: currentColor;
}
/* Fuera del texto corrido (navegación, tablas, listas de enlaces, pie) el
   sitio y el peso ya dicen que es un enlace; el subrayado llega al apuntar. */
.migas a, .pie a, table.datos a, .lista-guias a, .herramientas a, .indice-metodo a,
.indice-glosario a, .fuentes-lista a, .registro a, .confianza a, .datos-clave a,
.fechas a, .termino-enlaces a { text-decoration: none; }
.migas a:hover, .pie a:hover, table.datos a:hover, .lista-guias a:hover,
.indice-metodo a:hover, .indice-glosario a:hover, .registro a:hover, .confianza a:hover,
.datos-clave a:hover, .fechas a:hover, .termino-enlaces a:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
  color: var(--ink);
}
table.datos a { font-weight: 500; }

/* Acción escrita dentro de una frase («cambiar», «Ir paso a paso»): una ficha
   pequeña, y no un subrayado más en mitad del texto. */
.enlace-sugerencia {
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  line-height: 1.5;
}
.enlace-sugerencia:hover { background: var(--line-soft); color: var(--ink); filter: none; }

/* Saltar al contenido: lo primero que encuentra el teclado en cada página */
.saltar {
  position: fixed;
  left: 12px; top: -60px;
  z-index: 80;
  padding: 10px 14px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-campo);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top .18s var(--suave);
}
.saltar:focus { top: 10px; }
#contenido:focus { outline: none; }

/* ----------------------------------------------------------------- cabecera */
/* Una sola barra: marca, secciones y tema. En el móvil las secciones bajan a
   una segunda línea. Antes eran dos barras también en escritorio: 94 px de
   cromo antes de empezar a leer. */
.barra-sitio { background: var(--paper); border-bottom: 1px solid var(--line); }
.top { background: transparent; border-bottom: 0; }
.top .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marca tema" "nav nav";
  align-items: center;
  column-gap: 12px;
  min-height: 0;
}
.brand { grid-area: marca; min-height: 50px; gap: 10px; }
.brand .logo { width: 24px; height: 24px; }
.brand-nombre { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.012em; }
.brand-o, .brand-tld { color: var(--ink-faint); font-weight: 400; }
#tema { grid-area: tema; }
.icon-btn { border-radius: var(--r-campo); width: 36px; height: 36px; }
.icon-btn svg { display: block; }

.nav-sitio {
  grid-area: nav;
  background: transparent;
  border-top: 1px solid var(--line-soft);
  border-bottom: 0;
  display: flex;
  gap: 2px;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 calc(var(--pad) - 10px);
}
/* Por debajo de 360 px las cuatro secciones ya no caben: se desplazan, y el
   difuminado del borde avisa de que hay más. */
@media (max-width: 359px) {
  .nav-sitio {
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
            mask-image: linear-gradient(to right, #000 92%, transparent);
  }
}
.nav-sitio a { min-height: 44px; padding: 0 10px; font-size: var(--fs-sm); }
.nav-sitio a::after { left: 10px; right: 10px; }
.nav-sitio a.actual { font-weight: 600; }
/* En pantallas estrechas las cuatro secciones caben apretando el espaciado, en
   lugar de dejar la última medio cortada tras un desplazamiento que nadie ve. */
@media (max-width: 430px) {
  .nav-sitio { gap: 0; padding: 0 calc(var(--pad) - 7px); }
  .nav-sitio a { padding: 0 7px; font-size: 13px; letter-spacing: -.005em; }
  .nav-sitio a::after { left: 7px; right: 7px; }
}
@media (min-width: 860px) {
  .top .wrap {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marca nav tema";
    column-gap: 28px;
    min-height: 62px;
  }
  .nav-sitio {
    border-top: 0;
    margin: 0;
    padding: 0;
    gap: 4px;
  }
  .nav-sitio a { min-height: 60px; padding: 0 12px; }
  .brand { min-height: 60px; }
  .brand-nombre { font-size: var(--fs-lg); }
}
/* Entre 860 y 1024 la barra mide 760 px y las cuatro secciones justas no caben:
   se aprieta el espaciado en vez de dejar «Metodología» cortada. */
@media (min-width: 860px) and (max-width: 1023px) {
  .top .wrap { column-gap: 18px; }
  .nav-sitio { gap: 0; }
  .nav-sitio a { padding: 0 8px; }
  .nav-sitio a::after { left: 8px; right: 8px; }
}

/* Lo que se lleva por delante la barra al saltar a un ancla */
body.calculadora .card, body.calculadora .titular { scroll-margin-top: 72px; }
html:has(body.calculadora) { scroll-padding-top: 72px; }

/* ----------------------------------------------------------------- portada */
.intro { font-size: var(--fs-md); line-height: 1.6; max-width: 86ch; }
.confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 18px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-faint);
}
.confianza a { color: var(--ink-soft); }
.confianza span { color: var(--line); }
@media (min-width: 1024px) {
  body[data-guia="activa"] .confianza { justify-content: center; }
}

/* ------------------------------------------------------------ argumentario */
/* Debajo de la calculadora manda el texto, así que aquí no hay tarjetas:
   filetes, aire y una anchura de lectura. */
.prosa { border-top: 1px solid var(--line); padding-top: 44px; margin-top: 60px; }
.prosa h2 { font-size: clamp(23px, 3.6vw, 28px); margin: 48px 0 14px; }
.prosa h3 { font-size: var(--fs-md); font-weight: 600; margin: 0 0 4px; }
.prosa > p { max-width: 68ch; }

/* Respuesta corta: lo primero que puede citarse de esta página */
.respuesta-lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
  margin-bottom: 22px;
}

/* Tres cifras con su procedencia, no tres tarjetas de marketing */
.datos-clave {
  display: grid;
  gap: 0;
  margin: 0 0 14px;
  border-top: 1px solid var(--line);
}
.datos-clave > div { border-bottom: 1px solid var(--line-soft); padding: 14px 0; }
.datos-clave dt { margin-bottom: 6px; }
.datos-clave dd { margin: 0; }
.datos-clave .dc-v {
  text-wrap: balance;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.datos-clave .dc-n { margin-top: 5px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-faint); }
.datos-clave .dc-n a { color: var(--ink-soft); }
@media (min-width: 680px) {
  .datos-clave { grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
}

.fechas { font-size: var(--fs-xs); color: var(--ink-faint); margin: 0 0 8px; }
.fechas a { color: var(--ink-soft); }

/* Las seis decisiones del modelo: lista numerada con filete, no seis tarjetas */
.decisiones { list-style: none; counter-reset: d; margin: 0 0 18px; padding: 0; }
.decisiones li {
  counter-increment: d;
  position: relative;
  padding: 16px 0 16px 42px;
  border-top: 1px solid var(--line-soft);
}
.decisiones li::before {
  content: counter(d, decimal-leading-zero);
  position: absolute;
  left: 0; top: 17px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.decisiones p { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 62ch; }
.limites, .privacidad-nota { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); max-width: 68ch; }

/* Las otras herramientas: filas con el título y qué responde cada una */
.herramientas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.herramientas li { border-bottom: 1px solid var(--line-soft); }
.herramientas a { display: block; padding: 15px 30px 15px 0; position: relative; }
.herramientas a::after {
  content: "→";
  position: absolute;
  right: 4px; top: 15px;
  color: var(--ink-faint);
  transition: transform .18s var(--suave);
}
.herramientas a:hover::after { transform: translateX(3px); color: var(--ink); }
.herramientas a:hover .herr-t { text-decoration: underline; text-underline-offset: .18em; }
.herr-t { display: block; font-size: var(--fs-md); font-weight: 600; }
.herr-d { display: block; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); margin-top: 3px; max-width: 60ch; }

/* Preguntas frecuentes: filetes en vez de una caja con borde */
.faq { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
details.pregunta { border-top: 0; border-bottom: 1px solid var(--line-soft); }
details.pregunta > summary { padding: 14px 0; }
details.pregunta > summary h3 { font-size: var(--fs-md); font-weight: 500; }
details.pregunta[open] > summary h3 { font-weight: 600; }
details.pregunta > div { padding: 0 0 18px; max-width: 68ch; }

/* ------------------------------------------------------------------- pie */
.pie {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding: 34px 0 44px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.pie-rejilla { display: grid; gap: 26px; }
.pie-marca p { margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-faint); max-width: 42ch; }
.pie-titulo { margin: 0 0 8px; }
.pie-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie-grupo a { display: inline-block; padding: 5px 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.pie-grupo a:hover { color: var(--ink); }
.pie-nota {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.pie-nota, .pie-meta {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 92ch;
}
.pie-meta { margin: 8px 0 0; }
.pie-nota strong { color: var(--ink-soft); }
@media (min-width: 680px) {
  .pie-rejilla { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .pie-rejilla { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  .pie-marca { grid-column: auto; }
  body.calculadora .pie > .wrap { max-width: 1180px; }
}

/* ------------------------------------------------------- ajustes de detalle */
/* Radios algo menores: a 10 px cualquier cosa parecía una pastilla */
:root { --r: 8px; --r-campo: 7px; }
.card { border-radius: var(--r); }
/* El resultado es la respuesta de la página: se distingue por el fondo, no por
   un filete de color arriba, que es el recurso con el que se «decora» media
   web y no dice nada. */
.card.resultado {
  background: var(--surface-destacado);
  border-color: var(--line-destacado);
  box-shadow: 0 1px 2px rgba(22, 32, 42, .05), 0 10px 26px -20px rgba(22, 32, 42, .4);
}
/* Las líneas de dentro, del mismo tono que el fondo, no del gris general */
.card.resultado .equilibrio { border-color: var(--line-destacado); }
/* Lo que va dentro y tiene fondo propio se adapta al de la tarjeta */
.card.resultado .btn { background: var(--surface); }
.card.resultado .btn:hover { background: var(--surface-2); }
.card.resultado .enlace-sugerencia { background: var(--surface); }
.card.resultado .enlace-sugerencia:hover { background: var(--surface-2); }
.card.resultado .comparar-caja, .card.resultado .compartir-menu { background: var(--surface); }
.duo, .dist, .cifras { border-radius: var(--r); }

/* El veredicto flotante es una franja, no una tarjeta con sombra */
/* El veredicto flotante es CROMO, como la cabecera: va en el mismo papel que
   ella y no en blanco. Con blanco se veían tres bandas de tres colores
   distintos en los primeros 200 px (cabecera, barra y tarjeta), y la barra
   parecía un cuerpo extraño pegado debajo del menú. Al flotar sobre el
   contenido, lo que la separa es el filete y una sombra baja. */
.verdict {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 16px -14px rgba(23, 32, 43, .5);
}

/* Impresión: sin cromo de navegación */
@media print {
  .barra-sitio, .saltar, .pie-grupo, .herramientas { display: none !important; }
}

/* ==========================================================================
   Formulario y resultado — septiembre de 2026
   --------------------------------------------------------------------------
   La calculadora se quedó fuera del rediseño anterior, así que convivían dos
   lenguajes: páginas editoriales por un lado y la herramienta por otro. Aquí
   se igualan, sin tocar la lógica ni el orden de los campos:

   1. LOS MISMOS TRES GRUPOS QUE LA GUÍA. «La vivienda», «Tu dinero» y «La
      comparación» encabezan los campos también en la vista completa, así que
      quien hizo el paso a paso reconoce dónde está cada cosa.
   2. LA PROCEDENCIA, EN FICHA. «dato de ejemplo» era texto naranja suelto
      bajo la etiqueta; ahora es una marca pequeña, del mismo tipo que los
      sellos de las fuentes.
   3. LAS CIFRAS QUE SON RESPUESTA, EN SERIF. Punto de equilibrio y patrimonio
      final se leen con la misma voz que los titulares; las cifras de control
      (deslizadores, tablas, avisos) siguen en la sans.
   ========================================================================== */

/* ----------------------------------------------------------- 1. grupos -- */
.grupo-campos {
  margin: 26px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.grupo-campos:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
/* En la guía manda la pregunta del paso: los rótulos de grupo estorban */
body[data-guia="activa"] .grupo-campos { display: none !important; }
/* Plegado en el móvil, con el resumen a la vista */
body:not([data-guia="activa"]) #card-datos[data-datos="plegado"] .card-in > .grupo-campos { display: none; }
@media (min-width: 1024px) {
  body:not([data-guia="activa"]) #card-datos .card-in > .grupo-campos { display: block !important; }
}

/* ----------------------------------------------------- 2. procedencia -- */
label .origen {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--surface-2);
  color: var(--ink-faint);
}
.origen[data-origen="ejemplo"] { background: var(--warn-wash); color: var(--warn); }
/* Neutro, no verde azulado: ese color es el de «alquilar» y aquí no significa eso */
.origen[data-origen="zona"] { background: var(--surface-2); color: var(--ink-soft); }
.origen[data-origen="supuesto"] { background: var(--surface-2); color: var(--ink-faint); }
/* «con datos de ejemplo», junto al título del resultado */
.resultado .card-title .aside:not(:empty) {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warn-wash);
  color: var(--warn);
  font-weight: 600;
}

/* ------------------------------------------------------- 3. el resultado */
/* El punto de equilibrio deja de ser una caja gris dentro de otra caja: es un
   dato, con su rótulo arriba y la cifra en serif, separado por filetes. */
.resultado .equilibrio {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 12px 0;
  margin: 14px 0;
}
.equilibrio-k a { color: inherit; }
.equilibrio-k a:hover { color: var(--ink); }
.resultado .equilibrio-v {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-variant-numeric: lining-nums tabular-nums;
  margin: 3px 0 4px;
}
.equilibrio[data-hay="false"] .equilibrio-v { font-size: var(--fs-lg); }

/* Las dos cifras finales, con la voz de los titulares */
.duo .v { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.duo .k { letter-spacing: 0; }

/* Acciones del resultado: la principal a la izquierda, sin competir */
.resultado-acciones .btn { font-weight: 500; }

/* ------------------------------------------------------------- campos -- */
.field label { line-height: 1.35; }
.field .hint { max-width: 56ch; }
/* La unidad pegada a su cifra, no flotando lejos */
.val-wrap { gap: 4px; }
.val-wrap .unit { min-width: 28px; color: var(--ink-soft); }
/* Campo tocado por última vez: se reconoce sin color de estado */
.field:focus-within label { color: var(--ink); }

/* El buscador de zona es la puerta de entrada: pesa un poco más */
.campo-zona input { min-height: 50px; }
.campo-zona.elegida input { border-color: var(--brand); background: var(--surface); box-shadow: inset 0 0 0 1px var(--brand); }

/* ------------------------------------------------- plegables del resultado */
/* Los títulos de sección dentro de las tarjetas son interfaz, no titulares:
   se quedan en la sans, pero con el mismo peso que «Tus datos». */
details.acc > summary h2, .card-title h2 { font-weight: 600; }
details.acc > summary { padding-left: var(--pad); padding-right: var(--pad); }

/* --------------------------------------------------------------- avisos -- */
.aviso-ejemplo, .revisar-datos, .sugerencia-dato.aviso { border-radius: var(--r); }

/* ---------------------------------------------------------- escritorio -- */
@media (min-width: 1024px) {
  /* La columna de datos es una columna de trabajo: un poco más apretada que
     el resultado, que es lo que se lee. */
  .col-datos .field { margin-bottom: 16px; }
}