/* =============================================================================
   NAVEC LABS — COMPONENTES
   Vocabulário visual do Instagram traduzido em peças reutilizáveis.
   Todo componente lê tokens semânticos (--surface, --text, --accent…), por isso
   funciona em .section--light e .section--dark sem uma linha duplicada.
   ========================================================================== */

/* ==========================================================================
   ORNAMENTOS DE FUNDO
   ========================================================================== */

/* CONTRATO DOS ORNAMENTOS
   Todo ornamento é um pseudo-elemento em z-index 0: acima do background do host,
   abaixo do conteúdo. Para isso funcionar, o host precisa de:
     · position: relative  (ou ser .section, que já é)
     · isolation: isolate  (idem)
   e o conteúdo precisa subir para z-index 1 — é o que a regra
   `.section > .container` faz em base.css.
   Não use z-index negativo aqui: o pseudo cairia atrás do fundo do próprio host
   e sumiria em qualquer seção com cor. */

/* --- Ruído: 1 tile SVG, sem PNG, opacidade baixíssima --------------------- */
.noise, .grid-paper, .hex-grid, .spotlight { position: relative; }

.noise::after,
.noise-layer {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* --- Papel milimetrado ---------------------------------------------------- */
.grid-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grid-opacity);
  --line: color-mix(in srgb, var(--grid-color) 60%, transparent);
  --line-bold: color-mix(in srgb, var(--grid-color) 100%, transparent);
  background-image:
    linear-gradient(to right,  var(--line) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--line) var(--hairline), transparent var(--hairline)),
    linear-gradient(to right,  var(--line-bold) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--line-bold) var(--hairline), transparent var(--hairline));
  background-size: 1.25rem 1.25rem, 1.25rem 1.25rem, 6.25rem 6.25rem, 6.25rem 6.25rem;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}

/* --- Grade hexagonal ------------------------------------------------------ */
.hex-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grid-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16Z' fill='none' stroke='%239fb4ff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 96px;
  mask-image: radial-gradient(100% 80% at 50% 50%, #000 10%, transparent 75%);
}

/* --- Anéis concêntricos / órbita ------------------------------------------ */
.orbit-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--orbit-size, 32rem);
  aspect-ratio: 1;
  border: var(--hairline) solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: var(--orbit-opacity, 0.5);
}

.orbit-ring::before,
.orbit-ring::after {
  content: '';
  position: absolute;
  inset: 12%;
  border: var(--hairline) dashed color-mix(in srgb, var(--accent-alt) 34%, transparent);
  border-radius: 50%;
}

.orbit-ring::after {
  inset: 28%;
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* O satélite que corre a órbita */
.orbit-ring[data-satellite]::before {
  background:
    radial-gradient(circle at 50% 0%, var(--accent-loud) 0 0.28rem, transparent 0.3rem)
    no-repeat;
}

.orbit-spin { animation: navec-orbit 48s linear infinite; }
.orbit-spin--slow { animation-duration: 96s; }
.orbit-spin--reverse { animation-direction: reverse; }

@keyframes navec-orbit { to { transform: rotate(360deg); } }

/* --- Holofote do cursor, nas seções escuras ------------------------------- */
.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grad-spotlight);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.spotlight[data-spot-active]::before { opacity: 1; }

/* Desligado em toque: hover:none cobre celular e tablet */
@media (hover: none) {
  .spotlight::before { display: none; }
}

/* ==========================================================================
   HEADLINE DE HERO
   A peça tipográfica da marca: caixa alta, peso 900, entrelinha apertada,
   largura variável acompanhando a tela.

   Por que font-stretch e não font-variation-settings: font-stretch aceita
   <percentage>, então dá para interpolar com clamp(). font-variation-settings
   não aceita clamp no eixo, e ainda sobrescreveria os outros eixos.
   ========================================================================== */
