/* ============================================================================
   SHARED.CSS — tokens e primitivas comuns às quatro páginas (index, resultados,
   plataforma, sobre). Cada página mantém só o CSS específico dela num <style>
   próprio; o que é base mora aqui.

   Este arquivo NÃO é a especificação visual — ela vive em cogni-identidade-visual.
   Aqui é a cópia técnica dos valores em uso, extraída do bloco comum de
   index.html e historia.html em 2026-08-29. Diferenças encontradas ao separar:

     · .cg-wrap era 1320px (index) e 1180px (historia) — padronizado em 1320.
     · @keyframes cgDocScan e cgMarquee são específicos de página (pipeline e
       faixa de áreas) e ficam no CSS de cada uma.
     · O prefers-reduced-motion geral é este; a exceção .cg-areas-track da
       landing mora no CSS dela.

   NAO altere um token aqui sem propagar para as páginas que o usam e para
   cogni-apresentacoes/assets/design-system.css — a paleta tem uma única fonte
   de verdade e esta é só a cópia técnica.

   ----------------------------------------------------------------------------

   NAV CANÔNICA — o ÚNICO header oficial do site. Copie este bloco LITERALMENTE
   em cada página, ajustando apenas os href:

     · logo:  na landing href="#cg-top"; nas demais href="index.html"
     · CTA:   href="#cg-contato" em TODAS — cada página tem a sua seção de
              contato no fim (o bloco #cg-contato é copiado nas quatro).

   Não edite uma página e esqueça as outras: a nav já divergiu uma vez sem
   ninguém notar (historia.html tinha "Plataforma" e "Quem somos"; index.html só
   "Resultados"). O QA final faz um diff de paridade dos 4 headers contra isto.

   <header style="position:fixed;top:0;left:0;right:0;z-index:400;padding:14px var(--pad-x);display:flex;justify-content:center;pointer-events:none">
     <nav aria-label="Navegação principal" style="height:48px;display:flex;align-items:center;gap:8px;pointer-events:auto;max-width:100%;padding:5px 5px 5px 16px;border-radius:var(--r2);background:rgba(255,255,255,.82);border:1px solid var(--line);backdrop-filter:blur(22px);box-shadow:0 8px 28px rgba(19,41,61,.09)">
       <a href="#cg-top" aria-label="Cogni — início" style="display:inline-flex;align-items:center;padding-right:14px;margin-right:6px;border-right:1px solid var(--line)">
         <img src="assets/cogni-assinatura.svg" alt="Cogni" width="68" height="24" style="height:24px;width:auto">
       </a>
       <div class="cg-navlinks" style="display:flex;align-items:center;gap:2px">
         <a class="cg-nav-link" href="resultados.html">Resultados</a>
         <a class="cg-nav-link" href="plataforma.html">Plataforma</a>
         <a class="cg-nav-link" href="sobre.html">Quem somos</a>
       </div>
       <a class="cg-btn cg-btn-p" href="#cg-contato" style="height:38px;padding:0 16px;font-size:.78rem;font-weight:700;white-space:nowrap;margin-left:6px">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"></rect><path d="M16 2v4M8 2v4M3 10h18"></path></svg>
         Falar com especialista
       </a>
     </nav>
   </header>

   RODAPÉ CANÔNICO — mesmas regras: copie literalmente, ajuste os href.

   <footer style="background:var(--bg);border-top:1px solid var(--line);padding:28px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative">
     <img src="assets/cogni-assinatura.svg" alt="Cogni" style="height:52px;width:auto">
     <div style="color:var(--fg-faint);font-size:.8rem;position:absolute;left:50%;transform:translateX(-50%)">© 2026 Cogni · Inteligência Operacional</div>
     <div style="display:flex;gap:22px">
       <a href="index.html" style="color:var(--fg-faint);font-size:.8rem">Início</a>
       <a href="resultados.html" style="color:var(--fg-faint);font-size:.8rem">Resultados</a>
       <a href="plataforma.html" style="color:var(--fg-faint);font-size:.8rem">Plataforma</a>
       <a href="sobre.html" style="color:var(--fg-faint);font-size:.8rem">Quem somos</a>
       <a href="index.html#cg-contato" style="color:var(--fg-faint);font-size:.8rem">Contato</a>
     </div>
   </footer>
   ========================================================================= */

