/* Identidade do site faag.com.br, medida em 30/10/2026 (04 - Desenho da v1.md, seção 2). Botão principal preto como o INSCREVA-SE da
   home (item 25, 31/10: "22 a 26 ok"); o vermelho fica só no erro. Topo preto como o da home (item 27, 01/11: "ok 26 e 27"). */
:root{--vermelho:#E50914;--vermelho-esc:#BB0215;--azul-esc:#031E2F;--azul:#0065BD;--texto:#1F1F1F;--cinza:#7A7A7A;--fundo:#F8F8F8;--linha:#E9E9E9}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.6 "Nunito Sans",Arial,sans-serif;color:var(--texto);background:var(--fundo);min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:Montserrat,Arial,sans-serif;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(1.4rem,4vw,1.9rem)}h2{font-size:1.2rem}
.topo{background:#000;padding:14px 16px}
.topo .caixa{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.topo img{height:44px;width:auto;display:block}
.topo span{color:#fff;font-family:Montserrat,Arial,sans-serif;font-weight:600;font-size:1.15rem}.topo span b{font-weight:800;letter-spacing:.04em}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:24px 16px 48px}
.cartao{background:#fff;border-radius:14px;padding:clamp(18px,4vw,32px);box-shadow:0 2px 10px rgba(3,30,47,.08)}
.sub{color:var(--cinza);margin:0 0 20px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo label{font-weight:700}
.campo input,.campo select{width:100%;font:inherit;padding:12px 14px;border:1px solid #cfd6dc;border-radius:8px;background:#fff;min-width:0}
.campo input:focus,.campo select:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.dica{font-size:.88rem;color:var(--cinza)}
.erro{color:var(--vermelho-esc);font-size:.92rem}
.aceite{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin:8px 0 20px}
.aceite input{width:20px;height:20px;margin:3px 0 0}
.botao{display:inline-flex;align-items:center;justify-content:center;font:700 1rem Montserrat,Arial,sans-serif;padding:14px 22px;border-radius:10px;border:0;cursor:pointer;text-decoration:none;text-align:center}
.botao.primario{background:#000;color:#fff}.botao.primario:hover{background:#333}
.botao.secundario{background:#fff;color:var(--azul-esc);border:2px solid var(--azul-esc)}
.botoes{display:flex;flex-wrap:wrap;gap:12px}.botoes .botao{flex:1 1 220px}
.aviso{background:#FFF6D6;border:1px solid #FBBC05;border-radius:10px;padding:14px 16px;margin-bottom:18px}
.tempo{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:#EEF5FC;border-radius:10px;padding:14px 16px;margin:18px 0}
.tempo b{font:800 1.6rem Montserrat,Arial,sans-serif;color:var(--azul)}
.questao{border-top:1px solid var(--linha);padding:20px 0}
.questao:first-of-type{border-top:0;padding-top:4px}
.questao .num{font:700 .9rem Montserrat,Arial,sans-serif;color:var(--azul)}
.alt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;margin-top:10px;cursor:pointer}
.alt input{width:20px;height:20px;margin:2px 0 0}
.alt:has(input:checked){border-color:var(--azul);background:#EEF5FC}
.progresso{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:8px}
.barra{height:10px;background:var(--linha);border-radius:6px;overflow:hidden}.barra i{display:block;height:100%;width:0;background:var(--azul);transition:.2s}
.salvo{font-size:.88rem;color:var(--cinza);margin:4px 0 0}.contador{font-size:.88rem;color:var(--cinza);white-space:nowrap}
.escondido{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rodape{text-align:center;color:var(--cinza);font-size:.85rem;padding:16px}
/* 01/11/2026, com os pontos 24 e 25 do Fabiano ("tenha cuidado com a interface, a experiência e a interação"): etapas, curso escolhido
   em resumo, unidade em botões, progresso parado no alto da prova, aviso de questão sem resposta na própria página, telas de aviso
   com ícone. */
.etapas{display:flex;align-items:center;gap:8px;list-style:none;margin:0 0 22px;padding:0;font:600 .85rem Montserrat,Arial,sans-serif;color:var(--cinza)}
.etapas li{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0}
.etapas li:last-child{flex:0 0 auto}
.etapas li:not(:last-child)::after{content:"";flex:1 1 auto;height:2px;background:var(--linha);border-radius:2px;min-width:10px}
.etapas .bola{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #cfd6dc;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;background:#fff}
.etapas li.atual{color:var(--texto)}.etapas li.atual .bola{border-color:#000;background:#000;color:#fff}
.etapas li.feita .bola{border-color:var(--azul);background:var(--azul);color:#fff}.etapas li.feita::after{background:var(--azul)}
.etapas .nome{white-space:nowrap}
.escolhido{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;background:#EEF5FC;border:1px solid #cfe2f6;border-radius:12px;padding:14px 16px;margin-bottom:20px}
.escolhido .rotulo{grid-column:1/-1;font-size:.85rem;color:var(--cinza)}
.escolhido .qual{min-width:0}.escolhido b{font:700 1.05rem Montserrat,Arial,sans-serif;display:block}.escolhido .onde{display:block;font-size:.95rem}
.link{background:none;border:0;padding:4px 0;color:var(--azul);font:700 .95rem "Nunito Sans",Arial,sans-serif;text-decoration:underline;cursor:pointer;white-space:nowrap}
fieldset.campo{border:0;padding:0;margin:0 0 16px;min-width:0}
fieldset.campo legend{font-weight:700;padding:0;margin-bottom:6px}
.opcoes-unidade{display:flex;flex-wrap:wrap;gap:10px}
.opcao{flex:1 1 160px;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #cfd6dc;border-radius:10px;cursor:pointer;font-weight:700;background:#fff;min-width:0}
.opcao input{width:20px;height:20px;margin:0;accent-color:#000;flex:none}
.opcao:has(input:checked){border-color:#000;box-shadow:0 0 0 1px #000}
.opcao:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:2px}
.campo select:disabled{background:#f3f4f6;color:var(--cinza)}
.progresso-fixo{position:sticky;top:0;z-index:5;background:#fff;padding:12px 0 10px;margin-bottom:8px;border-bottom:1px solid var(--linha)}
.progresso-fixo .progresso{margin-bottom:0}
.questao{border:0;margin:0;min-width:0;transition:border-color .2s}
.questao.pendente{border-left:4px solid var(--vermelho-esc);padding-left:12px}
.falta{color:var(--vermelho-esc);font-weight:700;margin:14px 0 0}
.mensagem .icone-msg{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 0 14px}
.mensagem.ok .icone-msg{background:#f0fdf4;color:#15803d}.mensagem.info .icone-msg{background:#EEF5FC;color:var(--azul)}
.mensagem.alerta .icone-msg{background:#FFF6D6;color:#a16207}.mensagem.neutro .icone-msg{background:#f3f4f6;color:var(--cinza)}
.acoes-msg{margin:18px 0 0}
@media (max-width:600px){.dupla{grid-template-columns:1fr}.topo img{height:36px}.etapas{font-size:.78rem;gap:6px}.etapas li{gap:6px}}
/* 01/11/2026, lista de 1 a 18 aprovada: formulário em duas partes, seletor único com busca, tela Inscrição feita como comemoração,
   telas de aviso centralizadas (o ícone sozinho à esquerda não conversava com o texto, print do Fabiano), a prova volta onde parou. */
.parte{font:700 .8rem Montserrat,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--azul);margin:0 0 14px}
.botao.largo{width:100%}
.seletor{position:relative}
.seletor-campo{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;text-align:left;padding:12px 14px;border:1px solid #cfd6dc;border-radius:8px;background:#fff;color:var(--texto);cursor:pointer;min-width:0}
.seletor-campo:focus-visible{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.seletor-campo:disabled{background:#f3f4f6;color:var(--cinza);cursor:not-allowed}
.seletor-valor,.seletor-vazio{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seletor-vazio{color:var(--cinza)}
.seletor-seta{flex:none;width:10px;height:10px;border-right:2px solid var(--cinza);border-bottom:2px solid var(--cinza);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.seletor.aberto .seletor-seta{transform:rotate(-135deg) translateY(-1px)}
.seletor.aberto .seletor-campo{border-color:var(--azul);border-bottom-left-radius:0;border-bottom-right-radius:0}
.seletor-painel{border:1px solid var(--azul);border-top:0;border-radius:0 0 8px 8px;background:#fff;padding:8px}
.seletor-busca{width:100%;font:inherit;padding:10px 12px;border:1px solid #cfd6dc;border-radius:8px;margin-bottom:6px}
.seletor-busca:focus{outline:2px solid var(--azul);outline-offset:0;border-color:var(--azul)}
.seletor-lista{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.seletor-lista li{padding:10px 12px;border-radius:7px;cursor:pointer;line-height:1.35}
.seletor-lista li.ativo,.seletor-lista li:hover{background:#EEF5FC}
.seletor-lista li[aria-selected="true"]{font-weight:700;color:var(--azul)}
.seletor-nada{margin:6px 4px;color:var(--cinza);font-size:.92rem}
.comemora{position:relative;overflow:hidden;text-align:center}
.comemora .etapas{text-align:left}
.selo-ok{width:72px;height:72px;border-radius:50%;margin:6px auto 14px;display:flex;align-items:center;justify-content:center;background:#16a34a;color:#fff;box-shadow:0 0 0 8px #dcfce7;animation:selo .5s ease-out both}
@keyframes selo{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.destaque{font:700 1.15rem Montserrat,Arial,sans-serif;margin:-.2em 0 .3em}
.comemora .sub{margin-bottom:14px}
.fatos{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fatos li{display:inline-flex;align-items:center;gap:8px;background:#EEF5FC;border-radius:999px;padding:8px 14px;font-size:.95rem;line-height:1.3;text-align:left}
.fatos svg{flex:none;color:var(--azul)}
.comemora .botoes{justify-content:center}
.form-botao{display:flex;flex:1 1 220px}.form-botao .botao{flex:1}
.dica.centro{display:block;text-align:center;margin-top:14px}
.festa{position:absolute;inset:0;pointer-events:none}
.festa i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;opacity:0;animation:cai 1.6s ease-out .15s forwards}
.festa i:nth-child(3n){background:#0080F1}.festa i:nth-child(3n+1){background:#000}.festa i:nth-child(3n+2){background:#FBBC05}
.festa i:nth-child(1){left:6%}.festa i:nth-child(2){left:13%;animation-delay:.3s}.festa i:nth-child(3){left:20%;animation-delay:.05s}
.festa i:nth-child(4){left:27%;animation-delay:.4s}.festa i:nth-child(5){left:34%;animation-delay:.2s}.festa i:nth-child(6){left:41%;animation-delay:.5s}
.festa i:nth-child(7){left:48%;animation-delay:.1s}.festa i:nth-child(8){left:55%;animation-delay:.35s}.festa i:nth-child(9){left:62%;animation-delay:.25s}
.festa i:nth-child(10){left:69%;animation-delay:.45s}.festa i:nth-child(11){left:76%;animation-delay:.15s}.festa i:nth-child(12){left:83%;animation-delay:.55s}
.festa i:nth-child(13){left:90%;animation-delay:.3s}.festa i:nth-child(14){left:95%;animation-delay:.1s}
@keyframes cai{0%{opacity:0;transform:translateY(0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translateY(260px) rotate(320deg)}}
@media (prefers-reduced-motion:reduce){.festa{display:none}.selo-ok{animation:none}}
.mensagem{text-align:center}.mensagem .etapas{text-align:left}
.mensagem .icone-msg{margin:6px auto 14px}
.mensagem form{display:flex;justify-content:center}
.questao{scroll-margin-top:96px}
/* Olhando as fotos de 01/11: no celular os três destaques viram lista alinhada à esquerda, da mesma largura (centralizados e de tamanhos
   diferentes ficavam tortos); o selo de "tudo certo" é o mesmo na Inscrição feita e na Prova enviada. */
@media (max-width:600px){.fatos{flex-direction:column;align-items:stretch}.fatos li{border-radius:12px}}
.mensagem.ok .icone-msg{width:64px;height:64px;background:#16a34a;color:#fff;box-shadow:0 0 0 8px #dcfce7}

/* Uma opção só: aparece como texto, sem pedir clique (formulário, parte 1, 01/11/2026) */
/* elemento com o atributo hidden nunca aparece: o display de uma classe (como o .fixo abaixo) vencia o hidden e deixava uma caixa
   cinza vazia embaixo de cada seletor do formulário ([MEDIDO] 01/11/2026, fotos da etapa G) */
[hidden]{display:none!important}
.fixo{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border:1px solid #e3e8ec;border-radius:8px;background:#f7f9fa}
.fixo b{font-weight:700}.fixo .dica{font-size:.85rem}
.boas-vindas{margin:-6px 0 18px;padding:10px 14px;border-left:3px solid var(--azul);background:#f5f9fd;border-radius:0 8px 8px 0}

/* Inscrição que colide ("04", seção 3; 01/11/2026): a inscrição que existe ao lado da escolhida agora, e a tela do link com o que está e o
   que fica. Cada valor na sua coluna, quebra explícita em 600 px (no celular, uma embaixo da outra, com o rótulo da coluna antes). */
.duas-inscricoes{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch;margin:0 0 18px}
.duas-inscricoes.uma{grid-template-columns:minmax(0,1fr)}
.caixa-inscricao{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px;border:1px solid var(--linha);border-radius:12px;background:#fafafa}
.caixa-inscricao.nova{background:#EEF5FC;border-color:#cfe2f6}
.caixa-inscricao .rotulo{font-size:.85rem;color:var(--cinza)}
.caixa-inscricao b{font:700 1.05rem Montserrat,Arial,sans-serif;overflow-wrap:anywhere}
.caixa-inscricao .onde{font-size:.95rem}.caixa-inscricao .quando{font-size:.88rem;color:var(--cinza)}.caixa-inscricao .onde+.quando{margin-top:6px}
.seta-troca{align-self:center;color:var(--azul);display:flex}
.cartao h2{margin-top:6px}
.dica.voltar{margin:18px 0 0}.dica.voltar a{color:var(--azul);font-weight:700}
.troca{margin:0 0 18px;border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.troca-linha{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px 16px;border-top:1px solid var(--linha);align-items:baseline}
.troca-linha:first-child{border-top:0}
.troca-cab{background:#fafafa;font:700 .8rem Montserrat,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--cinza);padding-top:10px;padding-bottom:10px}
.troca-rotulo{font-weight:700}
.troca-de{color:var(--cinza);overflow-wrap:anywhere}
.troca-para{font-weight:700;overflow-wrap:anywhere}
.troca-igual{color:var(--cinza);font-size:.92rem}
.mudou{display:inline-block;margin:0 0 12px;padding:6px 14px;border-radius:10px;background:#EEF5FC;color:var(--azul-esc);font-size:.92rem;line-height:1.4}
@media (max-width:600px){
  .duas-inscricoes{grid-template-columns:minmax(0,1fr)}
  .seta-troca{justify-self:center;transform:rotate(90deg)}
  .troca-cab{display:none}
  .troca-linha{grid-template-columns:minmax(0,1fr);gap:2px}
  .troca-linha:nth-child(2){border-top:0}
  /* rótulo pequeno em cima do valor, como nas caixas da inscrição: o valor longo (e-mail) fica com a largura toda e não quebra no meio
     ([MEDIDO] 01/11/2026: com o rótulo ao lado, "exemplo.com" partia em "exemplo.co" e "m") */
  .troca-de,.troca-para,.troca-igual{display:block}
  .troca-de::before,.troca-para::before,.troca-igual::before{content:attr(data-r);display:block;margin-top:6px;font-weight:400;color:var(--cinza);font-size:.8rem}
}