/* =============================================================================
   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;
}

/* `clip` e não `hidden`, e em html E body.
   
   `overflow-x: hidden` só no body não segurava: num celular de 360px a página
   rolava 26px para o lado. A causa era a própria animação de entrada — os blocos
   começam em `translateX(±48px)` e, enquanto estão abaixo da dobra esperando a
   vez, ficam literalmente fora da tela.
   
   Efeitos colaterais: um vazamento de 26px desalinha a página inteira e faz o
   botão flutuante do canto parecer cortado, porque ele se ancora na largura da
   janela e não na do conteúdo.
   
   `clip` é melhor que `hidden` aqui porque não transforma o elemento em
   contêiner de rolagem — `position: sticky` lá dentro continua funcionando. */
html,
body {
  overflow-x: clip;
}

/* Navegador antigo que não conhece `clip` (iPhone com iOS 15 ou anterior): sem
   isto ele ignorava a trava inteira e a página abria afastada. Só no body, para
   o `sticky` do topo continuar valendo. */
@supports not (overflow: clip) {
  body {
    overflow-x: hidden;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* E a trava no próprio bloco que anima, para o excedente morrer na origem em vez
   de subir até o body. */
.linhas {
  overflow-x: clip;
}

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);
}

/* O botão de menu (três traços) — criado pelo menu.js, só aparece em tela
   estreita, onde os links do topo não cabem. */
.topo__menu {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.topo__menu span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--texto);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.topo--aberto .topo__menu span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.topo--aberto .topo__menu span:nth-child(2) {
  opacity: 0;
}

.topo--aberto .topo__menu span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.topo__menu:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 8px;
}

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

/* PÍLULA, com a mesma geometria redonda das setas do carrossel.

   A versão anterior era retângulo de canto vivo com texto solto: o cheio parecia
   um bloco de cor e o vazado, uma caixa de formulário — e os dois tinham pesos de
   fonte diferentes lado a lado. Agora os dois têm a MESMA altura e o mesmo peso,
   e se distinguem só pelo que devem: o cheio é a ação, o vazado é a alternativa.

   A seta do cheio mora num círculo escuro DENTRO da pílula. É desenhada em CSS
   (`::after`), e não no HTML, porque o botão aparece em treze páginas e no
   gerador dos produtos — um ícone no markup seria treze lugares para esquecer. */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.3s, transform 0.25s;
  white-space: nowrap;
}

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

/* O CHEIO. Degradê curto na própria cor (não um segundo matiz), filete de luz
   no topo e um halo petróleo embaixo: é o que dá volume sem virar botão de app. */
.botao--cheio {
  padding: 0 7px 0 26px;
  background: linear-gradient(180deg, #62d3dc 0%, var(--teal) 100%);
  color: #04201f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 34px -16px rgba(73, 195, 206, 0.75);
}

.botao--cheio::after {
  content: "";
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #04201f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349c3ce' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.botao--cheio:hover {
  background: linear-gradient(180deg, #86e0e7 0%, #5fcfd9 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 20px 40px -16px rgba(73, 195, 206, 0.9);
}

.botao--cheio:hover::after {
  transform: translateX(3px);
}

/* O VAZADO. Vidro leve em vez de só contorno: sobre foto escura, a borda fina
   sozinha sumia e o botão lia como texto. */
.botao--linha {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--texto);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.botao--linha:hover {
  background: rgba(73, 195, 206, 0.12);
  border-color: var(--teal);
  color: #fff;
}

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

.papel .botao--linha:hover {
  background: rgba(5, 99, 108, 0.06);
  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);
}

/* UMA LINHA POR PRODUTO.

   Duas das doze descrições passavam de 80 caracteres e quebravam — e uma lista
   em que dez linhas têm uma altura e duas têm outra perde o ritmo que faz a
   lista ser legível de relance. Foram todas encurtadas para caber num fôlego,
   e o corpo caiu de 18 para 17px dando folga em vez de depender da sorte. A
   página do produto é que explica; aqui é só o que ele é. */
.indice__item p {
  color: var(--texto-2);
  font-size: 17px;
}

.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 ---------------------------------------------------------- */

/* QUATRO COLUNAS, 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.

   Eram duas colunas com respostas de parágrafo inteiro, e a seção virou uma
   parede: quase uma tela de rolagem só de FAQ, com um número ímpar de perguntas
   deixando a última sozinha na fileira. Agora são oito perguntas — par, fecha
   duas fileiras de quatro sem buraco — e as respostas foram cortadas para caber
   no espaço que a coluna estreita oferece. O texto curto é consequência do
   formato, não resumo do formato anterior. */
.perguntas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}

