/* =========================================================================
   Ecogerador® a Etanol 25 kVA — Liconic Technology
   Folha de estilo única. Escrita a partir de design-system.md (v1).
   Etapa D2: coreografia. As seções do miolo entram na D3.

   Regras duras herdadas do design system:
   - Nenhum gradiente.
   - Nenhum cartão com sombra difusa.
   - Verde apenas em: CTA, número técnico vivo, estado ativo.
   - Espaçamento apenas na escala 8/16/24/40/64/104/168.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* cor */
  --tinta:        #0A0A0A;
  --papel:        #FFFFFF;
  --cinza-95:     #F4F4F4;
  --cinza-80:     #CCCCCC;
  --cinza-45:     #737373;
  --verde:        #4BA512;   /* só em número acima de 24px */
  --verde-texto:  #3D860E;   /* legível sobre branco — 4,55:1 */
  --verde-claro:  #5CAD29;   /* legível sobre tinta — 7,04:1 */
  --estudio:      #D8D6D7;   /* fundo amostrado dos frames da órbita */
  --blueprint:    #184477;   /* fundo amostrado dos frames do blueprint */

  /* tipografia */
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --t-mono-rotulo: 13px;
  --t-corpo-peq:   15px;
  --t-corpo:       18px;
  --t-destaque:    23px;
  --t-titulo-3:    29px;
  --t-titulo-2:    clamp(32px, 4vw, 44px);
  --t-titulo-1:    clamp(34px, 5.4vw, 69px);
  --t-numero:      clamp(56px, 9vw, 120px);

  /* espaço — escala fechada, nada fora desta lista */
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 40px;
  --e5: 64px; --e6: 104px; --e7: 168px;

  /* grade */
  --largura-max: 1280px;
  --respiro-lateral: var(--e3);
}

@media (min-aspect-ratio: 1/1) {
  :root { --respiro-lateral: var(--e5); }
}

/* -------------------------------------------------------------------------
   2. RESET E BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, canvas { display: block; max-width: 100%; }

a { color: inherit; }

/* foco visível — requisito de acessibilidade, não decoração */
:focus-visible {
  outline: 2px solid var(--verde-texto);
  outline-offset: 3px;
}

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--papel); color: var(--tinta);
  padding: var(--e2) var(--e3); font-size: var(--t-corpo-peq); font-weight: 600;
}
.pular-para-conteudo:focus { left: 0; }

/* -------------------------------------------------------------------------
   3. UTILITÁRIOS TIPOGRÁFICOS
   ------------------------------------------------------------------------- */
.rotulo {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-mono-rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cinza-45);
}

.num {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* número técnico vivo — um dos três lugares onde o verde é permitido */
.num-vivo { color: var(--verde-texto); }
.escuro .num-vivo, .bloco-escuro .num-vivo { color: var(--verde-claro); }

.wrap {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--respiro-lateral);
}

/* texto corrido nunca ocupa as 12 colunas */
.medida { max-width: 68ch; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* -------------------------------------------------------------------------
   4. PALCO — base comum dos blocos de coreografia
   ------------------------------------------------------------------------- */
.palco {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.palco > video,
.palco > canvas,
.palco > img.cobre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover preenche a tela. Só funciona sem corte agressivo porque o modo
     web é limitado a proporções de 1:1 ou mais largas (ver o interruptor
     de modo no fim do arquivo); abaixo de 1:1 a página vira mobile. */
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   5. HERO — V8 em loop, painel branco ancorado, véu escuro
   ------------------------------------------------------------------------- */
#hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--cinza-95);
}

#hero .cena { position: absolute; inset: 0; }

#hero .cena video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

#v5-hero { opacity: 0; }

/* véu de escurecimento: a transição acontece por dentro do preto, não por
   crossfade direto. O V8 continua rodando embaixo — nunca é pausado. */
#veu {
  position: absolute; inset: 0;
  background: var(--tinta);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* véu-base de 10%: constante, existe só para sustentar o texto branco.
   Não confundir com o #veu, que é o da transição e vai de 0 a 100%. */
#hero .cena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(10, 10, 10, .10);
  pointer-events: none;
}

/* título no alto, centralizado, em corpo reduzido */
.titulo-hero {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 4;
  padding: var(--e5) var(--respiro-lateral) 0;
  text-align: center;
  color: #FFFFFF;
}

