/* =========================================================
   COSMOS — Folha de estilo principal
   Systems + Growth · PT-PT
   Estrutura:
   01 Tokens · 02 Reset · 03 Tipografia · 04 Layout
   05 Botões · 06 Topbar/Header · 07 Hero · 08 Clientes
   09 Áreas · 10 Método · 11 Números · 12 Setores
   13 Diagnóstico · 14 Testemunho · 15 Equipa · 16 FAQ
   17 CTA · 18 Rodapé · 19 Animação · 20 Responsivo
   ========================================================= */

/* 01 ---------------------------------------------- Tokens */
:root {
  --bg:          #05070f;
  --bg-2:        #0a0e1b;
  --surface:     #0f1424;
  --surface-2:   #151b2e;
  --line:        rgba(255, 255, 255, .08);
  --line-2:      rgba(255, 255, 255, .15);

  --ink:         #eef3f9;
  --ink-2:       #a7b6ca;
  --ink-3:       #74849b;

  --turq:        #2ee6c5;
  --cyan:        #22c3e8;
  --blue:        #2a6bf2;
  --violet:      #7c4de0;

  --grad:        linear-gradient(135deg, #2ee6c5 0%, #22c3e8 45%, #2a6bf2 100%);
  --grad-soft:   linear-gradient(135deg, rgba(46, 230, 197, .16), rgba(42, 107, 242, .16));

  --font-head:   "Space Grotesk", "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body:   "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  /* Etiquetas, migalhas, datas e contadores. Era JetBrains Mono; passou a
     Inter a pedido do cliente (18/08/2026). O nome da variável fica como
     está para não mexer em duzentas regras — a monoespaçada a sério é a
     --font-code, e só serve os blocos de código do blog. */
  --font-mono:   "Inter", "Segoe UI", system-ui, sans-serif;
  --font-code:   "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --wrap:        1200px;
  --gut:         24px;
  --r-sm:        8px;
  --r:           14px;
  --r-lg:        22px;

  --shadow:      0 18px 50px -22px rgba(0, 0, 0, .9);
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --out:         cubic-bezier(.16, 1, .3, 1);      /* expo-out: entradas longas */
  --spring:      cubic-bezier(.34, 1.4, .42, 1);   /* ligeiro ressalto */
}

/* 02 ----------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* barra fixa de 78px + folga */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--turq); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: #6ff2da; }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }

::selection { background: rgba(46, 230, 197, .3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--turq);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--turq);
  color: #04121a;
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.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;
}

/* 03 ------------------------------------------- Tipografia */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0;
  color: #fff;
}

h1 { font-size: clamp(2.35rem, 1.35rem + 3.4vw, 4.05rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.28; }
h4 { font-size: 1.02rem; line-height: 1.35; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: #fff; }

.lead {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem);
  color: var(--ink-2);
  line-height: 1.62;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sobrelinha de secção */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: .765rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--turq);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--turq));
}

/* 04 ---------------------------------------------- Layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section { position: relative; }

/* 108px de cada lado somavam 216px entre secções — respiro a mais.
   Com 82px o vão desce para 164px e a página deixa de se arrastar. */
.sec { padding-block: clamp(52px, 6vw, 82px); }
.sec--tight { padding-block: clamp(40px, 4.4vw, 60px); }
.sec--alt { background: var(--bg-2); }

.sec-head { max-width: 720px; margin-bottom: 42px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow::before { display: none; }
.sec-head p { margin-top: 18px; }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Cartão base */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 28px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.card:hover {
  border-color: rgba(46, 230, 197, .34);
  background: var(--surface-2);
  transform: translateY(-3px);
}

/* Ícone em quadro */
.ico {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--grad-soft);
  border: 1px solid rgba(46, 230, 197, .22);
  margin-bottom: 20px;
  flex: none;
}
.ico svg { width: 24px; height: 24px; stroke: var(--turq); fill: none; stroke-width: 1.6; }

/* 05 ---------------------------------------------- Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: .935rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease), color .2s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary {
  background: var(--grad);
  color: #04121a;
  box-shadow: 0 10px 30px -12px rgba(46, 230, 197, .6);
}
.btn--primary:hover {
  color: #04121a;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -12px rgba(46, 230, 197, .75);
}

.btn--ghost {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line-2);
  color: var(--ink);
}
.btn--ghost:hover {
  color: #fff;
  border-color: rgba(46, 230, 197, .5);
  background: rgba(46, 230, 197, .08);
  transform: translateY(-2px);
}

.btn--sm { padding: 10px 18px; font-size: .875rem; }
.btn--block { width: 100%; }

/* Ligação com seta */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .93rem;
}
.link-arrow svg {
  width: 15px; height: 15px;
  transition: transform .25s var(--ease);
}
.link-arrow:hover svg { transform: translateX(4px); }

/* 06 --------------------------------------- Cabeçalho / Menu */

/* Linha de progresso da leitura, colada ao topo do ecrã */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 300;
  background: var(--grad);
  transform: scaleX(var(--read, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Barra plana sobre o hero: hairline em baixo, cantos vivos.
   Ao rolar ganha fundo desfocado, sem mudar de forma. */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  transition: background .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid var(--line);
}
.hdr.is-stuck {
  background: rgba(6, 9, 18, .8);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--line-2);
}

.hdr__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 78px;
  padding-inline: var(--gut);
  transition: height .45s var(--ease);
}
.hdr.is-stuck .hdr__inner { height: 68px; }

.langs { display: flex; align-items: center; gap: 2px; }
.langs a {
  padding: 3px 7px;
  border-radius: 4px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.langs a:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.langs a[aria-current="true"] { color: var(--turq); background: rgba(46, 230, 197, .1); }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img {
  width: 32px; height: 40px;
  object-fit: contain;
  transition: transform .6s var(--spring);
}
.brand:hover img { transform: rotate(-12deg) scale(1.08); }
.brand__name {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .085em;
  color: #fff;
  line-height: 1;
}
.brand:hover .brand__name { color: #fff; }

/* Navegação: sublinhado fino que cresce a partir da esquerda */
.nav { margin-inline: auto; }
/* só existe dentro do painel lateral do telemóvel */
.nav__rodape { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}

.nav__li { position: static; }
.nav__a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: .885rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.nav__a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--turq);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .42s var(--out);
}
.nav__a:hover, .nav__li.is-open > .nav__a { color: #fff; }
.nav__a:hover::after, .nav__li.is-open > .nav__a::after { transform: scaleX(1); }
.nav__a[aria-current="page"] { color: #fff; }
.nav__a[aria-current="page"]::after { transform: scaleX(1); background: var(--line-2); }
.nav__a .caret {
  width: 10px; height: 10px;
  opacity: .55;
  transition: transform .35s var(--spring);
}
.nav__li.is-open .caret { transform: rotate(180deg); }

/* Painel largo, ancorado à cápsula do cabeçalho */
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 0; right: 0;
  z-index: 5;
  padding: 26px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(158deg, #080d1a 0%, #0b1424 58%, #080f1c 100%);
  box-shadow: 0 44px 100px -46px rgba(0, 0, 0, 1);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -12px, 0) scale(.986);
  transform-origin: 50% 0;
  transition: opacity .32s var(--ease), transform .42s var(--spring), visibility .32s;
}
.nav__li.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}
/* ponte invisível para o rato não perder o painel a meio caminho */
.mega::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}

.mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 268px;
  gap: 22px;
}
.mega__label {
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--turq);
  /* Alinhado com o título de cada item e não com o ícone: 12px do padding
     do item + 34px do selo + 12px do intervalo. Encostado a 12px, o rótulo
     ficava 46px à esquerda dos títulos que encabeça. */
  margin: 4px 0 12px 58px;
}
/* center e não flex-start: encostados ao topo, o ícone de 34px e a
   linha do título de 19px ficavam com os centros a 8px de distância. */
.mega__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 2px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.mega__item:hover { background: rgba(46, 230, 197, .07); transform: translateX(3px); }
/* Selector com o pai à frente de propósito: o selo é um <span> e a regra
   `.mega__item span { display: block }`, mais abaixo e mais específica,
   apagava este `grid`. Sem grid o place-items não faz nada e o ícone
   assentava no topo da caixa, 7,5px acima do centro. */
.mega__item .mega__ico {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--grad-soft);
  border: 1px solid rgba(46, 230, 197, .2);
}
.mega__ico svg { width: 17px; height: 17px; stroke: var(--turq); fill: none; stroke-width: 1.7; }
.mega__item b {
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.mega__item span {
  display: block;
  font-size: .79rem;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 2px;
}
.mega--growth .mega__label { color: #a07df0; }
.mega--growth .mega__ico {
  background: linear-gradient(135deg, rgba(124, 77, 224, .18), rgba(42, 107, 242, .16));
  border-color: rgba(124, 77, 224, .26);
}
.mega--growth .mega__ico svg { stroke: #a07df0; }
.mega--growth .mega__item:hover { background: rgba(124, 77, 224, .09); }

.mega__aside {
  border-radius: 2px;
  padding: 22px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(46, 230, 197, .16), transparent 62%),
    rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.mega--growth .mega__aside {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(124, 77, 224, .2), transparent 62%),
    rgba(255, 255, 255, .035);
}
.mega__aside h3 { font-size: 1.06rem; margin-bottom: 8px; }
.mega__aside p { font-size: .84rem; color: var(--ink-2); }

.hdr__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; flex: none; }
.hdr__cta { border-radius: 2px; flex: none; }

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: background .2s;
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--spring);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* 07 ------------------------------------------------ Hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  padding-top: 78px;              /* altura da barra fixa */
}

/* --- Filmagem de fundo, por trás de tudo ---
   Fica dessaturada aqui; a cor da marca é reposta pela camada .hero__tint. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -6;
  overflow: hidden;
  background: var(--bg);
  filter: grayscale(1) contrast(1.28) brightness(.72);
}
/* Imagem com deriva lenta enquanto não houver filmagem ligada */
.hero__media::before {
  content: "";
  position: absolute;
  inset: -7%;
  background: url("../img/hero-poster.jpg") center / cover no-repeat;
  animation: kenburns 48s ease-in-out infinite alternate;
}
.hero__media.has-video::before { display: none; }

.hero__media iframe,
.hero__media video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;          /* 16:9 */
  min-width: 177.78vh;      /* cobre ecrãs altos */
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

