.div1Sec4 {
    margin-left: 5%; /* Mantiene el div alineado a la izquierda */
    width: 50%;
    font-size: 18px;
    display: flex;
    justify-content: flex-start; /* Asegura que el contenido empiece desde la izquierda */
    align-items: center; /* Centra verticalmente el contenido */
    margin-right: auto;
    padding: 1px; /* Espacio interno */
}

.somos {
    object-fit: cover;
}

.textsec4 {
    text-align: justify;
    text-align-last: left; 
    
    color: rgb(0, 0, 0);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 19px;
    max-width: 600px;
    padding: 10px;
    margin-left: 10px;
    margin-right: auto;
}

.lado-izquierdo {
    flex: 1; /* Ocupa la mitad del ancho */
    display: flex;
    flex-direction: column; /* Apila verticalmente Div 1 y Div 2 */
}

.div1, .div2 {
    flex: 1; /* Cada uno ocupa 50% de la altura del lado-izquierdo */
   margin-top: 10px;
    padding: 10px;
}

.div3 {
    position: relative;
    overflow: visible;
    height: auto;
    text-align: right;
    flex: 1; /* Ocupa la otra mitad del ancho */
}

.mapa {
    position: absolute;
    margin-top: 100px;
    width: 650px; /* Ancho fijo (ajusta según diseño) */
    height: auto;
    right: 0; /* Sobresale a la derecha */
    top: 50%; /* Centrado vertical */
    transform: translateY(-50%);
    /* Asegura que esté por encima de otros elementos */
}

.misionvision img {
    display: block;
    max-width: 100%; /* Evita que la imagen se salga del contenedor */
    height: auto;
    width: 30%;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.misionvisiontexto {
    font-size: 20px;
    max-width: 90%;
    margin-right: 5%;
    text-align: justify;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.secboton {
    background-color: #141F35;
    text-align: center; /* Centra el contenido */
    padding: 20px;
}

.btn-link {
    text-decoration: none; /* Quita el subrayado */
    display: inline-block;
}

.btn {
    text-decoration: none;
    font-size: 2vw; /* Tamaño adaptable */
    width: 30vw; /* 30% del ancho */
    min-width: 150px; /* Tamaño mínimo */
    max-width: 300px; /* Tamaño máximo */
    height: 8vh; /* Altura adaptable */
    min-height: 40px;
    max-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    font-weight: 500;
    padding: 0.7em 1.4em;
    color: white;
    background: linear-gradient(0deg, rgb(226, 35, 146) 0%, rgb(236, 51, 165) 100%);
    border: none;
    letter-spacing: 0.05em;
    border-radius: 1em;
}

/* Efecto hover */
.btn:hover {
    background: linear-gradient(0deg, rgb(200, 30, 130) 0%, rgb(210, 40, 140) 100%);
}


 @media screen and (max-width: 768px) {
   
  .secboton{
    border: 1px solid #141F35;
    
  }

  .btn{
    width: 100vh;
    margin: 0;
    font-size: 1.8rem;
    text-align: center;
    margin-right: 4vh;
  }



.lado-izquierdo {
  flex: 90%;
  display: flex;
  flex-direction: column;
  width: 100%;
  order: 1;
  position: relative;
  margin-right: 4vh;
}

.div1 {
  width: 100%;
  order: 1;
  text-align: center;
  position: relative;
  margin-top: 20px;
}

.div2 {
  width: 100%;
  order: 2;
  box-sizing: border-box; /* Asegura que el padding no aumente el ancho */
  position: relative;
}

.div3 {
  width: 100%;
  order: 3;
  text-align: center;
  position: relative;
  height: auto; /* Asegura que se ajuste al contenido */
  margin-bottom: 0;
  padding: 0;
}


.mapa {
  display: block;
  width: 0%;
  height: auto;
  margin: 4vh auto 0 auto; /* margen superior, centrado horizontal */
}

.somos {
  width: 80%;
  height: auto;
  margin: 0 auto;
}

.misionvision img {
width: 40%;

}


}