/* ------------------------------------------------------------------ *
 * Calculadora de Hipoteca — hoja de estilos
 * Mobile-first. Registro editorial: serif de texto para las cifras que
 * importan, grotesca civil para el resto, filetes en vez de tarjetas
 * iguales. Única dependencia de red: Newsreader + Public Sans (Google
 * Fonts), cargada desde la cabecera del documento.
 * ------------------------------------------------------------------ */

:root {
  --paper: #faf7f1;
  --paper-elev: #ffffff;
  --paper-sunken: #f1ebdd;
  --ink: #1c2030;
  --ink-soft: #5d6274;
  /* Oscurecido para cumplir AA (4.5:1) sobre los tres fondos de papel: lo usan
     el aviso legal y las etiquetas pequeñas, y el brief dice que los avisos
     son parte del diseño, no letra pequeña que esconder. */
  --ink-faint: #6b6555;
  --rule: #e4ded2;
  --rule-soft: #efe9dd;

  --brand: #2b3ea8;
  --brand-ink: #ffffff;
  /* --brand es un color de superficie: lleva --brand-ink encima. Como color de
     texto sobre el papel solo vale en claro; en oscuro se queda en 2,5:1 y no
     llega al 4,5 que pide la AA. Para eso está --brand-text, que en claro es el
     mismo y en oscuro se aclara. */
  --brand-text: var(--brand);
  --brand-soft: color-mix(in srgb, var(--brand) 12%, var(--paper-elev));
  --accent: #0f7a6c;
  --accent-soft: color-mix(in srgb, var(--accent) 15%, var(--paper-elev));
  --warn: #a8600c;
  --warn-soft: color-mix(in srgb, var(--warn) 15%, var(--paper-elev));
  --danger: #b03030;
  --danger-soft: color-mix(in srgb, var(--danger) 13%, var(--paper-elev));

  --chart-bg: #eee8dc;
  --chart-ink: #faf7f1;

  /* alias de compatibilidad: el resto de la hoja se escribió sobre estos
     nombres antes del rediseño; los mantenemos apuntando a los tokens de
     papel para no reescribir cada regla. */
  --bg: var(--paper);
  --bg-elev: var(--paper-elev);
  --bg-sunken: var(--paper-sunken);
  --line: var(--rule);
  --line-soft: var(--rule-soft);

  --font-display: 'Newsreader', Georgia, 'Iowan Old Style', serif;
  --font-ui: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-chip: 999px;
  --r-block: 4px;
  --r-hero: 10px;
  /* alias: código existente usa r-sm/md/lg */
  --r-sm: 6px;
  --r-md: var(--r-block);
  --r-lg: var(--r-hero);
  --shadow: 0 14px 34px -20px rgba(28, 32, 48, 0.5);
  --shadow-sm: 0 1px 2px rgba(28, 32, 48, 0.08);
  --shadow-hero: 0 6px 20px -8px color-mix(in srgb, var(--brand) 55%, transparent);

  --tap: 44px;
  --max: 1120px;

  /* Alto de la cabecera pegajosa. app.js lo remide al cargar las fuentes y al
     cambiar de tamaño, porque de él cuelgan el desplazamiento de las pestañas
     y el de la barra lateral fija. Estos valores son solo el arranque. */
  --h-topbar: 59px;
  --stack: 116px;
}

/* tema-oscuro:inicio — el guard permite que una elección explícita de tema
   claro gane sobre un sistema en oscuro. build-artifact.mjs reutiliza este
   bloque para generar también la variante :root[data-theme='dark']. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #15171e;
    --paper-elev: #1d2028;
    --paper-sunken: #12141b;
    --ink: #ece9e2;
    --ink-soft: #9a9daa;
    --ink-faint: #9095a5;
    --rule: #2f333e;
    --rule-soft: #262a34;

    --brand: #3d55d8;
    --brand-ink: #ffffff;
    --brand-text: #8ba0f2;
    --accent: #4ec4ad;
    --warn: #d99a45;
    --danger: #e8746e;

    --chart-bg: #23262f;
    --chart-ink: #ece9e2;

    --shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}
/* Un data-theme explícito gana siempre sobre el sistema, en cualquier
   dirección (permite forzar oscuro con el sistema en claro, y viceversa). */
