/* ==========================================================================
   HALITEL — responsive.css  (se carga al final: endurece todo para
   tablet / portátil / computador / celular). Solo media queries + guards.
   ========================================================================== */

/* Sin scroll horizontal en ningún dispositivo */
html, body{ max-width:100%; overflow-x:hidden; }
img, video, iframe, canvas, svg{ max-width:100%; }
*{ min-width:0; }

/* Las anclas caen debajo del header + brandbar sticky (no ocultas) */
section[id]{ scroll-margin-top:128px; }
@media (max-width:1024px){ section[id]{ scroll-margin-top:116px; } }
@media (max-width:600px){ section[id]{ scroll-margin-top:104px; } }

/* ---- Nav: colapsa a hamburguesa en tablet y abajo (evita nav apretado) --- */
@media (max-width:1024px){
  .nav-links, .nav-cta{ display:none; }
  .hamburger{ display:grid; }
}

/* ---- Tablet: grids en 2 columnas donde aporta -------------------------- */
@media (min-width:621px) and (max-width:1024px){
  .cards-5{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .phones-grid{ grid-template-columns:repeat(2,1fr); }
  .acc-grid{ grid-template-columns:repeat(2,1fr); }
  .ba-card{ flex-basis:calc((100% - 20px)/2); }
}

/* ---- Header / logo compactos en móvil ---------------------------------- */
@media (max-width:900px){
  .header .container{ min-height:64px; gap:12px; }
  .nav{ gap:14px; }
  .logo{ gap:9px; }
  .logo-mark{ width:44px; height:44px; }
  .logo-name{ font-size:1.35rem; }
  .brandbar-inner{ height:40px; }
}
@media (max-width:520px){
  .container{ padding:0 16px; }
  .logo-tag{ display:none; }
  .logo-name{ font-size:1.15rem; }
  .logo-sub{ font-size:.5rem; letter-spacing:.3em; }
  .logo-mark{ width:36px; height:36px; }
  .nav{ gap:9px; }
  .cart-btn, .hamburger{ width:40px; height:40px; }
  .brandbar-inner{ height:36px; }
  .brandbar-track span{ font-size:.86rem; }
}

/* ---- Tipografía / hero en pantallas chicas ----------------------------- */
@media (max-width:520px){
  .hero .container{ min-height:auto; padding-top:34px; padding-bottom:40px; }
  .hero-title{ font-size:2rem; }
  .hero-visual{ min-height:300px; }
  .section-title{ font-size:1.5rem; }
  .services-head{ gap:16px; }
}

/* ---- Antes/después: una card llena en móvil ---------------------------- */
@media (max-width:620px){
  .ba-card{ flex-basis:100%; }
  .ba-caption{ font-size:.95rem; }
  .ba-head{ flex-wrap:wrap; }
}

/* ---- Estadísticas legibles en móvil ------------------------------------ */
@media (max-width:600px){
  .stat{ justify-content:center; text-align:left; }
  .map-wrap, .map-wrap iframe{ min-height:300px; }
}

/* ---- Carrito full en móviles pequeños ---------------------------------- */
@media (max-width:430px){
  .cart-drawer{ width:100vw; border-left:none; }
  .cart-radio{ flex-direction:column; }
  .card-actions{ flex-wrap:wrap; }
  .card-actions .shop-cta{ margin:0; }
}

/* ---- CTA band apilada en móvil ----------------------------------------- */
@media (max-width:760px){
  .cta-inner{ flex-direction:column; text-align:center; gap:18px; }
  .cta-inner .btn{ width:100%; justify-content:center; }
}

/* ---- Splash: texto seguro en pantallas muy chicas ---------------------- */
@media (max-width:420px){
  #intro .intro-logo{ width:92px; height:92px; }
  #intro .intro-name{ font-size:2.1rem; }
  #intro .intro-tag{ font-size:.78rem; padding:0 18px; }
}