/* 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;
}

/* Headings de cada slide superpuestos en la misma celda (como los tags). Sin esto,
   los 3 slides ocultos (opacity:0) siguen ocupando espacio en el flujo e inflan el
   bloque de texto (~4× su altura), dejando el texto visible arriba del centro. Con
   grid + misma celda solo ocupa la altura de un slide → el bloque queda compacto y
   se centra verticalmente de verdad (.rt-hero-v1-content ya usa justify-content:center). */
.rt-hero-v1 .rt-hero-heading-text {
  display: grid !important;
}
.rt-hero-v1 .rt-hero-heading-text > .w-layout-vflex {
  grid-area: 1 / 1 / 2 / 2;
}

/* 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;
  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;
}