/* Pagina de entrada de ginasticagsl.pt
   Preto e amarelo do Grupo Sportivo de Loures. Primeiro o telemovel. */

:root{
  --preto:#1D1D1B; --amarelo:#FDC300; --amarelo-esc:#D9A600;
  --texto:#1D1D1B; --texto2:#5A5A57; --borda:#D8D8D4; --fundo:#F5F5F2; --branco:#fff;
}

.lp{ margin:0; background:var(--branco); color:var(--texto);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow-x:hidden; }
.lp *{ box-sizing:border-box }
.lp a{ color:var(--texto) }

.env{ max-width:960px; margin:0 auto; padding:0 20px }

/* ------------------------------------------------------------ barra topo --- */

.lp-topo{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--borda) }
.lp-topo .env{ display:flex; align-items:center; gap:12px; height:62px }
.lp-topo img{ height:38px; width:auto }
.lp-topo b{ font-size:15px; line-height:1.15 }
.lp-topo b span{ display:block; font-weight:400; font-size:12px; color:var(--texto2) }
.lp-topo nav{ margin-left:auto; display:flex; gap:6px; align-items:center }
.lp-topo nav a{ font-size:14px; text-decoration:none; padding:8px 12px; border-radius:7px }
.lp-topo nav a:hover{ background:var(--fundo) }
.lp-topo nav a.acao{ background:var(--amarelo); font-weight:700 }
.lp-topo nav a.acao:hover{ background:var(--amarelo-esc) }
/* Separador da area de administracao: sempre visivel, incluindo no telemovel,
   mas sobrio, para nao competir com o botao de inscricao. */
.lp-topo nav a.reservado{ border:1px solid var(--borda); color:var(--texto2);
  font-size:13.5px; display:inline-flex; align-items:center; gap:6px }
.lp-topo nav a.reservado:hover{ border-color:var(--preto); color:var(--preto);
  background:var(--fundo) }
.lp-topo nav a.reservado .cad{ font-size:12px; line-height:1 }
.esconde-tel{ display:none }

/* Ligacao para a semana experimental: e o PRIMEIRO passo do processo, por isso
   fica sempre na barra, incluindo no telemovel. Contorno amarelo em vez de
   fundo cheio, para nao competir com o botao de inscrever — que e o passo
   seguinte, nao o primeiro. */
.lp-topo nav a.acao-2{ border:1.5px solid var(--amarelo-esc); font-weight:600;
  color:var(--texto) }
.lp-topo nav a.acao-2:hover{ background:#FFF8E1 }

/* O rotulo encurta em ecra estreito: "Semana experimental" nao cabe ao lado do
   botao de inscrever num telemovel, mas "Experimentar" cabe. */
.so-tel{ display:inline }
.so-largo{ display:none }

/* ----------------------------------------------------------------- heroi --- */

.heroi{ position:relative; text-align:center; padding:56px 0 44px;
  background:var(--preto); color:#fff; overflow:hidden }
.heroi::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 22%, rgba(253,195,0,.20), transparent 62%) }
.heroi .env{ position:relative }
.emblema{ width:min(230px,52vw); height:auto; display:block; margin:0 auto 22px;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.45)) }
.heroi h1{ margin:0; font-size:clamp(38px,10vw,74px); line-height:.95; letter-spacing:-1.5px;
  text-transform:uppercase; font-weight:800 }
.heroi h1 em{ font-style:normal; color:var(--amarelo); display:block }
.heroi .lema{ margin:16px auto 0; max-width:560px; font-size:clamp(16px,2.4vw,19px);
  color:#E6E6E2 }
.heroi .epoca{ display:inline-block; margin-bottom:20px; font-size:12.5px; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--amarelo); border:1px solid rgba(253,195,0,.45);
  border-radius:99px; padding:5px 14px }

/* A especificidade destas regras tem de ser maior do que a de '.lp a', senao
   o texto do botao herda o preto e desaparece sobre o fundo escuro. */
