/* Estilo da tela de cadastro (cadastro.html).
   Mesma convenção das páginas legais: fontes servidas do próprio domínio,
   nenhuma requisição a terceiros além do widget anti-robô da Cloudflare. */
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 100 900;
  font-stretch: 100%; font-display: swap;
  src: url('fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 100 900;
  font-stretch: 100%; font-display: swap;
  src: url('fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --brand:#0E62FF; --brand-dark:#0047B2; --ink-900:#001529; --ink-700:#4a5568;
  --ink-500:#666; --line:#D9D9D9; --surface:#F0F2F5;
  --danger:#8f1d14; --danger-bg:#fdeceb; --ok:#0d5c33; --ok-bg:#e8f6ee;
  --font-sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-sans); color:var(--ink-900); background:var(--surface); line-height:1.6; }

.signup-top { background:linear-gradient(-66deg,#002147 -9%,#0047B2 88%); color:#fff; padding:28px 0 72px; }
.signup-wrap { max-width:820px; margin:0 auto; padding:0 24px; }
.signup-top a.back { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; font-size:20px; opacity:.9; }
.signup-top a.back:hover { opacity:1; }
.signup-top h1 { margin:40px 0 8px; font-size:40px; line-height:1.15; letter-spacing:-.01em; }
.signup-top p.lead { margin:0; font-size:16px; color:rgba(255,255,255,.78); max-width:520px; }

main.signup-wrap { padding-bottom:80px; }
.signup-card { background:#fff; border-radius:14px; box-shadow:0 8px 28px rgba(0,21,41,.10); padding:40px; margin-top:-40px; }

.signup-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.signup-grid .full { grid-column:1 / -1; }
.signup-legend { grid-column:1 / -1; margin:14px 0 0; font:700 13px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); }
.signup-legend:first-child { margin-top:0; }

.field { display:flex; flex-direction:column; gap:6px; }
.field label { font:500 14px/1.2 var(--font-sans); color:var(--ink-700); }
.field input, .field select { font:400 16px/1.4 var(--font-sans); color:var(--ink-900); padding:11px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; transition:border-color .18s, box-shadow .18s; }
.field input:focus, .field select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,98,255,.15); }
.field .hint { font:400 12px/1.4 var(--font-sans); color:var(--ink-500); }

.signup-terms { display:flex; gap:10px; align-items:flex-start; font:400 14px/1.5 var(--font-sans); color:var(--ink-700); }
.signup-terms input { margin-top:3px; flex-shrink:0; width:16px; height:16px; }
.signup-terms a { color:var(--brand); }

/* Aviso de coleta exibido junto ao formulario — LGPD Art. 9-: o titular deve
   ser informado da finalidade, da base legal e dos seus direitos no momento
   em que os dados sao coletados, e nao apenas na politica linkada. */
.signup-privacy { border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:0 10px 10px 0; background:var(--surface); padding:16px 20px; }
.signup-privacy > p { margin:0; font:400 14px/1.6 var(--font-sans); color:var(--ink-700); }
.signup-privacy strong { color:var(--ink-900); font-weight:700; }
.signup-privacy a { color:var(--brand); }
.signup-privacy details { margin-top:10px; }
.signup-privacy summary { cursor:pointer; font:500 14px/1.5 var(--font-sans); color:var(--brand); list-style:none; display:inline-flex; align-items:center; gap:6px; }
.signup-privacy summary::-webkit-details-marker { display:none; }
.signup-privacy summary::after { content:"BE"; font-size:11px; transition:transform .18s; }
.signup-privacy details[open] summary::after { transform:rotate(180deg); }
.signup-privacy dl { margin:14px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font:400 13px/1.55 var(--font-sans); }
.signup-privacy dt { font-weight:700; color:var(--ink-900); }
.signup-privacy dd { margin:0; color:var(--ink-700); }
@media (max-width:560px) { .signup-privacy dl { grid-template-columns:1fr; gap:2px 0; } .signup-privacy dd { margin-bottom:8px; } }

.signup-feedback { margin:0; padding:12px 14px; border-radius:8px; font:500 14px/1.5 var(--font-sans); }
.signup-feedback.error { background:var(--danger-bg); color:var(--danger); }
.signup-feedback.success { background:var(--ok-bg); color:var(--ok); }

