/* --- Configurações Globais --- */
:root {
    --cor-principal: #2980b9;
    --cor-secundaria:#1D3549;
    --cor-texto: #333;
    --cor-fundo: #f4f7f9;
	
	/* Verde para Tolerância  */
    --kpi-tolerancia:   #1D3557;
    --kpi-tolerancia-dark: #12243C;

    /* Laranja para Prazo */
    --kpi-prazo: #7A4B29;
    --kpi-prazo-dark: #54361C;

    /* Vermelho para Viabilidade (Risco) */
    --kpi-viabilidade:  #8C1F28;
    --kpi-viabilidade-dark: #61151B;
    
    /* Roxo para Publicidade (Destaque) */
    --kpi-publicidade: #2A574A; 
    --kpi-publicidade-dark: #1E3D35; 
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
}
.container {
    max-width: 90%;
    margin: auto;
    padding: 20px 20px;
}
h1, h2, h3 {
    color: var(--cor-secundaria);
}
h2 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 40px;
}
.btn {
    display: inline-block;
    background-color: var(--cor-principal);
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #3498db;
}

/* --- Menu de Navegação (Para todas as páginas) --- */
header {
    background-color: var(--cor-secundaria);
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
	position: sticky; 
    top: 0;          
    z-index: 1000;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1100px;
    margin: auto;
}
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color:#e0e0e0;
    font-weight: 700;
    font-size: 1.2em;
}
.nav-logo img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
nav ul li {
    margin-left: 25px;
}
nav ul a {
    text-decoration: none;
    color: #e0e0e0;
    font-weight: 500;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}
nav ul a:hover {
    color: var(--cor-principal);
    border-bottom-color: var(--cor-principal);
}
nav ul a.active {
    color: var(--cor-principal);
    font-weight: 700;
}
/* --- Rodapé (Para todas as páginas) --- */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 500px;
    background-color: var(--cor-secundaria);
    color: #ecf0f1;

}

/* --- Estilos da Timeline (Página Jornada) --- */
/* (Estilos da timeline original mantidos) */
#timeline-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    position: sticky;
    top: 20px;
}
#timeline-container {
    grid-area: timeline;
    position: static; 
}
#timeline-container h3 {
    text-align: left; margin-top: 0; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0;
}
/* --- ESTILO DA TIMELINE (MODIFICADO - Req 2) --- */
#timeline {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaço entre os itens */
}
.timeline-item {
    display: flex;
    flex-direction: column; /* Empilha o título e o meta */
    align-items: flex-start; /* Alinha tudo à esquerda */
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.3s, border-color 0.3s;
}
.timeline-item:hover {
    background-color: #e9ecef;
}
.timeline-item.active {
    background-color: #e7f3ff; 
    border-color: var(--cor-principal);
}

/* (Req 2) Linha de cima: Título */
.timeline-title-wrapper {
    width: 100%;
    margin-bottom: 5px;
}
.timeline-title {
    font-weight: 700;
    font-size: 0.95em;
    color: var(--cor-secundaria);
    white-space: normal;   /* Permite quebra de linha */
    word-break: break-word; /* Força a quebra de linha */
    line-height: 1.3;
}
.timeline-item.active .timeline-title {
    color: var(--cor-principal);
}

/* (Req 2) Linha de baixo: Bolinha e Data */
.timeline-meta-wrapper {
    display: flex;
    align-items: center;
}
.timeline-dot {
    width: 10px; height: 10px; 
    background-color: #ccc; 
    border-radius: 50%;
    margin-right: 8px; /* Espaço entre bolinha e data */
    flex-shrink: 0;
}
.timeline-item.active .timeline-dot {
    background-color: var(--cor-principal);
}
.timeline-date {
    font-size: 0.8em;
    font-weight: 500;
    color: #666;
}
.timeline-id {
    font-size: 0.8em;
    color: #888;
    margin-left: 5px;
}


/* --- NOVO LAYOUT EM GRID PARA O PAINEL PRINCIPAL --- */
.painel-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
	min-width: 0;
    grid-template-rows: 120px 460px 90px auto auto auto;
    gap: 18px;
    grid-template-areas:
	
		"timeline timeline timeline kpi-tolerancia kpi-tolerancia kpi-tolerancia kpi-tolerancia kpi-tolerancia kpi-tolerancia summary summary summary summary"
		"timeline timeline timeline central central central central central central summary summary summary summary"
		"timeline timeline timeline kpi-prazo kpi-prazo kpi-viabilidade kpi-viabilidade kpi-publicidade kpi-publicidade summary summary summary summary"
		"timeline timeline timeline problema problema problema produto produto produto summary summary summary summary"
		"timeline timeline timeline hipoteses hipoteses hipoteses impacto impacto impacto summary summary summary summary"
        "timeline timeline timeline referencial referencial referencial metodologia metodologia metodologia summary summary summary summary"
}
.grid-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.grid-item label {
	font-weight: bold; font-size: 1em;
    display: block;
    color: var(--cor-texto);
    margin-bottom: 8px;
}
.grid-item p {
    margin: 0;
    font-size: 1em;
}

