/* ─────────────────────────────────────────────────────────────
   WERKENIMPORTS · hoja de estilos

   Minimalismo tipo porsche.com:
     · titulares grandes en peso 400, NO en negrita
     · letter-spacing normal, nada de tracking apretado
     · antracita sobre blanco, sin grises turbios
     · botones en píldora
     · mucho aire entre secciones
   De la marca se conserva: el naranja como único acento y
   TODA CIFRA EN MONOESPACIADA.
   Ver vault/01 Negocio/Identidad visual.md
   ───────────────────────────────────────────────────────────── */

/* Outfit para titulares. La elección no es de catálogo: el logotipo está
   escrito en una geométrica redonda, y ponerle al lado una grotesca angulosa
   hacía que las dos cosas parecieran de empresas distintas. Public Sans para
   el texto, que aguanta el párrafo largo sin llamar la atención. */
@font-face { font-family: Outfit; src: url("fonts/outfit.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Mono; src: url("fonts/jbmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Mono; src: url("fonts/jbmono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --blanco: #ffffff;
  /* El crema sale del propio logotipo sobre fondo claro, y el casi-negro del
     de fondo oscuro. La web se apoya en su marca, no en grises de catálogo. */
  --papel: #faf9f6;
  --antracita: #0d0f11;
  --antracita-2: #171a1e;
  --linea: #e7e4dd;
  --linea-osc: #262a2f;
  --gris: #6a6f77;
  --gris-osc: #9aa1a9;

  /* Dos naranjas, y no es capricho: el vivo sobre blanco da 2,87:1 y no
     llega al mínimo de accesibilidad. Todo naranja que sea TEXTO sobre
     fondo claro usa --naranja-txt (5,2:1). */
  --naranja: #ff6a13;
  --naranja-txt: #c2410c;

  --verde: #1f7a4d;
  --rojo: #c0392b;

  --display: Outfit, ui-rounded, system-ui, sans-serif;
  --texto: "Public Sans", system-ui, -apple-system, sans-serif;
  --cifra: Mono, Menlo, Consolas, monospace;

  --max: 76rem;
  --t: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-largo: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --alto-barra: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--blanco); color: var(--antracita);
  font-family: var(--texto); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--naranja-txt); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }
@media (max-width: 40rem) { .wrap { padding: 0 1.25rem; } }

h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: normal; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.2rem); font-weight: 400; line-height: 1.12; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 400; line-height: 1.18; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.35; }
p { margin: 0 0 1.1rem; max-width: 62ch; }

.eyebrow {
  font-family: var(--cifra); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gris); margin: 0 0 1.4rem;
}
.cifra { font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.lede { font-size: 1.2rem; line-height: 1.5; max-width: 46ch; color: var(--gris); }
.sutil { color: var(--gris); font-size: 0.9rem; }

section { padding: 6rem 0; }
@media (max-width: 48rem) { section { padding: 4rem 0; } }
.papel { background: var(--papel); }
.oscuro { background: var(--antracita); color: var(--blanco); }
.oscuro .lede, .oscuro .sutil, .oscuro .eyebrow { color: var(--gris-osc); }

/* ── Barra superior ─────────────────────────────────────────── */
/* Del mismo tono que el pie: la página queda enmarcada arriba y abajo por el
   mismo negro, y el contenido claro flota entre los dos. */
/* La barra va del mismo color que el hero, exactamente.
   
   Estaba al 88 % con desenfoque por detrás, y sobre el hero —que es
   `--antracita` sólido— eso la dejaba más clara que el fondo: se veía la
   costura justo debajo del menú. Translúcida sólo tiene sentido si por debajo
   pasa algo que merezca la pena entrever, y aquí lo que pasa por debajo es un
   color plano. Sólida, la costura desaparece y sobre las páginas claras se ve
   igual que antes. */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--antracita);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
}
.topbar.scrolled {
  border-bottom-color: var(--linea-osc);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: var(--alto-barra);
}
.brand { display: flex; align-items: center; text-decoration: none; }
/* El logotipo entero, con su coche y su «i» naranja. No hace falta repetir el
   nombre en texto al lado: ya lo lleva dentro. */
/* 1,75rem deja el nombre en unos 13 px, que es donde empieza a leerse
   sin forzar. Por debajo de eso el logotipo es un adorno. */
.brand img { height: 1.75rem; width: auto; display: block; }
.brand:hover img { opacity: 0.85; transition: opacity var(--t); }

.nav { display: flex; gap: 2rem; align-items: center; }
.nav a {
  font-size: 0.92rem; text-decoration: none; color: var(--gris-osc);
  position: relative; transition: color var(--t);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.4rem; height: 1px;
  background: var(--naranja); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t);
}
.nav a:not(.btn):hover { color: var(--blanco); }
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Botones ────────────────────────────────────────────────── */
.acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.25rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.5rem; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--texto); font-size: 0.94rem; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }

/* El naranja de la marca es el color de «haz esto». Sólo hay un botón naranja
   por pantalla: en cuanto hay dos, deja de significar nada. */
