/* =====================================================================
   SOS DETRAN-SP 2026 — Sistema visual
   ---------------------------------------------------------------------
   Direção: vocabulário da sinalização viária brasileira.
   O losango de advertência é o único marcador usado, e só aparece
   onde há algo que exige atenção. A cor carrega significado
   regulatório e é sempre consistente:
     amarelo  = atenção e progresso
     vermelho = risco de eliminação
     verde    = domínio confirmado
     azul     = informação
   ===================================================================== */

/* --------------------------------------------------------------- Fontes */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&display=swap');

/* --------------------------------------------------------------- Tokens */
:root {
  /* Base */
  --asfalto:      #1c1f21;
  --asfalto-70:   #4a4f53;
  --asfalto-45:   #7c8288;
  --concreto:     #f4f4f1;
  --superficie:   #ffffff;
  --linha:        #dedfd9;
  --linha-forte:  #c3c5bd;

  /* Semântica de sinalização */
  --sinal:        #e8b006;
  --sinal-fraco:  #fdf4d8;
  --sinal-forte:  #a97d02;
  --regra:        #b8342e;
  --regra-fraco:  #fbeae9;
  --rota:         #2e6b4f;
  --rota-fraco:   #e6f1eb;
  --info:         #1f5c8b;
  --info-fraco:   #e8f0f6;

  /* Tipografia */
  --ui:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --leitura: 'Literata', Georgia, 'Times New Roman', serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.3125rem;
  --t-xl:   1.625rem;
  --t-2xl:  2.125rem;
  --t-3xl:  2.75rem;

  /* Espaço */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --largura: 1140px;
  --leitura-largura: 40rem;

  --barra-inferior: 62px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--concreto);
  color: var(--asfalto);
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--ui);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--info); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--asfalto); }

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

hr {
  border: 0;
  border-top: 1px solid var(--linha);
  margin: var(--s5) 0;
}

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

::selection { background: var(--sinal-fraco); }

/* ------------------------------------------------------------ Utilidades */
.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--s4); }
.wrap-estreito { max-width: 44rem; }
.wrap-medio { max-width: 62rem; }

.mudo   { color: var(--asfalto-45); }
.suave  { color: var(--asfalto-70); }
.pequeno { font-size: var(--t-sm); }
.minusculo { font-size: var(--t-xs); }
.forte  { font-weight: 600; }
.centro { text-align: center; }
.direita { text-align: right; }
.nums   { font-variant-numeric: tabular-nums; }
.esconder { display: none !important; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pilha > * + * { margin-top: var(--s4); }
.pilha-fina > * + * { margin-top: var(--s2); }
.pilha-larga > * + * { margin-top: var(--s6); }

.linha-flex { display: flex; align-items: center; gap: var(--s3); }
.linha-flex-topo { display: flex; align-items: flex-start; gap: var(--s3); }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.envolve { flex-wrap: wrap; }
.cresce { flex: 1 1 auto; min-width: 0; }

.secao { padding: var(--s7) 0; }
.secao-clara { background: var(--superficie); }

/* -------------------------------------------------------------- Losango
   Marcador único do sistema. Só onde há algo a observar. */
.losango {
  display: inline-block;
  width: 9px; height: 9px;
  flex: 0 0 9px;
  transform: rotate(45deg);
  background: var(--sinal);
  margin-top: 6px;
}
.losango--regra { background: var(--regra); }
.losango--rota  { background: var(--rota); }
.losango--info  { background: var(--info); }
.losango--vazio { background: transparent; border: 1.5px solid var(--linha-forte); }

/* ------------------------------------------------------------- Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--ui);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1;
  padding: 0.8rem 1.25rem;
  min-height: 46px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  background: var(--asfalto);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: #000; color: #fff; }

.btn--sinal { background: var(--sinal); color: var(--asfalto); }
.btn--sinal:hover { background: var(--sinal-forte); color: #fff; }

.btn--contorno { background: transparent; color: var(--asfalto); border-color: var(--linha-forte); }
.btn--contorno:hover { background: var(--superficie); border-color: var(--asfalto); color: var(--asfalto); }

.btn--regra { background: var(--regra); color: #fff; }
.btn--regra:hover { background: #93231e; }

.btn--fantasma { background: transparent; color: var(--asfalto-70); border-color: transparent; padding: 0.5rem 0.65rem; min-height: 38px; }
.btn--fantasma:hover { background: rgba(0,0,0,0.05); color: var(--asfalto); }

.btn--largo { width: 100%; }
.btn--pequeno { font-size: var(--t-sm); padding: 0.5rem 0.85rem; min-height: 38px; }
.btn--grande { font-size: var(--t-md); padding: 1.05rem 1.75rem; min-height: 56px; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

/* ------------------------------------------------------------ Formulários */
.campo { display: block; margin-bottom: var(--s4); }
.campo__rotulo {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--s2);
}
.campo__dica { display: block; font-size: var(--t-sm); color: var(--asfalto-45); margin-top: var(--s1); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="url"], select, textarea {
  width: 100%;
  font-family: var(--ui);
  font-size: var(--t-base);
  color: var(--asfalto);
  background: var(--superficie);
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--r-md);
  padding: 0.7rem 0.8rem;
  min-height: 46px;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