/* --- TOKENS ----------------------------------------------------------------
   Os valores vêm de cogni-identidade-visual. O redesenho troca o vocabulário
   anterior — pílulas de 999px, sombras coloridas de teal, animações decorativas
   — por uma geometria disciplinada: "precisão como estética".

   Regras de cor:
     · Ink Navy ~70% — estrutura, texto, painéis de impacto
     · Teal ~20%     — SÓ interação: link, estado ativo, porta de conexão
     · Âmbar ~10%    — SÓ resultado medido: KPI, número de negócio
   Teal não é cor de enfeite. Quando tudo é destaque, nada é. */
:root{
  --ink:#13293D; --ink-deep:#0D1E2E; --ink-alt:#16263B;
  --teal:#18C5C5; --teal-ink:#0F8F8F;
  --amber:#F4B942; --amber-ink:#8A6100;
  --fg:#13293D; --fg-soft:#3E5163; --fg-faint:#4A5C6E;
  --bg:#FFFFFF; --bg-alt:#F4F6F8;
  --line:rgba(19,41,61,.13); --line-soft:rgba(19,41,61,.07);
  --line-dark:rgba(255,255,255,.14);
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  /* Escala de raio, não um raio por elemento. 3 → chip · 6 → botão/card
     pequeno · 10 → card/painel · 14 → mídia grande. */
  --r1:3px; --r2:6px; --r3:10px; --r4:14px;
  --sh1:0 1px 2px rgba(19,41,61,.06);
  --sh2:0 1px 2px rgba(19,41,61,.05),0 12px 32px rgba(19,41,61,.06);
  --sh3:0 24px 64px rgba(19,41,61,.11);
  --pad-y:clamp(64px,8vw,104px);
  --pad-x:clamp(20px,5vw,64px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty}
img,svg,video{display:block;max-width:100%}
a{text-decoration:none;color:var(--teal-ink)}
a:hover{color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px;border-radius:var(--r1)}

/* --- animações -------------------------------------------------------------
   A única animação compartilhada é a de entrada. As outras (scan do pipeline,
   marquee do hero) são específicas de página e vivem no <style> de cada uma. */
@keyframes cgRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* --- entrada por rolagem ---------------------------------------------------
   O bloco sobe 18px e aparece, uma vez só, e nunca mais se mexe. Sem escala,
   sem giro, sem desfoque, sem parallax — a identidade Cogni pede precisão, e
   movimento decorativo é exatamente o que as páginas passaram inteiras tirando.

   O estado inicial invisível só existe depois que o JS confirma que vai revelar
   (.cg-js no <html>). Se o script falhar, nada some — o erro mais comum desse
   padrão é a página em branco quando o observer não roda. */
.cg-js [data-reveal]{opacity:0;transform:translateY(18px)}
.cg-js [data-reveal].cg-on{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1)}
.cg-js [data-reveal][data-d="1"].cg-on{transition-delay:.07s}
.cg-js [data-reveal][data-d="2"].cg-on{transition-delay:.14s}
.cg-js [data-reveal][data-d="3"].cg-on{transition-delay:.21s}
.cg-in>*{animation:cgRise .7s cubic-bezier(.16,.84,.44,1) both}
.cg-in>*:nth-child(2){animation-delay:.06s}
.cg-in>*:nth-child(3){animation-delay:.12s}
.cg-in>*:nth-child(4){animation-delay:.18s}
.cg-in>*:nth-child(5){animation-delay:.24s}

/* --- primitivas de seção -------------------------------------------------- */
.cg-sec{padding:var(--pad-y) var(--pad-x)}
.cg-wrap{max-width:1320px;margin:0 auto}

/* O eyebrow é índice, não enfeite: o número orienta a leitura e devolve ao
   teal o papel de acento raro. */
.cg-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:20px}
.cg-eyebrow::after{content:"";height:1px;flex:1;max-width:88px;background:var(--line)}
.cg-sec-dark .cg-eyebrow{color:rgba(255,255,255,.6)}
.cg-sec-dark .cg-eyebrow::after{background:var(--line-dark)}

