/* Tem Vaga — estilo compartilhado (tema claro, cinza e azul-marinho) */
:root{
  --fundo:#EDF0F4; --superficie:#FFFFFF; --marinho:#13254A; --marinho-2:#1E3A6E; --azul:#2F6DB5;
  --azul-claro:#CFE3F7; --azul-gelo:#E8F1FB; --texto:#172033; --grafite:#3B4558; --cinza:#687387;
  --linha:#D7DDE6; --verde:#1D8A52; --verde-gelo:#E3F4EA; --vermelho:#B4321C; --vermelho-gelo:#FBE9E5;
  --display:'Bricolage Grotesque', system-ui, sans-serif; --texto-f:'Figtree', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texto-f);background:var(--fundo);color:var(--texto);font-size:16px;line-height:1.45;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 120px}

/* topo */
.topo{background:var(--marinho);color:#fff}
.topo .wrap{padding-top:16px;padding-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-1px;line-height:1;text-decoration:none;color:#fff;display:inline-flex;align-items:baseline;gap:1px}
.marca i{width:8px;height:8px;border-radius:50%;background:var(--azul-claro);display:inline-block;margin-left:2px}
.marca small{display:block;font-family:var(--texto-f);font-weight:600;font-size:12px;letter-spacing:.2px;color:var(--azul-claro)}
.topo-link{font-size:14px;font-weight:700;color:var(--azul-claro);text-decoration:none;border:2px solid rgba(207,227,247,.4);padding:7px 12px;border-radius:999px}

h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,8vw,40px);line-height:1.04;letter-spacing:-1.2px;margin:28px 0 8px;color:var(--marinho)}
.sub{color:var(--grafite);margin-bottom:22px}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 20px;border-radius:12px;background:var(--marinho);color:#fff;font-weight:700;font-size:17px;text-decoration:none;transition:transform .1s, background .15s}
.btn:hover{background:var(--marinho-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn.sec{background:var(--superficie);color:var(--marinho);border:2px solid var(--marinho)}
.btn.zap{background:var(--verde)}
.erro{background:var(--vermelho-gelo);color:var(--vermelho);border-radius:10px;padding:12px 14px;font-weight:600;font-size:15px;margin:12px 0}
.aviso{background:var(--azul-gelo);color:var(--marinho);border-radius:10px;padding:12px 14px;font-weight:600;font-size:15px;margin:12px 0}
.carregando{display:flex;align-items:center;gap:10px;font-weight:600;margin:20px 0;color:var(--marinho)}
.carregando i{width:18px;height:18px;border:3px solid var(--marinho);border-right-color:transparent;border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.voltar{display:inline-flex;font-weight:700;margin:22px 0 0;text-decoration:underline;text-underline-offset:3px;color:var(--marinho)}
.rotulo{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--grafite);margin:0 0 8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}