/* Estilo para el cuerpo de la página */
body {
	font-family: Arial; /* Define la fuente utilizada en el cuerpo del documento */
}

/* Estilo para el encabezado */
header {
	border: rgb(252, 12, 12); /* Establece el borde del encabezado */
	border-width: 2px; /* Establece el ancho del borde */
	box-shadow: 0px 3px 20px 3px rgba(218, 0, 0, 0.06); /* Establece una sombra alrededor del encabezado */
}

/* Contenedor del encabezado */
.head_container {
	padding: 20px; /* Añade relleno alrededor del contenido del contenedor */
	overflow: hidden; /* Controla cómo se maneja el desbordamiento del contenido */
}

/* Estilo para el logotipo */
.logo {
	float: left; /* Hace que el logotipo flote a la izquierda */
	margin-left: 20px; /* Establece un margen a la izquierda del logotipo */
}

/* Estilo para la imagen del logotipo */
.logo img {
	height: 50px; /* Establece la altura de la imagen del logotipo */
	margin-top: -10px; /* Ajusta el margen superior de la imagen del logotipo */
}

/* Estilo para el menú de navegación */
.menu {
	margin-top: 5px; /* Establece un margen superior para separar el menú del contenido superior */
	float: right; /* Hace que el menú flote a la derecha */
}

/* Estilo para la lista desordenada dentro del menú */
.menu ul {
	list-style-type: none; /* Elimina los puntos de la lista */
	margin-right: -10px; /* Ajusta el margen derecho de la lista */
}

/* Estilo para cada elemento de la lista del menú */
.menu li {
	display: inline; /* Hace que los elementos de la lista se muestren en línea */
	margin-right-last: 0px; /* Ajusta el margen derecho del último elemento de la lista */
}

/* Estilo para los enlaces dentro del menú */
.menu a {
	text-decoration: none; /* Elimina la decoración de los enlaces */
	font-weight: 500; /* Establece el peso de la fuente de los enlaces */
	color: #ffffff; /* Establece el color del texto de los enlaces */
	line-height: normal; /* Restablece la altura de línea del texto */
	font-size: 18px; /* Establece el tamaño de fuente de los enlaces */
	padding: 10px; /* Añade relleno alrededor del contenido de los enlaces */
	padding-left: 15px; /* Añade relleno a la izquierda de los enlaces */
	padding-right: 15px; /* Añade relleno a la derecha de los enlaces */
}

/* Estilo para los enlaces del menú cuando se pasa el mouse sobre ellos */
.menu a:hover {
	background: rgba(255, 255, 255, 0.1); /* Cambia el fondo del enlace al pasar el mouse */
	border: #ff9100; /* Establece el color del borde del enlace */
	border-radius: 20px; /* Establece el radio de borde del enlace */
	border-style: solid; /* Establece el estilo del borde del enlace */
	border-width: 2px; /* Establece el ancho del borde del enlace */
	transition: 0.2s; /* Agrega una transición suave al cambio de estilo */
}

/* Estilo para el icono del menú en dispositivos móviles */
.icon {
	display: none; /* Oculta el icono del menú por defecto */
}

/* Estilo para el menú desplegable en dispositivos móviles */
menu.responsive {
	position: relative; /* Establece la posición del menú relativa al contenedor */
}

menu.responsive {
	float: none; /* Cancela el flotado del menú */
	display: block; /* Hace que el menú se muestre como un bloque */
	text-align: left; /* Alinea el texto del menú a la izquierda */
}

/* Estilos para dispositivos con un ancho de pantalla máximo de 835px */
@media screen and (max-width: 835px) {
	/* Estilos específicos para la imagen del logotipo en dispositivos con ancho de pantalla máximo de 835px */
	.logo img {
		height: 40px; /* Establece una altura menor para la imagen del logotipo */
	}
	/* Oculta el primer elemento de la lista del menú en dispositivos con ancho de pantalla máximo de 835px */
	ul > li:first-of-type {
		display: none; /* Oculta el primer elemento de la lista */
	}
	/* Ajusta el margen del menú en dispositivos con ancho de pantalla máximo de 835px */
	.menu {
		margin: 0; /* Establece el margen del menú a cero */
		margin-right: -15px; /* Ajusta el margen derecho del menú */
		margin-left: -15px; /* Ajusta el margen izquierdo del menú */
	}
}

