/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Núcleo de IA · identidade visual para páginas (site, funis, formulários, e-mails em HTML)
   Kit do Tiago (29/09/2026), aprovado pelo Gian no app ("eu quero exatamente assim"). Fonte da verdade: Marca/README.md.

   Como usar numa página:
     <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap">
     <link rel="stylesheet" href="/marca/nucleo-de-ia.css">
   A página é escura por padrão. Seção clara (respiro, manifesto): class="n1-claro".
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* A paleta: só estas cinco cores e o verde do símbolo. O resto é transparência de branco ou de lime. */
  --n1-preto: #1a1a1a;
  --n1-preto-fundo: #121212;
  --n1-grafite: #272727;
  --n1-grafite-alto: #303030;
  --n1-cinza: #808080;
  --n1-lime: #d2f900;
  --n1-lime-hover: #ddff33;
  --n1-branco: #ffffff;
  --n1-verde-simbolo: #9afe00; /* só no símbolo */

  /* Papéis (escuro, o padrão) */
  --n1-pagina: var(--n1-preto);
  --n1-rebaixado: var(--n1-preto-fundo);
  --n1-cartao: var(--n1-grafite);
  --n1-vidro: rgba(39, 39, 39, 0.56);
  --n1-vidro-forte: rgba(39, 39, 39, 0.82);
  --n1-texto: var(--n1-branco);
  --n1-texto-2: rgba(255, 255, 255, 0.72);
  --n1-texto-3: #999999;
  --n1-destaque-texto: var(--n1-lime);
  --n1-fio: rgba(255, 255, 255, 0.07);
  --n1-fio-medio: rgba(255, 255, 255, 0.1);
  --n1-fio-forte: rgba(255, 255, 255, 0.16);
  --n1-fio-vidro: rgba(255, 255, 255, 0.12);
  --n1-foco: 0 0 0 3px rgba(210, 249, 0, 0.24);

  /* Tipografia: Geist em tudo, Geist Mono em dados, horários e rótulos. Títulos 500 com tracking negativo. */
  --n1-fonte: "Geist", "Geist Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --n1-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Raios: 6 / 10 / 14 (campos) / 20 (cartões) / 28 (diálogos, player, blocos grandes) / pílula (botões, selos, menu) */
  --n1-raio-xs: 6px;
  --n1-raio-sm: 10px;
  --n1-raio-md: 14px;
  --n1-raio-lg: 20px;
  --n1-raio-xl: 28px;
  --n1-raio-pilula: 999px;

  /* Sombras e vidro */
  --n1-brilho-topo: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --n1-sombra-vidro: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 40px rgba(0, 0, 0, 0.32);
  --n1-sombra-clara: 0 1px 2px rgba(26, 26, 26, 0.04), 0 12px 32px rgba(26, 26, 26, 0.06);
  --n1-halo-lime: 0 0 0 1px rgba(210, 249, 0, 0.4), 0 8px 32px rgba(210, 249, 0, 0.18);
  --n1-desfoque: blur(20px) saturate(140%);

  /* Movimento: ease-out, 120 (micro) / 200 (padrão) / 360 ms (entrada). Sem bounce. */
  --n1-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --n1-rapido: 120ms;
  --n1-base: 200ms;
  --n1-lento: 360ms;

  --n1-largura: 1200px;
  color-scheme: dark;
}

/* Escopo claro (seção de respiro, manifesto, material impresso). O lime não vira texto no claro: vira bloco ou marca-texto. */
.n1-claro {
  --n1-pagina: var(--n1-branco);
  --n1-rebaixado: #f4f4f4;
  --n1-cartao: var(--n1-branco);
  --n1-vidro: rgba(255, 255, 255, 0.64);
  --n1-vidro-forte: rgba(255, 255, 255, 0.84);
  --n1-texto: var(--n1-preto);
  --n1-texto-2: rgba(26, 26, 26, 0.72);
  --n1-texto-3: #666666;
  --n1-destaque-texto: var(--n1-preto);
  --n1-fio: rgba(26, 26, 26, 0.06);
  --n1-fio-medio: rgba(26, 26, 26, 0.1);
  --n1-fio-forte: rgba(26, 26, 26, 0.16);
  --n1-fio-vidro: rgba(255, 255, 255, 0.7);
  color-scheme: light;
  background: var(--n1-pagina);
  color: var(--n1-texto);
}

