/* ==========================================================================
   SITE PÚBLICO — Clube de Programação SENAI CIMATEC

   Chamava-se `style_home.css` enquanto existia uma página pública só. Hoje
   veste as duas — `/` e `/seja-membro` — pelo layout compartilhado
   `views/layouts/site.njk`, que é quem desenha a navbar, os três modais e o
   rodapé de ambas.

   As variáveis vêm de `css/site/tokens.css`, carregado antes deste arquivo.

   A página tem uma ideia só: o pato é a fonte de luz. O brilho âmbar nasce
   atrás do mascote no topo, a grade de fundo clareia perto dele, e o mesmo
   brilho volta mais fraco na chamada final — a luz vai apagando conforme se
   desce. Todo o resto é escuro, quieto e alinhado, para que sobre atenção
   para esse único gesto.

   Ordem: base · fundo · tarja de aviso · navegação · estrutura de seção ·
   revelação · botões · hero · quem somos · diretoria · faixa ·
   cabeçalho de página interna ·
   PROSEL · benefícios · ações · clubes · redes e maratona · Help CIMATEC ·
   modais · rodapé · responsivo · movimento reduzido.

   A ORDEM DO ARQUIVO NÃO É A ORDEM DA TELA. As regras de "redes e maratona",
   por exemplo, só aparecem dentro de um modal; as de PROSEL e clubes, só na
   /seja-membro. Elas ficam agrupadas por parentesco visual (tudo o que é
   cartão perto de tudo o que é cartão), que é o que faz uma mudança de estilo
   ser um lugar só.
   ========================================================================== */


/* ==========================================================================
   BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* A navbar flutua sobre o conteúdo; sem isto as âncoras param embaixo dela.
     A tarja de aviso entra por cima da navbar e empurra tudo para baixo: sem o
     `--tarja-h` aqui, o destino de `/seja-membro#prosel` — que é justamente o
     link do aviso — para com o título escondido atrás da barra. */
  scroll-padding-top: calc(96px + var(--tarja-h));
  -webkit-text-size-adjust: 100%;
  /* Precisa estar aqui e não só no body: o body sozinho não segura a rolagem
     horizontal, porque o overflow do viewport é decidido no elemento raiz. Em
     celular o brilho do pato (`.duck-light`, 712px) e o `.cta-duck` passavam da
     largura da tela e a página andava de lado.
     `clip` em vez de `hidden` para não criar um contêiner de rolagem, o que
     quebraria qualquer `position: sticky` dentro da página. */
  overflow-x: clip;
}

body {
  min-height: 100vh;
  /* A tarja é `fixed`: ela sai do fluxo e cobriria o topo da página. Este
     respiro é o que devolve o espaço dela ao conteúdo — e vale zero quando a
     tarja não está no ar, porque aí `--tarja-h` é 0px. */
  padding-top: var(--tarja-h);
  background: var(--breu);
  color: var(--giz);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
  `height: auto` NÃO É DECORAÇÃO — é o que faz `aspect-ratio` funcionar.

  Toda imagem do site carrega `width` e `height` no HTML (o navegador reserva o
  espaço antes de baixar o arquivo, e sem isso a página pula quando cada foto
  chega). Só que esses atributos viram uma dica de estilo real: com largura E
  altura definidas, o `aspect-ratio` do CSS é simplesmente ignorado.

  Foi assim que a foto da turma dentro do modal da SEMCOMP — 1600×1200 e um
  `aspect-ratio: 16/9` que deveria recortá-la numa faixa — apareceu com 1200px
  de altura e engoliu o modal inteiro: o botão de inscrição ficou fora da tela.

  Com `height: auto` a altura volta a ser calculada (pela proporção, quando há
  uma; pelo arquivo, quando não há). Quem precisa de altura fixa continua
  pedindo na própria regra — `.director-foto` e `.prosel-foto img` fazem isso.
*/
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Texto que existe só para o leitor de tela.

   O modal da SEMCOMP é titulado pelo letreiro de neon, que é uma imagem — e o
   `aria-labelledby` do diálogo precisa apontar para TEXTO, não para um `alt`.
   O <h2> real fica aqui, fora da tela e dentro da árvore de acessibilidade.

   `clip-path` e 1px em vez de `display: none` ou `visibility: hidden`: essas
   duas tiram o elemento da árvore também, e aí não sobra nome nenhum para o
   diálogo — que é exatamente o problema que isto resolve. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--ambar);
  color: #1c0e02;
}

/* O <select> nativo herda o fundo do sistema; no escuro fica ilegível. */
option {
  background: var(--sombra);
  color: var(--giz);
}

/* Conteúdo acima das camadas de luz do fundo. */
nav,
.mobile-menu,
.hero,
section,
footer,
.modal-overlay {
  position: relative;
  z-index: 1;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}


/* ==========================================================================
   FUNDO — as duas camadas de luz

   A grade não é uniforme: a máscara a concentra no canto onde o pato está,
   então ela parece iluminada por ele e some no resto da página.
   ========================================================================== */

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 62% 55% at 74% 16%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 62% 55% at 74% 16%, #000 0%, transparent 72%);
}

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(242, 138, 31, 0.06), transparent 62%);
  will-change: transform;
}


/* ==========================================================================
   TARJA DE AVISO — a faixa fixa no topo das três telas públicas

   O mesmo assunto do pop-up (`#modalAviso`), com um papel diferente: o modal
   interrompe UMA vez e some para sempre; a tarja fica. Quem fechou o pop-up na
   home e navegou até a /semcomp continua vendo que o PROSEL está aberto, sem
   ser interrompido de novo. Por isso as duas dispensas são independentes —
   `aviso:<campanha>` no localStorage é do modal, `tarja:<campanha>` é daqui.

   TODA A GEOMETRIA PASSA POR `--tarja-h`, e é de propósito. A navbar e o menu
   do celular são `position: fixed` com um `top` em pixels; o corpo da página é
   fluxo normal. Um número solto repetido nesses três lugares é como uma tarja
   de 46px convive com uma navbar que desceu 44 — o encaixe some no dia em que
   o texto mudar de altura. Com a variável, a altura é declarada UMA vez, aqui,
   e os três acompanham.

   A ALTURA É FIXA (`height`, não `min-height`) pela mesma razão: `--tarja-h`
   promete uma altura ao resto da folha, e texto que quebra em duas linhas
   quebraria a promessa — a navbar ficaria por cima da tarja. Daí o `nowrap` e
   o detalhe que some no celular, onde ele não caberia.

   `display: none` por padrão, e não `hidden` no HTML: quem decide é a classe
   `com-tarja` no <html>, escrita por um script no <head> antes da primeira
   pintura (ver `layouts/site.njk`). Se a decisão viesse depois, o visitante que
   já dispensou a tarja veria a página inteira dar um pulo de 46px ao carregar.
   ========================================================================== */

:root {
  --tarja-h: 0px;
}

:root.com-tarja {
  --tarja-h: 46px;
}

.tarja {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* O mesmo plano da navbar — as duas se encostam e nunca se sobrepõem. Abaixo
     dos modais (200), que precisam cobrir a tarja junto com o resto. */
  z-index: 100;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--tarja-h);
  /* À direita sobra o dobro: é onde o botão de fechar fica, por cima. */
  padding: 0 clamp(40px, 7vw, 64px) 0 clamp(14px, 3vw, 24px);
  border-bottom: 1px solid var(--ambar-traco);
  /* A luz continua vindo de um lugar só: o âmbar nasce à esquerda, junto do
     ponto que pulsa, e se apaga antes da metade. Uma barra âmbar de ponta a
     ponta seria a coisa mais forte da tela, acima do próprio pato. */
  background:
    linear-gradient(90deg, rgba(255, 77, 0, 0.16), rgba(255, 77, 0, 0) 58%),
    rgba(10, 9, 13, 0.94);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

:root.com-tarja .tarja {
  display: flex;
}

/* `nowrap` é obrigatório: a altura da tarja é fixa e uma segunda linha sairia
   por baixo dela, atrás da navbar. As reticências são a rede de segurança para
   quando a frase mesmo assim não couber — o corte de verdade é o
   `.tarja-detalhe` sumindo em 860px, lá no responsivo. */
.tarja-texto {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--fumaca);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarja-texto strong {
  font-weight: 600;
  color: var(--giz);
}

.tarja-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--ambar);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #170c02;
  transition: background var(--transicao);
}

.tarja-cta:hover {
  background: var(--gema);
}

/* Absoluto, e não um terceiro item do flex: assim a mensagem fica centrada na
   TELA, e não no espaço que sobra dela até o X. */
.tarja-fechar {
  position: absolute;
  top: 50%;
  right: clamp(6px, 1.5vw, 14px);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--cinza);
  transition: color var(--transicao), background var(--transicao);
}

.tarja-fechar:hover {
  color: var(--giz);
  background: rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   NAVEGAÇÃO
   ========================================================================== */

nav {
  position: fixed;
  top: calc(14px + var(--tarja-h));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: calc(100% - 28px);
  max-width: var(--largura);
  height: 58px;
  padding: 0 10px 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background var(--transicao), border-color var(--transicao),
    backdrop-filter var(--transicao);
}

/* Sem rolagem a barra some no fundo; ela só ganha corpo quando passa a
   flutuar sobre o conteúdo. */
nav.scrolled {
  background: rgba(8, 8, 11, 0.72);
  border-color: var(--traco);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

/* Sem border-radius nem moldura: o logo já é um círculo desenhado com o fundo
   transparente, e recortá-lo de novo só comia a borda do traço. */
.nav-logo img {
  width: 36px;
  height: 36px;
}

.nav-logo span {
  font-family: var(--marca);
  font-weight: 400;
  font-size: 1.06rem;
  letter-spacing: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

/*
  `a` E `button` na mesma regra: dois dos quatro itens da barra (Comunidade e
  SEMCOMP) abrem modal em vez de navegar, e um <button> é o elemento certo para
  isso — <a href="#"> mentiria sobre haver uma seção para onde ir, e deixaria um
  "#" no endereço se o JavaScript falhasse. O preço é que o botão herda a
  aparência do sistema, então a pílula precisa ser desenhada nos dois.
*/
.nav-links li > a,
.nav-links li > button {
  display: block;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--texto);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: inherit;
  color: var(--fumaca);
  cursor: pointer;
  /* Sem isto "Seja Membro" quebra em duas linhas quando a barra aperta, e a
     altura da pílula cresce junto — a barra inteira sai do lugar. */
  white-space: nowrap;
  transition: color var(--transicao), background var(--transicao);
}

.nav-links li > a:hover,
.nav-links li > button:hover {
  color: var(--giz);
  background: rgba(255, 255, 255, 0.05);
}

/*
  A BARRA TEM UM SÓ BOTÃO PREENCHIDO, e ele é o Login.

  Três níveis, e não mais: texto cinza (Comunidade, SEMCOMP), texto âmbar
  (Seja Membro) e pílula cheia (Login). "Seja Membro" é o destino que a página
  mais quer, mas transformá-lo numa segunda pílula cheia poria duas manchas
  âmbar lado a lado disputando a mesma atenção — e a barra viraria uma fileira
  de botões, onde nada se destaca porque tudo se destaca. Cor sozinha basta:
  ele é o único item âmbar no meio de texto cinza.

  Selector com o `li` incluído para vencer a regra base sem !important.
*/
.nav-links li a.nav-destaque {
  color: var(--ambar);
  font-weight: 600;
}

.nav-links li a.nav-destaque:hover {
  color: var(--gema);
  background: var(--ambar-lavagem);
}

.nav-links li a.nav-cta,
.mobile-menu a.nav-cta {
  padding: 9px 20px;
  background: var(--ambar);
  color: #170c02;
  font-weight: 600;
}

.nav-links li a.nav-cta:hover,
.mobile-menu a.nav-cta:hover {
  background: var(--gema);
  color: #170c02;
}

/* ---- Menu do usuário logado ---- */

.user-menu {
  position: relative;
  margin-left: 6px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ambar-traco);
  background: var(--ambar-lavagem);
  color: var(--gema);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background var(--transicao), border-color var(--transicao);
}

.user-avatar:hover {
  background: rgba(242, 138, 31, 0.18);
  border-color: var(--ambar);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 216px;
  padding: 7px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: rgba(16, 15, 20, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--elevacao);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transicao), transform var(--transicao),
    visibility var(--transicao);
}

.user-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown-header {
  padding: 11px 13px 12px;
}

.user-dropdown-header strong {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.user-dropdown-header span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ambar);
}

.user-dropdown-divider {
  height: 1px;
  margin: 5px 0;
  background: var(--traco);
}

.user-dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 0.9rem;
  color: var(--fumaca);
  transition: color var(--transicao), background var(--transicao);
}

.user-dropdown-item:hover {
  color: var(--giz);
  background: rgba(255, 255, 255, 0.05);
}

.user-dropdown-logout:hover {
  color: var(--vermelho);
  background: rgba(242, 86, 75, 0.1);
}

/* ---- Hambúrguer e menu mobile ---- */

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 101;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--giz);
  transition: transform 0.3s var(--transicao), opacity 0.2s ease;
}

/* O X é desenhado AQUI, e não por três `style.transform` escritos pelo JS.

   Aparência que mora no JavaScript não passa pelo `prefers-reduced-motion` do
   fim do arquivo: quem pede menos movimento continuava vendo as barras
   girarem. E o estado do menu já é uma classe (`.open` no menu, `aria-expanded`
   no botão) — a terceira representação do mesmo estado, em atributos inline,
   era só mais uma coisa para dessincronizar. */
.hamburger.aberto span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.hamburger.aberto span:nth-child(2) {
  opacity: 0;
}

