@charset 'utf-8';

:root{

	--dark-blue: #043d5d;

	--light-blue: #0076a8;

	--light-grey: #f9f9f9;

	--medium-grey: #ededed;

	--dark-grey: #3a3a3a;


	--primary-font: 'Montserrat', sans-serif;

	--primary-weight: 800;


	--text-font: 'Catamaran', sans-serif;

	--text-weight: 200;

	--text-bold: 600;


	--secondary-font: 'Inter', sans-serif;

	--secondary-weight: 400;

	--secondary-bold: 700;

}

/*Text*/

h1{
	font-family: var(--primary-font);
	font-weight: var(--primary-weight);
	color: var(--dark-blue);
}

h1 span{
	color: var(--light-blue);
}

h2{
	font-family: var(--secondary-font);
	font-weight: var(--secondary-bold);
	color: var(--dark-blue);
	text-transform: uppercase;
	border-bottom: solid 1px;
	font-size: 1.4em;
}

h2 span{
	border-bottom: solid 3px var(--dark-blue);
}

p{
	font-family: var(--text-font);
	font-weight: var(--text-weight);
	color: var(--dark-blue);
	font-size: 1.2em;
	line-height: 1.2em;
}

p b{
	font-weight: var(--text-bold);
}

h3.subtitulo{
	font-size: 1.2em;
	color: var(--dark-grey);
}

/*Buttons*/

.btn-primary{
	background-color: transparent;
	border: solid 1px var(--light-blue);
	color: var(--light-blue);
	border-radius: 7px;
	font-family: var(--text-font);
	font-weight: var(--text-weight);
	font-size: 1.2em;
}

.btn-primary:hover{
	background-color: var(--light-blue);
	border-color: var(--light-blue);
}

.btn-secondary{
	background-color: var(--light-blue);
	border: solid 1px var(--light-blue);
	color: white;
	border-radius: 7px;
	font-family: var(--text-font);
	font-weight: var(--text-weight);
	font-size: 1.2em;
}

.btn-secondary:hover{
	background-color: var(--dark-blue);
	border-color: var(--dark-blue);
}


/*Menu*/

#menu{
	background-color: white;
	box-shadow: 2px 0 7px rgba(0,0,0,.3);
}

.nav-link{
	font-family: var(--secondary-font);
	font-weight: var(--secondary-weight);
	text-transform: uppercase;
	color: var(--dark-blue);
}

.nav-link.active, .nav-link:hover{
	font-weight: var(--secondary-bold);
	color: var(--dark-blue)!important;
}

.lang{
	border-radius: 35px;
	max-height: 35px;
	max-width: 35px;
	border: solid 2px transparent;
	padding: 0!important;
}

.lang.active-lang{
	border-color: #000;
}

/**
 * 
 * 
 * Sections*/

/*Header*/

#header{
	background-image: url('../img/header.jpg');
	background-size: cover;
	background-position: center;
	height: 100vh;
}

#header .container, #header .row{
	height: inherit;
}

/*Nosotros*/

#nosotros-img{
	background-image: url('../img/nosotros.jpg');
	background-size: cover;
	background-position: center;
	min-height: 50vh;
}

.nav-underline{
	gap: 0;
}

#nosotros-tabs .nav-link{
	font-family: var(--secondary-font);
	font-weight: var(--secondary-weight);
	color: var(--dark-blue);
	text-transform: uppercase;
	border-bottom: solid 1px;
	transition-duration: .2s;
}

#nosotros-tabs .nav-link.active{
	font-weight: var(--secondary-bold);
}

#nosotros-tabs .nav-link.active, #nosotros-tabs .nav-link:hover{
	border-bottom-width: var(--bs-nav-underline-border-width);
}

/*Productos*/

#productos{
	background: var(--light-grey);
	background-image: url('../img/product-bg.png');
	background-blend-mode: multiply;
	background-size: cover;
	background-attachment: fixed;
}

.product-title{
	font-family: var(--text-font);
	font-weight: var(--text-bold);
	font-size: 1.3em;
	color: var(--dark-grey);
}

.product-description{
	color: var(--dark-grey);
}

.peso{
	background-color: var(--dark-grey);
	color: white;
	display: inline-block;
	font-weight: 600;
	width: 40px;
	height: 20px;
	text-align: center;
	align-content: center;
	border-radius: 2px;
}

.peso.dm{
	width: 47px;
}

.product-img, .product-description, .product-title{
	transition-duration: .3s;
}

.swiper-slide.swiper-slide.active:not(.swiper-slide.swiper-slide.active ~ .swiper-slide.swiper-slide.active){
	/*border: solid 2px red;*/
}

.swiper-slide .product-title, .swiper-slide .product-description{
	opacity: .5;
}

.swiper-slide.swiper-slide-active .product-title, .swiper-slide.swiper-slide-active .product-description{
	opacity: 1;
}

.product-description:last-child{
	font-size: .85em;
}

.swiper-slide.swiper-slide.active ~ .swiper-slide.swiper-slide.active > .product-img, .swiper-slide:not(.swiper-slide-active) > .product-img{
	transform: scale(.7);
}


.owl-nav{
	position: absolute;
    top: 50%;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.swiper-button-prev, .swiper-button-next{
	width: 30px!important;
    height: 30px!important;
    background-color: #ccc!important;
    border-radius: 30px;
    color: white!important;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
	font-size: 1em!important;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
	font-size: 1em!important;
}


/*Tu marca*/

#marca-img{
	background-image: url('../img/tu-marca.jpg');
	background-size: cover;
	background-position: center;
	min-height: 50vh;
	height: inherit;
}


/*Contacto*/

#contacto{
	background: var(--medium-grey);
	background-image: url('../img/contact-bg.png');
	background-size: cover;
	background-attachment: fixed;
}

.social{
	color: var(--dark-blue);
	text-decoration: none;
	transition-duration: .3s;
}

.social i{
	font-size: .8em;
}

.social:hover{
	color: var(--light-blue);
}

.form-control{
	border: none;
	background-color: white;
	border-radius: 0;
	font-family: var(--secondary-font);
	font-weight: var(--secondary-bold);
}

.form-control::placeholder{
	color: #d8d8d8;
	text-transform: uppercase;
}

textarea{
	height: 100px;
}

/**
 * 
 * 
 * Footer*/

#footer{
	background-color: var(--dark-blue);
}

hr{
	border-color: rgba(255,255,255,.5);
}

a.text-footer{
	text-decoration: none;
	transition-duration: .2s;
	font-family: var(--secondary-font);
	font-weight: var(--secondary-weight);
	text-transform: uppercase;
	font-size: .9em;
}

a.text-footer:hover{
	color: rgba(255,255,255,1);
}

.text-footer{
	color: rgba(255,255,255,.5);
}


@media (min-width:1024px){
	#header{
		background-position: left center;
	}
}