/* =============================================================
   MCI — Moçambique Consultores e Investimentos, S.A.
   Folha de estilos única. HTML/CSS/JS puros, sem dependências.

   Paleta extraída directamente do ficheiro do logótipo
   (assets/logo-mci.jpeg), por amostragem de píxeis:
     azul das barras/marca .... #03A4FE
     azul da lettering "MCI" ... #0170E6
     dourado do arco ........... #E0A93A  (alto #FDDB77 / baixo #B36F04)
     bronze do slogan .......... #8A5A10
   Os tons navy são escurecimentos do próprio azul do logótipo.

   Índice
    1. Tokens              9. Contactos
    2. Base               10. Rodapé
    3. Cabeçalho          11. Animações
    4. Hero               12. Navegação em ecrãs pequenos
    5. Secções            13. Ajustes por breakpoint
    6. Sobre              14. Movimento reduzido
    7. Missão e Visão     15. Alto contraste forçado
    8. Valores            16. Impressão
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca — valores lidos do logótipo */
  --brand-blue-bright: #03A4FE;
  --brand-blue: #0170E6;
  --brand-blue-deep: #0B4F9E;
  --brand-navy: #063A73;
  --brand-navy-dark: #04264B;

  --gold: #E0A93A;
  --gold-light: #FDDB77;
  --gold-deep: #B36F04;
  --gold-text: #8A5A10;          /* bronze do slogan — legível (AA) sobre claro */

  /* Neutros */
  --white: #FFFFFF;
  --surface-soft: #F1F5FB;
  --surface-muted: #E8EFF8;
  --line: #DCE5F0;
  --line-soft: #E7EDF6;
  --line-strong: #C6D5E7;

  /* Texto */
  --text: #1E2A38;
  --text-body: #33414F;
  --text-muted: #566579;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #D6E2F0;

  /* Estrutura */
  --header-h: 88px;
  --logo-h: 36px;
  --brand-name-size: .625rem;
  --container: 1200px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  /* Elevação */
  --shadow-xs: 0 1px 2px rgba(6, 58, 115, .05);
  --shadow-sm: 0 2px 4px rgba(6, 58, 115, .04), 0 8px 20px -14px rgba(6, 58, 115, .28);
  --shadow-md: 0 4px 10px -4px rgba(6, 58, 115, .10), 0 18px 40px -22px rgba(6, 58, 115, .42);
  --shadow-lg: 0 8px 18px -8px rgba(6, 58, 115, .12), 0 34px 66px -34px rgba(6, 58, 115, .48);

  --ease: cubic-bezier(.22, .61, .36, 1);

  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --grad-marca: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-blue) 38%,
                                var(--brand-blue-bright) 62%, var(--gold) 100%);
  --grad-ouro: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 55%, var(--gold-light) 100%);
}

@media (min-width: 768px) {
  :root { --header-h: 96px; --logo-h: 41px; --brand-name-size: .6875rem; }
}
@media (min-width: 1200px) {
  :root { --header-h: 106px; --logo-h: 49px; --brand-name-size: .75rem; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.75;
  overflow-x: clip;               /* rede de segurança: nunca scroll horizontal */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--text);
  font-weight: 600;
  line-height: 1.16;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--brand-blue-deep); }

ul { margin: 0; padding: 0; }

svg { display: block; }

::selection { background: rgba(1, 112, 230, .16); color: var(--text); }

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 200;
  transform: translateY(-200%);
  background: var(--brand-navy);
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  padding: .75rem 1.15rem;
  border-radius: 8px;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- 3. Cabeçalho ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 8px 30px -20px rgba(6, 58, 115, .7);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: calc(var(--header-h) - 1px);
}

/* Barra de progresso de leitura — fina, na aresta inferior do cabeçalho */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  max-width: 100%;
  background: var(--grad-marca);
  border-radius: 0 2px 2px 0;
  z-index: 2;
}

.brand {
  display: inline-flex;
  flex-direction: column;         /* logótipo em cima, nome por baixo */
  align-items: center;            /* logótipo e nome centrados entre si */
  justify-content: center;
  gap: 0;                         /* o espaçamento é dado pelo logótipo */
  text-align: center;
  flex: 0 1 auto;
  min-width: 44px;                /* alvo de toque */
  min-height: 44px;
  border-radius: 6px;
  text-decoration: none;
}
/* Cabeçalho e rodapé partilham o mesmo ficheiro: logo-mci-sem-slogan.png, sem
   o "Investir. Desenvolver. Crescer." e recortado à justa da arte. Por não ter
   faixas transparentes, as margens são a folga real — sem compensações.
   O --logo-h desceu na proporção da arte que o ficheiro perdeu (896/1254),
   para a marca continuar a ser vista ao mesmo tamanho de antes. */
