/* ============================================================
   responsive.css — Reglas responsive
   Mobile-first; breakpoints: 640px (sm), 1024px (lg)
   Descentralizados
   ============================================================ */


/* ══ DESKTOP ≥ 1024px ════════════════════════════════════════ */
@media (min-width: 1024px) {
  .nav-hamburger { display: none; }
  .nav-links     { display: flex; }
  .nav-mobile    { display: none !important; }
}


/* ══ MOBILE < 1024px ═════════════════════════════════════════ */
@media (max-width: 1023px) {
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }

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

  /* Grids */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

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

  .testimonials-col:nth-child(3) {
    display: none;
  }

  .promise-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .nosotros-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .faqs-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

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


/* ══ MOBILE < 640px ══════════════════════════════════════════ */
@media (max-width: 639px) {

  /* Hero */
  .hero-headline {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .scroll-indicator {
    display: none;
  }

  /* Botón hero a ancho completo */
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Testimonios — 1 columna */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .testimonials-col:nth-child(2),
  .testimonials-col:nth-child(3) {
    display: none;
  }

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

  /* Modal */
  .modal {
    padding: var(--space-8) var(--space-6);
  }

  /* Sección — reducir el overlap en mobile */
  section:not(#hero) {
    border-radius: 1.25rem 1.25rem 0 0;
    margin-top: -1.25rem;
  }
}