/* =========================================================
   ESTILO.CSS — Associação Académica Pinhalnovense
   Folha de estilos única, partilhada por todas as páginas.

   Índice
   1.  Variáveis (cores, tipos de letra, medidas)
   2.  Base
   3.  Elementos comuns (títulos, botões, secções)
   4.  Barra superior e cabeçalho
   5.  Rodapé
   6.  Página Início
   7.  Topo das páginas interiores
   8.  Sobre Nós
   9.  Modalidades
   10. Galeria
   11. Notícias
   12. Contactos
   13. Texto longo (Política de Privacidade)
   14. Adaptação a ecrãs pequenos
   ========================================================= */


/* ---------- 1. VARIÁVEIS ----------
   Cores tiradas do emblema do clube e dos equipamentos:
   preto (tinta), amarelo e um branco-papel quente. */
:root {
    --tinta: #17160f;
    --tinta-suave: #2c2b24;
    --papel: #f4f1e8;
    --papel-escuro: #e7e2d3;
    --branco: #ffffff;
    --amarelo: #f5c400;
    --amarelo-vivo: #ffd633;
    --texto-suave: #5d594d;
    --linha: #d8d2c1;
    --verde-ok: #2d6a36;

    --letra-titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
    --letra-texto: "Barlow", "Segoe UI", Arial, sans-serif;

    --largura: 1240px;
    --margem: clamp(20px, 4vw, 48px);
    --altura-cabecalho: 78px;
}


/* ---------- 2. BASE ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altura-cabecalho) + 24px);
}

body {
    font-family: var(--letra-texto);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

/* Os números de telefone nunca se partem em duas linhas */
a[href^="tel:"] {
    white-space: nowrap;
}

/* Garante que elementos escondidos por JavaScript ficam mesmo escondidos */
[hidden] {
    display: none !important;
}

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

/* Ligação "saltar para o conteúdo" (só aparece com o teclado) */
.saltar {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    background: var(--amarelo);
    color: var(--tinta);
    padding: 10px 16px;
    font-weight: 700;
    text-decoration: none;
}

.saltar:focus {
    top: 12px;
}

.contentor {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding-left: var(--margem);
    padding-right: var(--margem);
}


/* ---------- 3. ELEMENTOS COMUNS ---------- */
h1,
h2,
h3,
h4 {
    font-family: var(--letra-titulo);
    font-weight: 700;
    line-height: 0.95;
    text-transform: uppercase;
}

.secao {
    padding: clamp(64px, 9vw, 120px) 0;
}

.secao--branca {
    background: var(--branco);
}

.secao__topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
}

.titulo-secao {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
}

/* Pequeno texto por cima dos títulos */
.antetitulo {
    display: block;
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 16px;
}

.antetitulo::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--amarelo);
    margin-right: 10px;
    vertical-align: 1px;
}

.lead {
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--texto-suave);
    max-width: 60ch;
}

/* Botões */
.botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 28px;
    border: 2px solid var(--tinta);
    background: var(--tinta);
    color: var(--papel);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.botao:hover {
    background: var(--amarelo);
    border-color: var(--amarelo);
    color: var(--tinta);
}

.botao--amarelo {
    background: var(--amarelo);
    border-color: var(--amarelo);
    color: var(--tinta);
}

.botao--amarelo:hover {
    background: var(--branco);
    border-color: var(--branco);
}

.botao--contorno {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

/* Ligação de texto com seta */
.ligacao-seta {
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 3px solid var(--amarelo);
    padding-bottom: 2px;
    white-space: nowrap;
}

.ligacao-seta::after {
    content: " →";
}

.ligacao-seta:hover {
    background: var(--amarelo);
}


/* ---------- 4. BARRA SUPERIOR E CABEÇALHO ---------- */
.barra-topo {
    background: var(--tinta);
    color: #cfcab9;
    font-size: 0.9rem;
}

.barra-topo .contentor {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.barra-topo a {
    color: var(--papel);
    text-decoration: none;
}

.barra-topo a:hover {
    color: var(--amarelo);
}

.barra-topo strong {
    color: var(--amarelo);
    font-weight: 600;
}

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
}

.cabecalho .contentor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--altura-cabecalho);
}

