/* bloco hero: foto sangrando a direita, titulo editorial na grade */
.hero {
  position: relative;
  min-height: 100svh;
  height: clamp(720px, 100svh, 1000px);
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  display: flex; align-items: center;
}

/* a foto entra por tras do cabecalho transparente e recebe parallax leve */
.hero__foto {
  position: absolute; inset: -8% 0 -8% 34%;
  background: url('../../img/hero.png') center/cover no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 10% 80%, 12% 53%, 8% 28%);
  /* abre no carregamento, do centro para as bordas */
  scale: 1.08;
  opacity: 0;
  transition: scale 2.4s var(--mola), opacity 1.6s var(--suave);
}
html.entrou .hero__foto { scale: 1; opacity: 1; }

.hero__veu {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--dark) 0%, rgba(37, 42, 46, .97) 36%, rgba(37, 42, 46, .38) 74%, rgba(37, 42, 46, .1)),
    linear-gradient(180deg, rgba(37, 42, 46, .85) 0%, transparent 24%);
}

/* o elo da marca, desenhado traco a traco */
/* ---------- grafismo da marca ----------
   Guia paginas 15 e 16. O arco de hachuras nasce abaixo do cabecalho, pela
   mascara, para nao cruzar a pilula vazada do "Fale conosco". */
.hero__grafismo {
  position: absolute; z-index: 2; right: -6%; top: 0;
  width: 58%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 12%, #000 30%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 12%, #000 30%, #000 100%);
}
.hero__arco { opacity: .17; }

/* ---------- conteudo, na grade ---------- */
.hero__conteudo { position: relative; z-index: 5; align-content: center; row-gap: 0; margin-top: clamp(26px, 3.6vw, 52px); }
.hero__eyebrow { grid-column: 1 / -1; }

.hero__titulo { grid-column: 1 / -1; margin-top: clamp(20px, 2.4vw, 38px); line-height: .84; }
.hero__linha1 { display: block; font-size: calc(clamp(56px, 7.4vw, 138px) * var(--escala-texto, 1)); }
.hero__linha2 {
  display: block; font-weight: 400; letter-spacing: .012em;
  font-size: calc(clamp(68px, 9vw, 172px) * var(--escala-texto, 1));
  color: transparent;
  -webkit-text-stroke: 1.5px #676a6e;
  /* o preenchimento turquesa avanca conforme a pagina rola */
  background-image: linear-gradient(90deg, var(--teal), var(--teal-claro));
  background-size: calc(var(--p, 0) * 260%) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.hero__linha3 {
  display: block; font-style: normal; color: var(--teal);
  font-size: calc(clamp(42px, 5.2vw, 100px) * var(--escala-texto, 1));
  margin-left: calc(100% / 12 * 3 + var(--gap));
  margin-top: clamp(4px, .5vw, 12px);
}

.hero__lead { grid-column: 1 / span 5; margin-top: clamp(28px, 3.4vw, 50px); color: #c8cbcf; line-height: 1.65; }
.hero__acoes { grid-column: 1 / span 7; margin-top: clamp(18px, 2vw, 28px); display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
.hero__under { font-size: var(--t-apoio); font-weight: 500; padding-bottom: 9px; box-shadow: inset 0 -2px 0 var(--teal); transition: box-shadow .45s var(--suave), color .45s var(--suave); }
.hero__under:hover { color: var(--teal); box-shadow: inset 0 -2px 0 var(--teal-claro); }

/* ---------- chamada de rolagem ---------- */
.hero__cue { position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(22px, 3vh, 32px); display: flex; align-items: center; color: #8e9195; font-size: var(--t-mini); letter-spacing: .2em; text-transform: uppercase; }
.hero__cue i { width: clamp(90px, 16vw, 210px); height: 1px; margin-left: 32px; background: linear-gradient(90deg, #43464a, transparent); }
.hero__cue b { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-left: -46px; animation: corre-cue 3.4s var(--suave) infinite; }
@keyframes corre-cue {
  0%   { transform: translateX(-120px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(20px); opacity: 0; }
}

@media (max-width: 1080px) {
  .hero__lead { grid-column: 1 / span 7; }
  .hero__linha3 { margin-left: calc(100% / 12 * 2); }
}

@media (max-width: 680px) {
  .hero { height: auto; min-height: 100svh; padding-block: calc(var(--h-cabecalho) + 48px) 96px; }
  .hero__foto { inset: 0 0 0 12%; opacity: .5; clip-path: none; }
  html.entrou .hero__foto { opacity: .5; }
  .hero__veu { background: linear-gradient(90deg, var(--dark), rgba(37, 42, 46, .82)), linear-gradient(180deg, rgba(37, 42, 46, .9), transparent 30%); }
  .hero__elo { width: 62%; opacity: .55; }
  /* CAMINHOS estourava a largura no celular */
  .hero__linha1 { font-size: calc(clamp(38px, 12vw, 58px) * var(--escala-texto, 1)); }
  .hero__linha2 { font-size: calc(clamp(42px, 13.2vw, 70px) * var(--escala-texto, 1)); }
  .hero__linha3 { margin-left: 0; font-size: calc(clamp(32px, 10vw, 46px) * var(--escala-texto, 1)); margin-top: 8px; }
  .hero__lead, .hero__acoes { grid-column: 1 / -1; }
  .hero__acoes { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero__cue { display: none; }
}