/* ============================================================
   RECLAMA — sistema de diseño
   Tono: sobrio pero cálido, fondo negro, acabado editorial de
   despacho privado en vez de ficha técnica. Fraunces + Plus Jakarta
   Sans sustituyen a Newsreader + IBM Plex (rediseño posterior).
   ============================================================ */

:root {
  /* ---------- Paleta ---------- */
  /* Negro cálido y papel. Un único acento de latón para lo importante. */
  --bg: #0E0E0C;
  --surface: #171714;
  --surface-2: #1F1E1A;
  --line: rgba(237, 234, 227, 0.10);
  --line-strong: rgba(237, 234, 227, 0.22);
  --text: #EDEAE3;
  --text-2: #8F8B82;
  --paper: #EDEAE3;
  --ink: #1A1917;
  --ok: #3FA66B;
  --warn: #D39B2A;
  --bad: #D2553F;
  --highlight: rgba(200, 164, 100, 0.28);
  --acento: #C8A464;
  --acento-suave: rgba(200, 164, 100, 0.5);

  /* Tipografía: un serif editorial con carácter para titulares e
     itálicas, una sans humanista (no técnica) para todo lo demás.
     Sin mono decorativo — solo como último recurso en salidas de
     depuración, con la pila de sistema. */
  --fuente-titular: "Fraunces", ui-serif, Georgia, serif;
  --fuente-cuerpo: "Plus Jakarta Sans", system-ui, sans-serif;
  --fuente-mono: ui-monospace, "SF Mono", Consolas, monospace;

  /* Espaciado — base de 8px */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4.5rem;
  --espacio-seccion: clamp(3.5rem, 6vw, 5.5rem);

  /* Forma — radios pequeños, sin degradados ni glows */
  --radio: 6px;
  --radio-chico: 4px;
  --sombra-papel: 0 18px 40px rgba(0, 0, 0, 0.35);

  /* Movimiento */
  --transicion: 180ms cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --ancho-contenido: 1200px;
  --alto-nav: 64px;
}

/* ---------- Reset ---------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Fondo degradado de la página: negro cálido arriba, azul profundo
     abajo. Deliberadamente oscuro y desaturado (no un azul brillante)
     para que el acento dorado y el papel sigan siendo lo que destaca. */
  background: linear-gradient(180deg, #0E0E0C 0%, #0A1018 25%, #0B1526 55%, #0D2036 80%, #0E2C4C 100%);
  color: var(--text);
  font-family: var(--fuente-cuerpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

button { font-family: inherit; }

::selection {
  background: var(--highlight);
  color: var(--text);
}

/* Foco visible siempre (regla 11: accesibilidad) */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ---------- Tipografía ----------
   Titulares en Fraunces (serif editorial con carácter, no un serif
   de sistema genérico). Interfaz y cuerpo en Plus Jakarta Sans —
   humanista, no una tipografía de ingeniería. El mono queda reservado
   a la única salida realmente técnica del sitio (el JSON de depuración). */

h1, h2 {
  font-family: var(--fuente-titular);
  font-weight: 380;
  margin: 0 0 var(--espacio-4);
}

h3, h4 {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--espacio-4);
}

h1 {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.08;
}

h3 { font-size: 1.375rem; }

p, li { max-width: 62ch; }

[class*="tabla"] p, .campo p, .resumen__bloque p { max-width: none; }

.numero-tabular,
.hero__contador strong,
.tarjeta-tipo__dato,
.testimonio__importe,
.resumen__precio,
.wizard__paso-actual {
  font-variant-numeric: tabular-nums;
}

/* Antetítulo editorial: itálica serif discreta en vez de una etiqueta
   mono en mayúsculas — se lee como una nota al margen, no como un
   código de sección. */
.etiqueta-seccion {
  display: block;
  font-family: var(--fuente-titular);
  font-style: italic;
  font-weight: 440;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--acento);
  margin-bottom: var(--espacio-3);
}

.cta-final .etiqueta-seccion {
  text-align: center;
}

/* ---------- Composición: rejilla de 12 columnas ----------
   El titular de sección ocupa todo el ancho de la fila — antes se
   limitaba a 5-7 columnas y dejaba media fila vacía, lo que se leía
   como descuidado en vez de editorial. El resto de usos de .rejilla-12
   (FAQ con barra lateral fija, garantía a dos columnas) sí son
   composiciones a propósito y no cambian. */

.rejilla-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
}

.cabecera-seccion {
  margin-bottom: var(--espacio-6);
}

.cabecera-seccion__titulo,
.cabecera-seccion__titulo--corto {
  grid-column: 1 / -1;
}

p { margin: 0 0 var(--espacio-4); }

.texto-secundario { color: var(--text-2); }

.texto-grande { font-size: 1.125rem; }
.texto-chico { font-size: 0.875rem; }

/* Referencias legales: itálica serif con efecto subrayador (--highlight),
   como si se hubieran marcado a mano sobre el papel. Sin píldora, sin
   fondo propio, sin mono — una nota, no un fragmento de código. */
