/* ── RESPONSIVE ────────────────────────────────────────────────────
   Base:   0–599 px (móvil)
   md:   600 px+  (tableta)
   lg:   960 px+  (escritorio)
   xl:  1200 px+  (ancho)
   ──────────────────────────────────────────────────────────────── */

/* ── NAVBAR ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-links  { display: none; }
  .hamburger  { display: flex; }
  .navbar     { padding: 0 var(--space-5); }
}

/* ── HERO ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-botanical,
  .hero-botanical-left { display: none; }

  .hero-logo-wrap {
    width: 140px;
    height: 140px;
  }

  .hero-logo {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 599px) {
  .hero-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ── PAGE HERO ────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .page-hero {
    padding: calc(var(--header-height) + var(--space-10)) var(--space-5) var(--space-12);
  }
}

/* ── ABOUT ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .about-img { order: -1; max-height: 300px; }
  .about-img::after { display: none; }
}

/* ── ESPACIOS ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .espacio-card {
    grid-template-columns: 1fr;
  }
  .espacio-card:nth-child(even) { direction: ltr; }
  .espacio-img { min-height: 200px; }
  .espacio-body { padding: var(--space-8); }
}

/* ── QUOTE FORM ───────────────────────────────────────────────── */
@media (max-width: 899px) {
  .quote-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 599px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .quote-form {
    padding: var(--space-6);
  }
}

/* ── FOOTER ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ── SECCIONES ────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .section {
    padding: var(--space-16) var(--space-5);
  }
  .section-header {
    margin-bottom: var(--space-10);
  }
}

/* ── STATS ────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── GALLERY ──────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .lightbox-nav { font-size: 1.75rem; padding: var(--space-3); }
}

/* ── CALENDAR ─────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .calendar-wrap { padding: var(--space-6); }
  .calendar-grid { gap: var(--space-1); }
  .calendar-day  { font-size: 0.7rem; }
  .calendar-day-header { font-size: 0.6rem; }
}

/* ── TESTIMONIOS ──────────────────────────────────────────────── */
@media (max-width: 599px) {
  .testimonios-grid { grid-template-columns: 1fr; }
}

/* ── WHATSAPP FAB ─────────────────────────────────────────────── */
@media (max-width: 599px) {
  .whatsapp-fab {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 52px;
    height: 52px;
  }
}

/* ── MAP ──────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .map-wrapper { height: 300px; }
}

/* ── POPUP ────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .popup-body   { padding: var(--space-6); }
  .popup-title  { font-size: var(--font-size-xl); }
}

/* ── CTA BANNER ───────────────────────────────────────────────── */
@media (max-width: 599px) {
  .cta-banner-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .cta-banner-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ── HERO BOTANICALS (large screens) ─────────────────────────── */
@media (max-width: 1099px) {
  .hero-botanical { width: min(260px, 25vw); }
  .hero-botanical-left { width: min(240px, 22vw); }
}