/*
  Paleta de Cores Base:
  --color-primary: #0d47a1; (Azul Escuro para textos)
  --color-accent: #2ecc71; (Verde para CTAs)
  --color-accent-dark: #27ae60; (Verde Escuro para Hover)
  --color-text-dark: #2c3e50; (Cinza Escuro para texto)
  --color-text-light: #ffffff;
*/

:root {
    --color-primary: #0d47a1;
    --color-accent: #2ecc71;
    --color-accent-dark: #27ae60;
    --color-text-dark: #2c3e50;
    --color-text-light: #ffffff;
	
}

.bg-dark-accent{ color:#fff;}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-text-dark);
   
}
h1, h2, h3, h4, h5, h6, .btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Define um bom peso padrão */
}

/* Container customizado de 1200px */
.container-1200 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ==================
   CABEÇALHO (NAVBAR) - CORRIGIDO
=================== */
.main-header {
    background-color: transparent; /* Começa transparente */
    position: fixed; /* Fixo no topo */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease-in-out; /* Transição suave */
}

/* ESTILO DO HEADER AO ROLAR */
.main-header.header-scrolled {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adiciona sombra */
}

.navbar {
    padding: 0.5rem 0; 
}

.main-logo {
    max-height: 55px; 
}

/* ESTILO DOS LINKS (ESTADO INICIAL) */
.navbar-nav .nav-link {
    color: var(--color-text-light); /* << CORRIGIDO: Começa BRANCO */
    font-weight: 600;
    padding: 1rem 1rem;
    transition: color 0.3s ease; float:right;
}

.navbar-nav .nav-link:hover {
    color: var(--color-accent); /* Verde no hover */
}

/* ESTILO DOS LINKS (QUANDO ROLAR A PÁGINA) */
.main-header.header-scrolled .navbar-nav .nav-link {
    color: var(--color-primary); /* << CORRIGIDO: Fica AZUL ESCURO */
}

.main-header.header-scrolled .navbar-nav .nav-link:hover {
    color: var(--color-accent); /* Verde no hover (mantém) */
}


/* Botão "Fale Conosco" no menu (Não muda) */
.btn-nav-cta {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    font-weight: 700;
    padding: 10px 25px;
    transition: background-color 0.3s ease;
}

.btn-nav-cta:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-text-light);
}


/* ==================
   SEÇÃO HERO 
=================== */

#hero {
    /* ADICIONE as 4 linhas de background AQUI */
    background-image: url('fundo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* O resto das suas regras do #hero continuam iguais */
    padding-top: 8rem; 
    padding-bottom: 4rem; 
    min-height: 80vh; 
    display: flex;
    align-items: center;
}

.hero-text-column {
    /* O texto agora fica sobre o fundo.jpg */
}

/* ==================
   HERO TEXTO (ESTILO ATUALIZADO)
=================== */

.hero-content {
    max-width: 550px;
    /* Adiciona uma sombra leve no texto para destacar do fundo */
    text-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Título Principal: "DESCUBRA O SEGREDO" */
.hero-title {
    color: var(--color-text-dark);
    font-size: 3.2rem; /* Um pouco maior */
    font-weight: 900;  /* Peso máximo para impacto */
    letter-spacing: -1px; /* Deixa as letras mais "grudadas" */
    line-height: 1.1;
}

/* Subtítulo Verde: "PARA A VITALIDADE..." */
.hero-subtitle {
    color: var(--color-accent);
    font-size: 2rem; /* Também um pouco maior */
    font-weight: 700; /* Negrito */
    line-height: 1.3;
    /* Adiciona uma leve sombra verde para "brilhar" */
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.2); 
}

/* Descrição: "O suplemento..." */
.hero-description {
    color: var(--color-text-dark);
    font-size: 1.2rem; /* Tamanho agradável para leitura */
    font-weight: 400; /* Peso regular */
    line-height: 1.6;
    /* Sobrescreve as classes 'my-4' para mais espaço */
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* Botão CTA: "QUERO MEU PET..." */
.btn-hero-cta {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    /* Aumenta o padding para um botão mais "clicável" */
    padding: 1.1rem 2.5rem; 
    transition: all 0.3s ease;
    font-weight: 600; /* Peso semi-bold */
    letter-spacing: 0.5px; /* Mais legível em maiúsculas */
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); /* Sombra mais forte */
}

