/* [root]/assets/css/style.css */

/*
 * ===================================================================
 * VARIÁVEIS GLOBAIS (ROOT)
 * ===================================================================
 */
:root {
    --cor-primaria: #284093;
    --cor-secundaria: #f7a02a;
    --cor-sucesso: #25d366;
    --cor-sucesso-hover: #1DA851;
    --cor-texto-claro: #ffffff;
    --cor-texto-escuro: #333333;
    --cor-texto-suave: #555555;
    --cor-fundo-claro: #f9f9f9;
    --cor-fundo-branco: #ffffff;
    --fonte-titulos: 'Viga', sans-serif;
    --fonte-corpo: 'Nunito Sans', sans-serif;
    --tamanho-base: 16px;
    --raio-borda: 8px;
    --sombra-padrao: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/*
 * ===================================================================
 * RESET BÁSICO E ESTILOS GLOBAIS
 * ===================================================================
 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fonte-corpo);
    font-size: var(--tamanho-base);
    color: var(--cor-texto-escuro);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulos);
    font-weight: 600;
    color: var(--cor-primaria);
    line-height: 1.2;
}

a {
    color: var(--cor-primaria);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--cor-secundaria);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*
 * ===================================================================
 * COMPONENTES
 * ===================================================================
 */

/* --- Aviso Topo --- */
.notification-bar {
    background-color: var(--cor-secundaria);
    color: var(--cor-texto-escuro);
    text-align: center;
    padding: 10px 20px;
    font-weight: 600;
}

/* --- Header --- */
/* (Começa no final do bloco .notification-bar e vai até o início de .icon-strip-wrapper) */
.landing-header {
    background: url('../images/fundo-header.png') no-repeat center center;
    background-size: cover;
    padding: 10px 5%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 70vh; /* Garante que o header tenha uma altura mínima visualmente agradável */
}
.header-left, .header-right {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente */
}
.header-left { 
    padding: 20px; /* Padding para o container da imagem */
}
.header-left .logo { max-width: 200px; margin-bottom: 20px; }
.header-right .headline {
    font-family: var(--fonte-titulos);
    font-size: 2.8em; /* Ajustado para ser como o original */
    color: var(--cor-secundaria);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 10px; /* Reduz espaçamento */
    line-height: 1.1;
}
.header-right .subheadline {
    font-size: 1.2em;
    color: var(--cor-texto-claro);
    text-align: center;
    margin-bottom: 30px; /* Espaçamento entre texto e botões */
}
.header-left .image-container {
    position: relative;
    transform: rotate(-3deg);
    background-color: var(--cor-fundo-branco);
    padding: 10px;
    margin: 20px auto; /* Centraliza a imagem no container */
    max-width: fit-content; /* Permite que o container se ajuste ao tamanho da imagem + padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
    transition: transform 0.5s ease;
}
.header-left .image-container:hover {
    transform: translateY(-10px) rotate(-4deg);
}
.header-left .image-caption {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cor-fundo-branco);
    padding: 10px 14px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    font-weight: 500;
    color: var(--cor-texto-escuro);
}
.header-mobile { display: none; }

/* --- Faixa de Ícones (Icon Strip) --- */
/* SOLUÇÃO DEFINITIVA: Usando background repetitivo */
.icon-strip-wrapper {
    width: 100%;
    height: 80px; /* Altura da faixa */
    overflow: hidden;
    background-color: transparent;
    position: relative;
}
.icon-strip {
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/icones.svg');
    background-repeat: repeat-x; /* Repete a imagem horizontalmente */
    background-size: auto 60px; /* A altura dos ícones será 40px, largura automática */
    background-position: 0% 50%; /* Posição inicial (esquerda, centro vertical) */
    will-change: background-position; /* Otimização para o navegador */
}

/* --- Produtos --- */
#produtos {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    padding: 40px 5%;
    -webkit-overflow-scrolling: touch;
}
#produtos::-webkit-scrollbar { height: 8px; }
#produtos::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
#produtos::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
#produtos::-webkit-scrollbar-thumb:hover { background: #aaa; }
#produtos > a {
    flex: 0 0 280px;
    display: flex;
    text-decoration: none;
}
.produto {
    background-color: var(--cor-fundo-branco);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-padrao);
    padding: 20px;
    text-align: center;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.produto h2 { font-size: 1.2rem; margin-bottom: 15px; color: var(--cor-primaria); }
.produto img { border-radius: var(--raio-borda); margin: 0 auto; }

/* --- Seção de Vídeo --- */
/* (Começa no final do bloco #produtos > a e vai até o início de .store-info-section) */
.video-section {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--cor-primaria);
    color: var(--cor-texto-claro);
    padding: 40px 5%;
    gap: 30px;
    align-items: center;
    min-height: 70vh; /* Mantém a altura no desktop */
}
.video-section .text-content, .video-section .video-content {
    flex: 1 1 400px;
}
.video-section .text-content h1 { color: var(--cor-secundaria); }
.video-section .text-content ul { list-style: none; padding-left: 0; margin: 20px 0; }
.video-section .text-content li { margin-bottom: 10px; padding-left: 25px; position: relative; }
.video-section .text-content li::before {
    content: '✅';
    position: absolute;
    left: 0;
}
.video-section .video-content {
    align-self: stretch;
}
.video-section .video-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--raio-borda);
}

