/* ==========================================================================
   Sobre a Vazto — a página

   Carregada só por sobre.html, depois de vazto.css. Os tokens, a tipografia,
   os botões e os chãos vêm de lá; o cabeçalho e o rodapé são os componentes
   globais e trazem as suas folhas. Nada aqui redefine cor de marca — o que
   está escrito são as peças que só existem nesta página.

   O RITMO
   --------------------------------------------------------------------------
     hero            escuro, degradê institucional
     institucional   claro
     o CEO           escuro
     a chamada       teal      · componente `.closer` da Home
     missão/visão/valores  claro, com as três fotografias
     os números      claro     · componente `.tally` da Home
     rodapé          escuro

   O QUE ESTA PÁGINA NÃO ESCREVE
   --------------------------------------------------------------------------
   A banda de conversão e os quatro indicadores vêm de `home-editorial.css`,
   com a marcação da Home e sem variante nenhuma. Estiveram aqui escritos de
   raiz e foram removidos: o site já perdeu a montra e o rodapé por os ter
   escrito duas vezes, e não há razão para repetir o erro numa terceira peça.

   O QUE SAIU DA PÁGINA ANTIGA
   --------------------------------------------------------------------------
   · O VÍDEO ao lado do texto institucional. Não ficou espaço reservado nem
     aviso de "em breve": a coluna que ele ocupava foi eliminada da grelha;
   · a faixa teal chapada do topo com o título dentro de uma tarja branca;
   · as setas pretas enormes a flutuar longe do carrossel;
   · as bolas grandes à esquerda dos números, com os textos apertados ao lado.

   E O QUE SAIU DA VERSÃO ANTERIOR DESTA
   --------------------------------------------------------------------------
   · o alçado de prédios em wireframe do hero — a linguagem é do Método;
   · a peça desenhada do bloco institucional, sem substituição;
   · as três composições de linha do carrossel, que a fotografia entregue
     substituiu;
   · o layout próprio dos números.
   ========================================================================== */


/* ==========================================================================
   1 · HERO — Sobre a Vazto

   SEM PRÉDIOS. Uma versão desta abertura trazia um alçado de arquitectura em
   wireframe, desenhado em canvas. Estava bem executado e era a solução
   errada: o Método já explora essa linguagem à exaustão, e repeti-la aqui
   fazia das duas páginas a mesma página com outro título. A cena foi
   removida por inteiro — `sobre-hero.js` deixou de existir.

   O que fica é a lógica da abertura de Produtos: composição limpa, degradê
   institucional, textura discreta, nenhuma ilustração grande a disputar
   atenção. Três camadas, e nada mais:

   · o DEGRADÊ da casa, `--grad-hero`, que já serve as outras aberturas;
   · a MALHA de conexões — o componente partilhado `malha-hero.js`, cuja
     densidade cai a zero por cima da coluna de leitura;
   · o LOGÓTIPO OFICIAL, por cima do título. É a marca dentro da abertura,
     como a página antiga tinha, e ocupa a linha onde estava o eyebrow
     "A VAZTO", que saiu.

   Ao CENTRO, como a de Produtos. A altura, o respiro e a escala do título
   vêm dos tokens `--hero-*` de vazto.css, que são o contrato partilhado das
   páginas institucionais.
   ========================================================================== */
