@charset "utf-8";
/* CSS Document */

/* =========================================
   CHECKLIST.CSS - Estilos Específicos (Completo)
   ========================================= */

/* --- Container e Fundo --- */
.checklist-section {
    padding: 0px 0 60px;
    background: linear-gradient(to bottom, rgba(11, 42, 76, 0.5), rgba(0, 0, 0, 0.5));
    color: white;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    /* Mantém a section organizada verticalmente */
    display: flex;
    flex-direction: column;
	scroll-margin-top: 50px;
}

.checklist-container {
    max-width: 600px; /* Largura mais estreita estilo App Mobile */
    margin: 0 auto;
}

/* --- 1. HEADER DO CHECKLIST (FIXO COM OFFSET) --- */
.checklist-header-block {
    text-align: center;
    margin-bottom: 20px;
    
    /* EFEITO STICKY */
    position: -webkit-sticky;
    position: sticky;
    
    /* AQUI ESTÁ A CORREÇÃO: 80px para não ficar atrás do menu principal */
    top: 80px; 
    
    z-index: 9;
    
    /* Fundo sólido para não misturar */
    background: #0b2a4c; 
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.checklist-title {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 0;
}

.checklist-subtitle {
    color: #fbc42d; /* Amarelo Eaton */
    font-weight: 700;
    font-size: 13px;
    margin: 0;
}

/* --- 2. ACCORDION (PERGUNTAS) --- */
.accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
    margin-top: 20px; /* Espaço extra após o header fixo */
}

