/* ============================================================
   Sulco Gestão — Logo animado (CSS puro, sem imagem)
   Markup:
   <span class="sg-logo">
     <span class="sg-mark"><i></i><i class="twi"></i><i></i></span>
     <span class="sg-word"><b>SULCO</b><em>Gestão</em></span>
   </span>
   O sensor do sulco central desce verde->amarelo->vermelho
   (medidor de profundidade de sulco do pneu).
   ============================================================ */

.sg-logo { display: inline-flex; align-items: center; gap: 12px; }

.sg-mark { display: flex; gap: 4px; align-items: center; height: 30px; transform: skewX(-12deg); }
.sg-mark i { width: 4.5px; height: 24px; background: var(--muted); border-radius: 2px; position: relative; }
.sg-mark i.twi { height: 30px; background: var(--txt); overflow: hidden; }
.sg-mark i.twi::after {
  content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #12A36A; box-shadow: 0 0 6px rgba(18,163,106,.55);
  animation: sg-probe 2.4s ease-in-out infinite alternate;
}
@keyframes sg-probe {
  0%   { top: 3px;  background: #12A36A; box-shadow: 0 0 6px rgba(18,163,106,.55); }
  50%  { top: 12px; background: #F5B301; box-shadow: 0 0 6px rgba(245,179,1,.55); }
  100% { top: 22px; background: #C0392B; box-shadow: 0 0 6px rgba(192,57,43,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-mark i.twi::after { animation: none; top: 12px; background: #F5B301; box-shadow: 0 0 6px rgba(245,179,1,.55); }
}

.sg-word { display: flex; flex-direction: column; line-height: 1; }
.sg-word b  { font-family: var(--font-brand); font-size: 22px; font-weight: 800; color: var(--txt); letter-spacing: .5px; }
.sg-word em { font-family: var(--font-brand); font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 4px; margin-top: 2px; text-transform: uppercase; font-style: normal; }