.hamburger.aberto span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  /* Desce junto com a navbar, que é de onde ele sai. */
  top: calc(80px + var(--tarja-h));
  left: 14px;
  right: 14px;
  z-index: 99;
  padding: 10px;
  border: 1px solid var(--traco);
  border-radius: var(--r-lg);
  background: rgba(8, 8, 11, 0.96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--elevacao);
  animation: menuDesce 0.26s var(--transicao);
}

.mobile-menu.open {
  display: block;
}

@keyframes menuDesce {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* `a` e `button` juntos: Comunidade e SEMCOMP abrem modal e por isso são
   <button>, mas no menu do celular eles têm de parecer e medir exatamente
   como os itens que navegam. */
.mobile-menu a,
.mobile-menu button {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  font-family: var(--texto);
  font-size: 1rem;
  font-weight: 500;
  line-height: inherit;
  color: var(--fumaca);
  cursor: pointer;
  transition: color var(--transicao), background var(--transicao);
}

.mobile-menu a:hover,
.mobile-menu button:hover {
  color: var(--giz);
  background: rgba(255, 255, 255, 0.05);
}

/* O `padding: 9px 20px` vem da regra da pílula da barra, lá em cima, e ela
   desenha um alvo para o mouse. Aqui dentro ele deixava o Login com 44px de
   altura no meio de itens de 54px — e logo o item DESTACADO era o menor e o
   mais difícil de acertar com o polegar. O respiro do menu vale para todos. */
.mobile-menu a.nav-cta {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  text-align: center;
}

.mobile-logout-btn {
  color: var(--vermelho);
}


/* ==========================================================================
   ESTRUTURA DE SEÇÃO
   ========================================================================== */

section {
  padding: var(--secao-y) 0;
}

.divider {
  height: 1px;
  border: 0;
  /* Some nas pontas: o filete marca a pausa sem cortar a página em fatias. */
  background: linear-gradient(90deg, transparent, var(--traco) 18%, var(--traco) 82%, transparent);
}

/* O rótulo `// alguma coisa` é a voz do clube — comentário de código. O
   filete à esquerda o ancora na margem em vez de deixá-lo solto. */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar);
}

.section-label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--ambar);
  opacity: 0.55;
}

/* Títulos na fonte da marca (--marca). Ela é escrita à mão, então não leva o
   aperto de tracking que a grotesca pedia: letra manuscrita apertada embola. */
.section-title {
  margin: 22px 0 20px;
  font-family: var(--marca);
  font-size: var(--t-secao);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.section-desc {
  max-width: 56ch;
  margin-bottom: 58px;
  font-size: var(--t-sub);
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}

/*
  O cabeçalho de seção com o número na margem.

  O índice (`01`, `02`, `03`) fica FORA da coluna do texto, alinhado com a
  primeira linha do rótulo. Ele não é decoração: as duas páginas passaram a ter
  três blocos cada, e o número é o que diz em que ponto do percurso a pessoa
  está sem ela ter de contar as seções que rolou.

  `aria-hidden` no HTML — o número não acrescenta nada em voz alta, e "zero um,
  barra barra quem somos" é pior do que só o título.
*/
.secao-topo {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 34px);
}

.secao-indice {
  flex-shrink: 0;
  padding-top: 2px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ambar);
  opacity: 0.7;
}

/* O rótulo, o título E a descrição vivem juntos nesta coluna.

   A descrição ficava fora do `.secao-topo`, como irmã dele: alinhava com a
   margem do container enquanto o título alinhava depois do número, e as duas
   linhas do bloco começavam em pontos diferentes — um degrau de ~56px que só
   aparecia depois que o índice entrou. Dentro da coluna as três partes têm a
   mesma margem esquerda, seja qual for a largura do número. */
.secao-corpo {
  min-width: 0;
}

/* Link de texto com seta que anda no hover. É o fecho de um parágrafo, não um
   botão: usar `.btn-*` aqui daria a um "ver mais" o mesmo peso visual de uma
   inscrição. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambar);
  transition: gap var(--transicao), color var(--transicao);
}

.link-seta:hover {
  gap: 15px;
  color: var(--gema);
}

/* Um <button> que abre modal no meio de um parágrafo. Ele precisa parecer link
   (é o que faz a frase funcionar) sem ser um <a>, porque não navega. */
.link-botao {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ambar-traco);
  background: none;
  font: inherit;
  color: var(--ambar);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}

.link-botao:hover {
  color: var(--gema);
  border-color: var(--gema);
}

/* A frase solta que fecha uma seção — "prefere só acompanhar de longe?". Fica
   centrada e em cinza: é uma saída lateral, não o caminho principal. */
.secao-rodape {
  margin-top: 40px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--fumaca);
  text-wrap: pretty;
}

.secao-rodape strong {
  color: var(--giz);
  font-weight: 600;
}


/* ==========================================================================
   REVELAÇÃO NA ROLAGEM
   As classes são adicionadas por main.js via IntersectionObserver.
   ========================================================================== */

.fade-in,
.fade-in-left,
.fade-in-right {
  opacity: 0;
  transition: opacity 0.7s var(--transicao), transform 0.7s var(--transicao);
}

.fade-in       { transform: translateY(22px); }
.fade-in-left  { transform: translateX(-26px); }
.fade-in-right { transform: translateX(26px); }

.fade-in.visible,
.fade-in-left.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: none;
}

/* Filhos entram em cascata, não todos de uma vez. */
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.19s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.26s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.33s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.47s; }


/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--texto);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao),
    color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.btn-primary {
  background: var(--ambar);
  color: #170c02;
  box-shadow: 0 0 0 rgba(242, 138, 31, 0);
}

.btn-primary:hover {
  background: var(--gema);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(242, 138, 31, 0.55);
}

/* O CTA prioritário: um só na página inteira, no pé do PROSEL.

   Cresce por padding e por corpo de letra, e ganha um anel que respira. O anel
   é `box-shadow` e não `outline` nem elemento extra: `box-shadow` não ocupa
   espaço no layout, então o botão pode pulsar sem empurrar o `.btn-outline` ao
   lado dele a cada quadro.

   A animação é `box-shadow` pura — sem `transform`, que é o jeito barato de
   pulsar mas borraria a letra do botão duas vezes por segundo em tela comum.

   O ANEL PARADO ESTÁ NA REGRA, não só no quadro 100% da animação, e isso é o
   que faz o botão sobreviver a `prefers-reduced-motion`. A regra universal lá
   no fim do arquivo não CANCELA animação: ela encurta a duração para 0,01ms e
   prende a contagem em 1. A animação roda inteira num piscar e termina — e
   como o `animation-fill-mode` é `none`, o estilo computado volta ao que a
   folha declara. Se o anel existisse só dentro do `@keyframes`, o que sobraria
   para quem pediu menos movimento seria o `box-shadow` transparente herdado do
   `.btn-primary`: nenhum anel. Declarado aqui, ele fica. */
.btn-primary--grande {
  padding: 18px 34px;
  font-size: 1.03rem;
  box-shadow: 0 0 0 4px rgba(242, 138, 31, 0.22);
  animation: anel-pulsante 2.8s ease-in-out infinite;
}

/* No ponteiro o botão para de chamar — quem já o encontrou não precisa mais
   ser chamado, e aí vale o `box-shadow` de elevação do `.btn-primary:hover`
   (que ganha por especificidade, classe + pseudo-classe). */
.btn-primary--grande:hover {
  animation: none;
}

@keyframes anel-pulsante {
  0%, 100% { box-shadow: 0 0 0 4px rgba(242, 138, 31, 0.22); }
  55%      { box-shadow: 0 0 0 14px rgba(242, 138, 31, 0); }
}

/* Aqui existia um `.btn-primary:disabled` para o botão de inscrição enquanto o
   formulário do evento não existia. Ninguém mais desabilita botão nenhum: sem
   link, o template não desenha o botão — no lugar dele entra a `.event-nota`
   dizendo que as inscrições ainda não abriram. Botão apagado é um botão que a
   pessoa tenta clicar; frase é frase. */

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--traco-forte);
  color: var(--giz);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--traco-forte);
  transform: translateY(-2px);
}

.btn-outline {
  border-color: var(--ambar-traco);
  color: var(--ambar);
}

.btn-outline:hover {
  background: var(--ambar-lavagem);
  border-color: var(--ambar);
  color: var(--gema);
  transform: translateY(-2px);
}


/* ==========================================================================
   HERO — o pato é a fonte de luz

   Assimétrico de propósito: a afirmação ocupa a esquerda em caixa baixa e o
   mascote ocupa a direita, grande, com o brilho saindo de trás dele.
   ========================================================================== */

.hero {
  padding: 168px 0 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  min-height: min(72vh, 620px);
}

/* ---- O ponto que pulsa ----

   O mesmo "no ar" de transmissão ao vivo. Marca o que está aberto AGORA: o
   selo do PROSEL na /seja-membro e o do modal da SEMCOMP. É o único movimento
   contínuo do site fora do pato, então é lento e discreto — um pisca-pisca
   aqui competiria com o mascote.

   O halo é um `box-shadow` que cresce e some, e não um segundo elemento: assim
   ele não ocupa espaço no fluxo e não desalinha o texto do selo.

   AQUI EXISTIAM AS TARJAS DO HERÓI (`.hero-avisos`, `.aviso`), duas pílulas
   anunciando PROSEL e SEMCOMP acima do <h1>. Elas sumiram junto com as seções
   que anunciavam: o PROSEL mudou para a /seja-membro e a SEMCOMP para um modal
   da navbar, e a home não fala mais de prazo nenhum. O ponto ficou porque
   agora ele mora nos dois destinos. */
.aviso-ponto {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brasa);
  box-shadow: 0 0 0 0 rgba(255, 77, 0, 0.6);
  animation: pulso-vivo 2.4s ease-out infinite;
}

@keyframes pulso-vivo {
  0%   { box-shadow: 0 0 0 0 rgba(255, 77, 0, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 77, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 0, 0); }
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ambar);
}

.hero-brand::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ambar);
  opacity: 0.55;
}

.hero-title {
  font-weight: 400;
}

.hero-statement {
  display: block;
  font-family: var(--marca);
  font-size: var(--t-hero);
  font-weight: 400;
  /* Manuscrita tem ascendente e descendente longos; 0.94 fazia as linhas se
     tocarem. */
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.hero-statement .highlight {
  color: var(--ambar);
}

.hero-line {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--fumaca);
  min-height: 2.6em;
}

.hero-line::before {
  content: "> ";
  color: var(--ambar);
}

/* Cursor piscando enquanto main.js digita; `.done` chega no fim. */
.hero-typing::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.14em;
  background: var(--ambar);
  animation: pisca 1.05s steps(2, start) infinite;
}

.hero-typing.done::after {
  display: none;
}

@keyframes pisca {
  to { visibility: hidden; }
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 38px;
}

/* ---- O mascote e a luz ---- */

.hero-duck {
  position: relative;
  display: grid;
  place-items: center;
}

.duck-light {
  position: absolute;
  inset: -42% -34%;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(255, 77, 0, 0.33) 0%,
    rgba(242, 138, 31, 0.15) 27%,
    rgba(242, 138, 31, 0.045) 47%,
    transparent 70%
  );
  filter: blur(8px);
  animation: respira 7.5s ease-in-out infinite;
}

.duck-mark {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: auto;
  /* O halo é a mesma luz do `.duck-light`, mas colada no traço do desenho. */
  filter:
    drop-shadow(0 0 54px rgba(255, 77, 0, 0.42))
    drop-shadow(0 0 16px rgba(255, 180, 90, 0.22));
  animation: bico 9s ease-in-out infinite;
}

@keyframes respira {
  0%, 100% { transform: scale(1);    opacity: 0.86; }
  50%      { transform: scale(1.07); opacity: 1; }
}

@keyframes bico {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.1deg); }
}

/* ---- Faixa de números ---- */

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(56px, 8vw, 90px);
  border-top: 1px solid var(--traco);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 30px 26px 4px;
  border-left: 1px solid var(--traco);
}

.stat-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.stat-number,
.stat-fixed {
  display: flex;
  align-items: flex-end;
  min-height: 2.4rem;
  font-family: var(--mono);
  font-weight: 500;
  line-height: 1;
  color: var(--giz);
}

.stat-number {
  font-size: clamp(1.9rem, 3.4vw, 2.35rem);
  letter-spacing: -0.04em;
}

.stat-number span {
  color: var(--ambar);
  font-size: 0.62em;
  margin-left: 1px;
}

.stat-fixed {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  letter-spacing: -0.02em;
}

.stat-label {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}


/* ==========================================================================
   QUEM SOMOS
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: start;
}

.about-text p {
  color: var(--fumaca);
  text-wrap: pretty;
}

.about-text p + p {
  margin-top: 20px;
}

/* Primeiro parágrafo maior: dá um ponto de entrada para a leitura. */
.about-text p:first-child {
  font-size: 1.15rem;
  line-height: 1.58;
  color: var(--giz);
}

.about-text strong {
  color: var(--giz);
  font-weight: 600;
}

/* Sem caixas: os três valores são separados por filete, como itens de uma
   lista, e não competem com os cartões que vêm depois na página. */
.about-values {
  display: flex;
  flex-direction: column;
}

.value-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  padding: 26px 0;
  border-top: 1px solid var(--traco);
}

.about-values > .value-card:first-child {
  padding-top: 0;
  border-top: 0;
}

.value-icon {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ambar-traco);
  border-radius: var(--r-sm);
  background: var(--ambar-lavagem);
}

.value-card h3 {
  align-self: center;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.value-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fumaca);
}


/* ==========================================================================
   DIRETORIA
   ========================================================================== */