.btn-hero-cta:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-2px); /* Efeito de "levantar" */
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.5);
}

/* Animação de flutuar */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}


/* ==================
   RESPONSIVIDADE (Mobile)
=================== */
/* ==================
   RESPONSIVIDADE (Mobile) - VERSÃO CORRIGIDA E COMPLETA
=================== */

@media (max-width: 991.98px) {
	
	.main-header {
    background-color:#FFF;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s 
ease-in-out;
}
    
    /* 1. CORREÇÃO DO MENU MOBILE */
    .navbar-collapse {
        /* Adiciona o fundo branco que estava faltando */
        background-color: var(--color-text-light);
        /* Adiciona uma sombra para destacar */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        /* Cantos arredondados na parte de baixo */
        border-radius: 0 0 15px 15px;
        /* Espaçamento interno */
        padding: 1.5rem;
        margin-top: 10px; /* Espaço entre o topo e o menu */
    }

    /* Ajusta a cor dos links dentro do menu aberto */
    .navbar-nav .nav-link {
        color: var(--color-primary) !important; /* Força a cor azul escuro */
        text-align: center;
        padding: 0.8rem 0;
    }

    /* Esconde o botão "Fale conosco" dentro do menu expandido 
       (para não ter dois botões de contato na tela) */
    .navbar-collapse .btn-nav-cta {
        display: none;
    }

    /* 2. AJUSTE DA SEÇÃO HERO */
   #hero {
    /* ADICIONE as 4 linhas de background AQUI */
    background-image: url('fundo2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* O resto das suas regras do #hero continuam iguais */
    padding-top: 8rem; 
    padding-bottom: 4rem; 
    min-height: 80vh; 
    display: flex;
    align-items: center;
}

    .hero-content {
        margin-left: auto;
        margin-right: auto;
    }
    
	
    .hero-title {
        font-size: 3.2rem; color:#FFF; /* Reduz o tamanho do título */
    }

    .hero-subtitle {
        font-size: 1.6rem; /* Reduz o tamanho do subtítulo */
    }
	.hero-description {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
}

    /* 3. CORREÇÃO DA IMAGEM DO PRODUTO */
    .hero-image-column {
        margin-top: 2.5rem; /* Espaço entre o texto e a imagem */
    }
    
    .hero-product-image {
        /* Define um tamanho máximo para a imagem caber na tela */
        max-width: 90% !important; 
        /* A animação de flutuar pode ser desativada no mobile se preferir */
        /* animation: none; */
    }
}

/* ==================
   SEÇÃO KEY-FEATURES (BENEFÍCIOS)
=================== */

#key-features {
    /* A classe 'py-4' do Bootstrap já aplica um padding, 
       mas vamos garantir um bom espaçamento */
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.feature-box {
    background-color: #ffffff; /* Fundo branco para o card */
    border-radius: 15px; /* Cantos arredondados */
    /* Usamos !important para sobrescrever o 'p-3' do Bootstrap e dar mais espaço */
    padding: 2.5rem 1.5rem !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); /* Sombra suave para "flutuar" */
    transition: all 0.3s ease-in-out;
    height: 100%; /* Garante que os 3 cards tenham a mesma altura */
}

