/* ================================================= */
/* 0. RESET E VARIÁVEIS CSS (Mais Moderno e Vibrante) */
/* ================================================= */

:root {
    /* Cores da Identidade Visual (Novo Laranja Coral de CTA) */
    --color-white: #ffffff;
    --color-off-white: #f5f7fa; /* Fundo mais suave */
    --color-blue-serene: #3A669A; /* Cor de Confiança/Principal */
    --color-gold-suave: #D4AF37; /* Dourado Mais Impactante */
    --color-cta-highlight: #FF6B6B; /* Laranja Coral Vibrante para CTA */
    --color-text-dark: #1f1f1f; /* Corpo do texto quase preto */
    --color-text-light: #555555; 
    --color-gray-border: #dddddd; /* Cor para bordas suaves */

    /* Fontes (Inter para corpo, Playfair Display para títulos) */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-sans); 
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-off-white);
}

a {
    text-decoration: none;
    color: var(--color-blue-serene);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-padding {
    padding: 80px 0;
}

/* ================================================= */
/* 0.1. PROVA SOCIAL FLUTUANTE (POP-UP) - NOVO POSICIONAMENTO E EMOJIS */
/* ================================================= */

.dynamic-proof {
    position: fixed;
    top: 20px; /* Movido para o topo */
    right: 20px; /* Movido para a direita */
    transform: translateY(-120%); /* Escondido acima da tela */
    z-index: 1000;
    width: 90%;
    max-width: 350px;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0; /* Começa invisível */
    transition: transform 0.5s ease-out, opacity 0.5s;
}

.dynamic-proof.show {
    transform: translateY(0); /* Desliza para baixo */
    opacity: 1;
}

.proof-icon {
    font-size: 24px;
    color: var(--color-cta-highlight);
}

.proof-text {
    font-size: 0.9rem;
}

.proof-text strong {
    color: var(--color-blue-serene);
}

/* ================================================= */
/* 1. HEADER E NAVEGAÇÃO */
/* ================================================= */
.main-header {
    background-color: var(--color-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 500;
}

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

.logo {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--color-blue-serene);
    font-weight: 700;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.main-nav a {
    color: var(--color-text-dark);
    font-weight: 600;
    padding: 5px 0;
    transition: color 0.2s;
}

.main-nav a:hover {
    color: var(--color-cta-highlight);
}

/* ================================================= */
/* 2. SEÇÃO HERO E VSL */
/* ================================================= */
.hero-section {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    background: linear-gradient(180deg, var(--color-off-white) 0%, var(--color-white) 100%);
}

.headline-title {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-text-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}
/* ================================================= */
/* 2. HERO SECTION (VSL e CTA) */
/* ================================================= */

/* Contêiner da VSL, limitando o tamanho em telas maiores */
.hero-video-container {
    max-width: 800px; 
    margin: 0 auto 30px auto; /* Centraliza e adiciona margem abaixo */
    width: 100%;
}

/* CRÍTICO: CSS para responsividade da VSL (Vídeo 16:9) */
.video-responsive-container {
    position: relative;
    /* Proporção 16:9 */
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* CRÍTICO: Faz o iframe ou video preencher 100% do container */
.video-responsive-container iframe,
.video-responsive-container video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; 
}
.headline-title .highlight {
    color: var(--color-blue-serene);
}

.subheadline {
    font-size: 1.3rem;
    color: var(--color-text-light);
    max-width: 800px;
    margin: 0 auto 40px auto;
}

/* VSL - O box do vídeo */
.vsl-wrapper {
    /* Centraliza o vídeo dentro da coluna, que agora será menor */
    display: flex;
    justify-content: center;
    margin: 40px 0;
    padding: 0 10px; 
}

.vsl-box-video {
    position: relative;
    max-width: 500px; 
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer; 
}

.vsl-box-video video {
    width: 100%;
    height: auto;
    display: block;
}

/* ESTILOS PARA O BOTÃO DE PLAY CUSTOMIZADO */
#custom-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; 
    height: 80px;
    background-color: rgba(255, 255, 255, 0.8); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem; 
    color: var(--color-blue-serene); 
    z-index: 10;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

#custom-play-button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.05);
}

#custom-play-button::before {
    content: "▶"; 
    margin-left: 5px; 
}

.vsl-playing #custom-play-button { 
    opacity: 0;
    visibility: hidden;
}

/* Lista de ícones/benefícios abaixo do VSL */
.trust-icons {
    text-align: center;
    margin: 30px auto;
    max-width: 700px;
    border-top: 1px solid var(--color-gray-border);
    padding-top: 20px;
}