.cg-h2{font-size:clamp(1.85rem,3.3vw,2.7rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.cg-lede{color:var(--fg-soft);font-size:1.02rem;line-height:1.7}
.cg-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1)}
/* O cartão responde ao cursor (2026-08-31, passada de acabamento nas páginas
   internas). Sem isso, três cartões de compromisso, duas fichas de fundador e
   o painel de números liam como impressos: nada na página confirmava que o
   ponteiro está sobre um bloco e não sobre o fundo. O gesto é o mínimo que
   comunica isso — a borda escurece um passo e a sombra sai de --sh1 para
   --sh2, que é o degrau seguinte da MESMA escala; nada de cor nova, nada de
   escala. 1px de subida, não 4: é confirmação de alvo, não animação.
   Só em ponteiro fino — no toque o hover cola e o cartão fica "aceso" depois
   do dedo sair. */
@media (hover:hover) and (pointer:fine){
  .cg-card{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
  .cg-card:hover{border-color:rgba(19,41,61,.22);box-shadow:var(--sh2);transform:translateY(-1px)}
}

/* Link dentro de texto corrido ganha sublinhado no hover. O corpo já pinta
   links em teal-ink, mas num parágrafo de 74 caracteres a cor sozinha é uma
   pista fraca (e some para quem não distingue bem verde-azulado). O
   sublinhado só aparece sob o cursor para não picotar o parágrafo em repouso;
   `text-underline-offset` afasta a linha das descidas do "g" e do "p". */
.cg-prose a:hover,.cg-lede a:hover,.cg-beat-v a:hover,.cg-value p a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* --- páginas internas: o chão do cabeçalho --------------------------------
   (2026-08-31.) As três páginas internas abriam em branco absoluto: a nav
   flutuando sobre nada, ~110px de vazio e então o h1. Sem a abertura escura
   que a landing tem, nada dizia "a página começa aqui" — era o defeito por
   trás do "estão sem sal".

   O chão é o --bg-alt que as próprias páginas já usam como faixa de seção,
   desta vez esvaindo para o branco na altura em que o cabeçalho termina. É
   uma faixa que não precisa acertar altura nenhuma: onde ela acaba não há
   borda para cair no lugar errado, então o mesmo valor serve para as três
   páginas em qualquer largura, e o cabeçalho ganha peso sem que uma linha de
   conteúdo mude de lugar.

   Vem de ::before, e não do `background` da seção, porque as três trazem
   `background:var(--bg)` inline — sobrescrever exigiria !important numa
   propriedade que outra pessoa vai querer ler no HTML. O ::before é
   absoluto, então pinta ACIMA do conteúdo em fluxo: por isso o .cg-wrap sobe
   para z-index 1. */
#cg-sobre,#cg-resultados,#cg-mecanismo{position:relative}
#cg-sobre::before,#cg-resultados::before,#cg-mecanismo::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(300px,38vh,460px);
  background:linear-gradient(180deg,var(--bg-alt) 0%,rgba(244,246,248,.55) 55%,rgba(244,246,248,0) 100%);
  pointer-events:none}
#cg-sobre>.cg-wrap,#cg-resultados>.cg-wrap,#cg-mecanismo>.cg-wrap{position:relative;z-index:1}

/* Botões retangulares com raio curto e sombra neutra. A pílula com brilho teal
   era o traço mais reconhecível do visual anterior. */
