/* === ARQUIVO: mapa.css === */
/* Estilo do Mapa da Defesa para o site Dr. Lucas Semim */

/* --- Variáveis de Cor (Tema 'Advogado Live') --- */
:root {
    --cor-fundo-escuro: #121212;
    --cor-fundo-card: #1e1e1e;
    --cor-fundo-hover: #2a2a2a;
    --cor-texto-principal: #f0f0f0;
    --cor-texto-secundario: #aaa;
    --cor-ouro-destaque: #FFD700; /* Dourado para 'tesouro' */
    --cor-ouro-hover: #ffec8a;
    --cor-borda: #333;
    --cor-hot: #ff4d4d; /* Para 'Tese Quente' */
}

/* --- Fontes e Configuração Geral --- */
body {
    font-family: 'Roboto', 'Arial', sans-serif;
    background-color: var(--cor-fundo-escuro);
    color: var(--cor-texto-principal);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* --- 1. Cabeçalho do Mapa --- */
.mapa-header {
    text-align: center;
    padding: 60px 20px 40px 20px;
    border-bottom: 2px solid var(--cor-borda);
    background-color: var(--cor-fundo-card); /* Um pouco mais claro que o fundo */
}

.mapa-header h1 {
    font-family: 'Teko', 'Arial Narrow', sans-serif;
    font-size: 3.5rem; /* 56px */
    font-weight: 600;
    color: var(--cor-ouro-destaque);
    margin: 0 0 10px 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.mapa-header .subtitle {
    font-size: 1.2rem; /* 19px */
    color: var(--cor-texto-secundario);
    max-width: 700px;
    margin: 0 auto 20px auto;
    font-weight: 300;
}

.mapa-header .breadcrumb {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
}
.mapa-header .breadcrumb a {
    color: var(--cor-ouro-destaque);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
.mapa-header .breadcrumb a:hover {
    color: var(--cor-ouro-hover);
    text-decoration: underline;
}

/* --- 2. Container Principal do Mapa --- */
.mapa-container {
    width: 90%;
    max-width: 1300px;
    margin: 40px auto;
}

/* --- 3. Território (Seção de Categoria) --- */
.territorio {
    background-color: transparent; /* Fundo já é escuro */
    border-radius: 8px;
    margin-bottom: 50px;
    padding: 25px;
}

.territorio h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem; /* 40px */
    font-weight: 600;
    color: var(--cor-texto-principal);
    border-bottom: 2px solid var(--cor-ouro-destaque);
    padding-bottom: 10px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* --- 4. Grid dos Tesouros (Os Artigos) --- */
.tesouros-grid {
    display: grid;
    /* O 'poder' da responsividade:
      - Tenta preencher com colunas de no mínimo 300px.
      - '1fr' faz com que elas se expandam igualmente.
      - Em telas pequenas, ele automaticamente vira 1 coluna.
    */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

/* --- 5. Card do Tesouro (O Link do Artigo) --- */
.tesouro-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 25px;
    text-decoration: none;
    color: var(--cor-texto-principal);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Para a tag 'hot' */
    overflow: hidden; /* Para a tag 'hot' */
}

.tesouro-card:hover {
    transform: translateY(-8px);
    border-color: var(--cor-ouro-destaque);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.1);
}

.tesouro-card h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem; /* 29px */
    font-weight: 600;
    color: var(--cor-ouro-destaque);
    margin-top: 0;
    margin-bottom: 10px;
}

.tesouro-card p {
    font-size: 0.95rem; /* 15px */
    color: var(--cor-texto-secundario);
    margin-bottom: 20px;
    flex-grow: 1; /* Faz o texto ocupar o espaço, empurrando o span para baixo */
}

.tesouro-card span {
    display: block;
    font-weight: bold;
    color: var(--cor-ouro-destaque);
    text-align: right;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.tesouro-card:hover span {
    color: var(--cor-ouro-hover);
}

/* Tag para teses 'quentes' (ex: Prova Digital) */
.tesouro-card.hotspot {
    border-color: var(--cor-hot);
}
.tesouro-card .hot-tag {
    position: absolute;
    top: -1px; /* Ajustado */
    right: -1px; /* Ajustado */
    background-color: var(--cor-hot);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 0 0 0 8px; /* Canto */
    text-align: center;
}
.tesouro-card.hotspot:hover {
     border-color: var(--cor-hot);
     box-shadow: 0 8px 20px rgba(255, 77, 77, 0.2);
}


/* --- 6. Rodapé --- */
.mapa-footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-card);
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
}
.mapa-footer p {
    margin: 5px 0;
}

/* --- 7. Media Queries (Responsividade) --- */
@media (max-width: 768px) {
    .mapa-header h1 {
        font-size: 2.8rem;
    }
    .mapa-header .subtitle {
        font-size: 1rem;
    }
    .territorio h2 {
        font-size: 2rem;
    }
    .tesouros-grid {
        /* Já está 100% responsivo, mas podemos forçar 1 coluna se quisermos */
        grid-template-columns: 1fr;
    }
}
/* =================================== */
/* === CÓDIGO DO MENU PRINCIPAL === */
/* =================================== */

:root {
    --cor-fundo-menu: #181818;
    --cor-borda-menu: #333;
}

.menu-principal {
    width: 100%;
    background-color: var(--cor-fundo-menu);
    border-bottom: 1px solid var(--cor-borda-menu);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.menu-container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para responsividade */
}

.menu-logo {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--cor-ouro-destaque);
    text-decoration: none;
    text-transform: uppercase;
    margin-right: 20px; /* Espaço para os links */
}

.menu-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-grow: 1; /* Faz os links ocuparem o espaço */
}

.menu-links li {
    margin-right: 25px;
}

.menu-links a {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #f0f0f0;
    text-decoration: none;
    font-size: 1rem;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

.menu-links a:hover {
    color: var(--cor-ouro-destaque);
    border-bottom-color: var(--cor-ouro-destaque);
}

.menu-cta {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    background-color: var(--cor-ouro-destaque);
    color: #111;
    padding: 10px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.3s, transform 0.3s;
    margin-left: 20px; /* Espaço */
}

.menu-cta:hover {
    background-color: #ffec8a;
    transform: scale(1.05);
}

.menu-oab {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: #aaa;
    margin-left: 20px;
    border-left: 1px solid #444;
    padding-left: 20px;
}

/* --- Responsividade do Menu (Simples) --- */
@media (max-width: 1100px) {
    .menu-container {
        flex-direction: column; /* Empilha tudo */
        gap: 20px; /* Espaçamento entre os itens empilhados */
    }

    .menu-logo { margin: 0; }
    .menu-links { order: 2; width: 100%; justify-content: center; }
    /* ATENÇÃO: Troque SEUNUMERO pelo seu WhatsApp */
    .menu-cta { order: 1; width: 90%; text-align: center; margin: 0; } 
    .menu-oab { order: 3; margin: 0; border: none; padding: 0; }
}

@media (max-width: 480px) {
    .menu-links {
        flex-direction: column; /* Empilha os links */
        align-items: center;
    }
    .menu-links li {
        margin: 8px 0;
    }
}
/* =================================== */
/* === CSS DO DIAGNÓSTICO LIVE === */
/* =================================== */

.diagnostico-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Espaço entre cada card de diagnóstico */
}

.diagnostico-card {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Para o grid interno */
    display: grid;
    /* Duas colunas: o 'problema' (35%) e a 'solução' (65%) */
    grid-template-columns: 35% 65%;
    transition: box-shadow 0.3s ease;
}

.diagnostico-card:hover {
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.1);
}

/* --- Coluna do Problema (A Dor) --- */
.diagnostico-problema {
    padding: 30px;
    background-color: #111; /* Um pouco mais escuro para destacar */
    border-right: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.diagnostico-problema span {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    color: var(--cor-ouro-destaque);
    text-transform: uppercase;
    font-weight: 600;
}

.diagnostico-problema p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem; /* Tamanho maior para a "dor" */
    color: var(--cor-texto-principal);
    line-height: 1.5;
    font-style: italic;
    margin-top: 10px;
}

/* --- Coluna da Solução (A Cura) --- */
.diagnostico-solucao {
    padding: 30px;
}

.diagnostico-solucao h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--cor-ouro-destaque);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 10px;
}

.diagnostico-solucao ol {
    margin-left: 20px;
    padding-left: 10px;
    margin-bottom: 25px;
}

.diagnostico-solucao li {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 15px;
    line-height: 1.6;
}

.diagnostico-solucao li strong {
    color: var(--cor-texto-principal);
    font-weight: 700;
}

.diagnostico-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; /* Para os links em telas menores */
}

.diagnostico-links a {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    transition: transform 0.2s ease;
}

/* Link Primário (Ver Tese) */
.diagnostico-links .link-tese {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-ouro-destaque);
    color: var(--cor-ouro-destaque);
}
.diagnostico-links .link-tese:hover {
    background-color: var(--cor-ouro-destaque);
    color: #111;
    transform: scale(1.05);
}

/* Link Secundário (Ver Modelo) */
.diagnostico-links .link-modelo {
    background-color: transparent;
    border: 1px solid var(--cor-texto-secundario);
    color: var(--cor-texto-secundario);
}
.diagnostico-links .link-modelo:hover {
    background-color: var(--cor-fundo-hover);
    color: var(--cor-texto-principal);
    transform: scale(1.05);
}


/* --- Responsividade do Card --- */
@media (max-width: 900px) {
    .diagnostico-card {
        /* Empilha as colunas */
        grid-template-columns: 1fr;
    }
    .diagnostico-problema {
        border-right: none;
        border-bottom: 1px solid var(--cor-borda);
        text-align: center;
    }
}
/* =================================== */
/* === SELO MÉTODO LIVE (COM TOOLTIP - MELHORIA) === */
/* =================================== */

.selo-metodo-live {
    margin-top: 50px;
    padding: 20px;
    background-color: var(--cor-fundo-card);
    border: 1px dashed var(--cor-ouro-destaque);
    border-radius: 8px;
    text-align: center;
    position: relative; /* Prerrequisito para o tooltip */
    cursor: help; /* Mostra que é um item interativo */
}

.selo-metodo-live span {
    font-family: 'Teko', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cor-ouro-destaque);
    display: block;
    margin-bottom: 10px;
}

.selo-metodo-live p {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    margin: 0;
    padding: 0;
    text-indent: 0; 
}

.selo-metodo-live strong {
    color: var(--cor-texto-principal);
}

/* O balão do tooltip (A MÁGICA) */
.selo-metodo-live[data-tooltip]:hover::after {
    content: attr(data-tooltip); /* Pega o texto do atributo */
    position: absolute;
    bottom: 100%; /* Mostra acima do selo */
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background-color: var(--cor-ouro-destaque);
    color: #111;
    font-family: 'Roboto', sans-serif; /* Garante a fonte correta */
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 5px;
    white-space: nowrap; /* Não quebra a linha */
    margin-bottom: 10px; /* Distância do selo */
    z-index: 10;
    opacity: 1;
}

/* A seta do tooltip */
.selo-metodo-live[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px; /* Posição da seta */
    border-width: 5px;
    border-style: solid;
    border-color: var(--cor-ouro-destaque) transparent transparent transparent;
    z-index: 10;
}

/* =================================== */
/* === ESTILO PARA IMAGENS DE DESTAQUE EM ARTIGOS === */
/* =================================== */

.artigo-destaque-imagem {
    width: 100%;
    max-width: 900px; /* Para não ficar muito grande em telas largas */
    margin: 40px auto; /* Centraliza a imagem e dá espaçamento */
    display: block; /* Garante que 'margin: auto' funcione */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Sombra para destacar */
    overflow: hidden; /* Garante que a imagem se encaixe na borda */
}