.feature-box:hover {
    transform: translateY(-10px); /* Efeito suave ao passar o mouse */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-box i {
    /* A classe 'text-primary-light' era do tema antigo. 
       Vamos definir a cor aqui, usando nosso verde principal */
    color: var(--color-accent); 
    font-size: 2.5rem; /* Um pouco maior que o 'fa-2x' */
    /* Sobrescreve o 'mb-2' para mais espaço */
    margin-bottom: 1.5rem !important; 
}

.feature-box h5 {
    color: var(--color-primary); /* Azul escuro, o mesmo do menu */
    font-size: 1.15rem; /* Tamanho do título do card */
    line-height: 1.4;
}

/* ==================
   SEÇÃO PROBLEMAS
=================== */
.problem-card {
    background-color: var(--dark-accent);
    border-radius: 15px;
    border-top: 4px solid var(--primary-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(64, 196, 255, 0.4);
}

/* ==================
   SEÇÃO SOLUÇÃO
=================== */
.product-image-glow {
    max-width: 90%;
    filter: drop-shadow(0 0 25px rgba(64, 196, 255, 0.3));
}

.benefits-list i {
    width: 20px; /* Alinha os ícones */
}

/* ==================
   SEÇÃO VÍDEO
=================== */
.video-wrapper {
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid var(--primary-light);
    box-shadow: 0 0 40px rgba(64, 196, 255, 0.5);
}

/* ==================
   SEÇÃO DEPOIMENTOS
=================== */
.google-review-card {
    background-color: var(--dark-bg);
    border-radius: 10px;
    border: 1px solid var(--dark-accent);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.google-review-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-light);
}

.reviewer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-light);
}

.stars {
    color: var(--google-yellow);
}

.review-text {
    color: var(--text-light-emphasis);
    font-size: 0.95rem;
    font-style: italic;
    border-left: 3px solid var(--primary-blue);
    padding-left: 10px;
    margin-top: 10px;
}

/* ==================
   SEÇÃO CTA FINAL
=================== */
#cta-final {
    background: linear-gradient(rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 1)), url('https://i.imgur.com/your-final-cta-background-pets.jpg') no-repeat center center;
    background-size: cover;
}

.cta-pets-img {
    max-height: 150px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4));
}

.btn-whatsapp-final {
    background: var(--whatsapp-green);
    color: var(--text-white);
    border: none;
    border-radius: 50px;
    padding: 20px 45px;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
}

.btn-whatsapp-final:hover {
    background-color: #1fad55;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
}

/* ==================
   ANIMAÇÕES
=================== */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Animação de Fade-in no Scroll */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lead {}
.lead p { color:#fff;}

/* ==================
   CSS PARA O BOTÃO .btn-cta E ANIMAÇÃO .pulse
=================== */

.btn-cta {
    /* Cores do seu tema atual */
    background-color: var(--color-accent); /* Verde principal */
    color: var(--color-text-light);      /* Texto branco */
    
    /* Estilo do botão */
    font-family: 'Poppins', sans-serif;
    border: none;
    border-radius: 50px; /* Totalmente arredondado */
    
    /* As classes 'btn-lg', 'fw-bold', 'text-uppercase', 'mt-4' do Bootstrap já definem:
       - padding: 0.5rem 1rem (o btn-lg)
       - font-weight: 700
       - text-transform: uppercase
       - margin-top: 1.5rem 
       Vamos sobrescrever o padding para ficar maior:
    */
    padding: 1rem 2.5rem; 
    
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); /* Sombra verde */
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: var(--color-accent-dark); /* Verde mais escuro */
    transform: translateY(-3px); /* Efeito de "levantar" */
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.6);
}

/* Animação 'pulse' */
@keyframes pulse {
    0% {
        transform: scale(1);
        /* A sombra da animação usa a cor do botão (verde) */
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 15px rgba(46, 204, 113, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* Aplica a animação a qualquer elemento com a classe .pulse */
.pulse {
    animation: pulse 2s infinite;
}

/* ==================
   SEÇÃO DEPOIMENTOS (#depoimentos)
=================== */

#depoimentos {
    /* O fundo verde '#096' já está no seu HTML (style="...").
       O 'py-5' (padding) também. */
}

/* Título e subtítulo da seção (sobre o fundo verde) */
#depoimentos h2,
#depoimentos p.lead {
    color: var(--color-text-light); /* Texto BRANCO para contrastar com o verde */
    font-family: 'Poppins', sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Sombra leve para legibilidade */
}

/* O card do depoimento */
.google-review-card {
    background-color: var(--color-text-light); /* Fundo BRANCO (como pedido) */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    /* As classes 'p-4' e 'h-100' já estão no HTML */
}

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

/* Avatar do cliente */
.reviewer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-accent); /* Borda verde (do tema) */
}

