/* ============================================================
   Hero da página ESG — dois atos sobre um fundo parado.

   A <section> é alta de propósito: essa altura extra é a pista de
   rolagem. Dentro dela o palco fica grudado na tela (sticky),
   ocupando-a inteira, e o esg.js troca o ato do texto pelo ato dos
   dados conforme a pessoa rola. O fundo nunca se mexe.
   ============================================================ */

.esg-hero{
  position:relative;
  height:240vh;               /* pista de rolagem: 1 tela + o percurso */
  background:var(--verde-fundo);
  color:#fff;
}

.esg-hero__palco{
  position:sticky;
  top:0;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- fundo: névoa em CSS, vídeo por cima, véu por cima de tudo ---------- */

.esg-hero__fundo{position:absolute;inset:0;z-index:0;overflow:hidden}

/* A névoa existe sempre. É ela que segura a cena enquanto o vídeo
   não carrega — ou quando ele nem deve carregar (celular, 4G). */
.nevoa{
  position:absolute;
  border-radius:50%;
  will-change:transform;
  pointer-events:none;
}
.nevoa--1{
  width:80vw;height:80vw;left:-20vw;top:-30vw;
  background:radial-gradient(closest-side,rgba(12,96,60,.55),transparent 72%);
  animation:nevoa-deriva-1 34s ease-in-out infinite alternate;
}
.nevoa--2{
  width:66vw;height:66vw;right:-14vw;bottom:-26vw;
  background:radial-gradient(closest-side,rgba(132,192,72,.26),transparent 70%);
  animation:nevoa-deriva-2 46s ease-in-out infinite alternate;
}
.nevoa--3{
  width:52vw;height:52vw;left:32vw;top:14vh;
  background:radial-gradient(closest-side,rgba(6,58,38,.7),transparent 68%);
  animation:nevoa-deriva-3 39s ease-in-out infinite alternate;
}
@keyframes nevoa-deriva-1{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(6vw,4vh,0) scale(1.16)}
}
@keyframes nevoa-deriva-2{
  from{transform:translate3d(0,0,0) scale(1.1)}
  to  {transform:translate3d(-7vw,-5vh,0) scale(1)}
}
@keyframes nevoa-deriva-3{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-4vw,6vh,0) scale(1.22)}
}

/* O vídeo nasce invisível. Só aparece quando realmente começou a tocar
   (o esg.js põe a classe .esta-tocando). Sem arquivo = ninguém percebe. */
.esg-hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  /* espelhado: no material a claraboia ilumina a esquerda, e assim a luz
     cai do lado dos dados em vez de brigar com o texto */
  transform:scaleX(-1);
  transition:opacity 1.2s ease;
}
.esg-hero__video.esta-tocando{opacity:1}

/* Véu quase transparente — o galpão é para ser visto. Sobra só um
   reforço no topo (o menu branco flutua ali) e na base (emenda com o
   bloco creme). O contraste do texto não vem daqui: vem do
   escurecimento local do ato do texto, logo abaixo. */
.esg-hero__veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(5,26,17,.2) 0%,
    rgba(5,26,17,.03) 20%,
    rgba(5,26,17,.03) 76%,
    rgba(5,26,17,.26) 100%);
}

/* ---------- os dois atos ---------- */

.esg-hero__ato{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:calc(var(--e7) + 20px) 24px var(--e6);
  text-align:center;
  will-change:opacity,transform;
}

/* Escurecimento local atrás do texto. Sem ele a headline lava em cima
   da claraboia, que estoura em branco puro (medido: contraste cai a
   1,1:1). Como é filho do ato, some junto com o texto na rolagem e o
   galpão fica limpo no segundo ato. */
.esg-hero__ato--texto::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(58% 46% at 50% 48%,
    rgba(4,20,13,.88) 0%,
    rgba(4,20,13,.74) 46%,
    rgba(4,20,13,.34) 68%,
    transparent 80%);
  pointer-events:none;
  z-index:-1;
}

/* Largura em px, não em ch: aqui a fonte é a do corpo (16px), então
   20ch daria ~160px e espremeria a headline até cortá-la. O limite em
   ch pertence ao h1, onde 1ch é a letra grande de verdade. */
