/* =========================================
   HERO / APRESENTAÇÃO
   ========================================= */

.hero {
  position: relative;
  padding-top: calc(var(--space-3xl) + var(--space-md));
  padding-bottom: 2rem;
  overflow: hidden;
  background: var(--color-bg);
}


/* =========================================
   ILUMINAÇÃO AMBIENTE
   ========================================= */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 72% 38%,
      rgba(201, 154, 74, 0.07),
      transparent 32%
    ),
    radial-gradient(
      circle at 15% 75%,
      rgba(255, 248, 232, 0.025),
      transparent 30%
    );

  pointer-events: none;
}


/* =========================================
   ESTRUTURA PRINCIPAL
   ========================================= */

.hero__inner {
  position: relative;

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  align-items: center;

  gap: 2rem;

  min-height: 68vh;
}


/* =========================================
   CONTEÚDO
   ========================================= */

.hero__content {
  position: relative;
  z-index: 2;

  transform: translateY(-15px);
}

.hero__eyebrow {
  margin-bottom: var(--space-md);
}

.hero__headline {
  font-size: clamp(2.4rem, 4.2vw + 1rem, 4rem);

  color: var(--color-text);

  margin-bottom: var(--space-md);
}

.hero__headline em {
  font-style: italic;
  color: var(--color-gold-light);
}

.hero__text {
  max-width: 46ch;

  color: var(--color-text-muted);

  font-size: 1.05rem;
  line-height: 1.7;

  margin-bottom: var(--space-lg);
}


/* =========================================
   BOTÕES
   ========================================= */

.hero__actions {
  display: flex;
  flex-wrap: wrap;

  gap: var(--space-sm);

  margin-bottom: var(--space-xl);
}


/* =========================================
   REDES SOCIAIS
   ========================================= */

.hero__social {
  display: flex;
  gap: var(--space-sm);
}

.hero__social-link {
  display: inline-flex;

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

  width: 46px;
  height: 46px;

  border-radius: var(--radius-sm);

  border: 1px solid var(--color-border-gold);

  color: var(--color-gold);

  transition:
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.hero__social-link svg {
  width: 20px;
  height: 20px;
}

.hero__social-link:hover,
.hero__social-link:focus-visible {
  border-color: var(--color-gold-light);

  color: var(--color-gold-light);

  background: rgba(217, 164, 65, 0.08);

  transform: translateY(-5px);
}


/* =========================================
   FOTO DO ESPECIALISTA
   ========================================= */

.hero__mark {
  position: relative;

  z-index: 1;

  display: flex;

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

  width: 100%;
  height: 100%;

  min-width: 0;

  transform: translateX(5px);

  opacity: 0;

  animation:
    heroPhotoEnter
    1.5s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}


/* =========================================
   LUZ DIFUSA ATRÁS DA FOTO
   ========================================= */

.hero__mark::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 620px;

  left: 50%;
  top: 45%;

  transform: translate(-50%, -50%);

  background: radial-gradient(
    ellipse,
    rgba(201, 154, 74, 0.10) 0%,
    rgba(201, 154, 74, 0.045) 38%,
    transparent 72%
  );

  filter: blur(20px);

  z-index: -1;

  pointer-events: none;
}


/* =========================================
   LINHA VERTICAL
   ========================================= */

.hero__mark::after {
  content: "";

  position: absolute;

  left: -18px;
  top: 10%;

  width: 1px;
  height: 80%;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 154, 74, 0.08) 12%,
    rgba(201, 154, 74, 0.24) 35%,
    rgba(201, 154, 74, 0.24) 65%,
    rgba(201, 154, 74, 0.08) 88%,
    transparent 100%
  );

  z-index: -1;

  pointer-events: none;
}


/* =========================================
   IMAGEM
   ========================================= */

.hero__mark img {
  display: block;

  width: 560px !important;

  max-width: none !important;

  height: auto !important;

  object-fit: contain;

  margin: 0 auto;

  transform-origin: center center;


  /* Fade inferior */

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 55%,
    rgba(0, 0, 0, 0.82) 70%,
    rgba(0, 0, 0, 0.38) 86%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 55%,
    rgba(0, 0, 0, 0.82) 70%,
    rgba(0, 0, 0, 0.38) 86%,
    transparent 100%
  );


  /* Movimento sutil */

  animation:
    heroPhotoMovement
    8s
    ease-in-out
    1.5s
    infinite;
}


