/* ==========================================================================
   Verk — site institucional · MODELO B ("Percurso")

   Escrito mobile-first: o CSS base é largura de celular e as media queries
   (min-width) só acrescentam. A maior parte do público abre este link dentro
   de uma conversa de WhatsApp, no celular, às vezes no 4G do interior.

   PALETA — a decisão de direção deste modelo.
   O navy da marca continua idêntico ao do ERP (é o que faz site e sistema
   parecerem a mesma empresa). O que muda é o entorno: em vez de branco e
   cinza-azulado, o fundo é cimento e o âmbar de sinalização de canteiro
   entra como único acento.

   REGRA DO ÂMBAR: --sinal nunca vira texto sobre fundo claro (contraste ~1.8:1,
   reprova em WCAG AA). Ele só existe como preenchimento, régua, ou texto
   sobre o --nanquim. Onde ele marcaria informação no claro, quem carrega o
   significado é o peso da fonte ou a régua lateral.
   ========================================================================== */

:root {
  /* superfícies */
  --papel:   #EFEFEC;   /* fundo geral — cimento claro */
  --cimento: #DCDDD8;   /* seções alternadas */
  --nanquim: #16232E;   /* seção-assinatura e carimbo */
  --navy:    #1B354A;   /* marca — mesmo hex do ERP */

  /* tinta */
  --tinta:        #16232E;
  --tinta-suave:  #4A5A66;   /* 6.3:1 sobre --papel */
  --claro:        #E4E8EA;   /* texto sobre --nanquim */
  --claro-suave:  #9FB0BB;   /* apoio sobre --nanquim, 6.2:1 */

  /* acentos */
  --sinal:      #F0A500;   /* âmbar de sinalização — só sobre fundo escuro */
  --sinal-fraco:#75540D;   /* a mesma família, escurecida até 5.1:1 no cimento */
  --zap:        #25D366;
  --zap-escuro: #1EB855;

  /* linhas */
  --linha:       #C6C7C1;
  --linha-clara: rgba(228,232,234,.18);

  /* tipografia */
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --corpo:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* medidas */
  --faixa: 1180px;
  --raio: 3px;              /* quase reto: régua, não pílula */
  --topo-altura: 58px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 17px;          /* nunca abaixo de 16px: o iOS dá zoom sozinho */
  line-height: 1.62;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* Archivo é variável no eixo de largura. Expandir o display é o que dá o ar
   de letreiro de sinalização sem recorrer a fonte de fantasia. */
h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--tinta);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.3rem, 10vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .98;
}
h2 { font-size: clamp(1.65rem, 6.2vw, 2rem); }
h3 { font-size: 1.1rem; font-variation-settings: "wdth" 100; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
a { color: var(--navy); }

/* Foco sempre visível — quem navega por teclado precisa enxergar onde está. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.pular {
  position: absolute; left: -9999px;
  background: var(--nanquim); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.pular:focus { left: 8px; top: 8px; }

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

.faixa {
  width: 100%; max-width: var(--faixa);
  margin-inline: auto; padding-inline: 20px;
}
.faixa--media { max-width: 760px; }
.centralizado { text-align: center; }

/* Sobrancelha em mono: é ela que carrega o registro técnico da página. */
.sobrancelha {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 .9em;
  display: flex; align-items: center; gap: 10px;
}
.sobrancelha::before {
  content: ""; width: 22px; height: 2px; background: var(--sinal); flex: none;
}
.sobrancelha--clara { color: var(--claro-suave); }

.legenda-exemplo {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 10px 0 0;
}
.legenda-exemplo--clara { color: var(--claro-suave); }

/* ==================== BARRA DE TOPO ==================== */

.topo {
  position: sticky; top: 0; z-index: 50;
  height: var(--topo-altura);
  background: rgba(239,239,236,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo__interno {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* A altura total da barra é o alvo de toque da marca: o logo tem 26px, e um
   alvo de 26px é pequeno demais pra dedo com luva. */
.topo__marca { display: flex; align-items: center; height: 100%; }
.topo__marca img { height: 26px; width: auto; }
.topo__acoes { display: flex; align-items: center; gap: 18px; }

/* Único item da barra de topo: leva ao ERP. Fica visível também no celular —
   sem o botão de WhatsApp aqui, a barra ficaria só com o logo de um lado. */
.link-sistema {
  display: inline-flex;
  align-items: center; min-height: 44px;
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .04em;
  color: var(--tinta-suave); text-decoration: none;
}
.link-sistema:hover { color: var(--navy); text-decoration: underline; }

/* ==================== BOTÕES ==================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px;              /* dedo com luva, em pé, no canteiro */
  padding: 0 24px;
  border-radius: var(--raio);
  font-family: var(--corpo);
  font-size: 1rem; font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn--zap { background: var(--zap); color: #06331A; }
.btn--zap:hover { background: var(--zap-escuro); }
.btn--pequeno { min-height: 44px; padding: 0 15px; font-size: .9rem; }
.btn--grande  { min-height: 58px; padding: 0 32px; font-size: 1.05rem; }
.btn--vazado {
  background: transparent; color: var(--tinta);
  border: 1.5px solid var(--tinta);
}
.btn--vazado:hover { background: var(--tinta); color: var(--papel); }
/* CTA único do hero: sem WhatsApp aqui, este é o botão que leva a pessoa
   pra dentro da página. Cheio, não vazado — é a ação principal do topo. */
.btn--escuro {
  background: var(--nanquim); color: var(--papel);
  border: 1.5px solid var(--nanquim);
}
.btn--escuro:hover { background: #0d1720; border-color: #0d1720; }

.icone-zap { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn--grande .icone-zap { width: 22px; height: 22px; }

/* ==================== HERO ====================
   Sem imagem: o maior elemento pintado é o próprio <h1>, então o LCP não
   depende de download nenhum. */

.hero { padding: 40px 0 52px; }
.hero__grade { display: grid; gap: 34px; }
.hero__sub {
  font-size: 1.06rem; color: var(--tinta-suave);
  max-width: 46ch; margin: 1.1em 0 1.7em;
}
.hero__botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__botoes .btn { width: 100%; }   /* no celular, uma coluna de alvos largos */
.hero__assinatura {
  margin: 20px 0 0; font-size: .88rem; color: var(--tinta-suave);
  border-left: 2px solid var(--sinal); padding-left: 12px;
}
.hero__ficha { min-width: 0; }

/* ==================== FICHA DA OC ====================
   O mesmo objeto aparece duas vezes na página: parado no hero e mudando de
   estado na seção do percurso. É o elemento que a página quer que se lembre. */

.ficha {
  background: #fff;
  border: 1px solid var(--linha);
  border-top: 3px solid var(--nanquim);
  border-radius: var(--raio);
  padding: 20px;
}
.ficha__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.ficha__oc {
  font-family: var(--mono); font-weight: 600;
  font-size: 1.05rem; letter-spacing: .04em; color: var(--nanquim);
}

.etiqueta {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px;
  background: var(--cimento); color: var(--tinta-suave);
}
.etiqueta--ok    { background: var(--nanquim); color: var(--claro); }
.etiqueta--alerta{ background: var(--sinal);   color: #2B1D00; }

.ficha__dados { margin: 0; display: grid; gap: 11px; }
.ficha__dados div {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline;
}
.ficha__dados dt {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.ficha__dados dd { margin: 0; font-size: .92rem; }
/* Dois nomes de classe para vencer `.ficha__dados dd` sem apelar pra
   !important: o valor é um <dd> como os outros. */
.ficha__dados .ficha__valor {
  font-family: var(--mono); font-weight: 600;
  font-size: 1.02rem; color: var(--nanquim);
}
.ficha__nota {
  margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid var(--linha);
  font-size: .86rem; color: var(--tinta-suave);
}
.ficha__nota b { color: var(--nanquim); font-family: var(--mono); }

/* ==================== SEÇÕES CLARAS ==================== */

.secao { padding: 60px 0; }
.secao--cimento { background: var(--cimento); }
.secao h2 { margin-bottom: .9em; }
.texto-solto { color: var(--tinta-suave); max-width: 58ch; }

/* ---- As quatro dores ----
   Sem numeração: não são uma sequência. A etiqueta diz ONDE o problema
   acontece, e isso é informação de verdade. */
.dores { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.dores li { border-top: 2px solid var(--nanquim); padding-top: 16px; }
.dores__onde {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sinal-fraco); margin: 0 0 .5em;
}
.dores h3 { margin-bottom: .35em; }
.dores p:last-child { margin: 0; color: var(--tinta-suave); font-size: .97rem; }

/* ---- Módulos: grade de régua, não pílulas ---- */
.modulos {
  list-style: none; margin: 1.8em 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--linha); border-left: 1px solid var(--linha);
}
.modulos li,
.modulos::after {
  font-family: var(--mono); font-size: .82rem;
  padding: 13px 12px;
  border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  color: var(--nanquim);
}
/* São 11 módulos, e 11 não fecha em 2, 3 nem 4 colunas: sobrava um canto sem
   linha, que lia como defeito. Esta célula vazia leva o total a 12, que fecha
   nos três tamanhos (2×6 = 3×4 = 4×3). Ao mexer na lista, conferir a conta:
   com 12 módulos de verdade, esta regra tem que sair. */
.modulos::after { content: ""; }

/* ---- Diferenciais ---- */
.diferenciais { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.diferenciais h3 { margin-bottom: .35em; }
.diferenciais p { margin: 0; color: var(--tinta-suave); font-size: .97rem; }

/* ---- Prova em imagem (opcional) ----
   Esta página não tem vaga tracejada esperando captura: o percurso já desenha
   o produto em HTML. Estas regras existem só para quando a captura real do
   mapa de cotação chegar e entrar na etapa 02 — ver o comentário no HTML. */
.prova { margin: 20px 0 0; }
.prova img { border: 1px solid var(--linha-clara); border-radius: var(--raio); }
.prova figcaption {
  margin-top: 10px; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--claro-suave);
}

/* ---- Perguntas: <details> nativo, zero JavaScript ---- */
.perguntas { border-top: 1px solid var(--linha); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  cursor: pointer; list-style: none;
  padding: 18px 40px 18px 0; position: relative;   /* alvo de toque > 48px */
  font-family: var(--display); font-variation-settings: "wdth" 100;
  font-weight: 600; color: var(--nanquim);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 13px; height: 2px; background: var(--nanquim);
  box-shadow: 0 0 0 0 transparent;
}
.perguntas summary::before {
  content: ""; position: absolute; right: 11.5px; top: 50%;
  width: 2px; height: 13px; margin-top: -6.5px; background: var(--nanquim);
  transition: opacity .15s ease;
}
.perguntas details[open] summary::before { opacity: 0; }
.perguntas p { margin: 0 0 20px; color: var(--tinta-suave); font-size: .97rem; }

/* ==================== PERCURSO — a seção-assinatura ====================
   Única faixa escura do corpo da página. A malha ao fundo é gerada em CSS
   (nenhum byte de imagem) e evoca papel milimetrado de projeto. */

.percurso {
  padding: 64px 0 72px;
  background-color: var(--nanquim);
  background-image:
    linear-gradient(var(--linha-clara) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha-clara) 1px, transparent 1px);
  background-size: 46px 46px;
  color: var(--claro);
}
.percurso h2, .percurso h3 { color: var(--claro); }
.percurso__cabecalho { max-width: 620px; margin-bottom: 40px; }
.percurso__intro { color: var(--claro-suave); margin: 0; font-size: 1rem; }

.percurso__palco { display: grid; gap: 28px; }

/* ---- ficha grudada ----
   No celular ela vira uma barra compacta no alto da seção: só o número da OC,
   o estado atual e a trilha. O detalhe fica escondido pra não roubar a tela. */
.percurso__ficha {
  position: sticky; top: var(--topo-altura); z-index: 20;
  padding: 10px 0;
  background: linear-gradient(var(--nanquim) 78%, transparent);
}
.ficha--viva {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--linha-clara);
  border-top: 3px solid var(--sinal);
  backdrop-filter: blur(4px);
  padding: 14px 16px;
}
.ficha--viva .ficha__topo {
  border-bottom: 0; padding-bottom: 0; margin-bottom: 12px;
}
.ficha--viva .ficha__oc { color: var(--claro); }
.ficha--viva .etiqueta  { background: rgba(255,255,255,.1); color: var(--claro); }
.ficha--viva .etiqueta--ok     { background: var(--claro); color: var(--nanquim); }
.ficha--viva .etiqueta--alerta { background: var(--sinal); color: #2B1D00; }
.ficha--viva .ficha__dados,
.ficha--viva .ficha__custo { display: none; }   /* só no desktop */

/* Troca de estado: tudo já está no HTML, o script só muda [data-atual]. */
.ficha--viva [data-quando] { display: none; }
.percurso[data-atual="1"] .ficha--viva [data-quando="1"],
.percurso[data-atual="2"] .ficha--viva [data-quando="2"],
.percurso[data-atual="3"] .ficha--viva [data-quando="3"],
.percurso[data-atual="4"] .ficha--viva [data-quando="4"],
.percurso[data-atual="5"] .ficha--viva [data-quando="5"] { display: inline-block; }

.ficha--viva .ficha__dados dt { color: var(--claro-suave); }
.ficha--viva .ficha__dados dd { color: var(--claro); }
.ficha--viva .ficha__valor    { color: var(--sinal); }

.ficha__custo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha-clara); }
.ficha__custo-rotulo {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--claro-suave); margin: 0 0 8px;
}
.barra { height: 8px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.barra__preenchida {
  display: block; height: 100%; width: 58%;
  background: var(--sinal); border-radius: 999px;
  transition: width .55s cubic-bezier(.4,0,.2,1);
}
.percurso[data-atual="5"] .barra__preenchida { width: 62%; }
.ficha__custo-valor {
  font-family: var(--mono); font-weight: 600; font-size: .9rem;
  color: var(--sinal); margin: 8px 0 0;
}

/* ---- trilha: cinco barras + o nome de uma etapa só ----
   Os cinco nomes lado a lado não cabem em 375px: viravam um borrão. As barras
   dizem a posição, a linha de baixo diz onde você está. */
.trilha {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.trilha li {
  height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  transition: background-color .35s ease;
}
/* As barras acendem até a etapa atual: a linha âmbar mostra o quanto andou. */
.percurso[data-atual="1"] .trilha li:nth-child(-n+1),
.percurso[data-atual="2"] .trilha li:nth-child(-n+2),
.percurso[data-atual="3"] .trilha li:nth-child(-n+3),
.percurso[data-atual="4"] .trilha li:nth-child(-n+4),
.percurso[data-atual="5"] .trilha li:nth-child(-n+5) { background: var(--sinal); }

.trilha__onde {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sinal); margin: 11px 0 0;
}

/* ---- as cinco etapas ---- */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 52px; }
.etapa { scroll-margin-top: 120px; }
.etapa__num {
  font-family: var(--mono); font-weight: 600;
  font-size: .82rem; letter-spacing: .12em;
  color: var(--sinal); margin: 0 0 .7em;
}
.etapa h3 { font-size: 1.3rem; font-variation-settings: "wdth" 108; margin-bottom: .5em; }
.etapa > p { color: var(--claro-suave); font-size: 1rem; }
.etapa > p b { color: var(--claro); }

/* ---- quadros de dado dentro das etapas ---- */
.quadro {
  margin-top: 20px; padding: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio);
}
.quadro--alerta { border-color: rgba(240,165,0,.45); }
.quadro__titulo {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--claro-suave); margin: 0 0 12px;
}
.quadro__rodape {
  margin: 12px 0 0; font-size: .86rem; color: var(--claro-suave);
}
.quadro__rodape b { color: var(--sinal); font-family: var(--mono); }

.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela th, .tabela td {
  text-align: left; padding: 9px 8px;
  border-bottom: 1px solid var(--linha-clara);
}
.tabela th {
  font-family: var(--mono); font-weight: 500;
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--claro-suave);
}
.tabela td { color: var(--claro); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td:not(:first-child) { font-family: var(--mono); font-size: .84rem; }
/* A melhor proposta e a divergência são marcadas por régua âmbar + peso, não
   por cor de texto: assim continuam legíveis pra quem não distingue a cor. */
.tabela__melhor td { color: var(--sinal); font-weight: 600; }
.tabela__melhor td:first-child { box-shadow: inset 3px 0 0 var(--sinal); }
.tabela__divergente td { color: var(--sinal); font-weight: 600; }
.tabela__divergente td:first-child { box-shadow: inset 3px 0 0 var(--sinal); }

.registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.registro li {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--linha-clara);
}
.registro li:last-child { border-bottom: 0; padding-bottom: 0; }
.registro span {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--claro-suave);
}
.registro b { font-family: var(--mono); font-size: .86rem; color: var(--claro); }

