/* JAPI · Sistema de Diseño Oficial (Tokens & Componentes)
   Basado en design-tokens.json y manual de marca JAPI */

@font-face {
  font-family: "Audiowide";
  src: url("../fonts/Audiowide-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Phenomena";
  src: url("../fonts/Phenomena-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Phenomena";
  src: url("../fonts/Phenomena-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Phenomena";
  src: url("../fonts/Phenomena-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Phenomena";
  src: url("../fonts/Phenomena-Black.otf") format("opentype");
  font-weight: 900;
  font-display: swap;
}

/* "digital display tfb" (Kaiser Zhar Khan) es de uso personal únicamente:
   no se incrusta ni se distribuye con el sitio. Los bloques que la usaban
   caen a Audiowide, la tipografía principal del manual. */

:root {
  --yellow: #fdd20e;
  --yellow-dim: #c9a70b;
  --midnight: #16151d;
  --midnight-2: #1e1d27;
  --midnight-3: #2a2836;
  --line: rgba(253, 210, 14, 0.18);
  --text: #f4f2ee;
  --text-dim: #9d9aab;
  --text-muted: #c4c1cf;
  --youtube: #cc0000;
  --youtube-hover: #a80000;
  --maxw: 1320px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Anclaje suave: cada sección mide exactamente una pantalla (100svh) */
html,
body {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  background: var(--midnight);
  color: var(--text);
  font-family: "Phenomena", system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}

#top,
#sesiones,
#familia,
.snap-block,
#contacto {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  height: 100svh;
  min-height: clamp(620px, 100svh, 1200px);
  box-sizing: border-box;
}

/* Sesiones se ancla 85px mas abajo (deja ver la manilla oscura). Su altura es 100svh - 85px
   (ver index.html) para que la zona de anclaje mida justo una pantalla y solo haya una posicion de reposo. */
#sesiones {
  scroll-margin-top: 85px;
}

footer {
  scroll-snap-align: end;
}

/* Bloques de una pantalla dentro de Colectivo */
.snap-block {
  padding-block: clamp(40px, 6vh, 90px);
}

h1, h2, h3 {
  text-wrap: balance;
  font-family: "Audiowide", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0;
}

p {
  text-wrap: pretty;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--yellow);
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* Retícula a 45° del manual, en lento desplazamiento */
.grid45 {
  background-image: repeating-linear-gradient(45deg, rgba(253, 210, 14, 0.06) 0 1px, transparent 1px 74px),
                    repeating-linear-gradient(-45deg, rgba(253, 210, 14, 0.06) 0 1px, transparent 1px 74px);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 148px 0, -148px 0; }
}

/* Luz de club: manchas lumínicas desenfocadas */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.glow-azul {
  background: rgba(46, 108, 255, 0.5);
  animation: floatA 18s ease-in-out infinite alternate;
}
.glow-vino {
  background: rgba(140, 32, 68, 0.55);
  animation: floatB 22s ease-in-out infinite alternate;
}
.glow-yellow {
  background: rgba(253, 210, 14, 0.22);
  animation: floatA 26s ease-in-out infinite alternate-reverse;
}
@keyframes floatA {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(12vw, 8vh) scale(1.25); }
}
@keyframes floatB {
  from { transform: translate(0, 0) scale(1.1); }
  to { transform: translate(-10vw, -6vh) scale(0.9); }
}

/* Haces de escenario detrás del logo */
.beams {
  position: absolute;
  inset: -40%;
  background: repeating-conic-gradient(from 0deg, rgba(253, 210, 14, 0.14) 0deg 3deg, transparent 3deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 62%);
  mask-image: radial-gradient(circle, #000 8%, transparent 62%);
  animation: spin 60s linear infinite;
}
.spin-slow {
  animation: spin 34s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Ondas del aro del logo */
.ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(253, 210, 14, 0.55);
  border-radius: 50%;
  animation: pulse 4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.ring.d2 { animation-delay: 1.33s; }
.ring.d3 { animation-delay: 2.66s; }
@keyframes pulse {
  from { transform: scale(0.72); opacity: 0.9; }
  to { transform: scale(1.5); opacity: 0; }
}

.float {
  animation: bob 7s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Bandas de marquesina */
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee.rev {
  animation-direction: reverse;
  animation-duration: 34s;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
.outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--yellow);
}

/* Manillas de festival cruzadas entre Hero y Sesiones (EXACTAMENTE 2 MANILLAS: 1 amarilla y 1 oscura) */
.wristbands-wrap {
  position: relative;
  height: 190px;
  margin-top: -95px;
  margin-bottom: -95px;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}
.wristband {
  position: absolute;
  left: -6%;
  right: -6%;
  height: 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transform: rotate(var(--r));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.3);
  animation: wave 6s ease-in-out infinite alternate;
}
.wb-yellow {
  background: linear-gradient(180deg, #ffe24d 0%, #fdd20e 42%, #e8bf06 78%, #c9a70b 100%);
}
.wb-dark {
  background: linear-gradient(180deg, #2f2d3d 0%, #1e1d27 45%, #16151d 80%, #0f0e14 100%);
  animation-delay: -3s;
}
/* Trama de tela */
.wristband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.09) 0 1px, rgba(255, 255, 255, 0.05) 1px 2px, transparent 2px 3px),
                    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
/* Acabado satinado */
.wristband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 22%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.08) 70%, rgba(0, 0, 0, 0.28) 100%);
}
.wb-dark::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 22%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.2) 100%);
}
.wristband .marquee {
  position: relative;
  z-index: 1;
}
.wb-dot {
  font-size: 11px;
  opacity: 0.75;
}
/* Costuras */
.wb-stitch {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  bottom: 6px;
  z-index: 4;
  pointer-events: none;
  border-top: 1px dashed rgba(22, 21, 29, 0.38);
  border-bottom: 1px dashed rgba(22, 21, 29, 0.38);
}
.wb-dark .wb-stitch {
  border-color: rgba(253, 210, 14, 0.35);
}
/* Brillo dinámico */
.wb-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: soft-light;
  transform: translateX(-120%);
  animation: sheen 5.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.wb-dark .wb-sheen {
  background: linear-gradient(100deg, rgba(253, 210, 14, 0) 0%, rgba(253, 210, 14, 0.28) 50%, rgba(253, 210, 14, 0) 100%);
  mix-blend-mode: screen;
  animation-delay: -2.7s;
}
@keyframes sheen {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(560%); }
}
@keyframes wave {
  from { transform: rotate(var(--r)) translateY(0); }
  to { transform: rotate(calc(var(--r) * 0.7)) translateY(-4px); }
}

