/* =================================================================
   HERO — slider de portada (Savi Safety)
   Portado de `savisafety-static-v2` (`base.css` §4), 06/09/2026. Escrito de
   cero sobre la misma plantilla: `hero.js` pone `is-activo` en la diapositiva
   visible y aquí solo está el fundido, las flechas y los puntos.

   La proporción la manda la plantilla (`--jri-hero-ar`, de la imagen subida),
   como ya hacía el plugin: v2 fija 1487/451 porque su imagen es esa. Con un
   valor fijo, un banner de otra medida perdería altura por `object-fit: cover`.
   ================================================================= */
.jri-hero {
  position: relative;
  background: #0d0d0d;
  overflow: hidden;
}

.jri-hero-slides {
  position: relative;
  width: 100%;
  aspect-ratio: var(--jri-hero-ar, 1487 / 451);
  min-height: 260px;
}

/* Fundido. La inactiva además se oculta con `visibility` para no capturar el
   clic ni ser 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 .7s ease, visibility 0s linear .7s;
}

.jri-hero-slide.is-activo {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s;
}

.jri-hero-slide picture { display: block; width: 100%; height: 100%; }

.jri-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767px) {
  .jri-hero-slides { aspect-ratio: var(--jri-hero-ar-movil, 16 / 9); }
}

@media (prefers-reduced-motion: reduce) {
  .jri-hero-slide,
  .jri-hero-slide.is-activo { transition: none; }
}

/* Flechas y puntos: ocultos hasta que `hero.js` engancha (`jri-hero--listo`).
   Un control que no hace nada es peor que ninguno. */
.jri-hero-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(255 255 255 / 75%);
  cursor: pointer;
  transition: color .25s;
}

.jri-hero--listo .jri-hero-arrow { display: grid; }

.jri-hero-arrow:hover { color: var(--brand-yellow); }

.jri-hero-arrow svg { width: 26px; height: 26px; }

.jri-hero-arrow--prev { left: 14px; }
.jri-hero-arrow--next { right: 14px; }

.jri-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  translate: -50% 0;
  z-index: 5;
  display: none;
  gap: 9px;
}

.jri-hero--listo .jri-hero-dots { display: flex; }

.jri-hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 45%);
  cursor: pointer;
  transition: background .25s, transform .25s;
}

/* El activo, blanco y algo mayor, como en v2. (El amarillo era el de JRI.) */
.jri-hero-dots button[aria-selected="true"] { background: var(--white); transform: scale(1.15); }

@media (max-width: 820px) {
  .jri-hero--listo .jri-hero-arrow { display: none; }
}