/* Site PerformanceCo. Parte 1 modelada no v1 (réplica do nominal.so): medidas e movimento
   medidos no v1 em 1440×900. Fontes, ícones e cores das etapas são os da marca
   (Marca/BRAND.md). Valores do v1 sem token ficam neste bloco até a adaptação. */
/* Fontes da marca hospedadas aqui (OFL, licenças em fontes/), só o conjunto latino, que cobre o
   português. Arquivos variáveis do Google Fonts: Literata (opsz 7–72, peso 200–700) e Schibsted
   Grotesk (peso 400–700). */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 700; font-display: swap; src: url(fontes/literata.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fontes/schibsted-grotesk.woff2) format("woff2"); }

:root {
  --v1-fundo-cabecalho: #FFFFFA;
  --v1-linha-cabecalho: #DEE5D8;
  --v1-cartao: #FFFFFA;
  --altura-cabecalho: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--cor-creme); color: var(--cor-tinta);
  font: var(--peso-medio) 18px/1.4 var(--fonte-texto); letter-spacing: -.03em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid #006BFF; outline-offset: 4px; }
.pular { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 14px 20px; background: var(--cor-tinta); color: #fff; }
.pular:focus { top: 12px; }
h1, h2 { font-family: var(--fonte-titulo); font-weight: var(--titulo-peso); font-variation-settings: var(--titulo-opsz); }

/* Cor de cada etapa: o mesmo papel por tom em toda família (BRAND.md) */
[data-etapa="encontrado"] { --tom-1: var(--cor-encontrado-1); --tom-2: var(--cor-encontrado-2); --tom-3: var(--cor-encontrado-3); --tom-4: var(--cor-encontrado-4); }
[data-etapa="escolhido"]  { --tom-1: var(--cor-escolhido-1);  --tom-2: var(--cor-escolhido-2);  --tom-3: var(--cor-escolhido-3);  --tom-4: var(--cor-escolhido-4); }
[data-etapa="capture"]    { --tom-1: var(--cor-capture-1);    --tom-2: var(--cor-capture-2);    --tom-3: var(--cor-capture-3);    --tom-4: var(--cor-capture-4); }
[data-etapa="acompanhe"]  { --tom-1: var(--cor-acompanhe-1);  --tom-2: var(--cor-acompanhe-2);  --tom-3: var(--cor-acompanhe-3);  --tom-4: var(--cor-acompanhe-4); }

.botao {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 17.5px 0 21px;
  background: var(--cor-tinta); color: var(--cor-creme); text-decoration: none;
  font: var(--peso-forte) 14px/1 var(--fonte-texto); letter-spacing: -.03em;
  transition: background var(--dur-micro) var(--curva);
}
.botao:hover { background: var(--cor-tinta-2); }

/* ─── Abertura (o #page-transition da nominal.so): tela tinta com o símbolo em creme, que some em
   pixels de baixo para cima e cobre a saída para outra página (abertura.js). Se o JS não rodar, some sozinha em 3s; com movimento
   reduzido, não aparece. ─── */
.abertura {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: var(--cor-tinta); color: var(--cor-creme); animation: abertura-sai 0s 3s forwards;
}
.abertura svg { width: clamp(64px, 6vw + 41.5px, 128px); height: auto; }
@keyframes abertura-sai { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .abertura { display: none; } }

/* ─── 1.1 Cabeçalho ─── */
.cabecalho {
  position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between;
  height: var(--altura-cabecalho); color: #151714;
  background: var(--v1-fundo-cabecalho); border-bottom: 1px solid var(--v1-linha-cabecalho);
}
/* Logo (escolha do Matheus, 09/10): só o símbolo, numa casa à esquerda com a largura dos botões
   da direita (Contato + Quero ser encontrado) e a linha espelhada, para o menu ficar no centro exato.
   O nome aparece no texto da Parte 2.1. Guardada, se ele quiser voltar: símbolo + nome como na
   Nominal, Schibsted 700, 29px, tracking −0,05em, 12px entre os dois. */
.logotipo { display: flex; align-self: stretch; text-decoration: none; align-items: center; justify-content: center; width: 293px; border-right: 1px solid var(--v1-linha-cabecalho); }
.logotipo svg { width: 31px; height: 35px; }
.logotipo-nome { display: none; }
.menu { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.menu a, .acoes a { font-size: 14px; text-decoration: none; }
.menu a:hover { text-decoration: underline; text-underline-offset: 5px; }
.acoes { display: flex; align-self: stretch; }
.acoes a { display: flex; align-items: center; padding: 0 24px; border-left: 1px solid var(--v1-linha-cabecalho); white-space: nowrap; }
.acoes a:hover { background: #F3F7EB; }
.menu-botao { display: none; padding: 20px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }

/* ─── 1.2 Capa ─── */
.capa { position: relative; overflow: clip; }
/* Fichas e conteúdo ocupam a primeira tela; a 1.3 sobe 140px por cima dela. */
.fichas, .capa-conteudo { height: calc(100svh - var(--altura-cabecalho)); }
.fichas { position: absolute; inset: 0 0 auto; transform-origin: 50% 50%; pointer-events: none; }
/* Mouse na capa (capa.js): o fundo anda até 25px e as fichas até 12,5px; a transição faz o
   atraso suave, com o tempo e a curva da nominal.so (1,2s, outQuad). */
.fichas-fundo, .fichas-frente { position: absolute; inset: 0; transition: translate 1.2s cubic-bezier(.5, 1, .89, 1); }
.fichas-fundo i {
  position: absolute; left: var(--x); top: var(--y); width: var(--l); height: var(--a);
  border-radius: 999px; background: var(--tom-3); filter: blur(6px);
}
.ficha {
  position: absolute; left: var(--x, auto); right: var(--d, auto); top: var(--y); scale: var(--s, 1);
  display: flex; gap: 6px; height: 40px; color: var(--cor-tinta);
}
.ficha i { display: grid; place-items: center; width: 40px; border-radius: 50%; }
.ficha svg { width: 18px; height: 18px; }
.ficha b { display: flex; align-items: center; padding: 0 17.6px; border-radius: 999px; font: var(--peso-forte) 16px/1 var(--fonte-texto); letter-spacing: -.03em; white-space: nowrap; }

.capa-conteudo {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--margem-pagina); text-align: center;
}
.capa-conteudo h1 { max-width: 760px; margin: 0 0 24px; font-size: 64px; line-height: 1.1; letter-spacing: -.03em; }
/* 600px reproduz a quebra do v1 ("…em um sistema / para empresas locais…") com a nossa sans. */
.capa-conteudo p { max-width: 600px; margin: 0 0 24px; color: #5A5A5A; font-size: 18px; line-height: 1.4; text-wrap: balance; }

/* Degraus: 7 barras sobrepostas pela metade; difference sobre o creme vira preto,
   duas barras juntas voltam a creme. --b é escrito pelo capa.js. */
.barras { position: absolute; inset: 0; pointer-events: none; }
.barras i {
  /* 144svh = altura da capa do v1 em 1440×900; fixa a escala no celular, onde a capa cresce. */
  position: absolute; bottom: 0; height: 144svh; width: 20%; background: var(--cor-creme);
  mix-blend-mode: difference; transform-origin: 0 100%; transform: scaleY(var(--b, .045));
}
.barras i:nth-child(1) { left: 0; }
.barras i:nth-child(2) { left: 13.333%; --b: .03; }
.barras i:nth-child(3) { left: 26.667%; }
.barras i:nth-child(4) { left: 40%; --b: .03; }
.barras i:nth-child(5) { left: 53.333%; }
.barras i:nth-child(6) { left: 66.667%; --b: .03; }
.barras i:nth-child(7) { left: 80%; width: 30%; }

/* ─── 1.3 Presença montada ─── */
.capa-tabela { position: relative; width: calc(100% - 64px); max-width: 1160px; margin: -140px auto 0; }
/* Cena da nominal.so (Lottie 1129×533, aqui em 1160): o quadro ocupa 77,85% da largura,
   começa a 11,07% da esquerda e 49px abaixo do topo; os selos vivem nas margens.
   O capa.js só reduz a cena inteira (zoom), para caber na largura e na altura da tela:
   quadro e selos sempre num enquadramento só, sem mudar a proporção. */
.tela { position: relative; width: 1160px; margin: 0 auto; padding-top: 49px; }
.presenca {
  /* Progresso de cada peça (--m), escrito pelo capa.js. Sem JS: 1. */
  --m1: 1; --m2: 1;
  width: 903px; margin-left: 128px;
  position: relative; padding: 32px 30px 20px; font-size: 14px; font-weight: var(--peso-texto); line-height: 1.4;
  background: var(--v1-cartao); border: 1px solid var(--cor-linha); border-radius: 20px;
  box-shadow: 0 16px 48px rgb(0 0 0 / .05);
}
.presenca-introducao { padding: 0 10px 8px; text-align: center; }
.presenca-introducao h2 { margin: 0 0 12px; font-size: 40px; line-height: 1.2; letter-spacing: -1px; }
.presenca-introducao p { max-width: 46ch; margin: 0 auto; font-size: 18px; line-height: 28px; color: #5A5A5A; }
.presenca-oferta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: var(--peso-medio); color: var(--cor-tinta); }
.presenca-oferta li { display: flex; align-items: center; gap: 8px; }
.presenca-oferta svg { width: 15px; height: 15px; }

/* 58px de lado + 30 do quadro = 88px livres: é onde os selos encostam sem cobrir nada.
   Duas peças só: o site e o perfil no Google, que a grade estica até a mesma altura. */
.palco {
  position: relative; display: grid; grid-template-columns: 1.65fr 1fr; gap: 32px;
  grid-template-areas: "site perfil"; padding: 32px 58px 28px;
}
.peca {
  position: relative; background: var(--cor-branco); border: 1px solid var(--cor-linha); border-radius: 14px;
  opacity: var(--m); translate: 0 calc((1 - var(--m)) * 18px); scale: calc(.97 + var(--m) * .03);
}
.perfil { --m: var(--m1); grid-area: perfil; display: flex; flex-direction: column; padding: 14px; }
.navegador { --m: var(--m2); grid-area: site; }
.linha { display: block; height: 8px; width: var(--w); border-radius: 999px; background: var(--cor-superficie-2); }

/* Selos: a mesma ficha da capa (círculo + etiqueta, 40px, o tamanho dos grandes da
   nominal.so), parada nas margens da cena. Os três do mesmo tamanho (pedido do Matheus).
   Estado final é o padrão; com data-selos="fora" (capa.js) eles voltam para dentro do quadro,
   invisíveis. Tempos do Lottie: deslize 2,1s com cubic-bezier(.618,0,.137,1), aparecem
   0,27s depois do início em 0,23s, um a cada 0,3s. */
.selos { position: absolute; inset: 0; pointer-events: none; }
.selo {
  position: absolute; left: var(--x); top: var(--y); display: flex; gap: 6px; height: 40px; color: var(--cor-tinta);
  transition: translate 2.1s cubic-bezier(.618, 0, .137, 1) var(--atraso), opacity .233s linear calc(var(--atraso) + .267s);
}
.ficha i, .ficha b, .selo i, .selo b { background: var(--tom-2); border: 1px solid var(--tom-3); }
.selo i { display: grid; place-items: center; width: 40px; border-radius: 50%; }
.selo svg { width: 18px; height: 18px; }
.selo b { display: flex; align-items: center; padding: 0 17.6px; border-radius: 999px; font: var(--peso-forte) 16px/1 var(--fonte-texto); letter-spacing: -.03em; white-space: nowrap; }
/* Volta = o Lottie da Nominal tocado ao contrário: o último a sair volta primeiro, desliza
   inteiro de volta (curva invertida) e só some no fim. */
.tela[data-selos="fora"] .selo {
  translate: var(--dx) var(--dy); opacity: 0;
  transition: translate 2.1s cubic-bezier(.863, 0, .382, 1) calc(.6s - var(--atraso)), opacity .233s linear calc(2.2s - var(--atraso));
}
.tela.quieta .selo { transition: none; }

/* Peça 1: busca + perfil no Google, como a ficha do Maps: mapa com o pino, nome, ações em
   círculo (as fichas da marca) e dados com ícone. O mapa cresce e iguala a altura do site. */
.busca { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; margin-bottom: 12px; border: 1px solid var(--cor-linha); border-radius: 999px; color: var(--cor-texto-2); }
.busca svg { width: 14px; height: 14px; }
.perfil-mapa {
  position: relative; flex: 1; min-height: 110px; border-radius: 10px;
  /* Ruas brancas sobre o fundo, uma praça no tom claro da etapa */
  background:
    linear-gradient(90deg, transparent 31%, var(--cor-branco) 31% 35%, transparent 35%),
    linear-gradient(transparent 60%, var(--cor-branco) 60% 66%, transparent 66%),
    linear-gradient(120deg, transparent 54%, var(--cor-branco) 54% 57%, transparent 57%),
    linear-gradient(var(--tom-1), var(--tom-1)) 88% 14% / 30% 32% no-repeat,
    var(--cor-superficie-2);
}
.perfil-pino {
  position: absolute; left: 56%; top: 44%; translate: -50% -50%; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--tom-2); border: 1px solid var(--tom-3);
  box-shadow: 0 0 0 7px rgb(255 255 255 / .55);
}
.perfil-pino svg { width: 17px; height: 17px; }
.perfil-corpo { display: grid; gap: 2px; padding-top: 12px; }
.perfil-corpo > b { font-size: 17px; font-weight: var(--peso-forte); }
.perfil-corpo > span { font-size: 12px; color: var(--cor-texto-2); }
.perfil-aberto strong { color: var(--cor-tinta); font-weight: var(--peso-forte); }
.perfil-aberto strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--tom-3); vertical-align: 1px; }
.perfil-acoes { display: flex; gap: 16px; margin: 10px 0 12px; }
.perfil-acoes span { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: var(--peso-medio); }
.perfil-acoes i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tom-2); border: 1px solid var(--tom-3); }
.perfil-acoes span:first-child i { background: var(--cor-tinta); border-color: var(--cor-tinta); color: var(--cor-creme); }
.perfil-acoes svg { width: 15px; height: 15px; }
.perfil-dados { display: grid; gap: 7px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--cor-linha); list-style: none; font-size: 12px; color: var(--cor-texto-2); }
.perfil-dados li { display: flex; align-items: center; gap: 8px; }
.perfil-dados svg { flex: none; width: 13px; height: 13px; color: var(--cor-tinta); }

