/* ── Portada pública (/es/, /en/, páginas por libro) ─────────────────
   Identidad «papel, tinta, calor»: base de papel cálido, tinta oscura,
   naranja tostado solo para calor y acción. Serif cálida (Fraunces) para
   titulares; sans del sistema para el resto. El modo noche es cosa del
   lector, no de la marca. */
:root{
  --paper:#f3eadb; --paper-2:#ead8bd; --paper-3:#e2cfae; --hoja:#fbf6ec;
  --ink:#211a15; --ink-2:#5b4f43; --ink-3:#8a7c6d; --linea:#dccbb0;
  --toast:#d97732; --toast-2:#c8642a; --crust:#733b1d; --jam:#b8324a; --sage:#687b55; --steel:#45656c;
  --noche:#141210; --noche-2:#1d1a17; --hueso:#f2ebe0; --hueso-2:#b8afa3;
  --r:18px; --max:1120px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --libro:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{color-scheme:light; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 var(--font); -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.01em; margin:0}

/* cabecera */
.top{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; font-size:18px; font-family:var(--display)}
.brand span{white-space:nowrap}
.brand b{color:var(--toast-2); font-weight:700}
.brand svg{width:28px; height:28px; color:var(--toast-2)}
.top nav{display:flex; align-items:center; gap:22px; font-size:15px; color:var(--ink-2)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--ink)}
.lang{border:1px solid var(--linea); border-radius:99px; padding:4px 10px; font-size:13px; letter-spacing:.04em}

/* botones */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:99px; font-weight:600; text-decoration:none; border:1px solid var(--ink); color:var(--ink); background:transparent; transition:transform .15s, background .15s}
.btn:hover{transform:translateY(-1px); background:var(--paper-2)}
.btn-primary{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-primary:hover{background:#3a2d24}
.btn-lg{padding:16px 28px; font-size:17px}
.link{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--linea); padding-bottom:2px}
.link:hover{color:var(--ink); border-color:var(--ink)}

/* ═══ héroe: promesa a la izquierda, escena a la derecha ═══ */
.hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; padding:48px 24px 72px}
.hero h1{font-size:clamp(44px,5.6vw,78px); line-height:1.0; letter-spacing:-.02em; font-weight:600}
.hero h1 em{font-style:italic; color:var(--toast-2)}
.hero .lede{font-size:clamp(18px,1.7vw,22px); color:var(--ink-2); max-width:30ch; margin:24px 0 30px; font-family:var(--display); font-weight:500; line-height:1.35}
.hero .cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.hero .note{font-size:13px; color:var(--ink-3); margin-top:18px}

/* la escena: la página que se teclea y sale caliente de la ranura */
.tostada{position:relative; padding-top:26px}
.pagina{position:relative; z-index:1; margin:0 auto; width:min(100%,440px); aspect-ratio:1/1.2; background:var(--hoja); color:#1c1a17; border-radius:4px 4px 0 0;
  padding:8% 9% calc(6% + 78px); overflow:hidden; box-shadow:0 24px 50px -24px rgba(60,35,15,.55), 0 1px 0 rgba(0,0,0,.05), inset 0 0 0 1px rgba(0,0,0,.05);
  font-family:var(--libro); font-size:clamp(13px,1.5vw,17px); line-height:1.6; transform:translateY(0); transition:transform .55s cubic-bezier(.2,.9,.25,1.1)}
