.elementor-103 .elementor-element.elementor-element-cd52153{--display:flex;}.elementor-103 .elementor-element.elementor-element-cd52153.e-con{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-103 .elementor-element.elementor-element-cd52153{--width:382px;}}/* Start custom CSS for container, class: .elementor-element-cd52153 *//* style.css */

/* Variáveis CSS para cores e fontes */
:root {
    --primary-yellow: #ffff00;
    --primary-green: #204058;
    --primary-red: #ff0000;
    --dark-bg: #222222; /* Ajustado para um tom escuro */
    --light-bg: #;
    --gradient-start: #102542; /* Cor inicial do gradiente */
    --gradient-end: #204059;   /* Cor final do gradiente */
    --text-dark: #000000;
    --text-light: #ffffff;
    --font-family: 'Poppins', sans-serif;
}

/* Reset básico e estilos globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #ffffff; /* Fundo padrão branco para seções light-bg */
}

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

.text-center {
    text-align: center;
}

/* Estilos da barra de navegação e menu hamburger */
.navbar {
    background-color: var(--dark-bg);
    color: var(--text-light);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.navbar .logo {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--primary-yellow);
}

.navbar .nav-links ul {
    list-style: none;
    display: flex;
}

.navbar .nav-links li {
    margin-left: 25px;
}

.navbar .nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.navbar .nav-links a:hover {
    color: var(--primary-yellow);
}

.hamburger {
    display: none; /* Oculto por padrão em telas grandes */
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 2em;
    cursor: pointer;
    padding: 5px;
}

/* Responsividade do menu hamburger */
@media (max-width: 768px) {
    .hamburger {
        display: block; /* Visível em telas pequenas */
    }

    .navbar .nav-links {
        display: none; /* Oculta a lista de links por padrão */
        flex-direction: column;
        width: 100%;
        background-color: var(--dark-bg);
        position: absolute;
        top: 70px; /* Abaixo da navbar */
        left: 0;
        text-align: center;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    }

    .navbar .nav-links.active {
        display: flex; /* Mostra a lista quando ativa */
    }

    .navbar .nav-links ul {
        flex-direction: column;
        width: 100%;
    }

    .navbar .nav-links li {
        margin: 10px 0;
    }
}

/* Seções gerais de conteúdo */
.section-heading {
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--text-light); /* Padrão para gradiente/dark bg */
}

.section-subheading {
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: 600;
}

.hero-section {
    background: linear-gradient(to right, #102542, #204058); /* Gradiente azul para a seção hero */
    color: var(--text-light);
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.hero-title {
    font-size: 3.5em;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.5em;
    font-weight: 600;
}

/* Cores de fundo das seções de informação */
.gradient-bg {
    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
    color: var(--text-light);
    padding: 40px 20px;
}

.light-bg {
    background-color: var(--light-bg);
    color: var(--text-dark);
    padding: 40px 20px;
}

.dark-bg {
    background-color: var(--dark-bg);
    color: var(--text-light);
    padding: 40px 20px;
}

.yellow-text {
    color: var(--primary-red) !important;
}

/* Botões */
.button-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.button {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    color: var(--text-light);
}

.primary-button {
    background-color: #0cc243 /* vermelho vibrante */
}

.primary-button:hover {
    background-color: #18ff4a;
    transform: translateY(-2px);
}

.button-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    fill: var(--text-light);
}

/* Animação de pulsação */
.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(119, 221, 119, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(119, 221, 119, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(119, 221, 119, 0);
    }
}

/* Seção de Visão Geral do Produto */
.product-overview-cta .product-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha */
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
}

.product-image-container {
    flex: 1;
    min-width: 300px; /* Garante que a imagem não fique muito pequena */
    text-align: center;
}

.product-main-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.product-content {
    flex: 2;
    min-width: 300px; /* Garante que o conteúdo não fique muito pequeno */
}

/* Seção de Testemunhos */
.testimonials-section {
    background-color: #ffffff;
    padding: 60px 20px;
}

.testimonials-section .section-heading {
    color: var(--text-dark);
}

.rating-container {
    margin: 20px 0;
}

.stars-rating,
.reviews-info p {
    font-size: 1.1em;
    font-weight: 600;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.testimonial-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.elementor-testimonial__text {
    font-style: italic;
    margin-bottom: 20px;
    color: #555555;
}

.elementor-testimonial__footer {
    display: flex;
    align-items: center;
    margin-top: auto; /* Empurra o footer para o final */
}

.elementor-testimonial__image img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 3px solid var(--primary-yellow);
}

