/* Configurações Globais e Fundo */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    /* Gradiente de fundo suave */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* Container Principal do Quiz */
.quiz-container {
    background-color: #ffffff;
    border-radius: 24px;
    /* Bordas mais arredondadas */
    /* Sombra mais delicada */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    text-align: center;
    position: relative;

    /* Animação de entrada */
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Keyframes para a animação de entrada */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo */
.logo {
    font-size: 1.75rem;
    font-weight: 700;
    color: #FF6B00;
    /* Laranja vibrante */
    margin-bottom: 1.5rem;
}

/* Seção da Barra de Progresso */
.progress-section {
    margin-bottom: 1.5rem;
}

.progress-percent {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
}

.progress-bar {
    width: 100%;
    background-color: #eef1f4;
    border-radius: 10px;
    height: 10px;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    width: 5%;
    /* Estado inicial em 5% */
    background-color: #00C49A;
    /* Verde-água */
    border-radius: 10px;
    /* Transição suave para o avanço */
    transition: width 0.4s ease-in-out;
}

/* Títulos e Textos */
.quiz-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.quiz-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: #00C49A;
    /* Cor de destaque */
    margin: 0.5rem 0 0.5rem;
}

.context-text {
    font-size: 1rem;
    color: #777;
    margin-bottom: 2rem;
}

/* Container das Opções */
.options-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Botões de Opção */
.option-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: #444;

    /* Adicionando sombra padrão */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Sombra mais visível e suave */

    /* Transições mais completas para o efeito hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.option-button img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 1rem;
    object-fit: cover;
}

/* Efeito Hover (Salto e Cor) */
.option-button:hover {
    transform: scale(1.03);
    border-color: #00C49A;
    /* Sombra colorida mais pronunciada no hover */
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.3);
    /* Mais espessa e colorida */
    color: #00C49A;
}

/* Efeito Hover na seta */
.option-button:hover::after {
    color: #00C49A;
    /* Seta fica verde-água */
    transform: translateX(5px);
    /* Pequeno movimento para a direita */
}

/* Efeito Hover na imagem (opcional, se quiser um destaque) */
.option-button:hover img {
    transform: scale(1.05);
}

/* Responsividade */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    .quiz-container {
        padding: 1.5rem;
    }

    .quiz-title {
        font-size: 1.75rem;
    }

    .quiz-subtitle {
        font-size: 1.1rem;
    }
}



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 2
========================================
*/

/* Título para as páginas internas (um pouco menor) */
.quiz-title-page2 {
    font-size: 1.5rem;
    /* Um pouco menor que o título principal */
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin: 1.5rem 0;
    text-align: start;
}

/* Vídeo de depoimento 9:16 */
.testimonial-video {
    width: 50%;
    max-width: 300px;
    /* Mantém a largura máxima do design */

    /* MÁGICA AQUI: Força a proporção vertical 9:16 */
    aspect-ratio: 9 / 16;

    object-fit: cover;
    /* Garante que o vídeo preencha o frame, sem distorcer */
    border-radius: 16px;
    /* Bordas arredondadas (do estilo anterior) */
    margin: 0 auto 1.5rem;
    /* Centraliza */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Sombra suave (do estilo anterior) */
    display: block;
    /* Garante centralização correta com margin auto */
}

/* Botão de Continuar (Estilo Sólido) */
/* Botão de Continuar (Estilo Sólido - Melhorado) */
/* Botão de Continuar (Estilo Sólido - Melhorado) */
.continue-button {
    width: 100%;
    padding: 1rem 1.5rem;
    
    /* Gradiente de fundo */
    background: linear-gradient(90deg, #00B58D 0%, #00C49A 100%);
    
    color: #ffffff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    
    /* Sombra mais pronunciada */
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.4);
    
    /* Transição para hover */
    transition: all 0.2s ease; 
    
    /* Flexbox para alinhar texto e seta */
    /* (A linha 'display: flex;' foi REMOVIDA daqui) */
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espaço entre o texto e a seta */

    /* Esta é a linha que esconde o botão */
    display: none; /* Mantém escondido por padrão */
}

/* Pseudo-elemento para a seta no botão Continuar */
.continue-button::after {
    content: '→';
    /* Seta para a direita */
    font-size: 1.4rem;
    /* Tamanho maior para a seta */
    font-weight: 700;
    color: #ffffff;
    transition: transform 0.2s ease;
}


