/* ==========================================================================
   COMPONENTES · Think Tank Geração Agora
   Hero, percursos de utilizador, ciclo do sprint, cartões e chamadas à ação.
   ========================================================================== */

/* ==========================================================================
   HERO · sequência esfregada pelo scroll + o COMPANHEIRO
   --------------------------------------------------------------------------
   O hero fica PRESO (sticky) e a sequência desenrola-se com --hp (0..1, posto
   pelo main.js dentro do pin). --g (0..1) é o progresso global e conduz a
   viagem do companheiro (main.js, por interpolação). Todo o resto é calc():
   para afinar a linha de tempo, mexer só nos limiares comentados abaixo. É o
   mesmo padrão --p do resto do site, por isso testável fotograma a fotograma
   (impor --hp/--g com !important e inspecionar).

   O palco é SEMPRE escuro, independentemente do tema do site: a palavra-marca é
   branca e o slogan verde/azul só têm contraste sobre fundo escuro. Sem JS,
   abaixo de 1024px, ou com movimento reduzido: marca estática + slogan, sem
   animação (.hero__mob); o companheiro fica escondido.

     --hp   0 .......................................................... 1
            | linha | retângulo | losango | palavra | frase1 | frase2 | sai |
     revV   0.02==0.16              (a linha curta creste na vertical)
     revH        0.14======0.34     (alarga para o retângulo)
     revD               0.34==0.46  (abre o losango por dentro)
     wm                     0.50==0.62   (palavra-marca real "Geração Agora")
     p1                         0.66==0.78   (frase 1: verde, esquerda, em cima)
     p2                             0.84==0.95   (frase 2: azul, direita, baixo)
     fo                                 0.96=1   (segura e depois sai)
   ========================================================================== */

:root {
  /* Conduzidas pelo main.js (com JS a 1024px+). Sem JS ficam em 0. */
  --hp: 0;
  --g: 0;

  /* Estado do companheiro — o main.js interpola estes a cada fotograma.
     --py é a posição vertical do ícone; no hero, o main.js fá-lo DESCER pelo
     centro, com aceleração suave (easing), à medida que se rola. */
  --px: 50vw; --py: 40vh; --s: 0.95;
  --rect: 0deg; --dia: 45deg; --diaw: 70.7%; --diatop: 76.5%; --ga: 152deg;
  --c1: var(--verde-gradiente); --c2: var(--azul-gradiente);
  --accv: 0;                 /* losango-acento (pose "Duplo"): 0 escondido, 1 visível */
  --co: #0A0A09;             /* cor de recorte do losango = fundo por trás do ícone */

  /* A CONSTRUÇÃO do ícone e a PALAVRA-MARCA dependem de --hp; as FRASES do
     slogan não (rolam naturalmente e ficam para trás). A palavra-marca aparece
     depois de o ícone formar e DESVANECE antes de o ícone descer (para ele não
     passar pelo meio do nome) — a descida só arranca depois (main.js, hp>=.28). */
  --revV: clamp(.10, calc((var(--hp) - .01) / .05), 1);   /* linha cresce     */
  --revH: clamp(.05, calc((var(--hp) - .04) / .06), 1);   /* alarga p/ retângulo */
  --revD: clamp(0,   calc((var(--hp) - .08) / .05), 1);   /* abre o losango    */
  --wmIn:  clamp(0,  calc((var(--hp) - .07) / .08), 1);   /* palavra entra    (0.07–0.15) */
  --wmOut: clamp(0,  calc((var(--hp) - .19) / .10), 1);   /* palavra desvanece (0.19–0.29) */
}

/* --- O COMPANHEIRO: ícone fixo que se constrói no hero e viaja ------------
   Duas peças reais do logótipo: o retângulo com o gradiente da marca e o
   losango recortado (pintado com --co, a cor do fundo por trás, para dar a
   ilusão de vazio). O rácio 900/1914 é o do ícone oficial. */
.pilot {
  position: fixed; left: var(--px); top: var(--py); z-index: 6;
  pointer-events: none;
  width: clamp(120px, 13vw, 150px); aspect-ratio: 900 / 1914;
  transform: translate(-50%, -50%) scale(var(--s));
  will-change: left, top, transform;
}
/* LEVITAÇÃO: balanço vertical no mesmo sítio, descida mais rápida (38%) do que
   subida (62%) — dá vida ao ícone e nunca o deixa parecer rígido, mesmo parado.
   NÃO se transiciona nada baseado em var() (ver secção 10 do CLAUDE.md). */
.pilot__float { position: absolute; inset: 0; animation: levita 3.8s ease-in-out infinite; }
@keyframes levita {
  0%   { transform: translateY(-5px); }
  38%  { transform: translateY(6px); }
  100% { transform: translateY(-5px); }
}
.pilot__mark { position: absolute; inset: 0; transform: rotate(var(--rect)); }
.pilot__rect {
  position: absolute; inset: 0;
  background: linear-gradient(var(--ga), var(--c1), var(--c2));
  /* Linha curta -> retângulo: revela na vertical (revV) e depois alarga (revH). */
  clip-path: inset(calc((1 - var(--revV)) * 50%) calc((1 - var(--revH)) * 50%));
}
.pilot__dia {
  position: absolute; left: 50%; top: var(--diatop); width: var(--diaw); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--dia)); background: var(--co);
  clip-path: inset(calc((1 - var(--revD)) * 50%));   /* abre por dentro (revD) */
}
/* Losango-acento: só a pose "Duplo" (Publicações) o revela, via --accv. */
.pilot__acc {
  position: absolute; left: 50%; top: 30%; width: 24%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--accv));
  background: var(--co); opacity: var(--accv);
}
@media (max-width: 1023px) { .pilot { display: none; } }

/* --- HERO: contentor alto e escuro; os "beats" (palavra-marca e frases) vivem
   dentro dele em profundidades diferentes e ROLAM com a página. Ao descer, cada
   um sobe e sai por cima — "fica para trás" — sem desvanecer. O ícone (fixo)
   desce devagar a guiar. É a leitura mais natural do scroll (ref. runrobrun). */
.hero {
  position: relative;
  height: 420vh;            /* reserva para navegadores sem svh */
  height: 420svh;           /* dá espaço às 3 batidas (marca -> Dados -> Ideias) */
  --hero-fundo: #0A0A09;    /* palco escuro fixo, não segue o tema */
  background: var(--hero-fundo);
}

/* "Geração Agora" — palavra-marca REAL (imagem branca), CENTRADA. É FIXA no ecrã:
   aparece depois de o ícone formar (--wmIn), segura um instante e DESVANECE
   (--wmOut) antes de o ícone começar a descer — assim o ícone nunca lhe passa
   pelo meio. Sobe de leve ao entrar. */
.wordmark {
  position: fixed; left: 50%; top: 60vh; z-index: 4;
  width: clamp(190px, 20vw, 262px); height: auto;
  transform: translate(-50%, calc((1 - var(--wmIn)) * 14px));
  opacity: calc(var(--wmIn) * (1 - var(--wmOut)));
  will-change: opacity, transform;
}

/* Slogan — em lados opostos e profundidades diferentes; ROLAM naturalmente e
   ficam para trás. A 1ª palavra ("Dados"/"Ideias") é MAIOR e com ligeiro brilho;
   o resto ("que pesam"/"que contam") é mais pequeno. Verde de marca sobre escuro
   = 11:1; azul-400 = 6,4:1 (ambos AA). Levitam de leve para não parecerem rígidos. */
.slg {
  position: absolute; margin: 0; z-index: 4;
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.5vw, 2.9rem); line-height: 1;   /* tamanho do "resto" */
  letter-spacing: var(--ls-hero); max-width: 13ch;
}
.slg__key {
  display: inline-block; font-size: 1.5em; line-height: .92;   /* 1ª palavra, maior */
}
.slg--a { left: 6vw;  top: 175vh; text-align: left;  color: var(--verde-marca); animation: flutua 6.5s ease-in-out infinite; }
.slg--b { right: 6vw; top: 300vh; text-align: right; color: var(--azul-400);   animation: flutua 7s ease-in-out .4s infinite; }
/* Ligeiro brilho na 1ª palavra, na cor respetiva. */
.slg--a .slg__key { text-shadow: 0 0 26px color-mix(in srgb, var(--verde-marca) 50%, transparent); }
.slg--b .slg__key { text-shadow: 0 0 26px color-mix(in srgb, var(--azul-400) 55%, transparent); }
@keyframes flutua   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes flutua-c { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }

/* Pista de scroll: fixa ao fundo do ecrã, some assim que se começa a descer.
   Cor fixa clara (o palco é sempre escuro). */
