/* Marca da vitrine e do login. Claro (padrão) e escuro; laranja de seta só para dinheiro e destaque. */
@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url(/web/fonts/geist/geist-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url(/web/fonts/geist/geist-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url(/web/fonts/geist/geist-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 700; font-display: swap; src: url(/web/fonts/geist/geist-latin-700-normal.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --estudio: #F4F4F2;
  --papel: #FFFFFF;
  --papel-2: #F4F4F2;
  --tinta: #111317;
  --tinta-2: #565C66;
  --tinta-3: #8A9099;
  --linha: #E4E5E1;
  --linha-forte: #CFD1CC;
  --seta: #FF5A1F;
  --seta-2: #E8460C;
  --lucro: #0F9D58;
  --perigo: #D92D20;
  --contraste: #15171B;
  --contraste-txt: #F3F4F6;
  --contraste-2: #A3A8B0;
  --contraste-linha: #2A2E35;
  --trilho: #ECEDE9;
  --tick: #BFC2BB;
  --sombra: 0 50px 80px -50px rgba(17, 19, 23, .35), 0 2px 4px rgba(17, 19, 23, .04);
  /* WhatsApp dentro do celular (segue o tema, como o app de verdade) */
  --wa-fundo: #EFEAE2; --wa-barra: #F7F7F5; --wa-eu: #D9FDD3; --wa-ele: #FFFFFF; --wa-txt: #111B21; --wa-meta: #667781; --wa-linha: #E6E8E3; --wa-campo: #FFFFFF;
  --zap: #25D366;
  --texto: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --estudio: #0E1013;
  --papel: #16181D;
  --papel-2: #1D2026;
  --tinta: #EEF0F3;
  --tinta-2: #A2A8B2;
  --tinta-3: #6F7680;
  --linha: #252930;
  --linha-forte: #353A43;
  --seta: #FF6B33;
  --seta-2: #FF8455;
  --lucro: #34D27F;
  --perigo: #FF6B60;
  --contraste: #1A1D23;
  --contraste-linha: #2C3139;
  --trilho: #262A31;
  --tick: #4A505A;
  --sombra: 0 50px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02);
  --wa-fundo: #0B141A; --wa-barra: #1F2C34; --wa-eu: #005C4B; --wa-ele: #202C33; --wa-txt: #E9EDEF; --wa-meta: #8696A0; --wa-linha: #2A3942; --wa-campo: #2A3942;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --estudio: #0E1013; --papel: #16181D; --papel-2: #1D2026; --tinta: #EEF0F3; --tinta-2: #A2A8B2; --tinta-3: #6F7680; --linha: #252930; --linha-forte: #353A43;
    --seta: #FF6B33; --seta-2: #FF8455; --lucro: #34D27F; --perigo: #FF6B60; --contraste: #1A1D23; --contraste-linha: #2C3139; --trilho: #262A31; --tick: #4A505A;
    --sombra: 0 50px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02);
    --wa-fundo: #0B141A; --wa-barra: #1F2C34; --wa-eu: #005C4B; --wa-ele: #202C33; --wa-txt: #E9EDEF; --wa-meta: #8696A0; --wa-linha: #2A3942; --wa-campo: #2A3942;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--estudio); color: var(--tinta); font: 400 17px/1.55 var(--texto); -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--seta); outline-offset: 3px; border-radius: 8px; }

/* Logo: mostrador com ponteiro + palavra */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tinta); }
.logo svg { width: 28px; height: 28px; }
.logo .arco { stroke: var(--tinta); }
.logo .agulha { stroke: var(--seta); }
.logo .pino { fill: var(--seta); }
.logo span { font: 500 20px/1 var(--texto); letter-spacing: -.045em; }
.logo span b { font-weight: 800; }

.btn-zap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--tinta); color: var(--estudio); text-decoration: none; font: 600 16.5px/1 var(--texto); padding: 16px 24px; border-radius: 12px; border: 0; cursor: pointer; transition: transform .15s, opacity .2s; }
.btn-zap:hover { transform: translateY(-1px); opacity: .9; }
.btn-zap svg { width: 20px; height: 20px; color: var(--zap); }
.btn-linha { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--linha-forte); text-decoration: none; font-weight: 500; font-size: 15px; color: var(--tinta); background: var(--papel); cursor: pointer; }
.btn-linha:hover { border-color: var(--tinta-3); }

/* Botão de tema */
.tema { width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta-2); display: grid; place-items: center; cursor: pointer; }
.tema:hover { color: var(--tinta); border-color: var(--tinta-3); }
.tema svg { width: 18px; height: 18px; }
.tema .lua { display: none; }
:root[data-tema="escuro"] .tema .sol { display: none; }
:root[data-tema="escuro"] .tema .lua { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .sol { display: none; }
  :root:not([data-tema="claro"]) .tema .lua { display: block; }
}

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