.titulo-hero .marca {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-mono-rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D6D6D6;
  margin-bottom: var(--e2);
}

.titulo-hero h1 {
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  max-width: 24ch;
  margin-inline: auto;
}

.titulo-hero .linha-dados {
  color: #D6D6D6;
  font-size: var(--t-corpo-peq);
  margin-top: var(--e2);
}
.titulo-hero .linha-dados .num { color: #FFFFFF; }

@media (max-aspect-ratio: 1/1) {
  .titulo-hero { padding-top: var(--e4); }
  .titulo-hero h1 { font-size: 21px; max-width: 22ch; }
}

/* seletor de idioma — fixo no canto, legível sobre qualquer fundo pelo
   mix-blend (mesmo truque do indicador de rolagem) */
.lang-switch {
  position: fixed;
  top: var(--e3);
  right: var(--e3);
  z-index: 12;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  color: #FFFFFF;
  mix-blend-mode: difference;
  text-decoration: none;
  padding: 4px 6px;
}
.lang-switch:hover { text-decoration: underline; }
@media (max-aspect-ratio: 1/1) {
  .lang-switch { top: var(--e2); right: var(--e2); }
}

/* indicador de rolagem — seta minimalista centralizada no rodapé do hero.
   Some assim que o usuário começa a rolar (fade via GSAP). O mix-blend
   mantém a seta visível tanto sobre o vídeo claro quanto sobre o véu escuro. */
#indicador-rolagem {
  position: absolute;
  left: 50%;
  bottom: var(--e4);
  transform: translateX(-50%);
  z-index: 5;
  color: #FFFFFF;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
  pointer-events: none;
}
#indicador-rolagem svg {
  display: block;
  width: 44px;
  height: 44px;
  animation: seta-desce 1.8s ease-in-out infinite;
}
@keyframes seta-desce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  #indicador-rolagem svg { animation: none; }
}

/* -------------------------------------------------------------------------
   6. APROXIMAÇÃO — V5 sob scrub + callouts
   ------------------------------------------------------------------------- */
#aproximacao { height: 340vh; position: relative; }
#aproximacao .palco { background: #000; }

.callouts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.co { position: absolute; }

.co .ponto {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}

.co .linha {
  position: absolute; left: 0; top: 0;
  height: 1px;
  background: #FFFFFF;
}

.co .rot {
  position: absolute;
  white-space: nowrap;
  color: #FFFFFF;
}

.co .rot b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.co .rot span {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}

.co[data-dir="dir"] .linha { transform-origin: left center; }
.co[data-dir="dir"] .rot   { left: 0; transform: translateX(0); }
.co[data-dir="esq"] .linha { transform-origin: right center; }
.co[data-dir="esq"] .rot   { text-align: right; }

/* callouts no celular: a linha não sobrevive. Marcador numerado sobre a
   imagem e os textos viram lista numerada no rodapé da tela. */
.co .marcador {
  display: none;
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  align-items: center;
  justify-content: center;
}

#lista-callouts {
  display: none;
  position: absolute;
  left: var(--e2); right: var(--e2); bottom: var(--e3);
  z-index: 3;
  color: #FFFFFF;
}
#lista-callouts li {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
}
#lista-callouts .n {
  font-family: var(--mono);
  font-size: var(--t-mono-rotulo);
  opacity: .7;
  min-width: 18px;
}
#lista-callouts b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
#lista-callouts span {
  font-size: var(--t-mono-rotulo);
  opacity: .8;
  margin-left: 6px;
}

/* o comportamento mobile dos callouts (linha → lista) está no bloco de
   modo mobile, no fim do arquivo */

/* -------------------------------------------------------------------------
   7. SEQUÊNCIAS EM CANVAS — órbita e blueprint
   ------------------------------------------------------------------------- */
.seq { height: 300vh; position: relative; }

.seq canvas { width: 100%; height: 100%; object-fit: cover; }

/* --- órbita: faixa widescreen, não tela cheia --------------------------
   O quadro é 1027×720 e ocupando a tela inteira ficava alto demais para
   o que a imagem tem a dizer. A faixa é recortada na metade da altura e
   a cor do estúdio, que já é o fundo da seção, preenche o resto — o
   corte não aparece porque é a mesma cor da imagem.
   A seção também encurtou de 300vh para 150vh: menos rolagem para
   percorrer a mesma volta de 360°. */
