/* NotificaGov, site institucional
 *
 * Sistema de design curto de propósito. Compra pública decide por confiança
 * antes de decidir por gosto, então a estrutura é sóbria e o contemporâneo vem
 * da tipografia, do espaçamento e do detalhe, nunca de efeito.
 *
 * Tipografia herdada do produto: EB Garamond nos títulos e Lato no corpo. Não é
 * escolha nova. O sistema redige peça de processo administrativo, e a tipografia
 * de documento oficial é a identidade dele; landing e produto falam a mesma
 * língua.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Cor institucional da marca. O âmbar é o único acento, e aparece pouco:
     é o selo do símbolo, e sinaliza o que merece parada de leitura. */
  --tinta: #101a2e;
  --tinta-2: #52607a;
  --tinta-3: #67728a;
  --navy: #152a5e;
  --navy-fundo: #0f2149;
  --azul: #2b5ce6;
  --azul-escuro: #1f47bb;
  --selo: #c2710c;
  /* Mesmo âmbar, escurecido para texto pequeno sobre fundo claro: o tom
     da marca dá 3,4 de contraste ali, abaixo do mínimo de 4,5. */
  --selo-texto: #8f5305;
  --selo-claro: #e8973a;

  --papel: #fbfcfe;
  --papel-2: #f2f5fa;
  --papel-3: #e9eef7;
  --linha: #dbe3ef;
  --linha-forte: #c3cfe2;

  /* Um sistema de raio só, documentado: cartão e imagem 12px, controle 8px.
     Nada de pílula, que puxa a página para o registro de aplicativo. */
  --r-cartao: 12px;
  --r-controle: 8px;

  --largura: 1200px;
  --gap-secao: clamp(4.5rem, 9vw, 8rem);

  --sombra: 0 1px 2px rgb(16 26 46 / 0.04), 0 12px 32px -12px rgb(16 26 46 / 0.12);
  --sombra-alta: 0 2px 4px rgb(16 26 46 / 0.05), 0 28px 60px -24px rgb(16 26 46 / 0.28);

  --transicao: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }

h1, h2, h3 {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

.envelope {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.pular {
  position: absolute;
  left: -9999px;
}
.pular:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--azul);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-controle);
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- marca */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.marca svg { flex: 0 0 auto; }
.marca span {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- barra */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(251 252 254 / 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), background var(--transicao);
}
.barra[data-rolou="sim"] {
  border-bottom-color: var(--linha);
  background: rgb(251 252 254 / 0.95);
}
.barra .envelope {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.barra nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.barra nav a:not(.botao) {
  font-size: 0.94rem;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicao);
}
.barra nav a:not(.botao):hover { color: var(--tinta); }

/* Link de entrar: discreto ao lado do botão cheio, mas ainda clicável de longe. */
.barra .entrar {
  font-weight: 700;
  color: var(--azul) !important;
}
.barra .entrar:hover { color: var(--azul-escuro) !important; }

@media (max-width: 900px) {
  .barra nav a.some-no-celular { display: none; }
  .barra .envelope { gap: 1rem; }
  .barra nav { gap: 1rem; }
}

/* Abaixo de 560px nem o rótulo longo do botão cabe. O texto encurta em vez de
   quebrar em duas linhas, que é o que estoura a barra para fora da tela. */
@media (max-width: 560px) {
  .barra nav .botao { padding-inline: 0.95rem; font-size: 0.9rem; }
  .barra nav .botao .longo { display: none; }
  .marca span { font-size: 1.12rem; }
}

/* ---------------------------------------------------------------- botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.78rem 1.4rem;
  border-radius: var(--r-controle);
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
              transform 120ms ease, color var(--transicao);
}
.botao:active { transform: translateY(1px); }

.botao-cheio {
  background: var(--azul);
  color: #fff;
}
.botao-cheio:hover { background: var(--azul-escuro); }

.botao-vazado {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linha-forte);
}
.botao-vazado:hover { border-color: var(--tinta-3); background: var(--papel-2); }

/* Sobre o navy: o vazado precisa de traço claro para não sumir no fundo. */
.escuro .botao-vazado {
  color: #fff;
  border-color: rgb(255 255 255 / 0.34);
}
.escuro .botao-vazado:hover {
  border-color: rgb(255 255 255 / 0.6);
  background: rgb(255 255 255 / 0.08);
}

