/* ============================================================
   SOULMARA — global styles
   Brand palette:  cream  #EAE4D8   /   ink  #181816
   Display font:   Milk and Honey (drop-in) → Fredoka fallback
   ============================================================ */

/* --- Brand font: Milk and Honey (subset — web formats only) --------
   These woff2/woff files are a subset containing only the characters the
   site renders. Generated with tools/subset-font.mjs from the licensed
   source font, which is NOT committed to the repo. */
@font-face {
  font-family: "Milk and Honey";
  src:
    url("../assets/fonts/milk-and-honey.woff2") format("woff2"),
    url("../assets/fonts/milk-and-honey.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

/* Body font + Fredoka as a last-resort display fallback */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --cream: #eae4d8;
  --ink: #181816;
  --ink-soft: #2b2b28;

  --display: "Milk and Honey", "Fredoka", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
}

/* ============================================================
   INTRO / SPLASH
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--cream);
  overflow: hidden;
}

/* Zoom origin = measured center of the O (moon/star) in the stacked logo */
.intro__logo {
  --zoom-x: 37.9%;
  --zoom-y: 24.8%;
  opacity: 0;
  transform: scale(1);
  transform-origin: var(--zoom-x) var(--zoom-y);
  will-change: opacity, transform;
}

.intro__img {
  display: block;
  width: min(62vw, 640px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Phase 1: fade + settle in */
.intro__logo.is-in {
  animation: introFadeIn 1.4s var(--ease-out) forwards;
}

/* Phase 2: zoom straight into the O (moon icon) */
.intro__logo.is-zoom {
  animation: introZoom 1.5s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes introFadeIn {
  0%   { opacity: 0; transform: scale(0.94); filter: blur(6px); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0);   }
}

@keyframes introZoom {
  0%   { opacity: 1; transform: scale(1); }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: scale(30); }
}

.intro.is-done { display: none; }

/* ============================================================
   SITE + NAV
   ============================================================ */
/* The site container itself becomes visible immediately after the zoom;
   its contents are revealed in stages (see below). Starts on the dark
   background so there is no flash. */
.site {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.site.is-visible { opacity: 1; }

/* --- Staged reveal ------------------------------------------------
   Stage 1 (.reveal-hero): the hero background photo fades in.
   Stage 2 (.reveal-layout): nav, title, scroll cue and content fade in.
   ------------------------------------------------------------------ */

/* Hero photo: hidden until stage 1 */
.hero__bg {
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.6s var(--ease-out);
}
.site.reveal-hero .hero__bg {
  opacity: 1;
  transform: scale(1);
}

/* Layout chrome: hidden until stage 2, then eases up into place */
.nav,
.hero__title,
.hero__side,
.hero__scroll,
.carousel {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.site.reveal-layout .nav,
.site.reveal-layout .hero__title,
.site.reveal-layout .hero__side,
.site.reveal-layout .hero__scroll,
.site.reveal-layout .carousel {
  opacity: 1;
  transform: translateY(0);
}

/* Gentle stagger so the pieces don't all pop at once */
.site.reveal-layout .nav          { transition-delay: 0s; }
.site.reveal-layout .hero__title  { transition-delay: 0.15s; }
.site.reveal-layout .hero__side   { transition-delay: 0.3s; }
.site.reveal-layout .hero__scroll { transition-delay: 0.45s; }
.site.reveal-layout .carousel     { transition-delay: 0.3s; }

/* Reduced motion: everything simply on, no transforms */
@media (prefers-reduced-motion: reduce) {
  .hero__bg,
  .nav, .hero__title, .hero__side, .hero__scroll, .carousel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  /* Agrupamos los enlaces + icono en el centro */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem; /* separación entre menús y el logo central */
  padding: 1.4rem 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  transition: transform 0.35s var(--ease-out);
}
/* Hidden when scrolling down; slides back in when scrolling up.
   Specificity must beat `.site.reveal-layout .nav` (0,3,0) which pins the
   reveal transform to translateY(0), so we qualify with .site too. */
.site .nav.nav--hidden,
.site.reveal-layout .nav.nav--hidden {
  transform: translateY(-100%);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.nav a {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.nav a:hover { opacity: 1; }

.nav__brand {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.nav__brand-icon { width: 34px; height: auto; display: block; }

/* Redes sociales ancladas a la esquina derecha, sin afectar el centrado */
.nav__socials {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.nav__socials a {
  display: inline-flex;
  width: 18px;
  height: 18px;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}
.nav__socials a:hover { opacity: 1; transform: translateY(-1px); }
/* Los SVG ya vienen en color crema (fill definido en el propio archivo) */
.nav__socials img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh; /* dvh avoids the mobile address-bar height jump */
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

/* Band photo, converted to black & white to match the brand */
.hero__bg {
  position: absolute; inset: 0;
  background-image: url("../assets/img/hero.jpg");
  background-size: cover;
  background-position: center 35%;
  /* B&W + a touch of contrast so it reads clean against the type */
  filter: grayscale(1) contrast(1.08) brightness(0.92);
}

/* On portrait phones the wide landscape hero has to crop in hard and
   loses the band. Swap to a purpose-composed vertical image instead.
   Scoped to portrait orientation + phone width so it never affects
   landscape phones or wider tablets. */
@media (orientation: portrait) and (max-width: 820px) {
  .hero__bg {
    background-image: url("../assets/img/newherotest.png");
    background-size: cover;
    background-position: 58% top;
    background-repeat: no-repeat;
    background-color: var(--ink);
  }
  .hero__media {
    /* transform: rotate(0.5deg) scale(1.2); */
    transform-origin: center center;
  }
}
/* Vignette / darkening so the cream headline stays legible */
.hero__grain {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,24,22,0.35) 0%, rgba(24,24,22,0.05) 30%, rgba(24,24,22,0.55) 100%),
    radial-gradient(80% 60% at 50% 45%, transparent 35%, rgba(24,24,22,0.6) 100%);
}

.hero__title {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  text-align: center;
  color: var(--cream);
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.55);
}
.hero__line {
  display: block;
  font-size: clamp(3.5rem, 15vw, 13rem);
}

.hero__side {
  position: absolute;
  top: 50%;
  z-index: 2;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  opacity: 0.7;
  writing-mode: vertical-rl;
}
.hero__side--left  { left: 1.4rem;  transform: translateY(-50%) rotate(180deg); }
.hero__side--right { right: 1.4rem; transform: translateY(-50%); }

.hero__scroll {
  position: absolute;
  bottom: 2rem; right: 2.4rem;
  z-index: 3;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.85;
}
.hero__scroll span { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(5px);} }

/* ============================================================
   CAROUSEL (footer gallery)
   ============================================================ */
/* Full-width band: cream background contrasts the dark hero above */
.carousel {
  position: relative;
  z-index: 5;
  background: var(--cream);
  border-radius: 32px 32px 0 0;
  margin-top: -32px;
  padding: 4.5rem clamp(1.2rem, 5vw, 4rem) 5.5rem;
}

/* The rounded card that actually contains the images */
.carousel__viewport {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: min(70vh, 660px);
  min-height: 360px;
  border-radius: 24px;
  overflow: hidden; /* clips the shifting photos to the card */
  /* Cream border + inks frame so the card reads as a distinct object */
  border: 6px solid var(--cream);
  box-shadow:
    0 0 0 1px rgba(24, 24, 22, 0.12),
    0 30px 70px rgba(24, 24, 22, 0.25);
}

.carousel__track {
  position: absolute;
  inset: 0;
}

/* Slides stack and cross-fade */
.carousel__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* B&W to match the site's monochrome look */
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s var(--ease-out), transform 6s linear;
  will-change: opacity, transform;
}
.carousel__slide.is-active {
  opacity: 1;
  transform: scale(1); /* slow Ken-Burns drift while visible */
}

/* Darkening so caption + controls stay legible */
.carousel__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(24, 24, 22, 0.35) 0%,
    rgba(24, 24, 22, 0) 35%,
    rgba(24, 24, 22, 0.55) 100%
  );
}

/* Arrows */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(234, 228, 216, 0.5);
  border-radius: 50%;
  background: rgba(24, 24, 22, 0.25);
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.carousel__arrow:hover {
  background: rgba(24, 24, 22, 0.55);
  border-color: var(--cream);
}
.carousel__arrow--prev { left: 1.4rem; }
.carousel__arrow--next { right: 1.4rem; }
.carousel__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.carousel__arrow--next:hover { transform: translateY(-50%) translateX(2px); }

/* Dots */
.carousel__dots {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.6rem;
}
.carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(234, 228, 216, 0.4);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.carousel__dot:hover { background: rgba(234, 228, 216, 0.7); }
.carousel__dot.is-active {
  background: var(--cream);
  transform: scale(1.25);
}

/* Caption */
.carousel__caption {
  position: absolute;
  top: 1.4rem;
  left: 1.6rem;
  z-index: 3;
  font-family: var(--display);
  color: var(--cream);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  letter-spacing: 0.08em;
}
.carousel__brand { font-size: 1.4rem; }
.carousel__year { font-size: 0.8rem; opacity: 0.8; }

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width: 900px) {
  .nav { gap: 1.4rem; }
  .nav__socials { right: 1.2rem; gap: 0.7rem; }
  .carousel { padding: 3rem clamp(1rem, 4vw, 2.5rem) 4rem; }
  .carousel__viewport { height: min(60vh, 560px); }
}

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 640px) {
  /* Nav: tighter, socials hidden (they'd crowd the small bar) */
  .nav {
    padding: 0.9rem 1rem;
    font-size: 0.72rem;
    gap: 1.2rem;
    letter-spacing: 0.1em;
  }
  .nav__links { gap: 0.9rem; }
  .nav__brand { width: 34px; height: 34px; }
  .nav__brand-icon { width: 28px; }
  .nav__socials { display: none; }

  /* Hero: side labels off, headline breathes, scroll cue centered */
  .hero__side { display: none; }
  .hero__line { font-size: clamp(3rem, 18vw, 6rem); }
  .hero__scroll {
    right: 50%;
    transform: translateX(50%);
    bottom: 1.4rem;
    font-size: 0.7rem;
  }

  /* Carousel: full-width-ish card, smaller controls */
  .carousel {
    padding: 2.5rem 0.9rem 3.5rem;
    border-radius: 24px 24px 0 0;
  }
  .carousel__viewport {
    height: min(56vh, 460px);
    min-height: 300px;
    border-radius: 18px;
    border-width: 4px;
  }
  .carousel__arrow { width: 38px; height: 38px; font-size: 1.2rem; }
  .carousel__arrow--prev { left: 0.6rem; }
  .carousel__arrow--next { right: 0.6rem; }
  .carousel__caption { top: 1rem; left: 1rem; }
  .carousel__brand { font-size: 1.1rem; }
  .carousel__dots { bottom: 1rem; }

  /* Intro logo: a touch larger relative to small screens */
  .intro__img { width: 78vw; }
}