.pildora-legal {
  font-family: var(--fuente-titular);
  font-style: italic;
  font-weight: 440;
  font-size: 1.02em;
  background: linear-gradient(var(--highlight), var(--highlight)) no-repeat;
  background-position: 0 78%;
  background-size: 100% 40%;
  padding: 0 0.15em;
  color: var(--text);
}

/* ---------- Utilidades de layout ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contenedor {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 769px) {
  .contenedor { padding: 0 3rem; }
}

.seccion {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: var(--espacio-seccion) 1.5rem;
}

@media (min-width: 769px) {
  .seccion { padding: var(--espacio-seccion) 3rem; }
}

/* Reveals: IntersectionObserver los marca visibles (regla 6). Sin JS, quedan visibles igual. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease, transform 500ms ease;
}

.js-reveals-activos .reveal {
  opacity: 0;
  transform: translateY(12px);
}

.js-reveals-activos .reveal--visible {
  opacity: 1;
  transform: none;
}

/* ---------- Banner de modo prueba ---------- */

.banner-modo-prueba {
  background: var(--warn);
  color: var(--ink);
  text-align: center;
  padding: var(--espacio-2) var(--espacio-4);
  font-family: var(--fuente-cuerpo);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Aviso de que faltan los datos del titular (LSSI/RGPD) en .env — solo
   puede aparecer en MODO_PRUEBA, ver config.verificar_titular_configurado().
   Distinto en color de .banner-modo-prueba (--bad, no --warn) para que no se
   confunda con el aviso normal de "modo prueba" y destaque como lo que es:
   esta página no está lista para publicar. */
.banner-titular-pendiente {
  background: var(--bad);
  color: var(--paper);
  text-align: center;
  padding: var(--espacio-3) var(--espacio-4);
  margin-bottom: var(--espacio-6);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  border-radius: var(--radio-chico);
}

/* ---------- Navegación ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}

.cabecera--con-scroll {
  border-bottom-color: var(--line);
}

.nav {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  min-height: var(--alto-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

@media (min-width: 769px) {
  .nav { padding: 0 3rem; }
}

.nav__logo {
  font-family: var(--fuente-titular);
  font-style: italic;
  font-weight: 440;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: var(--espacio-6);
}

.nav__enlaces a:not(.boton) {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transicion);
}

.nav__enlaces a:not(.boton):hover {
  color: var(--text);
}

.nav__cta {
  margin-left: var(--espacio-2);
}

/* Botón de menú (solo visible en móvil): icono + etiqueta visible
   "Menú"/"Cerrar" (data-menu-texto, la cambia app.js), en vez de un icono
   mudo — más claro y en línea con la sobriedad funcional del resto del sitio. */
.nav__menu-toggle {
  display: none;
  align-items: center;
  gap: var(--espacio-2);
  background: transparent;
  border: none;
  padding: var(--espacio-2) 0;
  cursor: pointer;
  color: var(--text);
  font-family: var(--fuente-cuerpo);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.nav__menu-toggle-icono {
  position: relative;
  width: 1.35rem;
  height: 0.9rem;
  flex-shrink: 0;
}

.nav__menu-toggle-icono span,
.nav__menu-toggle-icono::before,
.nav__menu-toggle-icono::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--transicion), opacity var(--transicion);
}

.nav__menu-toggle-icono::before { top: 0; }
.nav__menu-toggle-icono span { top: 0.45rem; }
.nav__menu-toggle-icono::after { top: 0.9rem; }

.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-icono::before {
  transform: translateY(0.45rem) rotate(45deg);
}
.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-icono span {
  opacity: 0;
}
.nav__menu-toggle[aria-expanded="true"] .nav__menu-toggle-icono::after {
  transform: translateY(-0.45rem) rotate(-45deg);
}

/* Menú móvil a pantalla completa (Prompt 5): cubre todo el viewport bajo la
   cabecera, con enlaces grandes fáciles de tocar. html.menu-abierto bloquea
   el scroll del fondo mientras está abierto (lo alterna app.js). */
html.menu-abierto,
html.menu-abierto body {
  overflow: hidden;
}

@media (max-width: 768px) {
  .nav__menu-toggle {
    display: inline-flex;
  }

  .nav__enlaces {
    position: fixed;
    top: var(--alto-nav);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    height: 0;
    overflow: hidden;
    transition: height var(--transicion);
    z-index: 25;
  }

  .nav__enlaces--abierto {
    height: auto;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .nav__enlaces a:not(.boton) {
    padding: var(--espacio-5);
    border-top: 1px solid var(--line);
    font-family: var(--fuente-titular);
    font-weight: 440;
    font-size: 1.3rem;
    color: var(--text);
  }

  .nav__cta {
    margin: var(--espacio-4) var(--espacio-5) var(--espacio-5);
  }
}

/* CTA fijo inferior en móvil, fuera del wizard. Respeta el área segura del
   dispositivo (notch / barra de gestos) — requiere viewport-fit=cover. */
.cta-movil {
  display: none;
}

@media (max-width: 768px) {
  body.tiene-cta-movil {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  body.tiene-cta-movil .cta-movil {
    display: block;
    position: fixed;
    bottom: calc(var(--espacio-4) + env(safe-area-inset-bottom));
    left: calc(var(--espacio-4) + env(safe-area-inset-left));
    right: calc(var(--espacio-4) + env(safe-area-inset-right));
    text-align: center;
    z-index: 40;
    box-shadow: var(--sombra-papel);
  }
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radio-chico);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), opacity var(--transicion);
}

