/* ==========================================================================
   SYNOV — Projetos e Soluções
   Folha de estilo global da home.

   O que mora AQUI: reset, tokens de layout/espaçamento, keyframes e os
   estados de :hover/:focus que não cabem em style inline.

   O que mora NO HTML: os estilos de cada elemento, inline. Isso é proposital
   — é assim que o editor visual do Claude Design lê e grava as alterações.
   Convertê-los em classes quebraria a edição visual do arquivo .dc.html.

   As regras abaixo estão na mesma ordem do bloco <style> original.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Reset e base
   -------------------------------------------------------------------------- */

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a         { color: #FE8A23; text-decoration: none; }
a:hover   { color: #c96c14; }

* { box-sizing: border-box; }

/* Os links do menu levam a âncoras dentro da página. Sem isto, o header
   fixo cobriria o topo da seção de destino. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: clamp(64px, 6vw, 88px); }

/* Respeita quem pediu menos movimento no sistema operacional.
   Também é o que torna as capturas de tela determinísticas. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* --------------------------------------------------------------------------
   2. Tokens de layout

   Toda a responsividade da página nasce daqui. Como os valores são
   relativos à viewport (vw), dar zoom apenas escala tudo junto — as
   proporções ficam idênticas em 100%, 125%, 150%...
   -------------------------------------------------------------------------- */

:root {
  /* Container PROPORCIONAL: sempre ~8% de respiro de cada lado, seja qual
     for a largura ou o nivel de zoom. Como e relativo a viewport, a pagina
     mantem exatamente as mesmas proporcoes em 100%, 125%, 150%...
     O teto de 1560px evita linhas longas demais em monitores grandes. */
  --container: min(84vw, 1560px);
  --gutter: clamp(20px, 4vw, 72px);

  /* nivel SECAO: separa assuntos */
  --sec-lg: clamp(88px, 9vw, 144px);
  --sec-md: clamp(64px, 6.5vw, 104px);

  /* nivel GRUPO: titulo -> conteudo da secao */
  --title-gap: clamp(40px, 4.5vw, 72px);

  /* nivel GRUPO: colunas irmas */
  --group-gap: clamp(48px, 5.5vw, 88px);

  /* nivel COMPONENTE: cards entre si */
  --comp-gap: clamp(20px, 2vw, 32px);

  /* nivel TIPOGRAFIA: eyebrow -> titulo -> texto */
  --type-tight: 14px;
  --type-loose: 20px;
}


/* --------------------------------------------------------------------------
   3. Animações
   -------------------------------------------------------------------------- */

/* Seta que pulsa no separador entre "O que oferecemos" e "Jornada". */
@keyframes difArrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* Esteira infinita dos logos de clientes e parceiros.
   Depende de a faixa conter duas cópias lado a lado. */
@keyframes synovMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* --------------------------------------------------------------------------
   4. Ícones sociais do header

   Cada ícone tem duas camadas sobrepostas: o contorno monocromático
   (visível em repouso) e a versão colorida da marca (revelada no hover).
   As cores entram por variáveis definidas inline no <header>, que mudam
   conforme a página esteja no topo ou já rolada.
   -------------------------------------------------------------------------- */

[data-social] {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

[data-social] [data-social-outline] {
  transition: opacity 0.25s ease, transform 0.3s ease;
}

[data-social] [data-social-brand] {
  opacity: 0;
  transform: scale(0.55) rotate(-14deg);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1);
  pointer-events: none;
}

[data-social]:hover,
[data-social]:focus-visible {
  transform: translateY(-2px);
}

[data-social]:hover [data-social-outline],
[data-social]:focus-visible [data-social-outline] {
  opacity: 0;
  transform: scale(0.7);
}

[data-social]:hover [data-social-brand],
[data-social]:focus-visible [data-social-brand] {
  opacity: 1;
  transform: scale(1) rotate(0);
}