/* =============================================================
   SUPREME LP — responsive.css
   Breakpoints: tablet 768px · mobile 480px
   Se carga al final para mayor especificidad sobre todos los demás
   ============================================================= */

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

  /* Navbar: ocultar links, mostrar hamburger */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  /* Menú móvil desplegable al activar .mobile-open */
  #navbar.mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border);
    gap: 0.25rem;
  }

  /* Hero */
  .hero-headline { font-size: clamp(3rem, 15vw, 7rem); }
  .hero-description { max-width: 160px; font-size: 0.65rem; }

  /* About: columna única, imagen arriba */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about-image-wrap { order: -1; }   /* imagen antes del texto en móvil */
  .about-img { height: 320px; }

  /* Services: 2 columnas */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Packages: columna única */
  .packages-grid { grid-template-columns: 1fr; }

  /* Team: 2 × 2 */
  .team-grid { grid-template-columns: repeat(2, 1fr); }

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

  /* Footer: columna única */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

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

  .container { padding: 0 1.25rem; }

  /* Navbar */
  #navbar { padding: 1rem 1.25rem; }
  .nav-logo-text { display: none; }   /* ocultar texto del logo, solo imagen */
  .nav-right .nav-cta { display: none; }  /* ocultar CTA en mobile muy pequeño */

  /* Hero */
  .hero-headline { font-size: clamp(2.5rem, 17vw, 5rem); }
  .hero-social { display: none; }      /* sin sidebar social en mobile */
  .hero-description { display: none; } /* sin descripción bottom-right */

  /* Sections: padding reducido */
  .about,
  .services,
  .team,
  .contact { padding: 4rem 0; }

  /* Services: columna única */
  .services-grid { grid-template-columns: 1fr; }

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

  /* Team: columna única */
  .team-grid { grid-template-columns: 1fr; }

  /* Team foto más pequeña */
  .team-photo-wrap { aspect-ratio: 3 / 2; }

  /* Footer */
  .footer { padding: 2.5rem 0 1.5rem; }
  .footer-tagline { max-width: 100%; }
}