/* ══════════════════════════════════════════════════════════════
   EXPEDICIÓN VERNE — La primera anotación (formulario previo)
   ──────────────────────────────────────────────────────────────
   Hoja propia. NO carga `styles.css`: aquella son 6.000 líneas de
   scroll-telling (pins, timelines, capas paper-cut) de las que
   esta página no usa ni una, y arrastrarlas costaría ~95 KB de
   CSS muerto en un móvil de planta. Lo común —fuente, tokens,
   reset, grano, skip-link— vive en `css/base.css`, que esta hoja
   DA POR CARGADO y que se enlaza siempre antes.

   La página es de SERVICIO, no de relato: cero GSAP, cero Lenis,
   cero canvas. Se abre, se rellena y se cierra.

   ── Las tres reglas que gobiernan el diseño ──────────────────
   1. MÓVIL PRIMERO, y de verdad. La tripulación son 200+ personas
      de planta y oficina: mucha de ellas abre esto en el teléfono,
      de pie y con prisa. Todo lo que se toca mide ≥48px de alto,
      las opciones son tarjetas a todo el ancho (no radios de 13px
      con su texto al lado) y los campos van a 16px MÍNIMO, que es
      el umbral por debajo del cual iOS hace zoom al enfocar y
      descoloca la página entera.
   2. EL ÁMBAR NUNCA ES TEXTO NI ESTADO ÚNICO SOBRE PAPEL. Da 1.9:1
      contra `--papel`, muy por debajo del suelo AA del proyecto.
      El estado «marcado» lo lleva el MARINO (borde 2px + rótulo en
      negrita) y el ámbar solo rellena la marca, que es mancha, no
      letra. Quien no distinga el ámbar sigue viendo el borde.
   3. LA LONGITUD SE DECLARA, NO SE ESCONDE. Nada de asistente de
      12 pasos: son 12 preguntas en una sola página, agrupadas en
      tres tramos, con un contador sticky que dice exactamente por
      dónde vas. Un wizard que oculta el final se siente más largo
      que una lista que lo enseña — y además rompe el botón atrás.
   ══════════════════════════════════════════════════════════════ */

/* Sobre papel el ámbar no marca: el anillo de foco pasa a tinta en
   toda la página (aquí NO hay superficies nocturnas salvo el panel
   de gracias, que se lo devuelve más abajo). */
:focus-visible { outline-color: var(--marino); }

body {
  /* El sticky del contador necesita saber cuánto mide la barra. */
  --barra-alto: 3.75rem;
}

/* ══════════ BARRA ══════════
   Estática y tonta a propósito: la de la bitácora vive de GSAP
   (píldora que sigue al puntero, cambio de superficie por scroll)
   y aquí no hay ni GSAP ni superficies que cambiar. Solo la
   co-marca y la puerta de vuelta. */
.f-nav {
  position: sticky;
  top: 0;
  z-index: 110;
  height: var(--barra-alto);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  background: rgba(250, 249, 244, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--fino);
}
/* `<p>`, no `<a>`: la co-marca no lleva a ningún sitio — ver la nota
   del HTML sobre por qué esta página no ofrece salida. */
.f-marca { display: flex; align-items: center; gap: 0.7rem; margin: 0; }
/* Solo la versión oscura de cada logo: esta página es papel de
   principio a fin, así que la clara nunca llegaría a mostrarse. */
.f-logo-verne { height: 2rem; width: auto; }
.f-logo-aludium { height: 0.8rem; width: auto; }
.f-marca-filete {
  width: 1px;
  height: 1.5rem;
  background: rgba(15, 35, 64, 0.18);
}

/* ══════════ CABECERA & WRAPPER ══════════ */
.f-envoltorio {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-8);
}

.f-cab,
.f-progreso,
#formVerne {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
.f-cab { padding: var(--sp-7) 0 var(--sp-6); }
.f-kicker {
  margin-bottom: 0.9rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--oro-tinta);
}
.f-titulo {
  font-size: clamp(1.9rem, 7.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--marino);
}
.f-lead {
  margin-top: var(--sp-4);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}