.btn-primario { background: var(--naranja); color: #1a0d04; font-weight: 600; }
.btn-primario:hover {
  background: #ff7d30; transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--naranja) 70%, transparent);
}
.btn-secundario { border-color: var(--linea); color: var(--antracita); background: transparent; }
.btn-secundario:hover { border-color: var(--antracita); background: var(--antracita); color: var(--blanco); }

.oscuro .btn-secundario, .hero .btn-secundario, .topbar .btn-secundario {
  border-color: rgba(255,255,255,0.28); color: var(--blanco);
}
.oscuro .btn-secundario:hover, .hero .btn-secundario:hover, .topbar .btn-secundario:hover {
  background: var(--blanco); color: var(--antracita); border-color: var(--blanco);
}
.topbar .btn { padding: 0.55rem 1.15rem; font-size: 0.88rem; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { position: relative; background: var(--antracita); color: var(--blanco); overflow: hidden;
  padding: clamp(5rem, 12vh, 8rem) 0 clamp(4rem, 9vh, 6rem); }
.hero .wrap { position: relative; }
.hero h1 { margin-bottom: 1.8rem; animation: entra 700ms cubic-bezier(0.22,0.61,0.36,1) both; }
.hero .lede { color: #c6cbd1; animation: entra 700ms 100ms cubic-bezier(0.22,0.61,0.36,1) both; }
.hero .acciones { animation: entra 700ms 200ms cubic-bezier(0.22,0.61,0.36,1) both; }
.dato-grande { font-family: var(--cifra); font-weight: 600; color: var(--naranja); }
.dato-grande .pc { font-size: 0.55em; margin-left: 0.06em; }

@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(16px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22,0.61,0.36,1); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Rejilla de contenido ───────────────────────────────────── */
.cols { display: grid; gap: 2.5rem; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cabecera-sec { max-width: 46rem; margin-bottom: 3.5rem; }

.paso { border-top: 1px solid var(--linea); padding-top: 1.25rem; }
.oscuro .paso { border-top-color: var(--linea-osc); }
.paso .num { font-family: var(--cifra); font-size: 0.72rem; color: var(--naranja-txt); letter-spacing: 0.1em; }
.oscuro .paso .num { color: var(--naranja); }
.paso h3 { margin: 0.6rem 0 0.5rem; }
.paso p { font-size: 0.94rem; color: var(--gris); margin: 0; }
.oscuro .paso p { color: var(--gris-osc); }

/* ── Calculadora ────────────────────────────────────────────── */
.calc { display: grid; gap: 2.5rem; grid-template-columns: minmax(0,1fr) minmax(0,22rem); align-items: start; }
@media (max-width: 60rem) { .calc { grid-template-columns: 1fr; } }
.campos { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: 0.8rem; color: var(--gris); }
.campo input, .campo select {
  font: inherit; font-family: var(--cifra); font-size: 0.95rem; padding: 0.7rem 0.85rem;
  border: 1px solid var(--linea); border-radius: 0.5rem; background: var(--blanco);
  color: var(--antracita); transition: border-color var(--t), box-shadow var(--t);
}
.campo input:focus, .campo select:focus {
  outline: none; border-color: var(--naranja-txt); box-shadow: 0 0 0 3px rgba(194,65,12,0.12);
}
.campo .pista { font-size: 0.75rem; color: var(--gris); line-height: 1.4; }

.panel-res { border: 1px solid var(--linea); border-radius: 0.9rem; padding: 1.5rem; background: var(--blanco); }
.res-linea { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.9rem; }
.res-linea span:last-child { font-family: var(--cifra); font-variant-numeric: tabular-nums; }
.res-linea.impuesto span:last-child { color: var(--naranja-txt); font-weight: 600; }
.res-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--antracita); margin-top: 0.9rem; padding-top: 1rem; }
.res-total .k { font-weight: 600; }
.res-total .v { font-family: var(--cifra); font-size: 1.6rem; font-weight: 600; }
.aviso { border-left: 2px solid var(--naranja); background: var(--papel);
  padding: 0.85rem 1rem; border-radius: 0 0.5rem 0.5rem 0; font-size: 0.85rem; line-height: 1.5;
  margin-top: 1rem; color: var(--gris); }
.aviso.malo { border-left-color: var(--rojo); }
.aviso strong { color: var(--antracita); }

/* ── Tarjetas de oportunidad ────────────────────────────────── */
.coches { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.coche { border: 1px solid var(--linea); border-radius: 0.9rem; overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow var(--t), transform var(--t); }
.coche:hover { box-shadow: 0 10px 30px rgba(22,25,29,0.09); transform: translateY(-2px); }
.coche .foto { aspect-ratio: 16/10; width: 100%; object-fit: cover; background: var(--papel);
  display: grid; place-items: center; color: var(--gris); font-family: var(--cifra); font-size: 0.7rem; }
.coche .precios .res-linea { padding: 0.35rem 0; font-size: 0.88rem; }
.coche .precios .res-linea span:last-child { font-family: var(--cifra); }
.coche .ahorro-linea { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--verde);
  border-top: 1px solid var(--linea); padding-top: 0.6rem; }
.coche .ahorro-linea strong { font-family: var(--cifra); font-size: 1rem; }
.coche .cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.coche h3 { font-size: 1.02rem; }
.coche .meta { font-family: var(--cifra); font-size: 0.74rem; color: var(--gris); }
.coche .precios { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--linea); }
.coche .total { font-family: var(--cifra); font-size: 1.15rem; font-weight: 600; }
.etiqueta { display: inline-block; font-family: var(--cifra); font-size: 0.68rem; letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--gris); }

/* ── Preguntas frecuentes ───────────────────────────────────── */
details { border-bottom: 1px solid var(--linea); padding: 1.15rem 0; }
details summary { cursor: pointer; font-family: var(--display); font-size: 1.08rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-family: var(--cifra); color: var(--naranja-txt); flex: none; }
details[open] summary::after { content: "−"; }
details p { margin: 0.9rem 0 0; color: var(--gris); font-size: 0.95rem; }