.pergunta {
  background: var(--tinta);
  padding: clamp(20px, 2.1vw, 28px);
}

.pergunta h3 {
  font-size: clamp(17px, 1.35vw, 19px);
  margin-bottom: 10px;
  /* Sem `balance`: numa coluna estreita ele empurrava título de duas linhas
     para três, só para igualar o comprimento delas. */
  text-wrap: pretty;
}

.pergunta p {
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1.6;
}

/* --- 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(30px, 3.4vw, 46px);
  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(13px, 1.4vw, 19px) clamp(16px, 1.8vw, 24px);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  /* UMA LINHA, sempre.

     Antes era `text-wrap: balance`, e a frase mais longa quebrava em duas linhas
     enquanto as vizinhas ficavam em uma — a fileira inteira ganhava a altura da
     pior delas e a quebra parcial lia como descuido. As três frases foram
     encurtadas até caberem numa linha só, e `nowrap` com corpo fluido garante
     isso: em tela estreita a fonte diminui, ela não quebra. */
  white-space: nowrap;
  /* 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%;
}

/* --- Insights: foto de fundo + carrossel -------------------------------- */

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

.insights__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Nome novo e não o mesmo arquivo sobrescrito: o nginx serve imagem com cache
     de 30 dias, e quem já tinha visto a versão com faixas pretas continuaria
     vendo-a até lá. */
  background: url("img/insights-notebook.jpg") center / cover;
}

/* O véu é forte à DIREITA e leve à esquerda, ao contrário dos outros: nesta foto
   o notebook está do lado esquerdo, e é ele que precisa continuar visível. O texto
   pousa sobre a janela clara da direita, que é justamente a parte da imagem sem
   informação. */
.insights__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(80deg, rgba(4, 38, 42, 0.55) 0%, rgba(4, 38, 42, 0.72) 34%, rgba(4, 38, 42, 0.94) 62%, rgba(10, 21, 18, 0.97) 100%),
    linear-gradient(to bottom, rgba(10, 21, 18, 0.55) 0%, rgba(10, 21, 18, 0) 22%, rgba(10, 21, 18, 0.5) 100%);
}

.insights__conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* O texto ocupa a COLUNA DA DIREITA, deixando a esquerda para o notebook. */
.insights__texto {
  grid-column: 2;
}

.insights__texto .chapeu {
  max-width: 46ch;
}

/* --- Carrossel ---------------------------------------------------------- */

/* `min-width: 0` é obrigatório aqui, não é zelo.

   Item de grid nasce com `min-width: auto`, o que o impede de encolher abaixo do
   tamanho do conteúdo. Como as cartas são `flex: 0 0 100%`, a conta ficou
   circular: a carta quer 100% do trilho, o trilho quer caber as cartas, e o
   resultado medido num celular de 390px foi uma carta de 1350px vazando a tela.
   Com `min-width: 0` o trilho aceita a largura da coluna e o `overflow-x` volta a
   ser quem manda. */
.carrossel {
  grid-column: 2;
  min-width: 0;
}

.insights__texto {
  min-width: 0;
}