/* Dois grupos, uma anatomia. O cartão de diretor tem a mesma estrutura do
   cartão de clube em `#projetos` — chapa de imagem sangrando até a borda,
   filete, corpo de texto — para a página ter um sistema de cartão só em vez de
   três invenções diferentes.

   A presidência entra em dois cartões largos (retrato ao lado do texto) e as
   cinco diretorias numa fileira (retrato em cima). Sete cartões iguais caíam em
   4+3 numa grade de 248px e a segunda linha ficava com um buraco no fim. */
.directors-lead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.directors-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.director-lead,
.director-card {
  display: flex;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  overflow: hidden;
  transition: border-color var(--transicao), transform var(--transicao);
}

.director-card {
  flex-direction: column;
}

.director-lead:hover,
.director-card:hover {
  border-color: var(--ambar-traco);
  transform: translateY(-3px);
}

/* A chapa do retrato. `flex-shrink: 0` no cartão largo para o retrato não ser
   comprimido quando o nome é longo. */
.director-plate {
  flex-shrink: 0;
  overflow: hidden;
  background: var(--sombra);
}

.director-card .director-plate {
  border-bottom: 1px solid var(--traco);
}

.director-lead .director-plate {
  width: 46%;
  max-width: 258px;
  border-right: 1px solid var(--traco);
}

/* Retrato 4:5 em vez do selo quadrado de 104px: os arquivos em
   images/diretores/ são recortes em pé de 560x700 gerados por
   backend/scripts/otimizar-imagens.py a partir das fotos de câmera de
   4000x6000. */
.director-foto {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* O fundo do estúdio é cinza-claro e, em sete retratos grandes, virava a
     coisa mais acesa da página — mais que o letreiro da SEMCOMP, que é onde a
     luz deveria estar. O contraste com brilho abaixo de 1 derruba o cinza sem
     apagar o rosto. Não vai além de 0.9: em 0.78 o fundo assenta melhor, mas
     os rostos começam a perder detalhe, e escurecer a cara de alguém para
     servir a paleta é a troca errada. */
  filter: saturate(1.08) contrast(1.1) brightness(0.9);
  transition: transform var(--transicao), filter var(--transicao);
}

.director-lead .director-foto {
  height: 100%;
  aspect-ratio: auto;
}

/* No hover o retrato acende: é a única coisa que ganha luz ao ser apontada. */
.director-lead:hover .director-foto,
.director-card:hover .director-foto {
  transform: scale(1.03);
  filter: saturate(1.12) contrast(1.06) brightness(1);
}

.director-corpo {
  padding: 20px 20px 24px;
}

.director-lead .director-corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 28px;
}

.director-name {
  font-family: var(--marca);
  font-size: 1.22rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
}

.director-lead .director-name {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
}

.director-role {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambar);
}

/* Na fileira de cinco, "DIRETOR DE MARKETING" e "DIRETOR DE PROJETOS" quebram
   em duas linhas e os outros três não — o que empurrava a biografia de cada
   cartão para uma altura diferente. Reservar duas linhas alinha todas, e a
   sobra embaixo dos cargos curtos fica igual em todos, lendo como um campo de
   metadado e não como erro. Tracking a 0.1em em vez de 0.13em para caber mais
   nomes numa linha só antes de precisar da segunda. */
.director-card .director-role {
  min-height: 2.7em;
}

.director-bio {
  margin-top: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fumaca);
  text-wrap: pretty;
}


/* ==========================================================================
   FAIXA CORRIDA — a emenda entre o herói e o conteúdo

   Um filete parado separava as seções. Aqui o corte é a própria lista do que o
   clube faz, andando devagar: a página ganha um sinal de vida onde antes tinha
   uma linha, e o leitor recebe em uma passada o índice do que a /seja-membro
   detalha.

   COMO O LAÇO FECHA SEM EMENDA: o HTML repete a lista duas vezes, o trilho é
   `width: max-content` e a animação anda exatamente -50%. No fim do ciclo a
   segunda cópia está no pixel onde a primeira começou, então o salto de volta
   ao 0% é invisível. Mudar o número de cópias sem mudar os -50% quebra isso.
   ========================================================================== */

.faixa {
  position: relative;
  z-index: 1;
  padding: 22px 0;
  border-top: 1px solid var(--traco);
  border-bottom: 1px solid var(--traco);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
  /* Desbota nas pontas em vez de cortar no seco: a faixa some para dentro da
     página, o que é o que faz o movimento parecer contínuo e não um letreiro
     preso numa caixa. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.faixa-trilho {
  display: flex;
  width: max-content;
  animation: faixa-anda 42s linear infinite;
}

/* Pausa no ponteiro: a faixa tem nomes que a pessoa pode querer ler com calma
   (e, para quem usa lupa, um texto que foge é um texto ilegível). */
.faixa:hover .faixa-trilho {
  animation-play-state: paused;
}

.faixa-lista {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.faixa-lista li {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--marca);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--fumaca);
}

.faixa-ponto {
  font-size: 0.5em;
  color: var(--ambar);
  opacity: 0.75;
}

@keyframes faixa-anda {
  to { transform: translateX(-50%); }
}


/* ==========================================================================
   CABEÇALHO DA PÁGINA INTERNA (/seja-membro)

   Mais baixo que o herói da home, e sem o pato: quem chega aqui já clicou em
   "Seja Membro" e não precisa ser convencido de novo — precisa saber por onde
   começar. O título é a única coisa grande, e o índice logo abaixo é navegação
   de verdade, não enfeite.
   ========================================================================== */

.pagina-hero {
  position: relative;
  z-index: 1;
  padding: 148px 0 clamp(56px, 8vw, 96px);
}

.pagina-voltar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.08em;
  color: var(--cinza);
  transition: color var(--transicao), gap var(--transicao);
}

.pagina-voltar:hover {
  color: var(--ambar);
  gap: 13px;
}

.pagina-titulo {
  margin-top: 30px;
  font-family: var(--marca);
  font-size: var(--t-pagina);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
}

.pagina-sobrelinha {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ambar);
}

.pagina-sobrelinha::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ambar);
  opacity: 0.55;
}

.pagina-titulo .highlight {
  color: var(--ambar);
}

.pagina-linha {
  max-width: 52ch;
  margin-top: 28px;
  font-size: var(--t-sub);
  line-height: 1.5;
  color: var(--fumaca);
  text-wrap: pretty;
}

/* O índice dos três blocos. Filete em cima de cada item, como a faixa de
   números do herói — é a mesma ideia de "dado solto ancorado numa linha". */
.pagina-indice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 26px;
  margin-top: clamp(44px, 6vw, 68px);
  list-style: none;
  counter-reset: none;
}

.pagina-indice a {
  display: block;
  padding: 18px 0 20px;
  border-top: 1px solid var(--traco);
  transition: border-color var(--transicao);
}

.pagina-indice a:hover {
  border-color: var(--ambar);
}

.indice-num {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.16em;
  color: var(--ambar);
}

.indice-nome {
  display: block;
  margin-top: 12px;
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.indice-desc {
  display: block;
  margin-top: 5px;
  font-size: 0.9rem;
  color: var(--fumaca);
}

/* ---- O item em destaque ----

   O PROSEL é o quarto de quatro, e o último de uma fileira é o que menos se
   olha. O filete acende (o mesmo que os outros três só ganham no `hover`), o
   nome vira âmbar e entra um selo dizendo em que pé está a inscrição.

   O `border-top` é 1px como o dos vizinhos, e não 2: engrossar o filete
   desalinharia o texto deste item em um pixel em relação aos outros três, e
   uma fileira desalinhada chama mais atenção do que o destaque pretendia. */
.indice-item--destaque a {
  border-color: var(--ambar);
}

.indice-item--destaque .indice-nome {
  color: var(--gema);
}

.indice-selo {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ambar-lavagem);
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar);
}


/* ==========================================================================
   PROSEL — o cartaz

   O único bloco do site com moldura âmbar cheia. É o degrau mais alto da
   /seja-membro e o único com prazo, então ele leva o contraste máximo: a luz
   atravessa o cartão em diagonal (dois focos, e não um degradê num canto),
   que é a mesma lógica do herói — a luz nasce de dentro do desenho.

   O SEMCOMP dividia esta construção quando os dois eram seções irmãs. Hoje o
   evento vive num modal, e o que ele reaproveita daqui é só o selo pulsante e
   a ficha.
   ========================================================================== */

/* ---- A seção inteira em destaque ----

   O cartaz sempre foi âmbar, mas a SEÇÃO em volta dele era idêntica às outras
   três: mesmo fundo, mesmo respiro, mesmo tamanho de título. Numa rolagem
   rápida a página entregava quatro paradas de peso igual, e o degrau que ela
   existe para empurrar era o último — o de menor chance de ser visto.

   O fundo é o mesmo escuro com uma lavagem âmbar por cima, e não uma cor nova:
   o efeito precisa ser "esta parte da página está acesa", não "esta parte é de
   outro site". Os dois filetes nas bordas fazem o papel que o `<hr class=
   "divider">` faz entre as seções normais — por isso a marca não leva divider
   antes dela no template, seria filete sobre filete.

   `overflow: hidden` contém o brilho; sem ele o `radial-gradient` de 120% de
   altura empurra a barra de rolagem horizontal em telas estreitas. */
.prosel-section--destaque {
  position: relative;
  border-top: 1px solid var(--ambar-traco);
  border-bottom: 1px solid var(--ambar-traco);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, var(--ambar-lavagem), transparent 70%),
    var(--breu);
  overflow: hidden;
}

/* O número na margem para de ser metadado apagado e passa a marcar a chegada.
   Nos outros três ele fica em `opacity: 0.7`. */
.prosel-section--destaque .secao-indice {
  opacity: 1;
  color: var(--gema);
}

/* Um degrau acima do `--t-secao` das outras seções, e ainda abaixo do
   `--t-pagina` do herói: a hierarquia da página continua sendo herói > PROSEL
   > demais seções, que é a ordem certa de importância. */
.section-title--destaque {
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
}

.prosel-cartaz {
  position: relative;
  display: grid;
  /* `minmax(0, ...)` e não `1fr`: `1fr` é `minmax(auto, 1fr)`, e esse `auto` é
     um PISO de min-content. O botão "Fazer minha inscrição" é `nowrap`, então o
     min-content da coluna virava a largura inteira do rótulo e a coluna
     estourava o cartão — que tem `overflow: hidden` e decepava o texto. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 52px);
  padding: clamp(30px, 4.4vw, 52px);
  border: 1px solid rgba(242, 138, 31, 0.42);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 58% 66% at 12% 18%, rgba(255, 77, 0, 0.24), transparent 68%),
    radial-gradient(ellipse 44% 50% at 92% 96%, rgba(242, 138, 31, 0.1), transparent 70%),
    var(--penumbra);
  box-shadow: 0 0 90px -50px rgba(255, 77, 0, 0.9);
  overflow: hidden;
}

/* O cartaz dentro da seção acesa precisa continuar sendo a coisa mais forte da
   tela — se ele mantivesse o traço de 0.42 sobre o fundo que agora também é
   âmbar, a moldura se dissolveria no próprio destaque e o cartão pareceria ter
   perdido a borda. Sobe o traço, sobe o brilho, sobe o respiro. */
.prosel-cartaz--destaque {
  padding: clamp(30px, 5vw, 60px);
  border-color: rgba(242, 138, 31, 0.6);
  box-shadow:
    0 0 120px -50px rgba(255, 77, 0, 0.95),
    0 30px 70px -40px rgba(0, 0, 0, 0.9);
}

/* A foto sangra até a borda do cartão, então a margem negativa dela tem de
   acompanhar o `padding` novo — senão sobra uma faixa do fundo do cartaz entre
   a imagem e a moldura, exatamente do tamanho da diferença. */
.prosel-cartaz--destaque .prosel-foto {
  margin: calc(-1 * clamp(30px, 5vw, 60px));
  margin-left: 0;
}

.prosel-say {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.prosel-cartaz p {
  max-width: 52ch;
  margin-top: 22px;
  font-size: var(--t-sub);
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}

/* Onde a SEMCOMP tem o letreiro de neon, o PROSEL tem letra.

   O processo seletivo não tem arte própria, e desenhar uma só para preencher o
   buraco deixaria o bloco mais fraco — arte inventada compete com o letreiro de
   verdade, que existe. Então a palavra é o cartaz: fonte da marca, com o ano em
   mono e âmbar ao lado, que é como a página escreve metadado em todo canto. */
.prosel-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 4px;
  font-family: var(--marca);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--giz);
}

/* "PROSEL 2026" é o nome do que se está vendendo, e passa a ser lido antes do
   parágrafo em vez de junto com ele. Fica acima do `--t-secao` do título da
   seção porque, dentro do cartaz, é ele o título. */
.prosel-titulo--destaque {
  font-size: clamp(2.5rem, 5.6vw, 4rem);
}

.prosel-titulo span {
  padding: 5px 11px;
  border: 1px solid var(--ambar-traco);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.2em;
  color: var(--ambar);
}

/* Ficha do processo. Filete em cima de cada par, como a faixa de números do
   herói e como o índice da página. */
.event-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 22px;
  width: 100%;
  margin-top: 30px;
}

.event-meta > div {
  padding: 14px 0 0;
  border-top: 1px solid var(--traco);
}

.event-meta dt {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.event-meta dd {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--giz);
}

.event-badge {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--ambar-traco);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}

/* "Inscrições abertas" com o ponto pulsante. `inline-flex` porque o ponto
   precisa alinhar com o texto — o `inline-block` da regra acima empilharia. */
.event-badge--vivo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 12px;
  background: var(--ambar-lavagem);
  color: var(--gema);
}

.event-nota {
  font-family: var(--mono);
  font-size: var(--t-mini);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--cinza);
}

/* A foto em pé equilibra a coluna de texto. Sangra até as bordas do cartão do
   lado direito para não virar um retângulo flutuando dentro de uma margem. */
