:root {
    --color-primario: #5a263a;
    --color-primario-lght: #703b3b;
}
.wpImgHz{
	display: none;
}
.imagenPresentacion img{
	position: absolute;
	max-height: 380px;
	max-width: 250px;
	border-radius: 10px;
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.25); 	
}
.imgPresentacion1 img{
	right:0;
	top: 20px;
}
.imgPresentacion2 img{
	right: 300px;
	top: 40px;
}

/*==========================================================================================
		SECCIÓN DE PRESENTACION EN DONDE DICE QUÉ HACEMOS Y EL BOTÓN DE CONTACTO
=========================================================================================*/
body.DK{
	padding-top: 60px;
}
.wrapPresentacion{
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
	background: #fff;
	padding-bottom: 100px;
	padding-left: 20px;
	box-sizing: border-box;
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.01);  
}
.MB .wrapPresentacion .drSeccion{
	box-shadow: none;
}
body.MB{
	padding-top: var(--heigHeaderMB);;
}
.wpTextoPresentacion{
	padding-top: 10px;
	box-sizing: border-box;
	width: 45%;
}
.drPresentacion {
	position: relative;
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}
.presentacionInicial{
	line-height: 60px;
	font-family: fontBold;	
}
.p1presentacion{
	font-size:38px;
	display: block;
}
.p2presentacion{
	font-size: 45px;
	color:var(--color-primario);
}
.subtituloPresentacion{
	line-height: 30px;
	font-family: fontRegular;
	font-size: 16px;
	font-weight: normal;
	color: #717171;
	margin: 20px 0 30px 0;
}
.slogan2{
	font-size: 16px;
	font-weight: normal;
}
/*-------------- BOTÓN DE CONTACTO --------------*/
.btnIniciarAhora{
	background: var(--color-primario);
	font-size: 17px;
	font-family: fontBold;
	padding: 15px 30px;
	color: #ffffff;  
	border-radius: 12px; /* Esquinas redondeadas */
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);  
	transition: all 0.3s ease;
	outline: none;
	display: inline-flex;
	text-decoration: none;
}
.MB .btnIniciarAhora{
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); 
}
/* Efecto al pasar el ratón (Hover) */
.DK .btnIniciarAhora:hover,
.MB .btnIniciarAhora:active {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
}
.arrowAhora {
	margin-left: 5px;
	margin-top: 5px;
}
.arrowAhora svg{
	width: 20px;
	height: 20px;
	fill: #fff;
}

