@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,		
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
input, textarea, select, button,
header, section, article, footer, aside, figure, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	text-decoration:none;
	color:inherit;
	background-color:transparent;
	}
strong {
	font-weight: bold;
	}
:focus {
	outline:0;
	}
body{
	line-height: 1;
	}
ol, ul {
	list-style: none;
	}
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	text-align: left;
	font-weight: normal;
	}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}
del {
	text-decoration: none;
}
html {
	height: 100%;
	font-size: 100%;
	overflow-x:hidden;
	overflow-y:scroll;
}
body {
	font-family: 'Outfit', sans-serif;
	text-rendering: geometricPrecision;
	font-weight: 300;
	font-size:100%;
	line-height:1;
	color:#22292F;
	min-height:100%;
	background: #fff;
}
:focus {
	box-shadow: 0 0 1px 0 #111;
}
@media (min-width: 960px) {
	::-webkit-scrollbar {
	  width: .75rem;
	  height: .75rem;
	}
	::-webkit-scrollbar-track {
		background: transparent;
	  border-radius: 1rem;
	}
	::-webkit-scrollbar-thumb {
	  background: #12345620;
	  border-radius: 1rem;
	  box-shadow: inset 0 0 0 3px #f0f0f0;
	}
	::-webkit-scrollbar-thumb:hover {
	  background: #12345660; 
	}
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}

@media (max-width: 960px) {
	.mobWrapper {
		position: relative;
		overflow-x: hidden;
		width: 100%;
	}
}

.section {
	padding: 10rem 0;
}
.page {
	font-size: 1rem;
	padding: 0 2.5rem;
	max-width: 80rem;
	margin: 0 auto;
	clear:both;
}
.row {
	margin: 0 -1.25rem -2.5rem;
	font-size: 0;
	clear: both;
}
.row.rtl {
	direction: rtl;
}
* + .row,
.row + * {
	margin-top: 4rem;
}
.page:after,
.row:after {
	content:'';
	display:table;
	width:100%;
	clear:both;
}
.col,
.gap {
	font-size: 1rem;
	box-sizing: border-box;
	padding: 0 1.25rem;
	min-height: 1px;
	text-align: left;
	direction: ltr!important;
	margin-bottom: 2.5rem;
}
.col > *:last-child {
	margin-bottom: 0!important;
}
@media (min-width: 960px) {
	.col,
	.gap {
		display: inline-block;
		vertical-align: top;
	}
	.v_ac .col,
	.v_ac .gap {
		vertical-align: middle;
	}
	.col1 {width: 8.333%;}
	.col2 {width: 16.666%;}
	.col3 {width: 25%;}
	.col4 {width: 33.333%;}
	.col5 {width: 41.666%;}
	.col6 {width: 50%;}
	.col7 {width: 58.333%;}
	.col8 {width: 66.666%;}
	.col9 {width: 75%;}
	.col10 {width: 83.333%;}
	.col11 {width: 91.666%;}
	.col12 {width: 100%;}
}
@media (max-width: 959px) {
	.section {
		padding: 3.5rem 0;
	}
	.row + *,
	.col + .col,
	.gap + .col {
		margin-top: 2.5rem;
	}
}

picture,
svg,
img {
	display: block;
}
svg {
	width: auto;
	height: auto;
}
svg,
img {
	max-width: 100%;
}

.main h2 {
	font-size: 1rem;
	color: #5F6367;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.main h3 {
	font-size: 3.75rem;
	font-weight: 400;
	color: #FF212A;
	margin-bottom: 1.5rem;
}
.main h3 + p {
	font-size: 1.5rem;
	font-weight: 400;
	color: #606367;
}
.main h4 {
	font-size: 3rem;
	font-weight: 500;
	margin-bottom: 1rem;
}
.main h5 {
	font-size: 1.375rem;
	margin-bottom: .25rem;
	font-weight: 500;
}
.main p {
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.4em;
	margin-bottom: 1rem;
}
.bt {
	display: inline-block;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 400;
	line-height: 3.75rem;
	padding: 0 1.875rem;
	background: #FF212A;
	color: #fff;
	border-radius: 10rem;
	transition: all 500ms cubic-bezier(.7,0,.3,1);
}
.bt.btG {
	background: none;
	box-shadow: inset 0 0 0 .125rem #fff;
}
.bt:hover {
	color: #fff!important;
	background: #19191B!important;
}
.bt i {
	margin-right: .5rem;
}
.bt.btI {
	padding: 0;
	line-height: 2.75rem;
	text-align: center;
	width: 2.75rem;
	background: #00000066;
}
.bt.btI i {
	margin: 0;
	color: #FF212A;
	position: relative;
	top: 1px;
}