/* --- O resto dos componentes permanece como estava --- */
.store-info-section{display:flex;flex-wrap:wrap;gap:30px;padding:40px 5%;align-items:stretch}.store-photo,.store-details,.store-map{flex:1 1 300px}.store-details h3{margin-top:15px;margin-bottom:5px}.store-details p{margin-bottom:10px;word-break:break-word}.store-photo img,.store-map iframe{width:100%;height:100%;min-height:300px;object-fit:cover;border-radius:var(--raio-borda);border:none}
/* REGRAS ATUALIZADAS PARA O BANNER */
.banner-section {
    padding: 40px 20px; /* Mantém o espaçamento da seção */
    background-color: var(--cor-fundo-claro);
}

.banner-section .banner-link {
    display: block; /* Essencial para aplicar margin: auto */
    max-width: 960px; /* Mesma largura do FAQ para consistência */
    margin: 0 auto; /* Centraliza o banner */
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-padrao);
    overflow: hidden; /* Garante que a imagem respeite o border-radius */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-section .banner-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* CORREÇÃO DA SEÇÃO FAQ */
.faq-section{
    padding: 40px 20px; /* ALTERADO: Padding horizontal mudou de 5% para 20px fixos */
    max-width:960px; 
    margin:0 auto
}
.faq-title{text-align:center;margin-bottom:30px}
.faq-item{background:var(--cor-fundo-branco);border-radius:var(--raio-borda);margin-bottom:15px;box-shadow:var(--sombra-padrao);overflow:hidden}
.faq-question{font-family: var(--fonte-titulos); padding:15px 20px;cursor:pointer;position:relative;margin:0}
.faq-question::after{content:"+";position:absolute;right:20px;font-size:1.5rem;transition:transform .3s}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 20px}
.faq-item.active .faq-answer{
    max-height:1500px;
    padding-bottom:15px
}
.faq-item.active .faq-question::after{transform:rotate(45deg)}


.testimonial-section{background-color:var(--cor-primaria);padding:40px 0}.testimonial-title{color:var(--cor-secundaria);text-align:center;margin-bottom:30px}.testimonial-wrapper{overflow-x:auto;padding:0 5%}.testimonial-track{display:flex;gap:20px;padding-bottom:15px}.testimonial{flex:0 0 320px;background:var(--cor-fundo-branco);border-radius:var(--raio-borda);padding:20px;box-shadow:var(--sombra-padrao)}.testimonial-header{display:flex;align-items:center;margin-bottom:15px}.testimonial-header img{width:50px;height:50px;border-radius:50%;margin-right:15px}.testimonial-username{font-weight:600}.testimonial-date{font-size:.9rem;color:#777}.testimonial-content{color:var(--cor-texto-suave)}.footer{background-color:var(--cor-primaria);color:var(--cor-texto-claro);padding:30px 20px;text-align:center;border-top:5px solid var(--cor-secundaria)}.footer a{color:var(--cor-texto-claro)}
/* ADICIONE AS REGRAS ABAIXO PARA ESTILIZAR AS ESTRELAS */
.testimonial-rating {
    color: var(--cor-secundaria); /* Cor laranja do tema */
    margin-bottom: 15px; /* Espaçamento abaixo das estrelas */
    font-size: 1.1rem; /* Tamanho das estrelas */
}

.testimonial-content{color:var(--cor-texto-suave)}.footer{background-color:var(--cor-primaria);color:var(--cor-texto-claro);padding:30px 20px;text-align:center;border-top:5px solid var(--cor-secundaria)}.footer a{color:var(--cor-texto-claro)}


/*
 * ===================================================================
 * ELEMENTOS FLUTUANTES (Popup, FAB)
 * ===================================================================
 */
.popup{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);align-items:center;justify-content:center}.popup.active{display:flex}.popup-close-button{position:absolute;top:15px;right:25px;color:var(--cor-texto-claro);font-size:35px;font-weight:700;cursor:pointer;z-index:2001}.iframe-container{width:90%;max-width:450px;height:450px;border:none;border-radius:var(--raio-borda)}

.iframe-container{width:90%;max-width:450px;height:520px;border:none;border-radius:var(--raio-borda)}

/* ESTILO CORRIGIDO E FINAL PARA O FAB */
.fab {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: var(--cor-sucesso);
    color: var(--cor-texto-claro);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-padrao);
    z-index: 1001;
    transition: transform .3s, background-color .3s;
    text-decoration: none;
}

.fab:hover {
    transform: scale(1.1);
    background-color: var(--cor-sucesso-hover);
    color: var(--cor-texto-claro);
}

