@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');


/* ========================================= */
/* 0. VARIÁVEIS E ESTILOS FUNDAMENTAIS */
/* ========================================= */
:root {
    /* Cores primárias*/
    --cor-primaria: #4B2140;
    --cor-primaria-transparencia: #4b2140f8;
    --cor-fonte-menu: #F7E3B0;
    --cor-background: #FBFBFB;
    --cor-texto-detalhes-claro: #FBFBFB;
    --cor-texto-detalhes-escuro: #4B2140;
    --cor-bg-transparente: #0000008b;
    --cor-cards: #c1a36232;
    --cor-cards-pure: #e1be71e2;
    --cor-botao-primario: #E5B927;
    --cor-botao-secundaria: #C1A362;
    --cor-barra-feedback: #ffffff;
    /* Cores de texto e fundo */
    --cor-texto-primaria: #C1A362;
    --cor-texto-secundaria: #F7E3B0;
    font-size: 16px;
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--cor-background);
    /* Mantido o max-width para centralização, se necessário */
    max-width: 1920px;
    margin: 0 auto;
}

/* ⚠️ ANCORAGEM: Compensa a altura do header fixo (120px) */
.main-section,
.second-section,
.third-section {
    /* Ajuste para evitar o "salto" do scroll ao clicar nos links */
    scroll-margin-top: -1px;
}





/* 1. HEADER (Menu) */
.main-header {
    /* position: fixed; */
    /* top: 0;
    left: 0; */
    height: 120px;
    width: 100%;
    background-color: var(--cor-primaria);
    /* z-index: 50; */
    /* Adicionado box-shadow sutil para destacar o header fixo */
    box-shadow: 0 2px 2px rgba(240, 240, 240, 0.2);
}

/* O efeito de scroll só é aplicável se o JS for usado para alternar esta classe */
.main-header.scrolled {
    background-color: var(--cor-primaria);
}

.main-nav {
    display: flex;
    padding: 0 20px 0 20px;
    height: 100%;
    justify-content: space-between;
    align-items: center;

}

.main-logo {
    display: flex;
    height: 120px;
    width: auto;
    align-items: center;
}

.main-logo img {
    width: 180px;
    /* Evita quebra de linha forçada em alguns navegadores */
    display: block;
}