.continue-button:hover {
    transform: translateY(-3px) scale(1.01);
    /* Leve levantamento e zoom */
    box-shadow: 0 12px 35px rgba(0, 196, 154, 0.5);
    /* Sombra ainda mais forte */
}

.continue-button:hover::after {
    transform: translateX(5px);
    /* Seta se move para a direita no hover */
}


/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 3
========================================
*/

.quiz-title-page3 {
    font-size: 1.8rem; /* Um pouco maior que o título da página 2 */
    font-weight: 700;
    color: #333;
    margin: 1.5rem 0 0.5rem;
}

.subtitle-page3 {
    font-size: 1rem;
    color: #777;
    margin-bottom: 2rem;
}

.subtitle-page3 .highlight {
    font-weight: 600;
    color: #00C49A; /* Cor de destaque */
}

.social-proof-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.social-proof-image {
    width: 100%;
    max-width: 400px; /* Adapte conforme o tamanho ideal da imagem */
    height: auto;
    object-fit: contain; /* Garante que a imagem se ajuste sem cortar */
}

/* O botão 'continue-button' já possui os estilos definidos e será reusado. */



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 4
========================================
*/

.quiz-title-page4 {
    font-size: 1.3rem; /* Título da pergunta */
    font-weight: 600;
    color: #333;
    margin: 1.5rem 0 2rem; /* Margem abaixo do título */
    text-align: center;
}

/* Estilo para os botões de escolha com imagem à direita */
.choice-button {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Texto na esquerda, imagem na direita */
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra padrão suave */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    margin-bottom: -10px;
}

.choice-button span {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
    transition: color 0.2s ease;
}

.choice-button img {
    width: 50px;
    height: 50px;
    border-radius: 10px; /* Bordas levemente arredondadas */
    object-fit: cover;
}

/* Efeito Hover (similar aos botões da página 1) */
.choice-button:hover {
    transform: scale(1.03); /* Efeito "salto" */
    border-color: #00C49A; /* Borda verde-água */
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.3); /* Sombra colorida */
}

.choice-button:hover span {
    color: #00C49A; /* Opcional: muda a cor do texto no hover */
}


/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 7
========================================
*/

.central-image {
    display: block;
    margin: 1.5rem auto 2rem; /* Centraliza a imagem */
    width: 100%;
    max-width: 150px; /* Ajuste o tamanho conforme necessário */
    height: auto;
    object-fit: contain;
}

/* Container para a grade de botões 2x2 */
.grid-options-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Cria duas colunas de tamanho igual */
    gap: 0.7rem; /* Espaçamento entre os botões */
    width: 100%;
}

/* Estilo para os botões da grade */
.grid-button {
    width: 100%;
    padding: 1.25rem 1rem; /* Botões mais "altos" */
    font-size: 0.95rem; /* Fonte um pouco menor para caber */
    font-weight: 600;
    color: #444;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    
    /* Sombra suave */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    
    /* Transição */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.grid-button:hover {
    transform: scale(1.05); /* Efeito de "salto" */
    border-color: #00C49A;
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.3);
    color: #00C49A; /* Cor do texto muda no hover */
}



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 8
========================================
*/

/* Contêiner para as imagens Antes e Depois */
.before-after-container {
    display: flex; /* Coloca as imagens lado a lado */
    justify-content: center;
    gap: 10px; /* Espaçamento entre as imagens */
    margin: 1.5rem 0 2rem;
    width: 100%;
}

.ba-image {
    width: 48%; /* Cada imagem ocupa quase metade */
    height: auto;
    border-radius: 16px; /* Bordas arredondadas */
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Card de Depoimento */
.testimonial-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #f9f9f9; /* Fundo levemente cinza */
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem; /* Espaço antes do botão Continuar */
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
}

.testimonial-header {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
}

.testimonial-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Foto redonda */
    margin-right: 12px;
    object-fit: cover;
}

.testimonial-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}

.testimonial-body {
    font-size: 0.95rem;
    font-style: italic;
    color: #555;
    line-height: 1.5;
    margin: 0 0 1rem;
    text-align: start;
}

.testimonial-stars {
    display: flex;
    justify-content: start;
    width: 100%;
    font-size: 1rem;
    color: #FFD700; /* Cor de estrela (dourado) */
}


/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 9
========================================
*/

.pre-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #777;
    text-align: center;
    margin: 1.5rem 0 0.5rem;
}

