/* =========================================================================
   Visualforma — Site de Recrutamento
   Direção visual segundo a imagem de referência (hero do lifeatspotify.com),
   por indicação expressa da Carla: tela preta, tipografia geométrica enorme,
   coverflow em perspetiva 3D no hero, cartões de cantos muito arredondados,
   blocos de cor vivos e botões em cápsula.

   Nota: as Brand Guidelines da Visualforma (Klavika/Roboto, #000561, texto
   justificado) NÃO se aplicam a este ficheiro, por decisão explícita.

   30/07/2026 — a tela passou a branca, por indicação da Carla. Todo o texto que
   assenta diretamente no fundo é negro; os cartões de cor mantêm-se como
   estavam. O azul claro (#89BCF8) passou ao azul-marinho #090056, que sendo
   escuro inverte para texto branco em todos os blocos onde é fundo.
   ========================================================================= */

:root {
  /* Tela. Os nomes mantêm-se para não haver de mudar todas as referências:
     --preto é hoje o fundo da página (branco) e --superficie/-2 são os cinzas
     claros dos cartões neutros. */
  --preto: #ffffff;
  --superficie: #f4f4f4;
  --superficie-2: #ebebeb;
  --branco: #ffffff;

  /* Azul-milho do cartão em destaque, tal como na referência (texto negro). */
  --milho: #8fb6ff;
  /* Azul-marinho indicado pela Carla, usado no cartão "Três marcas", no cartão
     do hero, no bloco "Como trabalhamos", nos benefícios e no formulário. Ao
     contrário do azul claro que substitui, é escuro: tudo o que assenta nele
     passa a texto branco. */
  --azul-suave: #090056;

  /* Azul claro: o azul da casa muito diluído, para fundos que devem ler-se como
     azuis sem pesar. Ao contrário do --azul-suave, é claro, e por isso o texto
     por cima continua a ser o negro do site. */
  --azul-claro: #e9e6ff;

  /* Uma cor por área de atuação, fixada pela Carla em 29/07/2026, usada sempre
     que o assunto é aquela área. Todas passam texto branco por cima. Os nomes
     são os de sempre, para não haver de mudar todas as referências; note-se que
     --teal é hoje um verde. As mesmas quatro estão em $AREA_CORES, em
     inc/config.php, e nas cores das marcas, em data/empresas.php. */
  --azul: #3b18ff;   /* Infraestruturas Tecnológicas */
  --lilas: #7d51ff;  /* Comunicação Autárquica */
  --teal: #4b9f55;   /* Smart Cities */
  --coral: #db4628;  /* Safe Cities */

  --texto: #000000;
  --texto-suave: rgba(0, 0, 0, .66);
  --linha: rgba(0, 0, 0, .14);
  --linha-clara: rgba(0, 0, 0, .26);

  --display: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --corpo: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  /* A fonte do visualforma.pt. Vive só no cabeçalho, que foi transposto de lá;
     o resto do site mantém a Figtree. */
  --institucional: 'Outfit', 'Figtree', 'Segoe UI', system-ui, sans-serif;

  /* ---- Escala tipográfica ----
     Onze papéis, um por variável. Cada clamp() vai do menor valor de telemóvel
     ao maior de desktop, e cresce com a largura da janela: assim não há
     tamanhos escritos à mão nas regras nem media queries só para tipografia.
     Papel                     Telemóvel    Desktop
     --fs-display  hero          36–48 px    48–72 px
     --fs-h1       título        32–40 px    40–56 px
     --fs-h2       secção        26–32 px    32–40 px
     --fs-h3       subtítulo     22–26 px    24–30 px
     --fs-h4       pequeno       18–22 px    20–24 px
     --fs-lead     introdução    18–20 px    20–24 px
     --fs-body     parágrafo     16–18 px    16–18 px
     --fs-sec      secundário    14–16 px    14–16 px
     --fs-cap      legenda       12–14 px    12–14 px
     --fs-btn      botões        14–16 px    14–16 px
     --fs-nav      menus         14–16 px    14–16 px */
  --fs-display: clamp(2.25rem, 1.35rem + 4.5vw, 4.5rem);
  --fs-h1:      clamp(2rem,    1.5rem  + 2.5vw, 3.5rem);
  --fs-h2:      clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3:      clamp(1.375rem, 1.25rem + .6vw, 1.875rem);
  --fs-h4:      clamp(1.125rem, 1.05rem + .4vw, 1.5rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + .4vw, 1.5rem);
  --fs-body:    clamp(1rem,     .95rem + .25vw, 1.125rem);
  --fs-sec:     clamp(.875rem,  .85rem + .15vw, 1rem);
  --fs-cap:     clamp(.75rem,   .72rem + .12vw, .875rem);
  --fs-btn:     clamp(.875rem,  .85rem + .15vw, 1rem);
  --fs-nav:     clamp(.875rem,  .85rem + .15vw, 1rem);

  /* Margem lateral do conteúdo e largura máxima da coluna. As duas somam-se ao
     branco que sobra nos lados: por isso a margem baixou de 4rem para 2.5rem e a
     coluna subiu de 86rem para 96rem, para o conteúdo aproveitar melhor os
     ecrãs largos. */
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --max: 96rem;

  --raio: 20px;
  --raio-g: 28px;

  /* Folga dos blocos que se leem como cartão de largura total: os painéis das
     áreas e a faixa final. Vive aqui, e não na pilha, porque é partilhada. */
  --margem-painel: clamp(.75rem, 2vw, 1.75rem);

  --cor-area: var(--azul);
}

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

html { scroll-behavior: smooth; }

/* Nunca há scroll horizontal: a página só se percorre na vertical.
   Usa-se 'clip' e não 'hidden' de propósito — 'hidden' transformaria o body num
   contentor de scroll e estragaria o position: sticky do cabeçalho e dos
   painéis das áreas; 'clip' corta o que passa do bordo sem esse efeito. */
html, body { overflow-x: clip; max-width: 100%; }

/* ---- Barra de scroll da página ----
   Por defeito o sistema desenha-a em cinzento, que fica à parte de tudo o resto.
   Passa a ser da casa, com a mesma inversão do cabeçalho: calha no azul-marinho
   da marca e cursor no azul-milho por cima, que no hover abre para branco. Fica
   presa ao html, de modo a que as filas que se percorrem na horizontal — a
   cápsula de títulos, os carrosséis — mantenham a sua barra escondida. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--milho) var(--azul-suave);
}
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: var(--azul-suave); }
html::-webkit-scrollbar-thumb {
  background: var(--milho);
  border-radius: 32px;
  /* Afina o cursor sem estreitar a calha: a borda é da cor do fundo. */
  border: 3px solid var(--azul-suave);
}
html::-webkit-scrollbar-thumb:hover { background: var(--branco); }
html::-webkit-scrollbar-corner { background: var(--azul-suave); }

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: var(--corpo);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0;
}

/* Sem justificação: nesta direção o texto alinha sempre à esquerda. */
p { margin: 0 0 1rem; max-width: 60ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

:focus-visible { outline: 3px solid var(--azul-suave); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* Mesma largura dos blocos que se leem como painel — o hero com fotografia, os
   painéis das áreas, a faixa final: largura toda menos a folga lateral, sem o
   limite de coluna nem o gutter. */
/* width: auto é essencial — com o width: 100% que o .wrap traz, as margens
   somam-se à largura total e o conteúdo passa para fora do bordo direito. */
.wrap--painel {
  width: auto; max-width: none;
  margin-inline: var(--margem-painel); padding-inline: 0;
}

/* Texto só para leitores de ecrã. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--azul-suave); color: #fff; padding: .75rem 1.25rem; border-radius: 999px;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- Etiquetas e utilitários ---------- */

/* Sobre a tela branca o rótulo é negro, como o resto do texto que assenta
   diretamente no fundo. Dentro dos cartões de cor há overrides mais abaixo. */
.olho {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto);
  margin: 0 0 1rem; display: block; max-width: none;
}
.olho--claro { color: var(--texto-suave); }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-cap);
  border: 1px solid var(--linha-clara); border-radius: 999px;
  padding: .35rem .85rem; color: var(--texto);
  text-decoration: none; white-space: nowrap;
}
.chip--cheio { background: #000; border-color: #000; color: var(--branco); }

.lead { font-size: var(--fs-lead); line-height: 1.35; font-weight: 600; }

/* =========================================================================
   Cabeçalho — a navbar do visualforma.pt
   Transposta do site institucional (30/07/2026), para o recrutamento entrar com
   o mesmo cabeçalho do grupo: barra de 5rem em #090056 com o logótipo à
   esquerda; à direita a cápsula branca de ação, o círculo de contacto em #2c06ff
   e o botão de menu circular, cujas duas linhas viram um X. Todos os links vivem
   num overlay branco que desce da barra, com os itens em #000561 e realce
   #2c06ff — as mesmas medidas, cores e tempos do original.

   Sem JavaScript o overlay fica aberto e em fluxo: a navegação nunca depende do
   botão. A classe "js", posta pelo site.js, é o que o fecha.
   ========================================================================= */

.navbar {
  position: sticky; top: 0; z-index: 100;
  width: 100%; max-width: 120rem; margin-inline: auto;
  --navbar-altura: 5rem;
  font-family: var(--institucional);
}

.navbar__content {
  position: relative; height: var(--navbar-altura);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-inline: 8px;
  background-color: #090056;
}
@media (min-width: 48rem) { .navbar__content { padding-inline: 12px; } }
@media (min-width: 62rem) { .navbar__content { padding-inline: 64px; } }

/* ---- Logótipo ---- */

.navbar-logo { display: flex; flex-shrink: 0; padding-left: .5rem; }
.navbar-logo__wrapper {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--branco);
}
/* A altura manda; a largura acompanha a proporção do ficheiro. */
.navbar-logo__image { height: clamp(1.6rem, 2.4vw, 2.1rem); width: auto; }
.navbar-logo__sufixo {
  font-weight: 600; font-size: var(--fs-cap);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  padding-left: .7rem; border-left: 1px solid rgba(255, 255, 255, .3);
}
/* Em telemóvel a barra tem de caber: fica só o logótipo. */
@media (max-width: 30rem) { .navbar-logo__sufixo { display: none; } }

/* ---- Links na barra ----
   Ao contrário do institucional, que esconde tudo atrás de um botão de menu,
   aqui os links estão sempre à vista na barra: são cinco. A gramática é a de lá —
   cápsula de raio 32px, com fundo branco e texto no azul da marca para a página
   atual.

   Em ecrã estreito a fila não cabe e passa a percorrer-se na horizontal, dentro
   da própria barra: é o que substitui o menu que aqui não existe. A barra de
   scroll fica escondida, porque a fila é curta e vê-se onde acaba. */

.navbar-links {
  /* Uma só cápsula com os títulos dentro. Sem preenchimento: é só o contorno,
     em branco pleno, que a desenha sobre o azul da barra. */
  display: flex; align-items: center; gap: .2rem;
  list-style: none; margin: 0 auto 0 0; padding: .25rem;
  background: transparent;
  border: 1.5px solid var(--branco);
  border-radius: 32px;
  min-width: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  /* O toque desliza a fila; a página continua a percorrer-se na vertical. */
  overscroll-behavior-x: contain;
}
.navbar-links::-webkit-scrollbar { display: none; }
.navbar-links li { flex: 0 0 auto; }

/* A partir da largura em que há folga dos dois lados, a cápsula deixa de seguir
   o logótipo e fica ao centro da página, independentemente da largura do
   logótipo e das ações — daí sair do fluxo. Abaixo dessa largura fica em fluxo,
   a seguir ao logótipo, e é o seu conteúdo que desliza. */
@media (min-width: 75rem) {
  .navbar-links {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    margin: 0; max-width: calc(100% - 34rem);
  }
}

/* Dentro da cápsula os títulos são texto: só o hover e a página atual ganham
   fundo, e esse acompanha a curvatura da cápsula que os contém. A página atual é
   a única cheia de branco, com o texto no azul da marca — a mesma inversão do
   institucional. */
