/* =========================================================
   HOME — estilos específicos de la página de inicio
   ---------------------------------------------------------
   1. Hero (collage compuesto + fondo papel full width)
   2. Animación de entrada del collage (2.5s, randomizada)
   3. Review destacada
   4. Bio + collage + CTA
   5. Agenda (3 próximos conciertos)
   ========================================================= */

/* =====================================================
   1) HERO — 100vh, fondo papel full width, collage dentro
   ===================================================== */
.hero {
  position: relative;
  width: 100%;
  /* 100vh exactos. La banda azul y el logo viven DENTRO como overlays,
     atravesando la línea inferior. */
  height: 100vh;
  min-height: 540px;
  background-image: url("../assets/img/home/bg-paper.webp");
  background-size: cover;
  background-position: center;
  padding-block: clamp(6rem, 10vw, 9rem) 0;
  padding-inline: var(--gutter);
  overflow: hidden;
  isolation: isolate;
}
/* Gradiente suave de papel en la parte superior (::before) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%,
              rgba(255,253,248,0.4) 0%, transparent 60%);
  z-index: 1;
}
/* Banda azul anclada al fondo del hero (::after) */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: var(--band-height);
  background: var(--color-divider-band);
  z-index: 4;
  pointer-events: none;
}
/* Logo que atraviesa la banda por su línea media */
.hero__brand {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  width: calc(100% - 2 * var(--gutter));
  height: auto;
  aspect-ratio: 1920 / 226;
  z-index: 50;
  pointer-events: none;
  filter: invert(96%) sepia(8%) saturate(280%) hue-rotate(347deg) brightness(99%) contrast(94%);
}
.hero__inner {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  height: 100%;
}
.hero__collage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Reset base de todas las piezas */
.piece {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  /* Parallax post-carga (ver js/main.js): traslación independiente
     de `transform`, así no pisa la animación de entrada (scale+rotate)
     ni la rotación final de cada pieza. El suavizado (lerp) se hace
     en JS frame a frame — una `transition` CSS aquí no interpola bien
     cuando el valor depende de custom properties sin registrar. */
  translate: var(--parallax-x, 0px) var(--parallax-y, 0px);
}

/* COMPOSICIÓN DEL COLLAGE
   Ajustado al mockup original:
   - 4 fotos individuales en cada esquina (BW arriba-izq, color
     arriba-der, cellist abajo-izq, chica abajo-der GRANDE)
   - Banda teal vertical a la derecha CON z-index alto y hard-light
     para que afecte al violinist arriba y a la chica abajo
   - 2-3 platforms grises hard-light bajo el quartet (le dan "suelo")
   - Texturas de tinta y papelitos como capas decorativas
*/

/* ---- CAPA 1: texturas suaves de fondo ---- */
.piece--coral-tex-s {
  top: 0%; left: -4%;
  width: 18%;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.7;
}
.piece--coral-tex-l {
  top: 38%; left: -7%;
  width: 26%;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.8;
}

/* Z-INDEX (de fondo a frente):
   1  texturas suaves (coral-tex-*, ink, shapes)
   3  violinist-bw  (DEBAJO de las cintas blancas)
   4  shape-coral, newspaper
   5  cellist, violinist-color
   6  paper-h1, paper-h2, paper-v  (encima del BW)
   8  bandas grises platforms (hard-light)
   9  banda teal vertical
  10  foto del cuarteto (centro)
  12  violinista mujer (ENCIMA del teal)                          */

/* ---- texturas suaves ---- */
.piece--ink-l {
  top: 4%; left: 22%;
  width: 44%;
  z-index: 2;
  opacity: 0.85;
  mix-blend-mode: multiply;
  rotate: -2deg;
}
.piece--ink-s {
  top: 60%; left: 5%;
  width: 16%;
  z-index: 2;
  opacity: 0.75;
  mix-blend-mode: multiply;
}
.piece--shapes {
  top: 60%; left: 38%;
  width: 24%;
  z-index: 2;
  opacity: 0.85;
  mix-blend-mode: multiply;
}

/* ---- shape-coral (diagonal arriba-centro) ---- */
.piece--coral {
  top: 6%; left: 28%;
  width: 38%;
  z-index: 4;
  mix-blend-mode: hard-light;
  rotate: -3deg;
}
.piece--newspaper {
  top: 2%; left: 80%;
  width: 22%;
  z-index: 4;
  rotate: -8deg;
  opacity: 0.92;
}

/* ---- CINTAS BLANCAS — distribuidas 400px en vertical
       desde el límite inferior antiguo (~34%). Suben hasta el top. ---- */
.piece--paper-h1 {
  top: 0%; left: 18%;
  width: 50%;
  z-index: 6;
  rotate: -2deg;
}
.piece--paper-h2 {
  top: 22%; left: 14%;
  width: 56%;
  z-index: 6;
  rotate: 3deg;
}
.piece--paper-v {
  top: 0%; left: 52%;
  height: 38%;
  width: auto;
  z-index: 6;
  rotate: 8deg;
}

