/* Carrusel de Animaciones - Chuis Custom Blocks */
.chuis-anim {
    --accent: #fff;
    
    /* Variables para flechas de navegación por breakpoint */
    --arrow-container-width: 20px;
    --arrow-container-height: 40px;
    --arrow-border-h: 4px;  /* altura del triángulo */
    --arrow-border-w: 7px;  /* ancho del triángulo */
    --arrow-edge-distance: 1px;  /* distancia de las flechas al borde */
    
    position: relative;
    width: 100%;
    max-width: 100%;
    /* Eliminar min-height que causaba problemas de tamaño */
}

.chuis-anim__viewport {
    overflow: hidden;
    width: 100%;
    aspect-ratio: var(--ratio-w, 1280) / var(--ratio-h, 356);
}

.chuis-anim__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Ocultar barras de desplazamiento */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Ocultar scrollbar en WebKit browsers */
.chuis-anim__track::-webkit-scrollbar {
    display: none;
}

.chuis-anim__slide {
    position: relative;
    scroll-snap-align: start;
    aspect-ratio: var(--ratio-w, 1280) / var(--ratio-h, 356);
    width: 100%;
    min-width: 100%;
    background-color: #f5f5f5; /* Fondo de carga */
}

.chuis-anim__video,
.chuis-anim__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* Controles de navegación */
.chuis-anim__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--arrow-container-width);
    height: var(--arrow-container-height);
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

/* Resetear estilos del tema que puedan interferir */
.chuis-anim__nav:hover {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
}

.chuis-anim__nav:focus {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

.chuis-anim__nav:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

.chuis-anim__prev {
    left: var(--arrow-edge-distance);
}

.chuis-anim__next {
    right: var(--arrow-edge-distance);
}

/* Flechas de navegación */
.chuis-anim__prev::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--arrow-border-h) var(--arrow-border-w) var(--arrow-border-h) 0;
    border-color: transparent rgba(255, 255, 255, 0.7) transparent transparent;
    transition: border-color 0.2s ease;
}

.chuis-anim__prev:hover::before {
    border-color: transparent rgba(255, 255, 255, 1) transparent transparent;
}

.chuis-anim__next::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--arrow-border-h) 0 var(--arrow-border-h) var(--arrow-border-w);
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
    transition: border-color 0.2s ease;
}

.chuis-anim__next:hover::before {
    border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

/* Paginación (dots) */
.chuis-anim__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.chuis-anim__dots button {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    padding: 0;
}

.chuis-anim__dots button:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.1);
}

.chuis-anim__dots button[aria-current="true"] {
    background: var(--accent);
    transform: scale(1.4);
}

.chuis-anim__dots button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Breakpoints responsive */
@media (min-width: 40em) { /* medium */
    .chuis-anim {
        --arrow-container-width: 18px;
        --arrow-container-height: 36px;
        --arrow-border-h: 7px;
        --arrow-border-w: 9px;
        --arrow-edge-distance: 9px;
    }
    
    .chuis-anim__dots {
        bottom: 1.2rem;
        gap: 0.8rem;
    }
    
    .chuis-anim__dots button {
        width: 12px;
        height: 12px;
    }
    
    .chuis-anim__dots button[aria-current="true"] {
        transform: scale(1.3);
    }
}

@media (min-width: 64em) { /* large */
    .chuis-anim {
        --arrow-container-width: 16px;
        --arrow-container-height: 32px;
        --arrow-border-h: 8px;
        --arrow-border-w: 10px;
        --arrow-edge-distance: 10px;
    }
    
    .chuis-anim__dots {
        bottom: 1.4rem;
        gap: 0.7rem;
    }
    
    .chuis-anim__dots button {
        width: 11px;
        height: 11px;
    }
    
    .chuis-anim__dots button[aria-current="true"] {
        transform: scale(1.25);
    }
}

@media (min-width: 75em) { /* xlarge (mi Desk) */
    .chuis-anim {
        --arrow-container-width: 18px;
        --arrow-container-height: 36px;
        --arrow-border-h: 9px;
        --arrow-border-w: 11px;
        --arrow-edge-distance: 11px;
    }
    
    .chuis-anim__dots {
        bottom: 1.6rem;
        gap: 0.6rem;
    }
    
    .chuis-anim__dots button {
        width: 10px;
        height: 10px;
    }
    
    .chuis-anim__dots button[aria-current="true"] {
        transform: scale(1.2);
    }
}

/* Soporte para prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .chuis-anim__track {
        scroll-behavior: auto;
    }
    
    .chuis-anim__nav,
    .chuis-anim__dots button {
        transition: none;
    }
}

/* Estados de carga y fallback */
.chuis-anim__video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chuis-anim__video[data-loaded] img {
    display: none !important;
}

/* Ocultar controles si solo hay un slide */
.chuis-anim:has(.chuis-anim__slide:only-child) .chuis-anim__nav,
.chuis-anim:has(.chuis-anim__slide:only-child) .chuis-anim__dots {
    display: none;
}