.chart-title {
    font-size: 1rem; /* Título principal */
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.4;
    margin: 0 auto 2rem;
    max-width: 400px; /* Limita a largura do texto */
}

.chart-container {
    width: 100%;
    text-align: center; /* Centraliza a imagem */
    margin-bottom: 2rem; /* Espaço antes do botão Continuar */
}

.chart-image {
    max-width: 70%;
    height: auto;
    object-fit: contain;
}


/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 10
========================================
*/

.multi-options-container {
    display: flex;
    flex-direction: column;
    gap: 0.3rem; /* Espaçamento entre os botões */
    width: 100%;
    margin-bottom: 2rem; /* Espaço antes do botão Continuar */
}

.multi-choice-button {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Conteúdo de um lado, círculo do outro */
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra padrão suave */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.multi-choice-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.multi-choice-content img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover;
}

.multi-choice-content span {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
}

/* Círculo de seleção (simulando um checkbox) */
.choice-indicator {
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Adiciona transição para a cor de fundo */
    transition: border-color 0.2s ease, background-color 0.2s ease;
    /* Posição relativa para o "check" */
    position: relative;
}

/* O "CHECK" (✓) feito com CSS */
.choice-indicator::after {
    content: '';
    display: block;
    
    /* As dimensões do "L" que forma o check */
    width: 6px;  /* Largura */
    height: 12px; /* Altura */
    
    /* A "borda" que é o check em si */
    border: solid white; /* Cor do "check" */
    border-width: 0 3px 3px 0; /* Espessura (só direita e baixo) */
    
    /* Rotação para formar o "check" */
    transform: rotate(45deg);
    
    /* Posição central (ajuste fino) */
    position: absolute;
    top: 3px; 
    
    /* Começa invisível */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* --- ESTADO SELECIONADO (ATUALIZADO) --- */

/* Quando o botão está selecionado */
.multi-choice-button.selected {
    border-color: #00C49A;
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.3);
}

/* O círculo fica verde */
.multi-choice-button.selected .choice-indicator {
    border-color: #00C49A;
    background-color: #00C49A; /* Fica com fundo verde */
}

/* O "check" (::after) aparece */
.multi-choice-button.selected .choice-indicator::after {
    opacity: 1; /* Fica visível */
}

/* Efeito Hover para os botões de múltipla escolha */
.multi-choice-button:hover {
    transform: scale(1.03); /* Efeito "salto" */
    border-color: #00C49A; /* Borda verde-água */
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.3); /* Sombra colorida */
}



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 13
========================================
*/

.loading-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin: 2rem 0 1rem;
}

.loading-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    text-align: center;
    max-width: 400px;
    margin: 0 auto 2.5rem; /* Mais espaço abaixo */
}

/* Seção da nova barra de carregamento */
.loading-bar-section {
    width: 100%;
    margin-bottom: 2rem;
}

/* O contêiner cinza da barra */
.loading-bar-container {
    width: 100%;
    background-color: #eef1f4;
    border-radius: 10px;
    height: 22px; /* Um pouco mais grossa */
    overflow: hidden;
}

/* A barra verde interna que anima */
.loading-bar-inner {
    height: 100%;
    width: 84%; /* Começa em 84% */
    background-color: #00C49A;
    border-radius: 10px;
    
    /* Transição suave quando o JS mudar a largura */
    transition: width 0.5s ease-in-out; 
    
    /* Para alinhar o texto do % */
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* O texto "84%" que fica dentro da barra */
.loading-percent-text {
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 10px; /* Espaço da borda direita */
}



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 19
========================================
*/

.multi-choice-detailed-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Reutiliza o estilo de hover */
.multi-choice-detailed-button:hover {
    transform: scale(1.03);
    border-color: #00C49A;
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.3);
}

.multi-choice-detailed-button .multi-choice-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.multi-choice-detailed-button .text-content {
    display: flex;
    flex-direction: column;
}

.multi-choice-detailed-button .title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
}

.multi-choice-detailed-button .subtitle {
    font-size: 0.80rem;
    font-weight: 500;
    color: #777;
}

/* --- ESTADO SELECIONADO (Reutilizado da Página 10) --- */

/* Quando o botão está selecionado */
.multi-choice-detailed-button.selected {
    border-color: #00C49A;
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.3);
}

/* O círculo fica verde */
.multi-choice-detailed-button.selected .choice-indicator {
    border-color: #00C49A;
    background-color: #00C49A;
}

