/* ============================================================
   XANTAF3 — Home
   Cyberpunk noir latinoamericano
   ============================================================ */

:root{
  --ink:        #14040f;
  --ink-2:      #1c0715;
  --ink-3:      #270b1e;
  --ink-glass:  rgba(20,4,15,.72);

  --magenta:    #ff2f86;
  --magenta-2:  #ff62a3;
  --cyan:       #22d8ee;
  --cyan-2:     #5fe7f6;
  --amber:      #ffc23d;

  --text:       #ffe9f3;
  --text-dim:   #c79bb3;
  --text-faint: #8a6b7d;

  --maxw: 1320px;

  --glow-m: 0 0 18px rgba(255,47,134,.55), 0 0 42px rgba(255,47,134,.28);
  --glow-c: 0 0 18px rgba(34,216,238,.5), 0 0 42px rgba(34,216,238,.25);

  --bevel: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px,
                   100% calc(100% - 14px), calc(100% - 14px) 100%,
                   14px 100%, 0 calc(100% - 14px));

  /* angular "blade" cuts — diagonal, asymmetric (cyberpunk feel) */
  --blade:     polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
  --blade-alt: polygon(0 30px, 30px 0, 100% 0, 100% 100%, 0 100%);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--text);
  font-family:"Barlow", system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* Ambient backdrop — granate gradients + faint grid */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(900px 620px at 82% -8%, rgba(255,47,134,.16), transparent 60%),
    radial-gradient(820px 560px at 8% 12%, rgba(34,216,238,.10), transparent 62%),
    radial-gradient(1100px 900px at 50% 120%, rgba(255,47,134,.10), transparent 60%),
    var(--ink);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(255,47,134,.022) 46px 47px),
    radial-gradient(circle at 50% 8%, transparent 58%, rgba(0,0,0,.35) 100%);
}

