/* === Mobile Fixes for Grup ViaPack ===
   Place this <link> AFTER tu styles.css:
   <link rel="stylesheet" href="assets/styles.css">
   <link rel="stylesheet" href="assets/mobile-fixes.css">
*/
:root{
  --container-pad: 16px;
}

/* 1) Viewport guard: ensure no horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2) Container padding for small screens */
@media (max-width: 640px){
  .container{ padding-left: var(--container-pad); padding-right: var(--container-pad); }
}

/* 3) Images and media scale down */
img, svg, video, iframe{ max-width: 100%; height: auto; }

/* 4) Header / Nav */
.header{ position: sticky; top: 0; z-index: 1000; background:#fff; border-bottom:1px solid #e5e7eb; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:#111827; }
.hamburger{ display:none; font-size:28px; padding:6px 10px; border-radius:10px; cursor:pointer; }
.menu{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.menu a{ padding:8px 10px; border-radius:10px; }
.menu .cta{ background:#0b5ed7; color:#fff; border-radius:12px; padding:8px 12px; }

/* 4a) Collapsible menu in mobile */
@media (max-width: 900px){
  .menu{ display:none; flex-direction:column; align-items:flex-start; width:100%; border-top:1px solid #e5e7eb; padding-top:8px; }
  .hamburger{ display:block; }
  .menu.open{ display:flex; }
  /* Make links full-width for easy tapping */
  .menu a{ width:100%; padding:12px 10px; }
}

/* 5) Typography scale */
h1{ font-size:38px; line-height:1.15; margin:0 0 10px; }
p.lead{ font-size:18px; color:#6b7280; }
@media (max-width: 640px){
  h1{ font-size:28px; }
  h2{ font-size:22px; }
  p, li{ font-size:16px; }
}

/* 6) Grid responsiveness (fallback if no utility classes) */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* 7) Cards and KPIs wrap nicely */
.card{ border:1px solid #e5e7eb; border-radius:16px; padding:18px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.kpi{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; border-radius:16px; background:#fff; border:1px solid #e5e7eb; }
.kpi .num{ font-size:28px; font-weight:800; }

/* 8) Buttons larger on touch */
.button, button, .cta{ min-height:44px; }

/* 9) Tables scroll horizontally (if you add any) */
.table-wrap{ width:100%; overflow-x:auto; }
table{ width:100%; border-collapse:collapse; }
th, td{ padding:8px; border-bottom:1px solid #e5e7eb; }

/* 10) Footer spacing */
.footer{ padding:32px 0; }