:root{--bg:#0b0b0b;--fg:#f1f1f1;--muted:#b7b7b7;--brand:#20e3b2;--card:#111;--max:1100px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none} a:hover{opacity:.9}
.container{width:min(var(--max),92%);margin-inline:auto}
header{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.75);backdrop-filter:saturate(120%) blur(8px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav .brand{font-weight:800;letter-spacing:.4px}
.menu{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:.8em 1.1em;border:1px solid #2a2a2a;border-radius:12px;background:#121212}
.btn.primary{background:var(--brand);color:#002018;border-color:transparent}
.section{padding:44px 0}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid.cols-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid #1c1c1c;border-radius:16px;padding:18px}
.small{font-size:14px;color:var(--muted)}
footer{border-top:1px solid #151515;background:#090909;margin-top:56px}
footer .row{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;padding:18px 0}

/* Hero base (fallback imagen) */
.hero{position:relative;min-height:70vh;display:grid;place-items:center;text-align:center;background:url('/media/cover.jpg') center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.78));pointer-events:none}
.hero .inner{position:relative;z-index:2;padding:2rem}
h1{font-size:clamp(36px,6vw,60px);margin:.2em 0 .3em;font-weight:900}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:60ch;margin:0 auto 1rem}

/* YouTube background */
.hero-youtube{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-youtube iframe{
  position:absolute;top:50%;left:50%;
  width:120vw;height:67.5vw; /* 16:9 overfill para cubrir */
  transform:translate(-50%,-50%);
  pointer-events:none;
}
@media (max-width: 480px), (prefers-reduced-motion: reduce){
  .hero-youtube{display:none;} /* fallback a cover.jpg */
}

/* Carousel */
.carousel{position:relative;overflow:hidden;border:1px solid #1b1b1b;border-radius:16px}
.carousel-track{display:flex;transition:transform .45s ease}
.carousel figure{min-width:100%;margin:0}
.carousel img{width:100%;height:520px;object-fit:cover;display:block;background:#000}
.carousel .ctrl{position:absolute;inset:auto 12px 12px auto;display:flex;gap:8px;z-index:2}
.carousel button{background:rgba(0,0,0,.55);border:1px solid #2a2a2a;color:#fff;border-radius:10px;padding:.5rem .7rem;cursor:pointer}