.hero__cue {
  position: fixed; left: 50%; bottom: clamp(1.4rem, 4vh, 2.8rem); z-index: 5;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(242, 241, 234, .62); text-decoration: none;
  opacity: calc(1 - clamp(0, calc(var(--hp) / .04), 1));
  transition: color var(--dur-2) var(--ease-saida);
}
.hero__cue:hover { color: rgba(242, 241, 234, .95); }
.hero__cue span {
  font-family: var(--fonte-texto); font-weight: var(--peso-forte);
  font-size: var(--fs-xs); letter-spacing: var(--ls-rotulo); text-transform: uppercase;
}
.hero__cue svg { animation: cue-desce 1.9s var(--ease-ambos) infinite; }
@keyframes cue-desce {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* --- Pista do companheiro nas secções (desktop) -------------------------
   O companheiro parqueia à esquerda; .rail dá margem ao conteúdo para ele não
   sobrepor. A vitrine "O que fazemos" (full-bleed) fica de fora de propósito. */
@media (min-width: 1024px) {
  .rail > .env,
  .rail > .percursos { padding-left: calc(var(--goteira) + 6vw); }
  .cta.rail > .env { padding-left: calc(var(--goteira) + 6vw); }
}

/* --- Fallback: <1024px, sem JS, movimento reduzido -----------------------
   O hero colapsa para uma pilha estática e centrada; sem rolagem de beats nem
   companheiro fixo. A marca montada é a .hero__mob. */
.hero__mob { display: none; }
@media (max-width: 1023px) {
  .hero__cue { display: none; }
  .hero {
    height: auto; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 1.4rem; padding-block: 6rem 3rem;
  }
  .wordmark, .slg {
    position: static; transform: none !important; animation: none !important;
    opacity: 1 !important; max-width: none; text-align: center;
  }
  .slg__key { display: block; }
  .wordmark { width: min(70vw, 240px); margin-block: .4rem 1rem; }
  .slg { font-size: clamp(2rem, 9vw, 3.2rem); }
  .hero__mob { display: block; width: 104px; aspect-ratio: 900 / 1914; position: relative; order: -1; }
  .hero__mob .pilot__mark { transform: none; }
  .hero__mob .pilot__rect {
    background: linear-gradient(152deg, var(--verde-gradiente), var(--azul-gradiente));
    clip-path: none;
  }
  .hero__mob .pilot__dia {
    clip-path: none; top: 76.5%; width: 70.7%;
    transform: translate(-50%, -50%) rotate(45deg); background: var(--hero-fundo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pilot { display: none; }
  .hero__cue { display: none; }
  .hero {
    height: auto; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 1.4rem; padding-block: 6rem 3rem;
  }
  .wordmark, .slg {
    position: static; transform: none !important; animation: none !important;
    opacity: 1 !important; max-width: none; text-align: center;
  }
  .slg__key { display: block; }
  .wordmark { width: min(70vw, 240px); margin-block: .4rem 1rem; }
  .slg { font-size: clamp(2rem, 6vw, 3.2rem); }
  .hero__mob { display: block; width: 104px; aspect-ratio: 900 / 1914; position: relative; order: -1; }
  .hero__mob .pilot__mark { transform: none; }
  .hero__mob .pilot__rect {
    background: linear-gradient(152deg, var(--verde-gradiente), var(--azul-gradiente));
    clip-path: none;
  }
  .hero__mob .pilot__dia {
    clip-path: none; top: 76.5%; width: 70.7%;
    transform: translate(-50%, -50%) rotate(45deg); background: var(--hero-fundo);
  }
}


/* ==========================================================================
   MOMENTO DE DADOS · a lacuna que o Think Tank veio preencher
   ========================================================================== */

.dados-par {
  display: grid; gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
}
.estatistica { display: grid; gap: var(--sp-3); }
.estatistica__valor {
  font-family: var(--fonte-display);
  font-size: var(--fs-numero);
  font-weight: var(--peso-display);
  line-height: .85;
  letter-spacing: var(--ls-hero);
  color: var(--texto-1);
}
.estatistica__valor em { font-style: normal; color: var(--acento); }
.estatistica__label { font-size: var(--fs-sm); color: var(--texto-2); max-width: 34ch; }
.estatistica__fonte { font-size: var(--fs-xs); color: var(--texto-4); }

/* Pictograma: 230 losangos, 18 acesos */
.pictograma {
  display: grid;
  grid-template-columns: repeat(23, 1fr);
  gap: 4px; max-width: 420px; margin-top: var(--sp-2);
}
.pictograma i {
  aspect-ratio: 1; display: block;
  background: var(--linha-forte);
  clip-path: var(--losango);
}
.pictograma i[data-aceso="true"] { background: var(--acento); }

/* Barra de idade */
.barra-idade { max-width: 420px; margin-top: var(--sp-2); }
.barra-idade__pista {
  height: 8px; background: var(--linha-forte); position: relative;
}
.barra-idade__marca {
  position: absolute; top: -6px; bottom: -6px; width: 3px;
  background: var(--acento);
  transition: left var(--dur-5) var(--ease-saida);
}
.barra-idade__escala {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--texto-4); margin-top: var(--sp-2);
}


/* ==========================================================================
   MOMENTO DO SLOGAN
   Faixa de largura total. O slogan aparece aqui, não no hero.
   ========================================================================== */

.slogan {
  padding-block: var(--sp-seccao-larga);
  border-block: 1px solid var(--linha);
  overflow: hidden;
}
.slogan p {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: clamp(2.25rem, 7.5vw, 6.5rem);
  line-height: .95;
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  color: var(--texto-1);
  max-width: 16ch;
}
.slogan p span { display: block; }
.slogan p span:last-child { color: transparent; background: var(--gradiente-brilho);
  -webkit-background-clip: text; background-clip: text; }


/* ==========================================================================
   PERCURSOS DE UTILIZADOR
   Três linhas grandes. Ao passar o rato, a linha ilumina-se e o gradiente da
   marca entra pela esquerda. Cada uma leva ao percurso otimizado do perfil.
   ========================================================================== */

.percursos { border-top: 1px solid var(--linha-forte); }

.percurso {
  position: relative; display: block; text-decoration: none;
  border-bottom: 1px solid var(--linha-forte);
  padding-block: var(--sp-7);
  overflow: hidden;
  transition: padding-inline var(--dur-3) var(--ease-saida);
}
/* Painel de gradiente que entra pela esquerda */
.percurso::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--gradiente-claro);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-4) var(--ease-ambos);
}
.percurso__interior {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--sp-5); align-items: center;
}
/* Losango marcador, o motivo da marca. Roda e enche no hover. */
.percurso__losango {
  position: relative;
  width: 30px; height: 30px; flex: none;
  background: var(--texto-4);
  clip-path: var(--losango);
  transition: transform var(--dur-4) var(--ease-saida),
              background-color var(--dur-3) var(--ease-saida),
              border-color var(--dur-3) var(--ease-saida);
}
.percurso__texto { display: grid; gap: var(--sp-2); min-width: 0; }
.percurso__tag {
  font-family: var(--fonte-display); font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.25; letter-spacing: -0.005em; font-weight: var(--peso-display);
  color: var(--acento);
  transition: color var(--dur-3) var(--ease-saida);
}
.percurso h3 {
  font-size: clamp(1.6rem, 4.2vw, 3.1rem);
  font-weight: var(--peso-display);
  line-height: 1; letter-spacing: var(--ls-display);
  color: var(--texto-1);
  transition: color var(--dur-3) var(--ease-saida), transform var(--dur-3) var(--ease-saida);
}
.percurso p {
  font-size: var(--fs-sm); color: var(--texto-3); max-width: 52ch;
  transition: color var(--dur-3) var(--ease-saida);
}
.percurso__losango::after {
  content: ""; position: absolute; inset: 2px; clip-path: var(--losango);
  background: var(--superficie-0); transition: opacity var(--dur-3) var(--ease-saida);
}
.percurso:hover .percurso__losango::after,
.percurso:focus-visible .percurso__losango::after { opacity: 0; }
/* Linha de ação que se revela no hover, ao estilo phobos */
.percurso__acao-txt {
  font-size: var(--fs-sm); font-weight: var(--peso-forte);
  color: var(--preto-marca);
  max-height: 0; opacity: 0; overflow: hidden;
  transform: translateY(6px);
  transition: max-height var(--dur-4) var(--ease-saida),
              opacity var(--dur-3) var(--ease-saida),
              transform var(--dur-3) var(--ease-saida);
}
.percurso__acao {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px;
  border: 1px solid var(--linha-forte); color: var(--texto-2);
  transition: background-color var(--dur-3) var(--ease-saida),
              border-color var(--dur-3) var(--ease-saida),
              color var(--dur-3) var(--ease-saida),
              transform var(--dur-3) var(--ease-saida);
}