/* ── Formulario ─────────────────────────────────────────────── */
.form { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.form .campo.ancho { grid-column: 1 / -1; }
.form textarea { font: inherit; font-family: var(--texto); padding: 0.7rem 0.85rem; min-height: 6rem;
  border: 1px solid var(--linea); border-radius: 0.5rem; resize: vertical; }
.form textarea:focus { outline: none; border-color: var(--naranja-txt); box-shadow: 0 0 0 3px rgba(194,65,12,0.12); }
.consentimiento { grid-column: 1/-1; display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.82rem; color: var(--gris); }

/* ── Pie ────────────────────────────────────────────────────── */
footer { background: var(--antracita); color: var(--gris-osc); padding: 4rem 0 2.5rem; font-size: 0.88rem; }
footer a { color: var(--gris-osc); text-decoration: none; }
footer a:hover { color: var(--blanco); }
.pie-cols { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.pie-cols h4 { font-family: var(--cifra); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blanco); margin: 0 0 1rem; font-weight: 400; }
.pie-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pie-abajo { border-top: 1px solid var(--linea-osc); margin-top: 3rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.78rem; }
.marcador { color: var(--naranja); font-family: var(--cifra); font-size: 0.85em; }

.legal { max-width: 48rem; }
.legal h2 { margin-top: 3rem; }
.legal h2:first-of-type { margin-top: 0; }


/* ── Movimiento ─────────────────────────────────────────────────
   Todo lo de aquí se apaga entero con prefers-reduced-motion. Una web que se
   mueve cuando el sistema pide que no se mueva es una web que marea. */

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--t-largo), transform var(--t-largo);
}
.reveal.visible { opacity: 1; transform: none; }

/* Escalonado: los hijos entran uno detrás de otro, no todos de golpe. Seis
   pasos como mucho; a partir de ahí la espera se nota más que el efecto. */
.escalona > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* Parallax: el fondo se mueve más despacio que el contenido. El desplazamiento
   lo escribe el JavaScript en --py, y si no hay JavaScript no pasa nada. */
.parallax { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .parallax { transform: none !important; }
  .btn:hover { transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ── Rótulo de sección ──────────────────────────────────────────
   Sustituye al «eyebrow» en monoespaciada, que sonaba a documentación
   técnica. Ahora es una etiqueta con el naranja de la marca y un filete
   corto delante: se lee como un epígrafe de revista, no como una consola. */
.rotulo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--texto); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.02em; text-transform: none; color: var(--naranja-txt);
  margin: 0 0 0.9rem;
}
.rotulo::before {
  content: ""; width: 1.6rem; height: 2px; background: var(--naranja); border-radius: 2px;
}
.oscuro .rotulo, .hero .rotulo { color: var(--naranja); }

/* Los titulares piden menos aire entre letras: Outfit es una geométrica ancha
   y en titular grande el espaciado por defecto la deja floja. */
.cabecera-sec h2 {
  font-weight: 600; letter-spacing: -0.028em; line-height: 1.06;
  font-size: clamp(2rem, 4.2vw, 3rem);
}

/* ── Tarjetas de confianza ──────────────────────────────────────
   Cuatro, grandes, dentro de su propia caja. Antes eran cuatro bloques de
   texto sueltos con un filete encima y se leían como notas al pie. */
.garantias {
  display: grid; gap: 1.25rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.garantia {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.garantia:hover {
  transform: translateY(-3px); border-color: var(--linea);
  box-shadow: 0 18px 40px -24px rgba(13, 15, 17, 0.35);
}
.garantia .ico {
  width: 2.25rem; height: 2.25rem; margin-bottom: 1.15rem; display: block;
  fill: none; stroke: var(--naranja); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.garantia h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.18rem;
  letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 0.6rem;
}
.garantia p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--gris); }
.garantia strong { color: var(--antracita); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .garantia:hover { transform: none; } }


/* ── Hero ───────────────────────────────────────────────────────
   Fuera la retícula en perspectiva: era ruido abstracto que no decía nada de
   la marca. En su sitio va el coche del propio logotipo, enorme y saliéndose
   por la derecha, con un halo naranja detrás. Es suyo, no hay derechos de
   nadie de por medio, y a ese tamaño el trazo se lee como un dibujo técnico. */
.hero-coche {
  position: absolute; right: -12%; bottom: 8%;
  width: min(78%, 60rem); height: auto;
  opacity: 0.13; pointer-events: none; user-select: none;
  filter: drop-shadow(0 0 60px rgba(255, 106, 19, 0.12));
}
.hero-luz {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 78% 62%,
      color-mix(in srgb, var(--naranja) 16%, transparent) 0%, transparent 68%),
    radial-gradient(70% 60% at 12% 8%, rgba(255,255,255,0.05) 0%, transparent 62%);
}
.hero .wrap { position: relative; z-index: 1; }

@media (max-width: 60rem) {
  /* En móvil el coche compite con el titular en vez de acompañarlo. */
  .hero-coche { right: -28%; bottom: 4%; width: 120%; opacity: 0.08; }
}


/* ── Proceso: la línea que se va llenando ───────────────────────
   Seis fases una debajo de otra, unidas por un raíl que se rellena de naranja
   conforme bajas. El relleno no es decoración: es la barra de progreso de la
   propia lectura, y con ella se entiende de un vistazo que esto es una
   secuencia y no una lista de cosas sueltas. */
