/* -------------------------------------------------------------------------
   Sistema de design da Meia Maratona de Gaia 2027.

   O MUNDO: PAINEL DE AZULEJO.
   Gaia e o Porto contam-se em azulejo: o painel narrativo de Sao Bento, as
   fachadas da Ribeira, o silhar que forra a parede ate a altura do ombro. Uma
   prova tambem e uma narrativa em modulos, um quilometro de cada vez, numa
   parede continua. Por isso este site e uma parede de azulejo, e nao uma
   fotografia grande com um contador por cima.

   AS CORES SAO DO REBRANDING OFICIAL (REB_MMGAIA27.pdf), lidas das etiquetas
   Pantone/CMYK/RGB impressas no documento, nunca adivinhadas:
     --vidrado-luz    Pantone 3125C   R0 G174 B199
     --vidrado        Pantone 320C    R0 G156 B166
     --vidrado-fundo  Pantone 123-8C  R0 G100 B110
   Os dois acentos (--lima, --ceu) sao os tracos que ladeiam "CORRIDA DO
   ATLANTICO" no logotipo, medidos ao pixel a alta resolucao.

   A REGRA DE CONTRASTE QUE MANDA EM TUDO, e que substitui a antiga regra do
   amarelo: texto corrido branco vive sobre --vidrado-fundo (6,9:1), nunca
   sobre --vidrado (3,3:1, que so chega para texto grande). Sobre vidrado
   claro e sobre lima escreve-se com --tinta.

   O SILHAR: em casa portuguesa o azulejo forra a parte de baixo da parede e o
   reboco de cal fica em cima. E a resposta da propria tradicao ao problema de
   ler texto longo dentro de um mundo saturado: os momentos expressivos sao
   parede de azulejo, a leitura longa e reboco.
   ------------------------------------------------------------------------- */

:root {
    /* O VIDRADO, a cor de campo da parede. */
    --vidrado-luz:   #00aec7;
    --vidrado:       #009ca6;
    --vidrado-fundo: #00646e;

    /* O ESMALTE E O REBOCO, o par claro. O --estanho e o branco de estanho do
       proprio azulejo, o campo onde o pincel assenta; a --cal e o reboco
       acima do silhar, onde vive a leitura longa. Nenhum dos dois e creme:
       levam um sopro de verde mineral, para lerem como cal e nao como papel. */
    --estanho: #f4f7f5;
    --cal:     #e7ede9;
    /* [variantes-heroi-06-09] A cal com 6% de fotografia a passar por baixo:
       e o vidro do painel do heroi na variante a. Escrita como rgba e nao com
       color-mix de proposito, porque o Chrome serializa o color-mix numa
       sintaxe que o verificador de pintura nao le, e um fundo que o
       verificador nao le e um fundo que ninguem esta a medir. Com 94% a
       diferenca de contraste em relacao a cal cheia e de centesimas, e
       ve-se a multidao a atravessar o painel. */
    --cal-vidro: rgba(231, 237, 233, 0.94);

    /* A TINTA do pincel. Serve as duas pontas: e o fundo mais profundo da
       parede e e a cor com que se escreve sobre claro. */
    --tinta: #06282c;

    /* O VAPOR, texto secundario sobre vidrado fundo. Nao e cinzento: e o
       proprio vidrado lavado ate a claridade que passa os 4,5:1 (da 4,88:1).
       Sobre uma superficie com cor, o texto secundario tinge-se dessa cor. */
    --vapor: #bfdfe0;

    /* A POLICROMIA. O azulejo portugues nem sempre e azul e branco: o painel
       policromo poe dois ou tres toques de cor viva no campo. Aqui sao os dois
       tracos do logotipo, e entram como toque, nunca como campo. */
    --lima: #8ac53e;
    --ceu:  #5cc7de;

    --branco: #ffffff;

    /* A JUNTA de argamassa entre azulejos. Nao e texto nem fundo de texto: e
       a linha que separa modulo de modulo, e por isso entra em NAO_USADAS no
       verificador de contraste. */
    --junta: rgba(244, 247, 245, 0.42);
    /* Separador subtil sobre fundo escuro: a linha entre os links do menu
       da gaveta e o traco por cima da identificacao legal do rodape. Nao usa
       texto nem fundo, por isso entra em NAO_USADAS no verificador de
       contraste, com o motivo escrito la. */
    --borda-suave:  rgba(255, 255, 255, 0.16);
    /* O mesmo separador, para fundo CLARO (--cal, --estanho). Sem isto, a
       --borda-suave (branco a 16%) ficava invisivel sobre claro. */
    --borda-forte:  rgba(6, 40, 44, 0.14);

    /* O MODULO. O azulejo portugues de fabrico corrente mede 14 cm de lado; na
       parede-ecra o modulo e este, e tudo o que e parede assenta nele. Nao e
       "espaco" no sentido da escala --e0..--e8: e a medida do tijolo. */
    --modulo:          104px;
    --modulo-estreito: 72px;

    /* A cor das ligacoes viaja com o contexto da seccao, nao fica fixa.
       Por omissao e a lima (sobre o vidrado do body), e uma seccao de reboco
       redefine esta ficha para --tinta. Assim ninguem precisa de se lembrar
       da regra de contraste em cada seccao nova. */
    --cor-ligacao: var(--branco);
    /* O contorno dos controlos de traco (o botao secundario). Mesma ideia da
       --cor-ligacao: viaja com o fundo em vez de depender de quem escreve se
       lembrar da regra. */
    --cor-contorno: var(--branco);

    /* Escala de espaco, base 8. Nenhuma margem escrita fora daqui.
       O --e0 e o degrau abaixo da base, para os intervalos apertados de
       dentro de um componente (o numero e a unidade do contador, as duas
       linhas da barra de inscricao, os tracos do interruptor do menu). */
    --e0: 0.25rem;
    --e1: 0.5rem;  --e2: 1rem;   --e3: 1.5rem;  --e4: 2rem;
    --e5: 3rem;    --e6: 4rem;   --e7: 6rem;    --e8: 8rem;

    /* O RITMO DAS SECCOES (CLAUDE.md, regra 5): tres alturas de respiracao
       entre seccoes, e mais nenhuma. Curta para um bloco de servico (a faixa
       de patrocinio), normal para uma seccao de conteudo, larga para as
       seccoes que abrem um capitulo. Nunca padding-block escrito a mao. */
    --seccao-curta: var(--e5);
    --seccao:       var(--e7);
    --seccao-larga: var(--e8);

    /* A PRAIA: a altura da faixa de textura no fundo de um campo escuro e do
       fundo das paredes (regra das texturas, CLAUDE.md 5). A textura vive
       nesta altura e em mais lado nenhum; o verificar-texturas.py le esta
       ficha e acusa qualquer texto que la caia. [praia] */
    --praia: 88px;
    --praia-curta: 48px;

    /* Escala de tipo, fluida entre telemovel e computador. */
    --t-corpo:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --t-destaque: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);

    /* A escala pequena, de tamanho fixo. Sao os degraus abaixo do corpo, que
       nao crescem com o ecra porque nenhum deles e texto para ler seguido:
       rotulos, notas, unidades e os textos dentro de botoes e menus. */
    --t-botao:   1rem;
    --t-menu:    0.9375rem;
    --t-pequeno: 0.875rem;
    --t-mini:    0.8125rem;
    --t-nota:    0.75rem;
    --t-micro:   0.6875rem;

    /* ESCALA DE TITULO, MEDIDA E NAO ADIVINHADA.
       Medicao no browser com a Archivo Expanded 800 carregada, em maiusculas
       e com letter-spacing -0.02em, que e como os titulos saem: cada palavra
       ocupa (largura por px de corpo) x (tamanho de letra). A 360 px de ecra
       a coluna tem 312 px (360 menos a goteira de --e3 de cada lado).

       COMO ISTO ESTA MONTADO, E PORQUE
       O limite nao vai no MINIMO do clamp: a 360 px o minimo nao manda,
       porque o termo preferido e maior (2rem + 4,5vw da 48,2 px). Era esse
       48,2 px que rebentava a linha. O limite e um TETO, e vai em unidades
       de contentor (cqi), que medem a COLUNA e nao o ecra, para valer
       tambem quando a coluna e mais estreita do que a janela.

       O minimo tem de ficar ABAIXO do teto, senao anula-o. Foi um erro que
       ja aconteceu aqui: com o minimo do h2 em 22 px e o teto em 21,8 px,
       quem mandava era o minimo e a garantia do teto era falsa. Os minimos
       de agora estao calculados para a coluna mais estreita que servimos
       (320 px de ecra, 272 px de coluna): 12,2% de 272 = 33,2 px no h1,
       9% = 24,5 px no h2 e 6,7% = 18,2 px no h3.

       OS TETOS SAO GENEROSOS DE PROPOSITO
       Apertar todos os h2 do site para caber a pior palavra da pior pagina
       era a troca errada: espremia os tres niveis e o corpo numa banda de
       14 px, e o h3 ficava a 1,12 vezes o corpo, ou seja um paragrafo a
       negrito. Alem disso a margem seria sempre de uma letra. Agora ha rede:
       o ferramentas/verificar-titulos.py recusa qualquer titulo que
       transborde, em qualquer rota e nivel. Onde uma palavra nao couber,
       escreve-se um hifen suave (­) no ponto de silaba e o browser
       mostra o hifen: le-se "VOLUNTA- / RIADO", que e tipografia legitima, e
       nao o "MARATO / NA" sem hifen que deu origem a isto tudo.

       ARMADILHA: hyphens: auto NAO SERVE. Testado com lang="pt-PT": o Chrome
       nao hifeniza nada porque nao tem o dicionario de portugues, e a linha
       transborda na mesma, em silencio. O hifen suave escrito a mao e a
       unica via fiavel.

       Escala a 360 px: h1 38,1  h2 28,1  h3 20,9  corpo 16,1 (passo ~1,35). */
    --t-h1:    clamp(2rem,     min(2rem + 4.5vw,  12.2cqi), 6rem);
    --t-h2:    clamp(1.5rem,   min(1.6rem + 2vw,     9cqi), 3.25rem);
    --t-h3:    clamp(1.125rem, min(1.2rem + 0.9vw, 6.7cqi), 2rem);
    --t-heroi: clamp(2rem,     min(1.95rem + 3vw, 13.3cqi), 5.5rem);
    /* O h1 do painel de abertura das paginas interiores. NAO usa --t-h1 e ha
       uma razao medida: dentro da cartela sobram 242 px de linha a 360 px de
       ecra, e "Inscricoes" a 38 px pede 303 px. Transbordava. Esta escala
       arranca mais baixa e sobe pelo mesmo caminho. */
    --t-h1-painel: clamp(1.75rem, 1.2rem + 3vw, 3rem);
    /* O titulo de um cartao de grelha (.assunto): mede o proprio cartao em
       cqi, para "SECRETARIADO" caber sem hifen num cartao de 205 px a 1440
       (revisao de 5 de setembro de 2026). [t-cartao] */
    --t-cartao: clamp(1.0625rem, min(1.5rem, 9.5cqi), 1.5rem);
    /* O titulo de cartela quando leva o selo de icone ao lado (menos 60 px de largura). */
    --t-cartao-selo: clamp(1rem, min(1.25rem, 8cqi), 1.25rem);

    --largura-max: 1280px;
    /* 1280px serve bem uma seccao com colunas, mas um paragrafo de corpo a
       1280px da uma linha longa de mais para ler. 68ch fica a meio da faixa
       recomendada de 65-75 caracteres por linha; usa-se so no texto corrido
       dentro do conteudo, nunca em secoes com colunas ou cartoes. */
    --largura-leitura: 68ch;
    --raio: 12px;
    /* O canto de um azulejo. Um azulejo cortado tem um bisel de um milimetro,
       nao um canto de doze pixeis: --raio serve caixas, --raio-azulejo serve
       as pecas que se leem como ceramica (o botao, o campo de formulario).
       Nao se usa clip-path nestas duas de proposito: as duas sao focaveis, e
       um clip-path corta o anel de foco pelos cantos. */
    --raio-azulejo: 3px;
    --transicao: 220ms cubic-bezier(0.22, 1, 0.36, 1);
    /* A curva de saida forte, para a resposta ao toque: comeca depressa, que e
       o momento em que o dedo esta a olhar (emil-design-eng, auditoria D7). */
    --curva-saida: cubic-bezier(0.23, 1, 0.32, 1);
}

/* A fonte de titulos. A licenca web da Organetto Exp nao chegou ate a data
   limite (ver Tarefa 4, decisao do Luis), por isso esta ficha aponta para a
   Archivo Expanded: a comparacao lado a lado com o simbolo facetado do
   logotipo mostrou que o A de apice plano e as proporcoes quadradas da
   Archivo Expanded batem melhor com os triangulos do "GAIA" do que as
   alternativas mais redondas ou condensadas. Trocar depois e uma linha. */
:root {
    --fonte-titulo: 'Archivo Expanded', system-ui, sans-serif;
    /* A FAUSTINA e nao a Inter. A Inter e uma das faces que qualquer
       interface usa hoje, e num mundo que e um painel pintado a mao ela soa a
       painel de controlo. A Faustina e serifa humanista: le como inscricao
       pintada, aguenta 16 px de texto corrido sem cansar, e assenta com as
       capitais romanas da cartela. Um so peso, 400. */
    --fonte-corpo:  'Faustina', Georgia, serif;
    /* A VOZ DA CARTELA. Num painel de azulejo, a inscricao vive dentro de uma
       cartela e nunca e a mesma letra do resto: e capital romana, herdada da
       pedra. A Cinzel e capital romana de verdade (nao um sans em maiusculas),
       e e a substituta livre da Mason Sans OT que o rebranding pede para o
       "CORRIDA DO ATLANTICO" — a Mason nasce das mesmas capitais inscricionais.
       Um so peso, e so para rotulos e inscricoes curtas: nunca texto corrido. */
    --fonte-inscricao: 'Cinzel', var(--fonte-titulo);
}

/* As fontes sao nossas, nunca do Google Fonts: zero pedidos a terceiros antes
   do consentimento. Um so peso de cada, o suficiente para titulos e corpo.
   O Inter carrega so o peso 400: e o unico peso que o corpo usa em todo o
   site (os titulos e o botao sao a fonte de titulo, nao o Inter), por isso
   um ficheiro variavel 400-700 seria peso morto no caminho critico. */