::selection{ background:var(--magenta); color:#1a0410; }

img{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

/* ---------- Typography helpers ---------- */
.display{
  font-family:"Saira Condensed", sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.005em;
}
.mono{
  font-family:"Share Tech Mono", monospace;
  text-transform:uppercase;
  letter-spacing:.22em;
}
.kicker{
  font-family:"Share Tech Mono", monospace;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.78rem;
  color:var(--cyan);
}
.kicker .tick{ color:var(--magenta); }

.section{
  position:relative;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:140px 40px;
}
.section-head{ position:relative; margin-bottom:64px; }
.section-head .kicker{
  margin-bottom:20px; display:inline-flex; align-items:center; gap:14px;
}
.section-head .kicker::before{
  content:""; width:46px; height:2px; background:var(--magenta);
  box-shadow:var(--glow-m); transform:skewX(-30deg);
}
.section-title{
  position:relative;
  font-size:clamp(3rem, 7.5vw, 6rem);
  color:var(--text);
  text-wrap:balance;
}
.section-head[data-ghost]::before{
  content:attr(data-ghost);
  position:absolute; top:-58px; right:-6px; z-index:-1;
  font-family:"Saira Condensed",sans-serif; font-weight:800;
  font-size:clamp(7rem, 17vw, 15rem); line-height:.8;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,47,134,.10);
  pointer-events:none; user-select:none;
}
.section-title em{
  font-style:normal;
  color:var(--magenta);
  text-shadow:var(--glow-m);
}

/* ============================================================
   HUD corner brackets — reusable
   ============================================================ */
.hud-corners{ position:relative; }
.hud-corners > .c{
  position:absolute; width:26px; height:26px; z-index:3;
  border:2px solid var(--cyan);
  filter:drop-shadow(0 0 6px rgba(34,216,238,.6));
  pointer-events:none;
}
.hud-corners > .tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hud-corners > .tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.hud-corners > .bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.hud-corners > .br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
/* blade-clipped panels drop the brackets — the diagonal cut is the HUD now */
.chars__stage > .c, .sound__player > .c, .cta-band__inner > .c{ display:none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --c:var(--magenta);
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 30px;
  font-family:"Saira Condensed", sans-serif;
  font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.06rem;
  color:#180410;
  background:var(--c);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor:pointer; border:none;
  transition:transform .18s ease, box-shadow .22s ease, filter .2s ease;
  box-shadow:var(--glow-m);
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn svg{ width:20px; height:20px; }
.btn--ghost{
  color:var(--cyan); background:transparent;
  border:1.5px solid var(--cyan);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:none;
}
.btn--ghost:hover{ background:rgba(34,216,238,.10); box-shadow:var(--glow-c); }
.btn--lg{ padding:20px 40px; font-size:1.3rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:16px 40px;
  transition:background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:var(--ink-glass);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,47,134,.25);
  padding-block:11px;
}
.nav__brand{ display:flex; align-items:center; gap:14px; }
.nav__brand img{ height:34px; width:auto; filter:drop-shadow(0 0 10px rgba(255,47,134,.55)); }
.nav__links{ display:flex; gap:34px; align-items:center; }
.nav__links a{
  font-family:"Share Tech Mono", monospace;
  text-transform:uppercase; letter-spacing:.16em; font-size:.82rem;
  color:var(--text-dim); position:relative; padding:4px 0;
  transition:color .2s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--magenta); box-shadow:var(--glow-m);
  transition:width .25s ease;
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }
.nav .btn{ padding:11px 20px; font-size:.92rem; }
.nav__menu-btn{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero__art{
  position:absolute; inset:0; z-index:0;
  background:url("assets/portada.webp") center 20% / cover no-repeat;
  transform:scale(1.06);
  will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,4,15,.5) 0%, transparent 22%, transparent 44%, rgba(20,4,15,.82) 78%, var(--ink) 100%),
    linear-gradient(72deg, rgba(20,4,15,.92) 0%, rgba(20,4,15,.55) 30%, transparent 56%);
}
.hero__scan{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.22) 3px 4px);
  mix-blend-mode:multiply;
}
.hero__frame{ position:fixed; inset:18px; z-index:3; pointer-events:none; }
.hero__frame .c{
  position:absolute; width:54px; height:54px;
  border:2px solid rgba(255,47,134,.85);
  filter:drop-shadow(0 0 8px rgba(255,47,134,.6));
}
.hero__frame .tl{ top:0; left:0; border-right:0; border-bottom:0; }
.hero__frame .tr{ top:0; right:0; border-left:0; border-bottom:0; }
.hero__frame .bl{ bottom:0; left:0; border-right:0; border-top:0; }
.hero__frame .br{ bottom:0; right:0; border-left:0; border-top:0; }

.hero__inner{
  position:relative; z-index:4;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding:0 40px 92px;
}
.hero__col{ max-width:600px; }
.hero__kicker{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font-size:.85rem;
}
.hero__kicker .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--magenta); box-shadow:var(--glow-m);
  animation:pulse 1.8s ease-in-out infinite;
}
.hero__tagline{
  font-size:clamp(1.5rem, 2.5vw, 2.3rem);
  line-height:1.08;
  max-width:20ch;
  color:var(--text);
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.7);
}
.hero__tagline b{ color:var(--magenta); text-shadow:var(--glow-m); font-weight:800; }
.hero__tagline i{ color:var(--cyan); font-style:normal; text-shadow:var(--glow-c); }
.hero__desc{
  margin-top:28px; max-width:46ch;
  color:var(--text-dim); font-size:1rem;
  text-shadow:0 1px 14px rgba(0,0,0,.85);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:30px; align-items:center; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:18px; margin-top:30px;
  color:var(--text-faint); font-size:.72rem;
}
.hero__meta span{ display:flex; align-items:center; gap:9px; }
.hero__meta i{ color:var(--cyan); font-style:normal; }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-faint); font-size:.66rem;
}
.scroll-cue .bar{
  width:1px; height:42px;
  background:linear-gradient(var(--cyan), transparent);
  animation:scrollPulse 2.1s ease-in-out infinite;
}

/* ============================================================
   INVESTIGATION BOARD (¿Cómo se juega?)
   ============================================================ */