/* =========================================
   ENTRADA DA FOTO
   ========================================= */

@keyframes heroPhotoEnter {

  0% {
    opacity: 0;

    transform:
      translateX(65px)
      translateY(20px);
  }

  100% {
    opacity: 1;

    transform:
      translateX(5px)
      translateY(0);
  }

}


/* =========================================
   MOVIMENTO CONTÍNUO
   ========================================= */

@keyframes heroPhotoMovement {

  0% {
    transform:
      scale(1)
      translateY(0);
  }

  25% {
    transform:
      scale(1.008)
      translateY(-3px);
  }

  50% {
    transform:
      scale(1.018)
      translateY(-6px);
  }

  75% {
    transform:
      scale(1.008)
      translateY(-3px);
  }

  100% {
    transform:
      scale(1)
      translateY(0);
  }

}


/* =========================================
   BARRA DE CONFIANÇA
   ========================================= */

.trustbar {
  border-top: 1px solid var(--color-border-gold);
  border-bottom: 1px solid var(--color-border-gold);

  background: var(--color-bg-secondary);
}

.trustbar__list {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--space-md);

  padding-block: var(--space-lg);
}

.trustbar__item {
  display: flex;

  align-items: center;

  gap: var(--space-sm);
}

.trustbar__icon {
  flex-shrink: 0;

  width: 38px;
  height: 38px;

  display: flex;

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

  border: 1px solid var(--color-border-gold);

  border-radius: 50%;

  color: var(--color-gold);
}

.trustbar__icon svg {
  width: 18px;
  height: 18px;
}

.trustbar__label {
  font-size: var(--fs-small);

  font-weight: 600;

  color: var(--color-text);

  letter-spacing: 0.01em;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

  .hero {
    padding-top: 5.5rem;
    padding-bottom: 2rem;
  }


  /* -----------------------------------------
     ESTRUTURA
     ----------------------------------------- */

  .hero__inner {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    min-height: auto;
  }


  /* -----------------------------------------
     CONTEÚDO
     ----------------------------------------- */

  .hero__content {
    order: 1;

    transform: none;
  }


  .hero__eyebrow {
    margin-bottom: 1rem;
  }


  .hero__headline {
    font-size: clamp(
      2.45rem,
      11vw,
      3.2rem
    );

    line-height: 0.98;

    margin-bottom: 1.25rem;
  }


  .hero__text {
    max-width: 100%;

    font-size: 0.98rem;

    line-height: 1.65;

    margin-bottom: 1.5rem;
  }


  /* -----------------------------------------
     BOTÕES
     ----------------------------------------- */

  .hero__actions {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0.7rem;

    margin-bottom: 0;
  }

  .hero__actions .btn {
    width: 100%;

    justify-content: center;
  }


  /* -----------------------------------------
     FOTO
     ----------------------------------------- */

  .hero__mark {
    order: 2;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    width: 100%;

    height: auto;

    min-height: 390px;

    margin-top: 0.25rem;

    transform: none;

    opacity: 0;

    animation:
      heroPhotoEnterMobile
      1.5s
      cubic-bezier(0.22, 1, 0.36, 1)
      forwards;
  }


  .hero__mark img {
    width: min(100%, 410px) !important;

    max-width: 410px !important;

    height: auto !important;

    margin: 0 auto;
  }


  /* -----------------------------------------
     LUZ MOBILE
     ----------------------------------------- */

  .hero__mark::before {
    width: 390px;

    height: 480px;

    left: 50%;

    top: 45%;
  }


  /* -----------------------------------------
     LINHA
     ----------------------------------------- */

  .hero__mark::after {
    display: none;
  }


  /* -----------------------------------------
     REDES
     
     Elas continuam dentro do conteúdo,
     portanto aparecem antes da foto.
     ----------------------------------------- */

  .hero__social {
    margin-top: 1.25rem;

    padding-bottom: 1rem;
  }

}


/* =========================================
   ENTRADA MOBILE
   ========================================= */

@keyframes heroPhotoEnterMobile {

  0% {
    opacity: 0;

    transform:
      translateY(25px)
      scale(0.97);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================
   REDUÇÃO DE MOVIMENTO
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .hero__mark,
  .hero__mark img {
    animation: none !important;
  }

  .hero__mark {
    opacity: 1;

    transform: none;
  }

}