/* Tipografía. Sora es la gratuita más parecida a MADE Outer Sans: geométrica,
   ancha y con las curvas medio cuadradas. */
:root {
  --font-sans: Sora, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ink: #070707;
  --paper: #f2ede6;
  --muted: #a6a09b;
  --line: rgba(255, 255, 255, 0.16);
  --orange: #ff9d00;
  --violet: #3512c8;
  --edition-accent: #ff9d00;
  --edition-glow: rgba(255, 149, 0, 0.14);
  --edition-glow-strong: rgba(255, 36, 122, 0.35);
  --edition-glow-warm: rgba(255, 145, 0, 0.4);
}

* {
  box-sizing: border-box;
}

/* Varios bloques traen su propio display, así que sin esto el atributo hidden
   que usa agenda.js no alcanzaría para esconderlos. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

body[data-edition-theme="67"] {
  --edition-accent: #8294ff;
  --edition-glow: rgba(74, 96, 255, 0.2);
  --edition-glow-strong: rgba(83, 63, 255, 0.38);
  --edition-glow-warm: rgba(133, 62, 255, 0.34);
}

body[data-edition-theme="68"] {
  --edition-accent: #ff754f;
  --edition-glow: rgba(255, 116, 69, 0.2);
  --edition-glow-strong: rgba(255, 79, 94, 0.38);
  --edition-glow-warm: rgba(255, 178, 57, 0.34);
}

body[data-edition-theme="69"] {
  --edition-accent: #f7c948;
  --edition-glow: rgba(247, 201, 72, 0.2);
  --edition-glow-strong: rgba(217, 58, 38, 0.4);
  --edition-glow-warm: rgba(255, 176, 40, 0.36);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

svg {
  width: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(22px, 4vw, 70px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* La caja tiene la relación exacta del logo recortado (2.384), así que la
   imagen la llena de borde a borde: lo que se ve empieza donde empieza la caja.
   Con el PNG cuadrado sobraban 56px de vacío a cada lado y el logo quedaba
   descentrado respecto del menú de la derecha. */
.brand img {
  width: 62px;
  height: 26px;
  object-fit: contain;
}

.site-header nav {
  display: flex;
  gap: clamp(18px, 3vw, 46px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.site-header nav a {
  opacity: 0.68;
  transition: opacity 180ms ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  opacity: 1;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 23%, rgba(255, 255, 255, 0.16), transparent 26%),
    linear-gradient(180deg, #191817 0%, #080808 62%, #050505 100%);
}

/* Foto de la pista, no un flyer: sirve para cualquier edición y no queda vieja
   cuando pasa la fecha. */
.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("assets/hero.webp");
  background-position: center 24%;
  background-size: cover;
  content: "";
  opacity: 0.16;
  filter: grayscale(1) contrast(1.2);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

.hero-glow {
  position: absolute;
  z-index: -1;
  width: 48vw;
  min-width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--edition-glow);
  filter: blur(100px);
  transition: background 900ms ease;
  animation: breathe 7s ease-in-out infinite alternate;
}

.hero-symbol {
  position: absolute;
  z-index: -1;
  width: min(52vw, 760px);
  opacity: 0.05;
  filter: blur(1px);
}

.hero-content {
  width: min(1120px, calc(100% - 44px));
  padding-top: 86px;
  text-align: center;
}

.hero-kicker,
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Los márgenes descuentan el aire transparente que el PNG cuadrado trae dentro;
   sin eso el bloque se separa de más. Aun así queda respiro real arriba y abajo. */
.hero-wordmark {
  width: min(530px, 76vw);
  height: 220px;
  margin: -2px auto 14px;
  object-fit: contain;
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.7));
}

.hero h1 {
  margin: 0;
  font-size: clamp(38px, 6.3vw, 98px);
  font-weight: 800;
  line-height: 0.91;
  letter-spacing: -0.065em;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #928d87;
}

/* La chapa de fechas la escribe agenda.js; acá se asegura que vaya en caja alta. */
.hero-actions > span {
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 20px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button--light {
  background: var(--paper);
  color: #111;
}

.button--solid {
  background: currentColor;
  color: var(--ink);
}

.button--solid svg {
  color: var(--ink);
}

/* Solo se muestra en el atajo de la pantalla de inicio, donde no hay recargar.
   Abajo a la derecha: el "SCROLL" del hero va a la izquierda. */
.refresh {
  position: fixed;
  z-index: 30;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.7);
  color: var(--paper);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 180ms ease, transform 180ms ease;
}

