/* =====================================================================
   DevBuss Resuelve · Carrusel de fondos HD con fundido cruzado
   Usado por: b2b_comercial_resuelve.html y demo_hero_cinematico_resuelve.html
   Lógica: assets/js/hero-slideshow.js
   ===================================================================== */

.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; z-index: 0;
  filter: brightness(0.9) contrast(1.06) saturate(1.1);
  /* 2.4 s: debe coincidir con FUNDIDO_MS en hero-slideshow.js */
  transition: opacity 2.4s cubic-bezier(0.45, 0, 0.25, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
/* La nueva imagen aparece ENCIMA; la anterior queda visible debajo hasta terminar */
.hero-slide.is-active  { opacity: 1; z-index: 2; }
.hero-slide.is-leaving { opacity: 1; z-index: 1; transition: none; }

/* Movimiento cinematográfico lento (Ken Burns) que continúa durante el fundido */
.hero-slide.is-active,
.hero-slide.is-leaving {
  animation: heroKenBurns var(--kb-dur, 10s) linear forwards;
}
@keyframes heroKenBurns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(var(--kx, -1.2%), var(--ky, -0.8%), 0); }
}

/* Indicadores: barras de progreso clicables */
.hero-dot { padding: 10px 0; background: none; border: 0; cursor: pointer; }
.hero-dot:focus-visible { outline: 2px solid #F5A524; outline-offset: 2px; border-radius: 4px; }
.hero-dot-bar {
  display: block; position: relative; overflow: hidden;
  width: 34px; height: 4px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.28);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
}
.hero-dot:hover .hero-dot-bar { background: rgba(255, 255, 255, 0.45); }
.hero-dot.is-active .hero-dot-bar { width: 58px; }
.hero-dot-fill {
  position: absolute; inset: 0; background: #F5A524;
  transform: scaleX(0); transform-origin: left center;
}
.hero-dot.is-active .hero-dot-fill { animation: heroDotFill var(--dot-dur, 7s) linear forwards; }
@keyframes heroDotFill { to { transform: scaleX(1); } }

#heroCaption { transition: opacity 0.45s ease; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active, .hero-slide.is-leaving { animation: none; }
  .hero-slide { transition-duration: 1.2s; }
}