/* =============================================
   HEMISCAN — MOBILE OVERRIDES
   All rules scoped to ≤768px or ≤480px.
   Zero effect on desktop.
   ============================================= */

/* 0. Nav normalization — canonical values from index.html applied globally
   so all pages render nav/mega-menu identically regardless of inline CSS. */
.drop li a {
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .2s, color .2s, padding-left .2s;
}
.mega-col ul li a {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: color .2s, padding-left .2s;
}
.mega-col {
  text-align: left;
}
.mega-heading {
  text-align: left;
}

/* 1. Global safety */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
  img  { max-width: 100%; height: auto; }
  /* Restore fill inside fixed-height product image containers */
  .item-card-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
}

/* 2. Hide top bar on mobile (frees ~48px) */
@media (max-width: 768px) {
  .top-bar { display: none; }
}

/* 3. Mega menu — prevent 880px horizontal overflow.
   Touch interaction handled by mobile.js */
@media (max-width: 768px) {
  /* Kill desktop transition so accordion opens instantly on tap */
  .mega-drop { display: none !important; transition: none !important; }
  .mega-drop.open {
    display: flex !important;
    flex-direction: column;
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(0,0,0,.15);
    border-top: none;
    transition: none !important;
  }
  .mega-drop.open .mega-col {
    flex: none;
    width: 100%;
    border-right: none;
    padding: 8px 24px;
  }
  /* Nav menu scrollable so expanded mega-drop doesn't overflow screen */
  .nav-menu { max-height: calc(100vh - 74px); overflow-y: auto; }
  /* Nav items full-width + compact padding matching home mobile style.
     Non-home pages lack these rules in their inline mobile CSS. */
  .nav-item { width: 100%; }
  .nav-link  { padding: 12px 20px !important; border-bottom: 1px solid rgba(255,255,255,.04); white-space: normal; }
}

/* 4. Regular dropdowns — touch toggle via mobile.js */
@media (max-width: 768px) {
  .drop {
    display: none;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(0,0,0,.15);
    border: none;
    min-width: unset;
    width: 100%;
  }
  .nav-item.open > .drop { display: block; }
  .nav-link .arr { transition: transform .2s; }
  .nav-item.open > .nav-link .arr { transform: rotate(-135deg); }
}

/* 5. Product gallery — remove sticky on mobile.
   Desktop uses position:sticky so image stays visible while
   scrolling the right column. On mobile (1-column layout) sticky
   causes the image to overlap text scrolling beneath it.
   Solution: revert to normal flow — image sits at top, text flows below. */
@media (max-width: 768px) {
  .product-gallery {
    position: static !important;
    top: auto !important;
    align-self: auto !important;
  }
}

/* 6. Category description card — padding fix */
@media (max-width: 768px) {
  .cat-desc-card {
    flex-direction: column;
    padding: 20px 18px;
  }
  .cat-desc-icon { width: 46px; height: 46px; }
}

/* 7. iOS form zoom prevention
   iOS auto-zooms on inputs with font-size < 16px */
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px !important; }
}

/* 8. Touch target minimum sizes (44×44px) */
@media (max-width: 768px) {
  .soc { width: 44px; height: 44px; }
  .burger { padding: 10px; }
  .nav-link { min-height: 44px; display: flex; align-items: center; }
  .btn, .nav-cta { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  /* Gallery arrows: enlarge for reliable touch */
  .gallery-arrow { width: 44px; height: 44px; font-size: 22px; }
  /* Thumbnails: min touch area */
  .thumb { min-width: 44px; min-height: 44px; }
}

/* 9. Items grid — 2 columns on all mobile; features — 1 column at 480px */
@media (max-width: 768px) {
  .items-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .item-card-img  { height: 140px !important; }
}
@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr !important; }
}

/* 9b. Stats — 2 columns on all mobile sizes, smaller text to fit */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-num   { font-size: 34px !important; }
  .stat-lbl   { font-size: 11px !important; }
}

/* 11. Home — services grid: horizontal snap carousel on mobile */
@media (max-width: 768px) {
  .services-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding: 4px 20px 20px !important;
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .srv {
    flex: 0 0 78vw;
    max-width: 300px;
    scroll-snap-align: start;
  }
}

/* 12. Home — featured products: horizontal snap carousel on mobile */
@media (max-width: 768px) {
  .home-products-sec .products-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding: 4px 20px 20px !important;
    scrollbar-width: none;
  }
  .home-products-sec .products-grid::-webkit-scrollbar { display: none; }
  .home-products-sec .prod {
    flex: 0 0 72vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
}

/* 13. Home — blog grid: horizontal snap carousel on mobile */
@media (max-width: 768px) {
  .home-blog-sec .blog-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding: 4px 20px 20px !important;
    scrollbar-width: none;
  }
  .home-blog-sec .blog-grid::-webkit-scrollbar { display: none; }
  .home-blog-sec .blog-card {
    flex: 0 0 80vw;
    max-width: 320px;
    scroll-snap-align: start;
  }
}

/* 14. Nosotros — about-card: stack icon above text so text fills full width */
@media (max-width: 768px) {
  .about-card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }
}

/* 15. Soluciones — featured products: horizontal snap carousel */
@media (max-width: 768px) {
  .page-soluciones .items-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding: 4px 20px 20px !important;
    scrollbar-width: none;
  }
  .page-soluciones .items-grid::-webkit-scrollbar { display: none; }
  .page-soluciones .item-card {
    flex: 0 0 72vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
}

/* 16. Servicios — stack icon above title, reduce heading size */
@media (max-width: 768px) {
  .srv-card-top { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .srv-card h3  { font-size: 17px !important; }
  .srv-card p   { font-size: 13.5px !important; }
}

/* 17. Page hero — reduce padding and heading size on mobile */
@media (max-width: 768px) {
  .page-hero        { padding: 44px 20px !important; }
  .page-hero h1     { font-size: 26px !important; line-height: 1.2 !important; }
  .page-hero p      { font-size: 14px !important; }
}


/* 18. Blog posts — related products: horizontal snap carousel */
@media (max-width: 768px) {
  .related-products-sec .items-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding: 4px 20px 20px !important;
    scrollbar-width: none;
  }
  .related-products-sec .items-grid::-webkit-scrollbar { display: none; }
  .related-products-sec .item-card {
    flex: 0 0 72vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
}


/* 19. Home slider — "Líderes en Seguridad" image shifted left */
@media (max-width: 768px) {
  .slide-lideres { background-position: 62% center !important; }
}

/* 20. Cards — align "Ver más"/"Leer más" buttons to bottom of card */
@media (max-width: 768px) {
  .item-card                { display: flex !important; flex-direction: column !important; }
  .item-card-body           { flex: 1; display: flex; flex-direction: column; }
  .item-card a.btn          { margin-top: auto; }

  .blog-card                { display: flex !important; flex-direction: column !important; }
  .blog-body                { flex: 1; display: flex; flex-direction: column; }
  .read-more                { margin-top: auto; }

  .prod                     { display: flex !important; flex-direction: column !important; }
  .prod-body                { flex: 1; display: flex; flex-direction: column; }
  .prod-body .btn           { margin-top: auto; }
}

/* 10. Hero text scale at 480px */
@media (max-width: 480px) {
  .slide-title { font-size: clamp(20px, 6vw, 32px); }
  .slide-btn   { padding: 10px 20px; font-size: 12px; }
}