.acoes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px }
.lp .bt{ display:inline-block; text-decoration:none; font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:10px; border:2px solid transparent; text-align:center }
.lp a.bt-1{ background:var(--amarelo); color:var(--preto); border-color:var(--amarelo) }
.lp a.bt-1:hover{ background:var(--amarelo-esc); border-color:var(--amarelo-esc) }
.lp a.bt-2{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55) }
.lp a.bt-2:hover{ border-color:#fff; background:rgba(255,255,255,.08) }
.lp a.bt-3{ background:var(--preto); color:#fff; border-color:var(--preto) }
.lp a.bt-3:hover{ background:#000 }
.lp .heroi .liga{ display:inline-block; margin-top:18px; font-size:15px; color:#D8D8D2 }

/* ------------------------------------------------------- faixa do termo --- */

.chamada{ background:var(--amarelo); border-bottom:1px solid var(--amarelo-esc) }
.chamada .env{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:22px }
.chamada .txt{ flex:1; min-width:250px }
.chamada b{ display:block; font-size:19px; line-height:1.3 }
.chamada p{ margin:4px 0 0; font-size:15px; color:#4A3B00 }
.chamada .lp-bt{ flex:0 0 auto }
.lp a.bt-preto{ background:var(--preto); color:#fff; border-color:var(--preto);
  display:inline-block; text-decoration:none; font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:10px; border:2px solid var(--preto) }
.lp a.bt-preto:hover{ background:#000 }
.morada{ font-family:ui-monospace,Menlo,Consolas,monospace; background:rgba(0,0,0,.09);
  border-radius:5px; padding:1px 7px }

.encerrado{ margin:24px auto 0; max-width:560px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.22); border-radius:10px; padding:14px 18px;
  font-size:14.5px; color:#F0F0EC }

/* --------------------------------------------------------------- seccoes --- */

.sec{ padding:64px 0 }
.sec.cinza{ background:var(--fundo); border-top:1px solid var(--borda);
  border-bottom:1px solid var(--borda) }
/* Os titulos e os textos de secao ficam centrados na pagina; o conteudo dos
   cartoes mantem-se alinhado a esquerda, porque uma lista de horarios centrada
   obriga o olho a procurar o inicio de cada linha. */
.sec{ text-align:center }
.sec h2{ font-size:clamp(25px,4.6vw,34px); margin:0 0 6px; letter-spacing:-.6px }
.sec .intro{ color:var(--texto2); margin:0 auto 30px; max-width:640px; font-size:16.5px }
.risca{ width:56px; height:5px; background:var(--amarelo); border-radius:3px;
  margin:0 auto 18px }
.sec .grupo, .sec .acesso, .sec .noticia .txt, .sec .faq,
.sec .destaque, .sec .contactos{ text-align:left }
.sec .destaque h2, .sec .destaque .risca{ text-align:center }
.sec .destaque .risca{ margin-left:0 }
.sec .destaque h2{ text-align:left }
.sec .destaque p{ margin-left:0; margin-right:0 }
.sec .grupo h3{ text-align:center }

.grelha{ display:grid; gap:18px; grid-template-columns:1fr }

.grupo{ background:var(--branco); border:1px solid var(--borda); border-radius:14px;
  padding:24px; position:relative; overflow:hidden }
.grupo::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amarelo) }
.grupo h3{ margin:0 0 2px; font-size:22px }
.grupo .idade{ font-size:13px; color:var(--texto2); margin:0 0 16px }
.grupo dl{ margin:0 }
.grupo dl div{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid #EEEEEA }
.grupo dl div:last-child{ border-bottom:none }
.grupo dt{ flex:0 0 116px; color:var(--texto2); font-size:14px; margin:0 }
.grupo dd{ margin:0; flex:1; font-size:15.5px }
.grupo .preco{ font-size:26px; font-weight:800; margin-top:14px }
.grupo .preco small{ font-size:13px; font-weight:400; color:var(--texto2) }
.lotado{ display:inline-block; font-size:12px; font-weight:700; background:#F4F4F2;
  border:1px solid var(--borda); color:var(--texto2); border-radius:99px; padding:3px 10px }
.vagas{ display:inline-block; font-size:12px; font-weight:700; background:#E9F5EC;
  border:1px solid #8FC7A2; border-radius:99px; padding:3px 10px }

.passos{ counter-reset:passo; display:grid; gap:16px; grid-template-columns:1fr; text-align:left }
.passo{ display:flex; gap:16px; align-items:flex-start }
.passo b::before{ counter-increment:passo; content:counter(passo);
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  background:var(--amarelo); color:var(--preto); font-size:19px; font-weight:800 }
.passo b{ display:flex }
.passo div h3{ margin:6px 0 3px; font-size:18px }
.passo div p{ margin:0; color:var(--texto2); font-size:15.5px }

.destaque{ background:var(--preto); color:#fff; border-radius:16px; padding:34px 28px }
.destaque h2{ color:#fff }
.destaque p{ color:#E0E0DC }
.destaque .risca{ background:var(--amarelo) }

.faq details{ border-bottom:1px solid var(--borda); padding:16px 0 }
.faq summary{ cursor:pointer; font-weight:700; font-size:17px; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--amarelo-esc); font-size:24px; line-height:1 }
.faq details[open] summary::after{ content:"\2212" }
.faq p{ margin:10px 0 0; color:var(--texto2) }

.cartoes-acesso{ display:grid; gap:16px; grid-template-columns:1fr }
.acesso{ border:1px solid var(--borda); border-radius:14px; padding:22px; background:var(--branco);
  text-decoration:none; display:block }
.acesso:hover{ border-color:var(--amarelo-esc); box-shadow:0 4px 18px rgba(0,0,0,.06) }
.acesso h3{ margin:0 0 4px; font-size:18px }
.acesso p{ margin:0; color:var(--texto2); font-size:15px }
.acesso .seta{ color:var(--amarelo-esc); font-weight:800 }

/* ------------------------------------------------------------- noticias --- */

.noticias{ display:grid; gap:20px; grid-template-columns:1fr }
.noticia{ background:var(--branco); border:1px solid var(--borda); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none }
.noticia:hover{ border-color:var(--amarelo-esc); box-shadow:0 4px 18px rgba(0,0,0,.06) }
.noticia .capa{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  background:var(--fundo) }
.noticia .txt{ padding:18px 20px 20px; flex:1; display:flex; flex-direction:column }
.noticia .quando{ font-size:12.5px; color:var(--texto2); text-transform:uppercase;
  letter-spacing:.6px; margin:0 0 6px }
.noticia h3{ margin:0 0 8px; font-size:19px; line-height:1.3 }
.noticia p{ margin:0; color:var(--texto2); font-size:15px; flex:1 }
.noticia .mais{ margin-top:14px; font-weight:700; font-size:14.5px; color:var(--amarelo-esc) }
.noticia.destacada{ border-left:6px solid var(--amarelo) }
.sem-capa{ background:var(--preto); aspect-ratio:16/10; display:flex; align-items:center;
  justify-content:center }
.sem-capa img{ width:44%; max-width:120px; opacity:.9 }

/* -------------------------------------------------------------- galeria --- */

.fotos{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr) }
.fotos figure{ margin:0; border-radius:10px; overflow:hidden; position:relative;
  background:var(--fundo) }
.fotos img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  transition:transform .35s ease }
.fotos figure:hover img{ transform:scale(1.05) }
.fotos figcaption{ position:absolute; left:0; right:0; bottom:0; padding:16px 12px 9px;
  font-size:12.5px; color:#fff; line-height:1.35;
  background:linear-gradient(transparent, rgba(0,0,0,.72)) }

/* ---------------------------------------------------------------- selo --- */

.selos{ border-top:1px solid rgba(255,255,255,.15); margin-top:26px; padding-top:24px;
  display:grid; gap:22px; grid-template-columns:1fr }
.selo{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.selo img{ width:150px; height:auto; background:#fff; border-radius:9px; padding:9px 11px;
  flex:0 0 auto }
/* Um logotipo quadrado a 150px fica muito mais alto que os outros dois, que
   sao largos. Estreita-se para as tres placas ficarem da mesma altura. */
.selo img.selo-quadrado{ width:104px }
.selo p{ margin:0; font-size:12.5px; color:#BFBFBA; flex:1; min-width:190px }
@media (min-width:700px){ .selos{ grid-template-columns:1fr 1fr } }
/* Com tres placas, duas colunas deixavam a terceira sozinha num vazio. */
@media (min-width:980px){ .selos{ grid-template-columns:repeat(3,1fr); gap:18px } }

.contactos{ display:grid; gap:14px; grid-template-columns:1fr; text-align:center }
.contactos div b{ display:block; font-size:13px; color:var(--texto2); text-transform:uppercase;
  letter-spacing:.6px; font-weight:600 }

.lp-fundo{ background:var(--preto); color:#BFBFBA; padding:36px 0 118px; font-size:13.5px }
.lp-fundo a{ color:#E6E6E2 }
.lp-fundo .env{ display:flex; gap:22px; flex-wrap:wrap; justify-content:space-between }
.lp-fundo .legal{ max-width:420px }
.lp-fundo nav{ display:flex; flex-direction:column; gap:7px }

/* ------------------------------------------------------------- a ginasta --- */

.faixa{ position:fixed; left:0; right:0; bottom:0; height:118px; z-index:30;
  pointer-events:none }
.faixa svg{ display:block; width:100%; height:100% }
.pista{ position:absolute; left:0; right:0; bottom:22px; height:4px;
  background:rgba(29,29,27,.10) }
#pista-cheia{ display:block; height:100%; width:0; background:var(--amarelo) }

/* As formas sao preenchidas, nao tracadas: o cinzento do lado afastado e o
   que da profundidade, e o amarelo e o fato do clube. */
.gm-membro{ fill:var(--preto) }
.gm-atras { fill:#4A4A46 }
.gm-tronco{ fill:var(--amarelo) }
.gm-rabo  { fill:var(--preto) }
.gm-cabeca{ fill:var(--preto) }

@media (prefers-reduced-motion: reduce){
  .faixa{ position:absolute; bottom:0 }
}

/* ------------------------------------------------------------------ ecra --- */

/* Em ecras estreitos a barra passa a duas linhas: em cima o nome do clube e o
   emblema, em baixo a navegacao.
   Estava escondido o nome, e o emblema sozinho nao diz a quem chega ao site de
   telemovel de que clube se trata — que e a primeira coisa que tem de dizer.
   O nome vem antes do emblema, como se le. A navegacao desce para a sua propria
   linha e desliza na horizontal quando nao couber, em vez de encolher a letra
   ate deixar de se ler. */
@media (max-width:520px){
  /* So em cima e em baixo: o .env ja traz 20px de cada lado, e um padding
     escrito por extenso apagava-os e colava o nome a borda do ecra. */
  .lp-topo .env{ flex-wrap:wrap; height:auto; padding-top:9px; padding-bottom:9px; gap:9px }
  .lp-topo b{ display:block; order:1; font-size:14.5px }
  .lp-topo b span{ font-size:11.5px }
  .lp-topo img{ order:2; height:32px }
  .lp-topo nav{ order:3; width:100%; margin-left:0; gap:5px;
                flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
                scrollbar-width:none }
  .lp-topo nav::-webkit-scrollbar{ display:none }
  .lp-topo nav a{ padding:8px 10px; white-space:nowrap; flex:0 0 auto }
}

/* Abaixo de 400px sobra muito pouca largura. O separador da administracao
   passa a ser so o cadeado: quem o procura sabe o que e, e quem nao sabe nao
   precisa dele. As duas accoes que importam ficam inteiras. */
@media (max-width:400px){
  .lp-topo .env{ gap:8px }
  .lp-topo nav{ gap:4px }
  .lp-topo nav a{ padding:8px 9px; font-size:13.5px }
  .lp-topo nav a.reservado span:not(.cad){
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .lp-topo nav a.reservado{ padding:8px 10px }
}

@media (min-width:700px){
  .esconde-tel{ display:inline-block }
  .so-tel{ display:none }
  .so-largo{ display:inline }
  .grelha{ grid-template-columns:1fr 1fr }
  .passos{ grid-template-columns:1fr 1fr }
  .cartoes-acesso{ grid-template-columns:1fr 1fr 1fr }
  .contactos{ grid-template-columns:repeat(3,1fr) }
  .heroi{ padding:74px 0 60px }
  .noticias{ grid-template-columns:repeat(3,1fr) }
  .noticias.duas{ grid-template-columns:repeat(2,1fr) }
  .noticias.uma{ grid-template-columns:1fr }
  .fotos{ grid-template-columns:repeat(4,1fr) }
}

/* ===========================================================================
   Acrescentos: cor por grupo, bloco de preços, local dos treinos, texto
   justificado. Vai tudo no fim para não desarrumar o que já estava.
   ======================================================================== */

/* --------------------------------------------------------- cor por grupo ---
   Distinguem-se os grupos sem sair das cores do clube: o emblema é preto e
   amarelo, e é só isso que se usa. O primeiro grupo fica no amarelo vivo, o
   segundo no preto com o título a amarelo — como uma camisola alternativa.
   Cores de fora, por bonitas que fossem, faziam a página deixar de ser do
   Grupo Sportivo de Loures. */
:root{ --g1:#FDC300; --g1-fundo:#FFFBEC; --g2:#1D1D1B; --g2-fundo:#F3F3F0 }

.grupo.g1::after{ background:var(--g1) }
.grupo.g1{ background:linear-gradient(var(--g1-fundo), var(--branco) 120px) }
.grupo.g1 h3{ color:#8A6A00 }
.grupo.g1 h3{ border-bottom-color:#F3E2A8 }

.grupo.g2::after{ background:var(--g2) }
.grupo.g2{ background:linear-gradient(var(--g2-fundo), var(--branco) 120px) }
.grupo.g2 h3{ color:var(--preto) }
.grupo.g2 h3::after{ content:""; display:block; width:44px; height:4px;
  background:var(--amarelo); border-radius:2px; margin:8px auto 0 }

.grupo h3{ padding-bottom:10px; margin-bottom:6px; border-bottom:2px solid #EEEEEA }

/* ------------------------------------------------------ bloco de preços --- */
.precos{ margin-top:34px; background:var(--branco); border:1px solid var(--borda);
  border-radius:16px; padding:28px 24px }
.precos h3{ margin:0 0 20px; font-size:22px; text-align:center }
.valores{ display:grid; gap:16px; grid-template-columns:1fr }
.valor{ text-align:center; padding:20px 16px; border-radius:12px; background:var(--fundo);
  border:1px solid var(--borda) }
.valor b{ display:block; font-size:38px; line-height:1; letter-spacing:-1px }
.valor span{ display:block; margin-top:8px; font-size:15px; font-weight:600 }
.valor small{ display:block; margin-top:4px; font-size:13px; color:var(--texto2) }
.valor:first-child{ border-left:5px solid var(--amarelo) }
.valor:last-child{ border-left:5px solid var(--preto) }

.descontos{ margin-top:24px; background:var(--fundo); border-radius:12px;
  padding:20px 22px; text-align:left }
.descontos > b{ display:block; font-size:16px; margin-bottom:10px }
.descontos ul{ margin:0; padding-left:20px; font-size:15.5px; columns:2; column-gap:26px }
.descontos li{ margin-bottom:5px; break-inside:avoid }
.descontos p{ margin:14px 0 0; font-size:14px; color:var(--texto2) }

/* ------------------------------------------------------------- parceria ---
   Cartao branco dentro do cartao dos precos, com a risca amarela a esquerda
   que o site usa para "isto e para si". As duas metades ficam lado a lado a
   partir de 700px e empilhadas no telemovel. */
.parceria{ margin-top:24px; background:var(--branco); border:1px solid var(--borda);
  border-left:5px solid var(--amarelo); border-radius:12px; padding:20px 22px;
  text-align:left }
.parceria-etiq{ display:inline-block; font-size:11.5px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; background:var(--preto);
  color:var(--amarelo); border-radius:99px; padding:3px 11px }
.parceria h4{ margin:10px 0 2px; font-size:19px; line-height:1.25 }
.parceria-cab p{ margin:0; font-size:14px; color:var(--texto2) }
/* O cabecalho passa a ter duas colunas: a placa do logotipo e o texto. No
   telemovel empilha, com a placa primeiro. */
.parceria-cab{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.parceria-cab > div{ flex:1; min-width:220px }
.parceria-cab .parceria-etiq{ margin-bottom:2px }
.parceria-cab h4{ margin:8px 0 2px }
/* Placa escura porque o lettering do logotipo e branco. Sobre o fundo claro
   do bloco ficaria so o mocho, sem o nome. */
.parceria-logo{ flex:0 0 auto; width:106px; height:auto; background:var(--preto);
  border-radius:12px; padding:11px 13px }
.parceria-lados{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:16px }
.parceria .lado{ background:var(--fundo); border-radius:10px; padding:14px 16px }
.parceria .lado > b{ display:block; font-size:15.5px; margin-bottom:6px }
.parceria .lado ul{ margin:0; padding-left:18px; font-size:15px }
.parceria .lado li{ margin-bottom:4px }
.parceria .lado small{ display:block; margin-top:8px; font-size:13px;
  color:var(--texto2); line-height:1.45 }
.parceria-nota{ margin:14px 0 0; font-size:13px; color:var(--texto2) }
@media (min-width:700px){ .parceria-lados{ grid-template-columns:1fr 1fr } }

/* A lista de descontos em duas colunas partia "Socios do Grupo Sportivo de
   Loures" em quatro linhas no telemovel. Abaixo de 520px passa a uma coluna. */
@media (max-width:520px){ .descontos ul{ columns:1 } }

/* ------------------------------------------------- onde são os treinos --- */
.local{ background:var(--branco); border:1px solid var(--borda); border-radius:16px;
  padding:28px 24px; text-align:left; border-left:6px solid var(--amarelo) }
.local h3{ margin:0 0 4px; font-size:24px }
.local .morada{ margin:0 0 14px; font-size:16px; color:var(--texto2); font-weight:600 }
.local p{ font-size:15.5px }
.local .bt{ margin-top:8px }

/* ---------------------------------------------------------- traz um amigo --- */
.amigo{ margin-top:22px; border-left:4px solid var(--amarelo); padding:14px 0 14px 18px }
.amigo > b{ display:block; font-size:17px; color:#fff; margin-bottom:4px }
.amigo p{ margin:0; font-size:15px }

/* ------------------------------------------------------ texto justificado ---
   Justificado só nos parágrafos corridos. Títulos, botões, listas de horários
   e rótulos ficam como estavam: justificar linhas curtas abre buracos brancos
   no meio das palavras. A hifenização é o que evita esses buracos no telemóvel. */
.sec .intro, .sec .grupo dd, .sec .faq details p, .sec .destaque p,
.sec .acesso p, .sec .noticia .txt p, .local p, .amigo p, .descontos p,
.precos .intro, .heroi .lema, .chamada .txt p{
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word }

/* Uma linha só, centrada, não se justifica: fica com uma palavra em cada ponta. */
.sec .intro:last-child, .heroi .lema{ text-align:justify }
@media (max-width:420px){
  .sec .grupo dd{ text-align:left }   /* colunas estreitas: justificar estraga */
}

@media (min-width:700px){
  .valores{ grid-template-columns:1fr 1fr }
  .precos{ padding:34px 32px }
}

/* ===========================================================================
   Carrossel, redes sociais e as três cores nos cartões de acesso.
   ======================================================================== */

/* ------------------------------------------------------------ carrossel ---
   Uma fotografia de cada vez. As fotografias empilham-se uma sobre a outra e
   só muda a opacidade — assim a caixa não salta de altura a cada troca, que é
   o defeito habitual destes carrosséis. A altura é fixa e a fotografia é
   recortada ao centro: material vindo de vídeos verticais e horizontais não
   pode ditar a altura da secção. */
.carrossel{ position:relative; border-radius:16px; overflow:hidden;
  background:var(--preto); aspect-ratio:16/9; max-height:520px }
.carrossel:focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px }

.carrossel .slide{ position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity .7s ease; pointer-events:none }
.carrossel .slide.visivel{ opacity:1; pointer-events:auto }
.carrossel .slide img{ width:100%; height:100%; object-fit:cover; display:block }
.carrossel figcaption{ position:absolute; left:0; right:0; bottom:0;
  padding:34px 20px 16px; color:#fff; font-size:15px; text-align:left;
  background:linear-gradient(transparent, rgba(0,0,0,.78)) }

.seta-c{ position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.86); color:var(--preto);
  font-size:26px; line-height:1; padding:0; z-index:2 }
.seta-c:hover{ background:#fff }
.seta-c:focus-visible{ outline:3px solid var(--amarelo); outline-offset:2px }
.seta-c.anterior{ left:12px }
.seta-c.seguinte{ right:12px }

.pontos{ display:flex; justify-content:center; gap:9px; margin-top:16px }
.pontos .ponto{ width:11px; height:11px; border-radius:50%; padding:0;
  border:1px solid var(--borda); background:var(--branco); cursor:pointer }
.pontos .ponto.atual{ background:var(--amarelo); border-color:var(--amarelo-esc);
  transform:scale(1.25) }
.pontos .ponto:focus-visible{ outline:2px solid var(--amarelo); outline-offset:2px }

@media (prefers-reduced-motion: reduce){
  .carrossel .slide{ transition:none }
}

/* ------------------------------------------------------- redes sociais --- */
.cartoes-rede{ display:grid; gap:16px; grid-template-columns:1fr }
.rede{ display:block; padding:22px; border-radius:14px; text-align:left;
  border:1px solid var(--borda); background:var(--branco); text-decoration:none;
  border-left:6px solid var(--amarelo) }
.rede:hover{ box-shadow:0 4px 18px rgba(0,0,0,.07) }
.rede b{ display:block; font-size:19px }
.rede span{ display:block; margin-top:4px; color:var(--texto2); font-size:14.5px }
.rede.facebook{ border-left-color:var(--preto) }

/* -------------------------------------- três cores nos cartões de acesso ---
   As três do emblema: amarelo, preto e branco. O branco marca-se com um
   cinzento de contorno, senão não se via contra o fundo da secção. */
.acesso.c1{ border-left:6px solid var(--amarelo) }
.acesso.c2{ border-left:6px solid var(--preto) }
.acesso.c3{ border-left:6px solid #BFBFBB }
.acesso.c1 h3::after, .acesso.c2 h3::after, .acesso.c3 h3::after{
  content:""; display:block; width:32px; height:3px; border-radius:2px; margin-top:8px }
.acesso.c1 h3::after{ background:var(--amarelo) }
.acesso.c2 h3::after{ background:var(--preto) }
.acesso.c3 h3::after{ background:#BFBFBB }

/* --------------------------------------------- aviso sobre o local ------- */
.aviso-local{ margin-top:16px; padding:14px 16px; border-radius:10px;
  background:var(--fundo); font-size:14.5px }

@media (min-width:700px){
  .cartoes-rede{ grid-template-columns:1fr 1fr }
}

/* ------------------------------------------------- espaço entre cartões ---
   Os cartões estavam colados uns aos outros e, na secção «Ajudar o clube»,
   ficavam estreitos ao centro com a página vazia à volta. Agora ocupam a
   largura toda e respiram entre si. */
.cartoes-acesso{ gap:22px }

#apoiar .cartoes-acesso{ gap:26px }
#apoiar .acesso{ padding:26px 24px }

@media (min-width:760px){
  .cartoes-acesso{ gap:26px }
  /* Dois cartões: metade da página cada um, e não duas colunas de três. */
  #apoiar .cartoes-acesso{ grid-template-columns:1fr 1fr; gap:30px }
}

/* ---------------------------------------------------------- documentos ---
   Uma lista, não uma grelha de cartões: são ficheiros para descarregar, e o
   que a pessoa procura é o nome. O peso à direita evita a surpresa de abrir
   dez megabytes com dados móveis. */
.documentos{ list-style:none; margin:0; padding:0; text-align:left }
.documentos li + li{ margin-top:12px }
.documentos a{ display:flex; align-items:center; gap:16px; padding:18px 20px;
  border:1px solid var(--borda); border-radius:12px; background:var(--branco);
  text-decoration:none; color:var(--texto) }
.documentos a:hover{ border-color:var(--amarelo-esc); box-shadow:0 3px 14px rgba(0,0,0,.06) }
.documentos .tipo{ flex:0 0 46px; height:46px; border-radius:9px;
  background:var(--preto); color:var(--amarelo); font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; letter-spacing:.5px }
.documentos .txt{ flex:1 }
.documentos .txt b{ display:block; font-size:16.5px }
.documentos .nota{ display:block; margin-top:3px; font-size:13.5px; color:var(--texto2);
  text-align:justify; hyphens:auto; -webkit-hyphens:auto }
.documentos .peso{ flex:0 0 auto; font-size:13px; color:var(--texto2);
  font-variant-numeric:tabular-nums }
@media (max-width:520px){
  .documentos .peso{ display:none }
}

/* ------------------------------------------------ ícones das redes sociais ---
   Desenhados em SVG dentro da própria página: nítidos em qualquer ecrã, mudam
   de cor com o texto e não obrigam a ir buscar nada a servidores de fora — o
   que também evita que quem visita a página seja seguido antes de clicar. */
.rede{ display:flex; align-items:center; gap:16px }
.rede .icone{ width:34px; height:34px; flex:none }
.rede.instagram .icone{ color:#C13584 }
.rede.facebook  .icone{ color:#1877F2 }
.rede .txt{ flex:1 }

/* -------------------------------------------- texto de abertura centrado ---
   Os parágrafos de abertura de cada secção voltam a ficar centrados: são
   curtos e, justificados, abriam buracos brancos entre as palavras. O texto
   corrido dos cartões e das perguntas continua justificado. */
.sec .intro, .precos .intro{
  text-align:center; hyphens:manual; -webkit-hyphens:manual }
.heroi .lema{ text-align:center; hyphens:manual; -webkit-hyphens:manual }