*{
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a{
    text-decoration: none;
    color: white;
}

body{
    background-color: #232323;
}

.header{
    margin: 5dvh auto;
    width: 70%;
}

.title{
    color: white;
    font-size: 2rem;
}

.barraNav{
    width: 100%;
    display: flex;
    background-color: #232323;
    height: 7dvh;
    align-items: center;
    border-radius: 15px;
    position: relative;
    right: 0;
    left: 0%;
    justify-content: space-around;
}

@property --angle{
	syntax:"<angle>";
	initial-value:0deg;
	inherits:false;
}

.barraNav::after, .barraNav::before{
	--angle:0deg;
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	background: conic-gradient(from var(--angle), #9b00ca 5%,rgb(44, 4, 190));
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: -1;
	padding: 3px;
	border-radius: 10px;
	animation: spin 2s linear infinite;
}

.btn::before{
	filter: blur(2rem);
	opacity: 0.5;
}

@keyframes spin{
	from{
		--angle:0deg;
	}
	
	to{
		--angle:360deg;
	}
}

.listNav{
    display: flex;
    flex-direction: row;
    gap: 1dvh;
    list-style: none;
}

.itemListNav{
    padding: 1dvh 1dvh 5px;
    color: white;
    cursor: pointer;
    border-bottom: solid 2px transparent;
    transition: transform 0.5s, border-bottom 0.5s;
}

.itemListNav:hover{
    border-bottom: solid 2px white;
    transform: translateY(-5px);
    transition: transform 0.5s, border-bottom 0.5s;
}

/* --------------------------------------------------------------- */
.mainIndex{
    width: 90%;
    margin: auto;
    border-radius: 15px;
    /* outline: solid 2px purple; */
    padding: 1px;
    box-sizing: border-box;
}

.ctnCategorias{
    width: 80%;
    margin: 7dvh auto;
    display: flex;
    flex-direction: column;
    gap: 5dvh;
}

.subtitulo{
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
}

.listCategorias{
    display: flex;
    flex-direction: row;
    gap: 4dvh;
    list-style: none;
}

.itemListCategoria{
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    gap: 1dvh;
    outline: solid 2px white;
    padding: 2dvh;
    color: white;
    font-weight: 600;
    border-radius: 15px;
    width: 150px;
    transition: transform 0.5s, background-color 0.5s;
}

.itemListCategoria:hover{
    transform: scale(1.1);
    background-color: rgb(1, 1, 110);
    transition: transform 0.5s, background-color 0.5s;
}






.ctnPrductos{
    width: 80%;
    margin: 7dvh auto;
    display: flex;
    flex-direction: column;
    gap: 5dvh;
}

.listProductos{
    list-style: none;
    display: grid;
    gap: 5dvh;
    grid-template-columns: repeat(4, 1fr);
}

.itemProducto{
    display: flex;
    flex-direction: column;
    gap: 2dvh;
    height: 330px;
    background: linear-gradient(4deg, #3d0048, #000000);
    border-radius: 10px;
    cursor: pointer;
    padding: 2dvh;
    transition: scale 0.5s,filter 0.5s ;
}

.itemProducto:hover{
    scale: 1.05;
    filter: drop-shadow(0px 0px 2px black);
    transition: scale 0.5s, filter 0.5s;
}

.ctnImgProducto{
    /* height: 250px; */
    /* background-color: antiquewhite; */
    /* width: 100%; */
    border-radius: 10px;
}

#productoImg{
    width: 100%;
}

.ctnDescription{
    display: flex;
    flex-direction: column;
    gap: 1dvh;
    padding: 1dvh;
    color: white;
}

.ctnDescription p{
    font-weight: 600;
    font-size: 1.1rem;
}

#productoDescripcion{
    font-size: 1.3rem;
    text-align: center;
}




/* --------------------------------------------------------------- */

.footer{
    height: 10dvh;
    width: 90%;
    margin: 2dvh auto;
    outline: solid 2px purple;
    border-radius: 10px;
}