.trust-icons p {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.icon-item {
    display: block; 
    max-width: 450px; 
    margin: 0 auto 10px auto; 
    text-align: left; 
    font-size: 1.15rem; 
    padding: 5px 0;
    color: var(--color-text-light);
}

.icon-item::before {
    margin-right: 10px;
    font-size: 1.1em;
    color: var(--color-gold-suave);
}


/* Estilos dos botões CTA */
.cta-button {
    display: block;
    width: 100%;
    max-width: 450px;
    margin: 20px auto;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.primary-btn {
    background-color: var(--color-cta-highlight);
    color: var(--color-white);
    border: none;
}

.secondary-btn {
    background-color: var(--color-blue-serene);
    color: var(--color-white);
    border: none;
}

/* Efeito de animação do botão (Opcional, mas recomendado) */
.animated-cta {
    animation: pulse 2s infinite;
}

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

/* CTA que aparece após o tempo do VSL */
.cta-above-plans {
    margin-top: 30px;
}

/* ================================================= */
/* 3. SEÇÃO SOBRE O GUIA */
/* ================================================= */
.about-section {
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gray-border);
}

.about-section h2 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-blue-serene);
    margin-bottom: 20px;
    font-weight: 700;
}

.content-block {
    display: flex;
    align-items: center;
    gap: 50px;
}

.image-half {
    flex: 1;
    text-align: center;
}

.text-half {
    flex: 1;
}

.responsive-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.large-text {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-text-dark);
}

/* ================================================= */
/* 4. SEÇÃO DE MÓDULOS/DETALHES DO PRODUTO */
/* ================================================= */
.product-details-section {
    background-color: var(--color-off-white);
    padding: 80px 0;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 10px;
}

.product-details-section .section-subtitle {
    text-align: center;
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin-bottom: 50px;
    font-weight: 400;
}

.feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 80px;
}

/* Inverte a ordem para blocos alternados */
.feature-block:nth-child(even) .feature-text {
    order: 2;
}
.feature-block:nth-child(even) .feature-image {
    order: 1;
}

.feature-text h3 {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-blue-serene);
    margin-bottom: 15px;
}

.feature-text ul {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.feature-text ul li {
    padding-left: 1.2em;
    text-indent: -1.2em;
    margin-bottom: 10px;
    color: var(--color-text-dark);
    font-size: 1.1rem;
}

.feature-text ul li::before {
    content: "🌟"; /* Marcador visual */
    margin-right: 5px;
}

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

.cta-center {
    text-align: center;
    margin-top: 40px;
}

/* ================================================= */
/* 8. SEÇÃO DE PREÇOS (Escolha Seu Plano) - NOVO VISUAL MODERNO */
/* ================================================= */

.pricing-section {
    padding: 80px 0;
    background-color: var(--color-off-white); /* Fundo suave */
    text-align: center;
}

.pricing-section h2 {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    color: var(--color-blue-serene);
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Estilo Base do Card de Plano */
.plan-card {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.plan-card h3 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--color-blue-serene);
}

.plan-card .price {
    font-size: 3rem;
    font-weight: 900;
    margin: 10px 0 25px 0;
    line-height: 1;
    color: var(--color-cta-highlight); /* Cor de destaque para o preço */
}

/* Destaque para o Plano Mais Vendido (Plano Completo) */
.featured-plan {
    /* Destaque com cor mais forte e sombra mais evidente */
    border: 3px solid var(--color-blue-serene); 
    box-shadow: 0 15px 35px rgba(58, 102, 154, 0.3); /* Sombra azulada */
    transform: scale(1.05); /* Levemente maior */
    z-index: 2; /* Sobrepõe o outro em hover */
}

.featured-plan:hover {
    transform: scale(1.05) translateY(-5px); 
}

/* Estilo do Selo "Mais Vendido!" */
.badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--color-blue-serene);
    color: var(--color-white);
    padding: 5px 15px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Estilo da Lista de Benefícios (mais espaçada e clara) */
.plan-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    flex-grow: 1; /* Empurra o botão para baixo, garantindo que fiquem alinhados */
}

.plan-card ul li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-border);
    text-align: left;
    font-size: 1rem;
    color: var(--color-text-dark);
}

.plan-card ul li:last-child {
    border-bottom: none;
}

.plan-card ul li i {
    /* Ícone de check */
    margin-right: 10px;
    color: #4CAF50; /* Verde de Sucesso */
}

/* Estilo dos Botões CTA */
.plan-card .cta-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.plan-card .primary-btn {
    /* Botão do Plano Essencial (Menos destaque) */
    background-color: var(--color-gold-suave);
    color: var(--color-white);
    border: 2px solid var(--color-gold-suave);
}

.plan-card .primary-btn:hover {
    background-color: #C1992E; /* Um tom mais escuro */
}

.plan-card .secondary-btn {
    /* Botão do Plano Completo (Mais destaque) */
    background-color: var(--color-cta-highlight);
    color: var(--color-white);
    border: 2px solid var(--color-cta-highlight);
}

.plan-card .secondary-btn:hover {
    background-color: #E65A5A; /* Um tom mais escuro de coral */
}

/* Correção de cor do ícone de check nos planos */
.plan-card.essential ul li i {
    color: var(--color-gold-suave); /* Dourado para o Plano Essencial */
}
.plan-card.complete ul li i {
    color: var(--color-blue-serene); /* Azul para o Plano Completo */
}

/* ================================================= */
/* 7. PROVA SOCIAL (DEPOIMENTOS) */
/* ================================================= */

.proof-social-section {
    background-color: var(--color-off-white);
    padding: 60px 0;
}

