@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
@font-face {
  font-family: 'Gilroy';
  src: local('Gilroy'),
       local('Gilroy ExtraBold'),
       local('Gilroy-ExtraBold'),
       url(../fonts/Gilroy-ExtraBold.otf) format('opentype');
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
}
:root {
  --color-main: #cb043c !important;
  --color-gray: #606060 !important;
  --color-gray-light: #d8d8d8 !important;
  --font-main: 'Gilroy', 'Montserrat', sans-serif;
  --font-text: 'Roboto' sans-serif;
}

.color-main{ color: var(--color-main) }
.color-white{ color: white;}
.bg-color-main{ background-color: var(--color-main) }

/* Text Styles */
h1, h2, h3, h4, h5, h6 {margin:0 0 25px; padding:0; letter-spacing: 0; line-height: 1.15em; font-weight: 400; font-family:var(--font-main);}
/*h1 {font-size:50px;}*/
h1 {font-size:42px;}
h2 {font-size:36px;}
h3 {font-size:22px;}
h4 {font-size:24px;}
h5 {font-size:22px;}
.sub6{
	font-family: var(--font-main);
	font-size:22px;
	font-weight: 400;
	color: black;
	margin: 0 0 25px;
	line-height: 1.15em;
}

p{	color: var(--color-gray);}

img{ width: 100%;}


.img-cover { height: 100%; object-fit: cover;}

.fw100{font-weight: 100}
.fw200{font-weight: 200}
.fw300{font-weight: 300}
.fw400{font-weight: 400}
.fw500{font-weight: 500}
.fw600{font-weight: 600}
.fw700{font-weight: 700}
.fw800{font-weight: 800}
.fw900{font-weight: 900}

.txt-upper{text-transform: uppercase;}
.txt-center{text-align: center;}
.txt-right{text-align:right; }
.txt-bold{font-weight:bold;}
.txt-normal{font-weight: normal;}
.txt-italic{font-style: italic;}

.margin-t0{margin-top: 0px !important}
.margin-t20{margin-top: 20px !important}
.margin-t40{margin-top: 40px !important}
.margin-t60{margin-top: 60px !important}
.margin-r20{margin-right: 20px !important}
.margin-r40{margin-right: 40px !important}
.margin-r60{margin-right: 60px !important}
.margin-b0{margin-bottom: 0px !important}
.margin-b20{margin-bottom: 20px !important}
.margin-b10{margin-bottom: 10px !important}
.margin-b40{margin-bottom: 40px !important}
.margin-b60{margin-bottom: 60px !important}
.margin-l20{margin-left: 20px !important}
.margin-l40{margin-left: 40px !important}
.margin-l60{margin-left: 60px !important}

.padding-t0{padding-top: 0px !important}
.padding-t20{padding-top: 20px !important}
.padding-t40{padding-top: 40px !important}
.padding-t60{padding-top: 60px !important}
.padding-r20{padding-right: 20px !important}
.padding-r40{padding-right: 40px !important}
.padding-r60{padding-right: 60px !important}
.padding-b0{padding-bottom: 0px !important}
.padding-b20{padding-bottom: 20px !important}
.padding-b40{padding-bottom: 40px !important}
.padding-b60{padding-bottom: 60px !important}
.padding-l20{padding-left: 20px !important}
.padding-l40{padding-left: 40px !important}
.padding-l60{padding-left: 60px !important}

.space20, .space40, .space60{display: none;}

.width-40{width: 40px !important}
.width-60{width: 60px !important}
.width-80{width: 80px !important}


/* Elements styles */
.btn{
	padding: 10px 26px;
	font-weight: 400;
	text-decoration: none;
	display: inline-block;
	margin: 10px 10px 10px 0;
	cursor: pointer;
	transition: 350ms;
	border: none;
}
.btn:hover{
	filter: brightness(0.9);
	transform: translateY(-2px);
}
.btn-red{
	background-color: var(--color-main);
	color: white;
}
.btn-white{
	background-color: white;
	color: black;
}
.btn-down{
	display: block;
	width: fit-content;
}

