/* QI Roxo: página pública de questões (/questoes). Vem DEPOIS de tokens.css, base.css, site.css, feed.css (janela e barra de Filtros) e questao.css: o cabeçalho em pílula, o herói escuro e o rodapé são os da página inicial
   (site.css) e o cartão da questão é o do feed do app (questao.css). Aqui ficam só as peças da vitrine: barra de filtros (a do feed: o botão Filtros abre a janela do app, de feed.css), lista, convite ao cadastro,
   coluna lateral e a janela de login (copia o mínimo dos estilos acesso-* de entrar.css, que esta página não carrega). */

:root {
  /* mínimo de toque: 44 px no celular e no tablet (e em telas de toque); 0 no computador (mesma regra de entrar.css) */
  --alvo-min: 0px;
  --vit-gradiente: linear-gradient(135deg, oklch(0.5 0.25 304), oklch(0.4 0.23 298));
}
@media (max-width: 1023px), (pointer: coarse) { :root { --alvo-min: var(--alvo-toque); } }

.pagina-publico .topo__nav a[aria-current] { background: var(--ouro); color: var(--ouro-texto); }   /* "Questões" é o item atual e já é o item em destaque (ouro, ver css/site.css) */
.pagina-publico [hidden] { display: none !important; }
.pagina-publico .sobreposicao { z-index: 80; }              /* acima da pílula do cabeçalho (z-index 60) */

/* ---------------------------------------------------------------------------------------------------- herói enxuto: a primeira questão tem de aparecer sem rolar muito */
.pagina-publico .heroi { padding-top: calc(clamp(92px, 7.2vw, 100px) + env(safe-area-inset-top, 0px)); padding-bottom: clamp(28px, 3vw, 36px); }
/* o texto do herói e a lista de questões partem da mesma margem esquerda: a mesma largura máxima nos dois (coluna única até 1039 px; coluna + lateral depois) */
.pagina-publico .heroi__grade, .vit-wrap { max-width: 680px; }
@media (min-width: 1040px) { .pagina-publico .heroi__grade, .vit-wrap { max-width: 948px; } }
.pagina-publico .heroi__grade { grid-template-columns: minmax(0, 1fr); }
.pagina-publico .heroi__etiqueta svg { color: var(--ouro); }
.pagina-publico .heroi__titulo { font-size: clamp(34px, 4.2vw, 48px); line-height: 1.02; margin: 14px 0 10px; }
.pagina-publico .heroi__lead { max-width: 640px; margin: 0 0 18px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; }
@media (min-width: 1040px) { .pagina-publico .heroi__lead { max-width: 900px; } }
.pagina-publico .heroi__botoes { gap: 10px 12px; }
.pagina-publico .heroi__botoes .botao--grande { padding: 13px 24px; font-size: 16px; }
.pagina-publico .heroi__botoes .botao--fantasma { padding: 13px 22px; font-size: 16px; }