/* Recoloração para a paleta + véu de leitura */
.hero__tint { position: absolute; inset: 0; z-index: -5; pointer-events: none; }
.hero__tint::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(122deg, #123fb4 0%, #0e6fa8 32%, #17b8c9 56%, #2ee6c5 76%, #6a35c9 100%);
  mix-blend-mode: color;
  opacity: .8;
}
.hero__tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(101deg,
      rgba(5, 7, 15, .94) 0%,
      rgba(5, 7, 15, .8) 32%,
      rgba(5, 7, 15, .4) 62%,
      rgba(5, 7, 15, .22) 80%,
      rgba(5, 7, 15, .46) 100%),
    linear-gradient(180deg,
      rgba(5, 7, 15, .8) 0%,
      rgba(5, 7, 15, .2) 20%,
      rgba(5, 7, 15, .1) 48%,
      rgba(5, 7, 15, .6) 84%,
      var(--bg) 100%);
}

/* --- Nuvens cósmicas: poucas, largas, muito diluídas --- */
.bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -4;
  will-change: transform;
}
.bloom--a {
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  top: -22%; right: -12%;
  background: radial-gradient(circle, rgba(42, 107, 242, .3), transparent 66%);
}
.bloom--b {
  width: 46vw; height: 46vw;
  max-width: 660px; max-height: 660px;
  bottom: -26%; left: -14%;
  background: radial-gradient(circle, rgba(46, 230, 197, .15), transparent 68%);
}
.bloom--c {
  width: 38vw; height: 38vw;
  max-width: 540px; max-height: 540px;
  top: 42%; right: 26%;
  background: radial-gradient(circle, rgba(124, 77, 224, .16), transparent 70%);
}

/* --- Poeira estelar: dois planos, sem nós no DOM --- */
.dust {
  position: absolute;
  inset: -8%;
  z-index: -3;
  pointer-events: none;
  will-change: transform;
}
.dust--far {
  background-image:
    radial-gradient(1px 1px at 42px 68px,   rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 168px 132px, rgba(190,225,255,.42), transparent),
    radial-gradient(1px 1px at 262px 42px,  rgba(255,255,255,.34), transparent),
    radial-gradient(1px 1px at 96px 236px,  rgba(255,255,255,.44), transparent),
    radial-gradient(1px 1px at 322px 196px, rgba(170,245,240,.38), transparent),
    radial-gradient(1px 1px at 214px 318px, rgba(255,255,255,.3), transparent);
  background-size: 380px 380px;
}
.dust--near {
  background-image:
    radial-gradient(1.6px 1.6px at 120px 96px,  rgba(255,255,255,.8), transparent),
    radial-gradient(1.4px 1.4px at 380px 240px, rgba(140,235,255,.66), transparent),
    radial-gradient(1.5px 1.5px at 268px 400px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 470px 60px,  rgba(180,200,255,.55), transparent);
  background-size: 560px 560px;
  animation: shimmer 7s ease-in-out infinite;
}

/* --- Malha técnica, quase invisível --- */
.mesh {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 92px 92px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(130% 100% at 50% 40%, #000 20%, transparent 78%);
}

/* --- O núcleo respira por trás da malha de partículas --- */
.halo {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 230, 197, .2) 0%, rgba(42, 107, 242, .1) 42%, transparent 68%);
  filter: blur(38px);
  pointer-events: none;
  animation: breathe 11s ease-in-out infinite;
}

/* --- Partículas em canvas --- */
#field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* --- Grão: tira o aspeto de render limpo demais --- */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* --- Véu inferior: garante leitura sobre as partículas --- */
.veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 15, .82) 62%, var(--bg));
}

/* --- Marcas de corte nos cantos --- */
.tick {
  position: absolute;
  width: 13px; height: 13px;
  z-index: 2;
  border: 0 solid var(--line-2);
  pointer-events: none;
}
.tick--tl { top: 92px; left: 14px;  border-top-width: 1px; border-left-width: 1px; }
.tick--tr { top: 92px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.tick--bl { bottom: 14px; left: 14px;  border-bottom-width: 1px; border-left-width: 1px; }
.tick--br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }

/* --- Conteúdo --- */
.hero__inner {
  position: relative;
  z-index: 5;
  flex: 1;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: 40px;
  padding: clamp(28px, 4.5vh, 72px) var(--gut) 0;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 3.2vh, 34px);
  font-family: var(--font-mono);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pulse {
  width: 5px; height: 5px;
  flex: none;
  background: var(--turq);
  animation: ping 2.8s ease-out infinite;
}
.hero__eyebrow s { text-decoration: none; color: var(--ink-3); }

.hero__title {
  margin: 0 0 clamp(22px, 3.4vh, 38px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, min(5.2vw, 9.4vh), 4.8rem);
  line-height: .94;
  letter-spacing: -.026em;
  color: #fff;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(96deg, #7ff5e0 0%, #2ee6c5 24%, #2a6bf2 68%, #8a6bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* A máscara corta nos dois eixos. Com a caixa do tamanho exato do texto,
   uma fonte de recurso mais larga transborda em vez de cortar a meio da letra. */
/* A entrelinha do hero é .94, ainda mais apertada: precisa de mais folga. */
.hero__title .ln {
  width: max-content;
  padding-bottom: .19em;
  margin-bottom: -.12em;
}
.hero__title .ln > span { white-space: nowrap; }

/* Revelação por linha: a máscara corta e o texto sobe de baixo.
   Também usada pelos títulos de secção partidos por JS.

   A folga em baixo tem de acomodar a DESCENDENTE (g, ç, p, q), que sai
   fora da caixa de linha. Como a entrelinha é menor que 1, a tinta desce
   mais do que a caixa e a máscara cortava o "g" de "Marketing".
   A margem negativa devolve o espaço para a entrelinha não crescer. */
.ln {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.05em;
}
.ln > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition: transform 1.05s var(--out), opacity .8s var(--ease);
  transition-delay: calc(var(--i, 0) * .09s + .14s);
}
.is-live .ln > span { transform: translate3d(0, 0, 0); opacity: 1; }

.hero__lead {
  margin: 0 0 clamp(28px, 4vh, 44px);
  max-width: 46ch;
  font-size: clamp(1rem, .94rem + .34vw, 1.17rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.hero__lead b { color: #fff; font-weight: 500; }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* coluna direita: fica vazia, o canvas ocupa-a */
.hero__viz { position: relative; min-height: 1px; }

/* --- Rodapé do hero --- */
.hero__rail {
  position: relative;
  z-index: 5;
  flex: none;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 30px;
  padding: 26px var(--gut) 30px;
  border-top: 1px solid var(--line);
}

/* flex-start: com o stretch por omissão o índice esticava e ficava
   centrado no bloco de três linhas, 20px abaixo do título. */
.cell { display: flex; align-items: flex-start; gap: 13px; }
.cell i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  padding-top: 3px;
}
.cell b {
  display: block;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 3px;
}
.cell span { display: block; font-size: .82rem; line-height: 1.45; color: var(--ink-3); }

.scrollcue {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.scrollcue u {
  display: block;
  width: 1px; height: 36px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--line-2), transparent);
  position: relative;
  overflow: hidden;
}
.scrollcue u::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 12px;
  background: var(--turq);
  animation: descend 2.4s var(--ease) infinite;
}

/* --- Entradas escalonadas --- */
.up {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .95s var(--ease), transform 1.05s var(--out);
  transition-delay: var(--d, 0s);
}
.is-live .up { opacity: 1; transform: translate3d(0, 0, 0); }

.hero__rail { opacity: 0; transition: opacity 1s var(--ease) .95s; }
.is-live .hero__rail { opacity: 1; }

/* Céu: três camadas de estrelas em gradientes repetidos (sem nós no DOM) */
.sky {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
}
.sky__layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  will-change: transform;
}
.sky__layer--far {
  background-image:
    radial-gradient(1px 1px at 24px 38px,  rgba(255,255,255,.72), transparent),
    radial-gradient(1px 1px at 132px 96px, rgba(196,232,255,.6), transparent),
    radial-gradient(1px 1px at 208px 22px, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 76px 190px, rgba(255,255,255,.62), transparent),
    radial-gradient(1px 1px at 262px 152px,rgba(178,246,232,.55), transparent),
    radial-gradient(1px 1px at 330px 260px,rgba(255,255,255,.48), transparent),
    radial-gradient(1px 1px at 172px 318px,rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 44px 288px, rgba(200,224,255,.52), transparent);
  background-size: 380px 380px;
  animation: drift-far 210s linear infinite;
  opacity: .85;
}
.sky__layer--mid {
  background-image:
    radial-gradient(1.6px 1.6px at 58px 72px,  rgba(255,255,255,.9), transparent),
    radial-gradient(1.6px 1.6px at 246px 130px,rgba(150,238,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 148px 236px,rgba(255,255,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 348px 46px, rgba(174,214,255,.75), transparent),
    radial-gradient(1.4px 1.4px at 300px 330px,rgba(255,255,255,.7), transparent);
  background-size: 460px 460px;
  animation: drift-mid 140s linear infinite, twinkle 5.5s ease-in-out infinite;
}
.sky__layer--near {
  background-image:
    radial-gradient(2.2px 2.2px at 92px 128px, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 396px 268px,    rgba(46,230,197,.9), transparent),
    radial-gradient(2px 2px at 268px 60px,     rgba(255,255,255,.95), transparent),
    radial-gradient(1.8px 1.8px at 466px 400px,rgba(120,190,255,.85), transparent);
  background-size: 620px 620px;
  animation: drift-near 95s linear infinite, twinkle 3.8s ease-in-out infinite .8s;
}


/* 08 --------------------------------------------- Clientes */
/* A faixa era clara porque os ficheiros vinham em três feitios — nove dos
   quinze traziam fundo embutido e, no escuro, liam-se como autocolantes.
   Os logótipos passaram a um conjunto monocromático branco, todos na mesma
   tela de 320x96 com o peso óptico igualado pela área de tinta; com isso a
   faixa pode voltar ao escuro do resto do site. */
.clients {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.clients__head {
  text-align: center;
  font-family: var(--font-mono);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 30px;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  animation: slide 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Os logótimos vêm com fundos diferentes (transparente, branco, azulejo de cor).
   A placa clara normaliza os três casos sem tratar imagem a imagem. */
.marquee__item {
  flex: none;
  width: 168px;
  height: 78px;
  display: block;
  padding: 12px 16px;
  border-radius: 2px;
  background: none;
  border: 0;
  overflow: hidden;
  transition: transform .3s var(--ease);
}
.marquee__item:hover { transform: translateY(-2px); }
/* Altura em px, não em percentagem: dentro do chip a percentagem
   resolve para auto e os logótipos quadrados transbordam. */
/* Cor natural: cinco destes ficheiros trazem fundo colorido embutido e,
   a cinzento, leem-se como quadrados sujos. Ver nota no HTML. */
.marquee img {
  width: 100%;
  height: 54px;
  object-fit: contain;
  opacity: .58;
  transition: opacity .35s var(--ease);
}
.marquee__item:hover img { opacity: 1; }

/* 09 ------------------------------- Duas áreas, uma marca */

/* Um bloco só, partido por uma costura: a leitura é "uma marca"
   antes de ser "duas áreas". */
.duo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 2px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .035), transparent 62%),
    rgba(255, 255, 255, .012);
  overflow: hidden;
}

/* Coluna com o CTA empurrado para o fundo: as listas têm 6 e 4 itens, e
   sem isto os dois "Ver..." ficavam a 105px de altura um do outro, com um
   buraco de 165px por baixo do lado mais curto. */
.duo__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3.2vw, 46px);
  transition: opacity .45s var(--ease), background .45s var(--ease);
}
.duo__panel > .duo__cta { margin-top: auto; }
.duo__list { width: 100%; }
.duo__panel + .duo__panel { border-left: 1px solid var(--line); }