.esg-hero__texto{max-width:min(900px,92%);margin-inline:auto}
.esg-hero__texto .trilha{justify-content:center;margin-bottom:var(--e3)}
.esg-hero__texto h1{
  font-size:clamp(34px,5.4vw,66px);
  line-height:1.05;
  max-width:17ch;
  margin:0 auto var(--e3);
  text-wrap:balance;
}
.esg-hero__texto h1 em{font-style:italic;color:var(--verde-folha)}
.esg-hero__texto .chamada{
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.65;color:#dfeae1;
  max-width:54ch;margin-inline:auto;
}
.esg-hero__texto .acoes{
  display:flex;gap:12px;flex-wrap:wrap;
  justify-content:center;margin-top:var(--e4);
}

/* setinha discreta convidando a rolar; some junto com o texto */
.esg-hero__rolar{
  position:absolute;
  left:50%;bottom:clamp(20px,4vh,40px);
  transform:translateX(-50%);
  width:26px;height:42px;
  border:1.5px solid rgba(223,234,225,.45);
  border-radius:14px;
  pointer-events:none;
}
.esg-hero__rolar span{
  position:absolute;left:50%;top:9px;
  width:3px;height:7px;border-radius:2px;
  background:var(--verde-folha);
  transform:translateX(-50%);
  animation:rolar-desce 1.9s ease-in-out infinite;
}
@keyframes rolar-desce{
  0%,100%{opacity:0;transform:translate(-50%,0)}
  35%{opacity:1}
  70%{opacity:0;transform:translate(-50%,14px)}
}

/* ---------- os três dados ---------- */

.dados{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(var(--e3),5vw,var(--e6));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}

.dado{
  --lado:clamp(84px,9vw,132px);
  position:relative;
  appearance:none;
  background:none;border:0;padding:var(--e2);margin:0;
  cursor:pointer;
  perspective:900px;
  display:flex;flex-direction:column;align-items:center;
  transform:translateY(var(--desloca,0));
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .4s ease;
}
/* escalonados: dá profundidade sem precisar de posição absoluta */
.dado--e{--desloca:-26px}
.dado--s{--desloca:20px}
.dado--g{--desloca:-8px}

.dado__flutua{
  display:block;
  width:var(--lado);height:var(--lado);
  transform-style:preserve-3d;
  will-change:transform;
}
.dado__cubo{
  position:relative;display:block;
  width:100%;height:100%;
  transform-style:preserve-3d;
  will-change:transform;
}

.dado__face{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:calc(var(--lado) * .52);
  line-height:1;
  letter-spacing:-.03em;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:
    radial-gradient(120% 120% at 22% 14%,rgba(255,255,255,.2),transparent 54%),
    linear-gradient(152deg,#137d4d 0%,#0b5c38 48%,#06361f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -16px 28px rgba(0,0,0,.3);
  backface-visibility:hidden;
}
/* luz batendo de cima e da esquerda */
.dado__face--topo    {filter:brightness(1.28)}
.dado__face--frente  {filter:brightness(1.06)}
.dado__face--esquerda{filter:brightness(.94)}
.dado__face--direita {filter:brightness(.78)}
.dado__face--tras    {filter:brightness(.72)}
.dado__face--base    {filter:brightness(.6)}

.dado__face--frente  {transform:translateZ(calc(var(--lado) / 2))}
.dado__face--tras    {transform:rotateY(180deg) translateZ(calc(var(--lado) / 2))}
.dado__face--direita {transform:rotateY(90deg)  translateZ(calc(var(--lado) / 2))}
.dado__face--esquerda{transform:rotateY(-90deg) translateZ(calc(var(--lado) / 2))}
.dado__face--topo    {transform:rotateX(90deg)  translateZ(calc(var(--lado) / 2))}
.dado__face--base    {transform:rotateX(-90deg) translateZ(calc(var(--lado) / 2))}

/* As faces laterais existem para não haver "buraco" quando o dado
   oscila — mas não podem disputar leitura com a letra. */
.dado__face--miuda{
  font-family:var(--fonte-texto);
  font-size:calc(var(--lado) * .082);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.28);
}

/* halo que acende no hover e no estado aberto */
.dado::before{
  content:"";
  position:absolute;
  left:50%;top:calc(var(--lado) * .42);
  width:calc(var(--lado) * 2.1);height:calc(var(--lado) * 2.1);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(132,192,72,.34),transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.dado:hover::before,
.dado:focus-visible::before,
.dado[aria-expanded="true"]::before{opacity:1}

/* O "chão" do dado. Sombra preta não existe sobre fundo escuro — o que
   marca a altura aqui é uma poça de luz, que encolhe e apaga conforme
   o dado sobe (quem move isso é o esg.js). */
.dado__sombra{
  position:absolute;
  left:50%;
  top:calc(var(--e2) + var(--lado) * 1.12);
  width:calc(var(--lado) * 1.05);
  height:calc(var(--lado) * .2);
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(132,192,72,.5),rgba(132,192,72,.1) 55%,transparent 78%);
  filter:blur(5px);
  opacity:.45;
  pointer-events:none;
}

