/* ============================================================================
   Lumax Tecnologia — folha de estilo única.

   Direção visual "Placa": o vocabulário do site vem do próprio logotipo — o "L"
   desenhado com trilhas de circuito impresso. Daí saem as três decisões que
   organizam tudo: hairline no lugar de caixa, trilha com nó no lugar de ícone
   decorativo, e o degradê azul → ciano → verde da marca reservado a traços de
   1 a 3px. Fundo claro dominante, blocos escuros como respiro.
   ========================================================================== */

/* ---- Fontes ---- */
/* Exo 2 SemiBold é a fonte de títulos do manual de identidade — a mesma do
   wordmark LUMAX. Só o subset latin, que é o que o site escreve. */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/exo2-600-v1.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400-v1.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600-v1.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  /* Paleta do manual de identidade visual. Os nomes entre parênteses são os
     que o manual usa. */
  --azul: #154497;          /* Azul Confiança   */
  --verde: #19b66b;         /* Verde Inovação   */
  --verde-claro: #5be38b;   /* Verde Claro      */
  --azul-tec: #00a8e8;      /* Azul Tecnologia  */
  --branco: #ffffff;

  /* Superfícies. O papel é levemente frio (azulado) em vez de branco puro: no
     branco puro o fio de 1px fica agressivo e o degradê da marca lê chapado. */
  --papel: #f3f6f9;
  --papel-alto: #ffffff;
  --placa: #071a2d;         /* Azul Escuro do manual — blocos escuros */

  /* Tinta */
  --tinta: #0b1b2e;         /* texto principal, 15,9:1 sobre o papel */
  --tinta-suave: #4b5a6c;   /* texto secundário, 6,6:1 sobre o papel */
  --tinta-clara: #8395a9;   /* rótulos de dado e detalhes */

  /* Linhas. O site quase não usa caixa: quem separa é o fio de 1px. */
  --linha: #dde4ec;
  --linha-forte: #b6c3d2;

  /* Cores de link. Eram três tons arroxeados, herdados de uma paleta que o
     logotipo não usa mais: sobre o azul e o verde da marca eles liam como
     "link já visitado". Os nomes agora dizem a função, não o tom. */
  --link: #154497;          /* fundo claro,  9,11:1 sobre branco */
  --link-inverso: #7dd3fc;  /* fundo escuro, 9,87:1 sobre a placa */
  --link-forte: #0e3a80;    /* foco e hover, 10,85:1 sobre branco */

  /* As três trilhas do diagrama são o degradê do logotipo na versão de fundo
     claro, na ordem em que ele corre: 7,16:1 / 4,02:1 / 3,39:1 sobre o papel —
     todas acima do mínimo de 3:1 para elemento gráfico. */
  --trilha-1: #1552b8;
  --trilha-2: #0e86c4;
  --trilha-3: #0e9f6e;
  /* O Verde Inovação da paleta fica em 2,64:1 sobre branco: serve para o
     símbolo, não para texto. Este é o mesmo tom escurecido até 5,05:1, para os
     detalhes de texto que precisam do verde da marca. */
  --verde-texto: #117f4b;

  /* Cores do Negócio de Amigo, produto próprio da Lumax. Entram só em detalhes
     da página do produto (selo, botão principal, o ✓), para o visitante
     reconhecer o produto quando chegar nele — nunca no lugar da identidade
     da Lumax. 5,17:1 / 13,1:1 / 4,8:1 sobre branco. */
  --nda-azul: #2563eb;
  --nda-azul-escuro: #16324f;
  --nda-verde: #1b8256;

  --fonte-titulo: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --largura-max: 1200px;
  /* Canto moderado. Era 3px, quase reto, e o site inteiro lia como um conjunto
     de caixas. Painéis e cards levam o maior; botões e selos, o menor. */
  --raio: 12px;
  --raio-btn: 8px;
  --ritmo: clamp(3.5rem, 6vw, 5.5rem);   /* respiro vertical entre seções */

  /* Área segura do iPhone; 0px quando não existe */
  --segura-esq: env(safe-area-inset-left, 0px);
  --segura-dir: env(safe-area-inset-right, 0px);
  --segura-baixo: env(safe-area-inset-bottom, 0px);

  /* min-height: 68px do .cabecalho-interno + 1px da borda inferior do .cabecalho */
  --altura-cabecalho: 69px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Compensa o .cabecalho sticky: o alvo de uma âncora (#servicos, #cases, #sobre, e as
     seções das páginas internas) não fica escondido atrás dele ao navegar direto para lá. */
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
}

body {
  font-family: var(--fonte-texto);
  font-size: 1rem;          /* 16px, nunca menos */
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;       /* trava rolagem lateral acidental */
  -webkit-font-smoothing: antialiased;
  /* Numa página curta (a 404, a de privacidade) o rodapé parava no meio da tela
     e sobrava fundo claro embaixo dele. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

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

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;   /* SemiBold: o único peso de Exo 2 carregado */
  line-height: 1.05;
  text-wrap: balance;
}

/* Escala fluida com tracking negativo: com um só peso disponível, quem faz a
   hierarquia é o tamanho e o aperto entre as letras. */
h1 {
  font-size: clamp(2.5rem, 1.55rem + 4.2vw, 4.25rem);
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  letter-spacing: -0.03em;
}
h3 {
  font-size: clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Respiro padrão abaixo de um título de seção. Os blocos que montam o próprio
   espaçamento (o cabeçalho de seção, o case, a chamada final) zeram de novo. */
h2 { margin-bottom: 1.5rem; }
.secao-topo h2,
.caso-texto h2,
.chamada h2 { margin-bottom: 0; }

p { text-wrap: pretty; }

a { color: var(--link); }

/* Foco sempre visível — nunca remover sem substituto */
:focus-visible {
  outline: 3px solid var(--link-forte);
  outline-offset: 3px;
  border-radius: 2px;
}

.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--placa);
  color: var(--branco);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.pular-conteudo:focus {
  left: 0;
}

