@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)}
.tag{font-size:1.15rem;margin:.6em 0 1.4em}
.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}}