/* Menu Toggle Button (Hamburger) */
.menu-toggle-btn {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 51;
    padding: 0;
    /* Garante que o clique seja na área do botão */
    min-width: 44px;
    min-height: 44px;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: var(--cor-texto-secundaria);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger-icon {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-icon::before {
    top: -10px;
}

.hamburger-icon::after {
    top: 10px;
}

/* Menu Links (Escondido no Mobile) */
.main-links {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    height: calc(100vh - 120px);
    background-color: var(--cor-primaria);
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    /* Ajuste na transição para um movimento mais fluido */
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease-out, opacity 0.4s, visibility 0.4s;
    z-index: 15;
}

.main-links ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.main-links ul li {
    display: block;
    margin: 5px 0;
}

.main-links ul li a {
    font-size: 1.6em;
    padding: 12px 0;
    display: block;
    text-decoration: none;
    font-family: "Cinzel", serif;
    font-weight: 400;
    /* Ajustado para peso padrão/legível */
    font-style: normal;
    color: var(--cor-fonte-menu);
    transition: color 0.3s;
}

.main-links ul li a:hover {
    color: var(--cor-texto-primaria);
}

/* Classes de Abertura (Controladas por JS) */
.main-links.menu-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.menu-toggle-btn.menu-open .hamburger-icon {
    background-color: transparent;
}

.menu-toggle-btn.menu-open .hamburger-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.menu-toggle-btn.menu-open .hamburger-icon::after {
    transform: rotate(-45deg);
    top: 0;
}


/* 2. FIRST SECTION (Banner Principal) */
.main-section {
    background-color: var(--cor-primaria);
    background-image: url(../assets/banner-principal.webp);
    background-size: cover;
    background-position:top center;
    /* Garantir que a imagem centralize */
    /* Scroll padrão no mobile */
    background-repeat: no-repeat;
    /* height: 50vh; */
    min-height: 90vh;
}

.opacity-content {
    background-color: var(--cor-bg-transparente);
    width: 100%;
    min-width: none;
    min-height: 90vh;
    display: flex;
    justify-content: left;
    align-items: center;
}

.main-title {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 50px 20px;
    align-items: left;
    text-align: left;
}

.main-title h1 {
    font-size: 2rem;
    font-weight: 300;
    color: var(--cor-texto-primaria);
    padding-bottom: 20px;
}

.main-title h2 {
    font-size: 1.2rem;
    font-weight: 100;
    color: var(--cor-texto-secundaria);
    margin-bottom: 20px;
}

.main-text {
    color: var(--cor-texto-detalhes-claro);
    font-family: 'Lato','Courier New', Courier, monospace;
    font-weight: 400;
    font-size: 1.1em;
    text-indent: 1.5em;
    margin-bottom: 30px;
    line-height: 1.6;
    text-align: justify;
}

/* ------BOTÕES PADRÃO CHAMADA WHATSAPP------*/
.call-to-action-button {
    text-decoration: none;
    background-color: var(--cor-botao-primario);
    padding: 10px 25px;
    font-size: 1.1rem;
    border-radius: 50px;
    font-family: "Cinzel", serif;
    font-weight: 400;
    align-self: center;
    /* Ajustado para peso padrão/legível */
    font-style: normal;
    color: var(--cor-texto-detalhes-escuro);
    cursor: pointer;
    /* Ajustado para centralizar no alinhamento flex */

    transition: background-color 0.3s, transform 0.3s;
}

.call-to-action-button:hover {
    background-color: var(--cor-botao-secundaria);
    transform: translateY(-2px);
    box-shadow: 0 0 25px 3px rgba(235, 212, 163, 0.362);
}


/* 3. SECOND SECTION (Quem Somos - Mobile Grid/Stack) */
.second-section {
    background-color: var(--cor-primaria);
    display: grid;
    /* Simplificado para mobile */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    /* min-height: 100vh; */
    gap: 0px;
    padding: 10px;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
    position: relative;
    z-index: 1;
}

.attributes-header {
    background-color: var(--cor-cards-pure);
    grid-area: unset;
    width: 100%;
    padding: 5px 0;
    height: 100%;
    margin: 5px auto;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centralizar conteúdo na altura */
    z-index: 2;
}

.lista-atributos {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.lista-atributos li {
    width: 90%;
    text-align: center;
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.strong-text-att {
    font-weight: bold;
    font-size: 1.3em;
    display: block;
    margin-bottom: 5px;
}

.descricao-att {
    font-size: 1rem;

}

.sub-logo-circle {
    /* Logo flutuante e de fundo no mobile */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.15;
    padding: 20px 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: unset;
}

.sub-logo-circle img {
    max-width: 90%;
    height: auto;
    /* Para evitar problemas de posicionamento */
    display: block;
}

.quem-somos-subtitle {
    position: relative;
    z-index: 2;
    padding: 15px 25px;
    grid-area: unset;
}

.quem-somos-subtitle h2 {
    color: var(--cor-texto-primaria);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Lato','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.quem-somos-subtitle p {
    margin-top: 20px;
    font-size: 1.3rem;
    color: var(--cor-texto-secundaria);
    text-align: left;
    text-indent: 1.5em;
    line-height: 1.6;
    font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
}

/* 4. THIRD SECTION (Cards - Área de Atuação) */
.third-section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 50px 20px;
}

.third-section h2,
.third-section h3 {
    text-align: center;
}

.third-section h2 {
    font-size: 2.1rem;
    margin-bottom: 5px;
    color: var(--cor-texto-primaria);
}

.third-section h3 {
    font-size: 1.4rem;
    margin-bottom: 30px;
    color: var(--cor-primaria-transparencia);
}

.cards-atuacao {
    /* display: flex;
    width: 100%;
    height: 100%;
    gap: 15px;
    padding: 10px 0;
    flex-wrap: wrap;    
    margin-bottom: 20px;
    max-width: 100%; */
    /* justify-content: space-evenly;     */

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Cria 3 colunas de tamanhos iguais */
    gap: 20px;
    /* Espaçamento entre os cards */
    padding: 20px;
    max-width: 1200px;
    /* Limita a largura máxima para telas muito grandes */
    margin: 0 auto;
    /* Centraliza o grid na página */


}

.body-card {
    background-color: var(--cor-cards);
    border-radius: 15px;
    width: 100%;
    max-width: 500px;
    min-height: 200px;
    /* Max-width para mobile para evitar que fiquem muito largos */
    /* height: auto; */
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px #4b214074;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.body-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px #4b2140a0;
}

.img-card {
    margin-bottom: 15px;
    display: block;
}

.img-card img {
    max-width: 60px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.body-card h4 {
    font-family:"Cinzel", serif;
    /* Garantido que Cinzel seja aplicada */
    font-size: 1.3em;
    
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--cor-primaria);
}

.body-card p {
    font-size: 1em;
    line-height: 1.2;
    text-indent: 2rem;
    text-align: left;
}


/* 5. FOOTER (Rodapé) - Stack Mobile */
.main-footer {
    height: auto;
    /* min-height: 250px; */
    background-color: var(--cor-primaria);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    margin: 0 auto;
    color: var(--cor-texto-detalhes-claro);
    gap: 30px;
}

.logo-footer-big {
    width: 100%;
    min-width: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logo-footer-big img {
    align-self: center;
    width: 240px;
    margin-bottom: 20px;
}

.contato-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    color: var(--cor-texto-detalhes-claro);

}

.contato-div a {
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
    text-align: center;
}

.contato-div a.tel-link {

    color: var(--cor-texto-secundaria);
    font-weight: 500;
}

.contato-div a.map-link {
    color: var(--cor-texto-detalhes-claro);
    font-weight: 300;
    line-height: 1.4;
}
.atendimento-regiao{
    color: var(--cor-texto-secundaria);
        font-weight: 500;
}

.contato-div a:hover {
    color: var(--cor-botao-primario);
}

.links-uteis {
    width: 100%;

    text-align: center;
}

.links-uteis h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--cor-texto-primaria);
    display: block;
    margin-bottom: 15px;
    padding: 10px;
}

.links-uteis ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.links-uteis ul li {
    margin: 8px 0;
}

.links-uteis a {
    display: inline-block;
    padding: 12px 0;
    text-decoration: none;
    color: var(--cor-fonte-menu);
    font-size: 1.1rem;
    transition: color 0.3s;
}

.links-uteis a:hover {
    color: var(--cor-botao-primario);
}

.social {
    width: 100%;
    min-width: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.social h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--cor-texto-primaria);
    margin-top: 0;
    /* margin-bottom: 15px; */
    text-align: center;
}

.social a {
    display: flex;
    align-self: center;
    text-decoration: none;
    color: var(--cor-fonte-menu);
    font-size: 1.1rem;
    transition: color 0.3s;
    width: 200px;
    padding: 10px;
    margin-left: 20px;
}

.social a img {
    margin-right: 15px;
    width: 24px;
    height: 24px;
}

.social a:hover {
    color: var(--cor-botao-primario);
}

/* ========================================= */
/* BREAKPOINTS (min-width) */
/* ========================================= */

/* ----------------------------------------- */
/* 900px: Tablet/Desktop Pequeno (Transição) */
/* ----------------------------------------- */



@media (min-width: 900px) {

    /* 1. HEADER (Menu) - Flutuante */
    .main-header {
        position: relative;
        background-color: var(--cor-primaria-transparencia);
        /* Removido box-shadow no absoluto para flutuar melhor */
        box-shadow: 1px 1px 1px #4B2140;
    }

    /* O efeito de scroll só é aplicável se o JS for usado para alternar esta classe */
    .main-header.scrolled {
        /* Adicionando cor e box-shadow de volta quando o JS aplicar a classe scrolled */
        background-color: var(--cor-primaria);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .main-nav {

        padding: 0 30px 0 20px;
    }

    /* Esconde o botão hamburger */
    .menu-toggle-btn {
        display: none;
    }

    /* Mostra o menu de links na horizontal (Flex) */
    .main-links {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        /* Deixando a largura do menu automática */
        height: auto;
        background-color: transparent;
        flex-direction: row;
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        overflow-y: visible;
        transition: none;
        /* Desativar transições no desktop */
    }

    .main-links ul li {
        display: inline-block;
        margin-right: 15px;
    }

    .main-links ul li a {
        font-size: 1.3em;
        padding: 0.8rem;
    }

    /* 2. FIRST SECTION (Banner Principal) */


    .main-title {
        width: 70%;
        padding-left: 3rem;
        padding-top: 120px;
        height: auto;
    }

    .main-text {
        /* Alinhamento left no desktop para leitura mais fácil */
        text-align: left;
    }

    /* 3. SECOND SECTION (Quem Somos) - Layout para Tablet */
    .second-section {
        padding: 20px;
        grid-template-columns: repeat(5, 1fr);
        min-height: 100vh;
        /* Reajuste das linhas para melhor encaixe */
        grid-template-rows: auto 1fr;
    }

    .attributes-header {
        grid-area: 1 / 1 / 2 / 6;
        width: 90%;
        height: 100px;
        border-radius: 80px;
    }

    .lista-atributos {
        flex-direction: row;
    }

    .lista-atributos li {
        width: 30%;
    }

    .sub-logo-circle {
        opacity: 1;
        position: static;
        z-index: 1;
        /* Ajustado para caber na nova grade */
        grid-area: 2 / 1 / 3 / 3;
        padding: 40px;
    }

    .quem-somos-subtitle {
        /* Ajustado para caber na nova grade */
        grid-area: 2 / 3 / 3 / 6;
        padding: 20px 40px;
        /* Garantir alinhamento no container */
        align-self: center;
    }

    .quem-somos-subtitle p {
        text-indent: 4em;
    }
  
   

    /* 4. THIRD SECTION (Cards) - 3 colunas */
    /* 
    .cards-atuacao {
        gap: 30px;
        max-width: 750px;
        
    }

    .body-card {

        width: calc(33.333% - 20px);
        min-height: 320px;
  
        max-width: unset;
    }
     */

    /* 5. FOOTER (Rodapé) - Colunas (Flex Row) */
    .main-footer {
        display: flex;
        align-items: center;
        flex-direction: row;

        align-items: center;
    }

    .logo-footer-big,
    .links-uteis,
    .social {
        width: 33%;

    }



    .contato-div a {
        text-align: center;
    }

    .social a {
        display: flex;
        align-self: center;
        text-decoration: none;
        color: var(--cor-fonte-menu);
        font-size: 1.1rem;
        transition: color 0.3s;
        width: 200px;
        padding: 10px;
        margin-left: 20px;
    }


}

/* ----------------------------------------- */
/* 768px: Dispositivos Pequeno (Transição) */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .cards-atuacao {
        grid-template-columns: 1fr;
    }

    .quem-somos-subtitle p {
        text-align: justify;
    }
.quem-somos-subtitle h2 {
    font-size: 1.4rem;
}
}

/* ----------------------------------------- */
/* 1125px: Desktop Grande                    */
/* ----------------------------------------- */
@media (min-width: 1125px) {

    /* 1. HEADER (Menu) */
    .main-nav {

        padding: 0 100px;
    }

    .main-links ul li {
        margin-right: 10px;
    }

    .main-links ul li a {
        font-size: 1.4em;
        padding: 1rem;
    }

    /* 2. FIRST SECTION (Banner Principal) */
    .main-title {
        width: 60%;
        padding-top: 190px;
        padding-left: 5rem;

        /* Aumento o padding para melhor visualização */
    }

    .main-title h1 {
        font-size: 3rem;
    }

    .main-title h2 {
        font-size: 2rem;
    }

    .main-text {
        font-size: 1.5em;
        margin-bottom: 50px;
    }

    .call-to-action-button {
        padding: 15px 50px;
        font-size: 1.5rem;
    }

    /* 3. SECOND SECTION (Quem Somos) - Melhorias na grade */
    .quem-somos-subtitle {
        padding: 40px 100px;
        /* Aumento o padding */
    }


    /* 4. THIRD SECTION (Cards) - 4 colunas */
    .cards-atuacao {
        max-width: 1200px;

        /* Aumento o max-width do container */
    }

    .body-card {

        /* width: calc(25% - 25px); */
        height: 250px;
    }

    /* 5. FOOTER (Rodapé) */
    .main-footer {
        padding: 50px 100px;
    }
}



/* Botão Whatsapp flutuante */
.whatsapp-btn {
    position: fixed;
    bottom: 190px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #25d366;
    /* Verde WhatsApp */
    color: #fff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transition: all 0.3s ease;
    opacity: 0.9;
    /* Levemente transparente para ser discreto */
}

.whatsapp-btn svg {
    width: 28px;
    height: 28px;
}

.whatsapp-btn:hover {
    transform: translateY(-5px);
    /* Sobe levemente ao passar o mouse */
    opacity: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.whatsapp-btn{    
    display:none;
}

/* ----------------------------------------- */
/* ---------CREDITOS _ FOOTER                */
/* ----------------------------------------- */

.footer-bar {
    background-color: #33172c;
    /* Um tom mais escuro que o seu #4B2140 */
    color: #ffffff;
    padding: 5px 20px 20px 20px;
    font-size: 0.75rem;
    /* Fonte menor para ficar discreto */
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bar-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    /* Separa direitos de um lado e créditos do outro */
    align-items: center;
    flex-wrap: wrap;
    /* Garante que quebre linha no celular */
    gap: 10px;
}

.footer-bar a {
    color: #d4af37;
    /* Dourado para os links */
    text-decoration: none;
    font-weight: 400;
}

.footer-bar a:hover {
    text-decoration: underline;
}

/* ----------------------------------------- */
/* /* Ajuste para telas pequenas             */
/* ----------------------------------------- */

@media (max-width: 600px) {
    .footer-bar-content {
        flex-direction: column;
        text-align: center;
    }
}