/* =========================================================================
   app.css — Histórico SiSU · Prof. Eduardo Lenz

   Mesmos tokens da Mentoria ProUni, para que os módulos leiam como uma só
   família. Autocontido: não depende de Tailwind nem de nada externo.

   ─────────────────────────────────────────────────────────────────────────
   As quatro regras desta tela
   ─────────────────────────────────────────────────────────────────────────
   1. UMA FOLHA, NÃO SESSENTA CARTÕES. A lista é uma superfície branca única
      com fios de 1 px entre as linhas. Sessenta cartões com borda e sombra
      criam sessenta retângulos competindo entre si; o fio separa sem pesar.

   2. O RÓTULO VIVE NO CABEÇALHO, NÃO NA LINHA. "Nota de corte" aparece uma
      vez no alto da coluna, não sessenta vezes ao lado de cada número.

   3. COR SÓ NO VEREDITO. Metadado é texto cinza com ponto separador, não
      pílula colorida. Verde e vermelho ficam reservados para a única coisa
      que o aluno veio responder: passo ou não passo.

   4. OS FILTROS SÃO UMA FRASE. Cinco <select> alinhados em texto corrido
      pesam menos que cinco caixas rotuladas em grade — e dizem a mesma coisa.

   5. PROFUNDIDADE, NÃO DECORAÇÃO. A tela calma não precisa ser chapada: o
      fundo tem um tom mais fundo no alto que se dissolve, o painel de resumo
      tem um leve degradê, as linhas pares têm uma zebra quase invisível e a
      coluna da edição escolhida é uma faixa contínua. Nada disso acrescenta
      borda ou moldura — só dá relevo ao que já estava lá.
   ========================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* superfícies */
  --canvas:      #e4edf5;
  --surface:     #ffffff;
  --surface-2:   #f7f9fc;
  --surface-3:   #f1f5f9;

  /* tinta */
  --ink:         #0f172a;
  --ink-2:       #475569;
  --ink-3:       #64748b;
  --ink-4:       #94a3b8;

  /* traços */
  --linha:       #e2e8f0;
  --linha-forte: #cbd5e1;

  /* marca e acentos */
  --marca:       #4f46e5;
  --marca-escura:#4338ca;
  --marca-clara: #eef2ff;
  --teal:        #0f766e;
  --teal-claro:  #f0fdfa;
  --ambar:       #b45309;
  --ambar-claro: #fffbeb;
  --azul:        #1d4ed8;
  --azul-claro:  #eff6ff;

  /* semântica */
  --ok:          #15803d;
  --ok-claro:    #ecfdf5;
  --ok-borda:    #bbf7d0;
  --erro:        #b91c1c;
  --erro-claro:  #fef2f2;
  --erro-borda:  #fecaca;

  /* forma */
  --r-card:      16px;
  --r-ctrl:      10px;
  --r-chip:      8px;
  --r-pill:      999px;

  --sombra-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --sombra-2: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 20px -8px rgba(15, 23, 42, .14);
  --sombra-3: 0 4px 8px rgba(15, 23, 42, .06), 0 20px 40px -12px rgba(15, 23, 42, .22);

  --gradiente-marca: linear-gradient(135deg, #22d3ee 0%, #2dd4bf 42%, #4f46e5 100%);

  /* Séries dos gráficos, atribuídas por entidade e nunca por posição na
     lista: ampla concorrência é sempre índigo, a cota escolhida é sempre
     âmbar, a nota do aluno é sempre a tracejada teal. Trocar o filtro não
     repinta o que sobrou. Conferidos no validador de paleta: faixa de
     luminosidade, piso de croma, separação para daltonismo (ΔE 31,7 no pior
     par) e contraste sobre o branco. */
  --serie-ac:   #4f46e5;
  --serie-cota: #b45309;
  --serie-eu:   #0d9488;

  --largura: 1100px;
  --barra-altura: 52px;
}

/* ─────────────────────────────────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  /* Coluna flexível por um motivo só: a barra legal precisa encostar no pé da
     JANELA quando a página é curta — e ela é curta justamente na tela de
     entrada, que é a primeira coisa que todo visitante vê. Sem isto, num
     monitor grande a faixa escura aparecia no meio da tela com um descampado
     azul embaixo, parecendo defeito. */
  display: flex;
  flex-direction: column;
  /* Um tom mais fundo no alto que se dissolve no canvas. Dá profundidade à
     página sem acrescentar nenhuma borda nova — a tela continua calma, só
     deixa de ser chapada. O gradiente não rola junto: fica preso ao topo. */
  background: var(--canvas);
  background-image: linear-gradient(180deg, #d3e2f0 0%, rgba(211, 226, 240, 0) 420px);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports (min-height: 100dvh) { body { min-height: 100dvh; } }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -.022em; }
p { margin: 0; }
a { color: var(--marca-escura); text-underline-offset: 2px; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection { background: #c7d2fe; color: var(--ink); }

.hs-oculto { display: none !important; }
.hs-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Todo número de nota usa largura de dígito fixa: as colunas param de tremer
   quando a lista é refiltrada. */
.hs-num { font-variant-numeric: tabular-nums; }

.hs-conteudo {
  width: 100%; max-width: var(--largura);
  margin-inline: auto; padding-inline: 16px;
}
@media (min-width: 680px) { .hs-conteudo { padding-inline: 28px; } }

/* Microrrótulo: o único lugar onde se usa caixa alta. Serve para dizer o que
   é uma coluna ou um bloco, sempre uma vez só. */
.hs-micro {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4);
}

/* ─────────────────────────────────────────────────────────────────────────
   ÍCONES — traço de 1,75 px herdando currentColor
   ───────────────────────────────────────────────────────────────────────── */

.hs-i {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.hs-i-lg { width: 1.45em; height: 1.45em; }

/* ─────────────────────────────────────────────────────────────────────────
   TOPO — rola junto com a página. A barra de filtros é que gruda, porque
   ela é ferramenta; a marca é enfeite.
   ───────────────────────────────────────────────────────────────────────── */

.hs-topo { padding-block: 14px; }
.hs-topo-linha { display: flex; align-items: center; gap: .65rem; }

.hs-marca {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 9px;
  background: var(--gradiente-marca);
  color: #fff;
}
.hs-marca-nome {
  font-size: .9rem; font-weight: 700; letter-spacing: -.01em;
}
.hs-marca-nome span { color: var(--ink-3); font-weight: 600; }
/* O nome do autor leva ao site dele, mas sem virar um link gritando no topo:
   herda a cor do cabeçalho e só se sublinha quando o ponteiro chega. */
.hs-marca-nome a { color: inherit; text-decoration: none; }
.hs-marca-nome a:hover { color: var(--marca-escura); text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   CAPA
   ───────────────────────────────────────────────────────────────────────── */

.hs-capa { padding-block: .4rem 1.3rem; }
@media (max-width: 560px) { .hs-capa { padding-block: .1rem 1rem; } }

/* ─────────────────────────────────────────────────────────────────────────
   TELA DE ENTRADA

   Mesmos campos da faixa do topo, dispostos como um cartão centrado que pede
   as notas antes de abrir a lista. Vale a pausa: sem as cinco notas o site
   mostra notas de corte soltas; com elas, mostra o que elas significam para
   quem está olhando.

   A ordem muda aqui — as notas vêm antes da busca, porque são o que se pede.
   ───────────────────────────────────────────────────────────────────────── */

.hs-inicio .hs-topo { padding-block: 22px 8px; }

.hs-inicio .hs-capa {
  display: flex; flex-direction: column;
  max-width: 660px;
  margin-inline: auto;
  margin-block: 1.5rem 3rem;
  padding: 2rem 1.9rem 1.8rem;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 20px;
  box-shadow: var(--sombra-3);
  position: relative; overflow: hidden;
}
/* Fio da marca no alto do cartão — o mesmo recurso dos cartões da Mentoria. */
.hs-inicio .hs-capa::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--gradiente-marca);
}
@media (max-width: 560px) {
  .hs-inicio .hs-capa { padding: 1.6rem 1.2rem 1.4rem; margin-block: .8rem 2rem; }
}

.hs-inicio .hs-capa h1 { order: 1; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); }
.hs-inicio .hs-capa-sub { order: 2; }
.hs-inicio .hs-passo[data-passo="1"] { order: 3; }
.hs-inicio .hs-enem { order: 4; }
.hs-inicio .hs-passo[data-passo="2"] { order: 5; }
.hs-inicio .hs-busca { order: 6; }
.hs-inicio .hs-entrada-fim { order: 7; }
.hs-inicio .hs-busca-nota { display: none; }

/* Numerador das etapas: o número vive no ::before, não no texto, para não
   ser lido em voz alta como parte do rótulo. */
.hs-passo { display: none; }
.hs-inicio .hs-passo {
  display: flex; align-items: center; gap: .55rem;
  margin-top: 1.5rem; margin-bottom: .55rem;
  font-size: .9rem; font-weight: 700; color: var(--ink);
}
.hs-inicio .hs-passo::before {
  content: attr(data-passo);
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--marca-clara); color: var(--marca-escura);
  font-size: .72rem; font-weight: 800;
}
.hs-passo em {
  font-style: normal; font-size: .76rem; font-weight: 600; color: var(--ink-4);
}
.hs-inicio .hs-busca { margin-top: 0; }

