:root {
  color-scheme: dark;
  --black: #020304;
  --ink: #07090b;
  --white: #f2f5f7;
  --muted: #9ba4ac;
  --steel: #b7c1c9;
  --cold: #7f99aa;
  --edge: rgba(216, 229, 238, 0.28);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fade: 1100ms;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--black);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

body.is-locked {
  overflow: hidden;
}

button {
  font: inherit;
}

.intro,
.experience,
.video-stage,
.state-video,
.intro__video,
.cinema-treatment,
.grain {
  position: fixed;
  inset: 0;
}

.intro {
  z-index: 20;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  opacity: 1;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.intro.is-starting {
  pointer-events: none;
}

.intro.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.intro::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: "";
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease);
}

.intro.is-starting::after {
  opacity: 1;
}

.intro__video,
.state-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
}

.intro__video {
  z-index: 0;
  filter: contrast(1.08) saturate(0.82) brightness(0.78);
  transform: scale(1);
  transition: transform 900ms var(--ease), filter 900ms var(--ease);
}

.intro.is-starting .intro__video {
  filter: contrast(1.12) saturate(0.72) brightness(0.48);
  transform: scale(1.035);
}

.intro--fallback .intro__video {
  display: none;
}

.cinema-treatment {
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.42) 72%, rgba(0, 0, 0, 0.86) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.03) 24%, rgba(0, 0, 0, 0.04) 74%, rgba(0, 0, 0, 0.46)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.04) 38%, rgba(0, 0, 0, 0.72));
}

.cinema-treatment--main {
  z-index: 2;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.34) 70%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.08) 34%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0.62)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0.82));
}

.grain {
  z-index: 3;
  opacity: 0.12;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 78% 64%, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  background-size: 180px 180px, 230px 230px;
  animation: grainDrift 9s steps(6) infinite;
}

.grain--main {
  z-index: 3;
  opacity: 0.095;
}

@keyframes grainDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-2%, 2%, 0);
  }
}

.intro__interface {
  position: relative;
  z-index: 6;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  justify-items: center;
  padding: 2rem;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms ease, transform 900ms var(--ease);
}

.intro.is-starting .intro__interface {
  opacity: 0;
  transform: translateY(12px);
}

.intro__title {
  margin: 0;
  color: #eef4f8;
  font-family: 'Jost', sans-serif;
  font-size: clamp(40px, 11vw, 120px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
}

.start-button {
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(242, 245, 247, 0.68);
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: .07em;
  text-transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: startPulse 2.7s ease-in-out infinite;
}

.start-button b {
  color: #5ccfee;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  display: block;
  margin-top: 14px;
}

.start-button:hover {
  color: rgba(242, 245, 247, 0.92);
}

.start-button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 10px;
}

@keyframes startPulse {
  0%,
  100% {
    opacity: 0.42;
  }

  50% {
    opacity: 1;
  }
}

.experience {
  z-index: 1;
  min-height: 100svh;
  visibility: hidden;
  opacity: 0;
  background: #000;
  transition: opacity 500ms ease, visibility 500ms ease;
}

body.has-entered .experience {
  position: relative;
  inset: auto;
  visibility: visible;
  opacity: 1;
}

.video-stage {
  z-index: 0;
  overflow: hidden;
  background: #000;
}

.state-video {
  opacity: 0;
  filter: contrast(1.07) saturate(0.76) brightness(0.74);
  transform: scale(1.001);
  transition: opacity var(--fade) ease;
  will-change: opacity;
}

.state-video.is-visible {
  opacity: 1;
}

.loop-fade {
  position: absolute;
  inset: 0;
  background: #030405;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease-in-out;
}

.loop-fade.show {
  opacity: 1;
}

#bat-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
}

#bat-emblem {
  width: min(62vw, 560px);
  transform-origin: center;
  opacity: 0;
}

#bat-emblem path {
  fill: #f2f5f7;
}

/* ── Rostro: montaje local cuerpo → cara ─────────────────────────── */
.rostro-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
.rostro-stage.is-active { opacity: 1; }
.rostro-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.07) saturate(0.76) brightness(0.74);
  transition: opacity 600ms ease;
}
.rostro-stage video + video { opacity: 0; }

#screen-black {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 22;
}

/* ── HUD Cursor Holográfico ───────────────────────────────────────── */

