/* 01-gestao-comercial (H01): .hero da V1 portado com escopo em #h01.
   Na V1 o hero é sticky e a seção seguinte sobe por cima dele. Aqui o sticky só liga
   (#h01.hero--pilha, pelo JS) quando todas as seções seguintes estão posicionadas com
   z-index; senão o hero ficaria por cima delas. */
#h01.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  background: var(--black);
  color: var(--white);
  font-size: 1rem;
  line-height: normal;
}

#h01.hero.hero--pilha { position: sticky; top: 0; }

#h01 .gradient-bars {
  position: absolute;
  z-index: -1;
  top: 8.75vw;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#h01 .gradient-bars span {
  flex: 1 0 calc(100% / 15);
  max-width: calc(100% / 15);
  height: 100%;
  outline: 1px solid transparent;
  background: linear-gradient(
    to top,
    var(--orange) 0%,
    rgb(255 108 17 / 78%) 30%,
    rgb(255 108 17 / 25%) 62%,
    rgb(255 108 17 / 4%) 86%,
    transparent 100%
  );
  transform: scaleY(var(--scale));
  transform-origin: bottom;
  animation: h01-gradient-bars-pulse 2s ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

@keyframes h01-gradient-bars-pulse {
  to { transform: scaleY(calc(var(--scale) * 0.7)); }
}

#h01 .hero__content {
  position: absolute;
  z-index: 2;
  top: 12.5vw;
  left: 50%;
  width: min(calc(100% - 4rem), 66rem);
  text-align: center;
  transform: translateX(-50%);
}

/* O eyebrow da V1 saiu (sem copy): o título sobe para o lugar dele, mais perto do menu.
   Três linhas fixas no desktop: cada linha não quebra, e o corpo nunca passa do que cabe na
   largura (a 3ª linha, a mais longa, mede ≈ 13,2 em). */
#h01 h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: min(clamp(3.4rem, 4.72vw, 4.75rem), calc((100vw - 4rem) / 13.6));
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.9;
}

#h01 h1 span,
#h01 h1 em { display: block; white-space: nowrap; }

#h01 h1 em {
  margin-top: 0.02em;
  font-family: var(--font-serif);
  font-size: 1.045em;
  font-style: normal;
  font-variation-settings: "wght" 300;
  font-weight: 300;
  letter-spacing: -0.048em;
  line-height: 0.89;
}

/* Linha digitada da V1: o degradê branco → laranja vai no trecho já escrito, então a ponta
   laranja acompanha a digitação. O JS troca o conteúdo de .hero-typewriter__text por
   [escrito][cursor][resto]: o texto inteiro continua no DOM (cópia .sr-only para leitores de
   tela), o cursor fica colado ao último caractere dentro da linha, e a altura da linha é
   reservada (min-height medido antes de começar). No desktop o resto sai do fluxo e o trecho
   escrito cresce a partir do centro, como na V1; no celular (título corrido) o resto fica
   invisível no lugar, para as linhas não pularem. */
#h01 .hero-typewriter__text,
#h01 .hero-typewriter__escrito {
  color: transparent;
  background: linear-gradient(90deg, var(--white) 0%, var(--white) 84%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

#h01 .hero-typewriter span { display: inline; }

#h01 .hero-typewriter.is-armed .hero-typewriter__text { background: none; }

#h01 .hero-typewriter__resto { visibility: hidden; }

#h01 .hero-typewriter .hero-typewriter__cursor {
  display: inline-block;
  width: 0.05em;
  height: 0.78em;
  margin-left: 0.04em;
  margin-right: -0.09em;
  vertical-align: -0.06em;
  background: var(--orange);
  opacity: 0;
  transition: opacity 120ms ease;
}

#h01 .hero-typewriter.is-typing .hero-typewriter__cursor {
  opacity: 1;
  animation: h01-typewriter-cursor 500ms steps(1, end) infinite;
}

@keyframes h01-typewriter-cursor {
  50% { opacity: 0; }
}

@media (min-width: 641px) {
  #h01 .hero-typewriter .hero-typewriter__resto { display: none; }
}

#h01 .hero__description {
  margin: min(1.8rem, 1.85vw) auto 0;
  color: rgb(248 248 246 / 62%);
  font-size: min(1.15625rem, 1.184vw);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.425;
}

#h01 .hero-cta {
  display: inline-flex;
  width: min(22.8rem, 22.65vw);
  min-width: 0;
  min-height: max(44px, min(4.2rem, 4.3vw));
  align-items: center;
  justify-content: center;
  gap: min(1rem, 1.02vw);
  margin-top: min(1.7rem, 1.73vw);
  padding: 0.9vw 1.84vw;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(10 10 10 / 78%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 0.85rem 2.2rem rgb(0 0 0 / 28%);
  color: var(--white);
  font-size: min(1.0625rem, 1.09vw);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
  backdrop-filter: blur(0.65rem) saturate(112%);
  transition:
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

#h01 .hero-cta svg {
  width: min(1.25rem, 1.28vw);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#h01 .hero-cta:hover,
#h01 .hero-cta:focus-visible {
  border-color: rgb(255 255 255 / 38%);
  background: #141414;
  transform: translateY(-2px);
}

