/* ── tokens ── */
/* BKDG — tokens canônicos.
   ----------------------------------------------------------------------------------------------
   IMPORTANTE: os NOMES das CSS vars abaixo são PRESERVADOS do projeto fonte (são identificadores
   técnicos referenciados por todos os componentes). Apenas os VALORES foram trocados pelos do
   Design System v1.0 (D-02). Trocar os valores aqui aplica a marca da BKDG em toda LP. */

/* PALETA DO PACOTE DE MARCA (bkdg-design, 23/09/2026: Brandbook v0.10 + DS v0.4).
   Troca aprovada pelo João em 2026-10-02. São cinco cores, sem variante nova: Preto
   #0A0A0A, Off #F4F2E5, Bordô #661F2E, Inox #8C8F93 e Prata #C9CCD0.
   Escuro é banner, claro é conteúdo, bordô é gesto (um por tela).
   Aposentados, não voltam: Osso #F1ECE2, Terra Queimada #A04A2C, Índigo #2C3363,
   bordô claro, fundo branco puro.
   Como manda o D-02, a troca é no VALOR: os nomes abaixo são os identificadores que
   todo componente referencia e não mudam (`--nuit` e `--spring` querem dizer "o
   acento da marca"; `--praxeti` quer dizer "texto claro sobre escuro"). */