@font-face {
    font-family: 'Archivo Expanded';
    src: url('../fontes/archivo-expanded-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Faustina';
    src: url('../fontes/faustina-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cinzel';
    src: url('../fontes/cinzel-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

/* Regra global, acrescentada a 4/09 depois de a mesma falha ja ter
   acontecido num projeto irmao (Fado no Porto, 20/08): o "display" de
   qualquer regra CSS ganha sempre ao atributo "hidden" do HTML. Sem isto,
   um elemento escondido por "hidden" mas com "display:flex" (ou grid, ou
   block) numa classe fica visivel na mesma, e pior, por cima de tudo,
   a comer cliques e scroll, com o site a parecer morto ao rato e nenhum
   erro na consola. Ja aconteceu OUTRA VEZ nesta sessao (o painel de
   consentimento, Tarefa 16, com correcoes por classe uma a uma) antes de
   esta regra global existir aqui: ver a memoria
   layout-imprime-antes-da-pagina-header-falha-sem-buffer e
   click-por-js-atravessa-overlays. Com "!important" de proposito, para
   nunca mais precisar de lembrar disto por componente. */
[hidden] { display: none !important; }

body {
    margin: 0;
    /* O vidrado FUNDO e nao o medio: com branco por cima, o medio da 3,3:1 e
       o fundo da 6,9:1. O vidrado medio fica para campos de parede onde nao
       assenta texto corrido (o heroi, onde o texto vive todo na cartela). */
    background: var(--vidrado-fundo);
    color: var(--branco);
    font-family: var(--fonte-corpo);
    font-size: var(--t-corpo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 var(--e3);
    /* NUNCA se parte uma palavra num titulo. O "overflow-wrap: break-word"
       que aqui estava era um remendo para o transbordo e partia "MARATONA"
       ao meio, sem hifen, a 375 px: lia-se "MARATO / NA" no nome do evento.
       O transbordo resolve-se onde nasce, no tamanho de letra (ver o teto em
       cqi nas fichas --t-h1 e --t-heroi), e a particao dentro de palavras
       fica reservada a coisas sem alternativa, como enderecos web. */
    overflow-wrap: normal;
    word-break: normal;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
/* O h4 entrou na Tarefa 10 para os nomes dos marcos (Mosteiro da Serra do
   Pilar, Caves do Vinho do Porto...): fixo em --t-pequeno e nao numa escala
   fluida como os tres de cima, porque fica sempre bem abaixo do minimo do h3
   (18px) e nunca cresce a ponto de disputar a hierarquia com ele. O
   verificar-titulos.py mede o h4 na mesma, coluna a coluna: um titulo fixo
   nao esta livre de transbordar num cartao estreito de quatro colunas. */
h4 { font-size: var(--t-pequeno); }

/* A ligacao distingue-se pelo SUBLINHADO e nao pela cor. Na paleta antiga o
   amarelo sobre azul dava 9,3:1 e podia carregar a distincao sozinho; nesta,
   a lima sobre o vidrado fundo da 3,3:1 e nao chega para texto pequeno. O
   sublinhado e acessivel para quem nao distingue cor, e a lima fica para o
   que e grafico (a linha do friso, um ponto, um botao). */
/* SEM SUBLINHADOS, em todo o site, por decisao do Luis a 5 de setembro de
   2026 ("palavras e textos sublinhados NAO; footer igual"). A ligacao
   distingue-se pela cor da ficha --cor-ligacao (branco sobre vidrado fundo,
   tinta sobre claro) e pelo peso; no hover e no foco escurece/clareia por
   opacidade. Quem navega por teclado tem o anel de foco. [sem-sublinhado] */
a {
    color: var(--cor-ligacao);
    text-decoration: none;
    font-weight: 600;
    transition: opacity var(--transicao);
}
@media (hover: hover) and (pointer: fine) {
    a:hover { opacity: 0.78; }
}

/* O REBOCO DE CAL, acima do silhar. A lima nunca assenta sobre claro, por
   isso aqui a ligacao e o texto passam a tinta: a cor certa viaja com quem
   usar esta classe, em vez de depender de alguem repetir a regra a cada
   seccao. */
.seccao--clara {
    --cor-ligacao: var(--tinta);
    --cor-contorno: var(--tinta);
    background: var(--cal);
    color: var(--tinta);
}

/* Seccao "de mergulho profundo": o abismo, mais escuro do que o azul normal
   da marca. Reservado a poucos momentos, o fecho de uma historia ou um CTA
   final, para nao perder o efeito por uso excessivo. */
.seccao--profunda {
    background: var(--tinta);
    color: var(--branco);
    /* #conteudo reserva --e6 (64px) de goteira em cima E EM BAIXO (ver a
       regra de #conteudo), para o espaco entre o cabecalho/rodape e o
       conteudo nunca ficar a zero. Essa goteira de baixo e sempre --vidrado
       (o fundo do body, por tras de tudo), invisivel enquanto a ultima
       seccao da pagina tambem for --vidrado — mas .seccao--profunda e sempre
       a ultima seccao antes do rodape (O Evento, Gaia, Parceiros), e
       --tinta e --vidrado sao cores bem diferentes: sem esta margem
       negativa a cancelar a goteira, aparecia uma faixa --vidrado visivel
       entre o fecho escuro e o rodape --vidrado-fundo. Apanhado a 4/09, ao
       investigar a mesma faixa nas paginas novas (Galeria, Noticias) que
       tambem nao terminam em --vidrado. Confirmado com getBoundingClientRect
       no browser real, nao só por captura. */
}

/* Foco visivel sempre. Nunca se remove o contorno sem por outro. */
:focus-visible {
    outline: 3px solid var(--lima);
    outline-offset: 3px;
}

.salto-conteudo {
    position: absolute;
    left: -9999px;
}
.salto-conteudo:focus {
    left: var(--e2);
    top: var(--e2);
    z-index: 100;
    background: var(--lima);
    color: var(--vidrado-fundo);
    padding: var(--e2) var(--e3);
}

/* O #conteudo so reserva a goteira de cima e de baixo. A largura maxima e a
   goteira lateral sao da .coluna, para qualquer pagina poder ter um bloco de
   bordo a bordo sem excecoes nem truques. */
#conteudo {
    padding-top: var(--e6);
    /* SEM goteira em baixo (passagem de perfeicao, 5 de setembro de 2026):
       o verificar-ritmo.py media 64 px de fundo entre o ultimo bloco e o
       rodape em TODAS as rotas. Cada ultimo bloco respira pelas suas fichas
       e acaba onde o rodape comeca; as margens negativas que compensavam a
       goteira sairam com ela. */
    padding-bottom: 0;
}

/* A COLUNA. E ela, e nao o #conteudo, que define a largura de leitura do site
   inteiro: as mesmas medidas do cabecalho e do rodape, aplicaveis por dentro
   de um bloco que vai de bordo a bordo.
   E assim que uma faixa larga (o mar do heroi) fica da largura da pagina sem
   truques: o bloco largo nao esta dentro de nenhuma caixa com largura maxima,
   e o conteudo dele leva esta classe para alinhar com tudo o resto. Foi o
   caminho que o cabecalho, o rodape e a barra de inscricao ja usavam, e nao
   precisa de uma linha de JavaScript nem de cortar nada com overflow.

   O container-type vive AQUI e nao no #conteudo, e nao e um pormenor: com a
   consulta no #conteudo, que na homepage passou a ter a largura toda, os
   tetos em cqi mediam 360 px em vez dos 312 px da coluna real. Um h2 saia
   15% maior do que devia, so nessa pagina, e "Responsabilidades" transbordava
   38 px. A caixa que se mede tem de ser a caixa onde o texto vive. */
.coluna {
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--e3);
    container-type: inline-size;
}

/* Largura de leitura: so no texto corrido, nunca em secoes com colunas,
   grelhas ou cartoes, que decidem a sua propria largura. */
#conteudo p {
    max-width: var(--largura-leitura);
}

/* Botoes. O primario e amarelo com texto azul escuro, porque amarelo com texto
   branco da 1,55:1 e e ilegivel. */
/* O botao e um azulejo de lima e nao uma pastilha: o canto de 12 px era a
   forma por omissao de qualquer botao de qualquer site, e a unica peca deste
   desenho que nao dizia nada sobre ceramica. Corrigido na Tarefa A4, a
   pedido do revisor externo. */
.botao {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    padding: var(--e2) var(--e4);
    border-radius: var(--raio-azulejo);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-botao);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 160ms var(--curva-saida), background var(--transicao);
}
/* O hover so existe onde ha rato (auditoria D8): num ecra tactil, o toque
   deixava o botao preso a dois pixeis do sitio. */
@media (hover: hover) and (pointer: fine) {
    .botao:hover { transform: translateY(-2px); }
}
/* A resposta ao premir (auditoria D7): 0.97 e o suficiente para se sentir e
   pouco para se ver. Vem depois do hover para lhe ganhar. */
.botao:active,
.cabecalho__interruptor:active,
.carrossel__seta:active,
.carrossel__indicador:active::before,
.video__gatilho:active {
    transform: scale(0.97);
}

/* O azulejo de lima. A inscricao vai em --tinta e nao em --vidrado-fundo:
   sobre a lima, o vidrado fundo da 3,3:1 e a tinta da 7,5:1. Medido. */
.botao--primario   { background: var(--lima); color: var(--tinta); }
/* O contorno viaja com o contexto, como a ligacao: branco sobre parede,
   tinta dentro de uma cartela ou de uma seccao de reboco. Sem isto o botao
   secundario ficava branco sobre o branco de estanho da cartela, que e a
   mesma familia de defeito ja apanhada tres vezes neste projeto. */
.botao--secundario { background: transparent; color: var(--cor-contorno); border: 2px solid var(--cor-contorno); }
.botao--discreto   { background: transparent; color: var(--cor-ligacao); padding-inline: 0; }

/* O separador de onda. */
/* A cercadura: a faixa de remate entre dois campos da parede. Altura fixa e
   nao fluida, ao contrario da onda que substituiu: um azulejo tem o tamanho
   que tem, e uma cercadura que encolhe com o ecra deixa de ser ceramica. */
/* A cercadura e agora uma onda (ver app/componentes/cercadura.php): estica
   com a largura e tem a mesma altura fluida da .onda das seccoes da home. */
.cercadura { display: block; width: 100%; height: clamp(28px, 4.5vw, 72px); }
.cercadura--topo { transform: rotate(180deg); }

/* Caixa para fechar uma pagina numa onda sem seccao nenhuma a seguir
   (paginas sem "fecho" proprio, como Galeria e Noticias): da a onda um
   fundo --vidrado-fundo atras de si, para a parte transparente do SVG
   revelar --vidrado-fundo (a cor do rodape que vem a seguir) e nao o --vidrado
   do body por omissao. Acrescentada a 4/09.

   margin-bottom negativo pelo mesmo motivo exato de .seccao--profunda
   (ver o comentario la): cancela a goteira de --e6 que #conteudo reserva
   sempre por baixo, que de outro modo mostrava uma faixa --vidrado entre
   esta caixa e o rodape. */
.pagina-fecho {
    background: var(--vidrado-fundo);
}

/* MOVIMENTO REDUZIDO significa menos e mais suave, nao zero (auditoria D8,
   5 de setembro de 2026). A versao anterior matava TUDO a 0.01ms, incluindo as
   transicoes de cor que ajudam a ler e o friso a pintar-se, que e a peca de
   assinatura do site: "flag a global 0.01ms kill that destroys useful
   feedback" e o que a auditoria da skill impeccable diz por palavras. O que sai
   e o que se DESLOCA; o que muda de cor ou de opacidade fica. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* O friso aparece ja pintado, com os marcos ja assentes. */
    .friso--a-pintar .friso__linha { transform: none; animation: none; }
    .friso--a-pintar .friso__ponto,
    .friso--a-pintar .friso__rotulo { opacity: 1; animation: none; }
    /* O carrossel corta em vez de deslizar; a gaveta aparece em vez de entrar. */
    .carrossel__pista,
    .cabecalho__menu,
    .cabecalho__icone span { transition: none; }
    /* O painel de cookies so se esbate; nao cresce. */
    .consentimento__caixa { transition: none; }
    /* Nada se levanta nem encolhe ao toque. */
    .botao:hover, .botao:active,
    .cabecalho__interruptor:active, .carrossel__seta:active,
    .carrossel__indicador:active, .video__gatilho:active,
    .video__gatilho:focus-visible .video__reproduzir svg { transform: none; }
}

/* Escondido da vista mas presente para quem usa leitor de ecra. Usada no
   rotulo do interruptor do menu, que so tem icone a vista. */
.oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Cabecalho. Logotipo a esquerda, menu ao centro, botao de inscricao a
   direita. No telemovel o menu vira gaveta, mas o botao de inscricao e o
   interruptor da gaveta sao IRMAOS dentro de .cabecalho__acoes: o botao
   nunca esta dentro do <nav> que vira gaveta, por isso nunca desaparece
   quando a gaveta esta fechada.
   ------------------------------------------------------------------------- */
.cabecalho {
    /* O vidrado FUNDO e nao o medio. O cabecalho leva os seis links do menu a
       15px em branco: sobre o vidrado medio isso da 3,33:1 e sobre o fundo da
       6,9:1. O medio fica para campos de parede onde nao assenta texto
       pequeno. Apanhado pelo verificar-pintura.py na primeira vez que correu,
       assim que a navegacao voltou a estar visivel. */
    background: var(--vidrado-fundo);
    /* FIXO (Task 1): sticky e nao fixed, para continuar no fluxo e nao tapar
       o topo da pagina nem obrigar a uma margem compensatoria. */
    position: sticky;
    top: 0;
    z-index: 40;
    transition: box-shadow var(--transicao);
}
/* Depois de 100 px de scroll (site.js): mais baixo, com a sombra tingida do
   vidrado a separa-lo do que passa por baixo. A marca encolhe por transform,
   que nao provoca reflow. */
.cabecalho--compacto {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--vidrado-fundo) 45%, transparent);
}
.cabecalho__caixa { transition: padding var(--transicao); }
.cabecalho--compacto .cabecalho__caixa { padding-block: var(--e1); }
.cabecalho__logo img {
    transform-origin: left center;
    transition: transform var(--transicao);
}
.cabecalho--compacto .cabecalho__logo img { transform: scale(0.82); }
/* As ancoras param abaixo do cabecalho e nao debaixo dele. A altura vem do
   site.js, medida; 80px e a rede se o JS nao correr. */
html { scroll-padding-top: var(--altura-cabecalho, 80px); }
.cabecalho__caixa {
    max-width: var(--largura-max);
    margin-inline: auto;
    /* Padding apertado no telemovel: e o que sobra de largura para o
       logotipo, o botao de inscricao e o interruptor caberem os tres sem
       nenhum sair do ecra, que e a regra que nao se negoceia nesta tarefa. */
    padding: var(--e2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e1);
}
.cabecalho__logo { display: block; flex-shrink: 0; min-width: 0; }
.cabecalho__logo img { display: block; width: 112px; height: auto; }

.cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: var(--e1);
    /* [rotulo-igual-em-todo-o-lado-06-09] Encolhe, para o botao poder passar a
       duas linhas em vez de sair do ecra. Estava travado a 0 e era isso que
       empurrava tudo para fora quando o texto era comprido. O interruptor da
       gaveta continua travado: esse tem tamanho de alvo de toque e nao
       encolhe. */
    flex-shrink: 1;
    min-width: 0;
}
.cabecalho__acoes .botao { flex-shrink: 1; min-width: 0; }

/* O botao de inscricao no cabecalho leva um recorte proprio no telemovel:
   o mesmo botao do resto do site, mas mais compacto, para caber ao lado do
   interruptor da gaveta sem empurrar nada para fora do ecra. */
.cabecalho__acoes .botao {
    padding: var(--e1) var(--e2);
    font-size: var(--t-mini);
    /* [rotulo-igual-em-todo-o-lado-06-09] O botao do cabecalho diz o mesmo que
       todos os outros do site. "INSCRICOES BREVEMENTE" na fonte de titulo, que
       e expandida, nao cabe numa linha ao lado do logotipo e do menu em
       largura nenhuma. Cabe em duas, e e assim que se resolve: o texto que se
       encolhe e o texto que passa a prometer outra coisa. */
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    justify-content: center;
}

/* O interruptor da gaveta: tres tracos que viram X quando aberta. */
.cabecalho__interruptor {
    display: grid;
    place-items: center;
    /* [alvos-de-toque-06-09] 44 px e o minimo de um alvo de toque; tinha 40. */
    width: 44px; height: 44px;
    flex-shrink: 0;
    background: transparent;
    border: 2px solid var(--branco);
    border-radius: var(--raio-azulejo);
    cursor: pointer;
}
/* O gap e a altura dos tracos mandam no deslocamento do X mais abaixo:
   translateY tem de valer (altura do traco + gap) = 2 + 4 = 6 px. */
.cabecalho__icone { display: grid; gap: var(--e0); }
.cabecalho__icone span {
    display: block;
    width: 20px; height: 2px;
    background: var(--branco);
    transition: transform var(--transicao), opacity var(--transicao);
}
.cabecalho__interruptor[aria-expanded="true"] .cabecalho__icone span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.cabecalho__interruptor[aria-expanded="true"] .cabecalho__icone span:nth-child(2) { opacity: 0; }
.cabecalho__interruptor[aria-expanded="true"] .cabecalho__icone span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* A gaveta: um painel a ecra inteiro por cima do conteudo, so no telemovel.
   Controlada pelo atributo "hidden" (nunca display:none escrito a mao), para
   que os links la dentro saiam da ordem de tabulacao quando fechada. */
/* O estado da gaveta vive em data-gaveta e nao no atributo "hidden": o
   "hidden" e para conteudo que nao e relevante, e acima dos 960px o menu e
   relevante. Isto tambem tira o menu de debaixo da regra global
   [hidden]{display:none!important}, que a 04/09 lhe apagou a navegacao em
   todos os ecras de computador sem nenhum verificador dar por isso. */
.cabecalho__menu[data-gaveta="fechada"] { display: none; }
.cabecalho__menu {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--vidrado-fundo);
    padding: var(--e8) var(--e3) var(--e3);
    overflow-y: auto;
    z-index: 30;
}
.cabecalho__menu ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}
.cabecalho__menu a {
    display: block;
    padding: var(--e2) 0;
    color: var(--branco);
    text-decoration: none;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-destaque);
    text-transform: uppercase;
    border-bottom: 1px solid var(--borda-suave);
}
.cabecalho__menu a[aria-current="page"] { color: var(--branco); }

/* Trava o scroll do corpo enquanto a gaveta esta aberta no telemovel: sem
   isto o dedo arrasta o conteudo por baixo, atras de um painel que devia
   estar a tapar tudo. So conta abaixo de 960px, ponto em que a gaveta existe. */
html.menu-aberto { overflow: hidden; }

/* A partir daqui o menu deixa de ser gaveta: fica inline entre o logotipo e
   as acoes, e o interruptor desaparece porque ja nao ha nada para abrir. */
@media (min-width: 960px) {
    .cabecalho__caixa { padding: var(--e2) var(--e3); gap: var(--e3); }
    .cabecalho__logo img { width: 148px; }
    .cabecalho__acoes { gap: var(--e2); }
    .cabecalho__acoes .botao { padding: var(--e2) var(--e3); font-size: var(--t-mini); }
    .cabecalho__interruptor { display: none; }
    /* No computador a gaveta deixa de existir: o menu esta sempre aberto. */
    .cabecalho__menu[data-gaveta="fechada"] { display: flex; }
    .cabecalho__menu {
        position: static;
        inset: auto;
        background: transparent;
        padding: 0;
        overflow: visible;
        z-index: auto;
    }
    .cabecalho__menu { flex-shrink: 0; }
    .cabecalho__menu ul { flex-direction: row; align-items: center; gap: var(--e3); }
    .cabecalho__menu a {
        padding: var(--e1) 0;
        border-bottom: 2px solid transparent;
        font-size: var(--t-menu);
        white-space: nowrap;
    }
    .cabecalho__menu a[aria-current="page"] { border-bottom-color: var(--lima); }
    @media (hover: hover) and (pointer: fine) {
        .cabecalho__menu a:hover { border-bottom-color: var(--lima); }
    }
}

/* A FAIXA APERTADA DO CABECALHO, 960 a 1179 px (Tarefa A7).

   O menu deixa de ser gaveta e passa a linha, e ate aqui herdava de uma vez as
   medidas de computador: logotipo a 148 px, 24 px entre cada ligacao e o botao
   com 32 px de folga de cada lado. Somado, o cabecalho pedia 1161 px de
   largura. A 1024 px o botao de inscricao acabava 162 px FORA do ecra, e
   ninguem tinha dado por isso porque um "overflow: hidden" o cortava em
   silencio: e por isso que a auditoria mede a posicao real e nao o scrollWidth
   (ver ferramentas/verificar-auditoria.py).

   O PONTO DE CORTE SUBIU DE 880 PARA 960 pela mesma medicao: mesmo com tudo
   apertado, a 880 px o cabecalho ainda pedia 70 px a mais do que o ecra tem.
   Nao ha aperto que resolva isso sem deixar as ligacoes coladas umas as
   outras; entre os 880 e os 960 a gaveta e a resposta certa.

   Nesta faixa tudo aperta e nada desaparece. Perder a navegacao horizontal
   ate aos 1180 px, que e a largura de metade dos portateis, seria pagar caro
   por um defeito de espacamento. */
@media (min-width: 960px) and (max-width: 1179px) {
    .cabecalho__caixa { gap: var(--e2); }
    .cabecalho__logo img { width: 112px; }
    .cabecalho__menu ul { gap: var(--e2); }
    .cabecalho__menu a { font-size: var(--t-mini); }
    .cabecalho__acoes { gap: var(--e1); }
    .cabecalho__acoes .botao { padding: var(--e1) var(--e2); font-size: var(--t-mini); }
}

/* -------------------------------------------------------------------------
   Rodape. Fundo azul escuro: usa a mesma logica de ".seccao--clara" para a
   ligacao, so que redefinida aqui em vez de dependida de outra classe.
   ------------------------------------------------------------------------- */
.rodape {
    --cor-ligacao: var(--branco);
    background: var(--vidrado-fundo);
    padding: var(--e6) var(--e3) var(--e4);
    /* Espaco para a barra fixa nao tapar a ultima linha do rodape. O valor
       real vem do JavaScript, medido no elemento da barra: aqui fica so o
       chao de seguranca para quando o JavaScript ainda nao correu. */
    padding-bottom: var(--e4);
}
/* A folga para a barra fixa SO quando a barra existe (com fases publicadas)
   e so no telemovel, onde ela se mostra: sem isto o rodape acabava com 88 a
   120 px vazios em todas as paginas (passagem de perfeicao, 5 de setembro
   de 2026). */
@media (max-width: 959px) {
    body:has(.barra-inscricao) .rodape { padding-bottom: calc(var(--e4) + var(--altura-barra, 88px)); }
}
.rodape__caixa {
    max-width: var(--largura-max);
    margin-inline: auto;
    display: grid;
    gap: var(--e5);
    grid-template-columns: 1fr;
}
.rodape__logo { width: 160px; height: auto; }
.rodape__contactos a { display: inline-block; font-weight: 700; }
.rodape__contactos p { margin: var(--e1) 0 var(--e3); }
.rodape__redes {
    display: flex;
    gap: var(--e3);
    flex-wrap: wrap;
}
.rodape__mapa ul,
.rodape__legal ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}
.rodape__identificacao {
    max-width: var(--largura-max);
    margin: var(--e5) auto 0;
    padding-top: var(--e3);
    border-top: 1px solid var(--borda-suave);
    font-size: var(--t-pequeno);
    color: var(--vapor);
}
.rodape__creditos {
    max-width: var(--largura-max);
    margin: var(--e2) auto 0;
    font-size: var(--t-mini);
    color: var(--vapor);
}
@media (min-width: 960px) {
    .rodape__caixa {
        /* As duas ultimas colunas ao tamanho do conteudo: a 1024 a coluna
           das ligacoes legais era 1fr (~180 px) e "Politica de Privacidade"
           partia em duas linhas (passagem de perfeicao, 6 de setembro de
           2026). Com auto e nowrap, cada ligacao fica numa linha. */
        /* [orfas-06-09] Sao cinco blocos desde que entrou a coluna das paginas
           que o menu do cabecalho nao leva. Cinco lado a lado so cabem a
           partir dos 1180 px (medido: a 960 o botao de inscricao ficava 46 px
           fora do ecra). Aqui ficam quatro por linha, com o botao de inscricao
           a passar para baixo e a ocupar a linha toda: e o unico dos cinco que
           nao e uma lista, e sozinho numa coluna estreita ficava perdido. */
        grid-template-columns: 1.2fr 1fr auto auto;
        align-items: start;
    }
    .rodape__mapa a,
    .rodape__legal a { white-space: nowrap; }
    .rodape__cta { grid-column: 1 / -1; }
}

/* A partir daqui os cinco blocos do rodape cabem numa linha so. */
@media (min-width: 1180px) {
    .rodape__caixa { grid-template-columns: 1.2fr 1fr auto auto auto; }
    .rodape__cta { grid-column: auto; }
}

/* -------------------------------------------------------------------------
   Barra fixa de inscricao. A peca de conversao mais importante do site:
   fica sempre a vista, no telemovel e no computador, para o CTA nunca estar
   a mais de um toque. Mostra "Precos em breve" quando o bloco fases ainda
   esta vazio, nunca um preco inventado.
   ------------------------------------------------------------------------- */
/* So no telemovel (auditoria O3): acima do ponto de corte da gaveta o
   cabecalho esta sempre a vista com o mesmo botao, e dois "Inscrever" fixos ao
   mesmo tempo eram ruido. */
@media (min-width: 960px) {
    .barra-inscricao { display: none; }
}
.barra-inscricao {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--vidrado-fundo);
    border-top: 2px solid var(--lima);
    padding: var(--e2) var(--e3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    flex-wrap: wrap;
}
.barra-inscricao__info {
    display: flex;
    flex-direction: column;
    gap: var(--e0);
    line-height: 1.3;
}
.barra-inscricao__fase {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--t-pequeno);
    color: var(--estanho);
}
.barra-inscricao__preco { font-weight: 700; }
.barra-inscricao__aviso { font-size: var(--t-mini); color: var(--vapor); }
.barra-inscricao .botao { padding: var(--e1) var(--e3); flex-shrink: 0; }

@media (min-width: 960px) {
    .barra-inscricao { padding: var(--e2) var(--e5); }
    .barra-inscricao__info { flex-direction: row; align-items: baseline; gap: var(--e3); }
}

/* -------------------------------------------------------------------------
   O HEROI: A CORRIDA DO ATLANTICO.

   Reescrito a 5 de setembro de 2026 depois de o Luis reprovar o painel de
   azulejo ("o hero tem de ser foto massiva do evento"). A materia passa a
   ser a fotografia real da largada de 2026: o arco, a fita, a fila da elite,
   o mar a esquerda. O TEXTO NUNCA SE ESCREVE POR CIMA DA FOTOGRAFIA: vive
   sempre num campo opaco de uma ficha (vidrado fundo ou estanho), para o
   contraste ser o que o verificador mede e nao o que a fotografia calhar a
   dar naquele ponto.

   A COMPOSICAO: a fotografia de bordo a bordo e uma cartela de estanho
   centrada a poisar sobre a parte de baixo dela. Foi a "c" de tres propostas
   (cartela lateral, faixa de chao, cartela central) que o Luis viu a 5 de
   setembro de 2026 e escolheu; as outras duas sairam daqui nesse dia.

   TELEMOVEL, nas tres: a fotografia em retrato 4:5 (recorte centrado no
   arco, feito pelo preparar-hero.py) com teto de 62svh, e o texto a seguir.
   O botao de inscricao vive tambem na barra fixa de baixo, por isso nao
   precisa de caber no primeiro ecra do telemovel.
   ------------------------------------------------------------------------- */
.heroi {
    position: relative;
    isolation: isolate;
    /* Anula a goteira de cima do #conteudo: a fotografia encosta ao cabecalho. */
    margin-top: calc(var(--e6) * -1);
    background: var(--vidrado-fundo);
    color: var(--branco);
    overflow: clip;
}

