/* A régua do patrimônio — tokens do plano (contraste WCAG medido) */

/* Fraunces servida daqui (sem Google Fonts: o IP do visitante não sai para terceiros). Antes num <style> do index.html; aqui por causa da CSP style-src 'self'. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fonts/fraunces-latin-wght-normal.woff2) format('woff2-variations'),
       url(assets/fonts/fraunces-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fonts/fraunces-latin-wght-italic.woff2) format('woff2-variations'),
       url(assets/fonts/fraunces-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --laranja: #ff6e1a;      /* fundo; texto em cima só --tinta */
  --laranja-600: #e64500;
  --laranja-700: #b83700;  /* laranja como texto/link em fundo claro */
  --tinta: #1c1714;
  --grafite: #2b2522;
  --terra: #a5381d;
  --terra-escuro: #8c2a14; /* venda na régua principal (= Deságio da lupa) */
  --creme: #fcfaf8;
  --papel: #ffffff;
  --texto-2: #725e4f;
  --linha-forte: #8b7565;
  --linha: #ece3da;
  --laranja-10: hsl(22 100% 55% / .1);
  /* rodada 2 (fotografia): texto sobre --tinta/--grafite (contraste medido) */
  --texto-2-escuro: #cdbfb2;  /* texto secundário no escuro */
  --terra-claro: #f2876a;     /* número negativo / alerta sobre o escuro (--terra reprova ali) */
  --laranja-claro: #ff8a3d;   /* laranja como texto pequeno sobre o escuro (--laranja fica perto de 4,5 no grafite) */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  --sombra-foto: 0 28px 56px -28px hsl(20 60% 8% / .55), 0 2px 6px hsl(20 30% 10% / .08);

  --serifa: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 112px;
  --r-input: 6px; --r-cartao: 12px; --r-regua: 14px; --r-chip: 999px;

  --sombra-1: 0 1px 2px hsl(20 30% 20% / .06), 0 8px 24px -12px hsl(20 60% 20% / .18);
  --sombra-cta: 0 12px 32px -12px hsl(22 100% 40% / .5);

  --dur-1: 160ms; --dur-2: 320ms; --dur-seg: 600ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --listras: repeating-linear-gradient(135deg, rgb(255 255 255 / .18) 0 5px, transparent 5px 10px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--creme); color: var(--tinta);
  font: 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 600; }
h1, h2 { font-family: var(--serifa); letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1rem; font-family: var(--sans); }
p { margin: 0; }
img { display: block; }
.muted { color: var(--texto-2); margin: var(--e1) 0 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--laranja-700); outline-offset: 2px; }
h1:focus, h1:focus-visible { outline: none; }
::selection { background: hsl(22 100% 55% / .25); }