/* ---------------------------------------------------------------- seções */
.secao { padding-block: var(--gap-secao); }
.secao-densa { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.escuro {
  background: var(--navy);
  color: #fff;
}
.escuro h2, .escuro h3 { color: #fff; }

.claro-2 { background: var(--papel-2); }

.sobrescrito {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--selo-texto);
  margin-bottom: 1rem;
}
.escuro .sobrescrito { color: var(--selo-claro); }

.titulo-secao {
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.15;
  max-width: 20ch;
}
.corpo-secao {
  margin-top: 1.1rem;
  font-size: 1.06rem;
  color: var(--tinta-2);
  max-width: 62ch;
}
.escuro .corpo-secao { color: rgb(255 255 255 / 0.76); }

/* ---------------------------------------------------------------- hero */
.hero {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.hero .envelope {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  max-width: 15ch;
}
.hero .abertura {
  margin-top: 1.35rem;
  font-size: clamp(1.03rem, 1.5vw, 1.16rem);
  color: var(--tinta-2);
  max-width: 46ch;
}
.hero .acoes {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* A moldura existe para a captura parecer o que é: uma tela de verdade, não
   um retângulo colado na página. */
.moldura {
  border-radius: var(--r-cartao);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: #fff;
  box-shadow: var(--sombra-alta);
}
.moldura-topo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linha);
}
.moldura-topo i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linha-forte);
}
.moldura-topo span {
  margin-left: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: var(--tinta-2);
}

@media (max-width: 900px) {
  .hero .envelope { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
}

/* ------------------------------------------------------ base legal (faixa) */
.lei .envelope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.artigo {
  border-left: 2px solid var(--selo-claro);
  padding-left: 1.4rem;
  margin-bottom: 2rem;
}
.artigo:last-child { margin-bottom: 0; }
.artigo dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--selo-claro);
  margin-bottom: 0.35rem;
}
.artigo dd {
  margin: 0;
  color: rgb(255 255 255 / 0.82);
  font-size: 1.02rem;
}

@media (max-width: 860px) {
  .lei .envelope { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- rito */
.rito-trilha {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  counter-reset: etapa;
}
.etapa {
  position: relative;
  padding: 2.6rem 1rem 0 0;
}
/* A linha que atravessa as etapas é o próprio rito: contínuo, sem volta. */
.etapa::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--linha-forte);
}
.etapa:last-child::before { right: 50%; }
.etapa::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--linha-forte);
}
.etapa[data-marco="sim"]::after {
  background: var(--selo);
  border-color: var(--selo);
}
.etapa h3 {
  font-size: 1.02rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.3rem;
}
.etapa p {
  font-size: 0.88rem;
  color: var(--tinta-2);
  line-height: 1.5;
}
.etapa .prazo {
  display: block;
  margin-top: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  color: var(--selo-texto);
}