.prosel-foto {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: calc(-1 * clamp(30px, 4.4vw, 52px));
  margin-left: 0;
  border-left: 1px solid var(--traco);
  background: var(--breu);
}

.prosel-foto img {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  /* O retrato tem 1400×2100 e o rosto no terço de cima. Ancorar em 32% mantém
     a cabeça no quadro tanto na coluna alta quanto no corte deitado do modo
     empilhado. */
  object-position: center 32%;
}

.prosel-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 36px;
}


/* ---- As etapas ----

   Quatro cartões numerados. O número é grande e fica ATRÁS do texto, em âmbar
   apagado: ele marca a ordem sem disputar a leitura com o título da etapa —
   um "1" do mesmo peso do texto vira só mais uma palavra na frente da frase.

   É um `<ol>` de verdade, então quem usa leitor de tela ouve "item 1 de 4" do
   próprio elemento; por isso o `.passo-num` é `aria-hidden` no HTML, senão o
   número seria dito duas vezes. */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 44px;
  list-style: none;
  counter-reset: none;
}

.passo {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  overflow: hidden;
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

.passo:hover {
  border-color: var(--ambar-traco);
  background: var(--sombra);
  transform: translateY(-3px);
}

.passo-num {
  position: absolute;
  top: -14px;
  right: 6px;
  font-family: var(--marca);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--ambar);
  opacity: 0.14;
  pointer-events: none;
  transition: opacity var(--transicao);
}

.passo:hover .passo-num {
  opacity: 0.26;
}

.passo h4 {
  position: relative;
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.passo p {
  position: relative;
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}


/* ==========================================================================
   BENEFÍCIOS DA COMUNIDADE
   ========================================================================== */

.beneficio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 56px;
}

.beneficio-card {
  padding: 26px 26px 28px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  transition: border-color var(--transicao), background var(--transicao);
}

.beneficio-card:hover {
  border-color: var(--ambar-traco);
  background: var(--sombra);
}

.beneficio-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ambar-traco);
  border-radius: var(--r-sm);
  background: var(--ambar-lavagem);
  color: var(--ambar);
}

.beneficio-card h3 {
  margin-top: 20px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.beneficio-card p {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}


/* ==========================================================================
   AÇÕES — os cartões que são links inteiros

   Cartão com um link dentro vira, no celular, um alvo de 14px no pé de um bloco
   de 200px: um alvo que se erra. Aqui o `<a>` É o cartão.

   Ordem por compromisso, e a moldura âmbar marca o que tem prazo — três
   cartões idênticos obrigam a ler os três para escolher; com os que correm
   contra o calendário acesos, quem não tem preferência já tem uma.

   O `--destaque` não é "o primeiro cartão": é um estado da coisa que o cartão
   aponta. Hoje ele está no cadastro e na pré-venda da camisa; quando a leva de
   camisas fechar, o link sai de `site-links.ts`, o cartão some com ele e o
   destaque volta a ser um só, sem nada a mudar aqui.
   ========================================================================== */

.acao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}

.acao-card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

.acao-card:hover {
  border-color: var(--ambar-traco);
  background: var(--sombra);
  transform: translateY(-3px);
}

.acao-card--destaque {
  border-color: var(--ambar-traco);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 77, 0, 0.1), transparent 70%),
    var(--penumbra);
}

.acao-card--destaque:hover {
  border-color: rgba(242, 138, 31, 0.5);
}

.acao-selo {
  align-self: flex-start;
  padding: 5px 11px;
  border: 1px solid var(--traco-forte);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
  transition: border-color var(--transicao), color var(--transicao);
}

.acao-card--destaque .acao-selo,
.acao-card:hover .acao-selo {
  border-color: var(--ambar-traco);
  color: var(--ambar);
}

.acao-card h3 {
  margin-top: 20px;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.acao-card p {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}

/* `margin-top: auto` alinha o pé dos cartões na mesma altura mesmo com
   descrições de tamanhos diferentes. */
.acao-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
}

/* O que acontece DEPOIS do clique. É a dúvida real de quem hesita: "vou cair
   num formulário gigante?", "isso já é uma compra?". */
.acao-nota {
  font-family: var(--mono);
  font-size: var(--t-mini);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--cinza);
  text-wrap: pretty;
}

.acao-seta {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--traco);
  border-radius: 50%;
  color: var(--fumaca);
  transition: border-color var(--transicao), background var(--transicao),
    color var(--transicao), transform var(--transicao);
}

.acao-card:hover .acao-seta {
  border-color: var(--ambar-traco);
  background: var(--ambar-lavagem);
  color: var(--ambar);
  transform: translateX(3px);
}


/* ==========================================================================
   CLUBES TEMÁTICOS

   As três artes são quadradas e cheias de detalhe de canto — o foguete e o
   controle no Jogos, o hexágono no Cyber. Antes entravam num quadradinho de
   84px, que jogava fora quase tudo. Aqui ocupam a largura inteira do cartão,
   no formato em que foram desenhadas: nenhum recorte.

   O cartão inteiro é o link para o Instagram do clube. Era uma <div> com um
   `<a>` de 16px no pé, e o resto do bloco — a arte inteira, o nome, a
   descrição — não clicava.
   ========================================================================== */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.project-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  overflow: hidden;
  transition: border-color var(--transicao), transform var(--transicao),
    background var(--transicao);
}

.project-card:hover {
  border-color: var(--ambar-traco);
  background: var(--sombra);
  transform: translateY(-3px);
}

.project-arte {
  display: block;
  aspect-ratio: 1;
  border-bottom: 1px solid var(--traco);
  overflow: hidden;
  background: var(--breu);
}

.project-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicao);
}

.project-card:hover .project-logo {
  transform: scale(1.035);
}

/* Coluna que cresce: com `margin-top: auto` no @ do Instagram, os três cartões
   alinham o rodapé na mesma altura mesmo com descrições diferentes. */
.project-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 26px 26px;
}

.project-card h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.project-card p {
  margin-top: 11px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}

.project-instagram {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.06em;
  color: var(--cinza);
  transition: color var(--transicao);
}

.project-instagram svg {
  flex-shrink: 0;
}

.project-card:hover .project-instagram {
  color: #e1306c;
}


/* ==========================================================================
   REDES E MARATONA — o conteúdo do modal da Comunidade

   Cada cartão carrega a cor da rede numa variável (`--rede`, um RGB solto para
   caber em `rgba()`), e ela só acende no ponteiro: seis marcas acesas ao mesmo
   tempo viram um arco-íris no meio de uma página que é escura e âmbar do começo
   ao fim.
   ========================================================================== */

.rede-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.rede-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--sombra);
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

.rede-card:hover {
  border-color: rgba(var(--rede), 0.45);
  transform: translateY(-2px);
}

.rede-icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--traco);
  border-radius: var(--r-sm);
  background: var(--penumbra);
  color: var(--fumaca);
  transition: border-color var(--transicao), color var(--transicao),
    background var(--transicao);
}

.rede-card:hover .rede-icone {
  border-color: rgba(var(--rede), 0.5);
  background: rgba(var(--rede), 0.1);
  color: rgb(var(--rede));
}

.rede-corpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rede-nome {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--giz);
}

.rede-desc {
  margin-top: 6px;
  font-size: 0.865rem;
  line-height: 1.5;
  color: var(--fumaca);
  text-wrap: pretty;
}

/* O @ pode ser mais comprido que o cartão (`@clubedeprogramacaocimatec` já é
   longo). Reticências em vez de estouro: o endereço completo não é informação
   que alguém copie daqui — o cartão é clicável. */
.rede-conta {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.05em;
  color: var(--cinza);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transicao);
}

.rede-card:hover .rede-conta {
  color: rgb(var(--rede));
}

/* ---- Maratona ----

   Separada da grade de redes porque não é "siga a gente": são duas salas de
   estudo por nível, e entrar na errada custa caro (o novato se perde, o
   experiente se entedia). Por isso cada grupo diz para quem é, em vez de ser
   mais um ícone verde na fileira. */
.maratona-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.maratona-grupo {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--sombra);
  transition: border-color var(--transicao), transform var(--transicao);
}

.maratona-grupo:hover {
  border-color: rgba(37, 211, 102, 0.45);
  transform: translateY(-2px);
}

.maratona-icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.1);
  color: rgba(37, 211, 102, 0.75);
  transition: color var(--transicao), background var(--transicao);
}

.maratona-grupo:hover .maratona-icone {
  background: rgba(37, 211, 102, 0.18);
  color: #25d366;
}

.maratona-corpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.maratona-corpo strong {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--giz);
}

.maratona-corpo span {
  margin-top: 5px;
  font-size: 0.865rem;
  line-height: 1.5;
  color: var(--fumaca);
  text-wrap: pretty;
}


/* ==========================================================================
   HELP CIMATEC — o banner que fecha a home

   Herda o gesto da antiga chamada final: a luz do herói reaparece aqui, mais
   fraca, e o pato volta apagado no canto. É o fim da página, então a luz está
   acabando.

   A diferença é que o bloco INTEIRO é um link para fora. Ele tinha um botão
   dentro; num cartaz de 700px de largura, um alvo de 200px no pé é a única
   parte viva de uma área que parece toda clicável — e no celular é um alvo que
   se erra. O `.btn-primary` continua desenhado lá dentro, mas como <span>
   `aria-hidden`: é a aparência de botão, não um segundo alvo aninhado (link
   dentro de link é HTML inválido, e o leitor de tela anuncia dois destinos).
   ========================================================================== */

.cta-section {
  padding: var(--secao-y) 0 clamp(96px, 12vw, 140px);
}

.cta-box {
  position: relative;
  display: block;
  padding: clamp(48px, 7vw, 84px) clamp(28px, 5vw, 64px);
  border: 1px solid var(--traco);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 62% 100% at 84% 8%, rgba(255, 77, 0, 0.12), transparent 64%),
    var(--penumbra);
  overflow: hidden;
}

.cta-box--link {
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

.cta-box--link:hover {
  border-color: var(--ambar-traco);
  transform: translateY(-3px);
}

/* Mesmo pato do topo, menor e mais apagado: fecha a página onde ela começou. */
.cta-duck {
  position: absolute;
  top: -26px;
  right: -32px;
  width: clamp(180px, 26vw, 280px);
  opacity: 0.14;
  transform: rotate(8deg);
  pointer-events: none;
  transition: opacity var(--transicao);
}

.cta-box--link:hover .cta-duck {
  opacity: 0.2;
}

.cta-box .secao-indice {
  display: block;
  margin-bottom: 14px;
}

.cta-box .section-title {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
}

.cta-box .section-desc {
  margin-bottom: 38px;
}

.cta-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* Dizer que abre em outra aba, e onde. `target="_blank"` sem aviso é uma
   janela que aparece do nada — e o endereço escrito deixa a pessoa decidir se
   confia antes de clicar, o que num site institucional que manda para fora do
   próprio domínio é o mínimo. */
.cta-nota {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.06em;
  color: var(--cinza);
}

/* O <span> com cara de botão precisa reagir ao hover do CARTÃO, já que ele
   próprio não é o alvo. */
.cta-box--link:hover .btn-primary {
  background: var(--gema);
  box-shadow: 0 10px 30px -10px rgba(242, 138, 31, 0.55);
}


/* ==========================================================================
   IMAGENS — o tratamento comum

   A página é escura e a fotografia é clara. Sem nada entre as duas, cada foto
   vira um retângulo brilhante colado num fundo preto — o olho pula direto para
   ela e o texto ao lado some. As três regras abaixo são o que faz a foto
   pertencer à página:

     1. Moldura de 1px do mesmo `--traco` de todos os cartões.
     2. Raio `--r`, o mesmo dos cartões.
     3. O `overflow: hidden`, que segura o `scale` do hover dentro da moldura.

   SEM LEGENDA. As fotos deste site não levam mais `<figcaption>`: nenhuma
   delas mostrava algo que o texto ao lado já não dissesse, e o filete de
   texto por baixo (ou o degradê por cima) só roubava altura da imagem e
   desalinhava a fileira quando uma legenda quebrava em duas linhas. O que a
   foto precisa dizer a quem não a vê continua no `alt`.

   E todas descem levemente saturadas e escurecidas no repouso, voltando ao
   normal no ponteiro (`filter`): assim elas convivem com o texto quando não
   são o assunto, e acendem quando são.
   ========================================================================== */

.foto-quadro,
.foto,
.banner {
  position: relative;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--breu);
}

.foto-quadro img,
.foto img,
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Repouso um pouco apagado, foco no texto. A transição é longa (0.5s) de
     propósito: um `filter` rápido pisca. */
  filter: saturate(0.85) brightness(0.86);
  transition: filter 0.5s var(--transicao), transform 0.5s var(--transicao);
}

.foto-quadro:hover img,
.foto:hover img,
.banner:hover img {
  filter: none;
}

/* ---- A fileira de três, na home ---- */

.fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 64px;
}

.foto {
  aspect-ratio: 4 / 3;
}

/* A do meio é retrato e mais alta: três retângulos idênticos lado a lado são
   uma tabela, não uma fileira de fotos. O `translateY` negativo a levanta um
   pouco acima das vizinhas — o mesmo desalinho de propósito do herói. */
.foto--alta {
  aspect-ratio: 3 / 4;
  transform: translateY(-26px);
}

.foto:hover img {
  transform: scale(1.04);
}

/* ---- Banner de largura cheia ----

   A margem virou modificador porque o único banner que restou fecha uma seção
   em vez de abri-la. O `margin-bottom: 56px` fixo era do banner do laboratório
   na /seja-membro, que vinha ANTES do conteúdo da seção de competições; aquele
   bloco saiu (virou a foto do destaque da OBI) e o que existe hoje é o do
   corredor da SEMCOMP, embaixo dos quatro formatos. Com a margem presa embaixo
   ele encostava no grid acima e sobrava um vão até o divisor. */