#orbita { height: 150vh; }

.seq.orbita canvas {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 76svh;         /* subiu de 54 para 76svh: reduz ~50% o espaço em
                            branco acima e abaixo do equipamento (rev 23/07) */
  object-fit: contain;
}
@media (max-aspect-ratio: 1/1) {
  .seq.orbita canvas { height: 40svh; }
}

/* O fundo da seção é sempre a cor de fundo da própria mídia. É isso que
   faz a imagem e a página virarem uma superfície contínua, em vez de uma
   foto colada dentro de um retângulo. */
/* órbita recortada em fundo transparente: a seção usa o fundo da página,
   então o equipamento gira flutuando, sem retângulo de estúdio (rev 23/07) */
.seq.orbita .palco    { background: var(--papel); }
.seq.blueprint .palco { background: var(--blueprint); }
.seq.bloco-escuro .palco { background: var(--tinta); }
.seq.claro .palco     { background: var(--papel); }

/* legenda sobre o azul do blueprint — branco puro dá 8,1:1 */
.seq.blueprint .legenda                { color: #FFFFFF; }
.seq.blueprint .legenda .rotulo        { color: #B9C9DE; }
.seq.blueprint .legenda p:last-child   { color: #C8D5E5; }
.seq.blueprint .legenda .num-vivo      { color: var(--verde-claro); }

.legenda {
  position: absolute;
  left: var(--respiro-lateral);
  bottom: var(--e4);
  z-index: 2;
  max-width: 420px;
}

.legenda h2 {
  font-size: var(--t-titulo-3);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: var(--e1) 0;
}

.legenda p:last-child {
  font-size: var(--t-corpo-peq);
  color: var(--cinza-45);
}

.bloco-escuro .legenda            { color: #FFFFFF; }
.bloco-escuro .legenda p:last-child { color: #9A9A9A; }
.bloco-escuro .legenda .rotulo    { color: #9A9A9A; }

/* -------------------------------------------------------------------------
   8. FECHAMENTO — V4 invertido
   ------------------------------------------------------------------------- */
#fechamento { height: 260vh; position: relative; }
#fechamento .palco { background: #000; }

#fechamento .final {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  padding: var(--e3);
}

#fechamento .final h2 {
  font-size: var(--t-titulo-2);
  font-weight: 600;
  letter-spacing: -.015em;
  max-width: 18ch;
  margin-bottom: var(--e3);
}

/* -------------------------------------------------------------------------
   9. BOTÃO PRINCIPAL
   ------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 var(--e3);
  background: var(--verde-texto);
  color: #FFFFFF;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-corpo-peq);
  border-radius: 4px;
  text-decoration: none;
  border: 0;
  transition: background .15s linear;
}
.botao:hover { background: #35750C; }   /* 8% mais escuro, sem movimento */

.bloco-escuro .botao,
#fechamento .botao {
  background: var(--verde-claro);
  color: var(--tinta);
}
#fechamento .botao:hover { background: #4E9722; }

/* CTA fixo — só aparece depois da transição do hero */
#cta-fixo {
  position: fixed;
  right: var(--e3);
  bottom: var(--e3);
  z-index: 9;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
#cta-fixo.visivel { pointer-events: auto; }

/* =========================================================================
   MIOLO — os formatos aprovados
   O ritmo da página vem da ALTERNÂNCIA destes formatos, não de um layout
   bom repetido. Cada um aparece o número de vezes definido no briefing:
   F duas vezes, G uma só, os demais uma vez.
   ========================================================================= */

/* respiro vertical padrão das seções de miolo */
.miolo, .F, .N, .I2, .J {
  padding: var(--e6) 0;
}
@media (min-aspect-ratio: 1/1) {
  .miolo, .F, .N, .I2, .J { padding: var(--e7) 0; }
}

.bloco-escuro {
  background: var(--tinta);
  color: #FFFFFF;
}
.bloco-escuro .rotulo { color: #9A9A9A; }

h2 { font-weight: 600; letter-spacing: -.015em; }

/* -------------------------------------------------------------------------
   10. FORMATO H — números sobre a mídia
   ------------------------------------------------------------------------- */
.H {
  position: relative;
  height: 100svh;
  overflow: hidden;
  padding: 0;
  background: var(--tinta);
}
.H > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.H .grade {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  align-content: end;
  padding-bottom: var(--e5);
}
.H .titulo { color: #FFFFFF; margin-bottom: var(--e3); }
.H .titulo .rotulo { color: #C9C9C9; }
.H .titulo h2 {
  font-size: clamp(26px, 3vw, 40px);
  max-width: 18ch;
  margin-top: var(--e1);
}

/* --- variante "topo": título no alto, centralizado e menor ------------
   O véu é de 10% e nada mais. Com esse véu só funciona sobre imagem de
   topo escuro — a escolha da foto e a escolha do véu são a mesma
   decisão, e por isso a medição de contraste veio antes da estética. */
.H.topo { background: #323232; }   /* mesma cor do fundo da imagem */

.H.topo .grade {
  align-content: stretch;   /* a linha estica; quem distribui é o .wrap */
  padding-top: var(--e5);
  padding-bottom: var(--e5);
}
.H.topo .grade > .wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.H.topo .titulo {
  text-align: center;
  margin-bottom: 0;
  max-width: 46ch;
  margin-inline: auto;
}
.H.topo .titulo h2 {
  font-size: clamp(21px, 2.1vw, 29px);
  max-width: none;
  margin-top: var(--e2);
}
/* o véu de 10% vive aqui, sem gradiente e sem elemento extra */
.H.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 10, 10, .10);
  pointer-events: none;
}
.H .tira {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .3);
}
@media (min-aspect-ratio: 1/1) {
  .H .tira { grid-template-columns: repeat(4, 1fr); }
}
.H .tira > div {
  padding: var(--e3) var(--e2) var(--e3) 0;
  border-right: 1px solid rgba(255, 255, 255, .3);
  color: #FFFFFF;
}
.H .tira > div:last-child { border-right: 0; }
@media (max-aspect-ratio: 1/1) {
  .H .tira > div:nth-child(2n) { border-right: 0; }
  .H .tira > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .3); }
}
.H .tira b {
  display: block;
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.H .tira span { font-size: var(--t-mono-rotulo); opacity: .78; }

/* -------------------------------------------------------------------------
   11. FORMATO F — declaração pura, o respiro entre blocos visuais
   ------------------------------------------------------------------------- */
.F { text-align: center; }
.F h2 {
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.04;
  max-width: 15ch;
  margin: var(--e2) auto 0;
}
/* o grifo é um dos três lugares onde o verde é permitido:
   está marcando o valor da frase, não decorando o título */
.F .grifo { color: var(--verde-texto); }
.F.bloco-escuro .grifo { color: var(--verde-claro); }
.F p.sub {
  margin: var(--e3) auto 0;
  color: var(--cinza-45);
  max-width: 52ch;
  font-size: var(--t-corpo-peq);
}
.F.bloco-escuro p.sub { color: #9A9A9A; }

/* -------------------------------------------------------------------------
   12. FORMATO E2 — texto à esquerda, imagem preenchendo a coluna direita
   ------------------------------------------------------------------------- */
.E2 { padding: 0; }
.E2 .grade { display: grid; min-height: 100svh; }
@media (min-aspect-ratio: 1/1) {
  .E2 .grade { grid-template-columns: 1fr 1.1fr; }
}
.E2 .texto {
  display: flex;
  align-items: center;
  padding: var(--e6) var(--respiro-lateral);
}
@media (min-aspect-ratio: 1/1) {
  .E2 .texto { padding: 0 var(--e5); }
}
.E2 h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.15;
  margin: var(--e1) 0 var(--e3);
}
.E2 .texto > div > p { color: var(--cinza-45); max-width: 46ch; }
.E2 .apoio {
  margin-top: var(--e4);
  display: grid;
  gap: var(--e2);
  max-width: 46ch;
}
.E2 .apoio > div {
  border-top: 1px solid var(--cinza-80);
  padding-top: 12px;
}
.E2 .apoio b { display: block; font-size: var(--t-corpo-peq); }
.E2 .apoio span { font-size: 14px; color: var(--cinza-45); }
/* segunda aparição do E2, espelhada: imagem à esquerda, texto à direita.
   Mesma estrutura, leitura diferente — é o que impede os dois blocos de
   parecerem o mesmo layout repetido. */
@media (min-aspect-ratio: 1/1) {
  .E2.invertido .grade { grid-template-columns: 1.1fr 1fr; }
}
.E2.invertido .foto  { order: -1; }

.E2 .foto { position: relative; min-height: 60svh; }
.E2 .foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   13. FORMATO N — dado único de destaque
   ------------------------------------------------------------------------- */
.N { text-align: center; }
.N .gigante {
  font-size: clamp(80px, 17vw, 240px);
  line-height: .9;
  letter-spacing: -.04em;
  margin-top: var(--e2);
}
.N .gigante small {
  font-size: .3em;
  letter-spacing: 0;
  margin-left: .1em;
  font-weight: 400;
}
.N > .wrap > p:last-child {
  margin: var(--e3) auto 0;
  color: #9A9A9A;
  max-width: 46ch;
  font-size: var(--t-corpo-peq);
}

/* -------------------------------------------------------------------------
   14. FORMATO G — texto fixo à esquerda, mídia passando à direita
   ------------------------------------------------------------------------- */
.G { padding: 0; }
.G .palco-g { display: grid; min-height: 100svh; }
@media (min-aspect-ratio: 1/1) {
  .G .palco-g { grid-template-columns: .85fr 1.15fr; }
}
.G .col-texto {
  padding: var(--e6) var(--respiro-lateral);
}
@media (min-aspect-ratio: 1/1) {
  .G .col-texto {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    padding: 0 var(--e5);
  }
}
.G h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.15;
  margin: var(--e1) 0 var(--e2);
}
.G .col-texto p { color: var(--cinza-45); max-width: 42ch; font-size: var(--t-corpo-peq); }
.G .col-texto p + p { margin-top: var(--e2); }
.G .col-midia figure { position: relative; overflow: hidden; height: 100svh; }
@media (max-aspect-ratio: 1/1) {
  .G .col-midia figure { height: 62svh; }
}
.G .col-midia img { width: 100%; height: 100%; object-fit: cover; }
.G .col-midia figcaption {
  position: absolute;
  left: var(--e3); bottom: var(--e3);
  background: var(--papel);
  padding: 10px var(--e2);
  font-family: var(--mono);
  font-size: 13px;
}

/* -------------------------------------------------------------------------
   15. FORMATO I2 — aplicações em grade 3 × 2
   A legenda fica ABAIXO da imagem. O laboratório usava um degradê sobre a
   foto para garantir contraste; degradê é proibido pelo design system e a
   regra do cartão manda resolver com espaço e filete.
   ------------------------------------------------------------------------- */
.I2 h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  margin-top: var(--e1);
  max-width: 20ch;
}
.I2 .fila {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-aspect-ratio: 1/1) {
  .I2 .fila { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
}
.I2 figure img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}
.I2 figcaption {
  border-top: 1px solid var(--cinza-80);
  padding-top: 12px;
  margin-top: 12px;
}
.I2 figcaption b { display: block; font-size: var(--t-corpo-peq); font-weight: 600; }
.I2 figcaption span { font-size: 14px; color: var(--cinza-45); }

/* -------------------------------------------------------------------------
   16. FORMATO J — especificações em acordeão
   Tabela sem zebra e sem borda externa. Só filete entre as linhas.
   ------------------------------------------------------------------------- */
.J .coluna-estreita { max-width: 880px; }
.J h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  margin: var(--e1) 0 var(--e4);
}
.J details { border-bottom: 1px solid var(--cinza-80); }
.J summary {
  cursor: pointer;
  padding: var(--e3) 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e2);
}
.J summary::-webkit-details-marker { display: none; }
.J summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--cinza-45);
  font-weight: 400;
}
.J details[open] summary::after { content: "–"; }
.J table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--e2);
}
.J th, .J td {
  padding: 11px 0;
  border-top: 1px solid var(--cinza-80);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
.J th { padding-right: var(--e3); }
.J td {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-aspect-ratio: 1/1) {
  .J td { white-space: normal; }
}
.J .nota-grupo {
  font-size: 14px;
  color: var(--cinza-45);
  margin-bottom: var(--e3);
}
.J .rodape-specs { margin-top: var(--e4); }
.J .acao-specs { margin-top: var(--e2); }

.botao.contorno {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
}
.botao.contorno:hover { background: rgba(10, 10, 10, .06); }
.bloco-escuro .botao.contorno:hover { background: rgba(255, 255, 255, .1); }

/* -------------------------------------------------------------------------
   17. FECHAMENTO — ações e rodapé
   ------------------------------------------------------------------------- */
#fechamento .final .acoes {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  justify-content: center;
}
#fechamento .final .rotulo { color: #C9C9C9; margin-bottom: var(--e2); }

