/* Min Digital — Responsivo (todos os @media aqui)
   Breakpoints: 1024 / 768 / 480 — re-tiling do bento dashboard */

@media (max-width: 1024px) {

    .hero-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "head  head"
            "kpi1  kpi2"
            "chart chart"
            "kpi3  chips"
            "cta   cta";
    }

    .tile-chart { min-height: 280px; }
    .tile-head { padding: 30px 32px; }

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

    .about-grid { grid-template-columns: 1fr 1.15fr; }
    .about-photo { min-height: 300px; }

    .topbar-status { display: none; }
}

@media (max-width: 768px) {

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 9px;
        background: none;
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        cursor: pointer;
        margin-left: auto;
        order: 3;
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: var(--lav);
        transition: transform .3s, opacity .3s;
    }

    .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 8px 24px 18px;
        background: color-mix(in srgb, var(--ink-900) 97%, transparent);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform .3s, opacity .3s;
    }

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

    .nav a {
        padding: 13px 6px;
        border-radius: 0;
        border-bottom: 1px dashed var(--line);
        font-size: 13px;
    }

    .nav a:last-child { border-bottom: 0; }

    .nav a[href="/blog/"] {
        margin-left: 0;
        margin-top: 10px;
        text-align: center;
    }

    .topbar-avatar { display: none; }

    .hero { padding-top: 40px; }

    .hero-bento {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "kpi1"
            "kpi2"
            "kpi3"
            "chart"
            "cta"
            "chips";
    }

    .tile-chart { min-height: 240px; }
    .tile-head h1 { font-size: 2.15rem; }

    .about-grid,
    .platforms-grid,
    .cases-grid,
    .kanban,
    .testimonials-grid,
    .contact-grid { grid-template-columns: 1fr; }

    .about-photo { min-height: 260px; }
    .case-photo { min-height: 240px; }

    .platforms-grid .card:first-child { grid-column: auto; }

    .tile-chips { padding: 16px 18px; }

    .footer-grid { flex-direction: column; gap: 30px; }
    .footer-authority { margin-left: 0; }

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

@media (max-width: 480px) {

    .board { padding: 0 16px; }
    .header-inner { padding: 10px 16px; gap: 10px; }

    main section { padding: 64px 0; }
    .hero { padding-top: 28px; }

    .tile { padding: 18px; border-radius: 14px; }
    .tile-head { padding: 24px 20px; }
    .tile-head h1 { font-size: 1.95rem; }
    .tile-head .lead { font-size: 1rem; }

    .kpi-value { font-size: 2.2rem; }

    .about-copy,
    .cases-text,
    .contact-copy { padding: 24px 20px; }

    .console { padding: 22px 20px; }

    .accordion-trigger { padding: 16px 18px; font-size: 14.5px; }
    .accordion-panel { padding: 2px 18px 18px; }
    .accordion-panel p { font-size: 14px; }

    .contact-card { padding: 24px 20px; }

    .tile-chips li { font-size: 11.5px; padding: 7px 11px; }

    .section-head { margin-bottom: 26px; }

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