/* Optmos · site público · uma folha só.
   Tokens do DS v2 (docs/design/optmos-ds-v2-unificado.html) como variáveis.
   Grade de 4px, superfícies tonais sem sombra, nada abaixo de 12px. */

:root {
  --p: #F04A14;
  --pp: #FF5F2A;
  --op: #0A0A0A;          /* texto sobre Ember: 5,3:1 (branco daria 3,7:1) */
  --pc: #3D1200;
  --opc: #FFB49E;
  --t: #4ECDC4;
  --w: #F59E0B;
  --su: #22C55E;
  --e: #EF4444;
  --bg: #0A0A0A;
  --sf: #141412;
  --e1: #1A1510;
  --e2: #1F160F;
  --e3: #24180E;
  --ol: #252521;
  --olv: #1A1A17;
  --osf: #EDECEA;
  --osfv: #888880;
  --f: 'Plus Jakarta Sans', system-ui, sans-serif;
  --m: 'DM Mono', ui-monospace, monospace;
  --rxs: 4px; --rsm: 8px; --rmd: 12px; --rlg: 16px; --rxl: 28px; --rfull: 9999px;
  --sp4: 4px; --sp8: 8px; --sp12: 12px; --sp16: 16px; --sp20: 20px; --sp24: 24px;
  --sp32: 32px; --sp40: 40px; --sp48: 48px; --sp64: 64px; --sp80: 80px; --sp96: 96px;
  --std: cubic-bezier(.2, 0, 0, 1);
  --largura: 1120px;
  --gutter: 16px;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--osf);
  font-family: var(--f);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--osf); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--osfv); }
a:hover { color: var(--p); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--t); outline-offset: 3px; border-radius: var(--rxs); }
::selection { background: var(--p); color: var(--op); }
h1, h2, h3, h4, p, ul, ol, dl, table, figure { margin: 0; }
ul, ol { padding-left: 20px; }
b, strong { font-weight: 600; color: var(--osf); }
em { font-style: normal; color: var(--p); }
code { font-family: var(--m); font-size: 14px; color: var(--p); }

/* ── Tipografia (escala do DS) ─────────────────────────────── */
.display { font-size: 36px; line-height: 44px; font-weight: 800; letter-spacing: -0.5px; }
@media (min-width: 768px) { .display { font-size: 45px; line-height: 52px; } }
@media (min-width: 1200px) { .display { font-size: 57px; line-height: 64px; letter-spacing: -1px; } }
.headline { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.25px; }
@media (min-width: 768px) { .headline { font-size: 32px; line-height: 40px; } }
@media (min-width: 1200px) { .headline { font-size: 36px; line-height: 44px; } }
.title { font-size: 22px; line-height: 28px; font-weight: 600; }
.title-m { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .15px; }
.body-l { font-size: 16px; line-height: 24px; }
.body-m { font-size: 14px; line-height: 20px; }
.body-s { font-size: 12px; line-height: 16px; letter-spacing: .4px; }
.label {
  font-family: var(--m); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--osfv);
}
.label.p { color: var(--p); }
.lead { font-size: 18px; line-height: 28px; color: var(--osfv); }
@media (min-width: 768px) { .lead { font-size: 20px; line-height: 32px; } }
.muted { color: var(--osfv); }