.heroi__foto {
    /* width explicito: com aspect-ratio e max-height sem largura, o CSS
       transfere o limite de altura para a largura (56svh x 4/5) e num
       telemovel alto a fotografia ficava a 82% do ecra. Visto pelo Luis a
       5 de setembro de 2026, no telemovel real. */
    width: 100%;
    position: relative;
    /* Enquanto a fotografia nao chega, o campo ja tem a cor do painel. */
    background: var(--vidrado-fundo);
    aspect-ratio: 4 / 5;
    max-height: 62svh;
    overflow: clip;
}
.heroi__foto picture,
.heroi__foto img {
    display: block;
    width: 100%;
    height: 100%;
}
.heroi__foto img {
    object-fit: cover;
    /* O arco esta no terco de cima da moldura: e ele que fica quando a
       altura corta. */
    object-position: 50% 22%;
}

.heroi__coluna {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* O PAINEL DO TEXTO. Container proprio: os tetos em cqi medem a largura dele
   e nao a do ecra. */
.heroi__painel {
    container-type: inline-size;
    padding-block: var(--e4) var(--e5);
}
.heroi__titulo { margin: 0; }
.heroi__marca {
    display: block;
    width: min(100%, 300px);
    height: auto;
}
/* O LEMA, em letra de titulo: a unica frase do heroi que se le como titulo.
   Curto de proposito (a Archivo Expanded e larga) e com teto de 22ch. */
.heroi__lema {
    margin: var(--e3) 0 0;
    max-width: 22ch;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-h3);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}
.heroi__argumento {
    margin: var(--e2) 0 0;
    max-width: 38ch;
    font-size: var(--t-destaque);
    line-height: 1.35;
    color: var(--vapor);
    text-wrap: pretty;
}
.heroi__ficha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e2);
    margin: var(--e3) 0 0;
    padding-top: var(--e3);
    border-top: 1px solid var(--borda-suave);
}
.heroi__celula:last-child { grid-column: 1 / -1; }
.heroi__celula dt {
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vapor);
}
.heroi__celula dd {
    margin: var(--e0) 0 0;
    font-size: var(--t-corpo);
    line-height: 1.25;
    color: var(--branco);
}
.heroi__accoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e2);
    margin-top: var(--e3);
}
.heroi__accoes .botao { justify-content: center; }

/* A cartela de qualquer pagina aperta no telemovel (regra que ja existia no
   bloco antigo do heroi e que serve as paginas interiores). */
@media (max-width: 559px) {
    .cartela { padding: var(--e3); }
    /* A ficha numa coluna (a 2 colunas o terceiro item ficava orfao) e os
       botoes com letra de menu, para "Inscricoes brevemente" caber numa
       linha na cartela de 288 px (revisao de 5 de setembro de 2026). */
    .heroi__ficha { grid-template-columns: 1fr; gap: var(--e2); }
    .heroi__celula:last-child { grid-column: auto; }
    .heroi__accoes .botao { font-size: var(--t-menu); padding-inline: var(--e3); }
}

@media (min-width: 560px) {
    .heroi__foto { aspect-ratio: 16 / 9; max-height: none; }
    .heroi__ficha { grid-template-columns: max-content max-content auto; gap: 0; }
    .heroi__celula:last-child { grid-column: auto; }
    .heroi__celula { padding-inline: var(--e3); }
    .heroi__celula:first-child { padding-left: 0; }
    .heroi__celula + .heroi__celula { border-left: 1px solid var(--borda-suave); }
    .heroi__accoes { flex-direction: row; align-items: center; }
    .heroi__accoes .botao { justify-content: flex-start; }
}

/* ---- A CARTELA CENTRAL --------------------------------------------------- */
/* O painel leva a classe .cartela (estanho, tinta, fio grosso, cantos
   chanfrados) e sobe por cima da parte de baixo da fotografia. As cores dos
   filhos trocam para os pares medidos sobre estanho. */
.heroi .heroi__coluna { margin-top: calc(var(--e6) * -1); }
.heroi .heroi__argumento { color: var(--vidrado-fundo); }
.heroi .heroi__ficha { border-top: 1px solid var(--borda-forte); }
.heroi .heroi__celula dt { color: var(--vidrado-fundo); }
.heroi .heroi__celula dd { color: var(--tinta); }
.heroi .heroi__celula + .heroi__celula { border-left: 1px solid var(--borda-forte); }
@media (min-width: 560px) {
    /* A fotografia mais baixa do que em b (52svh e nao 62) e a cartela mais
       compacta (marca a 240 px, ficha mais junta): medido a 1440x950, com a
       fotografia a 58svh os botoes caiam abaixo do primeiro ecra. */
    .heroi .heroi__foto {
        aspect-ratio: auto;
        height: clamp(400px, 52svh, 640px);
    }
    .heroi .heroi__coluna { margin-top: calc(var(--e8) * -1); }
    .heroi .heroi__painel {
        max-width: 760px;
        margin-inline: auto;
        text-align: center;
    }
    .heroi .heroi__marca { width: min(100%, 240px); }
    .heroi .heroi__ficha { margin-top: var(--e2); padding-top: var(--e2); }
    .heroi .heroi__accoes { margin-top: var(--e2); }
    .heroi .heroi__marca,
    .heroi .heroi__lema,
    .heroi .heroi__argumento { margin-inline: auto; }
    .heroi .heroi__ficha { justify-content: center; }
    .heroi .heroi__accoes { justify-content: center; }
}

/* A LINHA DE COSTA. Duas ondas a correr devagar, em sentidos contrarios,
   na base da fotografia: a de vidrado fundo (a cor do painel por baixo) faz
   a fotografia acabar como a agua acaba na areia, e a de vidrado luz, mais
   transparente, e a espuma. Mascaras SVG (geometria, sem cor) sobre uma
   cor de ficha, como a parede; a animacao e so a posicao da mascara, que
   nao mexe em layout nem sai do ecra. */
.heroi__foto::before,
.heroi__foto::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 1;
    pointer-events: none;
    height: clamp(36px, 6vw, 84px);
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
    -webkit-mask-size: 1440px 100%;
            mask-size: 1440px 100%;
}
.heroi__foto::before {
    background-color: var(--vidrado-luz);
    opacity: 0.55;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2072'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,48%20C180,72%20420,14%20720,48%20S1260,72%201440,48%20L1440,72%20L0,72%20Z'%20fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2072'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,48%20C180,72%20420,14%20720,48%20S1260,72%201440,48%20L1440,72%20L0,72%20Z'%20fill='black'/%3E%3C/svg%3E");
}
.heroi__foto::after {
    background-color: var(--vidrado-fundo);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2072'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,36%20C240,0%20480,72%20720,36%20S1200,0%201440,36%20L1440,72%20L0,72%20Z'%20fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2072'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,36%20C240,0%20480,72%20720,36%20S1200,0%201440,36%20L1440,72%20L0,72%20Z'%20fill='black'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
    .heroi__foto::after  { animation: mare 26s linear infinite; }
    .heroi__foto::before { animation: mare 38s linear infinite reverse; }
}
@keyframes mare {
    from { -webkit-mask-position: 0 0; mask-position: 0 0; }
    to   { -webkit-mask-position: -1440px 0; mask-position: -1440px 0; }
}

/* O CHAO DO HEROI: o friso do percurso e a conta decrescente, em campo liso
   de vidrado fundo por baixo da fotografia. Sem padrao nenhum: a fotografia e
   a materia, e o friso e a unica linha desenhada. A folga de baixo e para a
   onda que leva o chao ate a faixa de patrocinio. */
.heroi__chao {
    position: relative;
    background: var(--vidrado-fundo);
    color: var(--branco);
    padding-top: var(--e5);
    padding-bottom: var(--e6);
}

/* -------------------------------------------------------------------------
   A ONDA ENTRE SECCOES (app/componentes/onda.php). Vive no fundo da seccao
   anterior (ou no topo da seguinte, invertida) com a cor da seccao para onde
   leva. O SVG tem width/height reais no atributo; aqui so se lhe da a altura
   fluida e a cor, que vem sempre de uma ficha.
   ------------------------------------------------------------------------- */
.onda {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    line-height: 0;
    pointer-events: none;
}
.onda--fundo { bottom: -1px; }
.onda--topo  { top: -1px; transform: scaleY(-1); }
.onda__svg {
    display: block;
    width: 100%;
    height: clamp(28px, 4.5vw, 72px);
    fill: currentColor;
}
.onda--tinta         { color: var(--tinta); }
.onda--cal           { color: var(--cal); }
.onda--vidrado-fundo { color: var(--vidrado-fundo); }
.onda--estanho       { color: var(--estanho); }

/* A REVELACAO (site.js poe .revela quando o bloco esta a entrar no ecra).
   Sem a classe o bloco esta visivel: e o estado sem JavaScript, o das
   capturas e o dos verificadores. So com movimento permitido. */
@media (prefers-reduced-motion: no-preference) {
    .revela { animation: revelar 760ms var(--curva-saida) both; }

    /* [motion-visivel-06-09] O ESCALONAMENTO. O Luis, 6 de setembro de 2026: "as animacoes
       e motions nao as vejo muito". Uma das razoes: quando tres ou quatro
       cartoes estao lado a lado, entram no ecra ao mesmo tempo e revelam-se
       todos no mesmo instante. Um bloco inteiro a aparecer de uma vez le-se
       como a pagina a carregar, nao como movimento.

       Com um atraso por posicao na linha, os cartoes chegam em sequencia e o
       olho segue-os. Sao 90 ms entre cada um: acima disso parece lento, abaixo
       nao se distingue de simultaneo. Vale para todas as grelhas de cartoes do
       site, e nao so para as tres distancias, que era o unico sitio onde isto
       existia. */
    .painel-distancia:nth-child(2).revela,
    .capitulo__grelha > :nth-child(2).revela,
    .parceiros-grupo__grelha > :nth-child(2).revela,
    .marcos__grelha > :nth-child(2).revela,
    .estado__grelha > :nth-child(2).revela { animation-delay: 90ms; }

    .painel-distancia:nth-child(3).revela,
    .capitulo__grelha > :nth-child(3).revela,
    .parceiros-grupo__grelha > :nth-child(3).revela,
    .marcos__grelha > :nth-child(3).revela { animation-delay: 180ms; }

    .capitulo__grelha > :nth-child(4).revela,
    .parceiros-grupo__grelha > :nth-child(4).revela,
    .marcos__grelha > :nth-child(4).revela { animation-delay: 270ms; }
}
@keyframes revelar {
    /* 24 px eram pouco para se ver a acontecer. 34 px com a mesma curva de
       saida continua discreto e ja se le como movimento. [motion-visivel-06-09] */
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: none; }
}

/* A ENTRADA. A fotografia aproxima-se devagar (1,8 s) enquanto a cabeca
   (marca, lema, argumento) e depois os factos assentam, 140 ms entre os
   dois. So com movimento permitido: em reduce a pagina abre ja no estado
   final. */
@media (prefers-reduced-motion: no-preference) {
    .heroi__foto img { animation: heroi-aproximar 1800ms var(--curva-saida) both; }
    .heroi__painel > * { animation: heroi-assentar 600ms var(--curva-saida) both; }
    .heroi__painel > :nth-child(2) { animation-delay: 140ms; }
}
@keyframes heroi-aproximar {
    from { transform: scale(1.06); }
    to   { transform: none; }
}
@keyframes heroi-assentar {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   A conta decrescente. Conta para o fim da fase de precos, que e a urgencia
   verdadeira; so sem fases publicadas e que conta para o dia da prova.
   Vive dentro da cartela, como inscricao: nao e um painel de numeros grandes.
   ------------------------------------------------------------------------- */
.contador { display: block; }
.contador__etiqueta {
    margin: 0 0 var(--e1);
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vapor);
}
.contador__numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e1);
}
.contador__item {
    display: flex;
    align-items: baseline;
    gap: var(--e0);
}
.contador__item + .contador__item {
    padding-left: var(--e1);
    border-left: 1px solid var(--borda-forte);
}
.contador__numero {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-destaque);
    line-height: 1;
    letter-spacing: -0.02em;
    /* Algarismos de largura fixa: sem isto a linha estremece a cada segundo,
       porque o 1 e mais estreito do que o 8. */
    font-variant-numeric: tabular-nums;
    color: var(--branco);
}
.contador__unidade {
    font-size: var(--t-nota);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vapor);
}
.contador__item + .contador__item { border-left: 1px solid var(--borda-suave); }

/* A faixa de data, logo por baixo do friso: fecha o painel e da a conta
   decrescente sem lhe roubar o lugar dos botoes no primeiro ecra. */
.heroi__data { padding-block: var(--e3); }

@media (min-width: 560px) {
    .contador__numeros { gap: var(--e2); }
    .contador__item + .contador__item { padding-left: var(--e2); }
}

/* -------------------------------------------------------------------------
   OS TRES CARTOES DE DISTANCIA.

   Comparaveis lado a lado e por isso a decisao de arquitetura e uma so: a
   MESMA grelha e que da a mesma altura aos tres, nao uma altura escrita a
   mao. Um grid de tres colunas estica os filhos por omissao (align-items:
   stretch), por isso um cartao sem hora de partida ou sem vagas nao fica
   mais baixo do que os irmaos: fica so com mais folga antes do preco, porque
   o paragrafo do preco tem margin-top:auto e empurra o preco e o botao para
   o fundo do cartao em qualquer um dos tres.

   Fica sobre o azul do body e nao em seccao clara: o botao de cada cartao e
   sempre o botao--primario (amarelo com texto azul escuro), e o amarelo so
   vive sobre azul. Uma seccao clara aqui obrigava a trocar a variante do
   botao so nesta seccao, o que reintroduzia a excecao que a regra existe
   para evitar. */
.distancias { padding-block: var(--seccao); }
.distancias__titulo {
    margin: 0 0 var(--e4);
    text-align: center;
}
.distancias__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}
@media (min-width: 900px) {
    .distancias__grelha {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--e4);
    }
}

/* OS PAINEIS DE FOTOGRAFIA DAS DISTANCIAS (Task 5, 5 de setembro de 2026).
   Tres paineis de estanho do mesmo tamanho, cada um com a fotografia da sua
   prova em cima. A grelha estica os tres a mesma altura e o numero de 2026
   fica sempre no fundo, por isso os tres fundos alinham mesmo com descricoes
   de comprimentos diferentes (regra do Luis; o verificar-cartoes.py mede). */
.distancias__paineis {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}
.painel-distancia {
    --cor-ligacao: var(--tinta);
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--estanho);
    color: var(--tinta);
    border: 3px solid var(--vidrado-fundo);
    clip-path: polygon(
        0 18px, 18px 0,
        calc(100% - 18px) 0, 100% 18px,
        100% calc(100% - 18px), calc(100% - 18px) 100%,
        18px 100%, 0 calc(100% - 18px)
    );
    container-type: inline-size;
}
.painel-distancia__foto {
    aspect-ratio: 3 / 2;
    background: var(--vidrado-fundo);
    overflow: clip;
}
.painel-distancia__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--curva-saida);
}
.painel-distancia:hover .painel-distancia__foto img { transform: scale(1.04); }
.painel-distancia__corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--e3) var(--e3) var(--e4);
}
.painel-distancia__nome { margin: 0; }
.painel-distancia__longo {
    margin: var(--e0) 0 0;
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-mini);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vidrado-fundo);
}
.painel-distancia__descricao {
    margin: var(--e2) 0 0;
    font-size: var(--t-pequeno);
    line-height: 1.5;
}
.painel-distancia__nota {
    margin: var(--e2) 0 0;
    font-size: var(--t-mini);
    color: var(--vidrado-fundo);
}
/* O numero de 2026 vai para o fundo do painel: e assim que os tres alinham. */
.painel-distancia__numero {
    margin: auto 0 0;
    padding-top: var(--e3);
    font-size: var(--t-pequeno);
    color: var(--vidrado-fundo);
}
.painel-distancia__numero b {
    display: block;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-h3);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}
.distancias__estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e4);
    text-align: center;
}
.distancias__precos { margin: 0; }
@media (min-width: 900px) {
    .distancias__paineis {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--e4);
    }
}

.cartao-distancia {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--e4);
    --cor-ligacao: var(--tinta);
    --cor-contorno: var(--tinta);
    background: var(--estanho);
    color: var(--tinta);
    border: 3px solid var(--vidrado-fundo);
    clip-path: polygon(
        0 18px, 18px 0,
        calc(100% - 18px) 0, 100% 18px,
        100% calc(100% - 18px), calc(100% - 18px) 100%,
        18px 100%, 0 calc(100% - 18px)
    );
    /* Cada cartao mede o proprio titulo contra a propria largura e nao contra
       a coluna inteira: sem isto o teto do h3 seria calculado para os 1280 px
       da coluna e "CAMINHADA" podia passar da borda do cartao nos ecras
       largos, onde o cartao e so um terco dessa largura. O mesmo problema, e
       a mesma solucao, que ja existe no heroi__texto. */
    container-type: inline-size;
}

.cartao-distancia__nome {
    margin-bottom: var(--e2);
}
.cartao-distancia__descricao {
    margin: 0 0 var(--e3);
    font-size: var(--t-pequeno);
    color: var(--vidrado-fundo);
}

