/* Base compartilhada das páginas do canal (index, privacidade, termos).
 *
 * Fonte única dos tokens: duplicar a paleta por página é garantir que uma delas fique diferente
 * depois de qualquer ajuste. Valores do Fenox Design System (design-tokens.json v1.0.0), com as
 * correções de contraste que o app já aplica — cada divergência está comentada na linha.
 */

/* Plus Jakarta Sans (ADR-007), servida pelo próprio host: sem CDN, funciona em rede corporativa
   que bloqueia terceiros. Arquivo único e variável cobre 400/600/700. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono (ADR-007: a fonte de dado técnico do DS), também servida daqui.
 *
 * Ela não é enfeite: nesta página, tudo que é REGISTRO — horário, versão, build, tamanho, hash,
 * nome do arquivo — é escrito nela, e tudo que é fala humana continua na Jakarta. A distinção de
 * voz é o que faz a página parecer o comprovante que o produto emite, em vez de mais uma landing.
 *
 * Subconjunto de 117 glifos (dígito, letra, pontuação e os acentos do português): a família inteira
 * custaria 90 KB por peso, e nada aqui escreve texto corrido em mono. Assim são 8,5 KB por peso.
 * Licença SIL OFL 1.1 — o aviso vai junto, em `JetBrainsMono-OFL.txt`. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --brand-navy: #014375;   /* MARCA: wordmark FENOX. Não é o azul de interação. */
  --brand-red: #e2021b;    /* MARCA: assinatura TECNOLOGIA. NUNCA como cor de erro. */

  --ink: #0a0e1a;
  --ink-mid: #2c3451;
  --ink-soft: #6b7499;   /* SÓ hint/legenda: como texto de corpo dá 4,01:1 e reprova o AA */

  --accent: #185fa5;
  --accent-on-navy: #7fb4e0;

  --bg: #edf0f4;
  --surface: #f3f4f8;
  --white: #ffffff;

  --navy: #014375;
  --navy-deep: #012238;
  --on-navy: #ffffff;
  --on-navy-muted: rgba(255, 255, 255, 0.75);
  --navy-line: rgba(255, 255, 255, 0.14);

  --border: rgba(10, 14, 26, 0.09);
  --border-mid: rgba(10, 14, 26, 0.15);

  --success: #117a45;      /* escurecido p/ texto: o #16a34a dá 3,3:1 sobre branco */
  --warning: #8a5a0b;      /* idem: o #ca8a04 dá 2,9:1 */
  --danger: #dc2626;

  /* ADR-008: raio máximo 4px. Sem pill, sem circular. */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;

  --shadow-card: 0 2px 8px rgba(10, 14, 26, 0.05), 0 16px 48px rgba(10, 14, 26, 0.07);
  --max: 1180px;
  --pad: 16px;             /* padding lateral, igual em todas as páginas */

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Cor da malha de fundo e das marcações da régua. Fraca de propósito: é estrutura, não conteúdo
     — se competir com o texto, virou enfeite. */
  --marcacao: rgba(1, 67, 117, 0.16);
  --marcacao-forte: rgba(1, 67, 117, 0.26);
  --brilho: rgba(24, 95, 165, 0.10);
  --surface-trilho: rgba(10, 14, 26, 0.07);
  --brilho-cursor: rgba(24, 95, 165, 0.16);

  /* Aurora: a luz de ambiente da página (ver `body::after`). Antes eram três radiais discretos, e
     de tão discretos não chegavam à tela — o hero lia como branco chapado. Agora são QUATRO
     manchas de cor que se atravessam.

     Elas não estão soltas no espaço: a mais forte (`--au-produto`) fica atrás do aparelho, porque
     a fonte de luz desta página é o produto; as outras caem nas bordas e vão se apagando ao
     descer, de modo que a coluna de TEXTO — esquerda, meia altura — é justamente a região onde
     nenhuma mancha tem o pico. Fundo colorido que passa por baixo de parágrafo é fundo que come
     contraste, e este não passa.

     A paleta é a da marca e só ela: navy institucional, o azul de interação, o azul claro do DS e
     o `info` como frio. Aurora com magenta/violeta é o que qualquer produto teria. */
  --bg-fundo: #c6d4e4;
  /* 0.34, e não mais: esta é a mancha que cai sobre a etiqueta do hero, o texto mais frágil da
     página (accent de 11px). Em 0.40 ela ficava em 4,60:1 — passa, e passa raspando. */
  --au-alta:    rgba(1, 67, 117, 0.34);    /* navy, entrando pelo alto à esquerda */
  --au-produto: rgba(24, 95, 165, 0.42);   /* o azul de interação, atrás do aparelho */
  --au-fria:    rgba(14, 165, 233, 0.30);  /* o único frio da paleta, na borda direita */
  --au-clara:   rgba(127, 176, 230, 0.42); /* o azul claro do DS: o brilho que cruza o meio */
  --au-baixa:   rgba(1, 67, 117, 0.32);    /* navy de novo, fechando embaixo à esquerda */
  /* Véu: o que as seções claras põem POR CIMA da ambiência, em vez de tapá-la com cor sólida.
     Era 50% e virou 30%: com a aurora atrás, meio a meio lavava a cor e devolvia o branco chapado
     que motivou toda esta mudança. 30% é PISO medido, não gosto: em 24% a etiqueta do hero (accent
     de 11px) media 4,46:1 nos pixels e reprovava o AA por um fio. Quem mede isso é o
     contraste-real.py, amostrando a tela — o auditar-layout.py resolve o fundo pela árvore do DOM
     e não enxerga nem esta aurora (que vive num `body::after`) nem os véus translúcidos. */
  --veu-alto: rgba(255, 255, 255, 0.30);
  --veu-baixo: rgba(255, 255, 255, 0);
}