/* Peça 2: o site da empresa, num navegador */
.navegador-barra { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--cor-linha); background: var(--cor-superficie); border-radius: 14px 14px 0 0; }
.navegador-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor-linha-forte); }
.navegador-barra span { margin-left: 12px; padding: 4px 14px; border-radius: 999px; background: var(--cor-branco); font-size: 12px; color: var(--cor-texto-2); }
.site { padding: 0 22px 22px; }
.site-topo { display: flex; align-items: center; gap: 16px; height: 48px; border-bottom: 1px solid var(--cor-linha); font-size: 12px; color: var(--cor-texto-2); }
.site-topo b { margin-right: auto; font-size: 14px; color: var(--cor-tinta); font-weight: var(--peso-forte); }
.site-capa { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: center; padding: 22px 0 16px; }
.site-capa small { font-size: 11px; color: var(--cor-texto-2); }
.site-capa strong { display: block; margin: 6px 0 8px; font: var(--titulo-peso) 22px/1.15 var(--fonte-titulo); font-variation-settings: var(--titulo-opsz); letter-spacing: -.02em; }
.site-capa p { margin: 0 0 14px; font-size: 13px; color: var(--cor-texto-2); }
.site-botoes { display: flex; gap: 8px; }
.site-botoes span { padding: 9px 14px; font-size: 12px; font-weight: var(--peso-forte); border: 1px solid var(--cor-tinta); }
.site-botoes span:first-child { background: var(--cor-tinta); color: var(--cor-creme); }
.site-foto { aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(var(--cor-superficie-2), var(--cor-superficie-2)) 50% 70% / 60% 40% no-repeat, var(--cor-superficie); }
.site-garantias { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 0 14px; font-size: 12px; font-weight: var(--peso-medio); }
.site-servicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.site-servicos div { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--cor-linha); border-radius: 10px; font-size: 12px; font-weight: var(--peso-medio); }
.site-servicos i { width: 22px; height: 22px; border-radius: 6px; background: var(--tom-1); }

