/* Configurações Globais e Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Oswald', sans-serif; /* Usando Oswald como fonte principal */
    background-color: #1a0510; /* Cor de fundo escura caso a imagem não carregue */
    color: #FFFFFF;
}

/* Seção Principal (Hero) */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Alinha o conteúdo ao topo */
    padding: 30px 20px;
    text-align: center;
    background-color: #6F1645;

    /* CAMINHO PARA SEU FUNDO PERSONALIZADO */
    /*
    background-image: url('assets/fundo-uvas.png'); /* <<< MUDE O NOME DO ARQUIVO SE NECESSÁRIO 
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    */
    
}

.hero-content {
    width: 100%;
    max-width: 950px; /* Limita a largura do conteúdo principal */
}

/* Logo */
.logo {
    width: 150px; /* Ajuste o tamanho da sua logo aqui */
    height: auto;
    margin-bottom: 25px;
}


/* Headline Principal */
.headline {
    font-size: 3.2rem; /* Tamanho grande para impacto */
    font-weight: 700; /* Negrito */
    line-height: 1.2;
    max-width: 900px; /* Evita que a linha fique muito comprida */
    margin: 0 auto 10px auto; /* Centraliza e adiciona espaço abaixo */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Sombra para melhor leitura sobre o fundo */
}

.headline .highlight {
    color: #DEAE5F; /* Cor Amarelo/Dourado do seu branding */
}

/* Sub-headline */
.sub-headline {
    font-family: 'Roboto', sans-serif; /* Fonte mais leve para o subtítulo */
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    color: #f0f0f0; /* Um branco não tão forte para dar contraste */
    max-width: 700px;
    margin: 0 auto 0 auto; /* Margem para espaço abaixo do título */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

/* Container do Vídeo (VSL) */
/* Container do Vídeo (VSL) - VERSÃO HORIZONTAL */
.vsl-container {
    width: 100%;
    max-width: 800px; /* Largura máxima para vídeo horizontal */
    margin: 30px auto;
    background-color: #000;
    border-radius: 12px;
    
    /* Borda e sombra para destacar o vídeo */
    border: 3px solid #DEAE5F;
    box-shadow: 0 0 25px rgba(222, 174, 95, 0.5);
    overflow: hidden; /* Garante que o vídeo fique dentro das bordas arredondadas */
    
    /* Aspect ratio para vídeo horizontal (16:9) */
    aspect-ratio: 16/9;
}

/* Estilos para o vídeo dentro do container */
.vsl-container vturb-smartplayer {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Ajustes para Telas Menores (Celulares) */
@media (max-width: 768px) {
    .logo {
        max-width: 200px;
    }

    .headline {
        font-size: 2.2rem; /* Diminui a fonte da headline */
    }
    
    .sub-headline {
        font-size: 1.2rem;
    }

    .vsl-container {
        border-width: 2px;
        max-width: 95%; /* Usa quase toda a largura da tela em mobile */
        margin: 20px auto;
    }
}

/* CÓDIGO CSS: Substitua os estilos antigos da seção de comentários por estes */

/* ======================================================= */
/* ====== ESTILOS DA SEÇÃO DE COMENTÁRIOS (VERSÃO 2) ===== */
/* ======================================================= */

.discovery-testimonials-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Fundo claro para melhor contraste com as fotos */
    text-align: center;
}

.discovery-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333; /* Texto escuro para fundo claro */
    margin-bottom: 50px;
}

.new-comments-container {
    display: flex;
    flex-direction: column; /* Empilha os comentários verticalmente */
    gap: 25px;
    max-width: 750px; /* Largura ideal para leitura */
    margin: 0 auto;
}

.new-comment-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    display: flex;
    align-items: center; /* Alinha a foto e o texto verticalmente */
    gap: 20px;
    text-align: left;
    transition: transform 0.3s ease;
}

.new-comment-card:hover {
    transform: scale(1.03);
}

.comment-photo {
    width: 70px;
    height: 70px;
    border-radius: 50%; /* Deixa a foto redonda */
    object-fit: cover; /* Garante que a imagem não fique distorcida */
    border: 3px solid #6F1645; /* Cor da sua marca para destacar */
    flex-shrink: 0; /* Impede que a imagem encolha */
}