body.hide-cursor,
body.hide-cursor * { cursor: none !important; }

.bat-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 72px;
  height: auto;
  z-index: 80;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 0 8px rgba(92,207,238,.75)) drop-shadow(0 0 22px rgba(92,207,238,.35));
  animation: batFlick 3.5s steps(40) infinite;
}
.bat-cursor svg  { width: 100%; height: auto; display: block; overflow: visible; }
/* stroke-width en unidades SVG: viewBox 766u → 72px → 1u≈0.094px; 14u≈1.3px visual */
.bat-cursor path { fill: rgba(92,207,238,.5); stroke: rgba(160,225,245,.85); stroke-width: 14; }

@keyframes batFlick { 0%,97%,100%{opacity:.95;} 98%{opacity:.6;} 99%{opacity:1;} }

/* Zona clicable invisible – sin etiqueta, sin rombo, sin color */
.sect {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: none;
  z-index: 7;
  pointer-events: all;
  transition: background 0.35s ease;
  border-radius: 4px;
}
/* Affordance sutil en hover: glow radial muy tenue sobre la zona */
.sect:hover,
.sect.armed {
  background: radial-gradient(ellipse at center, rgba(92,207,238,.07) 0%, transparent 68%);
}

/* Hint flotante junto al cursor */
.hud-hint {
  position: fixed;
  left: 0; top: 0;
  z-index: 81;
  pointer-events: none;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(92,207,238,.52);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
}
.hud-hint.visible { opacity: 1; }
@media (pointer:coarse) { .hud-hint { display: none; } }

.hud-pop {
  position: fixed;
  z-index: 70;
  width: 0; height: 0;
  pointer-events: none;
}

.hud-links { position: absolute; left: 0; top: 0; overflow: visible; }

.hud-link {
  fill: none;
  stroke: #5ccfee;
  stroke-width: 1.4;
  opacity: .6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s ease var(--d,0s);
}
.hud-pop.open .hud-link { stroke-dashoffset: 0; }

.hud-panel {
  position: absolute;
  width: 206px;
  padding: 14px 15px 16px;
  pointer-events: auto;
  background: linear-gradient(160deg, rgba(18,32,40,.88), rgba(8,15,20,.7));
  border: 1px solid rgba(120,200,230,.22);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translate(var(--px,0px),var(--py,0px)) scale(.86);
  transition: opacity .45s ease var(--d,0s), transform .55s cubic-bezier(.16,.84,.28,1) var(--d,0s);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.85);
}
.hud-pop.open .hud-panel { opacity: 1; transform: translate(var(--px,0px),var(--py,0px)) scale(1); }

