*{
    margin: 0;
    padding: 0;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    transition: 0.7s;
    padding: 30px 20px;
    z-index: 10;
    width: 100%;
    height: 50px;
    background-color: #fff;
}
header .logo{
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: 2em;
    letter-spacing: 2px;
    transition: 1.5s;
    text-decoration: none;
}
nav{
    display: flex;
    justify-content: center;
    align-items: center;
}

header ul{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 500px;
    margin-top: -20px;
    
}

header ul li{
    list-style: none;
}

header ul li a{
    position: relative;
    font-family: Open Sans, sans-serif;
    margin: 0 15px;
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 600;
    transition: 0.7s;
}



section#slide-imagenes { width: 100%; height: auto; margin: 0 auto; float: none; position: relative;}
section#slide-imagenes article.slick-banner { width: 100%; height: 78vh; margin: 0 auto; float: none; position: relative; overflow: hidden; margin-top: 65px; margin-bottom: 0px;}

section#slide-imagenes article.slick-banner figure { width: 100%; height: 88vh; margin: 0; float: left; position: relative; }
section#slide-imagenes article.slick-banner figure#slide-01 { background: url('IMAGEN1BANNERDINAMICO.webp') no-repeat top center; background-size: contain; }
section#slide-imagenes article.slick-banner figure#slide-02 { background: url('IMAGEN2BANNERDINAMICO.webp') no-repeat top center; background-size: contain; }
section#slide-imagenes article.slick-banner figure#slide-03 { background: url('IMAGEN3BANNERDINAMICO.webp') no-repeat top center; background-size: contain; }
section#slide-imagenes article.slick-banner a figure#slide-04 { background: url('IMAGEN4BANNERDINÁMICO.webp') no-repeat top center; background-size: contain; }
section#slide-imagenes article.slick-banner a figure#slide-05 { background: url('IMAGEN5BANNERDINÁMICO.webp') no-repeat top center; background-size: contain; }


section#slide-imagenes article.slick-banner figure div.contenedor { width: 70%; height: auto; display: block; margin: 31vh auto; float: none; position: relative; }
.slick-prev { left: 25px !important; z-index: 10 !important; }
.slick-next { right: 25px !important; z-index: 11 !important; }

div.Conocenos h1{
color: #2471B8;
padding-left: 150px;
margin-top: -10px;
}

div.Conocenos h4{
color: #606365;
padding-left: 150px;
padding-right: 80px;
margin-top: 30px;
width: 1150px;
margin-bottom: 30px;
text-align: justify;
}

div.Conocenos a{
border-radius: 20px 80px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
width: 200px;
height: 50px;
margin-left: 1165px;
margin-top: -450px;
}

div.Servicios img{
    width: 100%; 
    height: auto;
    display: flex;
}

div.Servicios a{
border-radius: 20px 80px;
margin-left: 900px;
margin-top: -500px;
width: 200px;
height: 50px;
size: 50ch;
}

div.Clientes h1{
color: #2471B8;
text-align: center;
margin-top: 70px;
margin-bottom: 20px;
}

div.Clientes ul{
text-align: center;
}

div.Clientes ul li{
margin-top: 50px;
margin-right: 50px;
list-style: none;
display: inline-block;
margin-bottom: 50px;
}

div.Clientes ul li img{
border-radius: 100%;
margin-bottom: 20px;
}

div.Clientes ul li h3{
margin-top: -50px;
color: #606060;
text-align: center;
}

div.Clientes ul li p{
color: #9D9B9B;
text-align: center;
}

div.Clientes a{
border-radius: 20px 80px;
width: 200px;
height: 50px;
size: 50ch;
align-content: center;
margin-left: 550px;
margin-top: -40px;
margin-bottom: 40px;
}

div.Footer div.parrafo1p{
  height: 150px;
}

div.Footer div.parrafo1p img{
border-radius: 100px;
width: 10%;
height: 70%;
margin-top: 50px;
margin-left: 50px;
}

div.Footer div.parrafo1p p.parrafo1{
color: #ffffff;
font-size: 12px;
margin-left: 450px;
margin-top: -155px;
}

div.Footer div.parrafo2p p.parrafo2{
color: #ffffff;
font-size: 12px;
margin-top: -70px;
margin-left: 950px; 
margin-bottom: 10px;
}


/* Estilo base del modal (visible por defecto) */
div.modal {
  visibility: visible; /* Cambiado a visible */
  opacity: 1; /* Cambiado a visible */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, 0.7);
  transition: all 0.4s ease;
}

/* Cuando el modal es objetivo (se oculta) */
div.modal:target {
  visibility: hidden;
  opacity: 0;
}

