@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400&display=swap');
/* =========================================================
   CONFIGURAÇÕES GERAIS
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    background: #faf9f7;
    color: #202223;

    font-family: Arial, Helvetica, sans-serif;

    line-height: 1.6;
}


a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   CORES DO SITE
   ========================================================= */

:root {

    --preto: #202020;

    --verde: #80650c;

    --fundo: #070400ef;

    --branco: #000000;

    --cinza: #e6aa5b;

    --borda: #f0b000;

}


/* =========================================================
   CABEÇALHO
   ========================================================= */

/* =========================================================
   CABEÇALHO
   ========================================================= */

.header {

    width: 100%;
    height: 85px;

    padding: 0 7%;

    display: flex;
    align-items: center;

    background: rgba(247, 245, 245, 0.96);

    border-bottom: 1px solid var(--borda);

    position: sticky;
    top: 0;

    z-index: 1000;

}


/* =========================================================
   LOGO
   ========================================================= */

.logo {

    font-family: "Bodoni Moda", Georgia, "Times New Roman", serif;

    font-size: 25px;

    font-weight: normal;

    color: var(--verde);

    white-space: nowrap;

}


/* =========================================================
   MENU
   ========================================================= */

.menu {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 35px;

}


.menu a {

    font-size: 14px;

    color: #161616;

    white-space: nowrap;

    transition: color 0.3s ease;

}


.menu a:hover {

    color: var(--verde);

}


/* =========================================================
   BOTÃO AGENDAR
   ========================================================= */

.botao-header {

    margin-left: auto;

    background: var(--preto);

    color: rgb(236, 194, 3);

    padding: 13px 22px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: bold;

    white-space: nowrap;

    transition: 0.3s;

}


.botao-header:hover {

    background: var(--verde);

    transform: translateY(-2px);

}



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

.hero {

    min-height: calc(100vh - 85px);

    padding: 80px 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 80px;

    overflow: hidden;

}


/* =========================================================
   TEXTO DO HERO
   ========================================================= */

.hero-texto {

    width: 55%;

    max-width: 700px;

}


.hero-legenda {

    display: block;

    margin-bottom: 25px;

    ccolor: #eb9b07;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

}


.hero h1 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(55px, 6vw, 88px);

    font-weight: normal;

    line-height: 0.98;

    letter-spacing: -4px;

    margin-bottom: 30px;

}


.hero h1 span {

    display: block;

    color: #f39302;

    font-style: italic;

}


.hero-texto > p {

    max-width: 570px;

    color: var(--cinza);

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 30px;

}


/* =========================================================
   BOTÃO PRINCIPAL
   ========================================================= */

.botao-principal {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    background: var(--preto);

    color: rgb(180, 178, 178);

    padding: 17px 25px;

    border-radius: 35px;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s;

}


.botao-principal span {

    font-size: 20px;

    transition: 0.3s;

}


.botao-principal:hover {

    background: var(--verde);

    transform: translateY(-3px);

}


.botao-principal:hover span {

    transform: translateX(5px);

}


/* =========================================================
   INFORMAÇÃO ABAIXO DO BOTÃO
   ========================================================= */

.hero-info {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

}


.hero-info > span {

    color: var(--verde);

    font-size: 18px;

}


.hero-info p {

    color: var(--cinza);

    font-size: 13px;

}


/* =========================================================
   ÁREA DA IMAGEM
   ========================================================= */

.hero-visual {

    width: 43%;

    max-width: 560px;

    min-height: 600px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ESPAÇO RESERVADO PARA IMAGEM */

.imagem-placeholder {

    width: 100%;

    height: 600px;

    border-radius: 180px 180px 25px 25px;

    background: #f1f1f1;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #df9409;

    font-size: 14px;

    border: 1px solid #dce5e5;

}
.imagem-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}


/* =========================================================
   CARD SOBRE A IMAGEM
   ========================================================= */

.hero-card {

    position: absolute;

    left: -80px;

    bottom: 30px;

    width: 230px;

    padding: 25px;

    background: rgb(248, 247, 247);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.09);

}


.hero-card strong {

    display: block;

    color: var(--verde);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 24px;

    margin-bottom: 8px;

}


.hero-card p {

    color: var(--cinza);

    font-size: 13px;

    line-height: 1.5;

}


/* =========================================================
   TÍTULOS DAS SEÇÕES
   ========================================================= */

section {

    padding: 110px 7%;

}


.section-titulo span {

    display: block;

    margin-bottom: 15px;

    color: var(--verde);

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

}


.section-titulo h2 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 55px;

    font-weight: normal;

    line-height: 1.05;

}


.section-titulo p {

    margin-top: 15px;

    color: var(--cinza);

}


.centralizado {

    text-align: center;

}


/* =========================================================
   SOBRE
   ========================================================= */

.sobre {

    background: white;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}


.sobre-conteudo {

    color: var(--cinza);

    font-size: 16px;

    line-height: 1.9;

}


.sobre-conteudo p {

    margin-bottom: 20px;

}


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

.servicos {

    background: var(--fundo);

}


.servicos-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-top: 60px;

}


