/* =========================================================
   Jota Barbearia · base (cores, fontes, botões)
   Uma única cor de destaque (--accent). O degradê metálico
   dos botões é calculado a partir dela.
   ========================================================= */
:root{
  --accent:#DCC59B;
  --bg:#121110; --s1:#1B1A18; --s2:#24221F; --s3:#2C2A26; --s0:#0C0B0A;
  --tx:#F4F0E8; --tx2:#D3CCC1; --tx3:#CFC8BD; --mut:#A8A197; --mut2:#8F897F; --dim:#6F6A63;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12); --line3:rgba(255,255,255,.18);
  --err:#E5735F; --err2:#F0937F; --ok:#7FCF9A; --ink:#16130F; --zap:#25D366;
  --gold:linear-gradient(100deg, color-mix(in oklch, var(--accent) 60%, white), var(--accent) 55%, color-mix(in oklch, var(--accent) 82%, black));
  --acc10:color-mix(in oklch, var(--accent) 10%, var(--s1));
  --serif:Marcellus, Georgia, serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut:clamp(20px, 5vw, 72px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-user-select:none;user-select:none}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.02;text-wrap:balance}
p{margin:0}
::selection{background:color-mix(in oklch, var(--accent) 45%, transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input::placeholder,textarea::placeholder{color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* rótulo espaçado em caixa alta */
.rotulo{font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.rotulo-cinza{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;border:0;font-weight:600;font-size:16px;white-space:nowrap;transition:filter .15s, transform .15s, background-color .15s, border-color .15s}
.btn:active{transform:scale(.98)}
.btn-ouro{background:var(--accent);background:var(--gold);color:var(--ink)}
.btn-ouro:hover{filter:brightness(1.06)}
.btn-claro{background:var(--tx);color:var(--ink)}
.btn-claro:hover{background:#fff}
.btn-linha{background:rgba(18,17,16,.35);border:1px solid rgba(255,255,255,.22);color:var(--tx);font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-linha:hover{border-color:rgba(255,255,255,.4)}
.btn-off,.btn[disabled]{background:var(--s3);color:#77716a;cursor:not-allowed;filter:none;transform:none}
.btn-p{height:46px;padding:0 20px;font-size:15px}
.btn .seta{flex:none}

/* ---------- campos ---------- */
.campo{display:flex;flex-direction:column;gap:8px}
.campo > span:first-child{font-size:14px;font-weight:500;color:var(--tx3)}
.entrada{height:56px;padding:0 18px;border-radius:18px;border:1.5px solid rgba(255,255,255,.1);background:var(--s1);color:var(--tx);font-weight:500;font-size:17px;outline:none;width:100%;transition:border-color .15s}
.entrada:focus{border-color:var(--accent)}
.entrada.erro,.grupo.erro{border-color:var(--err)}
.grupo{display:flex;align-items:center;height:56px;border-radius:18px;border:1.5px solid rgba(255,255,255,.1);background:var(--s1);overflow:hidden;transition:border-color .15s}
.grupo:focus-within{border-color:var(--accent)}
.grupo > b{font-weight:400;padding:0 14px 0 18px;height:100%;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,.08);color:var(--mut)}
.grupo input{flex:1;min-width:0;height:100%;padding:0 16px;border:0;background:transparent;outline:none;font-weight:500;font-size:17px}
.msg-erro{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--err2)}
.msg-erro::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--err);color:var(--ink);display:grid;place-items:center;font-size:12px;font-weight:700}
.dica{font-size:13px;color:var(--mut2)}

/* ---------- utilidades ---------- */
.pilula{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);font-size:13px;color:var(--tx3)}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.esqueleto{background:linear-gradient(90deg, var(--s2), #2e2b27, var(--s2));background-size:200% 100%;animation:brilho 1.2s linear infinite}
@keyframes brilho{to{background-position:-200% 0}}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gira{to{transform:rotate(360deg)}}
.girando{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite;flex:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.faixa-demo{flex:none;padding:7px 16px;background:#2a2418;border-bottom:1px solid color-mix(in oklch, var(--accent) 30%, transparent);font-size:12.5px;line-height:1.4;color:color-mix(in oklch, var(--accent) 70%, white);text-align:center}
.faixa-demo b{font-weight:600}