/* Botón principal: blanco papel sobre negro. Sin degradado, sin sombra. */
.boton--primario {
  background: var(--text);
  color: var(--bg);
}

.boton--primario:hover {
  background: var(--paper);
  opacity: 0.85;
}

.boton--secundario {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.boton--secundario:hover {
  border-color: var(--text);
}

.boton--texto {
  background: transparent;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5rem 0.25rem;
}

.boton--texto:hover {
  color: var(--text-2);
}

.boton--bloque {
  display: flex;
  width: 100%;
}

.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: var(--espacio-5);
  transition: border-color var(--transicion), transform var(--transicion);
}

.tarjeta--interactiva:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.tarjeta--seleccionable {
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}

.tarjeta--seleccionada {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}

/* ---------- Tarjetas de estado (verde / ámbar / rojo) ---------- */

.tarjeta-estado {
  display: flex;
  gap: var(--espacio-3);
  align-items: flex-start;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radio-chico);
  padding: var(--espacio-4) var(--espacio-5);
  background: var(--surface);
}

/* Glifo plano (✓ / ! / ×), sin insignia circular de color: el borde
   izquierdo ya lleva el color de estado, no hace falta repetirlo. */
.tarjeta-estado__icono {
  flex-shrink: 0;
  width: 1.1rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
}

.tarjeta-estado__titulo {
  font-weight: 600;
  margin: 0 0 var(--espacio-1);
}

.tarjeta-estado__texto {
  margin: 0;
  color: var(--text-2);
}

.tarjeta-estado--verde {
  border-left-color: var(--ok);
}
.tarjeta-estado--verde .tarjeta-estado__icono {
  color: var(--ok);
}

.tarjeta-estado--ambar {
  border-left-color: var(--warn);
}
.tarjeta-estado--ambar .tarjeta-estado__icono {
  color: var(--warn);
}

.tarjeta-estado--rojo {
  border-left-color: var(--bad);
}
.tarjeta-estado--rojo .tarjeta-estado__icono {
  color: var(--bad);
}

/* ---------- Formularios ---------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-5);
}

.campo label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.campo__ayuda {
  font-size: 0.85rem;
  color: var(--text-2);
  margin: 0;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="number"],
.campo input[type="date"],
.campo select,
.campo textarea {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radio-chico);
  padding: 0.8rem 1rem;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--transicion);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--text-2);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--text);
}

.campo--error input,
.campo--error select,
.campo--error textarea {
  border-color: var(--bad);
}

.campo__error {
  font-size: 0.85rem;
  color: var(--bad);
  margin: 0;
}

/* Opciones cerradas: botones grandes de selección (sección 9) */
.opciones-grandes {
  display: grid;
  gap: var(--espacio-3);
}

.opcion-grande {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding: var(--espacio-4) var(--espacio-5);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radio);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}

.opcion-grande:hover {
  border-color: var(--text-2);
}

.opcion-grande[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--surface-2);
}

.opcion-grande[aria-pressed="true"]::after {
  content: "✓";
  font-family: var(--fuente-cuerpo);
  flex-shrink: 0;
}

/* ---------- Footer ---------- */

.pie {
  border-top: 1px solid var(--line);
  padding: var(--espacio-7) var(--espacio-5);
  color: var(--text-2);
}

.pie__fila {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-4);
}

.pie__marca {
  font-family: var(--fuente-titular);
  font-style: italic;
  font-weight: 440;
  font-size: 1.1rem;
  color: var(--text-2);
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-5);
}

.pie__enlaces a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.9rem;
}

.pie__enlaces a:hover {
  color: var(--text);
}

.pie__disclaimer {
  max-width: var(--ancho-contenido);
  margin: var(--espacio-4) auto 0;
  font-family: var(--fuente-cuerpo);
  font-size: 0.8rem;
  color: var(--text-2);
}

/* ---------- Responsive: mobile-first ya cubierto arriba con min-width implícito ---------- */

@media (min-width: 769px) {
  .opciones-grandes {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

/* ============================================================
   Home (paso 3)
   ============================================================ */

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: var(--espacio-6);
  padding: var(--espacio-7) 0 var(--espacio-6);
  align-items: center;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--espacio-7);
  }
}

/* Tamaño propio, más contenido que el h1 genérico: a 6rem el titular
   partía en 5-6 líneas irregulares. text-wrap:balance reparte las
   líneas de forma pareja en vez de dejar una suelta y corta al final. */
.hero__titular {
  font-size: clamp(2.5rem, 1.7rem + 3.1vw, 4.75rem);
  line-height: 1.08;
  text-wrap: balance;
  margin-bottom: var(--espacio-5);
}

.hero__subtitulo {
  max-width: 34rem;
}

/* En portátiles con la ventana del navegador a su alto real (barra de
   pestañas/marcadores incluida, no a pantalla completa en un monitor
   grande) el titular fluido (clamp con 3.1vw) ya es bastante grande a
   estos anchos y parte en 4 líneas, empujando "pilares" fuera de la
   primera pantalla — igual que en móvil, pero por poca altura en vez de
   por poco ancho. No toca monitores altos (>800px de alto disponible),
   donde ya se ve bien. */
