/*
 * Slider de portada.
 *
 * Las diapositivas se apilan todas en la misma celda de un grid, una encima
 * de otra, y el cambio es un fundido de opacidad hecho por CSS. Asi la altura
 * del bloque no varia durante la transicion.
 *
 * Antes las diapositivas eran bloques normales en el flujo del documento y se
 * cruzaban con fadeIn/fadeOut de jQuery: durante el cruce las dos eran
 * visibles a la vez, la entrante se colocaba DEBAJO de la saliente y el
 * contenedor doblaba su altura, lo que producia el salto.
 */

.flexslider {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.flexslider .slides {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Todas las diapositivas comparten la celda 1/1: quedan superpuestas. */
.flexslider .slides > li {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--flex-anim-speed, 600ms) ease-in-out,
    visibility 0s linear var(--flex-anim-speed, 600ms);
}

/* Sin JavaScript, o antes de que arranque, solo se ve la primera. */
.flexslider:not(.flexslider-ready) .slides > li:first-child {
  opacity: 1;
  visibility: visible;
}

/* Con el slider en marcha manda la clase que mueve el JS. */
.flexslider .slides > li.flex-active-slide {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--flex-anim-speed, 600ms) ease-in-out,
    visibility 0s;
}

.flexslider .slides img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .flexslider .slides > li,
  .flexslider .slides > li.flex-active-slide {
    transition: none;
  }
}