.rodape { padding: var(--e5) 0; }
.rodape .logo { width: 148px; height: auto; margin-bottom: var(--e3); }
.rodape .legal { font-size: 14px; color: #9A9A9A; }
.rodape .redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e3);
  list-style: none;
  font-size: 14px;
}
.rodape .redes a { text-decoration: none; border-bottom: 1px solid #3A3A3A; padding-bottom: 2px; }
.rodape .redes a:hover { border-bottom-color: #FFFFFF; }

/* =========================================================================
   17b. REVISÃO WEB (revisao.json, 23/07) — só no modo web (≥ 1:1)
   Ajustes pedidos pelo Jovis para a versão desktop. O mobile é revisado à
   parte, então nada aqui desce para o modo mobile (max-aspect-ratio).
   ========================================================================= */
@media (min-aspect-ratio: 1/1) {

  /* títulos do tipo "topo centralizado" 2× maiores, onde quer que apareçam.
     Exceções: bloco 01 pediu 50% menor; fechamento pediu 50% menor (abaixo). */
  .titulo-hero h1       { font-size: clamp(44px, 4.8vw, 68px); }
  /* fechamento: 50% menor (era clamp 56–84). Já está no topo do bloco
     (justify-content: flex-start, logo abaixo). */
  #fechamento .final h2 { font-size: clamp(28px, 3.5vw, 42px); }

  /* fechamento: conteúdo ancorado no topo do bloco. O padding-top de 168px
     (e7) empurrava o bloco para baixo e dava aparência de centralizado;
     reduzido para 40px (e4) para ficar claramente na parte superior. */
  #fechamento .final {
    justify-content: flex-start;
    padding-top: var(--e4);
  }

  /* legenda das sequências centralizada na vertical do bloco de cor, em vez
     de colada embaixo (às vezes ficava longe demais da imagem). Feito por
     flex no palco — sem transform, para não brigar com a entrada em GSAP. */
  .seq .palco { display: flex; align-items: center; }
  .seq .legenda {
    position: relative;
    left: auto;
    bottom: auto;
    margin-left: var(--respiro-lateral);
    z-index: 2;
  }

  /* bloco 01: a régua de dados estava encavalando. Número menor, mais
     respiro entre as colunas e a régua descolada do rodapé. */
  .H.topo .grade { padding-bottom: var(--e6); }
  .H.topo .tira > div { padding-right: var(--e4); }
  .H.topo .tira b { font-size: clamp(24px, 2.6vw, 34px); }
}

/* =========================================================================
   17c. REVISÃO WEB (revisao.json, 23/07 14h) — só no modo web (≥ 1:1)
   ========================================================================= */
@media (min-aspect-ratio: 1/1) {

  /* hero: título 4% mais para baixo */
  .titulo-hero { padding-top: calc(var(--e5) + 4svh); }

  /* hero: sobretítulo e linha de dados 20% maiores */
  .titulo-hero .marca      { font-size: calc(var(--t-mono-rotulo) * 1.2); }
  .titulo-hero .linha-dados { font-size: calc(var(--t-corpo-peq) * 1.2); }

  /* bloco 01: título 50% menor (só neste bloco) */
  .H.topo .titulo h2 { font-size: clamp(19px, 2.1vw, 29px); }

  /* bloco 01: um bloco cinza (#323232, a cor do fundo da imagem) no topo,
     aumentando ~20% a altura. A imagem cola no rodapé com 100svh; a seção
     vai a 120svh, deixando 20svh de cinza acima — respiro sobre o produto. */
  .H.topo { height: 120svh; }
  .H.topo > img { top: auto; bottom: 0; height: 100svh; }

  /* bloco 01: a régua abaixo da imagem encostava no grid — empurra o texto
     ~2 espaços para a direita, número e rótulo juntos */
  .H.topo .tira > div { padding-left: var(--e2); }

  /* aplicações: título numa linha só (bloco mais largo na horizontal) */
  .I2 h2 { max-width: none; }

  /* órbita: barras laterais. O canvas deixa de ocupar a largura toda e
     passa a uma coluna central menor — como o equipamento é largo, limitar
     a largura é o que o encolhe. Sobra espaço nas laterais (menos agressivo
     ao olhar) e a legenda à esquerda passa a respirar. */
  .seq.orbita canvas {
    inset: 0;
    top: 0;
    margin: auto;
    transform: none;
    width: 40%;
  }
}

/* =========================================================================
   18. MODO MOBILE — proporção de janela menor que 1:1
   Não é o desktop encolhido. Abaixo de 1:1 (janela mais alta que larga),
   a página troca de modo: os callouts deixam de ser desenho técnico e
   viram lista; a tira de dados vira grade de duas colunas; as mídias de
   tela cheia passam a `contain` para o produto aparecer inteiro; e o CTA
   fixo sai da frente do conteúdo que ele mesmo cobre.
   ========================================================================= */
@media (max-aspect-ratio: 1/1) {

  /* --- callouts: linha vira lista numerada --- */
  .co .linha, .co .rot, .co .ponto { display: none; }
  .co .marcador { display: flex; }
  #lista-callouts { display: block; }

  /* --- mídia de tela cheia: contain, para o produto não ser cortado
     numa janela alta. O fundo de cada seção tem a cor da própria mídia,
     então a borda não aparece. --- */
  #aproximacao .palco > video,
  #aproximacao .palco > img.cobre,
  .H.topo > img,
  .seq.blueprint canvas { object-fit: contain; }

  /* a caixa dos callouts recebe a proporção do vídeo, para os marcadores
     apontarem para o ponto certo do equipamento sobre o vídeo contido */
  .callouts {
    top: 50%;
    bottom: auto;
    height: auto;
    aspect-ratio: 1904 / 1088;
    transform: translateY(-50%);
  }

  /* --- alvos de toque: mínimo de 44px em tudo que se clica --- */
  .J summary { padding: var(--e2) 0; min-height: 52px; }
  .rodape .redes a { display: inline-block; padding: 10px 0; }

  /* --- CTA fixo: pílula compacta, longe do polegar que rola --- */
  #cta-fixo {
    right: var(--e2);
    bottom: var(--e2);
    height: 46px;
    padding: 0 var(--e2);
    font-size: 14px;
  }

  /* a lista numerada ocupa a faixa abaixo da moldura, longe do CTA fixo */
  #lista-callouts { bottom: 76px; }

  /* --- H: a tira de quatro colunas não cabe em régua única --- */
  .H .grade { padding-bottom: var(--e4); }
  .H .titulo h2 { font-size: 26px; max-width: 16ch; }

  .H.topo .grade { padding-top: var(--e4); }
  .H.topo .titulo h2 { font-size: 20px; max-width: 24ch; margin-inline: auto; }
  .H .tira > div { padding: var(--e2) var(--e2) var(--e2) 0; }
  .H .tira b { font-size: 26px; }

  /* --- F: a declaração não pode virar parágrafo --- */
  .F h2 { font-size: clamp(30px, 8.5vw, 44px); max-width: 13ch; }

  /* --- N: o número gigante é o conteúdo, não o enfeite --- */
  .N .gigante { font-size: clamp(88px, 30vw, 150px); }

  /* --- G: a coluna de mídia deixa de ser paralela e vira sequência --- */
  .G .col-midia figcaption {
    left: var(--e2);
    bottom: var(--e2);
    font-size: 12px;
  }

  /* --- J: rótulo e valor empilham em vez de brigar pela linha --- */
  .J th, .J td { display: block; width: 100%; }
  .J th { border-top: 1px solid var(--cinza-80); padding: 12px 0 0; color: var(--cinza-45); font-size: 14px; }
  .J td { border-top: 0; padding: 2px 0 12px; text-align: left; font-size: 16px; }

  /* --- legendas das sequências: espaço para respirar --- */
  .legenda { right: var(--respiro-lateral); max-width: none; }
  .legenda h2 { font-size: 24px; }
}

