/* ==========================================================================
   ACADEMIA DE CONTAS — folha de estilo
   Construída sobre as medidas da referência (lawful.framer.website, 1440px):
   contentor de 1250px, Marcellus nos títulos, Golos Text no texto, superfícies
   #F7F7F7 / #FFFFFF / #0D1018. O dourado da referência é o vermelho da marca.
   Abraccio Studio · 2026
   ========================================================================== */

/* ---------- 1. Tokens ----------------------------------------------------- */
:root {
  --ink: #0D1018;
  --ink-card: #131721;
  --bg: #F7F7F7;
  --white: #FFFFFF;
  --grey-1: #F0F0F0;
  --grey-2: #DBDBDB;
  --line: rgba(13, 16, 24, .10);
  --line-dark: rgba(255, 255, 255, .12);

  --red: #E0020D;
  --red-deep: #B00109;

  --display: "Marcellus", Georgia, serif;
  --sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1250px;
  --pad: 40px;

  /* Botões: curva ajustada aos fotogramas da referência (440 ms). */
  --ease-btn: cubic-bezier(.95, 0, .30, 1);
  /* Entrada dos elementos ao scroll: amortecimento exponencial, τ ≈ 330 ms. */
  --ease-reveal: linear(0, 0.0597 1.43%, 0.1158 2.86%, 0.1939 5.00%, 0.2652 7.14%, 0.3508 10.00%, 0.4441 13.57%, 0.5389 17.86%, 0.6299 22.86%, 0.7127 28.57%, 0.7847 35.00%, 0.8448 42.14%, 0.8929 50.00%, 0.9326 59.29%, 0.9625 70.00%, 0.9835 82.14%, 1);
  --ease-hero-bg: cubic-bezier(.12, .23, .5, 1);
  --ease-hero: cubic-bezier(.44, 0, .56, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-slide: cubic-bezier(.45, 0, .2, 1);
  --ease-row: cubic-bezier(.25, .46, .45, .94);

  /* Vidro (linhas de formação, faixa de números, cartões de artigo). */
  --glass-tint: rgba(255, 255, 255, .5);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(13, 16, 24, .05), 0 1px 2px rgba(13, 16, 24, .04), 0 12px 28px -16px rgba(13, 16, 24, .12);
}

@media (max-width: 1199px) { :root { --pad: 30px; } }
@media (max-width: 809px)  { :root { --pad: 16px; } }

/* ---------- 2. Base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: clamp(16px, 15.26px + .19vw, 18px);
  line-height: 1.5;
  letter-spacing: -.025em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--container) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Tipografia (valores medidos) ------------------------------- */
.t-hero, .t-page, .t-sec, .t-art, .t-h3, .t-h4 {
  font-family: var(--display);
  font-weight: 400;
  text-wrap: balance;
}
.t-hero { font-size: clamp(42px, 30.86px + 2.857vw, 72px); line-height: 1.1;  letter-spacing: -.03em; }
/* 96px a partir de 1200px e 60px no telemóvel, como a referência; o min() impede
   que a palavra mais longa dos títulos («Contabilidade») saia da coluna. */
.t-page { font-size: min(clamp(60px, 43.64px + 4.364vw, 96px), calc((100vw - 2 * var(--pad)) / 5.8)); line-height: 1; letter-spacing: -.04em; }
.t-sec  { font-size: clamp(33px, 26.31px + 1.784vw, 52px); line-height: 1.15; letter-spacing: -.04em; }
@media (max-width: 809px) { .t-sec { letter-spacing: -.025em; } }
.t-art  { font-size: clamp(32px, 28.29px + .952vw, 42px); line-height: 1.15; letter-spacing: -.03em; }
.t-h3   { font-size: clamp(26px, 23.4px + .667vw, 33px);  line-height: 1.2;  letter-spacing: -.02em; }
.t-h4   { font-size: clamp(22px, 20.51px + .381vw, 26px); line-height: 1.4;  letter-spacing: -.01em; }
.t-22   { font-size: clamp(19px, 17.94px + .2817vw, 22px); line-height: 1.5;  letter-spacing: -.03em; }
.t-20   { font-size: clamp(17px, 15.9px + .286vw, 20px);  line-height: 1.5;  letter-spacing: -.02em; }
.t-18   { font-size: clamp(17px, 16.65px + .0939vw, 18px);  line-height: 1.5;  letter-spacing: -.025em; }
.t-17   { font-size: 17px; line-height: 1.5;  letter-spacing: -.025em; }
.t-16   { font-size: 16px; line-height: 1.5; letter-spacing: -.01em; }
.t-15   { font-size: 15px; line-height: 1.6; letter-spacing: 0; }
.accent { color: var(--red); }

/* Eyebrow: filete 86px a esbater, ponto de 4px no lado do texto. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(13, 16, 24, .65);
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 90px;
  height: 5px;
  flex: none;
  opacity: .55;
  background:
    linear-gradient(to right, transparent, currentColor) left center / 86px 1px no-repeat,
    radial-gradient(circle, currentColor 1.6px, transparent 2.1px) right center / 5px 5px no-repeat;
}
.eyebrow::after { transform: scaleX(-1); }
.on-dark .eyebrow, .eyebrow--light { color: rgba(255, 255, 255, .7); }
@media (max-width: 809px) {
  .eyebrow { gap: 18px; font-size: 13px; }
  .eyebrow::before, .eyebrow::after { width: 75px; background-size: 71px 1px, 5px 5px; }
}
@media (max-width: 400px) { .eyebrow { gap: 12px; } .eyebrow::before, .eyebrow::after { width: 48px; background-size: 44px 1px, 5px 5px; } }

/* Cabeçalho de secção */
.head { display: flex; flex-direction: column; gap: 12px; }
.head--center { align-items: center; text-align: center; margin-inline: auto; }
.head .t-sec { max-width: 760px; }
/* Introdução como a referência: 18–20px, tinta cheia, numa linha sempre que cabe. */
.head p { max-width: 720px; color: var(--ink); font-size: clamp(18px, 17.3px + .188vw, 20px); line-height: 1.5; letter-spacing: -.02em; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.head-row .head .t-sec { max-width: none; }
/* Secção «A Academia» com título mais pequeno, como o «About» da referência. */
.head:has(+ .bento) { gap: 18px; }
.head:has(+ .bento) .t-sec { font-size: clamp(26px, 20.37px + 1.502vw, 42px); letter-spacing: -.03em; max-width: 700px; }
.head:has(+ .bento) p { max-width: 700px; font-size: clamp(17px, 16.65px + .094vw, 18px); }
/* No telemóvel todos os cabeçalhos de secção vão ao centro; o botão do lado passa
   para o fim da secção (.center--m). */
.center--m { display: none; }
@media (max-width: 809px) {
  .head { align-items: center; text-align: center; margin-inline: auto; }
  .head-row { justify-content: center; }
  .head-row > .btn { display: none; }
  .center--m { display: flex; margin-top: 32px; }
}
.on-dark .head p { color: rgba(255, 255, 255, .7); }

/* ---------- 4. Botões ----------------------------------------------------- */
/* Rótulo duplicado que rola 27px e seta que troca na diagonal; o fundo não muda. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  padding: 3px 3px 3px 32px;
  border: 0;
  border-radius: 2px;
  font-size: clamp(17px, 16.65px + .0939vw, 18px);
  line-height: 27px;
  letter-spacing: -.025em;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn--plain { padding: 8px 32px; }
.btn__label { position: relative; display: block; height: 27px; overflow: hidden; }
.btn__label span { display: block; transition: transform 440ms var(--ease-btn); }
.btn__label span::after {
  content: attr(data-label) / "";
  position: absolute;
  left: 0; top: 100%;
}
.btn__ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  overflow: hidden;
}
.btn__ico svg { width: 14px; height: 14px; transition: transform 440ms var(--ease-btn); }
.btn__ico svg + svg { position: absolute; transform: translate(-32px, 32px); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__label span { transform: translateY(-100%); }
  .btn:hover .btn__ico svg:first-child { transform: translate(32px, -32px); }
  .btn:hover .btn__ico svg + svg { transform: translate(0, 0); }
}

.btn--light { background: var(--white); color: var(--ink); }
.btn--light .btn__ico { background: var(--ink); color: var(--white); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark .btn__ico { background: var(--white); color: var(--ink); }
.btn--glass { background: rgba(13, 16, 24, .3); color: var(--white); }
.btn--glass .btn__label { transition: opacity 440ms var(--ease-btn); }
.btn--outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn--outline .btn__ico { background: var(--white); color: var(--ink); }
.btn--grey { background: var(--grey-2); color: var(--ink); padding: 7px 30px; min-height: 41px; }
@media (hover: hover) and (pointer: fine) { .btn--glass:hover .btn__label { opacity: .9; } }

/* Ligação «Ler mais →» */
.more { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 24px; letter-spacing: -.01em; }
.more svg { width: 18px; height: 18px; transition: transform 440ms var(--ease-btn); }

/* ---------- 5. Revelação ao scroll ---------------------------------------- */
.rv {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
  transition: opacity 1400ms var(--ease-reveal), transform 1400ms var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.rv.in { opacity: 1; transform: none; }

/* ---------- 6. Cabeçalho -------------------------------------------------- */
/* Na referência a barra não é fixa: fica sobre o hero e sai com o scroll. */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(13, 16, 24, .14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 69px; gap: 32px; }
.header__right { display: flex; align-items: center; gap: 40px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--white); flex: none; }
.logo img { width: 24px; height: 24px; }
.logo span { font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 40px; }
.nav a { font-size: 18px; line-height: 26px; letter-spacing: -.025em; color: var(--white); white-space: nowrap; transition: opacity 220ms ease; }
.nav a:hover { opacity: .75; }
.nav > a[aria-current], .nav__top[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* Submenu «Formações». Abre ao passar o rato e com o teclado (:focus-visible,
   para um clique não o deixar preso aberto);
   fecha com 120 ms de atraso para o cursor poder descer sem o perder. O
   cabeçalho já tem backdrop-filter, por isso o painel é tinta quase opaca
   (um desfoque dentro de outro não vê a página por baixo). */
.nav__sub { position: relative; }
.nav__top { display: inline-flex; align-items: center; gap: 6px; }
.nav__chev { width: 14px; height: 14px; flex: none; transition: transform 200ms var(--ease-out); }
.sub {
  position: absolute; top: 100%; left: -24px; padding-top: 22px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: 24px 0;
  transition: opacity 160ms ease 120ms, transform 160ms ease 120ms, visibility 0s linear 280ms;
}
.nav__sub:hover .sub, .nav__sub:has(:focus-visible) .sub {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s;
}
.nav__sub:hover .nav__chev, .nav__sub:has(:focus-visible) .nav__chev { transform: rotate(180deg); }
@supports not selector(:has(*)) {
  .nav__sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
  .nav__sub:focus-within .nav__chev { transform: rotate(180deg); }
}
.nav__sub.is-closed .sub { opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); }
.nav__sub.is-closed .nav__chev { transform: none; }
.sub__panel {
  width: 340px; padding: 8px;
  background: rgba(13, 16, 24, .96);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 2px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45);
}
.nav .sub__link { display: grid; gap: 2px; padding: 12px 14px; border-radius: 2px; opacity: 1; transition: background-color 200ms ease; }
.nav .sub__link:hover, .nav .sub__link:focus-visible { background: rgba(255, 255, 255, .07); opacity: 1; }
.nav .sub__link[aria-current] { background: rgba(255, 255, 255, .05); }
.sub__t { font-family: var(--display); font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.sub__d { font-size: 14px; line-height: 1.4; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
.nav .sub__all {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; padding: 12px 14px 8px; border-top: 1px solid var(--line-dark);
  font-size: 15px; letter-spacing: 0; color: rgba(255, 255, 255, .8);
}
.nav .sub__all svg { width: 14px; height: 14px; transition: transform 440ms var(--ease-btn); }
.nav .sub__all:hover { opacity: 1; color: var(--white); }
.nav .sub__all:hover svg { transform: translateX(3px); }
/* Menu móvel como na referência: duas linhas brancas, sem caixa, 36px de alvo. */
.burger { display: none; width: 36px; height: 36px; margin-right: -6px; place-items: center; align-content: center; }
.burger i { display: block; width: 24px; height: 1.5px; background: var(--white); transition: transform 300ms var(--ease-out); }
.burger i + i { margin-top: 7px; }
body.nav-open .burger i:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
body.nav-open .burger i:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }
.mnav {
  position: fixed; inset: 0; z-index: 49;
  background: var(--ink);
  padding: 100px var(--pad) 40px;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
body.nav-open .mnav { opacity: 1; visibility: visible; transition: opacity 300ms ease; }
body.nav-open .header { position: fixed; background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mnav a { font-family: var(--display); font-size: 34px; line-height: 1.3; letter-spacing: -.03em; color: var(--white); padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
.mnav__sub { display: grid; padding: 4px 0 10px 18px; border-bottom: 1px solid var(--line-dark); }
.mnav .mnav__sub a { font-family: var(--sans); font-size: 17px; line-height: 1.4; letter-spacing: -.01em; padding: 7px 0; border-bottom: 0; color: rgba(255, 255, 255, .72); }
.mnav__foot { margin-top: auto; color: rgba(255, 255, 255, .6); font-size: 16px; display: grid; gap: 6px; }
.mnav .mnav__foot a { font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: 0; padding: 0; border-bottom: 0; color: inherit; overflow-wrap: anywhere; }
/* Abaixo de 1200px o cabeçalho completo (logo, 4 links, submenu, botão) só cabe
   com espaços mais curtos e o logo a 23px; abaixo de 1024px passa a menu móvel. */
@media (max-width: 1199px) { .nav, .header__right { gap: 22px; } .logo span { font-size: 23px; } .header__cta { padding-inline: 24px; } }
@media (max-width: 1023px) {
  .nav, .header__cta { display: none; }
  .burger { display: grid; }
}
@media (max-width: 809px) {
  .header__inner { height: 64px; }
  .logo span { font-size: 22px; }
}

/* ---------- 7. Hero (página inicial) -------------------------------------- */
.hero {
  position: relative;
  min-height: max(100vh, 720px);
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; animation: heroBg 1800ms var(--ease-hero-bg) both; }
/* Fotografias em slides: a nova entra por cima em 1,6 s enquanto a anterior fica
   opaca por baixo (sem passar pelo escuro); cada uma aproxima-se devagar de 1 para
   1,08 a partir do seu assunto (--kb). Só transform e opacity. */
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: 0; transform-origin: var(--kb, 50% 40%);
  transition: opacity 1600ms var(--ease-slide);
}
.slide.is-on { opacity: 1; z-index: 2; }
.slide.is-prev { opacity: 1; z-index: 1; transition: none; }
.slide.is-on, .slide.is-prev { animation: kenburns 8200ms linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero.is-idle .slide { animation-play-state: paused; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 62% 58% at 24% 52%, rgba(13,16,24,.42) 0%, rgba(13,16,24,.18) 55%, rgba(13,16,24,0) 100%),
    linear-gradient(90deg, rgba(13,16,24,.82) 0%, rgba(13,16,24,.62) 38%, rgba(13,16,24,.28) 70%, rgba(13,16,24,.42) 100%),
    linear-gradient(0deg, rgba(13,16,24,.7) 0%, rgba(13,16,24,0) 50%);
}
@keyframes heroBg { from { transform: scale(1.04); } to { transform: none; } }
/* Sombra larga e quase invisível: separa o texto das zonas claras da fotografia
   sem escurecer o hero inteiro. */
.hero__inner { max-width: 940px; text-shadow: 0 1px 16px rgba(13,16,24,.55); }
.hero h1 { text-shadow: 0 2px 28px rgba(13,16,24,.4); }
/* Título sempre em 2 linhas: a linha mais longa («Contabilistas angolanos») mede
   9,8 em, por isso o corpo é o menor entre 72px e a largura útil a dividir por 10,1. */
.hero h1 { font-size: min(72px, calc((100vw - 2 * var(--pad)) / 10.1)); }
.hero h1 .ln { display: block; white-space: nowrap; }
.hero__proof { display: flex; align-items: center; gap: 11px; font-size: 16px; line-height: 24px; letter-spacing: -.01em; font-weight: 500; }
.hero__proof i { display: inline-flex; gap: 2px; flex: none; }
.hero__proof svg { width: 20px; height: 20px; fill: var(--red); }
.hero h1 { margin-top: 18px; }
.hero h1 .w {
  display: inline-block;
  animation: word 900ms var(--ease-hero-bg) both;
  animation-delay: calc(100ms + var(--w) * 70ms);
}
@keyframes word { from { opacity: 0; filter: blur(8px); transform: translateY(25px); } to { opacity: 1; filter: none; transform: none; } }
.hero__sub { margin-top: 17px; max-width: 660px; font-weight: 450; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; text-shadow: none; }
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero__checks {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  color: rgba(255, 255, 255, .92);
  font-weight: 450;
}
.hero__checks li { display: flex; align-items: center; gap: 4px; }
.hero__checks svg { width: 24px; height: 24px; flex: none; }
@media (prefers-reduced-motion: reduce) {
  /* Nada se mexe sozinho: fica a primeira fotografia, sem zoom. */
  .slide.is-on, .slide.is-prev { animation: none !important; }
}
/* Telemóvel, como na referência: um só botão, prova numa linha, véu mais
   uniforme (o texto ocupa a largura toda, não só a metade esquerda). */
@media (max-width: 809px) {
  .hero__actions .btn--glass, .hero__proof-more { display: none; }
  /* Prova numa só linha, mais pequena: cabe até 320px. */
  .hero__proof { gap: 8px; font-size: 14px; line-height: 20px; }
  .hero__proof svg { width: 16px; height: 16px; }
  .hero__proof > span { white-space: nowrap; }
  .hero__checks { flex-direction: column; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(13,16,24,.62) 0%, rgba(13,16,24,.6) 50%, rgba(13,16,24,.8) 100%);
  }
}
.up {
  animation: up 500ms var(--ease-hero) both;
}
.up--1 { animation-delay: 500ms; }
.up--2 { animation-delay: 600ms; animation-name: up80; }
.up--3 { animation-delay: 800ms; }
.up--4 { animation-delay: 1000ms; }
@keyframes up   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes up80 { from { opacity: 0; transform: translateY(20px); } to { opacity: .92; transform: none; } }
.up--2 { opacity: .92; }

/* ---------- 8. Hero das páginas internas ---------------------------------- */
.phero {
  position: relative;
  min-height: 527px;
  display: flex;
  align-items: flex-end;
  padding: 160px 0 50px;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.phero__bg { position: absolute; inset: 0; z-index: -2; animation: pheroBg 1800ms cubic-bezier(.2, .9, .2, 1.02) 100ms both; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,16,24,.9), rgba(13,16,24,.56) 60%, rgba(13,16,24,.66)); }
.phero--blog .phero__bg::after { background: linear-gradient(0deg, rgba(13,16,24,.74), rgba(13,16,24,.3) 60%, rgba(13,16,24,.46)); }
.phero--top .phero__bg img { object-position: center 20%; }
@media (min-width: 810px) {
  /* Contactos: rosto inteiro abaixo do cabeçalho e texto da direita sobre zona escura. */
  .phero--contact .phero__bg img { object-position: 50% 0%; }
  .phero--contact .phero__bg::after { background: linear-gradient(90deg, rgba(13,16,24,0) 45%, rgba(13,16,24,.6) 72%, rgba(13,16,24,.7)), linear-gradient(0deg, rgba(13,16,24,.86), rgba(13,16,24,.5) 60%, rgba(13,16,24,.62)); }
}
@keyframes pheroBg { from { transform: scale(1.2); } to { transform: none; } }
.phero__grid { display: grid; grid-template-columns: 1fr minmax(0, 313px); align-items: end; gap: 40px; }
.phero h1 { animation: pTitle 1100ms var(--ease-out) 300ms both; }
.phero__text { animation: pText 1100ms var(--ease-out) both; }
@keyframes pTitle { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes pText  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.phero--article { min-height: 715px; padding-bottom: 60px; }
.phero__grid > span:empty { display: none; }
.phero--blog { min-height: 585px; }
.phero--article .phero__grid { grid-template-columns: minmax(0, 760px) minmax(0, 313px); justify-content: space-between; }
.phero__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 17px; line-height: 25.5px; letter-spacing: -.025em; animation: pText 1100ms var(--ease-out) 200ms both; opacity: 1; }
.phero__meta i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
@keyframes pMeta { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.phero__meta { animation-name: pMeta; }
@media (max-width: 809px) {
  /* Como a referência: muita fotografia em cima, título encostado ao fundo. */
  .phero, .phero--article, .phero--blog { min-height: 0; padding: 300px 0 40px; }
  .phero__meta { margin-bottom: 6px; }
  .phero__grid, .phero--article .phero__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- 9. Secções ---------------------------------------------------- */
.sec { padding: 100px 0; }
.sec--white { background: var(--white); }
.sec--grey  { background: var(--bg); }
.sec--dark  { background: var(--ink); color: var(--white); }
.sec--120 { padding: 120px 0 100px; }
@media (max-width: 809px) { .sec, .sec--120 { padding: 60px 0; } }
/* Listagens, artigos e serviços: mais ar antes do rodapé, como a referência. */
.sec--list, .sec--explore { padding: 100px 0 120px; }
.sec--article, .sec--svc { padding: 110px 0 120px; }
.sec--cpage { padding: 100px 0 120px; }
@media (max-width: 809px) {
  .sec--list, .sec--explore { padding: 80px 0 90px; }
  .sec--article { padding: 70px 0; }
  .sec--svc { padding: 80px 0 70px; }
  .sec--cpage { padding: 60px 0; }
}

/* Faixa de logótipos */
.logos { background: var(--white); padding: 50px 0; }
.logos__row { display: flex; align-items: center; gap: 48px; }
.logos__label { flex: none; max-width: 220px; color: rgba(13, 16, 24, .9); }
.marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 105s linear infinite; }
.marquee__track img { height: 40px; width: auto; filter: grayscale(1) brightness(.38) contrast(1.25); opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 809px) {
  .logos { padding: 40px 0; }
  .logos__row { flex-direction: column; align-items: center; gap: 20px; }
  .logos__label { max-width: none; text-align: center; font-size: 18px; }
  .marquee { width: 100%; }
}

/* Bento (sobre) */
.bento { display: grid; grid-template-columns: 1fr minmax(0, 400px) 1fr; gap: 16px; margin-top: 64px; }
.bento__col { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.bento__card { background: var(--white); padding: 24px; display: flex; flex-direction: column; border-radius: 2px; }
.bento__card svg { width: 48px; height: 48px; color: var(--red); }
.bento__card h3 { margin-top: auto; padding-top: 32px; }
.bento__card p { margin-top: 10px; color: rgba(13, 16, 24, .6); }
.bento__card--red { background: var(--red); color: var(--white); }
.bento__card--red svg { color: var(--white); }
.bento__card--red p { color: rgba(255, 255, 255, .85); }
.bento__img { position: relative; overflow: hidden; border-radius: 2px; min-height: 360px; }
.bento__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .bento { grid-template-columns: 1fr 1fr; } .bento__img { grid-column: 1 / -1; order: -1; } }
@media (max-width: 809px)  { .bento { grid-template-columns: 1fr; margin-top: 48px; } .bento__col { grid-template-rows: auto; } .bento__img { order: 0; min-height: 320px; } }

/* Cartões de evento (casos) */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.case { display: block; padding: 10px; background: var(--bg); border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.04); }
.case__media { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 593 / 500; background: var(--ink); }
.case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.case__body {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  background: var(--bg);
  padding: 22px;
  border-radius: 1px;
}
/* Painéis da mesma altura numa fila: etiquetas em cima, título e texto em baixo. */
@media (min-width: 810px) {
  .case__body { display: flex; flex-direction: column; min-height: 223px; }
  .case__body h3 { margin-top: auto; }
}
.case__tags { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 24px; }
.tag { display: inline-flex; align-items: center; padding: 4px 12px; white-space: nowrap; background: var(--white); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.04); font-size: 14px; line-height: 18.2px; letter-spacing: 0; color: #171612; }
.tag--red { background: var(--red); color: var(--white); box-shadow: none; }
.case__body p { margin-top: 8px; max-width: 420px; color: rgba(13, 16, 24, .7); }
@media (hover: hover) and (pointer: fine) { .case:hover .case__media img { transform: scale(1.07); } }
/* Sobre cinzento a moldura é tom sobre tom: só um fio branco e a sombra a desenham. */
.sec--grey .case { background: var(--bg); box-shadow: inset 0 0 0 1px #fff, 0 8px 24px rgba(0,0,0,.04); }
@media (max-width: 809px) {
  /* Telemóvel como a referência: foto 3:4, painel só com uma etiqueta (a data) e o título. */
  .cases { grid-template-columns: 1fr; }
  .case__media { aspect-ratio: 3 / 4; }
  .case__body { left: 16px; right: 16px; bottom: 16px; padding: 20px; }
  .case__tags { margin-bottom: 20px; }
  .case__tags .tag:first-child:not(:only-child), .case__body p { display: none; }
  .tag { font-size: 13px; line-height: 16.9px; }
}

/* Linhas de serviço (formações) */
.rows { display: grid; gap: 24px; margin-top: 40px; }
.row {
  display: block;
  padding: 32px;
  border-radius: 2px;
  /* Inversão em 750ms com ease-out, medida na referência. */
  transition: background-color 750ms var(--ease-row), box-shadow 750ms var(--ease-row), --sheen 750ms var(--ease-row);
  --glint: rgba(255, 255, 255, .1);
}
.row h3 { transition: color 750ms var(--ease-row); }
.row p { margin-top: 20px; max-width: 550px; text-wrap: balance; color: rgba(13, 16, 24, .7); transition: color 750ms var(--ease-row); }
.row .more { margin-top: 20px; transition: color 750ms var(--ease-row); }
/* Fotografia da formação: no desktop cresce do lado direito ao passar o rato
   (como a referência); no telemóvel fica sempre por baixo de «Ler mais». */
.row__img { position: absolute; top: 27px; right: 32px; z-index: 1; width: 180px; height: 180px; border-radius: 2px; overflow: hidden; transform: scale(0); transition: transform 800ms var(--ease-out); pointer-events: none; }
.row__img img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  a.row:hover {
    background-color: rgba(13, 16, 24, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(13, 16, 24, .05), 0 1px 2px rgba(13, 16, 24, .04), 0 18px 40px -16px rgba(13, 16, 24, .35);
    --sheen: rgba(255, 255, 255, .06);
  }
  a.row:hover::before { opacity: .3; }
  a.row:hover h3 { color: rgba(255, 255, 255, .9); }
  a.row:hover p { color: #E5E7EB; }
  a.row:hover .more { color: var(--white); }
  a.row:hover { z-index: 1; }
  a.row:hover .row__img { transform: scale(1.6); }
}
@media (max-width: 809px) {
  .row { padding: 24px 16px 16px; }
  .row p, .row .more { margin-top: 16px; }
  .row__img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 311 / 200; margin-top: 18px; transform: none; transition: none; }
}
.center { display: flex; justify-content: center; margin-top: 40px; }
.center .btn { padding: 6px 6px 6px 36px; gap: 22px; }
.head-row .btn { padding: 4px 4px 4px 32px; gap: 22px; }

/* Faixa de números */
.stats { position: relative; isolation: isolate; color: var(--white); background: var(--ink); padding-top: 100px; overflow: hidden; }
.stats__bg { position: absolute; inset: 0; z-index: -1; }
.stats__bg img { width: 100%; height: 100%; object-fit: cover; }
.stats__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,16,24,.82), rgba(13,16,24,.55) 55%, rgba(13,16,24,.86)); }
.stats__top { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 40px; align-items: start; min-height: 330px; }
.stats__row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.14); margin-top: 72px; }
.stat { padding: 50px 50px 50px 20px; display: flex; flex-direction: column; justify-content: flex-start; gap: 60px; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.14); padding-left: 20px; }
.stat p { max-width: 300px; color: var(--white); }
.stat b { font-family: var(--display); font-weight: 400; font-size: clamp(33px, 26.31px + 1.784vw, 52px); line-height: 1.15; letter-spacing: -.04em; }
@media (max-width: 809px) {
  .stats__top { grid-template-columns: 1fr; min-height: 0; }
  .stats__row { grid-template-columns: 1fr; }
  .stats { padding-top: 80px; }
  .stats__row { margin: 40px 24px 0; }
  .stat, .stat + .stat { gap: 36px; padding: 20px 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
}

/* Acordeão com imagem (porquê) */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin-top: 40px; align-items: stretch; }
.acc { display: grid; gap: 22px; }
.acc__item { background: var(--bg); border-radius: 2px; }
.acc__btn { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 15px; padding: 40px 32px 32px; text-align: left; }
.acc__item.open .acc__btn { padding-bottom: 16px; }
.acc__num { font-family: var(--display); font-size: clamp(22px, 20.51px + .381vw, 26px); line-height: 1.4; letter-spacing: -.01em; }
.acc__chev { width: 18px; height: 18px; transition: transform 500ms var(--ease-out); }
.acc__item.open .acc__chev { transform: rotate(180deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease-out); }
.acc__item.open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 32px 32px 87px; max-width: 470px; color: rgba(23, 22, 18, .7); font-size: 17px; }
.why__media { position: relative; min-height: 420px; border-radius: 2px; overflow: hidden; background: var(--grey-1); }
.why__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease-out); }
.why__media img.on { opacity: 1; }
@media (max-width: 809px) {
  .why { grid-template-columns: minmax(0, 1fr); }
  /* Sem min-height aqui: com aspect-ratio 4/3, 420px de altura forçavam 560px de largura. */
  .why__media { order: 0; aspect-ratio: 4 / 3; min-height: 0; }
  .acc { gap: 20px; }
  .acc__num { display: none; }
  .acc__btn { grid-template-columns: 1fr auto; padding: 32px 24px; }
  .acc__panel p { padding: 0 24px 32px; }
}

