/* ZECHE GRUV — estilos del inicio (antes estaban dentro de index.html). */
/* =========================================================
   ZECHE GRUV — PALETA
   Marrón logo:       #4B2509
   Marrón oscuro:     #241105
   Naranja:            #F07800
   Naranja suave:      #F5A623
   Rojo (descuentos):  #D62828
   Beige:              #F0E0C0
   Crema:              #FFF4DC
   ========================================================= */

:root {
  --brown: #4B2509;
  --brown-dark: #241105;
  --brown-mid: #69350B;
  --orange: #F07800;
  --orange-soft: #F5A623;
  --red: #D62828;
  --beige: #F0E0C0;
  --cream: #FFF4DC;
  --muted: #C9A980;

  --border: rgba(240, 224, 192, 0.18);
  --max: 1400px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--brown);
  color: var(--cream);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}

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

button {
  font: inherit;
}

/* ---------- Grain ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.035;
  /* Imagen chica de ruido que se repite (antes era un filtro SVG que el
     navegador recalculaba al tamaño de toda la pantalla). */
  background-image: url("../grain-v1.webp");
  background-size: 200px 200px;
  transform: translateZ(0);
}

/* ---------- Cursor ---------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange-soft);
  pointer-events: none;
  z-index: 200;
  transform: translate3d(-50%, -50%, 0);
  transition: width .2s ease, height .2s ease;
  will-change: transform;
}

@media (max-width: 800px) {
  .cursor {
    display: none;
  }
}

/* ---------- Navigation ---------- */

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: 24px 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: .4s ease;
}

nav.scrolled {
  /* Casi opaco en vez de desenfoque: el blur se recalculaba en cada
     cuadro del scroll. */
  background: rgba(36, 17, 5, .96);
  border-color: var(--border);
}

.nav-mark {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Sol chico: aparece en el nav cuando el sol grande del hero sale del
   viewport (ver IntersectionObserver al final del body), y desaparece
   cuando el sol grande vuelve a estar visible. */
.nav-sun {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0;
  transform: scale(.4) rotate(-25deg);
  filter: drop-shadow(0 0 6px rgba(245,166,35,.55));
  transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}

.nav-sun.is-visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* El sol chico lleva al portal de artistas, pero solo mientras se ve. */
.nav-sun-link {
  display: inline-flex;
  pointer-events: none;
  visibility: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s .4s;
}

.nav-sun-link:has(.nav-sun.is-visible) {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.nav-sun-link:hover { transform: scale(1.25) rotate(20deg); }

.nav-sun-link:focus-visible,
a.zg-sun:focus-visible {
  outline: 2px solid var(--orange-soft);
  outline-offset: 4px;
  border-radius: 50%;
}

.nav-links {
  display: flex;
  gap: 30px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.nav-links a {
  color: var(--beige);
  opacity: .75;
  transition: .25s ease;
}

/* Links del menú ocultos a propósito (gana sobre el display del menú en celular). */
.nav-links a[hidden] { display: none !important; }

.nav-links a:hover {
  color: var(--orange-soft);
  opacity: 1;
}

/* Menú "Oportunidades": al hacer clic deja elegir Camps o Shows y open mic. */
.nav-drop { position: relative; }

.nav-drop-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--beige);
  opacity: .75;
  cursor: pointer;
  transition: .25s ease;
}

.nav-drop-btn:hover,
.nav-drop.is-open .nav-drop-btn {
  color: var(--orange-soft);
  opacity: 1;
}

.nav-drop-caret {
  font-size: 9px;
  transition: transform .25s ease;
}

.nav-drop.is-open .nav-drop-caret { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: -18px;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding: 6px 0;
  background: var(--brown-dark);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility .2s;
}

.nav-drop.is-open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-drop-right .nav-drop-menu { left: auto; right: -18px; }

.nav-drop-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 18px;
  white-space: nowrap;
}

.nav-drop-logo {
  height: 34px;
  width: auto;
  flex: none;
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  max-width: var(--max);
  margin: 0 auto;
  padding: 130px 5vw 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.eyebrow {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--beige);
  opacity: .65;
}

.hero-location {
  text-align: right;
  color: var(--beige);
  opacity: .55;
  font-size: 11px;
  line-height: 1.7;
}

/* ---------- Logo animado: sol giratorio + texto con distorsión líquida ---------- */

@font-face {
  font-family: 'TAN Nimbus';
  src: url('../fonts/TANNIMBUS-latin-v1.woff') format('woff'),
       url('../fonts/TANNIMBUS.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.hero-logo-wrap {
  position: relative;
  /* El tercer término evita que el logo (que es 1:1, así que su alto
     siempre es igual a su ancho) empuje al .hero más allá de la altura
     de pantalla disponible. Sin esto, en laptops con poca altura de
     viewport (ej. MacBook con la barra del navegador ocupando espacio)
     el logo terminaba más alto que el espacio libre y el texto "GRUV"
     quedaba fuera de la vista sin scrollear. 320px ≈ padding vertical
     del .hero + alto de .hero-top + alto de .hero-bottom. max(280px, …)
     evita que se achique de más en viewports muy bajos. */
  width: min(760px, 90vw, max(280px, calc(100svh - 320px)));
  aspect-ratio: 1 / 1;
  margin: auto;
  /* permite que el tamaño del logo escale con este contenedor via cqw */
  container-type: inline-size;
}

/* Contenedor raíz del logo animado. Escala en su totalidad vía
   font-size en cqw (relativo al ancho de .hero-logo-wrap), así que
   no hace falta tocar nada para que sea responsive. */
.zeche-gruv-logo-wrapper {
  /* ---- controles públicos, se pueden sobreescribir por instancia ---- */
  --zg-sun-duration: 26s;      /* período de una vuelta completa */
  --zg-glow-blur: 2.1em;
  --zg-glow-opacity-min: .45;
  --zg-glow-opacity-max: .8;
  --zg-glow-scale-max: 1.12;

  font-size: 6.41cqw;   /* 100cqw / 15.6em = ancho completo del contenedor */
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  animation: zg-enter .9s cubic-bezier(.16,1,.3,1) both;
}

/* ---------- sol (capa de fondo / isotipo) ---------- */
.zg-sun {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12.4em;
  height: 12.4em;
  transform: translate(-50%, 0);
}

.zg-sun-glow {
  position: absolute;
  inset: -1.4em;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 244, 220, .9) 0%,
    rgba(245, 166, 35, .55) 34%,
    rgba(240, 120, 0, .28) 58%,
    rgba(240, 120, 0, 0) 72%);
  filter: blur(var(--zg-glow-blur));
  opacity: var(--zg-glow-opacity-min);
  animation: zg-glow-pulse 4.2s ease-in-out infinite;
  /* Importante: no declarar un transform estático acá — este elemento
     ya se anima con transform (scale) via zg-glow-pulse. Mezclar un
     transform estático con uno animado en el mismo elemento puede
     congelar la animación (ver nota en .zg-sun-rotor). will-change
     alcanza como pista de composición GPU. */
  will-change: opacity, transform;
  pointer-events: none;
}

.zg-sun-rotor {
  position: absolute;
  inset: 0;
  animation: zg-spin var(--zg-sun-duration) linear infinite;
  /* NOTA: a propósito no hay `transform` estático (ej. translateZ(0))
     en este selector. Si se combina un transform estático con una
     animación de @keyframes que solo define el estado final (to{...},
     sin from/0%), el navegador usa esa declaración estática como
     fotograma inicial implícito — y si la función es distinta a la
     animada (translateZ vs rotate), interpola por matriz en vez de
     por función, lo cual puede colapsar a una matriz constante y
     "congelar" la rotación visualmente aunque siga "corriendo". */
  will-change: transform;
}

.zg-sun-rotor img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 .25em .4em rgba(0,0,0,.35));
}

