/* TecnoAtende, versão B = A + passada Impeccable (22/08/2026): estrutura da referência Aimax refeita
   do zero com a paleta da marca. Ordem das seções espelha a referência:
   barra flutuante, herói com imagem de fundo e medidores, quem somos com
   imagem, processo em 4 colunas, declaração com imagens no texto, galeria
   com abas, fita, planos, perguntas, contato, rodapé. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.08; margin: 0; letter-spacing: -0.02em; }
h1 em, h2 em { font-style: normal; color: var(--amber); }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: var(--amber); color: var(--amber-ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 3px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

main > section {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-section) var(--gutter);
}

/* ---------- Peças comuns ---------- */
.rotulo {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.1rem;
}
.secao-h { font-size: var(--text-h2); text-wrap: balance; }
.secao-cabeca { text-align: center; max-width: 46rem; margin: 0 auto var(--space-block); }
.secao-cabeca .secao-h { margin-bottom: 0.8rem; }
.secao-sub { color: var(--ink-soft); font-size: var(--text-lead); text-wrap: pretty; }

.botao {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-botao);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.botao-primario { background: var(--amber); color: var(--amber-ink); }
.botao-primario:hover {
  background: color-mix(in srgb, var(--amber) 85%, #fff 15%);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--amber) 70%, transparent);
}
.botao-primario:active { transform: translateY(0); }
.botao-secundario { border-color: var(--rule); color: var(--ink); background: transparent; }
.botao-secundario:hover { border-color: var(--ink-soft); background: var(--paper-sunk); transform: translateY(-2px); }

/* ---------- Topo: barra flutuante ---------- */
.topo { position: sticky; top: 0.8rem; z-index: 20; padding-inline: var(--gutter); }
.topo-barra {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.55rem 0.7rem 0.55rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.7);
}
.marca { display: inline-flex; align-items: center; }
.marca img { height: 2.1rem; width: auto; }
img.marca-clara { display: none; }
img.marca-escura { display: block; }
:root[data-tema="claro"] img.marca-clara { display: block; }
:root[data-tema="claro"] img.marca-escura { display: none; }
.topo-nav { margin-left: auto; display: flex; gap: 1.4rem; }
.topo-nav a { font-size: 0.92rem; text-decoration: none; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.topo-nav a:hover { color: var(--ink); }
.topo-acoes { display: flex; align-items: center; gap: 0.6rem; }
.topo-cta { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.tema-btn {
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  width: 2.1rem; height: 2.1rem; color: var(--ink-soft); cursor: pointer; font-size: 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tema-btn:hover { border-color: var(--ink-soft); color: var(--ink); }

/* ---------- 1. Herói: imagem de fundo sangrando, conteúdo central ---------- */
main > section.heroi {
  position: relative;
  max-width: none;
  padding: 0;
  margin-top: -4.2rem; /* a barra flutuante fica por cima da imagem */
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.heroi-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  z-index: -2;
}
/* Véu: escurece as bordas e o topo pra o texto ler, deixa a cabeça respirar */
.heroi-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--paper) 70%, transparent) 0%, transparent 22%, transparent 55%, var(--paper) 100%),
    radial-gradient(60% 70% at 50% 40%, transparent 30%, color-mix(in srgb, var(--paper) 55%, transparent) 100%);
}
:root[data-tema="claro"] .heroi-veu {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--paper) 80%, transparent) 0%, color-mix(in srgb, var(--paper) 45%, transparent) 40%, var(--paper) 100%);
}
.heroi-conteudo {
  max-width: var(--max);
  margin-inline: auto;
  padding: calc(var(--space-section) + 4rem) var(--gutter) var(--space-section);
}
.heroi-stats { display: flex; justify-content: center; gap: clamp(2rem, 6vw, 5rem); margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.heroi-stat-num {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.heroi-stat-rotulo { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.25rem; }

/* "Build without boundaries with Aimax": dois avatares e uma linha */
.heroi-selo {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 1.2rem;
}
.heroi-selo strong { color: var(--amber); font-weight: 600; }
.heroi-chips { display: inline-flex; }
.heroi-chips img {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper); background: var(--paper-sunk);
}
.heroi-chips img + img { margin-left: -0.7rem; }

.heroi-h1 { font-size: var(--text-h1); max-width: 16ch; margin-inline: auto; text-wrap: balance; }
.heroi-h1 em { display: block; }
.heroi-apoio { font-size: var(--text-lead); color: var(--ink-soft); max-width: 52ch; margin: 1.4rem auto 0; }
.heroi-apoio strong { color: var(--ink); font-weight: 600; }

/* Barra de busca da referência vira captura de lead */
.heroi-busca {
  display: flex;
  gap: 0.4rem;
  max-width: 38rem;
  margin: 1.8rem auto 0;
  padding: 0.4rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.heroi-busca input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1rem;
  padding: 0.85rem 1rem;
  background: transparent; border: 0; color: var(--ink);
}
.heroi-busca input::placeholder { color: var(--ink-soft); }
.heroi-busca input:focus { outline: none; }
.heroi-busca .botao { white-space: nowrap; }

/* "Popular: Graphical Illustration..." vira "Para quem:" */
.heroi-tags {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem;
  margin-top: 1rem; font-size: 0.85rem; color: var(--ink-soft);
}
.heroi-tags a {
  text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--paper-sunk) 80%, transparent);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 0.85rem;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.heroi-tags a:hover { border-color: var(--amber); background: var(--paper-sunk); }

