/* ═══════════════════════════════════════════════════════
   ESTRELLAS DEL MILENIO — Responsive System v4
   responsive.css

   Breakpoints (mobile-first):
     xs  ≤ 479px  │ teléfonos pequeños
     sm  ≤ 767px  │ móvil
     md  ≤ 1023px │ tablet
     lg  ≥ 1024px │ escritorio

   Visibilidad del nav delegada a Tailwind:
     nav-links  → hidden md:flex   (oculto <768px, flex ≥768px)
     btn-gold   → hidden md:inline-flex
     nav-toggle → md:hidden        (visible <768px, oculto ≥768px)
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   Nav toggle & dropdown CSS is in styles.css
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   3. TABLET  ≤ 1023px
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* Hero 2 col → 1 col */
  .r-hero-grid,
  .r-2col {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Quiénes somos — hero dividido */
  .r-hero-split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .r-hero-split > div:last-child { min-height: 320px !important; }

  /* Tarjeta de categoría */
  .r-cat-content {
    grid-template-columns: 1fr !important;
    padding: 2rem !important;
    gap: 1rem !important;
  }
  .r-cat-num { display: none !important; }

  /* Bandas CTA: texto + botón apilados */
  .r-cta {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }
  .r-cta a { justify-content: center !important; white-space: normal !important; }

  /* Contacto: panel encima del formulario */
  .r-contact {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .r-contact > div:first-child { padding: 4rem 2.5rem !important; }
  .r-contact > div:last-child  { padding: 4rem 2.5rem !important; }

  /* Footer 4 col → 2 col */
  .r-footer-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  /* Pilares / cards de características 3 col → 2 col */
  .r-pillars {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
   4. MÓVIL  ≤ 767px
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Evitar scroll horizontal */
  body { overflow-x: hidden; }

  /* Padding interno del nav */
  .nav-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero */
  .r-hero-grid { gap: 1.5rem !important; }
  .r-hero-split > div:first-child { padding: 3rem 1.5rem !important; }
  .r-hero-split > div:last-child  { min-height: 240px !important; }

  /* Stats 4 col → 2×2 */
  .r-stats-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  /* Stats en línea del hero: compacto */
  .r-stats-3 {
    gap: 1rem !important;
    margin-top: 2.5rem !important;
    padding-top: 1.75rem !important;
  }

  /* Pilares → columna única */
  .r-pillars { grid-template-columns: 1fr !important; }

  /* Tarjeta ancha (span 2) → columna completa en móvil */
  .r-span-2 { grid-column: span 1 !important; }

  /* Métricas metodología: padding reducido */
  .r-metrics > div { padding: 1rem !important; }

  /* Why-us: quita borde izquierdo */
  .r-why-right {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* Panel lateral de sesión */
  .r-session-side { padding-top: 0 !important; }

  /* Tarjeta categoría: compacto */
  .r-cat-content { padding: 1.5rem 1.25rem !important; }

  /* Paneles de contacto */
  .r-contact > div:first-child { padding: 3rem 1.5rem !important; }
  .r-contact > div:last-child  { padding: 3rem 1.5rem !important; }

  /* Formulario: nombre + apellido apilados */
  .r-form-2col { grid-template-columns: 1fr !important; }
  .r-form-wrap { max-width: 100% !important; }

  /* Footer → columna única */
  .r-footer,
  .r-footer-4 { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* Padding horizontal de secciones y footer */
  section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  footer  { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Hero de sección (categorías, etc.) */
  .r-hero-section { padding: 3.5rem 1.25rem !important; }

  /* CTA banner */
  .r-cta { gap: 1.25rem !important; }

  /* Filas de programas */
  .program-row > div[style*="padding: 3rem"] {
    padding: 2rem 1.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
   5. EXTRA PEQUEÑO  ≤ 479px
   ═══════════════════════════════════════════════════════ */

@media (max-width: 479px) {

  /* Stats 3 col → 2 col */
  .r-stats-3 { grid-template-columns: 1fr 1fr !important; }
  .r-metrics  { grid-template-columns: 1fr 1fr !important; }

  /* Evitar desbordamiento en títulos */
  h1, h2 { word-break: break-word; }

  /* Botones a ancho completo */
  .btn-gold,
  .btn-ghost,
  .btn-outline-dark {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════
   6. ACCESIBILIDAD — movimiento reducido
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #nav-dropdown.open { animation: none; }
  .nav-drop-link,
  .nav-drop-cta,
  .nav-toggle { transition: none; }
}