.proof-social-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: var(--color-blue-serene);
}

/* NOVO: Estilo para Grid de Depoimentos */
.depoimentos-grid {
    display: grid;
    /* Colunas: 1 em mobile, 2 em tablet, 3 em desktop */
    grid-template-columns: 1fr; 
    gap: 30px; /* Espaçamento entre os cards */
    margin: 0 auto;
    max-width: 1100px; /* Limite a largura do grid */
}

@media (min-width: 768px) {
    .depoimentos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .depoimentos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ================================================= */
/* 7. PROVA SOCIAL (DEPOIMENTOS) - CORREÇÕES DE ESTILO */
/* ================================================= */

/* ... (depoimentos-grid e media queries existentes) ... */

/* Estilo da estrutura do Header: alinha Avatar e detalhes */
.depoimento-header {
    display: flex;
    align-items: flex-start; /* Alinha o conteúdo ao topo para melhor visual */
    margin-bottom: 15px;
    gap: 15px; /* Espaço entre o avatar e os detalhes */
}

/* NOVO: Estilo do Avatar */
.user-avatar {
    flex-shrink: 0; /* Impede que o avatar encolha */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-gold-suave); /* Borda sutil de destaque */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o círculo */
    display: block;
}

/* NOVO: Estilo dos Detalhes do Usuário (Estrelas, Nome, Local) */
.user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* NOVO: Estilo das Estrelas (Corrigindo a visualização) */
.stars {
    color: var(--color-gold-suave); /* Dourado para as estrelas */
    font-size: 1.2rem;
    display: block; 
    margin-bottom: 5px;
    letter-spacing: 1px; /* Espaçamento leve entre as estrelas Unicode */
}

.user-info {
    display: block;
    line-height: 1.2;
}

.user-name {
    font-weight: 700;
    color: var(--color-text-dark);
    display: block;
}

.user-location {
    font-size: 0.9rem;
    color: var(--color-text-light);
    display: block;
}

/* ... (O restante do seu CSS, incluindo .depoimentos-grid e media queries) ... */
/* Cada depoimento-card (adaptado para Grid) */
.depoimento-card {
    /* REMOVIDO: Propriedades de Carrossel (flex: 0 0 100%; scroll-snap-align: start; margin-right: 15px;) */
    flex: initial; /* Permite que o grid gerencie o tamanho */
    scroll-snap-align: initial;
    width: initial;
    margin-right: 0; /* Remove margem lateral do carrossel */
    
    /* Manter estilos de card */
    padding: 25px;
    border: 1px solid var(--color-gray-border);
    border-radius: 10px;
    background-color: var(--color-white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    height: 100%; /* Garantir altura uniforme no grid */
}

.depoimento-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}


/* ================================================= */
/* 7. SEÇÃO FAQ (Perguntas Frequentes) */
/* ================================================= */
.faq-section {
    background-color: var(--color-white);
}

.faq-section h2 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 40px;
}

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

.faq-item {
    border-bottom: 1px solid var(--color-gray-border);
    margin-bottom: 10px;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-dark);
    transition: color 0.2s;
}

.faq-question:hover {
    color: var(--color-blue-serene);
}

.faq-question .icon {
    font-size: 1rem;
    color: var(--color-blue-serene);
    transition: transform 0.3s;
}

.faq-question.active .icon {
    transform: rotate(45deg); /* Opção: Usar + para abrir e X para fechar */
}

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

.faq-answer p {
    padding-bottom: 15px;
    color: var(--color-text-light);
    font-size: 1.1rem;
}

/* ================================================= */
/* 8. FOOTER E BOTÕES FLUTUANTES */
/* ================================================= */
.main-footer {
    background-color: var(--color-text-dark);
    color: var(--color-white);
    padding: 30px 0;
    font-size: 0.9rem;
    text-align: center;
}

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

.footer-links a {
    color: var(--color-gray-border);
    margin-left: 20px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--color-gold-suave);
}

/* Estilos para botões flutuantes (WhatsApp e Instagram) */
.floating-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}

