/* Slideshow de portada (común a todos los modelos): las fotos se funden una en otra con un
   acercamiento muy suave. Reemplaza al carrusel de Bootstrap/jQuery. Ver js/slides.js. */
.ai-slides { position: absolute; inset: 0; overflow: hidden; }
.ai-slides > .ai-slide { position: absolute !important; inset: 0; width: 100%; height: 100% !important; margin: 0 !important;
  background-repeat: no-repeat; background-size: cover; opacity: 0; transition: opacity 1.8s ease-in-out; will-change: opacity, transform; }
.ai-slides > .ai-slide:first-child, .ai-slides > .ai-slide.activa { opacity: 1; }
.ai-slides.listo > .ai-slide:first-child:not(.activa) { opacity: 0; }
.ai-slides > .ai-slide { z-index: 0; }
.ai-slides > .ai-slide.saliendo { z-index: 1; }
.ai-slides > .ai-slide.activa { z-index: 2; }
/* La que sale sigue acercándose hasta el final de la transición (si no, vuelve a escala 1 y da un salto) */
.ai-slides > .ai-slide.activa, .ai-slides > .ai-slide.saliendo { animation: ai-acercar var(--ai-duracion, 7s) ease-out forwards; }
.ai-slides > .ai-slide.saliendo { opacity: 1 !important; }
@keyframes ai-acercar { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .ai-slides > .ai-slide { transition-duration: .01s; }
  .ai-slides > .ai-slide.activa, .ai-slides > .ai-slide.saliendo { animation: none; }
}
/* Slideshow en el lugar de una foto (Basic): la primera ocupa su alto, las demás encima */
.ai-slides.ai-en-linea { position: relative; inset: auto; }
.ai-slides.ai-en-linea > .ai-slide:first-child { position: relative !important; height: var(--alto, 100vh) !important; }