/* ══════════════════════════════════════════════════════════════════════
   02 · ESTRUTURA — seções, campos de fundo, ritmo vertical e revelação
   DOCS/01_sistema-visual.md §2, §4, §5, §6, §7, §9, §10
   O site é UM campo escuro contínuo: as seções são momentos do mesmo
   campo, não caixas empilhadas. Nenhuma régua, nenhuma borda separando.
   ══════════════════════════════════════════════════════════════════════ */

.secao{ position:relative; }

/* Coluna única de conteúdo — o texto nunca passa de 1240px (§4.1) */
.secao__conteudo{
  position: relative;
  z-index: var(--lf-z-conteudo);
  width: var(--lf-largura);
  margin-inline: auto;
}

/* ── Camada A · costura do campo (§5.2) ────────────────────────────
   Cada seção dissolve para --lf-noite no pé e nasce dela no topo.
   Como os dois lados convergem para a mesma cor, a emenda não existe. */
.secao--costura::before,
.secao--costura::after{
  content:""; position:absolute; left:0; right:0;
  pointer-events:none; z-index: var(--lf-z-leitura);
}
.secao--costura::before{
  top:0; height:18vh;
  background: linear-gradient(180deg, var(--lf-noite), transparent);
}
.secao--costura::after{
  bottom:0; height:22vh;
  background: linear-gradient(180deg, transparent, var(--lf-noite));
}

/* ── Camada B · revelação do bloco (§5.2) ──────────────────────────
   O estado invisível só existe sob html.js-mov, classe que o JS escreve.
   Sem JS ou com movimento reduzido, todo o conteúdo nasce visível. */
.js-mov .revela{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--lf-dur-lenta) var(--lf-ease-entra),
              transform var(--lf-dur-lenta) var(--lf-ease-entra);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-mov .revela.dentro{ opacity:1; transform:none; }

@media (max-width: 767px){
  .js-mov .revela{ transform: translateY(22px); }
}

/* ══════════════════════════════════════════════════════════════════
   01 · CAPA (§6)
   Rege o fundo: Tela 05 — Campo de luz. Quase nada em cena.
   ══════════════════════════════════════════════════════════════════ */

#capa{
  /* ── A FONTE DE LUZ DA CAPA, em token e em UM lugar só ──────────────
     São as fitas de LED da escada da foto. Duas camadas dependem desta
     âncora: o furo da tinta (camada 2), que deixa a zona quase neutra, e
     o foco quente (camada 3), que a aquece. Elas descrevem a MESMA
     lâmpada — se divergirem, a luz cai onde a tinta já pintou de azul.
     A escada muda de lugar quando o recorte muda: quem move a âncora é o
     recorte, e move as duas de uma vez (DOCS/01_sistema-visual.md §6.3).
     (CORREÇÃO design 15/08/2026 — os tokens viviam em .capa__luz, e a
     tinta ficara para trás em 68% 40% no recorte de retrato.) */
  --luz-x: 68%; --luz-y: 40%;

  height: 100svh;          /* svh e não vh: a barra do iOS não faz a capa saltar */
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;      /* prende a mistura das camadas dentro da capa */
  background: var(--lf-noite);
}
@media (orientation: landscape) and (max-height: 600px){
  #capa{ min-height: 520px; }
}

/* Camada 1 · filtro na imagem — tira a luz de dia e abre espaço para o campo */
.capa__foto{
  position:absolute; inset:0; width:100%; height:100%;
  z-index: var(--lf-z-foto);
  object-fit: cover; object-position: 62% 46%;
  filter: brightness(.58) contrast(1.06) saturate(.38);
  transform: scale(1.04);
  will-change: transform;
}
/* Sem export de retrato dedicado: no celular em pé o recorte vai pelo
   object-position (ver DOCS/04_implementacao.md, divergência 2) */
@media (max-aspect-ratio: 3/4){
  .capa__foto{ object-position: 50% 42%; }
}

/* Camada 2 · tinta marinho com furo de luz — mix-blend-mode:color troca
   matiz e croma preservando a luminância: a fotografia continua fotografia */
.capa__tinta{
  position:absolute; inset:0; z-index: var(--lf-z-tinta);
  mix-blend-mode: color; pointer-events:none;
  background: radial-gradient(46% 56% at var(--luz-x) var(--luz-y),
              rgba(14,42,110,.10)  0%,
              rgba(14,42,110,.34) 42%,
              rgba(14,42,110,.62) 76%);
}