.bg-gray{	background: var(--color-gray);}
.bg-gray-light{	background: var(--color-gray-light);}
.bg-white{background: white}


.list-icon{
	list-style: none;
	margin: 0;
	padding: 0;
}
.list-icon li{
	position: relative;
	padding: 0 0 10px 22px;
 	margin: 0 0 10px 0;
}
.list-check li:before{
	content: "\f00c";
	position: absolute;
	top: 1px;
	left: 0;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--color-main);
}
.list-bullet li:before{
	content: "\f111";
	position: absolute;
	top: 5px;
	left: 0;
	font-family: "Font Awesome 6 Free";
	font-size: 9px;
	font-weight: 900;
	color: var(--color-main);
}
.note span {
    font-size: 14px;
    line-height: 1.4em;
    display: block;
    color: var(--color-gray);
}

.icon-box-small{
	display: grid;
}
.icon-box-small h6{
	font-size: 17px;
    margin: 10px 0 6px;
}

input, select, textarea {
    width: 400px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: none;
    font-size: 14px;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
}
input:focus, select:focus, textarea:focus {
    color: var(--color-main);
}


.container{}
.wrap{
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 60px 30px;
}

.container-multiple{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 25px;
	justify-items: center;
}
.container-half{
	display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  grid-gap: 25px;
}
.container-3-colum{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 25px;
}
.container-4-colum{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 25px;
}
.container-5-colum{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 25px;
}

.cont-width60 {width: 60%;}
.cont-width80 {width: 80%;}

.cont-vcenter{margin-top: 300px;}
.m-center{ margin: 0 auto; }

.item-vcenter{
	display: block;
	margin: 0 auto;
}

/*** HEADER ***/
header{
	position: fixed;
	z-index: 10;
	width: 100%;
	transition: 350ms;
}
header.normal{

}
header > .wrap{
	padding:20px;
}
.header-top{
	display: flex;
  	justify-content: flex-end;
  	align-items: center;
}
.header-top-btn.wa a {
    margin-left: 10px;
}
.header-top-btn{
	padding: 0px 10px 5px;
	color: white;
	display: flex;
	align-items: center;
}
.header-top-btn a{
	text-decoration: none;
	color: white;
	transition: 350ms;
}
.header-top-btn a i{
	margin: 0 8px 0 0;
}
.header-top-btn.wa a{
	background: rgba(255, 255, 255, 0.3);
	border: solid 2px white ;
	border-radius: 25px;
	padding: 5px 12px 5px 8px;
	transition: 350ms;
	display: inline-flex;
}
.header-top-btn.wa a:hover{
	background: #25d366;
	border: solid 2px #25d366;
	transform: translateY(-2px);
}
.header-top-btn.wa img.icon-wa {
    width: 20px;
    margin-right: 5px;
}
/*.header-top-btn.wa a i{
	background: #25d366;
  border-radius: 50%;
  padding: 4px;
 }*/

.header-main{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-main .main-logo img{
	height: 60px;
}
.main-menu ul{
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-end;
}
.main-menu li {
    list-style: none;
    display: inline-block;
    padding: 0 10px;
}
.main-menu li a{
	color: white;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: 250ms;
    font-family: var(--font-main);
}
.main-menu li a:hover {
    font-weight: bold;
    border-bottom: solid 5px var(--color-main);
}

header.sticky{
	background: var(--color-main);
}
header.sticky .header-top-btn, header.sticky .header-top-btn a, header.sticky .header-top-btn a i{
	font-size: 11px;
}
header.sticky .header-main .main-logo img{
	height: 60px;
}
header.sticky > .wrap {
    padding: 10px;
}
/*header.sticky .main-menu{
  display: none;
}*/
header.sticky .main-menu input[type=checkbox]:checked ~ #menu{
	top: 56px;
    right: 0;
    width: 100%;	
}
header.sticky .header-top-btn.wa img.icon-wa {
    width: 14px;
}
header.sticky .header-top-btn.wa a{
	padding: 4px 8px 4px 6px;
}