.pagina-in { --gutter: var(--e5); width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { .pagina-in { --gutter: var(--e4); } }

/* ---------- contexto escuro (topo, hero, banda do formulário, abertura do resultado, faixa CTA) ---------- */
.escuro {
  --fg: var(--creme); --fg-2: var(--texto-2-escuro);
  --regua-moldura: hsl(28 30% 82% / .24);
  --regua-fundo: var(--grafite);
  --regua-resto: linear-gradient(180deg, #3b322d 0%, #2b2522 100%);
  --regua-sep: var(--tinta);
  --regua-traco: hsl(28 30% 82% / .55);
  --regua-traco-forte: hsl(28 40% 80% / .8);
  background-color: var(--tinta); color: var(--creme);
}
.escuro :focus-visible { outline-color: var(--laranja); }
.foto { display: block; }
.foto img { width: 100%; height: auto; }

/* revelar ao rolar (app.js põe .revela só com IntersectionObserver e sem movimento reduzido) */
.revela { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.revela.visto { opacity: 1; transform: none; }

/* ---------- topo ---------- */
.topo { border-bottom: 1px solid hsl(28 30% 82% / .1); background: var(--grao), var(--tinta); position: relative; z-index: 2; }
.topo:has(+ .inicio) { border-bottom-color: transparent; }
.topo-in { max-width: 72rem; margin: 0 auto; padding: var(--e3) var(--e5); display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
@media (max-width: 640px) { .topo-in { padding: var(--e3) var(--e4); } }
.marca { display: inline-flex; align-items: center; gap: var(--e3); color: var(--creme); text-decoration: none; font-weight: 600; font-size: 1rem; border-radius: var(--r-input); min-width: 0; }
.marca img { height: 40px; width: auto; max-width: 160px; object-fit: contain; flex: none; }
.marca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e5); border-radius: var(--r-input); border: 2px solid transparent;
  font: 700 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-grande { min-height: 52px; padding: 0 var(--e6); font-size: 1.0625rem; }
.btn-primario { background: var(--laranja); color: var(--tinta); box-shadow: var(--sombra-cta); }
.btn-primario:hover { background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-600) 100%); color: var(--tinta); transform: translateY(-1px); box-shadow: 0 18px 36px -14px hsl(22 100% 45% / .65); }
.btn-escuro:hover, .btn-creme:hover { transform: translateY(-1px); }
.btn-primario:hover svg { transform: translateX(2px); }
.btn-primario svg { transition: transform var(--dur-1) var(--ease); }
.btn-escuro { background: var(--tinta); color: var(--creme); }
.btn-escuro:hover { background: var(--grafite); }
.btn-creme { background: transparent; color: var(--creme); border-color: var(--creme); }
.btn-creme:hover { background: var(--creme); color: var(--tinta); }
.btn-texto { background: transparent; color: var(--tinta); padding: 0 var(--e3); font-weight: 600; font-size: .9375rem; border-color: transparent; }
.btn-texto:hover { background: var(--laranja-10); }
.escuro .btn-texto { color: var(--creme); }
.escuro .btn-texto:hover { background: hsl(0 0% 100% / .08); }
.btn-chip { min-height: 44px; padding: 0 var(--e4); border-radius: var(--r-chip); background: var(--papel); color: var(--tinta); border: 2px solid var(--tinta); font-size: .9375rem; }
.btn-chip:hover { background: var(--tinta); color: var(--creme); }
.btn-x { border: 0; background: transparent; font-size: 1.75rem; cursor: pointer; color: var(--texto-2); line-height: 1; width: 44px; height: 44px; border-radius: var(--r-input); flex: none; }
.btn-x:hover { color: var(--tinta); background: var(--laranja-10); }
.link { background: none; border: 0; padding: var(--e1) 0; font: inherit; font-weight: 600; color: var(--laranja-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.link:hover { color: var(--tinta); }
[hidden] { display: none !important; }

/* ---------- a régua com lupa ----------
   Principal: herdeiros × custos (2 partes). Funil: liga a fatia dos custos à lupa. Lupa: os custos a 100%.
   Onde cada rótulo cabe é decidido em app.js (rotulos.js) e gravado em data-m-* (tela). */
.regua-bloco { position: relative; --resto: 1; --fixos: 0; --venda: 0; --resto-final: 1; }

/* rótulos da principal que não cabem dentro: em cima (herdeiros à esquerda, custos à direita, com chave) */
.rp-topo { position: relative; height: 0; }
.rp-fora {
  position: absolute; bottom: 13px; display: none; flex-direction: column; white-space: nowrap; line-height: 1.2;
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.rp-fora-resto { left: 0; }
.rp-fora-custo { right: 0; text-align: right; }
.rp-fora b, .rp-rot b { font-size: 14px; font-weight: 700; }
.rp-fora span, .rp-rot span { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rp-fora b { color: var(--fg, var(--tinta)); }
.rp-fora span { color: var(--fg-2, var(--texto-2)); }
.rp-chave {
  position: absolute; bottom: 2px; height: 8px; left: calc(var(--resto-final) * 100%); right: 0; display: none;
  border: 2px solid var(--regua-traco, var(--tinta)); border-bottom: 0; border-radius: 3px 3px 0 0;
  opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.dividida .rp-fora, .dividida .rp-chave { opacity: 1; }

.regua-trilho { position: relative; }
.regua {
  display: flex; height: 64px; border: 2px solid var(--regua-moldura, var(--tinta)); border-radius: var(--r-regua);
  overflow: hidden; background: var(--regua-fundo, var(--tinta)); position: relative; z-index: 1;
}
.rp { position: relative; min-width: 0; display: flex; align-items: center; overflow: hidden; transition: flex-basis var(--dur-seg) var(--ease); }
.rp-resto { flex: 1 1 auto; background: var(--regua-resto, var(--tinta)); color: var(--creme); }
.rp-fixos { flex: 0 0 calc(var(--fixos) * 100%); background: var(--laranja); color: var(--tinta); box-shadow: inset 2px 0 0 var(--regua-sep, var(--creme)); }
.rp-venda { flex: 0 0 calc(var(--venda) * 100%); background: var(--listras), var(--terra-escuro); box-shadow: inset 2px 0 0 var(--regua-sep, var(--creme)); }
.rp-rot { display: flex; flex-direction: column; padding: 0 12px; white-space: nowrap; line-height: 1.2; opacity: 0; transition: opacity var(--dur-2) var(--ease); pointer-events: none; }
.rp-resto .rp-rot span { color: var(--texto-2-escuro); }

/* a régua acende: brilho laranja sob a fatia dos custos (segue --resto), só no escuro */
.escuro .regua-trilho::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none; top: 0; bottom: 0;
  left: calc(var(--resto) * 100%); right: 0; border-radius: var(--r-regua);
  box-shadow: 0 0 34px 0 hsl(22 100% 55% / .3), 0 14px 40px -10px hsl(22 100% 50% / .36);
  transition: left var(--dur-seg) var(--ease), box-shadow 900ms var(--ease);
}
.escuro .regua-bloco.acendendo .regua-trilho::before { box-shadow: 0 0 48px 0 hsl(22 100% 55% / .62), 0 16px 48px -8px hsl(22 100% 50% / .6); }

/* funil: da fatia dos custos (em cima) até a lupa inteira (embaixo) */
.funil {
  position: relative; height: 48px; margin: 0 2px; transform-origin: 50% 0; transform: scaleY(0); opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.aberta .funil { transform: none; opacity: 1; }
.funil svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* legenda do funil: embaixo à direita, sempre dentro do funil (a fatia dos custos fica à direita) */
.funil-leg { position: absolute; right: 8px; bottom: 5px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--fg, var(--tinta)); font-variant-numeric: tabular-nums; }
.funil polygon { fill: hsl(22 100% 55% / .2); }
.funil line { stroke: var(--regua-traco-forte, var(--linha-forte)); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

/* lupa: cada custo com a sua cor (cascata.js CORES), largura proporcional ao total dos custos */
.lupa-barra {
  display: flex; height: 56px; border: 2px solid var(--regua-moldura, var(--tinta)); border-radius: 10px;
  overflow: hidden; background: var(--regua-fundo, var(--tinta));
}
.lseg {
  position: relative; flex: 0 0 calc(var(--fc, 0) * 100%); min-width: 0; overflow: hidden; display: flex; align-items: center;
  background: var(--cor); color: var(--cor-txt); box-shadow: inset 2px 0 0 var(--regua-sep, var(--creme));
  transition: flex-basis var(--dur-seg) var(--ease), opacity var(--dur-1) var(--ease);
}
.lseg:first-child { box-shadow: none; }
.lseg.listrado, .amostra-listrada, .chip-c.listrado i, .lf.listrado::before { background: var(--listras), var(--cor); }
.lseg[tabindex] { cursor: pointer; }
.lseg:focus-visible { outline: 3px solid var(--creme); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--tinta); }
.lseg-rot { display: flex; flex-direction: column; padding: 0 8px; white-space: nowrap; line-height: 1.2; font-size: 12px; opacity: 0; transition: opacity var(--dur-2) var(--ease); pointer-events: none; }
.lseg-rot b { font-size: 13px; font-weight: 700; }
.lv-completo, .lv-curto { font-weight: 500; font-variant-numeric: tabular-nums; }
.lupa.tem-destaque .lseg:not(.destaque) { opacity: .35; }
.lseg.destaque { box-shadow: inset 0 0 0 3px var(--creme), inset 0 0 0 5px var(--tinta); }

/* rótulos de fora da lupa: abaixo da barra, na ordem da barra, com linha-guia em cotovelo */
.lupa-fora { position: relative; height: 0; }
.lf {
  position: absolute; top: 14px; display: none; flex-direction: column; padding-left: 14px; white-space: nowrap; line-height: 1.2;
  font-size: 12px; color: var(--fg-2, var(--texto-2)); opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.lf b { font-size: 13px; font-weight: 700; color: var(--fg, var(--tinta)); }
.lf span { font-weight: 500; font-variant-numeric: tabular-nums; }
.lf::before { content: ''; position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 2px; background: var(--cor); box-shadow: 0 0 0 1px var(--regua-moldura, hsl(20 30% 20% / .3)); }
.lf-guias { position: absolute; left: 0; top: 0; width: 100%; height: 14px; overflow: visible; pointer-events: none; }
.lg { display: none; stroke: var(--regua-traco-forte, var(--linha-forte)); stroke-width: 1.25px; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.lf.on, .lg.on { opacity: 1; }

/* chips (celular, prévia e quando os rótulos de fora não cabem lado a lado) */
.lupa-chips {
  display: none; list-style: none; margin: var(--e3) 0 0; padding: 0; gap: 6px var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); font-size: .875rem; color: var(--fg, var(--tinta));
}
.chip-c { display: flex; align-items: center; gap: var(--e2); min-width: 0; line-height: 1.25; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.chip-c.on { opacity: 1; }
.chip-c.zero { display: none; }
.chip-c i { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--cor); box-shadow: 0 0 0 1px var(--regua-moldura, hsl(20 30% 20% / .3)); }
.chip-c span { min-width: 0; overflow-wrap: anywhere; }
.chip-c b { margin-left: auto; padding-left: var(--e2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-c[data-chave] { cursor: pointer; }
.lupa-chips.tem-destaque .chip-c.on:not(.destaque) { opacity: .4; }

/* dica (hover, foco, toque): só existe na tela enquanto há destaque (hidden = display:none, não ocupa área rolável) */
.regua-dica {
  position: absolute; z-index: 5; left: 0; top: 0; max-width: min(100%, 32rem); padding: 6px 10px; border-radius: var(--r-input);
  background: var(--creme); color: var(--tinta); font-size: .8125rem; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 24px -8px hsl(20 60% 8% / .6); pointer-events: none;
}

@media screen {
  .regua-bloco[data-m-leg="curta"] .fl-longa, .regua-bloco[data-m-leg="nada"] .funil-leg { display: none; }
  .regua-bloco[data-m-linhas="1"] .rp-topo { height: 48px; }
  .regua-bloco[data-m-linhas="2"] .rp-topo { height: 92px; }
  .regua-bloco[data-m-linhas="2"] .rp-fora-resto { bottom: 57px; }
  .regua-bloco[data-m-resto="fora"] .rp-fora-resto, .regua-bloco[data-m-custo="fora"] .rp-fora-custo { display: flex; }
  .regua-bloco[data-m-custo="fora"] .rp-chave { display: block; }
  .dividida[data-m-resto="dentro"] .rp-resto .rp-rot, .dividida[data-m-custo="dentro"] .rp-fixos .rp-rot { opacity: 1; }

  .lseg.on[data-m="completo"] .lseg-rot, .lseg.on[data-m="curto"] .lseg-rot, .lseg.on[data-m="pct"] .lseg-rot { opacity: 1; transition-delay: var(--dur-2); }
  .lseg[data-m="completo"] .lv-curto, .lseg[data-m="curto"] .lv-completo, .lseg[data-m="pct"] .lv-completo, .lseg[data-m="pct"] b { display: none; }
  .regua-bloco[data-m-lupa="rotulos"][data-m-fora="1"] .lupa-fora { height: 54px; }
  .regua-bloco[data-m-lupa="rotulos"] .lf[data-m="fora"] { display: flex; }
  .regua-bloco[data-m-lupa="rotulos"] .lg-m[data-m="fora"] { display: inline; }
  .lf { left: var(--m-x); }
  .regua-bloco[data-m-lupa="chips"] .lupa-chips { display: grid; }
}

@media (max-width: 640px) {
  .regua { height: 52px; }
  .funil { height: 36px; }
  .funil-leg { bottom: 4px; }
  .lupa-barra { height: 44px; }
  .lupa-chips { grid-template-columns: 1fr 1fr; gap: 8px var(--e3); }
}

/* prévia: compacta, sem rótulos; legenda mínima (cor + nome) */
.compacta .regua { height: 36px; border-radius: 10px; }
.compacta .funil { height: 18px; }
.compacta .lupa-barra { height: 22px; border-radius: 8px; }
.compacta .rp-topo, .compacta .lupa-fora, .compacta .lseg-rot { display: none; }
.compacta .rp, .compacta .lseg { transition-duration: 200ms; }
.compacta .lupa-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--e3); font-size: .8125rem; }
.compacta.vazia .funil, .compacta.vazia .lupa { display: none; }

/* ---------- início ---------- */
.hero {
  position: relative; overflow: hidden; padding: var(--e6) 0 var(--e8);
  background:
    var(--grao),
    radial-gradient(ellipse 48% 62% at 76% 42%, hsl(22 100% 55% / .13), transparent 72%),
    linear-gradient(180deg, var(--tinta) 0%, var(--tinta) 30%, var(--grafite) 100%);
}
.hero-grade { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--e6); align-items: center; }
.hero-texto { position: relative; z-index: 1; min-width: 0; }
.hero-titulo { font-size: clamp(2.4rem, 6.2vw, 4.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; max-width: 15ch; color: var(--creme); }
.hero-titulo em { font-style: italic; color: var(--laranja); font-weight: 500; }
.hero-frase { margin-top: var(--e5); font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.45; max-width: 40ch; font-weight: 500; color: var(--creme); }
.hero-sub { margin-top: var(--e3); color: var(--texto-2-escuro); max-width: 52ch; font-size: 1.0625rem; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.garantias { margin-top: var(--e4); font-size: .9375rem; color: var(--texto-2-escuro); }
.garantias span { color: var(--laranja); }

.hero-foto { position: relative; min-width: 0; margin-right: calc(-1 * var(--e5)); }
.hero-foto::before { /* brilho atrás da ampulheta; inset positivo: não cria área rolável */
  content: ''; position: absolute; inset: 12% 8% 6%; pointer-events: none;
  background: radial-gradient(closest-side, hsl(22 100% 55% / .25), transparent);
}
.hero-foto .foto { position: relative; }
.hero-foto img {
  aspect-ratio: 4 / 5; max-height: min(80vh, 660px); object-fit: cover; object-position: 50% 50%;
  /* lighten: o fundo grafite-frio da foto some no fundo tinta; só a luz da ampulheta aparece */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 54% 54% at 50% 50%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 54% 54% at 50% 50%, #000 45%, transparent 100%);
}

.hero-figura { margin: var(--e6) 0 0; position: relative; z-index: 1; }
.hero-figura figcaption { margin-top: var(--e2); text-align: right; font-size: .75rem; color: var(--texto-2-escuro); font-style: italic; }

@media (max-width: 859px) {
  .hero { padding: 0 0 var(--e7); }
  .hero-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-foto { order: -1; margin: 0 calc(-1 * var(--gutter)); }
  .hero-foto::before { inset: 10% 15% 20%; }
  .hero-foto img {
    aspect-ratio: auto; height: min(50vh, 460px); max-height: none; object-position: 50% 42%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 62%, transparent 100%);
  }
  .hero-texto { margin-top: calc(-1 * var(--e7)); }
}
@media (max-width: 480px) {
  .hero-titulo { font-size: 2.5rem; }
  .acoes .btn { flex: 1 1 100%; }
}

.secao { padding: var(--e8) 0 var(--e7); }
.secao-linha { border-top: 1px solid var(--linha); }
.secao h2 { margin-bottom: var(--e5); }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e6); counter-reset: none; }
.passos li { display: flex; flex-direction: column; gap: var(--e3); padding-top: var(--e4); border-top: 2px solid var(--tinta); }
.passo-num { font-family: var(--serifa); font-size: 2.25rem; line-height: 1; color: var(--laranja-700); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.passos h3 { font-size: 1.125rem; margin-bottom: var(--e1); }
.passos p, .entra p { color: var(--texto-2); }
@media (max-width: 860px) { .passos { grid-template-columns: 1fr; gap: var(--e5); } }

/* como funciona: foto da escritura ao lado dos passos */
.como-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e7) var(--e8); align-items: center; }
.como-foto { border-radius: var(--r-cartao); overflow: hidden; background: var(--tinta); box-shadow: var(--sombra-foto); aspect-ratio: 4 / 4.6; }
.como-foto .foto, .como-foto img { height: 100%; }
.como-foto img { object-fit: cover; object-position: 50% 82%; transition: transform 900ms var(--ease); }
.como-foto:hover img { transform: scale(1.04); }
.como .passos { grid-template-columns: minmax(0, 1fr); gap: 0; }
.como .passos li { flex-direction: row; align-items: baseline; gap: var(--e5); padding: var(--e5) 0; border-top: 1px solid var(--linha); }
.como .passos li:first-child { border-top: 2px solid var(--tinta); }
.como .passo-num { flex: none; width: 3.25rem; font-size: 2.5rem; }
.como .passos h3 { font-size: 1.1875rem; }
@media (max-width: 859px) {
  .como-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .como-foto { aspect-ratio: 16 / 10; }
}
@media (max-width: 480px) { .como .passo-num { width: 2.5rem; font-size: 2rem; } .como .passos li { gap: var(--e4); } }

.entra { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5) var(--e6); }
.entra li { display: flex; gap: var(--e4); align-items: flex-start; }
.entra h3 { font-size: 1.0625rem; margin-bottom: 2px; }
@media (max-width: 640px) { .entra { grid-template-columns: 1fr; } }

.amostra { flex: none; width: 16px; height: 16px; margin-top: 4px; border-radius: 4px; background: var(--cor, var(--laranja)); box-shadow: inset 0 0 0 1px hsl(20 30% 20% / .18); }
.amostra-dupla { background: linear-gradient(90deg, var(--laranja) 50%, transparent 50%), var(--listras), var(--terra-escuro); }

.cta-fim { padding-bottom: var(--e9); }
.cta-fim .cta-faixa { margin-top: var(--e4); }

/* ---------- formulário ---------- */
.form-pagina { padding-bottom: var(--e8); }
.banda {
  position: relative; overflow: hidden;
  background:
    var(--grao),
    radial-gradient(ellipse 45% 100% at 88% 70%, hsl(22 100% 55% / .12), transparent 70%),
    linear-gradient(180deg, var(--tinta) 0%, var(--grafite) 100%);
}
.banda-foto { position: absolute; top: 0; right: 0; bottom: 0; width: min(54%, 720px); }
.banda-foto img {
  height: 100%; object-fit: cover; object-position: 50% 74%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .85) 48%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .85) 48%, #000 100%);
}
.form-cab { position: relative; z-index: 1; padding-top: var(--e7); padding-bottom: calc(var(--e8) + var(--e3)); }
.sobretitulo { width: fit-content; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--laranja-claro); margin-bottom: var(--e3); }
.form-cab h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: -0.02em; color: var(--creme); }
.form-cab p:last-child { margin-top: var(--e3); color: var(--texto-2-escuro); font-size: 1.0625rem; max-width: 40ch; }
.form-pagina .form-grade { margin-top: calc(-1 * var(--e7)); position: relative; z-index: 1; }
@media (max-width: 640px) {
  .banda-foto { display: none; }
  .form-cab { padding-top: var(--e6); padding-bottom: var(--e8); }
  .form-pagina .form-grade { margin-top: calc(-1 * var(--e6)); }
}

