/* ===================================================================
   Expedire — página da oferta. Direção D (CSS puro) + a ideia da B
   (a decisão do dono na primeira dobra).

   REGRA DA CASA, inegociável: nada sai desta pasta. Zero requisição
   externa, zero CDN, zero elemento de script, zero rastreador, zero cookie.
   Todo o movimento é vocabulário nativo do CSS — `animation-timeline:
   view()`, `clip-path`, `overflow: hidden` + `--i`, `position: sticky`.
   Zero bytes de JavaScript na página inteira.

   Movimento, por peça (nada repete, nada prende a rolagem):
     · topo ................ régua de 2px desenhando (scaleX 0→1, 1 vez)
     · h1 .................. monta LINHA A LINHA, cada linha por --i
     · oferta (o preço) ..... NENHUMA animação. Nasce visível, quadro 1.
     · régua do preço ....... o único movimento do bloco de preço, e é
                             PSEUDO-ELEMENTO: a moldura anda, o número não
     · caixa de decisão ..... abre por clip-path, é a ideia da B
     · seções .............. revelam por entrada na viewport (view())
     · linhas da tabela .... revelam por máscara
     · coluna da fonte ..... acende uma vez (background) e some
     · linhas fora do total . uma varredura de 45°, uma vez
     · anexo ............... sobe por clip-path
     · passos .............. entram por clip-path
     · cabeçalho da tabela .. `position: sticky` — o pin, sem JS e sem
                             alterar a altura do documento

   QUEM NÃO SE MOVE, E PORQUÊ: o preço. A oferta é o único elemento que
   não pode faltar em nenhum quadro, então o bloco `.preco` não tem
   `animationName`. A régua de 2px é pseudoeelemento, não o bloco: animar
   o `.preco` espremia o número junto (medido na direção A: 0px de largura
   no início da animação).
   =================================================================== */

/* ---------- fontes locais (subset, woff2, com a licença ao lado) ---------- */
@font-face {
  font-family: Lato;
  src: url("assets/fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Lato;
  src: url("assets/fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Lato;
  src: url("assets/fonts/lato-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Liberation Mono";
  src: url("assets/fonts/mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Liberation Mono";
  src: url("assets/fonts/mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* papel claro, tinta quase preta, um único acento */
  --papel: #f4f4f1;
  --papel-alto: #fbfbf9;
  --tinta: #14161a;
  --tinta-75: #454a52;
  /* 4,95:1 sobre --papel. O valor anterior (#6f757e) dava 4,48:1 e a porta [5]
     do verifica.mjs reprova abaixo de 4,5:1 em corpo pequeno. */
  /* 6,11:1 sobre --papel (era 4,95:1 com #646a73). Passava na régua de
     4,5:1 e mesmo assim lia como texto DESABILITADO — era o defeito "cinza
     parece desabilitado" em três lugares da página. Escureci o cinza
     auxiliar para 6,11:1 sem mexer na hierarquia: --tinta (16,4:1) continua
     sendo o máximo e --tinta-75 (8,09:1) continua o intermediário, então
     os três degraus de cinza seguem distintos e ordenados.
     Medido: papel 6,11 · papel-alto 6,50 · fora-fundo 5,68. */
  --tinta-45: #565c66;
  --regua: #c9ccd1;
  --regua-forte: #9ea4ac;
  --carimbo: #1b4dd1;
  --ok-tinta: #1c6b46;
  --ok-fundo: #e6f0ea;
  --fora-tinta: #8a3324;
  --fora-fundo: #f6e9e6;

  /* grade de 4px */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;

  --fonte: Lato, system-ui, -apple-system, sans-serif;
  --mono: "Liberation Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --env: 1140px;

  color-scheme: light;
}

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

html {
  background: var(--papel);
  /* clip, não hidden: hidden vira eixo rolável. */
  overflow-x: clip;
  /* SEM `scroll-behavior: smooth`: é a regra de casa desta pagina
     (NOTAS.md:106) e o criterio C8 ("nada prende a rolagem"). Rolagem
     nativa e instantanea. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* CORRIGIDO — o defeito era "a última linha da tabela encosta/é
     parcialmente encoberta pela barra de navegação inferior". Em celular
     a barra do navegador (ou o gesto do sistema) come a parte de baixo do
     rodapé. `env(safe-area-inset-bottom)` é a folga que o navegador
     declara como segura; sem ela, o rodapé fecha rente à borda. CSS puro,
     sem JS. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* O fundo vai no body E no html. Se ficar só no html, a função `fundoDe` do
     verifica.mjs sobe a árvore e cai no `getComputedStyle(body).backgroundColor`
     transparente, medindo o texto contra preto (1,16:1) em vez de contra o
     papel. Foi o que reprovou 12 seletores na primeira rodada. */
  background: var(--papel);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* CORRIGIDO (medido): o dono nomeou órfãs de linha — uma palavra sozinha
     na última linha ("fornecedor.", "informado", "propósito", "leitura)"),
     e o h3 quebrava deixando "renegociar" sozinho. A causa é o navegador
     quebrar a última linha por-personagem pura, sem olhar o texto.

     `text-wrap: pretty` resolve isso no próprio navegador: ele mede as
     últimas linhas e puxa uma palavra da penúltima para a última quando
     isso deixa a última linha menos curta. Uma propriedade, zero JS, e
     some sozinha onde o navegador não a conhece (Firefox antigo cai no
     comportamento de antes — degrada para o texto normal, não quebra).

     Abaixo vai `pretty` no corpo e `balance` nos títulos. A diferença é
     deliberada: `balance` deixa TODAS as linhas do título com o mesmo
     comprimento, que é o que se quer num título curto de 2-3 linhas; em
     texto corrido isso esticaria demais (um parágrafo de 12 linhas ficaria
     com 12 linhas de 12 palavras cada).

     Os TÍTULOS usam `balance`, não `pretty`. A diferença é deliberada:
     `balance` deixa todas as linhas do título com o mesmo comprimento —
     é o que se quer num título de 2-3 linhas, e é o que resolve o caso
     que o dono nomeou: o h3 "Time que quer o inventário antes de
     renegociar" quebrava deixando "renegociar" sozinho. `pretty` também
     resolve, mas `balance` deixa o título com um ar de título, não de
     parágrafo torto.

     O h1 fica de fora de propósito: as linhas dele são marcadas uma a
     uma no HTML (`.linha`) e não podem ser rebalanceadas. */
  text-wrap: pretty;
}

/* `balance` nos títulos — menos o h1, que tem as linhas marcadas uma a
   uma e não aceita rebalanceamento. */
h2,
h3,
h4,
.kicker {
  text-wrap: balance;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--carimbo);
  outline-offset: 3px;
  border-radius: 2px;
}

.env {
  max-width: var(--env);
  margin: 0 auto;
  padding-left: var(--e5);
  padding-right: var(--e5);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: var(--papel);
  padding: var(--e3) var(--e4);
  z-index: 10;
  font-weight: 700;
}
.skip:focus {
  left: var(--e3);
  top: var(--e3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   MENOS MOVIMENTO
   A página inteira e parada, e PARA. Sem este bloco, quem pede menos
   movimento receberia o h1 escondido dentro da janela overflow:hidden
   (medido: 64,2px de deslocamento) e as seções pela metade da máscara.
   O estado final é o estado DE REPOUSO: aqui não se escreve o estado
   "from" de nada, só se desliga o que anima e se devolve o repouso.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    animation-timeline: none !important;
    transition-duration: 0.01ms !important;
  }
  /* o que a animação punha em transform/clip-path/background volta ao repouso */
  h1 .linha > i,
  .preco::before,
  .revela,
  .sobe-mask,
  .acende,
  .decisao,
  .passos li,
  .anexo li {
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    background-color: transparent !important;
  }
  /* a tarja 45° é a marca do "não entra no total" — ela fica, é dado */
  .varre {
    background-color: transparent !important;
    background-position: 300% 0 !important;
  }
  tbody tr,
  .passos li,
  .cta {
    transition: none !important;
  }
}

/* ===================================================================
   MOVIMENTO — só quando o navegador TEM a timeline E o dono NÃO pediu
   menos movimento. O estado final é o padrão; aqui só se liga a animação.
   O @supports é o que fecha o Firefox antigo: sem a timeline, a regra
   inteira nunca casa e a página abre inteira e parada, sem quebrar nada.
   =================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* ---- 1. revelação por entrada na viewport, por peça.
       Uma animação, aplicada por seletor. Sem stagger escrito em CSS
       e sem JS: o escalão é lido do próprio atributo --i. ---- */
    .revela {
      animation: entra 720ms var(--ease) both;
      animation-timeline: view();
      animation-range: entry 4% entry 58%;
    }
    @keyframes entra {
      from {
        clip-path: inset(0 0 100% 0);
        transform: translateX(-12px);
      }
      to {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
      }
    }

    /* ---- 2. a fonte de cada linha acende quando a linha entra.
       O movimento É a coluna "o que fazer": acende uma vez e some. ----
       CORRIGIDO (medido): o realce punha o azul de carimbo ATRÁS do
       texto cinza, e o instrumento mediu 1,03:1 no meio da animação —
       cinza em azul é ilegível. Quem acende agora é a LINHA INTEIRA com
       tinta branca (a cor de apoio sobre azul), então o texto vai claro
       junto com o fundo e a animação continua sendo um acender. */
    .acende {
      animation: acende 900ms ease-out both;
      animation-timeline: view();
      animation-range: entry 18% entry 72%;
    }
    @keyframes acende {
      from {
        background-color: var(--carimbo);
        color: #ffffff;
      }
      to {
        background-color: transparent;
        color: var(--tinta-45);
      }
    }

    /* ---- 3. a tarja 45° das linhas fora do total: UMA varredura ---- */
    .varre {
      animation: varre 680ms ease-out both;
      animation-timeline: view();
      animation-range: entry 8% entry 52%;
    }
    @keyframes varre {
      from {
        background-position: -160% 0;
      }
      to {
        background-position: 300% 0;
      }
    }

    /* ---- 4. a caixa de decisão (ideia da B) abre por máscara ---- */
    .decisao {
      animation: sobe-mask 760ms var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    /* ---- 5. o anexo sobe; os passos também ---- */
    .anexo li {
      animation: sobe-mask 700ms var(--ease) both;
      animation-timeline: view();
      animation-range: entry 6% entry 60%;
    }
    .passos li {
      animation: sobe-mask 620ms var(--ease) both;
      animation-timeline: view();
      animation-range: entry 2% entry 50%;
    }
    @keyframes sobe-mask {
      from {
        clip-path: inset(100% 0 0 0);
        transform: translateY(10px);
      }
      to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
      }
    }
  }
}

/* ---------- topo ---------- */
.topo {
  border-bottom: 1px solid var(--regua);
  position: relative;
}
/* a régua de 2px do topo: UM movimento, desenhando, e fica */
.topo::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--carimbo);
  transform-origin: left center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .topo::before {
      animation: risco-topo 900ms var(--ease) 80ms both;
    }
  }
}
@keyframes risco-topo {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.topo .env {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3) var(--e4);
  padding-top: var(--e3);
  padding-bottom: var(--e3);
  flex-wrap: wrap;
}
/* CORRIGIDO: o HTML traz `class="brand"` e esta regra era `.marca` — a
   marca do topo NÃO recebia estilo nenhum (medido: saía com 16px do corpo e
   peso normal, sem o 900 que o resto da página usa). Aceita os dois nomes
   para que a página e o CSS não voltem a divergir em silêncio. */
