/**
 * @copyright Nucliux
 * @author Epalazue (edoardo@nucliux.mx)
 * @version 1.1.0 (Diciembre 2023)
 * @since 1.0.0
 */

/*Importación de otros estilos*/
@import "reset.css";

/*Tipografías*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

/*Página*/
html,body{
	background-color: white;
	width: 100%;
	height: 100%;
	color: #C4C4C4;
	font-family: "Open Sans", sans-serif;
	font-size: 1.5vw;
}

.indice{
	padding: 5vh 8%;
	width: 84%;
}

.indice p{
	margin-bottom: 5vh;
}

.indice__logo{
	margin: 0 44%;
	margin-bottom: 5vh;
	width: 12%;
	height: auto;
	object-fit: contain;
}

.indice__contenedor{
	width: 100%;
}

.indice__contenido{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3vh 0;
	border-bottom: 0.3vh dotted black;

	display: -webkit-flex;
	-webkit-justify-content: space-between;
	-webkit-align-items: center;
}

.indice__contenido img{
	margin-right: 3%;
	width: 5%;
	height: auto;
	object-fit: contain;
}

.indice__contenido p{
	margin-bottom: 0;
	padding-right: 4%;
	width: 70%;
	color: #767676;
}

.indice__contenido a{
	background-color: #A78E85;
	padding: 1.5vh 0;
	width: 18%;
	color: white;
	text-align: center;
	text-decoration: none;

	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.indice__contenido a:hover{
	transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
}

/*Estilo para media pantalla
______________________________*/
@media only screen and (max-width: 1024px){
	html,body{
		font-size: 2.5vw;
	}

	.indice{
		padding: 5vh 5%;
		width: 90%;
	}

	.indice__logo{
		margin: 0 40%;
		margin-bottom: 5vh;
		width: 20%;
	}

	.indice__contenido img{
		width: 8%;
	}

	.indice__contenido p{
		width: 65%;
	}

	.indice__contenido a{
		width: 20%;
	}
}

/*Estilo para móviles
______________________________*/
@media only screen and (max-device-width: 465px){
	html,body{
		font-size: 4vw;
	}	

	.indice{
		padding: 5vh 3%;
		width: 94%;
	}

	.indice__logo{
		margin: 0 30%;
		margin-bottom: 5vh;
		width: 40%;
	}

	.indice__contenido img{
		width: 12%;
	}

	.indice__contenido p{
		width: 46%;
	}

	.indice__contenido a{
		width: 35%;
	}
}