/**
 * Video Carousel Featured — carrusel centrado con foco.
 * Tokens editables como custom properties en .vcf (Elementor los sobreescribe
 * en {{WRAPPER}} .vcf).
 */

.vcf {
	--vcf-bg: #ffffff;
	--vcf-inset: clamp(20px, 6vw, 96px);
	--vcf-card-w: min(62vw, 900px);
	--vcf-radius: 16px;
	--vcf-gap: 28px;
	--vcf-ratio: 16 / 9;

	--vcf-side-blur: 6px;
	--vcf-side-opacity: 0.5;
	--vcf-side-scale: 0.82;

	/* Desplazamiento del PRIMER slide hacia la izquierda (px). Cámbialo aquí
	   para ajustar/quitar la alineación (0 = sin desplazamiento) o desde el
	   control "Desplazar primer slide" en Elementor (Estilo › Sección). El JS
	   lee esta variable en measure(). */
	--vcf-first-shift: 100px;

	--vcf-dot: #c9c9c9;
	--vcf-dot-active: #5b5bd6;

	position: relative;
	width: 100%;
	background-color: var(--vcf-bg);
	box-sizing: border-box;
	overflow: hidden;
	padding-block: clamp(40px, 6vw, 88px);
}

.vcf *,
.vcf *::before,
.vcf *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Cabecera
 * ------------------------------------------------------------------------- */

.vcf-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	text-align: left;
	/* El título arranca en el inset izquierdo de la sección (mismo borde
	   izquierdo que el contenido); la descripción se alinea a la derecha. */
	padding-inline: var(--vcf-inset);
	margin-bottom: clamp(32px, 4vw, 60px);
}

.vcf-title {
	margin: 0;
	color: #0b0b0b;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.vcf-desc {
	flex: 0 1 420px;
	max-width: 420px;
	color: #5a5a5a;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.55;
	text-align: left;
}

.vcf-desc :is(p) {
	margin: 0 0 0.5em;
}

.vcf-desc :is(p):last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Stage / track (centrado por transform vía JS)
 * ------------------------------------------------------------------------- */

.vcf-stage {
	width: 100%;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
}

.vcf-stage.is-dragging {
	cursor: grabbing;
}

.vcf-track {
	display: flex;
	align-items: flex-start;
	gap: var(--vcf-gap);
	width: max-content;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
}

/* ---------------------------------------------------------------------------
 * Slides / tarjetas
 * ------------------------------------------------------------------------- */

.vcf-slide {
	position: relative;
	flex: 0 0 auto;
	width: var(--vcf-card-w);
	display: flex;
	flex-direction: column;
}

.vcf-card {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent;
	text-align: left;
	color: inherit;
	font: inherit;
	cursor: pointer;
	border-radius: var(--vcf-radius);
	/* Estado base = fuera de foco (lateral) */
	transform: scale(var(--vcf-side-scale));
	transform-origin: center center;
	opacity: var(--vcf-side-opacity);
	filter: blur(var(--vcf-side-blur)) grayscale(0.12);
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.5s ease,
		filter 0.5s ease,
		box-shadow 0.5s ease;
	will-change: transform, opacity, filter;
}

.vcf-slide.is-active .vcf-card {
	transform: scale(1);
	opacity: 1;
	filter: none;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.35);
}

.vcf-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--vcf-radius);
	aspect-ratio: var(--vcf-ratio);
	background: #e9e9ea;
}

.vcf-video,
.vcf-poster,
.vcf-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.vcf-placeholder {
	background: repeating-linear-gradient(
		135deg,
		#e9e9ea,
		#e9e9ea 12px,
		#e2e2e3 12px,
		#e2e2e3 24px
	);
}

/* Botón de play (solo visible en la tarjeta enfocada) */
.vcf-playbtn {
	position: absolute;
	left: 24px;
	bottom: 24px;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.55);
	color: #fff;
	backdrop-filter: blur(2px);
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity 0.4s ease,
		transform 0.4s ease,
		background 0.2s ease;
	pointer-events: none;
}

