/* ==========================================================================
   responsive.css
   A maquete XD só tem artboards de 1920. Até 1200px a página é uma redução
   proporcional exacta do desenho (--u escala). Abaixo de 1200px o layout
   reflui e a escala tipográfica passa a ser baseada em rem, para que o
   zoom de texto do browser volte a funcionar.
   Nota para o Duarte: os breakpoints 768–1199 e < 768 são proposta nossa —
   não existem artboards para validar.
   ========================================================================== */

/* ==========================================================================
   TABLET  768 – 1199
   ========================================================================== */
@media (max-width: 1199px) {

  /* Os overrides vão em :root (não em #page) porque o <body> está fora do #page
     e há parágrafos que herdam dele o font-size — ver .texto-bloco p. */
  :root, #page, .nav-overlay {
    /* 1 unidade == 1px a 16px de root, mas escala com a preferência do utilizador */
    --u: 0.0625rem;
  }

  :root {
    --fs-display: 56;  --fs-display-alt: 48;  --fs-h2: 40;
    --fs-kpi: 64;      --fs-kpi-unit: 32;
    --fs-lead: 28;     --fs-quote: 28;
    --fs-pill: 30;     --fs-pill-unit: 22;    --fs-card-title: 24;
    --fs-kicker: 24;   --fs-body-lg: 20;      --fs-body: 18;
    --fs-name: 18;     --fs-sig: 18;          --fs-body-sm: 17;
    --fs-body-xs: 16;  --fs-btn: 20;          --fs-btn-sm: 16;
    --fs-plano-title: 19; --fs-plano-body: 16;

    --gutter: 48;  --gutter-hero: 48;  --gutter-footer: 48;
    --header-h: 76;  --logo-w: 137;  --logo-h: 49;
  }
  .nav-overlay { --fs-menu: 26; }

  .container { width: 100%; }

  /* ---- header ---------------------------------------------------------- */
  .site-header__logo {
    inset-block-start: calc(14 * var(--u));
    inset-inline-start: calc(var(--gutter) * var(--u));
  }
  .nav-toggle { inset-block-start: calc(18 * var(--u)); inset-inline-end: calc(var(--gutter) * var(--u)); }
  .nav-toggle__bar { width: calc(32 * var(--u)); }
  /* hamburger encosta ao gutter: 48 + 40 + 24 de intervalo */
  .lang-switch { inset-inline-end: calc(112 * var(--u)); font-size: calc(18 * var(--u)); }

  /* ---- hero v2 ---------------------------------------------------------
     Abaixo de 1200 o --u passa a ser rem, por isso o quadrado deixa de
     poder vir em unidades de maquete — passa a ser uma fracção da largura
     do #page (cqw e não vw, por causa da barra de scroll). O hero fica mais
     alto para o losango caber inteiro e o bloco de texto centra-se no
     losango, em vez de herdar o desalinhamento vertical do SVG. */
  .hero {
    aspect-ratio: 4 / 3;
    --hero-side: 76cqw;
  }
  .hero__content {
    inset-block-start: 50%;
    translate: 0 -50%;
  }
  .hero__kicker { margin-block-start: calc(78 * var(--hero-k)); }

  /* ---- mensagem CA ----------------------------------------------------- */
  .mensagem { aspect-ratio: auto; }
  .mensagem__media {
    position: static;
    width: 100%; height: auto;
    aspect-ratio: 16 / 10;
    object-position: 30% center;
  }
  .mensagem__content {
    position: static;
    width: 100%;
    padding: calc(48 * var(--u)) calc(var(--gutter) * var(--u)) calc(56 * var(--u));
  }
  .mensagem__title br { display: none; }
  .mensagem__people { margin-block-start: calc(32 * var(--u)); }
  .mensagem__people li + li { margin-block-start: calc(24 * var(--u)); }
  .mensagem__cta { margin-block-start: calc(36 * var(--u)); }

  /* ---- indicadores ----------------------------------------------------- */
  .indicadores { padding-block: calc(64 * var(--u)); }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(16 * var(--u));
    margin-block-start: calc(48 * var(--u));
  }
  .kpi {
    min-height: 0;
    padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u));
    border-radius: calc(20 * var(--u));
  }
  .kpi__value { margin-block-start: calc(16 * var(--u)); }

  /* ---- O BPC ----------------------------------------------------------- */
  .obpc { padding-block: calc(56 * var(--u)) calc(64 * var(--u)); }
  .obpc__grid {
    grid-template-columns: 1fr;
    gap: calc(24 * var(--u));
    margin-block-start: calc(48 * var(--u));
  }
  .obpc__col { gap: calc(24 * var(--u)); }
  .bpc-card { padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u)); }
  .bpc-card__pill { margin-block-start: calc(24 * var(--u)); }
  .bpc-card__text { margin-block-start: calc(24 * var(--u)); }
  .pill { min-height: calc(64 * var(--u)); border-radius: calc(32 * var(--u)); }

  /* ---- resultados ------------------------------------------------------ */
  .resultados { padding-block-start: calc(64 * var(--u)); }
  .chart {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: calc(40 * var(--u));
  }
  /* mesma escala do desktop: 280 × valor / 1291 */
  .chart__col--1 .chart__bar { height: calc(280 * var(--u)); }
  .chart__col--2 .chart__bar { height: calc(91 * var(--u)); }
  .chart__col--3 .chart__bar { height: calc(62 * var(--u)); }
  .chart__baseline { height: calc(10 * var(--u)); }

  /* ---- plano estratégico ----------------------------------------------- */
  .plano { padding-block: calc(64 * var(--u)); }
  /* o .container já dá a goteira (max-width: 100% - 2 × gutter), por isso aqui
     só se solta a largura fixa de 1088 e se passa a alinhamento à esquerda:
     texto corrido centrado em 3-4 linhas num telefone lê-se mal */
  .plano__intro {
    width: 100%;
    margin-block-start: calc(40 * var(--u));
    text-align: start;
  }
  .plano__grid {
    grid-template-columns: 1fr;
    row-gap: calc(88 * var(--u));
    margin-block-start: calc(72 * var(--u));
  }
  .plano__symbol { display: none; }
  .plano-card {
    min-height: 0;
    padding: calc(56 * var(--u)) calc(28 * var(--u)) calc(32 * var(--u));
  }
  .plano-card__icon { width: calc(88 * var(--u)); height: calc(88 * var(--u)); inset-block-start: calc(-44 * var(--u)); }
  .plano-card--left .plano-card__icon,
  .plano-card--right .plano-card__icon { inset-inline: calc(28 * var(--u)) auto; }
  .plano-card__text { max-width: none; margin-block-start: calc(16 * var(--u)); }

  /* ---- bloco de texto -------------------------------------------------- */
  .texto-bloco { padding-block: calc(56 * var(--u)); }
  .texto-bloco__inner {
    width: 100%;
    padding-inline: calc(var(--gutter) * var(--u));
  }
  .texto-bloco p + p { margin-block-start: calc(24 * var(--u)); }

  /* ---- cards de execução ----------------------------------------------- */
  .execucao { padding-block: calc(56 * var(--u)) calc(64 * var(--u)); }
  .execucao__grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(24 * var(--u));
  }
  .exec-card { min-height: 0; grid-template-rows: auto auto 1fr; padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u)); }
  .exec-card__connector { min-height: calc(28 * var(--u)); }
  .exec-card__text { margin-block-start: calc(20 * var(--u)); }

  /* ---- rodapé ---------------------------------------------------------- */
  .site-footer { padding-block: calc(64 * var(--u)); }
  .site-footer__inner {
    padding-inline: calc(var(--gutter) * var(--u));
  }
  .site-footer__title { margin-block-start: calc(24 * var(--u)); }
  .site-footer__text { margin-block-start: calc(32 * var(--u)); }
  .site-footer__text br { display: none; }
  .site-footer__cta { margin-block-start: calc(32 * var(--u)); margin-inline-start: 0; }

  /* ---- botões ---------------------------------------------------------- */
  .btn { height: calc(60 * var(--u)); border-radius: calc(30 * var(--u)); gap: calc(16 * var(--u)); }
  .btn--outline-light, .btn--outline-dark { width: auto; padding-inline: calc(24 * var(--u)) calc(18 * var(--u)); }
  .btn--pdf { width: auto; max-width: 100%; padding-inline: calc(20 * var(--u)); }
  .btn__icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .btn__arrow { width: calc(19 * var(--u)); height: calc(13 * var(--u)); }

  /* ---- overlay --------------------------------------------------------- */
  .nav-overlay { grid-template-columns: 1fr min(calc(560 * var(--u)), 88vw); }
  .nav-menu {
    padding-block-start: calc(120 * var(--u));
    padding-inline: calc(40 * var(--u)) calc(24 * var(--u));
  }
  .nav-menu li + li { margin-block-start: calc(36 * var(--u)); }
  .nav-menu a { width: 100%; padding-block-end: calc(14 * var(--u)); }
  .nav-menu__br { display: none; }
  .nav-overlay__actions { inset-block-start: calc(20 * var(--u)); inset-inline-end: calc(28 * var(--u)); }

  /* ---- página mensagem ------------------------------------------------- */
  .hero-msg { aspect-ratio: auto; }
  .hero-msg__media {
    position: static; width: 100%; height: auto;
    aspect-ratio: 16 / 10; object-position: 30% center;
  }
  .hero-msg__content {
    position: static; width: 100%;
    padding: calc(48 * var(--u)) calc(var(--gutter) * var(--u)) calc(56 * var(--u));
  }
  .hero-msg__title br { display: none; }
  .hero-msg__quote { width: 100%; margin-block-start: calc(32 * var(--u)); }
  .mensagem-corpo { padding-block: calc(56 * var(--u)) 0; }
  .mensagem-corpo__inner { width: 100%; padding-inline: calc(var(--gutter) * var(--u)); }
  .mensagem-corpo p + p { margin-block-start: calc(24 * var(--u)); }
  .mensagem-corpo__pullquote { width: 100%; margin-inline-start: 0; margin-block-start: calc(40 * var(--u)); }
  .mensagem-corpo__sign { margin-block-start: calc(48 * var(--u)); }
  .mensagem-corpo__sign li + li { margin-block-start: calc(24 * var(--u)); }
  .mensagem-corpo__back {
    margin-block: calc(48 * var(--u)) calc(64 * var(--u));
    padding-inline-start: 0;
  }
  .quote__mark { width: calc(30 * var(--u)); height: calc(21 * var(--u)); margin-inline-end: calc(8 * var(--u)); }
}