.brand-logo {
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;            /* preserva sempre a proporção original */
  margin-bottom: .2rem;
  transition: opacity .2s ease;
}
.brand-name {
  font-size: var(--brand-name-size);
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.25;
  color: var(--text-muted);
  max-width: 22ch;                /* parte o nome em duas linhas equilibradas */
  text-wrap: balance;
  transition: color .2s ease;
}
.brand:hover .brand-logo { opacity: .88; }
.brand:hover .brand-name { color: var(--brand-navy); }

/* Navegação — desktop */
.site-nav { flex: 0 1 auto; }

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 2rem);
}
.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .25rem .35rem;
  font-size: clamp(.9375rem, .88rem + .18vw, 1rem);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--text-body);
  text-decoration: none;
  transition: color .2s ease;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: .35rem; right: .35rem;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-ouro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-list a:hover { color: var(--brand-navy); }
.nav-list a:hover::after,
.nav-list a[aria-current="location"]::after { transform: scaleX(1); }
.nav-list a[aria-current="location"] { color: var(--brand-navy); font-weight: 600; }

/* Botão hambúrguer */
.nav-toggle {
  display: none;
  flex: 0 0 auto;                 /* nunca encolhe abaixo do alvo de toque */
  width: 46px; height: 46px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--brand-navy);
  transition: background-color .2s ease, border-color .2s ease;
}
.nav-toggle:hover { background: var(--surface-soft); border-color: var(--line-strong); }

.nav-toggle-bars { display: block; width: 22px; height: 16px; position: relative; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s ease, top .3s var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 7px; }
.nav-toggle-bars span:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 89;
  background: rgba(6, 58, 115, .28);
  opacity: 0;
  transition: opacity .28s ease;
}
.nav-backdrop.is-visible { opacity: 1; }

/* ---------- 4. Hero (100% CSS, sem fotografia) ---------- */
.hero {
  --hero-pad: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 54vh;
  /* a reserva extra em baixo garante que o indicador de scroll (posicionado em
     absoluto) nunca toca no texto, mesmo em ecrãs baixos */
  padding-block: var(--hero-pad) calc(var(--hero-pad) + 4rem);
  background: linear-gradient(163deg,
              #FFFFFF 0%, #FAFCFE 18%, #EFF6FD 46%, #E1EDFA 74%, #D6E6F7 100%);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .hero { min-height: 66vh; }
}

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
}
.hero-glow--blue {
  width: min(82vw, 860px);
  aspect-ratio: 1;
  top: -34%;
  right: -14%;
  background: radial-gradient(circle at 50% 50%,
              rgba(3, 164, 254, .30) 0%,
              rgba(3, 164, 254, .12) 42%,
              rgba(3, 164, 254, 0) 72%);
}
.hero-glow--gold {
  width: min(62vw, 600px);
  aspect-ratio: 1;
  bottom: -34%;
  left: -16%;
  background: radial-gradient(circle at 50% 50%,
              rgba(224, 169, 58, .26) 0%,
              rgba(224, 169, 58, .09) 44%,
              rgba(224, 169, 58, 0) 72%);
}

/* Feixe de luz diagonal — dá profundidade e levanta o fundo atrás do texto */
.hero-beam {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 50%;
  height: 64%;
  transform: translateY(-50%) rotate(-11deg);
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .58) 20%,
              rgba(255, 255, 255, .8) 46%,
              rgba(255, 255, 255, .36) 72%,
              rgba(255, 255, 255, 0) 100%);
  filter: blur(30px);
}

/* Anéis concêntricos finíssimos à direita — geometria discreta, não é marca */
.hero-arcs {
  position: absolute;
  top: 50%;
  right: -16%;
  transform: translateY(-50%);
  width: min(104vw, 1020px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
              rgba(6, 58, 115, 0) 0 68px,
              rgba(6, 58, 115, .075) 68px 69px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 22%, rgba(0, 0, 0, .55) 52%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 22%, rgba(0, 0, 0, .55) 52%, transparent 76%);
}