/* O tema vem de `data-theme` na raiz, estampado pelo assets/tema.js antes da primeira pintura —
 * e não de `prefers-color-scheme` direto. Assim a escolha da pessoa (localStorage) pode sobrepor o
 * SO nas DUAS direções: quem usa Windows no escuro consegue ver a página no claro, e vice-versa.
 * Um `@media` sozinho não permitiria isso, e duplicar os tokens nos dois seletores garantiria que
 * um dia eles divergissem. */
:root[data-theme="dark"] {
  --ink: #f0f2fa;
  --ink-mid: #c8cde0;
  --ink-soft: #8b93b0;
  /* Como TEXTO sobre superfície escura o #185fa5 dá 2,9:1 e reprova o AA. Mesmo valor do app. */
  --accent: #7fb0e6;
  --bg: #0a0f15;
  --surface: #0d1117;
  --white: #1a1f2e;
  --navy: #0d2438;
  --navy-deep: #071522;
  --border: rgba(240, 242, 250, 0.08);
  --border-mid: rgba(240, 242, 250, 0.14);
  --success: #16a34a;
  --warning: #ca8a04;
  --danger: #f08e84;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.30), 0 16px 48px rgba(0, 0, 0, 0.35);
  --marcacao: rgba(127, 176, 230, 0.16);
  --marcacao-forte: rgba(127, 176, 230, 0.30);
  --brilho: rgba(127, 176, 230, 0.10);
  --surface-trilho: rgba(240, 242, 250, 0.10);
  --brilho-cursor: rgba(127, 176, 230, 0.20);
  /* No escuro a aurora pode (e precisa) ser bem mais forte: sobre #0a0f15 ela é a única coisa que
     impede a página de virar um retângulo preto uniforme. O navy institucional aguenta ir quase
     ao opaco aqui — sobre preto ele ainda lê como azul-noite, não como mancha. */
  --bg-fundo: #04070c;
  --au-alta:    rgba(1, 67, 117, 0.72);
  --au-produto: rgba(24, 95, 165, 0.42);
  --au-fria:    rgba(14, 165, 233, 0.22);
  /* No escuro o brilho entra em conta-gotas: o mesmo 0.42 do claro viraria neblina sobre #0a0f15
     e comeria o preto que faz o aparelho se destacar. */
  --au-clara:   rgba(127, 176, 230, 0.13);
  --au-baixa:   rgba(1, 67, 117, 0.46);
  --veu-alto: rgba(26, 31, 46, 0.38);
  --veu-baixo: rgba(10, 15, 21, 0);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-md); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { width: min(var(--max), calc(100% - var(--pad) * 2)); margin-inline: auto; }