/* Camada 3 · luz âmbar aditiva — a luz soma, nunca cobre.
   O foco principal cai exatamente sobre as fitas de LED da escada da foto.

   REVISÃO design 15/08/2026 — o §0 tem dois polos: campo azul profundo e um
   acento quente. Na tela, o elemento mais claro da capa era a ESCADA FRIA, e o
   acento perdia; a medição do `sistemas` já mostrava o núcleo do LED em
   #AE9C8B contra o #CDC1B9 previsto no §6.3. O primeiro foco sobe de .58 para
   .70 e abre de 20%×30% para 23%×32% — a luz continua ancorada nas fitas de
   LED que existem na foto, só volta ao valor que o documento previa. */
.capa__luz{
  /* A âncora (--luz-x / --luz-y) vive em #capa: a tinta usa a mesma. */
  position:absolute; inset:0; z-index: var(--lf-z-luz);
  mix-blend-mode: screen; pointer-events:none;
  background:
    radial-gradient(23% 32% at var(--luz-x) var(--luz-y), rgba(255,201,138,.70) 0%, rgba(255,201,138,.16) 52%, transparent 76%),
    radial-gradient(42% 34% at 74% 20%, rgba(255,231,198,.22) 0%, transparent 70%),
    radial-gradient(52% 44% at 30% 14%, rgba(255,201,138,.12) 0%, transparent 74%);
  animation: lf-respira var(--lf-dur-ambiente) var(--lf-ease-luz) infinite;
}
/* Depois da regra base de #capa, e não junto do recorte da foto lá em cima:
   media query não soma especificidade, então declarada antes ela perdia por
   ordem. Move a âncora uma vez e as duas camadas acompanham. */
@media (max-aspect-ratio: 3/4){
  #capa{ --luz-x: 90%; --luz-y: 34%; }   /* a escada, no recorte de retrato */
}
@keyframes lf-respira{
  0%,100%{ opacity:.92 }
  50%    { opacity:1; transform:scale(1.025) }
}

/* Camada 4 · véu de leitura e vinheta — o 4º gradiente é a costura com a seção 02

   REVISÃO design 15/08/2026 (§6.3): o véu era `linear-gradient(14deg…)`, quase
   de baixo para cima. Ele foi dimensionado para uma frase curta, e a frase em
   uso tem uma segunda linha longa que sobe até a faixa clara da cortina: ali o
   composto mediu #6B7899 (4,4:1 na caixa, 4,72:1 sob os glifos) — AA, contra o
   AAA do resto do site. Trocado por uma ELIPSE ancorada no canto onde o texto
   vive: cobre a coluna de leitura inteira em altura, e morre antes da escada
   acesa, que a composição quer limpa. Ganho de brinde: o pé esquerdo da capa
   volta a encostar em --lf-noite e a capa deixa de flutuar como um retângulo
   azul solto do campo do resto da página. */
.capa__leitura{
  position:absolute; inset:0; z-index: var(--lf-z-leitura); pointer-events:none;
  background:
    radial-gradient(150% 120% at 0% 100%,
                    rgba(4,9,31,.93)  0%,
                    rgba(4,9,31,.76) 30%,
                    rgba(4,9,31,.52) 50%,
                    rgba(4,9,31,.20) 68%,
                    transparent      84%),
    linear-gradient(180deg, rgba(4,9,31,.46) 0%, transparent 20%),
    radial-gradient(128% 104% at var(--centro, 50%) 42%, transparent 40%, rgba(4,9,31,.52) 100%),
    linear-gradient(180deg, transparent 76%, var(--lf-noite) 100%);
}

/* Conteúdo — âncora inferior-esquerda; o convite de rolagem alinha pela
   base do display, na coluna da direita */
