@charset "UTF-8";
/* ============================================================================
   00. TIPOGRAFÍAS AUTOALOJADAS
   Servidas desde nuestro propio dominio: ninguna petición sale a Google, de
   modo que la IP del visitante no se transfiere a un tercero. Son las fuentes
   variables oficiales, sin recortar (recortarlas solo ahorraba 7 KB).
   El unicode-range hace que latin-ext solo se descargue si la página muestra
   algún carácter que lo necesite; con textos en español nunca llega a pedirse.
   ============================================================================ */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   ADIÓS A TUS DEUDAS — Ley de Segunda Oportunidad
   Hoja de estilos principal

   Índice
   01. Tokens
   02. Reset y base
   03. Tipografía fluida
   04. Layout y utilidades
   05. Sistema de movimiento (reveal + coreografía)
   06. Botones
   07. Cabecera, navegación y progreso de scroll
   08. Hero
   09. Componentes de contenido
   10. Proceso
   11. FAQ
   12. Formulario
   13. Cierre y pie
   14. Elementos flotantes
   15. Cookies
   16. Responsive
   17. Accesibilidad y movimiento reducido
   ========================================================================= */


/* ============================================================
   01. TOKENS
   ============================================================ */
:root{
  /* Color */
  --navy:#14225c;
  --navy-deep:#0d1642;
  --navy-mid:#182a6b;
  --gold:#c9a765;
  --gold-lt:#dab97c;
  --gold-pale:#f0dfb4;
  --ivory:#f7f4ec;
  --ink:#2c324a;
  --ink-soft:#5c6480;
  --line:#e6e0d2;
  --line-dark:#26326b;
  --on-navy:#dfe3f0;
  --on-navy-soft:#a3ace0;
  --danger:#c0392b;
  --wa:#25d366;

  /* Radios */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-pill:999px;

  /* Sombras */
  --sh-xs:0 1px 2px rgba(13,22,66,.05);
  --sh-sm:0 4px 14px rgba(13,22,66,.07);
  --sh-md:0 14px 32px rgba(13,22,66,.10);
  --sh-lg:0 28px 60px rgba(13,22,66,.20);
  --sh-xl:0 36px 80px rgba(13,22,66,.32);
  --sh-gold:0 12px 28px rgba(201,167,101,.34);
  --sh-gold-hi:0 18px 38px rgba(201,167,101,.46);

  /* Movimiento */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-xs:.14s;
  --t-fast:.22s;
  --t-base:.34s;
  --t-slow:.62s;
  --t-slower:.9s;
  --stagger:70ms;

  /* Métrica */
  --maxw:1180px;
  --gutter:20px;
  --hdr-h:74px;
  --section-y:clamp(58px,8vw,110px);

  /* Tipografía */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}


/* ============================================================
   02. RESET Y BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
  /* clip, no hidden: recorta el desbordamiento lateral sin crear un
     contenedor de scroll, así la cabecera sticky sigue funcionando. */
  overflow-x:clip;
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:#fff;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

picture{display:contents}
img,svg{display:block;max-width:100%}
img{height:auto}

a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:2px}

button{font:inherit;color:inherit}

::selection{background:var(--gold);color:var(--navy)}

/* Anclas por debajo de la cabecera fija */
section[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}

/* Evita que emails o URLs largas rompan el layout en móvil */
p,li,td,dd,.ans{overflow-wrap:break-word}


/* ============================================================
   03. TIPOGRAFÍA FLUIDA
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.14;
  margin:0 0 .6em;
  letter-spacing:-.012em;
  text-wrap:balance;
}

h1{font-size:clamp(1.95rem,1.35rem + 2.7vw,3.45rem);line-height:1.08}
h2{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.4rem)}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.4rem)}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.lead{
  font-size:clamp(1.02rem,.98rem + .32vw,1.22rem);
  line-height:1.58;
  text-wrap:pretty;
}

.muted{color:var(--ink-soft)}
.sec-navy .muted{color:var(--on-navy-soft)}


/* ============================================================
   04. LAYOUT Y UTILIDADES
   ============================================================ */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{padding-block:var(--section-y)}

.sec-navy{background:var(--navy);color:var(--on-navy)}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-ivory{background:var(--ivory)}

.center{text-align:center}
.narrow{max-width:760px;margin-inline:auto}

.grid{display:grid;gap:20px}
.g2,.g3{grid-template-columns:1fr}

.split{display:grid;gap:clamp(30px,4vw,52px);align-items:center}

[hidden]{display:none !important}

.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;
}
/* El enlace de salto se hace visible al recibir el foco por teclado */
.sr-only:focus-visible{
  position:fixed;inset-block-start:10px;inset-inline-start:10px;z-index:120;
  width:auto;height:auto;margin:0;padding:12px 20px;
  clip:auto;overflow:visible;
  background:#fff;color:var(--navy);font-weight:700;
  border-radius:var(--r-sm);box-shadow:var(--sh-lg);
}

/* Eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
  background:rgba(201,167,101,.10);
  border:1px solid rgba(201,167,101,.34);
  border-radius:var(--r-pill);
  padding:8px 18px;
  margin-bottom:20px;
  line-height:1.3;
}
.sec-navy .eyebrow{color:var(--gold-pale);background:rgba(201,167,101,.14)}
.eyebrow img{height:20px;width:auto}

/* Cita de marca */
.quote{
  position:relative;
  font-family:var(--serif);
  font-size:clamp(1.14rem,1.02rem + .6vw,1.5rem);
  line-height:1.38;
  color:var(--navy);
  margin:28px 0 0;
  padding:6px 0 6px 24px;
  text-wrap:pretty;
}
.quote::before{
  content:"";position:absolute;inset-block:0;left:0;width:3px;
  background:linear-gradient(180deg,var(--gold),rgba(201,167,101,.15));
  border-radius:3px;
  transform:scaleY(1);transform-origin:top;
  transition:transform var(--t-slower) var(--ease-out) 120ms;
}
.js-rv .quote::before{transform:scaleY(0)}
.js-rv .quote.in::before{transform:scaleY(1)}
.sec-navy .quote{color:#fff}

/* Aviso */
.aviso{
  background:rgba(201,167,101,.09);
  border:1px dashed rgba(201,167,101,.5);
  border-radius:var(--r-md);
  padding:18px 20px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.aviso strong{color:var(--navy)}
.sec-navy .aviso{color:var(--on-navy-soft);border-color:rgba(201,167,101,.38)}
.sec-navy .aviso strong{color:var(--gold-pale)}


/* ============================================================
   05. SISTEMA DE MOVIMIENTO
   ------------------------------------------------------------
   El contenido es visible por defecto. La clase .js-rv la añade
   el script solo cuando confirma que puede animar, de modo que
   si JavaScript falla la landing sigue siendo legible.
   ============================================================ */
.js-rv [data-rv]{
  opacity:0;
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
  will-change:opacity,transform;
}
.js-rv [data-rv="up"]     {transform:translate3d(0,26px,0)}
.js-rv [data-rv="left"]   {transform:translate3d(-20px,0,0)}
.js-rv [data-rv="right"]  {transform:translate3d(20px,0,0)}
.js-rv [data-rv="scale"]  {transform:scale(.955)}
.js-rv [data-rv="fade"]   {transform:none}

.js-rv [data-rv].in{opacity:1;transform:none;will-change:auto}

/* En móvil las columnas van apiladas a ancho completo: un
   desplazamiento lateral resultaría antinatural y además empujaría
   contenido fuera del viewport. Ahí el movimiento es vertical. */
@media (max-width:859px){
  .js-rv [data-rv="left"],
  .js-rv [data-rv="right"]{transform:translate3d(0,26px,0)}
}

/* Navegadores sin overflow:clip (Safari < 16): sin desplazamiento
   lateral, para no provocar barra de scroll horizontal. */
@supports not (overflow:clip){
  .js-rv [data-rv="left"],
  .js-rv [data-rv="right"]{transform:translate3d(0,26px,0)}
}

/* Revelado de imágenes: máscara + escala */
.media-rv{overflow:hidden;border-radius:var(--r-lg)}
.media-rv img{
  transform:scale(1.08);
  transition:transform 1.1s var(--ease-out),opacity var(--t-slow) var(--ease-out);
}
.js-rv .media-rv img{opacity:0}
.js-rv .media-rv.in img{opacity:1;transform:scale(1)}

/* Coreografía de entrada del hero (no depende del scroll) */
.js-rv .hero-anim > *{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js-rv.ready .hero-anim > *{opacity:1;transform:none}


/* ============================================================
   06. BOTONES
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;
  padding:15px 30px;
  font-family:var(--sans);font-size:1rem;font-weight:700;line-height:1.3;
  text-align:center;text-decoration:none;
  border:0;border-radius:var(--r-pill);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft);
}

/* Destello que barre el botón al pasar el cursor */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform var(--t-slow) var(--ease-soft);
}

.btn-gold{background:var(--gold);color:var(--navy);box-shadow:var(--sh-gold)}
.btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.sec-navy .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}

.btn-block{width:100%}
.btn-sm{min-height:46px;padding:12px 24px;font-size:.94rem}

@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover::before{transform:translateX(120%)}
  .btn-gold:hover{background:var(--gold-lt);box-shadow:var(--sh-gold-hi)}
  .btn-ghost:hover{background:var(--navy);color:#fff;box-shadow:var(--sh-md)}
  .sec-navy .btn-ghost:hover{background:#fff;color:var(--navy)}
}

.btn:active{transform:translateY(0) scale(.985);transition-duration:var(--t-xs)}

.btn[disabled],.btn[aria-busy="true"]{
  opacity:.62;cursor:not-allowed;transform:none;box-shadow:none;
}

/* Foco visible coherente en toda la web */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.sec-navy :where(a,button):focus-visible{outline-color:var(--gold-pale)}

.microcopy{font-size:.88rem;color:var(--ink-soft);margin-top:14px}
.sec-navy .microcopy,
.hero .microcopy,
.cierre .microcopy{color:var(--on-navy-soft)}

/* Spinner del botón de envío */
.spinner{
  width:18px;height:18px;flex-shrink:0;
  border:2px solid rgba(20,34,92,.28);
  border-top-color:var(--navy);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}


/* ============================================================
   07. CABECERA, NAVEGACIÓN Y PROGRESO
   ============================================================ */
.scroll-progress{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  height:3px;pointer-events:none;
}
.scroll-progress i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-pale));
  transform:scaleX(0);transform-origin:left;
  transition:transform .1s linear;
}