.painel-summary { grid-area: summary; }
.painel-kpi-tolerancia { grid-area: kpi-tolerancia; align-self: start; }
.painel-kpi-viabilidade { grid-area: kpi-viabilidade; }
.painel-kpi-prazo { grid-area: kpi-prazo; }
.painel-kpi-publicidade { grid-area: kpi-publicidade; }
.painel-hipoteses { grid-area: hipoteses; }
.painel-problema { grid-area: problema; }
.painel-referencial { grid-area: referencial; }
.painel-metodologia { grid-area: metodologia; }
.painel-impacto { grid-area: impacto; }
.painel-produto { grid-area: produto; }
/* 1. O painel central (a "moldura") */
.painel-central {
    grid-area: central;
    padding: 0;
    overflow: hidden;
    position: relative;
    background-color: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    height: 100%; /* Ocupa os 460px da linha */
    min-width: 443px; /* Trava a largura mínima */
    display: flex;
    align-items: center;
    justify-content: center;
}
.cubo-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	}
	/* 2. ADICIONE esta nova regra para a âncora */
/* 1. A REGRA DA ÂNCORA (QUE VOCÊ ADICIONOU ANTES) */
.cubo-anchor {
    position: relative;
    display: inline-block;
    line-height: 0; 
    height: 100%; 
}

/* 2. O ÍCONE (AGORA FORA E GLOBAL) */
.legenda-icone-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background-color: var(--cor-principal);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s, background-color 0.2s;
    z-index: 10;
}
.legenda-icone-btn:hover {
    transform: scale(1.1);
    background-color: var(--cor-secundaria);
}
.painel-central img {
    height: 100%; /* Faz a imagem ter 460px de altura */
    width: auto; /* Deixa a largura ajustar */
    transform: scale(1.1); /* Aplica o zoom */
}
@media (max-width: 1000px) {
    .painel-grid {
        height: auto;
        
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px; 

        /* 1. Define as alturas das linhas explicitamente para mobile */
        /* Linha 1 (timeline): auto */
        /* Linha 2 (central/cubo): 80% da LARGURA da tela */
        /* Linha 3 (tolerancia): auto */
        /* Linha 4 (kpis V,T,P): min-height 90px */
        /* Outras linhas: auto */
        grid-template-rows: auto 80vw minmax(90px, auto) minmax(90px, auto) auto auto auto auto auto auto auto;

        /* 2. Define o layout de grid para mobile */
        grid-template-areas:
            "timeline timeline timeline" 
            "central central central"  
            "kpi-tolerancia kpi-tolerancia kpi-tolerancia"
            "kpi-prazo kpi-viabilidade kpi-publicidade"
            "summary summary summary"   
            "problema problema problema"
            "hipoteses hipoteses hipoteses"
            "referencial referencial referencial"
            "metodologia metodologia metodologia"
            "impacto impacto impacto"
            "produto produto produto";
    }
       
    .kpi-clicavel {
        padding: 10px 5px; /* Reduz o padding interno */
        min-height: 80px;  /* Altura mínima para alinhamento */
        display: flex; /* Centraliza verticalmente */
        flex-direction: column;
        justify-content: center;
    }
    .kpi-clicavel label {
        font-size: 0.85em; /* Reduz a fonte da label */
    }
    .kpi-clicavel p {
        font-size: 0.9em;  /* Reduz a fonte do valor */
        word-break: break-word; /* Força quebra de linha se necessário */
    }

    /* 4. MUDANÇA: Faz a timeline grudar no topo */
    #timeline-container {
        position: sticky;
        top: 75px; /* Altura do seu menu principal */
        z-index: 900;
        /* Garante que o conteúdo não vaze por baixo */
        background-color: var(--cor-fundo); 
    }

    .timeline-toggle {
        display: block; /* MOSTRA o botão em telas móveis */
    }

    /* 5. DEFINE O ESTADO RECOLHIDO */
    #timeline-container.timeline-collapsed #timeline {
        display: none; 
    }
    
    #timeline-container.timeline-collapsed .timeline-header {
        margin-bottom: 0;
        border-bottom: none;
    }
}