/* Linhas finas diagonais — textura muito subtil, desvanecida nas margens */
.hero-lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
      114deg,
      rgba(6, 58, 115, .055) 0 1px,
      rgba(6, 58, 115, 0) 1px 56px);
  -webkit-mask-image: linear-gradient(102deg, transparent 0%, #000 30%, #000 58%, transparent 84%);
  mask-image: linear-gradient(102deg, transparent 0%, #000 30%, #000 58%, transparent 84%);
}

/* Filete a fechar o hero */
.hero-grid {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(224, 169, 58, 0) 0%,
              rgba(224, 169, 58, .7) 26%,
              rgba(3, 164, 254, .55) 62%,
              rgba(3, 164, 254, 0) 100%);
}

.hero-inner { position: relative; }

.hero h1 {
  max-width: 27ch;
  font-size: clamp(1.9rem, 1.1rem + 3.05vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.016em;
  line-height: 1.06;
  color: var(--brand-navy);
  animation: heroRise .9s var(--ease) both;
}
/* leve gradação do navy para o azul da marca — enriquece sem perder contraste */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: linear-gradient(158deg, var(--brand-navy) 0%, #0A4A91 54%, #0B5FBF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hero-claim {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 34ch;
  font-size: clamp(1.0625rem, .92rem + .78vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--brand-blue-deep);
  text-wrap: balance;
  animation: heroRise .9s var(--ease) .14s both;
}

.hero-rule {
  display: block;
  width: 78px;
  height: 4px;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  border-radius: 3px;
  background: var(--grad-ouro);
  box-shadow: 0 3px 14px -3px rgba(179, 111, 4, .5);
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.15rem;
  border: 1px solid rgba(6, 58, 115, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--brand-navy);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  /* só a opacidade é animada: o transform fica livre para o estado :hover */
  animation: heroFade .8s ease .42s both;
  transition: background-color .25s ease, border-color .25s ease,
              transform .25s var(--ease), box-shadow .25s ease;
}
.hero-scroll:hover {
  background: #fff;
  border-color: rgba(6, 58, 115, .32);
  box-shadow: var(--shadow-sm);
  transform: translateX(-50%) translateY(2px);
}
.hero-scroll svg { animation: nudge 2.6s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ---------- 5. Secções ---------- */
.section {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7.5rem);
  scroll-margin-top: var(--header-h);
}
.section--white { background: var(--white); }
.section--soft {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(3, 164, 254, .07) 0%, rgba(3, 164, 254, 0) 70%),
    var(--surface-soft);
  border-block: 1px solid var(--line-soft);
}
.section--brand {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(3, 164, 254, .20) 0%, rgba(3, 164, 254, 0) 58%),
    linear-gradient(148deg, var(--brand-navy) 0%, #0A4A91 52%, var(--brand-navy-dark) 100%);
  color: var(--text-on-dark);
}
/* textura de linhas finíssimas sobre o bloco da marca */
.section--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
      114deg,
      rgba(255, 255, 255, .045) 0 1px,
      rgba(255, 255, 255, 0) 1px 62px);
}
/* halo dourado muito suave no canto oposto */
.section--brand::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -35%;
  z-index: -1;
  width: min(70vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(224, 169, 58, .16) 0%,
              rgba(224, 169, 58, 0) 68%);
}

.section-head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }

.section-head--center {
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}
.section-head--center .section-kicker { justify-content: center; }
.section-head--center .section-rule { margin-inline: auto; }

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--gold-text);
  margin-bottom: .9rem;
}
.section-kicker::after {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(224, 169, 58, 0));
}
.section--brand .section-kicker { color: var(--gold-light); }
.section--brand .section-kicker::after {
  background: linear-gradient(90deg, var(--gold-light), rgba(253, 219, 119, 0));
}

.section-head h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  letter-spacing: -.015em;
  max-width: 22ch;
  color: var(--brand-navy);
}
.section-head--center h2 { max-width: none; }
.section--brand .section-head h2 { color: var(--text-on-dark); }

.section-rule {
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 1.35rem;
  border-radius: 3px;
  background: var(--grad-ouro);
}
.section--brand .section-rule {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

/* Cabeçalho ao lado do conteúdo, em ecrãs largos */
@media (min-width: 1024px) {
  .section-split {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }
  .section-split .section-head { margin-bottom: 0; }
}

/* ---------- 6. Sobre ---------- */
.prose p {
  max-width: 68ch;               /* ~65–75 caracteres por linha */
  line-height: 1.82;
}
.prose p + p { margin-top: 1.4em; }
.prose strong { color: var(--text); font-weight: 600; }

.prose .lead {
  position: relative;
  padding-left: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  line-height: 1.66;
  color: var(--text);
}
.prose .lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  bottom: .35em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-blue-bright), var(--brand-blue) 45%, var(--gold));
}
.prose .lead + p { margin-top: 1.8em; }

