/* ==============================
  responsive.css (Mejorado y Organizado)
  ============================== */

/* Base: Desktop First (≥1025px) */
/* Aquí puedes definir estilos generales para desktop si lo necesitas */

/* ==============================
  Tablets Horizontales (≤1024px)
  ============================== */
@media (max-width: 1024px) {
  .hero-section {
   padding: 4rem 1rem;
  }
  .hero-section h1 {
   font-size: 2.2rem;
  }
  .hero-section p {
   font-size: 1rem;
  }
  .grid-3-columns {
   grid-template-columns: repeat(2, 1fr);
  }
}

/* ==============================
  Tablets Verticales y Móviles Grandes (≤768px)
  ============================== */
@media (max-width: 768px) {
  /* Header y Navegación */
  .header-content {
   flex-wrap: wrap;
  }
  .main-nav .nav-list {
   display: none;
   flex-direction: column;
   gap: 1rem;
   background: #fff;
   position: absolute;
   top: 70px;
   right: 20px;
   padding: 1rem 2rem;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.15);
   z-index: 1000;
  }
  .main-nav .nav-list.active {
   display: flex;
  }
  .menu-toggle {
   display: block;
   font-size: 1.8rem;
   cursor: pointer;
   color: var(--primary-color);
  }

  /* Grids y Secciones */
  .grid-2-columns {
   grid-template-columns: 1fr;
  }
  .team-grid,
  .sponsor-logos,
  .impact-metrics {
   grid-template-columns: 1fr 1fr;
  }

  /* Hero Section */
  .hero-section h1 {
   font-size: 1.8rem;
  }
  .hero-section p {
   font-size: 1rem;
  }
  .hero-actions {
   flex-direction: column;
   gap: 0.75rem;
  }
}

/* ==============================
  Móviles Pequeños (≤480px)
  ============================== */
@media (max-width: 480px) {
  /* Hero Section */
  .hero-section {
   padding: 3rem 1rem;
  }
  .hero-section h1 {
   font-size: 1.5rem;
  }
  .hero-section p {
   font-size: 0.9rem;
  }

  /* Botones */
  .btn {
   width: 100%;
   text-align: center;
  }

  /* Grids */
  .grid-3-columns,
  .team-grid,
  .sponsor-logos,
  .impact-metrics {
   grid-template-columns: 1fr;
  }

  /* Formularios */
  .contact-form {
   padding: 0 1rem;
  }

  /* Footer */
  .footer-content {
   grid-template-columns: 1fr;
   text-align: center;
  }
  .social-links {
   justify-content: center;
  }
}

/* ==============================
  Fin de responsive.css
  ============================== */