@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body{
display: flex;
flex-direction: column;
/* gap: 10px; */
}

.main {
  /* background-color: rgb(6, 73, 63);  */
  position: relative;
  width: 100%;
  height: auto;
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
    /* justify-content: center; */
  gap:50px;
}




a:hover{
color: rgb(11, 253, 245);
cursor: pointer; /* Cambiar el cursor al pasar por encima */

}

button  {
box-shadow: 0 0 5px cyan, 0 0 25px cyan;
padding: 12px 70px;
background-color:transparent ;
color: white;
font-size: 17px;
font-weight: 600;
border-radius: 12px;
  border: 1px solid #ffffff;
/* color: cyan; */
/* background-color: cyan; */
}

button:hover  {
box-shadow: 0 0 5px cyan, 
0 0 25px cyan,0 0 50px cyan,
0 0 100px cyan,0 0 200px cyan;
}


#intro {
/* background-color: bisque; */
position: relative;
height: 150px;
width: 800px;
top: 70px;
/* left: 350px; */
align-items: center;
  text-align: center; 
}

#intro_p {

    font-weight: 800;
    font-size: 52px;
position: relative;
top: 50px;
color: white;
}

#intro_p2 {
   font-size: 40px;
     font-weight: 600; /* Aplicar negrita al texto */
position: relative;
color: white;
top: 60px;
}





.gallery {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  justify-content: center;
  /* align-items: center; */
  display: flex;
}


.gallery:hover img {-webkit-transform:scale(1.1);transform:scale(1.1);}

.gallery img {
  position: absolute;
  width: 100%;
  object-fit: cover;
  height: 400px;
  opacity: 0;
  transition: opacity 1s ease-in-out, transform 10s ease;
  overflow:hidden;
 
}






.galeria2 {
  display: flex;
  width: 100%;
  height: 400px ;
  margin: 0 auto; /* Margen automático horizontal */
}

.galeria2 img {
  width: 0px;
  flex-grow: 1;
  object-fit: cover;
  opacity: .8;
  transition: 1s ease;
}

.galeria2 img:hover {
  cursor: pointer;
opacity: 1;
width: 350px;
filter: contrast(150%);
}

.seccion_2 {
  /* background-color: rgb(39, 39, 39); */
  position: relative;
  margin: 0 auto; /* Margen automático horizontal */
  width: 60%;
  height: 450px;
  /* aspect-ratio: 1.618;  */
  /* border: 1px solid rgba(0, 0, 0, 0.302); */
  /* left: 150px; */
  /* top: 40px; */
  /* z-index: 22222222; */
  /* border: 1px solid #ccc; */
  display: flex;
    box-shadow: 5px 5px 10px 0px  rgba(0, 0, 0, 0.154); 
}




.seccion_A_2 {
   flex-grow: 1;
  flex-basis: 25%;
  /* flex: 50%; */
  /* background-color: rgb(39, 39, 39); */
  /* position: relative; */
  /* width: 400px; */
  /* height: 400px; */
  /* left: 0px; */
  /* top: 0px; */

   display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */

  text-align: center;
  /* border: 1px solid #ccc; */
   /* box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);  */

}

.seccion_A_2 .icon {
height: 90px;
color: #ccc;
}

.seccion_A_2 h1 {
color:  rgb(68, 67, 67);
font-size: 32px ;
font-weight: bold;
padding: 10px;
}

.seccion_A_2 h2 {
position: relative;
color: rgb(68, 67, 67);
left: 0px;
font-size: 25px ;
font-weight: bold;
/* font-size: 23px ; */
padding: 5px;
}

.seccion_A_2 p {
position: relative;
color: rgb(158, 158, 158);
font-size: 16px ;
font-weight: 700;
line-height: 1.3;
margin: 0px 30px;
padding: 3px 0px ;
/* width: 60%; */
/* letter-spacing: 1px; */
/* text-align: center; */
}

.seccion_A_2 button {
box-shadow: 0 0 0px cyan;
padding: 12px 50px;
background-color:darkblue ;
/* color: white; */
font-size: 17px;
font-weight: 600;
border-radius: 12px;
border: 1px solid #ffffff;
/* color: cyan; */
/* background-color: cyan; */
cursor: pointer;
transition: transform 0.2s ease-in-out;
/* margin-bottom: 10px ; */
position: absolute;
bottom: 45px;

}

