/* ============================================================
   GAME PARTY — DESIGN TOKENS
   ============================================================ */
:root{
  --neon-blue:#00D4FF;
  --neon-purple:#7B2FFF;
  --neon-pink:#FF2E9A;
  --bg-void:#050507;
  --bg-black:#0A0A0A;
  --bg-dark:#1A1A1A;
  --bg-elevated:#121219;
  --bg-card:#121017;
  --text-primary:#F4F6FF;
  --text-muted:#9398B8;
  --text-dim:#5C6184;
  --line:rgba(155,140,255,0.16);
  --line-bright:rgba(155,140,255,0.4);

  --grad-main:linear-gradient(95deg,var(--neon-blue) 0%,var(--neon-purple) 55%,var(--neon-pink) 100%);
  --grad-main-v:linear-gradient(180deg,var(--neon-blue) 0%,var(--neon-purple) 60%,var(--neon-pink) 100%);
  --grad-soft:linear-gradient(135deg,rgba(0,212,255,.12),rgba(123,47,255,.12));

  --font-display:'Chakra Petch', sans-serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --container:1240px;
  --radius:18px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  background:var(--bg-black);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
:focus-visible{outline:2px solid var(--neon-blue); outline-offset:3px; border-radius:4px;}

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:.01em; line-height:1.12;}

/* eyebrow / hud label */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--neon-blue);
  margin-bottom:18px;
}
.eyebrow::before{content:''; width:7px; height:7px; background:var(--neon-pink); border-radius:1px; transform:rotate(45deg); box-shadow:0 0 10px var(--neon-pink);}
.eyebrow .br{color:var(--text-dim);}

.section{padding:120px 0;}
.section-head{max-width:680px; margin-bottom:64px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(2rem,4vw,3rem); margin-bottom:18px;}
.section-head p{color:var(--text-muted); font-size:1.08rem; max-width:560px;}
.section-head.center p{margin-left:auto; margin-right:auto;}

.gradient-text{
  background:var(--grad-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:100px;
  font-family:var(--font-display); font-weight:600; font-size:.96rem; letter-spacing:.02em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .35s;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px;}
.btn-primary{
  background:var(--grad-main); color:#070710;
  box-shadow:0 0 0 0 rgba(123,47,255,0), 0 8px 30px -8px rgba(123,47,255,.7);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 14px 36px -8px rgba(123,47,255,.85), 0 0 30px -4px rgba(0,212,255,.5);}
.btn-ghost{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line-bright);
  color:var(--text-primary);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:var(--neon-blue); background:rgba(0,212,255,.06); transform:translateY(-3px);}
.btn-sm{padding:12px 22px; font-size:.85rem;}
.btn-block{width:100%;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,8,12,.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:flex; align-items:center; gap:11px;}
.brand img{height:38px; width:auto;}
.brand-word{font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:.01em;}
.brand-word span{color:var(--neon-pink);}

.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{
  font-size:.89rem; font-weight:500; color:var(--text-muted);
  position:relative; padding:6px 0; transition:color .25s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--grad-main); transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--text-primary);}
.nav-links a:hover::after{width:100%;}

.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-burger{display:none; width:42px; height:42px; border:1px solid var(--line-bright); border-radius:10px; align-items:center; justify-content:center;}
.nav-burger span{display:block; width:18px; height:1.5px; background:var(--text-primary); position:relative;}
.nav-burger span::before,.nav-burger span::after{content:''; position:absolute; left:0; width:18px; height:1.5px; background:var(--text-primary); transition:transform .3s;}
.nav-burger span::before{top:-6px;}
.nav-burger span::after{top:6px;}

.mobile-menu{
  position:fixed; inset:0; z-index:101; background:rgba(6,6,10,.98); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0);}