select { appearance: none; background-image: none; padding-right: 2rem; }

input:focus, select:focus, textarea:focus {
  border-color: var(--info);
  outline: 2px solid rgba(31,92,139,0.18);
  outline-offset: 0;
}

.campo--erro input, .campo--erro textarea, .campo--erro select { border-color: var(--regra); }

.grade-2 { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 700px) { .grade-2 { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- Avisos */
.aviso {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-md);
  border-left: 4px solid var(--linha-forte);
  background: var(--superficie);
  font-size: var(--t-base);
}
.aviso__titulo { font-weight: 600; margin: 0 0 var(--s1); }
.aviso__corpo { margin: 0; color: var(--asfalto-70); font-size: var(--t-sm); line-height: 1.6; }
.aviso__corpo a { color: inherit; }

.aviso--alerta   { border-left-color: var(--regra); background: var(--regra-fraco); }
.aviso--atencao  { border-left-color: var(--sinal); background: var(--sinal-fraco); }
.aviso--parabens { border-left-color: var(--rota); background: var(--rota-fraco); }
.aviso--info     { border-left-color: var(--info); background: var(--info-fraco); }

/* ----------------------------------------------------------- Placa
   Painel principal da home do aluno. É o objeto mais característico
   deste mundo: um painel de sinalização com a contagem regressiva. */
.placa {
  background: var(--asfalto);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s5);
  position: relative;
  overflow: hidden;
}
.placa::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  pointer-events: none;
}
.placa__dias {
  font-size: clamp(3rem, 14vw, 4.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--sinal);
  margin: 0;
}
.placa__legenda {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.72);
  margin: var(--s2) 0 0;
}
.placa__rodape {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
}
.placa__dado { font-size: var(--t-sm); color: rgba(255,255,255,0.72); }
.placa__dado b { display: block; font-size: var(--t-lg); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- Bloco branco */
.bloco {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.bloco--justo { padding: var(--s4); }
.bloco__cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
}
.bloco__titulo { font-size: var(--t-md); font-weight: 600; margin: 0; }

/* ------------------------------------------------------------ Progresso */
.barra {
  height: 7px;
  background: var(--linha);
  border-radius: 99px;
  overflow: hidden;
}
.barra__preenchida {
  height: 100%;
  background: var(--sinal);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.barra--rota .barra__preenchida { background: var(--rota); }
.barra--regra .barra__preenchida { background: var(--regra); }
.barra--fina { height: 4px; }

/* ----------------------------------------------------- Lista de matérias */
.materias { list-style: none; margin: 0; padding: 0; }
.materia {
  display: block;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  color: inherit;
}
.materia:last-child { border-bottom: 0; }
.materia:hover { color: inherit; }
.materia:hover .materia__nome { text-decoration: underline; text-underline-offset: 3px; }
.materia__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.materia__nome { font-weight: 600; font-size: var(--t-md); }
.materia__pct { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--t-sm); color: var(--asfalto-45); }
.materia__meta { font-size: var(--t-sm); color: var(--asfalto-45); margin: var(--s1) 0 var(--s3); }
.materia--bloqueada { opacity: 0.55; pointer-events: none; }

.peso {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--sinal-fraco);
  color: var(--sinal-forte);
  white-space: nowrap;
}
.peso--alto { background: var(--asfalto); color: var(--sinal); }
.peso--zero { background: var(--regra-fraco); color: var(--regra); }

