/* ── RESPONSIVE (mobile-first breakpoints) ────────────────────
   Base: 0–599px (mobile)
   md:   600px+  (tablet)
   lg:   960px+  (desktop)
   xl:   1200px+ (wide)
   ─────────────────────────────────────────────────────────── */

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

  .navbar {
    padding: 0 var(--space-5);
  }
}

/* ── HERO ───────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

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

/* ── ABOUT ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about-img { order: -1; }
}

/* ── SPACIOS ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .espacio-card {
    grid-template-columns: 1fr;
  }

  .espacio-card:nth-child(even) { direction: ltr; }

  .espacio-img { min-height: 220px; }
}

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

@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-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ── SECTION PADDING ────────────────────────────────────────── */
@media (max-width: 599px) {
  .section {
    padding: var(--space-12) var(--space-5);
  }

  .section-header {
    margin-bottom: var(--space-8);
  }
}

/* ── 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.5rem; padding: var(--space-3); }
}

/* ── CALENDAR ───────────────────────────────────────────────── */
@media (max-width: 479px) {
  .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: 280px; }
}

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

/* ════════════════════════════════════════════════════════════
   BENTO RESPONSIVE — collapse rules
   ════════════════════════════════════════════════════════════ */

/* ── TABLET (≤ 899px) ────────────────────────────────────── */
@media (max-width: 899px) {

  /* Hero bento: ocultar panel lateral, mostrar overlay centrado */
  .hero-bento-split {
    grid-template-columns: 1fr;
  }

  .hero-bento-image-side {
    display: none;
  }

  .hero-bento-panel {
    border-left: none;
    border-top: 1px solid rgba(197, 179, 88, 0.20);
    padding: var(--space-10) var(--space-6);
    justify-content: flex-end;
  }

  /* Page hero bento: columna única */
  .page-hero-bento {
    grid-template-columns: 1fr;
  }

  .page-hero-bento__image--green {
    display: none;
  }

  /* Stats: 2 columnas, wide → normal */
  .bento-grid--stats {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
  }

  #stats-grid.bento-grid--stats > *:nth-child(1),
  #stats-grid.bento-grid--stats > *:nth-child(4) {
    grid-column: span 1;
  }

  /* About: columna única */
  .bento-grid--about {
    grid-template-columns: 1fr;
  }

  /* Eventos feature: 2 cols, primer card grande ocupa full */
  .bento-grid--feature {
    grid-template-columns: 1fr 1fr;
  }

  #eventos-grid.bento-grid--feature > *:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  /* Paquetes: columna única, sin elevación */
  .bento-grid--paquetes {
    grid-template-columns: 1fr;
  }

  .bento-grid--paquetes > *:nth-child(2) {
    transform: none;
  }

  /* Servicios: 2 cols, primeras 2 normales */
  .bento-grid--servicios {
    grid-template-columns: 1fr 1fr;
  }

  .bento-grid--servicios > .servicio-card:nth-child(1),
  .bento-grid--servicios > .servicio-card:nth-child(2) {
    grid-column: span 1;
  }

  /* Testimonios: columna única */
  .bento-grid--testimonios-layout {
    grid-template-columns: 1fr;
  }

  #testimonios-grid.bento-grid--testimonios-layout > *:first-child,
  #testimonios-grid.bento-grid--testimonios-layout > *:nth-child(2) {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Gallery: 2 cols */
  .bento-grid--gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 220px;
  }

  /* Contact: columna única */
  .bento-grid--contact {
    grid-template-columns: 1fr;
  }

  .bento-card--contact-info {
    min-height: auto;
  }
}

/* ── MOBILE (≤ 599px) ─────────────────────────────────────── */
@media (max-width: 599px) {

  /* Hero bento panel: oculto, mostrar hero-content--mobile-only */
  .hero-bento-split {
    display: none;
  }

  .hero-content--mobile-only {
    display: flex;
  }

  /* Stats: columna única */
  .bento-grid--stats {
    grid-template-columns: 1fr;
  }

  /* Feature: columna única */
  .bento-grid--feature {
    grid-template-columns: 1fr;
  }

  #eventos-grid.bento-grid--feature > *:first-child {
    grid-column: span 1;
  }

  /* Servicios: columna única */
  .bento-grid--servicios {
    grid-template-columns: 1fr;
  }

  /* Gallery: columna única, primera imagen normal */
  .bento-grid--gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }

  #gallery-grid.bento-grid--gallery > *:first-child {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Hero bento panel adjustments */
  .hero-bento-stats {
    flex-wrap: wrap;
  }
}