@media (hover: hover) {
  .percurso:hover::before { transform: scaleX(1); }
  .percurso:hover .percurso__tag { color: var(--preto-marca); }
  .percurso:hover h3 { color: var(--preto-marca); transform: translateX(4px); }
  .percurso:hover p { color: #16160F; }
  .percurso:hover .percurso__losango {
    background: var(--preto-marca); border-color: var(--preto-marca);
    transform: rotate(90deg);
  }
  .percurso:hover .percurso__acao-txt {
    max-height: 3em; opacity: 1; transform: none; margin-top: var(--sp-1);
  }
  .percurso:hover .percurso__acao {
    background: var(--preto-marca); border-color: var(--preto-marca);
    color: #FFFFFF; transform: translateX(6px);
  }
}
/* O foco por teclado produz exatamente o mesmo destaque do rato */
.percurso:focus-visible::before { transform: scaleX(1); }
.percurso:focus-visible .percurso__tag,
.percurso:focus-visible h3,
.percurso:focus-visible p { color: var(--preto-marca); }
.percurso:focus-visible .percurso__losango {
  background: var(--preto-marca); border-color: var(--preto-marca); transform: rotate(90deg);
}
.percurso:focus-visible .percurso__acao-txt { max-height: 3em; opacity: 1; transform: none; }
.percurso:focus-visible .percurso__acao {
  background: var(--preto-marca); border-color: var(--preto-marca); color: #FFFFFF;
}

@media (max-width: 700px) {
  .percurso__interior { grid-template-columns: 1fr auto; gap: var(--sp-4); }
  .percurso__losango { display: none; }
}


/* ==========================================================================
   ÓRBITA DO SPRINT · o método em ciclo
   Um anel que roda continuamente (a ideia de melhoria contínua), com as fases
   em losangos à volta e o detalhe ao lado. Em telemóvel empilha.
   O anel é construído por main.js a partir de SPRINT.ciclo.
   ========================================================================== */

.orbita {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
}

/* --- O palco circular --------------------------------------------------- */
.orbita__palco {
  position: relative;
  width: min(440px, 84vw);
  aspect-ratio: 1;
  margin-inline: auto;
}
/* Pista fixa do anel */
.orbita__anel {
  position: absolute; inset: 12%;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
}
/* Cometa que roda sem parar: transmite atualização e progresso contínuo */
.orbita__giro {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0 64%, var(--acento) 90%, var(--ligacao) 100%);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 2px));
  opacity: .95;
  animation: orbita-girar 9s linear infinite;
}
@keyframes orbita-girar { to { transform: rotate(360deg); } }

/* Centro: número da fase ativa e a marca de ciclo contínuo */
.orbita__centro {
  position: absolute; inset: 28%;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  text-align: center; pointer-events: none;
}
.orbita__centro-n {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  /* O texto é pintado pelo fundo (background-clip: text), que só cobre a caixa.
     Com line-height .8 a caixa era mais baixa do que o algarismo e o topo
     ficava cortado. Caixa com a altura toda + folga em cima. */
  line-height: 1; padding: .08em .04em 0;
  letter-spacing: var(--ls-hero);
  color: transparent; background: var(--gradiente-brilho);
  -webkit-background-clip: text; background-clip: text;
}
.orbita__centro-de {
  font-size: var(--fs-rotulo); text-transform: uppercase;
  letter-spacing: var(--ls-rotulo); color: var(--texto-4);
}

/* Cada fase, um losango na órbita com a etiqueta curta */
.orbita__no {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: var(--sp-2);
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--texto-3); width: max-content;
  transition: color var(--dur-2) var(--ease-saida);
}
/* O contorno faz-se por camadas (losango de fora na cor da linha + losango de
   dentro na cor do fundo): uma border seria cortada pelo clip-path e o losango
   desaparecia no fundo preto. */
.orbita__no-marca {
  position: relative;
  width: 18px; height: 18px;
  background: var(--texto-4);
  clip-path: var(--losango);
  transition: background-color var(--dur-2) var(--ease-saida),
              border-color var(--dur-2) var(--ease-saida),
              transform var(--dur-3) var(--ease-mola),
              box-shadow var(--dur-3) var(--ease-saida);
}
.orbita__no-rot {
  font-size: var(--fs-rotulo); text-transform: uppercase;
  letter-spacing: var(--ls-rotulo); font-weight: var(--peso-forte);
  white-space: nowrap;
}
.orbita__no-marca::after {
  content: ""; position: absolute; inset: 2px; clip-path: var(--losango);
  background: var(--superficie-1);
  transition: opacity var(--dur-2) var(--ease-saida);
}
.orbita__no:hover { color: var(--texto-1); }
.orbita__no:hover .orbita__no-marca { background: var(--texto-2); }
.orbita__no[aria-selected="true"] { color: var(--texto-1); }
.orbita__no[aria-selected="true"] .orbita__no-marca::after { opacity: 0; }
.orbita__no[aria-selected="true"] .orbita__no-marca {
  background: var(--acento);
  transform: rotate(90deg) scale(1.28); box-shadow: var(--brilho-verde);
}

/* --- O painel de detalhe ------------------------------------------------ */
.orbita__detalhe {
  border: 1px solid var(--linha-forte);
  background: var(--superficie-1);
  padding: var(--sp-6);
  display: grid; gap: var(--sp-4);
  min-height: 300px; align-content: start;
}
.orbita__fases {
  font-family: var(--fonte-texto); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  color: var(--acento); text-transform: uppercase; letter-spacing: var(--ls-rotulo);
}
.orbita__detalhe h3 { font-size: var(--fs-d3); }
.orbita__detalhe p { color: var(--texto-2); }
.orbita__quem {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--ls-rotulo); color: var(--texto-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--linha);
}
.orbita__fecho {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--texto-3);
  padding-top: var(--sp-2);
}
.orbita__fecho svg { flex: none; color: var(--acento); }
/* Transição suave ao trocar de fase */
.orbita__detalhe .orbita__anima { animation: entra var(--dur-3) var(--ease-saida) both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .orbita__giro { animation: none; }
  .orbita__detalhe .orbita__anima { animation: none; }
}
@media (max-width: 900px) {
  .orbita { grid-template-columns: 1fr; gap: var(--sp-7); }
}


/* ==========================================================================
   CARTÕES
   ========================================================================== */

.cartao {
  background: var(--superficie-1);
  border: 1px solid var(--linha);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-3); align-content: start;
  position: relative;
  transition: border-color var(--dur-3) var(--ease-saida),
              background-color var(--dur-3) var(--ease-saida),
              transform var(--dur-3) var(--ease-saida);
}
a.cartao { text-decoration: none; }
.cartao:hover { border-color: var(--texto-4); background: var(--superficie-2); }
a.cartao:hover { transform: translateY(-3px); }
.cartao h3, .cartao h4 { color: var(--texto-1); }
.cartao p { font-size: var(--fs-sm); color: var(--texto-3); }
.cartao__topo { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.cartao--esbatido { opacity: .62; }
.cartao--esbatido:hover { opacity: .85; }

/* Cartão de publicação */
.pub { min-height: 230px; }
.pub__meta {
  margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--linha);
  font-size: var(--fs-xs); color: var(--texto-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
}

/* Cartão de atividade */
.ativ { display: grid; gap: var(--sp-4); }
.ativ__tagline {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-d4); text-transform: none; letter-spacing: 0;
  color: var(--acento); line-height: var(--lh-titulo);
}
.ativ__specs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xs); color: var(--texto-3);
  padding-block: var(--sp-4); border-block: 1px solid var(--linha);
}
.ativ__specs b { color: var(--texto-1); font-weight: var(--peso-forte); display: block; }
.ativ__listas { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.ativ__listas h4 {
  font-family: var(--fonte-texto); font-size: var(--fs-rotulo);
  letter-spacing: var(--ls-rotulo); color: var(--texto-4);
  margin-bottom: var(--sp-3);
}
.lista-losango { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.lista-losango li {
  position: relative; padding-left: var(--sp-5);
  font-size: var(--fs-sm); color: var(--texto-2);
}
.lista-losango li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--acento); clip-path: var(--losango);
}

/* Programa da sessão */
.programa { display: grid; gap: 0; }
.programa__linha {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-4);
  padding-block: var(--sp-4); border-top: 1px solid var(--linha);
}
.programa__tempo {
  font-family: var(--fonte-texto); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  color: var(--acento); padding-top: 3px;
}
.programa__linha h5 {
  font-family: var(--fonte-display); font-weight: var(--peso-titulo);
  font-size: var(--fs-base); text-transform: uppercase;
  letter-spacing: var(--ls-titulo); color: var(--texto-1);
  margin-bottom: var(--sp-2);
}
.programa__linha p { font-size: var(--fs-sm); color: var(--texto-3); }
@media (max-width: 620px) {
  .programa__linha { grid-template-columns: 1fr; gap: var(--sp-2); }
}


/* ==========================================================================
   BLOCO DE DESTAQUE COM GRADIENTE
   ========================================================================== */