.form-grade { display: grid; grid-template-columns: 7fr 5fr; grid-template-areas: "campos previa" "enviar previa"; gap: var(--e6) var(--e7); align-items: start; }
.form-campos { grid-area: campos; display: grid; gap: var(--e4); min-width: 0; }
.previa { grid-area: previa; position: sticky; top: 24px; align-self: start; min-width: 0; }
.form-enviar { grid-area: enviar; }
@media (max-width: 899px) {
  .form-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "campos" "previa" "enviar"; gap: var(--e5); }
  .previa { position: static; }
  .form-enviar .btn { width: 100%; }
}

.passo-form { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-cartao); padding: var(--e5); box-shadow: var(--sombra-1); min-width: 0; }
@media (max-width: 640px) { .passo-form { padding: var(--e4); } }
.passo-form h2 { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e4); }
.passo-form h2 .passo-num { font-size: 1.5rem; }
label, .uf-campo legend { display: block; font-size: .9375rem; font-weight: 600; margin-bottom: var(--e2); }
.opcional { font-weight: 400; color: var(--texto-2); }
input[type="text"], input[type="email"] {
  width: 100%; min-width: 0; height: 52px; padding: 0 var(--e4); font: inherit; font-size: 1.0625rem; color: var(--tinta);
  font-variant-numeric: tabular-nums; background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--r-input);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
