/* CSS para alfombras modificado*/
/* con * formateamos toda la página web y despues se dará estilo a cada sección*/
@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)*/
}

body {
    text-align: center;
    margin:1px;
}

/* 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;
    margin: 1px;
    padding: 10px;
}
/* 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*/
}
/* 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) */
}

/* El estilo para área principal*/
.principal {
    background: url(imagenes/portada.jpg) no-repeat center; /* pondrá la imagen en el área, no se repetirá en las demás áreas y estará centrada*/
    background-size: cover;
    margin: 1px;
}

/* El estilo del parrafo*/
.text {
    margin: 1px;
    font-size: 20px;
    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) */
    color:white;
    display:grid;
    align-items:center; /*centrará el título de forma vertical*/
    justify-content:center; /*centrará el título de forma horizontal*/
}
.text h1{
    width: 500px;
    font-size: 25px;
    padding:30px
}
.text h3{
    width: 500px;
    color:whitesmoke;
    margin:20px;
}
/* El estilo para los botones de referenciar (btn-inicio)*/
.botones{
    display: flex;
    align-items:center; /*centrará el título de forma vertical*/
    justify-content:space-evenly; /*centrará el título de forma horizontal*/ 
    padding: 20px;
}
.btn {
    padding: 10px 10px;/*10px arriba y abajo y 40px a la izquierda y a la derecha*/
    color:white;/*para el color de la letra*/
    text-decoration: none;/*para quitar cualquier decoración del texto (como subrayado)*/
    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)*/ 
    background: #a49cd4;
    border-style:double;
    border-radius: 30px;
    width: 100px;    
}
.btn:hover {
    background: none;
}

/* El estilo para el área de destacados*/
.destacado{
    background: url(imagenes/destacado.jpg)no-repeat center;
    background-size: cover;
    margin: 1px;
}
.contenedores{
    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*/
}
.caja{
width:230px;
background-color: rgba(260,200,200, 0.5);/*para dar el efecto de sombreado y color del sombreado*/
border-radius: 10px;
margin: 2px;
}
.caja h1{
    font-size: 25px;
    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) */
    color:white;
}
.caja h2{
    display: inline-block;
    font-size: 12px;
    width: 150px;
    
}
.botonini{
   padding: 20px;
}

/* El estilo para el área de nosotros*/
.about {
    height: 450px;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: #a49cd4;
    margin: 1px;
}
/* Estilo para todos los títulos h2 (nosotros, servicios, contacto, promoción) */
.titulo {
    margin: auto;
    font-size: 40px;/*para el tamaño del titulo*/
    font-weight: 600;/*para el grosor del titulo*/
    text-transform: uppercase;/*para poner todo en mayusculas*/
    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)*/
}


/* El estilo para el área de servicios incluye el título y el área de las imagenes*/
.sau {
    display: grid;   
    justify-content: center;
    align-items: center;
    background:rgb(199, 195, 195);
    margin: 1px;
    }
.sau h2{
    padding: 20px;
}
/* El estilo para el área de las imagenes, los enlaces y las descripciones*/
.box-container {
    width:auto;
    height: auto;
    display: flex;
    }
/* Para editar el area de cada imagen de los servicios con su enlace y descripción*/
.box-container .box {
    width: 125px;/*daran altura y ancho al area de la imagen, enlace y descripción*/
    margin: 10px;/*separa cada cuadro a lo alto, bajo, izquierda y derecha*/
}
/* Para editar el área de las imágenes dentro el área de los servicios*/
.box-container .box img {
    border-radius: 20%;
    background-color:#a49cd4 ;
    padding: 2px;
}
#cari{
    width: 90px;
    height: auto;
}
/* Para afectar todos los h3 que están en la parte de servicios */
h3 {
    margin: 15px 15px;
    font-size: 13px;
    color: gray;
}
/*Para darle estilo a los botones del área de servicios*/
a.btn2 {
    display: block;
    text-align: center;
    padding: 10px;/*10px arriba y abajo y 40px a la izquierda y a la derecha*/
    color:white;/*para el color de la letra*/
    text-decoration: none;/*para quitar cualquier decoración del texto (como subrayado)*/
    background:#a49cd4 ;
    border-radius: 20%;
}



/*Para editar el área de contacto con imagen, titulo y boton de envio (saber más)*/
.contact {
    height: 450px;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: #a49cd4;
    margin: 1px;
}
/* Para editar la imágen*/
#dibujo {
    width: 200px;
    height: 150px;
    border-radius: 50%;
}

/* El estilo para el área de promoción*/
.promo {
    height: 450px;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: rgb(199, 195, 195);
    margin: 1px;
}

/* El estilo para el área de aviso de privacidad*/
.aviso {
    display: flex;
    justify-content: center;
    margin: 1px;
    padding: 10px;
    background-color:#a49cd4;
    }
.aviso a{
    font-size: 15px;
    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)*/
    }


/*Para hacer responsiva una página (Que se vea bien en cualquier tamaño de pantalla, celular, tablet) se ocupa:*/
@media (max-width: 600px) {
	.head{
        display: flex;
        flex-direction: column;
        width:auto;
        height:fit-content;
        background-size: cover;        
    }
    #logo {
        width: 80px;
        height: auto;
    }
    .hora{
        font-size: 80%;
    }
    #facebook{
        margin: 2px;
    }
    

    .text {
        font-size: 10px;
        display: block;
    }
    .text h1{
        width: auto;
        margin:auto;
    }
    .text h3{
        width: auto;
    }
    .botones{
        display:grid;
    }
    .contenedores{
        display: grid;
    }
    .caja h1{
        font-size: 15px;
    }
    

    .btn, a.btn2 {
        margin: 10px 10px;
        font-size: 12px;
    }

    .titulo {
        margin: 10px;
        font-size: 25px;
    }
    
    .sau {
        height: auto;
    }
    .box-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;  
    }
    .box-container .box {
        width: 120px;
        height: 290px;
    }
    #cari {
        width: 70px;
        height: 70px;
    }
    h3 {
        font-size: 12px;
    }
    #dibujo {
        width: 150px;
        height: 100px;
    }
}