/* =============================================================================
   HOTSITE /tech — direção de arte

   ESTA É A SEGUNDA VERSÃO, e ela existe porque a primeira tinha praticamente
   todos os sinais de página gerada por IA. Vale registrar quais eram, porque é
   o que impede a terceira de voltar para lá:

     - grotesca neutra no título e Inter no corpo (= "Inter para tudo");
     - fundo quase-preto azulado com um acento — a paleta `slate-900` de tutorial;
     - rótulo monoespaçado em CAIXA ALTA com um tracinho antes, em toda seção;
     - corpo em 17px, rótulo em 11,5px, texto de cartão em 14,5px;
     - todas as seções no mesmo container, mesma margem, mesma medida de texto;
     - grade de quatro cartões iguais para os produtos.

   O QUE ORGANIZA ESTA VERSÃO

   1. A TIPOGRAFIA É A DO SITE: Inter, a mesma do institucional, e só ela.
      Uma versão intermediária usou serifa de alto contraste nos títulos e foi
      recusada por fugir da linha da marca. O que ficou daquela tentativa foi o
      TAMANHO — que era o problema de verdade —, e não a fonte.

   2. TAMANHO DE GENTE. Corpo em 19px, nada abaixo de 16px na página inteira, e
      manchete que chega a 112px.

   3. RITMO DESIGUAL. Três larguras de container e três tratamentos de seção
      (tinta, papel, foto). Seção seguida de seção igual é o que faz a página
      parecer gerada; a variação precisa ser intencional e visível.

   4. TINTA COM VIÉS VERDE. O fundo não é o azul-ardósia de biblioteca de
      componentes: é um quase-preto puxado para o verde, vizinho do petróleo da
      marca. E há seções em PAPEL, claras, para a página respirar.

   5. O RÓTULO DE SEÇÃO É O DA CASA. Copiado do `.team-subtitle` do site
      institucional: 18px, caixa alta, 2px de entrelinha, peso 600. Não é o
      eyebrow monoespaçado genérico, e por ser 18px também não volta a ser o
      rótulo de 11px da primeira versão.
   ========================================================================== */

:root {
  /* Tinta com viés verde, não o azul-ardósia dos tutoriais. */
  --tinta: #0a1512;
  --tinta-2: #0f1f1b;

  /* Papel frio e levemente verde. Não é o creme quente que virou assinatura de
     página gerada — é um branco de ambiente clínico. */
  --papel: #e9edeb;

  --texto: #f2f6f4;
  --texto-2: #9db0aa;
  --texto-3: #6c817b;

  --escuro: #0a1512;
  --escuro-2: #35524b;

  --linha: rgba(255, 255, 255, 0.1);
  --linha-forte: rgba(255, 255, 255, 0.22);
  --linha-papel: rgba(10, 21, 18, 0.14);

  --teal: #49c3ce;
  --teal-fundo: #05636c;

  --larg: 1240px;
  --larg-amplo: 1480px;
  --larg-texto: 760px;
  --gutter: clamp(22px, 5vw, 64px);

  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--teal);
  color: #04201f;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

/* --- Barra de rolagem --------------------------------------------------- */

/* A barra padrão do Windows é branca e larga, e numa página de fundo escuro ela
   fica como uma faixa clara colada na borda — a primeira coisa que entrega que o
   site não foi acabado.

   São duas sintaxes porque ainda são dois mundos: `scrollbar-color` é o padrão
   (Firefox e navegadores novos) e `::-webkit-scrollbar` é o que Chrome, Edge e
   Safari de fato obedecem hoje. Declarar só uma deixa metade dos visitantes com
   a barra branca. */
html {
  /* `color-scheme: dark` é o que faz o navegador pintar TUDO o que é nativo no
     tom da página: barra de rolagem, controles de formulário, preenchimento
     automático, menu de contexto. Sem ele, cada um desses aparece claro por
     padrão e denuncia que o escuro é só tinta por cima. Também evita o clarão
     branco entre a chegada do HTML e a do CSS. */
  color-scheme: dark;
  scrollbar-color: #2c4a44 var(--tinta);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--tinta);
}