/* --- angular amber HUD trim (notches + diamonds + vents) --- */
.hud-trim{
  height:16px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='16' viewBox='0 0 180 16'%3E%3Cpath fill='%23ffc23d' d='M0 0H180V7H162L157 13H132L127 7H103L97 2H92L86 7H58L53 13H40L35 7H0Z'/%3E%3Crect x='9' y='1.5' width='2' height='4' fill='%23150409'/%3E%3Crect x='14' y='1.5' width='2' height='4' fill='%23150409'/%3E%3Crect x='19' y='1.5' width='2' height='4' fill='%23150409'/%3E%3Cpath fill='%23150409' d='M115 1.5 119 5 115 8.5 111 5Z'/%3E%3Crect x='150' y='1.5' width='2' height='4' fill='%23150409'/%3E%3Crect x='155' y='1.5' width='2' height='4' fill='%23150409'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:left top;
  filter:drop-shadow(0 0 8px rgba(255,194,61,.4));
}
.board{
  position:relative;
  border:1px solid rgba(255,194,61,.22);
  background:#1a0c12;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.board__bar{
  display:flex; align-items:center; gap:14px;
  padding:14px 22px;
  background:linear-gradient(90deg, rgba(255,194,61,.10), rgba(20,7,14,.2));
  border-bottom:1px solid rgba(255,194,61,.2);
}
.board__bolt{ color:var(--amber); display:flex; filter:drop-shadow(0 0 8px rgba(255,194,61,.6)); }
.board__bolt svg{ width:22px; height:22px; }
.board__bar-label{
  font-family:"Saira Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.15rem; color:var(--amber); white-space:nowrap;
  text-shadow:0 0 14px rgba(255,194,61,.4);
}
.board__bar-id{
  font-family:"Share Tech Mono",monospace; font-size:.66rem; letter-spacing:.18em;
  color:var(--text-faint);
}
.board__bar-count{
  margin-left:auto;
  font-family:"Share Tech Mono",monospace; font-size:.68rem; letter-spacing:.18em;
  color:var(--cyan); padding:6px 12px; border:1px solid rgba(34,216,238,.35);
  background:rgba(34,216,238,.06);
}
.board__surface{
  position:relative;
  padding:64px 40px 56px;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,194,61,.08), transparent 42%),
    radial-gradient(circle at 86% 88%, rgba(255,47,134,.09), transparent 48%),
    linear-gradient(160deg, #2c1715, #1b0d12 70%);
  overflow:hidden;
}
.board__surface::before{ /* subtle cork speckle, isolated layer */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(rgba(255,214,160,.06) 1px, transparent 1.6px),
    radial-gradient(rgba(0,0,0,.32) 1px, transparent 1.6px);
  background-size:8px 8px, 8px 8px;
  background-position:0 0, 4px 4px;
}
.board__threads{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
}
.board__thread--main{ stroke:url(#thread-grad); stroke-width:2; opacity:.9;
  filter:drop-shadow(0 0 5px rgba(255,47,134,.6)); }
.board__thread--cross{ stroke:rgba(255,194,61,.45); stroke-width:1.5; stroke-dasharray:5 7; }
.board__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
  align-items:start;
}
/* zigzag — pinned-evidence feel that drives the diagonal threads */
.board__grid .ev:nth-child(1){ margin-top:26px; }
.board__grid .ev:nth-child(2){ margin-top:0; }
.board__grid .ev:nth-child(3){ margin-top:40px; }
.board__grid .ev:nth-child(4){ margin-top:8px; }

