/* =========================================================
  ESTILOS GENERALES
  ========================================================= */
.about{
    position: relative;
    background-image: url("../img/bg/sunset-714924_1280.jpg");
    background-size: cover;
    background-position: center;
    min-height: 35vh;
    background-color: var(--ink);
}
.mision_vision{
  text-align: center;
  background-color: var(--ink);
  color: var(--paper);
}
.mision_vision .seccion_container{
  padding: 2em 0;
  display: flex;
  flex-wrap: wrap;
  text-align: start;
}
.about_header{color: var(--paper);z-index: 4;position: relative;}
.mision_vision_info{text-align: center;margin-bottom: 2em;height: 60vh;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.mision_vision_info h2{color: var(--brand-dark);}
.video_opacity{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgb(0, 0, 0, 50%);}
.mision_vision_text{position: relative;z-index: 3;background-color: rgb(255, 255, 255, 75%);margin: 2em 15%;padding: 2em;border-radius: 5px;}
.about_us_info{margin-bottom: 2em;}
.about_us_info h2{margin-bottom: 0.5em;}
.mision_vision_vid{padding: 56% 0 0 0;position: relative;}
.video{
  position: relative;
  overflow: hidden;
  padding: 120px 20px;
  color: white;
}
.video::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

/* VIDEO FONDO */
.video__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* CONTENIDO SOBRE VIDEO */
.mision_vision_info{
  position: relative;
  z-index: 2;
  margin: auto;
  text-align: center;
  background-color: rgb(255, 255, 255,50%);
  color: var(--ink);
  border-radius: 4px;
  padding: 2em 1em;
}

/* =========================================================
  RESPONSIVE: MÓVILES / TABLET (≤ 959px)
  ========================================================= */
@media (max-width:959px){
  .about .seccion_container h1{margin: 0;}
  .mision_vision{padding: 4em 4% 2em;}
  .about_header{padding: 2em 5%;}
}

/* =========================================================
  RESPONSIVE: ESCRITORIO (≥ 960px)
  ========================================================= */
@media (min-width:960px){
  .mision_vision{padding: 4em 13% 2em;}
  .about_header{
    padding: 3em 7%;
    width: 50%;
    margin: 0 auto;
  }
}