/* =============================================================================
   Marco Gouveia — IA, automações e vendas · design system
   Reescrito em 10/09/2026. O DNA é o da bio dele (clique.marcogouveia.digital/dev):
   zine de papel — papel bege, tinta preta, canto vivo, fita adesiva, sombra dura.
   Extraído do CÓDIGO daquela página (link_bio_marco/app/globals.css e components/),
   não de print: é a frente D da skill vibe-design, com a referência dentro de casa.

   Um acento só: o marca-texto amarelo. Ele marca o que sai da mão de alguém.
   O mapa de cada efeito está em ../TECNOLOGIAS.md
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/lp/assets/fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/lp/assets/fonts/SpaceMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/lp/assets/fonts/SpaceMono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. tokens ---------------------------------------------------- */

:root {
  /* 1.1 famílias — as mesmas duas da bio */
  --fonte: "Space Grotesk", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --fonte-mono: "Space Mono", "Geist Mono", ui-monospace, monospace;

  /* 1.2 cor — a paleta da bio, sem acréscimo */
  --papel: #f5f5f0;
  --papel-2: #eeeee8;
  --tinta: #1a1a1a;
  --tinta-fraca: #666666;
  --tinta-fantasma: #9a9a94;
  --branco: #ffffff;
  --fita: #f5e6c8;
  --marca-texto: #ffe066;   /* o acento, e o único */
  --vermelho: #c0392b;      /* só o risco de caneta: o que saiu da mão */

  /* 1.3 tipografia — escala de página longa, não de link na bio */
  --t1: clamp(2.5rem, 6.2vw, 4.25rem);
  --t2: clamp(1.9rem, 4vw, 2.75rem);
  --t3: clamp(1.35rem, 2.4vw, 1.75rem);
  --t4: 1.125rem;
  --corpo-grande: 1.1875rem;
  --corpo: 1.0625rem;
  --corpo-pequeno: 0.9375rem;
  --mini: 0.8125rem;
  --micro: 0.6875rem;

  /* 1.4 traço, sombra e ritmo — canto vivo, nada de raio */
  --traco: 1.5px;
  --traco-grosso: 2.5px;
  --sombra-dura: 4px 4px 0 var(--tinta);
  --sombra-dura-2: 2px 2px 0 var(--tinta);
  --sombra-papel: 2px 2px 0 var(--papel);

  --largura: 1080px;
  --prosa: 62ch;
  --respiro-lado: 22px;
  --respiro-secao: clamp(64px, 9vw, 108px);
}

/* ---------- 2. base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--corpo);
  line-height: 1.62;
  color: var(--tinta);
  background-color: var(--papel);
  /* a textura de papel da bio: ruído em soft-light, sem imagem externa */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: soft-light;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--marca-texto); color: var(--tinta); }

:focus-visible { outline: var(--traco-grosso) solid var(--tinta); outline-offset: 3px; }

/* ---------- 3. tipografia ------------------------------------------------ */

.zn-t1 { font-size: var(--t1); }
.zn-t2 { font-size: var(--t2); }
.zn-t3 { font-size: var(--t3); line-height: 1.2; }
.zn-t4 { font-size: var(--t4); line-height: 1.35; }

.zn-grande { font-size: var(--corpo-grande); line-height: 1.55; }
.zn-corpo { font-size: var(--corpo); }
.zn-pequeno { font-size: var(--corpo-pequeno); line-height: 1.55; }
.zn-mini { font-size: var(--mini); line-height: 1.5; color: var(--tinta-fraca); }

/* rótulo de seção com traço de régua dos dois lados — igual ao da bio */
.zn-regua {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--fonte-mono);
  font-size: var(--micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--tinta-fraca);
}
.zn-regua::before, .zn-regua::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--tinta);
  opacity: 0.25;
}
.zn-regua--esq::before { display: none; }