.banner {
  aspect-ratio: 16 / 9;
}

.banner--pe {
  margin-top: 56px;
}

/* ---- Foto ao lado de texto (Sobre o Evento) ---- */

.sobre-evento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
}

.sobre-texto p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--fumaca);
  text-wrap: pretty;
}

.sobre-texto p + p {
  margin-top: 20px;
}

.sobre-texto strong {
  color: var(--giz);
  font-weight: 600;
}

.sobre-texto a {
  color: var(--ambar);
  border-bottom: 1px solid var(--ambar-traco);
  transition: color var(--transicao), border-color var(--transicao);
}

.sobre-texto a:hover {
  color: var(--gema);
  border-color: var(--gema);
}

.foto-quadro img {
  aspect-ratio: 3 / 2;
}


/* ==========================================================================
   ALCANCE INTERINSTITUCIONAL — as universidades convidadas

   Uma faixa, e não uma grade de cartões: são sete nomes curtos, e sete cartões
   com um nome dentro seria a coisa mais barulhenta de uma página que já tem
   quatro grades. O texto explica de um lado, as pílulas listam do outro.

   As pílulas são NOMES, não logotipos: as sete marcas são de terceiros, cada
   uma com fundo, cor e proporção próprios, e enfileirá-las viraria uma colcha
   de retalhos — além de pedir permissão de uso que o clube não tem.
   ========================================================================== */

.alcance {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(56px, 7vw, 84px);
  padding: clamp(26px, 3.4vw, 38px);
  border: 1px solid var(--traco);
  border-radius: var(--r-lg);
  background: var(--penumbra);
}

.alcance-texto h3 {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.alcance-texto p {
  margin-top: 12px;
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--fumaca);
  text-wrap: pretty;
}

.instituicoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.instituicoes li {
  padding: 9px 15px;
  border: 1px solid var(--traco-forte);
  border-radius: 999px;
  background: var(--sombra);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--giz);
}

/* A casa em primeiro: é a instituição que recebe, e no meio de seis siglas
   iguais ela desaparecia. */
.instituicoes li:first-child {
  border-color: var(--ambar-traco);
  background: var(--ambar-lavagem);
  color: var(--gema);
}


/* ==========================================================================
   CAPA DA SEMCOMP — a foto como fundo do herói

   A foto da turma ocupa a tela toda atrás do letreiro de neon. O problema
   clássico de texto sobre foto é o contraste: onde a imagem clareia, o texto
   some. A solução aqui tem DUAS camadas e não uma:

     1. Um degradê vertical que escurece de cima para baixo (o texto vive na
        metade de baixo).
     2. Uma lavagem âmbar por cima de tudo, fraca, que amarra a foto à paleta —
        sem ela a foto é a única coisa neutra numa página inteira quente.

   Por que `<img>` e não `background-image`: a foto é conteúdo do herói, então
   ela merece `fetchpriority="high"` e as dimensões declaradas — o navegador
   reserva o espaço e a página não pula quando ela chega. `background-image`
   não aceita nem uma coisa nem outra e ainda começa a baixar tarde, depois do
   CSS ser lido.
   ========================================================================== */

.capa {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: min(88vh, 780px);
  padding: 160px 0 clamp(48px, 6vw, 76px);
  overflow: hidden;
  border-bottom: 1px solid var(--traco);
}

.capa-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* A foto é fundo: ela desce bem apagada para o letreiro aceso ficar sendo a
     coisa mais clara da tela. */
  filter: saturate(0.7) brightness(0.55);
}

.capa-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 11, 0.82) 0%, rgba(8, 8, 11, 0.5) 38%, rgba(8, 8, 11, 0.96) 92%),
    radial-gradient(ellipse 70% 60% at 22% 72%, rgba(255, 77, 0, 0.2), transparent 70%);
}

/*
  Coluna, e não um <div> comum.

  O link de voltar e o selo "inscrições abertas" são os dois `inline-flex`, e
  num contexto de bloco normal eles fluem NA MESMA LINHA — o selo encostava no
  fim do "← Clube de Programação" como se fosse continuação da frase. Empilhar
  em `flex-direction: column` resolve os dois de uma vez, e o
  `align-items: flex-start` impede que cada um estique até a largura do
  contêiner (que é o padrão do flex e faria a pílula do selo virar uma barra de
  ponta a ponta).
*/
.capa-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.capa-titulo {
  margin: 24px 0 0;
  font-weight: 400;
}

.capa-logo {
  width: 100%;
  max-width: 520px;
  height: auto;
  /* O halo é literal: o letreiro é neon e o `drop-shadow` só estende a luz que
     já vem pintada no arquivo para fora do traço. */
  filter: drop-shadow(0 0 46px rgba(255, 77, 0, 0.45));
}

.capa .event-badge {
  margin-top: 26px;
}

/* O CONCEITO DA MARCA, na fonte da marca.

   "Onde a ideia acende" é o posicionamento oficial de 2026, não uma legenda do
   logo — por isso ele vem na `--marca` (o mesmo lettering à mão do letreiro) e
   em tamanho de subtítulo, entre o logo e a descrição. Fica no âmbar claro
   para acender junto com o neon acima sem competir com ele. */
.capa-mote {
  margin-top: 20px;
  font-family: var(--marca);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.1;
  color: var(--gema);
  text-shadow: 0 0 34px rgba(255, 77, 0, 0.35);
}

.capa-linha {
  max-width: 54ch;
  margin-top: 18px;
  font-size: var(--t-sub);
  line-height: 1.5;
  color: var(--giz);
  text-wrap: pretty;
}

.capa-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}

/* `width: 100%` porque o pai virou flex-column com `align-items: flex-start`:
   sem isto a grade da ficha encolhe até o conteúdo e as quatro colunas se
   amontoam à esquerda em vez de dividirem a largura. */
.capa-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 22px;
  width: 100%;
  margin-top: clamp(38px, 5vw, 56px);
}

.capa-ficha > div {
  padding: 14px 0 0;
  border-top: 1px solid var(--traco-forte);
}

.capa-ficha dt {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.capa-ficha dd {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--giz);
}

/* A segunda linha de um dado da ficha (o bairro, embaixo do nome do campus).
   Ela é complemento, não outro dado: fica no secundário para a ficha continuar
   com uma informação forte por coluna. */
.capa-ficha-fraco {
  color: var(--fumaca);
}


/* ==========================================================================
   FORMATOS DA SEMCOMP
   ========================================================================== */

.formato-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.formato-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

.formato-card:hover {
  border-color: var(--ambar-traco);
  background: var(--sombra);
  transform: translateY(-3px);
}

.formato-selo {
  align-self: flex-start;
  padding: 5px 11px;
  border: 1px solid var(--ambar-traco);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}

.formato-card h3 {
  margin-top: 20px;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.formato-card p {
  margin-top: 11px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}

.formato-nota {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.03em;
  color: var(--cinza);
}

.formato-nota a {
  color: var(--ambar);
  border-bottom: 1px solid var(--ambar-traco);
  transition: color var(--transicao), border-color var(--transicao);
}

.formato-nota a:hover {
  color: var(--gema);
  border-color: var(--gema);
}

/* AS MODALIDADES DO ARENA DAY reaproveitam o `.formato-card` inteiro e mudam
   só a largura mínima da coluna. Com os 250px dos formatos os cartões caíam em
   4+1 — uma linha cheia e um órfão embaixo. Com 320px a grade fecha em três
   colunas, e desde que a Copa de E-Sports entrou são SEIS cartões: 3+3, duas
   fileiras cheias. (Eram cinco, e a divisão 3+2 já era a razão do valor; com
   seis ela só melhorou. Se uma sétima modalidade aparecer, a conta volta a ser
   3+3+1 e vale reconsiderar os 320px.) */
.arena-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}


/* ==========================================================================
   OS CINCO DIAS TEMÁTICOS — a trilha da semana

   Uma LISTA VERTICAL, e não cinco cartões lado a lado. Os dias têm ordem (é
   uma semana, não um menu), e cinco colunas de ~200px deixariam o tema de cada
   dia — "Cyber & Quantum Day" — quebrando em três linhas dentro da coluna.

   Na vertical, a data ganha uma plaqueta fixa à esquerda e o filete que liga
   uma plaqueta à outra faz o que a data sozinha não faz: mostra que os dias são
   contínuos. O filete é `::before` na lista, atrás das plaquetas, e não uma
   borda em cada item — em cada item ele apareceria também abaixo do último dia,
   apontando para o vazio.
   ========================================================================== */

.trilha {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trilha::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 33px;
  width: 1px;
  background: linear-gradient(180deg, var(--ambar-traco), var(--traco));
}

.trilha-dia {
  position: relative;
  display: grid;
  grid-template-columns: 67px minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2.4vw, 28px);
}

/* A plaqueta da data. Fundo opaco de propósito: ela cobre o filete que passa
   por trás, e é isso que dá a impressão de conta de rosário em vez de uma
   linha atravessando cinco caixas. */
.trilha-data {
  display: grid;
  place-items: center;
  padding: 12px 0 10px;
  border: 1px solid var(--traco-forte);
  border-radius: var(--r);
  background: var(--penumbra);
}

.trilha-num {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--giz);
}

.trilha-mes {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cinza);
}

.trilha-corpo {
  padding: 22px 24px 24px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  transition: border-color var(--transicao), background var(--transicao);
}

.trilha-dia:hover .trilha-corpo {
  border-color: var(--ambar-traco);
  background: var(--sombra);
}

.trilha-semana {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.trilha-corpo h3 {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.trilha-corpo p {
  margin-top: 10px;
  max-width: 68ch;
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--fumaca);
  text-wrap: pretty;
}

/* O Arena Day fecha a semana e é o único dia sem palestra: ele acende a
   plaqueta e a moldura para a lista terminar num ponto alto, do mesmo jeito
   que o dia termina o evento. */
.trilha-dia--destaque .trilha-data {
  border-color: var(--ambar-traco);
  background: var(--ambar-lavagem);
}

.trilha-dia--destaque .trilha-num {
  color: var(--gema);
}

.trilha-dia--destaque .trilha-corpo {
  border-color: var(--ambar-traco);
  background:
    radial-gradient(ellipse 60% 70% at 4% 0%, rgba(255, 77, 0, 0.11), transparent 70%),
    var(--penumbra);
}

.trilha-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  list-style: none;
}

.trilha-tags li {
  padding: 5px 11px;
  border: 1px solid var(--traco-forte);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.06em;
  color: var(--fumaca);
}

/* TRAÇO TRACEJADO = CONVITE EM CONFIRMAÇÃO.

   A diferença entre um patrocinador assinado e um em negociação não pode ser
   invisível: quem lê "NVIDIA" numa pílula sólida entende que está fechado. O
   tracejado é a convenção que a interface usa em toda parte para "provisório",
   e o `.trilha-nota` abaixo da lista diz em palavras o que ele significa.

   O seletor leva o `li` de propósito: `.trilha-tags li` acima tem um elemento
   na conta e venceria uma classe sozinha na especificidade. */
.trilha-tags li.trilha-tag--pendente {
  border-style: dashed;
  border-color: var(--ambar-traco);
  color: var(--ambar);
}

/* PÍLULA ACESA = O QUE DÁ NOME AO DIA.

   Nem toda tag de um dia tem o mesmo peso: "AWS" no Student Community Day é a
   marca que assina o dia inteiro, e "Empreendedorismo" no Cimatec Day é um dos
   assuntos entre quatro. Em cinza, as duas pesavam igual e a pessoa tinha de ler
   o título do cartão para saber qual era qual.

   PREENCHIDA, e não só com o filete âmbar: o tracejado do `--pendente` já usa
   a borda âmbar para dizer "provisório", e um destaque que mexesse apenas na cor
   da borda ficaria a um traço de distância do seu oposto. Fundo lavado + `--gema`
   no texto é a mesma escada de ênfase do `.trilha-dia--destaque` e da primeira
   pílula das `.instituicoes` — a casa e o dia final da semana.

   Mesmo peso de seletor do irmão acima (`li` na conta) para a ordem no arquivo
   não decidir quem vence quando as duas classes existirem no mesmo `li`. Elas
   não convivem no template, mas a folha não depende disso. */
.trilha-tags li.trilha-tag--destaque {
  border-color: var(--ambar-traco);
  background: var(--ambar-lavagem);
  color: var(--gema);
}

.trilha-nota {
  margin-top: 20px;
  padding-left: 4px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--cinza);
}


/* ==========================================================================
   A ESTRUTURA DE UM DIA DE PALESTRAS

   O cartão que responde "a que horas eu preciso estar lá". Reaproveita o
   `.grade` inteiro (um cartão por turno, hora à esquerda) — ele foi desenhado
   para a grade da programação e serve igual para os dois turnos de um dia
   padrão.
   ========================================================================== */

.dia-padrao {
  margin-top: clamp(56px, 7vw, 84px);
}

.dia-padrao-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--traco);
}

.dia-padrao-topo h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.dia-padrao-topo span {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.06em;
  color: var(--cinza);
}


/* ==========================================================================
   GRADE DA PROGRAMAÇÃO
   ========================================================================== */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.grade-dia {
  padding: 26px 24px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
}

.grade-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--traco);
}

/* `h3` E `h4`: o nível do título depende de onde a grade está. Solta na seção
   ela é h3; dentro do cartão "como é um dia de palestras", que já abre com um
   h3, cada turno desce para h4 — a aparência é a mesma, a ordem dos cabeçalhos
   continua sem pular nível para quem navega por leitor de tela. */
.grade-cabecalho h3,
.grade-cabecalho h4 {
  font-family: var(--marca);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--giz);
}

.grade-data {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.08em;
  color: var(--cinza);
}

.grade-itens {
  list-style: none;
}

.grade-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--traco);
}

