/* --------------------------------------- */
/* 1. GLOBAL RESETS & BASE STYLES */
/* --------------------------------------- */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* --------------------------------------- */
/* 2. THEME VARIABLES */
/* --------------------------------------- */
:root{
--color-background-primary:#121212;
--color-background-secondary:#4B4B4B;
--color-accent:#6DE63A;
--color-text-primary:#FFFFFF;
--color-border:#4B4B4B;
--color-placeholder:#A0A0A0;
--shadow-elevation-1:0 2px 4px rgba(0,0,0,0.2);
}

html.theme-dark{
--color-background-primary:#121212;
--color-background-secondary:#4B4B4B;
--color-accent:#6DE63A;
--color-text-primary:#FFFFFF;
--color-border:#4B4B4B;
--color-placeholder:#A0A0A0;
--shadow-elevation-1:0 2px 4px rgba(0,0,0,0.2);
}

html.theme-light{
--color-background-primary:#F0F0F0;
--color-background-secondary:#FFFFFF;
--color-accent:#6DE63A;
--color-text-primary:#333333;
--color-border:#DDDDDD;
--color-placeholder:#666666;
--shadow-elevation-1:0 2px 4px rgba(0,0,0,0.1);
}

/* --------------------------------------- */
/* 3. BASE HTML/BODY STYLES */
/* --------------------------------------- */
html{
background-color:var(--color-background-primary);
}

body{
font-family:Arial,sans-serif;
line-height:1.6;
transition:background-color 0.3s ease,color 0.3s ease;
background-color:var(--color-background-primary);
color:var(--color-text-primary);
margin:0;
padding:0;
width:100%;
min-height:100vh;
}

.container{
max-width:1200px;
margin:0 auto;
padding:0 20px;
}

/* --------------------------------------- */
/* 4. SCROLLBAR STYLING */
/* --------------------------------------- */
::-webkit-scrollbar{
width:12px;
}
::-webkit-scrollbar-track{
background-color:#121212;
border-radius:10px;
}
::-webkit-scrollbar-thumb{
background-color:#4B4B4B;
border-radius:10px;
border:3px solid #121212;
}

html{
scrollbar-color:#4B4B4B #121212;
scrollbar-width:thin;
}

/* --------------------------------------- */
/* 5. HEADER */
/* --------------------------------------- */
.main-header{
background-color:rgba(18,18,18,0.8);
padding:15px 0;
position:fixed;
width:100%;
top:0;
left:0;
z-index:1000;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
border-bottom:1px solid #4B4B4B;
}

.header-content{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height: 48px;
width: auto;
}

.logo span{
font-size:24px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}

.main-nav .btn-outline{
background-color:transparent;
color:#FFFFFF;
border:1px solid #FFFFFF;
padding:8px 15px;
border-radius:5px;
text-decoration:none;
transition:all 0.3s ease;
}

.main-nav .btn-outline:hover{
background-color:#FFFFFF;
color:#121212;
}

