/* ==========================================================================
   Edev — a landing
   ==========================================================================

   ── A identidade não é inventada aqui ──

   Os tokens abaixo são os MESMOS do tema claro do app (`src/renderer/src/
   tokens.css`): o papel `#faf9f5`, o poço `#f0eee6`, a tinta `#191917` e o
   acento terracota `#cc633a`. É a paleta do Claude, e o app já nasceu nela.

   Copiar a paleta em vez de "algo parecido" é o que faz a página e o programa
   parecerem a mesma coisa quando a pessoa baixa e abre. Uma landing bonita numa
   cor que o produto não tem é uma promessa quebrada no primeiro clique.

   ── O que este arquivo NÃO faz ──

   Nenhuma sombra projetada. O sistema do app expressa elevação por FIO — uma
   borda de um pixel mais clara no topo — e não por sombra, que empilha
   profundidade falsa. A página segue a mesma regra.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('assets/fontes/Geist.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fontes/GeistMono.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --papel: #faf9f5;
  --papel-alto: #ffffff;
  --poco: #f0eee6;
  --fundo: #e5e2d8;
  --linha: #e2ded2;
  --linha-forte: #cdc7b6;

  --tinta: #191917;
  --tinta-media: #5c5b55;
  --tinta-fraca: #8a887e;

  --acento: #cc633a;
  --acento-claro: #eba57f;
  --acento-fundo: #f6e9e1;
  --acento-tinta: #5e2a14;

  --verde: #2f7d4f;
  --vermelho: #b3122e;

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  /*
    A serifada é a MESMA pilha do app: sem webfont, servida pelo sistema.

    Nenhuma família serifada boa cabe em menos de 40 KB, e a página inteira pesa
    menos que isso hoje. Iowan e Palatino existem no macOS e no Windows; Georgia
    é o piso, e é bom.
  */
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;

  --raio: 10px;
  /* A faixa nasceu em 1080 e foi a 1240 quando a seção do motor precisou de
     título maior E imagem maior ao mesmo tempo — em 1080 os dois não cabiam.
     O que era exceção de uma seção virou o padrão da página: faixa única, senão
     uma seção parece desalinhada das vizinhas. */
  --largura: 1240px;
  /* A curva de TODO movimento novo: sai rápido e assenta devagar — é o que
     tira o ar de "slide de apresentação" da entrada em linha reta. */
  --mola: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.env {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- tipografia ----------------------------------------------------------- */

/*
  Título em SERIFADA, texto em Geist.

  É a assinatura do Claude e a do app: a primeira tela do Edev diz "Sites feitos
  conversando" numa serifada de sistema, e o resto da interface é sans. A landing
  repete isso para quem abre o programa reconhecer o lugar.
*/
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
}

h1 {
  font-size: clamp(42px, 6.6vw, 76px);
}

h2 {
  /* 52px no topo do clamp, não 42: o título é a única coisa que a pessoa lê
     antes de decidir se continua, e 42 numa faixa de 1240 ficava tímido.
     text-wrap: balance evita a última linha órfã com uma palavra só. */
  font-size: clamp(33px, 4.8vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  font-size: clamp(20px, 2.2vw, 24px);
}

p {
  margin: 0;
}

.olho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--acento);
}

.olho::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--acento);
}

.sub {
  /* 48ch, não 62: a unidade ch é a largura do algarismo zero, mais estreita
     que a letra média — 62ch estava rendendo 85 caracteres por linha, acima do
     que o olho acompanha sem perder o começo da linha seguinte. Medido, não
     estimado. */
  max-width: 48ch;
  color: var(--tinta-media);
  font-size: clamp(17px, 1.8vw, 19.5px);
}

.secao {
  padding: clamp(64px, 9vw, 108px) 0;
  border-top: 1px solid var(--linha);
}

.secao-cabeca {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* --- botões --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--papel-alto);
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    transform 0.16s ease;
}

.btn:hover {
  border-color: var(--tinta-fraca);
  transform: translateY(-1px);
}