/* Trava de rolagem do menu mobile; o JS complementa com position:fixed */
body.menu-aberto {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

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

.sr-apenas {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Estrutura ---- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  /* Os insets evitam texto sob o recorte do iPhone em paisagem */
  padding-inline: max(1.5rem, var(--segura-esq)) max(1.5rem, var(--segura-dir));
}

.secao { padding-block: var(--ritmo); }
.secao-suave { background: var(--papel-alto); }

/* Fundo chapado, sem malha decorativa: a grade não carregava informação nenhuma
   e o diagrama do hero já é o lugar onde o vocabulário de placa aparece. */
.faixa-escura {
  background: var(--placa);
  color: var(--branco);
}
.faixa-escura p { color: #c3d0de; }
.faixa-escura a { color: var(--link-inverso); }  /* --link reprova sobre a placa: 1,81:1 */

/* Anel de foco: --link-forte (o padrão global) reprova contra a placa (1,52:1).
   Sobre o fundo escuro da faixa, o anel usa --link-inverso (9,87:1). */
.faixa-escura :focus-visible {
  outline-color: var(--link-inverso);
}
/* .card mantém fundo claro mesmo dentro de uma faixa escura: o anel ali continua
   pousando sobre um fundo claro, então volta ao --link-forte (10,85:1). */
.faixa-escura .card :focus-visible,
.faixa-escura .card:focus-visible {
  outline-color: var(--link-forte);
}

/* Rótulo: só no topo das páginas e no case, onde situa o leitor. Era caixa
   alta com tracking largo antes de todo título — o tique mais reconhecível de
   site feito em série. Agora é texto normal, com a via verde da marca. */
.rotulo {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--verde-texto);
  margin-bottom: 1rem;
}
.rotulo::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-top: 0.42em;        /* alinha a via ao meio da primeira linha */
  border-radius: 50%;
  border: 2px solid currentColor;
  flex: 0 0 auto;
}
.faixa-escura .rotulo { color: var(--verde-claro); }

/* Cabeçalho de seção: rótulo e título à esquerda, texto de apoio à direita. A
   assimetria substitui o bloco centralizado de todo site de agência. */
.secao-topo {
  display: grid;
  gap: 1rem 3rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .secao-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}
.secao-topo p {
  color: var(--tinta-suave);
  font-size: 1.0625rem;
}
/* .secao-topo p e .faixa-escura p têm a mesma especificidade (0,1,1) e a regra
   do bloco escuro vem antes no arquivo: sem este reforço, o texto de apoio da
   faixa escura herda a tinta clara e some no fundo. */
.faixa-escura .secao-topo p { color: #c3d0de; }

/* ---- Botões ---- */
/* Todo alvo de toque: 48px de altura mínima */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.8rem 1.6rem;
  border-radius: var(--raio-btn);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-primario {
  background: var(--azul);
  color: var(--branco);
}
.btn-primario:hover { background: var(--link-forte); }
.btn-secundario {
  border: 1px solid var(--linha-forte);
  color: var(--tinta);
  background: transparent;
}
.btn-secundario:hover { border-color: var(--tinta); background: rgb(11 27 46 / 0.04); }
.faixa-escura .btn-secundario { color: var(--branco); border-color: rgb(255 255 255 / 0.32); }
.faixa-escura .btn-secundario:hover { border-color: var(--branco); background: rgb(255 255 255 / 0.08); }

/* Botão flutuante: o elemento mais importante da página */
.btn-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + var(--segura-baixo));  /* sem isto, some sob a barra de gestos */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgb(7 26 45 / 0.28);
  z-index: 60;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.btn-whatsapp:hover { background: var(--link-forte); transform: translateY(-2px); }
/* Com o menu mobile aberto, o painel cobre a tela: o botão precisa sumir de
   verdade (não só ficar por baixo visualmente) para não sobrar como alvo
   de toque/foco fora do painel. */
body.menu-aberto .btn-whatsapp { display: none; }

/* ---- Links de referência ---- */
/* Os que levam a outra página do site ou ao site do cliente. Alvo de toque com
   o mesmo padrão do .btn, mas do tamanho do próprio texto do link (inline-flex),
   não uma faixa de largura total. Peso e seta em vez de sublinhado: precisam de
   presença sem competir com o .btn-primario, que é a ação de conversão. */
.card a,
.caso-texto a,
.servico a,
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

/* Seta desenhada com duas bordas: não é texto, então nenhum leitor de tela
   anuncia "seta para a direita" no meio do nome do link. */
.card a::after,
.caso-texto a::after,
.servico a::after,
.link-seta::after {
  content: '';
  width: 0.4em;
  height: 0.4em;
  /* A seta larga o currentColor e assume o verde da marca: dá ao link o mesmo
     par azul+verde do logotipo sem tirar contraste do texto (5,02:1 sobre
     branco). */
  border-top: 2px solid var(--verde-texto);
  border-right: 2px solid var(--verde-texto);
  transform: rotate(45deg);
  transition: translate 0.18s ease;
}
.card a:hover, .caso-texto a:hover,
.servico a:hover, .link-seta:hover { text-decoration: underline; }
.card a:hover::after, .caso-texto a:hover::after,
.servico a:hover::after, .link-seta:hover::after { translate: 4px 0; }