/* O "check" (::after) aparece */
.multi-choice-detailed-button.selected .choice-indicator::after {
    opacity: 1;
}

/* NOTA: As classes .choice-indicator e .choice-indicator::after 
  já devem existir no seu CSS (da Página 10) e serão 
  automaticamente aplicadas aqui.
*/


/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 22
========================================
*/

/* Card de Informação */
.info-box {
    width: 100%;
    background-color: #f8faff; /* Fundo azulado muito claro */
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 2rem; /* Espaço após os botões */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o conteúdo */
    text-align: center;
}

.info-box-icon {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    background-color: #e6ebf5;
    border-radius: 8px;
    padding: 6px 12px;
}

.info-box-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.5rem;
}

.info-box-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 24
========================================
*/

.article-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 1.5rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.article-title {
    font-size: 1.4rem; /* Um pouco maior */
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.article-text {
    font-size: 0.95rem;
    color: #555;
    text-align: start;
    line-height: 1.6;
    margin: 0 auto 2rem;
    max-width: 400px;
}


/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 32
========================================
*/

.input-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #777;
    text-align: center;
    margin-top: -1.5rem; /* Puxa para perto do título */
    margin-bottom: 2rem;
}

/* Container do Input */
.input-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
}

.input-container span {
    font-size: 1.5rem;
    font-weight: 600;
    color: #00C49A; /* Cor da seta */
    margin-right: 1rem;
}

.input-container input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    background: none;
}

/* Remove as setas do input tipo "number" */
.input-container input::-webkit-outer-spin-button,
.input-container input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-container input[type=number] {
    -moz-appearance: textfield;
}

/* Cor mais suave para o placeholder */
.input-container input::placeholder {
    color: #dddddd; /* Um tom de cinza mais claro e suave */
    font-weight: 500; /* Deixa a fonte do placeholder um pouco mais leve */
    opacity: 1; /* Garante que a cor seja aplicada corretamente */
    font-size: 0.8rem;
}

/* Para compatibilidade com navegadores mais antigos (Firefox) */
.input-container input::-moz-placeholder {
    color: #b0b0b0;
    font-weight: 500;
    opacity: 1;
}

/* Para compatibilidade com navegadores mais antigos (IE/Edge) */
.input-container input:-ms-input-placeholder {
    color: #b0b0b0;
    font-weight: 500;
}

/* O .info-box já foi estilizado na Página 22, 
   então ele será reutilizado aqui! */

/* O .continue-button também será reutilizado. */



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 33
========================================
*/

.back-arrow {
    position: absolute;
    top: 2.5rem; /* Alinha com o padding do container */
    left: 2.5rem; /* Alinha com o padding do container */
    font-size: 1.8rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10; /* Garante que fique acima de outros itens */
}

.back-arrow:hover {
    color: #333;
}




/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 36
========================================
*/

.summary-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    text-align: center;
    margin: 2rem 0 3rem;
}

/* --- Barra de IMC (Design Atualizado) --- */
.imc-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    height: 8rem;
    margin-bottom: 2.5rem;
   /* Fundo: IMC Gradiente Suave */
background: linear-gradient(to right, #00BFA6, #F3B25B, #FF5E5E);


    border-radius: 8px;
}

.imc-bar-header {
    display: flex;
    width: 95%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0 5px; /* Alinhamento com a barra */
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}
.imc-status-red {
    color: #ffffff; /* Vermelho */
    font-weight: 700;
}

/* O container principal da barra (agora com gradiente e grade) */
.imc-bar {
    position: relative;
    width: 95%;
    height: 8px; /* Altura para o background */
    border-radius: 10px;
    padding: 0 10px; /* Padding para a trilha interna não encostar nas bordas */
    box-sizing: border-box;
    background: linear-gradient(to right, #00BFA6, #F3B25B, #FF5E5E);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);  
    margin-bottom: 0.5rem;
    
    /* Centraliza a trilha azul no meio */
    display: flex;
    align-items: center;
}

.imc-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  );
}

/* A "trilha" azul clara onde o pino desliza */
.imc-track {
    position: relative;
    width: 100%;
    height: 10px;
    background-color: rgba(200, 230, 255, 0.7); /* Azul claro semi-transparente */
    border-radius: 5px;
}

.imc-bar-footer {
    display: flex;
    width: 95%;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    padding: 0 5px; /* Alinhamento */
}