::-webkit-scrollbar-thumb {
  background: #2c4a44;
  border-radius: 99px;
  /* A borda da mesma cor do fundo é o truque que afina o polegar sem afinar a
     área de clique: o alvo continua com 11px, o desenho fica com 5. */
  border: 3px solid var(--tinta);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--teal);
}

::-webkit-scrollbar-corner {
  background: var(--tinta);
}

/* Nas seções em papel a barra continua escura: ela pertence à janela inteira, e
   não à seção que está passando — trocar de cor no meio da rolagem piscaria. */

/* --- Containers: três larguras, e isso é proposital -------------------- */

.env {
  width: 100%;
  max-width: var(--larg);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.env--amplo {
  max-width: var(--larg-amplo);
}

/* Medida de leitura de verdade. Parágrafo longo jogado na largura inteira do
   container cansa e denuncia layout automático. */
.env--texto {
  max-width: var(--larg-texto);
}

/* --- Tipografia -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 400;
}

h1,
h2 {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(40px, 6.4vw, 82px);
}

h2 {
  font-size: clamp(31px, 4.2vw, 54px);
}

h3 {
  font-family: var(--sans);
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Copiado do `.team-subtitle` do site institucional — a convenção que o site
   já usa em "NOSSA EQUIPE" e "CONTATO". */
.entrada {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--teal);
  margin: 0 0 16px;
}

.papel .entrada {
  color: var(--teal-fundo);
}

.chapeu {
  color: var(--texto-2);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  max-width: 56ch;
  margin-top: 24px;
}

.papel .chapeu {
  color: var(--escuro-2);
}

.chapeu--centro {
  margin-inline: auto;
}

/* --- Navegação --------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 21, 18, 0.86);
  backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid var(--linha);
}

.topo .env {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
  max-width: var(--larg-amplo);
}

.topo img {
  height: 27px;
  width: auto;
}

.topo nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}

/* `:not(.botao)` impede a colisão de cascata: `.topo nav a` tem especificidade
   maior que `.botao--cheio` e pintava o botão de cinza sobre verde-água. */
.topo nav a:not(.botao) {
  font-size: 16px;
  color: var(--texto-2);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.topo nav a:not(.botao):hover {
  color: var(--texto);
  border-bottom-color: var(--teal);
}

/* --- Botões ------------------------------------------------------------ */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  border-radius: 0;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
  white-space: nowrap;
}

.botao--cheio {
  background: var(--teal);
  color: #04201f;
}

.botao--cheio:hover {
  background: #7ddbe4;
  transform: translateY(-2px);
}

.botao--linha {
  border-color: var(--linha-forte);
  color: var(--texto);
}

.botao--linha:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.papel .botao--linha {
  border-color: var(--linha-papel);
  color: var(--escuro);
}

.papel .botao--linha:hover {
  border-color: var(--teal-fundo);
  color: var(--teal-fundo);
}

/* --- Capa -------------------------------------------------------------- */

/* CENTRALIZADA NA VERTICAL, e não empurrada por padding.

   Antes a altura vinha de um padding assimétrico (210px em cima, 150px embaixo),
   o que jogava o bloco para baixo do centro óptico. Agora a seção tem altura
   própria e o conteúdo é centralizado nela: o resultado não depende de quantas
   linhas a manchete ocupa naquele idioma ou naquela largura de tela. */
.capa {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* 100% DA TELA VISÍVEL, descontado o menu fixo.

     `100dvh` e não `100vh`: no celular, `vh` é calculado com a barra do
     navegador RECOLHIDA, então a capa nasce mais alta que a tela e o botão fica
     escondido embaixo até a pessoa rolar. `dvh` acompanha a altura real.

     O `- 76px` desconta a altura do menu fixo: sem isso a capa tem a altura
     inteira da janela E o menu por cima, o que empurra o conteúdo para baixo do
     centro óptico e faz sobrar um vazio no rodapé da primeira tela. */
  min-height: calc(100dvh - 76px);
  padding-block: clamp(56px, 6vw, 88px);
  border-bottom: 1px solid var(--linha);
}