/* ---------- wordmark ---------- */
.zg-text {
  position: absolute;
  top: 9.9em;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .82;
  text-align: center;
}

/* Sombreado difuminado suave detrás del texto: lo separa del sol y
   le da contraste para que resalte, sin ningún tipo de movimiento. */
.zg-text::before {
  content: "";
  position: absolute;
  inset: -.5em -1.3em;
  background: radial-gradient(ellipse 60% 55% at 50% 40%,
    rgba(18, 9, 4, .62) 0%,
    rgba(18, 9, 4, .38) 45%,
    rgba(18, 9, 4, 0) 78%);
  filter: blur(.55em);
  z-index: -1;
  pointer-events: none;
}

.zg-text span {
  font-family: 'TAN Nimbus', 'Manrope', ui-serif, Georgia, serif;
  font-size: 4.35em;
  color: var(--orange-soft);
  letter-spacing: .01em;
  display: block;
  position: relative;
  /* Sombras fijas: brillo base + sombra oscura (antes era un filtro). */
  text-shadow: 0 0 .12em rgba(255, 200, 110, .3), 0 .06em .16em rgba(0, 0, 0, .55);
}
/* El pulso del brillo es una copia del texto, transparente, con el
   brillo fuerte: solo se anima su opacidad, que no obliga a repintar. */
.zg-text span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: 0 0 .2em rgba(255, 200, 110, .3), 0 0 .6em rgba(240, 120, 0, .28);
  opacity: 0;
  animation: zg-warm-pulse 12s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
}
.zg-text span + span { margin-top: .04em; }
.zg-text { transition: opacity .45s ease; }
.zg-font-wait .zg-text { opacity: 0; }

@keyframes zg-enter {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes zg-spin {
  to { transform: rotate(360deg); }
}

/* Cuando el logo sale de pantalla se pausan sus animaciones (el brillo
   del texto se redibuja en cada cuadro). Ver el script del logo. */
.zeche-gruv-logo-wrapper.zg-paused .zg-sun-glow,
.zeche-gruv-logo-wrapper.zg-paused .zg-sun-rotor,
.zeche-gruv-logo-wrapper.zg-paused .zg-text span::after { animation-play-state: paused; }

@keyframes zg-glow-pulse {
  0%, 100% { opacity: var(--zg-glow-opacity-min); transform: scale(1); }
  50%      { opacity: var(--zg-glow-opacity-max); transform: scale(var(--zg-glow-scale-max)); }
}

@keyframes zg-warm-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* pausa todo junto — ver script al final del body */
.zeche-gruv-logo-wrapper.is-paused .zg-sun-rotor,
.zeche-gruv-logo-wrapper.is-paused .zg-sun-glow,
.zeche-gruv-logo-wrapper.is-paused .zg-text span::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .zeche-gruv-logo-wrapper { animation: none; opacity: 1; transform: none; }
  .zg-sun-rotor { animation-duration: 120s; }
  .zg-sun-glow, .zg-text span::after { animation: none; }
}

.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}

.hero-description {
  max-width: 390px;
  color: var(--beige);
  opacity: .78;
  font-size: 14px;
  line-height: 1.7;
}

.scroll {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--orange-soft);
}

/* ---------- Sections ---------- */

section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px 5vw;
}

.section-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 18px;
}

.section-title {
  font-size: clamp(48px, 7vw, 100px);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 700;
  margin-bottom: 65px;
}

/* ---------- Latest Release ---------- */

.release {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(300px, 1fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
}

.cover {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 65% 30%, rgba(245,166,35,.95), transparent 16%),
    radial-gradient(circle at 45% 55%, rgba(240,120,0,.65), transparent 35%),
    linear-gradient(135deg, var(--brown-mid), var(--brown-dark));
  border: 1px solid var(--border);
  transform: rotate(-2deg);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}

.cover:hover {
  transform: rotate(0deg) scale(.98);
}

.cover::before,
.cover::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,244,220,.5);
  border-radius: 50%;
}

.cover::before {
  width: 68%;
  aspect-ratio: 1;
  left: 16%;
  top: 16%;
}

.cover::after {
  width: 30%;
  aspect-ratio: 1;
  left: 35%;
  top: 35%;
  box-shadow: 0 0 60px rgba(245,166,35,.35);
}

.cover.has-image {
  background: var(--brown-dark);
}

.cover.has-image::before,
.cover.has-image::after {
  display: none;
}

.release-art img,
.cover.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-code {
  position: absolute;
  left: 24px;
  bottom: 22px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .15em;
}

.release-meta {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--orange-soft);
}

.release-title {
  font-size: clamp(45px, 7vw, 100px);
  line-height: .88;
  letter-spacing: -.07em;
  margin: 16px 0 22px;
}

.release-copy {
  max-width: 500px;
  color: var(--beige);
  opacity: .75;
  line-height: 1.8;
  font-size: 14px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.btn {
  border: 1px solid rgba(240,224,192,.3);
  padding: 13px 17px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cream);
  transition: .3s ease;
}

.btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--cream);
  transform: translateY(-3px);
}

/* ---------- ZG PASS en el inicio: menú, botón flotante y próxima fecha ---------- */
.nav-links a.nav-tickets { color: var(--orange-soft); opacity: 1; }
.nav-links a.nav-tickets:hover { color: var(--cream); }

:root { --promo-h: 0px; }
body.has-promo { --promo-h: calc(46px + env(safe-area-inset-top, 0px)); padding-top: var(--promo-h); }
body.has-promo nav { top: var(--promo-h); }

.promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--promo-h);
  padding: env(safe-area-inset-top, 0px) 4vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--orange);
  color: var(--brown-dark);
  white-space: nowrap;
  overflow: hidden;
  transition: background .25s ease;
}
.promo-bar[hidden] { display: none; }
.promo-bar:hover { background: var(--orange-soft); }
.promo-bar:focus-visible { outline: 2px solid var(--cream); outline-offset: -4px; }
.promo-when { font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.promo-venue { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.promo-venue:empty { display: none; }
.promo-name { font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: var(--cream); }
.promo-lineup { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.promo-cta {
  flex: none;
  padding: 7px 14px;
  background: var(--brown-dark);
  color: var(--cream);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}
@media (max-width: 1180px) { .promo-lineup { display: none; } }
@media (max-width: 640px) {
  .promo-name, .promo-venue { display: none; }
  .promo-bar { justify-content: space-between; gap: 10px; padding-left: 16px; padding-right: 10px; }
  .promo-when { font-size: 10px; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .promo-cta { font-size: 12.5px; padding: 7px 12px; }
}

.next-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: center;
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 30px 32px;
  background: var(--brown-dark);
  border: 1px solid rgba(245, 166, 35, .45);
  position: relative;
  z-index: 1;
}
.next-event[hidden] { display: none; }
.hero-buttons .hero-ticket { border-color: var(--orange-soft); color: var(--orange-soft); }
.hero-buttons .hero-ticket:hover { color: var(--cream); }
.next-event-name { font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; margin: 10px 0 12px; text-wrap: balance; }
.next-event-meta { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-soft); }
.next-event-lineup { display: flex; flex-wrap: wrap; row-gap: 4px; margin-top: 16px; font-size: clamp(17px, 1.8vw, 22px); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
.next-event-lineup b { font-weight: 800; white-space: nowrap; }
.next-event-lineup b:not(:last-child)::after { content: "·"; color: var(--orange-soft); margin: 0 .45em; }
.next-event-text { margin-top: 14px; max-width: 62ch; color: var(--beige); font-size: 15px; line-height: 1.6; }
.next-event-text:empty { display: none; }
.next-event-buy { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.next-event-btn { font-size: 11px; padding: 18px 26px; white-space: nowrap; }
.next-event-note { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.next-event-note:empty { display: none; }
.next-event-mic { font-size: 14px; font-weight: 600; color: #B98AC9; text-align: center; text-decoration: underline; text-underline-offset: 3px; max-width: 260px; line-height: 1.4; align-self: center; }
.next-event-mic:hover { color: var(--cream); }
.next-event-mic[hidden] { display: none; }
@media (max-width: 800px) {
  .next-event { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .next-event-buy { align-items: stretch; }
  .next-event-btn { text-align: center; }
}

/* ---------- Catalogue ---------- */

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.release-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--brown-dark);
  transition: .5s cubic-bezier(.16,1,.3,1);
}

.release-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245,166,35,.55);
}

.release-art {
  position: absolute;
  inset: 0;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}

.release-card:hover .release-art {
  transform: scale(1.08) rotate(2deg);
}

.art-1 {
  background:
    radial-gradient(circle at 50% 45%, var(--orange-soft) 0 7%, transparent 8%),
    repeating-radial-gradient(circle at 50% 45%, transparent 0 12%, rgba(240,120,0,.7) 12.3% 13%, transparent 13.3% 18%),
    var(--brown-dark);
}

.art-2 {
  background:
    linear-gradient(130deg, transparent 0 45%, rgba(245,166,35,.9) 46% 50%, transparent 51%),
    linear-gradient(45deg, var(--brown-mid), var(--brown-dark));
}

.art-3 {
  background:
    radial-gradient(ellipse at 30% 70%, var(--orange) 0 8%, transparent 9%),
    radial-gradient(ellipse at 70% 30%, var(--orange-soft) 0 12%, transparent 13%),
    var(--brown-dark);
}

.card-info {
  position: absolute;
  inset: auto 0 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(36,17,5,.96));
  padding-top: 70px;
}

.card-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.card-meta {
  margin-top: 6px;
  font-family: "DM Mono", monospace;
  color: var(--orange-soft);
  font-size: 8px;
  letter-spacing: .13em;
}

/* ---------- Label ---------- */

.label-section {
  background: var(--brown-dark);
  max-width: none;
  padding-left: max(5vw, calc((100vw - var(--max)) / 2 + 5vw));
  padding-right: max(5vw, calc((100vw - var(--max)) / 2 + 5vw));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.label-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  align-items: end;
}

.label-text {
  color: var(--beige);
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.35;
  letter-spacing: -.035em;
}

.label-side {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  max-width: 430px;
}

/* ---------- Contact ---------- */

.contact {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-title {
  font-size: clamp(65px, 12vw, 170px);
  line-height: .78;
  letter-spacing: -.085em;
  margin-bottom: 50px;
}

.contact-title span {
  display: block;
  margin-left: 13vw;
  color: var(--orange);
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--border);
  padding: 25px 5vw;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: .12em;
}

/* ---------- Release credits ---------- */

.credits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 26px;
}

.credit {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--beige);
  opacity: .8;
  border: 1px solid var(--border);
  padding: 6px 10px;
  transition: .25s ease;
  cursor: pointer;
}

a.credit:hover {
  color: var(--orange-soft);
  border-color: rgba(245,166,35,.55);
  opacity: 1;
}

span.credit {
  cursor: default;
}

/* ---------- Artists ---------- */

.artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 22px 16px;
}

.artist-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.artist-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--brown-dark);
  transition: .35s cubic-bezier(.16,1,.3,1);
}

.artist-card:hover .artist-photo-wrap {
  border-color: rgba(245,166,35,.65);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.artist-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.55) saturate(1.1) contrast(1.05);
  transition: filter .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
  transform: scale(1.01);
}

.artist-card:hover .artist-photo {
  filter: grayscale(0) saturate(1.15);
  transform: scale(1.08);
}

.artist-photo-wrap::after {
  content: "VER PERFIL →";
  font-family: "DM Mono", monospace;
  letter-spacing: .08em;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10%;
  font-size: 10px;
  color: var(--cream);
  background: rgba(36,17,5,.6);
  opacity: 0;
  transition: opacity .3s ease;
}

.artist-card:hover .artist-photo-wrap::after {
  opacity: 1;
}

.artist-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.artists-more {
  grid-column: 1 / -1;
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}

/* ---------- Musical Services ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.service-card {
  border: 1px solid var(--border);
  background: var(--brown-dark);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: .35s cubic-bezier(.16,1,.3,1);
}

.service-card:hover {
  border-color: rgba(245,166,35,.55);
  transform: translateY(-4px);
}

.service-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.service-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.service-price {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--orange-soft);
  white-space: nowrap;
}

.service-note {
  color: var(--beige);
  opacity: .65;
  font-size: 12px;
  line-height: 1.6;
}

.service-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.service-field label {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--beige);
  opacity: .6;
  margin-bottom: 6px;
}

.service-field input,
.service-field select,
.service-field textarea {
  width: 100%;
  background: var(--brown);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  padding: 9px 10px;
}

.service-field textarea {
  resize: vertical;
  min-height: 54px;
}

.service-field input:focus,
.service-field select:focus,
.service-field textarea:focus {
  outline: none;
  border-color: var(--orange-soft);
}

.service-btn {
  align-self: flex-start;
  margin-top: auto;
  border: 1px solid rgba(240,224,192,.3);
  background: none;
  padding: 12px 16px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cream);
  cursor: pointer;
  transition: .3s ease;
}

.service-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--cream);
  transform: translateY(-3px);
}

/* ---------- Spotify preview bar ---------- */

.spotify-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  background: rgba(36,17,5,.97);
  border-top: 1px solid var(--border);
}

.spotify-bar.active {
  transform: translateY(0);
}

.spotify-bar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 5vw;
  display: flex;
  align-items: center;
  gap: 16px;
}

.spotify-bar-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange-soft);
  white-space: nowrap;
  display: none;
}

@media (min-width: 700px) {
  .spotify-bar-label {
    display: block;
  }
}

.spotify-bar-mount {
  flex: 1;
  min-width: 0;
}

.spotify-bar-close {
  border: 1px solid rgba(240,224,192,.3);
  background: none;
  color: var(--cream);
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: .25s ease;
}

.spotify-bar-close:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--cream);
}

/* ---------- Mobile ---------- */

