/* AJAPPY — estilos compartidos de la web de marca (inicio, temas, libros, vídeos).
   El cuento personalizado (/cuento-personalizado/) mantiene sus propios estilos. */
:root{
  --night:#1E4034; --night-deep:#132C23; --line:rgba(251,243,228,.14);
  /* tarjetas: el beige de la barriga del dino, con texto verde oscuro */
  --card:#F3EEDC; --card-hi:#F8F4E6; --card-line:rgba(11,67,44,.12);
  --card-ink:#16352A; --card-soft:#4B5E52; --card-accent:#B85A16;
  --paper:#FBF3E4; --paper-shade:#EFE3CB; --ink:#2A2440; --ink-soft:#5B5470;
  --glow:#F2A63D; --berry:#E0596B; --leaf:#6FA07A; --sky:#D5E6D9; --dino:#4E9156;
  --display:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --body:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  --story:'Bitter',Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
/* 4-nov-2026 (usuario): fondo de hoja de cuaderno de cuadritos (5 mm) con una arruga de papel casi invisible debajo.
   Solo el fondo general: tarjetas, láminas y textos van lisos. Textura generada con textura_papel.py. */
body{--cuadro:rgba(232,224,204,.035);--papel:url(/img/textura-papel-verde.webp);
  background-image:linear-gradient(to right,var(--cuadro) 1px,transparent 1px),linear-gradient(to bottom,var(--cuadro) 1px,transparent 1px),var(--papel);
  background-size:22px 22px,22px 22px,auto;background-position:-1px -1px,-1px -1px,0 0;background-blend-mode:normal,normal,soft-light}
body{margin:0;background-color:var(--night);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6;padding-inline:20px;padding-block:18px 64px}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;display:grid;gap:56px}
.eyebrow{font-weight:800;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.muted{color:var(--sky)}

/* botones */
.btn{display:inline-block;font-family:var(--body);font-weight:800;font-size:.95rem;padding:12px 20px;border-radius:12px;text-decoration:none;border:0;cursor:pointer;text-align:center}
.btn.glow{background:var(--glow);color:var(--night-deep)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.deep{background:var(--night-deep);color:var(--paper)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px rgba(251,243,228,.25)}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.6;cursor:default}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* cabecera */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .badge{width:46px;height:46px;border-radius:50%;background:var(--paper);display:grid;place-items:center;flex:none}
.brand .badge img{width:34px;height:auto}
.brand b{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:.02em}
.menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-weight:700;font-size:.92rem}
.menu a{text-decoration:none;padding:7px 12px;border-radius:99px;color:var(--sky)}
.menu a:hover{color:var(--paper);background:rgba(251,243,228,.08)}
/* 3-nov (usuario): solo la sección en la que estás va marcada; ningún enlace del menú destaca siempre */
.menu a[aria-current="page"]{color:var(--paper);background:rgba(251,243,228,.16);box-shadow:inset 0 -3px 0 var(--glow)}
.tema-btn{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:4px;padding:0;border:0;border-radius:99px;background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(251,243,228,.35);cursor:pointer}
.tema-btn:hover{background:rgba(251,243,228,.1)}
.tema-btn svg{width:17px;height:17px}
.tema-btn .sol{display:none}
.nav{position:relative}
@media (max-width:600px){.tema-btn{position:absolute;top:7px;right:0;margin:0}.hm-light .tema-btn{top:21px;right:20px}}   /* móvil: arriba a la derecha, a la altura del logo */
.menu a.lang{font-size:.78rem;font-weight:800;padding:5px 10px;border-radius:99px;box-shadow:inset 0 0 0 1.5px rgba(251,243,228,.35);margin-left:4px}

.crumbs{font-size:.85rem;color:var(--sky)}
.crumbs a{color:var(--sky)}
.page-head{display:grid;gap:14px;max-width:780px}
.page-head h1{font-size:clamp(2.1rem,5.5vw,3.3rem)}
.page-head p{margin:0;color:var(--sky);font-size:1.08rem;max-width:42em}
.sec-head{display:grid;gap:6px;margin-bottom:20px}
.sec-head h2{font-size:clamp(1.5rem,3.2vw,2rem)}
.sec-head p{margin:0;color:var(--sky)}

/* inicio: hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,48px);align-items:center}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);margin-top:10px}
.hero h1 em{font-style:normal;color:var(--glow)}
.hero .lead{color:var(--sky);font-size:1.1rem;max-width:34em;margin:16px 0 24px}
.hero-art{position:relative;background:var(--paper);border-radius:28px 28px 120px 28px;padding:26px 28px 28px;display:flex;flex-direction:column;align-items:center;gap:22px;min-height:300px}
.hero-art img{width:min(220px,68%)}
/* Bocadillo de Sofidina: encima de ella (nunca le pisa la cara), centrado, con colita hacia abajo */
.bubble{position:relative;background:var(--night);color:var(--paper);font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2.2vw,1.35rem);line-height:1.2;text-align:center;padding:10px 22px;border-radius:18px;max-width:92%}
.bubble::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);border:12px solid transparent;border-bottom:0;border-top-color:var(--night)}
/* Sofidina habla en la cabecera de sus temas: ella a la izquierda y su bocadillo con colita hacia ella */
.sofi-says{display:flex;align-items:center;gap:14px;margin:18px 0 0;max-width:640px}
.sofi-says img{flex:none;width:58px;height:auto;background:var(--paper);border-radius:50%;padding:8px 8px 4px}
.sofi-says span{position:relative;background:var(--paper);color:var(--night);font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.35;padding:12px 18px;border-radius:18px}
.sofi-says span::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);border:10px solid transparent;border-left:0;border-right-color:var(--paper)}