/* Reconhecimento (estrutura dos testemunhos) */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.quote { background: var(--grey-1); border: 1px solid var(--white); border-radius: 2px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.04); display: flex; flex-direction: column; }
.quote__head { display: flex; align-items: center; gap: 14px; padding: 12px 10px 20px; }
.quote__av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font-family: var(--display); font-size: 14px; letter-spacing: 0; }
.quote__name { font-size: clamp(17px, 15.9px + .286vw, 20px); line-height: 1.5; letter-spacing: -.02em; }
.quote__role { font-size: 16px; line-height: 1.5; color: rgba(13, 16, 24, .7); }
.quote__box { background: var(--white); padding: 24px 22px; flex: 1; display: flex; flex-direction: column; gap: 22px; border-radius: 2px; }
.quote__src { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: rgba(13,16,24,.6); }
.quote__src i { width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); }
.bar-field { margin-top: 40px; }
.bar { display: grid; grid-template-columns: repeat(3, 1fr); padding: 32px 0; border-radius: 2px; }
.bar div { text-align: center; padding: 0 20px; }
.bar div + div { border-left: 1px solid var(--line); }
.bar b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(33px, 26.31px + 1.784vw, 52px); line-height: 1.15; letter-spacing: -.04em; }
.bar span { display: block; margin-top: 8px; color: rgba(13, 16, 24, .8); }
@media (max-width: 1023px) { .quotes { grid-template-columns: 1fr; } }
@media (max-width: 809px) { .bar { grid-template-columns: 1fr; padding: 16px 32px; } .bar div { padding: 24px 0; } .bar div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Processo: cartões empilhados com sticky */
.stack { display: flex; flex-direction: column; gap: 80px; margin-top: 64px; }
.stack__card {
  position: sticky; top: 50px;
  transform-origin: 50% 50%;
  will-change: transform;
}
.step {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  background: var(--ink-card);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 2px;
  padding: 32px;
  min-height: 611px;
}
.step__img { position: relative; overflow: hidden; border-radius: 2px; }
.step__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step__body { display: flex; flex-direction: column; padding: 12px 40px 12px 0; }
.step .step__num { font-size: clamp(40px, 28.73px + 3.005vw, 72px); line-height: 1.2; letter-spacing: -.03em; color: var(--white); margin-top: 0; max-width: none; }
.step h3 { margin-top: 48px; color: var(--white); }
.step p { margin-top: 20px; max-width: 470px; color: rgba(255, 255, 255, .7); }
.step .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 1023px) { .step { grid-template-columns: 1fr; min-height: 0; } .step__img { aspect-ratio: 4 / 3; } .step__body { padding: 8px 4px; } .step .btn { margin-top: 32px; } .step h3 { margin-top: 28px; } }
@media (max-width: 809px) {
  .stack { gap: 40px; } .stack__card { position: static; }
  .step { padding: 12px 12px 40px; gap: 32px; }
  .step__body { padding: 0 12px; }
  .step h3 { margin-top: 20px; }
  .step p { margin-top: 16px; }
}

