/* =========================================================
   IUMAN Academy — All About People  ·  v4
   Três materiais em todo o site: laca azul-noite · pérola champanhe · papel creme.
   A luz do ecrã inicial (pêssego à esquerda, névoa fria à direita) acompanha a página.

   1. Tokens  2. Reset  3. Base + ambiente  4. Botões e links  5. Nav, menu, índice
   6. Hero + séries (o logótipo desmonta-se em i · U · MAN)  7. Figura (braços)  8. Esfera + faixa  9. Secções  10. Sobre  11. Séries (dentro do palco do ecrã inicial)
   12. Faixa a meio  13. Impacto  14. Pessoas  15. Contacto + footer
   16. Entradas  17. Keyframes  18. Responsive
   ========================================================= */

@property --tx { syntax: "*"; inherits: false; }
@property --ty { syntax: "*"; inherits: false; }
@property --rx { syntax: "*"; inherits: false; }
@property --rz { syntax: "*"; inherits: false; }
@property --rs { syntax: "*"; inherits: false; }
@property --fx { syntax: "*"; inherits: false; }
@property --fy { syntax: "*"; inherits: false; }
@property --fz { syntax: "*"; inherits: false; }
@property --wy { syntax: "*"; inherits: false; }
@property --wk { syntax: "*"; inherits: false; }
@property --wr { syntax: "*"; inherits: false; }

/* ---------- 1. Tokens ---------- */
:root {
  /* papel */
  --paper: #f7f1e9;
  --paper-hero: #f5ede4;
  --sand: #efe5d8;
  --surface: #fffaf4;
  --cream: #fbf6ef;
  /* laca azul-noite (uma só família) */
  --navy-950: #0a1222;
  --navy-900: #0d1526;
  --navy-800: #132344;
  --navy-750: #17264a;
  --ink: #1b2a47;
  --navy-600: #2a3a57;
  /* pérola */
  --pearl-1: #fffaf3;
  --pearl-2: #ebdccb;
  --pearl-3: #c4aa8e;
  /* acentos — dourado para marcas, pêssego só para luz */
  --gold: #c9a27c;
  --gold-ink: #8a6644;
  --peach: #ef9a66;
  /* texto */
  --text-2: #5f5b57;
  --text-3: #766c62;
  --line: rgba(27, 42, 71, 0.12);
  --line-soft: rgba(27, 42, 71, 0.045);

  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* interações */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* entradas: desaceleração natural, sem ressalto */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(20px, 4.5vw, 72px);
  --maxw: 1440px;
  --nav-h: 68px;

  /* cena do ecrã inicial (em --u); partilhada com "Sobre nós" */
  --u: min(1svh, .62vw);
  --cx: 24.58vw; --cy: 25.07svh;   /* ponta do crescente */
  --sx: 65.07vw; --sy: 41.25svh;   /* centro da esfera */
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* com Lenis ativo o browser NÃO pode suavizar outra vez (era a causa do scroll "pesado") */
html.lenis { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body, h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }

/* ---------- 3. Base + ambiente ---------- */
body {
  background: var(--paper-hero);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: var(--ink); color: var(--cream); }

/* fundo contínuo: camadas fixas que se fundem com o scroll (só opacidade → compositor) — não há folhas a passar por cima */
.flow-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--paper-hero); }
.fb { position: absolute; inset: 0; opacity: 0; visibility: hidden; will-change: opacity; }
.fb--sand {
  background:
    radial-gradient(38% 46% at 24% 58%, rgba(242, 150, 96, .22), rgba(242, 150, 96, 0) 70%),
    radial-gradient(40% 40% at 100% 0%, rgba(122, 140, 172, .1), rgba(122, 140, 172, 0) 70%),
    var(--sand);
}
.fb--paper {
  background:
    radial-gradient(45% 55% at 0% 40%, rgba(242, 150, 96, .2), rgba(242, 150, 96, 0) 70%),
    radial-gradient(40% 45% at 100% 8%, rgba(122, 140, 172, .12), rgba(122, 140, 172, 0) 70%),
    var(--paper);
}
.fb--cool {
  background:
    radial-gradient(50% 40% at 50% 100%, rgba(122, 140, 172, .16), rgba(122, 140, 172, 0) 70%),
    radial-gradient(35% 40% at 100% 70%, rgba(242, 150, 96, .14), rgba(242, 150, 96, 0) 70%),
    var(--paper);
}
.fb--sand2 {
  background:
    radial-gradient(40% 45% at 22% 50%, rgba(242, 150, 96, .22), rgba(242, 150, 96, 0) 70%),
    var(--sand);
}
.fb--navy {
  inset: auto 0 auto 0;
  top: 0;
  height: 150vh;
  opacity: 1;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30vh);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30vh);
  /* topo quente (pêssego → ameixa) na parte esbatida: a passagem para o azul é um crepúsculo, não um cinzento */
  background:
    linear-gradient(180deg, rgba(196, 140, 112, .9) 0, rgba(98, 76, 98, .85) 15vh, rgba(19, 35, 68, 0) 32vh),
    radial-gradient(42% 38% at 12% 34%, rgba(42, 58, 87, .75), rgba(42, 58, 87, 0) 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(201, 162, 124, .07), rgba(201, 162, 124, 0) 70%),
    linear-gradient(180deg, #132344 0, #111f3c 55%, #0b1427 100%);
}
.flow-bg::before, .fb:not(.fb--navy)::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 600px 600px;
}
main { position: relative; z-index: 1; }
/* blocos que entram e saem com o scroll (transformação + opacidade no compositor) */
#sobre > .wrap, #impacto .impact__sticky, #pessoas > .wrap, .contact__inner { will-change: transform, opacity; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
/* sobre azul-noite o anel de foco é champanhe (o azul não se via) */
.contact :focus-visible, .rail.is-dark a:focus-visible, .nav.is-dark:not(.is-open) :focus-visible { outline-color: var(--gold); }
.rail.is-muted:focus-within { opacity: 1; }
.hs:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }   /* destinos de navegação (foco programático) */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mono {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lower { text-transform: none; }
main { overflow-x: clip; }   /* a faixa inclinada não pode alargar a página no telemóvel */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, var(--peach), var(--gold) 45%, var(--ink));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  will-change: transform;
}

/* ---------- 4. Links ---------- */
/* ---------- 5. Nav, menu, índice ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .6s var(--ease-out);
  animation: fade-down 1.2s var(--ease-soft) .4s backwards;
}
.nav.is-scrolled { background: #f6efe6; box-shadow: 0 1px 0 var(--line); }
.nav.is-dark.is-scrolled:not(.is-open) { background: #0f1a31; box-shadow: 0 1px 0 rgba(251, 246, 239, .08); }
.nav.is-dark:not(.is-open) .brand { color: var(--cream); }
.nav.is-dark:not(.is-open) .brand__mark { fill: var(--cream); }
.nav.is-dark:not(.is-open) .nav__toggle span { background: var(--cream); }
.brand, .brand__mark, .nav__toggle span { transition: color .5s var(--ease-out), fill .5s var(--ease-out), background-color .5s var(--ease-out), transform .5s var(--ease-out), top .5s var(--ease-out); }
.nav.is-hidden { transform: translateY(-105%); }
.nav.is-hidden:focus-within { transform: none; }   /* teclado: a barra aparece quando o foco entra nela */
.nav__inner {
  height: var(--nav-h);
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  transition: height .5s var(--ease-out);
}
.nav.is-scrolled .nav__inner { height: 68px; }

.brand {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--ink);
}
.brand__name b { font-weight: 600; letter-spacing: .1em; }
/* letras de "IUMANAcademy" (a onda ao passar o cursor): crescem a partir da linha de base */
.bl { display: inline-block; transform-origin: 50% 82%; }
.brand__mark { width: 32px; height: 34px; fill: var(--ink); transition: transform .8s var(--ease-out); }
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.08); }

.nav__toggle { grid-column: 3; justify-self: end; width: 44px; height: 44px; position: relative; }
.nav__toggle span {
  position: absolute; left: 8px; right: 8px; height: 1.5px; background: var(--ink);
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 26px; }
.nav.is-open .nav__toggle span:first-child { top: 21px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:last-child { top: 21px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu { transition: opacity .4s var(--ease-soft), display .4s allow-discrete; }
.menu[hidden] { display: none; opacity: 0; pointer-events: none; }
@starting-style { .menu:not([hidden]) { opacity: 0; } }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 400;
  letter-spacing: -.02em;
  animation: soft-up .9s var(--ease-soft) backwards;
}
.menu__links a:nth-child(2) { animation-delay: .05s; }
.menu__links a:nth-child(3) { animation-delay: .1s; }
.menu__links a:nth-child(4) { animation-delay: .15s; }
.menu__links a:nth-child(5) { animation-delay: .2s; }
.menu__links a:nth-child(6) { animation-delay: .25s; }
.menu__links small { font-family: var(--mono); font-size: 12px; color: var(--text-3); letter-spacing: 0; }
.menu__foot { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--text-2); }

