/* ============================================================================
   MARCA SETOR 3 — o logotipo, em um lugar só.

   Carregado pelo SITE (componentes.css não o contém mais) e pela PLATAFORMA
   (admin, talentos, vagas). Antes o site montava um SVG vivo e a plataforma
   exibia /assets/img/Poster_A3.png — um raster do logo ANTIGO. As duas metades
   do produto mostravam marcas diferentes.

   Por que componente e não outra imagem: raster de interface que muda envelhece
   na próxima troca de paleta. Este projeto já pagou esse preço duas vezes (o
   mapa do Brasil e o balancete, ambos convertidos para render ao vivo depois de
   ficarem laranjas numa paleta terracota).

   Depende dos tokens de cor e das fontes do manual — tokens.css no site,
   plataforma.css na plataforma definem os mesmos nomes.
   ============================================================================ */

/* Cada var() abaixo tem FALLBACK porque este arquivo e carregado por DOIS
   hospedeiros com conjuntos de tokens diferentes: o site (tokens.css) tem a
   escala de espaco e as curvas; a plataforma (plataforma.css) nunca precisou
   delas. Sem fallback, `gap: var(--s3-e-4)` resolvia para NADA na plataforma e
   o simbolo colava no nome — errado em silencio, sem erro no console. */

.s3-logo { display: inline-flex; align-items: center; gap: var(--s3-e-4, 10px); text-decoration: none; }
/* o ícone SOBRESSAI no hover: levanta, cresce e projeta sombra da própria cor */
.s3-logo__simbolo {
  /* 14% para casar com o rx=14 do SVG do manual: se divergem, a sombra
     descola do canto */
  border-radius: 14%;
  transition: transform 280ms var(--s3-curva, ease), filter 280ms var(--s3-curva, ease);
  filter: drop-shadow(0 2px 5px rgba(110, 43, 29, .3));
}
.s3-logo:hover .s3-logo__simbolo,
.s3-logo:focus-visible .s3-logo__simbolo {
  transform: translateY(-3px) scale(1.09);
  filter: drop-shadow(0 10px 18px rgba(110, 43, 29, .45));
}
@media (prefers-reduced-motion: reduce) {
  .s3-logo__simbolo { transition: none; }
  .s3-logo:hover .s3-logo__simbolo { transform: none; }
}
.s3-logo__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.s3-logo__nome {
  /* Red Hat Display do manual + METALICO na familia terracota: gradiente de
     7 paradas com banda de brilho que VARRE a palavra no hover, como reflexo
     passando numa placa. Logotipo e isento das regras de contraste de texto
     (WCAG 1.4.3) — e o unico lugar do site acima do teto de peso. */
  font-family: var(--s3-fonte-grotesca, 'Red Hat Display', system-ui, sans-serif);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--s3-laranja-texto, #903A27);
  background-image: linear-gradient(105deg,
    #5E2517 0%, #7C3222 20%, #903A27 36%, #C67A63 48%,
    #903A27 60%, #7C3222 82%, #5E2517 100%);
  background-size: 240% 100%;
  background-position: 92% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1100ms cubic-bezier(.22, .61, .36, 1);
}
.s3-logo:hover .s3-logo__nome,
.s3-logo:focus-visible .s3-logo__nome { background-position: 8% 0; }
.s3-logo__nome b {
  font-weight: inherit;
  display: inline-block;
  /* o CHIP do "3": assinatura tipografica da marca, agora em terracota */
  font-size: .78em;
  vertical-align: .09em;
  margin-left: .14em;
  padding: 0 .18em .05em;
  border-radius: .2em;
  background-image: linear-gradient(150deg, #B4543C 0%, #903A27 48%, #6E2B1D 100%);
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: #F2ECE4;
  color: #F2ECE4;
  box-shadow: 0 1px 3px rgba(110, 43, 29, .38);
  transition: transform 280ms var(--s3-curva, ease), box-shadow 280ms var(--s3-curva, ease);
}
.s3-logo:hover .s3-logo__nome b,
.s3-logo:focus-visible .s3-logo__nome b {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(110, 43, 29, .48);
}

.s3-logo__sub {
  font-family: var(--s3-fonte-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .4em;
  color: var(--s3-texto-tenue, #B6A790);
  margin-top: 5px;
}
/* Rodapé: o MESMO logo do cabeçalho — mesmo ícone, mesmo laranja metálico
   no "setor". Só o "3" troca o grafite por prata quente, porque grafite
   não lê sobre fundo escuro. */
.s3-logo--claro .s3-logo__sub { color: rgba(255, 255, 255, .55); }
.s3-logo--claro .s3-logo__sub    { color: rgba(255, 255, 255, .6); }

/* logo NEGATIVO (rodapé café), como no manual */
.s3-logo--claro .s3-logo__nome {
  /* negativo (rodape cafe): o metalico escuro sumiria — a varredura passa
     para a familia clara, papel/creme, mantendo o mesmo movimento */
  background-image: linear-gradient(105deg,
    #D9CDBB 0%, #E7DFCF 20%, #F2ECE4 36%, #FFFFFF 48%,
    #F2ECE4 60%, #E7DFCF 82%, #D9CDBB 100%);
}
.s3-logo--claro .s3-logo__nome b {
  background-image: linear-gradient(150deg, #C9705A 0%, #A6432B 48%, #8F3A25 100%);
  -webkit-text-fill-color: #F2ECE4;
  color: #F2ECE4;
}
.s3-logo--claro .s3-logo__sub { color: rgba(231, 223, 207, .65); }