/* Blog Revolução Concursos — estilo portal de notícias.
   Tipografia e cores são os tokens do Design System usados na página inicial. */
:root {
  --bg: #f5f5f7;
  --card: #fff;
  --ink: #10071d;
  --ink-soft: #52525b;
  /* Cinza quase-preto neutro dos títulos de seção (o --ink puxa roxo e pesa demais nesse tamanho) */
  --ink-titulo: #1d1d1f;
  --border: #d4d4d8;
  /* Token único de toda linha separadora (base dos cards, listas das colunas,
     abas, grade do calendário). Fica entre o fundo e o --border: precisa se ver,
     sem competir com a borda de verdade. */
  --divisor: #dfdfe5;
  --muted: #f1f1f4;
  --brand: #fd6a18;
  --brand-soft: #fff1e7;
  --estado: #7c3aed;
  --estado-escuro: #6d28d9;
  --estado-soft: #ede9fe;
  --gradient-cta: linear-gradient(135deg, #fd6a18, #fd7d32);
  --night: #10071d;
  /* Editais usa o mesmo roxo do mapa/barra de estados (--estado), não um roxo próprio. */
  --ed-editais: var(--estado);
  --ed-noticias: oklch(0.45 0.2 250);
  /* Dicas usa o mesmo laranja da marca (botão "Entrar agora"), não um laranja próprio. */
  --ed-dicas: var(--brand);
  /* Gabaritos têm cor própria: verde (o mesmo do "edital na rua") — gabarito é
     resultado publicado. Identidade visual só, não é uma editoria de verdade. */
  --ed-gabaritos: #1a854b;
  --ed-gabaritos-soft: #e8f7ee;
  /* Fase do concurso na página Editais: vermelho = edital ainda não saiu, verde = edital na rua */
  --fase-pre: #d1293d;
  --fase-pre-soft: #fdecee;
  --fase-pos: #1a854b;
  --fase-pos-soft: #e8f7ee;
  --sombra-card: 0 1px 2px rgba(16, 7, 29, 0.08);
  /* Filtro roxo da marca por cima das fotos em destaque (usar com mix-blend-mode: multiply) */
  /* Filtro sobre manchete/secundárias. Antes era um roxo forte no topo (sobra
     das thumbs roxas) que escurecia demais o alto das fotos. Agora é quase
     neutro, só um leve escurecer embaixo (o texto da manchete já tem seu próprio
     degradê). Sem peso no topo. */
  --filtro-destaque: linear-gradient(180deg, rgba(16, 7, 29, 0.04) 0%, rgba(16, 7, 29, 0.06) 45%, rgba(16, 7, 29, 0.16) 100%);
  --font-display: "Mundial", "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Mundial", "Open Sans", ui-sans-serif, system-ui, sans-serif;
}
/* Fonte oficial da marca (Mundial) — servida do próprio site em /k/fontes/.
   Pesos: 400 regular/itálico, 600 demibold, 700 bold, 900 black. */
@font-face { font-family: "Mundial"; src: url("/k/fontes/mundial-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("/k/fontes/mundial-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("/k/fontes/mundial-demibold.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("/k/fontes/mundial-bold.woff2") format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("/k/fontes/mundial-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.015em; }

/* ---------- header (branco, sem linha; o gradiente roxo começa logo abaixo) ---------- */
/* Vidro fosco: a barra deixa o conteúdo aparecer desfocado por trás ao rolar.
   Sem backdrop-filter (navegador antigo), o @supports abaixo devolve o branco opaco. */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topo { background: var(--card); }
}
/* Mesma largura/recuo do conteúdo (72rem, padding 1rem) para o logo alinhar com a
   borda esquerda dos blocos e o botão Entrar agora com a direita. */
.topo-inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem 0.3rem; }
/* margin-left negativo compensa a margem transparente à esquerda do logo (~19px a
   40px de altura), para o SÍMBOLO alinhar com a borda esquerda dos blocos. */
.marca { display: flex; align-items: center; flex-shrink: 0; margin-left: -1.3rem; }
.marca img { height: 40px; width: auto; object-fit: contain; }
.topo-divisor { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.editorias-nav { display: flex; align-items: center; gap: 0.25rem; font-size: 0.88rem; font-weight: 600; }
.editorias-nav a { color: var(--ink-soft); padding: 0.4rem 0.7rem; border-radius: 999px; white-space: nowrap; transition: color 0.18s, background 0.18s; }
.editorias-nav a:hover { color: var(--ink); }
.editorias-nav a.ativa { color: var(--brand); }
/* 2ª linha do topo: categorias com espaçamento confortável (gap), alinhadas à
   esquerda. Sem linha separadora e sem espalhar (space-between ficava ruim). */
/* padding-left 0.3rem: com o 0.7rem interno do link, o texto "Editais" cai em 1rem
   — a mesma borda dos blocos de conteúdo (e do símbolo do logo). */
.topo-nav .editorias-nav { max-width: 72rem; margin: 0 auto; padding: 0.1rem 1rem 0.55rem 0.3rem; gap: 1rem; }
/* Preenche a 1ª linha do topo, com o mesmo respiro (gap do topo-inner) entre logo
   e busca, e busca e sininho — sem margin-left:auto (que abria o vão grande). */
.busca { flex: 1; display: flex; align-items: center; min-width: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--card); padding: 0.15rem 0.3rem 0.15rem 0.2rem; transition: border-color 0.2s, box-shadow 0.2s; }
.busca:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.busca-ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; background: none; padding: 0.4rem 0.5rem; cursor: pointer; color: var(--ink-soft); transition: color 0.18s; }
.busca-ico:hover { color: var(--brand); }
.busca-ico svg { width: 18px; height: 18px; display: block; }
.busca input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 0.5rem 0.6rem 0.5rem 0; font: inherit; font-size: 0.9rem; color: var(--ink); }
.busca input::placeholder { color: var(--ink-soft); }
.topo-sino { display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink-soft); }
.topo-sino svg { width: 20px; height: 20px; }
.topo-sino::after { content: ""; position: absolute; top: 9px; right: 11px; width: 7px; height: 7px; border-radius: 999px; background: var(--brand); border: 2px solid var(--card); }
.cta-plataforma { flex-shrink: 0; background: var(--gradient-cta); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.6rem 1.3rem; border-radius: 999px; white-space: nowrap; transition: filter 0.2s; }
.cta-plataforma:hover { filter: brightness(1.08); }
/* Navegação some e vira hambúrguer nas telas menores */
.menu-botao { display: none; }
@media (max-width: 1024px) {
  .topo-nav { display: none; }
  .topo-divisor { display: none; }
  .menu-botao { display: block; }
}
/* No celular a busca cai para uma segunda linha do topo, ocupando a largura toda */
@media (max-width: 768px) {
  .topo-inner { flex-wrap: wrap; row-gap: 0.5rem; }
  .busca { order: 1; flex-basis: 100%; max-width: none; margin-left: 0; }
  .topo-sino { display: none; }
  .cta-plataforma { margin-left: auto; }
}

/* Fundo cinza-suave uniforme (var(--bg)) — os cards brancos é que dão o contraste.
   display: flow-root impede o margin-top da 1ª seção de vazar e abrir uma faixa cinza. */
main { display: flow-root; }