/* Ecualizador */
.eq > span {
  display: block;
  width: 6px;
  background: var(--yellow);
  transform-origin: bottom;
  animation: eq 1.1s ease-in-out infinite;
}
.eq > span:nth-child(2) { animation-delay: 0.2s; }
.eq > span:nth-child(3) { animation-delay: 0.45s; }
.eq > span:nth-child(4) { animation-delay: 0.1s; }
.eq > span:nth-child(5) { animation-delay: 0.6s; }
@keyframes eq {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}
.dot-live {
  animation: blink 1.4s steps(2, start) infinite;
}
@keyframes blink {
  to { visibility: hidden; }
}

/* Botones e Interacciones */
.btn {
  transition: background 0.22s, color 0.22s, transform 0.22s, border-color 0.22s;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  background: var(--yellow);
  color: var(--midnight);
  transform: translateY(-2px);
}
.btn-solid:hover {
  background: transparent;
  color: var(--yellow);
}
.btn-yt {
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
  cursor: pointer;
  text-decoration: none;
}
.btn-yt:hover {
  background: var(--youtube-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(204, 0, 0, 0.5);
}

.btn-carousel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 3px;
  border: 1px solid rgba(253, 210, 14, 0.35);
  background: rgba(22, 21, 29, 0.75);
  color: var(--yellow);
  font-family: 'Audiowide', sans-serif;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-carousel:hover {
  background: var(--yellow);
  color: var(--midnight);
  border-color: var(--yellow);
}

.card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  border-color: var(--yellow);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(253, 210, 14, 0.08);
}
a.dj-link {
  transition: background 0.2s, color 0.2s;
}
a.dj-link:hover {
  background: var(--yellow);
  color: var(--midnight);
}
.row-link {
  transition: background 0.3s, padding 0.3s;
}
.row-link:hover {
  background: rgba(253, 210, 14, 0.06);
  padding-left: 24px;
  color: var(--text);
}
.row-link:hover .row-name {
  color: var(--yellow);
}
.field:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(253, 210, 14, 0.35);
}