.comment-content {
    display: flex;
    flex-direction: column;
}

.comment-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    font-style: italic;
    color: #444; /* Cor mais escura para melhor leitura */
    line-height: 1.6;
    margin-bottom: 15px;
}

.comment-text::before,
.comment-text::after {
    content: '"';
}

.comment-author {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #6F1645;
    align-self: flex-end; /* Alinha o nome da autora à direita */
}


/* Responsividade para a nova seção de comentários */
@media (max-width: 768px) {
    .discovery-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .new-comment-card {
        flex-direction: column; /* No celular, a foto fica em cima do texto */
        text-align: center;
        gap: 15px;
    }
    
    .comment-photo {
        width: 80px;
        height: 80px;
    }

    .comment-author {
        align-self: center; /* Centraliza o nome no celular */
    }
}

/* ======================================================= */
/* ========= ESTILOS DA SEÇÃO DE OFERTAS (CSS) ========= */
/* ======================================================= */

.esconder {
    display: none; /* Classe universal que o JS usa para esconder/mostrar */
}

.offer-section {
    /* A PROPRIEDADE "display: none;" FOI REMOVIDA DAQUI */
    padding: 30px 20px;
    background-color: #f4f4f4;
}

/* ... o resto do CSS da seção de ofertas continua exatamente igual ... */
.offer-section .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.offer-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.offer-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 15px;
}

#timer-container {
    display: inline-block;
    background-color: #6F1645; /* Roxo */
    color: #fff;
    padding: 10px 30px;
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

#timer {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

#timer-container.expired {
    background-color: #c0392b; /* Vermelho de urgência */
    animation: pulse-red 1.5s infinite;
}

#timer-container.expired span {
    font-size: 1.2rem; /* Fonte menor para a mensagem */
    letter-spacing: normal;
}

@keyframes pulse-red {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


.offer-card {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 15px;
    padding: 30px 20px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.12);
}

.offer-card.highlighted {
    border: 3px solid #6F1645; /* Roxo */
    transform: scale(1.08);
    z-index: 10;
}

.offer-card.highlighted:hover {
    transform: scale(1.1);
}

.popular-badge {
    position: absolute;
    top: -18px;
    background-color: #6F1645; /* Roxo */
    color: #fff;
    padding: 8px 25px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
}

.card-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.card-supply {
    font-family: 'Roboto', sans-serif;
    color: #777;
    margin-bottom: 20px;
}

.product-image {
    max-width: 80%;
    margin-bottom: 20px;
}

.shipping-badge {
    background-color: #28a745;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 15px;
    margin-bottom: 15px;
}

/* --- Estilos para o Bloco de Brinde --- */
.bonus-gift {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 95%;
    margin: 20px 0;
    padding: 12px;
    background-color: #fef9e7; /* Um amarelo bem claro */
    border: 2px dashed #DEAE5F; /* Borda dourada tracejada */
    border-radius: 12px;
    gap: 15px; /* Espaço entre a imagem e o texto */
}

.bonus-gift-image {
    max-width: 50px;
    height: auto;
    flex-shrink: 0; /* Impede que a imagem encolha */
}

.bonus-gift-text {
    text-align: left;
    line-height: 1.2;
}

.bonus-gift-text p {
    margin: 0;
}

.bonus-title {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: #6F1645; /* Roxo principal */
    text-transform: uppercase;
}

.bonus-description {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin: 4px 0 !important;
}

.bonus-benefit {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: #555;
    font-style: italic;
}
/* --- Fim dos Estilos de Brinde --- */

.price-per-bottle {
    font-family: 'Roboto', sans-serif;
    color: #555;
    margin-bottom: 15px;
}

.price-per-bottle .highlight-text {
    color: #6F1645;
    font-weight: 700;
}

.installments {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #333;
}

.main-price {
    font-size: 3.5rem;
    font-weight: 700;
    color: #6F1645; /* Roxo */
    line-height: 1;
}

.full-price {
    font-family: 'Roboto', sans-serif;
    color: #777;
    margin-bottom: 25px;
}