/*------------------------------------------
		Maquetación de las ondas que
		aparecen en la parte inferior
------------------------------------------*/
.wave-container {  
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.wave-container::before {   
  content: "";
  width: 100%;
  height: 59px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 100vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 128' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 1C19.5523 3 32.2291 5 51.5 8C104.5 18 200 41 300 63C400 85 500 106 600 98C700 89 800 51 900 29C987.526 5 1085.36 -1 1150 0C1169.54 -1 1180.49 0 1200 1V128H1150C1100 128 1000 128 900 128C800 128 700 128 600 128C500 128 400 128 300 128C200 128 100 128 50 128H0V1.98128Z' fill='%23592a2a'/></svg>");
}
/*======================================================================================================
								SECCIÓN DE "NUESTROS SERVICIOS"
=======================================================================================================*/
/*... Los estilos de un solo servicio y el contenedor se ponen en un .css aparte ...*/
/*--------------------------------------------------------------------------
		Maquetación de los botones grandes de "Ver todos", "Ver más", etc 
---------------------------------------------------------------------------*/
.wpVerTodos{
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}
.btnVerTodos{
	font-family: fontBold;
	display: flex;
	align-items: center;
	text-decoration: none;
	padding: 8px 25px 7px 33px;
	border-radius: 30px;	
	color: var(--color-primario-lght);
	border: 2px solid var(--color-primario-lght);
	position: relative;
	overflow: hidden;
}
.DK .btnVerTodos span{
	z-index:1;
}
.DK .btnVerTodos:after{
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	top: 0;
	height: 100%;
	background: var(--color-primario-lght);
	transform: scaleX(0);
	z-index: 0;
}
.btnVerTodos:active{
	transform: scale(.95);
}
.arrowVerTodos{
	margin-top: 8px;
}
.arrowVerTodos svg{
	fill: var(--color-primario-lght);
	width: 30px;
	height: 30px;
	animation: irYvenirFlecha 2s infinite;
	will-change: transform
}
@keyframes irYvenirFlecha {
    0% {
        transform: translate(0);        
    }
    50% {
        transform: translateX(8px);
    }
}
/*------ Al pasar el cursor encima del botón grande ------*/
.DK .btnVerTodos:hover{
	border-color: transparent;
	animation: colorTextBtn .6s ease forwards;
}
.DK .btnVerTodos:hover svg{
	fill: #fff;
}
.DK .btnVerTodos:hover:after{
	animation: fondoBtn .7s ease forwards;
}
@keyframes fondoBtn {
    100% {
        transform: scaleX(1);
    }
}
@keyframes colorTextBtn {	
    100% {
        color: #fff;

    }
}

/*======================================================================================================
								SECCIÓN DE "HISTORIAS DE ÉXITO"
=======================================================================================================*/
.contentHistoriasExito{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
/*------ Flechas a la derecha e izquierda de la sección 
		para cuando le sale el scroll -------------*/
.arrowHE{
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5px;
	border: 2px solid var(--color-primario-lght);
	background: rgba(255,255,255,.7);
	width: 40px;
	height: 40px;
	border-radius: 50%;	
	justify-content: center;
	align-items: center;
	z-index: 1;
	transition: transform .2s;
}
.DK .arrowHE:hover
,.MB .arrowHE:active{
	cursor: pointer;
	transform: scale(1.2) translateY(-43%);
}
.arrowHE svg{
	height: 30px;
	width: 30px;
	fill: var(--color-primario-lght);
}
.arrowRightHE{
	right: 10px;
}
.arrowLeftHE{
	left: 10px;
}
.arrowLeftHE svg{
	transform: rotate(180deg);
}
/*... LA MAQUETACIÓN INDIVIDUAL DE CADA HDE SE LLEVA ACABO EN UN ARCHIVO APARTE ...*/

/*======================================================================================================
								SECCIÓN DE "TE ATENDEMOS EN LÍNEA"
=======================================================================================================*/
.seccionTA{
	position: relative;
	text-align: center;	
	background-image: url("../../imgs/inicio/fondoTA2.png");
	background-size: cover; /* Ajusta la imagen para cubrir todo el elemento */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    
	padding: 30px;
	border: none;
	box-shadow: none;
}
.btnTA{
	background: #4DA8FB;
	border-bottom: 4px solid #3399F6;
}
.tituloTA{
	font-family: fontBold;
	font-size: 40px;
	margin-bottom: 10px;
}
.subtituloTA{
	font-family: fontBold;
	font-size: 20px;
	margin-bottom: 20px;
}
.locationTA svg{
	width: 20px;
	height: 20px;
	margin-right: 2px;
}
.ctaTA{
	font-family: fontRegular;
	margin-bottom: 30px;
	color: #636363;
}
.wpBtnTA,
.btnTA{
	display: flex;
	align-items: center;
	justify-content: center;
}
.btnTA{
	position: relative;
	border-radius: 50px;
	color: #fff;
	padding: 15px 20px;
	text-decoration: none;
	font-weight: bold;
	overflow: hidden;
	font-size: 16px;
}
.btnTA:active{
	border-bottom-width: 0;
	border-top: 4px solid transparent;
}
.iconTA{
	margin: 0 10px -2px 0;
}
.iconTA svg{
	fill: #fff;
	width: 18px;
	height: 18px;
}
/*======================================================================================================
								SECCIÓN DE "PASOS PARA AYUDARTE"
=======================================================================================================*/
.iconDedoPasos svg{
	width: 20px;
	height: 20px;
	margin-bottom: -5px;
}
.bdSeccPasos{
	display: inline-flex;
	min-height: 200px;
	background: rgba(0,0,0,.07);
	max-width: 638px;
}
.bdSeccPasos img{
	max-width: 100%;
	object-fit: contain;
}
.fondoTA{
	object-fit: cover;
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.contentTA{
	position: relative;
	z-index: 1;
}
/*======================================================================================================
										SECCIÓN DE "CONÓCEME"
=======================================================================================================*/
.drgleerMasCncm{
	display: none;
}
/*... Los estilos se maquetan aparte*/


/*======================================================================================================
								SECCIÓN DE "PREGUNTAS FRECUENTES"
=======================================================================================================*/

/*- Botón para ver más preguntas frecuentes -*/
.btnVerMasPF{
	margin-top: 30px;
}
/*... EL ESTILO DE LAS PF SE MAQUETA EN pf.css ...*/


@media (max-width: 1269px) and (min-width: 1077px){
	.wpTextoPresentacion{
		width: 48%;
	}
	.imagenPresentacion img{
		max-height: 340px;
		max-width: 220px;
	}
	.imgPresentacion1 img{
		right:20px;
	}
	.imgPresentacion2 img{
		right: 300px;
	}
}
@media (max-width: 1076.99px) and (min-width: 0){
	.wpTextoPresentacion{
		width: 48%;
	}
	.imagenPresentacion img{
		max-height: 310px;
		max-width: 200px;
	}
	.imgPresentacion1 img{
		right:10px;
	}
	.imgPresentacion2 img{
		right: 250px;
	}
	.p1presentacion{
		font-size:32px;
	}
	.p2presentacion{
		font-size: 37px;
	}
	.presentacionInicial{
		line-height: 55px;
	}
}

@media (max-width: 1110px) { 
	/*--------------------- HISTORIAS DE ÉXITO ---------------------*/	
	.contentHistoriasExito{
		display: grid;
		grid-template-columns: repeat(3, 1fr); 
		gap: 12px;
	}
}
@media (max-width: 1010px) {
	/*----------------------------- SECCIÓN CONÓCEME -----------------------------*/
	/*Estos estilos de "Conoceme" se ponen aquí y no es conoceme.css porque
	la finalidad es acortar la descripción y no mostrarla complete a fin de que el usuario se meta a "Conoceme",
	mientras que ahí la información sí se muestra completa, volviendose inncesario este código allá */
	.descripcionConoceme{
		height: 280px;
		overflow: hidden;
	}
	.drgleerMasCncm{
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		background: linear-gradient(60deg, rgba(250,250,250,.6), rgba(250,250,250,.88), rgba(250,250,250,.6));
	}	
	.btnleerMasCncm{
		background: #E0E0E0;
		border-radius: 50%;
		width: 30px;
		height: 30px;
		transition: transform .4s;
	}
	.DK .btnleerMasCncm{
		background: #CFCFCF;
	}
	.MB .btnleerMasCncm{
		background: #ECECEC;
	}
	.btnleerMasCncm svg{
		width: 22px;
		height: 22px;
	}	
	/*------- .verDescCompleta CLASE PARA VER LA DESCRIPCIÓN MÍA COMPLETA -------*/
	.descripcionConoceme.verDescCompleta{
		height: auto;
		padding-bottom: 30px;
	}
	.verDescCompleta .btnleerMasCncm{
		transform: rotate(180deg);
	}
	.verDescCompleta .drgleerMasCncm{
		background: transparent;

	}
}
@media (max-width: 857px) and (min-width: 692px) { 
	.unaHDE{
		width: 25vw;
	}
	.wpImgHDE {
		height: 42.9vw;
	}
}
@media (max-width: 691.99px) and (min-width: 500px) { 
	.contentHistoriasExito{
		grid-template-columns: repeat(2, 1fr); 
	}
	.unaHDE{
		width: 35vw;
	}
	.wpImgHDE {
		height: 60.1vw;
	}
}
@media (max-width: 499.99px) and (min-width: 0) { 
	.contentHistoriasExito{
		grid-template-columns: repeat(2, 1fr); 
	}
	.unaHDE{
		width: 40vw;
	}
	.wpImgHDE {
		height: 60.1vw;
	}
}
@media (max-width: 450px){
	.contentHistoriasExito{
		grid-template-rows: repeat(2, 1fr);
	    grid-auto-flow: column;
	    overflow-x: auto;
	    padding: 10px 10px 20px 10px;
	    scroll-behavior: smooth;
	    position: relative;
	    box-sizing: border-box;
	}
	.unaHDE{
		margin-bottom: 10px;
	}

	.drPrHistoriasExito{
		position: relative;
	}
	.arrowHE{
		display: flex;
	}
	.ocultarFlechaHE{
		display: none;
	}
	.drPrHistoriasExito:before{
		z-index: 1;
		content: '';
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 20px;
		background: #fff;
	}
}


@media (max-width: 965px) and (min-width: 758px) {
	/*---------------------- PRESENTACIÓN ----------------------*/
	.drPresentacion{
		width: 96%;
	}
	.wpTextoPresentacion{
		width: 60%;
	}
	.imgPresentacion1 img{
		right: 30px;
		top: 40px;
	}
	.imagenPresentacion img{
		max-height: 350px;
		max-width: 210px;
	}
	.imgPresentacion2 img{ /*desaparece*/
		display: none;
	}
}
@media (max-width: 757.99px) and (min-width: 600px){
	.wpTextoPresentacion{
		width: 55%;
	}
	.imagenPresentacion img{
		max-height: 300px;
		max-width: 200px;
	}
	.imgPresentacion1 img{
		right: 30px;
		top: 40px;
	}
	/*desaparece*/
	.imgPresentacion2 img{ 
		display: none;
	}
	.presentacionInicial{
		line-height: 40px;
	}
	.p1presentacion{
		font-size: 26px;
	}
	.p2presentacion{
		font-size: 33px;
	}
	.drSeccion:not(.seccionTA){
		box-shadow: none;
	}
	.wrapPresentacion{
		padding-bottom:80px;
	}
}
@media (max-width: 757.99px){
	.tituloTA{
		font-size: 30px;
	}
	.subtituloTA{
		font-size: 17px;
	}
	.ctaTA{
		font-size: 15px;
	}
	/*-------------------- SECCIÓN "PREGUNTAS FRECUENTES" --------------------*/
	.wpUnaPF{
		width: 100%;
	}
}
@media (max-width: 599.99px) and (min-width: 0){
	.wrapPresentacion{
		padding: 0;
	}
	.subtituloPresentacion,
	.nombreServBd{
		font-size: 14px;	
	}
	.presentacionInicial{
		line-height: 28px;
	}
	.presentacionInicial span{
		font-size: 21px;
	}
	.p1presentacion{
		display: inline-block;
	}
	.wpTextoPresentacion{
		padding-top:0;
		width: 100%;
	}
	.imgPresentacion1 img,.imgPresentacion2 img{ /*desaparece*/
		display: none;
	}
	.drSeccion:not(.seccionTA){
		box-shadow: none;
	}
	.wrapPresentacion{
		padding-bottom: 0px;
	}
	.subtituloPresentacion{
		line-height: 25px;
		margin: 15px 0;
	}
	.btnIniciarAhora{
		width: 100%;
		box-sizing: border-box;
		font-size: 15px;
		padding: 8px 20px;
		border-radius: 7px;
	}
	.wave-container{
		display: none;
	}
	.wpImgHz,.pcHz{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
	}
	.wpImgHz img{
		width: 100%;
	}
	.drPresentacion{
		padding: 10px 15px 20px 15px;
	}
}
@media (max-width: 500px){	
	/*----------------  PRESENTACIÓN ----------------*/	
	.prSeccion{
		margin-bottom: 50px;
	}
	/*---- BTN DE "VER TODOS" CON FLECHA A LA DERECHA ----*/
	.btnVerTodos{
		font-size: 14px;
		padding: 4px 12px 3px 20px;
	}	
	/*------------ SECCIÓN "TE ATENDEMOS EN LÍNEA" -------*/
	.seccionTA{
		padding: 15px 20px;
	}
	.tituloTA{
		font-size: 25px;
	}
	.subtituloTA{
		font-size: 15px;
	}
	.ctaTA{
		font-size: 14px;
	}
	.btnTA{
		padding: 12px 15px;
		font-size: 13px;
	}
	.locationTA svg{
		width: 17px;
		height: 17px;
	}
	/*----------------- SECCIÓN CONÓCEME -----------------*/
	.descripcionConoceme {
		height: 250px;
		font-size: 15px;	
	}
	/*----------- SECCIÓN "PREGUNTAS FRECUENTES" -----------*/
	.encabezadoUnaPF{
		font-size: 15px;
	}
	.pfPlanteada{
		width: calc(100% - 30px);
	}
}