/* =============================================================================
   ESTILO DO SITE — Semana das Associações do ISEG
   =============================================================================

   COMO MUDAR A COR PRINCIPAL DO SITE
   ----------------------------------
   Muda o valor de  --vermelho  no bloco :root, mais abaixo.
   Tudo o que é vermelho no site muda de uma vez.

   A ORGANIZAÇÃO DESTE FICHEIRO
   ----------------------------
    1. As letras (tipos de letra)      7. "Como funciona"
    2. As cores e as medidas            8. O mural de fotografias
    3. Base e tipografia                9. O quiz
    4. Grelha e caixas                 10. O votómetro (o resultado)
    5. Cabeçalho e botões              11. O diretório e o painel
    6. A página inicial                12. Formulário e rodapé
    7b. O plano e "Porquê entrar"      13. Movimento

   Cada tamanho de letra e cada espaço estão escritos com clamp(), que quer
   dizer "entre este mínimo e este máximo, conforme a largura do ecrã".
   Por isso quase não há regras diferentes para telemóvel e computador.
   ============================================================================= */


/* ============================================================================
   1. AS LETRAS
   ----------------------------------------------------------------------------
   Sharp Sans — o tipo de letra oficial do ISEG. É o mesmo que a escola usa no
   www.iseg.ulisboa.pt, nos mesmos quatro pesos.

   Os ficheiros estão guardados dentro do próprio site (assets/fontes/), não
   são pedidos à internet: assim o site abre igual com duplo clique, funciona
   sem rede e não faz pedidos a servidores de terceiros.

   ATENÇÃO: a Sharp Sans NÃO é uma letra livre — é da Sharp Type Co. e é
   licenciada. Aqui usa-se por ser um site do ISEG e por vir da própria
   licença da escola. Ver assets/fontes/LEIA-ME.txt antes de a usar noutro
   sítio qualquer.

   Os quatro pesos, e onde se usam:
     400 Book        texto corrido
     500 Medium      etiquetas, botões pequenos
     700 Bold        títulos pequenos, nomes das associações, botões
     800 Extrabold   o título grande da página inicial, as percentagens
   ============================================================================ */