/* ── Layout ────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip {
  position: absolute; left: var(--sp16); top: -100px;
  background: var(--p); color: var(--op); padding: var(--sp8) var(--sp16);
  border-radius: var(--rsm); font-weight: 600; text-decoration: none; z-index: 200;
}
.skip:focus { top: var(--sp16); color: var(--op); }

/* ── Header e nav ──────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--ol);
}
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp16); min-height: 64px; }
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca svg { height: 28px; width: auto; }
.menu-btn {
  display: none; appearance: none; background: transparent; color: var(--osf);
  border: 1px solid var(--ol); border-radius: var(--rsm); padding: var(--sp8) var(--sp12);
  font: 500 14px/20px var(--f); cursor: pointer;
}
.menu-btn:hover { border-color: var(--osfv); }
.nav { display: flex; align-items: center; gap: var(--sp4); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--sp4); }
.nav a { text-decoration: none; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: var(--sp8) var(--sp12);
  border-radius: var(--rfull); color: var(--osfv); font: 500 14px/20px var(--f);
}
.nav-link:hover { color: var(--osf); background: var(--e1); }
.nav-link[aria-current="page"] { color: var(--osf); background: var(--e2); }
.nav .acoes { display: flex; align-items: center; gap: var(--sp8); margin-left: var(--sp8); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp8);
  min-height: 44px; padding: var(--sp12) var(--sp20); border-radius: var(--rfull);
  font: 600 14px/20px var(--f); text-decoration: none; border: 1px solid transparent;
  transition: background .2s var(--std), color .2s var(--std), border-color .2s var(--std);
}
.btn-p { background: var(--p); color: var(--op); }
.btn-p:hover { background: var(--pp); color: var(--op); }
.btn-t { background: var(--pc); color: var(--opc); }
.btn-t:hover { background: var(--e3); color: var(--opc); }
.btn-o { background: transparent; color: var(--osf); border-color: var(--ol); }
.btn-o:hover { border-color: var(--p); color: var(--p); }
.btn-l { min-height: 52px; padding: var(--sp16) var(--sp24); font-size: 16px; }

@media (max-width: 899px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; }
  .topo[data-menu="open"] .nav { display: block; }
  .topo[data-menu="open"] .wrap { flex-wrap: wrap; }
  .topo[data-menu="open"] .nav { width: 100%; padding: var(--sp8) 0 var(--sp16); border-top: 1px solid var(--ol); }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { width: 100%; min-height: 44px; }
  .nav .acoes { flex-direction: column; align-items: stretch; margin: var(--sp12) 0 0; }
  html.no-js .nav { display: block; width: 100%; padding: var(--sp8) 0 var(--sp16); border-top: 1px solid var(--ol); }
  html.no-js .topo .wrap { flex-wrap: wrap; }
  html.no-js .menu-btn { display: none; }
}

/* ── Seções ────────────────────────────────────────────────── */
main { display: block; }
.sec { padding: var(--sp48) 0; border-top: 1px solid var(--ol); }
.sec:first-child { border-top: 0; }
@media (min-width: 768px) { .sec { padding: var(--sp64) 0; } }
@media (min-width: 1200px) { .sec { padding: var(--sp80) 0; } }
.sec-h { display: grid; gap: var(--sp12); max-width: 760px; margin-bottom: var(--sp32); }
.sec-h .lead { margin-top: var(--sp4); }

/* Hero */
.hero { padding: var(--sp48) 0 var(--sp40); }
@media (min-width: 768px) { .hero { padding: var(--sp80) 0 var(--sp64); } }
.hero .wrap { display: grid; gap: var(--sp24); max-width: 900px; }
.hero .eyebrow { display: flex; flex-wrap: wrap; gap: var(--sp8) var(--sp16); align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: var(--sp8);
  font-family: var(--m); font-size: 12px; line-height: 16px; letter-spacing: .5px;
  color: var(--osf); background: var(--e1); border: 1px solid var(--ol);
  border-radius: var(--rfull); padding: var(--sp4) var(--sp12);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: var(--sp12); margin-top: var(--sp8); }
.hero .nota { color: var(--osfv); font-size: 14px; line-height: 20px; max-width: 640px; }

/* Cartões */
.grade { display: grid; gap: var(--sp16); }
@media (min-width: 768px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grade.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartao {
  background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rmd);
  padding: var(--sp24); display: grid; gap: var(--sp12); align-content: start;
}
.cartao .label { margin-bottom: var(--sp4); }
.cartao p { color: var(--osfv); }
.cartao p b { color: var(--osf); }

