/* Hero — full bleed, conteúdo alinhado pelo container estrutural */

.hero {
  position: relative;
  /*
    min(76vw, 100svh) preserva exatamente o comportamento aprovado em mobile,
    tablet e desktop grande (onde 76vw já era o valor vencedor no clamp
    original), e só passa a ceder para 100svh — a altura real da tela —
    em notebooks/telas curtas, onde 76vw sozinho estourava a viewport
    (ex.: 1280x720 chegava a 860px de hero numa tela de 720px). svh (não
    dvh) evita que a barra de endereço do navegador redimensione o Hero
    durante o scroll.
  */
  height: clamp(560px, min(76vw, 100svh), 860px);
  overflow: hidden;
  background: #EDF1EF;
  z-index: 1;
  --hero-scroll-progress: 0;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 14%;
  display: block;
  transform: translateY(calc(var(--hero-scroll-progress) * -34px)) scale(calc(1 + var(--hero-scroll-progress) * 0.06));
  filter: brightness(calc(1 - var(--hero-scroll-progress) * 0.2));
  transition: opacity 0.8s ease;
}

.hero__media--photo {
  opacity: 1;
}

.hero__media--video {
  opacity: 0;
  pointer-events: none;
}

.hero.is-video-active .hero__media--photo {
  opacity: 0;
}

.hero.is-video-active .hero__media--video {
  opacity: 1;
}

.hero__frame {
  position: relative;
  height: 100%;
}

.hero__content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: clamp(96px, 20vw, 168px);
  max-width: 540px;
  z-index: 2;
  box-sizing: border-box;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  /* Suporta o estado temporário de entrada da intro (brand-loader.css);
     não afeta a composição aprovada em regime normal. */
  transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1), transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.hero__eyebrow span:last-child {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.8s ease;
  color: #0A5C43;
}

.hero.is-video-active .hero__eyebrow span:last-child {
  color: var(--text-on-media);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  /* color: crossfade foto/vídeo já aprovado; opacity/transform: estado
     temporário de entrada da intro (brand-loader.css). */
  transition: color 0.8s ease, opacity 750ms cubic-bezier(0.22, 1, 0.36, 1), transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--ink-strong);
}

.hero.is-video-active .hero__title {
  color: var(--text-on-media);
}

.hero__lead {
  margin: clamp(20px, 3vw, 36px) 0 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 450;
  text-wrap: pretty;
  /* color: crossfade foto/vídeo já aprovado; opacity/transform: estado
     temporário de entrada da intro (brand-loader.css). */
  transition: color 0.8s ease, opacity 750ms cubic-bezier(0.22, 1, 0.36, 1), transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--ink-strong);
}

.hero.is-video-active .hero__lead {
  color: var(--text-on-media);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  /* Suporta o estado temporário de entrada da intro (brand-loader.css). */
  transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1), transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* O CTA do Hero agora é o componente compartilhado .cta-secondary
   (.cta-secondary--on-media) definido em base.css — mesma altura, radius,
   padding, tipografia e seta do CTA "VER CATÁLOGO" de Equipamentos. */

.hero__scroll-hint {
  position: absolute;
  left: 50%;
  /* Antes: clamp(56px,10vw,142px) — chegava a 142px da borda inferior em
     desktop, "alto" demais na composição. Agora ~24-36px em desktop/
     notebook, afunilando com segurança em tablet/mobile, sempre com
     distância da borda (nunca encostado). */
  bottom: clamp(20px, 3vw, 36px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.hero__scroll-hint.is-hidden {
  opacity: 0;
}

/* Estado temporário de entrada da intro (brand-loader.css): some junto com
   o primeiro grupo de texto e reaparece normalmente depois, sem alterar a
   lógica existente de .is-hidden no scroll. */
body[data-intro] .hero__scroll-hint {
  opacity: 0;
}

/* Correção mínima (auditoria mobile): em telas muito estreitas (<=480px)
   o título/lead do Hero quebram em mais linhas e empurram o CTA para baixo
   do piso de altura de 560px, que o overflow:hidden do .hero então recorta
   (em 320px o botão ficava totalmente invisível/inacessível). O piso é
   elevado apenas nesta faixa, sem alterar tipografia, espaçamento, design
   aprovado ou o comportamento em tablet/desktop. */
@media (max-width: 480px) {
  .hero {
    /* Sem min(...,100svh) aqui de propósito: em telas curtas e estreitas
       o conteúdo pode legitimamente precisar de mais altura que a viewport
       (o usuário rola um pouco dentro do Hero), o que é preferível a
       recortar o CTA. */
    height: clamp(560px, calc(1029px - 109vw), 860px);
  }

  /* O indicador "ROLAR" é decorativo; nesta mesma faixa estreita ele passa
     a colidir visualmente com o CTA por causa do texto mais alto. Como não
     é essencial (a página já é claramente rolável), ele é ocultado aqui em
     vez de inflar ainda mais a altura do Hero. */
  .hero__scroll-hint {
    display: none;
  }
}

.hero__scroll-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero__scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}