.hdr{
  position:sticky;inset-block-start:0;z-index:90;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-block-end:1px solid transparent;
  transition:
    box-shadow var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft),
    background-color var(--t-base) var(--ease-soft);
}
.hdr::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
  opacity:0;transition:opacity var(--t-base) var(--ease-soft);
}
.hdr.scrolled{background:rgba(255,255,255,.95);box-shadow:0 6px 26px rgba(13,22,66,.07)}
.hdr.scrolled::after{opacity:1}

.hdr-in{
  display:flex;align-items:center;gap:14px;
  max-width:var(--maxw);margin-inline:auto;
  padding:11px var(--gutter);
  transition:padding var(--t-base) var(--ease-out);
}
.hdr.scrolled .hdr-in{padding-block:7px}

.hdr-logo{display:flex;flex-shrink:0;border-radius:6px}
.hdr-logo img{
  height:46px;width:auto;object-fit:contain;
  transition:height var(--t-base) var(--ease-out);
}
.hdr.scrolled .hdr-logo img{height:38px}

.hdr-nav{display:none;flex:1;justify-content:center;gap:clamp(16px,2.2vw,32px)}
.hdr-nav a{
  position:relative;
  padding:8px 2px;
  font-size:.94rem;font-weight:600;
  color:var(--ink);text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft);
}
.hdr-nav a::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:2px;height:2px;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease-out);
}
@media (hover:hover){.hdr-nav a:hover{color:var(--navy)}}
.hdr-nav a:hover::after,
.hdr-nav a[aria-current="true"]::after{transform:scaleX(1)}
.hdr-nav a[aria-current="true"]{color:var(--navy)}

.hdr-cta{display:none}

