/* vendas/estilo.css
   Site de vendas da Contadorize. Sem framework, sem build.

   O estilo e o "bold" (2026-10-05): primeira dobra, faixa do produto e fecho escuros, faixas de leitura claras,
   azul eletrico #0055fe como cor de acao, Plus Jakarta Sans nos titulos e Inter no corpo. Os tokens de cor do
   produto (web/app/globals.css) nao valem mais aqui: o site de vendas tem a identidade propria da marca. */

/* AS FONTES SAO HOSPEDADAS AQUI, EM vendas/fontes/ (trilha 294t, faixa K; achado 31 de docs/seguranca/revisao-292t.md).
   Ate a 293t cada visita pedia ao Google a folha de fontes e 22 arquivos de fonte antes de qualquer
   consentimento, e o IP e o Referer do visitante iam ao Google. Os arquivos sao os MESMOS que o Google serve (Inter
   variavel de 400 a 700, IBM Plex Mono em 400, 500 e 600, subconjuntos latin e latin-ext, ambas SIL OFL 1.1), de modo
   que o desenho nao muda. De onde veio cada arquivo, a licenca e o sha256 estao em docs/seguranca/fontes-do-site-294t.md,
   e o texto das duas licencas esta ao lado dos arquivos. Cada familia e subconjunto tem o unicode-range de origem:
   o navegador so baixa o arquivo cujos caracteres a pagina usa. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fontes/ibm-plex-mono-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fontes/ibm-plex-mono-500-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fontes/ibm-plex-mono-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fontes/inter-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fontes/inter-400-700-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================================
   Contadorize, site de vendas, estilo "bold" (2026-10-05).
   Escuro na primeira dobra, na faixa do produto e no fecho; claro nas faixas de leitura.
   Azul eletrico da marca (--acao), fonte de titulo Plus Jakarta Sans (hospedada aqui), corpo em Inter.
   O vermelho do produto (--vinte) so aparece como marca do dia 20 nas demos e na linha do mes.
   O verde do WhatsApp nao e usado: os botoes de WhatsApp seguem o azul da marca com o icone do WhatsApp.
   ========================================================================= */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(fontes/plusjakarta-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(fontes/plusjakarta-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --fundo: #0a0d14;
  --fundo-2: #111827;
  --papel: #f7f9fc;
  --celula: #ffffff;
  --apoio: #f0f3f9;
  --regua: #e6e9ef;
  --divisor: #cdd3de;
  --tinta: #0a0d14;
  --texto: #3a4153;
  --fraco: #545c6e;
  --acao: #0055fe;
  --acao-ativa: #0046d1;
  --acao-suave: #eef4ff;
  --acao-borda: #cddffe;
  --acao-sobre-escuro: #3b82f6;
  --acao-texto-escuro: #8fb5ff;
  --vinte: #c6391f;
  --ao-vivo: #12b76a;
  --ok: #067647;
  --atencao: #8a5a00;
  --erro: #b3301a;
  --peso-normal: 450;
  --peso-medio: 550;
  --peso-semibold: 650;
  --raio: 10px;
  --raio-grande: 18px;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fonte-titulo: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fonte-dados: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --largura: 1200px;
  --brilho: 0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 32px rgba(0,85,254,.5);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--fundo); }