/* Ao focar um lado, o outro recua. É a interação que conta a ideia. */
.duo:hover .duo__panel { opacity: .42; }
.duo:hover .duo__panel:hover { opacity: 1; background: rgba(255, 255, 255, .022); }

/* Fio de acento no topo, desenhado da esquerda ao passar o rato */
.duo__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--out);
}
.duo__panel--s::before { background: linear-gradient(90deg, #2a6bf2, #7c4de0); }
.duo__panel:hover::before { transform: scaleX(1); }

/* Número fantasma: peso visual sem ruído */
.duo__ghost {
  position: absolute;
  top: -.14em;
  right: .06em;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(6rem, 11vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  color: rgba(255, 255, 255, .028);
  pointer-events: none;
  user-select: none;
}

.duo__tag {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--turq);
}
.duo__panel--s .duo__tag { color: #8fa6ff; }
.duo__tag i {
  width: 6px; height: 6px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}

.duo__panel h3 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  margin-bottom: 14px;
  max-width: 20ch;
}
.duo__desc {
  color: var(--ink-2);
  font-size: .965rem;
  margin-bottom: 30px;
  max-width: 44ch;
}

/* Lista de serviços em linhas com fio, não em bolinhas */
.duo__list { list-style: none; margin: 0 0 30px; }
.duo__row {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr 16px;
  align-items: center;
  gap: 12px;
  padding: 13px 0 13px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .945rem;
  transition: color .28s var(--ease), padding-left .34s var(--out);
}
.duo__list li:last-child .duo__row { border-bottom: 1px solid var(--line); }
.duo__row::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--turq);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .34s var(--out);
}
.duo__panel--s .duo__row::after { background: #8fa6ff; }
.duo__row:hover { color: #fff; padding-left: 12px; }
.duo__row:hover::after { transform: scaleY(1); }

.duo__row i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.duo__row svg {
  width: 15px; height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .28s var(--ease), transform .34s var(--out);
}
.duo__row:hover svg { opacity: .85; transform: translateX(0); }

.duo__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .93rem;
  color: #fff;
}
.duo__cta svg { width: 15px; height: 15px; transition: transform .34s var(--out); }
.duo__cta:hover { color: var(--turq); }
.duo__panel--s .duo__cta:hover { color: #8fa6ff; }
.duo__cta:hover svg { transform: translateX(5px); }

/* Nó da costura: o ponto onde as duas áreas se encontram */
.duo__seam {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--line-2);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
.duo__seam span {
  display: block;
  width: 7px; height: 7px;
  background: var(--grad);
  transform: rotate(-45deg);
}

/* 10 ------------------------------------ Como trabalhamos */

.metodo { position: relative; overflow: hidden; isolation: isolate; }

/* Céu em duas faixas: estrelas em cima e em baixo, faixa central
   limpa. É por ali que passam as fases e o texto não compete. */
.metodo__sky {
  position: absolute;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  opacity: .7;
  background-repeat: repeat;
  background-size: 460px 460px;
  background-image:
    radial-gradient(1px 1px at 62px 58px,   rgba(255,255,255,.46), transparent),
    radial-gradient(1px 1px at 214px 128px, rgba(190,225,255,.4), transparent),
    radial-gradient(1px 1px at 336px 62px,  rgba(255,255,255,.32), transparent),
    radial-gradient(1px 1px at 128px 286px, rgba(255,255,255,.4), transparent),
    radial-gradient(1.3px 1.3px at 392px 236px, rgba(170,245,240,.36), transparent),
    radial-gradient(1.3px 1.3px at 268px 386px, rgba(140,235,255,.3), transparent);
  animation: drift-far 300s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
}

/* Arcos de trajetória: o percurso que o método descreve */
.metodo__arco {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .85;
}

/* Destino: um brilho a puxar para o violeta da fase 04 */
.metodo__glow {
  position: absolute;
  z-index: -3;
  width: 52vw;
  max-width: 720px;
  aspect-ratio: 1;
  right: -12%;
  bottom: -34%;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(124, 77, 224, .17), rgba(42, 107, 242, .08) 55%, transparent 72%);
}

/* Fluxo com as quatro fases à vista. Esconder três para mostrar uma
   tornava a informação difícil de captar — aqui lê-se tudo de uma vez
   e o carril dá a direção. */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(20px, 2.6vw, 40px);
}

/* carril de base */
.flow::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 5px; right: 5px;
  height: 1px;
  background: var(--line);
}
/* carril que se desenha ao entrar no ecrã */
.flow::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 5px; right: 5px;
  height: 1px;
  background: linear-gradient(90deg, #2ee6c5, #22c3e8 38%, #2a6bf2 72%, #7c4de0);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.8s var(--out) .3s;
}
.flow.is-in::after { transform: scaleX(1); }

/* Coluna flex: a etiqueta de entrega é empurrada para baixo e fica
   à mesma altura nas quatro fases. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease), transform .9s var(--out);
  transition-delay: calc(var(--i, 0) * .13s + .25s);
}
.flow.is-in .step { opacity: 1; transform: translate3d(0, 0, 0); }

/* nó em losango sobre o carril */
.step__mark {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-bottom: 30px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  transform: rotate(45deg);
  transition: background .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease);
  transition-delay: calc(var(--i, 0) * .13s + .7s);
}
.flow.is-in .step__mark {
  background: var(--c, var(--turq));
  border-color: var(--c, var(--turq));
  box-shadow: 0 0 0 4px rgba(46, 230, 197, .1);
}