.header {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 999;
	text-align: center;
	color: #fff;
	padding: 1.5rem 0;
	height: 3.75rem;
}
.header:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
.header ul li a {
	display: block;
	font-size: 1rem;
	line-height: 1.875rem;
}
.header .bt {
	font-size: .875rem;
	line-height: 1.875rem;
	padding: 0 1rem;
}
@media (min-width: 960px) {
	.header {
		height: 4.5rem;
	}
	.branding {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 1.5rem;
	}
	.branding img {
		height: 4.5rem;
	}
	.header ul {
		margin-top: 1rem;
	}
	.header ul li {
		width: 6rem;
		display: inline-block;
		margin: 0 1vw;
	}
	.bt_menu {
		display:none;
	}
	.header ul li:nth-child(2) {
		padding-right: 6vw;
	}
	.header ul li:nth-child(3) {
		padding-left: 7vw;
	}
}

.featured {
	height: 100vh;
	background: #000 url(../images/featured-04-2023.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
}
.featured:after {
	content: '';
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 27%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 27%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 27%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 50%;
	z-index: 10;
}
.featured .page div {
	position: relative;
	top: 50vh;
	transform: translateY(-55%);
	text-align: center;
	color: #fff;
	z-index: 40;
}
.featured h1 {
	font-size: 5rem;
	font-weight: 500;
}
.featured p {
	max-width: 40rem;
	font-size: 1.5rem;
	line-height: 1.2em;
	font-weight: 400;
	margin: 2rem auto;
}

.main {
	position: relative;
	z-index: 20;
	margin-top: -8.75rem;
}


#valores {
	color: #fff;
	height: 8.75rem;
	padding: 0;
}
#valores p {
	font-size: 1rem;
}
#valores .col {
	position: relative;
}
#valores img {
	width: 7rem;
	display: inline-block;
}
@media (min-width:960px) {
	#valores img {
		position: absolute;
		right: 100%;
		top: 50%;
		transform: translateY(-52.5%);
		margin-right: -1rem;
	}
}


#empresa {
	position: relative;
}
#empresa:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 33.333%;
	background: #19191B;
	z-index: -1;
}
.videoWrapper {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: .5rem;
	padding-bottom: 56.25%;
}
.videoWrapper iframe {
	position: absolute;
	left: 0;
	top: 0;
}
.videoWrapper i {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%) scale(1);
	width: 4rem;
	height: 4rem;
	background: #FF212A;
	border-radius: 10rem;
	background-size: 1.5rem auto;
	background-image: url("data:image/svg+xml,%3Csvg width='71' height='80' viewBox='0 0 71 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M71 40L0 80V0L71 40Z' fill='white'/%3E%3C/svg%3E%0A");
	background-position: 57.5% 50%;
	background-repeat: no-repeat;
	transition: all 500ms cubic-bezier(.7,0,.3,1);
}
.videoWrapper:hover i {
	transform: translate(-50% , -50%) scale(1.2);
}

#productos {
	padding: 0;
}
.cardsWrapper .card {
	height: 75vh;
	position: relative;
	background: #111;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
@media (min-width: 960px) {
	.cardsWrapper {
		font-size: 0;
	}
	.cardsWrapper .card {
		width: 33.333%;
		font-size: 1rem;
		display: inline-block;
		vertical-align: top;
	}
}
.cardsWrapper .card div {	
	position: absolute;
	left: 0;
	bottom: 10vh;
	right: 0;
	padding: 0 2rem;
	text-align: center;
	color: #fff;
	overflow: hidden;
	transition: all 500ms cubic-bezier(.7,0,.3,1);
	z-index: 20;
}
.cardsWrapper .card:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 50%;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
	transition: all 500ms cubic-bezier(.7,0,.3,1);
}
.cardsWrapper .card:hover:after {
	height: 70%;
background: -moz-linear-gradient(top,  rgba(255,33,42,0) 0%, rgba(255,33,42,1) 100%);
background: -webkit-linear-gradient(top,  rgba(255,33,42,0) 0%,rgba(255,33,42,1) 100%);
background: linear-gradient(to bottom,  rgba(255,33,42,0) 0%,rgba(255,33,42,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff212a', endColorstr='#ff212a',GradientType=0 );

}
.cardsWrapper .card div h3 {
	margin-bottom: 1rem;
}
.cardsWrapper .card div p {
	font-size: 1rem;
}
.cardsWrapper .card div .bt {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	opacity: 0;
	visibility: hidden;
}
.cardsWrapper .card:hover div {
	padding-bottom: 4rem;
}
.cardsWrapper .card:hover div .bt {
	opacity: 1;
	visibility: visible;
}
@media (max-width: 960px) {
	.cardsWrapper .card div {
		padding-bottom: 4rem;
	}
	.cardsWrapper .card div .bt {
		opacity: 1;
		visibility: visible;
	}
}

#fabricantes {
	position: relative;
}
#fabricantes:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 50vw;
	background: #19191B;
	z-index: -1;
}
#fabricantes p {
	color: #fff;
	max-width: 20em;
}
#fabricantes .sliderWrapper {
	padding-bottom: 50%;
	position: relative;
}
#fabricantes .slider {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#fabricantes .slide {
	background: #fff!important;
	float: left;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-align: center;
}
#fabricantes .slide img {
	display: inline-block;
	width: 30%;
}
#fabricantes .sliderNav {
	position: absolute;
	left: 0;
	bottom: -2rem;
	right: 0;
	text-align: center;
}
#fabricantes .sliderNav a {
	display: inline-block;
	width: .75rem;
	height: .75rem;
	background: #000;
	margin: 0 .25rem;
	border-radius: 1rem;
	font-size: 0;
}
#fabricantes .sliderNav a.activeSlide {
	background: #FF212A;
}