.marca {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--tinta);
}

.marca img {
    width: 52px;
    height: 52px;
}

.marca span {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.marca small {
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 3px;
}

.marca strong {
    font-family: var(--letra-titulo);
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.navegacao ul {
    list-style: none;
    display: flex;
    gap: 2px;
}

.navegacao a {
    position: relative;
    display: block;
    white-space: nowrap;
    padding: 10px 14px;
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tinta-suave);
}

/* Traço amarelo por baixo da página ativa / ao passar o rato */
.navegacao a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 3px;
    background: var(--amarelo);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.navegacao a:hover::after,
.navegacao a[aria-current="page"]::after {
    transform: scaleX(1);
}

.navegacao a[aria-current="page"] {
    color: var(--tinta);
}

/* Botão do menu (só aparece em ecrãs pequenos) */
.menu-botao {
    display: none;
    align-items: center;
    gap: 10px;
    background: none;
    border: 2px solid var(--tinta);
    padding: 8px 14px;
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta);
    cursor: pointer;
}

.menu-botao__linhas,
.menu-botao__linhas::before,
.menu-botao__linhas::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s;
}

.menu-botao__linhas {
    position: relative;
}

.menu-botao__linhas::before,
.menu-botao__linhas::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-botao__linhas::before { top: -6px; }
.menu-botao__linhas::after { top: 6px; }

.menu-aberto .menu-botao__linhas { background: transparent; }
.menu-aberto .menu-botao__linhas::before { transform: translateY(6px) rotate(45deg); }
.menu-aberto .menu-botao__linhas::after { transform: translateY(-6px) rotate(-45deg); }


/* ---------- 5. RODAPÉ ---------- */
.rodape {
    background: var(--tinta);
    color: #cfcab9;
    padding-top: 72px;
    font-size: 1rem;
}

.rodape__grelha {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 0.8fr 0.9fr;
    gap: 40px;
    padding-bottom: 56px;
}

/* Símbolo do clube em PNG transparente, direto sobre o fundo preto */
.rodape__logo {
    display: inline-block;
    margin-bottom: 20px;
}

.rodape__logo img {
    width: 88px;
    height: 88px;
}

.rodape__lema {
    font-family: var(--letra-titulo);
    font-weight: 800;
    font-size: 2rem;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--papel);
    margin-bottom: 14px;
}

.rodape h2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--amarelo);
    margin-bottom: 18px;
}

.rodape ul {
    list-style: none;
    display: grid;
    gap: 10px;
}

.rodape a {
    color: var(--papel);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.rodape a:hover {
    color: var(--amarelo);
}

.rodape__fim {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 22px;
    padding-bottom: 22px;
    border-top: 1px solid #36352c;
    font-size: 0.9rem;
}


/* ---------- 6. PÁGINA INÍCIO ---------- */

/* Topo com fotografias que vão mudando */
.hero {
    position: relative;
    min-height: min(86vh, 800px);
    display: flex;
    align-items: flex-end;
    background: var(--tinta);
    color: var(--branco);
    overflow: hidden;
}

.hero__foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 35%;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.2s ease, transform 8s ease-out;
}

.hero__foto.ativa {
    opacity: 1;
    transform: scale(1);
}

/* Sombra por baixo do texto para se ler bem sobre qualquer foto */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 13, 9, 0.92) 0%, rgba(14, 13, 9, 0.55) 45%, rgba(14, 13, 9, 0.1) 100%);
}

.hero__conteudo {
    position: relative;
    z-index: 2;
    padding-top: 140px;
    padding-bottom: clamp(48px, 8vw, 96px);
}

.hero .antetitulo {
    color: var(--amarelo);
}

