:root{
  --azul:#0b3c96;
  --azul-esc:#072a6b;
  --verde:#00965a;
  --amarelo:#ffd400;
  --texto:#0d2b5e;
  --borda:#dbe4f5;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--texto);
  background:linear-gradient(180deg,#eef4ff 0%,#e6f7ef 55%,#fdf6dd 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:28px 18px 40px}

.voltar{
  display:inline-flex;align-items:center;gap:5px;margin-bottom:14px;
  color:var(--azul);text-decoration:none;font-size:14px;font-weight:700
}
.voltar:hover{text-decoration:underline}

/* marca */
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:18px}
.brand-cargo{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--verde)}
.brand-nome{font-size:clamp(30px,6vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--azul)}
.brand-num{
  display:inline-block;margin-top:4px;padding:3px 20px;border-radius:6px;
  background:var(--amarelo);color:var(--azul);font-size:clamp(26px,5vw,38px);font-weight:900;line-height:1.15;
  transform:rotate(-1.2deg);box-shadow:0 2px 0 rgba(0,0,0,.08)
}

h1{text-align:center;font-size:clamp(24px,4.4vw,38px);font-weight:800;line-height:1.15;margin-bottom:10px}
.lead{text-align:center;max-width:640px;margin:0 auto 26px;color:#415b8c;font-size:15px;line-height:1.55}

/* card */
.card{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;
  background:#fff;border-radius:20px;padding:22px;
  box-shadow:0 10px 40px rgba(13,43,94,.10)
}
.palco{min-width:0}
.canvas-box{
  position:relative;border-radius:14px;overflow:hidden;background:#f1f5fc;
  display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab
}
.canvas-box.dragging{cursor:grabbing}
canvas{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain}
.vazio{
  /* fica no terco de cima, que e onde o rosto entra; no centro caia em cima da marca */
  position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;
  padding-top:22%;color:#4a6394;font-size:15px;font-weight:700;
  text-shadow:0 1px 3px rgba(255,255,255,.85);pointer-events:none
}
.vazio.hide{display:none}
.dica{text-align:center;color:#6d82ab;font-size:13px;margin-top:10px}

/* painel */
.painel h2{font-size:15px;font-weight:800;margin:0 0 8px}
.painel h2+*{margin-bottom:0}
.painel>*+h2{margin-top:20px}

.formatos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fmt{
  padding:9px 4px;border:1.5px solid var(--borda);background:#fff;border-radius:9px;
  font:inherit;font-size:13px;font-weight:700;color:#4a6394;cursor:pointer;transition:.15s
}
.fmt:hover{border-color:#a8bde4}
.fmt.is-on{background:var(--azul);border-color:var(--azul);color:#fff}
.fmt-hint{font-size:12px;color:#6d82ab;margin-top:7px;line-height:1.4}

#arquivo,#camera{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-nome{font-size:12px;color:#6d82ab;margin-top:7px;word-break:break-all}

#zoom{width:100%;accent-color:var(--azul);height:22px}
.zoom-hint{font-size:11.5px;color:#6d82ab;margin-top:5px;line-height:1.4}

.btn-primario,.btn-secundario{
  width:100%;margin-top:18px;padding:14px;border:0;border-radius:11px;
  font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:.15s
}
.btn-primario{background:var(--azul);color:#fff}
.btn-primario:hover:not(:disabled){background:var(--azul-esc)}
.btn-secundario{background:#eef3fc;color:var(--azul);margin-top:9px}
.btn-secundario:hover:not(:disabled){background:#e2eaf9}
.btn-primario:disabled,.btn-secundario:disabled{opacity:.45;cursor:not-allowed}

.troca-botoes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:2px}
.btn-troca{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:46px;padding:11px 8px;border-radius:10px;cursor:pointer;
  border:1.5px solid #c3d3ee;background:#fff;color:var(--azul);
  font:inherit;font-size:13px;font-weight:700;line-height:1.25;transition:.15s
}
.btn-troca:hover{background:#eef4ff;border-color:#a8bde4}
.troca-hint{font-size:11.5px;color:#6d82ab;margin-top:8px;line-height:1.4}

.legal{
  text-align:center;margin-top:26px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;color:#5c73a0;line-height:1.6
}

@media (max-width:860px){
  .card{grid-template-columns:1fr;padding:16px}
  .wrap{padding:20px 14px 32px}
  canvas{max-height:56vh}
}