/* ==========================================================================
   layout.css — estrutura e ritmo vertical, valores tirados do XD
   Todas as medidas são "unidades de maquete" × --u.
   ========================================================================== */

#page {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
}

/* Grelha da maquete: 1640 de conteúdo, 140 de margem cada lado (1920 total) */
.container {
  width: calc(var(--container-w) * var(--u));
  max-width: calc(100% - 2 * var(--gutter) * var(--u));
  margin-inline: auto;
}

.section { position: relative; }
.section--dark { background: var(--color-primary); color: var(--color-white); }
.section--light { background: var(--color-white); color: var(--color-primary); }

/* ==========================================================================
   HEADER — XD: top 0, 1920×96, gradiente 90°, opacidade 0.9
   Ago/2026: passou a acompanhar o scroll em todas as larguras.

   Porquê `sticky` e não `fixed`: o #page tem `container-type: inline-size`,
   que implica `contain: layout` — e isso faz do #page o bloco de referência
   de qualquer descendente `fixed`. Uma barra `fixed` aqui dentro ficaria
   presa ao topo do #page e não acompanhava o scroll. O sticky não depende
   disso, mas exige que o elemento esteja no fluxo normal.

   A margem negativa resolve o efeito colateral: com o header no fluxo, o
   hero era empurrado 96px para baixo e toda a maquete descia. Com
   `margin-block-end` igual a menos a altura, a barra ocupa zero espaço e
   volta a sobrepor-se ao hero exactamente como no XD — os 78 pontos de
   geometria continuam a bater certo.
   ========================================================================== */