:root {
  /* Raw tokens (nomes preservados) */
  --midnight:     #0A0A0A; /* Preto */
  --azul-dark:    #0A0A0A; /* Preto */
  --nuit:         #661F2E; /* Bordô */
  --spring:       #661F2E; /* Bordô */
  --mantis:       #45474A; /* texto secundário */
  /* Texto e ícone claros sobre superfície escura, e a cor clara do material 3D.
     Era o Osso; passou ao Off, que é o claro da paleta. */
  --praxeti:      #F4F2E5; /* Off */
  --gray-dark:    #45474A;
  --gray-neutral: #D9D6CD;
  --inox:         #8C8F93; /* neutro médio: rótulo, secundário sobre escuro (6.1:1 sobre Preto) */
  --prata:        #C9CCD0; /* neutro claro sobre escuro (12.3:1 sobre Preto) */

  /* Semantic aliases — modo claro (padrão do site) */
  --bg-primary:       #F4F2E5; /* Off: o fundo de página */
  /* Sem variante nova de fundo: painel sobre o Off se separa por borda, não por tom. */
  --bg-secondary:     #F4F2E5;
  --text-primary:     #0A0A0A; /* 17.6:1 sobre o Off */
  --text-secondary:   #45474A; /* 8.3:1 */
  /* 4.55:1 sobre o Off: passa o AA (4.5:1) por pouco. Use em rótulo e metadado sobre o
     Off, não em texto corrido nem sobre o cartão (lá, --text-secondary). */
  --text-tertiary:    #6B6E73;
  --border-secondary: #D9D6CD; /* divider */
  --border-tertiary:  #D9D6CD;

  /* Accent (Bordô: o gesto da marca) */
  --accent:           #661F2E; /* 10.4:1 sobre o Off: texto AAA */
  /* Os MESMOS canais do --accent, separados por espaço, para as transparências:
     `rgb(var(--accent-rgb) / 0.25)`. Não dá para aplicar alfa a um hex guardado em
     custom property.
     OS DOIS ANDAM JUNTOS: o build de cada LP confere (conferirAcento, em conferir.mjs)
     e falha se um mudar sem o outro. */
  --accent-rgb:       102 31 46;
  /* O indicador de acento sobre superfície escura (o sublinhado da Nav, o item ativo
     do menu mobile). O bordô sobre Preto dá 1.7:1 e o pacote o permite só como
     bloco, nunca como texto ou traço; o bordô claro que vivia aqui foi aposentado.
     No escuro a paleta se fecha em si mesma: o indicador é a Prata (12.3:1). */
  --accent-on-dark:   #C9CCD0;

  /* Terra Queimada foi aposentada. O nome continua porque componentes o
     referenciam; o valor agora é o bordô, e cada uso dele conta como o gesto da tela. */
  --terra:            #661F2E;

  /* Semantic status (tons sóbrios, não fluorescentes). Não são cor de marca. */
  --warn:             #8A6E4B; /* ocre apagado */
  --error:            #7A2E22; /* tijolo escuro */

  /* Type scale — DS v1.0 (base 16px, rem) */
  --type-display-xl: 4.5rem;
  --type-display-lg: 3.5rem;
  --type-display-md: 2.5rem;
  --type-display-sm: 1.75rem;
  --type-heading-lg: 1.5rem;
  --type-heading-md: 1.25rem;
  --type-heading-sm: 1.125rem;
  --type-body-lg:    1.125rem;
  --type-body:       1rem;
  --type-body-sm:    0.875rem;
  --type-caption:    0.75rem;
  --type-caption-xs: 0.625rem;

  /* Aliases legados (mantidos — preservam nomes) */
  --type-h1:    2.5rem;
  --type-h2:    1.75rem;
  --type-h3:    1.5rem;
  --type-label: 0.75rem;

  /* Leading */
  --leading-tight: 1.05;
  --leading-snug:  1.15;
  --leading-body:  1.55;

  /* Display font — Zilla Slab.
     O DS v1.0 §3.1 especifica Instrument Serif; trocado em 2026-09-17 por decisão
     do produto, para o site ter uma família de display só, a mesma da arte
     editorial do blog. Override deliberado — não reverter num audit de DS.
     DIFERENÇA QUE IMPORTA AO AJUSTAR TAMANHOS: Instrument Serif tinha peso único
     400, era estreita e de alto contraste; Zilla Slab tem pesos reais e é bem
     mais larga e mais escura no mesmo corpo. Onde o título ficar pesado demais,
     baixe o peso antes de baixar o tamanho. */
  --font-display: 'Zilla Slab', Georgia, serif;
  /* O texto corrido. Componente que pode cair em página de outra família (a /readme
     é toda mono) declara esta, em vez de herdar. */
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* O rótulo: mono só em caixa-alta, com tracking (o uso canônico do DS). Toda LP usa
     esta, em vez de reescrever a lista de fallback. */
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tracking */
  --tracking-display: -0.01em;
  --tracking-label:   0.08em;
  --tracking-tight:   -0.01em;
  --tracking-wide:    0.08em;

  /* Spacing (grade 4px) */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  64px;
  --space-2xl: 96px;

  /* A largura do conteúdo e a medianiz, iguais em toda página: o Nav, o rodapé e as seções
     alinham pela mesma borda. O piso de 20px da medianiz é o que garante 280px de coluna
     útil em 320px de tela, sem rolagem horizontal. */
  --content-max: 1160px;
  --gutter:      clamp(20px, 5vw, 56px);

  /* Radius (D-03 — MÁX 4px) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
}

/* ── nav ── */
/* O Nav padrão (nav.jsx, especificação em ../pecas/nav.md): o mesmo desenho em toda
   página da BKDG, em qualquer site. Os dois valores que não são token da marca (a fonte
   mono e a medianiz) ficam declarados aqui.
   A barra pende do topo, sólida, com os cantos de baixo arredondados. O vidro
   líquido é do painel que abre, onde se escolhe a página. */
.navb {
  --navb-mono: var(--font-mono);
  --navb-gutter: var(--gutter);
  --navb-raio: 14px;
  --navb-filtro: blur(24px) saturate(200%);
  --navb-mudanca: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  /* O hover do Bordô (o botão, o bloco do Space): derivado dos tokens, sem cor nova. */
  --navb-acento-hover: color-mix(in srgb, var(--accent) 82%, var(--midnight));
  position: sticky;
  top: 0;
  z-index: 1000;
  /* A fonte e a entrelinha são do Nav, não da página: na /readme, que é toda mono,
     ele herdaria a mono. */
  font-family: var(--font-body);
  line-height: 1.55;
  letter-spacing: normal;
  padding-inline: clamp(8px, 2vw, 16px);
}
.navb__interior {
  --navb-tinta: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-top: 0;
  border-radius: 0 0 var(--navb-raio) var(--navb-raio);
  box-shadow: 0 8px 28px -8px rgb(10 10 10 / 0.18);
}
/* O vidro líquido dos painéis: o véu do fundo da página, o desfoque do que passa
   atrás e a luz — a borda especular (::after, mais forte nas quinas de cima) e o
   reflexo largo que desce do topo (no próprio fundo). O véu não desce de ~72%:
   o painel abre sobre a faixa preta da página, e menos que isso deixa a descrição
   cinza abaixo de 4.5:1. A barra não desfoca, então o desfoque do painel pega a
   página de verdade. */
.navb__painel,
.navb__gaveta-corpo {
  background:
    radial-gradient(120% 90% at 50% -30%, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0) 60%),
    color-mix(in srgb, var(--bg-primary) 72%, transparent);
  -webkit-backdrop-filter: var(--navb-filtro);
  backdrop-filter: var(--navb-filtro);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: var(--navb-raio);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    inset 0 12px 20px -14px rgb(255 255 255 / 0.6),
    0 1px 1px rgb(10 10 10 / 0.06),
    0 16px 40px -8px rgb(10 10 10 / 0.28);
}
.navb__painel::after,
.navb__gaveta-corpo::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.95) 0%,
    rgb(255 255 255 / 0.2) 20%,
    rgb(255 255 255 / 0.05) 50%,
    rgb(255 255 255 / 0.2) 80%,
    rgb(255 255 255 / 0.95) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Sem desfoque no navegador, o vidro vira o fundo sólido: o texto continua legível. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navb__painel,
  .navb__gaveta-corpo { background: var(--bg-primary); }
}
@keyframes navb-gaveta-abre { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes navb-gaveta-fecha { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes navb-gaveta-item { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .navb__gaveta-corpo,
  .navb__gaveta-corpo > * { animation: none !important; }
  .navb__prod,
  .navb__abre::after,
  .navb__gaveta summary::after,
  .navb__gaveta-corpo a { transition: none; }
}
.navb__interior {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 56px;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--navb-gutter);
}
.navb__marca { display: flex; align-items: center; min-height: 44px; color: var(--navb-tinta); flex: none; }
.navb__wordmark { height: 20px; color: inherit; }

.navb__menu { display: flex; flex: 1; align-self: stretch; align-items: center; gap: 2px; }
/* À direita, antes da conversa: o evento e o Blog, longe do Space e do Center. */
.navb__fim { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
/* O Blog: botão de borda, sem fundo, do tamanho do botão da conversa. */
.navb__blog {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--navb-tinta);
  border-radius: var(--radius-md);
  font-size: var(--type-body-sm);
  font-weight: 600;
  color: var(--navb-tinta);
  text-decoration: none;
  transition: background-color var(--navb-mudanca), color var(--navb-mudanca);
}
@media (hover: hover) {
  .navb__blog:hover { background: var(--navb-tinta); color: var(--bg-primary); }
}
.navb__blog[aria-current="page"] { background: var(--navb-tinta); color: var(--bg-primary); }

/* O grupo ocupa a altura toda do Nav: o caminho do botão até o painel tem que
   continuar dentro dele, senão o :hover cai na faixa entre os 44px do botão e
   os 56px da barra. */
.navb__grupo { display: flex; align-items: center; align-self: stretch; }
.navb__abre,
.navb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--type-body-sm);
  color: var(--navb-tinta);
  text-decoration: none;
  cursor: pointer;
}
.navb__abre::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.navb__painel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
}
/* Ponte invisível entre o botão e o painel, para quem desce na diagonal. */
.navb__painel::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 18px;
}
.navb__grupo:hover .navb__painel,
.navb__grupo:focus-within .navb__painel { display: grid; }
/* O realce do item sob o ponteiro é o filete, o mesmo do botão Menu: a paleta
   não tem um segundo tom de fundo, e o Off sobre o Off não aparecia. */
