/* ========================= */
/* RESPONSIVO GLOBAL */
/* ========================= */

/* FONTES FLUIDAS */
h1 {
    font-size: clamp(28px, 5vw, 46px);
}

h2 {
    font-size: clamp(22px, 4vw, 32px);
}

h3 {
    font-size: clamp(16px, 2.5vw, 22px);
}

p {
    font-size: clamp(14px, 2vw, 18px);
}

/* BOTÕES */
.btn {
    font-size: clamp(12px, 1.5vw, 16px);
    padding: clamp(6px, 1vw, 10px) clamp(15px, 2vw, 30px);
}


/* RESPONSIVO */
/* RESPONSIVO */
@media (max-width: 768px) {

    .nav-list {
        position: absolute;
        top: 80px;
        left: 0px;
        width: 100%;
        background: #fff;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 25px 0;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.4s ease;

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    .nav-list.ativo {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .menu-mobile {
        display: block;
    }

    .btn-cta {
        display: none;
    }
}

/* FIM RESPONSIVO */






/* CONTAINERS */
.container,
.destaque-container,
.reparo-container,
.agenda-especialista-container,
.area-container {
    width: 90%;
    max-width: 950px;
    margin: 0 auto;
}

/* REMOVE LARGURAS FIXAS (IMPORTANTE) */
.container h1,
.container p {
    width: 100%;
    max-width: 600px;
}

/* ========================= */
/* HEADER RESPONSIVO */
/* ========================= */

@media (max-width: 768px) {

    .cabecalho-topo {
        /* flex-direction: column; */
        gap: 5px;
        height: auto;
        padding: 5px 0;
        position: relative;
        top: -80px;
    }

    .slogan {
        font-size: 10px;
    }


    .rede-social-topo a {
        font-size: 10px;
    }

    .cabecalho-box nav {
        height: auto;
        padding: 10px;
    }

    .nav-list {
        display: none;
        /* depois posso te fazer menu mobile */
    }

    /* ========================= */
    /* HERO */
    /* ========================= */


    .hero-bg {
        height: auto;
        padding: 80px 0;
    }

    .cabecalho-box {
        top: 20px;
    }

    .container {
        align-items: center;
        text-align: center;
        top: 10px;
    }

    .container h1 {
        font-size: 36px;
    }

    .container p {
        font-size: 15px;
    }

    .container-nav {
        width: 95%;
    }

    .container .btn {
        align-self: center;
    }

    /* ========================= */
    /* FIM HERO */
    /* ========================= */

    /* ========================= */
    /* CARDS SERVIÇOS */
    /* ========================= */

    @media (max-width: 768px) {

        .card-ser-box {
            flex-direction: column;
        }

        .card-ser-box {
            padding: 10px 15px;
        }

    }

    /* ========================= */
    /* FIM CARDS SERVIÇOS */
    /* ========================= */


    /* ========================= */
    /* AGENDAR */
    /* ========================= */
    .agendar-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ========================= */
    /* FIM AGENDAR */
    /* ========================= */

    /* ========================= */
    /* DESTAQUE */
    /* ========================= */

    .destaque-container {
        flex-direction: column;
        text-align: center;
    }

    .destaque-imagem img {
        width: 100%;
    }

    .destaque-texto {
        position: relative;
        top: 60px;
    }

    .destaque-texto .btn {
        margin: 0 auto;
    }

    /* ========================= */
    /* FIM DESTAQUE */
    /* ========================= */

    /* ========================= */
    /* AJUDA */
    /* ========================= */

    .ajuda-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .ajuda-h2 {
        border: none;
        text-align: center;
    }

    .ajuda-texto {
        align-items: center;
    }

    /* ========================= */
    /* FIM AJUDA */
    /* ========================= */

    /* ========================= */
    /* REPARO */
    /* ========================= */

    .reparo-container {
        flex-direction: column;
        gap: 40px;
    }

    .reparo-img img {
        width: 100%;
        height: auto;
    }

    .reparo-box {
        width: 100%;
    }

    .reparo-lista {
        flex-direction: column;
    }

    /* ========================= */
    /* FIM REPARO */
    /* ========================= */

    /* ========================= */
    /* DIFERENCIAIS */
    /* ========================= */

    .diferenciais li {
        width: 100%;
        max-width: 300px;
    }

    /* ========================= */
    /* FIM DIFERENCIAIS */
    /* ========================= */


    /* ========================= */
    /* ÁREA ATENDIMENTO */
    /* ========================= */
    .area-container {
        flex-direction: column;
        height: auto;
        padding: 40px 0;
    }

    .area-img img {
        width: 100%;
        /* border-radius: 10px; */
    }

    /* ========================= */
    /* FIM ÁREA ATENDIMENTO */
    /* ========================= */

    /* ========================= */
    /* GALERIA */
    /* ========================= */

    .galeria-grid {
        padding: 0 16px;
        margin: 0 auto;
    }

    .galeria-grid img {
        width: calc(50% - 10px);
    }

    /* ========================= */
    /* FIM GALERIA */
    /* ========================= */



    /* ========================= */
    /* FOOTER */
    /* ========================= */
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    /* ========================= */
    /* FIM FOOTER */
    /* ========================= */

}