/* Very small phones */
@media (max-width: 380px) {
  .nav { gap: 0.8rem; font-size: 0.66rem; }
  .nav__links { gap: 0.6rem; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .intro__logo.is-in,
  .intro__logo.is-zoom,
  .icon-star,
  .hero__scroll span { animation: none !important; }
  .intro__logo { opacity: 1; }
}

/* ============================================================
   MÚSICA — discography gallery page
   ============================================================ */
.musica {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 7.5rem clamp(1.2rem, 5vw, 4rem) 5rem;
}

.musica__head {
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.musica__title {
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
}

/* Responsive grid of square covers */
.gallery {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

/* Each record is a vertical stack: square cover on top, caption below */
.record {
  display: flex;
  flex-direction: column;
}

/* Reveal animation: records start hidden (.reveal is added by JS), then
   fade + rise into place one by one when .is-in is applied. If JS is off,
   records keep their default fully-visible state. */
.record.reveal,
.press__cover.reveal,
.press__section.reveal {
  opacity: 0;
  transform: translateY(24px);
}
.record.reveal.is-in,
.press__cover.reveal.is-in,
.press__section.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 2s var(--ease-out),
    transform 2s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .record.reveal,
  .record.reveal.is-in,
  .press__cover.reveal,
  .press__cover.reveal.is-in,
  .press__section.reveal,
  .press__section.reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* The square cover itself. position:relative anchors the name overlay. */
.record__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 0 0 1px rgba(234, 228, 216, 0.08),
    0 24px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.record__cover:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(234, 228, 216, 0.14),
    0 32px 60px rgba(0, 0, 0, 0.55);
}

/* Name overlays the bottom of the cover artwork, on a soft scrim so it
   stays legible against any image. */
.record__name {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.6rem 1.1rem 0.9rem;
  font-family: var(--display);
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  background: linear-gradient(
    180deg,
    rgba(24, 24, 22, 0) 0%,
    rgba(24, 24, 22, 0.75) 100%
  );
}

/* Caption rests on the frame BELOW the cover, holding only the icons,
   aligned to the right. */
.record__caption {
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
}

/* Icons centered as a group beneath the cover */
.record__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
}

/* Circular icon buttons matching the reference */
.record__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(234, 228, 216, 0.14);
  border: 1px solid rgba(234, 228, 216, 0.3);
  backdrop-filter: blur(3px);
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.record__links a:hover {
  background: rgba(234, 228, 216, 0.28);
  border-color: var(--cream);
  transform: translateY(-2px);
}
.record__links img {
  width: 16px;
  height: 16px;
  display: block;
}

/* ============================================================
   MÚSICA — responsive
   ============================================================ */
@media (max-width: 640px) {
  .musica { padding: 5.5rem 0.9rem 3.5rem; }
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.9rem;
  }
  .record__cover { border-radius: 14px; }
  .record__caption { padding-top: 0.6rem; }
  .record__name { font-size: 1.05rem; padding: 1.3rem 0.8rem 0.7rem; }
  .record__links { gap: 0.4rem; }
  .record__links a { width: 26px; height: 26px; }
  .record__links img { width: 14px; height: 14px; }
}