@media (hover: hover) {
  .navb__grupo:hover .navb__abre,
  .navb__link:hover { box-shadow: inset 0 0 0 1px var(--border-secondary); }
}
.navb__grupo:focus-within .navb__abre { box-shadow: inset 0 0 0 1px var(--border-secondary); }
/* A seta vira quando o painel abre. */
.navb__abre::after { transition: transform var(--navb-mudanca), margin var(--navb-mudanca); }
.navb__grupo:hover .navb__abre::after,
.navb__grupo:focus-within .navb__abre::after { margin-top: 3px; transform: rotate(-135deg); }
/* A página em que a pessoa está: em negrito e sublinhada, em Tinta. */
.navb__link[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Foco visível em 2px, o mesmo anel do Center: Bordô sobre o Off (10.4:1). */
.navb :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* O painel do Space e o do Center, iguais: à esquerda, o próprio produto, num bloco
   Bordô que leva à página dele; à direita, o que vem dentro dele, lado a lado: o nome
   (ou o nicho e a marca) e o que entrega, em até duas linhas. Baixo, para ocupar pouco
   da tela. */
.navb__painel {
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 2.38fr);
  gap: var(--space-md);
  padding: var(--space-sm);
}
.navb__bloco {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--praxeti);
  text-decoration: none;
  transition: background-color var(--navb-mudanca);
}
@media (hover: hover) { .navb__bloco:hover { background: var(--navb-acento-hover); } }
.navb__bloco-nome { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.1; }
/* A marca do Center no bloco, em Off, na altura da caixa alta do nome do Space. */
.navb__bloco-marca { height: 1.05rem; margin-block: 0.2rem 0.15rem; color: var(--praxeti); }
.navb__bloco-texto { display: block; margin-top: 6px; font-size: var(--type-body-sm); color: color-mix(in srgb, var(--praxeti) 82%, var(--accent)); }
.navb__bloco-ir { font-size: var(--type-body-sm); font-weight: 600; }
.navb__bloco[aria-current="page"] .navb__bloco-ir { text-decoration: underline; text-underline-offset: 4px; }
.navb__dentro {
  display: grid;
  /* Um item por coluna, quantos o produto tiver. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  align-content: center;
  padding-block: var(--space-xs);
}
.navb__dentro .navb__prod { align-items: flex-start; padding-block: 10px; margin-inline: 0; }
.navb__prod-texto { display: grid; gap: 6px; justify-items: start; }
.navb__prod-nome { font-size: var(--type-body-sm); font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.navb__prod-desc { font-size: var(--type-caption); font-weight: 400; color: var(--text-secondary); line-height: 1.4; text-wrap: balance; }
.navb__prod {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 8px;
  margin-inline: -8px;
  border-radius: var(--radius-md);
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: box-shadow var(--navb-mudanca);
}
@media (hover: hover) {
  .navb__prod:hover { box-shadow: inset 0 0 0 1px var(--border-secondary); }
}
.navb__prod[aria-current="page"] { font-weight: 600; }
.navb__prod[aria-current="page"] .navb__prod-nome { text-decoration: underline; text-underline-offset: 4px; }
/* Produto sem página: o nome em cinza, sem acender. */
.navb__prod--sem-pagina { margin-block: 0; color: var(--text-secondary); cursor: default; }
@media (hover: hover) {
  .navb__prod--sem-pagina:hover { box-shadow: none; }
}
/* A marca do produto: o nome no lettering da BKDG, na altura da caixa alta do
   texto em volta; no painel, um pouco maior. Sempre em Preto. A largura segue
   a proporção de cada nome. */
.navb__wm { display: block; height: 0.72em; width: auto; flex: none; color: var(--text-primary); }
.navb__wm--produto { height: 13px; }
/* O nicho do produto, acima da marca: rótulo em mono, caixa alta. */
.navb__prod-nicho {
  font-family: var(--navb-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.2;
}
.navb__abre[aria-current="page"] { font-weight: 600; }

/* A conversa da página: a única peça que muda de página para página. */
.navb__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  padding-inline: var(--space-sm);
  background: var(--accent);
  color: var(--praxeti);
  border-radius: var(--radius-md);
  font-size: var(--type-body-sm);
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .navb__cta:hover { background: var(--navb-acento-hover); }
}
.navb__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 400px) {
  .navb__interior { gap: var(--space-xs); }
  .navb__wordmark { height: 17px; }
  /* O Menu acompanha o botão: o mesmo corpo, lado a lado. (.navb na frente
     porque a regra do celular, abaixo, vem depois.) */
  .navb__cta,
  .navb .navb__gaveta summary { padding-inline: 12px; font-size: var(--type-caption); }
}