.proceso { overflow: hidden; }
.fases {
  position: relative; list-style: none; margin: 3.5rem 0 0; padding: 0;
  display: grid; gap: 2.75rem;
}
.fases-rail {
  position: absolute; left: 1.65rem; top: 1.5rem; bottom: 1.5rem; width: 2px;
  background: var(--linea-osc); border-radius: 2px;
}
.fases-rail i {
  display: block; width: 100%; border-radius: 2px; background: var(--naranja);
  /* --avance lo escribe el JavaScript entre 0 y 1. Sin él se queda a cero y
     la línea se ve gris entera, que es un estado perfectamente digno. */
  height: calc(var(--avance, 0) * 100%);
  transition: height 120ms linear;
}

.fase { position: relative; display: flex; gap: 1.5rem; align-items: flex-start; }
.fase-marca {
  position: relative; z-index: 1; flex: 0 0 3.3rem;
  width: 3.3rem; height: 3.3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--antracita); border: 2px solid var(--linea-osc);
  transition: border-color var(--t-largo), background var(--t-largo);
}
.fase-marca svg {
  width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--gris-osc);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--t-largo);
}
/* Al entrar en pantalla, la fase se enciende. */
.fase.visible .fase-marca { border-color: var(--naranja); }
.fase.visible .fase-marca svg { stroke: var(--naranja); }

.fase-texto { padding-top: 0.35rem; max-width: 42rem; }
.fase-num {
  display: block; font-family: var(--texto); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--naranja);
  margin-bottom: 0.3rem;
}
.fase h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.35rem;
  letter-spacing: -0.02em; margin: 0 0 0.45rem; color: var(--blanco);
}
.fase p { margin: 0; color: var(--gris-osc); font-size: 1rem; line-height: 1.6; }
.fase p strong { color: var(--blanco); font-weight: 600; }

/* Las fases entran desde la izquierda, siguiendo la línea. */
.fase.reveal { transform: translateX(-18px); }
.fase.reveal.visible { transform: none; }

@media (max-width: 40rem) {
  .fases { gap: 2.25rem; }
  .fases-rail { left: 1.35rem; }
  .fase { gap: 1.1rem; }
  .fase-marca { flex-basis: 2.7rem; width: 2.7rem; height: 2.7rem; }
  .fase-marca svg { width: 1.25rem; height: 1.25rem; }
  .fase h3 { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fase.reveal { transform: none; }
  .fases-rail i { height: 100%; transition: none; }
}


/* ── Buscador y resultados ──────────────────────────────────────
   La puerta de datos vive dentro del mismo formulario y aparece al pulsar,
   no antes: pedir el teléfono nada más entrar espanta, pedirlo cuando ya
   quieres ver el resultado no. */
.buscador {
  margin-top: 2.5rem; padding: 2rem; border-radius: 1.25rem;
  background: var(--blanco); border: 1px solid var(--linea);
  box-shadow: 0 20px 50px -40px rgba(13, 15, 17, 0.5);
}
.buscador-campos {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.campo-ancho { grid-column: 1 / -1; }
.buscador .campo { display: grid; gap: 0.4rem; }
.buscador .campo span { font-size: 0.82rem; font-weight: 600; color: var(--gris); }
.buscador input {
  width: 100%; padding: 0.75rem 0.9rem; font: inherit; color: var(--antracita);
  background: var(--papel); border: 1px solid var(--linea); border-radius: 0.65rem;
  transition: border-color var(--t), background var(--t);
}
.buscador input:focus {
  outline: none; border-color: var(--naranja); background: var(--blanco);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--naranja) 18%, transparent);
}
.buscador-puerta {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea);
  animation: entra-puerta 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes entra-puerta { from { opacity: 0; transform: translateY(-8px); } }
.puerta-nota { margin: 0 0 1rem; font-size: 0.92rem; color: var(--gris); }
.puerta-nota strong { color: var(--antracita); }
.buscador-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem;
}
.buscador-aviso { font-size: 0.88rem; color: var(--gris); }

.resultados { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.resultados-titulo { margin: 0; font-size: 1.05rem; color: var(--gris); }
.resultados-titulo strong { color: var(--antracita); }
.resultados-vacio, .resultados-pie {
  margin: 0; font-size: 0.88rem; color: var(--gris); line-height: 1.55;
}

.unidad {
  display: grid; gap: 0; overflow: hidden;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 1.25rem;
}
.unidad-foto { position: relative; background: var(--papel); min-height: 13rem; }
.unidad-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unidad-sinfoto { width: 100%; height: 100%; background: var(--linea); }
.unidad-pos {
  position: absolute; top: 0.85rem; left: 0.85rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--antracita); color: var(--blanco);
  font-family: var(--cifra); font-size: 0.78rem;
}
.unidad-sello {
  position: absolute; top: 0.85rem; right: 0.85rem;
  padding: 0.28rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--antracita) 88%, transparent);
  color: var(--blanco); font-size: 0.7rem; font-weight: 600;
}
.unidad-cuerpo { padding: 1.75rem; min-width: 0; }
.unidad-cuerpo h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -0.018em; margin: 0 0 0.35rem; line-height: 1.3;
}
.unidad-ficha { margin: 0 0 1.1rem; font-size: 0.85rem; color: var(--gris); }

/* El desglose: concepto a la izquierda, importe a la derecha y en cifra fija.
   Es una factura, y se lee como una factura. */