.elementor-testimonial__cite {
    font-style: normal;
    display: flex;
    flex-direction: column;
}

.elementor-testimonial__name {
    font-weight: 700;
    color: var(--text-dark);
}

.elementor-testimonial__title {
    font-size: 0.9em;
    color: #777777;
}

/* Seções de Texto e Imagem */
.info-section .text-content {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-dark);
}

.info-section.gradient-bg .section-heading {
    color: var(--text-light);
}

.info-section.gradient-bg .section-subheading {
    color: var(--primary-yellow);
}

.medical-illustration-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.author-info {
    font-size: 1em;
    margin-top: -10px;
    margin-bottom: 20px;
}

/* Seção Pros e Cons */
.pros-cons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.pros-section,
.cons-section {
    flex: 1;
    min-width: 300px;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.pros-section ul,
.cons-section ul {
    list-style: none;
    padding-left: 0;
}

.pros-section ul li,
.cons-section ul li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    font-size: 1em;
    color: var(--text-dark);
}

.pros-section ul li::before {
    content: '✅'; /* Ícone de check para Pros */
    position: absolute;
    left: 0;
    color: var(--primary-green);
    font-size: 1.2em;
}

.cons-section ul li::before {
    content: '❌'; /* Ícone de X para Cons */
    position: absolute;
    left: 0;
    color: var(--primary-red);
    font-size: 1.2em;
}

/* Seção de Ingredientes e Benefícios (listas) */
.info-section ul {
    list-style: disc; /* Bolinhas padrão para listas */
    margin-left: 20px;
    margin-bottom: 20px;
    color: var(--text-dark); /* Garante a cor do texto nas listas */
}

.info-section ul li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Seção de Preços */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    align-items: flex-start; /* Alinha os itens ao topo */
}

.pricing-option {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    overflow: hidden;
    transition: transform 0.3s ease;
    text-align: center;
}

.pricing-option:hover {
    transform: translateY(-10px);
}

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

.pricing-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Seção Final de Pedido */
.order-image-container {
    margin: 30px auto;
    max-width: 600px;
}

.product-offer-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.availability {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.old-price {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.current-price {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--text-dark);
}

/* Seção FAQ */
.faq-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.faq-item details {
    cursor: pointer;
    padding: 20px;
}

.faq-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-dark);
    display: block; /* Garante que a seta fique visível */
    position: relative;
    padding-right: 30px; /* Espaço para a seta */
}

.faq-title::-webkit-details-marker {
    display: none; /* Remove a seta padrão do Chrome/Safari */
}

.faq-title::after {
    content: '▶'; /* Seta para indicar que é clicável */
    position: absolute;
    right: 0;
    font-size: 0.8em;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.faq-item details[open] .faq-title::after {
    transform: translateY(-50%) rotate(90deg); /* Gira a seta quando aberto */
}

.faq-item p {
    padding-top: 15px;
    border-top: 1px solid #eee;
    margin-top: 15px;
    font-size: 1em;
    line-height: 1.6;
    color: #555555;
}

/* Seção de Garantia */
.guarantee-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    padding: 40px 20px;
    justify-content: center;
}

.guarantee-image img {
    max-width: 200px;
    height: auto;
}

.guarantee-text {
    flex: 1;
    min-width: 280px;
}

.guarantee-text .section-subheading {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.8em;
}

/* Rodapé */
footer {
    background-color: var(--dark-bg);
    color: #999999;
    padding: 40px 20px;
    text-align: center;
    font-size: 0.9em;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-links {
    list-style: none;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: #999999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--text-light);
}

.disclaimer {
    max-width: 800px;
    margin-top: 20px;
    line-height: 1.5;
}

/* Notificação flutuante */
#notification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#notification img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

#notification .time {
    font-size: 0.8em;
    color: #cccccc;
    display: flex;
    align-items: center;
    gap: 5px;
}

.verification-icon {
    width: 16px;
    height: 16px;
    background-color: #00ff00; /* Ícone de verificado */
    border-radius: 50%;
    display: inline-block;
}

.verification-text {
    font-size: 0.8em;
    color: #00ff00;
}


