/* ============================================================================
   S3U · Componentes de interação (08/09/2026)
   Três efeitos, sem framework. CSS puro onde dá; onde precisa de JavaScript,
   o contrato está descrito no comentário e o script vem depois (Claude Code).
   Regras da casa: sem gradiente decorativo de fundo, sem bounce, sem escala no
   press, transições de 120 a 200ms, easing padrão. Cantos retos.
   ============================================================================ */

:root {
  --s3u-ease: cubic-bezier(.4, 0, .2, 1);
  --s3u-dur: 200ms;
}

/* ----------------------------------------------------------------------------
   1. BOTÃO PRIMÁRIO (.s3u-btn)
   Usado em: "Verificar gratuitamente" (home, sobre, marcas), "Começar pela
   Ferramenta 1" (crescer, empresa do zero), "Gerar o Pix" (checkout) e
   "Quero ser parceiro" (parceiros). Só CSS.
   - Hover: preenchimento mais escuro do dourado (gold-500 -> gold-600), leve
     elevação de 1px (só em mouse fino) e um brilho suave que atravessa o botão
     uma única vez. O brilho é um ::after que sai de -60% e vai a 130%.
   - Foco por teclado: anel dourado de 2px afastado 3px (não depende de hover).
   - Desabilitado: dourado a 45%, texto a 60%, cursor not-allowed, sem hover.
   - Ativo (press): volta para a linha, sem escala.
   ---------------------------------------------------------------------------- */
