/* O que as páginas das marcenarias têm em comum (o site dela, o Monte seu móvel e o painel). A cor de destaque é a de cada
   marcenaria: vem na página (--destaque, --sobre-destaque, --destaque-suave, --destaque-texto), tirada da cor dela (paleta.py). */
:root {
  --papel: #f5f4f1; --superficie: #ffffff; --superficie-2: #eeece8; --tinta: #1b1c1f; --tinta-2: #5a5c62; --linha: #e0ddd7;
  --destaque: #ef7d14; --sobre-destaque: #1b1206; --destaque-suave: #fdeedd; --destaque-texto: #b45708; --destaque-forte: #d26d10;
  --verde: #27b456; --verde-texto: #157a37; --verde-suave: #e2f5e8; --vermelho-texto: #b42318; --vermelho-suave: #fdeceb;
  --faixa: #17181b; --faixa-tinta: #f2f0ec; --faixa-tinta-2: #a9abb0; --faixa-linha: #34363c;
  --fonte: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --raio: 12px; --sombra: 0 10px 30px rgba(0, 0, 0, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #111214; --superficie: #1a1b1e; --superficie-2: #232428; --tinta: #eeece8; --tinta-2: #a9aaae; --linha: #2f3135;
    --verde-texto: #58d083; --verde-suave: #11291a; --vermelho-texto: #f28b82; --vermelho-suave: #3a1715; --sombra: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #111214; --superficie: #1a1b1e; --superficie-2: #232428; --tinta: #eeece8; --tinta-2: #a9aaae; --linha: #2f3135;
  --verde-texto: #58d083; --verde-suave: #11291a; --vermelho-texto: #f28b82; --vermelho-suave: #3a1715; --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15.5px/1.55 var(--fonte); }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; } p { margin: 0; }
a { color: var(--destaque-texto); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
.envolve { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 9px;
  border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); font-weight: 650; font-size: 15px; cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.botao:hover { border-color: var(--tinta-2); }
.botao[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.botao.destaque { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }
.botao.destaque:hover { background: var(--destaque-forte); border-color: var(--destaque-forte); }
.botao.zap { background: #1fa855; border-color: #1fa855; color: #fff; }
.botao.zap:hover { background: #188f47; }
.botao.pequeno { min-height: 34px; padding: 0 11px; font-size: 13.5px; }
.botao.perigo { color: var(--vermelho-texto); }
.botao svg { width: 18px; height: 18px; flex: none; }
.dica { color: var(--tinta-2); font-size: 13.5px; }
.selo { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--destaque-texto); background: var(--destaque-suave);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feito-com { display: inline-flex; gap: 7px; align-items: center; color: inherit; text-decoration: none; font-size: 12.5px; opacity: .85; }
.feito-com img { width: 22px; height: 22px; }
.feito-com:hover { opacity: 1; }