/**
 * Hero de la home: carril deslizable, tipo Amazon.
 *
 * Divi muestra una diapositiva cada vez y cambia con fundido; en movil eso
 * no da ninguna pista de que haya mas contenido al lado. Aqui se convierte
 * en un carril horizontal donde la anterior y la siguiente asoman por los
 * bordes.
 *
 * REGLA DE ORO: solo se toca la DISPOSICION (poner las diapositivas en fila
 * y que se deslicen). El interior de cada una —titulo, texto, boton,
 * tamanos, colores, alineacion— se deja como lo pinta Divi. Una version
 * anterior forzaba recortes de linea, degradados y alturas fijas, y el
 * contenido quedaba peor que el original.
 */

/* --- El carril, comun a movil y escritorio ------------------------------ */
html body.et-db .et_pb_slider.lbm-hero-carril {
  overflow-x: visible !important;
  overflow-y: hidden !important;
}

html body.et-db .lbm-hero-carril .et_pb_slides {
  display: flex !important;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior-x: contain;
  /*
   * "pan-x pan-y" y no "none": con "none" el navegador no se quedaba
   * ningun gesto y el JS tenia que mover la pagina a mano, sin inercia y
   * perdiendo los arrastres algo diagonales. Asi se encarga el navegador
   * de los dos ejes.
   *
   * Tampoco vale "pan-y" a secas: significa "solo vertical" y deja el
   * carril sin deslizamiento lateral.
   */
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}
html body.et-db .lbm-hero-carril .et_pb_slides::-webkit-scrollbar {
  display: none;
}

/*
 * Divi oculta las inactivas con display:none y las posiciona en absoluto:
 * hay que devolverlas todas a la fila. Solo eso, nada de tamanos internos.
 */
html body.et-db .lbm-hero-carril .et_pb_slide {
  display: block !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  z-index: auto !important;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background-size: cover !important;
  background-position: center !important;
}

/* Las vecinas, atenuadas: la del centro es la que manda. */
html body.et-db .lbm-hero-carril .et_pb_slide {
  transition: filter .3s ease, opacity .3s ease;
  filter: brightness(.75);
}
html body.et-db .lbm-hero-carril .et_pb_slide.is-centro {
  filter: none;
}

/*
 * 06C-P2: LCP = <img>, no background-image. Se anula el fondo CSS solo
 * mientras el picture sigue en el DOM (si el JS de Divi lo quita, el
 * JPEG de Divi vuelve). Recorte = el de Divi: escritorio right center,
 * ≤980 center, ≤767 center 22%.
 */
html body.et-db .lbm-hero-carril .et_pb_slide:has(> .lbm-hero-lcp-pic),
html body.et-db .lbm-hero-carril .et_pb_slide:has(> .lbm-hero-lcp) {
  background-image: none !important;
}
html body.et-db .lbm-hero-carril .lbm-hero-lcp-pic,
html body.et-db .lbm-hero-carril .lbm-hero-lcp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  z-index: 0;
}
html body.et-db .lbm-hero-carril .lbm-hero-lcp {
  object-fit: cover;
  object-position: right center;
  max-width: none;
}
@media (max-width: 980px) {
  html body.et-db .lbm-hero-carril .lbm-hero-lcp {
    object-position: center;
  }
}
@media (max-width: 767px) {
  html body.et-db .lbm-hero-carril .et_pb_slide_0 .lbm-hero-lcp {
    object-position: center 22%;
  }
}

/* Flechas fuera: se navega con el dedo, la rueda o los puntos. */
html body.et-db .lbm-hero-carril .et-pb-slider-arrows {
  display: none !important;
}

