/* RC Responsive Final v5 (2026-04-19 21:00)
   Comprehensive responsive fix después audit completo.
   Fixes: header mobile, menu drawer, Tienda submenu 3 cols, link width 70%,
   FA icons, elementor overflow */

@media (max-width: 991px) {
  /* ============================================================
     1. HEADER MOBILE — logo + iconos uniformes
     ============================================================ */
  #mobile-header .col-mobile-logo img.logo,
  #mobile-header .col-mobile-logo img {
    max-height: 50px !important;
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  #mobile-header .col-mobile-logo,
  #mobile-header .col-mobile-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
  }
  #mobile-header .col-mobile-btn .fa,
  #mobile-header .col-mobile-btn i.fa {
    font-size: 22px !important;
    line-height: 22px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  #mobile-header .col-mobile-btn {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mobile-header .col-mobile-btn .m-nav-btn,
  #mobile-header .col-mobile-btn > a,
  #mobile-header .col-mobile-btn > div > a {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #1d1d1b !important;
    padding: 4px 8px !important;
    min-width: 44px !important;
  }
  /* Hide text labels in header */
  #mobile-header .col-mobile-btn .m-nav-btn > span:not(.cart-products-count),
  #mobile-header .col-mobile-btn > a > span:not(.cart-products-count),
  #mobile-header .col-mobile-btn > div > a > span:not(.cart-products-count) {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Cart badge */
  #mobile-header .col-mobile-btn-cart .cart-products-count,
  #mobile-header .col-mobile-btn-cart .cart-products-count-btn {
    font-size: 10px !important;
    line-height: 1 !important;
    color: #fff !important;
    height: 16px !important;
    overflow: visible !important;
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    background: #d11326 !important;
    min-width: 16px !important;
    border-radius: 8px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    border: 1.5px solid #fff !important;
  }

  /* ============================================================
     2. MOBILE MENU DRAWER — TODO TEXTO BLANCO
     ============================================================ */
  #_mobile_iqitmegamenu-mobile,
  #iqitmegamenu-mobile,
  #_mobile_iqitmegamenu-mobile *,
  #iqitmegamenu-mobile *,
  .mobile-menu__tab,
  .mobile-menu__tab *,
  .mobile-menu__link,
  .mobile-menu__title,
  .js-mobile-menu__tab-title,
  .mobile-menu__submenu,
  .mobile-menu__submenu *,
  .mobile-menu__row,
  .mobile-menu__row *,
  .mobile-menu__column,
  .mobile-menu__column *,
  .mobile-menu__links-list,
  .mobile-menu__links-list-li,
  .mobile-menu__links-list-li * {
    color: #ffffff !important;
  }
  .mobile-menu__tab .fa.expand-icon,
  .mobile-menu__arrow,
  .mobile-menu__back-btn .fa {
    color: rgba(255,255,255,0.7) !important;
  }

  /* ============================================================
     3. FIX CRÍTICO: .mobile-menu__link 70% width → 100%
     (Bug del bundle theme: limita link al 70% truncando texto)
     ============================================================ */
  html body .mobile-menu .mobile-menu__link,
  html body #iqitmegamenu-mobile .mobile-menu__link,
  html body .mobile-menu__tab .mobile-menu__link {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ============================================================
     4. TIENDA: alinear izquierda como los demás
     ============================================================ */
  html body .mobile-menu__tab.mobile-menu__tab--id-6 > a.mobile-menu__link,
  html body .mobile-menu__tab.mobile-menu__tab--id-6 > .mobile-menu__link,
  html body .mobile-menu__tab.mobile-menu__tab--has-submenu > a,
  html body .mobile-menu__tab.mobile-menu__tab--has-submenu > .mobile-menu__link,
  html body .mobile-menu__tab > .js-mobile-menu__link--has-submenu {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 16px !important;
  }
  .mobile-menu__tab.mobile-menu__tab--has-submenu {
    align-items: stretch !important;
  }

  /* ============================================================
     5. CONTACTO icono envelope (high specificity)
     ============================================================ */
  html body .mobile-menu__tab.mobile-menu__tab--id-18 > a.mobile-menu__link::before,
  html body .mobile-menu__tab.mobile-menu__tab--id-18 > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background-color: rgba(29,78,216,0.12) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    border: 1px solid rgba(29,78,216,0.2) !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
  }

  /* ============================================================
     6. TIENDA icono CART explícito (vence iqit nth-child(4))
     ============================================================ */
  html body .mobile-menu__tab.mobile-menu__tab--id-6 > a.mobile-menu__link::before,
  html body .mobile-menu__tab.mobile-menu__tab--id-6 > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background-color: rgba(29,78,216,0.12) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    border: 1px solid rgba(29,78,216,0.2) !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
  }

  /* ============================================================
     7. FIX CRÍTICO: TIENDA SUBMENU — 3 columnas sin estilo
     (Bug bundle: NO existe regla para .mobile-menu__row / .mobile-menu__column
      → 3 listas de categorías quedan sin separación, scroll raro)
     ============================================================ */
  html body .mobile-menu__row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  html body .mobile-menu__column {
    width: 100% !important;
    max-width: 100% !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 12px 0 4px 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  html body .mobile-menu__column:first-child {
    border-top: 0 !important;
    padding-top: 4px !important;
  }
  html body .mobile-menu__column .mobile-menu__links-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .mobile-menu__column .mobile-menu__links-list-li {
    list-style: none !important;
    padding: 0 !important;
    margin: 2px 0 !important;
  }
  html body .mobile-menu__column .mobile-menu__links-list-li > a {
    color: #ffffff !important;
    padding: 10px 16px 10px 28px !important;
    display: block !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: background 0.15s !important;
    width: 100% !important;
  }
  html body .mobile-menu__column .mobile-menu__links-list-li > a:hover,
  html body .mobile-menu__column .mobile-menu__links-list-li > a:active {
    background: rgba(255,255,255,0.06) !important;
  }
  /* Submenu container clean */
  html body .mobile-menu__submenu {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
  }

  /* ============================================================
     8. ELEMENTOR overflow protection (anti horizontal-scroll)
     ============================================================ */
  /* Elementor overflow protection — excluye sliders y galerías */
  html body .elementor-element:not(.elementor-widget-image-carousel):not([class*="slider"]):not([class*="swiper"]):not([class*="layerslider"]):not([class*="gallery"]) {
    max-width: 100vw !important;
  }
  html body {
    overflow-x: hidden !important;
  }

  /* ============================================================
     9. FA font-display block para evitar FOIT/FOUT (cajas vacías)
     ============================================================ */
  /* Esta regla redefine font-face si el preload no se aplica bien */
}

