/* Site público da Nexiry (épica #1033).
 *
 * CSS próprio, sem framework: estas páginas não carregam o bundle do React, e
 * baixar o app inteiro para ler um documento jurídico atrasaria justamente a
 * página que a Meta e os buscadores conferem.
 *
 * Os tokens espelham multichat-frontend/src/App.css (shadcn neutro,
 * --radius: 0.625rem) para que a landing tenha a mesma cara do sistema. O azul
 * de acento é o #3B82F6 já usado no theme-color do index.html.
 */

/* Tema claro é o padrão do `:root`; o escuro é declarado DUAS vezes — uma para
 * quem segue o sistema e outra para quem apertou o botão. O `:not([data-tema=
 * "light"])` na media query é o que dispensa um quarto bloco só para o claro
 * explícito: sem ele, escolher "claro" num sistema escuro não teria como vencer.
 * A ordem importa (mesma especificidade), então a media query vem antes. */
:root {
  --radius: 0.625rem;

  --bg: #ffffff;
  --bg-sutil: #fafafa;
  --fg: #252525;
  --fg-suave: #737373;
  --borda: #e5e5e5;
  --card: #ffffff;
  --primary: #1a1a1a;
  --primary-fg: #fafafa;
  --acento: #2563eb;
  --acento-suave: #eff6ff;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
  --grade: rgba(0, 0, 0, 0.045);

  /* Camada de acabamento: vidro, elevação e luz.
   * `--vidro` é o fundo translúcido dos cartões — precisa de opacidade alta no
   * claro, senão o texto perde contraste sobre a aura colorida do fundo. */
  --vidro: rgba(255, 255, 255, 0.72);
  --vidro-borda: rgba(255, 255, 255, 0.9);
  --sombra-elevada: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 44px -18px rgba(0, 0, 0, 0.22);
  --sombra-flutuante: 0 2px 6px rgba(0, 0, 0, 0.05), 0 30px 70px -28px rgba(0, 0, 0, 0.35);
  --aura-a: rgba(37, 99, 235, 0.24);
  --aura-b: rgba(16, 185, 129, 0.17);
  --brilho: rgba(37, 99, 235, 0.22);
  --anel-foco: rgba(37, 99, 235, 0.45);
  --realce: rgba(255, 255, 255, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --bg: #0a0f13;
    --bg-sutil: #0f1519;
    --fg: #f5f7f8;
    --fg-suave: #9aa4ad;
    --borda: #1f2a31;
    --card: #0f1519;
    --primary: #3b82f6;
    --primary-fg: #ffffff;
    --acento: #60a5fa;
    --acento-suave: rgba(59, 130, 246, 0.12);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 32px -12px rgba(0, 0, 0, 0.7);
    --grade: rgba(255, 255, 255, 0.05);

    --vidro: rgba(20, 28, 35, 0.62);
    --vidro-borda: rgba(255, 255, 255, 0.08);
    --sombra-elevada: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 56px -20px rgba(0, 0, 0, 0.85);
    --sombra-flutuante: 0 4px 10px rgba(0, 0, 0, 0.55), 0 40px 90px -30px rgba(0, 0, 0, 0.95);
    --aura-a: rgba(59, 130, 246, 0.32);
    --aura-b: rgba(16, 185, 129, 0.2);
    --brilho: rgba(96, 165, 250, 0.3);
    --anel-foco: rgba(96, 165, 250, 0.55);
    --realce: rgba(255, 255, 255, 0.09);
  }
}

