/* Betânia Web Designer — Responsivo (todos os @media aqui)
   Breakpoints: 1024 / 768 / 480
   Layout: pílula flutuante + hero split diagonal + masonry + trilha. */

@media (max-width: 1024px) {

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

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

    .sticker-a { top: -1.4rem; right: 0; }

    .masonry { columns: 2; column-gap: 1.2rem; }

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

    .shot-b { margin-top: 0; }

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

    .plan-featured { grid-column: span 2; }

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

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

    .footer-authority { grid-column: span 2; }

    .nav { gap: 0.75rem; }

    .nav a:not(.pill-cta) { font-size: 0.86rem; }
}

@media (max-width: 768px) {

    .menu-toggle { display: flex; }

    .header-pill { flex-wrap: nowrap; }

    .brand-name { display: none; }

    .nav {
        position: fixed;
        top: 84px;
        right: clamp(0.8rem, 3vw, 1.8rem);
        left: clamp(0.8rem, 3vw, 1.8rem);
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        background: var(--papel);
        border: 3px solid var(--uva);
        border-radius: 24px 10px 22px 12px / 12px 22px 10px 24px;
        box-shadow: 8px 8px 0 rgba(28, 16, 48, 0.9);
        padding: 1rem 1.2rem;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        transform: scale(0.9);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.22s ease, opacity 0.22s ease;
    }

    .nav.open {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .nav a:not(.pill-cta) {
        padding: 0.65rem 0.4rem;
        font-size: 1.05rem;
        border-bottom: 2px dashed rgba(28, 16, 48, 0.15);
    }

    .nav a:not(.pill-cta)::after { display: none; }

    .pill-cta {
        text-align: center;
        margin-top: 0.7rem;
        display: block;
    }

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

    .about-photo { max-width: 480px; margin: 0 auto; }

    .masonry { columns: 1; }

    .trail::before { left: 25px; }

    .step { grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; }

    .step-badge { width: 52px; height: 52px; font-size: 1.2rem; }

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

    .plan-featured { grid-column: auto; transform: none; }

    .plan-featured:hover { transform: translateY(-5px); }

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

    .testimonial:nth-child(2) { transform: rotate(0.8deg); }

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

    .contact-card { transform: rotate(0deg); }

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

    .footer-authority { grid-column: auto; }

    .whatsapp-float { right: 14px; bottom: 14px; padding: 0.55rem 0.95rem; }

    .wa-label { display: none; }
}

@media (max-width: 480px) {

    body { font-size: 1rem; }

    .hero { padding-top: 7.4rem; }

    .hero h1 { font-size: 2.05rem; }

    .hero-actions { flex-direction: column; align-items: stretch; }

    .btn { text-align: center; }

    .sticker { font-size: 0.92rem; padding: 0.24rem 0.7rem; }

    .browser-window { transform: rotate(0deg); clip-path: none; }

    .cursor-pin { display: none; }

    .tab { flex: 1 1 auto; font-size: 0.98rem; padding: 0.5rem 0.9rem 0.7rem; }

    .tab-panels { padding: 1.1rem; }

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

    .accordion-panel { padding: 0.1rem 1.05rem 1.05rem; }

    .contact-note { font-size: 1.05rem; }

    .footer-bottom { font-size: 0.8rem; }
}