/* Contenido del popup */
div.modal div#popupContent {
  padding: 15px;
  position: relative;
  width: 1000px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

/* Imagen en el popup */
div.popupImg img {
  width: 100%;
  border-radius: 10px;
}

div.clase-btn a#cerrarModal{
  position: absolute;
  top: 15px;
  right: 15px;
  width: 45px;
  height: 45px;
  background: #2471b869;
  text-decoration: none;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 45px;
  color: rgb(15, 96, 227);
  border-radius: 5px;
  cursor: pointer;
}

div.clase-btn a#cerrarModal:hover {
  color: #b82724;
}

  /* Componente Menú Hamburguesa */
aside#menu-hamburguesa { width: 290px; height: 50%; display: none; margin: 0; float: none; position: fixed; top: 0; left: -290px; z-index: 99999; background:  #9D9B9B; font-family: Open Sans, sans-serif;}

aside#menu-hamburguesa a#abrir { width: 35px; height: auto; display: block; margin: 0; float: none; position: absolute; top: 15px; right: -35px; background: #2471B8; color: #fff; text-align: center; padding: 6px 0; font-size: 1.25em; border-radius: 0 5px 5px 0; transition: all 0.3s ease-in; }
aside#menu-hamburguesa a#abrir:hover { background: #2471B8; transition: all 0.3s ease-in; }

aside#menu-hamburguesa a#cerrar { width: 35px; height: auto; display: none; margin: 0; float: none; position: absolute; top: 15px; right: -35px; background: #2471B8; color: #fff; text-align: center; padding: 6px 0; font-size: 1.25em; border-radius: 0 5px 5px 0; transition: all 0.3s ease-in; }
aside#menu-hamburguesa a#cerrar:hover { background: #2471B8; transition: all 0.3s ease-in; }

aside#menu-hamburguesa nav { height: auto; width: 80%; margin: 10% auto; float: none; position: relative;}
aside#menu-hamburguesa nav ul{list-style: none;}
aside#menu-hamburguesa nav ul li a { width: 100%; height: auto; display: block; margin: 0 auto 15px; float: none; position: relative; text-align: center; font-size: 1.25em; line-height: 1em; padding: 10px 0; color: #fff; letter-spacing: 0.07em; font-family: Open Sans, sans-serif; text-decoration: none; transition: all 0.3s ease-in; }
aside#menu-hamburguesa nav ul li a:hover { color: #2471B8; transition: all 0.3s ease-in; }

/* Componente Botón WhatsApp */
aside#boton-whatsapp { width: 100px; height: 100px; margin: 0; float: none; position: fixed; bottom: 20px; right: 0px; z-index: 9999; }
aside#boton-whatsapp a { top: -38px;right:100px ;width: 80px; height: 80px; margin: 10px; float: none; position: relative; display: block; text-align: center; color: #fff; background: rgb(43 199 4); font-size: 1.5em; padding: 8px 0; border-radius: 100%; transition: all 0.3s ease-in; }
aside#boton-whatsapp a:hover { background: #0fc3d09f; transition: all 0.3s ease-in; }
aside#boton-whatsapp i { font-size: 60px;}

 /* Estilos para pantallas medianas (entre 1800px y 2500px de ancho) */
@media (min-width: 1800px) and (max-width: 2500px) {

    div.Conocenos p{
        padding-right: 30px;
        width: 1600px;
        }

    div.Conocenos a{
      margin-left: 1500px;
    margin-top: -300px;
    }

    header ul {
        margin-left: 0px;
        margin-right: 10px;
    }
    div.Footer div.parrafo1p img{
      width: 130px;
      height: 85%;
    }
    
    div.Footer div.parrafo1p p.parrafo1{
      margin-left: 550px;
      margin-top: -100px;
    }
    
    div.Footer div.parrafo2p p.parrafo2{
        margin-left: 1200px; 
        margin-bottom: 20px;
    }
    div.Clientes a {
      margin-left: 770px;
    }

}

/* Estilos para pantallas medianas (entre 1500px y 1800px de ancho) */
@media (min-width: 1500px) and (max-width: 1800px) {
    div.Footer div.parrafo1p img{
        width: 130px;
        height: 85%;
      }
      
      div.Footer div.parrafo1p p.parrafo1{
        margin-left: 450px;
        margin-top: -95px;
      }
      
      div.Footer div.parrafo2p p.parrafo2{
          margin-left: 1000px; 
          margin-bottom: 20px;
      }

    div.Conocenos h1{
      margin-top: 50px;
    }

      div.Clientes a {
        margin-left: 770px;
      }

      div.Servicios a { 
        margin-left: 950px;
      }
}