/* Botón hamburguesa */
.burger{
  margin-inline-start:auto;flex-shrink:0;
  width:46px;height:46px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  cursor:pointer;
  transition:border-color var(--t-fast),background-color var(--t-fast);
}
.burger span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--navy);
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-xs) linear;
}
.burger[aria-expanded="true"]{border-color:var(--gold)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menú móvil: se anima con altura, no con display */
.mobnav{
  display:grid;grid-template-rows:0fr;
  background:#fff;
  transition:grid-template-rows var(--t-base) var(--ease-out);
}
.mobnav > div{overflow:hidden}
.mobnav.open{grid-template-rows:1fr;border-block-start:1px solid var(--line)}
.mobnav-inner{padding:6px var(--gutter) 20px}
.mobnav a:not(.btn){
  display:block;padding:14px 2px;
  color:var(--ink);text-decoration:none;font-weight:600;
  border-block-end:1px solid var(--line);
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
  transition-delay:calc(var(--i,0) * 45ms);
}
.mobnav.open a:not(.btn){opacity:1;transform:none}
.mobnav .btn{margin-block-start:18px}

body.nav-open{overflow:hidden}


/* ============================================================
   08. HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-mid) 0%,var(--navy-deep) 100%);
  color:var(--on-navy);
  padding-block:clamp(44px,6vw,88px) clamp(56px,8vw,104px);
}
.hero::before{
  content:"";position:absolute;inset-block-start:-170px;inset-inline-end:-170px;
  width:min(500px,90vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,167,101,.17),transparent 70%);
  pointer-events:none;
  animation:float 15s var(--ease-in-out) infinite;
}
.hero::after{
  content:"";position:absolute;inset-block-end:-220px;inset-inline-start:-160px;
  width:min(420px,80vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(93,124,224,.14),transparent 70%);
  pointer-events:none;
  animation:float 19s var(--ease-in-out) infinite reverse;
}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-22px,26px,0) scale(1.06)}
}

.hero > .wrap{position:relative;z-index:1}
.hero h1{color:#fff;margin-bottom:20px}
.hero p{color:var(--on-navy)}

.hero-media{position:relative}
.hero-media .media-rv{box-shadow:var(--sh-xl)}
.hero-media img{
  width:100%;
  height:clamp(230px,44vw,450px);
  object-fit:cover;
}

/* Tarjeta de WhatsApp sobre la imagen */
.hero-card{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:14px;
  margin:-32px 14px 0;
  padding:16px 18px;
  background:#fff;border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  color:var(--ink);text-decoration:none;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
@media (hover:hover){
  .hero-card:hover{transform:translateY(-4px);box-shadow:var(--sh-xl)}
  .hero-card:hover .wa-ico{transform:scale(1.08) rotate(-6deg)}
}
.hero-card b{display:block;color:var(--navy);font-size:.97rem;line-height:1.3}
.hero-card small{color:var(--ink-soft);font-size:.82rem}

.wa-ico{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:var(--wa);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--t-base) var(--ease-out);
}

/* ---------- Arranque rápido del hero ----------
   Es la primera pregunta del formulario adelantada. Se usa el importe de
   deuda y no otro dato porque es el menos invasivo y el que mejor autofiltra:
   nadie se incomoda al decir un tramo, y el que está por debajo del mínimo
   lo descubre en el primer segundo.                                        */
.inicio-rapido{
  margin-block:26px 22px;
  padding:18px 20px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(201,167,101,.28);
  border-radius:var(--r-lg);
  backdrop-filter:blur(2px);
}
.ir-titulo{
  margin:0 0 13px;
  font-size:.94rem;font-weight:700;color:var(--gold-pale);
}
.ir-opts{display:flex;flex-wrap:wrap;gap:9px}
.ir-chip{
  flex:1 1 auto;
  min-height:44px;padding:10px 16px;
  font-family:var(--sans);font-size:.9rem;font-weight:600;line-height:1.2;
  color:var(--on-navy);white-space:nowrap;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:
    background-color var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft),
    transform var(--t-fast) var(--ease-out);
}
@media (hover:hover){
  .ir-chip:hover{
    background:var(--gold);border-color:var(--gold);color:var(--navy);
    transform:translateY(-2px);
  }
}
.ir-chip:active{transform:translateY(0) scale(.97)}
.ir-chip.elegido{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* En móvil los tramos van en dos columnas. A una sola, la tarjeta medía
   356 px y caía entera por debajo del pliegue: el arranque rápido dejaba
   de verse justo en el dispositivo donde más importa. */
@media (max-width:859px){
  .ir-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .ir-chip{width:100%;white-space:normal;padding-inline:10px;font-size:.86rem}
  .ir-chip:last-child{grid-column:1 / -1}
}
@media (max-width:339px){
  .ir-opts{grid-template-columns:1fr}
}

/* Aviso en el formulario de que la primera respuesta ya viene del hero */
.ya-respondido{
  display:none;
  margin-bottom:16px;padding:11px 15px;
  background:rgba(201,167,101,.13);
  border:1px solid rgba(201,167,101,.4);
  border-radius:var(--r-sm);
  font-size:.88rem;color:var(--navy);
}
.ya-respondido.ver{display:block}

/* Fila de señales de confianza */
.trust-row{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  margin-block-start:28px;
  font-size:.85rem;color:var(--on-navy-soft);
}
.trust-row span{display:inline-flex;align-items:center;gap:7px}
.trust-row svg{flex-shrink:0;color:var(--gold)}


/* ============================================================
   09. COMPONENTES DE CONTENIDO
   ============================================================ */
/* Listas con check */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checklist li{display:flex;align-items:flex-start;gap:12px;font-size:1.01rem}
.checklist .ic{
  flex-shrink:0;margin-block-start:2px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,167,101,.15);color:var(--gold);
  transition:transform var(--t-base) var(--ease-out),background-color var(--t-base);
}
.js-rv .checklist li{
  opacity:0;transform:translate3d(-14px,0,0);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.js-rv .in .checklist li,
.js-rv .checklist.in li{opacity:1;transform:none}
.js-rv .checklist li:nth-child(1){transition-delay:60ms}
.js-rv .checklist li:nth-child(2){transition-delay:130ms}
.js-rv .checklist li:nth-child(3){transition-delay:200ms}
.js-rv .checklist li:nth-child(4){transition-delay:270ms}
.js-rv .checklist li:nth-child(5){transition-delay:340ms}

/* Tarjetas */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px;
  box-shadow:var(--sh-xs);
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-soft);
}
.card h3{color:var(--navy);margin-bottom:.45em}
.card p{font-size:.97rem;color:var(--ink-soft)}
@media (hover:hover){
  .card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(201,167,101,.55)}
}

