.nosotros {
  padding: 40px 20px;
  background: #fafafa;
  text-align: center;
}

.nosotros h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
  padding-left: 2%;
}

.nosotros p {
  max-width: 800px;
  margin: 0 auto 30px;
  line-height: 1.6;
  text-align: justify;
  padding-right: 20px;
}

.mision-vision {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.mision, .vision {
  flex: 1 1 300px;
  background: #fff;
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: left;
}


.imagen-seccion {
  width: 100%;
  margin: 40px auto;  /* espacio arriba/abajo y centrado */
  text-align: center;
}

.imagen-seccion img {
  width: 90%;          /* ocupa el 90% del ancho del contenedor */
  max-width: 800px;    /* nunca más de 800px en pantallas grandes */
  height: 250px;       /* altura controlada */
  object-fit: cover;   /* mantiene proporción recortando si hace falta */
  border-radius: 12px; /* opcional: esquinas suaves */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* opcional: efecto flotante */
  display: block;
  margin: 0 auto;      /* asegura centrado */
}


.nosotros-con-imagen {
  display: flex;
  flex-wrap: wrap;       /* permite que se apilen en móviles */
  gap: 30px;
  align-items: flex-start;
  margin: 40px 0;
}

.texto-nosotros {
  flex: 1 1 400px;       /* mínimo 400px */
}

.imagen-nosotros {
  flex: 1 1 300px;       /* mínimo 300px */
  text-align: center;
}

.imagen-nosotros img {
  width: 90%;            /* ocupa 90% del contenedor */
  max-width: 400px;      /* nunca más de 400px */
  height: auto;          /* mantiene proporción */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}



/*--responsividad----------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .nosotros-con-imagen {
    flex-direction: column;  /* se apila verticalmente */
    align-items: center;     /* centra contenido */
  }

  .texto-nosotros, .imagen-nosotros {
    flex: 1 1 100%;          /* ocupan todo el ancho */
  }

  .imagen-nosotros img {
    max-width: 90%;           /* ancho adaptable */
    height: auto;
  }
}