/* Violetta Marqués — noche de nieve arriba, papel de libro para leer, cinta roja como en la portada */
@font-face{font-family:"Fredoka";src:url("fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}
:root{
  --noche:#16224d; --noche-2:#22336e; --papel:#fbf5e9; --papel-2:#f2e7d0;
  --tinta:#2a2233; --tinta-suave:#5d5268; --rojo:#c62a2f; --rojo-osc:#9e1d22;
  --verde:#1f6a3d; --oro:#f3c24f; --nieve:#ffffff;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --texto:"Nunito","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.6}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

header.top{background:var(--noche);color:var(--nieve)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;flex-wrap:wrap}
.marca{font-family:var(--display);font-weight:600;font-size:26px;text-decoration:none}
.marca span{color:var(--oro)}
header.top nav{display:flex;gap:20px;font-weight:700;font-size:15px}
header.top nav a{text-decoration:none;opacity:.9}
header.top nav a:hover{opacity:1;text-decoration:underline}

.hero{background:radial-gradient(1200px 500px at 80% -10%,var(--noche-2),var(--noche) 60%);color:var(--nieve);position:relative;overflow:hidden}
.nieve{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding-block:48px 64px}
.eyebrow{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--oro)}
.hero h1{font-size:clamp(34px,5vw,54px);font-weight:700;margin-block:12px 16px}
.lead{font-size:19px;opacity:.92;max-width:34ch}
.botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:18px;padding:14px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
.btn-rojo{background:var(--rojo);color:var(--nieve);box-shadow:0 4px 0 var(--rojo-osc)}
.btn-rojo:hover{transform:translateY(-1px)}
.btn-claro{background:transparent;color:var(--nieve);border:2px solid rgba(255,255,255,.55)}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.mockup{border-radius:14px;box-shadow:0 24px 50px rgba(0,0,0,.45);width:100%;height:auto;display:block}

.cinta{display:inline-block;background:var(--rojo);color:var(--nieve);font-family:var(--display);font-weight:600;font-size:15px;padding:6px 18px;position:relative;letter-spacing:.02em}
.cinta::before,.cinta::after{content:"";position:absolute;top:0;bottom:0;width:12px;background:var(--rojo-osc)}
.cinta::before{left:-10px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,45% 50%)}
.cinta::after{right:-10px;clip-path:polygon(0 0,100% 0,55% 50%,100% 100%,0 100%)}

section.bloque .wrap{padding-block:64px}
.titulo-seccion{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;margin-bottom:32px}
.titulo-seccion h2{font-size:clamp(28px,3.6vw,38px);font-weight:600}

.libros{display:grid;grid-template-columns:minmax(0,680px);justify-content:center}
.libro{background:var(--nieve);border-radius:18px;padding:22px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start;box-shadow:0 2px 0 var(--papel-2),0 10px 24px rgba(42,34,51,.08)}
.libro .tapa{width:150px;height:auto;border-radius:6px;box-shadow:4px 6px 0 var(--papel-2);display:block}
.libro h3{font-size:21px;font-weight:600}
.sub{color:var(--tinta-suave);font-size:15px;margin-top:4px}
.fichas{display:flex;gap:6px;flex-wrap:wrap;margin-block:12px}
.ficha{font-size:13px;font-weight:700;background:var(--papel);border:1px solid var(--papel-2);padding:3px 10px;border-radius:999px}
.libro .btn{font-size:16px;padding:10px 18px;margin-top:14px}

.regalo{background:var(--verde);color:var(--nieve)}
.regalo .wrap{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:40px}
.regalo h2{font-size:clamp(24px,3vw,32px);font-weight:600;max-width:24ch}
.regalo p{opacity:.9;margin-top:6px}

.sobre{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:center}
.retrato{width:100%;max-width:220px;aspect-ratio:1;height:auto;border-radius:50%;object-fit:cover;display:block;border:6px solid var(--nieve);box-shadow:0 0 0 3px var(--oro),0 12px 26px rgba(42,34,51,.15)}
.sobre h2{margin-top:14px;font-size:clamp(26px,3.2vw,34px);font-weight:600}
.sobre p{max-width:62ch;margin-top:12px}
.firma{font-family:var(--display);font-size:22px;color:var(--rojo);margin-top:14px}

footer{background:var(--noche);color:#cfd6f2;font-size:14px}
footer .wrap{padding-block:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer nav{display:flex;gap:16px;flex-wrap:wrap}

/* /elfo */
.elfo-hero{background:radial-gradient(900px 420px at 20% 0%,var(--noche-2),var(--noche) 65%);color:var(--nieve);position:relative;overflow:hidden}
.elfo-hero .wrap{position:relative;padding-block:40px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.pregunta{color:var(--oro);font-weight:700}
.elfo-hero h1{font-size:clamp(30px,4.6vw,48px);font-weight:700;max-width:20ch}
.elfo-hero p{max-width:46ch;opacity:.92}
.elfos{width:min(560px,100%);height:auto;display:block;margin-top:18px;border-radius:18px 18px 0 0}
.oferta{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.lista{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lista li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.lista li::before{content:"★";color:var(--oro);font-size:20px;line-height:1.3;-webkit-text-stroke:1px var(--rojo-osc)}
.oferta h2{font-size:clamp(24px,3vw,30px);font-weight:600;margin-bottom:18px}
.formulario{background:var(--nieve);border-radius:20px;padding:28px;box-shadow:0 2px 0 var(--papel-2),0 14px 30px rgba(42,34,51,.1);display:grid;gap:16px}
.formulario h2{font-size:26px;font-weight:600;margin:0}
.campo{display:grid;gap:6px}
.campo label{font-weight:700;font-size:15px}
.campo input{font:inherit;padding:12px 14px;border:2px solid var(--papel-2);border-radius:12px;background:var(--papel);color:var(--tinta);width:100%}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:14px;color:var(--tinta-suave);align-items:start}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--rojo)}
.formulario .btn{justify-content:center;width:100%}
.nota{font-size:13px;color:var(--tinta-suave)}
.error{color:var(--rojo-osc);font-weight:700;font-size:14px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* /gracias */
.gracias{text-align:center;display:grid;gap:14px;justify-items:center;max-width:560px;margin:0 auto}
.sello{width:76px;height:76px;border-radius:50%;background:var(--verde);color:var(--nieve);display:grid;place-items:center;font-size:36px}
.gracias h1{font-size:clamp(30px,4vw,40px)}

/* Legales */
.legal{max-width:760px;margin:0 auto}
.legal h1{font-size:clamp(30px,4vw,40px);margin-bottom:8px}
.legal h2{font-size:22px;font-weight:600;margin:32px 0 8px}
.legal p,.legal li{color:var(--tinta)}
.legal p+p{margin-top:10px}
.legal ul{padding-left:20px;margin:8px 0}
.legal .fecha{color:var(--tinta-suave);font-size:14px}
.datos{background:var(--nieve);border-radius:14px;padding:18px 22px;margin-top:12px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px}
.datos dt{font-weight:700}
.datos dd{margin:0}

@media (max-width:820px){
  .hero .wrap,.oferta,.sobre{grid-template-columns:1fr}
  .retrato{max-width:200px}
}
@media (max-width:460px){
  .libro{grid-template-columns:1fr}
  .libro .tapa{width:140px}
  header.top nav{gap:14px;font-size:14px}
  .datos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.nieve{display:none}html{scroll-behavior:auto}}