/* ==================== CHAMADA FINAL ==================== */

.chamada { background: var(--navy); color: #fff; padding: 68px 0; }
.chamada h2 { color: #fff; }
.chamada p {
  color: #C6D3DB; max-width: 46ch;
  margin-inline: auto; margin-bottom: 1.9em;
}

/* ==================== CARIMBO (rodapé) ====================
   Formato de carimbo de prancha: os dados obrigatórios são o próprio elemento
   gráfico, em vez de linha miúda no pé da página. */

.carimbo {
  background: var(--nanquim); color: var(--claro-suave);
  font-size: .88rem; padding: 44px 0 28px;
  /* Régua fina: sem ela o degrau entre o navy da chamada e o nanquim do
     carimbo parece emenda de renderização, não decisão. */
  border-top: 1px solid rgba(255,255,255,.14);
}
.carimbo__grade {
  display: grid;
  border-top: 1px solid var(--linha-clara);
  border-left: 1px solid var(--linha-clara);
}
.carimbo__celula {
  padding: 18px 16px;
  border-right: 1px solid var(--linha-clara);
  border-bottom: 1px solid var(--linha-clara);
}
.carimbo__celula p { margin: 0 0 4px; }
.carimbo__celula--marca img { height: 32px; width: auto; margin-bottom: 12px; }
/* Duas classes para vencer `.carimbo__celula p` sem !important. */
.carimbo__celula .carimbo__rotulo {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--claro-suave); opacity: .75;
  margin-top: 14px;
}
.carimbo__celula .carimbo__rotulo:first-child { margin-top: 0; }
/* Linha de contato do rodapé é link de verdade e é tocada no celular: sem o
   respiro vertical o alvo fica com 18px de altura. */
.carimbo a {
  display: inline-flex; align-items: center; min-height: 28px;
  color: var(--claro); text-decoration: none;
}
.carimbo a:hover { text-decoration: underline; }
.carimbo__base {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  margin: 18px 0 0; opacity: .7;
}

/* ==================== BOTÃO FLUTUANTE ==================== */

.zap-flutuante {
  position: fixed; z-index: 60;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));   /* barra do iPhone */
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--zap); color: #06331A;
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(22,35,46,.35);
  transition: opacity .2s ease, transform .2s ease, background-color .15s ease;
}
.zap-flutuante svg { width: 30px; height: 30px; fill: currentColor; }
.zap-flutuante:hover { background: var(--zap-escuro); }
.js .zap-flutuante { opacity: 0; transform: translateY(12px); pointer-events: none; }
.js .zap-flutuante--visivel { opacity: 1; transform: none; pointer-events: auto; }

