/* =========================================
   1. RESET E VARIÁVEIS (Dark Mode Refinado)
   ========================================= */
:root {
    --cor-fundo: #121212; /* Fundo principal (Cinza quase preto) */
    --cor-secundaria: #1A1A1A; /* Fundo para criar quebra de seção (Cinza escuro) */
    --cor-texto: #D1D1D1; /* Cinza claro para leitura confortável */
    --cor-titulos: #FFFFFF; /* Branco puro para contraste nos títulos */
    --cor-destaque: #FFD700; /* Amarelo da logo */
    --cor-destaque-hover: #E6C200;
    --cor-header-footer: #000000; /* Preto puro */
    --altura-cabecalho: 75px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--altura-cabecalho);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
}

/* =========================================
   2. CONTAINERS E ESTRUTURA GERAL
   ========================================= */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.secao-site {
    padding: 80px 0;
}

.fundo-cinza {
    background-color: var(--cor-secundaria); /* Agora é escuro de verdade */
}

/* Títulos agora são brancos, exceto o H1 que puxa o amarelo para impacto */
h1 {
    color: var(--cor-destaque);
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

h2, h3 {
    color: var(--cor-titulos);
    margin-bottom: 20px;
}

p {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* =========================================
   2.5. HERO SECTION E DIFERENCIAIS
   ========================================= */
.hero-section {
    padding-top: 120px; /* Mais espaço no topo por causa do cabeçalho */
    padding-bottom: 80px;
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero-texto {
    flex: 1; /* Ocupa metade da tela */
}

.hero-imagem {
    flex: 1; /* Ocupa a outra metade */
    display: flex;
    justify-content: center;
}

.img-destaque {
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidade */
    border: 1px solid #333; /* Borda sutil de luxo */
}

/* Os Cards Premium */
.diferenciais-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.diferencial-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--cor-secundaria);
    padding: 15px 20px;
    border-radius: 6px;
    border-left: 4px solid var(--cor-destaque); /* Linha amarela indicando força */
    transition: transform 0.3s;
}

.diferencial-card:hover {
    transform: translateX(10px); /* Leve movimento ao passar o mouse */
}

.icone-amarelo {
    font-size: 1.8rem;
}

.diferencial-card h4 {
    color: var(--cor-titulos);
    margin-bottom: 2px;
    font-size: 1.05rem;
}

.diferencial-card p {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #999;
}

/* Responsividade: Como se comporta no celular */
@media (max-width: 900px) {
    .hero-container {
        flex-direction: column; /* Empilha texto e imagem no celular */
        text-align: left;
    }
    
    .hero-imagem {
        order: -1; /* Coloca a imagem acima do texto no celular, se preferir. Para manter abaixo, apague esta linha. */
        margin-bottom: 30px;
    }
}
/* =========================================
   3. CABEÇALHO E TOP BAR
   ========================================= */
.topbar {
    background-color: #050505; /* Fundo levemente mais escuro para contrastar com o texto */
    color: #E0E0E0; /* Cinza bem claro, quase branco. Resolve o problema de leitura. */
    font-size: 0.85rem;
    padding: 10px 0; /* Um pouco mais de respiro (aumentei de 8px para 10px) */
    border-bottom: 1px solid #333; /* Linha de divisão mais marcada */
}

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

.topbar-info {
    display: flex;
    gap: 20px;
}

/* O Cabeçalho Principal */
#cabecalho {
    position: sticky; /* Substitui o fixed. Assim ele respeita a top bar e desce com a tela */
    top: 0;
    left: 0;
    width: 100%;
    height: var(--altura-cabecalho);
    background-color: var(--cor-header-footer);
    border-bottom: 1px solid #222;
    z-index: 1000;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.container-header {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 45px;
    width: auto;
    object-fit: contain;
}

/* Menu de Navegação no centro */
.menu-navegacao {
    display: flex;
    gap: 30px;
}

.menu-navegacao a {
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
}

.menu-navegacao a:hover {
    color: var(--cor-destaque);
}

/* Esconde o menu e a topbar no celular para não esmagar os elementos */
@media (max-width: 850px) {
    .menu-navegacao, .topbar {
        display: none;
    }
}
/* Trava a altura das colunas para não esticarem se um campo novo aparecer */
.alinhamento-topo {
    align-items: flex-start;
}

/* Garante que o select principal do Serviço ocupe 100% da tela */
.form-grupo > select#tipo-servico {
    width: 100%;
}
/* =========================================
   4. BOTÕES (Amarelos com texto Preto)
   ========================================= */