@media (max-width: 1000px) {
  .rito-trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  .etapa { padding-right: 0; padding-bottom: 1.5rem; }
  .etapa::before { display: none; }
  .etapa:last-child::before { display: none; }
}
@media (max-width: 560px) {
  .rito-trilha { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- papéis */
.papeis {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
}
.papel {
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  padding: 1.6rem;
  background: #fff;
  transition: border-color var(--transicao), transform var(--transicao);
}
.papel:hover { border-color: var(--linha-forte); }
/* Grid de 5 células sem buraco: duas largas em cima, três embaixo. */
.papel:nth-child(1), .papel:nth-child(2) { grid-column: span 3; }
.papel:nth-child(3), .papel:nth-child(4), .papel:nth-child(5) { grid-column: span 2; }

.papel-destaque {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.papel.papel-destaque .papel-nao { color: rgb(255 255 255 / 0.74); }
.papel.papel-destaque p { color: rgb(255 255 255 / 0.86); }

.papel h3 {
  font-family: "Lato", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}
.papel p { font-size: 0.94rem; color: var(--tinta-2); }
.papel-nao {
  display: block;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--linha);
  font-size: 0.86rem;
  color: var(--tinta-3);
}
.papel-destaque .papel-nao { border-top-color: rgb(255 255 255 / 0.18); }

@media (max-width: 900px) {
  .papeis { grid-template-columns: 1fr; }
  .papel:nth-child(n) { grid-column: auto; }
}

/* ------------------------------------------------------------- peça (split) */
.peca .envelope {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.peca .texto { order: 2; }
.peca .visual { order: 1; }

.lista-limpa { margin: 2rem 0 0; padding: 0; list-style: none; }
.lista-limpa li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linha);
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.98rem;
}
.lista-limpa li:last-child { border-bottom: none; }
.lista-limpa svg { margin-top: 0.28rem; color: var(--selo); }
.lista-limpa b { font-weight: 700; }
.lista-limpa span { color: var(--tinta-2); }

@media (max-width: 900px) {
  .peca .envelope { grid-template-columns: 1fr; }
  .peca .texto, .peca .visual { order: unset; }
}

/* ---------------------------------------------------------- multi-órgão */
.orgao-grade {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.orgao-item .numero {
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  display: block;
  margin-bottom: 0.6rem;
}
.orgao-item h3 {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
}
.orgao-item p { font-size: 0.94rem; color: var(--tinta-2); }

@media (max-width: 800px) { .orgao-grade { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- registro (2col) */
.registro-colunas {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.registro-grupo h3 {
  font-family: "Lato", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 1rem;
}
.registro-grupo ul { margin: 0; padding: 0; list-style: none; }
.registro-grupo li {
  padding-block: 0.55rem;
  font-size: 0.97rem;
  color: var(--tinta-2);
}
.registro-grupo li b { color: var(--tinta); font-weight: 700; }

@media (max-width: 700px) { .registro-colunas { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- chamada */
.chamada { text-align: center; }
.chamada h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.15;
  max-width: 22ch;
  margin-inline: auto;
}
.chamada p {
  margin-top: 1.15rem;
  margin-inline: auto;
  max-width: 52ch;
  color: rgb(255 255 255 / 0.76);
}
.chamada .acoes {
  margin-top: 2.2rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- rodapé */
.rodape {
  border-top: 1px solid var(--linha);
  padding-block: 3rem 2.5rem;
  font-size: 0.92rem;
  color: var(--tinta-2);
}
.rodape .envelope {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: start;
  justify-content: space-between;
}
.rodape nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.rodape a { text-decoration: none; transition: color var(--transicao); }
.rodape a:hover { color: var(--tinta); }
.rodape .aviso {
  width: 100%;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  font-size: 0.86rem;
  color: var(--tinta-3);
  max-width: 70ch;
}

/* ------------------------------------------------------------- revelação */
/* Movimento existe para dar ordem de leitura, não para chamar atenção: cada
   bloco entra uma vez, 12px, e para. */
/* O conteúdo nasce visível. Só fica escondido depois que o próprio script
   marca a página como animada, o que ele faz na primeira linha que roda.
   Escrever `opacity: 0` direto na classe parece igual e não é: com o script
   bloqueado, falhando ou apenas lento, a página inteira some, e o rastreador
   de busca chega a uma página em branco. */
[data-animar="sim"] .revela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animar="sim"] .revela[data-visivel="sim"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-animar="sim"] .revela { opacity: 1; transform: none; transition: none; }
  .botao:active { transform: none; }
}

/* ------------------------------------------------------- vitrine (imagem larga) */
/* A tela em largura total é a prova do que a seção anterior descreve. Aparece
   uma vez só na página: repetir captura grande vira folheto. */
.vitrine {
  padding-bottom: var(--gap-secao);
}
.legenda-vitrine {
  margin-top: 1.1rem;
  font-size: 0.94rem;
  color: var(--tinta-2);
  max-width: 62ch;
}
.moldura-alta {
  max-height: 620px;
  overflow: hidden;
}
.moldura-alta img {
  object-fit: cover;
  object-position: top center;
}

/* ---------------------------------------------------------------- perguntas */
/* <details> nativo: abre sem JavaScript, funciona com leitor de tela e é
   indexável, o que importa porque estas perguntas também alimentam o bloco de
   FAQ do resultado de busca. */
.perguntas {
  margin-top: 2.5rem;
  max-width: 70ch;
  border-top: 1px solid var(--linha);
}
.perguntas details {
  border-bottom: 1px solid var(--linha);
}
.perguntas summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 700;
  font-size: 1.03rem;
  transition: color var(--transicao);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary:hover { color: var(--azul); }

/* Sinal de abrir e fechar, desenhado em CSS: dois traços que viram um. */
.perguntas summary::after,
.perguntas summary::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--tinta-3);
  border-radius: 2px;
  transition: transform var(--transicao);
}
.perguntas summary::before { transform: translateY(-50%) rotate(90deg); }
.perguntas summary::after { transform: translateY(-50%); }
.perguntas details[open] summary::before { transform: translateY(-50%) rotate(0deg); }

.perguntas details p {
  padding: 0 2.5rem 1.4rem 0;
  color: var(--tinta-2);
  font-size: 0.99rem;
  max-width: 65ch;
}

@media (prefers-reduced-motion: reduce) {
  .perguntas summary::after,
  .perguntas summary::before { transition: none; }
}

/* ---------------------------------------------------------------- ganhos */
/* Quatro benefícios em dois pares, e não quatro colunas iguais: a leitura
   respira e a página não vira folheto de três cartões. */
.ganhos {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4.5rem);
}
.ganho {
  padding-top: 1.4rem;
  border-top: 2px solid var(--selo);
}
.ganho h3 {
  font-family: "Lato", sans-serif;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}
.ganho p { color: var(--tinta-2); font-size: 1rem; }

@media (max-width: 760px) { .ganhos { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- alvos de toque */
/* Em tela sensível, link de 24px é aposta. O mínimo confortável é 44px, e o
   preenchimento extra some no desktop, onde o ponteiro acerta. */
@media (max-width: 900px), (pointer: coarse) {
  /* Exclui o que está escondido nesta mesma largura: sem o :not, esta regra
     empatava em especificidade com a que oculta os links e, por vir depois,
     devolvia o display para eles, estourando a barra fora da tela. */
  .barra nav a:not(.botao):not(.some-no-celular),
  .rodape nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .marca { min-height: 44px; }
  .perguntas summary { padding-block: 1.35rem; }
}

/* A moldura da peça mostra o topo da tela, que é onde está o texto. Sem o
   recorte, a imagem alta empurraria o texto ao lado para longe demais. */
.moldura-alta { max-height: 560px; }

/* ------------------------------------------------- inteligência artificial */
/* A prova vem antes da lista: o trecho da peça mostra o que os quatro pontos
   abaixo explicam, e mostrar convence mais rápido que explicar. */
.ia-prova {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}
.ia-prova blockquote {
  margin: 0;
  padding: 1.75rem 2rem;
  background: rgb(255 255 255 / 0.06);
  border-left: 3px solid var(--selo-claro);
  border-radius: 0 var(--r-cartao) var(--r-cartao) 0;
}
.ia-prova blockquote p {
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.94);
}
.ia-prova blockquote b {
  color: var(--selo-claro);
  font-weight: 600;
}
.ia-prova cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.66);
}
.ia-nota {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.74);
  padding-bottom: 0.5rem;
}