.dl { display: grid; gap: 0.1rem; }
.dl-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px dashed var(--linea); font-size: 0.92rem;
}
.dl-fila small { display: block; font-size: 0.75rem; color: var(--gris); font-weight: 400; }
.dl-fila .cifra { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-bien .cifra { color: var(--verde); font-weight: 600; }
.dl-total {
  border-bottom: 0; border-top: 2px solid var(--antracita);
  margin-top: 0.4rem; padding-top: 0.7rem; font-size: 1.15rem;
}
.dl-hueco {
  padding: 0.5rem 0; font-size: 0.85rem; color: var(--naranja-txt);
  border-bottom: 1px dashed var(--linea);
}

.dl-detalle { margin-top: 0.9rem; }
.dl-detalle summary {
  cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--naranja-txt);
}
.dl-mini {
  margin-top: 0.6rem; padding: 0.9rem 1rem; border-radius: 0.75rem;
  background: var(--papel);
}
.dl-mini .dl-fila { font-size: 0.85rem; padding: 0.35rem 0; }
.dl-fuente { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--gris); line-height: 1.5; }

.unidad-aviso {
  margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; border-radius: 0.65rem;
  background: color-mix(in srgb, var(--naranja) 8%, transparent);
  border-left: 3px solid var(--naranja);
  font-size: 0.85rem; color: var(--gris); line-height: 1.5;
}
.unidad-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.unidad-acciones .btn { padding: 0.65rem 1.2rem; font-size: 0.9rem; }

@media (max-width: 52rem) {
  .unidad { grid-template-columns: 1fr; }
  .unidad-foto { min-height: 11rem; max-height: 15rem; }
  .buscador { padding: 1.5rem; }
}


/* ── Resultados: una unidad por pestaña ─────────────────────────
   Cinco coches en scroll se leen como una lista y se comparan mal. De uno en
   uno, con el desglose siempre en el mismo sitio, la comparación se hace sola:
   cambias de pestaña y el número que te interesa no se ha movido. */
[hidden] { display: none !important; }

.res-cabecera { max-width: 46rem; }
.res-volver { margin: 1.2rem 0 0; font-size: 0.88rem; }
.res-volver a { color: var(--naranja-txt); font-weight: 600; }

/* La espera. Un minuto largo mirando una pantalla quieta es donde se pierde
   la gente, así que se cuenta lo que de verdad está pasando. */