.ev{
  position:relative;
  padding:26px 22px 24px;
  background:linear-gradient(162deg, #2c1320, #1c0b14);
  border:1px solid var(--accent);
  box-shadow:
    0 16px 32px -10px rgba(0,0,0,.65),
    inset 0 0 0 4px rgba(18,6,12,.6),
    inset 0 0 0 5px rgba(255,255,255,.05);
  transform:rotate(var(--r, 0deg));
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.ev::before{ /* faint accent wash so each card reads in its color */
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(162deg, var(--accent), transparent 55%);
  opacity:.12; pointer-events:none;
}
.ev > *{ position:relative; z-index:1; }
.ev:hover{
  transform:rotate(0deg) translateY(-6px);
  box-shadow:
    0 26px 44px -12px rgba(0,0,0,.7),
    0 0 30px -6px var(--accent),
    inset 0 0 0 4px rgba(18,6,12,.6),
    inset 0 0 0 5px rgba(255,255,255,.08);
}
.ev__pin{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%; z-index:5;
  background:radial-gradient(circle at 38% 34%, #fff, var(--accent) 60%);
  box-shadow:0 0 12px var(--accent), 0 0 3px #fff, 0 2px 4px rgba(0,0,0,.6);
}
.ev__tape{
  position:absolute; top:-10px; left:-12px; width:56px; height:22px; z-index:4;
  background:linear-gradient(120deg, rgba(255,225,170,.32), rgba(255,225,170,.16));
  border:1px solid rgba(255,235,200,.18);
  transform:rotate(-32deg);
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.ev__tape--right{ left:auto; right:-12px; transform:rotate(32deg); }
.ev__tag{
  position:absolute; right:12px; bottom:11px; z-index:2;
  font-family:"Share Tech Mono",monospace; font-size:.6rem; letter-spacing:.14em;
  color:var(--accent); padding:3px 7px;
  border:1px solid var(--accent);
  background:rgba(18,6,12,.6);
}
.ev__icon{ width:44px; height:44px; margin:6px 0 18px; display:flex; align-items:center; }
.ev__icon svg{ width:40px; height:40px; stroke:var(--accent);
  filter:drop-shadow(0 0 7px var(--accent)); }
/* draggable evidence */
.ev{ cursor:default; }
@media (min-width:981px){
  .ev{ cursor:grab; touch-action:none; }
  .ev.dragging{ cursor:grabbing; z-index:30 !important; transition:none; }
}
.board__hint{
  position:absolute; left:24px; bottom:14px; z-index:3;
  font-family:"Share Tech Mono",monospace; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-faint);
  display:flex; align-items:center; gap:8px; pointer-events:none;
}
.board__hint svg{ width:13px; height:13px; stroke:var(--cyan); fill:none; }
.ev__title{
  font-family:"Saira Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.015em; font-size:1.42rem; line-height:1.02; margin-bottom:11px; color:var(--text);
}
.ev__desc{ font-size:.92rem; color:var(--text-dim); }
.board__note{
  position:absolute; right:26px; top:22px; z-index:3;
  font-family:"Caveat","Bradley Hand",cursive; font-size:1.5rem; line-height:1.05;
  color:#2a1208; text-align:center; padding:14px 16px 12px;
  background:linear-gradient(170deg, #ffd24d, #f6b822);
  transform:rotate(6deg);
  box-shadow:0 10px 22px -6px rgba(0,0,0,.6);
}
.board__note::before{ /* tape on the sticky note */
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:46px; height:16px; background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.2);
}

/* ============================================================
   CHARACTERS
   ============================================================ */
.chars{ position:relative; }
.chars-layout{
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
}
.chars__stage{
  position:relative; padding:18px;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(255,47,134,.22), transparent 60%),
    linear-gradient(180deg, rgba(34,216,238,.06), rgba(20,4,15,.4));
  border-left:2px solid rgba(34,216,238,.4);
  clip-path:var(--blade);
  min-height:520px;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.chars__stage::before{ /* scanning line */
  content:""; position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:var(--glow-c); opacity:.7;
  animation:scanY 4.5s ease-in-out infinite;
}
.chars__floor{
  position:absolute; bottom:0; left:0; right:0; height:60%;
  background-image:
    linear-gradient(rgba(34,216,238,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,216,238,.10) 1px, transparent 1px);
  background-size:38px 38px;
  transform:perspective(500px) rotateX(64deg);
  transform-origin:bottom; opacity:.5;
  mask-image:linear-gradient(transparent, #000);
}
.chars__trio{
  position:relative; z-index:2; max-height:480px; width:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.6));
}
.chars__readout{
  position:absolute; top:18px; left:18px; z-index:3;
  font-family:"Share Tech Mono", monospace; font-size:.6rem;
  letter-spacing:.18em; color:var(--cyan); opacity:.85; line-height:1.7;
}

.dossier__tabs{ display:flex; gap:10px; margin-bottom:26px; }
.dossier__tab{
  flex:1; padding:13px 10px;
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  font-family:"Saira Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:1.18rem; color:var(--text-dim);
  cursor:pointer; transition:all .2s ease; text-align:center;
}
.dossier__tab small{ display:block; font-family:"Share Tech Mono",monospace;
  font-size:.56rem; letter-spacing:.18em; opacity:.7; font-weight:400; margin-top:3px; }
.dossier__tab:hover{ color:var(--text); border-color:var(--cur,var(--magenta)); }
.dossier__tab.active{
  color:#180410; background:var(--cur,var(--magenta));
  border-color:var(--cur,var(--magenta)); box-shadow:0 0 22px -2px var(--cur,var(--magenta));
}
.dossier__tab.active small{ opacity:.85; }

.dossier__panel{ position:relative; }
.dossier__name{
  font-family:"Saira Condensed",sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem,4.5vw,3.6rem); line-height:.95;
  color:var(--cur,var(--magenta)); text-shadow:0 0 22px color-mix(in srgb, var(--cur,var(--magenta)) 55%, transparent);
}
.dossier__role{
  font-family:"Share Tech Mono",monospace; letter-spacing:.2em; text-transform:uppercase;
  font-size:.78rem; color:var(--text-dim); margin:10px 0 20px;
}
.dossier__bio{ color:var(--text-dim); font-size:1.04rem; max-width:46ch; }
.dossier__stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.dossier__stat{
  font-family:"Share Tech Mono",monospace; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text);
  padding:8px 13px; border:1px solid color-mix(in srgb, var(--cur,var(--magenta)) 50%, transparent);
  background:color-mix(in srgb, var(--cur,var(--magenta)) 10%, transparent);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.dossier__stat b{ color:var(--cur,var(--magenta)); }

/* ============================================================
   SOUNDTRACK
   ============================================================ */
.sound{ position:relative; }
.sound-layout{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.sound__player{
  position:relative; padding:34px 34px 34px 38px;
  background:linear-gradient(120deg, rgba(38,11,29,.5), transparent 80%);
  border-left:2px solid var(--cyan);
  clip-path:var(--blade-alt);
}
.sound__eq{
  display:flex; align-items:flex-end; gap:5px; height:140px; margin-bottom:24px;
}
.sound__eq .bar{
  flex:1; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, var(--cyan), var(--magenta));
  box-shadow:0 0 12px rgba(255,47,134,.4);
  animation:eq 1.1s ease-in-out infinite;
  transform-origin:bottom;
}
.sound__nowplaying{
  display:flex; align-items:center; gap:16px; margin-bottom:6px;
}
.sound__play{
  flex:none; width:54px; height:54px; border-radius:50%;
  border:1.5px solid var(--magenta); background:rgba(255,47,134,.12);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--magenta); box-shadow:var(--glow-m); transition:all .2s ease;
}
.sound__play:hover{ background:var(--magenta); color:#180410; }
.sound__play svg{ width:20px; height:20px; }
.sound__track-name{ font-family:"Saira Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; font-size:1.4rem; line-height:1; }
.sound__track-sub{ font-family:"Share Tech Mono",monospace; font-size:.66rem;
  letter-spacing:.16em; color:var(--cyan); margin-top:5px; }
.sound__progress{ height:4px; background:rgba(255,255,255,.1); margin-top:20px; position:relative; }
.sound__progress i{ position:absolute; left:0; top:0; bottom:0; width:0%; transition:width .4s linear;
  background:var(--magenta); box-shadow:var(--glow-m); }

.sound__genres{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 28px; }
.genre{
  font-family:"Share Tech Mono",monospace; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; padding:8px 15px;
  border:1px solid rgba(255,194,61,.5); color:var(--amber);
  background:rgba(255,194,61,.07);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.tracklist{ list-style:none; }
.tracklist li{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:16px; align-items:center;
  padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .2s ease, padding .2s ease; cursor:pointer;
}
.tracklist li:hover{ background:rgba(255,47,134,.06); padding-left:12px; }
.tracklist .n{ font-family:"Share Tech Mono",monospace; font-size:.74rem; color:var(--text-faint); }
.tracklist .t{ font-weight:600; color:var(--text); }
.tracklist .g{ font-family:"Share Tech Mono",monospace; font-size:.62rem;
  letter-spacing:.12em; color:var(--cyan); text-transform:uppercase; }
.tracklist .d{ font-family:"Share Tech Mono",monospace; font-size:.74rem; color:var(--text-faint); }

/* ============================================================
   FINAL CTA / FOOTER
   ============================================================ */
.cta-band{
  position:relative; max-width:var(--maxw); margin:40px auto 0; padding:0 40px;
}
.cta-band__inner{
  position:relative; text-align:center;
  padding:96px 40px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,47,134,.22), transparent 60%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border-left:2px solid var(--magenta); border-right:2px solid var(--cyan);
  clip-path:polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
  overflow:hidden;
}
.cta-band__inner::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(118deg, transparent 0 26px, rgba(34,216,238,.045) 26px 27px);
  pointer-events:none;
}
.cta-band h2{
  font-family:"Saira Condensed",sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.6rem,6vw,5rem); line-height:.94; margin-bottom:18px;
}
.cta-band h2 em{ font-style:normal; color:var(--magenta); text-shadow:var(--glow-m); }
.cta-band p{ color:var(--text-dim); max-width:50ch; margin:0 auto 36px; }

