/*-------------------------------------------------------------------------- 
///////////////////////////////////////////////////////////////////////////
01 GLOBAL /////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
-------------------------------------------------------------------------*/

/*---------------------------------------------------------------- 
--- 01 COLORS  //////////////////////////////////////////////////
----------------------------------------------------------------*/
:root {

	--color-back:#f2f4f6;

	--color-white:#fff;
	--color-white-90:rgba(255, 255, 255, 0.9);
	--color-white-80:rgba(255, 255, 255, 0.8);
	--color-white-70:rgba(255, 255, 255, 0.7);
	--color-white-60:rgba(255, 255, 255, 0.6);
	--color-white-50:rgba(255, 255, 255, 0.5);
	--color-white-40:rgba(255, 255, 255, 0.4);
	--color-white-30:rgba(255, 255, 255, 0.3);
	--color-white-20:rgba(255, 255, 255, 0.2);
	--color-white-10:rgba(255, 255, 255, 0.1);

	--color-black:#000;
	--color-black-90:rgba(0, 0, 0, 0.9);
	--color-black-80:rgba(0, 0, 0, 0.8);
	--color-black-70:rgba(0, 0, 0, 0.7);
	--color-black-60:rgba(0, 0, 0, 0.6);
	--color-black-50:rgba(0, 0, 0, 0.5);
	--color-black-40:rgba(0, 0, 0, 0.4);
	--color-black-30:rgba(0, 0, 0, 0.3);
	--color-black-20:rgba(0, 0, 0, 0.2);
	--color-black-10:rgba(0, 0, 0, 0.1);

	--color-whatsapp:#25d366;
	--color-facebook:#3b5998;
	--color-instagram:#cd486b;
	--color-youtube:#ff0000;
	--color-twitter:#55acee;
	--color-x:#55acee;
	--color-linkedin:#007bb5;

	--gradient-main:linear-gradient(to top, var(--color-main) 0%, var(--color-main-soft) 180%);
	--gradient-main-soft:linear-gradient(to top, var(--color-main-softer) 0%, var(--color-white) 180%);
	--gradient-main-dark:linear-gradient(to top, var(--color-main-darker) 0%, var(--color-main) 180%);

	--gradient-second:linear-gradient(to top, var(--color-second) 0%, var(--color-second-soft) 180%);
	--gradient-second-soft:linear-gradient(to top, var(--color-second-softer) 0%, var(--color-white) 180%);
	--gradient-second-dark:linear-gradient(to top, var(--color-second-darker) 0%, var(--color-second) 180%);

	--gradient-neutro:linear-gradient(to top, var(--color-neutro-soft) 0%, var(--color-neutro) 180%);
	--gradient-neutro-soft:linear-gradient(to top, var(--color-neutro-softer) 0%, var(--color-neutro-soft) 180%);
	--gradient-neutro-dark:linear-gradient(to top, var(--color-neutro) 0%, var(--color-neutro-dark) 180%);

	--gradient-combinado-uno:linear-gradient(to right top, var(--color-main-soft) 0%, var(--color-main-softer) 40%, var(--color-second-softer) 80%);
	--gradient-combinado-dos:linear-gradient(to right top, var(--color-main) 0%, var(--color-main-soft) 40%, var(--color-second-soft) 80%);
	--gradient-combinado-tres:linear-gradient(to right top, var(--color-main-dark) 0%, var(--color-main) 40%, var(--color-second) 80%);

	--gradient-radial-uno:radial-gradient(circle at center center, #A6CEE2,  #0066B2);
	--gradient-radial-dos:radial-gradient(circle at center center, #EDC1AE,  #F26721);

	}


/*-------------------------------------------------------------------------- 
///////////////////////////////////////////////////////////////////////////
02 STRUCTURE //////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
-------------------------------------------------------------------------*/
/*---------------------------------------------------------------- 
--- 02 GENERAL ///////////////////////////////////////////////////
----------------------------------------------------------------*/

/* Box sizing
------------------------------*/
* {
	box-sizing:border-box!important;
	float: none;
	position:relative;
	}
	

/* Flexbox all
------------------------------*/
*[data-element='banner'],
*[data-element='banner'] div,
*[data-element='banner-main'],
*[data-element='banner-main'] div,
*[data-element='panel'],
*[data-element='panel'] > div:not(.modal),
footer,
footer > div {
	display:flex;
	flex-flow:row wrap;
	}

/* Content visibility
------------------------------*/
*[data-element='panel'] img,
*[data-element='panel'] svg,
footer img,
.svg-icon,
video,
iframe{
	content-visibility: auto;
	}


/* Gap
------------------------------*/
:root {

	--gap-main:4vw;
	--gap-second:3vw;
	--gap-inside:12px;
	--gap-inside-medium:8px;
	--gap-inside-small:6px;
	--gap-medium:8px;
	--gap-small:6px;
	--gap-very-small:4px;
}


.gap-main {
	gap:var(--gap-main);
	}

.gap-second {
	gap:var(--gap-second);
	}

.gap-medium {
	gap:var(--gap-medium);
	}

.gap-small {
	gap:var(--gap-small);
	}

/*---------------------------------------------------------------- 
--- 02 BLOQUES Y COLUMAS /////////////////////////////////////////
----------------------------------------------------------------*/
div.bloque,
div.bloque > .col {
	gap:var(--gap-second);
	}


div.bloque {
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	height:auto;
	width:100%;
	}


/* Columna
------------------------------*/
div.col {
	align-items:flex-start;
	align-content:flex-start;
	display:flex;
	flex-grow:99;
	flex-wrap:wrap;
	justify-content:flex-start;
	height:auto;
	min-width:300px;
	padding:0px;
	transition:all 0.12s;
	width:18%; /* but grow */
	}


/* Dos columnas dentro de un div
------------------------------*/
div.cols-2 > div.col {
	width:40%;
	}



/* Tres columnas dentro de un div
------------------------------*/
div.cols-3 > div.col {
	min-width:120px;
	width:28%; /* but grow */
	}



/* col aside
------------------------------*/
div.cols-aside > div.col {
	width:60%; /* but grow */
	}

div.cols-aside > div.col-aside {
	width:30%; /* but grow */
	}


/*                                       
------------------------------------  820 ---
--------------------------------------------------*/
@media only screen and (max-width:820px) {

	div.cols-3 > div.col {
	min-width:300px;
	}

}


/*                                       
------------------------------------  100% 720 ---
--------------------------------------------------*/
@media only screen and (max-width:720px) {

	div.cols-2 > div.col {
	min-width:100%;
	}

	div.cols-3 > div.col {
	min-width:100%;
	}


}
/*---------------------------------------------------------------- 
--- 02 DIV IN ////////////////////////////////////////////////////
----------------------------------------------------------------*/
.inx.full,
.inx-full,
.inx-full-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

.inx.wide,
.inx-wide,
.inx-wide-to-none{
	padding-left:6vw;
	padding-right:6vw;
	/*width:90vw;*/
	}


.inx,
.inx-to-full,
.inx-to-wide,
.inx-to-thin,
.inx-to-none{
	padding-left:10vw;
	padding-right:10vw;
	}

.inx.thin,
.inx-thin,
.inx-thin-to-full,
.inx-thin-to-wide,
.inx-thin-to-none{
	padding-left:20vw;
	padding-right:20vw;
	}

/*                                       
-----------------------------------------  2200 ---
--------------------------------------------------*/
@media only screen and (max-width:2200px) {
	.inx.full,
	.inx-full,
	.inx-full-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.inx.wide,
	.inx-wide,
	.inx-wide-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.inx,
	.inx-to-full,
	.inx-to-wide,
	.inx-to-none{
	padding-left:10vw;
	padding-right:10vw;
	/*width:80vw;*/
	}

	.inx.thin,
	.inx-thin,
	.inx-thin-to-full,
	.inx-thin-to-wide,
	.inx-thin-to-none{
	padding-left:20vw;
	padding-right:20vw;
	/*width:60vw;*/
	}

}



/*                                       
-----------------------------------------  1200 ---
--------------------------------------------------*/
@media only screen and (max-width:1200px) {
	.inx.thin,
	.inx-thin,
	.inx-thin-to-full,
	.inx-thin-to-wide,
	.inx-thin-to-none{
	padding-left:15vw;
	padding-right:15vw;
	/*width:70vw;*/
	}
}


/*                                       
-----------------------------------------  1020 ---
--------------------------------------------------*/
@media only screen and (max-width:1020px) {

	.inx,
	.inx-to-full,
	.inx-to-wide,
	.inx-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}
}



/*                                       
-----------------------------------------  820 ---
--------------------------------------------------*/
@media only screen and (max-width:820px) {

	.inx,
	.inx-to-full,
	.inx-to-wide,
	.inx-to-none{
	padding-left:6vw;
	padding-right:6vw;
	}

	.inx.thin,
	.inx-thin,
	.inx-thin-to-full,
	.inx-thin-to-wide,
	.inx-thin-to-none{
	padding-left:10vw;
	padding-right:10vw;
	}
}


/*                                       
------------------------------------------  720 ---
--------------------------------------------------*/
@media only screen and (max-width:720px) {

	.inx,
	.inx-to-full,
	.inx-to-wide,
	.inx-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.inx.thin,
	.inx-thin,
	.inx-thin-to-full,
	.inx-thin-to-wide,
	.inx-thin-to-non{
	padding-left:8vw;
	padding-right:8vw;
	}

}

/*                                       
------------------------------------------  620 ---
--------------------------------------------------*/
@media only screen and (max-width:620px) {

	.inx-full,
	.inx-to-full,
	.inx-thin-to-full{
	padding-left:3vw;
	padding-right:3vw;
	}

	.inx-wide,
	.inx-to-wide,
	.inx-thin-to-wide{
	padding-left:3vw;
	padding-right:3vw;
	}


	.inx{
	padding-left:7vw;
	padding-right:7vw;
	}


	.inx.thin,
	.inx-thin,
	.inx-to-thin{
	padding-left:10vw;
	padding-right:10vw;
	}

	.inx-full-to-none,
	.inx-wide-to-none,
	.inx-to-none,
	.inx-thin-to-none{
	padding-left:0vw;
	padding-right:0vw;
	}
	
}

/*                                       
------------------------------------------  520 ---
--------------------------------------------------*/
@media only screen and (max-width:520px) {
	.inx{
	padding-left:5vw;
	padding-right:5vw;
	}
	.inx.thin,
	.inx-thin,
	.inx-to-thin{
	padding-left:9vw;
	padding-right:9vw;
	}
}

/*                                       
------------------------------------------  420 ---
--------------------------------------------------*/
@media only screen and (max-width:420px) {
	.inx{
	padding-left:3vw;
	padding-right:3vw;
	}
	.inx.thin,
	.inx-thin,
	.inx-to-thin{
	padding-left:6vw;
	padding-right:6vw;
	}
}




.in.center {
	display:flex!important;
	justify-content:center!important;
	border:1px solid red;
}



.padding-block{
	padding-block:40px;
	}
	
/*-------------------------------------------------------------------------- 
////////////////////////////////////////////////////////////////////////////
09 FOOTER /////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
-------------------------------------------------------------------------*/

/* --------------------------------------------------
DO ---------------------------------------- FOOTER---
---------------------------------------------------*/


/* Title
------------------------------*/
footer .title {
	color:var(--color-main);
	font-size:1em;
	font-weight:bold;
	text-align:left;
	text-transform:uppercase;
	width:100%;
	}


/* General
------------------------------*/
footer{
	align-items:stretch;
	align-items:flex-start;
	display:flex;
	flex-flow:row wrap;
	font-size:0.9rem;
	gap:var(--gap-second);
	height:auto;
	max-width:100%;
	overflow-x:hidden;
	padding-bottom:40px;
	padding-top:40px;
	width:100%;
	z-index:99;
	}


/* Cols
------------------------------*/
footer .col{
	gap:var(--gap-inside);
	min-width:180px!important;
	width:20%;
	}


footer .col-1{
	order:1;
	}

footer .col-2{
	order:2;
	}

footer .col-3{
	order:3;
	}

footer .col-4{
	order:4;
	}



/* IF: Col Logotipo
------------------------------*/
footer .col-logotipo{
	justify-content:flex-start;
	min-width:180px!important;
	}


footer .col .logotipo{
	display:block;
	height:auto;
	width:120px;
	}

footer .col .logotipo img{
	height:auto;
	width:100%;
	}




/* Parrafo
------------------------------*/
footer p{
	height:auto;
	line-height:1.6em;
	padding:0px;
	width:100%;
	}



/* Links
------------------------------*/
footer p a{
	text-decoration:none;
	}
footerp a:hover{
	text-decoration:underline;
	}




/* Col last
------------------------------*/
footer .col-last{
	justify-content:flex-end;
	min-width:160px!important;
	}


footer .col-last ul.social-bar,
footer .col-last ul.menu{
	justify-content:flex-end;
	}

footer .col-last p,
footer .col-last .title{
	text-align:right;
	}

footer .col-last .firma{
	align-self: flex-end;
	}



/*                                       
-----------------------------------------  820 ---
--------------------------------------------------*/
@media only screen and (max-width:820px) {

	footer .col-logotipo{
		order:1;
		margin-bottom:20px;
		width:100%!important;
		}
}



/*                                       
-----------------------------------------  720 ---
--------------------------------------------------*/
@media only screen and (max-width:720px) {


	footer .col{
		order:1;
		width:100%!important;
		}

	footer .col-logotipo{
		order:1;
		width:100%;
		}

	footer .logotipo{
		margin-bottom:20px;
		}
		
	footer .col-last{
		width:100%!important;
		justify-content:flex-start;
		}
	footer .col-last p,
	footer .col-last .title{
		text-align:left;
		}


	footer .col-last ul.social-bar,
	footer .col-last ul.menu,
	footer .col-last p{
		justify-content:flex-start;
		}

	footer .col-last .firma{
		align-items:flex-start;
		justify-content:flex-start;
		}

}


/*-------------------------------------------------------------------------- 
/////////////////////////////////////////////////// ---------- / END FOOTER
--------------------------------------------------------------------------*/