/* =========================================================
   Euros con Cabeza · estilos comunes (móvil primero)
   Las decisiones de diseño están explicadas en DESIGN.md.
   ========================================================= */

/* Tipografías alojadas en la propia web (licencia OFL, ver assets/fonts/).
   No se cargan de ningún servicio externo. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marca */
  --navy: #0F2A43;        /* texto, superficies oscuras, botón de cookies */
  --navy-80: #3A5268;     /* texto secundario */
  --navy-60: #5E7184;     /* pistas, ejes, notas */
  --menta: #2EC4A0;       /* acción principal y curva de crecimiento */
  --menta-osc: #1C7F68;   /* enlaces y texto en menta sobre claro (≥ 4.5:1) */
  --menta-10: #E3F7F1;
  --amarillo: #FFC83D;    /* rotulador: solo la cifra clave y el anillo de foco */
  --amarillo-20: #FFF4D6;
  --rojo: #D64545;
  --rojo-osc: #A42F2F;
  --rojo-10: #FBEAEA;

  /* Neutros (sin tinte cálido) */
  --fondo: #FFFFFF;       /* fondo de página: blanco */
  --gris-10: #F2F3F5;     /* rellenos suaves: hover y elemento actual del menú */
  --blanco: #FFFFFF;      /* superficies: paneles, campos, tablas */
  --gris-05: #F8F9FA;     /* hover de filas */
  --borde: #D8DCE0;
  --borde-suave: #E7E9EC;
  --anuncio: #E6E8EA;

  --f-titulos: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-texto: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radio-s: 10px;        /* campos, botones */
  --radio: 16px;          /* paneles y tablas */
  --ancho: 72rem;
  --gutter: 1rem;
  --alto-cabecera: 0px;
}
@media (min-width: 40rem) { :root { --gutter: 1.5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--navy);
  font: 1.0625rem/1.6 var(--f-texto);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.has-cookie-banner { padding-bottom: 18rem; }
img, svg { max-width: 100%; }

h1, h2, h3 { font-family: var(--f-titulos); font-optical-sizing: auto; margin: 0 0 .5em; color: var(--navy); }
h1 { font-size: clamp(2.1rem, 5.6vw, 3.4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
h3, .h3 { font-size: 1.25rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
p, ul, ol { margin: 0 0 1em; }
a { color: var(--menta-osc); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); text-decoration-thickness: 2px; }
code { font-family: var(--f-mono); font-size: .88em; background: var(--amarillo-20); padding: .05em .3em; border-radius: 4px; }
strong { font-weight: 700; }

/* Cifras alineadas solo en los números grandes (Bricolage). En Schibsted las
   cifras tabulares ensanchan el punto y la coma de miles, así que no se usan. */
.stat dd, .cuenta__fila dd, .tool-card__dato strong { font-variant-numeric: tabular-nums; }

/* Rotulador amarillo: se usa una vez por pantalla, para la cifra que importa */
.marca { background: linear-gradient(transparent 52%, var(--amarillo) 52%, var(--amarillo) 92%, transparent 92%); padding: 0 .1em; color: inherit; white-space: nowrap; }

/* Foco visible y consistente */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 6px var(--amarillo); border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--amarillo); color: var(--navy); padding: .6rem 1rem; font-weight: 700; border-radius: var(--radio-s); }
.skip-link:focus { top: .5rem; }

.container { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 46rem; }
/* Columnas de texto: estrechas, pero alineadas al mismo margen izquierdo que el resto */
.container.prose, .container.narrow { max-width: var(--ancho); }
.container.prose > *, .container.narrow > * { max-width: 44rem; }

/* ---------- Cabecera fija ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); color: var(--navy); border-bottom: 1px solid var(--borde-suave); }
.notice-bar { background: transparent; color: var(--navy-60); font-size: .75rem; font-weight: 500; text-align: center; padding: .35rem var(--gutter); line-height: 1.35; margin: 0; border-bottom: 1px solid var(--borde-suave); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--navy); text-decoration: none; font: 750 1.3rem/1 var(--f-titulos); letter-spacing: -.025em; }
.brand:hover { color: var(--navy); }
/* Logo: assets/logo.svg (versión para fondo claro). Hay también logo-blanco.svg e icono.svg. */
.brand img { display: block; height: 36px; width: auto; flex: none; }
@media (min-width: 52rem) { .brand img { height: 42px; } }
.nav-toggle { display: inline-flex; align-items: center; gap: .4rem; background: transparent; color: var(--navy); border: 1px solid var(--borde); border-radius: var(--radio-s); padding: .45rem .75rem; font: 600 .95rem var(--f-texto); cursor: pointer; }
.nav-toggle:hover { border-color: var(--navy-60); }
.main-nav { display: none; width: 100%; padding: 0 0 .75rem; }
.main-nav.is-open { display: block; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: grid; gap: .1rem; }
.main-nav a { display: block; color: var(--navy); text-decoration: none; padding: .55rem .5rem; border-radius: var(--radio-s); font-weight: 600; }
.main-nav a:hover { background: var(--gris-10); color: var(--navy); }
/* Página o sección actual: texto en navy sobre un fondo gris suave, sin subrayado de color */
.main-nav a[aria-current], .main-nav a[aria-current]:hover { background: var(--gris-10); }
/* Botón al canal de YouTube: mismo tamaño que el resto, con borde para distinguirlo */
.main-nav a.nav-canal { display: flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--navy); }
.main-nav a.nav-canal:hover { background: var(--navy); color: var(--blanco); }
.nav-canal__icono { flex: none; }