@media (min-width: 900px) and (max-height: 800px) {
  .hero {
    padding: var(--espacio-6) 0 var(--espacio-5);
  }

  .hero__titular {
    font-size: clamp(2.5rem, 1.5rem + 2.4vw, 3.75rem);
  }

  .documento {
    min-height: 18rem;
  }
}

/* En móvil el titular a su tamaño normal parte en 5 líneas y empuja todo
   lo demás (incluida la sección de "pilares" siguiente) fuera de la
   primera pantalla — se reduce aquí para que se vea algo más abajo sin
   necesidad de scroll. */
@media (max-width: 768px) {
  .hero {
    padding: var(--espacio-6) 0 var(--espacio-4);
    gap: var(--espacio-5);
  }

  .hero__titular {
    font-size: 2.1rem;
    margin-bottom: var(--espacio-4);
  }
}

.hero__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-4);
}

.hero__contador {
  display: flex;
  align-items: center;
  gap: var(--espacio-5);
  margin: 0;
}

.hero__contador-dato {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero__contador-cifra {
  font-family: var(--fuente-titular);
  font-size: 1.85rem;
  font-weight: 560;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hero__contador-etiqueta {
  font-family: var(--fuente-cuerpo);
  font-size: 0.8rem;
  color: var(--text-2);
}

.hero__contador-separador {
  width: 1px;
  align-self: stretch;
  background: var(--line-strong);
}

/* ---------- El documento (única animación en bucle permitida, regla 9) ----------
   Hoja de papel con el inicio de una carta de reclamación real (caso ficticio,
   datos genéricos). Rota entre tres asuntos; el sello indica el estado del caso. */

.documento {
  position: relative;
  width: 100%;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: var(--sombra-papel);
  transform: rotate(-1.5deg);
  max-width: 27rem;
  min-height: 23rem;
  margin: 0 auto;
  /* El contenido de .documento__hoja (~443px a 375px de ancho) ya excedía
     la altura de la tarjeta antes de este cambio — solo no se notaba
     porque quedaba fuera de la pantalla. Sin esto, al reducir la altura
     en móvil (ver media queries más abajo) el texto se desborda visible
     y sin recortar. */
  overflow: hidden;
}

@media (max-width: 899px) {
  .documento {
    transform: none;
    max-width: 100%;
    min-height: 20rem;
  }
}

/* En móvil esta ilustración decorativa por sí sola mide más que media
   pantalla y es la principal responsable de empujar la sección de
   "pilares" siguiente fuera de la vista inicial (ver .hero__titular más
   arriba, mismo motivo). */
@media (max-width: 768px) {
  .documento {
    min-height: 13rem;
  }
}

.documento__hoja {
  position: absolute;
  inset: 0;
  padding: 2.25rem 2rem;
  color: var(--ink);
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

.documento__hoja--activa {
  opacity: 1;
  pointer-events: auto;
}

.documento__remitente {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.5rem;
}

.documento__linea {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(26, 25, 23, 0.55);
}

.documento__linea--nombre {
  color: var(--ink);
  font-weight: 600;
}

.documento__fecha {
  font-size: 0.78rem;
  color: rgba(26, 25, 23, 0.55);
  margin: 0 0 1.5rem;
}

.documento__asunto {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}

.documento__cuerpo {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(26, 25, 23, 0.85);
  margin: 0 0 1.4rem;
}

/* Referencia legal sobre papel: el mismo subrayador, pero con tinta oscura */
.documento__hoja .pildora-legal {
  color: var(--ink);
}

.documento__barra {
  height: 0.5rem;
  background: rgba(26, 25, 23, 0.12);
  border-radius: 2px;
  margin-bottom: 0.6rem;
}

.documento__sello {
  position: absolute;
  right: 1.75rem;
  bottom: 1.75rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  transform: rotate(-8deg);
  animation: documentoSelloCae 220ms ease-out;
}

@keyframes documentoSelloCae {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(1.15);
  }
  to {
    opacity: 0.9;
    transform: rotate(-8deg) scale(1);
  }
}

.documento__sello--rojo { color: var(--bad); }
.documento__sello--ambar { color: var(--warn); }
.documento__sello--verde { color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .documento__hoja { transition: none; }
  .documento__sello { animation: none; }
}

/* ---------- Movimiento reducido, cobertura general (Prompt 7) ----------
   Lo de arriba cubre el documento de la hero. El resto de animación del
   sitio no es en bucle, pero tampoco la pide el usuario (reveals al hacer
   scroll, entrada de pantalla del wizard, el sello del resumen): con
   prefers-reduced-motion aparece todo de golpe, sin desplazamientos. Las
   transiciones de color/borde en hover y focus se conservan: son
   respuesta directa a una acción, no movimiento no solicitado. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
  }

  .js-reveals-activos .reveal {
    opacity: 1;
    transform: none;
  }

  .wizard__pantalla--entrando {
    animation: none;
  }

  .paso-revelado {
    transition: none;
  }

  .paso-revelado--visible {
    animation: none;
  }

  .documento-resumen__sello {
    animation: none;
  }

  .tarjeta--interactiva:hover {
    transform: none;
  }

  .indice-tipos__fila:hover .indice-tipos__flecha {
    transform: none;
  }
}

/* ---------- Cómo funciona (3 pasos) ---------- */

.pasos {
  display: grid;
  gap: var(--espacio-6);
}

@media (min-width: 769px) {
  .pasos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.paso__numero {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  color: var(--text);
  font-size: 0.85rem;
  margin-bottom: var(--espacio-2);
}

/* ---------- Pilares de confianza (bajo la hero) ----------
   Tres afirmaciones cortas y verificables, no insignias ni sellos de
   confianza inventados — la credibilidad viene de ser concretos. */

.pilares {
  padding: var(--espacio-6) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pilares__fila {
  display: grid;
  gap: var(--espacio-6);
}

@media (min-width: 769px) {
  .pilares__fila {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-7);
  }
}

.pilar h3 {
  font-size: 1.1rem;
  margin-bottom: var(--espacio-2);
}

/* ---------- Respaldo legal: la norma exacta detrás de cada tipo ---------- */

.respaldo-legal {
  border-top: 1px solid var(--line);
}

.respaldo-legal__fila {
  display: grid;
  gap: var(--espacio-2) var(--espacio-6);
  padding: var(--espacio-5) 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) and (max-width: 768px) {
  .respaldo-legal__fila {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
  }
}

/* A partir de aquí las 3 normas se leen en paralelo (una por columna) en
   vez de una fila entera por norma — misma información, un tercio del
   alto. */
@media (min-width: 769px) {
  .respaldo-legal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--espacio-7);
  }

  .respaldo-legal__fila {
    padding: var(--espacio-6) 0 0;
    border-bottom: none;
  }
}

.respaldo-legal__tipo {
  font-family: var(--fuente-titular);
  font-weight: 560;
  font-size: 1.3rem;
}

.respaldo-legal__texto {
  color: var(--text-2);
  margin: 0;
}

/* ---------- Qué puedes reclamar: filas tipo índice de libro (Prompt 4) ---------- */

.indice-tipos {
  border-top: 1px solid var(--line);
}

.indice-tipos__fila {
  display: grid;
  grid-template-columns: 2rem 1fr;
  grid-template-areas:
    "num nombre"
    "desc desc"
    "dato dato";
  row-gap: var(--espacio-2);
  column-gap: var(--espacio-4);
  padding: var(--espacio-5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicion);
}

.indice-tipos__fila:hover {
  border-color: var(--line-strong);
}

.indice-tipos__fila:hover .indice-tipos__flecha {
  transform: translateX(4px);
}

.indice-tipos__num {
  grid-area: num;
  font-family: var(--fuente-cuerpo);
  font-size: 0.75rem;
  color: var(--text-2);
  padding-top: 0.3em;
}

.indice-tipos__nombre {
  grid-area: nombre;
  font-family: var(--fuente-titular);
  font-weight: 440;
  font-size: 1.5rem;
}

.indice-tipos__desc {
  grid-area: desc;
  margin: 0;
}

.indice-tipos__dato {
  grid-area: dato;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-family: var(--fuente-cuerpo);
  font-size: 0.85rem;
  color: var(--text-2);
}

.indice-tipos__flecha {
  color: var(--text);
  transition: transform var(--transicion);
}

/* A partir de aquí los 3 tipos se leen en paralelo, como tarjetas, en vez
   de una fila horizontal entera por tipo — misma información, mucho
   menos alto. */
@media (min-width: 769px) {
  .indice-tipos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-6);
    border-top: none;
  }

  .indice-tipos__fila {
    grid-template-columns: 2rem 1fr;
    grid-template-areas:
      "num nombre"
      "desc desc"
      "dato dato";
    align-items: start;
    row-gap: var(--espacio-2);
    padding: var(--espacio-5);
    border: 1px solid var(--line);
    border-radius: var(--radio);
  }

  .indice-tipos__fila:hover {
    background: var(--surface);
  }

  .indice-tipos__desc {
    padding-right: 0;
  }

  .indice-tipos__dato {
    justify-content: flex-start;
    white-space: normal;
  }
}