.btn-orcamento-topo {
    background-color: var(--cor-destaque);
    color: #000000;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background-color 0.3s;
}

.btn-orcamento-topo:hover {
    background-color: var(--cor-destaque-hover);
}

.btn-whatsapp-grande {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--cor-destaque);
    color: #000000;
    border: none;
    padding: 16px 32px;
    font-size: 1.2rem;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
}

.btn-whatsapp-grande:hover {
    background-color: var(--cor-destaque-hover);
    transform: translateY(-2px);
}

.btn-whatsapp-grande img {
    width: 24px;
    height: 24px;
    filter: brightness(0); /* Transforma o ícone do whats em preto para combinar */
}

/* =========================================
   5. GRID DE MARCAS (Flexbox para equilíbrio visual)
   ========================================= */
.grid-marcas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Dá espaço de respiro entre as marcas */
    margin-top: 50px;
}

.marca-item {
    width: 100%;
    max-width: 140px; /* Limite de largura para as logos muito horizontais */
    height: auto;
    max-height: 55px; /* Trava a altura para as logos mais quadradas não ficarem gigantes */
    object-fit: contain;
    filter: grayscale(100%) brightness(200%);
    transition: filter 0.3s, transform 0.3s;
}

.marca-item:hover {
    filter: grayscale(0%) brightness(100%);
    transform: scale(1.08);
}
/* =========================================
   6. CATÁLOGO DE MARCAS (Carrossel Infinito Premium)
   ========================================= */
.catalogo-marcas {
    margin-top: 80px;
    text-align: center;
    padding-top: 50px;
    border-top: 1px solid #333;
}

.catalogo-marcas h3 {
    color: var(--cor-titulos);
    font-size: 1.4rem;
}

/* Container do Slider com efeito de sombra nas bordas */
.slider-marcas {
    width: 100%;
    overflow: hidden; /* Esconde o que sai da tela */
    position: relative;
    margin-top: 40px;
    padding: 20px 0;
}

/* Gradientes laterais para as logos "sumirem" nas pontas */
.slider-marcas::before,
.slider-marcas::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 2;
}

.slider-marcas::before {
    left: 0;
    background: linear-gradient(to right, var(--cor-secundaria) 0%, transparent 100%);
}

.slider-marcas::after {
    right: 0;
    background: linear-gradient(to left, var(--cor-secundaria) 0%, transparent 100%);
}

/* A pista que vai rodar. Largura alta para caber tudo. */
.slider-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scrollSlider 25s linear infinite; /* 25 segundos para dar a volta */
}

/* Interrompe a animação se o cliente passar o mouse para olhar uma marca específica */
.slider-marcas:hover .slider-track {
    animation-play-state: paused;
}

.slide-logo {
    width: 120px; /* Menor que as marcas principais */
    height: 45px;
    object-fit: contain;
    margin: 0 40px; /* Distância entre as marcas */
    filter: grayscale(100%) opacity(0.5); /* Mais discretas para não roubar a atenção do topo */
    transition: filter 0.3s, opacity 0.3s, transform 0.3s;
}

.slide-logo:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* A Mágica do Loop */
@keyframes scrollSlider {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move 50% para a esquerda (como dobramos a lista no HTML, o meio é o fim da primeira lista) */
        transform: translateX(-50%);
    }
}
/* =========================================
   7. RODAPÉ
   ========================================= */
main {
    margin-top: var(--altura-cabecalho);
}

footer {
    background-color: var(--cor-header-footer);
    color: #888;
    padding: 50px 0;
    border-top: 1px solid #222;
}

.text-center {
    text-align: center;
}
/* =========================================
   8. SEÇÃO CALL TO ACTION (Orçamento)
   ========================================= */
#orcamento {
    padding: 100px 0; /* Mais espaço de respiro para destacar a caixa */
}

.cta-box {
    background: linear-gradient(145deg, #1c1c1c 0%, #0a0a0a 100%);
    border: 1px solid #333;
    border-top: 4px solid var(--cor-destaque); /* A linha amarela de fechamento */
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); /* Sombra pesada para fazer o card flutuar */
    max-width: 800px;
    margin: 0 auto; /* Centraliza a caixa perfeitamente na tela */
}

.cta-box h2 {
    font-size: 2.2rem;
    color: var(--cor-titulos);
    margin-bottom: 20px;
    line-height: 1.3;
}