@font-face {
  font-family: "Sharp Sans";
  src: url("../assets/fontes/SharpSans-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sharp Sans";
  src: url("../assets/fontes/SharpSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sharp Sans";
  src: url("../assets/fontes/SharpSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sharp Sans";
  src: url("../assets/fontes/SharpSans-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* ============================================================================
   2. AS CORES E AS MEDIDAS
   ============================================================================ */

:root {
  /* --- o vermelho do ISEG, tirado do próprio logótipo da escola --- */
  --vermelho:            #ee403d;   /* a cor da identidade: marca, barras, números grandes */
  --vermelho-acao:       #cf332f;   /* o mesmo, já legível com texto branco por cima */
  --vermelho-escuro:     #a92c29;   /* quando se carrega num botão */
  --vermelho-papel:      #fbeeed;   /* fundo muito claro, para destacar sem gritar */

  /* --- o papel e a tinta --- */
  --papel:               #fbfaf6;   /* fundo geral: branco de papel, mal aquecido */
  --papel-alto:          #ffffff;   /* caixas e cartões, um degrau acima do fundo */
  --tinta:               #14100e;   /* texto principal */
  --tinta-media:         #57514b;   /* texto secundário */
  --tinta-fraca:         #79726c;   /* etiquetas e legendas (4.5:1 no papel) */
  --linha:               #e4dfd7;   /* os fios de 1px que separam as coisas */
  --linha-forte:         #c9c2b8;   /* fios decorativos, mais marcados */

  /* O contorno dos botões e das caixas onde se escreve. É mais escuro do
     que os fios decorativos de propósito: um contorno é a única coisa que
     diz "isto é um botão", por isso as regras de acessibilidade exigem-lhe
     3:1 contra o fundo (WCAG 1.4.11). Os fios que só separam blocos não
     têm essa exigência e podem ser mais leves.                             */
  --contorno:            #948d83;

  /* --- o escuro, usado no mural e no rodapé --- */
  --carvao:              #16120f;
  --carvao-alto:         #241e19;
  --carvao-texto:        #f2ede6;
  --carvao-fraco:        #a49b92;

  /* --- as três posições do resultado: uma só família de cor, ordenada --- */
  --lugar-1:             #ee403d;   /* o vermelho do ISEG */
  --lugar-2:             #b03936;   /* o mesmo vermelho, mais fundo */
  --lugar-3:             #6f6663;   /* grafite quente */
  --calha-fundo:         #ebe6de;

  /* --- a caixa de aviso --- */
  --aviso-fundo:         #fdf6e3;
  --aviso-borda:         #c8992a;
  --aviso-texto:         #5e4405;

  /* --- formas --- */
  --raio:                4px;       /* cantos: quase a direito, como papel cortado */
  --raio-g:              6px;
  --largura-max:         1240px;
  --largura-texto:       660px;
  --fio:                 1px solid var(--linha);

  /* --- o movimento: uma só escala de durações e curvas para o site todo.
         Nomes da escala de transitions.dev, para bater com a documentação.
         Quem pede menos movimento ao sistema não vê nada disto (secção 13). */
  --duration-stagger:    40ms;      /* desfasamento entre linhas que entram */
  --duration-quick:      150ms;     /* fechar o painel, setas dos botões */
  --duration-fast:       250ms;     /* abrir o painel, mudar de página */
  --duration-very-slow:  500ms;     /* entrada das secções da inicial */
  --ease-smooth-out:     cubic-bezier(0.22, 1, 0.36, 1);

  /* o painel de detalhe (modal) */
  --modal-open-dur:      var(--duration-fast);
  --modal-close-dur:     var(--duration-quick);
  --modal-scale:         0.96;
  --modal-scale-close:   0.96;
  --modal-ease:          var(--ease-smooth-out);

  /* a entrada das secções (texts reveal) */
  --stagger-dur:         var(--duration-very-slow);
  --stagger-distance:    12px;
  --stagger-stagger:     var(--duration-stagger);
  --stagger-ease:        var(--ease-smooth-out);
}


/* ============================================================================
   3. BASE E TIPOGRAFIA
   ============================================================================ */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;               /* nada pode empurrar a página para o lado */
}

/* O height:auto é essencial: as imagens levam width/height no HTML (para o
   browser reservar o espaço certo e a página não saltar enquanto carrega),
   e sem isto essa altura fixa ganhava às proporções definidas aqui.        */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--vermelho-acao); text-underline-offset: 3px; }

p { margin: 0 0 1em; }

/* --- os títulos: sempre no tipo de letra de display, sempre apertados --- */
h1, h2, h3, h4 {
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { font-size: clamp(1.65rem, 4.6vw, 2.4rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.015em; }

/* A etiqueta pequena em maiúsculas que abre quase todas as secções.
   É o fio condutor do site: aparece no hero, no mural, no diretório.        */
.sobrescrito {
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* O tracinho vermelho antes do texto: o único enfeite do site. */
.sobrescrito::before {
  content: "";
  width: 22px; height: 3px; flex: none;
  background: var(--vermelho);
}

/* Números que têm de alinhar em coluna (percentagens, contadores). */
.numeros { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Texto só para leitores de ecrã. */
.so-leitor-ecra {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Link "saltar para o conteúdo", só aparece a quem navega por teclado. */
.saltar {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--papel);
  padding: 14px 20px; font-weight: 500; text-decoration: none;
}
.saltar:focus { left: 0; }

/* Foco visível e igual em todo o site. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--vermelho-acao);
  outline-offset: 3px;
  border-radius: 1px;
}


/* ============================================================================
   4. GRELHA E CAIXAS
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 20px;
}
.estreito { max-width: var(--largura-texto); }

/* Uma secção normal, separada da anterior por um fio. */
.faixa { padding: clamp(44px, 8vw, 84px) 0; }
.faixa-fio { border-top: var(--fio); }

/* A secção escura (o mural, o rodapé). */
.faixa-escura {
  background: var(--carvao);
  color: var(--carvao-texto);
}
.faixa-escura .sobrescrito { color: var(--carvao-fraco); }
.faixa-escura h2 { color: var(--carvao-texto); }


/* ============================================================================
   5. CABEÇALHO E BOTÕES
   ============================================================================ */

/* No telemóvel o menu não cabe ao lado do logótipo e passa para uma segunda
   linha — o cabeçalho ficaria com quase 150px, um quinto do ecrã, sempre
   colado ao topo. Por isso aqui o cabeçalho sobe com a página; a partir dos
   760px, onde já cabe tudo numa linha, volta a ficar fixo.                 */
.topo {
  background: var(--papel);
  border-bottom: var(--fio);
  position: static; z-index: 20;
}

.topo-interior {
  display: flex; align-items: center;
  gap: 14px; min-height: 62px;
  flex-wrap: wrap;
  padding: 9px 0;
}

/* O lockup institucional: a escola primeiro, o evento a seguir. */
.marca {
  color: var(--tinta); text-decoration: none;
  display: flex; align-items: center; gap: 12px;
  flex: none; min-height: 44px;      /* alvo de toque mínimo */
}
.marca-logo { height: 42px; width: auto; flex: none; }
.marca-divisor {
  width: 1px; align-self: stretch; margin: 5px 0;
  background: var(--linha-forte); flex: none;
}
.marca-nome {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.35; max-width: 6.5rem;
  color: var(--tinta-media);
}

/* O flex-wrap é a rede de segurança dos ecrãs mais estreitos (320px, o
   iPhone SE antigo): em vez de o menu empurrar a página para o lado, a
   última entrada passa para baixo.                                        */
.topo nav { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.topo nav a {
  color: var(--tinta-media); text-decoration: none;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .035em; text-transform: uppercase;
  /* 5px e não 6: com 6, as quatro entradas do menu somavam 347px e não
     cabiam nos 345px de um ecrã de 360px — falhavam por 2px e "O meu
     resultado" caía sozinho para uma terceira linha. */
  padding: 10px 5px;
  min-height: 44px; min-width: 44px; justify-content: center; display: flex; align-items: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.topo nav a:hover { color: var(--tinta); }
.topo nav a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--vermelho);
}

@media (min-width: 760px) {
  .topo { position: sticky; top: 0; }
  .topo-interior { flex-wrap: nowrap; min-height: 76px; }
  .marca-logo { height: 50px; }
  .marca-nome { max-width: 8.5rem; font-size: .72rem; }
  .topo nav { gap: 2px; flex-wrap: nowrap; }
  .topo nav a { padding: 10px 9px; font-size: .74rem; letter-spacing: .05em; }
}

/* Entre os 760 e os 900px, em português, o menu e o PT|EN não cabiam
   numa linha: a 768px o PT|EN ficava 39px fora do ecrã, cortado. Aperta-se
   aqui o espaço entre as entradas e o nome do evento, e o resto fica igual.
   (Abaixo dos 760px nem apertado cabe, e o menu fica na 2.ª linha, como no
   telemóvel. Antes o salto era nos 620px, e entre 620 e 760 o PT|EN ficava
   cortado fora do ecrã.) */
@media (min-width: 760px) and (max-width: 899px) {
  .topo-interior { gap: 10px; }
  .marca { gap: 10px; }
  .marca-nome { max-width: 7rem; font-size: .68rem; }
  .topo nav a { padding: 10px 6px; font-size: .7rem; letter-spacing: .03em; }
  /* .topo à frente para ganhar às regras do PT|EN, que vêm mais abaixo */
  .topo .idioma { padding-left: 6px; margin-left: 2px; }
  .topo .idioma-botao { padding: 10px 6px; }
}

/* A partir daqui há espaço de sobra: o menu volta a respirar. */
@media (min-width: 1024px) {
  .topo nav { gap: 4px; }
  .topo nav a { padding: 10px 13px; font-size: .78rem; letter-spacing: .08em; }
}

/* ------------------------------------------------------- PT | EN --------- */
/*
   O botão de trocar de língua. É desenhado pelo js/idioma.js, não está escrito
   nas cinco páginas — assim é impossível ficar diferente numa delas.

   É de propósito que não leva bandeiras: uma bandeira representa um país, não
   uma língua, e o inglês aqui é para toda a gente que não fala português, não
   só para ingleses.

   Também não leva vermelho. O vermelho no cabeçalho já quer dizer uma coisa —
   "a página em que estás" — e se passasse a querer dizer duas, deixava de
   querer dizer alguma. A língua em que se está fica marcada a tinta cheia.
*/
.idioma {
  display: flex; align-items: center; flex: none;
  margin-left: auto;
}

/* No telemóvel o menu não cabe ao lado do logótipo e passa para a linha de
   baixo. O PT|EN fica na primeira linha, encostado à direita, ao lado do
   logótipo do ISEG — e não numa terceira linha só para ele.
   (É o menu que leva a ordem 1; assim o logótipo e o PT|EN, que ficam na 0,
   seguem a ordem em que estão escritos no HTML: primeiro a escola.) */
.topo nav { order: 1; }
.idioma-botao {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0;
  font-family: inherit;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
  padding: 10px 8px;
  min-height: 44px;       /* alvo de toque, como o resto do menu */
  min-width: 44px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.idioma-botao + .idioma-botao { border-left: var(--fio); }
.idioma-botao:hover { color: var(--tinta); }

/* A língua em que já se está não é um botão para carregar: é onde se está.
   Fica a tinta cheia, sublinhada, e o browser não a deixa carregar. */
.idioma-botao[aria-current="true"] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
  cursor: default;
  opacity: 1;             /* o browser desbota os botões desligados; aqui não */
}

/* No telemóvel, o menu fica na 2.ª linha, centrado. */
.topo nav { width: 100%; justify-content: center; margin-left: 0; }

@media (min-width: 760px) {
  /* Já cabe tudo numa linha. O cabeçalho passa a três colunas: o ISEG à
     esquerda, o menu ao centro e o PT|EN à direita. As duas colunas de fora
     têm a mesma largura (1fr), por isso o menu fica centrado na página e não
     no espaço que sobra entre o logótipo e o PT|EN. Se o ecrã for tão
     estreito que o logótipo não caiba na sua coluna, a grelha dá-lhe o que
     precisa e o menu desvia-se um pouco, em vez de se sobrepor. */
  .topo-interior {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .marca { justify-self: start; }
  .topo nav { order: 0; width: auto; justify-self: center; }
  .idioma { justify-self: end; margin-left: 0; }
  .idioma-botao { font-size: .74rem; }
}


/* ------------------------------------------------------------- botões ----- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 54px; padding: 15px 28px;
  border-radius: var(--raio); border: 2px solid transparent;
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: .95rem; font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease,
              color .14s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primario { background: var(--vermelho-acao); color: #fff; }
.btn-primario:hover { background: var(--vermelho-escuro); }

.btn-secundario {
  background: transparent; color: var(--tinta);
  border-color: var(--contorno);
}
.btn-secundario:hover { border-color: var(--tinta); }

/* A mesma dupla, mas para dentro de uma secção escura. */
.faixa-escura .btn-secundario { color: var(--carvao-texto); border-color: #4a423a; }
.faixa-escura .btn-secundario:hover { border-color: var(--carvao-texto); }

/* A seta que anda para a frente quando se passa o rato. */
.btn .seta { transition: transform .16s ease; }
.btn:hover .seta { transform: translateX(4px); }


/* ============================================================================
   6. A PÁGINA INICIAL — O CARTAZ
   ============================================================================ */

/* --- a tarja com as datas, entre dois fios, como o topo de um cartaz --- */
.tarja-evento {
  border-top: 2px solid var(--tinta);
  border-bottom: var(--fio);
  padding: 11px 0;
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 14px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta);
}
/* A tarja abre-se e ocupa a largura toda: as datas encostadas a um extremo,
   o local ao outro. Assim fecha a faixa do cabeçalho do cartaz, em vez de ser
   uma linha curta perdida no meio da folha. No telemóvel, onde as duas não
   cabem lado a lado, cada uma fica na sua linha, alinhadas à esquerda. */
.tarja-evento { justify-content: space-between; }

/* O "/" que separava as duas está escondido.

   Não é por ser feio: é porque deixou de separar coisa nenhuma. Em ecrã largo
   ficava sozinho no meio de um vazio de 700px, e no telemóvel, com a tarja a
   quebrar em duas linhas, ficava pendurado no fim da primeira. Nas duas
   larguras lia-se como um engano.

   O espaço e a quebra de linha já separam melhor do que ele. Fica no HTML
   (e a lógica que o esconde quando falta uma das duas, no comum.js) para
   poder voltar sem ter de mexer em nada. */
.tarja-evento [data-separador] { display: none; }


/* ----------------------------------------------------------------------------
   O CABEÇALHO DO CARTAZ — o logótipo da Semana das Associações
   ----------------------------------------------------------------------------
   O logótipo é uma composição CENTRADA: os quatro balões por cima, o nome
   centrado por baixo. O resto do site é o contrário — nada é centrado, tudo
   se ancora à esquerda numa grelha.

   Uma peça centrada, solta, dentro de uma página alinhada à esquerda lê-se
   sempre como um autocolante: o centro ótico dela não bate certo com coisa
   nenhuma à volta. Aumentá-la não resolve; só faz um autocolante maior.

   Por isso o logótipo não é alinhado à esquerda "como o resto". Ganha uma
   FAIXA PRÓPRIA, de um lado ao outro da página, presa entre fios. É o que um
   jornal faz: o nome ao centro, entre fios, e as colunas todas à esquerda por
   baixo. Assim o centrado deixa de ser uma exceção e passa a ser a razão de
   ser da faixa — que é o que faz a diferença entre integrado e colado.

   Os fios vão a perder peso de cima para baixo — 3px, 2px, 1px — para a
   leitura descer sozinha do nome do evento para as datas e daí para o título.

   As quatro cores do logótipo continuam a ficar DENTRO dele: não passam para
   os botões, nem para as barras do resultado, nem para as etiquetas. O site
   continua a ser papel, tinta e um só vermelho.
   -------------------------------------------------------------------------- */
.cartaz-cabeca {
  border-top: 3px solid var(--tinta);
  padding: clamp(18px, 3vw, 30px) 0 clamp(15px, 2.4vw, 25px);
  display: flex;
  justify-content: center;
}

/* O tamanho é escolhido a contar com o que vem a seguir: a faixa tem de ser
   um cabeçalho, não o ecrã inteiro. Se ficar maior do que isto, empurra o
   título e os botões para baixo da dobra e a pessoa abre o site sem ver o
   que lá pode fazer. */
.cartaz-marca {
  display: block;
  width: min(100%, clamp(238px, 34vw, 366px));
  height: auto;
  margin: 0;
}

/* O fio de 3px é o topo do cartaz: encosta-se ao cabeçalho, não flutua. */
.hero { padding: clamp(10px, 1.8vw, 22px) 0 clamp(44px, 7vw, 76px); }

.hero-grelha {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
  margin-top: clamp(26px, 5vw, 48px);
}

/* O título. É a peça mais importante da página: grande, apertado, à esquerda. */
.hero-titulo {
  font-size: clamp(2.05rem, 10.4vw, 4.7rem);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: .93;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero-titulo em { font-style: normal; color: var(--vermelho); }

.hero-sub {
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  color: var(--tinta-media);
  max-width: 30ch;
  margin: 0 0 30px;
}

.hero-botoes { display: flex; flex-direction: column; gap: 12px; }

.nota-privacidade {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: var(--fio);
  font-size: .88rem; color: var(--tinta-media);
  max-width: 40ch;
}
.nota-privacidade strong { color: var(--tinta); font-weight: 700; }

/* --- a fotografia do hero --- */
.hero-foto { margin: 0; }
.hero-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--calha-fundo);
  border-radius: var(--raio);
}
.hero-foto figcaption {
  margin-top: 10px;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-fraca);
  display: flex; gap: 8px; align-items: baseline;
}

@media (min-width: 860px) {
  /* Composição assimétrica: o texto ocupa mais do que a fotografia. */
  .hero-grelha { grid-template-columns: 7fr 5fr; gap: clamp(36px, 5vw, 64px); }
  .hero-foto img { aspect-ratio: 4 / 5; }
  .hero-botoes { flex-direction: row; }
  .hero-botoes .btn { min-width: 190px; }
}


/* ============================================================================
   7. "COMO FUNCIONA" — uma sequência, não três caixas iguais
   ----------------------------------------------------------------------------
   Os números 1-2-3 estão aqui porque isto é mesmo uma ordem de acontecimentos.
   São algarismos de jornal, grandes e alinhados à esquerda — não medalhas.
   ============================================================================ */

.passos { list-style: none; margin: 0; padding: 0; }

.passo {
  display: grid;
  grid-template-columns: minmax(56px, 4rem) 1fr;
  gap: 4px 18px;
  align-items: baseline;
  padding: 22px 0;
  border-top: var(--fio);
}
.passo:last-child { border-bottom: var(--fio); }

.passo-numero {
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: .8;
  color: var(--vermelho);
  grid-row: span 2;
  align-self: start;
}
.passo h3 { margin: 0 0 4px; font-size: clamp(1.15rem, 3vw, 1.45rem); }
.passo p { margin: 0; color: var(--tinta-media); font-size: .96rem; max-width: 46ch; }

@media (min-width: 860px) {
  .passo { grid-template-columns: 6rem minmax(0, 15rem) minmax(0, 1fr); padding: 26px 0; }
  .passo h3 { grid-column: 2; margin: 0; }
  .passo p { grid-column: 3; }
  .passo-numero { grid-row: 1; }
}


/* ============================================================================
   7b. O PLANO DA SEMANA E "PORQUÊ ENTRAR"
   ----------------------------------------------------------------------------
   O plano são três dias numa linha, com um aluno desenhado em cima. É o
   scroll que o faz andar: a secção fica presa no ecrã e o scroll leva-o do
   dia 28 ao 30; só depois a página continua (o js/plano.js trata disso).
   Por baixo aparece o que acontece em cada dia.

   A mesma gramática do resto do site: tinta, papel, fios finos, marcas
   quadradas e um só vermelho, que aqui quer dizer "o dia que estás a ver".
   A mochila do aluno é do mesmo vermelho, para se ligar ao dia ativo.

   Sem JavaScript, a linha não aparece e os três dias ficam em lista.
   ============================================================================ */

/* O bloco preso. O js/plano.js dá ao .plano-rolagem a altura do bloco mais
   duas alturas de ecrã, e põe o "top" do bloco logo abaixo do cabeçalho.
   Sem JavaScript não há .plano-rolar, e nada fica preso. */
.plano-rolar { position: relative; }
.plano-rolar .plano-fixo { position: -webkit-sticky; position: sticky; }

.dias { margin-top: clamp(14px, 3vw, 24px); max-width: 780px; }

.dias-dica {
  margin: 0 0 4px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* --- a linha --- */
.dias-pista {
  padding: 0 32px;
  touch-action: pan-y;                 /* o scroll da página continua a funcionar */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dias-trilho { position: relative; height: 116px; --pos: 0; }

.dias-linha {
  position: absolute; left: 0; right: 0; top: 60px;
  height: 2px; background: var(--linha-forte);
}
/* O bocado de linha já percorrido fica a tinta. Segue o scroll à letra,
   por isso não tem transição. */
.dias-linha-feita {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--pos) * 100%);
  background: var(--tinta);
}

/* --- os três dias: marca quadrada em cima da linha, data por baixo.
       O botão é maior do que a marca, para o dedo acertar (64x64px). --- */
.dias-marco {
  position: absolute; top: 45px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 64px; min-height: 64px;
  padding: 8px 6px 6px;
  background: none; border: 0; border-radius: var(--raio);
  font-family: inherit; cursor: pointer;
}
.dias-marco[data-dia="0"] { left: 0; }
.dias-marco[data-dia="1"] { left: 50%; }
.dias-marco[data-dia="2"] { left: 100%; }

.dias-marco-ponto {
  width: 14px; height: 14px;
  background: var(--papel);
  border: 2px solid var(--contorno);
  border-radius: 1px;
  transition: background-color var(--duration-fast) var(--ease-smooth-out),
              border-color var(--duration-fast) var(--ease-smooth-out),
              transform var(--duration-fast) var(--ease-smooth-out);
}
.dias-marco-data {
  font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinta-fraca);
  transition: color var(--duration-fast) var(--ease-smooth-out);
}
.dias-marco:hover .dias-marco-ponto { border-color: var(--tinta); }
.dias-marco:hover .dias-marco-data  { color: var(--tinta); }

/* o dia à vista: o único vermelho da secção */
.dias-marco.is-ativo .dias-marco-ponto {
  background: var(--vermelho); border-color: var(--vermelho);
  transform: scale(1.2);
}
.dias-marco.is-ativo .dias-marco-data { color: var(--vermelho-acao); }

/* --- a figura ---
   Parado num dia, fica em cima da marca. Segue o scroll sem atraso.     */
.dias-pessoa {
  position: absolute; top: -4px;          /* os pés ficam em cima da marca do dia */
  left: calc(var(--pos) * 100%);
  width: 48px; height: 56px; margin-left: -24px;
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 2;
}
.dias-pessoa-fig {
  display: block; overflow: visible;
  transform-origin: 50% 95%;
  transition: transform var(--duration-quick) var(--ease-smooth-out);
}
.dias-cabeca, .dias-corpo { fill: var(--tinta); }
.dias-mochila { fill: var(--vermelho); }
.dias-perna, .dias-braco {
  fill: none; stroke: var(--tinta);
  stroke-width: 3.4; stroke-linecap: round;
}
/* Entre dois dias, os pés descem até à linha e o aluno inclina-se para a
   frente; quando chega a um dia, sobe para a marca. É isto que se sente
   como o "prender". */
.dias-trilho:not(.em-dia) .dias-pessoa-fig { transform: translateY(9px) rotate(6deg); }

/* As pernas rodam na anca: enquanto há scroll entre dois dias, o aluno anda. */
.dias-perna { transform-box: view-box; transform-origin: 21px 32px; }
.a-andar:not(.em-dia) .dias-perna-a { animation: dias-passo 320ms ease-in-out infinite alternate; }
.a-andar:not(.em-dia) .dias-perna-b { animation: dias-passo 320ms ease-in-out infinite alternate-reverse; }
@keyframes dias-passo { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* O primeiro desenho da página é sem animação. */
.sem-transicao .dias-pessoa-fig,
.sem-transicao .dias-marco-ponto,
.sem-transicao .dias-marco-data { transition: none; }


/* --- o que acontece no dia ---
   Os três dias ficam empilhados na MESMA célula da grelha. A caixa tem
   sempre a altura do dia mais comprido, por isso trocar de dia nunca faz a
   página saltar. Só o dia ativo se vê; os outros ficam transparentes e
   fora do alcance do teclado (visibility).                              */
.dias-paineis {
  margin-top: 6px;
  padding-top: 22px;
  border-top: var(--fio);
  touch-action: pan-y;
}
.dias-js .dias-paineis { display: grid; }

.dia { min-width: 0; }
.dias:not(.dias-js) .dia + .dia { margin-top: 30px; }

.dias-js .dia {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--duration-fast) ease-in-out,
              transform var(--duration-fast) var(--ease-smooth-out),
              visibility 0s linear var(--duration-fast);
}
.dias-js .dia.is-ativo {
  opacity: 1; visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.dia-rotulo {
  margin: 0 0 14px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-fraca);
}

.dia-eventos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px;
}
.dia-evento + .dia-evento { padding-top: 18px; border-top: var(--fio); }

.dia-meta {
  margin: 0 0 4px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.dia-evento h4 {
  margin: 0 0 4px;
  font-size: clamp(1.15rem, 2.8vw, 1.35rem);
  letter-spacing: -0.02em; line-height: 1.15;
}
.dia-evento p:not(.dia-meta) { margin: 0; color: var(--tinta-media); font-size: .95rem; max-width: 38ch; }

.dia-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin-top: 4px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.dia-link:hover { text-decoration: underline; }

/* Ecrãs baixos (telemóveis pequenos): o bloco preso tem de caber inteiro
   no ecrã, por isso aperta-se. A data por extenso sai, porque a data a
   vermelho na linha já diz o mesmo. */
@media (max-height: 700px) and (max-width: 699px) {
  .plano-rolar .dias-trilho { height: 108px; }
  .plano-rolar .dias-paineis { padding-top: 14px; }
  .plano-rolar .dia-rotulo { display: none; }
  .plano-rolar .dia-eventos { gap: 12px; }
  .plano-rolar .dia-evento + .dia-evento { padding-top: 12px; }
  .plano-rolar .dia-evento p:not(.dia-meta) { font-size: .9rem; }
}

@media (min-width: 700px) {
  .dia-eventos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .dia-evento + .dia-evento { padding-top: 0; border-top: 0; padding-left: 28px; border-left: var(--fio); }
}


/* --- "Porquê entrar": o título à esquerda, o texto à direita --- */
.porque-grelha { display: grid; gap: 8px clamp(36px, 5vw, 64px); }
.porque-texto p { color: var(--tinta-media); max-width: 58ch; }
.porque-texto p:first-child { color: var(--tinta); font-size: 1.08rem; }
.porque-texto .frase { color: var(--tinta); }

@media (min-width: 860px) {
  .porque-grelha { grid-template-columns: 5fr 7fr; align-items: start; }
  .porque-grelha h2 { max-width: 14ch; }
}

/* --- as frases soltas ---
   Uma por secção no máximo, a fechar um bloco. Letra do site, a peso de
   título mas de tamanho contido, sem aspas nem caixa: lê-se como uma linha
   do cartaz, não como um anúncio. A fonte vai por baixo, pequena.        */
.frase {
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding-top: 16px;
  border-top: var(--fio);
  max-width: 36ch;
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.3;
  color: var(--tinta);
  text-wrap: balance;
}
.frase-fonte {
  display: block; margin-top: 8px;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.faixa-escura .frase { color: var(--carvao-texto); border-top-color: #322b25; }

.quem-texto { color: var(--tinta-media); max-width: 44ch; }

/* O fim da página: "Ver as 17" e, por baixo, o quiz a vermelho — a última
   coisa que se vê antes do rodapé é o convite principal do site. Os dois
   com a mesma largura; no telemóvel ocupam a linha toda. */
.quem-botoes { display: grid; gap: 12px; }
@media (min-width: 620px) { .quem-botoes { max-width: 340px; } }


/* ============================================================================
   8. O MURAL — a assinatura do site
   ----------------------------------------------------------------------------
   Uma parede de fotografias da edição do ano passado, tiradas ao acaso do
   conjunto todo. De cada vez que a página abre, a seleção é outra: nenhuma
   associação tem lugar cativo.
   ============================================================================ */

.mural-cabecalho {
  display: grid; gap: 8px 40px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.mural-cabecalho h2 { margin: 0; max-width: 18ch; }
.mural-legenda {
  margin: 0;
  color: var(--carvao-fraco);
  font-size: .92rem;
  max-width: 42ch;
}

@media (min-width: 860px) {
  .mural-cabecalho { grid-template-columns: 1fr auto; align-items: end; }
  .mural-legenda { text-align: right; }
}

/* A parede.
   Uma só fotografia manda — a primeira, que ocupa quatro lugares — e as
   outras seguem-na em quadrados iguais. Chega para dar ritmo sem virar
   confusão, e tem uma vantagem prática: o mosaico fecha sempre certo, sem
   buracos, porque o número de fotografias que o js/fotos.js pede a cada
   largura é o exato para encher as quatro linhas.                          */
.mural-grelha {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(86px, 23vw, 132px);
  gap: 6px;
}
.mural-grelha li { overflow: hidden; background: var(--carvao-alto); }
.mural-grelha img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.94);
  transition: filter .3s ease, transform .45s ease;
}
.mural-grelha li:hover img { filter: none; transform: scale(1.04); }

/* a fotografia âncora */
.mural-grelha li:first-child { grid-column: span 2; grid-row: span 2; }

@media (min-width: 620px) {
  .mural-grelha { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
@media (min-width: 1000px) {
  .mural-grelha { grid-template-columns: repeat(6, 1fr); }
}

/* Uma faixa fina de fotografias, para cortar uma página comprida ao meio. */
.tira-fotos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--carvao);
}
.tira-fotos li { overflow: hidden; }
.tira-fotos img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  filter: saturate(.9);
}
@media (min-width: 620px) { .tira-fotos { grid-template-columns: repeat(6, 1fr); } }


/* ============================================================================
   8b. AS 17 ASSOCIAÇÕES EM LOGÓTIPO (pré-visualização na página inicial)
   ============================================================================ */

.logos-fila {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.logos-fila a {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--papel-alto);
  border: var(--fio);
  border-radius: var(--raio);
  padding: 10px;
  transition: border-color .14s ease;
}
.logos-fila a:hover { border-color: var(--tinta); }
.logos-fila img { max-height: 100%; width: auto; object-fit: contain; }

@media (min-width: 620px) { .logos-fila { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1000px) { .logos-fila { grid-template-columns: repeat(9, 1fr); } }


/* ============================================================================
   9. O QUIZ
   ============================================================================ */

.quiz-topo { padding: 26px 0 0; }

.progresso-texto {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
}
.progresso-texto #contador {
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: 1rem; font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.progresso-texto #contador b { color: var(--vermelho); font-weight: 700; }

.barra-progresso {
  height: 4px; background: var(--calha-fundo);
  overflow: hidden;
}
.barra-progresso span {
  display: block; height: 100%; width: 0;
  background: var(--vermelho);
  transition: width .35s cubic-bezier(.22,.7,.3,1);
}

.pergunta { padding: clamp(28px, 6vw, 52px) 0 10px; }
.pergunta h1 {
  font-size: clamp(1.6rem, 5.6vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: clamp(24px, 4vw, 34px);
  max-width: 20ch;
}

.opcoes { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }

.opcao {
  width: 100%; min-height: 62px;
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--papel-alto); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 16px 14px 14px;
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif; font-size: 1rem; line-height: 1.4;
  cursor: pointer;
  /* No telemóvel: sem o flash cinzento do browser ao tocar, e sem esperar
     para ver se é um duplo toque. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .12s ease, background-color .12s ease,
              box-shadow .12s ease, transform var(--duration-quick) var(--ease-smooth-out);
}
/* O "rato por cima" só onde há rato. No telemóvel ficava agarrado à opção
   depois do toque e passava para a pergunta seguinte. */
@media (hover: hover) {
  .opcao:hover { border-color: var(--tinta); }
  .opcao:hover .opcao-letra { border-color: var(--tinta); color: var(--tinta); }
}
/* O toque: a opção afunda um pouco enquanto o dedo está em cima. */
.opcao:active { transform: scale(.985); }

/* A letra da opção: um quadrado, não um círculo. */
.opcao-letra {
  flex: none;
  width: 34px; height: 34px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel); color: var(--tinta-fraca);
  border: 1px solid var(--linha);
  font-weight: 700; font-size: .82rem;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
/* Escolhida: um estado firme, que se lê num relance. */
.opcao.escolhida {
  border-color: var(--vermelho);
  background: var(--vermelho-papel);
  box-shadow: inset 3px 0 0 var(--vermelho);
}
.opcao.escolhida .opcao-letra {
  background: var(--vermelho-acao); color: #fff; border-color: var(--vermelho-acao);
}

.cartao-pergunta { transition: opacity .18s ease, transform .18s var(--ease-smooth-out); }
.cartao-pergunta.a-sair   { opacity: 0; transform: translateX(-12px); }
.cartao-pergunta.a-entrar { opacity: 0; transform: translateX(12px); }

.quiz-rodape { padding: 22px 0 48px; }

.btn-voltar {
  background: none; border: 0; padding: 12px 2px;
  min-height: 44px;
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-media); cursor: pointer;
}
.btn-voltar:hover { color: var(--vermelho-acao); }
.btn-voltar[hidden] { display: none; }

@media (min-width: 700px) {
  .opcoes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Em ecrãs largos o quiz passa a duas colunas: a pergunta encostada à
   esquerda, as quatro opções empilhadas à direita. Fica com a mesma âncora
   à esquerda que o resto do site, e nenhuma linha de texto fica larga
   demais para se ler de um fôlego.                                         */
@media (min-width: 1000px) {
  .cartao-pergunta {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .pergunta { padding-top: clamp(40px, 6vw, 68px); }
  .pergunta h1 { margin-bottom: 0; max-width: 14ch; }
  .opcoes { grid-template-columns: 1fr; }
}


/* ============================================================================
   10. O VOTÓMETRO — o ecrã de resultado
   ----------------------------------------------------------------------------
   Uma só família de cor, por ordem: 1.º o vermelho do ISEG, 2.º o mesmo mais
   fundo, 3.º grafite. A posição lê-se na cor, não é uma cor à sorte.
   ============================================================================ */

.resultado-topo { padding: clamp(30px, 5vw, 52px) 0 0; }
.resultado-topo h1 { max-width: 16ch; }
.resultado-topo .sub { color: var(--tinta-media); margin: 0; max-width: 46ch; }

.data-resultado {
  display: inline-block; margin: 16px 0 0;
  border-top: 2px solid var(--tinta); padding-top: 8px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-media);
}

.votometro {
  list-style: none;
  margin: clamp(28px, 5vw, 44px) 0 0;
  padding: 0;
  border-top: var(--fio);
}

.linha-resultado {
  width: 100%; text-align: left;
  background: none; border: 0;
  border-bottom: var(--fio);
  padding: 22px 0 24px;
  font-family: inherit; color: inherit; font-size: inherit;
  cursor: pointer; display: block;
  transition: background-color .14s ease;
}
.linha-resultado:hover { background: var(--papel-alto); }

.linha-cabecalho {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px; margin-bottom: 14px;
}

.linha-posicao {
  flex: none;
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: 1rem; font-weight: 800;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.linha-logo {
  flex: none; width: 56px; height: 40px;
  object-fit: contain; background: #fff;
  border: var(--fio); border-radius: 2px; padding: 3px;
}
.linha-nome {
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.2rem);
  letter-spacing: -0.02em; line-height: 1.15;
  min-width: 0;
}
.linha-percentagem {
  flex: none;
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: clamp(2.1rem, 8vw, 3rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: .9;
  font-variant-numeric: tabular-nums;
}

.calha { height: 10px; background: var(--calha-fundo); overflow: hidden; margin-bottom: 14px; }
.calha span {
  display: block; height: 100%; width: 0;
  transition: width .8s cubic-bezier(.2,.75,.3,1);
}

/* A cor de cada posição: a barra pinta-se, o número tinge-se. */
.lugar-1 .calha span { background: var(--lugar-1); }
.lugar-2 .calha span { background: var(--lugar-2); }
.lugar-3 .calha span { background: var(--lugar-3); }

.lugar-1 .linha-percentagem, .modal-tab.lugar-1 .modal-tab-pct { color: var(--lugar-1); }
.lugar-2 .linha-percentagem, .modal-tab.lugar-2 .modal-tab-pct { color: var(--lugar-2); }
.lugar-3 .linha-percentagem, .modal-tab.lugar-3 .modal-tab-pct { color: var(--lugar-3); }

/* O 1.º lugar leva um pouco mais de peso visual do que os outros dois. */
.lugar-1 .linha-nome { font-size: clamp(1.1rem, 3vw, 1.35rem); }
.lugar-1 .linha-posicao { color: var(--vermelho); }

.linha-porque { margin: 0; color: var(--tinta-media); font-size: .95rem; max-width: 56ch; }

.linha-ver-mais {
  display: inline-block; margin-top: 12px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--vermelho-acao);
}

.caixa-aviso {
  margin-top: 14px;
  background: var(--aviso-fundo);
  border-left: 3px solid var(--aviso-borda);
  padding: 12px 15px;
  color: var(--aviso-texto);
  font-size: .89rem; line-height: 1.5;
}
.caixa-aviso strong { display: block; margin-bottom: 2px; }

.nota-ponto-de-partida {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--vermelho);
  color: var(--tinta-media); font-size: .95rem;
  max-width: 56ch;
}
.nota-ponto-de-partida strong { color: var(--tinta); }

.resultado-acoes {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(28px, 4vw, 40px) 0 0;
}

.linha-apagar { padding: 28px 0 clamp(40px, 6vw, 60px); margin: 0; }

.resultado-grelha { padding-bottom: clamp(40px, 6vw, 60px); }

@media (min-width: 620px) {
  .linha-logo { width: 68px; height: 48px; }
  .resultado-acoes { flex-direction: row; }
  .resultado-acoes .btn { flex: 1; }
}

/* Em ecrãs largos: as barras à esquerda, e à direita a nota, o formulário e
   os botões — que assim ficam à vista sem ter de se fazer scroll.
   O sticky faz a coluna da direita acompanhar a leitura.                   */
@media (min-width: 1000px) {
  .resultado-grelha {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .resultado-lado { position: sticky; top: 104px; }
  .resultado-acoes { flex-direction: column; }
  .resultado-topo h1 { max-width: 14ch; }
}


/* ============================================================================
   11. O DIRETÓRIO E O PAINEL DE DETALHE
   ============================================================================ */

.dir-topo { padding: clamp(30px, 5vw, 52px) 0 0; }
.dir-topo h1 { margin-bottom: .25em; }
.dir-topo h1 em { font-style: normal; color: var(--vermelho); }
.dir-topo .sub { color: var(--tinta-media); margin: 0; }

.ferramentas {
  display: grid; gap: 14px;
  padding: clamp(24px, 4vw, 36px) 0 0;
}

.campo-pesquisa { position: relative; }
.campo-pesquisa input {
  width: 100%; min-height: 54px;
  padding: 12px 16px 12px 46px;
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif; font-size: 1rem; color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--contorno); border-radius: var(--raio);
}
.campo-pesquisa input::placeholder { color: var(--tinta-fraca); }
.campo-pesquisa input:focus { border-color: var(--tinta); }
.campo-pesquisa svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--tinta-fraca); pointer-events: none;
}

/* As áreas deslizam para o lado. Por baixo há uma barrinha sempre visível,
   porque no telemóvel a barra do browser só aparece com o dedo em cima —
   sem ela ninguém adivinha que há mais áreas fora do ecrã.
   O min-width:0 é essencial: sem ele este bloco estica a página toda.      */
.filtros-zona { position: relative; min-width: 0; }

.filtros {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 10px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }

.filtros-barra {
  height: 3px; background: var(--calha-fundo); overflow: hidden;
}
.filtros-barra span {
  display: block; height: 100%; width: 40%;
  background: var(--tinta-fraca);
  transition: transform .06s linear;
}
.filtros-barra[hidden] { display: none; }

.filtro {
  flex: none; min-height: 44px; padding: 10px 15px;
  background: transparent; color: var(--tinta-media);
  border: 1px solid var(--contorno); border-radius: var(--raio);
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif; font-size: .82rem; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.filtro:hover { border-color: var(--tinta); color: var(--tinta); }
/* A área escolhida enche-se de tinta. O vermelho fica guardado para o que
   é mesmo principal: o botão do quiz e o 1.º lugar do resultado.           */
.filtro[aria-pressed="true"] {
  background: var(--tinta); color: var(--papel); border-color: var(--tinta);
}

.contagem {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--tinta-fraca);
  padding: 22px 0 14px;
  margin: 0;
  border-bottom: var(--fio);
}

.grelha {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: 1fr;
}
.grelha > li { display: flex; }

/* Cartões chãos: fio fino e papel. Nada de sombra — a sombra fica reservada
   para o painel que abre por cima de tudo.                                 */
.cartao {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; gap: 16px;
  background: none;
  border: 0; border-bottom: var(--fio);
  padding: 22px 4px;
  font-family: inherit; color: inherit; font-size: inherit;
  cursor: pointer;
  transition: background-color .14s ease;
}
.cartao:hover { background: var(--papel-alto); }

.cartao-logo {
  flex: none; width: 68px; height: 50px;
  object-fit: contain; background: #fff;
  border: var(--fio); border-radius: 2px; padding: 4px;
}
.cartao-texto { min-width: 0; }
.cartao-nome {
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-weight: 700; font-size: 1.08rem;
  letter-spacing: -0.02em; line-height: 1.2;
  margin-bottom: 5px;
}
.cartao-desc { color: var(--tinta-media); font-size: .92rem; margin: 0; }

/* A área é uma etiqueta discreta com um traço à frente — não uma medalha
   colorida. As 7 áreas partilham o mesmo tom de propósito.                 */
.cartao-cat {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-top: 10px;
}
.cartao-cat::before {
  content: ""; width: 14px; height: 2px; flex: none;
  background: var(--linha-forte);
  margin-top: .62em;              /* alinha o tracinho com a 1.ª linha do texto */
}

.sem-resultados {
  padding: 48px 4px; color: var(--tinta-media);
  border-bottom: var(--fio);
}

/* A partir de duas colunas os cartões precisam de um fio a separá-los ao
   lado, senão colam-se um ao outro.                                        */
@media (min-width: 660px) {
  .grelha { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
}
@media (min-width: 1040px) {
  .grelha { grid-template-columns: repeat(3, 1fr); column-gap: 36px; }
  .ferramentas { grid-template-columns: minmax(260px, 1fr) 2fr; align-items: start; }
}

/* --------------------------------------------------------------- painel --- */

.modal-fundo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(16,12,10,.62);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0;
  transition: opacity var(--modal-close-dur) var(--modal-ease);
}
.modal-fundo[hidden] { display: none; }
.modal-fundo.is-open { opacity: 1; transition-duration: var(--modal-open-dur); }
/* A fechar, o fundo já não apanha toques: quem tocar logo noutra
   associação abre-a, em vez de o toque se perder no fundo a desaparecer. */
.modal-fundo.is-closing { pointer-events: none; }

.modal {
  background: var(--papel);
  width: 100%; max-width: 640px; max-height: 92vh;
  max-height: 92dvh;          /* no iPhone, conta com a barra do browser à vista */
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 -2px 60px rgba(0,0,0,.35);
  position: relative;
}

/* Abrir e fechar o painel (modal de transitions.dev): cresce de 96% ao
   abrir, em 250ms, e fecha mais depressa, em 150ms. O js/modal-associacao.js
   põe o .is-open e o .is-closing. */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

/* No telemóvel o painel é uma folha que sobe do fundo: sobe em vez de
   crescer, com os mesmos tempos. */
@media (max-width: 619px) {
  .t-modal, .t-modal.is-closing { transform: translateY(24px); }
  .t-modal.is-open { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

.modal-cabecalho {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 22px 22px 18px;
  position: sticky; top: 0; z-index: 2;
  background: var(--papel); border-bottom: var(--fio);
}
.modal-logo {
  flex: none; width: 72px; height: 52px;
  object-fit: contain; background: #fff;
  border: var(--fio); border-radius: 2px; padding: 4px;
}
.modal-titulo { flex: 1; min-width: 0; }
.modal-titulo h2 {
  font-size: 1.2rem; margin: 0 0 6px;

}
.modal-titulo .cat {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--tinta-fraca);
}

.modal-fechar {
  flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--contorno);
  border-radius: var(--raio); cursor: pointer; color: var(--tinta);
  font-size: 1rem; line-height: 1;
  transition: background-color .14s ease, border-color .14s ease;
}
.modal-fechar:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.modal-corpo { padding: 22px 22px 32px; }
.modal-corpo > p { font-size: .98rem; color: var(--tinta-media); }

.modal-video {
  margin: 20px 0 4px;
  aspect-ratio: 16 / 9; width: 100%;
  background: #000; border-radius: var(--raio); overflow: hidden;
}
.modal-video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Post do LinkedIn: cartão vertical (o vídeo é 4:5), com a largura que o LinkedIn desenha. */
.modal-video--linkedin {
  aspect-ratio: 504 / 760; max-width: 504px; margin-inline: auto;
  background: #fff;
}
/* YouTube Shorts: vídeo vertical 9:16, centrado e sem esticar demasiado em altura. */
.modal-video--vertical {
  aspect-ratio: 9 / 16; width: min(360px, 100%, 70vh * 9 / 16);
  margin-inline: auto;
}

.modal-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.link-social {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 11px 17px;
  background: var(--papel-alto);
  border: 1px solid var(--contorno); border-radius: var(--raio);
  font-size: .86rem; font-weight: 700; color: var(--tinta);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.link-social svg { flex: none; }
.link-social:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* Saltar entre as 3 associações do resultado sem fechar o painel. */
.modal-tabs {
  display: flex; gap: 6px;
  padding: 12px 22px;
  border-bottom: var(--fio);
  background: var(--papel-alto);
  overflow-x: auto; scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar { display: none; }
.modal-tabs[hidden] { display: none; }

.modal-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 7px 9px;
  background: none; color: var(--tinta-media);
  border: 1px solid transparent; border-radius: var(--raio);
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif; font-size: .78rem; font-weight: 700;
  text-align: left; cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.modal-tab:hover { border-color: var(--linha-forte); }
.modal-tab[aria-selected="true"] { background: var(--papel); border-color: var(--tinta); }
.modal-tab-logo {
  width: 38px; height: 27px; border-radius: 2px;
  object-fit: contain; background: #fff; border: var(--fio); flex: none; padding: 2px;
}
.modal-tab-texto { min-width: 0; overflow: hidden; }
.modal-tab-pos {
  display: block; font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca);
}
.modal-tab-pct {
  display: block;
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: 1rem; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 620px) {
  .modal-fundo { align-items: center; padding: 24px; }
  .modal { border-radius: var(--raio-g); }
}


/* ============================================================================
   12. O FORMULÁRIO, PÁGINA VAZIA E RODAPÉ
   ============================================================================ */

/* O passo seguinte depois do resultado: a inscrição no speed dating e nas
   round tables. Leva peso de botão, mas a tinta e não a vermelho: o
   vermelho continua a ser só de "Ver todas as associações", a ação
   principal do site. Tinta cheia pesa o mesmo sem as pôr a competir. */
.bloco-formulario {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-top: 22px;
  border-top: 2px solid var(--tinta);
}
.bloco-formulario .sobrescrito { margin-bottom: 8px; }
.bloco-formulario-texto { color: var(--tinta); font-weight: 500; margin: 0 0 16px; max-width: 40ch; }
.bloco-formulario .btn { width: 100%; text-align: left; }

.btn-tinta { background: var(--tinta); color: var(--papel); }
.btn-tinta:hover { background: #3a332e; }
.btn-tinta .seta-fora { flex: none; transition: transform var(--duration-quick) var(--ease-smooth-out); }
.btn-tinta:hover .seta-fora { transform: translate(2px, -2px); }

.nota-guardado {
  margin: 18px 0 0; padding: 14px 16px;
  background: var(--vermelho-papel);
  border-left: 3px solid var(--vermelho);
  color: var(--tinta); font-size: .89rem;
  display: flex; align-items: flex-start; gap: 10px;
}
.nota-guardado svg { flex: none; margin-top: 2px; color: var(--vermelho-acao); }

@media (min-width: 620px) {
  .bloco-formulario .btn { width: auto; }
}

/* --- quando ainda não há resultado guardado neste aparelho --- */
.vazio { padding: clamp(48px, 10vw, 90px) 0; max-width: 40ch; }
.vazio h2 { margin-bottom: .4em; }
.vazio p { color: var(--tinta-media); margin-bottom: 26px; }

/* --------------------------------------------------------------- rodapé --- */

.rodape {
  background: var(--carvao);
  color: var(--carvao-fraco);
  padding: clamp(40px, 6vw, 64px) 0 clamp(36px, 5vw, 52px);
  font-size: .87rem;
}
.rodape a { color: var(--carvao-texto); }
.rodape p { margin: 0 0 .5em; max-width: 56ch; }
.rodape .rodape-nome {
  font-family: "Sharp Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--carvao-texto);
  margin-bottom: 14px;
}
.rodape-fim {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid #322b25;
  font-size: .8rem; font-weight: 400;
  /* Sem maiúsculas nem espacejamento: é o nome próprio da escola, e em
     maiúsculas ficava a gritar e a ocupar três linhas no telemóvel. */
  letter-spacing: 0;
  color: #8b8279;                   /* 4.6:1 sobre o carvão */
}


/* ============================================================================
   13. MOVIMENTO
   ----------------------------------------------------------------------------
   Três coisas mexem, e todas com a escala do :root (--duration-*):
     - as secções da página inicial entram ao aparecer no ecrã;
     - o painel de detalhe abre e fecha (secção 11);
     - a mudança de página faz um cruzamento rápido, onde o browser deixa.
   O quiz continua a avançar em 200ms e as barras do resultado continuam a
   encher como antes.
   ============================================================================ */

/* --- a entrada das secções (texts reveal de transitions.dev) ---
   O js/comum.js põe as classes. Diferenças em relação ao original, de
   propósito: sem desfoque (filter: blur em blocos grandes pesa num
   telemóvel antigo), e sem display:block (as linhas aqui são grelhas e
   listas, e perdiam o layout).                                            */
.t-stagger .t-stagger-line {
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity;
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
}

/* --- mudar de página ---
   Ao chegar a uma página, o conteúdo (não o cabeçalho) aparece num
   cruzamento de 250ms. Só CSS: funciona em file:// e em https://, e não
   atrasa nada, porque a página já está toda lá por baixo.
   (Experimentou-se a transição entre páginas do próprio browser, a View
   Transition. Saiu: atirava um erro à consola sempre que uma página
   redirecionava a meio do carregamento, como no fim do quiz.)           */
main { animation: pagina-entra var(--duration-fast) var(--ease-smooth-out) both; }
@keyframes pagina-entra { from { opacity: 0; } to { opacity: 1; } }

/* --- quem prefere menos movimento ---
   O sistema operativo tem uma opção para reduzir animações. Quem a ligar vê
   o site todo já no estado final, sem transições nenhumas.                */
@media (prefers-reduced-motion: reduce) {
  .t-stagger .t-stagger-line { opacity: 1; transform: none; transition: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .mural-grelha li:hover img { transform: none; }
}