/* Menú hamburguesa: solo se muestra (display) en mobile, ver media
   query más abajo. En desktop queda oculto y .nav-right se ve normal.
   Tiene que ir ANTES del media query: con la misma especificidad,
   gana la regla que aparece después en el archivo. */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-hamburger span {
  width: 16px;
  height: 1.5px;
  background: var(--cream);
  transition: transform .25s ease, opacity .25s ease;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 800px) {
  nav {
    padding: 18px 5vw;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-right {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(36,17,5,.97);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .3s ease;
    pointer-events: none;
  }

  .nav-right.is-open {
    max-height: 70vh;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: 11px;
    padding: 8px 5vw 20px;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    opacity: .85;
  }

  /* En el celu "Oportunidades" se despliega dentro del mismo menú. */
  .nav-drop { width: 100%; }

  .nav-drop-btn {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    opacity: .85;
  }

  .nav-drop-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 0 16px;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav-drop.is-open .nav-drop-menu { display: flex; }

  .nav-drop-menu a { display: flex; justify-content: flex-start; gap: 14px; padding: 9px 0; }

  .lang-select {
    margin: 0 5vw 20px;
  }

  .hero {
    padding-top: 105px;
  }

  .hero-top {
    gap: 30px;
  }

  .hero-location {
    display: none;
  }

  .hero-logo-wrap {
    width: min(420px, 78vw);
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .hero-bottom {
    align-items: start;
    flex-direction: column;
  }

  .scroll {
    display: none;
  }

  section {
    padding-top: 90px;
    padding-bottom: 90px;
  }

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

  /* En el celu, catálogos y artistas van de a 4 por fila: las
     tarjetas quedan chicas, así que el texto se achica y en el
     catálogo solo se muestra el nombre del lanzamiento. */
  .catalogue {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .catalogue .card-info { padding: 22px 6px 6px; }

  .catalogue .card-name {
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .catalogue .card-meta { display: none; }

  .artists-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 10px;
  }

  .artist-name {
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

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

  .label-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  footer {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .release-card:last-child {
    display: block;
  }
}
  
/* =========================================================
   Ampliación: selector de idioma, packages, testimonios,
   reestructuración de "The Label". Ver comentarios inline.
   ========================================================= */

/* ---------- Language selector ---------- */

.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--beige);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 22px 6px 10px;
  cursor: pointer;
  transition: .25s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F0E0C0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
}

.lang-select:hover,
.lang-select:focus {
  border-color: rgba(245,166,35,.55);
  outline: none;
}

.lang-select option {
  background: var(--brown-dark);
  color: var(--cream);
}

@media (max-width: 480px) {
  .lang-select {
    font-size: 8px;
    padding: 5px 18px 5px 8px;
  }
}

/* ---------- Packages (arriba de Servicios) ---------- */

/* Servicios se divide en dos: Desarrollo artístico (los packs) y Servicios individuales. */
.services-subhead {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 700;
  margin-bottom: 22px;
  scroll-margin-top: 110px;
}

#individual-services {
  margin-top: 90px;
  padding-top: 70px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 40px;
  margin-bottom: 12px;
}

.services-alacarte-title {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 18px;
}

.service-desc {
  color: var(--beige);
  opacity: .65;
  font-size: 12.5px;
  line-height: 1.6;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.package-card {
  border: 1px solid var(--border);
  background: var(--brown-dark);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package-custom {
  border-color: rgba(245,166,35,.35);
}

.package-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.package-subtitle {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 4px;
}

.package-price {
  font-family: "DM Mono", monospace;
  font-size: 26px;
  letter-spacing: -.01em;
  color: var(--orange-soft);
  min-height: 1.3em;
  display: flex;
  align-items: center;
}

.package-price span {
  font-size: 12px;
  opacity: .6;
  letter-spacing: .08em;
}

.package-price-placeholder {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--beige);
  opacity: .55;
}

.package-save {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--orange-soft);
  opacity: .85;
  min-height: 1em;
}

.package-extras {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--orange-soft);
}

.package-extras:empty {
  display: none;
}

.package-addons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.package-check-row .pc-price s {
  opacity: .6;
  margin-right: 6px;
}

.package-desc {
  color: var(--beige);
  opacity: .72;
  font-size: 13px;
  line-height: 1.65;
}

.package-cta {
  margin-top: auto;
  text-align: center;
}

.package-toggle {
  display: flex;
  border: 1px solid rgba(245, 166, 35, .55);
  width: 100%;
}

.package-toggle-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  color: var(--beige);
  opacity: .9;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
  font-family: "DM Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 10px;
  cursor: pointer;
  transition: .25s ease;
}

.package-toggle-btn + .package-toggle-btn {
  border-left: 1px solid rgba(245, 166, 35, .55);
}

.package-toggle-save {
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 2px 8px rgba(214,40,40,.35);
  opacity: 1;
  white-space: nowrap;
  animation: save-pop 2.4s ease-in-out infinite;
}

@keyframes save-pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.package-toggle-btn.is-active {
  background: var(--orange-soft);
  color: var(--cream);
  opacity: 1;
}

.package-toggle-btn.is-active .package-toggle-save {
  box-shadow: 0 0 0 1px rgba(255,255,255,.7);
}

@media (prefers-reduced-motion: reduce) {
  .package-toggle-save {
    animation: none;
  }
}

.package-custom-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 2px;
  margin: 2px 0;
  max-height: 260px;
  overflow-y: auto;
}

.package-custom-list[hidden] {
  display: none;
}

/* Personalizado: cada servicio con su cantidad (− n +). */
.package-custom-list { max-height: 340px; gap: 0; padding: 4px 2px; }

.package-qty-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 12.5px;
  color: var(--beige);
}

.package-qty-row + .package-qty-row { border-top: 1px solid rgba(240, 224, 192, .09); }

.package-qty-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: .8;
  transition: opacity .2s ease;
}

.package-qty-info .pc-price {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}

.package-qty-row.is-picked .package-qty-info { opacity: 1; color: var(--cream); }

.package-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  transition: border-color .2s ease;
}

.package-qty-row.is-picked .package-qty { border-color: rgba(245, 166, 35, .7); }

.package-qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: var(--cream);
  font-family: "DM Mono", monospace;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.package-qty-btn:hover:not(:disabled) { background: var(--orange-soft); color: var(--brown-dark); }
.package-qty-btn:disabled { opacity: .3; cursor: default; }

.package-qty-value {
  min-width: 26px;
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: var(--beige);
}

.package-qty-row.is-picked .package-qty-value { color: var(--orange-soft); }

/* Beats del catálogo dentro del pack personalizado. */
.package-beats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0 14px;
}

.package-beats[hidden] { display: none; }

.package-beats + .package-qty-row { border-top: 1px solid rgba(240, 224, 192, .09); }

.package-beats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange-soft);
}

.package-beats-head b { color: var(--cream); font-weight: 500; margin-left: 4px; }

.package-beats-link { color: var(--beige); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.package-beats-link:hover { color: var(--orange-soft); }

.package-beats .beat-list { max-height: 150px; }

.custom-beat-item:disabled { opacity: .4; cursor: not-allowed; }

#beat-catalog { scroll-margin-top: 110px; }

.package-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--beige);
  cursor: pointer;
}

.package-check-row input {
  accent-color: var(--orange-soft);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.package-check-row .pc-price {
  margin-left: auto;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.package-check-row:has(input:disabled) {
  opacity: .4;
  cursor: not-allowed;
}

.package-check-row input:disabled {
  cursor: not-allowed;
}

/* ---------- Catálogo de beats (card "Instrumental de catálogo") ---------- */

.beat-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.beat-picker .service-btn {
  margin-top: 0;
  text-decoration: none;
}

.beat-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.beat-panel[hidden] {
  display: none;
}

.beat-search {
  display: flex;
}

.beat-search input {
  flex: 1;
  min-width: 0;
}

.beat-arrow {
  flex-shrink: 0;
  width: 40px;
  border: 1px solid var(--border);
  border-left: none;
  background: var(--brown);
  color: var(--cream);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.beat-arrow svg {
  display: block;
  margin: 0 auto;
  transition: transform .25s ease;
}

.beat-arrow:hover,
.beat-arrow[aria-expanded="true"] {
  background: var(--orange);
  color: var(--cream);
}

.beat-arrow[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.beat-list[hidden] {
  display: none;
}

.beat-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
}

.beat-item {
  flex-shrink: 0;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--beige);
  font-family: "Manrope", sans-serif;
  font-size: 12.5px;
  padding: 9px 10px;
  cursor: pointer;
  transition: background .2s ease;
}

.beat-item:last-child {
  border-bottom: none;
}

.beat-item:hover {
  background: var(--brown);
}

.beat-item.is-active {
  background: var(--orange);
  color: var(--cream);
}

.beat-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--muted);
}

.beat-selected {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--orange-soft);
}

.beat-selected:empty {
  display: none;
}

.package-hint {
  font-size: 11px;
  color: var(--orange-soft);
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity .2s ease;
}

/* Aviso flotante sobre el campo de canciones (rangos de EP / Álbum). */
.service-field:has(.package-popup) { position: relative; }

.package-popup {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  padding: 12px 14px;
  border: 1px solid var(--orange-soft);
  background: var(--brown-dark);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  color: var(--cream);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
  animation: package-popup-in .25s ease;
}

.package-popup strong {
  color: var(--orange);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.package-popup b {
  display: block;
  margin-top: 8px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-soft);
}