.cta-box p {
    color: #b3b3b3;
    font-size: 1.15rem;
    margin-bottom: 40px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* O texto de segurança abaixo do botão */
.cta-microcopy {
    display: block;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
}

/* Ajuste para não esmagar no celular */
@media (max-width: 768px) {
    .cta-box {
        padding: 40px 20px;
    }
    .cta-box h2 {
        font-size: 1.8rem;
    }
}
/* =========================================
   9. FORMULÁRIO DE ORÇAMENTO (Layout Melhorado)
   ========================================= */
.formulario-whatsapp {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}

.form-grupo {
    display: flex;
    gap: 25px; /* Aumentei de 15px para 25px para dar respiro entre as colunas */
    margin-bottom: 25px; /* Mais espaço entre uma linha e outra */
}

/* O pacote que segura o Rótulo e a Caixa juntos */
.campo-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre o Rótulo e a Caixa de digitação */
    text-align: left;
}

.campo-wrapper.w-100 {
    width: 100%;
    flex: none; /* Impede de se comportar como coluna dividida */
}

.campo-wrapper label {
    font-size: 0.95rem;
    color: #cccccc;
    font-weight: 500;
}

.campo-wrapper input,
.campo-wrapper select {
    padding: 15px;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    color: var(--cor-texto);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    width: 100%;
}

.campo-wrapper input:focus,
.campo-wrapper select:focus {
    border-color: var(--cor-destaque);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.btn-form {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}

/* Trava a altura das colunas */
.alinhamento-topo {
    align-items: flex-start;
}

.coluna-dinamica {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.campo-oculto {
    display: none; 
}

/* Classes de controle */
.escondido {
    display: none !important;
}

.alerta-servico-simples {
    color: var(--cor-texto);
    font-size: 1.05rem;
    padding: 15px;
    border-left: 3px solid var(--cor-destaque);
    background-color: #1a1a1a;
    border-radius: 4px;
    margin-bottom: 20px;
}

#btn-enviar-form:disabled {
    background-color: #444;
    color: #888;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 650px) {
    .form-grupo {
        flex-direction: column; /* Empilha no celular */
        gap: 20px;
    }
}

/* =========================================
   10. OTIMIZAÇÃO PARA TOUCH (CELULARES E TABLETS)
   ========================================= */

/* A regra (hover: none) detecta telas de toque (sem mouse) */
@media (hover: none) {
    /* Desativa o salto lateral dos cards de benefícios */
    .diferencial-card:hover {
        transform: none !important;
    }

    /* Como não há mouse, as marcas do carrossel ficam um pouco mais visíveis por padrão */
    .slide-logo {
        opacity: 0.75; 
    }
    
    /* Remove o zoom das marcas ao tocar na tela */
    .slide-logo:hover {
        transform: none !important;
        opacity: 0.75 !important;
    }
}

/* O FEEDBACK TÁTIL (Para todos os dispositivos) */
/* Quando o cliente aperta um botão ou card, ele "afunda" levemente, confirmando a ação */
.btn-whatsapp-grande:active,
.btn-orcamento-topo:active,
.diferencial-card:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s; /* Transição super rápida para dar a sensação de clique físico */
}
/* Restaura a cor e opacidade das marcas apenas em telas menores */
@media (max-width: 768px) {
    .slide-logo {
        filter: grayscale(0%) opacity(1) !important;
    }
}
/* =========================================
   11. BOTÃO WHATSAPP FLUTUANTE (Com Animação Pulse)
   ========================================= */
.whatsapp-flutuante {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366; 
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    z-index: 9999; /* Garante que fique por cima de absolutamente tudo */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    /* A mágica para atrair o olho na visão periférica */
    animation: pulso-whatsapp 2s infinite; 
}

/* Deixa o ícone com o tamanho correto dentro da bolinha */
.whatsapp-flutuante img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    /* Se o seu ícone for preto, a linha abaixo o transforma em branco. 
       Se o seu ícone já for branco, você pode apagar a linha do filter. */
    filter: brightness(0) invert(1); 
}

/* O que acontece na tela do computador ao passar o mouse */
.whatsapp-flutuante:hover {
    transform: scale(1.1);
    animation: none; /* Para de pulsar quando o cliente foca nele */
}

/* O Efeito de Pulso (ondas expandindo) */
@keyframes pulso-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}
/* =========================================
   12. PROVA SOCIAL E ESTRUTURA (Barracão)
   ========================================= */
#prova-social {
    background-color: #0d0d0d;
    padding: 80px 0;
    border-top: 1px solid #222;
}

.grid-prova-social {
    display: flex;
    gap: 40px;
    align-items: center;
}