/* índice lateral: um traço por secção */
.rail {
  position: fixed;
  right: calc(var(--gutter) * .45);
  top: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  transform: translate(12px, -50%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .8s;
  color: var(--ink);
}
.rail.is-on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; visibility: visible; transition-delay: 0s; }
.rail.is-dark { color: var(--cream); }
@media (max-width: 1520px) { .rail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }   /* escondido, mas com nome acessível */
.rail.is-muted { opacity: .3; }
.rail.is-muted:hover { opacity: 1; }
.rail a { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.rail i {
  display: block;
  width: 12px; height: 1px;
  background: currentColor;
  opacity: .35;
  transition: width .6s var(--ease-out), opacity .4s, background-color .4s;
}
.rail span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .35s, transform .5s var(--ease-out);
}
.rail a:hover span, .rail a:focus-visible span { opacity: .8; transform: none; }
.rail a:hover i { width: 16px; opacity: .8; }
.rail a.is-active i { width: 18px; opacity: 1; background: var(--gold); }

/* ---------- 6. Hero ---------- */
/* 1 ecrã + 5,6 ecrãs de sequência: montar o logótipo, as séries aparecem, i → U → MAN, voltar a montar, ir para a navegação
   (= (ACT + 1) × 100svh — manter igual a ACT em main.js) */
.hero { height: 660vh; height: 660svh; }
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;   /* sem o quadrado azul do toque por cima da esfera e das peças */
}

.hero__claim {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: 8svh;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 42px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -.03em;
  color: var(--ink);
  pointer-events: none;
}
.hero__claim b { font-weight: 600; }
.hw {
  --k: clamp(0, calc(var(--c, 0) * 9 - var(--i)), 1);
  display: inline-block;
  opacity: var(--k);
  transform: translateY(calc((1 - var(--k)) * .5em));
  filter: blur(calc((1 - var(--k)) * 6px));
}
.brand.is-docked .brand__mark { animation: dock .8s var(--ease-out); }
.brand.is-docked.is-quiet .brand__mark { animation: none; }   /* clique na faixa: o salto para "Sobre nós" não faz o logótipo da barra pulsar */
.hero__bg {
  will-change: opacity;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  /* parede de estúdio creme e quente: luz de janela a entrar pela esquerda, mais clara atrás da esfera,
     um pouco mais fria na borda direita e mais escura em baixo à esquerda */
  background:
    radial-gradient(40% 60% at 104% 24%, rgba(196, 198, 204, .6), rgba(196, 198, 204, 0) 80%),   /* parede de cima à direita, mais fria */
    radial-gradient(58% 58% at 66% 38%, #fffaf2, rgba(255, 250, 242, 0) 74%),
    radial-gradient(70% 40% at 55% 100%, rgba(255, 246, 236, .7), rgba(255, 246, 236, 0) 70%),
    linear-gradient(180deg, #fcf1e4 0%, #fbefe2 52%, #faeee3 100%);
  animation: fade-in 1.4s var(--ease-soft) backwards;
}
/* luz quente que segue o cursor (era o brilho fixo do canto de cima à esquerda): uma elipse suave que o loop
   desloca só com transform; sem rato (toque, movimento reduzido) fica no canto, como antes.
   z-index -1: por baixo dos feixes e do grão, como as outras camadas do fundo */
.hero__glow {
  --gw: 42%; --gh: 52%; --ga: .78;      /* raios da elipse (em % da parede) e intensidade */
  position: absolute;
  z-index: -1;
  left: calc(var(--gw) * -1);
  top: calc(var(--gh) * -1);
  width: calc(var(--gw) * 2);
  height: calc(var(--gh) * 2);
  background: radial-gradient(closest-side, rgba(255, 214, 176, var(--ga)), rgba(255, 214, 176, 0) 72%);
  transform: translate3d(0, 4vh, 0);
  transform: translate3d(0, 4svh, 0);
  pointer-events: none;
  will-change: transform;
}
/* feixes de luz diagonais (sol através de uma janela), só claros e só no canto de cima à esquerda:
   não atravessam o ecrã nem há faixas de sombra */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(50deg,
    rgba(255, 247, 234, 0) 11%, rgba(255, 247, 234, .5) 16%, rgba(255, 247, 234, 0) 21%,
    rgba(255, 247, 234, 0) 28%, rgba(255, 247, 234, .42) 33%, rgba(255, 247, 234, 0) 38%);
  -webkit-mask-image: radial-gradient(62% 85% at 0% 0%, #000 35%, transparent 100%);
  mask-image: radial-gradient(62% 85% at 0% 0%, #000 35%, transparent 100%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 7. Figura: braço 1 (crescente) + braço 2 (faixa) ---------- */
/* unidades do SVG → px: 1 unidade = .18757 × --u */
.figure {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  animation: figure-in 2.2s var(--ease-soft) .1s backwards;
}
.figure > div { position: absolute; will-change: transform; transform-origin: 50% 50%; }
.figure > div > img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; transition: opacity .9s var(--ease-soft); }
/* símbolos 3D (WebGL): substituem as imagens assim que o primeiro frame está pronto */
.figure__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease-soft); }
.figure.is-3d .figure__gl { opacity: 1; }
.figure.is-3d > div > img { opacity: 0; }
.figure.is-3d > div { visibility: hidden; transition: visibility 0s .9s; }   /* depois do cruzamento, as imagens deixam de ocupar camadas */
/* imagens 3D renderizadas (1 unidade do logótipo = .18757 × --u) */
.figure__crescent {               /* caixa 540..1140 × 300..1080 */
  left: calc(var(--cx) - var(--u) * 36.20);
  top: calc(var(--cy) - var(--u) * 9.379);
  width: calc(var(--u) * 112.54);
  height: calc(var(--u) * 146.30);
}
.figure__arm {                /* 2.º braço do logótipo: fora do ecrã até se deslizar */
  left: 0; top: 0;
  width: calc(var(--u) * 112.54);   /* caixa 765..1365 × 400..1140 */
  height: calc(var(--u) * 138.80);
  transform: translate3d(120vw, 120vh, 0);
}

/* a cena: sombras, peças e esfera numa só camada (z 4: por cima das séries, como antes) */
.hero__scene { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* ---------- sombras dinâmicas ---------- */
.shadows { position: absolute; inset: 0; z-index: 4; pointer-events: none; animation: fade-in 1.6s var(--ease-soft) .45s backwards; }
.sh { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.sh > * { position: absolute; display: block; will-change: opacity; user-select: none; -webkit-user-drag: none; }
.sh--cres { width: calc(var(--u) * 150.06); height: calc(var(--u) * 183.82); }   /* caixa 800 × 980 unidades */
.sh--arm  { width: calc(var(--u) * 150.06); height: calc(var(--u) * 176.32); }   /* caixa 800 × 940 unidades */
.sh__soft { inset: 0; width: 100%; height: 100%; }
.sh--cres .sh__contact { left: 12.5%; top: 10.204%; width: 75%; height: 79.592%; }
.sh--arm .sh__contact  { left: 12.5%; top: 10.638%; width: 75%; height: 78.723%; }
.sh--sphere { width: var(--d, 300px); height: var(--d, 300px); }
.sh--sphere .sh__soft { inset: -22%; width: auto; height: auto; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 34, 30, .85) 0%, rgba(46, 34, 30, .5) 48%, rgba(46, 34, 30, 0) 100%); }
.sh--sphere .sh__floor { left: -33%; top: 70%; width: 168%; height: 22%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(96, 70, 52, .44) 0%, rgba(96, 70, 52, .23) 55%, rgba(96, 70, 52, 0) 100%); }
.sh--cres .sh__base { left: 0%; top: 41%; width: 40%; height: 13%; border-radius: 50%; opacity: 0; transform: rotate(26deg);   /* sombra no chão à esquerda da base */
  background: radial-gradient(closest-side, rgba(96, 74, 62, .55), rgba(96, 74, 62, .3) 55%, rgba(96, 74, 62, 0)); }
