@font-face{font-family:"Nunito";src:url(/fuentes/nunito.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Literata";src:url(/fuentes/literata.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/fuentes/fredoka.woff2) format("woff2");font-weight:500 700;font-display:swap}

/* ============================================================ Tokens */
:root{
  --noche:#1a1e4a;--noche-2:#262b6b;--noche-3:#343a8c;
  --violeta:#7a5cff;--violeta-suave:#efeaff;
  --oro:#f6b93b;--oro-2:#ffd56b;--oro-suave:#fff3d1;
  --rosa:#ff6fa8;--rosa-suave:#ffe6f0;
  --menta:#1e9e84;--menta-suave:#e0f6ef;
  --cielo:#58b8ff;
  --pergamino:#fdf8f0;--papel:#fff;--tinta:#25234a;--suave:#5d5b80;--linea:#ece3d2;
  --baya:#c42f6e;
  --radio:20px;--radio-s:14px;
  --sombra:0 1px 2px rgba(26,30,74,.06),0 8px 24px rgba(26,30,74,.08);
  --sombra-alta:0 2px 4px rgba(26,30,74,.06),0 22px 44px rgba(70,50,160,.18);
  --ui:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --titulo:"Fredoka","Nunito",system-ui,sans-serif;
  --lectura:"Literata",Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --muelle:cubic-bezier(.34,1.56,.64,1);
  --estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0Q13 11 24 12Q13 13 12 24Q11 13 0 12Q11 11 12 0z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root{
  --pergamino:#11132b;--papel:#1b1e42;--tinta:#efebff;--suave:#b6b3d6;--linea:#2e3266;
  --oro-suave:#3a321c;--menta-suave:#163a33;--rosa-suave:#3d1d33;--violeta-suave:#28245a;
  --baya:#ff8fbe;--menta:#5fd8bb;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.3);
  --sombra-alta:0 2px 4px rgba(0,0,0,.3),0 22px 44px rgba(0,0,0,.45);
}}

/* ============================================================ Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--pergamino);color:var(--tinta);font:400 1.0625rem/1.65 var(--ui);overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--baya);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--violeta);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--titulo);line-height:1.15;font-weight:600;letter-spacing:-.005em}
h1{font-size:clamp(2rem,5vw,3.1rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.45rem,3.2vw,1.9rem);margin:2.6rem 0 1rem}
h3{font-size:1.18rem;margin:1.4rem 0 .5rem}
h2 a{color:inherit;text-decoration:none}
h2 a:hover{color:var(--baya)}
.envoltura{max-width:1160px;margin:0 auto;padding:0 16px}
.estrecho{max-width:780px;margin:0 auto;padding:0 16px}
.saltar{position:absolute;left:-999px}.saltar:focus{left:16px;top:8px;background:var(--papel);padding:8px 12px;z-index:99}

/* Títulos con estrellita que gira */
main h2{display:flex;align-items:center;gap:10px}
main h2::before{content:"";width:26px;height:26px;flex:none;background:var(--oro);-webkit-mask:var(--estrella) center/contain no-repeat;mask:var(--estrella) center/contain no-repeat;animation:girar 9s linear infinite}

/* ============================================================ Cielo estrellado (cabecera, héroe, bandas, pie) */
.cielo{position:relative;background:linear-gradient(180deg,#141842 0%,var(--noche) 55%,var(--noche-2) 100%);color:#fff;isolation:isolate;overflow:hidden}
.cielo::before,.cielo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px,#fff,transparent),
    radial-gradient(1.2px 1.2px at 90px 80px,#fff,transparent),
    radial-gradient(1.8px 1.8px at 160px 20px,#ffe9a8,transparent),
    radial-gradient(1px 1px at 230px 110px,#fff,transparent),
    radial-gradient(1.4px 1.4px at 300px 50px,#cfe6ff,transparent),
    radial-gradient(1px 1px at 60px 140px,#fff,transparent);
  background-size:330px 170px;animation:titilar 4s ease-in-out infinite alternate}
.cielo::after{background-size:470px 230px;background-position:120px 60px;animation-duration:6.5s;animation-delay:-2s;opacity:.8}
.fugaz{position:absolute;top:18%;left:-10%;width:130px;height:2px;border-radius:2px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff 70%,#ffe6a0);opacity:0;animation:fugaz 9s ease-in 3s infinite}
.fugaz.f2{top:46%;animation-delay:7.5s;animation-duration:13s}
@keyframes titilar{from{opacity:.35}to{opacity:1}}
@keyframes fugaz{0%{opacity:0;transform:translate(0,0) rotate(-14deg)}2%{opacity:1}11%{opacity:0;transform:translate(130vw,-30vh) rotate(-14deg)}100%{opacity:0;transform:translate(130vw,-30vh) rotate(-14deg)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes aparecer{from{opacity:0;transform:translateY(-8px) scale(.98)}}

/* ============================================================ Cabecera */
.cabecera{position:sticky;top:0;z-index:40;overflow:visible;transition:box-shadow .3s}
.cabecera::before,.cabecera::after{overflow:hidden}
.cabecera.con-sombra{box-shadow:0 10px 30px rgba(10,12,40,.35)}
.cabecera .envoltura{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;position:relative}
.marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:600 1.25rem var(--titulo)}
.marca svg{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 10px rgba(246,185,59,.45));transition:transform .6s var(--muelle)}
.marca:hover svg{transform:rotate(-18deg) scale(1.08)}
.marca small{display:block;font:600 .72rem var(--ui);color:#ffe3a1;letter-spacing:.02em}
@media (max-width:440px){.marca small{display:none}.marca{font-size:1.1rem}}
.lado{display:flex;align-items:center;gap:8px}
.nav-escritorio{display:none;gap:2px}
.nav-escritorio a{position:relative;color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;padding:8px 10px;border-radius:12px;white-space:nowrap;transition:background .2s}
.nav-escritorio a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--oro),var(--rosa));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-escritorio a:hover{background:rgba(255,255,255,.08)}
.nav-escritorio a:hover::after{transform:scaleX(1)}
.menu summary{list-style:none;cursor:pointer;color:#fff;font-weight:800;padding:9px 14px;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;display:flex;gap:8px;align-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu summary::before{content:"";width:16px;height:12px;background:linear-gradient(#fff 0 0) top/100% 2px no-repeat,linear-gradient(#fff 0 0) center/100% 2px no-repeat,linear-gradient(#fff 0 0) bottom/100% 2px no-repeat}
.menu[open] summary{background:rgba(255,255,255,.14)}
.menu nav{position:absolute;right:16px;left:16px;top:70px;background:rgba(38,43,107,.97);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radio);padding:10px;z-index:20;box-shadow:0 24px 50px rgba(0,0,0,.4);animation:aparecer .3s var(--muelle)}
.menu nav a{display:block;color:#fff;text-decoration:none;padding:12px 14px;border-radius:12px;font-weight:700}
.menu nav a:hover{background:rgba(255,255,255,.1)}
@media (min-width:1260px){.nav-escritorio{display:flex}.menu{display:none}}

/* Botón varita (Sorpréndeme) */
.varita{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font:800 .92rem var(--ui);color:#2a1d00;
  padding:9px 15px;border-radius:999px;background:linear-gradient(135deg,var(--oro-2),var(--oro) 60%,#ee9b2a);
  box-shadow:0 0 0 0 rgba(246,185,59,.6),0 6px 16px rgba(246,185,59,.3);animation:llamar 3.2s ease-in-out infinite;transition:transform .25s var(--muelle)}
.varita svg{width:18px;height:18px;transition:transform .4s var(--muelle)}
.varita:hover{transform:translateY(-2px) scale(1.04)}
.varita:hover svg{transform:rotate(-25deg)}
.varita.grande{font-size:1.05rem;padding:13px 22px}
.varita.grande svg{width:22px;height:22px}
@media (max-width:560px){.cabecera .varita span{display:none}.cabecera .varita{padding:10px}}
@keyframes llamar{0%,70%,100%{box-shadow:0 0 0 0 rgba(246,185,59,.55),0 6px 16px rgba(246,185,59,.3)}85%{box-shadow:0 0 0 10px rgba(246,185,59,0),0 6px 16px rgba(246,185,59,.3)}}

/* ============================================================ Botones */
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.boton{position:relative;display:inline-flex;align-items:center;gap:8px;font:700 .98rem var(--ui);padding:11px 18px;border-radius:999px;
  border:2px solid transparent;background:linear-gradient(135deg,var(--violeta),#5b3fe0);color:#fff;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(122,92,255,.32);transition:transform .25s var(--muelle),box-shadow .25s,border-color .25s;overflow:hidden}
.boton svg{width:18px;height:18px;flex:none}
.boton::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.boton:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(122,92,255,.4)}
.boton:hover::after{transform:translateX(120%)}
.boton:active{transform:translateY(0) scale(.97)}
.boton.secundario{background:var(--papel);color:var(--tinta);border-color:var(--linea);box-shadow:var(--sombra)}
.boton.secundario:hover{border-color:var(--violeta)}
.boton.fantasma{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45);box-shadow:none}
.boton.activo{background:linear-gradient(135deg,var(--rosa),#e8418a);box-shadow:0 6px 18px rgba(255,111,168,.4)}

/* ============================================================ Héroe de inicio */
.heroe{padding:30px 0 0}
.heroe .envoltura{display:grid;gap:6px;align-items:center;position:relative;z-index:2;pointer-events:none}
.heroe .envoltura>*{pointer-events:auto}
@media (min-width:900px){.heroe .envoltura{grid-template-columns:1.1fr .9fr;gap:30px}.heroe{padding-top:50px}}
.heroe h1{margin-top:0}
.brillo{background:linear-gradient(90deg,var(--oro-2),#ffb3d1,#b9a6ff,var(--oro-2));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillar 7s linear infinite}
@keyframes brillar{to{background-position:300% 0}}
.heroe p{max-width:600px;font-size:1.14rem;color:#e4e2f6}
.insignias{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 22px}
.insignias li{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px;font-weight:700;font-size:.88rem}
.insignias b{color:var(--oro-2);font-size:1rem}
.escena-heroe{width:100%;max-width:470px;margin:0 auto;overflow:visible}
@media (max-width:899px){.escena-heroe{max-width:340px;margin-top:6px}}
.escena-heroe .luna{animation:flotar 7s ease-in-out infinite}
.escena-heroe .halo{transform-box:fill-box;transform-origin:center;animation:latir 4s ease-in-out infinite}
.escena-heroe .sube{animation:subir 4.8s ease-in infinite;opacity:0;transform-box:fill-box;transform-origin:center}
.escena-heroe .sube:nth-child(2){animation-delay:.8s;--x:-40px}.escena-heroe .sube:nth-child(3){animation-delay:1.6s;--x:30px}
.escena-heroe .sube:nth-child(4){animation-delay:2.4s;--x:-20px}.escena-heroe .sube:nth-child(5){animation-delay:3.2s;--x:45px}.escena-heroe .sube:nth-child(6){animation-delay:4s;--x:-55px}
.escena-heroe .sombrero{animation:flotar 5s ease-in-out infinite}
.escena-heroe .titila{animation:titilar 2.2s ease-in-out infinite alternate}
.escena-heroe .titila:nth-of-type(2n){animation-delay:-1.1s}
.escena-heroe .libro{transform-box:fill-box;transform-origin:center bottom;animation:latir 6s ease-in-out infinite}
@keyframes subir{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x,0px),-190px) scale(1.15) rotate(180deg)}}
.ola{display:block;width:100%;height:56px;margin-top:-1px;color:var(--pergamino)}
.ola path{fill:currentColor}

/* Burbujas mágicas */
.burbujas{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.burbuja{position:absolute;bottom:-90px;pointer-events:auto;cursor:pointer;border:0;padding:0;border-radius:50%;
  width:var(--t,40px);height:var(--t,40px);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,.18) 10% 40%,rgba(160,140,255,.22) 60%,rgba(255,140,200,.4) 100%);
  box-shadow:inset 0 0 12px rgba(255,255,255,.45),0 0 14px rgba(170,150,255,.35);
  animation:burbujear var(--d,9s) linear forwards}
.burbuja::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.55)}
.burbuja.pop{animation:none;transform:var(--pos);transition:transform .3s ease-out,opacity .3s;opacity:0;scale:1.8}
@keyframes burbujear{0%{transform:translate(0,0)}25%{transform:translate(18px,calc(var(--h,500px) * -.25))}50%{transform:translate(-14px,calc(var(--h,500px) * -.5))}75%{transform:translate(16px,calc(var(--h,500px) * -.75))}100%{transform:translate(0,calc(var(--h,500px) * -1 - 120px))}}
.contador{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;font-weight:800;font-size:.95rem;color:#ffe3a1;min-height:1.5em;opacity:0;transform:translateY(6px);transition:.4s var(--muelle)}
.contador.ver{opacity:1;transform:none}

/* ============================================================ Secciones (botones grandes con icono) */
.secciones{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.seccion{--c:var(--violeta);position:relative;display:flex;align-items:center;gap:14px;background:var(--papel);border:1.5px solid var(--linea);border-radius:var(--radio);
  padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--sombra);transition:transform .3s var(--muelle),box-shadow .3s,border-color .3s;overflow:hidden}
.seccion::before{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--c);opacity:.08;transition:transform .5s var(--muelle)}
.seccion .ico{width:56px;height:56px;flex:none;border-radius:16px;display:grid;place-items:center;background:var(--c);color:#fff;box-shadow:0 8px 18px -6px var(--c);transition:transform .45s var(--muelle)}
.seccion .ico svg{width:32px;height:32px}
.seccion strong{display:block;font:600 1.12rem var(--titulo);color:var(--tinta)}
.seccion span{color:var(--suave);font-size:.92rem}
.seccion:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:var(--c)}
.seccion:hover::before{transform:scale(2.4)}
.seccion:hover .ico{transform:rotate(-8deg) scale(1.08)}

/* ============================================================ Tarjetas de historias */
.rejilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));margin:0 0 10px}
.tarjeta{--rx:0deg;--ry:0deg;position:relative;background:var(--papel);border:1.5px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
  display:flex;flex-direction:column;transition:transform .35s var(--muelle),box-shadow .35s,border-color .35s;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.tarjeta>a{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.tarjeta .img{position:relative;aspect-ratio:4/3;background:var(--noche);overflow:hidden}
.tarjeta .img img,.tarjeta .img svg{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.tarjeta .img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%);transition:transform .9s}
.tarjeta .cuerpo{padding:14px 16px 18px;flex:1;display:flex;flex-direction:column}
.tarjeta .etiqueta{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--menta)}
.tarjeta h3{margin:4px 0 8px;font-size:1.14rem;transition:color .25s}
.tarjeta .meta{margin-top:auto;font-size:.86rem;color:var(--suave);display:flex;align-items:center;gap:6px}
.tarjeta .meta::before{content:"";width:14px;height:14px;flex:none;background:var(--oro);-webkit-mask:var(--estrella) center/contain no-repeat;mask:var(--estrella) center/contain no-repeat}
.tarjeta .nuevo{position:absolute;top:12px;left:12px;z-index:2;background:linear-gradient(135deg,var(--rosa),#e8418a);color:#fff;font-weight:800;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;box-shadow:0 4px 12px rgba(232,65,138,.4);animation:latir 2.4s ease-in-out infinite}
.tarjeta:hover{box-shadow:var(--sombra-alta);border-color:#cbbcff}
.tarjeta:hover .img img,.tarjeta:hover .img svg{transform:scale(1.07)}
.tarjeta:hover .img::after{transform:translateX(130%)}
.tarjeta:hover h3{color:var(--violeta)}
@media (prefers-color-scheme:dark){.tarjeta:hover h3{color:#b9a6ff}.tarjeta:hover{border-color:#4d4799}}
.tarjeta[hidden],.grupo[hidden]{display:none}

/* Aparición al hacer scroll (solo con JS y movimiento permitido) */
@media (prefers-reduced-motion:no-preference){
  .js .revelar{opacity:0;translate:0 22px;transition:opacity .6s ease,translate .7s var(--muelle)}
  .js .revelar.visible{opacity:1;translate:0 0}
}

/* ============================================================ Filtros (todas las historias) */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.chip{border:1.5px solid var(--linea);background:var(--papel);color:var(--tinta);font:700 .92rem var(--ui);padding:8px 14px;border-radius:999px;cursor:pointer;transition:transform .25s var(--muelle),background .2s,border-color .2s}
.chip:hover{transform:translateY(-2px);border-color:var(--violeta)}
.chip[aria-pressed="true"]{background:var(--violeta);border-color:var(--violeta);color:#fff;box-shadow:0 6px 16px rgba(122,92,255,.35)}
.buscador{position:relative;max-width:460px;margin:6px 0 18px}
.buscador input{width:100%;font:600 1rem var(--ui);padding:13px 18px 13px 46px;border-radius:999px;border:1.5px solid var(--linea);background:var(--papel);color:var(--tinta);box-shadow:var(--sombra)}
.buscador input:focus{outline:none;border-color:var(--violeta);box-shadow:0 0 0 4px rgba(122,92,255,.18)}
.buscador svg{position:absolute;left:16px;top:50%;width:20px;height:20px;translate:0 -50%;color:var(--violeta)}
.sin-resultados{font-weight:700;color:var(--suave)}

/* ============================================================ Migas */
.migas{font-size:.88rem;color:var(--suave);margin:20px 0 0}
.migas ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.migas li+li::before{content:"✦";margin-right:5px;color:var(--oro);font-size:.7em;vertical-align:1px}
.migas a{color:var(--suave)}

/* ============================================================ Encabezado de sección (banda de cielo) */
.banda{padding:4px 0 26px}
.banda .migas,.banda .migas a{color:#c9c5ee}
.banda h1{display:flex;align-items:center;gap:14px;margin-top:14px}
.banda h1 .ico{width:60px;height:60px;flex:none;border-radius:18px;display:grid;place-items:center;background:var(--c,var(--violeta));box-shadow:0 10px 24px -8px var(--c);animation:flotar 5s ease-in-out infinite}
.banda h1 .ico svg{width:34px;height:34px}
.banda .resumen{color:#e1def5;max-width:760px}

/* ============================================================ Página de historia */
.progreso{position:fixed;left:0;right:0;top:0;height:5px;z-index:60;pointer-events:none}
.progreso span{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--oro),var(--rosa),var(--violeta));box-shadow:0 0 12px rgba(255,111,168,.6)}
.antetitulo{display:inline-flex;align-items:center;gap:6px;margin:24px 0 0;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--menta);background:var(--menta-suave);padding:5px 12px;border-radius:999px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 16px}
.chips li{background:var(--papel);border:1.5px solid var(--linea);border-radius:999px;padding:5px 13px;font-size:.88rem;font-weight:700}
.chips li:nth-child(1){border-color:#cfe6ff;background:#eef7ff;color:#1f5a8c}
.chips li:nth-child(2){border-color:#ffe2a6;background:var(--oro-suave);color:#7a5200}
.chips li:nth-child(3){border-color:#ffc6dc;background:var(--rosa-suave);color:#9b1f55}
@media (prefers-color-scheme:dark){.chips li:nth-child(n){background:var(--papel);border-color:var(--linea);color:var(--tinta)}}
.resumen{font-size:1.12rem;color:var(--suave);margin:0 0 18px}
.herramientas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 24px;padding:10px;border-radius:var(--radio);background:var(--papel);border:1.5px solid var(--linea);box-shadow:var(--sombra)}
.herramientas .boton{padding:9px 14px;font-size:.93rem}
.herramientas .letra{display:inline-flex;border:1.5px solid var(--linea);border-radius:999px;overflow:hidden}
.herramientas .letra button{border:0;background:var(--papel);color:var(--tinta);font:800 .95rem var(--ui);padding:9px 13px;cursor:pointer}
.herramientas .letra button+button{border-left:1.5px solid var(--linea)}
.herramientas .letra button:hover{background:var(--violeta-suave)}
.portada{position:relative;margin:0 0 30px;border-radius:calc(var(--radio) + 4px);overflow:hidden;box-shadow:var(--sombra-alta);background:var(--noche)}
.portada img,.portada svg{width:100%}
.portada::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* Relato */
.relato{--tam:1;font:400 calc(1.18rem * var(--tam))/1.85 var(--lectura)}
.relato p{margin:0 0 1.05em;border-radius:10px;transition:background .4s,box-shadow .4s}
.relato p.leyendo{background:var(--oro-suave);box-shadow:0 0 0 8px var(--oro-suave)}
.relato p:first-child::first-letter{float:left;font:600 3.6em/.85 var(--titulo);padding:8px 12px 0 0;color:var(--violeta)}
.nota{position:relative;background:var(--oro-suave);border-radius:var(--radio);padding:18px 20px 18px 62px;margin:0 0 26px}
.nota::before{content:"";position:absolute;left:18px;top:20px;width:28px;height:28px;background:#d18f0b;-webkit-mask:var(--estrella) center/contain no-repeat;mask:var(--estrella) center/contain no-repeat}
@media (prefers-color-scheme:dark){.nota::before{background:var(--oro)}}
.nota strong{display:block;margin-bottom:4px;font-family:var(--titulo);font-weight:600;font-size:1.08rem}
.caja{background:var(--papel);border:1.5px solid var(--linea);border-radius:var(--radio);padding:20px 22px;margin:0 0 18px;box-shadow:var(--sombra)}
.moraleja{position:relative;background:linear-gradient(135deg,var(--menta-suave),var(--violeta-suave));border-radius:var(--radio);padding:22px 24px 22px 70px;font:italic 400 1.17rem/1.65 var(--lectura)}
.moraleja::before{content:"";position:absolute;left:22px;top:24px;width:30px;height:30px;background:var(--menta);-webkit-mask:var(--estrella) center/contain no-repeat;mask:var(--estrella) center/contain no-repeat;animation:girar 10s linear infinite}

/* Inicio, nudo y desenlace: tres pasos */
.partes{display:grid;gap:22px 14px;grid-template-columns:1fr;counter-reset:paso;margin-top:28px}
@media (min-width:700px){.partes{grid-template-columns:repeat(3,1fr)}}
.parte{--c:var(--cielo);counter-increment:paso;position:relative;background:var(--papel);border:1.5px solid var(--linea);border-top:6px solid var(--c);border-radius:var(--radio);padding:22px 18px 18px;box-shadow:var(--sombra);transition:transform .3s var(--muelle)}
.parte:nth-child(2){--c:var(--oro)}.parte:nth-child(3){--c:var(--menta)}
.parte::before{content:counter(paso);position:absolute;top:-22px;right:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:600 1.1rem var(--titulo);box-shadow:0 6px 14px -4px var(--c)}
.parte:hover{transform:translateY(-4px) rotate(-.6deg)}
.parte h3{margin:0 0 6px;font-size:1.1rem}
.parte p{margin:0;font-size:.98rem}

.personajes{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.personajes li{position:relative;background:var(--papel);border:1.5px solid var(--linea);border-radius:var(--radio-s);padding:12px 16px 12px 52px}
.personajes li::before{content:"";position:absolute;left:14px;top:14px;width:24px;height:24px;background:linear-gradient(135deg,var(--oro-2),var(--rosa));-webkit-mask:var(--estrella) center/contain no-repeat;mask:var(--estrella) center/contain no-repeat}

/* Preguntas */
.preguntas{list-style:none;padding:0;margin:0;counter-reset:q;display:grid;gap:12px}
.preguntas>li{counter-increment:q;position:relative;background:var(--papel);border:1.5px solid var(--linea);border-radius:var(--radio);padding:16px 18px 14px 62px;box-shadow:var(--sombra);transition:border-color .3s}
.preguntas>li::before{content:counter(q);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 1rem var(--titulo);color:#fff;background:linear-gradient(135deg,var(--violeta),var(--rosa));transition:transform .4s var(--muelle)}
.preguntas>li.respondida{border-color:var(--menta)}
.preguntas>li.respondida::before{content:"✓";background:linear-gradient(135deg,var(--menta),#18c29c);transform:rotate(360deg)}
.tipo{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--rosa-suave);color:var(--baya);border-radius:6px;padding:2px 8px;margin-right:6px;vertical-align:2px}
.preguntas details{margin-top:8px}
.preguntas summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:800;color:var(--violeta);font-size:.9rem;padding:5px 13px;border-radius:999px;background:var(--violeta-suave);list-style:none;transition:transform .2s var(--muelle)}
@media (prefers-color-scheme:dark){.preguntas summary{color:#c8b9ff}}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::before{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);transition:transform .3s}
.preguntas details[open] summary::before{transform:rotate(45deg) translate(-2px,-2px)}
.preguntas summary:hover{transform:scale(1.04)}
.preguntas details p{margin:10px 0 0;background:var(--menta-suave);border-radius:12px;padding:10px 14px;animation:aparecer .35s var(--muelle)}

/* Vocabulario: tarjetas que se voltean (con JS) */
.vocabulario{margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.vocabulario>div{background:var(--papel);border:1.5px solid var(--linea);border-radius:var(--radio-s);padding:12px 16px}
.vocabulario dt{font:600 1.1rem var(--titulo);color:var(--violeta)}
@media (prefers-color-scheme:dark){.vocabulario dt{color:#c8b9ff}}
.vocabulario dd{margin:2px 0 0}
.js .vocabulario>div{display:grid;padding:0;border:0;background:none;perspective:900px;cursor:pointer;min-height:132px;-webkit-tap-highlight-color:transparent}
.js .vocabulario dt,.js .vocabulario dd{grid-area:1/1;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radio-s);padding:16px;display:flex;flex-direction:column;justify-content:center;transition:transform .6s var(--muelle)}
.js .vocabulario dt{background:linear-gradient(135deg,var(--violeta),#5b3fe0);color:#fff;font-size:1.3rem;text-align:center;align-items:center;box-shadow:0 10px 22px -10px rgba(91,63,224,.7)}
.js .vocabulario dt::after{content:"Toca para descubrir";font:700 .78rem var(--ui);opacity:.8;margin-top:6px}
.js .vocabulario dd{transform:rotateY(180deg);background:var(--papel);border:1.5px solid var(--violeta);font-size:.98rem}
.js .vocabulario dd::before{content:attr(data-p);font:600 1.08rem var(--titulo);color:var(--violeta);margin-bottom:4px}
.js .vocabulario>div:hover dt{transform:rotateY(-14deg)}
.js .vocabulario>div.volteada dt{transform:rotateY(-180deg)}
.js .vocabulario>div.volteada dd{transform:rotateY(0)}

.firma{font-size:.9rem;color:var(--suave);border-top:1.5px dashed var(--linea);padding-top:14px;margin-top:36px}
.solo-impresion{display:none}
.lista-simple{padding-left:1.2em}
.lista-simple li{margin:0 0 7px}
.lista-simple li::marker{color:var(--oro)}
.pagina p,.pagina li{font-size:1.05rem}

/* ============================================================ Efectos de JS */
.chispa{position:fixed;z-index:200;pointer-events:none;width:13px;height:13px;margin:-6px 0 0 -6px;background:var(--c,#ffd56b);
  -webkit-mask:var(--estrella) center/contain no-repeat;mask:var(--estrella) center/contain no-repeat;animation:chispa .85s ease-out forwards}
@keyframes chispa{to{transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(.2);opacity:0}}
.estela{position:fixed;z-index:200;pointer-events:none;width:9px;height:9px;margin:-4px 0 0 -4px;background:var(--c,#ffd56b);
  -webkit-mask:var(--estrella) center/contain no-repeat;mask:var(--estrella) center/contain no-repeat;animation:estela .75s ease-out forwards}
@keyframes estela{to{transform:translateY(16px) rotate(90deg) scale(0);opacity:0}}
.hechizo{position:fixed;inset:0;z-index:300;pointer-events:none;background:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent 0,rgba(122,92,255,.25) 12%,rgba(20,24,66,.97) 55%);opacity:0;animation:hechizo .65s ease-in forwards}
@keyframes hechizo{to{opacity:1}}
.aviso{position:fixed;left:50%;bottom:24px;z-index:250;translate:-50% 0;width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--noche-2),#3b2f8f);color:#fff;font-weight:800;padding:14px 20px;border-radius:18px;box-shadow:0 20px 40px rgba(10,10,40,.4);animation:aviso 4.2s var(--muelle) forwards}
@keyframes aviso{0%{opacity:0;transform:translateY(30px) scale(.9)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(20px)}}
.arriba{position:fixed;right:16px;bottom:18px;z-index:45;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violeta),#5b3fe0);color:#fff;box-shadow:0 10px 24px rgba(91,63,224,.45);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:.4s var(--muelle)}
.arriba svg{width:24px;height:24px}
.arriba.ver{opacity:1;transform:none;pointer-events:auto}
.arriba.ver:hover{transform:translateY(-3px) rotate(-10deg)}

/* ============================================================ Pie */
.pie-ola{display:block;width:100%;height:60px;color:var(--noche);margin:80px 0 -1px}
.pie-ola path{fill:currentColor}
.pie{padding:10px 0 40px;font-size:.95rem;color:#d6d3ee;background:linear-gradient(180deg,var(--noche) 0%,#141842 100%)}
.pie a{color:#fff;text-decoration:none}
.pie a:hover{color:var(--oro-2);text-decoration:underline}
.pie .columnas{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pie h2{font-size:1.05rem;margin:0 0 10px;color:var(--oro-2)}
.pie ul{list-style:none;padding:0;margin:0}.pie li{margin:0 0 7px}
.pie .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;font-size:.85rem}
.pie .buenas{font:600 1.15rem var(--titulo);color:#ffe3a1;margin:0 0 4px}

/* ============================================================ Movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .fugaz,.burbujas{display:none}
}

/* ============================================================ Ficha para imprimir */
@media print{
  @page{margin:16mm 14mm}
  body{background:#fff;color:#000;font-size:11pt}
  .cabecera,.pie,.pie-ola,.ola,.migas,.acciones,.herramientas,.relacionados,.no-imprimir,.progreso,.arriba,.aviso,.estela,.chispa,ins.adsbygoogle,.google-auto-placed,.adsbygoogle{display:none!important}
  .solo-impresion{display:block}
  .portada{box-shadow:none;max-height:70mm;overflow:hidden;margin-bottom:8mm}
  .relato{font-size:12pt;line-height:1.55}
  .relato p:first-child::first-letter{color:#000}
  h2{margin-top:8mm;break-after:avoid}
  .preguntas details{display:none}
  .preguntas>li{box-shadow:none;padding:2mm 0 0 10mm;border:0;break-inside:avoid}
  .preguntas>li::before{content:counter(q)!important;background:#fff;color:#000;border:1px solid #000;width:6mm;height:6mm;left:0;top:2mm;transform:none}
  .preguntas>li::after{content:"";display:block;border-bottom:1px solid #999;height:9mm;margin-top:2mm}
  .js .vocabulario>div{display:block;min-height:0;border:1px solid #bbb;padding:2mm 3mm}
  .js .vocabulario dt,.js .vocabulario dd{display:block;transform:none!important;background:#fff;color:#000;box-shadow:none;border:0;padding:0;text-align:left;backface-visibility:visible}
  .js .vocabulario dt::after{display:none}
  .caja,.parte,.personajes li,.vocabulario div{border-color:#bbb;background:#fff;box-shadow:none}
  .moraleja,.nota{background:#fff;border:1px solid #000}
  .revelar{opacity:1!important;translate:none!important}
  .tarjeta{transform:none!important}
  .datos-alumno{display:flex;gap:10mm;font-weight:700;margin:0 0 6mm}
  .datos-alumno span{flex:1;border-bottom:1px solid #000;padding-bottom:1mm}
  .cuadro-dibujo{border:1.5px dashed #555;height:70mm;border-radius:4mm;margin-top:4mm;padding:3mm;color:#555}
  a{color:#000;text-decoration:none}
}