/* =============================================================================
   TAKA DESIGN — camada de aplicação
   -----------------------------------------------------------------------------
   Carregue DEPOIS de design-system/css/components.css e design-system.css.
   Aqui vive apenas o que o Design System não cobre: reset, container, skip link
   e as correções necessárias para rodar o DS numa página que rola de verdade.
   Nenhum token de cor, tipografia ou motion é redefinido — todos vêm do DS.
   ============================================================================= */

/* --- Correção de integração --------------------------------------------------
   design-system.css declara `html, body { overflow: hidden }` porque a página do
   DS rola dentro de #main-scroll-container. Este site rola no documento, então
   o bloqueio precisa ser desfeito. O sangramento lateral dos decorativos é
   contido pela própria seção (.hero tem overflow: hidden), não pelo body.      */
html,
body { overflow: visible; }

body { overflow-x: clip; }

/* --- Reset enxuto ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, p, figure, ul { margin: 0; }

ul { padding: 0; list-style: none; }

img, svg, canvas { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

body {
  min-height: 100vh;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* selection:bg-indigo-500/30 — mesmo tratamento do <body> do Design System */
::selection { background: rgba(99, 102, 241, .3); }

/* O foco visível já vem de design-system.css:
   :where(a, button, …):focus-visible { outline: 2px solid var(--ds-cyan) } */

/* .btn e .nav-pill do DS foram desenhados para <button>, que não herda
   sublinhado. Usados como <a> (navegação real), precisam do reset. */
.btn,
.nav-pill { text-decoration: none; }

/* --- Skip link -------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  padding: .75rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0 0 var(--ds-r-sm) var(--ds-r-sm);
  background: var(--ds-surface);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transform: translate(-50%, -110%);
  transition: transform .35s var(--ds-ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --- Container -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--app-container-max);
  margin-inline: auto;
  padding-inline: var(--app-gutter);
}

:root {
  --app-container-max: 1700px;
  --app-gutter: 1.5rem;
}

@media (min-width: 640px)  { :root { --app-gutter: 3rem; } }
@media (min-width: 1024px) { :root { --app-gutter: 4rem; } }

/* =============================================================================
   POLÍTICA COMPACTA / TOUCH DOS COMPONENTES DO DESIGN SYSTEM
   -----------------------------------------------------------------------------
   Só entram aqui os componentes GENÉRICOS do DS (.spectrum-rule, .text-spectrum,
   .card, .card-neon, .spotlight, .btn, .badge, .nav-pill). Regra de dobra —
   .services__ghost, .process__node, .about__caption, .whatsapp-fab — mora no CSS
   proprietário da seção: app.css carrega DEPOIS do Design System mas ANTES de
   hero/passage/about/services/process/portfolio/cta-final/footer/whatsapp-fab, e
   uma regra de seção declarada mais tarde venceria qualquer correção posta aqui.

   Nada disto usa `!important` nem especificidade inventada: cada seletor abaixo
   empata com o do DS e vence só pela ordem de carga, exceto onde um `:not()`
   preserva deliberadamente um estado (ver .nav-pill mais abaixo).
   ============================================================================= */