/* Cartões editoriais */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; margin-top: 40px; }
.post { display: flex; flex-direction: column; padding: 14px; border-radius: 2px; }
.post { overflow: hidden; }
/* A fotografia do cartão, muito desfocada, dá cor ao vidro à volta dela. */
.post__glow {
  position: absolute; inset: -48px; z-index: -2; width: calc(100% + 96px); height: calc(100% + 96px); max-width: none;
  object-fit: cover; filter: blur(36px) saturate(1.6) brightness(1.15); opacity: .42; pointer-events: none;
}
.post__media { position: relative; overflow: hidden; aspect-ratio: 374 / 290; border-radius: 2px; }
.post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.post__body { padding: 17px 8px 10px; transition: opacity 400ms ease; }
.post__meta { display: flex; align-items: center; gap: 12px; color: rgba(13, 16, 24, .68); }
.post__meta i { width: 6px; height: 6px; border-radius: 50%; background: rgba(13, 16, 24, .4); }
.post h3 { margin-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .post:hover .post__media img { transform: scale(1.04); }
  /* .8 na referência; .85 mantém a data/categoria acima de 4,5:1 sobre o vidro. */
  .post:hover .post__body { opacity: .85; }
}
@media (max-width: 1023px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 809px)  {
  .posts { grid-template-columns: 1fr; gap: 22px 20px; }
  .post__media { aspect-ratio: 315 / 250; }
  .post__body { padding-top: 16px; }
  /* Nos artigos, «Explore as últimas» mostra dois no telemóvel, como a referência. */
  .posts--related .post:nth-child(n+3) { display: none; }
}

