/* Banco de Talentos · BDL — o formulário do colaborador (celular primeiro), nas cores do logo:
   o azul-índigo das letras e o vermelho da flecha */
:root {
  --fundo: #F1F0F7; --cartao: #FFFFFF; --texto: #1C1838; --suave: #5A5675; --leve: #8C88A3;
  --borda: #E0DDEB; --campo: #F8F7FC;
  --indigo: #2B1D6B; --indigo2: #3E2F86; --acento: #2B1D6B; --acentoSuave: #ECE9F7;
  --marca: #E3001B; --marcaSuave: #FDE8EA;
  --botao1: #4A3A9E; --botao2: #2B1D6B; --botaoTexto: #FFFFFF;
  --verde: #18935A; --verdeSuave: #E5F6EE; --erro: #C4262E; --erroSuave: #FCEBEC;
  --sombra: 0 10px 30px rgba(43, 29, 107, .10), 0 2px 6px rgba(43, 29, 107, .06);
  --raio: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0E0B22; --cartao: #1A1538; --texto: #ECEAF7; --suave: #B4AFCF; --leve: #807A9E;
    --borda: #2E2853; --campo: #130F2C; --acento: #A99BFF; --acentoSuave: #262056; --marcaSuave: #3A0F18;
    --botao1: #5B49C9; --botao2: #3E2F86; --verdeSuave: #0F2A1E; --erro: #FF6B6B; --erroSuave: #3A1418;
    --sombra: 0 10px 30px rgba(0, 0, 0, .4);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; background: var(--fundo); color: var(--texto);
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
}
button, input, textarea { font: inherit; color: inherit; }