.btn.forte {
  border-color: transparent;
  background: var(--acento);
  color: #fff;
}

.btn.forte:hover {
  background: #b8542e;
}

.btn svg {
  width: 17px;
  height: 17px;
}

/* --- topo ----------------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  background: rgba(250, 249, 245, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s ease;
}

.topo.rolou {
  border-bottom-color: var(--linha);
}

.topo-int {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 62px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/*
  A marca agora é UMA imagem — símbolo e nome juntos —, e não um quadrado ao
  lado de texto. Por isso a ALTURA manda e a largura acompanha: travar largura
  aqui achataria a logo.

  Sem `border-radius`: ele arredondava um bloco de cor; a arte é transparente
  com raios pontudos, e arredondar corta as pontas.
*/
.marca img {
  height: 26px;
  width: auto;
  display: block;
}

/* No rodapé a assinatura é menor — ela acompanha, não anuncia. */
.rodape .marca img {
  height: 22px;
}

.menu {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.menu a {
  position: relative;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--tinta-media);
  font-size: 15px;
  text-decoration: none;
}

.menu a:hover {
  background: var(--poco);
  color: var(--tinta);
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 84px);
}

/*
  A malha de pontos do fundo — a mesma do app.

  Vem de `.palco-rolagem` em `styles.css`: pontos neutros de 26px e uma luz
  fraca vindo de cima. Nada anima, porque movimento no fundo de uma tela de
  trabalho é distração paga em atenção — e a landing herda o critério.
*/
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(25, 25, 23, 0.05) 1px, transparent 1px),
    radial-gradient(70% 46% at 50% 0%, rgba(204, 99, 58, 0.05) 0%, transparent 70%);
  background-size:
    26px 26px,
    100% 100%;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* --- a hero, centrada ------------------------------------------------------ */

/*
  Tudo no eixo do meio: olho, título, parágrafo, botões e a nota.

  `text-align: center` sozinho não resolve — ele centra o TEXTO dentro de cada
  bloco, mas o bloco continua largo e encostado à esquerda. Os dois que têm
  largura máxima (`h1` em 22ch, `.sub` em 48ch) precisam de margem automática
  para a CAIXA também ir para o meio, e os botões são flex, que se centram pelo
  `justify-content`.

  É o mesmo arranjo da seção "baixar", no fim da página — e de propósito: a
  primeira e a última dobra são as duas que só têm uma coluna.
*/
.hero .env {
  text-align: center;
}

/*
  A logo que abre a página.

  Mesma regra da `.baixar-logo`, com um teto maior: aqui ela é a primeira coisa
  que se vê, e lá é o fecho. O piso de 72px mantém o nome legível no celular.

  A margem de baixo é menor que a da última seção porque o `h1` da hero já traz
  `margin-top` — somar as duas abriria um vão entre a marca e o título.
*/
.hero-logo {
  display: block;
  margin: 0 auto;
  height: clamp(72px, 10vw, 132px);
  width: auto;
  max-width: 100%;
}

.hero h1 {
  /*
    Sem limite de caracteres por linha: a quebra é decidida no HTML, com um
    <br> entre as duas frases. Um `max-width` em `ch` quebra pelo que COUBER,
    e "O Claude escreve. Você entrega." já rendeu uma órfã ("entrega." sozinho
    numa terceira linha) — a frase é curta o bastante para não precisar dessa
    régua.
  */
  max-width: 22ch;
  /*
    `auto` nas laterais, e DENTRO do shorthand.

    Estava numa regra `margin-inline: auto` logo acima, e não valia: este
    `margin: 18px 0 20px` vem depois e zera as laterais junto. O título ficava
    222px à esquerda do centro enquanto todo o resto da hero já estava centrado
    — o tipo de desalinho que se vê e não se sabe de onde vem.
  */
  margin: 18px auto 20px;
}

.hero .sub {
  font-size: clamp(18px, 2vw, 21px);
  /* Mesma razão do `h1`: `text-align` centra o texto, não a caixa de 48ch. */
  margin-inline: auto;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Flex não obedece ao `text-align` do pai: quem centra os botões é isto. */
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.hero-nota {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-fraca);
}

