/* NASH hero — nash.work é esta tela. No meio, o N oficial, que carrega como uma
   ampulheta e a cada 30 s vai ao N antigo e volta (logo-loop.js); embaixo, a
   fileira de pílulas com o que a pessoa vem procurar: Portfólio abre o painel
   dele (hero.js), Store abre a loja e Contato abre a conversa (painel.js; sem
   JS é o e-mail pra main@nash.work). Cada pílula veste o botão "Fala que eu te
   escuto" que ficava no topo até 2026-10-14, com a luz na borda (specular-stroke.js).

   Nenhum valor mora aqui: cor, medida, tipo, espaço e tempo vêm de
   heroi-tokens.css, e o que o painel veste vem do sistema (iris.css). */

/* O wrapper do Artifact dá ao body uma fonte de 14px; o kit põe a família no
   html, então o body repete. */
body {
  background: var(--heroi-chao);
  color: var(--heroi-tinta);
  font-family: var(--heroi-fonte);
  font-size: var(--heroi-tipo-base);
  line-height: var(--heroi-linha-base);
}

/* ---------- o herói ----------
   Uma tela, toda ela o palco, com o N no meio, até uma pílula abrir o painel: o
   painel toma uma fileira embaixo do palco e o palco cede o espaço, até o
   mínimo (o N, as pílulas e o respiro no celular); daí o herói cresce e a página
   rola. O canvas da luz de uma pílula passa dela, mais que a margem do celular,
   então as laterais cortam. */
.site-hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(var(--heroi-palco-minimo), 1fr) auto auto;
  min-height: max(var(--heroi-altura-minima), 100svh);
  padding: 0 var(--heroi-margem);
  overflow-x: clip;
  background: var(--heroi-chao);
}

/* ---------- o carregamento ----------
   Enquanto html.site-carregando está ligado (hero-boot.js liga, logo-loop.js
   desliga quando a ampulheta rodou), o N fica sozinho na página: as pílulas, os
   painéis e as dobras de baixo guardam o lugar e não mostram nada. */
html.site-carregando {
  overflow: hidden;
}

html.site-carregando .site-hero-pills,
html.site-carregando .site-hero-reply,
html.site-carregando .site-rodape,
html.site-carregando main > section:not(.site-hero) {
  visibility: hidden;
}

/* ---------- o palco ----------
   O N e as pílulas embaixo, num grupo um pouco acima do meio (o palco guarda
   mais espaço embaixo que em cima). */
.site-hero-stage {
  container-type: size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--heroi-espaco-logo);
  min-height: 0;
  padding-bottom: var(--heroi-palco-rodape);
}

/* O N, chapado, no laço dele. Ele e as pílulas têm nome pra view transition que
   os move quando um painel abre (hero.js). */
.site-hero-stage-logo {
  view-transition-name: site-hero-logo;
  flex: none;
  height: var(--heroi-logo-altura);
  color: var(--heroi-tinta);
  fill: currentColor;
}

/* ---------- as pílulas ----------
   O Specular Button da biblioteca Reaction (specular-stroke.js), no preset
   "pill", no tamanho do alvo de toque. A luz é o sinal; a aberta também o leva
   no rótulo. */
.site-hero-pills {
  view-transition-name: site-hero-pills;
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--heroi-espaco-item);
  max-width: var(--heroi-largura-pilulas);
}

.site-hero-pills[data-modo='chips'] {
  max-width: var(--heroi-largura-chips);
  /* O menu de Plataformas abre por cima do painel, que vem depois no DOM e tem o
     próprio contexto (view-transition-name). */
  position: relative;
  z-index: var(--heroi-camada-chips);
}

/* A pergunta do Contato: diz que os chips respondem a ela. Ocupa a fileira
   inteira e os chips descem pra de baixo. */
.heroi-interesse {
  flex: 1 0 100%;
  margin: 0;
  color: var(--heroi-tinta-suave);
  font-size: var(--heroi-tipo-corpo);
  line-height: var(--heroi-entrelinha-corpo);
  font-weight: var(--heroi-peso-corpo-forte);
  text-align: center;
}

/* Um chip desligado: o Portfólio, até haver o que mostrar nele. */
.site-hero-pill:disabled {
  opacity: var(--heroi-pilula-apagada);
  cursor: not-allowed;
  box-shadow: none;
}

