/* HALTEN · Site comercial do SaaS · Conceito visual: Registro
   Sem regras de importação, sem fonte remota, sem URL externa, sem dependência externa.

   Corte COMMERCIAL_WEB_PREMIUM: a mesma identidade ratificada — petróleo,
   grafite, papel frio e ouro como assinatura — com profundidade, ritmo e
   movimento. O movimento existe para explicar o produto (o registro que se
   acende, o fio que liga a operação), nunca para decorar. Tudo é transform e
   opacity; nada anima layout. */

:root {
  /* Paleta petróleo · identidade ratificada. Base institucional em azul,
     grafite de apoio, papel frio e ouro exclusivamente como assinatura. */
  --hlt-petrol-950: #071E29;
  --hlt-petrol-900: #0C2E3E;
  --hlt-petrol-700: #155067;
  --hlt-petrol-500: #2E7089;
  --hlt-petrol-300: #7FA6B8;
  --hlt-petrol-100: #D8E4EA;
  --hlt-grafite-900: #131B20;
  --hlt-grafite-700: #43525B;
  --hlt-grafite-500: #687983;
  --hlt-paper-50: #F4F6F7;
  --hlt-paper-0: #FFFFFF;
  --hlt-brass-500: #C6A96B;
  --hlt-brass-700: #8A6F39;
  --hlt-brass-100: #EFE6D4;
  --hlt-erro-600: #A6402D;

  /* Semânticos: nome estável, valor trocável. Nenhum componente referencia a
     cor base diretamente — trocar a paleta é trocar valor, não redesenhar. */
  --hlt-bg: var(--hlt-paper-50);
  --hlt-surface: var(--hlt-paper-0);
  --hlt-ink: var(--hlt-grafite-900);
  --hlt-ink-2: var(--hlt-grafite-700);
  /* --hlt-ink-3 fica 4,16:1 sobre papel: proibido como cor de texto até que
     uma regra prove tamanho >= 19px ou rótulo mono em caixa alta. */
  --hlt-ink-3: var(--hlt-grafite-500);
  --hlt-dark-bg: var(--hlt-petrol-900);
  --hlt-dark-bg-2: var(--hlt-petrol-950);
  --hlt-dark-ink: var(--hlt-paper-50);
  --hlt-dark-ink-2: #B9CDD8;
  --hlt-dark-ink-3: var(--hlt-petrol-300);
  --hlt-action: var(--hlt-petrol-700);
  --hlt-action-hover: var(--hlt-petrol-900);
  --hlt-accent: var(--hlt-brass-500);
  --hlt-accent-ink: var(--hlt-brass-700);
  --hlt-accent-halo: rgba(198, 169, 107, 0.25);
  --hlt-danger: var(--hlt-erro-600);
  --hlt-focus: var(--hlt-brass-700);
  --hlt-hairline: rgba(12, 46, 62, 0.12);
  --hlt-hairline-2: rgba(12, 46, 62, 0.24);
  --hlt-hairline-dark: rgba(244, 246, 247, 0.16);
  --hlt-slot-bg: rgba(198, 169, 107, 0.08);
  --hlt-slot-border: rgba(138, 111, 57, 0.45);

  /* Profundidade: sombras frias derivadas do petróleo, nunca preto puro.
     Três degraus bastam — repouso, flutuação e janela de produto. */
  --hlt-sombra-1: 0 1px 2px rgba(7, 30, 41, 0.06), 0 2px 8px rgba(7, 30, 41, 0.06);
  --hlt-sombra-2: 0 2px 6px rgba(7, 30, 41, 0.08), 0 12px 32px rgba(7, 30, 41, 0.12);
  --hlt-sombra-3: 0 4px 12px rgba(7, 30, 41, 0.18), 0 24px 64px rgba(7, 30, 41, 0.28);

  /* Movimento: uma língua só. Micro-interação em ~180ms, entrada em ~560ms,
     sempre com saída desacelerada — o elemento chega, nunca desliza sem fim. */
  --hlt-dur-micro: 180ms;
  --hlt-dur-entra: 560ms;
  --hlt-ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --hlt-desloc-entra: 20px;

  /* Famílias declaradas por NOME, com fallback de sistema. Nenhum arquivo de
     fonte no repositório, nenhuma regra de importação e nenhum host remoto.
     O eixo de
     largura do Archivo Expanded só existe com o arquivo variável, que fica
     para o corte de self-hosting. */
  --hlt-fonte-texto: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hlt-fonte-titulo: var(--hlt-fonte-texto);
  --hlt-fonte-dado: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --hlt-container: 72.5rem;
  --hlt-largura-texto: 42.5rem;
  --hlt-largura-formulario: 35rem;

  --hlt-margem: 2.5rem;
  --hlt-ritmo-secao: 7rem;
  --hlt-ritmo-curto: 1.5rem;

  --hlt-raio: 6px;
  --hlt-raio-curto: 2px;
  --hlt-raio-cartao: 10px;
  --hlt-altura-cabecalho: 4.5rem;
  --hlt-altura-toque: 2.75rem;
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hlt-altura-cabecalho) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hlt-bg);
  color: var(--hlt-ink);
  font-family: var(--hlt-fonte-texto);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection {
  background: var(--hlt-petrol-100);
  color: var(--hlt-petrol-950);
}

[hidden] {
  display: none !important;
}

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

p {
  margin: 0 0 1.25rem;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0 0 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--hlt-accent);
  outline-offset: 2px;
}

.secao--clara :focus-visible,
.secao--alternada :focus-visible,
.rodape :focus-visible {
  outline-color: var(--hlt-focus);
}

/* ---------- Skip link ---------- */

.pular-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--hlt-dark-bg);
  color: var(--hlt-bg);
  font-size: 0.9375rem;
  text-decoration: none;
}

.pular-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------- Cabeçalho ---------- */

.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
}

.cabecalho--transicao {
  transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.cabecalho--solido {
  background: var(--hlt-dark-bg);
  border-bottom-color: var(--hlt-hairline-dark);
  box-shadow: var(--hlt-sombra-1);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--hlt-container);
  min-height: var(--hlt-altura-cabecalho);
  margin: 0 auto;
  padding: 0 var(--hlt-margem);
}

.cabecalho__marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.cabecalho__marca img {
  display: block;
  width: auto;
  height: 1.75rem;
}

.cabecalho__nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.cabecalho__ancora {
  position: relative;
  color: var(--hlt-dark-ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color var(--hlt-dur-micro) ease-out;
}

/* A âncora atual e a âncora sob o cursor ganham um sublinhado que cresce do
   centro: o estado é desenhado, não só colorido. */
.cabecalho__ancora::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.125rem;
  height: 2px;
  background: var(--hlt-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--hlt-dur-micro) var(--hlt-ease-saida);
}

