@charset "utf-8";
/* CSS Document */
*{margin: 0 auto;font-family: "Roboto", sans-serif;scroll-behavior: smooth;color: #FFFFFF}
/* le doy estilo a mi capa menu 1*/
header {background-color: deeppink; height: auto;display: block;z-index: 1000;box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4); position: fixed; width: 100%;}
nav {padding: 15px 0 15px; overflow: hidden;}
.menu1 {float: left; width: 10%;}
.menu1 img {margin-left: 40%; margin-top:auto}
/* le doy estilo a mi capa menu 2*/
.menu2 {float: left; width: 60%; padding-top: 2%}
.menu2 ul {list-style-type: none;text-align: center;}
.menu2 ul li {text-align: center;display: inline; padding: 5px;text-transform: uppercase;font-weight: bold;}
.menu2 ul li a {text-decoration: none;}
/* le doy estilo a mi capa menu 3*/
.menu3 {float: left; width: 20%;padding-top: 2%}
.menu3 p {text-align: center;}
.menu3 p a {text-decoration: none;}
/*estilo de mis 3 capas*/
.cuerpo{height: 500px;}
#servicios {background-color: purple; background-image: url("../img/bull.png");background-repeat: no-repeat;background-position: center bottom;}
#disenos {background-color: deepskyblue; background-image: url("../img/bull.png");background-repeat: no-repeat;background-position: left bottom;}
#contacto{background-color: paleturquoise; background-image: url("../img/bull.png");background-repeat: no-repeat;background-position: right bottom;}
/*Aqui le ponemos un icono de fondo a los item de menú al pasar el ratón*/
.menu-item {
  background-size: 50px;
  background-repeat: no-repeat;
  background-position:top;
  transition: background-image 0.3s ease; /* Para una transición suave */
}
.menu-item:hover {
	background-image: url("../img/fire-12470_128.gif");/* Imagen al pasar el ratón */
  cursor: pointer; /* Opcional, para indicar interactividad */
}
.grab {cursor: -webkit-grab; cursor: grab;}
footer {display: block; background-color: black; overflow: hidden; padding: 10%;}
footer div {float: left;}
footer div p {padding: 10px;text-align: justify}
footer img {float: left; margin-right: 50px; width: 90px;}
footer h2 {text-align: center;}
.pie1 {width: 20%;}
.pie2 {width: 60%;}
.pie3 {width: 20%;}