/* ===== MÓVILE OPTIMIZATION ===== */

/* Touch-optimized hover states */
@media (hover: none) and (pointer: coarse) {
    .link-item:active {
        transform: translateX(2px) scale(0.98);
        background: var(--gray-100);
        transition: transform 0.1s ease;
    }
    
    .link-item:active .link-icon {
        background: var(--primary-green);
        color: var(--white);
        transform: scale(1.05);
        transition: all 0.1s ease;
    }
    
    .social-link:active {
        transform: translateY(-1px) scale(0.95);
        background: var(--primary-green);
        color: var(--white);
        transition: all 0.1s ease;
    }
    
    .badge:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* Ajustes específicos para iOS */
@supports (-webkit-touch-callout: none) {
    .link-item {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .social-link {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    .logo {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Ajustes para Android */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .link-item {
        -webkit-tap-highlight-color: rgba(16, 57, 84, 0.1);
    }
}

/* Forzar hardware acceleration en móviles */
.link-item,
.logo,
.social-link {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
}

/* Optimización de scroll en móviles */
.mobile-device {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Reducir animaciones en móviles de gama baja */
@media (max-width: 480px) and (max-height: 700px) {
    .animated-bg .bg-bubble {
        animation-duration: 60s;
        opacity: 0.05;
    }
    
    .hero-card,
    .link-item {
        transition: all 0.2s ease;
    }
    
    .logo {
        transition: transform 0.2s ease;
    }
}