.marca,
.brand {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.02em;
  /* a marca nunca pode ser cortada: o ponto final é a assinatura */
  white-space: nowrap;
  flex-shrink: 0;
}
.marca .ponto,
.brand .ponto {
  color: var(--carimbo);
}
.topo-dir {
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
}
/* O chip do topo. Carrega o preço E a regra do 1º ciclo: a mesma informação
   do herói, na forma mais curta que cabe numa linha de cabeçalho.
   CORRIGIDO: era `--tinta-75` em 13px e lia como texto pequeno e acinzentado
   competindo com a marca. Agora o PREÇO vai em tinta cheia e o resto em
   --tinta-75 (8,09:1), que é o cinza mais escuro que a página usa em corpo
   pequeno — sem gradiente de "cinza dentro de cinza". */
.preco-chip {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-75);
  border: 1px solid var(--regua-forte);
  padding: 3px var(--e2);
}
.preco-chip strong {
  color: var(--tinta);
  font-weight: 700;
}
/* O alternador de idioma.
   CORRIGIDO (dois defeitos que o dono viu na captura):
   (1) "não há indicação clara de qual está ativo" — o idioma atual era só
       um cinza sem marca. Agora o ATIVO ganha uma marca de estado própria
       da página (realce de tinta, sem borda, semCAIXA ALTA), que é lida
       como "você está aqui" e não como mais um link.
   (2) "a barra / não separa ações" — era um `text-align: center` herdado,
       que alinhava o grupo pela ALTURA e deixava a barra "/" solta. Agora
       o grupo é linha de base, e o separador tem respiro dos dois lados. */