/* Sesiones */
.ses-grid > a {
  grid-row: 2;
  transform: rotate(-1.5deg) !important;
}
.ses-grid > div {
  grid-row: 1;
  text-shadow: 0 2px 16px rgba(22, 21, 29, 0.85);
}

/* Video de NUÑEZ: con el cursor encima se endereza, se aclara y suena (el audio va en index.html) */
.ses-grid > a.ses-video {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}
.ses-video-veil,
.ses-video .grid45,
.ses-video-play {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ses-video-play {
  position: relative;
}
.ses-video-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--yellow);
  opacity: 0;
  pointer-events: none;
}
.ses-video-hint {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  z-index: 3;
  font-family: 'Audiowide', sans-serif;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  color: var(--yellow);
  text-shadow: 0 1px 8px #16151d;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.ses-grid > a.ses-video:focus-visible {
  transform: rotate(0deg) scale(1.03) !important;
}
.ses-video:focus-visible .ses-video-veil { opacity: 0.45; }
@media (hover: hover) and (pointer: fine) {
  .ses-grid > a.ses-video:hover {
    transform: rotate(0deg) scale(1.03) !important;
    border-color: var(--yellow) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 44px rgba(253, 210, 14, 0.28) !important;
  }
  .yt-hover.needs-activation:hover .ses-video-hint { opacity: 1; transform: none; }
  .ses-video:hover .ses-video-veil { opacity: 0.25; }
  .ses-video:hover .grid45 { opacity: 0; }
  .ses-video:hover .ses-video-play { transform: scale(1.08); }
  .ses-video:hover .ses-video-play::after { animation: sesPing 1.5s ease-out infinite; }
  .ses-video.is-sounding .ses-video-play { opacity: 0; transform: scale(1.5); }
  .ses-video.is-sounding .eq > span { animation-duration: 0.55s; }
}
/* Video de las tarjetas de Familia: agranda el iframe para dejar fuera el titulo y el logo de YouTube, como NUNEZ */
.dj-clip--video iframe {
  transform: scale(1.4);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dj-clip--video .ses-video-veil { z-index: 1; }
.dj-clip-eq { z-index: 2; }
.dj-clip-eq > span { width: 4px; }
@media (hover: hover) and (pointer: fine) {
  .dj-clip--video:hover iframe { transform: scale(1.46); }
  .dj-clip--video:hover .ses-video-veil { opacity: 0.55; }
  .dj-clip--video.is-sounding .eq > span { animation-duration: 0.55s; }
}
@media (prefers-reduced-motion: reduce) {
  .dj-clip--video:hover iframe { transform: scale(1.4); }
}

@keyframes sesPing {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(1.9); }
}

/* Velo fijo a la izquierda: tapa el borde recortado de la foto mientras gira y se escala */
.ses-veil-left {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, #16151d 0, rgba(22, 21, 29, 0.96) 90px, rgba(22, 21, 29, 0.55) 200px, rgba(22, 21, 29, 0) clamp(300px, 24vw, 460px));
}
@media (max-width: 760px) {
  .ses-veil-left { display: none; }
}

/* Parallax de la bola: --ses va de 0 a 1 */
.ball-parallax {
  transform: translateY(calc((0.5 - var(--ses, 0.5)) * 140px)) rotate(calc((var(--ses, 0.5) - 0.5) * 18deg));
  transition: transform 0.15s linear;
  will-change: transform;
}
.disco-drift {
  animation: discoDrift 11s ease-in-out infinite alternate;
  transform-origin: 70% 50%;
}
@keyframes discoDrift {
  from { transform: scale(1.02) rotate(-4deg); }
  to { transform: scale(1.14) rotate(5deg) translateX(-3%); }
}
.glint {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 200, 0.95) 0%, rgba(253, 210, 14, 0.5) 25%, rgba(253, 210, 14, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: glint 3.8s ease-in-out infinite;
}
.glint.g2 {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  animation-delay: 1.9s;
  animation-duration: 4.6s;
}
.glint.g3 {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  animation-delay: 0.9s;
  animation-duration: 3.2s;
}
@keyframes glint {
  0%, 70%, 100% { opacity: 0; transform: scale(0.4); }
  80% { opacity: 1; transform: scale(1.2); }
  88% { opacity: 0.2; transform: scale(0.8); }
}