.site-header {
  position: sticky;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: calc(var(--header-h) * var(--u));
  margin-block-end: calc(-1 * var(--header-h) * var(--u));
  background: var(--gradient-header);
  opacity: 0.9;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Em repouso mantém os 0.9 do XD, sobre o hero. Assim que descola do topo
   fica opaca: uma barra translúcida a passar por cima de cards e texto
   deixa transparecer 10% do conteúdo em movimento, e isso lê-se como erro.
   A sombra é o que separa a barra do conteúdo quando ela flutua. */
.site-header.is-stuck {
  opacity: 1;
  box-shadow: 0 calc(2 * var(--u)) calc(14 * var(--u)) rgb(0 0 0 / 0.18);
}
/* Sentinela de 1px no topo do documento: quando sai do ecrã, a barra
   descolou. Fora do fluxo, não ocupa espaço nem é clicável. */
.header-sentinel {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  pointer-events: none;
}

/* Com uma barra fixa no topo, uma âncora deixaria o título da secção
   escondido por baixo dela. O scroll-margin desconta a altura da barra. */
section[id], main[id], [id="top"] {
  scroll-margin-block-start: calc(var(--header-h) * var(--u));
}
.site-header__inner {
  position: relative;
  height: 100%;
}
/* logo: XD top 17, left 51, 171×61 */
.site-header__logo {
  position: absolute;
  inset-block-start: calc(17 * var(--u));
  inset-inline-start: calc(51 * var(--u));
  width: calc(var(--logo-w) * var(--u));
  height: calc(var(--logo-h) * var(--u));
}
.site-header__logo img { width: 100%; height: 100%; }

/* botão hamburger: XD top 38, left 1810, 40×20 */
.nav-toggle {
  position: absolute;
  inset-block-start: calc(28 * var(--u));
  inset-inline-end: calc(70 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: grid;
  align-content: center;
  gap: calc(5.5 * var(--u));
}
.nav-toggle__bar {
  display: block;
  width: calc(40 * var(--u));
  height: calc(3 * var(--u));
  background: var(--color-white);
  border-radius: calc(2 * var(--u));
}

/* ==========================================================================
   SELECTOR DE IDIOMA — Set/2026. Não existe no XD, é desenho nosso.
   Assenta à esquerda do hamburger sem deslocar nada: o logo e o hamburger
   ficam nas coordenadas do XD e os 78 pontos de geometria continuam a bater.
   138 = 70 (margem do hamburger) + 40 (largura dele) + 28 de intervalo.
   ========================================================================== */
.lang-switch {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-end: calc(138 * var(--u));
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: calc(0.5 * var(--u));
  color: var(--color-white);
}
.lang-switch a {
  color: inherit;
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease);
}
.lang-switch a:hover,
.lang-switch a:focus-visible { opacity: 1; }
.lang-switch [aria-current] { opacity: 1; }
.lang-switch__sep { opacity: 0.4; font-weight: var(--fw-regular); }

/* ==========================================================================
   HERO — versão 2 (Group 253.svg enviado pelo cliente, Ago 2026)
   Substitui o hero fotográfico do XD original.

   O SVG do cliente é um quadrado de 1380×1380 com três camadas:
     · PNG embebido 3208×3208 (794 KB) — o losango e o brilho
     · o H1 em contornos vectoriais (Lato Bold, ~83 un, entrelinha 102)
     · "Relatório & Contas / 2025" em <text> Lato 36 / 42, #fff e #00ABE7

   Aqui só se usa a camada gráfica, já composta sobre o azul do fundo e
   convertida para WebP (1380², 23 KB em vez de 794 KB). Os dois textos são
   HTML real — indexáveis, seleccionáveis, traduzíveis e reflowáveis.

   Coordenadas originais dentro do quadrado de 1380 (baseline das linhas):
     H1 linha 1 ....... y 639,3   ·  centro x 690
     "Relatório…" ..... y 892,4
     "2025" ........... y 941,4
   Todo o hero escala a partir de UMA medida, --hero-side (o lado do
   quadrado). --hero-k é essa medida dividida por 1380, portanto qualquer
   número tirado do SVG multiplica-se por --hero-k e cai no sítio certo,
   seja --hero-side dado em unidades de maquete (desktop) ou em cqw
   (tablet e mobile). Verificado contra o render do SVG do cliente a 1920:
   desvio máximo de 1px em posição e 3px em largura de linha.
   ========================================================================== */
.hero {
  --hero-side: calc(var(--hero-shape) * var(--u));
  --hero-k: calc(var(--hero-side) / 1380);
  position: relative;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: var(--color-primary);
}
/* O WebP já traz o fundo #27348A composto: assenta no azul sem costura
   (desvio máximo medido na fronteira: 3/255). */
.hero__shape {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--hero-side);
  height: var(--hero-side);
  translate: -50% -50%;
}
.hero__shape img { display: block; width: 100%; height: 100%; }

.hero__content {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  /* topo do quadrado + deslocamento até à caixa de linha do H1 */
  inset-block-start: calc(50% - var(--hero-side) / 2 + 556.6 * var(--hero-k));
  text-align: center;
  color: var(--color-white);
  text-wrap: balance;
}
.hero__title {
  font-size: calc(83.1 * var(--hero-k));
  line-height: 1.2274;                 /* 102 ÷ 83,1 — entrelinha do SVG */
  font-weight: var(--fw-bold);
  color: inherit;
}
/* baseline "Relatório & Contas" a 892,4 − 639,3 = 253,1 do baseline do H1 */
.hero__kicker {
  margin-block-start: calc(97 * var(--hero-k));
  font-size: calc(36 * var(--hero-k));
  line-height: 1.2222;                 /* 44 ÷ 36 */
  font-weight: var(--fw-regular);
  color: inherit;
}
.hero__year {
  display: block;
  margin-block-start: calc(1.5 * var(--hero-k));
  font-size: calc(42 * var(--hero-k));
  line-height: 1.1667;                 /* 49 ÷ 42 */
  color: var(--color-accent);
}

/* ==========================================================================
   SECÇÃO MENSAGEM DO CA — XD: 1080..2160, imagem 1920×1080
   h2 top 1229 (rel 149) / left 1106 · nomes rel 549 · botão rel 802
   ========================================================================== */