.idioma {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e1);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.idioma a {
  text-decoration: none;
  color: var(--carimbo);
  font-weight: 700;
  /* CORRIGIDO — dois defeitos medidos no celular (390px):
     (1) ALVO DE TOQUE: o link media 56x20,1px e o mínimo é 44x44px
         (WCAG 2.5.5). Padding vertical dá a área sem mudar o corpo.
     (2) CONTRASTE: era --regua-forte e media 2,51:1 — reprovado no
         AA. A barra "/" é decorativa, mas o instrumento mede mesmo
         assim, então ela sobe para --tinta-45 (6,11:1). */
  display: inline-block;
  padding: 13px 4px;
  min-height: 44px;
  /* o mínimo é 44x44: em PT o idioma curto ("PT") media 24px de largura e
     reprovava. O padding horizontal de 22px dá a largura sem mudar o
     texto; em EN ("English") a caixa já era maior e não sente nada. */
  min-width: 44px;
  text-align: center;
  line-height: 18px;
}
.idioma a:hover {
  text-decoration: underline;
}
.idioma .sep {
  /* era --regua-forte: 2,51:1, reprovado no contraste mínimo */
  color: var(--tinta-45);
  padding: 0 2px;
  user-select: none;
}
.idioma-atual {
  /* era --tinta-45 (4,95:1) e pesava 7:1 de nada: cinza de cinza. O
     ATIVO é --tinta (16,4:1) sobre realce — é o estado mais forte da
     navegação, não o mais fraco. */
  color: var(--tinta);
  font-weight: 700;
  background: #e8ecf6;
  padding: 13px 5px;
  min-height: 44px;
  line-height: 18px;
}

/* ===================================================================
   HERÓI — a oferta na primeira dobra, antes de qualquer rolagem.

   O padding-top é --e6 (32px), e não --e7 (48px) como era: com o recorte da
   planilha na dobra, cada linha do topo conta. Medido: com --e7 a caixa de
   decisão terminava em y=912 e saía da viewport de 900px; com --e6 ela
   fecha em y=896, dentro.
   =================================================================== */
.oferta {
  padding: var(--e6) 0 var(--e6);
}
.kicker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-45);
  margin: 0 0 var(--e4);
}

/* ---- o h1 monta LINHA A LINHA ----
   Cada <span class="linha"> é a janela overflow:hidden; o <i> dentro sobe
   de translateY(105%). O escalão é --i. Sem SplitText, sem GSAP, sem JS. */
h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 0 var(--e5);
  max-width: 19ch;
  text-wrap: balance;
}
h1 .linha {
  display: block;
  overflow: hidden;
  /* CORRIGIDO (medido): a janela de cada linha media 28px de caixa com
     até 37px de tinta — o `overflow: hidden` cortava o rabinho do "p",
     do cedilha e do "é" do título. Medido no 390px: 5 linhas cortadas,
     43px de tinta perdida somados. A folga de 0.34em (medida: o menor
     valor que zera o corte) segura a tinta; a margem negativa devolve
     EXATAMENTE esse espaço ao layout, então a altura do h1 não muda de
     verdade — a dobra não perde nada. Medido: com 0.34em, 5->0 linhas
     cortadas, 43px->0 de tinta cortada. */
  padding-bottom: 0.34em;
  margin-bottom: -0.34em;
}
h1 .linha > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  animation: sobe-linha 700ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes sobe-linha {
  to {
    transform: translateY(0);
  }
}
h1 .fonte {
  color: var(--carimbo);
  /* CORRIGIDO: a palavra destacada herdava a regra `.fonte` da TABELA
     (13px Liberation Mono, cinza). No h1 isso produzia a palavra "fonte"
     isolada e pequena dentro do título — foi uma das coisas que o dono
     viu quebradas. Aqui ela volta ao corpo do título: mesmo tamanho,
     mesma família, mesmo peso; o que muda é a cor.
     E a cor não pode ser a do link (--carimbo é o azul dos links da
     página): o defeito "parece link e não é" nascia de ser a MESMA
     cor de `<a>`. O destaque é o itálico, que link nenhum da página usa
     — o título fica em Lato itálico na tinta, com a cor de carimbo só
     no ponto final. */
  font: inherit;
  font-style: italic;
  font-weight: 900;
  color: var(--tinta);
  background: linear-gradient(transparent 62%, #cfe0ff 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.06em;
}

/* A grade do herói — CORRIGIDO (medido, não no olho).
   Era `1fr 360px`: um track `1fr` tem mínimo AUTOMÁTICO igual ao
   min-content do item, então o bloco do recorte (a tabela tem min-width e
   conteúdo que não cabe) esticava a coluna e a página inteira. Medido em
   390px: a coluna saía com 432px numa largura útil de 358px (excesso 58px),
   e a "Veredito" ficava 57px para fora, cortada — era o "PREÇO CONFIRM..."
   da captura do dono.
   `minmax(0, 1fr)` diz à grade que o track PODE chegar a zero: a tabela
   passa a rolar dentro da sua caixa e a coluna volta à largura útil.
   Medido depois da correção, 390px: coluna 358px, excesso 0. */
.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--e5) var(--e7);
  align-items: start;
}
/* o item da grade também precisa poder encolher abaixo do seu conteúdo */
.grade > * {
  min-width: 0;
}
/* O parágrafo de apoio da dobra: 2 a 3 linhas, nunca mais. O detalhe foi
   para a seção "O que chega". */
.sub {
  font-size: 19px;
  line-height: 1.45;
  color: var(--tinta-75);
  max-width: 46ch;
  margin: 0 0 var(--e4);
}
.sub strong {
  color: var(--tinta);
  font-weight: 700;
}
.sub-2 {
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta-75);
  max-width: 54ch;
  margin: 0;
}
.sub-2 strong {
  color: var(--tinta);
}

/* ---------- o preço: A OFERTA. O bloco não tem animação nenhuma. ----------
   A única coisa que se mexe aqui é a régua de 2px do topo, e ela é
   PSEUDO-ELEMENTO: `getComputedStyle(.preco).animationName` tem de dar
   `none`. A régua é moldura, não oferta. */
.preco {
  position: relative;
  padding-top: var(--e3);
}
.preco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--tinta);
  transform-origin: left center;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .preco::before {
      animation: risco 760ms var(--ease) 140ms both;
    }
  }
}
@keyframes risco {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.preco-valor {
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0;
}
.preco-valor .moeda {
  font-size: 0.36em;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 0.55em;
  margin-right: 0.1em;
}
.preco-valor .periodo {
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta-75);
  white-space: nowrap;
}
.preco-nota {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-45);
  margin: var(--e2) 0 0;
  max-width: 46ch;
}
/* A REGRA DO 1º CICLO, escrita onde o preço aparece (chip, herói, seção de
   preço). Ela deixou de ser uma linha em mono para virar uma frase: é a
   informação que o comprador mais precisa e não pode ficar em asterisco. */
.ciclo {
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta-75);
  margin: var(--e3) 0 var(--e4);
  max-width: 34ch;
}
.ciclo strong {
  color: var(--tinta);
  font-weight: 700;
}
.cta {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background: var(--carimbo);
  color: #ffffff;
  padding: var(--e3) var(--e5);
  border: 2px solid var(--carimbo);
  transition: background 140ms ease, border-color 140ms ease;
}
.cta:hover {
  background: var(--tinta);
  border-color: var(--tinta);
}
.resposta {
  font-size: 14px;
  color: var(--tinta-45);
  margin: var(--e2) 0 0;
}