/* Textos dentro do card (Letra preta/escura) */
.google-review-card h5 {
    color: var(--color-text-dark); /* Letra PRETA (como pedido) */
    font-family: 'Poppins', sans-serif;
}

/* Subtítulo do card ("Tutor do...") */
.google-review-card .text-light-emphasis {
    color: #555; /* Letra CINZA ESCURO */
    font-size: 0.9rem;
}

/* Texto do depoimento */
.google-review-card .review-text {
    color: var(--color-text-dark); /* Letra PRETA (como pedido) */
    font-size: 0.95rem;
    font-style: italic;
    border-left: 3px solid var(--color-accent); /* Destaque verde */
    padding-left: 10px;
    margin-top: 10px;
    line-height: 1.6;
}

/* Estrelas (amarelas) */
.stars {
    color: #FFC107; 
}

/* Ícone de verificado (verde) */
.google-review-card .fa-check-circle {
    color: var(--color-accent); 
}


/* ==================
   SEÇÃO CTA FINAL (#cta-final)
=================== */

#cta-final {
    /* O fundo branco '#fff' já está no seu HTML (style="...").
       O 'py-5' (padding) também. */
    border-top: 1px solid #eee; /* Linha para separar do verde */
}

.cta-pets-img {
    max-height: 150px;
}

/* Título ("Não espere mais") */
#cta-final h2 {
    color: var(--color-text-dark); /* Letra PRETA */
    font-family: 'Poppins', sans-serif;
}

/* Textos de parágrafo (precisam ser escuros no fundo branco) */
#cta-final .text-light-emphasis {
    color: #555; /* Letra CINZA ESCURO */
}

/* Botão final do WhatsApp */
.btn-whatsapp-final {
    background-color: var(--color-accent); /* Verde */
    color: var(--color-text-light); /* Texto branco */
    border: none;
    border-radius: 50px;
    padding: 1.25rem 2.75rem; /* Botão grande */
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
    transition: all 0.3s ease;
}

.btn-whatsapp-final:hover {
    background-color: var(--color-accent-dark); /* Verde escuro */
    transform: scale(1.05); /* Efeito de zoom */
    box-shadow: 0 8px 30px rgba(46, 204, 113, 0.6);
}

/* A animação .pulse já deve estar definida no seu CSS
   (da regra .btn-cta que
   
   /* ==================
   NOVA SEÇÃO DE AVISO IMPORTANTE
=================== */

#important-notice {
    background-color: #fffaf0; /* Fundo amarelo/bege bem claro */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.notice-card {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    /* Borda temática verde */
    border-left: 8px solid var(--color-accent); 
}

.notice-card i {
    color: var(--color-accent); /* Ícone Verde */
}

.notice-card h2 {
    color: var(--color-primary); /* Título Azul Escuro */
}

.notice-card p {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--color-text-dark);
}

.notice-card p strong {
    color: var(--color-primary);
    font-weight: 800; /* Destaque extra para o período */
}

/* ==================
   OUTROS AJUSTES
=================== */

/* Estilo para a lista na seção #solucao */
#solucao .benefits-list i {
    color: var(--color-accent);
}

/* Estilo para a chamada de cálculo no CTA final */
.calculation-prompt {
    max-width: 700px;
    margin: 0 auto;
    border: 2px dashed #ddd;
    border-radius: 15px;
    padding: 2rem;
}

/* ==================
   NOVAS SEÇÕES DE CONTEÚDO
=================== */

/* Fundo cinza claro para a seção "Como Funciona" */
.bg-light-gray {
    background-color: #f8f9fa;
}

/* Caixa de informação principal */
.info-box {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%; /* Para alinhar as colunas */
}

/* Fundo verde claro para a caixa de benefícios */
.bg-accent-light {
    background-color: #eafaf1; /* Um tom de verde bem claro */
    border: 1px solid #d4f3e2;
}

/* Lista de "O que acontece com os parasitas" */
.info-list li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    display: flex;
}
.info-list li i {
    margin-right: 10px;
    margin-top: 5px;
    color: var(--color-accent);
}