/* ---------- 7. Missão e Visão ---------- */
.mv-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 900px) {
  /* altura própria de cada cartão: a Missão é bem mais longa que a Visão e um
     cartão esticado ficaria com um vazio interior grande */
  .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.mv-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 55%,
                    rgba(255, 255, 255, .08) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              0 26px 50px -34px rgba(2, 18, 40, .85);
  overflow: hidden;
}
/* moldura em gradiente (1px), sem recorrer a border-image */
.mv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 45%,
                              rgba(224, 169, 58, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@supports not (mask-composite: exclude) {
  .mv-card { border: 1px solid rgba(255, 255, 255, .2); }
  .mv-card::after { display: none; }
}
.mv-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 104px; height: 4px;
  border-radius: 0 0 4px 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 1;
}
.mv-card h3 {
  color: var(--text-on-dark);
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem);
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
}
.mv-card p {
  color: var(--text-on-dark-muted);
  max-width: 62ch;
  line-height: 1.82;
}
.mv-card p + p { margin-top: 1.2em; }

/* ---------- 8. Valores ---------- */
.valores-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 768px) {
  .valores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  /* 4 colunas: 8 cartões + 2 cartões duplos fecham a última linha sem buracos */
  .valores-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .valor-card--wide { grid-column: span 2; }
}

.valor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
/* barra superior que cresce no hover */
.valor-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-ouro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.valor-card:hover {
  transform: translateY(-5px);
  border-color: rgba(1, 112, 230, .26);
  box-shadow: var(--shadow-md);
}
.valor-card:hover::before { transform: scaleX(1); }

.valor-num {
  position: relative;
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--gold-deep);
  margin-bottom: 1.05rem;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .valor-num {
    background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 55%, var(--gold-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.valor-num::after {
  content: "";
  position: absolute;
  left: calc(100% + 12px);
  top: 55%;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(224, 169, 58, 0));
}

.valor-card h3 {
  font-size: clamp(1.0625rem, 1rem + .32vw, 1.3rem);
  color: var(--brand-navy);
  letter-spacing: -.005em;
  margin-bottom: .7rem;
}
.valor-card p {
  font-size: .9688rem;
  line-height: 1.74;
  color: var(--text-muted);
  max-width: 60ch;
}

/* ---------- 9. Contactos ---------- */
.contactos-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 940px;
  margin-inline: auto;
  background: linear-gradient(158deg, #FFFFFF 0%, #FBFDFF 55%, #F6FAFF 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.contactos-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-marca);
  z-index: 2;
}
.contactos-panel::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -55%;
  width: min(70%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(3, 164, 254, .10) 0%, rgba(3, 164, 254, 0) 70%);
  pointer-events: none;
}

.contacto-col {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
}
.contacto-col + .contacto-col { border-top: 1px solid var(--line-soft); }

@media (min-width: 768px) {
  .contactos-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto-col + .contacto-col {
    border-top: 0;
    border-left: 1px solid var(--line-soft);
  }
}

.contacto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(140deg, var(--brand-blue-bright), var(--brand-blue) 52%, var(--brand-navy));
  box-shadow: 0 12px 24px -12px rgba(1, 112, 230, .85),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}

.contacto-col h3 {
  font-size: 1.25rem;
  color: var(--brand-navy);
  margin-bottom: .5rem;
}

.contacto-list { list-style: none; }
.contacto-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: .3rem;
  font-size: clamp(1rem, .95rem + .28vw, 1.15rem);
  font-weight: 500;
  color: var(--brand-navy);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color .2s ease;
}
.contacto-list a span {
  background-image: linear-gradient(90deg, var(--gold), var(--gold-deep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  padding-bottom: 2px;
  transition: background-size .32s var(--ease);
}
.contacto-list a:hover { color: var(--brand-blue-deep); }
.contacto-list a:hover span { background-size: 100% 2px; }

/* ---------- 10. Rodapé ---------- */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-marca);
}
.footer-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(3, 164, 254, .09) 0%, rgba(3, 164, 254, 0) 70%),
    radial-gradient(40% 80% at 85% 100%, rgba(224, 169, 58, .10) 0%, rgba(224, 169, 58, 0) 70%);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* O logótipo é um PNG com fundo transparente: assenta directamente sobre o
   rodapé, sem placa nem moldura. É o mesmo ficheiro do cabeçalho — ver a nota
   no .brand-logo. Recortado à justa, portanto a margem é a folga real. */