/* ===================================================================
   O RECORTE DA PLANILHA, NA PRIMEIRA DOBRA (correção 3).
   O entregável é uma tabela, e ela só aparecia depois de rolar. Este é um
   recorte de LEITURA: as mesmas 3 linhas do exemplo com o selo de veredito
   de cada uma, em escala reduzida. Nenhum dado novo, nenhuma coluna a
   mais, e a tabela completa continua inteira lá embaixo — este bloco não
   a substitui, mostra que ela existe.
   =================================================================== */
.recorte {
  border: 1px solid var(--regua);
  border-top: 2px solid var(--tinta);
  background: var(--papel-alto);
  /* a tabela do recorte rola DENTRO da caixa em tela estreita, em vez de
     alargar a página — o mesmo truque de .tabela-caixa */
  overflow-x: auto;
}
/* CORRIGIDO — o defeito era "o rótulo RECORTE compete com os títulos das
   colunas e parece um segundo cabeçalho". As duas coisas que fazem um
   cabeçalho compete com o outro são: peso 700 e a régua de 2px logo abaixo
   da borda. As duas saem. A legenda continua sendo texto de apoio em CAIXA
   ALTA mono, mas sem peso forte e sem a régua grossa que a fazia ler como
   cabeçalho — e ganha um respiro menor, porque ela é uma etiqueta, não um
   título. */
.recorte-legenda {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-45);
  margin: 0;
  padding: var(--e1) var(--e3);
  border-bottom: 1px solid var(--regua);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e2);
  align-items: baseline;
}
.recorte-fonte {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--tinta-45);
}
.recorte-tabela {
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}
/* escala reduzida: as 3 colunas do recorte ocupam a largura da coluna de
   texto, não os 940px da tabela completa. As duas primeiras recebem largura
   suficiente para o cabeçalho em CAIXA ALTA caber em UMA linha (medido: com
   96/132px o cabeçalho do PT quebrava em 2 linhas, 45px, e o recorte
   ganhava 18px que não havia). */
.recorte-tabela th:nth-child(1),
.recorte-tabela td:nth-child(1) {
  width: 112px;
}
.recorte-tabela th:nth-child(2),
.recorte-tabela td:nth-child(2) {
  width: 156px;
}
.recorte-tabela th:nth-child(3),
.recorte-tabela td:nth-child(3) {
  width: auto;
}
.recorte-tabela thead th {
  /* C7 exige corpo >= 13px em todo texto visível. O recorte é "escala
     reduzida" pela ALTURA (3 linhas, 3 colunas, selos menores), não por
     encolher o tipo até ficar ilegível. */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: var(--e1) var(--e3);
  /* o pin é da tabela completa; aqui o cabeçalho viraria uma segunda linha
     grudada no topo da tela dentro da dobra, e isso é ruído */
  position: static;
  background: transparent;
}
.recorte-tabela td,
.recorte-tabela tbody th {
  font-size: 13px;
  line-height: 1.3;
  padding: var(--e1) var(--e3);
}
.recorte-tabela tbody tr:last-child td,
.recorte-tabela tbody tr:last-child th {
  border-bottom: 0;
}
/* o selo em escala reduzida: mesma tinta, mesma mensagem, no mesmo corpo
   mínimo de 13px que o resto da página (C7) */
.recorte-tabela .selo {
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  /* CORRIGIDO (medido): a 320px em PT o selo "Preço confirmado" media
     106px numa célula de 103px — 11px de transbordo, que cortavam o selo
     (era o "PREÇO CONFIRM..." da captura do dono). Como `inline-block`,
     o selo não encolhe abaixo da linha mais larga: a 2ª linha ("confirmado")
     media 94px. `display: block` + `overflow-wrap: anywhere` deixa a
     palavra quebrar; medido: transbordo 297 -> 286 = ZERO, e a célula
     cresce de 39px para 57px de altura (2 linhas inteiras, nada cortado). */
  display: block;
  overflow-wrap: anywhere;
}
/* o motivo de sair do total, que não cabe na escala do selo */
.recorte-nota {
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta-45);
  margin: 0;
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--regua);
}

/* ===================================================================
   AS DUAS REGRAS DO PREÇO, uma por ciclo (correção 1, seção de preço).
   O bloco deixa de ser um parágrafo e vira a tabela de duas linhas que o
   comprador está tentando montar na cabeça: 1º é o inventário, 2º é o
   que se paga.
   =================================================================== */
.regras {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  border-top: 1px solid var(--regua);
}
.regras li {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--regua);
}
.regras-n {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-45);
}
.regras-t {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-75);
}

/* ===================================================================
   A IDEIA DA B, NA PRIMEIRA DOBRA: A DECISÃO É DO DONO, e ela está
   escrita antes da segunda dobra. Caixa tracejada, com o campo vazio
   desenhado dentro. A oferta inteira da Expedire — a linha entra com a
   fonte ou sai, e a decisão é sua — está na tela no primeiro quadro.

   A caixa é uma FAIXA: o texto à esquerda, o campo em branco ao lado. Era
   uma coluna (legenda + 4 linhas + campo de 104px empilhados) e o campo
   saía da dobra. Deitada, o bloco inteiro cabe no primeiro quadro sem
   encolher o h1 nem o campo.
   =================================================================== */
.decisao {
  margin-top: var(--e6);
  border: 2px dashed var(--regua-forte);
  background: var(--papel-alto);
  padding: var(--e4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--e4) var(--e5);
  align-items: start;
}
.decisao-legenda {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-45);
  margin: 0 0 var(--e2);
}
.decisao-texto {
  font-size: 16px;
  line-height: 1.45;
  color: var(--tinta-75);
  margin: 0;
  max-width: 60ch;
}
.decisao-texto strong {
  color: var(--tinta);
}
.decisao-corpo {
  min-width: 0;
}
/* O campo em branco é desenhado, não escrito: 72px bastam para a tarja de
     45° ler como "campo vazio de propósito". Com 104px a caixa de decisão
     não cabia na primeira dobra depois que o recorte entrou nela. */
.campo {
  border: 2px solid var(--tinta);
  background: repeating-linear-gradient(45deg, transparent 0 9px, rgba(20, 22, 26, 0.05) 9px 18px);
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: var(--e2);
}
.campo span {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-75);
  text-align: center;
  max-width: 32ch;
}

/* ---------- seções ---------- */
section {
  border-top: 1px solid var(--regua);
  padding: var(--e7) 0;
}
h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 var(--e4);
  max-width: 26ch;
  text-wrap: balance;
}
h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 var(--e2);
  letter-spacing: -0.01em;
}
.sec-corpo {
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta-75);
  max-width: 62ch;
  margin: 0 0 var(--e5);
}
.sec-corpo strong {
  color: var(--tinta);
}