/* O "pin" animado (agora relativo à .imc-track) */
.imc-indicator {
    position: absolute;
    top: 50%; /* Centraliza no meio da trilha */
    left: 0%; /* Posição inicial (o JS vai mudar) */
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    
    /* Animação suave do "left" */
    transition: left 1.5s ease-out; 
    z-index: 2; /* Fica acima da trilha */
}
.imc-dot {
    width: 20px;
    height: 20px;
    background: white;
    border: 4px solid #00C49A; /* Cor de destaque */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    box-sizing: border-box; /* Garante que a borda não estoure */
}
.imc-bubble {
    position: absolute;
    bottom: 28px; /* Acima do pino */
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    white-space: nowrap; /* Impede quebra de linha */
    z-index: 3;
}

/* --- Layout 2 Colunas --- */
.content-split {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 2rem;
    text-align: left;
}
.summary-details {
    flex: 1; /* Ocupa metade do espaço */
}
.summary-details h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.summary-details ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}
.summary-details li {
    font-size: 1rem;
    color: #555;
}

/* Ícones (placeholders) */
.icon-leaf { display: inline-block; /* Adicione ícones reais aqui */ }
.icon-warning { display: inline-block; /* Adicione ícones reais aqui */ }

.summary-image {
    flex: 1; /* Ocupa a outra metade */
    display: flex;
    align-items: center;
    justify-content: center;
}
.summary-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* --- Card de Aviso Amarelo --- */
.warning-box {
    width: 100%;
    background-color: #fffbe6; /* Amarelo claro */
    border: 1px solid #ffe58f;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-sizing: border-box;
    text-align: center;
}
.warning-box .info-box-title {
    color: #d46b08; /* Laranja escuro */
    font-weight: 700;
}
.warning-box .info-box-text {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

/* --- Novos Cards de Feedback --- */

/* Esconde os 3 cards por padrão; o JS vai mostrar o certo */
.warning-box,
.success-box,
.low-warning-box {
    display: none;
}

/* Um subtítulo para os novos cards */
.info-box-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin: -0.5rem 0 0.75rem;
    text-align: center;
}

/* NOVO: Card de Sucesso (Verde) */
.success-box {
    width: 100%;
    background-color: #f6ffed; /* Verde muito claro */
    border: 1px solid #b7eb8f;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-sizing: border-box;
    text-align: center;
}
.success-box .info-box-title {
    color: #389e0d; /* Verde escuro */
    font-weight: 700;
}
.success-box .info-box-text {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

/* NOVO: Card de Aviso (Amarelo para IMC Baixo) */
.low-warning-box {
    width: 100%;
    background-color: #fffbe6; /* Amarelo claro (reutilizado) */
    border: 1px solid #ffe58f;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-sizing: border-box;
    text-align: center;
}
.low-warning-box .info-box-title {
    color: #d46b08; /* Laranja escuro (reutilizado) */
    font-weight: 700;
}
.low-warning-box .info-box-text {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}




/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 37
========================================
*/

.quiz-subtitle-text {
    font-size: 1rem;
    font-weight: 500;
    color: #777;
    text-align: center;
    max-width: 380px; /* Limita a largura do texto */
    margin: -1rem auto 2rem; /* Puxa para perto do título */
    line-height: 1.4;
}



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 38
========================================
*/

.summary-title-alt {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    text-align: center;
    margin: 1.5rem 0 0.5rem;
}

/* Roteiro de 4 Colunas */
.roadmap-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 1.5rem 1rem;
    margin: 1.5rem 0 2rem;
    box-sizing: border-box;
}

.roadmap-step {
    flex: 1; /* Divide o espaço igualmente */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.roadmap-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.75rem;
}

/* O "copo" cinza da barra vertical */
.roadmap-bar-container {
    position: relative;
    width: 40px; /* Largura da barra */
    height: 120px; /* Altura da barra */
    background-color: #eef1f4;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    
    /* Importante: para a barra crescer de baixo para cima */
    display: flex;
    align-items: flex-end;
    overflow: hidden; /* Garante que a barra interna fique contida */
}

/* A barra colorida interna */
.roadmap-bar-inner {
    width: 100%;
    height: 0%; /* O JS vai animar isso */
    border-radius: 8px;
    transition: height 1s ease-out 0.5s; /* Anima a altura com delay */
}