.mobile-menu a{font-family:var(--font-display); font-size:1.6rem; font-weight:600;}
.mobile-menu .close-x{position:absolute; top:24px; right:24px; width:44px; height:44px; border:1px solid var(--line-bright); border-radius:10px; display:flex; align-items:center; justify-content:center;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:160px 0 90px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 18% 8%, rgba(0,212,255,.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 18%, rgba(255,46,154,.13), transparent 60%),
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(123,47,255,.18), transparent 60%),
    var(--bg-void);
}
.hero-grid{
  position:absolute; left:0; right:0; bottom:-10%; height:65%;
  background-image:
    linear-gradient(rgba(123,47,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,47,255,.35) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(420px) rotateX(62deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, black 10%, transparent 92%);
  -webkit-mask-image:linear-gradient(to top, black 10%, transparent 92%);
  opacity:.55;
  animation:gridMove 9s linear infinite;
}
@keyframes gridMove{ from{background-position:0 0;} to{background-position:0 64px;} }

.hero-scanlines{
  position:absolute; inset:0; pointer-events:none; opacity:.05;
  background:repeating-linear-gradient(to bottom, #fff 0px, #fff 1px, transparent 1px, transparent 3px);
}

.hero-noise-edge{position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 160px 40px rgba(0,0,0,.75);}

.hero-orb{position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none;}
.hero-icon{
  position:absolute; color:var(--neon-blue); opacity:.85;
  filter:drop-shadow(0 0 14px rgba(0,212,255,.55));
  animation:floatY 7s ease-in-out infinite;
}
.hero-icon.purple{color:var(--neon-purple); filter:drop-shadow(0 0 14px rgba(123,47,255,.6));}
.hero-icon.pink{color:var(--neon-pink); filter:drop-shadow(0 0 14px rgba(255,46,154,.55));}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(var(--rot,0deg));} 50%{transform:translateY(-18px) rotate(var(--rot,0deg));}}

.hero-content{position:relative; z-index:2; max-width:760px; min-width:0;}
.hero h1{
  font-size:clamp(2.5rem, 5.4vw, 4.4rem);
  margin-bottom:24px;
}
.hero h1 .line{display:block;}
.hero p.lead{
  font-size:clamp(1.02rem,1.6vw,1.2rem); color:var(--text-muted);
  max-width:560px; margin-bottom:40px;
}
.hero-actions{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:56px;}

.hero-tags{display:flex; flex-wrap:wrap; gap:10px;}
.tag{
  font-family:var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.06em;
  padding:8px 14px; border:1px solid var(--line); border-radius:8px;
  color:var(--text-muted); background:rgba(255,255,255,.015);
  display:inline-flex; align-items:center; gap:7px;
}
.tag::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--neon-blue); box-shadow:0 0 6px var(--neon-blue);}

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-dim); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em;
  z-index:3;
}
.scroll-cue svg{animation:bounce 2s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);}}

/* ============================================================
   HERO TWO-COLUMN LAYOUT
   ============================================================ */
.hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  width:100%;
  margin-bottom:40px;
}
.hero-layout > *{ min-width:0; }

/* texto solo (sin botones) */
.hero-text{ position:relative; z-index:2; }
.hero-text h1{ font-size:clamp(2.4rem,4.8vw,4.2rem); margin-bottom:20px; }
.hero-text h1 .line{ display:block; }
.hero-text p.lead{ font-size:clamp(1rem,1.5vw,1.15rem); color:var(--text-muted); max-width:520px; margin-bottom:0; }

/* Botones + tags en fila completa */
.hero-bottom{ display:flex; flex-direction:column; gap:20px; position:relative; z-index:2; }
.hero-bottom .hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-bottom .hero-tags{ display:flex; flex-wrap:wrap; gap:10px; }

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero-visual{ position:relative; }

.hc-frame{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line-bright);
  box-shadow:0 0 0 1px rgba(0,212,255,.06), 0 32px 64px -24px rgba(0,0,0,.8);
  /* rotating neon glow */
  animation:hcGlow 6s ease-in-out infinite alternate;
}
@keyframes hcGlow{
  0%  { box-shadow:0 0 30px -8px rgba(0,212,255,.35), 0 32px 64px -24px rgba(0,0,0,.8); border-color:rgba(0,212,255,.45); }
  33% { box-shadow:0 0 30px -8px rgba(123,47,255,.4), 0 32px 64px -24px rgba(0,0,0,.8);  border-color:rgba(123,47,255,.5); }
  66% { box-shadow:0 0 30px -8px rgba(255,46,154,.35),0 32px 64px -24px rgba(0,0,0,.8);  border-color:rgba(255,46,154,.45); }
  100%{ box-shadow:0 0 30px -8px rgba(0,212,255,.35), 0 32px 64px -24px rgba(0,0,0,.8); border-color:rgba(0,212,255,.45); }
}

