/* -------------------------------------------------------------------------
   Slider de portada
   · Cada imagen es un proyecto y lleva a su ficha.
   · El pie con el título aparece sobre la foto, abajo a la izquierda.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   El velo decorativo de la portada
   · <div class="overlay overlay-dark"> es hermano del wrapper dentro de
     .mySwiper, va en z-index 9 y cubre el slider entero. Es solo decoración
     —fondo transparente— pero se comía todos los clics: ni el título ni la
     foto ni los puntitos llegaban a recibirlos.
   · Con pointer-events:none los eventos lo atraviesan y siguen burbujeando
     hasta .swiper, así que el arrastre del carrusel se mantiene igual.
   ------------------------------------------------------------------------- */

.mySwiper .overlay,
.mySwiper .overlay-dark {
  pointer-events: none;
}

.mySwiper .swiper-pagination {
  z-index: 10;
}

.mySwiper .hero-slide {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.mySwiper .hero-slide_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* GSAP mueve la escala mientras la imagen está en pantalla. */
  transform-origin: center center;
  will-change: transform;
}

/* Un degradado corto abajo, solo para que el texto se lea sobre cualquier foto.
   Las de arquitectura suelen ser muy claras y el blanco desaparece. */
/* .mySwiper .hero-slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  pointer-events: none;
} */

.mySwiper .hero-slide_pie {
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  bottom: clamp(56px, 8vh, 96px);
  z-index: 3;
  display: flex;
  flex-direction: column;

  gap: 4px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

.mySwiper .hero-slide_titulo {
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: .9;
  letter-spacing: -.01em;
}

.mySwiper .hero-slide_lugar {
  font-size: clamp(12px, 1.1vw, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
  border: 1px solid;
  padding: .3rem .5rem 0.1rem;

  line-height: 1.5;
  border-radius: 1px;
}

/* El filete de 1px bajo el título: se dibuja solo al entrar la imagen y se
   extiende hasta el final al pasar el ratón. En reposo ya está, así que se lee
   como parte del texto y no como un adorno que aparece de la nada. */
.mySwiper .hero-slide_titulo::after {
  /* content: ""; */
  display: block;
  width: 0%;
  height: 1px;
  margin-top: 10px;
  background: currentColor;
  transition: width .6s cubic-bezier(.4, 0, .2, 1) .34s;
}

.mySwiper .swiper-slide-active .hero-slide_titulo::after {
  width: 100%;
}

.mySwiper .hero-slide:hover .hero-slide_titulo::after,
.mySwiper .hero-slide:focus-visible .hero-slide_titulo::after {
  width: 100%;
  transition-delay: 0s;
}

/* -------------------------------------------------------------------------
   Entrada del pie
   · El texto sube 14px y aparece cuando su imagen pasa a ser la activa,
     primero el título y después la localidad.
   · Va enganchado a .swiper-initialized a propósito: si Swiper no llegara a
     arrancar, esta regla no aplica y el texto se queda sencillamente visible.
     Nunca puede quedarse un título invisible esperando una clase que no llega.
   ------------------------------------------------------------------------- */

.mySwiper.swiper-initialized .hero-slide_titulo,
.mySwiper.swiper-initialized .hero-slide_lugar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
    transform .7s cubic-bezier(.4, 0, .2, 1);
}

.mySwiper.swiper-initialized .swiper-slide-active .hero-slide_titulo {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}

.mySwiper.swiper-initialized .swiper-slide-active .hero-slide_lugar {
  opacity: .82;
  transform: none;
  transition-delay: .3s;

}

.mySwiper .hero-slide:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

/* El pie no debe chocar con los puntitos de Swiper, que van centrados abajo. */
@media (max-width: 768px) {
  .mySwiper .hero-slide_pie {
    left: 50%;
    bottom: 8rem;
    transform: translateX(-50%);
  }

  .mySwiper .hero-slide {
    align-items: center;
    flex-flow: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mySwiper .hero-slide_img {
    will-change: auto;
  }

  .mySwiper .hero-slide_titulo::after,
  .mySwiper.swiper-initialized .hero-slide_titulo,
  .mySwiper.swiper-initialized .hero-slide_lugar {
    transition: none;
  }

  .mySwiper.swiper-initialized .hero-slide_titulo,
  .mySwiper.swiper-initialized .hero-slide_lugar {
    opacity: 1;
    transform: none;
  }

  .mySwiper.swiper-initialized .hero-slide_lugar {
    opacity: .82;
  }

  .mySwiper .swiper-slide-active .hero-slide_titulo::after {
    width: 48px;
  }
}