/* ============================================================
   INTERFAZ MONTERREY — MOBILE FIXES
   Loaded LAST. Surgical fixes for mobile viewports (320-768).

   Findings from full mobile audit:
   - Horizontal scroll on 320/375/414/768 caused by:
       * mundial beam decorative element (.hmun-beam)
       * featured slider track at edges
       * about page .mission-text / .mission-values padding
   - Tap targets < 32px on:
       * cart .qty +/- buttons (26x26)
       * cart .item-remove (28x28)
       * cart-empty CTA (20px height)
       * cart-quote-hint link (14px)
       * checkout summary "Editar" (25px)
       * contact phone / email / wa links (inline text)
   ============================================================ */

/* ── ROOT: ensure horizontal overflow is clipped at the root ── */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip !important;
}

/* ── iOS AUTO-ZOOM PREVENTION ──────────────────────────────────
   iOS Safari zooms the page when a focused input has font-size < 16px.
   Force 16px on ALL inputs/selects/textareas at mobile breakpoints.
   Desktop keeps the designer's original sizes.
────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input, select, textarea,
  .qm-input, .qm-select, .qm-textarea,
  .sv-input, .sv-select, .sv-textarea,
  .checkout-field input,
  .checkout-field select,
  .checkout-field textarea {
    font-size: 16px !important;
  }
}

/* ── HOME — Mundial banner decorative overflow ── */
.hmun {
  overflow: hidden;
  position: relative;
}
.hmun-media {
  overflow: hidden;
  position: absolute;
  inset: 0;
}

/* ── HOME — Featured slider containment ── */
.slider-wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
.featured-slider-inner {
  overflow: hidden;
}