/* Criterios de precalificación */
.crit{display:grid;gap:16px}
.crit-item{
  position:relative;
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.crit-item::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;
  background:var(--gold);
  transform:scaleY(.35);transform-origin:center;
  transition:transform var(--t-base) var(--ease-out);
}
@media (hover:hover){
  .crit-item:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
  .crit-item:hover::before{transform:scaleY(1)}
  .crit-item:hover .crit-num{color:var(--gold-lt);transform:translateY(-2px)}
}
.crit-num{
  flex-shrink:0;padding-block-start:2px;
  font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--gold);
  transition:transform var(--t-base) var(--ease-out),color var(--t-base);
}
.crit-item b{display:block;margin-bottom:3px;color:var(--navy);font-size:1.04rem}
.crit-item p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* Tipos de deuda */
.tags{display:grid;gap:12px}
.tag{
  display:flex;align-items:center;gap:12px;
  padding:13px 22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--navy);font-weight:600;font-size:.95rem;
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-out);
}
.tag .ic{display:flex;flex-shrink:0;color:var(--gold);transition:transform var(--t-base) var(--ease-out)}
@media (hover:hover){
  .tag:hover{transform:translateY(-3px);border-color:rgba(201,167,101,.6);box-shadow:var(--sh-sm)}
  .tag:hover .ic{transform:scale(1.14)}
}


/* ============================================================
   10. PROCESO
   ============================================================ */
.steps{
  position:relative;display:grid;gap:20px;
  list-style:none;margin:0;padding:0;
}

/* Raíl vertical que se rellena al entrar en pantalla.
   Se dibuja con pseudoelementos para no romper el <ol>. */
.steps::before,
.steps::after{
  content:"";position:absolute;
  inset-block:26px;inset-inline-start:22px;
  width:2px;border-radius:2px;
  pointer-events:none;
}
.steps::before{background:rgba(201,167,101,.22)}
.steps::after{
  background:linear-gradient(180deg,var(--gold),rgba(201,167,101,.35));
  transform:scaleY(1);transform-origin:top;
  transition:transform 1.4s var(--ease-out) 180ms;
}
.js-rv .steps::after{transform:scaleY(0)}
.js-rv .steps.in::after{transform:scaleY(1)}

.step{position:relative;display:flex;align-items:flex-start;gap:18px}
.step-n{
  position:relative;z-index:1;flex-shrink:0;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--gold);
  color:var(--gold);
  font-family:var(--serif);font-weight:700;font-size:1.14rem;
  transition:
    background-color var(--t-base) var(--ease-soft),
    color var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-out);
}
@media (hover:hover){
  .step:hover .step-n{background:var(--gold);color:var(--navy);transform:scale(1.06)}
}
.step b{
  display:block;margin-bottom:4px;
  font-family:var(--serif);font-weight:600;font-size:1.07rem;color:#fff;
}
.step p{margin:0;font-size:.96rem;color:var(--on-navy-soft)}

.js-rv .steps .step{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.js-rv .steps.in .step{opacity:1;transform:none}
.js-rv .steps .step:nth-child(2){transition-delay:.10s}
.js-rv .steps .step:nth-child(3){transition-delay:.22s}
.js-rv .steps .step:nth-child(4){transition-delay:.34s}
.js-rv .steps .step:nth-child(5){transition-delay:.46s}
.js-rv .steps .step:nth-child(6){transition-delay:.58s}


/* ============================================================
   11. FAQ
   ============================================================ */
.faq{max-width:820px;margin-inline:auto;border-block-start:1px solid var(--line)}

.faq details{border-block-end:1px solid var(--line)}

.faq summary{
  position:relative;
  display:block;list-style:none;
  padding:22px 46px 22px 0;
  font-weight:700;font-size:1.02rem;color:var(--navy);
  cursor:pointer;
  transition:color var(--t-fast) var(--ease-soft);
}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{color:var(--gold)}}

/* Indicador +/− */
.faq summary::after,
.faq summary::before{
  content:"";position:absolute;inset-inline-end:10px;inset-block-start:50%;
  width:13px;height:2px;border-radius:2px;background:var(--gold);
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast);
}
.faq summary::before{transform:translateY(-50%)}
.faq summary::after{transform:translateY(-50%) rotate(90deg)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(0deg);opacity:0}

/* Altura animada mediante grid (solo cuando el script lo activa).
   En reposo el estado real lo marca el atributo open; la clase
   .collapsed es la que anima, manteniendo el contenido presente
   mientras dura la transición de cierre. */
