/* =========================================================
   responsive.css — Media queries (Mobile First)
   ========================================================= */

/* ── Tablet: ≤ 1024px ─────────────────────────────── */
@media (max-width: 1024px) {
  .stats__grid      { grid-template-columns: repeat(2, 1fr); }
  .footer__inner    { grid-template-columns: 1fr 1fr; row-gap: var(--space-10); }
  .contact-grid     { grid-template-columns: 1fr; }
  .contact-info .section-title { text-align: center; }
  .contact-info .section-title::after { margin-inline: auto; }
  .contact-info p   { text-align: center; }
  .contact-details  { align-items: center; }
  .gallery-masonry  { columns: 2; }
  .review-card      { flex: 0 0 calc(50% - var(--space-3)); }
  .awards-grid      { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile: ≤ 768px ──────────────────────────────── */
@media (max-width: 768px) {
  /* Navbar */
  .navbar__toggle { display: flex; }
  .navbar__menu {
    position: fixed;
    top: var(--navbar-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,.98);
    padding: var(--space-8) var(--space-6);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }
  .navbar__menu.open  { transform: translateX(0); }
  .navbar__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .nav-link {
    color: var(--color-secondary);
    font-size: var(--fs-lg);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
  }
  .navbar__links .btn-primary {
    color: white;
    padding: var(--space-3) var(--space-8);
    width: auto;
    border: none;
  }
  /* Cuando está abierto, forzar fondo blanco en logo */
  .navbar.menu-open .navbar__logo { color: var(--color-secondary); }
  .navbar.menu-open .navbar__toggle span { background: var(--color-secondary); }

  /* Hero */
  .hero__content  { padding-inline: var(--space-4); }
  .hero__cta      { flex-direction: column; align-items: center; }

  /* Stats */
  .stats__grid    { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

  /* Menús - una columna */
  .menus-grid     { grid-template-columns: 1fr; }
  .contact-form   { grid-template-columns: 1fr; padding: var(--space-6); }
  .form-group--full { grid-column: 1; }
  .form-submit    { grid-column: 1; }
  .form-note      { grid-column: 1; }

  /* Galería */
  .gallery-masonry { columns: 1; }

  /* Reseñas */
  .reviews-carousel { gap: 0; }
  .review-card      { flex: 0 0 100%; }

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

  /* Lightbox navegación */
  .lightbox__prev { left: var(--space-3); }
  .lightbox__next { right: var(--space-3); }

  /* Acordeón menús */
  .accordion-header        { padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 4px); gap: var(--space-3); }
  .accordion-header__num   { font-size: var(--fs-xs); }
  .accordion-header__index { font-size: 1.2rem; width: 1.6rem; }
  .menu-content            { padding: var(--space-8) var(--space-4); }
  .menu-row                { grid-template-columns: 70px 1fr; gap: var(--space-3); }
  .accordion-header__badge { display: none; }

  /* Tabs menús */
  .menus-tabs { gap: var(--space-1); padding: var(--space-1); }
  .menus-tab  { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }

  /* Events grid */
  .events-grid { grid-template-columns: 1fr; }

  /* WhatsApp flotante */
  .whatsapp-float {
    width: 48px;
    height: 48px;
    right: 14px;
    bottom: 14px;
  }

  .whatsapp-hint {
    right: 72px;
    bottom: 14px;
    max-width: min(220px, calc(100vw - 92px));
    padding: 8px 10px;
  }
}

/* ── Pequeño móvil: ≤ 480px ───────────────────────── */
@media (max-width: 480px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .menu-filters,
  .gallery-filters,
  .category-tabs { gap: var(--space-2); }
  .filter-btn, .cat-tab { font-size: var(--fs-xs); padding: var(--space-2) var(--space-3); }
  .gallery-section .filter-btn {
    font-size: var(--fs-sm);
    padding: var(--space-3) var(--space-5);
  }
  .gallery-load-more {
    width: min(100%, 260px);
  }
  .section { padding-block: var(--space-16); }
}

/* ── Accesibilidad: prefer-reduced-motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}