/* Hero com imagem isolada; identificação profissional e modalidade permanecem sobre a foto */
.hero {
  min-height: 0;
  display: block;
  background: var(--paper);
  color: var(--ink);
  isolation: auto;
}

.hero::after {
  display: none;
}

.hero-media {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: clamp(420px, 62vh, 720px);
  overflow: hidden;
  background: #d7d0c4;
}

.hero-media::before {
  content: "";
  position: absolute;
  left: clamp(26px, 4vw, 48px);
  bottom: calc(clamp(28px, 4vw, 46px) + .52rem);
  z-index: 3;
  width: 38px;
  height: 1px;
  background: rgba(255, 253, 248, .72);
}

.hero-media::after {
  content: "Atendimento psicanalítico online";
  position: absolute;
  left: calc(clamp(26px, 4vw, 48px) + 48px);
  bottom: clamp(28px, 4vw, 46px);
  z-index: 3;
  max-width: calc(100% - 110px);
  color: #fffdf8;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .88;
  text-shadow: 0 2px 18px rgba(10, 25, 20, .38);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  transform: scale(1.001);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.hero:hover .hero-media img {
  transform: scale(1.015);
}

.hero-inner {
  min-height: 0;
  padding: clamp(34px, 5vw, 70px);
  display: block;
  color: var(--ink);
  background: var(--paper);
}

.brand {
  position: absolute;
  top: clamp(26px, 4vw, 48px);
  left: clamp(26px, 4vw, 48px);
  z-index: 3;
  margin: 0;
  color: #102a22;
}

.brand strong {
  color: #102a22;
}

.brand span {
  color: rgba(16,42,34,.84);
  opacity: 1;
}

.hero-copy {
  width: min(850px, 100%);
  padding: 0;
}

.eyebrow {
  display: none;
}

h1 {
  color: var(--ink);
  max-width: 900px;
}

.hero-copy > p {
  max-width: 720px;
  color: var(--muted);
}

.hero-actions {
  margin-top: 4px;
}

.hero-actions .button.primary {
  background: var(--forest);
  color: #fffdf8;
}

.hero-actions .button.primary:hover {
  background: var(--forest-2);
}

.hero-actions .button.secondary {
  border-color: var(--line);
  color: var(--forest);
  background: transparent;
  backdrop-filter: none;
}

.hero-actions .button.secondary:hover {
  background: rgba(23, 60, 49, .06);
  border-color: rgba(23, 60, 49, .24);
}

.hero-note {
  justify-content: flex-start;
  margin-top: 28px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .hero {
    min-height: 0;
  }

  .hero-media {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .hero-media::before {
    left: 24px;
    bottom: calc(30px + .5rem);
  }

  .hero-media::after {
    left: 72px;
    bottom: 30px;
    max-width: calc(100% - 96px);
  }

  .hero-media img {
    object-position: 50% 36%;
  }

  .hero-inner {
    justify-content: initial;
    padding: 30px 24px 34px;
  }

  .brand {
    position: absolute;
    top: 24px;
    left: 24px;
    margin: 0;
  }

  .hero-copy {
    padding: 0;
  }

  h1 {
    font-size: clamp(3rem, 13vw, 4.8rem);
    line-height: .94;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-note {
    display: flex;
    margin-top: 24px;
  }
}

@media (max-width: 520px) {
  .hero-media {
    aspect-ratio: 4 / 5.2;
  }

  .hero-media::before {
    left: 20px;
    bottom: calc(26px + .48rem);
    width: 34px;
  }

  .hero-media::after {
    left: 64px;
    bottom: 26px;
    max-width: calc(100% - 84px);
    font-size: .72rem;
    letter-spacing: .14em;
  }

  .hero-inner {
    padding: 26px 20px 30px;
  }

  .brand {
    top: 20px;
    left: 20px;
  }

  h1 {
    font-size: clamp(2.85rem, 13vw, 4.15rem);
    margin-bottom: 20px;
  }
}