/* 
🎨 INFRAWATCH - STYLE GUIDE
📋 Cores Principais:
- iw-primary: #4A8888 (Verde-azulado)
- iw-secondary: #D8D3C4 (Bege/cinza claro)  
- iw-accent: #FBBF24 (Amarelo para CTAs)
*/

/* 🎯 CONFIGURAÇÕES GLOBAIS */
body { 
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 🌈 GRADIENTES */
.gradient-bg {
    background: linear-gradient(135deg, #4A8888 0%, #387070 100%);
}

.dark .gradient-bg {
    background: linear-gradient(135deg, #2D5F5F 0%, #1E4A4A 100%);
}

/* 🃏 CARDS DE SERVIÇOS */
.tech-card { 
    transition: all 0.3s ease; 
}
.tech-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
}

.dark .tech-card {
    background: #374151;
    border-color: #4A8888;
    color: #E5E7EB;
}

.dark .tech-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* 👥 CARDS DA EQUIPE - ANIMAÇÃO FLIP */
.team-card {
    perspective: 1000px;
    height: 300px;
}

.team-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.team-card:hover .team-card-inner {
    transform: rotateY(180deg);
}

.team-card-front,
.team-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
}

.team-card-back {
    background: linear-gradient(135deg, #4A8888 0%, #387070 100%);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ✨ ANIMAÇÕES */
.floating-animation { 
    animation: float 6s ease-in-out infinite; 
}

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

.fade-in { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.6s ease; 
}

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

/* 📏 ESPAÇAMENTOS */
.pt-safe { 
    padding-top: 70px; 
}

/* 🎭 TRANSIÇÕES SUAVES */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 🌙 TEMA ESCURO */
.dark body {
    background-color: #111827;
    color: #E5E7EB;
}

.dark .bg-white {
    background-color: #1F2937;
}

.dark .bg-gray-50 {
    background-color: #111827;
}

.dark .bg-gray-100 {
    background-color: #1F2937;
}

.dark .text-gray-800 {
    color: #F9FAFB;
}

.dark .text-gray-600 {
    color: #D1D5DB;
}

.dark .text-gray-700 {
    color: #E5E7EB;
}

.dark .border-gray-300 {
    border-color: #4B5563;
}

.dark .shadow-lg {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* 🎪 HEADER */
header {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

.dark header {
    background-color: rgba(17, 24, 39, 0.95);
    border-bottom: 1px solid #374151;
}

/* 📝 FORMULÁRIOS */
.dark input,
.dark select,
.dark textarea {
    background-color: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #9CA3AF;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    background-color: #374151;
    border-color: #4A8888;
}

/* 🦶 FOOTER */
.dark footer {
    background-color: #111827;
    border-top: 1px solid #374151;
}

.dark .border-gray-800 {
    border-color: #374151;
}

/* 🎮 BOTÃO TEMA */
#theme-toggle {
    opacity: 0.8;
    transition: all 0.3s ease;
}

#theme-toggle:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* 📜 SCROLL SUAVE */
html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 70px;
}

/* 🎯 DESTAQUE NO SCROLL */
.scroll-target {
    animation: highlight 2s ease;
}

@keyframes highlight {
    0% {
        background-color: transparent;
    }
    20% {
        background-color: rgba(74, 136, 136, 0.1);
    }
    100% {
        background-color: transparent;
    }
}