.hero h1 {
    font-size: clamp(3.2rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 0.88;
}

.hero h1 em {
    display: block;
    font-style: normal;
    color: var(--amarelo);
}

.hero__texto {
    font-size: 1.2rem;
    max-width: 50ch;
    margin: 28px 0 32px;
    color: #ebe7dc;
}

.hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__controlos {
    position: absolute;
    z-index: 3;
    right: var(--margem);
    bottom: clamp(48px, 8vw, 96px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero__contador {
    font-family: var(--letra-titulo);
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-right: 10px;
}

.hero__controlos button {
    width: 46px;
    height: 46px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--branco);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.hero__controlos button:hover {
    background: var(--amarelo);
    border-color: var(--amarelo);
    color: var(--tinta);
}

/* Faixa amarela com números */
.numeros {
    background: var(--amarelo);
}

.numeros ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.numeros li {
    padding: 36px 28px;
    border-left: 2px solid rgba(23, 22, 15, 0.14);
}

.numeros li:first-child {
    padding-left: 0;
    border-left: 0;
}

.numeros strong {
    display: block;
    font-family: var(--letra-titulo);
    font-weight: 800;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    line-height: 1;
}

.numeros span {
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Bloco de apresentação */
.introducao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.introducao h2 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 800;
}

.introducao p {
    font-size: 1.15rem;
}

.introducao p + p {
    margin-top: 16px;
}

.introducao .ligacao-seta {
    display: inline-block;
    margin-top: 28px;
}

/* Mosaico das modalidades */
.mosaico {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: 300px 300px;
    gap: 12px;
}

.mosaico__item {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--tinta);
    color: var(--branco);
    text-decoration: none;
}

.mosaico__item:first-child {
    grid-row: span 2;
}

.mosaico__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mosaico__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 13, 9, 0.88) 0%, rgba(14, 13, 9, 0) 65%);
}

.mosaico__item:hover img {
    transform: scale(1.05);
}

.mosaico__texto {
    position: relative;
    z-index: 1;
    padding: 24px;
}

.mosaico__num {
    font-family: var(--letra-titulo);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--amarelo);
}

.mosaico__item h3 {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 800;
    margin-top: 4px;
}

.mosaico__item p {
    font-size: 1rem;
    color: #e6e2d6;
    margin-top: 6px;
    max-width: 34ch;
}

/* Tabela de horários */
.horarios {
    list-style: none;
    border-top: 2px solid var(--tinta);
}

.horario {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1.4fr;
    gap: 24px;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--linha);
}

.horario--titulos {
    padding: 12px 0;
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.horario h3 {
    font-size: 1.9rem;
    font-weight: 800;
}

.horario__prof {
    font-size: 0.95rem;
    color: var(--texto-suave);
    margin-top: 4px;
}

.horario__horas a,
.horario__local a {
    font-weight: 600;
    text-decoration-color: var(--amarelo);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.horario__horas {
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.25;
}

.horario--destaque {
    background: var(--amarelo);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-color: var(--amarelo);
}

.horario__rotulo {
    display: none;
}

.horarios-nota {
    margin-top: 24px;
    color: var(--texto-suave);
}

.horarios-nota a {
    color: var(--tinta);
    font-weight: 600;
}

/* Tira de fotografias */
.tira-fotos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.tira-fotos a {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--papel-escuro);
}

.tira-fotos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tira-fotos a:hover img {
    transform: scale(1.05);
}

/* Faixa final preta */
.chamada {
    background: var(--tinta);
    color: var(--papel);
    padding: clamp(64px, 8vw, 104px) 0;
}

.chamada .contentor {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 32px;
}

.chamada h2 {
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 800;
}

.chamada h2 em {
    font-style: normal;
    color: var(--amarelo);
}

.chamada__contacto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.chamada__tel {
    font-family: var(--letra-titulo);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--amarelo);
    text-decoration: none;
}


/* ---------- 7. TOPO DAS PÁGINAS INTERIORES ---------- */
.pagina-topo {
    padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--linha);
}

.pagina-topo h1 {
    font-size: clamp(3.4rem, 10vw, 8rem);
    font-weight: 800;
    line-height: 0.86;
}

