:root{
  --fondo:#f6f7fb; --blanco:#fff; --tinta:#141a2e; --suave:#5b6380; --borde:#dfe3ef;
  --indigo:#2f3b8f; --indigo-osc:#1e275f; --indigo-cl:#e8ebfa; --ambar:#f5a524; --ambar-cl:#fff4dc;
  --ok:#15803d; --mal:#c2410c; --rojo:#b91c1c; --radio:16px; --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--tinta);background:var(--fondo);line-height:1.7;font-size:17px}
svg{max-width:100%;display:block}
a{color:var(--indigo)}
h1,h2,h3{font-family:"Plus Jakarta Sans",system-ui,sans-serif;line-height:1.15;color:var(--tinta);letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.45rem);font-weight:800;margin-bottom:.5rem}
h3{font-size:1.1rem;font-weight:700;margin-bottom:.3rem}
p+p{margin-top:.8rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.eyebrow{display:inline-block;font-family:"Plus Jakarta Sans",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);background:var(--indigo-cl);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.intro{max-width:700px;color:var(--suave);margin-bottom:34px}
section[id]{scroll-margin-top:74px}

.aviso-top{background:var(--ambar);color:#3a2600;text-align:center;font-size:.86rem;font-weight:600;padding:9px 16px}

header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:1.25rem;color:var(--tinta);text-decoration:none}
.logo svg{width:34px;height:34px}
.logo small{display:block;font-size:.68rem;font-weight:600;color:var(--suave);letter-spacing:.02em;margin-top:-4px}
nav.menu{display:flex;gap:4px}
nav.menu a{text-decoration:none;color:var(--suave);font-weight:600;font-size:.88rem;padding:6px 11px;border-radius:10px;transition:all .2s}
nav.menu a:hover,nav.menu a.activo{background:var(--indigo-cl);color:var(--indigo)}
.progreso{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:linear-gradient(90deg,var(--indigo),var(--ambar))}

/* HERO */
.hero{background:linear-gradient(160deg,var(--indigo-osc),var(--indigo));color:#fff;padding:72px 0 0;overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{color:#fff}
.hero h1 span{color:var(--ambar)}
.hero p.lead{color:#cfd5f5;font-size:1.13rem;margin:20px 0 28px;max-width:560px}
.btn{display:inline-block;background:var(--ambar);color:#2a1c00;font-weight:700;text-decoration:none;padding:14px 26px;border-radius:12px;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.25)}
.btn.sec{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);margin-left:8px}
.garantias{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.garantias span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;font-size:.84rem;font-weight:600;color:#e6e9fb}
.garantias span::before{content:"✓ ";color:var(--ambar)}
.carretera{position:relative;height:150px;margin-top:56px;background:#1a2150;border-top:6px solid #11173d}
.carretera .linea{position:absolute;top:70px;left:0;width:200%;height:6px;background:repeating-linear-gradient(90deg,var(--ambar) 0 50px,transparent 50px 100px);animation:via 1.6s linear infinite}
@keyframes via{to{transform:translateX(-100px)}}
.carro{position:absolute;top:22px;left:8%;width:170px;animation:rebote .5s ease-in-out infinite alternate}
@keyframes rebote{to{transform:translateY(-2px)}}
.hero-tarjeta{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:26px}
.hero-tarjeta h3{color:#fff}
.hero-tarjeta p{color:#cfd5f5;font-size:.95rem}
.donut{display:flex;gap:24px;align-items:center;margin-top:12px}
.donut svg{width:140px;height:140px;flex:0 0 140px}
.donut circle{transition:stroke-dasharray 1.6s ease}
.donut ul{list-style:none;font-size:.92rem;color:#e6e9fb}
.donut li{margin-top:6px}
.donut i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}

section.bloque{padding:84px 0}
section.alt{background:#fff;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}

/* Qué es */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:24px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(20,26,46,.07)}
section.alt .card{background:var(--fondo)}
.card .ico{width:46px;height:46px;border-radius:14px;background:var(--indigo-cl);color:var(--indigo);display:grid;place-items:center;margin-bottom:14px}
.card .ico svg{width:24px;height:24px}
.card p{color:var(--suave);font-size:.95rem}

/* Comparador de obligaciones */
.oblig{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}
.oblig-btns{display:grid;gap:10px}
.oblig-btns button{text-align:left;background:#fff;border:1.5px solid var(--borde);border-radius:14px;padding:16px 18px;font:700 1rem "Plus Jakarta Sans",system-ui,sans-serif;color:var(--tinta);cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}
.oblig-btns button small{display:block;font:500 .82rem "Inter",system-ui,sans-serif;color:var(--suave)}
.oblig-btns button[aria-selected="true"]{border-color:var(--indigo);background:var(--indigo-cl)}
.oblig-panel{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:28px;animation:entra .4s ease}
.oblig-panel[hidden]{display:none}
.oblig-panel dl{display:grid;grid-template-columns:150px 1fr;gap:12px 18px;margin-top:14px}
.oblig-panel dt{font-weight:700;color:var(--indigo)}
.oblig-panel dd{color:var(--suave)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Ciclo */
.ciclo{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.ciclo::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:4px;background:var(--borde)}
.ciclo .barra{position:absolute;top:26px;left:10%;height:4px;width:0;background:linear-gradient(90deg,var(--indigo),var(--ambar));transition:width 1.8s ease}
.ciclo.visible .barra{width:80%}
.paso-c{text-align:center;padding:0 10px;position:relative}
.paso-c .n{width:56px;height:56px;border-radius:50%;background:#fff;border:4px solid var(--indigo);display:grid;place-items:center;margin:0 auto 14px;font-family:"Plus Jakarta Sans";font-weight:800;color:var(--indigo);position:relative;z-index:1}
.paso-c p{color:var(--suave);font-size:.9rem}

/* Calculadora */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
.calc-form{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:28px}
.campo{margin-bottom:22px}
.campo label{display:flex;justify-content:space-between;gap:12px;font-weight:700;margin-bottom:8px}
.campo output{color:var(--indigo);font-family:"Plus Jakarta Sans";white-space:nowrap}
input[type=range]{width:100%;accent-color:var(--indigo)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{border:1.5px solid var(--borde);background:#fff;border-radius:10px;padding:10px;font:700 .92rem "Inter",system-ui,sans-serif;color:var(--suave);cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--indigo);background:var(--indigo-cl);color:var(--indigo)}
.calc-res{background:var(--indigo-osc);color:#fff;border-radius:var(--radio);padding:28px;display:flex;flex-direction:column;justify-content:center}
.calc-res .valor{font-family:"Plus Jakarta Sans";font-size:2.5rem;font-weight:800;color:var(--ambar);line-height:1.1}
.calc-res p{color:#cfd5f5;font-size:.93rem;margin-top:10px}
.calc-res .reparto{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.calc-res .reparto div{background:rgba(255,255,255,.08);border-radius:12px;padding:12px}
.calc-res .reparto b{display:block;font-family:"Plus Jakarta Sans";font-size:1.1rem}
.calc-res .reparto span{font-size:.8rem;color:#cfd5f5}
.aviso-calc{background:var(--ambar-cl);border:1px solid #f3d38c;border-radius:12px;padding:14px 16px;font-size:.88rem;color:#5a3d00;margin-top:16px}

/* Fraude */
.fraude{background:#fff;border:2px solid var(--rojo);border-radius:22px;padding:34px;position:relative}
.fraude .sello{position:absolute;top:-16px;left:28px;background:var(--rojo);color:#fff;font:800 .78rem "Plus Jakarta Sans";letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.fraude-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.fraude-item{display:flex;gap:12px;background:var(--fondo);border-radius:12px;padding:16px}
.fraude-item b{flex:0 0 28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:.9rem}
.fraude-item.si b{background:var(--ok)}
.fraude-item.no b{background:var(--rojo)}
.fraude-item p{color:var(--suave);font-size:.94rem}
.fraude-item strong{color:var(--tinta)}

/* FAQ */
details{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:18px 22px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700;font-family:"Plus Jakarta Sans",sans-serif}
details p{margin-top:10px;color:var(--suave)}

/* Quiz */
.quiz{max-width:760px;margin:0 auto}
.pregunta{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--radio);padding:22px 24px;margin-bottom:14px}
.pregunta h3{font-size:1.02rem}
.opciones{display:flex;gap:10px;margin-top:12px}
.opciones button{border:1.5px solid var(--borde);background:#fff;padding:9px 20px;border-radius:10px;font:700 .9rem "Inter",system-ui,sans-serif;cursor:pointer;color:var(--tinta)}
.opciones button:disabled{cursor:default}
.opciones button.bien{background:#dcfce7;border-color:var(--ok);color:#166534}
.opciones button.malo{background:#ffedd5;border-color:var(--mal);color:#9a3412}
.explica{margin-top:12px;color:var(--suave);font-size:.95rem;display:none}
.explica.ver{display:block;animation:entra .4s ease}
.marcador{text-align:center;font-family:"Plus Jakarta Sans";font-weight:800;color:var(--indigo);margin-top:18px}

.nota-final{background:#fff;border:1px solid var(--borde);border-left:5px solid var(--ambar);border-radius:var(--radio);padding:26px}
.nota-final p{color:var(--suave)}
.nota-final strong{color:var(--tinta)}
.fuente{font-size:.8rem;color:var(--suave);margin-top:14px;font-style:italic}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}

.subir{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:14px;background:var(--indigo);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:30}
.subir.ver{opacity:1;pointer-events:auto}

footer.site{background:var(--tinta);color:#b9bfd6;padding:48px 0 24px;font-size:.93rem}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
footer.site h4{color:#fff;margin-bottom:10px;font-size:1rem;font-family:"Plus Jakarta Sans",sans-serif}
footer.site a{color:#b9bfd6}
footer.site a:hover{color:var(--ambar)}
footer.site ul{list-style:none}
footer.site li+li{margin-top:6px}
.legal-bar{border-top:1px solid #2b3352;margin-top:28px;padding-top:16px;font-size:.82rem;color:#8a91ad}

.legal{max-width:820px;margin:0 auto;padding:48px 20px 64px}
.legal h1{font-size:2.1rem;margin-bottom:6px}
.legal .fecha{color:var(--suave);font-size:.9rem;margin-bottom:28px}
.legal h2{font-size:1.15rem;margin:28px 0 8px;color:var(--indigo)}
.legal p,.legal li{color:#333a52}
.legal ul{padding-left:22px;margin-top:8px}
.legal li+li{margin-top:4px}
.datos-legal{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:18px 20px;margin-top:10px}

@media (max-width:900px){
  .hero .wrap,.oblig,.calc,.fraude-grid,footer.site .cols{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .ciclo{grid-template-columns:1fr;gap:18px}
  .ciclo::before,.ciclo .barra{display:none}
  .paso-c{display:flex;gap:14px;text-align:left;align-items:flex-start}
  .paso-c .n{margin:0;flex:0 0 48px;width:48px;height:48px}
  nav.menu{display:none}
  .hero{padding-top:48px}
  section.bloque{padding:60px 0}
  .btn.sec{margin:10px 0 0}
  .oblig-panel dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}