/* ============================================
   SWIPEABLE CARDS - APPLE STYLE
   Carrusel horizontal deslizable estilo Apple
   ============================================ */

/* Desktop: Mantener grid normal */
@media (min-width: 769px) {
    .elia-features-grid {
        /* Mantener estilos existentes del grid en desktop */
    }

    .swipe-indicators {
        display: none;
    }
}

/* Mobile: Activar carrusel deslizable */
@media (max-width: 768px) {
    /* Contenedor principal del carrusel */
    .elia-features-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 0 0 40px 0;
    }

    /* Grid transformado en carrusel horizontal */
    .elia-features-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 16px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 24px 20px 24px;
        margin: 0;
    }

    /* Ocultar scrollbar */
    .elia-features-grid::-webkit-scrollbar {
        display: none;
    }

    /* Tarjetas individuales */
    .elia-features-grid .elia-feature {
        flex: 0 0 calc(85vw - 32px);
        min-width: calc(85vw - 32px);
        max-width: 360px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        aspect-ratio: 1 !important;
        margin: 0;
    }

    /* Primera tarjeta: padding especial */
    .elia-features-grid .elia-feature:first-child {
        margin-left: 0;
    }

    /* Última tarjeta: padding especial */
    .elia-features-grid .elia-feature:last-child {
        margin-right: 0;
    }

    /* Gradiente izquierdo - indica más contenido */
    .elia-features-wrapper::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 40px;
        width: 40px;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 50%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Gradiente derecho - indica más contenido */
    .elia-features-wrapper::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 40px;
        width: 40px;
        background: linear-gradient(
            to left,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 50%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 10;
        transition: opacity 0.3s ease;
    }

    /* Mostrar gradientes cuando hay scroll */
    .elia-features-wrapper.can-scroll-left::before {
        opacity: 1;
    }

    .elia-features-wrapper.can-scroll-right::after {
        opacity: 1;
    }

    /* Indicadores de paginación estilo Apple */
    .swipe-indicators {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 16px 0 0 0;
        position: relative;
        z-index: 5;
    }

    .swipe-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        border: none;
        padding: 0;
        position: relative;
    }

    /* Dot activo */
    .swipe-dot.active {
        background: rgba(255, 160, 64, 0.9);
        transform: scale(1.25);
        box-shadow: 0 0 8px rgba(255, 160, 64, 0.4);
    }

    /* Animación al hacer tap */
    .swipe-dot:active {
        transform: scale(0.9);
    }

    .swipe-dot.active:active {
        transform: scale(1.15);
    }

    /* Mejoras de rendimiento */
    .elia-features-grid,
    .elia-feature {
        will-change: transform;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Tablets y pantallas medianas */
@media (max-width: 968px) and (min-width: 769px) {
    .swipe-indicators {
        display: none;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .elia-features-grid .elia-feature {
        flex: 0 0 calc(90vw - 32px);
        min-width: calc(90vw - 32px);
    }

    .elia-features-grid {
        padding: 0 16px 20px 16px;
    }

    .swipe-dot {
        width: 7px;
        height: 7px;
    }

    .swipe-indicators {
        gap: 6px;
        padding: 12px 0 0 0;
    }
}

/* Modo landscape en móviles */
@media (max-width: 968px) and (orientation: landscape) {
    .elia-features-grid .elia-feature {
        flex: 0 0 calc(60vw - 32px);
        min-width: calc(60vw - 32px);
        aspect-ratio: 1.2 !important;
    }

    .elia-feature {
        padding: 20px !important;
    }

    .elia-feature h4 {
        font-size: 17px !important;
    }

    .elia-feature p {
        font-size: 14px !important;
    }
}

/* Animaciones suaves para iOS */
@supports (-webkit-touch-callout: none) {
    .elia-features-grid {
        scroll-snap-type: x mandatory;
        -webkit-scroll-snap-type: x mandatory;
    }

    .elia-features-grid .elia-feature {
        scroll-snap-align: center;
        -webkit-scroll-snap-align: center;
    }
}

/* Estados de hover desactivados en touch devices */
@media (hover: none) and (pointer: coarse) {
    .elia-feature:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .elia-feature:active {
        opacity: 0.95;
        transition: opacity 0.1s ease;
    }
}

/* ============================================
   PROCESS SECTION SWIPEABLE CARDS
   ============================================ */

/* Desktop: Mantener diseño normal */
@media (min-width: 769px) {
    .process-wrapper .swipe-indicators {
        display: none;
    }
}

/* Mobile: Activar carrusel deslizable para Process */
@media (max-width: 768px) {
    /* Contenedor principal del carrusel Process */
    .process-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 0 0 40px 0;
    }

    /* Stack container transformado en carrusel horizontal */
    .process-steps.stack-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 24px 20px 24px;
        margin: 0;
        transform: none !important;
    }

    /* Ocultar scrollbar */
    .process-steps.stack-container::-webkit-scrollbar {
        display: none;
    }

    /* Tarjetas individuales de proceso */
    .process-steps .step.card {
        flex: 0 0 calc(85vw - 32px);
        min-width: calc(85vw - 32px);
        max-width: 360px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        margin: 0 !important;
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Primera tarjeta */
    .process-steps .step.card:first-child {
        margin-left: 0;
    }

    /* Última tarjeta */
    .process-steps .step.card:last-child {
        margin-right: 0;
    }

    /* Gradiente izquierdo - indica más contenido */
    .process-wrapper::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 40px;
        width: 40px;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 50%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Gradiente derecho - indica más contenido */
    .process-wrapper::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 40px;
        width: 40px;
        background: linear-gradient(
            to left,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.7) 50%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 10;
        transition: opacity 0.3s ease;
    }

    /* Mostrar gradientes cuando hay scroll */
    .process-wrapper.can-scroll-left::before {
        opacity: 1;
    }

    .process-wrapper.can-scroll-right::after {
        opacity: 1;
    }

    /* Mejoras de rendimiento */
    .process-steps.stack-container,
    .process-steps .step.card {
        will-change: transform;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Móviles pequeños - Process */
@media (max-width: 480px) {
    .process-steps .step.card {
        flex: 0 0 calc(90vw - 32px);
        min-width: calc(90vw - 32px);
    }

    .process-steps.stack-container {
        padding: 0 16px 20px 16px;
    }
}

/* Modo landscape en móviles - Process */
@media (max-width: 968px) and (orientation: landscape) {
    .process-steps .step.card {
        flex: 0 0 calc(70vw - 32px);
        min-width: calc(70vw - 32px);
    }

    .process-steps .step.card h3 {
        font-size: 18px !important;
    }

    .process-steps .step.card p {
        font-size: 14px !important;
    }
}

/* Animaciones suaves para iOS - Process */
@supports (-webkit-touch-callout: none) {
    .process-steps.stack-container {
        scroll-snap-type: x mandatory;
        -webkit-scroll-snap-type: x mandatory;
    }

    .process-steps .step.card {
        scroll-snap-align: center;
        -webkit-scroll-snap-align: center;
    }
}

/* Estados de hover desactivados en touch devices - Process */
@media (hover: none) and (pointer: coarse) {
    .process-steps .step.card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .process-steps .step.card:active {
        opacity: 0.95;
        transition: opacity 0.1s ease;
    }
}