/**
 * Campañas visuales en el carrusel de portada (Hero).
 *
 * Muestra exclusivamente las imágenes oficiales expandidas a todo el ancho
 * disponible del hero, sin tarjetas, marcos ni copy añadido redundante,
 * preservando la visibilidad íntegra de textos, logotipos y controles.
 *
 * @version 20261012.2
 */

/* Altura del contenedor Hero para campañas:
 * Cuando la lámina activa es una campaña institucional, la altura se adapta
 * dinámicamente a la proporción panorámica de los artes oficiales evitando
 * bandas vacías excesivas, mientras conserva altura íntegra para la lámina inicial.
 */
.hero.hero-carousel--campaigns {
  min-height: 620px;
}

.hero.hero-carousel--campaigns:has(.hero-slide--campaign.is-active) {
  min-height: clamp(440px, 40vw, 560px);
}

/* Estructura general de la lámina de campaña expandida */
.hero-slide--campaign {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #031c3b;
  background: radial-gradient(130% 90% at 50% 50%, #083c79 0%, #052a56 55%, #031c3b 100%);
  color: var(--biblian-white, #fff);
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Contenedor del arte oficial: aprovecha todo el ancho disponible sin marcos ni límites rígidos */
.hero-campaign__media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.hero-campaign__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  transform-origin: center center;
}

/* Imagen expandida: ocupa todo el ancho disponible, neutraliza zoom heredado de main.css,
   sin tarjeta, marco ni bordes redondeados, garantizando logos y textos completos con contain */
.hero-slide--campaign .hero-slide__image,
.hero-slide--campaign.is-active .hero-slide__image,
.hero-carousel.is-depth-managed .hero-slide--campaign.is-active .hero-slide__image {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  animation: none;
  transform: none;
  will-change: auto;
  border-radius: 0;
  box-shadow: none;
}

/* Movimiento de profundidad sutil y seguro en el contenedor de arte sin recortar bordes */
.hero-slide--campaign.is-active .hero-campaign__art {
  animation: hero-campaign-subtle-depth 6s ease-in-out infinite alternate;
}

@keyframes hero-campaign-subtle-depth {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(0.988) translate3d(0, 0, 0);
  }
}

/* Controles de pausa y accesibilidad para el movimiento */
.hero-carousel.is-paused .hero-slide--campaign.is-active .hero-campaign__art,
.biblian-a11y-stop-motion .hero-slide--campaign.is-active .hero-campaign__art {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide--campaign .hero-campaign__art,
  .hero-slide--campaign.is-active .hero-campaign__art {
    animation: none !important;
    transform: none !important;
  }
}

/* Salvaguarda de accesibilidad y pureza visual: ningún copy añadido visible */
.hero-slide--campaign .hero-campaign__content,
.hero-slide--campaign .hero-campaign__card {
  display: none !important;
}

/* Responsividad en tabletas */
@media (max-width: 900px) {
  .hero.hero-carousel--campaigns:has(.hero-slide--campaign.is-active) {
    min-height: clamp(340px, 44vw, 440px);
  }

  .hero-campaign__media {
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: 0;
  }
}

/* Responsividad en móvil: imagen expandida en todo el ancho y controles de 7 láminas utilizables */
@media (max-width: 620px) {
  .hero.hero-carousel--campaigns:has(.hero-slide--campaign.is-active) {
    min-height: clamp(260px, 54vw, 340px);
  }

  .hero-campaign__media {
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: 0;
  }

  /* Los controles del carrusel con 7 indicadores se distribuyen en 2 filas
     para evitar desbordamiento y mantenerse 100% utilizables sin tapar el arte */
  .hero-carousel--campaigns .hero-carousel__controls {
    bottom: 12px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 6px;
    padding-inline: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-carousel--campaigns .hero-carousel__dots {
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
  }

  .hero-carousel--campaigns .hero-carousel__dot {
    width: 20px;
    height: 20px;
  }

  .hero-carousel--campaigns .hero-carousel__pause {
    grid-column: 1 / -1;
    justify-self: center;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.72rem;
  }
}

/* Pantallas extra pequeñas: mantiene el ancho completo y altura proporcionada */
@media (max-width: 440px) {
  .hero.hero-carousel--campaigns:has(.hero-slide--campaign.is-active) {
    min-height: clamp(230px, 62vw, 300px);
  }

  .hero-campaign__media {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .hero-carousel--campaigns .hero-carousel__controls {
    bottom: 8px;
    gap: 4px;
    padding-inline: 6px;
  }

  .hero-carousel--campaigns .hero-carousel__dots {
    gap: 2px;
    padding: 4px 6px;
  }
}

/* Proporción original a todo el ancho, también en monitores grandes. */
.hero.hero-carousel--campaigns:has(.hero-slide--campaign.is-active) { min-height: calc(100vw * 5 / 12 + 80px); }
.hero.hero-carousel--campaigns:has(.hero-slide--campaign.is-active img[width="2100"]) { min-height: calc(100vw * 13 / 42 + 80px); }
/* Controles de escritorio fuera de la imagen, con el arte a todo el ancho. */
.hero-slide--campaign { align-items: flex-start; }
.hero-campaign__media { height: calc(100% - 80px); }
/* Franja móvil propia para los controles, fuera del arte original. */
@media (max-width: 620px) {
  .hero.hero-carousel--campaigns:has(.hero-slide--campaign.is-active) { min-height: calc(100vw * 5 / 12 + 100px); }
  .hero.hero-carousel--campaigns:has(.hero-slide--campaign.is-active img[width="2100"]) { min-height: calc(100vw * 13 / 42 + 100px); }
  .hero-slide--campaign { align-items: flex-start; }
  .hero-campaign__media { height: calc(100% - 100px); }
}