.carrossel__trilho {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.carrossel__trilho::-webkit-scrollbar {
  display: none;
}

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

/* Cada carta ocupa a largura inteira do trilho: uma de cada vez, sem meia carta
   espiando na borda — que é o que faz o leitor achar que perdeu alguma coisa. */
.carta {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* SEM CAIXA.

     A carta tinha fundo escurecido, desfoque e borda arredondada — um retângulo
     por cima de outro retângulo, disputando a atenção com o título logo acima e
     tapando a foto que a seção existe para mostrar. O véu da direita já é escuro
     o bastante para o texto branco ler, então a moldura não estava resolvendo
     contraste nenhum: era só moldura.

     O que separa uma carta da outra agora é o filete à esquerda e o número em
     petróleo — que é informação, não enfeite. */
  padding: 2px 0 2px clamp(16px, 1.8vw, 22px);
  border-left: 1px solid var(--linha-forte);
}

.carta__num {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--teal);
  margin-bottom: 14px;
}

/* `nowrap` no título com tamanho fluido: em vez de quebrar em duas linhas, ele
   diminui até caber. Rótulo de uma linha é o que mantém as quatro cartas com o
   mesmo desenho, e quebra de linha em rótulo curto sempre parece descuido. */
.carta h3 {
  font-size: clamp(18px, 1.9vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  white-space: nowrap;
}

.carta p {
  color: var(--texto-2);
  font-size: 17px;
  line-height: 1.55;
}

.carrossel__barra {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
}

.carrossel__pontos {
  display: flex;
  gap: 8px;
}

/* Alvo de 24px com desenho de 8px: o mesmo truque da barra de rolagem — o dedo
   acerta, o olho vê discreto. */
.carrossel__ponto {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrossel__ponto::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.carrossel__ponto.is-ativo::before {
  width: 26px;
  background: var(--teal);
}

.carrossel__setas {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* AS SETAS.

   A versão anterior era um quadrado de borda fina com o caractere ← dentro: a
   seta tipográfica tem o traço fino da fonte e fica pequena e torta dentro de
   uma caixa grande, e a caixa quadrada não conversava com os pontos redondos ao
   lado. Parecia controle de formulário, não de carrossel.

   Agora são círculos, com a seta DESENHADA em SVG (traço igual nos dois lados e
   centro óptico certo). O de avançar é cheio em petróleo — é o gesto que se
   espera — e o de voltar é vazado. No hover a seta anda um pouco na direção
   em que leva, e o círculo acende. */
.carrossel__seta {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 21, 18, 0.35);
  color: var(--texto);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, opacity 0.25s, transform 0.25s;
}

.carrossel__seta svg {
  width: 20px;
  height: 20px;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.carrossel__seta[data-proximo] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--tinta);
}

.carrossel__seta:hover:not(:disabled) {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(73, 195, 206, 0.12);
}

.carrossel__seta[data-proximo]:hover:not(:disabled) {
  background: #6fd3dc;
  border-color: #6fd3dc;
  color: var(--tinta);
}

.carrossel__seta[data-anterior]:hover:not(:disabled) svg {
  transform: translateX(-3px);
}

.carrossel__seta[data-proximo]:hover:not(:disabled) svg {
  transform: translateX(3px);
}

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

.carrossel__seta:disabled {
  opacity: 0.28;
  cursor: default;
}

.carrossel__seta[data-proximo]:disabled {
  background: transparent;
  color: var(--texto);
  border-color: rgba(255, 255, 255, 0.28);
}

/* --- 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__produtos {
  /* Os 12 produtos ocupam as duas colunas do meio, com os links em duas colunas
     sob um título só. */
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 12px;
  align-content: start;
}

.rodape__produtos h3 {
  grid-column: 1 / -1;
}

.rodape__produtos a {
  justify-self: start;
}

.rodape__contato p {
  /* Endereço: as quebras são as do <br>. O `pretty` herdado de `p` quebrava
     "Rua Bocaiúva, 2125 · Centro" no meio mesmo com espaço sobrando. */
  text-wrap: wrap;
  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;
  min-height: 44px;
  padding-left: 20px;
  padding-right: 5px;
  font-size: 15px;
}

.rodape__col .botao--cheio::after {
  width: 34px;
  height: 34px;
  background-size: 14px;
}

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

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  align-items: center;
  /* Embaixo, folga para o botão flutuante do WhatsApp não cobrir
     "Política de cookies" no fim da página. */
  padding-block: 24px 104px;
  border-top: 1px solid var(--linha);
  font-size: 15px;
  color: var(--texto-3);
}