.headline-hero {
  font-family: var(--font-display);
  /* --step-h1, NÃO --step-hero: esta classe vence o seletor `h1` por
     especificidade, e enquanto ela usava --step-hero o teto de altura
     (--hero-linha-teto) nunca era aplicado. Medido: h1 saía com 80px numa
     tela de 740px, quando o teto manda 59px. */
  font-size: var(--step-h1);
  font-weight: 900;
  font-stretch: var(--wdth-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-wrap: balance;

  /* A headline nunca quebra palavra no meio: se faltar espaço, ela encolhe
     pela largura variável, não com hífen. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Degraus de largura.
   Larguras de "OPERACIONAL" (11 caracteres) medidas no Chrome, em em por caractere:
     wdth  88% -> 0,655em     wdth 100% -> 0,734em     wdth 112% -> 0,805em
   Em 320px sobram 265px úteis. Com 34,4px de corpo em wdth 88%:
     11 x 0,655 x 34,4 = 248px  ->  cabe, sem quebrar palavra. */
@media (min-width: 30rem)  { :root { --wdth-hero: 100%; } }
@media (min-width: 64rem)  { :root { --wdth-hero: 112%; } }

.headline-hero em,
.headline-hero .is-italic {
  font-style: italic;
  font-stretch: var(--wdth-condensed);
}

/* ==========================================================================
   MICRO-RÓTULO E PÍLULA
   ========================================================================== */

/* --- .eyebrow: o rótulo técnico dos cantos dos posts ---------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  line-height: 1.2;
}

.eyebrow--muted { color: var(--text-muted); }

/* Variante com fio.
   O fio ocupa só a sobra e encolhe até zero (flex-basis 0 + min-width 0).
   Isso importa: com min-width fixo, em 320px o fio disputava espaço com o
   texto e empurrava a linha para 322px dentro de 265px úteis — rolagem
   horizontal no documento inteiro. Fio que encolhe some; fio que insiste
   quebra a página. */
.eyebrow--rule {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.eyebrow--rule::after {
  content: '';
  flex: 1 1 0;
  min-width: 0;
  height: var(--hairline);
  background: currentColor;
  opacity: 0.4;
}

/* Código técnico decorativo: cód. 08.2:07 */
.eyebrow--code {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: var(--text-muted);
}

/* --- .pill ---------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  min-height: 1.75rem;
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-strong);
  background-color: color-mix(in srgb, var(--surface-raised) 70%, transparent);
  backdrop-filter: blur(6px);
}

.pill--accent {
  border-color: transparent;
  background-image: var(--grad-accent);
  color: var(--neutral-0);
}

.pill--solid {
  border-color: transparent;
  background: var(--navec-nebula);
  color: var(--neutral-0);
}

.pill--ghost { background: transparent; color: var(--text-muted); }

/* ==========================================================================
   MOLDURA TRACEJADA E FIOS DE 1px
   ========================================================================== */
.dashed-frame {
  position: relative;
  padding: var(--space-m);
  border: var(--dash);
  border-radius: var(--radius-m);
}

.dashed-frame--tight { padding: var(--space-s); }

/* Marcas de canto, como as legendas dos posts */
.dashed-frame--corners::before,
.dashed-frame--corners::after {
  content: '';
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--accent);
  pointer-events: none;
}

.dashed-frame--corners::before {
  top: -1px; left: -1px;
  border-right: 0; border-bottom: 0;
}

.dashed-frame--corners::after {
  right: -1px; bottom: -1px;
  border-left: 0; border-top: 0;
}

/* Legenda presa à moldura */
.frame-caption {
  position: absolute;
  top: 0;
  left: var(--space-m);
  transform: translateY(-50%);
  padding-inline: var(--space-2xs);
  background-color: var(--surface);
}

.hairline {
  border: 0;
  border-top: var(--hairline) solid var(--border);
  margin: 0;
}

/* ==========================================================================
   GLIFO ESTRELA ✦
   ========================================================================== */
.star-glyph {
  display: inline-block;
  width: var(--star-size, 1em);
  height: var(--star-size, 1em);
  flex: none;
  color: var(--accent);
}

.star-glyph svg { width: 100%; height: 100%; fill: currentColor; }

.star-bullet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
}

/* ==========================================================================
   BOTÕES
   Alvo mínimo 44px. Deslocamento magnético via --mx/--my, escritos pelo JS.
   ========================================================================== */
.btn {
  --mx: 0px;
  --my: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-m);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
  transform: translate3d(var(--mx), var(--my), 0);
}