.ilustrativo { position: absolute; right: 24px; bottom: 6px; font-size: 11px; color: var(--cor-texto-2); }

/* ─── 2.1 O que fazemos (centered-text da nominal.so; medidas do v1 em 1440) ─── */
.fazemos {
  position: relative; text-align: center;
  padding: clamp(96px, 3vw + 85px, 128px) var(--margem-pagina) clamp(48px, 1.5vw + 42px, 64px);
}
.rotulo { margin: 0 0 23px; font-size: 14px; color: var(--cor-texto-3); }
.fazemos h2 { max-width: 645px; margin: 0 auto 24px; font-size: var(--texto-titulo); line-height: var(--texto-titulo-lh); letter-spacing: var(--texto-titulo-ls); }
.fazemos > p:last-child { max-width: 490px; margin: 0 auto; color: var(--cor-texto-2); }
/* Revelar (capa.js parte o título em palavras): uma tarja da cor do texto encolhe para baixo
   sobre cada palavra, 0,1s uma depois da outra — o text-reveal da nominal.so (inOutExpo, 1s). */
.revelar span { position: relative; }
.revelar span::after {
  content: ""; position: absolute; inset: .09em -.12em -.025em 0; background: currentColor; transform-origin: bottom;
  transition: scale 1s cubic-bezier(.87, 0, .13, 1) calc(var(--i) * .1s);
}
.revelar.revelado span::after { scale: 1 0; }

/* ─── 2.2 a 2.4 Cartões (cards da nominal.so): três colunas entre linhas finas ─── */
.cartoes { position: relative; padding: 0 var(--margem-pagina); border-block: 1px solid var(--cor-superficie-2); }
.cartoes > ul { display: flex; margin: 0; padding: 0; list-style: none; border-inline: 1px solid var(--cor-superficie-2); }
.cartao { position: relative; flex: 1; display: flex; flex-direction: column; gap: clamp(32px, 3.75vw + 18px, 72px); padding: 48px; }
.cartao + .cartao { border-left: 1px solid var(--cor-superficie-2); }
.cartoes-setas { display: none; }
/* Ícone 2 (BRAND.md): quadrado reto e chapado, a mesma cor nos três, desenho cheio em tinta.
   Tamanho do v1 (72px em 1440). --quadro-2 também pinta os recortes do desenho. */
.icone-2 { --quadro-2: var(--cor-encontrado-3); display: block; width: clamp(48px, 2.25vw + 40px, 72px); height: auto; aspect-ratio: 1; background: var(--quadro-2); fill: var(--cor-tinta); }
.cartao h3 { margin: 0 0 20px; font: var(--titulo-peso) 28px/1.2 var(--fonte-titulo); font-variation-settings: var(--titulo-opsz); letter-spacing: -.02em; }
.cartao p { margin: 0 0 24px; color: var(--cor-texto-2); }
.lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.lista li { display: flex; align-items: center; gap: 12px; }
.lista svg { flex: none; width: 16px; height: 16px; }

/* ─── 3 Como funciona (abertura de nominal.so/our-platform, medida em 1440×900) ───
   Gráfico à esquerda (metade da largura, altura da tela), texto à direita, centrado. */
.como {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  min-height: calc(100svh - var(--altura-cabecalho));
}
/* overflow: as etiquetas esperam fora do palco antes de entrar; não podem alargar a página. */
.como-grafico { position: relative; align-self: stretch; display: flex; align-items: center; overflow: clip; }
.como-fundo { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--cor-superficie); }
.como-fundo-celular { display: none; }
.como-texto { padding: 48px var(--margem-pagina) 48px clamp(32px, 7.5vw, 110px); }
.como-texto > * { max-width: 575px; }
.como-texto h2 { margin: 0 0 24px; font-size: clamp(40px, 3vw + 21px, 64px); line-height: 1.1; letter-spacing: -.03em; }
.como-texto p:not(.rotulo) { margin: 0 0 24px; color: var(--cor-texto-2); }

/* Demonstração: palco de 560×520, a abertura da Nominal (Lottie de 1620×1500) em escala 0,3457;
   todas as medidas abaixo vêm de lá. O demonstracao.js aplica zoom para ocupar 87% da coluna.
   O CSS guarda o estado final (a tabela pronta); a animação parte dele. */
.demo { position: relative; width: 87%; aspect-ratio: 560 / 520; }
.demo-palco { position: absolute; left: 0; top: 0; width: 560px; height: 520px; font-family: var(--fonte-texto); letter-spacing: -.02em; color: var(--cor-tinta); }
/* Ícone 3: etiqueta branca reta, borda fina, desenho cheio de 21px e texto de 16px */
.demo-fonte {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; opacity: 0;
  background: var(--cor-branco); border: 1px solid var(--cor-linha-forte); font-size: 16px; font-weight: var(--peso-forte);
}
.demo-fonte > span { display: flex; align-items: center; gap: 10px; }
.demo-fonte svg { width: 21px; height: 21px; flex: none; fill: currentColor; }
.demo-cartao { position: absolute; left: 53px; top: 85px; width: 454px; height: 349px; background: var(--cor-branco); border: 1px solid var(--cor-linha-forte); }
.demo-linha { position: absolute; left: 53px; top: var(--y); width: 454px; height: 1px; background: var(--cor-linha); transform-origin: 0 50%; }
.demo-cabeca { position: absolute; left: var(--x); top: 98px; font-size: 11.4px; font-weight: var(--peso-medio); color: var(--cor-texto-3); }
/* Peças (ícone 1) na linha: 28px de altura, texto de 12px, a 69,5px da esquerda */
.demo-peca { position: absolute; left: 69.5px; top: calc(134.1px + var(--linha) * 51.9px); display: flex; gap: 5px; height: 28px; transform-origin: 0 50%; }
.demo-peca i { display: grid; place-items: center; width: 28px; border-radius: 50%; }
.demo-peca svg { width: 13px; height: 13px; }
.demo-peca b { display: flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: var(--peso-forte); white-space: nowrap; }
.demo-peca i, .demo-peca b { background: var(--tom-2); border: 1px solid var(--tom-3); }
/* Status: caixa de 15px (verde quando marcada) e texto de 12,6px */
.demo-status { position: absolute; left: 323px; top: calc(141.5px + var(--linha) * 51.85px); display: flex; align-items: center; gap: 11px; height: 15px; font-size: 12.6px; font-weight: var(--peso-forte); white-space: nowrap; }
.demo-status i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 2.3px; background: var(--cor-encontrado-2); border: 1.1px solid var(--cor-encontrado-3); }
.demo-status svg { width: 11px; height: 11px; fill: none; stroke: var(--cor-tinta); stroke-width: 2.6; stroke-dasharray: 1; }

/* ─── 4 Conheça o sistema (agent-scroll de nominal.so/our-platform, medido em 1440×900) ───
   Larguras da grade da Nominal: 16 colunas e calha de 16 a 24px. */
.sistema {
  --calha: clamp(16px, .75vw + 13.2px, 24px);
  --coluna: calc((100vw - 2 * var(--margem-pagina) - 15 * var(--calha)) / 16);
  position: relative;
}
/* Abertura: 3 telas de rolagem; o cabeçalho fica preso e a última tela é coberta pelos pontos. */
.sistema-abertura { position: relative; height: 300svh; min-height: max-content; margin-bottom: -100svh; }
.sistema-cabeca {
  position: sticky; top: var(--altura-cabecalho); z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100svh - var(--altura-cabecalho)); text-align: center;
}
.sistema-cabeca h2 { position: relative; z-index: 2; width: calc(8 * var(--coluna) + 9 * var(--calha)); margin: 0; font-size: clamp(72px, 6.76vw + 46.6px, 144px); line-height: 1; letter-spacing: -.03em; }
.sistema-cabeca p { position: relative; z-index: 4; width: calc(6 * var(--coluna) + 5 * var(--calha)); max-width: 500px; margin: 32px 0 0; color: var(--cor-texto-2); }
/* Tags: nascem no pé do cabeçalho com 20% do tamanho e sobem até --y com a escala --s.
   --p (0 → 1) vem do sistema.js; sem ele, ficam no lugar final. */