/* ── ABOUT — fix horizontal overflow on 320px ── */
@media (max-width: 360px) {
  .about-mission {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .mission-text,
  .mission-values {
    max-width: 100%;
    box-sizing: border-box;
  }
  .mission-values {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .value-item {
    padding: 20px 16px !important;
  }
}

/* ── CART DRAWER — increase tap targets ── */
.cart-qty-btn {
  min-width: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
}
.cart-qty-value {
  min-width: 28px !important;
  font-size: 14px !important;
}
.cart-item-remove {
  min-width: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
}

.cart-empty-cta {
  padding: 12px 24px !important;
  font-size: 12px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cart-quote-hint {
  padding: 8px 0 0;
}
.cart-quote-hint a {
  display: inline-block;
  padding: 8px 6px;
  min-height: 34px;
  line-height: 18px;
}

/* ── CHECKOUT — summary edit + qty controls ── */
.checkout-summary-edit {
  padding: 9px 14px !important;
  min-height: 36px !important;
  font-size: 12px !important;
}
.checkout-item-remove {
  min-width: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 8px !important;
}
.checkout-item-qty-row .cart-qty-btn {
  min-width: 34px !important;
  min-height: 34px !important;
  width: 34px !important;
  height: 34px !important;
}

/* ── CONTACT — bigger tap targets for phone/email/whatsapp links ── */
@media (max-width: 900px) {
  .contact-info .contact-item a,
  .contact-item p a {
    display: inline-block;
    padding: 8px 0;
    min-height: 34px;
    line-height: 20px;
  }
  .whatsapp-link {
    padding: 8px 0 !important;
    min-height: 34px;
    display: inline-flex !important;
    align-items: center;
  }
}

/* ── HEADER / NAV — ensure logo doesn't push edges on smallest ── */
@media (max-width: 360px) {
  .nav-inner {
    padding: 0 14px !important;
  }
  .logo-img {
    height: 40px !important;
  }
  .nav-cart svg, .hamburger {
    flex-shrink: 0;
  }
}

/* ── MOBILE MENU — keep off-canvas hidden cleanly ── */
.mobile-menu {
  max-width: 88vw;
}

/* ── CART SIDEBAR — clamp to viewport on phones ≤ 440px ── */
@media (max-width: 440px) {
  .cart-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    right: -100vw;
  }
  .cart-sidebar.open { right: 0; }
}

/* ── MOBILE MENU — min-width so it stays readable at 320px ── */
.mobile-menu {
  max-width: 88vw;
  min-width: 240px;
}

/* ── HERO — prevent EQ visualization overflow on tiny screens ── */
@media (max-width: 360px) {
  .hhc-scene { max-width: 280px !important; }
  .hhc-trust { gap: 6px; padding: 7px 11px 7px 7px; }
  .hhc-trust-label { font-size: 9px; padding: 3px 7px; }
  .hhc-trust-brand { font-size: 10px; }
  .hhc-mini-stats { padding: 4px 14px !important; }
}

/* ── PRODUCTS PAGE — Catalog grid safety on small phones ── */
@media (max-width: 360px) {
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .catalog-hero-all { padding: 28px 16px !important; }
  .catalog-toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 0 16px;
  }
  .catalog-search-box,
  .catalog-toolbar select {
    width: 100%;
  }
}

/* ── DETAIL — actions stack cleanly on small screens ── */
@media (max-width: 480px) {
  .detail-actions.detail-actions--buy {
    gap: 8px !important;
  }
  .detail-buy-btn,
  .detail-addcart-btn {
    flex: 1 1 100% !important;
    min-height: 48px;
  }
  .detail-quote-link {
    flex: 1 1 100% !important;
    justify-content: center;
    padding: 10px !important;
    min-height: 36px;
  }
  .detail-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .detail-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── BENTO CATEGORIES — ensure no overflow at 320 ── */
@media (max-width: 360px) {
  .cat-bento-section { padding-left: 14px; padding-right: 14px; }
  .cat-bento-inner { padding: 0 !important; }
  .cat-bento-grid {
    gap: 8px !important;
  }
}

/* ── SOLUTIONS HUB — single-col with breathing room ── */
@media (max-width: 360px) {
  .solutions-hub { padding: 40px 14px 48px; }
  .sol-hub-card { padding: 16px 14px; gap: 12px; }
  .sol-hub-ico { width: 38px; height: 38px; }
}

/* ── PROJECTS — tighter on tiny phones ── */
@media (max-width: 360px) {
  .projects-section { padding: 44px 14px 52px; }
  .project-card-media { height: 160px; }
  .project-card-body { padding: 16px 14px 18px; }
  .project-card-body h3 { font-size: 16px; }
}

/* ── INDUSTRIES PILLS — keep label readable at 320 ── */
@media (max-width: 360px) {
  .industries-section { padding: 40px 14px 48px; }
  .industries-grid { grid-template-columns: 1fr !important; }
  .industry-pill { padding: 14px 16px; }
}

/* ── MUNDIAL PAGE — keep beams clipped ── */
.mun-hero {
  overflow: hidden;
  position: relative;
}
.mun-hero-media,
.mun-hero-bg {
  overflow: hidden;
}

/* ── SERVICE PAGE — clamp content on small viewports ── */
@media (max-width: 480px) {
  .sv-page section,
  .sv-page > div {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .sv-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sv-process-steps {
    grid-template-columns: 1fr !important;
  }
  .sv-form-panel {
    padding: 20px 16px !important;
  }
}

/* ── FOOTER on small phones ── */
@media (max-width: 360px) {
  .footer-inner {
    padding: 36px 14px 28px !important;
    gap: 24px !important;
  }
  .footer-links h4 { font-size: 10px !important; }
  .footer-links a { font-size: 12px !important; }
}

/* ── CHECKOUT — single col + better tap area on smallest ── */
@media (max-width: 360px) {
  .checkout-page { padding: calc(var(--nav-h, 110px) + 18px) 14px 56px; }
  .checkout-section { padding: 18px 14px; }
  .checkout-summary { padding: 16px 14px; }
  .checkout-pay-btn { padding: 16px 14px !important; font-size: 13px !important; }
  .checkout-pay-amount { font-size: 17px !important; }
  .checkout-grid { grid-template-columns: 1fr !important; }
  .checkout-ship-mode { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SMART POPUPS — Real photo, no cartoon SVG overlay
   ============================================================ */
.im-smart-visual .im-pv-photo {
  /* Real product/install photo — push brighter so it stands out */
  opacity: 0.92 !important;
  filter: saturate(1.10) contrast(1.04);
}
.im-smart-visual .im-pv-photo-overlay {
  /* Lighter overlay to let the photo breathe */
  background: linear-gradient(135deg,
              rgba(0,0,0,0.18) 0%,
              rgba(0,0,0,0.30) 60%,
              rgba(0,0,0,0.50) 100%) !important;
}
.im-smart-visual .im-pv-glow {
  /* Subtle red/blue ambient — already themed via [data-theme] */
  opacity: 0.6;
}

/* Mobile: stack panel (text top, image bottom) and clamp height */
@media (max-width: 720px) {
  .im-popup-backdrop.im-smart-bd .im-popup-panel {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 160px;
    max-height: 90dvh;
  }
  .im-popup-backdrop.im-smart-bd .im-popup-content {
    padding: 28px 22px 22px !important;
  }
  .im-popup-backdrop.im-smart-bd .im-popup-title {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.15;
  }
  .im-popup-backdrop.im-smart-bd .im-popup-sub {
    font-size: 13.5px !important;
    line-height: 1.55;
  }
  .im-popup-backdrop.im-smart-bd .im-smart-visual {
    min-height: 140px;
  }
  .im-popup-backdrop.im-smart-bd .im-popup-actions {
    flex-direction: column !important;
    gap: 8px;
  }
  .im-popup-backdrop.im-smart-bd .im-popup-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .im-popup-backdrop.im-smart-bd { padding: 12px !important; }
  .im-popup-backdrop.im-smart-bd .im-popup-content {
    padding: 22px 18px 18px !important;
  }
  .im-popup-backdrop.im-smart-bd .im-smart-visual {
    grid-template-rows: 1fr 120px;
    min-height: 120px;
  }
}

/* ── WHATSAPP FLOAT — keep above sticky banners on mobile ── */
.whatsapp-float {
  z-index: 1100 !important;
}
@media (max-width: 480px) {
  .whatsapp-float {
    bottom: 14px !important;
    right: 14px !important;
    width: 50px !important;
    height: 50px !important;
  }
}

/* ============================================================
   CRO — DETAIL: ¿Para quién? / ¿Qué resuelve?
   Bloque compacto que aparece JUSTO debajo del título.
   ============================================================ */
.detail-whysolve {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid rgba(229,9,20,0.55);
  border-radius: 0 12px 12px 0;
}
.dws-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dws-label {
  font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(229,9,20,0.85);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 110px;
  padding-top: 1px;
}
.dws-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
@media (max-width: 600px) {
  .dws-row { flex-direction: column; gap: 4px; }
  .dws-label { min-width: 0; }
}

/* ============================================================
   CRO — STICKY PANEL: primary BUY button styling
   ============================================================ */
.psp-btn-buy {
  background: linear-gradient(180deg, #f01624 0%, #c20612 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 18px !important;
  box-shadow:
    0 6px 14px rgba(229,9,20,0.30),
    0 1px 0 rgba(255,255,255,0.18) inset;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.psp-btn-buy:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 10px 22px rgba(229,9,20,0.45),
    0 1px 0 rgba(255,255,255,0.22) inset;
}
@media (max-width: 600px) {
  .psp-btn-buy { padding: 9px 14px !important; font-size: 12px !important; }
  .psp-btn-rent { display: none !important; }
}

/* ============================================================
   QA AUDIT FIX — Contact page horizontal overflow (≤900px)
   The .contact-layout stacks to a single `1fr` column, but `1fr`
   resolves to the min-content of its widest child (~453px), so the
   grid track overflowed its 288px container — pushing content off the
   right edge / clipping it on 320–414px screens.
   Fix: cap the track with minmax(0,1fr) and let grid/flex items shrink
   (min-width:0). Desktop (≥901px) two-column layout is untouched.
   ============================================================ */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-info,
  .contact-form,
  .contact-item { min-width: 0; }
  .contact-item > div { min-width: 0; }
  .contact-item p,
  .contact-item a,
  .contact-social .whatsapp-link { overflow-wrap: anywhere; word-break: break-word; }
}