button.btn-wpp {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem;
    background-color: var(--verde);
    border: none;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    z-index: 1000;
}

button.btn-wpp:hover {
    background-color: var(--verde);
    transform: scale(105%);
    box-shadow: #000 3px 3px 8px;
}

button.btn-wpp:hover img {
    content: unset;
}




#home-section {
    height: 100dvh;
    background-image: url("../img/foto-home.png"), url("../img/bg-home.jpg");
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    background-position: right 10% bottom, center;
}

header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 2rem;
}

.menu-mobile {
    padding: 1rem 0;
    background-color: #f9f9f441;
    display: none;
}

.menu-mobile ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    gap: 1.2rem;
}

.menu-mobile li {
    font: 1.2rem "Lora-SemiBold", serif;
}

.menu-mobile li a {
    text-decoration: none;
    color: rgba(249, 249, 244, 0.671);
}

.menu-mobile li a:hover {
    color: var(--branco);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.4374rem;
    opacity: 80%;
}

.logo p {
    font: 1.5rem "Lora-Bold", serif;
}

.menu ul {
    display: flex;
    list-style-type: none;
    gap: 2.125rem;
}

.menu li {
    font: 1.5rem "Lora-SemiBold", serif;
}

.menu li a {
    text-decoration: none;
    color: rgba(249, 249, 244, 0.7);
}

.menu li a:hover {
    color: var(--branco);
}

.redes-sociais {
    display: flex;
    gap: 1.5rem;
}

.rede {
    opacity: 70%;
}

.rede:hover {
    opacity: 100%;
}


.home-section {
    display: flex;
    flex-direction: column;
    gap: 2.437rem;
    height: 80%;
    padding: 8.69vw 12.03vw 0 12.03vw;
}

.logo-home img {
    width: clamp( 4rem, 5.676vw, 6.812rem);
}

.text-home {
    display: flex;
    flex-direction: column;
    gap: 1.562rem;
    max-width: clamp( 40rem, 49.16vw, 59rem);
}

.text-home h1 {
    font: clamp( 2rem, 2.343vw, 2.812rem) "Merriweather_24pt-Black", serif;
    text-shadow: 4px 4px 10px #000000d3;
}

.text-home p {
    font: clamp( 1.3rem, 1.562vw, 1.875rem) "Merriweather_24pt-Light", serif;
    text-shadow: 4px 4px 10px #000000d3;
}

.botao-home {
    margin-top: 2.25rem;
}


.servicos-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.687rem;
    align-items: stretch;
    max-width: 83.06vw;
    margin: 0 auto;
    justify-content: center;
}

.cards {
    color: var(--azul);
    background-color: rgba(249, 249, 244, 0.8);
    border: 2px solid var(--dourado);
    border-radius: 0.437rem;
    padding: 2.25rem 2.125rem;
    display: flex;
    justify-content: center;
    gap: 1.562rem;
}

.cards h1 {
    font: 1.562rem "Inter_18pt-ExtraBold", sans-serif;
}

.cards p {
    font: 1.125rem "Inter_18pt-Regular", sans-serif;
}

.wrap-card-servicos {
    display: flex;
    align-items: center;
}

.wrap-card-servicos img {
    width: auto;
    height: auto;
}



.sobre-section {
    background: var(--azul) url("../img/bg-sobre.jpg") no-repeat center;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6.43rem;
    padding: 6.25rem 2rem;
    position: relative;
    box-shadow: inset 0px -8px 25.5px #000000a4;
}

.sobre-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.text-sobre-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1.56rem;
    max-width: 81.37rem;
    z-index: 10;
}

.sobre-section h1 {
    font: clamp(3rem, 3.33vw, 4rem) "Merriweather_24pt-Black", serif;
}

.sobre-section p {
    font: clamp(1.4rem, 1.25vw, 1.5rem) "Inter_18pt-Regular", sans-serif;
}

.infos {
    display: flex;
    justify-content: center;
    gap: 9.062rem;
    text-align: center;
    z-index: 10;
}

.infos h2 {
    font: clamp(1.7rem, 2.08vw, 2.5rem) "Inter_18pt-Bold", sans-serif;
}

.infos p {
    font: clamp(1.3rem, 1.25vw, 1.5rem) "Inter_18pt-Light", sans-serif;
}




.diferenciais {
    border-left: 1px solid var(--branco);
    padding: 3rem 0 3rem 10.12rem;
}