input[type="text"]::placeholder, input[type="email"]::placeholder { color: var(--texto-2); opacity: 1; }
input[type="text"]:hover, input[type="email"]:hover { border-color: var(--tinta); }
input[type="text"]:focus, input[type="email"]:focus { outline: none; border-color: var(--laranja-700); box-shadow: 0 0 0 3px hsl(22 100% 36% / .25); }
input[type="text"]:focus-visible, input[type="email"]:focus-visible { outline: 3px solid var(--laranja-700); outline-offset: 2px; box-shadow: none; }

/* diálogo do e-mail: último passo antes do servidor (16 px de margem no celular, sem rolagem lateral) */
.dlg-email { width: min(34rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); /* max-width: none anula o do navegador (100% - 6px - 2em = 19 px de margem a 390) */ overflow-y: auto; overflow-x: hidden; }
.dlg-email .dlg-head h2 { font-size: 1.375rem; }
.dlg-email input[type="email"] { display: block; }
.dlg-erro { margin-top: var(--e4); padding: var(--e3) var(--e4); border-left: 4px solid var(--terra); background: var(--creme); border-radius: 0 var(--r-input) var(--r-input) 0; font-size: .9375rem; }
.dlg-erro strong { color: var(--terra); }
.dlg-acoes { margin-top: var(--e5); }
@media (max-width: 640px) { .dlg-email { padding: var(--e4); } .dlg-acoes .btn { width: 100%; } }
.consent-aviso { margin-bottom: var(--e4); color: var(--texto-2); font-size: .9375rem; max-width: 60ch; }
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--e3); align-items: start; margin: var(--e4) 0 0; font-weight: 400; font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--laranja-700); cursor: pointer; }
.consent input:focus-visible { outline: 3px solid var(--laranja-700); outline-offset: 2px; }
.consent span { overflow-wrap: anywhere; }
.consent + .consent { margin-top: var(--e3); }
.btn[aria-busy="true"] { cursor: progress; opacity: .8; }