.f-lead strong { color: var(--marino); font-weight: 600; }

/* Ficha de expectativas: cuánto dura y qué NO es. Va arriba del
   todo porque las dos preguntas que frenan a alguien ante un
   formulario de empresa son «cuánto tarda» y «esto me evalúa». */
.f-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-5);
  list-style: none;
}
.f-ficha li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border: var(--fino);
  border-radius: var(--radio-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta-suave);
  background: var(--papel-2);
}
.f-ficha b { color: var(--marino); font-weight: 700; }

/* ══════════ CONTADOR STICKY ══════════
   La única pieza «viva» de la página. Se pega bajo la barra y dice
   dos cosas a la vez: cuántas van (cifra) y cuánto queda (raíl).
   El raíl es ÁMBAR porque aquí es mancha sobre un carril marino
   claro, no letra — la regla 2 se respeta. */
.f-progreso {
  position: sticky;
  top: var(--barra-alto);
  z-index: 100;
  margin: 0 calc(var(--sp-4) * -1);
  padding: 0.7rem var(--sp-4);
  background: rgba(250, 249, 244, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--fino);
}
.f-progreso-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: 0.5rem;
}
.f-progreso-txt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-1);
  color: var(--tinta-suave);
}
.f-progreso-txt b {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--marino);
}
.f-progreso-pct {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--oro-tinta);
}
.f-progreso-rail {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: rgba(15, 35, 64, 0.12);
  overflow: hidden;
}
.f-progreso-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--ambar);
  transition: width var(--dur-3) var(--ease-premium);
}
/* Completo: el raíl pasa a marino. El ámbar dice «vas por aquí»;
   el final merece el color de la tinta, que es el que cierra. */
.f-progreso.esta-completo .f-progreso-fill { background: var(--marino); }

/* ══════════ TRAMOS ══════════
   Los 12 ítems no son una lista plana sino un arco: tu relación con
   la IA → cómo trabajas → qué esperas. Agruparlos en tres tramos con
   nombre hace que el formulario se lea como la ruta de la expedición
   y no como un trámite de RR. HH.

   ⚠️ EL AIRE ENTRE TRAMOS VA EN `margin`, NUNCA EN `padding`.
   El `<legend>` de un fieldset se pinta FUERA de la caja de padding,
   así que un `padding-top` aquí no separa este tramo del anterior:
   se cuela ENTRE el título y su subtítulo. Con `--sp-7` daba 56px de
   hueco título→subtítulo donde la cabecera de la página usa 16. Es
   la trampa clásica del fieldset y no se ve venir leyendo el CSS,
   porque la regla parece decir justo lo contrario de lo que hace. */
.f-tramo {
  border: 0;
  padding: 0;
  margin-top: var(--sp-7);
}
.f-tramo-cab {
  padding-bottom: var(--sp-5);
  border-bottom: var(--fino);
  margin-bottom: var(--sp-6);
}
.f-tramo-num {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: var(--track-2);
  color: var(--oro-tinta);
  margin-bottom: 0.5rem;
}
/* <legend> con display:block y padding:0 para que no se comporte
   como leyenda de fieldset (hueco en el borde, ancho intrínseco). */
