/* ==========================================================================
   Coppelius · portada (index.html) — ajustes de diagramación, 24/10/2026
   Se carga DESPUÉS de styles.css y solo sobrescribe reglas de la portada.
   Se fusionará en styles.css (cada bloque dice a qué regla sustituye).
   A 1440 y a 390 no cambia nada medible: los ajustes viven en 992–1439
   (capa fluida) y en ≤991 (tablet, derivado: no hay diseño).
   ========================================================================== */

/* Variables: las del sistema de diseño (styles.css). --space-16 = ritmo de tablet. */

/* --------------------------------------------------------------------------
   Áreas táctiles (todos los anchos, sin cambiar lo que se ve)
   -------------------------------------------------------------------------- */

/* Flechas del carrusel de directores: el icono mide 16 (24 en móvil); el padding
   amplía el área a 44 y el margen negativo lo compensa, así que no se mueve nada. */
.directors__navigation-button {
  padding: calc((var(--size-tap-target) - 16px) / 2);
  margin: calc((16px - var(--size-tap-target)) / 2);
}

/* El botón contorneado de 14px medía 43: un píxel por debajo del mínimo */
.directors__button {
  min-height: var(--size-tap-target);
}

/* Puntos de paginación: el área era de 20×20 (punto de 4 + 8 por lado).
   Pasa a 24×24 centrada en cualquier punto (activo de 16 o inactivo de 4). */
.carousel-pagination__dot::after {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* Con dedo, el hueco de 12 hace que esas áreas se pisen: se abre a 20 */
@media (pointer: coarse) {
  .carousel-pagination {
    gap: 20px;
  }
}

/* --------------------------------------------------------------------------
   Capa fluida (992–1439)
   -------------------------------------------------------------------------- */

/* Nombre del director: 72px fijos con interlineado de 64 se solapaban al partir
   en dos líneas (nombres reales más largos) en el panel estrecho de 992–1200.
   5vw = 72 justo a 1440, así que el escritorio del Figma no cambia. */
.directors__name {
  font-size: clamp(56px, 5vw, 72px);
}

/* Artistas: con flex-wrap, entre 992 y 1295 los 6 perfiles caían en 5+1 o 4+2
   (huérfanos). Rejilla de 6 columnas que encogen: a 1440 mide lo mismo
   (6 × 180 + 5 × 24 = 1200, centrado). */
.artists__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0px, 180px));
  justify-content: center;
}

.artists__profile {
  width: auto;
  min-width: 0px;
}

.artists__portrait {
  width: min(150px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   ≤ 991 · tablet (derivado)
   ========================================================================== */
@media (max-width: 991px) {
  /* Hero: el título de 48 ocupaba 5 líneas a 768 y saltaba a 32 en 767.
     Escala con la ventana: 48 a 991, 37 a 768. */
  .hero__title {
    font-size: clamp(36px, 4.8vw, 48px);
    line-height: var(--line-height-heading);
  }

  /* BUG: aspect-ratio + img a height:100% → el min-height:auto del panel
     crecía hasta el alto natural de la foto (878px la de participación y 920
     el retrato a 768, en vez de 432 y 448). min-height:0 + overflow lo fija. */
  .participation__media,
  .directors__portrait-panel {
    min-height: 0px;
    overflow: hidden;
  }

  /* El retrato apaisado recorta por arriba: subir el encuadre para no cortar la cabeza */
  .directors__portrait {
    object-position: center 10%;
  }

  /* Ritmo vertical: 120 (artistas) y 80 (contacto) eran los de escritorio */
  .participation__content {
    padding-block: var(--space-16);
  }

  .directors,
  .artists,
  .contact {
    padding-block: var(--space-16);
  }

  .artists__inner {
    gap: 48px;
  }

  /* Artistas: 3 + 3 */
  .artists__list {
    grid-template-columns: repeat(3, minmax(0px, 180px));
    row-gap: 32px;
  }
}

/* ==========================================================================
   ≤ 767 · móvil (Figma 390) — se restaura lo del móvil que lo anterior pisa
   ========================================================================== */
@media (max-width: 767px) {
  .hero__title {
    font-size: var(--font-size-32);
    line-height: 40px;
  }

  .directors__portrait {
    object-position: center center;
  }

  /* La regla fluida de la base pisaría los 32 del móvil */
  .directors__name {
    font-size: var(--font-size-32);
  }

  /* Flechas móviles de 24: el área vuelve a 44 con 10 por lado */
  .directors__navigation-button {
    padding: calc((var(--size-tap-target) - 24px) / 2);
    margin: calc((24px - var(--size-tap-target)) / 2);
  }

  .directors,
  .artists,
  .contact {
    padding-block: 40px;
  }

  .participation__content {
    padding-block: 40px;
  }

  .artists__inner {
    gap: 32px;
  }

  .artists__list {
    grid-template-columns: minmax(0px, 180px);
    row-gap: 20px;
  }

  .artists__portrait {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 389.98px) {
  .hero__title {
    font-size: var(--font-size-28);
    line-height: 36px;
  }

  .directors__name {
    font-size: var(--font-size-28);
  }
}

/* --------------------------------------------------------------------------
   [Ejemplo] Hero, diapositiva 3 (stock-soprano-ante-el-publico.webp): la
   soprano está a la izquierda del encuadre; en vertical se desplaza el recorte
   para que no quede cortada.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .hero__image--soprano {
    object-position: 25% 50%;
  }
}