.navbar-links a {
  display: inline-block; white-space: nowrap; text-decoration: none;
  font-size: var(--fs-nav); font-weight: 600; color: rgba(255, 255, 255, .88);
  padding: .5rem 1rem; border-radius: 32px;
  transition: background-color .3s ease, color .3s ease;
}
.navbar-links a:hover { background: rgba(255, 255, 255, .18); color: var(--branco); }
.navbar-links a[aria-current="page"] { background: var(--branco); color: #000561; }
@media (max-width: 48rem) {
  /* Só a folga recolhe: o corpo já vem de --fs-nav, que acompanha a janela. */
  .navbar-links a { padding: .45rem .8rem; }
}

/* ---- Ações à direita ---- */

.navbar__content__actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

/* A cápsula branca da ação principal, que no institucional fica aqui, saiu: à
   direita ficam só o seletor de idioma e o círculo de contacto. A ação de
   candidatura vive na cápsula dos títulos e nas próprias páginas. */

/* O círculo de 46px do contacto, o único elemento em #2c06ff. O botão de menu
   que o acompanhava no institucional não existe aqui: os links estão na barra. */
.chat-btn {
  width: 46px; height: 46px; border-radius: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; padding: 0;
  background-color: #2c06ff; color: var(--branco);
  transition: background-color .3s ease;
}
.chat-btn:hover { background-color: #1a03b8; }
.chat-btn svg { width: 20px; height: 20px; display: block; }

/* Seletor de idioma: duas cápsulas pequenas, PT e EN, agora sobre o azul. */
.idiomas { display: flex; align-items: center; gap: .25rem; margin-right: .25rem; }
.idiomas__opcao {
  font-weight: 600; font-size: var(--fs-cap);
  letter-spacing: .06em; text-decoration: none;
  padding: .4rem .7rem; border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .8);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.idiomas__opcao:hover { color: var(--branco); border-color: var(--branco); }
.idiomas__opcao--ativa {
  background: var(--branco); border-color: var(--branco); color: #000561;
}

/* O overlay do menu saiu com o botão que o abria: os links vivem na barra, e em
   ecrã estreito percorrem-se na horizontal. */

.botao {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-btn);
  text-decoration: none; border: 0; cursor: pointer; border-radius: 999px;
  background: #000; color: var(--branco);
  padding: .9rem 1.75rem;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.botao:hover { transform: scale(1.04); }
.botao--fantasma {
  background: transparent; color: var(--texto);
  box-shadow: inset 0 0 0 1.5px var(--linha-clara);
}
.botao--fantasma:hover { background: rgba(0, 0, 0, .07); box-shadow: inset 0 0 0 1.5px #000; }
.botao--claro { background: #000; color: var(--branco); }
.botao--largo { width: 100%; justify-content: center; }
/* Botão de ícone só: quadrado, sem a folga lateral que um rótulo pede. O que faz
   é dito no aria-label, e não em texto à vista — ver o Voltar do formulário dos
   estágios. O desenho vem de Assets/Icons e herda a cor pelo currentColor. */
.botao--icone { padding: .9rem; justify-content: center; }
.botao--icone svg { width: 1.25rem; height: 1.25rem; display: block; }

/* =========================================================================
   Hero
   ========================================================================= */

.quadro {
  background: var(--preto); color: var(--texto);
  position: relative; overflow: hidden;
  --cor-fundo-quadro: var(--preto);
}

.quadro__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 62rem) {
  .quadro__inner--duplo { grid-template-columns: 1.2fr .8fr; align-items: end; }
}
/* Com a galeria em cima: ar entre o cabeçalho e a galeria, e o texto que vem
   abaixo dela aproxima-se — o respiro entre os dois já é dado pelo
   espaçamento da própria galeria. */
.quadro:has(.coverflow) { padding-top: clamp(2.5rem, 5.5vw, 5.5rem); }
.quadro:has(.coverflow) .quadro__inner { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Bloco de entrada como cartão de cor, só na metade esquerda. A coluna da
   direita fica vazia de propósito. */
/* Gap curto: o cartão e a fotografia leem-se como duas metades da mesma peça.
   O padding de baixo é menor do que o do .quadro__inner: os quadrados já têm
   folga interior, e o que se segue é a secção das áreas. */
.quadro__inner--meio {
  grid-template-columns: 1fr; gap: clamp(.6rem, 1.2vw, 1rem);
  padding-bottom: clamp(.5rem, 1vw, .85rem);
}
@media (min-width: 62rem) {
  /* stretch para a fotografia tomar exatamente a altura do cartão ao lado. */
  .quadro__inner--meio { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* A proporção manda na altura, e não o conteúdo: assim as duas metades ficam
   sempre iguais. Em 4/3 em vez de quadrado, para baixar a altura — a largura da
   coluna é fixa, portanto é a proporção o único caminho. */
.quadro__cartao,
.quadro__imagem-par { aspect-ratio: 4 / 3; }

.quadro__imagem-par {
  border-radius: var(--raio-g); overflow: hidden;
  background: var(--superficie-2);
}
.quadro__imagem-par img { width: 100%; height: 100%; object-fit: cover; }

/* No mesmo azul-marinho do cartão "Três marcas". Por ser escuro, tudo o que
   está dentro dele passa a branco: o texto, os rótulos esbatidos e também os
   botões, que em negro sobre este azul quase não se distinguiriam do fundo. */
.quadro__cartao {
  background: var(--azul-suave); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  /* Conteúdo alinhado ao topo do quadrado, como estava antes. */
  display: flex; flex-direction: column; justify-content: flex-start;
}
/* .quadro h1 aparece mais abaixo com a mesma especificidade e ganharia por
   ordem; daí o .quadro à frente, que desempata a favor do cartão. */
.quadro .quadro__cartao h1 { font-size: var(--fs-display); }
/* O rótulo esbatido do marcador: sobre o azul-marinho é branco transparente. */
.quadro__cartao .olho,
.quadro__cartao .olho--claro { color: rgba(255, 255, 255, .66); margin-bottom: .5rem; }
.quadro__cartao .quadro__frase {
  color: rgba(255, 255, 255, .8); min-height: 0;
  margin-top: .75rem; font-size: var(--fs-body);
}
.quadro__cartao .quadro__acoes { margin-top: 1.25rem; }
.quadro__cartao .botao { padding: .75rem 1.4rem; font-size: var(--fs-btn); }
/* Botões invertidos face ao resto da página, que é branca: sobre o azul-marinho
   o cheio fica branco com texto negro, e o de traço leva contorno e texto
   brancos. */
.quadro__cartao .botao,
.quadro__cartao .botao--claro { background: var(--branco); color: #000; }
.quadro__cartao .botao--fantasma {
  background: transparent; color: var(--branco);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}
.quadro__cartao .botao--fantasma:hover {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1.5px var(--branco);
}

.quadro h1 { font-size: var(--fs-display); }
/* Títulos de página interior: menores que o do hero da entrada. */
.quadro h1.titulo-medio { font-size: var(--fs-h1); }

/* Título escrito à máquina, em várias línguas (adaptação vanilla do
   TextType do React Bits). Reserva duas linhas de altura para que a troca de
   frase não empurre o conteúdo abaixo. */
.titulo-escreve { min-height: calc(2em * .96); }
.titulo-escreve .escreve__cursor {
  display: inline-block; margin-left: .06em;
  color: var(--azul-suave); font-weight: 400;
  animation: piscaCursor .5s steps(1, end) infinite alternate;
}
.titulo-escreve .escreve__cursor--oculto { visibility: hidden; }
@keyframes piscaCursor { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .titulo-escreve .escreve__cursor { animation: none; }
}
.quadro__frase {
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  line-height: 1.4; max-width: 72ch;
  font-weight: 500; color: var(--texto-suave);
}
.quadro__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Hero com fotografia de fundo. A imagem preenche a secção e por cima corre um
   véu escuro em duas direções: mais denso em baixo e à esquerda, que é onde
   assenta o texto. Sem o véu o título perdia contraste no céu claro. */
.quadro--imagem {
  --cor-fundo-quadro: transparent;
  /* Altura própria: a fotografia é panorâmica e precisa de espaço vertical
     para se ler. Limitada a 80svh para o conteúdo seguinte continuar a
     sugerir-se no fim do ecrã. */
  min-height: min(80svh, 44rem);
  display: flex; align-items: flex-end;
}
/* Cantos superiores arredondados, no mesmo raio dos cartões grandes, e folga em
   volta para a curvatura se ler contra o preto do body. A folga lateral é a
   mesma dos painéis das áreas e da faixa final (--margem-painel), para o hero
   assentar no mesmo alinhamento desses blocos.
   O .quadro já tem overflow: hidden, por isso a fotografia acompanha o corte. */
/* Hero sem fotografia mas com as mesmas margens laterais das outras páginas: a
   tela preta deixa de encostar ao bordo da janela. */
.quadro--painel {
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  margin-inline: var(--margem-painel);
  margin-top: var(--margem-painel);
}

/* Hero de cor cheia — o detalhe de vaga, que toma a cor da área. Como os
   cartões de cor, tudo o que está dentro passa a branco. */
.quadro--cor { color: var(--branco); }
.quadro--cor .olho,
.quadro--cor .olho--claro,
.quadro--cor .migalhas { color: rgba(255, 255, 255, .78); }
.quadro--cor .migalhas a { color: var(--branco); }
.quadro--cor .quadro__frase { color: rgba(255, 255, 255, .85); }
.quadro--cor .chip { border-color: rgba(255, 255, 255, .4); color: var(--branco); }
.quadro--cor .botao { background: var(--branco); color: #000; }
.quadro--cor .botao--fantasma {
  background: transparent; color: var(--branco);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.quadro--cor .botao--fantasma:hover { background: rgba(255, 255, 255, .14); }

.quadro--imagem {
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  margin-inline: var(--margem-painel);
  /* Acima fica apenas a mesma folga: a fotografia começa logo abaixo da barra
     do cabeçalho. */
  margin-top: var(--margem-painel);
}
/* Sobre fotografia o título pede menos corpo do que na tela branca: a imagem já
   carrega a página, e um título mais contido deixa ver o enquadramento. */
.quadro--imagem h1 { font-size: var(--fs-display); max-width: 26ch; }
/* "O teu próximo desafio começa aqui." em duas linhas: a coluna estreita força a
   quebra e o text-wrap: balance, que o site já usa nos títulos, reparte as
   palavras pelas duas de forma equilibrada. */
#hero-candidatar h1 { max-width: 18ch; }

/* Aqui o texto não assenta no fundo da página, mas sobre a fotografia e o véu
   escuro que corre por cima: mantém-se branco, ao contrário do resto do site. */
.quadro--imagem { color: var(--branco); }
.quadro--imagem .olho,
.quadro--imagem .olho--claro { color: rgba(255, 255, 255, .78); }
.quadro--imagem .quadro__frase { color: rgba(255, 255, 255, .82); }
.quadro--imagem .botao--fantasma {
  color: var(--branco); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.quadro--imagem .botao--fantasma:hover {
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px var(--branco);
}
.quadro--imagem .chip { border-color: rgba(255, 255, 255, .4); color: var(--branco); }

/* Heros da Cultura e da Candidatar: os cantos de baixo também arredondam, para o
   vídeo e a fotografia se lerem como um cartão fechado e não como uma faixa
   cortada pelo conteúdo que se segue. A folga inferior é a mesma das laterais —
   sem ela a curvatura não teria branco contra o qual se ver. Fica aqui, e não em
   .quadro--imagem, porque os restantes heros mantêm a forma de sempre.

   30/07/2026 — o hero da Candidatar juntou-se a esta regra, por indicação da
   Carla.

   A altura não muda: o desconto de duas folgas que .quadro--cheio já fazia passa
   a corresponder às duas margens reais, de cima e de baixo, e o hero continua a
   caber exato na janela. */
#hero-cultura,
#hero-candidatar,
#hero-estagios {
  border-radius: var(--raio-g);
  margin-bottom: var(--margem-painel);
}
/* A ação principal do hero da Candidatar em azul-milho, por indicação da Carla
   em 30/07/2026 — é o azul claro que já assinala o cartão em destaque do hero da
   entrada. Sobre ele o texto é negro, que é o contraste que esta cor pede. */
#hero-candidatar .botao--claro { background: var(--milho); color: #000; }
#hero-candidatar .botao--claro:hover { background: #a8c8ff; }

/* A folga entre o hero e os quatro cartões iguala a que fica abaixo deles. Essa
   é curta: #processo leva padding-bottom: 0, portanto abaixo dos cartões há só o
   padding de topo da secção seguinte (.secao--colada), 8 a 12 px.
   Para chegar lá, a folga toda passa a ser a margem inferior do hero — mais
   curta do que as laterais — e a secção dos cartões não acrescenta nada por
   cima. */
#hero-candidatar { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
#hero-candidatar + .secao { padding-top: 0; }
/* Abaixo dos passos a folga é a mesma que os separa do hero: o cartão das
   dúvidas pertence à mesma leitura e o intervalo normal entre secções abria um
   vazio grande de mais. */
#processo { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
/* A secção seguinte acompanha o hero de perto: a folga entre os dois é a margem
   do hero, e não o intervalo normal entre secções, que aqui somava-se-lhe e
   abria um vazio. Só a Cultura precisa disto — na Candidatar a secção seguinte
   já traz .secao--colada, que faz o mesmo. */
#hero-cultura + .secao { padding-top: clamp(.5rem, 1vw, .85rem); }

/* Ecrã inteiro: 100svh menos a barra do cabeçalho e as folgas de cima e de
   baixo, para o hero caber exato na janela. Em svh, para que a barra do browser
   em telemóvel não corte a base da fotografia. O desconto da barra entrou quando
   o cabeçalho passou a ser a navbar do visualforma.pt: sendo opaca e em fluxo,
   já não fica sobreposta à fotografia. */
.quadro--cheio {
  min-height: calc(100svh - 5rem - var(--margem-painel) * 2);
  max-height: none;
}
.quadro--imagem .quadro__inner { width: 100%; padding-block: clamp(5rem, 12vw, 9rem); }

/* Título à esquerda, escolhas à direita. Em ecrã estreito empilham-se, com os
   botões a seguir ao título e à largura da coluna. */
.quadro__inner--acoes { grid-template-columns: 1fr; }
.quadro__lado { display: grid; gap: .75rem; justify-items: start; }
.quadro__lado .botao { justify-content: center; }
@media (min-width: 62rem) {
  .quadro__inner--acoes { grid-template-columns: 1fr auto; align-items: end; }
  .quadro__lado { justify-items: stretch; min-width: 18rem; }
}

/* Preto por baixo: é o que se vê no instante entre a página aparecer e o
   primeiro fotograma do vídeo estar descodificado. Sem isto ficava o fundo da
   secção a descoberto, e antes ficava o poster — uma fotografia que já vinha da
   cache e piscava a cada recarregamento. */
.quadro__fundo { position: absolute; inset: 0; z-index: 0; background: #000; }
/* O vídeo de fundo comporta-se como a fotografia: preenche a secção e leva o
   mesmo véu por cima, que vem do ::after mais abaixo. */
.quadro__fundo img,
.quadro__fundo video {
  width: 100%; height: 100%;
  /* Quanto mais alta a percentagem, mais baixo é o enquadramento na fotografia
     e mais a imagem parece subir dentro do frame: sai céu por cima e o vale com
     a figura ao computador assenta mais acima. */
  object-fit: cover; object-position: center 68%;
  display: block;
}
/* Vídeo do YouTube como fundo do hero (página Cultura). O iframe tem sempre
   16:9, e o hero não: para cobrir a secção sem barras negras, o iframe é
   dimensionado pela janela — 100vw de largura com a altura proporcional, e o
   mínimo em 177.78vh quando o hero fica mais alto do que largo — e centrado,
   que é o equivalente do object-fit: cover de uma fotografia.
   Sem ponteiro: por cima está o título, e o vídeo não se comanda daqui. */
.quadro__yt { position: absolute; inset: 0; overflow: hidden; }
.quadro__yt iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;
  min-width: 177.78vh; min-height: 100%;
  border: 0; display: block; pointer-events: none;
}

.quadro__fundo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .2) 100%),
    linear-gradient(to right, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 65%);
}

/* ---------- Pista de scroll nos heros de ecrã inteiro ----------
   Nos heros que ocupam a janela toda não há nada a assomar em baixo que sugira
   que a página continua. Este sinal ocupa a folga inferior do hero (o
   padding-block do inner deixa-a livre) e é só isso: um indicador, sem clique
   nem foco. Daí o pointer-events: none — assim nem o cursor muda ao passar por
   cima, e o sinal nunca intercepta um clique destinado ao que está por baixo.
   A animação é só o descer da seta, em ciclo. O bloco global de
   prefers-reduced-motion no fim da folha já a neutraliza. */
.pista {
  position: absolute; z-index: 2;
  left: 50%; bottom: clamp(1rem, 2.5vw, 1.75rem);
  transform: translateX(-50%);
  display: grid; justify-items: center;
  /* Assenta sobre a fotografia do hero, não sobre a tela branca: fica branca. */
  color: var(--branco);
  pointer-events: none;
  /* Sem fundo nem caixa: o véu do hero já garante contraste. */
}
.pista__seta {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .25);
  animation: pistaDesce 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes pistaDesce {
  0%   { transform: translateY(0);      opacity: .75; }
  45%  { transform: translateY(.45rem); opacity: 1; }
  100% { transform: translateY(0);      opacity: .75; }
}

/* Em ecrã estreito o hero é mais apertado: a seta encolhe um pouco. */
@media (max-width: 40rem) {
  .pista__seta { width: 2.4rem; height: 2.4rem; }
}

/* ---------- Seta que guia de um bloco para o seguinte ----------
   Não confundir com a .pista, acima: aquela vive dentro do hero de ecrã inteiro
   e diz apenas que a página continua. Esta é um componente à parte, posto entre
   dois blocos para levar o olhar de um ao outro — ver inc/seta.php.

   Em SVG, e não em vídeo: a seta assenta muitas vezes sobre duas cores ao mesmo
   tempo, e um vídeo traria fundo. O movimento é um vaivém curto, que chama a
   atenção sem saltar; com preferência por movimento reduzido, fica parada.

   O tamanho e a cor vêm em variáveis, para se afinarem sem tocar aqui. */
.seta-guia {
  --seta-tamanho: clamp(4rem, 8vw, 7rem);
  --seta-cor: var(--coral);
  display: flex; justify-content: center;
  /* Folga própria: em fluxo, a seta não fica colada a nenhum dos dois blocos.
     O modificador --junta substitui estas margens pelas dele. */
  margin-block: clamp(1rem, 3vw, 2.5rem);
  /* Decoração: nunca rouba o clique ao que está por baixo. */
  pointer-events: none;
}
.seta-guia svg {
  /* A caixa do desenho é o dobro de alta do que é larga (viewBox 48×96). */
  width: calc(var(--seta-tamanho) * 0.5); height: var(--seta-tamanho);
  display: block; color: var(--seta-cor);
  animation: setaVaivem 1.9s ease-in-out infinite;
}
@keyframes setaVaivem {
  0%, 100% { transform: translateY(-12%); }
  50%      { transform: translateY(12%); }
}
@media (prefers-reduced-motion: reduce) {
  .seta-guia svg { animation: none; }
}

/* Duas setas na mesma linha, ao centro. Cada .seta-guia é um flex que ocupa a
   largura toda, e por isso duas seguidas ficariam uma sob a outra: é este
   contentor que as põe lado a lado. A margem própria de cada uma sai, senão
   somava-se à do par. */
.setas-par {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  margin-block: clamp(1rem, 3vw, 2.5rem);
}
.setas-par .seta-guia { margin-block: 0; }

/* Encostada a um dos lados, com folga para não ficar no canto exato. */
.seta-guia--direita { justify-content: flex-end; padding-right: clamp(1rem, 4vw, 4rem); }
.seta-guia--esquerda { justify-content: flex-start; padding-left: clamp(1rem, 4vw, 4rem); }

/* Na mesma linha do título que a antecede, em vez de num andar próprio acima
   dele. Sai do fluxo para o título continuar centrado na largura toda do bloco,
   e alinha pelo meio da altura do cabeçalho. O contentor é que abre o palco —
   ver .cabeca-com-seta.

   Ocupa a largura toda do cabeçalho, e é o --direita ou o --esquerda que decide
   de que lado a seta assenta: assim as duas podem partilhar a mesma linha sem
   uma empurrar a outra. Não roubam o clique, porque .seta-guia já é
   pointer-events: none. */
.cabeca-com-seta { position: relative; }
.seta-guia--em-linha {
  position: absolute; inset-block: 0; inset-inline: 0;
  align-items: center;
  margin-block: 0;
}
/* Em ecrã estreito não há largura para o título com uma seta de cada lado: fica
   só a da direita, de volta ao fluxo e abaixo do título, em vez de as duas lhe
   passarem por cima. */
@media (max-width: 800px) {
  .seta-guia--em-linha {
    position: static;
    margin-block: clamp(1rem, 3vw, 2.5rem);
  }
  .seta-guia--em-linha.seta-guia--esquerda { display: none; }
}

/* Atravessa a fronteira entre os dois blocos, em vez de ficar entre eles: parte
   dela cai sobre o fim do primeiro e parte sobre o princípio do segundo. As
   margens negativas tiram-lhe a altura do fluxo, para que os dois continuem à
   distância que já tinham, e o z-index põe-na à frente de ambos. */
.seta-guia--junta {
  position: relative; z-index: 2;
  margin-top: calc(var(--seta-tamanho) * -0.75);
  margin-bottom: calc(var(--seta-tamanho) * -0.35);
}

/* ---------- Hero com luz que segue o rato ----------
   A luz é um radial-gradient posicionado por duas variáveis que o JavaScript
   escreve no elemento; sem JavaScript nunca acende, porque a classe --aceso não
   chega a ser posta e as variáveis não existem. É decoração: o hero lê-se sem
   nada disto.

   30/07/2026 — a cena 3D do Spline saiu (ver empresas.php), e com ela as regras
   .cena/.cena__tela e a segunda coluna do hero. O nome da classe mantém-se para
   não haver de mudar o marcador e o JavaScript por causa de uma renomeação. */

/* Os cantos arredondados e as folgas laterais não estão aqui: vêm da
   .quadro--painel, que já existe e faz exatamente isso nos outros heros. */
/* A luz. pointer-events: none para não roubar o rato ao que está por baixo. */
.quadro--cena::before {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  width: 26rem; height: 26rem; border-radius: 50%;
  left: var(--holofote-x, -50%); top: var(--holofote-y, -50%);
  transform: translate(-50%, -50%);
  /* Na tela branca o azul claro não se via: o halo passa ao azul-marinho da
     marca, muito diluído. */
  background: radial-gradient(circle at center, rgba(9, 0, 86, .14), transparent 70%);
  filter: blur(28px);
  opacity: 0; transition: opacity .25s ease;
}
.quadro--cena.quadro--aceso::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .quadro--cena::before { display: none; }
}

/* =========================================================================
   SIGNATURE — Coverflow do hero
   Fila circular de peças em perspetiva, arrastável nos dois sentidos.

   Cada peça tem duas faces: A é a fotografia, B é o texto da vaga. Fora do
   centro mostra-se A; ao chegar ao centro a peça volta-se e mostra B. A
   perspetiva vive no contentor, para que todas as peças partilhem o mesmo
   ponto de fuga e a fila leia como uma só peça.

   As posições são calculadas em JavaScript (ficheiro site.js), porque dependem
   de qual a peça centrada em cada momento. Sem JavaScript, a fila degrada para
   uma tira horizontal navegável à mão que mostra logo o lado B — que é o que
   tem a informação.
   ========================================================================= */

.coverflow {
  position: relative; z-index: 1;
  padding-block: clamp(1rem, 3vw, 2.5rem);
  /* Lado da peça. Sendo quadrada, este valor é também a altura da fila. */
  --peca: clamp(14rem, 31vw, 28rem);
  overflow: hidden;
}

.coverflow__fila {
  display: flex; gap: clamp(.5rem, 1.5vw, 1.25rem);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
}

.coverflow__peca {
  flex: 0 0 auto; width: var(--peca); height: var(--peca);
  scroll-snap-align: center;
}

.coverflow__interior {
  position: relative; width: 100%; height: 100%;
}

.coverflow__face {
  position: absolute; inset: 0;
  border-radius: var(--raio);
  overflow: hidden;
}
.coverflow__face--a { z-index: 1; }

/* Lado A: a fotografia. */
.coverflow__face--a img,
.coverflow__marcador { width: 100%; height: 100%; object-fit: cover; background: var(--superficie); }
/* O marcador é o substituto da fotografia quando ela não existe: fica sobre o
   cinza da peça, e não sobre a tela da página. */
.coverflow__marcador {
  display: grid; align-content: end; gap: .35rem;
  padding: 1.1rem;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-cap);
  line-height: 1.3; color: rgba(0, 0, 0, .6);
  border: 1px solid var(--linha);
}
.coverflow__marcador span { font-size: var(--fs-cap); color: rgba(0, 0, 0, .4); }

/* Lado B: a vaga, no mesmo azul claro do cartão "Três marcas" e com texto
   negro, que é o que essa cor pede. */
/* A cor é a da marca que recruta e entra por --cor-vaga, escrita no marcador a
   partir de data/empresas.php. As três marcas têm cores escuras, por isso o texto
   deste lado é branco e o botão inverte para fundo branco. */
.coverflow__face--b {
  z-index: 2;
  background: var(--cor-vaga, var(--azul)); color: var(--branco);
  padding: clamp(1.1rem, 2vw, 1.75rem);
  display: grid; grid-template-rows: 1fr auto; gap: 1rem;
}
.coverflow__area {
  font-family: var(--display); font-weight: 800; font-size: var(--fs-cap);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.coverflow__titulo {
  display: block; margin-top: .6rem;
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.05; letter-spacing: -.035em; color: var(--branco);
}
.coverflow__cta {
  align-self: end; justify-self: start;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--branco); color: #000; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-btn);
  padding: .75rem 1.4rem; border-radius: 999px;
  transition: transform .18s ease;
}
.coverflow__cta:hover { transform: scale(1.05); }

/* ---------- Com JavaScript: perspetiva, arrasto e volta ---------- */

.coverflow--js { perspective: 1600px; perspective-origin: 50% 50%; }

.coverflow--js .coverflow__fila {
  display: block; position: relative;
  height: var(--peca);
  overflow: visible; scroll-snap-type: none;
  transform-style: preserve-3d;
  cursor: grab; touch-action: pan-y;
  /* Arrastar não deve selecionar o texto do lado B. */
  user-select: none; -webkit-user-select: none;
}
.coverflow--js .coverflow__fila[data-arrastar="true"] { cursor: grabbing; }

/* A fotografia não é alvo de arrasto nativo nem de clique: quem manda é a
   fila. Sem isto, arrastar uma imagem levanta a imagem-fantasma do browser. */
.coverflow--js .coverflow__face--a img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.coverflow--js .coverflow__peca {
  position: absolute; top: 0; left: 50%;
  margin-left: calc(var(--peca) / -2);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .55s ease;
  will-change: transform;
}
/* Fora do alcance visível a peça sai de cena sem deixar área clicável. */
.coverflow--js .coverflow__peca[data-fora="true"] { opacity: 0; pointer-events: none; }

.coverflow--js .coverflow__interior {
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.coverflow--js .coverflow__face { backface-visibility: hidden; }
.coverflow--js .coverflow__face--b { transform: rotateY(180deg); }

/* Centrada: a peça volta-se e passa a mostrar o lado B. */
.coverflow--js .coverflow__peca[data-centro="true"] .coverflow__interior { transform: rotateY(180deg); }

/* Durante o arrasto as peças acompanham o dedo sem amortecimento. A volta da
   peça mantém a transição, para a face virar com suavidade ao cruzar o centro
   mesmo enquanto se arrasta. */
.coverflow--js[data-arrastar="true"] .coverflow__peca { transition: none; }

@media (max-width: 44rem) {
  .coverflow--js { perspective: 900px; }
}

@media (prefers-reduced-motion: reduce) {
  .coverflow--js .coverflow__peca,
  .coverflow--js .coverflow__interior { transition: none; }
}

/* =========================================================================
   Secções
   ========================================================================= */

.secao { padding-block: clamp(3.5rem, 8vw, 7rem); }
.secao--nevoa { background: var(--superficie); }
/* Secção que fecha de perto: quando o bloco seguinte lhe pertence pela leitura,
   como o cartão "Como trabalhamos" e o dos benefícios, na Cultura. */
.secao--fim-curto { padding-bottom: clamp(.75rem, 1.5vw, 1.25rem); }
/* Metade da folga de cima: para quando a secção anterior já fechou de perto e a
   distância normal deixaria um vazio grande demais. Não é a .secao--colada, que
   cola mesmo — aqui continua a haver respiração. */
.secao--topo-curto { padding-top: clamp(1.75rem, 4vw, 3.5rem); }
/* Secção de cor cheia: como os cartões de cor, o texto passa a branco. */
.secao--tinta { background: var(--cor-area, var(--azul)); color: var(--branco); }

.secao__cabeca { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
/* Cabeçalho cujo título cabe numa linha só. O max-width de leitura é que o
   partia em duas, e por isso sai aqui; e o corpo passa a crescer com a largura
   do ecrã, em vez de com a do texto, para a linha nunca passar as margens. */
.secao__cabeca--uma-linha { max-width: none; }
.secao__cabeca--uma-linha h2 {
  white-space: nowrap;
  font-size: var(--fs-h2);
}
.secao__cabeca h2 { font-size: var(--fs-h2); }
/* Cabeçalho centrado: o bloco vai ao meio da coluna e o texto alinha ao centro.
   O max-width do próprio <p> obriga a centrá-lo também. */
.secao__cabeca--centro {
  text-align: center; margin-inline: auto;
}
.secao__cabeca--centro p { margin-inline: auto; }
.secao__cabeca p { margin-top: 1.25rem; color: var(--texto-suave); font-size: var(--fs-lead); }
.secao--tinta .secao__cabeca p { color: rgba(255, 255, 255, .85); }

.grelha { display: grid; gap: 1rem; }
.grelha--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grelha--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
/* Três colunas fixas, em vez de auto-fit: para uma lista de seis, garante duas
   filas de três, cada cartão a esticar até dividir a largura toda. */
.grelha--trio { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grelha--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .grelha--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =========================================================================
   Pilha de painéis das áreas ("story scroll")
   Adaptação vanilla do efeito FlowArt/GSAP: cada área é um painel de altura
   total que fica fixo no topo, e o painel seguinte entra a rodar de 30 para 0
   graus com origem no canto inferior esquerdo, empilhando-se sobre o anterior.

   O "pin" não precisa de JavaScript: é position: sticky. O que o JavaScript faz
   é apenas a rotação, porque depende da posição de cada painel no scroll.
   O fundo vive no interior e não no painel, para que a rotação deixe ver o
   painel de baixo pela cunha que abre.
   ========================================================================= */

/* A folga (--margem-painel, em :root) é o afastamento ao bordo do ecrã, é o que
   separa um cartão do seguinte, e é o que se desconta à altura para o cartão
   continuar a caber num ecrã — sem esse desconto o painel ficaria mais alto do
   que a janela e o sticky deixaria de o fixar corretamente. */
.pilha { position: relative; }

.painel {
  position: sticky; top: 0;
  min-height: 100svh;
  padding: var(--margem-painel);
  overflow: hidden;
  /* A secção continua a valer uma janela — é ela que dá o percurso de scroll da
     pilha — mas o cartão já não a preenche: assenta no seu conteúdo e fica
     centrado na altura. */
  display: flex; align-items: center;
}

.painel__inner {
  flex: 1;
  display: flex; flex-direction: column;
  gap: clamp(.5rem, min(1.5vw, 1.1svh), 1.25rem);
  /* Altura comum aos quatro cartões: três quartos da janela, para que a pilha
     leia como um só objeto e não varie de área para área conforme o
     comprimento dos textos. Menos do que a janela inteira, que deixava altura
     vazia por baixo das ações. */
  height: 75svh;
  max-height: calc(100svh - (var(--margem-painel) * 2));
  /* A folga interna também cede em ecrã baixo: é a primeira coisa a dar espaço
     ao conteúdo antes de a tipografia encolher. */
  padding:
    clamp(1rem, min(4vw, 2.6svh), 3rem)
    clamp(1.25rem, 4vw, 3.5rem)
    clamp(1rem, min(3vw, 2.2svh), 2.5rem);
  background: var(--cor-area);
  color: #fff;
  border-radius: var(--raio-g);
  /* Sem scroll interno: o conteúdo é dimensionado para caber na janela (ver as
     regras de tipografia abaixo, que também dependem da altura). */
  overflow: hidden;
  transform-origin: bottom left;
  will-change: transform;
}

/* O último painel da pilha — hoje o Safe Cities — não precisa da janela inteira.
   Os outros precisam: é a altura deles que dá o percurso de scroll para o painel
   seguinte entrar por cima. Este não tem seguinte, e a janela inteira deixava um
   vazio de cerca de um oitavo do ecrã entre o cartão (que vale 75svh e fica
   centrado) e a faixa de fecho. Passa a valer o cartão mais as suas folgas, e o
   espaço até à faixa fica igual ao que separa os cartões entre si.

   As condições da media query são as inversas das duas que mais abaixo desligam
   o sticky: fora do modo empilhado esta regra não se aplica, e por isso não tem
   de lutar em especificidade com o `min-height: 0` dessas. */
@media (min-width: 60.0625rem) and (min-height: 34.0625rem) {
  .pilha > .painel:last-child { min-height: calc(75svh + var(--margem-painel) * 2); }
}

/* Alvo de âncora sem presença visual: não ocupa espaço nem afeta o layout do
   painel, serve só para os links de marca terem onde aterrar. */
.ancora { display: block; height: 0; }

.painel__regua {
  border: 0; border-top: 1px solid rgba(255, 255, 255, .45);
  margin: clamp(.35rem, min(1.5vw, 1.1svh), 1.25rem) 0; width: 100%;
}

/* Tipografia do cartão limitada pela altura da janela, e não só pela largura.
   O termo em svh dentro do min() é o que faz o conteúdo caber num ecrã baixo
   sem ser preciso scroll dentro do cartão: em vez de transbordar, a escala
   inteira cede. Os extremos do clamp garantem que nunca fica ilegível nem
   desmedido. */
.painel .olho { color: rgba(255, 255, 255, .78); margin-bottom: 0; }

/* Título e logótipo do produto lado a lado. O título fica com a largura que
   precisa e o logótipo encosta à direita; em ecrã estreito o wrap manda-o para
   baixo do título. Alinham pelo fundo, para o logótipo assentar na linha de
   base do título e não flutuar a meio de um título de duas linhas. */
.painel__titulo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
}
.painel__titulo h2 { flex: 1 1 12ch; }
/* A altura acompanha a do título, e é limitada em svh como a tipografia ao
   lado: o cartão não tem scroll interno, por isso tudo o que entra tem de ceder
   em ecrã baixo. width: auto para a proporção mandar, apesar dos atributos
   width/height no HTML — que lá estão para o browser reservar o espaço e não
   haver salto ao carregar. */
.painel__logo {
  height: clamp(3.5rem, min(11vw, 12svh), 8.5rem);
  width: auto; flex: 0 0 auto;
}
.painel h2 { font-size: var(--fs-display); }
.painel__promessa {
  font-size: var(--fs-lead);
  line-height: 1.25; font-weight: 700; letter-spacing: -.03em;
  max-width: 34ch;
}
/* Entrelinha mais fechada do que a do corpo do site: dentro do cartão o texto
   convive com o subtítulo grande e as réguas, e a 1.55 o bloco lia-se solto. */
.painel__texto {
  color: rgba(255, 255, 255, .88); max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.4;
}

/* Subtítulo à esquerda, competências em pills à direita. Em ecrã estreito as
   pills descem para baixo do subtítulo, porque a linha deixa de ter largura
   para as duas colunas. */
.painel__linha {
  display: flex; flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start; justify-content: space-between;
}
.painel__linha .painel__promessa { flex: 1 1 18ch; margin: 0; }

.painel__competencias { flex: 1 1 20ch; }
.painel__competencias .olho {
  color: rgba(255, 255, 255, .78);
  margin-bottom: .7rem;
}

.painel__pills {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-content: start;
}
/* O cartão do painel tem fundo de cor, portanto as pills passam a branco — texto
   e traço —, como já acontece nos blocos .quadro--cor e .quadro--imagem. Sem
   isto herdavam o traço e o texto escuros de .chip, pensados para fundo claro. */
.painel__pills .chip { border-color: rgba(255, 255, 255, .4); color: var(--branco); }

/* No ecrã largo o bloco encosta à direita, rótulo incluído, para formar uma
   coluna alinhada com as pills. */
@media (min-width: 62rem) {
  .painel__competencias { text-align: right; }
  .painel__pills { justify-content: flex-end; }
}

/* Sem 'margin-top: auto': as ações acompanham o texto em vez de descerem ao
   fundo do cartão. A altura que sobra fica agora toda por baixo delas. */
.painel__fim {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: end; justify-content: space-between;
}
.painel__acoes { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Estado de "sem vagas": a altura de um botão, para a linha não desalinhar,
   mas sem o aspeto de algo em que se possa clicar. */
.painel__estado {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-btn);
  padding: clamp(.55rem, min(.9vw, 1.3svh), .9rem) 1.5rem; border-radius: 999px;
  background: rgba(0, 0, 0, .18); color: rgba(255, 255, 255, .85);
}
.painel .botao {
  background: #fff; color: #000;
  /* Também os botões encolhem em ecrã baixo — em cápsula, com a folga vertical
     que têm, seriam de outro modo o bloco que faz o conteúdo transbordar. */
  padding: clamp(.55rem, min(.9vw, 1.3svh), .9rem) clamp(1.1rem, 3vw, 1.75rem);
}
.painel .botao--fantasma {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.painel .botao--fantasma:hover { background: rgba(255, 255, 255, .16); }

/* Em ecrã pequeno os painéis passam a empilhar normalmente: um painel mais alto
   do que o ecrã não pode ficar fixo sem esconder conteúdo. */
@media (max-width: 60rem) {
  .painel { position: static; min-height: 0; }
  /* Em ecrã pequeno o cartão volta a crescer com o conteúdo: fixá-lo à altura
     da janela obrigaria a scroll dentro de cada cartão. */
  .painel__inner { height: auto; max-height: none; transform: none !important; overflow: visible; }
}

/* Rede de segurança para janelas muito baixas em ecrã largo (por exemplo, uma
   janela reduzida a meia altura): a escala já cedeu tudo o que podia, por isso
   o cartão deixa de estar preso à altura da janela e a página passa a rolar —
   melhor do que cortar conteúdo, agora que não há scroll dentro do cartão. */
@media (min-width: 60.0625rem) and (max-height: 34rem) {
  .painel { position: static; min-height: 0; }
  .painel__inner { height: auto; max-height: none; transform: none !important; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .painel__inner { transform: none !important; }
}

/* ---------- Bússola: a pergunta antes da pilha ----------
   Cartão curto entre o hero e o primeiro painel. Fica em superfície escura, e
   não numa das cores das áreas: a cor entra só na escolha e no resultado, que é
   onde tem significado. */

.bussola {
  background: var(--superficie-2);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
}
.bussola__cabeca h2 {
  font-size: var(--fs-h2);
  margin-top: .35rem;
}

/* Saída do cartão: a ligação para a página onde as equipas estão descritas por
   inteiro. Fecha o cartão em texto corrido e em tom suave — é um caminho
   alternativo, não a ação que se espera de quem está a escolher. */
.bussola__saida {
  margin: 0; color: var(--texto-suave);
  font-size: var(--fs-sec);
  /* A frase e o botão na mesma linha, e um por baixo do outro quando não há
     largura para os dois. */
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
}
/* Um pouco menor do que os botões da resposta, que são a ação do cartão. */
.bussola__saida .botao { padding: .6rem 1.2rem; font-size: var(--fs-btn); }

/* A instrução, dentro do cartão e logo acima das escolhas: é o que se lê antes
   de escolher. O espaço até às cápsulas é o gap do cartão. */
.bussola__frase { margin: 0; color: var(--texto-suave); max-width: 60ch; }

.bussola__opcoes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
/* Cápsula, como os botões do site, mas em traço fino: são escolhas, não a ação
   principal do bloco. */
.bussola__opcao {
  display: inline-flex; align-items: center;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-btn);
  color: var(--texto); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--linha-clara);
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.bussola__opcao:hover { box-shadow: inset 0 0 0 1.5px #000; }
/* Com JavaScript a escolha feita fica marcada na cor da área. */
.bussola__opcao--ativa {
  background: var(--cor-area, var(--branco));
  box-shadow: inset 0 0 0 1.5px transparent;
  color: #fff;
}
/* Escolhas sem área a que pertencer — funções transversais e o "ainda não sei".
   Acendem em negro, que é a cor do site quando não há cor de área. */
.bussola__opcao--neutra.bussola__opcao--ativa { background: #000; color: var(--branco); }

/* A saída para quem ainda não escolheu: fica abaixo da lista, separada por um
   traço, e pesa menos — corpo mais pequeno, sem contorno e em texto suave. Não é
   uma área a par das outras, e a leitura não deve dar a entender que é. */
.bussola__opcoes--extra {
  margin-top: -.4rem;
  padding-top: clamp(.75rem, 2vw, 1.1rem);
  border-top: 1px solid var(--linha-clara);
}
.bussola__opcao--discreta {
  padding: .5rem .9rem;
  font-size: var(--fs-sec);
  color: var(--texto-suave);
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.bussola__opcao--discreta:hover { box-shadow: none; color: var(--texto); }
/* Escolhida, acende como as restantes neutras — aí já é a resposta à vista. */
.bussola__opcao--discreta.bussola__opcao--ativa { text-decoration: none; color: var(--branco); }

/* Sem JavaScript os resultados ficam escondidos pelo atributo hidden e as
   escolhas funcionam como âncoras para os painéis. */
.bussola__resultado {
  border-left: 3px solid var(--cor-area, var(--linha-clara));
  padding-left: clamp(.9rem, 2vw, 1.5rem);
}
.bussola__resultado h3 {
  font-size: var(--fs-h3);
  margin: .35rem 0 .5rem;
}
.bussola__resultado p { margin: 0; color: var(--texto-suave); max-width: 60ch; }
.bussola__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.bussola__acoes .botao { padding: .75rem 1.4rem; font-size: var(--fs-btn); }

/* A secção da bússola é uma paragem no scroll: ao descer, a página encosta-a à
   janela e deixa-a enquadrada antes de se continuar (indicação da Carla).

   O scroll-snap do CSS não serve aqui: em proximidade, o browser só prende se o
   scroll já parar perto do sítio, e com um hero alto por cima passa-se ao lado;
   em mandatory prenderia a página toda a um único ponto. Quem trata disto é o
   Assets/js/paragem.js, ligado pelo data-paragem no marcador.

   O scroll-margin fica: é ele que diz onde a secção deve ficar, tanto ao módulo
   como ao salto de uma âncora. A altura da navbar mais uma folga, para o cartão
   não aparecer encostado ao topo. */
.pagina-estagios #bussola-estagios { scroll-margin-top: clamp(8rem, 5.5rem + 6vh, 12rem); }

/* As restantes paragens dos estágios — o processo em quatro passos, as áreas, as
   perguntas e o formulário (indicação da Carla). Todas param à mesma distância do
   topo: a altura da navbar mais uma folga, para o título da secção não ficar
   encostado ao cabeçalho. A bússola tem valor próprio, na regra acima, porque
   abre com um cartão mais alto.

   O valor serve as duas coisas ao mesmo tempo: onde o módulo encosta a secção e
   onde o salto de uma âncora a deixa. */
.pagina-estagios [data-paragem] { scroll-margin-top: clamp(6rem, 4.5rem + 4vh, 8.5rem); }

/* A bússola dos estágios ao lado de uma fotografia, com a imagem à esquerda e o
   cartão à direita. A imagem fica com a coluna mais estreita, porque o que se lê
   é o cartão. Abaixo de 62rem volta a uma coluna, com a fotografia por cima — é
   a mesma regra do formulário desta página. Sem fotografia na pasta a classe
   --com-foto não é posta e a bússola ocupa a largura toda. */
.bussola-par { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 62rem) {
  /* stretch: é o que faz a fotografia acompanhar a altura do cartão e acabar ao
     mesmo nível do fundo dele. */
  .bussola-par--com-foto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: stretch; }
}
.bussola-par__foto {
  border-radius: var(--raio-g); overflow: hidden;
  background: var(--superficie-2);
  min-height: 18rem;
}
.bussola-par__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Cartões de área ---------- */

/* As quatro áreas em linha. Não se usa auto-fit aqui: as colunas são fixas por
   patamar, para que as quatro fiquem sempre lado a lado no ecrã largo e nunca
   sobre duas linhas desirmanadas (3 + 1). */
.grelha--areas { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grelha--areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .grelha--areas { grid-template-columns: repeat(4, 1fr); } }

.area-card {
  display: flex; flex-direction: column; text-decoration: none;
  /* Cartão de cor cheia: o texto é branco, e não o negro que herdaria da tela. */
  background: var(--cor-area); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  min-height: clamp(16rem, 30vw, 22rem);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), filter .22s ease;
}

/* Em quatro colunas cada cartão fica bem mais estreito: a tipografia e o
   espaçamento recolhem para o texto não ficar apertado contra os bordos. */
@media (min-width: 68rem) {
  .grelha--areas .area-card { padding: clamp(1.5rem, 2.2vw, 2rem); min-height: clamp(15rem, 26vw, 20rem); }
  .grelha--areas .area-card h3 { font-size: var(--fs-h3); }
  .grelha--areas .area-card p { font-size: var(--fs-sec); }
  .grelha--areas .area-card__icone svg { width: clamp(2.5rem, 3.4vw, 3rem); }
}
.area-card:hover { transform: translateY(-6px); filter: brightness(1.1); }

/* Símbolos das áreas. Herdam a cor do contexto por currentColor: brancos sobre
   o bloco de cor do cartão, na cor da área quando estão sobre preto. */
.area-card__icone, .area-icone { display: block; margin-bottom: 1.25rem; }
.area-card__icone svg, .area-icone svg { width: clamp(2.75rem, 5vw, 3.5rem); height: auto; }
/* Dentro do cartão de área a página não pode crescer: o ícone e a folga que
   leva por baixo cedem com a altura da janela, como o resto do cartão. */
.painel .area-icone { margin-bottom: clamp(.4rem, min(1.25vw, 1.1svh), 1.25rem); }
.painel .area-icone svg { width: clamp(1.9rem, min(5vw, 4.5svh), 3.5rem); }
.area-card__icone { color: rgba(255, 255, 255, .9); }
.area-card h3 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.area-card__promessa { font-weight: 700; margin-bottom: .75rem; }
.area-card p { color: rgba(255, 255, 255, .86); font-size: var(--fs-body); }

/* ---------- Grupo: mosaico das marcas + cartão de texto ----------
   Duas metades. O texto está primeiro no marcador, por ser a apresentação, e a
   grelha manda-o para a coluna da direita; o mosaico das marcas fica à esquerda.

   Dentro do mosaico: a Visualforma ocupa as duas colunas da faixa de cima, e a
   SmartConnect e a Systems IT dividem a de baixo. */

.grupo { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); }
@media (min-width: 62rem) {
  .grupo { grid-template-columns: 1fr 1fr; align-items: stretch; }
  /* A troca de lados vive aqui: em ecrã estreito a ordem do marcador manda. */
  .grupo__texto { order: 2; }
  .grupo__mosaico { order: 1; }
}

.grupo__texto {
  background: var(--azul-suave); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  display: flex; flex-direction: column; justify-content: center;
}
.grupo__texto h2 { font-size: var(--fs-h2); }
/* Sobre o azul-marinho o texto é branco, e não negro como no resto da página: o
   rótulo e o parágrafo esbatem-se em branco transparente. */
.grupo__texto .olho, .grupo__texto .olho--claro { color: rgba(255, 255, 255, .66); }
.grupo__texto p { color: rgba(255, 255, 255, .8); margin-top: 1rem; }

.grupo__mosaico {
  display: grid; gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: 1fr 1fr;
  /* A faixa da empresa-mãe e as duas faixas de pares, com a mesma altura. */
  grid-template-rows: repeat(3, 1fr);
}
.grupo__mosaico .empresa--visualforma { grid-column: 1 / -1; }
/* Nas metades de baixo, mais estreitas, o nome pede menos corpo. */
.grupo__mosaico .empresa--smartconnect h3,
.grupo__mosaico .empresa--systems-it h3,
.grupo__mosaico .empresa--sharetech h3,
.grupo__mosaico .empresa--impruv h3 { font-size: var(--fs-h3); }
.grupo__mosaico .empresa { padding: clamp(1.25rem, 2.2vw, 1.75rem); }
/* Em telemóvel as cinco empilham: duas colunas ficariam ilegíveis. */
@media (max-width: 40rem) {
  .grupo__mosaico { grid-template-columns: 1fr; grid-template-rows: none; }
}

/* ---------- Empresas ---------- */

.empresa {
  background: var(--superficie-2); border-radius: var(--raio-g);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: grid; gap: 1rem; align-content: start;
}
.secao--nevoa .empresa { background: var(--preto); }
.empresa h3 { font-size: var(--fs-h3); }
.empresa p { color: var(--texto-suave); }
.empresa__meta { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Barra de pesquisa da entrada ----------
   Uma cápsula com o campo de texto e dois filtros, separados por fios verticais.
   Em ecrã estreito desmonta-se: cada campo passa a ocupar uma linha, com fio
   horizontal, e o botão fica em baixo à largura toda. */

.pesquisa {
  position: relative; z-index: 1;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  /* Ar abaixo da cápsula, a somar ao que o bloco de texto do hero já traz por
     cima: a barra fica destacada da galeria e do título. */
  margin-bottom: clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: rgba(0, 0, 0, .035);
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio-g);
  padding: .5rem;
  backdrop-filter: blur(8px);
}
@media (min-width: 56rem) {
  .pesquisa {
    grid-template-columns: 2fr 1fr 1fr auto;
    align-items: center;
    border-radius: 999px;
    padding: .45rem .45rem .45rem 1.25rem;
  }
}

.pesquisa__campo { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; }
/* Fio a separar os campos: horizontal quando empilhados, vertical em linha. */
.pesquisa__campo + .pesquisa__campo { border-top: 1px solid var(--linha); }
@media (min-width: 56rem) {
  .pesquisa__campo + .pesquisa__campo {
    border-top: 0; border-left: 1px solid var(--linha);
  }
}
.pesquisa__campo--texto { padding-left: 0; }
.pesquisa__lupa { flex: 0 0 auto; color: var(--texto-suave); }

.pesquisa input,
.pesquisa select {
  width: 100%; min-width: 0;
  background: transparent; border: 0; color: var(--texto);
  font-family: var(--corpo); font-size: var(--fs-body);
  padding: .25rem 0;
}
.pesquisa input::placeholder { color: var(--texto-suave); }
.pesquisa select { font-family: var(--display); font-weight: 700; cursor: pointer; }
/* Os itens do menu nativo herdariam o fundo transparente e ficariam ilegíveis. */
.pesquisa select option { background: var(--superficie); color: var(--texto); }
.pesquisa input:focus, .pesquisa select:focus { outline: none; }
.pesquisa:focus-within { border-color: #000; }

.pesquisa .botao { justify-content: center; margin-top: .5rem; }
@media (min-width: 56rem) {
  .pesquisa .botao { margin-top: 0; margin-left: .75rem; }
}

/* ---------- Os menus de escolha dentro da cápsula da pesquisa ----------
   A barra da entrada usa o mesmo componente dos filtros da página de vagas (ver
   "Menu de escolha próprio", mais abaixo): é o site.js que troca os <select> pelos
   menus do site, e sem JavaScript ficam os nativos.

   Aqui, porém, o gatilho não pode ter cápsula própria — estaria uma cápsula dentro
   de outra. Fica transparente e sem contorno, como o <select> que substitui, e a
   lista é que traz a cor. */
.pesquisa .escolha__gatilho {
  background: transparent; border: 0; padding: .25rem 0;
  font-family: var(--display); font-weight: 700;
}
.pesquisa .escolha__gatilho:hover,
.pesquisa .escolha__gatilho[aria-expanded="true"] { border: 0; }
/* A lista sai da folga do campo para fora e cresce para o lado, para os nomes das
   localidades não partirem em campos estreitos. */
.pesquisa .escolha__lista {
  left: -.75rem; right: auto;
  min-width: calc(100% + 1.5rem);
  width: max-content; max-width: min(22rem, 80vw);
}
/* A cápsula sobe na pilha, senão a lista passava por baixo do que vem a seguir no
   documento. */
.pesquisa:focus-within { z-index: 30; }

/* ---------- Clientes em movimento ----------
   Adaptação do ScrollVelocity do React Bits: duas filas de nomes que avançam em
   sentidos opostos e aceleram com o scroll (ver Assets/js/clientes.js).

   A fila é mais larga do que a janela por definição, mas o corte vive aqui e não
   no body — daí o overflow: clip na linha, e não no documento. */

/* ---- Cartão de cor que envolve o módulo ---- */

/* Na cor da tela, como a secção das áreas que vem acima: o bloco lê-se como
   continuação dela e não como um cartão de cor a mais. O padding e o
   border-radius ficam, porque é o raio que corta as filas de nomes nos cantos. */
.clientes__cartao {
  --pad: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--preto); color: var(--texto);
  border-radius: var(--raio-g);
  padding: var(--pad);
  /* Corta as filas nos cantos arredondados do cartão. */
  overflow: hidden;
}
/* O título recolhia para caber no cartão de cor. Agora que o cartão é preto e
   lê-se como as outras secções, segue a escala normal dos títulos de secção
   (.secao__cabeca h2) — daí não haver aqui font-size nenhum. */
/* As filas anulam o padding lateral, para correrem de bordo a bordo. */
.clientes__cartao .clientes__linha { margin-inline: calc(var(--pad) * -1); }

/* ---- Filas de nomes ---- */

.clientes__linha {
  overflow-x: clip;
  padding-block: .2rem;
}
.clientes__linha:first-of-type { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.clientes__fila {
  display: flex; width: max-content;
  will-change: transform;
}
.clientes__copia {
  flex-shrink: 0; white-space: nowrap;
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.15; letter-spacing: -.035em;
  /* Negro esbatido: sobre a tela branca, o negro puro competiria com o
     título. */
  color: rgba(0, 0, 0, .86);
}
/* A segunda fila fica em contorno: as duas leem-se como um par, e o peso visual
   não duplica. */
.clientes__linha:last-of-type .clientes__copia {
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .5);
}

/* ---------- Passos da candidatura ----------
   Um item por fase: o cartão da fase (ver ".fase", abaixo) e, por baixo dele, a
   fotografia daquele passo. Três colunas quando há largura para o conteúdo do
   cartão respirar; abaixo disso, um passo por linha. */

.passos { list-style: none; margin: 0; padding: 0; }
@media (min-width: 68rem) {
  .passos { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
/* Cada item da fila é o cartão mais a fotografia que lhe fica por baixo. */
.passos > li { display: grid; gap: 1rem; align-content: start; }
/* Fotografia do passo, dentro de uma moldura que a recorta e lhe dá o raio dos
   cartões do site. Em ecrã estreito a moldura tem a altura da própria
   fotografia; em ecrã largo tem altura própria — ver a regra abaixo. */
.passo__foto {
  overflow: hidden;
  border-radius: var(--raio-g);
}
/* Imagem que cabe inteira em vez de encher a moldura: o que sobra em volta leva
   o azul do próprio ficheiro, para não se ver uma faixa clara à sua volta. */
.passo__foto--inteira { background: #16264a; }
.passo__imagem { display: block; width: 100%; height: 100%; object-fit: var(--ajuste, cover); }

/* A fila ocupa a janela até baixo. Só a partir dos 68rem, onde os três passos
   estão lado a lado; abaixo disso empilham, e três fotografias de altura de
   janela dariam três ecrãs de scroll. */
@media (min-width: 68rem) {
  /* O item tem a altura da janela, descontados o cabeçalho fixo e a folga da
     secção. O cartão leva o que precisa e a moldura fica com o resto: quando o
     cartão abre, é a moldura que encolhe. */
  .passos > li {
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100svh - 11rem);
  }
  .passos .passo__foto { position: relative; height: 100%; min-height: 0; }
  /* A fotografia tem altura própria — a altura toda do item, que não muda — e
     está encostada ao fundo da moldura. Assim a escala é sempre a mesma e a base
     da fotografia fica no mesmo sítio: o que a moldura encolhe corta-lhe o topo,
     em vez de a redimensionar ou de a empurrar para baixo. */
  .passos .passo__imagem {
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: calc(100svh - 11rem);
    object-fit: var(--ajuste, cover); object-position: 50% var(--pos-y, 100%);
  }
}

/* O cartão de cor cheia que abria o painel — .passo, .passo__numero,
   .passo__fase, .passo__seta e o resumo que abria no hover — saiu: o cartão da
   fase ocupou-lhe o lugar e traz o conteúdo todo. */

/* ---------- Cartões das fases ----------
   Cada fase é um cartão fechado com a mesma anatomia: cabeça, o que acontece, o
   que fazer, dúvidas. A cor da fase entra por --cor-fase, definida no marcador,
   e aparece no fio do topo, no ícone e no rótulo de ordem. */

/* As três fases estão sempre à vista, uma por cartão: já não há painel a abrir
   e a fechar, e por isso saíram daqui as regras de .fases, .fase[hidden],
   .fase--entra e do cartão ativo. */

.fase {
  position: relative;
  height: 100%;
  /* Cor cheia da fase, com o texto a branco — a mesma gramática dos cartões de
     área do site. */
  background: var(--cor-fase, var(--azul)); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  overflow: hidden;
  /* O cabeçalho é fixo em cima: o alvo da âncora precisa de folga para não ficar
     escondido debaixo dele. */
  scroll-margin-top: 7.5rem;
  transition: filter .25s ease;
}
/* O fio de cor no topo e o halo esbatido no canto saíram: o cartão é uma cor
   chapada, sem nada por cima em transparência. */
/* Ao chegar por uma âncora, o cartão destaca-se: a mesma cor, um pouco mais
   viva. */
.fase:target { filter: brightness(1.08); }

/* O cartão das dúvidas não é um passo: fica na superfície clara da página, com
   o texto normal, para não somar um terceiro bloco de cor cheia à fila. */
.fase--claro {
  background: var(--superficie); color: var(--texto);
  box-shadow: inset 0 0 0 1px var(--linha);
}
.fase--claro .fase__ordem,
.fase--claro .fase__rotulo { color: var(--texto-suave); }
.fase--claro .fase__lead { color: var(--texto); }

/* Corpo do cartão de passo: ao entrar na página o cartão está fechado e vê-se
   só o número e o nome da fase. Abre ao passar o rato, e também quando algo lá
   dentro recebe foco — de outro modo, quem navega por teclado saltava para
   botões que não estão à vista. A altura anima-se pelas linhas da grelha
   (0fr para 1fr), o que permite abrir até ao conteúdo sem lhe fixar altura. */
.fase__corpo {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1), opacity .32s ease;
}
.fase__corpo > div { overflow: hidden; }
.fase:hover .fase__corpo,
.fase:focus-within .fase__corpo { grid-template-rows: 1fr; opacity: 1; }
/* O cartão das dúvidas não colapsa: não é um passo, e as perguntas têm de estar
   à vista para se poderem procurar. */
.fase--claro .fase__corpo { grid-template-rows: 1fr; opacity: 1; }

/* A ordem do passo e o nome da fase. O ícone não voltou: o número diz o que
   era preciso dizer. */
.fase__cabeca {
  position: relative; z-index: 1;
  display: grid; gap: .2rem;
}
/* Fechado, a cabeça é todo o cartão e não precisa de folga por baixo; aberto,
   afasta-se do conteúdo. */
.fase:hover .fase__cabeca,
.fase:focus-within .fase__cabeca,
.fase--claro .fase__cabeca { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.fase__ordem {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.fase__titulo { margin: 0; font-size: var(--fs-h3); }

/* A frase que diz o que acontece nesta fase: maior do que o corpo, para se ler
   antes dos blocos que vêm abaixo. */
.fase__lead {
  position: relative; z-index: 1;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .92); max-width: 68ch;
}

/* Blocos internos, separados só por espaço: os fios horizontais saíram, para o
   cartão do passo se ler como uma peça única. */
.fase__bloco {
  position: relative; z-index: 1;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* O primeiro bloco do cartão não leva folga por cima: no Passo 1 é ele que vem
   logo a seguir ao título — a fase não tem texto — e somavam-se três folgas. */
.fase__corpo > div > .fase__bloco:first-child { margin-top: 0; padding-top: 0; }
.fase__rotulo {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 1rem;
}
.fase__nota { color: rgba(255, 255, 255, .88); max-width: 68ch; margin-bottom: 1.25rem; }

/* Os dois botões de caminho vivem no hero, na coluna lateral; a regra que os
   punha lado a lado dentro do passo saiu com eles. */
/* Botão de bola: a bola de cor fica à esquerda, com a seta por cima, e cresce
   até encher o botão ao passar o rato ou ao receber foco — o texto, que estava
   negro sobre a superfície, passa a branco sobre a cor. Cada botão leva a sua
   cor: o primeiro a da fase, o segundo o coral. */
.botao-bola {
  --cor-bola: var(--cor-fase, var(--azul));
  /* O texto está no fluxo normal, com a bola por baixo dele em camada
     absoluta: assim a altura do botão vem do próprio texto, e uma legenda que
     precise de duas linhas não sai do botão. */
  position: relative; display: inline-flex; align-items: center;
  flex: 0 1 auto; width: min(100%, 24rem); min-height: 3.6rem;
  padding: .3rem 1.5rem .3rem 3.9rem;
  border-radius: 999px; overflow: hidden;
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-bola) 30%, transparent);
  text-decoration: none;
}
.botao-bola--coral { --cor-bola: var(--coral); }

.botao-bola__bola {
  position: absolute; left: .3rem; top: .3rem; bottom: .3rem;
  width: 3rem;
  border-radius: 999px;
  background: var(--cor-bola);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.botao-bola:hover .botao-bola__bola,
.botao-bola:focus-visible .botao-bola__bola { width: calc(100% - .6rem); }

.botao-bola__seta {
  position: absolute; top: 50%; left: 1.1rem; z-index: 1;
  display: grid; place-items: center;
  color: var(--branco);
  transform: translateY(-50%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.botao-bola:hover .botao-bola__seta,
.botao-bola:focus-visible .botao-bola__seta { transform: translate(.4rem, -50%); }

.botao-bola__texto {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-btn); letter-spacing: -.01em; line-height: 1.2;
  color: var(--texto);
  transition: color .5s ease;
}
.botao-bola:hover .botao-bola__texto,
.botao-bola:focus-visible .botao-bola__texto { color: var(--branco); }

/* Os três elementos a preparar. A numeração vem do contador do CSS. */
.preparar { list-style: none; margin: 0; padding: 0; counter-reset: preparar; display: grid; gap: .6rem; }
.preparar li {
  counter-increment: preparar;
  display: grid; grid-template-columns: 2rem 1fr; gap: .25rem 1rem;
  background: var(--superficie-2); border-radius: var(--raio);
  padding: clamp(1rem, 2vw, 1.25rem);
}
.preparar li::before {
  content: counter(preparar);
  grid-row: span 2;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--cor-fase, var(--azul)); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: var(--fs-sec);
}
.preparar strong { font-family: var(--display); font-weight: 800; font-size: var(--fs-body); }
.preparar span { color: var(--texto-suave); font-size: var(--fs-sec); }

/* As dúvidas em três colunas, uma por passo e na mesma ordem da fila de cima.
   Alinham pelo topo: cada fase tem o seu número de perguntas. */
.duvidas-colunas { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 68rem) {
  .duvidas-colunas { grid-template-columns: repeat(3, 1fr); }
  /* Dentro das colunas os blocos não levam a folga de cima que os separava
     quando vinham uns debaixo dos outros. */
  .duvidas-colunas > .fase__bloco { margin-top: 0; padding-top: 0; }
}

/* As perguntas ficam sobre um fundo próprio: distinguem-se do rótulo do grupo e
   separam visualmente as três fases dentro do cartão de dúvidas. */
.fase__bloco--duvidas .faq {
  max-width: none;
  background: var(--branco); border-radius: var(--raio);
  padding: .25rem clamp(1rem, 2.5vw, 1.5rem);
  /* O cartão passa o texto a branco; dentro do painel branco volta ao negro. */
  color: var(--texto);
}
.fase__bloco--duvidas .faq__item:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .fase, .fase__corpo, .fase__cabeca { transition: none; }
  .botao-bola__bola, .botao-bola__seta, .botao-bola__texto { transition: none; }
}

/* ---------- Cartão de fecho ----------
   Fotografia da largura da janela — a folga lateral vem do .wrap--painel, como
   nos painéis das áreas — com o texto por cima, encostado ao fundo. É o bloco
   que fecha a página das candidaturas antes das dúvidas. */
.cordao {
  position: relative; overflow: hidden;
  border-radius: var(--raio-g);
  /* Mais alto por indicação da Carla em 30/07/2026: o diálogo cresce à medida
     que se responde, e com a altura anterior o cartão saltava a cada resposta. */
  min-height: clamp(26rem, 52vw, 38rem);
  /* Texto a meia altura do cartão e encostado à esquerda, por indicação da Carla
     em 30/07/2026 — antes assentava no fundo. */
  display: flex; align-items: center; justify-content: flex-start;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  color: #fff;
  background: var(--superficie);
}
.cordao__imagem {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
/* Véu escuro: sem ele o título perdia-se nas zonas claras da fotografia. Agora
   que o texto está ao centro, o véu é mais denso no meio e não no fundo, senão o
   título ficava na faixa mais clara do gradiente. */
.cordao::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, .35) 100%);
}
/* O texto alinha à esquerda e não passa de uma medida legível, para as linhas não
   se estenderem de um lado ao outro do cartão. */
.cordao__texto {
  position: relative; z-index: 2;
  text-align: left; max-width: 44rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* O diálogo é uma grelha: sem isto os botões e as opções esticavam de margem a
   margem em vez de acompanharem a largura do próprio texto. */
.cordao .historia { justify-items: start; }

/* Abaixo do cartão fica só a margem da faixa seguinte: a secção não acrescenta
   folga nenhuma. */
#cracha { padding-bottom: 0; }
/* O rótulo em --cor-area seria azul sobre fotografia escura: fica claro. */
.cordao .olho { color: rgba(255, 255, 255, .8); }
.cordao__texto h2 { font-size: var(--fs-h2); max-width: 28ch; }
.cordao__texto p { color: rgba(255, 255, 255, .78); margin-top: 1.25rem; }

/* ---------- Diálogo do cartão de fecho ("modo história") ----------
   A pergunta do título tem respostas à escolha. O fio de falas fica à vista,
   para se ler o caminho percorrido, e as escolhas ficam em baixo, em cápsulas.
   Sem JavaScript o que aqui está é o mesmo diálogo em <details> encadeados. */

/* CUIDADO — a classe .historia está usada em dois sítios diferentes do site:
   aqui, no contentor do diálogo do cartão de fecho, e mais abaixo nos cartões de
   testemunho da página Cultura, que são cartões de cor
   (.historia { background: var(--cor-historia, var(--azul)) }).

   Como essa regra vem depois desta na folha, o diálogo aparecia sobre um
   retângulo azul, com o preenchimento e os cantos do cartão. O seletor com o
   atributo — que só o diálogo tem — vale 0,2,0 e vence a outra regra
   independentemente da ordem, e desfaz o que o cartão lhe impunha.

   A limpeza de fundo seria dar nomes distintos aos dois blocos; isto resolve sem
   mexer no marcador nem no módulo. */
.historia { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 46rem; }
.historia[data-historia] {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Recurso sem JavaScript: ramos encadeados, cada um recuado do anterior. */
.historia__fala { color: rgba(255, 255, 255, .82); margin: 0 0 .75rem; }
.historia__ramo > summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-body);
  padding: .5rem .95rem; margin-bottom: .5rem;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
  display: inline-block;
}
.historia__ramo > summary::-webkit-details-marker { display: none; }
.historia__ramo > summary::marker { content: ''; }
.historia__ramo[open] { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 1rem; }
.historia__acao { margin: 0 .5rem .5rem 0; }

/* ---- Versão interativa ---- */
.historia--js { display: grid; gap: 1rem; }

/* Um pouco mais de ar entre falas do que quando havia bolhas: sem caixa, é o
   espaço que passa a separar uma fala da seguinte. */
.historia__fio { display: grid; gap: .85rem; justify-items: start; }

/* As falas voltaram a ter fundo: sem ele, o texto caía sobre as zonas claras da
   fotografia e deixava de se ler. É um cinza meio opaco — neutro, para não
   trazer outra cor ao cartão — com um desfoque por baixo, que é o que faz o
   texto assentar mesmo quando a fotografia por baixo tem detalhe.

   Quem fala continua a distinguir-se pelo lado e pela cor do texto, e não por
   fundos diferentes: o cinza é o mesmo nas duas. */
.historia__bolha {
  margin: 0; max-width: 42ch;
  padding: .7rem 1.05rem;
  border-radius: 18px;
  background: rgba(84, 84, 84, .58);
  backdrop-filter: blur(8px);
  font-size: var(--fs-body);
  animation: bolhaEntra .28s cubic-bezier(.22, 1, .36, 1) both;
}
/* O que a Visualforma diz: branco, encostado à esquerda. */
.historia__bolha--nossa {
  color: #fff;
  border-bottom-left-radius: 6px;
}
/* A resposta escolhida: à direita e num azul claro, que é o que se lê sobre o
   cinza da bolha — o azul-marinho da marca aqui desapareceria. */
.historia__bolha--tua {
  justify-self: end; text-align: right;
  color: var(--milho);
  font-weight: 700;
  border-bottom-right-radius: 6px;
}
@keyframes bolhaEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Três pontos, enquanto a fala seguinte está "a ser escrita". Mesmo cinza das
   falas, para se ler como uma fala a caminho. */
.historia__pontos {
  display: inline-flex; gap: .3rem; align-items: center;
  padding: .85rem 1.05rem;
  border-radius: 18px;
  background: rgba(84, 84, 84, .58);
  backdrop-filter: blur(8px);
}
.historia__pontos i {
  width: .4rem; height: .4rem; border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  animation: pontoSalta 1s ease-in-out infinite;
}
.historia__pontos i:nth-child(2) { animation-delay: .15s; }
.historia__pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes pontoSalta {
  0%, 60%, 100% { transform: none; opacity: .55; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.historia__rodape { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* As respostas à escolha. Cápsulas de contorno, que se enchem no hover — a
   mesma gramática dos botões fantasma do site. */
.historia__opcao {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-btn);
  color: #fff; cursor: pointer;
  padding: .65rem 1.15rem; border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  border: 1.5px solid rgba(255, 255, 255, .5);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.historia__opcao:hover {
  background: var(--branco); border-color: var(--branco); color: #000;
  transform: translateY(-2px);
}

.historia__recomecar {
  background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-btn);
  color: rgba(255, 255, 255, .7);
  text-decoration: underline; text-underline-offset: .25em;
  padding: .5rem .25rem;
}
.historia__recomecar:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .historia__bolha { animation: none; }
  .historia__pontos i { animation: none; }
  .historia__opcao { transition: none; }
  .historia__opcao:hover { transform: none; }
}

/* ---------- Histórias ---------- */

/* Um só cartão a conter os cartões das pessoas, na Cultura: contorno a toda a
   volta e nada por dentro, como o do "O que nos define". A folga é a mesma desse,
   para os dois blocos se lerem como o mesmo tipo de caixa.

   As pessoas trazem margin-top de .historia (regra do diálogo, mais acima na
   folha): dentro deste cartão isso somava-se à folga de topo, por isso anula-se
   aqui, e o espaço entre elas passa a ser só o da grelha. */
.percursos {
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.percursos .historia { margin-top: 0; }

/* Cada pessoa num cartão de cor. A cor entra por --cor-historia, escrita no
   marcador; os quatro acentos das áreas passam todos texto branco. */
.historia {
  background: var(--cor-historia, var(--azul)); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1rem, 2vw, 1.35rem);
  display: grid; gap: 1.25rem; align-content: start;
}
.historia__retrato {
  /* Raio menor do que o do cartão, para a fotografia assentar dentro dele sem
     os dois arcos brigarem. */
  aspect-ratio: 1 / 1; border-radius: var(--raio); overflow: hidden;
  background: rgba(0, 0, 0, .25);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-sec);
  color: rgba(255, 255, 255, .55);
}
/* As fotografias originais são verticais: no quadrado, o recorte assenta acima
   do centro para não cortar a cabeça. */
.historia__retrato img,
.historia__retrato video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.historia blockquote {
  margin: 0 0 1rem; font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h3); line-height: 1.15;
  letter-spacing: -.035em;
}
/* Tempo de casa em destaque, por indicação da Carla: cápsula de contorno em
   branco, antes da citação. É o que distingue estes percursos — há aqui pessoas
   com quase vinte anos de casa — e como terceira linha da assinatura passava
   despercebido. Branco transparente, e não uma das cores das áreas: o cartão já é
   de cor cheia e uma segunda cor por cima brigaria com ela. */
.historia__anos {
  margin: 0 0 .85rem;
  display: inline-block;
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-cap); letter-spacing: -.01em; line-height: 1;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
  color: var(--branco);
}
/* Sobre a cor cheia, o cinzento do texto-suave perdia contraste. */
.historia__quem { font-size: var(--fs-sec); color: rgba(255, 255, 255, .85); }
.historia__quem strong { font-family: var(--display); font-weight: 800; color: var(--branco); }
/* O corpo respira dentro do cartão, sem folga a mais no fundo. */
.historia__corpo { padding: 0 .4rem .4rem; }

/* ---------- Testemunhos de fora (fita contínua) ----------
   Clientes, parceiros e quem passou por cá, em cartões que desfilam da direita
   para a esquerda. Adaptação do padrão "marquee" que a Carla indicou como
   referência, feita em CSS e sem biblioteca nenhuma.

   Como é contínua: os cartões estão escritos duas vezes no HTML e a animação
   corre exatamente meio percurso da fita — metade da largura, mais metade de uma
   folga, que é o que a folga extra entre as duas cópias obriga a descontar. Ao
   chegar ao fim, o que está no ecrã é igual ao princípio e o salto não se vê.

   A secção sangra para fora da coluna de leitura: a fita atravessa o ecrã todo,
   por isso não vai dentro de .wrap. */
/* Segue de perto o cartão dos percursos, em vez da folga normal entre secções: os
   testemunhos são a continuação do mesmo assunto — quem fala da casa — e as duas
   folgas somadas abriam um vazio. Encurta-se nos dois lados, o de baixo da secção
   dos percursos e o de cima desta. */
.secao--testemunhos { overflow: hidden; padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.secao:has(.percursos) { padding-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.testemunhos {
  position: relative;
  --folga-fita: clamp(.85rem, 2vw, 1.25rem);
  /* Uma volta completa. Mais lento do que a referência (40s), porque aqui os
     cartões trazem texto para ler e não apenas uma linha. */
  --duracao-fita: 64s;
}
.testemunhos__fita {
  display: flex; align-items: stretch;
  gap: var(--folga-fita);
  width: max-content;
  padding: .5rem clamp(1.25rem, 3vw, 2.5rem);
  animation: desfilaTestemunhos var(--duracao-fita) linear infinite;
}
/* Pára com o rato por cima e também quando um cartão recebe foco pelo teclado —
   sem isso, quem navega por tabulação perseguia um cartão em movimento. */
.testemunhos:hover .testemunhos__fita,
.testemunhos:focus-within .testemunhos__fita { animation-play-state: paused; }

@keyframes desfilaTestemunhos {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--folga-fita) / 2)); }
}

.testemunho {
  margin: 0;
  flex: 0 0 auto; width: min(21rem, 78vw);
  display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--branco);
  border: 1px solid var(--linha);
  /* Um fio da cor do tipo no topo, que é o que distingue um cliente de um
     parceiro sem trazer fundos de cor à fita. */
  border-top: 4px solid var(--cor-testemunho, var(--azul));
  border-radius: var(--raio);
}
.testemunho__tipo {
  align-self: start;
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cor-testemunho, var(--azul));
}
.testemunho__citacao {
  margin: 0;
  font-size: var(--fs-body); line-height: 1.45;
  color: var(--texto);
}
/* Empurra a assinatura para o fundo: os cartões têm alturas de texto diferentes e
   sem isto os nomes ficavam a alturas diferentes ao longo da fita. */
