/* SEXY LOCURAS - carrusel móvil v4, 06-11-2026.
   Se añade DESPUÉS de los CSS v2 y v3. Solo portada en móviles <= 767px.
   Mantiene las fotos auténticas (sin cambiarlas), textos, enlaces y controles.
   El primer archivo boceto-oficial-2026.png es una captura panorámica del
   diseño de escritorio. El encuadre móvil enfoca exclusivamente su fotografía.
*/
@media screen and (max-width:767px){
  /* Reducimos la altura sin deformar la imagen ni ampliar el documento. */
  html body.sl-home .sl-carousel,
  html body.sl-home .sl-carousel .sl-slides,
  html body.sl-home .sl-carousel .sl-slide,
  html body.sl-home .sl-carousel .sl-ref-hero {
    height:clamp(310px,85vw,326px)!important;
    min-height:0!important;
    max-height:326px!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  html body.sl-home .sl-carousel .sl-slide[hidden]{display:none!important}
  html body.sl-home .sl-carousel .sl-slide,
  html body.sl-home .sl-carousel .sl-ref-hero{
    position:relative!important;
    background:#190811!important;
  }
  /* Franja fotográfica superior: 40% de altura, 60% para el texto.
     Los archivos originales se mantienen; usamos solo recorte de presentación.
  */
  html body.sl-home .sl-carousel .sl-ref-hero .sl-ref-image{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:0!important;
    top:0!important;
    bottom:auto!important;
    left:-112%!important;
    right:auto!important;
    width:250%!important;
    max-width:none!important;
    height:40%!important;
    max-height:none!important;
    margin:0!important;
    object-fit:cover!important;
    object-position:center 25%!important;
    transform:none!important;
    filter:none!important;
    pointer-events:none!important;
  }
  /* Las portadas de entrega y boutique tienen su fotografía a la derecha. */
  html body.sl-home .sl-carousel .sl-photo-slide .sl-slide-bg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:0!important;
    top:0!important;
    bottom:auto!important;
    left:-79%!important;
    right:auto!important;
    width:185%!important;
    max-width:none!important;
    height:40%!important;
    max-height:none!important;
    margin:0!important;
    object-fit:cover!important;
    object-position:center 27%!important;
    transform:none!important;
    filter:none!important;
    pointer-events:none!important;
  }
  /* Evita máscaras oscuras sobre la franja fotográfica. */
  html body.sl-home .sl-carousel .sl-photo-slide::before{
    content:""!important;
    position:absolute!important;
    z-index:1!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:40%!important;
    background:linear-gradient(180deg,transparent 72%,rgba(20,3,14,.12))!important;
    pointer-events:none!important;
  }
  /* Textos separados de las fotos; no se superponen ni dejan vacío al fondo. */
  html body.sl-home .sl-carousel .sl-mobile-hero,
  html body.sl-home .sl-carousel .sl-photo-slide .sl-slide-copy{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-content:flex-start!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:0 6px!important;
    position:absolute!important;
    z-index:3!important;
    top:40%!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    height:60%!important;
    min-height:0!important;
    max-height:60%!important;
    max-width:none!important;
    padding:8px 12px 35px!important;
    margin:0!important;
    transform:none!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    background:linear-gradient(180deg,#1d0816 0%,#12060e 100%)!important;
    text-align:left!important;
  }
  html body.sl-home .sl-carousel .sl-mobile-hero > p:first-child,
  html body.sl-home .sl-carousel .sl-slide-copy .sl-slide-eyebrow{
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 3px!important;
    padding:0!important;
    font-size:9px!important;
    line-height:1.2!important;
    letter-spacing:.13em!important;
    white-space:normal!important;
  }
  html body.sl-home .sl-carousel .sl-mobile-hero h1,
  html body.sl-home .sl-carousel .sl-slide-copy h2{
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 5px!important;
    padding:0!important;
    font-size:clamp(20px,5.8vw,24px)!important;
    font-weight:700!important;
    line-height:1.06!important;
    letter-spacing:-.01em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    white-space:normal!important;
  }
  html body.sl-home .sl-carousel .sl-mobile-hero > p:not(:first-child),
  html body.sl-home .sl-carousel .sl-slide-copy > p:not(.sl-slide-eyebrow){
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 7px!important;
    padding:0!important;
    font-size:10.5px!important;
    line-height:1.28!important;
    white-space:normal!important;
  }
  html body.sl-home .sl-carousel .sl-mobile-hero > a.btn{
    flex:0 1 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    box-sizing:border-box!important;
    min-height:31px!important;
    height:31px!important;
    max-height:31px!important;
    width:auto!important;
    max-width:calc(50% - 3px)!important;
    min-width:0!important;
    margin:0!important;
    padding:6px 7px!important;
    font-size:9px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    letter-spacing:0!important;
    text-decoration:none!important;
  }
  html body.sl-home .sl-carousel .sl-mobile-hero > a.btn .sl-icon{
    width:11px!important;height:11px!important;flex:none!important;
  }
  html body.sl-home .sl-carousel .sl-slide-copy .sl-slide-actions{
    flex:0 0 100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  html body.sl-home .sl-carousel .sl-slide-actions a.btn{
    display:inline-flex!important;
    flex:0 1 auto!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(50% - 3px)!important;
    height:31px!important;
    min-height:31px!important;
    margin:0!important;
    padding:6px 7px!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    letter-spacing:0!important;
  }
  /* Las zonas de clic invisibles del banner panorámico no deben bloquear
     los enlaces del bloque de texto móvil. */
  html body.sl-home .sl-carousel .sl-ref-hero .sl-hero-products,
  html body.sl-home .sl-carousel .sl-ref-hero .sl-hero-promotions{
    display:none!important;
    pointer-events:none!important;
  }
  /* Controles siempre accesibles, sin tapar la fotografía o los botones. */
  html body.sl-home .sl-carousel .sl-carousel-prev,
  html body.sl-home .sl-carousel .sl-carousel-next{
    z-index:6!important;
    position:absolute!important;
    top:auto!important;
    bottom:5px!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    font-size:19px!important;
    transform:none!important;
  }
  html body.sl-home .sl-carousel .sl-carousel-prev{left:8px!important}
  html body.sl-home .sl-carousel .sl-carousel-next{right:8px!important}
  html body.sl-home .sl-carousel .sl-carousel-dots{
    z-index:6!important;
    position:absolute!important;
    top:auto!important;
    bottom:8px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
  html body.sl-home .sl-carousel .sl-carousel-pause{
    z-index:6!important;
    position:absolute!important;
    top:7px!important;
    bottom:auto!important;
    right:8px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    font-size:12px!important;
  }
}
/* Pantallas horizontales pequeñas: no aumentar innecesariamente el banner. */
@media screen and (max-width:767px) and (orientation:landscape) and (max-height:500px){
  html body.sl-home .sl-carousel,
  html body.sl-home .sl-carousel .sl-slides,
  html body.sl-home .sl-carousel .sl-slide,
  html body.sl-home .sl-carousel .sl-ref-hero{
    height:320px!important;max-height:320px!important
  }
}