/* Estilos críticos para forzar la visualización tipo Reel/Short */
/* FIX: No usar display:block en li directo, dejar que flexslider lo maneje */
.c-reel .flexslider .slides > li.c-reel__item {
    margin-right: 15px; /* Sincronizar con itemMargin JS */
}

.c-reel__wrapper {
    height: 480px; 
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #000;
    cursor: pointer; /* Indicar que es clicable */
}

/* IMPORTANTE: Capa mágica */
/* Desactivamos eventos de ratón en el iframe del carrusel para que el clic lo capture el wrapper */
.c-reel__wrapper iframe {
    pointer-events: none; 
}

/* En el modal, reactivamos los eventos para que puedan pausar/controlar el video */
.c-reel-modal-content iframe {
    pointer-events: auto;
}

/* Ocultar flechas de navegación cuando no son necesarias (Flexslider añade la clase disabled) */
.flex-direction-nav .flex-disabled {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Modificacion Navegacion Flexslider (Lista) */
/* Dar espacio a los lados para las flechas */
.c-reel .flexslider {
    padding: 0 40px; 
    box-sizing: border-box;
}

/* Sacar las flechas fuera del contenido (viewport) y posicionarlas en el padding */
.c-reel .flex-direction-nav a {
    opacity: 1 !important; /* Forzar visibilidad siempre */
    height: auto; /* Ajuste automático altura */
    top: 45%; /* Ajuste fino centrado */
    font-size: 0; /* Ocultar texto "Previous"/"Next" */
    overflow: visible;
}

/* Flecha izquierda */
.c-reel .flex-direction-nav .flex-prev {
    left: -10px !important; /* Ajuste negativo para pegarse más al borde */
    opacity: 0.8;
}

/* Flecha derecha */
.c-reel .flex-direction-nav .flex-next {
    right: -10px !important; /* Ajuste negativo para pegarse más al borde */
    text-align: right;
    opacity: 0.8;
}

/* Asegurar que las flechas tengan un color visible fuera del video (asumiendo fondo claro de la web) */
.c-reel .flex-direction-nav a:before {
    color: #555 !important; /* Color gris oscuro */
    content: '\e001'; /* Icono por defecto de flexslider font, o usar \f104 / \f105 de FontAwesome se usa */
    font-family: 'flexslider-icon'; 
    font-size: 80px; /* Aumentado 2.5x */
}
/* Si flexslider no carga fuente, forzamos contenido texto */
.c-reel .flex-direction-nav .flex-prev:before { content: '\2039'; /* ‹ */ font-family: sans-serif; }
.c-reel .flex-direction-nav .flex-next:before { content: '\203A'; /* › */ font-family: sans-serif; }


/* Forzar iframes */
.c-reel__wrapper iframe,
.c-reel-modal-content iframe {
    width: 100%;
    height: 100% !important;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
    border: none;
}

/* Estilos del Modal */
.c-reel-modal-overlay {
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-reel-modal-content {
    width: 100%;
    max-width: 450px; /* Tamaño móvil grande */
    height: 80vh;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #000;
}
.c-reel-modal-content .c-reel__wrapper {
    height: 100%;
    border-radius: 0;
}
.c-reel-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
    z-index: 10001;
}

/* Navegación Modal */
.c-reel-modal-prev,
.c-reel-modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 60px;
    cursor: pointer;
    line-height: 1;
    padding: 20px;
    z-index: 10000;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.c-reel-modal-prev:hover,
.c-reel-modal-next:hover {
    opacity: 1;
}
.c-reel-modal-prev {
    left: 10px;
}
.c-reel-modal-next {
    right: 10px;
}