/* Estilos del sitio de captacion de leads de IUL · v4 (redisenio, tema claro).
   Diseno mobile-first (legible desde 360 px sin desplazamiento horizontal).

   Identidad visual de Neriah Financial Group: azul marino y dorado.
   v4: el cuerpo del sitio pasa a ser CLARO (blanco y crema) para que se lea
   mejor y se vea mas luminoso. El azul marino queda en las "zonas de marca":
   el encabezado, la portada (hero), la franja final de llamada y el pie.

   Contraste medido (WCAG 2.x) de cada combinacion usada:
     --texto #1B2A41 sobre blanco 14.44:1 · sobre --fondo 13.25:1 · sobre --crema 13.04:1
     --texto-suave #4A5A72 sobre blanco 7.01:1 · sobre --fondo 6.43:1
     --marino #0B1F3A (titulos) sobre blanco 16.52:1 · sobre --fondo 15.16:1
     --dorado-osc #6B4E00 sobre blanco 7.74:1 · sobre --crema 6.98:1
     --enlace #0B4A8F sobre blanco 8.79:1 · sobre --fondo 8.06:1
     --sobre-dorado #0B1F3A sobre --dorado-boton #D4AF37: 7.86:1
     --error #B3261E sobre blanco 6.54:1 · --exito #1E6B4F sobre blanco 6.42:1
     Zonas de marca: --dorado #E8C765 sobre --marca-fondo 10.06:1 · sobre #13325C 7.81:1 ·
       --texto-claro #E8EDF5 sobre #13325C 10.90:1 · --texto-claro-suave #C9D6EA sobre #13325C 8.72:1
     Componentes: --borde-campo #7B889E sobre blanco 3.59:1 (minimo 3:1)
     Todos los valores se volvieron a medir en el PM-1.17: docs/07, seccion "v4 · Tema claro".

   PROHIBIDO (docs/07): dorado claro como texto sobre blanco (2.1:1). Sobre
   fondo claro, el dorado de texto es siempre --dorado-osc (#6B4E00). */

:root {
  --fondo: #F7F5F0;
  --blanco: #FFFFFF;
  --crema: #FBF3DC;
  --superficie-aviso: #EEF2F8;

  --texto: #1B2A41;
  --texto-suave: #4A5A72;
  --marino: #0B1F3A;
  --dorado-osc: #6B4E00;
  --enlace: #0B4A8F;
  --borde: #E1E5EC;
  --borde-campo: #7B889E;
  --error: #B3261E;
  --superficie-error: #FDECEA;
  --exito: #1E6B4F;
  --superficie-exito: #E7F4EE;

  --dorado-boton: #D4AF37;
  --dorado-boton-raton: #C9A227;
  --sobre-dorado: #0B1F3A;
  --deshabilitado: #C9D1DC;

  --marca-fondo: #0B1F3A;
  --marca-fondo-2: #13325C;
  --marca-fondo-3: #1C4378;
  --pie-fondo: #08182D;
  --dorado: #E8C765;
  --texto-claro: #E8EDF5;
  --texto-claro-suave: #C9D6EA;
  --enlace-claro: #F0D68A;
  --borde-oscuro: #2E4A73;

  --radio: 14px;
  --sombra: 0 1px 2px rgba(11, 31, 58, .06), 0 8px 24px rgba(11, 31, 58, .08);
  --sombra-fuerte: 0 2px 4px rgba(11, 31, 58, .08), 0 18px 40px rgba(11, 31, 58, .14);
  --ancho: 70rem;

  /* Tipografias DEL SISTEMA (privacidad y pruebas sin red: docs/07 seccion 2). */
  --fuente: system-ui, "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--marino); font-family: var(--fuente-titulos); line-height: 1.22; margin: 0 0 .6em; }
h1 { font-size: clamp(1.85rem, 5.4vw, 3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.45rem, 4vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .45rem; }
img { max-width: 100%; height: auto; }

a { color: var(--enlace); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--marino); }

:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; border-radius: 4px; }
.hero :focus-visible, .encabezado :focus-visible, .pie :focus-visible, .seccion--oscuro :focus-visible, .boton-fijo :focus-visible { outline-color: var(--enlace-claro); }