/* --------------------------------------------------------------- Leitor */
.leitor {
  background: var(--superficie);
  min-height: 100vh;
  position: relative;
}
.leitor__topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--linha);
}
.leitor__topo-linha {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  max-width: 56rem; margin: 0 auto;
}
.leitor__titulo { font-size: var(--t-sm); font-weight: 600; margin: 0; }
.leitor__sub { font-size: var(--t-xs); color: var(--asfalto-45); margin: 0; }

.leitor__corpo {
  max-width: var(--leitura-largura);
  margin: 0 auto;
  padding: var(--s6) var(--s4) var(--s8);
  font-family: var(--leitura);
  font-size: var(--t-md);
  line-height: 1.78;
  color: #16191b;
  /* Dificulta cópia casual. Não é proteção absoluta e não pretende ser. */
  -webkit-user-select: none;
  user-select: none;
}
.leitor__corpo.selecionavel { -webkit-user-select: text; user-select: text; }

.leitor__corpo h2 {
  font-family: var(--ui);
  font-size: var(--t-lg);
  margin: var(--s6) 0 var(--s3);
}
.leitor__corpo h3 {
  font-family: var(--ui);
  font-size: var(--t-md);
  margin: var(--s5) 0 var(--s2);
}
.leitor__corpo p { margin: 0 0 1.15em; }
.leitor__corpo ul, .leitor__corpo ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.leitor__corpo li { margin-bottom: 0.4em; }
.leitor__corpo strong { font-weight: 600; }

.leitor__corpo blockquote {
  margin: var(--s5) 0;
  padding: var(--s4);
  background: var(--concreto);
  border-left: 3px solid var(--sinal);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-base);
}
.leitor__corpo table {
  width: 100%; border-collapse: collapse; margin: var(--s5) 0;
  font-family: var(--ui); font-size: var(--t-sm);
}
.leitor__corpo th, .leitor__corpo td {
  border: 1px solid var(--linha); padding: var(--s2) var(--s3); text-align: left; vertical-align: top;
}
.leitor__corpo th { background: var(--concreto); font-weight: 600; }

/* Referência legal dentro da apostila */
.fonte-legal {
  display: block;
  font-family: var(--ui);
  font-size: var(--t-xs);
  color: var(--asfalto-45);
  border-top: 1px dashed var(--linha-forte);
  padding-top: var(--s2);
  margin-top: var(--s5);
}

/* Marca d'água individual: torna vazamento rastreável */
.marca-agua {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.marca-agua span {
  font-family: var(--ui);
  font-size: 1.4rem;
  font-weight: 600;
  color: rgba(28,31,33,0.045);
  transform: rotate(-28deg);
  white-space: nowrap;
  letter-spacing: 0.1em;
  line-height: 4.5;
  text-align: center;
}

.leitor__navegacao {
  position: sticky; bottom: 0;
  background: rgba(255,255,255,0.97);
  border-top: 1px solid var(--linha);
  padding: var(--s3) var(--s4);
  display: flex; gap: var(--s3); align-items: center; justify-content: space-between;
  max-width: 56rem; margin: 0 auto;
}

/* ------------------------------------------------------------- Questões */
.questao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: var(--s5); }
.questao__meta { font-size: var(--t-xs); color: var(--asfalto-45); margin-bottom: var(--s3); display: flex; gap: var(--s3); flex-wrap: wrap; }
.questao__enunciado { font-size: var(--t-md); line-height: 1.6; margin-bottom: var(--s5); }