.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

/* Primária — o gradiente assinatura */
.btn--primary {
  background-image: var(--grad-accent);
  color: var(--neutral-0);
  box-shadow: var(--shadow-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--neutral-0);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--navec-pink) 45%, transparent);
}

/* Primária-alternativa — MESMO peso da primária, nunca fantasma.
   É o par obrigatório do CTA duplo (formulário + WhatsApp). */
.btn--alt {
  background-color: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-strong);
  box-shadow: var(--shadow-s);
}

.btn--alt:hover,
.btn--alt:focus-visible {
  border-color: var(--accent);
  color: var(--text-strong);
  box-shadow: var(--shadow-m);
}

.btn--ghost {
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--whats { background-color: #25d366; color: #04210f; box-shadow: var(--shadow-s); }
.btn--whats:hover { background-color: #1fb356; color: #04210f; }

.btn--lg { font-size: var(--step-0); padding: var(--space-xs) var(--space-l); min-height: 3.25rem; }
.btn--sm { font-size: var(--step--2); padding: var(--space-3xs) var(--space-s); }
.btn--block { width: 100%; }

.btn[aria-disabled='true'], .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Botão só de ícone — mantém o alvo de 44px */
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  border: var(--hairline) solid var(--border);
  color: var(--text-strong);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn-icon:hover { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn-icon .icon { width: 1.25rem; height: 1.25rem; }

/* --- Par de CTA: dois caminhos, mesmo peso -------------------------------- */
.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* Em telefone empilha, com folga suficiente entre alvos */
@media (max-width: 30rem) {
  .cta-pair { flex-direction: column; align-items: stretch; gap: var(--tap-gap); }
  .cta-pair > .btn { width: 100%; }
}

.cta-note {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: var(--measure-narrow);
}

/* ==========================================================================
   CARTÃO
   Container query: o mesmo cartão em contextos de largura diferente.
   ========================================================================== */
.card {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background-color: var(--surface-raised);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-l);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card__title { font-size: var(--step-1); }
.card__text { font-size: var(--step--1); color: var(--text-muted); }

.card--link:hover,
.card--link:focus-within {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-m);
}

.card--glass {
  background-color: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  backdrop-filter: blur(12px);
  border-color: color-mix(in srgb, var(--text-strong) 12%, transparent);
}

.card--feature { padding: var(--space-l); border-radius: var(--radius-xl); }

@container (min-width: 26rem) {
  .card__title { font-size: var(--step-2); }
  .card { padding: var(--space-l); }
}

/* Faixa de destaque no topo do cartão */
.card--accented::before {
  content: '';
  position: absolute;
  inset-inline: var(--space-m);
  top: 0;
  height: 3px;
  border-radius: var(--radius-pill);
  background-image: var(--grad-signature);
}

/* Tarja de item pendente — só aparece com ?preview=1.
   O topo ganha folga para a tarja não montar sobre o título. */
.card--pendente {
  border-style: dashed;
  border-color: #d0a215;
  padding-block-start: calc(var(--space-m) + 1.5rem);
}

.pendente-tag {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  background-color: #ffd84d;
  color: #3a2c00;
  font-size: var(--step--2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   MOCKUP DE JANELA (navegador / conversa)
   ========================================================================== */
.window-mock {
  position: relative;
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-m);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}

.window-mock__bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--hairline) solid var(--border);
  background-color: color-mix(in srgb, var(--surface-sunken) 60%, var(--surface-raised));
}

.window-mock__dots {
  display: flex;
  gap: var(--space-3xs);
  flex: none;
}

.window-mock__dots span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--border-strong);
}