/* marca-texto amarelo, como caneta sobre o papel */
.zn-marca {
  background-image: linear-gradient(transparent 56%, var(--marca-texto) 56%, var(--marca-texto) 94%, transparent 94%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.18em;
}

/* sublinhado à mão: um traço de caneta que se desenha da esquerda para a direita.
   É gradiente, não ::after: assim ele acompanha a quebra de linha do título e não
   vira uma barra da largura do bloco. */
.zn-sublinha {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 100% 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.06em;
}
.js .zn-sublinha { background-size: 0% 5px; }
.js .zn-sublinha[data-riscado="true"] {
  background-size: 100% 5px;
  transition: background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js .zn-sublinha { background-size: 100% 5px; transition: none; }
}

.zn-mono { font-family: var(--fonte-mono); }
.zn-fraco { color: var(--tinta-fraca); }

/* ---------- 4. estrutura ------------------------------------------------- */

.zn-pagina { max-width: var(--largura); margin: 0 auto; padding: 0 var(--respiro-lado); }
.zn-secao { padding: var(--respiro-secao) 0; position: relative; }
.zn-secao--faixa { background: var(--papel-2); border-top: var(--traco) solid var(--tinta); border-bottom: var(--traco) solid var(--tinta); }

/* a página virada: papel sobre tinta. É o contraste mais forte que existe aqui, e
   por isso vale uma vez só — na dobra que nomeia o problema. */
.zn-secao--tinta { background: var(--tinta); color: var(--papel); }
.zn-secao--tinta .zn-regua, .zn-secao--tinta .zn-mini, .zn-secao--tinta .zn-fraco { color: var(--tinta-fantasma); }
.zn-secao--tinta .zn-regua::before, .zn-secao--tinta .zn-regua::after { background: var(--papel); opacity: 0.3; }
/* sobre tinta, o marca-texto pinta a linha inteira: a faixa de 56% a 94% deixaria a
   metade de cima das letras preta sobre preto. */
.zn-secao--tinta .zn-marca {
  color: var(--tinta);
  background-image: linear-gradient(var(--marca-texto), var(--marca-texto));
  background-size: 100% 100%;
  padding: 0.08em 0.22em;
}

.zn-prosa { max-width: var(--prosa); }

.zn-duas { display: grid; gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zn-tres { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zn-assimetrica { display: grid; gap: 48px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }

@media (max-width: 900px) {
  .zn-duas, .zn-tres, .zn-assimetrica { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

.zn-empilha { display: flex; flex-direction: column; }
.zn-g8 { gap: 8px; } .zn-g14 { gap: 14px; } .zn-g22 { gap: 22px; }
.zn-mt8 { margin-top: 8px; } .zn-mt14 { margin-top: 14px; }
.zn-mt22 { margin-top: 22px; } .zn-mt34 { margin-top: 34px; } .zn-mt52 { margin-top: 52px; }

/* ---------- 5. fita adesiva e recorte ------------------------------------ */

.zn-fita {
  position: absolute;
  z-index: 2;
  background: var(--fita);
  opacity: 0.9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.zn-fita--topo { top: -11px; left: 50%; width: 84px; height: 21px; transform: translateX(-50%) rotate(-2deg); }
.zn-fita--ce { top: -9px; left: -17px; width: 46px; height: 18px; transform: rotate(-12deg); }
.zn-fita--dd { bottom: -9px; right: -17px; width: 46px; height: 18px; transform: rotate(-12deg); }

/* o cartão de papel: canto vivo, traço de tinta */
.zn-cartao {
  position: relative;
  background: var(--papel);
  border: var(--traco) solid var(--tinta);
  padding: 24px;
}
.zn-cartao--branco { background: var(--branco); }
.zn-cartao--tinta { background: var(--tinta); color: var(--papel); }
.zn-cartao--tinta .zn-mini, .zn-cartao--tinta .zn-fraco { color: #b9b9b2; }
.zn-cartao--colado { transform: rotate(-0.6deg); }
.zn-cartao--colado:nth-child(even) { transform: rotate(0.5deg); }

/* selo: quadrado de papel branco colado torto, endireita no hover */
.zn-selo {
  display: inline-grid;
  place-items: center;
  background: var(--branco);
  border: var(--traco) solid var(--tinta);
  box-shadow: var(--sombra-dura-2);
  transform: rotate(var(--torto, -3deg));
  transition: transform 0.15s ease;
  flex: none;
}
.zn-cartao--tinta .zn-selo { box-shadow: var(--sombra-papel); }
.zn-selo--tracejado { border-style: dashed; box-shadow: none; }

/* ---------- 6. botões ---------------------------------------------------- */

.zn-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: var(--traco) solid var(--tinta);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--corpo-pequeno);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.zn-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-dura); }
.zn-btn:active { transform: none; box-shadow: none; }

.zn-btn--tinta { background: var(--tinta); color: var(--papel); }
.zn-btn--tinta:hover { box-shadow: 4px 4px 0 var(--tinta-fraca); }
.zn-btn--pequeno { padding: 9px 15px; font-size: var(--mini); }
.zn-btn__seta { font-family: var(--fonte-mono); opacity: 0.55; transition: transform 0.15s ease, opacity 0.15s ease; }
.zn-btn:hover .zn-btn__seta { transform: translate(2px, -2px); opacity: 1; }
.zn-btn__icone { width: 17px; height: 17px; flex: none; }
/* botão sem palavra: só o ícone e a seta, com o nome no `aria-label`. O vão de 10 px
   ficava maior que o próprio ícone, e o ícone cresce 2 px para segurar o botão sozinho. */
.zn-btn--so-icone { gap: 6px; }
.zn-btn--so-icone .zn-btn__icone { width: 19px; height: 19px; }

.zn-acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .zn-btn, .zn-selo, .zn-btn__seta { transition: none; }
  .zn-btn:hover { transform: none; box-shadow: var(--sombra-dura); }
  .zn-btn:hover .zn-btn__seta { transform: none; }
}

/* ---------- 7. cabeçalho ------------------------------------------------- */

.zn-cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--traco) solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.zn-cabecalho[data-rolou="true"] {
  background: rgba(245, 245, 240, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--tinta);
}
.zn-cabecalho__interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 9px var(--respiro-lado);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* a assinatura vale nos dois lugares onde ela aparece — o cabeçalho e o rodapé —, e o
   tamanho menor é só do cabeçalho: no rodapé ela é a despedida, e ali há espaço. */
.zn-assinatura { font-weight: 700; font-size: var(--corpo-pequeno); letter-spacing: -0.01em; }
.zn-cabecalho .zn-assinatura { font-size: var(--mini); }
.zn-assinatura small {
  display: block;
  font-family: var(--fonte-mono);
  font-size: var(--micro);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
/* o botão do cabeçalho é o menor da página: ele acompanha a leitura a rolagem inteira,
   e a porta grande é a do fim. O texto nunca quebra em duas linhas. */
.zn-cabecalho .zn-btn--pequeno { padding: 7px 13px; font-size: var(--micro); white-space: nowrap; }
/* desde 12/09/2026 esse botão não tem palavra: é o ícone do WhatsApp e a seta. Sem
   texto para dar altura, o padding sobe de 7 para 9 px — senão o alvo do dedo fica
   menor que o do botão que ele substituiu. */
.zn-cabecalho .zn-btn--so-icone { padding: 9px 13px; }

/* No celular o cabeçalho ficava com 88 px: nome, subtítulo em duas linhas e um botão
   preto de duas linhas, grudados no alto da tela a página inteira. Fica com o nome e a
   porta, em uma linha só — o subtítulo já está escrito no rodapé e na abertura. */
@media (max-width: 900px) {
  .zn-cabecalho__interno { padding: 6px var(--respiro-lado); gap: 12px; }
  .zn-cabecalho .zn-assinatura { font-size: var(--micro); letter-spacing: 0; }
  .zn-cabecalho .zn-assinatura small { display: none; }
  .zn-cabecalho .zn-btn--pequeno { padding: 6px 11px; gap: 7px; }
  /* no celular ele não engorda: o cabeçalho tem que caber em uma linha (D37), e sem
     palavra o botão já perdeu 80 px de largura. */
  .zn-cabecalho .zn-btn--so-icone { padding: 6px 11px; }
}

/* ---------- 8. a lista do que se repete (o efeito desta marca) ----------- */

.zn-lista-repete {
  display: grid;
  gap: 2px;
  font-family: var(--fonte-mono);
  font-size: var(--corpo-pequeno);
}
.zn-repete {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.22);
}
.zn-repete__quando {
  font-size: var(--micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fantasma);
  flex: none;
  width: 8.5ch;
}
.zn-repete__texto { position: relative; flex: 1; }

/* o risco de caneta: um traço vermelho POR CIMA do texto, em todas as linhas dele.
   Mora no <span> de dentro, que é inline: em elemento inline com box-decoration-break
   clone, cada linha quebrada ganha o traço inteiro. No flex item de fora não funcionava
   — flex item vira bloco, e o traço saía uma vez só, na altura da quebra, virando um
   divisor entre as duas linhas (achado do Marco em 10/09/2026).
   O desenho é SVG, e não gradiente: três traçados diferentes, alternados item a item,
   cada um com ondulação própria e uma segunda passada mais fraca. Caneta não sai reta,
   e cinco traços idênticos empilhados leem como régua. */
.zn-repete__frase {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' preserveAspectRatio='none'%3E%3Cpath d='M0 5.6C40 5.6 40 7 80 7C120 7 120 5.8 160 5.8C200 5.8 200 7.4 240 7.4C280 7.4 280 6.6 320 6.6' fill='none' stroke='%23c0392b' stroke-width='2.4' stroke-linecap='round' opacity='.93'/%3E%3Cpath d='M14 7.4C54 7.4 54 8.7 94 8.7C134 8.7 134 7.5 174 7.5C214 7.5 214 9 254 9C288 9 288 8.2 310 8.3' fill='none' stroke='%23c0392b' stroke-width='1' stroke-linecap='round' opacity='.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-size: 0% 12px;
}
.zn-repete:nth-child(3n+2) .zn-repete__frase {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7.4C40 7.4 40 6 80 6C120 6 120 7.6 160 7.6C200 7.6 200 6.2 240 6.2C280 6.2 280 5.6 320 5.6' fill='none' stroke='%23c0392b' stroke-width='2.5' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M18 9C58 9 58 7.7 98 7.7C138 7.7 138 9.2 178 9.2C218 9.2 218 7.9 258 7.9C290 7.9 290 7.4 306 7.3' fill='none' stroke='%23c0392b' stroke-width='1.1' stroke-linecap='round' opacity='.28'/%3E%3C/svg%3E");
  background-position-y: 60%;
}
.zn-repete:nth-child(3n) .zn-repete__frase {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' preserveAspectRatio='none'%3E%3Cpath d='M0 6.4C45 6.4 45 7.6 90 7.6C135 7.6 135 6 180 6C225 6 225 7.1 265 7.1C300 7.1 300 6.2 320 6.2' fill='none' stroke='%23c0392b' stroke-width='2.3' stroke-linecap='round' opacity='.95'/%3E%3Cpath d='M10 8C55 8 55 9.1 100 9.1C145 9.1 145 7.6 190 7.6C232 7.6 232 8.6 270 8.6C300 8.6 300 7.9 312 8' fill='none' stroke='%23c0392b' stroke-width='1' stroke-linecap='round' opacity='.32'/%3E%3C/svg%3E");
  background-position-y: 52%;
}
.zn-repete[data-riscado="true"] .zn-repete__frase {
  background-size: 100% 12px;
  transition: background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* o texto riscado NÃO esmaece. Em cinza-fantasma sobre o papel branco da capa ele
   dava 2,8:1 de contraste, e o traço de caneta ainda passa por cima: as duas coisas
   juntas apagavam a frase (pedido do Marco em 12/09/2026). O sinal de "feito" fica
   por conta do traço vermelho e do nome de quem passou a fazer, ao lado. */
.zn-repete__quem {
  font-size: var(--micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vermelho);
  opacity: 0;
  flex: none;
}
.zn-repete[data-riscado="true"] .zn-repete__quem { opacity: 1; transition: opacity 0.3s ease 0.3s; }

/* sem JavaScript, e com movimento reduzido, a lista nasce riscada e legível */
@media (prefers-reduced-motion: reduce) {
  .zn-repete__frase { background-size: 100% 12px; transition: none; }
  .zn-repete__quem { opacity: 1; transition: none; }
}

/* ---------- 9. numeração de passo ---------------------------------------- */

.zn-passo { position: relative; padding-left: 58px; }
.zn-passo__n {
  position: absolute;
  left: 0; top: 2px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: var(--traco) solid var(--tinta);
  background: var(--marca-texto);
  box-shadow: var(--sombra-dura-2);
  font-family: var(--fonte-mono);
  font-weight: 700;
  transform: rotate(-2deg);
}

/* ---------- 10. tabela --------------------------------------------------- */

/* A tabela é mais larga que a prosa, de propósito: ela passa dos 1080 px do grid e vai
   a 1240 px. Quatro colunas de texto dentro da largura de leitura davam 215 px cada, e
   toda frase quebrava em três ou quatro linhas.

   Quem estoura o pai é a margem negativa, e não `transform`: a caixa também é `.zn-surge`,
   e o efeito de surgir ao rolar escreve no `transform` — um apagaria o outro.
   O `100vw` no `min()` é o que garante que a caixa nunca passe da janela. */
.zn-tabela-caixa {
  --tabela-larga: min(1240px, 100vw - 2 * var(--respiro-lado));
  --coluna-pergunta: 150px;   /* a coluna que gruda no celular — e o recuo do carrossel */
  overflow-x: auto;
  border: var(--traco) solid var(--tinta);
  background: var(--branco);
  width: var(--tabela-larga);
  max-width: none;
  margin-left: calc((100% - var(--tabela-larga)) / 2);
}
.zn-tabela { width: 100%; border-collapse: collapse; font-size: var(--corpo-pequeno); min-width: 520px; }
.zn-tabela th, .zn-tabela td { padding: 13px 16px; text-align: left; border-bottom: 1px solid rgba(26, 26, 26, 0.15); vertical-align: top; }
.zn-tabela thead th {
  font-family: var(--fonte-mono);
  font-size: var(--micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: var(--traco) solid var(--tinta);
  background: var(--papel-2);
}
.zn-tabela tbody tr:last-child th, .zn-tabela tbody tr:last-child td { border-bottom: 0; }
/* a coluna da pergunta tinha 34% e sobrava espaço branco: as perguntas são curtas, e as
   respostas é que precisam da largura. Com 23% as três colunas de comparação ganham
   cerca de 40% de largura cada uma. */
.zn-tabela tbody th { font-weight: 700; width: 23%; }
.zn-tabela td:last-child { background: rgba(255, 224, 102, 0.22); }

/* No celular a fatia 14 não tinha chegado: a tabela ficava nos 520 px de origem e as
   quatro colunas saíam com 129 a 137 px. A célula mais alta gastava 10 linhas — contra
   4 no desktop, medido em 412 px. É o mesmo defeito que as colunas largas consertaram
   do outro lado, e o remédio é o mesmo: largura.

   820 px é o joelho da curva, medido em 360 e 412 px. Cada coluna de comparação vai a
   211–232 px e a célula mais alta cai para 5 linhas; em 880 px as colunas engordam, a
   altura não cai mais, e só sobra dedo a arrastar.

   A coluna da pergunta vai a 150 px, e não aos 124 do primeiro desenho: com 124 ela
   virava a célula mais alta da linha — 'quem resolve quando dá problema' em quatro
   linhas, ao lado de um 'eu, direto' de uma linha só.

   | medida                  | antes  | agora  |
   |-------------------------|--------|--------|
   | 'contratar mais gente'  | 129 px | 211 px |
   | 'ferramenta de prat...' | 137 px | 232 px |
   | 'automação'             | 135 px | 226 px |
   | célula mais alta        | 246 px | 124 px |
   | altura da tabela        | 843 px | 468 px |

   Quem rola é a caixa (`overflow-x: auto`), nunca o documento: a página continua sem
   estourar na horizontal em 360 e 412 px. */
@media (max-width: 900px) {
  /* O dedo parava em qualquer lugar: meia coluna de um lado, meia do outro. Comparar
     exige a coluna inteira na tela, então o arraste passa a parar no começo de cada uma.

     As paradas são as próprias colunas — cada `th` do cabeçalho, menos o da pergunta.
     O recuo é a largura da coluna grudada: sem ele a coluna alvo pararia embaixo dela.
     Com o recuo, a primeira parada cai em `scrollLeft: 0`, que é onde a tabela abre. */
  .zn-tabela-caixa {
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--coluna-pergunta);
    /* o que sobra da caixa depois da coluna grudada — e a largura de cada comparação.
       O teto de 232 px é a coluna mais larga que a fatia 14 mediu: daí para cima a
       leitura não melhora e só cresce o arraste. Ele é quem segura o tablet — em 768 px
       sem teto a coluna ia a 571 px, uma por tela inteira, e a tabela a 1863 px. */
    --coluna-comparacao: min(232px, calc(
      100vw - 2 * var(--respiro-lado) - 2 * var(--traco) - var(--coluna-pergunta)));
  }
  .zn-tabela thead th:not(:first-child) { scroll-snap-align: start; }

  /* Uma coluna de comparação por tela, exata. Os 820 px fixos da fatia 14 davam colunas
     de 211, 232 e 226 px numa janela de 216 px: a parada mostrava o começo da coluna e
     deixava 16 px de texto para fora — e com `mandatory` esses 16 px ficam inalcançáveis,
     porque o arraste curto volta para o ponto de parada.

     `table-layout: fixed` é o que faz a largura declarada valer: com `auto` a tabela
     redistribui a sobra e as colunas voltam a ter tamanhos diferentes. E a largura da
     tabela é `max-content` — que numa tabela `fixed` é a soma das colunas declaradas.
     Com `width: auto` o navegador trata as larguras como proporção, e em 412 px as
     quatro colunas saíam com 103 a 126 px. Somar na mão (`150px + 3 × coluna`) daria o
     mesmo número e traria o `3` para dentro do CSS: coluna nova na tabela, largura errada
     e ninguém avisa. O critério 15 do robô confere que cada coluna cabe na janela. */
  .zn-tabela {
    table-layout: fixed;
    width: max-content;
    min-width: 0;
  }
  .zn-tabela th:first-child { width: var(--coluna-pergunta); }
  .zn-tabela th:not(:first-child), .zn-tabela td { width: var(--coluna-comparacao); }

  /* O dedo agora arrasta 454 px em vez de 154, e a terceira comparação chegava na tela
     sem dizer de que pergunta ela é resposta. A coluna da pergunta gruda na esquerda.

     `border-collapse: collapse` não leva a borda junto ao grudar — ela pertence à
     célula colapsada e some. O traço da direita vem de `box-shadow: inset`. */
  .zn-tabela th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--branco);
    box-shadow: inset -1px 0 0 rgba(26, 26, 26, 0.15);
  }
  .zn-tabela thead th:first-child { z-index: 2; background: var(--papel-2); }
}

/* ---------- 10b. os passos do carrossel: onde o dedo está ---------------- */

/* Uma linha só, embaixo da tabela: à esquerda a dica de arrastar, à direita um traço por
   coluna de comparação, e o traço cheio é a coluna que está na tela.

   Ela existe porque a tabela que rola não avisa que rola: a borda da caixa corta a
   terceira coluna no meio e parece fim de conteúdo. O quanto o dedo tem para andar é o
   que nenhuma barra de rolagem de celular mostra — ela some sozinha depois do gesto.

   Traço, e não bolinha: a marca é canto vivo, e não tem raio em lugar nenhum.

   Sem JavaScript a linha continua de pé, com o primeiro traço aceso — que é onde a
   tabela abre. O que o script acrescenta é trocar o traço conforme o dedo anda. */
.zn-passos { display: none; }

@media (max-width: 900px) {
  .zn-passos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 10px 0 0;
  }
}