/* ---------- Selector de tipo del wizard (pantalla 1, Prompt 6) ----------
   Lista vertical de opciones grandes — la misma pregunta de formulario que
   .opcion-grande, no una vitrina de producto con tarjetas en rejilla. */

.tarjetas-tipo {
  display: grid;
  gap: var(--espacio-3);
}

.tarjeta-tipo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-4) var(--espacio-5);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transicion);
}

.tarjeta-tipo:hover,
.tarjeta-tipo:focus-visible {
  border-color: var(--text-2);
}

.tarjeta-tipo h3 {
  margin-bottom: 0;
}

.tarjeta-tipo__dato {
  font-family: var(--fuente-cuerpo);
  color: var(--text-2);
  font-size: 0.85rem;
}

/* ---------- Tabla comparativa ---------- */

/* La tabla es su propio panel sobre el fondo degradado de la página
   (antes se fundía con él) y usa líneas verticales + una columna
   RECLAMA claramente distinta para que cada concepto se lea de un
   vistazo, en vez de depender solo de leer el texto de cada celda. */
.tabla-comparativa-contenedor {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radio);
}

.tabla-comparativa {
  width: 100%;
  border-collapse: collapse;
  min-width: 40rem;
}

.tabla-comparativa th,
.tabla-comparativa td {
  padding: var(--espacio-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  font-size: 0.95rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabla-comparativa th:first-child,
.tabla-comparativa td:first-child {
  border-left: none;
}

.tabla-comparativa tbody tr:last-child td {
  border-bottom: none;
}

.tabla-comparativa thead th {
  font-family: var(--fuente-cuerpo);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
}

/* Columna destacada: la opción recomendada lleva un remate dorado
   arriba y un fondo propio, para que se distinga sin leer nada. */
.tabla-comparativa .columna-reclama {
  background: rgba(200, 164, 100, 0.08);
  color: var(--text);
  font-weight: 700;
}

.tabla-comparativa th.columna-reclama {
  color: var(--acento);
  background: rgba(200, 164, 100, 0.14);
  box-shadow: inset 0 2px 0 var(--acento);
}

.tabla-comparativa__si { color: var(--ok); font-weight: 700; }
.tabla-comparativa__no { color: var(--text-2); }

/* Primera columna fija al desplazar la tabla horizontalmente en móvil. */
.tabla-comparativa th:first-child,
.tabla-comparativa td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  color: var(--text-2);
  white-space: normal;
}

.tabla-comparativa thead th:first-child {
  background: var(--surface-2);
}

/* ---------- Testimonios (oculto salvo MOSTRAR_TESTIMONIOS) ---------- */

.testimonios {
  display: grid;
  gap: var(--espacio-5);
}

@media (min-width: 769px) {
  .testimonios {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonio__importe {
  font-family: var(--fuente-cuerpo);
  color: var(--ok);
  font-size: 0.85rem;
}

/* ---------- Garantía: bloque a dos columnas, cifra + texto (Prompt 4) ----------
   Sin caja ni sombra: la separación es una regla horizontal, igual que el
   resto de la página. La cifra usa mono/tabular, como el contador de la hero. */

.garantia {
  padding-top: var(--espacio-6);
  padding-bottom: var(--espacio-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-items: center;
  row-gap: var(--espacio-5);
}

.garantia__cifra {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--espacio-3);
}

.garantia__numero {
  font-family: var(--fuente-titular);
  font-weight: 560;
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 1;
}

.garantia__unidad {
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  color: var(--text-2);
}

.garantia__texto {
  grid-column: 1 / -1;
}

@media (min-width: 769px) {
  .garantia__cifra {
    grid-column: 1 / span 4;
  }

  .garantia__texto {
    grid-column: 6 / span 7;
  }
}

/* ---------- Acordeón (FAQ) ---------- */

.acordeon {
  border-top: 1px solid var(--line);
}

.acordeon__item {
  border-bottom: 1px solid var(--line);
}

.acordeon__boton {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-4);
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: var(--espacio-4) 0;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.acordeon__icono {
  flex-shrink: 0;
  color: var(--text);
  transition: transform var(--transicion);
  font-size: 1.2rem;
  line-height: 1;
}

.acordeon__boton[aria-expanded="true"] .acordeon__icono {
  transform: rotate(45deg);
}

.acordeon__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicion);
}

.acordeon__panel-interior {
  padding: 0 0 var(--espacio-4);
  color: var(--text-2);
}

/* ---------- FAQ del Home: cabecera fija en dos columnas (Prompt 4) ----------
   Se apoya en .rejilla-12; no toca .acordeon, que sigue siendo el mismo
   componente que usa la página de Preguntas frecuentes. */

.faq-layout__cabecera {
  grid-column: 1 / -1;
  margin-bottom: var(--espacio-6);
}

.faq-layout__lista {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .faq-layout__cabecera {
    grid-column: 1 / span 4;
    align-self: start;
    position: sticky;
    top: calc(var(--alto-nav) + var(--espacio-6));
    margin-bottom: 0;
  }

  .faq-layout__lista {
    grid-column: 6 / span 7;
  }
}

/* ---------- CTA final ---------- */

.cta-final {
  text-align: center;
  padding: var(--espacio-7) var(--espacio-5);
  border-top: 1px solid var(--line);
}

.cta-final .boton {
  margin-top: var(--espacio-5);
}

/* ============================================================
   Páginas secundarias (paso 4)
   ============================================================ */

/* Cómo funciona: bloque de proceso por tipo */

.proceso-tipo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  margin-bottom: var(--espacio-6);
}