.js-faq .faq .ans-wrap{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows var(--t-base) var(--ease-out);
}
.js-faq .faq details.collapsed .ans-wrap{grid-template-rows:0fr}
.js-faq .faq .ans-inner{overflow:hidden}

.faq .ans{
  padding:0 24px 24px 0;
  color:var(--ink-soft);font-size:.97rem;
}


/* ============================================================
   12. FORMULARIO
   ============================================================ */
.form-shell{
  position:relative;
  padding:clamp(22px,3.4vw,42px);
  background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);
  color:var(--ink);
}

/* Barra de progreso por pasos */
.progress{display:flex;gap:8px;margin-bottom:12px}
.progress i{
  position:relative;flex:1;height:4px;border-radius:var(--r-pill);
  background:var(--line);overflow:hidden;
}
.progress i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease-out);
}
.progress i.on::after{transform:scaleX(1)}

.step-label{
  margin-bottom:8px;
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);
}

/* Contenedor con altura animada entre pasos */
.fsteps{position:relative;transition:height var(--t-base) var(--ease-out)}
.fstep{display:none}
.fstep.active{display:block}
.js-form .fstep.active{
  opacity:1;transform:none;
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.js-form .fstep.enter-right{opacity:0;transform:translate3d(28px,0,0)}
.js-form .fstep.enter-left {opacity:0;transform:translate3d(-28px,0,0)}

.fstep > h3{color:var(--navy);margin-bottom:20px}

/* Campos */
.field{margin-bottom:18px}
.field label,.legend{
  display:block;margin-bottom:7px;
  font-weight:600;font-size:.94rem;color:var(--navy);
  transition:color var(--t-fast) var(--ease-soft);
}
.field:focus-within label{color:var(--gold)}

.field input,.field select{
  width:100%;
  /* 16px mínimo: evita el zoom automático de Safari en iOS */
  font-family:var(--sans);font-size:max(16px,1rem);color:var(--ink);
  padding:14px 15px;
  background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:
    border-color var(--t-fast) var(--ease-soft),
    box-shadow var(--t-fast) var(--ease-soft),
    background-color var(--t-fast);
}
.field input::placeholder{color:#a8adc0}

.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-inline-end:44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a765' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;
}

.field input:focus,.field select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,167,101,.16);
}

.field.err input,.field.err select{border-color:var(--danger)}
.field.err input:focus,.field.err select:focus{box-shadow:0 0 0 4px rgba(192,57,43,.14)}

.err-msg{
  display:grid;grid-template-rows:0fr;
  color:var(--danger);font-size:.85rem;
  transition:grid-template-rows var(--t-fast) var(--ease-out),margin var(--t-fast);
}
.err-msg > span{overflow:hidden}
.field.err .err-msg,fieldset.err .err-msg{grid-template-rows:1fr;margin-block-start:6px}

/* Sacudida breve al validar */
.shake{animation:shake .42s var(--ease-soft)}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}
  40%,60%{transform:translateX(6px)}
}

/* Opciones tipo píldora */
fieldset{margin:0 0 18px;padding:0;border:0}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative;flex:1 1 92px;min-width:92px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{
  display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-weight:600;font-size:.93rem;color:var(--ink-soft);
  text-align:center;cursor:pointer;
  transition:
    border-color var(--t-fast) var(--ease-soft),
    background-color var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft),
    transform var(--t-fast) var(--ease-out);
}
@media (hover:hover){.opt:hover span{border-color:rgba(201,167,101,.55)}}
.opt input:checked + span{
  border-color:var(--gold);
  background:rgba(201,167,101,.13);
  color:var(--navy);
}
.opt span:active{transform:scale(.97)}
.opt input:focus-visible + span{outline:3px solid var(--gold);outline-offset:3px}

/* Consentimientos */
.consent{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:8px;
  font-size:.87rem;color:var(--ink-soft);cursor:pointer;
}
.consent input{
  flex-shrink:0;width:20px;height:20px;margin-block-start:2px;
  accent-color:var(--gold);cursor:pointer;
}
.consent a{color:var(--navy);font-weight:600}

.fnav{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:24px}
.fnav .btn{flex:1 1 150px}

.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

.form-note{
  display:flex;align-items:flex-start;gap:8px;
  margin-block-start:16px;
  font-size:.85rem;color:var(--ink-soft);
}
.form-note svg{flex-shrink:0;margin-block-start:2px;color:var(--gold)}