/* ---- Cards ---- */
/* Usados nas páginas internas e no bloco "outros serviços". O fio de 1px entre
   eles vem do gap sobre o fundo da grade: nenhuma borda dupla, nenhuma sombra. */
/* auto-fit, e não três colunas fixas: as páginas de serviço listam só dois
   cards, e a coluna que sobrava aparecia como um retângulo cinza vazio. */
.grade-3 {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}

.card {
  position: relative;
  padding: 2rem 1.75rem 1.5rem;
  background: var(--papel-alto);
  height: 100%;
}
/* Trilha de acento: 2px do degradê da marca que corre no topo do card ao passar
   o mouse. É o único movimento de cor da página fora do hero. */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--azul), var(--azul-tec) 55%, var(--verde));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--tinta-suave); }

/* ---- Listas ---- */
/* Marcador de via: o furo metalizado da placa, não um bullet cheio qualquer. */
.marcador-verde { list-style: none; padding: 0; }
.marcador-verde li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.9rem;
  max-width: 62ch;
}
.marcador-verde li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--verde-texto);
  background: var(--papel);
}
.secao-suave .marcador-verde li::before { background: var(--papel-alto); }
.faixa-escura .marcador-verde li::before {
  border-color: var(--verde-claro);
  background: var(--placa);
}

/* ---- Cabeçalho ---- */
.cabecalho {
  position: sticky;
  top: 0;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  z-index: 50;
}
/* O vidro fosco só entra a partir de 1024px. Abaixo disso o menu vira um painel
   position: fixed que mora dentro do cabeçalho, e um ancestral com
   backdrop-filter passa a ser o bloco de contenção dele: o painel se mediria
   pela altura da barra (68px) em vez da tela inteira, e ficaria transparente. */
@media (min-width: 1024px) {
  .cabecalho {
    background: rgb(243 246 249 / 0.88);
    backdrop-filter: saturate(160%) blur(12px);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .cabecalho { background: var(--papel); }
  }
}
.cabecalho-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}
/* O logotipo do cabeçalho é o lockup horizontal da entrega, como o manual de
   identidade mostra em "Aplicações". O nome não é texto real: o wordmark tem
   letreiro próprio e o X em degradê, que nenhuma fonte web reproduz. Quem usa
   leitor de tela ouve o nome pelo alt da imagem. */
.cabecalho-logo {
  display: flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}
/* O arquivo tem 3x o tamanho exibido, para telas densas. A largura sai da
   proporção; os atributos width/height da imagem reservam o espaço antes do
   download e evitam o pulo de layout. */
.marca-lockup {
  width: auto;
  height: 38px;
}
/* Em tela estreita o lockup cede altura para não espremer o botão do menu. */
@media (max-width: 22.5rem) {
  .marca-lockup { height: 30px; }
}

.menu-botao {
  position: relative;
  width: 48px; height: 48px;      /* alvo de toque */
  border: 0;
  background: none;
  cursor: pointer;
}
/* Ícone de três traços, desenhado em CSS para não carregar imagem */
.menu-botao-traco,
.menu-botao-traco::before,
.menu-botao-traco::after {
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--tinta);
  border-radius: 2px;
}
.menu-botao-traco { top: 23px; left: 12px; }
.menu-botao-traco::before { content: ''; top: -7px; left: 0; }
.menu-botao-traco::after  { content: ''; top: 7px;  left: 0; }

.menu-nav { gap: 0.25rem; }
.menu-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1rem;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
/* Sublinhado que cresce a partir da esquerda: o mesmo gesto da trilha do card. */
.menu-nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 14px;
  height: 1px;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.menu-nav a:not(.btn):hover::after { transform: scaleX(1); }
/* .menu-nav a (0,1,1) vence .btn-primario (0,1,0) e apaga o branco do CTA.
   Especificidade extra para restaurar o contraste do botão principal. */
.menu-nav a.btn-primario { color: var(--branco); }

/* Celular: menu em painel */
@media (max-width: 1023px) {
  .menu-nav {
    position: fixed;
    inset: 68px 0 0 0;
    background: var(--papel);
    flex-direction: column;
    padding: 1.5rem max(1.5rem, var(--segura-dir)) calc(1.5rem + var(--segura-baixo)) max(1.5rem, var(--segura-esq));
    display: none;
  }
  .menu-nav.aberto { display: flex; }
  .menu-nav a {
    min-height: 56px;
    padding-inline: 0;
    border-bottom: 1px solid var(--linha);
    font-size: 1.125rem;
  }
  .menu-nav a.btn-primario {
    border-bottom: 0;
    margin-top: 1.25rem;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .menu-botao { display: none; }
  .menu-nav { display: flex; align-items: center; }
}

/* ---- Hero da home ---- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
}
.hero-grade {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.hero h1 { max-width: 15ch; }
.hero-texto {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-top: 1.5rem;
}
.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
/* Em tela estreita os dois CTAs empilham; larguras diferentes leem como
   desalinho, então ambos ocupam a linha inteira. */
@media (max-width: 30rem) {
  .hero-acoes .btn { width: 100%; }
}

/* Faixa de compromissos logo abaixo do hero: três fatos separados por fio
   vertical. Substitui a lista de bullets que ficava perdida no meio da página. */
.provas {
  list-style: none;
  padding: 0;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 1.25rem 2.5rem;
}
@media (min-width: 760px) { .provas { grid-template-columns: repeat(3, 1fr); } }
.provas li { padding-left: 1.25rem; border-left: 1px solid var(--linha-forte); }
.provas strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.15rem;
}
.provas span { color: var(--tinta-suave); font-size: 0.9375rem; }

