*{
	padding: 0;
	margin: 0;
}
.fondo-1{background-color: #dfe0e5;}
.fondo-2{background-color: #c5c0c9;}
.fondo-3{background-color: #8a7c9c;}
.fondo-4{background-color: #4d3f72;color: #dfe0e5;}
.fondo-5{background-color: #03192f;color: #dfe0e5;}

.texto-1{color: #dfe0e5; text-shadow: #1c1c1c 1px 1px 3px;}
.texto-2{color: #c5c0c9;}
.texto-3{color: #8a7c9c;}
.texto-4{color: #4d3f72;}
.texto-5{color: #03192f;}
.texto-sombra{	text-shadow: #1c1c1c 1px 1px 3px;}
.texto_peque{	font-size: 1em;}
.fondo-g1{
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(77,63,114,1) 48%, rgba(223,224,229,1) 100%);
}
.fondo-g2{
	background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}
.fondo-g3{
	background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
	padding: 2em;
	border-radius: 1.5em;
}
.icono{
	filter:drop-shadow(1px 3px 10px #1c1c1c);
}
.border{
	border-radius: 1.5em;
	padding: 1.5em;
	box-shadow: #1c1c1c 1px 1px 6px;
}
.borde-1{
	border-radius: 1.5em;
	border: #1c1c1c 1px solid;
}
.borde_footer{
	border-bottom: #1c1c1c 1px dotted;
}
.borde_left{
	border-left: #1c1c1c 1px dotted;
}
.linea{
	border-bottom: 1px solid #fefefe ;
}
.img-logo{
	width: 100%;
	height: auto;
	max-width: 3rem;
}
.contenedor-imagen {
  position: relative;
  display: inline-block; /* Asegura que se ajuste al contenido */
}
.img-tienda{
	 display: block;
		width: 100%; /* Por defecto ocupa el 100% del ancho del contenedor */
    max-width: 500px; /* Máximo ancho de 600px */
    max-height: 300px; /* Máximo alto de 400px */
    height: auto;  /*Mantiene la proporción de la imagen */
}
.img-ofertas{
	position: absolute;
  top: 0.1em;
  left: 0.1em;
  width: 100%;
  max-width: 9em;
  max-height: 9em;
  z-index: 1;
  filter: drop-shadow(1px 1px 3px #1c1c1c);
}
.img-tienda2{
display: block;
		width: 100%; /* Por defecto ocupa el 100% del ancho del contenedor */
    height: auto;  /*Mantiene la proporción de la imagen */	
}
.img-ofertas2{
	position: absolute;
  top: 0.1em;
  left: 0.1em;
  width: 100%;
  max-width: 9em;
  max-height: 9em;
  z-index: 1;
  filter: drop-shadow(1px 1px 3px #1c1c1c);
}
.card-body h5{
	height: 3.5em;
	/*background-color: red;*/
}

.descuento {
height: 2.5em;
color: red;
font-weight: bold;
}
.con font{
	font-size: .7rem;
}

.card img{
	
	width: 100%;
	height: 400px;
}

.boton-agregar{
	background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
	color: #ffffff;
	padding: 1em;
	width: 100%;
	border-radius: 2em;
	border:0;
	/*position: absolute; /* Posicionamiento absoluto dentro del contenedor */
  /*bottom: 0; /* Anclado a la parte inferior */
  /*width: 100%;  Asegura que ocupe el ancho del contenedor */
  text-shadow: #1c1c1c 1px 1px 2px;
}
.boton-agregar:hover{
	background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
	color: #ffffff;
}
.nav-link {
	color: #fff !important;
	font-weight: bold;
}
.nav-link:hover{
	background-color: #fff;
	color: #4a235a !important;
}
.boton-filtro{
	background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
	color: #ffffff;
}
.boton-filtro:hover{
	background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
	color: #ffffff;
}
.caja-1{
	box-shadow: #1c1c1c 1px 1px 8px;
}
/*FILTRO*/
.contenido {
  overflow: hidden;
}

.filterDiv {
  /*float: left;*/
  color: #ffffff;
  text-align: center;  
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}
/*FIN DEL FILTRO*/
.letra{
	color: white;
	text-shadow: 0 0 5px #ff9900,0 0 10px #ff6600,0 0 15px #ff3300,0 0 20px #ff0000;
}
a font{
	font-weight: bold;
	font-size: 1.7em;
}
.espacio{
	margin-top: 40px;
}
.banner{
	display: flex;
	justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
/*background-color: yellow;*/
}
.qr img{
	width: 100%;
  height: auto;
  object-fit: cover;
  object-position: bottom;
  border-radius: 1em;
  box-shadow: #1c1c1c 1px 2px 5px;
}
.img img{
	/*width: 15em;
	height: 7em;
	padding: 1em;*/
	max-width: 100%; /* Ajusta la imagen al ancho del contenedor */
  max-height: 100%; /* Ajusta la imagen al alto del contenedor */
  object-fit: contain; /* Mantiene las proporciones de la imagen */
	/*background-color: red;*/
}
.img img:hover{
	background-color: #1c1c1c;
}
.yanbal{
	background-color: #F05F2E;
}

.esika{
	background-color: #FF3B29;
}
.lbel{
	background-color: #40125E;
}
.cyzone{
	background-color: #B21165;
}
.hinode{
	background-color: #A8873D;
}
.admin a{
	border: 1px solid #fefefe;
	border-radius: 5px;
}
.izquierda a{
	margin-left: 0;
}
.derecha a{
	margin-right: 0;
	font-weight: bold;
}
.total{
	font-size: 21px;
	font-weight: bold;
}
.total-2{
	font-size: 16px;
	font-weight: bold;
}
.boton_pago a{
	width: 70%;
}

/*ADAPTACION*/
@media (max-width: 768px) {
	.espacio{
		margin-top: 0;
	}
	.card-body h5{
	height: auto;
	/*background-color: red;*/
	}
	.descuento{
	height: auto;
	color: red;
	font-weight: bold;
	}
	.img-tienda{
		width: 100%; /* Por defecto ocupa el 100% del ancho del contenedor */
    max-width: 600px; /* Máximo ancho de 600px */
    max-height: 300px; /* Máximo alto de 400px */
    height: auto;  /*Mantiene la proporción de la imagen */
	}
	/*.izquierda a{
	width: 100%;
	margin-top: 10px;
	height: 2em;
	font-size: 30px;
	}*/
	.derecha button{
	width: 100%;
	margin-top: 10px;
	height: 2.3em;
	font-size: 1.5em;
	font-weight: bold;
	}
	.borde-1{
	border: none;
	}
	.boton_pago a{
	width: 100%;
	font-size: 1.5em;
	}
	.borde_left{
	border-left:none;
	}
	.texto_peque{	font-size: .8em;}
}