/* Pantallas de resultado */
.result{display:none;padding-block:14px;text-align:center}
.result.show{display:block;animation:resultIn var(--t-slow) var(--ease-out) both}
@keyframes resultIn{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to  {opacity:1;transform:none}
}
.result-ico{
  width:70px;height:70px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.result h3{color:var(--navy);font-size:clamp(1.28rem,1.1rem + .8vw,1.7rem)}
.result p{color:var(--ink-soft)}

/* Trazo del check animado */
.draw{stroke-dasharray:32;stroke-dashoffset:32;animation:draw .6s var(--ease-out) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Aro pulsante alrededor del icono de éxito */
.pulse{position:relative}
.pulse::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--gold);
  animation:pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse{
  0%  {transform:scale(1);opacity:.55}
  70% {transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}

.next-steps{
  margin:24px 0;padding:22px;
  background:var(--ivory);border-radius:var(--r-md);
  text-align:start;
}
.next-steps b{display:block;margin-bottom:12px;color:var(--navy)}
.next-steps .checklist li{font-size:.94rem}


/* ============================================================
   13. CIERRE Y PIE
   ============================================================ */
/* El degradado arranca en el mismo azul que la sección del formulario y
   termina en el del pie, de modo que toda la parte baja de la página es
   una única transición continua, sin costura entre bloques. */
.cierre{
  position:relative;text-align:center;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--on-navy);
}
/* Sin halo radial: al ser más alto que la sección, overflow:hidden lo
   cortaba en seco contra los bordes y dibujaba una línea visible en la
   unión con el formulario. El degradado vertical ya da profundidad. */
.cierre > .wrap{position:relative;z-index:1}
.cierre h2{color:#fff}

.claim{
  margin:28px 0 32px;
  font-family:var(--serif);
  font-size:clamp(1.45rem,1.1rem + 1.6vw,2.2rem);
  line-height:1.28;color:var(--gold-pale);
  text-wrap:balance;
}

.ftr{
  background:var(--navy-deep);color:var(--on-navy-soft);
  padding-block:52px 28px;font-size:.89rem;
}
.ftr-grid{display:grid;gap:32px;margin-bottom:34px}
.ftr-brand img{height:52px;width:auto;object-fit:contain;margin-bottom:14px}
.ftr h4{
  margin:0 0 14px;
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;
}
.ftr a{
  display:inline-block;padding-block:5px;
  color:var(--on-navy-soft);text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-out);
}
.ftr nav a{display:block}
@media (hover:hover){.ftr a:hover{color:var(--gold-lt);transform:translateX(3px)}}

.ftr-legal{
  padding-block-start:22px;
  border-block-start:1px solid var(--line-dark);
  font-size:.81rem;line-height:1.65;
}
.ftr-legal p{margin-bottom:.8em}


/* ============================================================
   14. ELEMENTOS FLOTANTES
   ============================================================ */
/* FAB de WhatsApp: solo escritorio (en móvil va en la barra inferior) */
.wa-fab{
  position:fixed;z-index:80;
  inset-block-end:26px;inset-inline-end:26px;
  width:60px;height:60px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:var(--wa);box-shadow:0 10px 30px rgba(13,22,66,.32);
  text-decoration:none;
  transform:scale(0);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base);
}
.wa-fab.show{transform:scale(1)}
@media (hover:hover){.wa-fab:hover{transform:scale(1.08);box-shadow:0 14px 36px rgba(13,22,66,.4)}}

/* Barra inferior móvil: WhatsApp + CTA */
.mobile-bar{
  position:fixed;z-index:85;
  inset-inline:0;inset-block-end:0;
  display:flex;align-items:center;gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-block-start:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(13,22,66,.08);
  transform:translateY(120%);
  transition:transform var(--t-base) var(--ease-out);
}
.mobile-bar.show{transform:none}
.mobile-bar .btn{flex:1;min-height:50px;padding-inline:18px;font-size:.95rem}
.mobile-bar .wa-btn{
  flex-shrink:0;width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--wa);
  transition:transform var(--t-fast) var(--ease-out);
}
.mobile-bar .wa-btn:active{transform:scale(.94)}


/* ============================================================
   15. COOKIES
   ============================================================ */
.cookie{
  position:fixed;z-index:95;
  inset-inline:12px;inset-block-end:12px;
  padding:20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
}
.cookie.show{
  opacity:1;visibility:visible;transform:none;
  transition-delay:0s;
}
.cookie p{margin-bottom:14px;font-size:.87rem;color:var(--ink-soft)}
.cookie-btns{display:flex;flex-wrap:wrap;gap:10px}
.cookie-btns .btn{flex:1 1 130px;min-height:46px;padding:12px 18px;font-size:.9rem}


/* ============================================================
   16. RESPONSIVE
   ------------------------------------------------------------
   Móvil primero. Cada salto resuelve un problema concreto,
   no un tamaño de dispositivo.
   ============================================================ */