/* --------------------------------------- */
/* 6. HERO BANNER */
/* --------------------------------------- */
.hero-banner{
background-color:#121212;
min-height:600px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding-top:80px;
background-image:url('imagens/img_banner.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}

.wcf-content h1{
font-size:3.5em;
color:#FFFFFF;
margin-bottom:10px;
}

.wcf-content h2{
font-size:1.8em;
color:#FFFFFF;
margin-bottom:20px;
}

.wcf-content p{
font-size:1.1em;
color:#FFFFFF;
max-width:600px;
margin:0 auto 30px;
}

/* --------------------------------------- */
/* 7. SEARCH BOX */
/* --------------------------------------- */
.search-box-container{
background-color:rgba(75,75,75,0.7);
padding:30px;
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
max-width:800px;
margin:0 auto;
}

.search-form{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
align-items:flex-end;
}

.form-group{
flex:1;
min-width:200px;
display:flex;
flex-direction:column;
text-align:left;
}

.form-group label{
font-size:0.9em;
color:#FFFFFF;
margin-bottom:5px;
}

.form-group select{
width:100%;
padding:10px;
border:1px solid #4B4B4B;
border-radius:5px;
background-color:#121212;
color:#FFFFFF;
font-size:1em;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E');
background-repeat:no-repeat;
background-position:right 10px center;
background-size:12px;
cursor:pointer;
}

.form-group select:focus{
outline:none;
border-color:var(--color-accent);
}

.btn-search{
background-color:var(--color-accent);
color:#121212;
padding:12px 25px;
border:none;
border-radius:5px;
font-size:1.1em;
font-weight:bold;
cursor:pointer;
transition:background-color 0.3s ease;
flex-shrink:0;
min-width:180px;
}

.btn-search:hover{
background-color:#5ABC2C;
}

/* --------------------------------------- */
/* 8. CONTENT SECTIONS */
/* --------------------------------------- */
.about-section{
padding:20px 0;
background-color:var(--color-background-primary);
text-align:center;
color:var(--color-text-primary);
}

.about-section h2{
font-size:2.2em;
color:var(--color-text-primary);
margin-bottom:16px;
}

.about-description{
font-size:1.1em;
color:var(--color-text-primary);
max-width:800px;
margin:0 auto 30px;
line-height:1.6;
}

.about-cards{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
margin-top:40px;
}

.card{
background-color:var(--color-background-secondary);
color:var(--color-text-primary);
padding:30px;
border-radius:8px;
box-shadow:var(--shadow-elevation-1);
text-align:center;
flex:1;
min-width:280px;
max-width:350px;
transition:transform 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;
border:1px solid var(--color-border);
}

.card:hover{
transform:translateY(-5px);
}

.card i{
font-size:3.5em;
color:var(--color-accent);
margin-bottom:20px;
transition:color 0.3s ease;
}

.card h3{
font-size:1.4em;
font-weight:bold;
margin-bottom:10px;
color:var(--color-text-primary);
}

.card p{
font-size:0.95em;
line-height:1.6;
color:var(--color-text-primary);
}

.video-section{
padding:30px 0;
background-color:var(--color-background-secondary);
text-align:center;
color:var(--color-text-primary);
}

.video-section h2{
font-size:2.5em;
color:var(--color-text-primary);
margin-bottom:40px;
}

.video-wrapper{
position:relative;
width:100%;
padding-bottom:41.25%;
height:0;
overflow:hidden;
max-width:700px;
margin:0 auto;
background-color:var(--color-background-secondary);
border-radius:8px;
box-shadow:var(--shadow-elevation-1);
}

.video-wrapper iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
}

.pricing-section{
padding:40px 0;
background-color:var(--color-background-primary);
text-align:center;
color:var(--color-text-primary);
}

.pricing-section h2{
font-size:2.5em;
color:var(--color-text-primary);
margin-bottom:20px;
}

.pricing-subtitle{
font-size:1.1em;
color:var(--color-text-primary);
max-width:700px;
margin:0 auto 50px;
line-height:1.6;
}

.pricing-cards{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
}

.plan-card{
background-color:var(--color-background-secondary);
color:var(--color-text-primary);
box-shadow:var(--shadow-elevation-1);
border-radius:8px;
padding:40px 20px;
flex:1;
min-width:280px;
max-width:350px;
transition:transform 0.3s ease,border 0.3s ease,background-color 0.3s ease;
border:1px solid transparent;
position:relative;
overflow:hidden;
}

.plan-card:hover{
transform:translateY(-5px);
}

.plan-card h3{
font-size:1.8em;
margin-bottom:20px;
color:var(--color-text-primary);
}

.plan-card h4{
font-size:2.5em;
font-weight:bold;
margin-bottom:30px;
color:var(--color-text-primary);
}

.plan-card .price-per-month{
font-size:0.6em;
font-weight:normal;
color:var(--color-text-primary);
}

.features-list{
list-style:none;
text-align:left;
margin-bottom:30px;
padding:0;
}

.features-list li{
margin-bottom:10px;
font-size:1em;
color:var(--color-text-primary);
}

.features-list i{
margin-right:10px;
}

.features-list i.fa-check{
color:var(--color-accent);
}

.features-list i.fa-times{
color:#E00;
}

.btn-contractar{
background-color:var(--color-accent);
color:#121212;
padding:12px 25px;
border:none;
border-radius:5px;
font-size:1.1em;
font-weight:bold;
cursor:pointer;
transition:background-color 0.3s ease,transform 0.2s ease;
width:100%;
max-width:200px;
}

.btn-contractar:hover{
background-color:#5ABC2C;
transform:translateY(-2px);
}

.plan-card--popular{
border:2px solid var(--color-accent);
transform:scale(1.03);
box-shadow:0 4px 8px rgba(0,0,0,0.3);
}

.plan-card--popular .popular-tag{
background-color:var(--color-accent);
color:#121212;
padding:5px 15px;
border-radius:5px;
position:absolute;
top:-15px;
left:50%;
transform:translateX(-50%);
font-weight:bold;
font-size:0.9em;
text-transform:uppercase;
white-space:nowrap;
}

.testimonials-section{
padding:80px 0;
background-color:var(--color-background-secondary);
text-align:center;
color:var(--color-text-primary);
}

.testimonials-section h2{
font-size:2.5em;
color:var(--color-text-primary);
margin-bottom:20px;
}

.testimonials-subtitle{
font-size:1.1em;
color:var(--color-text-primary);
max-width:700px;
margin:0 auto 50px;
line-height:1.6;
}

.testimonial-cards{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
}

.testimonial-card{
background-color:var(--color-background-primary);
color:var(--color-text-primary);
box-shadow:var(--shadow-elevation-1);
border-radius:8px;
padding:30px;
flex:1;
min-width:280px;
max-width:380px;
text-align:left;
transition:transform 0.3s ease,background-color 0.3s ease,border 0.3s ease;
border:1px solid var(--color-border);
}

.testimonial-card:hover{
transform:translateY(-5px);
}

.testimonial-card .stars{
margin-bottom:20px;
}

.testimonial-card .stars i{
color:var(--color-accent);
font-size:1.2em;
margin-right:3px;
}

.testimonial-card .quote{
font-size:1em;
line-height:1.6;
margin-bottom:25px;
font-style:italic;
}

.customer-info{
display:flex;
align-items:center;
margin-top:20px;
}

.customer-info .avatar{
width:50px;
height:50px;
border-radius:50%;
background-color:#666;
margin-right:15px;
}

.customer-info .customer-details{
text-align:left;
}

.customer-info .customer-name{
font-weight:bold;
font-size:1.1em;
margin-bottom:3px;
color:var(--color-text-primary);
}

.customer-info .customer-role{
font-size:0.9em;
color:var(--color-text-primary);
}



/* Seu CSS Existente - mantido inalterado */
.contact-model-section{
    padding:30px 0;
    background-color:var(--color-background-primary);
    text-align:center;
    color:var(--color-text-primary);
}

.contact-model-content{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:40px;
}

.model-image-wrapper{
    flex:1;
    min-width:140px;
    max-width:200px;
    text-align:center;
}

.model-image{ /* Esta classe ainda se aplica à imagem padrão desktop */
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}

.contact-text-wrapper{
    flex:1;
    min-width:280px;
    max-width:450px;
    text-align:left;
}

.contact-message{
    font-size:1.2em;
    line-height:1.6;
    margin-bottom:30px;
    color:var(--color-text-primary);
}

/* --- ESTILOS RESPONSIVOS PARA A IMAGEM E ORDEM --- */

/* Esconde a imagem vertical em telas maiores por padrão */
.mobile-model-image {
    display: none;
}

/* Estilos para a imagem de fundo vertical (mobile) */
.model-image-vertical {
    width: 100%;
    /* Ajuste padding-top conforme a proporção da sua imagem modelo_v.png */
    /* Se a imagem modelo_v.png tem 200px de largura por 250px de altura, seria (250/200)*100 = 125% */
    padding-top: 125%; /* Exemplo: ajuste este valor para sua imagem */
    
    background-image: url('imagens/modelo_v.png'); /* Verifique o caminho novamente se o problema persistir */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* Media Query para telas menores (smartphones, tablets na vertical) */
@media (max-width: 768px) { /* Mantenha seu ponto de corte, 768px é um bom padrão */
    .contact-model-content {
        flex-direction: column; /* Empilha o texto e a imagem verticalmente */
        text-align: center; /* Centraliza o conteúdo dentro do container */
    }

    .contact-text-wrapper {
        text-align: center; /* Garante que o texto esteja centralizado */
        /* **Ponto de Correção: Inverter a ordem.** */
        order: 1; /* Coloca o texto ANTES da imagem */
    }
    
    .model-image-wrapper {
        /* **Ponto de Correção: Inverter a ordem.** */
        order: 2; /* Coloca a imagem DEPOIS do texto */
        min-width: 200px; 
        max-width: 250px; /* Ajuste conforme o tamanho desejado para a imagem mobile */
        margin-top: 20px; /* Espaçamento entre o texto e a imagem */
    }

    /* Esconde a imagem original (desktop) em telas menores */
    .desktop-model-image {
        display: none;
    }

    /* Mostra a imagem vertical (mobile) em telas menores */
    .mobile-model-image {
        display: block; /* Torna a div com a imagem de fundo visível */
        width: 100%; /* Ocupa a largura total do seu model-image-wrapper */
        height: 100%; /* Ocupa a altura total do seu model-image-wrapper - ou deixa que o padding-top defina */
    }

    /* Ajustes específicos para o texto em telas menores */
    .contact-message {
        font-size: 1em; /* Reduz o tamanho da fonte se necessário */
    }
}





.btn-whatsapp{
display:inline-flex;
align-items:center;
background-color:var(--color-accent);
color:#121212;
padding:15px 30px;
border-radius:5px;
text-decoration:none;
font-size:1.1em;
font-weight:bold;
cursor:pointer;
transition:background-color 0.3s ease,transform 0.2s ease;
box-shadow:var(--shadow-elevation-1);
}

.btn-whatsapp:hover{
background-color:#5ABC2C;
transform:translateY(-2px);
}

.btn-whatsapp i{
margin-right:10px;
font-size:1.4em;
}

/* --------------------------------------- */
/* 9. FIXED BUTTONS */
/* --------------------------------------- */
.fixed-buttons{
position:fixed;
bottom:20px;
z-index:1000;
width:100%;
display:flex;
justify-content:space-between;
padding:0 20px;
pointer-events:none;
}

.fixed-btn{
background-color:var(--color-accent);
color:#121212;
border:none;
border-radius:50%;
width:50px;
height:50px;
display:flex;
justify-content:center;
align-items:center;
font-size:1.5em;
cursor:pointer;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
transition:background-color 0.3s ease,transform 0.2s ease;
pointer-events:auto;
}

.fixed-btn:hover{
background-color:#5ABC2C;
transform:scale(1.05);
}

.theme-toggle-btn{
margin-right:auto;
}

.scroll-to-top-btn{
margin-left:auto;
}

/* --------------------------------------- */
/* 10. FOOTER */
/* --------------------------------------- */
footer{
background-color:var(--color-background-header);
color:var(--color-text-primary);
padding:60px 0 30px;
}

.footer-content{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:30px;
text-align:left;
}

.footer-col{
flex:1;
min-width:220px;
max-width:280px;
margin-bottom:20px;
}

.footer-col h3{
font-size:1.3em;
margin-bottom:20px;
color:var(--color-text-primary);
}

.footer-col p,
.footer-col ul li{
font-size:0.95em;
line-height:1.6;
color:var(--color-text-primary);
}

.footer-col ul{
list-style:none;
padding:0;
margin:0;
}

.footer-col ul li{
margin-bottom:10px;
}

.footer-col ul li:last-child{
margin-bottom:0;
}

.footer-links a,
.footer-contact a{
text-decoration:none;
color:var(--color-text-primary);
transition:color 0.3s ease;
}

.footer-links a:hover,
.footer-contact a:hover{
color:var(--color-accent);
}

.footer-contact li i{
margin-right:10px;
font-size:1.1em;
color:var(--color-text-primary);
}

.social-icons{
display:flex;
margin-top:15px;
}

.social-icons a{
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:50%;
background-color:var(--color-border);
color: var(--color-text-primary); /* MUDANÇA: Cor do ícone agora é tema-aware */
font-size: 1.2em;
margin-right: 10px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
background-color: var(--color-accent); /* Fundo verde no hover */
color: var(--color-text-primary); /* Cor do ícone tema-aware (escuro no claro, branco no escuro) */
}

.footer-bottom {
border-top: 1px solid var(--color-border); /* MUDANÇA: Linha divisória agora é tema-aware */
margin-top: 40px;
padding-top: 20px;
text-align: center;
}

.footer-bottom p {
font-size: 0.85em;
color: var(--color-text-primary); /* MUDANÇA: Texto do copyright agora é tema-aware */
}



/* --------------------------------------- */
/* 10. RESPONSIVENESS */
/* --------------------------------------- */
@media (max-width: 768px) {
.hero-banner {
min-height: 400px;
padding-top: 78px;
}

.wcf-content h1 { font-size: 2em; }
.wcf-content h2 { font-size: 1.2em; }
.wcf-content p { font-size: 0.9em; }

.search-box-container { padding: 20px; }
.search-form { gap: 10px; flex-direction: column; align-items: stretch; }
.form-group { min-width: unset; }
.form-group select, .form-group label { font-size: 0.9em; }
.btn-search { padding: 10px 20px; font-size: 1em; width: 100%; min-width: unset; }

.fixed-buttons { bottom: 15px; padding: 0 15px; }
.fixed-btn { width: 45px; height: 45px; font-size: 1.3em; }
}

@media (max-width: 480px) {
.hero-banner { min-height: 350px; }
.wcf-content h1 { font-size: 1.5em; } /* Ajuste para ficar mais proporcional em telas muito pequenas */
.wcf-content h2 { font-size: 1em; }
.wcf-content p { font-size: 0.8em; }

.search-box-container { padding: 15px; }
.btn-search { padding: 10px 15px; font-size: 0.9em; }
}	


/* --------------------------------------- */
    /* 10. MODALS & OVERLAYS */
    /* --------------------------------------- */
    .modal-overlay {
        display: none; /* Escondido por padrão */
        position: fixed; /* Fixo na tela */
        z-index: 1000; /* Acima de todo o conteúdo */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto; /* Permite rolagem se o conteúdo for muito grande */
        background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro semi-transparente */
        display: flex; /* Usar flexbox para centralizar */
        justify-content: center; /* Centralizar horizontalmente */
        align-items: center; /* Centralizar verticalmente */
        /* Para esconder completamente quando não está ativo, podemos usar visibility: hidden; e opacity: 0; */
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.3s ease-out, opacity 0.3s ease-out;
    }

    .modal-overlay.active {
        visibility: visible;
        opacity: 1;
    }

    .modal-content {
        background-color: var(--color-background-primary); /* Fundo do modal tema-aware */
        color: var(--color-text-primary); /* Texto do modal tema-aware */
        padding: 0; /* Remove o padding aqui, o iframe vai preencher */
        border-radius: 8px;
        box-shadow: var(--shadow-elevation-2); /* Sombra um pouco mais forte */
        position: relative;
        width: 90%; /* Largura padrão para o modal */
        max-width: 700px; /* Largura máxima para o modal com iframe */
        height: 90%; /* Altura padrão para o modal com iframe */
        max-height: 600px; /* Altura máxima para o modal com iframe */
        text-align: center;
        transform: translateY(-20px); /* Efeito de entrada */
        opacity: 0; /* Escondido para o efeito de entrada */
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        display: flex; /* Usar flex para o iframe */
        flex-direction: column; /* Conteúdo em coluna */
    }

    .modal-overlay.active .modal-content {
        transform: translateY(0); /* Posição final */
        opacity: 1; /* Visível */
    }

    /* Ajustes específicos para o conteúdo do iframe */
    .modal-iframe-content {
        /* Remove qualquer padding que possa ter no .modal-content para o iframe preencher */
        padding: 0;
        /* Certifique-se que o flexbox está configurado para o iframe crescer */
        display: flex;
        flex-direction: column;
        /* Assegura que o iframe não vaze */
        overflow: hidden;
    }

.close-button {
    color: var(--color-text-primary);
    font-size: 2.5em;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10; /* Garante que o botão de fechar esteja acima do iframe */
    border: none; /* Adicione esta linha para remover a borda padrão */
    background: none; /* Garante que não haja fundo */
    padding: 0; /* Remove qualquer padding padrão que possa simular uma borda */
}

.close-button:hover {
    color: var(--color-accent); /* Verde no hover */
    /* A borda já foi removida na regra principal, então não precisa colocar 'border: none;' aqui */
}

    /* Estilo para o Iframe dentro do Modal */
    .modal-iframe-content iframe {
        flex-grow: 1; /* Faz o iframe preencher o espaço disponível */
        border: none; /* Remove a borda padrão do iframe */
        width: 100%;
        height: 100%;
        border-radius: 8px; /* Para combinar com o modal */
        background-color: var(--color-background-primary); /* Fundo do iframe tema-aware */
    }

    /* Media Queries para Responsividade (opcional, mas recomendado) */
    @media (max-width: 768px) {
        .modal-content {
            width: 95%;
            height: 95%;
            max-width: 95%; /* Aumenta a largura máxima em telas menores */
            max-height: 95%; /* Aumenta a altura máxima em telas menores */
        }
    }