/* --- 1. Congelamento dos loops decorativos (compacto ou toque) --------------
   Amplia o congelamento de .aurora/.blob/.scanline do DS para o perfil leve:
   largura ≤899px, ausência de hover OU ponteiro coarse, incluindo paisagem.
   A motivação é custo de repaint; `prefers-reduced-motion` continua uma
   preferência de acessibilidade independente. As cinco famílias adicionais
   somam 47 elementos no index.html (35 réguas, 7 faixas de .card-neon,
   3 botões neon, 6 marcadores de pill ativa — só um por vez —, 2 textos
   espectrais), todos varrendo `background-position` a cada frame, para sempre,
   em toda dobra ao mesmo tempo.

   COMPENSAÇÃO DO DEGRADÊ — `animation: none` sozinho para o espectro no ponto
   0% de um `background-size: 300% 100%`: o elemento passa a mostrar só o
   primeiro terço do arco-íris (índigo → violeta → rosa) e perde âmbar, esmeralda
   e ciano. Em 35 réguas isso é mudança de identidade, não economia. Levando o
   fundo a `100% 100%` o espectro INTEIRO cabe no elemento, parado — é o mesmo
   arco-íris que o desktop percorre, mostrado de uma vez.

   .btn-neon não usa o arco-íris e sim o degradê de ação (índigo-deep → violeta →
   rosa) a 180% 180%; congelado na posição 0% ele perderia justamente o rosa, e a
   mesma correção o devolve inteiro. */
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .blob,
  .aurora,
  .scanline::before,
  .spectrum-rule,
  .text-spectrum,
  .card-neon::after,
  .nav-pill.is-active::after,
  .btn-neon {
    animation: none;
    background-size: 100% 100%;
  }

  .aurora.aurora { filter: blur(28px) opacity(.62); }
}

/* --- 2. Hover grudado no toque ---------------------------------------------
   No iOS o :hover fica preso no tap até o usuário tocar em outro lugar. Mesma
   condição de capacidade já aprovada e em produção no Portfólio (ver o bloco
   "neutraliza o gesto de hover HERDADO do Design System" em portfolio.css): a
   lista OR cobre também o tablet touch em paisagem, que bate 900px+ de largura
   CSS sem ter hover preciso.

   `:focus-visible` NÃO é tocado em lugar nenhum daqui — o DS o declara em regra
   própria (`:where(a, button, …):focus-visible`), separada do :hover, e nenhum
   seletor abaixo o alcança. `:active` e `.btn.is-pressed`/`press-flash` também
   ficam intactos: são o único retorno tátil que sobra no toque.

   A superfície de repouso de .card só é devolvida para o .card genérico. Sobre,
   Serviços e Portfólio sobem o próprio patamar de superfície e devolvem o deles
   no CSS da dobra — uma cor fixa aqui pintaria o cartão errado. */
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .card:hover {
    transform: none;
    box-shadow: none;
  }

  /* ::before é o holofote de .spotlight (radial que segue --mx/--my, sem
     cursor para seguir aqui) e ::after é a faixa espectral de .card-neon. Os
     dois nascem em opacity: 0 e existem só para o hover. */
  .spotlight:hover::before { opacity: 0; }
  .card-neon:hover::after { opacity: 0; }

  /* O sheen é um facho branco a 45% varrendo o botão em .85s; no toque ele
     dispara junto com o tap e lê como "flick" (medido no .nav-toggle, hero.css).
     Só a animação sai: o ::before continua existindo, parado, como no repouso. */
  .btn:hover::before { animation: none; }

  .badge:hover {
    transform: none;
    box-shadow: none;
  }

  /* O LEVANTAMENTO DOS BOTÕES.
     -----------------------------------------------------------------------
     `.btn-neon:hover` e `.btn-glass:hover` sobem o botão 3px. Preso no
     toque, esse deslocamento lê como defeito: o botão fica pairando depois
     que o dedo saiu.

     SEM `:not(:active)`, e isso é deliberado — uma primeira versão desta
     regra o usava, achando que protegia o afundamento de `.btn:active`. Não
     protege: no Design System `.btn:active` está na linha 355 e
     `.btn-neon:hover`/`.btn-glass:hover` nas 396/412, todos em (0,2,0) — o
     hover já vence o active LÁ, por ordem de declaração. O `:not` só fazia
     a neutralização se desligar justamente enquanto o dedo estava no botão,
     produzindo o inverso do pretendido: subia ao tocar e caía ao soltar.
     O retorno tátil no toque continua existindo e vem de outro lugar: o
     `press-flash` que design-system.js dispara no pointerdown.

     A SOMBRA DO `.btn-neon` FICA DE FORA, e isso não é descuido. Ao
     contrário do `.card` e do `.btn-glass` — cujas regras base não têm
     sombra nenhuma, e por isso zerá-la devolve exatamente o repouso —,
     `.btn-neon` JÁ nasce com sombra (anel interno + dois glows). Zerá-la
     deixaria o botão mais CHAPADO parado do que em repouso, pior que o
     problema; e restaurar o valor exato exigiria duplicar três linhas de
     sombra do DS. O glow aceso preso é um resíduo conhecido e aceito. */
  .btn-neon:hover { transform: none; }

  /* O `.btn-glass` recebe tratamento completo porque o único do documento é
     o `.nav-toggle` — que só existe abaixo de 899px e é o controle mais
     tocado do site. Aqui os quatro valores de repouso são recuperáveis sem
     ambiguidade (a base não tem sombra), então a neutralização devolve o
     estado parado inteiro em vez de meio. */
  .btn-glass:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
  }

  /* ARMADILHA DA CASCATA — `.nav-pill:hover` e `.nav-pill.is-active` têm a MESMA
     especificidade (0,2,0). Uma neutralização declarada depois (e app.css vem
     depois do DS) apagaria a cor e a superfície do item ativo no instante em que
     ele fosse tocado — justamente o estado de localização que precisa
     sobreviver. O `:not(.is-active)` não é especificidade artificial: é a
     condição exata da regra, "neutralize o hover onde ele é só decoração". */
  .nav-pill:hover:not(.is-active) {
    color: rgba(255, 255, 255, .55);
    background: transparent;
  }
}

