/* =========================================================
   Centinelas — Sección "Música"

   Cabecera centrada, la ilustración a un lado, el reproductor
   de Spotify al otro, y el botón debajo. La retícula y el
   botón son los mismos de calendario.css: esta hoja no
   redefine `.boton`, lo reutiliza.
   ========================================================= */

.musica {
  position: relative;
  padding: clamp(64px, 11vh, 130px) clamp(20px, 5vw, 64px);
  /* Superficie en vez de fondo: separa este bloque del calendario
     sin necesidad de una línea divisoria. */
  background: var(--c-superficie);
}

/* ---------- Cabecera ---------- */

.musica__cabecera {
  max-width: 760px;
  margin: 0 auto clamp(34px, 5vh, 58px);
  text-align: center;
}

.musica__etiqueta {
  display: inline-block;
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: var(--c-amarillo);
  letter-spacing: .02em;
}

.musica__titulo {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.musica__titulo .subrayado {
  width: min(58%, 300px);
  margin-inline: auto;
  color: var(--c-lima);
}

/* La cabecera va sin párrafo: el título y el reproductor ya dicen de
   qué va esto. Si algún día se quiere una línea de texto debajo,
   `.musica__desc` es el sitio — calcado de `.calendario__desc`:

   .musica__desc {
     margin: clamp(18px, 3vh, 28px) auto 0;
     max-width: 52ch;
     font-size: clamp(.95rem, 1.9vw, 1.05rem);
     line-height: 1.75;
     color: var(--c-texto-suave);
     text-wrap: pretty;
   }
*/

/* ---------- Retícula ---------- */

.musica__grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

/* ---------- Ilustración ---------- */

.musica__figura {
  margin: 0;
  position: relative;
  min-width: 0;
}

.musica__figura img {
  display: block;
  width: 100%;

  /* El PNG viene recortado, sin fondo: se apoya directamente sobre la
     superficie como los personajes del hero, sin marco ni borde. Por
     eso NO se recorta la proporción como en `.calendario__media`: sus
     bandas transparentes (84 px arriba, 28 abajo) no se ven, y la de
     arriba es justo donde flotan las notas. */
  aspect-ratio: 1024 / 1100;

  /* Obligatorio: el <img> lleva el atributo HTML height="1100", que el
     navegador aplica como estilo de baja prioridad. Sin esta línea ese
     atributo gana, anula el aspect-ratio y la imagen sale estirada. */
  height: auto;

  /* Sin sombra, a propósito. Un `drop-shadow` sigue la silueta, que es
     lo correcto para un recorte... salvo que este dibujo llega pegado a
     los bordes izquierdo, derecho e inferior de su caja: la silueta ahí
     es recta, y la sombra dibujaba un rectángulo oscuro alrededor de la
     ilustración. Sobre este fondo la imagen se separa sola. */
}

/* ---------- Notas musicales ----------

   Salen de encima de sus cabezas, suben y se desvanecen. Cada una
   lleva su duración y su retraso: con los mismos valores subirían
   todas a la vez y se leería como un bloque, no como música.

   Van con porcentajes sobre la figura, así que siguen a la
   ilustración cuando cambia de tamaño. */

.nota {
  position: absolute;
  width: clamp(20px, 2.9vw, 40px);
  color: var(--c-lima);
  pointer-events: none;
  /* Arranca invisible: el fotograma 0% ya lo dice, pero sin esto se
     ve un destello en la primera pintura, antes de que empiece. */
  opacity: 0;
  animation: nota-sube 5.4s ease-in-out infinite;
}

.nota svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Encima del chico, junto al dedo que señala arriba */
.nota--1 { left: 17%; top: 4%;  color: var(--c-lima);         animation-duration: 5.2s; animation-delay: -0.4s; }
.nota--2 { left: 31%; top: 0%;  color: var(--c-amarillo);     animation-duration: 6.4s; animation-delay: -2.6s; width: clamp(24px, 3.5vw, 48px); }

/* Entre los dos */
.nota--3 { left: 53%; top: 6%;  color: var(--c-morado-claro); animation-duration: 5.8s; animation-delay: -1.5s; }

/* Encima de ella */
.nota--4 { left: 70%; top: 10%; color: var(--c-azul);         animation-duration: 6.8s; animation-delay: -3.4s; width: clamp(24px, 3.5vw, 48px); }
.nota--5 { left: 88%; top: 3%;  color: var(--c-coral);        animation-duration: 5.0s; animation-delay: -0.9s; }

@keyframes nota-sube {
  0%   { opacity: 0;   transform: translate(0, 14px)    rotate(-10deg) scale(.82); }
  15%  { opacity: .95; }
  55%  { opacity: .95; transform: translate(8px, -26px) rotate(6deg)   scale(1); }
  100% { opacity: 0;   transform: translate(-4px, -62px) rotate(14deg) scale(1.08); }
}

/* ---------- Reproductor ---------- */

.musica__reproductor { min-width: 0; }

.musica__reproductor iframe {
  display: block;
  width: 100%;
  /* 352 es el alto del formato de Spotify que muestra la lista de
     canciones; por debajo de 352 el propio reproductor se cambia a
     la versión compacta de una sola línea. */
  height: 352px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .5);
}

/* ---------- Botón ---------- */

.musica__accion {
  margin: clamp(38px, 6vh, 64px) auto 0;
  text-align: center;
}

/* Una nota en el botón en vez de la flecha del calendario: el
   traslado horizontal del hover no encaja con un icono redondo. */
.musica__accion .boton svg { transition: transform .25s ease; }
.musica__accion .boton:hover svg { transform: translateX(0) rotate(-12deg) scale(1.1); }

/* ---------- Móvil ---------- */

@media (max-width: 860px) {
  .musica__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(26px, 5vh, 40px);
  }

  .musica__figura,
  .musica__reproductor,
  .musica__accion {
    width: 100%;
    max-width: 440px;
  }

  /* La ilustración presenta y el reproductor remata: en una sola
     columna el orden es el que cuenta la historia. */
  .musica__figura     { order: 1; }
  .musica__reproductor { order: 2; }

  .musica__titulo .subrayado { width: min(62%, 240px); }

  .musica__accion .boton {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* ---------- Movimiento reducido ----------
   Las notas se quedan quietas y visibles: son parte del dibujo, no
   solo decoración animada, así que esconderlas cambiaría la escena. */

@media (prefers-reduced-motion: reduce) {
  .nota {
    animation: none;
    opacity: .9;
    transform: translate(0, -10px);
  }
  .musica__accion .boton:hover svg { transform: none; }
}