/*********************************************************************************/
/* SECCION QUIENES SOMOS 1 */
/*********************************************************************************/

.section-quienessmos {
  background-color: #fff;
  max-width: 150rem;
  width: 100vw;
  margin: 0 auto;
  background-image: url(../img/quienes-somos/hero-quienes-somos.webp);
  background-size: cover;
  background-position: center;

  display: grid;
  grid-template-columns: 1fr 1fr;
}

.quienessomos-descripcion {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rem 0 8rem;
  line-height: 1.2;
  background-image: url(../img/quienes-somos/Telaraña.webp);
  background-size: cover;
  background-position: center;
}

.quienesomos-text {
  font-size: 2.2rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.4;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

.quienesomos-text span {
  font-weight: bold;
}

.quienesomos-img-box {
  padding: 6.4rem 3.2rem;
}

.frase-hero-img {
  width: 100%;
}

/*********************************************************************************/
/* SECCION HPLC */
/*********************************************************************************/
.HPLC {
  background-color: #fff;
  max-width: 150rem;
  width: 100vw;
  margin: 0 auto;
  background-image: url(../img/quienes-somos/ImagenHPLC.webp);
  background-size: cover;
  /* background-position: center; */

  display: grid;
  grid-template-columns: 1fr 2fr;
}

.HPLC-descripcion {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  padding: 16rem 9.6rem;
  line-height: 1.2;
}

.HPLC-h2 {
  font-size: 4.8rem;
  font-style: italic;
  color: #76777a;
}

.HPLC-text {
  font-size: 2.2rem;
  font-weight: 400;
  color: #76777a;
  line-height: 1.4;
}

.HPLC-text span {
  font-weight: bold;
  font-style: italic;
}

/*********************************************************************************/
/* SECCION ESENCIAL */
/*********************************************************************************/
.section-esencia {
  background-color: #fff;
}

.grid--esencial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  text-align: center;
  gap: 4.8rem;
}

.esencial-col-1 {
  grid-column: 1 / -1;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 0 8rem;
  margin-top: 3.2rem;
  color: #76777a;
}

.esencial-col-1 span {
  font-weight: bold;
  font-style: italic;
}

.esencial-col-2,
.esencial-col-3 {
  color: #0055b8;
  font-size: 2.5rem;
  font-weight: 500;
  margin-bottom: 4.8rem;
  line-height: 1.2;
}

/*********************************************************************************/
/* SECCION VIDEO */
/*********************************************************************************/
.video {
  max-width: 150rem;
  width: 100vw;
  margin: 0 auto;
  background-image: url(../img/quienes-somos/Pasillo-Foto-de-Video.webp);
  background-size: cover;
  background-position: center;
}

.video-content {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  align-items: center;
  justify-content: center;
  padding: 18rem 9.6rem;
  line-height: 1.2;
}

.video-texto {
  font-size: 4rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #0055b8;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

.video-boton a:link,
.video-boton a:visited {
  display: inline-block; /* para que pueda tomar el padding especificado y ocupe solamente el espacio necesario*/
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 3.6rem;
  font-weight: 600;
  padding: 1.6rem 3.2rem;
  border-radius: 9px;
  border: 3px solid #fff;
  margin-top: 4rem;

  /* PARA EL .BTN DEL FORMULARIO NADA MAS */
  cursor: pointer;

  /* PONERLO SIEMPRE EN EL ESTADO ORIGINAL DEL BOTON EN ESTE CASO*/
  transition: all 0.3s;
  background-color: none;
  color: #fff;
}

.video-boton a:hover,
.video-boton a:active {
  background-color: #0055b8;
}