/* A paisagem cobre a abertura toda; o texto mantém o alinhamento original do site. */
.hero { display: block; min-height: 740px; padding: 0; overflow: clip; isolation: isolate; }
.hero-inner { position: relative; min-height: inherit; display: flex; align-items: center; padding-top: 60px; padding-bottom: 100px; }
.hero-copy { position: relative; z-index: 2; max-width: 620px; }
.hero-copy h1 { position: relative; z-index: 2; }
.title-fog {
  position: absolute; z-index: 3; pointer-events: none;
  left: -12%; top: 29%; width: 124%; height: 25%; overflow: hidden;
  opacity: .54; filter: blur(9px); mix-blend-mode: screen;
  --fog-duration: 19s; --fog-delay: -4s;
  animation: title-fog-pass var(--fog-duration) ease-in-out var(--fog-delay) infinite;
}
.title-fog::before, .title-fog::after {
  content: ''; position: absolute; width: 58%; height: 70%; border-radius: 50%;
  background: radial-gradient(ellipse, #e8f6ff88 0 5%, #b7d9eb4d 24%, transparent 70%);
}
.title-fog::before { left: -20%; top: 8%; }
.title-fog::after { right: -24%; bottom: -18%; opacity: .62; }
.hero-landscape { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-landscape > img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 68% 55%;
  animation: valley-drift 18s ease-in-out infinite alternate; transform-origin: 76% 64%;
}
/* A névoa é uma camada independente para o vale parecer vivo, sem trocar a imagem. */
.hero-landscape::before {
  content: ''; position: absolute; z-index: 1; inset: 42% -18% 3% 28%;
  background:
    radial-gradient(ellipse at 18% 65%, #d8edff42 0 3%, transparent 21%),
    radial-gradient(ellipse at 55% 50%, #b8dbed38 0 4%, transparent 25%),
    radial-gradient(ellipse at 82% 74%, #f1d4b52e 0 3%, transparent 24%);
  filter: blur(18px); opacity: .58; mix-blend-mode: screen;
  animation: valley-mist 11s ease-in-out infinite alternate;
}
.sun-glow {
  position: absolute; z-index: 2;
  left: 73%; top: 53%; width: 16rem; height: 16rem;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff9dcaa 0 2%, #ffdca866 6%, #ffc98b2b 22%, transparent 68%);
  filter: blur(5px); mix-blend-mode: screen;
  animation: sun-breathe 5s ease-in-out infinite alternate;
}
.sun-glow::after {
  content: ''; position: absolute; inset: 31%; border-radius: 50%;
  background: #fff6d6; filter: blur(10px); opacity: .76;
  box-shadow: 0 0 42px 20px #ffd99a66;
}
/* Duas camadas com ritmos diferentes fazem a névoa passar por frente do relevo. */
.fog-layer {
  position: absolute; z-index: 3; pointer-events: none;
  left: -18%; width: 136%; border-radius: 50%;
  background: radial-gradient(ellipse at center, #e5f3ff78 0 5%, #b5d9ee46 25%, transparent 68%);
  filter: blur(13px); mix-blend-mode: screen;
}
.fog-far { top: 53%; height: 19%; opacity: .68; animation: fog-far-drift 22s ease-in-out infinite alternate; }
.fog-near { top: 69%; height: 25%; opacity: .48; filter: blur(20px); animation: fog-near-drift 14s ease-in-out infinite alternate-reverse; }
/* O degradê protege a leitura e dissolve a imagem na próxima seção. */
.hero-landscape::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0b0f14e8 0%, #0b0f14ba 28%, #0b0f1470 45%, #0b0f1400 70%),
    linear-gradient(0deg, #0b0f14 0%, #0b0f1499 8%, transparent 30%, #0b0f1433 85%, #0b0f1477 100%);
}
.valley-light {
  position: absolute; inset: 22% -8% 0 37%;
  background: radial-gradient(ellipse at 60% 60%, #a9cee52c, transparent 62%);
  mix-blend-mode: screen; animation: valley-atmosphere 8s ease-in-out infinite alternate;
}
.hero-description { color: #c0c7d2; }
.hero-bottom { z-index: 2; }
/* Só o cenário se move, mantendo textos e botões estáveis para o visitante. */
@keyframes valley-drift { from { transform: scale(1.015) translate3d(0, 0, 0); } to { transform: scale(1.075) translate3d(-.8%, -.55%, 0); } }
@keyframes valley-mist { from { opacity: .25; transform: translate3d(-7%, 2%, 0) scaleX(.92); } to { opacity: .78; transform: translate3d(8%, -2%, 0) scaleX(1.08); } }
@keyframes valley-atmosphere { from { opacity: .24; transform: translate3d(-3%, 1%, 0) scale( .94); } to { opacity: .95; transform: translate3d(3%, -1%, 0) scale(1.08); } }
@keyframes sun-breathe { from { opacity: .48; transform: translate(-50%, -50%) scale(.82); } to { opacity: .94; transform: translate(-50%, -50%) scale(1.16); } }
@keyframes fog-far-drift { from { transform: translate3d(-9%, 1%, 0) scaleY(.82); } to { transform: translate3d(10%, -3%, 0) scaleY(1.12); } }
@keyframes fog-near-drift { from { transform: translate3d(11%, 3%, 0) scaleY(1.08); } to { transform: translate3d(-10%, -2%, 0) scaleY(.82); } }
@keyframes title-fog-pass { 0%, 18% { opacity: 0; transform: translate3d(-22%, 13%, 0) rotate(-4deg); } 30% { opacity: .5; } 52% { opacity: .7; transform: translate3d(18%, -6%, 0) rotate(3deg); } 68%, 100% { opacity: 0; transform: translate3d(36%, -12%, 0) rotate(5deg); } }
@media (min-width: 1600px) { .hero { min-height: 800px; } }
@media (min-width: 721px) and (max-width: 1000px) { .hero { min-height: 650px; } .hero-copy { max-width: 58%; } }
/* No celular, o vale aparece abaixo da chamada e a faixa superior continua escura. */
@media (max-width: 720px) {
  .hero { min-height: 790px; }
  .hero-inner { align-items: flex-start; padding-top: 52px; padding-bottom: 310px; }
  .hero-copy { max-width: 100%; }
  .title-fog { top: 26%; height: 22%; opacity: .48; }
  .hero-landscape > img { object-position: 76% center; }
  .hero-landscape::after { background: linear-gradient(180deg, #0b0f14f5 0%, #0b0f14cf 26%, #0b0f1470 49%, transparent 71%, #0b0f14 100%); }
  .valley-light { inset: 40% -35% 0 0; }
  .sun-glow { left: 72%; top: 58%; width: 12rem; height: 12rem; }
  .fog-far { top: 56%; height: 17%; opacity: .72; }
  .fog-near { top: 72%; height: 20%; opacity: .52; }
  .hero-bottom { bottom: 25px; }
}
@media (prefers-reduced-motion: reduce) { .hero-landscape > img, .hero-landscape::before, .sun-glow, .valley-light, .fog-layer, .title-fog { animation: none; transform: none; } }