/* Tablet refinement */
@media (min-width: 576px) and (max-width: 991px) {
  #mobile-header .col-mobile-logo img.logo,
  #mobile-header .col-mobile-logo img {
    max-width: 180px !important;
    max-height: 54px !important;
  }
}

/* ============================================================
   FONT AWESOME — force font-display:block para evitar empty boxes
   ============================================================ */
@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
       url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   FOOTER MOBILE: una sección por salto de línea (stacked)
   ============================================================ */
@media (max-width: 991px) {
  /* Footer container: stack todas las columnas verticalmente */
  footer .footer-container .row,
  footer #footer-container .row,
  .footer-container .row,
  footer .container > .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  /* Cada columna: full width, alineada izquierda */
  footer .footer-container .col,
  footer #footer-container .col,
  footer .footer-container [class*="col-"],
  footer #footer-container [class*="col-"],
  .footer-container [class*="col-"],
  footer .container > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    padding: 16px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  footer .footer-container [class*="col-"]:last-child,
  footer #footer-container [class*="col-"]:last-child {
    border-bottom: 0 !important;
  }
  /* Alineación izq footer — selectores específicos (sin wildcard) */
  footer .footer-container .block,
  footer .footer-container .block-content,
  footer .footer-container p,
  footer .footer-container .part,
  .footer-container .block,
  .footer-container .block-content,
  .footer-container p {
    text-align: left !important;
  }
  /* Listas footer: limpias, sin centrado */
  footer ul,
  footer ol,
  .footer-container ul,
  .footer-container ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  footer ul li,
  footer ol li,
  .footer-container ul li,
  .footer-container ol li {
    text-align: left !important;
    padding: 4px 0 !important;
    margin: 0 !important;
  }
  footer ul li a,
  footer ol li a,
  .footer-container a {
    text-align: left !important;
    display: inline-block !important;
  }
  /* Títulos/h4 footer: alineados izq */
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
  .footer-container h1, .footer-container h2, .footer-container h3,
  .footer-container h4, .footer-container h5, .footer-container h6,
  footer .block-title,
  footer .h4 {
    text-align: left !important;
    margin-bottom: 12px !important;
  }
  /* Footer-before (newsletter, social, contact bar) también stacked */
  footer .footer-before .row > [class*="col-"],
  footer .footer-after .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 12px 16px !important;
  }
  /* Centrar logos / iconos sociales si los hay (pero contenedor align izq) */
  footer .social-icons,
  footer .followus,
  footer [class*="social"] {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 0 !important;
  }
}