/* --- as gravações do app -------------------------------------------------- */

/*
  O cartão de gravação: uma janela com barra própria e o selo "gravação real".

  Substitui o desenho em HTML da primeira versão. Um desenho não envelhece, mas
  também não prova nada — e a página inteira agora se apoia em provas. Cada
  vídeo é a tela do app capturada enquanto o recurso era usado; o cartão só
  emoldura.
*/
.gravacao {
  margin: 0;
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  background: var(--papel-alto);
  overflow: hidden;
}

.gravacao.grande {
  margin-top: clamp(40px, 6vw, 64px);
}

/*
  A mesma moldura serve vídeo e imagem.

  `height: auto` com `width`/`height` no HTML: o navegador reserva o espaço
  pela proporção antes de baixar, e a seção não pula quando a imagem entra.
*/
.gravacao video,
.gravacao .grav-img {
  display: block;
  width: 100%;
  height: auto;
  background: #191917;
}

.grav-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha);
  background: var(--poco);
}

.grav-bolas {
  display: inline-flex;
  gap: 6px;
}

.grav-bolas i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linha-forte);
}

.grav-titulo {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-fraca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  O selo pulsa devagar. É o único movimento permanente da página — e é o que
  diz "isto está rodando", que é exatamente a alegação que a seção faz.
*/
.grav-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--acento-fundo);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acento-tinta);
  white-space: nowrap;
}

.grav-rec i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vermelho);
  animation: pulso-rec 1.6s ease-in-out infinite;
}

@keyframes pulso-rec {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.grav-nota {
  display: block;
  padding: 8px 14px;
  border-top: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-fraca);
}

/* --- as seções de recurso ------------------------------------------------- */

.feat {
  display: grid;
  /* 1fr 1fr, e não 5fr 7fr: com a faixa em 1240 as colunas iguais dão ~570px
     de cada lado — o bastante para o título fechar em duas linhas e para a
     figura crescer. A proporção antiga sobrava largura na figura, que tinha
     teto próprio, e faltava no texto. */
  grid-template-columns: minmax(300px, 1fr) 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(30px, 4.5vw, 52px) 0;
}

.feat + .feat {
  border-top: 1px solid var(--linha);
}

/* Alterna o lado: o olho não anda em ziguezague à toa — cada seção recomeça. */
.feat.invertida {
  grid-template-columns: 1fr minmax(300px, 1fr);
}

.feat.invertida .feat-texto {
  order: 2;
}

.feat.invertida .gravacao {
  order: 1;
}

.feat-texto {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*
  O botão dentro da coluna de texto não estica.

  `.feat-texto` é flex em coluna, e o padrão `align-items: stretch` fazia o
  CTA ocupar os 408px inteiros — o que lê como barra, não como botão, e some
  como chamada. Encolhe para o próprio texto.
*/
.feat-texto > .btn {
  align-self: flex-start;
  margin-top: 6px;
}

/* O título do bloco cresceu junto com a faixa, mas menos que o da seção:
   52 para 32 mantém a hierarquia legível (o da seção continua 1,6x maior).
   Em 28px, numa coluna de 570, o bloco parecia legenda em vez de título. */
.feat-texto h3 {
  font-size: clamp(22px, 2.9vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.feat-texto > p {
  color: var(--tinta-media);
  font-size: 15px;
}

.feat-texto code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--acento-tinta);
}

.feat-lista {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feat-lista li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  color: var(--tinta-media);
}

.feat-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 6px;
  border-left: 1.6px solid var(--verde);
  border-bottom: 1.6px solid var(--verde);
  transform: rotate(-45deg) scale(0.9);
}

.feat-tag {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--poco);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-fraca);
}

/*
  O gradiente do workflows — o MESMO efeito que o seletor do app liga no último
  degrau. A palavra vira uma amostra do produto.
*/
.tag-workflow {
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #cc633a, #eba57f, #e0813f, #cc633a);
  background-size: 280% 100%;
  color: #fff;
  font-weight: 600;
  animation: fluxo-laranja 3.2s linear infinite;
}