/* ---------- textura de fundo ----------
 * Primeira tentativa aqui foi uma régua de traços verticais. Lida em escala real, ficou datada —
 * listra vertical é vocabulário de site dos anos 2010. O que se usa hoje (e o que os kits modernos
 * fazem: `TextureOverlay` do Cult UI, `KineticGrid` do Originkit) é MALHA DE PONTOS + GRÃO, com o
 * brilho revelando a malha em volta do cursor. É mais discreto, tem profundidade e não vira padrão
 * de papel de parede.
 *
 * Tudo em CSS: a malha é um radial-gradient repetido, o grão é um SVG inline de ~300 bytes. Nada
 * de WebGL — esta página é aberta no 4G de quem vai baixar 95 MB. */
.marcado { position: relative; isolation: isolate; }
.marcado::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--marcacao) 1px, transparent 0);
  background-size: 26px 26px;
  /* A malha nasce fraca e só aparece de verdade em volta do cursor (`--bx`/`--by`, escritos pelo
     JS). Sem ponteiro — celular — fica o esmaecido de cima, que é o estado padrão. */
  -webkit-mask-image:
    radial-gradient(340px circle at var(--bx, 50%) var(--by, 0%), #000 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, #000 0%, transparent 72%);
          mask-image:
    radial-gradient(340px circle at var(--bx, 50%) var(--by, 0%), #000 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, #000 0%, transparent 72%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Sobre navy o ponto precisa ser claro: o token de marcação é azul-escuro e sumiria. */
.marcado-navy::before { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0); }

/* O brilho que segue o ponteiro. É o mesmo efeito do `KineticGrid`, sem canvas: um radial-gradient
   posicionado por variável CSS. Fica ATRÁS do conteúdo e não intercepta clique. */
.marcado::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--bx, 50%) var(--by, 0%), var(--brilho), transparent 68%);
  opacity: 0; transition: opacity .45s ease;
}
.marcado.apontado::after { opacity: 1; }