/* Galeria de Fotos */
.galeria-estrutura {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.foto-loja {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #333;
    /* O truque para encaixar a foto clara no Dark Mode */
    filter: brightness(0.75) contrast(1.15) saturate(0.8);
    transition: filter 0.3s;
}

/* Devolve o brilho original apenas quando o cliente passa o mouse ou clica */
.foto-loja:hover {
    filter: brightness(1) contrast(1) saturate(1);
}

.fotos-menores {
    display: flex;
    gap: 15px;
}

.fotos-menores img {
    width: 50%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #333;
    /* Reduz o estouro da luz branca e puxa o contraste dos elevadores pretos */
    filter: brightness(0.8) contrast(1.1); 
    transition: filter 0.3s;
}

.fotos-menores img:hover {
    filter: brightness(0.95) contrast(1.1);
}

/* Card de Depoimento */
.card-depoimento {
    flex: 1;
    background: linear-gradient(145deg, #1a1a1a, #111);
    padding: 40px 30px;
    border-radius: 12px;
    border-top: 4px solid var(--cor-destaque);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.estrelas {
    font-size: 1.5rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.texto-depoimento {
    font-size: 1.15rem;
    color: #ccc;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
}

.autor-depoimento {
    display: block;
    color: var(--cor-destaque);
    font-weight: 600;
    margin-bottom: 25px;
}

.selo-garantia {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #333;
    color: #888;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .grid-prova-social {
        flex-direction: column;
    }
    .foto-loja {
        height: 200px;
    }
    .fotos-menores img {
        height: 120px;
    }
}
/* =========================================
   13. VITRINE DE PRODUTOS (Com Imagens Reais)
   ========================================= */
.grid-vitrine {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Cria 4 colunas exatas no computador */
    gap: 25px;
}

.card-produto {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px; /* Reduzi o padding para caber a foto melhor */
    text-align: center;
    transition: transform 0.3s, border-color 0.3s;
    display: flex;
    flex-direction: column;
}

/* O tratamento da imagem para encaixar no Dark Mode */
.imagem-produto {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 20px;
    filter: brightness(0.7) contrast(1.1); /* Escurece a luz estourada do teto */
    transition: filter 0.3s;
}

.card-produto:hover {
    border-color: var(--cor-destaque);
    transform: translateY(-5px);
}

/* Quando o cliente passa o mouse, a foto "acende" revelando o detalhe */
.card-produto:hover .imagem-produto {
    filter: brightness(1) contrast(1.1);
}

.card-produto h3 {
    color: var(--cor-destaque);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.card-produto p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1; /* Empurra a tag da marca sempre para o fundo do card */
}

.marcas-destaque {
    display: inline-block;
    background-color: #2a2a2a;
    color: #aaa;
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Otimização para Touch (Celulares) */
@media (hover: none) {
    .card-produto:hover {
        transform: none !important;
        border-color: #333 !important;
    }
    .card-produto:active {
        transform: scale(0.97) !important;
        border-color: var(--cor-destaque) !important;
    }
    .imagem-produto {
        filter: brightness(0.9) contrast(1.1); /* Um pouco mais claro no celular por padrão */
    }
}

/* Responsividade: Tablet (2 colunas) e Celular (1 coluna) */
@media (max-width: 1024px) {
    .grid-vitrine {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-vitrine {
        grid-template-columns: 1fr;
    }
    .imagem-produto {
        height: 160px !important; /* Trava a altura para a foto não esticar verticalmente */
        object-fit: cover !important;
    }
}
.btn-header-destaque {
    background-color: var(--cor-destaque);
    color: #000 !important;
    padding: 8px 18px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-header-destaque:hover {
    background-color: #e6c200;
    transform: scale(1.05);
}

/* Oculta o botão extra no celular, pois o ícone flutuante do WhatsApp já cumpre essa função lá */
@media (max-width: 768px) {
    .btn-header-destaque {
        display: none;
    }
}
/* =========================================
   CORREÇÃO DA SEÇÃO EXCELÊNCIA COMPROVADA
   ========================================= */

/* Centraliza o título e o parágrafo da seção de marcas */
#marcas.secao-site {
    text-align: center;
}

#marcas.secao-site .container > h2,
#marcas.secao-site .container > p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Centraliza a grade de marcas principais */
.grid-marcas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
}

/* Força as logos principais e do carrossel a exibirem suas cores reais (removendo o cinza) */
.marca-item,
.slide-logo {
    filter: grayscale(0%) brightness(100%) opacity(1) !important;
}

/* Efeito sutil ao passar o mouse nas logos */
.marca-item:hover,
.slide-logo:hover {
    transform: scale(1.05);
}