.cartao-distancia__factos {
    margin: 0 0 var(--e3);
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}
.cartao-distancia__factos > div {
    display: flex;
    justify-content: space-between;
    gap: var(--e2);
    padding-bottom: var(--e1);
    border-bottom: 1px solid var(--borda-forte);
    font-size: var(--t-mini);
}
.cartao-distancia__factos dt {
    color: var(--vidrado-fundo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cartao-distancia__factos dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

/* Empurra o preco e o botao para o fundo do cartao, para os tres botoes
   ficarem alinhados na mesma linha mesmo quando um cartao tem menos factos
   do que os outros. */
.cartao-distancia__preco {
    margin: auto 0 var(--e3);
}
.cartao-distancia__preco b {
    font-family: var(--fonte-titulo);
    font-size: var(--t-destaque);
    color: var(--tinta);
}
.cartao-distancia__preco small {
    display: block;
    margin-top: var(--e0);
    font-size: var(--t-mini);
    color: var(--vidrado-fundo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cartao-distancia .botao {
    justify-content: center;
    text-align: center;
    /* Reserva SEMPRE a altura de duas linhas, para os tres botoes ficarem
       com a mesma altura mesmo quando so um deles quebra o texto ("Inscrever
       Caminhada" e o unico que passa a duas linhas; "Inscrever 21K" e
       "Inscrever 10K" cabem numa). Sem isto o preco e o botao do cartao mais
       curto ficavam 25 px mais acima dos outros dois, porque o
       margin-top:auto do preco absorve menos folga quando o botao a seguir
       e mais alto: o olho que corre os tres precos da esquerda para a
       direita deixava de os apanhar na mesma linha.

       E uma formula e nao um valor a mao: o dobro do padding-block do botao
       (var(--e2), a mesma ficha que .botao ja usa) mais duas linhas de
       texto na entrelinha de 1.6 que o botao ja herda do body (nunca
       sobrescrita aqui, so contada). */
    min-height: calc(var(--e2) * 2 + 1.6em * 2);
}

/* -------------------------------------------------------------------------
   OS TRES PASSOS DA INSCRICAO.

   Fica sobre o azul do body, a seguir aos cartoes de distancia: e a mesma
   troca de assunto (das provas para a inscricao), nao uma mudanca de fundo.
   Cada passo e um cartao azul-escuro, como os de distancia, para os dois
   blocos lerem como a mesma familia visual.
   ------------------------------------------------------------------------- */
.passos {
    padding-top: var(--e6);
}
.passos__titulo {
    margin-bottom: var(--e4);
}
.passos__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}
.passos__item {
    padding: var(--e4);
    --cor-ligacao: var(--tinta);
    --cor-contorno: var(--tinta);
    background: var(--estanho);
    color: var(--tinta);
    border: 3px solid var(--vidrado-fundo);
    clip-path: polygon(
        0 18px, 18px 0,
        calc(100% - 18px) 0, 100% 18px,
        100% calc(100% - 18px), calc(100% - 18px) 100%,
        18px 100%, 0 calc(100% - 18px)
    );
    /* O mesmo padrao do .cartao-distancia e do .heroi__texto: cada passo mede
       o proprio h3 (--t-h3, que tem um teto em cqi) contra a propria largura
       e nao contra a coluna inteira. Sem isto o teto seria calculado para os
       1280 px da coluna, e a 900 px, onde os tres passos ja estao lado a
       lado e cada um so tem cerca de um terco dessa largura, um titulo mais
       longo podia passar da borda do cartao. Confirmado pelo
       verificar-titulos.py: mede "Cria conta" contra 248 px, a largura real
       do cartao, e nao contra os 1280 px da coluna. */
    container-type: inline-size;
}
.passos__numero {
    display: block;
    margin-bottom: var(--e2);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-h2);
    line-height: 1;
    color: var(--vidrado-fundo);
}
.passos__item-titulo {
    margin-bottom: var(--e1);
}
.passos__item-descricao {
    margin: 0;
    font-size: var(--t-pequeno);
    color: var(--vidrado-fundo);
}
@media (min-width: 900px) {
    .passos__lista {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--e4);
    }
}/* -------------------------------------------------------------------------
   O AVISO. Uma frase honesta onde falta um facto que ainda nao existe (a
   tabela de fases e o kit de inscricao,
na pagina de inscricoes),
sem caixa nem fundo,
porque fica direto sobre o
   azul do body e nao sobre um cartao azul-escuro. */
.aviso{
    /* "border-left-color" segue --cor-ligacao (amarelo em mergulho,
       azul-escuro em superficie) e nao --lima fixo, desde 4/09: o
       comentario acima descrevia um "traco direto sobre o azul do body",
       mas a pagina Percursos passou a alternar --vidrado/--cal nas tres
       seccoes de distancia, e amarelo sobre --cal (quase branco) e a
       combinacao que a propria regra da marca proibe (ver
       verificar-contraste.py, par "amarelo sobre branco"). */
    max-width: var(--largura-leitura);
    margin: 0;
    /* Nao e um bloco com barra colorida a esquerda. Isso e o tique mais
       reconhecivel de interface gerada por maquina, e nao pertence a este
       mundo: num painel de azulejo, uma nota vive numa PLACA de estanho com
       o seu fio, como qualquer inscricao. A placa dispensa a barra. */
    padding: var(--e3);
    background: var(--estanho);
    color: var(--tinta);
    border: 1px solid var(--borda-forte);
    font-size: var(--t-pequeno);
    /* Os mesmos chanfros da cartela e do painel de fotografia (Tarefa A4):
       era a unica placa do site com os quatro cantos vivos. Aqui o corte e
       menor (14 px e nao 22) porque a placa tambem e menor: um chanfro de 22
       numa nota de tres linhas comia-lhe o texto. */
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
}

/* -------------------------------------------------------------------------
   PRECOS E FASES. Pagina de inscricoes. Fica sobre o azul do body, como os
   cartoes de distancia e os passos: a mesma familia visual, um cartao
   azul-escuro por baixo da tabela.
   ------------------------------------------------------------------------- */
.fases {
    padding-top: var(--e6);
}
.fases__titulo + .aviso {
    margin-bottom: var(--e3);
}

/* Caixa com scroll proprio: a tabela tem cinco colunas (fase, fim e as tres
   distancias) e nao cabe nos 312px da coluna a 360px de ecra. Em vez de
   espremer o texto ate ficar ilegivel, a caixa desliza para o lado e a
   pagina em si nunca ganha scroll horizontal. */
/* A PLACA DE ESTANHO (Tarefa A2). Era um cartao escuro de cantos redondos,
   que e o arranjo por omissao de qualquer tabela de precos e nada tem que ver
   com este mundo. Passa a ser a chapa inscrita da parede: campo de estanho,
   fio grosso a toda a volta e os cantos chanfrados da cartela. As fichas
   --cor-ligacao e --cor-contorno viajam com ela, para o que estiver la dentro
   se pintar contra claro e nao contra o azul que ja nao esta ca. */
.fases__caixa {
    --cor-ligacao: var(--tinta);
    --cor-contorno: var(--tinta);
    margin-top: var(--e3);
    background: var(--estanho);
    color: var(--tinta);
    border: 3px solid var(--vidrado-fundo);
    overflow-x: auto;
    clip-path: polygon(
        0 20px, 20px 0,
        calc(100% - 20px) 0, 100% 20px,
        100% calc(100% - 20px), calc(100% - 20px) 100%,
        20px 100%, 0 calc(100% - 20px)
    );
}
.fases__tabela {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}
.fases__tabela th,
.fases__tabela td {
    padding: var(--e2) var(--e3);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--borda-forte);
    font-size: var(--t-pequeno);
}
.fases__tabela thead th {
    font-family: var(--fonte-inscricao);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--t-mini);
    color: var(--vidrado-fundo);
}
.fases__tabela tbody tr:last-child th,
.fases__tabela tbody tr:last-child td {
    border-bottom: 0;
}
/* A fase em vigor. Um tom de amarelo muito diluido sobre o azul-escuro da
   caixa: precisa de se notar sem competir com o preco (que ja e amarelo
   cheio nos cartoes de distancia). color-mix porque a cor inteira vem de uma
   ficha, e so a percentagem e escrita a mao. */
/* A fase em vigor, agora sobre estanho e nao sobre azul-escuro: a lima precisa
   de mais peso para se ver contra claro, e o texto continua a ser --tinta, que
   e o que da o contraste. */
.fases__linha--atual {
    background: color-mix(in srgb, var(--lima) 26%, transparent);
}
.fases__etiqueta {
    display: inline-block;
    margin-left: var(--e1);
    padding: var(--e0) var(--e1);
    border-radius: var(--raio);
    background: var(--lima);
    color: var(--vidrado-fundo);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   O QUE INCLUI A INSCRICAO. Pagina de inscricoes. So o titulo e o aviso
   enquanto o kit nao estiver anunciado: ver .aviso acima. */
/* O KIT (Tarefa A6). A folga vertical passou para a SECCAO, porque o bloco
   deixou de ser uma seccao e passou a ser um componente que vive dentro de
   duas paginas diferentes (Inscricoes e Guia do Atleta). */
.kit-seccao { padding-top: var(--e6); }
.kit__titulo {
    margin-bottom: var(--e3);
}
.kit__pecas-titulo {
    margin: var(--e5) 0 var(--e3);
}
/* Duas pecas lado a lado a partir do momento em que caibam, e uma so abaixo
   disso. A medida minima sai do modulo e nao de um ponto de corte escrito a
   mao: assim serve a coluna larga de Inscricoes e a coluna estreita do Guia do
   Atleta sem uma media query para cada uma. */
.kit__grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--modulo) * 2.6)), 1fr));
    gap: var(--e4);
    align-items: stretch;
}

/* -------------------------------------------------------------------------
   OS NUMEROS DE 2026 (Task 4, 5 de setembro de 2026). A costa vista do ar de
   bordo a bordo e um painel de tinta a poisar sobre a parte de baixo da
   fotografia, com os quatro numeros do Relatorio Final a contar quando entram
   no ecra (site.js). O mesmo gesto do heroi: o texto nunca vai por cima da
   fotografia, vai num campo opaco.
   ------------------------------------------------------------------------- */
.numeros {
    position: relative;
    padding-bottom: var(--seccao);
}
.numeros__foto {
    /* width explicito: com aspect-ratio e max-height sem largura, o CSS
       transfere o limite de altura para a largura (56svh x 4/5) e num
       telemovel alto a fotografia ficava a 82% do ecra. Visto pelo Luis a
       5 de setembro de 2026, no telemovel real. */
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 62svh;
    background: var(--vidrado-fundo);
    overflow: clip;
}
.numeros__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}
.numeros__coluna { position: relative; z-index: 1; margin-top: calc(var(--e6) * -1); }
.numeros__painel {
    background: var(--tinta);
    color: var(--branco);
    padding: var(--e4) var(--e3) var(--e4);
    container-type: inline-size;
}
.numeros__inscricao { margin: 0 0 var(--e2); color: var(--vapor); }
.numeros__titulo {
    margin: 0 0 var(--e4);
    color: var(--branco);
}
.numeros__grelha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e3) var(--e3);
    margin: 0;
}
.numeros__item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    padding-top: var(--e2);
    border-top: 1px solid var(--borda-suave);
}
.numeros__valor {
    margin: 0 0 var(--e1);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-h2);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--lima);
}
.numeros__rotulo {
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vapor);
}
.numeros__resultados { margin-top: var(--e3); }
@media (min-width: 560px) {
    .numeros__coluna { margin-top: calc(var(--e8) * -1); }
    .numeros__painel { padding: var(--e5) var(--e5) var(--e5); }
}
@media (min-width: 900px) {
    .numeros__foto { aspect-ratio: 21 / 9; }
    .numeros__grelha { grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
}

/* -------------------------------------------------------------------------
   A FAIXA DE PATROCINIO (Task 3). Sobre tinta, duas metades do mesmo tamanho:
   o naming sponsor e a cobertura televisiva. Em todas as paginas.
   ------------------------------------------------------------------------- */
.patrocinio {
    background: var(--tinta);
    color: var(--branco);
}
.patrocinio__caixa {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
    padding-block: var(--seccao-curta);
}
.patrocinio__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--e2);
    margin: 0;
}
.patrocinio__rotulo {
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vapor);
}
.patrocinio__logo {
    display: block;
    width: auto;
    height: 56px;
}
.patrocinio__item--tv .patrocinio__logo { height: 64px; }
.patrocinio__item { justify-content: flex-start; }
/* A TVI em texto, em letra de titulo, enquanto o logotipo oficial nao chega. */
.patrocinio__nome {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-h2);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--branco);
}
@media (min-width: 700px) {
    .patrocinio__caixa { grid-template-columns: 1fr 1fr; gap: var(--e5); }
    .patrocinio__item + .patrocinio__item {
        padding-left: var(--e5);
        border-left: 1px solid var(--borda-suave);
    }
}

/* -------------------------------------------------------------------------
   AS DUVIDAS. Fundo claro para variar do azul das seccoes vizinhas: um
   bloco de leitura mais longa fica mais confortavel sobre branco, e a troca
   de fundo assinala tambem a troca de registo, das provas para as duvidas.
   <details> nativo: sem isto nao havia nada a estilizar aqui alem do
   espacamento entre perguntas.
   ------------------------------------------------------------------------- */
.duvidas-seccao {
    padding-block: var(--seccao);
}
.duvidas-seccao__titulo {
    margin-bottom: var(--e4);
    text-align: center;
}
.duvidas {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
}
.duvidas__item {
    padding: var(--e3);
    border: 1px solid var(--borda-suave);
    border-radius: var(--raio-azulejo);
}
/* O rotulo padrao do <summary> (o triangulo) sai daqui e volta como um sinal
   proprio, para poder virar com a mesma transicao do resto do site. */
.duvidas__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    cursor: pointer;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-destaque);
    list-style: none;
}
.duvidas__pergunta::-webkit-details-marker { display: none; }
/* O SINAL E DESENHADO (auditoria D4): dois tracos, e nao o carater "+" em
   Archivo Expanded, que se lia como tecla de calculadora. Fechado e uma cruz;
   aberto, o traco vertical recolhe e fica um menos. E o mesmo gesto do
   interruptor da gaveta. */
.duvidas__pergunta::after {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background:
        linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
        linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
    transition: background-size var(--transicao);
}
.duvidas__item[open] .duvidas__pergunta::after {
    background-size: 100% 2px, 2px 0;
}
.duvidas__resposta {
    margin-top: var(--e2);
}
.duvidas__resposta p {
    margin: 0;
}/* -------------------------------------------------------------------------
   PAGINA DE PERCURSOS (Tarefa 10). As tres ancoras,
uma seccao por
   distancia (descricao,
aviso do tracado,
marcos,
mapa e o CTA),
tudo sobre
   o azul do body como as restantes seccoes de conteudo do site: mesma
   familia visual,
cartoes azul-escuro por cima,
sem cor nem seccao nova.
   ------------------------------------------------------------------------- */

/* Uma seccao por distancia. Mesmo espacamento vertical que .distancias,
   .fases e .passos ja usam entre blocos de conteudo. */
.percurso {
    padding-top: var(--e6);
}

/* Os marcos de Vila Nova de Gaia. Cartoes azul-escuro, a mesma familia
   visual do .cartao-distancia e do .passos__item: nome em h4 (ver a ficha
   --t-pequeno no bloco de tipografia) e descricao em --vapor, o par
   ja verificado pelo verificar-contraste.py. */
.marcos {
    margin-top: var(--e4);
}
/* O PAINEL NARRATIVO DO MARCO (Tarefa A5). Era um cartao azul-escuro com a
   fotografia em cima e o texto por baixo, o arranjo por omissao de qualquer
   lista de cartoes. Passa a ser o painel de azulejo com a CARTELA apoiada no
   canto de baixo, como num painel de Sao Bento.

   A cartela traz --cor-ligacao e --cor-contorno consigo e o texto e sempre
   --tinta sobre --estanho (14,45:1). Com isso desapareceu a razao de ser do
   "color: var(--branco)" preventivo que aqui vivia: o marco deixou de
   depender da cor herdada da seccao e pode viver em fundo claro ou escuro sem
   que ninguem se tenha de lembrar disso. */
.painel-legendado {
    display: flex;
    flex-direction: column;
    /* Mede o proprio titulo contra a largura do painel e nao contra a coluna
       inteira: o mesmo motivo do .cartao-distancia e do .passos__item. */
    container-type: inline-size;
}
.painel-legendado__foto {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* As pecas do kit sao objetos e nao lugares: o quadrado e a forma de uma
   fotografia de produto, e e a unica que deixa a camisola inteira dentro do
   painel (o ficheiro dela e vertical, 540x720). */
.painel-legendado--quadrado .painel-legendado__foto {
    aspect-ratio: 1 / 1;
}
/* Prende o recorte ao cimo. O desenho e o lettering da camisola vivem em cima;
   se algo tem de sair, sai a bainha. */
.painel-legendado__foto--topo {
    object-position: center top;
}
/* A cartela apoia-se no canto de baixo do painel e recolhe-se das duas
   margens: e uma inscricao POSTA sobre a parede, nao uma legenda alinhada com
   a moldura. O z-index nao e preciso, porque ela vem depois no documento. */
.painel-legendado__cartela {
    margin: calc(var(--e4) * -1) var(--e2) 0;
    padding: var(--e3);
    /* CRESCE ate ao fundo do cartao. Sem isto, os quatro marcos tinham a mesma
       altura de caixa (um filho de grelha estica sozinho) mas as quatro
       cartelas acabavam em quatro sitios diferentes, conforme o comprimento de
       cada descricao: o Mosteiro da Serra do Pilar tem cinco linhas e a
       Afurada tem tres, e a diferenca chegava a 56 px.
       Regra do Luis, 5 de setembro de 2026: os cartoes tem de ter todos o
       mesmo tamanho, por mais curto ou comprido que seja o texto la dentro. O
       ferramentas/verificar-cartoes.py mede isto em todas as rotas. */
    flex: 1;
}
.painel-legendado__nome {
    margin: 0 0 var(--e1);
    /* Ficha propria e nao o seletor de elemento: o componente desenha h3 ou h4
       conforme o sitio onde entra (ver app/componentes/painel-legendado.php), e o tamanho
       visual tem de ser o mesmo nos dois casos. */
    font-size: var(--t-pequeno);
}
.painel-legendado__texto {
    margin: 0;
    font-size: var(--t-mini);
}
/* O mapa e a altimetria. Enquanto 'imagem' e 'altimetria' forem null (ver
   mapa.php), cada bloco mostra a .aviso ja usada em .fases e .kit: nunca uma
   imagem partida, sempre a mesma frase honesta com que o resto do site trata
   conteudo que ainda nao existe. */
.mapa {
    margin-top: var(--e4);
}
.mapa__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}
.mapa__bloco {
    padding: var(--e3);
    background: var(--vidrado-fundo);
    border-radius: var(--raio-azulejo);
    container-type: inline-size;
}
.mapa__titulo {
    margin-bottom: var(--e1);
    color: var(--vapor);
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* O aviso dentro do cartao escuro perde a margem lateral de leitura que tem
   no resto do site (a caixa ja e estreita) e a cor viaja com o cartao, nao
   com o corpo azul de fora. */
.mapa__bloco .aviso {
    max-width: none;
    margin: 0;
    /* Herdava --vapor de quando o aviso era texto solto sobre o fundo escuro.
       Desde que passou a placa de estanho, o vapor sobre ela da 1,3:1. */
    color: var(--tinta);
}
.mapa__figura {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--raio-azulejo);
}
.mapa__descarga {
    margin-top: var(--e3);
}
@media (min-width: 700px) {
    .mapa__grelha {
        grid-template-columns: repeat(2, 1fr);
    }
}/* -------------------------------------------------------------------------
   PAGINA O EVENTO (Tarefa 11,
redesenhada 03/09 com a estrategia de
   profundidade tonal,
e corrigida a 04/09 para mostrar dimensao e emocao
   partilhada,
sem testemunhos). A missao,
a cobertura televisiva com o
   carrossel de fotografias,
e os marcos (reaproveitados de .marcos,
ja
   definido acima para Percursos),
em ritmo de mergulho e superficie.
   ------------------------------------------------------------------------- */

/* O VIDEO OFICIAL (app/componentes/video.php), em click-to-load: ver o
   comentario nesse ficheiro e em site.js para o porque de nao haver
   <iframe> nenhum aqui antes do clique. A moldura de 16:9 e imposta pelo
   CSS (aspect-ratio), nao pelos atributos width/height do <img>, que
   continuam a dizer o tamanho real do ficheiro (1280x853, 3:2): o
   navegador usa o aspect-ratio do CSS para reservar o espaco, por isso a
   caixa nao salta mesmo com um recorte diferente do ficheiro de origem. */
/* O video e um painel na parede como qualquer outra imagem deste site
   (Tarefa A3): era o ultimo sitio com o canto redondo generico. A moldura vive
   no INVOLUCRO e nao no botao, porque um clip-path por cima de um elemento
   focavel corta o anel de foco pelos cantos.
   A folga por dentro e var(--e2) e nao var(--e1) como nos outros paineis: o
   anel de foco sao 3 px de tracado mais 3 px de afastamento, e com 8 px de
   folga passava a menos de dois pixeis do chanfro. */