/* Estilos para pantallas medianas (entre 1200px y 1600px de ancho) */
@media (min-width: 1200px) and (max-width: 1500px) {

    div.Conocenos p{
        padding-right: 40px;
        width: 900px;
        }

    div.Conocenos a{
      margin-left: 1160px;
      margin-bottom: -65px;
    }

    header ul {
        margin-left: 0px;
        margin-right: 10px;
    }
    div.Footer div.parrafo1p img{
        width: 130px;
        height: 85%;
      }
      
      div.Footer div.parrafo1p p.parrafo1{
        margin-left: 350px;
        margin-top: -95px;
      }
      
      div.Footer div.parrafo2p p.parrafo2{
          margin-left: 750px; 
          margin-bottom: 20px;
      }
      div.Clientes a {
        margin-left: 550px;
      }

}
/* Estilos para pantallas pequeñas (entre 800px y 1200px de ancho) */
@media (min-width: 800px) and (max-width: 1199px) {
    header ul {
        margin-left: 0px;
        margin-right: 200px;
    }
    div.Footer div.parrafo1p p.parrafo1{
      margin-left: 300px;
      margin-top: -60px;
    }
    
    div.Footer div.parrafo2p p.parrafo2{
        margin-left: 700px; 
        margin-bottom: 10px;
    }
  }


  @media (min-width: 481px) and (max-width: 768px){
    header ul { width: 80px; height: 93px; margin: 0 auto; float: none; display: none;}

    div.Conocenos{
      max-width: 10px;
    }

    div.Conocenos h1{
      font-size: 1.5em;
      padding-left: 50px;
      margin-top: -230px;
    }

    div.Conocenos h4{
      font-size: 1em;
      width: 680px;
      padding-left: 50px;
      padding-bottom: 20px;
    }

    div.Conocenos a{
    margin-left: 400px;
    margin-top: -50px;
    }

    div.Servicios a {
      margin-left: 400px;
      margin-top: -150px;
    }

    div.Clientes a {
      margin-left: 215px;
    }

    aside#boton-whatsapp{
      bottom: 70px;
    }

    div.Footer{
        float: none;
    }
    div.Footer div.parrafo1p{
        height: 100px;
    }
    div.Footer div.parrafo1p img {
        border-radius: 100px;
        width: 15%;
        height: 100%;
        margin-top: 50px;
        margin-left: 50px;
    }

    div.Footer div.parrafo1p p.parrafo1 {
        color: #ffffff;
        font-size: 12px;
        margin-left: 250px;
        margin-top: -30px;
    }

    div.Footer div.parrafo2p p.parrafo2 {
        color: #ffffff;
        font-size: 12px;
        margin-top: -70px;
        margin-left: 250px;
        margin-bottom: 100px;
    }

    aside#menu-hamburguesa { 
        display: block; 
    }


    aside#menu-hamburguesa nav{
        margin-left: 40px;
    }
  }

  @media (min-width: 320px) and (max-width: 480px){
    header ul { width: 80px; height: 93px; margin: 0 auto; float: none; display: none;}

    div.Conocenos{
      height: 600px;
    }

    div.Conocenos h1 {
      margin-left: -110px;
      margin-bottom: 28px;
      margin-top: -350px;
    }

    div.Conocenos h4{
      width: 440px;
      padding-left: 50px;
    }

    div.Conocenos a{
      margin-left: 130px;
      margin-top: 0px;
      width: 150px;
      height: 40px;
    }

    div.Servicios a {
      margin-left: 240px;
      margin-top: -150px;
      width: 150px;
      height: 40px;
    }

    div.Clientes a {
      margin-left: 135px;
      width: 150px;
      height: 40px;
    }

    div.Servicios img{
      width: 100%;
      height: auto;
      display: flex;
      margin-top: 100px;
    }

    aside#boton-whatsapp a{
      top: 10px;
      right: 0px;
    }
  
    aside#boton-whatsapp{
      right: 45px;
    }
  
    div.Footer{
        float: none;
    }
    div.Footer div.parrafo1p{
        height: 100px;
    }
    div.Footer div.parrafo1p img {
        border-radius: 100px;
        width: 25%;
        height: 100%;
        margin-top: 50px;
        margin-left: 50px;
    }
  
    div.Footer div.parrafo1p p.parrafo1 {
        color: #ffffff;
        font-size: 12px;
        margin-left: 170px;
        margin-top: -65px;
    }
  
    div.Footer div.parrafo2p p.parrafo2 {
        color: #ffffff;
        font-size: 12px;
        margin-top: -90px;
        margin-left: 170px;
        margin-bottom: 100px;
    }
  
    aside#menu-hamburguesa { 
        display: block; 
    }
  
    aside#menu-hamburguesa nav{
        margin-left: 40px;
    }
  }