/* ============================================================
   Agnus Informática — responsive.css
   Todas as media queries do domínio vivem aqui (mobile-first
   ajustes por ponto de quebra 1024 / 768 / 480)
   ============================================================ */

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
    .hero-grid { gap: 36px; }
    .cards-grid { gap: 20px; }
    .card img { height: 200px; }
    .stats-grid { gap: 16px; }
    .planos-grid { gap: 18px; }
    .footer-grid { gap: 28px; }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {
    .topbar-inner { flex-direction: column; align-items: flex-start; gap: 4px; }
    .menu-toggle { display: flex; }
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(78vw, 320px);
        height: 100vh;
        background: var(--blue-deep);
        flex-direction: column;
        align-items: flex-start;
        padding: 90px 28px 28px;
        gap: 20px;
        transition: right 0.3s ease;
        z-index: 40;
    }
    .nav-menu.open { right: 0; }
    .nav-menu a { color: #fff; font-size: 1.05rem; }
    .nav-menu .nav-cta { background: var(--blue); color: #fff; }
    .hero { padding: 56px 0 56px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-figure { order: -1; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .cards-grid { grid-template-columns: 1fr; }
    .diag-grid { grid-template-columns: 1fr; }
    .planos-grid { grid-template-columns: 1fr; }
    .plano-destaque { order: -1; }
    .seguranca-grid { grid-template-columns: 1fr; }
    .fluxo { grid-template-columns: 1fr; gap: 30px; }
    .depo-grid { grid-template-columns: 1fr; }
    .contato-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .section { padding: 60px 0; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
    body { font-size: 1rem; }
    .hero h1 { font-size: 1.75rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { text-align: center; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-number { font-size: 1.7rem; }
    .hero-tag { left: 12px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; }
    .whatsapp-float { right: 14px; bottom: 14px; width: 50px; height: 50px; }
    .diag-panel { padding: 24px; }
}