.site-hero-pill:disabled:active {
  transform: none;
}

/* O chip de filtro ligado e o menu com escolha acendem o rótulo no sinal. */
.site-hero-pill[aria-pressed='true'],
.site-hero-pill[data-ativo='true'] {
  color: var(--heroi-sinal);
}

/* O estado ligado não depende só da cor: o rótulo ganha sublinhado. */
.site-hero-pill[aria-pressed='true'] .site-hero-pill-label,
.site-hero-pill[data-ativo='true'] .site-hero-pill-label {
  text-decoration: underline;
  text-decoration-thickness: var(--heroi-sublinhado-espessura);
  text-underline-offset: var(--heroi-sublinhado-distancia);
}

/* No toque, os botões do sistema no herói têm o alvo de toque. */
@media (pointer: coarse) {
  .site-hero .reaction-btn {
    min-height: var(--heroi-alvo);
  }
}

.site-hero-pill {
  --site-specular-line: var(--heroi-sinal);
  --site-specular-base: var(--heroi-pilula-luz);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--heroi-pilula-padding);
  border: 0;
  min-height: var(--heroi-alvo);
  border-radius: var(--heroi-pilula-raio);
  font: inherit;
  font-size: var(--heroi-pilula-tipo);
  font-weight: var(--heroi-pilula-peso);
  line-height: 1;
  letter-spacing: var(--heroi-pilula-letra);
  text-decoration: none;
  color: var(--heroi-pilula-texto);
  background: color-mix(in srgb, var(--heroi-pilula-fundo) calc(var(--heroi-pilula-fundo-opacidade) * 100%), transparent);
  box-shadow: var(--heroi-pilula-sombra);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--heroi-duracao-micro) var(--heroi-curva-saida),
    transform var(--heroi-duracao-pressao) var(--heroi-curva-pressao);
}

.site-hero-pill[aria-expanded='true'] {
  color: var(--heroi-sinal);
}

/* Voltar é ação, as outras pílulas são escolha: a ação vai sem fundo, sem sombra
   e sem a luz na borda (roleta.js), na cor do texto da página. */
.site-hero-pill[data-emphasis='ghost'] {
  color: var(--heroi-tinta);
  background: transparent;
  box-shadow: none;
}

.site-hero-pill[data-emphasis='ghost']:hover {
  background: var(--heroi-fantasma-hover);
}

.site-hero-pill:active {
  transform: scale(var(--heroi-pilula-aperto));
}

.site-hero-pill:focus-visible {
  outline: var(--heroi-foco-anel) solid var(--heroi-foco-cor);
  outline-offset: var(--heroi-foco-distancia);
}

.site-hero-pill-label {
  position: relative;
  z-index: 2;
}

.site-specular-stroke-light {
  position: absolute;
  inset: calc(-1 * var(--heroi-pilula-luz-extensao));
  z-index: 1;
  display: block;
  width: calc(100% + 2 * var(--heroi-pilula-luz-extensao));
  max-width: none;
  height: calc(100% + 2 * var(--heroi-pilula-luz-extensao));
  pointer-events: none;
}

/* ---------- os painéis (hero.js) ----------
   O que o Portfólio, a Store e o Contato abrem sob as pílulas. Com um painel
   aberto, o grupo fica no pé do palco, logo sobre ele. Sem JS (sem html.js) o
   painel simplesmente está lá. */
.site-hero-reply {
  view-transition-name: site-hero-reply;
  justify-self: center;
  width: 100%;
  max-width: var(--heroi-largura-painel);
  padding-bottom: var(--heroi-espaco-fim);
}

html.js .site-hero-panel:not(.is-open),
html.js .site-hero-reply:not(:has(.is-open)) {
  display: none;
}

.site-hero:has(.site-hero-panel.is-open) .site-hero-stage {
  justify-content: flex-end;
  padding-bottom: var(--heroi-espaco-logo-painel);
}

/* No celular os chips do Contato quebram em três linhas, e o N, o respiro e os
   chips passavam do mínimo do palco: o N saía cortado por cima. Com um painel
   aberto, o N e o respiro encolhem. O corte de 640 é o do kit (CSS não lê token
   em media query). */
@media (max-width: 640px) {
  .site-hero:has(.site-hero-panel.is-open) .site-hero-stage {
    gap: var(--heroi-espaco-logo-painel);
  }

  .site-hero:has(.site-hero-panel.is-open) .site-hero-stage-logo {
    height: var(--heroi-logo-altura-painel);
  }
}

