/** Shopify CDN: Minification failed

Line 238:84 Unexpected "}"

**/
/* ================================================
   PAINPREXX — MOBILE FIX COMPLETO v2.0
   Tema: Build Your Store Theme v15.2.0
   ================================================ */

/* === BASE: Evita encogimiento al hacer zoom === */
html {
  min-width: 320px;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* === MÓVIL GENERAL (hasta 768px) === */
@media screen and (max-width: 768px) {

  /* Secciones a ancho completo */
  .shopify-section,
  .page-width,
  .container,
  section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* ── HERO / BANNER PRINCIPAL ──────────────────── */
  /* Fuerza orden vertical: título → subtítulo → botón */
  .hero__content,
  .banner__content,
  [class*="hero__content"],
  [class*="banner__content"],
  [class*="hero__text"],
  [class*="banner__text"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 30px 20px !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Títulos del hero — tamaño adaptable */
  .hero__heading,
  .banner__heading,
  [class*="hero__heading"],
  [class*="banner__heading"],
  [class*="hero__title"],
  [class*="slideshow__heading"],
  .hero h1, .hero h2, .hero h3,
  .banner h1, .banner h2, .banner h3 {
    font-size: clamp(1.1rem, 5.5vw, 1.8rem) !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Subtítulo del hero */
  .hero__subheading,
  .banner__subheading,
  [class*="hero__subheading"],
  [class*="banner__subheading"] {
    font-size: clamp(0.85rem, 3.5vw, 1.1rem) !important;
    margin: 0 0 12px 0 !important;
    max-width: 100% !important;
  }

  /* Botón CTA — SIEMPRE debajo del texto, nunca superpuesto */
  .hero__button,
  .banner__button,
  [class*="hero__button"],
  [class*="banner__button"],
  [class*="hero__cta"],
  .hero .btn,
  .hero a.button,
  .banner a.button,
  .shopify-section a[class*="btn"],
  .shopify-section a[class*="button"] {
    display: inline-block !important;
    position: relative !important;
    z-index: 3 !important;
    margin-top: 8px !important;
    min-width: 150px !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* ── HEADER / NAVEGACIÓN ──────────────────────── */
  header,
  .header,
  .header__wrapper,
  .site-header {
    width: 100% !important;
    padding: 8px 15px !important;
  }

  /* ── GRID DE PRODUCTOS ────────────────────────── */
  .product-grid,
  [class*="product-grid"],
  .collection-grid,
  .grid--2-col,
  .grid--3-col,
  .grid--4-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Tarjetas de producto */
  .product-card,
  [class*="product-card"],
  [class*="card__wrapper"] {
    width: 100% !important;
  }

  /* ── IMÁGENES ─────────────────────────────────── */
  img,
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── FOOTER ───────────────────────────────────── */
  footer,
  .footer,
  .site-footer {
    width: 100% !important;
    padding: 20px 15px !important;
  }

  .footer__content,
  .footer__columns {
    flex-direction: column !important;
    gap: 20px !important;
  }
}

/* === MUY PEQUEÑO (hasta 480px) === */
@media screen and (max-width: 480px) {

  .product-grid,
  [class*="product-grid"],
  .collection-grid {
    grid-template-columns: 1fr !important;
  }

  .hero h1, .hero h2,
  .banner h1, .banner h2,
  [class*="hero__heading"],
  [class*="banner__heading"] {
    font-size: clamp(1rem, 6vw, 1.4rem) !important;
  }

  .hero__button,
  .banner__button,
  [class*="hero__button"],
  [class*="banner__button"] {
    width: 100% !important;
    max-width: 280px !important;
  }
}
/* ================================================
   FIN PAINPREXX MOBILE FIX v2.0
   ================================================ */

   /* === FIX OVERLAP MÓVIL — SLIDESHOW HERO v3.0 === */
   @media screen and (max-width: 749px) {

     /* Quitar spacer ::before que empuja texto hacia abajo */
       slideshow-component .banner__content::before {
           display: none !important;
               padding-bottom: 0 !important;
                 }

                   /* Imagen relativa para layout apilado imagen-arriba / texto-abajo */
                     slideshow-component .slideshow__slide .banner__media {
                         position: relative !important;
                             height: auto !important;
                                 width: 100% !important;
                                     top: auto !important;
                                         left: auto !important;
                                           }

                                             /* Texto fluye normal debajo de la imagen */
                                               slideshow-component .slideshow__slide .slideshow__text-wrapper {
                                                   position: relative !important;
                                                       height: auto !important;
                                                           max-height: none !important;
                                                               overflow: visible !important;
                                                                   padding: 2rem 1.5rem !important;
                                                                     }

                                                                       /* Cada slide: altura auto */
                                                                         slideshow-component .slideshow__slide {
                                                                             height: auto !important;
                                                                               }
                                                                               }

                                                                               /* === FIX OVERLAP MOVIL - SLIDESHOW HERO v4.0 (flex stack) === */
                                                                               @media screen and (max-width: 749px) {
                                                                                  /* Forzar columna para que heading y subheading se apilen vertical */
                                                                                    slideshow-component .slideshow__slide .banner__content {
                                                                                          flex-direction: column !important;
                                                                                              position: relative !important;
                                                                                                  height: auto !important;
                                                                                                      min-height: 28rem !important;
                                                                                                        }
                                                                                                          /* Caja de texto: columna centrada, sin desbordamiento */
                                                                                                            slideshow-component .slideshow__slide .banner__box {
                                                                                                                display: flex !important;
                                                                                                                    flex-direction: column !important;
                                                                                                                        align-items: center !important;
                                                                                                                            gap: 0.75rem !important;
                                                                                                                                width: 100% !important;
                                                                                                                                    max-width: 100% !important;
                                                                                                                                      }
                                                                                                                                      }
                                                                                    }
                                                                               }