.capa__pe{
  position: relative;
  z-index: var(--lf-z-conteudo);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  /* A borda esquerda da capa é a MESMA das seções. Com --lf-margem dos dois
     lados, acima de 1440px a página passava a ter duas bordas esquerdas: em
     2560 o display começava em 151px e os títulos em 660px
     (REVISÃO design 15/08/2026, §4.1 × §6.1). */
  padding-inline: var(--lf-recuo) var(--lf-margem);
  padding-bottom: clamp(72px, 12vh, 180px);
}
/* Logo da capa a 2× o tamanho de origem (pedido do Herbert, 16/08/2026).
   Caminho: 3× ficou dominante demais, e a redução de um terço trouxe para 2×.
   O afastamento maior é o que destaca a marca do bloco de texto — ela ocupa a
   sua própria faixa de silêncio, em vez de virar a primeira linha da frase.
   Só a capa: nas demais seções e no rodapé a marca segue branca e no tamanho
   de sempre. A versão em cor foi avaliada e descartada — em campo escuro ela
   exige fundo claro atrás, e o selo brigava com a translucidez do resto. */
/* A marca POUSA SOBRE o fio de luz do forro (pedido do Herbert, 16/08/2026):
   a linha de LED da fotografia funciona como a base em que ela se apoia.
   Por isso o que se ancora é a BASE do logo, não o topo — e o cálculo desconta
   a própria altura da marca, senão crescer o logo o empurraria por cima do fio.
     --fio        onde a linha de luz corre, em % da altura da capa (medido
                  pixel a pixel com o conteúdo oculto)
     --folga-fio  o vão entre a base da marca e a linha
   O max() protege telas baixas: sem ele, em janela curta a conta fica negativa
   e a marca sobe para fora da capa. */
.capa__logo{
  position: absolute;
  z-index: var(--lf-z-conteudo);
  --fio: 17.4%;
  --folga-fio: 20px;
  --alt-logo: clamp(66px, 7vw, 97px);   /* 2× do original, +10% (16/08) */

  top: max(24px, calc(var(--fio) - var(--folga-fio) - var(--alt-logo)));
  left: var(--lf-recuo);
  width:auto; height: var(--alt-logo);
  max-width: calc(100% - var(--lf-recuo) - var(--lf-margem));
}
/* No recorte de retrato o `object-position` desce a foto e leva o fio junto —
   ele passa de 17,4% para 21,2% da altura. A âncora acompanha o recorte, pela
   mesma razão que --luz-x acompanha: o que rege é a cena, não a borda da tela. */
@media (max-aspect-ratio: 3/4){
  .capa__logo{ --fio: 21.2%; }
}
.capa__display{
  grid-column:1; grid-row:2;
  margin-inline-start: -.02em;   /* alinha pela haste do "O", não pela caixa (§3.4) */
}
/* A frase de apoio conduz ao slogan; ela não É o slogan. Em tamanho de lead a
   proporção fica 3,4 para 1 contra o display, e a capa lê em dois segundos:
   marca, promessa, frase. Uma linha só em qualquer largura, do 375 ao 2560. */
.capa__apoio{
  display: block;
  font-family: var(--lf-fonte-texto);
  font-size: var(--lf-tipo-lead);
  font-weight: 300;
  line-height: 1.36;
  letter-spacing: -.006em;
  color: var(--lf-texto-2);
  margin-bottom: var(--lf-esp-4);
}
.capa__lead{
  grid-column:1; grid-row:3;
  margin-top: var(--lf-esp-5);
  /* `balance` e não o `pretty` do corpo: com a frase em três linhas, o `pretty`
     deixava 449/443/90px — a última linha virava uma órfã de duas palavras
     debaixo de duas linhas cheias. Equilibrado dá 348/330/305 (medido em
     1280×720, 16/08/2026). Vale enquanto o lead couber em poucas linhas; é
     bloco curto, que é onde `balance` funciona. */
  text-wrap: balance;
}
/* A partir de 1024px o bloco ocupa no máximo 52%: o terço direito da foto,
   onde está a escada acesa, fica limpo. O lado com luz não recebe texto. */
@media (min-width: 1024px){
  .capa__display, .capa__lead{ max-width: min(52vw, 20ch); }
  .capa__lead{ max-width: min(52vw, 34ch); }
}