/* ---------- aurora: a luz de ambiente da página ----------
 * Antes daqui o fundo era uma cor chapada, e só aparecia numa seção — todas as outras se pintam
 * por cima com cor sólida. Uma página inteira de retângulos opacos empilhados não tem para onde
 * respirar: cada seção começa e termina num degrau, e o conjunto lê como slide, não como página.
 *
 * A luz vem de CIMA e do centro, que é onde está o aparelho. Isso não é escolha estética solta: o
 * hero é a única coisa desta página que emite alguma coisa, então é dele que a luz sai, e ela vai
 * se apagando conforme desce — no rodapé o fundo já é `--bg-fundo`, mais fundo que no topo. É o
 * mesmo raciocínio do grão: o olho não identifica de onde vem, só sente que a superfície tem
 * profundidade.
 *
 * `fixed` de propósito: luz de ambiente não desliza com o conteúdo. Se ela rolasse junto, viraria
 * pintura colada na página e o efeito se denunciaria na primeira rolagem. Vai num pseudo-elemento
 * em vez de `background-attachment: fixed` no `body` porque o `fixed` no body repinta a cada
 * quadro de rolagem em celular e tem bug conhecido no Safari do iOS.
 *
 * z-index -1 põe a camada acima da cor do canvas e ABAIXO do conteúdo — inclusive abaixo do fundo
 * das seções. Por isso as seções claras passaram a usar `--veu-*` (translúcido) em vez de cor
 * sólida: é o que deixa a luz atravessar a página inteira em vez de morrer no primeiro bloco. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Cinco manchas que se atravessam. A primeira versão punha o centro de quase todas FORA do
     viewport, para não passar cor por trás de texto — e o resultado, medido na dobra e não no
     print inteiro, foi fundo quase branco de novo: sobrava só a cauda dos gradientes. Os picos
     voltaram para dentro; o que segura o contraste é outra coisa, e mais barata: as manchas
     ESCURAS ficam nos cantos, e o meio da tela — onde correm a régua, a legenda e os três badges —
     recebe a clara (`--au-clara`), que clareia em vez de escurecer. Texto escuro sobre ela ganha
     contraste, não perde.

     Medido a cada mudança pelo auditar-layout.py: o pior texto do hero fica em 8,9:1, com o
     mínimo do AA em 4,5:1.

     Isto é `fixed`: a aurora não desliza com o conteúdo. Num screenshot de página inteira ela se
     espalha pelos 6.000px da captura e parece diluída — na tela, onde o viewport tem 900px, é o
     que se vê aqui. */
  background:
    radial-gradient(880px 620px at 4% -4%, var(--au-alta), transparent 62%),
    radial-gradient(1040px 760px at 84% 10%, var(--au-produto), transparent 64%),
    radial-gradient(820px 660px at 99% 54%, var(--au-fria), transparent 62%),
    radial-gradient(720px 560px at 34% 62%, var(--au-clara), transparent 66%),
    radial-gradient(900px 720px at 2% 96%, var(--au-baixa), transparent 64%),
    linear-gradient(180deg, transparent 30%, var(--bg-fundo) 100%);
}
@media print { body::after { display: none; } }

/* Grão. É o detalhe que separa "fundo chapado de gerador de site" de superfície com matéria — e o
   olho não identifica de onde vem, só sente. 3,5% é o teto: acima disso vira sujeira, e em tela
   OLED de celular começa a cintilar ao rolar. `fixed` para o grão não deslizar junto com a página,
   que denunciaria a textura. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { opacity: .055; }
@media print { body::before { display: none; } }

/* ---------- revelação no rolar ----------
 * O estado inicial só existe quando há JS (o `tema.js` estampa `data-js` antes da primeira pintura).
 * Sem essa trava, quem navega com script desligado receberia uma página em branco — o pior modo de
 * falha possível numa página cujo trabalho é entregar um arquivo. */
[data-revela] > * {
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
}
:root[data-js] [data-revela] > * { opacity: 0; transform: translateY(12px); }
:root[data-js] [data-revela].visivel > * { opacity: 1; transform: none; }
[data-revela].visivel > :nth-child(2) { transition-delay: .06s; }
[data-revela].visivel > :nth-child(3) { transition-delay: .12s; }
[data-revela].visivel > :nth-child(4) { transition-delay: .18s; }
[data-revela].visivel > :nth-child(n + 5) { transition-delay: .24s; }

/* Quem pediu menos movimento recebe o conteúdo pronto, não uma animação rápida. */
@media (prefers-reduced-motion: reduce) {
  :root[data-js] [data-revela] > * { opacity: 1; transform: none; }
}

/* Impressão e captura de página inteira não ROLAM a página — e sem rolagem o observador nunca
   dispara. Sem esta regra, imprimir esta página entrega uma folha com o cabeçalho e mais nada.
   Foi exatamente o que aconteceu no primeiro print desta direção. */