.servico-card {

    background: white;

    min-height: 280px;

    padding: 35px 28px;

    border: 1px solid var(--borda);

    transition: 0.3s;

}


.servico-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);

}


.numero {

    color: var(--verde);

    font-size: 13px;

    font-weight: bold;

}


.servico-card h3 {

    margin-top: 40px;

    margin-bottom: 15px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 25px;

    font-weight: normal;

}


.servico-card p {

    color: var(--cinza);

    font-size: 14px;

    line-height: 1.7;

}


.servico-card a {

    display: inline-block;

    margin-top: 25px;

    color: var(--verde);

    font-size: 13px;

    font-weight: bold;

}


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

.diferenciais {

    background: var(--preto);

    color: white;

}


.diferenciais-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-top: 60px;

}


.diferencial {

    padding: 20px 0;

    border-top: 1px solid #4b5354;

}


.diferencial > span {

    color: var(--verde);

    font-size: 13px;

    font-weight: bold;

}


.diferencial h3 {

    margin-top: 30px;

    margin-bottom: 15px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px;

    font-weight: normal;

}


.diferencial p {

    color: #c8cccc;

    font-size: 14px;

}


/* =========================================================
   CONTATO
   ========================================================= */

.contato {

    background: white;

    text-align: center;

}


.contato-info {

    max-width: 900px;

    margin: 60px auto 40px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}


.contato-info div {

    padding: 25px;

    border: 1px solid var(--borda);

}


.contato-info strong {

    display: block;

    margin-bottom: 10px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;

}


.contato-info p {

    color: var(--cinza);

    font-size: 14px;

}


/* =========================================================
   RODAPÉ
   ========================================================= */

footer {

    padding: 30px 7%;

    background: var(--preto);

    color: #c8cccc;

    text-align: center;

    font-size: 13px;

}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */
   /* =========================================================
   BOTÃO MENU MOBILE
   Escondido no computador
   ========================================================= */

   
/* =====================================================
   BOTÃO MENU NO CELULAR
   ===================================================== */


/* Efeito ao tocar */

.menu-mobile:active {

    transform: scale(0.90);

}


/* Efeito ao passar o mouse */

.menu-mobile:hover {

    background: var(--preto);

    color: #ffffff;

    transform: rotate(5deg);

}


/* =====================================================
   ANIMAÇÃO DO BOTÃO
   ===================================================== */

@keyframes aparecerMenu {

    0% {

        opacity: 0;

        transform: translateY(-15px) scale(0.7);

    }

    70% {

        opacity: 1;

        transform: translateY(3px) scale(1.05);

    }

    100% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 750px) {


    /* HEADER */

    .header {

        height: auto;

        padding: 18px 5%;

        flex-wrap: wrap;

        gap: 15px;

    }


    .logo {

        font-size: 22px;

    }


    .menu {

        order: 3;

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 15px;

    }


    .menu a {

        font-size: 12px;

    }


    .botao-header {

        padding: 10px 15px;

        font-size: 12px;

    }


    /* HERO */

    .hero {

        flex-direction: column;

        text-align: center;

        padding: 70px 5%;

    }


    .hero-texto {

        width: 100%;

    }


    .hero-legenda {

        font-size: 10px;

        letter-spacing: 2px;

    }


    .hero h1 {

        font-size: 50px;

        letter-spacing: -2px;

    }


    .hero-texto > p {

        font-size: 15px;

    }


    .hero-info {

        justify-content: center;

    }


    /* ÁREA DA IMAGEM */

    .hero-visual {

        width: 90%;

        min-height: 400px;

    }


    .imagem-placeholder {

        height: 400px;

        border-radius: 120px 120px 20px 20px;

    }


    .hero-card {

        left: -15px;

        bottom: 20px;

        width: 190px;

        padding: 18px;

        text-align: left;

    }


    /* SEÇÕES */

    section {

        padding: 80px 5%;

    }


    .section-titulo h2 {

        font-size: 40px;

    }


    /* SOBRE */

    .sobre {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    /* SERVIÇOS */

    .servicos-grid {

        grid-template-columns: 1fr;

        margin-top: 40px;

    }


    /* DIFERENCIAIS */

    .diferenciais-grid {

        grid-template-columns: 1fr;

        margin-top: 40px;

    }


    /* CONTATO */

    .contato-info {

        grid-template-columns: 1fr;

        margin-top: 40px;

    }

}
/* =========================================================
   RESPONSIVIDADE
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .header {
        padding: 0 5%;
    }


    .menu {
        gap: 18px;
    }


    .hero {
        padding: 70px 5%;
        gap: 40px;
    }


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


    .hero-visual {
        width: 45%;
    }


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


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

}



/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 750px) {


    /* =====================================================
       CONFIGURAÇÃO GERAL
       ===================================================== */

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }


    body {
        font-size: 15px;
    }



    /* =====================================================
       CABEÇALHO MOBILE
       ===================================================== */

    .header {

        width: 100%;

        min-height: 70px;

        height: auto;

        padding: 15px 5%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        position: sticky;

        top: 0;

    }


    /* LOGO */

    .logo {

        font-size: 21px;

        white-space: nowrap;

    }


    /* ESCONDE MENU NORMAL */

    .menu {

        display: none;

    }


    /* BOTÃO HAMBÚRGUER */

    .menu-mobile {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 42px;

        height: 42px;

        border: none;

        background: transparent;

        color: var(--preto);

        font-size: 28px;

        cursor: pointer;

        margin-left: auto;

    }


    /* BOTÃO AGENDAR */

    .botao-header {

        display: none;

    }



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

    .hero {

        width: 100%;

        min-height: auto;

        padding: 65px 5% 80px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 50px;

        text-align: center;

    }


    /* TEXTO */

    .hero-texto {

        width: 100%;

        max-width: 600px;

    }


    /* PEQUENA LEGENDA */

    .hero-legenda {

        font-size: 9px;

        letter-spacing: 2px;

        margin-bottom: 20px;

    }


    /* TÍTULO */

    .hero h1 {

        width: 100%;

        font-size: clamp(43px, 12vw, 58px);

        line-height: 1.02;

        letter-spacing: -2px;

        margin-bottom: 25px;

    }


    .hero h1 span {

        display: block;

        margin-top: 5px;

    }


    /* TEXTO */

    .hero-texto > p {

        width: 100%;

        max-width: 500px;

        margin: 0 auto 28px;

        font-size: 15px;

        line-height: 1.7;

    }


    /* BOTÃO */

    .botao-principal {

        min-height: 52px;

        padding: 15px 22px;

        font-size: 14px;

        gap: 20px;

    }


    /* INFORMAÇÃO */

    .hero-info {

        justify-content: center;

        margin-top: 18px;

    }


    .hero-info p {

        font-size: 12px;

    }



    /* =====================================================
       ÁREA DA IMAGEM
       ===================================================== */

    .hero-visual {
    width: 100%;
    max-width: 500px;
    min-height: 390px;
    margin: 0 auto;
}

