/**
 * banner-carousel.css
 * -------------------------------------------------------------------------
 * Estilo del carrusel de fotos de la portada. Las diapositivas se apilan
 * una encima de otra y solo la "activa" es visible (con una transición
 * suave de opacidad), así se ve como si fueran cambiando solas.
 * -------------------------------------------------------------------------
 */

.carrusel-banner {
  position: relative;
  width: 100%;
  min-height: 440px;
  overflow: hidden;
  background: linear-gradient(135deg, #4a3627, var(--color-negro-calido));
}

.carrusel-banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carrusel-banner__slide--activo {
  opacity: 1;
}

.carrusel-banner__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Si la foto no existe todavía (ver bannerCarousel.js), la diapositiva
   queda solo con este degradado cálido de relleno, en vez de un ícono de
   imagen rota. */
.carrusel-banner__slide--sin-foto {
  background: linear-gradient(135deg, #6b4b30, var(--color-negro-calido));
}

/* Texto centrado que se ve encima de cualquier diapositiva */
.carrusel-banner__superposicion {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding: 20px;
  /* Una sombra de texto y un velo oscuro leve ayudan a que el texto se lea
     bien encima de cualquier foto, sin importar qué tan clara sea. */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.25));
}

.carrusel-banner__superposicion h1 {
  font-size: 36px;
  margin-bottom: 8px;
}

.carrusel-banner__superposicion p {
  font-family: var(--fuente-texto);
  font-size: 16px;
  letter-spacing: 0.5px;
}

.carrusel-banner__puntos {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.carrusel-banner__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
}

.carrusel-banner__punto--activo {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
}

@media screen and (max-width: 600px) {
  .carrusel-banner {
    min-height: 320px;
  }
  .carrusel-banner__superposicion h1 {
    font-size: 26px;
  }
}