/* HUD corners */
.hc-corner{
  position:absolute; z-index:10; width:18px; height:18px; pointer-events:none;
}
.hc-corner::before,.hc-corner::after{ content:''; position:absolute; background:var(--neon-blue); }
.hc-corner::before{ width:100%; height:2px; }
.hc-corner::after { width:2px; height:100%; }
.hc-tl{ top:10px; left:10px; }
.hc-tl::before{ top:0; left:0; }
.hc-tl::after { top:0; left:0; }
.hc-tr{ top:10px; right:10px; transform:scaleX(-1); }
.hc-tr::before{ top:0; left:0; }
.hc-tr::after { top:0; left:0; }
.hc-bl{ bottom:44px; left:10px; transform:scaleY(-1); }
.hc-bl::before{ top:0; left:0; }
.hc-bl::after { top:0; left:0; }
.hc-br{ bottom:44px; right:10px; transform:scale(-1); }
.hc-br::before{ top:0; left:0; }
.hc-br::after { top:0; left:0; }

/* LIVE badge */
.hc-live{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:10;
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; font-weight:600;
  color:#fff; background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  padding:5px 12px; border-radius:20px; border:1px solid rgba(255,77,77,.4);
}
.hc-live i{
  width:7px; height:7px; border-radius:50%; background:#ff4d4d;
  box-shadow:0 0 8px #ff4d4d;
  animation:livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* Slide counter */
.hc-counter{
  position:absolute; top:14px; right:14px; z-index:10;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--text-dim); background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  padding:4px 10px; border-radius:6px; border:1px solid var(--line);
}
#hcCurrent{ color:var(--neon-blue); font-weight:600; }
.hc-sep{ margin:0 4px; color:var(--text-dim); }

/* Scanlines overlay */
.hc-scanlines{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,.07) 3px, rgba(0,0,0,.07) 4px);
}

/* Track & Slides */
.hc-track{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  min-height:260px;
  overflow:hidden;
  background:var(--bg-card);
}
.hc-slide{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.04);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.hc-slide.active{
  opacity:1; transform:scale(1);
  pointer-events:auto;
}
.hc-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Caption */
.hc-caption{
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  padding:28px 20px 16px;
  background:linear-gradient(to top, rgba(5,5,7,.9) 0%, transparent 100%);
  display:flex; flex-direction:column; gap:2px;
}
.hc-cap-tag{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--neon-blue);
}
.hc-caption strong{
  font-family:var(--font-display); font-size:1.1rem; font-weight:700;
  color:var(--text-primary);
}

/* Arrows */
.hc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:9;
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,14,.7); border:1px solid var(--line-bright);
  color:var(--text-primary); backdrop-filter:blur(6px);
  transition:background .25s, border-color .25s, transform .25s;
}
.hc-arrow svg{ width:18px; height:18px; }
.hc-arrow:hover{
  background:rgba(0,212,255,.12); border-color:var(--neon-blue);
  transform:translateY(-50%) scale(1.08);
}
.hc-prev{ left:12px; }
.hc-next{ right:12px; }

/* Dots */
.hc-dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:9;
  display:flex; gap:7px; align-items:center;
}
.hc-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.22); border:none;
  transition:background .3s, transform .3s, width .3s;
}
.hc-dot.active{
  width:22px; border-radius:4px;
  background:var(--grad-main);
  transform:none;
}

/* Progress bar */
.hc-progress{
  height:3px; width:100%; background:rgba(255,255,255,.06);
  position:relative; z-index:8;
}
.hc-progress-bar{
  height:100%; width:0%;
  background:var(--grad-main);
  transition:width linear;
}

/* ============================================================
   CAROUSEL — EFECTOS GAMER EXTRA
   ============================================================ */

/* Glitch flash en transición */
@keyframes hcGlitch{
  0%  { clip-path:inset(40% 0 50% 0); transform:translate(-4px,0) skewX(-1deg); }
  20% { clip-path:inset(70% 0 10% 0); transform:translate(4px,0)  skewX(1deg); }
  40% { clip-path:inset(10% 0 70% 0); transform:translate(-3px,0) skewX(-.5deg); }
  60% { clip-path:inset(50% 0 30% 0); transform:translate(3px,0)  skewX(.5deg); }
  80% { clip-path:inset(20% 0 60% 0); transform:translate(-2px,0) skewX(-1deg); }
  100%{ clip-path:inset(0 0 0 0);     transform:translate(0,0)    skewX(0deg); }
}
.hc-slide.glitch::after{
  content:''; position:absolute; inset:0; z-index:12;
  background:inherit;
  animation:hcGlitch .25s steps(2,end);
  opacity:.7;
  mix-blend-mode:screen;
}