/* ============================================================
   PRESS KIT — press kit page
   Reuses the fixed blurred background (.musica-bg) + shared nav.
   ============================================================ */
.press {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 7rem clamp(1.2rem, 5vw, 3rem) 4rem;
}

/* --- Cover / hero band ------------------------------------- */
.press__cover {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(70vh, 620px);
  margin-bottom: 4rem;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(24,24,22,0.55), rgba(24,24,22,0.75)),
    url("../assets/img/hero.jpg") center/cover no-repeat;
  filter: none;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
/* B&W treatment on the cover photo, applied via a layer so the wordmark
   on top stays full-strength cream. */
.press__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: grayscale(1) contrast(1.05);
  z-index: 0;
}
.press__wordmark {
  position: relative;
  z-index: 1;
  width: min(70%, 460px);
  height: auto;
  margin-bottom: 3rem;
}
.press__badge {
  position: absolute;
  left: 0;
  bottom: 1.6rem;
  z-index: 1;
  background: rgba(120, 104, 54, 0.92); /* muted gold, like the kit */
  color: var(--cream);
  font-family: var(--display);
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  padding: 0.7rem 1.6rem 0.7rem 1.2rem;
}

/* --- Generic section + titles ----------------------------- */
.press__section {
  margin: 0 auto 4.5rem;
}