/* =========================================================================
   18b. REVISÃO MOBILE (23/07) — só no modo mobile (< 1:1)
   ========================================================================= */
@media (max-aspect-ratio: 1/1) {

  /* hero: título 2,5× */
  .titulo-hero h1 { font-size: clamp(40px, 13vw, 56px); }

  /* textos secundários (rótulo e linha de dados do hero + "09 · Contato"
     do fechamento): branco máximo, +10% de tamanho e em negrito. Só mobile.
     Obs.: 700 acima dos pesos carregados (Archivo 600 / Mono 500) → o
     navegador sintetiza o negrito; para rótulos curtos fica bom. */
  .titulo-hero .marca,
  .titulo-hero .linha-dados,
  .titulo-hero .linha-dados .num,
  #fechamento .final .rotulo {
    color: #FFFFFF;
    font-weight: 700;
  }
  .titulo-hero .marca        { font-size: 14.3px; }   /* 13 +10% */
  .titulo-hero .linha-dados  { font-size: 16.5px; }   /* 15 +10% */
  #fechamento .final .rotulo { font-size: 14.3px; }   /* 13 +10% */

  /* callouts do zoom-in: marcadores 2 e 3 empurrados à direita (só no
     mobile). O left vem de estilo inline nos .co, daí o !important.
     nº2: 67% → 72% (+5%) · nº3: 71% → 74% (+3%) */
  #callouts .co:nth-child(2) { left: 72% !important; }
  #callouts .co:nth-child(3) { left: 74% !important; }

  /* aproximação: a lista numerada sobe para logo abaixo do vídeo, à
     esquerda. O vídeo é 1,75:1 e, em retrato, tem ~57vw de altura
     centrada — a borda de baixo fica em 50% + ~29vw. */
  #lista-callouts { top: calc(50% + 29vw); bottom: auto; }

  /* bloco 01: cinza de cima e de baixo DOBRADO em relação à redução
     anterior. A faixa cinza total = altura − imagem; para dobrá-la a
     altura vira 2×(55svh−31,25vw)+56,25vw = 110svh − 6,25vw. object-position
     45% mantém a proporção topo/base. */
  .H.topo { height: calc(110svh - 6.25vw); }
  .H.topo > img { object-position: center 45%; }
  /* título "Simples como…": metade do tamanho anterior (era clamp 34–50px) */
  .H.topo .titulo h2 { font-size: clamp(17px, 6.25vw, 25px); }

  /* blocos F (02 "A bioenergia…" e 07 "O gerador assume…") 1,5× */
  .F h2 { font-size: clamp(45px, 12.75vw, 66px); }

  /* órbita (04) e blueprint (05): legenda logo abaixo da imagem, à
     esquerda, deixando espaço depois dela (branco na órbita) */
  .seq.orbita .legenda    { top: calc(50% + 22svh); bottom: auto; }
  .seq.blueprint .legenda { top: calc(50% + 30vw); bottom: auto; }

  /* aplicações: "Onde a energia não pode faltar." em uma linha só */
  .I2 h2 { max-width: none; white-space: nowrap; font-size: clamp(16px, 5.2vw, 26px); }

  /* fechamento: título no topo do bloco; tamanho reduzido à metade
     (era clamp 46–64px) */
  #fechamento .final    { justify-content: flex-start; padding-top: var(--e6); }
  #fechamento .final h2 { font-size: clamp(23px, 6.75vw, 32px); }
}

/* telas muito estreitas — o iPhone SE ainda é o piso real de mercado */
@media (max-width: 380px) {
  .I2 .fila { grid-template-columns: 1fr; }
  #lista-callouts b { font-size: 18px; }
}

/* -------------------------------------------------------------------------
   20. MOVIMENTO REDUZIDO
   Nenhuma tela pode ficar vazia quando o usuário pede menos movimento.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }

  /* as seções longas de scrub encolhem para uma tela só */
  #aproximacao, .seq, #fechamento { height: auto; }
  #aproximacao .palco, .seq .palco, #fechamento .palco {
    position: relative;
    height: 82svh;
  }
  #veu { opacity: 1; }
  #cta-fixo { opacity: 1; transform: none; pointer-events: auto; }
  .co .linha, .co .rot, .co .ponto { display: none; }
  .co .marcador { display: flex; }
  #lista-callouts { display: block; }
  #indicador-rolagem { display: none; }
}