/* RGB Scan sweep on new slide */
@keyframes rgbSweep{
  0%  { top:-100%; }
  100%{ top:110%; }
}
.hc-rgb-sweep{
  position:absolute; left:0; right:0; height:60%; z-index:11;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,212,255,.08) 20%,
    rgba(123,47,255,.12) 50%,
    rgba(255,46,154,.08) 80%,
    transparent 100%);
  pointer-events:none;
  animation:rgbSweep .6s ease-out forwards;
}

/* Noise static flash */
@keyframes staticFlash{
  0%,100%{ opacity:0; }
  50%    { opacity:.15; }
}
.hc-static{
  position:absolute; inset:0; z-index:10; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:150px 150px;
  mix-blend-mode:overlay;
  animation:staticFlash .3s ease-out forwards;
}

/* HUD data overlay on hover */
.hc-frame:hover .hc-corner::before,
.hc-frame:hover .hc-corner::after{ background:var(--neon-pink); }

/* Chromatic aberration on hover */
.hc-frame:hover .hc-track img{
  filter:drop-shadow(2px 0 0 rgba(255,46,154,.4)) drop-shadow(-2px 0 0 rgba(0,212,255,.4));
  transition:filter .3s;
}

/* Pulsing neon border on slide change */
@keyframes borderPop{
  0%  { box-shadow:0 0 0 0 rgba(0,212,255,.8); }
  70% { box-shadow:0 0 0 10px rgba(0,212,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,212,255,0); }
}
.hc-frame.slide-pop{ animation:borderPop .5s ease-out; }

/* ============================================================
   FOTO CAROUSEL (coverflow — desplazamiento físico, autoplay, lightbox)
   ============================================================ */
.fc-wrap{
  position:relative; margin-top:40px;
  padding:20px 0 52px;
  overflow:hidden;           /* recorta lo que sale del contenedor */
}
.fc-stage{
  position:relative;
  height:clamp(200px, 38vw, 400px);  /* altura fija para el posicionado absoluto */
}
.fc-slide{
  position:absolute;
  top:50%; left:50%;
  /* transform calculado vía JS; base: centrar el elemento */
  width:clamp(220px, 44%, 520px);
  border-radius:16px; overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  transition:
    transform .55s cubic-bezier(.4,0,.2,1),
    opacity   .55s cubic-bezier(.4,0,.2,1),
    box-shadow .55s,
    border-color .55s;
  will-change:transform, opacity;
}
.fc-slide img{
  width:100%; display:block;
  aspect-ratio:4/3; object-fit:cover;
  pointer-events:none; user-select:none;
}
/* Overlay de lupa — solo visible en la slide central */
.fc-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,212,255,.08);
  opacity:0; transition:opacity .3s;
}
.fc-slide.is-center:hover .fc-overlay{ opacity:1; }
.fc-zoom-icon{
  width:52px; height:52px; border-radius:50%;
  background:rgba(10,10,14,.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(0,212,255,.6);
}
.fc-zoom-icon svg{ width:22px; height:22px; stroke:var(--neon-blue); }

/* Flechas */
.fc-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,14,.85); border:1px solid var(--line-bright);
  color:var(--text-primary); backdrop-filter:blur(8px);
  transition:background .2s, border-color .2s, transform .2s;
}
.fc-btn svg{ width:20px; height:20px; }
.fc-btn:hover{ background:rgba(0,212,255,.15); border-color:var(--neon-blue); transform:translateY(-50%) scale(1.08); }
.fc-prev{ left:8px; }
.fc-next{ right:8px; }

/* Dots */
.fc-dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.fc-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--line-bright); border:none; padding:0; cursor:pointer;
  transition:background .3s, transform .3s;
}
.fc-dot.active{
  background:var(--neon-blue);
  transform:scale(1.35);
  box-shadow:0 0 8px var(--neon-blue);
}