.main-menu #menu {
    transition: 350ms;
}
.main-menu .show-menu{
	display: none;
}

.main-menu input[type=checkbox]{
    display: none;
    opacity: 0;
}

/*Show menu when invisible checkbox is checked*/
.main-menu input[type=checkbox]:checked ~ #menu{
	display: grid;
	gap: 25px;
	justify-items: center;
	justify-content: center;
	position: absolute;
	z-index: 10;
	top: 99px;
	right: 30px;
	opacity: 1;
	width: calc(100% - 60px);
	background: var(--color-main);
	box-shadow: 0 10px 24px rgb(0 0 0 / 20%);
	padding: 30px 20px;
}



/*** HOME ***/
#sl-home{
	background-image: url(../img/BG_porquearrendar.jpg);
}
.bg-video{
	position: absolute;
 	right: 50%;
 	top: 0;
 	object-fit: cover;
 	transform: translateX(50%);
 	height: -webkit-fill-available;
}
.slider-home{
	min-height: 750px;
	overflow: hidden;
	position: relative;
}
.slider-home article{
	position: relative;
	z-index: 2;
}
.slider-home article.slider-home-text{
	margin-top: 300px;
	margin-bottom: 3%;
}
.slider-home .cont-vcenter>p{
	font-size: 22px;
}

#home-services{
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, var(--color-gray-light) 60%);
}
.container-shadow{
	background: white;
	padding: 20px;
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
}

#home-client img.gray-logo{
	width: 160px;
	filter: grayscale(100%);
}
.grid-service{
	grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) !important;
	background: rgb(0 0 0 / 60%);
}
.grid-service>div {
    padding: 30px;
}
.grid-service .icon-box-left {
    display: grid;
    align-items: center;
    grid-gap: 20px;
    grid-template-columns: 1fr 2fr;
}

/*** US ***/
#us-video iframe {
    width: 100%;
    max-width: 860px;
    aspect-ratio: 16 / 9;
}
#quienes-description .container-third-single, #quienes-pilares .container-half-single{
	margin: 30px;
}
#quienes-description img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
#quienes-pilares .icon-box-left{
display: flex;
  align-items: flex-start;
  grid-gap: 20px;
  margin-bottom: 50px;
}

/*** WHY ***/
h2.sub-sm {
    font-size: 1.5rem !important;
}

/*** CLIENTS ***/
#us-testinonials p{
font-size: 19px;
}
.client-sectores h3{
	font-size: 1rem !important;
	font-family: var(--font-text);
	margin: 0;
}

/*** REQ ***/
.dash-title:after {
    content: "";
    display: block;
    width: 82px;
    height: 5px;
    background: var(--color-main);
    margin-top: 10px;
}

/*** CONTACT ***/
#co-form .container-half-single{
	width: 100%;
}
#co-form .container-multiple{
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
}
#co-form iframe{
	width: 100%;
	aspect-ratio: 12 / 9;
}
#co-form .redes{
	display: flex;
	gap: 10px;
}
#co-form .redes i.fa-brands:before{
	color: var(--color-main);
}


/*** FORM ***/
form .note span{
    color: rgb(255 255 255 / 55%) !important;
}
form .note span:nth-child(2) {
    color: white !important;
}
#confirmation-message {
	display: grid;place-items: center;
	background: green;
	color: white;
	font-size: 14px;
	margin-top: 10px;
	padding: 15px;
	width: 100%; 
	max-width: 400px; 
}
#contact-form #confirmation-message .green:before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-size: 22px;
    margin-right: 10px;
}

#contact-form .alert .red{
    background: #f5c8cf;
    padding: 15px;
    color: #ad1c1c;
    margin-bottom: 20px;
}
#contact-form .alert .red:before{
	content: "\f071";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    margin-right: 10px;
}
#contact-form .g-recaptcha, #contact-form #confirmation-message{
	margin-bottom: 16px;
}
#contact-form .hidden{

}