.imagem-placeholder {
    height: 400px;
    border-radius: 120px 120px 20px 20px;
}

.imagem-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* CARD SOBRE A IMAGEM */

.hero-card {

        left: 10px;

        bottom: 15px;

        width: 190px;

        padding: 18px;

        text-align: left;

    }


    .hero-card strong {

        font-size: 20px;

    }


    .hero-card p {

        font-size: 12px;

    }



    /* =====================================================
       SEÇÕES
       ===================================================== */

    section {

        width: 100%;

        padding: 75px 5%;

    }


    .section-titulo span {

        font-size: 10px;

        letter-spacing: 2px;

    }


    .section-titulo h2 {

        font-size: clamp(36px, 10vw, 46px);

        line-height: 1.08;

    }


    .section-titulo p {

        font-size: 14px;

    }



    /* =====================================================
       SOBRE
       ===================================================== */

    .sobre {

        display: flex;

        flex-direction: column;

        gap: 35px;

        text-align: center;

    }


    .sobre-conteudo {

        width: 100%;

        font-size: 15px;

        line-height: 1.8;

    }



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

    .servicos {

        text-align: center;

    }


    .servicos-grid {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 40px;

    }


    .servico-card {

        width: 100%;

        min-height: auto;

        padding: 28px 25px;

        text-align: left;

    }


    .servico-card h3 {

        margin-top: 25px;

        font-size: 23px;

    }


    .servico-card p {

        font-size: 14px;

    }


    .servico-card a {

        padding: 8px 0;

    }



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

    .diferenciais {

        text-align: center;

    }


    .diferenciais-grid {

        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 40px;

    }


    .diferencial {

        padding: 25px 0;

        text-align: left;

    }


    .diferencial h3 {

        margin-top: 18px;

        font-size: 21px;

    }


    .diferencial p {

        font-size: 14px;

        line-height: 1.7;

    }



    /* =====================================================
       CONTATO
       ===================================================== */

    .contato {

        text-align: center;

    }


    .contato-info {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        margin: 40px auto;

    }


    .contato-info div {

        width: 100%;

        padding: 22px;

    }


    .contato-info strong {

        font-size: 19px;

    }



    /* =====================================================
       RODAPÉ
       ===================================================== */

    footer {

        padding: 25px 5%;

        font-size: 12px;

    }

}



/* =========================================================
   CELULARES PEQUENOS
   ========================================================= */

@media (max-width: 380px) {


    .header {

        padding: 13px 4%;

    }


    .logo {

        font-size: 18px;

    }


    .menu-mobile {

        width: 38px;

        height: 38px;

        font-size: 25px;

    }


    .hero {

        padding-top: 50px;

    }


    .hero h1 {

        font-size: 41px;

    }


    .hero-legenda {

        font-size: 8px;

    }


    .botao-principal {

        width: 0%;

        justify-content: center;

    }


    .hero-visual {

        min-height: 330px;

    }


    .imagem-placeholder {

        height: 330px;

    }


    .hero-card {

        width: 170px;

        left: 5px;

        padding: 15px;
    }
  .hero-card strong {
    font-size: 18px;
}
}