.vcf-playbtn svg {
	margin-left: 3px;
}

.vcf-slide.is-active .vcf-playbtn {
	opacity: 1;
	transform: scale(1);
}

.vcf-card:hover .vcf-playbtn {
	background: rgba(0, 0, 0, 0.72);
}

/* ---------------------------------------------------------------------------
 * Cuerpo bajo la tarjeta (logo / título / descripción / botón)
 * ------------------------------------------------------------------------- */

.vcf-slide__body {
	padding-top: clamp(18px, 2vw, 28px);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 0.45s ease,
		transform 0.45s ease;
	pointer-events: none;
}

.vcf-slide.is-active .vcf-slide__body {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.vcf-slide__title {
	margin: 0 0 10px;
	color: #0b0b0b;
	font-size: clamp(20px, 1.7vw, 28px);
	line-height: 1.15;
	font-weight: 600;
}

.vcf-slide__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.vcf-slide__desc {
	margin: 0;
	max-width: 62%;
	color: #4a4a4a;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.5;
}

/* Botón "reverso": el texto va sin fondo dentro de una píldora con borde fino,
   y el elemento de color es el CÍRCULO de la flecha. En hover cambia el fondo
   del círculo (no el texto). La flecha es siempre blanca y hace el swap
   diagonal. Colores desde la pestaña Style de Elementor: .vcf-btn (texto y
   borde) y .vcf-btn__circle. */
.vcf-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 5px 5px 5px 26px;
	border: 1px solid #c8c8c8;
	border-radius: 999px;
	background: transparent;
	color: #0b0b0b;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.vcf-btn__label {
	line-height: 1;
}

/* Círculo de color: contiene la flecha y recorta el swap. */
.vcf-btn__circle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #1f1fd6;
	overflow: hidden;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease;
}

/* Wrapper rotado -45deg: la flecha "a la derecha" se ve arriba-derecha y un
   translateX se convierte en desplazamiento por el eje diagonal. */
.vcf-btn__arrows {
	position: relative;
	width: 20px;
	height: 20px;
	transform: rotate(-45deg);
}

.vcf-btn__arrow {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	fill: #ffffff; /* la flecha siempre es blanca */
	transition: transform 0.38s ease;
}

/* Flecha 2 en espera, fuera del círculo (abajo-izquierda). */
.vcf-btn__arrow:nth-child(2) {
	transform: translateX(-200%);
}

.vcf-btn:hover .vcf-btn__arrow:nth-child(1),
.vcf-btn:focus .vcf-btn__arrow:nth-child(1) {
	transform: translateX(200%);
}

.vcf-btn:hover .vcf-btn__arrow:nth-child(2),
.vcf-btn:focus .vcf-btn__arrow:nth-child(2) {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.vcf-btn__arrow {
		transition: none;
	}
	.vcf-btn:hover .vcf-btn__arrow:nth-child(1),
	.vcf-btn:focus .vcf-btn__arrow:nth-child(1) {
		transform: none;
	}
	.vcf-btn:hover .vcf-btn__arrow:nth-child(2),
	.vcf-btn:focus .vcf-btn__arrow:nth-child(2) {
		transform: translateX(-200%);
	}
}

/* ---------------------------------------------------------------------------
 * Puntos de paginación
 * ------------------------------------------------------------------------- */

.vcf-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: clamp(28px, 4vw, 52px);
}

.vcf-dot {
	position: relative;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vcf-dot);
	cursor: pointer;
	transition: background 0.25s ease;
}