.grade-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.grade-hora {
  flex-shrink: 0;
  min-width: 3.4em;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ambar);
}

.grade-corpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.grade-tipo {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza);
}

.grade-corpo strong {
  margin-top: 5px;
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--giz);
}

.grade-quem {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--fumaca);
}

/* Fila de botões centralizada no fim de uma seção — os dois destinos onde a
   grade hora a hora vai sair (Even3 e Instagram da SEMCOMP).

   ERA `.vazio-acoes`, o pé de um estado vazio: enquanto a programação não
   existia, a seção inteira era uma caixa tracejada dizendo "a grade ainda não
   foi publicada". Com os cinco dias temáticos e a estrutura do dia no ar, o
   estado vazio saiu — mas a fila de botões continua fazendo sentido embaixo de
   uma seção que ainda aponta para fora. */
.acoes-centro {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}


/* ==========================================================================
   INSCRIÇÃO E FAQ
   ========================================================================== */

.inscricao-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 52px);
}

.inscricao-cta {
  padding: clamp(30px, 4vw, 42px);
  border: 1px solid rgba(242, 138, 31, 0.42);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 70% 60% at 20% 12%, rgba(255, 77, 0, 0.2), transparent 70%),
    var(--penumbra);
  box-shadow: 0 0 90px -50px rgba(255, 77, 0, 0.9);
}

.inscricao-marca img {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(255, 77, 0, 0.3));
}

.inscricao-cta h3 {
  margin-top: 24px;
  font-family: var(--marca);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--giz);
}

.inscricao-cta > p {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.06em;
  color: var(--cinza);
}

/* ---- A ficha dentro do cartão de inscrição ----

   Quando, onde e a que horas chegar, em três filetes. É a informação que a
   pessoa precisa TER NA MÃO no momento em que decide clicar em "fazer minha
   inscrição" — deixá-la só no herói obriga a rolar a página de volta.

   `<dl>` e não três parágrafos: cada linha é rótulo + valor, que é exatamente o
   par que a lista de definição descreve. */
.inscricao-ficha {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
}

.inscricao-ficha > div {
  padding-top: 14px;
  border-top: 1px solid var(--traco);
}

.inscricao-ficha dt {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.inscricao-ficha dd {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--giz);
}

/* O endereço leva ao mapa. O ícone de link externo entra no fim da linha e não
   pode ser a única pista de que ali se clica — daí o filete embaixo do texto. */
.inscricao-ficha dd a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ambar);
  border-bottom: 1px solid var(--ambar-traco);
  transition: color var(--transicao), border-color var(--transicao);
}

.inscricao-ficha dd a:hover {
  color: var(--gema);
  border-color: var(--gema);
}

.inscricao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---- O mapa do local, em faixa ----

   Um iframe do Google dentro de uma página com identidade fechada é o elemento
   mais difícil de assentar do site: ele chega claro, com a tipografia de outra
   pessoa, e não aceita uma linha de CSS nossa por dentro.

   A moldura é a mesma das fotos (`.foto-quadro`): filete, `--r` de raio e
   `overflow: hidden`. É o que faz o mapa ser lido como mais um quadro do
   conjunto em vez de um retângulo colado de fora.

   AGORA ELE É IRMÃO DO `.inscricao-grid`, NÃO FILHO DO CARTÃO. Enquanto vivia
   dentro do `.inscricao-cta`, o mapa herdava a coluna estreita (~376px) e ficava
   emoldurado duas vezes — filete dentro de um cartão que já tem filete, degradê
   e brilho. Fora dele pega a largura do container e a margem passa a ser de
   separação entre blocos (a `clamp` das outras seções), não de espaço interno.

   O MAPA NÃO LEVA O `filter` DE REPOUSO QUE AS FOTOS LEVAM. Foto apagada que
   acende no ponteiro funciona porque foto é ilustração — ela convive com o
   texto quando não é o assunto. Mapa é instrumento: quem olha está procurando
   uma rua, e escurecer o que a pessoa veio ler para "combinar com a paleta"
   troca legibilidade por decoração. Ele fica claro, e é para ficar. */
.mapa {
  margin-top: clamp(36px, 4.5vw, 56px);
  border: 1px solid var(--traco);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--breu);
}

/* `display: block` mata o vão de ~4px que o iframe herda de ser `inline` — o
   espaço da linha de base, que aqui apareceria como uma listra do fundo entre
   o mapa e a legenda.

   8:3 É A FORMA DE UM MAPA DE RUA. Fora do cartão o mapa tem a largura inteira
   do container (até 1140px), e a proporção antiga (4:3) daria 855px de altura:
   mais de uma tela de celular só de mapa, que a pessoa rola por dentro sem
   querer no meio da página. Deitado, ele mostra o trecho da Orlando Gomes que
   interessa — a avenida corre na horizontal — em 428px.

   PROPORÇÃO, TETO E PISO, os três. A altura é uma FAIXA e não um número: 8:3
   manda na largura de leitura, o `max-height` segura em telas muito largas e o
   `min-height` assume quando aperta — em 360px o 8:3 puro daria 135px, altura
   em que sobra um quarteirão e a marca do Google ocupa um terço dele. É por
   isso que no celular ele volta a ser quase um quadrado: 260px de piso numa
   tela estreita, que é o mínimo para o mapa dizer alguma coisa.

   `height: auto` NÃO É REDUNDANTE. O `<iframe>` leva `width`/`height` como
   atributos de HTML, e eles viram dica de apresentação com peso próprio na
   cascata. O `width: 100%` daqui vence o atributo de largura, mas sem declarar
   `height` o do HTML ficaria valendo e o `aspect-ratio` não teria o que
   calcular: o mapa sairia com altura fixa em qualquer viewport. */
.mapa iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  min-height: 260px;
  max-height: 440px;
  border: 0;
}

/* A legenda é o par acessível do mapa: o endereço em texto e a saída para o
   aplicativo. Filete em cima, como toda ficha da página. */
.mapa-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 14px 18px;
  border-top: 1px solid var(--traco);
  background: var(--penumbra);
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.04em;
  color: var(--cinza);
}

.mapa-pe a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ambar);
  transition: color var(--transicao);
}

.mapa-pe a:hover {
  color: var(--gema);
}

/* ---- FAQ em <details> nativo ---- */

.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  transition: border-color var(--transicao), background var(--transicao);
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--ambar-traco);
}

.faq-item[open] {
  background: var(--sombra);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--giz);
  cursor: pointer;
  /* Some o triângulo padrão do navegador — o sinal de + é desenhado abaixo, e
     os dois juntos ficam com duas setas na mesma linha. */
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Um "+" que vira "−" ao abrir, feito de dois filetes. Sem SVG: são duas
   linhas, e trocar uma delas de escala é mais barato que trocar um arquivo. */
.faq-sinal {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.faq-sinal::before,
.faq-sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ambar);
  transform: translateY(-50%);
  transition: transform var(--transicao), opacity var(--transicao);
}

.faq-sinal::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-item[open] .faq-sinal::after {
  transform: translateY(-50%) rotate(90deg) scaleX(0);
  opacity: 0;
}

.faq-item p {
  padding: 0 22px 22px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--fumaca);
  text-wrap: pretty;
}

.faq-item p a {
  color: var(--ambar);
  border-bottom: 1px solid var(--ambar-traco);
  transition: color var(--transicao), border-color var(--transicao);
}

.faq-item p a:hover {
  color: var(--gema);
  border-color: var(--gema);
}


/* ==========================================================================
   COMISSÃO ORGANIZADORA DA SEMCOMP

   Doze frentes, quatorze pessoas. A unidade é a FRENTE e não a pessoa: quem
   procura esta seção quer saber a quem falar sobre sala, crachá ou patrocínio,
   e duas pessoas que dividem uma frente dividem um cartão.

   Sem retrato: existem sete fotos de diretoria no repositório e quatorze
   pessoas na comissão — meia grade com rosto e meia com inicial faria parecer
   que metade importa menos. Aqui o cartão é tipográfico, e o nome é o que
   acende.
   ========================================================================== */

.comissao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  list-style: none;
}

.comissao-item {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

.comissao-item:hover {
  border-color: var(--ambar-traco);
  background: var(--sombra);
  transform: translateY(-3px);
}

.comissao-frente {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}

/* O NOME é o assunto do cartão, então ele fica no tamanho de um título — e na
   `--display`, não na `--marca`: nome próprio com acento e sobrenome longo na
   fonte manuscrita fica difícil de ler em corpo pequeno. */
.comissao-nomes {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--giz);
  text-wrap: pretty;
}

.comissao-atribuicao {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fumaca);
  text-wrap: pretty;
}


/* ==========================================================================
   COMPETIÇÕES

   A PLAQUINHA BRANCA SAIU DAQUI, e com ela o modificador `--claro`.

   A SBC e a OBI são arte de terceiros desenhada para fundo branco, e a
   plaquinha era a solução honesta enquanto o site as servia como vieram: não
   alterava a marca de ninguém e não deixava traço escuro sobre página escura.
   Custava duas coisas, porém — eram os únicos dois retângulos brancos de um
   site inteiramente escuro, e o `padding` da plaquinha encolhia o desenho para
   ~48px dentro de um selo de 72, ao lado de um papagaio que ocupava os 72.

   Hoje quem resolve isso é o pipeline: `scripts/otimizar-imagens.py` entrega
   as duas em mono claro com alfa (`logo_mono`) e o papagaio aparado pela caixa
   do desenho (`logo_alfa`), os três com o mesmo respiro interno. Aqui em cima
   sobrou uma regra só, sem exceção — que é o sinal de que a diferença estava
   no arquivo e não na folha de estilo.
   ========================================================================== */

.competicao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.competicao-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 30px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--penumbra);
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

.competicao-card:hover {
  border-color: var(--ambar-traco);
  background: var(--sombra);
  transform: translateY(-3px);
}

/* 84px e não mais 72: sem a plaquinha, o selo não precisa reservar espaço para
   moldura nenhuma, e o desenho pode ocupar o quadro inteiro. */
.competicao-selo {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
}

.competicao-selo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.competicao-card h3 {
  margin-top: 22px;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--giz);
}

.competicao-card p {
  margin-top: 11px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}


/* ---- Destaque de competição — Maratona SBC, OBI e MFP ----

   UMA CONSTRUÇÃO, TRÊS CORES.

   Isto nasceu como `.mfp`, bloco único e com o roxo escrito em cada regra.
   Quando a OBI pediu o mesmo tratamento, havia duas saídas: copiar as catorze
   regras trocando as cores, ou tirar as cores das regras. A segunda, porque a
   primeira é como um dos dois blocos fica com o `hover` que o outro ganhou
   depois — o bug que ninguém vê até já estar no ar.

   A APOSTA SE PAGOU NA TERCEIRA: o bloco da Maratona SBC custou quatro linhas
   de variável e nenhuma regra nova. Se as cores tivessem ficado nas regras,
   teriam sido mais catorze para copiar e manter em dia.

   Então a cor virou variável e o resto é comum. O modificador declara três
   tokens e não toca em mais nada:

     --acento-rgb   traço, selo e brilho do bloco — em CANAIS, não em cor
     --acento-forte texto do selo e do link (precisa passar no contraste)
     --acento-par-rgb  o segundo foco de luz, no canto oposto

   OS DOIS ACENTOS SÃO "168, 85, 214" E NÃO "#a855d6" de propósito. Cada um
   deles é usado em cinco opacidades diferentes (0.12 do brilho ao 0.45 do
   selo), e a forma de variar a opacidade de uma variável de cor é passar os
   canais para o `rgba()`. A sintaxe `rgb(from var(--x) r g b / 0.35)` faria o
   mesmo em uma linha, mas onde ela não é suportada a declaração inteira é
   descartada — e o que se perde não é a transparência, é o `background` do
   bloco, que volta a transparente. Canal cru não tem esse precipício.

   O MFP É O ÚNICO BLOCO DO SITE QUE NÃO É ÂMBAR, e continua sendo. A
   identidade da Maratona Feminina é roxa e rosa; repintá-la de laranja para
   "combinar com o site" apagaria justamente o que a distingue. A OBI, ao
   contrário, é da casa — usa o âmbar da página, e é por isso que ela pode ser
   o segundo bloco sem o efeito de circo que duas cores novas causariam. */
.comp-destaque {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(26px, 4vw, 48px);
  margin-top: 44px;
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(var(--acento-rgb), 0.35);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 60% 70% at 12% 20%, rgba(var(--acento-rgb), 0.22), transparent 68%),
    radial-gradient(ellipse 50% 50% at 88% 90%, rgba(var(--acento-par-rgb), 0.12), transparent 70%),
    var(--penumbra);
  overflow: hidden;
}