.dado__rotulo{
  /* o cubo em rotação se projeta além do próprio lado; esta margem
     é o que impede o rótulo de ser atropelado por ele */
  margin-top:calc(var(--lado) * .44);
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(223,234,225,.78);
  transition:color .3s ease,transform .3s ease;
}
.dado:hover .dado__rotulo,
.dado:focus-visible .dado__rotulo{color:var(--verde-folha);transform:translateY(2px)}

.dado:hover{transform:translateY(calc(var(--desloca,0px) - 10px))}


/* ---------- a tela cheia de cada letra ---------- */

/* Só para leitor de tela: nas abas, o "E" sozinho não diz nada em voz
   alta — quem ouve precisa de "Ambiental". */
.so-leitor{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* O círculo nasce do dado clicado: o esg.js mede o centro daquele dado
   e o raio que alcança o canto mais distante, e escreve nas variáveis
   abaixo. Como é clip-path, nada aqui depende de altura ou de máscara
   de imagem — recorta a tela inteira de uma vez. */
.tela{
  position:fixed;
  inset:0;
  z-index:200;
  color:#fff;
  clip-path:circle(0px at var(--x,50%) var(--y,50%));
  transition:clip-path .8s cubic-bezier(.76,0,.24,1);
}
.tela.aberta{clip-path:circle(var(--raio,150vmax) at var(--x,50%) var(--y,50%))}

.tela__fotos{position:absolute;inset:0;background:var(--verde-fundo)}
.tela__fotos img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .6s ease,transform 1.4s cubic-bezier(.22,1,.36,1);
}
.tela__fotos img.ativa{opacity:1;transform:scale(1)}

/* A imagem é paisagem: o texto só se sustenta com o véu por cima.
   Mais denso à esquerda, que é onde o texto mora. */
.tela__veu{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(4,20,13,.95) 0%,
      rgba(4,20,13,.86) 34%,
      rgba(4,20,13,.55) 70%,
      rgba(4,20,13,.4) 100%),
    linear-gradient(180deg,rgba(4,20,13,.5) 0%,transparent 26%);
}

.tela__corpos{
  position:relative;
  height:100%;
  display:grid;
  align-items:center;
  padding:calc(var(--e6) + 40px) clamp(24px,7vw,110px) var(--e6);
  width:min(var(--largura),100%);
  margin-inline:auto;
  /* o conteúdo de uma letra é longo: em janela baixa ele rola em vez
     de vazar para fora da tela */
  overflow-y:auto;
  overscroll-behavior:contain;
}
.tela__corpo{
  grid-area:1 / 1;
  max-width:52ch;
  align-self:center;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.tela__corpo.ativo{opacity:1;transform:none;pointer-events:auto}

.tela__letra{
  font-family:var(--fonte-titulo);
  font-size:14px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--verde-folha);
  margin-bottom:var(--e2);
}
.tela__corpo h2{
  font-size:clamp(26px,3.4vw,44px);
  line-height:1.07;
  margin-bottom:var(--e2);
  text-wrap:balance;
}
.tela__texto{
  color:#dfeae1;
  font-size:clamp(16px,1.2vw,18px);
  line-height:1.65;
}

/* O que entra em cada letra. Cada item é um fato com nome, não uma
   frase de efeito — o título puxa o olho, a frase sustenta. */
.tela__itens{
  margin:var(--e3) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:var(--e2);
}
.tela__itens li{
  position:relative;
  padding-left:var(--e3);
  color:#b9cdbf;
  font-size:15px;
  line-height:1.6;
}
.tela__itens li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:10px;height:2px;
  background:var(--verde-folha);
  border-radius:2px;
}
.tela__itens strong{
  display:block;
  color:#fff;
  font-weight:600;
  font-size:16px;
  margin-bottom:3px;
}
.tela__marcas{
  display:flex;flex-wrap:wrap;gap:var(--e1);
  margin:var(--e4) 0 var(--e3);
  padding:0;list-style:none;
}
.tela__marcas li{
  font-size:12.5px;font-weight:600;letter-spacing:.04em;
  padding:7px 12px;border-radius:999px;
  background:rgba(132,192,72,.14);
  border:1px solid rgba(132,192,72,.34);
  color:#cfe8b4;
}
.tela__acao{display:inline-flex;align-items:center;min-height:44px}