/* ── Lightbox ─────────────────────────────────────── */
.fc-lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.92); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.fc-lightbox.open{ opacity:1; pointer-events:all; }
.fc-lb-img-wrap{
  max-width:min(90vw,1100px); max-height:85vh;
  display:flex; align-items:center; justify-content:center;
}
.fc-lb-img-wrap img{
  max-width:100%; max-height:85vh;
  border-radius:12px; object-fit:contain;
  box-shadow:0 0 60px rgba(0,212,255,.25);
}
.fc-lb-close{
  position:absolute; top:20px; right:20px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s;
}
.fc-lb-close:hover{ background:rgba(255,46,154,.3); }
.fc-lb-close svg{ width:20px; height:20px; }
.fc-lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:12px;
  background:rgba(10,10,14,.8); border:1px solid var(--line-bright);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, border-color .2s;
}
.fc-lb-arrow:hover{ background:rgba(0,212,255,.2); border-color:var(--neon-blue); }
.fc-lb-arrow svg{ width:22px; height:22px; }
.fc-lb-prev{ left:16px; }
.fc-lb-next{ right:16px; }

/* ============================================================
   TEAM SECTION
   ============================================================ */
.team{ background:var(--bg-void); position:relative; overflow:hidden; }
.team::before{
  content:''; position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:800px; height:400px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,212,255,.1), transparent 65%);
  pointer-events:none;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.team-card{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 22px;
  display:flex; flex-direction:column; gap:20px;
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
  position:relative; overflow:hidden;
}
.team-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(123,47,255,.08), transparent 70%);
  pointer-events:none;
}
.team-card:hover{
  border-color:var(--neon-blue);
  transform:translateY(-6px);
  box-shadow:0 20px 40px -12px rgba(0,212,255,.2);
}

.team-avatar{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.team-avatar-inner{
  width:88px; height:88px; border-radius:50%;
  border:2px solid rgba(123,47,255,.5);
  background:var(--bg-elevated);
  position:relative; overflow:hidden;
  transition:border-color .3s;
  --ac:#7B2FFF;
}
.team-card:hover .team-avatar-inner{ border-color:var(--ac, #7B2FFF); }
.team-avatar-inner img{
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}

/* Rotating glow ring on hover */
.team-avatar-inner::after{
  content:''; position:absolute; inset:-2px; border-radius:50%;
  background:conic-gradient(from var(--a,0deg), var(--neon-blue), var(--neon-purple), var(--neon-pink), var(--neon-blue));
  z-index:-1; opacity:0; transition:opacity .3s;
  animation:spinAvatar 2s linear infinite paused;
}
.team-card:hover .team-avatar-inner::after{ opacity:1; animation-play-state:running; }
@keyframes spinAvatar{ to{ --a:360deg; } }
@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.team-rank{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  color:var(--neon-blue); text-transform:uppercase;
}

.team-info{ display:flex; flex-direction:column; gap:8px; }
.team-info h4{ font-size:1.05rem; font-weight:700; }
.team-role{
  font-family:var(--font-mono); font-size:.72rem; color:var(--neon-purple); letter-spacing:.04em;
}
.team-info p{ font-size:.83rem; color:var(--text-dim); line-height:1.55; }
.team-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.team-tags span{
  font-family:var(--font-mono); font-size:.62rem; padding:4px 9px;
  border-radius:6px; background:rgba(255,255,255,.04);
  border:1px solid var(--line); color:var(--text-muted);
}

/* ============================================================
   RESPONSIVE — nuevas secciones
   ============================================================ */
@media(max-width:1080px){
  .hero-layout{ grid-template-columns:1fr; gap:32px; margin-bottom:28px; }
  .hero-visual{ max-width:560px; margin:0 auto; width:100%; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .gal-item{ flex:0 0 calc(50% - 10px); }
}
@media(max-width:760px){
  .hero-visual{ max-width:100%; }
  .hc-arrow{ width:30px; height:30px; }
  .hc-arrow svg{ width:14px; height:14px; }
  .team-grid{ grid-template-columns:1fr; }
  .gal-item{ flex:0 0 calc(85% - 10px); }
  .hero-bottom .hero-actions{ flex-direction:column; }
  .hero-bottom .hero-actions .btn{ width:100%; }
}

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.marquee-wrap{
  background:var(--bg-elevated); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0; overflow:hidden; white-space:nowrap;
}
.marquee{display:inline-flex; gap:48px; animation:scrollX 28s linear infinite;}
.marquee span{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.1em; color:var(--text-dim);
  display:inline-flex; align-items:center; gap:12px; text-transform:uppercase;
}
.marquee span b{color:var(--text-muted); font-weight:500;}
.marquee span::after{content:'◆'; color:var(--neon-purple); font-size:.6rem; margin-left:36px;}
@keyframes scrollX{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--bg-black); position:relative;}
.about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center;}
.about-text p{color:var(--text-muted); font-size:1.05rem; margin-bottom:28px;}
.about-chips{display:flex; flex-direction:column; gap:14px;}
.about-chip{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.02), transparent);
}
.about-chip .ic{
  width:42px; height:42px; flex:0 0 auto; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-soft); color:var(--neon-blue);
}
.about-chip .ic svg{width:21px; height:21px;}
.about-chip strong{display:block; font-size:.95rem; font-weight:700;}
.about-chip span{font-size:.82rem; color:var(--text-dim);}