.mensagem {
  position: relative;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: var(--color-primary);
}
.mensagem__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mensagem__content {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(149 * var(--u));
  inset-inline-start: calc(1106 * var(--u));
  width: calc(700 * var(--u));
}
.mensagem__title {
  font-size: calc(var(--fs-display-alt) * var(--u));
  line-height: var(--lh-display-alt);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}
/* nomes: top 1629 − (1229 + 318) = 82 de intervalo */
.mensagem__people {
  margin-block-start: calc(82 * var(--u));
  font-size: calc(var(--fs-name) * var(--u));
  line-height: var(--lh-name);
}
.mensagem__people li + li { margin-block-start: calc(40 * var(--u)); }
.mensagem__people .name { display: block; font-weight: var(--fw-bold); color: var(--color-white); }
.mensagem__people .role { display: block; font-weight: var(--fw-regular); color: var(--color-accent); }
/* botão: top 1882. O bloco de nomes ocupa 5 linhas × 40 = 200 (o XD reporta
   189 porque não conta o descendente da última linha) → 53 de intervalo */
.mensagem__cta { margin-block-start: calc(53 * var(--u)); }

/* ==========================================================================
   PRINCIPAIS INDICADORES — XD: 2160..3160 (1000)
   h2 2256 (rel 96) · régua 2336 · cards 2422 e 2751 (313 alt.)
   ========================================================================== */
.indicadores { padding-block: calc(96 * var(--u)); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(16 * var(--u));
  margin-block-start: calc(80 * var(--u));
}

/* ==========================================================================
   O BPC — XD: 3160..4240 (1080), fundo #27348A
   h2 3184 (rel 24) · régua 3264 · cards 3334
   coluna esq.: 468 + 40 + 308  ·  coluna dir.: 358 + 40 + 378
   ========================================================================== */
.obpc { padding-block: calc(24 * var(--u)) calc(90 * var(--u)); }

.obpc__grid {
  display: grid;
  grid-template-columns: repeat(2, calc(800 * var(--u)));
  justify-content: space-between;
  align-items: start;
  gap: calc(40 * var(--u));
  margin-block-start: calc(64 * var(--u));
}
.obpc__col { display: grid; gap: calc(40 * var(--u)); align-content: start; }

/* ==========================================================================
   RESULTADOS — XD: 4240..5330
   h2 4335 (rel 95) · régua 4415 · barras assentam na linha 5312 (18 alt.)
   colunas de 535, contíguas, de 140 a 1745
   ========================================================================== */
.resultados { padding-block-start: calc(95 * var(--u)); }

.chart {
  margin-block-start: calc(44 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, calc(535 * var(--u)));
  justify-content: start;
  align-items: end;
  width: calc(1605 * var(--u));
  max-width: 100%;
}
.chart__col { display: flex; flex-direction: column; }
.chart__label {
  font-size: calc(var(--fs-lead) * var(--u));
  line-height: var(--lh-lead);
  font-weight: var(--fw-regular);
  text-align: center;
}
.chart__value {
  font-size: calc(var(--fs-kpi) * var(--u));
  line-height: var(--lh-kpi-tall);
  font-weight: var(--fw-black);
  text-align: center;
}
.chart__value .unit {
  font-size: calc(var(--fs-kpi-unit) * var(--u));
  font-weight: var(--fw-bold);
}
.chart__bar { width: 100%; }
/* Alturas proporcionais aos valores. O XD desenhou-as a escala — 677/1216,
   235/420 e 163/291 dão 0,557 nas três — por isso quando os valores mudam as
   alturas TÊM de mudar com eles, senão o gráfico mente.
   Emenda de Ago/2026: 1 216 → 1 291 e 291 → 287. A escala fica ancorada na
   barra maior, que se mantém nos 677 do XD para a altura da secção não se
   mover (as colunas são align-items: end).
     Recursos de Clientes  1 291 → 677  (677 × 1291/1291)
     Crédito a Clientes      420 → 220  (677 ×  420/1291)
     Fundos Próprios         287 → 151  (677 ×  287/1291)  */