.cabecalho__ancora:hover {
  color: var(--hlt-bg);
}

.cabecalho__ancora:hover::after,
.cabecalho__ancora[aria-current="page"]::after {
  transform: scaleX(1);
}

.cabecalho__cta {
  flex: none;
}

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

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hlt-altura-toque);
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hlt-raio);
  background: var(--hlt-dark-bg);
  color: var(--hlt-bg);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--hlt-dur-micro) var(--hlt-ease-saida),
    box-shadow var(--hlt-dur-micro) ease-out,
    background-color var(--hlt-dur-micro) ease-out,
    border-color var(--hlt-dur-micro) ease-out,
    color var(--hlt-dur-micro) ease-out;
}

.botao--primario {
  background: var(--hlt-action);
  color: var(--hlt-bg);
  border-top: 2px solid var(--hlt-accent);
  box-shadow: var(--hlt-sombra-1);
}

/* O botão secundário é transparente e por isso herda o contraste do fundo em
   que está. A regra base serve o fundo claro; a variante escura é declarada
   junto das demais inversões. Sem isso, texto em papel sobre papel dá 1:1. */
.botao--secundario {
  background: transparent;
  color: var(--hlt-ink);
  border: 1px solid var(--hlt-hairline-2);
}

.secao--escura .botao--secundario {
  color: var(--hlt-bg);
  border-color: var(--hlt-hairline-dark);
}

.botao--contorno {
  background: transparent;
  color: var(--hlt-bg);
  border: 1px solid var(--hlt-accent);
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
}

.secao--escura .botao--primario,
.botao--forte,
.cta-fixo .botao--primario {
  background: var(--hlt-bg);
  color: var(--hlt-dark-bg);
  border-top: 2px solid var(--hlt-accent-ink);
  font-weight: 700;
}

.botao--largo {
  width: 100%;
}

/* O botão sobe um fio e a sombra cresce: resposta física, não troca de cor.
   No clique ele assenta — o estado pressionado é mais baixo que o repouso. */
.botao:hover {
  transform: translateY(-1px);
  box-shadow: var(--hlt-sombra-2);
}

.botao--primario:hover {
  background: var(--hlt-action-hover);
}

.secao--escura .botao--primario:hover,
.botao--forte:hover,
.cta-fixo .botao--primario:hover {
  background: var(--hlt-paper-0);
}

.botao--secundario:hover {
  border-color: var(--hlt-accent-ink);
  box-shadow: none;
}

.secao--escura .botao--secundario:hover {
  border-color: var(--hlt-accent);
}

.botao--contorno:hover {
  background: rgba(244, 246, 247, 0.08);
  box-shadow: none;
}

.botao:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--hlt-sombra-1);
}

.botao[disabled],
.botao[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 var(--hlt-ritmo-curto);
}

.acoes--discreta {
  margin-top: var(--hlt-ritmo-curto);
}

/* ---------- Layout de seção ---------- */

.secao {
  padding: var(--hlt-ritmo-secao) 0;
}

.secao--escura {
  background: var(--hlt-dark-bg);
  color: var(--hlt-bg);
}

.secao--clara {
  background: var(--hlt-bg);
  color: var(--hlt-ink);
}

.secao--alternada {
  background: var(--hlt-surface);
  color: var(--hlt-ink);
  border-top: 1px solid var(--hlt-hairline);
  border-bottom: 1px solid var(--hlt-hairline);
}

.retrato,
.cadeia,
.necessidades,
.registrado,
.conversa {
  scroll-margin-top: var(--hlt-altura-cabecalho);
}

