/* ==========================================================================
   P10 Carrusel de Videos — estilos del carrusel (9:16, 3 por vista)
   Colores de Página 10: #FFF1E5 (crema), #FFFFFF (blanco), #F70D28 (rojo)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Corrección para contenedores de Elementor:
   En móvil, Elementor pone "flex-wrap: wrap" en sus contenedores y un contenedor
   en columna con "wrap" NO crece con su contenido — el carrusel se desbordaba y
   se montaba sobre la sección siguiente. Estas reglas hacen que el contenedor
   inmediato del carrusel crezca con él (solo afectan al contenedor que contiene
   este carrusel, nada más).
   -------------------------------------------------------------------------- */
.e-con:has(> .elementor-widget .p10cv-carrusel),
.e-con:has(> .e-con-inner > .elementor-widget .p10cv-carrusel) {
	flex-wrap: nowrap !important;
	min-height: auto !important;
	height: auto !important;
}
.elementor-widget:has(.p10cv-carrusel),
.elementor-widget-container:has(.p10cv-carrusel),
.elementor-shortcode:has(.p10cv-carrusel) {
	height: auto !important;
}

.p10cv-carrusel {
	position: relative;
	padding: 0 52px;
	margin: 20px 0;
}

/* Ventana visible: el desplazamiento ocurre aquí (también permite deslizar con el dedo en móvil) */
.p10cv-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;          /* Firefox: ocultar barra */
	-webkit-overflow-scrolling: touch;
}
.p10cv-viewport::-webkit-scrollbar {
	display: none;                  /* Chrome/Safari: ocultar barra */
}

.p10cv-pista {
	display: flex;
	gap: 16px;
}

/* Escritorio: 3 videos por vista */
.p10cv-slide {
	flex: 0 0 calc( (100% - 32px) / 3 );
	scroll-snap-align: start;
}

/* Tablet: 2 videos por vista */
@media (max-width: 1024px) {
	.p10cv-slide {
		flex-basis: calc( (100% - 16px) / 2 );
	}
}

/* Móvil: 1 video por vista */
@media (max-width: 640px) {
	.p10cv-carrusel {
		padding: 0 44px;
	}
	.p10cv-slide {
		flex-basis: 100%;
	}
}

/* Contenedor del video con relación de aspecto 9:16 */
.p10cv-video {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Respaldo para navegadores antiguos sin aspect-ratio */
@supports not (aspect-ratio: 9 / 16) {
	.p10cv-video {
		height: 0;
		padding-top: 177.78%;
	}
}

.p10cv-video iframe,
.p10cv-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* Flechas de navegación (solo el usuario navega, no hay avance automático) */
.p10cv-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #f70d28;
	color: #ffffff;
	border: none;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: opacity 0.2s ease, background 0.2s ease;
	padding: 0;
}
.p10cv-flecha:hover:not(:disabled) {
	background: #c90a20;
}
.p10cv-prev { left: 0; }
.p10cv-next { right: 0; }

.p10cv-flecha:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Si todos los videos caben en pantalla, las flechas se ocultan */
.p10cv-carrusel.p10cv-sin-desborde .p10cv-flecha {
	display: none;
}