.destaque {
  background: var(--gradiente-claro);
  color: var(--preto-marca);
  padding: var(--sp-7);
  display: grid; gap: var(--sp-4); align-content: center;
}
.destaque h3, .destaque h2 { color: var(--preto-marca); }
.destaque p { color: #16160F; }   /* solido: 10,3:1 no ponto mais escuro do gradiente */
.destaque .btn--primario { background: var(--preto-marca); color: #FFFFFF; }
.destaque .btn--primario:hover { background: #232320; color: #FFFFFF; }


/* ==========================================================================
   CHAMADA À AÇÃO FINAL
   Peça grande e inequívoca. Os losangos de fundo movem-se lentamente.
   ========================================================================== */

.cta {
  position: relative; overflow: hidden;
  padding-block: var(--sp-seccao-larga);
  border-top: 1px solid var(--linha-forte);
}
.cta__campo {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  pointer-events: none;
}
.cta__interior { position: relative; z-index: 1; display: grid; gap: var(--sp-6); justify-items: start; }
.cta h2 {
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: .92; letter-spacing: var(--ls-hero);
  max-width: 14ch;
}
.cta .lead { max-width: 48ch; }

/* Benefícios de ser voluntário (apresentação, página 8) */
.cta__beneficios {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
}
.cta__beneficios li {
  position: relative; padding-left: var(--sp-5);
  font-size: var(--fs-sm); font-weight: var(--peso-medio); color: var(--texto-2);
}
.cta__beneficios li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--acento); clip-path: var(--losango);
}

/* Botão grande com preenchimento animado */
.btn-mega {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--sp-4);
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  text-transform: uppercase; letter-spacing: var(--ls-titulo);
  padding: var(--sp-5) var(--sp-7);
  background: transparent; color: var(--texto-1);
  border: 1px solid var(--texto-1); text-decoration: none;
  transition: color var(--dur-3) var(--ease-saida), border-color var(--dur-3) var(--ease-saida);
}
.btn-mega::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--gradiente-claro);
  transform: translateY(101%);
  transition: transform var(--dur-4) var(--ease-ambos);
}
.btn-mega > * { position: relative; z-index: 1; }
.btn-mega:hover, .btn-mega:focus-visible { color: var(--preto-marca); border-color: transparent; }
.btn-mega:hover::before, .btn-mega:focus-visible::before { transform: translateY(0); }
.btn-mega svg { transition: transform var(--dur-3) var(--ease-saida); }
.btn-mega:hover svg { transform: translateX(6px); }


/* ==========================================================================
   MÉTODOS E PRINCÍPIOS (página Investigação e Políticas)
   ========================================================================== */

.metodo {
  border-top: 1px solid var(--linha);
  padding-block: var(--sp-5);
  display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-5);
}
.metodo h4 { font-size: var(--fs-d4); }
.metodo p { font-size: var(--fs-sm); color: var(--texto-3); }
@media (max-width: 700px) { .metodo { grid-template-columns: 1fr; gap: var(--sp-2); } }

.amostra {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px; padding: 1px;
  border: 1px solid var(--linha-forte); background: var(--linha);
}
.amostra__item {
  display: grid; gap: var(--sp-3); align-content: start;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) var(--sp-5);
  background: var(--superficie-1);
}
.amostra__n {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: .82;
  letter-spacing: var(--ls-hero);
  display: flex; align-items: baseline;
}
.amostra__n em { font-style: normal; font-size: 0.5em; margin-left: 0.06em; }
.amostra__n--verde   { color: var(--acento); }
.amostra__n--azul    { color: var(--azul-400); }
.amostra__n--lavanda { color: var(--lavanda); }
[data-tema="claro"] .amostra__n--azul    { color: var(--azul-700); }
[data-tema="claro"] .amostra__n--lavanda { color: var(--azul-800); }
.amostra__leg {
  font-size: var(--fs-sm); color: var(--texto-3); max-width: 22ch;
}


/* ==========================================================================
   FORMULÁRIO E CONTACTOS
   ========================================================================== */

.contacto-linha {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-4); border-bottom: 1px solid var(--linha);
  text-decoration: none; color: var(--texto-1);
  transition: padding-left var(--dur-2) var(--ease-saida);
}
.contacto-linha:hover { padding-left: var(--sp-3); color: var(--acento); }
.contacto-linha svg { flex: none; color: var(--texto-4); }
.contacto-linha:hover svg { color: var(--acento); }
.contacto-linha span { font-size: var(--fs-xs); color: var(--texto-4); display: block;
  text-transform: uppercase; letter-spacing: var(--ls-rotulo); }

/* Aviso de link por definir, visível só para a equipa durante o protótipo */
.por-definir {
  position: relative;
}
.por-definir::after {
  content: "por definir";
  position: absolute; top: -9px; right: -9px;
  background: var(--aviso); color: var(--preto-marca);
  font-family: var(--fonte-texto); font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 5px; pointer-events: none;
}


/* ==========================================================================
   PÁGINA DE ARTIGO / LEITURA LONGA
   ========================================================================== */

.artigo { max-width: var(--medida-texto); }
.artigo h2 { font-size: var(--fs-d3); margin-block: var(--sp-7) var(--sp-4); }
.artigo h3 { font-size: var(--fs-d4); margin-block: var(--sp-6) var(--sp-3); }
.artigo p { margin-bottom: var(--sp-4); }
.artigo ul, .artigo ol { margin-bottom: var(--sp-4); padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.artigo li { font-size: var(--fs-base); }


/* ==========================================================================
   CONHECIMENTO QUE SE USA · lista interativa
   Cada linha abre ao passar o rato (desktop) ou ao clicar/tocar. O estado
   "em preparação" é uma etiqueta legível, não um cartão esbatido.
   ========================================================================== */

.conhec { border-top: 1px solid var(--linha-forte); }
.conhec__item { border-bottom: 1px solid var(--linha-forte); }

.conhec__cab {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 22px 1fr 24px; gap: var(--sp-4);
  align-items: start; padding-block: var(--sp-5);
  transition: padding-inline var(--dur-3) var(--ease-saida);
}
.conhec__marca {
  width: 14px; height: 14px; margin: 6px 4px 0;
  background: var(--superficie-0); border: 1px solid var(--linha-forte);
  clip-path: var(--losango);
  transition: background-color var(--dur-2) var(--ease-saida),
              border-color var(--dur-2) var(--ease-saida),
              transform var(--dur-3) var(--ease-mola);
}
.conhec__cab-txt { display: grid; gap: var(--sp-2); min-width: 0; }
.conhec__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.conhec__estado {
  font-size: var(--fs-rotulo); text-transform: uppercase;
  letter-spacing: var(--ls-rotulo); color: var(--texto-4);
}
.conhec__titulo {
  font-family: var(--fonte-display); font-weight: var(--peso-titulo);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem); text-transform: uppercase;
  letter-spacing: var(--ls-titulo); line-height: 1.12; color: var(--texto-1);
  transition: color var(--dur-2) var(--ease-saida);
}
/* Sinal +/− */
.conhec__mais { position: relative; width: 22px; height: 22px; margin-top: 6px; color: var(--texto-3); }
.conhec__mais::before, .conhec__mais::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
}
.conhec__mais::before { width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; }
.conhec__mais::after  { width: 1.5px; height: 14px; margin: -7px 0 0 -0.75px;
  transition: transform var(--dur-3) var(--ease-saida); }

/* Painel colapsável (linhas de grelha 0fr→1fr, sem saltos de altura) */
.conhec__painel { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-4) var(--ease-saida); }
.conhec__painel-in { overflow: hidden; }
.conhec__corpo {
  padding: 0 0 var(--sp-6) calc(22px + var(--sp-4));
  max-width: var(--medida-texto); display: grid; gap: var(--sp-3);
}
.conhec__corpo .nota { color: var(--acento); }
.conhec__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  font-size: var(--fs-xs); color: var(--texto-4);
  padding-top: var(--sp-3); border-top: 1px solid var(--linha);
}

/* Aberto: por clique (aria-expanded) */
.conhec__cab[aria-expanded="true"] .conhec__mais::after { transform: rotate(90deg); }
.conhec__cab[aria-expanded="true"] .conhec__marca { background: var(--acento); border-color: var(--acento); transform: rotate(90deg); }
.conhec__cab[aria-expanded="true"] + .conhec__painel { grid-template-rows: 1fr; }

/* Pré-visualização ao passar o rato (só em ecrãs com rato) */
@media (hover: hover) {
  .conhec__item:hover .conhec__cab { padding-inline-start: var(--sp-2); }
  .conhec__item:hover .conhec__titulo { color: var(--acento); }
  .conhec__item:hover .conhec__marca { border-color: var(--acento); transform: rotate(90deg); }
  .conhec__item:hover .conhec__painel { grid-template-rows: 1fr; }
}