.step__n {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.step h3 {
  font-size: clamp(1.12rem, 1rem + .45vw, 1.34rem);
  letter-spacing: -.025em;
  margin-bottom: 10px;
}

.step p {
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.55;
  margin-bottom: 22px;
}

/* o que fica na mão do cliente no fim de cada fase */
.step__out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .02);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.step__out svg {
  width: 12px; height: 12px;
  flex: none;
  stroke: var(--c, var(--turq));
  fill: none;
  stroke-width: 2.2;
}
.step:hover .step__out { border-color: rgba(46, 230, 197, .38); color: #fff; }

/* 11 --------------------------------------------- Números */
/* Herda o fundo do método e dispensa respiro em cima: sozinha, com
   fundo mais escuro e 142px de respiro próprio, lia-se como uma
   faixa preta vazia entre "Como trabalhamos" e "Soluções por setor". */
.numeros {
  background: var(--bg-2);
  padding-top: 0;
  padding-bottom: clamp(56px, 6vw, 84px);
}

/* Faixa aberta com fios finos em vez de caixa fechada: encosta ao
   método como remate e deixa de parecer um bloco solto. */
.numeros__band {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.numeros__rot {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 28px 30px 28px 0;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.7;
  /* largura fixa: com max-width em ch a mono partia uma palavra por linha */
  width: 122px;
}

.stat {
  padding: 28px 20px;
  border-left: 1px solid var(--line);
}
.stat__v {
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.5rem + 1.7vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.026em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.stat__l {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0;
}

/* 12 --------------------------------------------- Setores */

.setores {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* A secção anterior já fecha com folga própria: 108px em cima
     abriam quase 200px entre os números e este título. */
  padding-top: clamp(32px, 3.4vw, 54px);
}

/* Céu por trás. A máscara abre um buraco no centro: as estrelas
   vivem nas margens e o texto nunca compete com elas. */
.setores__sky {
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  opacity: .85;
  background-repeat: repeat;
  background-size: 420px 420px;
  background-image:
    radial-gradient(1px 1px at 48px 74px,    rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 186px 142px,  rgba(190,225,255,.42), transparent),
    radial-gradient(1px 1px at 288px 46px,   rgba(255,255,255,.34), transparent),
    radial-gradient(1px 1px at 104px 258px,  rgba(255,255,255,.44), transparent),
    radial-gradient(1px 1px at 352px 212px,  rgba(170,245,240,.4), transparent),
    radial-gradient(1.4px 1.4px at 232px 342px, rgba(255,255,255,.34), transparent),
    radial-gradient(1.4px 1.4px at 396px 302px, rgba(140,235,255,.3), transparent);
  animation: drift-far 260s linear infinite;
  -webkit-mask-image: radial-gradient(118% 82% at 50% 46%, transparent 18%, #000 74%);
  mask-image: radial-gradient(118% 82% at 50% 46%, transparent 18%, #000 74%);
}

.setores__neb {
  position: absolute;
  z-index: -2;
  width: 44vw;
  max-width: 620px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.setores__neb--a {
  top: -20%; right: -8%;
  background: radial-gradient(circle, rgba(42, 107, 242, .2), transparent 66%);
}
.setores__neb--b {
  bottom: -24%; left: -10%;
  background: radial-gradient(circle, rgba(124, 77, 224, .15), transparent 68%);
}

/* --- Carrossel ---
   Rola de forma nativa com scroll-snap: arrastar no telemóvel e
   com trackpad funciona sem JS. As setas são um extra, não o motor. */
.setores__pista {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* sangra até à margem direita: o cartão seguinte espreita */
  margin-right: calc(-1 * var(--gut));
  padding-right: var(--gut);
  padding-bottom: 4px;
}
.setores__pista::-webkit-scrollbar { display: none; }

.setorc {
  position: relative;
  flex: 0 0 clamp(250px, 29%, 330px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  transition: border-color .35s var(--ease), transform .35s var(--out), background .35s var(--ease);
}
.setorc:hover {
  border-color: rgba(46, 230, 197, .34);
  background: linear-gradient(170deg, rgba(46, 230, 197, .07), rgba(255, 255, 255, .015));
  transform: translateY(-4px);
}

/* fio de acento no topo, desenhado da esquerda */
.setorc::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--out);
}
.setorc:hover::before { transform: scaleX(1); }

.setorc__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 22px;
}

.setorc__ico {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.setorc__ico svg { width: 22px; height: 22px; stroke: var(--turq); fill: none; stroke-width: 1.5; }
.setorc:hover .setorc__ico { border-color: rgba(46, 230, 197, .42); background: rgba(46, 230, 197, .08); }

.setorc__n {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--ink-3);
}

.setorc h3 {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.28rem);
  letter-spacing: -.025em;
  margin-bottom: 11px;
}

.setorc__d {
  margin: 0 0 24px;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.55;
}

.setorc__canal {
  margin: auto 0 0;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.setorc:hover .setorc__canal { border-color: rgba(46, 230, 197, .34); color: var(--ink-2); }

/* --- Barra de progresso e setas --- */
.setores__ctrl {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.setores__prog {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
/* Preenchimento que cresce com o avanço. Sem transição: é atualizado
   a cada frame de scroll e qualquer transição ficaria atrasada. */
.setores__prog span {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 12%;
  background: var(--grad);
}

.setores__setas { display: flex; gap: 8px; flex: none; }
.setores__seta {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease);
}
.setores__seta svg { width: 17px; height: 17px; stroke: var(--ink); fill: none; stroke-width: 1.8; }
.setores__seta:hover:not(:disabled) { border-color: rgba(46, 230, 197, .5); background: rgba(46, 230, 197, .08); }
.setores__seta:disabled { opacity: .3; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .setores__pista { scroll-behavior: auto; }
}

/* 13 ----------------------------------------- Diagnóstico */
.diag {
  background: linear-gradient(160deg, #080c18, #0d1526 60%, #0a1020);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(30px, 4vw, 52px);
  position: relative;
  overflow: hidden;
}
.diag::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  top: -190px; right: -150px;
  background: radial-gradient(circle, rgba(46, 230, 197, .13), transparent 68%);
  pointer-events: none;
}
.diag__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 1;
}
/* Brilho difuso: dá presença à secção sem competir com o painel */
.diag::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 46vw;
  max-width: 620px;
  aspect-ratio: 1;
  left: -14%;
  bottom: -32%;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(46, 230, 197, .12), transparent 68%);
}

/* Tira de garantias logo abaixo do título: tira o receio antes
   de a pessoa sequer olhar para o painel. */
.diag__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.diag__meta span { display: flex; align-items: center; gap: 9px; }
.diag__meta span::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  background: var(--turq);
  transform: rotate(45deg);
}

/* Prova social encostada ao painel: quem já passou por aqui */
.diag__prova {
  margin: 28px 0 0;
  padding: 20px 22px;
  border-left: 2px solid rgba(46, 230, 197, .5);
  background: rgba(255, 255, 255, .022);
  border-radius: 0 2px 2px 0;
}
.diag__prova blockquote {
  margin: 0 0 12px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
}
.diag__prova figcaption {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.diag__prova figcaption b { color: var(--turq); font-weight: 500; }

.diag__side h2 { margin-bottom: 18px; }
.diag__side > p { color: var(--ink-2); margin-bottom: 26px; }
.diag__perks { list-style: none; display: grid; gap: 13px; }
.diag__perks li {
  display: flex;
  gap: 12px;
  font-size: .93rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.diag__perks svg { width: 19px; height: 19px; stroke: var(--turq); fill: none; stroke-width: 2; flex: none; margin-top: 2px; }

.diag__panel {
  background: rgba(4, 7, 15, .62);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 32px);
}

.diag__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.diag__track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, .1);
  border-radius: 3px;
  overflow: hidden;
}
.diag__fill {
  height: 100%;
  width: 33%;
  background: var(--grad);
  border-radius: 3px;
  transition: width .45s var(--ease);
}
.diag__count {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-3);
  white-space: nowrap;
}

.diag__step { display: none; }
.diag__step.is-active { display: block; animation: fade-up .38s var(--ease) both; }

.diag__q {
  font-family: var(--font-head);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.32;
  color: #fff;
  margin-bottom: 20px;
}

.opts { list-style: none; display: grid; gap: 9px; }
.opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 17px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-2);
  font-size: .94rem;
  text-align: left;
  cursor: pointer;
  transition: all .22s var(--ease);
}
.opt:hover {
  border-color: rgba(46, 230, 197, .5);
  background: rgba(46, 230, 197, .07);
  color: #fff;
  transform: translateX(3px);
}
.opt__dot {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  flex: none;
  position: relative;
  transition: border-color .22s var(--ease);
}
.opt:hover .opt__dot { border-color: var(--turq); }
.opt:hover .opt__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--turq);
}

.diag__insight {
  display: flex;
  gap: 12px;
  padding: 15px 17px;
  margin-top: 18px;
  border-radius: 10px;
  background: rgba(46, 230, 197, .075);
  border: 1px solid rgba(46, 230, 197, .22);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.diag__insight svg { width: 18px; height: 18px; stroke: var(--turq); fill: none; stroke-width: 1.7; flex: none; margin-top: 2px; }
.diag__insight b { color: var(--turq); font-weight: 600; }

.diag__back {
  margin-top: 18px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-3);
  font-size: .855rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.diag__back:hover { color: var(--turq); }
.diag__back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Resultado */
.diag__result h3 { margin-bottom: 8px; }
.diag__result > p { color: var(--ink-2); font-size: .93rem; margin-bottom: 20px; }
.solutions { list-style: none; display: grid; gap: 9px; margin-bottom: 24px; }
.solutions li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border-radius: 9px;
  background: var(--grad-soft);
  border: 1px solid rgba(46, 230, 197, .2);
  font-size: .92rem;
  color: #fff;
  font-weight: 500;
}
.solutions svg { width: 17px; height: 17px; stroke: var(--turq); fill: none; stroke-width: 2; flex: none; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  padding: 12px 15px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font-family: inherit;
  font-size: .93rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus {
  outline: none;
  border-color: var(--turq);
  background: rgba(46, 230, 197, .05);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-note {
  font-size: .78rem;
  color: var(--ink-3);
  margin-top: 13px;
  line-height: 1.5;
}
.form-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* 14 ----------------------------------------- Depoimentos */

.provas { position: relative; overflow: hidden; isolation: isolate; }

/* Céu com buraco no centro: estrelas nas margens, texto limpo */
.provas__sky {
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  opacity: .8;
  background-repeat: repeat;
  background-size: 440px 440px;
  background-image:
    radial-gradient(1px 1px at 54px 82px,    rgba(255,255,255,.48), transparent),
    radial-gradient(1px 1px at 198px 156px,  rgba(190,225,255,.4), transparent),
    radial-gradient(1px 1px at 306px 52px,   rgba(255,255,255,.32), transparent),
    radial-gradient(1px 1px at 112px 272px,  rgba(255,255,255,.42), transparent),
    radial-gradient(1.3px 1.3px at 368px 226px, rgba(170,245,240,.38), transparent),
    radial-gradient(1.3px 1.3px at 248px 366px, rgba(140,235,255,.3), transparent);
  animation: drift-far 280s linear infinite;
  -webkit-mask-image: radial-gradient(120% 84% at 50% 50%, transparent 24%, #000 78%);
  mask-image: radial-gradient(120% 84% at 50% 50%, transparent 24%, #000 78%);
}

.provas__neb {
  position: absolute;
  z-index: -2;
  width: 48vw;
  max-width: 680px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.provas__neb--a {
  top: -28%; left: 46%;
  background: radial-gradient(circle, rgba(46, 230, 197, .15), transparent 66%);
}
.provas__neb--b {
  bottom: -32%; left: -12%;
  background: radial-gradient(circle, rgba(124, 77, 224, .15), transparent 68%);
}

/* --- Grelha assimétrica: um depoimento manda, dois apoiam ---
   Três cartões iguais faziam as citações curtas parecerem fracas.
   Com hierarquia, a curta passa a ser um reforço e não um vazio. */
.provas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-rows: auto auto;
  gap: 20px;
}

.prova {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 26px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(168deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--out), background .35s var(--ease);
}
.prova:hover {
  border-color: rgba(46, 230, 197, .32);
  background: linear-gradient(168deg, rgba(46, 230, 197, .07), rgba(255, 255, 255, .015));
  transform: translateY(-3px);
}
.prova::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--out);
}
.prova:hover::before { transform: scaleX(1); }

/* aspas gigantes como marca d'água, cortadas pela caixa */
.prova__marca {
  position: absolute;
  top: -18px;
  right: -6px;
  margin: 0;
  font-family: var(--font-head);
  font-size: 9rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .03);
  pointer-events: none;
  user-select: none;
}

.prova blockquote {
  position: relative;
  margin: 0 0 24px;
  font-size: .98rem;
  line-height: 1.62;
  color: var(--ink-2);
}

.prova figcaption {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.prova figcaption i {
  width: 6px; height: 6px;
  flex: none;
  background: var(--turq);
  transform: rotate(45deg);
}
.prova figcaption b { color: var(--turq); font-weight: 500; }

/* --- O destaque --- */
.prova--destaque {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 42px 40px 32px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(46, 230, 197, .1), transparent 62%),
    linear-gradient(168deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014));
  border-color: rgba(255, 255, 255, .13);
}
.prova--destaque .prova__marca { font-size: 15rem; top: -34px; right: -14px; }
.prova--destaque blockquote {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.24rem, 1.05rem + .95vw, 1.72rem);
  line-height: 1.36;
  letter-spacing: -.022em;
  color: #fff;
  margin-bottom: 32px;
}
.prova--destaque figcaption { font-size: .68rem; padding-top: 22px; }