/* --- Móviles muy estrechos (≤ 359 px) ------------------------ */
@media (max-width:359px){
  :root{--gutter:16px}
  body{font-size:16px}
  .btn{padding-inline:22px;font-size:.94rem}
  .hero-card{margin-inline:8px;padding:14px}
  .hero-card small{display:none}
  .eyebrow{font-size:.68rem;padding:7px 14px}
  .crit-item{padding:18px}
  .tag{padding:12px 18px;font-size:.9rem}
  .opt{flex-basis:100%}
  .mobile-bar .btn{font-size:.88rem;padding-inline:12px}
}

/* --- Orden del hero en móvil --------------------------------- */
/* El texto de apoyo baja por debajo del CTA para que los tramos entren
   en la primera pantalla. En escritorio manda el orden del documento,
   que es el que mejor se lee. */
@media (max-width:859px){
  .hero-anim{display:flex;flex-direction:column}
  .hero-anim > .eyebrow      {order:1;align-self:flex-start}
  .hero-anim > h1            {order:2}
  .hero-anim > .lead         {order:3}
  .hero-anim > .inicio-rapido{order:4}
  .hero-anim > .btn          {order:5}
  .hero-anim > .muted        {order:6;margin-top:22px}
  .hero-anim > .microcopy    {order:7}
  .hero-anim > .trust-row    {order:8}
}

/* --- Dos columnas para rejillas cortas (≥ 600 px) ------------ */
@media (min-width:600px){
  .g2,.crit,.tags{grid-template-columns:repeat(2,1fr)}
  .cookie{inset-inline:auto 22px;inset-block-end:22px;max-width:400px}
  .form-shell{padding:34px}
}

/* --- Tablet: el hero pasa a dos columnas (≥ 860 px) ---------- */
@media (min-width:860px){
  .g3{grid-template-columns:repeat(3,1fr)}
  .tags{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .hero .split{grid-template-columns:1.05fr .95fr}

  /* La tarjeta de WhatsApp se superpone a la imagen */
  .hero-card{
    position:absolute;z-index:2;
    inset-block-end:-26px;inset-inline-start:-22px;
    width:268px;margin:0;
  }

  .ftr-grid{grid-template-columns:1.5fr 1fr 1fr}
  .steps{gap:22px}
}

/* --- Escritorio: navegación completa (≥ 1000 px) ------------- */
@media (min-width:1000px){
  :root{--hdr-h:82px}
  .hdr-nav{display:flex}
  .hdr-cta{display:inline-flex}
  .burger,.mobnav,.mobile-bar{display:none !important}
  .wa-fab{display:flex}
  .hdr-logo img{height:54px}
  .hdr.scrolled .hdr-logo img{height:44px}
  .faq summary{font-size:1.05rem}
}

/* --- Pantallas amplias (≥ 1200 px) --------------------------- */
@media (min-width:1200px){
  :root{--gutter:28px}
  body{font-size:17.5px}
  .grid{gap:24px}
  .card{padding:30px}
}

/* --- Móvil en horizontal ------------------------------------ */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-block:32px 40px}
  .hero-media img{height:200px}
  section{padding-block:44px}
  .mobile-bar{padding-block:6px}
  .mobile-bar .btn,.mobile-bar .wa-btn{min-height:44px;height:44px}
  .cookie{max-height:74vh;overflow-y:auto}
}

/* --- Pantallas de alta densidad ------------------------------ */
@media (min-resolution:2dppx){
  body{-webkit-font-smoothing:antialiased}
}

/* --- Impresión ----------------------------------------------- */
@media print{
  .hdr,.mobile-bar,.wa-fab,.cookie,.scroll-progress,.mobnav,#formulario{display:none !important}
  body{font-size:11pt;color:#000;background:#fff}
  .sec-navy,.hero,.cierre{background:#fff !important;color:#000 !important}
  .sec-navy h2,.sec-navy h3,.hero h1,.cierre h2{color:#000 !important}
  .faq details{break-inside:avoid}
  .faq .ans-wrap{display:block !important;grid-template-rows:none !important}
}


/* ============================================================
   17. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }

  /* Todo visible de inmediato, sin desplazamientos */
  .js-rv [data-rv],
  .js-rv .hero-anim > *,
  .js-rv .checklist li,
  .js-rv .steps .step,
  .js-rv .media-rv img{opacity:1 !important;transform:none !important}

  .js-rv .steps .steps-track i,
  .js-rv .quote::before{transform:scaleY(1) !important}

  .hero::before,.hero::after,.pulse::before{animation:none}
  .btn::before{display:none}
}

/* Contraste alto */
@media (prefers-contrast:more){
  :root{--ink-soft:#3d4358;--on-navy-soft:#c6cdf0;--line:#c9c0a8}
  .btn-gold{background:#b8934c;color:#0d1642}
}