.capa .env {
  width: 100%;
  max-width: var(--larg-amplo);
}

.capa__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("img/hero.jpg");
  background-size: cover;
  background-position: 64% center;
}

.capa__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(10, 21, 18, 0.97) 0%, rgba(10, 21, 18, 0.9) 40%, rgba(10, 21, 18, 0.4) 100%),
    linear-gradient(to bottom, rgba(10, 21, 18, 0.8) 0%, rgba(10, 21, 18, 0) 28%, rgba(10, 21, 18, 0.75) 100%);
}

.capa h1 {
  max-width: 13ch;
}

.capa .chapeu {
  max-width: 46ch;
  font-size: clamp(19px, 1.6vw, 23px);
}

.capa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
}

/* --- Seções ------------------------------------------------------------ */

/* Três tratamentos, e o ritmo vem de alterná-los. Página inteira no mesmo
   tratamento é o que faz seção depois de seção parecer a mesma seção. */
/* O teto foi de 150px para 96px. Em monitor largo o `10vw` batia no teto e
   sobravam 150px em cima e 150px embaixo de cada seção — a página virava um
   corredor vazio entre blocos de texto. */
.secao {
  padding-block: clamp(56px, 6vw, 96px);
}

.secao--tinta {
  background: var(--tinta);
  border-bottom: 1px solid var(--linha);
}

.papel {
  background: var(--papel);
  color: var(--escuro);
}

.papel h1,
.papel h2,
.papel h3 {
  color: var(--escuro);
}

.secao--folga {
  padding-block: clamp(72px, 8vw, 128px);
}

/* O limite tem de ficar no TÍTULO, não no bloco. Com `max-width` na cabeça
   inteira o parágrafo herdava a mesma medida curta do título e descia numa
   coluna de 24 caracteres — que parece defeito, e era. */
.cabeca {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.cabeca h2 {
  max-width: 18ch;
}

.cabeca .chapeu {
  max-width: 52ch;
}

/* Cabeça deslocada: o título ocupa as primeiras colunas e o texto de apoio
   começa depois de um vão. Quebra o alinhamento único à esquerda sem virar
   bagunça. */
.cabeca--deslocada {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}

.cabeca--deslocada > :first-child {
  grid-column: 1 / span 6;
}

.cabeca--deslocada > :last-child {
  grid-column: 8 / span 5;
  margin-top: 0;
}

/* --- Lista editorial de argumentos ------------------------------------- */

/* A grade de quatro cartões iguais é o clichê. Aqui são LINHAS, com numeral
   grande e régua entre elas. */
.linhas {
  border-top: 1px solid var(--linha-papel);
}

.linha {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr);
  gap: clamp(20px, 3.5vw, 56px);
  padding-block: clamp(22px, 2.2vw, 32px);
  border-bottom: 1px solid var(--linha-papel);
  align-items: start;
}

.linha__titulo {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  align-items: baseline;
}

.linha__num {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal-fundo);
  line-height: 1;
  flex: none;
}

.linha h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.linha p {
  color: var(--escuro-2);
  font-size: clamp(17px, 1.4vw, 19px);
  max-width: 54ch;
}

.secao--tinta .linhas,
.secao--tinta .linha {
  border-color: var(--linha);
}

.secao--tinta .linha__num {
  color: var(--teal);
}

.secao--tinta .linha p {
  color: var(--texto-2);
}

/* --- Movimentos da tecnologia: escada, não três colunas iguais --------- */

/* O ESCALONAMENTO VERTICAL SAIU.

   A ideia era fugir das três colunas de mesma altura — a forma mais
   reconhecível de "seção de features". Só que descer a segunda 80px e a terceira
   160px abria um vazio em degrau embaixo da primeira coluna que não dizia nada:
   parecia erro de layout, e não composição.

   A régua no topo de cada coluna resolve os dois lados: dá estrutura gráfica
   onde antes havia só ar, e a primeira — mais grossa e em verde-água — marca
   que existe uma ORDEM entre os três, que era o que o escalonamento tentava
   dizer. */
