/* ==========================================================================
   components.css — títulos de secção, réguas, cards, pills, botões, overlay
   ========================================================================== */

/* ---- Título de secção + régua ------------------------------------------- */
/* XD: h2 60/72 centrado; régua 203×6, raio 3, 8px abaixo do título,
   centrada sob o TEXTO do título (não sob a página) */
.section-title {
  font-size: calc(var(--fs-h2) * var(--u));
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  text-align: center;
}
.section-rule {
  width: calc(203 * var(--u));
  height: calc(6 * var(--u));
  margin: calc(8 * var(--u)) auto 0;
  border-radius: calc(var(--radius-rule) * var(--u));
  background: var(--gradient-rule-light);
}
.section--dark .section-rule { background: var(--gradient-rule-dark); }

/* ==========================================================================
   CARD DE INDICADOR (Principais Indicadores)
   XD: 536×313, raio 30 · título 30/36 bold branco a +40
       valor a +116, caixa de 108: "Kz" 50/60 bold + número 100 black + unidade
   ========================================================================== */
.kpi {
  min-height: calc(313 * var(--u));
  padding: calc(40 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
  border-radius: calc(var(--radius-kpi) * var(--u));
  color: var(--color-white);
  text-align: center;
}
.kpi__title {
  font-size: calc(var(--fs-card-title) * var(--u));
  line-height: 1.2;
  font-weight: var(--fw-bold);
}
.kpi__value {
  margin-block-start: calc(40 * var(--u));
  font-size: calc(var(--fs-kpi) * var(--u));
  line-height: var(--lh-kpi);
  font-weight: var(--fw-black);
  white-space: nowrap;
}
.kpi__value .unit {
  font-size: calc(var(--fs-kpi-unit) * var(--u));
  font-weight: var(--fw-bold);
}
.kpi--1 { background: var(--color-accent-60); }
.kpi--2 { background: var(--color-blue-mid-60); }
.kpi--3 { background: var(--color-primary-60); }
.kpi--4 { background: var(--color-accent); }
.kpi--5 { background: var(--color-blue-mid); }
.kpi--6 { background: var(--color-primary); }

/* ==========================================================================
   CARD O BPC — XD: 800 de largura, raio 20, fundo #4495D1, padding 24
   título 40/48 regular branco · pill 752×88 raio 44 #B4D4EC · corpo 22/32
   ========================================================================== */
.bpc-card {
  padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
  background: var(--color-blue-mid);
  border-radius: calc(var(--radius-card) * var(--u));
  text-align: center;
}
/* Alturas e padding superior fixados à mão no XD, card a card —
   reproduzidos tal e qual (ver nota 2 em tokens.css) */
.bpc-card--capital   { min-height: calc(468 * var(--u)); padding-block-start: calc(16 * var(--u)); }
.bpc-card--racio     { min-height: calc(308 * var(--u)); padding-block-start: calc(25 * var(--u)); }
.bpc-card--resultado { min-height: calc(358 * var(--u)); padding-block-start: calc(25 * var(--u)); }
.bpc-card--cobertura { min-height: calc(378 * var(--u)); padding-block-start: calc(16 * var(--u)); }
.bpc-card__title {
  font-size: calc(var(--fs-lead) * var(--u));
  line-height: var(--lh-lead);
  font-weight: var(--fw-regular);
  color: var(--color-white);
}
.bpc-card__pill { margin-block-start: calc(37 * var(--u)); }
.bpc-card__text {
  margin-block-start: calc(36 * var(--u));
  font-size: calc(var(--fs-body-sm) * var(--u));
  line-height: var(--lh-body-sm);
  color: var(--color-white);
}

/* pill de destaque — XD: altura 88, raio 44, #B4D4EC, valor 900 40px + unidade 900 30px */
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  min-height: calc(88 * var(--u));
  padding-inline: calc(24 * var(--u));
  background: var(--color-blue-light);
  border-radius: calc(var(--radius-pill) * var(--u));
  color: var(--color-primary);
  line-height: 1.2;
}
.pill__value {
  font-size: calc(var(--fs-pill) * var(--u));
  font-weight: var(--fw-black);
}
.pill__unit {
  font-size: calc(var(--fs-pill-unit) * var(--u));
  font-weight: var(--fw-black);
}
/* XD: a percentagem vem encostada ao número ("27,0%", "72,4%") */
.pill--pct { gap: 0; }

/* ==========================================================================
   CARD PLANO ESTRATÉGICO — XD: 720×268, raio 20, #B4D4EC
   texto a +48 esq., +75 topo, 627 de largura
   ícone 119×119, 55px acima do topo do card, 48px do bordo
   ========================================================================== */