/* ---------- Vidro ------------------------------------------------------------
   Vidro claro sobre luz vermelha da marca. A luz é um campo estático que sai
   para fora dos cartões: viva fora, clareada dentro (o tom branco a 50%). É
   esse contraste dentro/fora que se lê como vidro. Sem backdrop-filter: por
   baixo só há gradientes lisos, e desfocá-los não mudava nada e custava GPU.
   Nos artigos a cor vem da fotografia de cada cartão, com geada por cima. */
@property --sheen { syntax: "<color>"; inherits: false; initial-value: rgba(255, 255, 255, .55); }
@property --glint-a { syntax: "<number>"; inherits: false; initial-value: 0; }

.rows, .bar-field { position: relative; isolation: isolate; }
.rows::before, .bar-field::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* Bordas suaves: a máscara apaga o campo antes de chegar à caixa. */
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent), linear-gradient(transparent, #000 var(--bleed), #000 calc(100% - var(--bleed)), transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent), linear-gradient(transparent, #000 var(--bleed), #000 calc(100% - var(--bleed)), transparent);
  mask-composite: intersect;
}
/* Luz centrada nas bordas da pilha: metade fora (viva), metade dentro (fosca). */
.rows::before {
  --bleed: 40px;
  inset: -40px calc(var(--pad) * -1);
  background:
    radial-gradient(380px 300px at var(--pad) 120px, rgba(224, 2, 13, .22), rgba(224, 2, 13, 0) 70%),
    radial-gradient(460px 340px at calc(100% - var(--pad)) calc(100% - 120px), rgba(224, 2, 13, .2), rgba(224, 2, 13, 0) 70%);
}
/* A faixa fica 32px abaixo dos testemunhos: 24px de luz nunca lhes toca. */
.bar-field::before {
  --bleed: 24px;
  inset: -24px calc(var(--pad) * -1);
  background:
    radial-gradient(320px 220px at var(--pad) 50%, rgba(224, 2, 13, .24), rgba(224, 2, 13, 0) 70%),
    radial-gradient(320px 220px at calc(100% - var(--pad)) 50%, rgba(224, 2, 13, .18), rgba(224, 2, 13, 0) 70%);
}
@media (max-width: 809px) {
  .rows::before {
    background:
      radial-gradient(240px 200px at var(--pad) 110px, rgba(224, 2, 13, .22), rgba(224, 2, 13, 0) 70%),
      radial-gradient(260px 220px at calc(100% - var(--pad)) calc(100% - 110px), rgba(224, 2, 13, .18), rgba(224, 2, 13, 0) 70%);
  }
}