/* O azul da Maratona SBC. Mesmo caso do MFP abaixo: cor de marca de terceiro,
   vale dentro desta moldura e não entra em tokens.css.

   OS CANAIS SÃO O AZUL DA MARCA CLAREADO, não o azul da marca. `#2b4a78` cru
   dá 2,1:1 contra o `--penumbra` do bloco: como traço de borda a 0.35 ele
   simplesmente não aparece, e o brilho a 0.12 some. `88, 140, 210` é o mesmo
   matiz com luz suficiente para os dois usos.

   `--acento-forte` pinta o texto do selo e do link, então é medido: `#8ec5f0`
   dá 10,4:1 contra `#100f14`, na mesma faixa dos vizinhos (12,1:1 no âmbar da
   OBI, 9,7:1 no lilás do MFP). Abaixo de ~7:1 o azul começa a acinzentar
   contra o fundo do bloco, que já tem o próprio brilho por cima.

   O WORDMARK É MAIS LARGO QUE OS DOIS OUTROS (2,7:1 contra 2,4:1 da OBI), e
   230px devolvem ~85px de altura — a mesma presença de título que a OBI tem
   com 200px. Sem isto ele herdaria os 260px do padrão e ficaria maior que o
   nome da própria seção.

   `--marca-brilho` É O ÚNICO CASO DO PROJETO, e existe por uma restrição e não
   por gosto: os dois arquivos da Maratona em `images/competicoes/` são postos à
   mão e não podem ser alterados, e o wordmark vem no azul `#09467c` da marca.
   Como TÍTULO ele dá 1,49:1 contra o fundo deste bloco — e o número é tão baixo
   justamente porque o brilho do bloco também é azul: é azul sobre azul. Os
   títulos dos vizinhos dão 13,3:1 (OBI) e 15,1:1 (MFP).

   2.2 é o menor valor que passa dos 4,5:1 (dá 4,85:1). O custo está escrito
   aqui para ninguém achar que foi descuido: `brightness` multiplica em sRGB e
   satura o canal, então `rgb(9,70,124)` vira `rgb(20,154,255)` — o azul-marinho
   sai ciano. Não é a cor da marca. Foi a saída escolhida por preservar o
   ARQUIVO; a que preserva a COR seria gerar `sbc-marca.png` tingido de claro
   pelo script, cuja receita continua em `scripts/otimizar-imagens.py`. */
.comp-destaque--sbc {
  --acento-rgb: 88, 140, 210;
  --acento-par-rgb: 86, 180, 225;
  --acento-forte: #8ec5f0;
  --marca-largura: 230px;
  --marca-brilho: brightness(2.2);
}

/* O roxo e o rosa da Maratona Feminina. Não existem em tokens.css: são cor de
   marca de terceiro e valem dentro desta moldura, não na paleta do site. */
.comp-destaque--mfp {
  --acento-rgb: 168, 85, 214;
  --acento-par-rgb: 240, 110, 150;
  --acento-forte: #d9a6f0;
}

/* Estes três SÃO da casa — os mesmos --ambar, --brasa e --gema de tokens.css,
   escritos em canal porque é assim que o bloco os consome. Se a paleta mudar,
   mudam aqui junto (e o comentário é o lembrete de que são cópia). */
.comp-destaque--obi {
  --acento-rgb: 242, 138, 31;
  --acento-par-rgb: 255, 77, 0;
  --acento-forte: var(--gema);
}

/* `.comp-destaque-fundo` SAIU DAQUI, e com ele a marca d'água no canto de cada
   bloco. Ela era o selo da própria prova girado a 16% de opacidade — o mesmo
   arquivo (`obi.png`, `mfp.png`) que o cartão da fileira acima já mostra
   inteiro e na cor cheia, repetido a meia tela de distância. A justificativa
   era "faz o que o pato faz no herói"; a diferença é que o pato aparece uma
   vez. A luz do bloco não dependia dela: vem dos dois `radial-gradient` do
   `.comp-destaque` logo acima, que continuam lá. */

.comp-destaque-say {
  position: relative;
}

.comp-destaque-selo {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid rgba(var(--acento-rgb), 0.45);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-forte);
}

/* A marca É o título. O <h3> não desenha nada; quem desenha é a imagem dentro
   dele, e o `alt` carrega o texto.

   `--marca-largura` porque as duas artes têm formato diferente: o MFP é
   wordmark deitado (480x280 depois do aparo) e a OBI é lockup quadrado. Com
   um número só, ou a lettering do MFP ficava pequena ou o círculo da OBI virava
   um segundo logotipo do tamanho de um título. */
.comp-destaque-marca {
  margin: 20px 0 0;
  font-size: 1rem;
  font-weight: 400;
}

/* `--marca-brilho` VEM ANTES DO `drop-shadow` E ISSO IMPORTA: filtro é uma
   fila, cada função recebe o resultado da anterior. Com o `brightness` antes,
   o halo é lançado a partir da arte já clareada; depois dele, o halo sairia da
   arte escura e seria clareado junto — a marca ganharia um contorno aceso em
   vez de um brilho difuso atrás.

   O padrão é `brightness(1)`, que é identidade: só a Maratona SBC declara
   outro valor (ver `.comp-destaque--sbc`). `brightness(1)` e não `none`
   porque `none` como valor de variável dentro de uma lista de filtros
   invalida a declaração inteira, e o que se perderia junto era o halo. */
.comp-destaque-marca img {
  width: 100%;
  max-width: var(--marca-largura, 260px);
  height: auto;
  filter: var(--marca-brilho, brightness(1))
    drop-shadow(0 0 26px rgba(var(--acento-rgb), 0.5));
}

/* 132px ERA MEDIDA DE SELO: o título deste bloco usava o disco quadrado da OBI,
   e um quadrado de 260px (o padrão) ficava do tamanho de um cartão. Agora ali
   está o wordmark "OBI" em 2,4:1, e a mesma largura devolveria uma lettering de
   55px de altura — menor que o parágrafo abaixo dela. 200px dá ~84px de altura,
   que é a presença de um título ao lado do wordmark do MFP no bloco vizinho. */
.comp-destaque--obi {
  --marca-largura: 200px;
}

.comp-destaque-say p {
  max-width: 46ch;
  margin-top: 18px;
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--fumaca);
  text-wrap: pretty;
}

/* O botão do modal herda `.link-seta`, que é âmbar; aqui ele acompanha o
   acento do bloco. `border: 0` porque `.link-seta` também veste <button>. */
.comp-destaque .link-seta {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--mono);
  cursor: pointer;
  color: var(--acento-forte);
}

.comp-destaque .link-seta:hover {
  color: var(--giz);
}

.comp-destaque-foto {
  position: relative;
  border: 1px solid rgba(var(--acento-rgb), 0.3);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--breu);
}

.comp-destaque-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.9);
  transition: filter 0.5s var(--transicao);
}

.comp-destaque-foto:hover img {
  filter: none;
}


/* ==========================================================================
   MODAIS

   Três — Comunidade, SEMCOMP e o agradecimento do PROSEL — e uma implementação
   só, em `js/main.js`. Antes eram dois modais com um par de listeners copiado
   para cada um; foi assim que o Discord ficou desatualizado numa das duas
   listas de redes que existiam.

   `hidden` DE VERDADE no HTML, e não só uma classe: sem ele o conteúdo do modal
   continua na ordem de tabulação e na leitura de tela enquanto está fechado, e
   dá para tabular às cegas por dentro de um diálogo invisível. O `.open` existe
   para a transição de entrada; quem esconde é o atributo.
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 4, 6, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--transicao);
}

/* `[hidden]` não vence `display: grid` sozinho — a regra de display de um
   seletor de classe tem mais peso que a do atributo na folha do navegador.
   Sem esta linha o modal fica visível o tempo todo. */
.modal-overlay[hidden] {
  display: none;
}

.modal-overlay.open {
  opacity: 1;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 432px;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 40px 32px 32px;
  border: 1px solid var(--traco);
  border-radius: var(--r-lg);
  background: var(--penumbra);
  box-shadow: var(--elevacao);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--transicao);
}

/* Comunidade e SEMCOMP são conteúdo de página que passou a morar em modal:
   seis cartões de rede e uma ficha de evento não cabem numa coluna de 432px
   sem virar uma pilha de 2000px de altura. */
.modal-card--largo {
  max-width: 760px;
  padding: 44px 40px 40px;
}

.modal-overlay.open .modal-card {
  transform: none;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--penumbra);
  color: var(--cinza);
  transition: color var(--transicao), background var(--transicao);
}

.modal-close:hover {
  color: var(--giz);
  background: rgba(255, 255, 255, 0.08);
}

.modal-topo {
  margin-bottom: 28px;
}

.modal-topo--centro {
  text-align: center;
}

.modal-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px;
  border: 1px solid var(--ambar-traco);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}

.modal-selo--vivo {
  background: var(--ambar-lavagem);
  color: var(--gema);
}

.modal-topo h2 {
  margin-top: 18px;
  font-family: var(--marca);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--giz);
}

.modal-topo p {
  max-width: 56ch;
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fumaca);
  text-wrap: pretty;
}

.modal-topo--centro p {
  margin-left: auto;
  margin-right: auto;
}

.modal-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
}

/* O letreiro de neon É o título do modal da SEMCOMP. O halo é literal e não
   enfeite: a mesma luz que sai do pato, só que aqui ela já vem pintada no
   arquivo e o `drop-shadow` apenas a estende para fora do traço. */
.modal-semcomp-logo {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-top: 20px;
  filter: drop-shadow(0 0 34px rgba(255, 77, 0, 0.34));
}

/* Ficha do evento — mesmos filetes da ficha do PROSEL. */
.modal-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 22px;
  margin-bottom: 24px;
}

.modal-ficha > div {
  padding: 14px 0 0;
  border-top: 1px solid var(--traco);
}

.modal-ficha dt {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.modal-ficha dd {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--giz);
}

.modal-foto {
  margin-bottom: 26px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--breu);
}

/* Quando a foto fecha o modal em vez de ficar no meio dele, a margem de baixo
   vira um vão entre a imagem e a borda do cartão. */
.modal-foto--fecha {
  margin-top: 28px;
  margin-bottom: 0;
}

.modal-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* O grupo ocupa a faixa central da foto; embaixo é cadeira vazia e o teto
     come o topo. 45% mantém os rostos no quadro no corte deitado. */
  object-position: center 45%;
}

.modal-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 26px;
}

.modal-nota {
  font-family: var(--mono);
  font-size: var(--t-mini);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--cinza);
}

/* Bloco secundário dentro do modal (os grupos da maratona). Separado por um
   filete e por um rótulo, porque é outra categoria de coisa: canais do clube
   acima, salas de turma abaixo. */
.modal-bloco {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--traco);
}

.modal-bloco-titulo {
  display: block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}


/* ---- O aviso que abre sozinho ----

   O modal do PROSEL aberto. É o único que a pessoa não pediu para ver, e a
   diferença de tratamento vem daí: ele precisa se explicar em um segundo, antes
   de a mão chegar no X.

   A luz âmbar no topo é a mesma do `.acao-card--destaque` — o site inteiro usa
   esse degradê para dizer "é por aqui", e um aviso que aparece sem ser chamado
   não é hora de inventar um segundo vocabulário.

   MAIS LARGO QUE OS OUTROS MODAIS, e a largura aqui é vertical: nos 432px do
   `.modal-card` os dois botões empilham, as duas portas empilham, e o cartão
   passa de 800px de altura — num notebook de 768px a camisa fica abaixo da
   dobra, dentro de uma rolagem interna que ninguém procura num aviso. A 560px
   os botões cabem lado a lado e as portas viram duas colunas: o mesmo conteúdo
   inteiro na tela. */
.modal-card--aviso {
  max-width: 560px;
  border-color: var(--ambar-traco);
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 77, 0, 0.12), transparent 72%),
    var(--penumbra);
}

/* Membresia e camisa, abaixo do filete. `auto-fit` e não duas colunas fixas:
   no celular elas empilham sozinhas, que é onde a altura sobra e a largura é
   que falta. */
.aviso-portas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

/* A seta ocupa uma coluna inteira à direita, atravessando as três linhas de
   texto: assim ela fica no centro óptico do bloco em qualquer altura de
   descrição, sem depender de `align-items` combinar com o tamanho do texto. */
.aviso-porta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "selo seta"
    "nome seta"
    "desc seta";
  /* `align-items` centra a seta na altura das três linhas de texto. O
     `align-content` é o par necessário disso: sem ele, a porta mais curta das
     duas — que a grade estica para igualar a altura da vizinha — centra também
     o texto, e os dois títulos param em alturas diferentes lado a lado. */
  align-items: center;
  align-content: start;
  column-gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--traco);
  border-radius: var(--r);
  background: var(--sombra);
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

.aviso-porta:hover {
  border-color: var(--ambar-traco);
  background: var(--ambar-lavagem);
  transform: translateY(-2px);
}

.aviso-porta-selo {
  grid-area: selo;
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
  transition: color var(--transicao);
}

.aviso-porta:hover .aviso-porta-selo {
  color: var(--ambar);
}

.aviso-porta strong {
  grid-area: nome;
  margin-top: 7px;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--giz);
}

.aviso-porta-desc {
  grid-area: desc;
  margin-top: 5px;
  font-size: 0.865rem;
  line-height: 1.5;
  color: var(--fumaca);
  text-wrap: pretty;
}

.aviso-porta-seta {
  grid-area: seta;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--traco);
  border-radius: 50%;
  color: var(--fumaca);
  transition: border-color var(--transicao), background var(--transicao),
    color var(--transicao), transform var(--transicao);
}

.aviso-porta:hover .aviso-porta-seta {
  border-color: var(--ambar-traco);
  background: var(--ambar-lavagem);
  color: var(--ambar);
  transform: translateX(3px);
}


/* ==========================================================================
   RODAPÉ
   ========================================================================== */

footer {
  padding: 34px 0 44px;
  border-top: 1px solid var(--traco);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 0.875rem;
  color: var(--fumaca);
}

.footer-left img {
  width: 34px;
  height: 34px;
  opacity: 0.75;
}

/* O rodapé ganhou links porque a navegação encolheu para quatro itens: dois
   deles abrem modal e um é o Login, então "Seja membro" e "Help CIMATEC" são
   os únicos destinos de página que existem — e quem chega ao fim rolando é
   exatamente quem não vai subir de volta até a barra. */
.footer-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.footer-right a {
  font-size: 0.875rem;
  color: var(--fumaca);
  transition: color var(--transicao);
}

.footer-right a:hover {
  color: var(--ambar);
}

.footer-tech {
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinza);
}


/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/* A barra tem quatro itens mais o Login. Antes de mandá-los para o hambúrguer,
   aperta o respiro de cada um. */