.sh--sphere .sh__contact { inset: 3%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 34, 30, .75) 55%, rgba(46, 34, 30, 0) 100%); }
.sh__ring {                       /* sombra da faixa na parede */
  left: 50%; top: 50%;
  width: calc(var(--d, 300px) * 1.44); height: calc(var(--d, 300px) * 1.44);
  margin: calc(var(--d, 300px) * -.72) 0 0 calc(var(--d, 300px) * -.72);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--d, 300px) * .14) calc(var(--d, 300px) * .045) rgba(60, 44, 34, .34),
              inset 0 0 calc(var(--d, 300px) * .14) calc(var(--d, 300px) * .045) rgba(60, 44, 34, .34);
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- 8. Esfera + faixa ---------- */
.pearl {
  /* pérola renderizada em 3D (assets/img/pearl.webp) */
  background: url("assets/img/pearl.webp?v=20261014e") center / 100% 100% no-repeat;
}
.saturn {
  --sd: 51.5;                            /* diâmetro da esfera (em --u) */
  z-index: 7;
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: calc(var(--u) * var(--sd) * 2.3);
  height: calc(var(--u) * var(--sd) * 2.3);
  margin: calc(var(--u) * var(--sd) * -1.15) 0 0 calc(var(--u) * var(--sd) * -1.15);
  perspective: calc(var(--u) * var(--sd) * 8);
  pointer-events: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity;
}
.saturn .sphere { pointer-events: auto; cursor: pointer; }
.saturn .band, .saturn .band * { pointer-events: auto; cursor: pointer; }   /* a faixa leva a "Sobre nós" (e arrasta-se para girar) */
.saturn.is-dragging .band, .saturn.is-dragging .sphere { cursor: grabbing; }
.saturn.is-gone .sphere { visibility: hidden; }
.saturn.is-locked .sphere, .saturn.is-locked .band, .saturn.is-locked .band * { pointer-events: none; cursor: auto; }   /* só no ecrã inicial */
/* cursor nativo de "agarrar" sobre as peças 3D (não é um cursor próprio) */
html.is-grab, html.is-grab body { cursor: grab; }
.grab-shield { position: fixed; inset: 0; z-index: 9999; display: none; cursor: grabbing; }
/* mergulho na pérola (clique na esfera do ecrã inicial) */
.dive-disc { position: absolute; z-index: 20; border-radius: 50%; opacity: 0; pointer-events: none; will-change: opacity; }
.dive { position: fixed; inset: 0; z-index: 45; pointer-events: none; background-repeat: no-repeat; will-change: opacity, transform; }
html.is-diving .hero__stage, html.is-diving .nav, html.is-diving .rail, html.is-diving main, html.is-diving .menu { pointer-events: none; }
/* véu das transições longas e da entrada nas letras */
.veil { position: fixed; inset: 0; z-index: 65; pointer-events: none; opacity: 0; background: #fbf0e3; will-change: opacity; }
.veil.is-navy { background: #132344; }
/* regresso ao início: o véu fica por baixo da barra (a marca à vista) e a barra muda sem transição */
.veil.veil--under { z-index: 45; }
.veil.is-paper { background: var(--paper-hero); }
/* clique na faixa: o ecrã inicial dissolve-se por trás da faixa (dentro da cena: por baixo da esfera e da faixa) */
.fly-veil { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: var(--paper-hero); will-change: opacity; }
/* o fio que fica quando a faixa passa pela câmara: sobe e pousa na linha do cabeçalho de "Sobre nós" */
/* na viagem a faixa pode sair pelo fundo real do ecrã (no telemóvel com a barra recolhida o palco tem 100svh < o ecrã);
   o véu da cena é fixo (cobre o ecrã todo) e o índice lateral sai de cena */
html.is-in-flight .hero__stage { overflow: visible; }
html.is-flying .rail { opacity: 0; }
/* enquanto "Sobre nós" entra, as transições CSS ficam desligadas (no cascade ganham às animações da entrada) */
html.is-flying #sobre .shead, html.is-flying #sobre .shead *, html.is-flying #sobre .reveal, html.is-flying #sobre .manifesto .w { transition: none !important; }
/* ---------- entrada da página inicial: o símbolo e "IUMANAcademy" ao centro (a mesma marca da barra, maior);
   a pérola do símbolo dá três saltinhos; depois a marca encaixa na barra (main.js, initSplash) e o ecrã inicial entra.
   Enquanto dura, as entradas do ecrã inicial esperam (pausadas no início) e a barra está escondida ---------- */
.splash { display: none; }
html.is-splash .splash, .splash.is-out { display: grid; }
.splash { position: fixed; inset: 0; z-index: 70; place-items: center; pointer-events: none; }
html.is-splash .splash { pointer-events: auto; }          /* (enquanto está ao centro, os cliques não chegam à página por baixo) */
.splash__bg { position: absolute; inset: 0; background: var(--paper-hero); will-change: opacity; }
.splash__brand {
  --sb: clamp(30px, 4.4vw, 56px);
  position: relative;
  display: inline-flex; align-items: center; gap: calc(var(--sb) * .48);
  font-family: var(--display); font-size: var(--sb); font-weight: 300; letter-spacing: .06em; color: var(--ink);
  transform-origin: 0 0; will-change: transform;
  animation: splash-in 1s var(--ease-soft) .1s backwards;
}
.splash__name b { font-weight: 600; letter-spacing: .1em; }
.splash.is-split .splash__name { font-kerning: none; }   /* (a da barra tem as letras soltas, para a onda: sem kerning) */
.splash__mark { width: calc(var(--sb) * 1.524); height: calc(var(--sb) * 1.619); fill: var(--ink); overflow: visible; }
.splash__hop { transform-box: fill-box; transform-origin: 50% 100%; }
.splash.is-go .splash__hop { animation: splash-hop .6s linear .3s 3 both; }   /* (começa quando a entrada já está no ecrã: main.js) */
@keyframes splash-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* um saltinho: encolhe um pouco a ganhar balanço, sobe, cai e assenta (só transform) */
@keyframes splash-hop {
  0%   { transform: none; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  14%  { transform: scale(1.07, .9); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  48%  { transform: translateY(-52%) scale(.97, 1.04); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  80%  { transform: scale(1.06, .93); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  100% { transform: none; }
}
html.is-splash .nav, html.is-splash-dock .nav { opacity: 0; visibility: hidden; animation: none; }   /* (nem cliques nem foco na barra invisível) */
html.is-splash-swap .nav .brand { visibility: hidden; }   /* (a marca da entrada está exatamente por cima: trocam no mesmo frame) */
html.splashed .nav { animation: none; }
html.is-splash .hero__bg, html.is-splash .figure, html.is-splash .shadows { animation-play-state: paused; }
@media (pointer: fine) { html.is-splash.lenis-stopped { overflow: visible; } }   /* (a barra de scroll fica: a largura da página não muda; no toque, o dedo não faz scroll por baixo) */
/* (no telemóvel a marca da barra é 18px com o símbolo e o espaço iguais: as mesmas proporções, para encaixar certinha) */
@media (max-width: 900px) {
  .splash__brand { --sb: clamp(22px, 7.2vw, 30px); gap: calc(var(--sb) * .5556); }   /* (cabe em qualquer telemóvel, com margem) */
  .splash__mark { width: calc(var(--sb) * 1.7778); height: calc(var(--sb) * 1.8889); }
}
@media (prefers-reduced-motion: reduce) { .splash.is-go .splash__hop { animation: none; } .splash__brand { animation-duration: .4s; } }
/* de volta de ALL ABOUT KNOWLEDGE: o papel e o fio já estão no ecrã no primeiro desenho; o ecrã inicial não faz a
   entrada (já lá estava) — "returned" fica para as animações de entrada não recomeçarem quando "return" sai */
.ret-veil, .ret-line { display: none; }
html.return .ret-veil { display: block; position: fixed; inset: 0; z-index: 45; background: var(--paper-hero); pointer-events: none; }
html.return .ret-line { display: block; position: fixed; z-index: 46; height: 1px; margin-top: -.5px; background: var(--gold); pointer-events: none; will-change: transform; }
html.return .nav, html.returned .nav, html.return .hero__bg, html.returned .hero__bg, html.return .figure, html.returned .figure, html.return .shadows, html.returned .shadows { animation: none; }
html.return .rail { opacity: 0; }
/* (opção "levar a pérola": a pérola fica onde foi largada, por cima do papel, até a esfera verdadeira a substituir) */
.ret-pearl { display: none; position: fixed; z-index: 46; border-radius: 50%; pointer-events: none; background: url("assets/img/pearl.webp?v=20261014e") center / 100% 100% no-repeat; }
html:not(.return) .ret-pearl { display: none !important; }
.fly-line { position: fixed; z-index: 46; height: 1px; margin-top: -.5px; pointer-events: none; background: var(--gold); transform: scaleX(0); will-change: transform, opacity; }
html.is-rewind .nav, html.is-rewind .nav * { transition: none !important; }
html.is-diving:not(.is-flying) .hero__scene { will-change: transform; }   /* (só o mergulho na pérola mexe na cena toda) */
/* durante o mergulho o scroll fica parado sem esconder a barra de scroll (a página não salta de largura) */
@media (pointer: fine) { html.is-diving.lenis-stopped { overflow: visible; } }
.grab-shield.is-on { display: block; }
.saturn:focus-visible { outline: none; }
.saturn:focus-visible .sphere { outline: 2px solid var(--ink); outline-offset: 8px; }
html.is-diving .saturn:focus-visible .sphere { outline: none; }   /* o anel de foco não cresce com a câmara */
.fx-shield { position: fixed; inset: 0; z-index: 2147483000; touch-action: none; background: transparent; }
.saturn__world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
}
.sphere {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * var(--sd));
  height: calc(var(--u) * var(--sd));
  margin: calc(var(--u) * var(--sd) * -.5) 0 0 calc(var(--u) * var(--sd) * -.5);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--u) * 12) calc(var(--u) * .5) rgba(246, 222, 194, .38);   /* brilho ambiente; o volume está no render */
}
.sphere__clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.sphere__bandshadow {             /* sombra da faixa sobre a esfera (só o arco da frente) */
  position: absolute;
  left: 50%; top: 50%;
  width: 144%; height: 144%;
  margin: -72% 0 0 -72%;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--u) * var(--sd) * .035) calc(var(--u) * var(--sd) * .042) rgba(74, 48, 28, .62),
              inset 0 0 calc(var(--u) * var(--sd) * .035) calc(var(--u) * var(--sd) * .042) rgba(74, 48, 28, .62);
  clip-path: inset(50% -30% -30% -30%);
  opacity: 0;
  will-change: transform, opacity;
}
.sphere__ripple {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid #c89568; opacity: 0; pointer-events: none;
}
.sphere.is-pulse .sphere__ripple { animation: ripple 1.1s var(--ease-out); }
.sphere.is-pulse { animation: bump .7s var(--ease-out); }   /* só o toque (não volta a fazer a entrada: a esfera não pisca) */