/* --- Estilos do Modal (Janela Flutuante) --- */
.modal-overlay {
    position: fixed; /* Fica fixo na tela */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */
    display: none; /* Começa escondido */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Garante que fique na frente de tudo */
    
    /* MODIFICADO: Adicionado para o script.js novo */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* MODIFICADO: script.js novo usa 'display: flex' e 'opacity: 1' */
.modal-overlay.visible {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 800px; /* Aumentado para o Gantt */
    position: relative;
    max-height: 80vh; /* Altura máxima */
    overflow-y: auto; /* Permite rolagem interna */
}

.modal-content h3 {
    margin-top: 0;
    color: var(--cor-secundaria);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.5em;
    font-weight: bold;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: #333;
}

/* --- ESTILOS NOVOS PARA O MODAL --- */

/* Tabelas dentro do Modal */
.modal-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 0.9em;
}
.modal-content th, 
.modal-content td {
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap; /* Impede que o conteúdo da tabela quebre linha */
}
.modal-content td:first-child, /* Coluna de Título/Item */
.modal-content th:first-child {
    white-space: normal; /* Permite que a primeira coluna quebre linha */
}

.modal-content th {
    background-color: #f3f4f6;
    font-weight: 600;
}
.modal-content tr:nth-child(even) {
    background-color: #f9fafb;
}

/* Meta em Destaque */
.modal-content .meta-destaque {
    font-size: 1.2em;
    font-weight: 600;
    color: #1d4ed8;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

/* Bloco de Cálculo (para a memória de cálculo) */
.modal-content .bloco-calculo {
    margin-top: 20px;
    padding: 15px;
    background-color: #f3f4f6;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap; /* Mantém a formatação */
    font-size: 0.85em;
    border: 1px solid #e5e7eb;
    max-height: 200px; /* Limita a altura */
    overflow-y: auto; /* Adiciona rolagem se for muito grande */
}
.modal-content .bloco-calculo h4 {
    margin: 0 0 10px 0;
    font-family: 'Roboto', sans-serif; /* Volta à fonte normal */
    color: #333;
}

/* --- ESTILOS PARA O GRÁFICO DE GANTT (Req. 2) --- */
.gantt-container {
    position: relative;
    width: 100%;
    margin-top: 20px;
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 20px 10px 10px 10px;
    overflow-x: auto; /* Permite rolagem se for muito denso */
    min-height: 200px;
    
}

.gantt-tarefa {
    display: flex; /* Alinha o rótulo e a barra */
    align-items: center;
    margin-bottom: 8px;
    white-space: nowrap;
}

.gantt-rotulo {
    width: 30%; /* Espaço para o nome da tarefa */
    font-size: 0.85em;
    padding-right: 10px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0; /* Impede que o rótulo encolha */
}

.gantt-linha-tempo {
    width: 70%;
    position: relative;
    height: 20px;
    background-color: #e5e7eb; /* Fundo da linha do tempo */
    border-radius: 4px;
}

.gantt-barra {
    position: absolute;
    height: 100%;
    border-radius: 4px;
    background-color: #60a5fa; /* Cor da barra (Aguardando/Default) */
    opacity: 0.8;
    box-sizing: border-box; /* Garante que a borda não aumente o tamanho */
    min-width: 2px; /* Largura mínima para ser visível */
}

.gantt-barra.status-concluido {
    background-color: #22c55e; /* Verde */
}
.gantt-barra.status-atrasado {
    background-color: #ef4444; /* Vermelho */
}
.gantt-barra.status-andamento {
    background-color: #f59e0b; /* Amarelo */
}

/* Tooltip (dica) da barra */
.gantt-barra::after {
    content: attr(data-tooltip); /* Mostra o texto do atributo */
    position: absolute;
    bottom: 120%; /* Acima da barra */
    left: 0;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
    white-space: pre; /* Mantém as quebras de linha do tooltip */
}
.gantt-barra:hover::after {
    visibility: visible;
    opacity: 1;
}
.gantt-hoje-linha {
    position: absolute;
    top: 20px;    /* Respeita o padding-top do container */
    bottom: 10px; /* Respeita o padding-bottom do container */
    width: 2px;
    background-color: #ef4444; /* Vermelho */
    z-index: 5; /* Fica em cima das barras */
    opacity: 0.8;
}

.gantt-hoje-rotulo {
    position: absolute;
    top: -20px; /* Sobe para a área do padding-top */
    left: 4px;  /* 4px à direita da linha */
    background-color: #ef4444;
    color: #fff;
    padding: 2px 5px;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 4px 4px 0 0; /* Cantos arredondados em cima */
    white-space: nowrap;
}
.gantt-fase {
    width: 100%;
    font-weight: 700;
    font-size: 0.95em;
    color: var(--cor-secundaria);
    padding: 6px 10px;
    margin-top: 12px; /* Espaço extra acima */
    margin-bottom: 6px;
    box-sizing: border-box;
    border-bottom: 2px solid var(--cor-principal);
    background-color: #f3f4f6;
    border-radius: 4px 4px 0 0;
}
/* --- FIM DOS ESTILOS NOVOS --- */


/* --- Estilos da Seção Comunidade WhatsApp --- */
#comunidade-whatsapp {
    background-color: #fff;
    text-align: center;
    margin-top: 40px; 
    padding: 20px;
    border-radius: 8px; 
}

