@media (min-width: 577px) {

/* Estilo Base para os dois cursores */
#uncode-custom-cursor,
#uncode-custom-cursor-pilot {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none; /* Essencial para poder clicar através */
  z-index: 9999;
  opacity: 0; /* Começa invisível */
  transition: opacity 0.3s ease, transform 0.1s ease-out, width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
  will-change: transform, width, height, opacity;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Mostra quando o mouse está na página */
body:hover #uncode-custom-cursor,
body:hover #uncode-custom-cursor-pilot {
  opacity: 1;
}

/* Cursor Piloto (bolinha menor, segue direto) */
#uncode-custom-cursor-pilot {
  width: 6px;
  height: 6px;
  background-color: #FE5000; /* Cor inicial piloto (ajuste) */
  /* A transição do piloto pode ser mais rápida ou inexistente */
  transition: opacity 0.3s ease, transform 0.05s linear, background-color 0.3s ease;
}

/* Cursor Principal (maior, segue com atraso, muda de forma) */
#uncode-custom-cursor {
  width: 18px;
  height: 18px;
  border: 0px solid rgba(0, 221, 166, 0.0); /* Borda inicial (ajuste) */
  background-color: rgba(0, 221, 166, 0.1); /* Fundo inicial (ajuste) */
  /* Transição mais lenta para efeito de arrasto */
  transition: opacity 0.3s ease, transform 0.15s ease-out, width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Some a bolinha verde (piloto) quando o cursor principal estiver ampliado */
#uncode-custom-cursor[data-cursor="pointer"] ~ #uncode-custom-cursor-pilot {
  opacity: 0 !important;
  transition: opacity 0.2s;
  /* Ou, se preferir remover do fluxo visualmente:
  display: none;
  */
}

/* Estilos para o Tooltip dentro do cursor principal */
#uncode-custom-cursor .title-tooltip {
  position: absolute;
  color: #fff; /* Cor do texto/ícone no tooltip (ajuste) */
  font-size: 12px; /* Tamanho do texto/ícone (ajuste) */
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.3s ease;
}

#uncode-custom-cursor .title-tooltip > span {
   display: inline-block;
}

/* --- Estados do Cursor (controlados via data-cursor) --- */

/* Estado Padrão (auto) - já definido acima */

/* Estado Ponteiro (links, etc.) */
#uncode-custom-cursor[data-cursor="pointer"] {
  transform: scale(2.2); /* Aumenta um pouco */
  background-color: rgba(0, 221, 166, 0.3); /* Muda cor/opacidade */
}

/* Estado Ícone (requer classes de ícone ou conteúdo no span) */
#uncode-custom-cursor[data-cursor^="icon-"] {
  background-color: transparent; /* Fundo transparente para ícones */
  border: none;
  width: auto; /* Ajusta ao tamanho do ícone/texto */
  height: auto;
}

/* Cores específicas (exemplo) */
#uncode-custom-cursor[data-cursor="icon-light"] .title-tooltip {
  color: #ffffff;
}
#uncode-custom-cursor[data-cursor="icon-dark"] .title-tooltip {
  color: #000000;
}
#uncode-custom-cursor[data-cursor="icon-accent"] .title-tooltip {
  color: #00DDA6; /* Cor de destaque (ajuste) */
}
#uncode-custom-cursor[data-cursor="icon-diff"] .title-tooltip {
   /* Pode usar mix-blend-mode: difference; se suportado/desejado */
   color: #fff; 
}

/* Estado com Tooltip Ativo */
#uncode-custom-cursor[data-title="true"] {
   /* Pode precisar de ajustes de tamanho/padding */
   width: auto;
   height: auto;
   padding: 5px 10px;
   border-radius: 5px; /* Pode mudar de círculo para retângulo arredondado */
}

/* Fundo transparente quando requisitado */
#uncode-custom-cursor[data-bg="transparent"] {
  background-color: transparent;
  border-color: transparent;
}

/* Animação 'boing' (opcional, do script original) */
#uncode-custom-cursor .tooltip-boing {
  animation: boing 0.5s ease-out;
}
@keyframes boing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
}