.plano-card {
  position: relative;
  min-height: calc(268 * var(--u));
  padding: calc(75 * var(--u)) calc(45 * var(--u)) calc(21 * var(--u)) calc(48 * var(--u));
  background: var(--color-blue-light);
  border-radius: calc(var(--radius-card) * var(--u));
  color: var(--color-primary);
}
.plano-card__icon {
  position: absolute;
  inset-block-start: calc(-55 * var(--u));
  width: calc(119 * var(--u));
  height: calc(119 * var(--u));
}
.plano-card--left .plano-card__icon { inset-inline-start: calc(48 * var(--u)); }
.plano-card--right .plano-card__icon { inset-inline-end: calc(49 * var(--u)); }
.plano-card__title {
  font-size: calc(var(--fs-plano-title) * var(--u));
  line-height: var(--lh-plano-title);
  font-weight: var(--fw-bold);
}
.plano-card__text {
  margin-block-start: calc(24 * var(--u));
  font-size: calc(var(--fs-plano-body) * var(--u));
  line-height: var(--lh-plano-body);
  max-width: calc(627 * var(--u));
}

/* ==========================================================================
   CARD DE EXECUÇÃO — XD: 371×677, #E5F6FC, borda 1px #00ABE7, raio 20
   título 40/48 regular a +33 · conector (círculo + linha) · pill 323×88
   corpo 20/31 a 28px abaixo da pill
   ========================================================================== */
.exec-card {
  /* XD: a pill fica sempre a 281px do topo do card e o corpo a 397px,
     independentemente do nº de linhas do título — daí linhas fixas. */
  display: grid;
  grid-template-rows: calc(248 * var(--u)) auto 1fr;
  min-height: calc(677 * var(--u));
  /* a borda de 1px conta para a caixa: 1 + 23 = 24 do XD */
  padding: calc(32 * var(--u)) calc(23 * var(--u)) calc(28 * var(--u));
  background: var(--color-blue-pale);
  border: calc(1 * var(--u)) solid var(--color-accent);
  border-radius: calc(var(--radius-card) * var(--u));
  color: var(--color-primary);
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              translate var(--dur) var(--ease-out);
}
.exec-card:hover,
.exec-card:focus-within {
  background: var(--color-white);
  box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) var(--color-shadow-card);
  translate: 0 calc(-6 * var(--u));
}
.exec-card__title {
  font-size: calc(var(--fs-lead) * var(--u));
  line-height: var(--lh-lead);
  font-weight: var(--fw-regular);
  text-align: center;
}
/* cabeça do card: título em cima, conector a preencher até à pill */
.exec-card__head {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.exec-card__connector {
  flex: 1 1 auto;
  min-height: calc(20 * var(--u));
  position: relative;
  margin-block-start: calc(6 * var(--u));
}
.exec-card__connector::before { /* linha */
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block: calc(5 * var(--u)) 0;
  width: calc(1 * var(--u));
  translate: -50% 0;
  background: var(--color-blue-light);
}
.exec-card__connector::after { /* círculo no topo */
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  translate: -50% 0;
  border: calc(1 * var(--u)) solid var(--color-blue-light);
  border-radius: 50%;
  background: transparent;
}
.exec-card__pill { justify-content: center; }
.exec-card__pill .pill__value {
  font-size: calc(var(--fs-kpi-unit) * var(--u));
  font-weight: var(--fw-bold);
}
.exec-card__pill .pill__unit {
  font-size: calc(var(--fs-pill-unit) * var(--u));
  font-weight: var(--fw-bold);
}
.exec-card__text {
  margin-block-start: calc(28 * var(--u));
  font-size: calc(var(--fs-body-xs) * var(--u));
  line-height: var(--lh-body-xs-l);
}

/* ==========================================================================
   BOTÕES — o hover do XD move o ponto 29px para a direita (dos SVG do cliente)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(21 * var(--u));
  height: calc(80 * var(--u));
  border-radius: calc(40 * var(--u));
  font-weight: var(--fw-regular);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Ícone: janela de 28×28 com a bola dentro e a seta à espera fora, à esquerda.
   No hover a bola sai para a direita e a seta entra — é exactamente o que o XD faz
   (um grupo com a bola e a seta a deslizar +29px dentro de uma máscara fixa). */
.btn__icon {
  position: relative;
  flex: none;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  overflow: hidden;
}
.btn__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: translate var(--dur) var(--ease);
}
.btn__arrow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: calc(22 * var(--u));
  height: calc(15 * var(--u));
  translate: calc(-1 * var(--dot-shift) * var(--u)) -50%;
  transition: translate var(--dur) var(--ease);
}
.btn__arrow path {
  stroke: var(--btn-arrow, var(--color-white));
  fill: none;
  vector-effect: non-scaling-stroke;
}
.btn:hover .btn__dot,
.btn:focus-visible .btn__dot { translate: calc(var(--dot-shift) * var(--u)) 0; }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { translate: calc(3 * var(--u)) -50%; }