.floating-button {
    display: block;
    width: 50px;
    height: 50px;
    margin-top: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.floating-button:hover {
    transform: scale(1.1);
}

.whatsapp-btn {
    background-color: #25D366; 
}

.instagram-btn {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* ================================================= */
/* 9. MEDIA QUERIES (RESPONSIVIDADE) */
/* ================================================= */
@media (max-width: 900px) {
    .main-nav {
        display: none; /* Esconde a navegação principal no mobile */
    }

    .main-header .container {
        justify-content: center;
    }

    .headline-title {
        font-size: 2.2rem;
    }
    
    .subheadline {
        font-size: 1.1rem;
    }

    .content-block {
        flex-direction: column;
    }

    .plans-grid {
        grid-template-columns: 1fr;
    }

    .main-footer .container {
        flex-direction: column;
        gap: 15px;
    }
    
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .footer-links a {
        margin-left: 0;
    }

    .feature-block {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .feature-block .feature-text {
        order: 2 !important; 
        text-align: center;
    }
    .feature-block .feature-image {
        order: 1 !important; 
    }
    .feature-text h3 {
        font-size: 1.6rem;
    }
    .feature-text ul {
        text-align: left;
        display: inline-block; 
    }
    .icon-item {
        max-width: 90%; 
        margin: 0 auto 10px auto;
    }
}

/* ========================================================= */
/* [NOVO] ESTILOS PARA O ORDER BUMP MODAL */
/* ========================================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; /* Começa escondido */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Z-index alto para garantir que fique por cima de tudo */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    max-width: 90%;
    width: 500px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-content h3 {
    color: #FF4500; /* Laranja forte para destaque */
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.modal-content p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 20px;
}

.modal-content .price-offer {
    font-size: 2.2rem;
    font-weight: 700;
    color: #008000; /* Verde para a oferta */
    margin: 15px 0;
    line-height: 1.2;
    padding: 10px;
    border: 2px dashed #008000;
    border-radius: 5px;
}

.modal-content .price-offer span {
    font-size: 1.2rem;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    display: block;
}

.modal-content .upgrade-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #FF4500;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    transition: background-color 0.2s;
    text-transform: uppercase;
}

.modal-content .upgrade-btn:hover {
    background-color: #cc3700;
}

.modal-content .keep-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: transparent;
    border: 1px solid #ccc;
    color: #666;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s;
}

.modal-content .keep-btn:hover {
    background-color: #f0f0f0;
    color: #333;
}
/* ================================================= */
/* 3. MOCKUP DISPLAY (CARROSSEL) */
/* ================================================= */

/* Contêiner do carrossel: Restringe a visualização */
.carousel-container {
    position: relative; /* Necessário para posicionar os indicadores */
    width: 100%;
    max-width: 500px; /* Limite a largura em telas maiores, 100% em mobile */
    margin: 0 auto 30px auto;
    overflow: hidden; /* CRÍTICO: Esconde o que não está visível */
}

/* O elemento que realmente rola (Track) */
.carousel-track {
    display: flex;
    width: 100%;
    overflow-x: scroll; /* Permite a rolagem horizontal */
    scroll-snap-type: x mandatory; /* CRÍTICO: Garante que pare em cada slide */
    -webkit-overflow-scrolling: touch; /* Melhor rolagem em iOS */
    scroll-behavior: smooth; 
    
    /* Esconde a barra de rolagem nativa */
    scrollbar-width: none; /* Firefox */
}

.carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Cada slide do carrossel */
.carousel-slide {
    flex: 0 0 100%; /* CRÍTICO: Garante que ocupe 100% da largura visível */
    scroll-snap-align: start; 
    width: 100%;
    height: auto;
    user-select: none; 
}

.carousel-slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Indicadores (dots) */
.indicators-only {
    position: relative; /* No fluxo normal para não sobrepor */
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; 
    z-index: 10;
}

.indicator {
    width: 8px;
    height: 8px;
    background-color: var(--color-gray-border); /* Cor base */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    width: 10px;
    height: 10px;
    background-color: var(--color-blue-serene); /* Cor de destaque */
}
/* ================================================= */
/* 8. SEÇÃO DE PREÇOS (Escolha Seu Plano) - NOVO VISUAL FINAL */
/* ================================================= */

.pricing-section {
    padding: 60px 0;
    background-color: var(--color-off-white); 
    text-align: center;
}

.pricing-image-container {
    max-width: 650px; 
    margin: 0 auto 30px auto;
}

.offer-banner {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: block;
}

/* -------------------------------------- */
/* ESTILOS DE URGÊNCIA (Desconto e Preço) */
/* -------------------------------------- */

/* Título de Urgência */
.urgency-headline {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-dark);
}

.highlight-date-text {
    color: var(--color-blue-serene);
}

.date-highlight {
    color: var(--color-cta-highlight); /* Coral vibrante para a data */
    font-weight: 900;
    font-family: var(--font-serif); /* Fonte de título para destaque extra */
    display: inline-block;
}

/* Preço Riscado (De R$ 97,00) */
.old-price-line {
    font-size: 1.2rem;
    color: var(--color-text-light);
    margin-bottom: 5px;
    font-weight: 600;
}

.old-price-value {
    text-decoration: line-through; /* Riscado */
    font-weight: 400;
}

/* NOVO PREÇO GRANDE E DESTAQUE (Por Apenas R$ 29,99) */
.new-price-highlight {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-blue-serene);
    margin-bottom: 30px;
}

.new-price-value {
    font-size: 4rem; /* Preço Novo Bem Grande */
    font-weight: 900;
    color: var(--color-cta-highlight); /* Laranja Coral de CTA */
    display: inline-block;
    line-height: 1;
}

/* Título de Seleção (opcional) */
.selection-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--color-text-dark);
    margin-bottom: 30px;
}

/* -------------------------------------- */
/* ESTILOS DOS CARDS */
/* -------------------------------------- */

.plans-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 25px;
    max-width: 750px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    /* Inverte a ordem das colunas para colocar o 'featured' na esquerda (como na foto) */
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .plans-grid > .featured-plan {
        order: -1; /* Força o plano em destaque a ser o primeiro na grade */
    }
}