/* No celular: a marca, a conversa e o Menu, que abre os mesmos links. */
.navb__gaveta-nav { display: none; }
@media (max-width: 859px) {
  .navb__menu { display: none; }
  .navb__marca { margin-right: auto; }
  .navb__gaveta-nav { display: block; flex: none; }
  .navb__gaveta summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-sm);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    font-size: var(--type-body-sm);
    color: var(--navb-tinta);
    cursor: pointer;
    list-style: none;
  }
  .navb__gaveta summary::-webkit-details-marker { display: none; }
  /* A mesma seta do Space: vira quando o Menu abre. */
  .navb__gaveta summary { gap: 8px; }
  .navb__gaveta summary::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--navb-mudanca), margin var(--navb-mudanca);
  }
  .navb__gaveta[open] summary { border-color: var(--navb-tinta); }
  .navb__gaveta[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
  /* A gaveta desce do Menu e os links chegam em cascata; ao fechar, sobe e some. Só
     opacidade e transform. */
  .navb__gaveta[open] .navb__gaveta-corpo {
    transform-origin: top center;
    animation: navb-gaveta-abre 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .navb__gaveta[open] .navb__gaveta-corpo > * { animation: navb-gaveta-item 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .navb__gaveta[open] .navb__gaveta-corpo > :nth-child(2) { animation-delay: 30ms; }
  .navb__gaveta[open] .navb__gaveta-corpo > :nth-child(3) { animation-delay: 60ms; }
  .navb__gaveta[open] .navb__gaveta-corpo > :nth-child(4) { animation-delay: 90ms; }
  .navb__gaveta[open] .navb__gaveta-corpo > :nth-child(5) { animation-delay: 120ms; }
  .navb__gaveta[open] .navb__gaveta-corpo > :nth-child(n + 6) { animation-delay: 150ms; }
  .navb__gaveta--fechando[open] .navb__gaveta-corpo { animation: navb-gaveta-fecha 160ms ease-in forwards; }
  .navb__gaveta--fechando[open] summary::after { margin-top: -3px; transform: rotate(45deg); }
  .navb__gaveta-corpo {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    padding: var(--space-sm) var(--navb-gutter) var(--space-md);
  }
  .navb__gaveta-corpo a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-primary);
    text-decoration: none;
  }
  .navb__gaveta-corpo a[aria-current="page"] { font-weight: 600; }
  .navb__gaveta-dentro { display: grid; padding-left: var(--space-sm); }
  .navb__gaveta-sem-pagina {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-secondary);
  }
  .navb__gaveta-corpo a {
    margin-inline: -12px;
    padding-inline: 12px;
    border-radius: var(--radius-md);
    transition: background-color var(--navb-mudanca), color var(--navb-mudanca);
  }
  .navb__gaveta-corpo a:active,
  .navb__gaveta-corpo a:focus-visible { background: var(--accent); color: var(--praxeti); }
}

/* A logo do evento (EVENTO em bkdg.js), em Preto: o PNG oficial é a máscara e a
   cor vem do texto, como as marcas dos produtos. Proporção do arquivo: 640 × 95. */
.navb__evento-marca {
  display: block;
  width: 88px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--navb-evento) center / contain no-repeat;
  mask: var(--navb-evento) center / contain no-repeat;
}
/* Na gaveta, o link do evento é um item como os outros (o .navb__link não vale lá). */
.navb__gaveta-corpo .navb__evento { padding-inline: 12px; }

/* ── rodape ── */
/* O rodapé padrão da BKDG: claro, no fundo da página, com o dobermann sentado
   na linha da base. A estrutura é a do rodapé do Center (styles.css, seção 14). */
.rodb {
  --rodb-mono: var(--font-mono);
  --rodb-gutter: var(--gutter);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding-block: clamp(48px, 7vw, 80px);
  /* A fonte e a entrelinha são do rodapé, não da página: na /readme, que é toda
     mono, ele herdaria a mono. */
  font-family: var(--font-body);
  line-height: 1.55;
  letter-spacing: normal;
}
.rodb__interior { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--rodb-gutter); }
.rodb__topo { display: grid; gap: 64px; }
.rodb__marca { display: block; height: 26px; color: var(--text-primary); }
.rodb__assinatura {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem);
  line-height: 1.2;
  color: var(--text-primary);
}
.rodb__declaracao {
  margin-top: var(--space-sm);
  max-width: 42ch;
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
}
.rodb__colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
}
.rodb__coluna { display: grid; align-content: start; }
.rodb__titulo {
  margin-bottom: var(--space-xs);
  font-family: var(--rodb-mono);
  font-size: var(--type-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}
/* Cada link com 44px de altura: alvo de toque. */
.rodb__coluna a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--type-body-sm);
  color: var(--text-primary);
  text-decoration: none;
}
@media (hover: hover) {
  .rodb__coluna a:hover {
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}
.rodb__coluna a[aria-current="page"] { font-weight: 600; }
/* As aplicações do Space, um degrau à direita, presas a ele por um fio: o grupo lê
   como parte do Space, e não como mais três produtos na lista. */
.rodb__aplicacoes {
  display: grid;
  margin-left: 6px;
  padding-left: var(--space-sm);
  border-left: 1px solid var(--border-secondary);
}
.rodb__aplicacoes a { min-height: 40px; color: var(--text-secondary); }
.rodb__nota {
  margin: 2px 0 var(--space-xs);
  font-size: var(--type-caption);
  color: var(--text-secondary);
}
.rodb__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  position: relative;
  margin-top: 64px;
  font-size: var(--type-caption);
  color: var(--text-secondary);
}
.rodb__base p { max-width: 70ch; }
.rodb__notas { display: grid; gap: var(--space-xs); max-width: 70ch; }
/* O dobermann senta no traço da base, à direita; o topo guarda o lugar dele
   (no celular, embaixo das colunas; no desktop, ao lado delas). */
.rodb__dobermann { position: absolute; right: 0; bottom: 100%; width: 80px; }
.rodb__dobermann img { display: block; width: 100%; height: auto; }
.rodb__topo { padding-bottom: 96px; }
.rodb__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .rodb__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .rodb__colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rodb__topo { padding-bottom: 0; padding-right: 152px; }
  .rodb__dobermann { width: 120px; }
}

/* ── lead ── */
/* O formulário de contato de toda LP (pecas/formulario.md): o desenho do FormLead da
   bkdg.co e do <form> estático da bkdg.space. Sobre o fundo claro da página; o Bordô é
   só o botão de envio. Subiu da bkdg.co quando a bkdg.space precisou dele (2026-10-28). */

.lead-form { margin-top: 24px; display: grid; gap: 16px; }
.lead-campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.lead-rotulo {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.lead-form input:is([type='text'], [type='tel'], [type='email']) {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px; /* abaixo de 16px o iOS dá zoom ao focar */
}
.lead-form input:is([type='text'], [type='tel'], [type='email']):focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 1px;
}
.lead-form input[aria-invalid='true'] { border-color: var(--text-primary); }

.lead-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lead-opcao { position: relative; display: block; cursor: pointer; }
.lead-opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lead-opcao span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  font-size: var(--type-body-sm);
  line-height: 1.25;
  text-align: center;
}
.lead-opcao input:checked + span { border-color: var(--text-primary); background: var(--text-primary); color: var(--bg-primary); }
.lead-opcao input:focus-visible + span { outline: 2px solid var(--text-primary); outline-offset: 2px; }