/* Argolas: os medidores da referência, número de verdade dentro */
.argolas {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem); padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.argola { display: grid; justify-items: center; gap: 0.15rem; }
.argola-num {
  display: flex; align-items: center; justify-content: center; gap: 0.18em;
  width: clamp(6rem, 6rem + 2vw, 7.5rem); height: clamp(6rem, 6rem + 2vw, 7.5rem);
  border: 2px solid color-mix(in srgb, var(--amber) 70%, var(--rule));
  border-radius: 50%;
  font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.7rem); font-weight: 800;
  color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  box-shadow: 0 0 40px -10px color-mix(in srgb, var(--amber) 40%, transparent);
  margin-bottom: 0.55rem;
}
.argola-num small { font-size: 0.62em; font-weight: 600; }
.argola-rotulo { font-weight: 600; font-size: 0.95rem; }
.argola-lastro { color: var(--ink-soft); font-size: 0.82rem; }

.rolar {
  display: inline-block; margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out);
}
.rolar:hover { color: var(--amber); }

/* ---------- 2. Quem somos: imagem à esquerda, texto e stats à direita ---------- */
.sobre-grade { display: grid; gap: var(--space-block); align-items: center; }
@media (min-width: 900px) { .sobre-grade { grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); } }
.sobre-figura { position: relative; margin: 0; }
.sobre-figura > img {
  display: block; width: 100%; border-radius: var(--radius-card);
  border: 1px solid var(--rule);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
/* Etiqueta sobreposta, como o card com avatar da referência */
.sobre-etiqueta {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rule); border-radius: 12px;
  font-size: 0.82rem; line-height: 1.25; color: var(--ink-soft);
}
.sobre-etiqueta strong { color: var(--ink); }
.sobre-etiqueta img { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; background: var(--paper-sunk); }
.sobre-texto .secao-h { margin-bottom: 0.8rem; max-width: 20ch; }
.sobre-texto .secao-sub { max-width: 46ch; }
.sobre-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin: var(--space-block) 0; padding-block: var(--space-block);
  border-block: 1px solid var(--rule);
}
.sobre-stats dt {
  font-family: var(--display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800;
  color: var(--amber); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.sobre-stats dd { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- 3. Processo: 4 colunas, ícone, número fantasma ---------- */
.etapas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .etapas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .etapas { grid-template-columns: repeat(4, 1fr); } }
.etapa {
  position: relative; overflow: hidden;
  padding: 1.6rem 1.4rem 1.8rem;
  background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius-card);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.etapa:hover { border-color: color-mix(in srgb, var(--amber) 45%, var(--rule)); transform: translateY(-3px); }
.etapa::after {
  content: attr(data-num);
  position: absolute; right: -0.05em; top: -0.2em;
  font-family: var(--display); font-size: clamp(4.5rem, 3rem + 4vw, 7rem); font-weight: 800; line-height: 1;
  color: var(--ink); opacity: 0.05; pointer-events: none;
}
.etapa-icone {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem;
  color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 45%, var(--rule)); border-radius: 12px;
}
.etapa-icone svg { width: 1.5rem; height: 1.5rem; }
.etapa h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.etapa p { color: var(--ink-soft); font-size: 0.93rem; }

/* ---------- 4. Declaração: frase grande com imagens no meio ---------- */
.declaracao { text-align: center; }
.declaracao-h {
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem);
  max-width: 22ch; margin-inline: auto; text-wrap: balance;
}
.declaracao-p {
  max-width: 52ch; margin: 1.2rem auto 0;
  color: var(--ink-soft); font-size: var(--text-lead); text-wrap: pretty;
}
.declaracao-p-forte { color: var(--ink); font-weight: 600; }
@media (min-width: 1000px) { .etapa-larga { grid-column: 1 / -1; } }
.chip {
  display: inline-block; vertical-align: middle;
  width: 2.4em; height: 1.35em; border-radius: 999px; overflow: hidden;
  margin: 0 0.15em; border: 1px solid var(--rule); background: var(--paper-sunk);
}
.chip img { width: 100%; height: 100%; object-fit: cover; }
.declaracao-cta {
  display: inline-flex; align-items: center; gap: 0.8rem; margin-top: var(--space-block);
  text-decoration: none; color: var(--ink-soft); font-size: var(--text-lead);
  transition: color var(--dur-fast) var(--ease-out);
}
.declaracao-cta:hover { color: var(--ink); }
.declaracao-play {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--amber); color: var(--amber-ink); font-size: 0.85rem;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--amber) 18%, transparent);
}

