/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #000000;
  --bg-2:      #0d1117;
  --bg-3:      #131217;
  --card:      #15141a;
  --ink:       #f5f3ef;
  --ink-mute:  rgba(245, 243, 239, 0.62);
  --ink-dim:   rgba(245, 243, 239, 0.38);
  --accent:    #d97840;
  --accent-2:  #ff8c42;
  --accent-ink: #120a04;
  --line:      rgba(245, 243, 239, 0.12);
  --line-strong: rgba(245, 243, 239, 0.24);

  /* Glow ambiental del hero (ver .ambient-glow-1 más abajo) — naranja fijo
     (mismo rgb que --accent). El hero ya no tiene foto de fondo (se sacó
     del todo, ver comentario en index.html), así que no hay de dónde
     extraer un color real; queda este valor fijo. */
  --hero-glow-rgb: 217, 120, 64;

  /* Tipografía de titulares/cartel. Anton es la elegida — condensada,
     de un solo peso, con buena personalidad para un festival.
     Alternativas por si no convence (las tres son de Google Fonts):
       - Bebas Neue:    --display: "Bebas Neue", "Arial Narrow", sans-serif;
       - Archivo Black: --display: "Archivo Black", "Arial Narrow", sans-serif;
     Para probar una alternativa: 1) cambiar el valor de esta variable,
     2) sumar esa familia al <link> de Google Fonts en index.html (junto
     a Anton/Inter), reemplazando "Anton" por el nombre correspondiente
     (con "+" en vez de espacios, ej. "Bebas+Neue" o "Archivo+Black"). */
  --display: "Anton", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 84px; /* espacio total que ocupa la nav pill flotante (20px de separación superior + 64px de alto), usado para despejar otros elementos (ej. .hero-next-event) */

  /* Sistema de profundidad "premium editorial spatial" — usado en todo el
     sitio EXCEPTO el hero (que ya tiene su propio lenguaje, aprobado y sin
     tocar). Sombras ambientales de dos capas (difusa+ancha / ajustada),
     coherentes con el resto de la paleta oscura del sitio. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .45);
  --elev-2: 0 2px 4px rgba(0, 0, 0, .35), 0 30px 60px -24px rgba(0, 0, 0, .55);
  --elev-hover: 0 4px 8px rgba(0, 0, 0, .4), 0 40px 80px -28px rgba(0, 0, 0, .6);
  --radius-card: 20px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  /* Sin scroll-behavior:smooth acá — es una incompatibilidad conocida con
     GSAP ScrollTrigger (usado en initScrollZoom/initCinematicTransition/
     initSectionParallax): el navegador trata de interpolar el scroll suave
     al mismo tiempo que ScrollTrigger mueve la página, y eso se traduce en
     saltos/trabas. Los scrolls suaves que arma el propio JS del sitio
     (initSmoothAnchors, los dots y flechas de eventos) ya piden
     behavior:"smooth" en cada llamada, así que sacar esto no les afecta. */
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.02; letter-spacing: -0.01em; }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.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;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 6px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   4. Typography
   ============================================================= */
.section-title {
  font-family: "Josefin Sans", var(--sans); /* antes Quicksand 700 (y Fraunces antes de eso) — trazo fino, a tono con el logo */
  font-weight: 500; /* antes 300 (Light) — se leía frágil/genérico sobre foto; 500 da presencia real sin perder la elegancia del trazo de Josefin Sans, sin tener que inflar el tamaño para compensar */
  letter-spacing: -.01em; /* antes positivo (.01em) — con más peso, tracking negativo cierra el título y lo hace sentir más sólido/premium (referencia: Apple, Pacha) */
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); /* vuelve cerca del tamaño original (antes de la compensación por el trazo fino) porque el weight 500 ya aporta la presencia que faltaba */
  line-height: 1.08;
  max-width: 16ch;
}
.section-lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink);
  max-width: 58ch;
  margin-top: 1rem;
}

/* =============================================================
   5. Components
   ============================================================= */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.05rem 2rem; /* proporción más generosa/premium que antes (.95rem 1.6rem) */
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 999px;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .3s var(--ease-out);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--elev-1), 0 8px 20px -12px rgba(217, 120, 64, .35); /* sombra ambiental + un tinte naranja apenas presente, no un glow saturado */
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-hover), 0 14px 28px -12px rgba(217, 120, 64, .4);
  background: var(--accent-2);
}
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: none;
}
.btn-outline:hover {
  background: rgba(217, 120, 64, .1);
  border-color: var(--accent-2);
  color: var(--accent-2);
  transform: translateY(-3px);
}
.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: rgba(217, 120, 64, .08);
}
.btn:active { transform: translateY(-1px); transition-duration: .12s; }

