/* ============================================================
   JobyMKT — responsive.css
   Quebras (1024 / 768 / 480)
   ============================================================ */

@media (max-width: 1024px) {
    .hero-card { max-width: 200px; padding: 14px 18px; }
    .diferenciais-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .nav-list {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(80vw, 310px);
        height: 100vh;
        background: var(--tinta);
        flex-direction: column;
        align-items: flex-start;
        padding: 84px 26px 26px;
        gap: 18px;
        transition: right 0.3s ease;
        z-index: 40;
    }
    .nav-list.aberta { right: 0; }
    .nav-list a { color: #fff !important; font-size: 1.05rem; }
    .hero { padding: 52px 0 60px; }
    .hero-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .servicos-grid { grid-template-columns: 1fr; }
    .passos { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
    .casos-grid { grid-template-columns: 1fr; }
    .diferenciais-grid { grid-template-columns: 1fr; }
    .diferenciais-nota { padding: 18px 20px; }
    .entregaveis-lista li { padding: 16px 20px; }
    .contato-box { grid-template-columns: 1fr; padding: 30px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; }
    .section { padding: 58px 0; }
}

@media (max-width: 480px) {
    body { font-size: 1rem; }
    .logo-name { font-size: 1.25rem; }
    .hero h1 { font-size: 1.85rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { text-align: center; }
    .hero-card { position: static; margin-top: 16px; max-width: none; }
    .stats-grid { grid-template-columns: 1fr; }
    .passos { grid-template-columns: 1fr; }
    .faq-item { padding: 2px 18px; }
    .faq-item summary { font-size: 0.98rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .whatsapp-float { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}