/*** GTM Consent ***/
div#consent-banner {
    display: none;
    z-index: 1000000000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(0 0 0 / 90%);
    width: clamp(50%, 800px, 90%);
    padding: 50px 30px;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    transition: display 2s ease-in;
    color: white !important;
}
div#consent-banner p {
	margin-bottom: 0;
    font-size: 14px;
}


/*** Footer ***/
footer{
	background: #262626;
}
footer .container-multiple-footer{
	display: grid;
	grid-template-columns: repeat(5, minmax(208px, 1fr));
	grid-gap: 20px;
}
footer .column-40{
	grid-column: 1 / span 2;
}
footer .column-40 iframe{
	width: 80%; 
	height:250px;
}
footer .column-60{
	grid-column: 3 / span 3;
}
footer a{
	color: white;
	text-decoration: none;
	margin: 0 6px;
}
footer a:hover{
	color: var(--color-main);
}

@media (min-width:4500px){
	.slider-home{ height:70vh }
	.bg-video{ top:-100% }
}
@media (min-width:2000px){
	.bg-video{width: 100%}
}
@media (min-width:1300px){
	/*h1 {font-size:62px;}*/
	h1 {font-size:58px;}
	h2 {font-size:42px;}
	h3 {font-size:22px;}
	h4 {font-size:28px;}
	h5 {font-size:22px;}
	.sub6{
		font-family: var(--font-main);
		font-size:22px;
		font-weight: 400;
		color: black;
		margin: 0 0 25px;
		line-height: 1.15em;
	}
}
@media (max-width: 1150px){
	footer .column-60{grid-column:3 / span 2}
}
@media (max-width: 900px){
	.bg-video{ height: 100%; width: auto;}
	.form-gral{ grid-column: 1}
	footer .column-60{ grid-column:3}
	.container-3-colum, .container-4-colum, .container-5-colum, .container-half{ grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 800px){
	footer .column-60{ grid-column:1}
}
@media (max-width: 584px){
	.space20{height: 20px; display: initial;}
	.space40{height: 40px; display: initial;}
	.space60{height: 60px; display: initial;}
	.cont-width60, .cont-width80{width: 100%}
	
	.header-top{ justify-content: center;align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 1px white;}
	.header-top-btn, .header-top-btn a, .header-top-btn a i{font-size: 11px;}
	.header-top-btn.wa a{ padding:4px 8px 4px 6px;}
	.header-top-btn.wa img.icon-wa { width: 14px;}
	header.sticky > .wrap { padding: 12px 16px 8px}
	header.sticky .header-top{ padding-bottom: 12px; margin-bottom: 10px}
	header .main-menu{ 
    	padding: 30px;
    	transition: 350ms;
    }
    header .main-menu input[type=checkbox]{
    	background: var(--color-main);
    	padding: 60px 30px 30px;
	}
	header .main-menu .lines>img{
		width: 30px;
		float: right;
		position: relative;
		z-index: 12;
		right: 0;
		top: 0;
	}
	header .main-menu ul {
		position: static;
		display: none;
	}
	header .main-menu li{
		display: list-item;
	}
	header .main-menu .show-menu {
		display:block;
	}
	footer .container-multiple-footer{grid-template-columns: 1fr;}
	footer .column-40,footer .column-60{grid-column:1}
	footer .column-40 iframe{ width: 100%;}

	.reverse{ display: flex; flex-direction: column-reverse; flex-wrap: wrap;}
	.slider-home article.slider-home-text{ bottom: 10%;}

	#co-form div:is(.padding-l40, .padding-r40){padding: 0 !important;}

	}
@media (max-width: 450px){
	/*h1 {font-size:42px;}*/
	h1 {font-size:34px;}
	h2 {font-size:28px;}
	h3 {font-size:14px;}
	h4 {font-size:16px;}
	h5 {font-size:14px;}
	.sub6{
		font-family: var(--font-main);
		font-size:14px;
		font-weight: 400;
		color: black;
		margin: 0 0 25px;
		line-height: 1.15em;
	}
	input, select, textarea {
	width: 100%;
}