@keyframes fluxo-laranja {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 280% 50%;
  }
}

.eainda-cabeca {
  margin: clamp(34px, 5vw, 56px) 0 22px;
  padding-top: clamp(30px, 4.5vw, 52px);
  border-top: 1px solid var(--linha);
}

/* --- pilares -------------------------------------------------------------- */

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--linha);
}

.pilar {
  padding: 26px 22px;
  background: var(--papel);
}

.pilar-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--acento-fundo);
  color: var(--acento);
  font-family: var(--mono);
  font-size: 12px;
}

.pilar h3 {
  margin: 14px 0 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.pilar p {
  color: var(--tinta-media);
  font-size: 14px;
}

/* --- features ------------------------------------------------------------- */

.grade-f {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* A grade do "e ainda": quatro cartões menores, sem disputar com as seções
   grandes que vieram antes. */
.grade-f.compacta {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.grade-f.compacta .f {
  padding: 20px;
}

.f {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-alto);
  transition:
    border-color 0.16s ease,
    transform 0.16s ease;
}

.f:hover {
  border-color: var(--acento-claro);
  transform: translateY(-2px);
}

.f-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--acento-fundo);
  color: var(--acento);
}

.f-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f h3 {
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.f p {
  color: var(--tinta-media);
  font-size: 14.5px;
}

.f-tag {
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--poco);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-fraca);
}

/* --- ajuda ---------------------------------------------------------------- */

.ajuda {
  display: grid;
  /*
    Quatro blocos, então a grade tem que fechar em 2×2.

    Com `minmax(300px, …)` cabiam três por linha e o quarto ficava sozinho numa
    linha inteira — a página inteira parecia ter perdido um bloco no caminho.
    O piso maior força duas colunas nas larguras de desktop e uma no celular.
  */
  /* 400, e nao 420: com a faixa em 1240 as duas colunas precisam de 854px e
     numa janela de 900 sobram 852 — faltavam DOIS pixels, a grade caia para
     uma coluna so, e o paragrafo esticava para 84 caracteres por linha. Em
     400 as duas colunas cabem, e tres continuam nao cabendo (1228 > 1192). */
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 14px;
}

.a {
  display: flex;
  gap: 14px;
  padding: 22px;
  border-left: 2px solid var(--acento-claro);
  background: var(--poco);
  border-radius: 0 var(--raio) var(--raio) 0;
}

.a-quem {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}

.a h3 {
  margin: 6px 0 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.a p {
  color: var(--tinta-media);
  font-size: 14.5px;
}

/* --- a comparação de tokens ----------------------------------------------- */

.comp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/*
  TRÊS colunas quando são três participantes.

  Coluna própria para cada um, e não um cartão largo em cima de dois: o
  argumento é a comparação linha a linha, e ela só existe se os três números
  estiverem na mesma altura do olho.
*/
.comp-3 {
  grid-template-columns: repeat(3, 1fr);
}

/*
  O SELO diz em uma palavra o que a tabela leva doze linhas para dizer.

  Ele é a única coisa do cartão que não é medida crua — é a leitura dela. Fica
  logo abaixo do número de propósito: quem passa o olho lê "US$ 3,21" e "o mais
  econômico" numa fixação só.
*/
.c-selo {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--acento-fundo);
  color: var(--acento-tinta);
  font-size: 12px;
  font-weight: 600;
}

/* O caro não vira alarme vermelho: é informação, não erro. */
.c-selo-caro {
  background: var(--poco);
  color: var(--tinta-media);
}

.c-marca {
  flex: none;
}

.c {
  padding: 26px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-alto);
}

.c.ganha {
  border-color: var(--acento);
  background: linear-gradient(180deg, var(--acento-fundo) 0%, var(--papel-alto) 46%);
}