.alternativas { list-style: none; margin: 0; padding: 0; }
.alternativa { margin-bottom: var(--s2); }
.alternativa__botao {
  display: flex; width: 100%; gap: var(--s3); text-align: left;
  background: var(--superficie);
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  font-family: var(--ui); font-size: var(--t-base); line-height: 1.5;
  color: var(--asfalto); cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.alternativa__botao:hover { border-color: var(--asfalto); }
.alternativa__letra {
  flex: 0 0 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.alternativa__botao[aria-pressed="true"] { border-color: var(--asfalto); background: var(--concreto); }
.alternativa--certa .alternativa__botao { border-color: var(--rota); background: var(--rota-fraco); }
.alternativa--errada .alternativa__botao { border-color: var(--regra); background: var(--regra-fraco); }
.alternativa__explica {
  font-size: var(--t-sm); color: var(--asfalto-70); line-height: 1.6;
  padding: var(--s2) var(--s4) 0 3.1rem;
}

.veredito { font-weight: 600; font-size: var(--t-md); margin-bottom: var(--s2); }
.veredito--certo { color: var(--rota); }
.veredito--errado { color: var(--regra); }

.gabarito {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--linha);
}

/* ----------------------------------------------------------------- Chat */
.chat { display: flex; flex-direction: column; min-height: 0; }
.chat__fluxo { flex: 1 1 auto; overflow-y: auto; padding: var(--s4) 0 var(--s5); }
.msg { margin-bottom: var(--s5); max-width: 100%; }
.msg__autor { font-size: var(--t-xs); font-weight: 600; color: var(--asfalto-45); margin-bottom: var(--s2); }
.msg__balao { line-height: 1.65; }
.msg--user .msg__balao {
  background: var(--asfalto); color: #fff;
  padding: var(--s3) var(--s4); border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
  display: inline-block; max-width: 85%;
}
.msg--user { text-align: right; }
.msg--user .msg__autor { text-align: right; }
.msg--ia .msg__balao p { margin: 0 0 0.9em; }
.msg--ia .msg__balao p:last-child { margin-bottom: 0; }
.msg--ia .msg__balao ul, .msg--ia .msg__balao ol { margin: 0 0 0.9em; padding-left: 1.25em; }

.fontes { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px dashed var(--linha-forte); }
.fontes__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); color: var(--asfalto-70);
  background: var(--concreto); border-radius: var(--r-sm);
  padding: 3px 8px; margin: 0 4px 4px 0;
}

.chat__entrada {
  position: sticky; bottom: 0;
  background: var(--concreto);
  padding: var(--s3) 0 var(--s4);
  border-top: 1px solid var(--linha);
}
.chat__caixa { display: flex; gap: var(--s2); align-items: flex-end; }
.chat__caixa textarea {
  min-height: 48px; max-height: 180px; resize: none; line-height: 1.5; padding: 0.75rem 0.9rem;
}

.pensando { display: inline-flex; gap: 4px; align-items: center; }
.pensando i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--asfalto-45);
  animation: pulso 1.2s infinite ease-in-out;
}
.pensando i:nth-child(2) { animation-delay: 0.15s; }
.pensando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulso { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Seletor de matéria do chat */
.escolha-materia { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); margin-bottom: var(--s3); }
.escolha-materia::-webkit-scrollbar { height: 0; }
.ficha {
  flex: 0 0 auto;
  font-size: var(--t-sm); font-weight: 500;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--linha-forte);
  border-radius: 99px;
  background: var(--superficie);
  color: var(--asfalto-70);
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.ficha:hover { border-color: var(--asfalto); color: var(--asfalto); }
.ficha[aria-pressed="true"], .ficha.ativa {
  background: var(--asfalto); border-color: var(--asfalto); color: #fff;
}

/* ------------------------------------------------------------ Assistente */
.assistente-btn {
  position: fixed;
  right: var(--s4);
  bottom: calc(var(--barra-inferior) + var(--s4));
  z-index: 40;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--asfalto);
  color: var(--sinal);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(28,31,33,0.28);
}
.assistente-btn[data-alerta="1"]::after {
  content: '';
  position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px;
  background: var(--regra);
  transform: rotate(45deg);
  border: 2px solid var(--asfalto);
}
.assistente-painel {
  position: fixed;
  right: var(--s4); left: var(--s4);
  bottom: calc(var(--barra-inferior) + 4.75rem);
  z-index: 41;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(28,31,33,0.2);
  max-height: 60vh; overflow-y: auto;
  padding: var(--s4);
}
@media (min-width: 720px) {
  .assistente-painel { left: auto; width: 24rem; }
  .assistente-btn { bottom: var(--s5); }
  .assistente-painel { bottom: 5.5rem; }
}
.assistente-painel[hidden] { display: none; }

