/* ==========================================================================
   Onde atuamos

   O RITMO DE FUNDOS, que é o que impede a página de se ler como um catálogo:

     abertura        escuro      (o eixo de luz)
     tipos           claro
     relações        petróleo    (o mesmo universo do radar do Future Partner)
     setores         escuro      (`g-dark eco`, a secção da Home)
     objetivos       petróleo
     como atuamos    claro
     conversão       escuro      (o componente `.closer`, sem variante)

   OS COMPONENTES SÃO OS DA HOME; OS CHÃOS SÃO DESTA PÁGINA, e as duas coisas
   não se confundem. `#goals` e `#marchTrack` são montados por
   `home-editorial.js` com os dados da Home, e é isso que garante que os cinco
   objetivos e as quatro etapas nunca divergem.

   O CHÃO É OUTRA CONVERSA. Houve uma ronda em que estas duas secções levaram
   também a recoloração da Home: objetivos em papel, com o cartão branco de
   `home-2026.css`, e a conduta em escuro com `.atuar`. Não foi aprovada
   nesta página. Voltaram ao que aqui estava, e `home-2026.css` deixou de ser
   carregada — sem `.obj` nem `.atuar`, não há nada nela para esta página.

   Nas áreas escuras é PETRÓLEO, nunca verde médio lavado: `--oa-petroleo` é o
   mesmo gradiente controlado que o Future Partner usa, e pela mesma razão —
   um teal chapado num bloco desta altura não tem profundidade nenhuma.

   O QUE ESTA FOLHA NÃO TEM: régua do método, `.closer`, `.eco__art`. Esses
   componentes vivem em `home-editorial.css` e são carregados antes desta —
   aqui só se ajusta o que a composição desta página pede à volta deles.
   ========================================================================== */

:root{
  --oa-fundo:#f4f7f7;
  --oa-petroleo:
    radial-gradient(72% 96% at 50% -6%, rgba(7,210,210,.13), transparent 62%),
    linear-gradient(170deg,#05272d 0%,#04181e 54%,#020e13 100%);
}

/* --------------------------------------------------------------------------
   A REVELAÇÃO AO ROLAR — o mesmo aparelho das outras páginas
   -------------------------------------------------------------------------- */
.rv{
  opacity:0; translate:0 16px;
  transition:opacity .7s ease, translate .7s cubic-bezier(.22,.68,.3,1);
  transition-delay:calc(var(--d, var(--i, 0)) * 90ms);
}
.rv.is-in{ opacity:1; translate:0 0 }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; translate:0 0; transition:none }
}


/* ==========================================================================
   1 · A ABERTURA SEGUE O CONTRATO DAS PÁGINAS INSTITUCIONAIS.

   Esteve aqui um hero de 720px com o texto à esquerda e a ilustração a
   ocupar metade da direita. Fazia duas coisas erradas: era mais alto do que
   qualquer outra abertura do site, e punha a figura a competir com o título
   em vez de a ambientar.

   Agora usa os mesmos tokens `--hero-*` que o Método, o Sobre e a página de
   Produtos usam — a mesma altura mínima, o mesmo respiro, a mesma escala de
   headline —, com o conteúdo centrado e a cena empurrada para a margem.
   Quatro aberturas do mesmo site passam a ter relação entre si.

   E SEM CTA. O botão saiu do topo por pedido: esta página existe para
   demonstrar alcance, e a conversão é o `.closer` no fim, depois da
   demonstração. */
.oa-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:var(--hero-pad-topo) var(--hero-pad-pe);
  min-block-size:var(--hero-min);
  display:grid; align-content:center;
  text-align:center;
  color:var(--on-dark);
  background:var(--grad-hero);
}
.oa-hero__fundo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  inline-size:100%; block-size:100%; display:block;
}
/* O véu. A cena vive junto à margem direita e é cortada por ela; o véu
   escurece o corredor central onde o texto passa e deixa as duas margens
   acesas. Sem ele as linhas finas atravessam a headline. */