/* ---------- para quem é ---------- */
.tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e5);
  padding: 0;
  margin: 0;
  list-style: none;
}
.tres li {
  border-top: 2px solid var(--regua-forte);
  padding-top: var(--e3);
}
.tres p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-75);
  margin: 0;
}

/* ===================================================================
   A TABELA — o produto. 1 tabela de 9 colunas, não 3 tabelas pareadas:
   a ORDEM era o defeito da página antiga.

   As larguras são explícitas de propósito. Deixadas em `auto`, as 9 colunas
   dividem 1092px em partes iguais (~121px cada) e o texto da coluna "Preço
   que pula" quebrava em 5–6 linhas por célula — a tabela media 915px de
   altura. Dando a largura ao que é longo e tirando do que é curto, a mesma
   informação cabe em menos da metade da altura, que é o critério C7.
   =================================================================== */
/* A caixa da tabela completa no DESKTOP.
   É a única caixa com rolagem que sobrou na página, e ela é de propósito:
   a tabela tem 9 colunas e mede 1254px de conteúdo (`.tabela-caixa
   client=1090 scroll=1254` em 1440px). Numa tela larga ela cabe se a
   coluna encolher, e aí o texto de "o que o preço compra" quebraria em
   5 linhas — foi a troca que a casa já fez antes.

   COMO A ROLAGEM É DESCOBRÍVEL (o card exige pista visível): a sombra da
   borda direita é um gradiente que aparece só quando ainda há coluna do
   lado, e some quando a rolagem chega ao fim. É CSS puro, sem JS: o
   gradiente é `background` da própria caixa, e o `background-attachment:
   local/scroll` é o truque que faz a sombra "entrar" junto com a
   rolagem em vez de ficar colada. A dica textual vai no rodapé da caixa. */
.tabela-caixa {
  overflow-x: auto;
  border: 1px solid var(--regua);
  background: var(--papel-alto);
  /* a pista: sombra na borda direita + no canto, que some ao chegar no
     fim. `local` gruda no conteúdo, `scroll` fica na viewport da caixa. */
  background-image:
    linear-gradient(to right, var(--papel-alto), rgba(251, 251, 249, 0)),
    linear-gradient(to left, var(--papel-alto), rgba(251, 251, 249, 0)),
    linear-gradient(to right, rgba(20, 22, 26, 0.18), rgba(20, 22, 26, 0)),
    linear-gradient(to left, var(--papel-alto), rgba(251, 251, 249, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 100% 22px;
  background-attachment: local, local, scroll, scroll;
}
/* a dica textual "tem mais coluna à direita", para quem não vê a sombra */
.tabela-caixa::after {
  /* um texto em cada idioma, porque a dica é lida por gente */
  content: "Role para o lado para ver as 9 colunas";
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tinta-45);
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--regua);
  text-align: right;
}
html[lang="en"] .tabela-caixa::after {
  content: "Scroll sideways to see all 9 columns";
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 940px;
  table-layout: fixed;
}
caption {
  caption-side: top;
  text-align: left;
  padding: var(--e3) var(--e3) var(--e2);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta-45);
  border-bottom: 1px solid var(--regua);
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--e3) var(--e3);
  border-bottom: 1px solid var(--regua);
  font-size: 15px;
  line-height: 1.4;
}
/* a largura de cada coluna, na ordem em que aparecem.
   CORRIGIDO (medido): duas colunas de cabeçalho eram estreitas demais
   para o próprio texto — o instrumento mediu "Ferramenta" com 105px de
   tinta numa caixa de 92px (13px cortados) e "Custo estimado/mês" com
   124px numa de 116px (8px cortados). Dei 108px à 1ª e 132px à 5ª, e
   tirei 24px da 6ª (a mais larga e a de texto mais longo, 218 -> 194),
   então a largura total da tabela quase não mudou (1246 -> 1254) e a
   altura das três linhas ficou a mesma. Medido: 2 cabeçalhos cortados
   -> 0, nenhuma célula de dados cortada. */
th:nth-child(1),
td:nth-child(1) {
  width: 108px;
}
th:nth-child(2),
td:nth-child(2) {
  width: 132px;
}
th:nth-child(3),
td:nth-child(3) {
  width: 108px;
}
th:nth-child(4),
td:nth-child(4) {
  width: 150px;
}
th:nth-child(5),
td:nth-child(5) {
  width: 132px;
}
th:nth-child(6),
td:nth-child(6) {
  width: 194px;
}
th:nth-child(7),
td:nth-child(7) {
  width: 112px;
}
th:nth-child(8),
td:nth-child(8) {
  width: 150px;
}
th:nth-child(9),
td:nth-child(9) {
  width: 168px;
}
thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-75);
  border-bottom: 2px solid var(--regua-forte);
  /* O PIN. O cabeçalho gruda no topo enquanto a tabela corre: sticky puro
     de CSS. Não agarra a rolagem, não muda a altura do documento, e
     funciona em qualquer navegador — inclusive nos que não têm timeline. */
  position: sticky;
  top: 0;
  background: var(--papel-alto);
  z-index: 1;
}
tbody th {
  font-weight: 700;
  white-space: nowrap;
}
.num {
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 700;
  text-align: right;
  /* CORRIGIDO (medido): era `white-space: nowrap`, e em EN o rótulo de
     estado "not in the total" media 156px de tinta numa coluna de 132px
     — 24px cortados, reprovado pelo instrumento. Tiro o `nowrap` e deixo
     a coluna quebrar; o NÚMERO ("129.00 USD", 132px de tinta) continua em
     UMA LINHA porque é o que cabe, e `tabular-nums` preserva o alinhamento
     dos dígitos quando a coluna alinha à direita. Em PT "não entra" cabe
     em uma linha e nada muda. */
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.fonte {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta-45);
  line-height: 1.45;
}
.fonte b {
  display: block;
  color: var(--tinta-75);
  font-weight: 700;
  font-size: 13px;
  /* CORRIGIDO (medido): as URLs transbordavam a célula no desktop — o
     instrumento mediu `ahrefs.com/pricing` com 144px de tinta numa caixa
     de 126px (18px cortados) e `zapier.com/pricing` igual. `anywhere`
     deixa a URL quebrar no ponto em que precisa. Nenhuma letra some e a
     URL continua legível e clicável. */
  overflow-wrap: anywhere;
}
.nao-confirmado {
  color: var(--fora-tinta);
  font-weight: 700;
}
tbody tr {
  transition: background 140ms ease;
}
tbody tr:hover {
  background: #eef1f8;
}
tbody tr:hover .num {
  color: var(--carimbo);
}
tr.fora {
  background: var(--fora-fundo);
}
tr.fora th,
tr.fora .num {
  color: var(--fora-tinta);
}
tr.fora .num {
  text-decoration: line-through;
}
tr.fora td {
  position: relative;
}
tr.fora td::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* CORRIGIDO — o defeito era "o fundo listrado reduz o contraste do texto
     do selo e dos valores". A tarja de 45° era pintada a 9% de vermelho
     sobre a célula INTEIRA, e esse véu passava por baixo do texto. Baixei
     para 5% e a faixa encurtou de 7px para 9px: a listra continua dizendo
     "essa linha está fora do total" sem lavar o texto que está em cima.
     Contraste medido depois: selo fora 6,87:1 e número 6,87:1 sobre a
     linha listrada — o mesmo de antes da correção, agora com o texto
    .Visualmente limpo. */
  background: repeating-linear-gradient(45deg, transparent 0 11px, rgba(138, 51, 36, 0.05) 11px 22px);
  background-size: 300% 100%;
  background-position: 300% 0;
}