.c-nome {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  /*
    Altura travada na do ícone.

    Só o cartão do Edev tem símbolo ao lado do nome; o outro é texto puro e
    ficava 3px mais curto. São 3px que empurram TODAS as linhas seguintes, e as
    duas colunas de números — que existem justamente para serem comparadas
    linha a linha — passam o resto do cartão desencontradas.
  */
  min-height: 20px;
}

.c-num {
  margin: 18px 0 2px;
  font-family: var(--mono);
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.c.ganha .c-num {
  color: var(--acento);
}

.c-un {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

/*
  A BARRA é o argumento.

  Sete vezes é difícil de sentir num número e óbvio em dois retângulos lado a
  lado. A largura sai do dado medido, não de uma proporção escolhida para
  impressionar.
*/
.c-barra {
  height: 8px;
  margin: 18px 0 14px;
  border-radius: 999px;
  background: var(--poco);
  overflow: hidden;
}

.c-barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--linha-forte);
}

.c.ganha .c-barra i {
  background: var(--acento);
}

.c-detalhe {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}

.c-detalhe div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--tinta-media);
}

.c-detalhe b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--tinta);
}

.metodo {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--poco);
  font-size: 13.5px;
  color: var(--tinta-media);
}

.metodo b {
  color: var(--tinta);
  font-weight: 600;
}

.metodo code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--acento-tinta);
}

/* --- sobre ---------------------------------------------------------------- */

.sobre {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.retrato {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  background: var(--poco);
}

.retrato img {
  width: 100%;
  aspect-ratio: 1 / 1.12;
  object-fit: cover;
  object-position: center top;
}

.sobre-papel {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}

.sobre h2 {
  margin: 10px 0 16px;
}

.sobre p + p {
  margin-top: 13px;
}

.sobre p {
  color: var(--tinta-media);
  max-width: 58ch;
}

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.selos span {
  padding: 5px 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel-alto);
  font-size: 13px;
  color: var(--tinta-media);
}

/* --- baixar --------------------------------------------------------------- */

.baixar {
  text-align: center;
  padding: clamp(64px, 9vw, 104px) 0;
  border-top: 1px solid var(--linha);
  background: var(--poco);
}

/*
  A logo grande que abre a última seção, no lugar do rótulo "Baixar".

  `clamp` porque ela é o maior elemento gráfico da página: fixa em pixels
  ficaria minúscula no desktop ou estourando a coluna no celular. O piso de
  64px mantém o nome legível na tela mais estreita.
*/
.baixar-logo {
  display: block;
  margin: 0 auto clamp(18px, 3vw, 28px);
  height: clamp(64px, 9vw, 112px);
  width: auto;
  max-width: 100%;
}

.baixar h2 {
  margin-bottom: 14px;
}

.baixar .sub {
  margin: 0 auto;
}

.baixar-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.requisitos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-fraca);
}

.requisitos span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.requisitos span::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento-claro);
}

/* --- rodapé --------------------------------------------------------------- */

.rodape {
  padding: 34px 0;
  border-top: 1px solid var(--linha);
}

.rodape-int {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--tinta-fraca);
}

.rodape-int .marca {
  font-size: 14px;
}

.rodape-dir {
  margin-left: auto;
  display: flex;
  gap: 18px;
}

.rodape a {
  text-decoration: none;
}

.rodape a:hover {
  color: var(--tinta);
}

/* --- entrada suave -------------------------------------------------------- */

/*
  Aparece ao rolar. Sem biblioteca: um `IntersectionObserver` de dez linhas
  troca uma classe, e o CSS faz o resto.

  ⚠️ O estado inicial é aplicado por JS (`.js-anim` no `<html>`), NUNCA aqui.
  Escrever `opacity: 0` direto deixaria a página inteira invisível para quem
  abre com JavaScript desligado ou enquanto o script não carregou.
*/
.js-anim .surge {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--atraso, 0s);
}

.js-anim .surge.dentro {
  opacity: 1;
  transform: none;
}

