@charset "UTF-8";

.nosotros-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(34rem, 70svh, 48rem);
  padding: clamp(8rem, 16vh, 10rem) clamp(1.5rem, 6vw, 5rem) clamp(4rem, 9vh, 6rem);
  overflow: hidden;
  background-color: #1c212d;
  color: #fff;
  text-align: center;
}

.nosotros-hero__content {
  position: relative;
  z-index: 1;
  width: min(100%, 68rem);
  margin: 0 auto;
}

.nosotros-hero__eyebrow {
  margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
  color: rgba(255, 255, 255, 0.72);
  font-family: montserratbold;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nosotros-hero__title {
  max-width: 24ch;
  margin: 0 auto;
  color: #fff;
  font-family: montserratbold;
  font-size: clamp(2rem, 3.7vw, 3.2rem);
  line-height: 1.12;
  overflow-wrap: break-word;
}

.nosotros-hero__accent {
  display: block;
  width: 3.25rem;
  height: 2px;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto;
  background-color: #00a9bd;
}

.nosotros-hero__text {
  max-width: 56rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
  font-family: montserratmedium;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

.nosotros-hero__graphic {
  width: clamp(7rem, 10vw, 9rem);
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
  pointer-events: none;
}

.nosotros-hero__graphic img {
  display: block;
  width: 100%;
  height: auto;
}

#header-nav #marca .header-logo {
  transition: opacity 220ms ease;
}

#header-nav #marca .header-logo--light {
  opacity: 1;
}

#header-nav #marca .header-logo--color {
  opacity: 0;
}

#header-nav.header-nav--solid #marca .header-logo--light {
  opacity: 0;
}

#header-nav.header-nav--solid #marca .header-logo--color {
  opacity: 1;
}

@media (max-width: 1023px) {
  .nosotros-hero {
    min-height: clamp(33rem, 72svh, 42rem);
    padding-top: clamp(7.5rem, 18vh, 10rem);
    padding-bottom: clamp(3.5rem, 8vh, 5rem);
  }

  .nosotros-hero__title {
    max-width: 22ch;
  }

  .nosotros-hero__text {
    max-width: 46rem;
  }

  .nosotros-hero__graphic {
    width: clamp(5.5rem, 14vw, 7rem);
  }
}

@media (max-width: 480px) {
  .nosotros-hero {
    min-height: max(34rem, 100svh);
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .nosotros-hero__title {
    font-size: clamp(2rem, 10vw, 2.55rem);
  }

  .nosotros-hero__text {
    font-size: 1rem;
    line-height: 1.55;
  }

  .nosotros-hero__graphic {
    width: clamp(5.5rem, 22vw, 6.5rem);
  }
}