/* Nav */
.nav {
  position: fixed;
  top: 20px;
  left: clamp(16px, 4vw, 36px);
  right: clamp(16px, 4vw, 36px);
  z-index: 100;
  height: 64px;
  display: flex; align-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(245, 243, 239, .14);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, .72);
  border-color: rgba(245, 243, 239, .2);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .6);
}
.nav-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* logo y toggle en columnas iguales (1fr) a los costados garantiza que la del medio (los links) quede centrada respecto al ancho total, sin importar que logo/toggle tengan anchos distintos */
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.7rem;
}
.nav-brand {
  display: flex; align-items: center;
  justify-self: start;
}
.nav-brand img { width: auto; height: 34px; object-fit: contain; }
.nav-links {
  display: none;
  align-items: center;
  justify-self: center;
  gap: 2.1rem;
}
.nav-link {
  position: relative;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  padding: .25rem 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Agrupa el toggle de idioma + el botón hamburguesa a la derecha — antes
   esto (grid-column:3 + justify-self:end) vivía directo en .nav-toggle;
   ahora que hay dos elementos ahí, el grid los trata como una unidad. */
.nav-actions {
  grid-column: 3; /* fijo a la 3ra columna: si .nav-links está en display:none (mobile), el auto-placement lo metería en la 2da (la de los links) y quedaría centrado en vez de a la derecha */
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 243, 239, .18);
  background: rgba(245, 243, 239, .05);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.lang-toggle:hover { background: rgba(245, 243, 239, .1); border-color: rgba(245, 243, 239, .32); }
.lang-toggle-option { color: var(--ink-dim); transition: color .3s var(--ease-out); }
.lang-toggle-option.is-active { color: var(--ink); }
.lang-toggle-sep { color: var(--ink-dim); opacity: .5; }
.nav-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--ease-out), opacity .3s;
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg) translate(4px, 5px); }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translate(4px, -5px); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
.nav-mobile ul { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.nav-mobile a {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 2rem;
}

/* Image slot placeholder */
.img-slot {
  position: relative;
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.img-slot::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(217,120,64,.05), transparent 55%);
}
.img-slot-icon {
  width: 44px; height: 44px;
  opacity: .3;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.img-slot-label {
  position: absolute; bottom: .9rem; left: .9rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
  z-index: 1;
}

/* Reveal — gated behind .js on <html> so content is visible by default
   if JS never runs (see main.js, first inline script in <head>). Por
   defecto (sin valor) es la variante de texto: slide+fade. El stagger
   entre ítems de una misma fila (delay incremental) lo asigna initReveals
   en main.js vía transition-delay inline, no acá. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Variante para elementos dominados por imagen (cards de evento, la
   figura del carrusel) — en vez de deslizarse hacia arriba, aparecen con
   un scale-down sutil (arrancan un poco más grandes y se asientan a su
   tamaño real, como una foto que "enfoca"). Jerarquía de motion distinta
   a la del texto, que sigue con el slide+fade de siempre. La regla más
   específica ".js [data-reveal].is-revealed.event-card" (sección
   Eventos, más abajo) sigue ganando en el estado ya revelado — esto solo
   cambia el punto de partida antes de revelarse. */
.js [data-reveal="media"] {
  transform: scale(1.06);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.js [data-reveal="media"].is-revealed { transform: none; }

/* Atmósfera de fondo (post-hero). Fixed detrás de todo — sigue siendo UN
   solo fondo continuo (var(--bg)), no crea bloques ni costuras nuevas. */
.ambient-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.ambient-glow-1 {
  width: min(60vw, 900px); aspect-ratio: 1;
  top: 55vh; left: -12vw;
  /* Color real de la foto del hero (--hero-glow-rgb, calculado en runtime
     por extractGlowColor en main.js) en vez de naranja fijo. */
  background: radial-gradient(circle, rgba(var(--hero-glow-rgb), .07), transparent 70%);
}
.ambient-glow-2 {
  width: min(50vw, 800px); aspect-ratio: 1;
  top: 165vh; right: -15vw;
  background: radial-gradient(circle, rgba(245, 243, 239, .045), transparent 70%);
}
/* Mesh gradient sutil (referencia: hi-ibiza.com) — manchas de color muy
   difuminadas superpuestas, mismo lenguaje que arriba pero con más puntos
   y nuestra paleta (--accent/--accent-2) para leerse como "degradé" en
   vez de un par de glows sueltos. */
.ambient-glow-3 {
  width: min(46vw, 720px); aspect-ratio: 1;
  top: 8vh; right: -8vw;
  background: radial-gradient(circle, rgba(255, 140, 66, .06), transparent 70%);
}
.ambient-glow-4 {
  width: min(42vw, 680px); aspect-ratio: 1;
  top: 110vh; left: 8vw;
  background: radial-gradient(circle, rgba(217, 120, 64, .05), transparent 70%);
}

/* =============================================================
   6. Sections
   ============================================================= */

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;   /* fallback for browsers/webviews without svh support */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center; /* centra .hero-wordmark */
  overflow: clip;
  isolation: isolate;
}
/* Grano cinematográfico sobre la foto de fondo — SVG de ruido (feTurbulence)
   repetido como textura, mezclado con overlay a opacidad muy baja para que
   se sienta pero no se vea como "ruido" literal. pointer-events:none para
   no tapar clicks de los botones que quedan debajo. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: .045;
  pointer-events: none;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  background: var(--bg); /* fondo sólido — ya no hay foto de respaldo (ver comentario en index.html); esto es lo que se ve mientras el video carga (mobile y desktop), o en su lugar si prefers-reduced-motion está activo */
}