.lead-aceite {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--type-body-sm);
  line-height: 1.45;
  color: var(--text-secondary);
  cursor: pointer;
}
.lead-aceite input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--text-primary); }

.lead-erro, .lead-falha {
  margin-top: 6px;
  font-size: var(--type-body-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.lead-botao {
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--bg-primary);
  font: inherit;
  font-size: var(--type-body);
  font-weight: 500;
  cursor: pointer;
}
@media (hover: hover) { .lead-botao:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 82%, var(--midnight)); } }
.lead-botao:disabled { opacity: 0.6; cursor: progress; }
.lead-botao:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

.lead-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── página ── */
/* ─────────────────────────────────────────────────────────────────────────
   bkdg.space — a página do BKDG Space.

   Página única, HTML estático. Os tokens, o Nav, o rodapé e o formulário vêm do
   padrão (packages/tokens e packages/components): o build os põe antes desta
   folha, em dist/styles.css. Aqui fica só o que é da página. Nenhum hex cru: cor
   é token, ou derivada de um token por color-mix.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--bg-primary); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  /* O corpo da bkdg.co/space, de onde a página veio: 16px e 1.55. */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; }

/* O atalho do teclado para o conteúdo: fora da tela até receber o foco. */
.pular {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--midnight);
  color: var(--praxeti);
}
.pular:focus { top: 12px; }

/* O título se desdobra palavra a palavra, a partir de uma dobradiça no topo, em
   cascata (o FoldText da bkdg.co, só em CSS). Sem movimento, já está aberto. */
.sp-dobra { display: inline-block; perspective: 700px; white-space: nowrap; }
.sp-dobra > span { display: inline-block; transform-origin: 50% 0%; }
@keyframes sp-desdobra { from { opacity: 0; transform: rotateX(-92deg); } }
@media (prefers-reduced-motion: no-preference) {
  .sp-dobra > span { animation: sp-desdobra 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) calc(0.15s + var(--i) * 0.12s) both; }
}

/* ── A página ─────────────────────────────────────────────────────────────
   Na estética do Center: o Off do começo ao fim, título em Zilla Slab peso 500
   (Zilla é larga e escura: baixa o peso antes do tamanho), rótulo mono em caixa
   alta e a conversa com o botão Bordô. Sem cartão: as frentes são uma placa
   partida em três, os modos têm o desenho do encaixe. Morava na bkdg.co/space até
   o Space ganhar o domínio dele (pedido do João, 2026-10-28). */
.sp {
  --sp-mono: var(--font-mono);
  /* A borda do texto é a mesma da barra: o recuo da barra (8–16px) mais a
     medianiz dela (20–56px). Assim a marca e o título começam na mesma linha. */
  --sp-recuo: clamp(8px, 2vw, 16px);
  --sp-gutter: clamp(20px, 5vw, 56px);
  --sp-secao-y: clamp(56px, 9vw, 96px);
  background: var(--bg-primary);
  color: var(--text-primary);
}
.sp-wrap {
  max-width: calc(1160px + 2 * var(--sp-recuo));
  margin-inline: auto;
  /* + 1px: o filete lateral da barra. */
  padding-inline: calc(var(--sp-recuo) + 1px + var(--sp-gutter));
}

.sp h1,
.sp h2,
.sp h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.sp :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.sp-rotulo {
  font-family: var(--sp-mono);
  font-size: var(--type-caption);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}
/* Bordô sobre Off: 10.4:1. */
.sp-rotulo--acento { color: var(--accent); }

/* Seções: sem filete entre elas; o espaço separa (pedido do João, 2026-10-22). */
.sp-secao {
  padding-block: var(--sp-secao-y);
}
.sp-secao--abertura { padding-block: clamp(56px, 8vw, 104px) var(--sp-secao-y); }
.sp h2 {
  max-width: 22ch;
  font-size: clamp(1.625rem, 1.15rem + 2.4vw, var(--type-display-md));
  line-height: 1.12;
}

/* A abertura é curta e centrada, como a do Center. */
.sp-abertura { text-align: center; }
.sp-abertura h1 {
  max-width: 16ch;
  margin: var(--space-md) auto 0;
  font-size: clamp(2.125rem, 1.4rem + 3.6vw, var(--type-display-lg));
  line-height: var(--leading-tight);
}
.sp-lead {
  max-width: 54ch;
  margin: var(--space-md) auto 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ── As frentes: uma placa partida em três ────────────────────────────────
   Um bloco só, no tom do cartão, cortado em três pelo vão do Off. Ao chegar
   à tela ([data-visto], pelo anima.js), cada parte vem do seu lado e a placa se fecha.
   A frente com página acende em bordô no hover e no foco. Sem borda, sem
   filete. */
.sp-placa {
  list-style: none;
  padding: 0;
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  gap: 6px;
}
@media (min-width: 860px) { .sp-placa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* "Vem muito mais por aí": uma caixa menor, no canto direito, no tom da placa. */
.sp-mais {
  width: fit-content;
  margin: 6px 0 0 auto;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary));
  font-family: var(--font-mono);
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
}
.sp-placa-quadrante { min-width: 0; display: flex; }
.sp-placa-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: clamp(200px, 22vw, 260px);
  padding: clamp(22px, 3vw, 36px);
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary));
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sp-placa-nome {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1;
}
.sp-placa-desc { max-width: 40ch; color: var(--text-secondary); text-wrap: pretty; transition: color 0.3s ease; }
.sp-placa-ir {
  margin-top: auto;
  padding-top: 10px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
@media (hover: hover) {
  .sp-placa-corpo--link:hover { background: var(--accent); color: var(--praxeti); }
  .sp-placa-corpo--link:hover .sp-rotulo,
  .sp-placa-corpo--link:hover .sp-placa-desc { color: color-mix(in srgb, var(--praxeti) 82%, var(--accent)); }
}
.sp-placa-corpo--link:focus-visible { background: var(--accent); color: var(--praxeti); outline-offset: 4px; }
.sp-placa-corpo--link:focus-visible .sp-rotulo,
.sp-placa-corpo--link:focus-visible .sp-placa-desc { color: color-mix(in srgb, var(--praxeti) 82%, var(--accent)); }

@media (prefers-reduced-motion: no-preference) {
  .sp-placa[data-anima] .sp-placa-quadrante {
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--q) * 90ms);
  }
  .sp-placa[data-anima]:not([data-visto]) .sp-placa-quadrante { opacity: 0; }
  .sp-placa[data-anima]:not([data-visto]) .sp-placa-quadrante:nth-child(1) { transform: translate(-28px, 0); }
  .sp-placa[data-anima]:not([data-visto]) .sp-placa-quadrante:nth-child(2) { transform: translate(0, 28px); }
  .sp-placa[data-anima]:not([data-visto]) .sp-placa-quadrante:nth-child(3) { transform: translate(28px, 0); }
}

