/**
 * Touch Interactions CSS
 * Mejora la experiencia UI en dispositivos móviles y tablets
 * 
 * @description Estilos específicos para dispositivos touch que reemplazan
 *              interacciones hover con alternativas táctiles
 */

/* ============================================
   TOUCH DEVICE DETECTION
   ============================================ */

/**
 * Media query para detectar dispositivos touch
 * - hover: none = No tiene capacidad hover (touch)
 * - pointer: coarse = Puntero impreciso (dedo)
 */
@media (hover: none) and (pointer: coarse) {
    
    /* ============================================
       IMÁGENES - Remover Grayscale
       ============================================ */
    
    /**
     * En mobile, mostrar imágenes a color por defecto
     * Desktop mantiene grayscale hasta hover
     */
    .img-hover,
    .grayscale {
        filter: grayscale(0) !important;
        opacity: 1 !important;
    }
    
    /* ============================================
       OVERLAYS Y CONTENIDO OCULTO
       ============================================ */
    
    /**
     * Mostrar overlays y texto descriptivo por defecto
     * En desktop solo se muestra con hover
     */
    .group .group-hover\:opacity-100 {
        opacity: 1 !important;
    }
    
    /**
     * Mostrar subtítulos y descripciones
     */
    .md\:opacity-0 {
        opacity: 1 !important;
    }
    
    /* ============================================
       TRANSFORMACIONES Y POSICIONAMIENTO
       ============================================ */
    
    /**
     * Resetear transformaciones que dependen de hover
     * Mostrar en posición final por defecto
     */
    .md\:translate-y-4 {
        transform: translateY(0) !important;
    }
    
    /* ============================================
       CARDS Y ELEMENTOS INTERACTIVOS
       ============================================ */
    
    /**
     * Estado activo para cards al tocar
     * Se activa con JavaScript
     */
    .card-hover.touch-active {
        transform: translateY(-8px);
        border-color: rgba(234, 179, 8, 0.5);
        background-color: rgba(0, 0, 0, 1);
        transition: all 0.3s ease;
    }
    
    /**
     * Iconos dentro de cards activos
     */
    .card-hover.touch-active i {
        color: rgb(234, 179, 8);
        transform: scale(1.1);
    }
    
    /**
     * Imágenes dentro de grupos activos
     */
    .group.touch-active .img-hover {
        transform: scale(1.05);
        filter: grayscale(0);
        opacity: 1;
    }
    
    /* ============================================
       TOUCH TARGETS - Áreas táctiles
       ============================================ */
    
    /**
     * Asegurar que elementos táctiles tengan tamaño mínimo
     * Recomendación: 44x44px mínimo
     */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
    
    /**
     * Padding extra para mejorar área táctil
     */
    .touch-target-padding {
        padding: 12px;
    }
    
    /* ============================================
       ANIMACIONES DE ENTRADA
       ============================================ */
    
    /**
     * Animación cuando elemento entra en viewport
     * Activado por Intersection Observer
     */
    .in-view {
        animation: fadeInScale 0.6s ease-out forwards;
    }
    
    @keyframes fadeInScale {
        from {
            opacity: 0.6;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    /**
     * Variante con slide desde abajo
     */
    .in-view-slide {
        animation: slideInUp 0.6s ease-out forwards;
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* ============================================
       FEEDBACK VISUAL
       ============================================ */
    
    /**
     * Efecto de tap - feedback inmediato
     */
    .tap-feedback {
        position: relative;
    }
    
    .tap-feedback::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(234, 179, 8, 0.1);
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
    }
    
    .tap-feedback.tapped::after {
        opacity: 1;
    }
    
    /* ============================================
       PROJECT GRID ESPECÍFICO
       ============================================ */
    
    /**
     * Grid de proyectos - mostrar info por defecto
     */
    [data-category] .absolute {
        transform: translateY(0) !important;
    }
    
    [data-category] img {
        filter: grayscale(0) !important;
        opacity: 1 !important;
    }
    
    /* ============================================
       SERVICES CARDS ESPECÍFICO
       ============================================ */
    
    /**
     * Cards de servicios - bordes visibles
     */
    .bg-secondary {
        border-color: rgba(234, 179, 8, 0.2) !important;
    }
    
    /**
     * Image strips - color por defecto
     */
    .opacity-60 {
        opacity: 1 !important;
    }
    
    /* ============================================
       HERO SECTION ESPECÍFICO
       ============================================ */
    
    /**
     * Feature cards en hero - bordes sutiles
     */
    .border-white\/10 {
        border-color: rgba(234, 179, 8, 0.3) !important;
    }
    
    /* ============================================
       OPTIMIZACIONES DE RENDIMIENTO
       ============================================ */
    
    /**
     * Usar GPU para animaciones suaves
     */
    .card-hover,
    .img-hover,
    .group {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /**
     * Reducir motion para usuarios con preferencias
     */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ============================================
   TABLET ESPECÍFICO (820px - 1023px)
   ============================================ */

@media (hover: none) and (pointer: coarse) and (min-width: 820px) and (max-width: 1023px) {
    
    /**
     * En tablets, mantener algunos efectos hover
     * pero con activación táctil
     */
    .card-hover {
        transition: all 0.3s ease;
    }
    
    /**
     * Espaciado optimizado para tablets
     */
    .touch-target {
        min-height: 48px;
        min-width: 48px;
    }
}

/* ============================================
   UTILIDADES GENERALES
   ============================================ */

/**
 * Clase para deshabilitar selección de texto
 * Útil en elementos interactivos
 */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/**
 * Clase para smooth scroll en touch
 */
.touch-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/**
 * Prevenir zoom en inputs (iOS)
 */
@media (hover: none) and (pointer: coarse) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        font-size: 16px !important;
    }
}