/*
 * CrediTotal — Hero "banner-video" estilo Affirm — sección #banner-video (page 109)
 * Tema hijo xmoze-child.
 *
 * El vídeo es ahora un WIDGET DE VÍDEO NATIVO de Elementor (self-hosted, autoplay +
 * mute + loop + playsinline, SIN controles) dentro de #banner-video → el cliente lo
 * puede CAMBIAR desde el editor (panel del widget de Vídeo: Contenido → Elegir archivo).
 * El asset trae toda la composición incrustada (titular + bullets + teléfono +
 * productos), por eso el <h1> real se mantiene en el DOM (SEO) pero se oculta en el
 * front (se sigue viendo en el editor para poder editar el texto).
 *
 * Este CSS sólo MAQUETA: vídeo a sangre completa (full-bleed) + "efecto de borrado"
 * (máscara que disuelve el borde inferior hacia la siguiente sección; fondos
 * #F6F5F8 ≈ #F7F9FB → sin costura).
 */

/* =======================================================================
   Variables del efecto.  EDITAR AQUÍ (una línea cada una).
   ======================================================================= */
#banner-video {
	--ct-hv-bg:   #F7F9FB;   /* = fondo EXACTO de la sección siguiente (sin costura/línea) */
	--ct-hv-fade: 20%;       /* alto de la zona inferior que se disuelve (borrado) */
}

/* Sección a sangre completa, fondo igual al del vídeo. */
#banner-video {
	padding: 0 !important;
	background-color: var(--ct-hv-bg) !important;
	overflow: hidden;
}

/* La sección que sigue al banner comparte EXACTAMENTE el fondo y se solapa 1px
   con el fundido → elimina cualquier costura/línea blanca entre ambas.
   OJO: usar el color LITERAL (la variable --ct-hv-bg vive en #banner-video y no
   se hereda a un hermano; un var() indefinido aquí dejaría la sección sin fondo). */
#banner-video + section,
#banner-video + .elementor-section {
	background-color: #F7F9FB !important;
	margin-top: -1px !important;
}

/* El contenido de la sección es "boxed" (ancho de contenido centrado): lo rompemos
   para que el vídeo llegue de BORDE A BORDE de la pantalla. */
#banner-video > .elementor-container {
	max-width: 100% !important;
	width: 100% !important;
}
#banner-video .elementor-column > .elementor-element-populated,
#banner-video .elementor-widget-video,
#banner-video .elementor-widget-video > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

/* El <h1> real se oculta SÓLO en el front (en el editor sigue visible y editable). */
body:not(.elementor-editor-active) #banner-video .elementor-widget-heading {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* Anula la caja de aspect-ratio del widget de vídeo: que mande la proporción real. */
#banner-video .elementor-widget-video .elementor-wrapper,
#banner-video .elementor-widget-video .e-hosted-video {
	padding: 0 !important;
	height: auto !important;
	line-height: 0;
	/* Borrado: el vídeo se disuelve hacia la siguiente sección. */
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ct-hv-fade)), transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ct-hv-fade)), transparent 100%);
}

/* El vídeo ocupa TODO el ancho; el alto sale de su proporción (~1.28:1). */
#banner-video .elementor-video {
	position: static !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain !important;
	pointer-events: none;        /* sin interacción ni controles */
}

/* --- Tablet / móvil: el header es absoluto y solapa la 1ª sección; dejamos hueco
   arriba para que no recorte el titular incrustado en el vídeo. --- */
@media (max-width: 1024px) {
	#banner-video { padding-top: 90px !important; }
}

@media (max-width: 767px) {
	#banner-video {
		--ct-hv-fade: 12%;
		padding-top: 72px !important;
	}
}

/* Respeta a quien prefiere menos movimiento (el navegador ya pausa el autoplay). */
@media (prefers-reduced-motion: reduce) {
	#banner-video .elementor-widget-video .elementor-wrapper,
	#banner-video .elementor-widget-video .e-hosted-video {
		-webkit-mask-image: none;
		        mask-image: none;
	}
}