.tostada.salta .pagina{transform:translateY(-16px)}
.tostada.asoma .pagina{transform:translateY(-7px)}
.pagina p{margin:0 0 .9em}
.pagina .titulillo{font:italic 11px/1 var(--libro); letter-spacing:.06em; color:#6d665c; margin-bottom:5%; text-transform:uppercase}
.pagina .folio{position:absolute; bottom:calc(4% + 78px); left:0; right:0; text-align:center; font:11px var(--libro); color:#6d665c}
.pagina .l{color:#8a8178; transition:color .12s}
.pagina .l.ok{color:#c64800}
.pagina .l.bad{color:var(--jam); text-decoration:underline wavy var(--jam); text-decoration-thickness:1.5px}
.pagina .caret{display:inline-block; width:2px; height:1.05em; background:#c64800; vertical-align:-.18em; margin:0 1px; animation:parpadeo 1s steps(2) infinite}
@keyframes parpadeo{50%{opacity:0}}
.hud{position:absolute; top:0; right:6%; z-index:3; font:600 12px/1 var(--font); letter-spacing:.06em; color:var(--paper); background:var(--ink); border-radius:99px; padding:8px 12px; text-transform:uppercase}
/* la tostadora, en CSS: panza redondeada, ranura, palanca, calor */
.tostadora{position:relative; z-index:2; margin:-78px auto 0; width:min(100%,500px); height:150px}
.tostadora::before{content:""; position:absolute; inset:0; border-radius:28px 28px 22px 22px; background:linear-gradient(180deg,#e8893d,#c86428); box-shadow:0 26px 40px -22px rgba(60,35,15,.7), inset 0 -10px 0 rgba(92,45,20,.22)}
.tostadora::after{content:""; position:absolute; left:15%; right:15%; top:0; height:15px; border-radius:0 0 9px 9px; background:#332016; box-shadow:inset 0 3px 4px rgba(0,0,0,.4)}
.tostadora .palanca{position:absolute; right:-14px; top:36px; width:30px; height:14px; border-radius:7px; background:#332016; transition:top .5s}
.tostada.salta .tostadora .palanca{top:16px}
.tostadora .rueda{position:absolute; right:38px; bottom:26px; width:22px; height:22px; border-radius:50%; background:#332016; opacity:.55}
.tostadora .brillo{position:absolute; left:26px; top:34px; width:12px; height:60px; border-radius:6px; background:#fff; opacity:.18}
.tostadora .pata{position:absolute; bottom:-8px; width:36px; height:10px; border-radius:5px; background:#332016; opacity:.7}
.tostadora .pata.i{left:40px} .tostadora .pata.d{right:40px}
/* calor: tres líneas cortas, el patrón gráfico de la marca */
.calor{position:absolute; z-index:3; left:50%; top:-6px; width:60px; height:22px; margin-left:-30px; opacity:0; transition:opacity .4s, transform .6s; transform:translateY(6px)}
.tostada.salta .calor{opacity:1; transform:translateY(-8px)}
.calor i{position:absolute; bottom:0; width:2px; height:14px; border-radius:2px; background:var(--toast-2); opacity:.7}
.calor i:nth-child(1){left:12px; height:12px} .calor i:nth-child(2){left:29px; height:20px} .calor i:nth-child(3){left:46px; height:14px}

/* ═══ secciones ═══ */
section.wrap{padding:64px 24px}
h2{font-size:clamp(30px,3.6vw,44px); line-height:1.1; margin-bottom:12px}
.lead{color:var(--ink-2); font-size:17px; margin:0 0 36px; max-width:60ch}

/* tira de tres pasos, sin tarjetas */
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:8px}
.paso{border-top:2px solid var(--ink); padding-top:18px}
.paso .n{font:italic 500 40px/1 var(--display); color:var(--toast-2); display:block; margin-bottom:10px}
.paso h3{font-size:22px; margin-bottom:8px}
.paso p{margin:0; color:var(--ink-2); font-size:15px}

/* estantería de portadas */
.estante{background:var(--hoja); border:1px solid var(--linea); border-radius:var(--r); padding:40px 32px 36px}
.books{display:grid; grid-template-columns:repeat(4,1fr); gap:28px 22px}
@media (max-width:900px){ .books{grid-template-columns:repeat(3,1fr)} }
.book{display:block; text-decoration:none; color:var(--ink); text-align:left; transition:transform .18s}
.book:hover{transform:translateY(-4px)}
.book img{width:100%; height:auto; aspect-ratio:170/240; object-fit:cover; border-radius:3px 6px 6px 3px; box-shadow:inset -3px 0 0 rgba(0,0,0,.06), 0 18px 28px -16px rgba(60,35,15,.55)}
.book h3{font-size:16px; line-height:1.2; margin:12px 0 4px; font-weight:600}
.book p{margin:0; color:var(--ink-3); font-size:13px}
.book .go{display:none}

/* sello: el PDF no sale de tu equipo (banda de tinta) */
.sello{background:var(--noche); color:var(--hueso); border-radius:var(--r); padding:44px 40px; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center}
.sello .marca{position:relative; width:64px; height:64px; border-radius:50%; border:2px solid var(--toast)}
.sello .marca i{position:absolute; bottom:18px; width:2px; border-radius:2px; background:var(--toast)}
.sello .marca i:nth-child(1){left:20px; height:18px} .sello .marca i:nth-child(2){left:30px; height:28px} .sello .marca i:nth-child(3){left:40px; height:20px}
.sello h2{font-size:clamp(24px,2.8vw,34px); margin-bottom:8px}
.sello p{margin:0; color:var(--hueso-2); max-width:62ch}

/* usos: tres frases grandes */
.quienes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.quien{border-top:2px solid var(--ink); padding-top:18px}
.quien h3{font-size:clamp(26px,2.6vw,34px); font-style:italic; color:var(--crust); margin-bottom:10px; font-weight:500}
.quien p{margin:0; color:var(--ink-2); font-size:15px}
.soporte{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); border:1px solid var(--linea); border-radius:99px; padding:8px 14px; margin-top:26px}

/* preguntas */
details{border-top:1px solid var(--linea); padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--linea)}
summary{cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--ink-3); font-weight:400}
details[open] summary::after{content:"–"}
details p{color:var(--ink-2); margin:10px 0 0; max-width:720px}

/* pie */
footer{border-top:1px solid var(--linea); padding:32px 0 48px; color:var(--ink-3); font-size:14px}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* ═══ página por libro ═══ */
.hero.libro{display:block; text-align:center; padding-bottom:40px}
.hero.libro .cubierta{width:150px; height:auto; margin:0 auto 22px; border-radius:4px; box-shadow:0 20px 40px -20px rgba(60,35,15,.6)}
.hero.libro h1{font-size:clamp(34px,5vw,56px)}
.hero.libro p{color:var(--ink-2); margin:14px auto 0}
.hero.libro .cta{justify-content:center; margin-top:26px}
.demo.extracto{margin:0; background:var(--hoja); color:#1c1a17; border:1px solid var(--linea); border-radius:var(--r); padding:34px 40px; font-family:var(--libro); font-size:18px; line-height:1.65; box-shadow:0 24px 50px -30px rgba(60,35,15,.5)}
.demo.extracto p{margin:0 0 1em}
.demo.extracto p:last-child{margin-bottom:0}
.demo.extracto .rest{color:#1c1a17}
.procedencia{margin-top:14px; font-size:14px}
.procedencia a{color:var(--ink-2)}
.sinopsis{color:var(--ink); font-size:18px; max-width:720px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.card{background:var(--hoja); border:1px solid var(--linea); border-radius:var(--r); padding:22px}
.card h3{margin:0 0 8px; font-size:17px}
.card p{margin:0; color:var(--ink-2); font-size:15px}
.card .n{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--paper); font-weight:700; margin-bottom:14px; font-size:14px}

/* ═══ móvil ═══ */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:36px; padding:28px 18px 48px; text-align:center}
  .hero .lede{margin-left:auto; margin-right:auto}
  .hero .cta{justify-content:center}
  .pasos,.quienes{grid-template-columns:1fr; gap:20px}
  .tostadora{height:120px; margin-top:-70px}
  .pagina{padding-bottom:calc(6% + 70px)} .pagina .folio{bottom:calc(4% + 70px)}
  .sello{grid-template-columns:1fr; text-align:center; justify-items:center; padding:36px 24px}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  section.wrap{padding:44px 18px}
  .top nav{gap:12px}
  .top nav .oculto-movil{display:none}
  .estante{padding:28px 18px}
  .books{grid-template-columns:repeat(2,1fr); gap:20px 14px}
  .demo.extracto{padding:24px 22px; font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .pagina .caret{animation:none} html{scroll-behavior:auto} .btn:hover,.book:hover{transform:none}
  .pagina,.tostadora .palanca,.calor{transition:none}
}

@media (max-width:900px){ .pagina{text-align:left} }

/* la escena es tuya si tecleas: pista, estado y botón para seguir */
.pista{margin:18px 0 0; text-align:center; font-size:14px; color:var(--ink-3); min-height:1.4em}
.pista .tuyo{display:none}
.tostada:not(.teclable) .pista{visibility:hidden}
.tostada.tuyo .pista .invita{display:none}
.tostada.tuyo .pista .tuyo{display:inline; color:var(--toast-2); font-weight:600}
.tostada .seguir{position:absolute; left:50%; top:38%; transform:translate(-50%,-50%) scale(.96); z-index:4; opacity:0; pointer-events:none; transition:opacity .35s, transform .35s; box-shadow:0 20px 40px -18px rgba(60,35,15,.8)}
.tostada.listo .seguir{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.tostada.listo .pagina{opacity:.55}
.tostada.tuyo .pagina{box-shadow:0 24px 50px -24px rgba(60,35,15,.55), 0 0 0 3px rgba(200,100,42,.35)}
@media (prefers-reduced-motion:reduce){ .tostada .seguir{transition:none} }

.tostada .seguir{white-space:nowrap}
.pagina{aspect-ratio:1/1.32}