/*
  Variantes com direção: o texto entra do seu lado, a gravação do dela.
  Mesma regra de segurança do `.surge` — o estado escondido só existe sob
  `.js-anim`, então sem JavaScript tudo nasce visível.
*/
.js-anim .surge-l {
  opacity: 0;
  transform: translateX(-22px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--atraso, 0s);
}

.js-anim .surge-r {
  opacity: 0;
  transform: translateX(22px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--atraso, 0s);
}

.js-anim .surge-l.dentro,
.js-anim .surge-r.dentro {
  opacity: 1;
  transform: none;
}

/*
  A barra de comparação ENCHE quando o cartão aparece.

  A largura mora em `--cheio` (vem do dado medido, escrito no HTML); o valor
  base vale sempre — sem JavaScript a barra já nasce cheia — e com animação ela
  parte de zero junto com o número que conta. Ver a diferença crescer é o
  argumento inteiro da seção em meio segundo.
*/
.c-barra i {
  width: var(--cheio, 100%);
}

.js-anim .c-barra i {
  width: 0;
  transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}

.js-anim .surge.dentro .c-barra i {
  width: var(--cheio, 100%);
}

/* --- telas estreitas ------------------------------------------------------ */

@media (max-width: 860px) {
  /*
    As seções de recurso empilham: texto primeiro, gravação depois — inclusive
    nas invertidas, porque em coluna única "alternar" não existe e a ordem que
    faz sentido é sempre ler a promessa e ver a prova.
  */
  .feat,
  .feat.invertida {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .feat.invertida .feat-texto {
    order: 1;
  }

  .feat.invertida .gravacao {
    order: 2;
  }

  .comp,
  .comp-3 {
    grid-template-columns: 1fr;
  }

  /*
    No celular a tabela é o rótulo brigando com o número.

    Sem piso de largura a primeira coluna encolhe até "Quanto mais caro que o
    Edev" virar quatro linhas, e a tabela fica alta demais para o que ela diz.
    O piso é o suficiente para caber duas linhas, e o que sobra continua indo
    para a rolagem lateral da própria caixa.
  */
  .tabela th[scope='row'] {
    min-width: 124px;
  }

  .tabela th,
  .tabela td {
    padding: 10px 12px;
  }

  .sobre {
    grid-template-columns: 1fr;
  }

  .retrato {
    max-width: 220px;
  }

  .menu {
    display: none;
  }
}

/*
  Os mascotes do Claude Code — arte de pixel, e por isso SEM moldura.

  A `.gravacao` põe borda, fundo e raio porque emoldura um print de tela: ali a
  moldura diz "isto é uma janela". Estes bonecos têm fundo transparente e
  contorno branco próprio; dentro de um retângulo com borda eles pareceriam um
  print de outra coisa, que é exatamente o oposto do que são.

  `image-rendering: pixelated` NÃO é enfeite: o arquivo tem 1100px e é exibido
  em até ~560px. Sem isto o navegador interpola ao reduzir, e a arte de pixel —
  cuja graça inteira é a borda dura do quadrado — vira borrão.
*/
/*
  Fundo branco que some, sem recortar o arquivo.

  ── Por que não dá para recortar ──

  A imagem veio com o quadriculado de transparência GRAVADO nos pixels: 3
  canais, nenhum alfa. E não dá para apagar o fundo por cor, porque o contorno
  branco dos adesivos e o branco do xadrez são exatamente o mesmo tom — medido:
  os dois em 254. Um preenchimento a partir da borda levou os dois juntos e os
  bonecos ficaram sem contorno.

  ── O que funciona ──

  `multiply` multiplica cada canal pelo fundo. Branco (255) é o elemento neutro
  dessa conta: 255 × papel = papel, então todo o branco do arquivo VIRA o papel
  e desaparece. A arte é escura o bastante para atravessar quase intacta — o
  papel é #faf9f5, a 2% do branco puro, então o tingimento é imperceptível.

  Isto depende do papel ser claro. Num fundo escuro, `multiply` apagaria a arte
  junto; ali o caminho seria um arquivo com alfa de verdade.
*/
.mascotes {
  margin: 0;
  display: grid;
  place-items: center;
}

.mascotes img {
  width: 100%;
  height: auto;
  /* 520 + 10%. O par no @media abaixo sobe junto. */
  /* 572 + 10%. O par no @media abaixo sobe junto. */
  max-width: 629px;
  /*
    Sem `mix-blend-mode: multiply`.

    Ele existia para esconder o fundo branco que vinha embutido no arquivo — e
    o preço era a arte inteira escurecer junto com o fundo da seção. O arquivo
    agora tem alfa de verdade, então o truque saiu.
  */
  /* Sem isto o navegador interpola ao reduzir 1100 -> 520 e a arte de pixel,
     cuja graça inteira é a borda dura do quadrado, vira borrão. */
  image-rendering: pixelated;
}

@media (max-width: 900px) {
  .mascotes img { max-width: 484px; }
}

/* ── A seção do motor respira mais que as outras ──────────────────────────

   Ela é a afirmação central da página, e por isso ganha tratamento próprio:
   faixa mais larga, título maior e a arte maior.

   As contas, porque elas competem entre si — título maior come a largura que
   a imagem quer. Medido nesta fonte: "Claude Code. E ele é seu." pede 558px a
   52px. Com a faixa em 1240 e as colunas em 1fr 1fr sobram ~570px para cada
   lado: o título cabe em duas linhas e a imagem ainda cresce de 520 para 580.
   Na faixa antiga de 1080 não havia como ter os dois — o título a 52px
   espremia a imagem para 422px. */
/* O que sobra de específico do motor: só a arte, que tem teto próprio porque
   é pixel art e passar de 580 começa a mostrar o serrilhado.

   O resto — faixa de 1240, colunas 1fr 1fr, h2 a 52px — subiu para as regras
   gerais e vale para todas as seções. */
@media (min-width: 861px) {
  /*
    Os 10% a mais saem da MARGEM da página, não da coluna do texto.

    A figura estava presa pela coluna (570px), e não pelo teto — subir só o
    `max-width` não mexia num pixel. Estreitar a coluna do texto para 514
    resolveria, mas quebra o título em três linhas: com o `<br>` manual ele
    não cabe, e sem o `<br>` o navegador parte "Claude / Code" no meio do nome
    do produto. Medido, os dois.

    A faixa central deixa 124px de margem de cada lado nesta largura. A arte é
    decorativa e pode avançar sobre ela — o texto não se mexe, o título fica em
    duas linhas, e a imagem cresce os 10%.
  */
  #motor .mascotes {
    /*
      Avança só o que a margem der, e nunca mais que 56px.

      Fixo em -56px isto VAZAVA: a faixa central tem 1240, então abaixo de
      ~1352px de janela não existe margem para invadir — e o resultado era
      barra de rolagem horizontal em 1280 e em 1024. Medido.

      A conta é a metade da sobra da janela sobre a faixa, menos 8px de
      respiro para a arte não encostar na borda da tela.
    */
    margin-right: calc(-1 * min(56px, max(0px, (100vw - var(--largura)) / 2 - 8px)));
  }

  #motor .mascotes img {
    /* 580 + 10%. O 580 vinha de "acima disso a arte de pixel serrilha", e a
       fonte foi reaparada de 1100 para 862px — 638 continua sendo REDUÇÃO. */
    max-width: 638px;
  }
}