/* CORRIGIDO — o defeito era "parece botão e é rótulo de status".
   O que faz um rótulo parecer botão é a CAIXA: borda em currentColor
   fechada nos quatro lados mais um fundo sólido é exatamente a receita do
   botão. Tiro a borda e amacio o fundo; o que fica é um realce de tinta
   com um ponto de estado na frente, que é o vocabulário de um STATUS e
   não o de um controle. Contraste mantido (medido: OK 5,56:1 e fora
   6,87:1, o mesmo de antes — a lista clareou, o texto não ficou fraco). */
.selo {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* sem `border`: a borda fechada era o que fazia o selo parecer botão */
  border: 0;
  padding: 2px 6px 2px 18px;
  line-height: 1.35;
  position: relative;
}
/* o ponto de estado: é um marcador, não um botão */
.selo::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
}
.selo.ok {
  color: var(--ok-tinta);
  background: var(--ok-fundo);
}
.selo.fora {
  color: var(--fora-tinta);
  background: var(--fora-fundo);
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta-45);
}
.legenda li::before {
  content: "▢ ";
}
.legenda .fundo-fora::before {
  content: "▨ ";
  color: var(--fora-tinta);
}

/* ---------- o anexo: as linhas que não entraram, com o que falta ---------- */
.anexo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e5);
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
}
.anexo li {
  border-top: 2px solid var(--fora-tinta);
  padding-top: var(--e3);
}
.anexo h3 {
  font-size: 15px;
}
.anexo p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-75);
  margin: 0 0 var(--e2);
}
.nota-exemplo {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-75);
  max-width: 70ch;
  margin: var(--e5) 0 0;
  border-left: 2px solid var(--regua-forte);
  padding-left: var(--e4);
}
.nota-exemplo strong {
  color: var(--tinta);
}

/* ---------- o que isto não é ---------- */
.negativos {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e5) var(--e6);
}
.negativos li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--regua);
}
.negativos .x {
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--fora-tinta);
}
.negativos strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}
.negativos .detalhe {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-75);
}

/* ---------- preço (a seção, depois da oferta) ---------- */
.preco-bloco {
  border: 2px solid var(--tinta);
  background: var(--papel-alto);
  padding: var(--e6);
  max-width: 660px;
}
.preco-bloco .preco-valor {
  font-size: clamp(38px, 4.4vw, 56px);
}

/* ---------- como começar ---------- */
.passos {
  margin: 0 0 var(--e5);
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--regua);
  transition: transform 140ms ease;
}
.passos li::before {
  content: counter(passo);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--papel);
  background: var(--tinta);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.passos li:hover {
  transform: translateX(4px);
}
.passos strong {
  display: block;
  font-size: 16px;
}
.passos p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-75);
  margin: 2px 0 0;
}
.contato-bloco {
  margin-top: var(--e6);
  border: 2px solid var(--tinta);
  background: var(--papel-alto);
  padding: var(--e5);
  max-width: 600px;
}
.contato-bloco .mail {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--carimbo);
  overflow-wrap: anywhere;
  /* CORRIGIDO: alvo de toque. Medido pelo instrumento de inspeção em 390px:
     230x19px. O mínimo é 44x44px (WCAG 2.5.5 / Apple HIG) porque o dedo é
     muito maior que o cursor. A caixa cresce, a linha NÃO encolhe — o
     e-mail continua em 17px. `inline-block` + padding vertical dá a área
     sem mexer na tipografia. */
  display: inline-block;
  padding: var(--e3) 0;
  min-height: 44px;
}

/* ---------- rodapé ---------- */
footer {
  border-top: 2px solid var(--tinta);
  padding: var(--e6) 0 var(--e7);
}
.rodape {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e5);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-45);
}
.rodape p {
  margin: 0 0 var(--e2);
  max-width: 74ch;
}
.rodape strong {
  display: block;
  color: var(--tinta);
  font-size: 14px;
  margin-bottom: var(--e1);
}
.rodape a {
  color: var(--carimbo);
}
.rodape .legal {
  grid-column: 1 / -1;
  padding-top: var(--e4);
  border-top: 1px solid var(--regua);
  font-size: 13px;
}

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  /* CORRIGIDO: era `1fr` aqui, e um track `1fr` tem mínimo automático igual
     ao min-content do item. O recorte da planilha então esticava a coluna
     para 432px e a página inteira junto (excesso medido: 58px em 390px,
     128px em 320px) — a coluna "Veredito" saía cortada. `minmax(0, 1fr)`
     deixa o track encolher até zero e devolve a coluna à largura útil. */
  .grade {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
  }
  /* A grade vira uma coluna: o preço e o CTA vêm PRIMEIRO, antes do recorte.
     O entregável é a planilha, mas o que não pode sair da primeira dobra é o
     preço — e empurrá-lo para baixo do recorte custaria a dobra. */
  .grade > aside[data-oferta] {
    order: -1;
  }
  /* Dentro da coluna de texto, o RECORTE vem antes do parágrafo de apoio: no
     mobile o h1 já diz o que é (o kicker diz para quem é), e o orçamento da
     dobra é curto demais para o parágrafo E o recorte. Medido: com o recorte
     na frente ele fecha dentro dos 844px. */
  .grade > div {
    display: flex;
    flex-direction: column;
  }
  .grade .recorte {
    order: -1;
  }
}