.band {
  --R: calc(var(--u) * var(--sd) * .72); /* afastada da esfera */
  --hk: .19;                            /* a altura da fita, em raios (a fita da transição lê-a também: main.js ribText) */
  --h: calc(var(--R) * var(--hk));
  --w: calc(var(--R) * .06548 + 1px);   /* 96 painéis: 2·tan(1.875°), +1px de sobreposição (sem frestas) */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  /* --fx/--fy/--fz: a viagem até "Sobre nós" (clique na faixa) — a faixa vem na direção do ecrã */
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), var(--fz, 0px)) rotateZ(var(--rz, -6.7deg)) rotateX(var(--rx, -11deg)) scale3d(var(--rs, 1), var(--rs, 1), var(--rs, 1));
}
.band__spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.seg {
  position: absolute;
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  width: var(--w);
  height: var(--h);
  /* --wy/--wk: a fita ondula como uma bandeira (o painel sobe/desce e inclina-se para encaixar nos vizinhos) */
  transform: rotateY(var(--a)) translateZ(var(--R)) translateY(var(--wy, 0px)) skewY(var(--wk, 0deg));
  /* fita de cetim champanhe: lábio de cima dourado com um fio de luz, metade de cima um pouco mais escura,
     metade de baixo a apanhar a luz quente, lábio de baixo dourado escuro (as arestas estão no gradiente:
     sem bordas, por isso os painéis juntam-se sem degraus) */
  background:
    linear-gradient(to right, rgba(214, 168, 108, var(--ql, 0)), rgba(214, 168, 108, var(--qr, 0))),   /* dourado à frente-esquerda */
    linear-gradient(to bottom, #a3876a 0%, #f6e9d6 1.8%, #cbb399 4%, #e3d0bb 9%, #dfcab4 22%, #dcc6b0 34%, #e5d4c2 48%, #ecdccb 58%, #f3e4cf 70%, #f7e7d0 80%, #ecd5b9 88%, #cfae8b 94%, #b29273 98%, #9a7c61 100%);
}
.seg::before, .seg::after {      /* cada painel é opaco: na sobreposição o de cima tapa o de baixo (não se somam) */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.seg::before {                    /* reflexo da softbox: varia de forma contínua de um painel para o seguinte */
  z-index: 1;
  background: linear-gradient(to right, rgba(255, 251, 243, var(--sl, 0)), rgba(255, 251, 243, var(--sr, 0)));
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 12%, #000 80%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent 4%, #000 12%, #000 80%, transparent 92%);
}
.seg::after {                     /* sombreado (e o lado de dentro, dourado mais escuro), também contínuo */
  background: linear-gradient(to bottom, #6b5440, #9a7c5f 18%, #b0916f 60%, #8a6e54);
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, var(--hl, 0)), rgba(0, 0, 0, var(--hr, 0)));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, var(--hl, 0)), rgba(0, 0, 0, var(--hr, 0)));
}
/* um reflexo de luz percorre a fita de vez em quando (só transform, no compositor; de costas não se vê) */
.band__glint {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-150deg);
  animation: band-glint 8s cubic-bezier(.42, 0, .58, 1) 4.2s infinite;
}
.band:not(.is-whole) .band__glint { visibility: hidden; }
.glint {
  position: absolute;
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  width: calc(var(--w) - 1px);   /* sem sobreposição: o reflexo é semitransparente e não se pode somar */
  height: var(--h);
  margin-left: .5px;
  transform: rotateY(var(--a)) translateZ(calc(var(--R) + .8px)) translateY(var(--wy, 0px)) skewY(var(--wk, 0deg));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(to right, rgba(255, 251, 242, var(--gl, 0)), rgba(255, 251, 242, var(--gr, 0)));
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 24%, rgba(0, 0, 0, .55) 56%, transparent 94%);
  mask-image: linear-gradient(to bottom, transparent 4%, #000 24%, rgba(0, 0, 0, .55) 56%, transparent 94%);
  pointer-events: none;
}
@keyframes band-glint {
  0% { transform: rotateY(-150deg); }
  38% { transform: rotateY(150deg); }
  100% { transform: rotateY(150deg); }
}
.ch {
  position: absolute;
  width: 1.2em; height: 1.2em;
  left: -.6em; top: calc(var(--chy, 0) * 1em - .6em);   /* (--chy: acerto vertical de outro tipo de letra, ?letra=N) */
  line-height: 1.2em;
  text-align: center;
  font-family: var(--display);
  font-size: calc(max(12px, calc(var(--R) * .086)) * var(--chk, 1));   /* (--chk: outro tipo de letra com a mesma altura de maiúsculas) letras um pouco maiores (o espaço entre elas vem do número de casas da fita) */
  font-weight: 600;
  color: #12213f;
  text-shadow: 0 1px 0 rgba(255, 244, 228, .45);   /* letras ligeiramente gravadas na fita */
  transform: rotateY(var(--a)) translateZ(calc(var(--R) + 1.5px)) translateY(var(--wy, 0px)) rotate(var(--wr, 0deg));   /* com o tecido */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: var(--op, 1);
}
.ch--dot { color: var(--gold); }

/* ---------- 9. Secções ---------- */
.section { position: relative; padding: clamp(80px, 9vw, 136px) 0; }
/* ---------- fluxo contínuo: as secções seguem-se umas às outras (sem folhas) ---------- */
main > section[id] { position: relative; }
/* "Sobre nós" começa a chegar enquanto o logótipo voa para a navegação (sem ecrã vazio entre os dois) */
.js #sobre { margin-top: -55vh; margin-top: -55svh; }
.shead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(32px, 4.4vw, 64px);
  color: var(--text-2);
}
.shead .mono:first-child { color: var(--ink); }
.shead__line {
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease-soft);
}
.shead.is-in .shead__line { transform: none; }
.shead--light { color: rgba(251, 246, 239, .6); }
.shead--light .mono:first-child { color: var(--cream); }
.shead--light .shead__line { background: rgba(251, 246, 239, .18); }

.title {
  font-family: var(--display);
  font-size: clamp(32px, 4.3vw, 66px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.title strong { font-weight: 700; }
.note { color: var(--text-2); font-size: 16.5px; max-width: 400px; }

/* ---------- 10. Sobre ---------- */
/* começa logo abaixo do ponto mais baixo do braço 2 (nunca texto azul sobre azul) */
.manifesto {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 80px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.04em;
  max-width: 15em;
}
.manifesto .w {
  display: inline-block;
  opacity: var(--o, 1);
  transform: translateY(calc((1 - var(--o, 1)) * .14em));
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-soft);
}
.manifesto.is-live .w { --o: .12; }
.manifesto .w.is-strong { font-weight: 700; }

.about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(56px, 7vw, 104px);
}
.about__lead {
  grid-column: 1 / span 5;
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.about__side { grid-column: 7 / span 6; }
.about__body { color: var(--text-2); font-size: 17px; }
.pillars { margin-top: 40px; border-top: 1px solid var(--line); }
.pillars li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 500;
  transition: padding .5s var(--ease-out);
}
.pillars li .mono { color: var(--gold-ink); width: 18px; }
.pillars li:hover { padding-left: 12px; }