/* Cores das barras */
.bar-red { background-color: #f44336; }
.bar-orange { background-color: #ffa726; }
.bar-yellow { background-color: #ffee58; }
.bar-green { background-color: #00C49A; }


/* Tag "HOJE" */
.roadmap-tag {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #f44336;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
}

.roadmap-weight {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.roadmap-stage {
    font-size: 0.85rem;
    font-weight: 500;
    color: #777;
}


/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 39 (CORRIGIDO)
========================================
*/

.page-title-main {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    text-align: center;
    margin: 1.5rem 0 1rem;
}

/* Garante que o texto da barra de loading funcione */
#secondary-loading-bar {
    justify-content: center;
}
#secondary-loading-text {
    margin-right: 0;
    color: white;
    z-index: 2;
    position: relative;
}

.loading-status-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    text-align: center;
    margin-top: 0.75rem;
}

.social-proof-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 0.25rem;
}
.social-proof-subtitle {
    font-size: 1rem;
    color: #777;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* --- Estilos do Carrossel CORRIGIDO --- */
.testimonial-carousel-container {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
    overflow: hidden; /* Esconde os slides que não estão ativos */
}

/* Wrapper que se move */
.carousel-slides {
    display: flex;
    /* O JS vai mudar o 'transform' */
    transition: transform 0.4s ease-in-out; 
}

/* Cada card é um slide (agora para imagens) */
.testimonial-card-carousel {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    
    /* Remove padding e alinhamento de texto */
    /* Adiciona centralização para a imagem */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem; /* Um pequeno padding lateral */
}

/* Estilo para a imagem dentro do carrossel */
.testimonial-card-carousel img {
    display: block;
    width: 80%;
    max-width: 400px; /* Ajuste se desejar */
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Setas do carrossel */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #777;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 5;
}
.carousel-arrow.prev { left: -10px; }
.carousel-arrow.next { right: -10px; }

/* Pontos de navegação */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d0d0d0;
    transition: background-color 0.2s ease;
    cursor: pointer; /* Adicionado */
}
.dot.active {
    background-color: #555;
}



/*
========================================
 ESTILOS ADICIONAIS - PÁGINA 40 (Sales Letter)
========================================
*/

/* Remove o fundo gradiente do quiz */
body.sales-letter-body {
    background: #ffffff;
    padding-top: 1rem;
}

/* Container mais largo para a página de vendas */
.sales-container {
    width: 100%;
    max-width: 700px; /* Largura ideal para leitura */
    margin: 0 auto;
    padding: 0 1rem 2rem;
    box-sizing: border-box;
}

.sales-logo {
    margin-bottom: 2rem;
    font-size: 1.8rem;
    text-align: center;
}

.sales-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    text-align: center;
    margin: 1rem 0;
}
.sales-headline .highlight {
    color: var(--cta); /* Cor de destaque */
}

.sales-image-container {
    width: 100%;
    margin: 1.5rem 0;
    text-align: center;
}
.sales-image-container img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.sales-image-container p {
    font-size: 0.9rem;
    color: #777;
    font-style: italic;
    margin-top: 0.5rem;
}

/* Caixa de CTA (Oferta) */
.cta-box {
    background: var(--soft, #f7fafc);
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: var(--shadow);
}
.price-box {
    text-align: center;
    margin-bottom: 1.5rem;
}
.price-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
    display: block;
}
.price-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--cta);
    display: block;
    line-height: 1.1;
}

.cta-button-sales {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1.25rem 2rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    background-color: var(--cta);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 196, 154, 0.4);
    text-decoration: none;
    animation: pulse 1.5s infinite;
}
.cta-button-sales:hover {
    background-color: var(--cta-dark, #00a380);
}

.features-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colunas */
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
}
.features-list li {
    display: flex;
    align-items: center;
}
.check-icon {
    color: var(--cta);
    font-weight: 800;
    margin-right: 8px;
}

/* Copy (Texto de Vendas) */
.sales-copy {
    margin: 2.5rem 0;
    color: #333;
    line-height: 1.7;
    font-size: 1.1rem;
}
.sales-copy h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}
.sales-copy h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

/* Seção de Depoimentos */
.testimonial-section {
    margin: 2rem 0;
}
.testimonial-section h2 {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
}
/* Reutiliza o .testimonial-card, mas garante o fundo */
.testimonial-card {
    background: #f9f9f9;
    margin-bottom: 1.5rem;
}

/* Selo de Garantia */
.guarantee-seal {
    text-align: center;
    margin-top: 2rem;
}
.guarantee-seal img {
    width: 120px;
    margin: 0 auto 1rem;
}
.guarantee-seal p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}