.artigo-destaque-imagem img {
    width: 100%;
    height: auto;
    display: block; /* Remove espaços extras abaixo da imagem */
}

/* Responsividade básica para o box-shadow em telas pequenas */
@media (max-width: 768px) {
    .artigo-destaque-imagem {
        margin: 20px auto;
        border-radius: 0; /* Remover borda arredondada em mobile para melhor aproveitamento */
        box-shadow: none; /* Remover sombra em mobile */
    }
}
/* =================================== */
/* === ESTILO QUADRO COMPARATIVO (ADIÇÃO) === */
/* =================================== */

.quadro-comparativo {
    width: 100%;
    margin: 30px auto;
    border-collapse: collapse; /* Tira bordas duplas */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.quadro-comparativo th,
.quadro-comparativo td {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
}

/* Cabeçalho do Quadro */
.quadro-comparativo th {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    color: var(--cor-ouro-destaque);
    background-color: var(--cor-fundo-card);
}

/* Linha de Categoria (Ex: "A Ameaça") */
.quadro-comparativo td:first-child {
    font-weight: bold;
    color: var(--cor-texto-principal);
    background-color: var(--cor-fundo-card);
    border-right: 1px solid var(--cor-borda);
    width: 25%;
}

/* Células de Conteúdo */
.quadro-comparativo td {
    background-color: #2a2a2a;
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Remove borda da última linha */
.quadro-comparativo tr:last-child td {
    border-bottom: none;
}
/* =================================== */
/* === AJUSTE DE RESPONSIVIDADE DO MENU (MOBILE FIRST) === */
/* =================================== */

@media (max-width: 1100px) {
    /* 1. Média para telas de tablet/notebooks menores */
    
    .menu-container {
        flex-direction: column; /* Empilha tudo em coluna */
        gap: 20px;
    }
    
    .menu-logo { 
        margin: 0; 
        font-size: 1.5rem; /* Logo um pouco menor */
    }

    /* O CTA (Emergência) fica no topo e 90% da largura, fácil de clicar */
    .menu-cta { 
        order: 1; 
        width: 90%; 
        text-align: center; 
        margin: 0;
        font-size: 1.1rem;
    } 
    
    /* Os links de navegação ficam empilhados abaixo do CTA */
    .menu-links { 
        order: 2; 
        width: 100%; 
        justify-content: space-around; /* Distribui os links */
        flex-wrap: wrap; /* Permite quebrar linha se necessário */
    }
    
    .menu-links li {
        margin: 5px 0; /* Espaçamento menor para caber mais */
    }
    
    .menu-oab { 
        order: 3; 
        margin: 10px 0 0 0; 
        border: none; 
        padding: 0; 
        width: 100%; 
        text-align: center;
    }
}

@media (max-width: 768px) {
    /* 2. Média para celulares (Menu mais compacto) */
    
    .menu-principal {
        padding: 10px 0;
    }

    .menu-container {
        flex-direction: row; /* Volta a alinhar horizontalmente */
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    .menu-logo {
        font-size: 1.3rem; /* Logo ainda menor */
        order: 1;
    }
    
    /* Esconde os links de navegação normais em celulares para focar no CTA */
    .menu-links { 
        display: none; 
    }
    
    .menu-oab {
        display: none; /* Esconde o OAB para economizar espaço */
    }

    /* O CTA (Emergência) ganha prioridade máxima e um tamanho menor */
    .menu-cta {
        order: 2;
        width: auto;
        padding: 8px 15px;
        font-size: 0.85rem;
        margin: 0;
        animation: none; /* Remove o pulso em mobile para não distrair */
    }
    
    /* Ajuste para o header principal da página (evitar quebra) */
    .mapa-header h1 {
        font-size: 2.2rem;
    }
}
/* =================================== */
/* === ESTILO PARA BLOCO DE CONSEQÊNCIAS (ADIÇÃO) === */
/* =================================== */

.bloco-consequencias {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 20px;
    margin: 40px auto;
}

.consequencia-card {
    background-color: #1e1e1e; /* Cor do fundo do card */
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 25px;
    height: 100%; /* Garante que as colunas fiquem na mesma altura */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.consequencia-card h4 {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.consequencia-card ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.consequencia-card li {
    font-size: 0.95rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 10px;
}

.consequencia-card.propria h4 {
    color: #34A853; /* Verde para 'Liberdade Plena' */
}

.consequencia-card.impropria h4 {
    color: #FFD700; /* Dourado para 'Liberdade Vigiada' */
}

@media (max-width: 768px) {
    .bloco-consequencias {
        grid-template-columns: 1fr; /* Empilha em celular */
    }
}
/* =================================== */
/* === ESTILO PARA TABELA DE PRESCRIÇÃO (ADIÇÃO) === */
/* =================================== */

.tabela-prescricao {
    width: 100%;
    margin: 30px auto;
    border-collapse: collapse; 
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.tabela-prescricao th,
.tabela-prescricao td {
    padding: 15px;
    text-align: left;
    border: 1px solid #444; 
}

/* Cabeçalho */
.tabela-prescricao th {
    font-family: 'Teko', sans-serif;
    font-size: 1.2rem;
    color: var(--cor-ouro-destaque);
    background-color: #333; /* Fundo mais escuro */
}

/* Corpo da tabela */
.tabela-prescricao td {
    background-color: var(--cor-fundo-card);
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
}

.tabela-prescricao tr:nth-child(even) td {
    background-color: #1e1e1e; /* Zebrado leve */
}

/* Coluna de Categoria */
.tabela-prescricao td:first-child {
    font-weight: bold;
    color: var(--cor-texto-principal);
    background-color: #2a2a2a;
}
/* =================================== */
/* === CSS DA CALCULADORA DE PRESCRIÇÃO === */
/* =================================== */

.calculadora-wrapper {
    background-color: var(--cor-fundo-card);
    padding: 30px 40px;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 800px;
    margin: 20px auto;
}
.form-calculadora {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.form-grupo {
    display: flex;
    flex-direction: column;
}
.form-grupo label {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 8px;
    font-weight: bold;
}
.form-grupo input {
    padding: 12px;
    background-color: #111;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-principal);
    font-size: 1rem;
    border-radius: 5px;
}
.form-grupo.full-width {
    grid-column: 1 / -1; /* Ocupa a largura total */
}
.botao-calcular {
    background-color: var(--cor-ouro-destaque);
    color: #111;
    border: none;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: 'Teko', sans-serif;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%; /* Garantir que ocupe o espaço */
}
.botao-calcular:hover {
    background-color: var(--cor-ouro-hover);
}

/* --- ESTILOS DO RESULTADO --- */
.resultado-wrapper {
    margin-top: 30px;
    padding: 25px;
    border: 1px dashed var(--cor-ouro-destaque);
    border-radius: 8px;
    background-color: rgba(255, 215, 0, 0.05);
}
.resultado-wrapper h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-ouro-destaque);
    margin-top: 0;
    text-transform: uppercase;
}
.resultado-tempo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--cor-texto-principal);
    text-align: center;
    background-color: #111;
    padding: 15px;
    border-radius: 5px;
    margin: 15px 0;
}
.resultado-positivo { 
    color: #2ecc71; /* Verde */
    font-weight: bold; 
    font-size: 1.1rem;
}
.resultado-negativo { 
    color: #e74c3c; /* Vermelho */
    font-weight: bold; 
    font-size: 1.1rem;
}
.resultado-erro {
    background-color: rgba(231, 76, 60, 0.1);
    border: 1px dashed #e74c3c;
    padding: 15px;
    border-radius: 5px;
    color: #e74c3c;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}
.aviso-calculo {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--cor-texto-secundario);
    margin-top: 20px;
}
.botao-cta-artigo.full-width { 
    width: 100%; 
    text-align: center; 
    margin-top: 15px; 
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
}

.aviso-legal {
    margin-top: 40px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
}

@media (max-width: 768px) {
    .form-calculadora { grid-template-columns: 1fr; }
}
/* =================================== */
/* === CSS DO QUESTIONÁRIO DE DIAGNÓSTICO === */
/* =================================== */

.diag-wrapper {
    background-color: var(--cor-fundo-card);
    padding: 30px 40px;
    border-radius: 8px;
    border-top: 4px solid var(--cor-ouro-destaque);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    margin: 20px auto 40px auto;
}

.diag-wrapper h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    text-align: center;
}

.diag-step {
    margin-bottom: 20px;
}

.diag-step label {
    font-size: 1.1rem;
    color: var(--cor-texto-principal);
    margin-bottom: 10px;
    display: block;
    font-weight: bold;
}

.diag-step select {
    width: 100%;
    padding: 12px;
    background-color: #111;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-principal);
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
}

/* Esconde todos os passos por padrão, exceto o primeiro */
#diag-step-2, #diag-step-3 {
    display: none;
}

/* Estilo para os botões de resultado */
.diag-resultado-bloco {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    display: none; /* Começa oculto */
}

.diag-resultado-bloco.emergencia {
    background-color: rgba(230, 57, 70, 0.1);
    border: 2px dashed var(--cor-vermelho-emergencia);
}
.diag-resultado-bloco.complexo {
    background-color: rgba(255, 215, 0, 0.05);
    border: 2px dashed var(--cor-ouro-destaque);
}
.diag-resultado-bloco.social {
    background-color: rgba(52, 168, 83, 0.1);
    border: 2px dashed #34A853;
}

.diag-resultado-bloco h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    margin-top: 0;
}
.diag-resultado-bloco.emergencia h3 { color: var(--cor-vermelho-emergencia); }
.diag-resultado-bloco.complexo h3 { color: var(--cor-ouro-destaque); }
.diag-resultado-bloco.social h3 { color: #34A853; }

.diag-resultado-bloco p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 20px;
}
/* =================================== */
/* === CSS DA "MÁGICA VISUAL" (ANIMAÇÃO) === */
/* =================================== */

/* Por padrão, todos os nossos alvos começam
  um pouco transparentes e "para baixo"
*/
.tesouro-card, .diagnostico-card, .consequencia-card, .calculadora-wrapper {
    opacity: 0;
    transform: translateY(30px); /* Começa 30px abaixo */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Quando o script 'animacao.js' adiciona a classe 'visivel',
  o card se torna 100% opaco e sobe para a posição original.
*/
.tesouro-card.visivel,
.diagnostico-card.visivel,
.consequencia-card.visivel,
.calculadora-wrapper.visivel {
    opacity: 1;
    transform: translateY(0);
}
/* =================================== */
/* === CSS LAZY LOAD E TOOLTIP (MELHORIAS) === */
/* =================================== */

/* =================================== */
/* === CSS LAZY LOAD v2.0 (UNIVERSAL) === */
/* (Este é o "conserto" de mestre) */
/* =================================== */
img.lazy-load {
    opacity: 0; /* Começa 100% invisível */
    transition: opacity 0.5s ease-in-out;
}
img.lazy-load.loaded {
    opacity: 1; /* O 'performance.js' adiciona 'loaded' e a imagem aparece */
}

/* 2. CSS PARA O TOOLTIP (REFORÇO DE MARCA) */
.selo-metodo-live {
    position: relative; /* Prerrequisito para o tooltip */
    cursor: help; /* Mostra que é um item interativo */
}

/* O balão do tooltip */
.selo-metodo-live[data-tooltip]:hover::after {
    content: attr(data-tooltip); /* Pega o texto do atributo */
    position: absolute;
    bottom: 100%; /* Mostra acima do selo */
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background-color: var(--cor-ouro-destaque);
    color: #111;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 5px;
    white-space: nowrap; /* Não quebra a linha */
    margin-bottom: 10px; /* Distância do selo */
    z-index: 10;
    opacity: 1;
}

/* A seta do tooltip */
.selo-metodo-live[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px; /* Posição da seta */
    border-width: 5px;
    border-style: solid;
    border-color: var(--cor-ouro-destaque) transparent transparent transparent;
    z-index: 10;
}
/* =================================== */
/* === CSS DO FILTRO DO ARSENAL (codelei) === */
/* =================================== */

.filtro-arsenal {
    width: 100%;
    margin-bottom: 40px;
    padding: 15px;
    background-color: var(--cor-fundo-card);
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--cor-borda);
}