.seccion_A_2 button:hover {
/* box-shadow: 0 0 5px cyan; */
background-color:rgb(123, 123, 123) ;
/* color: white; */
border-radius: 12px;
/* border: 1px solid #0068ca; */
/* color: cyan; */
/* background-color: cyan; */
cursor: pointer;
/* transform: scale(1.1); */
transform: translateX(5px); /* Desplaza el botón 10px hacia la derecha */
}




.seccion_B_2 {
   flex-grow: 1;
  /* flex-basis: 65%; */
  /* background-color: rgb(39, 39, 39); */
  position: relative;
  /* width: 800px; */
  /* height: 400px; */
  /* left: 400px; */
  /* top: 0px; */
  /* z-index: 10; */
  overflow: hidden;
  /* border: 1px solid #ccc; */
    /* box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);  */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.seccion_B_3 {
   flex-grow: 1;
  flex-basis: 65%;
  /* background-color: rgb(39, 39, 39); */
    /* width: 800px; */
  /* height: 400px; */
  /* left: 400px; */
  /* top: 0px; */
  /* z-index: 10; */
  /* border: 1px solid #ccc; */
   overflow: hidden;
  /* border: 1px solid #ccc; */
 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.seccion_B_2 img {
    max-width: 500px;
     /* width: 90%; */
    /* height: auto; */
    margin: 10px;
    border: 5px solid #fff; /* Agrega un borde blanco */
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra */
    border-radius: 10px;
  }

#map{
width: 200%;
height: 400px;
 box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra */

}


.seccion_3 {
  /* background-color: rgb(39, 39, 39); */
  position: relative;
  margin: 0 auto; /* Margen automático horizontal */
  width: 65%;
  height: 550px;
  /* border: 1px solid rgba(0, 0, 0, 0.302); */
  /* left: 150px; */
  /* top: 40px; */
  /* z-index: 22222222; */
  /* border: 1px solid #ccc; */
  display: flex;
  /* justify-content: space-between; */
  gap: 30px;
  
}

.seccion_3 .box {
    flex: 1;
    /* border: 1px solid #333; */
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); 
    border-radius: 20px;  
}


.seccion_3 .box h2 {
font-size: 25px ;
color: darkblue;
font-weight: bold;
padding: 5px;
text-align: center;
}
.seccion_3 .box h3 {
font-size: 17px ;
color: rgb(105, 105, 105);
font-weight: bold;
padding: 5px;
margin-left: 10px;
/* text-align: center; */
}

.seccion_3 h4  {
color: rgb(158, 158, 158);
font-size: 17px ;
font-weight: normal;
/* line-height: 1.5; */
/* margin: 0px 10px; */
margin-left: 30px;
/* text-decoration: none; */
  color: #949494;
  text-decoration: none; /* Quitar subrayado */
  /* margin: 6px; */
/* letter-spacing: 1px; */
/* text-align: center; */

}

#map{
width: 96%;
height: 400px;
}
  /* Estilos responsivos */
        @media screen and (max-width: 900px) {

#map{
width: 100%;
height: 300px;
}


header h1{
  font-size: 20px;
  padding-left: 5px;
}

    #intro_p {
      font-size: 32px;
}

#intro_p2 {
   font-size: 30px;

}

.main {

  gap: 20px;
}


    .seccion_2 {
  width: 96%;
  height: 650px ;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); 
  border-radius: 10px;
  

}

.seccion_A_2 button {
visibility: hidden;

}
.seccion_B_2 img {
    max-width: 360px;
     /* width: 90%; */
    /* height: auto; */
    margin: 10px;
    border: 5px solid #fff; /* Agrega un borde blanco */
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); /* Agrega una sombra */
    border-radius: 10px;
  }

.gallery {
  height: 300px;
}

.gallery img {
   height: 300px;
 
}

.galeria2 {

  width: 90%;

}
.galeria2 img:hover {
width: 200px;
}

.seccion_A_2 {

min-height: 350px;


}


        }