/*
 * responsive.css — Breakpoints mobile-first
 * ════════════════════════════════════════════════════════════════
 * Breakpoints:
 *   1200px — desktop grande (ajustes menores)
 *   1024px — tablet landscape / desktop pequeño
 *    768px — tablet portrait
 *    480px — móvil grande
 *    360px — móvil pequeño
 * ════════════════════════════════════════════════════════════════
 */

/* ── 1200px ────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .hero-stats {
    display: none; /* Las stats flotantes desaparecen en pantallas medias */
  }

  .financial-grid {
    gap: 48px;
  }

  .about-grid {
    gap: 48px;
  }
}

/* ── 1024px ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Nav → hamburger */
  .nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Grids 2 columnas → 1 columna */
  .about-grid,
  .social-grid,
  .financial-grid,
  .contact-grid,
  .cta-content,
  .sponsors-intro {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* About: la imagen encima del texto en móvil */
  .about-video-wrap {
    height: 400px;
  }

  .about-badge-float {
    top:  -16px;
    left: -8px;
  }

  /* Social image */
  .social-image-wrap {
    height: 360px;
  }

  /* Programs → 2 columnas */
  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery → 2 columnas */
  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item:nth-child(1) {
    grid-column: span 2;
    grid-row:    span 1;
  }

  .gallery-item:nth-child(5) {
    grid-column: span 2;
  }

  /* Sponsors → 1 columna */
  .sponsor-tiers {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Footer → 2 columnas */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: span 2;
  }

  /* ODS → 1 columna */
  .ods-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Metodología timeline — ocultar dot column en tablet */
  .timeline-step {
    grid-template-columns: 120px 1fr;
    gap: 16px;
  }

  .step-dot {
    display: none;
  }

  /* CTA text centrado */
  .cta-content {
    text-align: center;
  }

  .cta-actions {
    justify-content: center;
  }

  /* Sponsors intro texto */
  .sponsors-intro {
    text-align: left;
  }
}

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

  /* Reducir section padding */
  section {
    padding: 72px 0;
  }

  .impact-strip {
    padding: 40px 0;
  }

  /* Programs → 1 columna */
  .programs-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Impact strip → 2 columnas */
  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero content padding */
  .hero-content {
    padding: 100px 0 72px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* About pillars → stack */
  .about-pillars {
    flex-direction: column;
    gap: 12px;
  }

  /* Financial: budget bars */
  .financial-total .amount {
    font-size: 56px;
  }

  /* Timeline → simplificado */
  .timeline-step {
    grid-template-columns: 100px 1fr;
  }

  /* Gallery → 2 columnas simples */
  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item:nth-child(1) {
    grid-column: span 1;
  }

  .gallery-item:nth-child(5) {
    grid-column: span 1;
  }

  /* Form row → 1 columna */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Topbar → centrar y stack */
  .topbar .container {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  .topbar-links {
    gap: 16px;
  }

  /* Gallery header → stack */
  .gallery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .gallery-header p {
    text-align: left;
    max-width: 100%;
  }

  /* Slider dots */
  .slider-dots {
    bottom: 20px;
    right:  20px;
  }

  .slide-caption-wrap {
    display: none;
  }

  /* Footer → 1 columna */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

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

  /* Reducir más el padding */
  section {
    padding: 56px 0;
  }

  :root {
    --container-px: 16px;
  }

  /* Impact strip → 1 columna */
  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .impact-num {
    font-size: 48px;
  }

  /* ODS → 1 columna ya aplicado en 1024, confirmar */
  .ods-item {
    padding: 28px 20px;
  }

  /* Hero: ocultar stats si no se habían ocultado */
  .hero-stats {
    display: none;
  }

  /* Sponsor tier */
  .sponsor-tier {
    padding: 28px 20px;
  }

  /* Contact form */
  .contact-form {
    padding: 28px 20px;
  }

  /* Timeline → 2 columnas (número + contenido) */
  .timeline-step {
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }

  /* About video wrap */
  .about-video-wrap {
    height: 300px;
  }

  /* Badge flotante */
  .about-badge-float {
    padding: 12px 16px;
  }

  .about-badge-float .num {
    font-size: 36px;
  }

  /* Topbar ocultar ubicación en móvil muy pequeño */
  .topbar span:first-child {
    display: none;
  }

  /* Gallery → 1 columna */
  .gallery-masonry {
    grid-template-columns: 1fr;
  }

  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) {
    grid-column: span 1;
  }
}

/* ── 360px ─────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {

  /* Impact grid → 2 columnas ajustado */
  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .impact-num {
    font-size: 40px;
  }

  /* Nav CTA en mobile menu */
  .mobile-menu a {
    font-size: 36px;
  }

  /* CTA sección */
  .cta-section {
    padding: 48px 0;
  }
}

/* ── Preferencia de movimiento reducido (accesibilidad) ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity:   1;
    transform: none;
    transition: none;
  }

  .ticker-track {
    animation: none;
  }

  .hero-slide img {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ── Modo oscuro del sistema (opcional — el diseño ya es on-dark/on-light) ─── */
/* Si en el futuro se agrega dark mode system, agregar aquí */