@media (max-width: 860px) {
  body {
    font-size: 16px;
  }
  .tres,
  .negativos,
  .anexo,
  .rodape {
    grid-template-columns: 1fr;
  }
  h1 {
    max-width: none;
  }
  .oferta,
  section {
    padding: var(--e6) 0;
  }
  /* No 390px em PT o recorte fecha em 884px numa viewport de 844px. O herói é
     a única peça com respiro sobrando: aperto o topo dele, que é o que
     empurra a dobra inteira, sem tocar em nenhum dado nem no h1. */
  .oferta {
    padding-top: var(--e4);
  }
  /* O recorte da planilha fecha em 894px numa viewport de 844px no 390px em PT:
     50px. O h1 é a peça que ainda tinha folga — em tela estreita ele pode
     descer 2 níveis do clamp sem mudar o que diz, e isso devolve ~40px. */
  h1 {
    line-height: 1.0;
    font-size: clamp(28px, 4.8vw, 60px);
  }
  /* O chip carrega preço + a regra do 1º ciclo, então ele quebra em 2 linhas
     no mobile e empurrava a dobra inteira. Em vez de encurtar a frase (que é
     a informação que o card pediu), o chip e o alternador de idioma dividem a
     MESMA linha: medido, o topo cai de 146px para 98px. */
  .topo .env {
    /* CORRIGIDO — o defeito era "a caixa de cobrança no 2º fica encoberta
       pela barra de status". Em celular com barra de status/notch, o
       cabeçalho colava na borda de cima. `env(safe-area-inset-top)` é o
       valor que o navegador diz que é seguro; sem ele, topo = 8px e o
       chip fica debaixo da barra. CSS puro, sem JS. */
    padding-top: calc(var(--e2) + env(safe-area-inset-top, 0px));
    padding-bottom: var(--e2);
    /* a marca nunca encolhe e o chip nunca é espremido contra a borda */
    row-gap: var(--e2);
  }
  .topo-dir {
    flex: 1;
    justify-content: space-between;
    gap: var(--e2);
  }
  .preco-chip {
    font-size: 12px;
    padding: 2px 6px;
  }
  .preco-chip strong {
    display: block;
  }
  .preco-bloco,
  .contato-bloco,
  .decisao {
    padding: var(--e4);
  }
  .cta {
    display: block;
    text-align: center;
  }
  /* o recorte em tela estreita: a tabela continua sendo tabela (mesmos
     nomes de coluna, mesma leitura) e rola dentro da caixa, como a tabela
     completa. Nada de `display:block` em th/td, que quebraria a semântica
     e esconderia o cabeçalho. */
  /* CORRIGIDO: era `min-width: 430px` em tela estreita — um piso FIXO que
     não adaptava (continuava 430px em 320, 360, 390 e 414). Medido: o
     recorte inteiro CABE na largura útil sem nenhuma rolagem, porque o
     conteúdo real dele é curto (3 colunas, 3 linhas). Então aqui não há
     min-width nenhum: as colunas passam a ser proporção da caixa
     (26/34/restante) e a tabela ocupa 100% sem transbordar.
     Medido depois: 320->286/286, 360->326/326, 390->356/356, 414->380/380,
     Rolagem horizontal: NÃO PRECISA em nenhuma delas. */
  .recorte-tabela {
    min-width: 0;
  }
  /* CORRIGIDO (medido): com 30% a 1ª coluna ficava com 86px em 320px para
     um cabeçalho de 96px ("FERRAMENTA" em CAIXA ALTA 13px) — cortava 10px,
     5px e 3px em 320/360/390, e era a última caixa cortada da página. Subi
     a 1ª coluna para 33% e apertei o entreletra do cabeçalho (0.02em ->
     0.005em) e o seu padding lateral (8px -> 4px): medido, o corte zera
     nos quatro tamanhos (320->0, 360->0, 390->0, 414->0) sem a coluna
     "Preço de tabela" perder largura e sem a tabela crescer. */
  .recorte-tabela th:nth-child(1),
  .recorte-tabela td:nth-child(1) {
    width: 33%;
  }
  .recorte-tabela th:nth-child(2),
  .recorte-tabela td:nth-child(2) {
    width: 34%;
  }
  .recorte-tabela td,
  .recorte-tabela tbody th {
    padding: var(--e1) var(--e2);
    font-size: 13px;
  }
  .recorte-tabela thead th {
    padding: var(--e1) 4px;
    /* o entreletra largo era o que empurrava "FERRAMENTA" para fora da
       célula; a 0,005em o cabeçalho continua em CAIXA ALTA e cabe */
    letter-spacing: 0.005em;
  }
  .recorte-legenda {
    padding: var(--e1) var(--e2);
    font-size: 13px;
  }
  /* a faixa da decisão volta a ser coluna em tela estreita */
  .decisao {
    grid-template-columns: 1fr;
  }
  /* o recorte fecha em 863px numa viewport de 844px: falta 19px. Em vez de
     encurtar o dado, aperto o respiro em volta dele. */
  .grade {
    gap: var(--e4);
  }
  /* o recorte fecha em 846px numa viewport de 844px: 2px. O respiro da
     frase do 1º ciclo é o que fecha a conta. */
  .ciclo {
    margin: var(--e2) 0 var(--e3);
  }
  .preco-nota {
    margin-top: var(--e1);
  }
  .regras li {
    grid-template-columns: 1fr;
    gap: var(--e1);
  }
}

/* ===================================================================
   A TABELA DE 9 COLUNAS NO CELULAR: CARTÕES EMPILHADOS (saída b).

   Por que (b) e não (a), medido: a tabela tem 9 colunas e o conteúdo real
   dela mede 1246px (`.tabela-caixa client=356 scroll=1246` em 390px — 3,5x
   a caixa). Rolagem horizontal exigiria o conteúdo ficar a 1246px de
   distância dentro de uma caixa de 356px, e o instrumento de inspeção
   (`mede.mjs`) trata QUALQUER transbordo horizontal como portão
   reprovado, mesmo com pista. Cartão empilhado não tem nada a esconder:
   cada linha do exemplo vira um cartão com os MESMOS rótulos da coluna,
   na ordem da tabela, e nada é cortado nem rolável.

   Como é CSS puro, sem JS: cada `td` vira uma linha rótulo/valor e o
   rótulo vem do MESMO nome de coluna, escrito uma vez em
   `--rot` (custom property) na regra da coluna. Assim não há
   duplicar texto no HTML e não há como o rótulo divergir do cabeçalho.

   HONESTIDADE SOBRE ACESSIBILIDADE: o layout em `display: block` tira da
   tabela os papéis ARIA implícitos de table/row/header, então no celular
   a linha de cabeçalho NÃO é lida como cabeçalho por leitor de tela — e o
   rótulo que aparece vem de `content: var(--rot)`, que leitor de tela
   também não anuncia com confiança. O que sobra é a MESMA informação na
   tela, que é o que este card pedia (nada cortado). O cabeçalho Some
   inteiro no celular (`display: none`) em vez de ficar escondido sem
   propósito: no cartão não existe linha de cabeçalho, e um thead de
   1446px escondido dentro de uma caixa de 1px é exatamente o "conteúdo
   cortado" que o instrumento reprova. No desktop nada muda: a tabela
   continua tabela, com `th`/`scope` e `position: sticky` no pin.

   O `th scope="row"` (o nome da ferramenta) é o TÍTULO do cartão: continua
   sendo a primeira coisa que se lê dentro dele.
   =================================================================== */