/* Lista de "Benefícios Adicionais" */
.benefits-list-compact li {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}
.benefits-list-compact li i {
    color: var(--color-accent);
    margin-right: 12px;
    font-size: 1.2rem;
}


/* ==================
   AVISO IMPORTANTE (120 DIAS)
=================== */
.aviso-importante-wrapper {
    background-color: #fff;
    border: 3px solid #ffeeba; /* Amarelo de atenção */
    border-radius: 15px;
    padding: 2rem 2.5rem;
    box-shadow: 0 10px 40px rgba(255, 193, 7, 0.2);
}

.aviso-importante-icon i {
    color: #ffc107; /* Amarelo */
    margin-bottom: 1rem;
}

.aviso-importante-wrapper h3 {
    color: #a17c00; /* Marrom/Dourado escuro */
    font-family: 'Poppins', sans-serif;
}

.aviso-box {
    background-color: #fdfdfd;
    border: 2px solid #eee;
    border-radius: 10px;
}

.border-success-strong {
    border-color: var(--color-accent-dark);
    background-color: #f6fff9;
}

.text-success-dark {
    color: var(--color-accent-dark);
}


/* ==================
   ATUALIZAÇÕES DEPOIMENTOS E CTA
=================== */

/* Ajusta as cores do card de depoimento (antes usava classes do tema escuro) */
.google-review-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.google-review-card .fs-sm {
    color: #6c757d; /* text-muted */
}
.google-review-card .review-text {
    color: #444;
    font-size: 0.95rem;
    font-style: italic;
    border-left: 3px solid #eee;
    padding-left: 10px;
    margin-top: 10px;
}
.google-review-card .stars {
    color: #ffc107; /* Amarelo estrela */
}
.google-review-card .fa-check-circle {
    color: var(--color-accent);
}

/* Caixa de cálculo no CTA Final */
.calculator-box {
    background-color: #f8f9fa;
    border-radius: 10px;
    border: 2px dashed var(--color-accent);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Botão final do WhatsApp (para garantir) */
.btn-whatsapp-final {
    background: var(--color-accent);
    color: var(--color-text-light);
    border: none;
    border-radius: 50px;
    padding: 20px 45px;
    box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4);
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}
.btn-whatsapp-final:hover {
    background-color: var(--color-accent-dark);
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(46, 204, 113, 0.6);
}

/* ==================
   SEÇÃO VITAMINAS
=================== */
#vitamins-section {
    background-color: #ffffff; /* Fundo branco para a seção */
}

#vitamins-section h2 {
    color: var(--color-text-dark);
    font-family: 'Poppins', sans-serif;
}

.vitamin-card {
    /* Opcional: Adiciona uma borda sutil para separar as duas vitaminas */
    border-bottom: 1px solid #eee;
    padding-bottom: 3rem;
}

.vitamin-card img {

    width:100%;
}

/* Remove a borda do último card de vitamina */
.vitamin-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.vitamin-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    color: var(--color-primary); /* Azul escuro */
    margin-bottom: 1rem;
}

.vitamin-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
}

.benefits-subtitle {
    color: var(--color-text-dark);
    font-family: 'Poppins', sans-serif;
}

.benefits-list li {
    margin-bottom: 0.5rem;
    color: #333;
}

.benefits-list i {
    color: var(--color-accent); /* Verde */
    margin-right: 10px;
}

/* O alerta de aviso do Bootstrap já vem bem estilizado,
   mas podemos garantir a cor do ícone */
.alert-warning i {
    color: #664d03; /* Cor padrão do Bootstrap para o ícone de alerta */
}


/* ==================
   SEÇÃO RESUMO
=================== */
#summary-section {
    background-color: #f8f9fa; /* Fundo cinza claro para destacar */
}