.ia-pontos {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ia-pontos li {
  padding-top: 1.2rem;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}
.ia-pontos h3 {
  font-family: "Lato", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.45rem;
}
.ia-pontos p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.72);
}

/* O limite do que a IA faz, dito de frente e uma vez só, em vez de virar
   ressalva miúda no rodapé. */
.ia-limite {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.22);
  font-size: 1.02rem;
  color: rgb(255 255 255 / 0.82);
  max-width: 68ch;
}

@media (max-width: 1000px) {
  .ia-pontos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ia-prova { grid-template-columns: 1fr; align-items: start; }
  .ia-pontos { grid-template-columns: 1fr; }
}


/* A tela da vitrine acompanha a mesma coluna do resto do conteúdo. Sem isto ela
   encostava na borda esquerda e brigava com o alinhamento das outras seções. */
.vitrine > .envelope { margin-inline: auto; }

/* --------------------------------------------------------- contato no rodapé */
/* Telefone e e-mail escritos por extenso: quem quer ligar não procura um ícone
   sem número, e quem vai copiar o endereço precisa vê-lo inteiro. */
.contato-rodape {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.titulo-contato {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 0.2rem;
}
.contato-rodape a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  text-decoration: none;
  transition: color var(--transicao);
}
.contato-rodape a:hover { color: var(--azul); }
.contato-rodape svg { flex: 0 0 auto; color: var(--tinta-3); }
.contato-rodape a:hover svg { color: var(--azul); }

/* ------------------------------------------------------------ fontes da IA */
.fontes {
  margin-top: 3rem;
  padding: 1.9rem 2rem;
  background: rgb(255 255 255 / 0.05);
  border-radius: var(--r-cartao);
  max-width: 74ch;
}
.fontes h3 {
  font-family: "Lato", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--selo-claro);
  margin-bottom: 1rem;
}
.fontes-destaque {
  font-size: 1.06rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.92);
  margin-bottom: 1.1rem;
}
.fontes > p:last-child {
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.7);
  padding-top: 1.1rem;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

@media (max-width: 700px) {
  .fontes { padding: 1.5rem 1.35rem; }
}


/* ================================================================
   ATUALIZAÇÕES MODERNAS 2026: BENTO GRIDS, PILLS, WIDGETS E PROFUNDIDADE
   ================================================================ */