.testemunho__quem {
  margin-top: auto;
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--fs-sec);
}
.testemunho__quem strong {
  display: block;
  font-family: var(--display); font-weight: 800;
}
.testemunho__papel { color: var(--texto-suave); font-size: var(--fs-cap); line-height: 1.3; }
/* Iniciais no lugar do retrato. */
.testemunho__iniciais {
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cor-testemunho, var(--azul)); color: var(--branco);
  font-family: var(--display); font-weight: 800; font-size: var(--fs-sec);
  letter-spacing: 0;
}

/* Véus nas pontas: a fita entra e sai do branco da página, em vez de ser cortada
   a régua pela margem do ecrã. */
.testemunhos__veu {
  position: absolute; inset-block: 0; width: clamp(3rem, 12vw, 10rem);
  pointer-events: none;
}
.testemunhos__veu--esquerda { left: 0; background: linear-gradient(to right, var(--preto), transparent); }
.testemunhos__veu--direita { right: 0; background: linear-gradient(to left, var(--preto), transparent); }

/* Com movimento reduzido a fita não anda: fica uma fila que se percorre à mão, e
   os véus saem, para não taparem o primeiro e o último cartão. */
@media (prefers-reduced-motion: reduce) {
  .testemunhos { overflow-x: auto; }
  .testemunhos__fita { animation: none; }
  .testemunhos__veu { display: none; }
}