.escada {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--linha);
}

.degrau {
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 36px) 0;
  border-left: 1px solid var(--linha);
  position: relative;
}

.degrau:first-child {
  border-left: 0;
  padding-left: 0;
}

.degrau:last-child {
  padding-right: 0;
}

/* A barra que atravessa o topo de cada coluna. A primeira é verde-água e as
   outras vão esmaecendo: o olho lê a sequência sem precisar de seta. */
.degrau::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
}

.degrau:first-child::before {
  left: 0;
}

.degrau:nth-child(2)::before {
  background: rgba(73, 195, 206, 0.55);
}

.degrau:nth-child(3)::before {
  background: rgba(73, 195, 206, 0.28);
}

.degrau__num {
  font-size: clamp(48px, 5.6vw, 82px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--teal);
  display: block;
  margin-bottom: 26px;
}

.degrau h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.degrau p {
  color: var(--texto-2);
  font-size: 18px;
}

/* --- Declaração: a frase é o objeto ------------------------------------ */

.declaracao {
  font-size: clamp(30px, 4.6vw, 62px);
  max-width: 18ch;
  text-wrap: balance;
}

.declaracao em {
  font-style: italic;
  color: var(--teal);
}

.papel .declaracao em {
  color: var(--teal-fundo);
}

/* --- Declaração com foto ------------------------------------------------ */

.declaracao-secao {
  position: relative;
  isolation: isolate;
  border-block: 1px solid var(--linha);
}

.declaracao-secao__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("img/p-expert.jpg") center right / cover;
}

/* Véu em PETRÓLEO (#05636C escurecido) e não em preto: preto sobre foto fria
   deixa a seção cinza e morta; o petróleo puxa a imagem para a cor da marca e
   amarra esta seção à capa. Forte à esquerda, onde o texto pousa, e quase
   transparente à direita, onde está a pessoa. */
.declaracao-secao__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(4, 38, 42, 0.97) 0%, rgba(4, 38, 42, 0.93) 38%, rgba(4, 38, 42, 0.55) 72%, rgba(4, 38, 42, 0.35) 100%);
}

.declaracao-secao .declaracao {
  max-width: 20ch;
}

.declaracao-secao .chapeu {
  max-width: 50ch;
}

/* --- Lista de afirmações ----------------------------------------------- */

.afirmacoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.afirmacoes li {
  padding-block: 26px;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 8px;
}

.afirmacoes li:last-child {
  border-bottom: 1px solid var(--linha);
}

.papel .afirmacoes li {
  border-color: var(--linha-papel);
}

.afirmacoes strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.afirmacoes span {
  color: var(--texto-2);
  font-size: 18px;
}

.papel .afirmacoes span {
  color: var(--escuro-2);
}

/* --- Duas colunas ------------------------------------------------------ */

.duas {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

/* --- Índice de produtos: lista editorial -------------------------------- */

/* Aqui morava a grade de oito cartões iguais. Virou lista: nome grande,
   descrição na segunda coluna, régua entre as linhas. No hover a linha
   inteira desliza — movimento com propósito, e não um fade genérico. */
.indice {
  border-top: 1px solid var(--linha);
}

.indice__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: clamp(20px, 4vw, 56px);
  align-items: baseline;
  padding-block: clamp(24px, 2.6vw, 34px);
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  transition: padding-left 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.3s;
}

.indice__item:hover {
  padding-left: clamp(12px, 1.6vw, 24px);
  background: rgba(73, 195, 206, 0.06);
}