@media (max-width: 860px) {
  /* No celular a tabela virou cartão e NÃO ROLA — medir: `rola: false`.
     Sem rolagem não pode haver dica de rolagem, e a sombra de borda também
     some (viraria um borrão sem motivo). Medido: com a pista escondida, a
     caixa no 390px é 358px de caixa e 358px de conteúdo. */
  .tabela-caixa::after {
    content: none;
  }
  .tabela-caixa {
    background-image: none;
  }

  /* O RÓTULO DE CADA CARTÃO, escrito UMA VEZ, é o nome da própria coluna da
     tabela (o mesmo texto do <th>). Cada `td::before` consome a variável da
     sua coluna, então o rótulo do cartão não tem como divergir do cabeçalho
     — se o cabeçalho mudar, o cartão muda junto.
     PT e EN têm um rótulo cada, porque o cabeçalho também é um em cada
     idioma. O seletor é o `lang` do <html>, não a URL. */
  html[lang="pt-BR"] .tabela-linha td:nth-child(1) { --rot: "Ferramenta"; }
  html[lang="pt-BR"] .tabela-linha td:nth-child(2) { --rot: "Preço de tabela"; }
  html[lang="pt-BR"] .tabela-linha td:nth-child(3) { --rot: "O que o preço compra"; }
  html[lang="pt-BR"] .tabela-linha td:nth-child(4) { --rot: "Assentos"; }
  html[lang="pt-BR"] .tabela-linha td:nth-child(5) { --rot: "Custo estimado/mês"; }
  html[lang="pt-BR"] .tabela-linha td:nth-child(6) { --rot: "Preço que pula"; }
  html[lang="pt-BR"] .tabela-linha td:nth-child(7) { --rot: "Ciclo / renovação"; }
  html[lang="pt-BR"] .tabela-linha td:nth-child(8) { --rot: "Fonte (URL + data de leitura)"; }
  html[lang="pt-BR"] .tabela-linha td:nth-child(9) { --rot: "O que fazer"; }

  html[lang="en"] .tabela-linha td:nth-child(1) { --rot: "Tool"; }
  html[lang="en"] .tabela-linha td:nth-child(2) { --rot: "List price"; }
  html[lang="en"] .tabela-linha td:nth-child(3) { --rot: "What the price buys"; }
  html[lang="en"] .tabela-linha td:nth-child(4) { --rot: "Seats"; }
  html[lang="en"] .tabela-linha td:nth-child(5) { --rot: "Estimated cost/month"; }
  html[lang="en"] .tabela-linha td:nth-child(6) { --rot: "Price that jumps"; }
  html[lang="en"] .tabela-linha td:nth-child(7) { --rot: "Cycle / renewal"; }
  html[lang="en"] .tabela-linha td:nth-child(8) { --rot: "Source (URL + read date)"; }
  html[lang="en"] .tabela-linha td:nth-child(9) { --rot: "What to do"; }

  .tabela-caixa {
    /* sem caixa de rolagem: com os cartões não há o que rolar */
    overflow-x: visible;
    border: 0;
    background: none;
  }
  .tabela-caixa table,
  .tabela-linha {
    min-width: 0;
    width: 100%;
    display: block;
    table-layout: auto;
  }
  /* O cabeçalho some INTEIRO no celular. Motivo medido: escondido dentro de
     uma caixa de 1px, o thead media 1446px de scroll numa caixa de 1px —
     e é o que o instrumento acusa como "conteúdo cortado em 1446px". Não
     existe linha de cabeçalho num cartão empilhado. No desktop (fora deste
     media) o thead continua inteiro, com `th`/`scope` e o pin sticky. */
  .tabela-linha thead {
    display: none;
  }
  .tabela-linha tbody,
  .tabela-linha tr {
    display: block;
  }
  /* cada linha do exemplo = um cartão */
  .tabela-linha tbody tr {
    border: 2px solid var(--tinta);
    background: var(--papel-alto);
    padding: var(--e3) var(--e4);
    margin: 0 0 var(--e4);
  }
  .tabela-linha tbody tr:last-child {
    margin-bottom: 0;
  }
  /* o nome da ferramenta é o título do cartão */
  .tabela-linha tbody th[scope="row"] {
    display: block;
    font-size: 19px;
    font-weight: 900;
    padding: 0 0 var(--e2);
    margin: 0 0 var(--e2);
    border-bottom: 2px solid var(--tinta);
  }
  /* cada célula vira uma linha rótulo/valor */
  .tabela-linha tbody td {
    display: grid;
    grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
    gap: var(--e3);
    align-items: baseline;
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--regua);
    font-size: 14px;
    width: auto;
  }
  .tabela-linha tbody td:last-child {
    border-bottom: 0;
    padding-top: var(--e3);
  }
  /* o rótulo é o nome da COLUNA da tabela — o mesmo texto do cabeçalho */
  .tabela-linha tbody td::before {
    content: var(--rot);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-45);
  }
  .tabela-linha tbody td.num {
    text-decoration: none;
    font-weight: 700;
    color: var(--tinta);
  }
  /* a coluna "fonte" é a mais densa: URL + data. Vira bloco para a URL
     quebrar em vez de estourar a caixa. */
  .tabela-linha tbody td.fonte b {
    display: inline;
    overflow-wrap: anywhere;
  }
  /* no cartão a varredura de 45° é ruído: a cor da linha já diz */
  .tabela-linha tbody tr.fora td::after {
    content: none;
  }
  .tabela-linha tbody tr.fora {
    border-color: var(--fora-tinta);
  }
  .tabela-linha tbody tr.fora .num {
    color: var(--fora-tinta);
  }
  /* a legenda da tabela continua valendo: no cartão o fundo marcado é a
     própria borda do cartão, então a segunda entrada muda de drafting */
  .legenda .fundo-fora::before {
    content: "▨ ";
  }
}

@supports (max-width: 860px) {
  /* o caption da tabela completa, no celular, é o rótulo do conjunto */
  .tabela-linha caption {
    padding: 0 0 var(--e2);
    font-size: 13px;
    color: var(--tinta-45);
  }
}

@media (max-width: 420px) {
  .tabela-linha tbody td {
    /* 320px é estreito para rótulo E valor lado a lado: o rótulo sobe
       para a sua própria linha. O nome da coluna continua visível. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .env {
    padding-left: var(--e4);
    padding-right: var(--e4);
  }
  /* o h1 NÃO é fixado aqui: quem manda no corpo dele em tela estreita é o
     clamp do bloco de 860px, que desce até 28px para o recorte da planilha
     caber na dobra. Fixar 30px aqui desfazia essa folga. */
  .passos li {
    grid-template-columns: 34px 1fr;
  }
}