/* Submenú de Herramientas: se abre al pasar el ratón o al llegar con el teclado
   (foco dentro); en móvil se muestra siempre dentro del menú. */
.chev { display: none; }
.submenu { padding: 0 0 .25rem 1rem !important; }
.main-nav .submenu a { font-weight: 500; color: var(--navy-80); padding: .45rem .5rem; }
@media (min-width: 52rem) {
  .has-sub { position: relative; }
  .has-sub > a { display: flex; align-items: center; justify-content: center; gap: .35rem; }
  .chev { display: block; flex: none; color: var(--navy-60); transition: transform .15s; }
  .has-sub:hover .chev, .has-sub:focus-within .chev { transform: rotate(180deg); }
  .submenu { display: none; position: absolute; top: calc(100% + .5rem); left: 0; min-width: 14rem; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-s); box-shadow: 0 12px 32px -12px rgba(15,42,67,.22); padding: .35rem !important; z-index: 60; }
  /* Puente invisible para que el ratón no pierda el submenú al bajar */
  .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
  .has-sub:hover > .submenu, .has-sub:focus-within > .submenu { display: grid; gap: .1rem; }
  .main-nav .submenu a { text-align: left; padding: .55rem .75rem; border-radius: 6px; }
}

.header-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

@media (min-width: 52rem) {
  .nav-toggle { display: none; }
  .main-nav { display: block; width: auto; padding: 0; }
  /* Las tres entradas del menú con el mismo ancho */
  .main-nav > ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; }
  .main-nav a { padding: .45rem .9rem; text-align: center; }
  .header-wrap { flex-wrap: nowrap; }
}

/* ---------- Estructura ---------- */
main { display: block; padding-bottom: 4rem; }
.section { padding: 3rem 0; }
@media (min-width: 60rem) { .section { padding: 4.5rem 0; } }
.section + .section { padding-top: 1rem; }
.page-intro { padding: 2.25rem 0 1.25rem; }
.page-intro h1 { max-width: 22ch; }
.page-intro p { font-size: 1.125rem; color: var(--navy-80); max-width: 42rem; }
.breadcrumb { font-size: .875rem; margin-bottom: 1rem; color: var(--navy-60); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.breadcrumb li + li::before { content: "/"; margin-right: .35rem; color: var(--borde); }
.breadcrumb a { color: var(--navy-80); }
.card { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; }
@media (min-width: 40rem) { .card { padding: 2rem; } }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.section-head h2 { margin: 0; }

/* ---------- Formularios ---------- */
.calc-grid { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .calc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; } }
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 30rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .span-2 { grid-column: span 2; }
  /* Campos en la misma fila: la etiqueta, la caja y el error comparten filas
     (subgrid), así las cajas quedan a la misma altura aunque una etiqueta
     lleve pista y la otra no. */
  .form-grid > .field:has(> .input-wrap):not(:has(> .rate-buttons)) { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .form-grid > .field:has(> .input-wrap):not(:has(> .rate-buttons)) > label { align-self: start; }
}
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font: 700 1.25rem/1.25 var(--f-titulos); letter-spacing: -.01em; padding: 0; margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.field .hint { display: block; font-size: .85rem; color: var(--navy-60); font-weight: 400; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap input { width: 100%; }
.input-wrap .unit { position: absolute; right: .8rem; color: var(--navy-60); font-weight: 500; pointer-events: none; }
input[type="text"], input[type="number"], textarea {
  font: 600 1.0625rem var(--f-texto); color: var(--navy); background: var(--blanco);
  border: 1px solid #A7B0B9; border-radius: var(--radio-s); padding: .7rem 2.4rem .7rem .8rem; min-height: 3rem;
}
input:hover { border-color: var(--navy-60); }
/* Cajas de texto: al editarlas, borde navy sin el anillo amarillo general. */
input[type="text"]:focus, input[type="number"]:focus, textarea:focus { outline: 2px solid var(--navy); outline-offset: 0; box-shadow: none; border-color: var(--navy); }
input[aria-invalid="true"] { border-color: var(--rojo); background: var(--rojo-10); }
.field-error { color: var(--rojo-osc); font-size: .875rem; font-weight: 600; margin: .3rem 0 0; }
.field-error::before { content: "⚠ "; }
textarea { width: 100%; padding: .7rem; font: .85rem/1.5 var(--f-mono); min-height: 7rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--navy); }