.hud-panel::before, .hud-panel::after { content:""; position:absolute; width:13px; height:13px; }
.hud-panel::before { top:-1px; left:-1px; border-top:2px solid #5ccfee; border-left:2px solid #5ccfee; }
.hud-panel::after  { bottom:-1px; right:-1px; border-bottom:2px solid #5ccfee; border-right:2px solid #5ccfee; }

.hud-scan {
  position: absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg,transparent,#5ccfee,transparent);
  opacity: 0;
}
.hud-pop.open .hud-scan { animation: hudScanLine 3.2s linear infinite var(--d,0s); }
@keyframes hudScanLine { 0%{top:0;opacity:.7;} 92%{opacity:.7;} 100%{top:100%;opacity:0;} }

.hud-p-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; }
.hud-p-title { font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:#dfeef5; }
.hud-p-id    { font-family:'Space Mono',monospace; font-size:10px; color:rgba(92,207,238,.5); }

.hud-row {
  display: flex; justify-content:space-between; align-items:baseline;
  padding: 5px 0; border-bottom:1px solid rgba(120,200,230,.08);
}
.hud-row:last-child { border-bottom:0; }
.hud-k { font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:rgba(183,193,201,.5); }
.hud-v { font-family:'Space Mono',monospace; font-size:14px; color:rgba(183,193,201,.85); }
.hud-v.cy  { color:#5ccfee; }
.hud-v.hot { color:#ffb23e; }

.hud-bar { height:4px; background:rgba(120,200,230,.12); margin-top:9px; position:relative; overflow:hidden; }
.hud-bar i { position:absolute; inset:0 100% 0 0; background:#5ccfee; transition:right 1s cubic-bezier(.2,.8,.2,1) var(--d,0s); }
.hud-pop.open .hud-bar i { right:var(--fill,60%); }
.hud-bar.amber i { background:#ffb23e; }

.hud-wave { display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:10px; }
.hud-wave span { flex:1; background:#5ccfee; opacity:.55; height:20%; }
.hud-pop.open .hud-wave span { animation:hudBob 1.1s ease-in-out infinite alternate; }
@keyframes hudBob { to{ height:90%; } }

@media (pointer:coarse) { .bat-cursor { display:none; } }

/* ── Marcadores holográficos pulsantes (solo móvil) ─────────────── */
.bat-marker {
  position: absolute;
  width: 36px;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(92,207,238,.85)) drop-shadow(0 0 18px rgba(92,207,238,.4));
  animation: markerPulse 2.4s ease-in-out infinite;
}
.bat-marker svg  { width:100%; height:auto; display:block; overflow:visible; }
.bat-marker path { fill:rgba(92,207,238,.42); stroke:rgba(160,225,245,.75); stroke-width:14; }
@keyframes markerPulse {
  0%,100% { opacity:.5;  transform:translate(-50%,-50%) scale(1);    }
  50%     { opacity:1;   transform:translate(-50%,-50%) scale(1.12); }
}
@media (pointer:fine) { .bat-marker { display:none; } }

/* ── Touch-hint "Toca un componente" ────────────────────────────── */
.touch-hint {
  position: fixed;
  bottom: 4.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(92,207,238,.65);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.touch-hint.visible { opacity: 1; }
@media (pointer:fine) { .touch-hint { display:none; } }

/* ── Botón cerrar HUD (solo móvil) ──────────────────────────────── */
.hud-close { display: none; }
@media (pointer:coarse) {
  /* Panel más ancho en móvil (206px → casi llena el ancho) */
  .hud-panel { width: min(210px, calc(100vw - 3.2rem)); }
  /* Líneas guía ocultas en móvil (las ocultamos desde JS también) */
  .hud-links { display: none; }
  /* Botón × para cerrar el HUD en móvil */
  .hud-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* desplazado al borde superior-derecho del panel 1 */
    transform: translate(109px, -262px);
    width: 28px;
    height: 28px;
    background: rgba(8,20,28,.92);
    border: 1px solid rgba(92,207,238,.38);
    border-radius: 50%;
    color: rgba(92,207,238,.78);
    font-size: 18px;
    font-family: 'Jost', sans-serif;
    line-height: 1;
    cursor: pointer;
    pointer-events: all;
    z-index: 2;
  }
}

/* ── Botón "← Inicio" ───────────────────────────────────────────── */
#back-to-start {
  position: fixed;
  top: 1.4rem;
  left: 1.4rem;
  z-index: 30;
  display: none;
  align-items: center;
  gap: 0.3rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid rgba(183,193,201,.22);
  border-radius: 3px;
  background: transparent;
  color: rgba(183,193,201,.38);
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color 300ms ease, border-color 300ms ease;
}
#back-to-start:hover { color: rgba(183,193,201,.72); border-color: rgba(183,193,201,.44); }
#back-to-start:focus-visible { outline: 2px solid rgba(242,245,247,.72); outline-offset: 5px; }
body.has-entered #back-to-start { display: flex; }

/* ── Sugerencia de sonido ────────────────────────────────────────── */
#sound-prompt {
  position: fixed;
  bottom: 4rem;
  right: 1.4rem;
  z-index: 30;
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(183,193,201,.42);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#sound-prompt.visible { opacity: 1; }
@media (max-width: 600px) { #sound-prompt { display: none; } }

/* ── Pulso en botón SND al entrar en la experiencia ─────────────── */
body.has-entered #sound-toggle:not(.is-on) {
  animation: sndAttract 2.4s ease-in-out 3;
}
@keyframes sndAttract {
  0%,100% { border-color:rgba(183,193,201,.22); color:rgba(183,193,201,.38); }
  50%     { border-color:rgba(92,207,238,.55);  color:rgba(92,207,238,.65);  }
}

@media (prefers-reduced-motion:reduce) {
  .bat-cursor        { animation:none; }
  .hud-wave span     { animation:none !important; height:50% !important; }
  .hud-scan          { animation:none !important; }
  .hud-panel         { transition-duration:80ms !important; transition-delay:0s !important; }
  .hud-link          { transition-duration:80ms !important; }
}

/* ── Fin HUD ──────────────────────────────────────────────────────── */

#sound-toggle {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid rgba(183, 193, 201, 0.22);
  border-radius: 3px;
  background: transparent;
  color: rgba(183, 193, 201, 0.38);
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 300ms ease, border-color 300ms ease;
}

#sound-toggle svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

#sound-toggle .icon-on { display: none; }

#sound-toggle:hover,
#sound-toggle.is-on {
  color: rgba(183, 193, 201, 0.72);
  border-color: rgba(183, 193, 201, 0.44);
}

#sound-toggle.is-on .icon-off { display: none; }
#sound-toggle.is-on .icon-on  { display: block; }

.sections {
  position: relative;
  z-index: 4;
}

.state-section {
  display: grid;
  min-height: 100svh;
  padding: clamp(5rem, 8vw, 7rem) clamp(1.25rem, 6vw, 6rem);
  align-items: center;
}

.state-section[data-align="right"] {
  justify-items: end;
  text-align: right;
}

.section-copy {
  width: min(760px, 92vw);
}

.section-copy__eyebrow {
  margin: 0 0 clamp(0.7rem, 1.4vw, 1.1rem);
  color: var(--cold);
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
  font-weight: 300;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}

.section-copy__title {
  max-width: 11ch;
  margin: 0;
  color: var(--white);
  font-family: 'Jost', sans-serif;
  font-size: clamp(3rem, 10vw, 9.6rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 0.82;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 0 42px rgba(0, 0, 0, 0.62);
}

.state-section[data-align="right"] .section-copy__title {
  margin-left: auto;
}

.section-copy__line {
  width: min(13rem, 40vw);
  height: 1px;
  margin-top: clamp(1.3rem, 2.8vw, 2.4rem);
  margin-right: auto;
  background: linear-gradient(90deg, rgba(242, 245, 247, 0.72), rgba(127, 153, 170, 0));
}

.state-section[data-align="right"] .section-copy__line {
  margin-right: 0;
  margin-left: auto;
  background: linear-gradient(270deg, rgba(242, 245, 247, 0.72), rgba(127, 153, 170, 0));
}

.section-rail {
  position: fixed;
  top: 50%;
  right: clamp(0.85rem, 2vw, 1.6rem);
  z-index: 8;
  display: grid;
  gap: 0.6rem;
  transform: translateY(-50%);
}

.rail-dot {
  width: 8px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(242, 245, 247, 0.32);
  border-radius: 999px;
  background: rgba(242, 245, 247, 0.12);
  cursor: pointer;
  transition: height 260ms ease, background 260ms ease, border-color 260ms ease;
}

.rail-dot.is-active {
  height: 44px;
  border-color: rgba(242, 245, 247, 0.88);
  background: rgba(242, 245, 247, 0.82);
}

.rail-dot:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 5px;
}

@media (max-width: 760px) {
  .intro__title {
    font-size: clamp(3rem, 18vw, 5.8rem);
    letter-spacing: 0.045em;
  }

  .state-video {
    object-position: 52% center;
  }

  .state-section {
    min-height: 100svh;
    padding: 5rem 1.15rem 6rem;
    align-items: end;
  }

  .state-section[data-align="right"] {
    justify-items: start;
    text-align: left;
  }

  .section-copy {
    width: min(520px, 86vw);
  }

  .section-copy__title,
  .state-section[data-align="right"] .section-copy__title {
    max-width: 10.5ch;
    margin-left: 0;
    font-size: clamp(3rem, 16vw, 5.4rem);
  }

  .state-section[data-align="right"] .section-copy__line {
    margin-right: auto;
    margin-left: 0;
    background: linear-gradient(90deg, rgba(242, 245, 247, 0.72), rgba(127, 153, 170, 0));
  }

  .section-rail {
    right: 0.8rem;
    gap: 0.45rem;
  }

  .rail-dot {
    width: 7px;
    height: 20px;
  }

  .rail-dot.is-active {
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 180ms !important;
  }

  .intro.is-starting .intro__video {
    transform: scale(1.006);
  }

  .grain {
    animation: none;
  }
}