.cta-button {
    display: block;
    width: 100%;
    background-color: #DEAE5F; /* Dourado */
    color: #fff;
    padding: 18px 10px;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(222, 174, 95, 0.4);
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #c99c51;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(222, 174, 95, 0.5);
}

.cta-highlighted {
    background: linear-gradient(180deg, #fce5b3 0%, #DEAE5F 100%);
    color: #6F1645; /* Texto Roxo no botão dourado */
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Responsividade para Mobile */
@media (max-width: 992px) {
    .offer-card.highlighted {
        transform: scale(1.05);
    }
    .offers-container {
        align-items: center;
    }
}

@media (min-width: 992px) {
    #timer-container {
        margin-bottom: 60px;
    }
}

@media (max-width: 768px) {
    .offer-title {
        font-size: 2rem;
    }
    #timer {
        font-size: 2rem;
    }
    .offer-card.highlighted {
        transform: scale(1);
        order: -1; /* Coloca o kit em destaque primeiro no mobile */
    }
}

/* ======================================================= */
/* =========== ESTILOS DA PROVA SOCIAL (AVALIAÇÕES) ====== */
/* ======================================================= */

.reviews-summary {
    margin-top: 60px; /* Espaço acima */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.reviews-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.rating-image {
    max-width: 280px; /* Ajuste o tamanho da imagem se necessário */
    height: auto;
    margin-bottom: 15px;
}

.reviews-count {
    font-family: 'Roboto', sans-serif;
    color: #555;
    font-size: 1rem;
}

/* Ajuste para Mobile */
@media (max-width: 768px) {
    .reviews-title {
        font-size: 1.3rem;
    }
    .rating-image {
        max-width: 240px;
    }
}

/* ======================================================= */
/* =========== ESTILOS DA SEÇÃO DE GARANTIA ============== */
/* ======================================================= */

.guarantee-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Fundo branco para destacar */
}

.guarantee-container {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.guarantee-seal {
    flex-basis: 30%;
    text-align: center;
}

.guarantee-seal img {
    max-width: 220px;
    height: auto;
}

.guarantee-text {
    flex-basis: 70%;
}

.guarantee-headline {
    font-size: 2.2rem;
    font-weight: 700;
    color: #6F1645; /* Roxo */
    line-height: 1.2;
}

.guarantee-subheadline {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.guarantee-body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
}

.guarantee-body strong {
    color: #000;
}

.trust-seals {
    text-align: center;
    margin-top: 10px;
}

.trust-seals img {
    max-width: 100%;
    width: 600px; /* Ajuste a largura conforme o tamanho da sua imagem de selos */
}


/* Responsividade para a Seção de Garantia */
@media (max-width: 768px) {
    .guarantee-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .guarantee-seal {
        flex-basis: auto;
    }

    .guarantee-text {
        flex-basis: auto;
    }

    .guarantee-headline {
        font-size: 1.8rem;
    }

    .guarantee-subheadline {
        font-size: 1.1rem;
    }

    .guarantee-body {
        font-size: 1rem;
    }
}

/* ======================================================= */
/* ============ ESTILOS DA SEÇÃO DE BÔNUS ================ */
/* ======================================================= */

.bonus-section {
    background-color: #6F1645; /* Fundo Roxo */
    padding: 60px 20px;
    color: #fff;
    text-align: center;
}

.bonus-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.highlight-text-gold {
    color: #DEAE5F; /* Dourado */
}

.bonus-main-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 50px;
}

.bonuses-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Faz os cards terem a mesma altura */
    gap: 40px;
    flex-wrap: wrap;
}

