@font-face{font-family:"Fredericka the Great";src:url(assets/fonts/fredericka.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(assets/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:600 800;font-display:swap}
:root{--bg:#0f1a12;--bg2:#16261a;--ink:#f3ecd9;--muted:#bfb79e;--acc:#e8572a;--gold:#f4b63f;--moss:#7fb03f;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.locked{overflow:hidden}
a{color:var(--gold)}img{max-width:100%;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:#000;padding:8px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--acc),#c4361a);color:#fff;font-weight:800;text-decoration:none;border:0;border-radius:999px;padding:.9em 1.8em;font-size:1.05rem;cursor:pointer;box-shadow:0 10px 30px #e8572a55;transition:transform .2s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px) scale(1.03)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* intro */
.intro{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;background:#0b120d url(assets/img/bosque-ia-poster.webp) center/cover;transition:opacity .9s,visibility .9s}
.intro.gone{opacity:0;visibility:hidden}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) brightness(.75)}
.intro::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,#0b120dcc 100%),linear-gradient(transparent 50%,#0f1a12)}
.fog{position:absolute;inset:-20% -50%;z-index:1;background:radial-gradient(ellipse at 30% 70%,#ffffff22,transparent 50%),radial-gradient(ellipse at 70% 80%,#ffffff1a,transparent 45%);animation:fog 22s linear infinite alternate}
.rays-unused{position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(115deg,transparent 0 60px,#ffe9a610 60px 90px);mix-blend-mode:screen;animation:rays 9s ease-in-out infinite alternate}
@keyframes fog{to{transform:translateX(18%)}}@keyframes rays{from{opacity:.4}to{opacity:1}}
.spores{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.x-intro-shrooms{position:absolute;bottom:4vh;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:14px}
.x-intro-shrooms img{width:clamp(70px,16vw,140px);aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #f4b63f99;box-shadow:0 8px 24px #000a}
.intro-content{position:relative;z-index:4;text-align:center;padding:24px;max-width:720px;margin-bottom:12vh}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:700;margin:0 0 .6em}
.logo{position:relative;font-family:"Fredericka the Great",Georgia,serif;font-weight:400;white-space:nowrap;font-size:clamp(2.5rem,12vw,7rem);line-height:1.15;margin:0;letter-spacing:.01em;isolation:isolate;color:transparent;filter:drop-shadow(0 0 .8px #3d6bff) drop-shadow(0 0 .8px #1636d6) drop-shadow(.02em .05em .04em #000e) drop-shadow(0 0 .14em #2f6bffcc) drop-shadow(0 0 .4em #1636d688)}
.logo .w{position:relative;display:inline-block;color:#0b1d5c;-webkit-text-stroke:.04em #0b1d5c}
.logo .w::before{content:attr(data-text);position:absolute;inset:0;z-index:1;color:transparent;-webkit-text-stroke:.006em #e9ff3a;background-image:linear-gradient(180deg,#faffc2 0%,#eaff3a 32%,#c8f400 62%,#8fd400 100%);-webkit-background-clip:text;background-clip:text}
.logo .myc{display:none}
@media (prefers-reduced-motion:reduce){.logo .w,.logo .w::before{animation:none}}
@keyframes hue{to{background-position:600% 0}}
@keyframes bob{50%{transform:translateY(-4%)}}
@keyframes flicker{0%,91%,95%,100%{opacity:1}92%{opacity:.55}93%{opacity:1}94%{opacity:.7}}
.slogan{font-family:"Fredericka the Great",Georgia,serif;font-weight:400;line-height:1.2;color:#f4ffc8;-webkit-text-stroke:.012em #f4ffc8;margin:.5em 0 .7em;letter-spacing:.06em;font-size:clamp(1.25rem,5vw,2rem);filter:drop-shadow(0 0 .6px #1636d6) drop-shadow(0 0 .6px #1636d6) drop-shadow(0 2px 2px #000e)}
.btn-enter{font-size:1.25rem;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 14px #e8572a22,0 10px 30px #e8572a55}}
/* logo definitivo (lima mejorado): Fredericka the Great lima con relieve, base oscura, borde y halo azul electrico */
/* top */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0f1a12e6;backdrop-filter:blur(8px);border-bottom:1px solid #ffffff14}
.brand{font-family:"Fredericka the Great",Georgia,serif;font-size:1.4rem;font-weight:400;letter-spacing:.04em;color:#e4ff3a;-webkit-text-stroke:.01em #e4ff3a;text-decoration:none;filter:drop-shadow(0 0 .6px #1636d6) drop-shadow(0 1px 1px #000c) drop-shadow(0 0 .25em #2f6bff99)}
.topbar nav{display:flex;gap:14px;margin-left:auto;overflow-x:auto}
.topbar nav a{color:var(--ink);text-decoration:none;font-size:.92rem;white-space:nowrap}
.pill{background:var(--acc);padding:.2em .8em;border-radius:99px}
.mute{background:#ffffff14;border:1px solid #ffffff30;color:#fff;border-radius:50%;width:42px;height:42px;font-size:1.1rem;cursor:pointer;flex:none}
@media(max-width:560px){.topbar nav a:not(.pill){display:none}}
/* sections */
.hero{text-align:center;padding:72px 20px 40px;background:radial-gradient(ellipse at top,#2c4a2a,transparent 70%)}
.hero h2,.sec-title,.cta h2,.card h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
.hero h2{font-size:clamp(2rem,7vw,3.6rem);margin:.2em 0;line-height:1.05}.hero em{color:var(--moss);font-style:normal}
.hero p{max-width:620px;margin:0 auto 1.6em;color:var(--muted)}
.block{padding:40px 16px;max-width:1180px;margin:auto}
.sec-title{font-size:clamp(1.6rem,5vw,2.4rem);margin:0 0 20px}.sec-title::after{content:"";display:block;width:64px;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--acc),var(--gold));margin-top:8px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.lite{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:var(--r);overflow:hidden;background:#000 center/cover;cursor:pointer}
.lite img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.lite:hover img{transform:scale(1.05)}
.lite .play{position:absolute;inset:0;margin:auto;width:68px;height:48px;border-radius:14px;background:#e8572aee;display:grid;place-items:center}
.lite .play::before{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcap{margin:.6em .2em 0;font-weight:700;font-size:.98rem}.vcap small{display:block;color:var(--muted);font-weight:400}
.shorts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.shorts>div{scroll-snap-align:start}.shorts .lite{aspect-ratio:9/16}
.warn{background:#5a1a10;border-left:5px solid var(--acc);padding:14px 16px;border-radius:12px;margin:0 0 22px}.warn.small{font-size:.92rem;margin-top:22px}
.card{background:var(--bg2);border-radius:var(--r);overflow:hidden;border:1px solid #ffffff12;transition:transform .25s}
.card:hover{transform:translateY(-4px)}.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card-body{padding:16px 18px 20px}.card h3{margin:.5em 0 0;font-size:1.35rem}.sci{margin:0 0 .6em;font-style:italic;color:var(--muted)}
.card ul{padding-left:1.1em;margin:0}.card li{margin:.3em 0}
.badge{display:inline-block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.3em .8em;border-radius:99px}
.ok{background:#3d7a25}.caution{background:#a36a0a}.bad{background:#b3121b}.danger{border-color:#b3121b88}
.cta{text-align:center;padding:80px 20px;margin-top:30px;background:linear-gradient(135deg,#e8572a,#7a1f0e)}
.cta h2{font-size:clamp(2rem,7vw,3.4rem);margin:0}.btn-big{background:#fff;color:#c4361a;font-size:1.4rem;margin-top:16px}
.foot{padding:28px 16px;text-align:center;color:var(--muted);font-size:.82rem}.credits{max-width:820px;margin:auto}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.intro-video,.spores{display:none}}

/* premium button */
.btn-enter{position:relative;display:inline-flex;align-items:center;gap:.7em;overflow:hidden;animation:none;padding:.95em 2em;color:#f3f7e6;letter-spacing:.02em;
 background:linear-gradient(#0d1712d9,#0d1712d9) padding-box,linear-gradient(120deg,#d8ff2e,#2f6bff) border-box;border:1.5px solid transparent;box-shadow:0 10px 30px #0008,0 0 24px #d8ff2e22;backdrop-filter:blur(6px)}
.btn-enter .arrow{width:1.15em;height:1.15em;transition:transform .35s ease}
.btn-enter:hover .arrow,.btn-enter:focus-visible .arrow{transform:translateX(4px)}
.btn-enter::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff30,transparent);transform:skewX(-20deg);transition:left .7s ease}
.btn-enter:hover::after,.btn-enter:focus-visible::after{left:120%}
.btn-enter:hover{box-shadow:0 10px 30px #0008,0 0 30px #d8ff2e44}
.btn{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700}
.cta{position:relative;overflow:hidden}.mascots{width:min(360px,80%);margin:-30px auto 6px;filter:drop-shadow(0 12px 18px #0006);transition:transform .6s}.mascots:hover{transform:translateY(-6px) rotate(-1deg)}

.intro-sound{position:absolute;top:16px;right:16px;z-index:60;background:#0f1a12cc;border:1px solid #e9ff3a88;color:#faffc2;border-radius:999px;padding:10px 16px;font:inherit;font-size:.95rem;cursor:pointer;backdrop-filter:blur(6px);animation:pulseSound 2s ease-in-out infinite}
@keyframes pulseSound{50%{box-shadow:0 0 18px #e9ff3a66}}

/* === join: forest scene v2 === */
.cta.forest{background:#0f1a12;padding:150px 18px 150px;margin-top:0;isolation:isolate;min-height:760px;text-align:center}
.forest-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 72%,transparent)}
.px{will-change:transform}
.bg-photo{position:absolute;inset:-6% -4%;background:url(assets/img/bosque-noche-800.webp) 50% 70%/cover no-repeat}
@media (min-width:700px){.bg-photo{background-image:url(assets/img/bosque-noche-1600.webp)}}
.bg-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 62%,transparent,#0f1a1299 70%,#0f1a12)}
.mist{position:absolute;left:-30%;right:-30%;border-radius:50%;filter:blur(30px);animation:mist 26s ease-in-out infinite alternate}
.m1{bottom:30%;height:28%;background:radial-gradient(closest-side,#bfe3d826,transparent)}
.m2{bottom:14%;height:22%;background:radial-gradient(closest-side,#d5efe233,transparent);animation-duration:34s;animation-direction:alternate-reverse}
@keyframes mist{to{translate:8% 0}}
.glow-spot{position:absolute;left:50%;top:44%;width:min(720px,120vw);height:420px;translate:-50% -50%;background:radial-gradient(closest-side,#f4d77a22,#e9ff3a0d 55%,transparent);mix-blend-mode:screen}
.flies{position:absolute;inset:0;width:100%;height:100%}
.join-inner{position:relative;max-width:640px;margin:0 auto}
.stage{position:relative;width:min(380px,86%);margin:0 auto 6px}
.ground{position:absolute;left:-8%;right:-8%;bottom:-4%;height:26%;border-radius:50%;background:radial-gradient(closest-side,#000a,#0006 50%,transparent);filter:blur(8px)}
.mascot-btn{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cta .mascots{width:100%;margin:0;filter:drop-shadow(0 -2px 6px #ffe39a40) drop-shadow(0 0 22px #e9ff3a1f) brightness(.9) saturate(.88);-webkit-mask-image:linear-gradient(#000 80%,#0000 99%);mask-image:linear-gradient(#000 80%,#0000 99%);transform-origin:50% 92%;animation:breathe 4.5s ease-in-out infinite}
.cta .mascots:hover{transform:none}
@keyframes breathe{50%{transform:translateY(-3px) scaleY(1.012)}}
.mascot-btn.bounce .mascots{animation:bounce .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes bounce{0%{transform:none}30%{transform:translateY(-16px) scale(1.04,.97)}60%{transform:translateY(0) scale(.97,1.03)}100%{transform:none}}
.spore{position:absolute;width:6px;height:6px;border-radius:50%;background:#f3ffb0;box-shadow:0 0 10px #e9ff3a,0 0 18px #c8f40088;pointer-events:none;animation:spore 1.1s ease-out forwards}
@keyframes spore{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.cta.forest h2{color:#f6ffd8;text-shadow:0 2px 24px #000c;margin-top:10px}
.cta.forest p{color:#e4ecd4;text-shadow:0 1px 10px #000;margin:.5em auto 0;max-width:30ch;font-size:1.05rem}
.chips{list-style:none;padding:0;margin:16px 0 4px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chips li{padding:.38em .95em;border-radius:999px;font-size:.88rem;font-weight:600;color:#effcd0;background:linear-gradient(#ffffff14,#ffffff06);border:1px solid #ffffff22;box-shadow:inset 0 1px 0 #ffffff1f,0 6px 18px #0004;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.cta.forest .btn-big{position:relative;overflow:hidden;margin-top:20px;color:#0d1a10;background:linear-gradient(135deg,#ecff6a,#c8f400);box-shadow:inset 0 1px 0 #fff8,0 12px 30px #0008,0 0 30px #c8f40044;transition:transform .2s,box-shadow .3s;font-size:clamp(1.05rem,4.6vw,1.3rem);white-space:nowrap;padding:.85em 1.6em}
.cta.forest .btn-big::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:35%;background:linear-gradient(100deg,transparent,#fff8,transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.cta.forest .btn-big:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff8,0 14px 34px #0009,0 0 44px #e9ff3a66}.cta.forest .btn-big:active{transform:scale(.96)}
.reveal{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1.1s}
.reveal.in{opacity:1;transform:none;filter:none}
@media (min-width:900px){.cta.forest{min-height:860px;padding-top:190px;padding-bottom:190px}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none}.flies{display:none}.mist,.cta .mascots,.cta.forest .btn-big::after{animation:none}}

/* === mascotas 3D interactivas v6: setas completas en el suelo === */
.stage{position:relative;width:min(540px,96%);aspect-ratio:4/3;margin:0 auto 4px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.soil{position:absolute;left:-14%;right:-14%;bottom:-6%;height:52%;background:url(assets/img/suelo-bosque@1x.webp) 50% 70%/cover no-repeat;filter:brightness(1.15) saturate(.9);-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 40%,#0000 100%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 40%,#0000 100%);pointer-events:none}
@media (min-width:700px){.soil{background-image:url(assets/img/suelo-bosque.webp)}}
.soil::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 48%,#ffe39a22,transparent 70%)}
.soil-front{position:absolute;left:0;right:0;bottom:-4%;height:16%;background:radial-gradient(50% 100% at 50% 100%,#0b130daa,#0000);pointer-events:none;z-index:6}
.shroom{position:absolute;bottom:13%;height:var(--h);aspect-ratio:var(--ar);left:var(--x);translate:-50% 0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:700px;z-index:var(--z)}
.shroom[data-s=naranja]{--x:25%;--h:60%;--ar:667/949;--z:3}
.shroom[data-s=marron]{--x:50%;--h:56%;--ar:449/539;--z:4;bottom:19%}
.shroom[data-s=gris]{--x:76%;--h:63%;--ar:729/927;--z:3;bottom:12%}
.shroom:focus-visible{outline:2px dashed #e9ff3a99;outline-offset:4px;border-radius:30%}
.shroom .body{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform;transform-style:preserve-3d}
.shroom .body img{width:100%;height:100%;display:block;filter:brightness(.8) saturate(.88) contrast(1.04) drop-shadow(0 -1px 6px #ffe39a2a);transition:filter .4s}
.shroom.angry .body img{filter:brightness(.85) sepia(.35) saturate(1.8) hue-rotate(-25deg)}
.shroom.glow .body img{filter:brightness(1) drop-shadow(0 0 10px #f4d03fdd) drop-shadow(0 0 26px #c8f400aa)}
/* oclusión ambiental en la base + sombra de contacto */
.shroom .sh{position:absolute;left:50%;bottom:-3%;width:120%;height:16%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,#000e,#000a 40%,#0000);filter:blur(4px);will-change:transform,opacity}
.shroom .mata{position:absolute;left:50%;bottom:-9%;width:96%;translate:-50% 0;filter:brightness(.55) saturate(.8) hue-rotate(10deg);pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,#0000);mask-image:linear-gradient(#000 55%,#0000)}
.shroom[data-s=marron] .mata{width:110%;bottom:-14%}
.fx{position:absolute;pointer-events:none;z-index:4}
.fx-spore{width:6px;height:6px;border-radius:50%;background:#f3ffb0;box-shadow:0 0 10px #e9ff3a,0 0 18px #c8f40088;animation:spore 1.1s ease-out forwards}
.fx-up{width:5px;height:5px;border-radius:50%;background:#ffe680;box-shadow:0 0 8px #f4d03f,0 0 16px #c8f400;animation:up 1.6s ease-out forwards}
@keyframes up{to{transform:translate(var(--dx),-120px);opacity:0}}
.fx-steam{width:26px;height:18px;border-radius:50%;background:#e8eef0bb;filter:blur(3px);animation:steam 1.2s ease-out forwards}
@keyframes steam{to{transform:translate(var(--dx),-60px) scale(2.2);opacity:0}}
.fx-plus{font:800 clamp(1rem,4vw,1.35rem) "Bricolage Grotesque",system-ui,sans-serif;color:#f6ff9a;text-shadow:0 0 12px #c8f400,0 2px 6px #000;white-space:nowrap;translate:-50% 0;animation:plus 1.8s ease-out forwards}
@keyframes plus{0%{transform:translateY(10px) scale(.6);opacity:0}20%{transform:none;opacity:1}100%{transform:translateY(-70px);opacity:0}}
.fx-hand{width:16px;height:20px;border-radius:50% 50% 45% 45%;background:#e7c9a0;box-shadow:inset -2px -3px 0 #0003,0 2px 6px #0006;animation:hand .5s ease-in-out 4}
.fx-hand.b{animation-delay:-.25s}
@keyframes hand{50%{transform:translateY(-22px)}}
.bubble{position:absolute;left:0;top:0;z-index:5;max-width:min(240px,70vw);margin:0;padding:.55em .9em;border-radius:16px;font-weight:700;font-size:.95rem;line-height:1.25;color:#10200f;background:#fbfff0f2;box-shadow:0 8px 24px #0007;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .25s,transform .25s;pointer-events:none;text-shadow:none}
.bubble::after{content:"";position:absolute;left:var(--tail,50%);bottom:-7px;width:14px;height:14px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.bubble.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fx{display:none}}
.cta.forest .stage .bubble{color:#10200f;text-shadow:none;opacity:0}.cta.forest .stage .bubble.on{opacity:1}

.shroom .cara{position:absolute;display:block;opacity:0;transition:opacity 50ms linear;pointer-events:none;filter:brightness(.8) saturate(.88) contrast(1.04)}
.shroom .cara.on{opacity:1}
.shroom.glow .cara{filter:brightness(1)}
.btn-enter,.btn-big{border-radius:16px}
.btn-enter>span,.btn-enter>.arrow{position:relative;z-index:2}
.btn-enter>span{text-shadow:0 0 8px #000,0 0 3px #000,0 1px 2px #000}
.btn-enter .arrow{filter:drop-shadow(0 1px 2px #000)}
.btn-enter .myc{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;border-radius:inherit}
.btn-enter .myc-soft{filter:blur(2.5px)}
.btn-enter.myc-run{transition:box-shadow 1.1s ease}
.btn-enter.myc-run::after{display:none}
.btn-enter.myc-done{animation:mycDone .45s cubic-bezier(.3,1.5,.5,1);box-shadow:0 10px 30px #0008,0 0 14px #f6f0dc55,inset 0 0 10px #f6f0dc33}
@keyframes mycDone{40%{transform:scale(1.03)}}
.stage .shroom{pointer-events:none}.stage .shroom *{pointer-events:none}.stage{cursor:pointer}.stage .bubble,.stage .soil,.stage .soil-front,.stage .fx{pointer-events:none}
.myc-shroom{position:fixed;z-index:60;width:auto;height:64px;aspect-ratio:643/872;transform:translate(-50%,-100%) translateY(4px);pointer-events:none}.myc-shroom img{display:block;width:100%;height:100%;transform-origin:50% 100%;filter:brightness(.78) sepia(.18) saturate(1.05) contrast(1.05) drop-shadow(0 2px 3px #000a)}.myc-shroom .msh{position:absolute;left:50%;bottom:-3px;width:130%;height:8px;border-radius:50%;background:radial-gradient(closest-side,#000b,#0000)}
.myc-spore{position:fixed;z-index:61;width:4px;height:4px;border-radius:50%;background:#fffbe6;box-shadow:0 0 6px #f4ffc8,0 0 12px #d8ff2e88;pointer-events:none}
.btn-enter.myc-run>span::before{content:"";position:absolute;inset:-.3em -.6em;z-index:-1;border-radius:12px;background:radial-gradient(closest-side,#0d1712b0,#0d171200);pointer-events:none}
.intro .slogan{margin:.45em 0 0;padding-bottom:80px;font-size:clamp(1.35rem,5.4vw,2.1rem)}.intro-content{margin-bottom:6vh}
.intro .logo{font-size:clamp(3rem,15.5vw,8.5rem)}.intro .slogan{font-size:clamp(1.15rem,4.6vw,1.8rem)}
/* v14 pulido */
.hero h2,.sec-title,.cta h2,.card h3,.cta.forest p{text-wrap:balance}
@media (min-width:640px){.grid.species{display:flex;flex-wrap:wrap;justify-content:center}.grid.species>.card{flex:1 1 280px;max-width:calc((100% - 36px)/3)}}
.cta.forest{padding-top:90px}
@media (min-width:900px){.cta.forest{min-height:760px;padding-top:110px;padding-bottom:150px}}
.foot .disclaimer{max-width:820px;margin:.8em auto 0}
.foot .legal{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.foot a{color:#d6e6c4;text-underline-offset:3px}.foot a:hover{color:var(--gold)}
.legal-page{max-width:760px;margin:0 auto;padding:48px 20px 60px;line-height:1.65}
.legal-page h1{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(1.9rem,6vw,2.6rem);letter-spacing:-.02em;margin:0 0 .4em;text-wrap:balance}
.legal-page h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:1.25rem;margin:1.8em 0 .4em}
.legal-page a{color:var(--gold)}.legal-page .ph{background:#e9ff3a22;color:#f2ffb0;padding:0 .3em;border-radius:4px;font-weight:600}
.legal-page .upd{color:var(--muted);font-size:.9rem}
.card img{height:auto}
.cta.forest{padding-bottom:64px;min-height:0}
.legal-page .tbl{overflow-x:auto;margin:1em 0;border:1px solid #ffffff1f;border-radius:12px}
.legal-page table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:560px}
.legal-page th,.legal-page td{padding:.55em .7em;border-bottom:1px solid #ffffff14;text-align:left;vertical-align:top}
.legal-page th{background:#ffffff0d}
.legal-page code{overflow-wrap:anywhere;font-size:.85em}
.legal-page li,.legal-page p{overflow-wrap:anywhere}
.intro-video{filter:saturate(1.15) brightness(.9)}
.intro::after{background:radial-gradient(ellipse at center,transparent 40%,#0b120d99 100%),linear-gradient(transparent 60%,#0f1a12e6)}
.intro-video{filter:saturate(1.2) brightness(1.02)}
.intro::after{background:radial-gradient(ellipse at center,transparent 50%,#0b120d66 100%),linear-gradient(transparent 70%,#0f1a12cc)}
.intro .logo,.intro .slogan{text-shadow:0 2px 14px #000c,0 0 4px #000a}
/* === v19 mundo mágico: claro del bosque === */
.hero.clearing{position:relative;isolation:isolate;overflow:hidden;background:#0f1a12;padding:64px 16px 56px}
.hero-bg{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.hero-bg .bg-photo{background-image:url(assets/img/bosque-ia-poster.webp);background-position:50% 40%;opacity:.55}
.hero-bg .bg-photo::after{background:radial-gradient(80% 60% at 50% 40%,transparent,#0f1a12cc 75%,#0f1a12)}
.lantern{position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(closest-side,#f6e7a522,#e9ff3a0c 50%,transparent);mix-blend-mode:screen;opacity:0;transition:opacity .5s}.lantern.on{opacity:1}
.hero h2{color:#f6ffd8;text-shadow:0 2px 24px #000c}.hero em{color:#d8ff3a;text-shadow:0 0 22px #c8f40055}
.hero>p:not(.kicker){color:#e0e8cf;text-shadow:0 1px 8px #000}
.feat{max-width:920px;margin:6px auto 22px}
.feat-stage{position:relative;border-radius:22px;padding:3px;background:linear-gradient(130deg,#e9ff3a99,#7fb03f44 40%,#2f6bff55);box-shadow:0 30px 70px #000b,0 0 60px #c8f40022;overflow:hidden}
.feat-stage .lite{border-radius:19px}.feat-lite .play{width:84px;height:58px;background:#e8572af0;box-shadow:0 0 0 0 #e9ff3a66;animation:fplay 2.6s ease-in-out infinite}
@keyframes fplay{50%{box-shadow:0 0 0 16px #e9ff3a00,0 0 30px #e9ff3a55}}
.feat-cap{margin:12px 4px 10px;text-align:left;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:clamp(1.02rem,3.4vw,1.3rem);line-height:1.25}.feat-cap small{display:block;color:var(--muted);font:400 .85rem system-ui,sans-serif;margin-top:3px}
.feat-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.feat-row button{flex:0 0 clamp(110px,22vw,150px);aspect-ratio:16/9;padding:0;border:2px solid #ffffff1c;border-radius:12px;overflow:hidden;background:#000;cursor:pointer;scroll-snap-align:start;transition:transform .25s,border-color .25s,box-shadow .25s}
.feat-row img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .25s}
.feat-row button:hover,.feat-row button[aria-current=true]{border-color:#e9ff3a;box-shadow:0 0 18px #c8f40055;transform:translateY(-2px)}.feat-row button:hover img,.feat-row button[aria-current=true] img{opacity:1}
/* setas mágicas */
.glade{display:flex;justify-content:center;gap:clamp(10px,4vw,34px);margin:10px auto 6px;flex-wrap:wrap}
.gm{position:relative;width:76px;height:96px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;color:#f4ffc8}
.gm .cap{position:absolute;left:8px;right:8px;top:6px;height:38px;border-radius:50% 50% 18% 18%/90% 90% 20% 20%;background:radial-gradient(circle at 30% 30%,#fff9 0 4px,transparent 5px),radial-gradient(circle at 66% 44%,#fff8 0 3px,transparent 4px),radial-gradient(ellipse at 50% 20%,var(--c1),var(--c2));box-shadow:0 0 18px var(--gl),0 0 40px var(--gl);transform-origin:50% 100%;animation:gmb 3.4s ease-in-out infinite var(--dl,0s)}
.gm .stem{position:absolute;left:30px;width:16px;top:40px;height:26px;border-radius:6px 6px 8px 8px;background:linear-gradient(90deg,#d9cfb1,#fffbea 50%,#c9be9e)}
.gm b{position:absolute;left:50%;bottom:0;translate:-50% 0;font:700 .74rem "Bricolage Grotesque",system-ui,sans-serif;white-space:nowrap;text-shadow:0 1px 6px #000}
.gm-a{--c1:#f6ff9a;--c2:#9fd400;--gl:#c8f40055}.gm-b{--c1:#ff9a6a;--c2:#c4361a;--gl:#e8572a55;--dl:-.8s}.gm-c{--c1:#b6e3ff;--c2:#2f6bff;--gl:#2f6bff55;--dl:-1.6s}.gm-d{--c1:#ffe07a;--c2:#c98a0a;--gl:#f4b63f55;--dl:-2.4s}
@keyframes gmb{50%{transform:scaleY(1.06) translateY(-2px)}}
.gm:hover .cap,.gm:focus-visible .cap{filter:brightness(1.25)}.gm.pop .cap{animation:gmpop .6s cubic-bezier(.3,1.6,.5,1)}@keyframes gmpop{30%{transform:scale(1.25,.8)}60%{transform:scale(.92,1.12) translateY(-8px)}}
.fact{max-width:560px;margin:8px auto 18px;padding:12px 16px;border-radius:14px;background:#0d1712cc;border:1px solid #e9ff3a44;color:#f4ffd8;box-shadow:0 0 30px #c8f4001a;backdrop-filter:blur(8px);opacity:.0;transform:translateY(6px);transition:opacity .4s,transform .4s}.fact.on{opacity:1;transform:none}
.bspore{position:fixed;z-index:70;width:5px;height:5px;border-radius:50%;background:#f3ffb0;box-shadow:0 0 8px #e9ff3a,0 0 16px #c8f40088;pointer-events:none}
.lpulse{position:absolute;z-index:3;width:20px;height:20px;margin:-10px;border-radius:50%;border:2px solid #e9ff3acc;box-shadow:0 0 20px #e9ff3a;pointer-events:none;animation:lp .9s ease-out forwards}@keyframes lp{to{transform:scale(14);opacity:0}}
.lite .sprout{position:absolute;right:10px;bottom:8px;z-index:2;width:22px;height:28px;pointer-events:none;background:radial-gradient(ellipse 50% 40% at 50% 30%,#ffd36a,#e8572a 70%,transparent 72%),linear-gradient(#fff6dd,#e6dcc0) 50% 100%/6px 55% no-repeat;filter:drop-shadow(0 0 6px #e9ff3a88);transform-origin:50% 100%;animation:spr .7s cubic-bezier(.3,1.6,.5,1)}@keyframes spr{from{transform:scale(0)}}
.lite{transition:box-shadow .3s}.lite:hover,.lite:focus-visible{box-shadow:0 0 0 2px #e9ff3a88,0 0 30px #c8f40044}
/* luciérnagas-enlace */
.block,.hero{position:relative}
.firefly{position:absolute;z-index:4;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fbffd0 0 3px,#e9ff3a99 4px,transparent 11px);animation:ffly 7s ease-in-out infinite}
.firefly:hover,.firefly:focus-visible{background:radial-gradient(circle,#fff 0 4px,#e9ff3a 5px,transparent 11px)}
.firefly.f0{right:4%;top:20px}.firefly.f1{left:4%;top:24px}.firefly.f2{right:6%;top:30px;animation-delay:-3s}.firefly.f3{left:8%;top:38%;animation-delay:-5s}
@keyframes ffly{25%{transform:translate(8px,-6px)}50%{transform:translate(-4px,-12px);opacity:.6}75%{transform:translate(-8px,-2px)}}
/* especies: secreto */
.flipb{margin-top:12px;padding:.5em 1em;border-radius:999px;border:1px solid #e9ff3a66;background:#e9ff3a14;color:#f4ffc8;font:700 .88rem "Bricolage Grotesque",system-ui,sans-serif;cursor:pointer}.flipb:hover{background:#e9ff3a26}
.sback{margin-top:10px;padding:12px 14px;border-radius:12px;background:#0d1712;border:1px solid #7fb03f55;animation:sb .45s ease}.sback p{margin:0 0 .5em}.ssafe{font-size:.88rem;color:#ffd2b8}
@keyframes sb{from{opacity:0;transform:rotateX(-30deg)}}
.card.open{box-shadow:0 0 0 1px #e9ff3a55,0 0 30px #c8f40022}
/* transición de helechos y musgo */
.fern-edge{height:46px;max-width:1180px;margin:0 auto;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 46'%3E%3Cg fill='none' stroke='%237fb03f' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 46C30 30 46 18 70 12M30 36l-6-8M38 28l-4-9M48 22l-2-9M58 16l1-8M34 40l8-2M44 32l8 0M54 25l8 2'/%3E%3Cpath d='M170 46c10-14 24-24 46-28M178 38l-5-7M188 30l-2-8M198 25l0-8M184 40l7 0M194 33l8 2'/%3E%3C/g%3E%3Cpath d='M0 46c40-8 80-6 120-2s80 4 120-2v4H0z' fill='%23233a1f'/%3E%3C/svg%3E") 0 100%/240px 46px repeat-x}
@media (prefers-reduced-motion:reduce){.hero-bg .flies,.lantern{display:none}}
.hero .feat-cap{color:var(--ink);max-width:none}
/* v20 setas ilustradas a tinta */
.glade{display:grid;grid-template-columns:repeat(4,minmax(0,150px));justify-content:center;gap:clamp(6px,3vw,30px);margin:18px auto 10px}
.gm{width:auto;height:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 0}
.gm img{height:clamp(118px,30vw,190px);width:auto;max-width:100%;object-fit:contain;transform-origin:50% 100%;filter:drop-shadow(0 0 1px #ffe39a66) drop-shadow(0 10px 12px #000c) drop-shadow(0 0 18px #f4d77a1f) brightness(.92);animation:sway 5s ease-in-out infinite var(--dl,0s);transition:filter .35s}
.gm::before{content:"";position:absolute;left:12%;right:12%;top:calc(clamp(118px,30vw,190px) - 14px);height:18px;border-radius:50%;background:radial-gradient(closest-side,#000b,transparent);filter:blur(3px);z-index:-1}
.gm b{position:static;translate:none;font-size:.82rem;letter-spacing:.02em;color:#f4ffd8;padding:.25em .7em;border-radius:99px;background:#0d1712b3;border:1px solid #e9ff3a33}
.gm-a{--dl:0s}.gm-b{--dl:-1.2s}.gm-c{--dl:-2.5s}.gm-d{--dl:-3.7s}
@keyframes sway{25%{transform:rotate(1.3deg)}75%{transform:rotate(-1.3deg)}}
.gm:hover img,.gm:focus-visible img{filter:drop-shadow(0 0 2px #ffe39a) drop-shadow(0 10px 12px #000c) drop-shadow(0 0 26px #f4d77a66) brightness(1.05)}
.gm:hover b,.gm:focus-visible b{border-color:#e9ff3a99}
.gm.pop img{animation:inkpop .65s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 0 3px #fff3b0) drop-shadow(0 10px 12px #000c) drop-shadow(0 0 34px #f4d03fcc) brightness(1.12)}
@keyframes inkpop{25%{transform:scale(1.1,.86)}55%{transform:scale(.95,1.08) translateY(-10px)}}
.lite .sprout{width:30px;height:40px;background:url(assets/img/seta-boletus-ink-mini.webp) 50% 100%/contain no-repeat;filter:drop-shadow(0 2px 3px #000c) drop-shadow(0 0 8px #f4d77a88)}
#shorts .lite .sprout{background-image:url(assets/img/seta-trompeta-ink-mini.webp)}
@media (max-width:420px){.gm b{font-size:.72rem;padding:.2em .5em}}
/* v21 fondos IA + luciérnagas errantes */
.hero-bg .bg-photo{background-image:url(assets/img/fondo-hero-ia-800.webp);opacity:.9}
@media (min-width:700px){.hero-bg .bg-photo{background-image:url(assets/img/fondo-hero-ia.webp)}}
.hero-bg .bg-photo::after{background:linear-gradient(#0f1a1288,#0f1a1240 30%,#0f1a12b3 75%,#0f1a12),radial-gradient(70% 50% at 50% 35%,transparent,#0f1a1299)}
.sbg{position:relative;isolation:isolate;max-width:none;padding-left:max(16px,calc((100% - 1148px)/2));padding-right:max(16px,calc((100% - 1148px)/2))}
.sbg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#0f1a12,#0f1a12cc 14%,#0f1a12b8 50%,#0f1a12cc 86%,#0f1a12),var(--bgi) 50% 50%/cover no-repeat;background-attachment:scroll}
@media (min-width:900px) and (hover:hover){.sbg::before{background-attachment:scroll,fixed}}
#videos.sbg{--bgi:url(assets/img/fondo-videos-ia-800.webp)}#shorts.sbg{--bgi:url(assets/img/fondo-videos-ia-800.webp)}#especies.sbg{--bgi:url(assets/img/fondo-especies-ia-800.webp)}
@media (min-width:700px){#videos.sbg{--bgi:url(assets/img/fondo-videos-ia.webp)}#especies.sbg{--bgi:url(assets/img/fondo-especies-ia.webp)}}
#shorts.sbg::before{background-position:50% 100%;transform:scaleY(-1)}
.sbg .vcap{text-shadow:0 1px 6px #000}
.sbg.lazy::before{background:#0f1a12}
.fern-edge{position:relative;z-index:1;margin-top:-23px;margin-bottom:-23px}
.ffl{position:fixed;inset:0;z-index:30;pointer-events:none}
.rf{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.rf i{position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle,#fffde0 0 3px,#e9ff3acc 4px,#c8f40033 9px,transparent 10px);box-shadow:0 0 14px 4px #e9ff3a55}
.rf:hover i,.rf:focus-visible i{inset:10px;box-shadow:0 0 22px 8px #e9ff3a88}
.rf.flash i{animation:rff .7s ease-out}@keyframes rff{30%{transform:scale(2.6) rotate(180deg);box-shadow:0 0 40px 16px #fffbd0}100%{transform:rotate(360deg)}}
.claro{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:#050a07b3;backdrop-filter:blur(6px)}
.claro[hidden]{display:none}
.claro-card{position:relative;max-width:440px;width:100%;padding:26px 22px 20px;border-radius:22px;text-align:center;color:#f4ffd8;background:radial-gradient(120% 80% at 50% 0%,#2a4423,#0f1a12 70%);border:1px solid #e9ff3a55;box-shadow:0 0 60px #c8f40033,0 30px 80px #000c;animation:clin .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes clin{from{opacity:0;transform:scale(.85) translateY(20px)}}
.claro-k{margin:0;color:#e9ff3a;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:800}
.claro-ic{font-size:2.4rem;margin:6px 0;color:#e9ff3a;line-height:1}.claro-ic .ic{width:1.3em;height:1.3em;filter:drop-shadow(0 0 10px #e9ff3a99)}
.claro h3{font:800 1.45rem/1.15 "Bricolage Grotesque",system-ui,sans-serif;margin:0 0 .5em;text-wrap:balance}
.claro-x{margin:0 0 .7em;line-height:1.55}.claro-s{font-size:.9rem;color:#ffd2b8;margin:0 0 .7em}.claro-c{font-size:.8rem;color:var(--muted);margin:0 0 12px}
.claro-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.claro-close{padding:.7em 1.3em;border-radius:999px;border:1px solid #e9ff3a66;background:#e9ff3a14;color:#f4ffc8;font:700 .95rem "Bricolage Grotesque",system-ui,sans-serif;cursor:pointer}
.claro .btn{padding:.7em 1.3em;font-size:.95rem}
@media (prefers-reduced-motion:reduce){.rf i{box-shadow:0 0 10px 3px #e9ff3a55}}
.claro .btn[hidden]{display:none}
/* === v22 menú «Explora el bosque» + salas del bosque === */
.menu-btn{display:inline-flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:999px;border:1px solid #e9ff3a66;background:#e9ff3a12;color:#f4ffc8;font:700 .92rem "Bricolage Grotesque",system-ui,sans-serif;cursor:pointer;box-shadow:0 0 16px #c8f40022;transition:box-shadow .3s,background .3s;-webkit-tap-highlight-color:transparent}
.menu-btn:hover,.menu-btn[aria-expanded=true]{background:#e9ff3a22;box-shadow:0 0 22px #c8f40055}
.menu-btn .bars{position:relative;width:16px;height:12px}.menu-btn .bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .3s}
.menu-btn .bars i:nth-child(1){top:0}.menu-btn .bars i:nth-child(2){top:5px}.menu-btn .bars i:nth-child(3){top:10px}
.menu-btn[aria-expanded=true] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}.menu-btn[aria-expanded=true] .bars i:nth-child(2){opacity:0}.menu-btn[aria-expanded=true] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.topbar{flex-wrap:nowrap}.topbar .brand{flex:0 0 auto}
@media (max-width:699px){.topbar nav a:not(.pill){display:none}.topbar .brand{font-size:1.15rem}.menu-btn .lbl{display:none}.menu-btn{padding:.55em .7em}}
.menu-panel{position:absolute;left:0;right:0;top:100%;z-index:40;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow:auto;padding:14px 14px 16px;background:radial-gradient(120% 90% at 50% 0%,#1d321d,#0b140ef5 70%);border-bottom:1px solid #e9ff3a33;box-shadow:0 30px 60px #000c;backdrop-filter:blur(10px);animation:mpin .35s cubic-bezier(.2,1.2,.4,1)}
.menu-panel[hidden]{display:none}@keyframes mpin{from{opacity:0;transform:translateY(-8px)}}
@media (min-width:700px){.menu-panel{left:auto;right:16px;top:calc(100% + 8px);width:min(720px,calc(100vw - 32px));border:1px solid #e9ff3a33;border-radius:20px}}
.menu-k{margin:0 2px 10px;color:#e9ff3a;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:800}
.menu-more{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 2px 0;padding-top:12px;border-top:1px solid #ffffff14;font-size:.9rem}.menu-more a{color:#e0e8cf;text-decoration:none}.menu-more a:hover{color:#e9ff3a}
/* losetas ilustradas */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;height:100%;padding:12px;border-radius:16px;overflow:hidden;isolation:isolate;text-decoration:none;color:#f4ffd8;background:#0f1a12;border:1px solid #ffffff1a;box-shadow:0 10px 24px #0008;transition:transform .3s,border-color .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.tile::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(#0f1a1222,#0f1a12e6 78%),var(--bg) 50% 40%/cover;transition:transform .6s}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(140px circle at var(--mx,50%) var(--my,30%),#e9ff3a2e,transparent 70%);opacity:0;transition:opacity .3s}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:#e9ff3a88;box-shadow:0 14px 30px #000a,0 0 26px #c8f40033}.tile:hover::after,.tile:focus-visible::after,.tile:active::after{opacity:1}.tile:hover::before{transform:scale(1.06)}
.tile .ink{position:absolute;right:6px;top:6px;width:auto;height:62%;max-height:96px;opacity:.92;filter:drop-shadow(0 0 10px #e9ff3a44);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.tile:hover .ink,.tile:focus-visible .ink{transform:rotate(-6deg) scale(1.08)}
.tile b{position:relative;font:800 1.02rem/1.15 "Bricolage Grotesque",system-ui,sans-serif;text-shadow:0 2px 10px #000;max-width:80%}
.tile span.t{position:relative;margin-top:3px;font-size:.8rem;line-height:1.3;color:#d9e3c4;text-shadow:0 1px 6px #000}
.tile .tag{position:absolute;left:10px;top:10px;padding:.15em .6em;border-radius:99px;font:800 .64rem/1.6 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:#0f1a12cc;border:1px solid #e9ff3a77;color:#e9ff3a;box-shadow:0 0 12px #c8f40033}
.tile .tag.live{border-color:#7fb03f;color:#c9f08f}
.tile .spk{position:absolute;width:4px;height:4px;border-radius:50%;background:#f3ffb0;box-shadow:0 0 8px #e9ff3a;opacity:0;pointer-events:none}
.tile:hover .spk,.tile:focus-visible .spk{animation:spk 1.6s ease-in-out infinite}.tile .s1{left:20%;bottom:30%}.tile .s2{left:60%;bottom:50%;animation-delay:-.5s!important}.tile .s3{left:78%;bottom:22%;animation-delay:-1s!important}
@keyframes spk{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
.tile[aria-current=page]{border-color:#e9ff3a;box-shadow:0 0 0 1px #e9ff3a inset}
@media (prefers-reduced-motion:reduce){.tile,.tile::before,.tile .ink{transition:none}.tile:hover .spk{animation:none}.menu-panel,.door,.door::after,.pdot{animation:none!important}}
/* bloque de la portada */
.explora{position:relative;isolation:isolate}.explora .lead{max-width:640px;color:#e0e8cf;margin:-6px 0 20px}
.explora .tiles .tile{min-height:170px;padding:14px}
@media (min-width:700px){.explora .tiles .tile{min-height:210px}.explora .tile b{font-size:1.25rem}.explora .tile span.t{font-size:.9rem}}
#explora.sbg{--bgi:url(assets/img/bosque-noche-800.webp)}@media (min-width:700px){#explora.sbg{--bgi:url(assets/img/bosque-noche-1600.webp)}}
/* salas (páginas de sección) */
.room{position:relative;isolation:isolate;overflow:hidden;padding:56px 16px 40px;text-align:center;min-height:56vh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.room::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(#0f1a1233,#0f1a12aa 60%,#0f1a12),var(--bgi,url(assets/img/fondo-hero-ia-800.webp)) 50% 40%/cover}
@media (min-width:700px){.room::before{background:linear-gradient(#0f1a1233,#0f1a12aa 60%,#0f1a12),var(--bgl,var(--bgi,url(assets/img/fondo-hero-ia.webp))) 50% 40%/cover}}
.room::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 45% at 50% 45%,#e9ff3a14,transparent 70%)}
.room h1{font:800 clamp(2rem,8vw,3.4rem)/1.05 "Bricolage Grotesque",system-ui,sans-serif;margin:.2em 0 .3em;color:#f6ffd8;text-shadow:0 2px 24px #000c;text-wrap:balance}
.room h1 em{font-style:normal;color:#d8ff3a;text-shadow:0 0 22px #c8f40055}
.room .intro-p{max-width:620px;margin:0 auto 1em;color:#e0e8cf;text-shadow:0 1px 8px #000}
.room .ink-hero{height:130px;width:auto;margin:0 auto 6px;filter:drop-shadow(0 0 18px #e9ff3a55)}
.ffhint{display:inline-flex;align-items:center;gap:.5em;margin:6px 0 0;padding:.35em .9em;border-radius:99px;background:#0f1a12b3;border:1px solid #e9ff3a44;font-size:.85rem;color:#f4ffc8}.ffhint i{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fffde0 0 2px,#e9ff3a 3px,transparent 5px);box-shadow:0 0 10px #e9ff3a}
.claro-f{font-size:.72rem;color:#9fa98c;margin:-6px 0 12px;overflow-wrap:anywhere}
/* puerta mágica de «Próximamente» */
.door{position:relative;width:min(240px,62vw);aspect-ratio:3/4;margin:18px auto 14px;border-radius:120px 120px 14px 14px;background:radial-gradient(70% 55% at 50% 40%,#e9ff3a33,transparent 70%),linear-gradient(#24391f,#0f1a12);border:2px solid #e9ff3a99;box-shadow:0 0 30px #c8f40044,inset 0 0 40px #000c;display:grid;place-items:center;overflow:hidden;animation:dglow 3.2s ease-in-out infinite}
.door::before{content:"";position:absolute;inset:10px;border-radius:110px 110px 8px 8px;border:1px dashed #e9ff3a44}
.door::after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,#e9ff3a22,transparent 30%);animation:dspin 9s linear infinite}
.door img{position:relative;z-index:1;width:56%;height:auto;filter:drop-shadow(0 0 16px #e9ff3a77)}
.door .lock{position:absolute;z-index:2;bottom:14%;left:50%;translate:-50% 0;font-size:1.6rem;color:#e9ff3a;filter:drop-shadow(0 0 10px #e9ff3a)}
@keyframes dglow{50%{box-shadow:0 0 50px #c8f40077,inset 0 0 40px #000c}}@keyframes dspin{to{transform:rotate(360deg)}}
.soon{display:inline-block;padding:.25em .9em;border-radius:99px;background:#e9ff3a1a;border:1px solid #e9ff3a88;color:#e9ff3a;font:800 .78rem/1.6 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.steps{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:12px auto 0;padding:0;list-style:none;font-size:.8rem}
.steps li{display:flex;align-items:center;gap:6px;padding:.3em .8em;border-radius:99px;background:#0f1a12b3;border:1px solid #ffffff22;color:#d9e3c4}
.steps .pdot{width:8px;height:8px;border-radius:50%;background:#556b4a}.steps .done .pdot{background:#7fb03f;box-shadow:0 0 8px #7fb03f}.steps .now .pdot{background:#e9ff3a;box-shadow:0 0 10px #e9ff3a;animation:pd 1.4s ease-in-out infinite}.steps .now{border-color:#e9ff3a77;color:#f4ffc8}
@keyframes pd{50%{opacity:.35}}
.promise{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0;padding:0;list-style:none}
.promise li{padding:16px;border-radius:16px;background:#16261acc;border:1px solid #ffffff14}.promise li b{display:block;font:800 1.05rem "Bricolage Grotesque",system-ui,sans-serif;margin:.3em 0 .2em}.promise li span{font-size:.92rem;color:#d1d9be}.promise .em{font-size:1.6rem}
.sigue .sec-title{font-size:clamp(1.4rem,4.5vw,2rem)}
/* curiosidades: tarjetas que se giran */
.flips{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.flip{position:relative;display:block;width:100%;min-height:190px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;perspective:900px;-webkit-tap-highlight-color:transparent;font:inherit}
.flip .in{position:relative;display:grid;min-height:190px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.flip[aria-expanded=true] .in{transform:rotateY(180deg)}
.flip .fr,.flip .bk{grid-area:1/1;padding:18px;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #e9ff3a33;box-shadow:0 10px 26px #0008}
.flip .fr{display:flex;flex-direction:column;justify-content:flex-end;background:radial-gradient(90% 70% at 80% 10%,#e9ff3a22,transparent 60%),linear-gradient(160deg,#24391f,#0f1a12)}
.flip .fr .em{position:absolute;right:16px;top:12px;font-size:2.2rem;filter:drop-shadow(0 0 12px #e9ff3a66)}
.flip .fr b{font:800 1.2rem/1.2 "Bricolage Grotesque",system-ui,sans-serif;color:#f6ffd8}.flip .fr small{margin-top:6px;color:#e9ff3a;font-weight:700;font-size:.78rem;letter-spacing:.04em}
.flip .bk{transform:rotateY(180deg);background:linear-gradient(160deg,#1b2d1c,#0d1610);font-size:.95rem;line-height:1.5;color:#eef3df;overflow:auto}
.flip .bk .s{display:block;margin-top:.6em;color:#ffd2b8;font-size:.88rem}
.flip:hover .fr,.flip:focus-visible .fr{border-color:#e9ff3a99;box-shadow:0 0 24px #c8f40033}
@media (prefers-reduced-motion:reduce){.flip .in{transition:none}}
/* vídeos */
.vgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.sgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.sgrid .lite{aspect-ratio:9/16}
.lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
body.menu-open .ffl{visibility:hidden}
.tile{padding-top:42px}.tile .tag{z-index:1}.tile .ink{top:4px;right:4px;height:54%;max-height:88px;z-index:0}.tile b,.tile span.t{z-index:1}
@media (max-width:699px){.tile .tag{font-size:.58rem;letter-spacing:.05em}.menu-panel .tile{min-height:128px}}
.flip,.flip .in{min-height:150px}
/* === v23 contenido didáctico de las secciones === */
.lead{max-width:760px;margin:0 auto 18px;font-size:1.05rem;line-height:1.6;color:#e6ecd6}
.aprende{padding-top:8px}
.ap-card{max-width:760px;margin:auto;padding:20px 20px 16px;border-radius:20px;background:radial-gradient(80% 60% at 90% 0,#e9ff3a1c,transparent 60%),linear-gradient(160deg,#1d3020,#111d14);border:1px solid #e9ff3a40;box-shadow:0 12px 30px #0008}
.ap-t{font:800 1.3rem/1.2 "Bricolage Grotesque",system-ui,sans-serif;margin:0 0 10px;color:#f6ffd8}
.ap-l{margin:0 0 14px;padding-left:0;list-style:none;line-height:1.6}.ap-l li{position:relative;padding-left:1.7em}.ap-l li::before{content:"";position:absolute;left:0;top:.2em;width:1.2em;height:1.2em;background:url(assets/img/ic/seta-lima.svg) center/contain no-repeat;filter:drop-shadow(0 0 4px #e9ff3a66)}
.ap-tip{margin:12px 0 0;font-size:.9rem;color:var(--muted)}
.prog{display:flex;flex-direction:column;gap:6px;font-size:.9rem}.prog-n{color:#e9ff3a}
.prog-bar{height:10px;border-radius:99px;background:#0b130d;border:1px solid #ffffff1f;overflow:hidden}.prog-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#7fb03f,#e9ff3a);box-shadow:0 0 12px #e9ff3a88;transition:width .6s}
.prog.full .prog-l::after{content:"¡completado!";display:inline-block;margin-left:.35em;padding-left:1.35em;background:url(assets/img/ic/trofeo-lima.svg) left center/1.1em no-repeat}
.pdb{display:inline;padding:0 .1em;margin:0;border:0;background:none;color:#f4ffc8;font:inherit;font-weight:700;text-decoration:underline dotted #e9ff3a;text-underline-offset:3px;text-decoration-thickness:2px;cursor:help;border-radius:4px}.pdb:hover,.pdb[aria-expanded=true]{background:#e9ff3a22}
.pdb-pop{position:absolute;z-index:60;padding:14px 16px;border-radius:16px;background:linear-gradient(160deg,#24391f,#0f1a12);border:1px solid #e9ff3a88;box-shadow:0 14px 40px #000c,0 0 24px #c8f40033;color:var(--ink)}
.pdb-k{margin:0;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#e9ff3a}.pdb-w{margin:.2em 0;font:800 1.15rem "Bricolage Grotesque",system-ui,sans-serif}.pdb-d{margin:0 0 10px;line-height:1.5;font-size:.95rem}
.pdb-x,.qo,.chip{font:700 .92rem system-ui,sans-serif;cursor:pointer}
.pdb-x{padding:.45em 1em;border-radius:99px;border:1px solid #e9ff3a66;background:#e9ff3a1a;color:#f4ffc8}
.navwrap{padding-top:0;padding-bottom:0}
.chapnav{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;max-width:1100px;margin:auto}
.chapnav a{flex:0 0 auto;padding:.5em .9em;border-radius:99px;background:#16261acc;border:1px solid #ffffff22;color:#e7efd6;text-decoration:none;font-weight:700;font-size:.88rem}.chapnav a.seen{border-color:#e9ff3a88;color:#f4ffc8}.chapnav a.seen::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.35em;vertical-align:-.15em;background:url(assets/img/ic/check-lima.svg) center/contain no-repeat}
.chap{scroll-margin-top:70px}.chap-k{margin:0 auto 4px;text-align:center;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#e9ff3a}
.anat{display:grid;gap:16px;max-width:900px;margin:0 auto 20px;align-items:center}
@media (min-width:760px){.anat{grid-template-columns:1fr 1fr}}
.anat-fig{margin:0;text-align:center}.anat-img{position:relative;width:min(240px,64vw);margin:auto;padding-bottom:26px}.anat-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px #e9ff3a33)}
.myc{position:absolute;left:8%;right:8%;bottom:0;height:34px;background:repeating-linear-gradient(100deg,transparent 0 9px,#f3ecd955 9px 10px),repeating-linear-gradient(70deg,transparent 0 13px,#f3ecd944 13px 14px);-webkit-mask:radial-gradient(60% 100% at 50% 0,#000 40%,transparent 75%);mask:radial-gradient(60% 100% at 50% 0,#000 40%,transparent 75%)}
.hs{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;min-width:44px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hs::before{content:"";width:18px;height:18px;border-radius:50%;background:#e9ff3a;box-shadow:0 0 0 4px #e9ff3a44,0 0 18px #e9ff3a;animation:pd 1.6s ease-in-out infinite}
.hs span{position:absolute;top:calc(50% + 10px);white-space:nowrap;font:800 .72rem system-ui,sans-serif;color:#0f1a12;background:#f4ffc8;border-radius:99px;padding:.1em .5em;box-shadow:0 2px 8px #000a}
.hs.seen::before{background:#7fb03f;box-shadow:0 0 0 4px #7fb03f44}.hs[aria-pressed=true]::before{background:#fff;box-shadow:0 0 0 5px #e9ff3a,0 0 24px #e9ff3a}
.anat-fig figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}.anat-n{display:block;color:#e9ff3a;font-weight:700;margin-top:4px}
.anat-info .ai{padding:18px;border-radius:18px;background:#16261a;border:1px solid #e9ff3a44;min-height:140px}.anat-info h3{margin:0 0 6px;font:800 1.25rem "Bricolage Grotesque",system-ui,sans-serif;color:#f6ffd8}.anat-info p{margin:0;line-height:1.6}
.anat-info:has(.ai[data-p]:not([hidden])) .ai0{display:none}
.sabias{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));max-width:1100px;margin:18px auto}
.sab{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:#1a2b1d;border-left:4px solid var(--gold)}.sab .em{font-size:1.6rem}.sab p{margin:0;line-height:1.55}.sab b{color:var(--gold)}
.resumen{max-width:760px;margin:18px auto;padding:16px 18px;border-radius:16px;background:#0f1a12;border:2px dashed #7fb03f88}.resumen h3{margin:0 0 8px;font-size:1.05rem;color:#cfe8a8}.resumen ul{margin:0;padding-left:1.2em;line-height:1.6}
.quiz{max-width:760px;margin:18px auto 6px;padding:18px;border-radius:20px;background:linear-gradient(160deg,#2a2614,#16130b);border:1px solid #f4b63f66}
.quiz-t{margin:0;font:800 1.15rem "Bricolage Grotesque",system-ui,sans-serif;color:#ffe3a3}.quiz-s{margin:4px 0 12px;font-size:.88rem;color:#e8d7a8}
.qq{padding:12px 0;border-top:1px solid #ffffff14}.qp{margin:0 0 10px;line-height:1.5}
.qos{display:flex;flex-wrap:wrap;gap:8px}.qo{min-height:44px;padding:.55em 1em;border-radius:12px;border:1px solid #ffffff33;background:#ffffff0d;color:var(--ink);text-align:left}.qo:hover:not(:disabled){border-color:#f4b63f;background:#f4b63f1f}
.qo:disabled{cursor:default;opacity:.7}.qo.ok{opacity:1;background:#2e5a1c;border-color:#7fb03f}.qo.ko{opacity:1;background:#5a1a10;border-color:var(--acc)}
.qx{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#0f1a12aa;line-height:1.5;font-size:.95rem}
.vs{max-width:900px;margin:0 auto 10px;display:grid;gap:6px;font-size:.9rem}.vs>div{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px}.vs span{padding:8px;border-radius:10px;background:#16261a;line-height:1.35}.vs-h span{background:none;font-weight:800;text-align:center;color:#f6ffd8}.vs [role=rowheader]{background:none;font-weight:700;color:var(--gold)}.vs>div span:nth-child(3){background:#24391f;border:1px solid #e9ff3a44}
@media (max-width:520px){.vs{font-size:.78rem}.vs>div{grid-template-columns:.8fr 1fr 1fr 1fr}.vs span{padding:6px}}
.ciclo{list-style:none;padding:0;margin:0 auto 10px;max-width:1000px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));counter-reset:c}
.ciclo li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px;border-radius:16px;background:#16261a;border:1px solid #ffffff1a}.ciclo li>span{font-size:2rem}.ciclo small{color:var(--muted)}
.trato{display:flex;align-items:center;justify-content:center;gap:10px;max-width:640px;margin:0 auto 10px;text-align:center}.trato>div:not(.flecha){flex:1;padding:14px;border-radius:16px;background:#16261a;display:flex;flex-direction:column;gap:2px}.trato span{font-size:2rem}.trato small{color:var(--muted)}.flecha{font-size:2rem;color:#e9ff3a;text-shadow:0 0 12px #e9ff3a}
.recs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));max-width:1100px;margin:0 auto 10px}
.rec{padding:16px;border-radius:18px;background:radial-gradient(80% 60% at 80% 0,#e9ff3a1a,transparent 60%),#16261a;border:1px solid #e9ff3a33;display:flex;flex-direction:column;gap:4px}.rec .rn{font:800 1.7rem "Bricolage Grotesque",system-ui,sans-serif;color:#e9ff3a}.rec small{color:#d9e3c4;line-height:1.5}
.dos{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));max-width:1000px;margin:0 auto 14px}.dos>div{padding:16px;border-radius:18px}.dos h3{margin:0 0 6px}.dos p{margin:0;line-height:1.55}.bueno{background:#1d3a22;border:1px solid #7fb03f66}.malo{background:#3a1712;border:1px solid #e8572a88}
.mitos{max-width:760px;margin:0 auto 14px}.mitos h3{margin:0 0 8px}.mitos ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}.mitos li{padding:10px 12px;border-radius:12px;background:#16261a}
.sos{max-width:760px;margin:16px auto;padding:16px 18px;border-radius:16px;background:#5a1a10;border:2px solid var(--acc)}.sos p{margin:0;line-height:1.55}.sos .sos-t{font-weight:800;margin-bottom:6px;font-size:1.05rem}.sos a{color:#fff;text-underline-offset:3px}
.reglas{list-style:none;padding:0;margin:0 auto 10px;max-width:900px;display:grid;gap:12px}
.regla{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:16px 16px 16px 18px;border-radius:18px;background:linear-gradient(160deg,#1f3322,#121e15);border:1px solid #e9ff3a33}
.regla .em{grid-row:span 2;font-size:2rem;align-self:center}.regla b{font:800 1.08rem/1.25 "Bricolage Grotesque",system-ui,sans-serif;color:#f6ffd8}.regla>span:last-child{line-height:1.5;color:#dfe7cc}
.regla .rn{position:absolute;top:-8px;left:-6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e9ff3a;color:#0f1a12;font-weight:800;box-shadow:0 0 12px #e9ff3a88}
.reglas.sm .regla{padding:12px 14px}
.ficha{max-width:760px;margin:0 auto;border-radius:20px;overflow:hidden;background:#f3ecd9;color:#1c2418;box-shadow:0 14px 34px #000a}
.ficha-h{display:flex;gap:14px;align-items:center;padding:14px 16px;background:#e5dcc2;border-bottom:2px solid #c9bc97}.ficha-h p{margin:0}.ficha-k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#6a5f43}.ficha-n{font:800 1.4rem "Bricolage Grotesque",system-ui,sans-serif}.ficha-s{font-style:italic}
.badge{display:inline-block;margin-top:4px;padding:.15em .6em;border-radius:99px;font-weight:800;font-size:.8rem}.badge.mortal{background:#8b1a0e;color:#fff}
.ficha-d{margin:0;padding:6px 16px 14px}.fr-row{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #00000014}.fr-row dt{font-weight:800;color:#5b4e2c}.fr-row dd{margin:0}.fr-row small{display:block;color:#5d6450;margin-top:2px;font-size:.85rem}
@media (max-width:420px){.fr-row{grid-template-columns:1fr;gap:2px}}
.nota{max-width:760px;margin:14px auto;color:var(--muted);font-size:.92rem}
.porque{max-width:760px;margin:18px auto}.tl{list-style:none;padding:0 0 0 18px;margin:0;border-left:3px solid #e8572a}.tl li{position:relative;padding:8px 0 8px 12px}.tl li::before{content:"";position:absolute;left:-26px;top:14px;width:13px;height:13px;border-radius:50%;background:#e8572a;box-shadow:0 0 10px #e8572a}.tl b{display:block;color:#ffb38f}
.ests{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));max-width:1100px;margin:auto}
.est{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:18px;text-align:left;font:inherit;color:inherit;cursor:pointer;background:linear-gradient(160deg,#24391f,#0f1a12);border:1px solid #e9ff3a33}.est .em{font-size:2rem}.est b{font:800 1.2rem "Bricolage Grotesque",system-ui,sans-serif}.est small{color:#e9ff3a;font-weight:700}
.est .est-x{display:none;line-height:1.5;margin-top:6px}.est[aria-expanded=true] .est-x{display:block}.est[aria-expanded=false]::after{content:"Toca para saber más";padding-right:1.3em;background:url(assets/img/ic/chispa-lima.svg) right center/1em no-repeat;font-size:.78rem;color:var(--muted)}.est[aria-expanded=true]{border-color:#e9ff3a99}
.habs{list-style:none;padding:0;margin:0 auto;max-width:1100px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}.hab{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:#16261a;border:1px solid #ffffff1a}.hab .em{font-size:2rem}.hab b{font:800 1.1rem "Bricolage Grotesque",system-ui,sans-serif}.hab>span:last-child{line-height:1.5;color:#dfe7cc}.hab:last-child{background:#3a1712;border-color:#e8572a66}
.ruta{list-style:none;padding:0;margin:0 auto;max-width:760px;display:grid;gap:8px;counter-reset:r}
.ruta a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:12px 14px;border-radius:16px;background:#16261a;border:1px solid #e9ff3a33;color:inherit;text-decoration:none}.ruta a:hover{border-color:#e9ff3a99}.ruta .rn{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e9ff3a;color:#0f1a12;font-weight:800}.ruta small{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}.chip{min-height:40px;padding:.4em 1em;border-radius:99px;border:1px solid #ffffff33;background:#16261a;color:var(--ink)}.chip[aria-pressed=true]{background:#e9ff3a;color:#0f1a12;border-color:#e9ff3a}
.vcount{font-size:.85rem;color:var(--muted);margin:0 0 10px}
.vthumb{position:relative}.vdur{position:absolute;right:8px;bottom:8px;padding:.15em .5em;border-radius:6px;background:#000c;color:#fff;font-size:.78rem;font-weight:700;pointer-events:none}
.vcard{background:#16261a;border-radius:18px;padding:10px 10px 12px;border:1px solid #ffffff14;scroll-margin-top:80px}.vcard h3.vcap{font-size:1rem;margin:10px 2px 4px}
.vtags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 2px 6px}.vtag{font:700 .74rem system-ui,sans-serif;padding:.3em .75em;min-height:28px;border-radius:99px;background:#e9ff3a1f;color:#f4ffc8;border:1px solid #e9ff3a33;cursor:pointer}.vtag:hover,.vtag:focus-visible{background:#e9ff3a33;border-color:#e9ff3a99}
.vlearn summary{cursor:pointer;font-weight:800;color:#e9ff3a;padding:4px 2px}.vlearn ul{margin:4px 0 0;padding-left:1.2em;line-height:1.5;font-size:.92rem}
.vcard.hl{animation:hl 1.6s ease-out}@keyframes hl{0%{box-shadow:0 0 0 3px #e9ff3a,0 0 30px #e9ff3a}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.hs::before,.vcard.hl{animation:none}.prog-bar i{transition:none}}

/* ---- iconos SVG propios (assets/img/iconos.svg) ---- */
.ic{display:inline-block;width:1.29em;height:1.29em;vertical-align:-.24em;flex:none;overflow:visible;color:#e9ff3a;filter:drop-shadow(0 0 3px #e9ff3a59)}
.em .ic,.sab .em .ic,.flip .em .ic,.est .em .ic,.hab .em .ic,.regla .em .ic,.promise .em .ic{width:1.1em;height:1.1em;vertical-align:middle;filter:drop-shadow(0 0 7px #e9ff3a80)}
.btn .ic,.chip[aria-pressed=true] .ic,.warn .ic,.sos-t .ic{color:currentColor;filter:none}
.warn .ic{color:var(--gold)}.sos .ic{color:#ffb38f}
.chip .ic{width:1.34em;height:1.34em;vertical-align:-.28em;margin-right:.15em}
.chip[aria-pressed=true] .ic{color:#0f1a12}
.vdur{display:inline-flex;align-items:center;gap:.3em}.vdur .ic{width:1.12em;height:1.12em;color:#e9ff3a;filter:none;vertical-align:0}
.sec-title .ic,.ap-t .ic,.quiz-t .ic,.resumen h3 .ic{width:1.18em;height:1.18em;vertical-align:-.2em}
.chapnav a .ic{width:1.23em;height:1.23em;vertical-align:-.27em}
.vlearn summary .ic{width:1.29em;height:1.29em}
.mute .ic{width:22px;height:22px;vertical-align:middle;color:#fff;filter:drop-shadow(0 0 4px #e9ff3a88)}
.intro-sound .ic{color:#faffc2}
.claro-s .ic,.ssafe .ic{color:#ffb38f;filter:none}
.menu-more .ic{width:1.18em;height:1.18em}
@media (forced-colors:active){.ic{filter:none;color:CanvasText}}
/* ---- brote: la seta sale de la tierra como en un timelapse (sin rebotes) ---- */
.room .ink-hero,.room .door img{transform-origin:50% 100%;animation:brote 3.3s cubic-bezier(.42,0,.32,1) .2s both}
@keyframes brote{
0%{transform:translateY(62%) perspective(600px) rotateX(22deg) scale(.74,.62);clip-path:inset(-50% -50% 100% -50%)}
18%{transform:translateY(47.5%) perspective(600px) rotateX(20deg) scale(.74,.66);clip-path:inset(-50% -50% 72% -50%)}
40%{transform:translateY(22%) perspective(600px) rotateX(16deg) scale(.75,.8);clip-path:inset(-50% -50% 27% -50%)}
62%{transform:translateY(0) perspective(600px) rotateX(12deg) scale(.77,1);clip-path:inset(-50% -50% -20% -50%)}
100%{transform:translateY(0) perspective(600px) rotateX(0) scale(1,1);clip-path:inset(-50% -50% -20% -50%)}}
.brote{position:relative;display:inline-block;line-height:0}
.door .brote{z-index:1;width:56%}.door .brote img{width:100%}
.brote-t{position:absolute;left:50%;bottom:5%;width:0;height:0;pointer-events:none}
.brote-m{position:absolute;left:50%;bottom:3%;width:62%;height:14%;translate:-50% 0;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,#4a3320 0%,#3b2a19cc 55%,#3b2a1900 100%);transform-origin:50% 100%;animation:monte 3.3s cubic-bezier(.42,0,.32,1) .2s both}
@keyframes monte{0%{transform:scale(.5,.15);opacity:0}20%{transform:scale(.9,1);opacity:1}55%{transform:scale(1.05,.55);opacity:.85}100%{transform:scale(1,.35);opacity:0}}
.brote-t i{position:absolute;left:0;top:0;width:var(--s,5px);height:var(--s,5px);border-radius:50% 40% 55% 45%;background:var(--c,#6b4a2b);opacity:0;animation:migaja 1.9s cubic-bezier(.3,0,.3,1) var(--d,.6s) both}
@keyframes migaja{0%{opacity:0;transform:translate(0,0)}20%{opacity:.95}75%{opacity:.85}100%{opacity:0;transform:translate(var(--x),var(--y))}}
.brote-t i.chs{border-radius:50%;background:#e9ff3a;box-shadow:0 0 6px #e9ff3a;animation:espora 2.6s ease-in-out var(--d,3.5s) both}
@keyframes espora{0%{opacity:0;transform:translate(var(--sx),var(--sy))}35%{opacity:.7}100%{opacity:0;transform:translate(var(--x),var(--y))}}
@media (prefers-reduced-motion:reduce){.room .ink-hero,.room .door img{animation:none}.brote-t,.brote-m{display:none}}
/* ---- Noticias ---- */
.ngrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));margin-top:8px}
.ncard{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#16261a;border:1px solid #e9ff3a26;box-shadow:0 10px 30px #0006}
.ncard[hidden]{display:none}
.nimg{position:relative;display:block;aspect-ratio:4/3;background:#0f1a12}.nimg img{width:100%;height:100%;object-fit:cover;display:block}
.nph{display:grid;place-items:center;height:100%;color:#e9ff3a}.nph .ic{width:64px;height:64px}
.nia{position:absolute;left:10px;top:10px;font:800 .7rem system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:.3em .7em;border-radius:99px;background:#0f1a12d9;color:#f4ffc8;border:1px solid #e9ff3a55}
.nbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:.82rem;color:var(--muted)}
.nmeta time,.nmeta span{display:inline-flex;align-items:center;gap:.35em}.nmeta .ic{width:1.1em;height:1.1em;vertical-align:0}
.ntag{font:700 .76rem system-ui,sans-serif;padding:.3em .8em;border-radius:99px;background:#e9ff3a1f;color:#f4ffc8;border:1px solid #e9ff3a44;text-decoration:none}
.ntag:hover,.ntag:focus-visible{background:#e9ff3a33;border-color:#e9ff3a99}
.ntit{font:800 1.2rem/1.25 "Bricolage Grotesque",system-ui,sans-serif;margin:2px 0}.ntit a{color:#f6ffd8;text-decoration:none}.ntit a:hover{color:#e9ff3a}
.nent{margin:0;color:#d1d9be;line-height:1.5;font-size:.95rem}
.nmas{margin-top:auto;padding-top:6px;color:#e9ff3a;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.35em}
.nrss{text-align:center;margin-top:18px}.nrss a{color:#e9ff3a;font-weight:700}
.nvacio{color:var(--muted);text-align:center}
.nart{max-width:760px;margin:0 auto;padding-top:28px}
.nmiga a{color:#e9ff3a;text-decoration:none;font-weight:700;font-size:.9rem}
.nh1{font:800 clamp(1.7rem,6.4vw,2.6rem)/1.12 "Bricolage Grotesque",system-ui,sans-serif;color:#f6ffd8;margin:.35em 0 .4em;text-wrap:balance}
.nlead{font-size:1.12rem;line-height:1.55;color:#e7efd6;margin:.8em 0 1.1em}
.nfig{position:relative;margin:0 0 1.4em}.nfig img{width:100%;height:auto;border-radius:18px;display:block;border:1px solid #e9ff3a26}
.nfig figcaption{font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.45}.nfig figcaption a{color:#d1d9be}
.ncuerpo{line-height:1.7;font-size:1.02rem}.ncuerpo h2{font:800 1.35rem "Bricolage Grotesque",system-ui,sans-serif;color:#f6ffd8;margin:1.4em 0 .4em}
.ncuerpo ul{padding-left:1.2em}.ncuerpo li{margin:.35em 0}.ncuerpo li::marker{color:#e9ff3a}
.ncuerpo blockquote{margin:1.2em 0;padding:14px 18px;border-left:4px solid #e9ff3a;background:#16261a;border-radius:0 14px 14px 0}.ncuerpo blockquote p{margin:0;font-style:italic;font-size:1.08rem}.ncuerpo blockquote footer{margin-top:6px;font-size:.85rem;color:var(--muted)}
.npq,.nfuente{margin:1.6em 0;padding:16px 18px;border-radius:18px;background:linear-gradient(160deg,#24391f,#14221a);border:1px solid #e9ff3a44}
.npq h2,.nfuente h2{font:800 1.15rem "Bricolage Grotesque",system-ui,sans-serif;margin:0 0 .4em;color:#e9ff3a}
.npq p{margin:0;line-height:1.6}
.nfuente{background:#16261a;border-style:dashed}.nfuente ul{list-style:none;padding:0;margin:0}.nfuente li{display:flex;flex-direction:column;gap:3px}
.nfuente li a{color:#f6ffd8;font-weight:700;overflow-wrap:anywhere}.nfuente li span{font-size:.85rem;color:var(--muted)}.nnota{font-size:.8rem;color:var(--muted);margin:.8em 0 0}
.nvolver{text-align:center;margin:1.6em 0 0}
/* reorganización: secretos en las fichas de la Guía y aviso SOS de una línea */
.secreto{margin-top:12px;border-top:1px dashed rgba(210,230,120,.35);padding-top:10px}
.secreto summary{cursor:pointer;font-weight:700;color:#d8ef7a;list-style:none;display:flex;gap:6px;align-items:center}
.secreto summary::-webkit-details-marker{display:none}
.secreto summary:focus-visible{outline:2px solid #d8ef7a;outline-offset:3px;border-radius:6px}
.secreto .sfact{margin:.5em 0 .3em}.secreto .ssafe{font-size:.92em;opacity:.9;margin:0}
.sos-l,.pm-segl{margin:14px 0 0;padding:10px 14px;border-left:4px solid #e0533d;background:rgba(224,83,61,.12);border-radius:8px;line-height:1.5}
.sos-l a,.pm-segl a{color:#ffd9cf}
.vermas{text-align:center;margin:18px 0 0}
/* toca y aprende: setas que se mecen y burbujas con un dato verificado */
@keyframes mecer{0%,100%{rotate:-2.2deg}50%{rotate:2.4deg}}
.saber-li{position:relative}
.saber-li .ink{animation:mecer var(--sw-d,6s) ease-in-out var(--sw-del,0s) infinite;transform-origin:50% 100%}
.saber-b{appearance:none;background:none;border:0;padding:0;margin:0;cursor:help;color:inherit}
.saber-t{position:absolute;z-index:3;border-radius:40% 40% 20% 20%}
.saber-b:focus-visible{outline:2px solid #d8ef7a;outline-offset:3px;border-radius:12px}
.saber-w{position:relative;display:inline-block}
.saber-h{display:block}
.saber-p{position:absolute;z-index:20;top:8px;right:8px;left:8px;background:rgba(14,22,12,.96);border:1px solid rgba(216,239,122,.45);border-radius:14px;padding:10px 12px;box-shadow:0 10px 28px rgba(0,0,0,.5);font-size:.86rem;line-height:1.4;text-align:left;animation:saberIn .28s ease-out both;transform-origin:85% 0}
.saber-w .saber-p{top:100%;left:50%;right:auto;width:min(300px,86vw);translate:-50% 4px}
@keyframes saberIn{from{opacity:0;transform:rotateY(70deg) scale(.9)}to{opacity:1;transform:none}}
.saber-p p{margin:0 0 5px}.saber-n b{color:#f2f7d9}.saber-n i{opacity:.8}
.saber-e{display:inline-block;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:99px;margin-bottom:6px}
.e-ok{background:#2f5d22;color:#dff5c9}.e-cau{background:#6a4d12;color:#ffe9b5}.e-tox{background:#7a2318;color:#ffd9cf}.e-mor{background:#4a0e0e;color:#ffc9c9}.e-no{background:#3b3f46;color:#e4e7ec}
.saber-x{font-size:.76rem;opacity:.8}
.saber-s{font-size:.74rem;color:#d8ef7a}
@media (prefers-reduced-motion:reduce){.saber-li .ink{animation:none}.saber-p{animation:none}}
/* Fuentes oficiales de la página: una sola caja plegada al pie (no en cada tarjeta) */
.fuentes-sec{max-width:820px;margin:8px auto 0;padding:0 16px;color:var(--muted);font-size:.8rem}
.fuentes-sec summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px dashed rgba(255,255,255,.18);border-radius:999px;list-style:none;opacity:.85}
.fuentes-sec summary::-webkit-details-marker{display:none}.fuentes-sec summary:hover,.fuentes-sec[open] summary{opacity:1;color:var(--ink)}
.fuentes-sec summary .ic{width:1em;height:1em}
.fuentes-sec ul{margin:10px 0 4px;padding-left:1.2em;line-height:1.5}.fuentes-sec li{margin:2px 0;overflow-wrap:anywhere}
.fuentes-sec a{color:var(--muted)}.fuentes-sec a:hover{color:var(--ink)}.fs-fecha{margin:4px 0 0;font-size:.76rem;opacity:.85}
.nfuente{font-size:.85rem;color:var(--muted)}.nfuente p{margin:0}.nfuente a{color:#f6ffd8;overflow-wrap:anywhere}