/* Convite de rolagem (§6.5) — nada de seta, nada de mouse desenhado */
.capa__rolar{
  /* Linha 3 e não 2: ancorado pela BASE do bloco de texto, não pela linha do
     display. Na linha 2 ele flutuava no meio da direita, e em ultrawide ficava
     órfão no vazio (REVISÃO design 15/08/2026, §6.5). */
  grid-column:2; grid-row:3;
  justify-self: end; align-self: end;
  display:flex; flex-direction:column; align-items:center; gap: var(--lf-esp-3);
  padding: var(--lf-esp-2);
  border-radius: var(--lf-raio-p);
  text-decoration: none;
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* --lf-ui mediu 4,51:1 sobre a foto aqui — passa AA raspando, e o pixel
     muda com o recorte. Texto sobre imagem fica em --lf-texto-2: 6,2:1
     medido no mesmo ponto (§11.2 pede folga, não empate). */
  color: var(--lf-texto-2);
  transition: color var(--lf-dur-rapida) var(--lf-ease);
}
.capa__rolar:hover{ color: var(--lf-luz); }
.capa__rolar-traco{
  position: relative;
  width: 1px; height: 56px;
  overflow: hidden;
  background: var(--lf-linha);
}
.capa__rolar-traco::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, var(--lf-luz));
  /* 3,2s descendo + 1,4s de pausa = ciclo de 4,6s (69,5% do ciclo em movimento) */
  animation: lf-desce 4.6s var(--lf-ease-luz) infinite;
}
@keyframes lf-desce{
  0%           { transform: translateY(-100%) }
  69.5%, 100%  { transform: translateY(100%) }
}
@media (max-width: 767px){
  .capa__rolar{ grid-column:1; grid-row:4; justify-self:end; margin-top: var(--lf-esp-6); }
}

/* ── ETIQUETA "imagem de referência" ────────────────────────────────
   A foto da capa NÃO é obra da Lugar do Futuro (briefing §5). Esta
   etiqueta existe só enquanto a foto for de referência.
   PARA REMOVER: apague este bloco e o <p class="capa__referencia"> do HTML.

   REVISÃO design 15/08/2026 — estava em tipo de etiqueta (caixa alta, 600,
   .16em, --lf-ui), igualzinho ao rótulo "Role" logo acima: dois rótulos gêmeos
   empilhados no mesmo canto, e no celular a 50px um do outro. Uma ressalva não
   disputa atenção com um convite. Passa a legenda em caixa baixa: continua
   legível (7,5:1 medido no pé da foto) e para de competir. */
.capa__referencia{
  position:absolute; z-index: var(--lf-z-conteudo);
  right: var(--lf-margem); bottom: var(--lf-esp-5);
  font-size: var(--lf-tipo-legenda);
  font-weight: 400;
  line-height: 1.2;
  color: var(--lf-texto-3);
}
/* ── fim do bloco da etiqueta de referência ─────────────────────── */

/* Camada C · contínuo, só na capa — sem JS, sem listener de rolagem.
   Onde animation-timeline não existir, nada se move e a capa fica correta. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .capa__foto{
      animation: capa-foto linear both;
      animation-timeline: view(); animation-range: exit 0% exit 100%;
    }
    /* A marca sai junto com o texto: está fora de .capa__pe desde 16/08, e sem
       isto ficaria parada na tela enquanto o resto da capa se despede. */
    .capa__pe, .capa__logo{
      animation: capa-texto linear both;
      animation-timeline: view(); animation-range: exit 10% exit 78%;
    }
  }
}
@keyframes capa-foto { to{ transform: scale(1.10) translateY(-6%) } }
@keyframes capa-texto{ to{ transform: translateY(-40px); opacity:0 } }

/* ══════════════════════════════════════════════════════════════════
   02 · ILUMINAÇÃO (§7)
   Rege o fundo: Tela 01 — Fitotaxia (137,5°). O ângulo áureo é a
   solução da natureza para distribuir luz sem sombreamento.
   ══════════════════════════════════════════════════════════════════ */

#iluminacao{
  padding-top: var(--lf-vazio);              /* o nada antes da etiqueta (§4.4) */
  padding-bottom: var(--lf-respiro-secao);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, var(--lf-noite-2) 0%, var(--lf-noite) 70%);
}
@media (min-width: 768px){
  #iluminacao{ min-height: 100svh; }
}

/* O campo ocupa só o terço superior e some antes do carrossel começar */
.campo-fitotaxia{
  position:absolute; inset:0 0 auto 0;
  width:100%; height:46vh;
  z-index: var(--lf-z-campo);
  opacity:.45;                                /* o campo é fundo, não assunto */
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
          mask-image: linear-gradient(180deg, #000 40%, transparent);
  pointer-events:none;
}

#iluminacao .etiqueta{ margin-bottom: var(--lf-esp-5); }
#iluminacao .lead{ margin-top: var(--lf-esp-5); }

/* ══════════════════════════════════════════════════════════════════
   03 · AUTOMAÇÃO RESIDENCIAL (§9)
   Rege o fundo: Tela 02 — Translucidez. Única seção centralizada e o
   ponto de maior respiro da página.
   ══════════════════════════════════════════════════════════════════ */

#automacao{
  min-height: 92svh;
  padding-top: var(--lf-vazio);
  padding-bottom: var(--lf-respiro-secao);
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
  background: var(--lf-noite);
}

