/* =========================================================================
   responsive.css — breakpoints para tablet e smartphone
   ========================================================================= */

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .cards-grid,
  .cards-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .horizon-columns { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: repeat(2, 1fr); }
  .journey-map { grid-template-columns: 1fr; }
  .journey-arrow { transform: rotate(90deg); justify-self: center; }
  .about-grid { grid-template-columns: 180px 1fr; gap: 32px; }
  .journey-grid { grid-template-columns: 1fr; gap: 28px; }

  .main-nav ul { gap: 2px; }
  .main-nav a { padding: 7px 10px; font-size: .8rem; }
}

/* ---------- MOBILE / MENU HAMBURGER (≤ 860px) ---------- */
@media (max-width: 860px) {
  .header-inner { padding: 0 20px; }
  .brand-text { display: none; }

  .hamburger { display: flex; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform var(--t-med) var(--ease);
    overflow-y: auto;
    padding: 24px 20px 100px;
    z-index: 99;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 4px; }
  .main-nav a { display: block; padding: 16px 18px; font-size: 1rem; border-radius: 14px; border: 1px solid var(--border); }

  .header-actions .btn-sm span { display: none; }
  #printBtn { padding: 9px 12px; font-size: 0; }
  #printBtn::before { content: "🖨"; font-size: 1rem; }
}

/* ---------- SMARTPHONE (≤ 640px) ---------- */
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section-inner { padding: 0 20px; }

  .hero { padding: 64px 20px; }
  .hero-meta { flex-direction: column; text-align: center; }
  .hero-meta-text { text-align: center; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; }

  .about-grid { grid-template-columns: 1fr; }
  .photo-frame { width: 140px; height: 140px; font-size: 2.2rem; margin: 0 auto; }
  .about-facts { grid-template-columns: 1fr 1fr; }

  .indicators-grid { grid-template-columns: repeat(2, 1fr); }

  .cards-grid,
  .cards-grid-3,
  .cards-grid-4 { grid-template-columns: 1fr; }

  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .roadmap { grid-template-columns: 1fr; }

  .timeline { padding-left: 26px; }
  .timeline-item::before { left: -33px; }

  .chart-bar-row { grid-template-columns: 90px 1fr 30px; }

  .footer-links { flex-direction: column; gap: 10px; }

  .modal { padding: 24px; }

  .link-btn { min-width: 100%; }

  .journey-step p, .about-text p { font-size: .86rem; }
}

/* ---------- SMALL PHONES (≤ 380px) ---------- */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.7rem; }
  .about-facts { grid-template-columns: 1fr; }
  .indicators-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
}