/* Força o ícone a se centralizar perfeitamente usando posicionamento absoluto */
.fab i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 34px;
    line-height: 1;
}

/*
 * ===================================================================
 * UTILITÁRIOS E BOTÕES
 * ===================================================================
 */
.title-container{text-align:center;padding:20px 5%}.fancy-title{font-family: var(--fonte-titulos); font-size:2rem}.fancy-title::after{content:'';display:block;width:80px;height:4px;background-color:var(--cor-secundaria);margin:10px auto 0}.simple-title{font-family: var(--fonte-titulos); font-size:1.5rem;color:var(--cor-texto-suave);font-weight:400}.button-container{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.btn{padding:12px 25px;font-size:1.1rem;font-weight:600;border-radius:var(--raio-borda);text-decoration:none;cursor:pointer;transition:transform .3s,box-shadow .3s;display:inline-flex;align-items:center;justify-content:center;border:none}.btn:hover{transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.15)}.contact-btn{background-color:var(--cor-sucesso);color:var(--cor-texto-claro)}.contact-btn:hover{background-color:var(--cor-sucesso-hover);color:var(--cor-texto-claro)}.call-btn{background-color:var(--cor-secundaria);color:var(--cor-texto-escuro)}.call-btn:hover{background-color:#d88500;color:var(--cor-texto-escuro)}

/* Restaura as cores originais dos botões */
.contact-btn {
    background-color: var(--cor-sucesso);
    color: var(--cor-texto-claro) !important; /* !important para garantir a sobreposição */
}
.contact-btn:hover {
    background-color: var(--cor-sucesso-hover);
    color: var(--cor-texto-claro) !important;
}

.call-btn {
    background-color: var(--cor-secundaria);
    color: var(--cor-texto-escuro) !important;
}
.call-btn:hover {
    background-color: #d88500;
    color: var(--cor-texto-escuro) !important;
}
/*
 * ===================================================================
 * RESPONSIVIDADE
 * ===================================================================
 */
@media (max-width: 768px) {
    /* CORREÇÃO COMPLETA HEADER MOBILE - FIDELIDADE MÁXIMA AO ORIGINAL */
    .landing-header {
        min-height: auto; /* Remove altura mínima no mobile */
        padding-bottom: 0; /* Remove padding extra na base */
    }
    .header-left, .header-right {
        display: none; /* Esconde a versão desktop */
    }
    .header-mobile {
        display: flex; /* Mostra a versão mobile */
        flex-direction: column; /* Organiza os itens verticalmente */
        align-items: center; /* Centraliza tudo horizontalmente */
        flex: 1 1 100%;
        padding: 20px 0; /* Padding interno */
    }
    .header-mobile .logo {
        max-width: 180px; /* Logo um pouco menor */
        margin-bottom: 15px;
    }
    .header-mobile .headline {
        font-family: var(--fonte-titulos);
        font-size: 1.8em; /* Tamanho de fonte ajustado para mobile */
        color: var(--cor-secundaria); /* **CORRIGIDO**: Laranja */
        margin-top: 0;
        margin-bottom: 10px;
        line-height: 1.1;
        text-align: center;
        padding: 0 10px;
    }
    .header-mobile .subheadline {
        font-size: 0.9em;
        color: var(--cor-texto-claro); /* **CORRIGIDO**: Branco */
        margin-bottom: 25px; /* Espaçamento antes dos botões */
        text-align: center;
        padding: 0 15px;
    }
    .header-mobile .button-container {
        margin-bottom: 30px; /* Espaçamento antes da imagem */
        width: 100%; /* Permite que os botões se espalhem mais */
    }
    /* Restaurando o efeito Polaroid no mobile */
    .header-mobile .image-container {
        position: relative;
        transform: rotate(-3deg);
        background-color: var(--cor-fundo-branco);
        padding: 10px;
        margin: 20px auto; /* Centraliza */
        max-width: 90%; /* Ajusta a largura para mobile */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    .header-mobile .image-caption {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--cor-fundo-branco);
        padding: 10px 14px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        font-weight: 500;
        color: var(--cor-texto-escuro);
        white-space: nowrap;
    }
    
    /* AJUSTE VÍDEO MOBILE */
    .video-section {
        min-height: auto;
        padding: 10px 20px;
    }
    .video-section .text-content {
        order: 2;
        text-align: center; /* Garante alinhamento central no mobile */
    }
    .video-section .video-content {
        order: 1;
        width: 100%;
        aspect-ratio: 16 / 9; /* Mantém a proporção do container */
        margin-bottom: 10px; /* Adiciona espaço entre o vídeo e o texto */
    }
    .video-section .video-content iframe {
        width: 100%;
        height: 100%; /* Força o iframe a preencher o container */
        min-height: auto;
    }
    
    /* Ajuste para botões menores em mobile para caberem */
    .btn {
        padding: 10px 20px;
        font-size: 1rem;
    }


    .testimonial-track { padding: 0 20px 15px; }
    .testimonial { flex-basis: 80%; }
}