/*
  Bigheart — tokens e componentes base
  Um bege como base. Uma cor de tinta por marca. A mesma tipografia e a mesma gravura.
  Para trocar a marca, mude o atributo no <html>:  data-brand="bigheart | nimbo | blizo | arvore | mar"
  Fontes (licença livre, OFL): Fraunces, Geist, Geist Mono — carregadas pelo Google Fonts na página.
*/
:root {
  /* base: papel e tinta neutra */
  --bh-paper: #eadfd2;          /* o único fundo */
  --bh-ink: #2b1b17;            /* texto principal · 12,6:1 sobre o papel */
  --bh-muted: #6f5a4f;          /* texto de apoio · 4,9:1 */
  --bh-line: rgba(43, 27, 23, .14);
  --bh-line-strong: rgba(43, 27, 23, .28);
  --bh-wash: rgba(43, 27, 23, .045); /* superfície levemente mais escura, feita do próprio papel */

  /* tintas da família — todas passam 4,5:1 sobre o papel */
  --ink-bigheart: #bf1d24;      /* 4,7  · reservado à Bigheart */
  --ink-cobalt: #2647c9;        /* 5,7 */
  --ink-forest: #1b6b45;        /* 4,9 */
  --ink-plum: #7a3fb5;          /* 5,0 */
  --ink-teal: #0e6a6e;          /* 4,8 */
  --ink-ochre: #80530f;         /* 4,9 */

  /* tipografia */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --serif-settings: "SOFT" 100, "WONK" 0;
  --t-display: clamp(3rem, 1.6rem + 5.6vw, 6.6rem);
  --t-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem);
  --t-h2: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  --t-h3: clamp(1.4rem, 1.2rem + .7vw, 1.75rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-micro: .8125rem;

  /* espaço (base 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;

  /* forma */
  --r-plate: clamp(20px, 2.4vw, 32px);   /* gravuras */
  --r-card: 22px;
  --r-input: 14px;
  --r-pill: 999px;

  /* movimento */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: .16s; --dur-2: .32s; --dur-3: .7s;

  --accent: var(--ink-bigheart);
  color-scheme: light;
}
[data-brand="bigheart"] { --accent: var(--ink-bigheart); }
[data-brand="nimbo"], [data-brand="selecao"] { --accent: var(--ink-cobalt); }   /* "selecao": nome antigo do Nimbo */
[data-brand="blizo"]    { --accent: var(--ink-ochre); }
[data-brand="arvore"]   { --accent: var(--ink-forest); }
[data-brand="mar"]      { --accent: var(--ink-plum); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bh-paper); color: var(--bh-ink);
  font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.serif { font-family: var(--font-serif); font-variation-settings: var(--serif-settings); font-weight: 400; letter-spacing: -.02em; }