/* -----------------------------------------------------------------------------
   O RAIO do desfoque das .aurora custa caro no compacto, mesmo parado
   -----------------------------------------------------------------------------
   MEDIDO EM 2026-09-12, emulando 430x932 com dpr 3 (o iPhone do usuário).

   design-system.css já congela a animação de `.aurora` abaixo de 900px, o que
   tirou o repaint por frame. O que ficou foi o custo de RASTERIZAÇÃO: um
   desfoque gaussiano obriga o navegador a rasterizar o elemento MAIS a franja
   do raio (≈3σ de cada lado). Somando as sete `.aurora` em cena, isso dava
   57 Mpx de DISPOSITIVO — de 78,43 Mpx sob `filter: blur()` na página inteira.

   Uma textura borrada é rasterizada uma vez e reaproveitada — ENQUANTO o
   navegador a mantém em memória. Numa GPU de celular os tiles fora de vista
   são descartados, e a volta (scroll up, ou o carrossel do Portfólio voltando
   ao primeiro card) paga o desfoque inteiro de novo. É esse o "parece que o
   site recarrega as animações" relatado no aparelho.

   Reduzir o raio derruba a franja: 100px → 28px leva a `.about__aurora` de
   11,06 para 4,12 Mpx. Total da página: 78,43 → 40,72 Mpx (−48%).

   `opacity()` DENTRO da cadeia do filtro, e não a propriedade `opacity`,
   porque cada dobra define a sua (.site-footer__aurora .3, .about__aurora .1
   no compacto, etc.): o filtro multiplica o que já existe, então uma única
   regra compensa todas. A compensação é necessária porque um raio menor
   CONCENTRA a cor em vez de espalhá-la — o pico cresce ≈1,6× neste tamanho
   (mesma correção já aplicada aos `.blob` da Hero). Verificado por captura
   antes/depois nas sete dobras em 430x932: a maior diferença de pixel é
   9/255, espalhada e invisível a olho nu.

   CLASSE DOBRADA, NÃO `!important`: `.about__aurora`, `.trust__aurora`,
   `.process__aurora` e `.services__aurora` redeclaram `filter` com
   especificidade (0,1,0) em arquivos que carregam DEPOIS deste. `.aurora`
   sozinho empataria e perderia por ordem. `.aurora.aurora` é (0,2,0) e ganha
   sem precisar de `!important` — que este arquivo mantém em zero, verificado
   por teste.

   Desktop com hover e ponteiro fino não é tocado: o gatilho é largura OU
   capacidade de toque, e a atmosfera aprovada continua com os raios originais
   de 80-100px. */