/* As três letras num canto: trocar de assunto sem fechar a tela */
.tela__abas{
  position:absolute;
  right:clamp(20px,4vw,56px);
  bottom:clamp(20px,5vh,56px);
  display:flex;
  gap:10px;
}
.tela__abas button{
  width:52px;height:52px;
  display:grid;place-items:center;
  appearance:none;cursor:pointer;
  font-family:var(--fonte-titulo);
  font-size:21px;font-weight:600;
  color:#dfeae1;
  background:rgba(7,34,23,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.tela__abas button:hover{background:rgba(7,34,23,.8);transform:translateY(-2px)}
.tela__abas button[aria-current="true"]{
  background:var(--verde-folha);
  border-color:var(--verde-folha);
  color:#06361f;
}

.tela__fechar{
  position:absolute;
  top:clamp(78px,9vh,104px);
  right:clamp(20px,4vw,56px);
  width:52px;height:52px;
  display:grid;place-items:center;
  appearance:none;cursor:pointer;
  color:#dfeae1;
  background:rgba(7,34,23,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.tela__fechar:hover{background:rgba(7,34,23,.85);color:#fff;border-color:rgba(255,255,255,.45)}
.tela__fechar svg{width:20px;height:20px}

/* o diálogo recebe foco quando abre só para levar o leitor de tela
   junto; o anel aqui seria um retângulo do tamanho da janela */
.tela:focus{outline:none}

/* ---------- telas menores ---------- */

@media (max-width:900px){
  .esg-hero{height:210vh}
  .esg-hero__ato{padding:calc(var(--e6) + 60px) 20px var(--e5)}
  .esg-hero__texto{max-width:100%}
  .esg-hero__texto .chamada{max-width:100%}
  .dados{gap:var(--e2)}
  .dado{--lado:clamp(68px,19vw,96px);padding:var(--e1)}
  .dado--e,.dado--s,.dado--g{--desloca:0px}
  .dado__rotulo{font-size:11px;letter-spacing:.08em}

  /* na tela cheia o texto passa a rolar: numa tela de celular o
     conteudo de uma letra nao cabe de pe */
  .tela__corpos{
    align-items:flex-start;
    padding:calc(var(--e6) + 70px) 20px calc(var(--e7) + 20px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .tela__corpo{max-width:100%}
  .tela__veu{
    background:
      linear-gradient(180deg,rgba(4,20,13,.92) 0%,rgba(4,20,13,.88) 55%,rgba(4,20,13,.7) 100%);
  }
  /* as abas viram uma barra embaixo, longe do polegar do fechar */
  .tela__abas{
    left:50%;right:auto;
    transform:translateX(-50%);
    bottom:16px;
  }
  .tela__abas button{width:46px;height:46px;font-size:19px}
  .tela__fechar{top:auto;bottom:16px;right:16px;width:46px;height:46px}
}

/* ---------- quem pediu menos movimento ---------- */

/* Sem rolagem comandando nada: o hero vira uma tela comum, com o texto
   e os dados um embaixo do outro, e tudo continua alcancavel. A tela
   cheia continua abrindo — so aparece de uma vez, sem o circulo. */
@media (prefers-reduced-motion:reduce){
  .esg-hero{height:auto}
  .esg-hero__palco{position:relative;height:auto;padding-block:calc(var(--e7) + 40px) var(--e7)}
  .esg-hero__ato{position:relative;inset:auto;opacity:1 !important;transform:none !important;padding:0 24px}
  .esg-hero__ato--dados{margin-top:var(--e7)}
  .esg-hero__ato--texto::before{inset:-40px -24px}
  .esg-hero__rolar{display:none}
  .nevoa{animation:none}
  .esg-hero__video{display:none}
  .dado,.dado__rotulo{transition-duration:.01ms}
  .dado:hover{transform:translateY(var(--desloca,0))}

  .tela{transition:none;clip-path:none;opacity:0;pointer-events:none}
  .tela.aberta{clip-path:none;opacity:1;pointer-events:auto}
  .tela__fotos img{transition:none;transform:none}
  .tela__corpo{transition:none}
}