/* ---------- 5. Galeria com abas ---------- */
.abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin-bottom: var(--space-block); }
.aba {
  font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.6rem 1rem; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.aba:hover { color: var(--ink); }
.aba.ativa { color: var(--ink); border-bottom-color: var(--amber); }
.galeria-grade { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .galeria-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .galeria-grade { grid-template-columns: repeat(4, 1fr); } }
.conversa {
  background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.conversa:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--rule)); transform: translateY(-3px); }
.conversa[hidden] { display: none; }
.conversa-topo {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.ponto { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--green); }
.conversa-corpo { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.balao { max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 12px; font-size: 0.88rem; line-height: 1.4; }
.balao-in { align-self: flex-start; background: var(--paper); border: 1px solid var(--rule); border-bottom-left-radius: 3px; }
.balao-out { align-self: flex-end; background: var(--green-ink); color: #f2ede2; border-bottom-right-radius: 3px; }
.conversa-nota { padding: 0.9rem 1rem 1.1rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- Fita ---------- */
.fita {
  overflow: hidden; background: var(--amber); color: var(--amber-ink);
  transform: rotate(-1.2deg) scale(1.02);
}
.fita-trilho { display: flex; width: max-content; animation: fita-corre 28s linear infinite; }
.fita ul {
  list-style: none; display: flex; align-items: center; gap: 2.2rem; padding: 0.7rem 1.1rem; margin: 0;
  font-family: var(--display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.fita li::after { content: "✳"; margin-left: 2.2rem; font-size: 0.7rem; }
@keyframes fita-corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fita-trilho { animation: none; } }

/* ---------- 6. Planos ---------- */
.planos-grade { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: stretch; }
@media (min-width: 900px) { .planos-grade { grid-template-columns: repeat(3, 1fr); } }
.plano {
  position: relative;
  background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius-card);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); display: grid; gap: 0.7rem; align-content: start;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.plano:hover { transform: translateY(-3px); border-color: var(--ink-soft); }
.plano-icone { display: block; width: 2.8rem; height: 2.8rem; color: var(--green); margin-bottom: 0.4rem; }
.plano-icone svg { width: 100%; height: 100%; }
.plano h3 { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.plano-preco { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plano-preco span { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.plano > p:not(.plano-preco):not(.plano-tag) { color: var(--ink-soft); font-size: 0.95rem; }
.plano .botao { justify-self: start; margin-top: 0.4rem; font-size: 0.9rem; padding: 0.7rem 1.3rem; }
.plano-ancora {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--rule));
  background: color-mix(in srgb, var(--paper-sunk) 85%, var(--amber) 5%);
}
@media (min-width: 900px) {
  .plano-ancora { transform: translateY(-0.8rem); }
  .plano-ancora:hover { transform: translateY(-1rem); }
}
.plano-tag {
  position: absolute; top: 1.1rem; right: 1.1rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber-ink); background: var(--amber); border-radius: 999px; padding: 0.28rem 0.75rem;
}
.planos-nota { margin-top: var(--space-block); text-align: center; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- 7. Perguntas ---------- */
.faq-grade { display: grid; gap: 1rem; max-width: 60rem; margin-inline: auto; }
@media (min-width: 800px) { .faq-grade { grid-template-columns: 1fr 1fr; } }
.faq details {
  background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: var(--radius-card);
  padding: 1.1rem 1.3rem; align-self: start;
}
.faq summary {
  cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--amber); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.7rem; }

/* ---------- 8. Contato: cartão grande, como a faixa de newsletter ---------- */
.contato-cartao {
  display: grid; gap: var(--space-block);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: 24px;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.7);
}
@media (min-width: 900px) { .contato-cartao { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } }
.contato-texto .secao-h { margin-bottom: 0.8rem; max-width: 18ch; }
.contato-texto .secao-sub { margin-bottom: var(--space-block); max-width: 42ch; }
.selos {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.5rem 0 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft);
}
.selos li { border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 0.85rem; }
.form { display: grid; gap: 0.9rem; }
.form-titulo { font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.form label { display: grid; gap: 0.3rem; }
.form label span { font-size: 0.85rem; font-weight: 500; }
.form input, .form select {
  font: inherit; font-size: 0.97rem; padding: 0.75rem 0.85rem;
  border: 1px solid var(--rule); border-radius: var(--radius-botao); background: var(--paper); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form input:hover, .form select:hover { border-color: var(--ink-soft); }
.form input:focus, .form select:focus { border-color: var(--amber); outline: none; }
.form button { justify-self: start; margin-top: 0.3rem; }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--rule); background: var(--paper-deep); font-size: 0.92rem; color: var(--ink-soft); }
.rodape-grade {
  max-width: var(--max); margin-inline: auto;
  padding: var(--space-section) var(--gutter) var(--space-block);
  display: grid; gap: var(--space-block);
}
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.4fr 0.8fr 1fr; gap: clamp(2rem, 5vw, 5rem); } }
.rodape-quem img { height: 2.4rem; width: auto; margin-bottom: 1rem; }
.rodape-quem p { max-width: 38ch; }
.rodape-bloco h4 {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 0.9rem;
}
.rodape-bloco ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rodape-bloco a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.rodape-bloco a:hover { color: var(--ink); }
.rodape-base {
  border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.78rem;
  padding: 1.1rem var(--gutter); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; align-items: baseline;
}
.rodape-topo-link { text-decoration: none; color: var(--amber); }