.s3u-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--s3u-dur) var(--s3u-ease),
    color var(--s3u-dur) var(--s3u-ease),
    border-color var(--s3u-dur) var(--s3u-ease),
    transform var(--s3u-dur) var(--s3u-ease),
    box-shadow var(--s3u-dur) var(--s3u-ease);
}
.s3u-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 36%;
  background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events: none;
  opacity: 0;
}
/* dourado: o padrão da casa */
.s3u-btn:not(:disabled):not([aria-disabled="true"]):hover { background-color: #B48E1E !important; color: #16294D !important; }
/* navy (botões primários das landings): hover navy-900 -> navy-700 */
.s3u-btn.s3u-btn--navy:not(:disabled):not([aria-disabled="true"]):hover { background-color: #1F3864 !important; border-color: #1F3864 !important; color: #F7F5F0 !important; }
@media (hover: hover) and (pointer: fine) {
  .s3u-btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(22, 41, 77, .55); }
  @media (prefers-reduced-motion: no-preference) {
    .s3u-btn:not(:disabled):hover::after,
    .s3u-btn:not(:disabled):focus-visible::after { animation: s3uBrilho 900ms cubic-bezier(.22, 1, .36, 1) 1; }
  }
}
.s3u-btn:not(:disabled):active { transform: translateY(0); box-shadow: none; }
.s3u-btn:focus-visible { outline: 2px solid #C9A227; outline-offset: 3px; }
.s3u-btn.s3u-btn--navy:focus-visible { outline-color: #C9A227; }
.s3u-btn:disabled,
.s3u-btn[aria-disabled="true"] {
  background-color: rgba(201, 162, 39, .45) !important;
  color: rgba(22, 41, 77, .6) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.s3u-btn:disabled::after, .s3u-btn[aria-disabled="true"]::after { display: none; }
@keyframes s3uBrilho {
  0%   { left: -60%; opacity: 1; }
  100% { left: 130%; opacity: 1; }
}

/* ----------------------------------------------------------------------------
   2. SPOTLIGHT NOS CARTÕES (.s3u-spot)
   Usado em: cartões das ferramentas (crescer, empresa do zero, educação
   financeira) e as cinco portas da home (#layer-cells > *).
   O efeito: um ::before cobre o cartão com um gradiente radial de 260px cuja
   origem é a posição do mouse (variáveis --s3u-mx e --s3u-my, em px, relativas
   ao cartão). Fora do hover a opacidade é 0; no hover sobe para 1 em 200ms.
   Cor da luz: dourado a 14% sobre fundo claro; off-white a 10% sobre navy.
   O gradiente é a luz que segue o mouse, não um fundo decorativo: some quando
   o mouse sai e nunca existe em toque.

   CONTRATO DO JAVASCRIPT (a escrever no Claude Code):
     document.querySelectorAll('.s3u-spot').forEach(function (el) {
       el.addEventListener('pointermove', function (e) {
         if (e.pointerType !== 'mouse') return;          // só mouse
         var r = el.getBoundingClientRect();
         el.style.setProperty('--s3u-mx', (e.clientX - r.left) + 'px');
         el.style.setProperty('--s3u-my', (e.clientY - r.top) + 'px');
       });
     });
   Nada mais: a opacidade e a transição ficam no CSS. Sem requestAnimationFrame
   necessário; se quiser suavizar, interpolar --s3u-mx/--s3u-my em 60ms.
   No celular (pointer: coarse) o ::before não existe: display none.
   ---------------------------------------------------------------------------- */
.s3u-spot {
  position: relative;
  --s3u-mx: 50%;
  --s3u-my: 50%;
  --s3u-spot-cor: rgba(201, 162, 39, .14);
}
.s3u-spot--navy { --s3u-spot-cor: rgba(247, 245, 240, .10); }
.s3u-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--s3u-mx) var(--s3u-my), var(--s3u-spot-cor), transparent 70%);
  opacity: 0;
  transition: opacity var(--s3u-dur) var(--s3u-ease);
}
/* o conteúdo do cartão fica acima da luz */
.s3u-spot > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .s3u-spot:hover::before { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .s3u-spot::before { display: none; }
}
/* ganchos por seletor, para não tocar no HTML de cada cartão */
.grade-cards > a.card { position: relative; --s3u-mx: 50%; --s3u-my: 50%; --s3u-spot-cor: rgba(201, 162, 39, .14); }
.grade-cards > a.card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(260px circle at var(--s3u-mx) var(--s3u-my), var(--s3u-spot-cor), transparent 70%); opacity: 0; transition: opacity var(--s3u-dur) var(--s3u-ease); }
.grade-cards > a.card > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .grade-cards > a.card:hover::before { opacity: 1; } }
@media (hover: none), (pointer: coarse) { .grade-cards > a.card::before { display: none; } }
#layer-cells > * { --s3u-mx: 50%; --s3u-my: 50%; --s3u-spot-cor: rgba(247, 245, 240, .10); }
#layer-cells > *::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(260px circle at var(--s3u-mx) var(--s3u-my), var(--s3u-spot-cor), transparent 70%); opacity: 0; transition: opacity var(--s3u-dur) var(--s3u-ease); }
#layer-cells > * > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { #layer-cells > a:hover::after { opacity: 1; } }
@media (hover: none), (pointer: coarse) { #layer-cells > *::after { display: none; } }

/* ----------------------------------------------------------------------------
   3. NÚMEROS ANIMADOS (.s3u-num e o painel das calculadoras)
   Usado em: o painel navy (.aside) das calculadoras, em todo elemento que
   mostra um valor formatado (data-text terminado em "Fmt": resultadoFmt,
   margemLiqFmt, peFmt...). Também em qualquer elemento com a classe .s3u-num.
   O CSS garante: algarismos tabulares (a largura não pula durante a contagem)
   e um leve realce dourado de 500ms quando a classe .is-contando está ligada.

   CONTRATO DO JAVASCRIPT (a escrever no Claude Code):
   - Observar o textContent do elemento (MutationObserver em characterData /
     childList) ou interceptar no ponto em que o painel escreve o valor.
   - Ao mudar: extrair o número do texto anterior e do novo (remover "R$",
     ".", trocar "," por "."; guardar prefixo/sufixo e o número de decimais).
   - Interpolar de anterior -> novo em 500ms com easing ease-out
     (t => 1 - Math.pow(1 - t, 3)), via requestAnimationFrame, reformatando a
     cada quadro com o mesmo formatador (pt-BR) e o mesmo número de decimais.
   - Ligar .is-contando no início e desligar ao fim (o CSS abaixo faz o realce).
   - Se o texto não for numérico ("–", "Sem dados") ou se
     prefers-reduced-motion for reduce: escrever direto, sem contar.
   - Primeira pintura da página: sem contagem (só anima em mudança).
   ---------------------------------------------------------------------------- */
.s3u-num,
.aside [data-text$="Fmt"] {
  font-variant-numeric: tabular-nums;
  transition: color 500ms var(--s3u-ease);
}
/* 09/09 (Claude Code): !important porque os números do painel trazem a cor inline
   (color: var(--offwhite)) desde a conversão; sem isso o realce nunca aparece. */
.s3u-num.is-contando,
.aside [data-text$="Fmt"].is-contando { color: #C9A227 !important; }
@media (prefers-reduced-motion: reduce) {
  .s3u-btn, .s3u-btn::after, .s3u-spot::before, .grade-cards > a.card::before, #layer-cells > *::after,
  .s3u-num, .aside [data-text$="Fmt"] { transition: none !important; animation: none !important; }
  .s3u-btn:hover { transform: none !important; }
}