.chart__col--1 { color: var(--color-accent); }
.chart__col--1 .chart__bar { height: calc(677 * var(--u)); background: var(--color-accent); }
.chart__col--2 { color: var(--color-blue-mid); }
.chart__col--2 .chart__bar { height: calc(220 * var(--u)); background: var(--color-blue-mid); }
.chart__col--3 { color: var(--color-primary); }
.chart__col--3 .chart__bar { height: calc(151 * var(--u)); background: var(--color-primary); }

/* Barras a subir e números em contador quando a secção entra no ecrã.
   O scaleY é de propósito em vez de height: transform não força relayout,
   por isso não há CLS nem trabalho de layout a cada frame.
   O estado colapsado é posto pelo JS no momento de animar, nunca no CSS —
   sem JS as barras aparecem na altura final, como devem. */
.chart__bar { transform-origin: bottom; }
.chart__bar.a-subir { transform: scaleY(0); }
.chart__bar.a-subir-ativo {
  transform: scaleY(1);
  transition: transform 900ms var(--ease-out);
}
/* Enquanto conta, o número muda de nº de dígitos: sem largura reservada
   deslocava o "Kz" e o "mM" a cada frame. O JS mede a largura final. */
.num { display: inline-block; text-align: center; }

.chart__baseline {
  height: calc(18 * var(--u));
  background: var(--color-primary);
}

/* ==========================================================================
   PLANO ESTRATÉGICO — XD: 5330..6321
   h2 5426 (rel 96) · régua 5506 · cards 5608 e 5994, 720×268
   colunas em 140 e 1059 (goteira central de 199 para o símbolo)
   ========================================================================== */
.plano { padding-block: calc(96 * var(--u)) calc(59 * var(--u)); }

/* Parágrafo de abertura (Set/2026, pedido do cliente). Não vem do XD — lá o
   título ia directamente à grelha. Usa a coluna de texto corrido centrada e o
   mesmo corpo do bloco escuro (24/35), para ler como parte do cabeçalho da
   secção e não como um card solto. */
.plano__intro {
  width: calc(var(--text-col-w) * var(--u));
  max-width: 100%;
  margin-block-start: calc(54 * var(--u));
  margin-inline: auto;
  font-size: calc(var(--fs-body) * var(--u));
  line-height: var(--lh-body);
  text-align: center;
  text-wrap: pretty;
}
/* A grelha mantém os 96 do XD. Não é inércia: o ícone do card sobe 55 acima da
   caixa, portanto 96 deixa 41px entre o parágrafo e o ícone — exactamente a
   distância que o XD tinha entre a régua e o ícone (5553 − 5512). O parágrafo
   herda o ritmo do elemento que substituiu naquela posição. */

.plano__grid {
  position: relative;
  margin-block-start: calc(96 * var(--u));
  display: grid;
  grid-template-columns: repeat(2, calc(720 * var(--u)));
  justify-content: space-between;
  column-gap: calc(199 * var(--u));
  row-gap: calc(118 * var(--u));
}
/* símbolo central: 382×382, centrado em x=960 e no eixo entre as duas linhas */
.plano__symbol {
  position: absolute;
  inset-inline-start: 50%;
  /* XD: top 5746 — 4px abaixo do centro geométrico da grelha */
  inset-block-start: calc(50% + 4 * var(--u));
  translate: -50% -50%;
  width: calc(382 * var(--u));
  height: calc(382 * var(--u));
  pointer-events: none;
}

/* ==========================================================================
   BLOCO DE TEXTO — XD: 6321..6809 (488), fundo #273487
   parágrafo 6375 (rel 54), left 416, 1088 de largura, 24/35
   ========================================================================== */
.texto-bloco { padding-block: calc(54 * var(--u)) calc(49 * var(--u)); }
.texto-bloco__inner {
  width: calc(var(--text-col-w) * var(--u));
  max-width: 100%;
  margin-inline: auto;
}
.texto-bloco p {
  /* explícito e não herdado do <body>, que vive fora do #page */
  font-size: calc(var(--fs-body) * var(--u));
  line-height: var(--lh-body);
}
.texto-bloco p + p { margin-block-start: calc(35 * var(--u)); }