/* ==========================================================================
   BANNER DE SECÇÃO · foto horizontal no topo das páginas de perfil
   A foto entra em escala de cinza esbatida e ganha cor ao passar o rato,
   com um véu para o texto continuar legível. Sem texto por cima, apenas
   ambienta o início da página.
   ========================================================================== */

.banner {
  position: relative;
  height: clamp(200px, 34vw, 380px);
  margin-top: calc(var(--sp-9) + 12px);   /* espaço para a barra de navegação fixa */
  overflow: hidden;
  border-bottom: 1px solid var(--linha-forte);
  background: var(--superficie-1);
}
.banner__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) contrast(1.02);
  transform: scale(1.04);
  transition: filter var(--dur-5) var(--ease-saida), transform 1.2s var(--ease-saida);
}
@media (hover: hover) {
  .banner:hover .banner__img { filter: grayscale(0) contrast(1.02); transform: scale(1); }
}
/* Véu inferior/lateral, na cor do fundo, para colar a foto à página */
.banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--superficie-0) 30%, transparent) 0%,
      transparent 30%,
      color-mix(in srgb, var(--superficie-0) 62%, transparent) 100%);
}
/* Fio da marca por cima da foto */
.banner__losango {
  position: absolute; left: var(--goteira); bottom: var(--sp-5); z-index: 1;
  width: 26px; height: 26px; background: var(--gradiente-marca); clip-path: var(--losango);
}


/* ==========================================================================
   ÍNDICE · lista de conhecimento em duas colunas (contexto fixo + conteúdo
   que passa). Usado em "Conhecimento que se usa" (index) e "Publicações"
   (dados). Padrão inspirado na secção da Aspen Search, em vanilla:
   position:sticky + IntersectionObserver, sem framework.
   ========================================================================== */

.indice-wrap { display: grid; gap: clamp(var(--sp-6), 5vw, var(--sp-9)); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .indice-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* --- Coluna esquerda: o contexto que fica fixo --- */
.indice-ctx { display: grid; gap: var(--sp-4); align-content: start; }
@media (min-width: 900px) {
  .indice-ctx { position: sticky; top: clamp(96px, 18vh, 150px); }
}
.indice-titulo {
  font-family: var(--fonte-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.05;
  letter-spacing: var(--ls-display); text-transform: uppercase;
  font-weight: var(--peso-display); color: var(--texto-1); margin: 0;
}
.indice-intro { font-size: var(--fs-lead); color: var(--texto-2); max-width: 42ch; margin: 0; }
.indice-cta {
  align-self: start; margin-top: var(--sp-2);
  background: transparent; color: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 55%, transparent);
}
.indice-cta:hover { background: var(--acento); color: var(--preto-marca); border-color: var(--acento); }

/* --- Coluna direita: a lista que passa --- */
.indice { list-style: none; margin: 0; padding: 0; display: grid; }
.indice-item {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-7));
  padding: clamp(var(--sp-6), 3.5vw, var(--sp-8)) 0;
  border-top: 1px solid var(--linha);
}
.indice-item:last-child { border-bottom: 1px solid var(--linha); }
.indice-item:hover { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
.indice-icone {
  display: inline-flex; flex: none;
  width: clamp(30px, 3.4vw, 40px); margin-top: 0.15em;
  color: var(--texto-4);
  transition: color var(--dur-3) var(--ease-saida), transform var(--dur-3) var(--ease-saida);
}
.indice-icone svg { width: 100%; height: auto; display: block; }
.indice-corpo { display: grid; gap: var(--sp-3); min-width: 0; }
.indice-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.indice-item-titulo {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.15;
  color: var(--texto-1); margin: 0;
}
.indice-item-sub { color: var(--texto-3); font-size: var(--fs-sm); margin: calc(var(--sp-2) * -1) 0 0; }
.indice-item-desc { color: var(--texto-2); margin: 0; max-width: 60ch; }
.indice-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  color: var(--texto-4); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--ls-rotulo);
}

/* --- Remate suave da lista ------------------------------------------------
   Coluna da direita: a lista e, por baixo, uma saída discreta. Não é um botão
   (seria uma segunda chamada a competir com a da coluna esquerda): é uma linha
   que continua a pauta da lista e diz para onde ir enquanto não há nada nosso
   publicado. A lista já fecha com um filete, por isso esta linha não leva
   filete em cima. */
.indice-col { min-width: 0; display: grid; align-content: start; }
.indice-suave {
  display: grid; gap: var(--sp-2);
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-6)) 0;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--linha);
  transition: background-color var(--dur-3) var(--ease-saida);
}
.indice-suave:hover { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
.indice-suave__q { font-size: var(--fs-sm); color: var(--texto-3); }
.indice-suave__a {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--acento); font-weight: var(--peso-forte);
}
.indice-suave__a svg { flex: none; transition: transform var(--dur-3) var(--ease-saida); }
.indice-suave:hover .indice-suave__a svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .indice-suave__a svg { transition: none; }
}

/* Foco ao centro: os inativos esbatem, o do centro fica a 100% (só com JS) */
.js .indice-item {
  opacity: 0.4;
  transition: opacity var(--dur-3) var(--ease-saida), background-color var(--dur-3) var(--ease-saida);
}
.js .indice-item.is-active { opacity: 1; }
.js .indice-item.is-active .indice-icone { color: var(--acento); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .js .indice-item { opacity: 1; } }

/* Chips (as etiquetas de tipo e estado como pastilhas) */
.chip {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: var(--peso-forte);
  text-transform: uppercase; letter-spacing: var(--ls-rotulo);
  padding: 0.3em 0.72em; border-radius: var(--raio-pilula);
  border: 1px solid var(--linha-forte); color: var(--texto-3);
}
.chip--verde   { color: var(--verde-200); border-color: color-mix(in srgb, var(--verde-marca) 45%, transparent); }
.chip--azul    { color: var(--azul-400);  border-color: color-mix(in srgb, var(--azul-400) 45%, transparent); }
.chip--lavanda { color: var(--lavanda);   border-color: color-mix(in srgb, var(--lavanda) 40%, transparent); }
.chip--neutro  { color: var(--texto-3); }
.chip--estado  { color: var(--aviso);     border-color: color-mix(in srgb, var(--aviso) 45%, transparent); }
/* Tema claro: as cores dos chips escurecem para manter o contraste AA sobre
   fundo claro (espelha o que já existe para .etiqueta em tokens.css). */
[data-tema="claro"] .chip--verde   { color: var(--verde-700); border-color: color-mix(in srgb, var(--verde-700) 45%, transparent); }
[data-tema="claro"] .chip--azul    { color: var(--azul-700);  border-color: color-mix(in srgb, var(--azul-700) 45%, transparent); }
[data-tema="claro"] .chip--lavanda { color: var(--azul-800);  border-color: color-mix(in srgb, var(--azul-800) 40%, transparent); }
[data-tema="claro"] .chip--estado  { color: #8A5300; border-color: #8A530059; }

/* Entrada "mask-up" do contexto (só com JS): as linhas sobem de um recorte */
.indice-titulo, .indice-intro { overflow: hidden; }
.js .indice-titulo .msk-in, .js .indice-intro .msk-in {
  display: block; transform: translateY(115%);
  transition: transform var(--dur-4) var(--ease-saida);
}
.js .indice-intro .msk-in { transition-delay: 0.14s; }
.js .indice-ctx.rev { opacity: 1; transform: none; }   /* o bloco é só o gatilho; anima o interior */
.js .indice-ctx[data-visivel="true"] .msk-in { transform: none; }
.js .indice-chapeu, .js .indice-cta {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-4) var(--ease-saida), transform var(--dur-4) var(--ease-saida);
}
.js .indice-ctx[data-visivel="true"] .indice-chapeu { opacity: 1; transform: none; }
.js .indice-ctx[data-visivel="true"] .indice-cta { opacity: 1; transform: none; transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .js .indice-titulo .msk-in, .js .indice-intro .msk-in { transform: none; }
  .js .indice-chapeu, .js .indice-cta { opacity: 1; transform: none; }
}


/* ==========================================================================
/* ==========================================================================
   O QUE FAZEMOS · carrossel horizontal das três áreas de valor.
   Cada área = texto + a foto num LOSANGO. Empilhado por omissão (fallback sem
   JS / telemóvel / movimento reduzido). Com .fazemos--carrossel (desktop, JS) a
   vitrine desliza na HORIZONTAL entre as áreas, com uma transição rápida e
   limpa. SEM numeração — a barra de losangos no canto indica quantas são.
   ========================================================================== */

.fazemos__topo { display: grid; gap: var(--sp-4); margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-8)); }