.proceso-tipo__pasos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  font-family: var(--fuente-cuerpo);
  font-size: 0.85rem;
  color: var(--text);
}

.proceso-tipo__flecha {
  color: var(--text-2);
}

/* Preguntas frecuentes: categorías */

.categoria-faq {
  margin-bottom: var(--espacio-6);
}

.categoria-faq__titulo {
  font-family: var(--fuente-titular);
  font-style: italic;
  font-weight: 440;
  color: var(--acento);
  font-size: 1.05rem;
  margin-bottom: var(--espacio-3);
}

/* Aviso legal / Privacidad: huecos pendientes de rellenar */

.marcador-pendiente {
  display: inline-block;
  background: rgba(211, 155, 42, 0.15);
  color: var(--warn);
  border: 1px solid rgba(211, 155, 42, 0.35);
  border-radius: 0.25em;
  padding: 0.05em 0.4em;
  font-family: var(--fuente-cuerpo);
  font-size: 0.85em;
}

.texto-legal h2 {
  margin-top: var(--espacio-6);
}

.texto-legal h2:first-of-type {
  margin-top: 0;
}

.texto-legal ol,
.texto-legal ul {
  color: var(--text-2);
  padding-left: 1.25em;
}

.texto-legal li {
  margin-bottom: var(--espacio-2);
}