.campo-grupo { display: flex; align-items: stretch; border: 1px solid var(--linha-forte); border-radius: var(--r-input); background: var(--papel); transition: border-color var(--dur-1) var(--ease); }
.campo-grupo:hover { border-color: var(--tinta); }
.campo-grupo:focus-within { outline: 3px solid var(--laranja-700); outline-offset: 2px; }
.campo-grupo input[type="text"] { border: 0; flex: 1; }
.campo-grupo input[type="text"]:focus, .campo-grupo input[type="text"]:focus-visible { outline: none; box-shadow: none; }
.campo-prefixo, .campo-sufixo { display: flex; align-items: center; padding: 0 var(--e4); color: var(--texto-2); font-weight: 600; white-space: nowrap; background: var(--creme); }
.campo-prefixo { border-right: 1px solid var(--linha); border-radius: var(--r-input) 0 0 var(--r-input); font-family: var(--serifa); font-style: italic; font-size: 1.0625rem; }
.campo-sufixo { border-left: 1px solid var(--linha); border-radius: 0 var(--r-input) var(--r-input) 0; }
.campo-pct { max-width: 12rem; }

.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.campos-2 > div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
@media (max-width: 640px) { .campos-2 { grid-template-columns: 1fr; } }
.soma { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px dashed var(--linha); color: var(--texto-2); display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.soma strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

.uf-campo { border: 0; margin: 0 0 var(--e5); padding: 0; min-width: 0; }
.uf-regiao { padding: var(--e2) 0 var(--e3); }
.uf-regiao + .uf-regiao { border-top: 1px solid var(--linha); padding-top: var(--e3); }
.uf-regiao-nome { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); font-weight: 700; margin-bottom: var(--e2); }
.uf-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px; }
.uf-peca {
  position: relative; margin: 0; min-height: 48px; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--linha-forte); border-radius: var(--r-input); background: var(--papel); cursor: pointer; line-height: 1.1;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.uf-peca input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.uf-sigla { font-weight: 700; font-size: .9375rem; letter-spacing: .02em; }