/* “Ver mensagem” — 280×80, borda 2px branca, texto branco, ponto ciano */
.btn--outline-light {
  width: calc(280 * var(--u));
  padding-inline: calc(30 * var(--u)) calc(23 * var(--u));
  border: calc(2 * var(--u)) solid var(--color-white);
  color: var(--color-white);
  font-size: calc(var(--fs-btn) * var(--u));
}
.btn--outline-light { --btn-arrow: var(--color-white); }
.btn--outline-light .btn__dot { background: var(--color-accent); }
.btn--outline-light:hover,
.btn--outline-light:focus-visible { color: var(--color-accent); }

/* “Voltar ao início” — 280×80, borda 2px #27348A, texto #27348A, ponto ciano */
.btn--outline-dark {
  width: calc(280 * var(--u));
  padding-inline: calc(30 * var(--u)) calc(23 * var(--u));
  border: calc(2 * var(--u)) solid var(--color-primary);
  color: var(--color-primary);
  font-size: calc(var(--fs-btn) * var(--u));
}
.btn--outline-dark { --btn-arrow: var(--color-primary); }
.btn--outline-dark .btn__dot { background: var(--color-accent); }
.btn--outline-dark:hover,
.btn--outline-dark:focus-visible { color: var(--color-accent); }

/* “PDF Relatório…” — 479×80, fundo ciano, texto branco, ponto azul */
.btn--pdf {
  width: calc(479 * var(--u));
  padding-inline: calc(26 * var(--u));
  background: var(--color-accent);
  color: var(--color-white);
  font-size: calc(var(--fs-btn-sm) * var(--u));
}
.btn--pdf { --btn-arrow: var(--color-white); }
.btn--pdf .btn__dot { background: var(--color-primary); }
.btn--pdf:hover,
.btn--pdf:focus-visible { color: var(--color-primary); }

/* ==========================================================================
   CITAÇÕES (página mensagem) — Lato Light 40/50, aspas 42×28.98 em linha
   ========================================================================== */
.quote {
  font-size: calc(var(--fs-quote) * var(--u));
  line-height: var(--lh-quote);
  font-weight: var(--fw-light);
}
.quote__mark {
  display: inline-block;
  width: calc(42 * var(--u));
  height: calc(29 * var(--u));
  margin-inline-end: calc(11 * var(--u));
  vertical-align: calc(2 * var(--u));
}
.quote--light { color: var(--color-white); }
.quote--dark { color: var(--color-primary); }

/* ==========================================================================
   OVERLAY DE NAVEGAÇÃO (artboard "Landingpage BPC – 1")
   painel 687 à direita, #27348B, sombra −7px · véu cinza com blur 6px
   itens Roboto Bold 35/45 · réguas de 541, ritmo de 139
   ========================================================================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-columns: 1fr calc(687 * var(--u));
  visibility: hidden;
  --u: min(1px, 100vw / 1920);
}
.nav-overlay[data-open="true"] { visibility: visible; }

.nav-overlay__scrim {
  background: var(--color-scrim);
  -webkit-backdrop-filter: blur(calc(6 * var(--u)));
  backdrop-filter: blur(calc(6 * var(--u)));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  border: 0;
  cursor: pointer;
}
.nav-overlay[data-open="true"] .nav-overlay__scrim { opacity: 1; }

.nav-overlay__panel {
  position: relative;
  background: var(--color-primary);
  box-shadow: calc(-7 * var(--u)) 0 0 var(--color-shadow-panel);
  translate: 100% 0;
  transition: translate var(--dur) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-overlay[data-open="true"] .nav-overlay__panel { translate: 0 0; }

.nav-overlay__actions {
  position: absolute;
  inset-block-start: calc(30 * var(--u));
  inset-inline-end: calc(71 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(34 * var(--u));
}
.nav-close {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  position: relative;
}
.nav-close::before,
.nav-close::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: calc(27 * var(--u));
  height: calc(3 * var(--u));
  background: var(--color-white);
  border-radius: calc(2 * var(--u));
}
.nav-close::before { translate: -50% -50%; rotate: 45deg; }
.nav-close::after  { translate: -50% -50%; rotate: -45deg; }

.nav-overlay__decor {
  width: calc(32 * var(--u));
  display: grid;
  gap: calc(5 * var(--u));
}
.nav-overlay__decor span {
  height: calc(3 * var(--u));
  background: var(--color-white);
  border-radius: calc(2 * var(--u));
}

.nav-menu {
  padding-block-start: calc(180 * var(--u));
  padding-inline-start: calc(78 * var(--u));
  padding-block-end: calc(100 * var(--u));
}
.nav-menu li + li { margin-block-start: calc(64 * var(--u)); }
.nav-menu a {
  display: block;
  width: calc(541 * var(--u));
  max-width: 100%;
  padding-block-end: calc(22 * var(--u));
  border-block-end: calc(2 * var(--u)) solid var(--color-accent);
  font-family: var(--font-menu);
  font-weight: var(--fw-bold);
  font-size: calc(var(--fs-menu) * var(--u));
  line-height: var(--lh-menu);
  color: var(--color-white);
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.nav-menu a:hover,
.nav-menu a:focus-visible { color: var(--color-accent); }

body[data-nav-open="true"] { overflow: hidden; }