.summary-card {
    max-width: 800px;
    background: linear-gradient(135deg, var(--color-primary), #0056b3);
    color: var(--color-text-light);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 40px rgba(13, 71, 161, 0.2);
}

.summary-icon {
    font-size: 3rem;
    line-height: 1;
}

.summary-title {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.summary-card p {
    font-size: 1.2rem;
    line-height: 1.8;
}

.summary-card p strong {
    color: var(--color-accent); /* Verde */
    font-weight: 700;
}

/* ==================
   CARROSSEL DE DEPOIMENTOS
=================== */

/* Estilo dos Cards (Ajuste fino) */
.google-review-card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: none;
    /* Garante que o texto não "vaze" */
    overflow: hidden; 
}

.stars .fas {
    color: #ffc107; /* Amarelo das estrelas */
}

/* Estilização dos Botões (Setas) */
#carouselDepoimentos .carousel-control-prev,
#carouselDepoimentos .carousel-control-next {
    width: 5%; /* Largura da área de clique */
    opacity: 0.8;
}

/* O ícone da seta em si */
#carouselDepoimentos .carousel-control-prev-icon,
#carouselDepoimentos .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro semi-transparente */
    border-radius: 50%; /* Redondo */
    padding: 25px; /* Tamanho do círculo */
    background-size: 50%; /* Tamanho da seta dentro do círculo */
}

#carouselDepoimentos .carousel-control-prev-icon:hover,
#carouselDepoimentos .carousel-control-next-icon:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fica mais escuro ao passar o mouse */
}

/* No mobile, ajustamos as setas para não ficarem em cima do texto */
@media (max-width: 768px) {
    #carouselDepoimentos .carousel-control-prev,
    #carouselDepoimentos .carousel-control-next {
        display: none; /* Opcional: Esconder setas no mobile (usuário arrasta com dedo) */
    }
}

/* ==================
   SWIPER (CARROSSEL FUNCIONAL)
=================== */

.swiper {
    width: 100%;
    padding-bottom: 50px; /* Espaço para as bolinhas da paginação */
}

.swiper-slide {
    height: auto; /* Garante que todos tenham a mesma altura */
    display: flex; /* Para o card ocupar 100% da altura */
}

.google-review-card {
    width: 100%;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: none;
}

/* Estilo das bolinhas de paginação */
.swiper-pagination-bullet {
    background: #ffffff; /* Bolinha branca */
    opacity: 0.5;
    width: 10px;
    height: 10px;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ffffff; /* Bolinha ativa totalmente branca */
    transform: scale(1.2);
}

/* ==================
   CORREÇÃO DO MENU MOBILE (RESPONSIVO)
   Cole isso no final do seu style.css
=================== */

@media (max-width: 991.98px) {
    
    /* 1. Ajuste do Container do Menu quando aberto */
    .navbar-collapse {
        background-color: #ffffff; /* Fundo Branco Sólido */
        position: absolute; /* Para flutuar sobre o conteúdo */
        top: 100%; /* Logo abaixo da barra do logo */
        left: 0;
        width: 100%; /* Largura total */
        padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra forte para destaque */
        border-radius: 0 0 15px 15px; /* Cantos arredondados embaixo */
        z-index: 1000;
    }

    /* 2. Ajuste dos Links (Texto) */
    .navbar-nav .nav-link {
        color: var(--color-primary) !important; /* Força cor AZUL ESCURO */
        text-align: center; /* Centraliza o texto */
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0; /* Linha separadora sutil */
        font-weight: 600;
    }

    /* Remove a borda do último item */
    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    /* 3. Ajuste do Botão "Fale Conosco" no mobile */
    .navbar-collapse .btn-nav-cta {
        display: block;
        width: 100%; /* Botão ocupa largura total */
        margin-top: 1rem;
        margin-left: 0 !important; /* Remove a margem esquerda do desktop */
        text-align: center;
    }

    /* 4. Ajuste do Ícone do Menu (Hambúrguer) */
    .navbar-toggler {
        border: none; /* Remove borda do botão */
        padding: 0.5rem;
    }
    
    /* Garante que o ícone seja visível (escuro) ou adiciona um fundo */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(13, 71, 161, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* 5. Ajuste geral do Header no Mobile */
    .main-header {
        /* Garante que o header tenha fundo branco se o usuário rolar */
        background-color: #ffffff; 
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
}