.sistema-tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sistema-tags > * {
  --p: 1;
  position: absolute; left: var(--x); top: 100%; z-index: 3;
  translate: -50% calc(-50% - var(--y) * var(--p)); scale: calc(.2 + (var(--s) - .2) * var(--p));
  background: var(--tom-2); border: 1px solid var(--tom-3); border-radius: 24px; will-change: translate, scale;
}
.sistema-tags span { padding: 8px 20px; font: var(--peso-forte) clamp(8px, .94vw + 4.5px, 18px)/1.2 var(--fonte-texto); white-space: nowrap; }
.sistema-tags i { z-index: 1; width: 120px; height: clamp(19.2px, 1.95vw + 11.9px, 40px); filter: blur(6px); }

/* Pontos: sobem por cima do cabeçalho (cortina). Cada ponto ocupa uma tela à esquerda; o
   painel da direita fica preso. */
.sistema-pontos { position: relative; z-index: 1; display: flex; align-items: flex-start; background: var(--cor-creme); border-block: 1px solid var(--cor-superficie-2); }
.sistema-coluna { position: relative; flex-grow: 1; padding-left: var(--margem-pagina); }
.sistema-item { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100svh; padding-top: var(--altura-cabecalho); }
.sistema-item > :not(svg, .sistema-camada, .botao-2) { width: calc(6 * var(--coluna) + 5 * var(--calha)); }
.sistema-item .icone-2 { width: clamp(48px, 1.5vw + 42.4px, 64px); margin-bottom: clamp(32px, .75vw + 29.2px, 40px); }
.sistema-item .rotulo { margin-bottom: 24px; }
.sistema-item h3 { margin: 0 0 24px; font: var(--titulo-peso) clamp(40px, 2.25vw + 23.6px, 56px)/1 var(--fonte-titulo); font-variation-settings: var(--titulo-opsz); letter-spacing: -.03em; }
.sistema-item h3 + p { margin: 0 0 24px; color: var(--cor-texto-2); }
/* Botão secundário (BRAND.md): contorno de 1px; 40px de altura, como o da Nominal neste bloco */
.botao-2 {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 17.5px 0 21px;
  border: 1px solid var(--cor-tinta); color: var(--cor-tinta); text-decoration: none;
  font: var(--peso-forte) 14px/1 var(--fonte-texto); letter-spacing: -.03em;
  transition: background var(--dur-micro) var(--curva);
}
.botao-2:hover { background: var(--cor-superficie); }
/* Barra de progresso: presa ao pé da coluna; aparece quando os pontos chegam (sistema.js). */
.sistema-progresso {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; height: 0; margin-right: var(--margem-pagina);
  pointer-events: none; opacity: 0; translate: 0 10px; transition: translate 1.2s var(--curva), opacity .4s var(--curva);
}
.sistema-progresso.ativo { opacity: 1; translate: 0 calc(-1rem - 10px); }
.sistema-progresso i { flex-grow: 1; height: 6px; background: var(--cor-superficie-2); }
.sistema-progresso b { display: block; height: 100%; background: var(--cor-tinta); transform-origin: 0 50%; }
.sistema-progresso span { width: 50px; font-size: 14px; text-align: right; }
/* Painel: 8 colunas + margem. Ao trocar de ponto, a faixa sobe em 0,4s e a camada nova sobe
   por cima em 1,2s (clip-path de baixo para cima); na volta, os tempos se invertem. */
.sistema-painel {
  position: sticky; top: var(--altura-cabecalho); flex-shrink: 0; overflow: hidden;
  width: calc(8 * var(--coluna) + 7 * var(--calha) + var(--margem-pagina)); height: calc(100svh - var(--altura-cabecalho));
  background: var(--cor-superficie); border-left: 1px solid var(--cor-superficie-2);
}
.sistema-faixa, .sistema-camada { position: absolute; inset: 0; clip-path: inset(100% 0 0); transition: clip-path 1.2s var(--curva); }
.sistema-faixa { background: var(--cor-superficie-2); transition-duration: .4s; }
.sistema-camada { display: grid; place-items: center; padding: var(--coluna) 0; background: var(--cor-superficie); }
.sistema-painel .ativa { clip-path: inset(0); }
.sistema-painel.volta .sistema-camada { transition-duration: .4s; }
.sistema-painel.volta .sistema-faixa { transition-duration: 1.2s; }
/* Lugar da animação de cada ponto (Lottie da Nominal: 1620×1500), até ela existir */
.sistema-camada > span { display: grid; place-items: center; width: min(78%, 560px); aspect-ratio: 1620 / 1500; border: 1px dashed var(--cor-linha-forte); color: var(--cor-texto-3); font-size: 14px; }

/* 4.1 Site animado: palco de 540×500 (o Lottie "Flux Analysis" da Nominal, 1620×1500, em 1/3);
   o animacao-site.js aplica zoom para caber na camada. O CSS guarda o site pronto com a nota. */
.sa { position: relative; width: 540px; height: 500px; font-family: var(--fonte-texto); letter-spacing: -.02em; color: var(--cor-tinta); }
.sa-grupo, .sa-baixo { position: absolute; inset: 0; }
.sa-painel { position: absolute; left: 62.3px; top: 67.7px; width: 415.7px; height: 235.3px; overflow: hidden; background: var(--cor-branco); border: 1px solid var(--cor-linha-forte); }
.sa-detalhe, .sa-esqueleto { position: absolute; inset: 0; }
.sa-topo { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: var(--peso-forte); }
.sa-topo i { width: 11px; height: 11px; background: var(--cor-tinta); }
.sa-menu { position: absolute; left: var(--x); top: 15.5px; font-size: 7px; font-weight: var(--peso-medio); color: var(--cor-texto-2); white-space: nowrap; }
.sa-menu-botao { top: 11px; padding: 4px 7px; background: var(--cor-tinta); color: var(--cor-creme); font-weight: var(--peso-forte); }
.sa-divisa { position: absolute; left: 0; right: 0; top: 42.7px; height: 1px; background: var(--cor-linha); }
.sa-linha { position: absolute; left: 14px; top: var(--y); white-space: nowrap; }
.sa-rotulo { font-size: 6.8px; color: var(--cor-texto-2); }
.sa-titulo { font: var(--titulo-peso) 16.5px/1 var(--fonte-titulo); font-variation-settings: var(--titulo-opsz); letter-spacing: -.03em; }
.sa-texto { font-size: 7.2px; color: var(--cor-texto-2); }
.sa-botao { padding: 6px 9px; background: var(--cor-tinta); color: var(--cor-creme); font-size: 7px; font-weight: var(--peso-forte); }
.sa-selo { position: absolute; left: 104px; top: 130.5px; padding: 5px 9px; border-radius: 999px; background: var(--cor-encontrado-1); border: 1px solid var(--cor-encontrado-3); font-size: 7px; font-weight: var(--peso-forte); white-space: nowrap; }
.sa-foto {
  position: absolute; left: 214px; top: 56px; width: 187.7px; height: 98px; transform-origin: 50% 100%;
  background: linear-gradient(var(--cor-superficie-2), var(--cor-superficie-2)) 50% 75% / 56% 42% no-repeat, var(--cor-superficie);
}
.sa-servico { position: absolute; left: var(--x); top: 170px; display: flex; align-items: center; gap: 7px; width: 122px; height: 40px; padding: 0 10px; border: 1px solid var(--cor-linha); font-size: 7.5px; font-weight: var(--peso-medio); }
.sa-servico i { width: 14px; height: 14px; background: var(--cor-encontrado-1); }
/* Esboço: barras presas à base do painel, que fica fixa quando ele encolhe */
.sa-esqueleto { opacity: 0; }
.sa-esqueleto i { position: absolute; left: var(--x); bottom: var(--b); width: var(--l); height: var(--a); background: var(--cor-capture-2); }
.sa-esqueleto .sa-claro { background: var(--cor-capture-1); }
.sa-nota { position: absolute; left: 105px; top: 320.7px; width: 209px; height: 96.3px; overflow: hidden; padding: 14px 16px; background: var(--cor-branco); border: 1px solid var(--cor-linha-forte); }
.sa-nota p { margin: 0; font: var(--titulo-peso) 17px/1.2 var(--fonte-titulo); font-variation-settings: var(--titulo-opsz); letter-spacing: -.02em; }
/* Marca da PerformanceCo: o círculo das fichas (tom 2 e 3 de encontrado) com o símbolo */
.sa-marca { position: absolute; left: 59.3px; top: 321px; display: grid; place-items: center; width: 32.7px; height: 32.7px; border-radius: 50%; background: var(--cor-encontrado-2); border: 1px solid var(--cor-encontrado-3); }
.sa-marca svg { width: 11px; height: 13px; }
.sa-resumo { position: absolute; left: 99.6px; top: 430.2px; display: flex; width: 345px; height: 40.7px; opacity: 0; background: var(--cor-branco); border: 1px solid var(--cor-linha-forte); }
.sa-resumo span { flex: auto; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 10.5px; font-weight: var(--peso-forte); white-space: nowrap; }
.sa-resumo span + span { border-left: 1px solid var(--cor-linha); }
.sa-resumo i { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 2px; background: var(--cor-encontrado-2); border: 1px solid var(--cor-encontrado-3); }
.sa-resumo svg { width: 9px; height: 9px; fill: none; stroke: var(--cor-tinta); stroke-width: 2.8; }
.sa-pilula { position: absolute; left: 98.3px; top: 307.7px; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; opacity: 0; border-radius: 999px; background: var(--cor-encontrado-2); border: 1px solid var(--cor-encontrado-3); font-size: 10.5px; font-weight: var(--peso-forte); white-space: nowrap; }
.sa-pilula svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* 4.2 Perfil animado: mesmo palco de 540×500 (o ritmo do Lottie "Bank Reconciliation" da Nominal).
   1ª fase: pesquisa de computador (lista à esquerda, mapa à direita); 2ª: o clique abre a ficha no
   lugar do mapa e a câmera aproxima. O CSS guarda a pesquisa com a ficha aberta. */
