@font-face{font-family:CinzelD;src:url(../fonts/cinzel-decorative-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Spectral;font-weight:300;src:url(../fonts/spectral-latin-300-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Spectral;src:url(../fonts/spectral-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Spectral;font-style:italic;src:url(../fonts/spectral-latin-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:Shrikhand;src:url(../fonts/shrikhand-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Vollkorn;src:url(../fonts/vollkorn-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Vollkorn;font-weight:600;src:url(../fonts/vollkorn-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Sail;src:url(../fonts/sail-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Crimson;src:url(../fonts/crimson-pro-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Crimson;font-weight:600;src:url(../fonts/crimson-pro-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Italianno;src:url(../fonts/italianno-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Garamond;src:url(../fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Garamond;font-weight:500;src:url(../fonts/eb-garamond-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Garamond;font-style:italic;src:url(../fonts/eb-garamond-latin-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:Snowburst;src:url(../fonts/snowburst-one-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;font-weight:700;src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;font-weight:800;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Julius;src:url(../fonts/julius-sans-one-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;font-weight:300;src:url(../fonts/jost-latin-300-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;font-weight:500;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:AlmendraD;src:url(../fonts/almendra-display-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Alegreya;src:url(../fonts/alegreya-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Alegreya;font-weight:500;src:url(../fonts/alegreya-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Alegreya;font-style:italic;src:url(../fonts/alegreya-latin-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:IMFellSC;src:url(../fonts/im-fell-english-sc-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:IMFell;src:url(../fonts/im-fell-english-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:CourierP;src:url(../fonts/courier-prime-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:CourierP;font-weight:700;src:url(../fonts/courier-prime-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:CherryB;src:url(../fonts/cherry-bomb-one-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Metamorphous;src:url(../fonts/metamorphous-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:AlegreyaS;src:url(../fonts/alegreya-sans-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:AlegreyaS;font-weight:500;src:url(../fonts/alegreya-sans-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Bangers;src:url(../fonts/bangers-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:ComicN;src:url(../fonts/comic-neue-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:ComicN;font-weight:700;src:url(../fonts/comic-neue-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Pinyon;src:url(../fonts/pinyon-script-latin-400-normal.woff2) format("woff2");font-display:swap}

/* 1 · Estrellas: carta celeste */
.t1{--bg:#060a22;--f-t:CinzelD,serif;--f-c:Spectral,serif;--pp:#0f1a3f;--tp:#efe6cb;--cq:#f2cf74;--w-q:400;--nav:#f4ebd0;--fs:1.12rem;--sombra:drop-shadow(0 0 22px rgba(255,226,150,.28))}
.t1 .papel-b{background:radial-gradient(circle at 50% 0,transparent 0 17rem,rgba(242,207,116,.14) 17rem calc(17rem + 1px),transparent calc(17rem + 2px)),radial-gradient(circle at 50% 0,transparent 0 32rem,rgba(242,207,116,.1) 32rem calc(32rem + 1px),transparent calc(32rem + 2px)),repeating-linear-gradient(90deg,transparent 0 79px,rgba(242,207,116,.05) 79px 80px),#0f1a3f}
.t1 .tapa{background:#0a1230;border:1px dashed rgba(242,207,116,.35);transition:opacity .9s}
.t1 .tapa i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffefb8;animation:guina 2.4s infinite}
@keyframes guina{50%{opacity:.15}}
.t1 .abierto .tapa{opacity:0}
.t1 .abierto .a-in{text-shadow:0 0 16px rgba(255,226,150,.4)}
.tw{animation:guina 2.8s infinite}

/* 2 · Chocolate */
.t2{--bg:#e7cfae;--f-t:Shrikhand,serif;--f-c:Vollkorn,serif;--pp:#fbf0dd;--tp:#3a1f12;--cq:#6e3a1c;--nav:#3a1f12;--fs:1.1rem}
.t2 .cab{padding-top:clamp(5.5rem,19vh,10rem)}
.t2 .cab h1{color:#5a2c13}
.t2 .volver{color:#fff4e2}
.t2 .papel-b{background:var(--grano),#fbf0dd}
.t2 .tapa{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:3px;overflow:visible}
.t2 .tapa i{background:linear-gradient(145deg,#8a5230,#51290f 55%,#3d1d0a);box-shadow:inset 2px 2px 2px rgba(255,214,170,.4),inset -3px -3px 3px rgba(0,0,0,.45);border-radius:3px;transition:transform .75s var(--d) cubic-bezier(.5,0,.8,.6),opacity .35s calc(var(--d) + .4s)}
.t2 .abierto .tapa i{transform:translateY(240px) rotate(32deg);opacity:0}

/* 3 · Mar: mensaje en una botella */
.t3{--bg:#96d6ec;--f-t:Sail,cursive;--f-c:Crimson,serif;--pp:#f4e6c8;--tp:#17354a;--cq:#0d5a80;--nav:#0b3550;--fs:1.2rem}
.t3 .pasos{color:#fff}
.t3 .cab h1{font-size:clamp(3.4rem,13vw,6.6rem)}
.t3 .papel-b{background:radial-gradient(ellipse 40% 8% at 20% 30%,rgba(120,90,40,.12),transparent),radial-gradient(ellipse 30% 6% at 80% 70%,rgba(120,90,40,.12),transparent),var(--grano),#f4e6c8}
.t3 .tapa svg{width:100%;height:100%;transition:transform 1.3s cubic-bezier(.6,0,.3,1)}
.t3 .tapa path{fill:#2d9cb3}
.t3 .abierto .tapa svg{transform:translateX(-112%)}
.ola{animation:ola 5s linear infinite}.ola.b{animation-duration:3.2s}
@keyframes ola{to{transform:translateX(40px)}}

/* 4 · Mariposas: herbario */
.t4{--bg:#f6f0cc;--f-t:Italianno,cursive;--f-c:Garamond,serif;--pp:#fbf8e8;--tp:#2c3320;--cq:#6c5a13;--w-q:500;--nav:#2c3320;--fs:1.22rem}
.t4 .cab h1{font-size:clamp(3.8rem,14vw,7rem)}
.t4 .papel-b{background:radial-gradient(circle at 100% 0,rgba(133,167,88,.34),transparent 9rem),radial-gradient(circle at 0 100%,rgba(217,120,140,.22),transparent 11rem),var(--grano),#fbf8e8}
.t4 .tapa{overflow:visible}
.t4 .tapa i{position:absolute;width:24%;height:52%;background:linear-gradient(135deg,#a9c566,#6d9440);border-radius:0 80% 0 80%;box-shadow:inset 0 0 0 1px rgba(47,80,30,.26);transition:transform 1.1s cubic-bezier(.4,0,.2,1),opacity .9s}
.t4 .abierto .tapa i{transform:translate(var(--x),-190px) rotate(var(--a));opacity:0}

.ala{transform-origin:50% 50%;animation:aletea 1.5s ease-in-out infinite alternate}
@keyframes aletea{to{transform:scaleX(.8)}}

.t4 .pasos{color:#1d2a12;text-shadow:0 0 7px #fff,0 0 2px #fff}

/* 5 · Nieve: placa de hielo */
.t5{--bg:#16304d;--f-t:Snowburst,serif;--f-c:Nunito,sans-serif;--pp:#ecf7fd;--tp:#123049;--cq:#1c5b86;--nav:#f4fbff;--fs:1.08rem;--lh:1.72;--w-q:700;--sombra:drop-shadow(0 0 16px rgba(200,235,255,.5))}
.t5 .papel-b{background:linear-gradient(135deg,#fff 0,transparent 30%),linear-gradient(315deg,#c0e3f5 0,transparent 42%),#ecf7fd}
.t5 .a-in{filter:blur(6px);opacity:.45}
.t5 .abierto .a-in{filter:none;opacity:1;transition-delay:.15s}
.t5 .tapa{background:repeating-linear-gradient(58deg,rgba(255,255,255,.8) 0 2px,transparent 2px 9px),repeating-linear-gradient(-58deg,rgba(255,255,255,.6) 0 1px,transparent 1px 13px),rgba(205,233,248,.82);border-radius:3px;-webkit-mask:radial-gradient(circle var(--rad,0px) at var(--px,50%) var(--py,50%),transparent 96%,#000);mask:radial-gradient(circle var(--rad,0px) at var(--px,50%) var(--py,50%),transparent 96%,#000)}

.t5 .pasos{color:#123049}

/* 6 · Auroras */
.t6{--bg:#030d16;--f-t:Julius,sans-serif;--f-c:Jost,sans-serif;--pp:rgba(6,18,28,.88);--tp:#e7f6f3;--cq:#7ff3c9;--w-q:500;--nav:#ecfff9;--fs:1.08rem;--lh:1.72;--sombra:drop-shadow(0 0 14px rgba(70,240,190,.34))}
.t6 .cab h1{font-size:clamp(2.1rem,7.6vw,4.2rem);letter-spacing:.08em}
.t6 .tapa{background:rgba(8,28,38,.92);transition:opacity 1.1s .15s}
.t6 .tapa i{position:absolute;inset:-20% 0;background:linear-gradient(100deg,transparent,#27f2a4 35%,#6a7bff 60%,transparent);opacity:.55;filter:blur(11px);animation:cinta 4s var(--d) infinite ease-in-out alternate}
@keyframes cinta{from{transform:translateX(-45%) skewX(-16deg)}to{transform:translateX(45%) skewX(10deg)}}
.t6 .abierto .tapa{opacity:0}
.luz{animation:tono 7s infinite alternate}
@keyframes tono{to{filter:hue-rotate(70deg)}}

/* 7 · Cuentos: libro */
.t7{--bg:#180b08;--f-t:AlmendraD,serif;--f-c:Alegreya,serif;--pp:#f7ecd2;--tp:#2f1e14;--cq:#7d1a24;--w-q:500;--nav:#f6e5ba;--fs:1.15rem;--f-fi:Alegreya}
.t7 .cab h1{color:#ffe9b0;-webkit-text-stroke:1.1px #ffe9b0}
.t7 .papel-b{background:linear-gradient(90deg,rgba(90,50,10,.28),transparent 7%),var(--grano),#f7ecd2;box-shadow:inset 0 0 0 .6rem #f7ecd2,inset 0 0 0 calc(.6rem + 1.5px) #b5892f,inset 0 0 0 calc(.8rem + 1.5px) #f7ecd2,inset 0 0 0 calc(.8rem + 2.5px) #b5892f;border-radius:2px 8px 8px 2px}
.t7 .papel-s::after{content:"";position:absolute;inset:6px -7px -7px 6px;z-index:-1;border-radius:2px 8px 8px 2px;background:repeating-linear-gradient(90deg,#d8c7a0 0 1px,#efe2c2 1px 3px)}
.t7 .primero::first-letter{float:left;margin:.08em .1em 0 0;padding:.08em .14em;font-family:AlmendraD,serif;font-size:3.5em;line-height:.9;color:#f8e3a2;-webkit-text-stroke:.8px #f8e3a2;background:#7d1a24;box-shadow:0 0 0 2px #b5892f}
.t7 .a{perspective:1400px}
.t7 .tapa{overflow:visible;display:grid;place-items:center;background:linear-gradient(90deg,#e6d4ab,#f3e5c3 18%);box-shadow:inset 0 0 0 1px #c9ad74,2px 3px 6px rgba(60,30,10,.28);transform-origin:left;transition:transform 1.25s cubic-bezier(.5,.05,.2,1),opacity .35s .95s;backface-visibility:hidden}
.t7 .tapa span{font-size:2rem;color:#7d1a24}
.t7 .abierto .tapa{transform:rotateY(-165deg);opacity:0}

/* 8 · Maravillas: diario de viaje */
.t8{--bg:#274a57;--f-t:IMFellSC,serif;--f-c:CourierP,monospace;--pp:#ecdcb4;--tp:#33261a;--cq:#7e2a1d;--w-q:700;--nav:#f4e9cb;--fs:1.03rem;--lh:1.74;--f-fi:IMFell}
.t8 .papel-b{background:repeating-linear-gradient(0deg,transparent 0 3.5rem,rgba(100,60,20,.08) 3.5rem calc(3.5rem + 1px)),repeating-linear-gradient(90deg,transparent 0 3.5rem,rgba(100,60,20,.08) 3.5rem calc(3.5rem + 1px)),radial-gradient(ellipse at center,transparent 50%,rgba(120,70,20,.34)),#ecdcb4}
.t8 .tapa{display:flex;flex-direction:column;justify-content:center;padding:.5rem 1.2rem;background:#f8eed2;border:1.5px dashed #8c2f22;transition:transform .55s cubic-bezier(.6,-.2,.7,.2),opacity .3s .35s}
.t8 .tapa span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#7c6241}
.t8 .tapa b{font:400 clamp(1.3rem,5vw,1.9rem)/1.1 IMFellSC,serif;color:#7e2a1d}
.t8 .abierto .tapa{transform:translateY(-14px) rotate(-3deg);opacity:0}
.t8 .par .sello{position:absolute;right:-1.1rem;top:-1.5rem;width:5.3rem;height:5.3rem;border:2.5px double #a33a2a;border-radius:50%;display:grid;place-content:center;text-align:center;color:#a33a2a;font-family:IMFellSC,serif;line-height:1;transform:rotate(var(--r)) scale(2.2);opacity:0;pointer-events:none;z-index:2}
.t8 .sello b{font-size:.68rem;font-weight:400;max-width:4.5rem}.t8 .sello small{font-size:.6rem;margin-top:.15rem}
.t8 .abierto .sello{opacity:.72;transform:rotate(var(--r)) scale(1);transition:transform .3s .35s cubic-bezier(.2,1.8,.4,1),opacity .15s .35s}
.t8 .q{padding-right:3.6rem}
.t8 .octava{width:min(88%,21rem);margin:0 auto 2rem;display:none}
.t8 .octava.vista{display:block;animation:aparece .9s .4s both}
@keyframes aparece{from{opacity:0;transform:scale(.8) rotate(-7deg)}}

/* 9 · Nubes */
.t9{--bg:#bfe3f6;--f-t:CherryB,sans-serif;--f-c:Nunito,sans-serif;--pp:#fff;--tp:#274766;--cq:#2e7ab8;--w-q:800;--nav:#123a5e;--fs:1.08rem;--lh:1.72;--sombra:drop-shadow(0 10px 18px rgba(50,110,170,.3))}
.t9 .cab h1{color:#fff;text-shadow:0 4px 0 #8cc4e8,0 8px 24px rgba(30,90,150,.32);font-size:clamp(3.2rem,12vw,6.4rem)}
.t9 .papel{--rell:clamp(2.6rem,9vw,5rem)}
.t9 .tapa{overflow:visible;z-index:2}
.t9 .tapa::before{content:"";position:absolute;inset:6%;background:#f1f9fe;border-radius:2rem;transition:opacity .5s .25s}
.t9 .tapa i{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 40%,#d9eefb);transition:transform 1.1s var(--d) cubic-bezier(.5,0,.3,1),opacity .8s calc(var(--d) + .25s)}
.t9 .abierto .tapa i{transform:translateX(var(--x)) scale(1.4);opacity:0}
.t9 .abierto .tapa::before{opacity:0}

/* 10 · Volcanes: papel quemado */
.t10{--bg:#0d0403;--f-t:Metamorphous,serif;--f-c:AlegreyaS,sans-serif;--pp:#1d1210;--tp:#f5dfc9;--cq:#ff9a3d;--w-q:500;--nav:#ffe1c4;--fs:1.14rem;--lh:1.68;--sombra:drop-shadow(0 0 3px #ffb347) drop-shadow(0 0 16px #ff4a0c)}
.t10 .papel-b{background:radial-gradient(ellipse at 50% 100%,rgba(255,74,12,.2),transparent 60%),var(--grano),#1d1210}
.t10 .tapa{overflow:visible}
.t10 .a::before{content:"";position:absolute;inset:0;border-radius:2px;background:radial-gradient(ellipse at center,rgba(255,106,20,.2),transparent 75%);opacity:0;transition:opacity 1s}
.t10 .abierto .a::before{opacity:1}
.t10 .tapa i{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#4a3a36 1px,transparent 2px) 0 0/13px 13px,radial-gradient(circle at 70% 60%,#231714 2px,transparent 3px) 0 0/19px 19px,#352824;transition:transform .85s cubic-bezier(.3,.1,.3,1),opacity .5s .5s}
.t10 .tapa i:first-child{filter:drop-shadow(1px 0 2px #ff6a14)}
.t10 .tapa i:last-child{filter:drop-shadow(-1px 0 2px #ff6a14)}
.t10 .abierto .tapa i:first-child{transform:translateX(-46%) rotate(-5deg);opacity:0}
.t10 .abierto .tapa i:last-child{transform:translateX(46%) rotate(5deg);opacity:0}
.t10.temblor .papel{animation:temblor .42s}
@keyframes temblor{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(2px,1px)}}
.lava{animation:brilla 2.6s infinite alternate}
@keyframes brilla{to{opacity:.72}}

/* 11 · Superpoderes: cómic */
.t11{--bg:#ffd21f;--f-t:Bangers,sans-serif;--f-c:ComicN,sans-serif;--f-q:Bangers,sans-serif;--w-q:400;--fs-q:1.42em;--pp:#fffdf5;--tp:#111;--cq:#d81b23;--nav:#111;--fs:1.12rem;--lh:1.6;--sombra:drop-shadow(9px 9px 0 #111)}
.t11 .papel-c{font-weight:700}
.t11 .cab h1{color:#fff;letter-spacing:.03em;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:5px 5px 0 #e3262c;transform:rotate(-2deg);font-size:clamp(3.2rem,12.6vw,7rem)}
.t11 .cab-mes,.t11 .pista{font-weight:700}
.t11 .papel-b{border:4px solid #111}
.t11 .a{border:3px solid #111;background:#fff4b8;box-shadow:4px 4px 0 #111;transform:rotate(-.4deg)}
.t11 .par:nth-of-type(even) .a{transform:rotate(.5deg)}
.t11 .tapa{display:grid;place-items:center;background:#e3262c radial-gradient(#b0141a 22%,transparent 24%) 0 0/9px 9px;transition:transform .32s cubic-bezier(.5,-.5,.7,.5),opacity .2s .15s}
.t11 .tapa b{font:400 clamp(2.6rem,10vw,3.6rem)/1 Bangers,sans-serif;color:#ffd21f;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:3px 3px 0 #111;transform:rotate(var(--r))}
.t11 .abierto .tapa{transform:scale(1.5) rotate(5deg);opacity:0}

/* 12 · Carta clásica */
.t12{--bg:#3c0a13;--f-t:Pinyon,cursive;--f-c:Garamond,serif;--pp:#f3e4c4;--tp:#33241a;--nav:#fbe9d8;--fs:1.24rem;--lh:1.72;--f-fi:Pinyon}
.t12 .cab h1{font-size:clamp(3.2rem,12vw,6.2rem)}
.t12 .papel-b{background:radial-gradient(ellipse at center,transparent 56%,rgba(120,70,20,.36)),var(--grano),#f3e4c4}
.t12 .firma{font-size:1.9em}
.t12 .primero::first-letter{font-family:Pinyon,cursive;font-size:3em;line-height:.8;padding-right:.05em;color:#8c1626}
.mosaico{position:relative;z-index:1;display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(3px,.8vw,7px);width:min(100%,46rem);margin:4rem auto 0}
.tesela{aspect-ratio:1;overflow:hidden;background:#59111e;transition:transform .3s;cursor:zoom-in}
.tesela:hover{transform:scale(1.14);z-index:2;position:relative}
.tesela img{width:100%;height:100%;object-fit:cover}
.final{position:relative;z-index:1;margin:3rem 0 0;text-align:center;color:#fbe9d8}
.final p{margin:0;font-family:Pinyon,cursive;font-size:clamp(3rem,10vw,5rem);line-height:1.15}