:root[data-tema="dark"] {
  --bg: #0a0f13;
  --bg-sutil: #0f1519;
  --fg: #f5f7f8;
  --fg-suave: #9aa4ad;
  --borda: #1f2a31;
  --card: #0f1519;
  --primary: #3b82f6;
  --primary-fg: #ffffff;
  --acento: #60a5fa;
  --acento-suave: rgba(59, 130, 246, 0.12);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 32px -12px rgba(0, 0, 0, 0.7);
  --grade: rgba(255, 255, 255, 0.05);

  --vidro: rgba(20, 28, 35, 0.62);
  --vidro-borda: rgba(255, 255, 255, 0.08);
  --sombra-elevada: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 56px -20px rgba(0, 0, 0, 0.85);
  --sombra-flutuante: 0 4px 10px rgba(0, 0, 0, 0.55), 0 40px 90px -30px rgba(0, 0, 0, 0.95);
  --aura-a: rgba(59, 130, 246, 0.32);
  --aura-b: rgba(16, 185, 129, 0.2);
  --brilho: rgba(96, 165, 250, 0.3);
  --anel-foco: rgba(96, 165, 250, 0.55);
  --realce: rgba(255, 255, 255, 0.09);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
}
.pular-para-conteudo:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 10px 16px;
}

/* ---------------------------------------------------------------- cabeçalho */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Fallback sólido primeiro: navegador sem color-mix fica com a barra opaca,
   * que é feia mas legível — nunca com texto sobre conteúdo rolando atrás. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--borda);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

/* Enquanto a página está no topo o cabeçalho se dissolve no hero; ao rolar,
 * ganha borda e sombra para se descolar do conteúdo que passa por baixo.
 * A borda só some sob `.js` (classe posta pelo próprio script): sem JavaScript
 * a classe `rolado` nunca chega, e um cabeçalho fixo sem separação deixaria o
 * texto da página passando por baixo sem nenhuma divisa. */
:root.js .cabecalho:not(.rolado) {
  border-bottom-color: transparent;
}

.cabecalho.rolado {
  box-shadow: 0 1px 0 var(--realce) inset, 0 8px 24px -16px rgba(0, 0, 0, 0.5);
}

.cabecalho-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 1.0625rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.marca-icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  background: linear-gradient(145deg, var(--acento), var(--primary));
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px var(--brilho), 0 1px 0 var(--realce) inset;
}

.marca-icone svg {
  width: 19px;
  height: 19px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--fg-suave);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.nav a:hover {
  color: var(--fg);
  background: var(--bg-sutil);
}

.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tema-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--fg-suave);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}

.tema-toggle:hover {
  color: var(--fg);
  border-color: var(--fg-suave);
  background: var(--vidro);
  transform: translateY(-1px);
}

.tema-toggle svg {
  width: 17px;
  height: 17px;
}

:root[data-tema="dark"] .icone-sol,
:root:not([data-tema="light"]) .icone-sol {
  display: none;
}
:root[data-tema="light"] .icone-sol {
  display: block;
}
:root[data-tema="light"] .icone-lua {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="dark"]) .icone-sol {
    display: block;
  }
  :root:not([data-tema="dark"]) .icone-lua {
    display: none;
  }
}

/* ------------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s, opacity 0.15s, background 0.15s, border-color 0.15s;
}

.botao:active {
  transform: translateY(1px);
}

.botao svg {
  width: 17px;
  height: 17px;
}

/* O brilho passa por cima do botão uma vez no hover. É o único movimento
 * decorativo da página: chama atenção para a ação principal sem transformar a
 * navegação numa animação constante. */
.botao-primario,
.botao-whatsapp {
  position: relative;
  overflow: hidden;
}

.botao-primario::after,
.botao-whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.65s ease;
  pointer-events: none;
}

.botao-primario:hover::after,
.botao-whatsapp:hover::after {
  transform: translateX(120%);
}

.botao-primario {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 1px 0 var(--realce) inset, 0 6px 18px -10px rgba(0, 0, 0, 0.5);
}

.botao-primario:hover {
  opacity: 0.92;
  box-shadow: 0 1px 0 var(--realce) inset, 0 10px 26px -10px var(--brilho);
}

.botao-contorno {
  border-color: var(--borda);
  color: var(--fg);
  background: transparent;
}

