/* =========================================================
   Vanessa Silva · base (cores, fontes, botões)
   Paleta da marca (logo oficial): preto, creme/nude e dourado rosé.
   Uma única cor de destaque (--accent, o dourado); o degradê dos
   botões sai dela. --ink (texto sobre o destaque) e --acc-txt (o
   destaque como texto em fundo claro) são calculados em J.aplicarCor.
   ========================================================= */
:root{
  --accent:#C29B78; --ink:#1A120D; --acc-txt:#76604A;
  --bg:#F8F3EE; --s1:#FFFFFF; --s2:#F3EBE3; --s3:#E9DED3; --s0:#F1E9E1;
  --tx:#231A15; --tx2:#3A2E27; --tx3:#4B3E36; --mut:#6B5C52; --mut2:#7A6B60; --dim:#A3958A;
  --line:rgba(60,40,25,.10); --line2:rgba(60,40,25,.16); --line3:rgba(60,40,25,.26);
  --err:#B8392A; --err2:#A63223; --ok:#2E7D4F; --zap:#25D366;
  --preto:#0D0A09; --preto2:#171210; --creme:#F7F1EA; --nude:#EFE4D8;
  --ouro-claro:#E3C5AE; --ouro-escuro:#8C684A;
  --gold:linear-gradient(100deg, color-mix(in oklch, var(--accent) 80%, white), var(--accent) 50%, color-mix(in oklch, var(--accent) 84%, black));
  --acc10:color-mix(in oklch, var(--accent) 10%, white);
  --display:"Cinzel", Georgia, "Times New Roman", serif;
  --sans:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script:"Bodoni Moda", Georgia, serif;
  --gut:clamp(20px, 5vw, 72px);
  color-scheme:light;
  font-synthesis:none;
}
*,*::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(--display);font-weight:500;line-height:1.08;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
p{margin:0}
::selection{background:color-mix(in oklch, var(--accent) 28%, transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input::placeholder,textarea::placeholder{color:var(--dim)}
[hidden]{display:none!important}
.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:11px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--acc-txt)}
.rotulo-cinza{font-size:11px;font-weight:700;letter-spacing:.24em;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:700;font-size:15px;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.07)}
.btn-claro{background:var(--tx);color:#fff}
.btn-claro:hover{background:#000}
.btn-linha{background:var(--s1);border:1px solid var(--line2);color:var(--tx);font-weight:600}
.btn-linha:hover{border-color:var(--line3)}
.btn-off,.btn[disabled]{background:var(--s3);color:var(--mut2);cursor:not-allowed;filter:none;transform:none}
.btn-p{height:46px;padding:0 20px;font-size:14px}
.btn .seta{flex:none}

/* ---------- campos ---------- */
.campo{display:flex;flex-direction:column;gap:8px}
.campo > span:first-child{font-size:14px;font-weight:600;color:var(--tx3)}
.entrada{height:56px;padding:0 18px;border-radius:14px;border:1.5px solid var(--line2);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:14px;border:1.5px solid var(--line2);background:var(--s1);overflow:hidden;transition:border-color .15s}
.grupo:focus-within{border-color:var(--accent)}
.grupo > b{font-weight:500;padding:0 14px 0 18px;height:100%;display:flex;align-items:center;border-right:1px solid var(--line);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:#fff;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), var(--s3), 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:var(--acc10);border-bottom:1px solid color-mix(in oklch, var(--accent) 25%, transparent);font-size:12.5px;line-height:1.4;color:color-mix(in oklch, var(--accent) 70%, black);text-align:center}
.faixa-demo b{font-weight:700}