/* ── Vídeo de fundo da seção 03 (21/08/2026) ───────────────────────────
   Obra real filmada pela casa. Substitui a tela 02 (Translucidez) como
   regência de fundo desta seção; os brilhos continuam, mas recuados — com
   o vídeo atrás, a .62 de antes empastava a imagem.                      */
.video-fundo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index: var(--lf-z-foto);
  pointer-events:none;
  /* nasce apagado e entra quando o primeiro quadro está pronto: sem isto
     o poster pisca antes do vídeo assumir */
  opacity:0;
  transition: opacity var(--lf-dur-entrada) var(--lf-ease-entra);
}
.video-fundo.pronto{ opacity:1; }

/* Véu — MAIS transparente que a tinta da capa, a pedido: aqui o assunto é a
   imagem, não o campo. É radial em vez de chapado, então adensa no miolo,
   onde o texto vive, e abre nas bordas, onde o vídeo aparece inteiro.
   O 2º gradiente costura o vídeo com as seções vizinhas — sem ele o topo e
   o pé cortariam secos contra o campo escuro.
   O 3º traz a imagem para a paleta: um fio de marinho, sem chapar a cor. */
/* Véu em DOIS DEGRADÊS — entrada pelo topo, saída pela base, e o miolo limpo
   (pedido do Herbert, 21/08/2026: "expor as cores originais do vídeo no
   centro"). Deixou de ser radial: a elipse central protegia o texto, mas era
   exatamente ela que apagava a cor do filme onde ele é mais bonito.
   Os dois degradês seguem cumprindo a costura com as seções vizinhas — o
   campo escuro nasce e morre neles, sem emenda visível.
   O fio de marinho vive só nas pontas, pela mesma razão: no centro, a
   imagem é a imagem. */
.video-veu{
  opacity:0;
  transition: opacity var(--lf-dur-entrada) var(--lf-ease-entra);
  position:absolute; inset:0;
  z-index: var(--lf-z-tinta);
  pointer-events:none;
  background:
    linear-gradient(180deg,
                    var(--lf-noite)     0%,
                    rgba(4,9,31,.94)    9%,
                    rgba(4,9,31,.70)   19%,
                    rgba(4,9,31,.36)   29%,
                    rgba(4,9,31,.12)   38%,
                    transparent        46%),
    linear-gradient(0deg,
                    var(--lf-noite)     0%,
                    rgba(4,9,31,.94)    9%,
                    rgba(4,9,31,.70)   19%,
                    rgba(4,9,31,.36)   29%,
                    rgba(4,9,31,.12)   38%,
                    transparent        46%),
    linear-gradient(180deg,
                    rgba(0,26,112,.34)  0%,
                    rgba(0,26,112,.10) 30%,
                    transparent        44%,
                    transparent        56%,
                    rgba(0,26,112,.10) 70%,
                    rgba(0,26,112,.34)100%);
}

/* Com vídeo atrás, os três brilhos deixam de ser o fundo e passam a ser um
   reforço de cor: a .62 calibrada para campo vazio empastava a imagem. */

/* O miolo limpo expõe a cor do filme — e expõe o texto junto: sobre a parede
   clara da cena o branco mediu 1,09:1, ilegível. Em vez de fechar o centro de
   novo, a proteção anda COM as letras: um halo escuro curto, que só existe em
   volta do glifo e não toca o resto do quadro. Some quando não há vídeo. */
#automacao.com-video .etiqueta,
#automacao.com-video .titulo,
#automacao.com-video .lead{
  text-shadow:
    0 1px 2px  rgba(4,9,31,.72),
    0 2px 10px rgba(4,9,31,.78),
    0 6px 30px rgba(4,9,31,.62);
}
/* Névoa central — muito mais leve que o véu radial de antes (.88): aqui é só
   o suficiente para o halo ter onde se apoiar quando a cena abre em branco.
   A cor do filme continua passando; compare com a versão anterior e a
   diferença de exposição é visível. */