/* --- Estilos para KPIs Clicáveis (Visual de Botão) --- */

/* 1. ESTILO BASE (ESTRUTURA) - aplica-se a todos */
.kpi-clicavel {
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    border-width: 2px; /* Apenas define a largura */
    border-style: solid; /* Apenas define o estilo */
    transition: all 0.2s ease-in-out;
}

/* 2. EFEITO HOVER (ESTRUTURA) - aplica-se a todos */
.kpi-clicavel:hover {
    color: #fff; /* O texto SEMPRE fica branco no hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.kpi-clicavel:hover label {
    color: #fff; /* A label SEMPRE fica branca no hover */
}

/* 3. EFEITO ACTIVE (ESTRUTURA) - aplica-se a todos */
.kpi-clicavel:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.05s ease;
}

/* --- CORES ESPECÍFICAS DOS KPIs --- */
/* Agora aplicamos as cores de forma individual */

/* ----- TOLERÂNCIA (Roxo) ----- */
.painel-kpi-tolerancia,
.painel-kpi-tolerancia label {
    border-color: var(--kpi-tolerancia);
    color: var(--kpi-tolerancia);
}
.painel-kpi-tolerancia:hover {
    background-color: var(--kpi-tolerancia);
    border-color: var(--kpi-tolerancia);
}
.painel-kpi-tolerancia:active {
    background-color: var(--kpi-tolerancia-dark);
    border-color: var(--kpi-tolerancia-dark);
}

/* ----- VIABILIDADE (Vermelho) ----- */
.painel-kpi-viabilidade,
.painel-kpi-viabilidade label {
    border-color: var(--kpi-viabilidade);
    color: var(--kpi-viabilidade);
}
.painel-kpi-viabilidade:hover {
    background-color: var(--kpi-viabilidade);
    border-color: var(--kpi-viabilidade);
}
.painel-kpi-viabilidade:active {
    background-color: var(--kpi-viabilidade-dark);
    border-color: var(--kpi-viabilidade-dark);
}

/* ----- PRAZO (Laranja) ----- */
.painel-kpi-prazo,
.painel-kpi-prazo label {
    border-color: var(--kpi-prazo);
    color: var(--kpi-prazo);
}
.painel-kpi-prazo:hover {
    background-color: var(--kpi-prazo);
    border-color: var(--kpi-prazo);
}
.painel-kpi-prazo:active {
    background-color: var(--kpi-prazo-dark);
    border-color: var(--kpi-prazo-dark);
}

/* ----- PUBLICIDADE (Verde) ----- */
.painel-kpi-publicidade,
.painel-kpi-publicidade label {
    border-color: var(--kpi-publicidade);
    color: var(--kpi-publicidade);
}
.painel-kpi-publicidade:hover {
    background-color: var(--kpi-publicidade);
    border-color: var(--kpi-publicidade);
}
.painel-kpi-publicidade:active {
    background-color: var(--kpi-publicidade-dark);
    border-color: var(--kpi-publicidade-dark);

}
/* --- (style.css - Adicionar ao final do arquivo) --- */

