/*
 * responsive.css
 * Media queries de toda la página en un solo lugar.
 * Se aplican al final del cascade para no necesitar !important.
 */

@media (max-width: 820px) {
  /* Nav: ocultar links de texto, solo mostrar el botón CTA */
  .nav-links a:not(.btn) { display: none; }
}

@media (max-width: 780px) {
  /* Hero: columna única, imagen arriba */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .eyebrow,
  .hero-cta { justify-content: center; }

  .hero p.lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-burger {
    order: -1;
    margin-bottom: 6px;
  }

  .hero-burger img { width: min(72vw, 360px); }

  /* Producto */
  .why-grid { grid-template-columns: 1fr; gap: 30px; }

  /* Menú */
  .menu-grid { grid-template-columns: 1fr; }

  /* Steps */
  .steps { grid-template-columns: 1fr; }

  /* Domicilios */
  .deliv-grid { grid-template-columns: 1fr; gap: 30px; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
}