.video {
    margin: 0 0 var(--e5);
    background: var(--estanho);
    border: 3px solid var(--vidrado-fundo);
    padding: var(--e2);
    clip-path: polygon(
        0 22px, 22px 0,
        calc(100% - 22px) 0, 100% 22px,
        100% calc(100% - 22px), calc(100% - 22px) 100%,
        22px 100%, 0 calc(100% - 22px)
    );
}
.video__gatilho {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--vidrado-fundo);
    cursor: pointer;
}
.video__capa {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video__reproduzir {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video__reproduzir svg {
    display: block;
    width: var(--e6);
    height: var(--e6);
    padding: var(--e2);
    border-radius: 50%;
    background: var(--lima);
    color: var(--vidrado-fundo);
    transition: transform 160ms var(--curva-saida);
}
.video__gatilho:focus-visible .video__reproduzir svg {
    transform: scale(1.08);
}
@media (hover: hover) and (pointer: fine) {
    .video__gatilho:hover .video__reproduzir svg { transform: scale(1.08); }
}
.video__moldura {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* O CARROSSEL (app/componentes/carrossel.php). A janela tem um racio fixo
   (3:2, o mesmo das fotografias da edicao de 2026) e "object-fit: cover"
   evita que a foto vertical (a 05) rebente a caixa: recorta, nunca deforma.
   Sem media query nenhuma: a largura vem sempre a 100% da .coluna que o
   envolve, e a altura segue o racio sozinha em qualquer ecra. */
.carrossel {
    position: relative;
}

/* A TIRA QUE ROLA. Reescrita a 6 de setembro de 2026 (ver o comentario no
   topo de app/componentes/carrossel.php): era um "transform: translateX" que
   nao respondia ao dedo, e passou a ser rolamento nativo com encaixe. */
.carrossel__pista {
    display: flex;
    gap: var(--e2);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Sem isto o primeiro e o ultimo item nunca chegavam ao centro. */
    scroll-padding-inline: var(--e2);
    padding-block: var(--e1);
    /* A barra de rolamento nativa por cima da fotografia era ruido; o sinal
       de que isto rola sao os itens cortados na margem e as setas. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carrossel__pista::-webkit-scrollbar { display: none; }
/* No telemovel a tira sangra ate a margem do ecra: sem isto o item seguinte
   espreitava por baixo do padding da coluna e nao se via que havia mais. */
@media (max-width: 640px) {
    .carrossel__pista {
        margin-inline: calc(var(--e3) * -1);
        padding-inline: var(--e3);
        scroll-padding-inline: var(--e3);
    }
}
@media (prefers-reduced-motion: no-preference) {
    .carrossel__pista { scroll-behavior: smooth; }
}
.carrossel__pista:focus-visible {
    outline: 3px solid var(--lima);
    outline-offset: 4px;
}

/* A LARGURA DE CADA ITEM decide quantos se veem e quanto espreita o
   seguinte. Menos de 100%: o item a seguir fica meio a vista, e e isso que
   diz "ha mais, arrasta". No telemovel deixa-se espreitar mais, porque e la
   que o gesto e o unico caminho. */
.carrossel__item {
    flex: 0 0 88%;
    min-width: 0;
    /* [carrossel-bloqueia-06-09] ENCAIXE PELO INICIO, nao pelo centro.

       Com "center" e itens a 48% da largura, o primeiro e o ultimo item nunca
       conseguem ficar centrados: o scrollLeft nao pode ser negativo nem passar
       do fim da tira. Os pontos de encaixe amontoam-se nas pontas, a seta
       empurra a tira e o encaixe puxa-a de volta para o mesmo item. O efeito
       para quem usa: "tenho de clicar varias vezes e bloqueia". Com "start"
       cada item tem um ponto de encaixe proprio e alcancavel, do primeiro ao
       ultimo. */
    scroll-snap-align: start;
}
@media (min-width: 700px) {
    .carrossel__item { flex-basis: 62%; }
}
@media (min-width: 1100px) {
    .carrossel__item { flex-basis: 48%; }
}
/* Uma tira de logotipos mostra varios ao mesmo tempo. */
.carrossel__pista--multi .carrossel__item { flex-basis: 46%; }
@media (min-width: 700px) {
    .carrossel__pista--multi .carrossel__item { flex-basis: 28%; }
}
@media (min-width: 1100px) {
    .carrossel__pista--multi .carrossel__item { flex-basis: 20%; }
}

/* Cada item continua a ser um painel na parede, com a moldura de estanho e os
   chanfros do resto do site: a moldura passou da janela para o item, porque
   agora ha varios a vista ao mesmo tempo. */
.carrossel--fotografias .carrossel__item {
    border: 3px solid var(--vidrado-fundo);
    background: var(--estanho);
    padding: var(--e1);
    clip-path: polygon(
        0 22px, 22px 0,
        calc(100% - 22px) 0, 100% 22px,
        100% calc(100% - 22px), calc(100% - 22px) 100%,
        22px 100%, 0 calc(100% - 22px)
    );
}
.carrossel--fotografias .carrossel__imagem {
    aspect-ratio: 3 / 2;
}
.carrossel__imagem {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.carrossel--logotipos .carrossel__imagem {
    aspect-ratio: 3 / 2;
    object-fit: contain;
    padding: var(--e3);
    background: var(--branco);
}

/* As setas. Mesmo par de cores do .botao--primario (amarelo sobre
   azul-escuro), que troca ao contrario no hover e no foco, como o
   .percurso-nav__link ja faz. */
.carrossel__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--vidrado-fundo);
    color: var(--estanho);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.carrossel__seta:focus-visible {
    background: var(--lima);
    color: var(--vidrado-fundo);
}
@media (hover: hover) and (pointer: fine) {
    .carrossel__seta:hover {
        background: var(--lima);
        color: var(--vidrado-fundo);
    }
}
/* As setas ficam nas pontas da tira. Desligadas quando nao ha para onde ir:
   e assim que se ve que se chegou ao fim, em vez de dar a volta em silencio. */
.carrossel__seta--anterior { left: calc(var(--e2) * -1); }
.carrossel__seta--seguinte { right: calc(var(--e2) * -1); }
.carrossel__seta[disabled] { opacity: 0.3; cursor: default; }
@media (max-width: 699px) {
    .carrossel__seta--anterior { left: var(--e1); }
    .carrossel__seta--seguinte { right: var(--e1); }
}
.carrossel__seta svg {
    width: 20px;
    height: 20px;
}

/* Os indicadores: um ponto por fotografia, o ativo na cor de ligacao da
   seccao. Corrigido a 4/09: eram --vapor (o ponto inativo) e
   --lima (o ativo) fixos, os dois pensados para o fundo --vidrado do
   corpo. Dentro de uma seccao clara (o carrossel de O Evento vive em
   .evento-cobertura.seccao--clara) isso e --vapor quase invisivel
   sobre --cal (claridades quase identicas) e amarelo sobre um fundo
   quase branco, que a propria regra da marca proibe (ver
   verificar-contraste.py). "currentColor" e --cor-ligacao ja viajam com o
   contexto de seccao (branco/amarelo em mergulho, azul-escuro/azul-escuro
   em superficie), por isso os pontos passam a acompanhar sozinhos, sem
   ficha nova. */
.carrossel__indicadores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e1);
    margin-top: var(--e3);
}
/* [alvos-de-toque-06-09] O PONTO CONTINUA A TER 10 px; O ALVO PASSA A TER 44.

   Medido a 6 de setembro de 2026: os indicadores tinham 10 x 10 px de area
   tocavel, o pior alvo do site. Falham o minimo de 44 px e falham ate os 24 px
   que a WCAG 2.2 exige. Num telemovel isso e um alvo que se falha mais vezes
   do que se acerta, e faz parte da queixa do Luis de que os carrosseis "nao
   sao fluidos".

   O botao passa a ter 44 px e fundo transparente, e o ponto e desenhado por um
   ::before ao centro. Assim o desenho nao muda nada e o dedo tem onde acertar.
   Uma margem negativa anula o espaco extra, para a fila de pontos nao afastar
   o resto da pagina. */
.carrossel__indicador {
    width: 44px;
    height: 44px;
    margin: -17px -8px;
    padding: 0;
    border: none;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.carrossel__indicador::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    transition: opacity var(--transicao), background var(--transicao), transform var(--transicao);
}
.carrossel__indicador[aria-current="true"]::before {
    opacity: 1;
    background: var(--cor-ligacao);
    transform: scale(1.2);
}

/* Os marcos desta pagina reaproveitam .marcos e as suas classes filhas,
   definidas mais acima para a pagina de Percursos: e o mesmo bloco visual,
   sem nenhuma classe nova. So o espacamento de topo e proprio, porque aqui
   o bloco e uma seccao inteira e nao uma sub-seccao dentro de ".percurso". */
.evento-marcos {
    padding-top: var(--e6);
}
.evento-marcos .marcos {
    margin-top: 0;
}

/* O fecho: o mesmo CTA de inscricao do resto do site, centrado, para a
   pagina terminar no mesmo sitio para onde aponta a barra fixa. */
.evento-fecho {
    padding-top: var(--e6);
}
.evento-fecho__caixa {
    text-align: center;
}
.evento-fecho__titulo {
    margin-bottom: var(--e2);
}
.evento-fecho__texto {
    margin: 0 auto var(--e4);
}/* -------------------------------------------------------------------------
   PAGINA DE INFORMACOES (Tarefa 12). O indice de sete ancoras e uma seccao
   por ancora (data e hora, secretariado, abastecimentos, guarda-roupa,
   chuveiros, estacionamento, premios), cada uma com um titulo, uma frase
   curta e o .aviso ja definido acima para o mapa e a altimetria (Tarefa 10).
   Classes proprias desta pagina, e nao uma reutilizacao de .percurso-nav ou
   .percurso: a familia visual e a mesma (pilulas de ancora, cartoes
   azul-escuro), mas sao paginas diferentes, com listas de conteudo
   diferentes, e um ajuste futuro numa nao pode arriscar mexer na outra.
   ------------------------------------------------------------------------- */

/* O .aviso de cada seccao (definido acima, no bloco de PRECOS E FASES) ja
   chega com a margem certa; so precisa de um respiro por cima do texto que
   vem antes dele. */
.info__texto + .aviso,
.info__ficha + .aviso {
    margin-top: var(--e3);
}

/* O fecho: o mesmo CTA de inscricao do resto do site, centrado. Mesmo
   desenho do .evento-fecho logo acima. */
.info-fecho {
    padding-top: var(--e6);
}
.info-fecho__caixa {
    text-align: center;
}
.info-fecho__titulo {
    margin-bottom: var(--e2);
}
.info-fecho__texto {
    margin: 0 auto var(--e4);
}

/* -------------------------------------------------------------------------
   PAGINA PARCEIROS (Tarefa 14, Passo 2; seis grupos e estrategia de
   profundidade acrescentados a 4/09). Cada grupo e uma grelha simples: sem
   carrossel nenhum, porque todos cabem numa grelha que quebra linha
   sozinha (ver o comentario no topo de app/paginas/parceiros.php).
   ".parceiros-seccao" e o wrapper de fundo (claro ou escuro, alternado);
   dois ".parceiros-grupo" empilham-se dentro da mesma seccao. */
.parceiros-seccao {
    padding-top: var(--e6);
}
.parceiros-grupo + .parceiros-grupo {
    margin-top: var(--e5);
}
.parceiros-grupo__titulo {
    margin-bottom: var(--e3);
}
/* Uma grelha e nao um flex-wrap (Tarefa A5): com flex, cada azulejo ficava da
   largura do seu logotipo e a parede saia desalinhada, com buracos de tamanhos
   diferentes entre eles. Numa parede, os azulejos sao todos do mesmo tamanho.
   A medida minima sai do modulo, nao de um numero escrito a mao. */
.parceiros-grupo__grelha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--modulo) * 1.4)), 1fr));
    gap: var(--e2);
    align-items: stretch;
}
.parceiros-grupo__item {
    /* O AZULEJO DE ESTANHO (Tarefa A5, 5 de setembro de 2026).

       Este cartao tinha fundo --vidrado-fundo, e o comentario que aqui estava
       explicava bem porque: os DOIS logotipos que existiam na altura
       (cm-gaia.png e planicare.svg) sao de desenho todo branco e num cartao
       claro desapareciam.

       A 4 de setembro entraram mais VINTE logotipos e ninguem voltou a esta
       regra. Medida a luminancia media dos pixeis opacos dos vinte e dois
       ficheiros, so aqueles dois deram claro: os outros vinte sao escuros,
       feitos para fundo claro, e estavam escuro sobre escuro. Na captura,
       "OptViagens", "Alma Cachorro", "Isla" e a "Fundacao do Desporto" mal se
       liam. Nenhum verificador podia apanhar isto: nenhum sabe ler a cor de
       dentro de um PNG.

       A regra inverteu-se. O azulejo e de estanho, como o resto da parede, e
       so os dois logotipos brancos levam o modificador --escuro. A bandeira
       viaja de conteudo/dados.php ('logo_claro'), medida e nao adivinhada.

       A altura fixa continua a ser a peca que iguala o peso otico dos
       logotipos, com "object-fit: contain": nao e altura igual no ficheiro, e
       a CAIXA que iguala. */
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--modulo) * 1.15);
    padding: var(--e2);
    background: var(--estanho);
    border: 3px solid var(--vidrado-fundo);
    clip-path: polygon(
        0 14px, 14px 0,
        calc(100% - 14px) 0, 100% 14px,
        100% calc(100% - 14px), calc(100% - 14px) 100%,
        14px 100%, 0 calc(100% - 14px)
    );
}
/* O PATROCINADOR PRINCIPAL da o nome a prova e tinha um azulejo do tamanho da
   banca de saude (auditoria O4). Passa a painel largo, a dois modulos de
   altura. O institucional (a Camara) tambem cresce, mas menos. */
.parceiros-grupo--principal .parceiros-grupo__grelha {
    grid-template-columns: minmax(0, calc(var(--modulo) * 5));
}
.parceiros-grupo--principal .parceiros-grupo__item {
    height: calc(var(--modulo) * 2);
    padding: var(--e4);
}
.parceiros-grupo--institucionais .parceiros-grupo__grelha {
    grid-template-columns: minmax(0, calc(var(--modulo) * 3));
}
.parceiros-grupo--institucionais .parceiros-grupo__item {
    height: calc(var(--modulo) * 1.5);
}

/* [logos-vetoriais-06-09] */
/* OS LOGOTIPOS SAO VETORIAIS desde 6 de setembro de 2026 (extraidos do quadro
   oficial de parceiros da Global Sport). Ja nao ha tecto em pixeis: o que
   iguala o peso otico e a PROPORCAO do azulejo que cada um pode ocupar, a
   mesma do quadro oficial (o logotipo ocupa cerca de dois tercos da moldura).
   O tecto de 64 px que aqui estava servia as miniaturas de 130 px do site
   antigo, entretanto apagadas. */
.parceiros-grupo--ouro .parceiros-grupo__logo,
.parceiros-grupo--oficiais .parceiros-grupo__logo,
.parceiros-grupo--media .parceiros-grupo__logo,
.parceiros-grupo--organizacao .parceiros-grupo__logo {
    /* Largura E altura em percentagem do azulejo (que tem largura de grelha e
       altura fixa, logo as duas sao definidas) e object-fit: contain, para o
       logotipo crescer ate a proporcao do quadro sem sair dela. So max-width
       e max-height nao chegavam: um SVG pequeno ficava ao tamanho intrinseco. */
    width: 74%;
    height: 64%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}
/* No telemovel, os vinte azulejos pequenos iam um por linha (o minimo de
   modulo*1.4 nao cabia duas vezes no painel) e a pagina passava dos 9000 px.
   Dois por linha, um pouco mais baixos: a parede continua parede. */
@media (max-width: 699px) {
    .parceiros-grupo--ouro .parceiros-grupo__grelha,
    .parceiros-grupo--oficiais .parceiros-grupo__grelha,
    .parceiros-grupo--media .parceiros-grupo__grelha,
    .parceiros-grupo--organizacao .parceiros-grupo__grelha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .parceiros-grupo--ouro .parceiros-grupo__item,
    .parceiros-grupo--oficiais .parceiros-grupo__item,
    .parceiros-grupo--media .parceiros-grupo__item,
    .parceiros-grupo--organizacao .parceiros-grupo__item {
        height: var(--modulo);
    }
}

/* Os dois logotipos de desenho todo branco. Sem isto, ficavam brancos sobre
   estanho: o mesmo defeito ao contrario. */
.parceiros-grupo__item--escuro {
    background: var(--vidrado-fundo);
    border-color: var(--estanho);
}
.parceiros-grupo__logo {
    /* NEM largura a 100% NEM altura a 100%: os dois limites ao mesmo tempo,
       e a imagem escolhe sozinha qual deles a trava primeiro.

       A versao anterior travava so pela ALTURA, com "max-width: 220px" como
       rede. Isso servia quando o azulejo era largo o quanto quisesse (era um
       item flex); com a grelha da Tarefa A5, cada azulejo tem uma largura
       fixa, e o Planicare (2304x812, quase 3:1) a 120 px de altura pedia
       336 px de largura. Transbordava, e o clip-path do azulejo cortava-lhe o
       P: o logotipo do patrocinador principal aparecia como "lanicare".

       Com max-width e max-height, um logotipo largo trava na largura e um
       logotipo alto trava na altura, sem object-fit e sem percentagens de
       largura dentro de um contentor flex, que e onde mora o bug antigo. */
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.parceiros-fecho {
    padding-top: var(--e6);
}
.parceiros-fecho__caixa {
    text-align: center;
}
.parceiros-fecho__titulo {
    margin-bottom: var(--e2);
}
.parceiros-fecho__texto {
    margin: 0 auto var(--e4);
    max-width: var(--largura-leitura);
}

/* -------------------------------------------------------------------------
   PAGINA GALERIA (Tarefa 14, Passo 4). Grelha de racio fixo (3:2, o mesmo
   das fotografias): "grelha que nao salta" quer dizer que cada celula ja
   reserva o espaco antes de a fotografia chegar, porque o racio vem do
   CSS e nao do tamanho real de cada imagem (a 03 e a 05 tem racios
   diferentes, mas a celula recorta-as com object-fit:cover em vez de
   deixar a grelha desalinhar).
   ------------------------------------------------------------------------- */
.galeria {
    padding-top: var(--e6);
    padding-bottom: var(--e6);
}
/* A grelha assenta no MODULO do azulejo e nao num numero escrito a mao: cada
   celula nunca e mais estreita do que tres modulos, e a folga entre elas e a
   junta. As colunas fixas dos pontos de corte abaixo continuam a mandar acima
   dos 600 px; esta linha e o que serve o telemovel e o que impede uma celula
   de encolher abaixo do tamanho de um painel. */
.galeria__grelha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--modulo) * 3)), 1fr));
    gap: var(--e2);
}
.galeria__item {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--estanho);
}
.galeria__foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 600px) {
    .galeria__grelha {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 900px) {
    .galeria__grelha {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------------------------------------------------------------------------
   PAGINA NOTICIAS (Tarefa 14, Passo 5). Cada artigo e um cartao de leitura
   longa: titulo, data, paragrafos e, quando existirem, os vencedores numa
   lista de definicao (prova -> nome e tempo).
   ------------------------------------------------------------------------- */
.noticias-lista {
    padding-top: var(--e6);
    padding-bottom: var(--e6);
}
.noticias-item {
    max-width: var(--largura-leitura);
    padding-bottom: var(--e5);
    margin-bottom: var(--e5);
    border-bottom: 1px solid var(--borda-forte);
}
.noticias-item:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.noticias-item__data {
    /* Sem "color" proprio, ao contrario do mesmo rotulo dentro do cartao
       --vidrado-fundo dos vencedores mais abaixo: aqui herda a cor de texto
       da propria seccao (--vidrado-fundo em --cal), porque --vapor
       e uma ficha pensada para texto secundario sobre fundo ESCURO — sobre
       --cal ficava quase invisivel (as duas cores sao quase identicas
       em claridade). Apanhado so ao rever a captura real, nao no
       verificador de contraste (que so testa os pares declarados, e este
       par nunca tinha sido declarado). O maiusculas+letter-spacing ja
       diferencia este texto do corpo sem precisar de cor propria. */
    margin: 0 0 var(--e1);
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.noticias-item__titulo {
    margin-bottom: var(--e3);
}
.noticias-item__paragrafo {
    margin: 0 0 var(--e2);
}
.noticias-item__vencedores {
    /* A PLACA DOS VENCEDORES (auditoria D6, 5 de setembro de 2026). Era o
       ultimo cartao azul-escuro de cantos redondos do site, e guardava o facto
       mais precioso da noticia: os nomes e os tempos. Um podio e uma inscricao
       comemorativa; passa a placa de estanho, como os numeros da home. As
       fichas de cor viajam com ela, para o texto nunca depender da seccao. */
    --cor-ligacao: var(--tinta);
    --cor-contorno: var(--tinta);
    margin-top: var(--e4);
    padding: var(--e4);
    background: var(--estanho);
    color: var(--tinta);
    border: 3px solid var(--vidrado-fundo);
    clip-path: polygon(
        0 22px, 22px 0,
        calc(100% - 22px) 0, 100% 22px,
        100% calc(100% - 22px), calc(100% - 22px) 100%,
        22px 100%, 0 calc(100% - 22px)
    );
}
.noticias-item__lista-vencedores dd {
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vidrado-fundo);
}
.noticias-item__vencedores-titulo {
    margin-bottom: var(--e2);
    font-size: var(--t-pequeno);
}
.noticias-item__lista-vencedores {
    margin: 0;
    display: grid;
    gap: var(--e2);
}
.noticias-item__vencedor dt {
    font-size: var(--t-mini);
    /* Sobre a placa de estanho (auditoria D6) e nao sobre o cartao escuro que
       aqui vivia: o --vapor dava 1,31:1 sobre claro, medido. */
    color: var(--vidrado-fundo);
}
.noticias-item__vencedor dd {
    margin: 0;
    font-weight: 700;
}
@media (min-width: 600px) {
    .noticias-item__lista-vencedores {
        grid-template-columns: repeat(2, 1fr);
    }
}
.noticias-aviso {
    /* Sem "color" proprio, pelo mesmo motivo de .noticias-item__data logo
       acima: herda a cor de texto da seccao. */
    max-width: var(--largura-leitura);
    font-size: var(--t-pequeno);
}

/* -------------------------------------------------------------------------
   PAGINA GAIA (Passo 3 da Tarefa 14, construida a 04/09 com a estrategia
   de profundidade tonal ja usada em O Evento): os marcos com fotografia,
   as praias de bandeira azul, o WOW e o teleferico lado a lado, a
   gastronomia e o alojamento, e o fecho.
   ------------------------------------------------------------------------- */
.gaia-fecho {
    padding-top: var(--e6);
}
.gaia-fecho__caixa {
    text-align: center;
}
.gaia-fecho__titulo {
    margin-bottom: var(--e2);
}
.gaia-fecho__texto {
    margin: 0 auto var(--e4);
}

/* -------------------------------------------------------------------------
   FORMULARIOS PARTILHADOS (Tarefa 15): contacto e voluntariado. Os dois
   vivem sempre dentro de uma .seccao--clara (--cal), por isso as fichas
   de cor usadas aqui sao sempre as de fundo claro (--cor-ligacao,
   --borda-forte), nunca --lima nem --borda-suave fixos.
   ------------------------------------------------------------------------- */
.pagina-formulario {
    padding-top: var(--e6);
}
.pagina-formulario .coluna {
    max-width: var(--largura-leitura);
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}
.formulario__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}
@media (min-width: 600px) {
    .formulario__grelha {
        grid-template-columns: repeat(2, 1fr);
    }
}
.formulario__campo {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}
.formulario__rotulo {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-mini);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cor-ligacao);
}
/* O CAMPO DE FORMULARIO NO MUNDO DO AZULEJO (Tarefa A4). Tinha o canto
   redondo generico e um fio cinzento quase invisivel: era o unico sitio do
   site onde uma caixa nao pertencia a esta parede. Passa a ter o fio da
   cartela, e o canto quase vivo do azulejo. */
.formulario__entrada {
    padding: var(--e2) var(--e3);
    border: 2px solid var(--vidrado-fundo);
    border-radius: var(--raio-azulejo);
    background: var(--branco);
    color: var(--vidrado-fundo);
    font-family: var(--fonte-corpo);
    font-size: var(--t-corpo);
}
/* O texto de exemplo dentro do campo. NAO tinha cor declarada nenhuma ate a
   Tarefa A4: ficava a cinzento por omissao do browser, que muda de browser
   para browser, e o verificar-pintura.py nao o ve porque um ::placeholder nao
   e um no de texto. Estes exemplos carregam formato ("o-teu@email.pt"), por
   isso tem de se ler.
   85% de --vidrado-fundo sobre o branco do campo da 4,94:1, medido: passa o
   minimo de 4,5:1 e continua visivelmente mais leve do que um valor escrito,
   que e o que um exemplo tem de ser. */