/* ── Como se ligam: as ligações atravessam a parede ───────────────────────
   O texto à esquerda; à direita, um bloco no tom do cartão. As cinco ligações
   entram nele em cascata vindas da esquerda (o overflow do bloco corta, como
   se atravessassem a parede); o quadrado bordô chega por último. */
.sp-intro { margin-top: var(--space-sm); max-width: 52ch; color: var(--text-secondary); text-wrap: pretty; }
.sp-ligado { display: grid; gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
@media (min-width: 960px) { .sp-ligado { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.sp-ligacoes {
  list-style: none;
  margin: 0;
  display: grid;
  gap: 22px;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary));
  border-radius: var(--radius-md);
}
.sp-ligacoes li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 16px; }
.sp-ligacoes-sinal { width: 12px; height: 12px; margin-top: 0.45em; border-radius: var(--radius-sm); background: var(--accent); }
.sp-ligacoes h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; }
.sp-ligacoes p { grid-column: 2; margin-top: 4px; color: var(--text-secondary); max-width: 54ch; }
@media (prefers-reduced-motion: no-preference) {
  .sp-ligacoes[data-anima] li { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.15s + var(--q) * 140ms); }
  .sp-ligacoes[data-anima] .sp-ligacoes-sinal { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.25s + var(--q) * 140ms); }
  .sp-ligacoes[data-anima]:not([data-visto]) li { opacity: 0; transform: translateX(-48px); }
  .sp-ligacoes[data-anima]:not([data-visto]) .sp-ligacoes-sinal { transform: scale(0.4); }
}

/* ── O ecossistema: o Space como sistema solar, em 3D ─────────────────────
   O céu dá a perspectiva; o plano (.sp-plano) é um quadrado inclinado em X por
   --tilt, e tudo dentro dele guarda o 3D (preserve-3d), para o navegador
   ordenar a profundidade: o planeta do fundo some atrás do sol e o da frente
   passa por cima. Cada .sp-orbita gira até o seu ângulo (--a); .sp-giro dá a
   volta contínua; .sp-desgiro e .sp-desgiro-vivo desfazem as duas rotações; e
   .sp-de-pe desfaz a inclinação, para sol, planeta e nome ficarem de frente.
   Nada com opacity, filter ou overflow nessa cadeia: qualquer um deles
   achataria o 3D. */
@property --tilt { syntax: '<angle>'; inherits: true; initial-value: 64deg; }
.sp-secao--sistema { overflow-x: clip; }
/* Dentro da seção "Sozinho ou dentro do Center", logo depois dos dois modos. */
.sp-sistema--junto { margin-top: clamp(40px, 6vw, 80px); }
.sp-sistema { display: grid; gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 960px) { .sp-sistema { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.sp-centro { list-style: none; padding: 0; margin-top: var(--space-md); display: grid; gap: 12px; }
.sp-centro li { max-width: 46ch; color: var(--text-secondary); text-wrap: pretty; }
.sp-centro strong { color: var(--text-primary); }
.sp-sistema-nota { margin-top: var(--space-md); font-weight: 600; text-wrap: balance; }

.sp-ceu {
  --tilt: 64deg;
  --bola-luz: color-mix(in srgb, var(--praxeti) 55%, var(--midnight));
  position: relative;
  width: min(100%, 580px);
  aspect-ratio: 1 / 0.68;
  margin-inline: auto;
  perspective: 1300px;
  perspective-origin: 50% 30%;
}
.sp-plano {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  translate: 0 -50%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt));
}
.sp-plano *, .sp-orbitas { transform-style: preserve-3d; }

/* A onda que sai do sol pelo plano: o centro está ligado. */
.sp-onda, .sp-sombra {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30%;
  height: 30%;
  border-radius: 50%;
}
.sp-onda { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); scale: 0; }
.sp-sombra { background: radial-gradient(closest-side, color-mix(in srgb, var(--midnight) 22%, transparent), transparent); }

.sp-sol { position: absolute; inset: 0; margin: auto; width: 0; height: 0; }
.sp-de-pe { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotateX(calc(var(--tilt) * -1)); }
.sp-sol-bola {
  --s: clamp(96px, 26vw, 160px);
  position: absolute;
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* A cor por baixo do gradiente: o fundo do "Center" é bordô, e é contra ele que o
     contraste do texto se mede (conferir-pagina.mjs não lê gradiente). */
  background-color: var(--accent);
  background-image: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 55%, var(--praxeti)), var(--accent) 48%, color-mix(in srgb, var(--accent) 55%, var(--midnight)));
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--praxeti);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.85rem + 1.4vw, 1.875rem);
  font-weight: 600;
}