.plan-card {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%; /* Garante que ambos tenham a mesma altura */
}

/* Card Principal (Completo) */
.featured-plan {
    border: 3px solid var(--color-cta-highlight); /* Borda Laranja de Destaque */
    box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4); 
    transform: scale(1.02); 
}

/* Cabeçalho do Card */
.plan-card h3 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--color-blue-serene);
}

/* Estilo do Selo "Mais Vendido!" */
.badge {
    position: absolute;
    top: -15px; 
    right: 50%;
    transform: translateX(50%);
    background-color: var(--color-cta-highlight);
    color: var(--color-white);
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Resumo do Preço no Card */
.price-summary {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--color-off-white);
    border-radius: 8px;
}

.price-card-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-cta-highlight);
    margin: 0;
}

.price-details {
    font-size: 0.9rem;
    color: var(--color-text-light);
    display: block;
    margin-top: 5px;
}

/* Lista de Benefícios */
.benefits-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    flex-grow: 1; 
}

.benefits-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-border);
    font-size: 1rem;
    color: var(--color-text-dark);
}

.benefits-list li:last-child {
    border-bottom: none;
}

.benefits-list li i {
    margin-right: 10px;
    color: var(--color-cta-highlight); /* Ícones de check em Coral */
}

/* Estilo do Botão CTA */
.plan-card .cta-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.1s ease;
    /* Destaque para o botão principal */
    background-color: var(--color-cta-highlight);
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5);
}

.plan-card .cta-button:hover {
    background-color: #E65A5A; 
    transform: translateY(-2px);
}

.plan-card .primary-btn {
    /* Botão Essencial (Menos destaque) */
    background-color: var(--color-blue-serene);
    color: var(--color-white);
    box-shadow: none;
}

.plan-card .primary-btn:hover {
    background-color: #31587F;
}

/* ================================================= */
/* SEÇÃO DE OFERTA (PRODUTO CARDS) - Estilos Base */
/* ================================================= */

.oferta-section {
    background-color: #f8faff;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.oferta-section .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch;
}

.produto-card {
    background-color: #fff;
    border: 2px solid #e5eeff;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; 
}

/* DESTAQUE CRÍTICO: Plano Premium (Primeiro Card) */
.oferta-section .container > .produto-card:first-child {
    border-color: #ff6347; /* Borda Coral de destaque */
    box-shadow: 0 12px 40px rgba(255, 99, 71, 0.4);
    transform: scale(1.03); 
    z-index: 2; 
}

.oferta-section .container > .produto-card:first-child .preco-novo {
    color: #ff6347;
}

.produto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}

.produto-imagem {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    margin: 15px auto 0;
}