/* ---------- Benefícios ---------- */

/* ---------- Benefícios em duas colunas ----------
   Cartão de cor com o título à esquerda, lista de benefícios à direita. */
/* O bloco .retratos — o par de fotografias que vivia na Cultura, entre o cartão
   do dia a dia e os benefícios — saiu com a secção que o usava. */

/* ---------- Como trabalhamos: um só cartão de cor ----------
   O título é a cabeça do cartão e as três coisas são colunas lá dentro. No
   azul-marinho --azul-suave, que por ser escuro pede texto branco: os fios e o
   texto secundário são branco transparente, e não preto. */

/* Sem cor de fundo, por indicação da Carla em 30/07/2026: era um cartão em
   azul-marinho com texto branco. Sobre o branco da página o texto volta ao negro
   do site e os fios ao --linha; fica a folga lateral, para o bloco continuar
   alinhado com o cartão dos benefícios, que é de cor. */
.trabalho {
  color: var(--texto);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 4vw, 3rem);
  /* Menos ar por cima do título: sem cor de fundo, a folga de topo do cartão
     somava-se à da secção e lia-se como um vazio, e não como a folga de um
     cartão. Os lados e a base ficam como estavam. */
  padding-top: 0;
  display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem);
}
/* A secção que o contém encosta ao bloco de cima, e a dos benefícios, que fica
   imediatamente antes, fecha curto: era a folga inferior dela — até 7rem, a folga
   normal entre secções — que sobrava por cima do título. Enquanto o cartão tinha
   cor de fundo, essa distância fazia sentido; sem ela, lia-se como um vazio. */