/* Loop de video del hero — corre también en mobile (antes solo desktop). */
.hero-bg-video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
}
.hero-bg-video.is-ready { opacity: 1; }
.hero-bg-video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform-origin: 50% 35%;
  /* Antes este filtro bajaba brillo/saturación (pensado para una foto fija,
     que competía con el texto) — sobre el video, sumado al overlay de
     abajo, quedaba apagado/oscuro para ser la entrada principal del
     sitio. Ahora realza en vez de atenuar. */
  filter: saturate(1.15) contrast(1.08) brightness(1.08);
  transition: opacity 1s ease;
  /* Safari/iOS a veces no aplica bien object-fit:cover en <video> cuando
     hay un filter encima (bug conocido de WebKit) — fuerza su propia capa
     compuesta en GPU para que el recorte se calcule sobre el tamaño ya
     escalado, no sobre el tamaño intrínseco del video. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hero-bg-video-el.is-active { opacity: 1; }
.hero-tint {
  position: absolute; inset: 0; z-index: -2;
  /* Opacidades bajadas (antes .55/.35/.75/.68/.4) — con el video real
     detrás, este tinte tan cargado sumado al filtro de arriba dejaba todo
     apagado. Se mantiene el degradé (abajo/izquierda más oscuro, para que
     el texto/logo sigan legibles) pero más liviano. */
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.2) 35%, rgba(0,0,0,.62) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 38%, transparent 55%),
    radial-gradient(ellipse 42% 32% at 62% 45%, rgba(0,0,0,.26), transparent 72%);
}
/* Mini-tarjeta flotante: próximo evento. Arriba a la derecha del hero. */
/* Píldora horizontal abajo-centro del hero — mismo lenguaje visual que la
   nav flotante (glass + blur + bordes redondeados), pero más angosta. */
.hero-next-event {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5vw, 56px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  max-width: calc(100% - 2.4rem);
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(245, 243, 239, .14);
}
.hero-next-event[hidden] { display: none; }
.hero-next-event-label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
}
.hero-next-event-info {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(245, 243, 239, .14);
  white-space: nowrap;
}
.hero-next-event-date {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--ink);
  font-size: .92rem;
}
.hero-next-event-artist {
  font-size: .8rem;
  color: var(--ink-mute);
}
.hero-next-event-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(245, 243, 239, .14);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  transition: gap .3s var(--ease-out);
}
.hero-next-event-link:hover { gap: .55rem; }
.hero-next-event-link svg { width: 12px; height: 12px; }

/* Lockup 3D del wordmark — antes solo desktop (mobile no tenía video de
   fondo, así que se dejaba sin logo propio); ahora que el video corre
   también en mobile, se muestra en todos los anchos. */
.hero-wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: min(78vw, 640px); /* la imagen ya trae su propio aire (fondo transparente con margen) */
}
.hero-wordmark-lockup {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 720px) {
  .hero-wordmark { width: min(52vw, 640px); } /* más chica en desktop para no dominar excesivamente */
}

