/* ════════════════════════════════════════════════════════════════════════════
   PÁGINA PÚBLICA DE QUESTÃO — folha única
   ════════════════════════════════════════════════════════════════════════════
   Esta folha é FONTE, escrita à mão e versionada. O gerador
   (tools/gen_paginas_questao.py) não a escreve: ele só monta as páginas, que a
   carregam por <link>.

   Por que ela não é embutida em cada página: ela é 67% a 70% do peso de uma
   página de questão. Embutida, as 7.840 questões pesariam 219 MB em vez de
   78 MB, e 100 mil pesariam 2,8 GB em vez de 1 GB. Fora, quem abre a segunda
   questão não baixa a folha de novo.

   A consequência operacional é melhor ainda: mudar o DESENHO não obriga a
   regerar 2.500 arquivos. Mexe aqui, sobe um arquivo.

   O conteúdo saiu do modelo aprovado por ele em 30/set,
   docs/PROPOSTA_pagina_publica_de_questao.html, e cada bloco traz de onde foi
   copiado no produto.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --cream:#f5f5f7;--sand:#f2f2f7;--warm:rgba(0,0,0,.09);
  --terra:#1F4E79;--terra-lt:#3E7CB1;--terra-dk:#14324F;
  --brown:#1d1d1f;--muted:#6e6e73;--card:#fff;
  --green:#34c759;--green-strong:#1f8d3c;--red:#ff3b30;
  --gold:#c9a84c;--coral:#e94560;
  --shadow:0 2px 16px rgba(0,0,0,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--cream);color:var(--brown);line-height:1.6;-webkit-font-smoothing:antialiased}
.lx-logo-mark{display:inline-block;width:24px;height:24px;vertical-align:-4px;margin-right:8px;background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20fill=%22%23e94560%22%20d=%22M80%20125%20L158%20125%20C171%20125%20179%20111%20173%2099%20C167%2087%20166%2073%20172%2060%20C181%2039%20201%2026%20224%2026%20C247%2026%20267%2039%20276%2060%20C282%2073%20281%2087%20275%2099%20C269%20111%20277%20125%20290%20125%20L328%20125%20Q364%20125%20364%20161%20L364%20210%20C364%20223%20378%20231%20390%20225%20C402%20219%20416%20218%20429%20224%20C450%20233%20464%20253%20464%20276%20C464%20299%20450%20319%20429%20328%20C416%20334%20402%20333%20390%20327%20C378%20321%20364%20329%20364%20342%20L364%20429%20Q364%20465%20328%20465%20L310%20465%20C297%20465%20289%20451%20295%20439%20C301%20427%20302%20413%20296%20400%20C287%20379%20267%20365%20244%20365%20C221%20365%20201%20379%20192%20400%20C186%20413%20187%20427%20193%20439%20C199%20451%20191%20465%20178%20465%20L80%20465%20Q44%20465%2044%20429%20L44%20345%20C44%20332%2058%20324%2070%20330%20C82%20336%2096%20337%20109%20331%20C130%20322%20144%20302%20144%20279%20C144%20256%20130%20236%20109%20227%20C96%20221%2082%20222%2070%20228%20C58%20234%2044%20226%2044%20213%20L44%20161%20Q44%20125%2080%20125%20Z%22/%3E%3C/svg%3E") center/contain no-repeat}
.lx-logo{font-family:'Playfair Display',serif;font-weight:800;font-size:22px;color:var(--terra);letter-spacing:-.02em}
.lx-logo span{color:var(--coral)}
.topo{background:var(--card);border-bottom:1px solid var(--warm);position:sticky;top:0;z-index:20}
.topo-in{max-width:1400px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo-cta{display:flex;align-items:center;gap:12px}
/* Botão de seguir no cabeçalho. Preto com ícone coral, para não disputar forma
   nem cor com o "Criar conta grátis", que é coral sólido e segue sendo a ação
   principal da página. */
.btn-seguir{display:inline-flex;align-items:center;gap:8px;background:#1d1d1f;color:#fff;
  border-radius:10px;padding:10px 15px;font-size:13px;font-weight:700;text-decoration:none;
  white-space:nowrap;transition:background .18s,box-shadow .18s}