.footer{
  max-width:var(--maxw); margin-inline:auto;
  padding:72px 40px 48px;
  display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start;
}
.footer__brand img{ height:40px; filter:drop-shadow(0 0 12px rgba(255,47,134,.5)); margin-bottom:16px; }
.footer__brand p{ color:var(--text-faint); font-size:.86rem; max-width:34ch; }
.footer__col h4{ font-family:"Share Tech Mono",monospace; font-size:.72rem; letter-spacing:.2em;
  color:var(--cyan); text-transform:uppercase; margin-bottom:16px; }
.footer__col a{ display:block; color:var(--text-dim); font-size:.92rem; margin-bottom:10px; transition:color .2s; }
.footer__col a:hover{ color:var(--magenta); }
.footer__bar{
  max-width:var(--maxw); margin-inline:auto;
  padding:22px 40px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-family:"Share Tech Mono",monospace; font-size:.68rem; letter-spacing:.14em;
  color:var(--text-faint); text-transform:uppercase;
}
.footer__bar a{ color:var(--text-faint); text-decoration:none; transition:color .2s; }
.footer__bar a:hover{ color:var(--cyan); }

/* ============================================================
   Page transition overlay
   ============================================================ */
#page-transition{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  pointer-events:none; opacity:1;
  transition:opacity .35s ease;
}
#page-transition.loaded{ opacity:0; }
#page-transition.leaving{ opacity:1; pointer-events:all; }

