/* ============================================================
   10 · HERÓI — verde profundo, halo dourado, grade 3D e palco do dente
   ============================================================ */
.heroi{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  /* o herói tem EXATAMENTE a altura da tela: paddings da .secao reduzidos para não sobrar um bloco verde vazio ao rolar */
  padding-top:calc(var(--nav-h,84px) + 1rem);padding-bottom:2.5rem;
  background:
    radial-gradient(60% 55% at 78% 40%,rgba(210,190,90,.14),transparent 70%),
    linear-gradient(180deg,var(--verde-950) 0%,var(--verde-900) 55%,var(--verde-800) 100%);
  overflow:hidden;isolation:isolate;
}
.heroi__fundo{position:absolute;inset:0;pointer-events:none;z-index:0}
.heroi__halo{position:absolute;border-radius:50%;filter:blur(2px)}
.heroi__halo--1{width:min(70vw,720px);aspect-ratio:1;right:-12%;top:-18%;background:radial-gradient(circle,rgba(210,190,90,.22),rgba(210,190,90,.05) 45%,transparent 68%)}
.heroi__halo--2{width:min(60vw,560px);aspect-ratio:1;left:-16%;bottom:-24%;background:radial-gradient(circle,rgba(125,154,133,.22),transparent 65%)}
/* grade em perspectiva no chão (motivo de "estúdio") */
.heroi__grade{position:absolute;inset:auto 0 0 0;height:42vh;perspective:560px;perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent);mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent)}
.heroi__plano{position:absolute;inset:-60% -30% 0;transform:rotateX(64deg);transform-origin:50% 0;
  background:
    repeating-linear-gradient(90deg,rgba(210,190,90,.13) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(210,190,90,.13) 0 1px,transparent 1px 84px)}
html.anim .heroi__plano{animation:heroi-grade 9s linear infinite;will-change:transform;background-size:84px 84px}
@keyframes heroi-grade{to{transform:rotateX(64deg) translateY(84px)}}

.heroi__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(1.5rem,4vw,4rem);
  padding-block:0 1.5rem}
.heroi__copy{max-width:36rem}
.heroi .h1{margin:.4rem 0 1.2rem}
.heroi .lead{margin-bottom:1.8rem}
.heroi__selos{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:1.7rem;padding:0;list-style:none;
  font-family:var(--fonte-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--salvia-claro)}
.heroi__selos li{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .75rem .42rem .55rem;border:1px solid rgba(210,190,90,.25);border-radius:999px;
  background:rgba(255,255,255,.03)}
.heroi__selos .icone{width:14px;height:16px;color:var(--ouro);--traco:1.6}

/* ----- palco 3D ----- */
.heroi__palco{position:relative;height:min(62vh,600px);min-height:340px;perspective:900px}
.heroi__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.heroi__palco.is-3d .heroi__canvas{opacity:1}
.heroi__dente-svg{position:absolute;left:50%;top:50%;width:min(62%,340px);height:auto;transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 28px rgba(210,190,90,.35));transition:opacity .8s ease}
.heroi__palco.is-3d .heroi__dente-svg{opacity:0}
html.anim .heroi__dente-svg{animation:heroi-flutua 6s ease-in-out infinite}
@keyframes heroi-flutua{50%{transform:translate(-50%,calc(-50% - 14px))}}

.heroi__chip{position:absolute;z-index:2;padding:.5rem .85rem;border-radius:999px;
  font-family:var(--fonte-display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-brilho);
  background:rgba(15,28,18,.72);border:1px solid rgba(210,190,90,.35);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
  transform:translateZ(var(--z,60px));white-space:nowrap;pointer-events:none}
.heroi__chip--1{left:2%;top:18%;--z:90px}
.heroi__chip--2{right:0;top:30%;--z:140px}
.heroi__chip--3{left:6%;bottom:22%;--z:60px}
.heroi__chip--4{right:6%;bottom:14%;--z:110px}
html.anim .heroi__chip{animation:heroi-chip 7s ease-in-out infinite}
html.anim .heroi__chip--2{animation-delay:-2s}
html.anim .heroi__chip--3{animation-delay:-4s}
html.anim .heroi__chip--4{animation-delay:-1s}
@keyframes heroi-chip{50%{transform:translateZ(var(--z,60px)) translateY(-10px)}}

/* ----- dica de rolagem ----- */
.heroi__cue{position:absolute;left:50%;bottom:1.4rem;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;
  font-family:var(--fonte-display);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--salvia-claro);min-height:44px}
.heroi__cue i{display:block;width:1px;height:38px;background:linear-gradient(to bottom,var(--ouro),transparent);transform-origin:top}
html.anim .heroi__cue i{animation:heroi-cue 1.8s ease-in-out infinite}
@keyframes heroi-cue{0%{transform:scaleY(0);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ----- telas baixas (notebook 1366×768 / 1376×618 útil): tudo cabe em uma tela ----- */
@media (min-width:761px) and (max-height:780px){
  .heroi .h1{font-size:clamp(1.9rem,3.9vw,3rem);margin-bottom:.9rem}
  .heroi .lead{font-size:.96rem;margin-bottom:1.2rem}
  .heroi__selos{margin-top:1.1rem}
  .heroi__selos li{padding:.34rem .6rem .34rem .5rem;font-size:.66rem}
  .heroi__palco{height:min(58vh,520px);min-height:300px}
  .heroi__grid{padding-bottom:.5rem}
}

/* ----- responsivo ----- */
@media (max-width:1100px){.heroi__grid{grid-template-columns:1fr .9fr}}
@media (max-width:760px){
  .heroi{min-height:auto}
  .heroi__grid{grid-template-columns:1fr;gap:.5rem;padding-bottom:4.5rem}
  .heroi__palco{height:46vh;min-height:300px;order:2}
  .heroi__chip--2,.heroi__chip--3{display:none}
    /* sem profundidade no celular: o translateZ com perspectiva empurrava o chip para fora da seção (borda cortada) */
  .heroi__chip{--z:0px;transform:none;padding:.42rem .7rem;font-size:.62rem}
  .heroi__chip--1{left:.5rem;top:6%}
  .heroi__chip--4{right:.5rem;bottom:6%}
  .heroi__selos{gap:.4rem}
  .heroi__selos li{font-size:.64rem;padding:.38rem .6rem .38rem .45rem}
  .heroi__cue{display:none}
}