.btn-seguir svg{width:16px;height:16px;flex:none;color:var(--coral);transition:color .18s}
.btn-seguir:hover{background:var(--coral);box-shadow:0 10px 24px -12px var(--coral)}
.btn-seguir:hover svg{color:#fff}
/* Em tela estreita some o "Seguir" e fica só o @, com o ícone: os dois botões
   inteiros não cabem lado a lado em 360px, e quem quebraria é o cabeçalho. */
@media(max-width:560px){.btn-seguir-txt{display:none}.btn-seguir{padding:10px 13px}}
/* Coral, igual ao .lx-btn-primary da landing (deploy/index.html:391), inclusive
   a sombra tingida. E o botao de entrar no produto, nao um botao qualquer. */
.btn{background:var(--coral);color:#fff;border:0;border-radius:10px;padding:10px 17px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:0 10px 26px -10px var(--coral)}
.btn:hover{filter:brightness(.95)}
/* LARGURA DO PRODUTO, sem invencao: --q-col-w vale 1400px e e a coluna em que
   ele resolve a questao (simulados:8333, .attempt-solo). O trilho de 290 e o gap
   de 16 vem do .result-layout do gabarito (simulados:580). */
.pagina{max-width:1400px;margin:0 auto;padding:30px 24px 70px}
/* O cabecalho ocupa a largura inteira e o grid comeca DEPOIS dele: com a trilha
   dentro da coluna esquerda, o card da questao nascia 128px abaixo do primeiro
   card do trilho. */
.cab{margin-bottom:22px}
/* Coluna UNICA e centrada, igual ao .attempt-solo do produto: nada empurra a
   questao para a esquerda. O trilho lateral existiu e foi removido. */
.wrap{max-width:1400px;margin:0 auto}
.col-a>.card:first-child{margin-top:0}
.col-a{min-width:0}
.trilha{font-size:12px;color:var(--muted);margin-bottom:9px;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
/* A trilha virou LINK em 01/out e eu não vesti os <a>: ficaram com o azul
   sublinhado cru do navegador, que é cara de página de 1995. Eles herdam a cor
   do texto e só acendem no hover, e o sublinhado é uma borda inferior, que fica
   rente à linha de base em vez de cortar as descidas das letras. */
.trilha a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:1px;transition:color .15s,border-color .15s}
.trilha a:hover{color:var(--terra);border-bottom-color:rgba(31,78,121,.4)}
.trilha b{color:var(--terra);font-weight:700}
/* O separador deixa de ser um caractere solto no meio do texto: vira elemento
   próprio, mais claro que os nomes, para a linha ser lida como caminho e não
   como frase. */
.trilha .sep{color:var(--warm);font-weight:400;user-select:none}
body.dark .trilha .sep{color:rgba(255,255,255,.22)}
h1{font-family:'Playfair Display',serif;font-size:31px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--terra)}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.pill{font-size:11px;font-weight:700;border:1px solid var(--warm);background:var(--card);border-radius:999px;padding:5px 11px;color:var(--brown)}
.pill.ouro{border-color:var(--gold);color:#8a6d14;background:color-mix(in srgb,var(--gold) 10%,var(--card))}
.card{background:var(--card);border:1px solid var(--warm);border-radius:18px;box-shadow:var(--shadow);padding:26px;margin-top:22px}
/* Cabecalho da questao DENTRO do card, igual as listas do Banco: o numero em
   marinho 18px (.q-number, simulados:480) e, embaixo, instituicao e ano em
   negrito 13px (.q-tema-row, :8490, montado em :6108). */
.q-number{font-weight:800;color:var(--terra);font-size:18px}
.q-tema-row{margin-top:10px;margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.q-tema-row strong{font-size:13px;color:var(--brown);font-weight:800}
.q-body p{font-size:15.5px;line-height:1.82;margin:0 0 13px}
.q-fig{margin:16px 0}
.q-fig img{max-width:100%;height:auto;border:1px solid var(--warm);border-radius:12px;display:block}
.q-fig figcaption{font-size:11px;color:var(--muted);margin-top:6px}
.comando{font-size:15.5px;line-height:1.82;font-weight:700;margin-top:16px}
.alts{display:grid;gap:9px;margin-top:20px}
.ra{display:grid;grid-template-columns:30px 1fr auto;gap:11px;align-items:start;text-align:left;width:100%;
  border:1px solid var(--warm);background:var(--card);border-radius:12px;padding:13px;font:inherit;cursor:pointer;transition:.15s}
.ra:hover{border-color:var(--terra-lt);background:var(--sand)}
.alt-letter{width:27px;height:27px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-weight:800;font-size:11px;color:var(--terra)}
.alt-text{font-size:15.5px;line-height:1.6;padding-top:2px}
.alt-mark{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding-top:6px;white-space:nowrap;color:transparent}
/* Alternativa que É uma imagem. São 259 no recorte de oito bancas, 232 delas da
   USP-SP, que usa eletrocardiograma e foto como opção de resposta. O teto de
   altura existe porque algumas chegam com a largura da prova inteira: sem ele,
   cinco alternativas empilhadas viram uma página de rolagem só. */
/* ── Questão anulada ──────────────────────────────────────────────────────
   O âmbar é o mesmo que o produto usa para anulada desde a v7.74, no caderno e
   no mapa de questões. Não inventar uma terceira cor para o mesmo estado. */
.pill.anulada{border-color:rgba(217,119,6,.45);color:#b45309;background:rgba(255,159,10,.12)}
.anulada-aviso{margin-top:18px;padding:12px 15px;border-radius:12px;font-size:13.5px;line-height:1.6;
  color:#8a5a08;background:rgba(255,159,10,.1);border:1px solid rgba(217,119,6,.3)}
.anulada-aviso strong{font-weight:800}
/* Numa anulada, a alternativa marcada NÃO fica vermelha: não havia resposta
   certa, então "você errou" é afirmação falsa. Ela volta ao neutro e só o aviso
   fala. Duas classes contra duas, e esta vem depois: ganha. */
.card.anulada.revelado .ra.escolhida[data-ok="0"]{background:var(--card);border-color:var(--warm)}
.card.anulada.revelado .ra.escolhida[data-ok="0"] .alt-mark{color:var(--muted)}

.alt-fig{margin:2px 0}
.alt-fig img{max-width:100%;max-height:260px;width:auto;height:auto;border:1px solid var(--warm);border-radius:10px;display:block}
/* Antes de revelar, a escolha e so escolha: copiado do .alt.selected do produto
   (simulados:481). Escopado em :not(.revelado) para nao sobreviver ao gabarito,
   senao a letra marinho ficaria pintada na alternativa errada. */
.card:not(.revelado) .ra.escolhida{border-color:var(--terra);background:color-mix(in srgb,var(--terra) 7%,var(--card));box-shadow:0 0 0 1px var(--terra)}
.card:not(.revelado) .ra.escolhida .alt-letter{background:var(--terra);color:#fff}
.q-acao{margin-top:18px}
.btn-revelar{background:var(--terra);color:#fff;border:0;border-radius:12px;padding:13px 22px;
  font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.btn-revelar:hover:not(:disabled){background:var(--terra-dk)}
.btn-revelar:disabled{background:var(--sand);color:var(--muted);cursor:default}
/* Mesma regua da v7.84: so a certa e pintada; a marcada e errada leva a caixa
   em vermelho suave, e a letra dela NAO se pinta. */
.revelado .ra{cursor:default;pointer-events:none}
.revelado .ra[data-ok="1"]{background:color-mix(in srgb,var(--green) 8%,var(--card));border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.revelado .ra[data-ok="1"] .alt-letter{background:var(--green);color:#fff}
.revelado .ra[data-ok="1"] .alt-mark{color:var(--green-strong)}
.revelado .ra.escolhida[data-ok="0"]{background:color-mix(in srgb,var(--red) 8%,var(--card));border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.revelado .ra.escolhida[data-ok="0"] .alt-mark{color:#c0291f}
/* Comentario oficial: copiado do produto (simulados:8804 a 8812 e :5852).
   Moldura em marinho 22%, fundo em marinho 3%, cabecalho com o rotulo real
   "Explicacao oficial do MedBoard" e h2 separado por um fio em cima. */
.official-block{display:none;border:1px solid color-mix(in srgb,var(--terra) 22%,var(--warm));border-radius:14px;margin-top:18px;overflow:hidden;background:color-mix(in srgb,var(--terra) 3%,var(--card))}
.official-block.on{display:block}
.official-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;font-weight:800;font-size:13px;color:var(--terra)}
.official-head .caret svg{width:17px;height:17px;display:block;transform:rotate(180deg)}
.official-body{padding:2px 16px 15px}
.official-comment{color:var(--brown);font-size:15.5px;line-height:1.7}
.official-comment>:first-child{margin-top:0}
.official-comment>:last-child{margin-bottom:0}
.official-comment p{margin:0 0 13px}
.official-comment ul,.official-comment ol{margin:10px 0 14px;padding-left:24px}
.official-comment li{margin:5px 0}
.official-comment strong{font-weight:800}
.official-comment h2{font-family:'Playfair Display',serif;font-weight:800;font-size:15px;color:var(--terra);margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--warm);line-height:1.25}
.official-comment>h2:first-child{border-top:0;padding-top:0;margin-top:0}
/* Bizu: card coral proprio, copiado de simulados:8821 a 8825. O coral aqui nao
   e da Bia, e o acento que o produto ja da ao bizu. */
.bizu-block{display:none;border:1px solid color-mix(in srgb,var(--coral) 42%,transparent);border-left:4px solid var(--coral);border-radius:14px;margin-top:12px;overflow:hidden;background:color-mix(in srgb,var(--coral) 8%,var(--card))}
.bizu-block.on{display:block}
.bizu-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral)}
.bizu-head .caret svg{width:17px;height:17px;display:block;transform:rotate(180deg)}
.bizu-body{padding:0 16px 15px;font-size:15.5px;line-height:1.7}
.bizu-body>:first-child{margin-top:0}
.bizu-body>:last-child{margin-bottom:0}
.bizu-body p{margin:0 0 13px}
.bizu-body ul,.bizu-body ol{margin:10px 0 14px;padding-left:24px}
.bizu-body li{margin:5px 0}
.bizu-body strong{font-weight:800}
.fim{margin-top:22px;background:linear-gradient(135deg,var(--terra),var(--terra-dk));color:#fff;border-radius:18px;padding:28px}
.fim h2{font-family:'Playfair Display',serif;font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
/* Sem teto de medida: a linha acompanha a largura do card, a pedido dele. */
.fim p{font-size:14.5px;opacity:.92;margin-bottom:14px}
.fim p:last-of-type{margin-bottom:20px}
/* O .btn carrega uma sombra TINGIDA de coral, que é o truque da landing: sombra
   da cor do próprio botão, sobre fundo claro. Aqui o botão fica BRANCO sobre o
   marinho, e a sombra coral não acompanhou a troca: virava um brilho vermelho
   borrado embaixo de um botão branco. A sombra passa a ser neutra e escura, que
   é o que a mesma ideia pede quando o botão é claro e o fundo é escuro. */
.fim .btn{background:#fff;color:var(--terra);box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.fim .btn:hover{background:var(--sand)}
/* ── Bia convidando ───────────────────────────────────────────────────────────
   O balao e o FAB vem PRONTOS da landing, copiados sem reescrever: cauda
   apontando para o FAB, ponto coral pulsando, modo noite, e a posicao de
   celular que sobe a bolha acima dos botoes. Coral aqui e legitimo, e a cor
   dela. O balao comeca escondido e entra depois da acao. */
.ai-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:0;background:none;color:#fff;border:none;font-size:22px;cursor:pointer;filter:drop-shadow(0 4px 12px rgba(233,69,96,.45));z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,filter .2s ease;overflow:visible;will-change:transform;}
.ai-fab-logo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;pointer-events:none;}
.mb-mark{display:block;width:100%;height:100%;border-radius:inherit;background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20fill=%22%23e94560%22%20d=%22M80%20125%20L158%20125%20C171%20125%20179%20111%20173%2099%20C167%2087%20166%2073%20172%2060%20C181%2039%20201%2026%20224%2026%20C247%2026%20267%2039%20276%2060%20C282%2073%20281%2087%20275%2099%20C269%20111%20277%20125%20290%20125%20L328%20125%20Q364%20125%20364%20161%20L364%20210%20C364%20223%20378%20231%20390%20225%20C402%20219%20416%20218%20429%20224%20C450%20233%20464%20253%20464%20276%20C464%20299%20450%20319%20429%20328%20C416%20334%20402%20333%20390%20327%20C378%20321%20364%20329%20364%20342%20L364%20429%20Q364%20465%20328%20465%20L310%20465%20C297%20465%20289%20451%20295%20439%20C301%20427%20302%20413%20296%20400%20C287%20379%20267%20365%20244%20365%20C221%20365%20201%20379%20192%20400%20C186%20413%20187%20427%20193%20439%20C199%20451%20191%20465%20178%20465%20L80%20465%20Q44%20465%2044%20429%20L44%20345%20C44%20332%2058%20324%2070%20330%20C82%20336%2096%20337%20109%20331%20C130%20322%20144%20302%20144%20279%20C144%20256%20130%20236%20109%20227%20C96%20221%2082%20222%2070%20228%20C58%20234%2044%20226%2044%20213%20L44%20161%20Q44%20125%2080%20125%20Z%22/%3E%3C/svg%3E") center/contain no-repeat;}
/* Peça BRANCA sobre os tiles coral da Bia (regra da identidade: branco em fundo colorido) */
.imp-shortcut-avatar .mb-mark,.bwc-avatar .mb-mark{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22-18%20-18%20548%20548%22%3E%3Cpath%20fill=%22%23ffffff%22%20d=%22M80%20125%20L158%20125%20C171%20125%20179%20111%20173%2099%20C167%2087%20166%2073%20172%2060%20C181%2039%20201%2026%20224%2026%20C247%2026%20267%2039%20276%2060%20C282%2073%20281%2087%20275%2099%20C269%20111%20277%20125%20290%20125%20L328%20125%20Q364%20125%20364%20161%20L364%20210%20C364%20223%20378%20231%20390%20225%20C402%20219%20416%20218%20429%20224%20C450%20233%20464%20253%20464%20276%20C464%20299%20450%20319%20429%20328%20C416%20334%20402%20333%20390%20327%20C378%20321%20364%20329%20364%20342%20L364%20429%20Q364%20465%20328%20465%20L310%20465%20C297%20465%20289%20451%20295%20439%20C301%20427%20302%20413%20296%20400%20C287%20379%20267%20365%20244%20365%20C221%20365%20201%20379%20192%20400%20C186%20413%20187%20427%20193%20439%20C199%20451%20191%20465%20178%20465%20L80%20465%20Q44%20465%2044%20429%20L44%20345%20C44%20332%2058%20324%2070%20330%20C82%20336%2096%20337%20109%20331%20C130%20322%20144%20302%20144%20279%20C144%20256%20130%20236%20109%20227%20C96%20221%2082%20222%2070%20228%20C58%20234%2044%20226%2044%20213%20L44%20161%20Q44%20125%2080%20125%20Z%22/%3E%3C/svg%3E");background-size:72%;}
.mb-mark-inline{display:inline-block;width:18px;height:18px;border-radius:5px;vertical-align:-3px;}
.ai-fab:hover{transform:scale(1.1);filter:drop-shadow(0 6px 18px rgba(233,69,96,.6));}
.ai-fab-x{display:none;width:26px;height:26px;color:#fff;}
.ai-fab-x svg{width:100%;height:100%;display:block;}
.ai-fab-dot{
  position:absolute;top:4px;right:4px;
  width:10px;height:10px;border-radius:50%;
  background:#e94560;border:2px solid #fff;
  display:none;animation:bia-pulse 2s ease-in-out infinite;
}
.bia-bubble{
  position:fixed;bottom:24px;right:86px;z-index:9000;
  max-width:300px;background:#1d1d1f;color:#fff;
  border-radius:18px;
  padding:14px 16px 14px 16px;
  box-shadow:0 12px 36px rgba(0,0,0,.32), 0 0 0 1px rgba(233,69,96,.18);
  display:none;animation:bia-bubble-in .4s cubic-bezier(.34,1.56,.64,1);
  cursor:pointer;transition:transform .15s;
}
.bia-bubble.on{display:block;}
.bia-bubble:hover{transform:translateX(-2px);}
body.dark .bia-bubble{background:#f5f5f7;color:#1d1d1f;box-shadow:0 12px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(233,69,96,.3);}
@keyframes bia-bubble-in{from{transform:translateX(14px) scale(.92);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}

/* Cauda fixa apontando exatamente pro centro vertical do AI FAB */
.bia-bubble::after{
  content:'';position:absolute;bottom:19px;right:-6px;
  width:14px;height:14px;background:#1d1d1f;
  transform:rotate(45deg);border-radius:2px;
  box-shadow:1px -1px 0 rgba(233,69,96,.18);
}
body.dark .bia-bubble::after{background:#f5f5f7;box-shadow:1px -1px 0 rgba(233,69,96,.3);}

/* Mobile: bolha sobe pra cima dos FABs (sem cauda — header "Bia" já identifica origem) */
@media(max-width:600px){
  .bia-bubble{
    bottom:152px;right:24px;
    max-width:calc(100vw - 48px);
    border-radius:18px 18px 4px 18px;
  }
  .bia-bubble::after{display:none;}
}
.bia-bubble-close{
  position:absolute;top:6px;right:8px;
  width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.1);border:none;
  color:rgba(255,255,255,.6);font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.bia-bubble-close:hover{background:rgba(255,255,255,.2);color:#fff;}
body.dark .bia-bubble-close{background:rgba(0,0,0,.08);color:rgba(0,0,0,.5);}
body.dark .bia-bubble-close:hover{background:rgba(0,0,0,.15);color:#1d1d1f;}
.bia-bubble-head{
  display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  margin-bottom:6px;padding-right:24px;
}
body.dark .bia-bubble-head{color:rgba(0,0,0,.5);}
.bia-bubble-head .bia-dot{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,#e94560,#ff6b35);
  animation:bia-pulse 2s ease-in-out infinite;
}
@keyframes bia-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(233,69,96,.5);transform:scale(1)}
  50%{box-shadow:0 0 0 6px rgba(233,69,96,0);transform:scale(.92)}
}
.bia-bubble-text{font-size:13px;line-height:1.5;font-weight:500;padding-right:22px;}
.bia-bubble-cta{
  margin-top:10px;display:inline-block;
  font-size:11px;font-weight:600;color:#e94560;
  text-decoration:none;letter-spacing:.01em;
}
body.dark .bia-bubble-cta{color:#c0293f;}

.bia-bubble{max-width:340px}
@media(max-width:640px){h1{font-size:25px}.card{padding:19px}}


/* ════════════════════════════════════════════════════════════════════════
   ÍNDICE E PÁGINAS DE TEMA (01/out)
   ════════════════════════════════════════════════════════════════════════
   Mesma folha das questões de propósito: são as mesmas três telas de uma
   coisa só, e dar a elas uma folha própria criaria dois vocabulários para
   o mesmo site, além de um segundo arquivo para o navegador baixar.
   O desenho foi aprovado em docs/PROPOSTA_indice_e_pagina_de_tema.html. */

/* Índice: uma faixa por área, com os temas em colunas. Em 335 temas, coluna
   única viraria uma página de rolagem infinita; três colunas no desktop põem
   uma área inteira à vista. */
.idx-area{margin-top:26px}
.idx-area h2{font-family:'Playfair Display',serif;font-size:20px;font-weight:800;color:var(--terra);margin-bottom:3px}
.idx-area-sub{font-size:12px;color:var(--muted);margin-bottom:13px}
.idx-temas{columns:3;column-gap:28px;font-size:13.5px;line-height:1.95}
.idx-temas a{color:var(--brown);text-decoration:none;display:block;break-inside:avoid}
.idx-temas a:hover{color:var(--terra);text-decoration:underline}
@media(max-width:900px){.idx-temas{columns:2}}
@media(max-width:600px){.idx-temas{columns:1}}

/* As bancas, no índice: é por elas que muita gente procura ("prova UNIFESP
   2024"), e elas dão ao robô um segundo caminho até as mesmas questões. */
.idx-bancas{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.idx-banca{font-size:12.5px;font-weight:700;border:1px solid var(--warm);background:var(--card);
  border-radius:999px;padding:7px 14px;color:var(--brown);text-decoration:none;transition:.15s}
.idx-banca:hover{border-color:var(--terra);color:var(--terra)}

/* Página de tema: a lista é só banca, ano e número, decisão dele. Sem prévia do
   enunciado, por dois motivos: a página não vira um simulado legível de uma vez,
   e não compete no Google com as próprias páginas de questão. */
.tema-lista{margin-top:6px;border-top:1px solid var(--warm)}
/* Grid e não flex: com `space-between` o número da questão ficava num lugar
   diferente em cada linha, conforme o tamanho do nome da prova. */
.tema-linha{display:grid;grid-template-columns:170px 1fr 18px;align-items:center;gap:14px;
  padding:13px 4px;border-bottom:1px solid var(--warm);text-decoration:none;transition:.13s}
.tema-linha:hover{background:var(--sand)}
.tema-prova{font-size:14px;font-weight:700;color:var(--brown)}
.tema-num{font-size:12.5px;color:var(--muted);font-weight:600}
.tema-seta{color:var(--terra);font-weight:800;flex:none}

/* A incidência é o texto PRÓPRIO da página, e é o que nenhum concorrente tem.
   Sem ela a página de tema é uma lista de links, que o Google trata como
   conteúdo fino. */
.inc{margin-top:18px;border:1px solid var(--warm);border-radius:14px;padding:18px 20px;background:var(--card)}
.inc h2{font-size:13px;font-weight:800;color:var(--brown);margin-bottom:4px}
.inc-sub{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.inc-linha{display:grid;grid-template-columns:86px 1fr 34px;gap:11px;align-items:center;margin-bottom:7px}
.inc-nome{font-size:12.5px;font-weight:700;color:var(--brown)}
.inc-barra{height:9px;border-radius:999px;background:var(--sand);overflow:hidden}
.inc-barra i{display:block;height:100%;border-radius:999px;background:var(--terra)}
.inc-n{font-size:12px;font-weight:800;color:var(--muted);text-align:right}
.inc-anos{display:flex;gap:4px;align-items:flex-end;margin-top:16px;height:60px}
/* O pai precisa de altura REAL para a barra em % ter contra o que medir: sem
   isto a coluna some e sobra só o rótulo do ano. */
.inc-ano{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}
.inc-ano i{display:block;width:100%;background:var(--terra);border-radius:4px 4px 0 0;opacity:.85}
.inc-ano span{font-size:10px;color:var(--muted);font-weight:600}

/* ── Rodapé das páginas públicas (01/out) ─────────────────────────────────────
   Fica FORA do .pagina, encostando nas duas bordas como o .topo: ele fecha a
   página, e uma faixa que para no meio não fecha nada.
   O hover é marinho, não coral: coral é da Bia e não vira cor de link. */
.rodape{border-top:1px solid var(--warm);background:var(--card);margin-top:10px}
/* Sem nada à direita desde que o @ saiu daqui: a faixa é só navegação, e
   `space-between` com um filho só empurraria os links para a esquerda sem
   motivo nenhum. */
.rodape-in{max-width:1400px;margin:0 auto;padding:18px 24px}
.rodape-links{display:flex;gap:20px;flex-wrap:wrap}
.rodape-links a{font-size:12.5px;color:var(--muted);text-decoration:none;transition:color .15s}
.rodape-links a:hover{color:var(--terra)}

/* O convite do rodapé. Fundo de areia, não card branco: ele não é mais um card
   para ler, é o fecho da página, e um branco aqui competiria com o card marinho
   logo acima. O botão é vazado em marinho pelo mesmo motivo: já existe um botão
   coral sólido na mesma rolagem, e dois CTAs sólidos brigam. */
.rodape-convite{background:var(--sand);border-top:1px solid var(--warm)}
.rodape-convite-in{max-width:1400px;margin:0 auto;padding:26px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:28px;flex-wrap:wrap}
.rodape-convite-tit{font-size:15px;font-weight:800;color:var(--brown);margin-bottom:5px}
.rodape-convite-txt{font-size:13px;color:var(--muted);line-height:1.65;max-width:620px}
/* Preto e coral, pedido dele: o botão tem de destoar dos outros dois da mesma
   rolagem (o coral sólido do topo e o branco do card marinho) e ser visível sem
   competir com o "Criar conta grátis", que continua sendo a ação principal.
   Preto sólido com o ícone coral resolve os dois: ele puxa o olho pela cor que
   não existe em mais nada do rodapé, e não repete a forma do CTA de cadastro.
   O coral aqui é exceção consciente à regra de ele ser só da Bia. */
.rodape-convite-btn{display:inline-flex;align-items:center;gap:9px;flex:none;
  border:0;color:#fff;background:#1d1d1f;border-radius:999px;
  padding:12px 22px;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.8);transition:background .18s,box-shadow .18s,transform .18s}
.rodape-convite-btn svg{width:17px;height:17px;flex:none;color:var(--coral);transition:color .18s}
/* No hover o coral toma a peça inteira e o ícone vira branco: a cor que chamava
   a atenção passa a ser o fundo, em vez de sumir. */
.rodape-convite-btn:hover{background:var(--coral);transform:translateY(-1px);
  box-shadow:0 12px 26px -12px var(--coral)}
.rodape-convite-btn:hover svg{color:#fff}
@media(max-width:700px){.rodape-convite-in{flex-direction:column;align-items:flex-start;gap:16px}}