/* Rodapé curto das páginas de produto (uma linha: assinatura + links).
   Não tinha estilo nenhum: no celular os links e o telefone saíam emendados,
   sublinhados e com o número quebrado no meio. */
.rodape .env:has(> .rodape__dir) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  /* Folga para o botão flutuante do WhatsApp, que é fixo no canto de baixo e
     cobria o último link (o telefone) no fim da página. */
  padding-bottom: 104px;
  font-size: 15px;
  color: var(--texto-3);
}

.rodape__dir {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

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

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

@media (max-width: 560px) {
  .rodape__dir {
    flex-direction: column;
    gap: 14px;
  }
}

.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;
}

/* --- Telefones: a capa para de forçar a altura da tela ------------------- */

@media (max-width: 768px) {
  /* `min-height: 100dvh` é certo no computador e errado no telefone: medido num
     aparelho de 640px, o conteúdo da capa sozinho dá 638px e a janela útil (menos
     o menu) dá 622. A capa esticada empurrava o botão para fora da primeira tela
     — quer dizer, a regra que existia para o hero caber inteiro era justamente o
     que o fazia não caber.
     
     No telefone a altura passa a ser a do conteúdo, com respiro proporcional. */
  .capa,
  .capa--produto {
    min-height: auto;
    padding-block: clamp(44px, 9vh, 76px);
  }

  .capa .chapeu {
    font-size: 17px;
    line-height: 1.5;
  }

  .capa__acoes {
    margin-top: 30px;
    gap: 12px;
  }
}

@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 {
  /* ALTURA FIXA, igual em todos os produtos: o título de duas linhas e o de
     quatro linhas dividem a mesma capa. Antes a capa era `min-height` e crescia
     com o título — o Audit tinha 785px, o Qualify 661px, o Code 873px. */
  height: clamp(600px, 74vh, 700px);
  min-height: 0;
  padding-block: 48px;
}

.capa--produto h1 {
  /* Menor que o da home: quatro linhas a 84px não cabem numa capa de altura fixa. */
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  max-width: 17ch;
}

.capa--produto .chapeu {
  max-width: 50ch;
  font-size: clamp(17px, 1.35vw, 20px);
}

.capa--produto .capa__acoes {
  margin-top: 32px;
}

/* --- "O problema", o bloco logo abaixo da capa --------------------------- */

/* Mais baixo e mais junto: rótulo, título e texto começam na MESMA linha, o
   título tem um teto e o texto de apoio vem ao lado, no tamanho de leitura.
   Antes era uma seção "folga" (até 128px de respiro em cima e embaixo) com o
   texto alinhado pelo PÉ — o rótulo ficava solto no alto e o parágrafo caía
   no canto oposto. */
.secao--problema {
  padding-block: clamp(48px, 5.5vw, 84px);
}

.secao--problema .cabeca--deslocada {
  align-items: start;
  margin-bottom: 0;
  gap: clamp(24px, 4vw, 64px);
}

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

.secao--problema .cabeca--deslocada > :last-child {
  grid-column: 7 / span 6;
  /* Alinha o começo do parágrafo com o começo do título, não com o rótulo. */
  padding-top: calc(18px + 16px + 4px);
}

.secao--problema .entrada {
  margin-bottom: 14px;
}

.secao--problema h2 {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  max-width: 16ch;
}

.secao--problema .chapeu {
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.6;
  max-width: 48ch;
}

@media (max-width: 760px) {
  .capa--produto {
    height: auto;
    min-height: 0;
    padding-block: 56px 48px;
  }
  .secao--problema .cabeca--deslocada > :last-child {
    padding-top: 0;
  }
}