/* Botão "Voltar ao topo" */
.back-to-top-btn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    bottom: 30px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button at the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--dark-bg); /* Set a background color */
    color: var(--text-light); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px 20px; /* Some padding */
    border-radius: 50%; /* Rounded corners */
    font-size: 1.8em; /* Increase font size */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.back-to-top-btn:hover {
    background-color: var(--gradient-end);
}

/* Responsividade Geral */
@media (max-width: 992px) {
    .hero-title {
        font-size: 3em;
    }
    .hero-subtitle {
        font-size: 1.3em;
    }
    .section-heading {
        font-size: 2em;
    }
    .section-subheading {
        font-size: 1.3em;
    }
    .product-overview-cta .product-grid {
        flex-direction: column;
        text-align: center;
    }
    .product-image-container,
    .product-content {
        min-width: unset;
        width: 100%;
    }
    .testimonial-grid,
    .pricing-grid,
    .pros-cons-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2.5em;
    }
    .hero-subtitle {
        font-size: 1.1em;
    }
    .section-heading {
        font-size: 1.8em;
    }
    .section-subheading {
        font-size: 1.1em;
    }
    .button {
        font-size: 1em;
        padding: 12px 20px;
    }
    .button-icon {
        width: 20px;
        height: 20px;
    }
    .footer-links {
        flex-direction: column;
    }
    #notification {
        left: 10px;
        right: 10px;
        bottom: 10px;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 15px;
    }
    #notification img {
        margin-bottom: 5px;
    }
    .back-to-top-btn {
        right: 15px;
        bottom: 15px;
        padding: 12px 15px;
        font-size: 1.5em;
    }
}

// script.js

// Lazy loading para imagens
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazy'); // Seleciona todas as imagens com a classe 'lazy'

    // Verifica se IntersectionObserver é suportado pelo navegador
    if ("IntersectionObserver" in window) {
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    // Define o src da imagem usando o valor de data-src
                    lazyImage.src = lazyImage.dataset.src;
                    // Remove a classe 'lazy' para que não seja mais observada
                    lazyImage.classList.remove('lazy');
                    // Para de observar a imagem uma vez que ela foi carregada
                    observer.unobserve(lazyImage);
                }
            });
        }, {
            rootMargin: '0px 0px 100px 0px' // Carrega imagens quando estiverem a 100px da viewport
        });

        // Observa cada imagem preguiçosa
        lazyImages.forEach(image => {
            observer.observe(image);
        });
    } else {
        // Fallback para navegadores que não suportam IntersectionObserver
        // Carrega todas as imagens de uma vez se a API não for suportada
        lazyImages.forEach(image => {
            image.src = image.dataset.src;
            image.classList.remove('lazy');
        });
    }
});


// Menu hamburger responsivo
document.addEventListener("DOMContentLoaded", function() {
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    if (hamburger && navLinks) {
        hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            // Altera o texto do botão hamburger para indicar estado (opcional)
            hamburger.textContent = navLinks.classList.contains('active') ? '✕' : '☰';
            hamburger.setAttribute('aria-expanded', navLinks.classList.contains('active'));
        });

        // Fecha o menu se um link for clicado (para navegação suave)
        navLinks.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                hamburger.textContent = '☰'; // Volta o ícone para o padrão
                hamburger.setAttribute('aria-expanded', 'false');
            });
        });
    }
});

// Botão "Voltar ao topo"
document.addEventListener("DOMContentLoaded", function() {
    const backToTopBtn = document.getElementById('backToTopBtn');

    if (backToTopBtn) {
        // Mostra ou esconde o botão baseado na posição de rolagem
        window.addEventListener('scroll', () => {
            if (window.scrollY > 200) { // Mostra o botão após rolar 200px
                backToTopBtn.style.display = 'block';
            } else {
                backToTopBtn.style.display = 'none';
            }
        });

        // Rola suavemente para o topo quando o botão é clicado
        backToTopBtn.addEventListener('click', (e) => {
            e.preventDefault(); // Impede o comportamento padrão do link
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
});

// Funcionalidade para a notificação de compra (exemplo básico de exibição com timer)
document.addEventListener("DOMContentLoaded", function() {
    const notification = document.getElementById('notification');
    if (notification) {
        // Exibe a notificação após um pequeno atraso e a oculta depois
        setTimeout(() => {
            notification.style.display = 'flex'; // Torna visível
            // Oculta a notificação após 10 segundos
            setTimeout(() => {
                notification.style.display = 'none';
            }, 10000); // 10 segundos
        }, 3000); // Exibe após 3 segundos
    }
});/* End custom CSS */