/* Los puntos, bajo el carril. Caja 24px (taps); el dibujo sigue en 7/20. */
html body.et-db .lbm-hero-carril .et-pb-controllers {
  position: static !important;
  padding: 8px 0 0 !important;
  line-height: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
html body.et-db .lbm-hero-carril .et-pb-controllers a {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
html body.et-db .lbm-hero-carril .et-pb-controllers a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(43, 53, 56, .26);
  transition: width .25s ease, background-color .25s ease, border-radius .25s ease;
}
html body.et-db .lbm-hero-carril .et-pb-controllers .et-pb-active-control::after {
  width: 20px;
  border-radius: 4px;
  background-color: #ef7d00;
}

/* --- Movil -------------------------------------------------------------- */
@media (max-width: 980px) {
  /*
   * A sangre tambien en movil.
   *
   * El modulo va dentro de una columna con margenes (351px de 390), asi que
   * la tarjeta vecina asomaba solo 32px y quedaba cortada a plomo contra el
   * borde del contenedor. Con el ancho completo de pantalla el corte cae
   * fuera de la vista y la vecina se ve entrando de forma natural.
   */
  html body.et-db .et_pb_slider.lbm-hero-carril {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  html body.et-db .lbm-hero-carril .et_pb_slides {
    gap: 10px;
    /* El hueco lateral deja ver las vecinas; scroll-padding hace que el
       anclaje lo respete y la tarjeta no se pegue al borde. */
    padding: 0 14px;
    scroll-padding: 0 14px;
  }
  html body.et-db .lbm-hero-carril .et_pb_slide {
    flex: 0 0 calc(100% - 28px);
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 14px;
    overflow: hidden;
  }
}

/*
 * Telefono: el slider de Divi llega a 720px de alto (~85% de un iPhone).
 * Un 20% menos deja ver la siguiente seccion sin recortar el texto.
 */
@media (max-width: 767px) {
  html body.home.et-db #et-boc .et-l .et_pb_section_0.et_pb_section,
  html body.home .et_pb_section:has(.lbm-hero-carril),
  html body.home .et_pb_section_0 {
    padding-top: 10px !important;
  }
  html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril,
  html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slider_container_inner {
    min-height: 0 !important;
    height: auto !important;
  }
  html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slide,
  html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slide > .et_pb_container {
    min-height: 518px !important;
    height: 518px !important;
  }
  html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slide > .et_pb_container {
    padding-bottom: 30% !important;
  }
}

/*
 * Tipografia del hero = resto de la home (Futura). Sin sombra: el contraste
 * lo da el velo oscuro, el blanco y el peso.
 */
html body.et-db #et-boc .et-l .et_pb_slider_0.et_pb_slider.lbm-hero-carril .et_pb_slides .et_pb_slide_description .et_pb_slide_title,
html body.et-db #et-boc .et-l .et_pb_slider_0.et_pb_slider.lbm-hero-carril .et_pb_slides .et_pb_slide_description .et_pb_slide_title a,
html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slide_title,
html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slide_title a {
  font-family: "Futura Bold", "Futura", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 3.4vw, 42px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  text-shadow: none !important;
  color: #fff !important;
}
html body.et-db #et-boc .et-l .et_pb_slider_0.et_pb_slider.lbm-hero-carril .et_pb_slides .et_pb_slide_description .et_pb_slide_content,
html body.et-db #et-boc .et-l .et_pb_slider_0.et_pb_slider.lbm-hero-carril .et_pb_slides .et_pb_slide_description .et_pb_slide_content p,
html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slide_content,
html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slide_content p {
  font-family: "Futura Book", "Futura", sans-serif !important;
  font-size: clamp(15.5px, 1.5vw, 18.5px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  color: rgba(255, 255, 255, .92) !important;
}
html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .et_pb_slide:after {
  background: linear-gradient(180deg, rgba(16,18,20,.82) 0%, rgba(16,18,20,.52) 32%, rgba(16,18,20,.18) 52%, rgba(16,18,20,0) 68%) !important;
}
html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .lbm-hero-deal__lbl,
html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .lbm-hero-deal__amt,
html body.et-db #et-boc .et-l .et_pb_slider.lbm-hero-carril .lbm-hero-deal__price {
  text-shadow: none !important;
  font-family: "Futura Bold", "Futura", sans-serif !important;
}
@media (max-width: 767px) {
  html body.et-db #et-boc .et-l .et_pb_slider_0.et_pb_slider.lbm-hero-carril .et_pb_slides .et_pb_slide_description .et_pb_slide_title,
  html body.et-db #et-boc .et-l .et_pb_slider_0.et_pb_slider.lbm-hero-carril .et_pb_slides .et_pb_slide_description .et_pb_slide_title a {
    font-size: 28px !important;
  }
  html body.et-db #et-boc .et-l .et_pb_slider_0.et_pb_slider.lbm-hero-carril .et_pb_slides .et_pb_slide_description .et_pb_slide_content,
  html body.et-db #et-boc .et-l .et_pb_slider_0.et_pb_slider.lbm-hero-carril .et_pb_slides .et_pb_slide_description .et_pb_slide_content p {
    font-size: 16px !important;
  }
  /*
   * Se quita overscroll-behavior-y:none: cortaba el encadenado del scroll
   * vertical del carril hacia la pagina, que es justo lo que ahora quiere
   * hacer el navegador.
   */
}

/* --- Escritorio --------------------------------------------------------- */
@media (min-width: 981px) {
  /*
   * Misma columna que .lbm-visita y .lbm-hx-cats: la fila Divi al 90%
   * (max 2560). El 100vw + padding 9vw dejaba un hueco a la izquierda y
   * una tarjeta mas estrecha que el grow shop de debajo.
   */
  html body.et-db .et_pb_slider.lbm-hero-carril {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body.et-db .lbm-hero-carril .et_pb_slides {
    gap: 16px;
    padding: 0;
    scroll-padding: 0;
  }
  html body.et-db .lbm-hero-carril .et_pb_slide {
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
  }
  html body.et-db .lbm-hero-carril .et_pb_slide.is-centro {
    cursor: default;
  }
}