/* ===================================
   MAPPIN GROUP - GRADIENT DUOTONE ICONS
   Iconos modernos con gradientes y profundidad
   =================================== */

/* Icon Containers */
.badge-icon,
.card-icon,
.feature-icon,
.bento-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Glow Effects */
.badge-icon svg,
.card-icon svg {
    filter: drop-shadow(0 4px 12px rgba(8, 145, 178, 0.25));
    transition: all 0.3s ease;
}

.floating-card:hover .card-icon svg {
    filter: drop-shadow(0 6px 20px rgba(8, 145, 178, 0.4));
    transform: scale(1.1);
}

/* Bento Icons - Larger with stronger glow */
.bento-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
    border-radius: 16px;
    padding: 12px;
    transition: all 0.4s ease;
}

.bento-item:hover .bento-icon {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.15) 0%, rgba(14, 165, 233, 0.1) 100%);
    transform: translateY(-4px);
}

.bento-icon svg {
    filter: drop-shadow(0 8px 16px rgba(14, 165, 233, 0.3));
}

.bento-item:hover .bento-icon svg {
    filter: drop-shadow(0 12px 24px rgba(14, 165, 233, 0.5));
}

/* Feature Icons in Ecosystem Cards */
.feature-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(14, 165, 233, 0.05) 100%);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.ecosystem-card:hover .feature-icon {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
    transform: scale(1.05);
}

.feature-icon svg {
    filter: drop-shadow(0 4px 8px rgba(8, 145, 178, 0.25));
}

/* Problem/Solution Icons */
.problem-icon svg,
.solution-icon svg {
    filter: drop-shadow(0 8px 16px currentColor);
    opacity: 0.9;
}

.comparison-card:hover .problem-icon svg,
.comparison-card:hover .solution-icon svg {
    transform: scale(1.1);
    opacity: 1;
}

/* Pulse Animation for Hero Badge */
@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.badge-icon svg {
    animation: iconPulse 3s ease-in-out infinite;
}