.formulario__entrada::placeholder {
    color: color-mix(in srgb, var(--vidrado-fundo) 85%, var(--branco));
    opacity: 1; /* o Firefox baixa a opacidade do placeholder por omissao */
}

/* O fio engrossa e passa a --cor-contorno quando o campo esta em uso: sobre
   claro isso e --vidrado-fundo, sobre escuro e --branco. O anel de foco do
   :focus-visible global continua por cima, para quem navega por teclado; isto
   e o sinal para quem navega com o rato, que nao recebe esse anel. */
.formulario__entrada:focus {
    border-color: var(--cor-contorno);
    outline: none;
}
.formulario__entrada:focus-visible {
    outline: 3px solid var(--lima);
    outline-offset: 3px;
}
.formulario__entrada--area {
    resize: vertical;
}
.formulario__erro {
    margin: 0;
    /* --cor-ligacao e nao --vidrado-fundo fixo: o contacto e o voluntariado
       vivem em .seccao--clara (fundo claro, --cor-ligacao vira
       --vidrado-fundo, o mesmo de sempre), mas a newsletter (home.php) usa
       este mesmo erro dentro do cartao ESCURO .newsletter__caixa, onde
       --vidrado-fundo fixo ficava texto escuro sobre fundo escuro,
       invisivel. Mesma familia de bug ja documentada (heranca/contexto de
       cor), desta vez ao contrario (escuro sobre escuro em vez de branco
       sobre branco). */
    color: var(--cor-ligacao);
    font-weight: 700;
    font-size: var(--t-mini);
}
.formulario__erro-geral {
    margin: 0 0 var(--e3);
    padding: var(--e2) var(--e3);
    background: var(--vidrado-fundo);
    color: var(--branco);
    border-radius: var(--raio-azulejo);
}
.formulario__consentimento {
    display: flex;
    align-items: flex-start;
    gap: var(--e2);
    font-size: var(--t-pequeno);
    cursor: pointer;
}
.formulario__consentimento input {
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    accent-color: var(--vidrado-fundo);
}
/* O campo-armadilha (Tarefa 15, Passo 3): fora do ecra, nunca so
   "display:none" nem "visibility:hidden" (alguns robos ja sabem ignorar
   campos assim marcados) e nunca type="hidden" (alguns leitores de ecra
   anunciam-nos, e um campo que uma pessoa nunca podia ver nem preencher
   tem de ficar mesmo fora do alcance de todos, nao so escondido). */
.formulario__armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulario-sucesso {
    /* A CARTELA DO OBRIGADO (auditoria O6). E o unico momento em que o site
       agradece, e era um paragrafo num cartao de cantos redondos. Passa a
       cartela, e leva a unica entrada animada de todo o site que nao e o
       friso: um momento raro, que e onde o orcamento de encanto vive
       (find-animation-opportunities). Opacidade e 8 px, 300 ms, e so isso. */
    --cor-ligacao: var(--tinta);
    --cor-contorno: var(--tinta);
    padding: var(--e5) var(--e4);
    background: var(--estanho);
    color: var(--tinta);
    border: 3px solid var(--vidrado-fundo);
    clip-path: polygon(
        0 22px, 22px 0,
        calc(100% - 22px) 0, 100% 22px,
        100% calc(100% - 22px), calc(100% - 22px) 100%,
        22px 100%, 0 calc(100% - 22px)
    );
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms var(--curva-saida), transform 300ms var(--curva-saida);
}
@starting-style {
    .formulario-sucesso { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
    .formulario-sucesso { transition: opacity 300ms var(--curva-saida); }
    @starting-style { .formulario-sucesso { transform: none; } }
}
.pagina-formulario__titulo { margin: 0 0 var(--e4); }
.formulario-sucesso__titulo {
    margin-bottom: var(--e2);
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   DOCUMENTOS LEGAIS (Tarefa 16): Politica de Privacidade, Politica de
   Cookies, Termos e Condicoes, Informacao Legal. Leitura longa e uniforme,
   sem a estrategia de profundidade do resto do site (ver o comentario no
   topo de app/componentes/documento-legal.php para o porque).
   ------------------------------------------------------------------------- */
.documento-legal {
    /* Desde 6 de setembro de 2026 os quatro documentos abrem com o mesmo
       painel de abertura das outras paginas interiores (sem fotografia):
       o texto comeca a uma ficha de seccao do painel. */
    padding-top: var(--seccao);
    padding-bottom: var(--e6);
}
.documento-legal__seccao {
    max-width: var(--largura-leitura);
    margin-bottom: var(--e4);
}
.documento-legal__titulo {
    /* --t-destaque e nao o --t-h2 que um <h2> teria por omissao: um
       documento legal repete este titulo uma dezena de vezes seguidas, e
       o tamanho de H2 normal do site (pensado para paginas de venda) fica
       pesado demais repetido tantas vezes numa leitura longa. */
    margin-bottom: var(--e1);
    font-size: var(--t-destaque);
}
.documento-legal__texto {
    margin: 0;
}
.documento-legal__texto a {
    text-decoration: none; /* [sem-sublinhado] */
}

/* A ficha de identificacao da pagina Informacao Legal: rotulo por cima do
   valor, uma coluna no telemovel e duas a partir do tablet. */
.documento-legal__ficha{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
    max-width: var(--largura-leitura);
    margin: 0 0 var(--e5);
    padding: var(--e3);
    background: var(--vidrado-fundo);
    color: var(--branco);
    border-radius: var(--raio-azulejo);
}
.documento-legal__ficha-item dt {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vapor);
}
.documento-legal__ficha-item dd {
    margin: var(--e1) 0 0;
}
@media (min-width: 600px) {
    .documento-legal__ficha {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* A tabela de cookies. Uma caixa com scroll proprio no ecra estreito (a
   tabela tem quatro colunas, larga demais para 360px), o mesmo padrao que
   .fases__caixa ja usa para a tabela de precos. */
.documento-legal__tabela-caixa {
    max-width: var(--largura-leitura);
    overflow-x: auto;
}
.documento-legal__tabela {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--t-pequeno);
}
.documento-legal__tabela th,
.documento-legal__tabela td {
    padding: var(--e2) var(--e2);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--borda-suave);
}
.documento-legal__tabela th {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vapor);
}
.documento-legal__tabela code {
    font-family: monospace;
}

/* -------------------------------------------------------------------------
   PAINEL DE CONSENTIMENTO (Tarefa 16, Passo 2). Sobreposicao central com
   fundo esbatido, NAO uma faixa fixa no fundo do ecra: a barra de
   inscricao (.barra-inscricao) ja vive ali, e as duas a competir pelo
   mesmo canto ficava confuso. "Rejeitar tudo" e "Aceitar tudo" usam
   --secundario/--primario, a mesma ficha de tamanho e padding do resto do
   site: nenhum dos dois e visualmente maior nem mais chamativo, so a cor
   muda (aviso explicito do brief: "recusar tem de ser tao facil como
   aceitar").
   ------------------------------------------------------------------------- */
.consentimento {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--e3);
    /* A ENTRADA (5 de setembro de 2026, item 4 da tabela de movimento da
       auditoria). O painel aparecia de golpe: um ecra inteiro a escurecer num
       instante, sem transicao nenhuma, e "evitar um corte brusco" e um dos
       cinco propositos que justificam movimento. Ve-se UMA vez por visitante,
       que e a frequencia onde uma entrada de 200 ms nao custa nada.
       @starting-style e o que permite animar a partir de display:none (o
       painel vive escondido por [hidden]); num browser sem suporte, o painel
       aparece como antes, de golpe, sem partir nada. */
    opacity: 1;
    transition: opacity 200ms var(--curva-saida);
}
@starting-style {
    .consentimento { opacity: 0; }
}
/* O fundo esbatido atras da caixa, num pseudo-elemento em vez de
   "background" com uma cor translucida propria: nenhum texto assenta
   nesta sobreposicao (so a caixa opaca do painel, por cima), e reutilizar
   --vidrado-fundo (ja verificado no verificador de contraste) com
   "opacity" evita inventar uma ficha nova so para uma cor com alfa, que
   o verificador de contraste trataria sempre como um fundo de leitura
   por levar a propriedade "background". */
.consentimento::before {
    content: "";
    position: fixed;
    inset: 0;
    /* z-index negativo, ESSENCIAL: sem isto, um pseudo-elemento com
       "position" fica acima de conteudo normal (estatico) na mesma pilha
       de empilhamento, mesmo vindo primeiro no DOM — e ficava por cima
       de .consentimento__caixa e dos seus botoes, a roubar-lhes o clique
       (mesma familia da falha ja documentada noutro projeto irmao, ver
       [hidden] mais acima). Apanhado so ao testar um clique por
       coordenadas a serio, nunca por elemento.click() (que atravessa
       overlays sem os testar). */
    z-index: -1;
    background: var(--vidrado-fundo);
    opacity: 0.6;
}
@media (min-width: 700px) {
    .consentimento {
        align-items: center;
    }
}
.consentimento__caixa {
    width: 100%;
    max-width: 560px;
    /* Altura maxima com scroll proprio: no telemovel, com as tres
       categorias abertas, a caixa fica mais alta do que muitos ecras.
       Sem isto, o topo (o titulo) saia por cima do ecra sem forma
       nenhuma de lhe chegar. */
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--e4);
    background: var(--vidrado-fundo);
    color: var(--branco);
    /* O ULTIMO CANTO REDONDO GENERICO DO SITE saiu daqui a 5 de setembro de
       2026. A caixa e um azulejo escuro: fio de estanho e os chanfros da
       cartela. O clip-path e seguro num modal porque os botoes vivem 32 px
       para dentro da borda e o anel de foco nunca chega ao corte. */
    border: 3px solid var(--estanho);
    clip-path: polygon(
        0 22px, 22px 0,
        calc(100% - 22px) 0, 100% 22px,
        100% calc(100% - 22px), calc(100% - 22px) 100%,
        22px 100%, 0 calc(100% - 22px)
    );
    /* A caixa entra de 0,97 para 1, do centro: um modal nao esta preso a
       nenhum gatilho e cresce de onde esta, ao contrario de um popover. Nunca
       de 0: nada no mundo real aparece do nada. */
    transform: scale(1);
    transition: transform 240ms var(--curva-saida);
}
@starting-style {
    .consentimento__caixa { transform: scale(0.97); }
}
.consentimento__titulo {
    /* --t-destaque e nao o --t-h2 que um <h2> teria por omissao: o painel
       e uma caixa estreita (max-width: 560px, com padding), e o H2 normal
       do site (pensado para o corpo largo de uma pagina) transbordava a
       360px em TODAS as rotas, porque o painel vive em todas. */
    margin-bottom: var(--e2);
    font-size: var(--t-destaque);
}
.consentimento__texto {
    margin: 0 0 var(--e3);
    font-size: var(--t-pequeno);
    color: var(--vapor);
}
.consentimento__texto a {
    color: var(--branco);
}
.consentimento__categorias {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    margin-bottom: var(--e3);
    padding-top: var(--e2);
    border-top: 1px solid var(--borda-suave);
}
.consentimento__categoria {
    display: flex;
    align-items: flex-start;
    gap: var(--e2);
    font-size: var(--t-pequeno);
    cursor: pointer;
}
.consentimento__categoria input {
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    accent-color: var(--lima);
}
.consentimento__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}
.consentimento__acoes .botao {
    flex: 1;
    justify-content: center;
}
.consentimento__acoes--guardar {
    margin-top: var(--e2);
}

/* =========================================================================
   A PAREDE, agora com ONDAS e nao azulejo.

   Ate 5 de setembro de 2026 a .parede era um campo de azulejo: juntas em
   grelha e uma roseta de quatro cantos em mascara SVG, repetida modulo a
   modulo. O Luis reprovou-o ("trocar os efeitos dos azulejos por mar e
   pontes ... se nao der pontes, trocar os padroes por ondas do mar"). O que
   fica e o campo de vidrado com a luz de cima e a sombra de baixo; o que
   entra e UMA linha de ondas, tres cristas paralelas em traco, poisada no
   fundo de cada parede, de bordo a bordo, sem se repetir. Uma vez por
   seccao, nunca textura.

   A onda e uma mascara SVG (geometria sem cor) e a cor vem sempre de uma
   ficha, como a roseta era. z-index explicito: mascara em 0, conteudo em 1.
   ========================================================================= */

.parede {
    position: relative;
    isolation: isolate;
    background-color: var(--vidrado);
    background-image:
        radial-gradient(ellipse 70% 62% at 26% 20%,
            color-mix(in srgb, var(--branco) 20%, transparent), transparent 72%),
        radial-gradient(ellipse 92% 92% at 50% 50%,
            transparent 50%, color-mix(in srgb, var(--tinta) 30%, transparent));
}

.parede::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--vidrado-fundo);
    opacity: 0.34;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20200'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='3'%3E%3Cpath%20d='M0%20120C120%2064%20240%2064%20360%20120S600%20176%20720%20120%20960%2064%201080%20120%201320%20176%201440%20120'/%3E%3Cpath%20d='M0%20150C120%2094%20240%2094%20360%20150S600%20206%20720%20150%20960%2094%201080%20150%201320%20206%201440%20150'%20opacity='0.7'/%3E%3Cpath%20d='M0%20180C120%20124%20240%20124%20360%20180S600%20236%20720%20180%20960%20124%201080%20180%201320%20236%201440%20180'%20opacity='0.45'/%3E%3C/g%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20200'%20preserveAspectRatio='none'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='3'%3E%3Cpath%20d='M0%20120C120%2064%20240%2064%20360%20120S600%20176%20720%20120%20960%2064%201080%20120%201320%20176%201440%20120'/%3E%3Cpath%20d='M0%20150C120%2094%20240%2094%20360%20150S600%20206%20720%20150%20960%2094%201080%20150%201320%20206%201440%20150'%20opacity='0.7'/%3E%3Cpath%20d='M0%20180C120%20124%20240%20124%20360%20180S600%20236%20720%20180%20960%20124%201080%20180%201320%20236%201440%20180'%20opacity='0.45'/%3E%3C/g%3E%3C/svg%3E");
    /* So na altura da praia: por cima disso nao ha textura. */
    -webkit-mask-size: 100% var(--praia);
            mask-size: 100% var(--praia);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
            mask-position: center bottom;
}

.parede__conteudo {
    position: relative;
    z-index: 1;
}

/* A parede funda: e aqui que o texto corrido branco pode viver (6,9:1). Sobre
   .parede normal so entra texto grande. */
.parede--funda { background-color: var(--vidrado-fundo); }
.parede--funda::before { background-color: var(--vidrado-luz); opacity: 0.35; }

/* A reserva de estanho: o campo claro. As ondas ficam em vidrado. */
.parede--estanho { background-color: var(--estanho); }
.parede--estanho::before { background-color: var(--vidrado); opacity: 0.30; }

/* O friso e a propria linha desenhada: nao leva ondas por baixo. */
.friso.parede::before { content: none; }

/* -------------------------------------------------------------------------
   A CARTELA. A moldura de inscricao do painel: campo de estanho, fio grosso
   por fora, fio fino por dentro, cantos chanfrados. E o unico sitio do site
   onde um titulo se apoia sobre claro dentro da parede.
   ------------------------------------------------------------------------- */
.cartela {
    --cor-ligacao: var(--tinta);
    --cor-contorno: var(--tinta);
    position: relative;
    z-index: 1;
    background: var(--estanho);
    color: var(--tinta);
    border: 3px solid var(--vidrado-fundo);
    padding: var(--e4);
    clip-path: polygon(
        0 22px, 22px 0,
        calc(100% - 22px) 0, 100% 22px,
        100% calc(100% - 22px), calc(100% - 22px) 100%,
        22px 100%, 0 calc(100% - 22px)
    );
}
.cartela::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid var(--borda-forte);
    pointer-events: none;
    clip-path: polygon(
        0 16px, 16px 0,
        calc(100% - 16px) 0, 100% 16px,
        100% calc(100% - 16px), calc(100% - 16px) 100%,
        16px 100%, 0 calc(100% - 16px)
    );
}
@media (max-width: 640px) {
    .cartela { padding: var(--e4); }
}

/* A voz da cartela: capital romana, so para inscricoes curtas. Nunca por cima
   de um titulo a fazer de sobre-titulo; e ela propria a linha, ou nao entra. */
.inscricao {
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-mini);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cor-ligacao);
}

/* O friso e as fotografias dentro de cada seccao de percurso (Tarefa A2). O
   friso vive dentro da coluna e nao de bordo a bordo como na home: aqui e a
   distancia DESTA prova, nao a assinatura da pagina, e tem de se ler junto ao
   texto que a descreve. */
.percurso .friso { margin: var(--e5) 0; }
.percurso .carrossel { margin: var(--e5) 0; }

/* O patrocinador principal no rodape (auditoria O4). */
.rodape__naming {
    margin: var(--e3) 0 0;
    display: grid;
    gap: var(--e1);
}
.rodape__naming-rotulo {
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-nota);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vapor);
}
.noticias-item__resultados { margin: var(--e3) 0 0; }
.rodape__naming-nome {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-h3);
    line-height: 1;
    color: var(--branco);
}
.rodape__naming-logo {
    display: block;
    width: min(100%, 160px);
    height: auto;
}
/* A TVI e quase quadrada: pela largura da Planicare saia com 125 px de
   altura no rodape (visto a 1024 px). Manda a altura. */
.rodape__naming-logo--tv {
    width: auto;
    height: 56px;
}

/* O PAINEL DAS TRES DISTANCIAS (auditoria D5): uma cartela, tres colunas com
   um fio por cima de cada uma, e uma linha de estado. Um so painel nao tem
   alturas para desalinhar. */
.painel-distancias { max-width: none; }
.painel-distancias__grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--modulo) * 2.4)), 1fr));
    gap: var(--e4) var(--e5);
    margin: 0;
}
.painel-distancias__celula {
    padding-top: var(--e2);
    border-top: 2px solid var(--vidrado-fundo);
}
.painel-distancias__nome {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-h2);
    line-height: 1;
    color: var(--tinta);
}
.painel-distancias__longo {
    margin: var(--e1) 0 0;
    font-weight: 600;
    color: var(--tinta);
}
.painel-distancias__descricao {
    margin: var(--e2) 0 0;
    font-size: var(--t-pequeno);
    color: var(--vidrado-fundo);
}
.painel-distancias__nota {
    margin: var(--e2) 0 0;
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-nota);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vidrado-fundo);
}
.painel-distancias__estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    margin-top: var(--e5);
    padding-top: var(--e3);
    border-top: 1px solid var(--borda-forte);
}
.painel-distancias__precos { margin: 0; }

/* -------------------------------------------------------------------------
   O PAINEL DE ABERTURA das paginas interiores (app/componentes/painel-abertura
   .php). O mesmo gesto do heroi, em ponto mais pequeno: a cartela inscrita na
   parede, com o titulo, os factos que decidem e o CTA, tudo acima da dobra.
   ------------------------------------------------------------------------- */
.abertura { padding: var(--e6) 0 var(--e7); }

/* A parede tem de encostar ao cabecalho. O #conteudo poe var(--e6) de folga em
   cima, e essa folga aparecia como uma faixa de turquesa liso entre o
   cabecalho e o primeiro azulejo: a parede parecia comecar a meio da pagina.
   A margem negativa devolve os mesmos var(--e6) que o painel ja poe por dentro
   dele, por isso o texto nao sobe um pixel; so o campo de azulejo e que sobe.
   E a mesma correcao que a goteira do rodape ja tinha pedido. */
#conteudo > .abertura:first-child { margin-top: calc(var(--e6) * -1); }
/* 68ch e nao 56: a 56 a cartela era estreita de mais para a palavra mais
   longa do site e "Regulamento" partia-se ao meio pelo hifen suave a 1440 px,
   onde ha espaco de sobra. O hifen existe para o telemovel, nao para o
   computador. */
.abertura__cartela { max-width: 68ch; }
.abertura__inscricao { margin: 0 0 var(--e2); }
.abertura__titulo {
    margin: 0 0 var(--e2);
    font-size: var(--t-h1-painel);
}
.abertura__texto { margin: 0; }

/* Pares rotulo/valor, com um fio por cima de cada par: o fio e a junta entre
   dois azulejos, nao uma linha decorativa. A grelha cede a uma coluna assim
   que os pares deixarem de caber, sem ponto de corte escrito a mao. */
.abertura__factos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--e2) var(--e4);
    margin: var(--e4) 0 0;
}
.abertura__facto {
    padding-top: var(--e1);
    border-top: 1px solid var(--borda-forte);
}
.abertura__facto-rotulo {
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-nota);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vidrado-fundo);
}
.abertura__facto-valor {
    margin: var(--e0) 0 0;
    font-weight: 600;
    color: var(--tinta);
}
.abertura__cta { margin-top: var(--e4); }

/* No telemovel a moldura da cartela come 70 px de linha util. Menos folga por
   dentro devolve-os ao texto, sem tocar na moldura. */
@media (max-width: 640px) {
    .abertura { padding: var(--e5) 0 var(--e6); }
    .abertura__cartela { padding: var(--e3); }
}

/* -------------------------------------------------------------------------
   O FRISO DO PERCURSO. A peca que este site tem e mais nenhum: a prova
   desenhada como uma linha pintada a atravessar os azulejos, um modulo por
   quilometro, a cruzar as juntas como cruza no painel de Sao Bento.
   ------------------------------------------------------------------------- */