/* ==========================================================================
   TELEFONE  < 768
   ========================================================================== */
@media (max-width: 767px) {

  :root {
    --fs-display: 34;  --fs-display-alt: 30;  --fs-h2: 28;
    --fs-kpi: 44;      --fs-kpi-unit: 22;
    --fs-lead: 22;     --fs-quote: 22;
    --fs-pill: 24;     --fs-pill-unit: 16;    --fs-card-title: 20;
    --fs-kicker: 18;   --fs-body-lg: 17;      --fs-body: 16;
    --fs-name: 16;     --fs-sig: 16;          --fs-body-sm: 16;
    --fs-body-xs: 15;  --fs-btn: 17;          --fs-btn-sm: 14;
    --fs-plano-title: 18; --fs-plano-body: 15;

    --gutter: 20;  --gutter-hero: 20;  --gutter-footer: 20;
    --header-h: 64;  --logo-w: 114;  --logo-h: 41;
  }
  .nav-overlay { --fs-menu: 21; }

  .site-header__logo { inset-block-start: calc(12 * var(--u)); }
  .nav-toggle { inset-block-start: calc(12 * var(--u)); }
  .nav-toggle__bar { width: calc(28 * var(--u)); }
  /* 20 + 40 + 18 */
  .lang-switch { inset-inline-end: calc(78 * var(--u)); font-size: calc(15 * var(--u)); gap: calc(7 * var(--u)); }

  .mensagem__media, .hero-msg__media { aspect-ratio: 4 / 3; }

  /* ---- hero v2 em mobile -----------------------------------------------
     O losango passa a ser maior do que o ecrã (105cqw): assim o miolo
     chapado do losango — onde o texto assenta — fica com ~65% da largura
     do ecrã em vez de ~50%, e o H1 cabe em duas linhas sem encolher para
     tamanhos ilegíveis. O brilho das margens é fraquíssimo (alfa < 0.13),
     por isso sangrar 2,5% de cada lado não se nota.
     "Relatório & Contas 2025" sai da escala proporcional: a 105cqw daria
     11px. Fica em unidades de maquete, com um mínimo legível.

     --hero-shift desce o losango E o texto juntos, para o bico de cima não
     ficar entalado na barra de menu. O hero cresce 10% em altura para o
     bico de baixo não pagar a diferença. Mexer só neste número. */
  .hero {
    aspect-ratio: 1 / 1.1;
    --hero-side: 105cqw;
    --hero-shift: calc(20 * var(--u));
  }
  .hero__shape { translate: -50% calc(-50% + var(--hero-shift)); }
  .hero__content { translate: 0 calc(-50% + var(--hero-shift)); }
  .hero__kicker {
    margin-block-start: calc(60 * var(--hero-k));
    font-size: calc(16 * var(--u));
    line-height: 1.25;
  }
  .hero__year {
    margin-block-start: calc(4 * var(--u));
    font-size: calc(19 * var(--u));
    line-height: 1.2;
  }

  /* ecrãs muito estreitos: mais folga para o H1 não tocar no losango.
     O losango é maior, logo o bico sobe — precisa de mais deslocamento
     para não encostar à barra de menu. */
  @media (max-width: 360px) {
    .hero {
      --hero-side: 112cqw;
      --hero-shift: calc(34 * var(--u));
    }
  }

  .kpi-grid { grid-template-columns: 1fr; }
  .execucao__grid { grid-template-columns: 1fr; }

  .chart { grid-template-columns: repeat(3, 1fr); }
  /* mesma escala do desktop: 200 × valor / 1291 */
  .chart__col--1 .chart__bar { height: calc(200 * var(--u)); }
  .chart__col--2 .chart__bar { height: calc(65 * var(--u)); }
  .chart__col--3 .chart__bar { height: calc(44 * var(--u)); }

  .exec-card__connector { min-height: calc(20 * var(--u)); }

  .btn { height: calc(54 * var(--u)); border-radius: calc(27 * var(--u)); }
  .btn--pdf {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
    height: auto;
    min-height: calc(54 * var(--u));
    padding-block: calc(12 * var(--u));
    text-align: start;
  }

  .nav-overlay { grid-template-columns: 0 1fr; }
  .nav-menu { padding-block-start: calc(96 * var(--u)); padding-inline: calc(24 * var(--u)); }
}

