/* ========================================
   SERVICES CAROUSEL - Mobile Only
   Carrusel horizontal con temática espacial
   ======================================== */

/* Ocultar por defecto (desktop usa grid normal) */
.services-carousel-container {
    display: none;
}

/* Activar solo en móvil */
@media (max-width: 767px) {
    /* Ocultar grid original en móvil */
    .services-grid {
        display: none !important;
    }

    /* Mostrar carrusel en móvil */
    .services-carousel-container {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 2rem 0 3rem;
        background: transparent;
    }

    /* Contenedor del carrusel con efecto espacial */
    .services-carousel {
        position: relative;
        width: 100%;
        height: 520px;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1200px;
    }

    /* Wrapper de las tarjetas */
    .services-carousel-track {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Tarjeta individual del carrusel */
    .service-card-carousel {
        position: absolute;
        width: 85%;
        max-width: 340px;
        background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(249, 250, 251, 0.98) 100%);
        padding: 2rem 1.5rem;
        border-radius: 20px;
        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.12),
            0 0 0 1px rgba(139, 92, 246, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 0;
        pointer-events: none;
        transform-origin: center center;
        border: 1px solid rgba(139, 92, 246, 0.12);
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Tarjeta activa (centro) */
    .service-card-carousel.active {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        z-index: 10;
        pointer-events: auto;
        filter: none;
        box-shadow:
            0 30px 80px rgba(99, 102, 241, 0.2),
            0 0 0 1px rgba(139, 92, 246, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    /* Tarjeta siguiente (derecha) - sin filter para mejor rendimiento en iOS */
    .service-card-carousel.next {
        opacity: 0.35;
        transform: translate3d(70%, 0, 0) scale(0.88);
        z-index: 5;
    }

    /* Tarjeta anterior (izquierda) - sin filter para mejor rendimiento en iOS */
    .service-card-carousel.prev {
        opacity: 0.35;
        transform: translate3d(-70%, 0, 0) scale(0.88);
        z-index: 5;
    }

    /* Tarjetas ocultas - sin filter para mejor rendimiento en iOS */
    .service-card-carousel.hidden {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.75);
        z-index: 1;
    }

    /* Estilos internos de la tarjeta */
    .service-card-carousel .service-icon {
        width: 64px;
        height: 64px;
        background: white;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.25rem;
        color: white;
        box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .service-card-carousel.active .service-icon {
        animation: float-icon 3s ease-in-out infinite;
    }

    @keyframes float-icon {
        0%, 100% {
            transform: translateY(0px) translateZ(0);
        }
        50% {
            transform: translateY(-8px) translateZ(0);
        }
    }

    .service-card-carousel .service-title {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 0.75rem;
        text-align: center;
        line-height: 1.3;
    }

    .service-card-carousel .service-description {
        font-size: 0.9375rem;
        color: #666666;
        line-height: 1.6;
        margin-bottom: 1rem;
        text-align: center;
    }

    .service-card-carousel .service-benefits {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .service-card-carousel .service-benefits li {
        font-size: 0.875rem;
        color: #555555;
        padding: 0.5rem 0 0.5rem 1.75rem;
        position: relative;
        line-height: 1.5;
    }

    .service-card-carousel .service-benefits li::before {
        content: '✨';
        position: absolute;
        left: 0;
        top: 0.5rem;
        font-size: 1rem;
    }

    /* Indicadores de navegación */
    .carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
        position: relative;
        z-index: 15;
    }

    .carousel-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(139, 92, 246, 0.25);
        border: 2px solid rgba(139, 92, 246, 0.35);
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .carousel-indicator.active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        transform: scale(1.25);
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
        border-color: #6366f1;
    }

    .carousel-indicator.active::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid rgba(139, 92, 246, 0.25);
        animation: pulse-indicator 2.5s ease-in-out infinite;
    }

    @keyframes pulse-indicator {
        0%, 100% {
            transform: scale(1);
            opacity: 0.8;
        }
        50% {
            transform: scale(1.4);
            opacity: 0;
        }
    }

    /* Botones de navegación */
    .carousel-nav-btn {
        position: absolute;
        top: 50%;
        transform: translate3d(0, -50%, 0);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        border: 2px solid rgba(255, 255, 255, 0.95);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 20;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.2s ease;
        box-shadow:
            0 4px 16px rgba(99, 102, 241, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.15);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .carousel-nav-btn:hover {
        transform: translate3d(0, -50%, 0) scale(1.05);
        box-shadow:
            0 6px 20px rgba(99, 102, 241, 0.45),
            0 3px 10px rgba(0, 0, 0, 0.2);
    }

    .carousel-nav-btn:active {
        transform: translate3d(0, -50%, 0) scale(0.95);
        box-shadow:
            0 3px 12px rgba(99, 102, 241, 0.4),
            0 1px 6px rgba(0, 0, 0, 0.15);
    }

    .carousel-nav-btn.prev-btn {
        left: 12px;
    }

    .carousel-nav-btn.next-btn {
        right: 12px;
    }

    .carousel-nav-btn svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.5;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    }

    /* Efecto de partículas espaciales en el fondo */
    .carousel-space-particles {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 1;
    }

    .space-particle {
        position: absolute;
        width: 2px;
        height: 2px;
        background: rgba(139, 92, 246, 0.6);
        border-radius: 50%;
        animation: float-particle linear infinite;
    }

    @keyframes float-particle {
        0% {
            transform: translateY(0) translateX(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-100vh) translateX(50px);
            opacity: 0;
        }
    }

    /* Animación de entrada inicial */
    @keyframes slideInCarousel {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .services-carousel-container {
        animation: slideInCarousel 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
    }

    /* Optimización de rendimiento */
    .service-card-carousel,
    .carousel-nav-btn,
    .carousel-indicator {
        will-change: transform, opacity;
    }

    .service-card-carousel {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Ajustes para pantallas muy pequeñas */
    @media (max-width: 360px) {
        .services-carousel {
            height: 540px;
        }

        .service-card-carousel {
            width: 90%;
            padding: 1.5rem 1.25rem;
        }

        .service-card-carousel .service-title {
            font-size: 1.125rem;
        }

        .service-card-carousel .service-description {
            font-size: 0.875rem;
        }
    }
}

/* Desktop mantiene el grid original */
@media (min-width: 768px) {
    .services-carousel-container {
        display: none !important;
    }
}