.pagina-topo .lead {
    margin-top: 24px;
}


/* ---------- 8. SOBRE NÓS ---------- */
.historia {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.historia h2 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 24px;
}

.historia p {
    font-size: 1.15rem;
}

.historia p + p {
    margin-top: 16px;
}

.emblema {
    background: var(--branco);
    border: 1px solid var(--linha);
    padding: 48px 32px 32px;
    text-align: center;
}

.emblema img {
    width: 220px;
    margin: 0 auto 24px;
}

.emblema figcaption {
    font-size: 0.95rem;
    color: var(--texto-suave);
}

.valores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 2px solid var(--tinta);
}

.valor {
    padding: 32px 32px 0 0;
}

.valor + .valor {
    padding-left: 32px;
    border-left: 1px solid var(--linha);
}

.valor__num {
    font-family: var(--letra-titulo);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--texto-suave);
}

.valor h3 {
    font-size: 2rem;
    font-weight: 800;
    margin: 6px 0 14px;
}

.orgaos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.orgao {
    background: var(--branco);
    padding: 32px;
    border-top: 5px solid var(--amarelo);
}

.orgao h3 {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.orgao dl > div {
    padding: 12px 0;
    border-bottom: 1px solid var(--linha);
}

.orgao dl > div:last-child {
    border-bottom: 0;
}

.orgao dt {
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.orgao dd {
    font-weight: 600;
}

.lema {
    background: var(--amarelo);
    padding: clamp(64px, 9vw, 120px) 0;
}

.lema blockquote p:first-child {
    font-family: var(--letra-titulo);
    font-weight: 800;
    font-size: clamp(2.8rem, 7.5vw, 6.2rem);
    line-height: 0.88;
    text-transform: uppercase;
    max-width: 14ch;
}

.lema__texto {
    max-width: 62ch;
    margin-top: 28px;
    font-size: 1.15rem;
}


/* ---------- 9. MODALIDADES ---------- */
.indice-modalidades {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-top: 48px;
    border-top: 2px solid var(--tinta);
}

.indice-modalidades li {
    flex: 1 1 190px;
}

.indice-modalidades a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 18px 16px 18px 0;
    border-bottom: 1px solid var(--linha);
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1.35rem;
    text-transform: uppercase;
    text-decoration: none;
}

.indice-modalidades a span {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    color: var(--texto-suave);
}

.indice-modalidades a:hover {
    background: var(--amarelo);
    padding-left: 10px;
}

.modalidade {
    padding: clamp(64px, 8vw, 112px) 0;
    border-bottom: 1px solid var(--linha);
}

.modalidade:nth-of-type(even) {
    background: var(--branco);
}

.modalidade__grelha {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.modalidade__lado {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 32px);
}

.modalidade__num {
    font-family: var(--letra-titulo);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--texto-suave);
}

.modalidade h2 {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    margin: 6px 0 14px;
}

.modalidade__sub {
    font-size: 1.15rem;
    color: var(--texto-suave);
    margin-bottom: 28px;
}

.modalidade__foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.modalidade__texto > p {
    font-size: 1.15rem;
}

.modalidade__texto > p + p {
    margin-top: 16px;
}

.modalidade h3 {
    font-size: 1.6rem;
    font-weight: 800;
}

/* Ficha de informações (linhas com título e descrição) */
.ficha {
    margin-top: 36px;
    border-top: 2px solid var(--tinta);
}

.ficha > div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--linha);
}

.ficha dt {
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ficha a,
.lista-eventos a {
    text-decoration-color: var(--amarelo);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 600;
}

/* Caixa amarela com os treinos */
.treino-caixa {
    margin-top: 36px;
    background: var(--amarelo);
    padding: clamp(24px, 4vw, 36px);
}

.treino-caixa h3 {
    font-size: 2rem;
    margin-bottom: 22px;
}

.treino-caixa dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 32px;
}

