/* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300&family=Poppins:ital,wght@0,300;1,300,700&display=swap'); */


:root{
	--white: #FFFFFF;
	--black: #000000;
	--light-gray: #F2F2F3; 
	--medium-gray: #7F7F7F;
	--dark-gray: #54565A;
	--light-yellow: #FAFF6F;
	--red: #BA0404;
  }
  
  /* GENERAL */
*{
	font-family: "Lato", sans-serif;
	font-size: 14px;
	color: var(--medium-gray);
}
body{
	background-color: var(--white);
}

a{
	text-decoration: none;
}

.lato{
	font-family: "Lato", sans-serif;
}

.poppins{
	font-family: "Poppins", sans-serif;
}

.thin{
	font-weight: 100;
}

.light{
	font-weight: 300;
}

.regular{
	font-weight: 400;
}

.bold{
	font-weight: 700!important;
}

.italic{
	font-style: italic;
}

.uppercase{
	text-transform: uppercase;
}

.black-text{
	color: var(--black);
}

.white-text{
	color: var(--white);
}

.gray-text{
	color: var(--medium-gray);
}

.precio-oferta{
	color: var(--red);
}

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

.btn{
	border-radius: 0;
}

.white-btn{
	color: var(--black)!important;
	border: solid 1px var(--black)!important;
	background-color: var(--white)!important;
	font-weight: 700;
}

.white-btn:hover{
	background-color: var(--black)!important;
	border: solid 1px var(--black)!important;
	color: var(--white)!important;
}

.black-btn{
	background-color: var(--black)!important;
	border: solid 1px var(--black)!important;
	color: var(--white)!important;
	font-weight: 700;
}

.black-btn:hover{
	color: var(--black)!important;
	border: solid 1px var(--black)!important;
	background-color: var(--white)!important;
}

.text-right{
	text-align: right;
}

.fc-width{
	width: fit-content;
}

.label-oferta{
	background-color: var(--red);
	color: var(--white);
	right: -4px;
	top: -4px;
	z-index: 2;
 }