/* --- Eventos --- */
.eventos {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.2rem); /* mucho menos aire arriba/abajo que antes */
  /* .event-list se agranda con margin negativo (ver más abajo) para dejar
     lugar al glow de las cards sin recortarlo — ese "sangrado" tiene que
     quedar contenido ACÁ, cerca de la fuente. Antes solo confiaba en
     body{overflow-x:clip}, que en iOS Safari no alcanza a evitar que el
     documento entero quede scrolleable de costado esos px de más — eso
     es lo que corría el hero/video hacia la izquierda dejando un hueco a
     la derecha (la nav no se movía porque es position:fixed). */
  overflow-x: hidden;
}
.eventos-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
  margin-bottom: clamp(3.2rem, 7vw, 5rem); /* más aire hasta las cards */
}
.eventos-head .section-title { margin: 0; }
@media (min-width: 600px) {
  .eventos-head .section-title { max-width: none; white-space: nowrap; }
}
.eventos-head-title-row {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.event-back-top {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.event-back-top.is-visible { display: flex; }
.event-back-top:hover { background: rgba(245, 243, 239, .08); border-color: var(--ink); }
.event-back-top svg { width: 18px; height: 18px; }

/* Fila de cards recta con scroll horizontal — el número de eventos es
   variable (viene del CMS), así que en vez de forzar todo en un grid, la
   fila se extiende y se recorre con los botones de flecha (o swipe/scroll
   nativo, que sigue funcionando igual). */
.event-list-wrap { position: relative; }
.event-list {
  display: flex;
  align-items: stretch;
  gap: 1.1rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Mismo padding/margen en los 4 lados (antes 1rem arriba vs 3rem abajo,
     y a los costados solo var(--gutter) sin espacio extra) — con
     overflow-x:auto, el overflow-y:visible de acá se computa como "auto"
     igual (regla del spec: si un eje no es visible, el otro deja de
     serlo también), así que el glow de hover se recortaba en cualquier
     borde sin suficiente padding: antes arriba, y en la primera/última
     card también a los costados. El padding extra (+3rem) y el margen
     negativo que lo compensa exactamente se cancelan en cuanto al
     POSICIONAMIENTO real de las cards (siguen arrancando en var(--gutter),
     como el resto del sitio) — solo agrandan el área de recorte del
     scroll container para que el glow tenga lugar. */
  padding: 3rem calc(var(--gutter) + 3rem);
  margin: -3rem calc((var(--gutter) + 3rem) * -1);
  /* scroll-snap-align calcula "inicio" contra el padding real de acá —
     con el padding agrandado (arriba) para el glow, el navegador
     recalculaba el snap y auto-corregía el scroll al cargar, dejando la
     primera card corrida/tapada. scroll-padding-inline le dice al snap
     que use SOLO el gutter real (la posición visual de siempre) como
     referencia, ignorando el padding extra que es nada más que espacio
     de recorte para el glow. */
  scroll-padding-inline: calc(var(--gutter) + 3rem);
  scroll-behavior: smooth;
}
.event-list::-webkit-scrollbar { display: none; }

/* Barra de navegación debajo de la fila: dots (uno por evento, uno de
   ellos activo según lo que está a la vista) a la izquierda/centro y las
   flechas agrupadas a la derecha — referencia: Pacha. Los dots se arman
   en JS (initEventScroll, main.js), acá solo el estilo. */
/* Grid de 3 columnas (1fr auto 1fr) en vez de flex — mismo truco que
   .nav-inner: una columna vacía a la izquierda "balancea" el ancho real
   de las flechas a la derecha, así los dots (columna del medio) quedan
   centrados respecto al ANCHO TOTAL de la fila (y por lo tanto alineados
   con "Mostrar todos" debajo, que sí está centrado en el contenedor) —
   con flex:1 en los dots quedaban centrados solo en el espacio que les
   dejaban las flechas, corridos hacia la izquierda del centro real. */
.event-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.2rem, 3vw, 2rem);
}
.event-dots {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem; /* antes .5rem — más separados, como la referencia */
}
.event-dot {
  flex: none; /* evita que el flex lo estire/achique en un eje — el óvalo venía de acá + del padding/line-height por defecto del <button> */
  width: 10px; height: 10px;
  padding: 0;
  line-height: 0;
  border-radius: 50%;
  border: none;
  background: rgba(245, 243, 239, .32);
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.event-dot:hover { background: rgba(245, 243, 239, .55); }
/* Naranja intenso del logo (#fe6600 — mismo que .footer-app-btn, no el
   --accent apagado del resto del sitio) — pedido puntual para este
   control, no para todo el sitio. */
.event-dot.is-active { background: #fe6600; transform: scale(1.35); }

.event-arrows { grid-column: 3; justify-self: end; display: flex; gap: .6rem; }

/* Flechas de scroll — desplazan la fila un ancho de card por click.
   Rellenas con el color de marca (antes ghost/outline) para que se vean
   como botones "reales" agrupados en la barra, no como controles
   flotando sueltos a los costados de la fila. Ocultas en pantallas
   táctiles chicas, donde el swipe nativo alcanza (los dots se quedan).
   Mismo naranja intenso que los dots (#fe6600, el del logo). */
.event-scroll-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: none;
  background: #fe6600;
  color: var(--accent-ink);
  box-shadow: var(--elev-1), 0 8px 20px -12px rgba(254, 102, 0, .4);
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft), opacity .3s var(--ease-out);
}
.event-scroll-btn:hover {
  background: #ff7a1f;
  transform: translateY(-2px);
  box-shadow: var(--elev-hover), 0 12px 24px -12px rgba(254, 102, 0, .45);
}
.event-scroll-btn svg { width: 18px; height: 18px; }
.event-scroll-btn[disabled] { opacity: .35; pointer-events: none; }
@media (max-width: 719px) {
  .event-arrows { display: none; }
}