/* Fonte modernizada */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Badge luminosa de topo (Hero) */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(37, 99, 235, 0.08);
  color: var(--azul);
  border: 1px solid rgba(37, 99, 235, 0.22);
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}
.ponto-pulso {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulso 2.2s infinite;
}
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Moldura do Hero com abas e profundidade */
.moldura-interativa {
  position: relative;
}
.floating-card {
  position: absolute;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  padding: 0.75rem 1rem;
  box-shadow: 0 10px 28px -6px rgba(16, 26, 46, 0.16);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tinta);
  transition: transform var(--transicao);
}
.floating-card:hover {
  transform: translateY(-2px);
}
.floating-card svg {
  flex-shrink: 0;
}
.floating-1 {
  top: 10%;
  left: -20px;
}
.floating-2 {
  top: 48%;
  right: -20px;
}
.floating-3 {
  bottom: 3%;
  left: -15px;
}
.floating-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--tinta-3);
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 900px) {
  .floating-card { display: none; }
}

/* ------------------------------------------------------------- Bento Grid */
.bento-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}
.bento-card {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  padding: clamp(1.35rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(16, 26, 46, 0.03), 0 10px 24px -10px rgba(16, 26, 46, 0.06);
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.bento-card:hover {
  transform: translateY(-3px);
  border-color: var(--linha-forte);
  box-shadow: 0 12px 32px -8px rgba(37, 99, 235, 0.12);
}
.bento-8 { grid-column: span 8; }
.bento-4 { grid-column: span 4; }
.bento-6 { grid-column: span 6; }
.bento-12 { grid-column: span 12; }

.bento-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 0.75rem;
}
.bento-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  color: var(--tinta);
}
.bento-card p {
  color: var(--tinta-2);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* Widgets internos dos Bento Cards */
.widget-matriz-preview {
  margin-top: 1.5rem;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  overflow: hidden;
  font-size: 0.85rem;
}
.widget-linha {
  display: grid;
  grid-template-columns: 85px 1fr auto;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--linha);
  gap: 0.85rem;
}
.widget-linha:last-child { border-bottom: none; }
.widget-inciso {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
}
.widget-desc {
  font-size: 0.86rem;
  color: var(--tinta-2);
  line-height: 1.45;
}
.widget-linha-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Tags de Gravidade */
.tag-grav {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.grav-leve { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.grav-media { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.grav-grave { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.grav-gravissima { background: #fef2f2; color: #991b1b; border: 1px solid #f87171; }

.widget-sancao-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tinta-2);
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

/* Alerta de Legalidade / Trava */
.box-trava-legal {
  margin-top: 1.25rem;
  padding: 1rem;
  background: #fef2f2;
  border-left: 3px solid #ef4444;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.box-trava-legal svg {
  color: #dc2626;
  flex-shrink: 0;
  margin-top: 2px;
}
.box-trava-legal p {
  margin: 0;
  font-size: 0.84rem;
  color: #991b1b;
  line-height: 1.5;
}

/* Widget Cumulacao de Multa */
.widget-multa-box {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.multa-opcao {
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  padding: 0.85rem;
}
.multa-opcao strong {
  display: block;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.multa-opcao span {
  font-size: 0.78rem;
  color: var(--tinta-3);
  line-height: 1.4;
  display: block;
}

/* Widget Atestado QR Code */
.widget-atestado {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
}
.qr-simulado {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.qr-simulado svg {
  width: 100%;
  height: 100%;
  max-width: 52px;
  max-height: 52px;
  display: block;
}
.atestado-info { font-size: 0.82rem; }
.atestado-codigo {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--navy);
  display: block;
  margin-bottom: 0.2rem;
}

/* Widget Cronometro CEIS/CNEP */
.widget-cronometro {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: var(--r-controle);
}
.crono-dias {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: #b45309;
  line-height: 1;
}
.crono-label {
  font-size: 0.82rem;
  color: #92400e;
  line-height: 1.4;
}

/* Widget Módulo PAR */
.widget-par-box {
  margin-top: 1.25rem;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.widget-par-fases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.tag-fase-par {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.widget-par-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--tinta-2);
  border-top: 1px solid var(--linha);
  padding-top: 0.75rem;
}
.widget-par-badge-doc {
  background: #1e3a8a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Widget Central de Cadastros */
.widget-cadastros-box {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.cad-item-pill {
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  padding: 0.65rem 0.8rem;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--navy);
  font-weight: 600;
  transition: border-color var(--transicao), transform var(--transicao);
}
.cad-item-pill:hover {
  border-color: var(--azul);
  transform: translateY(-1px);
}

@media (max-width: 1000px) {
  .bento-8, .bento-4, .bento-6, .bento-12 { grid-column: span 12; }
}

@media (max-width: 680px) {
  .widget-linha {
    grid-template-columns: 80px 1fr;
    gap: 0.4rem 0.75rem;
    padding: 0.7rem 0.85rem;
  }
  .widget-linha-badges {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 500px) {
  .widget-multa-box {
    grid-template-columns: 1fr;
  }
  .widget-cadastros-box {
    grid-template-columns: 1fr;
  }
}