/* Bonus630 — Responsivo (todos os @media aqui)
   Breakpoints: 1024 / 768 / 480 — novo layout "manual técnico retro". */

@media (prefers-reduced-motion: reduce) {
    .sel, .footer-ready { animation: none; }
    .reveal { transition: none; opacity: 1; transform: none; }
}

/* ============ 1024 ============ */
@media (max-width: 1024px) {
    .header-inner { grid-template-columns: auto 1fr auto; }
    .toolbox { justify-self: center; }
    .coords { display: none; }
    .nav a { padding: 9px 8px; letter-spacing: 1.1px; }

    .hero-grid { grid-template-columns: 1fr; padding: clamp(20px, 3vw, 32px); }
    .hero-canvas { max-width: 640px; }

    .categories-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
    .card { margin-top: 22px; }

    .community-grid { grid-template-columns: 1fr; gap: 44px; }
    .contact-grid { grid-template-columns: 1fr; gap: 44px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* ============ 768 — menu mobile ============ */
@media (max-width: 768px) {
    .header-inner { grid-template-columns: 1fr auto; gap: 10px; }
    .toolbox { justify-self: end; gap: 10px; }
    .header-cta { display: none; }
    .menu-toggle { display: flex; }

    .nav {
        position: fixed;
        top: var(--header-h);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        width: min(300px, 84vw);
        height: calc(100vh - var(--header-h));
        background: var(--carbon-lo);
        border-left: 2px solid var(--verde);
        box-shadow: -14px 0 34px rgba(12, 14, 16, .6);
        padding: 18px 16px;
        gap: 4px;
        transform: translateX(102%);
        transition: transform .28s ease;
        overflow-y: auto;
    }

    .nav.open { transform: translateX(0); }

    .nav a {
        border: 1.5px solid transparent;
        border-bottom: 1px dashed rgba(239, 243, 238, .16);
        padding: 12px 10px;
        font-size: 12.5px;
    }

    .nav a.nav-blog { margin-top: 10px; border: 1.5px solid rgba(185, 228, 138, .5); }

    .about-grid { grid-template-columns: 1fr; gap: 26px; }
    .about-photo { max-width: 420px; }

    .automation-grid { grid-template-columns: 1fr; gap: 22px; }

    .palette { width: 100%; overflow-x: auto; margin-left: 0; }
    .tabs { flex: 1; }
    .tab { flex: 1; white-space: nowrap; padding: 10px 14px 9px; }

    .entry-list li { grid-template-columns: 1fr; gap: 2px; }

    .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

    .article-row { grid-template-columns: 96px 1fr; gap: 14px; }

    .win-menu { display: none; }
    .win-statusbar span:nth-child(3) { display: none; }

    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }

    .wa-label { display: none; }
    .whatsapp-float { padding: 11px; }
}

/* ============ 480 ============ */
@media (max-width: 480px) {
    body { font-size: 16px; }

    .brand-name { display: none; }

    .hero-copy h1 { font-size: clamp(26px, 8.4vw, 34px); }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; text-align: center; }

    .ruler-h span:nth-child(n+4) { visibility: hidden; }

    .tab-panel { padding: 18px 16px; }
    .code-window pre { padding: 14px 12px; }

    .article-row { grid-template-columns: 1fr; gap: 10px; }
    .article-date { justify-self: start; padding: 5px 10px; }

    .community-stats { grid-template-columns: 1fr; gap: 10px; }

    .sheet-tab { left: 14px; }
    .card-body { padding: 20px 18px 22px 28px; }

    .win-statusbar span:nth-child(2) { display: none; }

    .whatsapp-float { right: 14px; bottom: 14px; }
}