/* O botão do filtro */
.filtro-arsenal button {
    font-family: 'Teko', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid #333;
    background-color: #2a2a2a;
    color: var(--cor-texto-secundario);
    padding: 8px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Efeito hover */
.filtro-arsenal button:hover {
    background-color: var(--cor-fundo-hover);
    color: var(--cor-texto-principal);
    border-color: #555;
}

/* O botão "ativo" que está selecionado */
.filtro-arsenal button.ativo {
    background-color: var(--cor-ouro-destaque);
    color: #111;
    border-color: var(--cor-ouro-destaque);
}

/* A classe mágica que o JavaScript vai usar para esconder os cards */
.tesouro-card.filtro-oculto {
    display: none;
}
/* =================================== */
/* === CSS DO "GOOGLE INTERNO" (BUSCA) === */
/* =================================== */

.busca-live-wrapper {
    width: 100%;
    margin-bottom: 25px; /* Espaço antes dos filtros/conteúdo */
    position: relative;
}

#busca-live-input {
    width: 100%;
    padding: 18px 20px 18px 55px; /* Espaço para o ícone */
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--cor-texto-principal);
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
    transition: border-color 0.3s;
}

#busca-live-input:focus {
    outline: none;
    border-color: var(--cor-ouro-destaque);
}

/* Ícone de Lupa (SVG embutido) */
.busca-live-wrapper::before {
    content: '🔍'; /* Emoji de lupa */
    font-size: 1.5rem;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    z-index: 2;
}


/* A nova classe de ocultar do script de busca */
/* Ela funciona em conjunto com a .filtro-oculto */
.search-oculto {
    display: none !important;
}
/* =================================== */
/* === CSS DO "ÍNDICE MÁGICO" (TOC) === */
/* =================================== */

.indice-magico {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-ouro-destaque);
    border-radius: 8px;
    padding: 25px 30px;
    margin: 30px auto; /* Centraliza e dá espaço */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.indice-magico-titulo {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--cor-ouro-destaque);
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.indice-magico-lista {
    list-style: none;
    padding-left: 0;
    margin: 0;
    max-height: 250px; /* Limita a altura em artigos gigantes */
    overflow-y: auto; /* Adiciona scroll se for muito grande */
}

.indice-magico-lista li {
    margin-bottom: 10px;
}

.indice-magico-lista a {
    color: var(--cor-texto-principal);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    display: block;
    padding: 4px 0;
    transition: color 0.2s, transform 0.2s;
}

.indice-magico-lista a:hover {
    color: var(--cor-ouro-hover);
    transform: translateX(5px);
}

/* A Mágica da Hierarquia */
/* Links de H2 (Títulos Principais) */
.indice-magico-lista li.toc-h2 a {
    font-weight: bold;
}

/* Links de H3 (Subtítulos) */
.indice-magico-lista li.toc-h3 a {
    padding-left: 20px; /* Indentação automática */
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--cor-texto-secundario);
}
.indice-magico-lista li.toc-h3 a:hover {
    color: var(--cor-ouro-hover);
}
/* =================================== */
/* === CSS DO "SELO DE CONFORMIDADE" (LGPD) === */
/* =================================== */

#lgpd-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--cor-fundo-card); /* Reusa o tema */
    border-top: 2px solid var(--cor-ouro-destaque);
    padding: 20px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    z-index: 2000; /* Acima de tudo */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transform: translateY(0);
    opacity: 1;
    box-sizing: border-box;
}

/* Classe para animar a saída */
#lgpd-banner.oculto {
    transform: translateY(100%);
    opacity: 0;
}

.lgpd-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Limita a largura do conteúdo */
    margin: 0 auto;
    gap: 20px;
}

#lgpd-banner p {
    margin: 0;
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
    line-height: 1.5;
    flex-grow: 1; /* Faz o texto ocupar o espaço */
}

#lgpd-banner a {
    color: var(--cor-ouro-destaque);
    font-weight: bold;
    text-decoration: underline;
}

#lgpd-banner button {
    background-color: var(--cor-ouro-destaque);
    color: #111;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap; /* Não quebra o botão */
}

#lgpd-banner button:hover {
    background-color: var(--cor-ouro-hover);
}

/* Responsividade do banner */
@media (max-width: 768px) {
    .lgpd-container {
        flex-direction: column; /* Empilha em celular */
        text-align: center;
    }
    #lgpd-banner button {
        width: 100%;
        margin-top: 15px;
    }
}
/* =================================== */
/* === CSS ARTIGOS RELACIONADOS (codelei) === */
/* =================================== */

.related-wrapper {
    margin-top: 60px; /* Espaço após o Selo Live */
    border-top: 1px solid var(--cor-borda);
    padding-top: 40px;
}

.related-wrapper h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--cor-texto-principal);
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--cor-ouro-destaque);
    padding-bottom: 15px;
}
/* =================================== */
/* === CSS DO FAQ (SANFONA) (codelei) === */
/* =================================== */

.faq-wrapper {
    max-width: 900px;
    margin: 40px auto;
}

.faq-item {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* Essencial para a animação da sanfona */
}

/* O "Botão" da Pergunta */
.faq-pergunta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    background-color: var(--cor-fundo-hover);
    border: none;
    width: 100%;
    text-align: left;
}

.faq-pergunta h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
    color: var(--cor-texto-principal);
    margin: 0;
    padding-right: 20px; /* Espaço para o ícone */
}

/* O ícone "+" */
.faq-pergunta::after {
    content: '+';
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--cor-ouro-destaque);
    transition: transform 0.3s ease;
}

/* A Resposta (Oculta por padrão) */
.faq-resposta {
    max-height: 0; /* Começa fechado */
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s ease-out;
    padding: 0 25px; /* Padding zero quando fechado */
}

.faq-resposta p {
    color: var(--cor-texto-secundario);
    font-size: 1rem;
    line-height: 1.7;
    padding-top: 0px; /* Padding será adicionado quando abrir */
    padding-bottom: 0px;
    margin: 0;
}

.faq-resposta a {
    color: var(--cor-ouro-hover);
    font-weight: bold;
}

/* A MÁGICA: Quando o item tem a classe "ativa" */

.faq-item.ativa .faq-pergunta::after {
    transform: rotate(45deg); /* Transforma o '+' em 'x' */
    color: var(--cor-vermelho-emergencia);
}

.faq-item.ativa .faq-resposta {
    max-height: 500px; /* Altura "mágica" para a animação */
    padding: 10px 25px 20px 25px; /* Padding para o texto respirar */
}
/* =================================== */
/* === CSS DO INDICADOR "LIVE" (FOCO 8) === */
/* =================================== */

/* 1. Define a cor verde "Live" */
:root {
    --cor-verde-live: #00e676;
}

/* 2. O Estilo do Botão (para ele se adaptar) */
#botao-emergencia-live {
    /* Garante que o indicador fique alinhado */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 3. A "Luz Verde" (O Ponto) */
.online-indicator {
    width: 10px;
    height: 10px;
    background-color: var(--cor-verde-live);
    border-radius: 50%;
    margin-right: 8px;
    
    /* A Mágica: A animação de pulso */
    animation: pulse-live 1.5s infinite ease-in-out;
    
    /* Sombra para dar profundidade */
    box-shadow: 0 0 5px var(--cor-verde-live), 0 0 10px var(--cor-verde-live);
}

/* 4. O Texto (Opcional) */
.live-text {
    margin-right: 5px;
    font-weight: bold;
    font-size: 0.9em;
    color: #fff; /* Cor do texto "LIVE" */
}

/* 5. A Animação de Pulso */
@keyframes pulse-live {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}
/* =================================== */
/* === CSS DO "ALERTA DE SAÍDA" (FOCO 9) === */
/* =================================== */

/* O Fundo Escuro (Overlay) */
#exit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Mais escuro */
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInModal 0.4s ease-out;
}

/* A Caixa (O Modal) */
.exit-modal-box {
    position: relative;
    background-color: var(--cor-fundo-card);
    padding: 40px;
    border-radius: 8px;
    border-top: 5px solid var(--cor-vermelho-emergencia); /* Destaque de urgência */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    max-width: 500px;
    width: 90%;
    text-align: center;
    animation: zoomInModal 0.4s ease-out;
}

.exit-modal-box h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    color: var(--cor-vermelho-emergencia);
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

.exit-modal-box p {
    color: var(--cor-texto-principal);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* O Botão de Fechar (X) */
.exit-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.5rem;
    color: var(--cor-texto-secundario);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.exit-modal-close:hover {
    color: var(--cor-vermelho-emergencia);
}

/* O Botão de Ação (CTA) */
.exit-modal-button {
    display: block;
    width: 100%;
    padding: 15px;
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    background-color: var(--cor-ouro-destaque);
    color: #111;
    transition: all 0.3s ease;
    animation: pulse 1.5s infinite; /* Reusa a animação do botão de emergência */
}
.exit-modal-button:hover {
    background-color: var(--cor-ouro-hover);
    transform: scale(1.02);
}

/* Animações de Entrada */
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes zoomInModal {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Animação de Saída */
#exit-modal-overlay.oculto {
    opacity: 0;
    transition: opacity 0.4s ease;
}
#exit-modal-overlay.oculto .exit-modal-box {
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.4s ease;
}
/* =================================== */
/* === CSS DA INDEX.HTML (CONSERTO) === */
/* =================================== */

/* 1. Hero Slider (Banner) */
.hero-slider {
    position: relative;
    width: 100%;
    height: 60vh; /* Altura do banner */
    background-color: #222;
    overflow: hidden;
}
.slider-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre o espaço */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.slider-image.active {
    opacity: 1;
}
/* Camada escura sobre o banner */
.hero-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
    z-index: 1;
}
.hero-text-overlay {
    position: absolute;
    bottom: 10%;
    left: 5%;
    z-index: 2;
    color: #fff;
    max-width: 600px;
}
.hero-text-overlay h1 {
    font-family: 'Teko', sans-serif;
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    color: var(--cor-ouro-destaque);
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.hero-text-overlay h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: #f0f0f0;
    max-width: 500px;
}

/* 2. Triagem (Os 3 Cards) */
.triagem-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--cor-borda);
    border-bottom: 1px solid var(--cor-borda);
}
.card-triagem {
    background-color: var(--cor-fundo-escuro);
    padding: 30px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.card-triagem:hover {
    background-color: var(--cor-fundo-hover);
}
.card-triagem svg {
    width: 40px;
    height: 40px;
    stroke: var(--cor-ouro-destaque);
    stroke-width: 1.5;
    fill: none;
    margin-bottom: 15px;
}
.card-triagem h2 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-texto-principal);
    margin: 0 0 10px 0;
}
.card-triagem p {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0;
}

/* 3. Bloco Autoridade */
.bloco-autoridade {
    background-color: var(--cor-fundo-card);
    padding: 60px 20px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.autoridade-flex {
    display: flex;
    align-items: center;
    gap: 40px;
}
.autoridade-foto {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--cor-ouro-destaque);
}
.autoridade-texto h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    color: var(--cor-texto-principal);
    margin: 0;
}
.autoridade-texto .oab {
    font-size: 1rem;
    font-weight: bold;
    color: var(--cor-ouro-destaque);
    margin-bottom: 20px;
}
.autoridade-texto p {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.7;
}