/* ---------- 11. Séries: aparecem à volta do logótipo, dentro do palco do ecrã inicial ---------- */
.sx {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  will-change: opacity, transform;
}
.sx:not(.is-live), .sx:not(.is-live) .sx__panel.is-on { pointer-events: none; }
.sx__inner {
  position: relative;
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(32px, 5vw, 96px);
  padding: calc(var(--nav-h) + clamp(4px, 1.5svh, 20px)) var(--gutter) max(clamp(18px, 4svh, 48px), env(safe-area-inset-bottom));
}
.sx__head { grid-column: 1 / -1; margin-bottom: clamp(10px, 2.2svh, 28px); }
.sx .shead__line { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-soft) .1s; }
.sx.is-in .shead__line { transform: none; }
.sx__symbol { grid-column: 1; grid-row: 2 / 4; min-height: 0; }      /* só se mede: o logótipo 3D desenha-se aqui por cima */
.sx__copy { grid-column: 2; grid-row: 2; align-self: safe center; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; transition: opacity .6s var(--ease-soft); }
.sx__panel { grid-area: 1 / 1; pointer-events: none; }
.sx__panel > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .4s var(--ease-soft), transform .7s var(--ease-soft);
}
.sx__panel.is-before > * { transform: translate3d(0, -14px, 0); }
.sx__panel.is-on { pointer-events: auto; }
.sx__panel.is-on > * { opacity: 1; transform: none; transition: opacity .7s var(--ease-soft), transform .9s var(--ease-soft); transition-delay: calc(.12s + var(--k, 0) * 70ms); }
/* introdução: título, texto e dica entram juntos (com o escalonamento), quando as séries chegam */
.js .sx:not(.is-in) #sx-intro > * { opacity: 0; transform: translate3d(0, 16px, 0); transition-delay: 0s; }
.sx__title { font-size: clamp(28px, 3.3vw, 54px); max-width: 15ch; }
.sx__lead { margin-top: clamp(14px, 2.4svh, 26px); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--text-2); max-width: 38ch; }
.sx__lead b { font-family: var(--display); font-weight: 600; color: var(--ink); }
.sx__hint { display: flex; gap: 12px; align-items: center; margin-top: clamp(18px, 3.2svh, 36px); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.sx__hint i { width: 30px; height: 1px; background: currentColor; transform-origin: 0 50%; }
.sx.is-in .sx__panel.is-on .sx__hint i { animation: cue 2.6s var(--ease-io) infinite; }
.sx__kicker { margin-bottom: 12px; font-size: 11.5px; letter-spacing: .08em; color: #6f5236; }
.sx__name { font-family: var(--display); font-size: clamp(30px, 3.2vw, 54px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; color: var(--ink); }
.sx__how { margin-top: 12px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #6f5236; }
.sx__text { margin-top: clamp(12px, 2svh, 22px); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: var(--text-2); max-width: 36em; }
.sx__ph { aspect-ratio: 16 / 9; max-height: 25svh; margin-top: clamp(14px, 2.4svh, 26px); border-radius: 16px; }
.sx__ph .ph__img { transform: scale(1.07); transition: transform 1.6s var(--ease-soft); }
.sx__panel.is-on .sx__ph .ph__img { transform: none; }
/* final: só o logótipo ao centro e uma linha por baixo */
.sx__final {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: max(9svh, 52px);
  z-index: 1;
  text-align: center;
}
.sx__final, .sx__final.is-on { pointer-events: none; }
.sx__final:focus { outline: none; }
.sx__eq { font-family: var(--display); font-size: clamp(20px, 1.9vw, 30px); font-weight: 300; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.sx__eq i { font-style: normal; font-weight: 300; color: #9c7651; margin: 0 .12em; }
.sx__eq b { font-weight: 600; letter-spacing: .02em; }
.sx__tag { margin-top: 12px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #6f5236; }
.sx[data-state="4"] .sx__copy, .sx[data-state="4"] .sx__index { opacity: 0; pointer-events: none; }

/* índice: IUMAN = i + U + MAN (os botões são os próprios símbolos) */
.sx__index {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  transition: opacity .6s var(--ease-soft);
  gap: clamp(6px, .9vw, 14px);
  margin-top: clamp(14px, 3svh, 32px);
}
.sx__btn {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 4px 12px;
  color: var(--text-2);
  transition: color .45s var(--ease-out);
}
.sx__btn svg { display: block; height: 24px; width: calc(24px * var(--gw, 1)); fill: currentColor; overflow: visible; opacity: .55; transition: transform .6s var(--ease-soft), opacity .45s var(--ease-out); }
.sx__btn:hover { color: var(--ink); }
.sx__btn:hover svg { transform: translateY(-3px); opacity: .85; }
.sx__btn[aria-current="step"] { color: var(--ink); }
.sx__btn[aria-current="step"] svg { opacity: 1; }
.sx__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.sx__lbl { font-family: var(--display); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.sx__op { padding-bottom: 14px; font-family: var(--mono); font-size: 14px; color: var(--gold); }
.sx__fill { position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.sx__fill b { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }


/* "AN" de MAN: letras redondas (a linguagem dos braços do logótipo). Com WebGL são peças 3D acetinadas como o M
   (main.js, tools/mesh3d/letters.mjs); sem WebGL ficam estas, planas, a subir por trás de uma máscara */
.figure.is-3d ~ .an { visibility: hidden; }
.an {
  position: absolute;
  left: 0; top: 0;
  z-index: 6;
  width: 620px; height: 320px;       /* 1 px = 1 unidade do logótipo; a escala vem do JS */
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
}
.an__m { position: absolute; top: 0; height: 320px; overflow: hidden; overflow: clip; }
.an__m--a { left: 0; width: 320px; }
.an__m--n { left: 320px; width: 300px; }
.an__m svg { display: block; width: 100%; height: 100%; overflow: visible; transform: translate3d(0, 108%, 0); will-change: transform; }
/* sombras do "AN" (1 px = 1 unidade do logótipo, centradas no centro de cada letra; a escala vem do JS) */
.sh.sh--an { width: 0; height: 0; transform-origin: 0 0; opacity: 0; }
.sh--an .sh__soft { left: -237px; top: -235px; width: 474px; height: 470px; }
.sh--an .sh__contact { left: -163px; top: -161px; width: 326px; height: 322px; }
.sh--an-n .sh__soft { left: -244px; top: -235px; width: 488px; height: 470px; }
.sh--an-n .sh__contact { left: -170px; top: -161px; width: 340px; height: 322px; }

/* ---------- 12. Faixa a meio: o braço azul volta, inclinado como à saída do ecrã inicial ---------- */
.marquee {
  position: relative;
  z-index: 2;
  width: 108vw;
  margin: clamp(40px, 5vw, 80px) 0 clamp(40px, 5vw, 80px) -4vw;
  padding: clamp(22px, 2.6vw, 38px) 0;
  overflow: hidden;
  transform: rotate(-2.5deg);
  background: linear-gradient(180deg, #3a4d70 0%, #22335a 14%, #17264a 45%, #0d1526 100%);
  color: var(--cream);
  box-shadow: 0 30px 46px -30px rgba(40, 30, 28, .38), inset 0 1px 0 rgba(251, 243, 233, .35), inset 0 -1px 0 rgba(0, 0, 0, .35);
  will-change: transform;
}
.marquee::before {             /* a mesma linha de luz do braço 2 */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 13%;
  height: 3px;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 243, 233, 0) 4%, rgba(251, 243, 233, .3) 30%, rgba(251, 243, 233, .12) 72%, rgba(251, 243, 233, 0));
  filter: blur(1.5px);
  pointer-events: none;
}
.marquee__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.5vw, 56px);
  width: max-content;
  will-change: transform;
}
.marquee span {
  font-family: var(--display);
  font-size: clamp(36px, 5.6vw, 92px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}
.marquee span.o { color: rgba(251, 246, 239, .42); font-weight: 300; }
.marquee i { width: clamp(10px, 1.1vw, 16px); height: clamp(10px, 1.1vw, 16px); border-radius: 50%; background: var(--gold); flex: none; }

/* ---------- 13. Impacto (horizontal) ---------- */
.impact { height: 220vh; }   /* o JS ajusta à distância real a percorrer */
.impact__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
}
.impact .shead { margin-bottom: clamp(24px, 3.5vh, 48px); }
.impact__top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(28px, 4.5vh, 56px);
}
.impact__top .note { justify-self: end; }
.hs { width: 100%; }
.hs__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 16px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));   /* simétrico: o último cartão acaba na margem da coluna */
  will-change: transform;
}
.panel {
  position: relative;
  isolation: isolate;
  width: clamp(320px, 31vw, 520px);
  height: clamp(350px, 49vh, 480px);
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  outline: none;
  transition: translate .8s var(--ease-soft), border-color .6s, color .5s var(--ease-out), box-shadow .6s var(--ease-out), transform .25s linear;
}
.panel::before {             /* laca azul-noite que aparece no hover */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg, #2a3a57 0%, #17264a 48%, #0d1526 100%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.panel__n { color: var(--text-3); transition: color .5s; }
.panel__glyph {
  width: 50px; height: 50px;
  margin: 0;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  overflow: visible;
  /* sombra do símbolo: o cursor é a luz */
  filter: drop-shadow(var(--gsx, -2px) var(--gsy, 5px) var(--gsb, 4px) var(--gsc, rgba(30, 22, 18, .26)));
  transition: stroke .5s, transform 1.2s var(--ease-soft);
}
.panel__glyph .f { fill: var(--ink); stroke: none; transition: fill .5s; }
.panel h3 {
  font-family: var(--display);
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.panel p { margin-top: 10px; color: var(--text-2); transition: color .5s; }
.panel.is-focus { translate: 0 -10px; border-color: rgba(201, 162, 124, .6); box-shadow: 0 30px 60px -40px rgba(13, 21, 38, .35); }
.panel.is-focus .panel__n { color: var(--gold-ink); }
.panel.is-focus .panel__glyph { transform: scale(1.08); }
.panel:hover, .panel:focus-visible { color: var(--cream); border-color: transparent; box-shadow: 0 40px 70px -40px rgba(13, 21, 38, .6); }
.panel:hover::before, .panel:focus-visible::before { opacity: 1; }
.panel:hover .panel__n, .panel:focus-visible .panel__n { color: var(--gold); }
.panel:hover p, .panel:focus-visible p { color: rgba(251, 246, 239, .72); }
.panel:hover .panel__glyph, .panel:focus-visible .panel__glyph { stroke: #dcc6ad; transform: rotate(90deg) scale(1.06); }
.panel:hover .panel__glyph .f, .panel:focus-visible .panel__glyph .f { fill: var(--gold); }
.panel:hover .panel__glyph, .panel:focus-visible .panel__glyph { --gsc: rgba(2, 6, 16, .6); }
.panel__body { padding: 18px 22px 16px; }
.panel__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel .ph { flex: 1 1 auto; min-height: 110px; border-radius: 15px; }
/* a fotografia "revela-se" (de impressão a cores) quando o cartão chega ao centro ou recebe o cursor */
.panel .ph__img {
  will-change: transform;           /* paralaxe no carril horizontal */
  filter: saturate(.16) sepia(.22) brightness(1.05) contrast(.92);
  transition: filter 1.3s var(--ease-soft);
}
.panel.is-focus .ph__img, .panel:hover .ph__img, .panel:focus-visible .ph__img { filter: none; }

/* ---------- 13b. Fotografias (Higgsfield) ---------- */
.ph {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  border-radius: 18px;
  background: var(--sand);
}
.ph::after {                     /* filete fino: a foto assenta no papel */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(27, 42, 71, .07);
  pointer-events: none;
}
.ph__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}


.hs__bar { position: relative; margin-top: clamp(24px, 4vh, 44px); height: 1px; background: var(--line); }
.hs__bar span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; will-change: transform; }

/* ---------- 14. Pessoas ---------- */
.people { padding-bottom: clamp(110px, 12vw, 190px); }
.people__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: center;
}
.people__badge { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
.people__badge::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 150, 96, .26), rgba(242, 150, 96, 0));
}
.badge__text { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.badge__text text { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: .04em; fill: var(--ink); }
.badge__core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(201, 162, 124, .6);
  display: grid;
  place-items: center;
}
.badge__shadow {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 34, 30, .34), rgba(46, 34, 30, .12) 60%, rgba(46, 34, 30, 0));
  transform: translate3d(-5%, 10%, 0) scale(1.08);
  will-change: transform;
}
.badge__core > img { grid-area: 1 / 1; width: 70%; height: auto; }
.badge__logoshadow { position: relative; z-index: 0; opacity: .55; transform: translate3d(-6px, 9px, 0); will-change: transform; }
.badge__logo { position: relative; z-index: 1; }