@media (max-width: 1080px) {
  .nav-links li > a,
  .nav-links li > button {
    padding-left: 10px;
    padding-right: 10px;
  }

  .nav-links li a.nav-cta {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 980px) {
  .hero {
    padding-top: 132px;
  }

  .pagina-hero {
    padding-top: 122px;
  }

  /* O cartaz do PROSEL empilha: texto primeiro, foto no pé sangrando até as
     bordas do cartão. */
  .prosel-cartaz {
    grid-template-columns: minmax(0, 1fr);
  }

  .prosel-foto {
    margin: 0 calc(-1 * clamp(30px, 4.4vw, 52px))
              calc(-1 * clamp(30px, 4.4vw, 52px));
    border-left: 0;
    border-top: 1px solid var(--traco);
  }

  /* Empilhado, a sangria da foto muda de eixo — e o cartaz em destaque tem o
     seu próprio `padding`, então a margem negativa dele precisa repetir a
     mesma `clamp`. Um número solto aqui reapareceria como uma faixa do fundo
     do cartaz entre a foto e a borda, só nas larguras em que as duas `clamp`
     divergem. */
  .prosel-cartaz--destaque .prosel-foto {
    margin: 0 calc(-1 * clamp(30px, 5vw, 60px))
              calc(-1 * clamp(30px, 5vw, 60px));
  }

  /* Em pé e de largura cheia a foto ficaria com dois metros de altura, então
     empilhada ela vira uma faixa deitada. `min-height: 0` derruba os 340px que
     só fazem sentido ao lado da coluna de texto. */
  .prosel-foto img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* No celular o pato vem primeiro: a luz precisa chegar antes do texto. */
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 34px;
  }

  .hero-duck {
    order: -1;
  }

  .duck-mark {
    max-width: min(58vw, 250px);
  }

  .duck-light {
    inset: -55% -45%;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  /* Cinco retratos em fileira não cabem: a partir daqui a fileira volta a ser
     grade e se reacomoda sozinha (4, depois 3, depois 2 colunas). */
  .directors-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  /* Os blocos de duas colunas empilham aqui, junto do cartaz do PROSEL: abaixo
     disto a coluna de texto fica com ~200px e o parágrafo quebra a cada três
     palavras. */
  .sobre-evento,
  .inscricao-grid,
  .alcance,
  .comp-destaque {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Empilhado, o texto perde a centralização vertical que só fazia sentido ao
     lado das pílulas. */
  .alcance {
    align-items: start;
  }

  /* Empilhado, o texto vem primeiro e a foto fecha o bloco — a ordem em que se
     lê, e não a ordem em que os dois estão no HTML da versão larga. */
  .comp-destaque-foto {
    order: 2;
  }

  /* A capa deixa de ter altura mínima: o `min(88vh, 780px)` serve para a foto
     preencher a tela num monitor, mas no celular ele vira um vão vazio abaixo
     da ficha. */
  .capa {
    min-height: 0;
    padding-top: 138px;
  }

  /* A do meio para de se destacar: com as três estreitas, o degrau de 26px só
     desalinha a fileira em vez de dar ritmo a ela. */
  .foto--alta {
    transform: none;
  }

  /* 980px também é onde a navegação vira menu: o ponto em que a página muda de
     forma é o mesmo em que a barra muda de forma. */
  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  nav {
    padding-right: 6px;
  }
}

@media (max-width: 860px) {
  /* O complemento da tarja sai INTEIRO, e sai aqui.

     A frase pede 507px, o botão 140 e o resto (ponto, respiros, o vão do X)
     mais uns 115: abaixo de ~860px ela não cabe mais e o `text-overflow` a
     cortaria no meio. Meia frase com reticências não informa nada e ainda
     empurra o botão — que é a única coisa da tarja que precisa ser clicada.
     Sem ela sobra o essencial: o que abriu e por onde entrar. */
  .tarja-detalhe {
    display: none;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Em duas colunas, quem começa linha não leva filete à esquerda. */
  .stat-item {
    padding: 24px 20px 4px;
  }

  .stat-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .stat-item:nth-child(n + 3) {
    border-top: 1px solid var(--traco);
    margin-top: 4px;
  }

  /* O modal largo perde o respiro extra: numa tela de 800px ele já ocupa
     quase tudo, e 40px de cada lado são 10% da largura útil. */
  .modal-card--largo {
    padding: 40px 26px 30px;
  }
}

@media (max-width: 620px) {
  /* Sem o complemento, o que sobra da tarja cabe folgado num celular — mas o
     botão é o alvo do polegar e ele merece a folga. Encolher a barra em 4px é
     o que devolve esse espaço ao redor dele; a variável leva os 4px para a
     navbar e para o topo da página junto. */
  :root.com-tarja {
    --tarja-h: 42px;
  }

  .tarja-texto {
    font-size: 0.8125rem;
  }

  .tarja-cta {
    padding: 6px 13px;
    font-size: 0.75rem;
  }

  /* A presidência empilha e os cartões largos viram cartões normais: com menos
     de 620px o retrato lateral fica estreito demais para valer a pena. */
  .directors-lead {
    grid-template-columns: 1fr;
  }

  .director-lead {
    flex-direction: column;
  }

  .director-lead .director-plate {
    width: 100%;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--traco);
  }

  .director-lead .director-foto {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .director-lead .director-corpo {
    padding: 20px 20px 24px;
  }

  /* O número da seção sai da margem e sobe para cima do rótulo: numa coluna de
     600px ele comia 50px de largura de um título que já precisa de todos. */
  .secao-topo {
    flex-direction: column;
    gap: 14px;
  }

  /*
    A TRILHA DOS DIAS PERDE A PLAQUETA LATERAL.

    Com 67px de plaqueta + 16px de vão numa coluna de 340px, o tema do dia
    ficava com 250px e "Cyber & Quantum Day" quebrava em três linhas. Aqui a
    data vira uma faixa deitada em cima do cartão: os mesmos dois dados (dia e
    mês), lado a lado, sem cobrar largura do texto.

    O filete que ligava as plaquetas sai junto — na vertical ele passaria por
    dentro dos cartões, não por trás deles.
  */
  .trilha::before {
    display: none;
  }

  .trilha-dia {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .trilha-data {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 0;
    border-radius: var(--r) var(--r) 0 0;
  }

  .trilha-num {
    font-size: 1.35rem;
  }

  .trilha-corpo {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /*
    A FILEIRA DE FOTOS VIRA UMA COLUNA, e cada foto vira deitada.

    Três colunas de ~180px deixavam as fotos com 135px de altura: nesse tamanho
    não se distingue mais gente de cadeira, e uma foto que não se lê é peso de
    download sem função. Uma por linha, em 16:9, cada uma ocupa a largura toda e
    volta a mostrar o que mostra. O `aspect-ratio` também derruba o retrato do
    meio para deitado — em pé e com largura cheia ele sozinho ocuparia uma tela
    inteira de celular.
  */
  .fotos {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .foto,
  .foto--alta {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 560px) {
  /*
    Um botão por linha, cada um da largura da coluna.

    E aqui o `white-space: nowrap` dos botões deixa de valer. Ele existe para a
    barra e para as filas deitadas, onde um rótulo que quebra faz a pílula
    crescer e desalinha a fileira inteira. Num botão que já ocupa a linha toda
    não há fileira para desalinhar, e o que o nowrap fazia era garantir que
    "Quero me inscrever na SEMCOMP" — 292px de rótulo numa coluna de 220 —
    passasse por baixo da borda em vez de virar duas linhas. Rótulo de CTA em
    dois andares é normal no celular; rótulo cortado não é.
  */
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary,
  .prosel-acoes .btn-primary,
  .prosel-acoes .btn-outline,
  .modal-acoes .btn-primary,
  .modal-acoes .btn-outline,
  .capa-acoes .btn-primary,
  .capa-acoes .btn-secondary,
  .inscricao-acoes .btn-primary,
  .inscricao-acoes .btn-outline,
  .acoes-centro .btn-outline {
    flex: 1 1 100%;
    white-space: normal;
  }

  /* As fichas viram listas de filetes, um dado por linha. */
  .event-meta,
  .modal-ficha,
  .capa-ficha {
    grid-template-columns: 1fr;
  }

  /* O pé do cartão vira duas linhas: a nota do formulário tem umas seis
     palavras e, dividindo a linha com a seta, sobrava um filete de 120px em
     que ela quebrava a cada duas. */
  .acao-pe {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* O modal é o bloco mais aninhado do site — cartão dentro de sobreposição,
     com cartões dentro. Cada camada cobra o respiro dos dois lados, e numa
     tela de 390px sobravam ~150px para a descrição de cada rede. */
  .modal-card {
    padding: 38px 20px 24px;
  }

  .modal-card--largo {
    padding: 38px 20px 26px;
  }

  .rede-card,
  .maratona-grupo {
    padding: 15px 16px;
    gap: 12px;
  }

  /* Mesmo respiro dos dois acima, mas só na coluna: as linhas da porta são
     separadas por `margin-top`, e um `gap` cheio aqui somaria aos dois. */
  .aviso-porta {
    padding: 15px 16px;
    column-gap: 12px;
  }

  /* O AVISO APERTA AS JUNTAS NO CELULAR.

     Ele é o modal mais alto do site — anúncio, dois botões e duas portas — e
     no celular tudo isso empilha: os botões viram um por linha (regra acima) e
     as portas viram uma coluna. Num iPhone SE (667px de altura) o cartão passa
     da tela e a camisa, que é justamente uma das coisas anunciadas, cai numa
     rolagem interna.

     Os vãos abaixo são os mesmos do modal comum, encolhidos: é o que dá para
     recuperar sem cortar conteúdo — e cortar conteúdo aqui seria apagar
     exatamente o que o aviso existe para dizer. Em telas de 844px (o padrão
     dos aparelhos de hoje) isso já é o bastante para caber inteiro. */
  .modal-card--aviso .modal-topo {
    margin-bottom: 18px;
  }

  .modal-card--aviso .modal-acoes {
    margin-top: 18px;
  }

  .modal-card--aviso .modal-bloco {
    margin-top: 22px;
    padding-top: 20px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /*
    ==========================================================================
    O NÚMERO DA ETAPA — de marca-d'água a selo

    O BUG: em telas estreitas (Mobile S, 320px) os números 1..4 dos cartões do
    PROSEL apareciam cortados ou não apareciam.

    Eram três causas somadas, e nenhuma delas isolada explicava tudo:

    1. `position: absolute; top: -14px; right: 6px` tira o número do fluxo e o
       ancora FORA da borda de cima do cartão. O `.passo` tem `overflow:
       hidden`, então a parte que sobe além da borda é recortada — de propósito,
       porque o efeito pretendido era o de um número sangrando pelo canto.
    2. Esse número tem `font-size: 5.5rem` (88px) e não encolhe com a tela. Num
       cartão de 320px menos as margens, ele passava a ocupar quase um terço da
       largura e metade da altura útil.
    3. `opacity: 0.14` só funciona como marca-d'água quando há área de sobra em
       volta do texto. Sem essa sobra, o "1" gigante e apagado passava POR TRÁS
       do título e do parágrafo — legível nem como número nem como fundo.

    A correção anterior era `display: none`, que resolvia a ilegibilidade
    apagando a informação: o número É o conteúdo aqui (a ordem das etapas é o
    assunto da lista), e some justamente na tela em que a `<ol>` mais parece um
    monte de cartões soltos.

    A CORREÇÃO: abaixo de 560px o número deixa de ser marca-d'água e vira selo.

      · `position: static` devolve o número ao fluxo — some o recorte, porque
        não há mais nada para fora da caixa, e o `overflow: hidden` do cartão
        deixa de importar.
      · `font-size: 1.05rem` e opacidade cheia: em 88px translúcido ele era
        textura; em 17px opaco ele é um número que se lê.
      · `display: grid; place-items: center` numa caixa quadrada de 34px o
        centraliza nos dois eixos, e o `flex-shrink: 0` impede que a caixa
        aperte se o título ao lado crescer.
      · `margin-bottom` no lugar do `top` negativo, que era o que empurrava o
        número para debaixo da borda.

    Vale de 560px para baixo e não só em 320: entre 380 e 560 o número já
    encostava no título, e o selo é melhor nos dois casos.
    ========================================================================== */
  .passo {
    padding: 22px 20px 24px;
  }

  .passo-num {
    position: static;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border: 1px solid var(--ambar-traco);
    border-radius: 999px;
    background: var(--ambar-lavagem);
    font-family: var(--mono);
    font-size: 1.05rem;
    line-height: 1;
    color: var(--gema);
    opacity: 1;
  }

  /* O `:hover` que clareava a marca-d'água não se aplica a um selo opaco — e
     em tela de toque não há ponteiro para disparar ele de todo jeito. */
  .passo:hover .passo-num {
    opacity: 1;
  }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   O pato para de flutuar, o brilho para de respirar e nada mais entra
   deslizando — o conteúdo aparece direto, já no lugar.
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in,
  .fade-in-left,
  .fade-in-right {
    opacity: 1;
    transform: none;
  }

  .cursor-glow {
    display: none;
  }

  /*
    A FAIXA PRECISA DE UMA REGRA PRÓPRIA, e o `animation-duration: 0.01ms` da
    regra universal acima é justamente o motivo.

    Encurtar a duração não cancela a animação: ela roda inteira em 0,01ms e
    PARA NO ÚLTIMO QUADRO, que aqui é `translateX(-50%)`. O trilho ficaria
    parado com a primeira cópia da lista inteiramente fora da tela, à esquerda —
    metade da faixa vazia, para sempre. `animation: none` devolve o trilho ao 0%
    e a faixa vira o que deveria ser sem movimento: uma lista quieta.

    O `!important` acompanha o da regra universal, que ganharia por vir depois
    na cascata em igualdade de peso.
  */
  .faixa-trilho {
    animation: none !important;
    transform: none;
  }
}