/* 4. Bloco Artigos em Destaque (reusa .tesouro-card) */
.bloco-prova {
    padding: 60px 20px 80px 20px;
}
.titulo-secao {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    color: var(--cor-texto-principal);
    text-align: center;
    margin: 0 0 15px 0;
}
.subtitulo-secao {
    font-size: 1.2rem;
    color: var(--cor-texto-secundario);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}
/* Reestiliza o card de artigo para o tema escuro */
.card-artigo {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Mudança para flex */
    flex-direction: column;
}
.card-artigo:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.card-artigo-imagem { /* [NOVO] Estilo para a imagem real */
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.card-artigo-placeholder { /* [ANTIGO] Placeholder (pode ser removido) */
    display: none;
}
.card-artigo-texto {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz o texto ocupar o espaço */
}
.card-artigo-texto h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 10px 0;
}
.card-artigo-texto p {
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex-grow: 1; /* Empurra o "leia mais" para baixo */
}
.link-leia-mais {
    font-weight: bold;
    color: var(--cor-ouro-destaque);
}
.prova-flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 5. Bloco Prova Social (Avaliações) */
.bloco-prova-social {
    background-color: var(--cor-fundo-card);
    padding: 60px 20px 80px 20px;
    border-top: 1px solid var(--cor-borda);
}
.prova-social-flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.card-avaliacao {
    background-color: var(--cor-fundo-escuro);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
}
.card-avaliacao .estrelas {
    font-size: 1.2rem;
    color: var(--cor-ouro-destaque);
    margin-bottom: 15px;
}
.card-avaliacao blockquote {
    font-size: 1rem;
    color: var(--cor-texto-principal);
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
    font-style: italic;
    line-height: 1.6;
}
.card-avaliacao .autor {
    font-weight: bold;
    color: var(--cor-texto-secundario);
}

/* 6. Responsividade da Index */
@media (max-width: 900px) {
    .hero-text-overlay h1 { font-size: 2.5rem; }
    .autoridade-flex { flex-direction: column; text-align: center; }
    .triagem-container { grid-template-columns: 1fr; }
    .prova-flex { grid-template-columns: 1fr; }
    .prova-social-flex { grid-template-columns: 1fr; }
}
/* =================================== */
/* === CSS DO "RODAPÉ DE MESTRE" === */
/* =================================== */

.footer-mestre {
    background-color: #0a0a0a; /* Mais escuro que o fundo */
    color: var(--cor-texto-secundario);
    padding: 60px 0 20px 0;
    border-top: 4px solid var(--cor-ouro-destaque);
    font-family: 'Roboto', sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr; /* 3 colunas */
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px 40px 40px;
    border-bottom: 1px solid var(--cor-borda);
}

.footer-coluna h4 {
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
    color: var(--cor-texto-principal);
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.footer-coluna p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.footer-coluna ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-coluna li {
    margin-bottom: 12px;
}

.footer-coluna a {
    color: var(--cor-texto-secundario);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-coluna a:hover {
    color: var(--cor-ouro-hover);
    text-decoration: underline;
}

.footer-copyright {
    text-align: center;
    padding: 20px 40px 0 40px;
    font-size: 0.85rem;
}

/* Responsividade do Rodapé */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr; /* Empilha as colunas */
    }
}
/* =================================== */
/* === CSS DO "DIAGNÓSTICO INTELIGENTE" (FOCO 11) === */
/* =================================== */

/* O Wrapper da Busca de Diagnóstico */
.diag-busca-wrapper {
    width: 100%;
    margin: 40px auto 40px auto;
    max-width: 900px;
    padding: 0 20px;
    box-sizing: border-box;
}

#diag-busca-input {
    width: 100%;
    padding: 20px 25px 20px 60px; /* Espaço para o ícone */
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--cor-texto-principal);
    background-color: var(--cor-fundo-card);
    border: 2px solid var(--cor-borda);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
    transition: border-color 0.3s;
    font-family: 'Roboto', sans-serif;
}

#diag-busca-input:focus {
    outline: none;
    border-color: var(--cor-ouro-destaque);
}

/* Ícone de "Cérebro/Diagnóstico" */
.diag-busca-wrapper::before {
    content: '🧠'; /* Emoji de cérebro */
    font-size: 2rem;
    position: absolute;
    left: 35px; /* (Ajuste para o padding da caixa) */
    top: 58px; /* (Ajuste para o padding da caixa) */
    opacity: 0.6;
    z-index: 2;
}

/* Container dos Resultados */
#diag-resultados {
    max-width: 900px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

/* O "Card de Diagnóstico" (Reutilizando e melhorando o .diagnostico-card) */
/* (O .diagnostico-card já deve existir, mas estas são melhorias) */
.diagnostico-card {
    grid-template-columns: 100%; /* Muda para coluna única */
    margin-bottom: 25px;
    border: 1px solid var(--cor-ouro-destaque);
}

.diagnostico-problema {
    background-color: var(--cor-fundo-hover);
    border-right: none;
    border-bottom: 1px solid var(--cor-borda);
}

.diagnostico-problema span {
    font-size: 1.2rem;
    color: var(--cor-texto-secundario);
}
.diagnostico-problema p {
    font-size: 1.5rem;
    color: var(--cor-ouro-destaque);
    font-style: normal;
}

.diagnostico-solucao ol {
    border-left: 3px solid var(--cor-borda);
    padding-left: 15px;
    margin-left: 0;
}
.diagnostico-solucao li {
    font-size: 1rem;
    line-height: 1.7;
}

/* (O .diagnostico-links e seus botões já estão estilizados) */

/* ========================================= */
/* === WIZARD DA CALCULADORA (CSS V2) === */
/* ========================================= */

.calc-wizard-wrapper {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.calc-step {
    display: none; /* Escondido por padrão, JS mostra */
    animation: fadeIn 0.5s;
}
/* Mostra o primeiro passo */
#step-1-tipo { display: block; }

.calc-step h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2rem;
    color: var(--cor-texto-principal);
    text-align: center;
    margin-bottom: 30px;
}

.calc-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.calc-choice-btn {
    background-color: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.calc-choice-btn span {
    font-size: 0.9rem;
    color: #888;
    font-weight: normal;
    margin-top: 10px;
}

.calc-choice-btn:hover {
    background-color: var(--cor-ouro-destaque);
    color: #000;
    border-color: var(--cor-ouro-destaque);
}
.calc-choice-btn:hover span { color: #333; }

.form-calculadora-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-calculadora-v2 input {
    width: 100%;
    padding: 12px;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    border-radius: 4px;
}

@media(max-width: 768px) {
    .calc-choices { grid-template-columns: 1fr; }
    .form-calculadora-v2 { grid-template-columns: 1fr; }
}
/* =================================== */
/* === CSS DO "ROTEIRO DA DEFESA" (SOBRE-MIM) === */
/* =================================== */

.roteiro-wrapper {
    background-color: var(--cor-fundo-card); /* Reusa o fundo */
    border-top: 1px solid var(--cor-borda);
    padding: 60px 20px 80px 20px;
}

.roteiro-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* A linha do tempo vertical */
    border-left: 3px solid var(--cor-ouro-destaque);
    padding-left: 40px; /* Espaço para a linha */
}

/* Cada passo do roteiro */
.roteiro-passo {
    position: relative;
    margin-bottom: 50px;
    padding: 20px;
    background-color: var(--cor-fundo-escuro);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
}

/* O "Ponto" na linha do tempo */
.roteiro-passo::before {
    content: ''; /* O ponto */
    position: absolute;
    top: 30px;
    left: -51.5px; /* (padding 40px + metade da borda 3px + metade do ponto 8px) */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--cor-ouro-destaque);
    border: 3px solid var(--cor-fundo-card);
    z-index: 1;
}

.roteiro-passo h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 10px 0;
    text-transform: uppercase;
}
.roteiro-passo h3 span {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    font-family: 'Roboto', sans-serif;
    display: block;
    font-weight: 300;
}

.roteiro-passo p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.7;
    margin: 0;
}


/* Tooltip para os hotspots (dica de mestre) */
.arvore-mapa area:hover {
    cursor: pointer;
}
/* =================================== */
/* === CSS DO "ROTEIRO DA DEFESA" (SOBRE-MIM) === */
/* (100% CÓDIGO - SEM IMAGEM) */
/* =================================== */

.roteiro-wrapper {
    background-color: var(--cor-fundo-card); /* Reusa o fundo */
    border-top: 1px solid var(--cor-borda);
    padding: 60px 20px 80px 20px;
}

.roteiro-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* A linha do tempo vertical */
    border-left: 3px solid var(--cor-ouro-destaque);
    padding-left: 40px; /* Espaço para a linha */
}

/* Cada passo do roteiro */
.roteiro-passo {
    position: relative;
    margin-bottom: 50px;
    padding: 25px;
    background-color: var(--cor-fundo-escuro);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.roteiro-passo:hover {
    border-color: var(--cor-ouro-hover);
    transform: translateX(5px); /* Efeito "Live" */
}

/* O "Ponto" na linha do tempo */
.roteiro-passo::before {
    content: ''; /* O ponto */
    position: absolute;
    top: 30px;
    left: -53.5px; /* (padding 40px + metade da borda 3px + metade do ponto 10px) */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--cor-ouro-destaque);
    border: 4px solid var(--cor-fundo-card);
    z-index: 1;
    transition: all 0.3s ease;
}

.roteiro-passo:hover::before {
    background-color: var(--cor-ouro-hover);
    transform: scale(1.1);
}

.roteiro-passo h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 10px 0;
    text-transform: uppercase;
}
.roteiro-passo h3 span {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    font-family: 'Roboto', sans-serif;
    display: block;
    font-weight: 300;
}

.roteiro-passo p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.7;
    margin: 0;
}
/* =================================== */
/* === CSS DO "ROTEIRO DA DEFESA" (SOBRE-MIM) === */
/* (100% CÓDIGO - SEM IMAGEM) */
/* =================================== */

.roteiro-wrapper {
    background-color: var(--cor-fundo-card); /* Reusa o fundo */
    border-top: 1px solid var(--cor-borda);
    padding: 60px 20px 80px 20px;
}

.roteiro-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* A linha do tempo vertical */
    border-left: 3px solid var(--cor-ouro-destaque);
    padding-left: 40px; /* Espaço para a linha */
}

/* Cada passo do roteiro */
.roteiro-passo {
    position: relative;
    margin-bottom: 50px;
    padding: 25px;
    background-color: var(--cor-fundo-escuro);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.roteiro-passo:hover {
    border-color: var(--cor-ouro-hover);
    transform: translateX(5px); /* Efeito "Live" */
}

/* O "Ponto" na linha do tempo */
.roteiro-passo::before {
    content: ''; /* O ponto */
    position: absolute;
    top: 30px;
    left: -53.5px; /* (padding 40px + metade da borda 3px + metade do ponto 10px) */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--cor-ouro-destaque);
    border: 4px solid var(--cor-fundo-card);
    z-index: 1;
    transition: all 0.3s ease;
}

.roteiro-passo:hover::before {
    background-color: var(--cor-ouro-hover);
    transform: scale(1.1);
}

.roteiro-passo h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 10px 0;
    text-transform: uppercase;
}
.roteiro-passo h3 span {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    font-family: 'Roboto', sans-serif;
    display: block;
    font-weight: 300;
}

