/* ========================================
   ASMARPE CAROUSEL - SISTEMA DE ANIMACIONES
   Solo incluye las 2 animaciones necesarias:
   1. Scroll Continuo
   2. Grupos con Pausa
   ======================================== */

/* Variables CSS configurables (sobrescritas por el shortcode) */
:root {
    --carousel-speed: 30s;
    --carousel-pause: 3s;
    --carousel-spacing: 30px;           /* Espacio entre logos */
    --carousel-transition: 0.3s ease;

    /* Dimensiones del logo (configurables desde WordPress) */
    --logo-display-width: 192px;        /* Ancho del logo */
    --logo-display-width-mobile: 134px; /* 70% del ancho en móvil */

    /* Ancho total de cada slide (logo + spacing) */
    --slide-total-width: calc(var(--logo-display-width) + calc(var(--carousel-spacing) * 2));
}

/* ========================================
   ESTILOS BASE DEL CAROUSEL
   ======================================== */

.asmarpe-carousel-wrapper {
    overflow: hidden;
    padding: 20px 0;
    margin: 0; /* Sin margin horizontal */
    position: relative;
    background: transparent;
    width: 100%;
    pointer-events: none; /* Permitir que los clicks pasen a los elementos internos */
}

.asmarpe-carousel-track {
    display: flex;
    align-items: center;
    position: relative;
    pointer-events: auto; /* Restaurar eventos de puntero */
}

.asmarpe-carousel-slide {
    flex: 0 0 auto;
    padding: 0 var(--carousel-spacing);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Asegurar que los slides sean clickeables */
}

/* Primer slide alineado a la izquierda sin padding izquierdo */
.asmarpe-carousel-slide:first-child {
    padding-left: 0;
}

.asmarpe-carousel-slide img {
    width: var(--logo-display-width);
    height: auto;
    object-fit: contain;
    transition: opacity var(--carousel-transition), transform var(--carousel-transition);
    filter: grayscale(20%) opacity(0.85);
}

.asmarpe-carousel-slide:hover img {
    filter: none;
    transform: scale(1.05);
}

.asmarpe-carousel-slide a {
    display: block;
    transition: transform var(--carousel-transition);
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.asmarpe-carousel-slide a:hover {
    transform: scale(1.02);
}

.asmarpe-carousel-slide a:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 4px;
    border-radius: 4px;
}

/* ========================================
   ANIMACIÓN 1: CONTINUA - CSS PURO
   ======================================== */

.asmarpe-carousel-track {
    width: max-content;
    transition: none; /* Remover transiciones que interfieren */
}

/* Animación CSS pura para scroll continuo */
.asmarpe-carousel--continuous .asmarpe-carousel-track {
    animation: asmarpe-scroll-continuous var(--carousel-speed) linear infinite;
}

@keyframes asmarpe-scroll-continuous {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * var(--original-width))); /* Mover exactamente el ancho original */
    }
}

/* Slides clonados son visualmente idénticos */
.carousel-clone {
    /* Sin estilos especiales, debe ser idéntico */
}

/* Pausar animación en hover */
.asmarpe-carousel-wrapper:hover .asmarpe-carousel-track {
    animation-play-state: paused;
}



/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
    :root {
        --carousel-spacing: 15px;
    }
}

@media (max-width: 768px) {
    :root {
        --carousel-spacing: 20px;

        /* Usar ancho móvil para logos */
        --logo-display-width: var(--logo-display-width-mobile);
        --slide-total-width: calc(var(--logo-display-width) + calc(var(--carousel-spacing) * 2));
    }
}

/* ========================================
   ACCESIBILIDAD Y PERFORMANCE
   ======================================== */

/* Respetar preferencias de usuario sobre movimiento */
@media (prefers-reduced-motion: reduce) {
    .asmarpe-carousel-wrapper * {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }

    .asmarpe-carousel--fade .asmarpe-carousel-slide {
        opacity: 1;
        position: relative;
    }
}

/* Optimización para performance */
.asmarpe-carousel-track {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.asmarpe-carousel-slide {
    will-change: opacity, transform;
}

/* Focus visible para navegación por teclado */
.asmarpe-carousel-slide a:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Pausa automática en focus para accesibilidad */
.asmarpe-carousel-wrapper:focus-within .asmarpe-carousel-track {
    animation-play-state: paused;
}