.pergunta-dif h1 {
    font: clamp(2.1rem, 3vw, 3.75rem) "Inter_18pt-Bold", sans-serif;
}

.pergunta-dif h1 span {
    font: clamp(2.1rem, 3vw, 3.75rem) "Inter_18pt-Black", sans-serif;
}

.diferenciais ul {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.diferenciais li {
    font: clamp(1.4em, 2.08vw, 2.5rem) "Inter_18pt-Thin", sans-serif;
}

.dif-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.812rem;
}


#artigos-section {
    max-width: 80rem;
    margin: 12.5rem auto 0 auto;
}

#artigos-section h1 {
    font: clamp( 1.5rem, 1.66vw, 2rem) "Inter_18pt-Bold", sans-serif;
    padding-bottom: 3.25rem;
}

.card-artigo {
    background-color: rgba(249, 249, 244, 0.8);
    color: var(--azul);
    border: 2px solid var(--dourado);
    border-radius: 0.437rem;
    display: flex;
    align-items: center;
    gap: 3.25rem;
    padding: 1rem;
}

.card-artigo img {
    border-radius: 0.437rem;
}

.wrap-text-car-artigo {
    margin-right: 3rem;
    max-width: 46.37rem;
}

.wrap-text-car-artigo h2 {
    font: clamp( 1.5rem, 1.5vw, 1.8rem) "Lora-Bold", serif;
}

.wrap-text-car-artigo h3 {
    font: clamp( 1.2rem, 1.08vw, 1.3rem) "Lora-Medium", serif;
    padding-bottom: 1.562rem;
}

.wrap-text-car-artigo p {
    font: clamp( 1.1rem, 1vw, 1.2rem) "Inter_18pt-Regular", sans-serif;
}

.link-artigo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 3.562rem;
}

.link-artigo p {
    display: flex;
    align-items: center;
}

.link-artigo a {
    color: var(--azul);
}

#cta-final-section {
    margin: 12.5rem auto 0 auto;
    max-width: 76.56rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.562rem;
}

.text-cta-final {
    display: flex;
    flex-direction: column;
    gap: 1.312rem;
}

.text-cta-final h1 {
    font: clamp( 2.2rem, 3.33vw, 4rem) "Inter_18pt-Black", sans-serif;
}

.text-cta-final p {
    font: clamp( 1.5rem, 2.08vw, 2.5rem) "Inter_18pt-Light", sans-serif;
}




footer {
    background-color: var(--branco);
    color: var(--azul);
    padding: 4rem 5rem 0 5rem;
}

.wrap-footer {
    display: flex;
    justify-content: space-evenly;
    gap: 5rem;
    flex-wrap: wrap-reverse;
}   

.text-footer {
    max-width: 34.875rem;
}

.text-footer h1 {
    font: 1.7rem "Inter_18pt-ExtraBold", sans-serif;
    padding-bottom: 1rem;
}

.text-footer p {
    font: 1.1rem "Inter_18pt-Regular", sans-serif;
}

h2.links-footer {
    padding-top: 1.9rem;
    line-height: 150%;
}

.links {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

p.link {
    display: flex;
    align-items: center;
}

.link a {
    color: var(--azul);
    text-underline-offset: 5px;
    text-decoration: underline 1px;
}

p.link {
    display: flex;
    align-items: center;
}

.link::before {
    content: url("../img/icon-link-footer.png");
    margin-right: 1rem;
}

.contatos-footer h2, h2.links-footer {
    font: 1.5rem "Inter_18pt-Bold", sans-serif;
    padding-bottom: 1.9rem;
}

.contatos { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.937rem 4.437rem; 
}

.ctt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ctt h3 {
    font: 1.4rem "Inter_18pt-SemiBold", sans-serif;
}

.ctt p {
    font: 1.3rem "Inter_18pt-Regular", sans-serif;    
}

.ctt a {
    color: var(--azul);
    text-decoration: none;
}

.ctt-botoes-redes {
    display: flex;
    gap: 2.12rem;
}

.ctt-tiktok,
.ctt-facebook,
.ctt-linkedin {
    cursor: pointer;
}




.copyright-footer {
    font: clamp( 1.1rem, 1vw, 1.2rem) "Inter_18pt-Regular", sans-serif;
    text-align: center;
    padding-top: 4.25rem;
}

.signature-dev {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding-top: 2.06rem;
}

.signature-dev p {
    font: 1.2rem "Inter_18pt-Medium", sans-serif;
    color: var(--azul);
}

.signature-dev img {
    cursor: pointer;
}