.roteiro-passo p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.7;
    margin: 0;
}
/* =================================== */
/* === CSS DO "HERO VIDEO" (INDEX) === */
/* =================================== */

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre todo o espaço do container */
    transform: translate(-50%, -50%);
    z-index: 0; /* Fica atrás do texto */
    opacity: 1; /* Garante que o vídeo apareça */
}
/* =================================== */
/* === CSS DA INDEX.HTML (CONSERTO) === */
/* =================================== */

/* 1. Hero Slider (Banner) */
.hero-slider {
    position: relative;
    width: 100%;
    height: 60vh; /* Altura do banner */
    background-color: #222;
    overflow: hidden;
}
.slider-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre o espaço */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.slider-image.active {
    opacity: 1;
}
/* Camada escura sobre o banner */
.hero-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
    z-index: 1;
}
.hero-text-overlay {
    position: absolute;
    bottom: 10%;
    left: 5%;
    z-index: 2;
    color: #fff;
    max-width: 600px;
}
.hero-text-overlay h1 {
    font-family: 'Teko', sans-serif;
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    color: var(--cor-ouro-destaque);
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.hero-text-overlay h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: #f0f0f0;
    max-width: 500px;
}

/* 2. Triagem (Os 3 Cards) */
.triagem-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--cor-borda);
    border-bottom: 1px solid var(--cor-borda);
}
.card-triagem {
    background-color: var(--cor-fundo-escuro);
    padding: 30px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.card-triagem:hover {
    background-color: var(--cor-fundo-hover);
}
.card-triagem svg {
    width: 40px;
    height: 40px;
    stroke: var(--cor-ouro-destaque);
    stroke-width: 1.5;
    fill: none;
    margin-bottom: 15px;
}
.card-triagem h2 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-texto-principal);
    margin: 0 0 10px 0;
}
.card-triagem p {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0;
}

/* 3. Bloco Autoridade */
.bloco-autoridade {
    background-color: var(--cor-fundo-card);
    padding: 60px 20px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.autoridade-flex {
    display: flex;
    align-items: center;
    gap: 40px;
}
.autoridade-foto {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--cor-ouro-destaque);
}
.autoridade-texto h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    color: var(--cor-texto-principal);
    margin: 0;
}
.autoridade-texto .oab {
    font-size: 1rem;
    font-weight: bold;
    color: var(--cor-ouro-destaque);
    margin-bottom: 20px;
}
.autoridade-texto p {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.7;
}

/* 4. Bloco Artigos em Destaque (reusa .tesouro-card) */
.bloco-prova {
    padding: 60px 20px 80px 20px;
}
.titulo-secao {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    color: var(--cor-texto-principal);
    text-align: center;
    margin: 0 0 15px 0;
}
.subtitulo-secao {
    font-size: 1.2rem;
    color: var(--cor-texto-secundario);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}
/* Reestiliza o card de artigo para o tema escuro */
.card-artigo {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Mudança para flex */
    flex-direction: column;
}
.card-artigo:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.card-artigo-imagem { /* [NOVO] Estilo para a imagem real */
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.card-artigo-placeholder { /* [ANTIGO] Placeholder (pode ser removido) */
    display: none;
}
.card-artigo-texto {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz o texto ocupar o espaço */
}
.card-artigo-texto h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 10px 0;
}
.card-artigo-texto p {
    color: var(--cor-texto-secundario);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex-grow: 1; /* Empurra o "leia mais" para baixo */
}
.link-leia-mais {
    font-weight: bold;
    color: var(--cor-ouro-destaque);
}
.prova-flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 5. Bloco Prova Social (Avaliações) */
.bloco-prova-social {
    background-color: var(--cor-fundo-card);
    padding: 60px 20px 80px 20px;
    border-top: 1px solid var(--cor-borda);
}
.prova-social-flex {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.card-avaliacao {
    background-color: var(--cor-fundo-escuro);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
}
.card-avaliacao .estrelas {
    font-size: 1.2rem;
    color: var(--cor-ouro-destaque);
    margin-bottom: 15px;
}
.card-avaliacao blockquote {
    font-size: 1rem;
    color: var(--cor-texto-principal);
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
    font-style: italic;
    line-height: 1.6;
}
.card-avaliacao .autor {
    font-weight: bold;
    color: var(--cor-texto-secundario);
}

/* 6. Responsividade da Index */
@media (max-width: 900px) {
    .hero-text-overlay h1 { font-size: 2.5rem; }
    .autoridade-flex { flex-direction: column; text-align: center; }
    .triagem-container { grid-template-columns: 1fr; }
    .prova-flex { grid-template-columns: 1fr; }
    .prova-social-flex { grid-template-columns: 1fr; }
}
/* =================================== */
/* === CSS DA PÁGINA DO "WIDGET" (FOCO 12) === */
/* =================================== */
.widget-demo-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 40px auto;
}

.widget-demo-texto {
    padding: 20px;
}
.widget-demo-texto h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 15px 0;
}
.widget-demo-texto p {
    color: var(--cor-texto-secundario);
    line-height: 1.7;
    margin-bottom: 20px;
}

.widget-demo-preview {
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    overflow: hidden;
    height: 600px; /* Altura do iframe */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.widget-demo-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.widget-codigo-wrapper {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    padding: 30px;
    margin: 40px 0;
    border-radius: 8px;
}
.widget-codigo-wrapper h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2rem;
    color: var(--cor-texto-principal);
    margin-top: 0;
    text-align: center;
}
.widget-codigo-wrapper textarea {
    width: 100%;
    height: 120px;
    background-color: #111;
    border: 1px dashed var(--cor-borda);
    color: #f1f1f1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    padding: 15px;
    box-sizing: border-box; /* Importante */
    resize: none;
}
.widget-codigo-wrapper textarea:focus {
    outline: 2px solid var(--cor-ouro-destaque);
}

@media (max-width: 900px) {
    .widget-demo-wrapper {
        grid-template-columns: 1fr; /* Empilha */
    }
}
/* =================================== */
/* === CSS DO "PAINEL DO CLIENTE" (FOCO 13) === */
/* =================================== */

/* O grid principal (Linha do Tempo + Widgets) */
.painel-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Coluna da timeline (2/3) e coluna dos widgets (1/3) */
    gap: 30px;
    max-width: 1300px;
    margin: 40px auto;
}

/* --- Coluna 1: A Linha do Tempo --- */
.timeline-widget {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 30px;
}
.timeline-widget h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    color: var(--cor-texto-principal);
    margin: 0 0 5px 0;
    text-transform: uppercase;
}
.timeline-widget .subtitulo-secao {
    text-align: left;
    margin: 0 0 30px 0;
    font-size: 1.1rem;
}

.timeline-container {
    position: relative;
    /* A linha vertical (100% código) */
    border-left: 3px solid var(--cor-borda);
    padding-left: 40px;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

/* O "Ponto" na linha (100% código) */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -52.5px; /* (padding 40px + metade da borda 3px + metade do ponto 10px) */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--cor-texto-secundario);
    border: 4px solid var(--cor-fundo-card);
    z-index: 1;
}
/* [MELHORIA] Destaca o item "ativo" */
.timeline-item.ativo::before {
    background-color: var(--cor-ouro-destaque);
    box-shadow: 0 0 15px var(--cor-ouro-destaque);
}

.timeline-icon {
    font-size: 1.5rem;
    margin-right: 10px;
}

.timeline-content h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-texto-principal);
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
}
.timeline-content p {
    font-size: 0.95rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0;
}
.timeline-status {
    font-size: 0.8rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: auto;
    text-transform: uppercase;
}
.timeline-status.concluido {
    background-color: #34A853; /* Verde */
    color: white;
}
.timeline-status.ativo {
    background-color: var(--cor-ouro-destaque);
    color: #111;
}
.timeline-status.pendente {
    background-color: var(--cor-borda);
    color: var(--cor-texto-secundario);
}

/* --- Coluna 2: Os Widgets Laterais --- */
.widgets-laterais {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.widget-box {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 25px;
}
.widget-box h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-texto-principal);
    margin: 0 0 20px 0;
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}
.widget-box h3 svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    stroke: var(--cor-ouro-destaque);
    stroke-width: 2;
}

/* Estilo "Google Drive" */
.gdrive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gdrive-item {
    margin-bottom: 15px;
}
.gdrive-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    transition: color 0.3s;
}
.gdrive-item a:hover {
    color: var(--cor-ouro-hover);
}
.gdrive-item svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0; /* Não encolhe o ícone */
}

/* Estilo "Google Agenda" */
.gagenda-evento {
    background-color: var(--cor-fundo-escuro);
    border-left: 4px solid var(--cor-ouro-destaque);
    padding: 15px;
    border-radius: 4px;
}
.gagenda-evento .data {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--cor-texto-secundario);
    margin: 0 0 5px 0;
}
.gagenda-evento .titulo {
    font-size: 1.1rem;
    color: var(--cor-texto-principal);
    font-weight: bold;
    margin: 0 0 10px 0;
}
.gagenda-evento a {
    font-size: 0.9rem;
}

/* Responsividade do Painel */
@media (max-width: 900px) {
    .painel-wrapper {
        grid-template-columns: 1fr; /* Empilha */
    }
}
/* =================================== */
/* === CSS DO "MENU BÚSSOLA" (FOCO 15) === */
/* =================================== */

.menu-links li a.menu-ativo {
    color: var(--cor-ouro-destaque);
    font-weight: 700;
    /* Um "sublinhado" genial */
    box-shadow: 0 2px 0 var(--cor-ouro-destaque);
}

/* Para o botão de emergência, se ele estiver ativo */
.menu-cta.menu-ativo {
    background-color: #ff3c3c !important; /* Um vermelho ainda mais vivo */
    box-shadow: 0 0 15px #ff3c3c;
}
/* =================================== */
/* === CSS DA INDEX (BLOCO "HUB AND SPOKE") === */
/* =================================== */

.bloco-atuacao-hub {
    padding: 60px 20px 80px 20px;
    background-color: var(--cor-fundo-escuro); /* Fundo padrão */
}

/* Reutiliza o grid de 3 colunas */
.atuacao-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

.card-atuacao {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 30px;
    transition: all 0.3s ease;
    border-top: 4px solid var(--cor-borda); /* Borda padrão */
}

.card-atuacao:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border-top-color: var(--cor-ouro-hover);
}

.card-atuacao svg {
    width: 40px;
    height: 40px;
    stroke: var(--cor-ouro-destaque);
    stroke-width: 1.5;
    fill: none;
    margin-bottom: 20px;
}

.card-atuacao h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-texto-principal);
    margin: 0 0 15px 0;
}

.card-atuacao p {
    font-size: 0.95rem;
    color: var(--cor-texto-secundario);
    line-height: 1.7;
    margin: 0;
}

/* Destaque do "HUB" (Principal) */
.card-atuacao.principal {
    border-top-color: var(--cor-ouro-destaque);
    /* background-color: var(--cor-fundo-hover); */ /* Opcional */
}
.card-atuacao.principal svg {
    stroke: var(--cor-ouro-destaque);
}
.card-atuacao.principal h3 {
    color: var(--cor-ouro-destaque);
}

/* Responsividade do Bloco */
@media (max-width: 900px) {
    .atuacao-grid {
        grid-template-columns: 1fr; /* Empilha */
    }
}
/* =================================== */
/* === CSS DO "ROTEIRO DA DEFESA" (SOBRE-MIM) === */
/* (100% CÓDIGO - SEM IMAGEM) */
/* =================================== */

.roteiro-wrapper {
    background-color: var(--cor-fundo-card); /* Reusa o fundo */
    border-top: 1px solid var(--cor-borda);
    padding: 60px 20px 80px 20px;
}