.refresh:active {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(0.94);
}

.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: clamp(22px, 4vw, 70px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #716d68;
}

.scroll-cue i {
  width: 60px;
  height: 1px;
  background: currentColor;
}

.events {
  padding: 120px clamp(20px, 5vw, 80px);
  background: #070707;
}

.section-heading {
  display: grid;
  max-width: 1400px;
  margin: 0 auto 70px;
  /* La primera columna nunca baja del ancho de su texto: con dos meses la
     etiqueta se partía en dos líneas y quedaba colgando abajo de la base del
     titular. La tercera está vacía y es de donde sale el lugar. */
  grid-template-columns: minmax(max-content, 1fr) 2fr 1fr;
  align-items: end;
  gap: 24px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(52px, 8vw, 122px);
  line-height: 0.82;
  letter-spacing: -0.075em;
  white-space: nowrap;
}

/* Cuando no hay ninguna fecha por delante. */
.agenda-empty {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 0 30px;
  border-top: 1px solid var(--line);
  color: #8d8883;
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.5;
}

.agenda-empty a {
  border-bottom: 1px solid currentColor;
  color: var(--paper);
}

/* --- Preguntas frecuentes -------------------------------------------------
   <details> nativos: abren y cierran sin JavaScript, se manejan con el teclado
   y el buscador del navegador encuentra el texto aunque estén cerradas. */

.faq {
  padding: 120px clamp(20px, 5vw, 80px);
  background: #070707;
}