.site-hero-panel {
  display: grid;
  gap: var(--heroi-espaco-grupo);
}

.site-work-card {
  color: inherit;
  text-decoration: none;
}

.site-work-more {
  justify-self: start;
}

/* ---------- a marca e a roleta de projetos (projetos.js) ----------
   O N e, ao lado direito dele, a roleta: a conta dos projetos e, embaixo, a janela
   de três linhas por onde a lista rola pra cima. No celular a roleta desce pra
   baixo do N. Com um painel aberto, ou os chips do Contato e os cartões da Store
   no lugar das pílulas, ela sai da frente e o N fica sozinho.
   sem-componente: o kit não tem lista que roda; entra como peça nova só com o
   "pode subir". */
.site-hero-marca {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--heroi-espaco-marca);
}

.site-projetos {
  display: grid;
  justify-items: start;
  gap: var(--heroi-espaco-grupo);
  width: var(--heroi-projetos-largura);
  max-width: 100%;
}

.site-projetos[hidden],
.site-hero:has(.site-hero-panel.is-open) .site-projetos,
.site-hero:has(.site-hero-pills:is([data-modo='chips'], [data-modo='cards'])) .site-projetos {
  display: none;
}

.site-projetos-conta {
  margin: 0;
  color: var(--heroi-tinta-suave);
  font-size: var(--heroi-tipo-corpo);
  line-height: var(--heroi-entrelinha-corpo);
  font-weight: var(--heroi-peso-corpo-forte);
}

.site-projetos-numero {
  color: var(--heroi-tinta);
  font-variant-numeric: tabular-nums;
}

.site-projetos-janela {
  overflow: hidden;
  width: 100%;
  height: calc(var(--heroi-projetos-linhas) * var(--heroi-projetos-linha));
  mask-image: var(--heroi-projetos-mascara);
  -webkit-mask-image: var(--heroi-projetos-mascara);
}

/* O padding de uma linha põe o primeiro projeto no meio da janela. */
.site-projetos-faixa {
  margin: 0;
  padding: var(--heroi-projetos-linha) 0 0;
  list-style: none;
  will-change: transform;
}

.site-projetos-item {
  display: flex;
  align-items: baseline;
  gap: var(--heroi-espaco-item);
  height: var(--heroi-projetos-linha);
  line-height: var(--heroi-projetos-linha);
  white-space: nowrap;
}

.site-projetos-nome {
  color: var(--heroi-tinta);
  font-size: var(--heroi-projetos-tipo);
  font-weight: var(--heroi-projetos-peso);
}

.site-projetos-tipo {
  color: var(--heroi-tinta-suave);
  font-size: var(--heroi-tipo-meta);
}

/* No celular não há largura pro lado: a roleta desce pra baixo do N, centrada. O
   corte de 640 é o do kit (CSS não lê token em media query). */
@media (max-width: 640px) {
  .site-hero-marca {
    flex-direction: column;
    gap: var(--heroi-espaco-grupo);
  }

  .site-projetos {
    justify-items: center;
    text-align: center;
  }

  .site-projetos-item {
    justify-content: center;
  }
}

/* ---------- o campo ----------
   Uma peça só (campo.js): a busca da Store e o Outra coisa são o mesmo campo do
   Iris, com o fio que escurece no foco. O que muda é o que entra dentro: a lupa
   e a tecla "/", ou o botão de anexar. */
.heroi-campo {
  display: flex;
  align-items: center;
  gap: var(--heroi-espaco-item);
  flex: none;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--heroi-campo-altura);
  padding: 0 var(--heroi-espaco-grupo);
  border: var(--heroi-fio-largura) solid var(--heroi-campo-borda);
  border-radius: var(--heroi-raio-campo);
  background: var(--heroi-campo-fundo);
  color: var(--heroi-dica);
  cursor: text;
  transition: border-color var(--heroi-duracao-sistema) var(--heroi-curva-sistema);
}

.heroi-campo:focus-within {
  border-color: var(--heroi-campo-foco);
}

.heroi-campo[data-estado='ocupado'] {
  cursor: progress;
}

.heroi-campo .nash-icon {
  flex: none;
  width: var(--heroi-campo-icone);
  height: var(--heroi-campo-icone);
}