.sp { overflow: hidden; }
.sp .sp-marca { z-index: 2; left: 63.7px; top: 98px; opacity: 0; }
.sp-pilula { position: absolute; z-index: 2; left: 100px; top: 98.3px; display: flex; align-items: center; height: 32px; padding: 0 16px; opacity: 0; border-radius: 999px; background: var(--cor-encontrado-2); border: 1px solid var(--cor-encontrado-3); font-size: 11px; font-weight: var(--peso-forte); white-space: nowrap; }
.sp-largo { position: absolute; inset: 0; transform-origin: 0 0; }
.sp-tabela { position: absolute; left: 64px; top: 146.7px; width: 412px; height: 315.7px; overflow: hidden; background: var(--cor-branco); border: 1px solid var(--cor-linha-forte); }
.sp-divisa { position: absolute; left: 0; right: 0; top: var(--y); height: 1px; background: var(--cor-linha); }
/* Topo da pesquisa: barra (o texto é digitado), abas, filtros e o título "Locais" */
.sp-busca { position: absolute; left: 12px; top: 8px; display: flex; align-items: center; gap: 7px; width: 300px; height: 22px; padding: 0 10px; border: 1px solid var(--cor-linha-forte); border-radius: 11px; font-size: 7.5px; white-space: nowrap; }
.sp-busca svg { width: 9px; height: 9px; flex: none; }
.sp-abas { position: absolute; left: 22px; top: 36px; display: flex; gap: 14px; font-size: 6px; color: var(--cor-texto-3); }
.sp-abas span { padding-bottom: 4px; }
.sp-aba-ativa { color: var(--cor-tinta); font-weight: var(--peso-forte); border-bottom: 1.5px solid var(--cor-tinta); }
.sp-filtros { position: absolute; left: 12px; top: 57px; display: flex; gap: 5px; }
.sp-filtros span { padding: 3px 7px; border: 1px solid var(--cor-linha-forte); border-radius: 6px; font-size: 5.5px; font-weight: var(--peso-medio); }
.sp-locais { position: absolute; left: 12px; top: 78px; font: var(--titulo-peso) 11px/1 var(--fonte-titulo); font-variation-settings: var(--titulo-opsz); }
/* Lista: cinco resultados de 43px; a Empresa Alfa sobe do 4º para o 1º lugar (--de → --para) */
.sp-linha { position: absolute; left: 0; top: calc(93px + var(--para) * 43px); display: flex; align-items: center; gap: 6px; width: 224px; height: 43px; padding: 0 8px 0 12px; background: var(--cor-branco); }
.sp-nossa { z-index: 1; }
.sp-linha > span { display: grid; gap: 1.5px; flex: 1; min-width: 0; }
.sp-linha b { font-size: 7.5px; font-weight: var(--peso-forte); }
.sp-linha small { font-size: 5.5px; color: var(--cor-texto-3); white-space: nowrap; }
.sp-linha .sp-aberto-ate { color: var(--cor-texto-2); }
.sp-linha > i { display: grid; justify-items: center; gap: 1px; flex: none; }
.sp-linha > i svg { box-sizing: content-box; width: 7px; height: 7px; padding: 3.5px; border: 1px solid var(--cor-linha-forte); border-radius: 50%; }
.sp-linha > i small { font-size: 4.8px; color: var(--cor-tinta); }
/* Mapa à direita: ruas, um parque, água; pinos em gota (roxos) e o da Empresa Alfa (verde, com nome) */
.sp-mapa-grande {
  position: absolute; left: 232px; top: 76px; width: 170px; height: 230px; overflow: hidden; border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 47%, var(--cor-branco) 47% 50%, transparent 50%),
    linear-gradient(transparent 38%, var(--cor-branco) 38% 40.5%, transparent 40.5%),
    linear-gradient(transparent 74%, var(--cor-branco) 74% 76%, transparent 76%),
    linear-gradient(115deg, transparent 58%, var(--cor-branco) 58% 60%, transparent 60%),
    linear-gradient(35deg, transparent 30%, var(--cor-branco) 30% 31.5%, transparent 31.5%),
    linear-gradient(var(--cor-encontrado-1), var(--cor-encontrado-1)) 88% 58% / 26% 14% no-repeat,
    linear-gradient(var(--cor-capture-1), var(--cor-capture-1)) 0 0 / 100% 12% no-repeat,
    var(--cor-superficie-2);
}
.sp-mapa-grande > i { position: absolute; left: var(--x); top: var(--y); translate: -50% -100%; display: flex; align-items: center; gap: 3px; color: var(--cor-capture-3); }
.sp-mapa-grande > i svg { width: 12px; height: 12px; fill: var(--cor-capture-2); }
.sp-mapa-grande .sp-pino-nosso { z-index: 1; color: var(--cor-tinta); transform-origin: 6px 100%; translate: -6px -100%; }
.sp-pino-nosso svg { width: 16px; height: 16px; fill: var(--cor-encontrado-3); }
.sp-pino-nosso b { padding: 1px 4px; border-radius: 3px; background: var(--cor-branco); font-size: 5.5px; font-weight: var(--peso-forte); white-space: nowrap; }
.sp-mapa-grande > span { position: absolute; right: 6px; top: 6px; padding: 3px 6px; border-radius: 6px; background: var(--cor-branco); font-size: 5.5px; font-weight: var(--peso-forte); }
/* Ficha: abre no lugar do mapa, em pé, como o perfil de uma empresa no computador */
.sp-ficha { position: absolute; left: 232px; top: 56px; width: 170px; height: 254px; overflow: hidden; background: var(--cor-branco); border: 1px solid var(--cor-linha-forte); border-radius: 6px; }
.sp-titulo { position: absolute; left: 8px; top: 8px; font-size: 9px; font-weight: var(--peso-forte); }
.sp-categoria { position: absolute; left: 8px; top: 20px; font-size: 5.8px; color: var(--cor-texto-3); }
.sp-fabas { position: absolute; left: 8px; top: 31px; display: flex; gap: 4px; }
.sp-fabas span { padding: 2px 6px; border: 1px solid var(--cor-linha-forte); border-radius: 999px; font-size: 5.5px; font-weight: var(--peso-medio); }
.sp-fabas .sp-faba-ativa { border-color: var(--cor-tinta); font-weight: var(--peso-forte); }
.sp-foto { position: absolute; left: var(--x); top: 48px; width: var(--l); height: 46px; border-radius: 4px; background: linear-gradient(var(--cor-linha-forte), var(--cor-linha-forte)) 50% 70% / 50% 36% no-repeat, var(--cor-superficie-2); }
.sp-botoes { position: absolute; left: 8px; top: 99px; display: flex; gap: 3px; }
.sp-botoes span { display: flex; align-items: center; gap: 2px; padding: 2px 5px; border: 1px solid var(--cor-linha-forte); border-radius: 999px; font-size: 5.3px; font-weight: var(--peso-medio); }
.sp-botoes svg { width: 6px; height: 6px; }
.sp-divisa-ficha { left: 8px; right: 8px; }
.sp-dado { position: absolute; left: 8px; right: 8px; top: var(--y); display: flex; align-items: center; gap: 6px; font-size: 6px; color: var(--cor-texto-2); }
.sp-dado > svg { width: 8px; height: 8px; flex: none; color: var(--cor-tinta); }
.sp-dado strong { color: var(--cor-tinta); font-weight: var(--peso-forte); }
.sp-dado-forte { color: var(--cor-tinta); font-weight: var(--peso-forte); }
.sp-ok { display: grid; place-items: center; width: 9px; height: 9px; margin-left: auto; border-radius: 2px; background: var(--cor-encontrado-2); border: 1px solid var(--cor-encontrado-3); }
.sp-ok svg { width: 7px; height: 7px; fill: none; stroke: var(--cor-tinta); stroke-width: 3; stroke-dasharray: 1; }
/* Avaliações: o conteúdo fica em linhas cinza (nada inventado); o destaque é a resposta do dono */
.sp-avaliacao { position: absolute; left: 22px; right: 8px; top: 205px; display: grid; gap: 4px; }
.sp-avaliacao > i, .sp-resposta i { display: block; width: var(--l); height: 3.5px; border-radius: 2px; background: var(--cor-superficie-2); transform-origin: 0 50%; }
.sp-resposta { display: grid; gap: 3px; margin-top: 2px; padding: 4px 0 4px 6px; border-left: 2px solid var(--cor-encontrado-3); background: var(--cor-encontrado-1); }
.sp-resposta small { font-size: 5.5px; font-weight: var(--peso-forte); }
.sp-ilustrativo { position: absolute; right: 10px; bottom: 8px; font-size: 7.5px; color: var(--cor-texto-2); }