/* No celular a coluna é estreita: a quebra forçada só atrapalharia o
   text-wrap: balance, que ali resolve melhor sozinho. */
/* O espaço ANTES do <br> no HTML não é descuido: sem ele, com o <br>
   escondido, "o" e "Claude" colam e viram "oClaude". */
@media (max-width: 900px) {
  .quebra-larga { display: none; }
}

/* A coluna cresceu; a MEDIDA não pode crescer junto.

   Alargar a faixa para o título caber em duas linhas esticou o parágrafo para
   ~90 caracteres por linha. Acima de ~75 o olho perde o começo da linha
   seguinte, e o texto fica cansativo mesmo sendo curto. O título pode usar a
   largura toda; a prosa, não. */
@media (min-width: 861px) {
  .feat-texto > p,
  .feat-lista {
    max-width: 50ch;
  }
}


/* --- ver mais detalhes ----------------------------------------------------- */

/*
  `<details>` NATIVO, e não uma div com clique.

  Ele abre no Enter, é anunciado como expansível pelo leitor de tela e funciona
  antes de qualquer script carregar. Uma div com `onclick` não faz nenhuma das
  três — e esta é a parte da página em que a pessoa está conferindo número, que
  é justamente quando ninguém aceita um controle que não responde.
*/
.mais {
  margin-top: 18px;
}