.oa-hero__veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(62% 76% at 50% 50%, rgba(2,20,26,.62) 0%, rgba(2,20,26,.38) 54%, rgba(2,20,26,0) 80%),
    linear-gradient(180deg, transparent 68%, rgba(1,12,18,.34) 100%);
}
.oa-hero__in{ position:relative; z-index:2 }
/* O ciano institucional sobre este chão mede 3.47:1 — medido, não suposto.
   O tom claro resolve, como já acontece no hero do Método. */
.oa-hero .kicker{ color:#d6fdfd }
.oa-hero .h1{
  margin-block-start:14px;
  font-size:var(--hero-h1); line-height:1.08;
  max-inline-size:20ch; margin-inline:auto; color:#fff;
}
.oa-hero .h1 em{ font-style:normal; color:var(--cyan-lit) }
.oa-hero .lede{
  margin-block-start:18px; max-inline-size:60ch; margin-inline:auto;
  color:rgba(226,244,246,.86);
}
/* A tese. Corpo de display e centrada — o filete à esquerda que aqui esteve
   pertencia a uma composição alinhada à esquerda e, num bloco centrado,
   passava a ser um traço solto fora do eixo. */
.oa-hero__tese{
  margin-block-start:clamp(18px,2.2vw,26px);
  max-inline-size:46ch; margin-inline:auto;
  font-family:var(--display); font-weight:500; letter-spacing:-.018em;
  font-size:clamp(16px,2.1vw,21px); line-height:1.36;
  color:#e6fdfd;
}

@media (max-width:900px){
  /* No estreito a cena volta a ter área própria por baixo do texto — o
     script descobre-o pela posição calculada do canvas. */
  /* FLEX, e não `block`. O canvas é o PRIMEIRO filho da secção — no desktop
     isso é indiferente porque ele é absoluto e assenta atrás de tudo, mas ao
     voltar ao fluxo passava a desenhar-se ACIMA do texto, que é o contrário
     da ordem pedida. Com a coluna flex, `order` põe-no no fim sem mexer na
     marcação, que tem de continuar a ter a cena antes do conteúdo para ela
     ficar atrás no desktop. */
  .oa-hero{
    min-block-size:0; display:flex; flex-direction:column;
    padding-block:calc(var(--mast) + clamp(10px,2.4vw,18px)) 0;
  }
  .oa-hero__in{ order:1 }
  .oa-hero__fundo{ order:2 }
  .oa-hero__veu{
    background:linear-gradient(180deg, rgba(1,12,18,.72) 0%, rgba(1,12,18,.3) 46%, transparent 62%);
  }
  .oa-hero__fundo{
    position:static; margin-block-start:clamp(24px,6vw,36px);
    block-size:clamp(260px,66vw,340px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 13%,#000 100%);
  }
}


/* ==========================================================================
   2 · TIPOS DE EMPRESA — uma faixa, e não quatro cartões

   A FOTOGRAFIA SAIU. Eram quatro imagens de banco, e o briefing de 16/09
   proíbe-as para representar estas quatro categorias. O que estava por baixo
   delas — as cenas de traço de `atuamos-cenas.js`, feitas neste projecto —
   passa a ser a peça.

   E A COMPOSIÇÃO MUDA COM ISSO. Uma fotografia recortada pede caixa própria;
   um desenho não. No desktop as quatro placas ficam ENCOSTADAS, separadas
   apenas por um filete, e formam uma faixa só. O cantos arredondados são os
   dois das pontas.

   A PROPORÇÃO É A DO `viewBox`, 360×228, e não um 4:3 aproximado. Com a
   proporção exacta o `preserveAspectRatio` não deixa margem morta: o desenho
   toca as quatro arestas e a linha de chão de cada cena cai sempre aos 86%
   da altura da placa. Como as quatro colunas têm a mesma largura e, logo, a
   mesma altura, os quatro chãos alinham-se — e a faixa lê-se como um
   horizonte contínuo com quatro paisagens em cima dele. É a "relação entre
   os quatro tipos" pedida, dita pelo desenho.

   SEM NUMERAÇÃO, e agora por mais uma razão. Serviços, Indústrias, Varejo e
   Pública não têm ordem entre si — não são etapas de nada. O horizonte
   contínuo diz "conjunto"; um 01/02/03/04 dizia "sequência".
   ========================================================================== */
.oa-tipos-sec{
  padding-block:clamp(40px,4.4vw,62px);
  background:var(--oa-fundo);
}
.oa-tipos-sec .head{ margin-block-end:clamp(22px,2.6vw,32px) }
.oa-tipos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2.4vw,20px) clamp(12px,2vw,18px);
}
.oa-tipo{ min-inline-size:0 }