/* Passos */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp8); counter-reset: passo; }
.passo {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp16);
  padding: var(--sp20) 0; border-top: 1px solid var(--ol);
}
.passo:first-child { border-top: 0; }
.passo .n { font-family: var(--m); font-size: 14px; line-height: 20px; color: var(--p); padding-top: var(--sp4); }
.passo .corpo { display: grid; gap: var(--sp8); }
.passo .corpo p { color: var(--osfv); }
.passo .quem { display: grid; gap: var(--sp8); }
@media (min-width: 768px) { .passo .quem { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp16); } }
.passo .quem > div { background: var(--sf); border: 1px solid var(--olv); border-radius: var(--rsm); padding: var(--sp12) var(--sp16); }
.passo .quem .label { margin-bottom: var(--sp4); }
.passo .quem p { color: var(--osf); font-size: 14px; line-height: 20px; }
.passos.linha .passo { padding: var(--sp12) 0; }

/* Tabela */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--ol); border-radius: var(--rmd); background: var(--e1); }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
th, td { text-align: left; vertical-align: top; padding: var(--sp12) var(--sp16); border-top: 1px solid var(--ol); }
thead th { border-top: 0; background: var(--e2); font-family: var(--m); font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--osfv); font-weight: 500; }
td.v { font-family: var(--m); color: var(--osf); white-space: nowrap; }
td { color: var(--osfv); }
td:first-child { color: var(--osf); font-weight: 500; }
.nota { color: var(--osfv); font-size: 14px; line-height: 20px; margin-top: var(--sp12); }

/* Prosa */
.prosa { max-width: 760px; display: grid; gap: var(--sp16); }
.prosa p { color: var(--osfv); }
.prosa li { color: var(--osfv); margin-bottom: var(--sp4); }
.prosa h3 { font-size: 22px; line-height: 28px; font-weight: 600; margin-top: var(--sp8); }
.prosa h2 + p { margin-top: 0; }

/* Legal (texto vindo dos documentos, sem alteração) */
.legal { max-width: 760px; display: grid; gap: var(--sp24); font-size: 15px; line-height: 24px; }
.legal section { display: grid; gap: var(--sp8); }
.legal h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
.legal p, .legal li { color: var(--osfv); }
.legal strong { color: var(--osf); }
.legal .updated { color: var(--osfv); font-size: 14px; }
.legal .company { font-size: 12px; line-height: 20px; color: var(--osfv); }
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--sp16); font-size: 13px; padding-top: var(--sp20); border-top: 1px solid var(--ol); }

/* Estados do Spectrum */
.estados { display: grid; gap: var(--sp16); }
@media (min-width: 768px) { .estados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .estados { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.estado { display: grid; gap: var(--sp12); }
.estado img { width: 100%; height: auto; border-radius: var(--rmd); border: 1px solid var(--ol); background: var(--e2); }
.estado figcaption { display: grid; gap: var(--sp4); }
.estado .label { color: var(--osf); }
.estado p { color: var(--osfv); font-size: 14px; line-height: 20px; }

/* FAQ */
.faq { display: grid; gap: var(--sp8); max-width: 860px; }
.faq details { background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rmd); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp16) var(--sp20);
  font-weight: 600; font-size: 16px; line-height: 24px; display: flex; justify-content: space-between; gap: var(--sp16);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--m); color: var(--p); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .r { padding: 0 var(--sp20) var(--sp20); color: var(--osfv); }