/* --- Base: áreas empilhadas (fallback sem JS / movimento reduzido) --- */
.fazemos__track { display: grid; gap: clamp(var(--sp-7), 6vw, var(--sp-10)); }
.fazemos__area { display: grid; gap: clamp(var(--sp-5), 4vw, var(--sp-7)); align-items: center; }
@media (min-width: 680px) {
  .fazemos__area { grid-template-columns: 1fr minmax(240px, 0.82fr); }
  .fazemos__area:nth-child(even) .fazemos__texto { order: 2; }
}
.fazemos__texto { display: grid; gap: var(--sp-3); align-content: center; max-width: 44ch; }
.fazemos__kicker { font-family: var(--fonte-display); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.25; letter-spacing: -0.005em; font-weight: var(--peso-display); color: var(--verde-200); }
/* Em tema claro o verde-200 falha o contraste AA (1,3:1). Usa o verde escuro. */
[data-tema="claro"] .fazemos__kicker { color: var(--verde-700); }
/* #6 hierarquia: o NOME da área manda (grande); a descrição é secundária. */
.fazemos__titulo {
  display: flex; align-items: center; gap: var(--sp-3); margin: 0;
  font-family: var(--fonte-display); text-transform: uppercase;
  letter-spacing: var(--ls-display); font-weight: var(--peso-display);
  font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.02; color: var(--texto-1);
}
.fazemos__titulo-los { flex: none; width: 14px; height: 14px; background: var(--gradiente-marca); clip-path: var(--losango); }
.fazemos__desc { color: var(--texto-3); margin: 0; font-size: var(--fs-sm); line-height: var(--lh-texto); max-width: 40ch; }
.fazemos__mais { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--acento); font-weight: var(--peso-forte); font-size: var(--fs-sm); text-decoration: none; }
.fazemos__mais .btn__seta { transition: transform var(--dur-2) var(--ease-saida); }
.fazemos__mais:hover .btn__seta { transform: translateX(4px); }

/* O losango com a foto (a marca "puxa" a imagem) */
.fazemos__los { position: relative; width: min(72vw, 360px); aspect-ratio: 1; margin-inline: auto; clip-path: var(--losango); background: var(--gradiente-marca); }
.fazemos__los-media { position: absolute; inset: 3px; clip-path: var(--losango); overflow: hidden; background: var(--superficie-2); }
.fazemos__los-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fazemos__rail { display: none; }

/* --- Modo SCROLL: a vitrine FIXA-SE e, ao rolar, as áreas deslizam na
   HORIZONTAL (com um blur mínimo). É conduzido pelo main.js, que põe o
   translateX e o blur a partir do progresso do scroll — como o hero. A caixa
   tem ALTURA EXPLÍCITA e a faixa é position:absolute; inset:0 (nunca colapsa,
   inclusive no Safari). --- */
.fazemos--scroll .fazemos__cena { height: 240vh; height: 240svh; }
.fazemos--scroll .fazemos__palco {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; padding-inline: var(--goteira);
}
.fazemos--scroll .fazemos__vitrine {
  position: relative; overflow: hidden;
  width: min(92vw, 1180px); height: min(76svh, 560px);
  border: 1px solid var(--linha-forte);
  background:
    radial-gradient(120% 130% at 12% 12%, color-mix(in srgb, var(--azul-gradiente) 9%, transparent), transparent 55%),
    radial-gradient(120% 130% at 92% 96%, color-mix(in srgb, var(--verde-marca) 8%, transparent), transparent 55%),
    var(--superficie-0);
  box-shadow: 0 40px 120px -55px rgba(0,0,0,.85);
}
.fazemos--scroll .fazemos__track {
  position: absolute; inset: 0; display: flex; gap: 0;
  /* O scroll só DISPARA a passagem (muda o índice); a transição é AUTÓNOMA,
     rápida e limpa (duração fixa), independente da velocidade do scroll. O
     pulso de blur é feito no main.js (Web Animations) durante a passagem. */
  transition: transform 0.5s var(--ease-saida);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .fazemos--scroll .fazemos__track { transition: none; }
}
.fazemos--scroll .fazemos__area {
  flex: 0 0 100%; min-width: 0; height: 100%;
  grid-template-columns: 1fr minmax(0, 0.82fr);
  align-items: center; gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  padding: clamp(var(--sp-6), 5vw, var(--sp-10));
}
.fazemos--scroll .fazemos__area:nth-child(even) .fazemos__texto { order: 0; }   /* consistente */
.fazemos--scroll .fazemos__texto { max-width: 42ch; }
.fazemos--scroll .fazemos__los { width: min(30vw, 340px); }

/* barra de losangos (indicador + navegação), no canto inferior direito */
.fazemos--scroll .fazemos__rail {
  display: flex; gap: var(--sp-2); z-index: 3;
  position: absolute; right: clamp(var(--sp-5), 3vw, var(--sp-7)); bottom: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.fazemos__ponto { background: none; border: 0; padding: var(--sp-2); cursor: pointer; line-height: 0; }
.fazemos__ponto-los { display: block; width: 12px; height: 12px; clip-path: var(--losango); background: var(--linha-forte); transition: background var(--dur-3) var(--ease-saida), transform var(--dur-3) var(--ease-saida); }
.fazemos__ponto.is-ativo .fazemos__ponto-los { background: var(--acento); transform: scale(1.35); }
.fazemos__ponto:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }


/* ==========================================================================
   MARCA (miniatura) + MARCA-CARD · a linguagem geométrica do companheiro.
   Cada cartão traz a MARCA — o retângulo com gradiente e o losango recortado,
   numa POSE própria (ângulos por variáveis, como o catálogo do companheiro) —
   em vez de uma caixa cinzenta. Usado em jovens e organizações.
   ========================================================================== */

/* A marca em miniatura. A pose vem de variáveis inline (--m-r/--m-d/--m-dw/…);
   o losango é pintado com a cor do fundo do cartão, dando a ilusão de recorte. */
.marca { position: relative; display: block; width: var(--m-w, 46px); aspect-ratio: 900 / 1914; flex: none; }
.marca__rect {
  position: absolute; inset: 0;
  background: linear-gradient(var(--m-ga, 152deg), var(--m-c1, var(--verde-gradiente)), var(--m-c2, var(--azul-gradiente)));
  transform: rotate(var(--m-r, 0deg));
}
.marca__dia {
  position: absolute; left: 50%; top: var(--m-dt, 76.5%); width: var(--m-dw, 70.7%); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--m-d, 45deg));
  background: var(--m-fundo, var(--superficie-1));
}

/* Grelha de cartões de marca */
.marca-grelha { display: grid; gap: clamp(var(--sp-4), 2vw, var(--sp-5)); }
@media (min-width: 640px) { .marca-grelha--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .marca-grelha--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .marca-grelha--4 { grid-template-columns: repeat(4, 1fr); } }

.marca-card {
  position: relative; overflow: hidden;
  background: var(--superficie-1); border: 1px solid var(--linha);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  display: grid; gap: var(--sp-3); align-content: start;
  transition: border-color var(--dur-3) var(--ease-saida), transform var(--dur-3) var(--ease-saida);
}
/* brilho de marca no canto (personalidade, sem pesar) */
.marca-card::after {
  content: ""; position: absolute; right: -25%; top: -35%; width: 62%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--m-c1, var(--verde-marca)) 14%, transparent), transparent);
}
.marca-card:hover { border-color: var(--linha-forte); transform: translateY(-3px); }
.marca-card > * { position: relative; z-index: 1; }
.marca-card .marca { margin-bottom: var(--sp-2); }
.marca-card__etq { font-family: var(--fonte-texto); font-size: var(--fs-rotulo); text-transform: uppercase; letter-spacing: var(--ls-rotulo); font-weight: var(--peso-forte); color: var(--texto-4); }
.marca-card h3 { margin: 0; font-size: var(--fs-d3); }
.marca-card p { margin: 0; color: var(--texto-3); font-size: var(--fs-sm); line-height: var(--lh-texto); }
.marca-card p strong { color: var(--texto-1); font-weight: var(--peso-forte); }
.marca-card__ganhas { margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--linha); }

/* Benefícios: tratamento leve (losango + nome + linha), sem caixas */
.beneficios { display: grid; gap: clamp(var(--sp-5), 3vw, var(--sp-6)); }
@media (min-width: 620px) { .beneficios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .beneficios { grid-template-columns: repeat(3, 1fr); } }
.beneficio { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); align-items: start; }
.beneficio__los { width: 15px; height: 15px; margin-top: 6px; clip-path: var(--losango); background: var(--gradiente-marca); flex: none; }
.beneficio h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-d4); }
.beneficio p { margin: 0; color: var(--texto-3); font-size: var(--fs-sm); line-height: var(--lh-texto); }

