/* =============================================================
   RESPONSIVE.CSS — Media Queries · Mobile-first overrides
   Responsabilidad: SOLO overrides por breakpoint.
   La lógica visual va en los otros archivos CSS.
   Breakpoints: sm=640, md=768, lg=1024, xl=1280
   ============================================================= */

/* ── sm: 640px ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-16);
  }

  .section__title {
    font-size: var(--text-3xl);
  }

  /* Ocultar links nav, mostrar hamburger */
  .nav__links {
    display: none;
    position: fixed;
    inset: 72px 0 0 0;
    background-color: var(--color-primary);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__link {
    font-size: var(--text-xl);
  }

  .nav__toggle {
    display: flex;
  }

  /* Grid → 1 columna */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Split → stack */
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split--reverse {
    direction: ltr;
  }

  /* Footer → 1 columna */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ── md: 768px ──────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1023px) {
  /* Grid 3/4 → 2 columnas en tablet */
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer → 2 columnas */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand-col {
    grid-column: 1 / -1;
  }
}

/* ── lg: 1024px+ ────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .nav__toggle {
    display: none;
  }

  .nav__links {
    display: flex;
  }
}