/* ---- Diagrama do hero ---- */
/* O elemento-assinatura: o roteamento sai de um pad (o processo que a empresa
   já tem) e se ramifica em três vias — os três serviços. É o logotipo da marca
   explicado em tamanho grande. */
.diagrama { width: 100%; height: auto; display: block; }
.diagrama-trilha {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.diagrama-rotulo {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  fill: var(--tinta);
}
.diagrama-legenda,
.diagrama-origem {
  font-family: var(--fonte-texto);
  font-size: 10.5px;
  font-weight: 400;
  fill: var(--tinta-suave);
}

/* Abaixo de 1000px o SVG encolhe junto com a coluna e o texto interno chegaria
   a 7px na tela. As legendas de apoio saem — os três serviços estão escritos
   logo abaixo, na seção Serviços — e o que fica cresce para continuar legível. */
@media (max-width: 999px) {
  .diagrama { max-width: 32rem; }
  .diagrama-legenda { display: none; }
  .diagrama-rotulo { font-size: 19px; }
  .diagrama-origem { font-size: 15px; }
  .diagrama-trilha { stroke-width: 2.5; }
}

/* Sequência de carga: as trilhas se desenham, depois os pads acendem e os
   rótulos entram. Acontece uma vez, na chegada; depois a página fica parada. */
@media (prefers-reduced-motion: no-preference) {
  .diagrama-trilha {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rotear 1.05s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
  .diagrama-no {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: acender 0.45s ease forwards;
  }
  .diagrama-texto { opacity: 0; animation: surgir 0.45s ease forwards; }

  .diagrama-t1 { animation-delay: 0.1s; }
  .diagrama-t2 { animation-delay: 0.25s; }
  .diagrama-t3 { animation-delay: 0.4s; }
  .diagrama-n1 { animation-delay: 1.0s; }
  .diagrama-n2 { animation-delay: 1.15s; }
  .diagrama-n3 { animation-delay: 1.3s; }
  .diagrama-x1 { animation-delay: 1.1s; }
  .diagrama-x2 { animation-delay: 1.25s; }
  .diagrama-x3 { animation-delay: 1.4s; }
}
@keyframes rotear { to { stroke-dashoffset: 0; } }
@keyframes acender {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes surgir {
  from { opacity: 0; translate: -8px 0; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---- Serviços da home ---- */
/* Não são três caixas iguais: cada linha é um diagnóstico. À esquerda o sintoma
   que o cliente reconhece na própria empresa, à direita o serviço que resolve. */
.servicos-lista { display: grid; }
.servico {
  display: grid;
  gap: 0.75rem 3rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linha);
  align-items: start;
}
.servico:last-child { border-bottom: 1px solid var(--linha); }
@media (min-width: 900px) {
  .servico { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
}
.servico-sintoma {
  color: var(--tinta-suave);
  font-size: 0.9375rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--linha-forte);
  transition: border-color 0.22s ease;
}
.servico:hover .servico-sintoma { border-color: var(--verde-texto); }
.servico h3 { margin-bottom: 0.75rem; }
.servico-corpo p { color: var(--tinta-suave); max-width: 56ch; }

/* ---- Case ---- */
.caso {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1000px) { .caso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.caso-texto p { color: var(--tinta-suave); margin-top: 1rem; max-width: 52ch; }
.caso img {
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  box-shadow: 0 18px 40px -24px rgb(7 26 45 / 0.45);
}

/* Ficha técnica do case: os três dados que interessam, no formato de um
   datasheet — chave à esquerda, valor à direita, fio entre as linhas. */
.ficha {
  margin-top: 2rem;
  border-top: 1px solid var(--linha);
}
.ficha > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--linha);
}
.ficha dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-clara);
  padding-top: 0.35em;
}
.ficha dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Como funciona ---- */
/* Aqui a numeração diz algo verdadeiro: é uma sequência, e a ordem importa para
   quem está decidindo contratar. Os passos ficam ligados por uma trilha, com
   uma via em cada etapa. */
.passos {
  list-style: none;
  padding: 0;
  counter-reset: passo;
  display: grid;
}
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(4, 1fr); column-gap: 1.5rem; }
}
.passos li {
  position: relative;
  counter-increment: passo;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}