.secao:has(> .wrap > .trabalho) { padding-top: 0; }
.secao:has(.beneficios) { padding-bottom: clamp(.75rem, 1.5vw, 1.25rem); }
/* Título ao centro do cartão, por indicação da Carla. O texto alinha ao centro e a
   caixa também vai ao meio: sem margin-inline, o max-width deixava-a encostada à
   esquerda e o centrado não se lia como tal. As três colunas abaixo mantêm-se
   alinhadas à esquerda. O corpo do título vem da regra da página. */
.trabalho__cabeca { text-align: center; }
.trabalho__cabeca h2 { max-width: 34ch; margin-inline: auto; }

/* Uma coluna em ecrã estreito, três em ecrã largo. Cada um é um cartão de
   contorno, por indicação da Carla: fio a toda a volta, o raio dos cartões
   pequenos e nada por dentro — o fundo é o da página. Os fios que antes separavam
   os itens, um entre cada dois, saíram: com o contorno de cada um ficariam a
   dobrar. */
.trabalho__itens { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.trabalho__item {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.trabalho__item h3 { font-size: var(--fs-h4); margin-bottom: .6rem; }
.trabalho__item p { margin: 0; color: var(--texto-suave); font-size: var(--fs-sec); }

@media (min-width: 56rem) {
  .trabalho__itens { grid-template-columns: repeat(3, 1fr); }
}

/* Azul-marinho pedido pela Carla. Sendo um fundo escuro, o texto do cartão
   inverte para branco — o negro do resto do site não se leria aqui. */
.beneficio {
  background: var(--azul-suave); color: var(--branco);
  border-radius: var(--raio);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Imagem no topo do cartão, quando existe. O raio é menor do que o do cartão,
   para os dois arcos não brigarem, e a proporção fixa mantém os seis cartões
   iguais mesmo que as fotografias venham com formatos diferentes. */
/* 21/9 em vez de 16/10: as imagens ficam em faixa, e as duas filas de cartões
   cabem na janela sem obrigar a percorrer a secção. */
.beneficio__imagem {
  aspect-ratio: 21 / 9; border-radius: calc(var(--raio) - 8px);
  overflow: hidden; margin-bottom: .85rem;
  background: rgba(255, 255, 255, .12);
}
.beneficio__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Carrossel dos benefícios ----------
   Transposição do componente de cartões de serviço indicado pela Carla: fila que
   desliza com encaixe, cartão alto de cantos muito arredondados com o número em
   cima e o texto em baixo, gradiente por cartão e cápsulas circulares de avanço.
   Aqui é CSS e um punhado de linhas de JavaScript, e não React: a fila é o
   overflow nativo com scroll-snap, e os botões só empurram o scroll.

   Quantos cartões à vista: um em telemóvel, dois a meio, três em ecrã largo — os
   mesmos patamares do original (basis-full, md:basis-1/2, lg:basis-1/3). */

.carrossel { position: relative; }
.carrossel:focus-visible { outline: 3px solid var(--azul-suave); outline-offset: 6px; }

.carrossel__fila {
  display: flex; gap: 1rem;
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.carrossel__fila::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .carrossel__fila { scroll-behavior: auto; }
}

.carrossel__item {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 48rem) { .carrossel__item { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 68rem) { .carrossel__item { flex-basis: calc((100% - 2rem) / 3); } }

/* Cartão do carrossel: a altura é a mesma para todos, como os 450px do original,
   e o conteúdo distribui-se entre o número, em cima, e o texto, em baixo. */
.beneficio--cartao {
  position: relative; overflow: hidden;
  height: clamp(26rem, 46vw, 30rem);
  display: flex; flex-direction: column;
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  /* Gradiente na família do azul da marca, com o ângulo e o segundo tom a variar
     de cartão para cartão pelo --grad-passo, escrito no marcador. */
  background-image: linear-gradient(
    calc(120deg + var(--grad-passo, 0) * 30deg),
    var(--azul-suave),
    color-mix(in srgb, #2c06ff calc(18% + var(--grad-passo, 0) * 12%), var(--azul-suave))
  );
}
/* Véu que assenta o texto sobre o gradiente e a fotografia, como o overlay do
   componente. */
.beneficio--cartao::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 0, 86, .55), transparent 55%);
}
.beneficio--cartao > * { position: relative; z-index: 1; }

/* O número em parênteses do componente de origem saiu: a ordem dos benefícios
   não é informação, e a fotografia passa a ocupar a altura toda até ao texto. */
.beneficio--cartao .beneficio__imagem {
  aspect-ratio: auto; flex: 1 1 auto; min-height: 0;
  margin-bottom: 1.25rem;
}

/* Título em maiúsculas e espaçado, como no componente. */
.beneficio__fim { flex: 0 0 auto; }
.beneficio--cartao h3 {
  font-size: var(--fs-body); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: .5rem;
}

/* As duas cápsulas circulares, juntas e ao centro, abaixo da fila. Antes ficavam
   translúcidas sobre os bordos e liam-se mal: passam a cápsulas cheias no azul da
   marca, com a seta branca. */
.carrossel__navegacao {
  display: flex; justify-content: center; gap: .75rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.carrossel__navegacao[hidden] { display: none; }

.carrossel__seta {
  width: 2.875rem; height: 2.875rem; border-radius: 999px;
  display: grid; place-items: center;
  border: 0; cursor: pointer; padding: 0;
  background: var(--azul-suave); color: var(--branco);
  transition: background-color .18s ease, transform .18s ease, opacity .18s ease;
}
.carrossel__seta:hover { background: #2c06ff; transform: scale(1.06); }
.carrossel__seta svg { width: 1.25rem; height: 1.25rem; display: block; }
/* No fim da fila o botão fica inerte, em vez de desaparecer: a posição dos dois
   não salta. */
.carrossel__seta[disabled] { opacity: .3; cursor: default; }
.carrossel__seta[disabled]:hover { background: var(--azul-suave); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .carrossel__seta, .carrossel__seta:hover { transition: none; transform: none; }
}

/* Arrasto com o rato: a fila anuncia-se agarrável, e o que se arrasta não
   seleciona texto nem levanta a imagem-fantasma do browser. */
.js .carrossel__fila { cursor: grab; }
.js .carrossel__fila[data-arrastar="true"] {
  cursor: grabbing; user-select: none;
  /* Durante o arrasto o encaixe fica de lado: a fila acompanha o rato e só
     encaixa quando se larga. */
  scroll-snap-type: none; scroll-behavior: auto;
}
.js .carrossel__fila[data-arrastar="true"] img { pointer-events: none; }
.carrossel__fila img { -webkit-user-drag: none; }

/* Benefícios sem fotografia: os mesmos cartões, mais baixos, num bloco à parte
   sob o título "Mais benefícios". */
/* ---------- Cultura: um só corpo para os títulos das secções ----------
   Os três títulos desta página — o dos benefícios, o "O que nos define" e o
   "Percursos de quem cá está" — vinham de regras diferentes e tinham três escalas
   diferentes. Passam a ter a mesma, por indicação da Carla.

   O h1 do hero fica de fora: é o título da página, não de uma secção, e assenta
   sobre o vídeo em ecrã inteiro — ao mesmo corpo dos h2 deixaria de se distinguir.

   A regra vive na página, e não nos componentes, porque cada um deles é usado
   noutros sítios do site com o corpo que lá lhes serve. */
.pagina-cultura .painel-beneficios h2,
.pagina-cultura .trabalho__cabeca h2,
.pagina-cultura .secao__cabeca h2 {
  font-size: var(--fs-h2);
}

/* ---------- Painel dos benefícios ----------
   Cartão único em azul-milho, dividido em dois: fotografia à esquerda, texto à
   direita (indicação da Carla, 30/07/2026). É a mesma cor da faixa final do site,
   e como é claro tudo o que assenta nele passa a negro.

   O trilho (.beneficios) é o percurso de scroll: ganha uma janela por benefício
   quando o módulo entra em ação (--n) e o cartão fica sticky dentro dele. Sem
   JavaScript, sem --n e com movimento reduzido, o trilho vale o que o cartão vale
   e tudo fica em fluxo — que é o recurso legível. */

.beneficios { position: relative; }
/* A altura só existe no modo com pin: a janela do palco mais uma por benefício.
   A primeira é o que o cartão ocupa enquanto está preso; as outras são o
   percurso que passa as fotografias. */
.beneficios--pin { height: calc((var(--n, 1) + 1) * 100svh); }
/* O palco prende-se abaixo da barra do cabeçalho, e não ao topo da janela: a
   navbar é sticky e opaca, portanto o espaço que se vê começa aos 5rem. O palco
   vale esse espaço e o cartão fica centrado nele — assim para a meio do que está
   à vista, e não a meio da janela, que ficava alto. O 5rem é a altura da barra, o
   mesmo desconto que .quadro--cheio faz. */
.beneficios--pin .beneficios__palco {
  position: sticky; top: 5rem;
  height: calc(100svh - 5rem);
  display: flex; align-items: center;
}

.painel-beneficios {
  background: var(--milho); color: #000;
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  /* Uma coluna em ecrã estreito: a fotografia por cima do texto. */
  grid-template-columns: 1fr;
  align-items: center;
}
/* A fotografia leva mais largura do que o texto (indicação da Carla): a coluna da
   esquerda vale 1,35 da direita. O texto continua a ter largura suficiente — os
   títulos e as descrições dos benefícios são curtos. */
@media (min-width: 62rem) {
  .painel-beneficios { grid-template-columns: 1.35fr 1fr; }
}
/* Cartão mais alto, por indicação da Carla: ocupa quase a janela toda enquanto
   está preso, descontadas as folgas de cima e de baixo. É mínimo e não altura
   fixa — se um texto crescer, o cartão acompanha. */
.beneficios--pin .painel-beneficios {
  width: 100%;
  min-height: min(50rem, calc(100svh - 5rem - var(--margem-painel) * 2));
  align-content: center;
}
/* Em duas colunas a fotografia acompanha a altura do cartão, em vez de manter a
   proporção fixa: com o cartão alto, sobrava fundo azul ao lado do texto. */
@media (min-width: 62rem) {
  .beneficios--pin .painel-beneficios { align-items: stretch; }
  /* A fotografia ocupa a altura toda do cartão, deixando de cada lado a mesma
     folga que tem à esquerda e à direita (indicação da Carla): daí a folga de cima
     e de baixo do cartão igualar a das laterais, e a imagem não levar margem
     negativa nenhuma.
     A altura do cartão não muda: quem a manda é o min-height acima. */
  .beneficios--pin .painel-beneficios {
    padding-block: clamp(1.25rem, 3vw, 2.5rem);
    /* A linha da grelha estica-se à altura toda do cartão, em vez de ficar do
       tamanho do conteúdo e centrada: sem isto a fotografia valia o que a coluna
       do texto valia e a folga que sobrava ficava vazia por cima e por baixo. O
       texto passa a centrar-se dentro da sua coluna (regra seguinte). */
    align-content: stretch;
  }
  /* O título e o texto de abertura assentam no topo da coluna e alinham à direita
     (indicação da Carla); a descrição do benefício em foco fica centrada no que
     sobra, por margin-block: auto, para não saltar de sítio a cada mudança. */
  .beneficios--pin .painel-beneficios__texto {
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .beneficios--pin .painel-beneficios h2,
  .beneficios--pin .painel-beneficios__intro {
    text-align: right;
    /* O intro tem max-width: a caixa também tem de ir para a direita, senão o
       texto alinhava à direita de uma caixa encostada à esquerda. */
    margin-left: auto;
  }
  /* A descrição desce para o fundo da coluna, para acabar à mesma altura que a
     base da fotografia ao lado — abaixo dela ficam só os traços da série. A folga
     de topo é automática, e não uma medida: a coluna do texto não tem sempre a
     mesma altura de conteúdo. */
  .beneficios--pin .beneficios__descricoes { margin-top: auto; margin-bottom: 0; }
  .beneficios--pin .painel-beneficios__media { aspect-ratio: auto; min-height: 22rem; }
}

.painel-beneficios h2 { color: #000; }
/* O texto de abertura usa --texto-suave, um cinzento pensado para fundo branco:
   sobre o azul fica lavado. */
.painel-beneficios__intro {
  color: rgba(0, 0, 0, .72);
  margin-top: .75rem; max-width: 42ch;
}

/* Coluna da fotografia. As imagens estão empilhadas no mesmo lugar e trocam por
   opacidade; a moldura mantém a proporção, para a troca não mexer na altura do
   cartão. O raio é o menor, para os dois arcos não brigarem. */
.painel-beneficios__media {
  position: relative;
  border-radius: var(--raio); overflow: hidden;
  background: rgba(0, 0, 0, .12);
  aspect-ratio: 4 / 3;
}
/* .beneficios__foto é a moldura de uma fotografia, e não a fotografia: dentro
   dela está a caixa com a proporção do ficheiro (.beneficios__enquadra), que é o
   que permite marcar um ponto sobre a imagem sem o corte o deslocar. */
.beneficios__foto {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  overflow: hidden;
}
/* A caixa cresce até tapar a moldura — é o que o object-fit: cover fazia — e o
   que sobra sai para fora, onde a moldura o corta. */
.beneficios__enquadra {
  position: relative;
  aspect-ratio: var(--proporcao, 16 / 9);
  height: 100%; width: auto;
  min-width: 100%; min-height: 100%;
}
.beneficios__enquadra > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Que lado da fotografia fica à vista quando o corte é lateral. Sem isto o corte
   é ao centro, que é o que se quer nas restantes. */
.beneficios__foto--esquerda { justify-items: start; }
.beneficios__foto--direita { justify-items: end; }

/* No modo com pin as fotografias sobrepõem-se e só a ativa se vê. Fora dele
   ficam em fluxo, uma após a outra, e a moldura deixa de ter proporção fixa. */
/* As fotografias que não estão em foco levam visibility: hidden, e não só
   opacity: 0. Estando todas empilhadas no mesmo lugar, a última do documento
   ficaria por cima e apanhava o rato destinado ao marcador da que se vê; e o
   marcador com lista, que é focável pelo teclado, seria alcançável estando
   invisível. A visibilidade resolve as duas coisas, e a transição continua a ser
   só da opacidade. */
.beneficios--pin .painel-beneficios__media > .beneficios__foto {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.beneficios--pin .beneficios__foto.ativa { opacity: 1; visibility: visible; }
.beneficios:not(.beneficios--pin) .painel-beneficios__media { aspect-ratio: auto; display: grid; gap: .5rem; }
/* Em fluxo a moldura não tem altura imposta: é a fotografia que a dá. */
.beneficios:not(.beneficios--pin) .beneficios__foto { height: auto; }
.beneficios:not(.beneficios--pin) .beneficios__enquadra { height: auto; width: 100%; }

/* ---------- Marcador sobre a fotografia ----------
   Assinala um ponto da imagem — o edifício da Visualforma, na fotografia da
   localização. O anel fica centrado nas coordenadas e o rótulo sai para o lado
   direito, ligado a ele por um traço. As medidas são em rem e não em
   percentagem: o anel não deve engordar com o tamanho da moldura. */
.beneficios__marca {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .5rem;
  pointer-events: none;
  /* Cor do marcador: uma das quatro das áreas, escolhida nos dados. O azul é o
     valor de recurso, como em --cor-area. */
  --cor-marca: var(--azul);
  /* Diâmetro do anel. Cada marcador pode pedir outro — ver 'anel', em
     data/historias.php: o edifício da Visualforma ocupa mais fotografia do que
     um ponto solto, e o anel tem de o apanhar por inteiro. */
  --anel: 7rem;
}
.beneficios__marca-anel {
  width: var(--anel); height: var(--anel); flex: 0 0 auto;
  border-radius: 50%;
  /* O anel é da cor do marcador, com um fio branco por fora: sobre uma vista
     aérea há telhados claros e sombras, e a cor sozinha perder-se-ia nos claros.
     Por dentro, um véu da mesma cor destaca o edifício do resto da fotografia. */
  box-shadow: inset 0 0 0 3px var(--cor-marca), 0 0 0 2px rgba(255, 255, 255, .9);
  background: color-mix(in srgb, var(--cor-marca) 18%, transparent);
}
/* A etiqueta segue as cápsulas do site: cor cheia, texto branco, cantos
   redondos. O traço de ligação ao anel é a borda esquerda, prolongada pelo
   ::before, e passou a ser da cor da etiqueta. */
.beneficios__marca-rotulo {
  position: relative;
  background: var(--cor-marca); color: var(--branco);
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-sec); letter-spacing: -.02em; line-height: 1;
  padding: .5rem .8rem; border-radius: 999px;
  white-space: nowrap;
  /* Um fio branco em volta, pelo mesmo motivo do anel: a etiqueta assenta sobre
     fotografia, que tem zonas da própria cor. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}
.beneficios__marca-rotulo::before {
  content: ""; position: absolute;
  right: 100%; top: 50%;
  width: .5rem; height: 3px;
  background: var(--cor-marca);
}
/* Etiqueta do lado esquerdo do anel: a ordem dos dois inverte-se e o traço de
   ligação passa para o outro lado da etiqueta. Serve para os pontos junto à
   margem direita da fotografia, onde a etiqueta não teria espaço. */
.beneficios__marca--esquerda { flex-direction: row-reverse; }
.beneficios__marca--esquerda .beneficios__marca-rotulo::before { right: auto; left: 100%; }

/* ---------- Lista de serviços de um marcador ----------
   Abre ao passar o rato pela etiqueta, e também quando ela recebe foco pelo
   teclado. O marcador com lista é o único que recebe rato — os outros continuam a
   deixar passar o ponteiro. */
.beneficios__marca--com-lista { pointer-events: auto; cursor: default; }
/* Sinal de que a etiqueta tem mais por baixo: o triângulo dos menus do site, e
   não um sublinhado picotado. Roda meia volta com a lista aberta. */
.beneficios__marca--com-lista .beneficios__marca-rotulo::after {
  content: ""; display: inline-block;
  margin-left: .45rem; vertical-align: middle;
  border: .3rem solid transparent;
  border-top-color: currentColor;
  /* O triângulo do CSS assenta na base da caixa: sobe um pouco para ficar à
     altura da letra. */
  transform: translateY(.15rem);
  transition: transform .25s ease;
}
.beneficios__marca--com-lista:hover .beneficios__marca-rotulo::after,
.beneficios__marca--com-lista:focus-within .beneficios__marca-rotulo::after {
  transform: translateY(-.15rem) rotate(180deg);
}
.beneficios__marca-lista {
  /* Sai do fluxo da etiqueta: assenta por baixo dela, alinhada pelo mesmo lado. */
  position: absolute; top: calc(100% + .6rem); right: 0;
  display: grid; gap: .55rem;
  width: max-content; max-width: 15rem;
  padding: .9rem 1rem;
  /* Cartão claro, como os do resto do site: superfície branca, o raio dos cartões
     e uma barra da cor do marcador no topo, que é o que liga a lista à etiqueta.
     O texto volta ao negro do site, que sobre branco é o que se lê melhor. */
  background: var(--branco); color: var(--texto);
  border-radius: var(--raio);
  border-top: 4px solid var(--cor-marca);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
  /* Escondida por opacidade, e não por display: assim continua no documento para
     quem usa leitor de ecrã, que não tem rato com que a abrir. */
  opacity: 0; transform: translateY(-.25rem);
  transition: opacity .25s ease, transform .25s ease;
}
/* Do lado direito do anel a etiqueta está encostada à esquerda: a lista segue-a. */
.beneficios__marca:not(.beneficios__marca--esquerda) .beneficios__marca-lista {
  right: auto; left: 0;
}
/* Ponto na metade de baixo da fotografia: a lista abre para cima, senão a moldura
   cortava-a. O deslizar de entrada inverte-se com ela. */
.beneficios__marca--lista-acima .beneficios__marca-lista {
  top: auto; bottom: calc(100% + .6rem);
  transform: translateY(.25rem);
}
.beneficios__marca--com-lista:hover .beneficios__marca-lista,
.beneficios__marca--com-lista:focus-visible .beneficios__marca-lista,
.beneficios__marca--com-lista:focus-within .beneficios__marca-lista {
  opacity: 1; transform: none;
}
/* Uma linha por serviço, com o símbolo na cor do marcador e o nome em negro.
   Entre linhas fica um fio, como nos cartões de detalhe do site. */
.beneficios__marca-servico {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-sec); line-height: 1.25; letter-spacing: -.01em;
}
.beneficios__marca-servico + .beneficios__marca-servico {
  border-top: 1px solid var(--linha);
  padding-top: .55rem;
}
.beneficios__marca-servico svg {
  width: 1.15rem; height: 1.15rem; flex: 0 0 auto;
  color: var(--cor-marca);
}

/* Com movimento reduzido a lista aparece sem deslizar. */
@media (prefers-reduced-motion: reduce) {
  .beneficios__marca-lista { transition: none; transform: none; }
}

/* ---------- Rumos nos cantos da fotografia ----------
   O que fica fora do enquadramento: o aeroporto, a praia, o hospital e o centro,
   com o tempo de carro e a seta a apontar para o canto por onde se sai.

   Assentam na moldura (.beneficios__foto), e não na caixa da imagem: sendo os
   cantos do que se vê, não podem depender do corte. */
.beneficios__foto { position: relative; }
.beneficios__rumo {
  position: absolute;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .8rem;
  /* Cápsula clara sobre a fotografia, como as do site, com o mesmo negro do
     corpo do texto. A seta fica na cor do azul da casa. */
  background: rgba(255, 255, 255, .93); color: var(--texto);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  font-family: var(--display); letter-spacing: -.01em;
  max-width: min(15rem, 62%);
}
.beneficios__rumo svg {
  width: 1.35rem; height: 1.35rem; flex: 0 0 auto;
  color: var(--azul);
}
.beneficios__rumo-itens { display: grid; gap: .2rem; }
.beneficios__rumo-item { font-size: var(--fs-cap); line-height: 1.25; font-weight: 600; }
/* O tempo é o que se procura primeiro: fica mais escuro e mais pesado do que o
   nome do sítio. */
.beneficios__rumo-item strong { font-weight: 800; }

/* Um canto por rumo, com a seta rodada para ele. A seta do ficheiro aponta para
   cima e para a direita, que é o nordeste: as outras três saem daí. */
.beneficios__rumo--nordeste { top: .85rem; right: .85rem; }
.beneficios__rumo--noroeste { top: .85rem; left: .85rem; }
.beneficios__rumo--noroeste svg { transform: rotate(-90deg); }
.beneficios__rumo--sudeste { bottom: .85rem; right: .85rem; }
.beneficios__rumo--sudeste svg { transform: rotate(90deg); }
.beneficios__rumo--sudoeste { bottom: .85rem; left: .85rem; }
.beneficios__rumo--sudoeste svg { transform: rotate(180deg); }
/* Nos cantos da esquerda a seta vem primeiro na leitura; nos da direita fica do
   lado de fora, junto à margem por onde se sai. */
.beneficios__rumo--nordeste,
.beneficios__rumo--sudeste { flex-direction: row-reverse; }

/* Em ecrã estreito o cartão é mais pequeno e as quatro cápsulas competiriam com a
   fotografia: encolhem e sobem para junto das margens. */
@media (max-width: 48rem) {
  .beneficios__rumo { padding: .4rem .6rem; gap: .4rem; max-width: 70%; }
  .beneficios__rumo svg { width: 1.1rem; height: 1.1rem; }
  /* O corpo do item já recolhe sozinho por --fs-cap. */
}

/* Descrição do benefício em foco, por baixo do texto de abertura. A altura é
   reservada pela mais alta das descrições — todas ocupam a mesma célula da
   grelha —, senão o texto ao lado saltava a cada mudança. */
.beneficios__descricoes { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.beneficios--pin .beneficios__descricoes { display: grid; }
.beneficios--pin .beneficios__descricao {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  /* Fora de foco não recebe rato nem tabulação, mesmo estando no mesmo lugar. */
  pointer-events: none;
}
.beneficios--pin .beneficios__descricao.ativa {
  opacity: 1; transform: none; pointer-events: auto;
}
/* Em fluxo (sem pin) as descrições leem-se seguidas. */
.beneficios:not(.beneficios--pin) .beneficios__descricao + .beneficios__descricao { margin-top: 1.25rem; }
.beneficios__descricao h3 {
  font-size: var(--fs-h3);
  margin-bottom: .5rem; color: #000;
}
.beneficios__descricao p { color: rgba(0, 0, 0, .78); max-width: 46ch; }

/* Onde vamos na série: um traço por benefício, o em foco mais escuro e mais
   largo. Só aparece no modo com pin, onde há uma série para percorrer. */
.beneficios__pontos {
  list-style: none; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: 0;
  display: none; gap: .4rem;
}
.beneficios--pin .beneficios__pontos { display: flex; }
.beneficios__ponto {
  width: 1.5rem; height: .25rem; border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  transition: background-color .3s ease, width .3s ease;
}
.beneficios__ponto.ativo { background: #000; width: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  .beneficios__foto, .beneficios__descricao, .beneficios__ponto { transition: none; }
}

/* As regras do bloco "Mais benefícios" saíram com ele, em 30/07/2026: eram
   .mais-beneficios, .mais-beneficios__titulo e .beneficio--simples. */

/* h4 quando o cartão vive dentro de uma secção que já tem h2 e h3 — o nível
   muda, o aspeto é o mesmo. */
.beneficio h3, .beneficio h4 { font-size: var(--fs-h4); margin-bottom: .6rem; color: var(--branco); }
.beneficio p { font-size: var(--fs-sec); color: rgba(255, 255, 255, .78); }

/* ---------- Processo (aqui a ordem é informação) ---------- */

.processo { list-style: none; margin: 0; padding: 0; counter-reset: fase; display: grid; gap: .75rem; }
.processo li {
  counter-increment: fase;
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem;
  background: rgba(255, 255, 255, .12); border-radius: var(--raio);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.processo li::before {
  content: counter(fase, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: var(--fs-h4);
  color: rgba(255, 255, 255, .55);
}
.processo h3 { font-size: var(--fs-h4); margin-bottom: .4rem; }
.processo p { color: rgba(255, 255, 255, .86); }

/* ---------- Variante em linha do tempo horizontal ----------
   As quatro fases lado a lado, cada uma com o seu número e uma linha a ligá-la
   à seguinte. Aqui a numeração é informação e não decoração: as fases são uma
   sequência e a ordem é o que o candidato precisa de saber. */

.processo--linha {
  --passo-gap: clamp(1.25rem, 2.5vw, 2rem);
  --passo-medalha: 2.75rem;
  gap: clamp(1.75rem, 3vw, 2.25rem) var(--passo-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .processo--linha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .processo--linha { grid-template-columns: repeat(4, 1fr); } }

.processo--linha li {
  display: block; background: none; border-radius: 0; padding: 0;
  position: relative;
  padding-top: calc(var(--passo-medalha) + 1.1rem);
}

/* A medalha com o número da fase. */
.processo--linha li::before {
  position: absolute; top: 0; left: 0;
  width: var(--passo-medalha); height: var(--passo-medalha);
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--branco); color: var(--cor-area);
  font-size: var(--fs-body);
}

/* A linha que liga uma fase à seguinte. Só existe quando as quatro estão numa
   só fila: em duas colunas ficaria a apontar para o vazio no fim de cada fila. */
@media (min-width: 68rem) {
  .processo--linha li::after {
    content: ''; position: absolute;
    top: calc(var(--passo-medalha) / 2 - 1px);
    left: calc(var(--passo-medalha) + .6rem);
    right: calc(var(--passo-gap) * -1 - .6rem);
    height: 2px; background: rgba(255, 255, 255, .35);
  }
  .processo--linha li:last-child::after { content: none; }
}

.processo--linha h3 { font-size: var(--fs-h4); margin-bottom: .45rem; }
.processo--linha p { font-size: var(--fs-sec); }

/* =========================================================================
   Perguntas frequentes
   Acordeão em <details> nativo: abre e fecha sem JavaScript, é navegável por
   teclado e os leitores de ecrã anunciam o estado. As perguntas agrupam-se por
   fase do processo, com uma régua a separá-las, à maneira da página de
   referência.
   ========================================================================= */

.faq { max-width: 62rem; }
.faq + .faq { margin-top: clamp(2.5rem, 5vw, 4rem); }

.faq__grupo {
  font-size: var(--fs-h3);
  padding-bottom: 1rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--linha-clara);
}

.faq__item { border-bottom: 1px solid var(--linha); }

.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-body);
  padding: 1.15rem 0;
  transition: color .18s ease;
}
/* Remove o triângulo nativo em ambos os motores. */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }
.faq__item summary:hover { color: var(--azul-suave); }

/* Sinal de mais que passa a menos quando a resposta está aberta. */
.faq__item summary::after {
  content: '+';
  font-weight: 400; font-size: var(--fs-h4); line-height: 1;
  color: var(--texto-suave); flex: 0 0 auto;
  transition: transform .2s ease, color .18s ease;
}
.faq__item[open] summary::after { content: '−'; color: var(--texto); }

.faq__item p {
  color: var(--texto-suave); max-width: 68ch;
  padding-bottom: 1.35rem; margin: 0;
}

/* ---------- Vagas ---------- */

/* Secção que se aproxima do cabeçalho acima dela: na lista de vagas, os
   filtros seguem o subtítulo de perto, porque são a continuação da mesma
   ideia e não uma secção nova. */
.secao--colada { padding-top: clamp(.5rem, 1vw, .75rem); }
/* A antiga .secao--rente saiu: fazia o mesmo que a .secao--fim-curto, definida
   junto à .secao, e a bússola passou a usar essa. */

.filtros {
  display: grid; gap: 1rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--superficie); border-radius: var(--raio-g);
  margin-bottom: 2rem;
}
.campo { display: grid; gap: .4rem; }
.campo label,
.campo > span:first-child {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-sec); color: var(--texto);
}
/* Campos brancos e de contorno marcado, e não cinzento sobre cinzento: sobre o
   painel dos filtros (--superficie, #f4f4f4) o cinzento dos campos (--superficie-2,
   #ebebeb) com um fio a 14% de preto quase não se distinguia do fundo, e não se via
   onde começava e acabava cada campo. O branco separa-os do painel e o fio mais
   escuro desenha-lhes a forma. */
.campo input, .campo select, .campo textarea {
  font-family: var(--corpo); font-size: var(--fs-body); font-weight: 400;
  padding: .8rem 1.1rem; border: 1px solid var(--linha-clara); border-radius: 999px;
  background: var(--branco); color: var(--texto); width: 100%;
}
/* O texto de sugestão do campo de pesquisa continua esbatido, mas sobre branco
   ganha o contraste que sobre o cinzento não tinha. */
.campo input::placeholder { color: var(--texto-suave); }
.campo textarea { border-radius: var(--raio); min-height: 9rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: #000; outline: none; }
.campo__nota { font-size: var(--fs-sec); color: var(--texto-suave); }

/* ---------- Formulário em cartão escuro ----------
   O formulário da candidatura vive num cartão de azul-marinho, o mesmo dos
   benefícios. Como o resto do site é claro, tudo o que está dentro inverte:
   rótulos e texto a branco, campos em branco com texto negro, notas a branco
   esbatido. */
.form--cartao {
  background: var(--azul-suave); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.form--cartao .campo label,
.form--cartao .campo > span:first-child { color: var(--branco); }
.form--cartao .campo input,
.form--cartao .campo select,
.form--cartao .campo textarea {
  background: var(--branco); color: #000;
  border-color: rgba(255, 255, 255, .35);
}
.form--cartao .campo input::placeholder,
.form--cartao .campo textarea::placeholder { color: rgba(0, 0, 0, .45); }
.form--cartao .campo input:focus,
.form--cartao .campo select:focus,
.form--cartao .campo textarea:focus { border-color: var(--branco); }
.form--cartao .campo__nota { color: rgba(255, 255, 255, .78); }
/* O erro é escuro na página branca; sobre o azul-marinho precisa de um tom
   claro. */
.form--cartao .campo__erro { color: #ffb4a8; }
.form--cartao a { color: var(--branco); text-decoration: underline; }
/* O botão principal é negro na página branca; aqui inverte para branco. */
.form--cartao .botao { background: var(--branco); color: #000; }
.form--cartao :focus-visible { outline-color: var(--branco); }
.campo__erro { font-size: var(--fs-sec); color: #b3261e; font-weight: 700; }
.campo--invalido input, .campo--invalido select, .campo--invalido textarea { border-color: #b3261e; }
/* O <select> em falta está oculto e é o gatilho do menu próprio que se vê: é ele
   que tem de ficar marcado, senão o campo por preencher não se distinguia dos
   restantes. */
.campo--invalido .escolha__gatilho { border-color: #b3261e; }

/* ---------- Menu de escolha próprio ----------
   O painel que um <select> nativo abre é desenhado pelo sistema operativo e não
   aceita CSS. Para os filtros seguirem o desenho do site, o JavaScript constrói
   este menu e esconde o <select>, que continua no DOM como fonte de verdade —
   assim o formulário, os filtros e a navegação sem JavaScript não mudam. */

.escolha { position: relative; }

/* Igual aos campos ao lado: branco e de fio marcado, para os quatro filtros se
   lerem como uma linha de campos e não como manchas de cinzento. */
.escolha__gatilho {
  width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-family: var(--corpo); font-size: var(--fs-body); font-weight: 400;
  padding: .8rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--linha-clara); background: var(--branco); color: var(--texto);
  transition: border-color .18s ease;
}
.escolha__gatilho:hover { border-color: #000; }
.escolha__gatilho[aria-expanded="true"] { border-color: #000; }

/* Dentro do cartão de azul-marinho o gatilho acompanha os campos ao lado:
   branco com texto negro, e não o cinza da página. */
.form--cartao .escolha__gatilho {
  background: var(--branco); color: #000; border-color: rgba(255, 255, 255, .35);
}
.form--cartao .escolha__gatilho[aria-expanded="true"] { border-color: var(--branco); }

.escolha__seta { transition: transform .2s ease; font-size: .7em; opacity: .7; }
.escolha__gatilho[aria-expanded="true"] .escolha__seta { transform: rotate(180deg); }

.escolha__lista {
  position: absolute; z-index: 40; top: calc(100% + .4rem); left: 0; right: 0;
  margin: 0; padding: .4rem; list-style: none;
  max-height: 16rem; overflow-y: auto;
  /* Branca, como os campos: sobre o painel cinzento dos filtros a lista cinzenta
     lia-se como uma continuação do painel, e não como um menu por cima dele. */
  background: var(--branco); color: var(--texto);
  border: 1px solid var(--linha-clara); border-radius: var(--raio);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
.escolha__lista[hidden] { display: none; }

.escolha__opcao {
  padding: .6rem .85rem; border-radius: 999px; cursor: pointer;
  font-size: var(--fs-body); line-height: 1.3;
}
.escolha__opcao:hover,
.escolha__opcao[data-realce="true"] { background: rgba(0, 0, 0, .07); }
.escolha__opcao[aria-selected="true"] {
  background: #000; color: var(--branco);
  font-family: var(--display); font-weight: 700;
}

.contagem { font-family: var(--display); font-weight: 800; font-size: var(--fs-body); margin-bottom: 1rem; display: block; }

/* Cartões de vaga: brancos e de texto escuro, para que os logotipos das marcas
   assentem no fundo claro para que foram desenhados. Agora que a tela também é
   branca, é o fio de contorno que separa o cartão da página. */
.vaga-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.vaga-item > a {
  display: grid; gap: 1rem 2rem; text-decoration: none;
  background: var(--branco); color: #000; border-radius: var(--raio-g);
  border: 1px solid var(--linha);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}
.secao--nevoa .vaga-item > a { background: var(--branco); }
@media (min-width: 48rem) {
  .vaga-item > a { grid-template-columns: 1fr auto; align-items: center; }
}
.vaga-item > a:hover,
.secao--nevoa .vaga-item > a:hover { transform: translateY(-3px); background: #f2f2f2; }
.vaga-item h3 { font-size: var(--fs-h3); margin-bottom: .5rem; color: #000; }
.vaga-item__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.vaga-item__ref { font-family: var(--display); font-weight: 700; font-size: var(--fs-cap); color: rgba(0, 0, 0, .6); }
.vaga-item p { font-size: var(--fs-body); color: rgba(0, 0, 0, .68); }

/* Chips e botão dentro do cartão: contorno e texto escuros. */
.vaga-item .chip { border-color: rgba(0, 0, 0, .22); color: #000; }
.vaga-item .chip--cheio { background: #000; border-color: #000; color: var(--branco); }
.vaga-item .botao--fantasma { color: #000; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25); }
.vaga-item .botao--fantasma:hover {
  background: rgba(0, 0, 0, .07); box-shadow: inset 0 0 0 1.5px #000;
}

/* Logotipo da marca que recruta, no lugar do eyebrow em texto. Como o cartão
   já é branco, o logotipo assenta diretamente nele, sem placa. */
.vaga-item__marca { display: inline-flex; align-items: center; margin-bottom: .85rem; }
.vaga-item__marca img { height: 1.5rem; width: auto; max-width: 11rem; object-fit: contain; }

.vazio {
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
  background: var(--superficie); border-radius: var(--raio-g);
}
.vazio h3 { font-size: var(--fs-h3); margin-bottom: .75rem; }
.vazio p { margin-inline: auto; color: var(--texto-suave); }

/* ---------- Detalhe de vaga ---------- */

.detalhe { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 62rem) { .detalhe { grid-template-columns: 1.5fr .85fr; align-items: start; } }

.bloco + .bloco { margin-top: clamp(2rem, 4vw, 3rem); }
.bloco h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.bloco p { color: var(--texto-suave); }
.bloco ul { margin: 0; padding-left: 1.25rem; color: var(--texto-suave); }
.bloco li { margin-bottom: .6rem; }

/* Nota de proteção de dados: texto legal, em letra menor. O max-width de 60ch
   dos parágrafos deixava a caixa demasiado estreita para um bloco corrido,
   por isso este ocupa toda a largura da coluna. */
.bloco__rgpd { font-size: var(--fs-sec); max-width: none; }

.lateral {
  background: var(--superficie); border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: sticky; top: 6.5rem;
  display: grid; gap: 1.5rem;
}
.lateral p, .lateral ul, .lateral ol { color: var(--texto-suave); }
/* Os rótulos deste cartão vinham no azul das áreas (o .olho herda --cor-area) e
   sobre o fundo escuro do cartão liam-se mal. Passam a branco, como os títulos. */
.lateral .olho { color: var(--texto); }
.ficha { margin: 0; display: grid; gap: .85rem; }
.ficha div { display: grid; gap: .1rem; }
.ficha dt { font-family: var(--display); font-weight: 700; font-size: var(--fs-cap); color: var(--texto-suave); }
.ficha dd { margin: 0; font-weight: 600; }

.migalhas { font-size: var(--fs-sec); margin-bottom: 1.5rem; color: var(--texto-suave); }
.migalhas a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Faixa final ---------- */

/* Faixa final: cartão de largura total, com a mesma folga e o mesmo raio dos
   painéis das áreas. */
.faixa {
  background: var(--milho); color: #000;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  margin: var(--margem-painel);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.faixa h2 { font-size: var(--fs-display); }
/* Faixa com título mais curto de escala: usada quando a frase é longa e o
   tamanho de origem a fazia ocupar meio ecrã. */
.faixa--titulo-medio h2 { font-size: var(--fs-h1); }
.faixa p { margin-top: 1.25rem; font-size: var(--fs-lead); color: rgba(0, 0, 0, .72); }
.faixa__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.faixa .botao { background: #000; color: var(--branco); }
.faixa .botao--fantasma {
  background: transparent; color: #000 !important;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .3);
}
.faixa .botao--fantasma:hover { background: rgba(0, 0, 0, .08); }

/* ---------- Rodapé ----------
   Réplica do rodapé de visualforma.pt (indicação da Carla, 30/07/2026): as
   classes, as cores (#fcfcfc, #fff, #000561, fio #d0d5dd), a tipografia (Outfit)
   e as medidas são as do institucional. É a única zona do site onde as Brand
   Guidelines se aplicam, e por isso o azul da marca só aqui aparece.
   Duas cores repetidas em vez de variáveis: são as do institucional, e não as
   deste site — se mudarem lá, mudam aqui e em mais sítio nenhum. */

.footer {
  border-top: 1px solid #d0d5dd;
  overflow: hidden;
  font-family: 'Outfit', system-ui, sans-serif;
  /* Mobile: uma coluna. A partir de 60rem passa às duas faixas do institucional. */
  display: grid; grid-template-columns: 1fr;
  max-width: 120rem; margin-inline: auto;
}
.footer a { text-decoration: none; color: inherit; }

/* Faixa da marca, à esquerda. */
.footer-header {
  position: relative; background: #fcfcfc;
  padding: clamp(2.5rem, 5vw, 4.6875rem) clamp(1.25rem, 3vw, 3rem) clamp(2.5rem, 6vw, 6.25rem);
}
.footer-header-logo img { display: block; width: min(19rem, 100%); height: auto; margin-bottom: 1rem; }
.footer-header-logo-description p,
.footer-header-contacts p,
.footer-header-address {
  margin-block: .25rem; font-size: var(--fs-lead); font-weight: 500;
  color: rgba(0, 5, 97, .5); max-width: max-content;
}
.footer-header-contacts { font-style: normal; margin-top: 2.5rem; }
.footer-header-contacts span { display: block; font-weight: 500; color: rgba(0, 5, 97, .5); font-size: var(--fs-sec); }
.footer-header-contacts a:hover { color: #494989; transition: color .2s; }
/* Folga maior do que os 2rem do institucional: aqui a morada vem logo depois do
   email, e sem este ar os dois blocos leem-se como um só. */
/* A morada é um <p> dentro de .footer-header-contacts, portanto o seletor tem de
   ser mais específico do que a regra `.footer-header-contacts p` acima — senão o
   margin-block dela ganha e esta folga não chega a aplicar-se. */
.footer-header-contacts .footer-header-address { margin-top: 2.5rem; line-height: 1.5; }
.footer-header-address a:hover { color: #494989; transition: color .2s; }

/* Colunas de ligações, à direita. */
.footer-links { background: #fff; display: flex; flex-direction: column; padding-top: 3.5rem; }
.footer-util-links-container {
  display: grid; gap: 3rem 6rem; justify-content: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.125rem), max-content));
  padding-inline: clamp(1.25rem, 3vw, 2rem); margin-bottom: 2rem;
}
.util-links-group { max-width: max-content; }
.util-links-group-title {
  font-size: var(--fs-h4); font-weight: 500; color: #000561;
  max-width: 13.125rem; margin-bottom: 1.25rem; letter-spacing: 0;
}
.util-links-group-links {
  display: flex; flex-direction: column; gap: .75rem;
  font-size: var(--fs-lead); font-weight: 300; color: #000; max-width: 13.125rem;
}
.util-links-group-links a { transition: text-shadow .2s ease; }
.util-links-group-links a:hover { text-shadow: 0 0 1px currentColor; }

/* Redes sociais: círculos, como no institucional. */
.footer-social-links {
  list-style: none; margin: 0 0 2rem; padding-inline: clamp(1.25rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; gap: .4375rem;
}
.footer-social-links .social-link {
  display: grid; place-items: center;
  width: 2.875rem; height: 2.875rem; border-radius: 50%;
  border: 2px solid #d0d5dd; color: #000561;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.footer-social-links .social-link svg { width: 1.125rem; height: 1.125rem; display: block; }
.footer-social-links .social-link:hover { border-color: #000561; background: #000561; color: #fff; }

/* Linha final: ligações utilitárias, acima do fio — como no institucional, que
   também não leva nota de copyright nem menção ao RGPD. */
.footer-links-bottom {
  margin-top: auto; padding: 2rem clamp(1.25rem, 3vw, 4.5rem) 1rem;
  border-top: 1px solid #d0d5dd;
  display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: baseline;
}
.footer-links-row { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
.footer-links-link { font-size: var(--fs-body); font-weight: 300; color: #000; transition: text-shadow .2s ease; }
.footer-links-link:hover { text-shadow: 0 0 1px #000561; }

@media (min-width: 60rem) {
  /* As duas faixas do institucional: 30% para a marca, 70% para as ligações. */
  .footer { grid-template-columns: 30% 70%; }
  .footer-header { padding-left: 3rem; }
  /* A faixa clara continua para fora da grelha, como no institucional, para não
     deixar um degrau de cor à esquerda em ecrãs largos. */
  .footer-header::before {
    content: ''; position: absolute; inset-block: 0; left: -40px;
    width: calc(100% + 40px); background: #fcfcfc; z-index: -1;
  }
  .footer-util-links-container { padding-left: 4.5rem; }
  .footer-social-links { padding-left: 4.5rem; }
  .footer-links-bottom { padding-left: 4.5rem; }
}

/* ---------- Revelação em scroll ---------- */

.revela { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .revela { opacity: 1; transform: none; }
}

/* A antiga cápsula de navegação e o seu botão de menu saíram com a adoção da
   navbar do visualforma.pt. O que a barra encolhe em ecrã pequeno vive na
   secção do cabeçalho, junto às regras dos links. */

/* =========================================================================
   PÁGINA DE ESTÁGIOS
   A única com registo mais solto: quem a lê está a estudar ou acabou de
   estudar. Mudam o corpo dos títulos, a inclinação dos cartões e os números dos
   passos — as cores, a tipografia e os cartões continuam a ser os do site, para
   se reconhecer como a mesma casa.
   ========================================================================= */

/* ---- Hero ----
   Azul da casa, por indicação da Carla. A cor vai no --cor-fundo-quadro, que é a
   variável que .quadro já usa, para o que dentro dele contar com o fundo certo. */
.quadro--azul {
  background: var(--azul);
  --cor-fundo-quadro: var(--azul);
}
.estagios-hero { max-width: 46rem; }
/* Rótulo inclinado, como um autocolante colado ao canto do cartão. A palavra é o
   desenho em Fine College, aplicado como máscara — ver ".palavra", abaixo. O
   font-size é o que lhe dá a altura, e a cor vem do color desta regra. */
/* ---- Cápsula com a palavra desenhada ----
   Usada duas vezes na página: no rótulo do hero e no título das perguntas. A
   cápsula é azul-milho e inclinada, como um autocolante colado ao sítio.

   inline-flex, e não inline-block: a palavra é uma caixa de 1em dentro de uma linha
   de texto, e a linha reserva espaço para acentos e descidas que a caixa não usa —
   por isso assentava acima do meio da cápsula. Em flex, o centro é o centro.

   O corpo não vem daqui: quem usa a cápsula é que o define, com font-size. */
.rotulo-college {
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(-3deg);
  background: var(--milho); color: #000;
  line-height: 1;
  padding: .6rem 1.15rem; border-radius: 999px;
}

.estagios-hero__rotulo {
  margin: 0 0 1.25rem;
  font-size: var(--fs-h3);
}
/* O desenho da palavra sobe um fio dentro da cápsula (indicação da Carla). A
   caixa da máscara é quadrada de 1em, mas o desenho não ocupa a altura toda: o
   ESTÁGIOS tem acento, e por isso o corpo das letras assenta abaixo do meio
   ótico. É só desenho, e por isso não mexe na altura da cápsula. */
.estagios-hero__rotulo .palavra { transform: translateY(-0.06em); }

/* ---- As palavras desenhadas (ESTÁGIOS, PERGUNTAS, ENVIAR) ----
   Não são texto: são o desenho das palavras na fonte college, em Assets/Images/
   Palavras, aplicado como máscara. O TTF da fonte traz apenas o contorno das
   letras — como texto sai oco e fino, e não se lê em nenhum tamanho.

   Sendo máscara, e não <img>, a cor vem do CSS: background é currentColor,
   portanto a palavra herda a cor do contexto e a mesma imagem serve o fundo claro
   do rótulo, o negro do título e o coral do botão, onde sai branca.

   A altura é 1em — controla-se pelo font-size de quem a usa — e a largura vem da
   proporção da própria imagem, escrita pelo PHP em --proporcao. */
.palavra {
  display: inline-block; vertical-align: middle;
  height: 1em; aspect-ratio: var(--proporcao, 4 / 1);
  background-color: currentColor;
  -webkit-mask: var(--arte) no-repeat center / contain;
  mask: var(--arte) no-repeat center / contain;
}
/* Recurso quando não há imagem para o idioma (as imagens só existem em português):
   a palavra em texto, na fonte display do site, em capitais espaçadas. */
.palavra-texto {
  font-family: var(--display); font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em;
}
/* Maior do que os títulos das outras páginas: é o único sítio do site onde o
   tamanho é ele próprio parte do tom. */
.estagios-hero__titulo { font-size: var(--fs-display); }
.estagios-hero__frase {
  margin-top: 1.25rem; max-width: 44ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .82);
}
.estagios-hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---- Os três tipos ---- */
/* Cartões de cor cheia, por indicação da Carla: eram brancos com um fio da cor em
   cima. Sendo agora a cor o fundo, tudo o que está dentro inverte para branco,
   como nos restantes cartões de cor do site. */
.tipo-estagio {
  background: var(--cor-tipo, var(--azul)); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: .6rem;
  transition: transform .25s ease;
}
/* Menos ar abaixo dos três cartões: os passos que vêm a seguir respondem à mesma
   pergunta e a folga normal entre secções separava-os demasiado. */
.secao:has(.tipo-estagio) { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* A inclinação é o que dá o tom mais solto. É pequena de propósito: passado um
   grau ou dois, deixa de se ler como intenção e começa a parecer erro. */
.tipo-estagio--torto { transform: rotate(-1.2deg); }
.tipo-estagio--torto-ao-contrario { transform: rotate(1.2deg); }
/* Ao passar o rato o cartão endireita-se e sobe: é a recompensa de mexer nele. */
.tipo-estagio:hover { transform: rotate(0) translateY(-4px); }

.tipo-estagio__icone { color: var(--branco); }
.tipo-estagio__icone svg { width: 2.5rem; height: 2.5rem; }
.tipo-estagio h3 { font-size: var(--fs-h3); }
/* Sobre a cor cheia estas duas linhas distinguem-se por transparência, e não por
   cor própria: a cor de cada cartão é já a do tipo. */
.tipo-estagio__quem {
  margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-sec); color: rgba(255, 255, 255, .85);
}
.tipo-estagio__texto { margin: 0; color: rgba(255, 255, 255, .82); font-size: var(--fs-sec); }
/* A duração fecha o cartão, encostada ao fundo e separada por um fio. */
.tipo-estagio__duracao {
  margin: auto 0 0; padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-family: var(--display); font-weight: 700; font-size: var(--fs-sec);
}

/* ---- Os quatro passos ----
   O número vem do contador da lista ordenada: assim a ordem está no HTML, e não
   escrita à mão em cada cartão. */
.passos-estagio {
  list-style: none; margin: 0; padding: 0;
  counter-reset: passo;
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 62rem) {
  .passos-estagio { grid-template-columns: repeat(4, 1fr); }
}
.passo-estagio {
  counter-increment: passo;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.passo-estagio::before {
  content: counter(passo);
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h1);
  line-height: .85; letter-spacing: -.05em;
  color: var(--azul);
  margin-bottom: .5rem;
}
.passo-estagio h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.passo-estagio p { margin: 0; color: var(--texto-suave); font-size: var(--fs-sec); }

/* ---- O que pedimos / o que não pedimos ---- */
.dois-lados { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 56rem) {
  .dois-lados { grid-template-columns: 1fr 1fr; }
}
.dois-lados__lado {
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* O lado do que se pede é de cor cheia; o do que não se pede vai em azul claro
   (indicação da Carla), sem contorno. A diferença de peso continua a dizer, sem
   o escrever, qual das duas listas conta: uma é escura e de texto branco, a
   outra é um fundo leve com o texto normal do site. */
.dois-lados__lado--sim { background: var(--azul-suave); color: var(--branco); }
.dois-lados__lado--nao { background: var(--azul-claro); }
.dois-lados__lado h2 { font-size: var(--fs-h2); margin-bottom: 1.25rem; }

.lista-marcada { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.lista-marcada li { position: relative; padding-left: 1.9rem; font-size: var(--fs-body); }
/* Visto desenhado em CSS: duas linhas de uma caixa, rodadas. Não é um carácter,
   para não depender do tipo de letra. */
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: .15rem;
  width: 1.15rem; height: .6rem;
  border-left: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(-45deg);
}
/* Do outro lado, uma cruz: dois traços cruzados, em cinzento, porque estas são as
   coisas que não contam. */
.lista-marcada--nao li::before {
  width: 1rem; height: 1rem;
  border: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat;
  transform: rotate(45deg);
  color: var(--linha-clara);
  top: .2rem;
}

/* ---- Áreas onde se estagia ----
   Cápsulas de cor, em fila. É o bloco mais solto da página: nomes grandes, sem
   caixa em volta.

   Segue de perto o bloco de cima ("O que pedimos"): encurta-se a folga superior
   desta secção e a inferior da anterior, que se somavam. */
.secao:has(.areas-estagio) { padding-top: clamp(2rem, 4vw, 3.25rem); }
.secao:has(.dois-lados) { padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.areas-estagio {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem;
}
.areas-estagio__item {
  background: var(--cor-area); color: var(--branco);
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h4);
  padding: .6rem 1.1rem; border-radius: 999px;
}
/* Alterna a inclinação pela posição na fila, e não por classe: a fila cresce se
   um dia houver mais áreas. */
.areas-estagio__item:nth-child(odd) { transform: rotate(-1.5deg); }
.areas-estagio__item:nth-child(even) { transform: rotate(1.5deg); }
.areas-estagio__nota { text-align: center; margin-top: 1.5rem; }

/* ---- Perguntas ---- */
/* Segue de perto a pilha das áreas: a folga normal entre secções somava-se à que a
   pilha já deixa no fim para o último cartão se soltar.

   position + z-index não são desenho, são ordem de pintura: os cartões da pilha
   levam transform, o que os torna contextos de empilhamento e os faz pintar acima
   do conteúdo que vem depois no documento. Sem isto, esta secção passava por
   debaixo do último cartão em vez de o suceder. */
.secao:has(.perguntas) {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  position: relative; z-index: 1;
}
/* ---- Fila das perguntas: fotografia, cartão, fotografia ----
   Três cartões numa linha, com as perguntas ao meio (indicação da Carla). O
   cartão leva mais largura do que as fotografias, que o flanqueiam: o que se lê é
   ele.

   Só se formam as três colunas quando há largura para isso. Abaixo de 62rem a
   fila volta a uma coluna e as fotografias saem — são decorativas, e empilhadas
   sobre e sob as perguntas só afastavam o título das respostas. */
.perguntas-fila { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 62rem) {
  .perguntas-fila {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
    /* stretch: as fotografias acompanham a altura do cartão e acabam ao nível
       dele, em vez de ficarem pelo meio. */
    align-items: stretch;
  }
}
.perguntas-fila__foto {
  border-radius: var(--raio-g); overflow: hidden;
  background: var(--superficie-2);
}
.perguntas-fila__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 61.99rem) {
  .perguntas-fila__foto { display: none; }
}

/* Um cartão só, com o título e as perguntas dentro (indicação da Carla). Coral —
   o vermelho do site, o mesmo da área de Safe Cities —, e por isso tudo o que está
   dentro passa a branco, como nos outros cartões de cor cheia.

   Sem máximo de largura: quem manda é a coluna do meio da fila. */
.perguntas-cartao {
  background: var(--coral); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
/* A cápsula do título vai em lilás, e não no azul-milho do hero (indicação da
   Carla). A palavra "Perguntas" é uma máscara pintada com currentColor, portanto é
   o color desta regra que a passa a branco — sobre o lilás, o negro da cápsula
   comum não se leria. */
.perguntas-cartao .rotulo-college { background: var(--lilas); color: var(--branco); }
/* A frase sob o título vem em negro esbatido do .secao__cabeca; sobre o coral
   passa a branco esbatido, como nas secções de cor cheia. */
.perguntas-cartao .secao__cabeca p { color: rgba(255, 255, 255, .85); }

/* Dentro do cartão as perguntas são linhas, e não cartões: o que as separa é um
   traço, e o gap deixa de fazer sentido — seria uma folga a duplicar a do
   padding de cada linha. Sem máximo de largura próprio: agora que o cartão é a
   coluna do meio da fila, é ele que dá a medida da linha. */
.perguntas { display: grid; gap: 0; }
.pergunta { padding: 1.1rem 0; }
/* Traço branco esbatido: sobre o coral, o traço da página não se via. */
.pergunta + .pergunta { border-top: 1px solid rgba(255, 255, 255, .3); }
/* A primeira e a última encostam ao padding do cartão, sem folga a mais. */
.pergunta:first-child { padding-top: 0; }
.pergunta:last-child { padding-bottom: 0; }
/* Sobre o coral, a resposta e o sinal de aberta invertem: o negro esbatido e o
   azul da página não se leriam. */
.pergunta p { color: rgba(255, 255, 255, .85); }
.pergunta[open] > summary { color: var(--branco); }
.pergunta > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-body);
}
.pergunta > summary::-webkit-details-marker { display: none; }
.pergunta > summary::marker { content: ""; }
/* Mais/menos em CSS: o traço vertical desaparece quando a resposta está aberta. */
.pergunta > summary::after {
  content: ""; flex: 0 0 auto;
  width: 1rem; height: 1rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat;
  transition: transform .2s ease;
}
.pergunta[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat;
  transform: rotate(180deg);
}
.pergunta[open] > summary { color: var(--azul); }
.pergunta p { margin: .85rem 0 0; color: var(--texto-suave); }

/* Dentro do cartão coral tudo o que é texto passa a branco. Estas duas regras
   ficam depois das genéricas de propósito: as de cima — o azul da pergunta
   aberta e o negro esbatido da resposta — são as da página clara e, vindo por
   último, ganhavam sobre as do cartão. */
.perguntas-cartao .pergunta > summary,
.perguntas-cartao .pergunta[open] > summary { color: var(--branco); }
.perguntas-cartao .pergunta p { color: rgba(255, 255, 255, .85); }

/* Movimento reduzido: os cartões não se inclinam nem se mexem com o rato. */
@media (prefers-reduced-motion: reduce) {
  .tipo-estagio,
  .tipo-estagio--torto,
  .tipo-estagio--torto-ao-contrario,
  .tipo-estagio:hover,
  .estagios-hero__rotulo,
  .areas-estagio__item:nth-child(odd),
  .areas-estagio__item:nth-child(even) { transform: none; }
  .tipo-estagio { transition: none; }
}

/* ---- Formulário próprio dos estágios ----
   O cartão não ocupa a largura toda da coluna: um formulário de dez campos a 96rem
   fica com linhas demasiado longas para se lerem. */
.form-estagio { max-width: 56rem; margin-inline: auto; }

/* ---- Malha de formas no fundo do hero ----
   .quadro__fundo traz o preto e o véu escuro dos heros com fotografia. Aqui não
   serve nenhum dos dois: o que está por baixo é o azul cheio da secção, e um véu
   por cima só o havia de sujar. */
.quadro__fundo--malha { background: transparent; }
.quadro__fundo--malha::after { content: none; }
.quadro__fundo--malha canvas {
  width: 100%; height: 100%; display: block;
  /* A tela não recebe ponteiro: por cima dela estão o título e os botões, e o
     rato é ouvido na secção do hero (ver Assets/js/malha.js). */
  pointer-events: none;
}

/* ---- As nossas áreas de atuação, em pilha ----
   Um cartão de cor por área, um por linha, com a descrição dentro. Ao descer, cada
   um prende-se ao topo da janela e empilha-se sobre o anterior, um pouco mais
   pequeno — adaptação do ScrollStack do React Bits (Assets/js/pilha-areas.js).

   Só as medidas do efeito vêm do JavaScript: a folga entre cartões, o deslocamento
   e a escala. O aspeto é todo daqui, e sem o módulo — ou com movimento reduzido —
   os quatro cartões ficam em fluxo, um após o outro, e leem-se seguidos. */
.pilha-areas { display: block; }

.pilha-areas__cartao {
  background: var(--cor-area, var(--azul)); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  /* Sem o módulo é esta a folga entre cartões; com ele, é escrita cartão a cartão
     (data-distancia), porque a última linha não a leva. */
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.pilha-areas__cartao:last-of-type { margin-bottom: 0; }

/* No modo com pilha, os cartões transformam-se: a origem tem de ser o topo, senão
   a redução afasta-os do sítio onde estão presos. A sombra separa um cartão do que
   lhe fica por baixo, agora que se sobrepõem. */
.pilha--viva .pilha-areas__cartao {
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .18);
}
/* Altura maior, por indicação da Carla: um cartão baixo empilhava-se quase sem se
   ver, e a fotografia não tinha onde respirar. É mínimo, e não altura fixa: se um
   texto crescer, o cartão acompanha. */
.pilha-areas__cartao { min-height: min(36rem, 78svh); display: flex; flex-direction: column; }

/* Com fotografia o cartão parte-se em duas: texto à esquerda, fotografia à
   direita. Em ecrã estreito volta a uma coluna, com a fotografia por baixo. */
.pilha-areas__cartao--com-foto { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 62rem) {
  .pilha-areas__cartao--com-foto { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
}
.pilha-areas__corpo { display: flex; flex-direction: column; }
.pilha-areas__foto {
  border-radius: var(--raio); overflow: hidden;
  background: rgba(0, 0, 0, .18);
  /* Em ecrã estreito a fotografia fica por baixo do texto e é este mínimo que lhe
     dá altura; em duas colunas acompanha a altura do cartão. */
  min-height: 17rem;
}
.pilha-areas__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pilha-areas__cabeca {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1rem;
}
.pilha-areas__icone svg { width: 2.5rem; height: 2.5rem; }
.pilha-areas__cartao h3 {
  font-size: var(--fs-h3);
  margin: 0;
}
/* Sobre a cor cheia o texto esbate-se em branco transparente, como nos restantes
   cartões de cor do site. */
.pilha-areas__texto {
  margin: 0; max-width: 60ch;
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-body);
}
/* As ações fecham o cartão, encostadas ao fundo. */
.pilha-areas__acoes {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: auto; padding-top: 1.5rem;
}
/* Sobre a cor, o botão principal é branco e o secundário é de contorno claro — o
   mesmo tratamento dos heros de cor cheia. */
.pilha-areas__cartao .botao--claro { background: var(--branco); color: #000; }
.pilha-areas__cartao .botao--fantasma {
  background: transparent; color: var(--branco);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.pilha-areas__cartao .botao--fantasma:hover { background: rgba(255, 255, 255, .14); }

/* A folga que dá ao último cartão espaço para se soltar. Só existe no modo com
   pilha: em fluxo seria um vazio no fim da secção. */
.pilha-areas__fim { height: 0; }
/* Esta folga é o que o último cartão precisa de percorrer para se soltar e sair do
   ecrã antes de a secção seguinte chegar. Com 22vh não bastava: a secção das
   perguntas subia enquanto o cartão ainda estava preso, e passava por baixo dele.
   50vh chega, e ainda encurta o vazio dos 60vh do original. */
.pilha--viva .pilha-areas__fim { height: 50vh; }

/* ---- Formulário dos estágios, em passos ----
   Um só <form> — todos os campos têm de seguir no mesmo email — repartido em
   quatro cartões que se mostram um de cada vez: "Sobre ti", "Sobre o estágio",
   "Apresentação" e a revisão. Dez campos à vista de uma só vez eram muitos para
   quem chega ao fim da página.

   Cada passo é um .form--cartao, o mesmo da candidatura, e por isso herda dele o
   fundo azul-marinho e a inversão dos rótulos e dos campos.

   Quem esconde os passos é o Assets/js/site.js, pelo atributo hidden: sem
   JavaScript ficam os três primeiros à vista, um sob o outro, e o formulário
   lê-se de uma ponta à outra. É por isso que aqui não há regra nenhuma a
   esconder nada. */
/* Folga curta entre o cartão do caminho, o passo e os botões (indicação da
   Carla): os três leem-se como um bloco só, e a folga de painel afastava-os como
   se fossem secções diferentes. O mesmo valor nos três sítios — aqui, no
   margin-bottom do .passos-form__cartao e no margin-top do .form-estagio__acoes. */
.form-estagio__passos { display: grid; gap: clamp(.6rem, 1.4vw, 1rem); }
/* Azul-milho, o azul claro do site (indicação da Carla), e não o azul-marinho do
   cartão da candidatura: o marinho passou para o cartão do caminho e para o botão
   de envio. Sendo cor clara, o texto é negro e os rótulos e campos ficam com o
   desenho normal do site — é por isso que os passos não levam .form--cartao. */
.form-estagio__passo {
  background: var(--milho); color: #000;
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}
/* Os campos são brancos sobre o azul claro, com o traço um pouco mais fechado do
   que o da página: sobre cor, um traço claro deixaria de se ver. */
.form-estagio__passo .campo input,
.form-estagio__passo .campo select,
.form-estagio__passo .campo textarea { background: var(--branco); border-color: rgba(0, 0, 0, .22); }
/* O display desta regra ganharia ao do atributo hidden, e o passo escondido
   continuaria à vista: é preciso dizê-lo. Mesma razão no indicador e nos botões,
   abaixo. */
.form-estagio__passo[hidden] { display: none; }
/* O passo recebe o foco ao mudar (tabindex -1, posto pelo JavaScript): quem usa
   leitor de ecrã ouve de que passo se trata antes de entrar nos campos. O anel
   de foco não se desenha, porque não é um controlo — é o sítio onde se chegou. */
.form-estagio__passo:focus { outline: none; }

/* Botões abaixo do passo, na mesma linha: o Voltar é um ícone quadrado e o botão
   principal — Continuar ou Enviar — ocupa o resto da largura (indicação da
   Carla). A ordem é a do documento, para o que se vê e o que o teclado percorre
   serem a mesma coisa; no primeiro passo o Voltar está hidden e o principal fica
   com a linha toda. */
.form-estagio__acoes {
  display: flex; align-items: stretch; gap: .6rem;
  margin-top: clamp(.6rem, 1.4vw, 1rem);
}
/* O principal cresce; o ícone fica do tamanho que tem. O .form-estagio__enviar é
   o <p> que embrulha o Enviar, e por isso é ele que cresce, e não o botão. */
.form-estagio__acoes [data-passo-seguinte],
.form-estagio__enviar { flex: 1 1 auto; min-width: 0; }
.form-estagio__acoes .botao--icone { flex: 0 0 auto; }
.form-estagio__enviar { margin-bottom: 0; }
.form-estagio__acoes .botao[hidden] { display: none; }
/* A largura toda e o rótulo ao centro vêm de .botao--largo, no HTML: é o
   utilitário que o site já tem para isso. */
/* O principal — Continuar ou Enviar — vai no azul-marinho da casa, o mesmo do
   cartão do caminho, com o texto a branco. */
.form-estagio__acoes [data-passo-seguinte],
.form-estagio__enviar .botao {
  background: var(--azul-suave); color: var(--branco);
}
/* Título de cada cartão. Nível h3 porque o h2 é o título da secção. */
.form-estagio__titulo {
  font-size: var(--fs-h4);
  margin: 0 0 .25rem;
}
/* A apresentação estica-se até ao fundo do cartão: sozinha no seu passo, é ela
   que lhe dá altura. */
.campo--cresce { flex: 1 1 auto; }
.campo--cresce textarea { flex: 1 1 auto; min-height: 9rem; }
/* O aviso de envio fica fora dos cartões, sobre o branco da página: o texto volta
   ao negro do site. */
.form-estagio__form > .campo__nota { color: var(--texto-suave); margin: 0; }

/* ---- Indicador dos passos ----
   Uma bola numerada por passo, com o nome por baixo e um traço a ligar. O passo
   feito e o passo atual acendem; os que faltam ficam esbatidos. Vive sobre o
   branco da página, e não dentro do cartão.

   Nasce hidden no HTML e é o JavaScript que o mostra: sem ele os passos estão
   todos à vista e um indicador não diria nada. */
/* Cartão único a embrulhar o indicador e o contador, da largura do formulário —
   é filho dele, portanto essa largura vem sozinha. Vai no azul-marinho da casa,
   o mesmo dos cartões dos passos (indicação da Carla): o caminho e os passos
   leem-se como um bloco só. */
/* Folga menor do que a de um cartão de conteúdo (indicação da Carla): aqui dentro
   só há uma fila de bolas, e a altura de um cartão com campos dava-lhe mais
   presença do que ela precisa. */
.passos-form__cartao {
  background: var(--azul-suave); color: var(--branco);
  border-radius: var(--raio-g);
  padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(.6rem, 1.4vw, 1rem);
}
.passos-form__cartao[hidden] { display: none; }

.passos-form {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-start;
}
.passos-form[hidden] { display: none; }
/* As quatro partes dividem a largura do cartão em partes iguais, em vez de terem
   largura própria: assim o caminho ocupa o cartão de um lado ao outro. */
.passos-form__passo {
  display: grid; justify-items: center; gap: .3rem;
  flex: 1 1 0; min-width: 0;
}
/* Bolas no azul-milho, o azul claro do site (indicação da Carla), com o número em
   negro: é a mesma cor do rótulo do hero, e sobre o azul-marinho lê-se de longe.
   O passo que ainda falta leva a mesma cor esbatida — assim as bolas são todas
   azul claro, e continua a ver-se onde se está. */
.passos-form__bola {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 999px;
  background: rgba(143, 182, 255, .3); color: rgba(255, 255, 255, .8);
  font-family: var(--display); font-weight: 800; font-size: var(--fs-sec);
  line-height: 1;
  transition: background-color .25s ease, color .25s ease;
}
.passos-form__nome {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-cap); letter-spacing: .01em;
  color: rgba(255, 255, 255, .72); text-align: center;
}
/* Sem traço a ligar as bolas (indicação da Carla): as quatro em fila, espaçadas
   por igual, já se leem como um caminho. */
/* Passo já dado e passo atual: a bola acende no azul-milho cheio, com o número em
   negro, e o nome passa a branco. */
.passos-form__passo--feito .passos-form__bola,
.passos-form__passo--atual .passos-form__bola { background: var(--milho); color: #000; }
.passos-form__passo--feito .passos-form__nome,
.passos-form__passo--atual .passos-form__nome { color: var(--branco); }
/* O passo atual leva ainda um halo, para se distinguir dos que já ficaram atrás:
   é a única diferença entre os dois, agora que a cor é a mesma. */
.passos-form__passo--atual .passos-form__bola {
  box-shadow: 0 0 0 4px rgba(143, 182, 255, .28);
}

/* O contador "Passo 1 de 4" não se vê: leva .visualmente-oculto no HTML, porque
   as bolas numeradas já dizem onde se está. Existe só para quem ouve a página —
   ver o comentário no estagios.php —, e por isso não há aqui regra nenhuma para
   ele. */
@media (prefers-reduced-motion: reduce) {
  .passos-form__bola, .passos-form__nome { transition: none; }
}

/* ---- Resumo do passo de revisão ----
   Escrito pelo JavaScript a partir dos rótulos e dos valores do formulário. Duas
   colunas quando há largura: o rótulo e o que se respondeu. */
.revisao { margin: 0; display: grid; gap: .1rem .5rem; }
@media (min-width: 38rem) {
  .revisao { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .6rem 1.25rem; }
}
.revisao dt {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .04em;
  /* Negro esbatido: o cartão do passo é azul claro, e não o marinho de antes. */
  color: rgba(0, 0, 0, .62);
}
.revisao dd {
  margin: 0 0 .6rem;
  /* A apresentação vem com parágrafos escritos pela pessoa: as mudanças de linha
     que ela fez são para se manterem. */
  white-space: pre-line;
}
@media (min-width: 38rem) {
  .revisao dd { margin-bottom: 0; }
}

/* ---- Fotografia ao lado do formulário dos estágios ----
   O bloco vai de margem a margem, na largura de painel (o .wrap--painel do HTML):
   a fotografia encosta à margem esquerda e os cartões à direita, sem coluna de
   leitura a estreitá-los. Fotografia, "Sobre ti", "Sobre o estágio".

   São duas colunas numa linha, portanto só se formam quando há largura para isso:
   abaixo de 62rem tudo volta a uma coluna, com a fotografia por cima. Sem
   fotografia na pasta a classe --com-foto não é posta e o formulário ocupa a
   largura toda. */
.form-estagio__par { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 62rem) {
  /* stretch, e não start: é o que faz a fotografia acompanhar a altura do
     formulário e acabar ao mesmo nível do fundo dele. */
  /* Não são duas partes de uma proporção: o formulário tem uma largura sua — a
     que os campos precisam para se lerem — e encosta à margem direita; a
     fotografia fica com tudo o que sobra, da margem esquerda até ele (indicação
     da Carla). A folga entre os dois é o gap do bloco.

     Em ecrã largo, portanto, é a fotografia que cresce, e não o formulário. */
  .form-estagio__par--com-foto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    align-items: stretch;
  }
}
/* O formulário é o item da grelha; a altura dele é que a fotografia acompanha. E
   é o passo à vista que ocupa o que sobra, para a fotografia não ficar mais alta
   do que ele nos passos de poucos campos. */
.form-estagio__form { display: flex; flex-direction: column; }
.form-estagio__form > .form-estagio__passos { flex: 1 1 auto; }

.form-estagio__foto {
  border-radius: var(--raio-g); overflow: hidden;
  background: var(--superficie-2);
  min-height: 18rem;
}
/* object-position abaixo dos 50%: a fotografia é maior do que a moldura e o
   recorte passa a ficar mais à esquerda, o que empurra a imagem um pouco para a
   direita dentro dela (indicação da Carla). */
.form-estagio__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 35% center;
}
/* Com fotografia o bloco volta a ir de margem a margem, na largura do painel: o
   que trata de não deixar o formulário crescer é a coluna dele, fixada em 40rem
   na grelha acima — o que sobra é da fotografia. O máximo de 56rem continua a
   valer quando não há fotografia: aí é um formulário sozinho, e linhas de margem
   a margem seriam demasiado longas para se lerem. */
.form-estagio:has(.form-estagio__par--com-foto) { max-width: none; }

/* O botão de envio acompanha a largura do cartão que tem por cima, e vai em coral —
   o vermelho do site, o mesmo da área de Safe Cities (indicação da Carla). Sobre
   ele o texto é branco, que é o contraste que esta cor pede. */
.form-estagio__enviar .botao {
  width: 100%; justify-content: center;
  background: var(--coral); color: var(--branco);
}
.form-estagio__enviar .botao:hover { background: #b93a20; }

/* ---------- Dica de scroll ----------
   Onde é preciso arrastar ou percorrer para chegar à imagem ou ao cartão
   seguinte, aparece uma cápsula com duas setas em movimento, para que quem
   visita perceba que aquela fila continua para lá da margem do ecrã.

   O elemento é criado pelo JavaScript sobre qualquer fila marcada com
   data-dica-scroll, e desaparece assim que a pessoa a percorre pela primeira
   vez, ou ao fim de alguns segundos: cumprida a função, sai da frente. */
.dica-scroll {
  /* z-index acima das peças do coverflow, que chegam a 10. */
  position: absolute; z-index: 20;
  left: 50%; bottom: clamp(.5rem, 2vw, 1.25rem);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem;
  border-radius: 32px;
  background: var(--azul-suave); color: var(--branco);
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-cap); letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1; transition: opacity .4s ease, transform .4s ease;
}
/* O anfitrião pode não estar posicionado: o JavaScript acrescenta-lhe esta
   classe para a cápsula ter a que se agarrar. */
.dica-scroll__anfitriao { position: relative; }

/* Saída: esmorece e afunda um pouco, em vez de sumir de repente. */
.dica-scroll[data-sai="true"] {
  opacity: 0; transform: translateX(-50%) translateY(.5rem);
}

/* Em fluxo: a cápsula deixa de pairar e ocupa o seu lugar no fim do bloco,
   onde nada tem por baixo para tapar. */
.dica-scroll--fluxo {
  position: static; transform: none;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  width: max-content;
}
.dica-scroll--fluxo[data-sai="true"] { transform: translateY(.5rem); }

.dica-scroll__setas {
  display: flex; align-items: center; gap: .1rem;
}
.dica-scroll__setas svg { width: .85rem; height: .85rem; display: block; }
/* As três setas acendem-se em sequência, da esquerda para a direita, e o
   conjunto oscila devagar: é a leitura de "continua para aquele lado". */
.dica-scroll__setas svg { animation: dica-scroll-seta 1.6s ease-in-out infinite; }
.dica-scroll__setas svg:nth-child(2) { animation-delay: .18s; }
.dica-scroll__setas svg:nth-child(3) { animation-delay: .36s; }

@keyframes dica-scroll-seta {
  0%, 100% { opacity: .3; transform: translateX(-.15rem); }
  50%      { opacity: 1;  transform: translateX(.15rem); }
}

/* Variante vertical: o cartão dos benefícios percorre-se com o scroll da
   página, não com o dedo na horizontal. Leva uma só seta, a mesma da pista dos
   heros, a descer em ciclo — assim o sinal de "continua para baixo" é o mesmo
   em todo o site. */
.dica-scroll--vertical .dica-scroll__setas svg {
  width: 1.1rem; height: 1.1rem;
  animation: dica-scroll-desce 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes dica-scroll-desce {
  0%   { transform: translateY(0);      opacity: .75; }
  45%  { transform: translateY(.3rem);  opacity: 1; }
  100% { transform: translateY(0);      opacity: .75; }
}

/* Quem pediu menos movimento fica com a cápsula parada: a mensagem continua lá,
   só não pisca. */
@media (prefers-reduced-motion: reduce) {
  .dica-scroll { transition: none; }
  .dica-scroll__setas svg { animation: none; opacity: 1; transform: none; }
  .dica-scroll--vertical .dica-scroll__setas svg { animation: none; transform: none; }
}

/* Título de secção com a palavra desenhada: é o font-size que lhe dá a altura. */
/* Dentro da cápsula, a palavra do título é menor do que era em cima da tela: a
   cápsula acrescenta-lhe presença, e ao corpo anterior ficava enorme. A margem é a
   folga até à frase que se lhe segue. */
.titulo-college {
  font-size: var(--fs-body);
  line-height: 1;
  margin-bottom: 1rem;
}
/* O botão de envio leva a palavra desenhada, em branco sobre o coral. A folga
   vertical é maior do que a do botão comum: a palavra é uma caixa de 1em e não tem
   as folgas que uma linha de texto traz. */
.botao--palavra { font-size: var(--fs-h4); padding-top: .7rem; padding-bottom: .7rem; }