/* Custom styles and animations to complement Tailwind */
:root {
    --brand-midnight: #F8FAFC;
    --brand-yellow: #FACC15;
    --brand-dark: #1F2937;
    --brand-text: #111827;
}

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Outfit', sans-serif;
}

/* Icon Animations */
@keyframes draw {
    to { stroke-dashoffset: 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-16px) scale(1.1); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
}

@keyframes colorShift {
    0% { stroke: #CBD5E1; }     /* Gris original */
    33% { stroke: #e2e8f0; }    /* Gris más claro */
    66% { stroke: #D4AF37; }    /* Dorado */
    100% { stroke: #CBD5E1; }
}

@keyframes grow {
    from { transform: scaleY(0); transform-origin: bottom; }
    to { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-draw {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw 2s ease-out forwards;
}

.group:hover .icon-marketing .bar-1 { animation: grow 0.6s ease-out forwards 0.1s; }
.group:hover .icon-marketing .bar-2 { animation: grow 0.6s ease-out forwards 0.3s; }
.group:hover .icon-marketing .bar-3 { animation: grow 0.6s ease-out forwards 0.5s; }

.group:hover .icon-branding .path-draw { 
    stroke-dasharray: 200; 
    stroke-dashoffset: 200; 
    animation: draw 1.5s ease-out forwards; 
}

.group:hover .icon-design .shape-float { animation: float 3s ease-in-out infinite; }
.group:hover .icon-design .shape-rotate { animation: rotate-slow 10s linear infinite; }

.group:hover .icon-web .cursor-blink { animation: blink 1s step-end infinite; }
.group:hover .icon-web .tag-move { animation: float 2s ease-in-out infinite; }

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--brand-midnight);
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-yellow);
}

/* Gradients & Backgrounds */
.bg-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Smooth reveal animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Hover effects for cards */
.service-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}