/* Montanha em Movimento – ACDBM
   Identidade: verde-floresta e ouro do emblema, curvas de nível douradas como elemento de assinatura.
   Tipos: Barlow Condensed (títulos, ecoa as letras do emblema) + Source Serif 4 (texto). */

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }

:root {
  --verde: #2e6417;
  --verde-escuro: #224c11;
  --verde-noite: #153009;
  --ouro: #d3af24;
  --ouro-claro: #f0d96c;
  --ouro-texto: #7a5f00;
  --gelo: #cfe6ff;
  --destaque: #fbf3cf;
  --suave: #f3f6ef;
  --papel: #ffffff;
  --texto: #1b2317;
  --texto-suave: #4a5744;
  --linha: #d5dccd;
  --erro: #a12b1b;

  --titulos: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --corpo: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --altura-cabecalho: 4.75rem;
  --largura: clamp(72rem, 88vw, 96rem);
  --margem: clamp(1rem, 4vw, 2.5rem);
  --raio: 0.5rem;
  --sombra: 0 1px 2px rgb(21 48 9 / 0.08), 0 8px 24px -12px rgb(21 48 9 / 0.25);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--altura-cabecalho) + 1rem); }

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--papel);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

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

h1, h2, h3, h4 {
  font-family: var(--titulos);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  color: var(--verde-noite);
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 7vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--verde); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--verde-noite); }

:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 2px; }
.cabecalho :focus-visible, .rodape :focus-visible, .hero :focus-visible, .pagina-topo :focus-visible { outline-color: var(--ouro-claro); }

.so-leitores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.icone { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icone--pequeno { width: 1rem; height: 1rem; }

.contentor { width: 100%; max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }

/* ---------- Cabeçalho ---------- */

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ouro); color: var(--verde-noite); padding: 0.6rem 1rem; font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 0.5rem; }

.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--papel);
  border-bottom: 3px solid var(--ouro);
}
.cabecalho__barra {
  max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem);
  min-height: var(--altura-cabecalho);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cabecalho__marca { display: block; line-height: 0; flex: none; }
.cabecalho__marca img { height: 3.6rem; width: auto; }
.cabecalho__botao {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem;
  border: 2px solid var(--verde); border-radius: var(--raio); background: transparent; color: var(--verde); cursor: pointer;
}
.cabecalho__botao .icone { width: 1.6rem; height: 1.6rem; }

.menu { display: none; }
.cabecalho--aberto .menu {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papel); border-bottom: 3px solid var(--ouro);
  padding: 0.5rem var(--margem) 1.5rem; max-height: calc(100dvh - var(--altura-cabecalho)); overflow-y: auto;
  box-shadow: 0 24px 32px -16px rgb(21 48 9 / 0.35);
}
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu a, .menu__sub-botao {
  display: flex; align-items: center; gap: 0.4rem; width: 100%;
  font-family: var(--titulos); font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: 0.01em;
  color: var(--verde-noite); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 0.7rem 0;
}
.menu__lista > li { border-bottom: 1px solid var(--linha); }
.menu a[aria-current='page'], .menu__sub-botao--ativo { color: var(--verde); box-shadow: inset 4px 0 0 var(--ouro); padding-left: 0.75rem; }
.menu__sub-botao .icone { transition: transform 0.2s; }
.menu__com-sub.aberto .menu__sub-botao .icone { transform: rotate(180deg); }
.menu__sub { list-style: none; margin: 0; padding: 0 0 0.5rem 1rem; display: none; }
.menu__com-sub.aberto .menu__sub { display: block; }
.menu__sub a { font-size: 1.3rem; font-weight: 500; }
.menu a.menu__socio { display: inline-flex; width: auto; margin-top: 1.25rem; }

@media (min-width: 62rem) {
  .cabecalho__botao { display: none; }
  .menu, .cabecalho--aberto .menu {
    display: flex; align-items: center; gap: 1.75rem;
    position: static; padding: 0; max-height: none; overflow: visible; border: 0; box-shadow: none; background: transparent;
  }
  .menu__lista { display: flex; align-items: center; gap: 1.5rem; }
  .menu__lista > li { border: 0; position: relative; }
  .menu a, .menu__sub-botao { width: auto; font-size: 1.3rem; padding: 0.35rem 0; }
  .menu a[aria-current='page'], .menu__sub-botao--ativo { box-shadow: inset 0 -3px 0 var(--ouro); padding-left: 0; color: var(--verde); }
  .menu a:hover, .menu__sub-botao:hover { color: var(--verde); }
  .menu__sub {
    position: absolute; left: -1rem; top: calc(100% + 0.6rem); min-width: 14rem; padding: 0.5rem 1rem;
    background: var(--papel); border: 1px solid var(--linha); border-top: 3px solid var(--ouro); box-shadow: var(--sombra);
  }
  .menu a.menu__socio { margin: 0; padding: 0.55rem 1.1rem; box-shadow: none; }
}

