/* ============================================================
   SDT Brakes - Custom UX Fixes (Mobile)
   v2 - 2026-03-27
   ============================================================ */

/* --------------------------------------------------------
   FIX 1: header-nav NO está oculta en móvil
   Aparece encima del mobile-header (logo/búsqueda/menú/carrito)
   → Ocultar en móvil para que mobile-header sea la primera franja
   -------------------------------------------------------- */
@media (max-width: 991px) {
  #header .header-nav {
    display: none !important;
  }
}

/* --------------------------------------------------------
   FIX 2: Carrito side-cart por encima del botón WhatsApp
   - side-cart z-index en tema: 5005
   - WhatsApp badge z-index: 10000
   → Side-cart necesita z-index superior a WhatsApp
   -------------------------------------------------------- */

/* Side-cart panel (panel deslizante desde la derecha) */
.ps-shoppingcart.side-cart #blockcart-content {
  z-index: 100001 !important;
}

/* Overlay del side-cart (backdrop) */
#mobile-cart-overlay,
.blockcart-modal,
.cart-overlay {
  z-index: 100000 !important;
}

/* Dropdown cart en móvil */
#_mobile_blockcart-content.dropdown-menu-custom,
#_desktop_blockcart-content.dropdown-menu-custom {
  z-index: 100001 !important;
}

/* WhatsApp botón flotante (badge): z-index original 10000 */
.whatsapp-badge,
.whatsapp.bottom-right,
.whatsapp.bottom-left,
.whatsapp.whatsapp_1 {
  z-index: 9998 !important;
}

/* --------------------------------------------------------
   FIX 3: Sección Conviértete en Distribuidor cortada en móvil
   Sección: .elementor-element-qc4es7d
   -------------------------------------------------------- */
@media (max-width: 768px) {
  .elementor-element-qc4es7d {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    overflow: visible !important;
    min-height: auto !important;
  }

  .elementor-element-qc4es7d .elementor-heading-title,
  .elementor-element-qc4es7d h2,
  .elementor-element-qc4es7d h3,
  .elementor-element-qc4es7d p {
    font-size: clamp(1.2rem, 5vw, 2rem) !important;
    line-height: 1.2 !important;
    padding: 0 16px !important;
    word-break: break-word !important;
  }
}

/* --------------------------------------------------------
   FIX 4: Iconos de beneficios - reemplazar FA por SVG
   Estructura: h2 > span > i.fal.fa-*
   Los iconos FA se ocultan y el span muestra el SVG inline
   -------------------------------------------------------- */

/* Ocultar icono Font Awesome de los 4 bloques */
.elementor-element-3ylsf01 .elementor-heading-title i,
.elementor-element-ujoe0oq .elementor-heading-title i,
.elementor-element-tzh74d1 .elementor-heading-title i,
.elementor-element-zfr0wif .elementor-heading-title i {
  font-size: 0 !important;
  color: transparent !important;
  visibility: hidden !important;
}

/* El span que envuelve el icono pasa a ser el contenedor del SVG */
.elementor-element-3ylsf01 .elementor-heading-title > span,
.elementor-element-ujoe0oq .elementor-heading-title > span,
.elementor-element-tzh74d1 .elementor-heading-title > span,
.elementor-element-zfr0wif .elementor-heading-title > span {
  display: inline-block !important;
  width: 60px !important;
  height: 60px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  vertical-align: middle !important;
}