.hero{
	height: calc(100vh - 123px);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.hero.h-interior{
	height: 30vh;
	min-height: 250px;
	background-attachment: fixed;
 }

.hero .black-layer{
	background-color: rgba(0,0,0,.35);
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

.hero .black-layer h2{
	letter-spacing: 2px;
	font-size: 3rem;
	text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}

main{
	margin-top: 146px;
}

.hero .swiper .swiper-slide,
.separador-wrapper{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero .swiper .swiper-slide .hero-caption .caption-wrapper{
	width: 100%;
	max-width: 200px;
}

.hero .swiper .swiper-slide .hero-caption .caption-wrapper h2{
	font-size: 6rem;
	line-height: .8;
	margin-bottom: 3rem;
	font-weight: 700;
}

.hero .swiper .swiper-slide .hero-caption .caption-wrapper h2:after{
	content: '';
	height: 1px;
	width: 100px;
}

.hero .swiper .swiper-slide .hero-caption .caption-wrapper p{
	font-size: 1.5rem;
	line-height: 1;
	text-transform: uppercase;
	font-family: "Poppins", sans-serif;
	color: var(--white);
}

.swiper-button-next,
.swiper-button-prev{
	color: var(--medium-gray);
}

.swiper .swiper-pagination .swiper-pagination-bullet{
	background: var(--dark-gray);
	border: solid 2px var(--dark-gray);
}

.swiper .swiper-pagination .swiper-pagination-bullet-active{
	background: var(--black);
	border: solid 2px var(--black);
}

  /* HEADER */
  header{
	z-index: 10;
	top: 0;
	background-color: var(--white);
  }

  header .navbar{
	padding-top: 1.5rem!important;
	padding-bottom: 1rem!important;
	z-index: 9;
	height: fit-content!important;
  }

  header nav .container{
	flex-direction: column;
  }
  
  header nav .container .navbar-brand{
	display: flex;
	flex-direction: column;
	align-items: center;
  }

  header nav .container .navbar-brand img{
	width: 150px;
  }

  header nav .container .brand-slogan{
	font-size: .9rem;
	letter-spacing: .5px;
	font-weight: 700;
  }

  header nav .container .navbar-toggler{
	border: none;
	width: calc(1.5rem + 30px);
	padding: .5rem .75rem;
	height: calc(1rem + 24px);
	position: relative;
  }

  header nav .container .navbar-toggler:focus-visible,
  header nav .container .navbar-toggler:focus{
	outline: none!important;
	box-shadow: none!important;
  }
  
  header nav .container .navbar-toggler .toggler-bar{
	height: 3px;
	width: 30px;
	background-color: var(--dark-gray);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: all .2s linear;
  }

  header nav .container .navbar-toggler:before,
  header nav .container .navbar-toggler:after{
	content: '';
	height: 3px;
	width: 30px;
	background-color: var(--dark-gray);
	position: absolute;
	left: .75rem;
	transition: all .2s linear;
  }
  
  header nav .container .navbar-toggler:before{
	top: .5rem;
   }
   
  header nav .container .navbar-toggler:after{
	bottom: .5rem;
  }

  header nav .container .navbar-toggler.open .toggler-bar{
	opacity: 0;
  }
  
  header nav .container .navbar-toggler.open:before{
	left: 1.1rem;
	transform: rotate(45deg);
	transform-origin: left;
  }
   
  header nav .container .navbar-toggler.open:after{
	left: 1.1rem;
	transform: rotate(-45deg);
	transform-origin: left;
  }

  header nav .container .navbar-collapse li.active,
  header nav .container .navbar-collapse .dropdown-menu li.active a{
	font-weight: 600!important;
  }

    header nav .container .navbar-collapse li.active a,
	header nav .container .navbar-collapse .dropdown-menu li.active a{
	color: var(--black)!important;
  }

    header nav .container .navbar-collapse li a{
	color: var(--dark-gray);
  }

  header nav .container .rrss{
	display: flex;
	position: absolute;
	right: calc((100% - 750px)/2 );
  }

  header nav .container .rrss li{
	list-style: none;
	height: 15px;
  }

  /* SEPARADOR */
  .separador{
	position: relative;
	height: 30vh;
	min-height: 350px;
 }

 .separador-wrapper{
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
 }

 .separador .separador-wrapper .container .text-wrapper{
	width: 40%;
	max-width: 500px;
 }

 .separador .separador-wrapper .container .text-wrapper h1,
 .separador .separador-wrapper .container .text-wrapper h2,
 .separador .separador-wrapper .container .text-wrapper h3,
 .separador .separador-wrapper .container .text-wrapper h4,
 .separador .separador-wrapper .container .text-wrapper h5,
 .separador .separador-wrapper .container .text-wrapper h6,
 .separador .separador-wrapper .container .text-wrapper p,
 .separador .separador-wrapper .container .text-wrapper a,
 .separador .separador-wrapper .container .text-wrapper strong,
 .separador .separador-wrapper .container .text-wrapper li
 {
	color: var(--black)!important;
	font-family: "Poppins", sans-serif;
 }

 .separador .separador-wrapper .container .text-wrapper h2{
	font-size: 2.5rem;
	font-weight: 700;
 }

  /* FOOTER */

  footer{
	background-color: black;
  }

  footer a,
  footer p{
	color: var(--white)!important;
	font-size: .9rem!important;
  }

  footer .footer-column{
	display: flex;
	justify-content: center;
  }

  footer .footer-column .wrapper{
	width: fit-content;
  }

  footer .logo-footer{
	width: 100%;
	max-width: 200px;
	margin: auto;
	display: block;
  }

  footer .rrss-wrapper .rs-link{
	width: 20px;
	height: 20px;
	margin: 0 1rem;
  }

  footer .rrss-wrapper .rs-link img{
	height: 100%;
	object-fit: contain;
	object-position: center;
  }

  footer .categorias{
	padding-left: 0;
  }

  footer .categorias li{
	list-style-type: none;	
  }

  footer .contact-column .contacto .icono-contacto{
	width: 16px;
	height: 16px;
	object-fit: contain;
	object-position: center;
	margin-right: .5rem;
  }

  footer .subscribe-text{
	letter-spacing: .65px;
  }

  footer form input{
	background-color: transparent;
	color: var(--white);
	border: solid 1px var(--white);
	padding: .25rem .75rem;
	margin: .25rem 0;
	width: calc(100% - 2px);
  }

  footer form input::placeholder{
	color: var(--white);
	font-style: italic;
	font-weight: 300;
  }

  .footer-btn{
	color: var(--black)!important;
	border: solid 1px var(--white)!important;
	background-color: var(--white)!important;
	font-weight: 700;
	width: auto;
  }

  .footer-btn:hover{
	background-color: var(--black)!important;
	border: solid 1px var(--white)!important;
	color: var(--white)!important;
  }

  footer .sepline{
	border-top: solid 1px var(--white);
  }

  /* HOME */

  #inicio .hero{
	max-height: 600px;
  }

  #inicio .destacados h2,
  #inicio .blog h2{
	font-size: 3.5rem;
	text-transform: uppercase;
  }

  #inicio .destacados .featured-wrapper .swiper .swiper-slide .product-wrapper{
	width: 300px;
  }

  #inicio .destacados .featured-wrapper .swiper .ft-prev,
  #inicio .destacados .featured-wrapper .swiper .ft-next{
	color: var(--dark-gray);
  }

  #inicio .destacados .featured-wrapper .swiper .ft-pagination{
	bottom: 0!important;
  }

  #inicio .blog-wrapper{
	width: 90%;
	max-width: 700px;
	margin: auto;
  }

  #inicio .blog-wrapper .blog-item:nth-child(even){
	flex-direction: row-reverse;
  }

  #inicio .blog-wrapper .blog-item .img-side{
	height: 0;
	padding-top: 50%;
	position: relative;
	border: solid 1px var(--light-gray);
  }

  #inicio .blog-wrapper .blog-item .img-side img{
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
  }

  #inicio .blog-wrapper .blog-item .text-side{
	background-color: var(--light-gray);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: solid 1px var(--light-gray);
  }

  #inicio .blog-wrapper .blog-item .text-side h3{
	text-transform: uppercase;
  }

 /* CATEGORIA */

 #categoria .card{
	border: none;
 }

 #categoria .card img{
	border: solid 1px var(--medium-gray);
 }

 #categoria .card .btn{
	border: solid 1px var(--dark-gray);
	border-radius: 0;
 }

