@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
    font-family: 'Montserrat', sans-serif;
    box-sizing: content-box;/*distribuirá todos los elementos a lo ancho y alto de cada área*/
	text-decoration: none;/*quitará cualquier decoración que tengan los textos (ej: subrayado)*/
	margin: 0px;/*quitará cualquier margen que tengatoda la página*/
}

/* El estilo para área de la cabecera head*/
.head {
    display: flex;
	/* hara que los elementos se formen de manera horizontal*/
	justify-content: space-evenly;
	/*ubica los elementos en el eje principal, ayudará a separar los elementos, en este caso se iran a las esquinas, con evenly será poca la separación*/
	align-items: center;
	/*con esto centraremos todos los elementos de forma vertical*/
	background-color: #a49cd4;
	padding: 10px;
	margin: 1px;
}

/* El estilo para la imagen de intactum*/
#logo {
    width:110px;
    height: 50px;
    /*primer valor en px arriba y abajo y segundo valor en px a la izquierda y a la derecha*/
	border-radius: 20px;
}
/* El estilo para la imagen de facebook*/
#facebook {
    width:30px;
    height: auto;
}
#whatsapp {
    width:30px;
    height: auto;
}
.hora {
    font-size: 12px;
    color: white;
    text-shadow: -1.5px 1.5px 0 black;/*para agregar un sombreado al texto, el primer valor es para el eje x (sombrea a la derecha en valor positivo y en valor negativo a la izquierda), 
    el segundo el eje y (sombreado abajo en valor positivo y arriba en valor negativo 
    y el tercero es el blur (intensidad del sombreado en 0 es lo más intenso y al subir el valor se desvanece) */
}

/* Estilo para el área total del Menú o lista */
.navbar {
	background-color: rgb(199, 195, 195);
	margin: 1px;
	}

.menu{
	padding: 0px;
	display:flex;/*con display: flex y justify content: center pondremos todos los elementos centrados en el área*/
	justify-content:center;
}

.menu li{
	position: relative; /*position especifica cómo un elemento es posicionado en el documento.*/
	display: inline-block; /* display block: hace que el comportamiento del elemento sea como un bloque, inline: el elemento se renderizará en línea con otros elementos, inline-block: el elemento tendrá un comportamiento mezcla entre los dos anteriores*/
	padding: 15px 30px;/*Esto dará el espacio que quiero de separación entre arriba, abajo (el primer valor), a la derecha y a la izquierda (el segundo valor)*/
}

.menu li a{
	color: #0c0475;
}
/*para darle un hover a todos enlaces ahref dentro de li que estan dentro de la class="menu" y submenu*/
.menu li a:hover {
	color:whitesmoke;
}
.menu ul {
	display: none; /*para desaparecer el submenu de servicios*/
	position: absolute; /*Para poner el submenu de forma de bloques para abajo*/
	padding:10px 0px;/*Esto dará el espacio que quiero de separación entre arriba, abajo (el primer valor), a la derecha y a la izquierda (el segundo valor)*/
}
.menu li:hover ul{
	display: block;/*para aparecer el submenu de servicios cuando paso el mouse por servicios*/
	background-color: rgb(199,195,195);
	border-radius: 20px;
	text-align: center;
}
.menu ul li{
	padding:10px 0px;/*Esto dará el espacio que quiero de separación entre arriba, abajo (el primer valor), a la derecha y a la izquierda (el segundo valor)*/
}

/*dará estilo al espacio que ocupan las imágenes*/
.contenedor {
	display:flex;/*Esto permitira que las imágenes adapten al espacio*/
	margin: 1px;
	justify-content:space-evenly;/*Esto centrará las imágenes en el espacio que ocupan
	flex-direction: row;/*Esto pondrá las imágenes en forma horizontal y cuando es column las pone de forma vertical*/
	
}

/*Estilo para las imágenes*/
.imagen {
	width: 180px;
	height: 175px;
	padding: 5px;
	border-radius:15px;
}

/*Estilo para el artículo*/
article {
	margin: 1px;
	background-color: #a49cd4;
	padding: 20px;
	}

h1 {
	text-align: center;
	color: white;
	text-shadow: -1.5px 1.5px 0 black;/*para agregar un sombreado al texto, el primer valor es para el eje x (sombrea a la derecha en valor positivo y en valor negativo a la izquierda), 
    el segundo el eje y (sombreado abajo en valor positivo y arriba en valor negativo 
    y el tercero es el blur (intensidad del sombreado en 0 es lo más intenso y al subir el valor se desvanece)*/
}

p {
	padding: 0px 50px;/*Esto dará el espacio que quiero de separación entre arriba, abajo (el primer valor), a la derecha y a la izquierda (el segundo valor)*/
	text-align: justify;
}

/* Estilo para el pie de página */
footer {
	display: flex;
	margin: 1px;
	padding: 10px;
	justify-content:space-evenly;
	/*ubica los elementos en el eje principal, ayudará a separar los elementos*/
	background-color: rgb(199, 195, 195);
    align-items: center;
	/*con esto centraremos todos los elementos de forma vertical*/
}
/*dará el estilo a lo relacionado con el boton de enviar a pagina html*/
.contacto {
	width: auto;
	height: auto;
	background-color: #a49cd4;
	outline: 1px solid white; /*outline creará una línea alrededor del botón (en este caso de agenda un servicio)*/
	border-radius: 10px;
	text-align: center;
	padding: 10px;
}
.contacto a {
	color: white;
	text-shadow: -1.5px 1.5px 0 black;/*para agregar un sombreado al texto, el primer valor es para el eje x (sombrea a la derecha en valor positivo y en valor negativo a la izquierda), 
    el segundo el eje y (sombreado abajo en valor positivo y arriba en valor negativo 
    y el tercero es el blur (intensidad del sombreado en 0 es lo más intenso y al subir el valor se desvanece)*/
}


@media (max-width: 600px) {
	.head{
        display: flex;
        flex-direction: column;
        width:auto;
        height:fit-content;
        background-size: cover;        
    }
/* responsivo el área de logo, facebook, whatsapp y horario*/
    #logo {
        width: 80px;
        height: auto;
    }
    .hora{
        font-size: 70%;
    }
    #facebook{
        margin: 2px;
    }

    /*Responsivo para el menu de navegación*/
	.navbar {
		display: grid;
		justify-content: center;
    }
	.menu {
		width: auto;
		font-size: 12px;		
	}
	.menu li {
        padding: 10px;
		font-size: 90%;
    }

    /*Responsivo para las imagenes*/
	.contenedor	{
		display:flex;
		justify-content:space-evenly;
		/*ubica los elementos en el eje principal, ayudará a separar los elementos, en este caso se iran a las esquinas, con evenly será poca la separación*/
		align-items: center;
		/*con esto centraremos todos los elementos de forma vertical*/
	}
	
	.imagen {
		width: 100px;
        height: 100px;
    }

	/*Responsivo para el artículo*/
	h1, p{
	font-size: 80%;
	}

	/*Responsivo para el footer*/
	footer #logo {
		width: 70px;
		height: auto;
	}
	.contacto a {
		font-size: 13px;
	}
}