/* O campo de várias linhas: o botão de anexar fica na primeira linha, não no meio. */
.heroi-campo[data-tipo='texto'] {
  align-items: flex-start;
  padding-block: var(--heroi-espaco-interno);
}

.heroi-campo-entrada {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--heroi-espaco-item) 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--heroi-texto);
  font: inherit;
  font-size: var(--heroi-tipo-corpo);
  line-height: var(--heroi-entrelinha-corpo);
  resize: none;
}

.heroi-campo-entrada::placeholder {
  color: var(--heroi-dica);
}

.heroi-campo-entrada[rows] {
  max-height: var(--heroi-campo-altura-max);
  overflow-y: auto;
}

/* ---------- o painel da conversa (painel.js) ----------
   Abaixo das pílulas o herói veste o Iris, o sistema do Studio Pro (iris.css):
   os blocos são o Frame dele; o campo, a lista e o menu, as peças dele. */

/* O Contato e o Outra coisa: o campo, a linha de estado, o envio. */
/* ---------- o rodapé ----------
   Uma linha miúda embaixo do herói: onde a NASH fica e os três canais. Cada
   link guarda o alvo de toque do sistema. */
.site-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--heroi-espaco-grupo);
  padding-bottom: var(--heroi-espaco-item);
  color: var(--heroi-tinta-suave);
  font-size: var(--heroi-tipo-meta);
  line-height: var(--heroi-entrelinha-meta);
}

.site-rodape a {
  display: inline-flex;
  align-items: center;
  min-height: var(--heroi-alvo);
  color: inherit;
  text-decoration: none;
}

.site-rodape a:hover {
  color: var(--heroi-tinta);
  text-decoration: underline;
  text-underline-offset: var(--heroi-sublinhado-distancia);
}

/* ---------- a dobra de texto ----------
   Abaixo do herói: quatro blocos de texto corrido, numa coluna estreita, para
   quem lê e para o Google ler. Lê só os tokens do herói. */
.site-sobre {
  padding: var(--heroi-espaco-logo) var(--heroi-margem);
  background: var(--heroi-chao);
}

.site-sobre-miolo {
  display: grid;
  gap: var(--heroi-espaco-grupo);
  max-width: var(--heroi-largura-texto);
  margin: 0 auto;
}

.site-sobre h2 {
  margin: var(--heroi-espaco-secao) 0 0;
  color: var(--heroi-tinta);
  font-size: var(--heroi-tipo-sobre-titulo);
  font-weight: var(--heroi-peso-corpo-forte);
  line-height: var(--heroi-entrelinha-sobre-titulo);
}

.site-sobre h2:first-child {
  margin-top: 0;
}

.site-sobre p {
  margin: 0;
  color: var(--heroi-tinta-suave);
  font-size: var(--heroi-tipo-base);
  line-height: var(--heroi-linha-base);
}

.site-sobre a {
  color: var(--heroi-tinta);
  text-decoration: underline;
  text-underline-offset: var(--heroi-sublinhado-distancia);
}

.site-hero-campo {
  display: grid;
  gap: var(--heroi-espaco-item);
}

.site-hero-campo[hidden] {
  display: none;
}

.site-hero-seguir {
  justify-self: end;
}

/* O Frame do Iris (.reaction-frame) com o conteúdo do painel. O miolo afundado é
   um bloco com padding de seção; os blocos diferentes dentro dele, num gap de
   grupo. Com várias famílias (as perguntas e o envio), o gap sobe um degrau. */
.site-hero-moldura {
  display: block;
  color: var(--heroi-texto);
  text-decoration: none;
}

.site-hero-moldura-miolo {
  display: grid;
  gap: var(--heroi-espaco-grupo);
  padding: var(--heroi-miolo-padding);
}

.site-hero-moldura-miolo[data-familias] {
  gap: var(--heroi-espaco-secao);
}

.site-hero-moldura-texto {
  margin: 0;
  color: var(--heroi-corpo);
  font-size: var(--heroi-tipo-corpo);
  line-height: var(--heroi-entrelinha-corpo);
  font-weight: var(--heroi-peso-corpo);
}

.site-hero-ficha {
  display: grid;
  gap: var(--heroi-espaco-interno);
  margin: 0;
}