/* ─── 5 O que muda (comparison-table de nominal.so/our-platform, medida em 1440×900) ───
   Caixa com borda fina a uma coluna das margens; cabeçalho em faixa tinta; linhas separadas por
   hairline. Conteúdo nosso: cada linha é um momento de quem procura o serviço, com as bolhas
   "Hoje × Com a PerformanceCo" do BRAND.md (Hoje neutra com ✕; Com no tom 1 da etapa, com ✓). */
.comparar {
  --calha: clamp(16px, .75vw + 13.2px, 24px);
  --coluna: calc((100vw - 2 * var(--margem-pagina) - 15 * var(--calha)) / 16);
}
.comparar-caixa { margin-inline: calc(var(--coluna) + var(--calha) + var(--margem-pagina)); padding-top: clamp(96px, 3vw + 85px, 128px); border: 1px solid var(--cor-superficie-2); text-align: center; }
.comparar h2 { max-width: 760px; margin: 0 auto; font-size: clamp(30px, 2.44vw + 20.9px, 56px); line-height: 1; letter-spacing: -.03em; }
.comparar table { display: flex; flex-direction: column; margin-top: clamp(40px, .75vw + 37.2px, 48px); overflow: clip; border-collapse: collapse; text-align: left; }
.comparar thead, .comparar tbody { display: block; }
.comparar tr { display: flex; column-gap: calc(var(--coluna) * .5 + var(--calha)); padding-inline: calc(var(--coluna) + var(--calha)); }
.comparar th, .comparar td { flex: 1; display: flex; align-items: center; }
.comparar th { padding-block: 16px; font-size: 16px; font-weight: var(--peso-forte); text-wrap: balance; }
.comparar thead tr { background: var(--cor-tinta); color: var(--cor-creme); }
.comparar :is(th, td):first-child { flex: .8; }
.comparar td { padding-block: 20px; font-size: clamp(14px, .19vw + 13.3px, 16px); line-height: 1.4; color: var(--cor-texto-2); text-wrap: pretty; }
.comparar td:first-child { font: var(--titulo-peso) 26px/1.2 var(--fonte-titulo); font-variation-settings: var(--titulo-opsz); letter-spacing: -.02em; color: var(--cor-tinta); text-wrap: balance; }
.comparar tbody tr + tr { border-top: 1px solid var(--cor-superficie-2); }
.bolha { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 16px 18px; border-radius: 16px; background: var(--cor-superficie); }
.bolha.com { background: var(--tom-1); color: var(--cor-tinta); }
.bolha b { display: block; margin-bottom: 2px; font-weight: var(--peso-forte); }
.bolha i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cor-superficie-2); }
.bolha.com i { background: var(--tom-2); }
.bolha svg { width: 12px; height: 12px; }
/* Linhas: sobem do tamanho delas e aparecem, 0,8s com desaceleração out(2), 0,1s entre elas
   (capa.js põe .anima e, com metade da tabela na tela, .revelada). Sem JS, aparecem direto. */
.comparar table.anima tr { opacity: 0; translate: 0 100%; transition: opacity .8s cubic-bezier(.5, 1, .89, 1) calc(var(--i) * .1s), translate .8s cubic-bezier(.5, 1, .89, 1) calc(var(--i) * .1s); }
.comparar table.revelada tr { opacity: 1; translate: 0 0; }

/* ─── 6 Artigos (featured-articles da nominal.so, medida em 1440 e 390) ───
   Faixa na largura toda com duas linhas verticais na margem; cabeçalho a uma coluna da margem;
   três cartões (imagem, meta e título) e, embaixo, uma linha com o botão "Ver todos os artigos".
   Fundo tinta, como na página inicial da Nominal (escolha do Matheus entre este e o claro da
   our-platform, 09/10).
   Com o mouse em cima, o texto do cartão fica com 60% (0,4s). */
.artigos {
  --calha: clamp(16px, .75vw + 13.2px, 24px);
  --coluna: calc((100vw - 2 * var(--margem-pagina) - 15 * var(--calha)) / 16);
  --linha: var(--cor-tinta-2);
  position: relative; display: flex; flex-direction: column; row-gap: clamp(32px, 1.88vw + 25px, 52px);
  margin-top: clamp(96px, 3vw + 85px, 128px); padding: clamp(88px, 3.76vw + 74px, 128px) 0 clamp(88px, 3vw + 77px, 120px);
  background: var(--cor-tinta); color: var(--cor-creme); border-top: 1px solid var(--linha);
}
.artigos::before { content: ""; position: absolute; inset: 0 var(--margem-pagina); border-inline: 1px solid var(--linha); pointer-events: none; }
.artigos-cabeca { padding-inline: calc(var(--coluna) + var(--calha) + var(--margem-pagina)); }
.artigos h2 { margin: 0; font-size: clamp(32px, 1.6vw + 24.9px, 48px); line-height: 1.1; letter-spacing: -.03em; }
.artigos-lista { padding-inline: var(--margem-pagina); border-bottom: 1px solid var(--linha); }
/* Sem o botão "Ver todos" (até o blog ir ao ar), o respiro que ele dava fica embaixo dos cartões */
.artigos-lista:not(:has(.artigos-mais)) { padding-bottom: clamp(48px, .75vw + 45px, 56px); }
.artigos ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 1.5vw + 26.4px, 48px) var(--calha); margin: 0; padding: 0 calc(var(--coluna) + var(--calha)); list-style: none; }
.artigos li > :is(a, div) { display: flex; flex-direction: column; row-gap: clamp(12px, .75vw + 9px, 20px); color: inherit; text-decoration: none; }
.artigos li svg { display: block; width: 100%; height: auto; background: var(--tom-1); --quadro-2: var(--cor-branco); }
.artigos .t2 { fill: var(--tom-2); }
.artigos .t3 { fill: var(--tom-3); }
.artigos .branco { fill: var(--cor-branco); }
.artigos li use { fill: var(--cor-tinta); }
.artigos-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 1.4; letter-spacing: -.02em; }
.artigos-meta i { width: 6px; height: 6px; background: currentColor; }
.artigos h3 { margin: -4px 0 0; font: var(--peso-medio) clamp(16px, .19vw + 15.3px, 18px)/1.4 var(--fonte-texto); letter-spacing: -.03em; text-wrap: balance; }
.artigos li > :is(a, div) > :not(svg) { transition: opacity .4s var(--curva); }
@media (hover: hover) { .artigos li a[href]:hover > :not(svg) { opacity: .6; } }
.artigos-mais { display: flex; justify-content: center; margin-top: clamp(48px, .75vw + 45px, 56px); padding-block: clamp(16px, .75vw + 13px, 24px); border-top: 1px solid var(--linha); }
.artigos :is(.rotulo, .artigos-meta) { color: var(--cor-linha-forte); }
.artigos .botao-2 { border-color: transparent; color: var(--cor-creme); }
.artigos .botao-2:hover { background: var(--cor-tinta-2); }