/* ==========================================================================
   ECRÃS MUITO LARGOS — a maquete é fixa em 1920, centrar o conteúdo
   ========================================================================== */
@media (min-width: 1921px) {
  #page { margin-inline: auto; }
  .hero, .mensagem, .hero-msg { max-width: none; }
}

/* ==========================================================================
   IMPRESSÃO
   ========================================================================== */
@media print {
  .site-header, .nav-overlay, .btn { display: none !important; }
  body { color: var(--color-print-ink); }
  .section--dark { background: var(--color-print-paper) !important; color: var(--color-print-ink) !important; }
  .hero__content, .mensagem__content { position: static !important; }
}

/* ==========================================================================
   VERSÃO INGLESA — Set/2026
   Em pt-PT a unidade é um símbolo de duas letras ("Kz", "mM"); em inglês é
   uma palavra ("AOA", "billion"). "AOA 1,666 billion" ao corpo do XD (50)
   precisa de 513px numa caixa de 488: o `white-space: nowrap` do valor
   empurrava a coluna do grid para 551 e deformava a grelha dos indicadores
   toda — não era só um texto a transbordar, era o layout a mexer-se.

   Reduzir só a UNIDADE, de 50 para 36, resolve sem tocar no tamanho do
   número nem na geometria da maquete: a linha passa a precisar de 472,8px
   com 15,2px de folga. Os 38 também cabiam, mas com 5,3px de margem — pouco
   para sobreviver a uma diferença de rasterização noutra máquina.

   Guardado em min-width para não competir com os valores de tablet e
   telefone, onde a escala já é menor e a linha cabe folgada.

   CORRECÇÃO DE 7/SET — o cliente reparou, e bem. A primeira versão desta
   regra baixava o TOKEN `--fs-kpi-unit`, e esse token é usado em três sítios:

     components.css:48   .kpi__value .unit          ← era este o alvo
     components.css:213  .exec-card__pill .pill__value
     layout.css:318      .chart__value .unit

   Ou seja, para resolver uma linha nos indicadores, encolhi também o valor
   das pastilhas de execução (50 → 36) e a unidade do gráfico, só na versão
   inglesa. Foi isso que eles viram: "os indicadores desta página parecem
   estar com corpo menor do que na versão PT". Estavam mesmo.

   A regra passa a ser um font-size por selector, não um token. Um token é um
   valor partilhado — mexer nele para corrigir um componente é mexer em todos
   os que o usam, e não há aviso nenhum quando isso acontece.

   Dos três componentes, DOIS precisam mesmo de unidade menor em inglês, e
   precisam de valores diferentes porque as caixas são diferentes. Medido a
   1920 com a linha forçada a não partir:

     .kpi__value .unit     caixa 488   "AOA 1,666 billion"  50px → 513 (-25)
                                                            38px → 483 (+5,3)
                                                            36px → 473 (+15,2)  ✔
     .chart__value .unit   caixa 535   "AOA 1,666 billion"  50px → 542 (-7,2)
                                                            48px → 532 (+2,7)
                                                            44px → 512 (+22,5)  ✔
                                       (em PT, "Kz 1 291 mM" ocupa 437)

   Escolheu-se em cada um o maior corpo com folga real — margens de 2 a 5px
   não sobrevivem a uma diferença de rasterização noutra máquina. São dois
   valores diferentes porque são duas restrições diferentes; forçar um só
   obrigava a partir o gráfico ou a encolher os indicadores sem necessidade.

   A pastilha de execução NÃO entra: em inglês o texto é "72.4 %", que ocupa
   o mesmo que "72,4 %" em português. Fica nos 50 do XD, como no PT.
   ========================================================================== */
