/* Landing (v6) e pop-up (v7) do diagnóstico de rastreio. Copiado dos mockups aprovados em 13/10/2026: só diagramação; cores, tipos e raios vêm dos tokens do DS v8. */
  .topo { position: relative; z-index: 2; }
  .topo__in { height: 80px; display: flex; align-items: center; }

  .hero { position: relative; padding: 48px 0 96px; border-bottom: 1px dashed var(--line-dash); }
  .hero__malha { position: absolute; inset: -80px 0 0; z-index: 0; pointer-events: none; background-position: var(--nx-gutter) 0;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .hero__titulo { grid-column: 1 / -1; }
  .hero__h1 { font-size: 64px; margin: 24px 0 40px; max-width: 18ch; text-wrap: balance; }
  @media (min-width: 1100px) { .hero__h1 { max-width: none; } }
  .hero__acao { grid-column: 1 / span 8; }
  .hero__acao .nx-lead { max-width: 44ch; margin-bottom: 32px; }

  .hero__acao .teste { max-width: 680px; }
  /* Campo do teste: .nx-field + .nx-input + .nx-beam, com altura única de 52px */
  .teste__linha { display: flex; gap: 12px; align-items: center; }
  .teste__input { height: 52px; padding: 0 16px; font-size: 17px; flex: 1; min-width: 0; }
  .teste__input::placeholder { color: var(--muted); }
  .teste__botao { flex-shrink: 0; }
  .teste__botao .nx-beam__content { padding: 15px 28px; white-space: nowrap; }
  .teste__botao .nx-spinner { position: absolute; right: 22px; top: 50%; margin-top: -8px; }
  .teste__botao.is-loading .teste__seta { visibility: hidden; }
  .teste__garantia { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 60ch; }

  .prova { margin-top: 24px; justify-content: flex-start; padding: 14px 24px; gap: 8px 14px; font-size: 14px; width: fit-content; max-width: 100%; }

  /* Prévia da tela de análise (as 7 etapas reais) */
  .previa { grid-column: 9 / span 4; align-self: start; margin-top: 4px; overflow: hidden; }
  .previa .nx-card__head { padding: 16px 24px; }
  .previa__rotulo, .previa__tempo { font-family: var(--nx-font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--nx-tracking-badge); color: var(--fg-2); }
  .previa__tempo { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
  .previa__lista { list-style: none; margin: 0; padding: 8px 0; }
  .previa__lista li { display: grid; grid-template-columns: 8px 20px 1fr; gap: 12px; align-items: baseline; padding: 10px 24px; }
  .previa__lista li + li { border-top: 1px dashed var(--line-dash); }
  .previa__lista .nx-dot { align-self: center; }
  .previa__n { font-family: var(--nx-font-mono); font-size: 12px; color: var(--muted); }
  .previa__lista b { display: block; font-size: 14px; font-weight: 500; color: var(--fg); line-height: 1.35; }
  .previa__lista small { display: block; font-family: var(--nx-font-mono); font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
  .previa__lista .is-atual { background: var(--surface); }
  .previa__lista .is-atual .nx-dot--ink { animation: pulso 1.6s var(--nx-ease-out-expo) infinite; }
  @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(10,10,10,.28); } 100% { box-shadow: 0 0 0 8px rgba(10,10,10,0); } }

  .fim { padding: 96px 0; border-top: 1px dashed var(--line-dash); }

  /* 04: o que a pessoa leva + CTA repetido */
  .fecho { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .leva { grid-column: 1 / span 7; border-radius: var(--nx-r-card); padding: 40px; display: grid; grid-template-columns: auto 1fr; gap: 32px; }
  .leva__num { font-family: var(--nx-font-mono); font-size: var(--nx-fs-numeral); font-weight: 500; line-height: 1; color: var(--fg); }
  .leva p { margin: 16px 0 16px; font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
  .leva__tec { font-family: var(--nx-font-mono); font-size: 12px; color: var(--muted); }
  .teste--fim { grid-column: 9 / span 4; }
  .teste--fim .teste__linha { flex-direction: column; align-items: stretch; }
  .teste--fim .teste__input { flex: none; }

  @media (max-width: 1100px) {
    .hero__acao { grid-column: 1 / span 7; }
    .previa { grid-column: 8 / span 5; }
    .prova { border-radius: var(--nx-r-card); }
  }
  @media (max-width: 960px) {
    .previa { display: none; }
    .hero__acao { grid-column: 1 / -1; }
    .leva, .teste--fim { grid-column: 1 / -1; }
    .teste--fim { margin-top: 40px; }
  }
  @media (max-width: 640px) {
    .nx-container { padding: 0 20px; }
    .hero__malha { background-position: 20px 0; }
    .topo__in { height: 64px; }
    .hero { padding: 24px 0 48px; }
    .hero .nx-eyebrow { gap: 10px; letter-spacing: .08em; white-space: nowrap; }
    .hero__h1 { font-size: 32px; line-height: 1.08; margin: 16px 0 16px; }
    .hero__acao .nx-lead { font-size: 17px; margin-bottom: 24px; }
    .teste__linha { flex-direction: column; align-items: stretch; }
    .teste__input { flex: none; }
    .teste__botao { display: flex; width: 100%; }
    .teste__garantia { font-size: 13px; }
    .prova { flex-direction: column; align-items: stretch; width: 100%; padding: 0; gap: 0; border-radius: var(--nx-r-card); }
    .prova > span:not(.nx-proof__sep) { padding: 12px 20px; }
    .prova > span:not(.nx-proof__sep) + .nx-proof__sep + span { border-top: 1px dashed var(--line-dash); }
    .prova .nx-proof__sep { display: none; }
    .fim { padding: 56px 0 64px; }
    .leva { padding: 28px 24px; grid-template-columns: 1fr; gap: 16px; }
    .leva__num { font-size: 36px; }
    .leva .nx-h3 { font-size: 26px; }
    .leva p { font-size: 16px; margin: 12px 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .previa__lista .is-atual .nx-dot--ink { animation: none; }
  }
  /* Toque: sem hover, o miolo do beam já nasce laranja (aprovado pelo Daniel em 13/10/2026) */
  @media (hover: none) { .nx-beam .nx-beam__content { background: var(--nx-vermilion-400); color: var(--nx-ink); } }
  .pop { position: absolute; z-index: calc(var(--nx-z-overlay) + 1); top: 50%; left: 50%; translate: -50% -50%;
    width: min(960px, calc(100% - 64px)); max-height: calc(100% - 48px); overflow: auto; box-shadow: var(--shadow-lg); }

  /* Cabeçalho: site, estado, etapa e barra */
  .pop__topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; padding: 24px 32px 20px;
    border-bottom: 1px dashed var(--line-dash); }
  .pop__host { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--fg); overflow-wrap: anywhere; }
  .pop__estado { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
  .pop__etapa { font-family: var(--nx-font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase;
    letter-spacing: var(--nx-tracking-badge); color: var(--fg-2); white-space: nowrap; }
  .pop__barra { grid-column: 1 / -1; margin-top: 16px; }

  .pop__corpo { display: grid; grid-template-columns: 336px minmax(0, 1fr); }

  /* Coluna das etapas */
  .pop__etapas { border-right: 1px dashed var(--line-dash); padding: 8px 0 16px; }
  .pop__lista { list-style: none; margin: 0; padding: 0; }
  .pop__lista li { display: grid; grid-template-columns: 16px 14px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 24px; }
  .pop__lista li + li { border-top: 1px dashed var(--line-dash); }
  .pop__marca { height: 19px; display: flex; align-items: center; justify-content: center; }
  .pop__check { width: 14px; height: 14px; color: var(--fg); }
  .pop__n { font-family: var(--nx-font-mono); font-size: 12px; line-height: 19px; color: var(--muted); }
  .pop__lista b { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--fg-2); }
  .pop__lista small { display: block; margin-top: 2px; font-family: var(--nx-font-mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
  .pop__lista .is-atual { background: var(--surface); }
  .pop__lista .is-atual b { color: var(--fg); font-weight: 600; }
  .pop__lista .is-pendente b { color: var(--muted); }

  /* Faixa compacta (só no celular) */
  .pop__agora, .pop__ver { display: none; }

  /* Nota (estado B) */
  .pop__nota { margin: 8px 24px 16px; padding: 20px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: end; }
  .pop__nota .nx-stat__label { grid-column: 1 / -1; margin-bottom: 8px; }
  .pop__nota-num { font-family: var(--nx-font-mono); font-size: var(--nx-fs-numeral); font-weight: 500; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
  .pop__nota-de { font-size: 15px; line-height: 1.4; color: var(--fg-2); padding-bottom: 4px; }
  .pop__nota-ajuda { grid-column: 1 / -1; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }

  /* Formulário */
  .pop__form { padding: 32px 40px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .pop__titulo { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); text-wrap: balance; }
  .pop__titulo:focus { outline: none; }
  .pop__apoio { margin: -4px 0 8px; font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 52ch; }
  .pop__campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .pop__campos .is-largo { grid-column: 1 / -1; }
  .pop__input { height: 48px; padding: 0 14px; font-size: 16px; }
  .pop__input::placeholder { color: var(--muted); }
  .pop__faixa { border: 0; margin: 0; padding: 0; min-width: 0; }
  .pop__faixa legend { padding: 0; }
  .pop__faixa .nx-help { display: block; margin: 4px 0 10px; }
  .pop__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .pop__chip { position: relative; display: inline-flex; }
  .pop__chip span { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; white-space: nowrap;
    border: 1px solid var(--line-control); border-radius: var(--nx-r-pill); background: var(--card); color: var(--fg); font-size: 14px; cursor: pointer;
    transition: background var(--nx-dur-base), border-color var(--nx-dur-base), color var(--nx-dur-base); }
  .pop__chip:hover span { border-color: var(--fg); }
  .pop__chip input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
  .pop__chip input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
  .pop__acao { margin-top: 8px; }
  .pop__acao .nx-beam__content { padding: 16px 28px; }
  .pop__pular { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; font-family: inherit; font-size: 14px; color: var(--fg-2);
    text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; margin-top: -8px; }
  .pop__pular:hover { color: var(--fg); text-decoration-color: currentColor; }
  .pop__rodape { margin: -4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }

  /* ---------- Celular: tela cheia ---------- */
  @media (max-width: 640px) {

    .pop__topo { padding: 16px 20px 0; border-bottom: 0; }
    .pop__host { font-size: 16px; }
    .pop__estado { margin-top: 2px; }
    .pop__etapa .is-desk { display: none; }
    .pop__barra { margin-top: 10px; }

    .pop__corpo { display: block; }
    .pop__etapas { border-right: 0; border-bottom: 1px dashed var(--line-dash); padding: 0 20px; }
    .pop__lista { display: none; }
    .pop__agora { display: grid; grid-template-columns: 16px minmax(0, 1fr) 16px; gap: 12px; align-items: start; width: 100%; min-height: 48px;
      padding: 12px 0; border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer; color: var(--fg); }
    .pop__agora > svg { width: 12px; height: 12px; margin-top: 4px; color: var(--fg-2); justify-self: end; }
    .pop__agora b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fg); }
    .pop__agora small { display: block; margin-top: 2px; font-family: var(--nx-font-mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
    .pop__agora .pop__marca { height: 20px; }
    .pop__etapas { position: relative; }
    .pop__ver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer;
      position: absolute; top: 15px; right: 28px;
      font-family: var(--nx-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: var(--nx-tracking-badge); color: var(--fg-2); }
    .pop__ver svg { width: 12px; height: 12px; }

    .pop__nota { margin: 12px 0 12px; padding: 16px 20px; }
    .pop__nota .nx-stat__label { margin-bottom: 6px; }
    .pop__nota-num { font-size: 40px; }
    .pop__nota-ajuda { margin-top: 6px; }
    .pop--fim .pop__agora { display: none; }

    .pop__form { padding: 16px 20px 24px; gap: 12px; }
    .pop__titulo { font-size: 20px; }
    .pop__apoio { font-size: 15px; margin: -4px 0 0; }
    .pop__campos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pop__form .nx-field { gap: 6px; }
    .pop__faixa .nx-help { margin: 2px 0 8px; }
    .pop__chips { display: grid; grid-template-columns: 1fr 1fr; }
    .pop__chip span { width: 100%; height: 48px; padding: 0 10px; }
    .pop__chip:last-child { grid-column: 1 / -1; }
    /* Primário preso ao pé da folha: fica à vista enquanto a pessoa rola os campos.
       Com o teclado aberto ele fica atrás do teclado, que é quando não precisa aparecer. */
    .pop__fixo { margin: 0 -20px; padding: 8px 20px calc(12px + env(safe-area-inset-bottom));
      background: var(--bg); border-top: 1px dashed var(--line-dash); }
    .pop__acao { margin-top: 0; }
    .pop__pular { margin-top: -12px; }
  }
  @media (max-width: 640px) and (hover: none) { .pop__fixo { position: sticky; bottom: 0; z-index: 2; } }

/* ---------- Do mockup de estados (v6-estados.html) ---------- */
.teste__botao.is-loading { pointer-events: none; }

/* ---------- Camada real do pop-up (no mockup ela fica dentro da área de apresentação) ---------- */
.pop-camada { position: fixed; inset: 0; z-index: var(--nx-z-overlay); }
.pop-camada__scrim { position: absolute; inset: 0; background: var(--scrim); }
.pop-camada[hidden], .pop [hidden] { display: none !important; }
body.is-pop-aberto { overflow: hidden; }
.pop__erro { margin: 0; }
@media (max-width: 640px) {
  .pop { top: 0; left: 0; translate: none; width: 100%; height: 100%; max-height: none; overflow: auto;
    border: 0; border-radius: 0; box-shadow: none; }
  .pop-camada__scrim { display: none; }
  .pop__etapas.is-aberta .pop__lista { display: block; }
}
@media (prefers-reduced-motion: reduce) { .pop .nx-radar i, .hero .nx-radar i { animation: none; } }

/* Palavra de destaque do título sem o contorno (toque, celular): laranja da marca em vez do #A63208 do DS (pedido do Daniel em 13/10/2026). No desktop continua vazada. */
.nx-destaque:not(.nx-destaque--vazado) { color: var(--nx-vermilion-400); }
@media not ((hover: hover) and (pointer: fine)) { .nx-destaque--vazado { color: var(--nx-vermilion-400); } }

/* SEO (26/10/2026): extensões x verificador, perguntas frequentes, rodapé e política de privacidade. Mesma grade e tokens do laudo. */
.extensoes { padding: 96px 0; border-top: 1px dashed var(--line-dash); background: var(--surface); }
.extensoes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.extensoes__intro { grid-column: 1 / span 5; }
.extensoes__intro h2 { margin: 0 0 16px; max-width: 16ch; }
.extensoes__intro p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 44ch; }
.extensoes__lista { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--line-dash); }
.extensoes__lista li { padding: 24px 0; border-bottom: 1px dashed var(--line-dash); }
.extensoes__lista h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.extensoes__lista p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 54ch; }
.perguntas { padding: 96px 0; border-top: 1px dashed var(--line-dash); }
.perguntas__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.perguntas__titulo { grid-column: 1 / span 4; margin: 0; }
.perguntas__lista { grid-column: 5 / -1; border-top: 1px dashed var(--line-dash); }
.perguntas .nx-faq summary h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.perguntas .nx-faq p { padding-left: 0; font-size: 15px; color: var(--fg-2); max-width: 64ch; }
.perguntas .nx-faq summary .nx-chevron { flex-shrink: 0; }
.rodape { border-top: 1px dashed var(--line-dash); padding: 32px 0 40px; font-size: 14px; color: var(--muted); }
.rodape__in { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.rodape__in span { margin-right: auto; }
.rodape a { color: var(--fg-2); }
.politica { padding-top: 32px; padding-bottom: 96px; max-width: 760px; }
.politica .nx-eyebrow { display: block; white-space: normal; line-height: 1.6; }
.politica .nx-eyebrow a { color: inherit; }
.politica h1 { margin: 16px 0 16px; }
.politica .nx-lead { margin: 0 0 40px; }
.politica section { padding: 24px 0; border-top: 1px dashed var(--line-dash); }
.politica h2 { margin: 0 0 12px; }
.politica p, .politica li { font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.politica p { margin: 0 0 12px; }
.politica ul { margin: 0; padding-left: 20px; }
.politica li + li { margin-top: 8px; }
.pop__rodape a { color: inherit; text-decoration: underline; }
@media (max-width: 960px) {
  .extensoes__intro, .extensoes__lista, .perguntas__titulo, .perguntas__lista { grid-column: 1 / -1; }
  .perguntas__titulo { margin-bottom: 24px; }
}
@media (max-width: 640px) {
  .extensoes, .perguntas { padding: 56px 0 64px; }
  .extensoes__intro h2, .perguntas__titulo { font-size: var(--nx-fs-h3); }
  .politica { padding-top: 16px; padding-bottom: 64px; }
  .politica h1 { font-size: 32px; line-height: 1.1; }
}


/* Como funciona (26/10/2026): linha do tempo das 7 etapas ao lado do navegador do robô. Sem JS, todas as etapas abertas e o navegador no
   estado final (data-passo 7). Com JS (demo.ts, classe .is-anima), uma etapa abre por vez, sempre em ordem, e a linha vertical vai
   se preenchendo de uma etapa para a outra; o navegador acompanha por data-passo. Movimento reduzido: mesma sequência, sem transição. */
.demo { position: relative; padding: 120px 0 104px; overflow: hidden; }
.demo::after { content: ""; position: absolute; width: 720px; height: 720px; right: -160px; top: 120px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,75,12,.22), transparent 62%); filter: blur(20px); }
.demo .nx-container { position: relative; z-index: 1; }
.demo__topo { max-width: 820px; margin-bottom: 64px; }
.demo__topo h2 { margin: 0 0 18px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.demo__apoio { margin: 0; font-size: 18px; line-height: 1.55; color: var(--fg-2); max-width: 56ch; }
.demo__palco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }

/* Linha do tempo */
.demo__passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.demo__passo { position: relative; padding-left: 52px; }
.demo__passo::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: -2px; width: 2px; background: rgba(255,255,255,.12); }
.demo__passo:last-child::before { display: none; }
.demo__passo::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: -2px; width: 2px; background: var(--nx-vermilion-400); transform-origin: top; transform: scaleY(0); }
.demo__passo:last-child::after { display: none; }
.demo__ph { margin: 0; font: inherit; }
.demo__pcab { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 6px 0 18px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.demo__pnum { position: absolute; left: -52px; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.28); background: var(--nx-ink); font-family: var(--nx-font-mono); font-size: 11px; color: var(--fg-2); }
.demo__pnum svg { display: none; width: 16px; height: 16px; }
.demo__ptit { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--fg); }
.demo__pdet { grid-column: 1; font-family: var(--nx-font-mono); font-size: 12px; color: var(--muted); }
.demo__pcab:disabled { cursor: default; color: inherit; }
.demo__pcab:focus-visible { outline: 2px solid var(--nx-vermilion-400); outline-offset: 6px; border-radius: 6px; }
.demo__pcorpo { display: grid; grid-template-rows: 1fr; }
.demo__pdentro { min-height: 0; overflow: hidden; }
.demo__pfaz { margin: -4px 0 14px; font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.demo__achados { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.demo__achado { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 14px; line-height: 1.4; }
.demo__ico { width: 16px; height: 16px; align-self: center; }
.demo__ico--ok { color: #5BD08A; }
.demo__ico--falha { color: var(--nx-vermilion-400); }
.demo__ico--info { color: var(--muted); }
.demo__achado--falha { border-color: rgba(249,75,12,.35); background: rgba(249,75,12,.07); }
.demo__plat { font-family: var(--nx-font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Estados com JS: futura apagada, atual aberta e acesa, feita com check; a linha da atual se preenche no tempo da etapa. */
.demo__palco.is-anima .demo__pcorpo { grid-template-rows: 0fr; transition: grid-template-rows .55s var(--nx-ease-out-expo); }
.demo__palco.is-anima .demo__passo.is-atual .demo__pcorpo { grid-template-rows: 1fr; }
.demo__palco.is-anima .demo__passo:not(.is-atual) .demo__pdentro { opacity: 0; transition: opacity .2s; }
.demo__palco.is-anima .demo__passo.is-atual .demo__pdentro { opacity: 1; transition: opacity .4s .15s; }
.demo__palco.is-anima .demo__passo:not(.is-atual):not(.is-feito) .demo__ptit { color: var(--muted); }
.demo__palco.is-anima .demo__pcab:hover .demo__ptit { color: var(--fg); }
.demo__passo.is-feito .demo__pnum { border-color: #FFFFFF; background: #FFFFFF; color: var(--nx-ink); }
.demo__passo.is-feito .demo__pnum span { display: none; }
.demo__passo.is-feito .demo__pnum svg { display: block; }
.demo__passo.is-feito::after { transform: scaleY(1); }
.demo__passo.is-atual .demo__pnum { border-color: var(--nx-vermilion-400); background: var(--nx-vermilion-400); color: var(--nx-ink); font-weight: 600;
  box-shadow: 0 0 0 6px rgba(249,75,12,.18), 0 10px 30px -6px rgba(249,75,12,.6); }
.demo.is-rodando .demo__passo.is-atual::after { animation: demo-linha 4.2s linear both; }
@keyframes demo-linha { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.demo__palco.is-anima .demo__passo.is-atual .demo__achado { animation: demo-achado .5s var(--nx-ease-out-expo) both; }
.demo__palco.is-anima .demo__passo.is-atual .demo__achado:nth-child(1) { animation-delay: .5s; }
.demo__palco.is-anima .demo__passo.is-atual .demo__achado:nth-child(2) { animation-delay: 1.2s; }
.demo__palco.is-anima .demo__passo.is-atual .demo__achado:nth-child(3) { animation-delay: 1.9s; }
@keyframes demo-achado { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

/* Nota (etapa 7) */
.demo__nota { margin: 0 0 22px; padding: 20px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.demo__placar { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; }
.demo__num { font-family: var(--nx-font-mono); font-size: 64px; font-weight: 500; line-height: .9; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.demo__de { font-family: var(--nx-font-mono); font-size: 18px; color: var(--muted); }
.demo__rotulo { margin-left: auto; align-self: center; }
.demo__blocos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.demo__blocos li { display: grid; grid-template-columns: minmax(0, 1fr) 96px 40px; gap: 10px; align-items: center; font-size: 12px; color: var(--fg-2); }
.demo__bbarra { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.demo__bbarra i { display: block; height: 100%; width: var(--v); background: #FFFFFF; transform-origin: left; }
.demo__palco.is-anima .demo__passo:not(.is-atual) .demo__bbarra i { transform: scaleX(0); }
.demo__palco.is-anima .demo__passo.is-atual .demo__bbarra i { transition: transform 1.1s var(--nx-ease-out-expo) .5s; }
.demo__bval { font-family: var(--nx-font-mono); text-align: right; }

/* Navegador do robô */
.demo__nav { position: sticky; top: 104px; display: flex; flex-direction: column; min-height: 520px; border-radius: var(--nx-r-md); overflow: hidden; background: #FFFFFF; color: var(--nx-ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -50px rgba(249,75,12,.55), 0 30px 60px -30px rgba(0,0,0,.6); }
.demo__barra { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--nx-gray-100); border-bottom: 1px solid var(--nx-gray-200); }
.demo__luzes { display: flex; gap: 6px; }
.demo__luzes i { width: 10px; height: 10px; border-radius: 50%; background: var(--nx-gray-200); }
.demo__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--nx-r-pill); background: #FFFFFF; border: 1px solid var(--nx-gray-200);
  font-family: var(--nx-font-mono); font-size: 13px; white-space: nowrap; overflow: hidden; }
.demo__url svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--nx-gray-500); }
.demo__host { min-height: 1em; }
.demo__q { display: none; color: var(--nx-vermilion-600); }
.demo__palco[data-passo="4"] .demo__q--clique,
.demo__palco:is([data-passo="5"], [data-passo="6"], [data-passo="7"]) .demo__q--contato { display: inline; }
.demo__site { position: relative; flex: 1; overflow: hidden; }
.demo__pag { position: absolute; inset: 0; padding: 22px 24px; transition: opacity .5s var(--nx-ease-out-expo), transform .5s var(--nx-ease-out-expo); }
.demo__pag--contato { opacity: 0; transform: translateX(32px); }
.demo__palco:is([data-passo="5"], [data-passo="6"], [data-passo="7"]) .demo__pag--home { opacity: 0; transform: translateX(-32px); }
.demo__palco:is([data-passo="5"], [data-passo="6"], [data-passo="7"]) .demo__pag--contato { opacity: 1; transform: none; }
.demo__menu { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.demo__menu b { width: 64px; height: 12px; border-radius: 3px; background: var(--nx-ink); margin-right: 8px; }
.demo__menu i { width: 36px; height: 7px; border-radius: 3px; background: var(--nx-gray-200); }
.demo__hero b { display: block; height: 22px; width: 76%; border-radius: 4px; background: var(--nx-ink); margin-bottom: 10px; }
.demo__hero b + b { width: 54%; }
.demo__hero i { display: block; height: 9px; width: 62%; border-radius: 3px; background: var(--nx-gray-200); margin: 18px 0 20px; }
.demo__btn { display: inline-block; padding: 9px 16px; border-radius: var(--nx-r-pill); background: var(--nx-vermilion-400); color: var(--nx-ink); font-size: 12px; font-weight: 600; }
.demo__btn--sm { padding: 6px 12px; font-size: 11px; }
.demo__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
.demo__cards i { display: block; height: 76px; border-radius: 8px; background: var(--nx-gray-100); }
.demo__form { display: grid; gap: 4px; max-width: 54%; }
.demo__rot { font-size: 11px; color: var(--nx-gray-500); }
.demo__form i { display: block; height: 30px; border: 1px solid var(--nx-gray-200); border-radius: 6px; margin-bottom: 10px; }
.demo__form .demo__btn { justify-self: start; }
.demo__ocultos { position: absolute; right: 24px; top: 70px; width: 41%; display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--nx-r-xs); background: var(--nx-ink); color: #FFFFFF;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.demo__ocultos .demo__rot { color: rgba(255,255,255,.6); }
.demo__ocultos code { display: flex; align-items: center; gap: 6px; font-family: var(--nx-font-mono); font-size: 12px; overflow-wrap: anywhere; }
.demo__ocultos .demo__ico { width: 13px; height: 13px; flex-shrink: 0; }
.demo__ocultos em { font-style: normal; color: var(--nx-vermilion-300); }
.demo__tags { position: absolute; top: 18px; right: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 46%; z-index: 2; }
.demo__tags span { padding: 4px 9px; border-radius: var(--nx-r-pill); background: var(--nx-ink); color: #FFFFFF; font-family: var(--nx-font-mono); font-size: 11px; }
.demo__cmp { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 10px; background: var(--nx-ink); color: #FFFFFF; font-size: 12px; opacity: 0; transform: translateY(16px); pointer-events: none; }
.demo__palco[data-passo="2"] .demo__cmp { opacity: 1; transform: none; transition: opacity .4s, transform .4s var(--nx-ease-out-expo); }
.demo__palco[data-passo="3"] .demo__cmp { animation: demo-cmp 3s both; }
@keyframes demo-cmp { 0%, 55% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; transform: translateY(16px); } }
.demo__safari { position: absolute; left: 24px; bottom: 20px; z-index: 2; display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: #FFFFFF;
  border: 1.5px solid var(--nx-vermilion-400); font-size: 12px; box-shadow: 0 16px 32px -16px rgba(249,75,12,.5); }
.demo__safari b { font-family: var(--nx-font-mono); font-size: 11px; font-weight: 500; color: var(--nx-gray-500); }
.demo__safari strong { color: var(--nx-vermilion-600); }
/* Etapa 7: o laudo carimba o site. */
.demo__conta { position: absolute; right: 24px; bottom: 20px; z-index: 3; display: flex; align-items: baseline; gap: 4px; padding: 14px 18px; border-radius: 12px;
  background: var(--nx-ink); color: #FFFFFF; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
.demo__conta span { font-family: var(--nx-font-mono); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.demo__conta small { font-family: var(--nx-font-mono); font-size: 14px; color: rgba(255,255,255,.6); }
.demo__palco.is-anima [data-de] { transition: opacity .45s var(--nx-ease-out-expo), transform .45s var(--nx-ease-out-expo); }
.demo__palco.is-anima [data-de]:not(.on) { opacity: 0; transform: translateY(10px) scale(.98); }
.demo__status { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--nx-gray-200); background: var(--nx-gray-50);
  font-family: var(--nx-font-mono); font-size: 11px; color: var(--nx-gray-700); white-space: nowrap; overflow: hidden; }
.demo__status span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.demo:not(.is-rodando) .demo__status .nx-radar i::before, .demo:not(.is-rodando) .demo__status .nx-radar i::after { animation: none; }

/* Cursor do robô: posição por etapa, anel de clique nas etapas 3 e 4. */
.demo__cursor { position: absolute; z-index: 4; left: 70%; top: 30%; width: 18px; height: 22px; background: var(--nx-ink);
  clip-path: polygon(0 0, 100% 62%, 56% 66%, 74% 100%, 58% 100%, 40% 70%, 0 92%); filter: drop-shadow(0 0 1px #FFFFFF) drop-shadow(0 2px 4px rgba(0,0,0,.3));
  transition: left 1s var(--nx-ease-out-expo), top 1s var(--nx-ease-out-expo); }
.demo__palco[data-passo="2"] .demo__cursor { left: 46%; top: 44%; }
.demo__palco[data-passo="3"] .demo__cursor { left: calc(100% - 64px); top: calc(100% - 42px); }
.demo__palco[data-passo="4"] .demo__cursor { left: 66px; top: 186px; }
.demo__palco[data-passo="5"] .demo__cursor { left: 30%; top: 46%; }
.demo__palco[data-passo="6"] .demo__cursor { left: 34%; top: 70%; }
.demo__palco[data-passo="7"] .demo__cursor { left: 62%; top: 62%; }
.demo__palco.is-anima:is([data-passo="3"], [data-passo="4"]) .demo__site::after { content: ""; position: absolute; z-index: 3; width: 36px; height: 36px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2px solid var(--nx-vermilion-400); animation: demo-clique 2.4s 1s both; pointer-events: none; }
.demo__palco[data-passo="3"] .demo__site::after { left: calc(100% - 64px); top: calc(100% - 42px); }
.demo__palco[data-passo="4"] .demo__site::after { left: 66px; top: 186px; }
@keyframes demo-clique { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; } 40%, 100% { opacity: 0; transform: scale(1.6); } }

.previa__link { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px dashed var(--line-dash);
  font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; }
.previa__link:hover { background: var(--surface); }
.previa__link svg { width: 12px; height: 12px; transition: transform .2s var(--nx-ease-out-expo); }
.previa__link:hover svg { transform: translateY(2px); }
.previa__link:focus-visible { outline: 2px solid var(--nx-vermilion-400); outline-offset: -2px; }
.demo { scroll-margin-top: 24px; }
.demo__rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px dashed var(--line-dash); }
.demo__aviso { margin: 0; font-size: 12px; color: var(--muted); }
.demo__pausa { flex-shrink: 0; padding: 8px 16px; border: 1px solid var(--line-control); border-radius: var(--nx-r-pill); background: none; color: var(--fg);
  font-family: var(--nx-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.demo__pausa:hover { border-color: #FFFFFF; }
.demo__pausa:focus-visible { outline: 2px solid var(--nx-vermilion-400); outline-offset: 4px; }

@media (max-width: 1100px) {
  .demo__palco { gap: 36px; }
}
@media (max-width: 960px) {
  .demo__palco { grid-template-columns: 1fr; gap: 32px; }
  .demo__nav { position: relative; top: 0; order: -1; }
}
@media (max-width: 640px) {
  .demo { padding: 72px 0 64px; }
  .demo__topo { margin-bottom: 36px; }
  .demo__topo h2 { font-size: 34px; }
  .demo__apoio { font-size: 16px; }
  .demo__nav { min-height: 560px; }
  .demo__pag { padding: 18px 16px; }
  .demo__menu { margin-bottom: 52px; }
  .demo__menu i { display: none; }
  .demo__tags { max-width: 60%; right: 12px; top: 14px; }
  .demo__tags span { padding: 3px 7px; font-size: 10px; }
  .demo__cards i { height: 56px; }
  .demo__form { max-width: 100%; }
  .demo__form i { height: 24px; margin-bottom: 6px; }
  .demo__ocultos { position: static; width: auto; margin-top: 14px; padding: 12px 14px; gap: 6px; }
  .demo__safari { left: 16px; right: 16px; bottom: 16px; }
  .demo__conta { right: 16px; top: 96px; bottom: auto; padding: 10px 14px; }
  .demo__conta span { font-size: 30px; }
  .demo__palco[data-passo="3"] .demo__cursor, .demo__palco[data-passo="3"] .demo__site::after { left: calc(100% - 54px); }
  .demo__palco[data-passo="4"] .demo__cursor, .demo__palco[data-passo="4"] .demo__site::after { left: 52px; top: 176px; }
  .demo__passo { padding-left: 46px; }
  .demo__pnum { left: -46px; }
  .demo__ptit { font-size: 17px; }
  .demo__achado { grid-template-columns: 16px minmax(0, 1fr); font-size: 13.5px; }
  .demo__plat { grid-column: 2; }
  .demo__achado .demo__txt { grid-column: 2; }
  .demo__num { font-size: 52px; }
  .demo__blocos li { grid-template-columns: minmax(0, 1fr) 72px 36px; }
  .demo__rodape { flex-direction: column-reverse; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .demo__cursor, .demo__pag, .demo__palco.is-anima [data-de], .demo__palco.is-anima .demo__pcorpo, .demo__palco.is-anima .demo__pdentro,
  .demo__palco.is-anima .demo__passo.is-atual .demo__bbarra i { transition: none !important; }
  .demo__palco.is-anima .demo__passo.is-atual .demo__achado, .demo.is-rodando .demo__passo.is-atual::after, .demo__palco[data-passo="3"] .demo__cmp,
  .demo__palco.is-anima .demo__site::after { animation: none !important; }
  .demo__palco[data-passo="3"] .demo__cmp { opacity: 0; }
  .demo__passo.is-atual::after { transform: scaleY(1); }
}

/* Vitrine dos 23 pontos */
.pontos { padding: 112px 0 96px; }
.pontos__topo { max-width: 760px; margin-bottom: 48px; }
.pontos__topo h2 { margin: 16px 0; }
.pontos__apoio { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 60ch; }
.pontos__legenda { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.pontos__legenda i { width: 16px; height: 6px; border-radius: 2px; background: var(--nx-vermilion-400); }
.pontos__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pontos__bloco { padding: 28px; border: 1px solid var(--line); border-radius: var(--nx-r-card); background: var(--bg); transition: border-color .2s, box-shadow .2s; }
.pontos__bloco:hover { border-color: var(--nx-gray-400); box-shadow: 0 24px 48px -32px rgba(10,10,10,.25); }
.pontos__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pontos__cab h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.pontos__total { flex-shrink: 0; font-family: var(--nx-font-mono); font-size: 13px; color: var(--muted); }
.pontos__texto { margin: 8px 0 20px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.pontos__barra { display: flex; gap: 3px; height: 8px; margin-bottom: 8px; }
.pontos__barra i { display: block; border-radius: 2px; background: var(--fg); opacity: .8; transition: opacity .2s, transform .2s; }
.pontos__barra i.is-crit { background: var(--nx-vermilion-400); opacity: 1; }
.pontos__lista { list-style: none; margin: 0; padding: 0; }
.pontos__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line-dash); }
.pontos__peso { font-family: var(--nx-font-mono); font-size: 15px; font-weight: 500; line-height: 1.4; }
.pontos__nome { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.pontos__crit { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid currentColor; border-radius: var(--nx-r-pill); color: var(--nx-vermilion-600);
  font-family: var(--nx-font-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.pontos__reprova { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.pontos__reprova span { color: var(--fg-2); }
/* Passar o mouse num ponto acende o pedaço dele na barra do bloco (até 8 pontos por bloco). */
.pontos__bloco:has(.pontos__item:hover) .pontos__barra i { opacity: .2; }
.pontos__bloco:has(.pontos__item:nth-child(1):hover) .pontos__barra i:nth-child(1),
.pontos__bloco:has(.pontos__item:nth-child(2):hover) .pontos__barra i:nth-child(2),
.pontos__bloco:has(.pontos__item:nth-child(3):hover) .pontos__barra i:nth-child(3),
.pontos__bloco:has(.pontos__item:nth-child(4):hover) .pontos__barra i:nth-child(4),
.pontos__bloco:has(.pontos__item:nth-child(5):hover) .pontos__barra i:nth-child(5),
.pontos__bloco:has(.pontos__item:nth-child(6):hover) .pontos__barra i:nth-child(6),
.pontos__bloco:has(.pontos__item:nth-child(7):hover) .pontos__barra i:nth-child(7),
.pontos__bloco:has(.pontos__item:nth-child(8):hover) .pontos__barra i:nth-child(8) { opacity: 1; transform: scaleY(1.6); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pontos__barra { animation: pontos-cresce linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    @keyframes pontos-cresce { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  }
}


@media (max-width: 960px) {
  .pontos__grade { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pontos { padding: 64px 0; }
  .pontos__topo h2 { font-size: var(--nx-fs-h3); }
  .pontos__bloco { padding: 20px; }
  .pontos__cab h3 { font-size: 19px; }
}