.contenedor-quienes-somos { 
  background: linear-gradient(71deg, #080509, #1a171c, #080509);
  position: relative;
  margin: 0 auto;
  padding: 20px;
  display: grid; /* Usar grid en lugar de flexbox */
  grid-template-columns: 1fr 1fr; /* Definir dos columnas de igual tamaño */
  column-gap: 20px; /* Espacio entre las columnas */
  width: 90%;
  max-width: 1000px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  overflow: hidden;
  min-height: 200px;
  z-index: 3;
}

.text-section {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.text-section__h2 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 15px;
}

.text-section__p {
  font-size: 16px;
  color: #fff;
  text-align: justify;
  font-weight: 300;
  line-height: 1.5;
}

.map-section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.map-section figcaption {
    text-align: center;
    font-size: 1.8rem;
}


.text-section.last-section {
  grid-column: span 2;
  color: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.text-section.last-section p {
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}

.text-section.last-section p:last-child {
  margin-top: 20px;
}

/* Animación para el título desde la izquierda */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animación para el texto desde la izquierda */
@keyframes fade-in-text {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animación para el mapa con desvanecimiento */
@keyframes fade-in-map {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Ocultar antes de la animación */
.contenedor-quienes-somos .text-section .text-section__h2,
.contenedor-quienes-somos .text-section .text-section__h2 {
  opacity: 0;
  transform: translateX(-50px);
}

.contenedor-quienes-somos .map-section {
  opacity: 0;
}

/* Clase que se agregará con JavaScript */
.show-title {
  animation: slide-in-left 0.8s ease-out forwards;
}

.show-text {
  animation: fade-in-text 0.8s ease-out forwards;
}

.show-map {
  animation: fade-in-map 0.8s ease-out forwards;
}

/* Responsivo */
@media (max-width: 768px) {
  .contenedor-quienes-somos {
    grid-template-columns: 1fr;
    width: 90%;
  }

  .text-section, .map-section {
    width: 100%;
    text-align: flex-start;
    padding: 20px;
    margin: 2rem 0;
  }

  .text-section {
    padding-bottom: 0;
  }

  .map-section {
    height: 250px;
    order: 3; /* Asegura que el mapa esté al final */
  }

  .text-section.last-section { 
    padding: 20px 40px 20px 20px;
    order: 2;
  }
}