/*
 * Nexo Base - Hero / Banner do Header.
 *
 * Este arquivo deve ser carregado condicionalmente apenas quando
 * o Hero estiver ativo na página atual.
 */

.nexo-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  min-height: var(--nexo-hero-min-height, 620px);
  max-height: var(--nexo-hero-max-height, 1080px);
  margin-top: var(--nexo-hero-margin-top, 0);
  margin-bottom: var(--nexo-hero-margin-bottom, 0);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: var(--nexo-hero-padding-top, 160px);
  padding-bottom: var(--nexo-hero-padding-bottom, 120px);
  overflow: hidden;
  background-color: #ffffff;
}

.nexo-hero--background {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--nexo-hero-background-position, center center);
}

.nexo-hero--image {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.nexo-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nexo-hero-background-position, center center);
  z-index: 0;
}

.nexo-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 23, 42, var(--nexo-hero-overlay-opacity, 0.15));
  pointer-events: none;
}

.nexo-hero__inner {
  position: relative;
  z-index: 2;
  width: min(var(--nexo-header-container-width, 1362px), calc(100% - 48px));
  min-height: inherit;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.nexo-hero__content {
  width: 100%;
  max-width: 720px;
  color: #25292a;
}

/* ==========================================================================
   Hero content custom HTML
   ========================================================================== */

.nexo-hero-copy {
  width: 100%;
  max-width: 720px;
}

.nexo-hero-copy__eyebrow {
  margin: 0 0 8px;
  color: #ff5a00;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nexo-hero-copy__title {
  margin: 0 0 20px;
  color: #25292a;
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.nexo-hero-copy__title-line {
  display: block;
  white-space: nowrap;
}

.nexo-hero-copy__text {
  max-width: 520px;
  margin: 0 0 22px;
  color: #25292a;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.32;
}

.nexo-hero-copy__cta {
  width: 100%;
}

.nexo-hero-copy__cta .nexo-cta-button-wrap {
  width: auto;
  margin: 0;
}

.nexo-hero-copy__cta .nexo-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 7px;
  font-size: var(--nexo-cta-button-font-size, 15px);
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.nexo-hero-copy__button {
  --nexo-whatsapp-icon-size: 25px;
  --nexo-whatsapp-icon-gap: 14px;
  --nexo-cta-label-offset-y: 1px;
  --nexo-cta-button-font-size: 15px;
}

/* ==========================================================================
   Hero content safe area below floating header
   ========================================================================== */

.nexo-hero--has-content {
  min-height: max(
    var(--nexo-hero-min-height, 620px),
    calc(
      var(--nexo-header-top-offset, 57px) + var(--nexo-header-height, 89px) +
        520px
    )
  );
  padding-bottom: max(var(--nexo-hero-padding-bottom, 120px), 90px);
}

.nexo-hero--has-content .nexo-hero__inner {
  align-items: flex-start;
  padding-top: calc(
    var(--nexo-header-top-offset, 57px) + var(--nexo-header-height, 89px) + 48px
  );
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .nexo-hero__content,
  .nexo-hero-copy {
    max-width: 640px;
  }

  .nexo-hero-copy__eyebrow {
    font-size: clamp(32px, 4.2vw, 46px);
  }

  .nexo-hero-copy__text {
    font-size: 15px;
  }
}

@media (max-width: 780px) {
  .nexo-hero {
    min-height: clamp(420px, 90vw, 680px);
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .nexo-hero__inner {
    width: calc(100% - 32px);
    align-items: flex-start;
  }

  .nexo-hero__content,
  .nexo-hero-copy {
    max-width: 100%;
  }

  .nexo-hero-copy__eyebrow {
    margin-bottom: 6px;
    font-size: clamp(26px, 6vw, 34px);
    line-height: 1.05;
    white-space: normal;
  }

  .nexo-hero-copy__title {
    margin-bottom: 16px;
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.04;
  }

  .nexo-hero-copy__title-line {
    white-space: normal;
  }

  .nexo-hero-copy__text {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.38;
  }

  .nexo-hero-copy__cta .nexo-cta-button {
    min-height: 50px;
    padding: 0 18px;
    font-size: var(--nexo-cta-button-font-size, 11px);
  }

  .nexo-hero--has-content {
    min-height: max(
      520px,
      calc(
        var(--nexo-header-top-offset, 32px) + var(--nexo-header-height, 72px) +
          430px
      )
    );
    padding-bottom: 70px;
  }

  .nexo-hero--has-content .nexo-hero__inner {
    padding-top: calc(
      var(--nexo-header-top-offset, 32px) + var(--nexo-header-height, 72px) +
        32px
    );
  }
}

/* ==========================================================================
   Hero mobile image positioning
   ========================================================================== */

@media (max-width: 640px) {
  .nexo-hero--background {
    background-size: auto 70%;
    background-position: right -90px bottom 0;
  }

  .nexo-hero--has-content .nexo-hero__content,
  .nexo-hero-copy {
    max-width: 100%;
  }

  .nexo-hero-copy__eyebrow {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.05;
  }

  .nexo-hero-copy__title {
    max-width: 420px;
    font-size: 33px;
    line-height: 1.04;
  }

  .nexo-hero-copy__text {
    max-width: 430px;
    font-size: 13px;
    line-height: 1.35;
  }
}

/* ==========================================================================
   Home hardcoded: corrige overflow horizontal do Hero full-bleed
   ========================================================================== */

body.home .nexo-hero {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

/* ==========================================================================
   Home: overlay do Hero mais transparente
   ========================================================================== */

/* ==========================================================================
   Home: Hero com forma geométrica e imagem transparente
   ========================================================================== */

body.home .nexo-hero {
  isolation: isolate;
  background: #f7f7f7;
}

body.home .nexo-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 100%;
  background: #d8d8d8;
  clip-path: polygon(0 0, 98% 0, 74% 100%, 0 100%);
  pointer-events: none;
}

body.home .nexo-hero__overlay {
  display: none !important;
}

body.home .nexo-hero__image {
  position: absolute;
  right: max(
    -180px,
    calc((100vw - var(--nexo-header-container-width, 1362px)) / -2)
  );
  bottom: 0;
  left: auto;
  top: auto;
  z-index: 1;
  width: min(86vw, 1500px);
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
}

body.home .nexo-hero__inner {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Home: Hero com forma geométrica, imagem transparente e fade inferior
   ========================================================================== */

body.home .nexo-hero {
  isolation: isolate;
  background: #f7f7f7;
}

body.home .nexo-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 100%;
  background: #d8d8d8;
  clip-path: polygon(0 0, 98% 0, 74% 100%, 0 100%);
  pointer-events: none;
}

body.home .nexo-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 34%;
  background: linear-gradient(
    to top,
    rgba(247, 247, 247, 1) 0%,
    rgba(247, 247, 247, 0.82) 24%,
    rgba(247, 247, 247, 0.38) 58%,
    rgba(247, 247, 247, 0) 100%
  );
  pointer-events: none;
}

body.home .nexo-hero__overlay {
  display: none !important;
}

body.home .nexo-hero__image {
  position: absolute;
  top: auto;
  right: max(
    -180px,
    calc((100vw - var(--nexo-header-container-width, 1362px)) / -2)
  );
  bottom: 0;
  left: auto;
  z-index: 1;
  width: min(86vw, 1500px);
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
}

body.home .nexo-hero__inner {
  position: relative;
  z-index: 3;
}