.mais-abrir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-alto);
  color: var(--tinta-media);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}

/* O triângulo padrão do navegador sai — a seta desenhada é a que gira. */
.mais-abrir::-webkit-details-marker {
  display: none;
}

.mais-abrir:hover,
.mais-abrir:focus-visible {
  border-color: var(--acento);
  color: var(--acento-tinta);
  background: var(--acento-fundo);
}

.mais-abrir svg {
  transition: transform 0.18s ease;
}

.mais[open] .mais-abrir svg {
  transform: rotate(180deg);
}

.mais[open] .mais-abrir {
  border-radius: var(--raio) var(--raio) 0 0;
  border-bottom-color: transparent;
}

.mais-corpo {
  padding: 4px 0 0;
  border: 1px solid var(--linha);
  border-top: 0;
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--papel-alto);
}

/*
  A tabela ROLA DENTRO DA PRÓPRIA CAIXA.

  Quatro colunas de número não cabem em 375px, e a alternativa que o navegador
  escolhe sozinho é fazer a PÁGINA rolar de lado — o que estraga a leitura do
  site inteiro por causa de um bloco.
*/
.tabela-rolo {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tabela th,
.tabela td {
  padding: 11px 16px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--linha);
}

.tabela thead th {
  position: sticky;
  top: 0;
  background: var(--poco);
  color: var(--tinta);
  font-weight: 600;
  font-size: 13px;
}

/* A primeira coluna é o rótulo da linha: ela é texto, e alinha à esquerda. */
.tabela th[scope='row'],
.tabela thead th:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--tinta-media);
  white-space: normal;
}

.tabela td {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--tinta);
}

/* A coluna que ganha é a única com cor — colorir três é não destacar nenhuma. */
.tabela .melhor {
  color: var(--acento);
}

.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.mais-corpo .metodo {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--linha);
  border-radius: 0;
}

/*
  Texto que só o leitor de tela lê.

  O `<caption>` da tabela existe para quem navega sem ver a seção em volta —
  na tela ele repetiria o título que já está logo acima.
*/
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --- os três sites, sem etiqueta ------------------------------------------- */

.cegos {
  margin-top: 34px;
}

.cegos-topo h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  color: var(--tinta);
}

.cegos-topo p {
  margin: 0 0 16px;
  max-width: 62ch;
  color: var(--tinta-media);
  font-size: 15px;
  line-height: 1.6;
}

.cegos-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/*
  Os três cartões são IGUAIS entre si, de propósito.

  Qualquer diferença — ordem de cor, um com selo, um maior — vira dica, e a
  única coisa que este bloco não pode fazer é sugerir de quem é qual. Cor,
  peso, tamanho e texto são os mesmos nos três; só a letra muda.
*/
.cego {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-alto);
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.cego:hover,
.cego:focus-visible {
  border-color: var(--acento);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgb(25 25 23 / 7%);
}

.cego-letra {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--acento);
}

.cego-nome {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}

.cego-abrir {
  font-size: 13px;
  color: var(--tinta-fraca);
}

.cego:hover .cego-abrir,
.cego:focus-visible .cego-abrir {
  color: var(--acento-tinta);
}

@media (prefers-reduced-motion: reduce) {
  .cego:hover,
  .cego:focus-visible {
    transform: none;
  }
}

@media (max-width: 860px) {
  .cegos-grade {
    grid-template-columns: 1fr;
  }
}