#h01 .hero-cta:focus-visible,
#h01 .scroll-cue:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* Indicador de rolagem. A V1 põe o rótulo em caixa alta via CSS; aqui fica a caixa da copy. */
#h01 .scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: 3.75vw;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(0.7rem, 0.72vw);
  min-width: 44px;
  min-height: 44px;
  color: rgb(248 248 246 / 64%);
  text-decoration: none;
  transform: translateX(-50%);
}

#h01 .scroll-cue span {
  font-size: min(0.8125rem, 0.83vw);
  font-weight: 500;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

#h01 .scroll-cue svg {
  width: min(1rem, 1.02vw);
  fill: none;
  stroke: var(--white);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  animation: h01-scroll-cue 1.8s var(--ease-out) infinite;
}

@keyframes h01-scroll-cue {
  0%, 100% { opacity: 0.5; transform: translateY(-0.15rem); }
  55% { opacity: 1; transform: translateY(0.25rem); }
}

@media (max-width: 1050px) {
  #h01 .hero__content { top: 8.75rem; width: calc(100% - 3rem); }
  #h01 h1 { font-size: min(clamp(3.25rem, 7vw, 4rem), calc((100vw - 3rem) / 13.6)); }
  #h01 .hero__description { margin-top: 1.5rem; font-size: 1rem; line-height: 1.55; }
  #h01 .hero-cta {
    width: min(22.8rem, calc(100% - 2rem));
    min-height: 4rem;
    gap: 0.9rem;
    margin-top: 1.6rem;
    padding: 0.85rem 1.6rem;
    font-size: 1rem;
  }
  #h01 .hero-cta svg { width: 1.15rem; }
  #h01 .gradient-bars { top: 9rem; }
  #h01 .scroll-cue span { font-size: 0.8125rem; }
  #h01 .scroll-cue svg { width: 1rem; }
}

@media (max-width: 700px) {
  #h01 .hero__content { top: 7.75rem; width: calc(100% - 2rem); }
  #h01 h1 { font-size: min(clamp(2.45rem, 11.3vw, 3.6rem), calc((100vw - 2rem) / 13.6)); line-height: 1.02; }
  #h01 h1 em { margin-top: 0.12em; font-size: 1.02em; line-height: 0.98; }
  /* Apoio em duas linhas (a quebra da copy fica); onde não cabe, pretty evita palavra sozinha. */
  #h01 .hero__description { max-width: 31rem; margin-top: 1.35rem; font-size: clamp(0.8125rem, 3.58vw, 0.94rem); text-wrap: pretty; }
  #h01 .hero-cta {
    width: min(100%, 21rem);
    min-width: 0;
    min-height: 3.75rem;
    margin-top: 1.5rem;
    padding-inline: 1.35rem;
    font-size: 0.96rem;
  }
  #h01 .gradient-bars { top: 13rem; }
  #h01 .scroll-cue { bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}

@media (max-width: 470px) {
  #h01 .hero__content { top: 7.8rem; }
  #h01 h1 { font-size: clamp(2.15rem, 10.6vw, 2.9rem); }
  #h01 .hero-cta { width: min(100%, 21rem); }
  #h01 .scroll-cue span { font-size: 0.72rem; }
}

@media (max-height: 640px) and (min-width: 701px) {
  #h01 .hero__content { top: 8.75rem; }
  #h01 h1 { font-size: min(clamp(3rem, 4.2vw, 3.65rem), calc((100vw - 4rem) / 13.6)); }
  #h01 .hero-cta { min-height: 3.8rem; margin-top: 1.25rem; }
  #h01 .scroll-cue { bottom: 1.25rem; }
}

/* Refinamento responsivo da V1 (≤ 640 px): título corrido e bloco centrado na altura. */
@media (max-width: 640px) {
  #h01 h1 {
    margin-top: 0;
    font-size: clamp(2rem, 9.2vw, 2.55rem);
    line-height: 0.99;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
  }
  #h01.hero { min-height: 100svh; }
  #h01 .hero__content { top: 50%; transform: translate(-50%, -48%); }
  #h01 .scroll-cue { z-index: 4; bottom: max(1.15rem, env(safe-area-inset-bottom)); display: flex; }
  #h01 .scroll-cue span { font-size: 0.7rem; }
  #h01 h1 > span,
  #h01 h1 > em { display: inline; }
  #h01 h1 > span,
  #h01 h1 > em { white-space: normal; }
  #h01 h1 > em { width: auto; margin: 0 0 0 0.14em; font-size: 1.035em; line-height: inherit; }
  #h01 .hero-typewriter span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  #h01 .gradient-bars span,
  #h01 .scroll-cue svg,
  #h01 .hero-typewriter__cursor { animation: none; }
}