/* Links / documentos */
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp8); max-width: 760px; }
.links li { display: grid; gap: var(--sp4); padding: var(--sp12) var(--sp16); background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rsm); }
.links a { font-weight: 600; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.links span { color: var(--osfv); font-size: 14px; line-height: 20px; }

/* CTA final */
.cta { background: var(--e1); border-top: 1px solid var(--ol); padding: var(--sp64) 0; }
.cta .wrap { display: grid; gap: var(--sp20); max-width: 860px; text-align: left; }
.cta .ctas { display: flex; flex-wrap: wrap; gap: var(--sp12); }
.cta p { color: var(--osfv); }

/* Rodapé */
.rodape { border-top: 1px solid var(--ol); padding: var(--sp40) 0 var(--sp24); background: var(--sf); }
.rodape .wrap { display: grid; gap: var(--sp24); }
.rodape .marca svg { height: 32px; }
.rodape .linha { display: flex; flex-wrap: wrap; gap: var(--sp8) var(--sp24); font-size: 14px; line-height: 20px; color: var(--osfv); }
.rodape .linha a { color: var(--osfv); text-decoration: none; }
.rodape .linha a:hover { color: var(--osf); text-decoration: underline; }
.rodape .empresa { font-size: 12px; line-height: 20px; color: var(--osfv); }
.rodape .cr { font-family: var(--m); font-size: 12px; line-height: 16px; letter-spacing: 1px; color: var(--osfv); }

/* ── Home (landing de 29/09) ───────────────────────────────── */
html.no-js .so-js { display: none !important; }
.ancora { display: block; position: relative; top: -80px; }
.l-dobra .wrap.duas-g { max-width: var(--largura); }
.duas-g { display: grid; gap: var(--sp32); align-items: center; }
@media (min-width: 960px) { .duas-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp56, 56px); } }
.col-texto, .col-quadro { display: grid; gap: var(--sp20); align-content: start; min-width: 0; }
.col-texto .sec-h { margin-bottom: 0; }
.col-texto > p { color: var(--osfv); }
.col-texto > p.lead { color: var(--osfv); }
.l-h1 { text-wrap: balance; }
.l-cta { display: grid; gap: var(--sp8); justify-items: start; margin-top: var(--sp4); }
.l-cta .ctas { display: flex; flex-wrap: wrap; gap: var(--sp12); }
.l-cta-nota { color: var(--osfv); font-size: 14px; line-height: 20px; }
.l-rodape { display: grid; gap: var(--sp20); margin-top: var(--sp32); }
.l-rodape .nota { margin-top: 0; }

/* Listas */
.lista { list-style: none; padding: 0; display: grid; gap: var(--sp12); }
.lista li { position: relative; padding-left: var(--sp24); color: var(--osfv); }
.lista li::before { content: "—"; position: absolute; left: 0; color: var(--p); font-family: var(--m); }
.lista.q li::before { content: "■"; font-size: 10px; top: 1px; }
.lista a { color: var(--osf); }