.botao-contorno:hover {
  border-color: var(--fg-suave);
  background: var(--vidro);
  box-shadow: var(--sombra);
}

.botao-whatsapp {
  background: #16a34a;
  background: linear-gradient(160deg, #1cb85c, #15803d);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 8px 22px -10px rgba(22, 163, 74, 0.75);
}

.botao-whatsapp:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 30px -10px rgba(22, 163, 74, 0.9);
  transform: translateY(-1px);
}

/* Foco visível padronizado: o anel acompanha o acento do tema e sobrevive ao
 * fundo de vidro, que come o outline preto padrão do navegador. */
a:focus-visible,
button:focus-visible,
.botao:focus-visible {
  outline: 2px solid var(--anel-foco);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Reafirma o afundar no clique: as regras de hover acima trazem `transform`
 * próprio e, por virem depois, venceriam o `:active` declarado lá em cima. */
.botao:active {
  transform: translateY(1px);
}

/* Ação secundária do hero: precisa continuar acessível sem disputar atenção
 * com o CTA comercial — quem já é cliente sabe o que procura. */
.botao-texto {
  color: var(--fg-suave);
  background: transparent;
  padding-left: 14px;
  padding-right: 14px;
}

.botao-texto:hover {
  color: var(--fg);
  background: var(--bg-sutil);
}

.botao-grande {
  padding: 14px 26px;
  font-size: 1rem;
}

/* "Acessar minha conta" não cabe no cabeçalho de um celular estreito: em tela
 * pequena o mesmo botão passa a dizer "Entrar". */
.rotulo-curto {
  display: none;
}

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: 88px 0 72px;
  overflow: hidden;
}

/* Grade sutil ao fundo — dá profundidade sem pesar nem exigir imagem. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    #000 40%,
    transparent 100%
  );
  pointer-events: none;
}

/* Aura colorida atrás do hero: dois focos de luz difusa, um no acento e outro
 * no verde do WhatsApp. É o que dá o ar "de produto" à página sem nenhuma
 * imagem extra para baixar — e é o fundo que faz a transparência dos cartões
 * significar alguma coisa. `z-index: 0` mantém a aura atrás do conteúdo, que
 * está em `position: relative`. */
.hero::after {
  content: "";
  position: absolute;
  /* Sem recuo no topo: o hero tem `overflow: hidden`, então qualquer parte
   * acima da borda é recortada — foi assim que a primeira versão escondeu os
   * dois focos de luz e a aura sumiu. Os centros ficam na altura do título. */
  inset: 0 -10% auto -10%;
  height: 760px;
  z-index: 0;
  background: radial-gradient(
      44% 48% at 20% 38%,
      var(--aura-a) 0%,
      transparent 70%
    ),
    radial-gradient(38% 42% at 84% 16%, var(--aura-b) 0%, transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-conteudo {
  position: relative;
  max-width: 760px;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--card);
  background: var(--vidro);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--realce) inset, var(--sombra);
  font-size: 0.8125rem;
  color: var(--fg-suave);
  margin-bottom: 24px;
}

.selo svg {
  width: 14px;
  height: 14px;
  color: var(--acento);
}

h1 {
  margin: 0 0 20px;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 680;
}

.hero-subtitulo {
  margin: 0 0 32px;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--fg-suave);
  max-width: 620px;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.hero-nota {
  font-size: 0.875rem;
  color: var(--fg-suave);
}

/* ------------------------------------------------------- mockup do produto */

/* A captura fica dentro de uma "janela": barra com pontos em cima, moldura
 * arredondada e sombra funda. É o recurso que faz a imagem parecer um produto
 * rodando, e não um print colado na página. */