@media print {
  :root[data-js] [data-revela] > * { opacity: 1 !important; transform: none !important; }
  .marcado::before { display: none; }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-weight: 600; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #124a80; }
.btn-ghost-navy { background: transparent; color: var(--on-navy); border-color: rgba(255,255,255,.42); }
.btn-ghost-navy:hover { background: rgba(255,255,255,.08); }
/* O header é navy nos DOIS temas: aqui o accent é o hex fixo do claro, porque o #7fb0e6 do dark
   com texto branco reprovaria contraste. */
.site-header .btn-accent { background: #185fa5; color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy); color: var(--on-navy);
}
/* O fio que fecha o cabeçalho desvanece nas pontas em vez de atravessar de ponta a ponta. Uma
   régua inteira desenha uma CAIXA, e caixa é o que faz um cabeçalho parecer barra de sistema; um
   fio que nasce e morre no vazio separa sem emoldurar. É a mesma ideia de todo o resto da página:
   estrutura que se sente, não que se lê. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--navy-line) 14%, var(--navy-line) 86%, transparent);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
/* ---------- o lockup ----------
 * Uma linha só: emblema + nome. O descritor "by Fenox Tecnologia" saiu daqui, e a assinatura não
 * se perdeu — o hero abre com o rótulo "APLICATIVO OFICIAL DA FENOX TECNOLOGIA" e o rodapé assina
 * com a logo institucional. Repetir a mesma informação em corpo 11 e itálico não reforçava: só
 * enchia o canto mais nobre da página com o que já estava dito duas vezes.
 *
 * O que faltava para o conjunto parecer caro não era enfeite, era PROPORÇÃO. O arquivo da marca é
 * um ícone de aplicativo, e a margem de segurança que o Android exige faria o emblema aparecer
 * menor que a própria caixa — o `timeclock-emblema.png` é o desenho já aparado, então a caixa é
 * toda emblema.
 *
 * A caixa subiu de 32 para 40px quando a MARCA NOVA entrou (a de 10/09/2026, a impressão digital
 * com o nome dentro, que substituiu o relógio-com-perfil). Medido em 24/32/40/48/64px: a 32px as
 * cristas da digital fecham num borrão e o nome interno não existe; a 40px a silhueta se lê. É o
 * teto que o cabeçalho de 72px acomoda — abaixo disso a marca não é reconhecível, e acima o
 * emblema passa a dominar o nome ao lado.
 *
 * O nome desce de 19/700 para 18/600. Peso 700 nesse tamanho grita; 600 com entreletra fechada é o
 * registro que marca de produto usa quando quer parecer segura em vez de alta. */
.brand { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; text-decoration: none; min-width: 0; }
.brand-emblema {
  width: 40px; height: 40px; flex: none;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.brand-name { font-size: 18px; font-weight: 600; letter-spacing: -0.022em; }
/* O único movimento: o emblema respira ao passar o ponteiro. Meio-grau de escala — o suficiente
   para o elemento responder, longe o bastante de chamar atenção para si. */
.brand:hover .brand-emblema { transform: scale(1.06); }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links a { text-decoration: none; opacity: .9; }
.nav-links a:hover { opacity: 1; }

/* Botão de tema. Redondo é exceção deliberada ao teto de 4px do ADR-008 (que trata de card, botão
   e campo): aqui a forma imita o alvo do próprio app e do Coworking, e um quadrado de 40px ao lado
   do CTA leria como segundo botão de ação. O ícone mostra o tema DE DESTINO, não o atual — sol
   quando está escuro, lua quando está claro. */
.nav-acoes { display: inline-flex; align-items: center; gap: 12px; }
.btn-tema {
  display: inline-grid; place-items: center;
  /* `flex: none` porque em 360px o flex encolhia o botão para 42px e ele caía abaixo do alvo
     mínimo de 44px — medido pelo `auditar-layout.py`, não estimado. */
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .30);
  background: transparent; color: var(--on-navy);
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn-tema:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.btn-tema:active { transform: scale(.95); }

/* ---------- rodapé ---------- */
.site-footer { background: var(--navy-deep); color: #fff; padding: 36px 0; }
.footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
/* Logo institucional oficial (arquivo, nunca redesenhada). Sobre navy vai a versão branca. */
.footer-logo { height: 30px; width: auto; }
.footer-note { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.62); max-width: 420px; }
.footer-links { display: grid; font-size: 13px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links a { color: rgba(255,255,255,.82); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 700px) {
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .nav .btn { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .brand-name { font-size: 17px; }
}