/* Kenburns y Grano analógico */
.kenburns {
  animation: kenburns 32s ease-in-out infinite alternate;
  transform-origin: 72% 45%;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}
.grain {
  background-image: url("../img/grano.png");
  background-size: 256px 256px;
  animation: grain 0.9s steps(3) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; }
  33% { background-position: -83px 41px; }
  66% { background-position: 57px -112px; }
  100% { background-position: 0 0; }
}

/* Header Flotante */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
.site-header .bar {
  box-sizing: border-box;
  width: 100%;
  padding: 20px max(clamp(20px, 4vw, 56px), calc((100% - 1320px) / 2 + 56px));
  background: linear-gradient(180deg, rgba(22, 21, 29, 0.55), rgba(22, 21, 29, 0));
  border-bottom: 1px solid rgba(253, 210, 14, 0.1);
  transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.45s,
              border-color 0.45s,
              box-shadow 0.45s,
              backdrop-filter 0.45s;
}
.site-header.is-scrolled .bar {
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(22, 21, 29, 0.86);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: rgba(253, 210, 14, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Menú móvil (Burger & Drawer) */
.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(253, 210, 14, 0.35);
  border-radius: 3px;
  background: rgba(22, 21, 29, 0.5);
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--yellow);
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s, visibility 0s;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(86vw, 380px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--midnight);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.45s;
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.drawer-link {
  transition: color 0.2s, padding 0.3s;
}
.drawer-link:hover {
  color: var(--yellow);
  padding-left: 8px;
}

/* Familia JAPI · String Art */
.string-art .thread {
  stroke-dasharray: calc(var(--len) * 0.42px) calc(var(--len) * 0.58px);
  stroke-dashoffset: 0px;
  animation: flow calc(var(--dur) * 1.9) linear infinite;
  animation-delay: var(--delay);
}
@keyframes flow {
  from { stroke-dashoffset: 0px; }
  to { stroke-dashoffset: calc(var(--len) * -1px); }
}
.string-art {
  animation: artBreath 40s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes artBreath {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1.04) rotate(0.6deg); }
}

/* CARRUSEL DE LA FAMILIA EN ESCRITORIO Y MÓVIL (UNA SOLA FILA PARA CABER EN 100SVH) */
.stagger {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px !important;
  margin: 0 calc(-1 * clamp(20px, 5vw, 64px));
  padding: 6px clamp(20px, 5vw, 64px) 16px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  scroll-behavior: smooth;
}
.stagger::-webkit-scrollbar { display: none; }
.stagger > * {
  flex: 0 0 clamp(260px, 21vw, 310px);
  scroll-snap-align: start;
  scroll-margin-left: clamp(20px, 5vw, 64px);
  margin-top: 0 !important;
}
#familia.in-view .stagger > * {
  animation: peek 1.4s cubic-bezier(0.45, 0, 0.2, 1) 0.5s 2;
}

/* Indicador Desliza del carrusel */
.swipe-hint {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-family: 'Audiowide', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
}
.swipe-track {
  position: relative;
  width: 44px;
  height: 2px;
  background: rgba(253, 210, 14, 0.25);
  overflow: visible;
}
.swipe-arrow {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  animation: swipe 1.6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes swipe {
  0% { left: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 38px; opacity: 0; }
}
@keyframes peek {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(-36px); }
}

/* Secciones nuevas: Unete, Aliados, Eventos, Galeria y Radio */
.sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 64px);
  scroll-margin-top: 60px;
}
.sec-alt { background: #1e1d27; }
.sec-compact { padding-block: clamp(56px, 7vw, 96px); }
.sec-inner { max-width: 1320px; margin: 0 auto; }
.sec-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.sec-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: "Audiowide", sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--yellow);
}
.sec-eyebrow span { flex: 1; height: 1px; background: rgba(253, 210, 14, 0.18); }
.sec-title {
  margin: 0 0 18px;
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  text-wrap: balance;
}
.sec-title-sm { font-size: clamp(26px, 2.8vw, 38px); }
.sec-accent { color: var(--yellow); }
.sec-lead { margin: 0; color: #9d9aab; text-wrap: pretty; }

.reg-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 3.5vw, 38px);
  background: rgba(22, 21, 29, 0.85);
  border: 1px solid rgba(253, 210, 14, 0.18);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.reg-label {
  display: block;
  margin-bottom: 6px;
  font-family: "Audiowide", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9d9aab;
}
.reg-field {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #16151d;
  border: 1px solid #2a2836;
  border-radius: 3px;
  color: #f4f2ee;
  font-family: inherit;
  font-size: 16px;
}
textarea.reg-field { min-height: 100px; resize: vertical; }
.reg-btn {
  display: inline-block;
  padding: 16px 26px;
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: var(--midnight);
  font-family: "Audiowide", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}