/* Estilos para dispositivos con un ancho de pantalla máximo de 690px */
@media screen and (max-width: 690px) {
	/* Oculta todos los elementos de la lista del menú en dispositivos con ancho de pantalla máximo de 690px */
	.menu li {
		display: none; /* Oculta todos los elementos de la lista */
	}
	/* Estilos para el icono del menú en dispositivos con ancho de pantalla máximo de 690px */
	.icon {
		font-weight: 900 !important; /* Establece el peso de la fuente del icono del menú */
		font-size: 27px !important; /* Establece el tamaño de fuente del icono del menú */
		padding: 0; /* Establece el relleno del icono del menú a cero */
		margin: 0; /* Establece el margen del icono del menú a cero */
		margin-top: -22px; /* Ajusta el margen superior del icono del menú */
		display: flex; /* Hace que el icono del menú se muestre como un elemento flexible */
	}
	/* Estilos para la imagen del logotipo en dispositivos con ancho de pantalla máximo de 690px */
	.logo img {
		height: 40px; /* Establece una altura menor para la imagen del logotipo */
	}
}

/* Estilos para el menú desplegable lateral en dispositivos móviles */
.sidenav {
	height: 100%; /* Establece la altura del menú al 100% del tamaño del viewport */
	width: 0; /* Inicialmente establece el ancho del menú a cero */
	position: fixed; /* Establece la posición del menú como fija */
	z-index: 1; /* Establece el índice z del menú */
	top: 0; /* Alinea el menú en la parte superior del viewport */
	left: 0; /* Alinea el menú en la parte izquierda del viewport */
	background-color: #1a1818; /* Establece el color de fondo del menú */
	overflow-x: hidden; /* Oculta el desbordamiento horizontal del menú */
	transition: 0.2s; /* Agrega una transición suave al menú */
	padding-top: 87px; /* Añade relleno en la parte superior del menú */
	box-shadow: 2px 8px 20px rgba(180, 137, 137, 0.24); /* Establece una sombra alrededor del menú */
}

/* Estilos para los enlaces del menú desplegable lateral */
.sidenav a {
	padding: 8px 8px 8px 32px; /* Añade relleno a los enlaces del menú */
	text-decoration: none; /* Elimina la decoración de los enlaces */
	font-size: 25px; /* Establece el tamaño de fuente de los enlaces */
	color: #00fad9; /* Establece el color del texto de los enlaces */
	display: block; /* Hace que los enlaces se muestren como bloques */
	transition: 0.3s; /* Agrega una transición suave a los enlaces */
}

/* Estilos para los enlaces del menú desplegable lateral cuando se pasa el mouse sobre ellos */
.sidenav a:hover, .offcanvas a:focus {
	color: #F7CA18; /* Cambia el color del texto al pasar el mouse sobre los enlaces */
}

/* Estilos para el botón de cerrar el menú desplegable lateral */
.sidenav .closebtn {
	position: absolute; /* Establece la posición del botón de cierre como absoluta */
	top: 0; /* Alinea el botón de cierre en la parte superior del menú */
	right: 25px; /* Alinea el botón de cierre en la parte derecha del menú */
	font-size: 36px; /* Establece el tamaño de fuente del botón de cierre */
	margin-left: 50px; /* Establece el margen izquierdo del botón de cierre */
}

/* Estilos para el contenedor del encabezado con efecto de sombra */
.head_container {
	box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Añade una sombra al contenedor del encabezado */
	transition: box-shadow 0.3s ease-in-out; /* Suaviza la transición del cambio de sombra */
}

/* Estilo para los enlaces dentro del contenedor del encabezado */
.head_container a {
	transition: color 0.3s ease-in-out; /* Suaviza la transición del cambio de color */
}

/* Estilo para los enlaces dentro del contenedor del encabezado cuando se pasa el mouse sobre ellos */
.head_container a:hover {
	color: #009688; /* Cambia el color del texto al pasar el mouse sobre los enlaces */
}

/* Estilos específicos para dispositivos con un ancho de pantalla máximo de 768px */
@media (max-width: 768px) {
	.head_container {
		/* Agregar ajustes específicos para dispositivos móviles */
	}
}