/* Typewriter cursor */
.tw-cursor{ color:var(--magenta); text-shadow:var(--glow-m); animation:cursor-blink .7s step-end infinite; }
@keyframes cursor-blink{ 0%,100%{opacity:1} 50%{opacity:0} }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.5; } }
@keyframes scrollPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@keyframes scanY{ 0%{ top:6%; } 50%{ top:94%; } 100%{ top:6%; } }
@keyframes eq{ 0%,100%{ transform:scaleY(.22); } 50%{ transform:scaleY(1); } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .section{ padding:96px 26px; }
  .board__grid{ grid-template-columns:repeat(2,1fr); gap:34px 22px; }
  .board__grid .ev:nth-child(1),
  .board__grid .ev:nth-child(2),
  .board__grid .ev:nth-child(3),
  .board__grid .ev:nth-child(4){ margin-top:0; }
  .board__surface{ padding:54px 28px 44px; }
  .board__threads{ display:none; }
  .ev{ transform:none; }
  .ev:hover{ transform:translateY(-6px); }
  .board__note{ display:none; }
  .chars-layout, .sound-layout{ grid-template-columns:1fr; gap:40px; }
  .chars__stage{ min-height:440px; }
  /* Nav fijo en la parte inferior en móvil (altura de barra constante = 62px) */
  .nav{
    top:auto; bottom:0; padding-block:14px;
    border-bottom:none; border-top:1px solid transparent;
  }
  .nav.scrolled{
    padding-block:14px;
    border-bottom:none; border-top:1px solid rgba(255,47,134,.25);
  }
  body{ padding-bottom:74px; }
  .nav__links{
    display:none;
    position:fixed; left:0; right:0; bottom:62px; z-index:60;
    flex-direction:column; gap:0; align-items:stretch;
    background:var(--ink-glass); backdrop-filter:blur(16px) saturate(1.2);
    border-top:1px solid rgba(255,47,134,.25);
    border-bottom:1px solid rgba(255,47,134,.25);
    padding:10px 22px; max-height:70vh; overflow:auto;
  }
  .nav.open .nav__links{ display:flex; }
  .nav__links a{ padding:14px 0; font-size:.92rem; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav__menu-btn{ display:inline-flex; font-size:1.3rem; padding:9px 16px; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .hero__inner{ padding:0 22px 80px; }
  .board__grid{ grid-template-columns:1fr; }
  .board__bar{ flex-wrap:wrap; gap:8px 12px; }
  .board__bar-count{ margin-left:0; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ justify-content:center; }
  .dossier__tab{ font-size:1rem; }
  .tracklist li{ grid-template-columns:auto 1fr auto; }
  .tracklist .g{ display:none; }
  .footer{ flex-direction:column; gap:20px; padding:48px 22px 32px; }
  .footer__bar{ flex-direction:column; gap:8px; padding:18px 22px; text-align:center; }
  .hero__frame{ inset:10px; }
}

/* ============================================================
   CINEMATIC FX
   ============================================================ */

/* --- Boot / intro loader --- */
.boot{
  position:fixed; inset:0; z-index:300;
  background:radial-gradient(circle at 50% 42%, #220a1a 0%, var(--ink) 68%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .55s ease;
}
.boot::after{ /* scanlines over boot */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.35) 3px 4px);
}
.boot.done{ opacity:0; pointer-events:none; }
.boot.glitch-out .boot__inner{ animation:bootGlitch .45s steps(2) forwards; }
.boot__inner{ position:relative; width:min(540px, 84vw); padding:46px 40px; text-align:center; }
.boot__corners .c{
  position:absolute; width:24px; height:24px; border:2px solid var(--magenta);
  filter:drop-shadow(0 0 6px rgba(255,47,134,.7));
}
.boot__corners .tl{ top:0; left:0; border-right:0; border-bottom:0; }
.boot__corners .tr{ top:0; right:0; border-left:0; border-bottom:0; }
.boot__corners .bl{ bottom:0; left:0; border-right:0; border-top:0; }
.boot__corners .br{ bottom:0; right:0; border-left:0; border-top:0; }
.boot__logo{
  width:80%; max-width:400px; margin:0 auto 30px;
  filter:drop-shadow(0 0 20px rgba(255,47,134,.6));
  animation:bootFlicker 1.5s steps(1) both;
}
.boot__bar{
  height:3px; background:rgba(255,255,255,.1); position:relative; overflow:hidden; margin:0 0 14px;
}
.boot__bar i{
  position:absolute; top:0; left:0; bottom:0; width:0;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow:var(--glow-m);
}
.boot__status{
  font-family:"Share Tech Mono", monospace; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cyan);
}
.boot__status b{ color:var(--magenta); }
.boot__log{
  margin-top:20px; min-height:74px;
  font-family:"Share Tech Mono", monospace; font-size:.62rem; letter-spacing:.1em;
  color:var(--text-faint); line-height:2; text-align:left;
}
.boot__log span{ display:block; }
.boot__log span b{ color:var(--cyan); }
.boot__skip{
  position:absolute; bottom:-34px; left:50%; transform:translateX(-50%);
  font-family:"Share Tech Mono", monospace; font-size:.6rem; letter-spacing:.2em;
  color:var(--text-faint); background:none; border:none; cursor:pointer; text-transform:uppercase;
}
.boot__skip:hover{ color:var(--magenta); }

