/* ESTILOS GENERALES CSNET */

:root{
    --negro: #131313;
	--secundario: #323232;
	--gris1: #eaeef1;
	--scroll-padding: 100px
}

@font-face {
	font-family: 'Mali';
	src: url('/fuentes/Mali/Mali-Light.ttf');
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: 'Mali';
	src: url('/fuentes/Mali/Mali-Regular.ttf');
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'Mali';
	src: url('/fuentes/Mali/Mali-Medium.ttf');
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: 'Mali';
	src: url('/fuentes/Mali/Mali-SemiBold.ttf');
	font-style: normal;
	font-weight: 600;
}

@font-face {
	font-family: 'Mali';
	src: url('/fuentes/Mali/Mali-Bold.ttf');
	font-style: normal;
	font-weight: 700;
}

.fondo-gris{
	background-color: var(--gris1);
}

.color-principal{
	color: var(--negro);
}

/* .color-oscuro{
	color: var(--oscuro);
} */

.boton-principal{
	color: white;
	background-color: var(--negro);
	border: 1px solid var(--negro);
	border-radius: 0;
}

.boton-principal:hover{
	color: white;
	background-color: var(--secundario);
	border: 1px solid var(--secundario);
}

.boton-outline-principal{
	color: var(--negro);
	border: 1px solid var(--negro);
}

.boton-outline-principal:hover{
	color: white;
	background-color: var(--negro);
}

body{
	background-color: white;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-size: 1rem;
}

body a{
    text-decoration: none;
    color: var(--secundario);
}
body a:hover{
    color: var(--negro);
}

main{
	flex-grow: 1;
}

.navbar-toggler{
	color: var(--negro);
}

.navbar-toggler:focus, .btn:focus, .btn-close:focus{
	box-shadow: none;
}


.form-control{
	border-radius: 0;
}

.form-control:focus{
	box-shadow: none;
	border-color: var(--negro);
}

.buscador input:focus::placeholder{
	color: transparent;
}

.boton-clausula{
	width: fit-content;
	border: 1px solid rgb(190, 190, 190);
}

.boton-clausula:focus, .boton-clausula:not(.collapsed){
    color: var(--negro);
    box-shadow: none;
    background-color: transparent;
	border: 1px solid rgb(190, 190, 190);
}

.boton-clausula:not(.collapsed)::after{
    background-image: url('/imagenes/iconos/chevron-down.svg'), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	
}

.pie{
	background-color: var(--gris1);
}

/* FIN DE ESTILOS GENERALES CSNET */
body{
    color: var(--negro);
    font-family: 'Mali', sans-serif;
}

.nav-link{
    color: var(--negro);
    font-weight: 500;
}

.nav-link:hover, .nav-link:focus{
    color: var(--secundario);
}

.header-scroll{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transition: all .3s;
	transform: translateY(-100%);
}

.logo-navbar{
    max-width: 150px;
}

.header .nav-link.active{
	border-bottom: 2px solid var(--negro);
}

.pie a{
    color: var(--secundario);
    text-decoration: none;
    transition: all .2s;
}

.pie a:hover{
    color: var(--negro);
}


/* PRODUCTOS */
.productos{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.productos a{
    color: var(--negro);
    text-decoration: none;
}

.descripcion-producto img{
    max-width: 100%;
    width: 300px;
}

.card-producto{
	max-width: 400px;
}

.img-producto{
	aspect-ratio: 4/3;
    max-height: 300px;
    object-fit: contain;
    object-position: center;
}

.menu-lateral .dropdown-item{
    color: var(--secundario);
    border-bottom: 1px solid #dee2e6 ;
}

.menu-lateral .dropdown-item.active{
	background-color: transparent;
    color: var(--secundario);
	/* position: relative; */
}

.menu-lateral .dropdown-item:hover, .menu-lateral .dropdown-item.active:hover{
	background-color: #f5f6f8;
}

.menu-lateral .dropdown-item.active li::before, .menu-lateral .dropdown-item.active li::after{
    content: '';
	/* position: absolute;
	left: 0;
	top: 0;
	bottom: 0; */
	width: 6px;
	height: 6px;
	border-radius: 100px;
	background-color: var(--secundario);
}

/* PAGINACIÓN */

.page-link, .page-link:hover, .page-link:focus{
    color: var(--negro1);
    box-shadow: none;
}

.page-item.active .page-link {
    background-color: var(--negro);
    border-color: var(--negro);
}

@media (max-width: 991.5px) {
	
	.logo-navbar{
		max-width: 80px;
	}

}