.row, .post, .bar {
  --sheen: rgba(255, 255, 255, .55);
  position: relative; isolation: isolate;
  background-color: var(--glass-tint);
  /* Reflexo em cima à esquerda e 3% de sombra em baixo à direita: dá espessura. */
  background-image: linear-gradient(160deg, var(--sheen) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 72%, rgba(13, 16, 24, .03) 100%);
  box-shadow: var(--glass-shadow);
}
/* Aresta de 1px: acesa em cima à esquerda, a apagar-se para baixo. */
.row::before, .post::before, .bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 35%, rgba(255, 255, 255, .1) 65%, rgba(255, 255, 255, .55));
  -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;
  transition: opacity 340ms ease;
}
/* Reflexo que segue o rato, só nos cartões que são ligações. A posição chega
   do site.js em --mx / --my, postas no próprio cartão. */
a.row::after, .post::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--glint, rgba(255, 255, 255, .7)), rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity 400ms ease;
}
/* Nos artigos o ::after é também a geada: 40% de branco por cima da cor da
   fotografia (que está mais abaixo, em z-index -2); o reflexo entra por --glint-a. */
.post::after {
  opacity: 1;
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, calc(var(--glint-a) * .7)), rgba(255, 255, 255, 0) 60%),
    rgba(255, 255, 255, .4);
  transition: --glint-a 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  a.row:hover::after { opacity: 1; }
  .post:hover::after { --glint-a: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  .row, .post, .bar { background-color: var(--white); }
  .rows::before, .bar-field::before, .post__glow { display: none; }
}
/* Alto contraste do Windows: sem tons nem sombras, os cartões precisam de borda. */
@media (forced-colors: active) {
  .row, .post, .bar { border: 1px solid CanvasText; }
  .rows::before, .bar-field::before, .post__glow { display: none; }
}