/* ---------- Telas estreitas ---------- */
@media (max-width: 760px) {
  .topo-nav { display: none; }
  .topo-cta { display: none; }
  .heroi-busca { flex-direction: column; }
  .heroi-busca .botao { width: 100%; text-align: center; }
  .heroi-fundo { object-position: 50% 30%; }
  .sobre-stats { grid-template-columns: 1fr; }
}


/* =====================================================================
   Passada Impeccable (craft floor + polish), 22/08/2026.
   Sobrepõe a base acima. O mundo visual da referência fica; saem os tiques
   de template que o guia refuta: eyebrow, anel de progresso, tile de ícone,
   card igual como estrutura, glifo unicode como ícone, halo sem deslocamento.
   ===================================================================== */

/* Superfícies do navegador carregam o design */
html { scrollbar-color: color-mix(in srgb, var(--ink-soft) 45%, transparent) transparent; }
body { caret-color: var(--amber); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
input::placeholder { color: color-mix(in srgb, var(--ink-soft) 85%, var(--ink)); }

/* Botão de tema com ícone desenhado */
.tema-btn { display: grid; place-items: center; }

/* Cabeças de seção sem eyebrow: o título abre a seção */
.secao-cabeca .secao-h { margin-bottom: 0.9rem; }

/* Trio de números no herói, no lugar das argolas */
.trio {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 52rem;
}
.trio-item {
  flex: 1 1 13rem; display: grid; justify-items: center; gap: 0.1rem; text-align: center;
  padding: 0.4rem 1.5rem;
}
.trio-item + .trio-item { border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.trio-num {
  font-family: var(--display); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800;
  color: var(--amber); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap;
}
.trio-num small { font-size: 0.6em; font-weight: 600; }
.trio-rotulo { font-weight: 600; font-size: 0.95rem; margin-top: 0.3rem; }
.trio-lastro { color: var(--ink-soft); font-size: 0.82rem; }
@media (max-width: 700px) {
  .trio-item + .trio-item { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
}

/* Processo: trilho de etapas em vez de quatro cards iguais */
.etapas { position: relative; gap: clamp(1.5rem, 3vw, 2.5rem); }
.etapa {
  background: none; border: 0; border-radius: 0; padding: 1.6rem 0 0; overflow: visible;
  border-top: 1px solid var(--rule);
}
.etapa:hover { transform: none; border-color: var(--rule); }
.etapa::after { content: none; }
.etapa-num {
  display: inline-block; margin-bottom: 0.9rem; padding-top: 0.15rem;
  font-family: var(--display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--amber); font-variant-numeric: tabular-nums;
}
.etapa h3 { font-size: 1.2rem; }
/* Marca de progresso no trilho: um ponto âmbar sobre a régua */
.etapa { position: relative; }
.etapa::before {
  content: ""; position: absolute; top: -0.3rem; left: 0;
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--amber);
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--amber) 60%, transparent);
}