.roteiro-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* A linha do tempo vertical */
    border-left: 3px solid var(--cor-ouro-destaque);
    padding-left: 40px; /* Espaço para a linha */
}

/* Cada passo do roteiro */
.roteiro-passo {
    position: relative;
    margin-bottom: 50px;
    padding: 25px;
    background-color: var(--cor-fundo-escuro);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.roteiro-passo:hover {
    border-color: var(--cor-ouro-hover);
    transform: translateX(5px); /* Efeito "Live" */
}

/* O "Ponto" na linha do tempo */
.roteiro-passo::before {
    content: ''; /* O ponto */
    position: absolute;
    top: 30px;
    left: -53.5px; /* (padding 40px + metade da borda 3px + metade do ponto 10px) */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--cor-ouro-destaque);
    border: 4px solid var(--cor-fundo-card);
    z-index: 1;
    transition: all 0.3s ease;
}

.roteiro-passo:hover::before {
    background-color: var(--cor-ouro-hover);
    transform: scale(1.1);
}

.roteiro-passo h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    display: flex; /* Para o ícone */
    align-items: center; /* Para o ícone */
}

/* O ÍCONE (A sua ideia genial) */
.roteiro-passo h3 svg {
    width: 32px;
    height: 32px;
    stroke: var(--cor-ouro-destaque);
    stroke-width: 1.5;
    margin-right: 15px;
}

.roteiro-passo h3 span {
    font-size: 1.1rem;
    color: var(--cor-texto-secundario);
    font-family: 'Roboto', sans-serif;
    display: block;
    font-weight: 300;
}

.roteiro-passo p {
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    line-height: 1.7;
    margin: 0;
}
/* =================================== */
/* === CSS DA LANDING PAGE (CUSTÓDIA) === */
/* =================================== */

.bloco-dor-wrapper {
    background-color: var(--cor-fundo-card);
    padding: 40px 20px;
    border-top: 1px solid var(--cor-borda);
    border-bottom: 1px solid var(--cor-borda);
}

.bloco-dor {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.bloco-dor h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    color: var(--cor-texto-principal);
    margin-top: 0;
}

.dor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.dor-card {
    background-color: var(--cor-fundo-escuro);
    padding: 25px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
}

.dor-card svg {
    width: 30px;
    height: 30px;
    stroke: var(--cor-vermelho-emergencia);
    stroke-width: 2;
}

.dor-card h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    color: var(--cor-ouro-destaque);
    margin: 10px 0 5px 0;
}

.dor-card p {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0;
}

/* O CTA Gigante de Emergência */
.bloco-cta-emergencia {
    padding: 50px 20px;
    text-align: center;
}

.botao-cta-gigante {
    display: inline-block;
    padding: 25px 50px;
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    background-color: var(--cor-vermelho-emergencia);
    color: white;
    transition: all 0.3s ease;
    animation: pulse-live 1.5s infinite; /* Reusa a animação "Live" */
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.4);
}
.botao-cta-gigante:hover {
    background-color: #ff4d4d; /* Vermelho mais claro */
    transform: scale(1.03);
}

@media (max-width: 900px) {
    .dor-grid {
        grid-template-columns: 1fr; /* Empilha */
    }
    .botao-cta-gigante {
        font-size: 1.8rem;
        padding: 20px 30px;
        width: 90%; /* Ocupa a largura */
        box-sizing: border-box; /* Garante o padding */
    }
}
/* =================================== */
/* === CSS DO "MENU ARSENAL" (FOCO 16) === */
/* =================================== */

/* 1. Prepara o Terreno */
.menu-links li {
    position: relative; /* Permite o "dropdown" */
}
.menu-links a {
    display: flex; /* Para o ícone de "seta" */
    align-items: center;
}

/* 2. O "Mega Menu" (O Container) */
.mega-menu {
    display: none; /* Começa 100% escondido */
    position: absolute;
    top: 100%; /* Aparece logo abaixo do link do menu */
    left: 0;
    width: 800px; /* Largura do "Arsenal" */
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-top: 3px solid var(--cor-ouro-destaque);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1001; /* Acima de tudo */
    
    /* A Mágica da Animação */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 3. A "Mágica" do Hover (Quando o "li" pai é "hoverado") */
.menu-links li:hover .mega-menu {
    display: block; /* Mostra o container */
    opacity: 1;
    transform: translateY(0);
}

/* 4. O Grid Interno (As 3 Colunas) */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    gap: 25px;
    padding: 25px;
}

.mega-menu-coluna h4 {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    color: var(--cor-ouro-destaque);
    margin: 0 0 15px 0;
    border-bottom: 1px solid var(--cor-borda);
    padding-bottom: 10px;
}

.mega-menu-coluna ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-menu-coluna li {
    margin: 0 0 10px 0; /* Remove o margin-right */
}
.mega-menu-coluna a {
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
    font-weight: 400; /* Mais fino */
    border: none !important; /* Remove o "sublinhado" do menu principal */
    box-shadow: none !important; /* Remove o "sublinhado" do menu ativo */
}
.mega-menu-coluna a:hover {
    color: var(--cor-ouro-hover);
    border: none !important;
}

/* 5. O Ícone de "Seta" (Genialidade) */
.menu-links a.dropdown-toggle::after {
    content: '▼';
    font-size: 0.7rem;
    margin-left: 8px;
    color: var(--cor-texto-secundario);
    transition: transform 0.3s ease;
}
.menu-links li:hover a.dropdown-toggle::after {
    transform: rotate(180deg); /* Vira a seta */
    color: var(--cor-ouro-destaque);
}
/* =================================== */
/* === CSS DA "AUTORIDADE DIGITAL" (FOCO 19 v3.0) === */
/* =================================== */

.bloco-autoridade-digital {
    background-color: var(--cor-fundo-card);
    padding: 60px 20px 80px 20px;
    border-top: 1px solid var(--cor-borda);
}

.autoridade-digital-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

.card-autoridade-digital {
    background-color: var(--cor-fundo-escuro);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    text-align: center; 
    transition: all 0.3s ease;
    display: flex; /* [MELHORIA] Ativa o Flexbox */
    flex-direction: column; /* [MELHORIA] Direção vertical */
}

.card-autoridade-digital:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border-color: var(--cor-ouro-hover);
}

