/* =================================================================
   HERO / CARRUSEL

   Quién manda: `hero.js`, que pone `is-activo` en una diapositiva y la quita
   de las demás. Aquí solo está el crossfade.

   Antes esto era una animación de CSS de 14 s con dos retardos
   (`.jri-hero-slide--1` / `--2`) y **la plantilla nunca ha pintado esas dos
   clases**: las dos diapositivas corrían la misma animación sin desfase, así
   que aparecían y desaparecían a la vez y el tramo 50 %→100 % de los
   fotogramas dejaba las dos a `opacity: 0` — **siete segundos de gris**, que
   es el fondo `--dark-1` de la sección. Y `is-activo` no tenía ninguna regla,
   así que el guion y los puntos estaban muertos: no había forma de arreglar
   el desfase sin quitar la animación, porque una animación en curso gana a
   cualquier declaración normal.
   ================================================================= */
.jri-hero {
  position: relative;
  background: var(--brand-dark);
  overflow: hidden;
}
.jri-hero-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 550;
}
/* `visibility` y no solo `opacity`: una diapositiva transparente sigue
   capturando el clic y sigue siendo un enlace tabulable. Con dos banners
   enlazados, el de arriba se llevaba el clic del que se estaba viendo.
   El retardo la mantiene visible mientras dura el fundido de salida. */
.jri-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.jri-hero-slide.is-activo {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}
/* Sin JavaScript solo hay una diapositiva marcada por el servidor, la primera:
   el hero se queda quieto en ella en vez de vaciarse. */
/* Con una segunda imagen para móvil el marcado es `<picture>`, que es en línea
   por defecto: sin esto no ocupa la caja y el `height: 100%` del `img` no
   tiene contra qué resolverse. */
.jri-hero-slide picture { display: block; width: 100%; height: 100%; }
.jri-hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* La proporción de móvil la manda la plantilla, tomada de la imagen que se
   subió. Sin ella se queda la de siempre y no cambia nada. */
@media (max-width: 767px) {
  .jri-hero-slides { aspect-ratio: var(--jri-hero-ar-movil, 1920 / 550); }
}
/* Quien pidió menos movimiento ve el cambio, pero seco. */
@media (prefers-reduced-motion: reduce) {
  .jri-hero-slide,
  .jri-hero-slide.is-activo { transition: none; }
}

/* -----------------------------------------------------------------
   Puntos

   Ocultos hasta que `hero.js` engancha (`jri-hero--listo`): un control que no
   hace nada es peor que ninguno. Misma regla que las flechas del carrusel de
   productos.

   Iban escritos para `<span>` y la plantilla pinta `<button>`, así que no les
   alcanzaba ni una declaración. El activo se marca por `aria-selected`, que es
   lo que el guion ya mantiene al día.
   ----------------------------------------------------------------- */
.jri-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: none;
  gap: 8px;
}
.jri-hero--listo .jri-hero-dots { display: flex; }

.jri-hero-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .2s ease;
}
.jri-hero-dots button[aria-selected="true"] { background: var(--brand-yellow); }