.event-card {
  /* Variables del sistema de profundidad — el hover se compone en un solo
     transform (ver regla .is-revealed más abajo) para no pisar el
     translateY(36px)→none del sistema de reveal en [data-reveal]. */
  --hover-y: 0px;
  --hover-scale: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 auto;
  width: 260px; /* mobile — pedido explícito de agrandar (antes 220px) */
  /* Sin aspect-ratio en la card entera — la impone .event-card-media (el
     flyer real es 3250×4062, 4:5). El resto de la info va debajo, no
     encima: el flyer tiene que verse completo, sin recortar. .event-list
     tiene align-items:stretch, así que todas las cards de una fila miden
     lo mismo (la más alta) — con esta card en flex-column y el footer con
     margin-top:auto, el botón siempre queda a la misma altura entre
     cards, sin importar cuánta info tenga cada una arriba. */
  padding: .5rem .5rem 0; /* antes .9rem — quedaba demasiado grueso/desparejo, más sutil así, como la referencia */
  border: 1px solid rgba(245, 243, 239, .1);
  border-radius: var(--radius-card);
  background: #000000; /* más oscura que antes (--bg-2 era un poco azulada) */
  box-shadow: var(--elev-1);
  scroll-snap-align: start;
  transition: box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
/* Mayor especificidad que ".js [data-reveal]" (que define su propio
   transform para la animación de entrada) — así el sistema de profundidad
   solo toma el control del transform DESPUÉS de que la card ya se reveló,
   sin pisar la animación de aparición por scroll. IMPORTANTE: como acá se
   redefine la propiedad "transition" entera (no se puede mezclar con la
   de la regla de menor especificidad), tiene que incluir "opacity"
   también — si no, en cuanto se agrega .is-revealed la opacidad salta
   directo a 1 sin transición (ya no hay ninguna regla que la anime) y solo
   queda animando el transform, se ve como que la card "aparece de golpe"
   pero sigue encogiendo sola unos cientos de ms más. */
.js [data-reveal].is-revealed.event-card {
  /* Antes sumaba perspective()+rotateX/Y (tilt 3D según el mouse) acá
     mismo — combinar box-shadow con una rotación 3D es un problema de
     renderizado conocido (el shadow se corta en el plano de la
     transformación, se veía "recto" de un lado en vez de redondeado como
     el resto). Se sacó el tilt para que el glow del hover quede prolijo
     en las 4 esquinas, igual que en .venue-card (que nunca tuvo tilt). */
  transform: translateY(var(--hover-y)) scale(var(--hover-scale));
  transition: opacity .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.event-card:hover {
  --hover-y: -10px;
  --hover-scale: 1.03;
  /* Mismo glow naranja que .venue-card:hover — box-shadow (no un blob de
     imagen de fondo, que era lo que se veía como rectángulo antes) sigue
     el border-radius de la card, así queda un halo prolijo en el borde. */
  border-color: rgba(254, 102, 0, .5);
  box-shadow: var(--elev-hover), 0 0 60px 8px rgba(254, 102, 0, .35);
  z-index: 5;
}

@media (min-width: 720px) {
  .event-card { width: 270px; } /* antes 320px — 15% más chica */
}
@media (min-width: 960px) {
  .event-card { width: 320px; } /* antes 380px — 15% más chica */
}

/* El flyer se ve completo, sin recortar: el contenedor tiene exactamente
   su proporción real (4:5 — 3250×4062px), así que object-fit:cover no
   recorta nada (el ratio del contenedor ya es igual al de la imagen).
   La fecha/estado son la única superposición (chips finos en las
   esquinas); el resto de la info va DEBAJO de la imagen, no encima. */
.event-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  flex: none;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - 8px); /* radio propio, más chico que el de la card — queda "enmarcada" */
  background: var(--bg);
}
.event-card-media .event-card-media-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}
/* La fecha ya no tapa el flyer — es texto plano arriba del título, en el
   panel de info debajo de la imagen (igual que la referencia). */
.event-card-date {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: .3rem;
  font-family: var(--sans);
  text-transform: uppercase;
}
.event-card-date .day {
  font-size: 1rem; /* antes .78rem */
  font-weight: 600;
  color: var(--accent);
}
.event-card-date .month {
  font-size: .82rem; /* antes .68rem */
  letter-spacing: .06em;
  color: var(--ink-mute);
}
.event-card-status {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; /* la card tiene padding propio (.5rem) — esto la mantiene dentro de la imagen */
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(8, 8, 8, .55);
  border: 1px solid rgba(245, 243, 239, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.event-card-body {
  padding: .85rem 0 0; /* horizontal ya lo aporta el padding de .event-card */
}
.event-card-body .event-name {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  line-height: 1.05;
  color: var(--ink);
}
.event-card-body .event-lineup {
  display: block;
  margin-top: .3rem;
  font-size: .66rem;
  color: var(--ink-mute);
  font-family: var(--sans);
  white-space: pre-line; /* respeta los saltos de línea del lineup del CMS */
}

/* Footer / CTA */
.event-card-footer {
  margin-top: auto; /* pega el botón siempre abajo, sin importar cuánto texto tenga el body de arriba */
  padding: .9rem 0 .9rem; /* horizontal ya lo aporta el padding de .event-card */
}
/* Botón principal de cada card — pill oscuro con borde fino, texto
   centrado, sin ícono ni relleno naranja (referencia: Pacha). Mismo
   look para "Comprar entrada" y "Sold out"; el sold-out solo se ve más
   apagado (texto/borde tenues) y sin hover, no es un estilo aparte. */
.event-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 1.05rem 1.5rem;
  border: 1px solid rgba(245, 243, 239, .18);
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  background: rgba(245, 243, 239, .04);
  transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out), transform .4s var(--ease-soft);
}
.event-cta:hover {
  border-color: rgba(245, 243, 239, .32);
  background: rgba(245, 243, 239, .08);
  transform: translateY(-3px);
}
.event-cta:active { transform: translateY(-1px); transition-duration: .12s; }

.event-cta.is-sold-out {
  background: transparent;
  color: var(--ink-dim);
  border-color: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}