.video-veu::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(58% 46% at 50% 46%,
                              rgba(4,9,31,.66) 0%,
                              rgba(4,9,31,.48) 46%,
                              rgba(4,9,31,.18) 76%,
                              transparent 100%);
}
/* Os brilhos SAEM quando o vídeo entra (21/08/2026). Não é escolha estética e
   sim medição: `filter: blur(60px)` em três elementos animados, compostos por
   cima de vídeo, derrubou a página de 60 para 20 fps e fez o vídeo descartar
   36% dos quadros — era esse o "picote". Sem eles: 60 fps e 1 quadro perdido
   em 123. E a perda estética é nenhuma: os brilhos existiam para dar cor ao
   campo vazio, e agora quem dá cor é o filme.
   Sem vídeo (movimento reduzido, conexão lenta) eles continuam intactos. */
#automacao.com-video .brilhos{ display:none; }

/* O véu, a sombra do texto e a cor do lead entram JUNTO com o vídeo, na mesma
   duração — antes as seis regras de .com-video trocavam de estado no mesmo
   quadro em que a classe entrava, e isso, no meio da rolagem, lia como um
   pisca (relatado pelo Herbert em 21/08/2026). */
#automacao.com-video .video-veu{ opacity:1; }

#automacao .etiqueta,
#automacao .titulo,
#automacao .lead{
  transition: text-shadow var(--lf-dur-entrada) var(--lf-ease-entra),
              color      var(--lf-dur-entrada) var(--lf-ease-entra);
}

/* Com o vídeo atrás, o lead a --lf-texto-2 (.72) mediu 6,96:1 no instante mais
   claro do filme — passa AA, mas o site inteiro é AAA. Subir o texto resolve
   sem escurecer o véu, que é justamente o que se quer transparente aqui. */
#automacao.com-video .lead{ color: #FFFFFF; }
/* Os recursos vivem sobre o vídeo como o resto do texto: mesmo halo,
   e o texto sobe para branco puro pela mesma razão medida no lead. */
#automacao.com-video .recurso__texto{
  color: #FFFFFF;
  text-shadow:
    0 1px 2px  rgba(4,9,31,.72),
    0 2px 10px rgba(4,9,31,.78),
    0 6px 30px rgba(4,9,31,.62);
}
#automacao.com-video .recurso__icone{
  filter: drop-shadow(0 2px 10px rgba(4,9,31,.7));
}


/* Os três brilhos derivando, direto da base aprovada (26s / 32s / 38s).
   REVISÃO design 15/08/2026 — na base eles ficavam ATRÁS do painel de vidro,
   que ocupava o centro da tela. Aqui o texto está direto sobre o campo, e a
   .85 do azul virava holofote: o fundo passava a ser o elemento mais claro da
   página depois da capa. A opacidade do conjunto assenta o campo como campo;
   cor, tamanho e tempo continuam idênticos aos da base aprovada. */
.brilhos{ position:absolute; inset:-20%; z-index: var(--lf-z-campo); filter: blur(60px); opacity:.62; pointer-events:none; }
.brilho{ position:absolute; border-radius:50%; mix-blend-mode:screen; opacity:.85; }
.b1{ width:52vw; height:52vw; left:4%;  top:8%;   background:radial-gradient(circle at 50% 50%, var(--lf-azul) 0%, transparent 68%);    animation: deriva1 26s var(--lf-ease-luz) infinite; }
.b2{ width:44vw; height:44vw; right:6%; top:26%;  background:radial-gradient(circle at 50% 50%, var(--lf-luz) 0%, transparent 66%); opacity:.5; animation: deriva2 32s var(--lf-ease-luz) infinite; }
.b3{ width:60vw; height:60vw; left:22%; bottom:-16%; background:radial-gradient(circle at 50% 50%, var(--lf-marinho) 0%, transparent 70%); animation: deriva3 38s var(--lf-ease-luz) infinite; }

@keyframes deriva1{ 0%,100%{ transform:translate3d(0,0,0) scale(1) }        50%{ transform:translate3d(6%,4%,0) scale(1.08) } }
@keyframes deriva2{ 0%,100%{ transform:translate3d(0,0,0) scale(1) }        50%{ transform:translate3d(-5%,6%,0) scale(1.12) } }
@keyframes deriva3{ 0%,100%{ transform:translate3d(0,0,0) scale(1) }        50%{ transform:translate3d(4%,-5%,0) scale(1.06) } }