.salto-al-contenido { position: absolute; left: -9999px; top: 0; background: var(--dorado-boton); color: var(--sobre-dorado); padding: .75rem 1rem; z-index: 60; }
.salto-al-contenido:focus { left: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

/* --- Secciones --- */
.seccion { padding: 3rem 0; background: var(--fondo); }
.seccion--claro { background: var(--blanco); }
.seccion h2 { position: relative; padding-bottom: .6rem; }
.seccion h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 2px; background: var(--dorado-boton); }
.centrado h2::after { left: 50%; transform: translateX(-50%); }
.seccion__intro { color: var(--texto-suave); max-width: 46rem; }

.seccion--oscuro { background: var(--marca-fondo-2); color: var(--texto-claro); }
.seccion--oscuro h1, .seccion--oscuro h2, .seccion--oscuro h3 { color: var(--dorado); }
/* PM-1.18: en la franja final la raya dorada va mas separada del titulo. Pegada
   y del mismo color, parecia subrayar una sola palabra. */
.seccion--oscuro h2 { padding-bottom: 1.25rem; margin-bottom: 1.6rem; }
.seccion--oscuro a { color: var(--enlace-claro); }
.seccion--oscuro p { color: var(--texto-claro-suave); }

/* --- Encabezado --- */
.encabezado { background: var(--marca-fondo); border-bottom: 1px solid var(--borde-oscuro); }
.encabezado__interior { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: space-between; padding-top: .7rem; padding-bottom: .7rem; }
.encabezado__marca { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.15rem; color: var(--dorado); text-decoration: none; }
.encabezado__marca:hover { color: var(--dorado); }
.encabezado__logotipo { height: 48px; width: auto; display: block; }
.encabezado__agente { font-size: .9rem; color: var(--texto-claro-suave); margin: 0; }