.site-hero-ficha div {
  display: grid;
  grid-template-columns: var(--heroi-ficha-coluna) 1fr;
  gap: var(--heroi-espaco-item);
  font-size: var(--heroi-tipo-meta);
  line-height: var(--heroi-entrelinha-meta);
  font-weight: var(--heroi-peso-meta);
}

.site-hero-ficha dt {
  color: var(--heroi-dica);
}

.site-hero-ficha dd {
  margin: 0;
  color: var(--heroi-texto);
  font-variant-numeric: tabular-nums;
}

.site-hero-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--heroi-espaco-item);
  margin: 0;
  color: var(--heroi-corpo);
  font-size: var(--heroi-tipo-corpo);
  line-height: var(--heroi-entrelinha-corpo);
  text-align: center;
}

.site-hero-estado:empty {
  display: none;
}

.site-hero-resposta {
  display: grid;
  gap: var(--heroi-espaco-grupo);
}

.site-hero-resposta[hidden] {
  display: none;
}

/* Recebe o foco quando o campo some (painel.js); é região, não controle. */
.site-hero-resposta:focus {
  outline: none;
}

/* As perguntas: cada uma é um rótulo e a fileira de escolhas, no mesmo degrau;
   as perguntas entre si, um degrau acima. */
.site-hero-perguntas {
  display: grid;
  gap: var(--heroi-espaco-grupo);
}

.site-hero-pergunta {
  display: grid;
  gap: var(--heroi-espaco-item);
}

.site-hero-pergunta-rotulo {
  margin: 0;
  color: var(--heroi-texto);
  font-size: var(--heroi-tipo-corpo);
  line-height: var(--heroi-entrelinha-corpo);
  font-weight: var(--heroi-peso-corpo-forte);
}

.site-hero-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--heroi-espaco-item);
}

/* A escolha do Iris (fundo branco, sem fio) é feita pra um trilho cinza; sobre o
   Frame branco ela parecia menos marcada que as outras. Aqui a escolhida se
   inverte: fundo no acento do sistema e texto na cor do chão dele. */
.site-hero-opcoes .reaction-btn[aria-pressed='true'] {
  --reaction-btn-bg: var(--heroi-escolha-fundo);
  --reaction-btn-border: var(--heroi-escolha-fundo);
  --reaction-btn-fg: var(--heroi-escolha-texto);
}

/* ---------- o menu de Plataformas ----------
   O chip e, embaixo dele, a folha de menu do Iris (.reaction-menu-list) com um
   item de marcar por plataforma.
   sem-componente: o Iris não tem item com caixa de marcar na folha; entra como
   peça nova só com o "pode subir". */
.site-hero-menu {
  position: relative;
  display: inline-flex;
}

/* A folha do Iris ocupa a largura do chip; aqui ela cresce até o texto. */
.site-hero-menu-lista {
  right: auto;
  min-width: var(--heroi-menu-largura);
}

.site-hero-menu-lista .reaction-menu-marca {
  display: flex;
  align-items: center;
  gap: var(--heroi-espaco-item);
}

/* ---------- a Lista de produtos da Store ----------
   O quadro de uma linha por peça do Iris (a vista Lista da galeria do Studio),
   sob o campo. */
.site-store-lista {
  overflow: hidden;
  border: var(--heroi-fio-largura) solid var(--heroi-fio);
  border-radius: var(--heroi-raio-lista);
}

.site-store-lista .reaction-linha {
  grid-template-columns: var(--heroi-lista-colunas);
  border-top: 0;
}

.site-store-lista .reaction-linha[hidden] {
  display: none;
}

/* Escondida a primeira, a de cima do quadro ainda não leva fio. */
.site-store-lista .reaction-linha:not([hidden]) ~ .reaction-linha:not([hidden]) {
  border-top: var(--heroi-fio-largura) solid var(--heroi-fio);
}

.site-store-lista .reaction-linha-icone img {
  width: var(--heroi-icone-produto);
  height: var(--heroi-icone-produto);
  object-fit: contain;
}

/* Sem nenhuma linha à vista, o quadro some e fica só o aviso. */
.site-store-lista:not(:has(.reaction-linha:not([hidden]))) {
  display: none;
}

@media (max-width: 640px) {
  .site-store-lista .reaction-linha {
    grid-template-columns: var(--heroi-lista-colunas-estreita);
  }

  .site-store-lista .reaction-linha-cat {
    grid-column: 2;
  }
}