/* Buscador/filtro de eventos — tabs de mes + input de texto, misma pill
   glass que el resto del sistema (nav). */
.event-filter {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  max-width: 100%;
  padding: .3rem .3rem .3rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 243, 239, .14);
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.event-filter-tabs { display: flex; align-items: center; gap: .2rem; flex: none; }
.event-filter-tab {
  padding: .4rem .75rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.event-filter-tab:hover { color: var(--ink); }
.event-filter-tab.is-active { background: var(--ink); color: var(--bg); }
.event-filter-sep {
  width: 1px; align-self: stretch;
  margin: .3rem 0;
  background: rgba(245, 243, 239, .14);
  flex: none;
}
.event-filter-icon { width: 14px; height: 14px; color: var(--ink-dim); flex: none; }
.event-filter-input {
  width: 150px;
  flex: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .78rem;
  padding-block: .4rem;
}
.event-filter-input::placeholder { color: var(--ink-dim); }
.event-filter-calendar { width: 15px; height: 15px; color: var(--ink-mute); flex: none; margin-right: .5rem; }
@media (max-width: 599px) {
  /* Dos filas (buscador arriba, tabs de mes abajo) — con border-radius
     999px (pensado para una sola fila) esto quedaba con forma de píldora
     estirada y bultos raros en los costados. Radio más chico (rectángulo
     redondeado normal) + una línea divisoria entre las dos filas en vez
     de eso. */
  .event-filter {
    width: 100%;
    padding: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 22px;
  }
  .event-filter-icon { margin-left: .5rem; }
  .event-filter-input { flex: 1 1 auto; width: auto; }
  .event-filter-calendar { margin-right: .5rem; }
  .event-filter-tabs {
    order: 2;
    flex-basis: 100%;
    justify-content: center;
    margin-top: .5rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(245, 243, 239, .12);
  }
  .event-filter-sep { display: none; }
}

/* Botón "Mostrar todos" — debajo de la fila de cards. Alterna entre el
   scroll horizontal (por defecto) y una lista vertical con todos los
   flyers (ver initEventShowAll en main.js). */
.event-show-all {
  display: block;
  width: fit-content;
  margin: 2.4rem auto 0;
  padding: 1.15rem 2.6rem; /* antes .7rem 1.6rem */
  border-radius: 999px;
  border: 1px solid rgba(245, 243, 239, .16);
  background: rgba(245, 243, 239, .04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .88rem; /* antes .68rem */
  text-align: center;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.event-show-all:hover {
  border-color: rgba(245, 243, 239, .32);
  background: rgba(245, 243, 239, .08);
  transform: translateY(-2px);
}

/* Estado expandido: lista vertical, sin scroll horizontal ni flechas —
   .event-nav es hermano de .event-list-wrap (no hijo), por eso el
   selector de sibling (~) en vez de anidado. */
.event-list-wrap.is-expanded ~ .event-nav { display: none; }
.event-list-wrap.is-expanded .event-list {
  flex-direction: column;
  align-items: center;
  overflow: visible;
  padding: 1rem 0 2rem;
  margin: 0;
}
.event-list-wrap.is-expanded .event-card {
  width: 100%;
  max-width: 420px;
}

/* --- Predio --- */
.predio {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  /* Sin background/border propios — fondo continuo con el resto del sitio. */
}

/* Envoltorio del bloque editorial (imagen + copy), separado de Ubicación
   para que los elementos decorativos no se cuelen en esa otra sub-sección. */
.predio-editorial {
  position: relative;
  overflow: hidden;
}
.predio-deco {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.predio-deco-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--accent);
}
.predio-deco-circle-solid {
  width: 240px; height: 240px;
  top: -70px; left: -70px;
  opacity: .14;
}
.predio-deco-circle-dashed {
  width: 150px; height: 150px;
  bottom: 6%; left: 4%;
  border-style: dashed;
  opacity: .2;
}
.predio-deco-line {
  position: absolute;
  width: 160%;
  height: 1px;
  background: var(--accent);
  opacity: .07;
  transform-origin: left center;
}
.predio-deco-line-1 { top: 15%;  left: -15%; transform: rotate(-16deg); }
.predio-deco-line-2 { bottom: 8%; left: -25%; transform: rotate(-16deg); }


/* Columna única centrada: ícono + título, párrafo, y la card de fotos
   (más chica) debajo — reemplaza el grid imagen/texto de dos columnas
   que tenía esta sección antes. */
.predio-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6rem;
}
.predio-heading {
  display: flex;
  flex-direction: column; /* mobile: ícono arriba, título abajo — así el título wrapeado (2 líneas) se centra solo, sin que el ícono corra el centro visual hacia un lado */
  align-items: center;
  gap: .6rem;
}
.predio-heading-icon {
  width: clamp(48px, 6vw, 72px);
  height: auto;
  flex: none;
  /* El ícono tiene más peso visual abajo (la parte redonda) que arriba (la
     hoja) — centrado por caja contra el título se ve corrido hacia abajo.
     Este pequeño ajuste hacia arriba (relativo a su propia altura, escala
     junto con el ícono) lo alinea ópticamente con el texto. */
  transform: translateY(-8%);
}
.predio-heading .section-title { margin: 0; }
@media (min-width: 600px) {
  .predio-heading { flex-direction: row; gap: .9rem; }
  .predio-heading .section-title { max-width: none; white-space: nowrap; }
}


/* --- Los venues ---
   2 cards anchas (referencia: cards "Vip"/"Dine" de Pacha) — fondo oscuro
   con un halo sutil arriba-izquierda, ícono de marca chico en la esquina,
   logo grande centrado (forzado a blanco vía filter) y el nombre del
   venue debajo. Al hover, un glow naranja "envuelve" el borde de la card
   vía box-shadow (no un blob cuadrado detrás como se probó y se sacó en
   las event-cards — box-shadow sí sigue el border-radius, por eso no se
   ve como un rectángulo). */
.venues { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); }
/* Container más angosto que el resto del sitio solo para esta grilla —
   "achicar" las cards pedido explícitamente (antes usaban el ancho
   completo de var(--container), 1280px). */