/* ------------------------------------------------------------ Navegação */
.cabecalho {
  background: var(--asfalto);
  color: #fff;
  position: sticky; top: 0; z-index: 50;
}
.cabecalho__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; }
.marca { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
.marca:hover { color: #fff; }
.marca__losango { width: 13px; height: 13px; background: var(--sinal); transform: rotate(45deg); }
.marca__texto { font-size: var(--t-base); }
.marca__texto b { color: var(--sinal); }

.menu-desktop { display: none; gap: var(--s5); }
@media (min-width: 900px) { .menu-desktop { display: flex; } }
.menu-desktop a { color: rgba(255,255,255,0.78); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.menu-desktop a:hover, .menu-desktop a.ativo { color: var(--sinal); }

/* Barra inferior no celular */
.barra-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .barra-inferior { display: none; } }
.barra-inferior a {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: var(--s2) 2px;
  min-height: var(--barra-inferior);
  font-size: 0.6875rem; font-weight: 500;
  color: var(--asfalto-45); text-decoration: none;
}
.barra-inferior a.ativo { color: var(--asfalto); }
.barra-inferior a.ativo svg { color: var(--sinal-forte); }
.barra-inferior svg { width: 21px; height: 21px; }

.corpo-app { padding-bottom: calc(var(--barra-inferior) + var(--s5)); }
@media (min-width: 900px) { .corpo-app { padding-bottom: var(--s6); } }

/* ---------------------------------------------------------------- Grades */
.grade { display: grid; gap: var(--s4); }
.grade--2 { grid-template-columns: 1fr; }
.grade--3 { grid-template-columns: 1fr; }
.grade--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) {
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
}

.numero {
  font-size: var(--t-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 var(--s1);
}
.numero__rotulo { font-size: var(--t-sm); color: var(--asfalto-45); margin: 0; }

/* --------------------------------------------------------------- Tabelas */
.tabela-envolve { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela th {
  text-align: left; font-weight: 600; color: var(--asfalto-70);
  border-bottom: 1.5px solid var(--linha-forte);
  padding: var(--s2) var(--s3); white-space: nowrap;
}
.tabela td { border-bottom: 1px solid var(--linha); padding: var(--s3); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela--clicavel tbody tr:hover { background: var(--concreto); }

.etiqueta {
  display: inline-block; font-size: var(--t-xs); font-weight: 600;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--concreto); color: var(--asfalto-70);
}
.etiqueta--ok { background: var(--rota-fraco); color: var(--rota); }
.etiqueta--atencao { background: var(--sinal-fraco); color: var(--sinal-forte); }
.etiqueta--ruim { background: var(--regra-fraco); color: var(--regra); }
.etiqueta--info { background: var(--info-fraco); color: var(--info); }

/* ------------------------------------------------------------- Vazio */
.vazio {
  text-align: center;
  padding: var(--s7) var(--s4);
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--r-lg);
  background: var(--superficie);
}
.vazio h3 { margin-bottom: var(--s2); }
.vazio p { color: var(--asfalto-45); max-width: 30rem; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------- Rodapé */
.rodape {
  background: var(--asfalto);
  color: rgba(255,255,255,0.62);
  padding: var(--s6) 0 var(--s5);
  font-size: var(--t-sm);
  margin-top: var(--s7);
}
.rodape a { color: rgba(255,255,255,0.82); }
.rodape a:hover { color: var(--sinal); }
.rodape__aviso {
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: var(--s5); padding-top: var(--s4);
  font-size: var(--t-xs); line-height: 1.6; color: rgba(255,255,255,0.5);
}

/* ===================================================================
   Página de vendas
   =================================================================== */
.heroi {
  background: var(--asfalto);
  color: #fff;
  padding: var(--s7) 0 0;
  position: relative;
  overflow: hidden;
}
.heroi__grade { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 940px) {
  .heroi__grade { grid-template-columns: 1.05fr 0.95fr; gap: var(--s7); }
  .heroi { padding-top: var(--s8); }
}
.heroi h1 {
  font-size: clamp(2rem, 6.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: var(--s4);
}
.heroi__lead { font-size: var(--t-md); color: rgba(255,255,255,0.76); line-height: 1.6; max-width: 34rem; }
.heroi__contagem {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  background: rgba(232,176,6,0.14);
  border: 1px solid rgba(232,176,6,0.4);
  border-radius: 99px;
  padding: 0.4rem 0.95rem;
  margin-bottom: var(--s5);
  font-size: var(--t-sm);
  color: var(--sinal);
  font-weight: 600;
}
.heroi__imagem {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #2a2e31;
}
.heroi__imagem img { width: 100%; height: 100%; object-fit: cover; }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); align-items: center; }
.heroi__preco { font-size: var(--t-sm); color: rgba(255,255,255,0.6); }

.faixa-numeros {
  background: var(--sinal);
  color: var(--asfalto);
  margin-top: var(--s7);
  padding: var(--s4) 0;
}
.faixa-numeros__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
@media (min-width: 760px) { .faixa-numeros__grade { grid-template-columns: repeat(4, 1fr); } }
.faixa-numeros b { display: block; font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.faixa-numeros span { font-size: var(--t-sm); opacity: 0.78; }

.recurso { display: grid; gap: var(--s5); align-items: center; padding: var(--s6) 0; border-bottom: 1px solid var(--linha); }
@media (min-width: 860px) {
  .recurso { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .recurso--invertido .recurso__midia { order: -1; }
}
.recurso:last-of-type { border-bottom: 0; }
.recurso__midia { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--concreto); }
.recurso__midia img { width: 100%; height: 100%; object-fit: cover; }
.recurso h3 { font-size: var(--t-lg); margin-bottom: var(--s3); }
.recurso p { color: var(--asfalto-70); }

.preco-caixa {
  background: var(--superficie);
  border: 2px solid var(--asfalto);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5);
  text-align: center;
  max-width: 32rem;
  margin: 0 auto;
}
.preco-caixa__valor {
  font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  margin: var(--s3) 0 var(--s2);
}
.preco-caixa__valor small { font-size: var(--t-lg); font-weight: 600; }

.pergunta { border-bottom: 1px solid var(--linha); padding: var(--s4) 0; }
.pergunta:last-child { border-bottom: 0; }
.pergunta summary {
  font-weight: 600; cursor: pointer; list-style: none;
  display: flex; gap: var(--s3); align-items: flex-start;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta[open] summary { margin-bottom: var(--s3); }
.pergunta p { color: var(--asfalto-70); font-size: var(--t-base); padding-left: calc(9px + var(--s3)); }

/* --------------------------------------------------------------- Impressão */
@media print {
  .cabecalho, .barra-inferior, .assistente-btn, .assistente-painel,
  .leitor__navegacao, .rodape { display: none !important; }
  body { background: #fff; }
  .marca-agua span { color: rgba(0,0,0,0.16); }
}

/* ---------------------------------------------- Destaque na apostila
   Caixa usada dentro do texto da apostila para pegadinha de prova,
   atalho de memória ou conexão entre artigos. Usa o amarelo da
   sinalização de advertência, que é o mesmo significado: atenção. */
.leitor__corpo .aviso {
  display: block;
  background: var(--sinal-fraco);
  border-left: 4px solid var(--sinal);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s4);
  margin: var(--s5) 0;
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.6;
}
.leitor__corpo .aviso p { margin: 0; }
.leitor__corpo .aviso p + p { margin-top: var(--s2); }

/* ---------------------------------------------------------------
   Simulado: prova, revisão e espelho do resultado.
   --------------------------------------------------------------- */
.prova__topo{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.prova__form{margin-top:var(--s4)}
.prova__acoes{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}

.opcao{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3);
  border:1px solid var(--linha);border-radius:var(--raio);cursor:pointer;
  margin-bottom:var(--s2);transition:border-color .12s,background .12s}
.opcao:hover{border-color:var(--sinal)}
.opcao--marcada{border-color:var(--sinal);background:rgba(0,0,0,.02)}
.opcao input[type=radio]{margin-top:.25rem}
.opcao__letra{font-weight:700;min-width:1.4em}
.opcao__texto{flex:1}

.opcao--revisao{cursor:default}
.opcao--revisao:hover{border-color:var(--linha)}
.opcao--gabarito{border-color:#2e7d32;background:rgba(46,125,50,.06)}
.opcao--escolhida-errada{border-color:#c62828;background:rgba(198,40,40,.06)}

.grade-questoes{display:flex;flex-wrap:wrap;gap:var(--s2)}
.gq{display:inline-flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;border:1px solid var(--linha);border-radius:var(--raio);
  font-size:var(--t-xs);text-decoration:none;color:inherit}
.gq:hover{border-color:var(--sinal)}
.gq--atual{border-color:var(--sinal);border-width:2px;font-weight:700}
.gq--feita{background:var(--sinal);color:#fff;border-color:var(--sinal)}
.gq--pulada{background:rgba(0,0,0,.04);color:var(--suave)}

.nota-grande{font-size:3.4rem;line-height:1.05;font-weight:700}
.linha--atencao{background:rgba(198,40,40,.05)}
.espelho__topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.questao-espelho.e--certa{border-left:3px solid #2e7d32}
.questao-espelho.e--errada{border-left:3px solid #c62828}