/* =========================================================
  ESTILOS GENERALES - HERO  */
.hero{background: var(--bg);color: var(--paper);position: relative;background-image: url("../img/bg/bg-1.png");background-position: center;background-size: cover;}
.hero .section_container{display: flex;padding: 0;}
.hero_info{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2em 5% 4em;
}
.hero_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero h3{margin: 0;color: var(--brand);}
/* =========================================================
  RESPONSIVE: MÓVILES / TABLET (≤ 959px) */
@media (max-width:959px){
  .hero .section_container{flex-direction: column;flex-flow: column-reverse;}
  .hero_info{min-height: 40vh;}
  .hero_img{
    width: 100%;
    height: 40vh; /* o el alto que necesites */
  }
}

/* =========================================================
  RESPONSIVE: ESCRITORIO (≥ 960px) */
@media (min-width:960px){
  .hero{min-height: 100vh;}
  .hero_info{width: 40%;}
  .hero_img{
    width: 50%;
    height: 100vh; /* o el alto que necesites */
  }
  .hero h1{font-size: 270%;margin-bottom: 0.3em;}
  .hero h3{font-size: 170%;}
  .hero p{margin-bottom: 2em;}
  .hero_img img {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%
      );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%
    );
  }
}