.season{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--card);color:var(--card-ink);border:1px solid var(--card-line);border-radius:16px;padding:14px 18px}
.season b{font-family:var(--display);font-size:1.2rem}
.season span{color:var(--card-soft);font-size:.92rem}

/* temas */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.theme{background:var(--card);color:var(--card-ink);border:1px solid var(--card-line);border-radius:18px;padding:18px;display:grid;gap:10px;align-content:start;text-decoration:none}
.theme:hover{background:var(--card-hi)}
.theme .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--night-deep)}
.theme h3{font-size:1.25rem}
.theme p{margin:0;color:var(--card-soft);font-size:.93rem}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:.72rem;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:99px;background:rgba(251,243,228,.1)}
.chip.v{background:rgba(224,89,107,.24)} .chip.d{background:rgba(111,160,122,.28)} .chip.l{background:rgba(242,166,61,.24)} .chip.c{background:rgba(185,178,210,.24)}

/* bloque cuento */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--paper);color:var(--ink);border-radius:24px;padding:clamp(18px,3vw,32px)}
.story .page{background:#fff;border-radius:16px;padding:12px;box-shadow:0 18px 40px -22px rgba(42,36,64,.5)}
.story .page img{border-radius:10px;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.story .page p{font-family:var(--story);font-size:1.02rem;text-align:center;margin:12px 4px 4px}
.story .page p b{color:var(--berry);font-style:italic;font-weight:600}
.story h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.story .eyebrow{color:var(--berry)}
.story > div > p{color:var(--ink-soft);margin:10px 0 0}
.story ol{margin:14px 0 20px;padding-left:20px;color:var(--ink-soft);display:grid;gap:4px}

/* vídeos */
.videos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.video{display:grid;gap:8px;align-content:start;text-decoration:none}
.thumb{aspect-ratio:16/9;max-width:100%;border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden}
.thumb.short{aspect-ratio:9/16;max-height:320px}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .play{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(19,44,35,.75);display:grid;place-items:center}
.thumb .play::after{content:"";border-left:14px solid var(--paper);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.thumb .tag{position:absolute;left:8px;top:8px;font-size:.7rem;font-weight:800;background:rgba(19,44,35,.8);padding:2px 7px;border-radius:6px}
.video b{font-size:.92rem;line-height:1.3}
.video span{font-size:.8rem;color:var(--sky)}
.vgroup + .vgroup{margin-top:40px}

/* libros */
.books{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.book{display:grid;gap:8px;align-content:start;text-decoration:none}
.cover{aspect-ratio:8.5/11;max-width:100%;border-radius:4px 10px 10px 4px;overflow:hidden;background:var(--paper);box-shadow:0 14px 30px -16px rgba(0,0,0,.85)}
.cover img{width:100%;height:100%;object-fit:cover}
.book b{font-size:.95rem}
.book span{font-size:.82rem;color:var(--sky)}
.catalog{display:grid;gap:18px}
.item{display:grid;grid-template-columns:150px 1fr;gap:20px;background:var(--card);color:var(--card-ink);border:1px solid var(--card-line);border-radius:18px;padding:18px;scroll-margin-top:20px}
.item.nocover{grid-template-columns:1fr}
.item h2{font-size:1.4rem}
.item p{margin:6px 0 12px;color:var(--card-soft)}
.item ul{margin:0 0 14px;padding-left:18px;color:var(--card-soft);font-size:.93rem;display:grid;gap:2px}

/* páginas de tema */
.sheets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sheet{background:var(--paper);color:var(--ink);border-radius:18px;padding:14px;display:grid;gap:12px;align-content:start;min-width:0}
.sheet > *{min-width:0}
.sheet .img{background:#fff;border-radius:12px;aspect-ratio:1/1;max-width:100%;padding:12px;overflow:hidden}
.sheet .img img{width:100%;height:100%;object-fit:contain}
.sheet h2{font-size:1.15rem}
.sheet p{margin:-6px 0 0;color:var(--ink-soft);font-size:.9rem}
.sheet .img{position:relative}
.sheet .flag{position:absolute;left:10px;top:10px;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--glow);color:var(--night-deep)}
.sheet.preview .flag{background:var(--night);color:var(--paper)}
.talk{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:rgba(111,160,122,.13);border:1px solid rgba(111,160,122,.42);border-radius:18px;padding:20px}
.talk .badge{width:68px;height:68px;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.talk .badge img{width:50px;height:auto}
.talk h2{font-size:1.3rem;margin-bottom:6px}
.talk ul{margin:0;padding-left:20px;color:var(--sky);display:grid;gap:4px}
.pack{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:center;background:var(--glow);color:var(--night-deep);border-radius:20px;padding:22px 24px}
.pack h2{font-size:clamp(1.4rem,3vw,1.8rem)}
.pack > div > p{margin:6px 0 0;font-weight:600}
.pack form{display:grid;gap:10px}
.pack .row{display:flex;gap:8px;flex-wrap:wrap}
.pack input[type=email]{flex:1 1 220px;min-width:0;font:inherit;padding:12px 14px;border-radius:12px;border:2px solid transparent;background:#fff;color:var(--ink)}
.pack input[type=email]:focus{outline:none;border-color:var(--night-deep)}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;font-weight:600}
.consent input{margin-top:4px;accent-color:var(--night-deep)}
.fine{font-size:.78rem;margin:0}
.fine a{color:inherit}
.msg{font-weight:800;margin:0}
.msg.err{color:#7A1426}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.editions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
/* Versión PDF de los libros (Gumroad, desde el 15-oct-2026) */
.pdf-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0 0;font-weight:600}
.pdf-pack{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px;background:var(--card);color:var(--card-ink);border:1px solid var(--card-line);border-radius:18px;padding:20px 22px}
.pdf-pack > div{flex:1 1 320px}
.pdf-pack h2{font-size:clamp(1.3rem,2.6vw,1.6rem);margin:4px 0 6px}
.pdf-pack p{margin:0}
.pdf-pack .eyebrow{color:var(--berry)}
.ed{display:grid;grid-template-columns:130px 1fr;gap:18px;background:var(--card);color:var(--card-ink);border:1px solid var(--card-line);border-radius:18px;padding:18px}
.ed .cover{width:130px}
.ed h3{font-size:1.25rem}
.ed .price{font-family:var(--display);font-weight:800;font-size:1.8rem;color:var(--card-accent);line-height:1;margin:6px 0 8px}
.ed ul{margin:0 0 14px;padding-left:18px;color:var(--card-soft);font-size:.92rem;display:grid;gap:2px}
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:var(--paper);color:var(--ink);border-radius:18px;padding:22px;display:grid;gap:10px;align-content:start}
.card h2{font-size:1.35rem}
.card p{margin:0;color:var(--ink-soft)}
.card .btn{justify-self:start}

footer{border-top:1px solid var(--line);padding-top:22px;display:flex;gap:10px 20px;flex-wrap:wrap;justify-content:space-between;color:var(--sky);font-size:.88rem}
footer a{color:var(--sky)}

@media (max-width:900px){
  .hero,.story{grid-template-columns:1fr}
  .themes,.sheets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .videos,.books{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pack,.editions,.more{grid-template-columns:1fr}
}
@media (max-width:560px){
  .themes,.sheets{grid-template-columns:1fr}
  .ed{grid-template-columns:96px 1fr}.ed .cover{width:96px}
  .item{grid-template-columns:96px 1fr}
  .talk{grid-template-columns:1fr}
  .hero-art{min-height:220px}
  .menu{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* preguntas frecuentes (páginas de tema) */
.faq{display:grid;gap:10px}
.faq h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:4px}
.faq details{background:var(--card);color:var(--card-ink);border:1px solid var(--card-line);border-radius:14px;padding:12px 16px}
.faq summary{cursor:pointer;font-weight:800;list-style-position:outside}
.faq summary:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
.faq details[open] summary{color:var(--card-accent)}
.faq details p{margin:8px 0 2px;color:var(--card-soft);max-width:62ch}

/* dentro de las tarjetas beige: antetítulo y botón de contorno en oscuro */
.item .eyebrow,.ed .eyebrow{color:var(--card-accent)}
.item .btn.ghost,.ed .btn.ghost,.season .btn.ghost{color:var(--card-ink);box-shadow:inset 0 0 0 2px rgba(22,53,42,.3)}
.faq summary:focus-visible{outline-color:var(--card-accent)}

/* aviones de papel: el avión personalizado (/aviones-de-papel/, /en/paper-airplanes/) */
.pers{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--card);color:var(--card-ink);border-radius:28px;padding:28px}
.pers h2{font-size:clamp(1.5rem,3vw,2rem);margin:6px 0 4px}
.pers .stage{background:#fff;border-radius:20px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.pers canvas{width:100%;height:auto;display:block}
.pers form{display:grid;gap:6px}
.pers .lab{display:block;font-weight:800;margin:10px 0 2px}
.pers input[type=text],.pers input[type=email]{width:100%;font:inherit;font-size:1.05rem;padding:12px 14px;border-radius:14px;border:2px solid rgba(22,53,42,.22);background:#fff;color:var(--card-ink)}
.pers input:focus{outline:none;border-color:var(--card-ink)}
.pers .temas{display:flex;gap:8px;flex-wrap:wrap}
.pers .tema{font:inherit;font-weight:800;font-size:.9rem;border:2px solid rgba(22,53,42,.22);background:#fff;color:var(--card-ink);border-radius:999px;padding:8px 14px;cursor:pointer}
.pers .tema[aria-pressed=true]{background:var(--card-ink);border-color:var(--card-ink);color:var(--card)}
.pers .tema[disabled]{opacity:.5;cursor:default}
.pers .consent{margin-top:8px}
.pers .consent input{accent-color:var(--card-ink)}
.pers .send{margin-top:10px;width:100%;font-size:1.05rem;padding:14px 20px}
.pers .msg{color:var(--card-ink)}
.pers .fine{color:var(--card-soft)}
.sec-h{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:14px}
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pasos div{background:rgba(251,243,228,.06);border:1px solid var(--line);border-radius:18px;padding:16px}
.pasos b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--card);color:var(--card-ink);margin-right:8px}
.pasos p{margin:8px 0 0;color:var(--sky)}
.libros-aviones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.libros-aviones article{background:var(--card);color:var(--card-ink);border-radius:22px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center}
.libros-aviones img{width:100%;border-radius:12px;margin-bottom:10px}
.libros-aviones h3{font-size:1.35rem;margin:4px 0}
.libros-aviones p{margin:0 0 12px;font-size:.95rem;color:var(--card-soft);flex:1}
.libros-aviones .soon{display:inline-block;padding:9px 16px;border-radius:999px;border:2px dashed var(--card-ink);font-weight:800;font-size:.9rem}
@media (max-width:760px){.pers{grid-template-columns:1fr;padding:18px}.pasos{grid-template-columns:1fr 1fr}.libros-aviones{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.libros-aviones{grid-template-columns:1fr}}

/* aviones de papel: un formulario y dos aviones (Halloween y Navidad), cada uno con su botón (17-oct) */
.pers{grid-template-columns:1fr}
.pers .sub{margin:2px 0 4px;color:var(--card-soft)}
.pers .campos{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.aviones-lista{display:grid;gap:18px}
.avion-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:22px;align-items:center;background:var(--card-hi);border:1px solid var(--card-line);border-radius:22px;padding:16px}
.avion-card h3{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0 0 6px}
.avion-card p{margin:0 0 12px;color:var(--card-soft)}
.avion-card .send{margin-top:4px}
.avion-card .msg{margin:10px 0 0;color:var(--card-ink)}
.avion-card .msg.ok{color:#1F7A3A}
.avion-card .btn.enviado,.avion-card .btn.enviado:disabled{background:#62C25E;color:#132C23;opacity:1;cursor:default}
.avion-card .oferta{grid-column:1/-1;background:var(--paper);color:var(--night-deep);border:3px dashed var(--berry);border-radius:18px;padding:16px 18px;display:grid;gap:10px;justify-items:stretch;text-align:center}
.avion-card .oferta b{font-size:clamp(1.25rem,3vw,1.5rem)}
.avion-card .oferta .regalos{display:grid;grid-template-columns:repeat(2,minmax(0,180px));justify-content:center;gap:12px}
.avion-card .oferta figure{margin:0;background:#fff;border-radius:12px;padding:6px;box-shadow:0 2px 8px rgba(19,44,35,.12)}
.avion-card .oferta figure img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px}
.avion-card .oferta figcaption{font-size:.85rem;font-weight:700;margin-top:6px;line-height:1.25}
.avion-card .oferta .btn{width:100%;font-size:1.1rem;padding:14px 18px}
.avion-card .oferta p{margin:0;color:inherit}
.avion-card .oferta small{opacity:.75}
.avion-card .oferta .msg{color:var(--night-deep)}
.avion-card .oferta .msg.err{color:#7A1426}
@media (max-width:760px){.pers .campos{grid-template-columns:1fr}.avion-card{grid-template-columns:1fr}}

/* guía «Cómo hacer un avión de papel» (24-oct): 8 pasos con su dibujo de plegado */
.guia-link{margin:14px 0 0;font-weight:800}
.guia-link a{color:var(--glow)}
.guia-nec ul,.guia-consejos ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--sky);max-width:62ch}
.guia-consejos strong{color:var(--paper)}
.guia-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.guia-pasos li{background:var(--card);color:var(--card-ink);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:20px}
.guia-pasos img{width:100%;aspect-ratio:1;object-fit:contain;background:#F7F3EA}
.guia-pasos div{padding:12px 14px 16px}
.guia-pasos b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--glow);color:var(--night-deep);font-family:var(--display);font-size:1.05rem}
.guia-pasos h3{display:inline;font-size:1.15rem;margin-left:8px;vertical-align:middle}
.guia-pasos p{margin:8px 0 0;color:var(--card-soft);font-size:.95rem}
.guia-consejos{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.guia-juegos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.guia-juegos div{background:rgba(251,243,228,.06);border:1px solid var(--line);border-radius:18px;padding:16px}
.guia-juegos h3{font-size:1.15rem}
.guia-juegos p{margin:8px 0 0;color:var(--sky)}
@media (max-width:860px){.guia-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}.guia-consejos,.guia-juegos{grid-template-columns:1fr}}

/* 4-nov-2026 · portada de marca (boceto A): Sofidina + eslogan, mosaico de secciones, regalo del mes, así es AJAPPY, vídeos, libros */
.hm-hero{display:grid;gap:16px;justify-items:center;text-align:center;padding:22px 0 0}
.hm-hero .sofi{width:min(250px,56vw);height:auto}
.hm-hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.02;margin:0;max-width:14ch;text-wrap:balance}
.hm-hero h1 em{color:var(--glow);font-style:normal}
.hm-hero .lead{max-width:56ch;color:var(--sky);margin:0;font-size:1.08rem}
.hm-hero .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.home-otro{margin:0;font-size:.9rem;font-weight:700}
.home-otro a{color:var(--glow)}
.hm-mosaico{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hm-mosaico a{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--card);color:var(--card-ink);border-radius:22px;overflow:hidden;text-decoration:none;border:1px solid var(--card-line);transition:transform .15s}
.hm-mosaico a:hover{background:var(--card-hi);transform:translateY(-2px)}
.hm-mosaico img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hm-mosaico .txt{display:block;padding:14px 16px 16px}
.hm-mosaico .txt b{display:block;font-family:var(--display);font-size:1.25rem;line-height:1.2;margin-bottom:4px}
.hm-mosaico .txt span{color:var(--card-soft);font-size:.93rem}
.hm-mosaico .tag{position:absolute;top:12px;left:12px;background:var(--glow);color:var(--night-deep);font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.hm-regalo{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;background:var(--paper);color:var(--ink);border-radius:26px;padding:clamp(18px,3vw,32px);scroll-margin-top:16px}
picture{display:contents}   /* 4-nov: <picture> solo elige la imagen (claro/oscuro); no cambia la maqueta */
picture>source{display:none}
.hm-regalo>img,.hm-regalo>picture>img{width:100%;max-width:380px;height:auto;justify-self:center}
.hm-regalo .eyebrow{color:var(--card-accent)}
.hm-regalo h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:6px 0 8px}
.hm-regalo p{color:var(--ink-soft);margin:0 0 14px}
.home-form{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.home-form input{flex:1 1 200px;min-width:0;font:inherit;font-size:1.05rem;padding:12px 14px;border-radius:12px;border:2px solid var(--paper-shade);background:#fff;color:var(--ink)}
.hm-regalo .mini{display:flex;gap:10px;align-items:center;margin:16px 0 0;font-size:.9rem}
.hm-regalo .mini img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.hm-asi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hm-asi div{border:1px solid var(--line);border-radius:18px;padding:18px}
.hm-asi .ico{font-size:1.6rem;display:block;margin-bottom:6px}
.hm-asi b{display:block;font-family:var(--display);font-size:1.15rem;margin-bottom:4px}
.hm-asi span{color:var(--sky);font-size:.93rem}
.hm-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.hm-cab a{color:var(--glow);font-weight:800;text-decoration:none}
.hm-vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hm-vids a{display:grid;gap:8px;text-decoration:none;color:var(--paper)}
.hm-vids img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:var(--night-deep)}
.hm-vids b{font-size:.95rem}
.hm-libros{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;text-decoration:none}
.hm-libros img{width:100%;height:auto;border-radius:10px;box-shadow:0 18px 40px -22px rgba(0,0,0,.7);transition:transform .15s}
.hm-libros img:hover{transform:translateY(-3px)}
footer{flex-wrap:wrap;row-gap:8px}
/* 4-nov (usuario): la portada va con los colores invertidos (beige de fondo, piezas en verde) y el menú sigue verde */
body.hm-light{background-color:var(--paper);color:var(--ink);--cuadro:rgba(30,64,52,.05);--papel:url(/img/textura-papel-beige.webp)}
body.hm-light{overflow-x:clip}
.hm-light .nav{background:var(--night);margin:-18px calc(50% - 50vw) 0;padding:14px calc(50vw - 50%)}
.hm-light .nav .brand b{color:var(--paper)}
.hm-light .hm-hero h1{color:var(--night-deep)} .hm-light .hm-hero h1 em{color:var(--card-accent)} .hm-light .hm-hero .lead{color:var(--ink-soft)}
.hm-light .eyebrow{color:var(--card-accent)}
.hm-light .btn.ghost{color:var(--night-deep);box-shadow:inset 0 0 0 2px rgba(19,44,35,.3)}
.hm-light .home-otro a{color:var(--card-accent)}
.hm-light .sec-h{color:var(--night-deep)}
.hm-light .hm-mosaico a{background:rgba(30,64,52,.95);color:var(--paper);border-color:transparent} .hm-light .hm-mosaico a:hover{background:var(--night-deep)}
.hm-light .hm-mosaico .txt span{color:var(--sky)}
.hm-light .hm-mosaico img{width:calc(100% - 16px);margin:8px 8px 0;border-radius:16px}   /* marquito verde alrededor de la portada (usuario 4-nov) */
.hm-light .hm-mosaico .tag{top:18px;left:18px}
.hm-light .hm-regalo{background:rgba(30,64,52,.95);color:var(--paper)} .hm-light .hm-regalo h2{color:var(--paper)} .hm-light .hm-regalo p,.hm-light .hm-regalo .mini{color:var(--sky)} .hm-light .hm-regalo .eyebrow{color:var(--glow)}
.hm-light .home-form input{border-color:transparent}
.hm-light .hm-asi div{background:rgba(30,64,52,.95);border-color:transparent;color:var(--paper)} .hm-light .hm-asi span{color:var(--sky)}
.hm-light .hm-cab a{color:var(--card-accent)} .hm-light .hm-vids a{color:var(--night-deep)}
.hm-light footer,.hm-light footer a{color:var(--ink-soft)}
@media(max-width:760px){.hm-mosaico,.hm-asi,.hm-vids{grid-template-columns:1fr 1fr}.hm-regalo{grid-template-columns:1fr}.hm-libros{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.hm-mosaico,.hm-asi,.hm-vids{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- modo oscuro (4-nov-2026)
   Sigue el ajuste del móvil/ordenador (sin botón). Verde noche de Sofidina, nunca negro; texto crema apagado, nunca blanco
   puro; los bloques de papel pasan a tarjeta verde y las láminas se ven en línea negra sobre crema suave (no deslumbran).
   Los PDF y descargas no cambian. */
/* 4-nov: el modo oscuro se activa solo (ajuste del móvil) salvo que la persona elija con el botón de la cabecera
   (html[data-tema=claro|oscuro], guardado en localStorage). Las mismas reglas, dos veces: automático y a mano. */
@media (prefers-color-scheme:dark){
  html:not([data-tema=claro]){--night:#15302A; --night-deep:#0F241D; --line:rgba(232,224,204,.12);
    --card:rgba(34,70,58,.95); --card-hi:rgba(40,80,63,.95); --card-line:rgba(232,224,204,.10);
    --card-ink:#E8E0CC; --card-soft:#B5C4B8; --card-accent:#EBA45A;
    --paper:#E8E0CC; --paper-shade:#2E5546; --ink:#E8E0CC; --ink-soft:#B5C4B8;
    --glow:#E9A04E; --berry:#D9606F; --sky:#B5C4B8;}
  html:not([data-tema=claro]) :is(.hero-art,.story,.sheet,.card,.hm-regalo,.avion-card .oferta){background:var(--card);color:var(--card-ink)}
  html:not([data-tema=claro]) .avion-card{background:var(--card-hi)}
  html:not([data-tema=claro]) /* el blanco del dibujo se funde con el crema del pozo: línea negra sobre crema,html:not([data-tema=claro]) sin recuadro gris */
  /* 4-nov (usuario: las cajitas beige deslumbraban): beige un tono más oscuro y el blanco nunca blanco */
  :root{--pozo:#C9C0A9}
  html:not([data-tema=claro]) :is(.story .page,.sheet .img,.pers .stage,.avion-card .oferta figure,.carta-vista figure){background:var(--pozo)}
  html:not([data-tema=claro]) :is(.story .page,.sheet .img,.pers .stage,.avion-card .oferta figure,.carta-vista figure) img{mix-blend-mode:multiply}
  html:not([data-tema=claro]) .guia-pasos img{background:var(--pozo);filter:brightness(.82) sepia(.1)}
  html:not([data-tema=claro]) /* aquí hay fotos (no solo dibujos): sin multiply */
  :is(.hm-regalo .mini img,.ed .cover img,.hm-mosaico img){filter:brightness(.8) sepia(.1)}
  html:not([data-tema=claro]) :is(.cover img,.hm-libros img){filter:brightness(.9)}
  html:not([data-tema=claro]) /* hojas de avión (versión osc/: fuera transparente, dentro blanco roto): solo el avión claro,html:not([data-tema=claro]) alrededor el beige */
  .avion-teaser .page picture img{mix-blend-mode:normal}
  html:not([data-tema=claro]) .hm-regalo>picture>img{background:var(--pozo);border-radius:18px;padding:14px}
  html:not([data-tema=claro]) .avion-card canvas{background:var(--pozo);border-radius:16px}
  html:not([data-tema=claro]) :is(input[type=email],input[type=text],.home-form input,.pers .sel,.pers input[type=text],.pers input[type=email],.pers .tema){background:#D8CFBA;color:#16352A}
  html:not([data-tema=claro]) ::placeholder{color:#5E6B60}
  html:not([data-tema=claro]) .btn.ink{background:#D2C9B3;color:#132C23}
  html:not([data-tema=claro]) .sofi-says span{background:#D2C9B3;color:#132C23}
  html:not([data-tema=claro]) .sofi-says span::before{border-right-color:#D2C9B3}
  html:not([data-tema=claro]) .sofi-says img{background:#D2C9B3}
  html:not([data-tema=claro]) .bubble{background:var(--card)}
  html:not([data-tema=claro]) .btn.deep{background:#0F241D;color:#E8E0CC}
  html:not([data-tema=claro]) .btn.glow,html:not([data-tema=claro]) .pack{color:#132C23}
  html:not([data-tema=claro]) .sheet.preview .flag{background:#0F241D;color:#E8E0CC}
  html:not([data-tema=claro]) /* portada: en oscuro deja de ir invertida */
  body.hm-light{background-color:var(--night);color:var(--paper);--cuadro:rgba(232,224,204,.035);--papel:url(/img/textura-papel-verde.webp)}
  html:not([data-tema=claro]) .hm-light .nav{background:var(--night-deep)}
  html:not([data-tema=claro]) .hm-light .hm-hero h1{color:#E8E0CC}
  html:not([data-tema=claro]) .hm-light .hm-hero h1 em{color:var(--glow)}
  html:not([data-tema=claro]) .hm-light .hm-hero .lead{color:var(--sky)}
  html:not([data-tema=claro]) .hm-light .btn.ghost{color:#E8E0CC;box-shadow:inset 0 0 0 2px rgba(232,224,204,.3)}
  html:not([data-tema=claro]) .hm-light :is(.hm-mosaico a,.hm-regalo,.hm-asi div){background:var(--card)}
  html:not([data-tema=claro]) .hm-light .hm-mosaico a:hover{background:var(--card-hi)}
  html:not([data-tema=claro]) .hm-light :is(.sec-h,.hm-vids a){color:#E8E0CC}
  html:not([data-tema=claro]) .hm-light :is(footer,footer a){color:var(--sky)}
  html:not([data-tema=claro]) .tema-btn .luna{display:none}
  html:not([data-tema=claro]) .tema-btn .sol{display:block}
}
  html[data-tema=oscuro]{--night:#15302A; --night-deep:#0F241D; --line:rgba(232,224,204,.12);
  --card:rgba(34,70,58,.95); --card-hi:rgba(40,80,63,.95); --card-line:rgba(232,224,204,.10);
  --card-ink:#E8E0CC; --card-soft:#B5C4B8; --card-accent:#EBA45A;
  --paper:#E8E0CC; --paper-shade:#2E5546; --ink:#E8E0CC; --ink-soft:#B5C4B8;
  --glow:#E9A04E; --berry:#D9606F; --sky:#B5C4B8;}
html[data-tema=oscuro] :is(.hero-art,.story,.sheet,.card,.hm-regalo,.avion-card .oferta){background:var(--card);color:var(--card-ink)}
html[data-tema=oscuro] .avion-card{background:var(--card-hi)}
html[data-tema=oscuro] /* el blanco del dibujo se funde con el crema del pozo: línea negra sobre crema,html[data-tema=oscuro] sin recuadro gris */
/* 4-nov (usuario: las cajitas beige deslumbraban): beige un tono más oscuro y el blanco nunca blanco */
:root{--pozo:#C9C0A9}
html[data-tema=oscuro] :is(.story .page,.sheet .img,.pers .stage,.avion-card .oferta figure,.carta-vista figure){background:var(--pozo)}
html[data-tema=oscuro] :is(.story .page,.sheet .img,.pers .stage,.avion-card .oferta figure,.carta-vista figure) img{mix-blend-mode:multiply}
html[data-tema=oscuro] .guia-pasos img{background:var(--pozo);filter:brightness(.82) sepia(.1)}
html[data-tema=oscuro] /* aquí hay fotos (no solo dibujos): sin multiply */
:is(.hm-regalo .mini img,.ed .cover img,.hm-mosaico img){filter:brightness(.8) sepia(.1)}
html[data-tema=oscuro] :is(.cover img,.hm-libros img){filter:brightness(.9)}
html[data-tema=oscuro] /* hojas de avión (versión osc/: fuera transparente, dentro blanco roto): solo el avión claro,html[data-tema=oscuro] alrededor el beige */
.avion-teaser .page picture img{mix-blend-mode:normal}
html[data-tema=oscuro] .hm-regalo>picture>img{background:var(--pozo);border-radius:18px;padding:14px}
html[data-tema=oscuro] .avion-card canvas{background:var(--pozo);border-radius:16px}
html[data-tema=oscuro] :is(input[type=email],input[type=text],.home-form input,.pers .sel,.pers input[type=text],.pers input[type=email],.pers .tema){background:#D8CFBA;color:#16352A}
html[data-tema=oscuro] ::placeholder{color:#5E6B60}
html[data-tema=oscuro] .btn.ink{background:#D2C9B3;color:#132C23}
html[data-tema=oscuro] .sofi-says span{background:#D2C9B3;color:#132C23}
html[data-tema=oscuro] .sofi-says span::before{border-right-color:#D2C9B3}
html[data-tema=oscuro] .sofi-says img{background:#D2C9B3}
html[data-tema=oscuro] .bubble{background:var(--card)}
html[data-tema=oscuro] .btn.deep{background:#0F241D;color:#E8E0CC}
html[data-tema=oscuro] .btn.glow,html[data-tema=oscuro] .pack{color:#132C23}
html[data-tema=oscuro] .sheet.preview .flag{background:#0F241D;color:#E8E0CC}
html[data-tema=oscuro] /* portada: en oscuro deja de ir invertida */
body.hm-light{background-color:var(--night);color:var(--paper);--cuadro:rgba(232,224,204,.035);--papel:url(/img/textura-papel-verde.webp)}
html[data-tema=oscuro] .hm-light .nav{background:var(--night-deep)}
html[data-tema=oscuro] .hm-light .hm-hero h1{color:#E8E0CC}
html[data-tema=oscuro] .hm-light .hm-hero h1 em{color:var(--glow)}
html[data-tema=oscuro] .hm-light .hm-hero .lead{color:var(--sky)}
html[data-tema=oscuro] .hm-light .btn.ghost{color:#E8E0CC;box-shadow:inset 0 0 0 2px rgba(232,224,204,.3)}
html[data-tema=oscuro] .hm-light :is(.hm-mosaico a,.hm-regalo,.hm-asi div){background:var(--card)}
html[data-tema=oscuro] .hm-light .hm-mosaico a:hover{background:var(--card-hi)}
html[data-tema=oscuro] .hm-light :is(.sec-h,.hm-vids a){color:#E8E0CC}
html[data-tema=oscuro] .hm-light :is(footer,footer a){color:var(--sky)}
html[data-tema=oscuro] .tema-btn .luna{display:none}
html[data-tema=oscuro] .tema-btn .sol{display:block}

/* 5-nov (usuario): barra de secciones FIJA arriba en toda la web, con idioma y modo claro/oscuro siempre a mano.
   Fondo a sangre con box-shadow + clip-path (sin desbordar en horizontal) y una línea fina debajo. */
html{scroll-padding-top:96px}
.nav{--navbg:var(--night);position:sticky;top:0;z-index:60;background:var(--navbg);margin-top:-18px;padding-block:12px;
  box-shadow:0 0 0 100vmax var(--navbg),0 1px 0 100vmax var(--line);clip-path:inset(0 -100vmax -1px)}
.hm-light .nav{margin:-18px 0 0;padding:12px 0}   /* antes: márgenes con 100vw → desbordaba 8 px en horizontal */
@media (prefers-color-scheme:dark){html:not([data-tema=claro]) .hm-light .nav{--navbg:var(--night-deep)}}
html[data-tema=oscuro] .hm-light .nav{--navbg:var(--night-deep)}
@media (max-width:600px){
  html{scroll-padding-top:120px}
  .nav{padding-block:8px;gap:6px 12px}
  .brand .badge{width:38px;height:38px}.brand .badge img{width:28px}.brand b{font-size:1.15rem}
  .menu{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;padding-bottom:2px}
  .menu::-webkit-scrollbar{display:none}
  .menu{gap:0;font-size:.86rem}
  .menu a{white-space:nowrap;padding:6px 6px}
  .nav{min-width:0;padding-right:0}.menu{min-width:0;width:100%}
  .tema-btn,.hm-light .tema-btn{top:11px;right:0}
  .menu a.lang{position:absolute;top:13px;right:44px;margin:0;padding:4px 9px}
}

/* 6-nov-2026 (usuario): LUPA de búsqueda en la cabecera de toda la web (buscador.py + /js/lupa.js).
   Mismo estilo que los botones de idioma y modo; la caja usa los colores de las tarjetas (claro y oscuro). */
.lupa-btn{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:4px;padding:0;border:0;border-radius:99px;background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(251,243,228,.35);cursor:pointer}
.lupa-btn:hover{background:rgba(251,243,228,.1)}
.lupa-btn svg{width:17px;height:17px}
.lupa-btn:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
@media (max-width:600px){
  .lupa-btn{position:absolute;top:11px;right:88px;margin:0}
  .menu:not(:has(.lang)) .lupa-btn{right:44px}
}
html.lupa-abierta{overflow:hidden}
.lupa-capa{position:fixed;inset:0;z-index:200;background:rgba(10,24,19,.6);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;
  padding:max(72px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
.lupa-caja{width:min(660px,100%);max-height:calc(100dvh - 100px);display:flex;flex-direction:column;background:var(--card-hi);color:var(--card-ink);border:1px solid var(--card-line);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden;font-family:var(--body)}
.lupa-campo{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;border-bottom:2px solid var(--paper-shade)}
.lupa-campo svg{width:24px;height:24px;flex:none;color:var(--dino)}
.lupa-campo input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:700 1.2rem var(--display);color:var(--card-ink);-webkit-appearance:none;appearance:none}
.lupa-campo input::placeholder{color:var(--card-soft);opacity:.8}
.lupa-campo input::-webkit-search-cancel-button{display:none}
.lupa-x{flex:none;width:34px;height:34px;border:0;border-radius:99px;background:var(--card);color:var(--card-soft);font-size:1.5rem;line-height:1;cursor:pointer}
.lupa-res{overflow:auto;padding:6px 8px;overscroll-behavior:contain}
.lupa-res:empty{display:none}
.lupa-grupo{font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--card-accent);padding:12px 12px 6px}
.lupa-item{display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:14px;text-decoration:none;color:inherit}
.lupa-item:hover,.lupa-item.sel{background:var(--card)}
.lupa-item img{width:96px;height:72px;object-fit:cover;border-radius:10px;background:#fff;box-shadow:0 0 0 1.5px var(--paper-shade);flex:none}
.lupa-item span{min-width:0}
.lupa-item b{display:block;font:700 1rem/1.2 var(--display)}
.lupa-item mark{background:rgba(242,166,61,.35);color:inherit;border-radius:4px;padding:0 2px}
.lupa-item small{display:block;font-size:.82rem;color:var(--card-soft);margin-top:2px}
.lupa-vacio{margin:0;padding:18px 14px;color:var(--card-soft)}
.lupa-pie{padding:10px 20px;font-size:.82rem;color:var(--card-soft);border-top:2px solid var(--paper-shade);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lupa-pie button{border:0;background:var(--card);border-radius:99px;padding:4px 12px;font:700 .82rem var(--body);color:var(--card-ink);cursor:pointer}
@media (max-width:600px){.lupa-capa{padding-top:max(12px,env(safe-area-inset-top))}.lupa-caja{max-height:calc(100dvh - 24px)}.lupa-item img{width:72px;height:54px}}
/* Enlace directo a una lámina (desde la lupa o desde YouTube): la ficha se ve destacada al llegar */
.sheet{scroll-margin-top:14px}   /* el html ya reserva la altura de la cabecera fija (scroll-padding-top) */
.sheet:target{box-shadow:0 0 0 4px var(--glow),0 10px 30px rgba(0,0,0,.25);animation:lupa-llega 1.6s ease-out 1}
@keyframes lupa-llega{0%{transform:scale(1)}15%{transform:scale(1.03)}35%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sheet:target{animation:none}}