/* Peças reutilizadas em todas as páginas */

/* Rótulos pequenos acima dos títulos ("01 · Serviços", "Produto · NZ-P1"): o fundador decidiu tirar do site
   todo — pareciam sujeira. Ficam no HTML (o aria-labelledby de algumas seções aponta para eles), mas não aparecem */
.kicker { display: none; }

/* Título de seção ("Como funciona", "Perguntas comuns"): título de verdade, como os da página do Salão */
.section-title {
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

/* Botões finos em caixa normal; a tecla aparece só onde há teclado */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  font-size: .92rem;
  font-weight: 500;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  padding: .9375rem 1.375rem;
  transition: background .15s, color .15s;
}
@media (hover: hover) { .btn:hover { background: var(--color-text); color: var(--color-bg); } }
.btn-ghost { border-color: var(--color-line-strong); }
/* Botão principal (cheio): a ação que a gente quer que a pessoa faça */
.btn-primary { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
@media (hover: hover) { .btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); } }
/* Botão cheio num tom da marca (o "Pedir orçamento" dos cards de Serviços), não no preto. Por padrão, o violeta;
   quem usa pode trocar o tom (--btn-tone) e a cor do texto em cima dele (--btn-on), sempre com tokens */
.btn-accent {
  --btn-tone: var(--color-accent); --btn-on: var(--color-on-tone);
  background: var(--btn-tone); color: var(--btn-on); border-color: var(--btn-tone);
  box-shadow: 0 12px 30px -14px var(--btn-tone); transition: background .15s, color .15s, box-shadow .25s, translate .25s;
}
@media (hover: hover) { .btn-accent:hover { background: var(--btn-tone); color: var(--btn-on); box-shadow: 0 16px 36px -12px var(--btn-tone); translate: 0 -1px; } }
.key {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: 0;
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 0 .375rem;
  opacity: .8;
}
@media (hover: none) { .key { display: none; } }

/* Painel de "inspecionar item" */
/* Card leve: borda mais clara que a linha comum e cabeçalho sem faixa colorida (só o fio de baixo) */
.item { display: flex; flex-direction: column; background: var(--color-panel); border: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent); border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(6px); }
.item-head { position: relative; padding: 1.125rem 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent); }
.item.exotic { border-color: var(--color-exotic-line); }
.item-head :is(h2, h3) { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; margin-top: .25rem; }
.item-type { font-size: .85rem; color: var(--color-muted); }
.item-body { padding: 1.25rem; flex: 1; }
.item-body > p { color: var(--color-muted); margin-bottom: 1.125rem; }
.item-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: .92rem;
}
@media (hover: hover) { .item-foot:hover { color: var(--color-accent); } }

/* Vantagens: losango + nome */
.perks { list-style: none; display: grid; gap: .625rem; margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.perk { display: flex; align-items: center; gap: .875rem; font-size: .85rem; }
.perk::before {
  content: "";
  width: .625rem;
  height: .625rem;
  border: 1.5px solid var(--color-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: .1875rem;
}
.item.exotic .perk::before { border-color: var(--color-exotic); }

/* Etiquetas de tecnologia: nomes de produto (FastAPI, React), não código, por isso na letra do site */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  font-size: .8rem;
  border: 1px solid var(--color-line);
  padding: .25rem .625rem;
  color: var(--color-muted);
  border-radius: var(--radius-pill);
}

/* Selo de status do projeto */
.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--color-muted);
}
.status::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--color-success); }
.status.lab::before { background: var(--color-accent); }

/* Chat que termina no WhatsApp (chat.js). Sem caixa nem cabeçalho de card: é uma conversa solta no espaço.
   Tela larga: mora no canto inferior direito, sempre aberto. Resto: os botões de orçamento abrem um painel */