/* FAQ */
.faq { max-width: 800px; margin: 40px auto 0; display: grid; gap: 12px; }
.faq__item { border: 1px solid rgba(13, 16, 24, .12); border-radius: 2px; background: var(--bg); }
.faq__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 28px 20px 30px; text-align: left; }
.faq__btn span { font-size: clamp(19px, 17.94px + .2817vw, 22px); line-height: 1.5; letter-spacing: -.03em; }
.faq__plus { width: 20px; height: 20px; flex: none; transition: transform 600ms var(--ease-out); }
.faq__item.open .faq__plus { transform: rotate(45deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-out); }
.faq__item.open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { padding: 0 20px 32px; color: var(--ink); }

/* Contacto (página inicial) */
.contact { position: relative; isolation: isolate; color: var(--white); background: var(--ink); padding: 80px 0; overflow: hidden; }
@media (max-width: 809px) { .contact { padding: 60px 0; } }
.contact__bg { position: absolute; inset: 0; z-index: -1; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.contact__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,16,24,.86), rgba(13,16,24,.62) 50%, rgba(13,16,24,.7)); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 80px; align-items: stretch; }
.contact__side { display: flex; flex-direction: column; gap: 16px; }
.contact__side p.t-20 { max-width: 380px; color: rgba(255, 255, 255, .85); }
.trust { margin-top: auto; padding-top: 48px; display: flex; align-items: center; gap: 12px; }
/* flex: none — sem isto o texto comprimia a pilha de fotos e a terceira tapava as letras. */
.trust__av { display: flex; flex: none; }
.trust__av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.9); }
.trust__av img + img { margin-left: -12px; }
.trust p span { display: block; opacity: .55; }
@media (max-width: 1023px) { .contact__grid { grid-template-columns: 1fr; gap: 120px; } }