/* Bio section: stack + center everything (title, lead, tagline) */
.press__bio {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.press__title {
  width: 100%;
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  text-align: center;
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 1.6rem;
}
.press__title--band {
  font-size: clamp(2.6rem, 9vw, 5rem);
  margin-bottom: 1.4rem;
}

.press__lead {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--cream);
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.press__lead strong { font-weight: 600; }

.press__tagline {
  margin-top: 1.8rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.16em;
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--cream);
  opacity: 0.9;
}

.press__body {
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  line-height: 1.7;
  color: var(--cream);
  max-width: 44rem;
  margin: 0 auto 1.2rem;
  text-align: center;
}

.press__title_margin {
  margin-top: 10rem;
}

/* --- Members ----------------------------------------------- */
.members {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.6rem, 2vw, 1.4rem);
}
.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.member__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(234, 228, 216, 0.18);
  filter: grayscale(1);
  margin-bottom: 0.7rem;
  /* Grayscale portrait, zoomed in and centered so the member fills the
     frame. 150% scales the image up ~50% past cover; overflow crops it
     evenly. No layered pseudo-element, so no hairline edge artifacts. */
  background-color: var(--ink);
  background-size: 150%;
  background-position: center center;
  background-repeat: no-repeat;
  /* Hover lift */
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  will-change: transform;
}
.member__photo:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .member__photo,
  .member__photo:hover {
    transition: none;
    transform: none;
  }
}