.sh{
  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);
}
/* A malha do componente partilhado. Muito ténue: é textura, não desenho. */
.sh .malha{ position:absolute; inset:0; z-index:1; pointer-events:none }
.sh .malha svg{ inline-size:100%; block-size:100%; display:block }
.sh .malha line{ stroke:var(--cyan-lit); stroke-width:.9 }
.sh .malha circle{ fill:var(--cyan-lit) }
.sh .malha .hub{ fill:#eafeff }

/* A MARCA D'ÁGUA SAIU. Esteve aqui uma versão gigante do logótipo, atrás do
   título, a 4.5% de opacidade. Com o logótipo oficial agora legível por cima
   do título, e a página a chamar-se "Sobre a Vazto", o topo passava a dizer a
   palavra três vezes: no logótipo, no título e no fundo. Uma delas tinha de
   sair, e a que não acrescenta nada é a do fundo — a textura fica por conta
   da malha e do degradê, que é exactamente o que a abertura de Produtos faz. */

/* --- o logótipo ----------------------------------------------------------
   O ficheiro oficial, no lugar onde estava o símbolo em laço. É a marca
   dentro da abertura, como a página antiga tinha — e ocupa a linha que o
   eyebrow "A VAZTO" ocupava, que saiu.

   Não flutua. O símbolo tinha uma animação de boia herdada da banda de
   fecho da Home; um logótipo a subir e a descer lê-se como enfeite, e a
   marca de uma página institucional não pisca. */
.sh__logo{
  inline-size:clamp(112px,11vw,152px); block-size:auto;
  margin:0 auto clamp(20px,2.6vw,28px);
  filter:drop-shadow(0 12px 22px rgba(1,20,24,.55));
}

.sh__in{
  position:relative; z-index:3;
  max-inline-size:52ch; margin-inline:auto;
}
.sh__t{
  font-family:var(--display); font-weight:700; letter-spacing:-.032em;
  font-size:var(--hero-h1); line-height:1.04; color:#fff;
}
/* A frase da página antiga. É ela que carrega a mensagem, e por isso tem
   corpo de subtítulo e não de parágrafo — mas fica abaixo do título, que
   continua a mandar. */
.sh__frase{
  margin-block-start:clamp(16px,2vw,22px);
  max-inline-size:34ch; margin-inline:auto;
  font-family:var(--display); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(16px,1.9vw,23px); line-height:1.32;
  color:var(--cyan-lit);
}
/* O filete entre o título e a frase, ao centro. */
.sh__frase::before{
  content:""; display:block; inline-size:56px; block-size:2px;
  margin:0 auto clamp(14px,1.8vw,20px);
  background:linear-gradient(90deg,rgba(7,210,210,.1),var(--cyan),rgba(7,210,210,.1));
}


/* ==========================================================================
   2 · O BLOCO INSTITUCIONAL

   DUAS COLUNAS: conteúdo à esquerda, hélice à direita.

   A secção já foi de três formas, e o percurso vale a pena ficar escrito.
   Na página antiga era texto à esquerda e um VÍDEO à direita. O vídeo saiu e
   o lugar dele recebeu primeiro uma peça desenhada, depois nada — a secção
   passou a uma coluna centrada. Centrada ficava espremida: o texto tinha
   751px de linha num contentor de 1160, e sobrava um terço da largura sem
   função nenhuma.

   Volta às duas colunas, e o lado direito volta a ter peso — agora com a
   peça que diz o que a empresa faz. O texto alinha à ESQUERDA, como na
   referência: num bloco de duas colunas, o texto centrado deixa as duas
   margens irregulares e a coluna deixa de ter aresta.

   O CONTENTOR É MAIS LARGO DO QUE A `shell`. A 1160px, as duas colunas
   ficavam com 500 e 600, e a linha de texto voltava ao aperto de que se
   fugiu. A 1280 dão 545 e 655, que é uma medida de leitura confortável ao
   lado de um painel com presença. A secção da equação do Método faz o mesmo,
   e pela mesma razão.
   ========================================================================== */
/* --- A SECÇÃO COMO ABERTURA ----------------------------------------------
   Passou a ser a primeira dobra da página, e isso muda três coisas — e só
   três. O desenho não se toca: continua texto à esquerda, hélice a sangrar
   pela direita, transição clara → petróleo.

   1 · O ESPAÇO SOB O CABEÇALHO. A barra é fixa e mede `--mast`; sem folga
       própria o título nascia por baixo dela. O que se acrescenta é a altura
       da barra MAIS um respiro — e o respiro é modesto de propósito: o
       cliente pediu abertura compacta e editorial, não um hero.
   2 · O TÍTULO SOBE DE ESCALA. Era um `h2` a meio da página; agora é a
       primeira coisa que se lê. `--hero-h1` é o token que as outras
       aberturas institucionais usam, com tecto mais baixo — a 62px a frase
       ocupava quatro linhas na coluna de 545px.
   3 · A HÉLICE PRECISA DE CHEGAR AO TOPO DO ECRÃ. Como a cena é absoluta e
       mede a secção, o `padding` novo empurrava-a para baixo e deixava uma
       faixa clara entre a barra e o escuro. `inset-block:0` já a leva de
       aresta a aresta — o que faltava era a secção não ter margem própria. */
.ins--abre{
  padding-block:calc(var(--mast) + clamp(26px,3.4vw,44px)) clamp(38px,4.4vw,60px);
}
.ins--abre .ins__head .h2{
  font-size:clamp(30px,4.4vw,46px); line-height:1.06; letter-spacing:-.03em;
}

.ins{
  position:relative; overflow:hidden;
  /* Compacta, e mais uma vez. O respiro desceu de 72px para 48: a secção é
     texto corrido com uma chamada no fim, e não precisa de meia centena de
     pixéis de ar de cada lado para se ler. O que a mantém confortável é o
     espaçamento ENTRE as peças, que também apertou um pouco — não o vazio à
     volta do bloco. */
  padding-block:clamp(34px,3.6vw,48px);
  background:var(--grad-tint);
}
.ins__grid{
  inline-size:min(1280px, calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  display:grid; gap:clamp(28px,3.6vw,58px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:960px){
  /* 46 / 54. O painel é o maior dos dois — é ele o objecto — sem chegar a
     dominar: a proporção da referência, dentro do contentor que temos. */
  .ins__grid{ grid-template-columns:minmax(0,0.85fr) minmax(0,1fr) }
}

/* --- o kicker do fecho sobre o degradê -----------------------------------
   Os eyebrows das secções saíram todos. O que resta é o da banda de fecho,
   que faz parte do componente da Home e é o que o pedido descreve para ela.

   `--grad-tint` abre e fecha em #e1e0e1, e o teal institucional #027373 mede
   4.31:1 sobre esse tom — abaixo dos 4.5 que texto pequeno exige. O tom
   fundo da marca resolve com folga (6.9:1). */
.tally .kicker{ color:var(--teal-deep) }

.ins__texto{ min-inline-size:0; text-align:start }
.ins__head{ margin-block-end:clamp(14px,1.5vw,18px) }
.ins__head .h2{ text-wrap:balance }

.ins__p{
  margin-block-start:clamp(10px,1.1vw,12px);
  /* 1.58 e não 1.62: quatro centésimos numa dúzia de linhas valem uns
     dez pixéis, e a leitura não dá por eles. O corpo da letra não mudou. */
  font-size:clamp(15.5px,1.7vw,17px); line-height:1.58; color:var(--text-soft);
  /* `pretty` melhora as quebras de fim de parágrafo onde o navegador o
     conhece, e é ignorado onde não. */
  text-wrap:pretty;
}
.ins__p:first-child{ margin-block-start:0 }

/* --- a afirmação de posicionamento ---------------------------------------
   Vinha destacada na página antiga e continua a vir — por peso, corpo e cor,
   em vez de negrito corrido.

   O FILETE LATERAL VOLTOU. Fazia sentido tirá-lo quando o bloco estava
   centrado: uma barra à esquerda de um bloco centrado descentra-o. Com o
   texto alinhado à esquerda, é o contrário — a barra assenta na mesma aresta
   que todas as outras linhas, e marca o destaque sem lhe torcer o eixo. É
   também o que a referência mostra. */
.ins__p--forte{
  font-family:var(--display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(19px,2.1vw,24px); line-height:1.26; color:var(--teal-deep);
  padding-inline-start:clamp(16px,1.6vw,22px);
  border-inline-start:2px solid rgba(2,115,115,.4);
  margin-block:clamp(16px,1.8vw,22px);
}
/* O fecho: quatro palavras, e são o remate do bloco. Encostado ao parágrafo
   anterior e ao botão — é a deixa do CTA, não uma secção própria. */
.ins__p--fecho{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(17px,1.9vw,20px); color:var(--teal);
  margin-block-start:clamp(13px,1.4vw,16px);
}
.ins .actions{ justify-content:flex-start; margin-block-start:clamp(16px,1.8vw,21px) }

/* --- a cena da direita ---------------------------------------------------
   NÃO É UM PAINEL. Esteve num cartão escuro de cantos arredondados ao lado
   do texto e lia-se como uma ilustração pousada na página. Aqui sai da
   grelha, cobre a metade direita da SECÇÃO de topo a fundo, sangra pela
   margem da janela e dissolve-se antes de chegar ao texto.

   Três coisas fazem a integração, e nenhuma delas é uma moldura:

   · sai do fluxo (`position:absolute`) e passa a medir-se pela secção, não
     pela coluna. É o que lhe permite ir de aresta a aresta;
   · a máscara horizontal apaga-lhe o lado esquerdo — o escuro nasce a meio e
     fecha na margem, e a passagem para o papel da secção não tem linha;
   · o próprio chão do canvas começa em alfa zero. A máscara trata da
     passagem fina; o degradê de dentro trata do corpo.

   A coluna da grelha continua reservada: um item absoluto sai do fluxo, mas
   `grid-template-columns` mantém a segunda coluna aberta, e é ela que impede
   o texto de correr por baixo da cena. */
/* A CENA APROXIMOU-SE DO TEXTO, e as duas medidas mexeram juntas.

   O canvas passou de 64% para 74% da secção: a 1440 a aresta esquerda dele
   sobe de 518 para 374, e a hélice — que se posiciona em fracção da largura
   do canvas — vem com ela.

   A MÁSCARA tem agora um patamar transparente até 24%. Sem ele, alargar o
   canvas punha o escuro a começar POR TRÁS do texto: a 1440 a coluna de
   leitura acaba a 641, que é 25% da largura do novo canvas, e com o
   esbatimento a arrancar em zero havia meio tom de petróleo debaixo das
   últimas palavras de cada linha. Com o patamar, a passagem começa onde o
   texto acaba e fecha 119px mais cedo do que antes — mais perto do conteúdo,
   sem nunca lhe tocar. O contraste foi medido depois desta mudança. */
.ins__cena{
  position:absolute; z-index:0; pointer-events:none;
  inset-block:0; inset-inline-end:0;
  inline-size:min(74%, calc(100% - 360px));
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 24%, rgba(0,0,0,.5) 38%, #000 58%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 24%, rgba(0,0,0,.5) 38%, #000 58%);
}
.ins__cena canvas{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%; display:block;
}
/* O texto por cima da cena. Sem isto, a coluna esquerda fica por baixo do
   canvas e o lado onde a máscara já não apaga cobre-a. */
.ins__texto{ position:relative; z-index:2 }

/* --- O TELEMÓVEL ---------------------------------------------------------
   Uma coluna, e a cena DEPOIS do texto todo: título, conteúdo, destaque,
   texto final, "Crie o futuro hoje" e CTA, e só então a peça. Ali ela é o
   remate da leitura, não uma imagem a atrasá-la — e a pessoa chega ao botão
   sem ter de passar por meio ecrã de ilustração.

   Aqui volta ao fluxo e ganha moldura: ao lado do texto a cena é ambiente,
   mas sozinha na largura toda precisa de uma aresta, senão o escuro encosta
   ao papel sem transição nenhuma. A máscara sai — no estreito ela apagaria
   metade do desenho. */
@media (max-width:959px){
  .ins__grid{ grid-template-columns:minmax(0,1fr) }
  .ins__texto{ order:1 }
  .ins__cena{
    order:2;
    position:relative; inset:auto;
    inline-size:100%; aspect-ratio:4/3;
    border-radius:clamp(14px,3.4vw,20px);
    overflow:hidden;
    -webkit-mask-image:none; mask-image:none;
    box-shadow:
      0 2px 6px -2px rgba(1,24,30,.3),
      0 24px 40px -28px rgba(1,24,30,.5);
  }
  .ins__p{ max-inline-size:64ch }
}

/* ==========================================================================
   3 · O CEO

   Não é uma fotografia rectangular ao lado de um texto. A fotografia entra
   por baixo do bloco da frase, que a monta e a atravessa; as aspas são um
   elemento gráfico em corpo enorme, atrás do texto; e uma moldura técnica
   aberta amarra os dois.

   A fotografia não leva efeito nenhum além do recorte — nem brilho, nem
   duotone, nem deformação. A tecnologia desta página está na composição,
   nunca sobre a pessoa.
   ========================================================================== */
.ceo{
  position:relative; overflow:hidden;
  /* COMPACTA. Estava com 100px de respiro em cima e em baixo e uma
     fotografia sem tecto de largura: a 1440 a secção passava dos 1000px de
     altura e lia-se como um banner. O conteúdo é uma frase, uma assinatura e
     um retrato — não precisa de um ecrã. */
  padding-block:clamp(46px,5.2vw,70px);
  color:var(--on-dark);
  background:var(--grad-dark);
}
.ceo::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 62% at 78% 34%, rgba(7,210,210,.11), transparent 68%),
    radial-gradient(48% 52% at 8% 92%, rgba(2,115,115,.14), transparent 70%);
}
/* A grelha técnica, ao nível do ruído: dá chão à composição sem se anunciar. */
.ceo::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(110,245,245,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(110,245,245,.05) 1px, transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(78% 76% at 46% 50%, transparent 26%, #000 82%);
  mask-image:radial-gradient(78% 76% at 46% 50%, transparent 26%, #000 82%);
}
.ceo__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(26px,3vw,44px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:900px){
  /* 45 / 55 — o texto e a fotografia com pesos próximos. A fotografia
     continua a ser a maior das duas, e deixou de ser a secção inteira. */
  .ceo__grid{ grid-template-columns:minmax(0,0.82fr) minmax(0,1fr) }
}
.ceo__bloco{ position:relative; min-inline-size:0 }
/* As ASPAS. Atrás do texto, cortadas em cima pela margem: um sinal de
   pontuação usado como elemento de composição. Encolheram com a frase — a
   260px de corpo passavam a ser o maior objecto da secção. */
.ceo__aspas{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  inset-block-start:clamp(-44px,-3.2vw,-26px); inset-inline-start:-.06em;
  font-family:var(--display); font-weight:700; line-height:.7;
  font-size:clamp(110px,14vw,180px);
  color:rgba(7,210,210,.13);
}
/* A frase mantém presença e perde exagero: de 40px para 34 no tecto. O que
   lhe dá peso é a medida curta e o contraste com o fundo, não o corpo. */
.ceo__frase{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:500; letter-spacing:-.026em;
  font-size:clamp(21px,2.8vw,34px); line-height:1.22; color:#fff;
  text-wrap:balance;
}
/* A assinatura: filete, nome e papel. */
.ceo__assin{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:14px;
  margin-block-start:clamp(18px,2.2vw,26px);
}
.ceo__assin::before{
  content:""; flex:none; inline-size:clamp(28px,3.4vw,46px); block-size:2px;
  background:linear-gradient(90deg,var(--cyan),rgba(7,210,210,.1));
}
/* `<cite>` vem em itálico por omissão do navegador. É o elemento certo para
   quem assina, mas o itálico não é: o nome de uma pessoa não é um título de
   obra, e a fonte de display não tem itálico verdadeiro — o navegador
   inclinava a romana. */
.ceo__assin cite{ font-style:normal }
.ceo__nome{
  display:block;
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(15px,1.7vw,18px); color:#fff;
}
.ceo__papel{
  display:block; margin-block-start:3px;
  font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cyan-lit);
}

/* --- a fotografia ---------------------------------------------------------
   Numa moldura com cantos abertos — dois filetes em cada canto, não uma
   borda fechada. Uma borda fechada faz um cartão; cantos abertos fazem um
   enquadramento, que é o que um recorte editorial é.

   O TECTO DE LARGURA é o que trava a secção. O ficheiro entregue tem 1160px
   de largo e a moldura acompanhava-o: a fotografia sozinha ocupava 560px de
   altura e puxava a secção para lá dos mil. A 4:5, 420px de largura dão 525
   de altura e a composição fecha-se. */
.ceo__foto{
  position:relative; justify-self:center; margin:0;
  inline-size:100%; max-inline-size:clamp(300px,34vw,430px);
}
.ceo__foto img{
  inline-size:100%; block-size:auto; display:block;
  border-radius:clamp(10px,1.2vw,16px);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(110,245,245,.14);
}
.ceo__foto::before,
.ceo__foto::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  inline-size:clamp(28px,3.2vw,44px); block-size:clamp(28px,3.2vw,44px);
  border:2px solid var(--cyan);
  opacity:.75;
}
.ceo__foto::before{
  inset-block-start:clamp(-9px,-.9vw,-6px); inset-inline-start:clamp(-9px,-.9vw,-6px);
  border-inline-end:0; border-block-end:0; border-start-start-radius:8px;
}
.ceo__foto::after{
  inset-block-end:clamp(-9px,-.9vw,-6px); inset-inline-end:clamp(-9px,-.9vw,-6px);
  border-inline-start:0; border-block-start:0; border-end-end-radius:8px;
}

/* ==========================================================================
   4 · A CHAMADA

   O conteúdo é o da página antiga — a frase e o botão "Começar". O desenho é
   o componente actual: degradê institucional, luz que sobe do pé, cantos a
   escurecer, o símbolo por cima. A faixa chapada com o botão de plástico
   ficou na página antiga.
   ========================================================================== */
.chamada{
  position:relative; overflow:hidden;
  padding-block:clamp(52px,6.2vw,84px);
  color:var(--on-dark); text-align:center;
  background:
    radial-gradient(46% 58% at 50% 104%, rgba(190,255,255,.2), transparent 66%),
    radial-gradient(74% 110% at 50% -8%, rgba(7,210,210,.16), transparent 60%),
    linear-gradient(104deg, transparent 26%, rgba(255,255,255,.045) 26%, rgba(255,255,255,.045) 41%, transparent 41%),
    linear-gradient(104deg, transparent 62%, rgba(0,0,0,.1) 62%, rgba(0,0,0,.1) 79%, transparent 79%),
    linear-gradient(158deg,#046a6d 0%,#03565c 30%,#02383f 62%,#031a1f 100%);
}
.chamada::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(86% 120% at 50% 46%, transparent 42%, rgba(1,14,18,.42) 100%);
}
.chamada::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain); opacity:.06; mix-blend-mode:overlay;
}
.chamada__in{ position:relative; z-index:2; max-inline-size:760px; margin-inline:auto }
.chamada__dna{
  inline-size:clamp(72px,7.4vw,98px); block-size:auto;
  margin:0 auto clamp(14px,1.8vw,20px);
  filter:drop-shadow(0 10px 18px rgba(1,20,24,.5));
}
@media (prefers-reduced-motion:no-preference){
  .chamada__dna{ animation:cham-flutua 7s ease-in-out infinite }
}
@keyframes cham-flutua{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
.chamada__t{
  font-family:var(--display); font-weight:700; letter-spacing:-.028em;
  font-size:clamp(25px,4.2vw,44px); line-height:1.1; color:#fff;
  text-wrap:balance;
}
.chamada .actions{ justify-content:center; margin-block-start:clamp(24px,3vw,34px) }
.chamada .btn{
  min-block-size:58px; padding-inline:44px; font-size:16.5px;
  background:linear-gradient(160deg,var(--cyan-lit),var(--cyan) 52%,#049fa0); color:#02272c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(7,210,210,.35),0 12px 32px -12px rgba(7,210,210,.9);
}
.chamada .btn::after{ background:radial-gradient(closest-side, rgba(7,210,210,.95), transparent 74%) }


/* ==========================================================================
   5 · MISSÃO · VISÃO · VALORES

   Não é o slider antigo — o bloco teal quadrado, o rectângulo branco com o
   título dentro, a fotografia sobreposta e as setas pretas enormes a
   flutuar. É uma peça editorial: fotografia e texto lado a lado no largo,
   controlos numa barra junto ao conteúdo.

   AS TRÊS IMAGENS SÃO AS ENTREGUES. As composições de linha que aqui
   estiveram foram removidas com o ficheiro que as desenhava; a fotografia
   passa a ser o elemento com mais peso da secção, que é o que faltava.

   O TELEMÓVEL TEM ARRANJO PRÓPRIO. Ver o bloco no fim deste ficheiro: não é
   esta composição encolhida.
   ========================================================================== */
.pil{
  position:relative; overflow:hidden;
  padding-block:clamp(58px,7.2vw,96px);
  background:var(--paper);
}
.pil::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56% 42% at 100% 4%, rgba(2,115,115,.06), transparent 66%),
    radial-gradient(46% 40% at 0% 96%, rgba(2,115,115,.05), transparent 68%);
}
.pil__head{ margin-block-end:clamp(30px,3.8vw,46px) }