/* ==================== 640px ==================== */

@media (min-width: 640px) {
  .hero { padding: 56px 0 68px; }
  .hero__botoes .btn { width: auto; }
  .secao { padding: 76px 0; }
  .percurso { padding: 80px 0 88px; }
  .dores { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .diferenciais { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .modulos { grid-template-columns: repeat(3, 1fr); }
  .carimbo__grade { grid-template-columns: 1fr 1fr; }
}

/* ==================== 1024px ====================
   Só aqui a ficha vira painel completo ao lado das etapas. Abaixo disso ela
   é uma barra de status: o celular não tem tela pra duas colunas. */

@media (min-width: 1024px) {
  body { font-size: 18px; }

  .hero { padding: 84px 0 96px; }
  .hero h1 { font-size: 3.35rem; }
  .hero__grade { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 60px; }
  .ficha--estatica { padding: 26px; }

  .secao { padding: 96px 0; }
  .chamada { padding: 88px 0; }

  .percurso { padding: 104px 0 112px; }
  .percurso__cabecalho { margin-bottom: 56px; }
  .percurso__palco { grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
  .percurso__ficha {
    top: calc(var(--topo-altura) + 40px);
    padding: 0; background: none;
  }
  .ficha--viva { padding: 22px; }
  .ficha--viva .ficha__topo {
    border-bottom: 1px solid var(--linha-clara);
    padding-bottom: 14px; margin-bottom: 16px;
  }
  .ficha--viva .ficha__dados,
  .ficha--viva .ficha__custo { display: grid; }
  .ficha--viva .ficha__custo { display: block; }

  .etapas { gap: 108px; }
  .etapa h3 { font-size: 1.55rem; }
  .modulos { grid-template-columns: repeat(4, 1fr); }
  .carimbo__grade { grid-template-columns: 1.5fr 1fr 1fr .8fr; }
}

/* ==================== APARIÇÃO NA ROLAGEM ====================
   Animação nativa ligada à rolagem: sem biblioteca, sem JavaScript, e sem
   sequestrar o scroll. O estado inicial escondido vive DENTRO do @supports —
   em navegador sem suporte, o conteúdo simplesmente já está visível, nunca
   preso invisível esperando um script. */

@supports (animation-timeline: view()) {
  .etapa, .dores li, .diferenciais li {
    opacity: 0;
    animation: surge linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
}

@keyframes surge {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ==================== MOVIMENTO REDUZIDO ==================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .etapa, .dores li, .diferenciais li {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .js .zap-flutuante { transform: none; }
}

/* ==================== IMPRESSÃO ==================== */

@media print {
  .topo, .zap-flutuante, .percurso__ficha { display: none; }
  .percurso { background: #fff; color: #000; }
  .percurso h2, .percurso h3, .etapa > p, .tabela td { color: #000; }
  .percurso__palco { display: block; }
}