.display { font-size: var(--t-display); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.h1 { font-size: var(--t-h1); line-height: 1.02; text-wrap: balance; }
.h2 { font-size: var(--t-h2); line-height: 1.08; text-wrap: balance; }
.h3 { font-size: var(--t-h3); line-height: 1.15; }
.muted { color: var(--bh-muted); }
.mono { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .01em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 34em; text-wrap: pretty; }

/* ---------- gravura emoldurada ---------- */
.plate { position: relative; border-radius: var(--r-plate); overflow: hidden; background: var(--bh-paper); isolation: isolate; }
.plate > canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.plate > canvas.is-drawn { opacity: 1; }
.plate > canvas.is-dithered { transition: none; }
/* texto e botões sobre a gravura entram junto com ela, quando a trama já cobriu o céu */
@media (scripting: enabled) {
  .plate > canvas[data-engrave] ~ * { opacity: 0; transition: opacity var(--dur-3) var(--ease); }
  .plate > canvas.is-drawn ~ * { opacity: 1; }
  .plate > canvas.is-dithered ~ * { transition-duration: .3s; transition-delay: .2s; }
}   /* entrada em trama Bayer (engrave.js); com movimento reduzido, fica o esmaecer */
.plate .on-ink { color: var(--bh-paper); position: relative; z-index: 1; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 0 24px;
  border-radius: var(--r-pill); border: 0; cursor: pointer; text-decoration: none;
  font: 500 var(--t-body)/1 var(--font-sans);
  background: var(--accent); color: var(--bh-paper);
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--paper { background: var(--bh-paper); color: var(--accent); }
.btn--ghost { background: transparent; color: var(--bh-ink); box-shadow: inset 0 0 0 1.5px var(--bh-line-strong); }
.btn svg { width: 1em; height: 1em; }
.field .btn { justify-content: center; }   /* quando o campo empilha, o botão ocupa a largura toda */

/* ---------- campo ---------- */
.field { display: flex; gap: var(--s-2); }
.input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1.5px solid currentColor; background: transparent; color: inherit;
  font: 400 var(--t-body)/1 var(--font-sans);
}
.input::placeholder { color: inherit; opacity: .7; }

/* ---------- etiqueta de status ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-micro)/1 var(--font-mono); color: var(--bh-muted); }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--accent)); }

/* ---------- marca do app no topo: voltar para a vitrine + ícone + nome ---------- */
.appmark { display: flex; align-items: center; gap: 12px; }
.appmark .back {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--bh-ink); box-shadow: inset 0 0 0 1.5px var(--bh-line-strong); text-decoration: none;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.appmark .back:hover { transform: translateX(-2px); box-shadow: inset 0 0 0 1.5px var(--bh-ink); }
.appmark .back svg { width: 18px; height: 18px; }
.appmark .name { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.appmark .name img { width: 36px; height: 36px; }
.appmark .name b { font-family: var(--font-serif); font-variation-settings: var(--serif-settings); font-weight: 400; letter-spacing: -.02em; font-size: 2rem; line-height: 1; color: var(--accent); }

/* ---------- wordmark do Nimbo: "Nimb" na Fraunces + o "o" desenhado (disco com os entalhes) dentro do anel de luz ---------- */
.nimbo { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; font-weight: 400; letter-spacing: -.035em; line-height: 1; display: inline-flex; align-items: baseline; white-space: nowrap; --cut: var(--bh-paper); }
.nimbo .o { display: inline-block; width: .5em; height: .5em; margin: 0 .11em 0 .14em; position: relative; flex: none; }
.nimbo .o svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nimbo .o::after { content: ""; position: absolute; inset: -.11em; border: .035em solid currentColor; border-radius: 50%; }
.nimbo .o { color: var(--accent); }                     /* o "o" é sempre a tinta do app; em papel sobre o cobalto */
.nimbo.on-ink { --cut: var(--accent); }
.nimbo.on-ink .o { color: var(--bh-paper); }

/* ---------- nome do Blizo: "Blizo" na Fraunces + o ingresso com os entalhes ao lado, como o "o" do Nimbo ---------- */
.blizo { font-family: var(--font-serif); font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; font-weight: 400; letter-spacing: -.035em; line-height: 1; display: inline-flex; align-items: baseline; white-space: nowrap; --cut: var(--bh-paper); }
.blizo .mark { display: inline-block; width: .7em; height: .62em; margin-left: .18em; flex: none; color: var(--accent); }
.blizo .mark svg { width: 100%; height: 100%; display: block; }
.blizo.on-ink { --cut: var(--accent); }
.blizo.on-ink .mark { color: var(--bh-paper); }

/* ---------- endosso "by Bigheart" ---------- */
.endorse { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); color: var(--bh-muted); text-decoration: none; }
.endorse img { height: 1.15em; width: auto; }

/* ---------- rodapé: placa com gravura, todo o texto no céu, a linha legal fecha o bloco (2026-11-07) ---------- */
.foot .legal {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  margin-top: var(--s-4); padding-top: 18px; font-size: var(--t-small); opacity: .85;
  border-top: 1px solid color-mix(in srgb, var(--bh-paper) 30%, transparent);
}

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