/* ==================================================
   1. VARIÁVEIS (Design System)
================================================== */
:root {
    /* --- CORES PRINCIPAIS (Harmonizadas) --- */
    --cor-primaria: #2b59c3;    /* Azul Real - Mais equilibrado */
    --cor-secundaria: #1e293b;  /* Slate Dark - Azulado escuro para melhor contraste com o azul */
    --cor-terciaria: #cf7f07;  /* Slate Dark - Azulado escuro para melhor contraste com o azul */    
    --cor-accent: #8e1b2a;     /* Vinho Clio - Mais vibrante e sofisticado */
    --cor-fund1: #0d9488;       /* Teal/Verde - Cor de educação, mais calma que o verde puro */
    
    /* --- CORES DE APOIO E SUPERFÍCIE --- */
    /* Use estas para fundos de ícones ou badges */
    --bg-primaria: #eff6ff;     /* Azul muito claro */
    --bg-terciaria: #cf7f0748;  /* Slate Dark - Azulado escuro para melhor contraste com o azul */    
    --bg-accent: #fdf2f2;       /* Vinho muito claro */
    --bg-fund1: #f0fdfa;        /* Verde muito claro */
    
    /* --- NEUTROS --- */
    --cor-fundo: #f8fafc;       /* Cinza levemente azulado (mais moderno) */
    --cor-branco: #ffffff;
    --cor-borda: #e2e8f0;       /* Borda mais suave e limpa */
    --cor-texto-suave: #64748b; /* Cinza slate para textos descritivos */
    --cor-erro: #e11d48;
    
    /* --- EFEITOS (Design System) --- */
    --sombra-suave: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --sombra-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --raio: 12px;
    --transicao: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- TIPOGRAFIA --- */
    --fs-base: 1rem;
    --fs-small: 0.875rem;
    --fs-large: 2.25rem;
}

/* ==================================================
   2. RESET & BASE
================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-base);
    color: var(--cor-secundaria);
    background: var(--cor-branco);
    padding-top: 66px;
    line-height: 1.6;
}
.bg-clio-fundo { background-color: var(--cor-fundo); }

/* ==================================================
   3. LAYOUT & TIPOGRAFIA
================================================== */
.clio-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px;
}

h1, h2, h3 { 
    font-weight: 900; 
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: var(--cor-secundaria); /* Padrão escuro para todos os títulos */
}

h1 { font-size: var(--fs-large); }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }

p { color: var(--cor-texto-suave); }
.text-accent { color: var(--cor-accent); }
.text-justified { text-align: justify; }

.section-divider {
    border-top: 1px solid #e5e7eb;
    margin: 2rem 0;
    padding-top: 2rem;
}

/* ==================================================
   4. COMPONENTES (Botões e Inputs)
================================================== */
.clio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    transition: var(--transicao);
    border: 1px solid #aaa;
}

/* Botões de Ação Direta */
.clio-btn-primary { 
    background: var(--cor-primaria); 
    color: white; 
}
.clio-btn-primary:hover { transform: translateY(-1px); opacity: 0.95; color: white; }

/* Botão de Card (Neutro, a cor vem do card pai) */
.clio-btn-card {
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
    width: 100%; /* Garante que ocupe a largura do card */
    transition: var(--transicao);
    border: none;
    display: inline-flex;
    justify-content: center;
}

/* Filtros de Etapa (Estados Ativo/Inativo) */
.btn-filtro { border: 1px solid var(--cor-borda); background: transparent; color: var(--cor-texto-suave); }

/* Variações de Filtro Ativo */
.btn-filtro-todas.active { background: var(--cor-secundaria) !important; color: white !important; border-color: var(--cor-secundaria); }
.btn-filtro-fund1.active { background: var(--cor-fund1) !important; color: white !important; border-color: var(--cor-fund1); }
.btn-filtro-fund2.active { background: var(--cor-terciaria) !important; color: white !important; border-color: var(--cor-terciaria); }
.btn-filtro-medio.active { background: var(--cor-accent) !important; color: white !important; border-color: var(--cor-accent); }

/* Inputs */
input[type="text"], input[type="email"], select, textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--raio);
    border: 1px solid var(--cor-borda);
    transition: var(--transicao);
    outline: none;
}
input:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

/* ==================================================
   5. CARDS DE PLANEJAMENTO (Dinâmicos)
================================================== */
.clio-card-planejamento {
    background: var(--cor-branco);
    border-radius: var(--raio);
    padding: 24px;
    text-align: center;
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-card);
    transition: var(--transicao);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clio-card-planejamento:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-suave);
}

.card-icon-wrapper {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1.5rem;
}

/* --- Temas Contextuais dos Cards --- */

/* Anos Iniciais (Fund. I) */
.card-fund-1 { border-top: 4px solid var(--cor-fund1); }
.card-fund-1 .card-icon-wrapper { background: var(--bg-fund1); color: var(--cor-fund1); }
.card-fund-1:hover { border-color: var(--cor-fund1); }
.card-fund-1 .clio-btn-card { background: var(--cor-fund1); color: white; }
.card-fund-1 .clio-btn-card:hover { background: #059669; }

/* Anos Finais (Fund. II) - Sua cor Terciária */
.card-fund-2 { border-top: 4px solid var(--cor-terciaria); }
.card-fund-2 .card-icon-wrapper { background: var(--bg-terciaria); color: var(--cor-terciaria); }
.card-fund-2:hover { border-color: var(--cor-terciaria); }
.card-fund-2 .clio-btn-card { background: var(--cor-terciaria); color: white; }
.card-fund-2 .clio-btn-card:hover { background: #b56f06; }

/* Ensino Médio - Cor Accent (Vinho) */
.card-etapa-medio { border-top: 4px solid var(--cor-accent); }
.card-etapa-medio .card-icon-wrapper { background: var(--bg-accent); color: var(--cor-accent); }
.card-etapa-medio:hover { border-color: var(--cor-accent); }
.card-etapa-medio .clio-btn-card { background: var(--cor-accent); color: white; }
.card-etapa-medio .clio-btn-card:hover { background: #6a1420; }

/* ==================================================
   6. RESPONSIVIDADE & FOOTER
================================================== */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem; }
    .clio-container { padding: 20px 15px; }
}

.footer-clio {
    padding: 40px 16px;
    font-size: var(--fs-small);
    color: var(--cor-texto-suave);
    background-color: #f3f4f6;
    border-top: 1px solid var(--cor-borda);
}