.chat { position: fixed; z-index: 50; }
.chat-panel { display: none; }
.chat.is-open .chat-panel { display: block; }
.chat-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem; }
.chat-head > div { flex: 1; }
.chat-title { font-weight: 600; }
.chat-sub { font-size: .8rem; color: var(--color-muted); }
.chat-close { background: none; border: 0; color: var(--color-muted); font-size: 1.4rem; line-height: 1; padding: .25rem .5rem; }
@media (hover: hover) { .chat-close:hover { color: var(--color-text); } }
/* Fala da Nizity: balão com os cantos do token e a ponta (2 px, de propósito) do lado de quem fala */
.chat-msg { padding: .75rem .875rem; font-size: .9rem; background: var(--color-accent-soft); border-radius: var(--radius) var(--radius) var(--radius) 2px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .875rem; }
.chat-quick button {
  background: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  padding: .375rem .75rem;
  font-size: .76rem;
  transition: border-color .15s, color .15s;
}
@media (hover: hover) { .chat-quick button:hover { border-color: var(--color-accent); color: var(--color-accent); } }
/* Campo: só uma linha embaixo */
.chat-form { display: flex; align-items: flex-end; gap: .625rem; border-bottom: 1px solid var(--color-line-strong); }
.chat-form:focus-within { border-bottom-color: var(--color-accent); }
.chat-form textarea { flex: 1; resize: none; background: transparent; border: 0; color: var(--color-text); font: inherit; font-size: .92rem; padding: .625rem 0; }
.chat-form textarea::placeholder { color: var(--color-muted); }
.chat-form textarea:focus-visible { outline: none; }
/* Toque: com letra abaixo de 16 px o Safari do iPhone dá zoom na página ao focar o campo */
@media (pointer: coarse) { .chat-form textarea { font-size: max(16px, 1rem); } }
.chat-send { width: 2.125rem; height: 2.125rem; margin-bottom: .375rem; border: 0; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); font-size: 1rem; flex-shrink: 0; }
.chat-send:disabled { background: var(--color-bar-track); color: var(--color-muted); cursor: default; }
.chat-send:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chat-note { margin-top: .625rem; font-size: .8rem; color: var(--color-muted); }

/* Botão "Conversar": só no computador, no canto de baixo; some com o painel aberto (o celular usa o
   "Orçamento" do topo) */
.chat-launch { display: none; }
/* Fechado, a caixa do chat não pega clique: só o botão */
.chat:not(.is-open) { pointer-events: none; }
.chat:not(.is-open) .chat-launch { pointer-events: auto; }
@media (min-width: 861px) {
  .chat:not(.is-open) .chat-launch {
    display: inline-flex; align-items: center; gap: .625rem; float: right;
    padding: .75rem 1.125rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
    background: var(--color-panel-solid); color: var(--color-text); font-size: .92rem; font-weight: 500;
    box-shadow: 0 16px 40px -18px var(--color-accent-glow); transition: border-color .15s, color .15s, opacity .2s, visibility .2s;
  }
  /* Escondido enquanto cobriria a legenda das etapas (chat.js) */
  .chat.is-tucked:not(.is-open) .chat-launch { opacity: 0; visibility: hidden; pointer-events: none; }
  /* Rodapé: "Voltar ao topo" e "Pausar animações" param antes do botão fixo (1,25rem da borda + ~8rem de botão +
     folga), descontando a margem que o conteúdo já tem nas telas largas */
  .site-footer .footer-inner { padding-right: max(var(--gutter), calc(10.5rem - (100vw - min(100vw, var(--max-width))) / 2)); }
  .chat-launch:hover, .chat-launch:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
  .chat-launch .diamond { width: .5625rem; height: .5625rem; }
}

/* Painel que abre pelo "Conversar" e pelos botões de orçamento */
.chat { right: 1.25rem; bottom: 1.25rem; width: min(22.5rem, calc(100vw - 2.5rem)); }
.chat .chat-panel {
  padding: 1.125rem 1.25rem 1rem;
  background: var(--color-panel-solid);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px var(--color-accent-glow);
}
.chat.is-open .chat-panel { animation: chat-in .25s cubic-bezier(.2, .7, .2, 1); }
@keyframes chat-in { from { opacity: 0; transform: translateY(12px); } }
/* Celular: sobe de baixo, ocupando a largura */
/* Toque: alvos de pelo menos 44 px (fechar, atalhos e enviar) */
@media (max-width: 860px) {
  .chat-close { min-width: 2.75rem; min-height: 2.75rem; margin: -.375rem -.75rem -.375rem 0; }
  .chat-quick button { min-height: 2.75rem; }
  .chat-send { width: 2.75rem; height: 2.75rem; margin-bottom: .125rem; }
}
@media (max-width: 600px) {
  .chat { left: 0; right: 0; bottom: 0; width: auto; }
  .chat .chat-panel { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* Pausar: duas barras; pausado (data-paused): um triângulo. Botão Pausar das miniaturas e o do rodapé */
.pp-pause-ico { position: relative; flex-shrink: 0; width: .625rem; height: .75rem; border-inline: 2.5px solid currentColor; }
[data-paused="true"] > .pp-pause-ico { border: 0; width: 0; height: 0; border-left: .625rem solid currentColor; border-block: .375rem solid transparent; }

/* Rodapé: "Pausar animações" para tudo o que anda em laço no site (orbes, miniaturas, vitrine; WCAG 2.2.2).
   Discreto, com o mesmo tom dos links do rodapé. Nasce hidden: sem JS ou com movimento reduzido nada anda */
.footer-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.motion-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 1.5rem; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; transition: color .15s; }
.motion-toggle:focus-visible { color: var(--color-text); }
@media (hover: hover) { .motion-toggle:hover { color: var(--color-text); } }
.motion-toggle[hidden] { display: none; }