.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,
  .negacoes {
    grid-template-columns: 1fr;
  }

  /* Quatro colunas de FAQ só existem em tela larga: aqui viram duas, e só abaixo
     de 560px viram uma. Com oito perguntas as três formas fecham sem buraco. */
  .perguntas {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sem as duas colunas, o texto volta a ocupar a largura toda e a foto passa a
     ser só fundo — num celular o notebook não cabe ao lado de nada. */
  .insights__conteudo {
    grid-template-columns: 1fr;
  }

  .insights__texto,
  .carrossel {
    grid-column: 1;
  }

  .insights__veu {
    background: linear-gradient(to bottom, rgba(4, 38, 42, 0.82) 0%, rgba(10, 21, 18, 0.95) 55%, rgba(10, 21, 18, 0.97) 100%);
  }

  /* 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 NÓ NUMA COLUNA PRÓPRIA À ESQUERDA, O TEXTO AO LADO.
     Antes o nó ficava em cima do texto, na mesma coluna, e o trilho descia
     atravessando o título e o parágrafo das etapas. Agora o texto recua 68px e
     o trilho corre só pela faixa dos nós.

     Um trecho por etapa, do centro do nó dela ao centro do nó seguinte: os dois
     estão à mesma distância do topo de cada etapa, então a altura do trecho é a
     altura da própria etapa — exato com qualquer tamanho de texto. */
  .trilha::before {
    display: none;
  }

  .trilha__etapa {
    padding-inline: 68px 0;
  }

  .trilha__no {
    position: absolute;
    left: 0;
    top: clamp(24px, 2.6vw, 34px);
    margin-bottom: 0;
  }

  .trilha__etapa:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: calc(clamp(24px, 2.6vw, 34px) + 22px);
    width: 2px;
    height: 100%;
    background: var(--teal-fundo);
    opacity: 0.55;
  }

  /* O título alinha com o centro do nó. */
  .trilha h3 {
    margin-top: 8px;
  }

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

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

  .rodape__marca,
  .rodape__produtos {
    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;
  }

  /* Tela estreita: os links saem da linha do topo e viram uma lista que desce
     do próprio topo quando o botão de menu é tocado. Fechada, a lista não
     existe na página (display: none) — nada fica escondido fora da tela. */
  .topo__menu {
    display: inline-flex;
  }

  .topo nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 18px;
    background: rgba(10, 21, 18, 0.98);
    border-bottom: 1px solid var(--linha);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .topo--aberto nav {
    display: flex;
  }

  .topo nav a:not(.botao) {
    display: block;
    padding: 15px 0;
    font-size: 18px;
    color: var(--texto);
    border-bottom: 1px solid var(--linha);
  }

  .topo nav a:not(.botao):last-child {
    border-bottom: 0;
  }

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

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

@media (max-width: 560px) {
  .rodape__grade,
  .perguntas {
    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;
  }

  /* OS BOTÕES NÃO VÃO MAIS ATÉ A BORDA DIREITA.
     
     Em largura total eles passavam POR BAIXO do botão flutuante do WhatsApp, que
     é fixo no canto: o círculo cobria o fim do rótulo e, pior, roubava o toque
     naquele pedaço. Com largura automática o botão termina bem antes do canto e
     os dois convivem — continua com alvo de toque grande, só não encosta onde já
     mora outra coisa. */
  .capa__acoes,
  .convite__acoes {
    flex-direction: column;
    align-items: flex-start;
  }

  /* O teto de largura desconta o botão do WhatsApp (56px + folga), e não mais
     76px: com a seta dentro da pílula, "Agendar uma demonstração" precisava de
     ~300px e o teto dava 270 — o texto não quebra, então o círculo VAZAVA para
     fora do botão. O WhatsApp começa em x=334; o botão agora termina em 312. */
  .capa__acoes .botao,
  .convite__acoes .botao {
    width: auto;
    min-width: 240px;
    max-width: calc(100% - 56px);
    justify-content: center;
    font-size: 15.5px;
  }

  /* Com largura mínima, o texto centralizado deixaria a seta encostada nele e
     um vão sobrando na ponta. No cheio, texto à esquerda e seta no fim — e
     tudo um pouco mais justo, para caber sem vazar. */
  .capa__acoes .botao--cheio,
  .convite__acoes .botao--cheio {
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px 0 20px;
  }

  .capa__acoes .botao--cheio::after,
  .convite__acoes .botao--cheio::after {
    width: 36px;
    height: 36px;
    background-size: 15px;
  }
}