/* ============================================================
   LOS SAUCES — Responsive
   Mobile-first overrides aplicados desde el ancho mayor hacia abajo
   ============================================================ */

/* ---- Tablet / iPad (≤ 1024px) ---- */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: var(--space-lg); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .teaser { grid-template-columns: 1fr; gap: var(--space-lg); }
  .teaser-reverse .teaser-media,
  .teaser-reverse .teaser-text { order: unset; }
  .hero-side-label { display: none; }
}

/* ---- Menú móvil (≤ 860px) ---- */
@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    background: var(--verde-profundo-2);
    border-left: 1px solid var(--linea-sutil);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition-mid);
    z-index: 150;
  }

  .nav-links.open { transform: translateX(0); }

  .nav-links a { font-size: 1rem; padding: 0.6rem 0; }

  .menu-toggle { display: flex; }

  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6,9,5,0.6);
    z-index: 140;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast);
  }

  .nav-overlay.open { opacity: 1; visibility: visible; }

  .topbar-contact span.contact-label { display: none; }
}

/* ---- Tablet vertical / móvil grande (≤ 768px) ---- */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  .footer-top { grid-template-columns: 1fr; row-gap: var(--space-md); }

  .hero { min-height: 92vh; padding: var(--space-lg) var(--space-sm); }
  .hero-tagline { font-size: 1.05rem; }

  .section { padding: var(--space-lg) 0; }

  .whatsapp-fab-btn span.wa-label { display: none; }
  .whatsapp-fab-btn { padding: 0.5rem; border-radius: 50%; }
  .whatsapp-panel { width: min(280px, 78vw); right: 0; }
}

/* ---- Contacto: caminos y formulario en columna única ---- */
@media (max-width: 860px) {
  .contact-paths { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-wrap { padding: var(--space-md); }
}

/* ---- Galería: colapsa el masonry en pantallas medianas y móviles ---- */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 46vw;
  }
  .gallery-item,
  .gallery-item.span-wide,
  .gallery-item.span-tall,
  .gallery-item.span-large {
    grid-column: span 1;
    grid-row: span 1;
  }
  .gallery-item.span-large { grid-column: span 2; grid-row: span 1; }
  .gallery-nav { width: 40px; height: 40px; }
  .gallery-lightbox-img { max-height: 50vh; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 70vw; }
  .gallery-item.span-large { grid-column: span 1; }
  .gallery-nav-prev { left: 0.5rem; }
  .gallery-nav-next { right: 0.5rem; }
}

/* ---- Móvil (≤ 480px) ---- */
@media (max-width: 480px) {
  .container { padding: 0 1.1rem; }
  .topbar-contact { gap: var(--space-sm); }
  .topbar-contact a span { display: none; }
  .hero-content h1 { letter-spacing: 0.02em; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Evitar scroll horizontal accidental en cualquier tamaño */
html, body { overflow-x: hidden; }