.venues .container { max-width: 1080px; }
.venues-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 720px) {
  .venues-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
}
.venue-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  aspect-ratio: 16 / 9;
  padding: 2rem;
  border-radius: 28px;
  border: 1px solid rgba(245, 243, 239, .1);
  background:
    radial-gradient(ellipse 60% 70% at 18% 12%, rgba(245, 243, 239, .07), transparent 65%),
    var(--bg-3);
  box-shadow: var(--elev-1);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.venue-card:hover {
  transform: translateY(-6px);
  border-color: rgba(254, 102, 0, .5);
  box-shadow: var(--elev-hover), 0 0 60px 8px rgba(254, 102, 0, .35);
}
.venue-card-logo {
  width: min(42%, 220px);
  height: auto;
  /* Fuerza cualquier píxel no transparente a blanco puro, por si el
     archivo fuente no viene ya en blanco. */
  filter: brightness(0) invert(1);
}

/* --- Venue panel ---
   <dialog> nativo (showModal en main.js): foco atrapado y Escape gratis
   del navegador. Reseteamos el estilo default del elemento (borde,
   padding, fondo blanco) y el look real vive en .venue-panel-inner. La
   animación de apertura/cierre es una clase .is-open que agrega/saca JS
   (transition de opacity+scale acá abajo) — el navegador no anima
   showModal()/close() por sí solo sin @starting-style. */
.venue-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  max-width: min(90vw, 760px);
  max-height: 88vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--ink);
  overflow: visible;
  opacity: 0;
  transform: scale(.96) translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.venue-panel.is-open { opacity: 1; transform: none; }
.venue-panel::backdrop {
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.venue-panel-inner {
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: var(--elev-2);
}
.venue-panel-close {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245, 243, 239, .3);
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.venue-panel-close:hover { background: rgba(0, 0, 0, .75); border-color: var(--ink); }
.venue-panel-close svg { width: 18px; height: 18px; }
.venue-panel-media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.2rem) clamp(1.5rem, 4vw, 2.2rem) 0;
}
/* Sin aspect-ratio forzado ni object-fit:cover — cada foto se ve en su
   proporción real (Park y Tent son retrato 720×960), no se recorta.
   Mismo border-radius que las cards de video de .experiencia-carousel,
   para que las dos secciones compartan el mismo lenguaje de "card". */
.venue-panel-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--elev-1);
}
.venue-panel-body { padding: clamp(1.5rem, 4vw, 2.2rem); }
.venue-panel-title {
  margin: 0 0 .8rem;
  font-family: "Josefin Sans", var(--sans);
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--ink);
}
.venue-panel-copy {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-mute);
}
@media (max-width: 539px) {
  .venue-panel-media { grid-template-columns: 1fr; }
}

/* --- La experiencia ---
   Texto a la izquierda + carrousel de fotos a la derecha (contenido,
   NO full-bleed — ver historial: se probó pineada a pantalla completa y
   se descartó por pedido). El carrousel corre solo, en loop, sin
   controles manuales — initExperiencia() en main.js. */
.experiencia { padding: clamp(3rem, 6vw, 5rem) 0; }
.experiencia-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
@media (min-width: 960px) {
  .experiencia-grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
}
.experiencia-tagline {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.experiencia-copy {
  margin: .8rem 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink-mute);
}
.experiencia-carousel {
  position: relative;
  width: 100%;
  max-width: 400px; /* retrato, no ancho — ver aspect-ratio abajo */
  margin-inline: auto;
  /* Los 4 clips vienen en formato retrato (720×900 a 720×1280) — antes
     esto era 4/3 (paisaje) para fotos, ahora se adapta al video real. */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
  box-shadow: var(--elev-1);
}
.experiencia-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease-soft);
}
.experiencia-slide.is-active { opacity: 1; }
/* Badge circular arriba-izquierda — decorativo (no es un link, no hay
   destino), solo repite el lenguaje visual de la referencia. */