@keyframes package-popup-in {
  from { opacity: 0; transform: translateY(-6px); }
}

.package-hint.is-visible {
  opacity: 1;
  height: auto;
}

/* ---------- Includes block ---------- */

.includes-block {
  border: 1px solid var(--border);
  padding: 26px 28px;
  margin-bottom: 60px;
}

.includes-title {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 14px;
}

.includes-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 24px;
}

.includes-list li {
  position: relative;
  padding-left: 18px;
  color: var(--beige);
  opacity: .8;
  font-size: 13px;
  line-height: 1.6;
}

.includes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange-soft);
}

/* ---------- Testimonials ---------- */

.section-intro {
  color: var(--beige);
  opacity: .7;
  font-size: 14px;
  line-height: 1.7;
  max-width: 620px;
  margin-bottom: 50px;
}

.session-intro {
  font-size: 18px;
  line-height: 1.6;
  opacity: .85;
  max-width: 680px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.testimonial-card {
  border: 1px solid var(--border);
  background: var(--brown-dark);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-quote-mark {
  font-family: 'TAN Nimbus', Georgia, serif;
  font-size: 22px;
  color: rgba(245,166,35,.4);
  line-height: 1;
}

.testimonial-text {
  color: var(--beige);
  opacity: .85;
  font-size: 14.5px;
  line-height: 1.7;
  flex: 1;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.testimonial-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(245,166,35,.18);
  color: var(--orange-soft);
  font-family: "DM Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial-name {
  font-size: 13px;
  font-weight: 700;
}

.testimonial-source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.testimonial-stars {
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--orange-soft);
}

.testimonial-source-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--muted);
}

/* ---------- Label: director + studio ---------- */

.label-director {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 70px;
  padding-top: 50px;
  border-top: 1px solid var(--border);
}

.label-director-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 65% 30%, rgba(245,166,35,.45), transparent 55%),
    var(--brown);
  object-fit: cover;
  display: block;
}

.label-director-name {
  font-size: 20px;
  font-weight: 700;
}

.label-director-role {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin: 6px 0 12px;
}

.label-director-bio {
  color: var(--beige);
  opacity: .85;
  font-size: 17px;
  line-height: 1.65;
  max-width: 680px;
}

.label-studio {
  margin-top: 60px;
}

.label-studio-title {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Banner de estudio: tira rectangular deslizable (scroll-snap), en vez
   de una grilla fija de fotos. Cada slide usa object-fit: cover, así
   una foto cuadrada llena bien el rectángulo ancho sin deformarse. */
/* Banner de estudio: UN solo espacio para la foto — se desliza entre
   fotos (swipe/drag o flechas), nunca se ven dos a la vez. */
.studio-banner {
  position: relative;
}

.studio-gallery {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border: 1px solid var(--border);
  background: var(--brown);
}

.studio-gallery::-webkit-scrollbar {
  display: none;
}

.studio-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

/* Las fotos del estudio salieron con luz de día (blancos fríos): se les
   da un tono más cálido para que acompañen la paleta del sitio. */
.studio-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(.26) saturate(1.22) brightness(.97);
}

.studio-photo-placeholder {
  width: 100%;
  height: 100%;
  border: 1px dashed var(--border);
  box-sizing: border-box;
}

.studio-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(240,224,192,.35);
  background: rgba(36,17,5,.55);
  backdrop-filter: blur(4px);
  color: var(--cream);
  font-size: 15px;
  cursor: pointer;
  transition: .25s ease;
}

.studio-nav-btn:hover {
  background: var(--orange-soft);
  border-color: var(--orange-soft);
  color: var(--cream);
}

#studioPrev { left: 12px; }
#studioNext { right: 12px; }

.studio-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}

.studio-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

.studio-dot.is-active {
  background: var(--orange-soft);
  transform: scale(1.25);
}

@media (max-width: 800px) {
  .label-director {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* =========================================================
   Rediseño 2026-09 — portada con foto, sesión, camps y eventos
   ========================================================= */

/* Portada: ocupa todo el ancho para que la foto de fondo llegue a los
   bordes; el contenido sigue alineado al mismo ancho máximo. */
.hero {
  max-width: none;
  padding-left: max(5vw, calc((100vw - var(--max)) / 2 + 5vw));
  padding-right: max(5vw, calc((100vw - var(--max)) / 2 + 5vw));
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  opacity: .32;
  filter: saturate(.9) sepia(.25);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(75,37,9,.15) 0%, rgba(75,37,9,.75) 62%, var(--brown) 100%),
    linear-gradient(180deg, rgba(75,37,9,.55) 0%, rgba(75,37,9,0) 25%, rgba(75,37,9,0) 60%, var(--brown) 100%);
}

.hero-copy {
  max-width: 560px;
}

.hero-title {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 16px;
}

.hero-copy .hero-description {
  max-width: 470px;
}

.hero-buttons {
  margin-top: 24px;
}

.btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--cream);
  font-weight: 500;
}

.btn-primary:hover {
  background: var(--orange-soft);
  border-color: var(--orange-soft);
}

@media (min-width: 801px) {
  .nav-links { gap: 24px; }
}

@media (max-width: 1100px) and (min-width: 801px) {
  .nav-links { gap: 16px; }
}

/* Con "Oportunidades" el menú es más largo: se aprieta un poco antes de pasar a hamburguesa. */
@media (max-width: 960px) and (min-width: 801px) {
  .nav-links { gap: 11px; letter-spacing: .07em; }
}

/* Quiénes somos: los textos ahora tienen párrafos */
.label-side p + p,
.label-director-bio p + p {
  margin-top: 1em;
}

.label-director {
  align-items: flex-start;
}

.label-director-photo {
  width: 160px;
  height: 160px;
}

/* ---------- Cómo es una sesión ---------- */

.session-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.session-card {
  border: 1px solid var(--border);
  background: var(--brown-dark);
  display: flex;
  flex-direction: column;
  transition: border-color .3s ease, transform .3s ease;
}

/* Tarjetas de la sesión: mismo acercamiento que las fotos del camp
   (lo maneja el script de movimiento, solo en computadora). */
.session-card {
  position: relative;
  transform: scale(var(--s, 1));
  filter: brightness(var(--b, 1));
  box-shadow: 0 calc(var(--lift, 0) * 22px) calc(var(--lift, 0) * 50px) rgba(0, 0, 0, calc(var(--lift, 0) * .45));
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), filter .32s ease, box-shadow .32s ease, border-color .3s ease;
}

.session-card:hover {
  border-color: rgba(245,166,35,.45);
}

.session-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--brown);
}

.session-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.session-photo.is-placeholder,
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border-bottom: 1px dashed var(--border);
  background:
    radial-gradient(circle at 70% 30%, rgba(245,166,35,.12), transparent 60%),
    var(--brown);
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.session-card-body {
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.session-num {
  font-family: "DM Mono", monospace;
  font-size: 30px;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 6px;
}

.session-week {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-soft);
}

.session-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.session-text {
  color: var(--beige);
  opacity: .78;
  font-size: 13.5px;
  line-height: 1.7;
}

.session-outro {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 36px;
}

.session-outro p {
  color: var(--beige);
  opacity: .82;
  font-size: 15px;
  line-height: 1.7;
  max-width: 640px;
}

.session-outro .btn {
  flex-shrink: 0;
}

/* ---------- Lanzamientos agrupados (último + elegidos + catálogo) ---------- */

#releases {
  padding-bottom: 70px;
}

.section-sub {
  padding-top: 70px;
  padding-bottom: 70px;
}

#full-catalogue {
  padding-bottom: 140px;
}

/* En PC, artistas, último lanzamiento y catálogos van más compactos:
   menos aire, portada más chica y más tarjetas por fila. */
