/* hero-slider.css — Ajustes del slider del hero (PTB)
 * El diseño exportado de Webflow estaba dimensionado para 3 slides. Estos
 * overrides permiten N slides sin tocar el CSS principal de Webflow:
 *  - los indicadores se reparten en una sola fila (grid-auto-flow: column)
 *  - la barra de progreso se adapta al ancho de su columna
 *  - los tags se apilan (el activo se muestra por opacity desde hero-slider.js)
 */

/* Indicadores (desktop): una fila con tantas columnas como slides haya */
.rt-hero-v1 .rt-slider-line-box-wrapper {
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  grid-template-columns: none !important;
}
.rt-hero-v1 .rt-hero-slide-box .rt-slider-line-box {
  width: 100% !important;
}

/* Indicadores (mobile ≤767px): 2 columnas para que los rótulos respiren */
@media screen and (max-width: 767px) {
  .rt-hero-v1 .rt-slider-line-box-wrapper {
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Tags apilados en el mismo punto; el activo se revela por opacity */
.rt-hero-v1 .rt-position-relative-hero {
  display: block !important;
  width: auto !important;
  min-width: 300px;
  min-height: 34px;
  overflow: visible !important;
}
.rt-hero-v1 .rt-position-relative-hero > .rt-hero-tag-box {
  position: absolute !important;
  top: 0;
  left: 0;
}

/* Badge de la slide Wellness: degradado naranjo semitransparente + ícono en
   contorno (como el mockup); destaca del resto sin perder el aire translúcido */
.rt-hero-v1 .rt-tag-wellness {
  background: linear-gradient(100deg, rgba(255,120,15,0.85) 0%, rgba(255,120,15,0.25) 100%) !important;
  border: 1px solid rgba(255,210,170,0.5) !important;
  column-gap: 8px;
  align-items: center;
}
.rt-hero-v1 .rt-tag-wellness .rt-hero-tag {
  color: #fff !important;
}
.rt-hero-v1 .rt-tag-wellness-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
}