/* ─── 7.1 Faixa final (.sock de nominal.so/our-platform, medida em 1440 e 375) ───
   Duas metades; o título fica a uma coluna da margem e os blocos encostam na linha do rodapé,
   chegando à borda da tela. Blocos: base (4 colunas + margem), quadrado solto à esquerda, botão
   centrado na borda esquerda da base e bloco de cima (46,6% da base). Cada um se desenha da
   esquerda para a direita, 1s com desaceleração forte, 0,1s entre eles (capa.js põe .anima e
   alterna .dentro). Na Nominal os blocos têm 64px e o botão 81px; aqui todos têm a altura do
   botão da marca (52px). */
.fecho {
  --calha: clamp(16px, .75vw + 13.2px, 24px);
  --coluna: calc((100vw - 2 * var(--margem-pagina) - 15 * var(--calha)) / 16);
  --b: 52px;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  padding-top: clamp(64px, 1.45vw + 59.1px, 80px); overflow: clip;
}
.fecho h2 {
  margin: 0; padding: 0 0 64px calc(var(--margem-pagina) + var(--coluna) + var(--calha));
  font-size: clamp(24px, 2.17vw + 16.7px, 48px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance;
}
.fecho-blocos { position: relative; justify-self: end; width: calc(var(--coluna) * 4 + var(--calha) * 3 + var(--margem-pagina)); height: calc(var(--b) * 3 - 5px); }
.fecho-blocos > * { position: absolute; transition: clip-path 1s cubic-bezier(.16, 1, .3, 1) var(--atraso, 0s); }
.fecho-base { left: 0; right: 0; bottom: 0; height: var(--b); background: var(--cor-tinta); }
.fecho-quadrado { left: -46.6%; bottom: 0; width: var(--b); height: var(--b); background: var(--cor-tinta); }
.fecho-botao { left: 0; bottom: var(--b); translate: -50% 0; white-space: nowrap; transition: clip-path 1s cubic-bezier(.16, 1, .3, 1) .1s, background var(--dur-micro) var(--curva); }
.fecho-topo { left: 0; bottom: calc(var(--b) * 2 + 3px); width: 46.6%; height: var(--b); background: var(--cor-tinta); --atraso: .2s; }
.fecho.anima .fecho-blocos > * { clip-path: inset(0 100% 0 0); }
.fecho.anima.dentro .fecho-blocos > * { clip-path: inset(0); }

/* ─── 7.2 Rodapé (footer de nominal.so/our-platform) ───
   Linha forte em cima; símbolo grande à esquerda; grupos de links em duas fileiras de três colunas de 3 colunas da grade,
   separadas por 1 coluna + 2 calhas; faixa de baixo com direitos e páginas legais. */
.rodape {
  --calha: clamp(16px, .75vw + 13.2px, 24px);
  --coluna: calc((100vw - 2 * var(--margem-pagina) - 15 * var(--calha)) / 16);
  position: relative; padding-top: clamp(48px, 2.17vw + 40.7px, 72px); border-top: 1px solid var(--cor-linha-forte);
  font-size: 14px; letter-spacing: -.02em;
}
.rodape a { text-decoration: none; transition: color .8s var(--curva); }
.rodape a:hover { color: var(--cor-texto-2); }
.rodape-topo { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 64px; padding-inline: var(--margem-pagina); }
.rodape-logo svg { display: block; width: clamp(70px, 10.2vw, 145px); height: auto; }
.rodape ul { margin: 0; padding: 0; list-style: none; }
.rodape nav > ul { display: grid; grid-template-columns: repeat(3, calc(var(--coluna) * 3 + var(--calha) * 2)); gap: 48px calc(var(--coluna) + var(--calha) * 2); }
.rodape nav span { display: block; margin-bottom: 12px; line-height: 1.4; color: var(--cor-texto-3); }
.rodape nav li ul { display: flex; flex-direction: column; gap: 12px; }
.rodape nav li ul a { line-height: 1.15; }
.rodape-base { display: flex; align-items: center; gap: 16px; padding: 24px var(--margem-pagina); border-top: 1px solid var(--cor-linha-forte); line-height: 1.4; color: var(--cor-texto-2); }
.rodape-base p { margin: 0; }
.rodape-base a { font-weight: var(--peso-forte); color: var(--cor-tinta); }

/* ─── Páginas legais (privacidade.html, termos.html): uma coluna de leitura ─── */
.legal { max-width: 720px; margin: 0 auto; padding: clamp(48px, 5vw, 96px) var(--margem-pagina) 96px; }
.legal h1 { margin: 0 0 32px; font-size: clamp(36px, 2.44vw + 20.9px, 56px); line-height: 1; letter-spacing: -.03em; }
.legal h2 { margin: 48px 0 12px; font: var(--titulo-peso) 24px/1.2 var(--fonte-titulo); font-variation-settings: var(--titulo-opsz); letter-spacing: -.02em; }
.legal :is(p, li) { font-size: 16px; line-height: 1.6; letter-spacing: -.01em; color: var(--cor-texto-2); }
.legal p { margin: 0 0 12px; }
.legal .rotulo { margin-bottom: 16px; font-size: 14px; color: var(--cor-texto-3); }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal strong, .legal a:not(.botao) { color: var(--cor-tinta); }
.legal .botao { margin-top: 20px; }
.legal + .rodape { padding-top: 0; border-top: 0; }

/* ─── Telas menores ─── */
/* Parte 6: abaixo de 1100px, dois cartões (o terceiro sai), como na Nominal */
/* Velocidade (Lighthouse, 09/10): o celular calculava a página inteira na abertura. Da Parte 3 em
   diante, o navegador só desenha a seção quando o visitante chega perto; até lá, reserva a altura
   medida em 1440 e em 390px (o "auto" guarda a altura real depois da primeira vez). */
.como, .sistema, .comparar, .artigos, .fecho, .rodape { content-visibility: auto; contain-intrinsic-size: auto var(--altura-reservada); }
.como { --altura-reservada: 816px; }
.sistema { --altura-reservada: 3602px; }
.comparar, .artigos { --altura-reservada: 809px; }
.fecho { --altura-reservada: 302px; }
.rodape { --altura-reservada: 482px; }
@media (max-width: 760px) {
  .como { --altura-reservada: 952px; }
  .sistema { --altura-reservada: 3675px; }
  .comparar { --altura-reservada: 786px; }
  .artigos { --altura-reservada: 1407px; }
  .fecho { --altura-reservada: 338px; }
  .rodape { --altura-reservada: 1008px; }
}

@media (max-width: 1100px) {
  .artigos ul { grid-template-columns: repeat(2, 1fr); }
  .artigos li:last-child { display: none; }
}
@media (max-width: 1000px) {
  .menu { gap: 18px; }
  .acoes a { padding-inline: 18px; }
  .logotipo { width: 269px; }
}
@media (max-width: 900px) {
  /* Entre 761 e 900px o menu não cabia com o Contato no cabeçalho: ele fica no rodapé */
  .acoes .acoes-contato { display: none; }
  .logotipo { width: 184px; }
}
/* Até 900px (celular e tablet), como na nominal.so no celular: a 1.3 continua com o site e o
   perfil lado a lado, vista de longe (a cena inteira reduzida; quem quiser, amplia com os dedos),
   para ficar claro que é um site; só o título e o texto de cima ficam no tamanho de leitura
   (--zoom vem do capa.js). Os selos saem. Pedido do Matheus, 09/10. */
@media (max-width: 900px) {
  .selos { display: none; }
  .presenca-introducao h2 { font-size: calc(24px / var(--zoom, 1)); }
  .presenca-introducao p { max-width: none; font-size: calc(14px / var(--zoom, 1)); line-height: 1.4; }
  .presenca-oferta { gap: calc(4px / var(--zoom, 1)) calc(16px / var(--zoom, 1)); margin-top: calc(12px / var(--zoom, 1)); font-size: calc(13px / var(--zoom, 1)); }
  .presenca-oferta li { gap: calc(6px / var(--zoom, 1)); }
  .presenca-oferta svg { width: calc(12px / var(--zoom, 1)); height: calc(12px / var(--zoom, 1)); }
  /* 2.2–2.4: carrossel de lado, como o "What We Do" da nominal.so no celular: um cartão e a ponta
     do próximo; embaixo, uma faixa com as setas */
  .cartoes { padding: 0; }
  .cartoes > ul { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-inline: 0; }
  .cartoes > ul::-webkit-scrollbar { display: none; }
  .cartao { flex: 0 0 86%; scroll-snap-align: start; padding: 32px var(--margem-pagina); }
  .cartoes-setas { display: flex; border-top: 1px solid var(--cor-superficie-2); }
  .cartoes-setas button {
    flex: 1; height: 56px; padding: 0; border: 0; background: none; color: var(--cor-tinta);
    font: var(--peso-forte) 20px/1 var(--fonte-texto); cursor: pointer;
  }
  .cartoes-setas button + button { border-left: 1px solid var(--cor-superficie-2); }
  .cartoes-setas button:disabled { color: var(--cor-linha-forte); cursor: default; }
  /* Parte 3: texto primeiro; embaixo, a demonstração sobre o fundo em degraus do celular da
     our-platform (faixa fina no topo, degrau pequeno à direita e o resto cheio) */
  .como { grid-template-columns: 1fr; min-height: 0; }
  .como-texto { order: -1; max-width: none; padding: 64px var(--margem-pagina) 40px; }
  .como-grafico { justify-content: center; padding: 56px 0 24px; }
  .como-fundo { display: none; }
  .como-fundo-celular { display: block; }
  .demo { width: min(100%, 560px); }
}
/* Parte 4 abaixo de 940px (o corte da Nominal): sem painel preso; o sistema.js põe cada
   camada dentro do seu ponto, acima do ícone, na largura toda. */
@media (max-width: 940px) {
  .sistema-cabeca { padding-inline: var(--margem-pagina); }
  .sistema-cabeca h2, .sistema-cabeca p { width: 100%; }
  .sistema-tags > * { left: var(--xm); translate: -50% calc(-50% - var(--ym) * var(--p)); }
  .sistema-painel { display: none; }
  .sistema-coluna { min-width: 0; padding-left: 0; }
  .sistema-item { height: auto; padding-bottom: 10svh; }
  .sistema-item > :not(svg, .sistema-camada, .botao-2) { width: auto; }
  .sistema-item > :not(.sistema-camada) { margin-inline: var(--margem-pagina); }
  .sistema-item .sistema-camada {
    position: static; clip-path: none; align-self: stretch; height: 120vw; max-height: 720px; margin-bottom: 24px; padding: 44px 0;
    border-block: 1px solid var(--cor-superficie-2);
  }
  .sistema-progresso { display: none; }
  /* Parte 5: caixa na largura das margens; em vez de rolar de lado (Nominal), as três colunas
     ficam lado a lado e tudo encolhe, para a tabela caber inteira na tela (pedido do Matheus, 08/10) */
  .comparar-caixa { margin-inline: var(--margem-pagina); }
  .comparar tr { column-gap: 8px; padding-inline: 12px; }
  .comparar :is(th, td):first-child { flex: .7; }
  .comparar th { justify-content: center; padding-block: 12px; font-size: clamp(12px, .55vw + 9.9px, 15px); text-align: center; }
  .so-computador { display: none; }
  .comparar td { padding-block: 12px; font-size: clamp(12px, .55vw + 9.9px, 15px); line-height: 1.35; }
  .comparar td:first-child { font-size: clamp(15px, 1.27vw + 10px, 22px); }
  .bolha { flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; }
  .bolha i { width: 20px; height: 20px; }
  .bolha svg { width: 10px; height: 10px; }
  /* Parte 6: sem as linhas verticais; cabeçalho e cartões na margem */
  .artigos::before { display: none; }
  .artigos-cabeca, .artigos ul { padding-inline: var(--margem-pagina); }
  .artigos-lista { padding-inline: 0; }
  /* Parte 7.1: uma coluna; título na margem; blocos na largura toda, nas posições da Nominal em 375px */
  .fecho { grid-template-columns: 1fr; }
  .fecho h2 { padding: 0 var(--margem-pagina) 32px; line-height: 1.2; }
  .fecho-blocos { width: 100%; }
  .fecho-base { left: 29.3%; }
  .fecho-quadrado { left: calc(29.3% - 123px); }
  .fecho-botao { left: 23%; translate: none; }
  .fecho-topo { left: 66%; width: 23%; }
  /* Parte 7.2: símbolo em cima, links em duas colunas, faixa de baixo empilhada */
  .rodape-topo { flex-direction: column; }
  .rodape nav > ul { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .rodape nav li ul { gap: 0; }
  .rodape nav li ul a { display: inline-block; padding-block: 13px; }
  .rodape-base a { padding-block: 12px; }
  .rodape-base { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 16px; }
}
/* Parte 6: abaixo de 768px, um cartão por linha, os três */
@media (max-width: 768px) {
  .artigos ul { grid-template-columns: 1fr; }
  .artigos li:last-child { display: block; }
}
@media (max-width: 760px) {
  :root { --altura-cabecalho: 76px; }
  .logotipo { width: auto; padding-inline: 20px; border-right: 0; gap: 12px; }
  /* Nome ao lado do símbolo, como a nominal.so no celular (a alternativa guardada no BRAND.md) */
  .logotipo-nome { display: block; font: 700 29px/1 var(--fonte-texto); letter-spacing: -.05em; color: var(--cor-tinta); }
  .menu-botao { display: block; }
  .menu { display: none; position: absolute; top: var(--altura-cabecalho); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 24px; background: var(--v1-fundo-cabecalho); box-shadow: 0 8px 12px rgb(0 0 0 / .07); }
  .menu[data-aberto] { display: flex; }
  .menu a { display: block; padding: 15px 0; font-size: 18px; }
  .menu-botao { margin-left: auto; min-width: 56px; }
  /* "Quero ser encontrado" vira a faixa fixa no pé da tela, como o "Book a Demo" da nominal.so no celular */
  .acoes { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; }
  .acoes a { flex: 1; justify-content: center; border: 0; background: var(--cor-tinta); color: var(--cor-creme); font-size: 16px; font-weight: var(--peso-forte); }
  .acoes a:hover { background: var(--cor-tinta-2); }
  .acoes-contato { display: none !important; }
  .rodape { padding-bottom: 56px; }

  /* Capa como a nominal.so no celular: sem manchas, 3 fichas acima do título e 2 logo acima da
     tabela, para o título ficar em destaque */
  .fichas .fora-celular, .fichas-fundo { display: none; }
  .ficha { left: var(--xm, auto); right: var(--dm, auto); top: var(--ym); scale: var(--sm, 1); }
  /* Como na nominal.so no celular: sem degraus e a tabela não sobe por cima da capa (deixava um
     vão grande antes da Parte 2); a página segue direto */
  .barras { display: none; }
  .capa-tabela { translate: none !important; }
  .capa-conteudo h1 { font-size: 36px; }
  .capa-tabela { width: calc(100% - 32px); margin-top: -80px; }
}
@media (max-width: 480px) {
  .logotipo { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Numeração das partes: só em localhost (data-dev), para facilitar o feedback. */
html[data-dev] [data-parte]::after {
  content: "Parte " attr(data-parte) " · " attr(data-nome);
  position: absolute; left: 8px; bottom: 4px; z-index: 20; padding: 2px 6px; pointer-events: none;
  background: var(--cor-acompanhe-4); color: #fff; font: 600 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: 0;
  mix-blend-mode: normal;
}