:root[data-theme='dark'] {
  --paper: #15171e;
  --paper-elev: #1d2028;
  --paper-sunken: #12141b;
  --ink: #ece9e2;
  --ink-soft: #9a9daa;
  --ink-faint: #9095a5;
  --rule: #2f333e;
  --rule-soft: #262a34;

  --brand: #3d55d8;
  --brand-ink: #ffffff;
  --brand-text: #8ba0f2;
  --accent: #4ec4ad;
  --warn: #d99a45;
  --danger: #e8746e;

  --chart-bg: #23262f;
  --chart-ink: #ece9e2;

  --shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* tema-oscuro:fin */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font-ui);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -0.015em; }
p { margin: 0 0 0.8em; }
a { color: var(--brand-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Cifras heroicas y titulares editoriales: registro notarial, no bancario. */
.headline {
  font-family: var(--font-display); font-weight: 500;
  line-height: 1.15; letter-spacing: -0.01em;
  text-wrap: pretty; margin: 0;
}
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0;
}

/* ---------------------------- Layout ---------------------------- */

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 16px;
  max-width: var(--max); margin: 0 auto;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: -0.02em; font-size: 1.02rem;
}
/* El PNG viene con el fondo crema pegado, sin alfa. En claro no se nota —es
   el mismo tono que --paper—, y en oscuro queda como una lámina enmarcada,
   que además es lo que salva al azul del trazo: sobre el fondo oscuro, solo,
   no tendría contraste. El radio le da el borde a propósito. */
.logo__mark {
  height: 34px; width: auto; flex: none; display: block;
  border-radius: 7px;
}

/* Indicador de la comunidad activa: es un botón, así que se comporta y se
   lee como tal — lleva al selector. */
.ca-pill {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  background: var(--brand-soft); color: var(--brand-text);
  border: 1px solid transparent; border-radius: 999px;
  padding: 8px 12px; min-height: 38px;
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-pill::after { content: '⌄'; margin-top: -5px; opacity: 0.75; }
.ca-pill:hover { background: var(--brand); color: var(--brand-ink); }
.ca-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ----------------------------- Tabs ----------------------------- */

.tabs {
  position: sticky; top: var(--h-topbar); z-index: 30;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.tabs__scroll {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  max-width: var(--max); margin: 0 auto; padding: 6px 12px;
}
.tabs__scroll::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: var(--tap);
  padding: 0 14px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.tab[aria-selected='true'] { background: var(--brand); color: var(--brand-ink); }
.tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.panel { display: none; padding: 16px 0 64px; }
.panel.is-active { display: block; }

/* Título de página: el único h1. Compacto, para no robarle sitio al
   selector de comunidad, que es lo primero que hay que tocar. */
/* El h1 manda. Antes medía 24 px y el titular editorial que va debajo 29,6:
   la jerarquía estaba del revés y los dos bloques se peleaban pegados el uno
   al otro. Ahora el h1 abre, el titular baja un escalón y entre medias hay
   aire de verdad. */
.page-title {
  font-size: clamp(1.5rem, 5vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 26px 0 0;
  text-wrap: balance;
}
.page-title span {
  display: block;
  font-size: clamp(0.92rem, 2.4vw, 1.02rem);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-top: 9px;
}

/* ----------------------------- Cards ----------------------------- */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 14px;
}
.card__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint);
  margin-bottom: 14px;
}
.card__title .badge { margin-left: auto; text-transform: none; letter-spacing: 0; }

details.card > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint);
  min-height: 28px;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after {
  content: '▾'; margin-left: auto; transition: transform 0.15s; font-size: 14px;
}
details.card[open] > summary::after { transform: rotate(180deg); }
details.card[open] > summary { margin-bottom: 14px; }

/* ----------------------------- Forms ----------------------------- */

.grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field__hint { font-size: 12px; color: var(--ink-faint); line-height: 1.4; }