.f-tramo-titulo {
  display: block;
  padding: 0;
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--marino);
}
.f-tramo-sub {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* ══════════ PREGUNTA ══════════ */
.f-q { margin-bottom: var(--sp-7); }
/* La última pregunta de un tramo suelta su margen: el aire hasta el
   siguiente ya lo pone el `margin-top` del tramo. Un `<fieldset>`
   crea contexto de formato, así que ahí los márgenes NO colapsan y
   los dos se sumaban — 96px entre tramos contra los 48 que había
   tras el bloque de identidad, que al ser un `<div>` sí colapsa. */
.f-tramo > .f-q:last-child { margin-bottom: 0; }
.f-q-cab { margin-bottom: var(--sp-4); }
.f-q-num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: var(--track-1);
  color: var(--oro-tinta);
}
.f-q-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--marino);
}
.f-q-opcional {
  margin-left: 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  text-transform: none;
}
.f-q-pista {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
/* Contador de «llevas 2 de 3». Se enciende al llegar al tope para
   explicar por qué el resto de opciones deja de responder — sin
   él, una casilla que no marca se lee como un fallo de la página. */
.f-q-tope {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radio-pill);
  background: var(--papel-2);
  border: var(--fino);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  transition: background var(--dur-2) var(--ease-estandar),
    border-color var(--dur-2) var(--ease-estandar),
    color var(--dur-2) var(--ease-estandar);
}
.f-q-tope.esta-lleno {
  background: rgba(232, 160, 32, 0.16);
  border-color: var(--oro-tinta);
  color: var(--oro-tinta);
}

/* ══════════ OPCIONES ══════════
   Tarjeta a todo el ancho, no un radio suelto. El <input> real
   sigue en el DOM y sigue siendo el que recibe el foco y el que
   lee el lector de pantalla: se le quita el pintado nativo, no la
   existencia. `opacity:0` sobre la caja real y no `display:none`
   —que lo sacaría del orden de tabulación— ni `visibility:hidden`. */
.f-ops {
  display: grid;
  gap: 0.5rem;
  list-style: none;
}
.op {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.25rem;      /* ≥48px: el suelo táctil */
  padding: 0.8rem 1rem;
  border: 1px solid rgba(15, 35, 64, 0.18);
  border-radius: 0.7rem;
  background: var(--papel);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-estandar),
    background var(--dur-2) var(--ease-estandar);
}
.op input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.op-marca {
  position: relative;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid rgba(15, 35, 64, 0.3);
  background: var(--papel);
  transition: border-color var(--dur-2) var(--ease-estandar),
    background var(--dur-2) var(--ease-estandar);
}
/* Redonda para «elige una», cuadrada para «elige varias»: la forma
   del control anuncia la regla ANTES de tocarlo, que es justo el
   fallo clásico de rehacer radios y checks a mano. */
.op-radio .op-marca { border-radius: 50%; }
.op-check .op-marca { border-radius: 0.3rem; }
.op-txt {
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinta);
}

.op:hover { border-color: rgba(15, 35, 64, 0.42); background: var(--papel-2); }

/* Marcada: el peso lo lleva el borde marino de 2px y la negrita
   del rótulo. El ámbar solo rellena la marca (regla 2). */
.op:has(input:checked) {
  border-color: var(--marino);
  border-width: 2px;
  padding: calc(0.8rem - 1px) calc(1rem - 1px);
  background: rgba(232, 160, 32, 0.1);
}
.op:has(input:checked) .op-txt { font-weight: 700; color: var(--marino); }
.op:has(input:checked) .op-marca {
  border-color: var(--marino);
  background: var(--ambar);
}
/* El glifo (punto o palo de la V) se dibuja en marino sobre el
   ámbar: 7.6:1, el mismo par que la identidad usa en el hero. */