.card-autoridade-digital .logo-plataforma {
    height: 50px; 
    width: auto;
    margin: 0 auto 20px auto; /* Centraliza o logo */
    filter: grayscale(100%) brightness(0.8) contrast(200%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.card-autoridade-digital:hover .logo-plataforma {
    filter: none; 
    opacity: 1;
}

.card-autoridade-digital h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
    color: var(--cor-texto-principal);
    margin: 0 0 10px 0;
}

.card-autoridade-digital p {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1; /* [A MÁGICA] Empurra os links para o fundo */
    margin-bottom: 20px; 
}

/* [NOVO] O container dos links de verificação */
.links-verificar {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre os links (para o Jusbrasil) */
}

.link-verificar {
    font-weight: bold;
    color: var(--cor-ouro-destaque);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.link-verificar:hover {
    color: var(--cor-ouro-hover);
    text-decoration: underline;
}

/* Responsividade do Bloco */
@media (max-width: 900px) {
    .autoridade-digital-grid {
        grid-template-columns: 1fr 1fr; 
    }
}
@media (max-width: 600px) {
    .autoridade-digital-grid {
        grid-template-columns: 1fr; 
    }
}
/* =================================== */
/* === CSS DO "ROTEIRO - SEÇÃO 2" (LOGO WALL) === */
/* === (100% CÓDIGO - SEM IMAGEM) === */
/* =================================== */

.bloco-sistemas-nacionais {
    background-color: #0a0a0a; /* Mais escuro */
    padding: 60px 20px 80px 20px;
    border-top: 1px solid var(--cor-borda);
}

.sistemas-grid {
    display: grid;
    /* 5 colunas de mestre */
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.card-sistema {
    text-align: center;
    padding: 20px;
}

.card-sistema svg {
    width: 60px; /* Ícones grandes */
    height: 60px;
    stroke: var(--cor-texto-secundario);
    fill: none;
    stroke-width: 1; /* Traço fino */
    
    /* A "JOGADA DE MESTRE" (O Efeito Genial) */
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.3s ease;
}

.card-sistema h4 {
    font-family: 'Teko', sans-serif;
    font-size: 1.4rem;
    color: var(--cor-texto-secundario);
    margin: 10px 0 0 0;
    transition: color 0.3s ease;
}

/* A "MÁGICA" DO HOVER */
.card-sistema:hover svg {
    filter: none; /* Remove o grayscale */
    opacity: 1;
    stroke: var(--cor-ouro-destaque);
    transform: scale(1.1);
}
.card-sistema:hover h4 {
    color: var(--cor-ouro-destaque);
}

/* Responsividade do "Logo Wall" */
@media (max-width: 900px) {
    .sistemas-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas no tablet */
    }
}
@media (max-width: 600px) {
    .sistemas-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas no celular */
    }
}
/* =================================== */
/* === CSS DA "AUTORIDADE DIGITAL" (FOCO 19) === */
/* =================================== */

.bloco-autoridade-digital {
    /* Mesmo estilo do "bloco-prova-social" */
    background-color: var(--cor-fundo-card);
    padding: 60px 20px 80px 20px;
    border-top: 1px solid var(--cor-borda);
}

.autoridade-digital-grid {
    display: grid;
    /* [MELHORIA] 4 colunas para os 4 logos */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

.card-autoridade-digital {
    background-color: var(--cor-fundo-escuro);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    text-align: center; /* Centralizado */
    transition: all 0.3s ease;
    display: flex; /* [NOVO] Para o link ficar no fundo */
    flex-direction: column; /* [NOVO] */
}

.card-autoridade-digital:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border-color: var(--cor-ouro-hover);
}

.card-autoridade-digital .logo-plataforma {
    height: 50px; /* Altura fixa para os logos */
    width: auto;
    margin: 0 auto 20px auto; /* [CONSERTO] Centraliza o logo */
    /* Filtro para deixar o logo "branco" e "dourar" no hover */
    filter: grayscale(100%) brightness(0.8) contrast(200%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.card-autoridade-digital:hover .logo-plataforma {
    filter: none; /* Cor original no hover */
    opacity: 1;
}

.card-autoridade-digital h3 {
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
    color: var(--cor-texto-principal);
    margin: 0 0 10px 0;
}

.card-autoridade-digital p {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1; /* [NOVO] Empurra o link para o fundo */
    margin-bottom: 20px; /* [NOVO] Espaço antes do link */
}

/* [NOVO] Estilo para os links de verificação */
.links-verificar {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre os links (para o Jusbrasil) */
}
.link-verificar {
    font-weight: bold;
    color: var(--cor-ouro-destaque);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.link-verificar:hover {
    color: var(--cor-ouro-hover);
    text-decoration: underline;
}


/* Responsividade do Bloco */
@media (max-width: 900px) {
    .autoridade-digital-grid {
        grid-template-columns: 1fr 1fr; /* 2 colunas no tablet */
    }
}
@media (max-width: 600px) {
    .autoridade-digital-grid {
        grid-template-columns: 1fr; /* 1 coluna no celular */
    }
}
/* =================================== */
/* === A OFICINA TÉCNICA (MÉTODO LIVE) === */
/* =================================== */

.bloco-oficina-tecnica {
    background-color: #0a0a0a; /* Fundo quase preto para contraste */
    border-top: 1px solid #333;
    padding: 60px 20px;
}

.bloco-oficina-tecnica .card-atuacao {
    background-color: rgba(255, 255, 255, 0.05); /* Fundo translúcido */
    border: 1px solid #333;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.bloco-oficina-tecnica .card-atuacao:hover {
    transform: translateY(-5px);
    border-color: var(--cor-ouro-destaque);
    background-color: rgba(255, 255, 255, 0.08);
}

.bloco-oficina-tecnica svg {
    width: 48px; /* Tamanho ideal para ícones de ferramenta */
    height: 48px;
    margin-bottom: 15px;
    /* Nota: A cor já vem definida no HTML (stroke), não forçamos aqui */
}

.bloco-oficina-tecnica h3 {
    color: #fff; /* Título branco no fundo escuro */
}

.bloco-oficina-tecnica p {
    color: #ccc; /* Texto cinza claro */
    font-size: 0.9rem;
}

/* =================================== */
/* === SISTEMAS NACIONAIS (LOGO WALL) === */
/* =================================== */

.bloco-sistemas-nacionais {
    background-color: var(--cor-fundo-card);
    padding: 50px 20px;
    border-top: 1px solid var(--cor-borda);
    text-align: center;
}

.sistemas-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* Espaço entre os sistemas */
    margin-top: 30px;
    align-items: center;
}

.card-sistema {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px; /* Largura fixa para alinhamento */
    transition: all 0.3s ease;
    cursor: default;
}

/* O EFEITO DE MESTRE (CINZA -> DOURADO) */
.card-sistema svg {
    width: 50px;
    height: 50px;
    stroke: #666; /* Começa Cinza Escuro (Inativo) */
    stroke-width: 1.5;
    margin-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-sistema h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #666;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* HOVER: Acende o sistema */
.card-sistema:hover svg {
    stroke: var(--cor-ouro-destaque); /* Vira Dourado */
    transform: scale(1.1); /* Leve aumento */
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.4)); /* Brilho Dourado */
}

.card-sistema:hover h4 {
    color: var(--cor-texto-principal); /* Texto fica preto/escuro */
}
/* ========================================= */
/* === HEADER & MENU (Estilo Premium) === */
/* ========================================= */

/* Fundo e Fixação */
.header-fixo {
    background-color: rgba(10, 10, 10, 0.95); /* Preto quase sólido */
    backdrop-filter: blur(10px); /* Efeito vidro */
    border-bottom: 1px solid #333;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
}

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

/* A LOGO DE OURO (Tipografia) */
.logo-link {
    text-decoration: none;
}

.logo-texto {
    display: flex;
    flex-direction: column;
}

.dr-titulo {
    font-family: 'Teko', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    
    /* O Efeito Ouro Metálico */
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

.oab-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: #ccc;
    letter-spacing: 0.5px;
}

/* Navegação Desktop */
.nav-list {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-list a {
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav-list a:hover {
    color: var(--cor-ouro-destaque);
}

/* Botão Plantão */
.btn-plantao {
    background: linear-gradient(45deg, #800000, #a00000); /* Vermelho Sangue/Alerta */
    color: white !important;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    border: 1px solid #ff3333;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    animation: pulsar 2s infinite;
}

@keyframes pulsar {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* DROPDOWNS (Menus Suspensos) */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1a1a1a;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1;
    border: 1px solid #333;
    border-top: 2px solid var(--cor-ouro-destaque);
    top: 100%; /* Logo abaixo do link */
    left: 0;
    padding: 10px 0;
}

/* Sub-dropdown (Ninho) */
.sub-dropdown {
    position: relative;
}

.sub-dropdown-content {
    display: none;
    position: absolute;
    left: 100%; /* Ao lado do menu pai */
    top: 0;
    background-color: #1a1a1a;
    min-width: 220px;
    border: 1px solid #333;
    border-left: 2px solid var(--cor-ouro-destaque);
    padding: 10px 0;
}

/* Lógica de Hover (Mostrar Menu) */
.dropdown:hover .dropdown-content { display: block; }
.sub-dropdown:hover .sub-dropdown-content { display: block; }

.dropdown-content li, .sub-dropdown-content li {
    display: block;
    padding: 5px 20px;
}

.dropdown-content li a, .sub-dropdown-content li a {
    display: block;
    font-size: 0.9rem;
    padding: 5px 0;
    color: #ddd;
}

/* Mobile Icon (Escondido no Desktop) */
.mobile-menu-icon { display: none; }

/* ========================================= */
/* === FOOTER (Rodapé) === */
/* ========================================= */

.site-footer {
    background-color: #050505;
    color: #ccc;
    padding-top: 60px;
    border-top: 1px solid #222;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    padding-bottom: 40px;
}

.footer-logo-text {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-ouro-destaque);
    margin-bottom: 5px;
    margin-top: 0;
}

.footer-oab {
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
}

.footer-col h4 {
    color: #fff;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    transition: 0.2s;
}

.footer-links a:hover {
    color: var(--cor-ouro-destaque);
    padding-left: 5px; /* Efeito de movimento */
}

.btn-footer-zap {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background-color: #25D366;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

.footer-bottom {
    background-color: #000;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #222;
    font-size: 0.8rem;
}

/* Responsividade do Menu */
@media (max-width: 900px) {
    .nav-menu { display: none; } /* Esconde menu desktop */
    .header-cta { display: none; } /* Esconde botão desktop se quiser simplificar */
    .mobile-menu-icon { 
        display: block; 
        cursor: pointer;
        color: var(--cor-ouro-destaque);
    }
    .mobile-menu-icon .bar {
        width: 25px;
        height: 3px;
        background-color: var(--cor-ouro-destaque);
        margin: 5px 0;
    }
}
/* ========================================== */
/* === CSS DA BIBLIOTECA (Artigos/Mapa) === */
/* ========================================== */

/* --- Barra de Busca "Google Live" --- */
.busca-live-wrapper {
    max-width: 700px;
    margin: -20px auto 40px auto; /* Sobe um pouco para perto do Hero */
    position: relative;
    z-index: 10;
}

.input-icon-wrap {
    position: relative;
    width: 100%;
}

.icone-lupa {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    filter: grayscale(100%);
    opacity: 0.5;
}

#busca-live-input {
    width: 100%;
    padding: 15px 15px 15px 50px; /* Espaço para a lupa */
    border-radius: 50px; /* Formato pílula */
    border: 1px solid #444;
    background-color: #111;
    color: #fff;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Efeito de Foco (Glow Dourado) */
#busca-live-input:focus {
    border-color: var(--cor-ouro-destaque);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    background-color: #1a1a1a;
}

/* --- Filtros de Categoria --- */
.filtro-arsenal {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.filtro-arsenal button {
    background-color: transparent;
    color: #888;
    border: 1px solid #333;
    padding: 8px 20px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.filtro-arsenal button:hover {
    border-color: var(--cor-ouro-destaque);
    color: #fff;
}

/* Botão Ativo (Selecionado) */
.filtro-arsenal button.ativo {
    background-color: var(--cor-ouro-destaque);
    color: #000; /* Texto preto no fundo dourado */
    border-color: var(--cor-ouro-destaque);
    font-weight: 700;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* Ajuste nos Cards para Mobile */
@media (max-width: 600px) {
    .filtro-arsenal {
        gap: 8px;
    }
    .filtro-arsenal button {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}
/* =========================================== */
/* === ÁREA DE NETWORKING (Página Petições) === */
/* =========================================== */

.bloco-colaboracao {
    background-color: #0a0a0a;
    border-bottom: 1px solid #333;
    padding: 40px 20px;
    margin-bottom: 40px;
}

.colaboracao-box {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(45deg, #151515, #1a1a1a);
    border: 1px solid var(--cor-ouro-destaque);
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
}

.colab-texto {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
}

.colab-texto h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2rem;
    color: var(--cor-ouro-destaque);
    margin-top: 0;
}

.colab-texto p {
    color: #ccc;
    margin-bottom: 15px;
}

.colab-lista {
    list-style: none;
    padding: 0;
    color: #fff;
    font-size: 0.95rem;
}

.colab-lista li {
    margin-bottom: 8px;
}

.colab-cta {
    text-align: center;
    min-width: 250px;
}

.btn-colaborar {
    display: inline-block;
    background-color: var(--cor-ouro-destaque);
    color: #000;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-colaborar:hover {
    background-color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.4);
    transform: scale(1.05);
}

.colab-obs {
    font-size: 0.75rem;
    color: #666;
    margin-top: 10px;
}

/* === SELOS DE AUTORIA NOS CARDS === */

.selo-autoria {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    background-color: #333;
    color: #aaa;
}

/* Estilo para Parceiros (Networking) */
.selo-autoria.colaborador {
    background-color: rgba(212, 175, 55, 0.2);
    color: var(--cor-ouro-destaque);
    border: 1px solid var(--cor-ouro-destaque);
}

/* Responsividade */
@media (max-width: 768px) {
    .colaboracao-box {
        flex-direction: column;
        text-align: center;
    }
    .colab-texto {
        padding-right: 0;
        margin-bottom: 20px;
    }
}
/* ================================================= */
/* === CORREÇÃO CRÍTICA: MENU MOBILE (TOGGLE) === */
/* ================================================= */

/* 1. Visibilidade do Ícone Mobile */
.mobile-menu-icon {
    display: none; /* Escondido por padrão no desktop */
    cursor: pointer;
    z-index: 1000;
}

@media (max-width: 900px) {
    /* Mostra o ícone no mobile */
    .mobile-menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        position: relative; /* Para que o ícone fique sobre o menu quando aberto */
        z-index: 1001; /* Fica acima do menu */
    }
    .mobile-menu-icon .bar {
        width: 100%;
        height: 3px;
        background-color: var(--cor-ouro-destaque);
        transition: all 0.3s ease;
    }
    
    /* 2. O Overlay do Menu (Escondido por Padrão no Mobile) */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.98); /* Overlay escuro */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 999;
        /* Inicialmente, desloca para fora da tela */
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        overflow-y: auto;
    }
    
    /* Quando a classe 'active' é adicionada pelo JS, o menu entra na tela */
    .nav-menu.active {
        transform: translateX(0);
    }

    /* Ajuste da Lista para o Centro */
    .nav-list {
        flex-direction: column;
        text-align: center;
        padding-top: 50px;
    }
    .nav-list li {
        margin: 20px 0;
    }
    .nav-list a {
        font-size: 1.8rem;
        padding: 10px 20px;
        display: block;
        color: #fff;
    }

    /* 3. Efeito 'X' (Animação do Ícone de Fechar) */
    .mobile-menu-icon.change .bar:nth-child(1) { 
        transform: rotate(-45deg) translate(-7px, 7px);
    }
    .mobile-menu-icon.change .bar:nth-child(2) { 
        opacity: 0;
    }
    .mobile-menu-icon.change .bar:nth-child(3) { 
        transform: rotate(45deg) translate(-7px, -7px);
    }
    
    /* Esconde o menu desktop no mobile */
    .header-container .nav-menu:not(.active) {
        display: none;
    }
}
html {
    scroll-behavior: smooth;
}
/* Animação de Entrada */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
/* ================================================= */
/* === MELHORIAS TÁTICAS (Pacote Reforço) === */
/* ================================================= */

/* 1. Rolagem de Manteiga (Smooth Scroll) */
html {
    scroll-behavior: smooth;
}

/* 2. Animação de Pulso (Para Botões de Emergência) */
@keyframes pulse-alert {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.btn-pulse {
    animation: pulse-alert 2s infinite;
}

/* 3. Proteção Visual (Impede seleção de texto em áreas sensíveis) */
.protegido {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* ============================================================ */
/* === PACOTE VISUAL PREMIUM: GLASSMORPHISM (VIDRO FOSCO) === */
/* ============================================================ */

/* Aplica o efeito de vidro em cards estratégicos */
.colaborador-card,
.bloco-demanda,
.litigio-foco,
.dossie-wrapper,
.calc-wizard-wrapper,
.card-autoridade-digital {
    /* Fundo semi-transparente escuro */
    background: rgba(20, 20, 20, 0.7) !important;
    
    /* O Efeito de Desfoque (O "Vidro") */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px); /* Para Safari/iPhone */
    
    /* Borda sutil e translúcida */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important; /* Luz no topo */
    
    /* Sombra suave para dar profundidade */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}

/* Efeito Especial: Vidro de Ouro (Para Destaques) */
.litigio-foco, 
.dossie-wrapper {
    border: 1px solid rgba(212, 175, 55, 0.3) !important; /* Borda Ouro */
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.1) !important; /* Brilho Ouro */
}

/* Interação ao Passar o Mouse (Hover) */
.colaborador-card:hover,
.bloco-demanda:hover,
.card-autoridade-digital:hover {
    background: rgba(212, 175, 55, 0.15) !important; /* O vidro fica dourado */
    border-color: var(--cor-ouro-destaque) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7) !important;
}

/* Ajuste de Texto para garantir leitura no vidro */
.colaborador-card p,
.bloco-demanda li,
.litigio-foco p {
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Sombra no texto para contraste */
}
/* ============================================================ */
/* === ACABAMENTO FINAL DE LUXO (POLIMENTO) === */
/* ============================================================ */

/* 1. BARRA DE ROLAGEM PERSONALIZADA (SCROLLBAR) */
/* Funciona em Chrome, Edge, Safari e Opera */
::-webkit-scrollbar {
    width: 10px; /* Largura da barra */
}

::-webkit-scrollbar-track {
    background: #0a0a0a; /* Cor do fundo da calha (Preto fundo do site) */
}

::-webkit-scrollbar-thumb {
    background: #333; /* Cor da barra em repouso */
    border-radius: 5px; /* Arredondada */
    border: 1px solid #555; /* Borda sutil */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cor-ouro-destaque); /* Fica DOURADA ao passar o mouse */
    border-color: #fff;
}

/* 2. SELEÇÃO DE TEXTO DE ELITE */
/* Quando o usuário seleciona o texto com o mouse */
::selection {
    background: var(--cor-ouro-destaque); /* Fundo Ouro */
    color: #000; /* Texto Preto */
    text-shadow: none;
}
::-moz-selection { /* Para Firefox */
    background: var(--cor-ouro-destaque);
    color: #000;
}

/* 3. FOCO ELEGANTE EM FORMULÁRIOS */
/* Remove o azul padrão e coloca um brilho Dourado */
input:focus, 
textarea:focus, 
select:focus {
    outline: none;
    border-color: var(--cor-ouro-destaque) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
    transition: all 0.3s ease;
}

/* 4. SUAVIZAÇÃO DE FONTES (ANTI-ALIASING) */
/* Deixa as letras mais nítidas em telas de alta definição */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* === CORREÇÃO FORÇADA MENU MOBILE === */
@media (max-width: 900px) {
    .nav-menu {
        /* Garante que o menu ocupe a tela toda e tenha fundo sólido */
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #0a0a0a !important; /* Fundo Preto Sólido */
        z-index: 99999 !important; /* Acima de TUDO */
        
        /* Centralização */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        /* Efeito de Deslizar */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        visibility: hidden; /* Esconde para não clicar sem querer */
    }

    .nav-menu.active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }
    
    /* Garante que o ícone fique SOBRE o menu aberto */
    .mobile-menu-icon {
        z-index: 100000 !important;
        position: relative;
    }
    
    /* Aumenta o tamanho dos links para dedo (Touch Target) */
    .nav-list li {
        margin: 25px 0 !important;
    }
    .nav-list a {
        font-size: 1.8rem !important;
        padding: 15px !important;
        display: block;
    }
}
/* ============================================ */
/* === ATUALIZAÇÃO: HEADER & FOOTER PREMIUM === */
/* ============================================ */

/* Header Fixo Glassmorphism */
.header-fixo {
    background-color: rgba(10, 10, 10, 0.95); /* Quase preto */
    backdrop-filter: blur(10px); /* Efeito de vidro */
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3); /* Linha Ouro sutil */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.header-container {
    display: flex;
    align-items: center; /* Alinhamento vertical perfeito */
    justify-content: space-between;
    height: 80px; /* Altura fixa para estabilidade */
}

/* Logo Otimizado */
.logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}
.dr-titulo {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-ouro-destaque);
    line-height: 1;
    display: block;
}
.oab-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: #ccc;
    letter-spacing: 1px;
    display: block;
}