/* Declaração: botão de play com sombra deslocada, não halo */
.declaracao-play { box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--amber) 70%, transparent); }

/* Fita: separador desenhado */
.fita li::after { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; margin-left: 2.2rem; vertical-align: middle; opacity: 0.7; }
.fita li { display: inline-flex; align-items: center; }

/* Planos: sem tile de ícone; o preço abre o card */
.plano-icone { display: none; }

/* Perguntas: marcador desenhado com CSS, não caractere */
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 0.9rem; height: 0.9rem; margin-top: 0.2rem;
  background:
    linear-gradient(var(--amber), var(--amber)) center / 100% 2px no-repeat,
    linear-gradient(var(--amber), var(--amber)) center / 2px 100% no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after { content: ""; transform: rotate(45deg); }

/* Rótulos pequenos em sans: versalete por tracking, não mono */
.conversa-topo, .form-titulo, .rodape-bloco h4, .rodape-base, .rolar, .selos, .plano-tag {
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.12em;
}

/* Rodapé: o link de topo ganha seta desenhada */
.rodape-topo-link::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.4rem; border: 1.5px solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(-45deg); vertical-align: middle; }

/* A fita gira e escala 2%: o corte fica no main, não vaza pra página */
main { overflow-x: clip; }

/* Mobile: o rosto ocupa a tela inteira, o véu tem que segurar o texto */
@media (max-width: 760px) {
  .heroi-veu {
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--paper) 75%, transparent) 0%, color-mix(in srgb, var(--paper) 40%, transparent) 30%, color-mix(in srgb, var(--paper) 62%, transparent) 62%, var(--paper) 100%);
  }
}