/* SOMOS FABRICANTES → estrella/fábrica #FFD700 */
.elementor-element-3ylsf01 .elementor-heading-title > span {
  background-image: url(data:image/svg+xml,%3Csvg width=60 height=60 viewBox=0 0 48 48 fill=none xmlns=http://www.w3.org/2000/svg%3E%3Cpath d=M24 4L28 14H38L30 20L33 31L24 25L15 31L18 20L10 14H20L24 4Z fill=%23FFD700 stroke=%23000000 stroke-width=1.5/%3E%3C/svg%3E) !important;
}

/* ENVÍOS GRATIS → camión #FFD700 */
.elementor-element-ujoe0oq .elementor-heading-title > span {
  background-image: url(data:image/svg+xml,%3Csvg width=60 height=60 viewBox=0 0 48 48 fill=none xmlns=http://www.w3.org/2000/svg%3E%3Crect x=2 y=14 width=28 height=20 rx=2 fill=%23FFD700 stroke=%23000000 stroke-width=1.5/%3E%3Cpath d=M30 20H40L46 28V34H30V20Z fill=%23FFD700 stroke=%23000000 stroke-width=1.5/%3E%3Ccircle cx=10 cy=36 r=4 fill=%23000000/%3E%3Ccircle cx=36 cy=36 r=4 fill=%23000000/%3E%3C/svg%3E) !important;
}

/* COMPRA SEGURA → escudo con check #FFD700 */
.elementor-element-tzh74d1 .elementor-heading-title > span {
  background-image: url(data:image/svg+xml,%3Csvg width=60 height=60 viewBox=0 0 48 48 fill=none xmlns=http://www.w3.org/2000/svg%3E%3Cpath d=M24 4L8 10V24C8 33 24 44 24 44C24 44 40 33 40 24V10L24 4Z fill=%23FFD700 stroke=%23000000 stroke-width=1.5/%3E%3Cpath d=M16 24L22 30L33 18 stroke=%23000000 stroke-width=2.5 stroke-linecap=round stroke-linejoin=round/%3E%3C/svg%3E) !important;
}

/* TE ASESORAMOS → auricular #FFD700 */
.elementor-element-zfr0wif .elementor-heading-title > span {
  background-image: url(data:image/svg+xml,%3Csvg width=60 height=60 viewBox=0 0 48 48 fill=none xmlns=http://www.w3.org/2000/svg%3E%3Cpath d=M8 20C8 13 15 6 24 6C33 6 40 13 40 20V26C40 29 38 31 35 31H33C31 31 30 30 30 28V22C30 20 31 19 33 19H38C37 12 31 8 24 8C17 8 11 12 10 19H15C17 19 18 20 18 22V28C18 30 17 31 15 31H13C10 31 8 29 8 26V20Z fill=%23FFD700 stroke=%23000000 stroke-width=1.5/%3E%3C/svg%3E) !important;
}

/* --------------------------------------------------------
   FIX CABECERA MÓVIL: Banner + Logo/Menú fijos en el scroll
   - #header completo se fija en top:0 en móvil
   - JS stuck classes se anulan (el padre ya es fixed)
   - #wrapper recibe padding-top para no quedar tapado
   -------------------------------------------------------- */
@media (max-width: 991px) {
  /* Fijar toda la cabecera (banner + mobile-header) */
  #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 5000 !important;
  }

  /* Anular el comportamiento fixed del JS (el padre ya es fixed) */
  #mobile-header-sticky,
  #mobile-header-sticky.stuck,
  #mobile-header-sticky.stuck-down,
  #mobile-header-sticky.stuck-up,
  #mobile-header-sticky.visible-stuck-up {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  /* Empujar el contenido para que no quede bajo el header fijo
     banner (~42px) + mobile-header (~56px) = ~100px */
  #wrapper {
    padding-top: 105px !important;
  }
}

/* --------------------------------------------------------
   Fondo blanco sólido en la barra de logo/menú móvil
   -------------------------------------------------------- */
@media (max-width: 991px) {
  #mobile-header,
  #mobile-header-sticky,
  #mobile-header .mobile-main-bar {
    background-color: #ffffff !important;
  }
}

/* --------------------------------------------------------
   Colores del estado stuck desde la carga inicial en móvil
   El tema aplica en homepage: fondo transparente + iconos blancos
   hasta que se hace scroll. Forzamos el estado scrolled desde el inicio.
   -------------------------------------------------------- */
@media (max-width: 991px) {
  /* Iconos oscuros desde el inicio (en vez de blancos) */
  #index #mobile-header-sticky i {
    color: #2b2a29 !important;
  }

  /* Logo estándar visible desde el inicio */
  #index #mobile-header-sticky img.logo.img-fluid {
    content: url(/img/logo-1640014162.jpg) !important;
  }

  /* Fondo sólido desde el inicio (anula background:none del tema) */
  #index #mobile-header #mobile-header-sticky {
    background: #ffffff !important;
  }
}

/* --------------------------------------------------------
   Newsletter: caja de texto al 90% de ancho en móvil
   Banner ps_banner: ocultar en móvil
   -------------------------------------------------------- */
@media (max-width: 768px) {
  /* Newsletter form: 90% ancho centrado */
  .elementor-element-84ytik6 .elementor-widget-container,
  .elementor-element-84ytik6 .elementor-newsletter {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ocultar imagen del banner ps_banner en móvil */
  img[src*='f99ff33baf4668af539a4c0b3c5d74be'],
  a.banner {
    display: none !important;
  }
}