.op-radio:has(input:checked) .op-marca::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--marino);
  transform: translate(-50%, -50%);
}
.op-check:has(input:checked) .op-marca::after {
  content: '';
  position: absolute;
  inset: 0.08rem auto auto 0.32rem;
  width: 0.34rem; height: 0.62rem;
  border: solid var(--marino);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* El foco viaja al <input>, que es transparente: se pinta encima
   de la TARJETA para que se vea. */
.op:has(input:focus-visible) {
  outline: 2px solid var(--marino);
  outline-offset: 3px;
}

/* Tope alcanzado: las que no están marcadas se apagan. Se atenúa
   con COLOR, no con `opacity` sobre el conjunto (el rótulo caería
   por debajo del suelo de contraste). */
.op.esta-vetada { cursor: not-allowed; background: var(--papel); }
.op.esta-vetada .op-txt { color: #8b95a3; }
.op.esta-vetada .op-marca { border-color: rgba(15, 35, 64, 0.15); }
.op.esta-vetada:hover { border-color: rgba(15, 35, 64, 0.18); background: var(--papel); }

/* ══════════ CAMPOS DE TEXTO ══════════ */
.f-campo {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(15, 35, 64, 0.22);
  border-radius: 0.7rem;
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  /* 16px CLAVADO. Por debajo, iOS hace zoom al enfocar el campo y
     el usuario pierde el encuadre en cada pregunta. */
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur-2) var(--ease-estandar),
    background var(--dur-2) var(--ease-estandar);
}
.f-campo::placeholder { color: #97a1ae; }
.f-campo:hover { border-color: rgba(15, 35, 64, 0.4); }
.f-campo:focus {
  outline: none;
  border-color: var(--marino);
  border-width: 2px;
  padding: calc(0.85rem - 1px) calc(1rem - 1px);
  background: var(--papel-2);
}
textarea.f-campo { min-height: 6rem; resize: vertical; }

/* El «¿cuál?» que aparece al marcar «Otra». Colgado de un filete
   que lo ata visualmente a la opción que lo ha abierto. */
.f-otra {
  margin-top: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--ambar);
}
.f-otra[hidden] { display: none; }

/* ══════════ IDENTIDAD ══════════
   Nombre, email y centro abren la página SIN cabecera de tramo: no son
   preguntas del cuestionario y titularlas las subía a un rango que no
   tienen. Al quedarse sin cabecera tampoco necesitan el aire que
   separa un tramo del anterior — son lo primero que hay. */
.f-tramo-mudo { margin-top: var(--sp-5); }

.f-duo { display: grid; gap: var(--sp-5); }
.f-campo-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--marino);
}

/* ══════════ ERROR ══════════
   Rojo Y texto Y un icono: nunca solo color. El bloque se anuncia
   con role="alert" desde el JS. */
.f-error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a3261d;
}
.f-error.esta-visible { display: flex; }
.f-error::before {
  content: '!';
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: #a3261d;
  color: var(--papel);
  font-size: 0.72rem;
  font-weight: 800;
}
.f-q.tiene-error .op,
.f-q.tiene-error .f-campo { border-color: #a3261d; }

/* ══════════ ENVÍO ══════════ */
.f-envio {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--fino);
  /* Respeta la barra de gestos del móvil. */
  padding-bottom: env(safe-area-inset-bottom);
}
.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: var(--radio-pill);
  background: var(--marino);
  color: var(--blanco);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--sombra-2);
  transition: transform var(--dur-2) var(--ease-premium);
}
.f-btn svg {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.f-btn:active { transform: scale(0.99); }
.f-btn[disabled] { opacity: 0.55; cursor: wait; }
.f-btn:focus-visible { outline: 2px solid var(--marino); outline-offset: 4px; }

.f-envio-nota {
  margin-top: var(--sp-4);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* Fallo de red o del servidor. Distinto de `.f-error`, que es de
   validación: aquí el usuario no ha hecho nada mal. */
.f-aviso {
  display: none;
  margin-top: var(--sp-4);
  padding: 0.9rem 1rem;
  border: 1px solid #a3261d;
  border-radius: 0.7rem;
  background: rgba(163, 38, 29, 0.07);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #7d1d16;
}
.f-aviso.esta-visible { display: block; }

/* ══════════ GRACIAS (Estilo Apple & Stripe) ══════════
   Experiencia de confirmación inmersiva y profesional.
   Sustituye la tarjeta simple por un escenario canvas con halo de luz,
   deck de métricas estilo Stripe, stepper de la expedición y
   botonera de navegación principal hacia la bitácora. */

.f-gracias {
  position: relative;
  margin: var(--sp-6) auto var(--sp-8);
  max-width: 52rem;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.8rem, 5vw, 3.5rem);
  border-radius: 1.75rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(250, 249, 244, 0.94) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(15, 35, 64, 0.12);
  color: var(--tinta);
  text-align: center;
  box-shadow:
    0 24px 64px -12px rgba(15, 35, 64, 0.12),
    0 0 0 1px rgba(232, 160, 32, 0.15) inset;
  overflow: hidden;
}

.f-gracias[hidden] { display: none; }

/* Halo de luz ambiental */
.f-gracias-halo {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 320px;
  background: radial-gradient(circle, rgba(232, 160, 32, 0.18) 0%, rgba(36, 94, 138, 0.08) 50%, transparent 75%);
  filter: blur(45px);
  pointer-events: none;
  z-index: 0;
}

.f-gracias-hero {
  position: relative;
  z-index: 1;
}

/* Insignia con radar de pulso */
.f-gracias-insignia-wrap {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto var(--sp-5);
  display: grid;
  place-items: center;
}

.f-gracias-pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(232, 160, 32, 0.4);
  animation: fPulsoAura 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}