.experiencia-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  /* Vidriado neutro (mismo criterio que .nav) — sin tinte de color, solo
     transparencia + blur, deja ver el video detrás. */
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(245, 243, 239, .18);
  color: var(--ink);
  box-shadow: var(--elev-1);
}
.experiencia-badge svg { width: 20px; height: 20px; }
/* Panel de caption — cruza junto con su video (mismo mecanismo is-active
   por opacity). Despegado de los bordes de la card, como en la
   referencia, no pegado a los 4 lados. Mismo vidriado que el badge, así
   se sigue viendo el video de fondo detrás del texto. */
.experiencia-caption {
  position: absolute;
  z-index: 2;
  left: 1rem; right: 1rem; bottom: 1rem;
  padding: 1.1rem 1.3rem 1.3rem;
  border-radius: calc(var(--radius-card) - 8px);
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(245, 243, 239, .18);
  opacity: 0;
  transition: opacity 1s var(--ease-soft);
}
.experiencia-caption.is-active { opacity: 1; }
.experiencia-caption-title {
  margin: 0 0 .35rem;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.15rem;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.experiencia-caption-copy {
  margin: 0;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* --- Footer ---
   Card redondeada en las 4 esquinas, separada del resto del contenido con
   un margen chico — se comporta como un footer "real" flotando sobre el
   fondo continuo, no como una sección más pegada al resto. */
.site-footer { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.footer-card {
  position: relative;
  overflow: hidden;
  margin: 0 var(--gutter) clamp(1rem, 3vw, 1.5rem);
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--elev-2);
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) clamp(2rem, 4vw, 2.5rem);
}
.footer-col-title {
  margin-bottom: 1.1rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-col-title-spaced { margin-top: 2rem; }
/* Mismo naranja intenso que ya se probó y aprobó para este botón — igual
   al del logo, no al --accent (más apagado) del resto del sitio. */
.footer-app-btn {
  padding: .8rem 1.3rem;
  font-size: .82rem;
  background: #fe6600;
  box-shadow: var(--elev-1), 0 8px 20px -12px rgba(254, 102, 0, .45);
}
.footer-app-btn:hover { background: #ff7a1f; }
.footer-app-btn img { width: 16px; height: 16px; object-fit: contain; display: block; }

/* Columna 1: marca */
.footer-brand { display: inline-flex; align-items: center; gap: .7rem; }
/* Antes width:40px + height:40px forzaba un cuadrado — logo-icon.png es
   1536×1024 (relación 3:2), así que quedaba aplastado verticalmente. Con
   solo la altura fija y width:auto, el navegador respeta la proporción
   real de la imagen (mismo criterio que .nav-brand img). */
.footer-brand img { width: auto; height: 40px; display: block; }
.footer-brand-text {
  font-family: "Josefin Sans", var(--sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.2;
  font-size: 1rem;
  color: var(--ink);
}
.footer-blurb {
  margin-top: 1rem;
  max-width: 30ch;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* Columna 2: navegación */
.footer-nav { display: flex; flex-direction: column; gap: .85rem; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: var(--ink-mute);
  transition: color .3s var(--ease-out);
}
.footer-nav a:hover { color: var(--ink); }
.footer-nav a svg {
  width: 12px; height: 12px;
  color: var(--accent);
  transition: transform .3s var(--ease-out);
}
.footer-nav a:hover svg { transform: translate(2px, -2px); }

/* Columna 3: redes */
.footer-social { display: flex; align-items: center; gap: .8rem; }
.footer-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .4s var(--ease-soft);
}
.footer-icon:hover { border-color: var(--accent); background: rgba(217, 120, 64, .1); transform: translateY(-2px); }
.footer-icon svg { width: 16px; height: 16px; }

/* Columna 4: info */
.footer-info { display: flex; flex-direction: column; gap: .9rem; }
.footer-info li { display: flex; align-items: flex-start; gap: .6rem; }
.footer-info svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; color: var(--accent); }
.footer-info span, .footer-info a { font-size: .85rem; line-height: 1.4; color: var(--ink-mute); }
.footer-info a:hover { color: var(--ink); }

/* Línea inferior: copyright a la izquierda, crédito de la agencia a la
   derecha (en mobile, si no entran en una línea, el crédito baja abajo). */
.footer-bottom {
  position: relative;
  z-index: 1;
  padding: 1.4rem var(--gutter);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
}
.footer-copy { font-size: .78rem; color: var(--ink-mute); }
/* Crédito técnico de agencia: más chico y más tenue que el copyright, sin
   color de marca — solo sube a --ink-mute al pasar el mouse. */
.footer-credit {
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(245, 243, 239, 0.38);
  text-decoration: none;
  transition: color .3s var(--ease-out);
}
.footer-credit:hover { color: var(--ink-mute); }

@media (max-width: 719px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   7. Responsive
   ============================================================= */
@media (min-width: 720px) {
  .event-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  /* El hamburguesa se mantiene visible incluso en desktop, a la derecha de
     los links — es un elemento visual más de la composición pill, y ya
     tiene funcionalidad real (abre el mismo menú full-screen que en mobile). */

  .event-list { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
}

@media (max-width: 400px) {
  .nav-brand span { font-size: .74rem; }
}