/* Per-member framing tweaks (base is 150% / center center).
   Moving the image "down" = show more top = smaller Y%.
   Moving the image "up"   = show more bottom = larger Y%.
   Moving the image "left" = show more right = larger X%. */
.member__photo--daniel { /* looks good as-is */ }
.member__photo--angel  { background-size: 155%; background-position: 65% center; }
.member__photo--almara { background-position: center 15%; }
.member__photo--pali   { background-size: 160%; background-position: center 70%; }
.member__photo--omar   { background-size: 180%; background-position: 40% center; }
.member__role {
  font-family: var(--display);
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  color: var(--cream);
  opacity: 0.85;
}
.member__name {
  font-family: var(--display);
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  color: var(--cream);
}
.member__nickname {
  font-family: var(--display);
  font-size: clamp(0.5rem, 1.2vw, 0.7rem);
  color: var(--cream);
}

/* --- Festivales / Shows ------------------------------------ */
.shows__list {
  list-style: none;
  max-width: 40rem;
  margin: 0 auto 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.shows__list li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--cream);
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  line-height: 1.5;
}
/* Star bullet echoing the brand mark */
.shows__list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--cream);
  opacity: 0.85;
}

.shows__gallery {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}
.shows__thumb {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: rgba(234, 228, 216, 0.08);
  border: 1px solid rgba(234, 228, 216, 0.15);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

/* --- Social media photo + stats ---------------------------- */
.press__photo {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: rgba(234, 228, 216, 0.08);
  border: 1px solid rgba(234, 228, 216, 0.15);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  margin-bottom: 1.6rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.stat {
  background: rgba(24, 24, 22, 0.72);
  border: 1px solid rgba(234, 228, 216, 0.12);
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Clickable card → social profile */
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.stat:hover {
  background: rgba(24, 24, 22, 0.95);
  border-color: var(--cream);
  transform: translateY(-3px);
}
.stat__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--cream);
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stat__label img { width: 14px; height: 14px; }
.stat__value {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1;
  color: var(--cream);
}
.stat__sub { font-size: 0.8rem; color: var(--cream); opacity: 0.75; }

/* --- Audiencia --------------------------------------------- */
.audience {
  background: rgba(24, 24, 22, 0.72);
  border: 1px solid rgba(234, 228, 216, 0.12);
  border-radius: 20px;
  padding: 1.8rem clamp(1.2rem, 4vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  text-align: center;
}
.audience__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.audience__label { font-size: 0.9rem; color: var(--cream); opacity: 0.8; }
.audience__value {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  color: var(--cream);
}
.audience__sub { font-size: 0.85rem; color: var(--cream); opacity: 0.8; }

/* --- Lanzamientos ------------------------------------------ */
/* Lanzamientos reuses the música .gallery / .record cards, but its caption
   shows Spotify + YouTube stream counts instead of the full icon-link row. */
.record__caption--stats {
  justify-content: space-between;
  gap: 0.8rem;
}
.record__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0.9;
}
.record__stat img { width: 16px; height: 16px; }
.record__stat:hover { opacity: 1; transform: translateY(-2px); }

/* --- Contacto ---------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 4vw, 2.4rem);
  margin: 0 auto;
}
.contact__card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  padding: 1.6rem 2rem;
  border-radius: 18px;
  background: rgba(24, 24, 22, 0.78);
  border: 1px solid rgba(234, 228, 216, 0.14);
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  word-break: break-word;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.contact__card:hover {
  background: rgba(24, 24, 22, 0.95);
  border-color: var(--cream);
  transform: translateY(-2px);
}

/* --- Footer ------------------------------------------------
   Full-viewport-width bar with a centered inner row. Groups (brand,
   contact, socials) space out on desktop and stack/wrap on portrait. */
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 3rem;
  border-top: 1px solid rgba(234, 228, 216, 0.15);
  background: rgba(24, 24, 22, 0.55);
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem clamp(1.2rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
}

/* A footer group (brand / contact / socials) */
.site-footer__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
}
.site-footer__group--socials { gap: 0.9rem; }

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--cream);
  font-family: var(--display);
  letter-spacing: 0.06em;
  font-size: 1rem;
}