/* o fundo vivo, nas cores da marca */
.fundo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bolha { position: absolute; border-radius: 50%; filter: blur(70px); animation: flutua 18s ease-in-out infinite alternate; }
.b1 { width: 340px; height: 340px; background: #4A3A9E; top: -140px; right: -110px; opacity: .28; }
.b2 { width: 280px; height: 280px; background: #E3001B; bottom: -120px; left: -130px; animation-delay: -6s; opacity: .12; }
.b3 { width: 220px; height: 220px; background: #2B1D6B; top: 45%; left: 60%; animation-delay: -12s; opacity: .14; }
@keyframes flutua { to { transform: translate(40px, 60px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .bolha { animation: none; } }

/* o topo: branco, com o logo de verdade e a faixa índigo → vermelho da flecha */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: #FFFFFF; color: #1C1838; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 12px rgba(43, 29, 107, .08); }
.topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #2B1D6B 0%, #3E2F86 55%, #E3001B 100%); }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.logo-img { height: 38px; width: auto; flex: none; display: block; }
.marca small { display: block; font-size: 11.5px; color: #5A5675; font-weight: 600; line-height: 1.25; padding-left: 10px; border-left: 2px solid #E0DDEB; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) { .marca small { display: none; } .logo-img { height: 34px; } }
.topo-dir { display: flex; align-items: center; gap: 8px; flex: none; }
.salvo { font-size: 12px; color: #5A5675; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
@media (max-width: 460px) { .salvo .txt { display: none; } }
.pontinho { width: 7px; height: 7px; border-radius: 50%; background: #18935A; animation: pulso 2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(24, 147, 90, .5); } 70% { box-shadow: 0 0 0 7px rgba(24, 147, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(24, 147, 90, 0); } }
.idioma { display: flex; background: #F1F0F7; border-radius: 10px; padding: 3px; border: 1px solid #E0DDEB; }
.idioma button { border: 0; background: transparent; color: #5A5675; font-weight: 800; font-size: 12.5px; padding: 0 10px; min-height: 32px; min-width: 40px; border-radius: 8px; cursor: pointer; transition: all .2s; }
.idioma button.sel { background: #2B1D6B; color: #fff; box-shadow: 0 2px 8px rgba(43, 29, 107, .35); }

/* o progresso */
.progresso { position: sticky; top: 61px; z-index: 15; background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(10px); padding: 10px 16px 8px; }
.barra { height: 6px; border-radius: 6px; background: var(--borda); overflow: hidden; max-width: 680px; margin: 0 auto; }
.barra span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #2B1D6B, #4A3A9E 60%, #E3001B); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.progresso ol { list-style: none; display: flex; justify-content: space-between; padding: 0; margin: 8px auto 0; max-width: 680px; }
.progresso li { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--leve); flex: 1; transition: color .3s; cursor: default; }
.progresso li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--cartao); border: 2px solid var(--borda); transition: all .3s; }
.progresso li em { font-style: normal; }
.progresso li.atual { color: var(--texto); font-weight: 700; }
.progresso li.atual span { border-color: #2B1D6B; background: #2B1D6B; color: #fff; transform: scale(1.12); box-shadow: 0 0 0 4px rgba(227, 0, 27, .18); }
.progresso li.feito { cursor: pointer; }
.progresso li.feito span { border-color: var(--verde); background: var(--verde); color: #fff; font-size: 0; }
.progresso li.feito span::after { content: '✓'; font-size: 13px; }

/* o palco e os passos */
main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 16px 16px 120px; }
.passo { display: none; }
.passo.ativo { display: block; animation: entra .45s cubic-bezier(.2, .8, .2, 1); }
.passo.ativo.voltando { animation-name: entraVolta; }
@keyframes entra { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes entraVolta { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px 18px; border: 1px solid var(--borda); }
.cabecalho { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.cabecalho .num { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 18px; background: linear-gradient(135deg, #3E2F86, #2B1D6B); color: #fff; position: relative; box-shadow: 0 6px 14px rgba(43, 29, 107, .3); }
.cabecalho .num::after { content: ''; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: #E3001B; border: 2px solid var(--cartao); }
.cabecalho h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.cabecalho p { margin: 4px 0 0; color: var(--suave); font-size: 14px; line-height: 1.45; }
.cabecalho p b { color: var(--texto); }

/* boas-vindas */
.boasvindas { padding: 0 0 24px; overflow: hidden; }
.boasvindas > *:not(.faixa-logo) { margin-left: 20px; margin-right: 20px; }
.faixa-logo { background: #FFFFFF; padding: 26px 20px 20px; text-align: center; border-bottom: 1px solid #ECEAF3; position: relative; margin-bottom: 20px; }
.faixa-logo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: linear-gradient(90deg, #2B1D6B, #4A3A9E 60%, #E3001B); }
.faixa-logo img { width: min(240px, 70%); height: auto; display: inline-block; }
.selo-topo { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--marca); background: var(--marcaSuave); padding: 6px 12px; border-radius: 30px; }
@media (prefers-color-scheme: dark) { .selo-topo { color: #FF7A86; } }
.boasvindas h1 { font-size: 30px; line-height: 1.15; margin: 14px 20px 10px; letter-spacing: -.5px; color: var(--acento); }
@media (prefers-color-scheme: dark) { .boasvindas h1 { color: var(--texto); } }
.lead { font-size: 15.5px; line-height: 1.55; color: var(--suave); margin: 0 0 18px; }
.lead b { color: var(--texto); }
.beneficios { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.beneficios li { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--campo); border: 1px solid var(--borda); }
.beneficios span { font-size: 22px; }
.beneficios b { display: block; font-size: 14.5px; }
.beneficios small { color: var(--suave); font-size: 12.5px; }
.retomar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--acentoSuave); border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); margin-bottom: 14px; }
.retomar b { display: block; font-size: 14px; }
.retomar small { color: var(--suave); font-size: 12.5px; }

/* botões */
.botao { border: 0; border-radius: 14px; min-height: 52px; padding: 0 20px; font-weight: 700; font-size: 15.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s, box-shadow .2s, background .2s, opacity .2s; }
.botao:active { transform: scale(.97); }
.botao.principal { background: linear-gradient(135deg, var(--botao1), var(--botao2)); color: var(--botaoTexto); box-shadow: 0 8px 20px rgba(43, 29, 107, .35); position: relative; overflow: hidden; }
.botao.principal::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 5px; background: #E3001B; }
.botao.principal:hover { box-shadow: 0 10px 26px rgba(43, 29, 107, .5); }
.botao.secundario { background: var(--cartao); color: var(--texto); border: 1.5px solid var(--borda); }
.botao.grande { width: 100%; min-height: 58px; font-size: 17px; }
.botao[disabled] { opacity: .65; pointer-events: none; }
.botao .seta { transition: transform .2s; }
.botao:hover .seta { transform: translateX(4px); }
.link { background: none; border: 0; color: var(--acento); font-weight: 700; cursor: pointer; padding: 8px; min-height: 44px; }
.girando { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* rodapé com os botões */
.rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--cartao) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--borda); justify-content: center; }
.rodape .botao { flex: 1; max-width: 330px; }
.rodape #voltar { flex: 0 0 auto; }

/* campos com o rótulo que flutua */
.campo { position: relative; margin-bottom: 16px; }
.campo input { width: 100%; height: 58px; border-radius: 14px; border: 1.5px solid var(--borda); background: var(--campo); padding: 22px 44px 6px 14px; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.campo label { position: absolute; left: 15px; top: 18px; font-size: 15.5px; color: var(--leve); pointer-events: none; transition: all .18s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 60px); }
.campo label .op { font-size: 12px; }
.campo input:focus { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent); background: var(--cartao); }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label, .campo.data label { top: 8px; font-size: 11.5px; font-weight: 700; color: var(--acento); letter-spacing: .2px; }
.campo .ok { position: absolute; right: 14px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--verde); transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.campo .ok::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 800; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; }
.campo.valido .ok { transform: scale(1); }
.campo.valido input { border-color: color-mix(in srgb, var(--verde) 55%, var(--borda)); }
.campo.data input { padding-right: 14px; }
.campo.data .ok { right: 46px; }
.erro { display: block; color: var(--erro); font-size: 12.5px; font-weight: 600; min-height: 0; max-height: 0; overflow: hidden; transition: max-height .25s, margin .25s; }
.erro:not(:empty)::before { content: '⚠ '; }
.invalido .erro, .erro.solto.mostra { max-height: 40px; margin-top: 6px; }
.invalido input, .invalido textarea, .invalido .tags-caixa { border-color: var(--erro) !important; background: var(--erroSuave); }
.invalido { animation: treme .4s; }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.dupla { display: grid; gap: 0 12px; }
@media (min-width: 560px) { .dupla { grid-template-columns: 1fr 1fr; } }
.casa { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--acentoSuave); color: var(--acento); font-size: 13.5px; font-weight: 700; animation: surge .4s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes surge { from { opacity: 0; transform: translateY(-6px) scale(.95); } to { opacity: 1; transform: none; } }

/* as áreas (cartões para tocar) */
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 560px) { .areas { grid-template-columns: 1fr 1fr 1fr; } }
.area { position: relative; text-align: left; border: 1.5px solid var(--borda); background: var(--campo); border-radius: 16px; padding: 14px 12px 12px; cursor: pointer; min-height: 112px; display: flex; flex-direction: column; gap: 8px; transition: all .2s; }
.area:hover { border-color: color-mix(in srgb, var(--acento) 50%, var(--borda)); transform: translateY(-2px); }
.area .ic { font-size: 26px; line-height: 1; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.area b { font-size: 13.5px; line-height: 1.3; }
.area .marca-area { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--borda); background: var(--cartao); transition: all .2s; }
.area.sel { border-color: var(--acento); background: var(--acentoSuave); box-shadow: 0 6px 18px rgba(43, 29, 107, .18); }
.area.sel .ic { transform: scale(1.2) rotate(-6deg); }
.area.sel .marca-area { background: #2B1D6B; border-color: #2B1D6B; }
.area.sel .marca-area::after { content: '✓'; color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; height: 100%; }
.area.sel::before { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1.5px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2B1D6B, #E3001B); }
.outro { margin-top: 14px; animation: surge .35s; }
.contador-areas { margin: 14px 0 0; font-size: 13px; color: var(--suave); text-align: center; }
.contador-areas b { color: var(--acento); }

/* perguntas de texto */
.pergunta { margin-bottom: 26px; }
.pergunta:last-child { margin-bottom: 0; }
.titulo { display: block; font-weight: 700; font-size: 15px; line-height: 1.4; margin-bottom: 10px; }
.ajuda { margin: -4px 0 10px; color: var(--suave); font-size: 13px; }
kbd { font-family: inherit; font-size: 11.5px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--borda); background: var(--campo); }
textarea { width: 100%; border-radius: 14px; border: 1.5px solid var(--borda); background: var(--campo); padding: 13px 14px; font-size: 16px; line-height: 1.5; resize: none; outline: none; min-height: 110px; transition: border-color .2s, box-shadow .2s, background .2s; display: block; }
textarea[rows="2"] { min-height: 70px; margin-top: 10px; }
textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent); background: var(--cartao); }
textarea::placeholder, .tags input::placeholder { color: var(--leve); }
.ideias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 2px; scrollbar-width: none; align-items: center; }
.ideias::-webkit-scrollbar { display: none; }
.ideias span { font-size: 12px; color: var(--leve); font-weight: 600; flex: none; }
.ideias button { flex: none; border: 1px dashed color-mix(in srgb, var(--acento) 55%, var(--borda)); background: transparent; color: var(--acento); border-radius: 30px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: 36px; }
.ideias button:active { transform: scale(.95); }
.medidor { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.trilho { flex: 1; height: 5px; border-radius: 5px; background: var(--borda); overflow: hidden; }
.trilho i { display: block; height: 100%; width: 0; background: var(--erro); border-radius: 5px; transition: width .3s, background .3s; }
.medidor small { font-size: 12px; color: var(--suave); font-weight: 600; white-space: nowrap; min-width: 92px; text-align: right; }

/* etiquetas (tags) */
.tags { margin-bottom: 14px; }
.tags-titulo { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.tags-titulo small { color: var(--leve); font-weight: 500; }
.tags-caixa { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--borda); background: var(--campo); min-height: 52px; align-items: center; cursor: text; transition: border-color .2s, box-shadow .2s; }
.tags-caixa:focus-within { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent); }
.tags-lista { display: contents; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: #2B1D6B; color: #fff; border-radius: 30px; padding: 6px 6px 6px 12px; font-size: 13px; font-weight: 600; animation: surge .3s cubic-bezier(.3, 1.4, .5, 1); }
@media (prefers-color-scheme: dark) { .tag { background: #4A3A9E; } }
.tag button { border: 0; background: rgba(255, 255, 255, .2); color: inherit; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center; }
.tag button:hover { background: #E3001B; }
.tags input { flex: 1; min-width: 140px; border: 0; outline: 0; background: transparent; font-size: 15px; padding: 6px; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sugestoes button { border: 1px solid var(--borda); background: var(--cartao); border-radius: 30px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; min-height: 34px; color: var(--suave); transition: all .15s; }
.sugestoes button::before { content: '+ '; color: var(--marca); font-weight: 800; }
.sugestoes button:hover { border-color: var(--acento); color: var(--texto); }
.sugestoes button.usada { display: none; }

/* chips de escolha única */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1.5px solid var(--borda); background: var(--campo); border-radius: 30px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; min-height: 44px; transition: all .2s; }
.chips button.sel { border-color: #2B1D6B; background: #2B1D6B; color: #fff; box-shadow: 0 4px 12px rgba(43, 29, 107, .3); }

/* revisão */
.revisao { display: grid; gap: 10px; margin-bottom: 20px; }
.rev { border: 1px solid var(--borda); border-left: 4px solid #2B1D6B; border-radius: 14px; padding: 12px 14px; background: var(--campo); }
@media (prefers-color-scheme: dark) { .rev { border-left-color: var(--acento); } }
.rev-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rev-cab b { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--acento); }
.rev-cab .link { min-height: 32px; padding: 4px 8px; font-size: 13px; color: var(--marca); }
@media (prefers-color-scheme: dark) { .rev-cab .link { color: #FF7A86; } }
.rev dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13.5px; }
.rev dt { color: var(--leve); }
.rev dd { margin: 0; font-weight: 600; word-break: break-word; }
.rev p { margin: 4px 0; font-size: 13.5px; line-height: 1.45; color: var(--suave); }
.rev p b { color: var(--texto); }
.pilulas { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.pilulas span { font-size: 12px; padding: 4px 9px; border-radius: 20px; background: var(--acentoSuave); color: var(--texto); font-weight: 600; }

/* declaração */
.declaracao { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1.5px solid var(--borda); background: var(--campo); cursor: pointer; font-size: 14px; line-height: 1.5; transition: all .2s; }
.declaracao input { position: absolute; opacity: 0; pointer-events: none; }
.caixinha { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--borda); background: var(--cartao); margin-top: 1px; transition: all .2s; display: grid; place-items: center; }
.declaracao input:checked ~ .caixinha { background: var(--verde); border-color: var(--verde); }
.declaracao input:checked ~ .caixinha::after { content: '✓'; color: #fff; font-weight: 800; }
.declaracao:has(input:checked) { border-color: var(--verde); background: var(--verdeSuave); }
.declaracao.invalido { border-color: var(--erro); }

/* assinatura */
.assinatura { margin-top: 20px; }
.assin-cab { display: flex; justify-content: space-between; align-items: baseline; }
.data-assin { font-size: 13px; color: var(--suave); font-weight: 600; }
.quadro { position: relative; height: 190px; border-radius: 16px; border: 2px dashed #C9C4DE; background: #FFFFFF; overflow: hidden; touch-action: none; transition: border-color .2s; }
.quadro.assinado { border-style: solid; border-color: var(--verde); }
.assinatura.invalido .quadro { border-color: var(--erro); }
.quadro canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.dica-assin { position: absolute; inset: 0; display: grid; place-items: center; color: #9A95B3; font-size: 15px; font-weight: 600; pointer-events: none; transition: opacity .3s; }
.quadro.assinado .dica-assin { opacity: 0; }
.linha-assin { position: absolute; left: 20px; right: 20px; bottom: 42px; border-bottom: 1.5px solid #CFCADF; pointer-events: none; }
.assin-pe { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 13px; color: var(--suave); }

/* sucesso */
.sucesso { text-align: center; padding: 36px 20px; }
.trofeu { font-size: 64px; animation: pula 1s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pula { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
.sucesso h2 { font-size: 26px; margin: 10px 0; color: var(--acento); }
@media (prefers-color-scheme: dark) { .sucesso h2 { color: var(--texto); } }
.protocolo { display: inline-flex; flex-direction: column; padding: 14px 26px; border-radius: 16px; background: linear-gradient(135deg, #3E2F86, #2B1D6B); color: #fff; margin: 6px 0 16px; position: relative; overflow: hidden; }
.protocolo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #E3001B; }
.protocolo small { color: #CFC9F2; font-size: 12px; }
.protocolo b { font-size: 26px; letter-spacing: 3px; color: #fff; font-variant-numeric: tabular-nums; }
.leve { color: var(--leve); font-size: 13.5px; line-height: 1.5; }
.logo-fim { width: 130px; margin-top: 14px; background: #fff; border-radius: 12px; padding: 8px 12px; }

/* aviso que aparece embaixo */
.aviso { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 30px); opacity: 0; z-index: 50; background: #2B1D6B; color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: var(--sombra); transition: all .3s; max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.aviso.mostra { opacity: 1; transform: translate(-50%, 0); }
.aviso.ruim { background: #C4262E; }

#confete { position: fixed; inset: 0; pointer-events: none; z-index: 60; width: 100%; height: 100%; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }