/* Signatura — base visual única (site e sistema). Toda tela nova parte daqui. */
:root{
  --manga:#FFC933; --manga-funda:#F0B400; --noite:#15153D; --chiclete:#FF5C8D; --nata:#FFFDF6;
  --areia:#F5EFDF; --menta:#8FE6BD; --ceu:#C9D8FF; --tinta:#2443E0; --certo:#0B8F5E; --alerta:#D93A4A; --bruma:#5A5A78;
  --fio:rgba(21,21,61,.12);
  --display:"Gabarito",system-ui,sans-serif; --texto:"Onest",system-ui,sans-serif;
  --sombra-dura:5px 5px 0 var(--noite);
  --sombra-macia:0 1px 2px rgba(21,21,61,.06),0 10px 24px -10px rgba(21,21,61,.25);
  --sombra-alta:0 2px 6px rgba(21,21,61,.08),0 28px 56px -18px rgba(21,21,61,.42);
  --brilho-manga:0 14px 30px -10px rgba(240,180,0,.75);
  --mola:cubic-bezier(.34,1.56,.64,1); --suave:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nata);color:var(--noite);font:400 16px/1.5 var(--texto);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.02em;line-height:1.05}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:12px}
.ic{flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* marca */
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:900 24px/1 var(--display);letter-spacing:-.02em;color:var(--noite)}
.marca .caixa{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--noite);color:var(--manga);box-shadow:0 6px 14px -6px rgba(21,21,61,.6);transition:transform .5s var(--mola)}
.marca:hover .caixa{transform:rotate(-8deg) scale(1.08)}
.marca svg{width:24px;height:24px}
.simbolo-traco{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.simbolo-ponto{fill:var(--chiclete)}

/* botões */
.botao{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border:0;border-radius:999px;background:var(--noite);color:var(--nata);font:700 17px/1 var(--display);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 rgba(21,21,61,.28),0 16px 26px -12px rgba(21,21,61,.55);transition:transform .22s var(--mola),box-shadow .22s var(--suave),background .2s}
.botao:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(21,21,61,.28),0 22px 32px -12px rgba(21,21,61,.55)}
.botao:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(21,21,61,.28),0 6px 12px -8px rgba(21,21,61,.5)}
.botao.manga{background:var(--manga);color:var(--noite);box-shadow:0 5px 0 var(--manga-funda),var(--brilho-manga)}
.botao.manga:hover{box-shadow:0 8px 0 var(--manga-funda),0 22px 36px -12px rgba(240,180,0,.85)}
.botao.manga:active{box-shadow:0 1px 0 var(--manga-funda),0 6px 12px -8px rgba(240,180,0,.7)}
.botao.claro{background:#fff;color:var(--noite);box-shadow:0 5px 0 rgba(21,21,61,.14),var(--sombra-macia)}
.botao.fantasma{background:transparent;color:var(--noite);box-shadow:inset 0 0 0 2.5px var(--noite)}
.botao.fantasma:hover{background:var(--noite);color:var(--nata);box-shadow:inset 0 0 0 2.5px var(--noite)}
.botao.perigo{background:#fff;color:var(--alerta);box-shadow:inset 0 0 0 2px var(--alerta)}
.botao.p{min-height:44px;padding:0 18px;font-size:15px}
.botao.bloco{display:flex;width:100%}
.botao[disabled],.botao[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}

/* cartões */
.cartao{background:#fff;border-radius:24px;padding:18px;box-shadow:var(--sombra-macia)}
.cartao.duro{border:2.5px solid var(--noite);box-shadow:var(--sombra-dura)}
.cartao.manga{background:var(--manga)} .cartao.noite{background:var(--noite);color:var(--nata)} .cartao.chiclete{background:var(--chiclete)} .cartao.menta{background:var(--menta)} .cartao.areia{background:var(--areia);box-shadow:none}
a.cartao,button.cartao{display:block;width:100%;text-align:left;text-decoration:none;border-width:0;cursor:pointer;transition:transform .3s var(--mola),box-shadow .25s}
a.cartao.duro,button.cartao.duro{border-width:2.5px}
a.cartao.linha,button.cartao.linha{display:flex;align-items:center;gap:12px}
a.cartao:hover,button.cartao:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--sombra-alta)}
a.cartao.duro:hover,button.cartao.duro:hover{box-shadow:8px 9px 0 var(--noite)}
a.cartao:active,button.cartao:active{transform:translateY(1px) scale(.985)}

/* fichas de estado */
.ficha{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font:700 13px/1.2 var(--display);background:var(--areia);color:var(--noite);white-space:nowrap}
.ficha::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}
.ficha.ok{background:#D9F6E8;color:#076B46} .ficha.espera{background:#FFF0BF;color:#7A5A00} .ficha.voce{background:var(--chiclete);color:var(--noite)}
.ficha.recusado{background:#FFE0E4;color:#A81D2D} .ficha.rascunho{background:#ECEAF2;color:var(--bruma)} .ficha.limpa::before{display:none}
.ficha.espera::before,.ficha.voce::before{opacity:1;animation:pulsar 1.6s ease-in-out infinite}

/* avatar */
.avatar{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ceu);font:900 16px/1 var(--display);color:var(--noite)}
.avatar.c1{background:var(--chiclete)} .avatar.c2{background:var(--menta)} .avatar.c3{background:var(--manga)} .avatar.c4{background:var(--ceu)}
.avatar.g{width:56px;height:56px;font-size:21px}

/* campos */
.campo{display:grid;gap:6px;font-weight:500;font-size:14.5px}
.campo input,.campo select,.campo textarea{width:100%;min-height:52px;padding:12px 16px;border:2px solid var(--fio);border-radius:16px;background:#fff;font:500 16.5px var(--texto);color:var(--noite);transition:border-color .2s,box-shadow .2s}
.campo textarea{min-height:92px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--noite);box-shadow:0 0 0 4px rgba(255,201,51,.55)}

/* bloco de assinatura */
.pad{position:relative;height:170px;border:2.5px dashed #B9B4C9;border-radius:20px;background:#fff;touch-action:none;cursor:crosshair;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.pad.riscado{border-style:solid;border-color:var(--noite);box-shadow:var(--sombra-dura)}
.pad canvas{position:absolute;inset:0;width:100%;height:100%}
.pad::after{content:"";position:absolute;left:20px;right:20px;bottom:38px;border-bottom:2px solid var(--noite);opacity:.22;pointer-events:none}
.pad .dica{position:absolute;inset:0;display:grid;place-items:center;color:#7A7896;font-size:15px;pointer-events:none;transition:opacity .2s}
.pad.riscado .dica{opacity:0}

/* movimento compartilhado */
@keyframes pulsar{50%{transform:scale(1.5);opacity:.5}}
@keyframes brotar{from{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes saltar{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes flutuar{50%{transform:translateY(-10px) rotate(var(--giro,0deg))}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes confete{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.confete{position:absolute;width:10px;height:14px;border-radius:3px;pointer-events:none;animation:confete .9s var(--suave) forwards}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}