/* ---- FOTOS INDIVIDUALES ---- */
/* Arriba-izq: violinist BW — MÁS GRANDE, DEBAJO de las cintas blancas */
.piece--violinist-bw {
  top: -2%; left: 0%;
  height: 60%;
  width: auto;
  z-index: 3;
}
/* Arriba-der: violinist color */
.piece--violinist-color {
  top: -2%; left: 68%;
  height: 50%;
  width: auto;
  z-index: 5;
}
/* Abajo-izq: chelista entero (sin recorte). Las cintas y el cuarteto
   lo tapan por arriba; queda como en el mockup. */
.piece--cellist {
  display: block;
  bottom: -4%; left: 4%;
  height: 60%;
  width: auto;
  z-index: 5;
}
/* Abajo-der: violinista mujer — MÁS GRANDE y ENCIMA de la banda teal */
.piece--violinist-female {
  top: 52%; left: 60%;
  width: 42%;
  z-index: 12;
}

/* ---- PLATFORMS grises hard-light bajo el cuarteto ---- */
.piece--platform {
  background: #c4c4c4;
  z-index: 8;
  mix-blend-mode: hard-light;
}
/* Ancladas a la banda azul, igual que la foto del cuarteto: así se quedan
   siempre bajo los pies del grupo y no flotando a media altura. */
.piece--platform-1 {
  top: auto; bottom: calc(var(--band-height) + 7%); left: 26%;
  width: 50%;
  height: 11%;
  rotate: -1.5deg;
  opacity: 0.85;
}
.piece--platform-2 {
  top: auto; bottom: calc(var(--band-height) + 2.5%); left: 30%;
  width: 42%;
  height: 8%;
  rotate: 1deg;
  opacity: 0.7;
}
.piece--platform-3 {
  /* +1% para que la rotación no asome por debajo, sobre la banda azul */
  top: auto; bottom: calc(var(--band-height) + 1%); left: 24%;
  width: 56%;
  height: 6%;
  rotate: -0.5deg;
  opacity: 0.6;
}

/* ---- BANDA TEAL vertical (derecha) — z-index entre cuarteto y chica ---- */
.piece--teal {
  top: 4%; left: 80%;
  height: 84%;
  width: auto;
  z-index: 9;
  mix-blend-mode: hard-light;
  rotate: 2deg;
}

/* ---- FOTO DEL CUARTETO — protagonista ----
   Antes iba anclada al centro con un empujón de -100px: en pantallas bajas
   (720-800 px de alto) el grupo se salía por arriba y el nav flotante caía
   justo sobre las cabezas. Ahora se apoya sobre la banda azul y su alto es
   exactamente el hueco libre entre el nav y esa banda, así que las cabezas
   nunca quedan tapadas, sea cual sea la altura de la ventana. */
.piece--quartet {
  top: auto;
  bottom: var(--band-height);
  left: 50%;
  translate: -50% 0;
  width: auto;
  height: calc(100vh - 5rem - var(--band-height));
  max-height: none;
  object-fit: contain;
  z-index: 13;
  filter: drop-shadow(0 14px 30px rgba(10, 10, 10, 0.18));
}

/* =====================================================
   2) ANIMACIÓN DE ENTRADA — randomizada vía JS
   ---------------------------------------------------------
   Cada pieza entra con fade + escala + rotación aleatoria,
   en 0.4s, con delay asignado por JS (total ~2.5s).
   La foto central (.piece--quartet) entra la última.
   `rotate` (propiedad individual) se mantiene para
   conservar la rotación final del collage; la animación
   solo toca `transform`, así se componen sin conflicto.
   ===================================================== */
.hero__collage .piece {
  opacity: 0;
  transform: scale(var(--enter-scale, 1.15))
             rotate(var(--enter-rotate, 0deg));
  animation: pieceEnter var(--enter-dur, 0.2s) var(--ease-out) forwards;
  animation-delay: var(--enter-delay, 0s);
}

@keyframes pieceEnter {
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* En reduced-motion el script no asigna delays y todo
   aparece al instante (controlado en main.js) */
@media (prefers-reduced-motion: reduce) {
  .hero__collage .piece {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =====================================================
   2.5) BANDA DIVISORIA + LOGO OVERLAY
   La banda es de 80px en color #1a2732. El logo SVG vive
   dentro, pegado al bottom, y la mayor parte sobresale
   hacia arriba sobre el collage.
   ===================================================== */
/* (Estilos antiguos de .hero-divider eliminados — la banda y el
   logo ahora viven dentro del .hero como overlays absolutos.) */

/* =====================================================
   3) REVIEW — frase destacada (Melómano digital)
   ===================================================== */
.review {
  padding-block: clamp(5rem, 10vw, 9rem);
}
.review__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: var(--space-7);
  align-items: start;
}
.review__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
}
.review__quote {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-display);
  max-width: 36ch;
}
.review__cta { align-self: flex-start; }
/* =====================================================
   HERO MÓVIL — el collage está compuesto para horizontal;
   en vertical las piezas se recortan (tras el nav) y se
   descolocan. En móvil simplificamos: la foto del cuarteto
   como protagonista, integrada con tintas + cintas de papel
   (el mismo recurso que en desktop enmascara el recorte), y
   "Cuarteto Iberia" entra dentro de la primera pantalla.
   ===================================================== */
