/* ==========================================================================
   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)
     ecossistema     claro
     objetivos       escuro
     como atuamos    claro
     método          claro       (a versão aprovada da Home)
     conversão       escuro      (o componente `.closer`, sem variante)

   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 editorial rápida, e não duas grandes filas.

   Esteve em 2+2 com imagens a 16:10 e ocupava 1304px de altura — mais do que
   o hero e a secção das relações juntos, para dizer quatro palavras. Passa a
   1—1—1—1 numa linha só, com a imagem em 4:3 e os espaços internos apertados.
   O que se perde é altura morta; o conteúdo é o mesmo. */
.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; gap:clamp(14px,1.8vw,24px);
  grid-template-columns:minmax(0,1fr);
}
/* 2+2 no tablet, 1—1—1—1 a partir de 900. Quatro numa linha abaixo disso
   dava colunas de 170px, e aí a fotografia deixa de se ver e o título parte
   em duas linhas. */
@media (min-width:560px){
  .oa-tipos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:900px){
  .oa-tipos{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
.oa-tipo{ min-inline-size:0 }
/* 4:3 e não 16:10: em quatro colunas a imagem panorâmica fica com 130px de
   altura e não mostra nada. A caixa continua preparada para receber a
   fotografia definitiva sem tocar em código. */
.oa-tipo__arte{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:4/3;
  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__foto,
.oa-tipo__cena{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
}
.oa-tipo__foto{ object-fit:cover; z-index:2 }
/* A cena desenhada, por baixo. Some no dia em que a fotografia existir. */
.oa-tipo__cena{ z-index:1; 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) }

/* SEM NUMERAÇÃO. Serviços, Indústrias, Varejo e Pública não têm ordem entre
   si — não são etapas de nada —, e um 01/02/03/04 por cima delas sugeria uma
   sequência que não existe. Sai o numeral, e com ele a coluna que o
   segurava: o texto passa a uma coluna só. */
.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(18px,1.9vw,22px); line-height:1.1; color:var(--ink);
}
.oa-tipo__d{
  margin-block-start:6px;
  font-size:clamp(13.5px,1.5vw,14.5px); line-height:1.5;
  color:var(--text-soft);
}


/* ==========================================================================
   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 }

.oa-rels{
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:620px){ .oa-rels{ 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);
}


/* ==========================================================================
   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

   ESTA FOLHA NÃO DESENHA NADA AQUI. Esteve aqui uma releitura em faixas
   horizontais, com numeral e uma frase de consequência por objetivo — e as
   frases eram inventadas para esta página. Saiu tudo: `.aims` e `.aim` vivem
   em `home-editorial.css`, que esta página carrega antes desta folha.

   O que fica é o CHÃO. Na Home a secção é `g-dark`; aqui é o petróleo desta
   página, que é o mesmo universo e mantém o ritmo claro/escuro da página.
   ========================================================================== */
.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 — outra vez o componente da Home

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

   O único ajuste é o respiro: `.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) }


/* ==========================================================================
   7 · O MÉTODO — a régua da Home nesta página

   O componente é o mesmo; o que muda é o chão em que assenta e o botão por
   baixo. Não há aqui a equação nem o box de fecho da Home: esta secção
   existe para dizer que a atuação tem um método, e a página do método é que
   o explica.
   ========================================================================== */
.oa-met-sec{
  padding-block:clamp(56px,6.6vw,92px);
  background:var(--grad-tint);
}
.oa-met__acoes{ margin-block-start:clamp(28px,3.4vw,42px); justify-content:center }