/* ══════════════════════════════════════════════════════════════════════
   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;
}
/* Abaixo de 900px a coluna é única e a copa cheia passaria por baixo da
   assinatura. Ela não some (pedido do Herbert, 24/10/2026): encolhe para o
   canto de baixo, atrás do fecho, e baixa a opacidade — fica como luz de
   fundo, nunca disputando com o texto. */
@media (max-width: 899px){
  .campo-ramificacao{ width: 78%; height: 300px; opacity: .5; }
}

.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;
}

/* Contato em ícones (Herbert, 24/10/2026): o número não aparece na tela —
   o clique leva direto ao WhatsApp. Mesmo halo de vidro dos ícones da seção 03,
   em tamanho de alvo de toque. As marcas são desenhadas em monocromo, no traço
   do site, sem a cor delas: quem dá cor aqui é só a luz. */
.rodape__contato{ margin-top: var(--lf-esp-6); }
.rodape__contato ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap: var(--lf-esp-4);
}
.rodape__icone{
  position: relative;
  display:grid; place-items:center;
  width: 58px; height: 58px;
  border-radius: 50%;
  color: var(--lf-texto-2);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: var(--lf-vidro-brilho);
  transition: color var(--lf-dur-rapida) var(--lf-ease),
              background-color var(--lf-dur-rapida) var(--lf-ease),
              border-color var(--lf-dur-rapida) var(--lf-ease),
              transform var(--lf-dur-media) var(--lf-ease-entra);
}
.rodape__icone svg{ width: 26px; height: 26px; }
.rodape__icone:hover{
  color: var(--lf-texto);
  background: var(--lf-vidro-alto);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-2px);
}
.rodape__icone:active{ transform: none; transition-duration: var(--lf-dur-toque); }
.rodape__icone:focus-visible{ border-radius: 50%; }

.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);
}