:root{
  --p:#b600ff; --pg:#cc44ff; --pd:#7a00b0;
  --p10:rgba(182,0,255,.10); --p20:rgba(182,0,255,.20); --p40:rgba(182,0,255,.40);
  --dark:#07000f; --d1:#0e0020; --d2:#160030; --d3:#1c003a;
  --txt:#e4ccff; --dim:#8060a0;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--txt);font-family:'Exo 2',sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--pd);border-radius:10px}

/* ── NAV ── */
nav{
  position:fixed;top:0;width:100%;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;height:68px;
  background:linear-gradient(180deg,rgba(7,0,15,.97),rgba(7,0,15,.80));
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--p20);
}
nav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--p),transparent);opacity:.5;
}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo svg{width:38px;height:38px;flex-shrink:0}
.nav-brand{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:900;letter-spacing:4px;color:#fff;line-height:1}
.nav-brand small{display:block;font-size:.5rem;letter-spacing:6px;color:var(--pg);font-weight:600;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:8px;list-style:none}
.nav-links li a{
  display:block;padding:6px 16px;
  font-family:'Rajdhani',sans-serif;font-size:.85rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--dim);
  border-radius:3px;transition:all .2s;position:relative;
}
.nav-links li a::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:1px;background:var(--p);transition:all .25s}
.nav-links li a:hover{color:#fff}
.nav-links li a:hover::after{left:16px;right:16px}
.nav-cta{
  background:var(--p);color:#fff;padding:8px 22px;border-radius:4px;
  font-family:'Rajdhani',sans-serif;font-size:.85rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  box-shadow:0 0 20px var(--p40);transition:all .25s;border:none;cursor:pointer;
}
.nav-cta:hover{background:var(--pg);box-shadow:0 0 36px rgba(204,68,255,.7);transform:translateY(-1px)}

/* ── HERO ── */
.hero{
  position:relative;min-height:100vh;display:flex;
  align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding-top:68px;
}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-bg-img{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(7,0,15,.55) 0%,rgba(7,0,15,.75) 70%,rgba(7,0,15,.95) 100%),
    url('assets/img/hero-bg.png') center/cover no-repeat;
}
.hero-grid{position:absolute;bottom:0;left:0;right:0;height:45%;overflow:hidden;opacity:.25}
.hero-grid svg{width:100%;height:100%}
.beam{position:absolute;top:-10%;width:2px;height:120%;background:linear-gradient(180deg,transparent,rgba(182,0,255,.15),transparent);transform-origin:top center}
.beam-1{left:20%;transform:rotate(-15deg)}
.beam-2{left:40%;transform:rotate(-5deg)}
.beam-3{left:60%;transform:rotate(5deg)}
.beam-4{left:80%;transform:rotate(15deg)}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px)}
.hero-content{position:relative;z-index:5;padding:0 20px}
.hero-eyebrow{font-family:'Rajdhani',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:8px;text-transform:uppercase;color:var(--p);margin-bottom:16px}
.hero-title{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(2.8rem,9vw,7rem);font-weight:900;letter-spacing:10px;color:#fff;line-height:.95;
  animation:heroIn .8s cubic-bezier(.16,1,.3,1) both;
}
.hero-title .media-word{
  display:block;
  background:linear-gradient(135deg,#fff 30%,var(--pg) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 40px rgba(182,0,255,.5));
}
.hero-sub{margin-top:20px;font-family:'Exo 2',sans-serif;font-style:italic;font-size:1.05rem;color:var(--dim);letter-spacing:3px;animation:heroIn .8s .15s cubic-bezier(.16,1,.3,1) both}
.hero-btns{display:flex;gap:14px;justify-content:center;margin-top:40px;animation:heroIn .8s .3s cubic-bezier(.16,1,.3,1) both}
.btn-p{
  background:var(--p);color:#fff;border:none;padding:13px 36px;border-radius:4px;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  box-shadow:0 0 30px var(--p40);transition:all .25s;
}
.btn-p:hover{background:var(--pg);box-shadow:0 0 50px rgba(204,68,255,.8);transform:translateY(-3px)}
.btn-o{
  background:transparent;color:#fff;border:1px solid var(--p40);padding:13px 36px;border-radius:4px;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:all .25s;
}
.btn-o:hover{border-color:var(--pg);background:rgba(182,0,255,.1);transform:translateY(-3px)}
.scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--dim);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;
  font-family:'Rajdhani',sans-serif;animation:bounce 2s infinite;
}
.scroll-hint span{width:1px;height:36px;background:linear-gradient(180deg,var(--p),transparent)}