.uf-aliq { font-size: .75rem; color: var(--texto-2); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.uf-peca:hover { border-color: var(--tinta); background: var(--laranja-10); }
.uf-peca:has(input:checked) { background: var(--tinta); border-color: var(--tinta); color: var(--creme); }
.uf-peca:has(input:checked) .uf-aliq { color: var(--laranja); }
.uf-peca:has(input:focus-visible) { outline: 3px solid var(--laranja-700); outline-offset: 2px; z-index: 1; }

.campo-aliq { margin-top: var(--e2); }
.uf-regra { margin-top: var(--e3); padding: var(--e3) var(--e4); border-left: 3px solid var(--laranja); background: var(--creme); border-radius: 0 var(--r-input) var(--r-input) 0; font-size: .9375rem; }
.uf-regra-vazia { color: var(--texto-2); }
.uf-usar { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.dica { margin-top: var(--e1); font-size: .9375rem; }

.previa { background: var(--papel); border: 2px solid var(--tinta); border-radius: var(--r-cartao); padding: var(--e5); box-shadow: var(--sombra-1); }
.previa-t { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--e3); display: flex; align-items: center; gap: var(--e2); }
.previa-t::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); }
.previa-dados { margin: var(--e4) 0 0; display: grid; gap: 0; }
.previa-dados div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); padding: var(--e2) 0; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.previa-dados dt { color: var(--texto-2); font-size: .9375rem; }
.previa-dados dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.previa-dados div:first-child { border-top: 0; }
.previa-dados div:first-child dd { font-size: 1.25rem; }
.previa-ilustra { margin: var(--e5) 0 0; padding-top: var(--e4); border-top: 1px dashed var(--linha); }
.previa-ilustra figcaption { margin-top: var(--e2); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--e3); border-radius: var(--r-chip); background: var(--laranja-10); color: var(--laranja-700); font-size: .8125rem; font-weight: 600; }
.chip-alerta { background: var(--terra); color: #fff; }

/* ---------- resultado ---------- */
.resultado { padding-bottom: var(--e8); }
.abertura {
  position: relative;
  background:
    var(--grao),
    radial-gradient(ellipse 50% 70% at 92% 105%, hsl(22 100% 55% / .16), transparent 70%),
    linear-gradient(180deg, var(--tinta) 0%, var(--grafite) 100%);
}
.abertura-in { padding-top: var(--e6); padding-bottom: var(--e7); }
.contexto { font-size: .9375rem; color: var(--fg-2, var(--texto-2)); overflow-wrap: anywhere; }
.cenario { display: flex; flex-direction: column; }
.quadro { margin-top: var(--e5); }
.quadro h1 { font-size: clamp(1.625rem, 4.2vw, 2.5rem); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: lining-nums; color: var(--fg, var(--tinta)); }
.numero-grande { margin-top: var(--e3); font: 700 clamp(2.25rem, 9vw, 4.5rem)/1 var(--sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--fg, var(--tinta)); white-space: nowrap; max-width: 100%; }
.numero-grande.negativo { color: var(--terra); }
.numero-rotulo { margin-top: var(--e2); font-size: .9375rem; color: var(--fg-2, var(--texto-2)); }
.numero-rotulo strong { color: var(--terra); }
.escuro .numero-grande.negativo, .escuro .numero-rotulo strong { color: var(--terra-claro); }
.escuro .numero-grande { text-shadow: 0 2px 30px hsl(22 100% 55% / .12); }
.custa { margin-top: var(--e4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); font-size: 1.0625rem; }
.custa strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.selo { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--e3); border-radius: var(--r-chip); background: var(--laranja-10); color: var(--laranja-700); font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abertura .regua-bloco { margin-top: var(--e6); }
.escuro .selo { background: hsl(22 100% 55% / .14); color: var(--laranja-claro); box-shadow: inset 0 0 0 1px hsl(22 100% 55% / .35); }
.res-corpo .custos { margin-top: var(--e6); }

.custos { margin-top: var(--e6); }
.custos h2 { font-size: 1.5rem; margin-bottom: var(--e3); }
.lista-custos { list-style: none; margin: 0; padding: 0; }
.linha-custo, .lc-total, .lc-sub {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--e3) var(--e4); align-items: start;
  padding: var(--e3) 0; border-bottom: 1px solid var(--linha);
}
.linha-custo { opacity: .35; transition: opacity var(--dur-2) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.linha-custo.destaque { background: var(--laranja-10); box-shadow: -8px 0 0 var(--laranja-10), 8px 0 0 var(--laranja-10); }
.linha-custo.ativo { opacity: 1; }
.lc-nome { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lc-nome small, .lc-valor small { display: block; font-weight: 400; font-size: .875rem; color: var(--texto-2); }
.lc-valor { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-total, .lc-sub { grid-template-columns: minmax(0, 1fr) auto; }
.lc-total { border-bottom: 0; border-top: 2px solid var(--tinta); padding-top: var(--e3); font-size: 1.0625rem; }
.lc-total .lc-valor { font-size: 1.125rem; }
.lc-sub { color: var(--texto-2); }
.lc-sub .lc-valor { font-weight: 600; }

.grupo-venda { margin-top: var(--e6); padding: var(--e5); border-radius: var(--r-cartao); background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra-1); }
@media (max-width: 640px) { .grupo-venda { padding: var(--e4); } }
.grupo-venda h3 { font-family: var(--serifa); font-size: 1.25rem; font-weight: 600; }
.grupo-venda .nota { margin-top: var(--e2); color: var(--texto-2); font-size: .9375rem; }
.venda-dados { margin: var(--e3) 0 var(--e2); }
.venda-dados div { display: flex; justify-content: space-between; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px dashed var(--linha); flex-wrap: wrap; }
.venda-dados dt { color: var(--texto-2); }
.venda-dados dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pergunta { margin-top: var(--e7); padding-top: var(--e6); border-top: 1px solid var(--linha); }
.pergunta-t { font-family: var(--serifa); font-size: 1.375rem; line-height: 1.3; max-width: 44ch; font-weight: 500; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-top: var(--e5); }
@media (max-width: 640px) { .opcoes { grid-template-columns: 1fr; } }
.opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); text-align: left; cursor: pointer;
  padding: var(--e4) var(--e5); min-height: 76px; border-radius: var(--r-cartao); border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); font: inherit;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.opcao:hover { background: var(--laranja-10); }