.espera {
  margin-top: 2.5rem; padding: 3rem 2rem; border-radius: 1.25rem;
  background: var(--blanco); border: 1px solid var(--linea); text-align: center;
}
.espera-marca { display: flex; justify-content: center; gap: 0.45rem; margin-bottom: 1.6rem; }
.espera-marca span {
  width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--naranja);
  animation: espera-late 1.1s ease-in-out infinite;
}
.espera-marca span:nth-child(2) { animation-delay: 0.15s; }
.espera-marca span:nth-child(3) { animation-delay: 0.3s; }
@keyframes espera-late {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-0.3rem); }
}
.espera-texto {
  margin: 0 auto 1.4rem; max-width: 32rem;
  font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.015em;
}
.espera-riel {
  height: 0.3rem; max-width: 26rem; margin: 0 auto; border-radius: 999px;
  background: var(--linea); overflow: hidden;
}
.espera-riel i {
  display: block; height: 100%; width: 8%; border-radius: 999px;
  background: var(--naranja); transition: width 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.espera-pie {
  margin: 1.6rem auto 0; max-width: 34rem;
  font-size: 0.82rem; color: var(--gris); line-height: 1.6;
}

.res-aviso {
  margin-top: 2.5rem; padding: 2rem; border-radius: 1.25rem;
  background: var(--blanco); border: 1px solid var(--linea);
}
.res-aviso p { margin: 0; color: var(--gris); line-height: 1.6; }
.res-aviso .acciones { margin-top: 1.4rem; }

/* El riel de pestañas. En móvil no se apila: se desliza, con anclaje, para
   que siga leyéndose como «una unidad cada vez» y no como una lista. */
.pestanas {
  margin-top: 2.5rem; display: flex; gap: 0.6rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 0.5rem; scrollbar-width: thin;
}
.pestana {
  flex: 1 1 0; min-width: 12rem; scroll-snap-align: start;
  display: flex; align-items: center; gap: 0.75rem; text-align: left;
  padding: 0.9rem 1.1rem; border-radius: 0.9rem; cursor: pointer;
  font: inherit; color: var(--gris);
  background: var(--blanco); border: 1px solid var(--linea);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.pestana:hover { border-color: var(--gris-osc); }
.pestana:focus-visible {
  outline: none; border-color: var(--naranja);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--naranja) 18%, transparent);
}
.pestana[aria-selected="true"] {
  background: var(--antracita); border-color: var(--antracita); color: var(--blanco);
}
.pestana-num {
  flex: none; font-family: var(--cifra); font-size: 0.78rem; opacity: 0.55;
}
.pestana-texto { display: grid; gap: 0.15rem; min-width: 0; }
.pestana-tit {
  font-size: 0.85rem; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pestana-cifra {
  font-family: var(--cifra); font-size: 0.9rem; white-space: nowrap;
  color: var(--naranja-txt);
}
.pestana[aria-selected="true"] .pestana-cifra { color: var(--naranja); }
/* Sin CO₂ declarado no hay total cerrado, y la pestaña lo dice antes de
   abrirla. Enseñar una horquilla como si fuera un precio sería mentir. */
.pestana-cifra-parcial { font-size: 0.76rem; color: var(--gris); }
.pestana[aria-selected="true"] .pestana-cifra-parcial { color: var(--gris-osc); }

.res-paneles { margin-top: 1.5rem; }
.res-paneles [role="tabpanel"] { outline: none; }
.res-paneles [role="tabpanel"] > .unidad {
  animation: entra-unidad 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes entra-unidad { from { opacity: 0; transform: translateY(10px); } }

/* Sola en pantalla, la foto se puede permitir el sitio que en una lista no. */
.unidad-sola { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
.unidad-sola .unidad-foto { min-height: 20rem; }
.unidad-sola .unidad-cuerpo { padding: 2.25rem; }

#res-contenido + .resultados-pie, .res-paneles + .resultados-pie {
  margin-top: 1.5rem; max-width: 44rem;
}

@media (max-width: 52rem) {
  .unidad-sola { grid-template-columns: 1fr; }
  .unidad-sola .unidad-foto { min-height: 11rem; max-height: 15rem; }
  .unidad-sola .unidad-cuerpo { padding: 1.75rem; }
  /* Sin tope, un título largo estira la pestaña hasta sacar del riel a las
     demás, y con ellas la pista de que hay más coches que mirar. */
  .pestana { flex: 0 0 auto; min-width: 10.5rem; max-width: 15rem; }
  .espera { padding: 2.25rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .espera-marca span { animation: none; opacity: 0.6; }
  .espera-riel i { transition: none; }
  .res-paneles [role="tabpanel"] > .unidad { animation: none; }
}


/* ── El diálogo de «Quiero esta unidad» ─────────────────────────
   Sobre <dialog> nativo: el foco queda dentro, Esc cierra y el fondo se
   inertiza sin escribir una línea de eso a mano. */
.modal {
  /* Explícito a propósito: el <dialog> modal se centra con `margin: auto`, y
     basta un reset que ponga `margin: 0` a todo para mandarlo a la esquina.
     Le pasó al panel, que sí usa uno. */
  margin: auto;
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 2.5rem; border: 1px solid var(--linea); border-radius: 1.25rem;
  background: var(--blanco); color: var(--antracita);
  box-shadow: 0 40px 90px -50px rgba(13, 15, 17, 0.75);
}
.modal::backdrop { background: rgba(13, 15, 17, 0.55); backdrop-filter: blur(2px); }
/* De dónde salían los catorce píxeles.
   
   El diálogo entra con `transform: translateY(14px)` y `animation-fill-mode:
   both`. Ése es el número: nunca fue el centrado —por eso la desviación era
   siempre catorce exactos y no dependía del contenido, y por eso descartar el
   contenedor y el `dvh` no llevaba a ninguna parte—, era el propio arranque de
   la animación quedándose puesto.
   
   El `100 %` va escrito. Sin él, el relleno `forwards` tiene que apoyarse en
   el fotograma implícito que el navegador sintetiza del estilo del elemento;
   escribirlo deja el estado final atado a `transform: none`, que es el
   centrado, en vez de a lo que el navegador decida sintetizar.
   
   El `backwards` sigue aplicando el estado inicial mientras la animación no
   arranca. Con retardo cero eso es un instante en un navegador normal, pero en
   una pestaña que no pinta —o en una captura del primer fotograma— es lo que
   se ve. Si vuelve a aparecer catorce píxeles abajo de forma permanente, el
   sitio donde mirar es éste, y la salida es mover el contenido de dentro en
   vez del propio diálogo. */
.modal[open] { animation: entra-modal 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes entra-modal {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.modal h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.9rem;
  letter-spacing: -0.02em; line-height: 1.15; margin: 0.4rem 0 0;
}
.modal-cerrar {
  position: absolute; top: 1rem; right: 1.1rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
  color: var(--gris); background: transparent; border: 1px solid transparent;
  transition: background var(--t), color var(--t);
}
.modal-cerrar:hover { background: var(--papel); color: var(--antracita); }
.modal-cerrar:focus-visible {
  outline: none; border-color: var(--naranja);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--naranja) 18%, transparent);
}
/* La unidad, siempre a la vista mientras se rellena: es lo que se está
   pidiendo, y con el diálogo abierto la tarjeta queda tapada. */
.modal-unidad {
  margin: 1rem 0 0; padding: 0.85rem 1rem; border-radius: 0.75rem;
  background: var(--papel); border-left: 3px solid var(--naranja);
  font-size: 0.92rem; line-height: 1.5;
}
.modal .form { margin-top: 1.75rem; }
.modal-nota {
  grid-column: 1 / -1; margin: 0;
  font-size: 0.85rem; color: var(--gris); line-height: 1.6;
}
.modal-nota strong { color: var(--antracita); }
.modal .acciones { grid-column: 1 / -1; margin-top: 0.5rem; }
.modal #quiero-aviso { grid-column: 1 / -1; }

@media (max-width: 40rem) {
  .modal { padding: 2rem 1.25rem; }
  .modal h3 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .modal[open] { animation: none; }
}


/* ── La comparación contra el mercado español ───────────────────
   Va debajo del total y a la vista, no en un desplegable: lo que decide no es
   lo que cuesta traerlo, sino cuánto te ahorras frente a comprarlo aquí. */
.espana {
  margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: 0.85rem;
  background: var(--papel); border: 1px solid var(--linea);
}
.espana .dl-fila { border-bottom: 0; padding: 0 0 0.5rem; }
.espana-veredicto {
  margin: 0.4rem 0 0; padding-top: 0.7rem; border-top: 1px dashed var(--linea);
  font-size: 0.98rem; line-height: 1.5; color: var(--gris);
}
.espana-bien { color: var(--verde); font-weight: 600; }
/* Que no compense se dice con la misma letra que cuando compensa. Un modelo
   donde importar sale caro existe, y callarlo sería vender humo. */
.espana-mal { color: var(--rojo); font-weight: 600; }
.espana .dl-fuente { margin-top: 0.6rem; }
.espana-nada {
  margin: 1.2rem 0 0; font-size: 0.85rem; color: var(--gris); line-height: 1.55;
}

/* ── Iconos y jerarquía del desglose ────────────────────────────────
   Una factura de siete líneas se lee mal en bloque. El icono da un punto de
   anclaje a cada concepto y el ojo salta al que busca. Heredan el color del
   texto: una línea en verde trae su icono en verde sin tocar nada. */
.ico {
  width: 1.05rem; height: 1.05rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.55;
}
.dl-que { display: flex; align-items: flex-start; gap: 0.6rem; min-width: 0; }
.dl-que > span { min-width: 0; }
.dl-que .ico { margin-top: 0.15rem; }

/* La ficha, en pastillas con icono en vez de una ristra de puntos. */
.unidad-ficha { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.ficha-dato {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.55rem; border-radius: 999px;
  background: var(--papel); border: 1px solid var(--linea);
  font-size: 0.78rem; color: var(--gris); white-space: nowrap;
}
.ficha-dato .ico { width: 0.9rem; height: 0.9rem; opacity: 0.7; }

/* El total deja de ser una fila más: es el titular. */
.total-caja {
  margin-top: 1.1rem; padding: 1.1rem 1.2rem; border-radius: 0.9rem;
  background: var(--antracita); color: var(--blanco);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.total-rotulo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.85rem; color: var(--gris-osc);
}
.total-rotulo .ico { opacity: 0.9; }
.total-cifra {
  font-family: var(--cifra); font-size: 1.7rem; letter-spacing: -0.02em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.total-cifra small { opacity: 0.5; margin: 0 0.15rem; }

/* ── El ahorro, que es la cifra que decide ──────────────────────────
   En verde y grande, pero SÓLO cuando de verdad ahorras. Un sobrecoste sale
   en rojo con el mismo tamaño: maquillarlo sería vender humo. */
.unidad-ahorro {
  position: absolute; left: 0.85rem; bottom: 0.85rem;
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.45rem 0.8rem; border-radius: 999px;
  background: var(--verde); color: var(--blanco);
  box-shadow: 0 10px 24px -12px rgba(31, 122, 77, 0.9);
}
.unidad-ahorro .ico { width: 1rem; height: 1rem; opacity: 1; align-self: center; }
.unidad-ahorro b { font-family: var(--cifra); font-size: 1rem; }
.unidad-ahorro small { font-size: 0.7rem; opacity: 0.85; }

.pestana-ahorro {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: var(--cifra); font-size: 0.72rem; color: var(--verde);
}
.pestana-ahorro .ico { width: 0.8rem; height: 0.8rem; opacity: 1; }
.pestana[aria-selected="true"] .pestana-ahorro { color: #5ed39b; }

.espana-veredicto {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.5rem;
}
.espana-veredicto .ico { width: 1.15rem; height: 1.15rem; opacity: 1; align-self: center; }
.espana-veredicto b {
  font-family: var(--cifra); font-size: 1.35rem; letter-spacing: -0.01em;
}
.espana-veredicto span { font-size: 0.92rem; }
.espana-bien, .espana-bien b { color: var(--verde); }
.espana-mal, .espana-mal b { color: var(--rojo); }

@media (max-width: 40rem) {
  .total-cifra { font-size: 1.4rem; }
  .espana-veredicto b { font-size: 1.15rem; }
  .unidad-ahorro { left: 0.6rem; bottom: 0.6rem; padding: 0.35rem 0.65rem; }
}


/* ── Blog ───────────────────────────────────────────────────────
   Las tarjetas de entrada reutilizan la caja de `.garantia` a propósito: la
   página ya tiene un lenguaje y meter una tarjeta distinta para el blog haría
   que pareciera pegada de otra web. */
.entradas {
  display: grid; gap: 1.25rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.entrada {
  display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 1.25rem;
  padding: 1.75rem; text-decoration: none; color: inherit;
  transition: transform var(--t), box-shadow var(--t);
}
.entrada:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(13, 15, 17, 0.35);
}
.entrada h2, .entrada h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.3rem;
  line-height: 1.25; letter-spacing: -0.015em; margin: 0;
}
.entrada p { margin: 0; color: var(--gris); font-size: 0.94rem; line-height: 1.65; }
/* La etiqueta es `inline-block`, pero dentro de un flex en columna se estira de
   lado a lado como cualquier hijo. `align-self` la devuelve a su tamaño. */
.entrada > .etiqueta { align-self: start; }
.entrada-mas { margin-top: auto; color: var(--naranja-txt); font-weight: 500; font-size: 0.9rem; }

/* El cuerpo de un artículo: una columna estrecha y nada más. Un texto largo a
   todo el ancho de la pantalla no se lee, se abandona.
   
   El relleno va aquí porque una entrada es un `<article>`, no una `<section>`,
   y no coge el de arriba. Sin esto el último botón queda pegado al pie. */
.entrada-larga { display: block; padding: 6rem 0; }
@media (max-width: 48rem) { .entrada-larga { padding: 4rem 0; } }
.entrada-larga .wrap { max-width: 46rem; }
.entrada-larga h1 { margin-bottom: 1.2rem; }
.entrada-larga h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.75rem;
  line-height: 1.2; letter-spacing: -0.02em; margin: 3rem 0 1rem;
}
.entrada-larga h3 {
  font-family: var(--display); font-weight: 500; font-size: 1.2rem;
  margin: 2rem 0 0.6rem;
}
.entrada-larga p { line-height: 1.75; margin: 0 0 1.1rem; }
.entrada-larga .rotulo a { color: inherit; }
.entrada-larga .acciones { margin-top: 3rem; }
.entrada-larga .legal { margin-top: 2.5rem; }

.lista-marcada, .lista-fuentes { margin: 0 0 1.4rem; padding-left: 1.1rem; }
.lista-marcada li, .lista-fuentes li { margin-bottom: 0.7rem; line-height: 1.7; }
.lista-fuentes { color: var(--gris); font-size: 0.94rem; }

.pasos-num { margin: 0; padding-left: 1.2rem; }
.pasos-num li { margin-bottom: 0.9rem; line-height: 1.65; }

/* ── Tabla sencilla ─────────────────────────────────────────────
   Para las tablas de texto de los artículos y de financiación. Las de cifras
   del resultado de una cotización tienen las suyas. */
.tabla-simple {
  width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: 0.95rem;
}
.tabla-simple th {
  text-align: left; font-family: var(--display); font-weight: 500; font-size: 0.9rem;
  padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--antracita);
}
.tabla-simple td {
  padding: 0.75rem 0.9rem 0.75rem 0; border-bottom: 1px solid var(--linea);
  line-height: 1.6; vertical-align: top;
}
.tabla-simple td.num {
  font-family: var(--cifra); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; padding-right: 0;
}
.tabla-simple tr:last-child td { border-bottom: 0; }

/* ── Reseñas ────────────────────────────────────────────────────
   La sección va con `hidden` en el HTML y sólo se destapa si hay reseñas
   reales. Ver `src/resenas.ts`. */
.resenas {
  display: grid; gap: 1.25rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.resena {
  margin: 0; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 1.25rem; padding: 1.75rem;
}
.resena blockquote {
  margin: 0 0 1.2rem; padding: 0; font-size: 1.02rem; line-height: 1.7;
}
.resena blockquote::before { content: '«'; color: var(--naranja); }
.resena blockquote::after { content: '»'; color: var(--naranja); }
.resena figcaption { display: flex; flex-direction: column; gap: 0.15rem; }
.resena-quien { font-weight: 600; font-size: 0.94rem; }
.resena-donde { color: var(--gris); font-size: 0.86rem; }


/* ── Financiación ───────────────────────────────────────────────
   El hero de una página interior: el mismo fondo y el mismo aire, pero sin el
   coche de la portada y más bajo. Si ocupara lo mismo que el de la home, lo
   primero que hay que leer quedaría fuera de la pantalla. */
.hero-corto { padding: clamp(3.5rem, 9vh, 5.5rem) 0 clamp(3rem, 7vh, 4.5rem); }
.hero-corto h1 { font-size: clamp(2.4rem, 5.2vw, 3.6rem); }

/* Los campos del simulador respiran: aquí no están dentro de la rejilla de un
   formulario, van uno debajo de otro. */
#simulador .campo { margin-bottom: 1.4rem; }

/* La caja del resultado, en vertical: en el simulador la cifra es el asunto,
   no una línea más de un total. */
#simulador .total-caja {
  flex-direction: column; align-items: flex-start; gap: 0.35rem;
  padding: 1.8rem; margin-top: 0;
}
#simulador .total-cifra { font-size: clamp(2rem, 5vw, 2.8rem); }
#simulador .total-caja .sutil { color: var(--gris-osc); }

/* El deslizador del plazo. Se estiliza a mano porque el de serie no se parece
   en nada de un navegador a otro. */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 0.35rem; border-radius: 999px; background: var(--linea);
  outline: none; margin: 0.6rem 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--naranja); cursor: pointer; border: 0;
  box-shadow: 0 2px 8px -2px rgba(255, 106, 19, 0.7);
}
input[type="range"]::-moz-range-thumb {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--naranja); cursor: pointer; border: 0;
}
input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--naranja) 25%, transparent);
}

/* Las estrellas de una reseña. Las apagadas son las que faltan hasta cinco:
   sin ellas, cuatro estrellas y cinco se distinguen contándolas. */
.resena-estrellas {
  display: block; margin-bottom: 0.7rem; color: var(--naranja);
  letter-spacing: 0.1em; font-size: 0.95rem;
}
.resena-estrellas .apagadas { color: var(--linea); }

/* ── Portadas del blog ──────────────────────────────────────────
   SVG, no fotografía: pesan dos kilobytes, se ven nítidas en cualquier
   pantalla y no prometen un coche concreto. Una foto de archivo de un coche
   que no es nuestro, en una web que vende coches, se lee como si lo fuera. */
.entrada-foto {
  display: block; width: calc(100% + 3.5rem); margin: -1.75rem -1.75rem 0.4rem;
  aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: 1.25rem 1.25rem 0 0; background: var(--antracita);
}
.portada-entrada {
  display: block; width: 100%; height: auto; margin: 2rem 0 0.5rem;
  border-radius: 1rem; background: var(--antracita);
}