/* ── SECTION COMMON ── */
.sec{padding:80px 56px}
.sec-title{
  text-align:center;margin-bottom:48px;
  font-family:'Rajdhani',sans-serif;font-size:1.4rem;font-weight:700;
  letter-spacing:5px;text-transform:uppercase;
}
.sec-title .hl{color:var(--p)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.vis{opacity:1;transform:translateY(0)}

/* ── CATEGORÍAS ── */
/* ── DIVIDERS ── */
.sec-divider{
  position:relative;height:60px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sec-divider::before{
  content:'';position:absolute;left:0;right:0;top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(182,0,255,.5) 30%,rgba(182,0,255,.8) 50%,rgba(182,0,255,.5) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(182,0,255,.4),0 0 30px rgba(182,0,255,.15);
}
.sec-divider::after{
  content:'';position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;
  background:var(--p);
  box-shadow:0 0 12px var(--p),0 0 24px var(--p40);
}
.div-dark-top{background:linear-gradient(180deg,var(--dark) 0%,var(--d1) 100%)}
.div-dark-mid{background:linear-gradient(180deg,var(--d1) 0%,var(--d1) 100%)}

.cats-bg{background:linear-gradient(180deg,var(--dark) 0%,var(--d1) 100%)}
.cats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1100px;margin:0 auto}
.cat-card{
  position:relative;border-radius:10px;overflow:hidden;
  aspect-ratio:1;cursor:pointer;border:1px solid rgba(182,0,255,.18);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.cat-card:hover{border-color:var(--p);transform:translateY(-6px) scale(1.02);box-shadow:0 20px 60px rgba(182,0,255,.35)}
.cat-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .5s;
}
.cat-card:hover .cat-bg{transform:scale(1.08)}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 55%,transparent 100%)}
.cat-label{
  position:absolute;bottom:0;left:0;right:0;padding:14px 8px 12px;
  text-align:center;font-family:'Rajdhani',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:#fff;line-height:1.2;
}

/* ── SERIES ── */
.series-bg{background:var(--d1);position:relative}
.carousel-wrap{position:relative;max-width:1100px;margin:0 auto}
.series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.series-card{
  position:relative;border-radius:10px;overflow:hidden;
  aspect-ratio:4/3;cursor:pointer;border:1px solid rgba(182,0,255,.15);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.series-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--p);box-shadow:0 20px 60px rgba(182,0,255,.4)}
.sc-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .5s;
}
.series-card:hover .sc-bg{transform:scale(1.06)}
/* fallback gradients para series sin imagen aún */
.sc-2{background:radial-gradient(ellipse 100% 100% at 30% 40%,rgba(120,0,200,.4) 0%,rgba(30,0,80,.9) 60%,#09010f 100%)}
.sc-3{background:radial-gradient(ellipse 100% 100% at 70% 40%,rgba(0,200,120,.25) 0%,rgba(0,60,30,.8) 60%,#010f07 100%)}
.sc-4{background:radial-gradient(ellipse 100% 100% at 50% 60%,rgba(220,120,0,.35) 0%,rgba(80,30,0,.8) 55%,#0f0500 100%)}
.sc-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.1) 60%,transparent 100%)}
.sc-info{position:absolute;bottom:0;left:0;right:0;padding:20px 14px 14px}
.sc-name{font-family:'Rajdhani',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:1px;color:#fff}
.sc-name .acc{color:var(--p)}
.sc-ep{font-size:.7rem;color:var(--dim);letter-spacing:1px;margin-top:2px;font-family:'Exo 2',sans-serif}
.c-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(7,0,15,.8);border:1px solid var(--p40);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1rem;cursor:pointer;z-index:5;transition:all .2s;
}
.c-arrow:hover{background:var(--p);border-color:var(--p)}
.c-arrow.l{left:-52px}.c-arrow.r{right:-52px}
.c-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.c-dot{width:6px;height:6px;border-radius:50%;background:rgba(182,0,255,.3);cursor:pointer;transition:all .25s}
.c-dot.on{background:var(--p);width:22px;border-radius:3px}

/* ── VIDEOS ── */
.videos-bg{background:linear-gradient(180deg,var(--d1) 0%,var(--d2) 100%)}
.vids-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px;margin:0 auto}
.v-card{
  position:relative;border-radius:10px;overflow:hidden;
  aspect-ratio:16/9;cursor:pointer;border:1px solid rgba(182,0,255,.15);
  transition:all .3s;
}
.v-card:hover{transform:translateY(-5px);border-color:var(--p40);box-shadow:0 16px 50px rgba(182,0,255,.3)}
.v-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .5s;
}
.v-card:hover .v-bg{transform:scale(1.06)}
/* fallback gradients para videos */
.vf1{background:linear-gradient(135deg,rgba(60,20,100,.8),rgba(140,80,0,.6))}
.vf2{background:linear-gradient(135deg,rgba(80,40,0,.8),rgba(200,120,0,.4))}
.vf3{background:linear-gradient(135deg,rgba(40,0,80,.9),rgba(100,50,150,.5))}
.v-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,transparent 60%)}
.v-dur{
  position:absolute;bottom:9px;right:11px;
  background:rgba(0,0,0,.8);color:#fff;
  font-size:.78rem;font-family:'Rajdhani',sans-serif;font-weight:700;
  padding:2px 8px;border-radius:3px;letter-spacing:1px;
}
.v-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(182,0,255,.85);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;opacity:0;transition:opacity .25s;
  box-shadow:0 0 24px rgba(182,0,255,.6);
}
.v-card:hover .v-play{opacity:1}