/* a tabela cabe inteira: não há passo nenhum a indicar (o script mede, e o CSS obedece) */
.zn-passos[data-rola="false"] { display: none; }

.zn-passos__dica {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: var(--micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-fraca);
  transition: opacity 0.3s ease;
}
/* arrastou uma vez: a dica já fez o trabalho dela e sai da frente. Os traços ficam. */
.zn-passos[data-arrastou="true"] .zn-passos__dica { opacity: 0; }

.zn-passos__seta { animation: zn-empurra 1.9s ease-in-out infinite; }
@keyframes zn-empurra {
  0%, 65%, 100% { transform: translateX(0); }
  32%           { transform: translateX(4px); }
}

.zn-passos__pontos { display: flex; gap: 6px; flex: none; }
.zn-passos__ponto {
  width: 16px;
  height: 3px;
  background: var(--tinta);
  opacity: 0.22;
  transition: opacity 0.2s ease;
}
.zn-passos__ponto[data-atual="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .zn-passos__seta { animation: none; }
  .zn-passos__dica, .zn-passos__ponto { transition: none; }
}

/* ---------- 11. lista de itens ------------------------------------------- */

.zn-itens { display: grid; gap: 13px; }
.zn-itens li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--corpo-pequeno); }
.zn-itens__marca { font-family: var(--fonte-mono); font-weight: 700; flex: none; line-height: 1.6; }

