body {
    font-family: 'Inter', sans-serif;
    background-color: #050816;
    color: #d1d5db;
    overflow-x: hidden;
}

/* Fundo animado gradiente */
.animated-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(-45deg, #f8fbff, #f1f8ff, #fdfeff, #eef7ff);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Animação de flutuação para a seção de início */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Efeito de vidro para cards e header */
.glassmorphism {
    background: rgb(33, 56, 95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Estilo do botão principal */
.btn-primary {
    background-color: #00aaff;
    color: #ffffff;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    border: 1px solid #00aaff;
}

.btn-primary-color {
    background-color: #00aaff;
}

.btn-primary:hover {
    background-color: transparent;
    color: #00aaff;
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.5);
}

/* Efeito de hover nos cards de serviço */
.card-service {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.card-service:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(0, 170, 255, 0.2);
    border-color: rgba(0, 170, 255, 0.3);
}

/* Linha decorativa para títulos de seção */
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #00aaff;
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* Animação de entrada (fade in) */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para o Modal */
.modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tab-button {
border-color: transparent;
color: #6b7280; /* text-gray-500 */
transition: all 0.3s ease;
}
.tab-button:hover {
color: #0891b2; /* um tom de ciano */
border-color: #d1d5db; /* text-gray-300 */
}
.tab-button.active-tab {
color: #00aaff; /* Cor principal do seu site */
border-color: #00aaff; /* Cor principal do seu site */
}
/* Estilo para a barra de rolagem das abas em navegadores WebKit */
.overflow-x-auto::-webkit-scrollbar {
height: 4px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
background-color: #d1d5db;
border-radius: 20px;
}

@layer utilities {
@keyframes float {
0%, 100% {
transform: translateY(0px) translateX(0px);
}
50% {
transform: translateY(-20px) translateX(10px);
}
}

.animate-float {
animation: float 10s ease-in-out infinite;
}
}

/* CSS para padronizar os campos do formulário (versão pura) */
.form-input {
display: block;
width: 100%;
padding: 0.75rem 1rem; /* 12px na vertical, 16px na horizontal */
color: #1f2937; /* Cor do texto digitado (cinza bem escuro) */
background-color: #f1f5f9; /* Fundo do campo (cinza bem claro) */
border: 1px solid #e2e8f0; /* Borda padrão */
border-radius: 0.5rem; /* Cantos arredondados (8px) */
transition: all 300ms ease-out; /* Transição suave para todos os efeitos */
}

/* Estilos quando o campo está em foco (selecionado pelo usuário) */
.form-input:focus {
outline: none; /* Remove a borda de foco padrão do navegador */
border-color: transparent; /* Esconde a borda original para dar lugar ao efeito de anel */
box-shadow: 0 0 0 2px #00aaff; /* Cria um anel ciano ao redor do campo */
}

/* Estilo para o texto de placeholder (ex: "Seu nome completo") */
.form-input::placeholder {
color: #9ca3af; /* Cor do texto de exemplo (cinza médio) */
}
 .fade-in {
            opacity: 0;
            animation: fadeIn 1s ease-in forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
             background: linear-gradient(180deg, #0000006b, #0000005f, #000000b6);
            color: white;
            padding: 1rem;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            text-align: center;
        }
        
        .group:hover .caption {
            transform: translateY(0);
        }
        
        .group {
            position: relative;
            overflow: hidden;
        } 


      

        /* 2. Animação de pulso mais lenta para o título */
        @keyframes pulse-slow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.75; }
        }
        .animate-pulse-slow {
            animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* 3. Efeito de brilho que segue o mouse (NOVO) */
        .cta-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 0.75rem; /* Mesmo valor do rounded-xl do Tailwind */
            /* Gradiente radial que se posiciona com as variáveis --mouse-x e --mouse-y */
            background: radial-gradient(
                350px circle at var(--mouse-x) var(--mouse-y),
                rgba(139, 92, 246, 0.15), /* Roxo sutil, derivado da paleta */
                transparent 80%
            );
            opacity: 0;
            transition: opacity 0.3s linear;
        }
        .cta-card:hover::before {
            opacity: 1; /* Mostra o brilho no hover */
        }