/* ============================================================
   Wizard /reclamar (paso 5)
   ============================================================ */

.wizard {
  max-width: 38rem;
  margin: 0 auto;
  padding: var(--espacio-6) var(--espacio-5) var(--espacio-8);
  min-height: calc(100vh - var(--alto-nav));
  display: flex;
  flex-direction: column;
}

/* Barra de progreso plana, sin cápsula: un formulario se lee, no se celebra. */
.wizard__progreso {
  height: 2px;
  background: var(--line);
  margin-bottom: var(--espacio-2);
}

.wizard__progreso-barra {
  height: 100%;
  background: var(--text);
  width: 16.6667%;
  transition: width 300ms ease;
}

.wizard__paso-actual {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: 0.75rem;
  color: var(--text-2);
  letter-spacing: 0.02em;
  margin-bottom: var(--espacio-7);
}

.wizard__pantalla {
  flex: 1;
}

.wizard__pantalla[hidden] {
  display: none;
}

.wizard__pantalla--entrando {
  animation: wizardEntrada 320ms ease;
}

@keyframes wizardEntrada {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Título de pantalla más calmado que un h1 de portada: aquí hay que
   responder una pregunta, no impresionar. */
.wizard__titulo {
  font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.25rem);
  margin-bottom: var(--espacio-6);
}

/* Selector de tipo (pantalla 1): lista vertical de opciones grandes, con el
   mismo lenguaje que .opcion-grande — es una pregunta de formulario más,
   no una vitrina de producto. */

.tarjeta-tipo-boton {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  text-align: left;
  font-family: inherit;
  width: 100%;
}

/* Navegación inferior del wizard */

.wizard__navegacion {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-4);
  margin-top: var(--espacio-7);
  padding-top: var(--espacio-5);
  border-top: 1px solid var(--line);
}

.wizard__navegacion[hidden] {
  display: none;
}

.wizard__navegacion .boton {
  min-width: 8rem;
}

.wizard__navegacion .boton[hidden] {
  display: none;
}

/* Empuja el botón "Siguiente" a la derecha si "Atrás" está oculto */
.wizard__navegacion:has(.boton[hidden]) {
  justify-content: flex-end;
}

/* ============================================================
   Resumen, pago simulado y confirmación (paso 9)
   ============================================================ */

.resumen__bloque {
  margin-bottom: var(--espacio-6);
}

.resumen__bloque h3 {
  display: inline-block;
  margin-bottom: var(--espacio-2);
}

.boton-editar {
  margin-left: var(--espacio-3);
}

.resumen__precio {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: var(--espacio-6);
}

/* ---------- Resumen como documento de papel (Prompt 6) ----------
   El contenido de #data-resumen-contenedor lo sigue generando formulario.js
   sin cambios (.resumen__bloque, .tarjeta-estado, .tarjeta, .resumen__precio…);
   aquí solo se envuelve en el mismo papel/tinta de la hoja de la hero y se
   reajustan esos mismos componentes para leerse sobre fondo claro. El sello
   (misma pieza visual que .documento__sello) se elige con :has() según qué
   tarjeta-estado--{rojo|ambar|verde} haya generado el JS para la fortaleza
   del caso — sin que formulario.js necesite saber que el sello existe. */

.documento-resumen {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  box-shadow: var(--sombra-papel);
  /* Padding superior extra: dejar sitio limpio al sello en la esquina,
     como el margen superior de una carta antes del membrete. */
  padding: var(--espacio-8) var(--espacio-5) var(--espacio-6);
  overflow: hidden;
}

@media (min-width: 640px) {
  .documento-resumen {
    padding: var(--espacio-8) var(--espacio-7) var(--espacio-7);
  }
}

.documento-resumen h3 {
  color: var(--ink);
}

.documento-resumen .texto-secundario,
.documento-resumen .tarjeta-estado__texto,
.documento-resumen li {
  color: rgba(26, 25, 23, 0.65);
}

.documento-resumen .resumen__precio {
  color: var(--ink);
  border-top: 1px solid rgba(26, 25, 23, 0.16);
  padding-top: var(--espacio-5);
}

.documento-resumen .tarjeta-estado,
.documento-resumen .tarjeta {
  background: rgba(26, 25, 23, 0.04);
  border-color: rgba(26, 25, 23, 0.14);
}

.documento-resumen .boton-editar {
  color: var(--ink);
  text-decoration-color: rgba(26, 25, 23, 0.4);
}

