/* ============================================================
   RESPONSIVE — Media query overrides
   Breakpoints: sm 480 | md 768 | lg 1024 | xl 1280 | 2xl 1440
   ============================================================ */

/* ── Mobile-first: styles above apply to all sizes ── */

/* ── sm: 480px ── */
@media (min-width: 480px) {
  /* Typography adjustments */
  .hero__title {
    font-size: var(--text-2xl);
  }
}

/* ── md: 768px ── */
@media (min-width: 768px) {
  /* Section header side layout */
  .section-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 100%;
  }

  /* Footer columns */
  .footer__top {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* ── lg: 1024px ── */
@media (min-width: 1200px) {
  /* Header becomes fully visible */
  .header__nav { display: flex; }
  .header__burger { display: none; }

  /* Sticky CTA hides on desktop */
  .sticky-cta { display: none; }
}

/* ── xl: 1280px ── */
@media (min-width: 1280px) {
  /* Max out some widths */
  .mega-menu {
    width: 900px;
  }
}

/* ── 2xl: 1440px ──
   El gutter del container se queda en space-8 (64px) para que el borde del
   contenido coincida EXACTO con el del header (logo ↔ botón Cotizar).
   Antes subía a space-12 (96px) y desalineaba todas las secciones vs el header. */

/* ── Print ── */
@media print {
  .header,
  .footer,
  .sticky-cta,
  .drawer,
  .drawer-overlay {
    display: none !important;
  }

  .page-content {
    padding-top: 0;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
}