/* Formulários */
.form { display: grid; gap: 16px; padding: 26px 26px 40px; border-radius: 2px; }
@media (max-width: 809px) { .form { padding: 26px 22px 36px; } }
.form--glass { background: rgba(240, 240, 240, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); }
.form--grey { background: var(--grey-1); }
.form--white { background: var(--white); }
.field { display: grid; gap: 9px; }
.field label { font-size: 16px; line-height: 24px; letter-spacing: -.01em; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; border: 0; border-radius: 2px;
  background: var(--white);
  padding: 12px 14px; min-height: 48px;
  font-size: 16px; line-height: 24px; letter-spacing: -.01em; color: var(--ink);
}
/* background-color e não background: o atalho apagava a seta das listas de escolha. */
.form--white .field input, .form--white .field select, .form--white .field textarea { background-color: #F0F0F0; }
.field textarea { min-height: 120px; padding: 14px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230D1018' stroke-opacity='.6' stroke-width='1.3'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 36px; }
.field ::placeholder { color: rgba(13, 16, 24, .45); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__send { min-height: 50px; border-radius: 2px; background: rgba(13, 16, 24, .55); color: var(--white); font-size: 17px; letter-spacing: -.025em; transition: background-color 300ms ease; }
.form__send:hover { background: var(--ink); }
.form__ok { display: none; font-size: 15px; color: #0F7A3F; background: #E6F4EC; padding: 10px 12px; border-radius: 2px; }
.form.sent .form__ok { display: block; }
@media (max-width: 480px) { .form__row { grid-template-columns: 1fr; } }

/* Rodapé */
.footer { background: var(--ink); color: var(--white); padding: 100px 0 40px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
.footer__brand .logo span { font-size: 25px; }
.footer__brand p { margin-top: 18px; max-width: 300px; opacity: .8; }
.footer__contact { margin-top: 28px; max-width: 330px; }
.footer__contact a { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.footer__contact a + a { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer__contact svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.footer__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 72px; }
.footer__cols h4 { font-family: var(--sans); font-weight: 400; opacity: .6; margin-bottom: 20px; }
.footer__cols li + li { margin-top: 12px; }
.footer__cols a { opacity: .9; transition: opacity 200ms ease; }
.footer__cols a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer__bar { margin-top: 80px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__bar p { opacity: .75; }
@media (max-width: 1023px) { .footer__grid { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 600px)  { .footer__cols { grid-template-columns: 1fr 1fr; } }

/* Assinatura Abraccio */
.sig { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 100px; font-size: 14px; letter-spacing: 0; color: rgba(255,255,255,.7); transition: border-color 300ms, color 300ms; }
.sig:hover { border-color: rgba(212,175,106,.6); color: #fff; }
.sig i { width: 9px; height: 9px; background: linear-gradient(135deg, #E3C98B, #B88C3C); transform: rotate(45deg); transition: transform 600ms var(--ease-out); }
.sig:hover i { transform: rotate(225deg); }
.sig b { font-weight: 400; color: #E7CD96; }

/* ---------- 10. Páginas de detalhe ---------------------------------------- */
/* Serviço: artigo + formulário que acompanha a leitura (sticky 60px). */
.svc { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 480px); justify-content: space-between; gap: 56px; align-items: start; }
.svc__aside { position: sticky; top: 60px; }
/* Ritmo 60/20 da referência: 20px entre parágrafos, 60px antes de títulos e imagens. */
.prose > * + * { margin-top: 20px; }
.prose p, .prose li { font-size: clamp(16px, 15.26px + .19vw, 18px); line-height: 1.5; letter-spacing: -.02em; color: var(--ink); }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 23.4px + .667vw, 33px); line-height: 1.2; letter-spacing: -.02em; margin-top: 60px; }
.prose h2 + p, .prose h3 + p { margin-top: 20px; }
.prose h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 20.51px + .381vw, 26px); line-height: 1.4; letter-spacing: -.01em; margin-top: 40px; }
.prose strong { font-weight: 700; }
.prose ul { margin-top: 0; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: "•"; position: absolute; left: 4px; }
.prose ol { counter-reset: n; margin-top: 0; }
.prose ol li { position: relative; padding-left: 22px; counter-increment: n; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 0; }
.prose figure { margin-top: 60px; margin-bottom: 0; border-radius: 2px; overflow: hidden; }
.prose figure + h2, .prose figure + h3 { margin-top: 60px; }
.prose figure img { width: 100%; aspect-ratio: 680 / 449; object-fit: cover; }
.col.prose:not(.prose--blog) figure:not(.natural) img { aspect-ratio: 670 / 412; }
.prose--blog figure img { aspect-ratio: 650 / 400; }
/* Cartazes ao alto: no máximo meia página de altura no desktop. */
.prose figure.natural { max-width: 512px; margin-inline: auto; }
@media (max-width: 809px) {
  .prose figure img, .col.prose:not(.prose--blog) figure:not(.natural) img { aspect-ratio: 343 / 307; }
  /* 3:2 e não o recorte quase quadrado da referência: o painel do Fórum perde os oradores das pontas. */
  .prose--blog figure img { aspect-ratio: 3 / 2; }
}
.prose figure.natural img { aspect-ratio: auto; }
.mt0 { margin-top: 0 !important; }
.prose figcaption { font-size: 14px; letter-spacing: 0; color: rgba(13,16,24,.55); padding-top: 10px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .svc { grid-template-columns: 1fr; gap: 80px; } .svc__aside { position: static; } }

/* Caso: coluna estreita de 670px */
.col { max-width: 670px; margin-inline: auto; }
.col--650 { max-width: 650px; }
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 48px; border-bottom: 1px solid rgba(13, 16, 24, .05); margin-bottom: 0; }
.meta dt { font-size: 12px; line-height: 15.6px; letter-spacing: .07em; text-transform: uppercase; color: rgba(13,16,24,.7); }
.meta dd { margin: 6px 0 0; font-size: 17px; line-height: 25.5px; letter-spacing: -.025em; }
.pull { margin-top: 60px; padding-top: 50px; border-top: 1px solid rgba(13, 16, 24, .05); }
.pull blockquote { font-family: var(--display); font-size: clamp(22px, 20.51px + .381vw, 26px); line-height: 1.4; letter-spacing: -.01em; }
.pull cite { display: block; margin-top: 48px; font-style: normal; font-size: 16px; letter-spacing: -.015em; }
.prose .lead { font-family: var(--display); color: var(--ink); font-size: clamp(22px, 20.51px + .381vw, 26px); line-height: 1.4; letter-spacing: -.01em; padding-top: 40px; border-top: 1px solid var(--line); margin-bottom: 48px; }
.prose--blog h2 { font-size: clamp(32px, 28.29px + .952vw, 42px); line-height: 1.15; letter-spacing: -.03em; }
.prose--blog h3 { font-size: clamp(26px, 23.4px + .667vw, 33px); line-height: 1.2; letter-spacing: -.02em; }
.prose--blog .lead { padding-top: 50px; }
@media (max-width: 809px) { .prose--blog h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.03em; } }
@media (max-width: 600px) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

/* Contacto (página) */
.cpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 80px; align-items: stretch; }
.cpage__side { display: flex; flex-direction: column; gap: 12px; }
.cpage__side p.t-20 { max-width: 406px; color: rgba(13, 16, 24, .85); }
.cpage .trust { padding-top: 32px; }
.cpage .trust p { color: var(--ink); }
.cpage .trust__av img { border-color: var(--white); }
.channels { margin-top: 20px; display: grid; max-width: 460px; }
.channels a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.channels a span:last-child { color: rgba(13,16,24,.55); font-size: 15px; letter-spacing: 0; white-space: nowrap; }
@media (max-width: 480px) { .channels a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 0; } }
@media (max-width: 1023px) { .cpage { grid-template-columns: 1fr; } .cpage .trust { padding-top: 18px; } }

/* Secção fixa «porquê» (página A Academia) */
/* O espaço final fica dentro do bloco dos cartões: o padding da secção não conta
   para o limite do sticky, e o título soltava-se 100vh mais cedo. */
.adv { position: relative; background: var(--white); padding: 120px 0; }
.adv__pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; text-align: center; z-index: 0; }
.adv__pin .head { gap: 18px; }
.adv__pin .t-sec { max-width: 700px; }
.adv__pin p { max-width: 600px; }
.adv__cards { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 370px; column-gap: 64px; row-gap: 65px; padding-bottom: 100vh; }
.adv__card { width: min(390px, 100%); height: 370px; background: var(--bg); padding: 8px; border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.04); }
.adv__card:nth-child(odd)  { grid-column: 1; justify-self: start; }
.adv__card:nth-child(even) { grid-column: 2; justify-self: end; }
.adv__card:nth-child(2) { grid-row: 2; } .adv__card:nth-child(3) { grid-row: 3; } .adv__card:nth-child(4) { grid-row: 4; }
.adv__in { background: var(--white); padding: 40px; height: 100%; display: flex; flex-direction: column; border-radius: 2px; }
.adv__ico { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: var(--grey-1); border-radius: 2px; }
.adv__ico svg { width: 28px; height: 28px; color: var(--red); }
.adv__in h3 { margin-top: auto; padding-top: 24px; }
.adv__in p { margin-top: 12px; color: rgba(13,16,24,.7); }
.adv__card--dark .adv__in { background: var(--ink); color: var(--white); }
.adv__card--dark .adv__ico { background: rgba(255,255,255,.08); }
.adv__card--dark .adv__ico svg { color: var(--white); }
.adv__card--dark .adv__in p { color: rgba(255,255,255,.7); }
@media (max-width: 809px) {
  /* O título fica preso ao centro também no telemóvel e os cartões passam por cima. */
  .adv { padding: 40px 0; }
  .adv__pin { height: 100svh; }
  .adv__cards { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 32px; padding-bottom: 100svh; }
  .adv__in { min-height: 309px; padding: 26px; }
  .adv__card, .adv__card:nth-child(n) { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; height: auto; }
}

/* Equipa */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.member { background: var(--bg); padding: 10px; border-radius: 2px; }
.member__img { position: relative; aspect-ratio: 386 / 440; overflow: hidden; border-radius: 2px; background: var(--ink-card); display: grid; place-items: center; }
.member__mono { font-family: var(--display); font-size: 120px; line-height: 1; letter-spacing: -.04em; color: rgba(255,255,255,.12); }
.member__mark { position: absolute; top: 20px; left: 20px; width: 26px; opacity: .9; }
.member__txt { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 18px 20px; background: rgba(255,255,255,.96); border-radius: 2px; }
.member__txt p { margin-top: 2px; color: rgba(13,16,24,.7); font-size: 16px; letter-spacing: -.01em; }
@media (max-width: 1023px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .team { grid-template-columns: 1fr; } }

/* Nota honesta */
.note { margin-top: 28px; font-size: 14px; line-height: 1.55; letter-spacing: 0; color: rgba(13,16,24,.55); max-width: 760px; }
.on-dark .note, .note--light { color: rgba(255,255,255,.5); }

/* Botão flutuante WhatsApp */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 100px; background: var(--ink); color: var(--white); font-size: 15px; letter-spacing: 0; box-shadow: 0 10px 30px -10px rgba(13,16,24,.5); }
.wa svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .wa span { display: none; } .wa { padding: 13px; } }