#instalacion {
	text-align: center;
	background: #000 url(../images/instalaciones.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
}
#instalacion h3 + p {
	color: #fff;
	max-width: 25em;
	margin: 0 auto 3.5rem;
}
#instalacion ul {
	font-size: 0;
	max-width: 55rem;
	margin: 0 auto 2rem;
}
#instalacion li {
	box-sizing: border-box;
	font-size: 1.25rem;
	display: inline-block;
	width: 33.333%;
	padding-top: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16.5' cy='16.5' r='15.5' stroke='%23FF192B' stroke-width='2'/%3E%3Cpath d='M9 16.5865L14.2683 22L24 12' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 1.75rem auto;
	margin-bottom: 2.5rem;
}
#instalacion li strong {
	display: block;
}

#cta {
	text-align: center;
	background: #FF212A url(../images/cta-bg.jpg) no-repeat center top;
	background-size: 100% auto;
	background-attachment: fixed;
	background-color: #000;
	background-size: cover;
}
#cta h3 {
	color: #fff;
}
#cta p {
	max-width: 40rem;
  margin: 2rem auto;
  color: #fff;
}

#contacto {
	background: #19191B;
	position: relative;
	color: #fff;
	padding-top: 65vh;
	padding-top: calc(65vh + 4rem);
}
#contacto iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 65vh;
	z-index: 10;
}
#contacto:after {
	content: '';
	position: absolute;
	left: 0;
	top: calc(65vh - 5.25rem);
	right: 0;
	z-index: 99999;
	height: 12.5vh;
	background: -moz-linear-gradient(top,  rgba(25,25,27,0) 0%, rgba(25,25,27,1) 100%);
background: -webkit-linear-gradient(top,  rgba(25,25,27,0) 0%,rgba(25,25,27,1) 100%);
background: linear-gradient(to bottom,  rgba(25,25,27,0) 0%,rgba(25,25,27,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0019191b', endColorstr='#19191b',GradientType=0 );
}
#contacto .col {
	position: relative;
	z-index: 30;
}
#contacto p {
	font-size: 1.125rem;
	color: #fff;
}
#contacto p span {
	display: block;
	font-size: .875rem;
	margin-top: .5rem;
	text-transform: uppercase;
	font-weight: 300;
	color: #5F6367;
}
.social {
	margin-top: 2rem;
}
.social li {
	display: inline-block;
	margin-right: 1rem;
	font-size: 1.5rem;
}
.social li a {
	transition: all 500ms cubic-bezier(.7,0,.3,1);
	display: block;
}
.social li a:hover {
	color: #FF212A;
}

#contacto .form {
	padding-top: 2.5rem;
}
.form .field {
	margin-bottom: 1.125rem;
}
.form .field label {
	display: block;
  font-size: .875rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-weight: 300;
  color: #5F6367;
}
.form .field input,
.form .field select,
.form .field textarea {
	width: 100%;
	padding: .75rem 1rem;
	box-sizing: border-box;
	color: #111;
	background: #fff;
	border-radius: .25rem;
}
.form .status {
	padding: 1rem 0 3rem;
}

.footer {
	background: #000;
	padding: 3rem 0;
	text-align: center;
	color: #fff;
}

.bt_fixed {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	z-index: 9999;
	width: 4rem;
	height: 4rem;
	line-height: 4rem;
	font-size: 1.25rem;
	text-align: center;
	background: #039A71;
	color: #fff;
	border-radius: 10rem;
}

@media (max-width: 960px) {
	html {
		font-size: 75%;
	}
	.menu {
		display: none;
	}
	.bt_menu {
		display: none;
	}
	.header {
		text-align: center;
	}
	.branding {
		display: inline-block;
	}
	.branding img {
		height: 7rem;
	}
	.featured h1 {
		font-size: 4rem;
	}
	#valores {
		height: auto;
		background: #000;
		padding: 2rem 0;
	}
	#valores .row {
		margin: 0;
	}
	#valores .gap {
		display: none;
	}
	#valores .col {
		text-align: center;
		margin: 3rem 0!important;
	}
	#empresa:before {
		width: auto;
		left: 0;
		top: auto;
		height: 50vw;
	}
	.cardsWrapper .card {
		height: 70vh;
	}
	#fabricantes:before {
		width: auto;
		right: 0;
		bottom: auto;
		height: 26rem;
	}
	#fabricantes .col + .col {
		margin-top: 7rem;
	}
	#contacto {
		padding-top: 50vw;
	}
	#contacto iframe {
		bottom: auto;
		height: 50vw;
		width: 100%;
	}
	#instalacion ul {
		width: 14rem;
	}
	#instalacion li {
		width: 100%;
	}
}