@media (max-width: 820px) {
  .hero {
    /* Aire bajo el nav-pill flotante para que la composición
       no quede tapada por el menú. */
    padding-block: clamp(7rem, 26vw, 9rem) 0;
  }

  /* Fotos individuales sueltas fuera en móvil: son las que se
     cortan tras el menú y rompen la composición en vertical. */
  .piece--violinist-bw,
  .piece--violinist-color,
  .piece--cellist,
  .piece--violinist-female,
  .piece--newspaper,
  .piece--paper-v,
  .piece--ink-s,
  .piece--platform-3 { display: none; }

  /* Protagonista: centrada, entera, entre el nav y la banda.
     `height: auto` revierte el alto calculado de escritorio. */
  .piece--quartet {
    top: 45%; left: 50%;
    bottom: auto;
    translate: -50% -50%;
    width: min(94%, 460px);
    height: auto;
    max-height: 62vh;
  }

  /* Tinta de fondo que la integra (no flota sobre papel liso). */
  .piece--ink-l {
    top: 18%; left: 50%;
    translate: -50% 0;
    width: 112%;
    opacity: 0.6;
    rotate: -2deg;
  }
  .piece--shapes {
    top: auto; bottom: 7%; left: 50%;
    translate: -50% 0;
    width: 72%;
  }

  /* Cintas blancas que enmascaran el recorte inferior de la
     foto — el detalle de integración que gusta en desktop. */
  .piece--paper-h1 {
    top: auto; bottom: 20%; left: 2%;
    width: 66%; rotate: -3deg;
  }
  .piece--paper-h2 {
    top: auto; bottom: 14%; left: 30%;
    width: 64%; rotate: 2deg;
  }

  /* Acentos de color. */
  .piece--teal {
    top: 9%; left: 77%;
    height: 60%; rotate: 3deg;
  }
  .piece--coral {
    top: 5%; left: 18%;
    width: 62%; rotate: -3deg;
  }
  .piece--coral-tex-l { top: 28%; left: -14%; width: 42%; }
  .piece--coral-tex-s { top: 1%; left: -6%; width: 28%; }

  /* Tarima gris bajo el grupo (`bottom: auto` revierte el anclaje a la
     banda que usa escritorio). */
  .piece--platform-1 { top: 60%; bottom: auto; left: 12%; width: 74%; }
  .piece--platform-2 { top: 66%; bottom: auto; left: 20%; width: 60%; }
}

@media (max-width: 720px) {
  .review__inner { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* =====================================================
   4) BIO — texto a la izq, foto sangrada a la der,
   barra vertical salmón separando ambas mitades.
   ===================================================== */
.bio {
  padding: 0;
  /* la sección ocupa todo el ancho; el sangrado lo aporta
     la columna derecha al llegar al borde del viewport. */
}
.bio__inner {
  display: grid;
  /* Tres columnas: copy | banda salmón 50px | foto */
  grid-template-columns: 1fr 50px 1fr;
  align-items: stretch;
  min-height: clamp(560px, 70vh, 780px);
}
.bio__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4rem, 8vw, 7rem);
  padding-left: clamp(1rem, 6vw, 7rem);
  padding-right: clamp(2rem, 5vw, 5rem);
}
.bio__copy > * { max-width: 46ch; }
.bio__separator {
  background: var(--color-coral-soft);
  align-self: stretch;
}
.bio__visual {
  position: relative;
  overflow: hidden;
  /* sangra a borde del viewport por la derecha */
  align-self: stretch;
}
.bio__visual img.bio__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bio__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-display);
  margin-top: var(--space-4);
}
.bio__text {
  margin-top: var(--space-5);
  font-size: var(--fs-400);
  color: rgba(26, 39, 50, 0.82);
  /* Interlineado denso (≈1.15) como pidió Pablo — sigue
     siendo legible, pero el bloque se siente compacto. */
  line-height: 1.15;
}
.bio__cta { margin-top: var(--space-6); align-self: flex-start; }

@media (max-width: 820px) {
  .bio__inner { grid-template-columns: 1fr; min-height: auto; }
  .bio__copy {
    padding-inline: var(--gutter);
    padding-block: var(--space-7);
  }
  .bio__separator {
    height: 24px; width: 100%;
  }
  .bio__visual { min-height: 60vh; }
}

/* =====================================================
   5) AGENDA — 3 próximos conciertos (cards numeradas)
   ===================================================== */
.agenda {
  padding-block: clamp(4rem, 8vw, 8rem);
}
.agenda__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.agenda__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}
.agenda__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-700);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--color-display);
  margin-top: var(--space-3);
}

.agenda__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.agenda__item {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 280px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.agenda__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.agenda__num {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-coral-soft);
  color: var(--color-paper);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
}
.agenda__date {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
}
.agenda__day  { font-size: var(--fs-700); }
.agenda__moyr { font-size: var(--fs-300); margin-top: var(--space-2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.agenda__venue {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
}
.agenda__loc {
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--fs-200);
}
.agenda__meta {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-200);
  color: var(--color-muted);
}

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