/* Quadros (demos e recriações) */
.quadro {
  background: var(--sf); border: 1px solid var(--ol); border-radius: var(--rlg);
  padding: var(--sp20); display: grid; gap: var(--sp16); min-width: 0;
}
.q-cab { display: grid; gap: var(--sp4); }
.q-cab-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--sp12); }
.q-cab-linha > div { display: grid; gap: var(--sp4); }
.q-titulo { font-size: 15px; line-height: 22px; font-weight: 600; }
.q-selo, .chip, .chip-l {
  display: inline-flex; align-items: center; font-family: var(--m); font-size: 12px; line-height: 16px;
  letter-spacing: .5px; border-radius: var(--rfull); padding: var(--sp4) var(--sp12); white-space: nowrap;
}
.q-selo { background: #0F2A1A; color: var(--su); text-transform: uppercase; justify-self: start; }
.chip { text-transform: uppercase; }
.chip.ac-escalar { background: #0F2A1A; color: var(--su); }
.chip.ac-reduzir { background: var(--pc); color: var(--opc); }
.chip.ac-manter { background: #1F1E1A; color: #BDBCB6; }
.chip-l { background: var(--e2); color: var(--osf); border: 1px solid var(--ol); white-space: normal; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp8); }
.q-fonte { color: var(--osfv); font-size: 12px; line-height: 16px; }
.q-legenda { display: flex; flex-wrap: wrap; gap: var(--sp8) var(--sp16); color: var(--osfv); font-size: 12px; line-height: 16px; }
.q-legenda span { display: inline-flex; align-items: center; gap: var(--sp8); }
.bolinha { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bolinha.esc { background: var(--su); } .bolinha.red { background: var(--p); } .bolinha.man { background: #4A4A44; }
.bolinha.m1 { background: #1F7A45; } .bolinha.m5 { background: #9A3412; }
.v { font-family: var(--m); }
.v.bom, .v.ac-escalar { color: var(--su); }
.v.ruim, .v.ac-reduzir { color: #FF7A4D; }
.v.ac-manter { color: #BDBCB6; }
.rolar { overflow-x: auto; }

/* Demo: um dia de um conjunto */
.dia-svg { width: 100%; height: auto; font-family: var(--m); font-size: 11px; }
.dia-tocar {
  appearance: none; background: var(--e2); color: var(--osf); border: 1px solid #3A2A1C; border-radius: var(--rfull);
  padding: var(--sp8) var(--sp16); min-height: 36px; font: 500 13px/16px var(--f); cursor: pointer; flex: none;
}
.dia-tocar:hover { border-color: var(--p); }
.dia-leitura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp12); }
.dia-leitura > div { display: grid; gap: var(--sp4); background: var(--e1); border: 1px solid var(--olv); border-radius: var(--rsm); padding: var(--sp8) var(--sp12); }
.dia-leitura .label { font-size: 11px; letter-spacing: 1px; }
.dia-leitura .v { font-size: 16px; line-height: 22px; }
.dia-motivo { color: var(--osfv); font-size: 14px; line-height: 20px; min-height: 40px; }
@media (max-width: 480px) { .dia-leitura { grid-template-columns: minmax(0, 1fr); } }

/* Mapa por dia e faixa */
.mapa-grade { display: grid; grid-template-columns: 40px repeat(6, minmax(52px, 1fr)); gap: 4px; min-width: 380px; font-family: var(--m); font-size: 12px; line-height: 16px; }
.mapa-f, .mapa-d { color: var(--osfv); display: flex; align-items: center; justify-content: center; padding: var(--sp4) 0; }
.mapa-d { justify-content: flex-start; }
.mapa-c { border-radius: var(--rxs); padding: var(--sp8) 0; text-align: center; }
.mapa-c.m1 { background: #1F7A45; color: #EAF7EF; }
.mapa-c.m2 { background: #164A2C; color: #CFE9D8; }
.mapa-c.m3 { background: #24231F; color: #BDBCB6; }
.mapa-c.m4 { background: #5A2410; color: #FFD9C7; }
.mapa-c.m5 { background: #9A3412; color: #FFE9DF; }

/* Alternativas */
.alts { display: grid; gap: var(--sp16); }
@media (min-width: 640px) { .alts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .alts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.alt { background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rmd); padding: var(--sp20); display: grid; gap: var(--sp16); align-content: start; }
.alt.destaque { border-color: var(--p); background: var(--e2); }
.alt dl { display: grid; gap: var(--sp12); }
.alt dt { font-family: var(--m); font-size: 11px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--osfv); }
.alt dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--osf); }
.alt p { color: var(--osfv); font-size: 14px; line-height: 20px; border-top: 1px solid var(--ol); padding-top: var(--sp12); }

/* Momentos */
.momentos { display: grid; gap: var(--sp16); }
@media (min-width: 960px) { .momentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.momento { background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rmd); padding: var(--sp24); display: grid; gap: var(--sp12); align-content: start; }
.mom-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp12); }
.mom-n { font-family: var(--m); font-size: 32px; line-height: 36px; color: var(--p); }
.momento p { color: var(--osfv); }
.momento .mom-nota { color: var(--osf); font-size: 14px; line-height: 20px; border-top: 1px solid var(--ol); padding-top: var(--sp12); }

/* Recriação do estudo */
.est-topo { display: grid; gap: var(--sp8); }
.est-num { font-size: 28px; line-height: 34px; font-weight: 800; color: var(--su); }
.est-sub { color: var(--osfv); font-size: 14px; line-height: 20px; }
.est-prova { display: grid; gap: var(--sp12); background: var(--e1); border: 1px solid var(--olv); border-radius: var(--rmd); padding: var(--sp16); }
.est-prova p { color: var(--osfv); font-size: 14px; line-height: 20px; }
.est-tab { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: var(--sp8) var(--sp12); font-size: 13px; line-height: 18px; }
.est-tab .label { font-size: 11px; letter-spacing: 1px; }
.est-tab .d { color: #FF7A4D; }
.est-tab .v { white-space: nowrap; }
/* No celular, o rótulo da linha sobe e os três valores ficam lado a lado. */
@media (max-width: 480px) {
  .est-tab { grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: var(--sp4) var(--sp12); font-size: 12px; }
  .est-tab .vazio { display: none; }
  .est-tab .rot { grid-column: 1 / -1; margin-top: var(--sp8); color: var(--osfv); }
}
.est-acr { display: grid; gap: var(--sp4); border-top: 1px solid var(--ol); padding-top: var(--sp12); }
.est-acr-v { font-family: var(--m); font-size: 28px; line-height: 34px; color: #FF7A4D; }

/* Casos */
.casos { display: grid; gap: var(--sp24); }
@media (min-width: 960px) { .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.caso { background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rlg); padding: var(--sp24); display: grid; gap: var(--sp16); align-content: start; }
.caso > p { color: var(--osfv); }
.caso .caso-ressalva { color: var(--osf); border-top: 1px solid var(--ol); padding-top: var(--sp16); }
.caso-heroi { display: grid; gap: var(--sp4); }
.caso-heroi-v { font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.02em; color: var(--p); }
.caso-heroi-t { color: var(--osf); font-size: 16px; line-height: 22px; }
.caso-numeros { border-top: 1px solid var(--ol); padding-top: var(--sp12); }
.caso-numeros summary { cursor: pointer; color: var(--osfv); font-size: 14px; line-height: 20px; }
.caso-numeros[open] summary { margin-bottom: var(--sp12); }
.caso .caso-ressalva { font-size: 13px; line-height: 18px; color: var(--osfv); border-top: 0; padding-top: 0; }
.caso-graf { display: grid; gap: var(--sp8); }
.caso-barra { display: grid; grid-template-columns: 140px minmax(0, 1fr) 64px; gap: var(--sp12); align-items: center; font-size: 13px; line-height: 18px; color: var(--osfv); }
.caso-barra .v { color: var(--osf); text-align: right; }
.trilho { display: block; height: 14px; background: var(--sf); border-radius: var(--rxs); overflow: hidden; }
.trilho span { display: block; height: 100%; border-radius: var(--rxs); }
.trilho .op { background: var(--p); } .trilho .pad { background: #4A4A44; }
@media (max-width: 480px) { .caso-barra { grid-template-columns: minmax(0, 1fr) 56px; } .caso-barra .trilho { grid-column: 1 / -1; grid-row: 2; } }
.caso-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp8); }
.caso-kpis > div, .caso-dest { display: grid; gap: var(--sp4); background: var(--sf); border: 1px solid var(--olv); border-radius: var(--rsm); padding: var(--sp12); font-size: 13px; line-height: 18px; color: var(--osfv); }
.caso-kpis .v { font-size: 22px; line-height: 28px; color: var(--osf); }
.caso-dest .v { font-size: 22px; line-height: 28px; }
.caso-dest .de { color: var(--osfv); } .caso-dest .para { color: var(--su); }
@media (max-width: 480px) { .caso-kpis { grid-template-columns: minmax(0, 1fr); } }

/* Preço */
.faixas td.v { white-space: normal; }
.calc-vivo { display: grid; gap: var(--sp12); }
.calc-verba { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp12); }
.calc-verba-v { font-family: var(--m); font-size: 18px; white-space: nowrap; }
.calc input[type="range"] { width: 100%; accent-color: var(--p); min-height: 32px; }
.calc-atalhos { display: flex; flex-wrap: wrap; gap: var(--sp8); }
.calc-atalho { appearance: none; background: var(--e2); color: var(--osf); border: 1px solid var(--ol); border-radius: var(--rfull); padding: var(--sp8) var(--sp12); min-height: 36px; font: 500 13px/16px var(--f); cursor: pointer; }
.calc-atalho[aria-pressed="true"] { background: var(--p); color: var(--op); border-color: var(--p); }
.calc-res { display: grid; gap: var(--sp4); background: var(--e1); border: 1px solid var(--olv); border-radius: var(--rmd); padding: var(--sp16); }
.calc-m { font-family: var(--m); font-size: 32px; line-height: 40px; color: var(--osf); }
.calc-det { color: var(--osfv); font-size: 14px; line-height: 20px; }
.calc-empate { color: var(--osf); font-size: 14px; line-height: 20px; }
.calc-ex-g { display: grid; gap: var(--sp8); }
.calc-ex { border: 1px solid var(--ol); border-radius: var(--rmd); overflow: hidden; }
.calc-ex th[scope="row"] { font-family: var(--m); font-weight: 400; color: var(--osf); }
.calc-nota { color: var(--osfv); font-size: 14px; line-height: 20px; }

/* Para quem é */
.publico { display: grid; gap: var(--sp16); }
@media (min-width: 960px) { .publico { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pub-e, .pub-nao { background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rmd); padding: var(--sp24); display: grid; gap: var(--sp16); align-content: start; }
.pub-e { border-color: #3A2A1C; }
.pub-e p { color: var(--osf); }

/* Limites, registro, quem faz */
.kv { display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; gap: var(--sp16); padding: var(--sp12) 0; border-top: 1px solid var(--ol); font-size: 14px; line-height: 20px; color: var(--osfv); }
.kv > div:first-child { border-top: 0; }
.kv .v { color: var(--osf); text-align: right; }
.kv-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp8); }
.kv-linha > div { display: grid; gap: var(--sp4); border: 0; padding: 0; }
.kv-linha .v { text-align: left; }
.rotulos { display: grid; gap: var(--sp12); }
.rotulos > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp12); padding-top: var(--sp12); border-top: 1px solid var(--ol); }
.rotulos p { color: var(--osfv); }
@media (max-width: 480px) { .rotulos > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp4); } }
.dec-lista { display: grid; gap: var(--sp8); }
.dec { background: var(--e1); border: 1px solid var(--olv); border-radius: var(--rmd); }
.dec[open] { background: #1A1510; border-color: var(--ol); }
.dec summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp12); padding: var(--sp12) var(--sp16); min-height: 44px; }
.dec summary::-webkit-details-marker { display: none; }
.dec-conj { flex: 1; font-size: 14px; line-height: 20px; min-width: 0; }
.dec-hora { font-family: var(--m); font-size: 12px; color: var(--osfv); }
.dec-corpo { display: grid; gap: var(--sp12); padding: 0 var(--sp16) var(--sp16); }
.dec-corpo p { color: var(--osfv); font-size: 14px; line-height: 20px; }
.assinatura { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp24) 40px; margin-top: var(--sp16); }
.assinatura-quem { display: inline-flex; align-items: center; gap: var(--sp8); }
.assinatura-texto { color: var(--osfv); font-size: 14px; line-height: 20px; }
.assinatura-marca { display: inline-flex; }
/* O logo guarda a proporção pelo width/height do <img>: só a altura muda. */
.logo-assinatura { display: block; height: 26px; width: auto; }
/* O selo da Meta: sozinho, sem filtro, borda nem sombra, com espaço livre de
   pelo menos a altura do símbolo da Meta (~26% da altura do selo) em volta. */
