/* Animaciones */
.animarDesvanecer {
  animation: desvanecer 1s linear;
  opacity: 0;
}
.animarAparecer {
  opacity: 0; /* Estado inicial para la animación de entrada */
  animation: aparecer 1s forwards;
}

@supports (animation-timeline: view()) {
  .animarAparecer {
    animation-timeline: view();
    animation-range: entry 0% cover 50%; /* Ajusta el rango según sea necesario */
  }
}
.AnimarEntrarID {
  opacity: 0; /* Estado inicial para la animación de entrada */
  animation: entrarID 1s forwards;
}

@supports (animation-timeline: view()) {
  .AnimarEntrarID {
    animation-timeline: view();
    animation-range: entry 0% cover 50%; /* Ajusta el rango según sea necesario */
  }
}
.AnimarSalirID {
  animation: salirID 1s linear;
  opacity: 0;
}
.AnimarEntrarDI {
  opacity: 0; /* Estado inicial para la animación de entrada */
  animation: entrarDI 1s forwards;
}

@supports (animation-timeline: view()) {
  .AnimarEntrarDI {
    animation-timeline: view();
    animation-range: entry 0% cover 50%; /* Ajusta el rango según sea necesario */
  }
}
.AnimarSalirDI {
  animation: salirDI 1s linear;
  opacity: 0;
}


#div_mision_vision {
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

/* Misión y visión */
#bloque_mision,
#bloque_vision {
  position: relative;

  width: 45%;
  height: 90%;
  display: flex;
  flex-direction: row; /* Cambiado a row para que la imagen y el texto estén lado a lado */
  justify-content: space-around; /* Distribute space between image and content-wrapper */
  background-color: transparent; /* Fondo transparente */
  align-items: center;
  text-align: start;
  color: var(--color-black); /* Changed to black for better visibility on transparent background */
  border-radius: 20px;
  gap: 20px;
  box-shadow: 2px 2px 10px #00000033;
  
  transition: transform 0.2s ease, box-shadow 0.5s ease;
  
}

#bloque_mision:hover,
#bloque_vision:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px #00000054;
}


#bloque_mision {
  position: relative;
  background: none; /* Eliminado el fondo */
  color: var(--color-black); /* Color de texto para fondo transparente */
}

#bloque_vision {
  position: relative;
  background: none; /* Eliminado el fondo */
  color: var(--color-black); /* Color de texto para fondo transparente */
}

#bloque_mision *,
#bloque_vision * {
  width: auto; 
}

#bloque_mision img,
#bloque_vision img {
  width: 30%; /* Ajusta el tamaño de la imagen */
  height: 90%;
  object-fit: cover;
  border-radius: 20px;
}

#bloque_mision .content-wrapper,
#bloque_vision .content-wrapper {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

#bloque_mision #icono_cohete,
#bloque_vision #icono_foco {
  position: absolute;
  top: 2%;
  right: 2%;
  aspect-ratio: 1/1;
  width: 10%;
  background-color: var(--color-primary-red);
  color: var(--color-white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 1; 
  max-width: 70px;
}

#bloque_vision #icono_foco {
  background-color: var(--color-primary-green);
}


#bloque_mision svg,
#bloque_vision svg {
  height: 60%;
}

#bloque_mision h2 {
  display: flex;
  justify-content: center;
  color: var(--color-primary-red);

}

#bloque_vision h2 {
  display: flex;
  justify-content: center;
  color: var(--color-primary-green);

}

#bloque_mision p {
  display: grid;
  place-items: center;
  color: var(--color-primary-red);
}


#bloque_vision p {
  display: grid;
  place-items: center;
  color: var(--color-primary-green);
}

/* Keyframes */
@keyframes aparecer {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes desvanecer {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes entrarDI {
  0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes entrarID {
  0% { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes salirDI {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(100px); }
}

@keyframes salirID {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-100px); }
}


@media screen and (max-width: 1500px) {

  #bloque_mision h2 {
}

#bloque_vision h2 {
}


#bloque_mision p {

}


#bloque_vision p {
}
}



@media screen and (max-width:1000px) {

    #div_mision_vision{
        flex-direction: column;
        height: 100%;
        width: 100%;
    }

    #bloque_mision,
    #bloque_vision{

        width: 90%;
        height: 45%;
    }
}

@media screen and (max-width:500px) {
  #div_mision_vision{
    gap: 20px;
    margin-block: 50px;
    height: auto;
  }
#bloque_mision,
#bloque_vision{
  flex-direction: column;
  height: auto;
  padding-block: 20px;
}

#bloque_mision img,
#bloque_vision img {
  width: 60dvw;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 20px;
}

#bloque_mision .content-wrapper,
#bloque_vision .content-wrapper {
  width: 90%;
}
}