/* =========================================================
   WayBack · Diseño 3 — "Honduras Vibrante"
   Identidad cultural · tarjetas · patrones · animaciones
   ========================================================= */

:root {
  --rojo: #e11d2e;
  --azul: #0a47a8;
  --azul-cielo: #00a3e0;   /* azul "catracho" */
  --morado: #6d28d9;
  --blanco: #ffffff;
  --crema: #fff7ec;

  --ink: #181222;
  --muted: #5d5570;
  --line: rgba(24,18,34,.1);

  --maxw: 1160px;
  --ease: cubic-bezier(.34,1.3,.4,1);

  /* Unbounded: ancha, geometrica, remates redondeados. Es el lenguaje de los
     afiches de musica electronica, que es lo que toca esta banda. Se usa con
     medida — solo titulos — porque a parrafo completo cansa.
     Manrope acompana limpia y legible en español sin pelear con ella.
     Se descartaron Bricolage Grotesque y DM Sans a proposito: son el par que
     delata un sitio generado por IA.

     Bungee, solo para los titulos de seccion. El cliente pidio Jukotha, cuya
     licencia es EXPLICITAMENTE de uso personal y prohibe el uso comercial —
     y este sitio vende camisetas. Bungee es la mas parecida del catalogo
     libre (OFL, uso comercial permitido): mismas mayusculas gruesas de
     cartel, esquinas apenas redondeadas, A de vertice plano. Si algun dia se
     compra la licencia de Jukotha, cambiar solo esta linea. */
  --font-titulo: "Bungee", "Impact", sans-serif;
  --font-display: "Unbounded", "Trebuchet MS", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--ink); line-height: 1.6;
  background: var(--crema); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Patrón geométrico (inspiración textil hondureña) usado en hero y festival */
.hero__pattern {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 8px, transparent 9px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px);
  background-size: 60px 60px, auto, auto;
}
.hero__pattern--soft { opacity: .3; }

/* ---------- Layout ---------- */
.container { width: min(var(--maxw), 92%); margin-inline: auto; position: relative; z-index: 2; }
.container--narrow { width: min(720px, 92%); }
/* El espacio entre dos secciones es la SUMA de dos rellenos, así que este
   número se siente al doble de lo que mide. El cliente lo pidió más apretado
   dos veces: en pantalla ancha son 84px de aire entre secciones, no 220 como
   al principio. */