/* ---------- 11b. camadas: rótulo mono à esquerda, a frase à direita ------- */

/* ⚠️ desde 10/09/2026 (fatia 12) NENHUMA página usa a camada: ela saiu da dobra da dor,
   que ficou só com a frase. O componente fica porque a vitrine do design system o mostra
   — é lá que ele tem consumidor. Sumiu da vitrine também → aí sim o CSS sai. */
.zn-camada {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px dashed currentColor;
}
.zn-camada:last-child { border-bottom: 1px dashed currentColor; }
.zn-camada__rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.55;
  padding-top: 0.4em;
}
.zn-camada__fala { font-size: var(--corpo-grande); line-height: 1.5; }
@media (max-width: 900px) {
  .zn-camada { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 20px 0; }
}

/* ---------- 11c. a faixa que corre --------------------------------------- */

/* A pista é um scroller de verdade (`overflow-x: auto`), não um `transform` animado.
   É isso que dá o arraste: no celular o dedo empurra a faixa com a inércia do próprio
   sistema, e no desktop o `design-system.js` traduz o mouse em rolagem.

   Sem JavaScript a faixa não anda sozinha, mas continua inteira e arrastável — o
   scroller é do CSS. O passo contínuo e o laço sem fim são o acréscimo do script. */
.zn-corre {
  background: var(--branco);
  border-top: var(--traco) solid var(--tinta);
  border-bottom: var(--traco) solid var(--tinta);
  padding: 30px 0 32px;
  overflow: hidden;
}
.zn-corre__rotulo { justify-content: center; padding: 0 var(--respiro-lado); margin-bottom: 24px; }
.zn-corre__pista {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;      /* chegar na ponta não dispara o "voltar" do navegador */
  scrollbar-width: none;               /* a barra de rolagem cortaria a faixa ao meio */
  -ms-overflow-style: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.zn-corre__pista::-webkit-scrollbar { display: none; }
.zn-corre__pista[data-arrastando="true"] { cursor: grabbing; user-select: none; }
.zn-corre__pista:focus-visible { outline-offset: -5px; }
.zn-corre__trilho {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 76px);
  padding-right: clamp(40px, 6vw, 76px);
  margin: 0;
  list-style: none;
  flex: none;
}
/* cada peça reserva a linha do nome, sempre: assim o hover não empurra a faixa */
.zn-corre__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  min-height: 54px;
}
.zn-corre__item svg {
  display: block;
  width: 31px;
  height: 31px;
  fill: currentColor;
  opacity: 0.7;
  transition: opacity 0.18s ease;
  pointer-events: none;   /* o alvo do toque é a peça inteira, não o desenho dentro dela */
}
/* o Typeform não tem símbolo em coleção livre: o arquivo CC0 do simple-icons é o
   wordmark deitado. Ele entra na largura de uma palavra, com o viewBox recortado no
   desenho — num quadrado de 31 px o mesmo path sai com 7 px de altura, ilegível. */