.treino-caixa dt {
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.treino-caixa dd {
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
}

.treino-caixa dd a {
    text-decoration: none;
    border-bottom: 3px solid var(--tinta);
}

/* Caixa preta para conquistas */
.conquista {
    margin-top: 32px;
    background: var(--tinta);
    color: #e6e2d6;
    padding: clamp(24px, 4vw, 36px);
}

.conquista h3 {
    color: var(--amarelo);
    margin-bottom: 12px;
}

.conquista strong {
    color: var(--branco);
}

/* Horário de Yoga e Pilates */
.tabela-horario {
    width: 100%;
    border-collapse: collapse;
    margin-top: 36px;
}

.tabela-horario caption {
    text-align: left;
    font-family: var(--letra-titulo);
    font-weight: 800;
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tabela-horario th,
.tabela-horario td {
    text-align: left;
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--linha);
}

.tabela-horario thead th {
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-suave);
    border-bottom: 2px solid var(--tinta);
}

.tabela-horario tbody th {
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
}

/* Horário de treinos do Basquetebol (por escalão) */
.treinos {
    margin-top: clamp(48px, 6vw, 80px);
}

.treinos h3 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 24px;
}

.tabela-treinos {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tabela-treinos thead th {
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--texto-suave);
    padding: 10px 6px;
    border-bottom: 2px solid var(--tinta);
}

.tabela-treinos tbody th {
    font-family: var(--letra-titulo);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    text-align: left;
    vertical-align: middle;
    padding: 12px 8px 12px 6px;
    border-bottom: 1px solid var(--linha);
}

.tabela-treinos tbody th small {
    display: block;
    font-family: var(--letra-texto);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: none;
    color: var(--texto-suave);
    margin-top: 4px;
}

.tabela-treinos td {
    vertical-align: top;
    padding: 8px 4px;
    border-bottom: 1px solid var(--linha);
}

/* Cada treino: hora e local, com uma barra lateral que muda consoante o local */
.treino {
    display: block;
    padding: 10px 8px 10px 10px;
    background: var(--papel);
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--tinta-suave);
}

.treino strong {
    display: block;
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
    color: var(--tinta);
    white-space: nowrap;
    margin-bottom: 3px;
}

.treino,
.local-marca {
    border-left: 5px solid;
}

.treino--pn { border-left-color: var(--amarelo); }
.treino--sec { border-left-color: var(--tinta); }
.treino--pal { border-left-color: #8d8876; }

.locais-treino {
    list-style: none;
    margin-bottom: 10px;
}

.local-marca {
    padding-left: 10px;
    margin-bottom: 6px;
    line-height: 1.3;
}

.treinos__nota {
    margin-top: 20px;
}

.treinos__nota a {
    font-weight: 600;
    text-decoration-color: var(--amarelo);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

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

/* Lista de eventos (Atletismo) */
.lista-eventos {
    list-style: none;
    margin-top: 36px;
    border-top: 2px solid var(--tinta);
}

.lista-eventos li {
    padding: 20px 0;
    border-bottom: 1px solid var(--linha);
}

.lista-eventos h4 {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.subtitulo-bloco {
    margin-top: 40px;
}

/* Pequena galeria dentro de uma modalidade */
.mini-galeria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.mini-galeria a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--papel-escuro);
}

.mini-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mini-galeria a:hover img {
    transform: scale(1.06);
}

.mini-galeria + .ligacao-seta {
    display: inline-block;
    margin-top: 20px;
}


/* ---------- 10. GALERIA ---------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}

.filtro {
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 9px 18px;
    background: transparent;
    border: 2px solid var(--tinta);
    color: var(--tinta);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.filtro:hover {
    background: var(--amarelo);
    border-color: var(--amarelo);
}

.filtro[aria-pressed="true"] {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--papel);
}

.filtro .contagem {
    margin-left: 6px;
    opacity: 0.6;
}

/* Grelha em colunas (estilo "mural") */
.galeria {
    columns: 3 280px;
    column-gap: 12px;
}

.galeria__item {
    position: relative;
    break-inside: avoid;
    margin-bottom: 12px;
}

.galeria__item a {
    display: block;
    overflow: hidden;
    background: var(--papel-escuro);
}

.galeria__item img {
    width: 100%;
    transition: transform 0.5s ease;
}

.galeria__item a:hover img {
    transform: scale(1.03);
}

.galeria__item figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--amarelo);
    color: var(--tinta);
    font-family: var(--letra-titulo);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    pointer-events: none;
}