.f-gracias-pulso-2 {
  animation-delay: 1.2s;
}

@keyframes fPulsoAura {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.f-gracias-insignia {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 244, 239, 0.95));
  box-shadow:
    0 0 0 1px rgba(232, 160, 32, 0.4),
    0 8px 24px -4px rgba(232, 160, 32, 0.25);
}

.f-gracias-brujula {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--marino);
}

/* Badge de Estado en Vivo */
.f-gracias-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: rgba(15, 35, 64, 0.05);
  border: 1px solid rgba(15, 35, 64, 0.1);
  margin-bottom: 1.2rem;
}

.f-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: fDotPulse 2s ease-in-out infinite;
}

@keyframes fDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.f-gracias-kicker {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--oro-tinta);
  margin: 0;
}

.f-gracias-titulo {
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--marino);
  margin: 0 auto;
}

.f-gracias-sub {
  margin-top: var(--sp-4);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--marino);
}

.f-gracias-txt {
  margin: var(--sp-3) auto 0;
  max-width: 36rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* ── Deck de Métricas (Estilo Stripe) ── */
.f-gracias-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
  margin-top: var(--sp-7);
}

.f-metric-card {
  background: #ffffff;
  border: 1px solid rgba(15, 35, 64, 0.09);
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(15, 35, 64, 0.03);
}

.f-metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -6px rgba(15, 35, 64, 0.09);
  border-color: rgba(232, 160, 32, 0.4);
}

.f-metric-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  background: rgba(15, 35, 64, 0.05);
  color: var(--marino);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: background-color 0.2s ease;
}

.f-metric-card:hover .f-metric-icon {
  background: rgba(232, 160, 32, 0.15);
  color: var(--oro-tinta);
}

.f-metric-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-2);
  color: var(--oro-tinta);
  display: block;
}

.f-metric-val {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--marino);
  margin-top: 0.25rem;
  display: block;
  letter-spacing: -0.01em;
}

.f-metric-detail {
  font-size: 0.82rem;
  color: var(--tinta-suave);
  margin-top: 0.35rem;
  display: block;
  line-height: 1.4;
}

/* ── Stepper / Roadmap (Estilo Apple) ── */
.f-gracias-roadmap {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: var(--fino);
}

.f-roadmap-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-2);
  color: var(--sepia);
  margin-bottom: 1.25rem;
  text-align: center;
}

.f-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.f-roadmap-step {
  background: #ffffff;
  border: 1px solid rgba(15, 35, 64, 0.09);
  border-radius: 1.25rem;
  padding: 1.35rem 1.25rem;
  text-align: left;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(15, 35, 64, 0.03);
}

.f-roadmap-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(15, 35, 64, 0.08);
  border-color: rgba(15, 35, 64, 0.18);
}

.f-roadmap-step.is-complete {
  border-color: rgba(16, 185, 129, 0.25);
}

.f-roadmap-step.is-current {
  background: #ffffff;
  border-color: rgba(232, 160, 32, 0.35);
  box-shadow: 0 8px 20px rgba(232, 160, 32, 0.08);
}

