/* ============================================================
   responsive.css — Mobile-first breakpoints
   Diospadre Parque Acuático
   ============================================================ */

/* ── 480px — Larger phones ───────────────────────────────── */
@media (min-width: 480px) {
  .gallery-img { height: 240px; }
  .gallery-grid .gallery-wide .gallery-img { height: 280px; }

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

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

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

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

/* ── 640px — Phablets ────────────────────────────────────── */
@media (min-width: 640px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }

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

  .hero-lead { font-size: 1.15rem; }

  .gallery-img { height: 260px; }

  .negocio-card { flex-direction: row; }
  .negocio-img  { width: 40%; aspect-ratio: auto; min-height: 240px; }
  .negocio-body { padding: var(--space-2xl); }

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

/* ── 768px — Tablets ─────────────────────────────────────── */
@media (min-width: 768px) {
  :root { --nav-height: 80px; }

  .nav-toggle { display: none; }

  .nav-menu {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: transparent;
    padding: 0;
    align-items: center;
    gap: 0.125rem;
    margin-left: auto;
  }
  .nav-menu > li > .nav-link,
  .nav-dropdown-label {
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: none;
    padding: 0.5rem 0.75rem;
    color: var(--color-headings);
    border-radius: var(--radius-sm);
  }
  .nav-menu > li > .nav-link:hover,
  .nav-dropdown-label:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }

  /* Keep transparent/white behavior for hero nav (homepage) */
  .site-header.nav-hero .nav-menu > li > .nav-link,
  .site-header.nav-hero .nav-dropdown-label {
    color: rgba(255,255,255,.9);
  }
  .site-header.nav-hero .nav-menu > li > .nav-link:hover,
  .site-header.nav-hero .nav-dropdown-label:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
  }
  .site-header.scrolled .nav-menu > li > .nav-link,
  .site-header.scrolled .nav-dropdown-label { color: var(--color-text); }
  .site-header.scrolled .nav-menu > li > .nav-link:hover,
  .site-header.scrolled .nav-dropdown-label:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }

  /* Dropdown */
  .nav-dropdown { position: relative; }
  .nav-dropdown-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
  }
  .nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    min-width: 220px;
    z-index: 100;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu .nav-link {
    color: var(--color-text) !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    border-bottom: none !important;
    display: block;
  }
  .nav-dropdown-menu .nav-link:hover { color: var(--color-primary) !important; background: var(--color-bg-alt); }

  .nav-cta { display: flex; }

  .hero-content { padding-bottom: var(--space-3xl); }

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

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

  .gallery-img { height: 280px; }
  .gallery-grid .gallery-wide .gallery-img { height: 340px; }

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

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ── 1024px — Desktop ────────────────────────────────────── */
@media (min-width: 1024px) {
  section { padding-block: 5rem; }

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

  .negocios-grid { grid-template-columns: repeat(3, 1fr); }
  .negocio-card { flex-direction: column; }
  .negocio-img  { width: 100%; aspect-ratio: 16/9; }

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

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery-img { height: 220px; }
  .gallery-grid .gallery-wide { grid-column: auto; }
  .gallery-grid .gallery-wide .gallery-img { height: 220px; }

  .hero h1 { font-size: 4rem; }

  .admin-wrapper { padding: var(--space-2xl) var(--space-3xl); }
}

/* ── 1280px — Wide desktop ───────────────────────────────── */
@media (min-width: 1280px) {
  .nav-menu > li > .nav-link,
  .nav-dropdown-label { font-size: 0.9rem; padding: 0.5rem 0.875rem; }

  .hero h1 { font-size: 4.5rem; }

  .cards-grid { gap: var(--space-xl); }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal-stagger > * { opacity: 1; transform: none; }
}