.sp-orbitas { position: absolute; inset: 0; list-style: none; padding: 0; margin: 0; }
.sp-orbita {
  --d: calc(50% + var(--q) * 15%);
  --a: calc(35deg + var(--q) * 97deg);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-primary) 18%, transparent);
  transform: rotate(var(--a));
}
.sp-giro { position: absolute; inset: 0; border-radius: 50%; }
.sp-planeta { position: absolute; top: 0; left: 50%; width: 0; height: 0; }
.sp-desgiro { position: absolute; inset: 0; transform: rotate(calc(var(--a) * -1)); }
.sp-desgiro-vivo { position: absolute; inset: 0; }
.sp-bola {
  position: absolute;
  left: -9px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--bola-luz), var(--midnight) 62%);
}
.sp-planeta-nome {
  position: absolute;
  top: 12px;
  left: 0;
  translate: -50% 0;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sp-planeta-nome--link:hover,
.sp-planeta-nome--link:focus-visible { background: var(--accent); color: var(--praxeti); }
.sp-planeta-nome--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes sp-gira { to { transform: rotate(360deg); } }
@keyframes sp-desgira { to { transform: rotate(-360deg); } }
@keyframes sp-onda { 0% { scale: 1; opacity: 0.9; } 100% { scale: 3.2; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sp-ceu[data-anima] { transition: --tilt 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s; }
  .sp-ceu[data-anima] .sp-sol-bola { transition: scale 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); }
  .sp-ceu[data-anima] .sp-orbita {
    transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(0.2s + var(--q) * 150ms);
  }
  .sp-ceu[data-anima] .sp-desgiro {
    transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(0.2s + var(--q) * 150ms);
  }
  .sp-ceu[data-anima]:not([data-visto]) { --tilt: 28deg; }
  .sp-ceu[data-anima]:not([data-visto]) .sp-sol-bola { scale: 0.3; }
  .sp-ceu[data-anima]:not([data-visto]) .sp-orbita { transform: rotate(calc(var(--a) - 150deg)); scale: 0.4; }
  .sp-ceu[data-anima]:not([data-visto]) .sp-desgiro { transform: rotate(calc(150deg - var(--a))); }

  /* Depois de chegar, o sistema gira: cada órbita no seu ritmo, a de dentro
     mais rápida. O nome contra-gira no mesmo ritmo. Para no hover. */
  .sp-ceu[data-visto] .sp-giro { animation: sp-gira calc(48s + var(--q) * 18s) linear 1.9s infinite; }
  .sp-ceu[data-visto] .sp-desgiro-vivo { animation: sp-desgira calc(48s + var(--q) * 18s) linear 1.9s infinite; }
  .sp-ceu[data-visto] .sp-onda { animation: sp-onda 3.6s ease-out 1.6s infinite; }
  .sp-ceu:hover .sp-giro,
  .sp-ceu:hover .sp-desgiro-vivo,
  .sp-ceu:focus-within .sp-giro,
  .sp-ceu:focus-within .sp-desgiro-vivo { animation-play-state: paused; }
}

/* ── Configuração e sustentação ───────────────────────────────────────────
   Duas metades: a configuração no Off, com os passos que acendem em bordô um
   a um até o "No ar"; a sustentação em Preto, com o sinal de cada núcleo
   pulsando sem parar. */
.sp-ciclo {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  gap: 6px;
}
@media (min-width: 900px) { .sp-ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-ciclo-lado {
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary));
}
.sp-ciclo-lado h3 { margin-top: 8px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; }
.sp-ciclo-texto { margin-top: 12px; max-width: 46ch; color: var(--text-secondary); text-wrap: pretty; }
.sp-ciclo-lado--escuro { background: var(--midnight); color: var(--praxeti); }
.sp-ciclo-lado--escuro .sp-rotulo { color: var(--inox); }
.sp-ciclo-lado--escuro .sp-ciclo-texto { color: var(--prata); }

.sp-passos, .sp-nucleos { list-style: none; padding: 0; margin-top: var(--space-md); display: grid; gap: 10px; }
.sp-passos li, .sp-nucleos li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.sp-passo-sinal {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
}
.sp-passo-fim {
  justify-self: start;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--praxeti);
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.sp-nucleos strong { font-family: var(--font-display); font-weight: 500; }
.sp-nucleos li { font-weight: 400; color: var(--prata); }
.sp-nucleos strong { color: var(--praxeti); }
.sp-nucleo-sinal { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-on-dark); }
.sp-nucleo-sinal::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-on-dark); opacity: 0; }
.sp-ciclo-nota { margin-top: var(--space-md); font-weight: 600; max-width: 40ch; text-wrap: balance; }
.sp-ciclo-ir { margin-top: var(--space-sm); }
.sp-ciclo-ir a { color: var(--praxeti); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .sp-ciclo-ir a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.sp-ciclo-ir a:focus-visible { outline: 2px solid var(--praxeti); outline-offset: 3px; }

@keyframes sp-sinal { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sp-ciclo[data-anima] .sp-passos li { transition: opacity 0.4s ease, color 0.4s ease; transition-delay: calc(0.3s + var(--q) * 380ms); }
  .sp-ciclo[data-anima] .sp-passo-sinal { transition: background-color 0.3s ease, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: calc(0.3s + var(--q) * 380ms); }
  .sp-ciclo[data-anima] .sp-passo-fim { transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: calc(0.3s + var(--q) * 380ms); }
  .sp-ciclo[data-anima]:not([data-visto]) .sp-passos li { color: var(--text-tertiary); }
  .sp-ciclo[data-anima]:not([data-visto]) .sp-passo-sinal { background: color-mix(in srgb, var(--text-primary) 14%, transparent); transform: scale(0.7); }
  .sp-ciclo[data-anima]:not([data-visto]) .sp-passo-fim { opacity: 0; transform: scale(0.8); }
  .sp-ciclo[data-visto] .sp-nucleo-sinal::after { animation: sp-sinal 2.4s ease-out calc(2.4s + var(--q) * 0.8s) infinite; }
}

/* ── O CTA do Space inteiro: a seção em Preto, o botão em bordô ────────────
   Todo CTA do site é bordô. Os nomes entram um a um, somando-se, e o Center
   fecha a conta em bordô. */
.sp-secao--cta { background: var(--midnight); color: var(--praxeti); border-top: 0; }
.sp-secao--cta + .sp-secao { border-top: 0; }
.sp-cta .sp-rotulo { color: var(--inox); }
.sp-cta h2 { margin-top: 8px; }
.sp-soma {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 500;
}
.sp-soma > span { display: inline-flex; align-items: center; gap: 10px; }
.sp-soma-mais { color: var(--inox); }
.sp-soma-nome--center { padding: 2px 14px; border-radius: var(--radius-sm); background: var(--accent); color: var(--praxeti); }
.sp-cta-texto { margin-top: var(--space-md); max-width: 52ch; color: var(--prata); text-wrap: pretty; }
.sp-cta-botao {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: var(--space-lg);
  padding: 0 28px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--praxeti);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
@media (hover: hover) { .sp-cta-botao:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 82%, var(--midnight)); } }
.sp-cta .sp-cta-botao:focus-visible { outline-color: var(--praxeti); }
@media (prefers-reduced-motion: no-preference) {
  .sp-cta[data-anima] .sp-soma > span { transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.2s + var(--q) * 180ms); }
  .sp-cta[data-anima]:not([data-visto]) .sp-soma > span { opacity: 0; transform: translateY(14px); }
}