.vitrine {
  position: relative;
  z-index: 1;
  margin: 56px 0 0;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--card);
  /* O halo colorido vai na própria sombra, e não num pseudo-elemento: a
   * moldura tem `overflow: hidden` para recortar a captura nos cantos
   * arredondados, e isso cortaria qualquer brilho posicionado fora dela. */
  box-shadow: var(--sombra-flutuante), 0 24px 70px -34px var(--brilho),
    0 0 0 1px var(--vidro-borda) inset;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.vitrine:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-flutuante), 0 34px 90px -34px var(--brilho),
    0 0 0 1px var(--vidro-borda) inset;
}

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

.vitrine figcaption {
  padding: 14px 20px;
  border-top: 1px solid var(--borda);
  background: var(--bg-sutil);
  font-size: 0.875rem;
  color: var(--fg-suave);
}

/* ------------------------------------------------------ faixa de confiança */

.faixa-confianca {
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  background: var(--card);
  background: linear-gradient(
    180deg,
    var(--bg-sutil),
    color-mix(in srgb, var(--acento) 4%, var(--bg-sutil))
  );
  padding: 20px 0;
}

.faixa-itens {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 32px;
}

.faixa-itens span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-suave);
}

.faixa-itens svg {
  width: 17px;
  height: 17px;
  color: var(--acento);
  flex-shrink: 0;
}

.vitrine-barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--bg-sutil);
}

.vitrine-ponto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--borda);
}

.vitrine-corpo {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 380px;
}

.vitrine-lista {
  border-right: 1px solid var(--borda);
  padding: 14px;
  background: var(--bg-sutil);
}

.vitrine-conversa {
  display: flex;
  gap: 11px;
  padding: 11px 10px;
  border-radius: 9px;
  margin-bottom: 3px;
}

.vitrine-conversa.ativa {
  background: var(--card);
  box-shadow: var(--sombra);
}

.vitrine-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acento), #8b5cf6);
  flex-shrink: 0;
  opacity: 0.85;
}

.vitrine-linhas {
  flex: 1;
  min-width: 0;
}

.vitrine-linha {
  height: 8px;
  border-radius: 4px;
  background: var(--borda);
  margin-bottom: 7px;
}

.vitrine-linha.curta {
  width: 55%;
}
.vitrine-linha.media {
  width: 78%;
}

.vitrine-chat {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.balao {
  max-width: 66%;
  padding: 11px 15px;
  border-radius: 13px;
  font-size: 0.875rem;
  line-height: 1.45;
}

.balao-recebido {
  align-self: flex-start;
  background: var(--bg-sutil);
  border: 1px solid var(--borda);
  border-bottom-left-radius: 4px;
}

.balao-enviado {
  align-self: flex-end;
  background: var(--acento);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.balao-etiqueta {
  display: block;
  font-size: 0.6875rem;
  opacity: 0.7;
  margin-bottom: 3px;
}

/* ------------------------------------------------------------------ seções */

section {
  position: relative;
  padding: 80px 0;
}

.secao-sutil {
  background: var(--bg-sutil);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}

/* Mesma aura difusa do hero, aplicada às seções onde há cartão de vidro — sem
 * uma cor por trás, translucidez não se percebe e o cartão parece só cinza. */
.secao-aura {
  overflow: hidden;
}

.secao-aura::before {
  content: "";
  position: absolute;
  inset: -15% -10% auto -10%;
  height: 620px;
  z-index: 0;
  background: radial-gradient(40% 44% at 18% 26%, var(--aura-a), transparent 72%),
    radial-gradient(36% 40% at 86% 8%, var(--aura-b), transparent 74%);
  filter: blur(26px);
  opacity: 0.75;
  pointer-events: none;
}

.secao-aura > .container {
  position: relative;
  z-index: 1;
}

.secao-cabecalho {
  max-width: 660px;
  margin-bottom: 48px;
}

/* Pílula de seção com ponto pulsante à esquerda. Marca visualmente onde cada
 * bloco começa — quem varre a página de cima a baixo acha o assunto sem ler. */
.secao-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 13px 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acento) 22%, transparent);
  background: var(--acento-suave);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 18px;
}

