@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {

/* Colors: */
--mid-grey: #E6E6E6;
--grey: #B3B3B3;
--dark-grey: #808080;
--textos: #292930;
--black: #000000;

/* Font/text values */
--roboto: Roboto;
--roboto-condensed: Roboto Condensed;

}

*{
    font-family: 'Roboto', sans-serif;
}


.headerBlanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 90px;
	--maxFontSize: 120px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:white;
	text-transform: uppercase;
}

.headerLightBlanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 90px;
	--maxFontSize: 120px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:white;
	text-transform: uppercase;
}
.headerSubtitleBlanco{
	font-family: 'Roboto', sans-serif;
	--minFontSize: 16px;
	--maxFontSize: 24px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.2));
	letter-spacing: 0.72px;
	color:white;
}
.titulo1Blanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 55px;
	--maxFontSize: 95px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:white;
	text-transform: uppercase;
}
.titulo1LightBlanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 55px;
	--maxFontSize: 95px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:white;
	text-transform: uppercase;
}
.titulo2Blanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 28px;
	--maxFontSize: 32px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.5));
	color:white;
	text-transform: uppercase;
}
.tituloBannerBlanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 70px;
	--maxFontSize: 90px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:white;
	text-transform: uppercase;
}
.tituloBannerLightBlanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 70px;
	--maxFontSize: 90px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:white;
	text-transform: uppercase;
}
.subtituloBlanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 10px;
	--maxFontSize: 14px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 400;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 2));
	color:white;
	letter-spacing: 1.4px;
}
.subtituloBannerBlanco{
	font-family: 'Roboto', sans-serif;
	--minFontSize: 16px;
	--maxFontSize: 20px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 2));
	color:white;
}
.bodyBlanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 12px;
	--maxFontSize: 16px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 400;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.7));
	color:white;
}
.body2Blanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 16px;
	--maxFontSize: 20px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.7));
	color:white;
}
.body3Blanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 20px;
	--maxFontSize: 24px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.7));
	color:white;
}
.ctaBlanco{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 12px;
	--maxFontSize: 16px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 400;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 2));
	color:white;
	letter-spacing: 2.56px;
	text-transform: uppercase;
	text-decoration:none!important;
}
.ctaBlanco:hover{
	color:white;
}
.header{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 90px;
	--maxFontSize: 120px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:var(--textos);
	text-transform: uppercase;
}
.headerLight{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 90px;
	--maxFontSize: 120px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:var(--textos);
	text-transform: uppercase;
}
.headerSubtitle{
	font-family: 'Roboto', sans-serif;
	--minFontSize: 18px;
	--maxFontSize: 24px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.2));
	letter-spacing: 0.72px;
	color:var(--textos);
}
.titulo1{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 55px;
	--maxFontSize: 95px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:var(--textos);
	text-transform: uppercase;
}
.titulo1Light{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 55px;
	--maxFontSize: 95px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize));
	color:var(--textos);
	text-transform: uppercase;
}
.titulo2{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 28px;
	--maxFontSize: 32px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.5));
	color:var(--textos);
	text-transform: uppercase;
}
.subtitulo{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 10px;
	--maxFontSize: 14px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 400;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 2));
	color:var(--textos);
	letter-spacing: 1.4px;
}
.subtitulo3{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 20px;
	--maxFontSize: 32px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 2));


}
.subtitulo2{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 20px;
	--maxFontSize: 32px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.5));
	color:var(--dark-grey
	)
}
.body{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 12px;
	--maxFontSize: 16px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 400;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.7));
	color:var(--textos);
}
.body2{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 16px;
	--maxFontSize: 20px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.7));
	color:var(--textos);
}
.textos3 {
	font-family: 'Roboto', sans-serif;
	--minFontSize: 10px;
	--maxFontSize: 16px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 300;
	line-height: clamp( (var(--minFontSize), var(--scaler), var(--maxFontSize)*2) );
	letter-spacing: 0.48px;
}
.lead-head {
	font-family: 'Roboto Condensed', sans-serif!important;
	--minFontSize: 10px;
	--maxFontSize: 16px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 700;
	line-height: clamp( (var(--minFontSize), var(--scaler), var(--maxFontSize)*2) );
	letter-spacing: 2.88px!important;
	text-transform: uppercase;
}
.cta{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 12px;
	--maxFontSize: 16px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 400;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 2));
	color:var(--textos);
	letter-spacing: 2.56px;
}
.nombreProducto{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 18px;
	--maxFontSize: 23px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.1));
	letter-spacing: 0.69px;
	text-transform: uppercase;
}
.descripcionProducto{
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 10px;
	--maxFontSize: 12px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	font-weight: 600;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.5));
	text-transform: uppercase;
	letter-spacing: 2.16px
}

.price{
    font-family: 'Roboto Condensed', sans-serif; 
    --minFontSize: 18px;
    --maxFontSize: 24px;
    --scaler: 10vw;
    font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-weight: 700;
    line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}

.brandFooter{
    font-family: 'Roboto Condensed', sans-serif; 
    --minFontSize: 14px;
    --maxFontSize: 16px;
    --scaler: 10vw;
    font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-weight: 400;
    line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	text-transform:uppercase;
	letter-spacing:3.2px;
}
.brandFooterBold{
    font-family: 'Roboto Condensed', sans-serif; 
    --minFontSize: 14px;
    --maxFontSize: 16px;
    --scaler: 10vw;
    font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
    font-weight: 700;
    line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
	text-transform:uppercase;
	letter-spacing:3.2px;
}
#brand-name-footer {
    margin-top: 0.25rem;
    text-align: start;
    padding-left: 1rem;
}

.copyright {
font-family: 'Roboto Condensed', sans-serif;
--minFontSize: 10px;
--maxFontSize: 12px;
--scaler: 10vw;
font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
font-weight: 400;
line-height: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
text-transform: uppercase;
letter-spacing: 3.2px;
margin-bottom:0!important;
}
a.copyright:hover {
border-bottom: 2px solid white;
}
/* botones */


.btn-black {
    font-family: 'Roboto Condensed', sans-serif;
    --minFontSize: 12px;
    --maxFontSize: 14px;
    --scaler: 10vw;
    font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) )!important;
    font-weight: 400;
    line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.5));
    letter-spacing: 2.56px;
    color: white;
    border: 1px solid var(--textos);
    text-transform: uppercase;
    opacity: 1;
    background-color: black!important;
    border-radius: 0!important;
    padding: 0.5rem 2rem!important;
}
.btn-call {
	font-family: 'Roboto Condensed', sans-serif;
	--minFontSize: 12px;
	--maxFontSize: 14px;
	--scaler: 10vw;
	font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) )!important;
	font-weight: 400;
	line-height: calc( clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) * 1.5));
	letter-spacing: 2.56px;
	color: #292930;
	border: 1px solid var(--textos);
	text-transform: uppercase;
	opacity: 1;
	background-color: white!important;
	border-radius: 0!important;
	padding: 1rem 2rem!important;
	margin-right: 33px;
}