.checklist-item {
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Estado: Pergunta Respondida (Fica Escura) */
.checklist-item.answered {
    opacity: 0.6; /* Escurece */
    filter: grayscale(0.5); /* Tira um pouco da cor */
}

/* Estado: Pergunta Ativa (Aumenta opacidade se for clicada de volta) */
.checklist-item.answered.active {
    opacity: 1;
    filter: none;
}

/* Botão da Pergunta (Header) */
.checklist-header {
    /* Gradiente Azul Eaton estilo botão */
    background: linear-gradient(90deg, #0b4a8f 0%, #005eb8 100%);
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.3s;
}

.checklist-header:hover {
    background: linear-gradient(90deg, #0d5cb0 0%, #0070da 100%);
}

.arrow-icon {
    font-size: 2rem;
    font-weight: 300;
    transition: transform 0.3s ease;
    
    /* === REMOVE QUALQUER TIPO DE SOMBRA === */
    text-shadow: none !important;        /* Remove sombra de texto */
    box-shadow: none !important;         /* Remove sombra de caixa */
    filter: none !important;             /* Remove filtros gráficos */
    -webkit-filter: none !important;     /* Para Safari/Chrome antigos */
    background: transparent !important;  /* Garante que não tem fundo cinza */
    
    /* Melhora a renderização durante a rotação */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}


/* Rotação da seta quando aberto */
.checklist-item.active .arrow-icon {
    transform: rotate(90deg);
}

/* Corpo da Resposta (Body) */
.checklist-body {
    max-height: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.9); /* Fundo branco levemente transparente */
    transition: max-height 0.4s ease-out;
}

.checklist-item.active .checklist-body {
    max-height: 800px; /* Aumentei um pouco para garantir que cabem opções longas */
}

/* --- 3. TOGGLES (SWITCHES) --- */
.options-list {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.toggle-option {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    color: #333; /* Texto escuro no fundo claro */
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}

/* Esconde o input original */
.toggle-option input {
    display: none;
}

/* O desenho do Switch */
.toggle-slider {
    width: 50px;
    height: 28px;
    background-color: #ccc;
    border-radius: 34px;
    position: relative;
    transition: .4s;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0; /* Não deixa esmagar */
}

/* A bolinha do Switch */
.toggle-slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Estado CHECKED */
.toggle-option input:checked + .toggle-slider {
    background-color: #005eb8; /* Azul Eaton Ativo */
}

.toggle-option input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* --- 4. FOOTER DO CHECKLIST (FIXO E BOTÕES ALINHADOS) --- */
.checklist-footer-block {
    text-align: center;
    margin-top: 20px;
    
    /* EFEITO STICKY */
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 10;
    
    /* Fundo sólido */
    background: #0b2a4c; 
    padding: 15px 10px; 
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
}

.footer-desc {
    font-size: 11px; 
    margin-bottom: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    padding: 0 10px;
}

/* Container dos Botões */
.footer-buttons {
    display: flex;
    flex-direction: row; /* Força linha horizontal */
    flex-wrap: nowrap;   /* PROIBIDO quebrar linha */
    gap: 8px;            /* Espaço menor entre botões */
    justify-content: space-between;
    width: 100%;
}

/* Estilo dos Botões */
.chk-btn {
    flex: 1; /* Faz os botões dividirem o espaço igualmente */
    padding: 10px 5px; 
    border-radius: 6px;
    font-weight: 800;
    text-align: center;
    font-size: 12px; /* Fonte menor para mobile */
    color: #1a1a1a;
    
    /* Centralização do texto */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-decoration: none;
    transition: transform 0.2s;
    height: 50px; /* Altura fixa */
}

.chk-btn:active {
    transform: scale(0.95);
}

/* Cores */
.btn-yellow {
    background-color: #fbc42d;
}
.btn-yellow:hover {
    background-color: #e5b022;
}

.btn-orange {
    background-color: #ff7900;
}
.btn-orange:hover {
    background-color: #e06000;
}

/* Ajuste Fino para Desktop */
@media (min-width: 768px) {
    .checklist-header-block {
        /* No desktop talvez o menu seja maior ou menor, ajuste aqui se precisar */
        top: 80px; 
    }
    
    .chk-btn {
        font-size: 14px;
        padding: 12px 15px;
    }
    .footer-desc {
        font-size: 1rem;
    }
}





/* --- Estilo para Inputs Aninhados (Dentro das perguntas) --- */
.nested-input {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #333;
    outline: none;
    transition: border 0.3s;
}

.nested-input:focus {
    border-color: #005eb8; /* Azul Eaton */
    box-shadow: 0 0 5px rgba(0, 94, 184, 0.3);
}

/* Container auxiliar para agrupar opção + input */
.toggle-group-vertical {
    display: flex;
    flex-direction: column;
}










/* =========================================
   ESTILOS DOS RESULTADOS (Atualizado: 2 Colunas Mobile)
   ========================================= */

.result-section {
    padding: 20px 10px;
    animation: fadeIn 0.5s ease-in-out;
    margin-bottom: 60px; /* Espaço para não bater no footer sticky */
}

.result-title {
    text-align: center;
    color: #fbc42d;
    font-size: 1.3rem; /* Levemente menor no mobile */
    margin-bottom: 25px;
    line-height: 1.3;
}

/* Grid de Cards - FORÇANDO 2 COLUNAS DESDE O MOBILE */
.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* AQUI ESTÁ A MUDANÇA: 2 Colunas */
    gap: 10px; /* Gap menor para economizar espaço */
    max-width: 800px;
    margin: 0 auto;
}

/* Base do Card */
.result-card {
    border-radius: 8px; /* Cantos um pouco menos arredondados no mobile */
    padding: 12px;      /* Menos padding interno */
    color: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
}

/* Cabeçalho do Card */
.card-header {
    font-size: 0.9rem; /* Fonte menor para caber em 2 colunas */
    font-weight: 800;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 8px;
    line-height: 1.2;
    min-height: 35px; /* Altura mínima para alinhar títulos de 1 e 2 linhas */
    display: flex;
    align-items: center;
}

/* Lista de Itens */
.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem; /* Fonte pequena para leitura compacta */
    line-height: 1.3;
}

.card-list li {
    margin-bottom: 6px;
    padding-left: 10px;
    position: relative;
}

/* Bullet personalizado */
.card-list li::before {
    content: "•";
    color: #fbc42d;
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1rem;
    line-height: 0.8;
}

/* --- VARIAÇÕES DE COR --- */
.bg-light { background-color: #005eb8; }
.bg-dark { background-color: #0b2a4c; }

/* --- CARD FINAL (AMARELO / CTA) --- */
.card-cta-yellow {
    background-color: #fbc42d;
    color: #0b2a4c;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    transition: transform 0.2s;
    cursor: pointer;
}

.card-cta-yellow:hover {
    transform: scale(1.02);
    background-color: #e5b022;
}

.cta-content h3 {
    font-size: 0.85rem;
    margin-bottom: 5px;
    font-weight: 600;
    color: #000;
}

.cta-content h2 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    color: #000;
}

/* --- DESKTOP (Restaura tamanhos maiores) --- */
@media (min-width: 768px) {
    .result-title { font-size: 1.5rem; }
    
    .result-grid {
        gap: 20px; /* Gap maior */
    }

    .result-card {
        padding: 20px;
        border-radius: 12px;
    }

    .card-header {
        font-size: 1.2rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .card-list {
        font-size: 0.9rem;
    }

    .cta-content h3 { font-size: 1.1rem; }
    .cta-content h2 { font-size: 1.6rem; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}






/* --- LÓGICA DE BLOQUEIO (STEP-BY-STEP) --- */
.checklist-item.locked {
    opacity: 0.5;            /* Deixa meio transparente */
    pointer-events: none;    /* Impede qualquer clique */
    filter: grayscale(1);    /* Tira a saturação (opcional) */
    cursor: not-allowed;
}

/* Garante que o item ativo nunca pareça bloqueado */
.checklist-item.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
}



/* =========================================
   TRUQUE: TIRA ANIMAÇÃO DE FECHAMENTO
   ========================================= */

/* Quando a pergunta comprida NÃO estiver ativa (ou seja, quando for fechada), a animação zera e ela fecha na mesma hora */
.checklist-item.no-close-anim:not(.active) .checklist-body {
    transition: max-height 0s !important;
}



/* =========================================
   SIMPLIFICAÇÃO DO ACCORDION (Foco na Estabilidade)
   ========================================= */

/* Esconde o corpo da pergunta por padrão, sem animação de altura */
.checklist-body {
    transition: none !important;
    max-height: none !important;
    display: none !important;
}

/* Mostra instantaneamente quando estiver ativo */
.checklist-item.active .checklist-body {
    display: block !important;
}