.section { padding: clamp(24px, 2.8vw, 42px) 0; position: relative; }
.section--festival {
  background: linear-gradient(135deg, var(--azul) 0%, var(--morado) 100%);
  color: #fff; overflow: hidden;
}
.section--merch { background: var(--rojo); color: #fff; overflow: hidden; }
.section--cta { background: linear-gradient(135deg, var(--rojo), var(--morado)); color: #fff; }

/* ---------- Títulos de sección ----------
   Relleno color crema —el mismo del fondo— y contorno en tinta. Sobre las
   secciones claras el titulo se lee por el contorno, no por el relleno; sobre
   las oscuras (festival, merch, contacto) el crema toma el mando. Un solo
   tratamiento sirve para las dos, que es lo que pidio el cliente.

   `paint-order: stroke fill` dibuja el contorno DETRAS del relleno. Sin eso,
   -webkit-text-stroke lo centra sobre el trazo de la letra y se come la mitad
   hacia adentro: con 3px las contraformas de Bungee se cierran. En un
   navegador que no lo soporte las letras salen algo mas finas, nada mas. */
.section__title { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.section__title h2,
.card__title {
  font-family: var(--font-titulo); font-weight: 400; letter-spacing: .01em; line-height: 1.06;
  color: var(--crema);
  -webkit-text-stroke: clamp(2px, .5vw, 3.4px) var(--ink);
  paint-order: stroke fill;
}
.section__title h2 { font-size: clamp(1.42rem, 4.2vw, 2.5rem); }
.section__desc { color: var(--muted); max-width: 56ch; margin: -22px 0 32px; font-size: 1.05rem; }
.section__desc--light { color: rgba(255,255,255,.9); }
.subhead { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 28px 0 16px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  padding: 14px 26px; border-radius: 100px; border: 3px solid var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s, background .2s;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--red { background: var(--rojo); color: #fff; }
.btn--purple { background: var(--morado); color: #fff; }
.btn--white { background: #fff; color: var(--ink); }
.btn--green { background: #25d366; color: var(--ink); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 36px); transition: .3s;
}
.nav.is-scrolled { background: rgba(255,247,236,.9); backdrop-filter: blur(12px); box-shadow: 0 2px 0 var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px; background: var(--rojo); color: #fff;
  display: grid; place-items: center; font-weight: 800; transform: rotate(-6deg); border: 2px solid var(--ink);
}
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a { padding: 8px 12px; font-weight: 600; font-size: .9rem; border-radius: 100px; transition: .2s; }
.nav__links a:hover { background: var(--ink); color: #fff; }
.nav__cta { background: var(--rojo); color: #fff !important; border: 2px solid var(--ink); }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { width: 24px; height: 3px; background: var(--ink); border-radius: 2px; transition: .3s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--rojo) 0%, var(--morado) 55%, var(--azul) 100%);
  color: #fff; overflow: hidden; isolation: isolate;
}

/* ---------- Video de fondo del hero ----------
   El iframe de YouTube es 16/9 y el hero no, asi que se escala para cubrir
   igual que haria object-fit: cover, centrado y con el sobrante recortado.
   Nace en opacity 0 y solo se revela cuando el reproductor avisa que ya
   esta reproduciendo; si nunca carga, queda el degradado de siempre. */
.hero__video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }

/* Cuando el video arranca, la foto del hero se desvanece para dejarlo ver.
   La misma foto vive tambien en Sobre Nosotros, asi que no se pierde.
   Se va con opacity y no con display, para que el layout no salte.
   El selector lleva `.hero` de mas a proposito: .hero__photo tambien es
   .reveal, que define su propia transicion mas abajo en el archivo y ganaria
   por orden. Con dos clases este gana por especificidad, sin depender de
   donde este escrito. */
.hero .hero__photo { transition: opacity .8s var(--ease); }
.hero.has-video .hero__photo { opacity: 0; pointer-events: none; }
.hero__video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;         /* 100vw en 16/9 */
  min-height: 100svh; min-width: 177.78svh; /* 100svh en 16/9 */
  border: 0; pointer-events: none;
}

/* Sin esto el texto blanco depende del fotograma que toque: sobre un plano
   claro deja de leerse. El velo es lo que sostiene el contraste, no un
   recurso estetico. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, rgba(225,29,46,.55) 0%, rgba(109,40,217,.62) 55%, rgba(10,71,168,.62) 100%);
}

.hero__socials { display: flex; gap: 10px; margin-top: 26px; }
.hero__socials a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.35);
  color: #fff; transition: .25s var(--ease);
}
.hero__socials a:hover { background: #fff; color: var(--morado); transform: translateY(-3px); }

.hero__sound {
  position: absolute; right: clamp(16px, 4vw, 34px); bottom: clamp(16px, 4vw, 34px); z-index: 5;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 18px; border-radius: 100px; border: 2px solid var(--ink);
  background: #fff; color: var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.hero__sound:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.hero__sound:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hero__sound:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
.hero__sound[hidden] { display: none; }
/* Se muestra el icono de lo que VA A PASAR al hacer clic, igual que el texto:
   mudo -> bocina sonando + "Activar sonido"; sonando -> bocina tachada +
   "Silenciar". Antes el icono mostraba el estado y el texto la accion, y se
   contradecian. */
.hero__sound-ico { display: grid; place-items: center; }
.hero__sound-ico--silenciar { display: none; }
.hero__sound[data-suena="true"] .hero__sound-ico--activar { display: none; }
.hero__sound[data-suena="true"] .hero__sound-ico--silenciar { display: grid; }
.hero__shapes span { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; animation: float 9s ease-in-out infinite; }
.hero__shapes span:nth-child(1) { width: 180px; height: 180px; background: var(--azul-cielo); top: 14%; left: 8%; }
.hero__shapes span:nth-child(2) { width: 120px; height: 120px; background: var(--rojo); bottom: 16%; right: 12%; animation-delay: -3s; }
.hero__shapes span:nth-child(3) { width: 90px; height: 90px; background: #ffd23f; top: 22%; right: 22%; animation-delay: -6s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-26px)} }

.hero__layout {
  position: relative; z-index: 2; width: min(1240px, calc(100% - 48px)); min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center; gap: clamp(30px, 5vw, 76px); padding: 104px 0 52px;
}
.hero__content { max-width: 720px; text-align: left; }
.hero__title {
  font-family: var(--font-display); font-weight: 800; line-height: .9; letter-spacing: -.03em;
  font-size: clamp(2.66rem, 6.8vw, 6.08rem); text-shadow: 6px 6px 0 rgba(0,0,0,.18);
}
.hero__line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.06rem, 3.8vw, 1.98rem); margin-top: 4px; color: #ffd23f; }
.hero__subtitle { margin-top: 18px; font-size: clamp(1rem, 2.4vw, 1.35rem); font-weight: 500; }
.hero__actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__photo {
  position: relative; margin: 0; justify-self: end; width: min(100%, 520px);
  transform: rotate(2deg);
}
.hero__photo::before,
.hero__photo::after {
  content: ""; position: absolute; z-index: -1; border: 3px solid var(--ink);
}
.hero__photo::before {
  inset: -22px 24px 24px -24px; background: #ffd23f; transform: rotate(-5deg);
  border-radius: 38% 62% 54% 46% / 46% 38% 62% 54%;
}
.hero__photo::after {
  inset: 34px -28px -24px 38px; background: var(--azul-cielo); transform: rotate(5deg);
  border-radius: 58% 42% 35% 65% / 42% 60% 40% 58%;
}
.hero__photo-frame {
  aspect-ratio: 1; overflow: hidden; border: 4px solid var(--ink);
  border-radius: 32% 68% 57% 43% / 42% 34% 66% 58%;
  background: #fff; box-shadow: 12px 14px 0 var(--ink);
}
.hero__photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photo figcaption {
  position: absolute; right: -12px; bottom: 20px; padding: 9px 16px;
  background: var(--rojo); color: #fff; border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); font-weight: 800; transform: rotate(-3deg);
}

/* ---------- Hero typewriter ("De Regreso al Camino") ---------- */
.hero__line { min-height: 1.15em; }
.hero__line .caret {
  display: inline-block; width: 3px; height: .92em; margin-left: 6px;
  background: #ffd23f; vertical-align: -.08em; border-radius: 2px;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---------- Cards (tarjetas) ---------- */
.card {
  border-radius: 26px; padding: clamp(26px, 4vw, 44px); border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); position: relative; overflow: hidden;
}
.card--blue { background: var(--azul); color: #fff; }

/* ---------- Sobre Nosotros: texto + foto de la banda ----------
   Misma foto que el hero, donde se desvanece al arrancar el video. Aqui vive
   de forma permanente y reusa el lenguaje del hero: marco organico, formas de
   color detras y etiqueta roja. La tarjeta recorta con overflow, asi que las
   formas van dentro del hueco y no se salen. */
.sobre {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr);
  gap: clamp(28px, 5vw, 56px); align-items: center;
}
.sobre__foto {
  position: relative; margin: 0; justify-self: center;
  width: min(100%, 400px); transform: rotate(2deg);
}
.sobre__foto::before,
.sobre__foto::after {
  content: ""; position: absolute; z-index: 0; border: 3px solid var(--ink);
}
.sobre__foto::before {
  inset: -16px 18px 18px -18px; background: #ffd23f; transform: rotate(-5deg);
  border-radius: 38% 62% 54% 46% / 46% 38% 62% 54%;
}
.sobre__foto::after {
  inset: 26px -20px -18px 28px; background: var(--azul-cielo); transform: rotate(5deg);
  border-radius: 58% 42% 35% 65% / 42% 60% 40% 58%;
}
.sobre__foto-frame {
  position: relative; z-index: 1;
  aspect-ratio: 1; overflow: hidden; border: 4px solid var(--ink);
  border-radius: 32% 68% 57% 43% / 42% 34% 66% 58%;
  background: #fff; box-shadow: 10px 12px 0 var(--ink);
}
.sobre__foto-frame img { width: 100%; height: 100%; object-fit: cover; }
.sobre__foto figcaption {
  position: absolute; z-index: 2; right: -6px; bottom: 12px; padding: 8px 15px;
  background: var(--rojo); color: #fff; border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); font-weight: 800; font-size: .85rem;
  transform: rotate(-3deg);
}
@media (max-width: 860px) {
  .sobre { grid-template-columns: 1fr; }
  .sobre__foto { width: min(100%, 320px); margin-top: 14px; }
}
.card--purple { background: var(--morado); color: #fff; }
.card--red { background: var(--rojo); color: #fff; }
.card--white { background: #fff; color: var(--ink); }
/* La familia, el contorno y el color los pone la regla de .section__title más
   arriba: este es el mismo tratamiento, solo que el título vive dentro de una
   tarjeta. Aquí van únicamente tamaño y márgenes. */
.card__title { font-size: clamp(1.26rem, 3vw, 1.92rem); margin: 4px 0 18px; }
.card .lead { font-size: 1.12rem; margin-bottom: 18px; font-weight: 500; }
.card p { margin-bottom: 14px; }
.card p:last-child { margin-bottom: 0; }
.card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; margin-bottom: 16px; }

.tilt { transition: transform .3s var(--ease), box-shadow .3s; will-change: transform; }


.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 34px; }
.split--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Carrusel continuo de videos ----------
   Las tarjetas quedan del mismo tamano que las de Mahanaim (min 420px) y la
   pista se desliza sin parar. JS duplica el contenido para que el bucle no
   tenga costura, y la animacion recorre exactamente la mitad del ancho: al
   terminar, la copia esta donde estaba el original y el salto es invisible.

   Se detiene al pasar el mouse y al enfocar con teclado, porque perseguir un
   objetivo en movimiento para hacer clic es hostil. Al abrir un video se
   detiene del todo (.is-paused desde JS): un video reproduciendose que se va
   deslizando fuera de pantalla no tiene defensa. */
.carrusel { overflow: hidden; position: relative; margin-inline: calc(50% - 50vw); padding: 6px 0; }
.carrusel__pista {
  display: flex; width: max-content;
  animation: correr 46s linear infinite;
}
/* La separacion va como margen DE CADA tarjeta, no como `gap` de la pista, y
   la pista no lleva padding. Es lo que hace que -50% caiga exacto: con 12
   tarjetas de ancho (i + margen), la mitad son 6 tarjetas completas, asi que
   la copia aterriza justo donde empezaba el original. Con `gap` y `padding`
   el 50% queda corrido 11px y el bucle da un salto visible en cada vuelta. */
.carrusel .yt-lite { margin-right: 22px; }
/* `is-paused` la pone un video al abrirse y no se quita; `is-visor` dura solo
   lo que dure la foto en grande. Son dos clases distintas justamente para que
   cerrar el visor no reanude un carrusel que un video dejó detenido. */
.carrusel:hover .carrusel__pista,
.carrusel:focus-within .carrusel__pista,
.carrusel.is-paused .carrusel__pista,
.carrusel.is-visor .carrusel__pista { animation-play-state: paused; }
.carrusel .yt-lite { flex: 0 0 min(78vw, 420px); }

/* Galerías de fotos: mismo mecanismo que el carrusel de videos, sin pie.
   Las tarjetas van al mismo ancho que las de merch para que las fotos se
   aprecien; las imágenes se generan a 1040px para que no se vean borrosas
   en pantallas de alta densidad. */
.carrusel--fotos figure {
  flex: 0 0 min(86vw, 520px); margin-right: 22px;
  border-radius: 20px; overflow: hidden;
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.carrusel--fotos img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }

/* Cada foto es un botón de verdad, no un div con onclick: así se llega con
   Tab, se abre con Enter y el lector de pantalla la anuncia como algo que se
   puede activar. Sin relleno ni borde propios para que siga pareciendo la
   foto y no un control. */
.foto-zoom {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; font: inherit; color: inherit;
}
.foto-zoom:focus-visible { outline: 4px solid #ffd23f; outline-offset: -4px; }

/* La duración la fija initCarrusel midiendo la pista: la animación recorre un
   porcentaje, no una distancia, así que con una duración fija una galería de
   12 fotos avanzaría al triple que una de 4. Se calcula en píxeles por segundo
   para que todos vayan igual, sin importar cuántas fotos cargue el cliente
   desde el panel. El valor de aquí solo actúa si el JS no llegó a correr. */

@keyframes correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Sin JS no hay copias, asi que animar dejaria huecos: se queda quieto y se
   desliza a mano. El scroll va en .carrusel, no en la pista: la pista es
   `width: max-content` y por definicion nunca desborda de si misma. */
.carrusel:not(.is-duplicado) { overflow-x: auto; scroll-snap-type: x mandatory; }
.carrusel:not(.is-duplicado) .carrusel__pista { animation: none; }
.carrusel:not(.is-duplicado) .yt-lite { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  .carrusel { overflow-x: auto; scroll-snap-type: x mandatory; }
  .carrusel__pista { animation: none; }
  .carrusel .yt-lite { scroll-snap-align: start; }
}

/* ---------- yt-lite ---------- */
.music-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
/* Música lleva 5 videos bajo el destacado. En rejilla de 4 columnas caían
   4 + 1, y ese último dejaba tres huecos vacíos a su derecha: media franja de
   página en blanco. Con flex y `justify-content: center` la fila incompleta
   se centra bajo la anterior y el hueco desaparece. Va como modificador
   porque Mahanaim usa la misma rejilla con 2 videos y ahí no aplica. */
.music-grid--fila-centrada { display: flex; flex-wrap: wrap; justify-content: center; }
.music-grid--fila-centrada .yt-lite { flex: 1 1 300px; max-width: calc(33.333% - 15px); }
@media (max-width: 860px) {
  .music-grid--fila-centrada .yt-lite { max-width: none; }
}
.yt-lite {
  position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: #fff;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.yt-lite:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
.yt-lite img { aspect-ratio: 16/9; object-fit: cover; }
.yt-lite__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer;
  background: var(--rojo); color: #fff; font-size: 1.1rem; display: grid; place-items: center; transition: transform .25s;
}
.yt-lite:hover .yt-lite__play { transform: translate(-50%,-50%) scale(1.14); }
.yt-lite__cap { display: block; padding: 13px 16px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.yt-lite iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.spotify { margin-top: 34px; }

/* El lanzamiento más nuevo, a todo el ancho y encima del resto del catálogo. */
.yt-lite--destacado { margin-bottom: 22px; }
.yt-lite--destacado .yt-lite__cap { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.28rem); padding: 16px 20px; }
.yt-lite--destacado .yt-lite__play { width: 76px; height: 76px; }
.yt-lite__etiqueta {
  position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 16px;
  border-radius: 100px; background: #ffd23f; color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- Eventos ----------
   Queda una sola fecha en cartelera, así que la tarjeta se acompaña del aviso
   de la gira en vez de estirarse sola a todo lo ancho. */
.eventos {
  display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(20px, 4vw, 40px); align-items: center;
}
.eventos__nota {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem); line-height: 1.3; max-width: 22ch;
}
@media (max-width: 720px) {
  .eventos { grid-template-columns: 1fr; }
  .eventos__nota { max-width: none; }
}
.event-card {
  background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 26px;
  box-shadow: 6px 6px 0 var(--ink); transition: transform .25s var(--ease), box-shadow .25s; position: relative;
}
.event-card--soon { background: var(--azul-cielo); color: #fff; }
.event-card__date { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.event-card__date strong { font-family: var(--font-display); font-weight: 800; font-size: 1.82rem; line-height: 1; }
.event-card__date span { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.event-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.event-card p { color: var(--muted); font-size: .92rem; margin-bottom: 16px; }
.event-card--soon p { color: rgba(255,255,255,.9); }
.pill { display: inline-block; padding: 6px 16px; border-radius: 100px; font-weight: 700; font-size: .78rem; background: var(--rojo); color: #fff; border: 2px solid var(--ink); }
.pill--ghost { background: #ffd23f; color: var(--ink); }

/* ---------- Merch ---------- */
.merch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
/* `color` explícito, no heredado: la sección de merch es roja con texto
   blanco, y la tarjeta es blanca. Sin esta línea el nombre del producto
   heredaba el blanco de la sección y quedaba invisible sobre la tarjeta. */
.merch-card { background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 6px 6px 0 var(--ink); transition: transform .25s var(--ease), box-shadow .25s; }
.merch-card:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
.merch-card img { aspect-ratio: 1; object-fit: cover; border-bottom: 3px solid var(--ink); }
.merch-card figcaption { padding: 14px 18px; }
.merch-card figcaption strong { display: block; font-family: var(--font-display); font-weight: 700; }
/* Acotado a figcaption: `.merch-card span` a secas también alcanzaba a la
   etiqueta "Ver frente y espalda", que vive sobre la foto y tiene su propio
   color y tamaño. */
.merch-card figcaption > span { display: block; color: var(--muted); font-size: .85rem; }
/* El botón envuelve la imagen entera: la zona de clic es la foto, que es lo
   que la gente intenta tocar. `display: block` y sin relleno para que no
   aparezca el marco de botón alrededor. */
.merch-card__zoom {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit;
}
.merch-card__zoom:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.merch-card__lupa {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 7px 15px; border-radius: 100px; border: 2px solid var(--ink);
  background: #ffd23f; color: var(--ink); font-weight: 700; font-size: .78rem;
  white-space: nowrap; box-shadow: 3px 3px 0 var(--ink);
  opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.merch-card:hover .merch-card__lupa,
.merch-card__zoom:focus-visible .merch-card__lupa { opacity: 1; transform: translate(-50%, -4px); }
/* En pantalla táctil no hay hover que revele la pista, así que se deja fija. */
@media (hover: none) {
  .merch-card__lupa { opacity: 1; }
}
.merch-card figcaption > span.merch-card__precio {
  display: inline-block; margin-top: 10px; padding: 5px 14px; border-radius: 100px;
  background: var(--rojo); color: #fff; border: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: .92rem;
}
.merch-cta { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.merch-cta p { font-weight: 500; }

/* ---------- Festival ---------- */
.festival-lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.99rem, 2.4vw, 1.52rem); line-height: 1.3; max-width: 24ch; margin-bottom: 18px; }
.festival-anfitriones {
  max-width: 62ch; margin-bottom: 26px; font-weight: 500;
  color: rgba(255,255,255,.92); border-left: 4px solid #ffd23f; padding-left: 16px;
}
.festival-cta { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: rgba(255,255,255,.12); border: 3px solid #fff; border-radius: 24px; padding: 28px 32px; }
.festival-cta__year { font-family: var(--font-display); font-weight: 800; font-size: 2.28rem; line-height: 1; color: #ffd23f; }
.festival-cta p { flex: 1; min-width: 200px; font-weight: 600; }

/* ---------- Recursos ---------- */
.resource { display: block; }
.resource__icon { font-size: 2rem; display: block; margin-bottom: 12px; }
.resource h3 { margin-bottom: 8px; }
.resource p { opacity: .9; font-size: .95rem; margin: 0; }
/* Las tres tarjetas describen material que aún no existe. Este aviso es lo
   único que impide que se lean como descargas disponibles. */
.recursos__nota {
  display: inline-block; margin: -14px 0 8px; padding: 10px 20px; border-radius: 100px;
  border: 2px dashed var(--ink); background: #ffd23f;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
}

.mahanaim-lead { margin-bottom: 6px; }
.mahanaim-lead .lead { margin: 0; }

/* ---------- Formularios ---------- */
/* El formulario es una rejilla de dos columnas: los campos marcados como
   `medio` ocupan una, el resto ocupa el ancho completo. Antes esto se hacia
   envolviendo pares de campos en un .form__row, lo que obligaba a decidir la
   maquetacion al escribir el HTML; con la rejilla cada campo declara su propio
   ancho en los datos y el CMS puede reordenarlos sin romper nada. */
.form { max-width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
.form .field { grid-column: 1 / -1; }
.form .field--medio { grid-column: span 1; }
.form > button { grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 680px) {
  .form { grid-template-columns: 1fr; }
  .form .field--medio { grid-column: 1 / -1; }
}

.mahanaim-form { margin-top: 44px; }
.mahanaim-form .section__desc { margin: -12px 0 22px; }

.field { display: block; margin-bottom: 18px; }
.field span:not(.sr-only) { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 13px 16px; border: 2px solid var(--ink); border-radius: 12px;
  font-family: var(--font-body); font-size: .95rem; background: var(--crema); color: var(--ink); transition: .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--rojo); box-shadow: 3px 3px 0 var(--rojo); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--rojo); }
.form__success { margin-top: 16px; padding: 14px 18px; border-radius: 12px; font-weight: 700; background: #d6f5e0; color: #0a7d3c; border: 2px solid #0a7d3c; }
.form > .form__success { grid-column: 1 / -1; }
.form__success--error { background: #ffe1e4; color: #a3121f; border-color: #a3121f; }
.section--cta .form__success { background: #fff; }


/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #fff; padding: clamp(50px, 7vw, 80px) 0 26px; }
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer__brand .brand { color: #fff; }
.footer__brand > p { color: rgba(255,255,255,.7); font-size: .92rem; margin: 16px 0 18px; max-width: 38ch; }
.socials { display: flex; gap: 12px; margin-bottom: 18px; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); transition: .25s var(--ease); }
.socials a:hover { background: var(--rojo); transform: translateY(-3px); }
.platforms { display: flex; gap: 10px; flex-wrap: wrap; }
.platforms a { padding: 9px 18px; border-radius: 100px; font-weight: 700; font-size: .85rem; background: rgba(255,255,255,.08); transition: .2s; }
.platforms a:hover { background: #ffd23f; color: var(--ink); }
.footer__mv h4 { font-family: var(--font-display); font-weight: 700; color: #ffd23f; margin: 16px 0 6px; }
.footer__mv h4:first-child { margin-top: 0; }
.footer__mv p { color: rgba(255,255,255,.72); font-size: .9rem; max-width: 46ch; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 22px; color: rgba(255,255,255,.6); font-size: .85rem; }
.footer__bottom a:hover { color: #ffd23f; }

/* ---------- Visor de fotos ----------
   Se abre sobre todo lo demás al tocar una foto de cualquiera de las dos
   galerías o del merch. Los carruseles se detienen mientras está abierto: que
   la fila siguiera deslizándose detrás del velo sería ruido. */
.visor {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(6px, 2vw, 22px);
  padding: clamp(14px, 4vw, 40px);
  background: rgba(12, 8, 20, .93);
  animation: visorEntra .22s var(--ease);
}
.visor[hidden] { display: none; }
@keyframes visorEntra { from { opacity: 0; } }

.visor__marco { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.visor__marco img {
  max-width: 100%; max-height: 78svh; width: auto; object-fit: contain;
  border: 3px solid var(--ink); border-radius: 16px; background: #fff;
  box-shadow: 8px 8px 0 rgba(0,0,0,.5);
}
.visor__marco figcaption { color: rgba(255,255,255,.82); font-size: .88rem; font-weight: 600; text-align: center; }

.visor__paso, .visor__cerrar {
  display: grid; place-items: center; cursor: pointer;
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .2s var(--ease);
}
.visor__paso:hover, .visor__cerrar:hover { transform: scale(1.08); }
.visor__paso:focus-visible, .visor__cerrar:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
.visor__cerrar { position: absolute; top: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px); z-index: 2; }

/* Con una sola foto no hay a dónde avanzar; los botones se ocultan en vez de
   quedarse ahí sin hacer nada. */
.visor[data-solo-una="true"] .visor__paso { visibility: hidden; }

@media (max-width: 620px) {
  /* Las flechas pasan a flotar sobre la foto: en pantalla angosta, tres
     columnas dejaban la imagen del ancho de una estampilla. */
  .visor { grid-template-columns: 1fr; }
  .visor__paso { position: absolute; top: 50%; transform: translateY(-50%); }
  .visor__paso:hover { transform: translateY(-50%) scale(1.08); }
  .visor__paso--atras { left: 10px; }
  .visor__paso--siguiente { right: 10px; }
  .visor__marco img { max-height: 68svh; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero__layout { grid-template-columns: 1fr 360px; gap: 22px; }
  .hero__title { font-size: clamp(2.58rem, 7.6vw, 4.56rem); }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(80%, 300px); flex-direction: column; align-items: flex-start;
    gap: 6px; padding: 88px 22px 22px; background: var(--crema); border-left: 3px solid var(--ink);
    transform: translateX(100%); transition: transform .35s var(--ease);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a { width: 100%; font-size: 1rem; }
  .nav__toggle { display: flex; z-index: 901; }
}
@media (max-width: 680px) {
  .hero { min-height: 760px; }
  .hero__layout {
    width: 100%; min-height: 760px; grid-template-columns: 1fr; align-items: end;
    /* El fondo de abajo deja libre la franja del boton de sonido, que va
       posicionado sobre el hero. Con el valor anterior las redes sociales
       quedaban a la misma altura y se chocaban en pantallas angostas. */
    padding: 96px 20px 104px;
  }
  .hero__photo {
    /* Centrada con `left: 0; right: 0` + `margin-inline: auto`, NO con
       translateX. La foto tambien es .reveal, y `.reveal.is-visible` declara
       `transform: none` con mas especificidad que esta regla: cualquier
       transform que se ponga aqui se descarta, y la foto quedaba en left: 50%
       sin el desplazamiento que la centraria, es decir corrida media pantalla
       a la derecha. Centrar por margenes no depende de transform y por tanto
       no puede entrar en ese conflicto. */
    position: absolute; top: 76px; left: 0; right: 0; bottom: auto;
    width: min(80vw, 340px); margin-inline: auto;
    opacity: .75; z-index: -1;
  }
  .hero__photo::before { inset: -14px 18px 18px -16px; }
  .hero__photo::after { inset: 30px -14px -18px 28px; }
  .hero__photo-frame { box-shadow: 8px 10px 0 var(--ink); }
  .hero__photo figcaption { display: none; }
  /* Sin fondo propio: ese degradado existia para que el texto se leyera sobre
     la foto que quedaba detras en movil, y se notaba como un recuadro. El
     contraste ahora lo sostiene .hero__scrim, que cubre todo el hero. */
  .hero__content {
    max-width: 100%; padding: 210px 0 0; text-align: left;
  }
  .hero__title { font-size: clamp(2.66rem, 15vw, 4.56rem); }
  .hero__line { font-size: clamp(1.03rem, 5.3vw, 1.52rem); }
  .split, .split--3 { grid-template-columns: 1fr; }
  .merch-cta { flex-direction: column; align-items: flex-start; }
  .hero__title { text-shadow: 4px 4px 0 rgba(0,0,0,.18); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}