@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');
@import url( 'colores.css?v=1' );
@import url( 'general.css?v=1' );
body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	background-color: var( --grisBorde );
}
header {
	position: fixed;
	width: 100%;
	padding: 12px 0;
	border-bottom: 1px solid var( --grisBorde );
	background-color: var( --blanco );
	z-index: 999;
}
header .principal { display: flex; align-items: center; justify-content: space-between; }
header .divLogo { max-width: 100%; margin-right: 15px; min-width: 220px; width: 320px; }
header .buscaDiv {
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
}
header .buscaDiv .inputDiv {
	color: var( --grisOscuro );
	background-color: var( --grisBorde );
	border-radius: 12px;
	display: flex;
	align-items: center;
	padding: 0 15px;
	box-sizing: border-box;
}
header .buscaDiv .inputDiv input {
	border: none;
	outline: none;
	width: 100%;
	background-color: transparent;
}
header .sesionDiv { min-width: 300px; max-width: 100%; margin-left: 15px; text-align: right; }
.topBar, .topBottom { width: 100%; height: 95px; }
.modal h1 {
	font-size: 20px;
	text-transform: uppercase;
	color: var( --grisLetras );
	border-bottom: 1px solid var( --grisBorde );
}
.modal .foot {
	border-top: 1px solid var( --grisBorde );
	box-sizing: border-box;
	padding-top: 20px;
	margin-top: 20px;
}
.mainContent {
	display: grid;
	row-gap: 0px;
    grid-template-columns: 300px minmax(0px, 1fr);
}
aside { min-width: 330px; width: 330px; box-sizing: border-box; overflow-y: auto; }
.catalogoProductos, .printProductos, .listaOpciones {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.printProductos { height: 480px; overflow-y: auto; }
.listaOpciones .opcion {
	display: block;
	width: 100%;
	border-radius: 6px;
	background-color: var(--blanco );
	text-align: center;
	box-sizing: border-box;
	padding: 15px;
	margin: 5px;
	color: var( --grisLetras );
	transition: 0.4s all;
}
.listaOpciones .opcion:hover, .elegido {
	background-color: var( --grisLetras );
	color: var( --blanco );
}
.botonCategoria, .botonProducto {
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: 6px;
	background-color: var(--blanco );
	text-align: center;
	box-sizing: border-box;
	padding: 15px;
	margin: 5px;
	transition: 0.4s all;
	box-sizing: border-box;
	color: var( --grisLetras );
}
.botonCategoria:hover, .botonProducto:hover, .elegido {
	background-color: var( --grisLetras );
	color: var( --blanco );
}
.botonCategoria img, .botonProducto img { width: 30px; margin-right: 5px; height: auto; }
.botonCategoria h1, .botonProducto h1 { font-size: 16px; margin: 0; margin-top: 5px; }
.botonProducto h1 { text-align: left; }
main {
	margin: 20px 15px 0 30px;
	box-sizing: border-box;
	position: relative;
	display: block;
}
.bx-controls-direction a {
	background-color: rgba( 255, 255, 255, 0.4 );
	color: var( --grisLetras );
	text-align: center;
	font-size: 30px;
	padding: 5px 15px;
	border-radius: 50%;
	box-sizing: border-box;
}
.carroBoton {
	background-color: var( --verde );
	border: 1px solid var( --verde );
	color: var( --blanco );
	position: fixed;
	right: 0;
	top: 45%;
	border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
	box-sizing: border-box;
	padding: 15px;
	text-align: center;
	z-index: 999;
	width: 120px;
	cursor: pointer;
	transition: 0.4s all;
}
.carroBoton .cantidadPrecio {
	display: block;
	border-radius: 8px;
	background-color: var( --blanco );
	border: 1px solid var( --verde );
	padding: 10px;
	color: var( --grisLetras );
	margin-top: 15px;
}
.carroBoton:hover { background-color: var( --blanco ); color: var( --verde ); }
.filaFlex { display: flex; zoom: 1; width: 100%; box-sizing: border-box; }
.filaFlex:before, .filaFlex:after { content: ''; display: table; }
.filaFlex:after { clear: both; }
.filaMovil { display: flex; align-items: center; min-width: 300px; }
.pedidos .filaMovil { min-width: initial; width: 100%; }
.producto {
	position: relative;
	width: 23%;
	margin: 1%;
	float: left;
	box-sizing: border-box;
	background-color: var( --blanco );
	height: auto;
	border-radius: 4px;
	overflow: hidden;
}
.producto.swiper-slide { width: 100%; }
.swiper-container { padding-top: 50px; width: 100%; }
.botonesSwipe {
	position: absolute;
	top: 25px;
	width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 23px;
    color: var( --grisOscuro );
    text-align: center;
    box-sizing: border-box;
}
.botonesSwipe:hover { border: 1px solid var( --grisOscuro ); }
.swiper-button-next:after, .swiper-button-prev:after { content: ''; }
.swiper-button-prev { right: 60px; left: initial; }
.producto .info {
	padding: 15px 15px 0;
	box-sizing: border-box;
	width: 100%;
	cursor: pointer;
}
.producto .capacidad {
	background-color: var( --verde );
	position: absolute;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 4px;
	color: var( --blanco );
	z-index: 1;
	text-transform: lowercase;
}
.producto .genero {
	background-color: var( --grisLinea );
	position: absolute;
	right: 15px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 4px;
	color: var( --negro );
	z-index: 1;
}
.producto .precio {
	font-size: 18px;
	font-weight: 600;
}
.producto h2 {
	margin: 10px 0 50px;
	font-size: 14px;
	font-weight: 500;
	color: var( --grisLetras );
	height: 36px;
	overflow: hidden;
}
.producto .boton {
	position: absolute;
	display: block;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	bottom: 0;
	width: 100%;
}
.producto img { width: 100%; height: auto; transition: 0.4s all; }
.producto:hover > .info img {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
.filtroMovil { display: none; padding-top: 10px; padding-right: 10px; box-sizing: border-box; }
.cierraMovil { padding: 5px 15px 0; box-sizing: border-box; display: none; }
.cierraMovil .boton,.filtroMovil .boton { float: right; }
.ui-autocomplete { z-index: 1001; }
.jquery-modal { z-index: 1002; }
.sesionActiva, .sesionInactiva { display: none; }
.productoSlide {
	width: 100%;
	border-radius: 10px;
	background-color: var( --blanco );
	box-sizing: border-box;
	padding: 20px;
	margin: 20px 0;
}
.productoSlide h3 { position: absolute; }
.cuadroBlanco, .tabContent {
	width: 100%;
	border-radius: 10px;
	background-color: var( --blanco );
	box-sizing: border-box;
	padding: 20px;
	margin: 0 20px;
}
.tabContent { width: 95%; display: none; }
.productoDetalle {
	width: 100%;
	border-radius: 10px;
	background-color: var( --blanco );
	box-sizing: border-box;
	padding: 20px;
	display: flex;
	margin: 20px 0;
}
.productoDetalle .productoImg {
	min-width: 500px;
	margin: 10px;
}
.productoDetalle .productoDetail { padding-right: 15px; }
.productoDetalle .productoDetail h1 { margin-bottom: 0; }
.productoDetalle .productoDetail h2 {
	margin: 0;
	font-size: 16px;
	color: var( --grisLetras );
}
.productoDetalle .productoDetail .precio {
	font-weight: bold;
	font-size: 20px;
	display: block;
	margin: 20px 0;
}
.productoDetalle .productoDetail p { margin-bottom: 25px; text-align: justify; }
.productoCarrito {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 8px;
	border-bottom: 1px solid var( --grisBorde );
}
.listaCarrito .productoCarrito:last-child, .listaOrden .productoCarrito:last-child { border-bottom: none; }
.listaCarrito .productoCarrito a, .listaOrden .productoCarrito a { color: var( --rojo ); }
.productoCarrito .info { min-width: 200px; }
.productoCarrito .info h4 { font-size: 15px; margin: 0; }
.productoCarrito input { text-align: center; }
.productoCarrito img { margin: 0 10px; }
#totalPedido { font-weight: bold; }
.finPedido {
	box-sizing: border-box;
	padding: 15px 0;
	text-align: right;
}
.verde { color: var( --verde ); }
.pedidos .productoCarrito { width: 100%; }
.pedidos .productoCarrito .info { min-width: 0; width: 100%; }
.pedidos .carroBoton { display: none; }
.respuestaPedido { display: none; width: 100%; }
.ordenes {
	width: 31%;
	margin: 1%;
	float: left;
	border: 1px solid var( --grisBorde );
	border-radius: 8px;
	box-sizing: border-box;
	padding: 10px;
	height: 195px;
}
.ordenes .filaFlex { justify-content: space-between; align-items: center; }
.ordenes .filaFlex .boton { display: block; display: block; height: auto; }
.estadoBoton { display: block; margin: 2px; width: 100%; }
.vueveArriba {
	position: fixed;
	bottom: 85px;
	right: 15px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var( --verde );
	color: var( --blanco );
	text-align: center;
	box-sizing: border-box;
	font-size: 25px;
	padding: 5px 0;
	z-index: 99999;
	display: none;
}
.listaEtiquetas ul { list-style: none; padding: 0; margin: 0; }
footer {
	position: fixed;
	width: 100%;
	padding: 12px 0;
	border-bottom: 1px solid var( --grisBorde );
	background-color: var( --blanco );
	z-index: 999;
	bottom: 0;
}
footer .principal { display: flex; align-items: center; justify-content: space-between; }
footer a { color: var( --verde ); }
footer .sociales a { margin-left: 5px; }
.swiper-container { overflow: hidden; position: relative; padding: 30px 0; }
.sesionAccess { display: none !important; }
@media screen and ( max-width: 1165px ) {
	.producto { width: 31%; }
	.estadoBoton { padding: 10px; }
}
@media screen and ( max-width: 1080px ) {
	.ordenes { width: 48%; }
}
@media screen and ( max-width: 930px ) {
	.estadoBoton { padding: 5px; font-size: 11px; }
}
@media screen and ( max-width: 900px ) {
	.mainContent { display: block; row-gap: initial; grid-template-columns: initial; }
	main { width: 100%; margin: 0; }
	#sticky-wrapper { position: fixed; z-index: 1000; display: none; }
	aside {
		width: 350px !important;
		position: fixed;
		top: 0 !important;
		z-index: 1000;
		height: 100%;
		background-color: var( --grisBorde );
		border-right: 1px solid var( --grisLetras );
	}
	.producto { width: 23%; }
	.cierraMovil, .filtroMovil { display: block; }
	.filtroMovil { margin-bottom: 10px; }
	.productoDetalle .productoImg { max-width: 380px; min-width: 380px; }
	.ordenes { width: 31%; }
}
@media screen and ( max-width: 800px ) {
	header .buscaDiv { display: none; }
}
@media screen and ( max-width: 750px ) {
	.producto { width: 31%; }
	.productoDetalle { display: block; }
	.productoDetalle .productoImg { max-width: initial; width: 100%; text-align: center; min-width: initial; }
	.productoDetalle .productoImg img { width: 100%; height: auto; }
	.productoDetalle .productoDetail { text-align: center; }
	.productoDetalle .productoDetail .boton { display: block; width: 140px; margin: 0 auto; }
	.ordenes { width: 48%; }
}
@media screen and ( max-width: 700px ) {
	.producto { width: 31%; }
	footer .principal { display: block; text-align: center; }
	footer .sociales { text-align: center; }
	.topBottom { height: 115px; }
}
@media screen and ( max-width: 600px ) {
	header .sesionDiv .boton span { display: none; }
	header .sesionDiv .boton { padding: 10px; width: 40px; height: 40px; display: inline-block; }
	header .sesionDiv .boton:last-child { margin-left: 5px; }
	header .sesionDiv { min-width: 90px; }
	.producto { width: 48%; }
	aside,#sticky-wrapper { width: 100% !important; }
	.botonCategoria { width: 47%; display: block; float: left; min-height: 170px; }
	.botonCategoria img { width: 80px; height: auto; margin-right: 0; }
	.topBottom { height: 0; }
	footer { position: relative; margin-top: 20px; }
	footer a { display: block; text-align: center; }
	.guion { display: none; }
	.foot .boton { display: block; margin: 15px; }
}
@media screen and ( max-width: 520px ) {
	.productoCarrito { display: block; }
	.filaMovil { zoom: 1; width: 100%; box-sizing: border-box; display: block; }
	.filaMovil:before, .filaMovil:after { content: ''; display: table; }
	.filaMovil:after { clear: both; }
	.filaMovil a {
		display: block;
		width: 20px;
		height: 100px;
		float: left;
		box-sizing: border-box;
		text-align: center;
		font-size: 20px;
		padding: 40px 0;
	}
	.filaMovil img { height: 100px; width: auto; float: left; }
	.productoCarrito .info { padding-top: 20px; }
	.ordenes { width: 98%; }
	.botonesFila { display: block; }
	.botonesFila .boton { display: inline-block; }
}
@media screen and ( max-width: 420px ) {
	.filaMovil { min-width: 0; }
	.filaMovil img { width: 70%; height: auto; float: none; }
	.filaMovil a { display: initial; }
	.productoCarrito .info { width: 100%; text-align: center; float: none; min-width: 0; }
}
@media screen and ( max-width: 370px ) {
	.producto { width: 98%; }
}
/*@media screen and ( max-height: 780px ) and  {
	aside { max-height: 550px; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; }
}*/