.produto-conteudo {
    padding: 25px 25px 35px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.data-desconto {
    background-color: #ff6347;
    color: #fff;
    font-weight: 800;
    border-radius: 10px;
    display: block;
    padding: 10px 15px;
    font-size: 1rem;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.preco-antigo {
    font-size: 1.2rem;
    color: #555;
    margin: 10px 0 0;
    font-weight: 500;
}

.preco-antigo span {
    text-decoration: line-through;
    color: #999;
}

.preco-novo {
    font-size: 3.5rem;
    font-weight: 900;
    color: #1e2a47;
    margin: 0 0 25px;
    line-height: 1;
}

.beneficios {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0 0 30px 0;
    line-height: 1.8;
    font-size: 1.05rem;
    color: #333;
    flex-grow: 1;
}

.beneficios li {
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0; 
    margin-left: 0;
}
.beneficios li:last-child {
    border-bottom: none;
}

.botao-cta {
    display: block;
    background-color: #1e63ff;
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 18px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(30, 99, 255, 0.4);
    text-transform: uppercase;
}

.botao-cta:hover {
    background-color: #184fcf;
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(30, 99, 255, 0.5);
}

.seguranca {
    font-size: 0.8rem;
    color: #666;
    margin-top: 15px;
    line-height: 1.4;
}


/* ---------------------------------------- */
/* MODAL ORDER BUMP (Estilo Pop-up Centralizado de Alta Conversão) */
/* ---------------------------------------- */

.modal-overlay {
    /* Estado Oculto por Padrão */
    display: none; 
    
    /* Overlay de Tela Cheia */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fundo mais escuro para focar no modal */
    z-index: 1000; 
    
    /* Centralização do Modal */
    justify-content: center;
    align-items: center;
    
    /* Animação de entrada */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    display: flex; /* Exibe o flex container */
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #fff;
    padding: 35px 30px;
    border-radius: 18px; /* Borda mais arredondada */
    max-width: 550px; /* Levemente maior */
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 15px 50px rgba(255, 107, 107, 0.7); /* Sombra que destaca a cor CTA */
    border: 3px solid var(--color-cta-highlight); /* Borda em destaque */
    
    /* Animação de Entrada do Conteúdo */
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px; /* Maior e mais visível */
    font-weight: 200;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.close-btn:hover {
    color: var(--color-cta-highlight);
}

/* ---------------------------------------- */
/* Estilos Específicos do Conteúdo do Modal */
/* ---------------------------------------- */

.modal-header h3 {
    color: var(--color-cta-highlight); 
    font-size: 1.8rem;
    font-family: var(--font-serif);
    margin-bottom: 5px;
}

.modal-header p {
    font-size: 1rem;
    color: #444;
    margin-bottom: 25px;
}

/* Caixa de Destaque do Preço (CRÍTICO) */
.price-box-bump {
    background-color: #f7fff7; /* Fundo muito suave */
    border: 2px solid #00c853; /* Borda verde de preço baixo */
    border-radius: 10px;
    padding: 15px 10px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 200, 83, 0.2);
}

.price-box-bump h4 {
    font-size: 1.3rem;
    color: var(--color-blue-serene);
    margin: 0;
}

.old-price-bump {
    font-size: 1rem;
    color: #999;
    margin: 5px 0 0;
}

.old-price-bump s {
    text-decoration: line-through;
}

.new-price-bump {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0;
}

.destaque-preco-bump {
    font-size: 2.5rem; /* O preço de 29,99 GIGANTE */
    font-weight: 900;
    color: #00c853; /* Preço verde forte */
    display: block;
    line-height: 1.2;
}


.beneficios-modal {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0 0 25px 0;
    line-height: 1.8;
    font-size: 1.05rem;
    color: #333;
}

.beneficios-modal li {
    margin: 5px 0;
    border-bottom: 1px dotted #eee;
    padding-bottom: 3px;
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-buttons a {
    display: block;
    padding: 18px 20px;
    border-radius: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

/* Botão de Aceitar (SIM) - Destaque Máximo */
.btn-sim-bump {
    background-color: var(--color-cta-highlight); /* Laranja Coral */
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.5);
    font-size: 1.2rem;
    border: 2px solid #fff;
}

.btn-sim-bump:hover {
    background-color: #e8553e;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.7);
}

/* Botão de Recusar (NÃO) - Discreto */
.btn-nao-bump {
    background-color: #f0f0f0;
    color: #555;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: none; /* Não precisa de uppercase */
}

.btn-nao-bump:hover {
    background-color: #e3e3e3;
    color: #1f1f1f;
}

/* Ajuste para telas menores */
@media (max-width: 500px) {
    .modal-content {
        padding: 20px 15px;
    }
    .modal-header h3 {
        font-size: 1.5rem;
    }
    .destaque-preco-bump {
        font-size: 2rem;
    }
    .btn-sim-bump {
        font-size: 1.1rem;
        padding: 15px 10px;
    }
}
/* ================================================= */
/* CORREÇÃO ESSENCIAL PARA O FAQ ACORDEÃO */
/* ================================================= */

/* Define a resposta inicialmente como fechada, sem altura visível e com transição suave */
.faq-answer {
    /* CRÍTICO: max-height: 0 esconde o conteúdo e permite que o JS calcule a altura real */
    max-height: 0;
    overflow: hidden; /* Impede que o conteúdo 'vaze' quando a altura é 0 */
    
    /* Permite uma animação suave (opcional, mas recomendado) */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; 
    
    /* Garante que o padding vertical seja 0 quando fechado */
    padding: 0 20px; 
}

/* Quando a classe 'active' é adicionada ao item do FAQ, o padding vertical é aplicado */
.faq-item.active .faq-answer {
    padding: 20px;
}

/* Opcional, mas recomendado para o item do FAQ */
.faq-item {
    overflow: hidden; /* Importante para o item fechar sem mostrar o conteúdo cortado */
}

.faq-question {
    cursor: pointer; /* Garante que o usuário saiba que pode clicar */
}
/* ================================================= */
/* CORREÇÃO ESSENCIAL PARA O FAQ ACORDEÃO (Acordeão) */
/* ================================================= */

.faq-answer {
    /* CRÍTICO: max-height: 0 esconde o conteúdo e permite que o JS calcule a altura real */
    max-height: 0;
    overflow: hidden; /* Impede que o conteúdo 'vaze' quando a altura é 0 */
    
    /* Permite uma animação suave */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; 
    
    /* Garante que o padding vertical seja 0 quando fechado (será adicionado quando estiver ativo) */
    padding: 0 20px; 
    color: var(--color-text-light);
    font-size: 1rem;
    line-height: 1.7;
}

/* Quando o item está ativo, o padding vertical da resposta é aplicado */
.faq-item.active .faq-answer {
    /* Adiciona padding nas laterais e um espaço na parte inferior */
    padding: 20px 20px 25px; 
}

/* Garante que o item do FAQ esconda o conteúdo quando a altura está em 0 */
.faq-item {
    overflow: hidden; 
    border-radius: 12px;
    margin-bottom: 12px;
    background-color: var(--color-off-white);
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.faq-question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-weight: 700;
    color: var(--color-text-dark);
    font-size: 1.1rem;
    transition: background-color 0.2s;
}

.faq-question:hover {
    background-color: #e9ecef;
}

.faq-question i {
    color: var(--color-cta-highlight);
    font-size: 1.2rem;
}
/* ================================================= */
/* PROVA SOCIAL - NOTIFICAÇÃO DE VENDA (SPAM DE COMPRA) */
/* ================================================= */

.sales-notification {
    /* Posição no canto superior direito para todos */
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000; /* Garante que fique acima de TUDO */
    
    /* Estilo da caixa */
    background-color: var(--color-white);
    border: 1px solid var(--color-gold-suave); 
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 300px;
    width: 90%; /* Ajuste no mobile */
    
    /* Posição e Transição de SAÍDA (Oculto) */
    opacity: 0;
    /* Faz a notificação deslizar para fora/dentro da lateral direita */
    transform: translateX(110%); 
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    
    display: block; 
}

/* Classe que o JS adiciona para exibir a notificação */
.sales-notification.active {
    opacity: 1;
    /* Traz a notificação de volta para a tela */
    transform: translateX(0); 
}

/* Estilo do Texto */
.sales-notification p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-text-dark);
    margin: 0;
}

.sales-notification p .produto-destaque {
    font-weight: 700;
    color: var(--color-blue-serene);
}

.sales-notification p .local-tempo {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 2px;
}

/* No mobile, garante que a largura seja bem controlada */
@media (max-width: 600px) {
    .sales-notification {
        /* Garante que fique no canto superior direito no mobile também */
        top: 20px;
        right: 20px;
        width: calc(100% - 40px); /* 100% menos o padding lateral */
        max-width: 300px; /* Limita a largura máxima para não cobrir tudo */
    }
}

/* ================================================= */
/* CHECKOUT - ESTRUTURA E ESTILO GERAL */
/* ================================================= */

.checkout-header {
    background-color: var(--color-blue-serene);
    color: var(--color-white);
    padding: 15px 0;
    text-align: center;
    border-bottom: 5px solid var(--color-checkout-cta);
}

.checkout-header h1 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    font-family: var(--font-sans);
    font-weight: 700;
}