.secao-etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent);
}

h2 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 660;
}

.secao-cabecalho p {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--fg-suave);
}

/* ------------------------------------------------------------------- cards */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  padding: 26px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  /* Fundo translúcido sobre a aura da seção: é o que dá o efeito de vidro.
   * O sólido vem antes como reserva para quem não tem `color-mix`. */
  background: var(--card);
  background: var(--vidro);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--realce) inset;
  isolation: isolate;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}

/* Foco de luz que segue o ponteiro. As coordenadas chegam do script em
 * `--mx`/`--my`; sem JavaScript ficam no padrão (topo, centro) e o cartão
 * apenas clareia de cima para baixo no hover — nada quebra. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    var(--aura-a),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.card:hover {
  border-color: color-mix(in srgb, var(--acento) 35%, var(--borda));
  transform: translateY(-4px);
  box-shadow: 0 1px 0 var(--realce) inset, var(--sombra-elevada);
}

.card:hover::before {
  opacity: 1;
}

.card-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--acento-suave);
  color: var(--acento);
  margin-bottom: 16px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 18%, transparent);
  transition: transform 0.22s, box-shadow 0.22s;
}

.card:hover .card-icone {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent),
    0 8px 20px -8px var(--brilho);
}

.card-icone svg {
  width: 20px;
  height: 20px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--fg-suave);
}

/* Estado do recurso ("Sob ativação", "Beta"). Vender como pronto o que ainda
 * depende de configuração ou plano gera frustração na implantação — o selo
 * mantém a promessa alinhada com o que a conta realmente recebe. */
.marca-estado {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--bg-sutil);
  box-shadow: 0 1px 0 var(--realce) inset;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-suave);
  white-space: nowrap;
}

.nota-rodape-secao {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  font-size: 0.9375rem;
  color: var(--fg-suave);
}

.nota-rodape-secao a {
  color: var(--acento);
}

/* --------------------------------------------------------------- passos */

.passos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  counter-reset: passo;
}

.passos li {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* Linha que costura um passo ao seguinte. Some no último (`:last-child`) e nas
 * larguras em que os passos deixam de ficar lado a lado. */
.passos li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 44px;
  right: -28px;
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--acento) 40%, transparent),
    transparent
  );
  pointer-events: none;
}

.passo-numero {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  background: linear-gradient(145deg, var(--acento), var(--primary));
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 650;
  box-shadow: 0 0 0 4px var(--acento-suave), 0 6px 16px -6px var(--brilho);
}

.passos strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.passos div {
  font-size: 0.9375rem;
  color: var(--fg-suave);
}

/* ------------------------------------------------------------- lista dupla */

/* O `gap` é pequeno porque cada item ganhou 12px de padding próprio (a área
 * clicável do realce). O respiro visual é padding + gap, não só o gap. */
.lista-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-checks li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 12px;
  /* Só na horizontal: cancela o padding nas bordas da grade para o texto
   * continuar alinhado com o cabeçalho da seção. Na vertical a margem negativa
   * faria os retângulos de hover se sobreporem. */
  margin-left: -12px;
  margin-right: -12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.lista-checks li:hover {
  background: var(--vidro);
  border-color: var(--borda);
  transform: translateY(-2px);
}

/* O ícone vira um selo redondo — a marca de verificação isolada some no meio
 * do texto, e é justamente ela que carrega o "isto aqui está resolvido". */
.lista-checks svg {
  width: 27px;
  height: 27px;
  padding: 5px;
  border-radius: 50%;
  background: var(--acento-suave);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 16%, transparent);
  color: var(--acento);
  flex-shrink: 0;
  margin-top: 1px;
  transition: box-shadow 0.2s;
}

.lista-checks li:hover svg {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent),
    0 6px 16px -6px var(--brilho);
}