/* Na entrada, as cinco notas são A ação da tela: ocupam a largura toda, num
   painel levemente tingido, com campos altos o bastante para serem o
   primeiro lugar onde o olho pousa. */
.hs-inicio .hs-enem {
  display: block;
  margin-top: 0;
  padding: .9rem 1rem 1rem;
  border-radius: 13px;
  background: var(--surface-2);
  border: 1px solid var(--linha);
}
.hs-inicio .hs-enem-campos {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
}
.hs-inicio .hs-enem-campo input {
  width: 100%;
  padding: .6rem .3rem;
  font-size: 1.05rem; font-weight: 700;
}
.hs-inicio .hs-enem-campo label { text-align: center; padding-left: 0; }
.hs-inicio .hs-enem-dica,
.hs-inicio .hs-enem-fim { margin-top: .75rem; }
.hs-inicio .hs-enem-fim { padding-bottom: 0; }

@media (max-width: 560px) {
  .hs-inicio .hs-enem { padding: .7rem .6rem .8rem; }
  .hs-inicio .hs-enem-campos { gap: .3rem; }
  .hs-inicio .hs-enem-campo input { font-size: .92rem; padding-inline: .15rem; }
}

/* A saída sem notas existe, mas é o caminho secundário: fica em texto
   pequeno e sem sublinhado, para não disputar com o botão. */
.hs-inicio #pular {
  font-size: .82rem; font-weight: 600;
  color: var(--ink-3); text-decoration: none;
}
.hs-inicio #pular:hover { color: var(--marca-escura); text-decoration: underline; }

.hs-entrada-fim { display: none; }
.hs-inicio .hs-entrada-fim {
  display: grid; justify-items: center; gap: .7rem;
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linha);
}

/* ── retrato ───────────────────────────────────────────────────────────────
   As fotos são de meio corpo. Num círculo, `object-fit: cover` sozinho mostra
   quase a imagem inteira e o rosto sai pequeno demais para ser reconhecido.
   O recorte é feito em dois tempos: a moldura corta, e a foto dentro dela é
   ampliada a partir de um ponto alto, que é onde o rosto está nas duas.
   ───────────────────────────────────────────────────────────────────────── */

.hs-retrato {
  display: block; flex: none; overflow: hidden;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--surface);
  box-shadow: var(--sombra-1);
}
.hs-retrato img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0%;
  transform: scale(1.45); transform-origin: 50% 8%;
}
.hs-retrato-g {
  width: 84px; height: 84px;
  border-width: 3px;
  box-shadow: var(--sombra-2);
}

/* Assinatura do autor: do tamanho de um rosto numa conversa, não de um
   anúncio. */
.hs-assinatura {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .15rem;
}
.hs-assinatura-txt { display: flex; flex-direction: column; line-height: 1.3; }
.hs-assinatura b { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.hs-assinatura-txt span { font-size: .72rem; color: var(--ink-4); }

.hs-btn-grande {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%;
  padding: .85rem 1.4rem;
  border: 0; border-radius: 13px;
  background: var(--marca); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .55);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hs-btn-grande:hover:not(:disabled) {
  background: var(--marca-escura); transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(79, 70, 229, .6);
}
.hs-btn-grande:disabled {
  background: var(--surface-3); color: var(--ink-4);
  box-shadow: none; cursor: not-allowed;
}

.hs-entrada-nota { font-size: .76rem; color: var(--ink-4); text-align: center; }

.hs-capa h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem);
  letter-spacing: -.032em;
}
.hs-capa-sub {
  margin-top: .45rem;
  font-size: .92rem; color: var(--ink-3);
}
.hs-capa-sub b { color: var(--ink-2); font-weight: 600; }

/* ── busca ─────────────────────────────────────────────────────────────── */

.hs-busca { position: relative; margin-top: 1.1rem; }
.hs-busca input {
  display: block; width: 100%;
  padding: .85rem 2.6rem .85rem 2.9rem;
  border: 1px solid var(--linha-forte);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 1rem;
  box-shadow: var(--sombra-1);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hs-busca input::placeholder { color: var(--ink-4); }
.hs-busca input::-webkit-search-cancel-button { display: none; }
.hs-busca input:hover { border-color: #a9b6c7; }
.hs-busca input:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
}
.hs-busca-lupa {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); pointer-events: none;
}
.hs-busca-x {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 8px;
  background: none; color: var(--ink-4); cursor: pointer;
}
.hs-busca-x:hover { background: var(--surface-3); color: var(--ink-2); }

/* ─────────────────────────────────────────────────────────────────────────
   SUGESTÕES DA BUSCA

   Digitar "med" devia oferecer "Medicina" e "Medicina Veterinária" para
   escolher, em vez de obrigar a adivinhar o nome exato. Escolher uma sugestão
   preenche o campo com o nome inteiro do curso — e isso faz a busca cair no
   nível 1 (curso exato) pela regra que já existe, sem filtro novo nenhum.
   ───────────────────────────────────────────────────────────────────────── */

.hs-sugestoes {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 35;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--linha-forte);
  border-radius: 13px;
  box-shadow: var(--sombra-3);
  padding: .3rem;
}

.hs-sug-grupo {
  padding: .5rem .6rem .3rem;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4);
}
.hs-sug-grupo:not(:first-child) {
  margin-top: .2rem; border-top: 1px solid var(--linha); padding-top: .6rem;
}

.hs-sug {
  display: flex; align-items: center; gap: .6rem;
  width: 100%;
  padding: .5rem .6rem;
  border: 0; border-radius: 9px;
  background: none;
  font: inherit; text-align: left; color: var(--ink);
  cursor: pointer;
}
.hs-sug:hover, .hs-sug.ativa { background: var(--marca-clara); }
.hs-sug .hs-i { color: var(--ink-4); flex: none; }
.hs-sug.ativa .hs-i { color: var(--marca); }