/* ── MANIFESTO ── */
.manifesto{position:relative;text-align:center;padding:100px 56px;background:var(--d2);overflow:hidden}
#mani-canvas{position:absolute;inset:0;width:100%;height:100%}
.mani-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(182,0,255,.08) 0%,transparent 70%);pointer-events:none;
}
.mani-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(182,0,255,.06);pointer-events:none}
.mani-ring:nth-child(1){width:300px;height:300px}
.mani-ring:nth-child(2){width:500px;height:500px}
.mani-ring:nth-child(3){width:700px;height:700px;border-color:rgba(182,0,255,.03)}
.mani-text{
  position:relative;z-index:2;
  font-family:'Rajdhani',sans-serif;font-size:clamp(1.1rem,3.5vw,1.9rem);
  line-height:1.8;font-weight:600;letter-spacing:2px;color:#fff;
}
.mani-text .line3{font-size:clamp(1.3rem,4.5vw,2.4rem);font-weight:700;color:var(--p);filter:drop-shadow(0 0 20px var(--p40))}

/* ── CTA ── */
.cta-sec{
  padding:56px;background:linear-gradient(180deg,var(--d2) 0%,var(--dark) 100%);
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
}
.cta-btn{
  display:flex;align-items:center;gap:12px;padding:15px 30px;border-radius:6px;
  font-family:'Rajdhani',sans-serif;font-size:.95rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;border:none;color:#fff;transition:all .25s;
}
.cta-yt{background:linear-gradient(135deg,#b50000,#e60000);box-shadow:0 6px 24px rgba(200,0,0,.4)}
.cta-yt:hover{box-shadow:0 8px 36px rgba(255,0,0,.6);transform:translateY(-3px)}
.cta-fb{background:linear-gradient(135deg,#16307a,#1e50c8);box-shadow:0 6px 24px rgba(30,60,200,.4)}
.cta-fb:hover{box-shadow:0 8px 36px rgba(30,80,240,.6);transform:translateY(-3px)}
.cta-bg{background:linear-gradient(135deg,var(--pd),var(--p));box-shadow:0 6px 24px var(--p40)}
.cta-bg:hover{box-shadow:0 8px 36px rgba(182,0,255,.7);transform:translateY(-3px)}

/* ── FOOTER ── */
footer{
  background:rgba(7,0,15,.97);border-top:1px solid var(--p20);
  padding:24px 56px;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;
}
.f-sep-line{flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--p20))}
.f-sep-line.r{background:linear-gradient(90deg,var(--p20),transparent)}
.f-links{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center}
.f-links a{font-family:'Rajdhani',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);padding:4px 0;transition:color .2s}
.f-links a:hover{color:var(--pg)}
.f-div{color:rgba(182,0,255,.3);margin:0 16px;font-size:.7rem}
.f-socials{display:flex;gap:14px;margin:0 20px}
.f-socials a{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--p20);
  display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:.85rem;font-family:'Rajdhani',sans-serif;font-weight:700;transition:all .2s;
}
.f-socials a:hover{border-color:var(--p);color:var(--pg);background:var(--p10)}

/* ── ANIMATIONS ── */
@keyframes heroIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav{padding:0 20px}
  .nav-links{display:none}
  .sec{padding:56px 20px}
  .cats-grid{grid-template-columns:repeat(3,1fr)}
  .series-grid{grid-template-columns:repeat(2,1fr)}
  .vids-grid{grid-template-columns:1fr 1fr}
  .c-arrow{display:none}
  .cta-sec{padding:40px 20px}
  footer{padding:20px}
}
@media(max-width:560px){
  .cats-grid{grid-template-columns:repeat(2,1fr)}
  .vids-grid{grid-template-columns:1fr}
  .hero-title{letter-spacing:4px}
}