.pil__palco{ position:relative; z-index:2 }
/* A altura é medida em JS a partir do diapositivo activo (ver `sobre.js`) e
   fica aqui a transição. Sem ela, o palco tomava a altura do mais alto e o
   diapositivo mais curto ficava com um vão por baixo do texto — 230px de
   nada, num telemóvel. `overflow:hidden` é o que impede o conteúdo do
   diapositivo mais alto de assomar por baixo durante a passagem. */
.pil__deck{
  position:relative; display:grid; overflow:hidden;
  transition:block-size .46s var(--ease);
}
@media (prefers-reduced-motion:reduce){ .pil__deck{ transition:none } }
/* Todos os diapositivos na mesma célula da grelha: é o que os empilha sem
   posicionamento absoluto, e a altura do conjunto passa a ser a do mais
   alto — sem salto ao trocar. */
.pil__slide{
  grid-area:1/1;
  /* `align-self:start` e não o esticar por omissão. Um item de grelha estica
     para a altura da célula, e a célula tem a altura do diapositivo mais
     alto: medir a altura de um diapositivo devolvia sempre a do palco, e o
     ajuste de altura em JS media-se a si próprio. Com `start`, cada um mede
     o seu conteúdo. */
  align-self:start;
  display:grid; gap:clamp(24px,3.4vw,52px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  opacity:0; visibility:hidden; translate:0 14px;
  transition:opacity .5s var(--ease), translate .5s var(--ease), visibility 0s .5s;
}
.pil__slide.is-on{
  opacity:1; visibility:visible; translate:0 0;
  transition:opacity .5s var(--ease), translate .5s var(--ease), visibility 0s;
}
@media (min-width:900px){
  /* A fotografia leva a fatia maior: é ela o elemento com mais presença da
     secção, e antes ficava em pé de igualdade com o texto. */
  .pil__slide{
    grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
    /* AS DUAS COLUNAS ANCORAM NO TOPO. Com `center`, a fotografia era
       centrada contra uma linha cuja altura vem do TEXTO — e o texto dos
       Valores tem três parágrafos. Ao passar para esse diapositivo a
       fotografia descia 55px sozinha: era esse o salto. Ancoradas no topo,
       a imagem começa no mesmo pixel nos três. */
    align-items:start;
  }
  /* A imagem primeiro no DOM — é o que dá a ordem certa no telemóvel — e à
     direita no ecrã largo, onde a leitura começa pelo texto. */
  .pil__arte{ order:2 }
  .pil__texto{ order:1 }
}
.pil__texto{ min-inline-size:0 }
.pil__conta{
  display:inline-block;
  font-family:var(--display); font-weight:500; letter-spacing:.08em;
  font-size:13px; color:var(--text-soft);
  font-variant-numeric:tabular-nums;
}
.pil__conta b{ font-weight:700; color:var(--teal) }
.pil__nome{
  margin-block-start:10px;
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(30px,4.4vw,52px); line-height:1; color:var(--text);
}
.pil__nome::after{
  content:""; display:block; inline-size:56px; block-size:2px;
  margin-block-start:clamp(16px,2vw,22px);
  background:linear-gradient(90deg,var(--teal),rgba(2,115,115,.1));
}
.pil__p{
  margin-block-start:clamp(16px,2vw,22px); max-inline-size:52ch;
  font-size:clamp(15.5px,1.7vw,17px); line-height:1.68; color:var(--text-soft);
}
/* O texto entra depois da imagem, e um pouco atrasado em relação a ela: é o
   que faz a passagem parecer uma troca de página e não um corte. */
.pil__slide.is-on .pil__texto > *{ animation:pil-entra .55s var(--ease) backwards }
.pil__slide.is-on .pil__texto > *:nth-child(2){ animation-delay:.06s }
.pil__slide.is-on .pil__texto > *:nth-child(3){ animation-delay:.12s }
.pil__slide.is-on .pil__texto > *:nth-child(4){ animation-delay:.16s }
.pil__slide.is-on .pil__texto > *:nth-child(5){ animation-delay:.2s }
@keyframes pil-entra{ from{ opacity:0; translate:0 12px } }
@media (prefers-reduced-motion:reduce){
  .pil__slide,.pil__slide.is-on .pil__texto > *{ animation:none; transition:opacity .01s }
}

/* --- a fotografia --------------------------------------------------------
   As três estão gravadas na mesma proporção, 16:10, e a moldura fixa-a com
   `aspect-ratio`. É isso que impede o palco de saltar de altura entre
   diapositivos — e é também o que garante que uma imagem trocada mais tarde
   por outra de proporção diferente não parte a composição. */
.pil__arte{
  position:relative; overflow:hidden; min-inline-size:0; margin:0;
  border-radius:clamp(16px,2vw,24px);
  aspect-ratio:16/10;
  background:linear-gradient(158deg,#0b3238,#02121a);
  /* A SOMBRA. Três camadas e não uma: um contacto curto e escuro logo por
     baixo da aresta, uma queda larga e suave mais abaixo, e um fio de
     contorno. É o par contacto/queda que dá a leitura de objecto pousado —
     uma sombra sozinha, por muito grande, lê-se como um borrão colado.

     Deslocada só na vertical, e nunca em teal: uma sombra colorida por baixo
     de uma fotografia denuncia-se como efeito. */
  box-shadow:
    0 2px 6px -2px rgba(1,24,30,.34),
    0 18px 30px -22px rgba(1,24,30,.5),
    0 44px 68px -40px rgba(1,24,30,.55),
    0 0 0 1px rgba(11,29,31,.07);
}
.pil__arte img{
  inline-size:100%; block-size:100%; display:block;
  object-fit:cover;
}
/* Um véu de marca muito ténue por cima da fotografia, do canto de baixo. Não
   é filtro sobre a imagem: é o que a liga ao teal da página sem lhe tocar na
   cor — as três chegam já com a gradação certa. */
.pil__arte::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(14deg, rgba(2,55,62,.28), transparent 46%);
}

/* --- a barra de controlos -------------------------------------------------
   Setas nas pontas e a contagem ao centro. Junto ao conteúdo, não a flutuar
   longe dele — e nada de setas pretas do tamanho da fotografia. */
.pil__barra{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2vw,26px);
  margin-block-start:clamp(26px,3.2vw,38px);
  padding-block-start:clamp(18px,2.2vw,24px);
  border-block-start:1px solid var(--rule);
}
.pil__pontos{ display:flex; align-items:center; gap:clamp(6px,1vw,12px) }
/* O alvo de toque é o botão inteiro, 44px; o que se vê é o numeral. Números
   e não pontos: com três diapositivos, "01 02 03" diz quantos são e onde se
   está, o que um trio de pontos de oito pixéis não diz. */