.window-mock__url {
  flex: 1;
  min-width: 0;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-xs);
  background-color: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-mock__body { padding: var(--space-m); }

/* Bolhas de conversa */
.chat { display: flex; flex-direction: column; gap: var(--space-2xs); }

.chat__msg {
  max-width: 82%;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.chat__msg--in {
  align-self: flex-start;
  background-color: var(--surface-sunken);
  color: var(--text);
  border-end-start-radius: var(--radius-xs);
}

.chat__msg--out {
  align-self: flex-end;
  background-image: var(--grad-accent);
  color: var(--neutral-0);
  border-end-end-radius: var(--radius-xs);
}

.chat__meta {
  font-size: var(--step--2);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   ACORDEÃO E FAQ
   ========================================================================== */
.accordion { border-block-end: var(--hairline) solid var(--border); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  width: 100%;
  min-height: var(--tap-min);
  padding-block: var(--space-s);
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--text-strong);
  cursor: pointer;
}

.accordion__trigger:hover { color: var(--accent); }

.accordion__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--dur) var(--ease);
}

.accordion__trigger[aria-expanded='true'] .accordion__icon { transform: rotate(45deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}

.accordion__trigger[aria-expanded='true'] + .accordion__panel { grid-template-rows: 1fr; }

.accordion__panel > div { overflow: hidden; }
.accordion__panel .accordion__inner { padding-block-end: var(--space-m); color: var(--text-muted); }

/* ==========================================================================
   MARQUEE — vocabulário técnico da casa
   ========================================================================== */
.marquee {
  --marquee-dur: 38s;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-s);
  border-block: var(--hairline) solid var(--border);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-l);
  animation: navec-marquee var(--marquee-dur) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-l);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- O marquee de falas ---------------------------------------------------
   A faixa corria SUPABASE · NODE.JS · CLAUDE API. Sigla não informa nada a
   quem contrata e ainda passa a mensagem errada — "isto aqui é para gente de
   TI". No lugar entrou o que o leitor reconhece em si mesmo: frases da rotina
   dele, entre aspas.

   E fala não é rótulo: em caixa alta na display de peso 800, "MANDA NO ZAP QUE
   EU CONFIRMO DEPOIS" vira slogan gritado, que é o contrário de alguém
   resmungando isso no balcão. Daí a caixa baixa, a família de texto e o corpo
   um degrau abaixo. O ritmo da faixa e o ponto de separação continuam.
   -------------------------------------------------------------------------- */
.marquee--falas .marquee__item {
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 600;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}

.marquee__item::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--accent);
  flex: none;
}

@keyframes navec-marquee { to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .marquee { mask-image: none; }
}

/* ==========================================================================
   REVELAÇÃO POR ROLAGEM
   Uma vez só, não repete. Deslocamento curto. Escalonado por filho.
   ========================================================================== */
/* O estado PADRÃO é visível. O elemento só se esconde depois que o JS arma a
   revelação (classe .reveal-armed no <html>), e nunca antes.

   Por que invertido: se o IntersectionObserver não entregar — aba aberta em
   segundo plano, erro de script, motor exótico — a página não pode ficar em
   branco. Com o padrão em "escondido", qualquer falha apaga o conteúdo.
   Com o padrão em "visível", a pior falha possível é perder a animação.
   O main.js ainda mantém uma rede de segurança que desarma sozinha. */
.reveal {
  transition:
    opacity var(--dur-slow) var(--ease) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease) var(--reveal-delay, 0ms);
}

.reveal-armed .reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift), 0);
}

/* Desarme de emergência: sem transição, para o conteúdo aparecer NA HORA.
   Sem isso, uma aba em segundo plano desarma mas a transição fica congelada
   (rAF pausado) e o conteúdo segue em opacidade 0 até a aba voltar. */
.reveal-instant .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-armed .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   PAINEL DE ESTADO DO PRODUTO
   Estado nunca comunicado só por cor: cada item tem rótulo textual.
   ========================================================================== */
.status-list { display: grid; gap: var(--space-xs); }