.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; padding:14px 28px; border-radius:999px; background:var(--brand); color:#fff; font:700 16px/1 var(--font-sans); transition:background .2s; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-primary[disabled] { opacity:.6; cursor:not-allowed; }

.signup-foot { border-top:1px solid var(--line); margin-top:40px; padding-top:20px; font-size:14px; color:var(--ink-500); }
.signup-foot a { color:var(--brand); }

@media (max-width: 720px) {
  .signup-grid { grid-template-columns:1fr; }
  .signup-card { padding:28px 22px; margin-top:-24px; }
  .signup-top h1 { font-size:30px; }
}

/* ==========================================================================
   Tela de conclusao
   Depois que a conta e criada nao ha mais nada a fazer no formulario, entao a
   pagina inteira vira a confirmacao: mesmo degrade da hero da landing, cartao
   de vidro e a unica acao seguinte (entrar no sistema) no centro.
   As animacoes mexem so em transform/opacity (o compositor resolve, sem
   layout) e caem para nada em prefers-reduced-motion.
   ========================================================================== */
.signup-done {
  --grad-hero:linear-gradient(-66deg,#002147 -9%,#0047B2 88%);
  --grad-brand:linear-gradient(219deg,#4D8FFF 9%,#0E62FF 112%);
  --sky:#9BC4FF;
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* Springs geradas pelo Motion: 0,28 de bounce no cartao (chega firme) e
     0,6 no icone — o overshoot e o "pop" do check. */
  --spring-card:linear(0, 0.0378, 0.1304, 0.2523, 0.3847, 0.5147, 0.6339, 0.7376, 0.8239, 0.8927, 0.9453, 0.9835, 1.0096, 1.026, 1.0349, 1.0382, 1.0377, 1.0347, 1.0303, 1.0253, 1.0202, 1.0155, 1.0113, 1.0078, 1.0049, 1.0027, 1.0011, 0.9999, 0.9992, 1);
  --spring-pop:linear(0, 0.0479, 0.1721, 0.344, 0.5367, 0.728, 0.9005, 1.0427, 1.1486, 1.2166, 1.2492, 1.2515, 1.2302, 1.1927, 1.146, 1.0966, 1.0497, 1.0089, 0.9766, 0.9538, 0.9405, 0.9356, 0.9378, 0.9452, 0.9559, 0.9683, 0.9807, 0.992, 1.0015, 1.0087, 1.0134, 1.0159, 1.0163, 1.0151, 1.0128, 1.0099, 1.0067, 1.0036, 1.0009, 0.9988, 0.9972, 0.9963, 1);

  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:40px 24px; overflow:auto; color:#fff; background:var(--grad-hero);
  animation:doneVeil .45s ease-out both;
}
.signup-done[hidden] { display:none; }
body.is-done { overflow:hidden; }

/* Fundo: dois halos que respiram, malha tecnica mascarada e um facho que
   varre a tela devagar. Os gradientes ja nascem suaves — nenhum filter:blur
   animado, que forcaria rasterizacao a cada frame. */
.done-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.done-orb { position:absolute; border-radius:50%; will-change:transform; }
.done-orb-1 { width:860px; height:860px; top:-320px; left:-220px; background:radial-gradient(circle,rgba(77,143,255,.55),rgba(77,143,255,0) 68%); animation:orbDrift 24s ease-in-out infinite alternate; }
.done-orb-2 { width:720px; height:720px; right:-240px; bottom:-300px; background:radial-gradient(circle,rgba(14,98,255,.5),rgba(14,98,255,0) 70%); animation:orbDrift2 30s ease-in-out infinite alternate; }
.done-grid {
  position:absolute; inset:-70px;
  background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 44%,#000 12%,transparent 74%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 44%,#000 12%,transparent 74%);
  will-change:transform; animation:gridPan 26s linear infinite;
}
.done-bg::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 62% 58% at 50% 48%,transparent 20%,rgba(0,10,30,.62) 100%); }
.done-scan { position:absolute; left:0; right:0; top:-260px; height:260px; background:linear-gradient(180deg,transparent,rgba(122,170,255,.14),transparent); will-change:transform; animation:scanSweep 11s linear infinite 1.2s; }

