/* 
---------------------
hero quienes somos 
---------------------
*/
.cont-titulo-general {
  margin-bottom: 0;
}

.hero-quienes-somos {
  margin-top: 150px;
  margin-bottom: 150px;
}

/* Ajustar la imagen detrás del marco y corregir el desajuste en pantallas pequeñas */
.banner-hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 80px;
}
.banner-hero img:first-child {
  position: relative;
  z-index: 2;
  max-width: 100%;
  height: auto;
}
.banner-hero .imagen-hero {
  position: absolute;
  z-index: 1;
  max-width: 90%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.texto-hero-quienes-somos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
  margin-top: 100px;
}
.texto-hero-quienes-somos .texto-hero {
  font-family: var(--font-secundario-regular);
  font-size: var(--font-size-paragraph);
  color: var(--color-azul-navy);
  /* line-height: 1; */
  text-align: justify;
  margin: 0 20px;
}
.texto-hero-quienes-somos img {
  margin-right: 10%;
}

/* 
---------------------
mi vision 
---------------------
*/

.vision {
  /* margin-top: 150px; */
  background: var(--color-cyan);
  padding: 10px;
}
.contenedor-vision {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 60px 20px;
  border: 3px solid var(--color-white);
  border-radius: 10px;
}
.contenedor-titulo-vision {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}
.contenedor-titulo-vision h2 {
  font-family: var(--font-principal-regular);
  font-size: var(--font-size-title);
  color: var(--color-amarillo);
}
.texto-vision {
  width: 80%;
  margin-top: 70px;
  font-family: var(--font-principal-regular);
  font-size: 25px;
  color: var(--color-white);
  text-align: center;
  padding: 0 20px 40px 20px;
  text-transform: uppercase;
}
/* 
---------------------
fin mi vision 
---------------------
*/

/* 
---------------------
valores 
---------------------
*/

.contenedor-valores {
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  /* padding: 0 20px 60px 20px; */
}
.texto-valores {
  width: 95%;
  font-family: var(--font-secundario-regular);
  font-size: var(--font-size-paragraph);
  color: var(--color-azul-navy);
  text-align: center;
}
.cards-valores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.card-valor {
  width: 360px;
  background: var(--color-white);
  border: 2px solid var(--color-cyan);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.card-valor:hover {
  border-color: var(--color-amarillo);
  transform: scale(1.05);
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  background-color: rgba(245, 245, 3, 0.5); /* yellow with 50% opacity */
}
.titulo-card-valor {
  font-family: var(--font-principal-regular);
  font-size: 30px;
  color: var(--color-cyan);
  margin-bottom: 10px;
}
.texto-card-valor {
  padding: 10px;
  font-family: var(--font-secundario-regular);
  font-size: var(--font-size-paragraph);
  color: #58595b;
}
/* 
---------------------
fin valores
---------------------
*/

.timon img{
  top : -600px!important;
} 

/* responsive */
@media screen and (max-width: 768px) {
  .texto-hero-quienes-somos {
    flex-direction: column;
    gap: 20px;
  }
  .texto-hero-quienes-somos img {
    margin-right: 0;
  }
  .texto-hero-quienes-somos .texto-hero {
    font-size: var(--font-size-paragraph-sm);
    margin: 0 10px;
  }
  .titulo-vision {
    font-size: 28px !important;
    text-align: center;
  }
  .hero-quienes-somos {
    margin-top: 100px;
    margin-bottom: 0;
  }
  .banner-hero {
    margin-top: 0;
  }
  .texto-hero-quienes-somos {
    margin-top: 50px;
  }
  .contenedor-valores {
    margin-top: 70px;
  }
  .cont-titulo-general {
    margin-bottom: 0;
  }
}