.zn-corre__item--largo svg { width: 80px; height: 18px; }
/* o nome, escondido até o mouse chegar. É <span>, não o <title> do SVG: o balãozinho
   do navegador é feio, lento a aparecer e não se estiliza. */
/* sem uppercase: marca tem grafia própria, e "N8N" não é o nome de ninguém */
.zn-corre__nome, .zn-corre__marca {
  font-family: var(--fonte-mono);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1;
}
.zn-corre__nome {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Bitrix24, Clint e Canva não têm desenho em coleção livre: o nome em mono ocupa o
   lugar da logo, e o marca-texto é o que acontece no hover. */
/* o padding compensa a linha de nome que as outras peças reservam embaixo: sem ele,
   o texto centraliza 10 px abaixo do centro das logos. */
.zn-corre__item--nome { gap: 0; padding-bottom: 20px; }
.zn-corre__marca {
  font-size: var(--corpo-pequeno);
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.7;
  padding: 0 0.2em;
  transition: opacity 0.18s ease, background-size 0.18s ease;
  background-image: linear-gradient(var(--marca-texto), var(--marca-texto));
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 0% 100%;
}

/* o nome aceso: um estado, escrito de dois jeitos.
   `[data-nome]` é o toque — o script acende a peça no toque e apaga no arraste.
   O `:hover` fica trancado atrás de `hover: hover`, porque em tela sensível o hover
   GRUDA depois do toque: sem a tranca, o nome ficava aceso na peça errada até o
   toque seguinte, inclusive no meio do arraste. */
.zn-corre__item[data-nome="true"] svg { opacity: 1; }
.zn-corre__item[data-nome="true"] .zn-corre__nome { opacity: 0.82; transform: none; }
.zn-corre__item--nome[data-nome="true"] .zn-corre__marca { opacity: 1; background-size: 100% 100%; }

@media (hover: hover) and (pointer: fine) {
  .zn-corre__item:hover svg { opacity: 1; }
  .zn-corre__item:hover .zn-corre__nome { opacity: 0.82; transform: none; }
  .zn-corre__item--nome:hover .zn-corre__marca { opacity: 1; background-size: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .zn-corre__trilho[aria-hidden="true"] { display: none; }
}

/* ---------- 12. pergunta e resposta -------------------------------------- */

/* É <details>/<summary> nativo, de propósito: abre e fecha sem uma linha de
   JavaScript, e o teclado já sabe operar.

   A linha é de propósito miúda e apertada: a FAQ fica depois do convite final,
   e quem rola até ela já decidiu. Ela tira dúvida, não vende (pedido do Marco em
   12/09/2026). Fechada, cada pergunta ocupa 39 px de altura, não os 60 de antes. */
.zn-pergunta { padding: 12px 0; border-bottom: 1px dashed rgba(26, 26, 26, 0.28); }
.zn-pergunta:first-child { border-top: 1px dashed rgba(26, 26, 26, 0.28); }
.zn-pergunta h3 { font-size: var(--corpo-pequeno); line-height: 1.3; margin-bottom: 6px; }

.zn-pergunta > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}
.zn-pergunta > summary::-webkit-details-marker { display: none; }
.zn-pergunta > summary h3 { margin-bottom: 0; }
/* o sinal é de máquina de escrever, como o resto do mono desta marca */
.zn-pergunta > summary::after {
  content: "+";
  flex: none;
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: var(--corpo);
  line-height: 1.2;
  color: var(--tinta-fraca);
}
.zn-pergunta[open] > summary::after { content: "–"; }
.zn-pergunta > summary:focus-visible { outline: var(--traco) solid var(--tinta); outline-offset: 5px; }
.zn-pergunta[open] > p { margin-top: 8px; padding-bottom: 4px; }

/* ---------- 13. retrato -------------------------------------------------- */

.zn-retrato { position: relative; width: 100%; max-width: 260px; transform: rotate(-1.5deg); }
.zn-retrato img { border: var(--traco) solid var(--tinta); background: var(--branco); padding: 9px 9px 34px; }

/* ---------- 14. surgir ao rolar ------------------------------------------ */

.js .zn-surge {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--atraso, 0ms);
}
.js .zn-surge[data-visivel="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .zn-surge { opacity: 1; transform: none; transition: none; }
}

/* ---------- 15. rodapé --------------------------------------------------- */

.zn-rodape { border-top: var(--traco) solid var(--tinta); padding: 40px 0 52px; background: var(--papel-2); }
.zn-rodape__linha { display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; align-items: flex-end; }

/* ---------- 16. utilidades ----------------------------------------------- */

.zn-so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}