@media (min-width: 801px) {
  #artists,
  #releases {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  #artists .section-title,
  #releases .section-title,
  #catalogue .section-title,
  #full-catalogue .section-title { margin-bottom: 42px; }

  .artists-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 18px 14px;
  }

  .release {
    grid-template-columns: minmax(240px, 360px) minmax(300px, 1fr);
    gap: clamp(36px, 5vw, 72px);
  }

  .release-title {
    font-size: clamp(40px, 5vw, 72px);
    margin: 12px 0 16px;
  }

  #catalogue,
  #full-catalogue {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  #full-catalogue { padding-bottom: 100px; }

  #catalogue .catalogue,
  #full-catalogue .catalogue {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
  }
}

.section-label-sub {
  color: var(--muted);
}

.section-title-sub {
  font-size: clamp(36px, 4.5vw, 64px);
  margin-bottom: 45px;
}

/* ---------- Camps y eventos ---------- */

.camps-section {
  background: var(--brown-dark);
  max-width: none;
  padding-left: max(5vw, calc((100vw - var(--max)) / 2 + 5vw));
  padding-right: max(5vw, calc((100vw - var(--max)) / 2 + 5vw));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Shows y open mics: mismo recurso que el camp, con su logo como marca de
   agua a la derecha. El borde de arriba queda a la altura de "Eventos". */
.camp-block-events { position: relative; }

.camp-block-events .camp-copy,
.camp-block-events .events-copy {
  position: relative;
  z-index: 1;
}

/* Quiénes tocaron: shows y open mic. */
.events-lineup {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(32px, 5vw, 80px);
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.events-lineup .camp-lineup-list { font-size: clamp(20px, 2.1vw, 29px); }

/* El open mic va más chico que los shows. */
.events-lineup > div:last-child .camp-lineup-list {
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 600;
  letter-spacing: -.02em;
}

.events-lineup + .events-videos { margin-top: 48px; }

.event-video-tag {
  margin-left: auto;
  color: var(--beige);
  opacity: .7;
}

@media (max-width: 800px) {
  .events-lineup {
    grid-template-columns: 1fr;
    margin-top: 36px;
    padding-top: 30px;
  }

  .events-lineup + .events-videos { margin-top: 34px; }
}

/* Videos de los shows: fragmentos en loop mientras se ven. Arrancan sin
   audio; el botón de sonido lo activa de a un video por vez. */
.events-videos {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: 64px;
}

.event-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--brown-dark);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transition: border-color .45s ease, box-shadow .45s ease;
}

.event-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.event-video figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 56px 18px 16px;
  background: linear-gradient(to top, rgba(20, 9, 2, .85), rgba(20, 9, 2, 0));
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}

.event-video figcaption a {
  color: var(--cream);
  text-decoration: none;
  pointer-events: auto;
  transition: color .25s ease;
}

.event-video figcaption a:hover { color: var(--orange-soft); }

.event-video-sound {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(20, 9, 2, .65);
  color: var(--cream);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.event-video-sound:hover { border-color: var(--orange-soft); color: var(--orange-soft); }
.event-video-sound .icon-sound-on,
.event-video-sound[aria-pressed="true"] .icon-sound-off { display: none; }
.event-video-sound[aria-pressed="true"] .icon-sound-on { display: block; }
.event-video-sound[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--brown-dark);
}

@media (hover: hover) {
  .event-video:hover {
    border-color: rgba(245, 166, 35, .45);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  }

  .event-video:hover video { transform: scale(1.04); }
}

@media (max-width: 800px) {
  .events-videos { margin-top: 36px; }
}

/* Cabecera de shows: slogan grande con el logo como marca de agua a la
   derecha, igual que la del camp. */
.events-head {
  grid-column: 1 / -1;
  position: relative;
  margin-bottom: 56px;
}

.events-head .section-title {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.events-logo {
  position: absolute;
  right: 0;
  top: -31px;
  z-index: 0;
  height: calc(100% + 75px);
  width: auto;
  opacity: .7;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 800px) {
  .events-head { margin-bottom: 40px; }

  .events-logo {
    right: -3vw;
    top: 50%;
    transform: translateY(-50%);
    width: 54vw;
    height: auto;
    opacity: .2;
  }
}

/* Título de la sección con el logo del camp como marca de agua a la derecha. */
.camps-head {
  position: relative;
  margin-bottom: 65px;
}

.camps-head .section-title {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

/* El borde de arriba del logo queda a la altura del rótulo "06 / …" y el
   de abajo un poco por debajo del título, sin llegar al texto del camp. */
.camp-logo {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  height: calc(100% + 44px);
  width: auto;
  opacity: .7;
  pointer-events: none;
  user-select: none;
}

/* En el celu queda detrás del título, más tenue, asomando por la derecha. */
@media (max-width: 800px) {
  .camps-head { margin-bottom: 50px; }

  .camp-logo {
    right: -3vw;
    top: 56%;
    transform: translateY(-50%);
    width: 60vw;
    height: auto;
    opacity: .2;
  }
}

.camp-block {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
  align-items: center;
}

.camp-block + .camp-block {
  margin-top: 90px;
  padding-top: 90px;
  border-top: 1px solid var(--border);
}

.camp-block-events {
  align-items: start;
}

.events-copy .camp-text {
  max-width: 620px;
  font-size: 16px;
}

.camp-eyebrow {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 12px;
}

.camp-title {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 700;
  margin-bottom: 18px;
}

.camp-text {
  color: var(--beige);
  opacity: .8;
  font-size: 15px;
  line-height: 1.75;
  max-width: 460px;
}

.camp-block:not(.camp-block-events) .camp-text {
  font-size: 17px;
  line-height: 1.65;
  opacity: .9;
}

.camp-media {
  display: grid;
  gap: 12px;
}

.camp-media-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.camp-media-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 28px; }
.camp-media-4 img:nth-child(even) { --ty: 28px; }

/* Fotos del camp: la que está bajo el mouse se acerca a la pantalla y
   las vecinas acompañan un poco, siguiendo al cursor (efecto "dock"). */
.camp-media-4 img {
  position: relative;
  transform: translateY(var(--ty, 0px)) scale(var(--s, 1));
  transform-origin: center center;
  filter: brightness(var(--b, 1));
  box-shadow: 0 calc(var(--lift, 0) * 26px) calc(var(--lift, 0) * 60px) rgba(0, 0, 0, calc(var(--lift, 0) * .5));
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), filter .32s ease, box-shadow .32s ease;
  will-change: transform;
}
.camp-media-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.camp-media img,
.camp-media .media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}

.camp-media-3 img:nth-child(2) {
  transform: translateY(28px);
}

/* Videos y créditos del camp comparten fila en pantallas anchas, así la
   sección no se hace tan larga. */
.camp-showcase {
  display: grid;
  gap: 44px;
}

@media (min-width: 1000px) {
  .camp-showcase {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: clamp(36px, 4.5vw, 72px);
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--border);
  }

  .camp-showcase .camp-videos {
    max-width: none;
    gap: 16px;
    padding: 6px 0 22px;
  }

  .camp-showcase .camp-video figcaption {
    gap: 7px;
    padding: 40px 10px 12px;
    font-size: 9px;
    letter-spacing: .12em;
  }

  .camp-showcase .camp-video-side:not(:hover) { --ty: 14px; --drift: -18px; }
  .camp-showcase .camp-video-main:not(:hover) { --drift: 10px; }

  .camp-showcase .camp-credits {
    gap: 28px;
    padding-top: 0;
    border-top: 0;
  }

  .camp-showcase .camp-lineup-list {
    font-size: clamp(18px, 1.7vw, 24px);
    gap: .22em .45em;
  }

  .camp-showcase .camp-thanks { gap: 20px 24px; }
  .camp-showcase .camp-thanks dd { font-size: 15px; line-height: 1.5; }
  .camp-showcase .camp-thanks dt { margin-bottom: 8px; }
}