.pil__pontos button{
  display:grid; place-items:center;
  min-inline-size:46px; block-size:44px;
  font-family:var(--display); font-weight:700;
  font-size:14px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--text-soft);
  border-block-end:2px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.pil__pontos i{ font-style:normal }
.pil__pontos button:hover{ color:var(--teal) }
.pil__pontos button[aria-selected="true"]{
  color:var(--teal-deep); border-block-end-color:var(--teal);
}
.pil__seta{
  flex:none;
  display:grid; place-items:center;
  inline-size:46px; block-size:46px; border-radius:50%;
  color:var(--teal);
  border:1.5px solid rgba(2,115,115,.26);
  transition:border-color .24s, background-color .24s, transform .24s var(--ease);
}
.pil__seta:hover{ border-color:var(--teal); background:rgba(2,115,115,.07) }
.pil__seta[data-passo="-1"]:hover{ transform:translateX(-2px) }
.pil__seta[data-passo="1"]:hover{ transform:translateX(2px) }
.pil__seta svg{ inline-size:17px; block-size:17px }

/* --- O TELEMÓVEL ---------------------------------------------------------
   Arranjo próprio, e não a composição de duas colunas espremida.

     IMAGEM, à largura toda
     ↓
     01 / 03  ·  VALORES
     ↓
     texto
     ↓
     ←   01 02 03   →

   A imagem vem primeiro porque é o que identifica o diapositivo de relance,
   e ocupa a largura disponível inteira: uma miniatura ao lado de texto é
   exactamente o que esta secção não pode ser. O texto mantém o corpo do
   desktop — Missão, Visão e Valores são textos longos, e encolher a letra
   para caber é resolver o problema errado.

   UM DE CADA VEZ, sem espreitar o seguinte: os diapositivos estão empilhados
   na mesma célula de grelha, e por isso nunca há um segundo cartão cortado
   na margem. */
