/* Integração mínima: nova logo e vídeo somente no fundo da Hero. */
.site-header .brand {
  overflow: hidden;
}

.site-header .brand {
  display: flex;
  width: 176px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
}

.site-header .brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

.site-header .brand img {
  object-position: center 46%;
}

.hero {
  isolation: isolate;
  background:
    linear-gradient(90deg, rgb(2 102 46 / 16%), rgb(2 102 46 / 7%)),
    url("/assets/img/hero-bg-final.webp") center center / cover no-repeat,
    var(--green-dark);
}

.hero-video {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  object-position: center center;
  inset: 0;
  pointer-events: none;
  transition: opacity 550ms ease;
}

.hero-video.is-finished {
  opacity: 0;
}

.hero-video-overlay {
  position: absolute;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(0 39 21 / 74%) 0%, rgb(0 47 25 / 60%) 41%, rgb(0 38 22 / 22%) 72%, rgb(0 20 12 / 6%) 100%),
    linear-gradient(180deg, rgb(0 24 13 / 12%) 0%, transparent 55%, rgb(0 29 16 / 22%) 100%);
  inset: 0;
  pointer-events: none;
}

.hero::before,
.hero-pattern {
  z-index: 1;
}

.hero-pattern {
  opacity: .11;
}

.hero-grid {
  z-index: 2;
}

.hero h1 em {
  color: #b4f1cd;
  font-style: normal;
}

.hero-trust span {
  overflow: visible;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.hero-bottom {
  z-index: 3;
}

/* A fachada assume o protagonismo sem o antigo cartão branco. */
.hero-visual {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
}

.hero-clinic-photo {
  position: relative;
  width: 100%;
  height: clamp(250px, 52vw, 430px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 26px;
  background: rgb(1 58 29 / 35%);
  box-shadow: 0 30px 80px rgb(0 29 15 / 30%);
}

.hero-clinic-photo::after {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 68%, rgb(0 35 18 / 16%));
  content: "";
  inset: 0;
  pointer-events: none;
}

.hero-clinic-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-video-status {
  display: none;
}

@media (min-width: 768px) {
  .site-header .brand {
    width: 218px;
    height: 64px;
  }

}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 1fr);
    gap: 48px;
  }

  .hero-visual {
    right: -42px;
    max-width: 640px;
    margin-right: 0;
  }
}

@media (min-width: 1440px) {
  .hero-grid {
    gap: 55px;
  }

  .hero-visual {
    right: -55px;
    max-width: 650px;
  }
}

@media (max-width: 559px) {
  .hero-video {
    object-position: 58% center;
  }

  .hero-video-overlay {
    background:
      linear-gradient(180deg, rgb(0 48 25 / 69%) 0%, rgb(0 51 27 / 58%) 49%, rgb(0 36 21 / 35%) 100%),
      linear-gradient(90deg, rgb(0 42 23 / 46%), rgb(0 20 12 / 8%));
  }
}