/* ==========================================================================
   CARDS DE EXECUÇÃO — XD: 6809..7602
   cards 6849, 371×677, em 140 / 551 / 962 / 1373 (intervalo 40)
   ========================================================================== */
.execucao { padding-block: calc(40 * var(--u)) calc(76 * var(--u)); }
.execucao__grid {
  display: grid;
  grid-template-columns: repeat(4, calc(371 * var(--u)));
  justify-content: start;
  gap: calc(40 * var(--u));
  width: calc(1604 * var(--u));
  max-width: 100%;
}

/* ==========================================================================
   RODAPÉ — XD: 7602..8309 (707), fundo #273487
   kicker 7698 (rel 96) · h2 7835 · parágrafo 8025 · botão 8162
   texto a left 106, botão a left 102
   ========================================================================== */
.site-footer { padding-block: calc(96 * var(--u)) calc(67 * var(--u)); }
.site-footer__inner {
  padding-inline-start: calc(var(--gutter-footer) * var(--u));
  padding-inline-end: calc(60 * var(--u));
}
.site-footer__kicker {
  font-size: calc(var(--fs-kicker) * var(--u));
  line-height: var(--lh-kicker);
}
.site-footer__title {
  margin-block-start: calc(49 * var(--u));
  font-size: calc(var(--fs-display) * var(--u));
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
}
.site-footer__text {
  margin-block-start: calc(75 * var(--u));
  font-size: calc(var(--fs-body-lg) * var(--u));
  line-height: var(--lh-body-lg);
}
.site-footer__cta {
  margin-block-start: calc(69 * var(--u));
  margin-inline-start: calc(-4 * var(--u)); /* XD: botão a 102, texto a 106 */
}

/* ==========================================================================
   PÁGINA MENSAGEM DO CA (artboard 2, 1920×4947)
   ========================================================================== */
.hero-msg {
  position: relative;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: var(--color-primary);
}
.hero-msg__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-msg__content {
  position: absolute; z-index: 1;
  inset-block-start: calc(141 * var(--u));
  inset-inline-start: calc(var(--gutter) * var(--u));
  width: calc(780 * var(--u));
}
.hero-msg__title {
  font-size: calc(var(--fs-display) * var(--u));
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}
/* citação: top 611 − (141 + 345) = 125 de intervalo */
.hero-msg__quote {
  margin-block-start: calc(125 * var(--u));
  width: calc(527 * var(--u));
}

/* corpo: 1160..3500, coluna de 1088 centrada */
.mensagem-corpo { padding-block: calc(80 * var(--u)) calc(0 * var(--u)); }
.mensagem-corpo__inner {
  width: calc(var(--text-col-w) * var(--u));
  max-width: 100%;
  margin-inline: auto;
}
.mensagem-corpo p {
  font-size: calc(var(--fs-body) * var(--u));
  line-height: var(--lh-body);
}
.mensagem-corpo p + p { margin-block-start: calc(35 * var(--u)); }

/* pull-quote 3580 · assinatura 3808 · botão 4077 */
.mensagem-corpo__pullquote {
  margin-block-start: calc(76 * var(--u));
  margin-inline-start: calc(138 * var(--u));
  width: calc(812 * var(--u));
  max-width: 100%;
}
.mensagem-corpo__sign {
  margin-block-start: calc(78 * var(--u));
  font-size: calc(var(--fs-sig) * var(--u));
  line-height: var(--lh-sig);
}
.mensagem-corpo__sign li + li { margin-block-start: calc(40 * var(--u)); }
.mensagem-corpo__sign .name { display: block; font-weight: var(--fw-bold); color: var(--color-accent); }
.mensagem-corpo__sign .role { display: block; color: var(--color-primary); }
.mensagem-corpo__back {
  margin-block-start: calc(69 * var(--u));
  margin-block-end: calc(81 * var(--u));
  display: flex;
  justify-content: center;
  padding-inline-start: calc(80 * var(--u));
}