/*
 * Slider de texto de la portada. Reproduce el #text-slider-2 de produccion, que
 * emite [pofo_text_slider text_slider_style="pofo-text-slider2"] sobre Swiper 3.
 *
 * Todo lo de aqui son valores MEDIDOS de produccion. Lo que en el original hacen
 * las clases de Pofo (.padding-eighteen-all, .title-large, .alt-font, .top-35,
 * .width-90, .center-col, .swiper-button-black-highlight...) se reescribe con
 * clases propias: el bloque no puede depender del tema, porque el tema se va.
 *
 * Los cortes son los de Pofo -- 1199 / 991 / 767 -- y NO los de Elementor.
 */

.dq-ts {
	/*
	 * El .swiper-container de produccion mide 690, no 720: los 15px por lado son
	 * el gutter del .vc_column de Bootstrap. Medido con las flechas: la izquierda
	 * cae en x=815 con el panel empezando en 720, y 815-720 = 95 = 70 + 10 + 15.
	 * El canal lo pone el bloque para no depender del contenedor de Elementor.
	 */
	--dq-ts-canal: 15px;

	/*
	 * adwebsys.css apaga los numeros en produccion:
	 * .title-large.text-dark-gray { color: transparent !important }
	 * Siguen ocupando su alto, que es lo que empuja al subtitulo. Para volver a
	 * verlos basta con [dq_texto_slider numeros="visibles"].
	 */
	--dq-ts-numero: transparent;

	--dq-ts-subtitulo: #e5e5e5;
	--dq-ts-titulo: #ffffff;
	--dq-ts-texto: #f2f2f2;

	/* Lo que en produccion se hereda del body del tema. */
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 400;

	padding-left: var(--dq-ts-canal);
	padding-right: var(--dq-ts-canal);
}

.dq-ts--numeros-visibles {
	--dq-ts-numero: #e5e5e5;
}

.dq-ts__lienzo {
	position: relative;
	overflow: hidden;
}

/* .white-move del original: el cursor de arrastre claro del tema. */
.dq-ts__lienzo .swiper-slide {
	cursor: url("imagenes/icon-move-light.png"), move;
	height: auto;
}

/* .padding-eighteen-all */
.dq-ts__marco {
	padding: 18%;
	text-align: center;
}

/* .margin-30px-bottom.text-center.position-relative */
.dq-ts__cabecera {
	position: relative;
	margin-bottom: 30px;
	text-align: center;
}

/*
 * .title-large.alt-font.font-weight-100.opacity4
 *
 * Es un inline, no un bloque: la altura de la caja sale de que una linea de 95px
 * conviva con el strut de 14/24 del padre, exactamente como en produccion.
 */
.dq-ts__numero {
	font-family: Montserrat, sans-serif;
	font-size: 100px;
	line-height: 95px;
	font-weight: 100;
	color: var(--dq-ts-numero);
	opacity: .4;
	-webkit-user-select: none;
	user-select: none;
}

/* .alt-font.font-weight-600.position-absolute.left-0.right-0.top-35 */
.dq-ts .dq-ts__subtitulo {
	position: absolute;
	left: 0;
	right: 0;
	top: 35px;
	margin: 0;
	padding: 0;
	font-family: Montserrat, sans-serif;
	font-size: inherit;
	line-height: inherit;
	font-weight: 600;
	color: var(--dq-ts-subtitulo);
}

/*
 * h4.alt-font con font-size:32px en linea.
 *
 * Selector largo a proposito: Pofo y Elementor traen reglas propias para los
 * encabezados y hay que ganarles sin !important. OJO: el tamaño esta clavado en
 * 32px por el estilo en linea del original, pero el line-height y el margen SI
 * cambian en cada corte, porque vienen de las reglas h4{} y h1..h6{margin} del
 * tema. Es el error mas facil de cometer aqui.
 */
.dq-ts .dq-ts__titulo {
	margin: 0 0 25px;
	padding: 0;
	font-family: Montserrat, sans-serif;
	font-size: 32px;
	line-height: 46px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--dq-ts-titulo);
}

/* .width-90.center-col */
.dq-ts__texto {
	width: 90%;
	margin: 0 auto;
	float: none;
	color: var(--dq-ts-texto);
}

/* ------------------------------------------------------------------ flechas */

/*
 * .swiper-button-black-highlight: cuadrado blanco de 30x30 con radio 3 y el
 * chevron negro de Swiper 3 en un data:. El inset de 80px es el left/right:70px
 * de .content-right-slider mas los 10px de margen lateral del tema.
 *
 * El margin-top de 30px no es un error: el tema pone margin:-15px 10px 0 y
 * adwebsys.css lo pisa con margin-top:30px!important. El centro de la flecha cae
 * asi en 50% + 30 + 15 = +45px respecto al centro del lienzo, que es lo medido
 * en produccion (1278,5 frente a 1233,5). Se replica tal cual.
 */
.dq-ts__flecha {
	position: absolute;
	top: 50%;
	margin-top: 30px;
	z-index: 10;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 10px 8px;
	background-size: 28% auto;
	cursor: pointer;
}

.dq-ts__flecha--anterior {
	left: 80px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.dq-ts__flecha--siguiente {
	right: 80px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

/* Mejora sobre el original, que eran <div> sin foco posible. No cambia el reposo. */
.dq-ts__flecha:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- cortes */

@media (max-width: 1199px) {
	.dq-ts__marco { padding: 8%; }                                  /* .md-padding-eight-all */
	.dq-ts__numero { font-size: 90px; line-height: 90px; }
	.dq-ts .dq-ts__titulo { line-height: 41px; margin-bottom: 22px; }
	.dq-ts__flecha--anterior { left: 30px; }                        /* 20 + 10 */
	.dq-ts__flecha--siguiente { right: 30px; }
}

@media (max-width: 991px) {
	.dq-ts__marco { padding: 13%; }                                 /* .sm-padding-thirteen-all */
	.dq-ts__numero { font-size: 70px; line-height: 65px; }
	.dq-ts .dq-ts__subtitulo { top: 25px; }                         /* .sm-top-25 */
	.dq-ts .dq-ts__titulo { line-height: 35px; margin-bottom: 18px; }
	.dq-ts__texto { width: 95%; }                                   /* .sm-width-95 */
	/*
	 * Pofo tiene aqui un .content-right-slider{background-size:25px auto}, pero en
	 * produccion NO gana: el chevron medido a 375 sigue siendo el 28% de la caja
	 * (7px de ancho sobre una caja de 25). El background-size no cambia en ningun
	 * corte; lo unico que cambia es el ancho de la caja y el inset.
	 */
}

@media (max-width: 767px) {
	.dq-ts { font-size: 12px; line-height: 20px; }                  /* body del tema */
	.dq-ts__marco { padding: 13% 15px; }                            /* .xs-padding-15px-lr solo pisa los lados */
	.dq-ts__numero { font-size: 38px; line-height: 44px; }
	.dq-ts .dq-ts__subtitulo { top: 12px; }                         /* .xs-top-12 */
	.dq-ts .dq-ts__titulo { line-height: 30px; margin-bottom: 17px; }
	.dq-ts__texto { width: 85%; }                                   /* .xs-width-85 */
	.dq-ts__flecha { width: 25px; }
	.dq-ts__flecha--anterior { left: 15px; }                        /* 5 + 10 */
	.dq-ts__flecha--siguiente { right: 15px; }
}