.indice__nome {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.indice__nome span {
  color: var(--texto-3);
}

.indice__item p {
  color: var(--texto-2);
  font-size: 18px;
}

.indice__seta {
  color: var(--teal);
  font-size: 24px;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.indice__item:hover .indice__seta {
  transform: translateX(8px);
}

.papel .indice,
.papel .indice__item {
  border-color: var(--linha-papel);
}

.papel .indice__nome span {
  color: #8ea39d;
}

.papel .indice__item p {
  color: var(--escuro-2);
}

.papel .indice__seta {
  color: var(--teal-fundo);
}

/* --- Perguntas ---------------------------------------------------------- */

/* Duas colunas de perguntas, cada uma com a RESPOSTA à vista — sem acordeão.
   Acordeão esconde o texto atrás de um clique, e mecanismo generativo cita o que
   está no HTML visível. Nesta página, ser legível por máquina é requisito. */
.perguntas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}

.pergunta {
  background: var(--tinta);
  padding: clamp(26px, 3vw, 38px);
}

.pergunta h3 {
  margin-bottom: 12px;
  max-width: 34ch;
}

.pergunta p {
  color: var(--texto-2);
  font-size: 17px;
}

/* --- Implantação: as negações e a trilha ------------------------------- */

/* AS TRÊS NEGAÇÕES.

   A objeção número um de uma operadora não é preço: é quanto tempo o TI dela vai
   gastar. Então a resposta vem em tamanho de manchete e ANTES das etapas.

   O "Sem" fica em petróleo e o resto em tinta cheia — cor é mais rápida de ler
   que negrito, e a negação é o que interessa. */
.negacoes {
  list-style: none;
  margin: 0 0 clamp(34px, 4vw, 52px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha-papel);
  border-block: 1px solid var(--linha-papel);
}

.negacoes li {
  background: var(--papel);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  /* `balance` porque as três frases têm comprimentos diferentes: sem ele uma
     quebra em duas linhas e as vizinhas ficam em uma, e a fileira sai torta. */
  text-wrap: balance;
  /* SEM `display: flex` aqui.

     Centralizar na vertical com flex parecia inofensivo e engoliu o espaço entre
     `<span>Sem</span>` e o texto seguinte: em contexto flex, o espaço em branco
     entre dois itens não vira item, ele some. O resultado foi "Semmigração".
     O bloco normal preserva o fluxo inline, e a altura igual já vem do grid. */
}

.negacoes span {
  color: var(--teal-fundo);
}

/* A TRILHA.

   UM TRILHO CONTÍNUO, e não um traço por etapa.

   A versão anterior desenhava um segmento saindo de cada nó E separava as colunas
   com divisória vertical. As duas coisas se cruzavam: o traço horizontal batia na
   régua vertical e parava ali, então a ligação parecia interrompida em cada
   coluna — exatamente o contrário do que um trilho precisa comunicar.

   Agora a linha é UMA SÓ, desenhada pela própria lista, passando POR TRÁS dos
   três nós. E as divisórias verticais saíram: com o trilho ligando as etapas, elas
   viraram ruído — os próprios nós marcam onde uma termina e a outra começa.

   A GEOMETRIA É EXATA, não aproximada: com três colunas iguais e sem `gap`, o
   centro do primeiro nó fica a 22px da borda (metade dos 44px do círculo) e o do
   terceiro a 66,667% + 22px. Daí `left: 22px` e `width: 66.667%` — o trilho
   começa e termina exatamente no centro de um círculo, em qualquer largura de
   tela. */
.trilha {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.trilha::before {
  content: "";
  position: absolute;
  top: calc(clamp(24px, 2.6vw, 34px) + 22px);
  left: 22px;
  width: 66.667%;
  height: 2px;
  background: linear-gradient(to right, var(--teal-fundo), rgba(5, 99, 108, 0.3));
}

.trilha__etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 44px) clamp(20px, 2.2vw, 28px) 0;
}

.trilha__no {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal-fundo);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 22px;
  flex: none;
  /* O anel na cor do papel abre um respiro entre o círculo e o trilho que passa
     por trás. Sem ele a linha encosta no círculo e os dois viram uma massa só. */
  box-shadow: 0 0 0 6px var(--papel);
}

.trilha h3 {
  margin-bottom: 10px;
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 700;
}

.trilha p {
  color: var(--escuro-2);
  font-size: 16.5px;
  line-height: 1.5;
  max-width: 34ch;
}

/* `margin-top: auto` empurra o selo para a base da coluna. Sem isso ele acompanha
   o fim do parágrafo, e como os três têm comprimentos diferentes os selos ficavam
   em três alturas. */
.trilha__prazo {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-fundo);
}