/* 15 ----------------------------------------------- Equipa */

.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.member {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--out);
}
.member:hover { border-color: rgba(46, 230, 197, .32); transform: translateY(-4px); }

/* A fotografia manda: 4:5, largura toda do cartão */
.member__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.member__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.06);
  transition: filter .5s var(--ease), transform .7s var(--out);
}
.member:hover .member__foto img { filter: grayscale(0) contrast(1); transform: scale(1.04); }

/* Véu inferior: liga a foto ao cartão em vez de a cortar a direito */
.member__foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(13, 18, 32, .85) 70%, #0d1220);
  pointer-events: none;
}

.member__txt {
  position: relative;
  padding: 20px 22px 24px;
  background: #0d1220;
}

/* flex-start: quando o cargo parte em duas linhas, o center punha o
   losango a meio do bloco em vez de na primeira linha. */
.member__papel {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  /* Reserva duas linhas em todos os cartões. "Design e redes sociais"
     parte em duas e sem isto empurrava esse nome 21px abaixo dos outros
     três, que têm o cargo numa linha só. */
  min-height: 2.9em;
  margin: 0 0 9px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--turq);
}
.member__papel i {
  width: 5px; height: 5px;
  flex: none;
  margin-top: 7px;          /* encosta o losango ao centro da 1.ª linha */
  background: currentColor;
  transform: rotate(45deg);
}

.member h3 {
  font-size: 1.14rem;
  letter-spacing: -.025em;
  margin-bottom: 7px;
}

.member p {
  margin: 0;
  font-size: .855rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* 16 -------------------------------------------------- FAQ */
.faq { max-width: 840px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--turq); }
.faq__q svg {
  width: 18px; height: 18px;
  margin-left: auto;
  flex: none;
  stroke: var(--turq); fill: none; stroke-width: 2;
  transition: transform .3s var(--ease);
}
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  color: var(--ink-2);
  font-size: .95rem;
  padding: 0 4px 24px;
  max-width: 68ch;
}

/* 17 ------------------------------------------- CTA final */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

/* Galáxia em movimento lento. O inset negativo dá margem para a
   imagem deslizar sem nunca mostrar borda. */
.cta__bg {
  position: absolute;
  inset: -10%;
  z-index: -2;
  background: url("../img/cta-galaxia.jpg") center / cover no-repeat;
  animation: galaxia 68s ease-in-out infinite alternate;
  will-change: transform;
}

/* Véu: sem isto o texto branco perde-se nas zonas claras da galáxia */
.cta__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(5, 7, 15, .72), rgba(5, 7, 15, .5) 60%, transparent 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(5, 7, 15, .35) 22%, rgba(5, 7, 15, .45) 74%, var(--bg) 100%);
}

@keyframes galaxia {
  0%   { transform: scale(1.05) translate3d(-1.6%,  .7%, 0); }
  100% { transform: scale(1.14) translate3d( 1.9%, -.9%, 0); }
}
.cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.cta h2 { margin-bottom: 18px; }
.cta p { color: var(--ink-2); margin-bottom: 32px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* 18 ----------------------------------------------- Rodapé */
.ft {
  background: #03040a;
  border-top: 1px solid var(--line);
  padding-top: 68px;
}
.ft__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 52px;
}
.ft__about p {
  color: var(--ink-3);
  font-size: .9rem;
  margin: 18px 0 22px;
  max-width: 38ch;
}
.ft__social { display: flex; gap: 10px; }
.ft__social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  transition: all .25s var(--ease);
}
.ft__social a:hover {
  border-color: rgba(46, 230, 197, .45);
  background: rgba(46, 230, 197, .1);
  transform: translateY(-2px);
}
.ft__social svg { width: 17px; height: 17px; fill: var(--ink-2); }
.ft__social a:hover svg { fill: var(--turq); }

.ft h4 {
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.ft ul { list-style: none; display: grid; gap: 11px; }
.ft ul a, .ft address a {
  color: var(--ink-3);
  font-size: .9rem;
  font-style: normal;
}
.ft ul a:hover, .ft address a:hover { color: var(--turq); }
.ft address { font-style: normal; display: grid; gap: 11px; font-size: .9rem; color: var(--ink-3); }
.ft address > * { display: flex; align-items: flex-start; gap: 10px; }
.ft address svg { width: 15px; height: 15px; stroke: var(--turq); fill: none; stroke-width: 1.7; flex: none; margin-top: 4px; }

.ft__bar {
  border-top: 1px solid var(--line);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: .82rem;
  color: var(--ink-3);
}
/* O <p> herdava a margem inferior do texto corrido; com align-items:center
   a margem entra na conta e empurrava a linha 9px acima dos links. */
.ft__bar > p { margin: 0; }
.ft__bar nav { display: flex; flex-wrap: wrap; gap: 22px; }
.ft__bar a { color: var(--ink-3); }
.ft__bar a:hover { color: var(--turq); }

/* Botão flutuante WhatsApp */
.wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #22c35e;
  box-shadow: 0 10px 30px -8px rgba(34, 195, 94, .6);
  transition: transform .25s var(--ease);
}
.wa:hover { transform: scale(1.08); }
.wa svg { width: 27px; height: 27px; fill: #fff; }

/* 19 -------------------------------------------- Animação */
@keyframes drift-far  { to { transform: translate3d(-380px, 0, 0); } }
@keyframes drift-mid  { to { transform: translate3d(-460px, 0, 0); } }
@keyframes drift-near { to { transform: translate3d(-620px, 0, 0); } }

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: .42; }
}

@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes kenburns {
  0%   { transform: scale(1.05) translate3d(-1.4%, -1%, 0); }
  100% { transform: scale(1.15) translate3d(1.4%, 1.2%, 0); }
}

/* Ponto do eyebrow: pulsa como um sinal vivo */
@keyframes ping {
  0%       { box-shadow: 0 0 0 0 rgba(46, 230, 197, .5); }
  70%,100% { box-shadow: 0 0 0 8px rgba(46, 230, 197, 0); }
}

/* Halo do núcleo */
@keyframes breathe {
  0%, 100% { transform: scale(1);     opacity: .85; }
  50%      { transform: scale(1.075); opacity: 1; }
}

/* Poeira estelar do plano próximo */
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}

/* Indicador de scroll */
@keyframes descend {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}

/* --------------------------------------------------------
   Motor de revelação ao scroll
   data-anim escolhe o gesto; data-delay escalona irmãos.
   -------------------------------------------------------- */
[data-anim] {
  --d: 0ms;
  will-change: transform, opacity;
}

/* sobe e assenta */
[data-anim="rise"] {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity .85s var(--ease) var(--d), transform 1.05s var(--out) var(--d);
}

/* cortina: descobre de cima para baixo */
[data-anim="wipe"] {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 26px, 0);
  transition: opacity .5s linear var(--d),
              clip-path 1.15s var(--out) var(--d),
              transform 1.15s var(--out) var(--d);
}

/* aproxima-se do leitor */
[data-anim="zoom"] {
  opacity: 0;
  transform: scale(.93) translate3d(0, 30px, 0);
  transition: opacity .8s var(--ease) var(--d), transform 1.1s var(--out) var(--d);
}

/* entra de lado */
[data-anim="slide-l"] { opacity: 0; transform: translate3d(-46px, 0, 0); transition: opacity .8s var(--ease) var(--d), transform 1s var(--out) var(--d); }
[data-anim="slide-r"] { opacity: 0; transform: translate3d(46px, 0, 0);  transition: opacity .8s var(--ease) var(--d), transform 1s var(--out) var(--d); }

/* linhas de título partidas por JS */
[data-anim="lines"] .ln > span { transition-delay: calc(var(--i, 0) * .075s + var(--d)); }

[data-anim].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
}
[data-anim="zoom"].is-in { transform: scale(1) translate3d(0, 0, 0); }
[data-anim="lines"] { opacity: 1; }
[data-anim="lines"].is-in .ln > span { transform: translate3d(0, 0, 0); opacity: 1; }

[data-delay="1"] { --d: 90ms; }
[data-delay="2"] { --d: 180ms; }
[data-delay="3"] { --d: 270ms; }
[data-delay="4"] { --d: 360ms; }
[data-delay="5"] { --d: 450ms; }

/* Compatibilidade com a classe antiga */
.reveal:not([data-anim]) {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .8s var(--ease) var(--d, 0ms), transform 1s var(--out) var(--d, 0ms);
}
.reveal:not([data-anim]).is-in { opacity: 1; transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .ln > span { opacity: 1 !important; transform: none !important; }
  .hero__eyebrow, .hero__foot, .hero__ticker { opacity: 1 !important; transform: none !important; }
  /* sem parallax nem escala no vídeo */
  .hero__media, .hero__inner { transform: none !important; opacity: 1 !important; }
}

/* 19b ------------------------------------- Páginas legais */
.legal { padding-block: clamp(56px, 7vw, 92px); }
/* o cabeçalho é fixo: as páginas sem hero precisam de folga no topo */
.legal--top { padding-top: clamp(130px, 12vw, 168px); }
.legal__head { max-width: 760px; margin-bottom: 44px; }
.legal__head h1 { margin-bottom: 16px; }
.legal__meta { color: var(--ink-3); font-size: .875rem; }
.legal__body { max-width: 760px; }
.legal__body h2 {
  font-size: 1.3rem;
  margin: 44px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal__body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal__body p, .legal__body li { color: var(--ink-2); font-size: .965rem; }
.legal__body ul { list-style: none; display: grid; gap: 9px; margin: 0 0 1.1em; }
.legal__body ul li { padding-left: 20px; position: relative; }
.legal__body ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .68em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--turq);
}
.legal__body a { text-decoration: underline; text-underline-offset: 2px; }

/* 20 ------------------------------------------- Responsivo */
@media (max-width: 1240px) {
  .mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mega__aside { display: none; }
  .nav__list { gap: 22px; }
  .nav__a { font-size: .85rem; }
}

