/*
 Fleet Thermy - Visual V2
 Hero editorial inspirado na composicao premium/fullscreen
*/

body.hero-v2 .header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;

  height: 94px !important;

  background:
    linear-gradient(
      180deg,
      rgba(2, 11, 31, .78) 0%,
      rgba(2, 11, 31, .34) 58%,
      rgba(2, 11, 31, 0) 100%
    ) !important;

  border: 0 !important;
  box-shadow: none !important;
}

body.hero-v2 .nav-row {
  height: 94px !important;
}

/* Navegacao sobre a imagem */

body.hero-v2 .desktop-nav > a,
body.hero-v2 .desktop-nav > .nav-services > button {
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}

body.hero-v2 .desktop-nav > a:hover,
body.hero-v2 .desktop-nav > .nav-services > button:hover {
  color: #70dcff !important;
}

body.hero-v2 .logo img {
  filter: drop-shadow(0 4px 15px rgba(0,0,0,.28));
}

body.hero-v2 .header-quote {
  color: #fff !important;
  background: #168ed0 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,55,110,.22);
}

/* Menu */

body.hero-v2 .menu-button {
  color: #fff !important;
  background: rgba(2,31,66,.90) !important;
  border: 1px solid rgba(103,217,248,.25) !important;
  border-radius: 11px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* HERO */

body.hero-v2 .hero,
body.hero-v2 .home-hero {
  position: relative;

  display: flex;
  align-items: stretch;

  min-height: clamp(650px, 88vh, 860px) !important;

  margin: 0;

  color: #fff;
  background: #061334;

  overflow: hidden;
  isolation: isolate;
}

body.hero-v2 .hero-media {
  position: absolute !important;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
}

body.hero-v2 .hero-media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  transform: scale(1.01);
}

/* Overlay fotografico */

body.hero-v2 .hero::after,
body.hero-v2 .home-hero::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(2,12,33,.96) 0%,
      rgba(2,18,45,.87) 34%,
      rgba(3,24,55,.55) 63%,
      rgba(3,24,55,.16) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2,11,31,.64) 0%,
      rgba(2,11,31,0) 54%
    ) !important;

  pointer-events: none;
}

/* Conteudo */

body.hero-v2 .hero-content {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;

  min-height: inherit;

  padding: 145px 0 105px !important;
}

body.hero-v2 .hero-copy {
  width: 100%;
  max-width: 760px !important;
}

body.hero-v2 .hero h1 {
  max-width: 760px !important;

  margin: 0 0 24px !important;

  color: #fff !important;

  font-size: clamp(3.1rem, 5.25vw, 5.55rem) !important;
  font-weight: 900 !important;
  line-height: .97 !important;

  letter-spacing: -.048em !important;
  text-wrap: balance;

  text-shadow: 0 4px 28px rgba(0,0,0,.18);
}

body.hero-v2 .hero-lead {
  display: block !important;

  max-width: 610px !important;

  margin: 0 0 30px !important;

  color: rgba(240,248,253,.86) !important;

  font-size: 1.08rem !important;
  line-height: 1.55 !important;

  overflow: visible !important;

  -webkit-line-clamp: unset !important;
}

/* Menos informacao na primeira dobra */

body.hero-v2 .hero .eyebrow,
body.hero-v2 .hero .trust-row {
  display: none !important;
}

/* CTAs */

body.hero-v2 .hero-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;

  max-width: none !important;

  gap: 11px !important;
}

body.hero-v2 .hero-actions .button-primary {
  width: auto !important;

  min-height: 52px !important;

  padding: 0 25px !important;

  border: 0 !important;
  border-radius: 8px !important;

  color: #fff !important;
  background: #178fd0 !important;

  font-size: .92rem !important;
  font-weight: 850 !important;

  box-shadow: 0 12px 32px rgba(0,87,154,.30);
}

body.hero-v2 .hero-actions .button-primary:hover {
  background: #20a6e9 !important;
  transform: translateY(-1px);
}

body.hero-v2 .hero-phone {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-height: 52px !important;

  padding: 0 25px !important;

  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 8px !important;

  color: #fff !important;
  background: rgba(2,13,36,.15);

  font-size: .92rem !important;
  font-weight: 800 !important;

  backdrop-filter: blur(5px);
}

body.hero-v2 .hero-phone:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12);
  border-color: #fff !important;
}

/* Faixa abaixo do hero */

body.hero-v2 .hero-utility {
  position: relative;
  z-index: 5;

  border-bottom: 1px solid #dbe7ed;

  background: #fff;
}

/* MOBILE */

@media (max-width: 900px) {

  body.hero-v2 .header,
  body.hero-v2 .nav-row {
    height: 76px !important;
  }

  body.hero-v2 .header {
    background:
      linear-gradient(
        180deg,
        rgba(2,12,32,.78) 0%,
        rgba(2,12,32,.16) 100%
      ) !important;
  }

  body.hero-v2 .logo img {
    width: 148px !important;
    height: 48px !important;

    object-fit: contain;
  }

  body.hero-v2 .menu-button {
    display: flex !important;

    width: 50px;
    height: 50px;

    padding: 0 !important;

    align-items: center;
    justify-content: center;

    border-radius: 11px !important;
  }

  body.hero-v2 .menu-button span {
    display: none !important;
  }

  body.hero-v2 .hero,
  body.hero-v2 .home-hero {
    min-height: 100svh !important;
  }

  body.hero-v2 .hero::after,
  body.hero-v2 .home-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(2,12,32,.10) 0%,
        rgba(2,12,32,.18) 25%,
        rgba(2,15,38,.54) 52%,
        rgba(2,13,36,.90) 75%,
        rgba(2,13,36,.98) 100%
      ),
      linear-gradient(
        90deg,
        rgba(2,13,36,.48) 0%,
        rgba(2,13,36,.08) 100%
      ) !important;
  }

  body.hero-v2 .hero-content {
    min-height: 100svh;

    align-items: flex-end;

    padding:
      120px
      0
      112px !important;
  }

  body.hero-v2 .hero-copy {
    max-width: 100% !important;
  }

  body.hero-v2 .hero h1 {
    max-width: 360px !important;

    margin-bottom: 18px !important;

    font-size: clamp(2.35rem, 10.5vw, 3.25rem) !important;
    line-height: 1.01 !important;

    letter-spacing: -.042em !important;
  }

  body.hero-v2 .hero-lead {
    max-width: 345px !important;

    margin-bottom: 24px !important;

    font-size: .93rem !important;
    line-height: 1.5 !important;
  }

  body.hero-v2 .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;

    width: min(100%, 286px);

    gap: 8px !important;
  }

  body.hero-v2 .hero-actions .button-primary,
  body.hero-v2 .hero-phone {
    width: 100% !important;
    min-height: 50px !important;

    padding: 0 17px !important;
  }

  body.hero-v2 .hero-utility {
    display: none;
  }
}

/* Remove faixa branca abaixo dos heroes */
body.hero-v2 .hero-utility {
  display: none !important;
}

/* FIX GLOBAL HERO MOBILE - PAGINAS INTERNAS */
@media (max-width: 620px) {
  body.hero-v2 .hero:not(.home-hero) {
    min-height: 0 !important;
    height: auto !important;
  }

  body.hero-v2 .hero:not(.home-hero) .hero-content {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding: 120px 0 70px !important;
  }
}

/* FIX HERO MOBILE - HOME */
@media (max-width: 620px) {
  body.hero-v2 .home-hero {
    min-height: 0 !important;
    height: auto !important;
  }

  body.hero-v2 .home-hero .hero-content {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding: 120px 0 70px !important;
  }
}