.press__handle {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.85;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  word-break: break-word;
}
.press__handle:hover { opacity: 1; }

.press__footer-icon { width: 26px; height: auto; opacity: 0.9; }

/* Social icon links in the footer */
.site-footer__socials a {
  display: inline-flex;
  width: 20px;
  height: 20px;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}
.site-footer__socials a:hover { opacity: 1; transform: translateY(-2px); }
.site-footer__socials img { width: 100%; height: 100%; display: block; }

/* Portrait / mobile: stack the groups, left-aligned, comfortable spacing. */
@media (max-width: 640px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    text-align: left;
  }
  .site-footer__group { gap: 0.5rem 1rem; }

  /* Contact handles: each on its own full-width row, clearly separated
     rather than a cramped stacked list. */
  .site-footer__group--contact {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .site-footer__group--contact .press__handle {
    padding: 0.75rem 0;
    font-size: 1rem;
    border-top: 1px solid rgba(234, 228, 216, 0.12);
  }
  .site-footer__group--contact .press__handle:first-child {
    border-top: none;
  }
}

/* ============================================================
   PRESS KIT — responsive
   ============================================================ */
@media (max-width: 780px) {
  .members { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .press { padding: 5.5rem 1rem 3rem; }
  .press__cover { min-height: 60vh; margin-bottom: 3rem; }
  .members { grid-template-columns: repeat(2, 1fr); }
  /* If the last member ends up alone on its row (odd count in a 2-col
     grid), span both columns and center it — sized to exactly one
     column's width so it stays the same size as the others. */
  .member:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - clamp(0.6rem, 2vw, 1.4rem)) / 2);
    margin-inline: auto;
  }
  .shows__gallery { grid-template-columns: repeat(2, 1fr); }
  .audience { grid-template-columns: 1fr; gap: 1.2rem; }
  .contact { grid-template-columns: 1fr; }
  .press__section { margin-bottom: 3.2rem; }
}

/* ============================================================
   EVENTOS — event cards grid
   Rectangular photo cards (like a listings row), ~4 per row.
   ============================================================ */
.events__heading {
  max-width: 1200px;
  margin: 0 auto 1.4rem;
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.04em;
}
/* Space between the two event sections */
.events__heading + .events { margin-bottom: 3.5rem; }

.events {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
}

.event {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-out);
  /* Cards are <a> links: strip the default anchor styling. */
  color: var(--cream);
  text-decoration: none;
}
.event:hover { transform: translateY(-4px); }