.about-panel{
  position:relative; aspect-ratio:1/1.05; border-radius:24px;
  border:1px solid var(--line-bright);
  background:
    radial-gradient(circle at 30% 20%, rgba(0,212,255,.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(255,46,154,.16), transparent 55%),
    var(--bg-elevated);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.about-panel::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:34px 34px;
}
.about-panel-core{
  position:relative; z-index:2; width:62%; aspect-ratio:1;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(123,47,255,.22), transparent 70%);
}
.about-panel-core svg{width:46%; height:46%; color:var(--neon-blue); filter:drop-shadow(0 0 24px rgba(0,212,255,.6));}
.about-float{
  position:absolute; z-index:3; padding:9px 14px; border-radius:10px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em;
  background:rgba(10,10,14,.85); border:1px solid var(--line-bright); backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:8px;
}
.about-float i{width:6px; height:6px; border-radius:50%; background:var(--neon-pink); box-shadow:0 0 8px var(--neon-pink);}

/* ============================================================
   HUD CARD (signature element) — services & packages
   ============================================================ */
.hud-card{
  position:relative; border-radius:var(--radius);
  background:var(--bg-card);
  padding:1px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.hud-card::before{
  content:''; position:absolute; inset:0;
  clip-path:inherit;
  padding:1px;
  background:linear-gradient(140deg, var(--line-bright), transparent 30%, transparent 70%, var(--line-bright));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.hud-card::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; clip-path:inherit;
  background:conic-gradient(from var(--ang,0deg), transparent 0 78%, var(--neon-blue) 84%, var(--neon-pink) 90%, var(--neon-purple) 96%, transparent 100%);
  opacity:0; transition:opacity .4s; z-index:0; animation:spinAng 3.4s linear infinite paused;
}
.hud-card:hover::after{opacity:.9; animation-play-state:running;}
@keyframes spinAng{to{ --ang:360deg; }}
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.hud-card-inner{
  position:relative; z-index:1; height:100%;
  background:var(--bg-card);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  padding:32px 28px;
  transition:background .3s;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--bg-void); position:relative;}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.svc-card .ic-wrap{
  width:54px; height:54px; border-radius:14px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-soft); color:var(--neon-blue);
}
.svc-card.purple .ic-wrap{color:var(--neon-purple);}
.svc-card.pink .ic-wrap{color:var(--neon-pink);}
.svc-card .ic-wrap svg{width:27px; height:27px;}
.svc-card h3{font-size:1.2rem; margin-bottom:8px;}
.svc-card p.desc{color:var(--text-dim); font-size:.88rem; margin-bottom:20px;}
.svc-tags{display:flex; flex-wrap:wrap; gap:7px;}
.svc-tags span{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em;
  padding:5px 10px; border-radius:6px; background:rgba(255,255,255,.04); color:var(--text-muted);
  border:1px solid var(--line);
}

/* ============================================================
   PACKAGES
   ============================================================ */