/* Fluxo de passos (sem números): marcas ligadas por uma linha */
.fluxo { display: grid; gap: clamp(var(--sp-5), 3vw, var(--sp-6)); }
@media (min-width: 720px) { .fluxo { grid-template-columns: repeat(4, 1fr); position: relative; } }
.fluxo__passo { display: grid; gap: var(--sp-3); align-content: start; }
.fluxo__passo .marca { --m-w: 40px; --m-fundo: var(--superficie-0); }
.seccao--alt .fluxo__passo .marca { --m-fundo: var(--superficie-1); }
.fluxo__passo h4 { margin: 0; font-size: var(--fs-d4); }
.fluxo__passo p { margin: 0; color: var(--texto-3); font-size: var(--fs-sm); line-height: var(--lh-texto); }


/* ==========================================================================
   O EIXO · a "barra" do logótipo (o retângulo com gradiente) esticada num
   EIXO vertical que estrutura a secção. Em cada nó, um losango (como o recorte
   do ícone) marca um item; a informação fica ao lado. Uma peça de marca a
   organizar a secção, em vez de um ícone repetido por caixa. Bom para
   sequências e níveis (ordem = posição no eixo, sem numeração).
   ========================================================================== */
/* Geometria num só sítio: --ex (onde começa a barra), --ew (largura da barra
   = largura do losango, como no ícone) e --et (folga até ao texto). */
.eixo { --ex: 16px; --ew: 14px; --et: 32px; position: relative; padding-left: calc(var(--ex) + var(--ew) + var(--et)); }
.eixo__barra {
  position: absolute; left: var(--ex); top: -14px; bottom: 6px; width: var(--ew);
  background: linear-gradient(180deg, var(--verde-gradiente), var(--azul-gradiente));
}
.eixo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(var(--sp-6), 5vw, var(--sp-8)); }
.eixo__no { position: relative; display: grid; gap: var(--sp-2); }
/* o losango-nó: o recorte do ícone, exatamente da largura da barra e em cima
   dela (pintado com a cor do fundo, como o losango do logótipo) */
.eixo__no::before {
  content: ""; position: absolute; top: 4px;
  left: calc(-1 * (var(--ew) + var(--et)));
  width: var(--ew); height: var(--ew); clip-path: var(--losango);
  background: var(--superficie-0);
}
.seccao--alt .eixo__no::before { background: var(--superficie-1); }
.eixo__no h4 { margin: 0; font-size: var(--fs-d4); }
.eixo__no h3 { margin: 0; font-size: var(--fs-d3); }
.eixo__no p { margin: 0; color: var(--texto-3); font-size: var(--fs-sm); line-height: var(--lh-texto); max-width: 56ch; }
.eixo__no p strong { color: var(--texto-1); font-weight: var(--peso-forte); }
.eixo__etq { font-family: var(--fonte-texto); font-size: var(--fs-rotulo); text-transform: uppercase; letter-spacing: var(--ls-rotulo); font-weight: var(--peso-forte); color: var(--texto-4); }
.eixo__ganhas { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--linha); }
@media (max-width: 520px) { .eixo { --ex: 6px; --et: 22px; } }

/* ==========================================================================
   A CALHA · variação horizontal: a barra do logótipo deitada, com losangos-nó
   por cima e as caixas de informação penduradas por baixo. Para conjuntos
   paralelos (sem ordem forte).
   ========================================================================== */
.calha { position: relative; padding-top: 40px; }
.calha__barra {
  position: absolute; left: 0; right: 0; top: 12px; height: 14px;
  background: linear-gradient(90deg, var(--verde-gradiente), var(--azul-gradiente));
}
.calha__grelha { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
@media (min-width: 720px) { .calha__grelha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .calha__grelha { grid-template-columns: repeat(4, 1fr); } }
.calha__caixa { position: relative; background: var(--superficie-1); padding: clamp(var(--sp-6), 3vw, var(--sp-7)) clamp(var(--sp-5), 3vw, var(--sp-6)) clamp(var(--sp-5), 3vw, var(--sp-6)); display: grid; gap: var(--sp-3); align-content: start; }
/* o losango-nó: o recorte do ícone na barra, por cima de cada caixa, e o fio
   de que a caixa pende (barra: top 12, altura 14; a grelha começa em 40) */
.calha__caixa::before {
  content: ""; position: absolute; top: -29px; left: clamp(var(--sp-5), 3vw, var(--sp-6));
  width: 14px; height: 14px; clip-path: var(--losango);
  background: var(--superficie-0);
}
.seccao--alt .calha__caixa::before { background: var(--superficie-1); }
.calha__caixa::after {
  content: ""; position: absolute; top: -14px; height: 14px; width: 2px;
  left: calc(clamp(var(--sp-5), 3vw, var(--sp-6)) + 6px);
  background: color-mix(in srgb, var(--verde-marca) 55%, transparent);
}
.calha__caixa h3 { margin: 0; font-size: var(--fs-d4); }
.calha__caixa p { margin: 0; color: var(--texto-3); font-size: var(--fs-sm); line-height: var(--lh-texto); }


/* ==========================================================================
   VITRINE DE ATIVIDADES · só as sessões disponíveis, cada uma com uma
   ilustração geométrica que a exemplifica e uma descrição curta.
   ========================================================================== */

.ativ-card {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--linha); background: var(--superficie-1);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-saida);
}
.ativ-card:hover { border-color: var(--texto-4); }
@media (min-width: 720px) {
  .ativ-card { grid-template-columns: 0.92fr 1.08fr; align-items: stretch; }
  .ativ-card:nth-child(even) .ativ-card__fig { order: 2; }
}
.ativ-card__fig {
  position: relative; display: grid; place-items: center;
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  color: var(--acento);
  background:
    radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--azul-gradiente) 10%, transparent), transparent 60%),
    radial-gradient(120% 120% at 90% 100%, color-mix(in srgb, var(--verde-marca) 9%, transparent), transparent 60%),
    var(--superficie-0);
  border-bottom: 1px solid var(--linha);
}
.ativ-card__fig svg { width: 100%; max-width: 380px; height: auto; display: block; }
@media (min-width: 720px) {
  .ativ-card__fig { border-bottom: 0; border-inline-end: 1px solid var(--linha); }
  .ativ-card:nth-child(even) .ativ-card__fig { border-inline-end: 0; border-inline-start: 1px solid var(--linha); }
}
.ativ-card__corpo {
  display: grid; gap: var(--sp-3); align-content: center;
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
}
.ativ-card__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ativ-card__nome {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  text-transform: uppercase; letter-spacing: var(--ls-display);
  font-size: var(--fs-d3); line-height: 1.04; color: var(--texto-1); margin: 0;
}
.ativ-card__tag {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-d4); color: var(--acento);
  line-height: var(--lh-titulo); margin: 0;
}
.ativ-card__desc { color: var(--texto-2); font-size: var(--fs-base); margin: 0; max-width: 54ch; }


/* ==========================================================================
   ÍNDICE · afordância de clique (a linha abre o leitor)
   ========================================================================== */

.indice-item--click { cursor: pointer; }
.indice-item--click:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.indice-abrir {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--acento); font-weight: var(--peso-forte);
  text-transform: none; letter-spacing: 0;
}
.indice-abrir svg { transition: transform var(--dur-2) var(--ease-saida); }
.indice-item--click:hover .indice-abrir svg,
.indice-item--click:focus-visible .indice-abrir svg { transform: translateX(4px); }


/* ==========================================================================
   IMPACTO DA IA NA SOCIEDADE · mapa de Portugal (esq.) + indicadores (dir.) e
   a chamada para o inquérito. (dados.html)
   ========================================================================== */

.impacto { display: grid; gap: clamp(var(--sp-6), 5vw, var(--sp-9)); align-items: center; }
@media (min-width: 820px) { .impacto { grid-template-columns: minmax(0, 0.82fr) 1fr; } }
.impacto__mapa { margin: 0; display: grid; justify-items: center; gap: var(--sp-4); }
.impacto__mapa img { width: min(60vw, 260px); height: auto; display: block; }
.impacto__mapa figcaption { font-size: var(--fs-sm); color: var(--texto-3); text-align: center; max-width: 30ch; }
/* O mapa existe em duas versões porque o gradiente do logótipo não é legível
   nos dois fundos (o azul da marca tem 3,2:1 sobre preto). Cada tema usa a sua,
   pelo mesmo mecanismo do logótipo na nav e no rodapé. */
.impacto__mapa img.mapa--claro { display: none; }
[data-tema="claro"] .impacto__mapa img.mapa--escuro { display: none; }
[data-tema="claro"] .impacto__mapa img.mapa--claro  { display: block; }
.impacto__ind { display: grid; gap: var(--sp-5); align-content: center; }
/* "O que medimos" é um título interno (Nohemi Bold, herda o tamanho de h3 como
   o "Participa no inquérito" logo abaixo), não uma etiqueta: sobe na hierarquia
   e por isso dispensa o losango que marca as etiquetas. */