.faq-list {
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

/* El triangulito que traen los <details> no se puede maquetar: se apaga en
   todos los navegadores y en su lugar va el signo de la derecha. */
.faq-item summary {
  position: relative;
  display: flex;
  padding: clamp(22px, 2.4vw, 30px) 54px clamp(22px, 2.4vw, 30px) 0;
  align-items: center;
  cursor: pointer;
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  list-style: none;
  transition: color 220ms ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  position: absolute;
  right: 0;
  content: "+";
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  transition: transform 260ms cubic-bezier(0.22, 0.68, 0.28, 1), color 220ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--paper);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

@media (hover: hover) {
  .faq-item summary:hover::after {
    color: var(--paper);
  }
}

.faq-item p {
  max-width: 62ch;
  margin: 0;
  padding: 0 54px clamp(24px, 2.4vw, 32px) 0;
  color: #a6a09b;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary,
  .faq-item summary::after {
    transition: none;
  }
}

/* Líneas de aviso: no se ven, pero ocupan un pixel para que el navegador pueda
   decir cuándo aparecen en pantalla. Sus secciones arrancan escondidas, y algo
   escondido nunca llega a aparecer. El resto de sus estilos vive en
   gallery.css y shop.css, y se piden solo si hay algo que mostrar. */
.gallery-anchor,
.shop-anchor {
  height: 1px;
}

/* --- Archivo: las fechas que ya pasaron -----------------------------------
   Chicas y apagadas. Están para dar contexto y mostrar que la fiesta tiene
   historia, no para competirle a la fecha que viene. */

.archive {
  max-width: 1400px;
  margin: clamp(70px, 9vw, 110px) auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.archive-title {
  margin-bottom: clamp(26px, 2.4vw, 34px);
  color: #c8c3bd;
  font-size: clamp(14px, 1.25vw, 16px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.18em;
}

.archive-grid {
  display: flex;
  margin: -8px 0 0;
  padding: 8px 2px 12px;
  gap: clamp(14px, 2vw, 26px);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.archive-grid::-webkit-scrollbar {
  display: none;
}

/* Solo cuando hay algo a lo que correrse: si el archivo entra entero en
   pantalla, la manito sería mentira. */
.archive-grid.is-scrollable {
  cursor: grab;
}

.archive-grid.is-dragging {
  cursor: grabbing;
  /* El imán del snap pelea contra el arrastre y da saltos. */
  scroll-snap-type: none;
}

.archive-item {
  width: clamp(112px, 10vw, 150px);
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.archive-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  appearance: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.archive-link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 5px;
}

/* En reposo los flyers van al 50% de opacidad, saturacion y brillo: se leen,
   pero no compiten. Al pasar el mouse o tocar uno sube a color y luz plenos y
   crece apenas: lo justo para que destaque sin empujar a los de al lado.
   Crece la imagen y no la ficha entera, porque escalar el texto lo empasta. */
.archive-item img {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  object-fit: cover;
  opacity: 0.78;
  filter: saturate(0.35) brightness(0.72);
  transform: scale(1);
  transform-origin: center;
  transition: opacity 340ms ease, filter 340ms ease,
    transform 420ms cubic-bezier(0.22, 0.68, 0.28, 1);
}

.archive-item.is-selected img {
  opacity: 1;
  filter: saturate(1) brightness(1);
  transform: scale(1.045);
}

.archive-item.is-dimmed img {
  opacity: 0.36;
  filter: saturate(0.18) brightness(0.42);
}

/* El hover solo donde hay mouse de verdad: en pantalla táctil se queda pegado
   después de tocar. */
@media (hover: hover) {
  .archive-item:hover img {
    opacity: 1;
    filter: saturate(1);
    transform: scale(1.045);
  }

  .archive-item:hover .archive-label {
    color: var(--paper);
  }
}

.archive-label {
  display: block;
  margin: 9px 0 0;
  transition: color 340ms ease;
  color: #6d6965;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.archive-item.is-selected .archive-label {
  color: var(--paper);
}

.archive-item--more {
  width: clamp(142px, 11vw, 166px);
}

.archive-more {
  display: flex;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: clamp(16px, 1.5vw, 22px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.035);
  color: #d5d0c9;
  font-family: var(--font-mono);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.archive-more strong {
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.12em;
}

.archive-more span {
  font-size: 28px;
  line-height: 1;
}

.archive-more:hover,
.archive-more:focus-visible {
  border-color: var(--paper);
  outline: none;
  background: var(--paper);
  color: var(--ink);
}

/* En pantalla chica la fila se sale del padding de la sección para que el
   flyer siguiente asome contra el borde y se entienda que se puede deslizar. */
@media (max-width: 700px) {
  .archive-grid {
    margin-right: calc(-1 * clamp(20px, 5vw, 80px));
    margin-left: calc(-1 * clamp(20px, 5vw, 80px));
    padding: 8px clamp(20px, 5vw, 80px) 12px;
    gap: 12px;
    scroll-padding-left: clamp(20px, 5vw, 80px);
  }

  .archive-item {
    width: 128px;
  }

  .archive-item--more {
    width: 142px;
  }
}

/* --- Fechas: presentación base (sin JS o con "reducir movimiento") ---------
   Una ficha por fecha, flyer al lado del detalle. El carrusel 3D se monta
   encima de esto; si el script no corre, esto es lo que se ve. */

.event {
  /* Acento por defecto: así una fecha sin modificador de color se ve bien igual
     y no hace falta una clase nueva por edición. */
  --accent: #efe8df;
  display: grid;
  max-width: 1400px;
  min-height: 700px;
  margin: 0 auto 64px;
  grid-template-columns: minmax(300px, 0.86fr) 1.35fr;
  border: 1px solid var(--line);
  overflow: hidden;
}

.event-panel {
  --accent: #efe8df;
}

.event--bone {
  --accent: #efe8df;
  background: #11100f;
}

.event--plasma {
  --accent: #ffac16;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 0, 105, 0.22), transparent 33%),
    #14065d;
}

.event--xray {
  --accent: #cfe6f5;
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 190, 235, 0.16), transparent 42%),
    #06090c;
}

.event--sunset {
  --accent: #ffc98a;
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 138, 40, 0.22), transparent 38%),
    #140b06;
}

.event--vuelta {
  --accent: #a8cdf0;
  background:
    radial-gradient(circle at 20% 6%, rgba(110, 170, 225, 0.2), transparent 40%),
    #070c14;
}

.event--comic {
  --accent: #f7c948;
  background:
    radial-gradient(circle at 50% 6%, rgba(217, 58, 38, 0.28), transparent 40%),
    #120a06;
}

.flyer3d {
  position: relative;
  overflow: hidden;
  background: #0d0d0d;
}

.flyer3d-face {
  position: absolute;
  inset: 0;
}

.flyer3d-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Que arrastrar el flyer mueva la fila y no se lleve la imagen. */
  -webkit-user-drag: none;
  user-select: none;
}

.flyer3d-face--back {
  display: none;
}

.flyer3d-edition {
  position: absolute;
  right: 20px;
  bottom: 14px;
  color: #fff;
  font-size: clamp(52px, 8vw, 112px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.08em;
  mix-blend-mode: difference;
}

.event-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 6vw, 94px);
}

/* El panel lleva su propio acento: el carrusel lo saca de la ficha y tiene que
   seguir pintando igual. */
.event-panel--bone {
  --accent: #efe8df;
}