/* Visor de fotografia em grande */
/* Enquanto o visor está aberto, a página por trás não desliza */
html:has(.visor[open]) {
    overflow: hidden;
}

.visor {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border: 0;
    background: rgba(14, 13, 9, 0.97);
    color: var(--papel);
}

.visor[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.visor::backdrop {
    background: rgba(14, 13, 9, 0.9);
}

.visor__topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
}

.visor__contador {
    font-family: var(--letra-titulo);
    font-weight: 600;
    letter-spacing: 0.12em;
}

.visor__imagem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 76px;
}

.visor__imagem img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.visor__legenda {
    text-align: center;
    padding: 16px 20px 24px;
    color: #d9d4c6;
}

.visor button {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--branco);
    font-size: 1.3rem;
    cursor: pointer;
}

.visor button:hover {
    background: var(--amarelo);
    border-color: var(--amarelo);
    color: var(--tinta);
}

.visor__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.visor__seta--ant { left: 16px; }
.visor__seta--seg { right: 16px; }


/* ---------- 11. NOTÍCIAS ---------- */
.lista-noticias {
    list-style: none;
    border-top: 2px solid var(--tinta);
}

.noticia {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid var(--linha);
}

.noticia__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.noticia__cat {
    background: var(--amarelo);
    color: var(--tinta);
    padding: 2px 8px;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.noticia__selo {
    border: 1.5px solid var(--amarelo);
    color: var(--amarelo);
    padding: 1px 8px;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.noticia h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.noticia p {
    color: var(--texto-suave);
    max-width: 70ch;
}

/* Notícias em destaque: faixa preta dentro da lista */
.noticia--destaque {
    background: var(--tinta);
    padding-left: 28px;
    padding-right: 28px;
    border-bottom: 1px solid #36352c;
}

.noticia--destaque h3 {
    color: var(--branco);
    font-size: 2.1rem;
}

.noticia--destaque p {
    color: #d9d4c6;
}

.noticia--destaque .noticia__meta {
    color: #b9b4a5;
}


/* ---------- EVENTOS ---------- */
.agenda-bloco + .agenda-bloco {
    margin-top: 72px;
}

.agenda-titulo {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 20px;
}

.agenda {
    list-style: none;
    border-top: 2px solid var(--tinta);
}

.evento {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 32px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid var(--linha);
}

/* Folha de calendário com o dia e o mês */
.evento__data {
    padding: 12px 8px 10px;
    background: var(--tinta);
    border-bottom: 6px solid var(--amarelo);
    color: var(--papel);
    font-family: var(--letra-titulo);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.evento__dia {
    display: block;
    font-weight: 800;
    font-size: 3rem;
}

.evento__mes {
    display: block;
    margin-top: 4px;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    color: var(--amarelo);
}

.evento__ano {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
}

.evento__quando {
    font-family: var(--letra-titulo);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 6px;
}

.evento h3 {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
    margin-bottom: 10px;
}

.evento strong {
    font-weight: 600;
}

.evento__descricao {
    max-width: 70ch;
    margin-top: 10px;
    color: var(--texto-suave);
}

.evento--passado .evento__data {
    background: var(--papel-escuro);
    border-bottom-color: var(--linha);
    color: var(--tinta-suave);
}

.evento--passado .evento__mes {
    color: var(--texto-suave);
}

@media (max-width: 680px) {
    .evento {
        grid-template-columns: 74px 1fr;
        gap: 16px;
    }

    .evento__dia {
        font-size: 2.2rem;
    }

    .evento__mes {
        font-size: 1rem;
    }
}


/* ---------- 12. CONTACTOS ---------- */
.contactos {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.contactos__lista {
    border-top: 2px solid var(--tinta);
}

.contactos__lista > div {
    padding: 20px 0;
    border-bottom: 1px solid var(--linha);
}

.contactos__lista dt {
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 4px;
}

.contactos__lista dd {
    font-size: 1.2rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.contactos__lista a {
    text-decoration-color: var(--amarelo);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.mapa {
    margin-top: 32px;
    border: 1px solid var(--linha);
}

.mapa iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
}

.formulario {
    background: var(--branco);
    padding: clamp(28px, 4vw, 48px);
    border-top: 6px solid var(--amarelo);
}

.formulario h2 {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 28px;
}

.campo {
    margin-bottom: 20px;
}

.campo label {
    display: block;
    font-family: var(--letra-titulo);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.campo input,
.campo textarea {
    width: 100%;
    font: inherit;
    color: var(--tinta);
    background: var(--papel);
    border: 2px solid var(--linha);
    border-radius: 0;
    padding: 13px 16px;
    transition: border-color 0.2s;
}

.campo textarea {
    resize: vertical;
    min-height: 140px;
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--tinta);
    box-shadow: 0 0 0 3px var(--amarelo);
}

.formulario .botao {
    width: 100%;
    justify-content: center;
}

.nota {
    margin-top: 16px;
    font-size: 0.95rem;
    color: var(--texto-suave);
}

/* Campo invisível que só os robôs preenchem (ver processar.php) */
.campo-armadilha {
    position: absolute;
    left: -9999px;
}

.aviso-sucesso {
    background: #e5f0e2;
    border-left: 5px solid var(--verde-ok);
    color: #1d4524;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-weight: 600;
}


.aviso-erro {
    background: #f8e3e1;
    border-left: 5px solid #b3261e;
    color: #6e1712;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-weight: 600;
}

.aviso-info {
    background: var(--papel);
    border-left: 5px solid var(--amarelo);
    padding: 16px 20px;
    margin-bottom: 24px;
    font-weight: 600;
}

/* Página de entrada do painel de administração */
.area-reservada {
    max-width: 480px;
    margin: 0 auto;
    padding: clamp(40px, 8vw, 96px) var(--margem);
}

.area-reservada .marca {
    margin-bottom: 32px;
}

.area-reservada h1 {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 24px;
}

.area-reservada .formulario p {
    margin-bottom: 20px;
}

.area-reservada code {
    font-size: 0.9em;
    background: var(--papel);
    padding: 2px 6px;
    overflow-wrap: anywhere;
}




/* ---------- 13. TEXTO LONGO ---------- */
.texto-longo {
    max-width: 72ch;
}

.texto-longo h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 48px 0 16px;
}

.texto-longo h2:first-child {
    margin-top: 0;
}

.texto-longo p,
.texto-longo li {
    color: var(--tinta-suave);
    margin-bottom: 16px;
}

.texto-longo ul {
    padding-left: 22px;
}


/* ---------- 14. ADAPTAÇÃO A ECRÃS PEQUENOS ---------- */

/* Menu passa a botão "Menu" antes de ficar apertado */
@media (max-width: 1120px) {
    .menu-botao {
        display: inline-flex;
    }

    .navegacao {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--papel);
        border-bottom: 2px solid var(--tinta);
        padding: 8px var(--margem) 24px;
    }

    .menu-aberto .navegacao {
        display: block;
    }

    .navegacao ul {
        flex-direction: column;
        gap: 0;
    }

    .navegacao a {
        padding: 14px 0;
        font-size: 1.6rem;
        font-weight: 700;
        border-bottom: 1px solid var(--linha);
    }

    .navegacao a::after {
        left: 0;
        right: auto;
        width: 40px;
        bottom: 8px;
    }
}

/* Tablets e portáteis pequenos */
@media (max-width: 1020px) {
    .introducao,
    .historia,
    .modalidade__grelha,
    .contactos {
        grid-template-columns: 1fr;
    }

    .modalidade__lado {
        position: static;
    }

    .mosaico {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 340px 260px 260px;
    }

    .mosaico__item:first-child {
        grid-row: auto;
        grid-column: span 2;
    }

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

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

    .tira-fotos {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* O horário do Basquetebol passa a lista por escalão, só com os dias em que há treino */
@media (max-width: 860px) {
    .tabela-treinos,
    .tabela-treinos tbody,
    .tabela-treinos tr,
    .tabela-treinos tbody th,
    .tabela-treinos td {
        display: block;
    }

    .tabela-treinos thead,
    .tabela-treinos td.sem-treino {
        display: none;
    }

    .tabela-treinos {
        border-top: 2px solid var(--tinta);
    }

    .tabela-treinos tr {
        padding: 20px 0 16px;
        border-bottom: 1px solid var(--linha);
    }

    .tabela-treinos tbody th {
        padding: 0 0 12px;
        border-bottom: 0;
    }

    .tabela-treinos td {
        display: grid;
        grid-template-columns: 72px 1fr;
        align-items: center;
        gap: 8px;
        padding: 3px 0;
        border-bottom: 0;
    }

    .tabela-treinos td::before {
        content: attr(data-dia);
        font-family: var(--letra-titulo);
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
}

/* Telemóveis */
@media (max-width: 680px) {
    .barra-topo__info {
        display: none;
    }

    .barra-topo .contentor {
        justify-content: center;
    }

    .marca img {
        width: 44px;
        height: 44px;
    }

    .marca small {
        font-size: 0.7rem;
    }

    .marca strong {
        font-size: 1.15rem;
    }

    .hero {
        min-height: 80vh;
    }

    .hero__controlos {
        top: 20px;
        bottom: auto;
    }

    .numeros ul {
        grid-template-columns: 1fr 1fr;
    }

    .numeros li {
        padding: 24px 0 24px 20px;
    }

    .numeros li:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .numeros li:nth-child(n+3) {
        border-top: 2px solid rgba(23, 22, 15, 0.14);
    }

    .mosaico {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: 240px;
    }

    .mosaico__item:first-child {
        grid-column: auto;
    }

    .horario {
        grid-template-columns: 1fr 1fr;
        gap: 6px 16px;
    }

    .horario__nome {
        grid-column: span 2;
        margin-bottom: 4px;
    }

    .horario--titulos {
        display: none;
    }

    .horario__rotulo {
        display: block;
        font-family: var(--letra-titulo);
        font-weight: 600;
        font-size: 0.8rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--texto-suave);
    }

    .horario--destaque .horario__rotulo {
        color: var(--tinta-suave);
    }

    .horario__local {
        grid-column: span 2;
    }

    .ficha > div,
    .noticia {
        grid-template-columns: 1fr;
        gap: 6px;
    }

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

    .valor,
    .valor + .valor {
        padding: 28px 0;
        border-left: 0;
        border-bottom: 1px solid var(--linha);
    }

    .treino-caixa dl {
        grid-template-columns: 1fr;
    }

    .mini-galeria {
        grid-template-columns: 1fr 1fr;
    }

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

    .visor__imagem {
        padding: 0 8px;
    }

    /* Em telemóvel as setas passam para baixo, aos lados da legenda */
    .visor__seta {
        top: auto;
        bottom: -72px;
        transform: none;
    }

    .visor__legenda {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 96px;
        padding: 12px 84px;
        font-size: 0.95rem;
    }

    .visor__seta--ant { left: 20px; }
    .visor__seta--seg { right: 20px; }
}

/* Telemóveis muito pequenos: o nome do clube e o botão Menu têm de caber lado a lado */
@media (max-width: 360px) {
    .cabecalho .contentor {
        gap: 12px;
    }

    .marca {
        gap: 8px;
    }

    .marca img {
        width: 38px;
        height: 38px;
    }

    .marca strong {
        font-size: 1.05rem;
    }

    .menu-botao {
        padding: 8px 10px;
    }
}

/* Quem prefere menos movimento no ecrã */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}