.control {
  display: flex; align-items: center;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: var(--tap);
  padding: 0 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.control:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.control input,
.control select {
  flex: 1; min-width: 0; width: 100%;
  background: none; border: 0; outline: none;
  color: var(--ink); font: inherit; font-weight: 600;
  padding: 10px 0;
}
.control select { cursor: pointer; appearance: none; }
.control__unit { color: var(--ink-faint); font-size: 14px; font-weight: 600; padding-left: 6px; flex: none; }
.control--select::after {
  content: '▾'; color: var(--ink-faint); font-size: 12px; pointer-events: none;
}

input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--tap); background: none; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: var(--line);
}
input[type='range']::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8.5px;
  border-radius: 50%; background: var(--brand); border: 3px solid var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--bg-elev);
}

/* Segmented control */
.seg {
  display: flex; background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; gap: 3px;
}
.seg button {
  flex: 1; min-height: 38px; border: 0; border-radius: 6px;
  background: none; color: var(--ink-soft);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap; padding: 0 6px;
  /* sin min-width:0 los botones no bajan de su ancho de texto y se salen
     del control en columnas estrechas, pisando lo que tienen al lado */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.seg button[aria-pressed='true'] { background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Checkbox chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 13px; min-height: 40px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--bg-sunken); cursor: pointer; user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.btn {
  min-height: var(--tap); padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--ink);
  font: inherit; font-weight: 650; cursor: pointer;
}
.btn:hover { border-color: var(--brand); color: var(--brand-text); }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { color: var(--brand-ink); filter: brightness(1.08); }
.btn--ghost { background: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------- Resultados --------------------------- */

/* El hero cuenta como dos tarjetas, así que las columnas se eligen para que
   las cuatro métricas siempre cierren filas completas y nunca quede una sola
   tarjeta huérfana en una fila. */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* En móvil quedan 3 tarjetas en 2 columnas: la última ocupa el ancho completo. */
@media (max-width: 619px) {
  .kpi:nth-child(4):last-child,
  .kpi:nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (min-width: 620px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(5, 1fr); } }

.kpi {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-sm);
  min-width: 0;
}
.kpi__label { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-bottom: 4px; }
.kpi__value {
  font-size: clamp(1.35rem, 6vw, 1.9rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1;
}
.kpi__sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.kpi--hero { grid-column: 1 / -1; background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
@media (min-width: 1000px) { .kpi--hero { grid-column: span 2; } }
@media (min-width: 1000px) { .kpi:not(.kpi--hero) .kpi__value { font-size: 1.6rem; } }
.kpi--hero .kpi__label, .kpi--hero .kpi__sub { color: color-mix(in srgb, var(--brand-ink) 78%, transparent); }
.kpi--hero .kpi__value { font-size: clamp(2.1rem, 11vw, 3rem); }

/* Tablas */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 8px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-faint); font-weight: 700; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-elev);
}
tbody tr + tr td { border-top: 1px solid var(--line-soft); }
tbody tr:hover td { background: var(--bg-sunken); }
tfoot td { border-top: 2px solid var(--line); font-weight: 700; }
td.num, th.num { font-variant-numeric: tabular-nums; }

