@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: 20%;}
.menu1 img {margin-left: 40%;}
/* le doy estilo a mi capa menu 2*/
.menu2 {float: left; width: 60%;padding-top: 2.5%}
.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.5%}
.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: 30px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease; /* Para una transición suave */
}
.menu-item:hover {
  background-image: url( "../img/bull.png"); /* Imagen al pasar el ratón */
  cursor: pointer; /* Opcional, para indicar interactividad */
}
/*esto es un cursor*/
.url {cursor: url(myBall.cur),auto;}
footer {display: block; background-color: #000;overflow: hidden; padding: 10px}
.pie1 {width:20%;}
.pie2 {width:60%;}
.pie3 {width:20%;}
footer div {float:left;}
footer img {float:left; margin-right:50px; width:90px;}
footer div p{padding:10px;text-align: justify}
footer h2 {text-align: center}