/* Ajustes do Marcelo, 22/08/2026: sem linha de avatares no herói, sem
   etiqueta na foto, chip da frase mostra o androide do herói */
.chip-rosto img { object-position: 50% 30%; transform: scale(2.1); transform-origin: 50% 34%; }

/* Link dentro do card de conversa e página do JurisAtende */
.conversa-link { display: block; margin-top: 0.5rem; color: var(--amber); text-decoration: none; font-weight: 600; }
.conversa-link:hover { text-decoration: underline; }
.heroi-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.8rem; }
.heroi-nota { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.heroi-nota a { color: var(--ink); }
.lista-fatos { list-style: none; padding: 0; margin: var(--space-block) 0 0; display: grid; gap: 0.8rem; }
.lista-fatos li { display: grid; grid-template-columns: 0.6rem 1fr; gap: 0.8rem; align-items: start; color: var(--ink-soft); }
.lista-fatos li::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--amber); margin-top: 0.55rem; }
.lista-fatos strong { color: var(--ink); }

/* Legibilidade do herói (22/08): o rosto do androide atrapalhava o texto.
   Véu mais fechado no centro e o parágrafo de apoio ganha um fundo próprio. */
.heroi-veu {
  background:
    radial-gradient(42% 55% at 50% 52%, color-mix(in srgb, var(--paper) 78%, transparent), color-mix(in srgb, var(--paper) 45%, transparent) 60%, transparent 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--paper) 70%, transparent) 0%, transparent 22%, transparent 55%, var(--paper) 100%);
}
.heroi-h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.heroi-apoio {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  backdrop-filter: blur(6px);
  padding: 0.9rem 1.2rem;
  border-radius: 12px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.heroi-apoio strong { color: var(--amber); }

/* Análise comportamental (22/08): no celular o botão do topo fica, encurtado */
@media (max-width: 760px) {
  .topo-cta { display: inline-block; white-space: nowrap; padding: 0.55rem 0.85rem; font-size: 0.8rem; }
  .topo-acoes .tema-btn { display: none; }
}
.lead-confirmado { display: grid; gap: 0.6rem; padding: 1.4rem; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--paper); }
.lead-confirmado a, .lead-fallback a { color: var(--amber); font-weight: 600; }
.lead-fallback { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.4rem; }

/* Análise comportamental (22/08): botão direto primeiro, campo como alternativa */
.heroi-acoes { display: grid; justify-items: center; gap: 0.6rem; margin-top: 1.8rem; }
.botao-grande { padding: 1.05rem 2rem; font-size: 1.05rem; }
.heroi-acoes-nota { font-size: 0.88rem; color: var(--ink-soft); max-width: 40ch; text-align: center; }
.heroi-busca-alt { display: grid; gap: 0.5rem; background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 1.6rem; max-width: 34rem; }
.heroi-busca-rotulo { font-size: 0.85rem; color: var(--ink-soft); }
.heroi-busca-campo { display: flex; gap: 0.4rem; padding: 0.35rem; background: color-mix(in srgb, var(--paper-sunk) 80%, transparent); border: 1px solid var(--rule); border-radius: 14px; }
.heroi-busca-campo input { flex: 1; min-width: 0; font: inherit; font-size: 0.98rem; padding: 0.7rem 0.9rem; background: transparent; border: 0; color: var(--ink); }
.heroi-busca-campo input:focus { outline: none; }
@media (max-width: 760px) { .heroi-busca-campo { flex-direction: column; } .heroi-busca-campo .botao { width: 100%; text-align: center; } }

/* Marca v2 (22/08): no topo a versão sem tagline (abaixo de 140 px a regra manda); no rodapé a completa, maior */
.marca img { height: 1.9rem; }
.rodape-quem img { height: 2.6rem; }