.bonus-card {
    background-color: #fff;
    color: #333;
    border-radius: 15px;
    padding: 25px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bonus-image {
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.bonus-label {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    margin: 5px;
    font-weight: 900;
    color: #6F1645;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bonus-name {
    font-size: 1.8rem;
    color: #6F1645; /* Roxo */
    margin-bottom: 10px;
}

.bonus-value {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 15px;
}

.bonus-value del {
    opacity: 0.7;
}

.free-text {
    color: #28a745; /* Verde */
    font-weight: 700;
}

.bonus-description {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/* Responsividade */
@media (max-width: 768px) {
    .bonus-main-title {
        font-size: 2rem;
    }
}

/* ======================================================= */
/* =========== ESTILOS DO BANNER DE FRETE ================ */
/* ======================================================= */

.shipping-banner-section {
    background-color: #1eac11; /* Laranja, como pedido */
    color: #fff;
    padding: 30px 20px;
}

.shipping-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.shipping-icon i {
    font-size: 4rem;
}

.shipping-text h3 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.shipping-text .highlight-underline {
    text-decoration: underline;
}

.shipping-text p {
    font-family: 'Roboto', sans-serif;
    opacity: 0.9;
    margin-top: 5px;
}

/* ======================================================= */
/* ============ ESTILOS DA SEÇÃO DE BENEFÍCIOS =========== */
/* ======================================================= */

.benefits-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Um cinza bem claro para separar */
}

.benefits-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas em desktop */
    gap: 25px 40px;
    list-style: none;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
}

.benefits-list li i {
    color: #6F1645; /* Roxo */
    background-color: #f0e4ea;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0; /* Impede que o ícone encolha */
}

/* ======================================================= */
/* =============== RESPONSIVIDADE DAS NOVAS SEÇÕES ======= */
/* ======================================================= */

@media (max-width: 768px) {
    .shipping-container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .shipping-text h3 {
        font-size: 1.5rem;
    }

    .benefits-list {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .benefits-list {
        grid-template-columns: 1fr; /* 1 coluna em celulares */
    }
}

/* ======================================================= */
/* =========== ESTILOS DA SEÇÃO DE DEPOIMENTOS =========== */
/* ======================================================= */

.testimonials-section {
    padding: 20px 0; /* 0 no L/R para os tickers irem de ponta a ponta */
    background-color: #fff;
    overflow: hidden; /* Importante para os tickers não criarem barra de rolagem */
}

.testimonials-main-title, .testimonials-main-subtitle {
    text-align: center;
    color: #333;
}

.testimonials-main-title {
    font-size: 2.5rem;
    font-weight: 700;
}

.testimonials-main-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Estilos dos Carrosséis de Imagens (Tickers) */
.image-ticker-top, .image-ticker-bottom {
    width: 100%;
    margin-bottom: 40px;
}
.image-ticker-bottom {
    margin-top: 40px;
    margin-bottom: 0;
}

.images-carrossel {
    justify-content: center;
}

.image-ticker-top .swiper-wrapper,
.image-ticker-bottom .swiper-wrapper {
    transition-timing-function: linear !important; /* Movimento contínuo */
}

.image-ticker-top .swiper-slide,
.image-ticker-bottom .swiper-slide {
    width: 200px; /* Largura das imagens */
    height: auto;
}

.image-ticker-top .swiper-slide img,
.image-ticker-bottom .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Estilos do Carrossel Principal */
.testimonials-swiper {
    padding: 20px 0 50px 0; /* Espaço para a barra de rolagem */
}

.testimonial-card {
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%; /* Garante que todos os slides tenham a mesma altura */
}

.testimonial-pic {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    margin-bottom: 15px;
}

.testimonial-author {
    font-size: 1.3rem;
    font-weight: 700;
    color: #6F1645; /* Roxo */
    margin-bottom: 15px;
}

.testimonial-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
    flex-grow: 1; /* Faz o texto ocupar o espaço para alinhar o conteúdo de baixo */
}

.testimonial-text::before,
.testimonial-text::after {
    content: '"';
}

.testimonial-purchase {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid #eee;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: #333;
}

.testimonial-purchase img {
    max-width: 50px;
    height: auto;
}

/* Estilo da Barra de Rolagem do Swiper */
.swiper-scrollbar {
    background: #e0e0e0;
}

.swiper-scrollbar-drag {
    background: #6F1645; /* Roxo */
}

/* ======================================================= */
/* ========= ESTILOS DA SEÇÃO DE INGREDIENTES ============ */
/* ======================================================= */

.ingredients-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Fundo cinza claro para variar */
}

.ingredients-main-title {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 15px;
}

