/* ============================================================
   TICs na Educação — responsive.css
   Quebras responsivas (1024 / 768 / 480)
   ============================================================ */

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
    .hero-grid { gap: 36px; }
    .trilha-panel.ativa { grid-template-columns: 1fr; }
    .trilha-panel img { max-height: 280px; }
    .numbers-grid { gap: 14px; }
    .formacao-grid { grid-template-columns: 1fr 1fr; }
    .formacao-card:nth-child(3) { grid-column: 1 / -1; }
    .glossario-tic-lista { gap: 14px; }
    .footer-grid { gap: 20px; }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .nav-list {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(82vw, 320px);
        height: 100vh;
        background: var(--branco);
        border-left: 4px solid var(--amarelo);
        flex-direction: column;
        align-items: flex-start;
        padding: 84px 26px 26px;
        gap: 18px;
        transition: right 0.3s ease;
        z-index: 40;
    }
    .nav-list.aberto { right: 0; }
    .nav-list a { font-size: 1.1rem; }
    .hero { padding: 48px 0 52px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-figure { order: -1; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { text-align: center; }
    .numbers-grid { grid-template-columns: repeat(2, 1fr); padding: 36px 0; }
    .recursos-grid { grid-template-columns: 1fr; }
    .formacao-grid { grid-template-columns: 1fr; }
    .formacao-card:nth-child(3) { grid-column: auto; }
    .glossario-tic-lista { grid-template-columns: 1fr; }
    .inclusao-grid { grid-template-columns: 1fr; }
    .depo-grid { grid-template-columns: 1fr; }
    .participe-box { grid-template-columns: 1fr; padding: 30px; }
    .participe-form input { min-width: 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; }
    .section { padding: 56px 0; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
    body { font-size: 1rem; }
    .hero-welcome { font-size: 0.95rem; }
    .hero h1 { font-size: 1.7rem; }
    .hero-figure figcaption { font-size: 0.72rem; left: 10px; padding: 5px 12px; }
    .numbers-grid { grid-template-columns: 1fr 1fr; }
    .number-value { font-size: 1.7rem; }
    .trilha-body { padding: 24px; }
    .trilha-tab { padding: 10px 18px; font-size: 0.92rem; }
    .voltar-topo { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}