@media (min-width: 1200px) {
  html[lang="en"] .kpi__value .unit   { font-size: calc(36 * var(--u)); }
  html[lang="en"] .chart__value .unit { font-size: calc(44 * var(--u)); }
}

/* --------------------------------------------------------------------------
   HERO INGLÊS — capa_landing-page-2025_ENG.svg
   O H1 inglês é mais comprido ("Looking after the present, ensuring the
   future.") e o cliente reduziu o corpo no SVG: 69,2 unidades contra as 83,1
   do português, com entrelinha 1,2 em vez de 1,2274. Medido no render do SVG
   dele: linha 1 com 618px de tinta contra os 564 do PT.
   A posição vertical do bloco muda porque, com corpo menor, a caixa de linha
   também encolhe — os números abaixo saem da comparação com o SVG inglês.
   -------------------------------------------------------------------------- */
html[lang="en"] .hero__title {
  font-size: calc(69.2 * var(--hero-k));
  line-height: 1.2;
}
html[lang="en"] .hero__kicker { margin-block-start: calc(118 * var(--hero-k)); }

@media (min-width: 1200px) {
  html[lang="en"] .hero__content {
    inset-block-start: calc(50% - var(--hero-side) / 2 + 573 * var(--hero-k));
  }
}

/* --------------------------------------------------------------------------
   768–899 em inglês: "AOA 1,666 billion" não cabe
   Nesta faixa a grelha dos indicadores tem 2 colunas e o cartão fica com
   288px úteis a 768. A linha precisa de 347 — e como o valor tem
   `white-space: nowrap`, a coluna do grid esticava e a página passava a ter
   18px de overflow horizontal.

   A unidade que caberia era 18, contra os 24 do próprio título do cartão:
   ilegível ao lado de um número de 64. Em vez de encolher a tipografia,
   deixa-se a unidade mudar de linha. Medido nesta faixa: "AOA 1,666" ocupa
   245px e "billion" 89px, ambos folgados nos 288 — a quebra é determinista,
   dá sempre duas linhas e nunca deixa o "AOA" órfão.

   Os cartões da mesma linha crescem juntos (são células de grid), portanto a
   secção continua alinhada. Acima de 900 a linha cabe inteira e isto não se
   aplica; abaixo de 768 a grelha passa a uma coluna e sobra largura.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 899px) {
  /* Só os quatro cartões de valores em AOA. Os dois de percentagem têm
     largura de sobra e mandar o "%" para a linha de baixo parecia erro. */
  html[lang="en"] :is(.kpi--1, .kpi--2, .kpi--3, .kpi--4) .kpi__value { white-space: normal; }
  html[lang="en"] :is(.kpi--1, .kpi--2, .kpi--3, .kpi--4) .kpi__value .unit:last-child { display: block; }
}