.ingredients-main-subtitle {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas em desktop */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.ingredient-card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden; /* Garante que a imagem não passe da borda */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

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

.ingredient-image {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Garante que as imagens tenham o mesmo tamanho sem distorcer */
}

.ingredient-name {
    font-size: 1.8rem;
    color: #6F1645; /* Roxo */
    margin: 20px 20px 10px 20px;
}

.ingredient-description {
    font-family: 'Roboto', sans-serif;
    color: #555;
    line-height: 1.6;
    margin: 0 20px 20px 20px;
}

.ingredient-benefits {
    list-style: none;
    padding: 0 20px 20px 20px;
    text-align: left;
}

.ingredient-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-family: 'Roboto', sans-serif;
    color: #333;
}

.ingredient-benefits li i {
    color: #28a745; /* Cor verde para o check */
    margin-top: 4px; /* Alinha o ícone com o texto */
}

/* Responsividade para Ingredientes */
@media (max-width: 992px) {
    .ingredients-grid {
        grid-template-columns: 1fr; /* 1 coluna em tablets e celulares */
        max-width: 500px; /* Limita a largura em telas menores */
    }

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

/* ======================================================= */
/* ============= ESTILOS DA SEÇÃO DE FAQ ================= */
/* ======================================================= */

.faq-section {
    padding: 60px 20px;
    background-color: #fff;
}

.faq-main-title {
    text-align: center;
    font-size: 2.5rem;
    color: #6F1645; /* Roxo */
    margin-bottom: 40px;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    text-align: left;
}

.faq-question span {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}

.faq-icon {
    font-size: 1.5rem;
    color: #6F1645; /* Roxo */
    transition: transform 0.3s ease-in-out;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.faq-answer p, .faq-answer ul {
    font-family: 'Roboto', sans-serif;
    color: #555;
    line-height: 1.7;
    padding-bottom: 20px;
}

.faq-answer ul {
    padding-left: 20px;
}

/* ======================================================= */
/* ====== ESTILOS DA SEÇÃO DE REFERÊNCIAS CIENTÍFICAS ==== */
/* ======================================================= */

.references-section {
    padding: 60px 20px;
    background-color: #fff; /* Fundo cinza claro */
}

.references-main-title {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 40px;
}

.references-logos {
    text-align: center;
    margin-bottom: 40px;
}

.references-logos img {
    max-width: 100%;
    width: 800px; /* Ajuste a largura conforme o tamanho da sua imagem */
}

.references-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colunas */
    gap: 15px 40px; /* Espaçamento entre linhas e colunas */
    max-width: 1200px;
    margin: 0 auto;
}

.reference-item {
    font-family: 'Roboto', sans-serif;
    font-size: 0.5rem;
    color: #555;
}

/* Responsividade */
@media (max-width: 768px) {
    .references-grid {
        grid-template-columns: 1fr; /* 1 coluna em telas menores */
    }

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

/* ======================================================= */
/* ============= NOVOS ESTILOS DO RODAPÉ ================= */
/* ======================================================= */

.site-footer {
    background-color: #1a0510; /* Fundo escuro, igual ao body */
    border-top: 4px solid #6F1645;
    color: rgba(222, 174, 95, 0.8); /* Dourado com um pouco de transparência */
    padding: 40px 20px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.site-footer .footer-info {
    margin-bottom: 25px;
}

.site-footer .footer-info p {
    margin-bottom: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-nav {
    margin: 20px 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 25px; /* Espaçamento entre linhas e colunas */
}

.footer-links a {
    color: #DEAE5F; /* Dourado da marca */
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff; /* Branco ao passar o mouse */
    text-decoration: underline;
}

.footer-disclaimer {
    max-width: 800px;
    margin: 30px auto;
    font-size: 0.8rem;
    line-height: 1.7;
    opacity: 0.6;
}

.site-footer .copyright {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 30px;
}

/* ======================================================= */
/* =========== ESTILOS DA NOTIFICAÇÃO DE COMPRA ========== */
/* ======================================================= */

.notification-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    padding: 15px;
    z-index: 1000;
    
    /* Começa escondido e fora da tela */
    opacity: 0;
    transform: translateX(-120%);
    transition: all 0.5s ease-in-out;
    visibility: hidden;
}

.notification-popup.show {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

.notification-popup img {
    width: 60px;
    height: auto;
    margin-right: 15px;
}

.notification-content p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: #333;
    font-size: 0.9rem;
    line-height: 1.4;
}

.notification-content p strong {
    color: #6F1645; /* Roxo */
}

.notification-time {
    font-size: 0.75rem;
    color: #777;
    opacity: 0.8;
}

/* Responsividade da notificação */
@media (max-width: 480px) {
    .notification-popup {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }
}

/* ======================================================= */
/* ========= ESTILOS DO POP-UP DE SAÍDA ================== */
/* ======================================================= */

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Estado inicial escondido */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 550px;
    width: 90%;
    position: relative;
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);

    /* Animação de entrada */
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.popup-overlay.visible .popup-content {
    transform: scale(1);
}

.close-popup-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

.popup-logo {
    max-width: 100px;
    margin-bottom: 15px;
}

.popup-headline {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    color: #6F1645; /* Roxo */
    line-height: 1.2;
    margin-bottom: 15px;
}

.popup-offer-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}

.popup-cta-btn {
    display: block;
    background-color: #ff7300; /* Amarelo vibrante */
    color: #ffffff; /* Azul escuro */
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(255, 235, 59, 0.5);
    transition: transform 0.2s ease;
}

.popup-cta-btn:hover {
    transform: scale(1.05);
}

.popup-reviews-img {
    max-width: 250px;
    margin: 0 auto;
}

/* ======================================================= */
/* =========== ESTILOS DO BOTÃO DE CTA FIXO ============== */
/* ======================================================= */

.sticky-cta {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;

    background-color: #DEAE5F;
    color: #6F1645;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5), 0 5px 20px rgba(0,0,0,0.3);
    
    /* Estado inicial: escondido */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 150px); /* Começa abaixo da tela */
    transition: all 0.4s ease-in-out;
}