/* ── Sozinho ou no Center: duas colunas com o desenho do encaixe ───────────
   Sozinho, o módulo bordô aparece por conta própria. No Center, a moldura tem
   três módulos e uma vaga; o bordô desliza da direita e se encaixa nela. */
.sp-modos {
  list-style: none;
  padding: 0;
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  gap: 48px clamp(32px, 5vw, 72px);
}
@media (min-width: 760px) { .sp-modos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-modo h3 { margin-top: 8px; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); line-height: 1.15; }
.sp-modo-texto { margin-top: 12px; max-width: 48ch; color: var(--text-secondary); text-wrap: pretty; }

.sp-desenho {
  --m: 40px;
  position: relative;
  height: 128px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}
.sp-modulo {
  display: block;
  width: var(--m);
  height: var(--m);
  border-radius: var(--radius-sm);
  background: var(--accent);
}
.sp-moldura {
  display: grid;
  grid-template-columns: repeat(2, var(--m));
  gap: 8px;
  padding: 16px;
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary));
  border-radius: var(--radius-md);
}
.sp-moldura i {
  width: var(--m);
  height: var(--m);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-primary) 16%, var(--bg-primary));
}
.sp-moldura .sp-vaga { background: color-mix(in srgb, var(--text-primary) 8%, var(--bg-primary)); }
/* O módulo do Center fica exatamente sobre a vaga (a 4ª célula). */
.sp-desenho--center .sp-modulo {
  position: absolute;
  left: calc(16px + var(--m) + 8px);
  /* A moldura tem 2 × (m + 8) + 2 × 16 − 8 de altura, centrada no desenho. */
  top: calc(50% - (var(--m) + 4px + 16px) + 16px + var(--m) + 8px);
}

@media (prefers-reduced-motion: no-preference) {
  .sp-modos[data-anima] .sp-desenho--sozinho .sp-modulo,
  .sp-modos[data-anima] .sp-desenho--center .sp-modulo {
    transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .sp-modos[data-anima] .sp-desenho--center .sp-modulo { transition-delay: 0.35s; }
  .sp-modos[data-anima]:not([data-visto]) .sp-desenho--sozinho .sp-modulo { opacity: 0; transform: scale(0.6); }
  .sp-modos[data-anima]:not([data-visto]) .sp-desenho--center .sp-modulo { opacity: 0; transform: translateX(160px); }
}

.sp-ir {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.sp-ir--solto { margin-top: var(--space-lg); }
@media (hover: hover) {
  .sp-ir:hover { text-decoration-thickness: 2px; }
}

/* ── A conversa: a frente (opcional) e o formulário ───────────────────── */
.sp-conversa {
  margin-top: clamp(28px, 4vw, 40px);
  display: grid;
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (min-width: 900px) { .sp-conversa { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); } }
.sp-conversa .lead-form { margin-top: 0; }
.sp-escolha-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.sp-escolha-grupo legend { padding: 0; }
.sp-escolha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sp-escolha label { position: relative; display: block; cursor: pointer; }
.sp-escolha input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sp-escolha span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-primary));
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) { .sp-escolha label:hover span { background: color-mix(in srgb, var(--text-primary) 9%, var(--bg-primary)); } }
.sp-escolha input:checked + span { background: var(--accent); color: var(--praxeti); }
.sp-escolha input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A resposta do envio (api/contato.js volta com um 303 para #enviado, #revisar ou
   #nao-enviado): só a do alvo aparece. Enviado, o formulário sai da tela. */
.sp-envio { display: none; margin-top: clamp(28px, 4vw, 40px); max-width: 56ch; font-size: 1.125rem; font-weight: 600; }
.sp-envio:target { display: block; }
.sp-envio--ok { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15; }
.sp-envio--ok::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--accent);
}
.sp-envio--ok:target ~ .sp-conversa { display: none; }

/* ── O fechamento ──────────────────────────────────────────────────────── */
.sp-fim__texto {
  margin-top: var(--space-md);
  max-width: 54ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
  color: var(--text-secondary);
}

#conversa, .sp-envio { scroll-margin-top: 88px; }

/* ── No celular, só o essencial ───────────────────────────────────────────
   Fora o título, o nome e a ação, o texto de apoio sai. Onde há versão curta
   (.sp-curta, só visual), a longa (.sp-longa) continua no DOM, escondida só
   da vista: é ela que o buscador e o leitor de tela leem. */
.sp-curta { display: none; }
@media (max-width: 719px) {
  .sp-longa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sp-curta { display: inline; }
  .sp-placa-desc,
  .sp-ligacoes p,
  .sp-centro,
  .sp-sistema-nota,
  .sp-ciclo-texto,
  .sp-ciclo-nota,
  .sp-modo-texto,
  .sp-cta-texto { display: none; }
}