.secao__titulo {
  font-size: clamp(1.6875rem, 1.05rem + 2.1vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

.conteudo {
  width: 100%;
  max-width: var(--hlt-container);
  margin: 0 auto;
  padding: 0 var(--hlt-margem);
}

.conteudo--estreito {
  max-width: var(--hlt-largura-texto);
  margin: 0 auto;
}

.conteudo.conteudo--estreito {
  max-width: calc(var(--hlt-largura-texto) + var(--hlt-margem) * 2);
}

.legal h2 {
  margin-top: 2.75rem;
}

.legal h3 {
  margin-top: 2rem;
  font-size: 1.125rem;
}

.legal ul {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  list-style: disc;
}

.legal li + li {
  margin-top: 0.5rem;
}

.legal a:not(.botao) {
  color: var(--hlt-action);
  text-underline-offset: 0.18em;
}

.conteudo.conteudo--formulario {
  max-width: calc(var(--hlt-largura-formulario) + var(--hlt-margem) * 2);
}

/* ---------- Eixo único de container ----------
   A medida de texto passa a ser limitada DENTRO do container. Antes, o
   container estreito era recentrado no viewport e abria um segundo eixo
   visual: /solucoes chegava ao desktop com três bordas esquerdas diferentes —
   a dos cartões, a do cabeçalho e a do título — cada uma começando em um
   lugar.

   A medida não muda de tamanho. O conteúdo de .conteudo--estreito já media
   exatamente --hlt-largura-texto dentro do próprio recuo e continua medindo:
   a quebra de linha é a mesma linha a linha. O que muda é onde ela começa.

   Rodapé e páginas legais ficam de fora. Ali a medida estreita é o único
   container da superfície, não existe segundo eixo para conciliar, e o
   centramento é intencional. */

main .conteudo.conteudo--estreito:not(.legal),
main .conteudo.conteudo--formulario {
  max-width: var(--hlt-container);
}

main .conteudo.conteudo--estreito:not(.legal) > * {
  max-width: var(--hlt-largura-texto);
}

main .conteudo.conteudo--formulario > * {
  max-width: var(--hlt-largura-formulario);
}

/* Medida aninhada dentro do container largo: alinha pela borda, não recentra.
   Sem isto, o título de uma seção fica deslocado do bloco que ele apresenta. */
main .conteudo > .conteudo--estreito {
  margin-left: 0;
}

/* A headline do Hero é a única voz que fala mais largo que a medida de texto:
   as linhas ratificadas precisam caber inteiras no desktop, senão a quebra
   autoral vira quebra dupla. O apoio continua na medida de leitura. */
main .conteudo.conteudo--estreito:not(.legal) > .hero__titulo {
  max-width: 56rem;
}

.destaque {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Hero ---------- */

/* O Hero abre num campo mais fundo que o resto da superfície escura: o
   gradiente desce do petróleo-950 para o 900, e uma linha de latão fecha a
   base como assinatura. O contraste só aumenta em relação ao par ratificado. */
.hero {
  padding-top: calc(var(--hlt-altura-cabecalho) + 2rem);
  background: linear-gradient(178deg, var(--hlt-dark-bg-2) 0%, var(--hlt-dark-bg) 72%);
  border-bottom: 1px solid var(--hlt-accent-halo);
  position: relative;
}

.eyebrow {
  margin: 0 0 1.5rem;
  color: var(--hlt-accent-ink);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A régua do eyebrow: um traço curto de latão antes do rótulo, a mesma
   assinatura que atravessa o logotipo. */
.eyebrow::before {
  content: "";
  display: inline-block;
  vertical-align: 0.22em;
  width: 1.375rem;
  height: 2px;
  margin-right: 0.625rem;
  background: var(--hlt-accent);
}

.hero__titulo {
  font-size: clamp(2.25rem, 1.2rem + 3.9vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
}

.hero__linha {
  display: block;
}

.hero__subtitulo {
  max-width: var(--hlt-largura-texto);
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--hlt-dark-ink-2);
  margin-bottom: 2.25rem;
}

.hero__subtitulo--curto {
  display: none;
}

.hero__qualificador {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--hlt-dark-ink-2);
}

.hero__micro {
  margin: 0;
  font-size: 0.875rem;
  color: var(--hlt-dark-ink-3);
}

/* O produto real fecha o Hero: a janela ocupa o container inteiro — mais
   larga que a medida de texto de propósito, porque aqui a evidência é a
   protagonista, não a leitura. */
.hero__visual {
  margin-top: 3.5rem;
}

.cadeia__visual {
  margin-top: 3rem;
}

/* Entrada encenada do Hero: eyebrow, as três linhas do título, o apoio, as
   ações e os qualificadores chegam em sequência. É animação de CSS puro — roda
   sem JavaScript, e o bloco de redução de movimento a colapsa para o estado
   final. O estado estático dos elementos é visível: a animação só preenche o
   caminho até ele. */
@keyframes hlt-sobe {
  from {
    opacity: 0;
    transform: translateY(var(--hlt-desloc-entra));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .eyebrow,
.hero .hero__linha,
.hero .hero__subtitulo,
.hero .hero__subtitulo--curto,
.hero .acoes,
.hero .hero__qualificador,
.hero .hero__micro,
.hero .hero__visual {
  animation: hlt-sobe var(--hlt-dur-entra) var(--hlt-ease-saida) both;
}

.hero .eyebrow {
  animation-delay: 40ms;
}

.hero .hero__linha:nth-child(1) {
  animation-delay: 120ms;
}

.hero .hero__linha:nth-child(2) {
  animation-delay: 190ms;
}

.hero .hero__linha:nth-child(3) {
  animation-delay: 260ms;
}

.hero .hero__subtitulo,
.hero .hero__subtitulo--curto {
  animation-delay: 360ms;
}

.hero .acoes {
  animation-delay: 440ms;
}

.hero .hero__qualificador {
  animation-delay: 520ms;
}

.hero .hero__micro {
  animation-delay: 560ms;
}

.hero .hero__visual {
  animation-delay: 620ms;
}

/* ---------- Revelação por rolagem ----------
   Progressiva por contrato: sem JavaScript, tudo é visível — a classe .rvl
   sozinha não esconde nada. Só quando o script arma a raiz (html.rvl-armado)
   os elementos ainda fora da janela partem de baixo e acendem ao entrar.
   O observer vive em site.js; aqui só existem os dois estados e a transição. */

html.rvl-armado .rvl {
  opacity: 0;
  transform: translateY(var(--hlt-desloc-entra));
  transition:
    opacity var(--hlt-dur-entra) var(--hlt-ease-saida),
    transform var(--hlt-dur-entra) var(--hlt-ease-saida);
}

html.rvl-armado .rvl--on {
  opacity: 1;
  transform: translateY(0);
}

/* Grupo com escalonamento: os filhos diretos entram em sequência curta.
   O atraso é do grupo, determinístico, limitado a seis posições. */
html.rvl-armado .rvl-grupo > .rvl:nth-child(2) { transition-delay: 70ms; }
html.rvl-armado .rvl-grupo > .rvl:nth-child(3) { transition-delay: 140ms; }
html.rvl-armado .rvl-grupo > .rvl:nth-child(4) { transition-delay: 210ms; }
html.rvl-armado .rvl-grupo > .rvl:nth-child(5) { transition-delay: 280ms; }
html.rvl-armado .rvl-grupo > .rvl:nth-child(6) { transition-delay: 350ms; }

/* ---------- O retrato ---------- */

/* As três cenas ganham número de sistema: um contador em fonte de dado, como
   entradas de um registro. O texto é o mesmo; a estrutura é que passa a dizer
   "isto é uma sequência de fatos". */
.retrato .conteudo--estreito {
  counter-reset: cena;
}

.cena {
  counter-increment: cena;
  position: relative;
  padding: 0 0 1.75rem 3.25rem;
  border-bottom: 1px solid var(--hlt-hairline);
  margin-bottom: 1.75rem;
}

.cena::before {
  content: "0" counter(cena);
  position: absolute;
  left: 0;
  top: 0.3125rem;
  color: var(--hlt-accent-ink);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.virada {
  border-left: 2px solid var(--hlt-accent-ink);
  padding-left: 1.5rem;
  margin-top: 2.5rem;
}

.virada p {
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 500;
}

.virada p:last-child {
  margin-bottom: 0;
}

/* ---------- Cadeia conectada ----------
   A assinatura HALTEN do fluxo: um trilho que atravessa os elos e se desenha
   quando a seção entra, e nós que acendem em sequência — do primeiro registro
   ao resultado em latão. Sem JavaScript, trilho e nós já nascem acesos. */

.fio {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin: 3.5rem 0 2rem;
}

/* O trilho nasce no centro do primeiro nó e termina no centro do último:
   cada coluna ocupa 1/5 da grade, então o último nó começa a 80% — o trilho
   vai do meio do primeiro ponto até o meio do último, sem sobra solta. */
.fio::before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: 80%;
  height: 1px;
  background: var(--hlt-hairline);
}

/* O traço vivo por cima do trilho: latão, desenhado da esquerda para a
   direita. É transform de scaleX — nada de largura animada. */
.fio::after {
  content: "";
  position: absolute;
  top: 0.28125rem;
  left: 0.3125rem;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, var(--hlt-accent-halo), var(--hlt-accent));
  transform-origin: left center;
  transform: scaleX(1);
}

html.rvl-armado .fio.rvl::after {
  transform: scaleX(0);
  transition: transform 1100ms var(--hlt-ease-saida) 150ms;
}

html.rvl-armado .fio.rvl--on::after {
  transform: scaleX(1);
}

.fio__elo {
  position: relative;
  padding-top: 2rem;
}

.fio__no {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--hlt-dark-bg);
  z-index: 1;
}

html.rvl-armado .fio.rvl .fio__no {
  transform: scale(0.4);
  opacity: 0.35;
  transition:
    transform 420ms var(--hlt-ease-saida),
    opacity 420ms ease-out,
    box-shadow 420ms ease-out;
}

html.rvl-armado .fio.rvl--on .fio__no {
  transform: scale(1);
  opacity: 1;
}

/* Os nós acendem na ordem dos elos, atrás do traço que avança. */
html.rvl-armado .fio.rvl--on .fio__elo:nth-child(1) .fio__no { transition-delay: 150ms; }
html.rvl-armado .fio.rvl--on .fio__elo:nth-child(2) .fio__no { transition-delay: 380ms; }
html.rvl-armado .fio.rvl--on .fio__elo:nth-child(3) .fio__no { transition-delay: 610ms; }
html.rvl-armado .fio.rvl--on .fio__elo:nth-child(4) .fio__no { transition-delay: 840ms; }
html.rvl-armado .fio.rvl--on .fio__elo:nth-child(5) .fio__no { transition-delay: 1070ms; }

.fio__elo--final .fio__no {
  background: var(--hlt-accent-ink);
  box-shadow: 0 0 0 3px var(--hlt-accent-halo);
}

.fio__titulo {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.fio__preservado {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.fio__consequencia {
  font-size: 0.9375rem;
  color: var(--hlt-ink-2);
  margin-bottom: 0;
}

.fio__legenda {
  max-width: var(--hlt-largura-texto);
  font-size: 0.9375rem;
  color: var(--hlt-ink-2);
  border-top: 1px solid var(--hlt-hairline);
  padding-top: 1.25rem;
  margin: 0;
}

/* ---------- Duas necessidades ---------- */

.par {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin: 2.5rem 0 3rem;
}

.par--tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.par__bloco {
  border-top: 1px solid var(--hlt-hairline);
  padding-top: 1.75rem;
}

/* Nos trios, o bloco vira cartão de superfície com keyline de latão no topo:
   a mesma informação, com corpo. O par de comparação continua editorial. */
.par--tres .par__bloco {
  border: 1px solid var(--hlt-hairline);
  border-top: 2px solid var(--hlt-accent);
  border-radius: var(--hlt-raio-cartao);
  background: var(--hlt-surface);
  padding: 1.75rem;
  box-shadow: var(--hlt-sombra-1);
  transition:
    transform var(--hlt-dur-micro) var(--hlt-ease-saida),
    box-shadow var(--hlt-dur-micro) ease-out,
    border-color var(--hlt-dur-micro) ease-out;
}

.par--tres .par__bloco:hover {
  transform: translateY(-2px);
  box-shadow: var(--hlt-sombra-2);
}

.par__rotulo {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hlt-ink-2);
  margin-bottom: 1.25rem;
}

.par--tres .par__rotulo {
  font-family: var(--hlt-fonte-dado);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--hlt-accent-ink);
}

.blindagem {
  font-weight: 500;
  margin-bottom: 0;
}

.fecho {
  font-size: 1.25rem;
  line-height: 1.5;
  border-top: 1px solid var(--hlt-hairline);
  padding-top: 1.75rem;
}

/* ---------- A história do resultado ----------
   Os dois lados são um livro-razão: o lado sem registro em papel apagado, o
   lado com registro sobre petróleo — a diferença é a tese do produto e a
   composição a afirma. */

.registrado .par {
  gap: 1.5rem;
}

.registrado .par__bloco {
  border: 1px solid var(--hlt-hairline);
  border-radius: var(--hlt-raio-cartao);
  padding: 2rem;
  background: var(--hlt-bg);
}

.registrado .par__bloco--halten {
  background: var(--hlt-dark-bg);
  border-color: var(--hlt-dark-bg);
  color: var(--hlt-dark-ink-2);
  box-shadow: var(--hlt-sombra-2);
}

.registrado .par__bloco--halten .par__rotulo {
  color: var(--hlt-accent);
  font-family: var(--hlt-fonte-dado);
  font-weight: 600;
  font-size: 0.8125rem;
}

.registrado .par__bloco--halten p {
  color: var(--hlt-dark-ink-2);
}

/* ---------- Programa Fundador ---------- */

.bloco__titulo {
  font-size: 1.4375rem;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

/* Os momentos da entrada saíram da seção escura do Programa e passaram a viver
   no bloco de decisão, que é claro: a tinta e a keyline acompanham a superfície,
   senão o passo a passo fica ilegível sobre papel. */
.momentos {
  counter-reset: momento;
  border-left: 1px solid var(--hlt-hairline);
  padding-left: 1.75rem;
  margin-bottom: 1rem;
}

.momentos__item {
  counter-increment: momento;
  position: relative;
  padding-bottom: 1.25rem;
  color: var(--hlt-ink-2);
}

.momentos__item::before {
  content: counter(momento);
  position: absolute;
  left: -2.4375rem;
  top: 0.0625rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--hlt-action);
  color: var(--hlt-bg);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.375rem;
  text-align: center;
}

.momentos__item strong {
  color: var(--hlt-ink);
}

.nota {
  color: var(--hlt-dark-ink-2);
  font-size: 1rem;
}

.fundador {
  background: linear-gradient(160deg, var(--hlt-action) 0%, var(--hlt-petrol-900) 100%);
  border-radius: var(--hlt-raio-cartao);
  border-top: 2px solid var(--hlt-accent);
  padding: 2rem;
  margin: 3rem 0;
  box-shadow: var(--hlt-sombra-2);
}

.fundador__titulo {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hlt-bg);
  margin-bottom: 1.5rem;
}

.fundador__corpo {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}

.fundador__figura {
  flex: 0 0 13rem;
  margin: 0;
}

.fundador__figura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--hlt-raio-curto);
}