.hs-sug-txt { flex: 1; min-width: 0; }
.hs-sug-nome {
  font-size: .9rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O trecho digitado fica em negrito dentro do nome, para mostrar por que
   aquela linha apareceu. */
.hs-sug-nome b { font-weight: 800; color: var(--marca-escura); }
.hs-sug-sub {
  font-size: .76rem; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-sug-n {
  flex: none;
  font-size: .76rem; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.hs-busca-nota {
  margin-top: .5rem; padding-left: .15rem;
  font-size: .8rem; color: var(--ink-3); line-height: 1.5;
}

/* Botão que se comporta como link: usado dentro de frase corrida, onde um
   botão com fundo quebraria a leitura. */
.hs-link {
  border: 0; padding: 0; background: none;
  font: inherit; font-weight: 650;
  color: var(--marca-escura);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.hs-link:hover { color: var(--marca); }

/* ─────────────────────────────────────────────────────────────────────────
   NOTAS DO ENEM — faixa compacta, não um cartão

   Cinco campos pequenos numa linha. Era um cartão de 230 px de altura; virou
   uma faixa de 70 px. A tela começa no dado, não no formulário.
   ───────────────────────────────────────────────────────────────────────── */

.hs-enem {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-top: .9rem;
}

.hs-enem-campos { display: flex; gap: .4rem; flex-wrap: wrap; }

.hs-enem-campo { display: grid; gap: .15rem; }
.hs-enem-campo label {
  font-size: .62rem; font-weight: 700;
  letter-spacing: .085em; text-transform: uppercase;
  color: var(--ink-4); padding-left: .15rem;
}
.hs-enem-campo input {
  width: 76px;
  padding: .42rem .4rem;
  border: 1px solid var(--linha-forte);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: .9rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hs-enem-campo input::placeholder { color: var(--ink-4); font-weight: 400; }
.hs-enem-campo input:hover { border-color: #a9b6c7; }
.hs-enem-campo input:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
}
/* As setinhas do number encolhem o campo e ninguém usa. */
.hs-enem-campo input::-webkit-outer-spin-button,
.hs-enem-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hs-enem-campo input[type=number] { -moz-appearance: textfield; }

.hs-enem-campo label .curto { display: none; }

/* No celular os cinco campos entram numa fileira só — com os rótulos longos
   eles quebravam em duas e empurravam a lista para 870 px de rolagem. */
@media (max-width: 560px) {
  .hs-enem { width: 100%; }
  .hs-enem-campos {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .3rem; width: 100%;
  }
  .hs-enem-campo input { width: 100%; padding-inline: .15rem; font-size: .85rem; }
  .hs-enem-campo label .longo { display: none; }
  .hs-enem-campo label .curto { display: inline; }
  .hs-enem-campo label { text-align: center; padding-left: 0; }
}

.hs-enem-fim {
  display: flex; align-items: center; gap: .5rem;
  padding-bottom: .1rem;
  font-size: .82rem; color: var(--ink-3);
}
.hs-enem-fim b {
  font-size: .95rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hs-enem-dica { font-size: .82rem; color: var(--ink-3); padding-bottom: .1rem; }

/* ── abas de ano do Enem ───────────────────────────────────────────────────
   Três provas possíveis, um único conjunto de campos. A aba fechada precisa
   dizer sozinha que as notas dela continuam lá — daí o ✓ e o contador: sem
   eles, trocar de ano parece ter apagado o que foi digitado.
   ───────────────────────────────────────────────────────────────────────── */

.hs-enem-anos {
  display: flex; gap: .3rem; flex-wrap: wrap;
  align-self: flex-end; padding-bottom: .15rem;
}

.hs-ano {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--surface);
  font: inherit; font-size: .76rem; font-weight: 600;
  color: var(--ink-3);
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hs-ano:hover { border-color: var(--linha-forte); color: var(--ink-2); }
.hs-ano.atual {
  background: var(--marca-clara); border-color: #c7d2fe;
  color: var(--marca-escura); font-weight: 700;
}
.hs-ano-ok { font-style: normal; color: var(--ok); font-weight: 800; }
.hs-ano.atual .hs-ano-ok { color: var(--ok); }
.hs-ano-parcial {
  font-style: normal; font-size: .68rem; font-weight: 700;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}

/* Explica o que o site faz com mais de uma prova. Só existe quando há mais
   de uma: com uma só não há escolha a relatar. */
.hs-enem-varios {
  flex-basis: 100%;
  margin-top: .1rem;
  font-size: .78rem; line-height: 1.5; color: var(--ink-3);
}

.hs-inicio .hs-enem-anos { padding-bottom: .55rem; }
.hs-inicio .hs-enem-varios { margin-top: .55rem; }

/* ─────────────────────────────────────────────────────────────────────────
   BOTÕES
   ───────────────────────────────────────────────────────────────────────── */

.hs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem .9rem;
  border: 1px solid transparent; border-radius: var(--r-ctrl);
  font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hs-btn:disabled { opacity: .5; cursor: not-allowed; }
.hs-btn-sec { background: var(--surface); color: var(--ink-2); border-color: var(--linha-forte); }
.hs-btn-sec:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.hs-btn-fan { background: transparent; color: var(--ink-3); }
.hs-btn-fan:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.hs-btn-sm { padding: .32rem .55rem; font-size: .78rem; }
.hs-btn-bloco { width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   BARRA DE FILTROS — gruda no topo, lê como frase

   Cada <select> aparece como texto com uma seta, não como caixa. No celular
   a faixa rola na horizontal em vez de quebrar em duas fileiras.
   ───────────────────────────────────────────────────────────────────────── */

.hs-barra {
  position: sticky; top: 0; z-index: 30;
  background: rgba(228, 237, 245, .88);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-block: 1px solid var(--linha);
  margin-bottom: 1.1rem;
}
.hs-barra-linha {
  display: flex; align-items: center; gap: .3rem;
  min-height: var(--barra-altura);
}

.hs-barra-filtros {
  display: flex; align-items: center; gap: .15rem;
  flex: 1; min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hs-barra-filtros::-webkit-scrollbar { display: none; }

/* Esvai a borda direita quando ainda há filtro fora da tela, em vez de cortar
   a palavra no seco. A classe é posta pelo JS só quando há mesmo transbordo —
   em CSS puro a máscara apagaria o último filtro também no computador, onde
   tudo cabe. */
.hs-barra-filtros.transborda {
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.hs-campo-inline {
  display: inline-flex; align-items: center; gap: .3rem;
  flex: none;
  padding: .3rem .1rem .3rem .45rem;
  border-radius: 8px;
  white-space: nowrap;
}
.hs-campo-inline > span { font-size: .78rem; color: var(--ink-4); font-weight: 600; }

.hs-select {
  appearance: none; -webkit-appearance: none;
  /* Um <select> nativo tem a largura da opção MAIS LARGA, não da escolhida —
     "Grau: todos" ficava com 190 px de vazio até o caret por causa de "Área
     Básica de Ingresso (ABI)" na lista. field-sizing resolve onde existe; o
     max-width segura o estrago onde ainda não existe. */
  field-sizing: content;
  max-width: 170px;
  padding: .1rem 1.15rem .1rem .25rem;
  border: 0; border-radius: 6px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  background-size: .85rem;
  color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 650;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color .15s ease;
}
.hs-select:hover { background-color: var(--surface-3); }
.hs-select option { font-weight: 400; color: var(--ink); background: var(--surface); }

.hs-barra-sep { flex: none; width: 1px; height: 18px; background: var(--linha-forte); margin-inline: .25rem; }

.hs-barra-dir { display: flex; align-items: center; gap: .4rem; flex: none; }

/* Interruptor "só onde eu passo". */
.hs-chave {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .5rem; border-radius: 8px;
  font-size: .8rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.hs-chave:hover { background: var(--surface-3); }
.hs-chave input { position: absolute; opacity: 0; width: 0; height: 0; }
.hs-chave-trilha {
  position: relative; width: 32px; height: 18px; flex: none;
  border-radius: var(--r-pill);
  background: var(--linha-forte);
  transition: background-color .18s ease;
}
.hs-chave-trilha::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: var(--sombra-1);
  transition: transform .18s ease;
}
.hs-chave input:checked + .hs-chave-trilha { background: var(--ok); }
.hs-chave input:checked + .hs-chave-trilha::after { transform: translateX(14px); }
.hs-chave input:focus-visible + .hs-chave-trilha { outline: 2px solid var(--marca); outline-offset: 2px; }
.hs-chave:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.hs-chave:has(input:disabled):hover { background: none; }

/* ─────────────────────────────────────────────────────────────────────────
   A FOLHA — superfície branca única que carrega resumo, cabeçalho e lista
   ───────────────────────────────────────────────────────────────────────── */

.hs-folha {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

/* Na entrada, nada do que vem depois da capa aparece. */
.hs-inicio .hs-barra,
.hs-inicio main > .hs-folha,
.hs-inicio .hs-rodape { display: none; }

/* ── painel de resumo ──────────────────────────────────────────────────── */

/* O painel de resumo ganha um fundo levemente tingido, que o separa da lista
   sem precisar de mais uma borda. */
.hs-painel {
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, #f6f9fd 0%, var(--surface) 100%);
}
@media (min-width: 680px) { .hs-painel { padding: 1.15rem 1.4rem; } }

.hs-painel-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

/* Números do resumo: um só bloco, separados por ponto médio. */
.hs-estat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; }
.hs-estat > div { display: flex; align-items: baseline; gap: .3rem; }
.hs-estat b {
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
.hs-estat span { font-size: .82rem; color: var(--ink-3); }
.hs-estat i {
  font-style: normal; color: var(--ink-4); padding-inline: .1rem;
}

/* No celular a mesma fileira de números ocupava três linhas inteiras. Encolhe
   o corpo em vez de cortar informação. */
@media (max-width: 560px) {
  .hs-estat { gap: .1rem .45rem; }
  .hs-estat b { font-size: .95rem; }
  .hs-estat span { font-size: .76rem; }
}

.hs-contexto { margin-top: .3rem; font-size: .8rem; color: var(--ink-4); }

/* ── veredito: a resposta que o aluno veio buscar ──────────────────────── */

.hs-veredito-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin-top: .9rem;
}
.hs-veredito {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-size: .92rem; color: var(--ink-2);
}
.hs-veredito b {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ok);
}
.hs-veredito.vazio b { color: var(--ink-3); }
/* No celular o número em 1,5rem quebrava a frase em três linhas, com ele
   sozinho no meio. Um ponto menor e ela volta a caber em duas. */
@media (max-width: 560px) { .hs-veredito b { font-size: 1.25rem; } }

/* Placar entre as provas do aluno. Fica logo abaixo do veredito porque é a
   explicação dele: o número de ofertas que ele alcança já saiu da melhor
   prova de cada uma. */
.hs-resumo-enem {
  margin-top: .5rem;
  font-size: .8rem; line-height: 1.55; color: var(--ink-3);
}
.hs-resumo-enem b { color: var(--ink-2); font-weight: 700; }

/* ── distribuição ──────────────────────────────────────────────────────── */

.hs-dist { margin-top: .85rem; }
.hs-dist svg { display: block; width: 100%; height: 58px; overflow: visible; }
.hs-dist .barra { fill: var(--ink-4); opacity: .34; }
.hs-dist .barra-ok { fill: var(--ok); opacity: .38; }
.hs-dist .barra-erro { fill: var(--erro); opacity: .26; }
.hs-dist .base { stroke: var(--linha-forte); stroke-width: 1; }
.hs-dist .zero { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.hs-dist text { font-size: 9.5px; fill: var(--ink-4); font-weight: 600; }
.hs-dist .zero-rot { fill: var(--ink-2); }

.hs-dist-pes {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .1rem;
  font-size: .72rem; color: var(--ink-4);
}

/* ── cabeçalho de colunas: o rótulo que some de dentro das linhas ──────── */

/* No computador o cabeçalho traz os rótulos das colunas. No celular ele traz
   só o lado esquerdo — onde mora o botão de anos anteriores, que de outro
   jeito ficaria inalcançável justamente onde a faixa desliza e caberia mais
   ano. Os rótulos das colunas não vêm junto: cada célula já carrega o seu. */
.hs-cab {
  display: flex; align-items: center;
  padding: .5rem 1.1rem;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: var(--surface-2);
}
.hs-cab .hs-item-eds { display: none; }
.hs-cab .hs-cab-esq { flex: 1; }

@media (min-width: 880px) {
  .hs-cab { display: grid; padding-inline: 1.4rem; }
  .hs-cab .hs-item-eds { display: grid; }
}

.hs-cab, .hs-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
}

/* Nota sob o cabeçalho, explicando a segunda linha de cada coluna. */
.hs-cab-nota {
  padding: .5rem 1.4rem;
  border-bottom: 1px solid var(--linha);
  background: var(--surface-2);
  font-size: .76rem; color: var(--ink-3); line-height: 1.5;
}
@media (max-width: 879px) { .hs-cab-nota { padding-inline: 1.1rem; } }

/* ─────────────────────────────────────────────────────────────────────────
   COLUNAS DE EDIÇÃO

   Uma coluna por edição, com a nota de corte daquele ano e a diferença do
   aluno logo abaixo. A diferença é recalculada edição por edição porque os
   pesos do curso mudam: entre 2025 e 2026, 6% das ofertas mudaram de peso, e
   nelas a média do mesmo aluno varia 10,8 pontos na mediana.
   ───────────────────────────────────────────────────────────────────────── */

.hs-item-eds {
  display: grid;
  grid-template-columns: repeat(var(--n-eds, 3), var(--larg-ed, 92px));
  gap: .1rem;
  align-items: stretch;
}

.hs-ed {
  padding: .1rem .45rem;
  text-align: right;
}

/* A coluna da edição escolhida é uma faixa contínua descendo a tabela, não
   um selo por célula: as células se encostam e o fundo vira coluna. É o que
   deixa claro, sem legenda, qual edição manda na ordenação e nos filtros. */
.hs-ed.atual {
  background: linear-gradient(90deg, rgba(79, 70, 229, .05), rgba(79, 70, 229, .08));
  box-shadow: inset 1px 0 0 rgba(79, 70, 229, .12), inset -1px 0 0 rgba(79, 70, 229, .12);
}
.hs-cab .hs-ed-cab.atual,
.hs-cab .hs-micro.atual { position: relative; }
/* A edição escolhida é a que manda na ordenação e nos filtros; as outras
   estão ali como contexto, e o cinza diz isso sem precisar de legenda. */
/* ── o corpo dos números ───────────────────────────────────────────────────
   Cada célula declara o tamanho que QUER nas variáveis abaixo, e um único
   par de regras aplica. No fim, tudo é multiplicado por `--ed-escala`, que o
   app.js mede depois de desenhar: se o maior número não couber na célula —
   e num telefone de 320 px com cinco colunas não cabe —, a escala desce o
   necessário para ele caber, e só isso.

   É medida, não palpite. Largura de tela, número de colunas, fonte do
   sistema e idioma mudam a conta, e qualquer tabela de breakpoints escrita à
   mão erra em alguma combinação — esta já errou, deixando "813,21"
   transbordar por cima da célula vizinha a 360 px. */
.hs-ed { --f-nota: .95rem; --f-delta: .74rem; }

.hs-ed-nota {
  font-size: calc(var(--f-nota) * var(--ed-escala, 1));
  font-weight: 600; line-height: 1.25;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.hs-ed-nota.vazia { color: var(--ink-4); font-weight: 400; }

/* ── a cor da célula ───────────────────────────────────────────────────────
   O fundo responde a uma pergunta só: a sua nota chega nesta aqui?

   É a leitura mais rápida que a tabela permite. Descendo uma coluna, o aluno
   vê de relance até onde a nota dele alcança; percorrendo a linha da esquerda
   para a direita numa edição parcial, vê o verde virar vermelho conforme a
   parcial sobe dia após dia. Os números já diziam isso — mas número exige
   leitura, e cor não exige.

   Três estados, os mesmos do trilho à esquerda da linha. Travado fica sem
   cor de propósito: não é "perdeu por pouco", é outra coisa, e quem conta
   isso é a palavra "nota mín." no lugar da diferença.

   Os tons saem dos claros da paleta, um passo mais fundo: nos valores de
   token puros (`--ambar-claro` é #fffbeb) a célula ficava quase branca e a
   cor não chegava a ser vista de relance, que é o único motivo de ela
   existir. Ainda assim param bem antes do semáforo — o número por cima
   continua em `--ink-2`, com folga de contraste. */
.hs-ed.v-ok     { background: #e4f7ea; }
.hs-ed.v-perto  { background: #fdf3dc; }
.hs-ed.v-abaixo { background: #fde9e9; }

/* Na coluna que manda nos filtros a cor é mais forte: é a resposta que vale
   hoje, e as outras são contexto. */
.hs-ed.atual.v-ok     { background: rgba(21, 128, 61, .13); }
.hs-ed.atual.v-perto  { background: rgba(180, 83, 9, .13); }
.hs-ed.atual.v-abaixo { background: rgba(185, 28, 28, .11); }
/* A diferença é colorida em TODAS as colunas, não só na atual: ver 2024 em
   verde e 2026 em vermelho conta uma história que o cinza esconderia, e é
   justamente para isso que as colunas existem. A hierarquia entre elas vem
   do tamanho, do peso e do fundo — não de tirar a cor. */
.hs-ed-delta {
  margin-top: .02rem;
  font-size: calc(var(--f-delta) * var(--ed-escala, 1));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hs-ed-delta.trava { color: var(--erro); }

/* Qual prova do aluno rendeu mais naquela edição. Só aparece quando há mais
   de uma preenchida — e em 9,5 px, porque é nota de rodapé da célula, não
   informação de primeira leitura. */
.hs-ed-enem {
  margin-top: .04rem;
  font-size: .6rem; font-weight: 600;
  letter-spacing: .02em; color: var(--ink-4);
  white-space: nowrap;
}
/* Quando a etiqueta aparece numa coluna de contexto é porque aquele ano
   trocou de prova — vale um tom a mais, é a exceção que ela veio contar. */
.hs-ed-enem.trocou { color: var(--ambar); font-weight: 700; }

.hs-ed.atual { --f-nota: 1.18rem; --f-delta: .8rem; }
.hs-ed.atual .hs-ed-nota {
  font-weight: 700; color: var(--ink);
  letter-spacing: -.025em;
}
.hs-ed.atual .hs-ed-delta { font-weight: 700; }

/* Do tamanho de um microrrótulo, mas com cara de botão: sem a borda ele se
   lia como mais um título de coluna, e quem queria os anos anteriores não
   sabia onde clicar. A pílula custa 1 px e resolve. */
.hs-link-micro {
  border: 1px solid var(--linha-forte);
  padding: .22rem .55rem; border-radius: var(--r-pill);
  background: var(--surface);
  font: inherit; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--marca-escura);
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.hs-link-micro:hover { background: var(--marca-clara); border-color: #c7d2fe; }

.hs-cab-esq {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-width: 0;
}

.hs-cab .hs-item-eds .hs-micro { text-align: right; padding-right: .35rem; }
.hs-cab .hs-item-eds .hs-micro.atual { color: var(--ink-2); }
/* "dia 2", "última": rótulo de dia não é ano, e a caixa baixa diz isso antes
   de qualquer leitura — a coluna cinza ao lado continua sendo "2026". */
.hs-cab .hs-item-eds .hs-micro-dia { text-transform: none; letter-spacing: 0; }

/* ── a coluna do ano anterior, dentro de uma edição parcial ────────────────
   Ela é outra natureza de número: já fechou, não muda mais, e serve de régua
   para as parciais ao lado. Antes, um fio de 1 px — que ninguém via. Agora um
   corte de 2 px com folga depois, e uma legenda dizendo o que ela é.

   A separação é estrutural e não de cor porque a cor já está ocupada: esta
   coluna também recebe o verde ou o vermelho da nota do aluno. */
/* O corte forte vai só na ÚLTIMA coluna de ano — a que encosta nos dias. Com
   os três anos abertos, repetir o corte entre 2024 e 2025 partiria o grupo
   que deveria se ler junto. */
.hs-ed.ref-fim,
.hs-cab .hs-item-eds .hs-micro.ref-fim {
  margin-right: .45rem;
  box-shadow: inset -2px 0 0 var(--ink-4);
}
.hs-micro-sub {
  display: block;
  margin-top: .05rem;
  font-size: .58rem; font-weight: 600; font-style: normal;
  letter-spacing: .01em; text-transform: none;
  color: var(--ink-4);
}
.hs-ed.ref .hs-ed-ano { color: var(--ink-3); }

/* O ano dentro da célula só existe no celular; no computador o cabeçalho de
   colunas já cumpre esse papel e repetir 150 vezes seria ruído. */
.hs-ed-ano { display: none; }

/* ── cinco colunas ou mais ─────────────────────────────────────────────────
   É o caso das inscrições (ano de referência + os dias) e o de quem abriu
   todos os anos. As colunas encolhem, e com elas o respiro lateral e o corpo
   do número em destaque. */
.apertado .hs-ed { padding-inline: .3rem; }
.apertado .hs-ed.atual { --f-nota: 1.04rem; }
.hs-item-eds.apertado .hs-micro { font-size: .66rem; }

@media (max-width: 879px) {
  .hs-item-eds { grid-template-columns: repeat(var(--n-eds, 3), minmax(0, 1fr)); }
  .hs-ed.atual { --f-nota: 1.02rem; }
  .hs-ed-ano {
    display: block;
    font-size: .62rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: .1rem;
  }
  .hs-ed.atual .hs-ed-ano { color: var(--ink-3); }

  /* O respiro à DIREITA é o que se vê: os números são alinhados por ali, e
     sem ele encostavam no divisor da coluna de referência e na borda do
     cartão. À esquerda quase não precisa — ali sobra o espaço que o número
     mais curto deixa.

     Vale para TODA coluna de célula no celular, e não só a partir de cinco:
     com quatro colunas num telefone de 360 px o número também não tinha onde
     respirar. */
  .hs-ed { padding-left: .1rem; padding-right: .4rem; }
  .apertado .hs-ed { padding-left: .08rem; padding-right: .34rem; }
  .apertado .hs-ed { --f-nota: .86rem; --f-delta: .68rem; }
  .apertado .hs-ed.atual { --f-nota: .92rem; --f-delta: .72rem; }
  .apertado .hs-ed-ano { font-size: .56rem; letter-spacing: .02em; }

  /* ── a faixa que desliza ─────────────────────────────────────────────────
     A partir de seis colunas não há telefone em que todas caibam legíveis.
     Em vez de encolher o número até ele deixar de ser lido, a faixa vira uma
     tira que desliza para o lado — como toda tabela de dados no celular.

     A rolagem é nativa: arrastar na horizontal rola e NÃO dispara o clique
     que abre o painel; tocar dispara. O navegador já separa as duas coisas, e
     um arrasto escrito à mão é onde moram os defeitos de gesto. O app.js só
     mantém todas as linhas no mesmo ponto. */
  .hs-eds-rola .hs-item-eds {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* `minmax(74px, 1fr)` e não `74px` com `justify-content: end`: alinhar o
       conteúdo pelo fim empurra o excesso para fora da borda ESQUERDA, e
       transbordo à esquerda não é rolável — o navegador simplesmente o torna
       inalcançável, e a faixa fica parecendo que cabe quando não cabe.
       Assim as colunas têm um piso de 74 px e crescem se sobrar espaço. */
    grid-auto-columns: minmax(74px, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }
  .hs-eds-rola .hs-item-eds::-webkit-scrollbar { display: none; }
  .hs-eds-rola .hs-ed { scroll-snap-align: end; }

  /* A borda esmaecida é o convite: ela diz que há coluna ali fora sem gastar
     uma palavra. Só aparece do lado que tem mesmo o que mostrar. */
  .hs-eds-rola.tem-esq .hs-item-eds {
    mask-image: linear-gradient(to right, transparent 0, #000 22px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
  }
  .hs-eds-rola.tem-dir.tem-esq .hs-item-eds {
    mask-image: linear-gradient(to right, transparent 0, #000 22px,
                #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px,
                #000 calc(100% - 22px), transparent 100%);
  }
  .hs-eds-rola.tem-dir:not(.tem-esq) .hs-item-eds {
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LINHAS DE RESULTADO

   Sem borda, sem sombra, sem cartão: um fio de 1 px entre elas. O relevo
   aparece só no hover, como tinta de fundo.
   ───────────────────────────────────────────────────────────────────────── */

.hs-lista { display: flex; flex-direction: column; }

.hs-item {
  display: grid;
  width: 100%;
  padding: .8rem 1.1rem;
  border: 0; border-top: 1px solid var(--linha);
  background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  transition: background-color .12s ease;
}
@media (min-width: 680px) { .hs-item { padding-inline: 1.4rem; } }
.hs-item:first-child { border-top: 0; }

/* Zebra discretíssima. Com três ou quatro colunas de número, o olho precisa
   de um trilho para atravessar a linha sem pular de fileira — e o tom é
   fraco o bastante para não virar listra. */
.hs-item:nth-child(even) { background: #fafcfe; }
.hs-item:hover { background: var(--surface-2); }
.hs-item:active { background: var(--surface-3); }

/* ── trilho de situação ────────────────────────────────────────────────────
   Um fio de 3 px na borda esquerda, colorido pelo resultado da edição
   escolhida. É para quem não vai parar para ler "+9,4" e descobrir que verde
   quer dizer que passou: descendo a lista, o rail responde "aqui sim, aqui
   quase, aqui não" antes de qualquer número. Só existe com as notas
   preenchidas — sem elas não há situação nenhuma a mostrar.
   ───────────────────────────────────────────────────────────────────────── */
.hs-item.st-passa   { box-shadow: inset 3px 0 0 var(--ok); }
.hs-item.st-perto   { box-shadow: inset 3px 0 0 var(--ambar); }
.hs-item.st-abaixo  { box-shadow: inset 3px 0 0 #e4b4b4; }
.hs-item.st-travado { box-shadow: inset 3px 0 0 var(--ink-4); }

/* Celular: a identidade ocupa a largura toda e as edições viram uma faixa
   logo abaixo, em colunas iguais — continua sendo tabela, só que empilhada. */
@media (max-width: 879px) {
  .hs-item {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
  .hs-item-eds { padding-top: .1rem; border-top: 1px solid var(--linha); }
  .hs-ed { padding-top: .3rem; }
}

.hs-item-ident { min-width: 0; }

.hs-item-curso {
  font-size: .95rem; font-weight: 650; line-height: 1.3;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-item-ies {
  margin-top: .1rem;
  font-size: .84rem; font-weight: 600; color: var(--ink-2);
}
.hs-item-ies em { font-style: normal; font-weight: 400; color: var(--ink-3); }

/* Metadado em texto corrido com ponto médio — era uma fileira de pílulas. */
.hs-item-meta {
  margin-top: .12rem;
  font-size: .78rem; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-item-meta b { font-weight: 600; color: var(--ink-3); }

/* Nota de rodapé: por que a linha entrou no resultado, quando o termo
   buscado não está no nome do curso. */
.hs-item-motivo {
  margin-top: .12rem;
  font-size: .74rem; color: var(--ink-4); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Cores de diferença, compartilhadas pelas colunas de edição e pelo painel. */
.hs-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-delta-ok { color: var(--ok); }
.hs-delta-perto { color: var(--ambar); }
.hs-delta-erro { color: var(--erro); }

/* ── vazio e paginação ─────────────────────────────────────────────────── */

.hs-vazio {
  display: grid; place-items: center; gap: .5rem;
  padding: 3.5rem 1.5rem; text-align: center;
  color: var(--ink-3); font-size: .9rem;
}
.hs-vazio .hs-i { width: 2rem; height: 2rem; color: var(--linha-forte); }
/* A faixa entra depois da orientação, com folga: ela é a saída oferecida,
   não o recado principal da tela. */
.hs-vazio #adsVazio { width: 100%; margin-top: 1.4rem; }

.hs-mais {
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--linha);
  background: var(--surface-2);
}
.hs-mais button {
  width: 100%; padding: .55rem;
  border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: .85rem; font-weight: 650; color: var(--marca-escura);
  cursor: pointer;
}
.hs-mais button:hover { background: var(--marca-clara); }

/* ─────────────────────────────────────────────────────────────────────────
   AVISOS
   ───────────────────────────────────────────────────────────────────────── */

.hs-aviso {
  display: flex; gap: .6rem;
  padding: .7rem .85rem;
  border-radius: var(--r-ctrl);
  background: var(--ambar-claro);
  border: 1px solid #fde68a;
  color: #78350f;
  font-size: .82rem; line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────
   FAIXA DA EDIÇÃO PARCIAL

   Durante as inscrições a nota de corte muda todo dia, e quem lê um número
   desses sem saber disso toma a decisão errada. A faixa vem antes da lista
   porque muda a leitura de tudo o que vem depois.

   Tom teal, e não o âmbar dos avisos: o âmbar já é do aviso de meio de ano, e
   duas caixas idênticas dizendo coisas diferentes é o jeito mais fácil de
   ninguém ler nenhuma das duas. Aqui o teal diz "está acontecendo agora", que
   é a mesma coisa que o ponto pulsando diz sem palavra.
   ───────────────────────────────────────────────────────────────────────── */

.hs-parcial {
  display: flex; gap: .65rem; align-items: flex-start;
  margin-top: .85rem;
  padding: .75rem .9rem;
  border-radius: var(--r-ctrl);
  background: var(--teal-claro);
  border: 1px solid #99f6e4;
  color: #134e4a;
}
.hs-parcial > div { min-width: 0; }

.hs-parcial-pulso {
  flex: none; width: 9px; height: 9px; margin-top: .45rem;
  border-radius: 50%;
  background: var(--linha-forte);
}
.hs-parcial.vivo .hs-parcial-pulso {
  background: var(--teal);
  animation: hs-vivo-pulso 2.4s ease-out infinite;
}
@keyframes hs-vivo-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(15, 118, 110, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(15, 118, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
}

.hs-parcial-tit { font-size: .86rem; line-height: 1.45; }
.hs-parcial-tit b { font-weight: 700; }
.hs-parcial-txt {
  margin-top: .22rem;
  font-size: .82rem; line-height: 1.55; color: #115e59;
}

/* No celular esta caixa disputa a tela com a lista, que é o que o aluno veio
   ver. Fica um pouco mais justa — sem perder nenhuma palavra. */
@media (max-width: 560px) {
  .hs-parcial { padding: .6rem .7rem; gap: .5rem; }
  .hs-parcial-tit { font-size: .82rem; line-height: 1.4; }
  .hs-parcial-txt { font-size: .78rem; line-height: 1.48; }
}

/* "ao vivo" é etiqueta, não frase: minúscula não cabe no peso que ela tem. */
.hs-vivo-selo {
  display: inline-block; margin-right: .42rem;
  padding: .08rem .36rem;
  border-radius: var(--r-pill);
  background: var(--teal); color: #fff;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  vertical-align: .1em;
}

/* Na capa, a única frase do site que muda durante as inscrições. */
.hs-sub-vivo { color: var(--teal); }
.hs-aviso .hs-i { margin-top: .15rem; color: var(--ambar); }
.hs-aviso-neutro {
  background: var(--surface-2); border-color: var(--linha); color: var(--ink-2);
}
.hs-aviso-neutro .hs-i { color: var(--ink-3); }

/* ─────────────────────────────────────────────────────────────────────────
   GAVETA DE DETALHE
   ───────────────────────────────────────────────────────────────────────── */

.hs-fundo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 23, 42, .4);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.hs-fundo.hs-aberto { opacity: 1; pointer-events: auto; }

.hs-gaveta {
  position: fixed; z-index: 51; inset: auto 0 0 0;
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--sombra-3);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.hs-gaveta.hs-aberto { transform: translateY(0); }
@media (min-width: 880px) {
  .hs-gaveta {
    inset: 0 0 0 auto; width: min(540px, 100%);
    max-height: none; border-radius: 0;
    transform: translateX(100%);
  }
  .hs-gaveta.hs-aberto { transform: translateX(0); }
}

.hs-gaveta-topo {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1.1rem 1.25rem .9rem;
  border-bottom: 1px solid var(--linha);
}
.hs-gaveta-topo h2 { font-size: 1.15rem; letter-spacing: -.028em; }
.hs-gaveta-ies { margin-top: .2rem; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.hs-gaveta-loc { margin-top: .1rem; font-size: .78rem; color: var(--ink-4); }

.hs-fechar {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--surface); color: var(--ink-3); cursor: pointer;
}
.hs-fechar:hover { background: var(--surface-2); color: var(--ink); }

.hs-gaveta-corpo { overflow-y: auto; padding: 0 1.25rem 1.5rem; }

.hs-bloco { padding-top: 1.3rem; }
.hs-bloco > .hs-micro { margin-bottom: .6rem; }

/* ── cabeçalho de situação: a conta, em tamanho grande ─────────────────── */

.hs-situacao {
  padding: .95rem 1rem;
  border-radius: 13px;
  background: var(--surface-2);
  border: 1px solid var(--linha);
}
.hs-situacao.ok    { background: var(--ok-claro);   border-color: var(--ok-borda); }
.hs-situacao.ruim  { background: var(--erro-claro); border-color: var(--erro-borda); }
.hs-situacao.limite{ background: var(--ambar-claro); border-color: #fde68a; }

/* A resposta em palavras vem antes do número, e em tamanho de frase: quem
   abre este painel quer saber se passa, não conferir uma conta. */
.hs-situacao-tit {
  margin-bottom: .5rem;
  font-size: 1.02rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -.015em; color: var(--ink);
}

.hs-situacao-linha { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.hs-situacao-num {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hs-situacao-vs { font-size: .86rem; color: var(--ink-2); }
.hs-situacao-vs b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-situacao-nota { margin-top: .45rem; font-size: .8rem; color: var(--ink-2); line-height: 1.5; }

/* ── pesos: barras em vez de tabela ────────────────────────────────────── */

/* Era uma tabela de 5×4 para mostrar sobretudo "1,0" e "—". Vira uma lista
   de barras: o peso relativo se lê de relance, sem comparar números. */
.hs-pesos { display: grid; gap: .5rem; }
.hs-peso {
  display: grid;
  grid-template-columns: 8.2rem minmax(0, 1fr) auto;
  align-items: center; gap: .7rem;
  font-size: .82rem;
}
.hs-peso-area { color: var(--ink-2); font-weight: 600; }
.hs-peso-trilha {
  position: relative; height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.hs-peso-barra {
  position: absolute; inset: 0 auto 0 0;
  border-radius: var(--r-pill);
  background: var(--marca);
  opacity: .75;
}
/* Sem as barras (pesos todos iguais) a linha vira duas colunas. */
.hs-peso.simples { grid-template-columns: minmax(0, 1fr) auto; }

.hs-peso-val {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
  font-size: .76rem; font-weight: 600;
}
.hs-peso-min { font-size: .72rem; color: var(--ink-4); }
.hs-peso.falha .hs-peso-area, .hs-peso.falha .hs-peso-min { color: var(--erro); font-weight: 700; }
.hs-peso.falha .hs-peso-barra { background: var(--erro); }

.hs-rodape-bloco { margin-top: .55rem; font-size: .76rem; color: var(--ink-4); line-height: 1.5; }

/* ── tabelas do detalhe ────────────────────────────────────────────────── */

.hs-tabela { width: 100%; border-collapse: collapse; font-size: .83rem; }
.hs-tabela th {
  text-align: right; padding: 0 .35rem .4rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .085em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}
.hs-tabela th:first-child, .hs-tabela td:first-child { text-align: left; padding-left: 0; }
.hs-tabela th:last-child, .hs-tabela td:last-child { padding-right: 0; }
.hs-tabela td {
  text-align: right; padding: .4rem .35rem;
  border-top: 1px solid var(--linha);
  font-variant-numeric: tabular-nums;
}
.hs-tabela .nome { font-weight: 600; color: var(--ink); text-align: left; }
.hs-tabela .fraco { color: var(--ink-4); }

/* ── comparação entre as provas do aluno ──────────────────────────────────
   A linha vencedora é marcada no fundo e com a palavra "usada", não só pela
   cor: é a informação principal da tabela, e ela precisa sobreviver a uma
   impressão em preto e branco e a quem não distingue verde de vermelho.
   ───────────────────────────────────────────────────────────────────────── */
.hs-tr-melhor td { background: var(--marca-clara); }
.hs-tr-melhor td:first-child { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.hs-tr-melhor td:last-child { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }

.hs-selo-melhor {
  margin-left: .4rem; padding: .06rem .34rem;
  border-radius: 999px;
  background: var(--marca); color: #fff;
  font-size: .6rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  vertical-align: 1px;
}

/* Ano da prova dentro da célula de média, no histórico. */
.hs-td-enem {
  display: block;
  font-size: .62rem; font-weight: 600; color: var(--ink-4);
  font-variant-numeric: normal;
}

/* ── gráfico de histórico ──────────────────────────────────────────────── */

.hs-grafico { width: 100%; height: 180px; display: block; }
.hs-grafico .eixo { stroke: var(--linha); stroke-width: 1; }
.hs-grafico .rotulo { font-size: 10px; fill: var(--ink-4); }
.hs-grafico .serie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs-grafico .ponto { stroke: #fff; stroke-width: 1.5; }
/* `fill: none` NÃO é decoração aqui. O preenchimento padrão de um <path> em
   SVG é preto, e um traço que sobe e desce fecha uma área — que o navegador
   pinta. Enquanto a linha "você" era horizontal, a área era zero e ninguém
   via; quando ela passou a acompanhar a mudança de pesos entre as edições,
   virou um borrão preto por cima do gráfico. E só nos cursos que mudaram de
   peso, que são exatamente os que o recurso existe para mostrar. */
.hs-grafico .minha {
  fill: none;
  stroke: var(--serie-eu); stroke-width: 1.75; stroke-dasharray: 4 3;
}

/* Trecho que chega numa nota que ainda vai mudar. Pontilhado é o idioma de
   "provisório" e dispensa legenda — o olho já sabe que ali não fechou. */
.hs-grafico .hs-serie-prov { stroke-dasharray: 3 3.5; opacity: .75; }

/* Onde a edição anterior fechou: a única referência que não se move enquanto
   as inscrições correm. Cinza e fina, porque é régua e não série. */
.hs-grafico .hs-ref-linha {
  stroke: var(--linha-forte); stroke-width: 1.25; stroke-dasharray: 6 4;
}

.hs-legenda { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .5rem; }
.hs-legenda span { display: inline-flex; align-items: center; gap: .32rem;
  font-size: .76rem; font-weight: 600; color: var(--ink-2); }
.hs-legenda i { width: 9px; height: 9px; border-radius: 2.5px; flex: none; }

/* ── modalidades ───────────────────────────────────────────────────────── */

.hs-mod { padding: .65rem 0; border-top: 1px solid var(--linha); }
.hs-mod:first-of-type { border-top: 0; }
.hs-mod.destaque {
  margin-inline: -.6rem; padding-inline: .6rem;
  background: var(--marca-clara);
  border-radius: 9px; border-top-color: transparent;
}
.hs-mod-linha { display: flex; align-items: baseline; gap: .6rem; }
.hs-mod-nome { flex: 1; min-width: 0; font-size: .85rem; font-weight: 650; color: var(--ink); }
.hs-mod-nota { font-size: .98rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-mod-sub { margin-top: .15rem; font-size: .76rem; color: var(--ink-4); }
.hs-mod-sub .ok { color: var(--ok); font-weight: 700; }
.hs-mod-sub .ruim { color: var(--erro); font-weight: 700; }
.hs-mod-legal { margin-top: .3rem; font-size: .76rem; color: var(--ink-3); line-height: 1.5; }
.hs-mod-legal summary {
  cursor: pointer; list-style: none;
  font-size: .72rem; font-weight: 600; color: var(--ink-4);
}
.hs-mod-legal summary::-webkit-details-marker { display: none; }
.hs-mod-legal summary::before { content: '▸ '; }
.hs-mod-legal[open] summary::before { content: '▾ '; }
.hs-mod-legal p { margin-top: .25rem; }

/* ─────────────────────────────────────────────────────────────────────────
   ABERTURA
   ───────────────────────────────────────────────────────────────────────── */

.hs-abertura {
  display: grid; place-items: center; align-content: center; gap: .9rem;
  min-height: 62vh; text-align: center;
  color: var(--ink-3); font-size: .85rem;
}
.hs-abertura .hs-marca { width: 42px; height: 42px; border-radius: 12px; }
.hs-barra-prog {
  width: min(260px, 70vw); height: 4px;
  border-radius: var(--r-pill); background: var(--linha); overflow: hidden;
}
.hs-barra-prog > i {
  display: block; height: 100%; width: 0%;
  border-radius: inherit; background: var(--marca);
  transition: width .25s ease;
}

/* ─────────────────────────────────────────────────────────────────────────
   FAIXAS DE DIVULGAÇÃO

   Moram nas dobras entre blocos — fim da primeira página, fim da lista,
   dentro da gaveta, tela vazia — e nunca entre duas linhas de resultado.

   A forma é deliberadamente o OPOSTO do resto da página. O site inteiro é
   claro: canvas azul-claro, folha branca, tinta escura. A faixa é escura, com
   texto branco. Essa inversão é o que faz o olho parar — antes ela era um
   retângulo pálido sobre fundo pálido e simplesmente sumia na leitura.

   O contraste é a parte que trabalha; o movimento é o acabamento. Há um só
   brilho que atravessa a faixa a cada 5,5 s, um anel que sai do botão e uma
   seta que empurra. Nada pisca, nada troca de cor, nada repete rápido —
   ninguém confia num site que parece banner, e confiança aqui é o produto.
   Tudo isso morre sozinho com `prefers-reduced-motion`.

   Sem imagem, de propósito: as capas pesam e a faixa precisa ser leve o
   bastante para caber no meio da leitura sem atropelá-la. A imagem fica para
   o modal, que é onde ela convence.
   ───────────────────────────────────────────────────────────────────────── */

.hs-ads-vaga { padding: 0 1.1rem 1.1rem; }
@media (min-width: 680px) { .hs-ads-vaga { padding-inline: 1.4rem; } }

/* O espaço do topo mora fora da folha branca, entre a barra de filtros e a
   lista — e não existe na tela de entrada, onde a página ainda é só o pedido
   das notas. */
.hs-ads-topo { margin-bottom: .9rem; }
.hs-inicio .hs-ads-topo { display: none; }

/* Variante fina: uma linha, selo e título lado a lado, sem corpo de texto.
   Fica acima de tudo o que o visitante veio ver, então o tamanho dela é uma
   decisão de produto, não de estética. */
.hs-ads-fino { padding: .6rem .85rem; gap: .5rem .9rem; }
.hs-ads-fino .hs-ads-txt {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .15rem .6rem;
}
.hs-ads-fino .hs-ads-selo { margin: 0; }
.hs-ads-fino .hs-ads-tit { margin: 0; font-size: .94rem; }
.hs-ads-fino .hs-ads-btn { padding: .48rem .9rem; font-size: .81rem; }

@media (max-width: 560px) {
  /* No celular ela empilha como as outras, mas sem corpo continua curta. */
  .hs-ads-fino { padding: .7rem .85rem; }
  .hs-ads-fino .hs-ads-tit { font-size: .92rem; }
}

.hs-ads {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.25rem; flex-wrap: wrap;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ads-borda);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ads-fundo-1), var(--ads-fundo-2));
  color: #fff;
  box-shadow: var(--sombra-2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hs-ads:hover { transform: translateY(-2px); box-shadow: var(--sombra-3); }

/* O brilho que atravessa. Fica no ::after para não entrar no fluxo flex, e é
   clipado pelo overflow da faixa. Uma passada rápida a cada 5,5 s: o olho
   pega, a leitura não é interrompida. */
.hs-ads::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .18), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hs-ads.vista::after { animation: hs-ads-brilho 5.5s ease-in-out 1.2s infinite; }
}
@keyframes hs-ads-brilho {
  0%   { left: -60%; }
  26%  { left: 118%; }
  100% { left: 118%; }
}

/* Entrada quando a faixa chega à tela (.vista vem do IntersectionObserver em
   app.js). É `animation`, não `transition` a partir de opacity:0, por um
   motivo prático: assim a faixa nasce VISÍVEL e a animação é só enfeite. Se o
   observador não disparar — navegador velho, aba em segundo plano, qualquer
   coisa — o pior que acontece é não animar. A versão anterior falhava para o
   outro lado: sem o observador, o anúncio ficava invisível. */
@media (prefers-reduced-motion: no-preference) {
  .hs-ads.vista { animation: hs-ads-entra .55s cubic-bezier(.22, 1, .36, 1) both; }
}
@keyframes hs-ads-entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* O ::after fica acima do fundo mas abaixo do texto. */
.hs-ads-txt, .hs-ads-btn { position: relative; z-index: 1; }
.hs-ads-txt { min-width: 0; flex: 1 1 15rem; }

/* Selo em pílula, não em texto colorido: sobre fundo escuro a cor sozinha
   some, e a pílula devolve a hierarquia que a cor dava. */
.hs-ads-selo {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .16rem .5rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  font-size: .63rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff;
}

/* Só o Radar leva o ponto que pisca: ele é um grupo que avisa em tempo real,
   e o sinal diz isso sem uma palavra. Nas outras seria enfeite. */
.hs-ads-pulso {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 var(--ads-halo);
  animation: hs-pulso 2.4s ease-out infinite;
}
@keyframes hs-pulso {
  0%   { box-shadow: 0 0 0 0 var(--ads-halo); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.hs-ads-tit {
  margin-top: .38rem;
  font-size: 1.02rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -.015em; color: #fff;
}
/* 90% e não 84%: sobre o teal, que é o mais claro dos três fundos, 84%
   caía para 4,37:1 — abaixo do mínimo de 4,5:1 do WCAG AA. Transparência
   de texto é uma dessas coisas que parecem só estética até alguém medir. */
.hs-ads-corpo {
  margin-top: .26rem;
  font-size: .83rem; line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}

/* Botão branco sobre faixa escura: é o ponto de maior contraste da página
   inteira, e é de propósito — é a única coisa ali que se pede que o aluno
   clique. */
.hs-ads-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .66rem 1.1rem;
  border-radius: var(--r-ctrl);
  background: #fff; color: var(--ads-tinta);
  font-size: .86rem; font-weight: 800; text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hs-ads-btn:hover {
  color: var(--ads-tinta);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .34);
}
.hs-ads-btn::after {
  content: '→';
  margin-left: .42rem;
  display: inline-block;
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  /* Anel saindo do botão, com pausa longa: chama sem virar pisca-pisca.
     Anima só a sombra — o transform fica reservado ao hover, senão um
     sobrescreve o outro. */
  .hs-ads.vista .hs-ads-btn { animation: hs-ads-cta 3.4s ease-out .9s infinite; }
  .hs-ads.vista .hs-ads-btn:hover { animation: none; }
  .hs-ads.vista .hs-ads-btn::after { animation: hs-ads-seta 3.4s ease-in-out .9s infinite; }
}
@keyframes hs-ads-cta {
  0%, 68%, 100% { box-shadow: 0 2px 10px rgba(15, 23, 42, .28), 0 0 0 0 rgba(255, 255, 255, .55); }
  84%           { box-shadow: 0 2px 10px rgba(15, 23, 42, .28), 0 0 0 8px rgba(255, 255, 255, 0); }
}
@keyframes hs-ads-seta {
  0%, 68%, 100% { transform: none; }
  80%           { transform: translateX(4px); }
}

/* Empilhado — pela variante alta (tela vazia) ou por falta de largura.

   Os dois precisam desfazer o que a linha monta: `space-between` vira folga
   vertical quando a direção é coluna, e o `flex-basis: 15rem` do texto, que
   em linha é largura mínima, vira ALTURA mínima e abre um vão de 15rem entre
   o texto e o botão. */
.hs-ads-alto,
.hs-ads-empilha {
  flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: .85rem;
}
.hs-ads-alto .hs-ads-txt,
.hs-ads-empilha .hs-ads-txt { flex: 0 1 auto; }
.hs-ads-alto .hs-ads-btn,
.hs-ads-empilha .hs-ads-btn { text-align: center; }

.hs-ads-alto {
  text-align: center;
  max-width: 30rem; margin-inline: auto;
}
.hs-ads-alto .hs-ads-selo { justify-content: center; }

@media (max-width: 560px) {
  .hs-ads {
    flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: .85rem;
  }
  .hs-ads .hs-ads-txt { flex: 0 1 auto; }
  .hs-ads-btn { text-align: center; }
}

/* Dentro da gaveta a faixa não tem a folha branca em volta, então ganha um
   respiro próprio. */
.hs-gaveta-corpo > .hs-ads { margin: 1.1rem 0 .2rem; }

/* ── as três paletas ──────────────────────────────────────────────────────
   Uma cor por produto, sempre a mesma: o aluno que vir a faixa teal duas
   vezes sabe que é o mesmo Radar, sem ler. Tiradas dos tokens da marca, não
   inventadas aqui. */
/* `--ads-tinta` é a tinta do texto do botão, que agora é branco; por isso ela
   é a versão ESCURA de cada cor, escolhida para passar de 6:1 sobre branco.
   O par `--ads-fundo-1/2` é o gradiente da faixa. */
.hs-ads-teal {
  --ads-tinta: #115e59;
  --ads-fundo-1: #0f766e; --ads-fundo-2: #134e4a;
  --ads-borda: rgba(45, 212, 191, .4); --ads-halo: rgba(153, 246, 228, .7);
}
.hs-ads-azul {
  --ads-tinta: #1d4ed8;
  --ads-fundo-1: #1d4ed8; --ads-fundo-2: #172554;
  --ads-borda: rgba(96, 165, 250, .4); --ads-halo: rgba(191, 219, 254, .7);
}
.hs-ads-indigo {
  --ads-tinta: #4338ca;
  --ads-fundo-1: #4f46e5; --ads-fundo-2: #312e81;
  --ads-borda: rgba(129, 140, 248, .4); --ads-halo: rgba(199, 210, 254, .7);
}

/* ─────────────────────────────────────────────────────────────────────────
   BARRA LEGAL

   A mesma das outras páginas do Ensino de Potência: faixa escura, texto de
   11 px, centrado, com a política de privacidade. É o fecho da página, e o
   escuro aqui é o que encerra a leitura — abaixo dela não há mais nada.
   ───────────────────────────────────────────────────────────────────────── */

/* `margin-top: auto` é o que empurra a barra para o pé da janela quando sobra
   espaço, e some sozinho quando não sobra. O respiro de 2 rem antes dela saiu
   daqui e virou padding de #app: um `margin-top` fixo brigaria com o `auto`,
   e quem precisa do respiro é o conteúdo, não a barra. */
.hs-legal {
  flex: none;
  margin-top: auto;
  padding: .8rem 1rem;
  background: #0f172a;
  text-align: center;
}
#abertura, #app { flex: none; }
#app { padding-bottom: 2rem; }
.hs-legal p {
  font-size: .69rem; line-height: 1.6;
  color: #94a3b8;
}
.hs-legal a {
  color: #cbd5e1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hs-legal a:hover { text-decoration: none; color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────
   CONVITE DE SAÍDA

   Um convite, uma vez por visita. A régua aqui é não estragar a ferramenta:
   o X é grande e visível, o fundo fecha ao clique, o Esc fecha, e há uma
   saída em texto que diz em português o que ela faz. Nada de contagem
   regressiva, nada de "tem certeza que quer perder isso".
   ───────────────────────────────────────────────────────────────────────── */

.hs-guias {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 1rem;
}

.hs-guias-fundo {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
  opacity: 0; transition: opacity .2s ease;
}
.hs-guias.hs-aberto .hs-guias-fundo { opacity: 1; }

.hs-guias-cartao {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto; overscroll-behavior: contain;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--sombra-3);
  transform: translateY(14px) scale(.98);
  opacity: 0;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}
.hs-guias.hs-aberto .hs-guias-cartao { transform: none; opacity: 1; }

.hs-guias-x {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: rgba(15, 23, 42, .5);
  color: #fff; cursor: pointer;
  transition: background-color .15s ease;
}
.hs-guias-x:hover { background: rgba(15, 23, 42, .78); }
.hs-guias-x .hs-i { width: 1.15rem; height: 1.15rem; stroke-width: 2.25; }

.hs-guias-capa {
  display: block; width: 100%; height: auto;
  border-radius: 20px 20px 0 0;
  background: var(--surface-3);
}

.hs-guias-texto { padding: 1.1rem 1.25rem 1.25rem; text-align: center; }

.hs-guias-titulo {
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.25; color: var(--ink);
}
/* O título fica centrado, o corpo não: quatro linhas centralizadas deixam a
   margem esquerda serrilhada e custam leitura justamente onde está o
   argumento. */
.hs-guias-corpo {
  margin-top: .5rem; text-align: left;
  font-size: .86rem; line-height: 1.6; color: var(--ink-2);
}
.hs-guias-corpo b { font-weight: 700; color: var(--ink); }

/* O botão herda a cor do produto da vez: o modal recebe a mesma classe de
   paleta que as faixas (.hs-ads-teal, …), então a troca é automática. */
.hs-guias-btn {
  display: block; margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--r-ctrl);
  background: var(--ads-tinta, var(--marca)); color: #fff;
  font-size: .92rem; font-weight: 700; text-decoration: none;
  box-shadow: var(--sombra-2);
  transition: filter .15s ease;
}
.hs-guias-btn:hover { filter: brightness(1.08); color: #fff; }

#guiasDepois {
  margin-top: .7rem;
  font-size: .78rem; color: var(--ink-4); text-decoration: none;
}
#guiasDepois:hover { color: var(--ink-3); text-decoration: underline; }

@media (max-width: 420px) {
  .hs-guias { padding: .6rem; }
  .hs-guias-texto { padding: 1rem 1rem 1.1rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   RODAPÉ
   ───────────────────────────────────────────────────────────────────────── */

.hs-rodape {
  margin-top: 2rem; padding: 1.4rem 0 3rem;
  border-top: 1px solid var(--linha-forte);
  font-size: .78rem; color: var(--ink-3); line-height: 1.65;
}
.hs-rodape b { color: var(--ink-2); }
.hs-rodape p + p { margin-top: .55rem; }

/* ── autoria ───────────────────────────────────────────────────────────────
   Um cartão branco sobre o canvas, no fim de tudo. Sem o fio de gradiente da
   capa de propósito: aquele recurso marca a entrada, e repeti-lo aqui o
   gastaria. A profundidade vem da sombra, como manda a regra 5.
   ───────────────────────────────────────────────────────────────────────── */

.hs-autor {
  display: flex; align-items: flex-start; gap: 1.1rem;
  margin-top: 1.6rem; padding: 1.2rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 16px;
  box-shadow: var(--sombra-1);
}
.hs-autor-nome { font-size: .95rem; font-weight: 700; color: var(--ink); }
.hs-autor-casa {
  margin-top: .05rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-4);
}
.hs-rodape .hs-autor-fala { margin-top: .6rem; color: var(--ink-3); }
.hs-autor-fala em { font-style: italic; color: var(--ink-2); }

.hs-rodape .hs-autor-links {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  margin-top: .7rem;
}
.hs-autor-links a {
  font-size: .76rem; font-weight: 600;
  color: var(--marca-escura); text-decoration: none;
}
.hs-autor-links a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .hs-autor { flex-direction: column; align-items: center; text-align: center; }
  .hs-rodape .hs-autor-links { justify-content: center; }
  /* Nome e casa centralizados ficam bem; cinco linhas de texto centralizadas,
     não — a margem esquerda irregular atrapalha a leitura. */
  .hs-rodape .hs-autor-fala { text-align: left; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOVIMENTO E IMPRESSÃO
   ───────────────────────────────────────────────────────────────────────── */

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

@media print {
  body { background: #fff; }
  .hs-topo, .hs-barra, .hs-enem, .hs-busca, .hs-fundo, .hs-gaveta, .hs-mais { display: none !important; }
  .hs-folha { border: 0; box-shadow: none; }
  .hs-item { break-inside: avoid; }
}