@media (max-width:899px){
  .pil__slide{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(20px,4.6vw,28px);
    /* O deck tem a altura do diapositivo mais alto — o dos Valores, com três
       parágrafos. Empacotadas no topo, a folga dos mais curtos vai toda para
       baixo, onde não separa nada; esticadas, aparecia como um vão entre a
       imagem e o título. */
    align-content:start;
  }
  /* A imagem já vem primeiro no DOM: no estreito não há `order` nenhum a
     contrariá-lo. */
  .pil__arte{ order:0 }
  .pil__texto{ order:0 }
  /* Um pouco mais alta do que no desktop: em retrato, 16:10 fica baixa
     demais para a fotografia ter presença. */
  .pil__arte{ aspect-ratio:4/3; border-radius:clamp(14px,3.4vw,20px) }
  .pil__nome{ font-size:clamp(29px,8.4vw,38px) }
  .pil__nome::after{ margin-block-start:clamp(12px,3.2vw,16px) }
  .pil__p{ font-size:16px; line-height:1.7; max-inline-size:none }
  /* A contagem e o título na mesma linha: poupa uma altura e diz as duas
     coisas de uma vez. */
  .pil__texto{ display:grid; gap:2px }
  .pil__conta{ font-size:12.5px }
  .pil__barra{
    justify-content:space-between;
    gap:12px;
    margin-block-start:clamp(22px,5vw,30px);
    padding-block-start:clamp(16px,4vw,22px);
  }
  .pil__pontos{ gap:4px }
}

/* ==========================================================================
   6 · OS NÚMEROS — o componente da Home

   Não há regras aqui. A secção usa `.tally` de `home-editorial.css`, com a
   mesma marcação da Home: `.tally__marca`, `.tally__head`, `.tally__figs` e
   `.fig` com `<b>`, filete e rótulo.

   A versão anterior desta página tinha layout próprio — `.nums`, `.num__n`,
   `.num__p` — com um parágrafo longo debaixo de cada número. Era outra peça
   a fazer o mesmo trabalho, e duas peças para o mesmo trabalho divergem
   sempre: foi assim que a montra e o rodapé se separaram, duas vezes, antes
   de serem unificados.
   ========================================================================== */