/* Estilo para o Alerta de Viés (Dentro do Modal) */
.modal-content .bloco-alerta-viés {
    padding: 15px;
    margin-bottom: 20px; /* Espaço antes do bloco de cálculo */
    border-radius: 6px;
    background-color: #fefbec; /* Fundo amarelo claro */
    border: 1px solid #fde68a; /* Borda amarela */
    color: #713f12; /* Texto escuro */
}
.modal-content .bloco-alerta-viés strong {
    color: #b45309; /* Cor do título do alerta */
    display: block;
    margin-bottom: 8px;
    font-size: 1.1em;
}
.modal-content .bloco-alerta-viés p {
    margin: 5px 0 10px 0;
    font-size: 0.95em;
    line-height: 1.5;
}
.modal-content .bloco-alerta-viés ul {
    margin: 0 0 10px 20px;
    padding: 0;
}
.modal-content .bloco-alerta-viés li {
    margin-bottom: 5px;
    font-size: 0.9em;
}
.modal-content .bloco-alerta-viés li strong {
    display: inline;
    font-size: 1em;
}
/* --- (style.css - Adicionar ao final) --- */

/* Estilos para a nova seção de Detalhes da Publicação no Modal */
.modal-content .bloco-detalhes-pub {
    margin-top: 25px;
    border-top: 1px solid #e5e7eb; /* Linha separadora */
    padding-top: 20px;
}

.modal-content .bloco-detalhes-pub h4 {
    font-family: 'Roboto', sans-serif; /* Garante a fonte correta */
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
}

/* Formatação de cada artigo individual */
.modal-content .pub-detalhe {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e0e0e0; /* Separador leve */
}
.modal-content .pub-detalhe:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 1. Título do Artigo */
.modal-content .pub-detalhe strong {
    font-size: 1.1em;
    color: var(--cor-secundaria);
    line-height: 1.4;
    display: inline-block; /* Permite quebra de linha */
}

/* 2. Autores (Campo futuro) */
.modal-content .pub-autores {
    font-size: 0.9em;
    font-style: italic;
    color: #555;
    margin: 8px 0 10px 0;
}

/* 3. Resumo (Campo futuro) */
.modal-content .pub-resumo {
    font-size: 0.95em;
    line-height: 1.6;
    color: #333;
    margin: 0;
    white-space: pre-wrap; /* Respeita quebras de linha do resumo */
}
/* 1. Estiliza o novo cabeçalho (h3 + botão) */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Movemos o espaçamento do h3 para cá */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* 2. Reseta o h3 que estava dentro do #timeline-container */
#timeline-container h3 {
    margin: 0;
    padding: 0;
    border: none;
}

/* 3. Estiliza o novo botão de toggle */
.timeline-toggle {
    display: none; /* ESCONDIDO POR PADRÃO (em desktop) */
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    color: #495057;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.2s;
}
.timeline-toggle:hover {
    background-color: #dee2e6;
}

/* 4. MEDIA QUERY (A MÁGICA ACONTECE AQUI) */
/* Aplica quando a tela for estreita (celular) */
@media (max-width: 1000px) {
    
    #timeline-container {
        /* Torna a barra da timeline "grudenta" no topo */
        position: sticky;
        top: 75px; /* Altura do seu menu principal */
        z-index: 900;
        /* Garante que o conteúdo não vaze por baixo */
        background-color: var(--cor-fundo); 
    }

    .timeline-toggle {
        display: block; /* MOSTRA o botão em telas móveis */
    }

    /* 5. DEFINE O ESTADO RECOLHIDO */
    /* Quando o container tiver a classe .timeline-collapsed... */
    #timeline-container.timeline-collapsed #timeline {
        display: none; /* ...esconde a lista de episódios */
    }
    
    #timeline-container.timeline-collapsed .timeline-header {
        /* ...remove o espaçamento inferior */
        margin-bottom: 0;
        border-bottom: none;
    }
}
/* --- ESTILOS PARA O MODAL DE DOWNLOAD (index.html) --- */

/* 3. NOVO: Estilo do botão WhatsApp (puxado do style.css da jornada) */
.btn-whatsapp {
    background-color: #25D366; /* Cor oficial do WhatsApp */
    font-weight: 700;
    color: #fff; /* Garante que o texto seja branco */
}
.btn-whatsapp:hover {
    background-color: #128C7E; /* Cor mais escura para o hover */
}
/* Estilo para o novo botão do Drive */
#drive-link-btn {
    right: auto; /* Remove o 'right: 15px' da classe base */
    left: 15px;  /* Posiciona à esquerda */
    font-size: 1.1em; /* Ajuste para o ícone de pasta */
    line-height: 32px; /* Alinha o ícone verticalmente */
}

/* Estilo para o botão dentro do modal */
.modal-content .btn {
    display: inline-block;
    background-color: var(--cor-principal);
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}
.modal-content .btn:hover {
    background-color: #3498db;
}