.sticky-cta.visible {
    /* Estado visível */
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
}

.sticky-cta:hover {
    transform: translateX(-50%) scale(1.05);
}

@media (max-width: 768px) {
    .sticky-cta {
        font-size: 1.1rem;
        padding: 12px 20px;
        width: 90%;
        justify-content: center;
    }
}

/* ======================================================= */
/* ====== ESTILOS PARA PÁGINAS INTERNAS (Contato, etc.) ==== */
/* ======================================================= */

/* --- Cabeçalho Simples para Páginas Internas --- */
.page-header {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.header-logo {
    max-width: 250px;
    height: auto;
}

/* --- Área de Conteúdo Principal --- */
.content-page-section {
    background-color: #ffffff;
    color: #333;
    padding: 60px 20px;
    text-align: center;
}

.content-page-section .container {
    max-width: 800px;
    margin: 0 auto;
}

.content-page-section h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #6F1645; /* Roxo da marca */
    margin-bottom: 15px;
}

.content-page-section .subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 40px;
}

.content-page-section p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    text-align: left;
}

/* --- Caixa de Informação de Contato --- */
.contact-info-box {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    margin-top: 20px;
}

.contact-info-box p {
    text-align: center;
    margin-bottom: 25px;
}

.contact-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background-color: #fff;
    border: 2px dashed #DEAE5F;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.contact-email .fa-envelope {
    color: #6F1645;
    font-size: 1.8rem;
}

.contact-email a {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-email a:hover {
    color: #6F1645;
}

.contact-info-box .response-time {
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .content-page-section h1 {
        font-size: 2.2rem;
    }
    .contact-email a {
        font-size: 1.2rem;
    }
}

/* ======================================================= */
/* ====== ESTILOS PARA TEXTO LEGAL (Termos, Privacidade) ==== */
/* ======================================================= */

.last-updated {
    font-size: 0.9rem;
    font-style: italic;
    color: #777;
    margin-bottom: 40px;
}

.legal-text-content {
    text-align: left;
}

.legal-text-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
    margin-top: 35px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.legal-text-content p {
    margin-bottom: 15px;
}

.legal-text-content ul {
    margin-left: 25px;
    margin-bottom: 15px;
}

.legal-text-content li {
    margin-bottom: 10px;
}

.legal-text-content strong {
    color: #000;
}

/* ======================================================= */
/* ====== ESTILOS PARA A PÁGINA DE REFERÊNCIAS ==== */
/* ======================================================= */

.references-list {
    margin-top: 40px;
}

.references-list ol {
    list-style-type: decimal;
    text-align: left;
    margin: 0;
    padding-left: 25px; /* Adjust indentation */
}

.references-list li {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
    padding-left: 10px;
}

.references-list a {
    color: #6F1645; /* Brand purple */
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s;
}

.references-list a:hover {
    color: #333;
}
/* ======================================================= */
/* ====== VERSÃO FINAL - ESTILOS PARA OS CARDS DE OFERTA ========== */
/* ======================================================= */

/* Container principal das ofertas - VERSÃO DEFINITIVA */
.offers-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    
    /* Padrão Mobile: empilhado e centralizado */
    flex-direction: column;
    align-items: center;
}