/* A trilha: fio horizontal no desktop, vertical no celular. */
.passos li::before {
  content: '';
  position: absolute;
  background: var(--linha-forte);
}
/* A via: o furo metalizado onde a trilha encontra a etapa. */
.passos li::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--azul);
  background: var(--papel);
}
@media (max-width: 899px) {
  .passos li { padding-left: 2.25rem; padding-bottom: 1.75rem; }
  .passos li::before { left: 7px; top: 1.5rem; bottom: 0; width: 1px; }
  .passos li:last-child { padding-bottom: 0; }
  .passos li:last-child::before { display: none; }
  .passos li::after { left: 0; top: 0.3rem; }
}
@media (min-width: 900px) {
  .passos li { padding-top: 2.5rem; }
  .passos li::before { left: 0; right: -1.5rem; top: 7px; height: 1px; }
  .passos li:last-child::before { right: 55%; }
  .passos li::after { left: 0; top: 0; }
}
.passos strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  color: var(--tinta);
  margin-bottom: 0.35rem;
}
.passos strong::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-family: var(--fonte-texto);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--tinta-clara);
  margin-bottom: 0.6rem;
}
.faixa-escura .passos li { color: #c3d0de; }
.faixa-escura .passos strong { color: var(--branco); }
.faixa-escura .passos li::before { background: rgb(255 255 255 / 0.22); }
.faixa-escura .passos li::after { border-color: var(--verde-claro); background: var(--placa); }
.secao-suave .passos li::after { background: var(--papel-alto); }

/* ---- Stack ---- */
/* As tecnologias agrupadas por função. O agrupamento mostra que existe critério
   por trás da escolha — que é justamente o que a frase de apoio afirma. */
.stack {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 700px) { .stack { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stack { grid-template-columns: repeat(4, 1fr); } }
.stack h3 {
  font-family: var(--fonte-texto);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a9bacb;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}
.stack ul { list-style: none; padding: 0; }
.stack li {
  color: var(--branco);
  font-size: 0.9375rem;
  padding-block: 0.3rem;
}
.stack-nota { max-width: 48ch; font-size: 1.0625rem; }

/* ---- Sobre ---- */
.sobre-grade {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) { .sobre-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sobre-grade p { color: var(--tinta-suave); max-width: 54ch; }
.sobre-grade p + p { margin-top: 1rem; }

/* ---- Chamada final ---- */
.chamada {
  position: relative;
  display: grid;
  gap: 1.75rem 3rem;
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
@media (min-width: 860px) {
  .chamada { grid-template-columns: minmax(0, 1fr) auto; }
}
.chamada p { color: var(--tinta-suave); margin-top: 0.75rem; max-width: 46ch; }

/* ---- Rodapé ---- */
.rodape {
  background: var(--placa);
  color: var(--branco);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.rodape a { color: var(--link-inverso); }
/* Três colunas no desktop, a partir do HTML que já existia: marca e frase à
   esquerda, contato no meio, redes à direita. A linha legal fecha embaixo. */
@media (min-width: 860px) {
  .rodape .container {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 3rem;
    align-items: start;
  }
  .rodape-marca { grid-column: 1; grid-row: 1; }
  .rodape p:not(.rodape-legal) { grid-column: 1; grid-row: 2; }
  .rodape-contato { grid-column: 2; grid-row: 1 / span 2; }
  .rodape-redes { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
  .rodape-legal { grid-column: 1 / -1; grid-row: 3; }
}
.rodape p:not(.rodape-legal) {
  color: #b7c4d2;
  max-width: 34ch;
  font-size: 0.9375rem;
}
.rodape-contato, .rodape-redes { list-style: none; padding: 0; }
.rodape-contato a,
.rodape-redes a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; font-size: 0.9375rem; }

/* O ícone não encolhe quando o texto do contato quebra em duas linhas. */
.icone-contato { flex: 0 0 auto; }

/* Símbolo, não o lockup completo: o nome por extenso já está na linha legal, no
   fim do rodapé. O símbolo é o mesmo arquivo dos dois fundos — o degradê verde →
   azul da marca se sustenta sozinho sobre a placa, sem precisar de selo claro
   atrás. Arquivo em 3x, exibido em 44px. */
.rodape-marca {
  display: block;
  width: auto;
  height: 44px;
  margin-bottom: 1.25rem;
}
.rodape-contato li + li,
.rodape-redes li + li { margin-top: 0.25rem; }
.rodape-redes { margin-top: 0.25rem; }
.rodape-legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: 0.8125rem;
  color: #93a4b6;
}

/* ---- Páginas internas ---- */
/* Uma seção cujo conteúdo é uma lista de critérios ("Quando vale a pena", "O que
   está incluso") ganha o mesmo eixo assimétrico da home: título na calha
   esquerda, lista na coluna de leitura. Sem isso, metade da largura fica vazia. */
@media (min-width: 900px) {
  .container:has(> .marcador-verde) {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 0 4rem;
    align-items: start;
  }
  .container:has(> .marcador-verde) > h2 { margin-bottom: 0; }
}

/* O topo de uma página de serviço não repete o hero da home: sem diagrama, com
   o mesmo aperto de tipografia e um fio embaixo que abre o conteúdo. */
.hero-interno {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--linha);
}
.hero-interno h1 { max-width: 18ch; }
/* O parágrafo de apoio da 404 não tem a classe .hero-texto; o CTA das páginas de
   serviço é um .btn solto, sem .hero-acoes em volta. As duas regras abaixo dão
   respiro aos dois casos sem exigir marcação extra em cada página. */
.hero-interno h1 + p { margin-top: 1rem; }
.hero-interno .hero-texto + .btn { margin-top: 2rem; }

/* Texto corrido das páginas legais: medida de leitura curta e títulos menores —
   aqui a hierarquia é de documento, não de página de venda. */
.texto-legal p,
.texto-legal li { color: var(--tinta-suave); max-width: 68ch; }
.texto-legal h1 { margin-bottom: 0.75rem; }
.texto-legal h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
}
.texto-legal p + p { margin-top: 1rem; }


/* ---- Chamada final em faixa ---- */
/* Era uma caixa branca com borda dentro de uma seção de outra cor — caixa dentro
   de caixa. Virou faixa de ponta a ponta no azul da marca, fechando a página
   antes do rodapé escuro. O fio no topo é o degradê do logotipo. */
.chamada-faixa {
  position: relative;
  background: var(--azul);
  color: var(--branco);
}
.chamada-faixa::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--azul-tec), var(--verde-claro));
}
.chamada-faixa .chamada {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.chamada-faixa .chamada p { color: rgb(255 255 255 / 0.84); }
.chamada-faixa .btn-primario,
.chamada-faixa .btn-produto {
  background: var(--branco);
  color: var(--azul);
}
.chamada-faixa .btn-primario:hover,
.chamada-faixa .btn-produto:hover { background: #e3ebf8; }
.chamada-faixa :focus-visible { outline-color: var(--branco); }
/* Na página do produto, a faixa usa o azul do Negócio de Amigo. */
.chamada-produto { background: var(--nda-azul); }
.chamada-produto .btn-produto { color: var(--nda-azul-escuro); }

/* ---- Produtos ---- */
/* O card do produto na home mostra o produto funcionando (a vitrine) em vez de
   só descrever. Fundo levemente tingido com as duas cores do logotipo do
   produto, sem borda: é um painel, não mais uma caixa com fio. */
.produto {
  display: grid;
  gap: 2.5rem 3.5rem;
  align-items: center;
  padding: clamp(1.5rem, 4.5vw, 3.5rem);
  border-radius: var(--raio);
  background: linear-gradient(135deg, #edf3ff 0%, #f4f8fb 55%, #edf8f2 100%);
}
@media (min-width: 900px) {
  .produto { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
}
.produto h3 {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.85rem;
}
.produto-texto > p { color: var(--tinta-suave); max-width: 50ch; }
.produto-texto .link-seta { margin-top: 1rem; }

/* Ícone ou logotipo do produto com o selo ao lado. */
.produto-identidade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}
.produto-identidade img { width: 56px; height: 56px; }
.produto-identidade .produto-logotipo { width: auto; height: 52px; }

/* Selo de situação, em texto normal. A bolinha verde é a mesma do ✓ do produto. */
.selo-produto {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nda-azul-escuro);
  background: var(--papel-alto);
  border: 1px solid rgb(37 99 235 / 0.22);
  border-radius: 999px;
}
.selo-produto::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nda-verde);
}