/* SINGLE PRODUCTOS */

.single-producto .swiper .swiper-wrapper .swiper-slide{
	border: solid 1px var(--medium-gray);
}

.single-producto .precio p{
	font-size: 1.6rem;
}

.single-producto .precio p small{
	font-size: 1rem;
}

.single-producto form .form-group input:not([type="file"]){
	border-radius: 0;
	border: solid 1px var(--black);
	width: 100%;
	padding: .25rem .75rem;
 }

 /* QUIENES SOMOS */

 #quienes-somos .hero img{
	object-fit: cover;
	object-position: center;
 }

 #quienes-somos .card{
	height: 100%;
	background-color: var(--light-gray);
 }

 #quienes-somos .valores .valor .icono{
	width: 180px;
	height: 100px;
	object-fit: contain;
	object-position: center;
 }

  #quienes-somos .valores .valor h3{
	font-size: 1.2rem;
 }  
  #quienes-somos .swiper-button-next,
  #quienes-somos .swiper-button-prev{
	color: var(--medium-gray);
}

  /* BLOG */

  #blog .entrada{
	border: solid 1px var(--light-gray);
	width: calc(100% - 14px);
	-webkit-box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75);
	box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75);
  }

  #blog .entrada .img-wrapper{
	width: 100%;
    height: 0;
    padding-top: 60%;
    position: relative;
	border-bottom: solid 1px var(--light-gray);
  }

  #blog .entrada .img-wrapper img{
	position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
  }

  #blog .entrada .link{
	background-color: var(--white);
  }

  #blog .entrada .link:hover .text-wrapper{
	background-color: var(--medium-gray)!important;
  }

  #blog .entrada .link:hover .text-wrapper p,
  #blog .entrada .link:hover .text-wrapper h2{
	color: var(--white)!important;
  }

  #blog .leer-mas{
	text-align: right;
  }

  #blog .ultima.entrada .leer-mas{
	font-size: 1.1rem;
  }

  #blog .entrada.destacada p{
	font-size: .9rem;
  }

  #blog .entrada.destacada h2{
	font-size: 1rem;
  }

  #blog .anterior h2{
	font-size: 1.5rem;
  }

  /* .single-blog .hero{
	height: calc(85vh - 123px);
  } */

  .single-blog .hero::before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background-color: rgba(0,0,0,.4);
	z-index: 0;
  }

  .single-blog .hero .content-wrapper{
	z-index: 2;
	color: var(--white)!important;
  }

  .single-blog h4 strong{
	font-size: 1.3rem;
	font-style: italic;
  }
 
  /* CONTACTO */

  #contacto .img-side img{
	height: 100%;
	object-fit: cover;
	object-position: center;
  }

  #contacto .form-side{
	background-color: var(--light-gray);
  }

  #contacto .form-side h3{
	font-size: 1.3rem;
  }

  #contacto .form-side .input-group{
	flex-direction: column;
	margin: .75rem auto;
  }

  #contacto .form-side label{
	color: var(--black);
	text-transform: uppercase;
	margin-bottom: .25rem;
  }

  #contacto .form-side input{
	width: 100%;
	height: 30px;
  	color: var(--dark-gray);
	background-color: transparent;
	border: solid 1px var(--black);
	padding: 4px 15px;
  }

  #contacto .form-side textarea{
	width: 100%;
	color: var(--dark-gray);
	background-color: transparent;
	border: solid 1px var(--black);
	padding: 4px 15px;
  }

  #contacto .form-side #enviar_contacto{
	height: 40px;
	text-transform: uppercase;
  }

  #contacto .mapa{
	height: 30vh;
	min-height: 350px;
  }

  #contacto .mapa iframe{
	height: 100%;
	width: 100%;
  }

  @media screen and (min-width:992px){
	#contacto .img-side {
		padding-right: 0;
	}
  }

  @media screen and (max-width:991px){
	main {
		margin-top: 95px;
	}
	header nav{
		padding: .5rem 0!important;
	}
	header nav .container {
		flex-direction: row;
	}
	.hero{
		height: 0!important;
		padding-top: 60%;
		position: relative;
	}

	.hero .swiper{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.hero.h-interior{
		padding-top: 25%;
		min-height: 0;
	}

	.hero.h-interior .black-layer h2 {
		font-size: 2rem;
	}

	/* HEADER */
	header nav{
		height: 84px!important;
	}

	header nav .container .navbar-brand {
		align-items: flex-start;
	}

	header nav .container .rrss {
		justify-content: center;
		padding: 0;
	}
	
	header nav .navbar-collapse{
		height: calc(100% - 105px)!important;
		width: 100%;
		max-width: 500px;
		margin-top: 105px;
		position: fixed;
		background-color: var(--white);
		top: 0!important;
		left: -100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		transition: all .2s linear;
		box-shadow: 3px 11px 8px -1px rgba(0,0,0,0.75);
		-webkit-box-shadow: 3px 11px 8px -1px rgba(0,0,0,0.75);
		-moz-box-shadow: 3px 11px 8px -1px rgba(0,0,0,0.75);
		z-index: 8!important;
	}

	header nav .navbar-collapse.open{
		left: 0;
	}

	header nav .navbar-collapse li{
		margin: .5rem 0;
	}

	header nav .navbar-collapse li a{
		font-size: 1.2rem;
	}

	header nav .navbar-collapse .dropdown-menu{
		display: block;
		border: none;
	}

	header nav .navbar-collapse .rrss{
		position: relative;
		right: auto;
		margin-top: 2rem;
	}

	/* SEPARADOR */

	.separador .white-layer{
		background-color: rgba(256,256,256,.5);
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.separador .container{
		z-index: 2;
	}

	.separador .separador-wrapper .container .text-wrapper {
		width: 100%;
	}

	/* FOOTER*/

	footer{
		text-align: center;
	}

	footer .footer-column {
		justify-content: center;
	}

	footer .logo-column {
		justify-content: center;
		display: flex;
		margin-bottom: 1.5rem;
	}

	footer .logo-column .logo-footer{
		max-width: 180px;
	}

	footer .footer-column:first-of-type{
		display: flex;
	}

	footer .rrss-column{
		order: 2;
		margin-bottom: 2.5rem;
	}

	footer .products-column{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	footer .products-column p{
		margin-bottom: .5rem;
	}

	footer .products-column .categorias{
		display: flex;
		margin-bottom: 1.5rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	footer .products-column .categorias li{
		margin: .5rem;
		position: relative;
	}

	footer .products-column .categorias li::before{
		content: '|';
		width: 2px;
		background-color: var(--white);
		height: 1rem;
        position: absolute;
        left: calc(-0.5rem + -1px);
		top: 50%;
		transform: translateY(-50%);
	}

	footer .products-column .categorias li:nth-child(1):before{
		content: none;
	}
	
	footer .contact-column{
		margin-bottom: 2rem;
	}

	footer .contact-column .wrapper{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	footer .contact-column>p{
		margin-bottom: .5rem;
	}

	footer .contact-column .contacto{
		width: fit-content;
	}

	footer .subscribe-column{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	footer .subscribe-column form{
		max-width: 400px;
	}		

	footer .subscribe-column form .footer-btn{
		margin-left: 72px;	
	}

	/* HOME */

	#inicio .destacados .featured-wrapper .swiper .swiper-slide .product-wrapper {
		width: 100%;
	}

	/* BLOG */
	#blog .entrada.destacada{
		width: 100%;
	}

	#blog .simple-entry{
		order: 2;
	}

	.single-blog .hero .content-wrapper{
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
	}

	/* CONTACTO */
	#contacto .img-side{
		position: relative;
		padding-top: 40%;
	}

	#contacto .img-side img{
		position: absolute;
		top: 0;
		width: calc(100% - 1.5rem)!important;
		object-position: top;
	}

	#contacto .form-side{
		background-color: transparent;
	}

	#contacto .form-side .row{
		background-color: var(--light-gray);
	  }
  }

  @media screen and (max-width: 767px){
	.hero.h-interior{
		padding-top: 35%;
		min-height: 0;
	}

	.separador .container{
		text-align: center;
	}

	.separador ul{
		width: fit-content;
		text-align: left;
		margin-left: auto;
		margin-right: auto;
	}
  }