.secao__conteudo--centro{
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.secao__conteudo--centro .titulo,
.secao__conteudo--centro .lead{ margin-inline:auto; }
/* Parágrafo centralizado precisa de `balance`: com `pretty` a última linha
   ficava em 154px sob uma de 426px, e o bloco perdia a forma de bloco. */
.secao__conteudo--centro .lead{ text-wrap: balance; }
#automacao .etiqueta{ margin-bottom: var(--lf-esp-5); }
#automacao .lead{ margin-top: var(--lf-esp-5); }

/* ══════════════════════════════════════════════════════════════════
   04 · RODAPÉ (§10)
   Rege o fundo: Tela 05 — Campo de luz, se esvaindo. A luz assenta.
   ══════════════════════════════════════════════════════════════════ */

#rodape{
  position:relative;
  min-height: 56svh;
  padding-top: clamp(72px, 10vh, 160px);
  padding-bottom: clamp(40px, 6vh, 80px);
  background:
    radial-gradient(58% 62% at 18% 96%, rgba(0,61,165,.22) 0%, transparent 72%),
    radial-gradient(26% 30% at 12% 92%, rgba(255,201,138,.10) 0%, transparent 74%),
    var(--lf-noite);
}
/* Separação do topo: uma linha que nasce e morre no vazio — não é borda */
#rodape::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.16) 22%,
                              rgba(255,255,255,.16) 78%, transparent 100%);
}
#rodape .etiqueta{ margin-bottom: var(--lf-esp-5); }

.rodape__colunas{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--lf-esp-7);
  margin-top: var(--lf-esp-9);
}
/* REVISÃO design 15/08/2026 — com três colunas declaradas e a coluna de contato
   ainda comentada, a região caía no meio e sobrava um terço vazio à direita: um
   buraco, não respiro. `auto-fit` recolhe a trilha que não tem conteúdo, então
   o rodapé fica correto com 2 colunas hoje e com 3 no dia em que o contato
   entrar — sem editar CSS nenhum. */
@media (min-width: 768px){
  .rodape__colunas{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--lf-esp-8);
  }
}

.rodape__logo{
  width:auto; height: clamp(28px, 2.6vw, 38px);
  margin-bottom: var(--lf-esp-5);
}
/* Ramificação — tela 04 da base criativa, no lado direito do rodapé.
   Mesma família do .campo-fitotaxia: é campo, não assunto. Vive abaixo da
   camada de leitura, ancorado na base (a árvore cresce do chão da seção) e
   com máscara que a dissolve antes de encostar no texto e no rodapé da página.
   Some abaixo de 900px: no celular a coluna é única e a árvore passaria por
   baixo da assinatura. */
.campo-ramificacao{
  position:absolute; right:0; bottom:0;
  width:min(46%, 620px); height:min(78%, 520px);
  z-index: var(--lf-z-campo);
  opacity:.72;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%),
                      linear-gradient(0deg, transparent 2%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%),
                      linear-gradient(0deg, transparent 2%, #000 22%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  pointer-events:none;
}
@media (max-width: 899px){
  .campo-ramificacao{ display:none; }
}

.rodape__assinatura{ color: var(--lf-texto-2); }
/* Praça de atuação — degrau abaixo da assinatura, não coluna ao lado: numa
   coluna irmã ela alinhava pelo topo do bloco (a altura do LOGO) e ficava solta
   em relação ao texto. Aqui herda a mesma borda esquerda e o mesmo eixo.
   Um degrau de cor abaixo da assinatura: é informação de serviço, não a voz da
   empresa (REVISÃO 16/08/2026). */
.rodape__regiao{
  color: var(--lf-texto-3);
  margin-top: var(--lf-esp-4);
  max-width: 46ch;
}

.rodape__contato a{
  color: var(--lf-texto-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28);
  transition: color var(--lf-dur-rapida) var(--lf-ease),
              border-color var(--lf-dur-rapida) var(--lf-ease);
}
.rodape__contato a:hover{ color: var(--lf-luz); border-color: var(--lf-luz); }
.rodape__contato li{ margin-top: var(--lf-esp-3); }
.rodape__contato ul{ list-style:none; margin:0; padding:0; }

.rodape__fecho{
  margin-top: var(--lf-esp-9);
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lf-ui);
}