/* ---------------------------------------------------------------------------------------------------- lista */
.vit { padding: clamp(18px, 2.6vw, 30px) max(14px, var(--s-id)) clamp(52px, 7vw, 92px) max(14px, var(--s-ie)); }
.vit-raiz { min-height: 70vh; }
.vit-wrap { display: flex; gap: 28px; justify-content: center; align-items: flex-start; margin: 0 auto; }
.vit-col { flex: 1; min-width: 0; }
@media (min-width: 1040px) { .vit-col { max-width: 620px; } }
.vit-lista { display: flex; flex-direction: column; gap: 20px; }
.vit-falha { margin: 0 auto; max-width: 560px; padding: 32px 20px; text-align: center; font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.vit-falha a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* barra de filtros: a mesma do feed (busca em pílula, botão Filtros com o contador e chips dos filtros aplicados, classes feed-* de feed.css); a busca por palavra só pede o login */
.vit-filtros { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; scroll-margin-top: 92px; }
.vit-barra { display: flex; align-items: center; gap: 10px; }
.vit-busca {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 48px; padding: 0 18px; border-radius: var(--r-pilula); background: #fff;
  border: 1.5px solid var(--lilas-borda-cartao); color: var(--texto-3); font-size: 15.5px; font-weight: 500; text-align: left; transition: border-color var(--anim-rapida), box-shadow var(--anim-rapida);
}
.vit-busca span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vit-busca svg { flex: none; color: var(--texto-meta); }
.vit-busca:hover { border-color: var(--roxo); }
.vit-busca:focus-visible { outline: 0; border-color: var(--roxo); box-shadow: 0 0 0 4px var(--roxo-foco); }
.vit-barra .feed-filtros { height: 48px; padding-block: 0; margin-left: 0; }
.vit-barra .feed-filtros:focus-visible { outline: 0; border-color: var(--roxo); box-shadow: 0 0 0 4px var(--roxo-foco); }
.vit-filtros .feed-chips { margin-bottom: 0; }
@media (max-width: 479px) { .vit-busca { padding: 0 14px; gap: 8px; font-size: 15px; } .vit-barra .feed-filtros { padding-inline: 14px; } }

/* janela de Filtros em modo visitante: "Palavra-chave" é um botão com a cara do campo (a busca por palavra só com conta); o texto é o do placeholder do campo de verdade */
.f-busca-login { width: 100%; text-align: left; cursor: pointer; }
.f-busca-login .f-busca-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--texto-mudo); }
.f-busca-login:hover { border-color: var(--roxo); }
.f-busca-login:focus-visible { outline: 0; border-color: var(--roxo); box-shadow: 0 0 0 4px var(--roxo-foco); }
@media (max-width: 1023px) { .f-busca-login .f-busca-texto { font-size: 16px; } }

/* servidor cheio (não é erro): o aviso amigável ocupa o lugar da lista, no mesmo molde do estado vazio */
.vit-ocupado .estado { padding: 40px 24px; }

.vit-mais { display: flex; justify-content: center; padding: 6px 0 2px; }