.reg-btn-line { align-self: flex-start; background: transparent; color: var(--yellow); }
.reg-note { margin: 0; color: #9d9aab; font-size: 14px; }
.reg-status {
  display: none;
  padding: 10px 12px;
  border: 1px solid var(--yellow);
  border-radius: 3px;
  background: rgba(253, 210, 14, 0.15);
  color: var(--yellow);
  font-size: 14px;
}
.reg-status.is-visible { display: block; }
.reg-status.is-error { border-color: #ff5252; background: rgba(255, 82, 82, 0.15); color: #ff8a80; }

.aliados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(253, 210, 14, 0.18);
  background: rgba(253, 210, 14, 0.18);
}
.aliados li {
  display: flex;
  min-height: clamp(96px, 11vw, 150px);
  background: var(--midnight);
  font-family: "Audiowide", sans-serif;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.1;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}
.aliados img { display: block; width: auto; height: auto; max-width: min(100%, 150px); max-height: 92px; }
.aliados a { display: block; padding: 8px 4px; transition: color 0.25s, opacity 0.25s; }
.aliados a:hover img { opacity: 0.75; }
.aliados a:hover { color: var(--yellow); }

.soon-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 7px 12px;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  font-family: "Audiowide", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.soon-panel { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(253, 210, 14, 0.18); }
.soon-panel p { margin: 16px 0 0; color: #9d9aab; text-wrap: pretty; }
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(18px, 3vw, 32px);
}
.soon-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: clamp(24px, 3.5vw, 44px);
  border: 1px solid rgba(253, 210, 14, 0.18);
  background: #1e1d27;
  scroll-margin-top: 90px;
}
.soon-card .sec-eyebrow, .soon-card .sec-title { margin: 0; }

/* Responsive: el menu de 7 enlaces necesita sitio */
@media (max-width: 1240px) {
  .brand-tag { display: none !important; }
}
@media (max-width: 1060px) {
  .nav-links { display: none !important; }
  .burger { display: block; }
}

