*{
	padding: 0;
	margin: 0;
	outline: 0;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
	font-family: tahoma;
	}

nav {
	background: #fff;
	height: 65px;
	width: 100%;
	}
	.enlace{
	position: absolute;
	margin: 2px 0 0 30px;
	padding: 0px 0px;
	}

	.logo{
	height: 40px;
	margin-top: 7px;
	}

	nav ul{
	height: 66px;
	display: flex;
	align-items: center;
	padding: 10px 10px;
	justify-content: center;
	justify-content: end;
	}

	nav ul li{
	display: inline-block;
	margin: 0 5px;

	}

	nav ul li a{
	color: black;
	font-size: 20px;
	padding: 7px 0px;
	border-radius: 3px;
	margin: 15px;
	}

	li a.active, li a:hover{
	color: #0069ff;
	border-bottom: 3px solid #0069ff;
	}

	.checkbtn{
	font-size: 30px;
	color: #fff;
	line-height: 0px;
	margin-right: 0px;
	cursor: pointer;
	display: none;
	}

	#check{
	display: none;
	}

	.textologo{
	display: none;
	}

	i{
		margin-right: 10px;
		margin-top: 5px;
	}

/*----------------------------------inicio --------------------------*/
.ubicacion h2{
	display: inline-block;
	font-size: 16px;
	margin: 0px 3px;
	margin-left:10px;
	color: #aaa;
}
.ubicacion a{
	font-size: 16px;
	margin: 0px 3px;
	text-decoration: none;
	color: #aaa;
}

.ubicacion a:hover{
	color: #0069ff;
}
.grid-layout{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(auto-fit, auto-fill);
	grid-template-areas:
	"imagenes imagenes nombre nombre"
	"imagenes imagenes descripcion descripcion"
	"imagenes imagenes precio precio"
	"comprar comprar comprar comprar"
	"despacho despacho despacho despacho"
	"usuarios usuarios usuarios usuarios"
	"complemento complemento complemento complemento";
	gap: 20px;
	margin: 20px;
	

}


.nombre{
grid-area: nombre;
padding: 13px 0;
text-align: center;
color: #002f69;
font-weight: bold;

}


/*----------------------------------CARRUSEL DE CAMBIO DE IMAGEN--------------------------*/

.imagenes{
grid-area: imagenes;
}

.contenedorscroll{
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: repeat(auto-fit, auto-fill);
	gap: 10px;
}

.contenedorscroll div{
	height: 100px;
	width: 100px;
	gap: 10px;
	border: 2px solid #eee;
}

.contenedorscroll div:hover {
	/*border: 2px solid #0069ff;*/
	border: 2px solid #0069ff;
}

#cambioimg{
	grid-row: 1 / 5;
	grid-column: 2 / 3;
	border-bottom: 2px solid #0069ff;
}