.checkout-header p {
    font-size: 0.9rem;
    opacity: 0.9;
}


/* ================================================= */
/* CHECKOUT - FORMULÁRIO DE DADOS */
/* ================================================= */

.form-group {
    margin-bottom: 15px;
}

.form-group.small {
    flex: 1;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

.form-group.optional label::after {
    content: " (Opcional)";
    font-weight: 400;
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-gray-border);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus, .form-group select:focus {
    border-color: var(--color-blue-serene);
    outline: none;
    box-shadow: 0 0 5px rgba(58, 102, 154, 0.2);
}

/* ================================================= */
/* CHECKOUT - OPÇÕES E BOTÃO DE PAGAMENTO */
/* ================================================= */

.payment-options {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.payment-option {
    flex: 1;
    padding: 15px;
    border: 2px solid var(--color-gray-border);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text-light);
    transition: all 0.3s;
}

.payment-option i {
    margin-right: 5px;
    color: var(--color-blue-serene);
}

.payment-option.active {
    border-color: var(--color-checkout-cta);
    background-color: #f0fff0; /* Fundo suave para ativo */
    color: var(--color-text-dark);
    box-shadow: 0 0 10px rgba(0, 128, 0, 0.2);
}

.payment-content {
    display: none;
    padding: 20px 0;
}

.payment-content.active {
    display: block;
}

.pix-info-text {
    background-color: #fffacd; /* Amarelo suave */
    padding: 10px;
    border-left: 5px solid #ffcc00;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.cta-button-checkout {
    display: block;
    width: 100%;
    padding: 20px;
    background-color: var(--color-checkout-cta);
    color: var(--color-white);
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s, transform 0.1s;
    box-shadow: 0 4px 15px rgba(0, 128, 0, 0.4);
}

.cta-button-checkout:hover {
    background-color: var(--color-checkout-cta-hover);
    transform: translateY(-2px);
}

.footer-info {
    text-align: center;
    font-size: 0.8rem;
    margin-top: 15px;
    color: var(--color-text-light);
}

.price-highlight {
    font-weight: 700;
    color: var(--color-checkout-cta);
    font-size: 1rem;
}

/* ================================================= */
/* CHECKOUT - RESUMO DO PEDIDO */
/* ================================================= */

.checkout-summary-section {
    background-color: var(--color-off-white);
    padding: 30px;
    border-radius: 10px;
    height: fit-content;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.product-summary {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--color-gray-border);
}

.product-image {
    width: 80px;
    height: auto;
    border-radius: 5px;
    border: 1px solid var(--color-gray-border);
}

.product-details h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-blue-serene);
    margin: 0;
}

.product-details p {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0;
}

.price-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 1rem;
    color: var(--color-text-dark);
}

.total-line {
    font-size: 1.2rem;
    font-weight: 900;
    border-top: 2px solid var(--color-text-dark);
    margin-top: 10px;
    padding-top: 10px;
}

.total-line .final-price {
    color: var(--color-checkout-cta);
}

/* Garantia */
.guarantee-box {
    text-align: center;
    background-color: #e6f7ff; /* Azul claro */
    border: 1px solid #99d6ff;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
}

.guarantee-box i {
    font-size: 2.5rem;
    color: var(--color-blue-serene);
    margin-bottom: 10px;
}