body {
  margin: 0; background: var(--celula); color: var(--texto);
  font-family: var(--fonte); font-weight: 400; font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { color: var(--tinta); font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
h3 { font-weight: 700; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--acao); color: #fff; }
:focus-visible { outline: 3px solid var(--acao); outline-offset: 3px; border-radius: 4px; }
.faixa--escura :focus-visible, .hero :focus-visible, .abertura :focus-visible, .cabecalho :focus-visible, .rodape :focus-visible, .cta-final :focus-visible, .palco :focus-visible { outline-color: #fff; }
.envelope { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: 16px; }
@media (min-width: 640px) { .envelope { padding-inline: 24px; } }
@media (min-width: 960px) { .envelope { padding-inline: 40px; } }
.pular { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: var(--tinta); padding: 12px 16px; border-radius: 0 0 var(--raio) 0; }
.pular:focus { left: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* icones desenhados uma vez, como mascara, para todos terem o mesmo traco */
.ico { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-ok { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.i-nao { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.i-seta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.i-zap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.9 7L4 20l1.5-4A8 8 0 1 1 20 11.5z'/%3E%3C/svg%3E"); }

/* botoes: 48px, cantos de 12px, azul eletrico com brilho no escuro */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1; min-height: 48px; padding: 0 24px;
  border-radius: 12px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .15s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.botao--primario { background: var(--acao); color: #fff; border-color: rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 20px rgba(0,85,254,.35); }
.botao--primario:hover { background: var(--acao-ativa); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 28px rgba(0,85,254,.55); }
.botao--primario:active { background: #003aa8; transform: translateY(1px); }
.botao--secundario { background: #fff; color: var(--tinta); border-color: var(--divisor); }
.botao--secundario:hover { background: var(--papel); border-color: var(--tinta); }
.botao--secundario:active { background: var(--apoio); }
.botao--claro { background: #fff; color: var(--tinta); border-color: #fff; }
.botao--claro:hover { background: var(--acao-suave); border-color: var(--acao-suave); }
.botao--claro:active { background: #d3defa; border-color: #d3defa; }
.botao--contorno-claro { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.4); }
.botao--contorno-claro:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.botao--compacto { min-height: 44px; padding: 0 18px; font-size: .9375rem; border-radius: 11px; }
.botao--bloco { display: flex; width: 100%; }
.botao--grande { min-height: 56px; padding: 0 30px; font-size: 1.0625rem; border-radius: 14px; }
.hero .botao--secundario, .abertura .botao--secundario, .faixa--escura .botao--secundario, .cta-final .botao--secundario { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.28); }
.hero .botao--secundario:hover, .abertura .botao--secundario:hover, .faixa--escura .botao--secundario:hover, .cta-final .botao--secundario:hover { background: #fff; color: var(--tinta); border-color: #fff; }
/* links com sublinhado fino */
.sub-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .2s var(--curva); padding-bottom: 2px; }
.sub-link:hover, .sub-link:focus-visible { background-size: 100% 2px; }
.texto-link { color: var(--acao); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.texto-link:hover { color: var(--acao-ativa); }

/* cabecalho: barra flutuante arredondada, solta das bordas */
.cabecalho { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 10px 12px 0; pointer-events: none; }
.cabecalho .envelope {
  pointer-events: auto; position: relative; max-width: 1120px; padding: 6px 8px 6px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px;
  background: rgba(13,17,27,.84); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.06) inset;
}
.marca { display: flex; align-items: center; min-height: 44px; flex: none; border-radius: 10px; }
.marca img { height: 38px; width: auto; }
.menu { display: flex; align-items: center; gap: 2px; font-size: .9375rem; font-weight: 550; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: rgba(255,255,255,.8); transition: background-color .15s, color .15s; }
.menu a:hover { background: rgba(255,255,255,.09); color: #fff; }
.menu a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
.menu a.botao { color: #fff; }
.menu a.botao:hover { background: var(--acao-ativa); }
.cabecalho > .envelope > .botao::after, .menu .botao.so-menu-movel::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--seta) center / contain no-repeat; mask: var(--seta) center / contain no-repeat; --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.cabecalho .botao { flex: none; }
.burger-caixa { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; }
.burger svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.burger .x { display: none; }
.burger-caixa:focus-visible + .burger { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 899px) {
  .cabecalho .envelope { flex-wrap: wrap; padding: 6px 8px 6px 12px; }
  .cabecalho > .envelope > .botao { display: none; }
  .burger { display: inline-flex; }
  .menu { display: none; order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .menu a { min-height: 48px; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0; font-size: 1rem; }
  .menu .botao { margin-top: 12px; border-radius: 12px; justify-content: center; }
  .burger-caixa:checked ~ .menu { display: flex; }
  .burger-caixa:checked + .burger .barras { display: none; }
  .burger-caixa:checked + .burger .x { display: inline; }
  .burger-caixa { right: 0; top: 12px; }
}
@media (min-width: 900px) { .menu .so-menu-movel { display: none; } }

/* faixas: claras para ler, escuras para o produto e o fecho */
.faixa { padding: 72px 0; border-top: 1px solid var(--regua); background: var(--celula); }
@media (min-width: 900px) { .faixa { padding: 104px 0; } }
.faixa--branca { background: var(--celula); }
.faixa--papel { background: var(--papel); }
.faixa--apoio { background: var(--acao-suave); border-top-color: var(--acao-borda); }
.faixa--escura, .cta-final {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; border-top: 0;
  background: radial-gradient(900px 460px at 12% -8%, rgba(0,85,254,.34), transparent 62%), radial-gradient(760px 420px at 100% 105%, rgba(59,130,246,.2), transparent 62%), var(--fundo);
}
.faixa--escura::before, .cta-final::before, .hero::before, .abertura::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(40,110,255,.5) 0 26px, rgba(0,50,170,.42) 26px 30px, rgba(20,80,230,.5) 30px 62px, rgba(0,35,120,.45) 62px 66px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 58%); mask-image: linear-gradient(180deg, #000, transparent 58%);
  opacity: .42;
}
.faixa--escura::before, .cta-final::before { opacity: .16; -webkit-mask-image: linear-gradient(180deg, #000, transparent 40%); mask-image: linear-gradient(180deg, #000, transparent 40%); }
.faixa--escura h2, .faixa--escura h3, .cta-final h2 { color: #fff; }
.rotulo {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 7px 12px 7px 10px;
  border: 1px solid var(--acao-borda); border-radius: 99px; background: var(--acao-suave); color: var(--acao-ativa);
  font-family: var(--fonte-dados); font-size: .75rem; line-height: 1; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.rotulo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acao); flex: none; }
.faixa--escura .rotulo, .hero .rotulo, .abertura .rotulo { border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.14); color: var(--acao-texto-escuro); }
.faixa--escura .rotulo::before, .hero .rotulo::before { background: var(--ao-vivo); box-shadow: 0 0 0 3px rgba(18,183,106,.22); }
h2.titulo, .secao-cabeca h2 { font-size: clamp(1.875rem, 4.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; }
.sub, .secao-texto { margin-top: 16px; max-width: 58ch; font-size: 1.0625rem; line-height: 1.6; color: var(--texto); }
@media (min-width: 900px) { .sub, .secao-texto { font-size: 1.125rem; } }
.faixa--escura .sub, .faixa--escura .secao-texto, .cta-final .secao-texto { color: rgba(255,255,255,.74); }
.cabeca, .secao-cabeca { margin-bottom: 48px; }
@media (min-width: 900px) {
  .cabeca, .secao-cabeca { margin-bottom: 64px; }
  .cabeca--dividida { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 64px; align-items: end; }
  .cabeca--dividida .sub { margin: 0; }
}

/* hero: primeira dobra escura, brilho azul, texto centrado */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 112px 0 72px; text-align: center;
  background: radial-gradient(900px 520px at 50% -10%, rgba(0,85,254,.55), transparent 64%), radial-gradient(1100px 400px at 50% 38%, rgba(0,70,209,.22), transparent 70%), var(--fundo); }
@media (min-width: 900px) { .hero { padding: 148px 0 96px; } }
.hero-centro { max-width: 880px; margin: 0 auto; }
.hero .rotulo { margin-bottom: 28px; }
.hero h1 { color: #fff; font-size: clamp(2.125rem, 9vw, 3.625rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.hero .lead { margin: 24px auto 0; max-width: 40em; font-size: 1.0625rem; line-height: 1.65; color: rgba(255,255,255,.74); text-wrap: pretty; }
@media (min-width: 900px) { .hero .lead { font-size: 1.1875rem; } }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero .acoes, .fecho .acoes, .cta-final-ctas { justify-content: center; }
.hero .acoes { margin-top: 36px; }
@media (max-width: 520px) { .acoes .botao { width: 100%; } }
.fatos { margin: 56px auto 0; display: grid; gap: 10px; max-width: 1000px; text-align: left; }
@media (min-width: 640px) { .fatos { grid-template-columns: repeat(4, 1fr); } }
.fatos li { padding: 14px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.04); font-size: .8125rem; line-height: 1.45; color: rgba(255,255,255,.7); }
.fatos b { display: block; font-weight: 650; color: #fff; font-size: .9375rem; margin-bottom: 2px; }

/* objetos de interface dentro do h1 e destaques no texto de apoio */
.obj { display: inline-block; vertical-align: -.12em; line-height: 1; }
.obj-cal { position: relative; width: .98em; height: .98em; margin: 0 .06em; border-radius: .24em; background: #fff; box-shadow: 0 .06em .16em rgba(0,0,0,.35), 0 0 .5em rgba(59,130,246,.45); overflow: visible; }
.obj-cal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .27em; border-radius: .24em .24em 0 0; background: #e5412a; }
.obj-cal::after { content: ""; position: absolute; left: .22em; right: .22em; top: -.05em; height: .12em; background: radial-gradient(circle, #0a0d14 0 .045em, transparent .05em) 0 0 / .54em .12em repeat-x; opacity: .0; }
.obj-cal b { position: absolute; left: 0; right: 0; top: .26em; bottom: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: .6em; font-weight: 800; letter-spacing: -0.04em; color: var(--tinta); }
.obj-cal i { position: absolute; right: -.2em; top: -.2em; width: .46em; height: .46em; border-radius: 50%; background: var(--ao-vivo); border: .05em solid var(--fundo); display: flex; align-items: center; justify-content: center; }
.obj-cal i svg { width: .26em; height: .26em; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.obj-chave { position: relative; width: 1.62em; height: .86em; margin: 0 .08em; border-radius: 99px; background: linear-gradient(180deg, #2f78ff, var(--acao)); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 .6em rgba(0,85,254,.8); }
.obj-chave::after { content: ""; position: absolute; top: .09em; right: .09em; width: .68em; height: .68em; border-radius: 50%; background: #fff; box-shadow: 0 .03em .1em rgba(0,0,0,.35); }
@keyframes chave-liga { from { background: #3a4458; box-shadow: none; } to { background: linear-gradient(180deg, #2f78ff, var(--acao)); } }
@keyframes chave-boto { from { transform: translateX(-.76em); } to { transform: none; } }
@keyframes cal-pop { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .obj-chave { animation: chave-liga .5s .9s var(--curva) both; }
  .obj-chave::after { animation: chave-boto .5s .9s var(--curva) both; }
  .obj-cal i { animation: cal-pop .5s .5s var(--curva) both; }
}
.chip { display: inline-block; padding: .02em .42em .1em; border: 1px solid; border-radius: .45em; font-weight: 650; line-height: 1.35; }
.chip--azul { color: #9cc0ff; background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.5); }
.chip--verde { color: #56e0a0; background: rgba(18,183,106,.16); border-color: rgba(18,183,106,.5); }
.chip--violeta { color: #c4b0ff; background: rgba(139,92,246,.2); border-color: rgba(139,92,246,.55); }

/* palco: a demonstracao dentro de uma moldura grande, com luz azul na borda */
.palco { position: relative; max-width: 960px; margin: 0 auto; padding: 12px; text-align: left; border: 1px solid rgba(110,160,255,.5); border-radius: 26px;
  background: linear-gradient(180deg, #131c31, #0a1020);
  box-shadow: 0 0 0 7px rgba(0,85,254,.09), 0 0 90px rgba(0,85,254,.38), 0 1px 0 rgba(255,255,255,.16) inset; }
@media (min-width: 640px) { .palco { padding: 16px; border-radius: 30px; } }
.hero .palco { margin-top: 56px; }
.legenda { margin-top: 14px; font-size: .8125rem; line-height: 1.45; color: var(--fraco); }
.palco .legenda { margin: 14px 6px 4px; color: rgba(255,255,255,.72); }
/* demos: tudo de altura fixa, nada empurra a pagina */
.demo { position: relative; container-type: inline-size; }
.janela { background: var(--celula); border: 1px solid var(--divisor); border-radius: var(--raio-grande); overflow: hidden; font-size: .875rem; line-height: 1.4; color: var(--texto); }
.janela-topo { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: var(--apoio); border-bottom: 1px solid var(--regua); font-size: .75rem; color: var(--fraco); }
.janela-topo img { width: 18px; height: 18px; }
.janela-topo b { color: var(--tinta); font-weight: 650; }
.janela-topo .ficticio { margin-left: auto; padding: 2px 8px; border: 1px solid var(--divisor); border-radius: 99px; background: var(--celula); font-size: .6875rem; }
.janela-grade { display: grid; grid-template-columns: 1fr; }
@container (min-width: 500px) { .janela-grade { grid-template-columns: 150px 1fr; } }
.janela nav.lateral { display: none; border-right: 1px solid var(--regua); padding: 12px 0; background: var(--papel); }
@container (min-width: 500px) { .janela nav.lateral { display: block; } }
.lateral span { display: block; padding: 8px 16px; font-size: .8125rem; color: var(--texto); }
.lateral span.ativo { background: var(--acao-suave); color: var(--tinta); font-weight: 650; box-shadow: inset 3px 0 0 var(--acao); }
.lateral small { display: block; padding: 12px 16px 4px; font-family: var(--fonte-dados); font-size: .6875rem; color: var(--fraco); letter-spacing: .04em; }
.demo-corpo { padding: 16px 18px 14px; min-width: 0; }
.dado { font-variant-numeric: tabular-nums; }
.p-mes { font-size: .75rem; color: var(--fraco); }
.p-valor { font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.p-sub { font-size: .75rem; color: var(--fraco); height: 18px; }
.p-trilha { position: relative; margin: 14px 0 12px; display: grid; grid-template-columns: repeat(7, 1fr); }
.p-trilha::before { content: ""; position: absolute; left: 7%; right: 7%; top: 9px; height: 2px; background: var(--regua); }
.pt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .625rem; line-height: 1.2; color: var(--fraco); text-align: center; }
@media (min-width: 420px) { .pt { font-size: .6875rem; } }
.pt::before { content: ""; position: relative; z-index: 1; width: 8px; height: 8px; margin: 5px 0; border-radius: 50%; background: #8d9a93; transition: all .3s var(--curva); }
[data-passo="1"] .pt:nth-child(-n+1)::before, [data-passo="2"] .pt:nth-child(-n+3)::before, [data-passo="3"] .pt:nth-child(-n+5)::before, [data-passo="4"] .pt:nth-child(-n+7)::before {
  width: 18px; height: 18px; margin: 0; border-radius: 50%; background: var(--ok);
  -webkit-mask: none; mask: none;
}
[data-passo="1"] .pt:nth-child(-n+1), [data-passo="2"] .pt:nth-child(-n+3), [data-passo="3"] .pt:nth-child(-n+5), [data-passo="4"] .pt:nth-child(-n+7) { color: var(--tinta); }
[data-passo="0"] .pt:nth-child(1)::before, [data-passo="1"] .pt:nth-child(2)::before, [data-passo="2"] .pt:nth-child(4)::before, [data-passo="3"] .pt:nth-child(6)::before { width: 14px; height: 14px; margin: 2px 0; border-radius: 3px; background: var(--acao); }
.pt-feito { position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin-left: -9px; z-index: 2; color: #fff; opacity: 0; transition: opacity .3s; display: flex; align-items: center; justify-content: center; }
.pt-feito .ico { width: 12px; height: 12px; }
[data-passo="1"] .pt:nth-child(-n+1) .pt-feito, [data-passo="2"] .pt:nth-child(-n+3) .pt-feito, [data-passo="3"] .pt:nth-child(-n+5) .pt-feito, [data-passo="4"] .pt:nth-child(-n+7) .pt-feito { opacity: 1; }
.palco-cenas { position: relative; height: 158px; border-top: 1px solid var(--regua); }
.cena { position: absolute; inset: 0; padding: 14px 0 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s var(--curva), transform .35s var(--curva), visibility 0s .35s; }
[data-passo="0"] .c0, [data-passo="1"] .c1, [data-passo="2"] .c2, [data-passo="3"] .c3, [data-passo="4"] .c4 { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cena .cena-titulo, .cena h4 { margin: 0 0 8px; font-size: .9375rem; font-weight: 650; color: var(--tinta); letter-spacing: -0.01em; }
.cena p { margin: 0; }
.cena .linha { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--regua); font-size: .8125rem; }
.cena .linha:first-of-type { border-top: 0; }
.cena .linha b { color: var(--tinta); font-weight: 650; font-variant-numeric: tabular-nums; }
.cena .ok { color: var(--ok); font-weight: 650; }
.campo { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; margin-bottom: 6px; border: 1px solid var(--divisor); border-radius: var(--raio); background: #fff; font-size: .8125rem; }
.campo span { color: var(--fraco); }
.campo b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; border-radius: var(--raio); background: var(--acao); color: #fff; font-size: .8125rem; font-weight: 600; }
.mini-botao--tinta { background: var(--tinta); }
.cena .vencimento { color: var(--vinte); font-weight: 650; }
.guia-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guia-valor { font-size: 1.75rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.demo-controles { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.passo-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--divisor); border-radius: var(--raio); background: var(--celula); color: var(--tinta); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; touch-action: manipulation; }
.passo-chip i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: var(--apoio); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.passo-chip:hover { border-color: var(--acao); }
.passo-chip[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: #fff; }
.passo-chip[aria-pressed="true"] i { background: rgba(255,255,255,.22); }
.pausa { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: inherit; font: inherit; font-size: .8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.demo--escuro .passo-chip { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.demo--escuro .passo-chip i { background: rgba(255,255,255,.14); }
.demo--escuro .passo-chip:hover { border-color: #fff; }
.demo--escuro .passo-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--tinta); }
.demo--escuro .passo-chip[aria-pressed="true"] i { background: var(--acao-suave); }
.demo--escuro .legenda { color: rgba(255,255,255,.78); }
.sem-js .pausa, .demo--estatico .pausa { display: none; }

/* demo do escritorio */
.e-cab { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: .8125rem; color: var(--fraco); }
.e-cab b { color: var(--tinta); font-weight: 650; }
.e-titulo { margin: 4px 0 10px; font-size: 1.375rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--tinta); }
.e-miolo { display: grid; gap: 14px; }
@container (min-width: 760px) { .e-miolo { grid-template-columns: 1.5fr 1fr; } }
.e-rot { font-family: var(--fonte-dados); font-size: .6875rem; color: var(--fraco); letter-spacing: .02em; }
.e-das { font-size: 2.25rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.e-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 10px; }
@container (min-width: 440px) { .e-metricas { grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 24px; } }
.e-metricas b { display: block; font-size: .9375rem; font-weight: 650; color: var(--tinta); font-variant-numeric: tabular-nums; }
.e-metricas span { font-size: .6875rem; color: var(--fraco); }
.e-conf { display: none; border-left: 1px solid var(--regua); padding-left: 14px; font-size: .75rem; color: var(--texto); }
@container (min-width: 760px) { .e-conf { display: block; } }
.e-conf .cena-titulo, .e-conf h4 { margin: 0 0 6px; font-size: .8125rem; color: var(--tinta); }
.barra { height: 6px; margin: 8px 0 4px; border-radius: 3px; background: var(--regua); overflow: hidden; }
.barra i { display: block; width: 0; height: 100%; background: var(--acao); }
.e-acoes { position: relative; height: 44px; margin-top: 12px; border-top: 1px solid var(--regua); padding-top: 10px; }
.e-acao { position: absolute; left: 0; right: 0; top: 10px; display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; font-size: .8125rem; }
[data-passo="0"] .a0, [data-passo="1"] .a1, [data-passo="2"] .a2, [data-passo="3"] .a3 { opacity: 1; visibility: visible; transition-delay: 0s; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: #e2f3ea; color: #145a37; font-size: .75rem; font-weight: 650; }
.trilha { height: 96px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--regua); overflow: hidden; }
.trilha p { font-size: .75rem; color: var(--texto); padding: 3px 0; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s var(--curva); }
.trilha p code { font-family: var(--fonte-dados); font-size: .6875rem; color: var(--fraco); margin-right: 6px; }
[data-passo="1"] .trilha p:nth-child(-n+1), [data-passo="2"] .trilha p:nth-child(-n+2), [data-passo="3"] .trilha p:nth-child(-n+3) { opacity: 1; transform: none; }
.demo--e .e-metricas { opacity: 1; }
.e-das .n { display: inline-block; }

/* passos numerados, uma sequencia so */
.passos { counter-reset: p; display: grid; gap: 0; }
.passos li { counter-increment: p; position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 4px 20px; padding-bottom: 32px; }
.passos li:last-child { padding-bottom: 0; }
.passos li::before { content: counter(p); grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--raio); background: var(--acao); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.passos li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 48px; bottom: 8px; width: 2px; background: var(--divisor); }
.passos h3 { padding-top: 8px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.passos p { grid-column: 2; max-width: 48ch; color: var(--texto); }
.passos .marca-vinte { color: var(--vinte); font-weight: 650; }
.colunas { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .colunas { grid-template-columns: 1fr 1.1fr; gap: 72px; } .colunas--demo-esq { grid-template-columns: 1.1fr 1fr; } }

/* faz / pede / nao faz */
.duas { display: grid; gap: 24px; }
@media (min-width: 900px) { .duas { grid-template-columns: 1fr 1fr; gap: 32px; } }
.cartao { background: var(--celula); border: 1px solid var(--regua); border-top: 4px solid var(--acao); border-radius: var(--raio-grande); padding: 32px 24px; }
@media (min-width: 640px) { .cartao { padding: 40px 40px 32px; } }
.cartao--nao { border-top-color: var(--tinta); }
.cartao h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.cartao h3 .selo { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--acao); color: #fff; }
.cartao--nao h3 .selo { background: var(--tinta); }
.cartao h3 .ico { width: 18px; height: 18px; }
.lista-ico li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--regua); color: var(--texto); }
.lista-ico li:first-child { border-top: 0; }
.lista-ico li .ico { margin-top: 3px; color: var(--acao); }
.cartao--nao .lista-ico li .ico { color: var(--tinta); }
.lista-ico b { display: block; color: var(--tinta); font-weight: 650; }
.pede { margin-top: 32px; display: grid; gap: 1px; background: var(--regua); border: 1px solid var(--regua); border-radius: var(--raio-grande); overflow: hidden; }
@media (min-width: 760px) { .pede { grid-template-columns: repeat(3, 1fr); } }
.pede li { background: var(--celula); padding: 24px; }
.pede h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.pede p { font-size: .9375rem; }
.faixa-titulo { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; margin: 56px 0 20px; max-width: 28ch; }

/* grade de provas */
.grade { display: grid; gap: 1px; background: var(--regua); border: 1px solid var(--regua); border-radius: var(--raio-grande); overflow: hidden; }
@media (min-width: 760px) { .grade { grid-template-columns: repeat(3, 1fr); } }
.grade .c { background: var(--celula); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .grade .c { padding: 32px; } }
.grade .pi { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--raio); background: var(--acao-suave); color: var(--acao); margin-bottom: 8px; }
.grade .pi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grade b { font-weight: 650; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.3; color: var(--tinta); }
.grade span.t { color: var(--texto); font-size: .9375rem; line-height: 1.55; }

/* telas reais */
.telas { display: grid; gap: 24px; }
@media (min-width: 900px) { .telas { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tela { background: var(--celula); border: 1px solid var(--regua); border-radius: var(--raio-grande); overflow: hidden; display: flex; flex-direction: column; }
.tela img { width: 100%; height: auto; border-bottom: 1px solid var(--regua); background: var(--papel); }
.tela figcaption { padding: 20px 20px 24px; }
.tela h3 { font-size: 1.125rem; margin-bottom: 6px; }
.tela p { font-size: .9375rem; color: var(--texto); }

/* calendario do mes */
.linha-do-mes { display: grid; gap: 0; border-left: 2px solid var(--divisor); margin-left: 6px; }
@media (min-width: 960px) { .linha-do-mes { grid-template-columns: repeat(4, 1fr); border-left: 0; margin: 0; gap: 32px 24px; } }
.marco { position: relative; padding: 0 0 28px 24px; }
.marco::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--acao); border: 2px solid var(--celula); }
.marco--vencimento::before { background: var(--vinte); width: 16px; height: 16px; left: -9px; top: 4px; }
@media (min-width: 960px) { .marco { padding: 28px 0 0; border-top: 2px solid var(--divisor); } .marco::before { left: 0; top: -8px; } .marco--vencimento::before { left: -2px; top: -10px; } }
.marco-quando { display: block; font-family: var(--fonte-dados); font-size: .75rem; letter-spacing: .04em; color: var(--fraco); }
.marco--vencimento .marco-quando { color: var(--vinte); font-weight: 600; }
.marco-rotulo { display: block; margin-top: 2px; font-size: 1.125rem; font-weight: 650; color: var(--tinta); letter-spacing: -0.01em; }
.marco-frase { margin-top: 6px; font-size: .9375rem; color: var(--texto); max-width: 36ch; }

/* preco: sem numero inventado */
.planos { display: grid; gap: 16px; }
@media (min-width: 900px) { .planos { grid-template-columns: 1.1fr .9fr; gap: 24px; } }
.plano { padding: 32px 28px; background: var(--celula); border: 1px solid var(--regua); border-top: 4px solid var(--acao); border-radius: var(--raio-grande); display: flex; flex-direction: column; }
.plano h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.plano .preco { margin: 20px 0 4px; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); }
.plano > p { color: var(--texto); }
.plano ul { margin: 20px 0 28px; display: grid; gap: 10px; flex: 1; }
.plano li { position: relative; padding-left: 28px; font-size: .9375rem; }
.plano li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--acao); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.plano--lado { border-top-color: var(--tinta); }
.plano--lado li::before { background: var(--tinta); }

/* guias */
.guias { display: grid; gap: 16px; }
@media (min-width: 700px) { .guias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .guias { grid-template-columns: repeat(3, 1fr); } }
.guia { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--celula); border: 1px solid var(--regua); border-radius: var(--raio-grande); transition: border-color .15s, background-color .15s; }
.guia:hover { border-color: var(--acao); }
.guia:active { background: var(--acao-suave); }
.guia h3 { font-size: 1.125rem; line-height: 1.3; }
.guia p { font-size: .9375rem; color: var(--texto); flex: 1; }
.guia .ler { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: .9375rem; font-weight: 600; color: var(--acao); }
.guia .ler .ico { width: 16px; height: 16px; transition: transform .2s var(--curva); }
.guia:hover .ler .ico { transform: translateX(4px); }

/* perguntas */
.perguntas-grade { display: grid; gap: 40px; }
@media (min-width: 900px) { .perguntas-grade { grid-template-columns: 1fr 1.6fr; gap: 80px; } .perguntas-grade .cabeca { position: sticky; top: 104px; align-self: start; margin-bottom: 0; } }
.perguntas { display: grid; gap: 12px; }
.perguntas details { background: var(--celula); border: 1px solid var(--regua); border-radius: var(--raio-grande); }
.perguntas details[open] { border-color: var(--acao); }
.perguntas summary { list-style: none; cursor: pointer; min-height: 64px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--tinta); border-radius: var(--raio-grande); }
.perguntas summary:hover { color: var(--acao); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ""; flex: none; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: var(--raio); background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; transition: background-color .2s; }
.perguntas details[open] summary::after { background: linear-gradient(#fff, #fff) center / 12px 2px no-repeat, var(--acao); border-color: var(--acao); }
.perguntas .resposta { padding: 0 20px 20px; max-width: 64ch; color: var(--texto); }

/* fecho: faixa escura com brilho azul, centrada */
.fecho { text-align: center; padding: 88px 0; }
@media (min-width: 900px) { .fecho { padding: 128px 0; } }
.fecho::after { content: ""; position: absolute; left: 50%; bottom: -260px; width: 900px; height: 420px; margin-left: -450px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,85,254,.7), transparent); pointer-events: none; }
.fecho h2 { font-size: clamp(2.125rem, 6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.035em; max-width: 16ch; margin-inline: auto; position: relative; z-index: 1; }
.fecho p { position: relative; z-index: 1; margin: 20px auto 0; max-width: 46ch; font-size: 1.125rem; color: rgba(255,255,255,.76); }
.fecho .acoes { position: relative; z-index: 1; margin-top: 36px; }
.fecho .botao--claro { background: var(--acao); color: #fff; border-color: rgba(255,255,255,.2); box-shadow: var(--brilho); }
.fecho .botao--claro:hover { background: #1a66ff; border-color: rgba(255,255,255,.3); }
.fecho-simbolo { position: absolute; right: -40px; top: -40px; width: 300px; opacity: .035; pointer-events: none; z-index: -1; }
@media (min-width: 900px) { .fecho-simbolo { right: 6%; top: -80px; width: 420px; } }

/* rodape */
.rodape { background: #06080d; color: rgba(255,255,255,.76); padding: 64px 0 32px; font-size: .9375rem; border-top: 1px solid rgba(255,255,255,.08); }
.rodape a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape-grade { display: grid; gap: 40px; }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.3fr 1fr 1.3fr 1fr; } }
.rodape .marca img { height: 40px; }
.rodape-sobre { margin-top: 16px; max-width: 34ch; font-size: .875rem; line-height: 1.55; }
.rodape h2 { font-family: var(--fonte-dados); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acao-texto-escuro); margin-bottom: 12px; }
.rodape nav a, .rodape-links a { display: flex; align-items: center; min-height: 44px; }
.rodape-links { display: block; }
.rodape-fim { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .8125rem; color: rgba(255,255,255,.7); }
.operador:empty, .operador[hidden] { display: none; }

/* paginas internas: abertura escura e compacta, corpo claro */
.abertura { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 112px 0 48px;
  background: radial-gradient(800px 360px at 50% -20%, rgba(0,85,254,.5), transparent 66%), var(--fundo); }
@media (min-width: 900px) { .abertura { padding: 140px 0 64px; } }
.abertura::before { opacity: .3; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.abertura h1 { color: #fff; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; max-width: 20ch; }
.hero-subtitulo { margin-top: 20px; max-width: 58ch; font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,.74); }
@media (min-width: 900px) { .hero-subtitulo { font-size: 1.1875rem; } }
.migalhas { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 20px; font-size: .8125rem; color: rgba(255,255,255,.7); }
.migalhas a { text-decoration: underline; text-underline-offset: 3px; }
.migalhas a:hover { color: #fff; }
.migalhas li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,.4); }
.migalhas ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.capacidades { display: grid; gap: 0; border: 1px solid var(--regua); border-radius: var(--raio-grande); overflow: hidden; background: var(--celula); }
@media (min-width: 900px) { .capacidades { grid-template-columns: 1fr 1fr; } .capacidades li:nth-child(odd) { border-right: 1px solid var(--regua); } }
.capacidades li { padding: 24px; border-top: 1px solid var(--regua); }
.capacidades li:first-child { border-top: 0; }
@media (min-width: 900px) { .capacidades li:nth-child(2) { border-top: 0; } }
.capacidades h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.capacidades p { font-size: .9375rem; color: var(--texto); }
.lista-requisitos, .lista-limites { display: grid; gap: 1px; background: var(--regua); border: 1px solid var(--regua); border-radius: var(--raio-grande); overflow: hidden; }
.lista-requisitos .item, .lista-limites .item { background: var(--celula); padding: 24px 24px 24px 28px; border-left: 3px solid var(--acao); }
.lista-limites .item { border-left-color: var(--tinta); }
.item h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.item p { font-size: .9375rem; color: var(--texto); max-width: 70ch; }
.folhas { display: grid; gap: 24px; }
@media (min-width: 900px) { .folhas { grid-template-columns: 1fr 1fr; } }
.folha { background: var(--celula); border: 1px solid var(--regua); border-top: 4px solid var(--tinta); border-radius: var(--raio-grande); padding: 28px 24px; }
.folha--destaque { border-top-color: var(--acao); }
.folha h3 { font-size: 1.25rem; margin-bottom: 12px; }
.folha ul { display: grid; gap: 12px; font-size: .9375rem; }
.folha li { padding-top: 12px; border-top: 1px solid var(--regua); }
.folha li:first-child { padding-top: 0; border-top: 0; }
.folha .valor { font-weight: 650; color: var(--tinta); font-variant-numeric: tabular-nums; }
.nota { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--regua); border-left: 3px solid var(--tinta); border-radius: var(--raio); background: var(--celula); font-size: .9375rem; max-width: 70ch; }
.canais { display: grid; gap: 24px; }
@media (min-width: 760px) { .canais { grid-template-columns: 1fr 1fr; } }
.canal { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 24px; background: var(--celula); border: 1px solid var(--regua); border-top: 4px solid var(--acao); border-radius: var(--raio-grande); }
.canal p { flex: 1; }
.cta-final { background: var(--tinta); color: #fff; border-top: 0; }
.cta-final h2 { color: #fff; }
.cta-final .secao-texto { color: rgba(255,255,255,.84); }
.cta-final-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-final .botao--secundario { color: #fff; border-color: rgba(255,255,255,.7); }
.cta-final .botao--secundario:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.cta-final .botao--primario { background: #fff; color: var(--tinta); border-color: #fff; }
.cta-final .botao--primario:hover { background: var(--acao-suave); border-color: var(--acao-suave); }

/* artigo das paginas de guia */
.artigo { max-width: 46rem; }
.artigo h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; margin: 48px 0 14px; }
.artigo h2:first-child { margin-top: 0; }
.artigo h3 { font-size: 1.1875rem; margin: 28px 0 8px; }
.artigo p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.65; }
.artigo ul.pontos { margin-top: 14px; display: grid; gap: 10px; }
.artigo ul.pontos li { position: relative; padding-left: 28px; font-size: 1.0625rem; line-height: 1.6; }
.artigo ul.pontos li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; background: var(--acao); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.artigo ul.limites li::before { background: var(--tinta); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.artigo .aviso { margin-top: 24px; padding: 18px 20px; background: var(--acao-suave); border-left: 3px solid var(--acao); border-radius: var(--raio); font-size: 1rem; }
.artigo .aviso b { color: var(--tinta); }
.artigo-grade { display: grid; gap: 48px; }
@media (min-width: 1000px) { .artigo-grade { grid-template-columns: minmax(0, 46rem) 1fr; gap: 72px; } .lateral-guia { position: sticky; top: 104px; align-self: start; } }
.lateral-guia { padding: 24px; background: var(--celula); border: 1px solid var(--regua); border-top: 4px solid var(--acao); border-radius: var(--raio-grande); }
.lateral-guia h2 { font-size: 1.125rem; margin-bottom: 8px; letter-spacing: -0.01em; }
.lateral-guia p { font-size: .9375rem; margin-bottom: 16px; }
.lateral-guia ul { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--regua); display: grid; gap: 2px; }
.lateral-guia li a { display: flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 550; color: var(--acao); }
.lateral-guia li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lateral-guia h3 { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); margin-top: 20px; font-weight: 600; }

/* movimento de entrada (so transform e opacity) */
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mov-sobe-filhos > * { animation: sobe 600ms var(--curva) both; }
.mov-sobe-filhos > :nth-child(2) { animation-delay: 120ms; }
.mov-sobe-filhos > :nth-child(3) { animation-delay: 240ms; }
.mov-sobe-filhos > :nth-child(n + 4) { animation-delay: 360ms; }
@supports (animation-timeline: view()) {
  .mov-revela { animation: sobe linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mov-sobe-filhos > *, .mov-revela { animation: none; }
  .cena, .e-acao, .trilha p, .pt::before, .passo-chip, .botao { transition: none; }
}

/* aviso de cookies: usa estes mesmos tokens (legal/consentimento.css) */

/* ajustes finais das demos e das telas */
.nota-linha { height: auto; margin-top: 6px; }
.telas { grid-template-columns: 1fr; }
@media (min-width: 900px) { .telas { grid-template-columns: repeat(2, 1fr); } }
.palco--real { padding: 16px; }
.palco--real img { width: 100%; height: auto; border: 1px solid #aebde6; border-radius: var(--raio); background: #fff; }
.palco--real .legenda { margin-top: 12px; }
@media (min-width: 640px) { .palco--real { padding: 24px; } }

.faixa--escura .lista-ico li { color: rgba(255,255,255,.9); border-top-color: rgba(255,255,255,.18); }
@media (min-width: 960px) { .palco--real { position: sticky; top: 104px; } }

@media (min-width: 1000px) { .guias { grid-template-columns: repeat(6, 1fr); } .guias .guia { grid-column: span 2; } .guias .guia:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 1000px) { .guias--hub { grid-template-columns: repeat(3, 1fr); } .guias--hub .guia, .guias--hub .guia:nth-child(n+4) { grid-column: auto; } }
@media (max-width: 479px) {
  .pt { font-size: 0; gap: 0; }
  .p-trilha { margin: 12px 0 10px; }
}
@media (max-width: 639px) {
  .fatos { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
  .fatos li { padding: 12px; font-size: 0; }
  .fatos b { font-size: .875rem; margin: 0; }
}

.cena .cena-titulo { margin: 0 0 8px; font-size: .9375rem; font-weight: 650; color: var(--tinta); letter-spacing: -0.01em; }
.canal h2 { font-size: 1.125rem; letter-spacing: -0.01em; }

/* =========================================================================
   Estilo bold: moldura das demos, cartoes, passos, perguntas e acabamentos.
   Vem por ultimo para valer sobre as regras de base acima.
   ========================================================================= */
.faixa--apoio .rotulo { background: #fff; }

/* demos: janela com cromo escuro dentro da moldura do palco */
.janela { border: 0; border-radius: 16px; background: var(--celula); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset; }
.janela-topo { height: 42px; gap: 10px; background: #0e1424; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.74); }
.janela-topo::before { content: ""; flex: none; width: 42px; height: 10px; background: radial-gradient(circle at 5px 5px, rgba(255,255,255,.26) 4px, transparent 4.5px) 0 0 / 14px 10px repeat-x; }
.janela-topo img { width: 20px; height: 20px; border-radius: 5px; }
.janela-topo b { color: #fff; font-weight: 650; }
.janela-topo .ficticio { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); font-family: var(--fonte-dados); letter-spacing: .04em; }
.demo { max-width: 100%; }
.demo--escuro { color: #fff; }
.demo--escuro .passo-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); border-radius: 99px; color: #fff; }
.demo--escuro .passo-chip:hover { border-color: rgba(143,181,255,.9); }
.demo--escuro .passo-chip[aria-pressed="true"] { background: var(--acao); border-color: rgba(255,255,255,.3); color: #fff; box-shadow: 0 0 20px rgba(0,85,254,.55); }
.demo--escuro .passo-chip[aria-pressed="true"] i { background: rgba(255,255,255,.24); }
.demo--escuro .pausa { color: rgba(255,255,255,.86); }
.passo-chip { border-radius: 99px; }
.passo-chip i { border-radius: 99px; }
.palco .demo-controles { margin: 14px 4px 0; }
.palco--real { padding: 12px; }
.palco--real img { border: 0; border-radius: 16px; }
@media (min-width: 640px) { .palco--real { padding: 16px; } }
.mini-botao { border-radius: 8px; background: var(--acao); }
.etiqueta { background: #e3f6ec; color: #065f3a; }
.barra i { background: var(--acao); }

/* passos numerados */
.passos li::before { border-radius: 12px; background: linear-gradient(135deg, #3b82f6, var(--acao)); font-family: var(--fonte-titulo); box-shadow: 0 6px 16px rgba(0,85,254,.3); }
.passos li:not(:last-child)::after { background: linear-gradient(180deg, var(--acao-borda), transparent); }
.passos h3 { font-size: 1.25rem; }

/* cartoes, planos, itens: claros, cantos de 20px, sem filete grosso */
.cartao, .plano, .folha, .canal, .lateral-guia { border: 1px solid var(--regua); border-top: 1px solid var(--regua); border-radius: 20px; box-shadow: 0 1px 2px rgba(10,13,20,.04), 0 16px 36px -18px rgba(10,13,20,.14); }
.cartao h3 .selo { border-radius: 10px; background: linear-gradient(135deg, #3b82f6, var(--acao)); }
.cartao--nao h3 .selo { background: var(--tinta); }
.cartao h3 { font-size: 1.5rem; }
.plano:first-child { border-color: var(--acao-borda); background: linear-gradient(180deg, #fff, #f3f7ff); }
.plano .preco { font-family: var(--fonte-titulo); letter-spacing: -0.03em; }
.plano--lado { background: #fff; }
.folha--destaque { border-color: var(--acao-borda); }
.canal { gap: 12px; }
.canais:has(.canal:only-child) { grid-template-columns: 1fr; }
.pede, .grade, .capacidades, .lista-requisitos, .lista-limites { border-radius: 20px; }
.grade .pi { border-radius: 12px; background: var(--acao-suave); border: 1px solid var(--acao-borda); }
.grade b, .pede h3, .capacidades h3, .item h3 { font-family: var(--fonte-titulo); letter-spacing: -0.02em; }
.guia { border-radius: 20px; box-shadow: 0 1px 2px rgba(10,13,20,.04); }
.guia:hover { border-color: var(--acao); box-shadow: 0 16px 36px -18px rgba(0,85,254,.35); transform: translateY(-2px); }
.guia { transition: border-color .15s, background-color .15s, box-shadow .2s, transform .2s var(--curva); }
.tela { border-radius: 20px; box-shadow: 0 1px 2px rgba(10,13,20,.04), 0 16px 36px -18px rgba(10,13,20,.14); }
.tela h3 { font-family: var(--fonte-titulo); }
.marco::before { background: var(--acao); }
.marco-rotulo { font-family: var(--fonte-titulo); letter-spacing: -0.02em; }
.nota { border-radius: 12px; border-left: 3px solid var(--acao); }
.perguntas details { border-radius: 16px; }
.perguntas details[open] { border-color: var(--acao-borda); background: #fbfdff; box-shadow: 0 12px 30px -18px rgba(0,85,254,.3); }
.perguntas summary { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.015em; border-radius: 16px; }
.perguntas summary::after { border-radius: 9px; }
.artigo .aviso { border-radius: 12px; background: var(--acao-suave); border: 1px solid var(--acao-borda); border-left: 3px solid var(--acao); }
.artigo h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.lateral-guia { top: 112px; }
.abertura .acoes { margin-top: 28px; }

/* aviso de cookies: arredondado e solto das bordas */
.aviso-de-cookies { left: 12px; right: 12px; bottom: 12px; border: 1px solid var(--divisor); border-radius: 16px; box-shadow: 0 18px 50px rgba(10,13,20,.28); max-width: 1100px; margin-inline: auto; }
.aviso-de-cookies .botao { min-height: 44px; }

@media (max-width: 639px) {
  .hero { padding-top: 104px; }
  .palco { padding: 8px; border-radius: 22px; }
  .janela-topo .ficticio { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guia, .guia:hover { transition: none; transform: none; }
}
.migalhas { margin-bottom: 8px; }
.migalhas a { display: inline-flex; align-items: center; min-height: 44px; }
.migalhas li { display: flex; align-items: center; }

/* =========================================================================
   Reposicionamento B2B (2026-10-05): o comprador e o escritorio contabil.
   Calculadora do custo do dia 20, comparativo e nota de limites. Mesmos tokens do resto da pagina.
   ========================================================================= */
.calc { display: grid; gap: 24px; }
@media (min-width: 960px) { .calc { grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } }
.calc-form { background: var(--papel); border: 1px solid var(--regua); border-radius: var(--raio-grande); padding: 28px 22px; }
@media (min-width: 640px) { .calc-form { padding: 32px 32px; } }
.calc-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc-form legend { padding: 0; margin-bottom: 18px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--tinta); }
.calc-campos { display: grid; gap: 16px; }
@media (min-width: 560px) { .calc-campos { grid-template-columns: 1fr 1fr; } .calc-campo--largo { grid-column: 1 / -1; } }
.calc-campo { display: flex; flex-direction: column; justify-content: flex-end; }
.calc-campo label { display: block; margin-bottom: 6px; font-size: .875rem; line-height: 1.35; font-weight: 600; color: var(--tinta); }
.calc-campo input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--divisor); border-radius: var(--raio); background: var(--celula); font: inherit; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--tinta); }
.calc-campo input:hover { border-color: var(--fraco); }
.calc-campo small { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.4; color: var(--fraco); }
.calc-saida { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--raio-grande); padding: 28px 22px; color: #fff; background: radial-gradient(520px 300px at 0% -10%, rgba(0,85,254,.45), transparent 66%), var(--fundo); box-shadow: 0 0 0 1px rgba(59,130,246,.35), 0 18px 48px rgba(0,85,254,.18); }
@media (min-width: 640px) { .calc-saida { padding: 32px; } }
.calc-saida h3 { font-size: 1rem; font-weight: 650; color: var(--acao-texto-escuro); font-family: var(--fonte-dados); letter-spacing: .08em; text-transform: uppercase; }
.calc-numeros { margin-top: 16px; display: grid; gap: 0; }
.calc-numeros > div { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.calc-numeros > div:first-child { border-top: 0; padding-top: 6px; }
.calc-numeros dt { font-size: .875rem; color: rgba(255,255,255,.78); }
.calc-numeros dd { margin: 4px 0 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc-numeros dd small { display: block; margin-top: 6px; font-family: var(--fonte); font-weight: 450; font-size: .875rem; letter-spacing: 0; color: rgba(255,255,255,.78); }
.calc-formula { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.calc-formula code { font-family: var(--fonte-dados); font-size: .78rem; color: #fff; }
.calc-formula b { color: #fff; font-weight: 650; }
.calc-aviso { margin-top: 14px; font-size: .875rem; line-height: 1.5; color: #fff; font-weight: 600; }

.compara-caixa { border: 1px solid var(--regua); border-radius: var(--raio-grande); background: var(--celula); overflow: hidden; }
.compara { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.compara th, .compara td { padding: 16px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--regua); color: var(--texto); }
.compara thead th { border-top: 0; background: var(--apoio); font-family: var(--fonte-titulo); font-weight: 700; font-size: .9375rem; color: var(--tinta); }
.compara thead th.destaque { background: var(--acao); color: #fff; }
.compara tbody th { width: 17%; font-weight: 650; color: var(--tinta); }
.compara td.destaque { background: var(--acao-suave); color: var(--tinta); }
@media (max-width: 859px) {
  .compara thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compara, .compara tbody, .compara tr, .compara th, .compara td { display: block; width: auto; }
  .compara tr { border-top: 1px solid var(--regua); padding: 6px 0 10px; }
  .compara tr:first-child { border-top: 0; }
  .compara th, .compara td { border-top: 0; padding: 8px 18px; }
  .compara tbody th { padding-top: 14px; font-family: var(--fonte-titulo); font-size: 1.0625rem; }
  .compara td::before { content: attr(data-col); display: block; margin-bottom: 2px; font-family: var(--fonte-dados); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
  .compara td.destaque { margin: 0 10px; border-radius: var(--raio); padding: 10px 12px; }
}
.compara-nota { margin-top: 16px; font-size: .875rem; color: var(--fraco); max-width: 70ch; }
.limite-nota { margin-top: 32px; padding: 20px 22px; border: 1px solid var(--regua); border-left: 4px solid var(--tinta); border-radius: var(--raio); background: var(--celula); max-width: 78ch; font-size: .9375rem; line-height: 1.6; }
.limite-nota b { color: var(--tinta); }
.hero .acoes .botao--grande { min-height: 52px; }
.escopo { margin-top: 20px; display: grid; gap: 10px; }
.escopo li { position: relative; padding-left: 28px; }
.escopo li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--acao); }