/* styles.css
  Este arquivo contém apenas estilos que NÃO PODEM ser feitos com classes
  de utilidade do Tailwind, como animações @keyframes.
*/

/* Efeito de Fundo: Brilho de Pulsação Lento */
.glow-effect {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 1000px;
    transform: translate(-50%, -50%);
    z-index: -10;
    pointer-events: none;
    background-image: radial-gradient(
        circle at center,
        rgba(0, 240, 255, 0.15), /* Ciano */
        rgba(0, 255, 135, 0.1),  /* Verde */
        transparent 60%
    );
    filter: blur(100px);
    animation: pulse 10s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; }
}

/* Efeito para a seção "Como Funciona" */
.como-funciona-card {
    /* Garante que o número absoluto fique contido */
    position: relative; 
    overflow: hidden; /* Esconde qualquer transbordamento do número grande */
}

.como-funciona-number {
    /* Posição inicial, transparente e grande */
    position: fixed;
    top: 1rem; /* Ajuste conforme necessário */
    right: 1.5rem; /* Ajuste conforme necessário */
    font-size: 4rem; /* Tamanho inicial (64px) */
    font-weight: 800; /* Extra bold */
    color: rgba(107, 114, 128, 0.3); /* gray-700 com 30% de opacidade */
    transition: all 0.3s ease-in-out;
    pointer-events: none; /* Garante que não interfira com cliques nos outros elementos */
    z-index: 5; /* Garante que fique acima do conteúdo, mas atrás dos ícones/título */
}

/* Estado hover */
.como-funciona-card:hover .como-funciona-number {
    color: #22d3ee; /* cyan-400 */
    transform: scale(1.1); /* Aumenta o número */
}