.people__lead {
  margin-top: 36px;
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
  letter-spacing: -.01em;
}
.people__body { margin-top: 20px; color: var(--text-2); font-size: 16.5px; max-width: 600px; }
.creds { margin-top: 40px; }
.creds > div {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
}
.creds > div::before, .creds > div:last-child::after {  /* as linhas desenham-se ao entrar */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-soft);
}
.creds > div:last-child::after { top: auto; bottom: 0; }
.creds.is-in > div::before, .creds.is-in > div:last-child::after { transform: none; }
.creds.is-in > div:nth-child(2)::before { transition-delay: .08s; }
.creds.is-in > div:nth-child(3)::before { transition-delay: .16s; }
.creds.is-in > div:last-child::after { transition-delay: .24s; }
.creds dt { color: var(--text-3); padding-top: 3px; }
.creds dd { font-weight: 500; transition: transform .5s var(--ease-out); }
.creds > div:hover dd { transform: translateX(8px); }

/* ---------- 15. Contacto + footer ---------- */
.contact {
  position: relative;
  color: var(--cream);
  padding-top: clamp(90px, 11vw, 160px);
}
.contact__inner { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; }
.contact__title {
  margin-top: clamp(36px, 5vw, 72px);
  font-family: var(--display);
  font-size: clamp(36px, 5.6vw, 92px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 12.5em;
  text-wrap: balance;
}
.contact__title strong { font-weight: 600; }
.contact__cta {
  display: flex;
  align-items: baseline;
  gap: 18px 44px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 6vw, 88px);
}
.contact__mail {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: 400;
  letter-spacing: -.02em;
  padding-bottom: 8px;
}
.contact__mail::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform .8s var(--ease-soft);
}
.contact__mail:hover::after { transform: scaleX(.25); }
.contact__mail svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .7s var(--ease-soft); }
.contact__mail:hover svg { transform: rotate(45deg); }
.contact__link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251, 246, 239, .62);
  transition: color .3s;
}
.contact__link:hover { color: var(--cream); }

.footer { margin-top: clamp(80px, 10vw, 140px); }
.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 30px;
  border-top: 1px solid rgba(251, 246, 239, .12);
  color: rgba(251, 246, 239, .6);
}
.footer__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); font-family: var(--display); font-size: 15px; letter-spacing: .02em; }
.footer__brand b { font-weight: 600; }
.footer__mark { width: 21px; height: 22px; fill: currentColor; }
.footer__nav { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.footer__nav a { transition: color .3s; }
.footer__nav a:hover { color: var(--cream); }
.footer__meta { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- 16. Entradas (suaves, com desaceleração natural) ---------- */
.reveal {
  transition: opacity .8s var(--ease-soft) var(--rd, 0s), transform 1s var(--ease-soft) var(--rd, 0s), translate .8s var(--ease-soft), border-color .6s, color .5s var(--ease-out), box-shadow .6s var(--ease-out);
}
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(22px); }
.js .reveal--pop:not(.is-in) { transform: scale(.94); }
.js .shead.reveal:not(.is-in) { transform: none; }
/* títulos: palavra a palavra, de um ligeiro desfoque para nítido */
.wd { display: inline-block; vertical-align: top; }
.wd__in {
  display: inline-block;
  transition: opacity .6s var(--ease-soft), transform .8s var(--ease-soft), filter .6s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 24ms);
}
.js [data-split]:not(.is-split-in) .wd__in { opacity: 0; transform: translateY(.3em); filter: blur(4px); }
.hs__track .panel:nth-child(2) { --rd: .08s; }
.hs__track .panel:nth-child(3) { --rd: .16s; }
.hs__track .panel:nth-child(4) { --rd: .24s; }
.about__side { --rd: .1s; }
.people__body { --rd: .08s; }
.creds { --rd: .14s; }
.contact__cta { --rd: .1s; }