/* convite ao cadastro no fim da lista (ou sozinho, com a vitrine desligada) */
.vit-convite { padding: 34px 24px 26px; border-radius: var(--r-painel); background: var(--vit-gradiente); color: #fff; text-align: center; box-shadow: 0 18px 30px -20px oklch(0.49 0.25 304 / .8); animation: rise var(--anim-entrada) both; }
.vit-convite-icone { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 50%; background: oklch(1 0 0 / .14); color: var(--ouro); }
.vit-convite-titulo { margin: 0 0 10px; font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(25px, 3vw, 31px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.vit-convite-texto { max-width: 440px; margin: 0 auto 22px; font-size: 16px; line-height: 1.5; color: oklch(0.94 0.04 306); text-wrap: pretty; }
.vit-convite-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vit-convite .btn-fantasma { background: transparent; color: #fff; border: 1.5px solid oklch(1 0 0 / .4); font-weight: 700; }
.vit-convite .btn-fantasma:hover { background: oklch(1 0 0 / .12); color: #fff; }
.vit-convite-nota { margin: 16px 0 0; font-size: 13.5px; color: oklch(0.9 0.04 306); }
@media (max-width: 479px) { .vit-convite-acoes .btn { width: 100%; } }

/* coluna lateral (tela larga): o que a conta grátis dá, sempre à vista enquanto a lista rola */
.vit-lateral { display: none; flex: none; width: 300px; position: sticky; top: 92px; }
@media (min-width: 1040px) { .vit-lateral { display: block; } }
.vit-lateral-cartao { padding: 22px 20px 18px; border-radius: 22px; background: var(--vit-gradiente); color: #fff; box-shadow: 0 18px 30px -20px oklch(0.49 0.25 304 / .8); }
.vit-lateral-titulo { margin: 0 0 14px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 21px; line-height: 1.12; letter-spacing: -.02em; }
.vit-lateral-ganhos { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.vit-lateral-ganhos li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.38; color: oklch(0.96 0.03 306); }
.vit-lateral-ganhos svg { flex: none; margin-top: 2px; color: var(--ouro); }
.vit-lateral-nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; text-align: center; color: oklch(0.9 0.04 306); }

/* ---------------------------------------------------------------------------------------------------- janela de login */
.modal.vit-login:focus { outline: 0; }
.vit-login .modal-cab { margin-bottom: 14px; }
.vit-login-sub { display: none; margin: 0 0 12px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
/* computador: janela larga em duas colunas (criar conta à esquerda, entrar à direita), para caber numa tela de 672 px de altura sem rolar; no celular é uma folha de uma coluna só */
@media (min-width: 1024px) {
  .modal.vit-login { width: min(800px, calc(100% - 48px)); padding: 24px 28px 28px; }
  .vit-login-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .vit-login-novo { display: flex; flex-direction: column; padding: 20px; border-radius: 22px; background: var(--lilas-cintia); border: 1px solid var(--lilas-borda-ia); }
  .vit-login-novo .vit-login-ganhos { margin-bottom: 18px; }
  .vit-login-novo .vit-login-criar { margin-top: auto; }
  .vit-login-sub { display: block; }
  .vit-login .vit-login-ou-ja { display: none; }      /* (.vit-login na frente: o .acesso-ou vem depois no arquivo e ganharia no empate) */
}
.vit-login-ganhos { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.vit-login-ganhos li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--texto-forte); }
.vit-login-ganhos svg { flex: none; box-sizing: content-box; margin-top: 1px; padding: 2px; border-radius: 50%; background: var(--roxo-tinta); color: var(--roxo); }
.vit-login-criar { --btn-py: 14px; }
.vit-login-nota { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--texto-3); }
.vit-login .acesso-ou { margin: 16px 0; }
.vit-login .acesso-form { gap: 12px; }
.vit-login .acesso-ou + .acesso-google { margin-top: 0; }
.vit-login-entrar { --btn-py: 13px; }

/* estilos acesso-* (copiados de entrar.css): botão do Google, divisor, formulário, campo de senha com olho, link pequeno */
.acesso-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; border-radius: var(--r-pilula);
  border: 1.5px solid var(--borda-input); background: #fff; font-weight: 700; font-size: 15.5px; color: inherit; transition: border-color var(--anim-rapida);
}
.acesso-google:hover:not(:disabled) { border-color: var(--roxo); }
.acesso-google:disabled { opacity: .65; }
.acesso-google-logo { flex: none; }
.acesso-ou { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--texto-3); }
.acesso-ou span { flex: 1; height: 1px; background: oklch(0.91 0.02 306); }
.acesso-form { display: flex; flex-direction: column; gap: 14px; }
.acesso-campo { display: block; }
.acesso-rotulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 14px; margin-bottom: 7px; }
.acesso-senha { position: relative; }
.acesso-senha .input { padding-right: 52px; }
.acesso-olho {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; color: var(--texto-3); transition: color var(--anim-rapida), background-color var(--anim-rapida);
}
.acesso-olho:hover, .acesso-olho[aria-pressed="true"] { color: var(--roxo-texto); }
.acesso-olho:hover { background: var(--roxo-foco); }
.acesso-olho:focus-visible { outline: 2px solid var(--roxo); outline-offset: -2px; }
.acesso-dica { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--texto-3); }
.acesso-dica-erro { color: var(--erro-texto); font-weight: 700; }
.input[aria-invalid="true"] { border-color: var(--erro); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px oklch(0.64 0.21 18 / .16); }
.acesso-link {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo-min); flex: none; white-space: nowrap; font-weight: 700; font-size: 13.5px;
  padding-inline: 8px; margin-inline: -8px; margin-block: min(0px, calc((1lh - var(--alvo-min)) / 2));
}