@media (min-width: 1440px) {

    :root {
        --container: min(1320px, calc(100% - 80px));
    }

    .hero__grid,
    .sobre__painel,
    .contato__grid {
        gap: 80px;
    }
}

@media (max-width: 1180px) {

    .navegacao {
        gap: 24px;
    }

    .navegacao__links {
        gap: 22px;
    }

    .hero__grid,
    .sobre__painel,
    .contato__grid {
        gap: 48px;
    }

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

    .container__imagem {
        min-height: 320px;
    }

    .cta-inner {
        padding: 36px;
    }

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

    .portfolio__botao {
        display: none;
    }
}

@media (max-width: 1024px) {

    :root {
        --container: min(100% - 40px, 1220px);
    }

    .hero__grid,
    .contato__grid {
        grid-template-columns: 1fr;
    }

    .hero__conteudo,
    .hero-visual {
        text-align: center;
    }

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

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

@media (max-width: 768px) {

    :root {
        --container: min(100% - 28px, 1220px);
    }

    .section {
        padding: 70px 0;
    }

    .hero__grid {
        gap: 50px;
    }

    .lista__servicos,
    .estatistica {
        grid-template-columns: 1fr;
    }

    .portfolio__trilha {
        gap: 16px;
    }

    .projeto__card {
        min-width: 260px;
    }

    .cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .btn-neon {
        width: 100%;
        max-width: 340px;
    }
}

@media (max-width: 540px) {

    .service-card,
    .estatistica__card,
    .projeto__card,
    .contato__card {
        padding: 18px;
    }

    .container__imagem {
        min-height: 220px;
    }

    .portfolio__trilha {
        padding-bottom: 12px;
    }

    .whatsapp-float {
        right: 16px;
        bottom: 16px;

        width: 56px;
        height: 56px;
    }
}

@media (min-width: 1920px) {

    :root {
        --container: min(1480px, calc(100% - 120px));
    }

    body {
        font-size: 18px;
    }

    .section {
        padding: 120px 0;
    }
}