.friso {
    position: relative;
    overflow: hidden;
}
.friso__pista {
    position: relative;
    z-index: 1;
    height: calc(var(--modulo) * 1.05);
}

/* A linha pintada. Cresce da partida para a meta, que e o sentido em que a
   prova se corre e o sentido em que se le. */
.friso__linha {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    height: 5px;
    background: var(--lima);
    transform-origin: left center;
}

/* Um modulo por quilometro: e a grelha que poe cada marco no seu quilometro,
   sem uma medida escrita a mao e sem mentir na distancia. O numero de modulos
   muda com a prova, e por isso vive na classe do friso e nao aqui: a politica
   de seguranca deste site nao permite style= inline (ver friso.php). */
.friso__marcos {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(21, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}
.friso--21 .friso__marcos { grid-template-columns: repeat(21, 1fr); }
.friso--10 .friso__marcos { grid-template-columns: repeat(10, 1fr); }
.friso--5  .friso__marcos { grid-template-columns: repeat(5, 1fr); }
/* O ponto assenta na linha e o rotulo pendura por baixo dele. As duas
   posicoes sao percentagens de "top" e nao margens: assim acompanham a altura
   do friso sem uma medida escrita a mao. */
.friso__km { position: relative; }
.friso__ponto {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--estanho);
    border: 3px solid var(--vidrado-fundo);
}
.friso__rotulo {
    position: absolute;
    top: 58%;
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-nota);
    letter-spacing: 0.08em;
    color: var(--vapor);
    white-space: nowrap;
}
/* Cada marco cai na coluna do seu quilometro, e o quilometro 5 e a coluna 6
   em qualquer prova: estas quatro linhas servem as duas distancias. So a meta
   muda de lugar, porque so ela depende de onde a prova acaba. */
.friso__km--partida { grid-column: 1; }
.friso__km--cinco   { grid-column: 6; }
.friso__km--dez     { grid-column: 11; }
.friso__km--quinze  { grid-column: 16; }
/* Sem uso nas duas distancias de hoje (a marca dos 20 km fica perto de mais da
   meta dos 21,1 e o friso.php nao a desenha). Fica escrita porque o mapa de
   nomes em friso.php ja a preve: uma prova mais longa punha-a no ecra sem
   coluna nenhuma atribuida, e ela aterrava onde calhasse. */
.friso__km--vinte   { grid-column: 21; }
.friso--21 .friso__km--meta { grid-column: 21; }
.friso--10 .friso__km--meta { grid-column: 10; }
.friso--5  .friso__km--meta { grid-column: 5; }
.friso__km--meta .friso__ponto  { right: 0; }
.friso__km--meta .friso__rotulo { right: 0; }
.friso__km--meta .friso__ponto { background: var(--lima); border-color: var(--estanho); }
.friso__km--meta .friso__rotulo { color: var(--estanho); }

/* No telemovel a grelha de 21 colunas da 17 px por coluna: os rotulos do meio
   nao cabem e sobrepunham-se. Ficam as duas pontas, que sao as que contam. */
@media (max-width: 640px) {
    .friso__km--cinco,
    .friso__km--dez,
    .friso__km--quinze { display: none; }
    .friso__km--meta .friso__rotulo,
    .friso__km--partida .friso__rotulo { font-size: var(--t-micro); }
}

/* O UNICO MOMENTO DE MOVIMENTO DO SITE: a linha pinta-se da partida para a
   meta quando o friso entra no ecra, uma vez. Sem JavaScript, ou com
   movimento reduzido pedido, a linha ja esta pintada: o estado visivel e o de
   partida, nunca o escondido. */
@media (prefers-reduced-motion: no-preference) {
    .friso--a-pintar .friso__linha {
        transform: scaleX(0);
        animation: pintar-percurso 2200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .friso--a-pintar .friso__ponto,
    .friso--a-pintar .friso__rotulo {
        opacity: 0;
        animation: assentar-marco 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .friso--a-pintar .friso__km--partida .friso__ponto,
    .friso--a-pintar .friso__km--partida .friso__rotulo { animation-delay: 120ms; }
    .friso--a-pintar .friso__km--cinco   .friso__ponto,
    .friso--a-pintar .friso__km--cinco   .friso__rotulo { animation-delay: 620ms; }
    .friso--a-pintar .friso__km--dez     .friso__ponto,
    .friso--a-pintar .friso__km--dez     .friso__rotulo { animation-delay: 1060ms; }
    .friso--a-pintar .friso__km--quinze  .friso__ponto,
    .friso--a-pintar .friso__km--quinze  .friso__rotulo { animation-delay: 1480ms; }
    .friso--a-pintar .friso__km--meta    .friso__ponto,
    .friso--a-pintar .friso__km--meta    .friso__rotulo { animation-delay: 1960ms; }
}
@keyframes pintar-percurso { to { transform: scaleX(1); } }
@keyframes assentar-marco  { to { opacity: 1; } }

/* -------------------------------------------------------------------------
   AS SUPERFICIES QUE O BROWSER DESENHA E QUE NORMALMENTE FICAM POR VESTIR.
   Selecao, cursor de texto, anel de foco e barra de scroll saem de fabrica
   numa cor que nao e de ninguem; aqui saem das fichas, como tudo o resto.
   ------------------------------------------------------------------------- */
::selection { background: var(--lima); color: var(--tinta); }
:root { accent-color: var(--vidrado-fundo); caret-color: var(--lima); }
.seccao--clara { caret-color: var(--vidrado-fundo); }

:focus-visible {
    outline: 3px solid var(--lima);
    outline-offset: 3px;
}
.seccao--clara :focus-visible { outline-color: var(--vidrado-fundo); }

@supports (scrollbar-color: auto) {
    :root { scrollbar-color: var(--vidrado-fundo) var(--vidrado); }
}

/* OS PAINEIS DE ESTANHO. Cartao de distancia e passo sao a mesma peca: um
   azulejo branco com fio grosso e cantos chanfrados, poisado na parede. O
   contexto claro viaja com eles, para nenhum texto pensado para fundo escuro
   aterrar aqui por engano. (A newsletter, que era o terceiro, saiu a 5 de
   setembro de 2026 por decisao do Luis.) */
.cartao-distancia,
.passos__item {
    --cor-ligacao: var(--tinta);
    --cor-contorno: var(--tinta);
    color: var(--tinta);
}/* -------------------------------------------------------------------------
   A FOTOGRAFIA NO MUNDO DO AZULEJO (Tarefa A1).

   Uma fotografia aqui nao e uma imagem solta: e um painel narrativo posto na
   parede,
com o mesmo fio grosso e os mesmos cantos chanfrados da cartela.
   A moldura tem uma funcao alem do estilo: o acervo e da edicao de 2026 e traz
   a marca antiga,
azul e amarela; e a moldura de estanho que faz a junta entre
   essa fotografia e a paleta turquesa da pagina,
sem ter de mentir sobre a
   idade das imagens.
   ------------------------------------------------------------------------- */
/* O PAINEL DE FOTOGRAFIA,
na Galeria e nos
   carrosseis,
porque e a mesma ideia em todo o lado. */
.painel-foto{
    background: var(--estanho);
    border: 3px solid var(--vidrado-fundo);
    padding: var(--e1);
    clip-path: polygon(
        0 22px, 22px 0,
        calc(100% - 22px) 0, 100% 22px,
        100% calc(100% - 22px), calc(100% - 22px) 100%,
        22px 100%, 0 calc(100% - 22px)
    );
}
.painel-foto > img {
    display: block;
    width: 100%;
    height: auto;
}

/* No telemovel os paineis de fotografia e o video SANGRAM ate as margens da
   coluna (auditoria D11): a goteira da coluna (var(--e3) de cada lado), mais
   a moldura, mais a folga de dentro, deixavam 300 px de fotografia num ecra de
   390. A moldura fica; a goteira e que sai. A primeira versao desta regra
   estava ANTES de .dimensao__painel na folha, e o "margin: 0 auto" de la
   ganhava-lhe em silencio: a captura mostrou a fotografia exatamente na mesma
   largura. Vive aqui, depois da base, por isso. */
@media (max-width: 640px) {
    .video,
    .fecho-foto .painel-foto,
    .galeria-destaque .painel-foto {
        margin-inline: calc(var(--e3) * -1);
    }
}

.video-home { padding-block: var(--seccao); }
.video-home__titulo {
    margin: 0 0 var(--e4);
    text-align: center;
}

/* Em baixo, a praia (--praia) mais --e2: o contador do carrossel acabava 3 px
   dentro da faixa de textura (medido pelo verificar-texturas.py). */
.emocao { position: relative; padding-block: var(--seccao) var(--seccao-larga); }
/* O contador do carrossel sobe --e2 para nao tocar na praia da parede. */
.emocao .carrossel { margin-bottom: var(--e2); }
.emocao__titulo {
    margin: 0 0 var(--e4);
    text-align: center;
}/* -------------------------------------------------------------------------
   TAREFA A3: o ritmo de O Evento e da Galeria.
   ------------------------------------------------------------------------- */

/* A fotografia que fecha cada pagina de leitura. Larga o suficiente para se
   ver, contida o suficiente para nao competir com o texto que a antecede. */
.fecho-foto { padding-block: var(--e6); }
.fecho-foto .painel-foto {
    max-width: 1024px;
    margin: 0 auto;
}

/* Os dois paineis largos da Galeria. O de abertura vive na parede escura e o
   do meio dentro da grelha clara; os dois tem a mesma moldura. */
.galeria-destaque { padding-block: var(--e5); }
.galeria__destaque-meio { margin: var(--e5) 0; }

/* =========================================================================
   O MAR, COM REGRAS [mar-regras] (5 de setembro de 2026).

   O Luis, depois de tres testes: "as texturas tem de ser minimalistas, a
   aplicar em sitios sem textos; tem de haver regras onde se coloca e onde
   nao se coloca, senao fica saturado e ilegivel". As regras (CLAUDE.md, 5):

   DEGRADES  em qualquer campo, sempre com background-color solido por baixo
             (o verificar-pintura.py nao ve degrades) e nunca mais de 30% de
             mistura com a cor vizinha. Sao profundidade, nao textura.
   TEXTURA   so em tres portadores, todos sem texto: a linha de costa da
             fotografia do heroi (.heroi__foto::before/::after), as faixas
             .praia (elementos vazios no fundo dos campos escuros, depois do
             ultimo texto) e o fundo das paredes (.parede::before, na altura
             --praia). Malha de 1,5 px; luz a 10% e sombra a 45%.
   PROVA     ferramentas/verificar-texturas.py: nenhum texto nem imagem toca
             uma zona de textura, e nenhum mask-image vive fora dos
             portadores.
   ========================================================================= */

/* ---- os degrades ----------------------------------------------------------- */
.heroi__chao {
    background-color: var(--vidrado-fundo);
    background-image: linear-gradient(180deg, var(--vidrado-fundo) 0%,
        color-mix(in srgb, var(--vidrado-fundo) 72%, var(--tinta)) 100%);
}
.patrocinio {
    background-color: var(--tinta);
    background-image: linear-gradient(115deg, var(--tinta) 0%,
        color-mix(in srgb, var(--tinta) 70%, var(--vidrado-fundo)) 100%);
}
.numeros__painel {
    background-color: var(--tinta);
    background-image: linear-gradient(295deg, var(--tinta) 0%,
        color-mix(in srgb, var(--tinta) 70%, var(--vidrado-fundo)) 100%);
}
.parede {
    background-image:
        radial-gradient(ellipse 70% 62% at 26% 20%,
            color-mix(in srgb, var(--branco) 20%, transparent), transparent 72%),
        linear-gradient(180deg, transparent 0%,
            color-mix(in srgb, var(--vidrado-fundo) 30%, transparent) 100%);
}
.parede--funda {
    background-image:
        radial-gradient(ellipse 70% 62% at 26% 20%,
            color-mix(in srgb, var(--vidrado-luz) 18%, transparent), transparent 72%),
        linear-gradient(180deg, transparent 0%,
            color-mix(in srgb, var(--tinta) 30%, transparent) 100%);
}
.distancias {
    background-color: var(--vidrado-fundo);
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--vidrado-fundo) 85%, var(--vidrado)) 0%,
        var(--vidrado-fundo) 100%);
}
.duvidas-seccao {
    background-color: var(--cal);
    background-image: linear-gradient(180deg, var(--cal) 0%, var(--estanho) 100%);
}
.rodape {
    background-color: var(--vidrado-fundo);
    background-image: linear-gradient(180deg, var(--vidrado-fundo) 0%,
        color-mix(in srgb, var(--vidrado-fundo) 78%, var(--tinta)) 100%);
}

/* ---- a praia: a faixa de textura, vazia ------------------------------------ */
.praia {
    position: relative;
    height: var(--praia);
    pointer-events: none;
}
.praia--curta { height: var(--praia-curta); }
.praia::before,
.praia::after {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2064'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.5'%3E%3Cpath%20d='M0,0%20C53,-16%20107,-16%20160,0%20S267,16%20320,0'/%3E%3Cpath%20d='M0,32%20C53,16%20107,16%20160,32%20S267,48%20320,32'/%3E%3Cpath%20d='M0,64%20C53,48%20107,48%20160,64%20S267,80%20320,64'/%3E%3C/g%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%2064'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.5'%3E%3Cpath%20d='M0,0%20C53,-16%20107,-16%20160,0%20S267,16%20320,0'/%3E%3Cpath%20d='M0,32%20C53,16%20107,16%20160,32%20S267,48%20320,32'/%3E%3Cpath%20d='M0,64%20C53,48%20107,48%20160,64%20S267,80%20320,64'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 320px 64px;
            mask-size: 320px 64px;
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
}
/* Relevo minimo: a luz um pixel acima, a sombra um pixel abaixo. */
.praia::before {
    background-color: var(--branco);
    opacity: 0.10;
    -webkit-mask-position: 0 -1px;
            mask-position: 0 -1px;
}
.praia::after {
    background-color: var(--tinta);
    opacity: 0.45;
    -webkit-mask-position: 0 1px;
            mask-position: 0 1px;
}
/* A praia do chao fica por baixo da onda que o fecha; o chao ja nao precisa
   da folga que reservava para a onda. */
.heroi__chao { padding-bottom: 0; }
.heroi__chao .praia { margin-top: var(--e2); }
.patrocinio__caixa { padding-bottom: var(--e2); }
.numeros__painel { padding-bottom: 0; }
.numeros__painel .praia { margin-top: var(--e4); }

/* =========================================================================
   INSCRICOES (Task 7, 5 de setembro de 2026) [task7]
   ========================================================================= */

/* ---- a abertura com fotografia: o gesto do heroi nas paginas interiores --- */
.abertura--foto { padding-top: 0; }
.abertura__foto {
    /* width explicito: com aspect-ratio e max-height sem largura, o CSS
       transfere o limite de altura para a largura (56svh x 4/5) e num
       telemovel alto a fotografia ficava a 82% do ecra. Visto pelo Luis a
       5 de setembro de 2026, no telemovel real. */
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 56svh;
    background: var(--vidrado-fundo);
    overflow: clip;
}
.abertura__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;
}
.abertura--foto .abertura__coluna {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--e6) * -1);
}
@media (min-width: 560px) {
    .abertura__foto { aspect-ratio: 16 / 9; max-height: 52svh; }
    .abertura--foto .abertura__coluna { margin-top: calc(var(--e8) * -1); }
}
@media (min-width: 900px) {
    .abertura__foto { aspect-ratio: 21 / 9; }
}

/* ---- o estado: duas caixas do mesmo tamanho ------------------------------- */
.estado { padding-block: var(--seccao) var(--seccao-curta); }
.estado__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}
.estado__caixa {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.estado__etiqueta {
    margin: 0 0 var(--e2);
    color: var(--vidrado-fundo);
}
.estado__titulo {
    margin: 0 0 var(--e2);
    font-size: var(--t-h3);
}
.estado__texto {
    margin: 0;
    font-size: var(--t-pequeno);
    line-height: 1.55;
    color: var(--vidrado-fundo);
}
.estado .fases__caixa { margin-top: var(--e4); }
@media (min-width: 700px) {
    .estado__grelha { grid-template-columns: 1fr 1fr; gap: var(--e4); }
}
.kit-seccao { padding-top: 0; padding-bottom: var(--seccao-curta); }
.kit__pecas-titulo { margin-top: 0; }
.kit-seccao .kit__pecas-titulo { text-align: center; font-size: var(--t-h2); margin-bottom: var(--e4); }

/* ---- os passos em linha, com a fotografia do secretariado ao lado --------- */
.passos--linha { padding-block: var(--seccao); }
.passos--linha .passos__titulo { text-align: center; }
.passos__corpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e4);
    align-items: start;
}
.passos__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}
.passos--linha .passos__lista {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Cada passo: o numero num disco de lima e uma linha a descer ate ao passo
   seguinte. Sem cartao: e uma sequencia, nao tres caixas. */
.passos--linha .passos__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e3);
    padding: 0 0 var(--e4);
    background: transparent;
    color: var(--branco);
    border: 0;
    clip-path: none;
    container-type: normal;
}
.passos--linha .passos__item::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 48px;
    bottom: 0;
    width: 0;
    /* Um fio, nao um fundo: a --borda-suave e uma ficha de separador. */
    border-left: 2px solid var(--borda-suave);
}
.passos--linha .passos__item:last-child { padding-bottom: 0; }
.passos--linha .passos__item:last-child::before { content: none; }
.passos--linha .passos__numero {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    background: var(--lima);
    color: var(--tinta);
    font-size: var(--t-destaque);
}
.passos--linha .passos__item-titulo { margin: var(--e1) 0 var(--e1); color: var(--branco); }
.passos--linha .passos__item-descricao { color: var(--vapor); font-size: var(--t-corpo); max-width: 44ch; }
@media (min-width: 900px) {
    .passos__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e6); align-items: center; }
}

/* =========================================================================
   INFORMACOES em capitulos (5 de setembro de 2026) [task8b]. A lingua da
   home: fotografia de bordo a bordo, painel de tinta a poisar sobre ela,
   cartoes do mesmo tamanho, revelacao ao rolar, praia no fim de cada painel.
   ========================================================================= */

/* O indice em pastilhas, sobre o vidrado fundo, logo a seguir a faixa. */
.infos-indice { padding-block: var(--seccao-curta); }
.infos-indice__caixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
}
.infos-indice__titulo { margin: 0; color: var(--vapor); }
.infos-indice__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.infos-indice__link {
    display: inline-block;
    padding: var(--e1) var(--e2);
    background: var(--estanho);
    color: var(--tinta);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
    transition: background var(--transicao), color var(--transicao);
}
.infos-indice__link:focus-visible,
.infos-indice__link:hover { background: var(--lima); opacity: 1; }

/* O capitulo: a fotografia e o painel a poisar sobre ela. */
.capitulo { position: relative; padding-bottom: var(--seccao-curta); }
.capitulo__foto {
    /* width explicito: com aspect-ratio e max-height sem largura, o CSS
       transfere o limite de altura para a largura (56svh x 4/5) e num
       telemovel alto a fotografia ficava a 82% do ecra. Visto pelo Luis a
       5 de setembro de 2026, no telemovel real. */
    width: 100%;
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 56svh;
    background: var(--vidrado-fundo);
    overflow: clip;
}
.capitulo__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}
/* Uma fotografia vertical com ceu por cima (a 05 em Informacoes): o motivo
   esta na metade de baixo. */
.capitulo__foto--baixo img { object-position: 50% 72%; }
.capitulo__coluna { position: relative; z-index: 1; margin-top: calc(var(--e6) * -1); }
.capitulo__painel {
    position: relative;
    isolation: isolate;
    /* Contentor de medida: o teto em cqi dos titulos mede o painel e nao a
       coluna ("Dez quilometros" passava 3 px a 360, medido). */
    container-type: inline-size;
    background-color: var(--tinta);
    background-image: linear-gradient(295deg, var(--tinta) 0%,
        color-mix(in srgb, var(--tinta) 70%, var(--vidrado-fundo)) 100%);
    color: var(--branco);
    padding: var(--e4) var(--e3) 0;
}
.capitulo__painel > * { position: relative; z-index: 1; }
.capitulo__titulo { margin: 0 0 var(--e4); color: var(--branco); }
.capitulo__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
}
/* --e5 e nao --e4: o estado do carrossel ("Fotografia 1 de 9") entrava 11 px
   na praia (medido pelo verificar-texturas.py em O Evento). */
.capitulo__painel .praia { margin-top: var(--e5); }

/* O assunto: uma cartela de estanho, sempre do mesmo tamanho na linha. O
   bloco de 2027 vai para o fundo, para os quatro cartoes acabarem iguais. */
/* minmax(0, 1fr) e min-width: 0: um 1fr simples e minmax(auto, 1fr) e o
   conteudo minimo do cartao empurrava a grelha 56 px para fora do painel a
   1280 px (medido pela auditoria). */
.assunto {
    min-width: 0;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--e3);
}
/* --t-destaque e nao --t-h3: a 1280 px cada cartao tem uns 200 px de texto e
   "PARTICIPACAO" a 32 px de Archivo Expanded saia do cartao (visto na
   captura a 1440). Os titulos longos levam hifen suave no conteudo. */