@media (max-width: 1080px) {
  .diag__grid { grid-template-columns: 1fr; gap: 36px; }
  /* A linha do setor parte-se: identificação em cima, texto por baixo */
  .setor {
    grid-template-columns: 40px 44px minmax(0, 1fr);
    align-items: start;
    row-gap: 10px;
    column-gap: 16px;
  }
  .setor__n, .setor__ico { grid-row: 1; }
  .setor h3        { grid-column: 3; grid-row: 1; }
  .setor__d        { grid-column: 3; grid-row: 2; }
  .setor__canal    { grid-column: 3; grid-row: 3; justify-self: start; }

  /* Sem espaço para o carril horizontal: as fases passam a 2x2 */
  .flow { grid-template-columns: repeat(2, 1fr); row-gap: 44px; column-gap: 30px; }
  .flow::before, .flow::after { display: none; }
  .step { padding-right: 0; }
  .ft__grid { grid-template-columns: repeat(2, 1fr); gap: 38px; }

  /* O núcleo sobe para o topo e o texto ocupa a base */
  .hero__inner {
    grid-template-columns: 1fr;
    align-items: end;
    padding-top: clamp(200px, 32vh, 330px);
  }
  .hero__viz { display: none; }
  .hero__lead { max-width: 52ch; }
  .hero__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .scrollcue { grid-column: 1 / -1; }

  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provas__grid { grid-template-columns: 1fr; }

  /* Menu lateral: painel fixo à direita, altura toda do ecrã. A gaveta
     ancorada à barra empurrava a página e, com o mega aberto, ficava mais
     alta do que o ecrã. O painel tem rolagem própria e fundo escurecido. */
  .burger { display: flex; }
  .hdr__cta { display: none; }
  .hdr__inner { z-index: 3; }
  /* O painel é irmão destes dois dentro do .hdr__inner, não filho do .hdr:
     sem z-index próprio, o z-index:2 do painel tapava a marca e o burger. */
  .brand, .hdr__actions { position: relative; z-index: 4; }

  /* O escurecido é um pseudo-elemento do cabeçalho para não ser preciso
     acrescentar um <div> em todas as páginas. Os cliques que lhe caem em
     cima chegam ao .hdr, e é assim que o JS fecha o painel. */
  .hdr::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(3, 5, 11, .74);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .34s var(--ease), visibility .34s;
  }
  body.nav-aberto .hdr::after { opacity: 1; visibility: visible; }

  .nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 2;
    width: min(87vw, 372px);
    margin: 0;
    padding: 92px 20px 30px;
    border-radius: 0;
    border-left: 1px solid var(--line-2);
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(46, 230, 197, .1), transparent 60%),
      linear-gradient(200deg, #0a1020 0%, #070c17 58%, #05070f 100%);
    box-shadow: -34px 0 80px -34px rgba(0, 0, 0, .95);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform .44s var(--out), visibility .44s;
  }
  .nav.is-open { visibility: visible; transform: translate3d(0, 0, 0); }
  body.nav-aberto { overflow: hidden; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__li + .nav__li { border-top: 1px solid var(--line); }
  .nav__a {
    padding: 15px 2px;
    font-size: 1.02rem;
    justify-content: space-between;
    width: 100%;
    color: var(--ink);
  }
  .nav__a::after { display: none; }

  .nav__rodape {
    display: grid;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
  }
  .nav__wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .nav__wa svg { width: 15px; height: 15px; flex: none; fill: #22c35e; }
  .nav__wa:hover { color: #fff; border-color: rgba(34, 195, 94, .5); }

  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .035);
    margin: 0 0 10px;
    padding: 8px;
    display: none;
  }
  .nav__li.is-open .mega { display: block; }
  .mega::before { display: none; }
  .mega__inner { grid-template-columns: 1fr; gap: 4px; }
  .mega__label { margin: 10px 0 4px 12px; }

  /* A costura passa de vertical a horizontal */
  .duo { grid-template-columns: 1fr; }
  .duo__panel + .duo__panel { border-left: 0; border-top: 1px solid var(--line); }
  .duo:hover .duo__panel { opacity: 1; }
  .duo__seam { display: none; }
  .duo__panel h3, .duo__desc { max-width: none; }
  /* a mono com muito espaçamento partia "Nos Gestor" em duas linhas */
  .prova figcaption { font-size: .56rem; letter-spacing: .09em; gap: 8px; }
  .prova--destaque figcaption { font-size: .6rem; }
  .prova--destaque { padding: 30px 24px 24px; }
  .prova { padding: 26px 22px 22px; }

  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .member__txt { padding: 16px 16px 20px; }
  .member h3 { font-size: 1rem; }
  .numeros__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros__rot {
    grid-column: 1 / -1;
    max-width: none;
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--line);
  }
  .stat:nth-child(2), .stat:nth-child(4) { border-left: 0; }
  .stat:nth-child(4), .stat:nth-child(5) { border-top: 1px solid var(--line); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  :root { --gut: 18px; }

  .hero { padding-top: 64px; }
  .hero__inner { padding-top: clamp(170px, 28vh, 250px); }
  .hero__title { font-size: min(9.4vw, 2.9rem); line-height: .98; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__eyebrow { font-size: .64rem; letter-spacing: .22em; gap: 10px; }
  .hero__rail { grid-template-columns: 1fr; padding-bottom: 24px; }
  .cell:nth-child(3) { display: none; }
  .tick { display: none; }

  .hdr__inner { height: 64px; gap: 10px; }
  .hdr.is-stuck .hdr__inner { height: 60px; }
  .langs a { padding: 2px 5px; font-size: .68rem; }
  .brand img { width: 27px; height: 34px; }
  .brand__name { font-size: 1.1rem; letter-spacing: .07em; }
  .burger { width: 40px; height: 40px; }

  .setor { padding: 20px 4px; column-gap: 12px; }
  .setor:hover { padding-left: 4px; }
  .setores__sky { opacity: .6; }

  /* No telemóvel o carril fica vertical, à esquerda das fases */
  .flow { grid-template-columns: 1fr; row-gap: 0; }
  .step {
    position: relative;
    padding: 0 0 34px 28px;
    border-left: 1px solid var(--line);
  }
  .step:last-child { border-left-color: transparent; padding-bottom: 0; }
  .step__mark {
    position: absolute;
    top: 4px;
    left: -6px;
    margin-bottom: 0;
  }
  .step p { max-width: none; }
  .numeros__band { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0; }
  .stat:nth-child(2) { border-top: 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .ft__grid { grid-template-columns: 1fr; gap: 32px; }
  .ft__bar { flex-direction: column; align-items: flex-start; }
  .duo__panel { padding: 28px 22px 30px; }
  .duo__ghost { font-size: 5.5rem; }
  .marquee__item { width: 138px; height: 66px; padding: 11px 14px; }
  .marquee img { height: 44px; }
  .marquee__track { gap: 12px; }
  .wa { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}

/* 21 -------------------------------- Páginas internas */

/* --- Hero de página: não ocupa o ecrã todo, isso é da home --- */
.ph {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(130px, 16vh, 190px) 0 clamp(44px, 5vw, 66px);
  border-bottom: 1px solid var(--line);
}
.ph__sky {
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  opacity: .75;
  background-repeat: repeat;
  background-size: 440px 440px;
  background-image:
    radial-gradient(1px 1px at 54px 82px,   rgba(255,255,255,.46), transparent),
    radial-gradient(1px 1px at 198px 156px, rgba(190,225,255,.38), transparent),
    radial-gradient(1px 1px at 306px 52px,  rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 112px 272px, rgba(255,255,255,.4), transparent),
    radial-gradient(1.3px 1.3px at 368px 226px, rgba(170,245,240,.34), transparent);
  animation: drift-far 300s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 60%);
  mask-image: linear-gradient(180deg, transparent 8%, #000 60%);
}
.ph__neb {
  position: absolute;
  z-index: -2;
  width: 52vw;
  max-width: 720px;
  aspect-ratio: 1;
  top: -34%;
  right: -10%;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(42, 107, 242, .22), transparent 66%);
}

.ph__inner { max-width: 800px; }
.ph h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.026em;
  margin-bottom: 20px;
}
.ph h1 em {
  font-style: normal;
  background: linear-gradient(96deg, #7ff5e0 0%, #2ee6c5 30%, #2a6bf2 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ph__lead { max-width: 60ch; margin-bottom: 30px; }
.ph__acoes { display: flex; flex-wrap: wrap; gap: 13px; }

/* Empilhados, os dois botões ficavam com larguras diferentes e a coluna
   parecia torta. Em ecrã estreito passam ambos à largura toda. */
@media (max-width: 560px) {
  .ph__acoes { display: grid; grid-template-columns: 1fr; }
  .ph__acoes .btn { width: 100%; justify-content: center; }
}

/* Migalhas */
.migalhas {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  list-style: none;
}
.migalhas a { color: var(--ink-3); }
.migalhas a:hover { color: var(--turq); }
.migalhas li + li::before { content: "/"; margin-right: 9px; opacity: .5; }
.migalhas li { display: flex; align-items: center; }

/* --- Fila de âncoras para os serviços --- */
.ancoras {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
/* Seis colunas iguais em vez de flex: em flex os itens encostavam à
   esquerda e sobravam 464px de barra vazia à direita, com o último
   separador a morrer a meio da largura. */
.ancoras ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}
.ancoras li { display: flex; }
.ancoras a {
  flex: 1;
  display: block;
  padding: 17px 20px;
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.ancoras li:first-child a { padding-left: 0; }
.ancoras li:last-child a { border-right: 0; }
.ancoras a:hover { color: #fff; background: rgba(255, 255, 255, .03); }

@media (max-width: 1080px) {
  .ancoras ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ancoras li:first-child a { padding-left: 20px; }
  .ancoras li:nth-child(3n) a { border-right: 0; }
  .ancoras li:nth-child(n + 4) a { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .ancoras ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ancoras a { padding: 14px 14px; }
  /* Em coluna única o `padding-left:0` do primeiro item deixava o ícone
     do topo 14px à esquerda dos que ficam por baixo dele. */
  .ancoras li:first-child a { padding-left: 14px; }
  .ancoras li:nth-child(3n) a { border-right: 1px solid var(--line); }
  .ancoras li:nth-child(2n) a { border-right: 0; }
  .ancoras li:nth-child(n + 3) a { border-top: 1px solid var(--line); }
}

/* --- Bloco de tensão --- */
.tensao__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
/* flex-start e não o stretch por omissão: esticado, o número ficava
   centrado no bloco inteiro e caía 11px abaixo da primeira linha. */
.tensao__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 28px 26px 0;
  border-bottom: 1px solid var(--line);
}
.tensao__item:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
.tensao__item i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--turq);
  /* 3px encosta o centro da mono ao centro da primeira linha do texto */
  padding-top: 3px;
}
.tensao__item p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.55; }
.tensao__item b { color: #fff; font-weight: 600; }

/* --- Blocos de serviço --- */
/* Colunas iguais. Com 1.05fr/0.95fr, inverter a ordem nos blocos pares
   fazia o texto saltar de 575px para 520px de largura e as maquetes
   ficarem com dois tamanhos — a medida da linha mudava a cada secção. */
.svc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 60px);
  align-items: stretch;
  padding-block: clamp(48px, 5.6vw, 78px);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.svc:last-of-type { border-bottom: 0; }

/* A ficha atravessa as duas colunas. Enquanto vivia dentro da coluna da
   maquete, empurrava esse lado ~130px abaixo do fim do texto e cada bloco
   acabava a uma altura diferente — o desnível é que se lia como
   desalinhamento. A ordem é declarada nas três, senão o `order` do texto
   nos blocos pares faz a ficha subir para o meio. */
.svc__txt  { order: 1; }
.svc__lado { order: 2; }
.svc:nth-of-type(even) .svc__txt  { order: 2; }
.svc:nth-of-type(even) .svc__lado { order: 1; }

.svc__n {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--turq);
}
.svc__n i { width: 6px; height: 6px; flex: none; background: currentColor; transform: rotate(45deg); }

.svc h2 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
  letter-spacing: -.015em;
  margin-bottom: 14px;
}
.svc__d { color: var(--ink-2); font-size: 1rem; line-height: 1.62; margin-bottom: 24px; max-width: 52ch; }

