/* ============================================================
   AVANTY — Sistema de diseño
   Responsive — Fase 1, Archivo 10 (corregido: .form-grid en móvil)
   Depende de variables.css, reset.css, components.css, layout.css
   y animations.css. Se carga al final para poder sobrescribir
   con confianza cualquier regla de los archivos anteriores.

   Todo el proyecto se escribió "desktop-first": las clases base
   (.grid--3, .site-nav, etc.) asumen pantalla grande, y este
   archivo va angostando con @media (max-width: ...) — por eso
   layout.css tiene comentarios del tipo "responsive.css decide
   en qué ancho se muestra".
   ============================================================ */

/* ------------------------------------------------------------
   ESCRITORIO GRANDE (1280px+) — un poco más de aire lateral
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
  :root {
    --container-padding: var(--space-6);
  }
}

/* ------------------------------------------------------------
   NAVEGACIÓN: quiebre entre menú de escritorio y menú móvil.
   960px es el mismo límite que separa "tablet" de "escritorio"
   en la documentación de variables.css — no tendría sentido que
   el menú cambiara en un ancho distinto al resto del layout.
   ------------------------------------------------------------ */
@media (max-width: 959px) {
  .site-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }
}

@media (min-width: 960px) {
  .mobile-menu,
  .mobile-menu-toggle {
    display: none;
  }
}

/* ------------------------------------------------------------
   TABLET Y MENOR (hasta 959px)
   ------------------------------------------------------------ */
@media (max-width: 959px) {
  :root {
    --space-9: 4rem;   /* las secciones respiran un poco menos */
    --space-10: 5rem;
  }

  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

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

/* ------------------------------------------------------------
   MÓVIL (hasta 599px)
   ------------------------------------------------------------ */
@media (max-width: 599px) {
  :root {
    --container-padding: var(--space-4);
    --text-5xl: 2.5rem;  /* el titular del hero no se desborda */
    --text-4xl: 2.25rem;
    --text-3xl: 1.75rem;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

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

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

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__brand {
    grid-column: auto;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}