.status-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: start;
  padding: var(--space-xs);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-s);
}

.status-item__dot {
  width: 0.6rem;
  height: 0.6rem;
  margin-block-start: 0.45em;
  border-radius: 50%;
  flex: none;
  background-color: var(--text-muted);
}

.status-item--pronto .status-item__dot { background-color: #34c77b; }
.status-item--ativacao .status-item__dot { background-color: #e8b23a; }
.status-item--depois .status-item__dot { background-color: var(--text-muted); }

.status-item__label {
  font-size: var(--step--2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   CAMPOS DE FORMULÁRIO
   ========================================================================== */
.field { display: grid; gap: var(--space-3xs); align-content: start; }

.field__label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text-strong);
}

.field__req { color: var(--accent); }

.field__hint { font-size: var(--step--2); color: var(--text-muted); }

.field__control {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-s);
  background-color: var(--surface-raised);
  color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.field__control::placeholder { color: var(--text-muted); opacity: 1; }

.field__control:hover { border-color: var(--accent); }

/* Erro: borda + ícone + texto. Nunca só a cor. */
.field--invalid .field__control {
  border-color: #c0392b;
  border-width: 2px;
}

.field__error {
  display: none;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--step--2);
  font-weight: 700;
  color: #a5281b;
}

.section--dark .field__error { color: #ff9c92; }

.field--invalid .field__error { display: flex; }

.field__error .icon { width: 1em; height: 1em; flex: none; }

/* Honeypot — invisível para gente, presente para robô.
   Não usa display:none, que alguns bots ignoram por saberem detectá-lo. */
.honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bloco de status do envio — lido por aria-live */
.form-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
  padding: var(--space-s);
  border-radius: var(--radius-s);
  border: var(--hairline) solid var(--border);
  font-size: var(--step--1);
}

.form-status:empty { display: none; }
.form-status[data-state='sucesso'] { border-color: #34c77b; background-color: color-mix(in srgb, #34c77b 12%, transparent); }
.form-status[data-state='erro']    { border-color: #c0392b; background-color: color-mix(in srgb, #c0392b 12%, transparent); }
.form-status[data-state='enviando']{ border-color: var(--accent); }

/* ==========================================================================
   TAGS E LISTAS TÉCNICAS
   ========================================================================== */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }

.tag {
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-muted);
}

/* ==========================================================================
   CANTOS ANCORADOS — @NAVECLABS, cód. 08.2:07
   ========================================================================== */
.corner-labels {
  position: absolute;
  /* abaixo do cabeçalho fixo: os rótulos de canto não podem colidir com a nav */
  inset: calc(var(--header-h) + var(--space-s)) var(--space-m) var(--space-m);
  pointer-events: none;
  z-index: 2;
  display: none;
}

@media (min-width: 60rem) {
  .corner-labels { display: block; }
}

.corner-labels > * { position: absolute; }
.corner-labels .is-tl { top: 0; left: 0; }
.corner-labels .is-tr { top: 0; right: 0; }
.corner-labels .is-bl { bottom: 0; left: 0; }
.corner-labels .is-br { bottom: 0; right: 0; }

/* ==========================================================================
   ÍCONES
   ========================================================================== */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon--filled { fill: currentColor; stroke: none; }
.icon--lg { width: 2rem; height: 2rem; }
.icon--xl { width: 2.75rem; height: 2.75rem; }

/* ==========================================================================
   EMENDA ENTRE SUPERFÍCIES — .section__seam
   -----------------------------------------------------------------------------
   Nenhuma troca de superfície acontece em aresta. A hero terminava em preto
   chapado e a seção seguinte começava em branco, num corte seco: parecia duas
   páginas grampeadas.

   A faixa faz o gradiente da superfície anterior para a seguinte passando por
   --navec-ink, com o ruído atravessando a faixa inteira, e um arco no
   vocabulário dos anéis orbitais marcando a linha do horizonte.

   Uso:
     <div class="section__seam" data-de="escuro" data-para="claro" aria-hidden="true"></div>

   data-de / data-para aceitam "escuro" e "claro". Toda transição
   escuro <-> claro do site passa por aqui.
   ========================================================================== */
.section__seam {
  position: relative;
  height: clamp(6rem, 4rem + 6vw, 10rem);   /* 96px a 160px */
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  --seam-de: var(--navec-void);
  --seam-para: var(--navec-light);
}

.section__seam[data-de='claro'][data-para='escuro'] {
  --seam-de: var(--navec-light);
  --seam-para: var(--navec-void);
}

.section__seam::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(
    to bottom,
    var(--seam-de) 0%,
    var(--navec-ink) 46%,
    var(--seam-para) 100%
  );
}