.rate-buttons { display: flex; gap: .5rem; margin-bottom: .5rem; }
.rate-btn { flex: 1; min-height: 2.6rem; border: 1px solid var(--borde); background: var(--blanco); color: var(--navy); font: 600 1rem var(--f-texto); border-radius: var(--radio-s); cursor: pointer; }
.rate-btn:hover { border-color: var(--navy); }
.rate-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--blanco); }
.rate-btn[aria-pressed="true"]:hover { background: var(--navy-80); }

.hypothesis { background: var(--amarillo-20); border-radius: var(--radio-s); padding: .8rem 1rem; font-size: .9375rem; margin: 1.25rem 0 0; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .6rem 1.3rem; border-radius: var(--radio-s); font: 650 1rem var(--f-texto); cursor: pointer; text-decoration: none; border: 1px solid var(--navy); transition: background-color .15s, border-color .15s; }
.btn--primary { background: var(--menta); color: var(--navy); border-color: var(--menta); }
.btn--primary:hover { background: #25A887; border-color: #25A887; color: var(--navy); }
.btn--secondary { background: transparent; color: var(--navy); }
.btn--secondary:hover { background: var(--blanco); color: var(--navy); }
.btn--small { min-height: 2.5rem; padding: .4rem .9rem; font-size: .9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.actions .btn--primary { flex: 1 1 12rem; }
.status { font-size: .9rem; font-weight: 600; color: var(--menta-osc); min-height: 1.4em; margin: .4rem 0 0; }

/* ---------- Resultados ---------- */
.results:focus { outline: none; }
.results:focus-visible { outline: 3px solid var(--navy); }
.results__summary { color: var(--navy-80); font-size: .95rem; }
.stats { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin: 0 0 1.25rem; }
.stat { background: var(--fondo); border-radius: var(--radio-s); padding: .9rem 1rem; margin: 0; }
.stat dt { font-size: .875rem; font-weight: 500; color: var(--navy-80); }
.stat dd { margin: .2rem 0 0; font: 700 clamp(1.15rem, 4vw, 1.5rem)/1.15 var(--f-titulos); letter-spacing: -.015em; font-variant-numeric: tabular-nums; word-break: break-word; }
.stat small { display: block; font-size: .8rem; color: var(--navy-60); font-weight: 400; margin-top: .25rem; }
.stat--main { grid-column: span 2; background: var(--navy); color: var(--blanco); padding: 1.1rem 1.2rem; }
.stat--main dt, .stat--main small { color: rgba(255,255,255,.82); }
.stat--main dd { font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 750; color: var(--blanco); letter-spacing: -.03em; }
.stat--real { background: var(--amarillo-20); }
.estado { font-weight: 600; color: var(--rojo-osc); }
.estado:empty { display: none; }

/* Avisos de cálculo (comisión > rentabilidad, etc.) */
.calc-warnings { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.calc-warnings li { background: var(--rojo-10); border-left: 4px solid var(--rojo); border-radius: var(--radio-s); padding: .65rem .9rem; font-weight: 600; font-size: .93rem; }
.calc-warnings li::before { content: "⚠ "; color: var(--rojo); }

/* Avisos obligatorios */
.disclaimer { border-left: 4px solid var(--rojo); background: var(--blanco); border-radius: 0 var(--radio-s) var(--radio-s) 0; padding: .8rem 1rem; margin: 1.25rem 0; font-size: .9375rem; box-shadow: inset 0 0 0 1px var(--borde-suave); }
.disclaimer p { margin: 0; }
.disclaimer strong { color: var(--rojo-osc); }

/* ---------- Gráfico ---------- */
.chart { margin: 1rem 0 .25rem; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart svg:focus-visible { outline: 3px solid var(--navy); box-shadow: none; }
.chart__grid line { stroke: var(--borde-suave); stroke-width: 1; }
.chart__label { fill: var(--navy-60); font: 500 12px var(--f-texto); }
.chart__label--axis { font-weight: 600; fill: var(--navy-80); }
.chart__line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--valor { stroke: var(--menta); stroke-width: 3.5; }
.chart__line--aportado { stroke: var(--navy); stroke-dasharray: 7 5; stroke-width: 2; }
.chart__area { fill: var(--menta); opacity: .14; }
.chart__cursor { stroke: var(--navy-60); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__dot--valor { fill: var(--menta); stroke: var(--navy); stroke-width: 2; }
.chart__dot--aportado { fill: var(--blanco); stroke: var(--navy); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .875rem; font-weight: 500; color: var(--navy-80); }
.legend li { display: flex; align-items: center; gap: .45rem; }
.legend .sw { width: 1.6rem; height: 0; border-top: 4px solid var(--menta); }
.legend .sw--aportado { border-top: 2px dashed var(--navy); }
.chart-readout { font-size: .875rem; color: var(--navy-80); min-height: 1.5em; margin: 0; }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); }
.table-wrap:focus-visible { outline: 3px solid var(--navy); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
caption { text-align: left; font: 700 1.05rem var(--f-titulos); padding: .75rem 1rem; }
th, td { padding: .65rem .85rem; text-align: right; border-bottom: 1px solid var(--borde-suave); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--gris-05); font-size: .85rem; font-weight: 600; color: var(--navy-80); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.row-diff th, .row-diff td { background: var(--amarillo-20); font-weight: 700; }
details.year-table { margin-top: 1rem; }
details.year-table summary { cursor: pointer; font-weight: 600; padding: .75rem 1rem; background: var(--fondo); border-radius: var(--radio-s); list-style-position: inside; }
details.year-table[open] summary { margin-bottom: .75rem; }
details.year-table .table-wrap { max-height: 26rem; overflow-y: auto; }
details.year-table thead th { position: sticky; top: 0; }

.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.share-row .status { margin: 0; }

/* Comparador */
.compare-form { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin-bottom: 1rem; }
.compare-form input { padding-right: .8rem; }
.compare-message { background: var(--menta-10); border-left: 4px solid var(--menta); border-radius: 0 var(--radio-s) var(--radio-s) 0; padding: .9rem 1rem; margin: 1rem 0 0; font-size: 1rem; }
.compare-message:empty { display: none; }

/* ---------- Huecos publicitarios ----------
   Ocultos por defecto. Solo aparecen con ADS_ENABLED=true y consentimiento.
   Altura fija reservada = sin saltos de maquetación.
   Fondo gris y borde discontinuo: no deben parecer parte de la calculadora. */
.ad-slot { display: none; }
html[data-ads="on"] .ad-slot { display: block; }
.ad-slot { margin: 3rem auto; max-width: var(--ancho); padding: 0 var(--gutter); clear: both; }
.ad-slot__inner { background: var(--anuncio); border: 1px dashed #A9B0B7; border-radius: var(--radio-s); padding: .5rem; text-align: center; }
.ad-label { display: block; text-align: left; font: 600 .8rem/1 var(--f-texto); color: #4F5A65; margin: 0 0 .5rem; }
.ad-box { display: flex; justify-content: center; align-items: center; overflow: hidden; margin: 0 auto; }
.ad-note { font-size: .78rem; color: #4F5A65; margin: .5rem 0 0; text-align: left; }
.ad-box ins.adsbygoogle { display: inline-block; }
/* (a) banner: 320×100 en móvil, 728×90 en escritorio */
.ad-slot--banner { margin: 1.25rem auto 1.5rem; }
.ad-slot--banner .ad-box { min-height: 100px; }
.ad-slot--banner ins.adsbygoogle { width: 320px; height: 100px; }
@media (min-width: 48rem) { .ad-slot--banner .ad-box { min-height: 90px; } .ad-slot--banner ins.adsbygoogle { width: 728px; height: 90px; } }
/* (b), (c), (d): rectángulo 300×250 */
.ad-slot--rect .ad-box { min-height: 250px; }
.ad-slot--rect ins.adsbygoogle { width: 300px; height: 250px; }
/* Dentro de un artículo, el hueco no se sale de la columna */
.prose .ad-slot { padding: 0; margin: 2.5rem 0; }

/* ---------- Contenido editorial ---------- */
.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose li { margin-bottom: .4rem; }
.formula { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 1rem; font: 500 .95rem/1.7 var(--f-mono); overflow-x: auto; white-space: pre; }
.example { background: var(--menta-10); border-radius: var(--radio-s); padding: 1rem 1.15rem; }
.example ol { padding-left: 1.2rem; margin-bottom: .75rem; }
.toc { border-left: 3px solid var(--menta); padding: .25rem 0 .25rem 1.1rem; }
.toc ol { margin: 0; padding-left: 1.2rem; }

.faq { border-top: 1px solid var(--borde); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { cursor: pointer; font-weight: 600; padding: 1.05rem 2.5rem 1.05rem 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font: 400 1.4rem/1 var(--f-texto); color: var(--navy-60); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--menta-osc); }
.faq details > div { padding: 0 0 1.1rem; color: var(--navy-80); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Listas de herramientas y secciones ----------
   Filas dentro de un panel, no tarjetas sueltas: nombre, para qué sirve
   y, si lo hay, un resultado de ejemplo. */
.cards { list-style: none; padding: 0; margin: 0; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tool-card { position: relative; display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border-top: 1px solid var(--borde-suave); }
.tool-card:first-child { border-top: 0; }
.tool-card h3 { margin: 0; font-size: 1.2rem; }
.tool-card h3 a { color: var(--navy); text-decoration: none; }
.tool-card h3 a::after { content: ""; position: absolute; inset: 0; }
.tool-card h3 a:focus-visible { box-shadow: none; outline: none; }
.tool-card:focus-within { outline: 3px solid var(--navy); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--amarillo); }
.tool-card:hover { background: var(--gris-05); }
.tool-card:hover h3 a { color: var(--menta-osc); }
.tool-card p { margin: 0; color: var(--navy-80); font-size: .9375rem; }
.tool-card .tag { display: none; }
.tool-card__dato { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin-top: .35rem !important; }
.tool-card__dato span { font-size: .85rem; color: var(--navy-60); }
.tool-card__dato strong { font: 700 1.15rem/1.2 var(--f-titulos); color: var(--navy); letter-spacing: -.01em; }
.tool-card--soon { background: transparent; }
.tool-card--soon h3 { color: var(--navy-80); }
.tool-card--soon .tag { display: inline-block; justify-self: start; font-size: .8rem; font-weight: 600; background: var(--amarillo-20); color: #6B4F00; padding: .1rem .5rem; border-radius: 4px; }
.tool-card--soon:hover { background: transparent; }
@media (min-width: 48rem) {
  .tool-card { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 14rem); gap: 1.5rem; align-items: center; padding: 1.25rem 1.5rem; }
  .tool-card h3 { grid-column: 1; grid-row: 1; }
  .tool-card > p { grid-column: 2; grid-row: 1; }
  .tool-card > .tool-card__dato, .tool-card--soon .tag { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; margin-top: 0 !important; }
  .tool-card__dato { display: grid; justify-items: end; gap: .1rem; }
  .tool-card > p:last-child:not(.tool-card__dato) { grid-column: 2 / -1; }
}

/* ---------- Portada ---------- */
.portada-hero { padding: 2.5rem 0 3rem; }
.portada-hero__grid { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .portada-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: center; padding: 1.5rem 0; } }
.portada-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); max-width: 17ch; margin-bottom: .45em; }
.portada-hero__lead { font-size: 1.1875rem; color: var(--navy-80); max-width: 34rem; }
.portada-hero .actions { margin-top: 1.75rem; }
.portada-hero .actions .btn--primary { flex: 0 1 auto; }

/* «La cuenta»: el ejemplo de 22 frente a 32 años, en vivo */
.cuenta { background: var(--blanco); border: 1px solid var(--borde); box-shadow: 0 1px 2px rgba(15,42,67,.04), 0 12px 32px -12px rgba(15,42,67,.12); border-radius: var(--radio); padding: 1.25rem; }
@media (min-width: 40rem) { .cuenta { padding: 1.75rem; } }
.cuenta h2 { font-size: 1.35rem; margin-bottom: .3rem; }
.cuenta__supuesto { font-size: .9375rem; color: var(--navy-80); margin-bottom: 1.1rem; }
.cuenta__filas { margin: 0 0 1rem; display: grid; gap: .1rem; }
.cuenta__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--borde-suave); }
.cuenta__fila dt { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.cuenta__fila dd { margin: 0; font: 750 clamp(1.3rem, 6vw, 2rem)/1 var(--f-titulos); letter-spacing: -.03em; white-space: nowrap; }
@media (max-width: 24rem) { .cuenta { padding: 1rem; } .cuenta__fila dt { font-size: .9rem; } }
.cuenta__sw { width: .9rem; height: .9rem; border-radius: 3px; background: var(--menta); flex: none; }
.cuenta__sw--b { background: var(--navy); }
.cuenta__control { margin: 1.1rem 0 .4rem; }
.cuenta__control label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.cuenta input[type="range"] { width: 100%; accent-color: var(--navy); margin: 0; height: 2rem; cursor: pointer; }
.cuenta__resultado { font-size: 1.0625rem; margin: .5rem 0 .75rem; }
.cuenta__resultado .marca { font-weight: 700; }
.cuenta__nota { font-size: .8125rem; color: var(--navy-60); margin: 0; }
.cuenta__grafico { margin: .25rem 0 .5rem; }
.cuenta__grafico svg { display: block; width: 100%; height: auto; }
.cuenta__grafico .eje { fill: var(--navy-60); font: 500 11px var(--f-texto); }
.cuenta__grafico .base { stroke: var(--borde); stroke-width: 1; }
.cuenta__grafico .area-a { fill: var(--menta); opacity: .16; }
.cuenta__grafico .linea-a { fill: none; stroke: var(--menta); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.cuenta__grafico .linea-b { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; transition: d .25s ease-out; }
.cuenta__grafico .marca-b { stroke: var(--navy-60); stroke-width: 1; stroke-dasharray: 3 3; transition: x1 .25s ease-out, x2 .25s ease-out; }
.no-js .cuenta__grafico, .no-js .cuenta__control { display: none; }

.portada-bloque { padding: 3rem 0; }
@media (min-width: 60rem) { .portada-bloque { padding: 4.5rem 0; } }
.portada-bloque + .portada-bloque { padding-top: 0; }
/* Próximamente: tres columnas de texto, sin cajas */
.proximamente { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .proximamente { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.proximamente li { border-top: 2px solid var(--borde); padding-top: .9rem; color: var(--navy-80); font-size: .9375rem; }
.proximamente strong { display: block; font: 650 1.15rem/1.3 var(--f-titulos); color: var(--navy); margin-bottom: .25rem; }
.sobre { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .sobre { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }
.sobre p { max-width: 36rem; }
.principios { margin: 0; display: grid; gap: 0; align-content: start; border-top: 1px solid var(--borde); }
.principios > div { padding: 1rem 0; border-bottom: 1px solid var(--borde); display: grid; gap: .2rem; }
@media (min-width: 36rem) { .principios > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; } }
.principios dt { font: 700 1.1rem/1.3 var(--f-titulos); }
.principios dd { margin: 0; color: var(--navy-80); }

/* Vídeo con carga al hacer clic */
.video { margin: 1rem 0; }
.video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--navy); border-radius: var(--radio); overflow: hidden; display: grid; place-items: center; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { display: grid; gap: .6rem; place-items: center; background: transparent; border: 0; color: var(--blanco); font: 700 1.05rem var(--f-titulos); cursor: pointer; padding: 1rem; width: 100%; height: 100%; }
.video__play .icon { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--menta); display: grid; place-items: center; }
.video__play:focus-visible { outline: 3px solid var(--amarillo); outline-offset: -6px; box-shadow: none; }
.video__note { font-size: .85rem; color: var(--navy-60); margin: .5rem 0 0; }
.video__placeholder { color: var(--blanco); padding: 1.25rem; text-align: center; margin: 0; }
.video__placeholder code { background: rgba(255,255,255,.15); color: var(--blanco); overflow-wrap: anywhere; }

/* ---------- Pie ---------- */
.site-footer { background: var(--blanco); color: var(--navy-80); border-top: 1px solid var(--borde-suave); padding: 3.5rem 0 2.5rem; font-size: .9375rem; }
.site-footer a, .link-button { color: var(--navy); text-decoration: none; }
.site-footer a:hover, .link-button:hover { color: var(--menta-osc); text-decoration: underline; }
.footer-grid { display: grid; gap: 1.75rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.footer-title { font: 700 1.05rem var(--f-titulos); margin: 0 0 .7rem; color: var(--navy); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.link-button { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; cursor: pointer; }
.footer-bottom { border-top: 1px solid var(--borde-suave); margin-top: 2.5rem; padding-top: 1.1rem; font-size: .8125rem; color: var(--navy-60); }

/* ---------- Banner de cookies ----------
   Barra inferior que NO bloquea la página. Los tres botones son iguales. */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--blanco); color: var(--navy); border-top: 1px solid var(--borde); box-shadow: 0 -8px 30px rgba(15, 42, 67, .14); max-height: 85vh; overflow-y: auto; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--gutter) 1.1rem; }
.cookie-banner__title { font-size: 1.15rem; margin-bottom: .35rem; }
.cookie-banner__title:focus { outline: none; }
.cookie-banner p { font-size: .9rem; margin-bottom: .8rem; }
.cookie-banner__actions { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 36rem) { .cookie-banner__actions { grid-template-columns: repeat(3, 1fr); } }
.btn--cookie { width: 100%; background: var(--navy); color: var(--blanco); border-color: var(--navy); }
.btn--cookie:hover { background: var(--navy-80); border-color: var(--navy-80); color: var(--blanco); }
.cookie-banner__config { border: 1px solid var(--borde); border-radius: var(--radio-s); padding: .75rem 1rem; margin-bottom: .8rem; }
.cookie-banner__config[hidden] { display: none; }
.cookie-cat { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--borde-suave); }
.cookie-cat:last-child { border-bottom: 0; }
.cookie-cat label, .cookie-cat > div { display: grid; gap: .1rem; cursor: pointer; }
.cookie-cat span { font-size: .85rem; color: var(--navy-80); }
.cookie-cat input { width: 1.4rem; height: 1.4rem; flex: none; accent-color: var(--navy); }
.cookie-cat__fixed { font-weight: 700; font-size: .82rem !important; white-space: nowrap; }
#ck-guardar { margin-top: .6rem; }

/* ---------- Páginas legales ---------- */
.legal h2 { margin-top: 2rem; }
.legal table { white-space: normal; display: block; overflow-x: auto; font-size: .875rem; }
.legal th, .legal td { white-space: normal; text-align: left; vertical-align: top; }
.placeholder { background: var(--amarillo-20); padding: 0 .2em; border-radius: 3px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .site-header, .ad-slot, .cookie-banner, .site-footer, .actions, .share-row, .video { display: none !important; } body { background: #fff; } }

/* Ajuste de cabecera: en móvil la fila de marca ocupa todo el ancho y el menú cae debajo */
.header-row { width: 100%; }
@media (min-width: 52rem) { .header-row { width: auto; } }

/* =========================================================
   Calculadoras: versión sobria
   El formulario va sobre el fondo; solo el resultado lleva panel.
   Una cifra grande, el resto en una fila sin fondos de color.
   ========================================================= */
.card:has(> .calc-grid) { background: transparent; border: 0; padding: 0; }
.calc-grid legend { font-size: 1.1rem; margin-bottom: 1.1rem; }

/* «Más opciones»: los supuestos secundarios, plegados */
.mas-opciones { margin-top: 1.25rem; border-top: 1px solid var(--borde); }
.mas-opciones > summary { cursor: pointer; padding: .9rem 0 .2rem; font-weight: 600; font-size: .95rem; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; }
.mas-opciones > summary::-webkit-details-marker { display: none; }
.mas-opciones > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--navy-60); border-radius: 50%; font-size: .9rem; line-height: 1; align-self: center; }
.mas-opciones[open] > summary::before { content: "−"; }
.mas-opciones__resumen { font-weight: 400; font-size: .875rem; color: var(--navy-60); }
.mas-opciones[open] .mas-opciones__resumen { display: none; }
.mas-opciones > .form-grid { padding-top: .9rem; }

.hypothesis { background: none; padding: 0; margin-top: 1rem; font-size: .8125rem; color: var(--navy-60); }
.actions .btn--secondary#ic-reset { border: 0; background: none; min-height: 2.5rem; padding: .4rem .5rem; color: var(--navy-80); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; font-weight: 500; }
.actions .btn--secondary#ic-reset:hover { color: var(--navy); }
/* Con el resultado al lado (escritorio) se recalcula solo mientras escribes:
   el botón «Calcular» sobra. En móvil se mantiene para saltar al resultado. */
@media (min-width: 60rem) {
  .calc-grid form .actions .btn--primary[type="submit"] { display: none; }
  .calc-grid form .actions { margin-top: .75rem; }
}

/* Resultado */
.calc-grid .results { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; }
@media (min-width: 40rem) { .calc-grid .results { padding: 1.75rem 2rem; } }
.results .h3, .results h2 { font-size: 1.1rem; margin-bottom: .35rem; }
.results__summary { font-size: .875rem; color: var(--navy-60); margin-bottom: 1.25rem; }
.stats { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--borde-suave); }
/* Cifras secundarias: lista de filas «etiqueta … cifra» */
.stats .stat, .stats .stat--real { grid-column: 1 / -1 !important; background: none; border-radius: 0; padding: .7rem 0; border-bottom: 1px solid var(--borde-suave); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; }
.stat dt { font-size: .9rem; color: var(--navy-80); }
.stat dd { font-size: 1.15rem; margin: 0; text-align: right; white-space: nowrap; }
.stat small { grid-column: 1 / -1; margin-top: .1rem; }
.stats .stat--main { display: block; grid-column: 1 / -1 !important; background: none; color: var(--navy); padding: 1rem 0 1.1rem; }
.stat--main dt { color: var(--navy-80); font-size: .9rem; }
.stat--main dd { color: var(--navy); font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1; margin-top: .35rem; text-align: left; white-space: normal; }
.stat--main dd::after { content: ""; display: block; width: 2.5rem; height: 4px; background: var(--menta); border-radius: 2px; margin-top: .6rem; }
.stat--main small { color: var(--navy-60); }

.disclaimer { background: none; box-shadow: none; border-left: 2px solid var(--rojo); border-radius: 0; padding: .1rem 0 .1rem .8rem; font-size: .8125rem; color: var(--navy-80); margin: 1.25rem 0; }
.share-row .btn--small { border: 0; background: none; padding: .3rem 0; min-height: 2rem; color: var(--menta-osc); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; font-weight: 600; }
.share-row .btn--small:hover { color: var(--navy); }
details.year-table summary { background: none; padding: .6rem 0; border-top: 1px solid var(--borde-suave); border-radius: 0; font-size: .95rem; }

/* Rentabilidad: una sola fila, la caja y tres atajos discretos al lado */
.field:has(> .rate-buttons) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l l" "i b" "e e"; column-gap: .5rem; align-items: center; }
.field:has(> .rate-buttons) > label { grid-area: l; }
.field:has(> .rate-buttons) > .input-wrap { grid-area: i; }
.field:has(> .rate-buttons) > .field-error { grid-area: e; }
.field > .rate-buttons { grid-area: b; margin: 0; gap: .3rem; }
.rate-btn { flex: none; min-height: 3rem; min-width: 3.1rem; padding: 0 .7rem; border: 1px solid var(--borde-suave); background: var(--blanco); color: var(--navy-80); font-size: .9rem; font-weight: 600; border-radius: var(--radio-s); }
.rate-btn:hover { border-color: var(--navy-60); background: var(--blanco); }
.rate-btn[aria-pressed="true"], .rate-btn[aria-pressed="true"]:hover { background: var(--menta-10); border-color: var(--menta); color: var(--navy); }
.actions .btn--secondary#ic-reset { padding-left: 0; }