.footer-logo {
  --footer-logo-h: clamp(74px, 8.57vw, 103px);
  height: var(--footer-logo-h);
  width: auto;
  object-fit: contain;
  margin-bottom: 0;
}
.footer-name {
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 1rem + .55vw, 1.4rem);
  font-weight: 600;
  color: var(--brand-navy);
  line-height: 1.35;
  max-width: 26ch;
  text-wrap: balance;
}
.footer-rule {
  display: block;
  width: 72px;
  height: 3px;
  margin: 2.4rem 0 1.6rem;
  border-radius: 3px;
  background: var(--grad-ouro);
}
.footer-claim {
  font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
  font-weight: 500;
  color: var(--gold-text);
  max-width: 38ch;
  text-wrap: balance;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  padding-block: 1.35rem;
  text-align: center;
}
.footer-bottom p {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- 11. Animações de entrada ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s var(--ease) var(--reveal-delay, 0ms),
    transform .7s var(--ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Sem JavaScript, o conteúdo tem de continuar visível: quem trata disso é o
   <noscript> no <head> do index.html. */

/* ---------- 12. Navegação em ecrãs pequenos ---------- */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 36px -22px rgba(6, 58, 115, .6);
    padding: .5rem clamp(1.25rem, 4vw, 3rem) 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .26s ease, transform .3s var(--ease), visibility .26s;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list li + li { border-top: 1px solid var(--line); }
  .nav-list a {
    min-height: 52px;
    padding: .5rem .25rem;
    font-size: 1.0625rem;
    justify-content: space-between;
  }
  .nav-list a::after { left: .25rem; right: auto; width: 26px; bottom: 10px; }
}

@media (min-width: 900px) {
  .nav-backdrop { display: none; }
}

/* ---------- 13. Ajustes finos por breakpoint ---------- */
@media (max-width: 480px) {
  .hero { --hero-pad: 1.75rem; min-height: 52vh; }
  .hero h1 { max-width: 100%; }
  .hero-claim { max-width: 100%; }
  .hero-scroll { font-size: .75rem; padding: .5rem .9rem; bottom: .75rem; }

  .valor-card { padding: 1.35rem; }
  .contacto-col { padding: 1.5rem; }
}

@media (max-width: 400px) {
  :root { --header-h: 82px; --logo-h: 30px; }
  .nav-toggle { width: 44px; height: 44px; }
}

/* Mobile em orientação horizontal: hero não pode ocupar o ecrã todo */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 1.5rem 4rem; }
  .hero h1 { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.1rem); }
  .hero-rule { margin-bottom: .75rem; }
  .hero-claim { margin-top: 1rem; font-size: 1rem; }
  .hero-scroll { bottom: .75rem; }
}

/* ---------- 14. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-scroll svg { animation: none !important; }
}

/* ---------- 15. Alto contraste forçado ---------- */
/* Quando o sistema impõe a sua própria paleta, o browser força `color` mas não
   `-webkit-text-fill-color`: o texto recortado em gradiente ficaria transparente
   — ou seja, invisível. Aqui devolve-se-lhe tinta. */
@media (forced-colors: active) {
  .hero h1,
  .valor-num {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }

  /* Filetes e barras decorativas são pintados a gradiente e podem perder-se;
     a cor de sistema mantém-nos a marcar a hierarquia. */
  .hero-rule,
  .section-rule,
  .footer-rule,
  .scroll-progress { background: CanvasText; }

  /* Molduras que dependem de gradiente ou de sombra passam a traço real. */
  .valor-card,
  .mv-card,
  .contactos-panel { border: 1px solid CanvasText; }
  .mv-card::after { display: none; }
}

/* ---------- 16. Impressão ---------- */
@media print {
  .site-header, .nav-backdrop, .hero-scroll, .hero-decor,
  .footer-decor, .scroll-progress { display: none !important; }
  body { font-size: 11pt; }
  /* o h1 usa texto em gradiente: no papel volta a tinta sólida */
  .hero h1 {
    background: none !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
  }
  .section--brand { background: #fff !important; color: #000 !important; }
  .section--brand::before, .section--brand::after { display: none !important; }
  .section--brand .section-head h2, .mv-card h3 { color: #000 !important; }
  .mv-card p { color: #222 !important; }
  .mv-card { border: 1px solid #999 !important; box-shadow: none !important; }
  .mv-card::after { display: none !important; }
  .contactos-panel { box-shadow: none !important; border: 1px solid #999 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}