/* O ruído atravessa a faixa inteira, ligando as duas superfícies */
.section__seam::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* O arco: a emenda deixa de ser problema resolvido e vira assinatura.
   Mesmo vocabulário dos anéis orbitais — um horizonte, não uma linha. */
.section__seam__arco {
  position: absolute;
  inset-inline: 50%;
  inset-block-end: -1px;
  z-index: 2;
  width: 200%;
  /* height, não aspect-ratio: com 220% de largura e 3/1, o arco vinha com
     682px e cobria a emenda inteira de cor chapada — matando o gradiente.
     O raio elíptico (50% 100%) é o que dá a curva rasa e larga.
     62% e não 100%: o terço de cima da emenda fica para o gradiente
     atmosférico passando por --navec-ink. O arco é o horizonte, não a
     transição inteira. */
  height: 62%;
  translate: -50% 0;
  border-start-start-radius: 50% 100%;
  border-start-end-radius: 50% 100%;
  border-block-start: var(--hairline) solid color-mix(in srgb, var(--navec-violet) 45%, transparent);
  background-color: var(--seam-para);
}

/* Um segundo arco, tracejado e mais alto, ecoando os anéis concêntricos */
.section__seam__arco::before {
  content: '';
  position: absolute;
  inset-inline: 4%;
  inset-block-start: -1.6rem;
  height: 3.2rem;
  border-start-start-radius: 50% 100%;
  border-start-end-radius: 50% 100%;
  border-block-start: var(--hairline) dashed color-mix(in srgb, var(--navec-pink) 34%, transparent);
}

/* Marcador no ponto mais alto do arco — o glifo da rota cruzando o horizonte */
.section__seam__arco::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: -0.3rem;
  width: 0.55rem;
  height: 0.55rem;
  translate: -50% 0;
  rotate: 45deg;
  background-color: var(--navec-hot);
}

@media (prefers-reduced-motion: reduce) {
  .section__seam { height: clamp(4rem, 3rem + 3vw, 6rem); }
}


/* ==========================================================================
   CAMPO DE PARTÍCULAS — canvas e fallback
   -----------------------------------------------------------------------------
   Vive aqui, e não em pages/home.css, porque a 404 usa a mesma peça. Quando
   morava só na home, a 404 carregava o hero-field.js sem estas regras: o canvas
   perdia position:absolute, virava item do grid, e a hero inflava de 800px para
   1512px com a metade de cima vazia.

   Peça usada em mais de uma página não pode morar no CSS de uma página só.
   ========================================================================== */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;   /* os botoes da hero continuam clicaveis */

  /* O campo nao pode ser cortado a faca na borda da hero. A opacidade vai a
     zero ao longo dos ultimos ~120px, entao as estrelas se apagam ao entrar
     na luz da emenda. E a metafora da marca funcionando de graca. */
  --fade: 7.5rem;
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
}

/* Fallback: se o canvas falhar, entra gradiente + SVG. Nunca fica em branco. */
.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 22% 18%, color-mix(in srgb, var(--navec-nebula) 34%, transparent), transparent 65%),
    radial-gradient(48rem 34rem at 82% 72%, color-mix(in srgb, var(--navec-pink) 26%, transparent), transparent 62%);
}

.hero--sem-canvas .hero__fallback { display: block; }