body.entrada{background:#000}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;image-rendering:auto}
.hero{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 1rem 3rem;max-width:52rem;margin:0 auto}
.hero h1{text-shadow:0 2px 12px #000}
.hero>.sub{text-shadow:0 1px 8px #000;max-width:38rem;margin-bottom:1.6rem}
.hero>.subtexto{text-shadow:0 1px 8px #000;font-size:.85rem;max-width:34rem;margin-bottom:1.6rem;font-style:italic}
.explorar{margin:0 0 2rem;background:rgba(0,0,0,.55);box-shadow:0 0 24px #7cf5e633}
.explorar:hover{box-shadow:0 0 36px #7cf5e688}
.hero .boxes{width:100%;margin-top:0;text-align:left}
.hero .box{background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.hero footer{margin-top:3rem;text-shadow:0 1px 6px #000;font-style:italic;color:var(--muted);max-width:34rem}
.menu-btn{position:fixed;top:.8rem;right:.8rem;z-index:2;background:rgba(0,0,0,.6);font-size:1.1rem;line-height:1;padding:.5rem .7rem}
dialog#menu{background:#0b0a10;color:var(--fg);border:1px solid var(--line);border-radius:.6rem;padding:1.2rem 1.4rem;min-width:min(22rem,90vw)}
dialog#menu::backdrop{background:rgba(0,0,0,.6)}
dialog#menu h3{color:var(--c);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
dialog#menu ul{margin:0 0 .4rem}
.fx-btn{position:fixed;bottom:.8rem;left:.8rem;z-index:2;background:rgba(0,0,0,.6);font-size:1.1rem;line-height:1;padding:.5rem .7rem}
#fx{position:fixed;bottom:3.6rem;left:.8rem;z-index:3;background:rgba(0,0,0,.85);border:1px solid var(--line);border-radius:.6rem;padding:1rem;width:min(18rem,calc(100vw - 1.6rem))}
#fx h3{color:var(--c);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem}
#fx label{display:grid;grid-template-columns:6rem 1fr;align-items:center;gap:.5rem;margin:.3rem 0;font-size:.85rem}
#fx input{width:100%}
[hidden]{display:none!important}