.selo-espaco { display: inline-block; padding: var(--sp12); }
.selo-parceiro { display: block; height: 48px; width: auto; }
.pessoas { display: flex; flex-wrap: wrap; gap: var(--sp12); }
.pessoas > div { display: grid; gap: var(--sp4); background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rmd); padding: var(--sp12) var(--sp16); }
.pessoa { font-weight: 600; }
.numerados { list-style: none; padding: 0; display: grid; gap: var(--sp12); }
.numerados li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp12); background: var(--e1); border: 1px solid var(--ol); border-radius: var(--rmd); padding: var(--sp20); }
.numerados .n { font-family: var(--m); color: var(--p); font-size: 14px; line-height: 24px; }
.numerados li > div { display: grid; gap: var(--sp4); }
.numerados p { color: var(--osfv); font-size: 14px; line-height: 20px; }

/* Campanhas e Hoje */
.campanhas table { min-width: 560px; }
.campanhas th[scope="row"] { font-weight: 500; color: var(--osf); }
.campanhas td.v { white-space: nowrap; }
.hoje-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp8); }
.hoje-kpis > div { display: grid; gap: var(--sp4); background: var(--e1); border: 1px solid var(--olv); border-radius: var(--rsm); padding: var(--sp12); }
.hoje-kpis .v { font-size: 20px; line-height: 26px; }
.hoje-kpis small { font-size: 12px; color: var(--osfv); }
.hoje-dec { display: grid; gap: var(--sp8); }
.hoje-dec > div { display: flex; align-items: center; gap: var(--sp12); padding: var(--sp8) 0; border-top: 1px solid var(--ol); }
.l-duas#cta-final { background: var(--e1); }