/* ---------- 17. Keyframes ---------- */
@keyframes dock { 0% { transform: scale(1.45); } 55% { transform: scale(.92); } 100% { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes soft-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes figure-in { 0% { opacity: 0; transform: translateY(3%) scale(.985); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ripple { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes bump { 0% { scale: 1; } 35% { scale: .95; } 70% { scale: 1.03; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .band__glint { display: none; } }
@keyframes cue { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- 18. Responsive ---------- */
@media (max-width: 1280px) {
  .rail { display: none; }
}

@media (max-width: 900px) {
  :root {
    --nav-h: 72px;
    --u: min(1svh, 1.08vw);
    --cx: 21vw; --cy: 47svh;
    --sx: 52vw; --sy: 27svh;
  }
  .saturn { --sd: 46; }
  .hero__glow { --gw: 80%; --gh: 42%; --ga: .75; }
  .hero__bg {
    background:
      radial-gradient(60% 34% at -6% 100%, rgba(150, 118, 98, .26), rgba(150, 118, 98, 0) 72%),
      radial-gradient(80% 45% at 115% 40%, rgba(176, 182, 196, .3), rgba(176, 182, 196, 0) 70%),
      radial-gradient(70% 50% at 60% 30%, #fffaf2, rgba(255, 250, 242, 0) 75%),
      linear-gradient(180deg, #fcf1e4 0%, #fbefe2 52%, #faeee3 100%);
  }
  .brand { font-size: 18px; }

  .about__lead, .about__side { grid-column: 1 / -1; }
  .impact__top { grid-template-columns: 1fr; gap: 20px; }
  .impact__top .note { justify-self: start; }

  .impact { height: auto !important; padding: clamp(80px, 9vw, 136px) 0; }
  .impact__sticky { position: static; height: auto; overflow: visible; padding-top: 0; }
  .hs { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .hs::-webkit-scrollbar { display: none; }
  .hs__track { padding: 16px var(--gutter); transform: none !important; }
  .panel { width: min(80vw, 340px); height: auto; scroll-snap-align: start; }
  .panel .ph { flex: none; aspect-ratio: 16 / 10; min-height: 0; }

  .people__grid { grid-template-columns: 1fr; }
  .people__badge { width: min(78%, 360px); }
  .creds > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 520px) {
  .footer__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 28px; }
  .footer__row { flex-direction: column; align-items: flex-start; }
}

/* séries em ecrã alto (telemóvel ao alto / tablet ao alto) — mesmo critério do JS (W < 0,9 H) */
@media (max-aspect-ratio: 9/10) {
  .sx__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(30svh, 1fr) auto auto; row-gap: 10px; }
  .sx__symbol { grid-column: 1; grid-row: 2; }
  .sx__copy { grid-column: 1; grid-row: 3; align-self: end; }
  .sx__index { grid-column: 1; grid-row: 4; justify-content: space-between; margin-top: 4px; flex-wrap: nowrap; }
  .sx__ph, .sx__hint, .sx__lbl, .sx__how { display: none; }
  .sx__btn { min-height: 48px; min-width: 44px; justify-content: center; padding: 12px 6px; }
  .sx__title { font-size: clamp(26px, 7.4vw, 40px); }
  .sx__name { font-size: clamp(26px, 7vw, 36px); }
  .sx__text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-height: 760px) { .sx__ph { display: none; } }
@media (max-aspect-ratio: 9/10) and (max-height: 640px) {
  .sx__inner { grid-template-rows: auto minmax(24svh, 1fr) auto auto; }
  .sx__lead, .sx__text { -webkit-line-clamp: 2; }
  .sx__lead { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-aspect-ratio: 9/10) and (max-height: 540px) { .sx__lead, .sx__text { display: none; } }
/* ecrãs largos mas estreitos para o índice: só os símbolos */
@media (max-width: 1180px) and (min-aspect-ratio: 9/10) { .sx__lbl { display: none; } .sx__index { gap: 10px; } }
/* telemóvel deitado: menos texto, nada a sobrepor a navegação */
@media (min-aspect-ratio: 9/10) and (max-height: 520px) {
  .sx__head { display: none; }
  .sx__hint, .sx__how, .sx__lbl, .sx__ph, .sx__tag { display: none; }
  .sx__title, .sx__name { font-size: clamp(20px, 6.4svh, 26px); }
  .sx__lead, .sx__text { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; }
  .sx__index { justify-content: space-between; margin-top: 8px; }
  .sx__final { bottom: 18px; }
}
/* toque: alvos de pelo menos 44px */
@media (pointer: coarse) {
  .sx__btn { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* sem JavaScript: as séries aparecem como uma secção normal */
html.deep .hero__bg { animation: none; opacity: 0; }
html.deep-hold .hero__stage { visibility: hidden; }

html:not(.js) .hero { height: auto; }
html:not(.js) .hero__stage { position: relative; height: auto; overflow: visible; padding-top: 100svh; }
html:not(.js) .figure, html:not(.js) .shadows { top: 0; bottom: auto; height: 100svh; overflow: hidden; }
html:not(.js) .sx { position: relative; opacity: 1; transform: none; }
html:not(.js) .sx__inner { height: auto; }
html:not(.js) .sx__panel, html:not(.js) .sx__final { position: static; grid-area: auto; }
html:not(.js) .sx__panel > * { opacity: 1; transform: none; }
html:not(.js) .sx__index, html:not(.js) .an { display: none; }
html:not(.js) .sx, html:not(.js) .sx__panel { pointer-events: auto; }
html:not(.js) .hw { opacity: 1; transform: none; filter: none; }
html:not(.has-flow) .contact {
  background:
    radial-gradient(42% 38% at 12% 34%, rgba(42, 58, 87, .75), rgba(42, 58, 87, 0) 70%),
    linear-gradient(180deg, #132344 0, #111f3c 55%, #0b1427 100%);
}

@media (prefers-reduced-motion: reduce) {
  .sx__panel > *, .sx__ph .ph__img { transform: none !important; transition-duration: .25s !important; }
  .sx__hint i { animation: none; }
}

/* =========================================================
   19. 02 Sobre nós → fim: editorial, minimalista (tudo sob .ed ou ids)
   ========================================================= */
:root {
  --g-gap: clamp(16px, 1.6vw, 28px);
  --hair: rgba(27, 42, 71, .16);
  --hair-l: rgba(251, 246, 239, .16);
  --band: var(--navy-750);
  --label: #6f5236;
  --t-xl: clamp(40px, 6.4vw, 116px);
  --t-l: clamp(34px, 4.4vw, 76px);
}

/* fundo: três chãos planos (papel → areia → azul-noite) */
.fb--paper { background: var(--paper); }
.fb--sand2 { background: var(--sand); }
.fb--paper::after, .fb--sand2::after { opacity: .18; }

/* cabeçalho de secção: filete por cima (desenhado pelo scroll), índice + nome */
.ed .shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g-gap); position: relative; padding-top: 14px; margin-bottom: clamp(40px, 6vw, 104px); color: var(--ink); }
.ed .shead .mono { font-size: 11px; letter-spacing: .14em; }
.ed .shead .mono:first-child { grid-column: 1; grid-row: 1; color: var(--label); }
.ed .shead .mono:last-child { grid-column: 2 / span 5; grid-row: 1; }
.ed .shead__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; flex: none; background: var(--hair); transition: none; }
.ed .shead--light { color: var(--cream); }
.ed .shead--light .mono:first-child { color: var(--gold); }
.ed .shead--light .shead__line { background: var(--hair-l); }

/* títulos: leves, com a palavra forte a 600; entrada por máscara (sem desfoque) */
.ed .title { font-size: var(--t-l); font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.ed .title strong { font-weight: 600; }
.ed .wd { overflow: hidden; overflow: clip; padding: .12em .04em .16em; margin: -.12em -.04em -.16em; }
.ed .wd__in { transition: opacity .5s var(--ease-soft), transform .9s var(--ease-soft); transition-delay: calc(var(--i, 0) * 32ms); }
.js .ed [data-split]:not(.is-split-in) .wd__in { opacity: 0; transform: translate3d(0, 120%, 0); filter: none; }

/* ---------- 02 Sobre ---------- */
#sobre .manifesto { font-size: var(--t-xl); font-weight: 300; line-height: .98; letter-spacing: -.045em; max-width: 11.6em; }
#sobre .manifesto .w.is-strong { font-weight: 600; }
#sobre .about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(64px, 7vw, 120px) var(--g-gap); margin-top: clamp(88px, 11vw, 200px); }
#sobre .about__lead { grid-column: 1 / span 5; padding-top: 18px; border-top: 1px solid var(--hair); font-size: clamp(20px, 1.6vw, 27px); line-height: 1.36; letter-spacing: -.015em; max-width: 22ch; }
#sobre .about__body { grid-column: 7 / span 5; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--text-2); font-size: 17px; line-height: 1.65; max-width: 40ch; --rd: .1s; }
#sobre .pillars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g-gap); margin: 0; border: 0; --rd: .15s; }
#sobre .pillars li { position: relative; display: block; padding: 18px 0 0; border: 0; font-family: var(--display); font-size: clamp(20px, 1.75vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; transition: none; }
#sobre .pillars li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-soft); }
#sobre .pillars.is-in li::before { transform: none; }
#sobre .pillars li:nth-child(2)::before { transition-delay: .09s; }
#sobre .pillars li:nth-child(3)::before { transition-delay: .18s; }
#sobre .pillars li:hover { padding-left: 0; }

/* ---------- faixa: plana, uma só cor (a mesma laca dos braços e da esfera) ---------- */
.marquee.ed { width: 100%; margin: clamp(120px, 14vw, 240px) 0 0; padding: clamp(18px, 2vw, 34px) 0; transform: none; background: var(--band); box-shadow: inset 0 1px 0 rgba(201, 162, 124, .45); will-change: auto; }
.marquee.ed::before { content: none; }
.marquee.ed span { font-size: clamp(40px, 7vw, 128px); font-weight: 600; letter-spacing: -.045em; }
.marquee.ed span.o { font-weight: 300; color: rgba(251, 246, 239, .5); }
.marquee.ed i { width: clamp(7px, .6vw, 11px); height: clamp(7px, .6vw, 11px); }

/* ---------- 03 Impacto ---------- */
#impacto .impact__sticky { padding-top: var(--nav-h); }
#impacto .shead { margin-bottom: clamp(24px, 4svh, 56px); }
#impacto .impact__top { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g-gap); margin-bottom: clamp(28px, 5svh, 64px); }
#impacto .impact__top .title { grid-column: 1 / span 8; font-size: clamp(34px, min(4.4vw, 8svh), 76px); }
#impacto .impact__top .note { grid-column: 10 / span 3; justify-self: stretch; font-size: 15px; line-height: 1.6; max-width: 30ch; }
#impacto .hs__track { gap: clamp(28px, 3.2vw, 64px); padding-top: 0; padding-bottom: 0; }
#impacto .panel, #impacto .panel.is-focus, #impacto .panel:hover { width: clamp(260px, min(24vw, 40svh), 420px); height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; translate: none; color: inherit; transition: none; }
#impacto .panel::before { content: none; }
#impacto .panel .ph { flex: none; aspect-ratio: 3 / 2; min-height: 0; border-radius: 2px; }
#impacto .panel__body { position: relative; padding: 16px 0 0; }
#impacto .panel__body::before, #impacto .panel__body::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair); }
#impacto .panel__body::after { background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-soft); }
#impacto .panel.is-focus .panel__body::after { transform: none; }
#impacto .panel__n { display: block; margin-bottom: 14px; font-size: 11px; letter-spacing: .14em; color: var(--text-3); }
#impacto .panel.is-focus .panel__n, #impacto .panel:hover .panel__n { color: var(--label); }
#impacto .panel h3 { font-size: clamp(20px, 1.6vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
#impacto .panel p, #impacto .panel:hover p { font-size: 15px; line-height: 1.55; max-width: 30ch; color: var(--text-2); }
#impacto .hs__bar { margin-top: clamp(28px, 5svh, 56px); background: var(--hair); }
@media (min-width: 901px) and (max-height: 760px) { #impacto .panel .ph { aspect-ratio: 16 / 9; } }

/* ---------- 04 Pessoas ---------- */
#pessoas.people { padding-bottom: clamp(64px, 6vw, 96px); }
#pessoas .people__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--g-gap); align-items: start; }
#pessoas .people__badge { grid-column: 1 / span 4; width: 100%; max-width: 400px; margin: 0; position: sticky; top: calc(var(--nav-h) + 6svh); }
#pessoas .people__badge::before { content: none; }
#pessoas .badge__text text { font-family: var(--mono); font-size: 14px; font-weight: 400; letter-spacing: .3em; fill: var(--ink); }
#pessoas .badge__core { background: none; border: 1px solid rgba(201, 162, 124, .7); }
#pessoas .people__copy { grid-column: 6 / span 7; }
#pessoas .people__lead { margin-top: clamp(32px, 4vw, 64px); font-size: clamp(19px, 1.45vw, 24px); line-height: 1.45; max-width: 30em; }
#pessoas .people__body { margin-top: 20px; font-size: 16px; line-height: 1.7; max-width: 36em; }
#pessoas .creds { margin-top: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g-gap); }
#pessoas .creds > div { grid-template-columns: 1fr; gap: 12px; padding: 16px 0 0; align-content: start; }
#pessoas .creds > div::before { background: var(--ink); }
#pessoas .creds > div:last-child::after { content: none; }
#pessoas .creds dt { padding: 0; font-size: 11px; letter-spacing: .14em; color: var(--label); }
#pessoas .creds dd, #pessoas .creds > div:hover dd { font-family: var(--display); font-size: clamp(16px, 1.2vw, 19px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; transform: none; }

/* ---------- 05 Contacto + footer ---------- */
#contacto.contact { padding-top: clamp(64px, 6vw, 96px); }
#contacto .contact__inner { min-height: 88svh; justify-content: flex-start; padding-top: clamp(24px, 6svh, 72px); }
#contacto .contact__title { margin-top: 0; font-size: clamp(40px, min(7.4vw, 12.5svh), 106px); font-weight: 300; line-height: .98; letter-spacing: -.045em; max-width: 11.5em; }
#contacto .contact__title strong { font-weight: 600; }
#contacto .contact__cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g-gap); align-items: baseline; margin-top: clamp(40px, min(8vw, 10svh), 140px); padding-top: 22px; border-top: 1px solid var(--hair-l); }
#contacto .contact__mail { grid-column: 1 / span 8; justify-self: start; font-size: clamp(28px, 3.6vw, 64px); font-weight: 300; letter-spacing: -.03em; }
#contacto .contact__link { grid-column: 10 / span 3; justify-self: end; font-size: 11px; letter-spacing: .14em; color: var(--gold); }
#contacto .contact__link:hover { color: var(--cream); }
#contacto .footer { margin-top: clamp(96px, 12vw, 200px); }
#contacto .footer__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g-gap); align-items: center; border-top: 1px solid var(--hair-l); padding-block: 22px 32px; }
#contacto .footer__brand { grid-column: 1 / span 3; justify-self: start; }
#contacto .footer__nav { grid-column: 5 / span 5; gap: 24px; font-size: 13px; }
#contacto .footer__meta { grid-column: 10 / span 3; justify-self: end; }

/* ---------- sem JS: tudo visível; no computador o Impacto é uma grelha de 4 ---------- */
html:not(.js) .ed .shead__line { transform: none; }
@media (min-width: 901px) {
  html:not(.js) #impacto.impact { height: auto; padding: clamp(80px, 9vw, 136px) 0; }
  html:not(.js) #impacto .impact__sticky { position: static; height: auto; overflow: visible; padding-top: 0; }
  html:not(.js) #impacto .hs__track { width: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
  html:not(.js) #impacto .panel { width: auto; }
  html:not(.js) #impacto .hs__bar { display: none; }
  html:not(.js) #impacto .ph__img { filter: none; }
}

/* ---------- movimento reduzido: sem deslocações; o Impacto não fica preso ---------- */
@media (prefers-reduced-motion: reduce) {
  .ed .shead__line, #sobre .pillars li::before, #impacto .panel__body::after, #pessoas .creds > div::before { transition: none; }
  .js .ed .shead .shead__line { transform: none; }
  .js .ed [data-split]:not(.is-split-in) .wd__in { transform: none; }
  .ed .wd__in { transition: opacity .25s linear; transition-delay: 0s; }
  .js .ed .reveal:not(.is-in) { transform: none; }
  .ed .reveal { transition-duration: .25s; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  #impacto.impact { height: auto !important; padding: clamp(80px, 9vw, 136px) 0; }
  #impacto .impact__sticky { position: static; height: auto; overflow: visible; padding-top: 0; }
  #impacto .hs__track { width: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); transform: none !important; }
  #impacto .panel, #impacto .panel.is-focus, #impacto .panel:hover { width: auto; }
  #impacto .hs__bar { display: none; }
  #impacto .ph__img { filter: none; transform: none !important; }
}

/* ---------- telemóvel / tablet ---------- */
@media (max-width: 900px) {
  .ed .shead { grid-template-columns: 48px minmax(0, 1fr); }
  .ed .shead .mono:last-child { grid-column: 2; }
  #sobre .about__lead, #sobre .about__body, #sobre .pillars { grid-column: 1 / -1; }
  #sobre .about__grid { row-gap: 40px; }
  #sobre .pillars { grid-template-columns: 1fr; }
  #sobre .pillars li { padding: 14px 0 18px; font-size: 20px; }
  #impacto .impact__top .title, #impacto .impact__top .note { grid-column: 1 / -1; }
  #impacto .impact__top .note { margin-top: 18px; }
  #impacto .panel, #impacto .panel.is-focus, #impacto .panel:hover { width: min(76vw, 300px); }
  #pessoas .people__badge, #pessoas .people__copy { grid-column: 1 / -1; }
  #pessoas .people__badge { position: relative; top: auto; width: min(64vw, 260px); margin: 0 0 48px; }
  #pessoas .creds { grid-template-columns: 1fr; }
  #pessoas .creds > div { gap: 6px; padding: 14px 0 18px; }
  #contacto .contact__inner { min-height: 0; padding-bottom: 8px; }   /* sem vazio entre o contacto e o rodapé */
  #contacto .footer { margin-top: clamp(72px, 16vw, 120px); }
  #contacto .contact__cta { grid-template-columns: 1fr; row-gap: 22px; }
  #contacto .contact__mail, #contacto .contact__link { grid-column: 1; justify-self: start; }
  #contacto .contact__link { padding-block: 12px; }
  #contacto .footer__row { grid-template-columns: 1fr; row-gap: 20px; }
  #contacto .footer__brand, #contacto .footer__nav, #contacto .footer__meta { grid-column: 1; justify-self: start; }
  #contacto .footer__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 28px; }
  #contacto .footer__nav a { padding: 12px 0; }
}
@media (max-width: 520px) {
  #sobre .manifesto { font-size: clamp(34px, 10.2vw, 48px); }
  .ed .title, #impacto .impact__top .title { font-size: clamp(30px, 8.6vw, 40px); }
  #contacto .contact__title { font-size: clamp(36px, 10.6vw, 52px); }
  .marquee.ed span { font-size: 40px; }
}