.documento-resumen__sello {
  display: none;
  position: absolute;
  top: var(--espacio-4);
  right: var(--espacio-5);
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  transform: rotate(-8deg);
}

.documento-resumen:has(.tarjeta-estado--rojo) .documento-resumen__sello--rojo,
.documento-resumen:has(.tarjeta-estado--ambar) .documento-resumen__sello--ambar,
.documento-resumen:has(.tarjeta-estado--verde) .documento-resumen__sello--verde {
  display: block;
  /* Mismo golpe de sello que en la hero (Prompt 7): al pasar de display:none
     a block la animación se reproduce sola, sin JS — reaparece cada vez que
     se llega o se vuelve a esta pantalla. */
  animation: documentoSelloCae 220ms ease-out;
}

.documento-resumen__sello--rojo { color: var(--bad); }
.documento-resumen__sello--ambar { color: var(--warn); }
.documento-resumen__sello--verde { color: var(--ok); }

.json-debug {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: var(--espacio-4);
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: var(--espacio-4);
}

/* ---------- Descarga de documentos (pantalla 6 del wizard) ---------- */

.descargas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin: var(--espacio-5) 0;
}

.error-generacion__reintentar {
  margin-top: var(--espacio-4);
}

/* Puntos de carga del botón "Preparando tus documentos…": discretos, sin
   protagonismo — respetan prefers-reduced-motion como el resto del sitio. */
.puntos-carga {
  display: inline-flex;
  gap: 3px;
  margin-left: 0.5em;
  vertical-align: middle;
}

.puntos-carga span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  animation: puntosCargaPulso 1.2s ease-in-out infinite;
}

.puntos-carga span:nth-child(2) { animation-delay: 0.2s; }
.puntos-carga span:nth-child(3) { animation-delay: 0.4s; }

@keyframes puntosCargaPulso {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .puntos-carga span {
    animation: none;
    opacity: 0.6;
  }
}

/* ============================================================
   Formulario del wizard: preguntas por tipo (pasos 6-8)
   ============================================================ */

.etiqueta-pregunta {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: var(--espacio-3);
}

.bloque-pregunta {
  margin-bottom: var(--espacio-5);
}

/* Buscador con autocompletado (aeropuertos, aerolíneas, operadoras) */

.buscador {
  position: relative;
}

.buscador__resultados {
  list-style: none;
  margin: var(--espacio-2) 0 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radio-chico);
  overflow-y: auto;
  max-height: 12rem;
  background: var(--surface);
  position: relative;
  z-index: 5;
}

.buscador__resultados li {
  border-bottom: 1px solid var(--line);
}

.buscador__resultados li:last-child {
  border-bottom: none;
}

.buscador__resultados button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.buscador__resultados button:hover,
.buscador__resultados button:focus-visible {
  background: var(--surface-2);
}

.buscador__manual-toggle {
  display: inline-block;
  margin-top: var(--espacio-2);
}

.buscador__manual {
  margin-top: var(--espacio-4);
  padding: var(--espacio-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radio);
}

/* Checkbox de confirmación (p. ej. advertencia crítica de bono aceptado) */

.checkbox-campo {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
  padding: var(--espacio-3);
  border-radius: var(--radio-chico);
}

.checkbox-campo input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.checkbox-campo--error {
  outline: 2px solid var(--bad);
  outline-offset: 2px;
}

/* Panel de validación en vivo (bloqueo o advertencias) dentro de Fase A / Fase B */

.panel-validacion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  margin-top: var(--espacio-6);
}

/* Resultado de cálculo mostrado en condicional durante la Fase A */

.aviso-calculo {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radio);
  padding: var(--espacio-4);
  color: var(--text);
  font-size: 0.9rem;
}

/* Sin glows ni blobs decorativos (retirados en el rediseño, Prompt 1):
   la separación se hace con líneas finas y espacio, no con color de fondo. */

/* ============================================================
   Revelado progresivo del formulario (evita scroll largo)
   ============================================================ */

.paso-revelado {
  transition: opacity 380ms ease, transform 380ms ease;
}

.paso-revelado:not(.paso-revelado--visible) {
  display: none;
}

.paso-revelado--visible {
  opacity: 1;
  transform: none;
  animation: pasoRevelado 380ms ease;
}

@keyframes pasoRevelado {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Estado de la reclamación siempre visible mientras se rellena
   ============================================================ */

.wizard__estado-fijo {
  position: fixed;
  top: calc(var(--alto-nav) + 2.75rem);
  right: var(--espacio-4);
  left: auto;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radio-chico);
  padding: 0.5rem 0.85rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.75rem;
  font-weight: 500;
  transition: border-color var(--transicion);
  max-width: calc(100vw - 2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard__estado-fijo[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .wizard__estado-fijo {
    font-size: 0.85rem;
    padding: 0.6rem 1.05rem;
    right: var(--espacio-5);
  }
}

.wizard__estado-punto {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--transicion), box-shadow var(--transicion);
}

.wizard__estado-fijo--verde .wizard__estado-punto {
  background: var(--ok);
}

.wizard__estado-fijo--ambar .wizard__estado-punto {
  background: var(--warn);
}

.wizard__estado-fijo--rojo .wizard__estado-punto {
  background: var(--bad);
}