/* Foto integrada ao fundo. Este arquivo complementa styles.css. */
.hero.hero-photo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 610px;
  padding-block: 58px;
  overflow: hidden;
  border-radius: 0 0 22px 22px;
  background: var(--paper);
}
.hero-photo .hero-copy {
  position: relative;
  z-index: 2;
  width: 47%;
  max-width: 500px;
}
.hero-photo .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}
.hero-photo .hero-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background-image: none;
  background-color: var(--paper);
  overflow: hidden;
}
.hero-photo .hero-background img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #f8f6f0 0%, #f8f6f0fa 30%, #f8f6f0d9 42%, #f8f6f038 57%, transparent 72%),
    linear-gradient(0deg, #f8f6f0 0%, #f8f6f000 12%);
}
.hero-photo .hero-visual figcaption {
  position: absolute;
  bottom: 29px;
  right: 32px;
  z-index: 2;
  max-width: 310px;
  padding: 13px 18px;
  border: 1px solid #ffffff99;
  border-radius: 9px;
  background: #fffefad9;
  backdrop-filter: blur(10px);
}
.hero-photo figcaption strong {
  display: block;
  color: var(--olive);
  font: 23px/1.2 Georgia, serif;
}
.hero-photo figcaption span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.hero-photo .lead {
  max-width: 390px;
  color: #535a4b;
}
.hero-photo .actions {
  gap: 14px 22px;
}
.hero-photo .hero-note {
  color: #555c4d;
}
@media (min-width: 1500px) {
  .hero.hero-photo { min-height: 650px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero.hero-photo { min-height: 590px; padding-block: 45px; }
  .hero-photo .hero-copy { width: 50%; }
  .hero-photo h1 { font-size: clamp(53px, 6.7vw, 67px); }
  .hero-photo .lead { font-size: 13px; max-width: 345px; }
  .hero-photo .hero-visual figcaption { right: 25px; bottom: 23px; }
}
@media (max-width: 760px) {
  .hero.hero-photo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0 0 18px 18px;
  }
  .hero-photo .hero-copy {
    width: 100%;
    max-width: 100%;
    padding: 37px 25px 20px;
    order: 0;
  }
  .hero-photo h1 { font-size: clamp(55px, 10vw, 70px); }
  .hero-photo .lead { max-width: 465px; font-size: 14px; }
  .hero-photo .hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(320px, 76vw, 480px);
    order: 1;
  }
  .hero-photo .hero-background img { object-position: right top; }
  .hero-photo::after { display: none; }
  .hero-photo .hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #f8f6f0 0%, #f8f6f000 17%, #f8f6f000 87%, #f8f6f0 100%);
    pointer-events: none;
  }
  .hero-photo .hero-visual figcaption { right: 22px; bottom: 22px; }
}
@media (max-width: 620px) {
  .hero-photo .hero-copy { padding: 34px 22px 17px; }
  .hero-photo h1 { font-size: clamp(53px, 12.8vw, 72px); }
  .hero-photo .hero-visual { height: clamp(300px, 88vw, 390px); }
  .hero-photo .hero-visual figcaption { right: 18px; bottom: 20px; padding: 11px 15px; }
  .hero-photo figcaption strong { font-size: 21px; }
  .hero-photo figcaption span { font-size: 9px; }
}
@media (max-width: 360px) {
  .hero-photo .hero-copy { padding-inline: 18px; }
  .hero-photo .hero-visual { height: 300px; }
}