/* ================================= */
/* RESPONSIVO — TABLET (max 900px) */
/* ================================= */

@media (max-width: 900px) {

    /* ---- Menu mobile ---- */

    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--cor-branco);
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 25px 0;
        display: none;
    }

    .nav-menu.active {
        display: flex;
    }

    /* ---- Mega menu mobile ---- */

    .mega-menu {
        position: relative;
        width: 100%;
        grid-template-columns: 1fr;
        padding: 20px;
        box-shadow: none;
    }

    /* ---- index.php — hero ---- */

    .hero {
        padding: 100px 20px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 16px;
    }

    /* ---- index.php — grids ---- */

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

    /* ---- index.php / about.php — why grid ---- */

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

    /* ---- contact.php ---- */

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

    /* ---- about.php ---- */

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

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

    /* ---- footer — todas as páginas ---- */

    .footer-top {
        flex-direction: column;
        text-align: center;
    }

    .footer-map iframe {
        width: 100%;
        max-width: 100%;
        height: 180px;
    }

}

/* ================================= */
/* RESPONSIVO — TABLET (max 768px) */
/* services.php */
/* ================================= */

@media (max-width: 768px) {

    .service-card {
        flex-direction: row;
    }

    .service-image {
        flex: 0 0 90px;
        padding: 20px 14px;
    }

    .service-image svg {
        width: 54px;
        height: 54px;
    }

    .service-body {
        padding: 20px;
    }

    .service-card h3 {
        font-size: 16px;
    }

}

/* ================================= */
/* RESPONSIVO — MOBILE (max 600px) */
/* ================================= */

@media (max-width: 600px) {

    /* ---- index.php ---- */

    .hero h1 {
        font-size: 28px;
    }

    /* ---- clientes.php ---- */

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

    /* ---- about.php ---- */

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

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

}

/* ================================= */
/* RESPONSIVO — MOBILE PEQUENO (max 480px) */
/* services.php */
/* ================================= */

@media (max-width: 480px) {

    .service-card {
        flex-direction: column;
    }

    .service-image {
        flex: none;
        width: 100%;
        padding: 24px 20px 18px;
        border-radius: 0;
        justify-content: flex-start;
        gap: 12px;
    }

    .service-image::after {
        display: none;
    }

    .service-image svg {
        width: 48px;
        height: 48px;
    }

    .service-body {
        padding: 16px 20px 24px;
    }

    .service-category {
        font-size: 22px;
        margin-top: 40px;
    }

}