.svc__list { list-style: none; margin: 0 0 26px; display: grid; gap: 0; }
.svc__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: .94rem;
  color: var(--ink-2);
}
.svc__list li:last-child { border-bottom: 1px solid var(--line); }
.svc__list svg { width: 16px; height: 16px; flex: none; margin-top: 4px; stroke: var(--turq); fill: none; stroke-width: 2.2; }

/* Ficha técnica ao lado */
.ficha {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(168deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  padding: 26px 26px 8px;
}
.ficha__t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ficha__t i { width: 5px; height: 5px; flex: none; background: var(--turq); transform: rotate(45deg); }
.ficha dl { margin: 0; }
.ficha dl > div { padding: 14px 0; border-top: 1px solid var(--line); }
.ficha dt {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.ficha dd { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink); }

/* --- Painel de métricas --- */
.medimos { position: relative; overflow: hidden; isolation: isolate; }
.medimos__neb {
  position: absolute;
  z-index: -1;
  width: 44vw;
  max-width: 600px;
  aspect-ratio: 1;
  bottom: -30%;
  left: -10%;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(46, 230, 197, .13), transparent 68%);
}

.painel {
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: linear-gradient(168deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  overflow: hidden;
}
.painel__topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.painel__topo i {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--turq);
  animation: ping 2.8s ease-out infinite;
}
.painel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi {
  padding: 26px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kpi:nth-child(3n) { border-right: 0; }
.kpi:nth-last-child(-n+3) { border-bottom: 0; }
.kpi__sigla {
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.015em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 9px;
}
.kpi h3 { font-size: .96rem; margin-bottom: 8px; letter-spacing: -.015em; }
.kpi p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3); }

/* --- Responsivo das páginas internas --- */
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; gap: 28px; }
  .svc:nth-of-type(even) .svc__txt { order: 0; }
  .tensao__grid { grid-template-columns: 1fr; }
  .tensao__item:nth-child(even) { padding-left: 0; border-left: 0; }
  .painel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3n) { border-right: 1px solid var(--line); }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .kpi:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 620px) {
  .ancoras a { padding: 14px 14px; font-size: .6rem; }
  .painel__grid { grid-template-columns: 1fr; }
  .kpi { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .kpi:last-child { border-bottom: 0 !important; }
  .ficha { padding: 22px 20px 6px; }
}

/* --- Fundo do hero das páginas internas --- */
.ph__bg {
  position: absolute;
  inset: -8%;
  z-index: -3;
  background: url("../img/hero-marketing.jpg") center right / cover no-repeat;
  animation: orbita 74s ease-in-out infinite alternate;
  will-change: transform;
}
/* Véu pesado à esquerda: é onde vive o título. O globo fica à direita,
   por isso o lado direito quase não é escurecido. */
.ph__veu {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(5, 7, 15, .96) 0%,
      rgba(5, 7, 15, .88) 30%,
      rgba(5, 7, 15, .5)  58%,
      rgba(5, 7, 15, .2)  82%,
      rgba(5, 7, 15, .34) 100%),
    linear-gradient(180deg,
      rgba(5, 7, 15, .9) 0%,
      rgba(5, 7, 15, .2) 24%,
      rgba(5, 7, 15, .1) 60%,
      var(--bg) 100%);
}

@keyframes orbita {
  0%   { transform: scale(1.04) translate3d( 1.3%, -.6%, 0); }
  100% { transform: scale(1.12) translate3d(-1.5%,  .9%, 0); }
}

/* --- Logótipos das plataformas --- */
.ancoras a { display: flex; align-items: center; gap: 9px; }
.ancoras img {
  width: 14px; height: 14px;
  flex: none;
  filter: brightness(0) invert(1);
  opacity: .45;
  transition: opacity .3s var(--ease);
}
.ancoras a:hover img { opacity: 1; }

.svc__marcas { display: flex; gap: 10px; margin-bottom: 20px; }
.svc__marca {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .025);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.svc__marca img {
  width: 21px; height: 21px;
  filter: brightness(0) invert(1);
  opacity: .88;
}
.svc:hover .svc__marca { border-color: rgba(46, 230, 197, .34); background: rgba(46, 230, 197, .06); }

@media (max-width: 620px) {
  .svc__marca { width: 40px; height: 40px; }
  .svc__marca img { width: 18px; height: 18px; }
}

/* --- Hero das páginas internas: mais respiro --- */
.ph {
  min-height: 62svh;
  display: flex;
  align-items: center;
  padding: clamp(118px, 14vh, 150px) 0 clamp(56px, 7vh, 84px);
}
.ph > .wrap { width: 100%; }

/* --- Maquete visual de cada serviço --- */
/* A moldura cresce até ao fim da coluna de texto e a maqueta fica centrada
   lá dentro. Com altura fixa sobravam até 288px de vazio por baixo dela —
   as duas colunas alinhavam em cima e acabavam em sítios diferentes. */
.svc__lado { display: flex; flex-direction: column; }
.svc__vis {
  flex: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(46, 230, 197, .07), transparent 60%),
    linear-gradient(168deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  padding: 20px;
  overflow: hidden;
  transition: border-color .35s var(--ease);
}
.svc:hover .svc__vis { border-color: rgba(46, 230, 197, .28); }
.svc__vis svg { width: 100%; height: auto; display: block; }

/* Maquete real: preenche a moldura toda. Deixada com o padding de 20px,
   o fundo preto da fotografia desenhava um quadrado mais escuro dentro do
   painel — a sangrar até à borda, a imagem passa a ser o próprio painel. */
/* Captura de ecrã larga (16:9 e afins): não sangra, fica assente no meio
   da moldura como um monitor no palco. Com `cover` perdia-se metade. */
.svc__vis--ecra { display: grid; place-items: center; padding: clamp(18px, 2.2vw, 30px); }
.svc__vis--ecra img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, .9);
}

.svc__vis--foto { padding: 0; display: block; }
.svc__vis--foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ficha em faixa: quatro colunas iguais debaixo do bloco todo */
.ficha {
  order: 3;
  grid-column: 1 / -1;
  margin-top: clamp(26px, 3vw, 40px);
  padding: 20px 26px 4px;
}
.ficha__t { margin-bottom: 16px; }
.ficha dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.ficha dl > div {
  padding: 16px 26px 20px;
  border-top: 0;
  border-left: 1px solid var(--line);
}
.ficha dl > div:first-child { border-left: 0; padding-left: 0; }
.ficha dd { text-wrap: pretty; }

@media (max-width: 900px) {
  .ficha dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha dl > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ficha dl > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .ficha { padding-inline: 20px; }
  .ficha dl { grid-template-columns: 1fr; }
  .ficha dl > div { border-left: 0; padding: 13px 0; }
  .ficha dl > div + div { border-top: 1px solid var(--line); }
}

/* --- Separadores de grupo entre serviços --- */
.grupo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: clamp(30px, 3.4vw, 46px) 6px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.grupo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}
.grupo i { width: 6px; height: 6px; flex: none; background: var(--turq); transform: rotate(45deg); }

@media (max-width: 620px) {
  .ph { min-height: 0; padding-top: 104px; }
  .svc__vis { padding: 16px; }
}

/* --- Navegação entre páginas de serviço --- */
.prox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.prox a { color: var(--ink-3); transition: color .3s var(--ease); }
.prox a:hover { color: var(--turq); }

/* Logótipos das plataformas dentro do painel do menu */
.mega__ico img {
  width: 17px; height: 17px;
  filter: brightness(0) invert(1);
  opacity: .85;
}

/* ===================================================================
   22 — Página de marketing: respiro no hero e scroll com marcação
   =================================================================== */

/* --- Hero com muito mais ar --- */
.ph {
  min-height: 82svh;
  padding: clamp(160px, 19vh, 215px) 0 clamp(78px, 10vh, 120px);
}
.ph .migalhas { margin-bottom: clamp(26px, 3.4vh, 40px); }
.ph h1 { margin-bottom: clamp(22px, 2.8vh, 32px); max-width: 17ch; }
.ph__lead { max-width: 46ch; margin-bottom: clamp(30px, 4vh, 44px); }

/* Indicador de rolagem no fundo do hero */
.ph__cue {
  position: absolute;
  left: var(--gut);
  bottom: clamp(26px, 4vh, 44px);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .9s var(--ease) 1.1s;
}
.is-live .ph__cue { opacity: 1; }
.ph__cue u {
  display: block;
  width: 1px; height: 32px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--line-2), transparent);
  position: relative;
  overflow: hidden;
}
.ph__cue u::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 11px;
  background: var(--turq);
  animation: descend 2.4s var(--ease) infinite;
}