.packages{background:var(--bg-black);}
.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:80px;}
.pkg-card .hud-card-inner{display:flex; flex-direction:column; height:100%;}
.pkg-card.featured{transform:translateY(-14px);}
.pkg-card.featured::after{opacity:.55; animation-play-state:running;}
.pkg-ribbon{
  position:absolute; top:18px; right:-1px; z-index:2;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; font-weight:600;
  padding:6px 14px 6px 18px; border-radius:8px 0 0 8px;
  background:var(--grad-main); color:#070710;
}
.pkg-name{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; color:var(--text-dim); text-transform:uppercase; margin-bottom:10px;}
.pkg-card h3{font-size:1.5rem; margin-bottom:6px;}
.pkg-stations{font-size:.85rem; color:var(--neon-blue); font-family:var(--font-mono); margin-bottom:20px;}
.pkg-fillbar{display:flex; gap:5px; margin-bottom:24px;}
.pkg-fillbar i{flex:1; height:5px; border-radius:3px; background:var(--bg-elevated); border:1px solid var(--line);}
.pkg-fillbar i.on{background:var(--grad-main); border-color:transparent;}
.pkg-features{display:flex; flex-direction:column; gap:11px; margin-bottom:28px; flex:1;}
.pkg-features li{display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--text-muted);}
.pkg-features svg{width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--neon-pink);}
.pkg-price{display:flex; align-items:baseline; gap:8px; margin-bottom:22px;}
.pkg-price .from{font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em;}
.pkg-price .num{font-family:var(--font-display); font-size:2.1rem; font-weight:700;}
.pkg-price .cur{font-family:var(--font-mono); font-size:.95rem; color:var(--text-muted);}