.cg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r2);padding:13px 22px;font-size:.9rem;font-weight:650;transition:background .18s,border-color .18s,color .18s}
.cg-btn-p{background:var(--teal-ink);color:#fff}
.cg-btn-p:hover{background:#0E8C8C;color:#fff}
.cg-btn-g{border:1px solid var(--line);color:var(--ink);background:var(--bg)}
.cg-btn-g:hover{border-color:var(--ink);color:var(--ink)}
.cg-sec-dark .cg-btn-g{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.05)}
.cg-sec-dark .cg-btn-g:hover{border-color:rgba(255,255,255,.45);color:#fff}

.cg-tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}

/* Painel escuro reutilizável (CTA escuro, cases, plataforma, sobre). */
.cg-panel{background:var(--ink);border:1px solid rgba(255,255,255,.09);border-radius:var(--r3);overflow:hidden;color:#fff}
/* Rótulo mono sobre painel escuro — o mesmo par chave/valor usado nos blocos
   de origem e no painel da plataforma. */
.cg-step-t{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* --- header --------------------------------------------------------------- */
.cg-nav-link{height:32px;display:inline-flex;align-items:center;padding:0 13px;border-radius:var(--r1);color:var(--ink);font-size:.76rem;font-weight:600;white-space:nowrap;transition:background .16s}
.cg-nav-link:hover{background:rgba(19,41,61,.06);color:var(--ink)}

/* --- marquee: pausa em hover/focus/reduced-motion (WCAG 2.2.2) -------------
   O BOTÃO "PAUSAR" SAIU em 2026-08-31, a pedido do Caio: a pílula aparecia
   sobre a faixa assim que o cursor encostava nela e era a única coisa que se
   movia na primeira dobra — um controle brotando no meio da lista de áreas,
   competindo com a assinatura logo acima. O que ele fazia continua existindo
   e é o que importa: a faixa PARA sozinha sob o cursor e sob o foco de
   teclado (as duas regras abaixo), e quem pede menos movimento recebe a
   faixa parada pelo bloco de prefers-reduced-motion no fim deste arquivo.
   Ou seja, o mecanismo de pausa do 2.2.2 continua no lugar — o que saiu foi
   o botão que o duplicava visivelmente. */
.cg-areas-win:hover .cg-areas-track,
.cg-areas-win:focus-within .cg-areas-track{animation-play-state:paused}
.cg-areas-win{position:relative}

/* --- roda do fluxo: hover casa setor e bloco de texto ----------------------
   (2026-08-31, pedido do Caio: "faça um hover da roleta que ao botar o mouse
   em cima destaca o respectivo passo do fluxo".)

   O par é DOS DOIS LADOS: passar o mouse sobre a fatia acende o bloco de
   texto correspondente, e passar sobre o bloco acende a fatia. Sem isso, o
   visitante que está LENDO o passo 03 não recebe nenhuma pista de qual
   pedaço da roda ele é — e a roda é justamente o que a seção vende.

   Zero JavaScript. O casamento é `:has()` no container: `.cg-wheel-grid` é
   ancestral tanto do <svg> quanto dos cinco blocos, então uma condição no
   container consegue enxergar o hover de um lado e pintar o outro. Em
   navegador sem `:has()` nada acontece — a seção volta a ser exatamente o
   que era, que é a degradação certa para um realce.

   O gesto é DIMINUIR o resto, não estourar o alvo: os quatro setores que não
   estão sob o cursor caem para 30% e os blocos de texto para 38%; o par ativo
   simplesmente fica onde já estava, com um empurrão de 3,5% para fora do
   centro. Estourar o alvo (saturar cor, engrossar borda) mexeria na paleta —
   o desenho tem cinco cores fixas da rampa teal→navy e nenhuma delas é
   negociável por causa de um estado de mouse.

   Só em ponteiro fino: no toque não existe hover, e sem esta guarda o
   primeiro toque numa fatia deixaria as outras quatro apagadas até o
   visitante tocar em outro lugar. */
@media (hover:hover) and (pointer:fine){
  .cg-ws{transform-box:view-box;transform-origin:50% 50%;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
  .cg-wr{transition:opacity .22s ease}
  .cg-wheel-step{transition:opacity .22s ease}
  .cg-wheel-chips span{transition:color .22s ease,border-color .22s ease,background-color .22s ease}

  /* Passo 1: com algo em foco, tudo recua. */
  .cg-wheel-grid:has(.cg-ws:hover) .cg-ws,
  .cg-wheel-grid:has(.cg-wheel-step:hover) .cg-ws{opacity:.3}
  .cg-wheel-grid:has(.cg-ws:hover) .cg-wr,
  .cg-wheel-grid:has(.cg-wheel-step:hover) .cg-wr{opacity:.2}
  .cg-wheel-grid:has(.cg-ws:hover) .cg-wheel-step,
  .cg-wheel-grid:has(.cg-wheel-step:hover) .cg-wheel-step{opacity:.38}

  /* Passo 2: o par ativo volta. A seta que ACENDE é a que SAI do passo — ela
     aponta para o próximo, e é a leitura que a seção quer ("nenhuma etapa é
     um produto à parte"). */
  .cg-wheel-grid:has([data-step="1"]:hover) [data-step="1"],
  .cg-wheel-grid:has(.cg-wheel-s1:hover)   [data-step="1"],
  .cg-wheel-grid:has([data-step="2"]:hover) [data-step="2"],
  .cg-wheel-grid:has(.cg-wheel-s2:hover)   [data-step="2"],
  .cg-wheel-grid:has([data-step="3"]:hover) [data-step="3"],
  .cg-wheel-grid:has(.cg-wheel-s3:hover)   [data-step="3"],
  .cg-wheel-grid:has([data-step="4"]:hover) [data-step="4"],
  .cg-wheel-grid:has(.cg-wheel-s4:hover)   [data-step="4"],
  .cg-wheel-grid:has([data-step="5"]:hover) [data-step="5"],
  .cg-wheel-grid:has(.cg-wheel-s5:hover)   [data-step="5"]{opacity:1;transform:scale(1.035)}

  .cg-wheel-grid:has([data-step="1"]:hover) [data-arrow="1"],
  .cg-wheel-grid:has(.cg-wheel-s1:hover)   [data-arrow="1"],
  .cg-wheel-grid:has([data-step="2"]:hover) [data-arrow="2"],
  .cg-wheel-grid:has(.cg-wheel-s2:hover)   [data-arrow="2"],
  .cg-wheel-grid:has([data-step="3"]:hover) [data-arrow="3"],
  .cg-wheel-grid:has(.cg-wheel-s3:hover)   [data-arrow="3"],
  .cg-wheel-grid:has([data-step="4"]:hover) [data-arrow="4"],
  .cg-wheel-grid:has(.cg-wheel-s4:hover)   [data-arrow="4"],
  .cg-wheel-grid:has([data-step="5"]:hover) [data-arrow="5"],
  .cg-wheel-grid:has(.cg-wheel-s5:hover)   [data-arrow="5"]{opacity:1}

  .cg-wheel-grid:has([data-step="1"]:hover) .cg-wheel-s1,
  .cg-wheel-grid:has(.cg-wheel-s1:hover)   .cg-wheel-s1,
  .cg-wheel-grid:has([data-step="2"]:hover) .cg-wheel-s2,
  .cg-wheel-grid:has(.cg-wheel-s2:hover)   .cg-wheel-s2,
  .cg-wheel-grid:has([data-step="3"]:hover) .cg-wheel-s3,
  .cg-wheel-grid:has(.cg-wheel-s3:hover)   .cg-wheel-s3,
  .cg-wheel-grid:has([data-step="4"]:hover) .cg-wheel-s4,
  .cg-wheel-grid:has(.cg-wheel-s4:hover)   .cg-wheel-s4,
  .cg-wheel-grid:has([data-step="5"]:hover) .cg-wheel-s5,
  .cg-wheel-grid:has(.cg-wheel-s5:hover)   .cg-wheel-s5{opacity:1}

  /* As chips do passo ativo saem do contorno translúcido para o teal cheio —
     o único acréscimo de cor do realce, e ele acontece nos elementos que já
     eram teal. */
  .cg-wheel-grid:has([data-step="1"]:hover) .cg-wheel-s1 .cg-wheel-chips span,
  .cg-wheel-grid:has(.cg-wheel-s1:hover)   .cg-wheel-s1 .cg-wheel-chips span,
  .cg-wheel-grid:has([data-step="2"]:hover) .cg-wheel-s2 .cg-wheel-chips span,
  .cg-wheel-grid:has(.cg-wheel-s2:hover)   .cg-wheel-s2 .cg-wheel-chips span,
  .cg-wheel-grid:has([data-step="3"]:hover) .cg-wheel-s3 .cg-wheel-chips span,
  .cg-wheel-grid:has(.cg-wheel-s3:hover)   .cg-wheel-s3 .cg-wheel-chips span,
  .cg-wheel-grid:has([data-step="4"]:hover) .cg-wheel-s4 .cg-wheel-chips span,
  .cg-wheel-grid:has(.cg-wheel-s4:hover)   .cg-wheel-s4 .cg-wheel-chips span,
  .cg-wheel-grid:has([data-step="5"]:hover) .cg-wheel-s5 .cg-wheel-chips span,
  .cg-wheel-grid:has(.cg-wheel-s5:hover)   .cg-wheel-s5 .cg-wheel-chips span{border-color:var(--teal-ink);background:rgba(24,197,197,.09)}
}
/* Sem movimento para quem pediu menos movimento: o realce continua (é
   informação), o empurrão de escala não. */
@media (prefers-reduced-motion:reduce){
  .cg-ws{transform:none!important}
}

/* --- contato: duas vias (2026-08-30, polish 2026-08-30) ----------------------
   Duas vias lado a lado sobre fundo ink. Impeccable + ui-ux-pro-max + 
   minimalism-and-swiss-style (clean, high contrast, grid, essential).

   Hierarquia: o envio de e-mail é a via primária — cartão claro, elevado,
   com contraste real (branco sobre ink). O canal direto é secundário —
   translúcido sobre o fundo, para não competir. O divisor "ou" é uma
   pílula que interrompe a linha, não um texto solto no vazio.

   Correções de feio:
   - Glass fraco (rgba .06) trocado por superfície opaca com sombra com offset+blur
     (craft-floor: depth precisa offset+blur, halo colorido não é profundidade).
   - Espaçamento no ritmo de 8px: 32px no cartão primário, 28px no secundário,
     48px de respiro do divisor.
   - Contraste: placeholder e hint em fg-soft/fg-faint (≥4.5:1 no branco),
     não cinza sobre cinza. Input com label visível (ux: Form Labels).
   - Estados: focus com outline teal-ink, hover com elevação, não só troca de borda.
   - Tipografia: medida 65–75ch no subtítulo, heading com text-wrap:balance.
*/
.cg-contact-split{display:grid;grid-template-columns:minmax(0,1.32fr) 48px minmax(0,.88fr);gap:0;align-items:stretch;max-width:880px;margin:0 auto;text-align:left}
.cg-contact-card{padding:32px;border-radius:var(--r3);display:flex;flex-direction:column;position:relative;height:100%}
.cg-contact-card--primary{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 1px 2px rgba(19,41,61,.06),0 16px 40px rgba(0,0,0,.18);color:var(--fg)}
.cg-contact-card--primary .cg-contact-k{color:var(--fg-faint)}
.cg-contact-card--primary .cg-contact-hint{color:var(--fg-soft)}
.cg-contact-card--secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cg-contact-card--secondary .cg-contact-k{color:rgba(255,255,255,.74)}
.cg-contact-card--secondary .cg-contact-desc{color:rgba(255,255,255,.78)}
.cg-contact-card--secondary .cg-contact-hint{color:rgba(255,255,255,.62)}
.cg-contact-k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.cg-contact-desc{font-size:.92rem;line-height:1.6;margin-bottom:18px}
.cg-contact-hint{font-size:.8rem;line-height:1.6;margin-top:14px}
.cg-contact-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.cg-contact-form input{width:100%;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r2);color:var(--ink);padding:14px 16px;font-size:.92rem;height:50px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.cg-contact-form input::placeholder{color:var(--fg-faint);opacity:.9}
.cg-contact-form input:hover{border-color:rgba(19,41,61,.2)}
.cg-contact-form input:focus{border-color:var(--teal-ink);box-shadow:0 0 0 3px rgba(15,143,143,.14);background:#FFFFFF}
.cg-contact-form button{white-space:nowrap;height:50px;padding:0 22px;font-weight:700}
.cg-contact-form input:invalid:not(:placeholder-shown){border-color:#C24A3A}
.cg-contact-channels{display:flex;gap:10px;flex-wrap:wrap}
.cg-contact-icon{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border-radius:var(--r2);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.86rem;font-weight:650;line-height:1;transition:background .18s,border-color .18s,transform .18s}
.cg-contact-icon:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff;transform:translateY(-1px)}
.cg-contact-icon:active{transform:translateY(0)}
.cg-contact-icon svg{flex:none;opacity:.92}
.cg-contact-or{display:flex;align-items:center;justify-content:center;position:relative}
.cg-contact-or::before{content:"";position:absolute;top:18px;bottom:18px;left:50%;width:1px;background:rgba(255,255,255,.16)}
.cg-contact-or span{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:#FFFFFF;color:var(--fg-faint);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.18);position:relative;z-index:1}
@media(max-width:860px){
  .cg-contact-split{grid-template-columns:1fr;gap:18px;max-width:520px}
  .cg-contact-or{height:36px}
  .cg-contact-or::before{top:50%;bottom:auto;left:18px;right:18px;width:auto;height:1px}
  .cg-contact-card{padding:24px}
}
@media(max-width:520px){
  .cg-contact-form{grid-template-columns:1fr;gap:10px}
  .cg-contact-form button{width:100%}
}

/* --- nav touch targets (Vercel a11y: >=44px) ------------------------------ */
.cg-nav-link{min-height:44px}
@media(max-width:940px){.cg-navlinks{display:none!important}}
@media(max-width:620px){
  .cg-btn{min-height:44px}
  .cg-logo-link{min-height:44px}
  .cg-contact-icon{min-height:44px}
}

/* --- responsivo: o que vale em toda página -------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
   .cg-js [data-reveal]{opacity:1!important;transform:none!important}
}