/* page hidden until boot completes (prevents flash) */
.preboot .nav, .preboot .hero__inner .reveal{ opacity:0 !important; }

/* --- Hero particles canvas --- */
.hero__particles{ position:absolute; inset:0; z-index:2; pointer-events:none; }

/* --- Periodic scan sweep across hero --- */
.hero__sweep{
  position:absolute; left:0; right:0; top:0; height:140px; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(34,216,238,.16), transparent);
  mix-blend-mode:screen; opacity:0;
  animation:heroSweep 8s ease-in-out 3s infinite;
}

/* --- Neon flicker on logos (real-sign feel) --- */
.nav__brand img, .footer__brand img{ animation:neonFlicker 7s linear infinite; }

/* --- Glitch reveal on titles --- */
.reveal.in .glitch{ animation:titleGlitch .5s steps(2,end) both; }

@keyframes bootFlicker{
  0%{ opacity:0; } 8%{ opacity:.7; } 12%{ opacity:.1; } 18%{ opacity:.9; }
  24%{ opacity:.2; } 30%{ opacity:1; } 45%{ opacity:.6; } 55%{ opacity:1; } 100%{ opacity:1; }
}
@keyframes bootGlitch{
  0%{ transform:translate(0,0); filter:none; clip-path:inset(0 0 0 0); }
  20%{ transform:translate(-8px,2px); filter:hue-rotate(20deg); clip-path:inset(0 0 60% 0); }
  40%{ transform:translate(10px,-3px); clip-path:inset(50% 0 0 0); }
  60%{ transform:translate(-5px,0); clip-path:inset(0 40% 0 0); }
  100%{ transform:translate(0,0); opacity:0; clip-path:inset(0 0 0 0); }
}
@keyframes heroSweep{
  0%{ transform:translateY(-160px); opacity:0; }
  6%{ opacity:.9; }
  16%{ transform:translateY(100vh); opacity:0; }
  100%{ transform:translateY(100vh); opacity:0; }
}
@keyframes neonFlicker{
  0%,18%,22%,25%,53%,57%,83%,100%{ filter:drop-shadow(0 0 10px rgba(255,47,134,.55)); opacity:1; }
  20%{ opacity:.55; filter:drop-shadow(0 0 4px rgba(255,47,134,.3)); }
  24%{ opacity:.85; }
  55%{ opacity:.5; filter:drop-shadow(0 0 3px rgba(255,47,134,.25)); }
  85%{ opacity:.7; }
}
@keyframes titleGlitch{
  0%{ clip-path:inset(0 0 70% 0); transform:translateX(-6px); text-shadow:3px 0 var(--magenta), -3px 0 var(--cyan); }
  25%{ clip-path:inset(40% 0 20% 0); transform:translateX(5px); text-shadow:-3px 0 var(--magenta), 3px 0 var(--cyan); }
  50%{ clip-path:inset(10% 0 50% 0); transform:translateX(-3px); text-shadow:2px 0 var(--cyan); }
  75%{ clip-path:inset(0 0 0 0); transform:translateX(2px); text-shadow:-2px 0 var(--magenta); }
  100%{ clip-path:inset(0 0 0 0); transform:none; text-shadow:none; }
}

@media (prefers-reduced-motion: reduce){
  .boot{ display:none !important; }
  .preboot .nav, .preboot .hero__inner .reveal{ opacity:1 !important; }
  .hero__sweep{ display:none; }
}