/* ---------- destaques (capa do portal) ---------- */
.destaques { max-width: 72rem; margin: 1.5rem auto 0; padding: 0 1rem; display: grid; gap: 1rem; grid-template-columns: 2.6fr 2fr; }
.manchete { position: relative; border-radius: 1rem; overflow: hidden; min-height: 435px; display: block; box-shadow: 0 10px 30px rgba(16, 7, 29, 0.12); }
.manchete img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform 0.5s; }
.manchete:hover img { transform: scale(1.04); }
.manchete-texto { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 5rem 1.5rem 1.5rem; background: linear-gradient(to top, oklch(0.14 0.04 285 / 0.92), transparent); color: #fff; }
.manchete-texto h1 { margin: 0.6rem 0 0.4rem; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.2; }
.manchete-texto p { margin: 0; font-size: 0.95rem; opacity: 0.85; }
/* 4 cartões brancos: as linhas 1fr + height 100% fazem a coluna começar e
   terminar exatamente na altura da manchete, com o vão do gap entre eles. */
.secundarias { display: grid; grid-template-rows: repeat(4, 1fr); gap: 0.7rem; height: 100%; }
/* Sem padding no cartão: a foto sangra até as bordas de cima, baixo e esquerda,
   e o próprio overflow do cartão arredonda os cantos dela. O respiro do texto
   vem do padding de .secundaria-txt, não do cartão. */
.secundaria { display: flex; gap: 0.9rem; align-items: stretch; overflow: hidden; border-radius: 0.85rem; background: var(--card); box-shadow: var(--sombra-card); transition: box-shadow 0.18s; }
.secundaria:hover { box-shadow: 0 6px 18px rgba(16, 7, 29, 0.12); }
.secundaria:hover h2 { text-decoration: underline; }
.secundaria-img { position: relative; width: 152px; flex-shrink: 0; }
.secundaria-img img { width: 100%; height: 100%; object-fit: cover; }
.secundaria-txt { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; min-width: 0; padding: 0.6rem 0; }
.secundaria-topo { display: flex; align-items: center; gap: 0.5rem; align-self: flex-start; }
.secundaria-data { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
/* Sem cor aqui: o título carrega .titulo-<editoria> e pega a cor da editoria. */
.secundaria h2 { margin: 0; font-size: 0.88rem; font-weight: 700; line-height: 1.3; }
.secundaria-seta { width: 20px; height: 20px; flex-shrink: 0; align-self: center; margin-left: auto; margin-right: 0.8rem; color: var(--estado); }
@media (max-width: 860px) {
  .destaques { grid-template-columns: 1fr; }
  /* -15% de altura no mobile (era 331px) — pedido do Kleber, 08/08/2026 */
  .manchete { min-height: 281px; }
}

/* ---------- chips de editoria ---------- */
.chip { display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.55rem; border-radius: 999px; color: #fff; font-family: var(--font-display); }
.chip-editais { background: var(--ed-editais); }
.chip-marca { background: var(--brand); }
.chip-noticias { background: var(--ed-noticias); }
.chip-dicas { background: var(--ed-dicas); }
.chip-gabaritos { background: var(--ed-gabaritos); }
.chip-simulado { background: var(--estado); }
.titulo-simulado { color: var(--estado); }
/* Fase do concurso (página Editais): fundo claro e texto colorido — o vermelho e
   o verde chapados brigariam com o roxo da editoria nos mesmos cards. */
.chip-pre { background: var(--fase-pre-soft); color: var(--fase-pre); }
.chip-pos { background: var(--fase-pos-soft); color: var(--fase-pos); }

/* ---------- colunas por editoria (estilo globo) ---------- */
.colunas { max-width: 72rem; margin: 3rem auto 0; padding: 0 1rem; display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr); }
/* As abas só existem no celular (ver media query no fim do bloco). */
.colunas-abas { display: none; }
/* Cada coluna é um flex vertical para o botão "Ver tudo" cair no fundo e as 3 colunas alinharem embaixo */
.coluna { display: flex; flex-direction: column; }
.coluna-titulo { margin: 0; font-size: 1.6rem; font-weight: 800; }
.titulo-editais { color: var(--ed-editais); }
.titulo-noticias { color: var(--ed-noticias); }
.titulo-dicas { color: var(--ed-dicas); }
.titulo-gabaritos { color: var(--ed-gabaritos); }
/* Títulos de seção clicáveis (Editais/Notícias/Dicas/Carreiras): atalho para a
   página-mãe, mas mantendo a cor e o peso do título — nada de cara de link. */
.coluna-titulo a, .carreiras-titulo a { color: inherit; text-decoration: none; }
/* No hover NÃO sublinha: já existe a barrinha colorida embaixo do título, e o
   sublinhado criava uma segunda linha (parecia duplicado). Só um leve fade. */
.coluna-titulo a:hover, .carreiras-titulo a:hover { opacity: 0.72; }
.coluna-barra { height: 3px; width: 4rem; border-radius: 999px; margin-top: 0.4rem; }
.barra-editais { background: var(--ed-editais); }
.barra-noticias { background: var(--ed-noticias); }
.barra-dicas { background: var(--ed-dicas); }
.barra-gabaritos { background: var(--ed-gabaritos); }
.coluna-desc { color: var(--ink-soft); font-size: 0.85rem; margin: 0.5rem 0 1rem; border-bottom: 1px solid var(--divisor); padding-bottom: 0.85rem; min-height: 4.4em; }
.coluna-destaque { display: block; border-radius: 0.85rem; overflow: hidden; box-shadow: 0 6px 18px oklch(0.18 0.02 280 / 0.1); }
.coluna-destaque img { aspect-ratio: 4 / 2.3; width: 100%; object-fit: cover; transition: transform 0.4s; }
.coluna-destaque:hover img { transform: scale(1.04); }
.faixa { padding: 0.85rem 1rem; color: #fff; }
.faixa h3 { margin: 0; font-size: 0.98rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.faixa-editais { background: var(--ed-editais); }
.faixa-noticias { background: var(--ed-noticias); }
.faixa-dicas { background: var(--ed-dicas); }
.faixa-gabaritos { background: var(--ed-gabaritos); }
/* Páginas que não são editoria usam o laranja da marca */
.faixa-marca { background: var(--brand); }
/* Para página que não é editoria mas vive no roxo (hoje: Calendário de provas) */
.faixa-roxa { background: var(--estado); }
/* Faixa da editoria no topo do artigo (estilo ge/globo): nome centralizado, branco, fundo colorido */
/* margin: 0 porque na página de Editais a faixa é um <h1> — sem isso o navegador
   abriria um vão em volta da barra colorida. */
.editoria-faixa { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0.7rem 1rem; transition: filter 0.18s; }
.editoria-faixa span { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08em; }
.editoria-faixa:hover { filter: brightness(1.06); }
.coluna-lista { list-style: none; margin: 0.75rem 0 1.1rem; padding: 0.25rem 0 0; border-top: 1px solid var(--divisor); }
.coluna-lista li { border-bottom: 1px solid var(--divisor); }
.coluna-lista a { display: flex; gap: 0.75rem; align-items: center; padding: 0.7rem 0; }
.coluna-lista-texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.coluna-lista-titulo { font-size: 1rem; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Título de cada notícia na cor da sua editoria */
#editais .coluna-lista-titulo { color: var(--ed-editais); }
#noticias .coluna-lista-titulo { color: var(--ed-noticias); }
#dicas .coluna-lista-titulo { color: var(--ed-dicas); }
.coluna-lista-meta { font-size: 0.82rem; color: var(--ink-soft); }
.coluna-lista a:hover .coluna-lista-titulo { text-decoration: underline; }
.coluna-lista img { width: 108px; height: 80px; object-fit: cover; border-radius: 0.5rem; flex-shrink: 0; }
.ver-tudo { margin-top: auto; align-self: flex-start; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 1rem; font-weight: 700; font-size: 0.8rem; cursor: pointer; color: var(--ink-soft); font-family: var(--font-display); }
.ver-tudo:hover { background: var(--muted); color: var(--ink); }
/* No celular as 3 editorias viram abas lado a lado e só a ativa aparece —
   mesmo padrão da seção de notícias da página inicial. Começa em Notícias. */
@media (max-width: 860px) {
  .colunas { grid-template-columns: 1fr; margin-top: 1.25rem; }
  .colunas-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: 72rem; margin: 3rem auto 0; padding: 0 1rem; }
  .coluna-aba { padding: 0.55rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink-soft); font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; }
  .coluna-aba.ativa { color: #fff; border-color: transparent; box-shadow: var(--sombra-card); }
  .coluna-aba.ativa.aba-editais { background: var(--ed-editais); }
  .coluna-aba.ativa.aba-noticias { background: var(--ed-noticias); }
  .coluna-aba.ativa.aba-dicas { background: var(--ed-dicas); }
  .coluna { display: none; }
  .coluna.ativa { display: flex; }
  .coluna-titulo, .coluna-barra, .coluna-desc { display: none; }
}

/* ---------- Sua região (matérias do estado do visitante, detectado automaticamente) ---------- */
.regiao-bloco { max-width: 72rem; margin: 2.5rem auto 0; padding: 0 1rem; }
.regiao-bloco-titulo { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--ink-titulo); display: inline-flex; align-items: center; gap: 0.45rem; }
.regiao-bloco-titulo em { font-style: normal; color: inherit; }
.regiao-pin { color: var(--brand); display: inline-flex; align-items: center; }
.regiao-pin svg { width: 1.05em; height: 1.05em; display: block; }
.regiao-bloco-barra { height: 3px; width: 4rem; background: var(--brand); border-radius: 999px; margin: 0.45rem 0 1.5rem; }
.regiao-grade { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); padding-bottom: 1.75rem; border-bottom: 1px solid var(--divisor); }
.regiao-card { display: block; }
/* +10% de altura no preview (era 16 / 7.5) — pedido do Kleber, 08/08/2026 */
.regiao-card-img { border-radius: 0.75rem; overflow: hidden; aspect-ratio: 16 / 8.25; margin-bottom: 0.6rem; }
.regiao-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.regiao-card:hover .regiao-card-img img { transform: scale(1.05); }
.regiao-card h3 { margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 700; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.regiao-card:hover h3 { text-decoration: underline; }
.regiao-card-meta { color: var(--ink-soft); font-size: 0.8rem; }
@media (max-width: 860px) { .regiao-grade { grid-template-columns: repeat(2, 1fr); } }
/* No celular (coluna única) cada card ganha respiro e um filete separador,
   como as listas das colunas — sem isso os cards ficam colados (Kleber, 07/08). */
@media (max-width: 480px) {
  .regiao-grade { grid-template-columns: 1fr; gap: 1.6rem; }
  .regiao-card { padding-bottom: 1.15rem; border-bottom: 1px solid var(--divisor); }
  .regiao-card:last-child { padding-bottom: 0; border-bottom: 0; }
  .regiao-card-img { margin-bottom: 0.75rem; }
}
/* Cabeçalho do bloco "Sua região": título à esquerda, botão à direita */
.regiao-bloco-topo { display: flex; align-items: center; justify-content: flex-start; gap: 1.1rem; flex-wrap: wrap; }
.regiao-bloco-topo .regiao-bloco-titulo { margin: 0; }
/* Botão "ver todas as notícias dessa região" — mesmo estilo do "Ver tudo" das colunas */
.regiao-bloco-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 1.1rem; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--ink-soft); transition: background 0.18s, color 0.18s; }
.regiao-bloco-btn:hover { background: var(--muted); color: var(--ink); }

/* Página de uma região: lista paginada "de 3 em 3" (reaproveita .grade/.cartao) */
.regiao-lista, .estado-lista { max-width: 72rem; margin: 2.5rem auto 3rem; padding: 0 1rem; }
.regiao-lista .grade, .estado-lista .grade { margin-top: 0; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .regiao-lista .grade, .estado-lista .grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .regiao-lista .grade, .estado-lista .grade { grid-template-columns: 1fr; } }
.regiao-lista .cartao.oculto, .estado-lista .cartao.oculto { display: none; }
.estado-lista .por-estado-titulo { margin-bottom: 0; }
.regiao-maisbox { display: flex; justify-content: center; margin-top: 2rem; }
.regiao-mais { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.6rem 1.4rem; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; transition: background 0.18s, color 0.18s; }
.regiao-mais:hover { background: var(--muted); color: var(--ink); }

/* ---------- grade de todas as matérias ---------- */
.todas { max-width: 72rem; margin: 3.5rem auto 0; padding: 0 1rem 3rem; }
.todas-cabecalho { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; }
.todas h2 { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--ink-titulo); }
.filtros { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filtro { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 0.4rem 1rem; font-weight: 700; font-size: 0.8rem; cursor: pointer; font-family: var(--font-display); color: var(--ink-soft); }
/* Filtro ativo assume a cor da editoria (Todas = escuro) */
.filtro.ativa { color: #fff; }
.filtro.ativa[data-f="todas"] { background: var(--night); border-color: var(--night); }
.filtro.ativa[data-f="editais"] { background: var(--ed-editais); border-color: var(--ed-editais); }
.filtro.ativa[data-f="noticias"] { background: var(--ed-noticias); border-color: var(--ed-noticias); }
.filtro.ativa[data-f="dicas"] { background: var(--ed-dicas); border-color: var(--ed-dicas); }
/* Coluna mais folgada que a linha: o respiro entre uma capa e outra vem daqui.
   Encolher só a .cartao-img deixaria a capa mais curta que o título embaixo. */
.grade { margin-top: 1.5rem; display: grid; gap: 1.25rem 1.8rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* "Todas as matérias": 4 por linha; revela de 8 em 8 pelo botão "Ver mais".
   Thumb 15% mais alta que o padrão dos outros cards (16/7.5 → 16/8.625). */
#grade-todas { grid-template-columns: repeat(4, 1fr); }
#grade-todas .cartao-img { aspect-ratio: 16 / 8.625; }
@media (max-width: 1100px) { #grade-todas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { #grade-todas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #grade-todas { grid-template-columns: 1fr; } }
.ver-mais-wrap { display: flex; justify-content: center; margin-top: 1.75rem; }
.ver-mais { border: 1px solid var(--border); background: var(--card); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; border-radius: 999px; padding: 0.7rem 1.8rem; cursor: pointer; transition: background 0.18s, border-color 0.18s, transform 0.15s; }
.ver-mais:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); }
/* Igual ao formato das colunas: sem card branco, imagem com 4 cantos arredondados e linha separadora embaixo */
.cartao { display: flex; flex-direction: column; padding-bottom: 1rem; border-bottom: 1px solid var(--divisor); }
.cartao-img { aspect-ratio: 16 / 7.5; overflow: hidden; border-radius: 0.85rem; }
.cartao-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.cartao:hover .cartao-img img { transform: scale(1.04); }
.cartao:hover h3 { text-decoration: underline; }
.cartao-corpo { padding: 0.7rem 0 0; }
/* text-wrap: balance divide o título em linhas do mesmo tamanho — sem ele o
   navegador enche a primeira linha e larga uma palavra solta na última. */
.cartao-corpo h3 { margin: 0.5rem 0 0.35rem; font-size: 1.15rem; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.data { margin: 0; color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- página de artigo ---------- */
.artigo { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.artigo h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.18; margin: 0.5rem 0 0.75rem; }
.meta { color: var(--ink-soft); font-size: 0.85rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; }
.meta-autor { color: var(--brand); font-weight: 700; text-decoration: none; }
.meta-autor:hover { text-decoration: underline; }
.capa { margin: 0 0 1.75rem; }
.capa img { border-radius: 1rem; width: 100%; }
.capa-credito { color: var(--ink-soft); font-size: 0.72rem; text-align: right; margin-top: 0.35rem; }
/* Gabarito: caixa-guia do link oficial no topo do artigo. Em vez de um botão
   solto (que jogava a pessoa numa tela cheia da banca sem orientação), mostra a
   banca e um passo a passo GENÉRICO — vale para qualquer banca, sem afirmar
   telas específicas que mudam. Decisão com o Kleber (05/08/2026). */
.gab-oficial { border: 1px solid var(--border); border-radius: 0.95rem; overflow: hidden; margin: 0.25rem 0 1.5rem; }
.gab-oficial-topo { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.1rem; background: var(--ed-gabaritos-soft); border-bottom: 1px solid var(--border); }
.gab-oficial-ico { flex: none; width: 1.5rem; height: 1.5rem; color: var(--ed-gabaritos); }
.gab-oficial-ico svg { width: 100%; height: 100%; display: block; }
.gab-oficial-rot { font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-gabaritos); }
.gab-oficial-banca { margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--border); padding: 0.15rem 0.6rem; border-radius: 999px; }
.gab-oficial-corpo { padding: 1.1rem 1.2rem 1.3rem; background: var(--card); }
.gab-oficial-intro { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.95rem; }
.gab-oficial-passos { list-style: none; counter-reset: gabp; margin: 0 0 1.15rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
/* O texto do passo vive num <span> único: sem ele, cada <b> virava um item de
   flex separado e o passo estourava para fora do card no celular (07/08/2026). */
.gab-oficial-passos li { counter-increment: gabp; display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.95rem; }
.gab-oficial-passos li > span { flex: 1; min-width: 0; }
.gab-oficial-passos li::before { content: counter(gabp); flex: none; width: 1.55rem; height: 1.55rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; display: grid; place-items: center; margin-top: 0.05rem; }
.gab-oficial-botao { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.85rem 1.25rem; background: var(--brand); color: #fff; border-radius: 0.7rem; font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 0 4px 14px rgba(253, 106, 24, 0.28); }
.gab-oficial-botao:hover { filter: brightness(1.06); }
.gab-oficial-botao .seta { font-size: 1.2rem; line-height: 1; }
.gab-oficial-aviso { display: flex; gap: 0.5rem; font-size: 0.82rem; color: var(--ink-soft); margin: 0.85rem 0 0; }
.gab-oficial-aviso svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; }
.prosa { font-size: 1.06rem; line-height: 1.75; }
.prosa > p:first-child { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.6; }
.prosa h2 { font-size: 1.45rem; line-height: 1.25; text-wrap: balance; margin: 2.2rem 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.prosa h3 { font-size: 1.15rem; line-height: 1.25; text-wrap: balance; margin: 1.6rem 0 0.5rem; }
.prosa a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prosa blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--brand-soft); border-left: 4px solid var(--brand); border-radius: 0 0.75rem 0.75rem 0; font-size: 0.98rem; }
.prosa blockquote p { margin: 0; }
.prosa .tabela-rolagem { margin: 1.5rem 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prosa table { width: auto; min-width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.prosa th, .prosa td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }
.prosa th { background: var(--muted); font-family: var(--font-display); }
.prosa hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.prosa li { margin: 0.3rem 0; }
/* No celular a tabela encolhe (fonte e respiro menores) para caber mais coluna
   antes de precisar rolar — tabelas largas como "Cargos e Vagas" paravam cortadas. */
@media (max-width: 640px) {
  .prosa table { font-size: 0.78rem; }
  .prosa th, .prosa td { padding: 0.35rem 0.45rem; }
}
.cta-final { margin: 2.5rem 0; padding: 1.75rem 1.5rem; border-radius: 1rem; background: linear-gradient(135deg, var(--night), oklch(0.2 0.07 290)); color: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.cta-final h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.cta-final p { margin: 0; opacity: 0.8; font-size: 0.9rem; }
.cta-final a { background: var(--brand); color: #fff; font-weight: 700; padding: 0.65rem 1.35rem; border-radius: 999px; white-space: nowrap; }
/* Variantes de cor dos CTAs configuráveis (blog/ctas.json): roxo, azul, laranja */
/* CTA do simulado: fundo roxo escuro (o roxo do fundo da página inicial) e botão
   laranja (o botão .cta-final a já é laranja por padrão; só não entra na regra de
   botão branco abaixo). É aqui que a raposa entra quando o arquivo chegar. */
.cta-final.cta-escuro { position: relative; overflow: hidden; background: linear-gradient(95deg, #3a1c6b, var(--night) 75%); align-items: flex-start; text-align: left; padding-right: 11.5rem; }
.cta-final.cta-escuro::after { content: ""; position: absolute; right: 0.4rem; bottom: 0; width: 10.5rem; height: 112%; background: url("raposa-simulado.webp") no-repeat right bottom; background-size: contain; pointer-events: none; }
@media (max-width: 640px) {
  .cta-final.cta-escuro { align-items: center; text-align: center; padding-right: 1.5rem; }
  .cta-final.cta-escuro::after { display: none; }
}
.cta-final.cta-roxo { background: linear-gradient(135deg, #6d28d9, #7c3aed); }
.cta-final.cta-azul { background: linear-gradient(135deg, #1e40af, #2563eb); }
.cta-final.cta-laranja { background: linear-gradient(135deg, #c2410c, #fd6a18); }
.cta-final.cta-roxo a, .cta-final.cta-azul a, .cta-final.cta-laranja a { background: #fff; color: var(--night); }
@media (max-width: 560px) { .cta-final a { width: 100%; text-align: center; } }
/* Respiro antes do "Leia também" em todas as seções (estava colado no gabaritos). */
.relacionados { margin-top: 3rem; }
.relacionados h2 { font-size: 1.35rem; margin: 0 0 0.25rem; }
.relacionados .grade { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Thumb do "Leia também" em 16:9 (a proporção nativa das capas) para não cortar
   o texto das capas de aviso — igual em todas as páginas. */
.relacionados .cartao-img { aspect-ratio: 16 / 9; }
/* A página-mãe de Carreiras tem <main> sem largura (as seções internas se
   centralizam sozinhas); aqui o "Leia também" também precisa alinhar a 72rem. */
.carreira-hub .relacionados { max-width: 72rem; margin: 2.5rem auto 0; padding: 0 1rem; }

/* ---------- menu lateral (hambúrguer) ---------- */
/* O botão vive dentro da cápsula do topo; o mesmo ☰ vira ✕ para fechar */
.menu-botao { flex-shrink: 0; margin-left: -0.35rem; border: 0; background: none; border-radius: 999px; width: 40px; height: 40px; font-size: 1.3rem; cursor: pointer; color: var(--ink); transition: background 0.2s; }
.menu-botao:hover { background: var(--muted); }
.menu-fundo { position: fixed; inset: 0; background: rgba(16, 7, 29, 0.5); z-index: 90; }
.menu-lateral { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); background: var(--card); z-index: 100; box-shadow: 0 0 40px oklch(0.18 0.02 280 / 0.25); padding: 1.1rem 1.25rem 1.5rem; overflow-y: auto; animation: menu-entra 0.22s ease-out; }
@keyframes menu-entra { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .menu-lateral { animation: none; } }
.menu-cabecalho { display: flex; align-items: center; gap: 0.55rem; }
.menu-cabecalho img { height: 34px; }
/* O mesmo ☰ do topo, no mesmo canto: quem abriu o menu toca de novo ali e fecha
   (pedido do Kleber, 31/07/2026). O ✕ à direita continua como alternativa. */
.menu-hamb { flex-shrink: 0; margin-left: -0.35rem; border: 0; background: none; border-radius: 999px; width: 40px; height: 40px; font-size: 1.3rem; cursor: pointer; color: var(--ink); transition: background 0.2s; }
.menu-hamb:hover { background: var(--muted); }
.menu-fechar { margin-left: auto; }
.menu-fechar { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; transition: background 0.2s; }
.menu-fechar:hover { background: var(--muted); }
.menu-fechar svg { width: 18px; height: 18px; }
.menu-tagline { margin-top: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 18rem; }
.menu-busca { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; padding: 0 1rem; height: 46px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--ink-soft); }
.menu-busca svg { width: 18px; height: 18px; flex-shrink: 0; }
.menu-busca input { border: 0; background: none; width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); outline: none; }
.menu-lateral nav { display: flex; flex-direction: column; margin-top: 1rem; }
.menu-secao { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin: 0.35rem 0 0.3rem 0.25rem; }
.menu-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.62rem 0.4rem 0.62rem 0.25rem; border-radius: 0.6rem; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.menu-item:hover { background: var(--brand-soft); color: var(--brand); }
.menu-item-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--estado); }
.menu-chev { width: 16px; height: 16px; margin-left: auto; color: #b3b3bd; flex-shrink: 0; }
.menu-badge { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--estado); background: var(--estado-soft); border-radius: 999px; padding: 0.22rem 0.55rem; }
.menu-lateral nav hr { border: none; border-top: 1px solid var(--divisor); margin: 0.7rem 0; }
.menu-plataforma { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.9rem; padding: 0.85rem 0.9rem; border-radius: 1rem; background: var(--estado-soft); }
.menu-plataforma .menu-chev { color: var(--estado); }
.menu-plataforma-ico { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 0.8rem; background: #ddd2fb; color: var(--estado); }
.menu-plataforma-ico svg { width: 22px; height: 22px; }
.menu-plataforma-txt { display: block; flex: 1; font-size: 0.78rem; line-height: 1.35; color: var(--ink-soft); }
.menu-plataforma-txt strong { display: block; font-size: 0.92rem; color: var(--ink); }
.menu-entrar { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; height: 52px; border-radius: 0.9rem; background: var(--gradient-cta); color: #fff; font-weight: 700; font-size: 1rem; }
.menu-entrar svg { width: 22px; height: 22px; }
.menu-entrar:hover { filter: brightness(1.07); }
.menu-criar { margin-top: 0.8rem; text-align: center; font-size: 0.85rem; color: var(--ink-soft); }
.menu-criar a { color: var(--estado); font-weight: 700; }

/* ---------- barra de estados (home, logo abaixo do menu) ---------- */
/* Cinco regiões em silhueta + as 27 siglas, todas acesas por padrão: escolher
   uma região mantém acesas só as siglas dela e apaga o resto; o clique filtra */
.barra-estados { max-width: 72rem; margin: 1.5rem auto 0; padding: 0 1rem; }
/* Painel quase branco; o roxo fica só nas silhuetas das regiões, não no fundo.
   A linha separa regiões de siglas. */
.barra-estados-inner { display: flex; align-items: center; gap: 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 1.25rem; background: #fcfcfd; box-shadow: var(--sombra-card); }
.regioes { display: flex; gap: 0.9rem; flex-shrink: 0; position: relative; }
.regioes::after { content: ""; position: absolute; right: -0.875rem; top: 0.35rem; bottom: 0.35rem; width: 1px; background: var(--border); }
.regiao { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-decoration: none; color: inherit; }
.regiao-ico { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(16, 7, 29, 0.08); transition: background 0.18s, transform 0.18s, box-shadow 0.18s; }
/* Silhueta chapada na cor da marca (sem gradiente: dava aspecto 3D) */
.regiao-ico svg { width: 2rem; height: 2rem; color: var(--estado); fill: currentColor; transition: color 0.18s; }
.regiao-nome { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); transition: color 0.18s; }
.regiao:hover .regiao-ico, .regiao.ativa .regiao-ico { background: var(--estado-soft); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.25); }
.regiao:hover .regiao-nome, .regiao.ativa .regiao-nome { color: var(--ink); }
.uf-barra { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(14, 1fr); column-gap: 0.4rem; row-gap: 0.6rem; }
.uf-barra .uf { display: flex; align-items: center; justify-content: center; padding: 0.38rem 0; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--card); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--ink); transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s; }
.uf-barra a.uf { cursor: pointer; }
.uf-barra a.uf:hover, .uf-barra a.uf.apagada:hover { background: var(--estado); border-color: var(--estado); color: #fff; opacity: 1; }
.uf-barra .uf-vazia { color: var(--ink-soft); background: var(--muted); cursor: default; }
.uf-barra .apagada { opacity: 0.3; }
@media (max-width: 1024px) {
  .barra-estados-inner { flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 1rem; }
  .regioes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
  .regiao { min-width: 0; }
  .regiao-nome { font-size: 0.62rem; white-space: nowrap; }
  /* Empilhado: a linha das regiões deita e vira o topo da grade de siglas. */
  .regioes::after { display: none; }
  .uf-barra { grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--border); padding-top: 1.25rem; }
}
/* No celular ficam só as regiões: 27 siglas viram um paredão que empurra a
   página inteira para baixo. Quem quer o estado usa a página Cidades e Estados. */
@media (max-width: 560px) {
  .regiao-ico { width: 2.6rem; height: 2.6rem; }
  .regiao-ico svg { width: 1.5rem; height: 1.5rem; }
  .regiao-nome { font-size: 0.56rem; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .uf-barra { display: none; }
}

/* ---------- página Matérias (disciplinas + professor) ---------- */
.materias { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.materias h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 0.4rem; }
.materias-sub { color: var(--ink-soft); font-size: 1rem; margin: 0 0 2rem; max-width: 44rem; }
.materias-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 1rem; }
.materia-card[hidden] { display: none; }
.materias-vazio { text-align: center; color: var(--ink-soft); padding: 2.5rem 0; }
.materia-pagina .artigo-topo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.mat-outras { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mat-outra { display: inline-block; padding: 0.5rem 0.95rem; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 0.9rem; text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.mat-outra:hover { border-color: var(--brand); color: var(--brand); }
.prof-topo { display: flex; gap: 1.5rem; align-items: center; margin: 0.4rem 0 1.75rem; }
.prof-foto { width: 180px; height: 224px; object-fit: cover; object-position: top center; border-radius: 0.9rem; flex: none; background: var(--muted); box-shadow: var(--sombra-card); }
.prof-topo-txt { display: flex; flex-direction: column; gap: 0.5rem; }
.prof-topo-txt h1 { margin: 0; }
.prof-perfil { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }
@media (max-width: 34rem) { .prof-topo { flex-direction: column; align-items: flex-start; gap: 1rem; } .prof-foto { width: 150px; height: 186px; } }
.materia-card { display: flex; flex-direction: column; gap: 0.45rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem; box-shadow: var(--sombra-card); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.materia-card:hover { box-shadow: 0 10px 26px rgba(16, 7, 29, 0.1); transform: translateY(-2px); border-color: var(--estado-soft); }
.materia-cat { align-self: flex-start; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 999px; color: #fff; font-family: var(--font-display); }
.cat-exatas { background: oklch(0.55 0.18 250); }
.cat-direito { background: var(--estado); }
.cat-humanas { background: #c94700; }
.cat-lingua { background: #0d9488; }
.cat-carreira { background: #db2777; }
.materia-nome { margin: 0.2rem 0 0; font-size: 1.12rem; font-weight: 800; line-height: 1.2; }
.materia-prof { margin: 0; font-size: 0.84rem; font-weight: 700; color: var(--estado); }
.materia-desc { margin: 0.1rem 0 0.6rem; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; flex: 1; }
.materia-link { font-size: 0.84rem; font-weight: 700; color: var(--brand); }
.materia-card:hover .materia-link { text-decoration: underline; }

/* ---------- mapa do Brasil por regiões (página Cidades e Estados) ---------- */
.mapa-container { display: grid; grid-template-columns: minmax(260px, 1fr) 1.4fr; gap: 2.5rem; align-items: stretch; margin: 1.5rem 0 2.5rem; }
.mapa-wrap { position: relative; } /* recebe a altura do bloco de regiões (à esquerda); o SVG se encaixa dentro */
@media (max-width: 768px) {
  .mapa-container { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .mapa-wrap { order: -1; aspect-ratio: 1 / 1; }
}
.lista-regioes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.lista-regioes li { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 0.9rem; background: var(--card); box-shadow: var(--sombra-card); cursor: pointer; font-weight: 700; font-family: var(--font-display); transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
.lista-regioes li:hover, .lista-regioes li.ativa { border-color: var(--brand); box-shadow: 0 6px 18px rgba(253, 106, 24, 0.14); transform: translateY(-1px); }
.lista-regioes .nome { display: flex; align-items: center; gap: 0.75rem; color: var(--ink); }
.lista-regioes .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.lista-regioes .seta { color: var(--ink-soft); font-weight: 800; transition: color 0.18s, transform 0.18s; }
.lista-regioes li:hover .seta, .lista-regioes li.ativa .seta { color: var(--brand); transform: translateX(4px); }
.mapa-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.06)); }
.mapa-wrap svg .fil0, .mapa-wrap svg .str0 { display: none; } /* esconde o contorno dos países vizinhos */
.mapa-wrap svg [style*="e6e6e6"] { display: none; } /* esconde a massa de terra cinza de fundo, deixa só o Brasil */
.mapa-wrap svg [class*="Regiao"] { transition: fill 0.18s ease; cursor: pointer; }
.mapa-wrap svg .RegiaoNorte { fill: #b8b8b8; }
.mapa-wrap svg .RegiaoNordeste { fill: #d2d2d2; }
.mapa-wrap svg .RegiaoCentroOeste { fill: #e0e0e0; }
.mapa-wrap svg .RegiaoSudeste { fill: #c4c4c4; }
.mapa-wrap svg .RegiaoSul { fill: #cccccc; }
.mapa-wrap svg [id^="Região"] { display: none; }
.mapa-wrap[data-hover="Norte"] svg .RegiaoNorte,
.mapa-wrap[data-hover="Nordeste"] svg .RegiaoNordeste,
.mapa-wrap[data-hover="CentroOeste"] svg .RegiaoCentroOeste,
.mapa-wrap[data-hover="Sudeste"] svg .RegiaoSudeste,
.mapa-wrap[data-hover="Sul"] svg .RegiaoSul { fill: var(--brand); }

/* ---------- página Cidades e Estados ---------- */
.estados { max-width: 72rem; margin: 2rem auto 3rem; padding: 0 1rem; }
.estados-intro { color: var(--ink); font-size: 1.02rem; line-height: 1.6; margin: 0 0 0.75rem; max-width: 60rem; }
.simulados-intro { color: var(--ink); font-size: 1.1rem; line-height: 1.6; font-weight: 500; margin: 0 0 1rem; }
/* CTA discreta do topo (só um "Fazer simulado →"); a CTA cheia fica no fim. */
.simulados-topo-cta { margin: 0 0 2rem; }
/* Mockup do simulado (mesma prévia da home da plataforma, recriada em HTML). */
.sim-mockup { margin: 0 0 2.5rem; }
.sim-janela { border-radius: 0.9rem; overflow: hidden; box-shadow: 0 18px 44px rgba(16, 7, 29, 0.28); border: 1px solid rgba(255,255,255,0.08); max-width: 34rem; margin: 0 auto; }
.sim-janela-barra { display: flex; gap: 0.4rem; align-items: center; padding: 0.6rem 0.85rem; background: #241640; }
.sim-janela-barra span { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.28); }
.sim-janela-corpo { background: linear-gradient(160deg, #1b1033, var(--night)); padding: 1.1rem; color: #fff; }
.sim-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.sim-topo-tit { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.7); }
.sim-topo-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--brand); }
.sim-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.sim-card { border-radius: 0.7rem; padding: 0.9rem; display: flex; flex-direction: column; }
.sim-card-dia { background: linear-gradient(135deg, rgba(253,106,24,0.38), rgba(124,58,237,0.34)); }
.sim-card-eyebrow { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: rgba(255,255,255,0.72); }
.sim-card-tit { margin-top: 0.2rem; font-size: 0.9rem; font-weight: 800; }
.sim-card-sub { margin-top: 0.15rem; font-size: 0.72rem; color: rgba(255,255,255,0.72); }
.sim-card-btn { margin-top: 0.7rem; align-self: flex-start; background: var(--brand); color: #fff; font-size: 0.68rem; font-weight: 800; padding: 0.35rem 0.7rem; border-radius: 0.4rem; }
.sim-card-novo { align-items: center; justify-content: center; text-align: center; border: 1px dashed rgba(255,255,255,0.22); gap: 0.35rem; }
.sim-plus { font-size: 1.4rem; line-height: 1; color: rgba(255,255,255,0.7); }
.sim-card-novo-tit { font-size: 0.72rem; font-weight: 700; }
.sim-banner { margin-top: 0.7rem; display: flex; gap: 0.55rem; align-items: flex-start; border: 1px solid rgba(253,106,24,0.3); background: rgba(253,106,24,0.12); border-radius: 0.7rem; padding: 0.7rem; }
.sim-banner-ico { flex: none; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 0.4rem; background: var(--brand); color: #fff; font-size: 0.8rem; font-weight: 800; }
.sim-banner-tit { display: block; font-size: 0.72rem; font-weight: 800; }
.sim-banner-sub { display: block; font-size: 0.66rem; line-height: 1.35; color: rgba(255,255,255,0.72); }
.sim-stats { margin-top: 0.9rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; text-align: center; }
.sim-stat { background: rgba(255,255,255,0.06); border-radius: 0.6rem; padding: 0.6rem 0.3rem; }
.sim-stat-v { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--brand); }
.sim-stat-l { display: block; font-size: 0.6rem; color: rgba(255,255,255,0.7); line-height: 1.2; margin-top: 0.15rem; }
.sim-mockup-cap { margin-top: 0.7rem; text-align: center; font-size: 0.82rem; color: var(--ink-soft); }
@media (max-width: 420px) { .sim-cards { grid-template-columns: 1fr; } }
.estados-sub { color: var(--ink-soft); margin: 0 0 1.5rem; }
/* Busca de estado: filtra ao vivo os cartões de "Por estado" (mesmo visual da busca do calendário) */
.estado-busca { display: flex; align-items: center; gap: 0.6rem; max-width: 32rem; margin: 0 0 2rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card); padding: 0.15rem 0.9rem; transition: border-color 0.18s, box-shadow 0.18s; }
.estado-busca:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.estado-busca-ico { display: flex; color: var(--brand); }
.estado-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.95rem; padding: 0.7rem 0; color: var(--ink); }
.por-estado .uf-card[hidden] { display: none; }
.uf-vazio-busca { color: var(--ink-soft); margin: 1rem 0 0; }
/* Por estado: cartões com a sigla + o nome do estado, em duas colunas (como na referência) */
.por-estado-titulo { font-size: 1.25rem; font-weight: 800; color: var(--ink-titulo); margin: 2rem 0 1rem; }
.uf-grade { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .uf-grade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .uf-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .uf-grade { grid-template-columns: 1fr; } }
.uf-card { display: flex; align-items: center; gap: 0.85rem; background: var(--card); border: 1px solid var(--border); border-radius: 0.9rem; padding: 0.8rem 1rem; box-shadow: var(--sombra-card); font-family: var(--font-display); transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
.uf-sigla { flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 0.6rem; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 0.82rem; }
.uf-nome { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
a.uf-card:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(253, 106, 24, 0.14); transform: translateY(-1px); }
.uf-card.ativo { border-color: var(--estado); background: var(--estado-soft); box-shadow: 0 6px 18px rgba(124, 58, 237, 0.18); }
.uf-card.ativo .uf-sigla { background: var(--estado); color: #fff; }
.uf-card.uf-vazia { opacity: 0.5; }
.uf-card.uf-vazia .uf-sigla { background: var(--muted); color: var(--ink-soft); }

/* ---------- rodapé ---------- */
/* Mesmo rodapé da página inicial: uma linha só, clara, com um filete em cima —
   logo à esquerda, links no meio, direitos à direita. */
.rodape { background: var(--card); border-top: 1px solid var(--border); color: var(--ink-soft); margin-top: 3rem; }
/* 78rem + o mesmo padding do topo: a logo do rodapé cai na mesma coluna da logo do header */
/* nowrap nos três blocos: a logo fica colada na ponta esquerda e o copyright na
   direita, aconteça o que acontecer. Quem cede é o miolo — são 9 links, e sem
   isso eles enchiam a linha e jogavam o copyright para uma segunda linha. */
.rodape-inner { max-width: 78rem; margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.6rem 1.25rem; }
.rodape-marca { flex-shrink: 0; display: flex; align-items: center; }
.rodape-marca img { height: 34px; width: auto; object-fit: contain; }
.rodape-links { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.6rem; font-weight: 600; font-size: 0.8rem; }
.rodape-links a:hover { color: var(--ink); }
.copy { flex-shrink: 0; font-size: 0.75rem; white-space: nowrap; }
/* No celular a linha única não cabe: empilha logo → links → copyright. */
@media (max-width: 640px) { .rodape-inner { flex-wrap: wrap; justify-content: flex-start; } .rodape-links { flex-basis: 100%; justify-content: flex-start; } .copy { width: 100%; } }

/* ---------- Vídeos em alta (reels do Instagram; destaque toca inline via modal) ---------- */
.va-bloco { max-width: 72rem; margin: 3.5rem auto 0; padding: 0 1rem; }
.va-topo { margin-bottom: 1.25rem; }
.va-cabeca { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.va-titulo { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--ink-titulo); }
.va-barra { height: 3px; width: 4rem; border-radius: 999px; margin-top: 0.45rem; background: linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 62%, #962fbf 90%); }
/* Botão "Seguir": pílula discreta que ganha o gradiente do Instagram no hover —
   convida a seguir sem competir com o "Ver tudo no Instagram" lá embaixo. */
.va-perfil { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; white-space: nowrap; transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s; }
.va-perfil svg { width: 16px; height: 16px; flex-shrink: 0; }
.va-perfil:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 62%, #962fbf 90%); box-shadow: 0 4px 14px rgba(214, 41, 118, 0.3); }

/* palco escuro que agrupa os 4 cards + o botão */
.va-palco { background: var(--night); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; padding: 1.1rem; box-shadow: 0 16px 40px rgba(16, 7, 29, 0.22); }

/* 4 cards em pé, lado a lado e do mesmo tamanho: capa em 9/16 e título embaixo */
/* minmax(0,1fr) deixa as colunas encolherem — sem isso a grade estoura a largura */
.va-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.va-gitem { display: flex; flex-direction: column; gap: 0.55rem; align-items: stretch; padding: 0.4rem; border-radius: 0.6rem; cursor: pointer; background: var(--card); border: 0; text-align: left; font: inherit; color: inherit; transition: background 0.15s; width: 100%; height: 100%; }
.va-gitem:hover { background: var(--muted); }
.va-gthumb { position: relative; flex: none; aspect-ratio: 9 / 16; width: 100%; border-radius: 0.5rem; overflow: hidden; }
.va-gthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.va-gitem:hover .va-gthumb img { transform: scale(1.04); }
.va-badge { position: absolute; left: 0.55rem; top: 0.55rem; z-index: 3; background: var(--brand); color: #fff; font-weight: 800; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 999px; }
.va-miniplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 999px; background: rgba(9, 4, 17, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.88); display: grid; place-items: center; transition: transform 0.2s; }
.va-gitem:hover .va-miniplay { transform: translate(-50%, -50%) scale(1.1); }
.va-miniplay svg { width: 13px; height: 13px; fill: #fff; margin-left: 2px; }
/* margin-top:auto cola o texto na base — os títulos dos 4 cards ficam alinhados
   mesmo quando um ocupa 1 linha e o outro 2 */
.va-gtexto { min-width: 0; flex: none; margin-top: auto; }
.va-gt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.va-gitem:hover .va-gt { color: var(--brand); }
.va-gd { font-size: 0.68rem; color: var(--ink-soft); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.va-vertodos { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.7rem; background: linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 62%, #962fbf 90%); color: #fff; font-weight: 800; font-size: 0.82rem; border-radius: 0.6rem; padding: 0.7rem 1rem; }

/* janelinha (modal) com o player do Instagram */
.va-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(9, 4, 17, 0.82); }
.va-modal[hidden] { display: none; }
.va-modal-box { width: min(400px, 100%); }
.va-modal-box iframe { width: 100%; height: min(80vh, 720px); border: 0; border-radius: 0.9rem; background: #fff; }
.va-modal-x { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 1.1rem; cursor: pointer; }
.va-modal-x:hover { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 760px) {
  .va-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .va-gt { font-size: 0.78rem; }
}

/* ---------- Carreiras: grade de áreas (4x2 no desktop) ---------- */
.carreiras { max-width: 72rem; margin: 3.5rem auto 0; padding: 0 1rem; }
.carreiras-topo { margin-bottom: 0.4rem; }
.carreiras-titulo { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--ink-titulo); }
.carreiras-barra { height: 3px; width: 4rem; border-radius: 999px; margin-top: 0.45rem; background: var(--gradient-cta); }
.carreiras-desc { margin: 0.7rem 0 1.4rem; color: var(--ink-soft); font-size: 0.98rem; }
.carreiras-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
/* Card = foto escura + véu em gradiente + ícone branco no topo + nome embaixo */
.carr-card { position: relative; aspect-ratio: 1 / 1.28; overflow: hidden; border-radius: 1rem; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; display: block; background: var(--night); box-shadow: 0 6px 18px oklch(0.18 0.02 280 / 0.12); }
.carr-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s; }
.carr-card:hover .carr-foto { transform: scale(1.06); }
/* Véu contínuo do topo à base: escurece a foto inteira de forma uniforme e vai
   ficando mais denso embaixo, onde o texto precisa de contraste. */
/* Véu do card: dá contraste ao texto embaixo e deixa a foto respirar em cima.
   Da metade para baixo é intocável (é onde o texto cai); do topo até 45% é o
   que dá pra clarear — hoje o topo está bem leve (12%) para o cenário aparecer. */
.carr-veu { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 3, 15, 0.93) 0%, rgba(7, 3, 15, 0.84) 20%, rgba(7, 3, 15, 0.6) 45%, rgba(7, 3, 15, 0.28) 72%, rgba(7, 3, 15, 0.12) 100%); }
.carr-conteudo { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1rem; text-align: left; }
/* Ícone: círculo laranja com símbolo branco, no mesmo estilo dos selos da
   página inicial (Questões reais / Revisão que fixa / Mentor). */
.carr-cabeca { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.carr-ico { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 0.45rem; background: linear-gradient(135deg, #ff9a4d, var(--brand)); color: #fff; box-shadow: 0 3px 10px rgba(253, 106, 24, 0.45); flex: none; }
.carr-ico svg { width: 1rem; height: 1rem; }
.carr-txt { margin-top: auto; }
.carr-nome { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1.2; }
.carr-desc { display: block; margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
/* "Saiba mais": pílula transparente com borda branca (o estilo que o ícone
   tinha antes). Fica abaixo do texto e vira laranja no hover do card. */
.carr-saiba { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.85rem; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.12); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; backdrop-filter: blur(4px); transition: background 0.18s, border-color 0.18s; }
.carr-saiba-seta { transition: transform 0.18s; }
.carr-card:hover .carr-saiba { background: var(--brand); border-color: var(--brand); }
.carr-card:hover .carr-saiba-seta { transform: translateX(3px); }
.carr-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--brand); transition: box-shadow 0.18s; pointer-events: none; }
.carr-card:hover::after { box-shadow: inset 0 0 0 2px var(--brand); }

@media (max-width: 860px) { .carreiras-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .carr-card { aspect-ratio: 1 / 1.78; } }
@media (max-width: 460px) { .carreiras-grade { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } .carr-conteudo { padding: 0.75rem; } .carr-nome { font-size: 1.05rem; } .carr-desc { font-size: 0.72rem; } .carr-ico { width: 1.55rem; height: 1.55rem; } .carr-ico svg { width: 0.85rem; height: 0.85rem; } }

/* "Outras carreiras" dentro de uma página de carreira: fileira pequena, só ícone
   + nome, as sete numa linha só no desktop. É atalho, não vitrine. */
.carreiras-mini-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6rem; margin-top: 1rem; }
.carr-mini { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; padding: 0.9rem 0.5rem; border: 1px solid var(--divisor); border-radius: 0.8rem; background: var(--card); transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; }
.carr-mini:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 6px 16px oklch(0.18 0.02 280 / 0.12); }
.carr-mini-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; background: var(--brand-soft); color: var(--brand); }
.carr-mini-ico svg { width: 1.25rem; height: 1.25rem; }
.carr-mini-nome { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--ink-titulo); line-height: 1.2; }
@media (max-width: 860px) { .carreiras-mini-grade { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .carreiras-mini-grade { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } }

/* ---------- página de uma carreira (/carreira/<slug>/) ---------- */
.carreira { max-width: 78rem; margin: 0 auto; padding: 0 1.5rem 3rem; }
/* Topo: igual ao hero da plataforma — a foto da carreira de ponta a ponta na tela
   inteira (full-bleed, sem borda lateral), com o texto sobre o escuro à esquerda e
   a imagem aparecendo à direita. O véu é horizontal (escuro na esquerda ->
   transparente na direita). Fica fora do container `.carreira`, por isso ocupa
   toda a largura. Mesma foto dos cards -> custo zero de imagem. */
.carr-hero { position: relative; margin: 0 0 2.5rem; min-height: 20rem; display: flex; align-items: center; background-color: var(--night); background-position: center 18%; background-size: cover; background-repeat: no-repeat; overflow: hidden; }
.carr-hero-veu { position: absolute; inset: 0; background: linear-gradient(to right, rgba(9, 5, 17, 0.97) 0%, rgba(9, 5, 17, 0.9) 32%, rgba(9, 5, 17, 0.55) 58%, rgba(9, 5, 17, 0.12) 82%, rgba(9, 5, 17, 0) 100%); }
.carr-hero-conteudo { position: relative; max-width: 78rem; width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem; color: #fff; }
.carr-hero-ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.14); color: #fff; backdrop-filter: blur(4px); margin-bottom: 0.9rem; }
.carr-hero-ico svg { width: 1.5rem; height: 1.5rem; }
.carr-hero-eyebrow { margin: 0; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand); }
.carr-hero-titulo { margin: 0.25rem 0 0.7rem; font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1.05; }
.carr-hero-desc { margin: 0; max-width: 46rem; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }

/* Parágrafo de apresentação da área, logo abaixo do topo. */
.carr-intro-area { margin: 2rem 0 0; max-width: 52rem; font-size: 1.08rem; line-height: 1.7; color: var(--ink); }

.carr-secao { margin-top: 2.75rem; }
.carr-secao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.carr-secao-titulo { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink-titulo); }
/* Botão "Ver todas as matérias": mesmo pill cinza com borda dos botões "Ver tudo de..." */
.carr-secao-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 1rem; white-space: nowrap; transition: background 0.18s, color 0.18s; }
.carr-secao-link:hover { background: var(--muted); color: var(--ink); }
.carr-secao > .grade, .carr-secao > .mat-grade { margin-top: 1.25rem; }
/* Preview mais alto nos "Artigos sobre <carreira>": as capas de design (TCU, TJ)
   ficavam cortadas em cima/embaixo na proporção padrão; aqui ganham respiro. */
.carr-secao > .grade .cartao-img { aspect-ratio: 16 / 8.625; }
.carr-vazio { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }
.carr-vazio a { color: var(--brand); font-weight: 700; }

/* Concursos que a pessoa pode fazer: três por linha (3 em cima, 3 embaixo), cada
   card com uma foto da área à esquerda e o ícone num selo por cima da foto. */
.carr-concursos { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.carr-concurso { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--divisor); border-left: 3px solid var(--brand); border-radius: 0.7rem; background: var(--card); }
.carr-concurso-foto { position: relative; flex: 0 0 6.5rem; background-color: var(--night); background-position: center; background-size: cover; background-repeat: no-repeat; }
/* Escurece um tico a foto para o selo do ícone sempre ter contraste. */
.carr-concurso-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 3, 15, 0.35), rgba(7, 3, 15, 0.1)); }
.carr-concurso-ico { position: absolute; top: 0.55rem; left: 0.55rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.55rem; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(4px); }
.carr-concurso-ico svg { width: 1.1rem; height: 1.1rem; }
.carr-concurso-txt { padding: 0.9rem 1.05rem; }
.carr-concurso h3 { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink-titulo); }
.carr-concurso p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 780px) { .carr-concursos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .carr-concursos { grid-template-columns: 1fr; } }
/* Card de concurso clicável (leva à página própria do concurso) */
.carr-concurso-link { text-decoration: none; color: inherit; transition: box-shadow 0.18s, transform 0.15s, border-left-color 0.18s; }
.carr-concurso-link:hover { box-shadow: var(--sombra-card); transform: translateY(-2px); }

/* Páginas de local (região e estado): hero com foto, intro e chips de UF */
.local-hero { position: relative; border-radius: 0.9rem; overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; background-size: cover; background-position: center; margin: 0.5rem 0 1.4rem; }
@media (max-width: 640px) { .local-hero { min-height: 230px; } }
/* Nas páginas de região/estado, o card do artigo mostra a capa inteira (16/9),
   sem cortar o topo — evita o "EDITAL" colado na borda de cima. */
.estados .cartao-img { aspect-ratio: 16 / 9; }
.local-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,3,15,0.82), rgba(7,3,15,0.15) 60%, rgba(7,3,15,0.05)); }
.local-hero-txt { position: relative; z-index: 1; padding: 1.4rem 1.5rem; color: #fff; }
.local-hero-eyebrow { margin: 0 0 0.2rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.local-hero-txt h1 { margin: 0; color: #fff; }
.local-intro { color: var(--ink-soft); line-height: 1.65; margin: 0 0 1.2rem; }
.local-destaque { color: var(--brand); }
.local-contexto { margin: 0 0 1.6rem; }
.local-pontos { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1.6rem; }
.local-pontos li { position: relative; padding-left: 1.7rem; color: var(--ink-soft); line-height: 1.5; }
.local-pontos li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 800; }
.local-pontos strong { display: block; color: var(--ink-titulo); font-weight: 700; margin-bottom: 0.1rem; }
@media (max-width: 640px) { .local-pontos { grid-template-columns: 1fr; } }
.local-subtitulo { font-family: var(--font-display); font-size: 1.15rem; margin: 1.2rem 0 0.6rem; color: var(--ink-titulo); }
.uf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.4rem; }
.uf-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.8rem; border-radius: 999px; border: 1px solid var(--divisor); background: var(--card); font-size: 0.9rem; color: var(--ink-titulo); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; }
.uf-chip b { color: var(--brand); font-weight: 800; }
a.uf-chip:hover { border-color: var(--brand); box-shadow: var(--sombra-card); transform: translateY(-1px); }
.uf-chip-off { opacity: 0.5; }
.uf-chip-n { font-size: 0.75rem; color: var(--ink-soft); background: var(--night); border-radius: 999px; padding: 0.05rem 0.45rem; }
.local-breadcrumb { font-size: 0.85rem; color: var(--ink-soft); margin: 0.2rem 0 0.6rem; }
.local-breadcrumb a { color: var(--brand); text-decoration: none; }
.local-busca { margin: 1.8rem 0; }
.local-busca input { width: 100%; max-width: 460px; padding: 0.65rem 0.9rem; border-radius: 0.7rem; border: 1px solid var(--divisor); background: var(--card); color: var(--ink-titulo); font-size: 0.95rem; }
.carr-concurso-seta { color: var(--brand); font-weight: 800; }

/* ---------- página de um concurso (/carreira/<area>/<concurso>/) ---------- */
.conc-trilha { max-width: 72rem; margin: 1rem auto 0; padding: 0 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.conc-trilha a { color: var(--ink-soft); text-decoration: none; }
.conc-trilha a:hover { color: var(--brand); }
.conc-trilha > span { margin: 0 0.35rem; }
.conc-trilha-atual { color: var(--ink); font-weight: 700; }
.conc-fatos { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 0.5rem; }
.conc-fato { flex: 1 1 14rem; border: 1px solid var(--divisor); border-radius: 0.7rem; background: var(--card); padding: 0.8rem 1rem; }
.conc-fato-rot { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); font-weight: 700; }
.conc-fato-val { display: block; margin-top: 0.2rem; font-size: 0.95rem; color: var(--ink); line-height: 1.4; }
.conc-fato-val a { color: var(--brand); text-decoration: none; font-weight: 700; }
.conc-cargos { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.conc-cargos li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); }
.conc-cargos li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--brand); }
.conc-cargos strong { color: var(--ink); font-weight: 700; }
.conc-materias { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.conc-materia { display: inline-block; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--brand-soft); color: #a63c00; font-size: 0.85rem; font-weight: 600; }
.conc-texto { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft); }
.conc-irmaos { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.conc-irmao { display: block; border: 1px solid var(--divisor); border-radius: 0.7rem; background: var(--card); padding: 0.9rem 1.05rem; text-decoration: none; transition: box-shadow 0.18s, transform 0.15s; }
.conc-irmao:hover { box-shadow: var(--sombra-card); transform: translateY(-2px); }
.conc-irmao-nome { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink-titulo); }
.conc-irmao-desc { display: block; margin-top: 0.25rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.conc-voltar { margin: 2rem 0 0; }
.conc-voltar a { color: var(--brand); font-weight: 700; text-decoration: none; }
@media (max-width: 560px) { .conc-irmaos { grid-template-columns: 1fr; } }

.carr-cta { margin-top: 3rem; }

/* "Encontre seu concurso ideal": chamada + banner escuro que leva ao quiz.
   Reproduz o banner final da plataforma (imagem "caminho" + degradê + botão). */
.carr-ideal-chamada { margin: 3rem 0 1rem; }
.carr-ideal-chamada p { margin: 0; max-width: 46rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.35; color: var(--ink-titulo); }
/* Trilho do banner na home: mesma largura e respiro das seções vizinhas (Carreiras, Calendário). */
.ci-banner-trilho { max-width: 72rem; margin: 3.5rem auto 0; padding: 0 1rem; }
/* Sem max-width próprio: acompanha a largura do banner (72rem do trilho) para o
   texto alinhar com a imagem no desktop, em vez de quebrar bem antes. */
/* Texto de apoio do banner do quiz: corpo regular, não destaque (Kleber, 07/08/2026) */
.ci-lead { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.6; font-weight: 400; color: var(--ink); }
/* O banner é um <a>: o clique vale na área toda, não só no botão. */
.ci-banner { display: block; position: relative; overflow: hidden; border-radius: 1.5rem; background-color: var(--night); background-position: center right; background-size: cover; background-repeat: no-repeat; transition: filter 0.18s; }
.ci-banner:hover { filter: brightness(1.06); }
.ci-banner-veu { position: absolute; inset: 0; background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.82) 45%, rgba(0, 0, 0, 0.35) 72%, transparent 100%); }
.ci-banner-conteudo { position: relative; padding: 3rem 2rem; max-width: 40rem; min-height: 15rem; display: flex; flex-direction: column; justify-content: center; }
.ci-banner-conteudo h2 { margin: 0; font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; line-height: 1.12; color: #fff; }
.ci-banner-conteudo h2 span { color: var(--brand); }
.ci-banner-conteudo > p { margin: 0.9rem 0 0; font-size: 1rem; color: rgba(255, 255, 255, 0.82); }
.ci-banner-botao { margin-top: 1.6rem; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gradient-cta); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; padding: 0.75rem 1.4rem; border-radius: 0.6rem; box-shadow: 0 6px 18px oklch(0.62 0.2 35 / 0.35); transition: filter 0.18s; }
.ci-banner-botao:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
  .carr-ideal-chamada p { font-size: 1.15rem; }
  .ci-banner-conteudo { padding: 2.2rem 1.4rem; }
  .ci-banner-conteudo h2 { font-size: 1.7rem; }
}
/* A grade "Outras carreiras" no fim da página não precisa do respiro extra que ela
   tem na home (lá vem depois do calendário). */
.carreira .carreiras { margin-top: 3rem; padding: 0; max-width: none; }

@media (max-width: 760px) {
  .carr-hero { min-height: 17rem; }
  .carr-hero-conteudo { padding: 1.5rem; }
  .carr-hero-titulo { font-size: 2rem; }
  .carr-hero-desc { font-size: 0.98rem; }
}

/* ---------- página Editais (abas pré/pós) ---------- */
.editais { max-width: 78rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.fase-abas { display: flex; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--divisor); padding-bottom: 1rem; }
/* Atalho para os editais verticalizados (materiais gratuitos). Entra na fila das
   abas, com o tamanho delas, mas é link e não filtro: fica no roxo dos editais e
   guarda a seta → para avisar que sai da página. */
/* Mesmo visual das abas de filtro (decisão do Kleber 30/07): pílula branca,
   texto suave — só a setinha → sinaliza que levam a outra página (verticalizados
   e gabaritos NÃO filtram, navegam para a área própria). */
.fase-atalho { align-self: center; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); background: var(--card); font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); padding: 0.55rem 1.1rem; border-radius: 999px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.fase-atalho:hover { background: var(--muted); color: var(--ink); }
.fase-aba { border: 1px solid var(--border); background: var(--card); font: inherit; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.fase-aba:hover { background: var(--muted); color: var(--ink); }
.fase-conta { font-size: 0.78rem; font-weight: 800; opacity: 0.6; }
.fase-aba.ativa { background: var(--night); border-color: var(--night); color: #fff; }
.fase-aba-pre.ativa { background: var(--fase-pre); border-color: var(--fase-pre); }
.fase-aba-pos.ativa { background: var(--fase-pos); border-color: var(--fase-pos); }
.fase-desc { color: var(--ink-soft); font-size: 0.9rem; margin: 1rem 0 0; }
.editais .grade { margin-top: 1rem; }
/* Card 5% mais alto que o corte padrão (16/7.5): no achatado, o texto central
   da capa encostava no chip EDITAL. A arte fica como está — o texto centralizado
   é o que sobrevive aos outros cortes do site. (Kleber, 30/07/2026) */
.editais .cartao-img { aspect-ratio: 16 / 8.27; }
.editais .cartao.oculto { display: none; }

/* ---------- página Materiais gratuitos ---------- */
.materiais { max-width: 78rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.materiais-sub { color: var(--ink-soft); font-size: 1rem; margin: 0 0 2rem; max-width: 44rem; }
/* Menu de filtros à esquerda + texto e trilhos à direita. O menu ocupa as duas
   linhas, então ele começa na mesma altura do texto — sem isso o texto empurrava
   o menu para baixo e sobrava um vazio à esquerda.
   min-width: 0 nas colunas: sem isso, os trilhos (que rolam de lado) esticam a
   coluna até caber todas as capas e a página inteira vaza. */
.mat-layout { display: grid; grid-template-columns: 16rem 1fr; column-gap: 2rem; align-items: start; }
.mat-layout > * { min-width: 0; }
.mat-filtros { grid-column: 1; grid-row: 1 / span 2; }
.materiais-topo { grid-column: 2; grid-row: 1; }
.materiais-topo .materiais-sub { grid-column: auto; grid-row: auto; margin: 0 0 0.75rem; }
.materiais-topo .secao-busca { margin: 0; }
.mat-busca-vazia { grid-column: 2; grid-row: 3; color: var(--ink-soft); }
.mat-busca-vazia a { color: var(--brand); font-weight: 700; }
.mat-trilhos { grid-column: 2; grid-row: 2; }

.mat-filtros { position: sticky; top: 5.5rem; }
/* Cabeçalho do menu sem o laranja: a faixa laranja do título da página já está
   logo acima, e dois laranjas fortes no mesmo canto brigavam entre si. */
.mat-filtros-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--divisor); border-radius: 0.6rem; overflow: hidden; background: var(--card); }
.mat-filtros-lista li + li { border-top: 1px solid var(--divisor); }
.mat-filtro { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--ink-soft); padding: 0.7rem 1rem; text-decoration: none; }
.mat-filtro:not(.mat-filtro-vazio) { cursor: pointer; transition: background 0.15s, color 0.15s; }
.mat-filtro:not(.mat-filtro-vazio):hover { background: var(--muted); color: var(--ink); }
.mat-filtro.ativo { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
/* Link do quiz no menu: igual aos outros itens (cinza) por padrão; ao passar o mouse
   ou clicar fica laranja e bold, como o item ativo. */
.mat-quiz:hover, .mat-quiz:focus, .mat-quiz:active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
/* Categoria sem material: fica na lista para mostrar o que vem por aí, mas apagada */
.mat-filtro-vazio { opacity: 0.45; cursor: default; }

/* Trilhos no estilo Netflix: um tema por fileira, os materiais correndo para o
   lado. Cada trilho é independente — rola sozinho e tem as próprias setas. */
.mat-trilho { margin-bottom: 2.5rem; }
.mat-trilho[hidden] { display: none; }
.mat-trilho-titulo { font-size: 1.15rem; font-weight: 800; color: var(--ink-titulo); margin: 0 0 0.9rem; }
.mat-esteira-caixa { position: relative; }
/* padding no topo/base para a capa poder "subir" no hover sem ser cortada pelo
   overflow da esteira; as margens negativas devolvem o espaço que ele ocupou. */
.mat-esteira { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 0.5rem 0 1rem; margin: -0.5rem 0 -1rem; scrollbar-width: none; }
.mat-esteira::-webkit-scrollbar { display: none; }
.mat-esteira > .mat-card { flex: 0 0 180px; scroll-snap-align: start; }
/* Setas: só no ponteiro do mouse — no celular arrasta com o dedo. */
.mat-seta { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mat-seta { position: absolute; top: 0; bottom: 2.6rem; z-index: 2; display: grid; place-items: center; width: 2.8rem; border: 0; cursor: pointer; font-size: 2rem; line-height: 1; color: var(--ink); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(4px); box-shadow: 0 2px 12px rgba(16, 7, 29, 0.16); border-radius: 0.6rem; transition: background 0.18s; }
  .mat-seta:hover { background: #fff; }
  .mat-seta[hidden] { display: none; }
  .mat-seta-esq { left: -0.6rem; }
  .mat-seta-dir { right: -0.6rem; }
}

.mat-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem 1.25rem; }
.mat-card { display: block; }
/* Capa em pé, proporção de pôster de filme (2:3) */
.mat-capa { display: block; position: relative; aspect-ratio: 2 / 3; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 6px 18px rgba(16, 7, 29, 0.14); transition: transform 0.25s, box-shadow 0.25s; container-type: inline-size; }
.mat-card:hover .mat-capa { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 7, 29, 0.22); }
.mat-capa-img { width: 100%; height: 100%; object-fit: cover; }
.mat-titulo { margin: 0.7rem 0 0; font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.mat-card:hover .mat-titulo { text-decoration: underline; }

/* Pôster montado em CSS: a capa padrão de todo material (o Kleber sobe só o PDF).
   Reproduz as capas oficiais da Revolução — rótulo do tipo em cima, manchete
   gigante em fonte condensada pesada (Anton), um detalhe menor e mais leve
   embaixo (Oswald) e o selo "Baixe grátis" contornado. Cada TIPO tem sua cor e
   sua textura geométrica, então um Calendário é reconhecível como Calendário sem
   precisar de arte. Se um material tiver capa.webp na pasta, ela entra no lugar. */
.mat-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1.15rem; color: #fff; overflow: hidden; }
/* Texturas das capas oficiais. Laranja: hexágonos concêntricos (linhas em volta do
   texto, textura-hexagonos.svg). Roxo: papel quadriculado. Noite: poucos riscos
   diagonais longos "cortando" o fundo. */
.mat-poster-laranja { background: url("textura-hexagonos.svg") center / 118% auto no-repeat, linear-gradient(160deg, #fd6a18 0%, #df4e00 100%); }
.mat-poster-roxo { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 26px), linear-gradient(160deg, #7c3aed 0%, #5b21b6 100%); }
.mat-poster-noite { background: repeating-linear-gradient(48deg, transparent 0 78px, rgba(253,106,24,0.22) 78px 79px, transparent 79px 96px), repeating-linear-gradient(-48deg, transparent 0 104px, rgba(255,255,255,0.06) 104px 105px, transparent 105px 128px), linear-gradient(160deg, #241536 0%, #09030f 100%); }
/* Selo do tipo: símbolo da Revolução em branco + texto laranja, como nas capas
   oficiais. O símbolo (laranja) vira branco por filtro, sem precisar de outro
   arquivo. */
.mat-poster-tipo { align-self: center; display: inline-flex; align-items: center; gap: 0.42em; max-width: 100%; font-family: "Oswald", var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: #fff; padding: 0.3rem 0.72rem; border-radius: 999px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); }
.mat-poster-ico { height: 1.1em; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
/* Título em linhas com hierarquia de tamanhos (como as capas oficiais): a palavra
   em foco fica gigante e o resto menor. Fonte de cartaz (Anton) nas linhas grandes,
   Oswald na linha pequena. Tudo fluido pela largura do card (cqw), então enche o
   card na grade e cresce numa capa maior, sempre cabendo. */
.mat-poster-titulo { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; margin-top: 0.2rem; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28); }
.mat-linha { font-family: "Anton", var(--font-display); line-height: 1.06; letter-spacing: 0.005em; overflow-wrap: anywhere; }
/* Espaço entre um nível e o seguinte (em em do nível de baixo, então a linha
   gigante ganha um respiro proporcional e as linhas não colam). */
.mat-linha + .mat-linha { margin-top: 0.16em; }
.mat-gigante { font-size: clamp(2.4rem, 28cqw, 5.4rem); line-height: 0.92; }
/* "grande": fonte de cartaz condensada (Anton), grande o bastante para preencher a
   largura — só menor que a linha gigante, que continua sendo o destaque. */
.mat-grande { font-size: clamp(1.3rem, 13cqw, 2.6rem); }
.mat-media { font-size: clamp(1rem, 9.5cqw, 1.9rem); }
.mat-pequena { font-family: "Oswald", var(--font-display); font-weight: 500; font-size: clamp(0.82rem, 7cqw, 1.45rem); line-height: 1.1; letter-spacing: 0.01em; }
.mat-linha + .mat-pequena { margin-top: 0.5rem; }
.mat-poster-noite .mat-pequena { color: var(--brand); }
.mat-poster-selo { margin-top: auto; align-self: center; font-family: "Oswald", var(--font-display); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--night); background: #fff; border: 0; padding: 0.46rem 1.2rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); }

/* ---------- página de um material ---------- */
.material { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }
.material-volta { margin-bottom: 1.5rem; font-size: 0.9rem; }
.material-volta a { color: var(--ink-soft); }
.material-volta a:hover { color: var(--brand); }
.material-topo { display: grid; grid-template-columns: 17rem 1fr; gap: 2.5rem; align-items: start; }
.material-capa { position: relative; aspect-ratio: 2 / 3; border-radius: 0.9rem; overflow: hidden; box-shadow: 0 14px 34px rgba(16, 7, 29, 0.2); container-type: inline-size; }
/* A capa do material é um botão: o "BAIXE GRÁTIS" da arte abre o mesmo modal
   de e-mail do botão "Baixar grátis" (pedido do Kleber, 11/08/2026). A classe
   .material-baixar entra só para o JS achar o botão; o visual de pílula dela
   (border-radius 999px, fundo laranja) precisa ser desfeito aqui, senão a capa
   vira um oval (bug visto em 11/08). Seletor duplo para vencer a especificidade. */
.material-capa.material-capa-btn, .material-capa-btn.material-baixar { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; text-align: inherit; font: inherit; border-radius: 0.9rem; }
.material-capa-btn:focus-visible { outline: 3px solid var(--roxo, #6d28d9); outline-offset: 3px; }
.material-capa .mat-poster { padding: 1.6rem; }
.material-info h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; margin: 0.6rem 0 0.8rem; line-height: 1.15; }
.mat-tipo-chip { display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 999px; color: #fff; }
.material-desc { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 1.6rem; max-width: 38rem; }
.material-baixar { border: 0; cursor: pointer; font: inherit; background: var(--gradient-cta); color: #fff; font-weight: 800; font-size: 1rem; padding: 0.85rem 2rem; border-radius: 999px; transition: filter 0.2s; }
.material-baixar:hover { filter: brightness(1.08); }
.material-obs { color: var(--ink-soft); font-size: 0.82rem; margin: 0.7rem 0 0; }

/* Lista de concursos em sanfona dentro de um artigo: cada concurso é uma linha
   clicável que abre os detalhes (pedido do Kleber). Bate o olho na lista toda e
   abre só o que interessa. O texto fica no HTML (o Google indexa aberto ou não). */
.lista-concursos { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.5rem 0 2rem; }
.lista-concursos details { border: 1px solid var(--border); border-radius: 0.7rem; background: var(--card); overflow: hidden; }
.lista-concursos summary { cursor: pointer; padding: 0.95rem 1.1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink-titulo); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lista-concursos summary::-webkit-details-marker { display: none; }
.lista-concursos summary::after { content: "+"; color: var(--brand); font-weight: 800; font-size: 1.4rem; line-height: 1; flex: none; }
.lista-concursos details[open] summary::after { content: "–"; }
.lista-concursos details[open] summary { border-bottom: 1px solid var(--divisor); }
.lc-corpo { padding: 1.1rem; }
.lc-corpo p { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.97rem; line-height: 1.65; }
.lc-corpo p a { color: var(--brand); font-weight: 600; text-decoration: none; }
.lc-corpo p a:hover { text-decoration: underline; }
.lc-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: 0.6rem; overflow: hidden; margin: 0 0 1rem; }
.lc-ficha > div { padding: 0.7rem 0.9rem; border-right: 1px solid var(--divisor); border-bottom: 1px solid var(--divisor); }
.lc-ficha dt { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 0.15rem; }
.lc-ficha dd { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink-titulo); }
.lc-link { margin: 0 !important; }
.lc-link a { font-weight: 700 !important; }

/* Compartilhar no fim do artigo (WhatsApp, Telegram, copiar link). */
.compart { margin: 2.75rem 0 0; padding: 1.4rem 1.2rem; background: var(--muted); border-radius: 0.95rem; text-align: center; }
/* Sem negrito e com quebra equilibrada em 2 linhas no celular (Kleber, 08/08/2026) */
.compart-titulo { display: block; font-weight: 400; color: var(--ink); font-size: 0.98rem; line-height: 1.5; margin: 0 auto 1rem; text-wrap: balance; }
.compart-botoes { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.compart-bt { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.15rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; text-decoration: none; border: none; cursor: pointer; color: #fff; transition: filter 0.15s, transform 0.15s; }
.compart-bt:hover { filter: brightness(1.07); transform: translateY(-1px); }
.compart-bt svg { width: 1.2rem; height: 1.2rem; flex: none; }
.compart-whats { background: #25d366; }
.compart-tele { background: #229ed9; }
.compart-copiar { background: var(--ink-titulo); }
.compart-copiar.copiado { background: var(--ed-gabaritos); }

/* Contexto + SEO do material (ficha, o que tem dentro, FAQ). Entra ABAIXO do
   bloco de download — o objetivo da página continua sendo o "Baixar grátis". */
.mat-contexto { margin-top: 3rem; max-width: 44rem; }
.mat-sec { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink-titulo); margin: 2.2rem 0 1rem; }
.mat-contexto .mat-sec:first-child { margin-top: 0; }
.mat-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: 0.85rem; overflow: hidden; margin: 0; }
.mat-ficha > div { padding: 0.85rem 1rem; border-right: 1px solid var(--divisor); border-bottom: 1px solid var(--divisor); }
.mat-ficha dt { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 0.2rem; }
.mat-ficha dd { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink-titulo); }
.mat-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.mat-checks li { display: flex; gap: 0.6rem; font-size: 1rem; }
.mat-checks svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--ed-gabaritos); margin-top: 0.2rem; }
/* FAQ sempre aberto: com pouco texto, mostrar tudo é melhor pro leitor (e o
   Google indexa igual, aberto ou fechado). Cada pergunta é um h3 (hierarquia
   boa pro SEO) com a resposta logo abaixo. */
.mat-faq { display: flex; flex-direction: column; gap: 1.2rem; }
.mat-faq-item { border-left: 3px solid var(--divisor); padding-left: 1rem; }
.mat-faq-q { font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; color: var(--ink-titulo); margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.mat-faq p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

.material-outros { margin-top: 4rem; }
.material-outros h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 1.2rem; }
.material-outros .mat-grade { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* ---------- popup do e-mail ---------- */
.mat-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.mat-modal[hidden] { display: none; }
.mat-modal-fundo { position: absolute; inset: 0; background: rgba(16, 7, 29, 0.6); backdrop-filter: blur(3px); }
.mat-modal-caixa { position: relative; background: var(--card); border-radius: 1rem; padding: 2rem; width: min(26rem, 100%); box-shadow: 0 24px 60px rgba(16, 7, 29, 0.3); text-align: center; }
.mat-modal-x { position: absolute; top: 0.6rem; right: 0.8rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.mat-modal-caixa h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.4rem; }
.mat-modal-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 1.4rem; }
.mat-modal-form { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; }
.mat-modal-label { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.mat-modal-input { border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.75rem 0.9rem; font: inherit; font-size: 0.95rem; color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.mat-modal-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.mat-modal-erro { color: #c0392b; font-size: 0.8rem; margin: 0; }
.mat-modal-enviar { margin-top: 0.4rem; border: 0; cursor: pointer; font: inherit; background: var(--gradient-cta); color: #fff; font-weight: 800; font-size: 1rem; padding: 0.8rem; border-radius: 999px; transition: filter 0.2s; }
.mat-modal-enviar:hover { filter: brightness(1.08); }
.mat-modal-rodape { color: var(--ink-soft); font-size: 0.75rem; margin: 1rem 0 0; }

@media (max-width: 900px) {
  /* Uma coluna só: o texto apresenta a página e vem primeiro; depois o menu, que
     deita e vira uma faixa rolável, e por fim os trilhos. */
  .mat-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .materiais-topo { grid-column: 1; grid-row: 1; }
  .mat-filtros { grid-column: 1; grid-row: 2; position: static; }
  .mat-trilhos { grid-column: 1; grid-row: 3; }
  .mat-busca-vazia { grid-column: 1; grid-row: 4; }
  .mat-filtros-lista { display: flex; overflow-x: auto; }
  .mat-filtros-lista li + li { border-top: 0; border-left: 1px solid var(--divisor); }
  .mat-filtro { white-space: nowrap; }
  .material-topo { grid-template-columns: 1fr; gap: 1.5rem; }
  .material-capa { max-width: 15rem; }
}
@media (max-width: 560px) {
  .materiais, .material { padding-left: 1rem; padding-right: 1rem; }
  .mat-grade { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0.8rem; }
  .mat-poster-titulo { font-size: 0.95rem; }
  .mat-titulo { font-size: 0.85rem; }
}
.mat-modal-opcional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.75; }

/* ---------- Calendário de provas ----------
   Grade mês a mês do ano, como no calendário do blog antigo: o concurseiro bate
   o olho e enxerga quais fins de semana já estão ocupados. Dia com prova acende
   em laranja; o dia de hoje ganha um anel roxo. */
.calendario { max-width: 72rem; margin: 2rem auto 3rem; padding: 0 1rem; }
.cal-intro { color: var(--ink-soft); margin: 0 0 1.5rem; max-width: 46rem; }

.cal-busca { display: flex; align-items: center; gap: 0.6rem; max-width: 32rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card); padding: 0.15rem 0.9rem; transition: border-color 0.18s, box-shadow 0.18s; }
.cal-busca:focus-within { border-color: var(--estado); box-shadow: 0 0 0 3px var(--estado-soft); }
.cal-busca-ico { display: flex; color: var(--estado); }
.cal-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.95rem; padding: 0.7rem 0; color: var(--ink); }
.cal-achados { margin-top: 0.75rem; max-width: 32rem; }
.cal-achados ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--divisor); border-radius: 0.6rem; overflow: hidden; background: var(--card); }
.cal-achados li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0.9rem; font-weight: 700; font-size: 0.9rem; }
.cal-achados li + li { border-top: 1px solid var(--divisor); }
.cal-achados a:hover { color: var(--estado); text-decoration: underline; }
.cal-achado-data { color: var(--ink-soft); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.cal-nada { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

.cal-proximas { margin: 2rem 0 0; border: 1px solid var(--divisor); border-radius: 0.75rem; background: var(--card); padding: 1.1rem 1.3rem; }
.cal-proximas h2 { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 800; color: var(--ink-titulo); }
.cal-proximas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cal-proximas li { font-size: 0.95rem; }
.cal-proximas strong { color: var(--estado); }
.cal-proximas a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.cal-proximas a:hover { color: var(--estado); text-decoration-color: currentColor; }

.cal-aviso, .cal-legenda { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; }
.cal-aviso { margin: 1.25rem 0 0; max-width: 46rem; }
.cal-legenda { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 1.25rem; }
.cal-legenda-marca { width: 0.9rem; height: 0.9rem; border-radius: 0.25rem; background: var(--estado-soft); border: 1px solid var(--estado); flex-shrink: 0; }

/* ---------- calendário: o desenho do Google Agenda ----------
   Ninguém precisa aprender a ler este calendário: ele copia o que todo mundo já
   usa. Grade contínua de linhas finas (o `gap` de 1px sobre um fundo cinza é que
   desenha as linhas), célula branca, número no topo à esquerda, prova como chip
   colorido e o dia de hoje num círculo cheio. */
/* 3 meses por linha no desktop: o ano inteiro cabe em 2 fileiras em vez de 3.
   align-items: start impede que um mês cheio estique o vizinho vazio — era o que
   deixava julho com um paredão em branco embaixo. */
/* Abas de ano: o ano que vem começa vazio e enche conforme as bancas marcam. */
.cal-anos-abas { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
/* O atalho de Gabaritos fica na fila das abas de ano, mas encostado à direita —
   separado das abas para não se passar por ano. */
.cal-anos-abas .fase-atalho { margin-left: auto; }
.cal-aba { border: 1px solid var(--border); background: var(--card); font: inherit; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); padding: 0.5rem 1.2rem; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.cal-aba:hover { background: var(--muted); color: var(--ink); }
.cal-aba.ativa { background: var(--night); border-color: var(--night); color: #fff; }
/* Botão de trocar de ano no rodapé do calendário (não fazer a pessoa subir a página) */
/* grid-column 1/-1: o botão "Ver 2027" vive dentro do grid de 2 meses; sem isto
   ele ocupava só uma coluna e o "centralizado" ficava torto no desktop. */
.cal-ir-ano-linha { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 1.6rem; }
/* Mesmo padrão dos botões da página de Editais (.fase-aba/.fase-atalho): pílula
   branca com texto suave — para manter um só padrão de botão no blog. */
.cal-ir-ano { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); background: var(--card); color: var(--ink-soft); font: inherit; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.cal-ir-ano:hover { background: var(--muted); color: var(--ink); }
.cal-ano[hidden] { display: none; }

/* 2 meses por linha: com 3, a casinha do dia cai para ~48px e o nome do concurso
   vira reticência antes da segunda letra. O nome só cabe a partir de ~90px. */
.cal-ano { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); align-items: start; }
.cal-mes { border: 1px solid var(--divisor); border-radius: 0.75rem; background: var(--card); padding: 1rem; overflow: hidden; }
.cal-mes h2 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 800; color: var(--ink-titulo); }
.cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.4rem; }
.cal-semana span { text-align: center; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
/* O fundo cinza aparecendo no gap de 1px é o que vira a linha da grade. */
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--divisor); border: 1px solid var(--divisor); border-radius: 0.4rem; overflow: hidden; }
.cal-dia { min-height: 3.6rem; background: var(--card); padding: 0.2rem 0.25rem; display: flex; flex-direction: column; gap: 0.1rem; }
/* Dia do mês vizinho: ocupa o canto para não sobrar buraco, mas fica apagado
   para ninguém confundir com um dia deste mês. */
.cal-fora { background: var(--surface-tint, #fafafa); }
.cal-fora .cal-num { color: var(--border); }
.cal-num { font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); line-height: 1.4; }
.cal-tem-prova .cal-num { color: var(--ink); font-weight: 700; }
/* Prova = chip roxo, como o evento colorido do Google: uma linha só, cortada
   com reticências. Deixar quebrar a palavra viraria "Câma / ra / Serop / édica".
   O laranja fica reservado para o dia selecionado (.cal-sel, mais abaixo). */
.cal-evento { font-size: 0.6rem; font-weight: 700; line-height: 1.25; color: #fff; background: var(--estado); border-radius: 0.2rem; padding: 0.1rem 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evento a { color: inherit; }
.cal-evento a:hover { text-decoration: underline; }
/* Prova ainda não confirmada pela banca: chip vazado, não pintado. */
.cal-evento-prevista { background: var(--estado-soft); color: var(--estado); box-shadow: inset 0 0 0 1px var(--estado); font-style: italic; }
/* "+3" quando o dia tem mais prova do que cabe: clicar no dia abre o popup com a
   lista inteira (o title de mouse não existe no celular). */
.cal-mais { font-size: 0.6rem; font-weight: 800; color: var(--estado); padding-left: 0.15rem; }
/* Grade compacta da home: o dia com prova mostra só o ícone de prova, centrado
   no espaço que sobra abaixo do número. Sem os nomes, todo quadradinho fica do
   mesmo tamanho e a grade dos 3 meses fica uniforme. Os nomes seguem na página
   completa do calendário. */
.cal-marca { margin: auto; display: grid; place-items: center; color: var(--estado); }
.cal-marca svg { width: 1.05rem; height: 1.05rem; }
/* Dia clicável (home e página do calendário): abre o popup do dia. O nome da
   prova continua sendo link direto para a matéria — o popup é para o resto do dia. */
.cal-abre { cursor: pointer; }
.cal-abre:hover { background: var(--estado-soft); }
.cal-abre:focus-visible { outline: 2px solid var(--estado); outline-offset: -2px; }

/* Popup do dia */
.cal-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(9, 4, 17, 0.82); }
.cal-modal[hidden] { display: none; }
.cal-modal-box { position: relative; width: min(420px, 100%); max-height: 80vh; overflow-y: auto; background: var(--card); border-radius: 0.9rem; padding: 1.4rem 1.5rem 1.5rem; }
.cal-modal-box h2 { margin: 0 0 0.9rem; font-size: 1.05rem; padding-right: 2rem; }
.cal-modal-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.cal-modal-box li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; line-height: 1.35; }
.cal-modal-box a { color: var(--estado); font-weight: 700; }
.cal-modal-box a:hover { text-decoration: underline; }
.cal-modal-x { position: absolute; top: 0.7rem; right: 0.7rem; width: 32px; height: 32px; border-radius: 999px; border: 0; background: var(--muted); color: var(--ink); font-size: 0.85rem; cursor: pointer; }
.cal-modal-x:hover { background: var(--border); }
/* Mesma leitura dos chips da grade: pintado = confirmada, vazado = prevista. */
.cal-selo { flex-shrink: 0; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 0.25rem; padding: 0.15rem 0.35rem; margin-top: 0.1rem; }
.cal-selo-ok { background: var(--estado); color: #fff; }
.cal-selo-prev { background: var(--estado-soft); color: var(--estado); box-shadow: inset 0 0 0 1px var(--estado); }
/* Hoje: célula INTEIRA roxa, com o número num círculo BRANCO e a cor roxa
   (pedido do Kleber — destaque forte). Conteúdo do dia fica branco por cima. */
.cal-hoje { background: var(--estado); }
.cal-hoje.cal-abre:hover { background: var(--estado-escuro); }
.cal-hoje .cal-num { align-self: flex-start; display: grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.2rem; border-radius: 999px; background: #fff; color: var(--estado); font-weight: 800; }
.cal-hoje .cal-marca, .cal-hoje .cal-mais { color: #fff; }
.cal-hoje .cal-evento { background: #fff; color: var(--estado); }
.cal-hoje .cal-evento-prevista { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); }

/* Dia selecionado (clicado): tudo laranja da marca. Fica só no dia aberto no
   popup — o padrão do calendário é roxo. A regra vem depois de .cal-hoje e usa
   selector mais específico para ganhar do círculo roxo de hoje quando o dia
   selecionado é o de hoje. */
.cal-sel { background: var(--brand-soft); }
.cal-sel .cal-num { color: var(--brand); font-weight: 800; }
.cal-sel.cal-hoje .cal-num { background: var(--brand); color: #fff; }
.cal-sel .cal-evento { background: var(--brand); color: #fff; }
.cal-sel .cal-evento-prevista { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-sel .cal-mais { color: var(--brand); }
.cal-sel .cal-marca { color: var(--brand); }

/* Prévia na home: os 3 próximos meses + botão para o calendário completo.
   Mesma grade da página completa, com os nomes dos concursos e o popup do dia —
   quem já quer ver o que tem no mês resolve aqui; o botão leva ao ano inteiro. */
.cal-previa { max-width: 72rem; margin: 2.5rem auto 0; padding: 0 1rem; }
.cal-ano-previa { grid-template-columns: repeat(3, 1fr); }
/* No celular a prévia mostra só 2 meses (o 3º some) — pedido do Kleber, 28/07. */
@media (max-width: 900px) { .cal-ano-previa { grid-template-columns: 1fr; } .cal-ano-previa .cal-mes:nth-child(3) { display: none; } }
/* Botão colado no título (não jogado na outra ponta) e no mesmo desenho do
   "Ver tudo de Editais" — é o botão secundário padrão do blog. */
.cal-previa-cabecalho { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-previa-cabecalho h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--ink-titulo); }
.cal-previa-botao { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; transition: background 0.18s, color 0.18s; }
.cal-previa-botao:hover { background: var(--muted); color: var(--ink); }
/* Legenda "Prova" ao lado do botão: o mesmo lápis roxo da grade explica o ícone. */
.cal-previa-legenda { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--ink); }
.cal-previa-legenda-ico { display: inline-grid; place-items: center; color: var(--estado); }
.cal-previa-legenda-ico svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 900px) { .cal-ano { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .cal-mes { padding: 0.7rem; }
  .cal-dia { min-height: 3rem; }
  .cal-evento { font-size: 0.58rem; }
}

/* ---------- página Gabaritos: busca em cima + lista de consulta ---------- */
.gabaritos { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.gab-desc { color: var(--ink-soft); margin: 0.5rem 0 1.2rem; }
.gab-atalho { margin: 0 0 1.25rem; }
.gab-busca { width: 100%; padding: 0.8rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; font: inherit; background: var(--card); }
.gab-busca:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
/* Busca das seções (Editais/Notícias/Dicas): igual às buscas de Estados e
   Calendário (caixa 0.75rem + ícone), com respiro acima (não colar no texto). */
.secao-busca { display: flex; align-items: center; gap: 0.6rem; max-width: 32rem; margin: 1.75rem 0; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--card); padding: 0.15rem 0.9rem; transition: border-color 0.18s, box-shadow 0.18s; }
.secao-busca:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(253, 106, 24, 0.18); }
.secao-busca-ico { display: flex; color: var(--ink-soft); }
.secao-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.95rem; padding: 0.7rem 0; color: var(--ink); }
.secao-busca input::placeholder { color: var(--ink-soft); }
/* Lista de gabaritos: cards de texto em 3 colunas (consulta rápida, sem imagem). */
.gab-lista { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.gab-lista li { display: flex; }
.gab-lista li[hidden] { display: none; } /* a busca esconde via [hidden]; sem isto o display:flex acima vence e o filtro não filtra */
.gab-lista a { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; padding: 0.9rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; border-left: 3px solid var(--brand); transition: box-shadow 0.15s, transform 0.15s; }
.gab-lista a:hover { box-shadow: 0 4px 14px oklch(0.18 0.02 280 / 0.1); transform: translateY(-1px); }
.gab-titulo { font-weight: 700; line-height: 1.3; color: var(--ink-titulo); }
.gab-lista a:hover .gab-titulo { color: var(--brand); }
.gab-data { font-size: 0.82rem; color: var(--ink-soft); }
@media (max-width: 820px) { .gab-lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gab-lista { grid-template-columns: 1fr; } }

/* Card "Veja todos os gabaritos" no fim do artigo de gabarito (mesma cara do 4º
   destaque da home): imagem à esquerda, chip verde + título, seta à direita. */
.gab-cta { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 0; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--ed-gabaritos); border-radius: 0.85rem; overflow: hidden; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; }
.gab-cta:hover { box-shadow: 0 6px 18px oklch(0.18 0.02 280 / 0.12); transform: translateY(-1px); }
.gab-cta-img { flex: none; width: 7rem; align-self: stretch; }
.gab-cta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gab-cta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.9rem 0; }
.gab-cta-titulo { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--ink-titulo); }
.gab-cta-seta { flex: none; width: 1.4rem; height: 1.4rem; margin-right: 1rem; color: var(--ed-gabaritos); }
@media (max-width: 480px) { .gab-cta-img { width: 5rem; } .gab-cta-titulo { font-size: 0.95rem; } }

/* Variante "em linhas": coluna única, um gabarito abaixo do outro, cada um numa
   linha só — ícone de caderno+lápis | título | data. Sobrepõe a grade de 3
   colunas só na página de Gabaritos (as outras listas seguem iguais). */
.gab-lista-linhas { grid-template-columns: 1fr; gap: 0.55rem; }
.gab-lista-linhas a { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; }
.gab-lista-linhas .gab-ico { flex: none; display: inline-flex; color: var(--brand); }
.gab-lista-linhas .gab-ico svg { width: 1.35rem; height: 1.35rem; }
.gab-lista-linhas .gab-titulo { flex: 1; min-width: 0; }
.gab-lista-linhas .gab-data { flex: none; white-space: nowrap; }
@media (max-width: 520px) {
  /* No celular título e data empilham (a data cai para baixo do título), mas
     continua um gabarito por linha, com o ícone à esquerda. */
  .gab-lista-linhas a { flex-wrap: wrap; }
  .gab-lista-linhas .gab-data { width: 100%; padding-left: 2.1rem; }
}
.gab-vazio { color: var(--ink-soft); margin-top: 1.5rem; }

/* ---- Respiro lateral no celular (Kleber, 07/08/2026) ----
   Com 1rem o texto encostava na borda da tela. Todos os containers de
   conteúdo passam a 1.25rem nas laterais no mobile. Vale para o site todo:
   ao criar seção nova com max-width + padding lateral, acrescente o seletor
   aqui. O topo (header) fica de fora de propósito — o alinhamento da logo
   com o hambúrguer já foi aprovado como está. */
@media (max-width: 760px) {
  .destaques, .colunas, .colunas-abas, .regiao-bloco, .regiao-lista,
  .estado-lista, .todas, .artigo, .carreira-hub .relacionados, .barra-estados,
  .materias, .estados, .va-bloco, .carreiras, .carreira, .conc-trilha,
  .ci-banner-trilho, .editais, .materiais, .material, .calendario, .cal-intro,
  .cal-aviso, .cal-previa, .rodape-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Card de matéria com a foto do professor (Kleber, 07/08/2026): chip da
   categoria à esquerda, avatar redondo do professor à direita — padrão
   colunista de portal. A foto vem de professores/<slug>.webp, a mesma da
   página do professor. */
.materia-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.materia-foto { width: 54px; height: 54px; border-radius: 999px; object-fit: cover; border: 2px solid var(--estado-soft); background: var(--bg); }