/* MINIATURAS DO PRODUTO NA HOME NOVA (`templates/landing_home_nova.html`).

   As telas do app desenhadas em HTML dentro de uma moldura de celular, no
   lugar dos prints. REGRA DESTA FOLHA: copiar o que o aluno VE no produto,
   nao inventar tela. As referencias sao o feed real
   (`templates/core/feed.html`, `_feed_cards.html`, `_sessao_fim_card.html`,
   `_treinar_card_conteudo.html`) e os prints em
   `static/img/prints-demonstracao/`. Cores e proporcoes vem de la; os
   tamanhos estao reduzidos na mesma escala (~0,74) porque a moldura tem
   290px e o celular de referencia, ~390px.

   O mostrador e o icone de "nas provas" do card "Seu edital" sao os
   componentes reais (includes da V3), estilizados por `filtro_topico_v3.css`.

   Tudo comeca em `.hn-` (home nova). */

.hn-celular {
  --hn-azul: #2f5cec;          /* o azul de acao do feed (`--fxm-purple`) */
  --hn-azul-texto: #3557d6;
  --hn-tinta: #14141f;
  --hn-tinta-2: #3a3f4c;
  --hn-tinta-3: #8a8f9b;
  --hn-linha: #e3e5ea;
  --hn-papel: #ffffff;
  --hn-cinza-bloco: #f3f4f7;
  --hn-verde: #1a7a4c;
  --hn-rosa: #d8b4b4;

  position: relative;
  width: 100%;
  max-width: 290px;
  margin-inline: auto;
  padding: 9px;
  border-radius: 34px;
  background: #0b1528;
  box-shadow: 0 28px 60px -22px rgba(6, 12, 27, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  text-align: left;
}
.hn-celular--pequeno { max-width: 250px; }
.hn-tela {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  height: 540px;
  border-radius: 26px;
  background: var(--hn-papel);
  color: var(--hn-tinta);
}
.hn-celular--pequeno .hn-tela { height: 470px; }
.hn-celular--pequeno .hn-tela { font-size: 92%; }

/* ---------- CABECALHO DO APP (`.fd__topo` + trilho) ---------- */
.hn-topo { flex: none; padding: 14px 12px 0 12px; background: #fff; }
.hn-topo-linha { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.hn-topo-voltar { flex: none; width: 12px; height: 12px; color: var(--hn-tinta-2); }
.hn-topo-rotulo {
  flex: 1; min-width: 0;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hn-tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hn-topo-icones { flex: none; display: flex; align-items: center; gap: 11px; color: var(--hn-tinta-2); }
.hn-topo-icones svg { display: block; width: 14px; height: 14px; }
.hn-topo-tarefas { position: relative; }
.hn-topo-tarefas b {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%;
  background: #e0283c; color: #fff; font-size: 7px; font-weight: 800;
}
.hn-trilho { display: flex; gap: 3px; margin-top: 8px; }
.hn-trilho i { flex: 1; height: 2.5px; border-radius: 2px; background: #e3e5ea; }
.hn-trilho i.hn-feito { background: #c5cad4; }
.hn-trilho i.hn-agora { background: var(--hn-tinta-2); }

.hn-corpo { flex: 1; min-height: 0; overflow: hidden; padding: 12px 12px 0; }

/* ---------- PILULA DA SOPHIA + CANETA (rodape do feed) ---------- */
.hn-rodape {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 4;
  display: flex; justify-content: center; align-items: center; gap: 7px;
}
.hn-pilula {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 4px; border-radius: 999px;
  background: #fff; border: 1px solid var(--hn-linha);
  box-shadow: 0 4px 12px -6px rgba(20, 20, 31, .35);
  font-size: 10.5px; font-weight: 800; color: var(--hn-tinta);
}
.hn-pilula img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.hn-lapis {
  display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%;
  background: #fff; border: 1px solid var(--hn-linha);
  box-shadow: 0 4px 12px -6px rgba(20, 20, 31, .35);
  color: var(--hn-tinta-2);
}
.hn-lapis svg { width: 12px; height: 12px; }

/* ---------- ABERTURA DA SESSAO (card zero) ---------- */
.hn-materia { margin-bottom: 7px; padding: 8px 10px; border-radius: 10px; background: var(--hn-cinza-bloco); }
.hn-materia-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.hn-materia-cabeca h4 { margin: 0; font-size: 11.5px; font-weight: 800; color: var(--hn-tinta); }
.hn-materia-cabeca span { flex: none; font-size: 9px; font-weight: 600; color: var(--hn-tinta-3); }
.hn-materia ul { margin: 4px 0 0; padding: 0 0 0 12px; font-size: 10px; line-height: 1.5; color: var(--hn-tinta-2); }
.hn-cena { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; }
.hn-balao-sessao {
  position: relative; z-index: 2;
  margin: 4px 0 0; padding: 9px 11px;
  border-radius: 14px; background: #fff;
  box-shadow: 0 8px 22px -10px rgba(20, 20, 31, .35), 0 0 0 1px rgba(20, 20, 31, .05);
}
.hn-balao-sessao::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg);
  box-shadow: 3px 3px 4px -2px rgba(20, 20, 31, .12);
}
.hn-balao-nome { display: block; margin-bottom: 2px; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hn-azul-texto); }
.hn-balao-sessao p { margin: 0; font-size: 11.5px; line-height: 1.42; color: var(--hn-tinta); }
.hn-balao-cta { display: flex; gap: 5px; margin-top: 6px; font-size: 10px; font-weight: 700; line-height: 1.35; color: var(--hn-azul-texto); }
.hn-sophia-corpo { display: block; width: 78%; max-width: 200px; height: auto; margin-top: 6px; }

/* ---------- QUESTAO DE PROVA ---------- */
.hn-tipo { margin: 0 0 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hn-azul-texto); }
.hn-tipo span { font-size: 8.5px; font-weight: 500; letter-spacing: .01em; text-transform: none; color: var(--hn-tinta-3); }
.hn-enunciado { margin: 0 0 9px; font-size: 12.5px; line-height: 1.45; color: var(--hn-tinta); }
.hn-opcao {
  position: relative;
  margin-bottom: 7px; padding: 8px 24px 8px 10px;
  border: 1.2px solid var(--hn-linha); border-radius: 10px; background: #fff;
  font-size: 10.5px; line-height: 1.45; color: var(--hn-tinta);
}
.hn-opcao b { font-weight: 700; }
.hn-opcao-x { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; color: var(--hn-tinta-3); }
.hn-opcao--marcada { border-color: var(--hn-azul); box-shadow: 0 0 0 1px var(--hn-azul); }
.hn-opcao--apagada { color: #a9adb7; }
.hn-corte { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Explicacao em carrossel, como `.fd__alt-carousel`: filete a esquerda
   (verde na correta, rosado na errada), titulo em caixa alta e a navegacao
   de paineis com pontos e "1/4". */
.hn-explica {
  margin: -2px 0 9px; padding: 7px 9px 6px;
  border: 1px solid var(--hn-linha); border-left: 3px solid var(--hn-rosa); border-radius: 8px;
  background: #fff;
}
.hn-explica--correta { border-left-color: var(--hn-verde); }
.hn-explica-titulo { display: block; margin-bottom: 2px; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7c4a4a; }
.hn-explica--correta .hn-explica-titulo { color: var(--hn-verde); }
.hn-explica p { margin: 0; font-size: 9.5px; line-height: 1.45; color: var(--hn-tinta-2); }
.hn-carrossel { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 5px; font-size: 8.5px; color: var(--hn-tinta-3); }
.hn-carrossel i { width: 5px; height: 5px; border-radius: 50%; background: #d3d6dd; }
.hn-carrossel i.hn-ativo { background: #7c4a4a; }
.hn-explica--correta .hn-carrossel i.hn-ativo { background: var(--hn-verde); }

/* Folha "voce tinha certeza?" (`.fd__certeza`): escuro translucido com
   desfoque por cima da questao, pergunta em branco, tres botoes e o
   "So confirmar" sublinhado. */
.hn-certeza {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 14px; text-align: center;
  background: rgba(36, 40, 54, .72);
  backdrop-filter: blur(2.5px);
}
.hn-certeza-fechar { position: absolute; top: 14px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; }
.hn-certeza-fechar svg { width: 10px; height: 10px; }
.hn-certeza-rot { max-width: 17ch; margin: 0 0 12px; font-size: 14.5px; font-weight: 700; line-height: 1.28; color: #fff; }
.hn-certeza-btns { display: flex; gap: 5px; width: 100%; }
.hn-certeza-btns span { flex: 1 1 auto; padding: 6px 4px; border-radius: 8px; background: #fff; font-size: 9.5px; color: var(--hn-tinta-2); white-space: nowrap; }
.hn-certeza-so { margin-top: 10px; font-size: 9.5px; color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- FIM DA SESSAO (`_sessao_fim_card.html`) ---------- */
.hn-fim-rotulo { margin: 4px 0 0; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hn-tinta-3); }
.hn-fim-pct { margin: 2px 0 0; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--hn-tinta); }
.hn-fim-pct small { font-size: 18px; }
.hn-fim-sub { margin: 4px 0 10px; font-size: 10px; color: var(--hn-tinta-3); }

/* ---------- O QUE TREINAR (`_treinar_card_conteudo.html`) ---------- */
.hn-conversa { display: flex; flex-direction: column; gap: 8px; }
.hn-fala { display: flex; align-items: flex-end; gap: 6px; }
.hn-fala img { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.hn-fala-balao { min-width: 0; padding: 7px 9px; border-radius: 11px; background: var(--hn-cinza-bloco); font-size: 10px; line-height: 1.45; color: var(--hn-tinta); }
.hn-fala-balao--sophia { background: #e4ebfd; }
.hn-fala-balao strong { font-weight: 800; }
.hn-fala-meta { display: flex; gap: 8px; margin-top: 4px; font-size: 8.5px; color: var(--hn-tinta-3); }
.hn-fala-meta b { font-weight: 700; color: #6d7280; }

/* ---------- SEU EDITAL (card V3) ---------- */
.hn-edital-cabeca { position: relative; padding-right: 22px; }
.hn-edital-cabeca svg { position: absolute; top: 0; right: 0; width: 13px; height: 13px; color: var(--hn-tinta-3); }
.hn-kicker { margin: 0 0 2px; color: #0668fc; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hn-titulo { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; line-height: 1.2; color: #02062d; }
.hn-apoio { margin: 0 0 8px; font-size: 9.5px; line-height: 1.4; color: #646b78; }
.hn-recolher { display: inline-flex; margin-bottom: 8px; padding: 4px 9px; border: 1px solid #dde1e8; border-radius: 999px; font-size: 9px; font-weight: 600; color: #3a4152; }
.hn-papel { margin: 0 -12px; padding: 8px 8px 60px; background: #f5f6f9; }
.hn-disciplina { overflow: hidden; background: #fff; border: 1px solid #e6e8ee; border-radius: 12px; }
.hn-disciplina-cabeca { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid #eef0f3; font-size: 11.5px; font-weight: 700; color: #02062d; }
.hn-disciplina-cabeca small { font-size: 9px; font-weight: 500; color: #646b78; }
.hn-topico { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 50px; column-gap: 5px; align-items: center; padding: 7px 7px 7px 8px; }
.hn-topico + .hn-topico { border-top: 1px solid #f1f2f5; }
.hn-topico--filho { padding-left: 16px; }
.hn-topico--ativo { background: #eef4ff; box-shadow: inset 3px 0 0 #0668fc; }
.hn-topico-codigo { align-self: start; padding-top: 1px; font: 600 9px/13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #646b78; }
.hn-topico-nome { display: block; font-size: 10.5px; font-weight: 600; line-height: 13px; color: #02062d; }
.hn-topico-agora { display: block; margin-bottom: 1px; font-size: 7.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0668fc; }
.hn-topico-meta { display: block; margin-top: 3px; }
.hn-celular .fd__filtro.fd__filtro-v3 { container-type: normal; }
.hn-celular .fd__filtro.fd__filtro-v3 .fd3-prova { font-size: 8.5px; line-height: 11px; gap: 3px; }
.hn-celular .fd__filtro.fd__filtro-v3 .fd3-prova-icone { width: 8.5px; height: 8.5px; }
.hn-celular .fd__filtro.fd__filtro-v3 .fd3-medidor { width: 50px; grid-column: 3; grid-row: 1; }
.hn-celular .fd__filtro.fd__filtro-v3 .fd3-medidor-arco { width: 34px; height: 20px; }
.hn-celular .fd__filtro.fd__filtro-v3 .fd3-medidor-rotulo { font-size: 8px; line-height: 9.5px; }
.hn-celular .fd__filtro.fd__filtro-v3 .fd3-medidor-numero { font-size: 7.5px; line-height: 9px; }

@media (prefers-reduced-motion: reduce) {
  .hn-celular * { transition: none !important; animation: none !important; }
}