/* Créditos del primer camp: artistas (con link a su página cuando la
   tienen) y los medios y emprendimientos que acompañaron. */
.camp-credits {
  display: grid;
  gap: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--border);
}

.camp-lineup-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .28em .5em;
  margin: 0;
  padding: 0;
  font-size: clamp(21px, 2.5vw, 34px);
  line-height: 1.2;
  letter-spacing: -.04em;
  font-weight: 700;
}

.camp-lineup-list li { display: flex; align-items: baseline; gap: .5em; }

.camp-lineup-list li:not(:last-child)::after {
  content: "·";
  color: var(--orange);
}

.camp-lineup-list a,
.camp-lineup-list span { color: var(--cream); }

.camp-lineup-list a,
.camp-thanks a {
  text-decoration: none;
  background: linear-gradient(var(--orange-soft), var(--orange-soft)) left bottom / 0 1px no-repeat;
  transition: color .25s ease, background-size .35s cubic-bezier(.16, 1, .3, 1);
}

.camp-lineup-list a:hover,
.camp-thanks a:hover {
  color: var(--orange-soft);
  background-size: 100% 1px;
}

.camp-thanks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  margin: 0;
}

.camp-thanks dt {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 10px;
}

.camp-thanks dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--beige);
}

.camp-thanks a { color: var(--cream); }

@media (max-width: 800px) {
  .camp-credits { gap: 34px; padding-top: 34px; }
  .camp-thanks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Videos del camp: el compilado al frente y los otros dos abiertos en
   abanico detrás. Sin audio, en loop mientras están en pantalla. */
.camp-videos {
  --p: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

.camp-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--brown-dark);
  transform: translate(var(--tx, 0%), calc(var(--ty, 0px) + var(--p) * var(--drift, 0px))) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .7s ease, filter .45s ease, box-shadow .45s ease, border-color .45s ease;
  will-change: transform;
}

.camp-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}

.camp-video-main {
  z-index: 2;
  --drift: 16px;
  border-color: rgba(245, 166, 35, .45);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .6), 0 0 70px rgba(240, 120, 0, .14);
}

.camp-video-side {
  z-index: 1;
  --ty: 22px;
  --drift: -30px;
  filter: brightness(.78) saturate(.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.camp-video-l { --rot: -4deg; }
.camp-video-r { --rot: 4deg; }

.camp-video figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 56px 16px 16px;
  background: linear-gradient(to top, rgba(20, 9, 2, .85), rgba(20, 9, 2, 0));
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
  pointer-events: none;
}

.camp-video-num { color: var(--orange-soft); }

.camp-video-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 244, 220, .16);
}

.camp-video-bar i {
  display: block;
  height: 100%;
  background: var(--orange);
  transform-origin: left center;
  transform: scaleX(var(--prog, 0));
}

/* Entrada: salen de atrás del compilado y se abren. */
.camp-videos.is-armed:not(.is-in) .camp-video { opacity: 0; }
.camp-videos.is-armed:not(.is-in) .camp-video-main { --sc: .9; --ty: 40px; }
.camp-videos.is-in .camp-video-side { transition-delay: .12s; }
.camp-videos.is-in .camp-video-r { transition-delay: .2s; }
.camp-videos.is-settled .camp-video { transition-delay: 0s; }

@media (min-width: 801px) {
  .camp-videos.is-armed:not(.is-in) .camp-video-l { --tx: 85%; --rot: 0deg; --sc: .88; }
  .camp-videos.is-armed:not(.is-in) .camp-video-r { --tx: -85%; --rot: 0deg; --sc: .88; }
}

/* Al pasar el mouse el video se agranda bastante (sin llegar a pantalla
   completa), se endereza y pasa al frente. */
@media (hover: hover) and (min-width: 801px) {
  .camp-video:hover {
    --rot: 0deg;
    --sc: 1.8;
    --ty: 0px;
    --drift: 0px;
    z-index: 6;
    filter: none;
    border-color: rgba(245, 166, 35, .55);
    box-shadow: 0 40px 110px rgba(0, 0, 0, .7);
    transition-duration: .55s, .7s, .3s, .3s, .3s;
  }

  .camp-video-l { transform-origin: 25% 50%; }
  .camp-video-r { transform-origin: 75% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .camp-video { transition: none; --drift: 0px; }
}

.camp-media .media-placeholder {
  display: flex;
  border-style: dashed;
}

/* ---------- Servicios / contacto ---------- */

#services .section-title {
  margin-bottom: 26px;
}

#services .section-intro {
  margin-bottom: 50px;
}

.contact-intro {
  color: var(--beige);
  opacity: .82;
  font-size: 16px;
  line-height: 1.7;
  max-width: 520px;
}

.contact-intro + .buttons {
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .session-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .hero-bg img {
    object-position: 35% center;
    opacity: .28;
  }

  .hero-copy {
    max-width: none;
  }

  .camp-block {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .camp-block + .camp-block {
    margin-top: 60px;
    padding-top: 60px;
  }

  .camp-block-events {
    gap: 0;
  }

  .camp-media-3 img:nth-child(2) {
    transform: none;
  }

  .camp-media-4 img:nth-child(even) { --ty: 0px; }

  .camp-media-4 {
    grid-template-columns: repeat(4, 62vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: -5vw;
    padding-right: 5vw;
    padding-bottom: 0;
  }

  .camp-media-4::-webkit-scrollbar { display: none; }

  .camp-media-4 img { scroll-snap-align: start; }

  /* En el celu: carrusel que arranca con el compilado al centro. */
  .camp-videos {
    display: flex;
    gap: 12px;
    max-width: none;
    width: auto;
    margin: 0 -5vw;
    padding: 14px 21vw 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .camp-videos::-webkit-scrollbar { display: none; }

  .camp-video {
    flex: 0 0 58vw;
    scroll-snap-align: center;
    --tx: 0%;
    --rot: 0deg;
    --ty: 0px;
    --drift: 0px;
  }

  .camp-video-side { filter: none; }

  .camp-media-3 {
    grid-template-columns: repeat(3, 62vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: -5vw;
    padding-right: 5vw;
  }

  .camp-media-3::-webkit-scrollbar { display: none; }

  .camp-media-3 img { scroll-snap-align: start; }

  .session-outro {
    flex-direction: column;
    align-items: flex-start;
  }

  .label-director-photo {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 560px) {
  .session-grid {
    grid-template-columns: 1fr;
  }

  .session-photo {
    aspect-ratio: 16 / 9;
  }

  .session-photo.is-placeholder {
    aspect-ratio: 3 / 1;
  }
}

/* ---------- Portada: título a la izquierda, texto y botones a la derecha ---------- */

.hero-logo-wrap {
  width: min(600px, 90vw, max(280px, calc(100svh - 480px)));
  margin-top: 10px;
  margin-bottom: 34px;
}

.hero-bottom {
  align-items: end;
}

.hero-copy {
  max-width: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 12px 60px;
  align-items: end;
}

.hero-title {
  margin-bottom: 0;
  grid-row: span 2;
  align-self: end;
}

.hero-copy .hero-description,
.hero-buttons {
  grid-column: 2;
}

.hero-buttons {
  margin-top: 10px;
}

.hero .scroll {
  display: none;
}

@media (max-width: 800px) {
  .hero-logo-wrap {
    width: min(360px, 70vw);
  }

  .hero-copy {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hero-title { grid-row: auto; }

  .hero-copy .hero-description,
  .hero-buttons { grid-column: 1; }
}

/* ---------- Movimiento con el scroll (sutil) ----------
   - Los textos y tarjetas aparecen con un leve fundido hacia arriba.
   - La foto de portada se desvanece y se acerca apenas al bajar.
   - Un resplandor cálido de fondo cambia de lugar e intensidad según
     la sección.
   - Las secciones oscuras se "encienden" de a poco al entrar.
   Todo se desactiva si la persona pidió reducir el movimiento. */

.ambient {
  position: fixed;
  inset: -20vh -20vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vw 40vw at var(--glow-x, 80%) var(--glow-y, 30%), rgba(240,120,0,.16), transparent 70%),
    radial-gradient(35vw 35vw at calc(100% - var(--glow-x, 80%)) calc(100% - var(--glow-y, 30%)), rgba(245,166,35,.08), transparent 70%);
  opacity: var(--glow-o, .7);
  transition: --glow-x 1.6s ease, --glow-y 1.6s ease, opacity 1.2s ease;
}

@property --glow-x { syntax: "<percentage>"; inherits: true; initial-value: 80%; }
@property --glow-y { syntax: "<percentage>"; inherits: true; initial-value: 30%; }

.hero-bg img {
  transform: scale(calc(1 + var(--hero-p, 0) * .08));
  opacity: calc(.32 * (1 - var(--hero-p, 0)));
  will-change: transform, opacity;
}

.hero-logo-wrap {
  opacity: calc(1 - var(--hero-p, 0) * .55);
  transform: translateY(calc(var(--hero-p, 0) * 40px));
}

.label-section,
.camps-section {
  transition: background-color 1.2s ease, border-color 1.2s ease;
}

.js-motion .label-section:not(.is-lit),
.js-motion .camps-section:not(.is-lit) {
  background-color: rgba(36,17,5,.35);
  border-color: transparent;
}

.js-motion .reveal {
  opacity: 0;
  transform: translateY(22px);
  /* Sin filter: blur. Animar un desenfoque en cada bloque que aparece
     obligaba a redibujarlo cuadro a cuadro mientras se scrollea. */
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0s);
}

.js-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hero-bg img { transform: none; opacity: .32; }
  .hero-logo-wrap { opacity: 1; transform: none; }
  .ambient { transition: none; }
}


/* ---------- Visor de fotos (camp) ----------
   Tocar o hacer clic en una foto la abre grande; en el celular se pasa
   de una a otra deslizando con el dedo. */
/* ---------- Formulario "Vení a conocer el estudio" ---------- */
.visit-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 9, 2, .88);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}

.visit-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.visit-dialog {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 36px 34px 34px;
  background: var(--brown-dark);
  border: 1px solid rgba(245, 166, 35, .4);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  transform: translateY(14px);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.visit-modal.is-open .visit-dialog { transform: none; }

.visit-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--beige);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}

