/* ============================================================
   HappyBiz — responsivo (1024 / 768 / 480)
   Todo @media vive aqui; styles.css permanece fluido.
   ============================================================ */

/* ---------- 1024: grids recuam para 2 colunas ---------- */
@media (max-width: 1024px) {

    .hero {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-frame { max-width: 640px; }

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

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

    .method-step:nth-child(even) { translate: 0; }

    .method-step:not(:last-child)::after { display: none; }

    .results-top { grid-template-columns: 1fr; }

    .gauge-card { max-width: 460px; margin-inline: auto; }

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

    .footer-grid { grid-template-columns: 1fr 1fr; }

    .footer-brand { grid-column: 1 / -1; }
}

/* ---------- 768: nav vira menu hamburger, colunas únicas ---------- */
@media (max-width: 768px) {

    .menu-toggle { display: block; }

    .nav {
        position: absolute;
        top: calc(100% - 26px);
        left: clamp(1.1rem, 4vw, 2.4rem);
        right: clamp(1.1rem, 4vw, 2.4rem);
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        border-radius: 24px 24px 24px 8px;
        padding: 0.6rem;
        background: var(--white);
        box-shadow: var(--shadow-lift);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) rotate(-0.5deg);
        transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    }

    .nav.open { opacity: 1; visibility: visible; transform: none; }

    .nav a { padding: 0.7rem 1rem; border-radius: 14px; }

    .header-inner { padding-bottom: 1.7rem; }

    .firm-grid,
    .talk-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .firm-photo { max-width: 560px; }

    .results-photos { grid-template-columns: 1fr; }

    .results-row { grid-template-columns: 1fr; gap: 1rem; }

    .solutions-grid { grid-template-columns: 1fr; }

    .method-steps { grid-template-columns: 1fr; }

    .voices-grid { grid-template-columns: 1fr; max-width: 520px; }

    .voice:nth-child(2) { translate: 0; }

    .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }

    .whatsapp-float { padding: 0.75rem; }

    .wa-label { display: none; }

    .hero-badges { grid-template-columns: 1fr; }
}

/* ---------- 480: tipografia e respiros reduzidos ---------- */
@media (max-width: 480px) {

    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.5rem; }

    .hero-actions { gap: 0.9rem; }

    .bubble-cta { width: 100%; justify-content: center; }

    .link-ghost { width: 100%; text-align: center; }

    .hero-frame img { border-radius: 24px; }

    .frame-tag { left: 12px; bottom: -12px; font-size: 0.72rem; }

    .solution-card,
    .pulse-tool,
    .talk-card,
    .tab-panel { border-radius: 20px; }

    .tabs { gap: 0.4rem; }

    .tab { padding: 0.5rem 0.9rem; font-size: 0.84rem; }

    .accordion-trigger { font-size: 0.95rem; padding: 0.95rem 1.05rem; }

    .container,
    .header-inner { padding-inline: 1rem; }

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