.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line-soft);
}
.row:first-child { border-top: 0; }
.row__label { flex: 1; min-width: 0; color: var(--ink-soft); font-size: 14px; }
.row__value { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row--total { border-top: 2px solid var(--line); padding-top: 12px; margin-top: 4px; font-size: 1.05rem; }
.row--total .row__label { color: var(--ink); font-weight: 650; }
.row--sub .row__label { padding-left: 14px; font-size: 13px; color: var(--ink-faint); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; border-radius: 999px;
  padding: 3px 9px; background: var(--bg-sunken); color: var(--ink-soft);
  white-space: nowrap;
}
.badge--ok { background: var(--accent-soft); color: var(--accent); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--brand { background: var(--brand-soft); color: var(--brand-text); }

.note {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  background: var(--bg-sunken); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 11px 13px; margin-top: 12px;
}
.note--warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.note--ok { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.note b { color: inherit; }

/* Barra de esfuerzo */
.meter { margin-top: 10px; }
.meter__track {
  height: 10px; border-radius: 5px; background: var(--bg-sunken);
  overflow: hidden; position: relative; border: 1px solid var(--line-soft);
}
.meter__fill { height: 100%; border-radius: 5px; transition: width 0.25s ease; }
.meter__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint); margin-top: 5px; }

/* Gráficos SVG */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Comparativa CCAA */
.rank { display: flex; flex-direction: column; gap: 2px; }
.rank__item {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: var(--r-sm); border-top: 1px solid var(--line-soft);
}
.rank__item:first-child { border-top: 0; }
.rank__item--me { background: var(--brand-soft); }
.rank__pos { font-size: 12px; font-weight: 700; color: var(--ink-faint); text-align: right; }
.rank__name { font-weight: 600; font-size: 14px; min-width: 0; }
.rank__bar { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rank__bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.rank__val { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; }
.rank__val small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }

/* ------------------------------ Guía ------------------------------ */

.steps { counter-reset: paso; }
.step { position: relative; padding-left: 44px; padding-bottom: 22px; }
.step::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.step::after {
  content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px;
  width: 2px; background: var(--line);
}
.step:last-child { padding-bottom: 0; }
.step:last-child::after { display: none; }
.step h3 { font-size: 1.05rem; margin-bottom: 3px; }
.step__meta { font-size: 12px; color: var(--ink-faint); margin-bottom: 8px; font-weight: 600; }
.step p { font-size: 14.5px; color: var(--ink-soft); }

.check { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.check li { margin: 0; }
/* La casilla mide 17 px, pero el objetivo real es la etiqueta entera. Con 8 px
   de relleno, una línea sola se quedaba en 36,3 px y no llegaba a los 44:
   entre 500 y 759 px de ancho, donde el texto todavía no envuelve, fallaban
   46 de 55. Con 12 suben a 44,3 sin tocar el tamaño de letra. */
.check label {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 10px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 14px; color: var(--ink-soft); line-height: 1.45;
}
.check label:hover { background: var(--bg-sunken); }
.check input { margin: 3px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--brand); }
.check input:checked + span { color: var(--ink-faint); text-decoration: line-through; }

.faq { border-top: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 13px 0;
  font-weight: 640; font-size: 14.5px;
  display: flex; align-items: flex-start; gap: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--brand-text); font-weight: 700; flex: none; width: 14px; }
.faq[open] summary::before { content: '−'; }
.faq > div { padding: 0 0 14px 24px; font-size: 14px; color: var(--ink-soft); }

.progress-pill {
  margin-left: auto; font-size: 12px; font-weight: 700;
  color: var(--brand-text); background: var(--brand-soft);
  padding: 4px 10px; border-radius: 999px;
}

/* ------------------------- Rediseño · nuevos ------------------------- */

/* Titular editorial de arranque de panel + su nota de apoyo. */
.panel-intro { display: flex; flex-direction: column; gap: 10px; margin: 30px 0 22px; }
.panel-intro .headline { font-size: clamp(1.18rem, 3.6vw, 1.5rem); line-height: 1.25; }
/* Los paneles sin h1 propio no necesitan ese hueco de separación arriba. */
.panel:not(#panel-calc) .panel-intro { margin-top: 26px; }
.panel-intro p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* Selector de comunidad: el control que más cambia el resultado, así que
   se separa de todo lo demás con su propio marco de marca en vez de vivir
   dentro de una tarjeta genérica. */
.picker {
  position: relative; min-height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper-elev); border: 2px solid var(--brand); border-radius: var(--r-hero);
  padding: 10px 16px; margin-bottom: 14px;
}
/* El nombre de la comunidad no se recorta: es el dato que gobierna todo el
   cálculo. Si no cabe en una línea, envuelve y la caja crece. */
.picker__name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
.picker__tag { font-size: 12px; font-weight: 600; color: var(--accent); line-height: 1.35; }
.picker__cta { font-size: 13px; font-weight: 700; color: var(--brand-text); flex-shrink: 0; }
.picker select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 16px; border: 0;
}