.assunto__titulo { margin: 0 0 var(--e1); font-size: var(--t-cartao); line-height: 1.1; }
.assunto__texto { margin: 0 0 var(--e3); font-size: var(--t-pequeno); line-height: 1.5; color: var(--vidrado-fundo); }
.assunto__bloco { padding: var(--e2) 0 0 var(--e2); border-left: 3px solid var(--vidrado); }
.assunto__bloco--2027 { margin-top: var(--e3); padding-top: var(--e2); border-left-color: var(--lima); }
.assunto__bloco--2026 + .assunto__bloco--2027 { margin-top: var(--e3); }
.assunto__rotulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e1) var(--e2);
    margin: 0 0 var(--e1);
    color: var(--vidrado-fundo);
}
.assunto__etiqueta {
    display: inline-block;
    padding: var(--e0) var(--e1);
    background: var(--lima);
    color: var(--tinta);
    font-size: var(--t-micro);
    letter-spacing: 0.08em;
}
.assunto__facto { margin: 0; font-size: var(--t-pequeno); line-height: 1.5; }
.assunto__facto + .assunto__facto { margin-top: var(--e1); }
.assunto__ligacao { margin: var(--e1) 0 0; font-size: var(--t-pequeno); }

@media (min-width: 560px) {
    .capitulo__foto { aspect-ratio: 16 / 9; max-height: 52svh; }
    .capitulo__coluna { margin-top: calc(var(--e8) * -1); }
    .capitulo__painel { padding: var(--e5) var(--e5) 0; }
}
@media (min-width: 700px) {
    .capitulo__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
}
@media (min-width: 900px) {
    .capitulo__foto { aspect-ratio: 21 / 9; }
}
/* Quatro colunas so a partir de 1280: a 1024 cada cartao ficava com uns
   130 px de texto e as ligacoes saiam do cartao (medido pela auditoria). */
@media (min-width: 1280px) {
    .capitulo__grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .capitulo__grelha:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .capitulo__grelha:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A revelacao em escada dos cartoes de cada capitulo. */
@media (prefers-reduced-motion: no-preference) {
    .assunto:nth-child(2).revela { animation-delay: 100ms; }
    .assunto:nth-child(3).revela { animation-delay: 200ms; }
    .assunto:nth-child(4).revela { animation-delay: 300ms; }
}

/* =========================================================================
   GAIA em capitulos (5 de setembro de 2026) [gaia-capitulos]. As etiquetas
   das praias e a grelha dos marcos dentro do painel de capitulo.
   ========================================================================= */
.capitulo__texto {
    max-width: 62ch;
    margin: 0 0 var(--e4);
    color: var(--vapor);
    font-size: var(--t-destaque);
    line-height: 1.4;
}
.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.etiquetas__item {
    padding: var(--e1) var(--e2);
    background: var(--estanho);
    color: var(--tinta);
    font-family: var(--fonte-inscricao);
    font-weight: 600;
    font-size: var(--t-mini);
    letter-spacing: 0.06em;
    clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
}
.assunto__texto--solto { margin-bottom: 0; color: var(--tinta); }
/* Os marcos no painel: o painel legendado ja e uma cartela com fotografia. */
.capitulo__grelha--marcos { grid-template-columns: 1fr; }
@media (min-width: 700px) { .capitulo__grelha--marcos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .capitulo__grelha--marcos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* O EVENTO em capitulos (5 de setembro de 2026) [evento-capitulos]. */
.capitulo__grelha--duas { grid-template-columns: 1fr; }
@media (min-width: 700px) { .capitulo__grelha--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .capitulo__grelha--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.assunto__logo { display: block; align-self: flex-start; width: auto; height: 56px; margin-top: var(--e3); }
.capitulo__momento { margin-top: var(--e5); }
.capitulo__subtitulo { margin: 0 0 var(--e3); color: var(--branco); }
.capitulo__painel .video { margin-top: 0; }

/* PERCURSOS em capitulos (5 de setembro de 2026) [percursos-capitulos]. */
.capitulo__friso { margin: 0 0 var(--e4); }
.capitulo__cta { display: flex; justify-content: center; margin-top: var(--e4); }
/* O friso dentro do painel: de bordo a bordo do painel, sobre o vidrado fundo. */
.capitulo__friso .friso { margin-inline: calc(var(--e3) * -1); }
@media (min-width: 560px) { .capitulo__friso .friso { margin-inline: calc(var(--e5) * -1); } }

/* PARCEIROS em capitulos (5 de setembro de 2026) [parceiros-capitulos]. */
.capitulo__grelha--tres { grid-template-columns: 1fr; }
@media (min-width: 700px) { .capitulo__grelha--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .capitulo__grelha--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Os tres destaques: rotulo, o logotipo numa caixa de estanho (ou de vidrado
   fundo quando o desenho e branco) e o nome. Os tres do mesmo tamanho. */
.destaque-parceiro {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}
.destaque-parceiro__rotulo { margin: 0 0 var(--e2); color: var(--vapor); }
.destaque-parceiro__caixa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e3);
    text-align: center;
    flex: 1;
    min-height: calc(var(--modulo) * 1.6);
    padding: var(--e4);
    background: var(--estanho);
    border: 3px solid var(--vidrado-fundo);
    clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}
.destaque-parceiro--escuro .destaque-parceiro__caixa { background: var(--vidrado-fundo); border-color: var(--estanho); }
.destaque-parceiro__logo { display: block; max-width: 100%; max-height: 96px; width: auto; height: auto; }
.destaque-parceiro__nome { margin: 0; font-size: var(--t-pequeno); color: var(--vidrado-fundo); }
.destaque-parceiro--escuro .destaque-parceiro__nome { color: var(--vapor); }

/* Os grupos dentro do painel de tinta: titulos a branco, mais juntos. */
.capitulo__painel .parceiros-grupo + .parceiros-grupo { margin-top: var(--e4); }
.capitulo__painel .parceiros-grupo__titulo { margin-bottom: var(--e2); color: var(--branco); font-size: var(--t-destaque); }

/* Os seis numeros: dois, tres e seis por linha. */
.numeros__grelha--seis { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .numeros__grelha--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Tres por linha em todas as larguras a partir de 700: seis numeros numa linha
   a 1440 colidiam uns com os outros (visto na captura). */
.numeros__grelha--seis .numeros__valor { font-size: var(--t-h3); }
.capitulo__painel .numeros__fonte { margin-top: var(--e3); }

/* As paginas de servico em capitulos (5 de setembro de 2026) [servico-capitulos]. */
.capitulo__grelha--uma { grid-template-columns: minmax(0, 1fr); max-width: 68ch; }
.capitulo__painel .kit__pecas-titulo { color: var(--branco); margin-top: 0; }

/* -------------------------------------------------------------------------
   ICONES [icones-06-09]. Phosphor Icons (MIT), inline por icone() em app/config.php.
   Um so gesto em todo o site: o SELO, um quadrado de vapor com os cantos
   cortados como os azulejos, e o icone em vidrado dentro dele. Vive na
   cabeca das cartelas de assunto (Informacoes) e nas cartelas de estado
   (Inscricoes); nas pastilhas do indice o icone vai so, a 16 px, antes do
   texto. Nunca solto no meio de um paragrafo, nunca a substituir uma
   palavra: e decoracao de um titulo que ja diz tudo (aria-hidden).
   ------------------------------------------------------------------------- */
.icone { display: block; flex: none; }
.assunto__cabeca {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e2);
}
.assunto__cabeca .assunto__titulo {
    margin: 0;
    /* Com o selo ao lado o titulo tem menos 60 px de largura: a 1024
       "KIT DE PARTICIPACAO" partia com hifen. Um ponto abaixo do --t-cartao
       (tecto 1.25rem em vez de 1.5rem); o selo compensa o peso. */
    font-size: var(--t-cartao-selo);
}
.assunto__icone,
.estado__icone {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--vapor);
    color: var(--vidrado-fundo);
    clip-path: polygon(0 7px, 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px));
}
.estado__icone { margin: 0 0 var(--e2); }
.infos-indice__link {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
}
.infos-indice__link .icone { margin-top: -1px; }

/* -------------------------------------------------------------------------
   O FOCO DO RECORTE [foco-06-09]. Uma fotografia de bordo a bordo e sempre cortada
   ("object-fit: cover"), e o recorte por omissao (50% 28%) serve a maioria
   mas nao serve todas: numa o motivo esta no fundo, noutra a direita. O
   ferramentas/verificar-enquadramento.py mede isto e falha quando uma cara
   de primeiro plano e atravessada pela margem.

   Quatro classes chegam. Nao ha valores livres de proposito: um numero
   escrito a mao por fotografia e o principio de um site com trinta recortes
   diferentes e nenhuma regra. Em linha (style="...") nunca: a CSP deste site
   tem "style-src 'self'" e o browser bloquearia.
   ------------------------------------------------------------------------- */
.abertura__foto img.foco--topo,
.capitulo__foto img.foco--topo   { object-position: 50% 12%; }
.abertura__foto img.foco--centro,
.capitulo__foto img.foco--centro { object-position: 50% 50%; }
.abertura__foto img.foco--baixo,
.capitulo__foto img.foco--baixo  { object-position: 50% 72%; }
.abertura__foto img.foco--fundo,
.capitulo__foto img.foco--fundo  { object-position: 50% 88%; }

/* -------------------------------------------------------------------------
   OS PARCEIROS NA HOME [parceiros-na-home-06-09]. Reaproveita a parede de
   azulejos da pagina de parceiros; so o espacamento da seccao e o fecho sao
   proprios. Nunca um carrossel: quem paga tem de estar a vista.
   ------------------------------------------------------------------------- */
.parceiros-home { padding-block: var(--seccao); }
.parceiros-home__titulo { margin: 0 0 var(--e2); }
.parceiros-home__texto {
    max-width: var(--largura-leitura);
    margin: 0 0 var(--e5);
}
.parceiros-home__parede .parceiros-grupo + .parceiros-grupo { margin-top: var(--e5); }
.parceiros-home__fecho { margin-top: var(--e5); }

/* -------------------------------------------------------------------------
   O HEROI NO COMPUTADOR [heroi-desktop-06-09]

   O QUE ESTAVA MAL, medido e nao achado. Ate 6 de setembro de 2026 a
   fotografia do heroi era uma FAIXA no topo, com altura fixa
   (clamp(400px, 52svh, 640px)) e largura do ecra inteiro. Num ecra de
   1826 px isso da uma caixa de 1826x520: o "cover" escala pela largura e
   **corta 57% da altura da fotografia**. O arco da partida, que e o assunto,
   ficava decapitado. No telemovel via-se 100% da altura. O Luis apanhou os
   dois de uma vez: "essa foto do hero tem de estar mais visivel como no
   mobile".

   E havia um segundo defeito com a mesma causa: a faixa acabava, comecava um
   campo de cor, e a cartela (760 px, centrada) deixava DUAS ASAS VAZIAS de
   cor a esquerda e a direita. O Luis circulou-as: "esses espacos em verde
   deixam um grande vazio".

   A CORRECAO. A fotografia deixa de ser uma faixa e passa a ser o FUNDO da
   seccao inteira: posicionada em inset:0, com a altura da secao a mandar. A
   cartela poisa sobre ela, e o que ha a esquerda e a direita da cartela passa
   a ser fotografia em vez de vazio. Duas coisas resolvidas com uma.

   PORQUE ISTO NAO VIOLA A REGRA DO CONTRASTE. A regra do projeto e que texto
   nunca vai sobre fotografia com veu, porque o contraste deixa de ser
   medivel. Aqui o texto continua sobre a CARTELA, que e um campo opaco de
   ficha: o que esta sobre a fotografia e a cartela, nao o texto. O
   verificar-pintura.py mede isto na mesma e tem de continuar verde.
   ------------------------------------------------------------------------- */
@media (min-width: 960px) {
    /* AS TRÊS COMPOSIÇÕES DO HERÓI EM COMPUTADOR [variantes-heroi-06-09].

       O Luís pediu três variações para escolher e eu entreguei-lhe uma
       decisão minha. Isto repõe a escolha. Troca-se com ?heroi=a, b ou c.
       O conteúdo é o mesmo nas três: a mesma fotografia, o mesmo texto, os
       mesmos dois botões. Só a arrumação muda.

       O QUE AS TRÊS TÊM EM COMUM, e que a versão anterior não tinha:
       - A fotografia sangra de bordo a bordo. Nunca sobra faixa de cor lisa.
       - AS MEDIDAS SÃO PROPORCIONAIS, não fixas. A versão anterior travava o
         painel em 30rem: no portátil ocupava um terço do ecrã e no monitor
         externo ficava uma tira estreita ao lado de uma fotografia enorme.
         Era isto que o Luís via mudar de máquina para máquina. Agora tudo o
         que manda na composição está em vw ou em clamp, e o desenho é o mesmo
         em qualquer largura.
       - A LINHA DE COSTA PASSA À FRENTE DO PAINEL, não por trás. A onda é a
         assinatura da marca; cortá-la a meio com uma placa era desperdiçá-la.
       - O painel nunca fica sobre o arco nem sobre o pelotão, que é o assunto
         da fotografia e o que a prova tem para vender. */

    /* A linha de costa deixa de morrer contra o painel: sobe acima dele e
       atravessa a composição inteira. */
    .heroi__foto::before,
    .heroi__foto::after { z-index: 3; }

    /* ---------------------------------------------------------------------
       A. CARTELA DE VIDRO ENCOSTADA À ESQUERDA
       A fotografia ocupa a secção inteira e o painel poisa em cima dela,
       encostado ao bordo esquerdo, em vidro tingido: vê-se a fotografia
       através dele, que foi o que o Luís pediu ("encostas na totalidade à
       esquerda e cria uma percentagem de transparência").
       O tingido é forte de propósito. O texto tem de continuar a medir-se
       contra um campo e não contra uma fotografia, que é a regra do projeto,
       e é o verificar-pintura.py que o confirma a cada corrida.
       --------------------------------------------------------------------- */
    .heroi--a { position: relative; min-height: min(88svh, 940px); display: grid; }
    .heroi--a .heroi__foto {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        /* height: auto e o que anula a altura fixa herdada do bloco dos
           560 px; sem isto o inset nao ganha e sobra campo liso em baixo. */
        height: auto;
        max-height: none;
        width: 100%;
    }
    .heroi--a .heroi__foto img { object-position: 58% 42%; }
    .heroi--a .heroi__coluna {
        position: relative;
        z-index: 2;
        width: clamp(24rem, 32vw, 34rem);
        max-width: none;
        margin: 0;
        padding: 0;
        align-self: stretch;
        display: grid;
    }
    .heroi--a .heroi__painel {
        max-width: none;
        margin: 0;
        height: 100%;
        display: grid;
        align-content: center;
        padding: var(--e6) var(--e5);
        text-align: left;
        clip-path: none;
        border: 0;
        border-right: 1px solid var(--borda-forte);
        box-shadow: none;
        background: var(--cal-vidro);
        -webkit-backdrop-filter: blur(14px) saturate(115%);
                backdrop-filter: blur(14px) saturate(115%);
    }

    /* ---------------------------------------------------------------------
       B. FOTOGRAFIA INTEIRA EM CIMA, FAIXA DE FACTOS POR BAIXO
       A fotografia fica limpa, sem nada por cima, e o painel é uma faixa a
       toda a largura por baixo dela, com o conteúdo em duas colunas. Não há
       asas vazias porque a faixa é tão larga como o ecrã e as colunas
       ocupam-na toda.
       --------------------------------------------------------------------- */
    .heroi--b { display: grid; grid-template-rows: auto auto; }
    .heroi--b .heroi__foto {
        aspect-ratio: auto;
        height: clamp(22rem, 52svh, 34rem);
        max-height: none;
    }
    .heroi--b .heroi__foto img { object-position: 50% 52%; }
    .heroi--b .heroi__coluna {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        /* A faixa e um campo de CAL a toda a largura. Na primeira versao ficou
           transparente sobre o vidrado escuro da seccao, e o texto de tinta
           desapareceu: a marca, o lema e os rotulos da ficha eram escuro sobre
           escuro. O campo de cal repoe os mesmos pares de cor ja medidos que a
           cartela usa em todo o site. */
        background: var(--cal);
    }
    .heroi--b .heroi__painel {
        max-width: var(--largura-max);
        margin-inline: auto;
        padding: var(--e5) var(--e3);
        text-align: left;
        clip-path: none;
        border: 0;
        box-shadow: none;
        background: transparent;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--e4) var(--e5);
        align-items: center;
    }
    .heroi--b .heroi__cabeca { grid-column: 1; }
    .heroi--b .heroi__factos { grid-column: 2; }

    /* ---------------------------------------------------------------------
       C. BARRA DE ASSINATURA EM BAIXO
       A fotografia ocupa a secção inteira e os factos vivem numa barra a toda
       a largura, encostada ao fundo, como o painel de tempos de um pórtico de
       chegada. Fica abaixo do arco e do pelotão: não tapa nada do que
       interessa, e a fotografia respira em cima.
       --------------------------------------------------------------------- */
    .heroi--c {
        position: relative;
        min-height: min(88svh, 940px);
        display: grid;
        align-items: end;
    }
    .heroi--c .heroi__foto {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        /* height: auto e o que anula a altura fixa herdada do bloco dos
           560 px; sem isto o inset nao ganha e sobra campo liso em baixo. */
        height: auto;
        max-height: none;
        width: 100%;
    }
    .heroi--c .heroi__foto img { object-position: 50% 34%; }
    .heroi--c .heroi__coluna {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .heroi--c .heroi__painel {
        max-width: none;
        margin: 0;
        padding: var(--e4) var(--e5);
        text-align: left;
        clip-path: none;
        border: 0;
        box-shadow: none;
        /* Campo escuro, como o painel de tempos de um portico. E o que separa
           esta composicao das outras duas, que sao ambas de cal. */
        background: var(--vidrado-fundo);
        color: var(--branco);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--e3) var(--e5);
        align-items: center;
    }
    .heroi--c .heroi__cabeca { grid-column: 1; }
    .heroi--c .heroi__factos { grid-column: 2; }
    /* Sobre campo escuro, os pares invertem-se: e o mesmo que o rodape ja faz. */
    .heroi--c .heroi__lema { color: var(--branco); }
    .heroi--c .heroi__argumento { color: var(--vapor); }
    .heroi--c .heroi__ficha { border-top: 0; }
    .heroi--c .heroi__celula dt { color: var(--lima); }
    .heroi--c .heroi__celula dd { color: var(--branco); }
    .heroi--c .heroi__celula + .heroi__celula { border-left-color: var(--borda-suave); }
    /* O botao secundario e tinta sobre transparente: sobre campo escuro
       desaparecia. Sobre a barra, e contorno branco. */
    .heroi--c .heroi__accoes .botao--secundario {
        color: var(--branco);
        border-color: var(--branco);
    }

    /* ---------------------------------------------------------------------
       O que é igual nas três: o texto alinha à esquerda, a marca acompanha a
       largura do ecrã e os dois botões ficam lado a lado enquanto couberem.
       --------------------------------------------------------------------- */
    .heroi .heroi__marca,
    .heroi .heroi__lema,
    .heroi .heroi__argumento { margin-inline: 0; }
    .heroi .heroi__marca { width: clamp(200px, 18vw, 300px); }
    .heroi .heroi__ficha { justify-content: flex-start; }
    .heroi .heroi__celula:first-child { padding-left: 0; }
    .heroi .heroi__accoes { justify-content: flex-start; flex-wrap: wrap; }

    /* Na A o painel é estreito: a ficha passa a duas colunas e os botões
       empilham, senão o segundo transborda. */
    .heroi--a .heroi__ficha {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--e2) 0;
    }
    .heroi--a .heroi__celula:last-child {
        grid-column: 1 / -1;
        padding-left: 0;
        padding-top: var(--e2);
        border-left: 0;
        border-top: 1px solid var(--borda-forte);
    }
    .heroi--a .heroi__accoes { flex-direction: column; align-items: stretch; }
    .heroi--a .heroi__accoes .botao { justify-content: center; }
}

/* -------------------------------------------------------------------------
   ALVOS DE TOQUE [alvos-de-toque-06-09]. Medidos a 390 px no site publicado, a 6 de
   setembro de 2026. A regra e 44 x 44 px; o que se mede e a caixa que aceita
   o toque, nao o tamanho do desenho. Nenhuma destas regras muda o aspecto:
   so cresce a area, por altura minima ou por espaco interior.
   ------------------------------------------------------------------------- */
@media (max-width: 959px) {
    /* 36,8 px de altura. E o CTA mais importante do site. */
    .cabecalho .botao--primario { min-height: 44px; }
    /* 36,8 px. */
    .infos-indice__link { min-height: 44px; display: inline-flex; align-items: center; }
    /* 32,5 px, e e a area que abre cada pergunta. */
    .duvidas__pergunta { min-height: 44px; }
    /* 17 a 26 px. Sao texto em linha, onde a norma admite excecao, mas uma
       lista de ligacoes empilhadas beneficia de folga entre elas. */
    .rodape__legal a,
    .rodape__contactos a,
    .rodape__redes a { padding-block: var(--e1); }
    .rodape__legal ul { gap: var(--e2); }
    .rodape__creditos a { padding-block: var(--e0); }
}