/* Página de redirecionamento */
.redirect { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--sp48) var(--gutter); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* ── pedido de demonstração (onda 3) ─────────────────────────────── */
dialog.demo{max-width:480px;width:calc(100% - 32px);padding:0;border:1px solid #252521;border-radius:16px;background:#141412;color:#EDECEA}
dialog.demo::backdrop{background:rgba(10,10,10,.72)}
.demo-form{display:flex;flex-direction:column;gap:12px;padding:24px}
.demo-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo-fechar{background:none;border:0;color:#888880;font-size:24px;line-height:1;cursor:pointer}
.demo-form label{display:flex;flex-direction:column;gap:6px}
.demo-form input,.demo-form select,.demo-form textarea{font:inherit;color:#EDECEA;background:#0A0A0A;border:1px solid #252521;border-radius:8px;padding:10px 12px}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{outline:2px solid #F04A14;outline-offset:1px}
.demo-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-msg{min-height:1.2em;margin:0;color:#EDECEA}
/* Sucesso do pedido: o Spectrum sai de fragmentado (cinza) para otimizado e dispara um novo sinal. */
.demo-ok{display:flex;flex-direction:column;gap:14px;padding:32px 24px 24px;outline:none}
.ok-spec{position:relative;display:flex;align-items:flex-end;gap:8px;height:96px;padding-bottom:6px;border-bottom:1.5px solid #252521}
.ok-spec i{flex:1;max-width:28px;height:30%;border-radius:3px;background:#888880;opacity:.6;transition:height .7s cubic-bezier(.34,1.56,.64,1),background .5s,opacity .5s}
.demo-ok.on .ok-spec i{background:#F04A14;opacity:.75}
.demo-ok.on .ok-spec i:nth-child(1){height:40%;transition-delay:.05s}
.demo-ok.on .ok-spec i:nth-child(2){height:30%;transition-delay:.12s}
.demo-ok.on .ok-spec i:nth-child(3){height:70%;transition-delay:.19s}
.demo-ok.on .ok-spec i:nth-child(4){height:45%;transition-delay:.26s}
.demo-ok.on .ok-spec i.pico{height:100%;background:#4ECDC4;opacity:1;transition-delay:.6s;box-shadow:0 0 24px rgba(78,205,196,.55);animation:ok-pulso 1.6s 1.4s ease-in-out infinite}
.ok-tag{position:absolute;left:calc(4*36px + 34px);top:4px;font:500 11px/1 "DM Mono",monospace;letter-spacing:.12em;color:#4ECDC4;opacity:0;transform:translateX(-6px);transition:opacity .4s 1.1s,transform .4s 1.1s;white-space:nowrap}
.demo-ok.on .ok-tag{opacity:1;transform:none}
.ok-t,.demo-ok .lead,.ok-passos,.ok-fechar{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.demo-ok.on .ok-t{opacity:1;transform:none;transition-delay:.9s}
.demo-ok.on .lead{opacity:1;transform:none;transition-delay:1s}
.demo-ok.on .ok-passos{opacity:1;transform:none;transition-delay:1.1s}
.demo-ok.on .ok-fechar{opacity:1;transform:none;transition-delay:1.3s}
.ok-passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:p}
.ok-passos li{counter-increment:p;display:flex;gap:12px;align-items:center;color:#B8B7B2}
.ok-passos li::before{content:counter(p,decimal-leading-zero);font:500 11px/1 "DM Mono",monospace;color:#888880;border:1px solid #252521;border-radius:6px;padding:6px}
.ok-passos li:first-child{color:#EDECEA}
.ok-passos li:first-child::before{content:"✓";color:#0A0A0A;background:#4ECDC4;border-color:#4ECDC4}
@keyframes ok-pulso{50%{box-shadow:0 0 6px rgba(78,205,196,.2)}}
@media (prefers-reduced-motion:reduce){.demo-ok *{transition:none!important;animation:none!important}}