/* --- Fila de âncoras fixa, com o serviço ativo marcado --- */
.ancoras {
  position: sticky;
  top: 78px;
  z-index: 60;
  background: rgba(6, 9, 18, .88);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--line);
}
.ancoras a { position: relative; }
.ancoras a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--out);
}
.ancoras a.is-atual { color: #fff; background: rgba(255, 255, 255, .04); }
.ancoras a.is-atual::after { transform: scaleX(1); }
.ancoras a.is-atual img { opacity: 1; }

/* --- Entrada dos blocos de serviço --- */
.svc { scroll-margin-top: 148px; }
.svc__txt, .svc__lado, .ficha {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .85s var(--ease), transform 1s var(--out);
}
.svc__lado { transition-delay: .12s; }
.ficha { transition-delay: .22s; }
.svc.is-in .svc__txt,
.svc.is-in .svc__lado,
.svc.is-in .ficha { opacity: 1; transform: translate3d(0, 0, 0); }

/* --- Maquetes: desenham-se ao entrar no ecrã --- */
.svc__vis [data-traco] {
  stroke-dasharray: var(--dash, 460);
  stroke-dashoffset: var(--dash, 460);
  transition: stroke-dashoffset 1.6s var(--out) .35s;
}
.svc.is-in .svc__vis [data-traco] { stroke-dashoffset: 0; }

.svc__vis [data-surge] {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transform-box: fill-box;
  transition: opacity .7s var(--ease), transform .8s var(--out);
  transition-delay: calc(var(--i, 0) * .12s + .45s);
}
.svc.is-in .svc__vis [data-surge] { opacity: 1; transform: translate3d(0, 0, 0); }

@media (max-width: 900px) {
  .ancoras { position: static; }
  .svc { scroll-margin-top: 100px; }
}
@media (max-width: 620px) {
  .ph { min-height: 0; padding: 116px 0 64px; }
  .ph__cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc__txt, .svc__lado, .ficha { opacity: 1 !important; transform: none !important; }
  .svc__vis [data-traco] { stroke-dashoffset: 0 !important; }
  .svc__vis [data-surge] { opacity: 1 !important; transform: none !important; }
}

/* O indicador de rolagem tem de ancorar na coluna de conteúdo.
   Sem isto resolvia contra a secção e ficava 105px à esquerda de tudo. */
.ph > .wrap { position: relative; }

/* ==========================================================================
   SITES E SISTEMAS
   ========================================================================== */

/* --- Hero: malha em perspetiva em vez de fotografia --------------------- */
/* O fundo opaco tem de estar aqui e não só no body: o `.ph` isola o grupo
   de mistura, e sem base opaca o `screen` da maquete come a cor do body e
   desenha um rectângulo mais escuro à volta dela. */
.ph--sistemas { overflow: hidden; background: var(--bg); }
/* Chão em fuga. O véu do lado esquerdo come quase tudo o que estiver por
   baixo do título, por isso a malha vive à direita, onde há espaço vazio. */
.ph--sistemas .ph__malha {
  position: absolute;
  left: 22%; right: -46%; bottom: -6%;
  height: 96%;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 230, 197, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 230, 197, .34) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: perspective(520px) rotateX(58deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 46%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 46%, #000 78%, transparent 100%);
  animation: malha 18s linear infinite;
}
@keyframes malha {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 68px, 0 0; }
}
.ph--sistemas .ph__neb {
  position: absolute;
  z-index: -2;
  width: 62vw;
  max-width: 900px;
  aspect-ratio: 1.25;
  top: -22%;
  right: -12%;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .5;
  background: radial-gradient(circle at 40% 40%, rgba(42, 107, 242, .55), transparent 62%),
              radial-gradient(circle at 70% 65%, rgba(46, 230, 197, .34), transparent 60%);
  animation: breathe 15s ease-in-out infinite alternate;
}
.ph--sistemas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(96deg, rgba(5, 7, 15, .94) 0%, rgba(5, 7, 15, .72) 42%, rgba(5, 7, 15, .16) 78%, transparent 100%);
}

/* --- Maquete no lado direito do hero ----------------------------------- */
.ph--sistemas > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
.ph__fig {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 580px;
}
/* O fundo da maquete é preto puro: com `screen` desaparece e ficam só os
   ecrãs a flutuar sobre a malha, sem quadrado nem moldura por cima dela.
   A figura não pode ganhar transform nem opacidade própria — criava um
   contexto de empilhamento e a mistura deixava de ver o fundo do hero. */
.ph__fig img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  animation:
    fig-entra 1.15s var(--out) .5s both,
    fig-flutua 9s ease-in-out 1.7s infinite;
}
@keyframes fig-entra {
  from { opacity: 0; transform: translate3d(26px, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fig-flutua {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -11px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (max-width: 900px) {
  .ph--sistemas > .wrap { grid-template-columns: 1fr; gap: 34px; }
  .ph__fig { justify-self: start; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph__fig img { animation: none; }
}

/* --- Selo do serviço quando é traço e não logótipo --------------------- */
.svc__marca--traco { color: var(--turq); }
.svc__marca--traco svg { width: 22px; height: 22px; }
.svc:hover .svc__marca--traco { color: #fff; }

/* --- Ícone de traço na barra de âncoras -------------------------------- */
.anc__ico {
  width: 14px; height: 14px;
  flex: none;
  opacity: .5;
  transition: opacity .3s var(--ease);
}
.ancoras a:hover .anc__ico,
.ancoras a.is-atual .anc__ico { opacity: 1; }

/* --- Vitrine: uma fila só -----------------------------------------------
   No ecrã grande anda com a rolagem da página (JS).
   No telemóvel corre sozinha, em laço, porque ali o gesto de rolar é curto
   demais para dar movimento suficiente à fila. */
.vitrine { overflow: hidden; }
.vitrine__palco {
  /* três à vista: 30vw dá 432px a 1440, e com o intervalo cabem três e a
     ponta do quarto, que é o que diz ao olho que a fila continua */
  --pc-w: clamp(228px, 30vw, 470px);
  --pc-gap: 18px;
  margin-top: 8px;
  padding-block: 4px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Anda sozinha, devagar e sempre — já não depende da rolagem. */
.vitrine__fila {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: vitrine-corre 120s linear infinite;
}
.vitrine__palco:hover .vitrine__fila,
.vitrine__palco:focus-within .vitrine__fila { animation-play-state: paused; }

/* A lista está repetida duas vezes, portanto -50% fecha exatamente uma
   cópia e a emenda não aparece. */
@keyframes vitrine-corre {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* O intervalo vai em margin-right e não em `gap`: com gap a fila mede
   28w+27g e metade disso não é uma cópia exacta — a volta dava um salto de
   meio intervalo. Com margem, metade são 14(w+g) certos. */
.pc {
  position: relative;
  flex: none;
  width: var(--pc-w);
  margin: 0 var(--pc-gap) 0 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
  transition: border-color .35s var(--ease);
}
.pc:hover { border-color: rgba(46, 230, 197, .3); }
.pc img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.pc figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 14px 10px;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: linear-gradient(180deg, transparent, rgba(5, 7, 15, .88) 62%);
}
.vitrine__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  margin: 26px 0 0;
  font-size: .82rem;
  color: var(--ink-3);
}
.vitrine__nota .link-arrow { margin: 0; flex: none; }

/* --- Tecnologia -------------------------------------------------------- */
.stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.stack__g {
  padding: 24px 26px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stack__k {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stack__g ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stack__g li {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 255, 255, .025);
  font-size: .82rem;
  color: var(--ink-2);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.stack__g li:hover { border-color: rgba(46, 230, 197, .34); color: #fff; }

@media (max-width: 900px) {
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stack { grid-template-columns: 1fr; }
  .vitrine__palco { --pc-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph--sistemas .ph__malha,
  .ph--sistemas .ph__neb { animation: none; }
  .vitrine__fila { transform: none !important; animation: none !important; }
}

/* 26 ------------------------ Ritmo vertical no telemóvel
   Entre secções somavam-se 52+52 de padding com 42 da cabeça:
   mais de 140px de nada entre blocos num ecrã de 390px. O compasso
   passa a ~84px sem colar o conteúdo. */

/* O rótulo da fase é um <p>, e `.step p` (0,1,1) vencia o
   `margin: auto 0 0` do próprio `.step__out` (0,1,0) — sobravam 22px
   por baixo do último rótulo, que no telemóvel viravam um vão no fim
   do método, depois de "Otimização mensal". */
.step p.step__out { margin-bottom: 0; }

@media (max-width: 620px) {
  .sec { padding-block: 42px; }
  .sec--tight { padding-block: 32px; }
  .numeros { padding-top: 0; padding-bottom: 42px; }
  .sec-head { margin-bottom: 28px; }
  .sec-head p { margin-top: 14px; }

  /* Método: fases mais juntas e sem vão depois da fase 04 */
  .step { padding-bottom: 26px; }

  /* Diagnóstico: a caixa e o painel tinham folga de ecrã grande, e o
     passo 4 (resultado + formulário) é o mais alto de todos. */
  .diag { padding: 24px 20px 26px; }
  .diag__grid { gap: 26px; }
  .diag__side h2 { margin-bottom: 14px; }
  .diag__side > p { margin-bottom: 20px; }
  .diag__panel { padding: 20px 18px 22px; }
  .diag__bar { margin-bottom: 18px; }
  .diag__q { margin-bottom: 16px; }
  .diag__result > p { margin-bottom: 16px; }
  .solutions { margin-bottom: 18px; }
  .diag__insight { margin-top: 14px; }
  .field { margin-bottom: 12px; }
  #diag-form { margin-top: 18px; }
  #diag-form .form-note { margin-top: 10px; }
  .diag__back { margin-top: 14px; }

  /* Equipa: a dois por linha o cargo ocupa até três linhas e os nomes
     ficavam a alturas diferentes. */
  .team { gap: 18px 14px; }
  .member__papel { min-height: 4.4em; }
  .member__txt { padding: 16px 14px 18px; }
}

/* 27 --------------- Rede de seguranca contra CSS de plugins
   O Super Page Cache carrega a folha do seu painel na frente e define
   `.step { margin: 50px 0 40px }` — uma classe generica com o mesmo nome
   das fases do metodo. O tema ja retira essa folha; isto e o que sobra
   caso o plugin mude o nome do handle numa atualizacao. Fica escopado a
   `.flow`, que e onde as nossas fases vivem. */
.flow > .step { margin: 0; width: auto; }
.flow > .step p { font-size: .92rem; line-height: 1.55; }