/* ============================================================
   marca.css — a assinatura visao.360, em um lugar so'.

   Segunda folha compartilhada do portal, depois de metrics.css. A marca
   aparece em ~20 paginas; se cada uma trouxer a propria copia do lockup,
   em tres meses existem tres assinaturas diferentes — foi exatamente isso
   que aconteceu com os cards de metrica antes de metrics.css nascer.

   POR QUE HTML+SVG E NAO O PNG DO KIT:
   o kit entrega a assinatura so' em raster (1964x472). Um <img> nao muda de
   cor com o tema, nao pulsa, e no slot de 30px da sidebar chega borrado em
   tela 2x. Aqui a rosca e o ponto sao <circle> de verdade e o wordmark e'
   texto vivo em Wix Madefor Display 800 — o mesmo desenho, resolucao livre.

   GEOMETRIA: medida por pixel no PNG oficial (1964x472), nao estimada.
     simbolo = 472px  respiro = 160px  wordmark = 1332px
     -> respiro 0,339 D · wordmark 2,822 D · total 4,161 D
   Convertido pro corpo do wordmark: simbolo 1,78em, respiro 0,60em.
   (1,65em, o palpite por altura-de-maiuscula, deixava o wordmark 8% largo.)
   As proporcoes internas da rosca vem do SVG do kit, intactas:
     viewBox 120 · rosca r=42 espessura 23 · ponto r=14
     -> vao interno 2,65x e ponto 1,22x, os numeros da tabela do manual.
   Nao mexer nesses tres numeros: e' o uso incorreto n. 3 do manual.
   ============================================================ */

.v360{
  --v360-tinta:#00191F;   /* "visao" */
  --v360-acento:#005982;  /* ".360" e o grau */
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Wix Madefor Display','Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:800; font-size:18px; line-height:1; letter-spacing:-.035em;
  text-transform:lowercase; white-space:nowrap; text-decoration:none;
  -webkit-font-smoothing:antialiased;
}

/* Negativo: fundos escuros (#002E40, #00191F, e o navy #031527 do portal).
   O branco na rosca e o #78C1FF no ponto sao as cores do
   visao360-simbolo-negativo.svg do kit. */
.v360.neg{ --v360-tinta:#FFFFFF; --v360-acento:#78C1FF; }

/* Monocromatico: onde a marca nao pode competir com o conteudo
   (rodape, carimbo, marca d'agua). */
.v360.mono{ --v360-acento:var(--v360-tinta); }

.v360-sim{ width:1.78em; height:1.78em; flex:0 0 auto; display:block; overflow:visible; }
.v360-rosca{ fill:none; stroke:var(--v360-tinta); stroke-width:23; }
.v360-ponto{ fill:var(--v360-acento); }
.v360-halo { fill:none; stroke:var(--v360-acento); stroke-width:4; opacity:0; }

.v360-nome{ color:var(--v360-tinta); }
.v360-ac  { color:var(--v360-acento); }

/* ===== Pulso (manual, §7) ==================================
   3s por ciclo. O ponto cresce 34% e um halo se expande ate' dissolver.
   O halo para na borda interna da rosca (r=14 -> 30,5 = escala 2,18):
   passar disso encosta na rosca e a leitura vira "onda", nao "foco".
   ============================================================ */
.v360-ponto,.v360-halo{ transform-origin:60px 60px; }
.v360-ponto{ animation:v360-pulso 3s ease-in-out infinite; }
.v360-halo { animation:v360-onda  3s ease-in-out infinite; }

@keyframes v360-pulso{
  0%,100%{ transform:scale(1); }
  12%    { transform:scale(1.34); }
  38%    { transform:scale(1); }
}
@keyframes v360-onda{
  0%  { transform:scale(1);    opacity:.9; }
  40% { opacity:.32; }
  70% { transform:scale(2.18); opacity:0; }
  100%{ transform:scale(2.18); opacity:0; }
}

/* Abaixo de 24px o halo vira sujeira (o manual manda so' o pulso).
   container queries nao servem: o gatilho e' o tamanho da propria marca.
   Aplicado pela classe .v360.mini, posta onde o simbolo fica < 24px. */
.v360.mini .v360-halo{ animation:none; opacity:0; }

/* Quem desligou animacao no sistema ve a marca parada. */
@media (prefers-reduced-motion:reduce){
  .v360-ponto,.v360-halo{ animation:none; }
  .v360-halo{ opacity:0; }
}

/* ===== Simbolo sozinho ======================================
   Avatar, favicon, selo, carimbo (manual, §3). Sem wordmark. */
.v360.so-simbolo{ gap:0; }
.v360.so-simbolo .v360-nome{ display:none; }