.impacto__titulo { margin: 0; }
.impacto__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.impacto__lista li { position: relative; padding-left: var(--sp-6); font-size: var(--fs-base); color: var(--texto-1); font-weight: var(--peso-medio); }
.impacto__lista li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 12px; height: 12px; background: var(--gradiente-marca); clip-path: var(--losango); }
.impacto__alvos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-2); border-top: 1px solid var(--linha); padding-top: var(--sp-5); }
.impacto__alvos div { display: grid; gap: 2px; }
.impacto__alvos b { font-family: var(--fonte-display); font-weight: var(--peso-display); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--acento); line-height: 1; }
.impacto__alvos span { font-size: var(--fs-xs); color: var(--texto-3); }
/* Chamada para o inquérito */
.impacto__cta {
  margin-top: clamp(var(--sp-7), 6vw, var(--sp-9));
  display: grid; gap: var(--sp-5); align-items: center;
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  border: 1px solid var(--linha-forte); background: var(--superficie-1);
}
@media (min-width: 720px) { .impacto__cta { grid-template-columns: 1fr auto; } }
.impacto__cta h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-d3); }
.impacto__cta p { margin: 0; color: var(--texto-2); font-size: var(--fs-sm); max-width: 52ch; }


/* ==========================================================================
   LEITURAS EXTERNAS · cartões de publicações externas, claramente atribuídas
   ao autor. Abrem o mesmo leitor, com botão para a origem.
   ========================================================================== */

.externos {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.externo-card {
  text-align: left; cursor: pointer; font: inherit;
  background: var(--superficie-1); border: 1px solid var(--linha);
  padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start;
  min-height: 200px;
  transition: border-color var(--dur-3) var(--ease-saida),
              background-color var(--dur-3) var(--ease-saida),
              transform var(--dur-3) var(--ease-saida);
}
.externo-card:hover { border-color: var(--texto-4); background: var(--superficie-2); transform: translateY(-3px); }
.externo-card:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.externo-card__topo { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }
.externo-card__fonte {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-rotulo);
  color: var(--texto-4);
}
.externo-card__titulo {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: var(--fs-d4); line-height: 1.16; color: var(--texto-1); margin: 0;
}
.externo-card__sub { font-size: var(--fs-sm); color: var(--texto-3); margin: 0; }
.externo-card__meta {
  margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--texto-4);
}
.externo-card__abrir { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--acento); font-weight: var(--peso-forte); }
.externo-card__abrir svg { transition: transform var(--dur-2) var(--ease-saida); }
.externo-card:hover .externo-card__abrir svg { transform: translateX(4px); }


/* ==========================================================================
   FERRAMENTAS · vitrine interativa de cartões que viram (flip)
   Vira ao passar o rato (desktop) e ao clicar (aria-expanded), para telemóvel.
   ========================================================================== */

.ferramentas {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.ferr {
  position: relative; border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; perspective: 1200px;
  min-height: 260px;
}
.ferr__interior {
  position: relative; display: block; width: 100%; height: 100%; min-height: 260px;
  transition: transform var(--dur-5) var(--ease-ambos);
  transform-style: preserve-3d;
}
.ferr__face {
  position: absolute; inset: 0;
  /* As faces NÃO dependem de backface-visibility: o Safari não a respeita
     neste encaixe e o verso atravessava a frente, lendo-se espelhado nos
     cartões não virados (no Chrome aparecia bem). Testadas 4 variantes; esta
     é a única correta nos dois motores. Em vez disso, as faces trocam de
     visibilidade A MEIO da rotação (dur-5 / 2), que é quando o cartão está de
     perfil e nenhuma das faces se vê. Em movimento reduzido os tokens de
     duração valem 1ms, por isso a troca passa a ser imediata. */
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-1) linear calc(var(--dur-5) / 2),
              visibility 0s linear calc(var(--dur-5) / 2);
  display: grid; align-content: start; gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--linha); background: var(--superficie-1);
}
.ferr__frente { grid-template-rows: auto 1fr auto auto; opacity: 1; visibility: visible; }
.ferr__verso {
  transform: rotateY(180deg);
  align-content: center; gap: var(--sp-5);
  background:
    radial-gradient(130% 130% at 100% 0%, color-mix(in srgb, var(--verde-marca) 12%, transparent), transparent 60%),
    var(--superficie-2);
}
.ferr__icone { width: 48px; height: 48px; color: var(--acento); }
.ferr__icone svg { width: 100%; height: 100%; display: block; }
.ferr__nome {
  font-family: var(--fonte-display); font-weight: var(--peso-titulo);
  text-transform: uppercase; letter-spacing: var(--ls-titulo);
  font-size: var(--fs-d4); line-height: 1.1; color: var(--texto-1);
  align-self: end;
}
.ferr__estado {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-rotulo);
  color: var(--aviso); font-weight: var(--peso-forte);
}
.ferr__estado--ok { color: var(--acento); }
.ferr__virar {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--peso-forte); color: var(--acento);
}
.ferr__virar svg { transition: transform var(--dur-2) var(--ease-saida); }
.ferr__resumo { font-size: var(--fs-base); color: var(--texto-1); }
.ferr__barra { height: 6px; background: var(--linha-forte); overflow: hidden; }
.ferr__barra-in { display: block; height: 100%; background: var(--gradiente-marca); }

/* Virar: no hover (desktop) ou fixado por clique (aria-expanded) */
@media (hover: hover) {
  .ferr:hover .ferr__interior { transform: rotateY(180deg); }
  .ferr:hover .ferr__frente { opacity: 0; visibility: hidden; }
  .ferr:hover .ferr__verso  { opacity: 1; visibility: visible; }
  .ferr:hover .ferr__virar svg { transform: translateX(4px); }
}
.ferr[aria-expanded="true"] .ferr__interior { transform: rotateY(180deg); }
.ferr[aria-expanded="true"] .ferr__frente { opacity: 0; visibility: hidden; }
.ferr[aria-expanded="true"] .ferr__verso  { opacity: 1; visibility: visible; }
.ferr:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ferr__interior { transition: none; }
}


/* ==========================================================================
   LEITOR DE PUBLICAÇÕES · a janela que abre ao clicar numa publicação.
   Capa + frase marcante + descrição + ações. Serve as publicações próprias e
   a investigação de terceiros. Criada uma vez pelo main.js.
   ========================================================================== */

.leitor {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: clamp(var(--sp-3), 3vw, var(--sp-6));
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-3) var(--ease-saida), visibility var(--dur-3) var(--ease-saida);
}
.leitor[data-aberto="true"] { visibility: visible; opacity: 1; }
.leitor__fundo {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--preto-marca) 78%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.leitor__cartao {
  position: relative; z-index: 1;
  width: min(920px, 100%); max-height: 92vh; overflow: auto;
  background: var(--superficie-1); border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra-3);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur-4) var(--ease-ambos);
}
.leitor[data-aberto="true"] .leitor__cartao { transform: none; }
.leitor__x {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--superficie-0) 70%, transparent);
  border: 1px solid var(--linha-forte); color: var(--texto-1); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-saida), color var(--dur-2) var(--ease-saida);
}
.leitor__x:hover { background: var(--acento); color: var(--preto-marca); border-color: var(--acento); }

.leitor__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .leitor__grid { grid-template-columns: 300px 1fr; align-items: stretch; }
}
.leitor__capa {
  position: relative; overflow: hidden; min-height: 200px;
  background: var(--superficie-2); border-bottom: 1px solid var(--linha);
  color: var(--texto-1);
}
@media (min-width: 760px) { .leitor__capa { border-bottom: 0; border-inline-end: 1px solid var(--linha); } }
.leitor__capa img, .leitor__capa-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.leitor__corpo {
  display: grid; gap: var(--sp-4); align-content: start;
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
}
.leitor__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.leitor__marcante {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.16;
  color: var(--acento); margin: 0;
}
.leitor__titulo {
  font-family: var(--fonte-display); font-weight: var(--peso-display);
  text-transform: uppercase; letter-spacing: var(--ls-display);
  font-size: var(--fs-d3); line-height: 1.06; color: var(--texto-1); margin: 0;
}
.leitor__sub { font-size: var(--fs-lead); color: var(--texto-3); margin: calc(var(--sp-2) * -1) 0 0; }
.leitor__desc { color: var(--texto-2); margin: 0; }
.leitor__ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--sp-4); margin: 0;
  padding-top: var(--sp-4); border-top: 1px solid var(--linha);
}
.leitor__ficha dt {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-rotulo);
  color: var(--texto-4); margin-bottom: var(--sp-1);
}
.leitor__ficha dd { font-size: var(--fs-sm); color: var(--texto-1); margin: 0; }
.leitor__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.leitor__aviso {
  font-size: var(--fs-sm); color: var(--texto-3); margin: 0;
  padding: var(--sp-4); border: 1px dashed var(--linha-forte); background: var(--superficie-0);
}

@media (prefers-reduced-motion: reduce) {
  .leitor, .leitor__cartao { transition: none; }
  .leitor__cartao { transform: none; }
}