.trilha__prazo::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--teal-fundo);
  vertical-align: middle;
  margin-right: 9px;
}

/* --- Faixa de foto ----------------------------------------------------- */

/* Foto sangrando de borda a borda, sem container. É o respiro da página e o que
   quebra a sequência de blocos de texto. */
.faixa-foto {
  position: relative;
  isolation: isolate;
  height: clamp(240px, 28vw, 400px);
  background-size: cover;
  background-position: center;
  /* SEM `border-block`. A régua de 1px em branco a 10% existia para separar a
     faixa das seções vizinhas — mas o degradê passou a fazer isso melhor, e a
     borda de baixo, sobre um degradê quase preto, virava um traço claro
     atravessando a página. Duas soluções para o mesmo problema se estorvando. */
}

/* O VÉU EM DEGRADÊ.

   Sem ele a foto entra em brilho cheio entre duas seções e vira um bloco colado
   no meio da página — começa e termina com corte seco.

   O degradê é forte nas BORDAS e leve no MEIO, e não de cima para baixo: em
   cima a faixa encosta na seção em papel e embaixo na seção em tinta, então os
   dois extremos precisam escurecer para a imagem derreter nos vizinhos. O meio
   fica claro porque é onde estão os monitores — escurecer ali seria esconder
   justamente o que a faixa existe para mostrar.

   A cor é o petróleo da marca (#04262A), não preto: preto sobre foto fria deixa
   a faixa cinza e sem relação com o resto da página. */
.faixa-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      to bottom,
      rgba(4, 38, 42, 0.88) 0%,
      rgba(4, 38, 42, 0.34) 26%,
      rgba(4, 38, 42, 0.22) 52%,
      rgba(4, 38, 42, 0.6) 82%,
      /* Opaco e na cor EXATA de `--tinta`, que é o fundo da seção logo abaixo.
         A 0,96 sobrava 4% da foto aparecendo na emenda — uma faixa de meio tom
         de um pixel, que o olho lê como risco. */
      rgb(10, 21, 18) 100%
    ),
    linear-gradient(to right, rgba(4, 38, 42, 0.5) 0%, rgba(4, 38, 42, 0) 22%, rgba(4, 38, 42, 0) 78%, rgba(4, 38, 42, 0.5) 100%);
}

/* A faixa que mostra o sistema pede mais altura e enquadramento pelo alto: o
   interesse está nos monitores, que ficam no terço superior da foto. A faixa
   comum, centralizada, cortaria as telas ao meio. */
.faixa-foto--sistema {
  height: clamp(300px, 34vw, 520px);
  background-position: center 38%;
}

/* --- Chamada final ----------------------------------------------------- */

.convite {
  position: relative;
  isolation: isolate;
  padding-block: clamp(72px, 8vw, 128px);
  border-bottom: 1px solid var(--linha);
}

.convite .env {
  max-width: var(--larg-amplo);
}

.convite__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("img/convite.jpg") center/cover;
}

.convite__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 21, 18, 0.92), rgba(10, 21, 18, 0.86));
}

.convite h2 {
  max-width: 16ch;
}

.convite__acoes {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 42px;
}

/* --- Rodapé ------------------------------------------------------------ */

/* Rodapé de página comercial tem duas funções: dar saída para quem chegou ao fim
   sem clicar em nada, e dizer como falar com gente. A versão anterior era uma
   linha com três links — ocupava o espaço sem fazer nem uma nem outra. */
.rodape {
  padding-block: clamp(56px, 6vw, 84px) 0;
  font-size: 16px;
  color: var(--texto-2);
  background: var(--tinta-2);
  border-top: 1px solid var(--linha);
}

.rodape .env {
  max-width: var(--larg-amplo);
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 0.9fr)) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.rodape__marca img {
  height: 30px;
  width: auto;
  margin-bottom: 22px;
}

.rodape__marca p {
  color: var(--texto-3);
  font-size: 16px;
  max-width: 38ch;
  line-height: 1.55;
}

.rodape__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.rodape__col h3 {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--texto-3);
  margin-bottom: 6px;
}