/* Footer Premium */
.site-footer {
    background-color: #050505;
    border-top: 4px solid var(--cor-ouro-destaque);
    padding-top: 60px;
    color: #ccc;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding-bottom: 40px;
}
.footer-logo-text {
    font-family: 'Teko', sans-serif;
    color: var(--cor-ouro-destaque);
    font-size: 2rem;
    margin-bottom: 15px;
}
.footer-links li {
    margin-bottom: 10px;
}
.footer-links a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s;
}
.footer-links a:hover {
    color: var(--cor-ouro-destaque);
    padding-left: 5px; /* Efeito de movimento */
}
.btn-footer-zap {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #25d366;
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
}
.footer-bottom {
    background-color: #000;
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    border-top: 1px solid #222;
}
/* ============================================================ */
/* === PACOTE ELITE: TILT 3D & SPOTLIGHT SEARCH === */
/* ============================================================ */

/* --- 1. EFEITO TILT 3D (Holográfico) --- */
.tilt-effect {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    will-change: transform;
}
.tilt-content {
    transform: translateZ(20px); /* Faz o texto "flutuar" para fora do card */
}

/* --- 2. SPOTLIGHT SEARCH (Modal) --- */
#spotlight-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 20000;
    display: none; /* Oculto por padrão */
    justify-content: center;
    padding-top: 100px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#spotlight-overlay.active {
    display: flex;
    opacity: 1;
}
.spotlight-box {
    width: 100%;
    max-width: 600px;
    background: #1a1a1a;
    border: 1px solid #d4af37;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.2);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}
#spotlight-overlay.active .spotlight-box {
    transform: scale(1);
}
.spotlight-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
    padding: 15px;
}
.spotlight-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    color: #d4af37;
}
#spotlight-input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    width: 100%;
    outline: none;
    font-family: 'Roboto', sans-serif;
}
.spotlight-results {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}
.spotlight-item {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    text-decoration: none;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.spotlight-item:hover, .spotlight-item.selected {
    background: #222;
    border-left-color: #d4af37;
    color: #fff;
}
.spotlight-item span { font-size: 0.8rem; opacity: 0.6; border: 1px solid #555; padding: 2px 5px; border-radius: 4px; }
.spotlight-footer {
    background: #111;
    padding: 10px;
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    border-top: 1px solid #333;
}

/* Botão Flutuante para abrir (Mobile/Desktop) */
.btn-spotlight-trigger {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px; height: 50px;
    background: #111;
    border: 1px solid #d4af37;
    border-radius: 50%;
    color: #d4af37;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 9990;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}
.btn-spotlight-trigger:hover { transform: scale(1.1); background: #d4af37; color: #000; }

/* --- 3. TEMPO DE LEITURA (Badge) --- */
.reading-time-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-family: 'Fira Code', monospace;
    margin-bottom: 20px;
}
/* ============================================ */
/* === CORREÇÃO DE VISIBILIDADE (REVEAL) === */
/* ============================================ */

/* 1. Define o estado inicial (invisível) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* 2. O estado ativo (visível) adicionado pelo JS */
.reveal.active,
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. FAILSAFE (SEGURANÇA): Se o JS falhar ou demorar, mostra tudo */
/* Isso garante que em celulares ou conexões lentas o conteúdo apareça */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Força visibilidade em elementos críticos se o script de animação não rodar */
.no-js .reveal {
    opacity: 1 !important;
    transform: none !important;
}
/* ================================================= */
/* === MENU & FOOTER QUÂNTICO (SOBRESCREVE TUDO) === */
/* ================================================= */

/* HEADER FIXO COM VIDRO */
.header-fixo {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 80px;
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    z-index: 2000;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
    display: flex; align-items: center;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* LOGO */
.logo-link { text-decoration: none; display: flex; align-items: center; }
.dr-titulo {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-ouro-destaque);
    line-height: 1;
    display: block;
}
.oab-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: #ccc;
    letter-spacing: 1px;
    display: block;
}

/* MENU DESKTOP */
.nav-menu { display: flex; align-items: center; gap: 20px; }
.nav-list { display: flex; list-style: none; gap: 25px; margin: 0; padding: 0; }
.nav-item {
    color: #ccc; text-decoration: none; font-size: 1rem; font-weight: 500;
    transition: color 0.3s; position: relative;
}
.nav-item:hover { color: #fff; }

/* DROPDOWN */
.dropdown { position: relative; }
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: #1a1a1a;
    min-width: 220px;
    border: 1px solid #333;
    border-top: 3px solid var(--cor-ouro-destaque);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 0 0 8px 8px;
    padding: 10px 0;
}
.dropdown:hover .dropdown-content { display: block; animation: fadeIn 0.2s; }
.dropdown-content li { display: block; }
.dropdown-content a {
    display: block; padding: 10px 20px;
    color: #ccc; text-decoration: none; font-size: 0.9rem;
    transition: background 0.2s;
}
.dropdown-content a:hover { background: #222; color: var(--cor-ouro-destaque); }

/* BOTÕES DE AÇÃO (HEADER) */
.header-actions { display: flex; align-items: center; gap: 15px; }

.btn-login-menu {
    color: var(--cor-ouro-destaque);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 8px 15px;
    border: 1px solid var(--cor-ouro-destaque);
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-login-menu:hover { background: var(--cor-ouro-destaque); color: #000; }

.btn-plantao {
    background: #b30000; /* Vermelho Sangue */
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Teko';
    font-size: 1.2rem;
    letter-spacing: 1px;
    display: flex; align-items: center; gap: 5px;
}

/* MOBILE */
.mobile-menu-icon { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.mobile-menu-icon .bar { width: 25px; height: 3px; background: var(--cor-ouro-destaque); transition: 0.3s; }
.mobile-actions { display: none; } /* Esconde botões mobile no desktop */

@media (max-width: 900px) {
    .nav-menu {
        position: fixed; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px);
        background: #0a0a0a;
        flex-direction: column; align-items: center; justify-content: flex-start;
        padding-top: 40px;
        transform: translateX(100%); transition: transform 0.3s;
        overflow-y: auto;
    }
    .nav-menu.active { transform: translateX(0); }
    .nav-list { flex-direction: column; text-align: center; gap: 30px; }
    
    .mobile-menu-icon { display: flex; }
    .header-actions { display: none; } /* Esconde botões desktop */
    
    /* Botões no menu mobile */
    .mobile-actions { display: block; margin-top: 30px; }
    .dropdown-content { position: static; background: transparent; border: none; box-shadow: none; padding-left: 20px; }
    .dropdown:hover .dropdown-content { display: block; } /* Click to open on mobile via JS logic ideally, but hover works for simplicity */
}

/* FOOTER REFINADO */
.site-footer { background: #050505; border-top: 4px solid var(--cor-ouro-destaque); padding-top: 60px; color: #ccc; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; padding-bottom: 40px; }
.footer-logo-text { font-family: 'Teko'; color: var(--cor-ouro-destaque); font-size: 2rem; margin-bottom: 15px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #bbb; text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: var(--cor-ouro-destaque); padding-left: 5px; }
.social-icons { display: flex; gap: 15px; margin-top: 15px; }
.icon-link svg { color: #fff; transition: 0.3s; }
.icon-link:hover svg { color: var(--cor-ouro-destaque); transform: scale(1.1); }