/* Botão principal da página do produto: o azul do produto, para quem clica
   chegar num site com a mesma cor do botão que apertou. */
.btn-produto {
  background: var(--nda-azul);
  color: var(--branco);
}
.btn-produto:hover { background: var(--nda-azul-escuro); }

/* Topo da página do produto: texto à esquerda, a vitrine à direita. */
.produto-hero {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .produto-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* Seções de duas colunas da página do produto reaproveitam a .sobre-grade da
   home, que lá não tem título dentro. */
.sobre-grade h2 { margin-bottom: 0; }
.sobre-grade strong { color: var(--tinta); }
.sobre-grade p + .btn,
.sobre-grade p + .link-seta { margin-top: 1.5rem; }

/* A pergunta do grupo de WhatsApp, em destaque: é o problema que o visitante
   reconhece. Quem destaca é o tamanho, não uma barra colorida ao lado — o
   bloco com borda lateral é um dos tiques de layout feito em série. */
.produto-pergunta {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.sobre-grade .produto-pergunta { color: var(--tinta); }

/* Bloco escuro "Um cadastro, várias comunidades". */
.produto-destaque {
  display: grid;
  gap: 1.5rem 3.5rem;
  align-items: end;
}
@media (min-width: 900px) {
  .produto-destaque { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.produto-destaque h2 { margin-bottom: 0; }
.produto-destaque > p {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  max-width: 46ch;
}

/* O compromisso de que pagar não compra posição, com o ✓ verde do produto. O
   texto alternativo vazio tira o símbolo do que o leitor de tela anuncia. */
.produto-garantia {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.produto-garantia::before {
  content: '✓';
  content: '✓' / '';
  color: var(--nda-verde);
  font-weight: 600;
  flex: 0 0 auto;
}

/* ---- Vitrine de exemplo ---- */
/* Ilustração do Negócio de Amigo em uso: a busca na vitrine de uma comunidade
   e os negócios recomendados pelos membros. É desenho em HTML no visual da
   Lumax, não captura de tela do produto — e diz que é exemplo. Para leitor de
   tela vale o aria-label; o miolo é apresentação. Sem JS, ou com menos
   movimento, aparece pronta; o main.js só a anima quando entra na tela. */
.vitrine {
  margin: 0;
  container-type: inline-size;
}
.vitrine-tela {
  padding: 1.25rem;
  background: var(--papel-alto);
  border: 1px solid rgb(22 50 79 / 0.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgb(7 26 45 / 0.06), 0 28px 56px -28px rgb(22 50 79 / 0.4);
  color: var(--nda-azul-escuro);
  font-size: 0.875rem;
  line-height: 1.4;
}
.vitrine small { display: block; font-size: 0.8125rem; color: var(--tinta-suave); }
.vitrine strong { font-weight: 600; }

.vitrine-comunidade {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e6ecf2;
}
.vitrine-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nda-azul);
  color: var(--branco);
  font-size: 0.8125rem;
  font-weight: 600;
}
.vitrine-avatar-negocio { background: #e8effd; color: var(--nda-azul); }

.vitrine-busca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block: 1rem;
  padding: 0.6rem 0.85rem;
  min-height: 2.75rem;
  border: 1.5px solid var(--nda-azul);
  border-radius: 10px;
  color: var(--nda-azul);
}
.vitrine-termo { color: var(--tinta); }

.vitrine-lista { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.vitrine-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  background: #f8faf9;
  border: 1px solid #e6ecf2;
  border-radius: 12px;
}
.vitrine-dados strong { display: block; }
.vitrine-recomenda {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nda-verde);
}
.vitrine-recomenda::before { content: '✓'; margin-right: 0.35rem; }
/* Algarismos de largura igual: enquanto o número conta, a frase não treme. */
.vitrine-recomenda b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vitrine-zap {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--nda-verde);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 600;
}
/* Vitrine estreita (a do card no celular): o botão sai e o nome respira. */
@container (max-width: 22rem) {
  .vitrine-item { grid-template-columns: 40px minmax(0, 1fr); }
  .vitrine-zap { display: none; }
}
.vitrine figcaption {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}

/* Estados da animação. Só valem com a classe que o main.js põe, então sem JS
   nada fica escondido. */
.vitrine-animando .vitrine-item {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.45s ease, translate 0.45s ease;
}
.vitrine-animando .vitrine-item.vitrine-mostra { opacity: 1; translate: 0 0; }
.vitrine-digitando .vitrine-termo::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: piscar 0.9s steps(1) infinite;
}
@keyframes piscar { 50% { opacity: 0; } }

/* ---- Como funciona: a trilha se acende com a rolagem ---- */
/* Com JS, o trilho cinza fica visível e uma cor o preenche de etapa em etapa
   quando a lista entra na tela, no degradê do logotipo (azul → ciano → verde).
   Cada via acende na cor do trecho quando o preenchimento chega nela. Depois,
   no desktop, um pulso de luz percorre a linha de tempos em tempos — o mesmo
   sinal do diagrama do topo da home. Sem JS, ou com menos movimento, a lista
   aparece como sempre foi, parada. */
.passos-anima li {
  --cor-de: var(--trilha-1);
  --cor-ate: var(--trilha-2);
  --cor-via: var(--trilha-1);
}
.passos-anima li:nth-child(2) { --cor-de: var(--trilha-2); --cor-ate: #0e93a0; --cor-via: var(--trilha-2); }
.passos-anima li:nth-child(3) { --cor-de: #0e93a0; --cor-ate: var(--trilha-3); --cor-via: #0e93a0; }
.passos-anima li:nth-child(4) { --cor-de: var(--trilha-3); --cor-ate: transparent; --cor-via: var(--trilha-3); }
.faixa-escura .passos-anima li { --cor-de: var(--link-inverso); --cor-ate: #6fdcc0; --cor-via: var(--link-inverso); }
.faixa-escura .passos-anima li:nth-child(2) { --cor-de: #6fdcc0; --cor-ate: #63e0a4; --cor-via: #6fdcc0; }
.faixa-escura .passos-anima li:nth-child(3) { --cor-de: #63e0a4; --cor-ate: var(--verde-claro); --cor-via: #63e0a4; }
.faixa-escura .passos-anima li:nth-child(4) { --cor-de: var(--verde-claro); --cor-ate: transparent; --cor-via: var(--verde-claro); }

/* O trecho é uma camada de cor (o degradê) sobre o trilho cinza; quem anima é
   o tamanho da camada, de 0 a 100%. O .passos repetido sobe a especificidade
   para empatar com .faixa-escura .passos li::before, cujo `background`
   abreviado apagaria a camada; empatado, vence esta, que vem depois. */
.passos.passos-anima li::before {
  background-repeat: no-repeat;
  transition: background-size 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.faixa-escura .passos-anima li::before { background-color: rgb(255 255 255 / 0.22); }
@media (min-width: 900px) {
  .passos.passos-anima li::before {
    top: 6px;
    height: 2px;
    background-image: linear-gradient(90deg, var(--cor-de), var(--cor-ate));
    background-size: 0% 100%;
  }
}
@media (max-width: 899px) {
  .passos.passos-anima li::before {
    left: 6.5px;
    width: 2px;
    background-image: linear-gradient(180deg, var(--cor-de), var(--cor-ate));
    background-size: 100% 0%;
  }
}
.passos-anima.passos-visivel li::before { background-size: 100% 100%; }

.passos-anima li::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.passos.passos-anima.passos-visivel li::after {
  border-color: var(--cor-via);
  background: var(--cor-via);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-via) 16%, transparent);
}

/* Cada trecho começa quando a via anterior acende. */
.passos-anima li:nth-child(1)::before { transition-delay: 0.15s; }
.passos-anima li:nth-child(2)::before { transition-delay: 0.65s; }
.passos-anima li:nth-child(3)::before { transition-delay: 1.15s; }
.passos-anima li:nth-child(4)::before { transition-delay: 1.65s; }
.passos-anima li:nth-child(2)::after { transition-delay: 0.6s; }
.passos-anima li:nth-child(3)::after { transition-delay: 1.1s; }
.passos-anima li:nth-child(4)::after { transition-delay: 1.6s; }

/* O pulso: um ponto de luz que vai da via 01 à via 04. Fica no <ol>, que mede
   a linha inteira: a última via está a 75% + 3/4 de um gap (3 × 1,5rem ÷ 4)
   do início da primeira. Começa depois do preenchimento e repete a cada 4,5s. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .passos-anima { position: relative; }
  .passos-anima.passos-visivel::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2.5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--branco);
    box-shadow: 0 0 0 3px rgb(0 168 232 / 0.35), 0 0 14px 4px rgb(0 168 232 / 0.45);
    opacity: 0;
    pointer-events: none;
    animation: pulso-passos 4.5s ease-in-out 2.4s infinite;
  }
}
@keyframes pulso-passos {
  0%   { left: 2.5px; opacity: 0; }
  6%   { opacity: 1; }
  55%  { left: calc(75% + 1.125rem + 2.5px); opacity: 1; }
  62%  { left: calc(75% + 1.125rem + 2.5px); opacity: 0; }
  100% { left: calc(75% + 1.125rem + 2.5px); opacity: 0; }
}

/* O sinal do diagrama é SMIL, que não obedece às regras de animação do CSS:
   para quem pede menos movimento, ele simplesmente não é desenhado. */
@media (prefers-reduced-motion: reduce) {
  .diagrama-sinal { display: none; }
}

/* ---- Recursos do produto ---- */
/* Grade aberta, sem caixa nem fio em volta: cada recurso é um título curto com
   a via verde do produto em cima. Oito cards com borda liam como planilha. */
.recursos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2.25rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.recursos li::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 2px solid var(--nda-verde);
  box-shadow: 0 0 0 4px rgb(27 130 86 / 0.1);
}
.recursos h3 { font-size: 1.1875rem; margin-bottom: 0.45rem; }
.recursos p { color: var(--tinta-suave); font-size: 0.9375rem; max-width: 34ch; }



/* ---- Como funciona do Negócio de Amigo: a rede de indicação ---- */
/* Na página do produto as etapas continuam lado a lado, mas a trilha de
   circuito da Lumax dá lugar a uma rede de pessoas: cada etapa é um círculo
   nas cores das duas pessoas do logotipo do produto (azul e verde, alternados)
   e um arco tracejado liga cada círculo ao seguinte, como uma indicação
   passando adiante. O .passos repetido nos seletores empata com as regras
   base de .passos (trilha e via) e, vindo depois, as substitui. */
.passos-rede li { --av: var(--nda-azul); }
.passos-rede li:nth-child(even) { --av: var(--nda-verde); }

/* O círculo da etapa, com o número. Texto alternativo vazio: a lista já é
   uma <ol>, o leitor de tela não precisa ouvir o número duas vezes. */
.passos.passos-rede li::after {
  content: counter(passo);
  content: counter(passo) / '';
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--av);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--av) 14%, transparent);
}
/* O "01" em cima do título sai: o número já está no círculo. */
.passos-rede strong::before { display: none; }

/* O arco: meia elipse tracejada que sai do centro de um círculo e pousa no
   centro do seguinte, passando por cima. As pontas ficam escondidas sob os
   círculos. */
.passos.passos-rede li::before {
  background: none;
  border: 2px dashed var(--av);
}
@media (min-width: 900px) {
  .passos.passos-rede li { padding-top: 5rem; }
  .passos.passos-rede li::after { left: 0; top: 0; }
  .passos.passos-rede li::before {
    left: 26px;
    right: auto;
    top: -10px;
    width: calc(100% + 1.5rem);   /* do centro deste círculo ao do próximo */
    height: 36px;
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }
  .passos.passos-rede li:last-child::before { display: none; }
}
/* No celular as etapas empilham e o arco vira um parêntese à esquerda,
   ligando um círculo ao de baixo. */
@media (max-width: 899px) {
  .passos.passos-rede li { padding-left: 4.5rem; padding-bottom: 2.25rem; min-height: 52px; }
  .passos.passos-rede li::after { left: 0; top: 0; }
  .passos.passos-rede li::before {
    display: block;
    left: -6px;
    top: 26px;
    bottom: auto;
    width: 32px;
    height: 100%;                 /* do centro deste círculo ao do próximo */
    border-right: 0;
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
  }
  .passos.passos-rede li:last-child::before { display: none; }
}
.passos-rede strong { margin-top: 0.1rem; }

/* Animação (só com a classe que o main.js põe): os círculos acendem um a um e
   cada arco se desenha do círculo dele até o próximo. Depois, de tempos em
   tempos, uma onda sai de cada círculo em sequência — a indicação correndo a
   rede. */
.passos.rede-anima li::after {
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.4s ease, scale 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.passos.rede-anima.rede-visivel li::after { opacity: 1; scale: 1; }
.passos.rede-anima li::before { transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
@media (min-width: 900px) {
  .passos.rede-anima:not(.rede-visivel) li::before { clip-path: inset(0 100% 0 0); }
}
@media (max-width: 899px) {
  .passos.rede-anima:not(.rede-visivel) li::before { clip-path: inset(0 0 100% 0); }
}
.passos.rede-anima.rede-visivel li::before { clip-path: inset(0 0 0 0); }

.passos.rede-anima li:nth-child(2)::after { transition-delay: 0.5s; }
.passos.rede-anima li:nth-child(3)::after { transition-delay: 1s; }
.passos.rede-anima li:nth-child(4)::after { transition-delay: 1.5s; }
.passos.rede-anima li:nth-child(1)::before { transition-delay: 0.15s; }
.passos.rede-anima li:nth-child(2)::before { transition-delay: 0.65s; }
.passos.rede-anima li:nth-child(3)::before { transition-delay: 1.15s; }

@media (prefers-reduced-motion: no-preference) {
  .passos.rede-anima.rede-visivel li::after { animation: onda-rede 4s ease-out infinite; }
  .passos.rede-anima.rede-visivel li:nth-child(1)::after { animation-delay: 2.2s; }
  .passos.rede-anima.rede-visivel li:nth-child(2)::after { animation-delay: 2.7s; }
  .passos.rede-anima.rede-visivel li:nth-child(3)::after { animation-delay: 3.2s; }
  .passos.rede-anima.rede-visivel li:nth-child(4)::after { animation-delay: 3.7s; }
}
@keyframes onda-rede {
  0%   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--av) 14%, transparent), 0 0 0 0 color-mix(in srgb, var(--av) 45%, transparent); }
  35%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--av) 14%, transparent), 0 0 0 18px color-mix(in srgb, var(--av) 0%, transparent); }
  100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--av) 14%, transparent), 0 0 0 18px color-mix(in srgb, var(--av) 0%, transparent); }
}