:root{
  --black:#0a0a0a;
  --white:#f4f3ef;
  --red:#ff0000;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Archivo",sans-serif;
}

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

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
html,body{height:100%;overflow:hidden;background:#000;font-family:var(--font)}
button{font-family:inherit}
img{-webkit-user-drag:none;user-select:none}
a{color:inherit;text-decoration:none}

#stage{position:relative;width:100vw;height:100dvh;height:100vh;overflow:hidden}

/* ---------- background ---------- */
.bg{position:absolute;inset:0;z-index:0}
.bg img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- reveal de color (spotlight gooey) ---------- */
.spotlight-defs{position:absolute;width:0;height:0;overflow:hidden}
.bg-color{
  z-index:1;pointer-events:none;
  mask:url(#spotlight-mask);-webkit-mask:url(#spotlight-mask);
}
#spotlight-circle{transition:cx .25s var(--ease),cy .25s var(--ease)}

/* ---------- frame (rectángulo blanco, vuelve al splash) ---------- */
.frame{
  position:absolute;top:16vh;left:50%;
  width:min(30vw,320px);height:44vh;
  transform:translateX(-50%);
  background:var(--white);
  border:0;padding:0;cursor:pointer;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .4s var(--ease);
}
.frame:hover,.frame:focus-visible{background:var(--red)}

/* ---------- splash de apertura (cover rojo) ---------- */
.splash{
  position:fixed;inset:0;z-index:100;border:0;background:var(--red);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity .5s var(--ease);
}
.splash-cover{
  width:min(88vmin,720px);height:auto;display:block;
}
.splash-hint{
  position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);
  color:var(--black);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  opacity:.75;
}
.splash.dismissed{opacity:0;pointer-events:none}

/* ---------- siluetas / hotspots ---------- */
.hotspot{
  position:absolute;bottom:6vh;height:46vh;
  border:0;background:transparent;padding:0;cursor:pointer;z-index:3;
}
.hotspot img{height:100%;width:auto;display:block;
  filter:drop-shadow(0 0 0 rgba(255,0,0,0));
  transition:filter .35s var(--ease),transform .35s var(--ease);
}
.hotspot-left{left:50%;transform:translateX(calc(-100% - 4px))}
.hotspot-right{left:50%;transform:translateX(4px)}
.hotspot:hover img,.hotspot:focus-visible img,.hotspot.active img{
  transform:scale(1.045);
  filter:drop-shadow(0 0 13px rgba(255,0,0,.65)) brightness(1.15);
}
.hotspot:focus-visible{outline:1px dashed rgba(255,255,255,.6);outline-offset:4px}

/* ---------- canvas de transiciones WebGL ---------- */
.gl-fx{
  position:fixed;inset:0;z-index:8;pointer-events:none;
  width:100vw;height:100vh;
  opacity:0;
  transition:opacity .15s linear;
}

/* ---------- redes (esquina) ---------- */
.social-corner{
  position:fixed;bottom:22px;right:22px;z-index:8;
  display:flex;gap:1.1em;
  font-size:.7rem;letter-spacing:.1em;color:var(--white);
  mix-blend-mode:difference;
}
.social-corner a{opacity:.75;transition:opacity .25s}
.social-corner a:hover{opacity:1}

/* ---------- wordmark (esquina, vuelve al splash) ---------- */
.wordmark{
  position:fixed;top:22px;left:22px;z-index:8;
  background:none;border:0;padding:0;cursor:pointer;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--white);opacity:.75;mix-blend-mode:difference;
  transition:opacity .25s;
}
.wordmark:hover,.wordmark:focus-visible{opacity:1}

/* ---------- scrim ---------- */
.scrim{
  position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.scrim.show{opacity:1;pointer-events:auto}

/* ---------- paneles ---------- */
.panel{
  position:fixed;top:0;height:100vh;height:100dvh;width:min(420px,92vw);
  background-color:#170202;
  color:var(--white);z-index:10;
  transition:transform .55s var(--ease);
  overflow-y:auto;
}
.panel-inner{padding:5em 2.2em 3em}
.panel-left{left:0;transform:translateX(-100%)}
.panel-right{right:0;transform:translateX(100%)}
.panel.open{transform:translate(0,0)}

.panel-close{
  position:absolute;top:1.4em;background:none;border:0;color:inherit;
  font-size:1.6rem;line-height:1;cursor:pointer;opacity:.7;transition:opacity .25s;
}
.panel-left .panel-close{right:1.4em}
.panel-right .panel-close{left:1.4em}
.panel-close:hover{opacity:1}

.panel h2{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:.55;margin:2.2em 0 .8em;font-weight:500;
}
.panel h2:first-child{margin-top:0}

.contact-link{font-size:1.05rem;border-bottom:1px solid rgba(244,243,239,.35);padding-bottom:.2em}
.contact-link:hover{border-color:var(--red);color:var(--red)}

/* ---------- lista de redes (panel izquierdo) ---------- */
.redes-list{list-style:none}
.redes-list li{margin-bottom:.6em}
.redes-link{font-size:1.05rem;border-bottom:1px solid rgba(244,243,239,.35);padding-bottom:.2em}
.redes-link:hover{border-color:var(--red);color:var(--red)}

/* ---------- streaming rail ---------- */
.streaming-rail{display:flex;gap:.9em;flex-wrap:wrap}
.circle{
  width:62px;height:62px;border-radius:50%;
  border:1.3px solid rgba(244,243,239,.55);background:transparent;color:var(--white);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.62rem;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s,color .3s,box-shadow .3s,transform .3s;
}
.circle span{pointer-events:none}
.circle:hover{
  border-color:var(--red);color:var(--red);
  box-shadow:0 0 22px rgba(255,0,0,.35);
  transform:scale(1.05);
}

/* ---------- modal de suscripción (centrado, sale del rectángulo blanco) ---------- */
.panel-subscribe{
  position:fixed;top:50%;left:50%;height:auto;width:min(380px,88vw);
  max-height:90vh;overflow-y:auto;
  background-color:#170202;color:var(--white);z-index:10;
  border-radius:2px;
  transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none;
  transition:transform .45s var(--ease),opacity .35s var(--ease);
}
.panel-subscribe.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.panel-subscribe .panel-close{top:1em;right:1em}
.panel-subscribe .panel-inner{padding:3em 2.2em}
.panel-subscribe h2{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:.55;margin:0 0 .8em;font-weight:500;
}
.subscribe-copy{font-size:.92rem;opacity:.8;line-height:1.5;margin-bottom:1.6em}
.subscribe-btn{
  display:inline-block;background:var(--red);color:#fff;
  font-size:.85rem;letter-spacing:.04em;padding:.9em 1.4em;
  transition:opacity .25s;
}
.subscribe-btn:hover{opacity:.85}

/* ---------- responsive ---------- */
@media (max-width:700px){
  .frame{width:46vw;top:14vh;height:42vh}
  .hotspot{height:40vh;bottom:5vh}
  .panel{width:100vw;height:100dvh;height:100vh}
  .panel-left{transform:translateY(-100%)}
  .panel-right{transform:translateY(100%)}
  .panel.open{transform:translate(0,0)}
  .panel-inner{padding:4.2em 1.4em 3em}
  .social-corner{bottom:14px;right:14px}
  .wordmark{top:14px;left:14px}
}