.f-roadmap-step.is-upcoming {
  opacity: 0.85;
}

.f-step-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.f-step-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--marino);
  opacity: 0.4;
}

.f-step-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.is-complete .f-step-tag {
  background: rgba(16, 185, 129, 0.12);
  color: #065F46;
}

.is-current .f-step-tag {
  background: rgba(232, 160, 32, 0.15);
  color: var(--oro-tinta);
}

.is-upcoming .f-step-tag {
  background: rgba(15, 35, 64, 0.06);
  color: var(--tinta-suave);
}

.f-step-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--marino);
  margin: 0;
  letter-spacing: -0.01em;
}

.f-step-desc {
  font-size: 0.8rem;
  color: var(--tinta-suave);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* ── Cita Editorial de Cierre ── */
.f-gracias-cita-box {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-7);
  padding: 1.75rem clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(135deg, rgba(232, 160, 32, 0.08) 0%, rgba(15, 35, 64, 0.03) 100%);
  border-radius: 1.25rem;
  border: 1px solid rgba(232, 160, 32, 0.3);
  text-align: center;
}

.f-gracias-cita-kicker {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--oro-tinta);
  margin-bottom: 0.5rem;
}

.f-gracias-cita-txt {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--marino);
  margin: 0;
  font-style: italic;
}

.f-gracias-cita-autor {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sepia);
  font-style: normal;
}

/* ══════════ PIE ══════════ */
.f-pie {
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
  border-top: var(--fino);
  text-align: center;
}
.f-pie-lockup {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: var(--track-2);
  color: var(--marino);
}
.f-pie-meta {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: var(--track-1);
  color: var(--tinta-suave);
}

/* ══════════════════════════════════════════════════════════════
   ESCALONES
   El móvil es la base y no lleva media query. De 620px arriba el
   ancho de línea empieza a sobrar, así que se reparten en dos
   columnas las cosas que se leen de un vistazo (nombre/email,
   opciones cortas) — nunca las preguntas largas, que en dos
   columnas obligan a barrer en zigzag.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 620px) {
  body { --barra-alto: 4.25rem; }
  .f-nav { padding: 0 var(--sp-6); }
  .f-envoltorio { padding: 0 var(--sp-6) var(--sp-9); }
  .f-progreso { margin: 0 calc(var(--sp-6) * -1); padding: 0.8rem var(--sp-6); }
  .f-cab { padding: var(--sp-8) 0 var(--sp-7); }
  .f-lead { font-size: 1.08rem; }
  .f-duo { grid-template-columns: 1fr 1fr; }
  .f-duo .f-duo-ancho { grid-column: 1 / -1; }
  /* Solo las listas marcadas como cortas se reparten: `.f-ops-corto`
     lo pone el HTML pregunta a pregunta, no una heurística. */
  .f-ops-corto { grid-template-columns: 1fr 1fr; }
  .f-btn { width: auto; min-width: 18rem; }
}

@media (min-width: 900px) {
  .f-titulo { font-size: 3rem; }
  .f-q-label { font-size: 1.12rem; }
}

/* ══════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   Aquí hay poquísimo que apagar —la página no anima nada por
   gusto—, pero el relleno del contador sí se desliza y el botón
   sí se hunde al pulsar. Ambos se cortan.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .f-btn:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   SIN :has()
   El estado «marcada» de una tarjeta se pinta con `:has()`, que
   cubre todo lo moderno. En un navegador sin soporte la tarjeta no
   cambiaría de aspecto al marcarla y el formulario sería
   inutilizable, así que ahí se devuelve el control NATIVO: se ve
   un radio o un check del sistema, feo pero funcional.
   ══════════════════════════════════════════════════════════════ */
@supports not selector(:has(*)) {
  .op input {
    position: static;
    width: 1.2rem; height: 1.2rem;
    opacity: 1;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--marino);
  }
  .op-marca { display: none; }
}