.marcador-imagen { display: inline-block; background: #EEF1F5; border: 2px dashed var(--borde-campo); border-radius: 6px; color: var(--texto-suave); font-family: var(--fuente); font-size: .8rem; font-weight: 400; padding: .15rem .45rem; }

/* --- Botones --- */
.boton { display: inline-block; font: inherit; font-weight: 700; text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: 999px; padding: .85rem 1.6rem; min-height: 48px; cursor: pointer; }
.boton--principal { background: var(--dorado-boton); color: var(--sobre-dorado); box-shadow: 0 6px 16px rgba(212, 175, 55, .35); }
.boton--principal:hover { background: var(--dorado-boton-raton); color: var(--sobre-dorado); }
.boton--secundario { background: var(--blanco); color: var(--marino); border-color: var(--dorado-boton); }
.boton--secundario:hover { background: #FFFBEF; color: var(--marino); }
.boton--contorno { background: transparent; color: var(--marino); border-color: var(--borde-campo); }
.boton--contorno:hover { border-color: var(--dorado-boton); }
.boton--bloque { display: block; width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] { background: var(--deshabilitado); border-color: var(--deshabilitado); color: var(--texto); box-shadow: none; cursor: not-allowed; }

/* --- Portada (zona de marca) --- */
/* PM-1.17: color PLANO, sin degradado. El prototipo traia un degradado, pero
   detras de un texto no se puede medir el contraste (docs/07 seccion 4.1) y
   tests/e2e/contraste.spec.mjs lo rechaza. Lo mismo en .seccion--oscuro. */
.hero {
  background: var(--marca-fondo-2);
  color: var(--texto-claro);
  padding: 2.75rem 0 3rem;
}
.hero h1 { color: var(--dorado); max-width: 44rem; }
.hero__subtitulo { font-size: 1.12rem; max-width: 44rem; color: var(--texto-claro); }
.hero a { color: var(--enlace-claro); }
.hero__interior { display: grid; gap: 2rem; align-items: center; }
.hero__confianza { margin-top: 1.1rem; font-size: .95rem; color: var(--texto-claro-suave); }
.hero__confianza--foto { display: flex; align-items: center; gap: .85rem; }
.hero__confianza--foto p { margin: 0; line-height: 1.45; }
.hero__confianza--foto strong { color: var(--texto-claro); }
.hero__foto { display: block; width: 60px; height: 60px; object-fit: cover; object-position: center 20%; border-radius: 50%; border: 2px solid var(--dorado-boton); flex: none; }
.hero__confianza--foto .marcador-imagen { flex: none; }

.hero__tarjeta { display: none; background: rgba(255, 255, 255, .06); border: 1px solid rgba(232, 199, 101, .35); border-radius: 20px; padding: 1.75rem 1.5rem; text-align: center; }
.hero__tarjeta-foto { display: block; width: 168px; height: 168px; object-fit: cover; object-position: center 20%; border-radius: 50%; border: 4px solid var(--dorado-boton); margin: 0 auto 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.hero__tarjeta-nombre { font-family: var(--fuente-titulos); font-size: 1.35rem; color: var(--dorado); margin: 0; font-weight: 700; }
.hero__tarjeta-rol { color: var(--texto-claro); margin: .2rem 0 .1rem; }
.hero__tarjeta-npn { color: var(--texto-claro-suave); font-size: .92rem; margin: 0 0 1rem; }
.hero__tarjeta ul { list-style: none; padding: 0; margin: 0; text-align: left; display: inline-block; }
.hero__tarjeta li { display: flex; gap: .55rem; align-items: center; color: var(--texto-claro); margin-bottom: .35rem; }
.hero__tarjeta li svg { color: var(--dorado); flex: none; }

/* --- Franja de confianza bajo la portada --- */
.confianza { background: var(--blanco); border-bottom: 1px solid var(--borde); padding: 1.1rem 0; }
.confianza__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.confianza__lista li { display: flex; align-items: center; gap: .7rem; margin: 0; font-weight: 600; color: var(--marino); }
.confianza__icono { width: 40px; height: 40px; border-radius: 50%; background: var(--crema); color: var(--dorado-osc); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* El sprite de iconos no ocupa sitio. Va por clase y no con style="" porque la
   politica de seguridad del sitio (site/_headers) no admite estilos en linea. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- Tarjetas --- */
.rejilla { display: grid; gap: 1.1rem; }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra-fuerte); }
.tarjeta h2 { padding-bottom: 0; }
.tarjeta h2::after { display: none; }
.tarjeta h3 { margin-top: 0; }
.tarjeta__icono { width: 52px; height: 52px; border-radius: 14px; background: var(--crema); color: var(--dorado-osc); display: inline-flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.tarjeta__icono .icono { width: 28px; height: 28px; }

/* --- Beneficios de IUL (textos aprobados, no modificar en el HTML) --- */
.beneficio { background: var(--blanco); border: 1px solid var(--borde); border-top: 4px solid var(--dorado-boton); border-radius: var(--radio); padding: 1.25rem 1.25rem 1.3rem; box-shadow: var(--sombra); }
.beneficio__icono { width: 44px; height: 44px; border-radius: 12px; background: var(--crema); color: var(--dorado-osc); display: inline-flex; align-items: center; justify-content: center; margin-bottom: .7rem; }
/* El titulo del beneficio va con el MISMO tamano que el texto (docs/07 seccion 4). */
.beneficio strong { display: block; color: var(--marino); margin-bottom: .35rem; }
.beneficio p { margin: 0; }

/* --- Como funciona --- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.paso { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; box-shadow: var(--sombra); margin: 0; }
.paso__numero { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: var(--marino); color: var(--dorado); font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.15rem; margin-bottom: .6rem; }
.paso h3 { margin-bottom: .3rem; }
.paso p { margin: 0; color: var(--texto-suave); }

/* --- Dos columnas de listas --- */
.columnas { display: grid; gap: 1.5rem; }
.caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem 1.4rem .6rem; box-shadow: var(--sombra); }
.caja h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
.caja--crema { background: var(--crema); border-color: #EADBB0; box-shadow: none; }

/* --- Divulgaciones y avisos legales (texto normal, mismo tamano y contraste) --- */
.divulgacion { background: var(--superficie-aviso); border: 1px solid var(--borde); border-left: 5px solid var(--dorado-boton); border-radius: var(--radio); padding: 1.1rem 1.15rem; font-size: .95rem; color: var(--texto); }
.divulgacion p { margin: 0; }
.divulgacion + p { margin-top: 1rem; }
.divulgacion--breve { background: transparent; border: 0; border-radius: 0; border-left: 3px solid var(--dorado-boton); padding: .2rem 0 .2rem .7rem; font-size: .9rem; color: var(--texto-suave); margin-top: .9rem; }
.aviso-borrador { background: var(--superficie-error); border: 2px dashed var(--error); border-radius: var(--radio); color: var(--error); font-weight: 700; padding: .9rem 1rem; margin-bottom: 1.5rem; }

/* --- Formulario --- */
.formulario-bloque { display: grid; gap: 1.5rem; align-items: start; }
.formulario { max-width: 46rem; background: var(--blanco); border: 1px solid var(--borde); border-top: 5px solid var(--dorado-boton); border-radius: var(--radio); padding: 1.5rem 1.25rem; box-shadow: var(--sombra-fuerte); }
.formulario h3 { color: var(--dorado-osc); font-family: var(--fuente); font-size: 1rem; }
.progreso { margin-bottom: 1.25rem; }
.progreso__texto { font-weight: 700; color: var(--marino); margin: 0 0 .4rem; }
.progreso__barra { height: 8px; background: #E9EDF3; border-radius: 999px; overflow: hidden; }
.progreso__relleno { height: 100%; background: var(--dorado-boton); width: 50%; }
fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; }
legend { font-weight: 700; color: var(--marino); padding: 0; margin-bottom: .45rem; }
.campo { margin-bottom: 1.25rem; }
.campo > label, .campo__etiqueta { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--marino); }
.campo__ayuda { display: block; font-size: .9rem; color: var(--texto-suave); margin-bottom: .45rem; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select { width: 100%; font: inherit; color: var(--texto); background: var(--blanco); border: 2px solid var(--borde-campo); border-radius: 10px; padding: .7rem .8rem; min-height: 48px; }
input:hover, select:hover, input:focus, select:focus { border-color: var(--dorado-boton); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }
.respuestas { display: grid; gap: .5rem; }
.respuesta { display: flex; gap: .7rem; align-items: flex-start; border: 2px solid var(--borde-campo); border-radius: 12px; padding: .75rem .9rem; background: var(--blanco); color: var(--texto); cursor: pointer; }
.respuesta:hover { border-color: var(--dorado-boton); background: #FFFBEF; }
.respuesta:has(input:checked) { border-color: var(--dorado-boton); background: #FFF6DA; }
.respuesta input { margin: .25rem 0 0; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--marino); }
.respuesta span { flex: 1; }
.consentimiento { background: var(--superficie-aviso); border: 2px solid var(--dorado-boton); border-radius: var(--radio); padding: 1rem; margin-bottom: 1.25rem; font-size: .95rem; color: var(--texto); }
.consentimiento label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.consentimiento input { margin: .25rem 0 0; width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--marino); }
.error-campo { display: block; color: var(--error); font-size: .92rem; font-weight: 600; margin-top: .35rem; }
.error-general { background: var(--superficie-error); border-left: 5px solid var(--error); border-radius: 8px; color: var(--error); font-weight: 600; padding: .9rem 1rem; margin-bottom: 1rem; }
.estado-envio { font-weight: 600; margin-top: .75rem; }
.nota-envio { font-size: .9rem; color: var(--texto-suave); margin-top: .75rem; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__intro { color: var(--texto-suave); margin-top: -.25rem; }
.formulario__lado { display: none; }
.formulario__lado ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.formulario__lado li { display: flex; gap: .7rem; align-items: center; margin-bottom: .9rem; font-weight: 600; color: var(--marino); }

/* --- Imagenes pendientes (nunca fotos de stock ni generadas con IA: docs/00 seccion 4) --- */
.foto-marcador { display: flex; align-items: center; justify-content: center; text-align: center; background: #EEF1F5; border: 2px dashed var(--borde-campo); border-radius: var(--radio); color: var(--texto-suave); font-size: .95rem; padding: 1rem; width: 100%; max-width: 260px; aspect-ratio: 4 / 5; margin: 0 0 1rem; gap: .5rem; flex-direction: column; }
.foto-miriam { display: block; width: 200px; height: 200px; object-fit: cover; object-position: center 20%; border-radius: 50%; border: 4px solid var(--dorado-boton); margin: 0 auto 1rem; box-shadow: var(--sombra-fuerte); }

/* --- Quien le va a atender --- */
.acerca { background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; padding: 1.5rem; box-shadow: var(--sombra); }
.acerca .foto-marcador { margin: 0 auto 1rem; background: transparent; border: 0; aspect-ratio: auto; padding: 0; }

/* --- Preguntas frecuentes --- */
.faq { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem 1.3rem; box-shadow: var(--sombra); }
.faq h3 { margin-bottom: .3rem; font-family: var(--fuente); font-size: 1.05rem; color: var(--marino); }
.faq > div + div { border-top: 1px solid var(--borde); margin-top: 1rem; padding-top: 1rem; }

/* --- Pie (zona de marca) --- */
.pie { background: var(--pie-fondo); color: var(--texto-claro); border-top: 3px solid var(--dorado-boton); padding: 2rem 0; font-size: .95rem; }
.pie a { color: var(--enlace-claro); }
.pie a, a[data-volver] { display: inline-block; min-height: 24px; min-width: 24px; padding: 6px 8px; }
.pie__enlaces { list-style: none; padding: 0; margin: .75rem -8px 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.pie__enlaces li { margin: 0; }
.pie__legal { color: var(--texto-claro-suave); margin-top: 1rem; }
a[data-volver] { margin-left: -8px; }

/* --- Utilidades --- */
.centrado { text-align: center; }
.oculto { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lista-simple { list-style: none; padding-left: 0; }
.lista-simple li { padding-left: 1.7rem; position: relative; }
.lista-simple li::before { content: ""; position: absolute; left: .3rem; top: .55em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--dorado-boton); box-shadow: 0 0 0 3px rgba(212, 175, 55, .25); }

/* --- Franja "mientras vive" --- */
.mientras-vive { background: var(--crema); border-bottom: 1px solid #EADBB0; padding: 1.4rem 0; }
.mientras-vive p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--texto); }
.mientras-vive strong { color: var(--dorado-osc); font-family: var(--fuente-titulos); font-weight: 700; }

.linea-confianza { margin-top: 1.5rem; text-align: center; color: var(--texto-suave); }

/* --- Pagina de gracias --- */
.aviso-telefono { background: var(--blanco); border: 1px solid var(--borde); border-left: 4px solid var(--dorado-boton); padding: .8rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; }
.aviso-telefono a { white-space: nowrap; }

/* --- Boton fijo en el celular --- */
.boton-fijo { display: none; }
@media (max-width: 47.99rem) {
  .boton-fijo { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(8, 24, 45, .96); border-top: 1px solid var(--borde-oscuro); transition: transform .2s ease; }
  .boton-fijo--oculto { transform: translateY(110%); }
  body.con-boton-fijo { padding-bottom: 4.5rem; }
  .pie__enlaces { flex-direction: column; gap: .35rem; }
}

/* --- Inicio --- */
.hero--inicio { padding-bottom: 4.5rem; }
.seccion--tarjetas { padding-top: 0; margin-top: -2.5rem; background: transparent; }
.tarjeta .boton { margin-top: .25rem; }

/* --- Pantallas medianas y grandes --- */
@media (min-width: 40rem) {
  body { font-size: 1.125rem; }
  .contenedor { padding: 0 1.5rem; }
  .seccion { padding: 4rem 0; }
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .boton--bloque { display: inline-block; width: auto; }
  .acerca { display: grid; grid-template-columns: 220px 1fr; gap: 1.75rem; align-items: center; padding: 2rem; }
  .confianza__lista { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .columnas { grid-template-columns: 1fr 1fr; }
  .formulario { padding: 2rem; }
  .seccion--tarjetas { padding-bottom: 4rem; }
}

@media (min-width: 64rem) {
  .hero { padding: 4rem 0 4.25rem; }
  .hero__interior { grid-template-columns: 1.45fr 1fr; gap: 3rem; }
  .hero--inicio .hero__interior { grid-template-columns: 1fr; }
  .hero__tarjeta { display: block; }
  .hero__interior .hero__confianza--foto { display: none; }
  .formulario-bloque { grid-template-columns: 1fr 1.6fr; gap: 3rem; }
  .formulario__lado { display: block; position: sticky; top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .boton, .respuesta, input, select { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
}

@media print {
  .boton, .encabezado, .boton-fijo { display: none; }
  body { background: #fff; color: #10151C; }
  .hero, .seccion--oscuro { background: #fff; color: #10151C; }
  h1, h2, h3, .hero h1 { color: #0B1F3A; }
  a { color: #0B1F3A; }
}

/* Pasos compactos en el celular: numero a la izquierda */
@media (max-width: 39.99rem) {
  .paso { display: grid; grid-template-columns: 40px 1fr; column-gap: .9rem; padding: 1rem 1.1rem; }
  .paso__numero { grid-row: span 2; margin: 0; }
  .paso h3 { margin: .35rem 0 .2rem; }
}
.hero--inicio .hero__interior { gap: 0; }