/* Regra para Desktop: lado a lado */
@media (min-width: 992px) {
    .offers-container {
        flex-direction: row;
        align-items: center; /* Alinha verticalmente no centro */
        flex-wrap: wrap;
    }
}

/* Estilo geral dos novos cards */
.offer-card-new {
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.offer-card-new:hover {
    transform: translateY(-8px);
}

/* Destaque para o card do meio */
.offer-card-new.highlighted-new {
    border: 3px solid #DEAE5F; /* Seu dourado */
    z-index: 10;
}
/* Zoom no card destacado apenas em desktop */
@media (min-width: 992px) {
    .offer-card-new.highlighted-new {
        transform: scale(1.06);
    }
    .offer-card-new.highlighted-new:hover {
        transform: scale(1.09);
    }
}


/* Corpo branco do card */
.package-body {
    padding: 20px;
}

/* Cabeçalho colorido (Roxo) */
.package-header {
    background-color: #6F1645; /* Seu roxo */
    color: #ffffff;
    padding: 15px 10px;
}

/* Cabeçalho do card em destaque (Dourado) */
.package-header.best-value {
    background-color: #DEAE5F; /* Seu dourado */
    color: #6F1645; /* Texto roxo para contraste */
}

.package-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}

.package-supply {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    margin: 5px 0 0 0;
    opacity: 0.9;
}

/* Imagem do produto */
.product-image-new {
    max-width: 220px;
    margin: 5px auto 10px auto;
    display: block;
}

/* Display do preço (Ex: $59 Per Bottle) */
.price-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    color: #333;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 700;
}

.price-label {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    text-align: left;
    line-height: 1.2;
}

/* Detalhes (Economia e Garantia) */
.package-details {
    margin: 15px 0;
    padding: 15px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.package-details p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    margin: 8px 0;
    font-weight: 500;
    color: #444;
}

.package-details .fa-check-circle {
    color: #28a745; /* Verde para o check */
    margin-right: 8px;
}

/* Novo botão de CTA */
.cta-button-new {
    display: block;
    width: 100%;
    background-color: #6F1645; /* Seu Roxo */
    color: #fff;
    padding: 15px 10px;
    border-radius: 12px;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    margin-top: 10px;
}

.cta-button-new:hover {
    opacity: 0.9;
    transform: scale(1.03);
}

.cta-button-new small {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: none;
    margin-top: 2px;
}

/* Botão em destaque */
.cta-button-new.cta-highlighted-new {
    background-color: #ff8c00; /* Laranja vibrante para chamar atenção, como no exemplo */
    color: #fff;
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}


/* Ícones de pagamento */
.payment-icons {
    max-width: 220px;
    margin: 15px auto 10px auto;
}

/* Preço Total */
.total-price {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #555;
}

.total-price strong {
    color: #333;
    font-weight: 700;
}

/* Informação de Frete */
.shipping-info {
    font-family: 'Roboto', sans-serif;
    color: #28a745;
    font-weight: bold;
    margin-top: 8px;
}

/* Ajustes para Celular */
@media (max-width: 991px) {
    /* Reordena os cards na visualização mobile para 6, 9, 3 */
    .offers-container .offer-card-new:nth-child(1) { order: 3; } /* 3 Potes -> Fica em último */
    .offers-container .offer-card-new:nth-child(2) { order: 1; } /* 6 Potes -> Fica em primeiro */
    .offers-container .offer-card-new:nth-child(3) { order: 2; } /* 9 Potes -> Fica em segundo */
}