/* Bloque de tres pesos: nivel 1 (hero), nivel 2 (filet), nivel 3 (sin caja). */
.hero {
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--r-hero); box-shadow: var(--shadow-hero);
  padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 14px;
}
.hero--flat { border-radius: 0; box-shadow: none; margin: -16px -16px 0; padding: 24px 20px 26px; }
.hero__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero__meta { font-size: 12px; font-weight: 600; opacity: 0.82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__edit {
  min-height: 32px; display: flex; align-items: center; padding: 0 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-ink) 17%, transparent);
  font-size: 11.5px; font-weight: 700; color: inherit; border: 0; cursor: pointer; flex-shrink: 0;
}
.hero__stat + .hero__stat { padding-top: 14px; margin-top: 2px; border-top: 1px solid color-mix(in srgb, var(--brand-ink) 26%, transparent); }
.hero__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.78; }
/* La cifra va con line-height 1 para que no se despegue de sí misma, y eso
   la pegaba a la etiqueta de arriba y al texto de abajo: el aire lo ponen
   estos márgenes, no la interlínea. */
.hero__value {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 12vw, 3.2rem); line-height: 1;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  margin: 12px 0;
}
.hero__sub { font-size: 13px; line-height: 1.5; opacity: 0.88; margin-top: 0; }
@media (min-width: 760px) {
  /* minmax(0,1fr) + tamaño fluido: con 4,5rem fijos el min-content de la
     cifra no cabe en su columna entre 960 y 1023 px y desbordaba la página. */
  .hero--desktop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 28px; padding: 28px 32px; }
  .hero--desktop .hero__row { grid-column: 1 / -1; }
  .hero--desktop .hero__stat { min-width: 0; }
  .hero--desktop .hero__stat + .hero__stat { padding: 0 0 0 28px; margin: 0; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--brand-ink) 26%, transparent); }
  .hero--desktop .hero__value { font-size: clamp(2.2rem, 4.4vw, 4.5rem); }
  /* el primer hijo es .hero__row, así que la primera cifra es la que le sigue */
  .hero--desktop .hero__row + .hero__stat .hero__value { font-size: clamp(2.4rem, 5vw, 5rem); }
}

/* Nivel 2: agrupación con filete superior/inferior, sin caja ni sombra. */
.filet-group { display: flex; flex-direction: column; }
.filet-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
.filet-field { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.filet-field:last-child { border-bottom: 0; }
.filet-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.filet-field__row .headline { font-size: 22px; font-variant-numeric: tabular-nums; }
/* El porcentaje junto al importe de la entrada: la barra sola no dice en qué
   punto estás, y era lo que antes contaban los botones de 20/25/30 %. */
.val-pct {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--ink-soft); margin-left: 4px;
}

/* Chips de selección rápida (entrada, comunidad destacada…) */
.pick-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pick-chip {
  min-height: 36px; display: flex; align-items: center; padding: 0 13px;
  border-radius: var(--r-chip); border: 1px solid var(--rule); background: transparent;
  color: var(--ink-soft); font: inherit; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.pick-chip[aria-pressed='true'] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* Stepper +/- (plazo, TIN…) */
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper__btn {
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--paper-elev); display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--ink-soft); cursor: pointer; padding: 0; line-height: 1;
}
.stepper__btn:hover { border-color: var(--brand); color: var(--brand-text); }
/* "30 años" y "2,70 %" en una sola línea: en la barra lateral de 340 px la
   pareja plazo/TIN deja ~150 px por columna y el valor partía en dos. */
/* El valor es editable: los botones dan el paso grueso (5 años, 0,1 %) y
   escribiendo se llega al valor exacto. Antes eso vivía en dos campos aparte
   del ajuste fino, y al juntarlo todo habrían quedado dos mandos por valor. */