.lista-checks strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.lista-checks span {
  font-size: 0.9375rem;
  color: var(--fg-suave);
}

/* ------------------------------------------------------------------ contato */

.contato-caixa {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--card);
  background: var(--vidro);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--realce) inset, var(--sombra-elevada);
}

.contato-canais {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}

.contato-canais li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.9375rem;
}

.contato-canais svg {
  width: 18px;
  height: 18px;
  color: var(--fg-suave);
  flex-shrink: 0;
}

.contato-canais a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--borda);
}

.contato-canais a:hover {
  border-color: var(--fg-suave);
}

/* ------------------------------------------------------------------ rodapé */

.rodape {
  border-top: 1px solid var(--borda);
  padding: 52px 0 40px;
  background: var(--bg-sutil);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--acento) 3%, var(--bg-sutil)),
    var(--bg-sutil)
  );
}

.rodape-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
}

.rodape-sobre {
  max-width: 320px;
}

.rodape-sobre p {
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--fg-suave);
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.rodape-coluna h4 {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-suave);
}

.rodape-coluna ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.rodape-coluna a {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--fg);
  text-decoration: none;
  transition: color 0.15s, transform 0.15s;
}

.rodape-coluna a:hover {
  color: var(--acento);
  transform: translateX(3px);
}

.rodape-base {
  padding-top: 26px;
  border-top: 1px solid var(--borda);
  font-size: 0.8125rem;
  color: var(--fg-suave);
}

.rodape-base p {
  margin: 0 0 5px;
}

/* Aviso de marca: precisa estar presente e legível, não em destaque — quem o
 * procura é o revisor da Meta, não o visitante comercial. */
.rodape-marcas {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
  max-width: 62ch;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fg-suave);
  opacity: 0.85;
}

/* -------------------------------------------------- páginas de documento */

.doc-cabecalho {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--borda);
}

.doc-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--fg-suave);
  text-decoration: none;
  margin-bottom: 20px;
}

.doc-voltar:hover {
  color: var(--fg);
}

.doc-voltar svg {
  width: 15px;
  height: 15px;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--fg-suave);
}

.doc-versao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--card);
  background: var(--vidro);
  box-shadow: 0 1px 0 var(--realce) inset;
}

.doc-resumo {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--acento);
  background: var(--acento-suave);
  border-radius: 0 10px 10px 0;
  box-shadow: var(--sombra);
  font-size: 0.9375rem;
  color: var(--fg);
}

.doc-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 56px;
  padding: 40px 0 80px;
  align-items: start;
}

.doc-sumario {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.doc-sumario h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-suave);
  margin: 0 0 14px;
}

.doc-sumario ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 3px;
}

.doc-sumario a {
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 0.875rem;
  color: var(--fg-suave);
  text-decoration: none;
  line-height: 1.35;
}

.doc-sumario a:hover {
  color: var(--fg);
  background: var(--bg-sutil);
}

/* Cláusula em que a leitura está agora. A classe vem do script; sem ele o
 * índice continua sendo uma lista de links que funciona igual. */
.doc-sumario a.atual {
  color: var(--acento);
  background: var(--acento-suave);
  box-shadow: inset 2px 0 0 var(--acento);
}

.doc-corpo {
  max-width: 720px;
  min-width: 0;
}

.doc-corpo h2 {
  margin: 40px 0 14px;
  padding-top: 12px;
  font-size: 1.3125rem;
  font-weight: 640;
  letter-spacing: -0.015em;
  scroll-margin-top: 92px;
}

.doc-corpo h2:first-child {
  margin-top: 0;
}

.doc-corpo h2 .doc-numero {
  color: var(--acento);
  margin-right: 8px;
}

.doc-corpo p {
  margin: 0 0 14px;
  font-size: 0.9688rem;
  line-height: 1.72;
}

