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

: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:        #16202a;
  --ink-soft:   #4d5d6b;
  --ink-faint:  #5d6b78;
  --paper:      #f2f4f6;
  --surface:    #ffffff;
  --surface-2:  #e8ecef;
  --line:       #d4dade;
  --line-soft:  #e5eaec;

  /* Marca e interacción. Azul tinta, y NO el verde azulado de alquilar: antes
     deslizadores, botones y enlaces iban en el color de una de las dos
     respuestas, así que toda la interfaz «olía» a alquilar y el resultado de
     comprar llegaba en otro color. Lo que se toca no debe llevar el color de
     una opción. */
  --brand:      #304d9c;
  --brand-wash: #e8edf8;
  --on-brand:   #ffffff;

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

  /* Estado */
  --ok:         #2f6437;
  --ok-wash:    #e4efe4;
  --warn:       #8a6414;
  --warn-wash:  #f8efd9;
  /* 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:   #f8e4ed;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-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;

  --r: 6px;
  --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:       #e2e8ec;
    --ink-soft:  #a3b1bc;
    --ink-faint: #92a1ad;
    --paper:     #0e151b;
    --surface:   #161f26;
    --surface-2: #1d2831;
    --line:      #2a3740;
    --line-soft: #212c35;
    --buy:       #dd8759;
    --buy-wash:  #2f2019;
    --rent:      #57abb0;
    --rent-wash: #13272a;
    --brand:     #8ea6ea;
    --brand-wash:#1b2440;
    --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:       #e2e8ec;
  --ink-soft:  #a3b1bc;
  --ink-faint: #92a1ad;
  --paper:     #0e151b;
  --surface:   #161f26;
  --surface-2: #1d2831;
  --line:      #2a3740;
  --line-soft: #212c35;
  --buy:       #dd8759;
  --buy-wash:  #2f2019;
  --rent:      #57abb0;
  --rent-wash: #13272a;
  --brand:     #8ea6ea;
  --brand-wash:#1b2440;
  --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 */
.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 */
.verdict {
  position: sticky;
  top: 0;
  z-index: 20;
  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.compacto .verdict-flag { min-height: 22px; }

.verdict-row { display: flex; align-items: center; gap: 12px; }
.verdict-flag {
  flex: none;
  width: 4px; align-self: stretch; min-height: 42px;
  border-radius: 2px;
  background: var(--ink-faint);
}
.verdict[data-win="compra"]   .verdict-flag { background: var(--buy); }
.verdict[data-win="alquiler"] .verdict-flag { background: var(--rent); }
.verdict[data-win="error"]    .verdict-flag { background: var(--bad); }

.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;
}

/* 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; }
.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; }

.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;              /* área táctil generosa */
  background: transparent;
  margin: 0;
  display: block;
  cursor: pointer;
}
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; }
.alert {
  font-size: var(--fs-sm);
  line-height: 1.45;
  padding: 11px 13px;
  border-radius: var(--r);
  border-left: 3px solid;
}
.alert.critico { background: var(--bad-wash);  border-color: var(--bad);  color: var(--ink); }
.alert.aviso   { background: var(--warn-wash); border-color: var(--warn); 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; }

.metodo-lista { margin: 0; }
.metodo-lista dt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin-top: 16px;
}
.metodo-lista dt:first-child { margin-top: 0; }
.metodo-lista dd {
  margin: 5px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

/* 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-left: 3px solid var(--brand);
  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 { filter: brightness(1.08); }

.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. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px -12px rgba(0,0,0,.3);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
}
.consent-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.consent p { flex: 1; min-width: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-soft); margin: 0; }
.consent .actions { display: flex; gap: 6px; flex: none; }
.consent .btn { min-height: 44px; padding: 0 12px; font-size: var(--fs-sm); }
.consent[hidden] { display: none !important; }

/* -------------------------------------------------------------- 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-flag { transition: background-color .3s, min-height .25s var(--suave); }
.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 { position: static; 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; }

/* ========================================================================
   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 {
  margin: 34px 0 10px;
  max-width: 68ch;
}
.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); }
}