/* pricing table */
.pricing-table-wrap{
  border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--bg-elevated);
}
.pricing-tabs{display:flex; border-bottom:1px solid var(--line);}
.pricing-tabs button{
  flex:1; padding:18px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); border-bottom:2px solid transparent; transition:.25s;
}
.pricing-tabs button.active{color:var(--neon-blue); border-color:var(--neon-blue); background:rgba(0,212,255,.04);}
.ptable{width:100%; border-collapse:collapse; display:none;}
.ptable.active{display:table;}
.ptable th,.ptable td{padding:16px 24px; text-align:left; font-size:.92rem;}
.ptable thead th{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); border-bottom:1px solid var(--line); font-weight:500;
}
.ptable tbody tr{border-bottom:1px solid var(--line);}
.ptable tbody tr:last-child{border-bottom:none;}
.ptable tbody tr:hover{background:rgba(255,255,255,.02);}
.ptable td:first-child{font-weight:700; color:var(--text-primary);}
.ptable td:not(:first-child){font-family:var(--font-mono); color:var(--neon-blue);}
.ptable td.dim{color:var(--text-dim);}
.pricing-foot{padding:18px 24px; font-size:.78rem; color:var(--text-dim); border-top:1px solid var(--line);}

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits{background:var(--bg-void); position:relative; overflow:hidden;}
.benefits::before{
  content:''; position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:900px; height:500px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(123,47,255,.18), transparent 65%);
  pointer-events:none;
}
.benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; position:relative;}
.benefit{background:var(--bg-void); padding:38px 32px; display:flex; flex-direction:column; gap:16px; transition:background .3s;}
.benefit:hover{background:var(--bg-elevated);}
.benefit .ic{width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--grad-soft); color:var(--neon-pink);}
.benefit .ic svg{width:22px; height:22px;}
.benefit h4{font-size:1.04rem; font-weight:700;}
.benefit p{font-size:.85rem; color:var(--text-dim);}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{background:var(--bg-black);}
.masonry{column-count:3; column-gap:20px;}
.shot{
  break-inside:avoid; margin-bottom:20px; border-radius:16px; overflow:hidden;
  position:relative; border:1px solid var(--line);
}
.shot .frame{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:34px 20px;
}
.shot .frame svg{width:38%; max-width:90px; position:relative; z-index:2; color:#fff; opacity:.92; filter:drop-shadow(0 4px 18px rgba(0,0,0,.4));}
.shot .frame::after{content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size:16px 16px; opacity:.5;}
.shot .rec{
  position:absolute; top:14px; left:14px; z-index:3;
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; color:#fff;
  background:rgba(0,0,0,.35); padding:5px 10px; border-radius:20px; backdrop-filter:blur(4px);
}
.shot .rec i{width:6px; height:6px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 6px #ff4d4d;}
.shot .cap{
  padding:16px 18px; background:var(--bg-elevated);
}
.shot .cap b{display:block; font-size:.92rem; margin-bottom:2px;}
.shot .cap span{font-size:.76rem; color:var(--text-dim); font-family:var(--font-mono); letter-spacing:.03em;}

.h1{height:200px;} .h2{height:270px;} .h3{height:230px;} .h4{height:300px;} .h5{height:240px;} .h6{height:190px;}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{background:var(--bg-void);}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.t-card{border:1px solid var(--line); border-radius:18px; padding:30px 26px; background:var(--bg-elevated); display:flex; flex-direction:column; gap:18px;}
.t-stars{display:flex; gap:4px; color:var(--neon-pink);}
.t-stars svg{width:15px; height:15px;}
.t-quote{font-size:1.02rem; line-height:1.55;}
.t-who{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px;}
.t-who .av{width:38px; height:38px; border-radius:50%; background:var(--grad-main); display:flex; align-items:center; justify-content:center; color:#070710;}
.t-who .av svg{width:18px; height:18px;}
.t-who b{display:block; font-size:.88rem;}
.t-who span{font-size:.76rem; color:var(--text-dim);}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative; margin:0 24px; border-radius:28px; overflow:hidden;
  padding:90px 40px; text-align:center;
  background:
    radial-gradient(ellipse 70% 90% at 20% 0%, rgba(0,212,255,.35), transparent 60%),
    radial-gradient(ellipse 70% 90% at 80% 100%, rgba(255,46,154,.3), transparent 60%),
    linear-gradient(160deg, #120a22, #0a0a0a 60%);
  border:1px solid var(--line-bright);
}
.cta-inner{max-width:680px; margin:0 auto; position:relative; z-index:2;}
.cta h2{font-size:clamp(1.9rem,4vw,2.8rem); margin-bottom:18px;}
.cta p{color:var(--text-muted); margin-bottom:38px; font-size:1.05rem;}
.cta-actions{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
.cta-grid-deco{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(circle at center, black, transparent 75%);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--bg-void); border-top:1px solid var(--line); padding:80px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:50px; margin-bottom:60px;}
.foot-brand .brand{margin-bottom:16px;}
.foot-brand p{color:var(--text-dim); font-size:.9rem; max-width:280px; margin-bottom:22px;}
.foot-social{display:flex; gap:10px;}
.foot-social a{width:38px; height:38px; border:1px solid var(--line-bright); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:.25s;}
.foot-social a:hover{color:var(--neon-blue); border-color:var(--neon-blue); background:rgba(0,212,255,.06);}
.foot-social svg{width:17px; height:17px;}
.foot-col h5{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:18px;}
.foot-col ul{display:flex; flex-direction:column; gap:11px;}
.foot-col a, .foot-col li{font-size:.89rem; color:var(--text-muted);}
.foot-col a:hover{color:var(--neon-blue);}
.foot-col .muted{color:var(--text-dim); font-size:.82rem;}
.foot-bottom{border-top:1px solid var(--line); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--text-dim);}
.foot-bottom a{color:var(--text-dim);}
.foot-bottom a:hover{color:var(--neon-blue);}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.float-wa{
  position:fixed; bottom:26px; right:26px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:var(--grad-main); display:flex; align-items:center; justify-content:center;
  color:#070710; box-shadow:0 8px 26px -6px rgba(123,47,255,.7);
  animation:pulseWa 2.6s ease-in-out infinite;
}
.float-wa svg{width:26px; height:26px;}
@keyframes pulseWa{0%,100%{box-shadow:0 8px 26px -6px rgba(123,47,255,.7), 0 0 0 0 rgba(0,212,255,.5);} 50%{box-shadow:0 8px 30px -4px rgba(123,47,255,.9), 0 0 0 12px rgba(0,212,255,0);}}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.stagger.in > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .about-grid{grid-template-columns:1fr; gap:48px;}
  .about-panel{max-width:420px; margin:0 auto;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .pkg-grid{grid-template-columns:repeat(2,1fr);}
  .pkg-card.featured{transform:none;}
  .benefits-grid{grid-template-columns:repeat(2,1fr);}
  .t-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
  .masonry{column-count:2;}
}
@media (max-width:760px){
  .nav-links{display:none;}
  .nav-cta .btn-ghost{display:none;}
  .nav-burger{display:flex;}
  .section{padding:80px 0;}
  .svc-grid,.pkg-grid,.benefits-grid,.t-grid{grid-template-columns:1fr;}
  .pkg-card.featured{order:-1;}
  .foot-grid{grid-template-columns:1fr; gap:36px;}
  .masonry{column-count:1;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .hero-icon{display:none;}
  .hero{padding-top:130px;}
  .cta{margin:0 16px; padding:60px 22px;}
  .cta-actions{flex-direction:column; align-items:stretch;}
  .ptable th,.ptable td{padding:12px 14px; font-size:.82rem;}
  .pricing-tabs button{font-size:.62rem; padding:14px 4px;}
}