.fundador__texto {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--hlt-dark-ink-2);
}

.fundador__texto p:last-of-type {
  margin-bottom: 0;
}

.fundador__nome {
  margin-bottom: 0.25rem;
  color: var(--hlt-bg);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

.fundador__papel {
  margin-bottom: 1.25rem;
  color: var(--hlt-bg);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fundador__mais {
  margin-top: 1.5rem;
  border-top: 1px solid var(--hlt-hairline-dark);
  padding-top: 1rem;
}

.fundador__mais summary {
  display: flex;
  align-items: center;
  min-height: var(--hlt-altura-toque);
  cursor: pointer;
  color: var(--hlt-bg);
  font-size: 0.9375rem;
  font-weight: 500;
}

.fundador__mais p {
  margin-top: 1rem;
  font-size: 1rem;
}

/* ---------- Conversa e formulário ---------- */

.triade {
  margin-bottom: 1.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

.triade__linha {
  display: block;
  padding-left: 1.125rem;
  border-left: 2px solid var(--hlt-accent);
}

.triade__linha + .triade__linha {
  margin-top: 0.375rem;
}

.formulario {
  margin: 2.5rem 0 1.5rem;
}

.campo {
  margin-bottom: 1.25rem;
}

.campo__rotulo {
  display: block;
  margin-bottom: 0.4375rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.campo__controle {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--hlt-hairline-2);
  border-radius: var(--hlt-raio);
  background: var(--hlt-surface);
  color: var(--hlt-ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.campo__controle::placeholder {
  color: var(--hlt-ink-2);
  opacity: 1;
}

.campo__controle:focus {
  border-color: var(--hlt-action);
  outline: 2px solid var(--hlt-focus);
  outline-offset: 2px;
}

select.campo__controle {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--hlt-dark-bg) 50%),
    linear-gradient(135deg, var(--hlt-dark-bg) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 1.4375rem, calc(100% - 0.75rem) 1.4375rem;
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

.privacidade {
  font-size: 0.875rem;
  color: var(--hlt-ink-2);
  margin-bottom: 0;
}

.confirmacao {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

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

.rodape {
  background: var(--hlt-bg);
  border-top: 1px solid var(--hlt-hairline);
  padding: 3rem 0;
  color: var(--hlt-ink-2);
  font-size: 0.9375rem;
}

.rodape__marca {
  margin-bottom: 0.5rem;
  color: var(--hlt-dark-bg);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.rodape__descricao {
  margin-bottom: 1.25rem;
  color: var(--hlt-ink);
}

.rodape__contato,
.rodape__legais {
  margin-bottom: 0.5rem;
}

.rodape__aviso {
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* ---------- CTA fixo no mobile ---------- */

.cta-fixo {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.75rem 1.25rem;
  background: var(--hlt-dark-bg);
  border-top: 1px solid var(--hlt-hairline-dark);
  box-shadow: var(--hlt-sombra-2);
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
  :root {
    --hlt-ritmo-secao: 6rem;
  }

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

  .fio::before,
  .fio::after {
    display: none;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  :root {
    --hlt-margem: 1.25rem;
    --hlt-ritmo-secao: 5rem;
    --hlt-altura-cabecalho: 3.75rem;
  }

  body {
    font-size: 1.0625rem;
  }

  .cabecalho__nav {
    gap: 0.75rem;
  }

  .cabecalho__ancora {
    display: none;
  }

  .hero {
    padding-top: calc(var(--hlt-altura-cabecalho) + 2rem);
  }

  .hero__subtitulo {
    display: none;
  }

  .hero__subtitulo--curto {
    display: block;
    font-size: 1.125rem;
  }

  .acoes {
    flex-direction: column;
    align-items: stretch;
  }

  .acoes .botao {
    width: 100%;
  }

  .cena {
    padding-left: 2.25rem;
  }

  .cena--reduzivel {
    font-size: 1rem;
    color: var(--hlt-ink-2);
  }

  .virada p {
    font-size: 1.125rem;
  }

  .destaque {
    font-size: 1.125rem;
  }

  .fio {
    grid-template-columns: 1fr;
    gap: 0;
    border-left: 1px solid var(--hlt-hairline);
    padding-left: 1.75rem;
    margin: 2.5rem 0 1.5rem;
  }

  .fio__elo {
    padding-top: 0;
    padding-bottom: 1.75rem;
  }

  .fio__no {
    left: -2.1875rem;
    top: 0.5rem;
  }

  .fio__consequencia {
    display: none;
  }

  .par {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .par--tres .par__bloco,
  .registrado .par__bloco {
    padding: 1.5rem;
  }

  .fecho {
    font-size: 1.125rem;
  }

  .momentos {
    padding-left: 1.5rem;
  }

  .momentos__item::before {
    left: -2.1875rem;
  }

  .fundador {
    padding: 1.5rem;
  }

  .fundador__corpo {
    flex-direction: column;
    gap: 1.25rem;
  }

  .fundador__figura {
    flex: none;
    width: 6.5rem;
  }

  .fundador__figura img {
    aspect-ratio: 1 / 1;
  }

  .triade {
    font-size: 1.125rem;
  }

  .cta-fixo--visivel {
    display: block;
  }

  body.tem-cta-fixo {
    padding-bottom: 5.25rem;
  }
}

/* ---------- Telas estreitas: 390 px e 360 px ---------- */

@media (max-width: 400px) {
  :root {
    --hlt-margem: 1.25rem;
  }

  .cabecalho__marca img {
    height: 1.5rem;
  }
}

@media (max-width: 365px) {
  :root {
    --hlt-margem: 1rem;
  }

  .botao {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }

  .cabecalho__cta {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
  }
}

/* ---------- Redução de movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Formulário: campos acrescentados pelo receptor ---------- */

/* Honeypot. Oculto por CSS e não por type="hidden": robôs preenchem campos
   ocultos por atributo com muito mais frequência. O nome do campo é escolhido
   para não atrair preenchimento automático de gerenciador de senhas. */
.campo--oculto {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo__controle--area {
  min-height: 5.5rem;
  resize: vertical;
  font-family: inherit;
}

.campo__opcional {
  color: var(--hlt-ink-2);
  font-weight: 400;
}

.campo--consentimento {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

/* 24px é o alvo mínimo de ponteiro; o rótulo associado amplia a área efetiva. */
.campo__caixa {
  margin-top: 0.125rem;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.campo__rotulo--caixa {
  margin: 0;
  font-weight: 400;
  line-height: 1.45;
}

.campo__controle:user-invalid {
  border-color: var(--hlt-action);
}

.acoes--paralela {
  margin-bottom: var(--hlt-ritmo-curto);
  color: var(--hlt-ink-2);
}

/* ---------- Cabeçalho claro · páginas internas sobre papel ---------- */

.cabecalho--claro {
  background: var(--hlt-bg);
  border-bottom-color: var(--hlt-hairline);
}

/* ---------- Eyebrow sobre escuro ---------- */

.secao--escura .eyebrow {
  color: var(--hlt-accent);
}

/* ---------- Slot · dado pendente com contrato visual ----------
   Todo dado ainda nao confirmado aparece marcado. Nenhum valor e inventado e
   nenhuma ausencia e escondida: o slot e linguagem, nao improviso. */

.slot {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px dashed var(--hlt-slot-border);
  border-radius: var(--hlt-raio-curto);
  background: var(--hlt-slot-bg);
  color: var(--hlt-ink-2);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

/* Sobre escuro o slot inverte: texto claro e borda em ouro-500, que só é
   legível nesse fundo. O rodapé é claro e por isso usa a regra base. */
.secao--escura .slot {
  color: var(--hlt-dark-ink-2);
  border-color: var(--hlt-accent);
}

/* ---------- Cabeçalho claro com navegação ----------
   O cabeçalho do layout SITE nasceu transparente sobre o Hero escuro. Página
   que abre em papel usa o tema claro, e aí a navegação precisa de tinta — não
   do texto pensado para fundo escuro. */

.cabecalho--claro .cabecalho__ancora {
  color: var(--hlt-ink-2);
}

.cabecalho--claro .cabecalho__ancora:hover,
.cabecalho--claro .cabecalho__ancora[aria-current="page"] {
  color: var(--hlt-ink);
}

.cabecalho--claro .cabecalho__ancora[aria-current="page"]::after {
  background: var(--hlt-accent-ink);
}

.cabecalho--claro .botao--contorno {
  color: var(--hlt-ink);
  border-color: var(--hlt-accent-ink);
}

.cabecalho--claro .botao--contorno:hover {
  background: rgba(12, 46, 62, 0.06);
}

/* ---------- Chip de estado ----------
   Cor nunca informa sozinha: o chip carrega rótulo textual e um ponto de forma
   distinta — cheio para o que está em conclusão, vazado para o planejado. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--hlt-slot-border);
  border-radius: 999px;
  background: var(--hlt-slot-bg);
  color: var(--hlt-ink-2);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chip__ponto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--hlt-accent-ink);
}

.chip--futuro .chip__ponto {
  background: transparent;
  border: 1px solid var(--hlt-ink-2);
}

/* ---------- Moldura de captura pendente ----------
   Captura que ainda não existe aparece como moldura identificada. Nunca uma
   imagem quebrada, nunca a tela de outro produto no lugar. */

.moldura {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2rem 1rem;
  min-height: 12rem;
  /* A moldura ocupa a MESMA proporção da captura que vai substituí-la. Sem
     isto, o layout se desloca no dia em que a imagem real chega — e o contrato
     é que ela entre sem redesenho. */
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--hlt-slot-border);
  border-radius: var(--hlt-raio);
  background: var(--hlt-slot-bg);
}

.moldura[data-ratio="4/3"] {
  aspect-ratio: 4 / 3;
}

.moldura[data-ratio="1/1"] {
  aspect-ratio: 1 / 1;
}

.moldura__rotulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--hlt-ink-2);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.moldura__id {
  font-weight: 600;
  text-transform: uppercase;
}

.captura {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hlt-raio);
}

/* ---------- Janela de produto ----------
   Moldura de captura REAL: uma barra de sistema em petróleo com três pontos e
   um rótulo mono, e a tela do produto dentro. É chrome ao redor de uma imagem
   verdadeira — nunca uma interface desenhada no lugar do produto. */

.janela {
  margin: 0;
  border-radius: var(--hlt-raio-cartao);
  background: var(--hlt-dark-bg-2);
  border: 1px solid var(--hlt-hairline-dark);
  box-shadow: var(--hlt-sombra-3);
  overflow: hidden;
}

.janela__barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--hlt-dark-bg-2);
  border-bottom: 1px solid var(--hlt-hairline-dark);
}

.janela__pontos {
  display: inline-flex;
  gap: 0.375rem;
}

.janela__pontos span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--hlt-hairline-dark);
}

.janela__rotulo {
  color: var(--hlt-dark-ink-3);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.janela img {
  display: block;
  width: 100%;
  height: auto;
}

.janela__legenda {
  padding: 0.75rem 1rem;
  color: var(--hlt-dark-ink-2);
  font-size: 0.875rem;
  border-top: 1px solid var(--hlt-hairline-dark);
  margin: 0;
}

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

.modulos {
  display: grid;
  gap: 4rem;
  margin-top: 3.5rem;
}

.modulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.modulo--texto-direita .modulo__texto {
  order: 2;
}

.modulo__ordem {
  margin: 0 0 0.75rem;
  color: var(--hlt-ink-2);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modulo__titulo {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.modulo__descricao {
  margin-bottom: 1.25rem;
  color: var(--hlt-ink-2);
}

.modulo__bullets {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.modulo__bullets li {
  position: relative;
  padding-left: 1.25rem;
}

.modulo__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--hlt-accent-ink);
}

.modulo__pendencia {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--hlt-ink-2);
}

.produto .fecho,
.solucoes .destaque,
.segmento .destaque {
  margin-top: 3rem;
}

.acoes--fechamento {
  margin-top: 1.5rem;
}

/* ---------- Página de soluções ---------- */

/* O `auto` é obrigatório: .pares é aplicado NO container, e um `margin: 3rem 0`
   sobrescreve o `margin: 0 auto` de .conteudo — a régua horizontal morre e o
   bloco de cartões encosta na borda esquerda do viewport, à frente do próprio
   cabeçalho. */
.pares {
  display: grid;
  gap: 2rem;
  margin: 3rem auto;
}

.par-problema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  padding: 2rem;
  border: 1px solid var(--hlt-hairline);
  border-radius: var(--hlt-raio-cartao);
  background: var(--hlt-surface);
  box-shadow: var(--hlt-sombra-1);
}

.par-problema__lado--resposta {
  border-left: 2px solid var(--hlt-accent-ink);
  padding-left: 2rem;
}

.par-problema__rotulo {
  margin: 0 0 0.75rem;
  color: var(--hlt-ink-2);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.par-problema__titulo {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

/* ---------- Cards de segmento ---------- */

.segmentos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.segmento-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: var(--hlt-altura-toque);
  padding: 1.5rem;
  border: 1px solid var(--hlt-hairline);
  border-radius: var(--hlt-raio-cartao);
  background: var(--hlt-surface);
  text-decoration: none;
  box-shadow: var(--hlt-sombra-1);
  transition:
    transform var(--hlt-dur-micro) var(--hlt-ease-saida),
    box-shadow var(--hlt-dur-micro) ease-out,
    border-color var(--hlt-dur-micro) ease-out;
}

.segmento-card:hover {
  border-color: var(--hlt-accent-ink);
  transform: translateY(-2px);
  box-shadow: var(--hlt-sombra-2);
}

.segmento-card__ordem {
  color: var(--hlt-ink-2);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.segmento-card__rotulo {
  font-size: 1.25rem;
  font-weight: 700;
}

.segmento-card__resumo {
  color: var(--hlt-ink-2);
  font-size: 0.9375rem;
}

/* ---------- Página de segmento ---------- */

.segmento__visual {
  margin: 2.5rem auto;
}

.dores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.dor {
  padding: 1.5rem;
  border-top: 2px solid var(--hlt-hairline-2);
}

.dor__rotulo {
  margin: 0 0 0.5rem;
  color: var(--hlt-ink-2);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.dor__titulo {
  font-size: 1.125rem;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.dor__resposta {
  margin: 0;
  color: var(--hlt-ink-2);
}

/* ---------- Adaptação para telas estreitas ---------- */

@media (max-width: 1023px) {
  .modulo,
  .par-problema {
    grid-template-columns: minmax(0, 1fr);
  }

  .modulo--texto-direita .modulo__texto {
    order: 0;
  }

  .par-problema__lado--resposta {
    border-left: 0;
    border-top: 2px solid var(--hlt-accent-ink);
    padding-left: 0;
    padding-top: 1.5rem;
  }

  .segmentos,
  .dores {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Menu de navegação no mobile ----------
   Painel em <details>: abre e fecha sem JavaScript. No desktop ele some por
   completo e a navegação em linha continua exatamente como era. */

.menu-mobile {
  display: none;
}

.menu-mobile__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: var(--hlt-altura-toque);
  min-height: var(--hlt-altura-toque);
  padding: 0 0.75rem;
  border: 1px solid var(--hlt-hairline-2);
  border-radius: var(--hlt-raio);
  cursor: pointer;
  list-style: none;
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-mobile__botao::-webkit-details-marker {
  display: none;
}

.menu-mobile__icone {
  position: relative;
  width: 1rem;
  height: 2px;
  background: currentColor;
}

.menu-mobile__icone::before,
.menu-mobile__icone::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1rem;
  height: 2px;
  background: currentColor;
}

.menu-mobile__icone::before {
  top: -0.35rem;
}

.menu-mobile__icone::after {
  top: 0.35rem;
}

/* Aberto, o traço do meio some e os outros dois cruzam: vira o × do desenho. */
.menu-mobile[open] .menu-mobile__icone {
  background: transparent;
}

.menu-mobile[open] .menu-mobile__icone::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-mobile[open] .menu-mobile__icone::after {
  top: 0;
  transform: rotate(-45deg);
}

/* O painel é `position: fixed` e portanto sai do fluxo — o estado fechado do
   <details> não o esconde sozinho. Sem esta regra ele permanece renderizado,
   focável e presente na árvore de acessibilidade com o menu fechado. */
.menu-mobile:not([open]) .menu-mobile__painel {
  display: none;
}

.menu-mobile__painel {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--hlt-altura-cabecalho);
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem var(--hlt-margem) 2rem;
  background: var(--hlt-bg);
  border-top: 1px solid var(--hlt-hairline);
  overflow-y: auto;
}

.menu-mobile__link {
  display: flex;
  align-items: center;
  min-height: var(--hlt-altura-toque);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hlt-hairline);
  color: var(--hlt-ink);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
}

.menu-mobile__link[aria-current="page"] {
  color: var(--hlt-accent-ink);
}

.menu-mobile__cta {
  margin-top: 1rem;
}

/* Trava a rolagem do corpo enquanto o painel estiver aberto. */
.tem-menu-aberto {
  overflow: hidden;
}

@media (max-width: 767px) {
  .menu-mobile {
    display: block;
  }

  /* No mobile a navegação inteira migra para o painel: os três elementos do
     cabeçalho não cabem lado a lado em 320px. */
  .cabecalho__nav {
    display: none;
  }
}

/* No cabeçalho escuro o botão herda a tinta clara da barra. */
.cabecalho:not(.cabecalho--claro) .menu-mobile__botao {
  color: var(--hlt-bg);
  border-color: var(--hlt-hairline-dark);
}

/* ---------- Evolução da plataforma ----------
   Roadmap tem peso visual MENOR que módulo disponível, e é assim de propósito:
   hierarquia é parte da verdade comercial. Nenhum badge colorido sem texto —
   o estágio é sempre uma palavra, e o limite é sempre uma frase. */

.evolucao {
  margin: 4rem 0 0;
  padding-top: var(--hlt-margem);
  border-top: 1px solid var(--hlt-hairline);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.evolucao > .eyebrow,
.evolucao__cabecalho,
.evolucao__subtitulo {
  grid-column: 1 / -1;
  margin: 0;
}

.evolucao__cabecalho {
  font-family: var(--hlt-fonte-titulo);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: 0.5rem;
}

.evolucao__subtitulo {
  max-width: var(--hlt-largura-texto);
  margin-bottom: 1rem;
  color: var(--hlt-ink-2);
}

.evolucao__item {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--hlt-surface);
  border: 1px solid var(--hlt-hairline);
  border-radius: var(--hlt-raio);
}

.evolucao__estagio {
  margin: 0 0 0.75rem;
  color: var(--hlt-accent-ink);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.evolucao__titulo {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.35;
}

.evolucao__texto {
  margin: 0;
  color: var(--hlt-ink-2);
  font-size: 0.9375rem;
}

/* O limite é empurrado para o rodapé do cartão e separado por keyline: fica
   sempre visível, nunca como nota de rodapé escondida no fim da seção. */
.evolucao__limite {
  margin: auto 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hlt-hairline);
  color: var(--hlt-ink-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---------- Planos · oferta única ---------- */

.secao__titulo--menor {
  font-size: 1.5rem;
  margin-top: 3rem;
}

.inclusos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.incluso {
  padding: 1.5rem;
  border-top: 2px solid var(--hlt-hairline-2);
}

.incluso__rotulo {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.35;
}

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

.incluso__itens li {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--hlt-ink-2);
  font-size: 0.9375rem;
}

.incluso__itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hlt-action);
}

/* Três cartões irmãos, nunca uma tabela comparativa: cada coluna carrega a
   oferta inteira e se lê sozinha. A grade é de três colunas iguais — nenhum
   plano é destacado por moldura, sombra ou cor, porque a escolha é por contexto
   de quem opera, não por indução visual. */
.ofertas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0 1rem;
  align-items: stretch;
}

/* Coluna flex com o CTA empurrado para o fim: os três botões terminam na mesma
   linha de base mesmo com textos de tamanhos diferentes. Sem isso, um resumo
   mais longo desalinha a conversão e cria hierarquia que ninguém decidiu.

   A elevação no hover é IGUAL para os três cartões: resposta ao cursor, nunca
   destaque de um plano sobre os outros. */
.oferta {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--hlt-surface);
  border: 1px solid var(--hlt-hairline-2);
  border-top: 3px solid var(--hlt-accent);
  border-radius: var(--hlt-raio-cartao);
  box-shadow: var(--hlt-sombra-1);
  transition:
    transform var(--hlt-dur-micro) var(--hlt-ease-saida),
    box-shadow var(--hlt-dur-micro) ease-out;
}

.oferta:hover {
  transform: translateY(-2px);
  box-shadow: var(--hlt-sombra-2);
}

/* A primeira linha do cartão é a pergunta que o visitante responde sobre si
   mesmo. Ela vem antes do nome do plano de propósito: quem se identifica não
   precisa comparar. */
.oferta__contexto {
  margin: 0 0 0.75rem;
  color: var(--hlt-accent-ink);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.oferta__nome {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Condição de lançamento é texto, não selo: sem cor de urgência, sem contador,
   sem preço riscado ao lado. */
.oferta__nota {
  margin: 0.375rem 0 0;
  color: var(--hlt-ink-2);
  font-size: 0.875rem;
}

/* A capacidade incluída fica colada no preço porque é parte da oferta, não uma
   ressalva de rodapé: usuários, imóveis e leads respondem "quanta operação cabe
   aqui" na mesma altura em que o preço responde "quanto custa". */
.oferta__capacidades {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.375rem;
}

.oferta__capacidades li {
  font-weight: 600;
  line-height: 1.4;
}

.oferta__resumo {
  margin: 0.75rem 0 0;
  color: var(--hlt-ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.oferta__preco,
.oferta-strip__preco {
  margin: 0.5rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.oferta__valor {
  font-family: var(--hlt-fonte-dado);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
}

.oferta__valor--texto {
  font-family: var(--hlt-fonte-texto);
  font-size: 1.625rem;
}

.oferta__periodo {
  font-size: 1.0625rem;
  color: var(--hlt-ink-2);
}

.secao--escura .oferta__periodo {
  color: var(--hlt-dark-ink-2);
}

.oferta__condicoes {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.oferta__condicoes li {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--hlt-ink-2);
}

.oferta__condicoes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hlt-action);
}

/* A microcópia fica COLADA no botão porque é ela que impede a leitura errada:
   o clique abre conversa, não cobra. Separá-la do CTA quebraria a função. */
/* UMA nota para os três planos, e discreta: o volume incluído já está no
   cartão, isto só diz o que acontece acima dele. */
.oferta__nota-capacidade {
  margin: 0 0 0.5rem;
  color: var(--hlt-ink-2);
  font-size: 0.875rem;
  line-height: 1.6;
}

.oferta__microcopy {
  margin: 0 0 1rem;
  color: var(--hlt-ink-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* `margin-top: auto` é o que alinha as bases dos três botões: o cartão é uma
   coluna flex e o CTA é o último item. A faixa de regime que fazia esse papel
   saiu do cartão neste corte — condição de pagamento não é valor de plano. */
.oferta .acoes {
  margin: 1.5rem 0 0;
  margin-top: auto;
  padding-top: 1.5rem;
}

.planos__secundario {
  display: inline-block;
  min-height: var(--hlt-altura-toque);
  padding: 0.75rem 0;
  color: var(--hlt-action);
  font-weight: 600;
}

/* A faixa da Home resume os três planos em uma linha cada e manda para
   /planos. Ela não é a página de preço: não repete condições nem CTA de
   contratação, para não existirem duas superfícies de oferta divergentes. */
.oferta-strip__lista {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.oferta-strip__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hlt-hairline-dark);
}

.oferta-strip__plano {
  font-weight: 600;
}

.oferta-strip__valor {
  font-family: var(--hlt-fonte-dado);
  font-weight: 600;
}

/* A lista de planos não encosta no botão: sem esta folga o CTA parece um
   quarto item da lista em vez do encaminhamento para /planos. */
.oferta-strip__lista + .acoes {
  margin-top: 2rem;
}

.oferta-strip__limite {
  width: 100%;
  color: var(--hlt-dark-ink-2);
  font-size: 0.875rem;
}

.passos {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
}

.passo {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hlt-hairline);
}

/* O número ocupa a coluna estreita nas DUAS linhas. Sem isso, a colocação
   automática joga o parágrafo para a coluna de 2,5rem e o texto quebra letra
   a letra — o teste de conteúdo passaria, e a página estaria ilegível. */
.passo__ordem {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--hlt-accent-ink);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.875rem;
  font-weight: 600;
}

.passo__titulo,
.passo__texto {
  grid-column: 2;
}

.passo__titulo {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.passo__texto {
  margin: 0;
  color: var(--hlt-ink-2);
}

/* ---------- LP · página de aquisição ----------
   Uma saída só: o cabeçalho da LP carrega a marca e o CTA, nada de navegação.
   O resto da página reusa a língua do site — seções, fio, botões, janela —
   porque a LP é a mesma marca com menos portas de saída. */

.cabecalho--lp .cabecalho__interno {
  justify-content: space-between;
}

.lp-hero__pergunta {
  display: block;
}

/* As perguntas de reconhecimento: cartões curtos, em fonte de dado no rótulo,
   como consultas que o dono faria ao sistema — e hoje faz por WhatsApp. */
.perguntas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 3rem 0 2rem;
}

.pergunta {
  padding: 1.5rem;
  border: 1px solid var(--hlt-hairline);
  border-left: 2px solid var(--hlt-accent);
  border-radius: var(--hlt-raio-cartao);
  background: var(--hlt-surface);
  box-shadow: var(--hlt-sombra-1);
}

.pergunta__rotulo {
  margin: 0 0 0.625rem;
  color: var(--hlt-accent-ink);
  font-family: var(--hlt-fonte-dado);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pergunta__texto {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

.perguntas__fecho {
  max-width: var(--hlt-largura-texto);
  color: var(--hlt-ink-2);
}

/* A tese em uma linha, grande, sobre escuro: o custo do caos não é um número
   inventado — é uma frase que o dono reconhece. */
.eco__frase {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.375rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.eco__apoio {
  max-width: var(--hlt-largura-texto);
  color: var(--hlt-dark-ink-2);
  font-size: 1.125rem;
}

.lp-produto__visual {
  margin: 2.5rem 0;
}

.lp-dono__fecho {
  border-left: 2px solid var(--hlt-accent-ink);
  padding-left: 1.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .evolucao,
  .inclusos,
  .ofertas,
  .perguntas {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Em coluna única o CTA não precisa ser empurrado: cada cartão tem a própria
     altura e o vão morto no fim seria puro desperdício de rolagem. */
  .oferta .acoes {
    margin-top: 1.5rem;
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .oferta {
    padding: 1.5rem;
  }

  .oferta__valor {
    font-size: 2.25rem;
  }

  /* A escala de texto precisa ser repetida aqui: a regra de mobile do valor tem
     a mesma especificidade e vem depois, então sem isto o preço que não é
     número voltaria ao corpo de dado no celular. */
  .oferta__valor--texto {
    font-size: 1.625rem;
  }

  .pergunta {
    padding: 1.25rem;
  }
}