/* O botão "Ser sócio" dentro do menu (precisa de ganhar à regra genérica dos links do menu) */
.menu a.botao { width: auto; background: var(--ouro); color: var(--verde-noite); padding: 0.7rem 1.4rem; box-shadow: none; }
.menu a.botao:hover { background: var(--ouro-claro); color: var(--verde-noite); }
.menu a.botao[aria-current='page'] { box-shadow: inset 0 0 0 3px var(--verde-noite); padding-left: 1.4rem; color: var(--verde-noite); }
@media (min-width: 62rem) {
  .menu a.botao { padding: 0.55rem 1.1rem; font-size: 1.3rem; }
  .menu a.botao[aria-current='page'] { padding-left: 1.1rem; }
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--titulos); font-weight: 700; font-size: 1.3rem; line-height: 1.1; letter-spacing: 0.02em;
  padding: 0.7rem 1.4rem; border-radius: var(--raio); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  min-height: 2.9rem;
}
.botao--ouro { background: var(--ouro); color: var(--verde-noite); }
.botao--ouro:hover { background: var(--ouro-claro); color: var(--verde-noite); }
.botao--verde { background: var(--verde); color: #fff; }
.botao--verde:hover { background: var(--verde-escuro); color: #fff; }
.botao--contorno { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.7); }
.botao--contorno:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.botao--contorno-escuro { background: transparent; color: var(--verde); border-color: var(--verde); }
.botao--contorno-escuro:hover { background: var(--verde); color: #fff; }
.botao[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Curvas de nível (elemento de assinatura) ---------- */

.com-contornos { position: relative; isolation: isolate; background-color: var(--verde-noite); color: #fff; }
.com-contornos::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('/img/contornos.svg') center / cover no-repeat; opacity: 0.28;
}

/* ---------- Herói (banner rotativo) ---------- */

.hero { position: relative; background: var(--verde-noite); color: #fff; overflow: hidden; }
.hero__slides { display: grid; min-height: calc(100dvh - var(--altura-cabecalho)); }
.hero__slide {
  grid-area: 1 / 1; display: grid; grid-template-rows: minmax(15rem, 40dvh) 1fr;
  opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.hero__slide--ativo { opacity: 1; visibility: visible; transition-delay: 0s; }

.hero__imagem { position: relative; background: var(--verde); overflow: hidden; }
.hero__imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hero__imagem--contido { background: var(--verde-noite); }
.hero__imagem--contido img { object-fit: contain; object-position: center; padding: 8%; }

.hero__texto {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 2.5rem var(--margem) 5.5rem;
}
.hero__texto::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/img/contornos.svg') 30% 50% / cover no-repeat; opacity: 0.32; }
.hero__titulo { color: #fff; font-size: clamp(2.9rem, 8vw, 6rem); margin-bottom: 0.3em; max-width: 12ch; }
.hero__descricao { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 34rem; color: #e8efe3; margin-bottom: 1.5rem; }

.hero__slide--ativo .hero__titulo, .hero__slide--ativo .hero__descricao, .hero__slide--ativo .botao { animation: entrada 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero__slide--ativo .hero__descricao { animation-delay: 0.1s; }
.hero__slide--ativo .botao { animation-delay: 0.2s; }
@keyframes entrada { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

.hero__controlos {
  position: absolute; left: 0; right: 0; bottom: 1.25rem; z-index: 3;
  display: flex; align-items: center; gap: 0.75rem; padding-inline: var(--margem);
}
.hero__pontos { display: flex; gap: 0.25rem; }
.hero__ponto { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; }
.hero__ponto::before { content: ''; display: block; width: 1.9rem; height: 0.28rem; border-radius: 1rem; background: rgb(255 255 255 / 0.45); transition: background-color 0.2s, width 0.2s; }
.hero__ponto[aria-current='true']::before { background: var(--ouro); width: 2.6rem; }
.hero__pausa { color: #fff; border-color: rgb(255 255 255 / 0.5); }

@media (min-width: 56rem) {
  .hero__slides { min-height: calc(100dvh - var(--altura-cabecalho)); max-height: 60rem; }
  .hero__slide { grid-template-rows: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .hero__slide .hero__imagem { order: 2; }
  .hero__texto { padding: 3rem 3rem 6rem max(var(--margem), calc((100vw - var(--largura)) / 2)); }
  .hero__controlos { padding-left: max(var(--margem), calc((100vw - var(--largura)) / 2)); }
}

/* ---------- Secções ---------- */

.seccao { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccao--suave { background: var(--suave); }
.seccao--escura { color: #fff; }
.seccao--escura h2, .seccao--escura h3 { color: #fff; }
.seccao__cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1.75rem; }
.seccao__cabecalho .controlos { align-items: center; margin-left: auto; }
.seccao__cabecalho .controlos .seccao__ver-tudo { margin-right: 0.75rem; }
.seccao__cabecalho h2 { margin: 0; }
.seccao__ver-tudo { font-family: var(--titulos); font-weight: 600; font-size: 1.25rem; white-space: nowrap; }
.seccao__intro { max-width: 40rem; color: var(--texto-suave); font-size: 1.2rem; }

.controlos { display: flex; gap: 0.5rem; }
.controlo {
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center; cursor: pointer;
  background: var(--papel); color: var(--verde); border: 2px solid var(--verde); border-radius: 50%;
}
.controlo:hover:not(:disabled) { background: var(--verde); color: #fff; }
.controlo:disabled { opacity: 0.35; cursor: default; }
.controlo[hidden] { display: none; }

.vazio { padding: 2rem 1.25rem; border: 2px dashed var(--linha); border-radius: var(--raio); color: var(--texto-suave); text-align: center; margin: 0; }

/* Cabeçalho das páginas interiores */
.pagina-topo { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pagina-topo h1 { color: #fff; margin: 0 0 0.2em; }
.pagina-topo p { margin: 0; max-width: 40rem; font-size: 1.25rem; color: #e8efe3; }
.migalhas { font-size: 1rem; margin-bottom: 1rem; }
.migalhas a { color: var(--ouro-claro); }

/* ---------- Faixa deslizante (eventos, notícias) ---------- */

.faixa {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 0.25rem var(--margem) 1.25rem;
  margin-inline: calc(var(--margem) * -1); scrollbar-width: thin; scrollbar-color: var(--verde) var(--linha);
}
.faixa > * { flex: 0 0 min(21rem, 82%); scroll-snap-align: start; }
.faixa:focus-visible { outline-offset: -3px; }

/* ---------- Futsal: carrossel circular da equipa (jogadoras e equipa técnica, fotografia e função) ---------- */

.carrossel {
  position: relative; isolation: isolate; overflow: hidden;
  --enchimento: clamp(1.25rem, 3vw, 2.25rem);
  margin-block: clamp(2.5rem, 6vw, 4rem); padding: var(--enchimento);
  background: var(--verde-noite); color: #fff; border-radius: var(--raio); border-top: 4px solid var(--ouro);
}
.carrossel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/img/contornos.svg') 70% 40% / cover no-repeat; opacity: 0.28; }
/* Dentro de um separador, o espaço entre blocos já vem do `gap` da grelha. */
.painel-separador > .carrossel { margin-block: 0; }
.carrossel h2 { color: #fff; }
.carrossel .controlo { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.55); }
.carrossel .controlo:hover:not(:disabled) { background: var(--ouro); border-color: var(--ouro); color: var(--verde-noite); }

/* O palco é uma grelha de uma só célula: todas as pessoas ocupam o mesmo sítio e a altura é a da maior (a da frente);
   o lugar de cada uma, em círculo, vem de `data-distancia` (0 = à frente) e `data-lado`. */
.carrossel__palco {
  display: grid; justify-items: center; align-items: center; list-style: none; margin: 0; padding: 0.75rem 0 0.5rem;
  perspective: 1100px; touch-action: pan-y; user-select: none;
}
.carrossel__palco:focus-visible { outline-offset: 4px; }
.carrossel__pessoa {
  --larg: clamp(10.5rem, 56vw, 15rem);
  --s: 0.5; --x: 1.8; --giro: 40deg; --opac: 0; --lado: 1;
  grid-area: 1 / 1; width: var(--larg); cursor: pointer;
  opacity: var(--opac); pointer-events: none;
  transform: translateX(calc(var(--lado) * var(--x) * 100%)) rotateY(calc(var(--lado) * var(--giro))) scale(var(--s));
  transition: transform 0.85s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.85s ease, filter 0.85s ease;
}
@media (min-width: 40rem) { .carrossel__pessoa { --larg: clamp(12rem, 26vw, 17rem); } }
@media (min-width: 64rem) { .carrossel__pessoa { --larg: clamp(14rem, 22vw, 19rem); } }
.carrossel__pessoa[data-lado='esquerda'] { --lado: -1; }
.carrossel__pessoa[data-distancia='0'] { --s: 1; --x: 0; --giro: 0deg; --opac: 1; z-index: 4; cursor: default; }
.carrossel__pessoa[data-distancia='1'] { --s: 0.76; --x: 0.92; --giro: 26deg; --opac: 0.8; z-index: 3; pointer-events: auto; filter: saturate(0.75) brightness(0.82); }
.carrossel__pessoa[data-distancia='2'] { --s: 0.58; --x: 1.52; --giro: 34deg; --opac: 0.45; z-index: 2; pointer-events: auto; filter: saturate(0.6) brightness(0.7); }
.carrossel__pessoa[data-distancia='3'] { z-index: 1; }
.carrossel__pessoa--salta { transition: none; }
@media (prefers-reduced-motion: reduce) { .carrossel__pessoa { transition: none; } }

.carrossel__figura { margin: 0; }
.carrossel__foto { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: var(--raio); background: var(--verde); -webkit-user-drag: none; }
.carrossel__pessoa[data-distancia='0'] .carrossel__foto { box-shadow: 0 0 0 3px var(--ouro), 0 1.25rem 2.5rem rgb(0 0 0 / 0.5); }
.carrossel__legenda { display: block; margin-top: 0.7rem; padding-top: 0.5rem; border-top: 3px solid var(--ouro); text-align: center; text-wrap: balance; transition: opacity 0.85s ease; }
.carrossel__nome { display: block; font-family: var(--titulos); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: #fff; }
.carrossel__funcao { display: block; margin-top: 0.2rem; font-size: 1rem; line-height: 1.25; color: var(--ouro-claro); }
.carrossel__pessoa:not([data-distancia='0']):not([data-distancia='1']) .carrossel__legenda { opacity: 0; }

/* ---------- Sorteios: números livres e ocupados ---------- */

.numeros { margin-top: 2.5rem; }
.numeros__resumo { margin: 0 0 0.6rem; font-size: 1.2rem; }
.numeros__resumo strong { font-family: var(--titulos); font-weight: 700; font-size: 1.6rem; color: var(--verde-noite); }
.numeros__barra {
  display: block; width: 100%; height: 0.55rem; margin: 0 0 1rem; border: 0; border-radius: 1rem; overflow: hidden;
  appearance: none; -webkit-appearance: none; background: var(--linha); color: var(--verde);
}
.numeros__barra::-webkit-progress-bar { background: var(--linha); }
.numeros__barra::-webkit-progress-value { background: var(--verde-noite); border-radius: 1rem; }
.numeros__barra::-moz-progress-bar { background: var(--verde-noite); border-radius: 1rem; }
.numeros__ferramentas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.numeros__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; margin: 0; font-size: 1rem; }
.numeros__chave { display: inline-flex; align-items: center; gap: 0.45rem; }
.numeros__legenda .numero { min-height: 0; padding: 0.05rem 0.55rem; font-size: 1.1rem; }
.numeros__filtro { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: 1rem; }
.numeros__filtro input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--verde); }
.numeros__grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.numero {
  display: grid; place-items: center; min-height: 3rem; border-radius: var(--raio); border: 2px solid transparent;
  font-family: var(--titulos); font-weight: 600; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.numero--livre { background: var(--papel); color: var(--verde-noite); border-color: var(--verde); }
/* Números que se podem escolher: o botão ocupa a caixa toda. O "escolhido" não depende só da cor: leva também um anel interior. */
.numero--escolhivel { cursor: pointer; transition: background-color 0.12s; }
.numero--escolhivel:hover { background: var(--suave); }
.numero__botao { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%; min-height: 2.75rem; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; line-height: inherit; cursor: pointer; }
.numero--escolhido, .numero--escolhido:hover { background: var(--verde); color: #fff; border-color: var(--verde); box-shadow: inset 0 0 0 2px var(--papel); }
/* A linha do que está escolhido acompanha quem desce pela grelha (fica logo abaixo do cabeçalho), com o atalho "Reservar". */
.numeros__escolha { position: sticky; top: calc(var(--altura-cabecalho) + 3px); z-index: 10; min-height: 3.2rem; margin: 0 0 0.75rem; padding: 0.55rem 0; background: var(--papel); border-bottom: 1px solid var(--linha); font-size: 1.05rem; }
.numeros__escolha strong { color: var(--verde-noite); }
.numero--ocupado { background: #e3e8dc; color: #55614f; text-decoration: line-through; text-decoration-thickness: 2px; }
.numeros__grelha--so-livres .numero--ocupado { display: none; }

/* ---------- Cartões de evento: fotografia e selo com a data ---------- */

.cartao { position: relative; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; }
.cartao:hover { box-shadow: var(--sombra); }
.cartao:focus-within { outline: 3px solid var(--ouro); outline-offset: 2px; }
.cartao a::after { content: ''; position: absolute; inset: 0; }
.cartao a:focus-visible { outline: none; }
.cartao a { text-decoration: none; color: inherit; }

.cartao__imagem { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; background: var(--verde); }
.sem-imagem { background: var(--verde-noite) url('/img/emblema-240.png') center / auto 55% no-repeat; position: relative; }
.sem-imagem::before { content: ''; position: absolute; inset: 0; background: url('/img/contornos.svg') center / cover; opacity: 0.25; }
.cartao__corpo { padding: 1.1rem 1.25rem 1.3rem; flex: 1; display: flex; flex-direction: column; }

.evento { flex-direction: column; }
.evento__capa { position: relative; }
.evento__capa .cartao__imagem { aspect-ratio: 16 / 10; }
.evento__data { position: absolute; left: 0.85rem; top: 0.85rem; min-width: 4.4rem; background: var(--verde); color: #fff; display: grid; place-content: center; text-align: center; padding: 0.5rem 0.65rem 0.55rem; border-radius: 0.5rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.evento__dia { font-family: var(--titulos); font-weight: 700; font-size: 2.6rem; line-height: 0.9; }
.evento__mes { font-family: var(--titulos); font-weight: 500; font-size: 1.25rem; color: var(--ouro-claro); }
.evento__data--aberta { background: var(--ouro); color: var(--verde-noite); }
.evento__data--aberta .evento__mes { color: var(--verde-noite); }
.evento__texto { padding: 1rem 1.25rem 1.1rem; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.evento__titulo { font-size: 1.6rem; margin-bottom: 0.25em; }
.evento__subtitulo { margin: 0 0 0.6rem; color: var(--texto-suave); font-size: 1rem; line-height: 1.45; }
.evento__meta { list-style: none; margin: auto 0 0; padding: 0; font-size: 0.95rem; color: var(--texto-suave); }
.evento__meta li { display: flex; align-items: flex-start; gap: 0.4rem; margin-top: 0.2rem; }
.evento__meta .icone { width: 1.05rem; height: 1.05rem; margin-top: 0.28rem; color: var(--verde); }
.etiqueta { display: inline-block; align-self: flex-start; font-family: var(--titulos); font-weight: 600; font-size: 1.05rem; padding: 0.05rem 0.6rem; border-radius: 1rem; background: var(--gelo); color: var(--verde-noite); margin-bottom: 0.5rem; }
.etiqueta--ouro { background: var(--ouro); }

.grelha-eventos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

/* ---------- Notícias ---------- */

.noticia .cartao__titulo { font-size: 1.55rem; margin-bottom: 0.3em; }
.noticia__data { font-size: 0.95rem; color: var(--ouro-texto); font-weight: 600; margin: 0 0 0.35rem; }
.noticia__resumo { margin: 0; color: var(--texto-suave); font-size: 1rem; line-height: 1.5; }
.noticia__autor { margin: 0.6rem 0 0; color: var(--texto-suave); font-size: 0.95rem; font-weight: 600; }
.grelha-noticias { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

/* Página inicial: a mais recente em grande, as outras ao lado */
.noticias-destaque { display: grid; gap: 1.5rem; }
.noticia--destaque .cartao__titulo { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.noticia--destaque .noticia__resumo { font-size: 1.1rem; }
@media (min-width: 56rem) {
  .noticias-destaque { grid-template-columns: 1.35fr 1fr; }
  .noticias-destaque > .noticia--destaque { grid-row: span 2; }
  .noticias-destaque > .noticia--destaque .cartao__imagem { aspect-ratio: auto; flex: 1 1 0; min-height: 15rem; }
  .noticias-destaque > :not(.noticia--destaque) { flex-direction: row; }
  .noticias-destaque > :not(.noticia--destaque) .cartao__imagem { aspect-ratio: auto; flex: none; width: 38%; height: auto; }
  .noticias-destaque > .noticia--destaque:nth-last-child(2) { grid-row: auto; }
  .noticias-destaque > :only-child { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
  .noticias-destaque > :only-child .cartao__imagem { aspect-ratio: auto; flex: none; width: 55%; min-height: 15rem; }
}

/* ---------- Texto corrido ---------- */

.texto > :last-child { margin-bottom: 0; }
/* Parágrafos justificados, com separação de palavras no fim da linha para não abrir buracos. Em ecrãs estreitos (telemóvel)
   a coluna é curta e justificar abriria espaços grandes entre palavras, por isso ficam alinhados à esquerda. */
.texto { hyphens: auto; }
@media (min-width: 40rem) {
  .texto p:not(.acoes) { text-align: justify; }
}
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.texto ul { padding-left: 1.2rem; margin: 0 0 1em; }
.texto li { margin-bottom: 0.35em; }
.texto li::marker { color: var(--ouro-texto); }
/* As grelhas (fotografias e números) não são listas de texto: sem recuo nem espaço entre itens. */
.texto .galeria, .texto .numeros__grelha { padding: 0; margin: 0; }
.texto .galeria li, .texto .numeros__grelha li { margin: 0; }
.artigo { max-width: 44rem; margin-inline: auto; }
.artigo__autor { margin: 0 0 1.2rem; color: var(--texto-suave); font-weight: 600; }
.artigo__imagem { width: 100%; max-height: 28rem; object-fit: cover; border-radius: var(--raio); margin-bottom: 2rem; }

.duas-colunas { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.duas-colunas__imagem { width: 100%; border-radius: var(--raio); object-fit: cover; aspect-ratio: 4 / 3; }
.duas-colunas__imagem--emblema { object-fit: contain; aspect-ratio: auto; max-width: 20rem; margin-inline: auto; border-radius: 0; }
@media (min-width: 56rem) {
  .duas-colunas { grid-template-columns: 1.1fr 0.9fr; }
}

/* ---------- Pilares (Desporto, Cultura, União) ---------- */

.pilares { display: grid; gap: 0; border-top: 3px solid var(--ouro); }
.pilar { padding: 1.75rem 0; border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.pilar .icone { width: 2.75rem; height: 2.75rem; color: var(--verde); stroke-width: 1.5; align-self: center; } /* ao lado do texto (telemóvel): centrado na vertical */
.pilar h3 { margin-bottom: 0.2em; }
.pilar p { margin: 0; }
@media (min-width: 56rem) {
  .pilares { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; border-top: 0; }
  .pilar { grid-template-columns: 1fr; border: 0; border-top: 3px solid var(--ouro); padding: 1.5rem 0 0; text-align: center; } /* ícone, título e texto centrados */
  .pilar .icone { justify-self: center; } /* por cima do texto (computador): centrado na horizontal */
}

/* ---------- Pessoas (direção, equipa) ---------- */

.pessoas { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.pessoa { text-align: left; }
.pessoa__foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raio); background: var(--verde); display: block; margin-bottom: 0.6rem; }
.pessoa__foto.sem-imagem { background-size: auto 45%; }
.pessoa__nome { font-family: var(--titulos); font-weight: 600; font-size: 1.35rem; line-height: 1.15; margin: 0; color: var(--verde-noite); }
.pessoa__funcao { margin: 0.1rem 0 0; font-size: 1rem; color: var(--texto-suave); }
.pessoa__redes { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; }
.pessoa__redes a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--linha); border-radius: 50%; color: var(--verde); background: var(--papel); transition: background-color 0.15s, color 0.15s; }
.pessoa__redes a:hover { background: var(--verde); color: #fff; }

/* ---------- Parceiros e patrocinadores ---------- */

.logos-niveis { display: grid; gap: 1.25rem; }
.logos { --vao: 1rem; display: flex; flex-wrap: wrap; gap: var(--vao); list-style: none; margin: 0; padding: 0; }
.logos li { flex: 0 1 13rem; }
.logo { --altura: 6.5rem; --folga: 1rem; display: grid; place-items: center; height: var(--altura); padding: var(--folga); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); text-align: center; text-decoration: none; color: var(--verde-noite); font-family: var(--titulos); font-weight: 600; font-size: 1.15rem; line-height: 1.1; transition: border-color 0.15s; }
.logo:hover { border-color: var(--verde); }
.logo img { max-height: calc(var(--altura) - 2 * var(--folga)); max-width: 100%; width: auto; object-fit: contain; }
/* Quem apoia mais tem o logótipo maior (e uma linha própria) */
.logos--grande li { flex: 0 1 min(21rem, 100%); }
.logos--grande .logo { --altura: 10rem; --folga: 1.5rem; border-width: 2px; border-color: var(--ouro); font-size: 1.7rem; }
.logos--pequeno { --vao: 0.75rem; }
.logos--pequeno li { flex: 0 1 9rem; }
.logos--pequeno .logo { --altura: 4.5rem; --folga: 0.6rem; font-size: 0.95rem; }
/* Página inicial: cada linha é um carrossel sem fim quando os logótipos não cabem (o JS acrescenta as classes). */
.logos-faixa { overflow: hidden; padding: 6px; margin: -6px; } /* a folga deixa ver o contorno do foco */
.logos-faixa--linha .logos { flex-wrap: nowrap; gap: 0; width: max-content; }
.logos-faixa--linha .logos li { flex: 0 0 13rem; margin-right: var(--vao); }
.logos-faixa--linha .logos:not(.logos--grande):not(.logos--pequeno) li { flex-basis: 13rem; }
@media (max-width: 30rem) { .logos-faixa--linha .logos:not(.logos--grande):not(.logos--pequeno) li { flex-basis: 10.5rem; } } /* dois e um pouco à vista */
.logos-faixa--linha .logos--grande li { flex-basis: min(21rem, 78vw); }
.logos-faixa--linha .logos--pequeno li { flex-basis: 9rem; }
.logos-faixa--corre .logos { animation: logos-corre var(--duracao, 60s) linear infinite; will-change: transform; }
.logos-faixa--corre:hover .logos, .logos-faixa--corre:focus-within .logos { animation-play-state: paused; }
@keyframes logos-corre { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos-faixa--corre .logos { animation: none; } }
.convite-apoio { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border: 2px dashed var(--linha); border-radius: var(--raio); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
h2 + .convite-apoio { margin-top: 1.25rem; }
.convite-apoio p { margin: 0; font-size: 1.15rem; max-width: 36rem; }
.subtitulo-grupo { font-size: 1.5rem; margin: 2rem 0 1rem; }
.subtitulo-grupo:first-child { margin-top: 0; }

/* ---------- Galeria ---------- */

.galeria { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.galeria__botao { display: block; width: 100%; padding: 0; border: 0; background: var(--verde); cursor: zoom-in; border-radius: var(--raio); overflow: hidden; }
.galeria__botao img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.3s; }
.galeria__botao:hover img { transform: scale(1.04); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; }
.lightbox::backdrop { background: rgb(10 24 6 / 0.92); }
.lightbox__corpo { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 1rem; gap: 0.75rem; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; }
.lightbox__legenda { color: #fff; margin: 0; text-align: center; }
.lightbox__fechar { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--papel); color: var(--verde-noite); border-color: var(--papel); }

/* ---------- Detalhe do evento ---------- */

.factos { display: grid; gap: 0.9rem; margin: 0 0 1.5rem; padding: 1.25rem 1.5rem; background: var(--suave); border-left: 4px solid var(--ouro); border-radius: 0 var(--raio) var(--raio) 0; }
.factos > div { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; align-items: start; }
.factos dt { display: contents; }
.factos dt .icone { color: var(--verde); margin-top: 0.3rem; }
.factos dt span { grid-column: 2; font-family: var(--titulos); font-weight: 600; font-size: 1.1rem; color: var(--texto-suave); line-height: 1.2; }
.factos dd { grid-column: 2; margin: 0; font-weight: 600; }
.factos--simples > div { grid-template-columns: 1fr; }
.factos--simples dt span, .factos--simples dd { grid-column: 1; }
.destaque-premio { background: var(--verde-noite); color: #fff; padding: 1.5rem; border-radius: var(--raio); margin: 2rem 0; position: relative; isolation: isolate; overflow: hidden; }
.destaque-premio::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/img/contornos.svg') center / cover; opacity: 0.25; }
.destaque-premio h3 { color: var(--ouro-claro); display: flex; align-items: center; gap: 0.5rem; }
.destaque-premio p:last-child { margin: 0; }
.coluna-lateral { display: grid; gap: 2rem; align-content: start; }
.layout-evento { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) {
  .layout-evento { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .coluna-lateral { position: sticky; top: calc(var(--altura-cabecalho) + 1.5rem); }
}
.painel { background: var(--suave); border-radius: var(--raio); padding: 1.5rem; border-top: 4px solid var(--verde); }
.painel h2, .painel h3 { font-size: 1.8rem; }
.painel--ouro { border-top-color: var(--ouro); }

/* ---------- Futsal: separadores, classificação, jogos ---------- */

.separadores { display: flex; gap: 0.25rem; overflow-x: auto; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--linha); background: var(--papel); }
.separadores-barra { background: var(--papel); border-bottom: 1px solid var(--linha); position: sticky; top: calc(var(--altura-cabecalho) + 3px); z-index: 20; }
.separador { font-family: var(--titulos); font-weight: 600; font-size: 1.35rem; line-height: 1; padding: 1rem 1.1rem 0.85rem; background: none; border: 0; border-bottom: 4px solid transparent; cursor: pointer; color: var(--texto-suave); white-space: nowrap; }
.separador:hover { color: var(--verde); }
.separador[aria-selected='true'] { color: var(--verde-noite); border-bottom-color: var(--ouro); }
.painel-separador[hidden] { display: none; }

.seletor-competicao { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.seletor-competicao button { font-family: var(--titulos); font-weight: 600; font-size: 1.15rem; padding: 0.4rem 1rem; border-radius: 2rem; border: 2px solid var(--verde); background: var(--papel); color: var(--verde); cursor: pointer; }
.seletor-competicao button[aria-pressed='true'] { background: var(--verde); color: #fff; }

.tabela-rolar { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.tabela { width: 100%; border-collapse: collapse; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tabela caption { text-align: left; padding: 0.9rem 1rem; font-family: var(--titulos); font-weight: 600; font-size: 1.5rem; color: var(--verde-noite); }
.tabela th, .tabela td { padding: 0.65rem 0.7rem; text-align: right; border-top: 1px solid var(--linha); white-space: nowrap; }
.tabela thead th { background: var(--verde-noite); color: #fff; font-family: var(--titulos); font-weight: 600; font-size: 1.1rem; border-top: 0; }
.tabela .col-equipa { text-align: left; white-space: normal; min-width: 9rem; }
.tabela .col-pos { text-align: center; width: 2.5rem; font-weight: 700; }
.tabela td.pontos { font-weight: 700; color: var(--verde-noite); }
.tabela tbody tr:nth-child(even) { background: var(--suave); }
.tabela tr.minha, .tabela tbody tr.minha:nth-child(even) { background: var(--destaque); font-weight: 700; box-shadow: inset 5px 0 0 var(--ouro); }
.tabela tr.minha td.pontos { color: var(--verde-noite); }
.nota-tabela { font-size: 0.95rem; color: var(--texto-suave); margin-top: 0.75rem; }

.lista-jogos { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.75rem; }
.jogo { container-type: inline-size; display: grid; gap: 0.75rem; padding: 0.9rem 1rem 1rem; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.jogo--nossa { border-left: 5px solid var(--ouro); background: var(--destaque); border-color: var(--ouro); }
.jogo__equipa--nossa .jogo__nome { color: var(--verde-noite); font-weight: 700; }
.jornada .jogo__jornada { display: none; }
.jogo__info { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.2rem 1.1rem; font-size: 0.98rem; }
.jogo__quando, .jogo__local { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0; min-width: 0; }
.jogo__quando { color: var(--ouro-texto); font-weight: 600; }
.jogo__local { color: var(--texto-suave); }
.jogo__info .icone { width: 1.05rem; height: 1.05rem; margin-top: 0.28rem; }
.jogo__quando .icone { color: var(--ouro-texto); }
.jogo__local .icone { color: var(--verde); }
.jogo__jornada { margin-left: auto; font-family: var(--titulos); font-weight: 600; font-size: 1.05rem; padding: 0.05rem 0.65rem; border-radius: 1rem; background: var(--gelo); color: var(--verde-noite); white-space: nowrap; }
.jogo__equipas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: center; font-family: var(--titulos); font-weight: 600; font-size: 1.4rem; line-height: 1.1; }
.jogo__equipa { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.jogo__equipa--casa { flex-direction: row-reverse; text-align: right; }
.jogo__nome { overflow-wrap: anywhere; }
.jogo__marcador { font-weight: 700; font-size: 1.7rem; padding: 0.15rem 0.7rem; background: var(--verde-noite); color: #fff; border-radius: var(--raio); min-width: 4.8rem; text-align: center; font-variant-numeric: tabular-nums; }
.jogo__marcador--vs { background: var(--suave); color: var(--texto-suave); border: 1px solid var(--linha); font-size: 1.2rem; }
.jogo__nota { font-size: 0.95rem; color: var(--texto-suave); margin: 0; }
/* Em cartões estreitos (telemóvel ou coluna ao lado da tabela) o emblema fica por cima do nome */
@container (max-width: 34rem) {
  .jogo__equipa, .jogo__equipa--casa { flex-direction: column; text-align: center; gap: 0.4rem; }
  .jogo__jornada { margin-left: 0; }
}

/* Emblema da equipa (ou a sigla, enquanto não há imagem) */
.escudo { width: 2.9rem; height: 2.9rem; flex: none; object-fit: contain; }
.escudo--vazio { display: grid; place-items: center; border-radius: 50%; background: var(--verde); color: #fff; border: 2px solid var(--ouro); font-family: var(--titulos); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; line-height: 1; }
.equipa-linha { display: inline-flex; align-items: center; gap: 0.6rem; }
.tabela .escudo { width: 2rem; height: 2rem; }
.tabela .escudo--vazio { font-size: 0.8rem; border-width: 1.5px; }

/* Jogos e classificação na mesma página */
.jogos-e-classificacao { display: grid; gap: 2.75rem; }
.jogos-e-classificacao > * { min-width: 0; }
.bloco-jogos > h2 { margin-bottom: 1.25rem; }
@media (min-width: 72rem) {
  /* a tabela à esquerda e a jornada em curso ao lado, tudo à vista */
  .jogos-e-classificacao:not(.jogos-e-classificacao--so-jogos) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
}
@media (min-width: 56rem) {
  .jogos-e-classificacao--so-jogos .lista-jogos { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
}

/* Passar de jornada em jornada */
.jornada-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.jornada-nav__atual { order: -1; flex-basis: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0; }
.jornada-nav__nome { font-family: var(--titulos); font-size: 1.8rem; line-height: 1.1; color: var(--verde); font-weight: 600; }
.jornada-nav__posicao { color: var(--texto-suave); font-size: 0.95rem; white-space: nowrap; }
.jornada-nav__botao { flex: 1 1 0; padding: 0.55rem 0.9rem; font-size: 1rem; gap: 0.35rem; }
.jornada-nav__botao .icone { width: 1.1rem; height: 1.1rem; }
.jornada-nav__botao[disabled] { opacity: 0.4; cursor: not-allowed; }
.jornada-nav__botao[disabled]:hover { background: transparent; color: var(--verde); }
.jornada-nav__botao[hidden] { display: none; }
.jogos-jornada .lista-jogos { margin-bottom: 0; }
.jogos-jornada .jogo__jornada { display: none; }

/* ---------- Troféus ---------- */

/* ---------- Sala de troféus: uma galeria de museu ---------- */

.sala-museu { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 8vw, 6rem); background-color: var(--verde-noite); color: #f4efe0; }
.sala-museu::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 75% 40% at 50% 0%, rgba(255, 233, 160, 0.16), transparent 70%); }
.museu__entrada { max-width: 38rem; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; }
.museu__entrada h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0; }
.museu__entrada h2::after { content: ''; display: block; width: 4rem; height: 3px; margin: 0.7rem auto 0; background: var(--ouro); }
.museu__entrada p { margin: 1.1rem 0 0; font-size: 1.15rem; color: #e8efe3; }
.museu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); justify-items: center; }
.peca { width: 100%; max-width: 21rem; }
.peca figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
/* a lâmpada do quadro e o seu cone de luz */
.peca figure::before { content: ''; width: 38%; height: 0.45rem; margin-bottom: 0.3rem; border-radius: 0.25rem; background: linear-gradient(#e6c75a, #a8841a); box-shadow: 0 0 14px 2px rgba(255, 226, 140, 0.55); }
.peca figure::after { content: ''; position: absolute; z-index: 0; top: 0.6rem; left: 4%; right: 4%; height: 80%; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 233, 160, 0.24), transparent 75%); }
.peca__moldura, .peca__placa { position: relative; z-index: 1; }
.peca__moldura { width: 100%; padding: 0.7rem; border-radius: 0.2rem; background: linear-gradient(135deg, #e0bd45, #8a6a10 55%, #c9a32c); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.peca__passe { padding: 0.9rem; background: #f4efe0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 3px 8px rgba(0, 0, 0, 0.25); }
.peca__imagem { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--verde-noite); }
.peca__imagem--vazia { display: grid; place-items: center; color: var(--ouro); }
.peca__imagem--vazia .icone { width: 38%; height: auto; stroke-width: 1.2; }
.peca__placa { width: min(100%, 17rem); margin-top: 1.1rem; padding: 0.7rem 1rem 0.85rem; text-align: center; color: var(--verde-noite); border-radius: 0.2rem; background: linear-gradient(180deg, #e8cc62, #b8941c); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.peca__ano { display: block; font-family: var(--titulos); font-weight: 600; font-size: 1.15rem; }
.peca__titulo { margin: 0.05rem 0 0.25rem; font-size: 1.5rem; line-height: 1.1; color: var(--verde-noite); }
.peca__texto { margin: 0; font-size: 0.95rem; line-height: 1.4; }

/* ---------- Formulários ---------- */

.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: 0.3rem; }
.campo label { font-family: var(--titulos); font-weight: 600; font-size: 1.2rem; color: var(--verde-noite); line-height: 1.2; }
.campo__opcional { font-family: var(--corpo); font-weight: 400; font-size: 0.9rem; color: var(--texto-suave); }
.campo__obrigatorio { color: var(--erro); }
.campo input[type='text'], .campo input[type='email'], .campo input[type='tel'], .campo input[type='number'], .campo input[type='date'], .campo input:not([type]), .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--texto); background: var(--papel);
  border: 2px solid #8a9a80; border-radius: var(--raio); padding: 0.7rem 0.85rem; min-height: 3rem;
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--ouro); outline-offset: 1px; border-color: var(--verde); }
.campo [aria-invalid='true'] { border-color: var(--erro); }
.campo__ajuda { font-size: 0.95rem; color: var(--texto-suave); margin: 0; }
.campo__erro { font-size: 0.98rem; color: var(--erro); font-weight: 600; margin: 0; }
.campo__erro[hidden] { display: none; }
/* Ficheiro da autorização dos menores */
.campo input[type='file'] { width: 100%; font: inherit; font-size: 1rem; color: var(--texto); background: var(--papel); border: 2px dashed #8a9a80; border-radius: var(--raio); padding: 0.6rem 0.75rem; min-height: 3.4rem; cursor: pointer; }
.campo input[type='file']::file-selector-button { font: inherit; font-weight: 600; margin-right: 0.8rem; padding: 0.5rem 1rem; border: 0; border-radius: var(--raio); background: var(--verde); color: #fff; cursor: pointer; }
.campo input[type='file']:hover::file-selector-button { background: var(--verde-escuro); }
.campo input[type='file']:focus-visible { outline: 3px solid var(--ouro); outline-offset: 1px; border-color: var(--verde); }
.campo--documento { padding: 0.9rem 1rem 1rem; border-left: 5px solid var(--ouro); background: #fbf3d6; border-radius: 0 var(--raio) var(--raio) 0; }
.campo--documento .campo__ajuda { color: var(--texto); }
.campo__ajuda--aviso { padding: 0.6rem 0.8rem; border-left: 4px solid var(--ouro); background: #fbf3d6; color: var(--texto); border-radius: 0 var(--raio) var(--raio) 0; }
.campo__ajuda--aviso[hidden] { display: none; }
.painel > .texto + .texto { margin-top: 1.75rem; }
.foto-previa { margin-top: 0.4rem; }
.foto-previa img { display: block; width: 7.5rem; height: 9.5rem; object-fit: cover; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.termos { display: flex; gap: 0.7rem; align-items: flex-start; }
.termos input { width: 1.4rem; height: 1.4rem; margin-top: 0.2rem; accent-color: var(--verde); flex: none; }
.campo--termos .termos label { font-family: var(--corpo); font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--texto); }
.isco { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formulario__acoes { display: flex; }
.formulario__estado { margin: 0; min-height: 1.5rem; font-weight: 600; color: var(--texto-suave); }
.formulario__estado--erro { color: var(--erro); }
/* Inscrição numa atividade */
.inscricao-pagina { display: grid; gap: 1.5rem; max-width: 48rem; margin-inline: auto; }
.inscricao-pagina > * { min-width: 0; }
.inscricao-pagina .factos { margin-bottom: 0; }
.opcoes { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.6rem; }
.opcoes legend { padding: 0; margin-bottom: 0.4rem; font-family: var(--titulos); font-weight: 600; font-size: 1.2rem; color: var(--verde-noite); }
.opcao { display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.75rem; align-items: center; padding: 0.8rem 1rem; background: var(--papel); border: 2px solid #8a9a80; border-radius: var(--raio); cursor: pointer; }
.opcao input { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--verde); grid-row: 1 / span 2; }
.opcao:has(input:checked) { border-color: var(--verde); background: var(--destaque); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 1px; }
.opcao__nome { font-family: var(--titulos); font-weight: 600; font-size: 1.3rem; color: var(--verde-noite); line-height: 1.15; }
.opcao__preco { font-family: var(--titulos); font-weight: 700; font-size: 1.3rem; color: var(--verde-noite); text-align: right; }
.opcao__vagas { grid-column: 2 / span 2; font-size: 0.95rem; color: var(--texto-suave); }
.opcao--esgotada { opacity: 0.6; cursor: not-allowed; }
.participantes { display: grid; gap: 1.25rem; }
.participante { margin: 0; min-width: 0; padding: 1.1rem 1.1rem 1.25rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); display: grid; gap: 1.1rem; }
.participante legend { padding: 0 0.4rem; font-family: var(--titulos); font-weight: 600; font-size: 1.45rem; color: var(--verde-noite); }
.participante__nota { margin: 0; }
.inscricao__mais { gap: 0.75rem; flex-wrap: wrap; }
.inscricao__total { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: 1.6rem; color: var(--verde-noite); min-height: 2rem; }
.sucesso { padding: 1.5rem; border-left: 5px solid var(--verde); background: #eaf4e3; border-radius: 0 var(--raio) var(--raio) 0; }
.sucesso p { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--verde-noite); }
.aviso-previa { padding: 0.9rem 1.1rem; border-left: 5px solid var(--ouro); background: #fbf3d6; border-radius: 0 var(--raio) var(--raio) 0; font-size: 1.02rem; line-height: 1.45; }
.aviso-previa strong { font-family: var(--titulos); font-size: 1.2rem; color: var(--verde-noite); }

/* ---------- Contactos ---------- */

.layout-contactos { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  /* Contactos e mapa na coluna da esquerda, o formulário na da direita (a altura que sobra fica para o mapa). */
  .layout-contactos { grid-template-columns: 1fr 1.1fr; grid-template-rows: auto 1fr; gap: 2rem 4rem; align-items: start; }
  .layout-contactos__dados { grid-column: 1; grid-row: 1; }
  .layout-contactos__form { grid-column: 2; grid-row: 1 / span 2; }
  .layout-contactos__mapa { grid-column: 1; grid-row: 2; }
}
/* Mapa dos contactos (iframe do OpenStreetMap, só depois de a pessoa o pedir). */
.mapa__espera { box-sizing: border-box; min-height: clamp(16rem, 55vw, 22rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.8rem; padding: 1.5rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.mapa__espera strong { font-family: var(--titulos); font-size: 1.3rem; font-weight: 600; color: var(--texto-suave); line-height: 1.2; }
.mapa__espera p { margin: 0; max-width: 34rem; }
.mapa__quadro { display: block; width: 100%; height: clamp(16rem, 55vw, 22rem); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.mapa__ligacao { margin: 0.6rem 0 0; }
.lista-contactos { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.9rem; }
.lista-contactos li { display: flex; gap: 0.8rem; align-items: flex-start; }
.lista-contactos .icone { color: var(--verde); margin-top: 0.3rem; }
.lista-contactos strong { display: block; font-family: var(--titulos); font-size: 1.15rem; font-weight: 600; color: var(--texto-suave); line-height: 1.2; }

/* ---------- Rodapé ---------- */

.rodape { flex: none; background: var(--verde-noite); color: #e8efe3; position: relative; isolation: isolate; border-top: 3px solid var(--ouro); }
.rodape::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/img/contornos.svg') center bottom / cover no-repeat; opacity: 0.18; }
.rodape a { color: #fff; text-decoration: none; }
.rodape a:hover { color: var(--ouro-claro); text-decoration: underline; }
.rodape h2 { font-size: 1.6rem; color: var(--ouro-claro); margin-bottom: 0.6em; }
.rodape__corpo { max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding: 3rem var(--margem) 2rem; display: grid; gap: 2rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape__contactos { display: grid; gap: 0.6rem; }
.rodape__contactos a { display: inline-flex; align-items: center; gap: 0.6rem; }
.rodape__local { display: flex; gap: 0.6rem; margin: 0.8rem 0 0; align-items: flex-start; }
.rodape__local .icone { margin-top: 0.3rem; }
.rodape__emblema { width: 8.5rem; height: auto; }
.rodape__paginas { display: grid; gap: 0.35rem; }
.rodape__fim { max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding: 1.25rem var(--margem) 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.18); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; font-size: 0.95rem; }
.rodape__fim p { margin: 0; }
.rodape__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.rodape__identificacao { display: grid; gap: 0.3rem; max-width: 46rem; }
.rodape__dados { display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem; opacity: 0.9; }
@media (min-width: 48rem) {
  .rodape__corpo { grid-template-columns: 1.2fr auto 1fr; align-items: start; gap: 3rem; }
  .rodape__emblema { justify-self: center; }
  .rodape__corpo > nav { justify-self: end; min-width: 9rem; }
}

/* ---------- Página 404 ---------- */

.erro-pagina { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.erro-pagina img { width: 9rem; margin-bottom: 1.5rem; }

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 30rem) {
  body { font-size: 1.0625rem; }
  .logos:not(.logos--grande):not(.logos--pequeno) li { flex-basis: calc(50% - 0.5rem); }
  .jogo__equipas { font-size: 1.2rem; }
}

/* ---------- Futsal: topo com fotografia e blocos ---------- */

.pagina-topo--imagem .contentor { display: grid; gap: 2rem; align-items: center; }
.pagina-topo__imagem { width: 100%; max-height: 26rem; object-fit: cover; object-position: 50% 25%; border-radius: var(--raio); border: 3px solid var(--ouro); }
@media (min-width: 56rem) {
  .pagina-topo--imagem .contentor { grid-template-columns: 1.2fr 0.8fr; }
}
.painel-separador { display: grid; gap: 2.5rem; align-content: start; }
.painel-separador > * { min-width: 0; }
.painel-separador h2 { margin-bottom: 0.4em; }
.separadores.contentor { padding-inline: var(--margem); border-bottom: 0; }
.dois-blocos { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .dois-blocos:not(.dois-blocos--um) { grid-template-columns: 1fr 1fr; } }
.painel-separador .artigo { margin-inline: 0; }
.apoio .acoes { margin-bottom: 0; }

/* Quem é o responsável pelos dados (página de privacidade) */
.responsavel { margin: 0 0 1.75rem; padding: 1rem 1.25rem; background: var(--papel, #fff); border-left: 4px solid var(--ouro, #d3af24); border-radius: 0 0.5rem 0.5rem 0; }
.responsavel h2 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.responsavel p { margin: 0 0 0.5rem; }
.responsavel dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0; }
.responsavel dt { font-weight: 700; }
.responsavel dd { margin: 0; overflow-wrap: anywhere; }