.opcion1, #imagen1{
background-image: url(../../imagenes/aladin-fameca.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

.opcion2, #imagen2{
background-image: url(../../imagenes/fameca-casco.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

.opcion3, #imagen3{
background-image: url(../../imagenes/fameca-lateral.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

.opcion4, #imagen4{
background-image: url(../../imagenes/estuche-aladin.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

/*----------------------------------ULTIMAS UNIDADES--------------------------*/

.letrero-ultimas {
  position: fixed;           /* Se mantiene fijo en la pantalla */
  bottom: 30px;                 /* Distancia desde la parte superior */
  left: 15%;                 /* Punto de referencia en el centro horizontal */
  transform: translateX(-50%); /* Ajuste para centrar exactamente */
  background-color: #ff0000; /* Fondo rojo llamativo */
  color: #ffffff;            /* Texto blanco */
  font-weight: bold;         /* Texto en negrita */
  padding: 10px 15px;        /* Espaciado interno */
  border-radius: 100px;        /* Bordes redondeados */
  font-size: 20px;           /* Tamaño de letra */
  box-shadow: 0 3px 6px rgba(0,0,0,0.3); /* Sombra */
  z-index: 9999;             /* Índice superior a todo */
  
}

/*----------------------------------DESCRIPCIÓN--------------------------*/

.descripcion{
grid-area: descripcion;
padding: 20px;
padding-top: 0px;
}

.descripcion a{
color: #0069ff;
font-weight: bold;

}
.descripcion a:hover{
transition: 0.5s;
font-size: 17px;
}

.precio{
grid-area: precio;
font-size: 26px;
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 40px;
}

.precio div, .precio a{
	padding:10px 20px;
}

.btn-comprar{
	color: #0069ff;
	border:2px solid #0069ff;
}

.btn-comprar:hover{
	color: #fff;
	background: #0069ff;
	transition: 0.5s;
	transform: scale(1.1);
	
}

.comprar{
grid-area: comprar;
border-top: 2px solid #002f69;
}

.comprar h3{
	font-size: 24px;
	background: #eeeef2;
	color: #002f69;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}
.parrafo-space{
	padding-left: 20px;
}

.warning{
	background: #002f69;
	padding: 10px;
	color: #fff;
}

.despacho{
	grid-area: despacho;
	display: flex;
	flex-flow: row wrap;
	gap:50px;
	justify-content: center;
}

.despacho div{
	width: 250px;
	height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.despacho div:hover{
	transform: scale(1.1);
	transition: 0.5s;

}


.despacho i{
	font-size: 60px;
	color: #002f69;
}

.despacho i:hover{
	color: #0069ff;
}

.despacho p{
	margin-top: 20px;
	font-size: 20px;
}


.usuarios{
	grid-area: usuarios;
	text-align:center;
	font-size: 24px;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 20px;
	background: #eeeef2;
	color: #002f69;
}

.complemento{
grid-area: complemento;
display: flex;
flex-flow: row wrap;
gap: 20px;
padding: 20px;
justify-content: center;
}

.complemento div{
text-decoration: none;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

.complemento div:hover{
	transform: scale(1.1);
	transition: 0.5s;
}

.complemento div a{
	width: 180px;
	height: 150px;
}

.complemento div p{
	margin: 10px 0;
	color: #0069ff;
	
}

.complemento div p:nth-child(3){
	color:#000;
}



.guante2{
	background: url(../../imagenes/guantedi.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

}

.tapete2{
	background: url(../../imagenes/tapete.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.detector{
	background: url(../../imagenes/detector-cono.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.pertiga{
	background: url(../../imagenes/pertiga.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.balaclava{
	background: url(../../imagenes/balaclava.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.botas{
	background: url(../../imagenes/b-novax.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


/*----------------------------------BTN WSP --------------------------*/

.btn-wsp{
	position: fixed;
	width: 55px;
	height: 55px;
	line-height: 55px;
	bottom:25px;
	right: 25px;
	background: #0df053;
	color: #fff;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
	z-index: 100;
	padding-left: 10px;

}

.btn-wsp:hover{

	color: #0df053;
	background: #fff;


}

/*----------------------------------FOOTER --------------------------*/


.contenedor-footer{
	background-color: #000;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-content: center;

}

.contenedor-footer div{
	width: 200px;
	height: 230px;
	margin-top: 10px;
}

.contenedor-footer div h3{
	text-align: center;
	padding: 10px;
	border-bottom: 3px solid #0069ff;
	color: #fff;
	margin-top: 3px;
}

.contenedor-footer div a{
	display: block;
	text-align: center;
	padding: 7px;
	color: #fff;
}

.contenedor-footer div p{
	color: #fff;
	text-align: center;
	padding: 2px;
	padding-top: 5px;

}

.footer-info a:hover{
	color: #0069ff;

}

.copyright{
	background: #ccc;
	color: #000;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	gap: 5px;
	flex-flow: row wrap;
}

.copyright a{
	color: #002f69;
	text-decoration: underline;
}


@media screen and (max-width: 952px) {
	.enlace{
			padding-left: 20px;
				}
				nav ul li a{
			font-size: 16px;
				}

 .letrero-ultimas {
    font-size: 14px;       /* Texto más pequeño */
    padding: 8px 12px;     /* Menos espacio interno */
    bottom: 15px;             /* Ajuste de posición */
	left: 20%;
  }



}










@media screen and (max-width: 858px) {
	.checkbtn{
		display: inline-block;
		color: black;
		float: right;
		margin: 10px 10px 0 0;
		}

		ul{
		position: fixed;
		width: 100%;
		height: 50vh;
		background-color: #ccc;
		top: 60px;
		left: -100%;
		text-align: center;
		transition: all .05s;
		display: flex;
		justify-content: center;
		}
		nav ul li a{
			font-size: 12px;
		}

		nav ul li{
		margin: auto;
		line-height: 27px;
			}
		nav ul li{
		font-size: 0px;
			}
		li a:hover, li a.active{
		background: none;
		color: #0069ff;
			}
		#check:checked ~ ul{
		left: 0;
			}



.imagenes{
	width: 230px;
	height: 230px;
	border:none;
	margin:auto;
}

.precio{
	gap: 15px;
}

.grid-layout{
	grid-template-areas: 
	"nombre nombre nombre nombre"
	"descripcion descripcion descripcion descripcion"
	"precio precio precio precio"
	"imagenes imagenes imagenes imagenes"
	"comprar comprar comprar comprar"
	"despacho despacho despacho despacho"
	"usuarios usuarios usuarios usuarios"
	"complemento complemento complemento complemento"
	;

}

.imagenes{
	align-content: center;
	height: 400px;
	width: 350px;
	
}

#cambioimg{
	grid-row: 1 / 4;
	grid-column: 1 / 5;	
}

.contenedorscroll {
	grid-template-rows: repeat(4, 75px);
	grid-template-columns: 78px 78px 78px 78px;
	gap: 7px;
	padding: 0px;

}


.contenedorscroll div{
	width: 80px;
	height: 80px;
}

.letrero-ultimas {
    font-size: 12px;       /* Texto aún más pequeño */
    padding: 6px 10px;     /* Compacto */
    bottom: 10px;             /* Más arriba */
	left: 20%;
  }
}