/* ---------- 11. Movimento reduzido ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .rv { opacity: 1; transform: none; }
  .stack__card { transform: none !important; }
}

/* ---------- 12. Comunidade (página pública) ------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
/* Títulos alinhados entre cartões: ficam a distância fixa do ícone, não empurrados para baixo. */
.pillars .bento__card h3 { margin-top: 48px; padding-top: 0; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.role { padding: 40px; border-radius: 2px; background: var(--bg); display: flex; flex-direction: column; gap: 14px; min-height: 280px; }
.role h3 { margin-top: auto; }
.role p.t-18 { color: rgba(13, 16, 24, .7); max-width: 480px; }
.role__tag { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.role--dark { background: var(--ink-card); color: var(--white); }
.role--dark p.t-18 { color: rgba(255, 255, 255, .72); }
.mpreview { background: var(--ink); color: var(--white); padding: 120px 0; overflow: hidden; }
.mpreview__grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 64px; align-items: center; }
.mpreview__txt { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.mpreview__txt p.t-18 { color: rgba(255, 255, 255, .72); }
.mpreview__list { display: grid; gap: 10px; margin: 6px 0 14px; color: rgba(255, 255, 255, .86); }
.mpreview__list li { display: flex; gap: 12px; align-items: baseline; }
.mpreview__list li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--red); transform: translateY(-2px) rotate(45deg); }
.mpreview__shot { border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.mpreview__shot img { width: 100%; height: auto; }
.mpreview__shot figcaption { padding: 10px 14px; font-size: 13px; letter-spacing: 0; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.step3 { background: var(--white); border-radius: 2px; padding: 32px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.step3__num { font-family: var(--display); font-size: clamp(44px, 38px + 1.524vw, 60px); line-height: 1; letter-spacing: -.03em; color: var(--red); margin-bottom: auto; padding-bottom: 32px; }
.step3 p.t-17 { color: rgba(13, 16, 24, .65); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); flex: none; }
@media (max-width: 1023px) {
  .pillars, .steps3 { grid-template-columns: 1fr; }
  .pillars .bento__card, .step3, .role { min-height: 0; }
  .mpreview__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 809px) {
  .roles { grid-template-columns: 1fr; }
  .role { padding: 28px; }
  .mpreview { padding: 80px 0; }
}