.doc-corpo .doc-alinea {
  margin: 0 0 10px 22px;
  font-size: 0.9688rem;
  line-height: 1.68;
  color: var(--fg);
}

.doc-vazio {
  padding: 48px 0 80px;
  color: var(--fg-suave);
}

.doc-outros {
  padding: 48px 0;
}

.doc-outros h2 {
  font-size: 1.125rem;
  margin-bottom: 18px;
}

.doc-outros-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* "Acordo de Tratamento de Dados (DPA)" não cabe numa tela de 360px, e o
 * `white-space: nowrap` do botão (que existe para o cabeçalho não quebrar)
 * empurrava a página inteira para o lado. Aqui o rótulo pode quebrar. */
.doc-outros-lista .botao {
  white-space: normal;
  text-align: center;
}

/* ------------------------------------------------------- entrada ao rolar */

/* Só vale sob `.js` — a classe é posta pelo próprio script. Sem JavaScript
 * nada fica escondido: estas páginas existem justamente para entregar o
 * conteúdo no primeiro byte, e um revisor com script bloqueado veria a página
 * em branco se o estado inicial fosse `opacity: 0`. */
:root.js .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: var(--atraso, 0s);
}

:root.js .revelar.visivel {
  opacity: 1;
  transform: none;
}

/* Na grade de recursos os cartões entram em cascata, não todos de uma vez.
 * O `3n` assume as três colunas da largura cheia; em telas menores o
 * escalonamento fica só um pouco fora de ordem, e ninguém percebe. */
:root.js .grade .revelar:nth-child(3n + 2) {
  --atraso: 0.08s;
}

:root.js .grade .revelar:nth-child(3n) {
  --atraso: 0.16s;
}

/* --------------------------------------------------------------- impressão */

@media print {
  .cabecalho,
  .rodape,
  .doc-sumario,
  .doc-voltar,
  .tema-toggle {
    display: none !important;
  }

  /* Impressão disparada antes do observador rodar sairia com o texto invisível. */
  :root.js .revelar {
    opacity: 1 !important;
    transform: none !important;
  }

  .doc-layout {
    display: block;
    padding: 0;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .doc-corpo {
    max-width: none;
  }

  .doc-corpo h2 {
    page-break-after: avoid;
  }

  .doc-corpo p {
    orphans: 3;
    widows: 3;
  }
}

/* ------------------------------------------------------------- responsivo */

@media (max-width: 1080px) {
  /* Os passos deixam de ficar lado a lado: a linha que os costura passaria por
   * cima do texto do passo seguinte. */
  .passos li:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 900px) {
  .doc-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .doc-sumario {
    position: static;
    max-height: none;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borda);
  }

  .contato-caixa {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px;
  }

  .vitrine-corpo {
    grid-template-columns: 1fr;
  }

  .vitrine-lista {
    display: none;
  }
}

@media (max-width: 720px) {
  .nav {
    display: none;
  }

  .cabecalho .rotulo-longo {
    display: none;
  }

  .cabecalho .rotulo-curto {
    display: inline;
  }

  .cabecalho .botao {
    padding: 10px 18px;
  }

  section {
    padding: 56px 0;
  }

  .hero {
    padding: 56px 0 48px;
  }

  .container {
    padding: 0 18px;
  }

  .rodape-links {
    gap: 32px;
  }

  .hero-acoes .botao {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* Sem transição, a entrada ao rolar viraria um pisca-pisca: o conteúdo já
   * nasce visível e o observador só não tem o que animar. */
  :root.js .revelar {
    opacity: 1;
    transform: none;
  }

  /* Deslocamento no hover também é movimento — fica só a mudança de cor,
   * borda e sombra. */
  .card:hover,
  .vitrine:hover,
  .lista-checks li:hover,
  .botao-whatsapp:hover,
  .tema-toggle:hover,
  .rodape-coluna a:hover,
  .card:hover .card-icone {
    transform: none;
  }
}