/* Landscape photo (placeholder tint until an image is set inline) */
.event__photo {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background-color: rgba(234, 228, 216, 0.1);
  border: 1px solid rgba(234, 228, 216, 0.18);
  background-size: cover;
  /* Posters are portrait; fill the landscape card anchored to the top so
     the top of the poster stays visible (crop happens at the bottom). */
  background-position: center top;
  filter: grayscale(1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  margin-bottom: 0.9rem;
}
/* Upcoming-event flyers show in full color (they're posters, not B&W show
   photos). Also center them so the whole flyer reads. */
.event--flyer .event__photo {
  filter: none;
  background-position: center;
}

.event__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.event__name {
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.1;
}
.event__date {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.event__venue {
  color: var(--cream);
  opacity: 0.75;
  font-size: 0.9rem;
}

/* ============================================================
   EVENTOS — responsive
   ============================================================ */
@media (max-width: 900px) {
  .events { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .events { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .event__photo { border-radius: 10px; }
}
@media (max-width: 380px) {
  .events { grid-template-columns: 1fr; }
}

/* ============================================================
   EVENTOS — card link + hover preview affordance
   ============================================================ */
.event--link {
  cursor: pointer;
}
/* While previewing the carousel, show the photos in full color and lift
   the card slightly. */
.event--link.is-previewing .event__photo {
  filter: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}
.event--link:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
  border-radius: 16px;
}

/* ============================================================
   EVENTO — single event gallery page
   ============================================================ */
.evento {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6.5rem clamp(1.2rem, 5vw, 3rem) 4rem;
}

.evento__back {
  display: inline-block;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.8;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  margin-bottom: 1.4rem;
  transition: opacity 0.2s;
}
.evento__back:hover { opacity: 1; }

.evento__head {
  margin-bottom: 2.4rem;
}
.evento__title {
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
}
.evento__meta {
  margin-top: 0.6rem;
  color: var(--cream);
  opacity: 0.8;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  letter-spacing: 0.02em;
}

.evento__empty {
  color: var(--cream);
  opacity: 0.85;
  font-size: 1.05rem;
}
.evento__empty a { color: var(--cream); }

/* Scrolling photo strips: 3 rows marqueeing left → right. Hovering (or
   tapping, via .is-slow) slows them down. */
.strips {
  --strip-h: clamp(150px, 22vh, 240px); /* uniform strip/photo height */
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.6vw, 1rem);
  overflow: hidden;
  /* Break out of the centered .evento container to span the full viewport. */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.strip {
  overflow: hidden;
  width: 100%;
}

/* The moving track holds two copies of the photo set. Its transform is driven
   by a requestAnimationFrame loop in evento.js so the speed can change
   smoothly on hover without the position jumping. */
.strip__track {
  display: flex;
  gap: clamp(0.6rem, 1.6vw, 1rem);
  width: max-content;
  will-change: transform;
}

/* Each photo: fixed height, natural width (landscape stays wide, portrait
   becomes narrower at the same height). */
.strip__item {
  flex: 0 0 auto;
  height: var(--strip-h);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.strip__item img {
  height: 100%;
  width: auto;
  display: block;
  filter: grayscale(1);
  transition: filter 0.3s var(--ease-out);
}
.strip__item:hover img { filter: grayscale(0); }
.strip__item:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

/* Direction and speed (incl. the smooth hover slow-down) are handled in JS.
   Under reduced-motion the JS loop doesn't run; let the strips scroll manually. */
@media (prefers-reduced-motion: reduce) {
  .strips { overflow-x: auto; }
  .strip { overflow-x: visible; }
}

/* ============================================================
   LIGHTBOX — full-size photo overlay
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15, 15, 14, 0.92);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(234, 228, 216, 0.4);
  background: rgba(24, 24, 22, 0.4);
  color: var(--cream);
  cursor: pointer;
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(24, 24, 22, 0.75);
  border-color: var(--cream);
}
.lightbox__close {
  top: 1.2rem;
  right: 1.2rem;
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 2rem;
  line-height: 1;
}
.lightbox__nav--prev { left: 1.2rem; }
.lightbox__nav--next { right: 1.2rem; }
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(2px); }

@media (max-width: 640px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox__nav--prev { left: 0.6rem; }
  .lightbox__nav--next { right: 0.6rem; }
  .lightbox__close { top: 0.8rem; right: 0.8rem; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .strip__item img,
  .lightbox__close,
  .lightbox__nav { transition: none; }
}

/* ============================================================
   MEDIA — full-bleed wall of 5 scrolling strips
   ============================================================ */
.media {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 7.5rem 0 5rem; /* no side padding: strips run full-bleed */
}
/* The title keeps the normal content inset even though the strips don't. */
.media .musica__head {
  padding: 0 clamp(1.2rem, 5vw, 4rem);
}
/* The base .strips rule already breaks out to 100vw; just tune the height
   for the media wall (a touch shorter so 5 rows fit comfortably). */
.media__strips {
  --strip-h: clamp(140px, 20vh, 220px);
}

/* ============================================================
   LANDING PAGE — stacked modules (hero → carousel → eventos →
   música strip → press kit). Each section sits above the site
   background; inner reveal blocks fade in on scroll.
   ============================================================ */
.home-section {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem clamp(1.2rem, 5vw, 4rem);
}
.home-section__title {
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  text-align: center;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 2.5rem;
}
.home-section__more {
  margin-top: 2rem;
  text-align: center;
}
.home-section__more a {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.85;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(234, 228, 216, 0.4);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.home-section__more a:hover { opacity: 1; }

/* The events grids sit inside a .home-section here (no separate .musica
   main), so give them the standard centered max width. */
.home-section .events,
.home-section .events__heading { max-width: 100%; }

/* Press kit rendered inline inside the landing page: drop the page-level
   top padding the standalone .press has, since the home-section already
   provides spacing. */
.press--inline {
  padding: 0;
  max-width: 100%;
}

/* ---- MÚSICA: pinned horizontal-scroll strip ----
   Outer wrapper is one viewport tall PLUS the horizontal distance (set by JS
   as --pin-extra). The viewport sticks while that extra height scrolls, and
   JS maps the scroll progress to horizontal movement of the track. */
.music-pin {
  --strip-h: clamp(220px, 32vw, 380px); /* bigger covers so the section reads full */
  --pin-extra: 0px;
  position: relative;
  z-index: 1;
  height: calc(100vh + var(--pin-extra));
}
.music-pin__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.music-pin__inner {
  width: 100%;
}
/* Tighten the title so the title + subtitle + strip read as one cluster. */
.music-pin__inner .home-section__title {
  margin-bottom: 0.6rem;
}
.music-pin__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
  color: var(--cream);
  opacity: 0.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  margin-bottom: 2rem;
}
.music-pin__arrow {
  font-size: 1.1em;
  line-height: 1;
  animation: musicArrowBob 1.8s ease-in-out infinite;
}
/* The two arrows bob in opposite phase (one leads up, one leads down). */
.music-pin__arrow:first-child { animation-delay: 0.9s; }
@keyframes musicArrowBob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .music-pin__arrow { animation: none; }
}

/* Full-viewport-width strip container; the track inside can overflow right.
   touch-action: pan-y lets the browser handle vertical scroll natively while
   we handle horizontal swipes in JS (converting them to page scroll). */
.music-strip {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.music-strip:active { cursor: grabbing; }
.music-strip__track {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  width: max-content;
  /* Start the first cover at the same left edge as the centered 1200px
     content (like the events grid), and end the last cover at the matching
     right edge. On narrow screens both collapse to the normal page inset. */
  padding-left: max(clamp(1.2rem, 5vw, 4rem), (100vw - 1200px) / 2);
  padding-right: max(clamp(1.2rem, 5vw, 4rem), (100vw - 1200px) / 2);
  will-change: transform;
}
.music-strip .strip__item {
  flex: 0 0 auto;
  height: var(--strip-h);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.music-strip .strip__item img {
  height: 100%;
  width: auto;
  display: block;
  filter: none; /* override the shared .strip__item img grayscale */
}

/* Reduced motion / no-JS: no pinning — just a normal horizontally-scrollable
   row so all albums remain reachable. */
@media (prefers-reduced-motion: reduce) {
  .music-pin { height: auto; }
  .music-pin__viewport { position: static; height: auto; padding: 3rem 0; }
  .music-strip { overflow-x: auto; }
}

@media (max-width: 640px) {
  .home-section { padding: 3.5rem 0; }
  .home-section__title { padding: 0 1rem; }
  .home-section .events,
  .home-section .events__heading { padding-left: 1rem; padding-right: 1rem; }
  /* Press kit: keep a 1rem breathing margin from the viewport edges. */
  #press-kit .press--inline { padding-left: 1rem; padding-right: 1rem; }
}