/* ============================================================
   Plantilla de slider del hero (novedades).
   Sin estilos inline: compatible con la CSP (style-src sin unsafe-inline).
   Los fondos de cada slide los aplica hero-slider.js vía element.style.
   ============================================================ */

.hsl {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 90vh, 880px);
  overflow: hidden;
  background: #050b18;
  color: #fff;
  isolation: isolate;
}

/* ---- Slides (fade) ---- */
.hsl__viewport { position: absolute; inset: 0; }

.hsl__slide {
  position: absolute;
  inset: 0;
  background-color: #050b18;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.hsl__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}

.hsl__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 10, 24, 0.9) 0%, rgba(3, 10, 24, 0.6) 42%, rgba(3, 10, 24, 0.2) 72%, rgba(3, 10, 24, 0.08) 100%);
}

/* ---- Contenido ---- */
.hsl__inner {
  position: relative;
  z-index: 1;
  min-height: clamp(560px, 90vh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  padding-block: 6rem;
}

.hsl__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: #2bb6d4;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hsl__eyebrow-line { width: 46px; height: 2px; background: #2bb6d4; display: inline-block; }

.hsl__title {
  margin: 0;
  max-width: 14ch;
  color: #fff;
  font-family: var(--font-display, Bitter), Georgia, serif;
  font-weight: 700;
  font-size: clamp(3rem, 1.5rem + 6vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.hsl__text {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.6;
}
.hsl__text strong { color: #2bb6d4; font-weight: 600; }

/* ---- Flechas ---- */
.hsl__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hsl__arrow svg { width: 26px; height: 26px; }
.hsl__arrow:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); }
.hsl__arrow:focus-visible { outline: 2px solid #2bb6d4; outline-offset: 2px; }
.hsl__arrow--prev { left: clamp(0.75rem, 2vw, 2.5rem); }
.hsl__arrow--next { right: clamp(0.75rem, 2vw, 2.5rem); }

/* ---- Puntos + contador (esquina inferior derecha) ---- */
.hsl__nav {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 5vh, 3rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.hsl__dots { display: flex; align-items: center; gap: 0.5rem; }

.hsl__dot {
  position: relative;
  width: 14px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  cursor: pointer;
  transition: width 0.45s ease, background 0.45s ease;
}
.hsl__dot.is-active { width: 78px; background: rgba(255, 255, 255, 0.32); }
.hsl__dot:focus-visible { outline: 2px solid #2bb6d4; outline-offset: 3px; }

/* Barra que se llena en el punto activo (sincronizada con el auto-play) */
.hsl__dot-fill {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
.hsl__dot.is-active.is-running .hsl__dot-fill {
  animation: hslFill linear forwards;
}
@keyframes hslFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hsl__counter {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* ---- Barra de progreso a lo ancho del pie del slider ----
   Una sola barra horizontal que cruza todo el ancho; su largo crece según
   el slide actual (1/3 → 2/3 → completo) y se achica al volver al primero. */
.hsl__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
}
.hsl__progress-fill {
  display: block;
  height: 100%;
  width: 33.333%;
  background: #fff;
  transition: width 0.6s ease;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .hsl__inner { padding-block: 5rem 7rem; }
  .hsl__nav { left: clamp(1rem, 6vw, 2rem); right: auto; }
  /* Flechas de navegación en móvil: se muestran abajo a la derecha (no en el
     centro de los lados, donde se encimaban con el texto del slide). Quedan
     balanceadas con los puntos+contador que están abajo a la izquierda. */
  .hsl__arrow {
    top: auto;
    bottom: clamp(1.5rem, 5vh, 3rem);
    transform: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .hsl__arrow svg { width: 22px; height: 22px; }
  .hsl__arrow--prev { left: auto; right: calc(clamp(1rem, 6vw, 2rem) + 52px); }
  .hsl__arrow--next { left: auto; right: clamp(1rem, 6vw, 2rem); }
}

/* ---- Accesibilidad: sin movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  .hsl__slide { transition: opacity 0.2s linear; }
  .hsl__dot.is-active.is-running .hsl__dot-fill { animation: none; transform: scaleX(1); }
  .hsl__progress-fill { transition: none; }
}

/* ============================================================
   OCULTAR EL SLIDER TEMPORALMENTE — dejar fija la 3ra diapositiva.
   Pedido del cliente: por ahora el slider no cambia; se muestra únicamente
   la 3ra diapositiva (assets/trabaja-cta-fondo.jpg) COMPLETA —imagen + su
   texto (categoría, título, descripción) + el degradado—, ocultando solo los
   controles del slider (flechas, puntos, contador y barra de progreso). NO se
   borra nada: el markup y el JS quedan intactos, así que para REACTIVAR el
   slider más adelante basta con quitar este bloque. Aplica en móvil y desktop.
   ============================================================ */
/* Congelar en la 3ra diapositiva: se ve solo esa (con su imagen y su texto)
   sin importar lo que haga el auto-play (el JS sigue corriendo, pero estas
   reglas !important mandan sobre la clase .is-active que alterna el JS). */
.hsl__slide { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
.hsl__slide:nth-of-type(3) { opacity: 1 !important; visibility: visible !important; }
/* Ocultar SOLO los controles del slider (siguen en el DOM, solo ocultos). El
   título y la descripción del slide se mantienen tal como estaban. También se
   oculta el "eyebrow" (CATEGORÍA DE LA NOVEDAD) por pedido del cliente; sigue en
   el DOM, solo oculto. */
.hsl__arrow,
.hsl__nav,
.hsl__progress,
.hsl__eyebrow { display: none !important; }