/* A CAIXA. `30/19` é `360/228`: a proporção do `viewBox` das cenas. */
.oa-tipo__arte{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:30/19;
  border-radius:clamp(10px,1.2vw,14px);
  background:linear-gradient(168deg,#063138 0%,#02181e 100%);
  box-shadow:0 2px 6px -2px rgba(1,24,30,.22), 0 20px 34px -26px rgba(1,24,30,.45);
}
.oa-tipo__cena{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
  display:grid; place-items:stretch;
}
.oa-cena{ inline-size:100%; block-size:100%; display:block }
.oa-cena g{ fill:none; stroke-linecap:round; stroke-linejoin:round }
.oa-cena__chao path{ stroke:rgba(110,245,245,.2); stroke-width:1.2 }
.oa-cena__tr path{ stroke:rgba(150,240,245,.38); stroke-width:1.6 }
.oa-cena__pr path{ stroke:rgba(110,245,245,.55); stroke-width:1.6 }
.oa-cena__lz path,
.oa-cena__lz circle{ stroke:rgba(190,255,255,.7); stroke-width:1.4 }
.oa-cena__lz circle{ fill:rgba(7,210,210,.24) }

.oa-tipo__txt{ margin-block-start:clamp(10px,1.1vw,13px) }
.oa-tipo__t{
  font-family:var(--display); font-weight:700; letter-spacing:-.024em;
  font-size:clamp(17px,1.9vw,22px); line-height:1.1; color:var(--ink);
}
.oa-tipo__d{
  margin-block-start:6px;
  font-size:clamp(13px,1.5vw,14.5px); line-height:1.5;
  color:var(--text-soft);
}

/* --- A FAIXA, a partir dos 900 ------------------------------------------
   Quatro colunas encostadas. A `gap` horizontal passa a zero para as placas
   se tocarem; o respiro entre as colunas de texto volta pelo `padding` do
   bloco de texto, que é o que mantém o texto alinhado com a aresta esquerda
   da sua própria placa em vez de o centrar na coluna.

   Abaixo dos 900 as placas voltam a ser quatro peças separadas: em 2+2 uma
   faixa contínua teria de arredondar quatro cantos interiores, e o horizonte
   partido a meio não diz nada. */
@media (min-width:900px){
  .oa-tipos{
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:0;
  }
  .oa-tipo__arte{ border-radius:0 }
  .oa-tipo:first-child .oa-tipo__arte{
    border-start-start-radius:14px; border-end-start-radius:14px;
  }
  .oa-tipo:last-child .oa-tipo__arte{
    border-start-end-radius:14px; border-end-end-radius:14px;
  }
  .oa-tipo + .oa-tipo .oa-tipo__arte{
    border-inline-start:1px solid rgba(150,240,245,.16);
  }
  .oa-tipo__txt{ padding-inline-end:clamp(18px,2.2vw,32px) }
  .oa-tipo:last-child .oa-tipo__txt{ padding-inline-end:0 }
}

/* No telemóvel estreito as duas colunas apertam a headline. Menos corpo,
   mesma grelha: duas colunas continuam a ser mais legíveis do que uma fila de
   quatro blocos altos, que é o que o briefing chama de "caixas gigantes". */
@media (max-width:400px){
  .oa-tipos{ gap:14px 10px }
  .oa-tipo__t{ font-size:16px }
  .oa-tipo__d{ font-size:12.5px; line-height:1.45 }
}


/* ==========================================================================
   3 · RELAÇÕES DE MERCADO

   Seis LIGAÇÕES. A figura é o assunto: dois nós e um fio, com um ponto de
   luz a percorrê-lo. A sigla e o nome por extenso vêm por baixo.

   Nem os seis rectângulos pretos da página antiga, nem seis cartões
   genéricos — a única coisa que estas seis peças têm em comum com um cartão
   é terem uma borda, e a borda existe para separar seis figuras que de outro
   modo flutuariam no petróleo.
   ========================================================================== */
.oa-rel-sec{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(56px,6.6vw,92px);
  color:var(--on-dark);
  background:var(--oa-petroleo);
}
.oa-rel-sec::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); opacity:.05; mix-blend-mode:overlay;
}
.oa-rel-sec .h2{ color:#fff }
.oa-rel-sec .h2 em{ color:var(--cyan-lit) }
.oa-rel-sec .lede{ color:var(--on-dark-soft); max-inline-size:60ch; margin-inline:auto }

/* DUAS COLUNAS JÁ NO TELEMÓVEL. Esteve uma coluna só até aos 620px, e seis
   cartões em fila davam 1667px de altura num ecrã de 844 — dois ecrãs
   inteiros para dizer seis siglas, que é a "coluna interminável" que o ponto
   22 do briefing manda evitar. O que muda para caber não é a composição: é a
   escala dos discos, do fio e do corpo de texto. A figura continua a ser dois
   nós e uma ligação entre eles. */
.oa-rels{
  display:grid; gap:clamp(10px,1.8vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:1000px){ .oa-rels{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.oa-rel{
  min-inline-size:0; text-align:center;
  padding:clamp(22px,2.6vw,30px) clamp(16px,2vw,24px);
  border:1px solid rgba(150,240,245,.14);
  border-radius:clamp(12px,1.4vw,16px);
  background:linear-gradient(168deg, rgba(9,52,60,.5), rgba(3,20,26,.34));
  transition:border-color .4s ease, background .4s ease;
}
@media (hover:hover){
  .oa-rel:hover{ border-color:rgba(110,245,245,.34) }
}

/* --- a figura ------------------------------------------------------------
   Dois discos e um fio. `--i` escalona o arranque da luz de cartão para
   cartão: seis pontos a partir ao mesmo tempo leem-se como um efeito
   aplicado por cima, seis desencontrados leem-se como tráfego. */
.oa-rel__fig{
  display:flex; align-items:center; justify-content:center; gap:0;
  margin-block-end:clamp(16px,1.8vw,20px);
}
.oa-rel__no{
  flex:none; inline-size:50px; block-size:50px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1.5px solid rgba(150,240,245,.4);
  background:rgba(3,26,32,.6);
  color:var(--cyan-lit);
}
/* 26 de 50: o glifo respira dentro do disco em vez de encostar ao aro. Os
   quatro desenhos partilham a mesma caixa de 64, e por isso 26px aqui dá a
   MESMA altura óptica aos quatro — que é o que os faz ler como família. */
.oa-rel__no .oa-glifo{
  display:block; inline-size:26px; block-size:26px;
}
.oa-rel__fio{
  position:relative; flex:1 1 auto; max-inline-size:86px;
  block-size:2px; overflow:hidden;
  background:linear-gradient(90deg, rgba(110,245,245,.16), rgba(110,245,245,.4), rgba(110,245,245,.16));
}
.oa-rel__luz{
  position:absolute; inset-block:-3px; inline-size:22px;
  border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--cyan-lit), transparent);
  filter:blur(1px);
  inset-inline-start:-22px;
}
@media (prefers-reduced-motion:no-preference){
  .oa-rel__luz{
    animation:oa-corre 3.4s cubic-bezier(.5,0,.5,1) infinite;
    animation-delay:calc(var(--i, 0) * 460ms);
  }
}
/* `left` e não `translate`: o fio tem `overflow:hidden` e é a posição dentro
   dele que recorta a luz nas duas pontas. */
@keyframes oa-corre{
  0%   { inset-inline-start:-22px; opacity:0 }
  18%  { opacity:1 }
  76%  { opacity:1 }
  100% { inset-inline-start:100%; opacity:0 }
}

.oa-rel__s{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(22px,2.6vw,28px); line-height:1; color:#fff;
}
.oa-rel__n{
  margin-block-start:6px;
  font-size:12.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--cyan-lit);
}
.oa-rel__d{
  margin-block-start:12px;
  font-size:14.5px; line-height:1.56; color:rgba(214,253,253,.76);
}

/* --- a escala estreita ---------------------------------------------------
   Abaixo dos 620 o cartão tem cerca de 150px de conteúdo. Os discos de 50 e
   o fio de 86 somavam 186 e não cabiam; a 38+34+38 cabem com folga e a
   figura continua a ler-se — dois nós, uma ligação. */
@media (max-width:619px){
  .oa-rel{ padding:16px 12px; border-radius:12px }
  .oa-rel__fig{ margin-block-end:12px }
  .oa-rel__no{ inline-size:38px; block-size:38px; border-width:1.2px }
  .oa-rel__no .oa-glifo{ inline-size:20px; block-size:20px }
  .oa-rel__fio{ max-inline-size:34px }
  .oa-rel__luz{ inline-size:14px; inset-inline-start:-14px }
  @keyframes oa-corre{
    0%   { inset-inline-start:-14px; opacity:0 }
    18%  { opacity:1 }
    76%  { opacity:1 }
    100% { inset-inline-start:100%; opacity:0 }
  }
  .oa-rel__s{ font-size:20px }
  .oa-rel__n{ margin-block-start:4px; font-size:10px; letter-spacing:.04em }
  .oa-rel__d{ margin-block-start:8px; font-size:12.5px; line-height:1.46 }
}


/* ==========================================================================
   4 · O ECOSSISTEMA — a secção da Home, com a arte ao centro

   ESTA FOLHA JÁ NÃO DESENHA A SECÇÃO. Desenhava: a secção era clara e o
   desenho recebia um cartão escuro próprio, com chão e grelha, porque a cena
   foi feita para fundo escuro e sobre papel os nove rótulos desapareciam.
   Resolvia o contraste e criava outro problema — uma caixa escura no meio de
   uma secção branca, que é precisamente o que o cliente disse para não
   haver.

   A secção passou a `section g-dark eco` no HTML. O fundo, o chão em
   perspectiva, a rede de pontos e o ritmo vertical vêm todos de `.eco` em
   `home-editorial.css` — o mesmo componente da Home, não uma leitura dele.
   A cena também voltou à forma normal: o `data-forma="panorama"` desta
   página achatava-a num formato que só existia aqui.

   O que fica aqui é a ÚNICA diferença que devia existir: na Home o desenho
   ocupa a coluna da direita de uma grelha de duas, ao lado do texto; aqui
   não há texto ao lado, e por isso ele centra-se e cresce.
   ========================================================================== */
.oa-eco-sec .head{ margin-block-end:clamp(24px,3vw,40px) }

/* Ao centro em qualquer largura. `home-editorial.css` encosta o desenho à
   esquerda a partir dos 1000px — `margin-inline:0` —, que é o que ele
   precisa dentro da grelha de duas colunas da Home e o contrário do que esta
   página precisa. */
.oa-eco-sec .eco__art{
  margin-inline:auto;
  /* MAIOR, MODERADAMENTE. Na Home a cena vive numa coluna de cerca de 640px.
     Aqui tem a `shell` inteira disponível e seria fácil deixá-la ocupar os
     1160: a 1.28× continua a ler-se como a mesma peça, e a secção não vira
     um ecrã. */
  max-inline-size:820px;
}
@media (min-width:1000px){ .oa-eco-sec .eco__art{ margin-inline:auto } }

/* No estreito fica o comportamento da Home, que `home-editorial.css` já
   define: a cena sangra de aresta a aresta. Sem cartão à volta, um sangrado
   deixou de ter cantos arredondados para pôr fora do ecrã. */


/* ==========================================================================
   5 · OBJETIVOS — o componente da Home sobre o chão desta página

   A COMPOSIÇÃO NÃO SE DESENHA AQUI. `.aims` e `.aim` vivem em
   `home-editorial.css`, e `home-editorial.js` monta `#goals` com os cinco
   nomes e os cinco desenhos da Home. Esteve aqui uma releitura em faixas
   horizontais, com numeral e uma frase de consequência por objetivo — frases
   escritas para esta página e que não existem em lado nenhum do projecto.
   Saiu, e não volta.

   O QUE ESTA FOLHA DESENHA É O CHÃO, e é o petróleo. Houve uma ronda em que
   a secção passou a `section g-paper obj` — a versão clara que a Home fixou,
   com o cartão branco e o desenho a tinta em vez de néon. Não foi aprovada
   nesta página: aqui o cartão é de vidro sobre escuro e é assim que estava
   aprovado. Ao tirar a classe `obj` do HTML e a folha `home-2026.css` da
   página, o componente volta sozinho à sua forma para chão escuro.
   ========================================================================== */
.oa-obj-sec{
  position:relative; overflow:hidden; isolation:isolate;
  padding-block:clamp(48px,5.6vw,80px);
  color:var(--on-dark);
  background:var(--oa-petroleo);
}
.oa-obj-sec::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); opacity:.05; mix-blend-mode:overlay;
}
.oa-obj-sec .h2{ color:#fff }
.oa-obj-sec .h2 em{ color:var(--cyan-lit) }
/* A régua do fim do bloco pertence à composição da Home, onde há uma secção
   a seguir dentro do mesmo chão. Aqui o bloco é a secção inteira. */
.oa-obj-sec .eco__aims{ padding-block-end:0; border-block-end:0 }


/* ==========================================================================
   6 · COMO ATUAMOS — o componente da Home sobre o chão desta página

   Também não se desenha nada da composição aqui. `.walk`, `.fluxo` e `.etp`
   vêm de `home-editorial.css`; esta página declara a secção e deixa
   `home-editorial.js` montar `#marchTrack`.

   E TAMBÉM AQUI O CHÃO VOLTOU. Esteve `g-dark walk atuar`, a recoloração
   escura da Home, e não foi aprovada nesta página.

   A CORRECÇÃO DAS PLACAS NÃO SE PERDE COM ISSO, e é a parte que interessa:
   `.atuar` existe na Home porque lá o cartão é de vidro sobre chão escuro e
   o fio passava a ver-se através dele. Na versão clara a placa é branca e
   sólida desde sempre, e por isso nunca teve o problema — foi precisamente
   para não lhe tocar que as regras da Home ficaram encostadas a `.atuar`.
   `valida-atuamos.mjs` mede o canal alfa das quatro placas em vez de confiar
   nisto.

   O respiro é o único ajuste: `.walk` da Home tem 88/110px porque lá vem a
   seguir a banda de conversão. Aqui a página é mais longa e o ritmo pede
   menos.
   ========================================================================== */
.oa-como-sec{ background:var(--oa-fundo) }
.oa-como-sec.walk{ padding-block:clamp(48px,5.6vw,80px) }
/* O botão que leva à página do Método. Era `.atuar__acao`, de
   `home-2026.css`, enquanto a secção usava a recoloração escura; a folha
   deixou de ser carregada e a regra passou a viver aqui, que é onde o botão
   desta página vive. */
.oa-como__acao{ margin-block-start:clamp(28px,3.4vw,42px); justify-content:center }


/* ==========================================================================
   7 · O MÉTODO — a secção saiu da página

   Esteve aqui a régua das seis letras, com o chão `--grad-tint` e um botão
   por baixo. A ordem pedida a 16/09 tem sete secções e esta não é uma delas:
   a página existe para mostrar alcance — tipos, modelos, setores, objetivos e
   conduta —, e a metodologia tem página inteira.

   O CAMINHO PARA O MÉTODO NÃO SE PERDEU. Está dentro da secção "Como
   atuamos", no botão `.oa-como__acao`, que é onde a Home também o tem. `.rail` continua em
   `home-editorial.css` e é montado por `home-editorial.js` em qualquer página
   que declare `#rail` — esta deixou de o declarar, e mais nada foi preciso.
   ========================================================================== */