:root {
  --scale: 1;
  --green: #b7d651;
  --green-soft: #cce868;
  --line: rgba(190, 219, 85, .95);
  --white: #f7f8f4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #020304; color: var(--white); }
body { overflow: hidden; }
.stage-shell {
  width: 100vw; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #020304;
}
.stage-fit { width: calc(1366px * var(--scale)); height: calc(768px * var(--scale)); position: relative; flex: 0 0 auto; }
.reproduction-stage {
  position: relative; width: 1366px; height: 768px; overflow: hidden; transform: scale(var(--scale)); transform-origin: top left;
}
.reproduction-stage__bg {
  position: absolute; inset: 0; background: url('./assets/reproduccion-bg.png') center center / cover no-repeat;
}
.navbar {
  position: absolute; left: 12px; right: 12px; top: 8px; height: 58px; z-index: 20;
  display: grid; grid-template-columns: 220px 1fr 120px; align-items: center; padding: 0 28px;
  border: 1px solid rgba(190, 219, 85, .4); border-radius: 23px; background: rgba(0,0,0,.28); backdrop-filter: blur(6px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.brand__logo { width: 44px; height: 44px; object-fit: contain; filter: grayscale(1) contrast(1.05); }
.brand__text { display: grid; gap: 1px; line-height: .9; font-size: 16px; font-weight: 800; }
.brand__text strong { font-size: 1.18em; letter-spacing: .02em; }
.menu { justify-self: center; display: flex; gap: 48px; align-items: center; white-space: nowrap; }
.menu__link { position: relative; height: 58px; display: inline-flex; align-items: center; color: rgba(255,255,255,.86); text-decoration: none; font-size: 15px; font-weight: 650; }
.menu__link:hover, .menu__link.is-active { color: #fff; }
.menu__link::after {
  content: ""; position: absolute; left: 50%; bottom: 13px; width: 0; height: 2px; border-radius: 999px; background: var(--green); transform: translateX(-50%); transition: width .18s ease;
}
.menu__link:hover::after, .menu__link.is-active::after { width: 95px; }
.sound-pill { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 14px; font-weight: 800; }
.sound-pill img { width: 31px; height: 31px; object-fit: contain; }
.reproduction-copy {
  position: absolute; left: 16px; top: 92px; width: 790px; z-index: 12;
}
.reproduction-copy h1 {
  margin: 0 0 8px; color: var(--green-soft); font-size: 29px; line-height: 1.04; font-weight: 900;
}
.reproduction-copy p {
  margin: 0 0 2px; color: rgba(255,255,255,.98); font-size: 11.7px; line-height: 1.28;
}
.reproduction-copy span { color: var(--green-soft); }
.reproduction-nest {
  position: absolute; left: 401px; top: 372px; width: 435px; height: auto; z-index: 10; object-fit: contain;
  opacity: .97; filter: drop-shadow(0 16px 28px rgba(0,0,0,.30)) blur(.45px) saturate(.96);
}
@media (max-width: 520px) {
  .stage-shell { overflow: auto; justify-content: flex-start; align-items: flex-start; }
}


/* Audio interactivo del header */
.sound-pill {
  cursor: pointer;
  user-select: none;
  padding: 4px 7px;
  border-radius: 999px;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}
.sound-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  background: rgba(190, 219, 85, .08);
}
.sound-pill.is-playing {
  background: rgba(190, 219, 85, .12);
  text-shadow: 0 0 12px rgba(190, 219, 85, .45);
}
.sound-pill.is-playing img {
  animation: soundPulse .78s ease-in-out infinite alternate;
}
@keyframes soundPulse {
  from { transform: scale(.94); opacity: .78; }
  to { transform: scale(1.12); opacity: 1; }
}