/* ─── Base ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Âncora (#secao) não para escondida atrás da navegação fixa */
[id] {
  scroll-margin-top: 96px;
}
body {
  margin: 0;
  background: var(--n1-pagina);
  color: var(--n1-texto);
  font-family: var(--n1-fonte);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,
svg,
video {
  max-width: 100%;
}
a {
  color: var(--n1-destaque-texto);
  text-underline-offset: 3px;
}
::selection {
  background: var(--n1-lime);
  color: var(--n1-preto);
}
:focus-visible {
  outline: none;
  box-shadow: var(--n1-foco);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─── Layout ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.n1-container {
  width: 100%;
  max-width: var(--n1-largura);
  margin-inline: auto;
  padding-inline: 20px;
}
.n1-secao {
  padding-block: 72px;
}
@media (min-width: 768px) {
  .n1-container {
    padding-inline: 24px;
  }
  .n1-secao {
    padding-block: 120px;
  }
}

/* ─── Tipografia ───────────────────────────────────────────────────────────────────────────────────────────────── */
.n1-display,
.n1-h1,
.n1-h2,
.n1-h3,
.n1-h4 {
  margin: 0;
  font-weight: 500;
  text-wrap: balance;
}
.n1-display {
  font-size: clamp(40px, 9vw, 80px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.n1-h1 {
  font-size: clamp(34px, 7vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.n1-h2 {
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.n1-h3 {
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.n1-h4 {
  font-size: 22px;
  line-height: 1.27;
  letter-spacing: -0.02em;
}
.n1-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.56;
  color: var(--n1-texto-2);
  text-wrap: pretty;
}
.n1-texto {
  margin: 0;
  color: var(--n1-texto-2);
  text-wrap: pretty;
}
.n1-miudo {
  font-size: 14px;
  line-height: 1.57;
  color: var(--n1-texto-3);
}
.n1-rotulo {
  font-family: var(--n1-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n1-texto-3);
}
.n1-lime {
  color: var(--n1-destaque-texto);
}
.n1-apagado {
  color: var(--n1-texto-3);
}
.n1-marca-texto {
  background: var(--n1-lime);
  color: var(--n1-preto);
  padding: 0 0.16em;
  border-radius: 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.n1-num {
  font-family: var(--n1-mono);
  font-variant-numeric: tabular-nums;
}

/* ─── Botão: pílula, Geist 500, aperta a 97%. A assinatura da marca é a bolha com a seta (.n1-btn__bolha). ─────── */
.n1-btn {
  --btn-fundo: var(--n1-lime);
  --btn-texto: var(--n1-preto);
  --btn-borda: transparent;
  --btn-hover: var(--n1-lime-hover);
  --bolha-fundo: var(--n1-preto);
  --bolha-texto: var(--n1-lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--n1-raio-pilula);
  border: 1px solid var(--btn-borda);
  background: var(--btn-fundo);
  color: var(--btn-texto);
  font-family: var(--n1-fonte);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color var(--n1-base) var(--n1-ease),
    border-color var(--n1-base) var(--n1-ease),
    transform var(--n1-rapido) var(--n1-ease);
}
.n1-btn:hover {
  background: var(--btn-hover);
}
.n1-btn:active {
  transform: scale(0.97);
}
.n1-btn--seta {
  padding-right: 7px;
}
.n1-btn__bolha {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bolha-fundo);
  color: var(--bolha-texto);
  transition: transform var(--n1-base) var(--n1-ease);
}
.n1-btn__bolha svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.25;
}
.n1-btn:hover .n1-btn__bolha {
  transform: translateX(2px);
}
.n1-btn svg {
  flex: none;
}
.n1-btn--md {
  min-height: 42px;
  padding: 0 20px;
  font-size: 14px;
}
.n1-btn--md.n1-btn--seta {
  padding-right: 6px;
}
.n1-btn--md .n1-btn__bolha {
  width: 30px;
  height: 30px;
}
.n1-btn--md .n1-btn__bolha svg {
  width: 16px;
  height: 16px;
}
.n1-btn--sm {
  min-height: 32px;
  padding: 0 14px;
  font-size: 13px;
}
/* Variantes. No claro, o primário é preto com a bolha lime (o lime some sobre branco); as variantes vêm depois e ganham. */
.n1-claro .n1-btn {
  --btn-fundo: var(--n1-preto);
  --btn-texto: var(--n1-branco);
  --btn-hover: #000;
  --bolha-fundo: var(--n1-lime);
  --bolha-texto: var(--n1-preto);
}
.n1-btn.n1-btn--escuro {
  --btn-fundo: var(--n1-preto);
  --btn-texto: var(--n1-branco);
  --btn-borda: var(--n1-fio-medio);
  --btn-hover: #000;
  --bolha-fundo: var(--n1-lime);
  --bolha-texto: var(--n1-preto);
}
.n1-btn.n1-btn--claro {
  --btn-fundo: var(--n1-branco);
  --btn-texto: var(--n1-preto);
  --btn-hover: #ededed;
  --bolha-fundo: var(--n1-preto);
  --bolha-texto: var(--n1-lime);
}
.n1-btn.n1-btn--secundario {
  --btn-fundo: rgba(255, 255, 255, 0.06);
  --btn-texto: var(--n1-texto);
  --btn-borda: var(--n1-fio-medio);
  --btn-hover: rgba(255, 255, 255, 0.1);
  --bolha-fundo: var(--n1-lime);
  --bolha-texto: var(--n1-preto);
  -webkit-backdrop-filter: var(--n1-desfoque);
  backdrop-filter: var(--n1-desfoque);
}
.n1-claro .n1-btn.n1-btn--secundario {
  --btn-fundo: rgba(26, 26, 26, 0.04);
  --btn-hover: rgba(26, 26, 26, 0.08);
}
.n1-btn.n1-btn--fantasma {
  --btn-fundo: transparent;
  --btn-texto: var(--n1-texto);
  --btn-hover: rgba(255, 255, 255, 0.06);
  --bolha-fundo: transparent;
  --bolha-texto: currentColor;
}
/* No celular o botão ocupa a largura (regra da casa para página de venda); do tablet pra cima, largura do texto. */
.n1-btn--cheio {
  width: 100%;
}
@media (min-width: 640px) {
  .n1-btn--cheio-celular {
    width: auto;
  }
}
@media (max-width: 639px) {
  .n1-btn--cheio-celular {
    width: 100%;
  }
}

/* ─── Cartão: grafite, fio de 7%, brilho de 1px no topo; clicável sobe 2px. Raio 20. ────────────────────────────── */
.n1-cartao {
  position: relative;
  border-radius: var(--n1-raio-lg);
  border: 1px solid var(--n1-fio);
  background: var(--n1-cartao);
  box-shadow: var(--n1-brilho-topo);
  color: var(--n1-texto);
}
.n1-claro .n1-cartao {
  box-shadow: var(--n1-sombra-clara);
}
.n1-cartao--vidro {
  background: var(--n1-vidro);
  border-color: var(--n1-fio-vidro);
  box-shadow: var(--n1-sombra-vidro);
  -webkit-backdrop-filter: var(--n1-desfoque);
  backdrop-filter: var(--n1-desfoque);
}
.n1-cartao--contorno {
  background: transparent;
  border-color: var(--n1-fio-medio);
  box-shadow: none;
}
.n1-cartao--lime {
  background: var(--n1-lime);
  border-color: transparent;
  color: var(--n1-preto);
  box-shadow: none;
}
.n1-cartao--interativo {
  transition:
    transform var(--n1-base) var(--n1-ease),
    border-color var(--n1-base) var(--n1-ease);
}
.n1-cartao--interativo:hover {
  transform: translateY(-2px);
  border-color: var(--n1-fio-forte);
}

/* ─── Selo (badge) e etiqueta (tag) ───────────────────────────────────────────────────────────────────────────── */
.n1-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: var(--n1-raio-pilula);
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  color: var(--n1-texto);
}
.n1-selo--lime {
  background: var(--n1-lime);
  color: var(--n1-preto);
}
.n1-selo--suave {
  background: rgba(210, 249, 0, 0.12);
  border-color: rgba(210, 249, 0, 0.24);
  color: var(--n1-lime);
}
.n1-claro .n1-selo--suave {
  background: rgba(210, 249, 0, 0.35);
  border-color: rgba(26, 26, 26, 0.1);
  color: var(--n1-preto);
}
.n1-selo--contorno {
  background: transparent;
  border-color: var(--n1-fio-forte);
  color: var(--n1-texto-2);
}
.n1-ponto {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--n1-lime);
}
.n1-selo--suave .n1-ponto,
.n1-ponto--halo {
  box-shadow: 0 0 0 3px rgba(210, 249, 0, 0.24);
}
.n1-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--n1-raio-pilula);
  border: 1px solid var(--n1-fio-medio);
  background: rgba(255, 255, 255, 0.06);
  color: var(--n1-texto);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  -webkit-backdrop-filter: var(--n1-desfoque);
  backdrop-filter: var(--n1-desfoque);
}
.n1-claro .n1-etiqueta {
  background: rgba(26, 26, 26, 0.04);
}

/* ─── Ícone em quadrado (tile): 44px, raio 12, fundo 6% e fio 10%; no destaque, lime cheio ───────────────────────── */
.n1-tile {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--n1-fio-medio);
  color: var(--n1-texto);
}
.n1-tile svg {
  width: 20px;
  height: 20px;
}
.n1-tile--lime {
  background: var(--n1-lime);
  border-color: transparent;
  color: var(--n1-preto);
}
.n1-icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Navegação: pílula de vidro fixa a 16px do topo ──────────────────────────────────────────────────────────── */
.n1-nav-faixa {
  position: sticky;
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 50;
  padding-inline: 12px;
}
.n1-nav {
  max-width: var(--n1-largura);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 8px 8px 18px;
  border-radius: var(--n1-raio-pilula);
  background: var(--n1-vidro);
  border: 1px solid var(--n1-fio-vidro);
  box-shadow: var(--n1-sombra-vidro);
  -webkit-backdrop-filter: var(--n1-desfoque);
  backdrop-filter: var(--n1-desfoque);
}
.n1-nav__logo {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  flex: none;
}
.n1-nav__logo img {
  height: 22px;
  width: auto;
  display: block;
}
.n1-nav__links {
  display: none;
  gap: 28px;
  margin-inline: auto;
  font-size: 14px;
}
.n1-nav__links a {
  color: var(--n1-texto-2);
  text-decoration: none;
  transition: color var(--n1-base) var(--n1-ease);
}
.n1-nav__links a:hover {
  color: var(--n1-texto);
}
.n1-nav__acoes {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
/* celular muito estreito (320px): o botão da navegação cabe numa linha */
@media (max-width: 359px) {
  .n1-nav {
    gap: 10px;
    padding-left: 14px;
  }
  .n1-nav .n1-btn--md {
    padding-left: 14px;
  }
}
@media (min-width: 960px) {
  .n1-nav-faixa {
    top: calc(16px + env(safe-area-inset-top, 0px));
    padding-inline: 24px;
  }
  .n1-nav__links {
    display: flex;
  }
  .n1-nav__acoes {
    margin-left: 0;
  }
}

/* ─── Fundos da ID: vazamento de luz lime, grade de pontos, símbolo em marca d'água ───────────────────────────────── */
/* A luz e a grade são camadas do mesmo background-image: uma classe de luz junto com .n1-pontos soma as duas (antes, a
   que viesse depois apagava a outra). Vêm depois do cartão, então também valem num .n1-cartao. As camadas não passam pros
   filhos (um .n1-pontos dentro de um .n1-luz-topo não herda a luz). */
@property --n1-camada-luz {
  syntax: "*";
  inherits: false;
}
@property --n1-camada-grade {
  syntax: "*";
  inherits: false;
}
.n1-luz-topo {
  --n1-camada-luz: radial-gradient(55% 60% at 50% 0%, rgba(210, 249, 0, 0.28), transparent 70%);
}
.n1-luz-canto {
  --n1-camada-luz: radial-gradient(80% 100% at 100% 0%, rgba(210, 249, 0, 0.2), transparent 60%);
}
.n1-luz-baixo {
  --n1-camada-luz: radial-gradient(60% 80% at 50% 100%, rgba(210, 249, 0, 0.26), transparent 70%);
}
.n1-pontos {
  --n1-camada-grade: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}
.n1-claro .n1-pontos,
.n1-claro.n1-pontos {
  --n1-camada-grade: radial-gradient(rgba(26, 26, 26, 0.08) 1px, transparent 1px);
}
.n1-luz-topo,
.n1-luz-canto,
.n1-luz-baixo,
.n1-pontos {
  background-image: var(--n1-camada-luz, none), var(--n1-camada-grade, none);
  background-size: auto, 22px 22px;
}
.n1-marca-dagua {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.06;
}

/* ─── Divisória com rótulo e lista de marcação ─────────────────────────────────────────────────────────────────── */
.n1-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.n1-lista li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.n1-lista li .n1-icone {
  margin-top: 3px;
}

/* ─── Perguntas (details/summary) ─────────────────────────────────────────────────────────────────────────────── */
.n1-pergunta {
  border-bottom: 1px solid var(--n1-fio-medio);
}
.n1-pergunta summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.n1-pergunta summary::-webkit-details-marker {
  display: none;
}
.n1-pergunta summary .n1-icone {
  color: var(--n1-texto-3);
  transition: transform var(--n1-base) var(--n1-ease);
}
.n1-pergunta[open] summary .n1-icone {
  transform: rotate(180deg);
}
.n1-pergunta p {
  margin: 0;
  padding: 0 0 22px;
  color: var(--n1-texto-2);
  max-width: 68ch;
}

/* ─── Rodapé ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.n1-rodape {
  border-top: 1px solid var(--n1-fio);
  padding-block: 36px calc(36px + env(safe-area-inset-bottom, 0px));
}
.n1-rodape .n1-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.n1-rodape img {
  height: 22px;
  width: auto;
  display: block;
}
.n1-rodape small {
  margin-left: auto;
  font-size: 13px;
  color: var(--n1-texto-3);
}