/* Responsive: 760px */
@media (max-width: 760px) {
  .snap-block { height: auto; min-height: auto; padding-block: 56px; gap: 28px !important; }
  .colectivo-visual { width: min(100%, 190px) !important; }
  #contacto { height: auto; min-height: auto !important; padding-top: calc(6vw + 48px) !important; padding-bottom: 40px !important; }
  #contacto h2 + p, .contact-list li:nth-child(n + 3) { display: none; }
  .contact-list { margin-top: 14px !important; }
  #contacto > div { gap: 22px !important; }

  .site-header .bar { padding: 14px 18px; }
  .site-header.is-scrolled .bar { padding: 8px 18px; }
  .nav-links { display: none !important; }
  .burger { display: block; }
  .header-booking { padding: 10px 14px !important; }

  .hero-box { height: clamp(640px, 100svh, 880px) !important; }
  .hero-video { top: -40% !important; bottom: auto !important; height: 130% !important; }
  .hero-logo { top: 22% !important; width: 116px !important; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { text-align: center; padding: 13px 16px !important; }
  .veil-x { background: linear-gradient(90deg, rgba(22, 21, 29, 0.35), rgba(22, 21, 29, 0.1)) !important; }
  .veil-y { background: linear-gradient(180deg, rgba(22, 21, 29, 0.55) 0%, rgba(22, 21, 29, 0) 12%, rgba(22, 21, 29, 0) 32%, rgba(22, 21, 29, 0.9) 50%, #16151d 100%) !important; }
  .hero-copy { justify-content: flex-end !important; padding: 24px 20px 120px !important; }
  .hero-copy > div { max-width: none !important; }
  .hero-title { font-size: clamp(28px, 8vw, 38px) !important; }
  .hero-lead { font-size: 15px !important; margin-bottom: 22px !important; }
  .hero-pill { letter-spacing: 0.12em !important; margin-bottom: 16px !important; }

  #sesiones { height: 100svh !important; min-height: 100svh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 90px 20px 24px !important; box-sizing: border-box !important; }
  .ses-veil { background: linear-gradient(90deg, rgba(22, 21, 29, 0.9) 0%, rgba(22, 21, 29, 0.62) 55%, rgba(22, 21, 29, 0.15) 100%), linear-gradient(180deg, rgba(22, 21, 29, 0) 0px, rgba(22, 21, 29, 0) 300px, rgba(22, 21, 29, 0.85) 470px, #16151d 100%) !important; }
  .ball-parallax { left: auto !important; right: -16% !important; top: 96px !important; bottom: auto !important; height: 360px; display: block !important; transform: translateY(calc((0.5 - var(--ses, 0.5)) * 70px)) rotate(calc((var(--ses, 0.5) - 0.5) * 16deg)); }
  .ses-grid { gap: 14px !important; }
  .ses-grid > div h2 { margin-bottom: 10px !important; }
  .ses-grid > div p { font-size: 15px; margin-bottom: 14px !important; }
  .ses-grid > div > div { margin-bottom: 14px !important; }
  .ball-box { height: 100% !important; }
  .ball-box img { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%) !important; mask-image: radial-gradient(closest-side, #000 72%, transparent 100%) !important; }

  #familia { height: 100svh !important; min-height: 100svh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: calc(4vw + 20px) 20px !important; }
  .stagger > * { flex: 0 0 min(78%, 300px); }
}

/* Pantallas bajas (portátiles): altura <= 820px */
@media (max-height: 820px), (max-width: 760px) {
  .contact-form { gap: 12px !important; padding: 22px !important; }
  .contact-form textarea { min-height: 84px !important; }
  .contact-form input, .contact-form textarea { padding: 10px 13px !important; font-size: 16px !important; }
  .contact-list li { padding: 10px 0 !important; }
  #contacto h2 { font-size: clamp(32px, 4vw, 52px) !important; margin-bottom: 14px !important; }
}

@media (max-height: 820px) and (min-width: 761px) {
  #familia { clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%) !important; padding-top: calc(3vw + 16px) !important; padding-bottom: calc(3vw + 16px) !important; }
  #familia .dj-clip { aspect-ratio: 16 / 7 !important; }
  #familia .fam-head { margin-bottom: 18px !important; }
  #familia h2 { margin-bottom: 0 !important; margin-top: 0; }
  #familia h2 + p { display: none; }
  #familia a.dj-link, #familia .stagger article span[style*='dashed'] { min-height: 38px !important; }
  /* Sesiones se detiene 85px mas abajo (manilla): el relleno inferior lo compensa */
  #sesiones { padding-top: 112px !important; padding-bottom: 64px !important; }
}

/* Pantallas bajas (<=800px): Sesiones oculta el parrafo y agranda el video */
@media (max-height: 800px) and (min-width: 761px) {
  .ses-grid > div > p + h2 + p { display: none; }
  .ses-grid > div h2 { margin-bottom: 14px !important; }
  .ses-grid { grid-template-columns: minmax(0, clamp(240px, calc((100svh - 540px) * 1.6), 420px)) !important; }
}

/* Movimiento Reducido */
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .bar { transition: none; }
  html, body { scroll-behavior: auto; }
  .ball-parallax { transform: none !important; }
  .ses-grid > a.ses-video:hover,
  .ses-grid > a.ses-video:focus-visible { transform: rotate(-1.5deg) !important; }
  .ses-video:hover .ses-video-play,
  .ses-video.is-sounding .ses-video-play { transform: none; }
  .ses-video:hover .ses-video-play::after { animation: none; }
  .grid45, .glow, .beams, .spin-slow, .ring, .float, .marquee,
  .eq > span, .dot-live, .sway, .sway-l, .kenburns, .grain,
  .wristband, .wb-sheen, .disco-drift, .glint, .swipe-arrow,
  .stagger > *, .string-art, .string-art .thread {
    animation: none !important;
  }
  .string-art .thread { stroke-dashoffset: 0; }
  .swipe-arrow { left: 28px; opacity: 1; }
  .ring { opacity: 0.35; }
}