.stepper__val {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stepper__val input {
  width: 100%; min-width: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: right;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper__val input::-webkit-outer-spin-button,
.stepper__val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__val input:focus { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
.stepper__unit { font-size: 14px; font-weight: 600; color: var(--ink-soft); flex: none; }

/* Bloque de acento: "Tu perfil fiscal" dentro de la calculadora. */
.accent-block {
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--r-block); padding: 15px; display: flex; flex-direction: column; gap: 9px;
  margin-bottom: 14px;
}
.accent-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.accent-block__head .eyebrow { color: var(--accent); }
.accent-block__effect { font-size: 12px; font-weight: 700; color: var(--accent); }
.accent-block p { font-size: 13.5px; line-height: 1.5; margin: 0; }

/* Filas-interruptor del perfil fiscal (pantalla dedicada). */
.toggle-rows { display: flex; flex-direction: column; gap: 9px; }
.toggle-row {
  min-height: 64px; display: flex; align-items: center; gap: 13px; cursor: pointer;
  background: var(--paper-elev); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px;
}
.toggle-row.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.toggle-row__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-row__label { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.toggle-row__note { font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.switch {
  width: 46px; height: 28px; border-radius: 999px; background: var(--rule);
  flex-shrink: 0; display: flex; align-items: center; padding: 3px; transition: background 0.15s;
}
.toggle-row.is-on .switch { background: var(--accent); }
.switch__knob { width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); transition: transform 0.15s; }
.toggle-row.is-on .switch__knob { transform: translateX(18px); }

/* Mapa coropleto */
.map-wrap { background: var(--paper-elev); border: 1px solid var(--rule); border-radius: var(--r-block); padding: 10px 8px 8px; margin-bottom: 14px; }
.map-svg { width: 100%; height: auto; display: block; }
.map-svg .rgn { cursor: pointer; }
.map-svg .rgn:hover rect, .map-svg .rgn:hover path { opacity: 0.82; }
.legend-scale { display: flex; align-items: center; gap: 8px; padding: 9px 4px 2px; border-top: 1px solid var(--rule); margin-top: 5px; }
.legend-scale__val { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.legend-scale__bar { flex: 1; display: flex; height: 9px; border-radius: 2px; overflow: hidden; }
.legend-scale__bar span { flex: 1; }

/* Filas de la tabla/ránking de comunidades: swatch en vez de barra. */
.ccaa-row {
  display: grid; grid-template-columns: 1fr 58px 78px; gap: 8px; align-items: center;
  padding: 11px 12px; border-bottom: 1px solid var(--rule-soft); cursor: pointer;
}
.ccaa-row.is-me { background: var(--brand-soft); }
.ccaa-row__name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ccaa-row__swatch { width: 8px; height: 15px; border-radius: 1px; flex-shrink: 0; }
.ccaa-row__label { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccaa-row__rate { font-size: 12.5px; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ccaa-row__total { font-size: 13.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Comparativa "300 km más allá" (más barata / más cara). */
.compare-pair { display: flex; border: 1px solid var(--rule); border-radius: var(--r-block); overflow: hidden; margin-top: 10px; }
.compare-pair > div { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 1px; }
.compare-pair__name { font-size: 11px; font-weight: 700; }
.compare-pair__total { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Par de estadísticas bajo el gráfico de cruce (capital / intereses). */
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.stat-pair > div { display: flex; flex-direction: column; gap: 1px; padding-top: 11px; border-top: 2px solid var(--rule); }
.stat-pair__label { font-size: 11.5px; color: var(--ink-soft); }
.stat-pair__val { font-size: 18.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.cta-link { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--brand-text); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.cta-link:hover { text-decoration: underline; }

/* Progreso de la guía */
.progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.progress-bar__fill { height: 6px; background: var(--accent); border-radius: 999px; transition: width 0.2s ease; }
.progress-row { display: flex; align-items: center; gap: 11px; background: var(--paper-elev); border: 1px solid var(--rule); border-radius: var(--r-block); padding: 12px 14px; margin-bottom: 14px; }
.progress-row__count { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); flex-shrink: 0; }

/* Escritorio: la calculadora pasa de una columna a barra lateral (340px) +
   contenido, como el artboard de escritorio del rediseño. Por debajo del
   corte, .calc-layout__aside y .calc-layout__main simplemente se apilan en
   su orden natural del documento — es la misma vista de móvil. */
@media (min-width: 960px) {
  /* minmax(0,1fr) y no 1fr: el suelo automático de una pista 1fr es su
     min-content, y el contenido de la columna principal (dos tarjetas en
     fila) lo empuja por encima del ancho disponible entre 960 y 1023 px. */
  /* Dos columnas y punto. Hubo una tercera fila a lo ancho para el ajuste
     fino y era una trampa: el bloque contenedor de un `sticky` dentro de un
     grid no es su celda, es el contenedor entero, así que la barra se
     deslizaba sobre esa fila y le tapaba 340 px de campos. Sin fila debajo
     no hay nada sobre lo que deslizarse. */
  .calc-layout {
    display: grid;
    grid-template-columns: 368px minmax(0, 1fr);
    grid-template-areas: 'aside main';
    gap: 36px; align-items: start;
  }
  /* La barra de controles se queda a la vista mientras se leen los resultados:
     así se rellenan los campos sin subir y bajar. Es más alta que la pantalla,
     así que se pega arriba y scrollea por dentro; sin el max-height la parte
     de abajo quedaría fuera de alcance. De paso deja de estirar su fila del
     grid, que era lo que abría el hueco muerto a la derecha. */
  .calc-layout__aside {
    grid-area: aside; border-right: 1px solid var(--rule); padding-right: 28px;
    position: sticky; top: calc(var(--stack) + 14px);
    max-height: calc(100vh - var(--stack) - 28px);
    /* `contain` frenaba la rueda en seco al llegar al final de la barra en vez
       de seguir moviendo la página. Con el ajuste fino dentro son 1898 px
       ocultos: encadenar es lo que se espera. */
    overflow-y: auto; scrollbar-width: thin;

    /* Sombras de scroll: las dos capas `local` son del color del papel y viajan
       con el contenido, tapando la sombra cuando estás en un extremo; las dos
       `scroll` se quedan fijas y son la sombra en sí. Resultado: la pista de
       "queda contenido" aparece y desaparece sola, sin JS. */
    background:
      linear-gradient(var(--paper) 30%, transparent) top / 100% 26px no-repeat local,
      linear-gradient(transparent, var(--paper) 70%) bottom / 100% 26px no-repeat local,
      radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 16%, transparent), transparent)
        top / 100% 11px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 16%, transparent), transparent)
        bottom / 100% 11px no-repeat scroll;
  }
  .calc-layout__main { grid-area: main; }
  /* Las rejillas de .grid--2/--3 responden al ancho del viewport, no al de
     su contenedor, así que dentro de una barra de 340 px partían los campos
     en columnas de 150 y el control segmentado se salía de su caja. */
  .calc-layout__aside .grid--2,
  .calc-layout__aside .grid--3 { grid-template-columns: 1fr; }
}

/* Escritorio: mapa a la izquierda, ránking a la derecha, como en el
   artboard de escritorio de "Comparar comunidades". */
@media (min-width: 900px) {
  .compare-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: start; }
}


/* Los pasos +/- se quedan en 30 px por densidad, pero su zona de toque
   llega a 44. El enlace de texto, igual. */
.stepper__btn { position: relative; }
.stepper__btn::after { content: ''; position: absolute; inset: -7px; }
.cta-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------- Selector de tema ------------------------- *
 * Una ventana: cortinas abiertas (claro), cerradas (oscuro) o a medias
 * (lo que diga el sistema). Un solo botón que rota entre los tres, en vez
 * de tres botones que ocupaban 205 px de cabecera.
 * ------------------------------------------------------------------- */
.tema {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0;
  border: 0; background: none; color: var(--ink-soft);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}
/* Sin marco ni fondo, lo único que decía "esto se pulsa" era el cambio de color
   del texto, y solo si pasabas el ratón por encima. El fondo va en un
   pseudoelemento con inset negativo: da holgura al resaltado sin ensanchar el
   botón, que es lo que movería la píldora de al lado. */
.tema { position: relative; isolation: isolate; }
.tema::before {
  content: ''; position: absolute; inset: -3px -10px; z-index: -1;
  border-radius: 999px; background: transparent;
  transition: background 0.15s ease;
}
.tema:hover { color: var(--ink); }
.tema:hover::before { background: var(--paper-sunken); }
.tema:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.tema__ventana { width: 28px; height: 28px; flex: none; display: block; }
/* Los tres rótulos no miden igual —"Sistema" saca 19 px a "Claro"— y el
   control se ensanchaba al rotar, empujando lo que tiene al lado. Los tres
   comparten celda de rejilla: la celda mide lo que el más ancho y solo se ve
   el que toca, así que el ancho ya no cambia. */
.tema__txt { display: grid; white-space: nowrap; }
.tema__opt { grid-area: 1 / 1; text-align: left; visibility: hidden; }
.tema[data-tema='light'] .tema__opt[data-opt='light'],
.tema[data-tema='dark'] .tema__opt[data-opt='dark'],
.tema[data-tema='system'] .tema__opt[data-opt='system'] { visibility: visible; }

.tema__cristal { fill: var(--cristal); transition: fill 0.3s ease; }
.tema__astro { fill: var(--astro); transition: fill 0.3s ease; }
.tema__parteluz { fill: var(--cristal); filter: brightness(0.82); }
.tema__marco { fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Las cortinas se recogen hacia su lado: transform-box fill-box para que el
   origen sea el borde del propio rectángulo y no el del SVG entero. La tela
   es cálida a propósito: contra un cristal azul es lo único que separa
   "cortina" de "cielo" a 28 px. Los dos paños llevan tono distinto para que
   cerradas se vea la juntura del medio y no un bloque liso. */
.tema__cortina {
  fill: var(--cortina);
  transform-box: fill-box; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.tema__cortina--izq { transform-origin: left center; }
.tema__cortina--der { transform-origin: right center; filter: brightness(0.88); }

.tema { --cortina: #c2a781; }
.tema[data-tema='light'] { --cristal: #9fd2f7; --astro: #f0ae1e; }
.tema[data-tema='light'] .tema__cortina { transform: scaleX(0.13); }

.tema[data-tema='system'] { --cristal: #a9c2dc; --astro: #d6cdbb; }
.tema[data-tema='system'] .tema__cortina { transform: scaleX(0.5); }

.tema[data-tema='dark'] { --cristal: #1d2440; --astro: #97a1c6; }
.tema[data-tema='dark'] .tema__cortina { transform: scaleX(1); }

/* Con la página en oscuro la tela clara deslumbra: se apaga un punto. */
:root[data-theme='dark'] .tema { --cortina: #9c8768; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tema { --cortina: #9c8768; }
}

/* ----------------------------- Extras ----------------------------- */

.disclaimer {
  font-size: 12.5px; color: var(--ink-faint); line-height: 1.55;
  border-top: 1px solid var(--line); padding: 18px 0 34px; margin-top: 22px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: 14px; }

@keyframes destello {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  35% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 32%, transparent); }
}
.destaca { animation: destello 1.1s ease-out 2; }
.muted { color: var(--ink-faint); }
.hidden { display: none !important; }

/* Barra flotante con la cuota en móvil */
.sticky-cuota {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  transform: translateY(110%); transition: transform 0.2s ease;
}
.sticky-cuota.is-visible { transform: none; }
.sticky-cuota__label { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.sticky-cuota__value { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.sticky-cuota__right { margin-left: auto; text-align: right; }
@media (min-width: 760px) { .sticky-cuota { display: none; } }

/* Móvil: la cabecera no cabe en una fila. El logo y el selector de tema se
   quedan arriba y la píldora de comunidad baja a su propia fila, donde de
   paso llega a los 44 px de objetivo táctil. La cabecera deja de ser
   pegajosa —son marca y ajustes, no navegación— y las pestañas, que sí lo
   son, pasan a pegarse arriba del todo. */
@media (max-width: 759px) {
  .topbar { position: static; }
  .topbar__inner { flex-wrap: wrap; row-gap: 10px; }
  /* El rótulo va entero: la ventana ocupa 44 px en vez de los 205 de los tres
     botones, así que caben los dos en la primera fila. */
  .tema { width: 44px; justify-content: center; margin-left: auto; }
  .tema__txt { display: none; }
  .ca-pill {
    order: 3; flex-basis: 100%; max-width: none;
    margin-left: 0; min-height: 44px; justify-content: space-between;
  }
  .tabs { top: 0; }
  .pick-chip, .seg button { min-height: 44px; }
  /* El valor editable del stepper mide 27,9 px por su tipografía; entre los dos
     botones queda como objetivo táctil pequeño. En escritorio no importa. */
  .stepper__val input { min-height: 44px; }
}

@media print {
  .topbar, .tabs, .sticky-cuota, .btn-row { display: none !important; }
  .panel { display: block !important; }
  .card { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}