.visit-close:hover { color: var(--orange-soft); }

.visit-title {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 700;
  margin-bottom: 10px;
}

.visit-intro {
  color: var(--beige);
  opacity: .8;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.visit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.visit-hp { position: absolute; left: -9999px; }

.visit-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.visit-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-soft);
}

.visit-field input,
.visit-field textarea {
  width: 100%;
  background: var(--brown);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  padding: 11px 12px;
  border-radius: 0;
}

.visit-field textarea { resize: vertical; min-height: 84px; }

.visit-field input:focus,
.visit-field textarea:focus {
  outline: none;
  border-color: var(--orange-soft);
}

.visit-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--beige);
  cursor: pointer;
}

.visit-check input {
  accent-color: var(--orange-soft);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.visit-submit {
  align-self: flex-start;
  margin-top: 6px;
  cursor: pointer;
}

.visit-submit:disabled { opacity: .6; cursor: progress; }

@media (max-width: 560px) {
  .visit-modal { padding: 10px; align-items: flex-end; }
  .visit-dialog { padding: 30px 20px 24px; max-height: calc(100dvh - 20px); }
  .visit-row { grid-template-columns: 1fr; }
  .visit-submit { align-self: stretch; text-align: center; }
}

.camp-media-4 img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 9, 2, .92);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.lightbox-track::-webkit-scrollbar { display: none; }

.lightbox-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 5vw 60px;
  scroll-snap-align: center;
}

.lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  transform: scale(.94);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.lightbox.is-open .lightbox-slide img { transform: scale(1); }

.lightbox-btn {
  position: absolute;
  border: 1px solid rgba(240,224,192,.3);
  background: rgba(36,17,5,.6);
  color: var(--cream);
  width: 44px;
  height: 44px;
  font-size: 16px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}

.lightbox-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--cream); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 3vw; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 3vw; top: 50%; transform: translateY(-50%); }

.lightbox-count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--beige);
  opacity: .7;
}

@media (max-width: 800px) {
  .lightbox-prev, .lightbox-next { display: none; }
  .lightbox-slide { padding: 64px 12px 56px; }
  .camp-media-4 { grid-template-columns: repeat(4, 74vw); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-slide img { transition: none; }
}

/* ---------- Quiénes somos: título + historia a la izquierda,
   foto del estudio + texto a la derecha (sin huecos) ---------- */
.label-grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 6vw;
  align-items: start;
}

.label-main .section-title {
  margin-bottom: 44px;
}

.label-text {
  font-size: clamp(21px, 2.3vw, 31px);
  line-height: 1.42;
}

.label-aside {
  padding-top: 10px;
}

.label-photo {
  margin: 0 0 30px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--brown);
}

.label-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.label-photo:hover img {
  transform: scale(1.04);
}

.label-side {
  max-width: none;
  font-size: 13.5px;
}

@media (max-width: 800px) {
  .label-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .label-main .section-title {
    margin-bottom: 30px;
  }

  .label-photo {
    aspect-ratio: 4 / 3;
  }
}

/* Camp: texto arriba y las 4 fotos a todo el ancho, más grandes. */
@media (min-width: 801px) {
  .camp-block:not(.camp-block-events) {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .camp-block:not(.camp-block-events) .camp-copy {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "eyebrow ." "title text";
    column-gap: 6vw;
    align-items: end;
  }

  .camp-block:not(.camp-block-events) .camp-eyebrow { grid-area: eyebrow; }
  .camp-block:not(.camp-block-events) .camp-title { grid-area: title; margin-bottom: 0; }
  .camp-block:not(.camp-block-events) .camp-text { grid-area: text; max-width: 680px; font-size: 20px; line-height: 1.6; }

  .camp-media-4 {
    gap: 18px;
    padding: 10px 0 48px;
  }

  .camp-media-4 img:nth-child(even) { --ty: 40px; }
}
/* ---------- Portada en el celular: primero el sol, el logo y el estudio ----------
   En pantallas chicas, la primera vista es solo el logo sobre la foto
   del estudio. El título, el texto y los botones quedan debajo y se
   encienden al scrollear. En la compu .hero-stage no cambia nada. */
.hero-stage { display: contents; }
.hero-cue { display: none; }

@media (max-width: 800px) {
  .hero { min-height: 0; justify-content: flex-start; }
  .hero-stage {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 105px);
  }
  .hero-stage .hero-logo-wrap { margin-top: auto; margin-bottom: auto; }
  .hero-bg {
    bottom: auto;
    height: 100svh;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .hero-bg img { opacity: calc(.45 * (1 - var(--hero-p, 0))); }
  .hero-cue {
    display: block;
    text-align: center;
    color: var(--orange-soft);
    font-size: 18px;
    padding-bottom: 14px;
    opacity: calc(1 - var(--hero-p, 0) * 6);
    animation: zgCue 2.2s ease-in-out infinite;
  }
  .hero-bottom { padding-top: 48px; }
  .js-motion .hero-copy {
    opacity: clamp(0, calc(var(--hero-p, 0) * 5 - .15), 1);
    transform: translateY(calc((1 - min(1, var(--hero-p, 0) * 5)) * 24px));
  }
}

@keyframes zgCue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .js-motion .hero-copy { opacity: 1; transform: none; }
  .hero-cue { animation: none; }
}