.vcf-dot::after {
	/* anillo del punto activo */
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1.5px solid var(--vcf-dot-active);
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.vcf-dot.is-active {
	background: var(--vcf-dot-active);
}

.vcf-dot.is-active::after {
	opacity: 1;
	transform: scale(1);
}

/* ---------------------------------------------------------------------------
 * Foco de teclado consistente
 * ------------------------------------------------------------------------- */

.vcf-card:focus-visible,
.vcf-btn:focus-visible,
.vcf-dot:focus-visible,
.vcf-modal__close:focus-visible,
.vcf-stage:focus-visible {
	outline: 2px solid var(--vcf-dot-active);
	outline-offset: 3px;
}

.vcf-stage:focus:not(:focus-visible),
.vcf-card:focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------------------------
 * Modal / popup
 * ------------------------------------------------------------------------- */

.vcf-modal[hidden] {
	display: none;
}

.vcf-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 48px);
}

.vcf-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 22, 0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.vcf-modal__dialog {
	position: relative;
	width: min(1100px, 92vw);
	max-height: 88vh;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: scale(0.96);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.vcf-modal.is-open .vcf-modal__backdrop {
	opacity: 1;
}

.vcf-modal.is-open .vcf-modal__dialog {
	opacity: 1;
	transform: none;
}

.vcf-modal__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #000;
}

/* El modal se inyecta en <body>, fuera del wrapper del widget, así que los
   estilos globales de botón del tema/Elementor pueden pisarlo. Blindamos las
   propiedades visuales con !important. */
.vcf-modal .vcf-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 42px !important;
	height: 42px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	display: grid !important;
	place-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(20, 20, 20, 0.7) !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font: inherit !important;
	line-height: 0 !important;
	cursor: pointer;
	transition:
		background 0.2s ease,
		transform 0.2s ease;
}

.vcf-modal .vcf-modal__close:hover,
.vcf-modal .vcf-modal__close:focus {
	background: rgba(0, 0, 0, 0.9) !important;
	color: #fff !important;
	transform: scale(1.06);
}

.vcf-modal .vcf-modal__close svg {
	display: block;
	pointer-events: none;
}

body.vcf-modal-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vcf-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.vcf-desc {
		flex-basis: auto;
		max-width: none;
	}

	.vcf-slide__desc {
		max-width: 100%;
	}

	.vcf-slide__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.vcf-playbtn {
		left: 16px;
		bottom: 16px;
		width: 48px;
		height: 48px;
	}
}

/* ---------------------------------------------------------------------------
 * Modo "slider" en móvil y tablet (<=1024px)
 * El JS (leftAligned) ancla cada tarjeta a la IZQUIERDA con "peek" de la
 * siguiente —como los demás sliders del sitio— en vez del carrusel centrado
 * con foco del desktop (que queda intacto).
 *   --vcf-mobile-inset : inset izquierdo al que se ancla cada tarjeta. EN PX
 *       PUROS (el JS lo lee con parseFloat; nada de clamp/calc aquí). 16px en
 *       móvil = gutter lateral del sitio.
 *   --vcf-gap : se reduce para dejar "peek" visible de la siguiente.
 * El ancho de tarjeta (--vcf-card-w) NO se toca: lo controla el usuario desde
 * Elementor (control responsive del widget). Para más/menos peek, ajústalo ahí.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.vcf {
		--vcf-gap: 16px;
		--vcf-mobile-inset: 24px; /* tablet: = gutter del contenido; móvil abajo */
	}
}

@media (max-width: 767px) {
	.vcf {
		--vcf-mobile-inset: 16px; /* = gutter móvil del sitio */
	}

	/* Botón "Learn more": el CÍRCULO (con la flecha) se hace más pequeño para
	   adaptarse al móvil. El TEXTO no se toca (mantiene su tamaño). La flecha
	   se escala con el círculo para que el botón quede proporcionado, y el
	   relleno de la píldora se reduce en la misma proporción (40/52). */
	.vcf-btn {
		gap: 9px;
		padding: 4px 4px 4px 20px;
	}
	.vcf-btn__circle {
		width: 40px;
		height: 40px;
	}
	.vcf-btn__arrows,
	.vcf-btn__arrow {
		width: 16px;
		height: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Accesibilidad: sin movimiento
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.vcf-card,
	.vcf-slide__body,
	.vcf-modal__dialog,
	.vcf-modal__backdrop {
		transition-duration: 0.01ms;
	}
}