/* Cartao de vidro, no mesmo espirito do hero-card da landing. */
.signup-done-card {
  position:relative; z-index:1; width:100%; max-width:562px; margin:auto; padding:52px 44px 40px;
  text-align:center; border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04)),rgba(0,20,48,.34);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 34px 90px -24px rgba(0,10,30,.7), inset 0 1px 0 rgba(255,255,255,.18);
  animation:doneCardIn 900ms var(--spring-card) both .08s;
}
/* Feixe que percorre a borda do cartao: um quadrado com conic-gradient girando
   dentro de uma mascara de 1px. Girar transform e trabalho de compositor —
   animar o angulo do gradiente repintaria a borda inteira a cada frame. */
.done-frame { position:absolute; inset:0; padding:1px; border-radius:inherit; overflow:hidden; pointer-events:none; box-sizing:border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.done-frame i { position:absolute; top:50%; left:50%; width:150%; aspect-ratio:1; margin:-75% 0 0 -75%;
  background:conic-gradient(from 0deg,transparent 0 68%,rgba(155,196,255,.85) 84%,rgba(255,255,255,.95) 90%,transparent 100%);
  will-change:transform; animation:ringSpin 9s linear infinite; }

/* Fio de luz no topo do cartao. */
.signup-done-card::before { content:""; position:absolute; top:-1px; left:14%; right:14%; height:1px; background:linear-gradient(90deg,transparent,rgba(155,196,255,.9),transparent); }

/* Icone: anel em conic-gradient girando, disco com brilho interno, ondas de
   pulso e o check desenhado por stroke-dashoffset. */
.done-icon { position:relative; display:flex; align-items:center; justify-content:center; width:132px; height:132px; margin:0 auto 26px; animation:doneIconIn 1300ms var(--spring-pop) both .22s; }
.done-ring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,rgba(155,196,255,0) 0 52%,#4D8FFF 76%,#DCE9FF 90%,rgba(155,196,255,0) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:ringSpin 5s linear infinite; }
.done-ring-inner { position:absolute; inset:13px; border-radius:50%; border:1px dashed rgba(155,196,255,.35); animation:ringSpin 14s linear infinite reverse; }
.done-disc { position:absolute; inset:22px; border-radius:50%; background:radial-gradient(circle at 50% 32%,rgba(77,143,255,.55),rgba(0,33,71,.75)); box-shadow:0 0 46px rgba(14,98,255,.55), inset 0 0 28px rgba(155,196,255,.3); }
.done-pulse { position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(155,196,255,.5); animation:pulseOut 3s var(--ease-out) infinite .6s; }
.done-pulse-2 { animation-delay:2.1s; }
.done-icon svg { position:relative; width:132px; height:132px; overflow:visible; filter:drop-shadow(0 2px 10px rgba(0,20,50,.45)); }
.done-check { stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; fill:none; stroke-dasharray:58; stroke-dashoffset:58; animation:checkDraw .42s var(--ease-out) both .52s; }

/* Estilhacos do "pop": um por angulo, so na entrada. */
.done-spark { position:absolute; top:50%; left:50%; width:3px; height:13px; margin:-6.5px 0 0 -1.5px; border-radius:2px; background:linear-gradient(180deg,#EAF2FF,rgba(155,196,255,0)); box-shadow:0 0 8px rgba(155,196,255,.7); opacity:0; animation:spark 1s var(--ease-out) both; animation-delay:calc(.56s + var(--d)); }

.done-eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0 0 18px; padding:7px 16px; border-radius:999px; background:rgba(77,143,255,.16); border:1px solid rgba(155,196,255,.32); color:#CFE1FF; font:700 12px/1 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; }
.done-eyebrow i { width:7px; height:7px; border-radius:50%; background:#7FB2FF; box-shadow:0 0 10px #4D8FFF; animation:dotBlink 2.4s ease-in-out infinite; }

.signup-done-card h2 {
  outline:none; margin:0 0 14px; font:700 36px/1.15 var(--font-sans); letter-spacing:-.02em;
  background:linear-gradient(100deg,#fff 20%,var(--sky) 46%,#fff 72%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.done-sub { margin:0 0 26px; font:400 16px/1.6 var(--font-sans); color:rgba(255,255,255,.74); }
.done-sub strong { color:#fff; font-weight:500; }

.done-steps { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; list-style:none; margin:0 0 32px; padding:0; }
.done-steps li { display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font:500 12.5px/1 var(--font-sans); color:rgba(255,255,255,.85); white-space:nowrap; }
.done-steps svg { color:var(--sky); flex-shrink:0; }

.done-cta { position:relative; display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:999px; overflow:hidden; background:var(--grad-brand); color:#fff; font:700 16px/1 var(--font-sans); text-decoration:none; box-shadow:0 16px 36px -12px rgba(14,98,255,.95); transition:transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.done-cta:hover { transform:translateY(-2px); box-shadow:0 22px 44px -12px rgba(77,143,255,1); }
.done-cta:active { transform:translateY(0); }
.done-cta svg { transition:transform .22s var(--ease-out); }
.done-cta:hover svg { transform:translateX(4px); }
.done-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; }
/* Brilho que atravessa o botao de tempos em tempos, chamando o clique. */
.done-cta i { position:absolute; top:0; bottom:0; left:0; width:36%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:translateX(-180%) skewX(-18deg); animation:sheen 4.5s var(--ease-out) infinite 2.4s; }

.done-back { display:block; width:-moz-fit-content; width:fit-content; margin:20px auto 0; font:400 14px/1 var(--font-sans); color:rgba(255,255,255,.62); text-decoration:none; transition:color .2s; }
.done-back:hover { color:#fff; }

/* Entrada em cascata do conteudo, depois do cartao pousar. */
.done-eyebrow, .signup-done-card h2, .done-sub, .done-steps li, .done-cta, .done-back {
  animation:doneUp .55s var(--ease-out) both;
}
.done-eyebrow { animation-delay:.6s; }
.signup-done-card h2 { animation:doneUp .55s var(--ease-out) .68s both, doneShine 7s linear 1.6s infinite; }
.done-sub { animation-delay:.76s; }
.done-steps li:nth-child(1) { animation-delay:.86s; }
.done-steps li:nth-child(2) { animation-delay:.94s; }
.done-steps li:nth-child(3) { animation-delay:1.02s; }
.done-cta { animation-delay:1.12s; }
.done-back { animation-delay:1.22s; }

@keyframes doneVeil { from { opacity:0; } to { opacity:1; } }
@keyframes doneCardIn { from { opacity:0; transform:translateY(26px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes doneIconIn { from { transform:scale(.3); } to { transform:scale(1); } }
@keyframes doneUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes ringSpin { to { transform:rotate(360deg); } }
@keyframes pulseOut { 0% { transform:scale(.92); opacity:.75; } 70% { opacity:0; } 100% { transform:scale(1.5); opacity:0; } }
@keyframes checkDraw { to { stroke-dashoffset:0; } }
@keyframes spark {
  0% { opacity:0; transform:rotate(var(--a)) translateY(-26px) scale(.5); }
  18% { opacity:1; }
  100% { opacity:0; transform:rotate(var(--a)) translateY(-104px) scale(.3); }
}
@keyframes orbDrift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(90px,60px,0) scale(1.14); } }
@keyframes orbDrift2 { from { transform:translate3d(0,0,0) scale(1.1); } to { transform:translate3d(-80px,-70px,0) scale(1); } }
@keyframes gridPan { to { transform:translate3d(68px,68px,0); } }
@keyframes scanSweep { from { transform:translateY(0); } to { transform:translateY(calc(100vh + 260px)); } }
@keyframes doneShine { from { background-position:120% 0; } to { background-position:-120% 0; } }
@keyframes dotBlink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.8); } }
@keyframes sheen { 0% { transform:translateX(-180%) skewX(-18deg); } 55%,100% { transform:translateX(420%) skewX(-18deg); } }

@media (max-width: 720px) {
  .signup-done { padding:28px 18px; }
  .signup-done-card { padding:40px 24px 32px; border-radius:20px; }
  .done-icon, .done-icon svg { width:108px; height:108px; }
  .done-icon { margin-bottom:20px; }
  .signup-done-card h2 { font-size:27px; }
  .done-sub { font-size:15px; }
}

@media (prefers-reduced-motion: reduce) {
  .signup-done, .signup-done-card, .done-icon, .done-ring, .done-ring-inner, .done-pulse,
  .done-eyebrow, .done-eyebrow i, .signup-done-card h2, .done-sub, .done-steps li,
  .done-cta, .done-cta i, .done-back, .done-orb, .done-grid, .done-check, .done-frame i {
    animation:none; opacity:1; transform:none;
  }
  .done-check { stroke-dashoffset:0; }
  .done-spark, .done-scan, .done-cta i { display:none; }
  .signup-done-card h2 { -webkit-text-fill-color:#fff; color:#fff; background:none; }
}