/* === Estilos para vídeos horizontales === */

/* Contenedor principal para el iframe de vídeos horizontales */
.yt-new-horizontal-2 {
    position: relative;
    /* Necesario para el posicionamiento absoluto del iframe */
    max-width: 900px;
    /* Ancho máximo del contenedor */
    width: 100%;
    /* El contenedor ocupa todo el ancho disponible */
    padding-bottom: 56.25%;
    /* Define la altura en base al ancho para mantener una proporción 16:9 (9 / 16 * 100) */
    /* 16:9 */
}

/* Iframe del vídeo horizontal */
.yt-new-horizontal-2 iframe {
    position: absolute;
    /* Cubre todo el contenedor */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* === Estilos para vídeos verticales === */

/* Contenedor principal para el iframe de vídeos verticales */
.yt-new-vertical-2 {
    position: relative;
    /* Necesario para el posicionamiento absoluto del iframe */
    max-width: 500px;
    /* Ancho máximo del contenedor (ajusta según necesites) */
    width: 100%;
    /* El contenedor ocupa todo el ancho disponible */
    padding-bottom: 177.77%;
    /* Define la altura en base al ancho para mantener una proporción 9:16 (16 / 9 * 100) */
    /* 9:16 */
}

/* Iframe del vídeo vertical */
.yt-new-vertical-2 iframe {
    position: absolute;
    /* Cubre todo el contenedor */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* === Estilos generales para los triggers de vídeo (enlaces que muestran la miniatura) === */

.video-trigger {
    position: relative;
    /* Para posicionar el icono de reproducción */
    display: inline-block;
    /* Permite que los elementos se muestren en línea pero con propiedades de bloque */
    max-width: 100%;
    /* El ancho máximo no puede exceder el del contenedor padre */
    /* width: 160px; */
    /* Ancho fijo para algunos vídeos (podría ser dinámico) */
    overflow: hidden;
    /* Oculta cualquier contenido que exceda los bordes */
    border-radius: 10px;
    /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Sombra suave */
    transition: transform 0.2s, box-shadow 0.2s;
    /* Transición suave para el hover */
}

/* Estilo base para vídeos horizontales (aspect ratio por defecto) */
.video-trigger:not(.video-vertical) {
    aspect-ratio: 16 / 9;
    /* Mantiene la proporción 16:9 */
}

/* Estilo para vídeos verticales */
.video-trigger.video-vertical {
    aspect-ratio: 9 / 16;
    /* Mantiene la proporción 9:16 */
}

/* Imagen de la miniatura */
.video-thumbnail {
    width: 100%;
    height: 100% !important;
    /* Asegura que la imagen cubra todo el contenedor */
    object-fit: cover;
    /* La imagen se escala y se recorta para cubrir el contenedor sin deformarse */
    display: block;
    /* Elimina el espacio extra debajo de la imagen */
    transition: filter 0.3s;
    /* Transición suave para el efecto de brillo al pasar el ratón */
    margin: 0px 0px -1px 0px !important;
    /* Pequeño ajuste de margen para evitar líneas entre elementos */
}

/* Icono de reproducción */
.play-icon {
    position: absolute;
    /* Centrado dentro del contenedor .video-trigger */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    /* Centra el icono */
    font-size: 42px;
    color: red;
    text-shadow: 0 0 0.5em black;
    /* Sombra para mejorar la visibilidad */
    pointer-events: none;
    /* Permite que los clics pasen a través del icono al enlace */
    animation: pulse 1.5s infinite alternate;
    /* Animación de pulsación */
}

/* Animación de pulsación para el icono de reproducción */
@keyframes pulse {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Efecto al pasar el ratón sobre el trigger de vídeo */
.video-trigger:hover img {
    filter: brightness(1.2);
    /* Aumenta el brillo de la miniatura */
}

.video-trigger:hover {
    transform: scale(1.05);
    /* Escala ligeramente el trigger */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    /* Sombra más pronunciada */
}

/* === Estilos para los modales de Fancybox === */

/* Modal para vídeos horizontales */
.video-modal {
    max-width: 900px;
    /* Ancho máximo del modal */
    width: 70vw;
    /* El ancho ocupa el 70% del ancho de la ventana */
    min-width: 300px;
    /* Ancho mínimo del modal */
    margin: auto;
    /* Centra el modal horizontalmente */
}

/* Modal para vídeos verticales */
.video-modal-vertical {
    max-width: 400px;
    /* Ancho máximo del modal vertical */
    width: 70vw;
    /* El ancho ocupa el 70% del ancho de la ventana */
    min-width: 300px;
    /* Ancho mínimo del modal */
    margin: auto;
    /* Centra el modal horizontalmente */
}

/* Estilo específico para el ancho de algunos vídeos de producto */
.product-video {
    width: 170px;
}

/* === Media Queries para diseño responsive === */

/* Para pantallas con un ancho máximo de 600px (típicamente móviles) */
@media (max-width: 600px) {

    /* Los triggers de vídeo ocupan todo el ancho disponible */
    .video-trigger {
        width: 100%;
    }

    /* Los vídeos de producto también ocupan todo el ancho en móviles */
    .product-video {
        width: 100%;
    }

    /* Ajustes para el contenedor de vídeos horizontales en móviles */
    .yt-new-horizontal-2 {
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    /* Ajustes para el contenedor de vídeos verticales en móviles */
    .yt-new-vertical-2 {
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
}

/* Para pantallas con un ancho máximo de 980px (tablets y algunos portátiles) */
@media (max-width: 980px) {

    /* Limita la altura máxima del contenedor de vídeos horizontales */
    .yt-new-horizontal-2 {
        max-height: 350px;
        height: 100%;
    }

    /* Reduce el ancho máximo del modal de vídeo en pantallas más pequeñas */
    .video-modal {
        max-width: 400px;
    }
}