/* PROFESSIONAL ICONS - ENTERPRISE DESIGN */

/* ===== ICONOS DE SERVICIOS PROFESIONALES ===== */
.service-icon.development::before {
    content: "⚡";
    font-size: 2rem;
    color: white;
}

.service-icon.crm::before {
    content: "📊";
    font-size: 2rem;
    color: white;
}

.service-icon.mobile::before {
    content: "📱";
    font-size: 2rem;
    color: white;
}

.service-icon.ecommerce::before {
    content: "🛒";
    font-size: 2rem;
    color: white;
}

.service-icon.database::before {
    content: "🗄️";
    font-size: 2rem;
    color: white;
}

.service-icon.integration::before {
    content: "🔗";
    font-size: 2rem;
    color: white;
}

/* ===== ICONOS DE EXPERTISE PROFESIONALES ===== */
.expertise-icon.fullstack::before {
    content: "💻";
    font-size: 1.8rem;
    color: white;
}

.expertise-icon.backend::before {
    content: "⚙️";
    font-size: 1.8rem;
    color: white;
}

.expertise-icon.frontend::before {
    content: "🎨";
    font-size: 1.8rem;
    color: white;
}

.expertise-icon.database::before {
    content: "📊";
    font-size: 1.8rem;
    color: white;
}

.expertise-icon.mobile::before {
    content: "📱";
    font-size: 1.8rem;
    color: white;
}

.expertise-icon.cloud::before {
    content: "☁️";
    font-size: 1.8rem;
    color: white;
}

.expertise-icon.architecture::before {
    content: "🏗️";
    font-size: 1.8rem;
    color: white;
}

.expertise-icon.devops::before {
    content: "🔧";
    font-size: 1.8rem;
    color: white;
}

/* ===== OVERRIDES PARA ICONOS EXISTENTES ===== */
.service-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.service-icon i {
    display: none !important;
}

.expertise-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.expertise-icon i {
    display: none !important;
}

/* ===== ICONOS PARA BOTONES Y ENLACES ===== */
.hero-actions .btn-primary::before {
    content: "💼";
    margin-right: 0.5rem;
}

.hero-actions .btn-secondary::before {
    content: "📞";
    margin-right: 0.5rem;
}

.cta-actions .btn-primary::before {
    content: "🚀";
    margin-right: 0.5rem;
}

.service-link::after {
    content: "→";
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.service-link:hover::after {
    transform: translateX(3px);
}

/* ===== ICONOS PARA SCROLL ===== */
.scroll-indicator::before {
    content: "⌄";
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}