/*
  responsive.css
  ─────────────────────────────────────────────────────────────
  Media queries para adaptar el sitio a diferentes pantallas.

  Breakpoints:
  - Tablet/móvil grande : max-width 900px
  - Móvil chico         : max-width 600px
*/

/* ── Tablet y móvil grande (≤ 900px) ── */
@media (max-width: 900px) {

  /* Cambiar grids de 2 columnas a 1 columna */
  .nosotros-grid,
  .bar-content,
  .pizzeria-header,
  .contacto-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Ocultar la imagen de Nosotros en móvil */
  .nosotros-visual { display: none; }

  /* Quitar el texto decorativo "BAR" de fondo */
  #bar::after { display: none; }

  /* Mostrar hamburguesa, ocultar links en desktop */
  .nav-links { display: none; }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(14,11,11,0.98);
    padding: 1.5rem 2rem;
    gap: 1.2rem;
    border-bottom: 1px solid rgba(212,160,23,0.2);
  }

  .nav-burger { display: flex; }

  /* Bebidas en columna única */
  .bebidas-grid { grid-template-columns: 1fr; }

  /* Combinaciones en 2 columnas */
  .combos-grid { grid-template-columns: 1fr 1fr; }

  /* Banner de fin de semana en columna */
  .weekend-banner {
    flex-direction: column;
    text-align: center;
  }

  /* Rollos en columna única */
  .rollos-grid { grid-template-columns: 1fr; }
}

/* ── Móvil chico (≤ 600px) ── */
@media (max-width: 600px) {

  section { padding: 5rem 1.5rem; }

  /* Combinaciones en 1 columna */
  .combos-grid { grid-template-columns: 1fr; }

  /* Precios en 3 columnas para que quepan */
  .precios-grid { grid-template-columns: repeat(3, 1fr); }

  /* Botones del hero apilados */
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
}