:root{
  --papel:#FBFCFE; --tinta:#1F3FAE; --grafito:#1E2330; --suave:#5B6478;
  --renglon:#DCE5F4; --margen:#D4463D; --superficie:#FFFFFF; --borde:#D3DAE6;
  --sombra:0 1px 0 rgba(30,35,48,.06),0 18px 40px -24px rgba(31,63,174,.35);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --papel:#0E1424; --tinta:#93A9FF; --grafito:#E6EAF2; --suave:#9AA4BA;
    --renglon:#1F2A44; --margen:#E3685F; --superficie:#141C30; --borde:#26324F;
    --sombra:0 18px 40px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--grafito);
  font:400 1.0625rem/1.6 "Literata",Georgia,"Times New Roman",serif}
h1,h2,h3,.marca,.boton,nav{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif}
a{color:var(--tinta);text-underline-offset:.18em}
a:focus-visible,.boton:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:4px}
.envoltura{max-width:68rem;margin:0 auto;padding:0 1.5rem}
header.sitio{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0}
.marca{font-size:1.9rem;font-weight:800;letter-spacing:-.04em;color:var(--tinta);text-decoration:none}
nav a{color:var(--suave);text-decoration:none;margin-left:1.4rem;font-size:.98rem}
nav a:hover{color:var(--tinta)}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;padding:3.5rem 0 5rem}
.hero h1{font-size:clamp(2.7rem,6.4vw,5rem);line-height:.98;letter-spacing:-.045em;font-weight:800;margin:0 0 1.4rem}
.hero p.bajada{font-size:1.22rem;max-width:32rem;color:var(--suave);margin:0 0 2rem}
.boton{display:inline-block;background:var(--tinta);color:var(--papel);text-decoration:none;font-weight:700;
  padding:.85rem 1.4rem;border-radius:999px;font-size:1.02rem}
.boton:hover{filter:brightness(1.08)}
.nota-cta{display:block;margin-top:.9rem;font-size:.92rem;color:var(--suave)}

/* Cuaderno */
.cuaderno{position:relative;background:var(--superficie);border-radius:6px 18px 18px 6px;box-shadow:var(--sombra);
  padding:2.2rem 1.8rem 2.2rem 4.2rem;line-height:2.25rem;
  background-image:linear-gradient(var(--superficie) 2.2rem,transparent 2.2rem),
    repeating-linear-gradient(transparent 0,transparent calc(2.25rem - 1px),var(--renglon) calc(2.25rem - 1px),var(--renglon) 2.25rem);
  background-position:0 0,0 2.2rem}
.cuaderno::before{content:"";position:absolute;top:0;bottom:0;left:3rem;width:2px;background:var(--margen);opacity:.75}
.cuaderno .fecha{font:500 .9rem/2.25rem "Bricolage Grotesque",system-ui,sans-serif;color:var(--suave);margin:0}
.pregunta{font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-size:1.75rem;color:var(--tinta);margin:0;line-height:2.25rem}
.respuesta{margin:0 0 0 .2rem;font-size:1rem;line-height:2.25rem}
.respuesta strong{font-family:"Bricolage Grotesque",system-ui,sans-serif}
.cuaderno .linea{opacity:0;transform:translateY(6px);animation:escribe .55s ease forwards}
.cuaderno .l2{animation-delay:.5s}.cuaderno .l3{animation-delay:1.3s}.cuaderno .l4{animation-delay:1.9s}.cuaderno .l5{animation-delay:2.6s}
@keyframes escribe{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cuaderno .linea{animation:none;opacity:1;transform:none}}

/* Secciones */
section.bloque{padding:4rem 0;border-top:1px solid var(--borde)}
section.bloque h2{font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 1.2rem;max-width:36rem}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.dos h3{font-size:1.25rem;margin:0 0 .5rem}
.dos p,.texto p{margin:0 0 1rem;max-width:36rem}
ol.pasos{list-style:none;counter-reset:paso;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
ol.pasos li{counter-increment:paso;position:relative;padding-top:3.4rem}
ol.pasos li::before{content:counter(paso);position:absolute;top:0;left:0;font:800 2.6rem/1 "Bricolage Grotesque",system-ui,sans-serif;color:var(--tinta)}
ol.pasos h3{font-size:1.2rem;margin:0 0 .4rem}
ol.pasos p{margin:0}
.privacidad{background:var(--superficie);border-left:4px solid var(--margen);padding:2rem 2.2rem;border-radius:0 12px 12px 0;max-width:46rem}
.privacidad p{margin:0 0 .8rem}.privacidad p:last-child{margin:0}
.piloto{text-align:left}
.piloto p{max-width:34rem;margin:0 0 1.6rem}

footer.sitio{border-top:1px solid var(--borde);padding:2.2rem 0 3rem;font-size:.92rem;color:var(--suave)}
footer.sitio .pie{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer.sitio p{margin:0 0 .3rem}
footer.sitio a{color:var(--suave)}

/* Páginas legales */
.legal{max-width:44rem;padding:2.5rem 0 4rem}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.04em;line-height:1.02;margin:0 0 .6rem}
.legal .vigencia{color:var(--suave);margin:0 0 2.5rem}
.legal h2{font-size:1.35rem;margin:2.4rem 0 .6rem;letter-spacing:-.01em}
.legal p,.legal li{line-height:1.7}
.legal ul{padding-left:1.2rem}
.legal .recuadro{border:1px solid var(--borde);background:var(--superficie);padding:1.2rem 1.4rem;border-radius:10px;font-size:.96rem}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:2.5rem;padding:2rem 0 3.5rem}
  .dos,ol.pasos{grid-template-columns:1fr;gap:2rem}
  nav a{margin-left:1rem}
}
@media (max-width:520px){
  .cuaderno{padding:2.2rem 1.1rem 2.2rem 3.1rem}
  .cuaderno::before{left:2.2rem}
  .pregunta{font-size:1.5rem}
  nav a.secundario{display:none}
}