.opcao-t { font-weight: 700; font-size: 1.0625rem; }
.opcao-d { font-size: .9375rem; color: var(--texto-2); }
.opcao[aria-pressed="true"] { background: var(--tinta); color: var(--creme); }
.opcao[aria-pressed="true"] .opcao-d { color: hsl(28 30% 82%); }
.aviso { margin-top: var(--e4); padding: var(--e4) var(--e5); border-left: 3px solid var(--laranja); background: var(--papel); border-radius: 0 var(--r-cartao) var(--r-cartao) 0; font-weight: 500; }
.venda-form { margin-top: var(--e5); display: grid; gap: var(--e4); max-width: 40rem; }

.cta-faixa {
  margin-top: var(--e7); border-radius: var(--r-cartao); background: var(--grao), var(--tinta); color: var(--creme);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 420px;
  position: relative; overflow: hidden; box-shadow: var(--sombra-foto);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s;
}
.cta-faixa::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--tinta) 0 62%, var(--laranja) 62% 92%, var(--terra) 92%); }
.cta-faixa.espera { opacity: 0; transform: translateY(8px); visibility: hidden; transition: none; }
.cta-foto { position: absolute; inset: 0; z-index: 0; }
.cta-foto img {
  height: 100%; object-fit: cover; object-position: 18% 50%;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, rgb(0 0 0 / .55) 50%, transparent 68%);
          mask-image: linear-gradient(90deg, #000 0%, #000 30%, rgb(0 0 0 / .55) 50%, transparent 68%);
}
.cta-corpo { grid-column: 2; position: relative; z-index: 1; padding: var(--e7) var(--e7) var(--e7) var(--e5); min-width: 0; }
.cta-faixa h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 500; line-height: 1.15; max-width: 20ch; }
.cta-faixa p { margin-top: var(--e3); color: var(--texto-2-escuro); max-width: 42ch; }
.cta-acoes { display: flex; flex-direction: column; align-items: stretch; gap: var(--e3); margin-top: var(--e6); max-width: 24rem; }
.cta-faixa :focus-visible { outline-color: var(--laranja); }
@media (max-width: 859px) {
  .cta-faixa { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cta-foto { position: relative; inset: auto; }
  .cta-foto img {
    height: auto; aspect-ratio: 16 / 9; object-position: 30% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  }
  .cta-corpo { grid-column: 1; padding: 0 var(--e5) var(--e6); margin-top: calc(-1 * var(--e5)); }
  .cta-acoes { max-width: none; }
}
@media (max-width: 640px) { .cta-corpo { padding: 0 var(--e4) var(--e6); } .cta-acoes .btn { width: 100%; padding: 0 var(--e4); } }

.obs { margin-top: var(--e6); font-size: .875rem; color: var(--texto-2); max-width: 72ch; }
.obs strong { color: var(--tinta); }
.aviso-impressao { display: none; }

/* ---------- diálogo da tabela de estados ---------- */
dialog { border: 0; border-radius: var(--r-cartao); padding: var(--e5); width: min(56rem, calc(100vw - 2rem)); max-height: 85vh; background: var(--papel); color: var(--tinta); box-shadow: 0 25px 50px -12px hsl(20 60% 10% / .35); }
dialog::backdrop { background: hsl(20 20% 8% / .6); }
.dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e4); margin-bottom: var(--e4); }
.dlg-head h2 { font-size: 1.375rem; }
.tabela-wrap { overflow: auto; max-height: 60vh; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { border-bottom: 1px solid var(--linha); padding: var(--e2) var(--e3); text-align: left; vertical-align: top; }
th { background: var(--creme); position: sticky; top: 0; font-weight: 700; border-bottom: 2px solid var(--tinta); }
td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- toast ---------- */
#toast {
  position: fixed; right: var(--e4); bottom: var(--e4); left: var(--e4); margin-left: auto; max-width: 26rem; z-index: 50;
  padding: var(--e4) var(--e5); border-radius: var(--r-input); background: var(--tinta); color: var(--creme);
  border-left: 4px solid var(--laranja); box-shadow: var(--sombra-1);
}
#toast strong { display: block; color: var(--laranja); margin-bottom: 2px; }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: hsl(28 30% 82%); padding: var(--e7) var(--e5) var(--e5); font-size: .9375rem; }
.rodape-grid { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e6); }
.rodape h3 { color: var(--creme); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--e3); }
.rodape a, .rodape span { display: block; color: hsl(28 30% 82%); text-decoration: none; padding: 3px 0; }
.rodape a:hover { color: var(--laranja); }
.rodape :focus-visible { outline-color: var(--laranja); }
.rodape p { margin-top: var(--e3); }
.rodape-marca { display: flex !important; align-items: center; gap: var(--e2); color: var(--creme) !important; font-weight: 700; }
.rodape-marca img { height: 56px; width: auto; max-width: 220px; object-fit: contain; }
.rodape-copy { max-width: 72rem; margin: var(--e6) auto 0; padding-top: var(--e5); border-top: 1px solid var(--grafite); text-align: center; font-size: .875rem; }
.rodape-copy span { display: inline; padding: 0; }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; scroll-behavior: auto !important; }
  .revela { opacity: 1; transform: none; }
  .btn:hover, .btn-primario:hover, .como-foto:hover img { transform: none; }
}

/* ---------- impressão: indisponível (sem PDF por decisão do dono, 15/10). Só o aviso sai no papel. ---------- */
@media print {
  html, body { background: #fff; color: #000; }
  body > :not(.aviso-impressao) { display: none !important; }
  .aviso-impressao { display: block !important; margin: 0; padding: 20mm 0; font: 14pt/1.4 var(--sans); color: #000; }
}

/* topo no celular: nome quebra em 2 linhas em vez de reticências; ação não quebra */
.topo .btn-texto { white-space: nowrap; flex: none; }
@media (max-width: 480px) {
  .marca { gap: var(--e2); font-size: .9375rem; line-height: 1.15; }
  .marca span { white-space: normal; max-width: 8.5rem; }
  .topo .btn-texto { padding: 0 var(--e2); font-size: .875rem; }
}