.guarantee-box p:first-of-type {
    font-weight: 700;
    margin-bottom: 5px;
}

.security-badges {
    text-align: center;
    color: var(--color-text-light);
    font-size: 2.5rem;
}

.security-badges i {
    margin: 0 5px;
}

/* ================================================= */
/* CHECKOUT - MOBILE (Pilhas Verticais) */
/* ================================================= */

@media (max-width: 850px) {
    .checkout-grid {
        grid-template-columns: 1fr; /* Coloca as colunas em pilha */
        gap: 30px;
        padding: 20px;
    }

    .form-row {
        flex-direction: column;
    }
    
    .payment-options {
        flex-direction: column;
    }
    
    .cta-button-checkout {
        font-size: 1.1rem;
    }
}
/* Exemplo: Assumindo que o botão está em uma seção ou container principal */
.cta-section { 
    padding: 20px 20px; /* Garante 20px de espaço nas laterais */
}

.cta-button {
    display: block;
    width: 100%; /* Ocupa 100% da largura do contêiner, menos o padding */
    box-sizing: border-box; /* CRÍTICO: Garante que padding e border sejam incluídos na largura total */
    /* ... outros estilos ... */
}
/* ================================================= */
/* CORREÇÃO DE EMERGÊNCIA: ELEMENTO FIXO VAZANDO NO MOBILE */
/* ================================================= */

/* Se o elemento que vaza for a barra CTA fixa (Geralmente no rodapé ou topo) */
/* **Substitua `SELETOR_DA_BARRA_FIXA` pela classe ou ID real da sua CTA fixa.** */
.fixed-cta-bar, .bottom-cta-fixed, #floating-checkout-btn, .header-fixed {
    /* 1. Garante que a largura seja 100% da viewport */
    width: 100% !important; 
    
    /* 2. Zera margens e paddings que podem somar e vazar */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;

    /* 3. CRÍTICO: Garante que o padding não some à largura total */
    box-sizing: border-box !important;

    /* 4. Zera qualquer TRANSLATE X que possa ter sido mal calculado */
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
}

/* Regra extra para eliminar o scroll horizontal (se a causa não for o fixed element) */
/* ATENÇÃO: Use essa regra com cautela, pois pode esconder conteúdo acidentalmente. */
body, html {
    overflow-x: hidden;
}
.checkout-fixed {
    width: 100% !important; 
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
}
/* ================================================= */
/* 5. SEÇÃO DE OFERTAS (AJUSTE DE LAYOUT) */
/* ================================================= */

/* Estilo para Desktop (Duas colunas lado a lado) */
.oferta-section .container {
    display: grid;
    /* Define duas colunas de tamanho igual (1fr 1fr) */
    grid-template-columns: 1fr 1fr; 
    gap: 30px; /* Espaço entre as colunas */
    align-items: stretch; /* Garante que os cards tenham a mesma altura */
    padding: 40px 15px;
}

/* Estilo para os Cards de Produto */
.produto-card {
    /* Garante que o conteúdo e padding não ultrapassem a largura definida pelo grid */
    box-sizing: border-box; 
    padding: 25px;
    border-radius: 10px;
    background-color: var(--color-white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* A CORREÇÃO CRÍTICA PARA CELULAR (Uma coluna abaixo da outra) */
@media (max-width: 850px) {
    .oferta-section .container {
        /* CRÍTICO: Força o grid a ter apenas UMA coluna (1fr) */
        grid-template-columns: 1fr; 
        gap: 40px; /* Aumenta o espaço vertical entre os cards */
        padding: 20px 15px; /* Ajusta o padding do container */
    }
    
    .produto-card {
        /* Remove qualquer limite de largura que possa ter sido herdado */
        width: 100%; 
        max-width: 100%;
        margin: 0;
    }
}
/* ================================================= */
/* 7. BOTÕES FLUTUANTES (WHATSAPP E INSTAGRAM COM IMAGENS) */
/* ================================================= */
.floating-buttons {
    position: fixed;
    /* Posição no canto inferior direito */
    bottom: 25px; 
    right: 25px;
    z-index: 99999; 
    
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

.floating-button {
    /* Estilo da caixa do botão (círculo) */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px; /* Tamanho do círculo */
    height: 55px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* NOVO: REGRA CRÍTICA PARA AS IMAGENS */
.floating-button .button-icon {
    /* Garante que a imagem preencha o botão sem ultrapassar */
    width: 60%; 
    height: 60%;
    /* Garante que a imagem se ajuste ao espaço */
    object-fit: contain; 
}

.floating-button:hover {
    transform: scale(1.08);
}

/* Cores específicas (Você pode manter ou remover o background se as imagens já tiverem cor) */
.whatsapp-btn {
    background-color: #25d366; /* Verde WhatsApp, caso a imagem seja transparente */
}

.instagram-btn {
    background: #c13584; /* Roxo/rosa base do Instagram */
}

/* AJUSTE MOBILE */
@media (max-width: 600px) {
    .floating-buttons {
        right: 15px; 
        bottom: 15px;
        /* Garante que não cause vazamento */
        max-width: 100vw; 
    }
}