.rodape__col a {
  color: var(--texto-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.rodape__col a:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.rodape__contato p {
  color: var(--texto-3);
  font-size: 15px;
  line-height: 1.5;
}

/* O botão do rodapé não herda a borda animada dos links da coluna. */
.rodape__col .botao {
  margin-top: 10px;
  border-bottom: 0;
  color: #04201f;
}

.rodape__col .botao:hover {
  border-bottom: 0;
  color: #04201f;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  align-items: center;
  padding-block: 24px;
  border-top: 1px solid var(--linha);
  font-size: 15px;
  color: var(--texto-3);
}

.rodape__legais {
  margin-left: auto;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.rodape__legais a {
  color: var(--texto-3);
  text-decoration: none;
}

.rodape__legais a:hover {
  color: var(--teal);
}

/* --- WhatsApp flutuante ------------------------------------------------- */

/* Mesmo componente do site institucional, na cor da marca.

   O verde oficial do WhatsApp (#25D366) brigaria com a paleta inteira desta
   página — e o ícone já diz qual é o canal sem a cor precisar repetir.

   `z-index: 900` é herdado do original e existe por um motivo: acima do
   conteúdo, abaixo do menu fixo (50 aqui, mas 1000 no institucional) e abaixo do
   banner de cookies, para o botão nunca flutuar por cima de um overlay. */
.zap-flutuante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--teal);
  color: #04201f;
  font-size: 33px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.zap-flutuante:hover,
.zap-flutuante:focus-visible {
  background: #7ddbe4;
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}

/* O ícone do Font Awesome traz line-height próprio; zerar evita o deslocamento
   de ~2px dentro do círculo. */
.zap-flutuante i {
  line-height: 1;
}

@media (max-width: 560px) {
  .zap-flutuante {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    font-size: 29px;
  }
}

/* --- Página de produto -------------------------------------------------- */

/* A capa de produto é mais baixa: quem chega aqui já escolheu o assunto e quer o
   conteúdo, não outra abertura de tela cheia. */
.capa--produto {
  min-height: min(70vh, 660px);
  padding-block: clamp(64px, 8vw, 104px);
}

.capa--produto h1 {
  font-size: clamp(40px, 6.6vw, 84px);
  max-width: 15ch;
}

.selo-produto {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--teal);
  margin: 0 0 20px;
}

/* --- Entrada ----------------------------------------------------------- */

/* A página nasce visível: nada parado em opacity 0 esperando observador. Só a
   capa anima, e a partir da própria animação. */
@keyframes sobe {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.capa .entrada,
.capa .selo-produto {
  animation: sobe 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.capa h1 {
  animation: sobe 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.07s both;
}

.capa .chapeu {
  animation: sobe 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.14s both;
}

.capa__acoes {
  animation: sobe 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.21s both;
}

/* --- Entrada dos itens conforme o scroll -------------------------------- */

/* CSS PURO, com `animation-timeline: view()`. Nada de IntersectionObserver.

   A regra que organiza isto é a mesma do resto da página: NINGUÉM NASCE
   INVISÍVEL. O padrão de mercado — marcar tudo com `opacity: 0` e devolver a
   opacidade por JavaScript quando o observador dispara — tem três modos de
   falha reais: JavaScript que não carrega, quem chega com âncora no meio da
   página, e o rastreador que lê o HTML sem executar script. Nos três o texto
   some.

   Aqui o `opacity: 0` mora DENTRO de `@supports`, ou seja, só existe no
   navegador que sabe animá-lo de volta. Onde o recurso não existe, a regra
   inteira é ignorada e a página aparece pronta.

   `animation-range: entry 10% cover 32%` faz a animação acontecer na ENTRADA do
   elemento e terminar cedo — o item fica legivel bem antes de chegar ao centro
   da tela. Item que já está visível no carregamento nasce no fim da faixa, ou
   seja, opaco. */
@keyframes entraNoScroll {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* A ENTRADA HORIZONTAL DA LISTA.

   As duas metades da linha deslizam de lados OPOSTOS e se encontram — o título
   vem da esquerda, o texto da direita. A direção não é decorativa: ela repete a
   própria estrutura da linha, que é título à esquerda e explicação à direita.
   Deslizar tudo do mesmo lado seria movimento por movimento.

   O curso é curto (48px) e a faixa de animação termina cedo: o texto precisa
   estar parado e legível bem antes de chegar ao centro da tela. Efeito que ainda
   está se movendo quando a pessoa começa a ler é efeito que atrapalha. */
@keyframes entraEsquerda {
  from {
    opacity: 0;
    transform: translateX(-48px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entraDireita {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .linha__titulo {
      animation: entraEsquerda linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 28%;
    }

    .linha > p {
      animation: entraDireita linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* `.linha` NÃO está nesta lista de propósito: ela tem entrada própria, pelas
       duas metades deslizando na horizontal. Deixar as duas animações ativas
       fazia o filho herdar o `translateY` do pai e o movimento saía na diagonal
       — e tentar desligar com `.linha { animation: none }` no bloco de cima não
       resolvia, porque ESTE bloco vem depois e vence a cascata. */
    .degrau,
    .indice__item,
    .trilha__etapa,
    .negacoes li,
    .afirmacoes li,
    .faixa-foto {
      animation: entraNoScroll linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }

    /* Os degraus já nascem escalonados no eixo vertical; escalonar também a
       entrada faria a terceira coluna chegar tarde demais. */
    .degrau {
      animation-range: entry 5% cover 26%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .capa .entrada,
  .capa .selo-produto,
  .capa h1,
  .capa .chapeu,
  .capa__acoes {
    animation: none;
  }

  .indice__item,
  .indice__seta,
  .botao {
    transition: none;
  }
}

/* --- Telas médias ------------------------------------------------------- */

@media (max-width: 1000px) {
  .cabeca--deslocada {
    display: block;
  }

  .cabeca--deslocada > :last-child {
    margin-top: 24px;
  }

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

  .degrau,
  .degrau:first-child,
  .degrau:last-child {
    border-left: 0;
    padding-inline: 0;
    padding-bottom: clamp(28px, 4vw, 40px);
  }

  .degrau:not(:first-child) {
    border-top: 1px solid var(--linha);
  }

  .duas,
  .linha,
  .perguntas,
  .negacoes {
    grid-template-columns: 1fr;
  }

  /* A trilha vira vertical e a linha de ligação gira junto: ela passa a descer
     do nó em vez de atravessar para o lado. */
  .trilha {
    grid-template-columns: 1fr;
  }

  /* Vertical: o trilho desce do primeiro nó até o último, pela mesma lógica —
     começa no centro do primeiro círculo e termina no centro do terceiro. */
  .trilha::before {
    top: calc(clamp(24px, 2.6vw, 34px) + 22px);
    left: 21px;
    width: 2px;
    height: calc(100% - clamp(24px, 2.6vw, 34px) * 2 - 44px - clamp(20px, 2.2vw, 28px));
    background: linear-gradient(to bottom, var(--teal-fundo), rgba(5, 99, 108, 0.3));
  }

  .trilha__etapa {
    padding-inline: 0;
  }

  .trilha__prazo {
    margin-top: 16px;
    padding-top: 0;
  }

  .rodape__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape__marca {
    grid-column: 1 / -1;
  }

  .linha {
    gap: 16px;
  }

  .indice__item {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 10px;
  }

  .indice__item p {
    grid-column: 1 / -1;
  }

  .topo nav a:not(.botao) {
    display: none;
  }
}

/* --- Telas estreitas ---------------------------------------------------- */

@media (max-width: 560px) {
  .rodape__grade {
    grid-template-columns: 1fr;
  }

  body {
    font-size: 18px;
  }

  .topo .env {
    height: 64px;
    gap: 12px;
  }

  .topo .botao {
    padding: 10px 16px;
    font-size: 15px;
  }

  .topo img {
    height: 22px;
  }

  .linha__titulo {
    gap: 14px;
  }

  .capa__acoes .botao,
  .convite__acoes .botao {
    width: 100%;
    justify-content: center;
  }
}