.event-panel--plasma {
  --accent: #ffac16;
}

.event-panel--xray {
  --accent: #cfe6f5;
}

.event-panel--sunset {
  --accent: #ffc98a;
}

.event-panel--vuelta {
  --accent: #a8cdf0;
}

.event-panel--comic {
  --accent: #f7c948;
}

/* Cuando el flyer trae line-up pero no horarios por DJ, la columna de la hora
   sobra y los nombres van solos. */
.schedule--lineup .schedule-row {
  grid-template-columns: 1fr;
}

.event-panel .eyebrow,
.event-meta,
.event-place,
.free-entry,
.schedule-row span {
  color: var(--accent);
}

.event-panel h3 {
  max-width: 700px;
  margin: 18px 0 4px;
  color: var(--accent);
  font-size: clamp(48px, 6.5vw, 104px);
  line-height: 0.88;
  letter-spacing: -0.075em;
}

.event-meta {
  margin: 14px 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* La dirección es de cada edición, no del sitio: va acá adentro. */
.event-place {
  margin: 0 0 38px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.5;
}

.schedule {
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.schedule-row {
  display: grid;
  grid-template-columns: 145px 1fr;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.schedule-row span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.schedule-row strong {
  color: var(--accent);
  font-size: clamp(16px, 2vw, 27px);
  letter-spacing: -0.03em;
}

.event-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 38px;
}

.event-panel .button--solid {
  background: var(--accent);
}

.free-entry {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- Carrusel 3D de flyers -------------------------------------------------
   Tambor horizontal con inercia: los flyers van en fila y se deslizan de
   derecha a izquierda rotando al salir. Parallax con el mouse y grosor real
   hecho apilando capas. El detalle de la fecha no se mueve de lugar, solo
   cambia de contenido. carousel.js agrega .is-3d solo si puede correr; si no,
   queda la lista de arriba. */

.carousel.is-3d {
  display: grid;
  max-width: 1400px;
  margin: 0 auto;
  gap: clamp(26px, 4vw, 54px);
}

.carousel.is-3d .event {
  display: none;
}

.carousel-stage {
  position: relative;
  display: grid;
  height: var(--stage-h, 620px);
  place-items: center;
  /* El flyer que se va rotando tiene que morir en el borde del escenario, no
     encima del texto de la fecha. */
  overflow: hidden;
  perspective: 1350px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

/* Difuminado a los costados para que el corte no se note. */
.carousel-stage::before,
.carousel-stage::after {
  position: absolute;
  z-index: 5;
  top: 0;
  width: clamp(40px, 8vw, 120px);
  height: 100%;
  content: "";
  pointer-events: none;
}

.carousel-stage::before {
  left: 0;
  background: linear-gradient(to right, #070707 10%, transparent);
}

.carousel-stage::after {
  right: 0;
  background: linear-gradient(to left, #070707 10%, transparent);
}

.carousel-stage.is-dragging {
  cursor: grabbing;
}

.carousel-space {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;
}

.carousel.is-3d .flyer3d {
  position: absolute;
  inset: 0;
  width: var(--card-w);
  height: var(--card-h);
  background: none;
  overflow: visible;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
}

.carousel.is-3d .flyer3d-face {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: #0f0f0f;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
  backface-visibility: hidden;
  overflow: hidden;
}

.carousel.is-3d .flyer3d-face--front {
  transform: translateZ(1.5px);
}

/* El tambor gira sobre el eje Y, así que el reverso se espeja en Y. */
.carousel.is-3d .flyer3d-face--back {
  display: block;
  transform: translateZ(-1.5px) rotateY(180deg);
}

/* El reverso es el segundo flyer de la fecha, el de set times. */
.carousel.is-3d .flyer3d-face--back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel.is-3d .carousel-space {
  pointer-events: none;
}

/* Solo el flyer del frente se puede tocar para darlo vuelta. */
.carousel.is-3d .flyer3d.is-front {
  cursor: pointer;
  pointer-events: auto;
}

/* Cantos: capas intermedias que le dan volumen real al flyer. */
.flyer3d-edge {
  position: absolute;
  inset: 0;
  border: 1px solid #74706b;
  border-radius: 16px;
  background: #74706b;
}

/* En 3D se ve el flyer completo y el número ya está impreso arriba: el badge
   solo ensucia el logo de la sala. */
.carousel.is-3d .flyer3d-edition {
  display: none;
}

/* Los detalles de la fecha centrada. Van apilados: solo se ve el activo. */
.carousel-panels {
  display: grid;
}

.carousel-panels > .event-panel {
  padding: 0;
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 400ms ease;
  visibility: hidden;
}

.carousel-panels > .event-panel[data-active] {
  opacity: 1;
  visibility: visible;
}

.carousel-panels .event-panel h3 {
  margin-top: 12px;
  font-size: clamp(34px, 5vw, 64px);
}

.carousel-panels .event-place {
  margin-bottom: 24px;
}

.carousel-panels .event-actions {
  display: grid;
  /* No van mitad y mitad: "+ AÑADIR AL CALENDARIO" es bastante más larga que
     "COMPARTIR", y con columnas iguales se partía en dos líneas en el celular. */
  grid-template-columns: 1.16fr 0.84fr;
  gap: 10px;
  align-items: stretch;
}

.carousel-panels .event-actions > .button {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  /* "+ AÑADIR AL CALENDARIO" es la etiqueta más larga y entra justa en media
     fila: se le recorta el aire lateral para que no se parta en dos. */
  padding: 12px 6px;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.2;
}

.carousel-panels .event-actions > .button--solid,
.carousel-panels .event-actions > .free-entry {
  grid-column: 1 / -1;
}

/* Con lugar de sobra, el detalle va al costado del flyer en vez de abajo: se
   aprovecha el ancho, el flyer puede ser más alto y el texto no queda estirado
   de punta a punta. */
@media (min-width: 1000px) {
  .carousel.is-3d {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    grid-template-rows: 1fr;
    align-items: center;
    column-gap: clamp(30px, 4vw, 72px);
  }

  .carousel-stage {
    grid-row: 1;
    grid-column: 1;
  }

  .carousel-panels {
    grid-row: 1;
    grid-column: 2;
  }

  .carousel-panels .event-panel h3 {
    font-size: clamp(40px, 3.6vw, 66px);
  }

  .carousel-panels .schedule-row {
    grid-template-columns: 120px 1fr;
    padding: 13px 0;
  }

  .carousel-panels .schedule-row strong {
    font-size: clamp(18px, 1.5vw, 24px);
  }
}

.manifesto {
  position: relative;
  display: grid;
  min-height: 760px;
  padding: 120px clamp(22px, 7vw, 120px);
  grid-template-columns: 1.15fr 1.85fr;
  align-items: center;
  gap: clamp(46px, 5vw, 72px) 50px;
  overflow: hidden;
  background: var(--paper);
  color: #0b0b0b;
}

.manifesto-mark {
  font-size: clamp(330px, 46vw, 760px);
  font-weight: 800;
  line-height: 0.7;
  letter-spacing: -0.12em;
  transform: rotate(-7deg) translateX(-10%);
}

.manifesto-copy {
  position: relative;
  z-index: 2;
}

.manifesto-copy h2 {
  margin: 0 0 30px;
  font-size: clamp(54px, 9.5vw, 150px);
  line-height: 0.85;
  letter-spacing: -0.08em;
}

.manifesto-copy > p:last-child {
  max-width: 620px;
  color: #4d4a47;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.6;
}

/* Un solo bloque, como el countdown del hero, pero cada número apoyado
   exactamente sobre su unidad: cada par vive en su propia columna y las dos
   piezas se centran entre sí. Ocupa el ancho completo de la sección porque los
   seis pares no entran en una columna angosta.
   El tamaño del número es el que manda: todo lo demás se mide en em, así el
   bloque entero escala con un solo clamp. */
.manifesto-counter {
  display: flex;
  /* Nunca se parte con la tipografía de la página; si falla la webfont y la
     de reemplazo es más ancha, preferimos que baje de línea antes que se corte
     "SEGUNDOS" contra el overflow de la sección. */
  flex-wrap: wrap;
  align-items: flex-start;
  /* Reparte el aire sobrante entre los pares en vez de dejarlo todo junto al
     margen derecho: el contador queda como una banda de punta a punta. El gap
     es el piso, cuando no sobra nada. */
  justify-content: space-between;
  gap: clamp(4px, 1.6vw, 24px);
  grid-column: 1 / -1;
  align-self: end;
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid #c9c1b8;
  font-family: var(--font-mono);
  font-size: clamp(14px, 4.2vw, 52px);
}

.manifesto-counter > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.29em;
}

.manifesto-counter strong,
.manifesto-counter i {
  font-size: 1em;
  font-weight: 500;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.08em;
  /* El tracking deja aire suelto a la derecha y correría el número medio pixel
     respecto de su palabra: se descuenta para que el centro sea el de la tinta. */
  margin-right: -0.08em;
}

.manifesto-counter i {
  color: #68625d;
}

.manifesto-counter span {
  margin-right: -0.16em;
  font-size: max(8px, 0.23em);
  letter-spacing: 0.16em;
  line-height: 1;
  color: #68625d;
  white-space: nowrap;
}

/* En pantallas muy angostas las palabras ya no pueden achicarse más sin dejar
   de leerse: el aire que se recorta es el del tracking y el de las separaciones.
   El margen negativo siempre acompaña al tracking, si no se corre el centro. */
@media (max-width: 360px) {
  .manifesto-counter {
    gap: 1.2vw;
  }

  .manifesto-counter span {
    margin-right: -0.1em;
    letter-spacing: 0.1em;
  }
}

.social-cta {
  display: flex;
  min-height: 430px;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  padding: 80px clamp(22px, 6vw, 100px);
  background:
    radial-gradient(circle at 75% 50%, var(--edition-glow-strong), transparent 24%),
    radial-gradient(circle at 90% 60%, var(--edition-glow-warm), transparent 30%),
    #190874;
}

.social-cta p {
  /* Que se quede con el ancho sobrante: apretado, el titular se parte en tres
     líneas y una queda corta. */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: clamp(38px, 5.4vw, 84px);
  font-weight: 800;
  /* 0.9 dejaba 0,19px entre la cola del "¿" y la línea siguiente: se tocaban.
     0.95 despeja sin perder el interlineado corto del resto de los titulares. */
  line-height: 0.95;
  letter-spacing: -0.07em;
  /* Reparte las líneas parejas en vez de dejar una sola palabra colgando. */
  text-wrap: balance;
}

/* Instagram, WhatsApp y mail apilados: es donde alguien busca cómo escribir. */
.contact-links {
  display: flex;
  flex: 0 0 auto;
  min-width: 250px;
  flex-direction: column;
}

.social-cta a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  /* El href lleva el mail tal cual; la mayúscula es solo presentación. */
  text-transform: uppercase;
  transition: opacity 180ms ease;
}

.social-cta a:hover,
.social-cta a:focus-visible {
  opacity: 0.65;
}

footer {
  display: grid;
  min-height: 150px;
  padding: 30px clamp(22px, 4vw, 70px);
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #8f8983;
}

footer img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

footer p {
  text-align: center;
}

footer a {
  text-align: right;
}

@keyframes breathe {
  to {
    opacity: 0.45;
    transform: scale(1.18);
  }
}

@media (max-width: 900px) {
  .site-header nav a:nth-child(2) {
    display: none;
  }

  .hero-wordmark {
    height: 170px;
  }

  .section-heading {
    grid-template-columns: 1fr;
  }

  .section-heading h2 {
    order: -1;
  }

  .event {
    grid-template-columns: 1fr;
  }

  .flyer3d {
    height: min(130vw, 760px);
  }

  .manifesto {
    grid-template-columns: 1fr;
  }

  .manifesto-mark {
    position: absolute;
    opacity: 0.08;
  }

  .social-cta {
    flex-direction: column;
    align-items: stretch;
    justify-content: end;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .brand img {
    width: 52px;
    height: 22px;
  }

  .hero-content {
    padding-top: 60px;
  }

  .hero-wordmark {
    width: 88vw;
    height: 150px;
    margin-bottom: 10px;
  }

  .hero h1 {
    font-size: 44px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 14px;
  }

  .events {
    padding-top: 90px;
    padding-bottom: 70px;
  }

  .section-heading {
    margin-bottom: 42px;
  }

  .section-heading h2 {
    font-size: clamp(38px, 11.8vw, 52px);
  }

  .event {
    margin-bottom: 34px;
  }

  .flyer3d {
    height: 142vw;
  }

  .event-panel {
    padding: 34px 22px;
  }

  .event-panel h3 {
    font-size: 52px;
  }

  .schedule-row {
    grid-template-columns: 112px 1fr;
    gap: 10px;
  }

  .event-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .manifesto {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 80px;
  }

  .manifesto-copy h2 {
    font-size: 56px;
  }

  .social-cta {
    min-height: 380px;
  }

  .social-cta a {
    min-width: 0;
  }

  footer {
    grid-template-columns: auto 1fr;
    gap: 20px;
  }

  footer p {
    text-align: right;
  }

  footer a {
    display: none;
  }
}

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

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