/* =========================================================================
   Corrida do Dragão 2026 — um só ficheiro de CSS para todo o site
   =========================================================================

   Nenhum valor deste ficheiro foi inventado. Cada um vem de:
   - auditoria/espelho/medido/00-LEITURA.md          grelha, escala, cores
   - auditoria/espelho/medido/cabecalho-e-rodape.md  cabeçalho e rodapé
   - auditoria/espelho/00-KIT-GLOBAL.md              kit do Elementor
   O que não vem de lá está justificado em auditoria/ACHADOS.md.

   Pontos de quebra reais do kit: viewport_md = 768 e viewport_lg = 1025.
   Ou seja telemóvel até 767, tablet de 768 a 1024, computador a partir de 1025.

   Índice
    1. Fontes
    2. Variáveis
    3. Base
    4. Grelha
    5. Cabeçalho
    6. Menu de telemóvel
    7. Botões
    8. Rodapé
    9. Consentimento
   10. Página 404
   11. Página de teste da fase 1
   12. Blocos de texto que se repetem   ─┐
   13. Herói                             │
   14. Marquee                           │
   15. Contador                          │
   16. Secções de duas colunas           │
   17. Carrossel                         ├─ fase 2, a homepage
   18. Galeria                           │
   19. T-shirt                           │
   20. Vídeo                             │
   21. Parceiros                         │
   22. Contacto e formulário             │
   23. Chamada final                    ─┘
   24. Tablet, de 768 a 1024 px
   ========================================================================= */


/* 1. Fontes ===============================================================
   Alojadas por nós, achado A03: o Google Fonts era um pedido a terceiros
   antes do consentimento. Sem itálicos, subconjunto latino.

   Fase 17, rebranding 2026: o guia de marca (p. 11) manda Poppins Regular,
   Medium e Bold em todo o site. Race Sport, Source Sans Pro e Montserrat
   saíram; os woff2 antigos estão arquivados fora de publico/. Os achados
   G23 e G24 morreram com elas. Race Sport passou a Poppins 700; Source Sans
   Pro manteve os pesos (600 fica 600, decisão do Luís a 11/08/2026).        */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fontes/poppins-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fontes/poppins-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fontes/poppins-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fontes/poppins-700.woff2') format('woff2');
}


/* 2. Variáveis ============================================================ */

:root {
    /* Cores do guia de marca 2026 (p. 9), aplicadas na fase 17. Mapa
       aprovado pelo Luís a 11/08/2026 em docs/fase17-branding-analise.md.
       Fase 17B, ordem do Luís nessa noite: o Marine Blue é o azul dominante
       de toda a comunicação, e o site segue-o. O Porto Blue desce a cor de
       realce tipográfico sobre fundos claros, senão os realces desapareciam
       dentro do texto, que já é Marine. */
    --azul: #00072D;
    /* Marine Blue, 296 C. O azul dominante: cabeçalho, herói, cartões, botões */
    --azul-realce: #00428C;
    /* Porto Blue, 301 C. Realce sobre claros: spans de H2, contador, âncoras, ligações */
    --azul-borda: #00A9FF;
    /* o azul claro do «2026» do logótipo, amostrado do PNG do kit */
    --preto: #00072D;
    /* Marine Blue, 296 C. Texto e fundo do rodapé */
    --preto-percursos: #00072D;
    /* texto das páginas de percurso, unificado no Marine Blue */
    --preto-h2-home: #00072D;
    /* H2 «Entra em contacto connosco», unificado no Marine Blue */
    --branco: #FFFFFF;
    --cinza-claro: #F1F1F1;
    /* Off White, 663 C. Secções alternadas da homepage */
    --cinza-informacoes: #F1F1F1;
    /* secções alternadas das Informações, agora igual */
    --cinza-email: #00072D;
    /* email da secção de contacto e círculo das redes */
    --cinza-rede: #69727D;
    /* nome da rede social. Fica: o Grey #A7A8AB do guia daria 2,4:1 de contraste */
    --cinza-menu: #00072D;
    /* itens do menu de telemóvel */
    --accent: #00428C;
    /* setas das âncoras. O accent laranja do kit velho morreu no guia 2026 */

    /* Grelha */
    --conteudo: 1305px;
    --padding-lateral: 60px;
    --padding-vertical: 120px;
    --gap: 24px;
    /* o valor por defeito do Elementor, por todo o lado */

    /* Escala de tamanhos, do maior para o menor */
    --t-marquee: 60px;
    --t-h1-heroi: 54px;
    --t-h2: 48px;
    --t-h2-cartao: 32px;
    --t-corpo-grande: 24px;
    --t-corpo-destaque: 20px;
    --t-corpo: 18px;
    --t-pequeno: 16px;
    --t-etiqueta: 14px;
    --t-mini: 12px;

    /* Fase 30: a coluna de leitura. 670 px de Poppins a 18 px dão 68 caracteres
       por linha, medidos pelo mesmo método do ferramentas/fase30-sobre/medir.js
       (largura média do caractere na fonte real, e não uma média assumida).
       O intervalo legível é 45 a 75, e 68 deixa folga dos dois lados.

       Só a /sobre/ a usa. A homepage (120 caracteres) e a /informacoes/ (92)
       têm o mesmo problema e não são desta fase: a ficha fica aqui à espera
       delas, e não se aplica a nada por sua conta. */
    --medida-leitura: 670px;

    /* Cabeçalho */
    --cabecalho-altura: 95px;

    /* Botões, fase 26. Três degraus, uma forma, um espaçamento.
       A altura passa a ser a decisão e o espaçamento a consequência. Antes era
       ao contrário: ninguém tinha escrito 40, 41, 54 nem 67 px, eles saíram
       da soma de padding, entrelinha e borda, com parcelas diferentes em cada
       botão. É esta inversão que faz o sistema.

       Os 44 px de alvo tátil são a WCAG 2.5.5 (nível AAA) e a norma da Apple,
       não a 2.5.8, que é AA e pede 24. O degrau médio de 48 cobre também os
       48 dp da Google. */
    --botao-alt-g: 56px;
    /* CTA principal: «Inscreve-te já», no cabeçalho, no herói e no corpo */
    --botao-alt-m: 48px;
    /* ações secundárias, botão do formulário, hambúrguer */
    --botao-alt-p: 44px;
    /* controlos densos: bandeiras de idioma e botões do banner */
    --botao-raio: 999px;
    /* pílula verdadeira em qualquer altura. Mata os 60 e os 61 px */
    --botao-raio-icone: 12px;
    /* o único raio dos controlos só de ícone */
    --botao-padding-x: 24px;
    /* valor único. Substitui os 32 do computador e os 12,8 do telemóvel.
       Não são 32 por causa do transbordo: ver a nota no .botao */
    --botao-alvo-min: 44px;
    /* o piso que ferramentas/fase26-botoes/auditar.js verifica */

    --botao-padding-x-p: 13px;
    /* Fase 24. O espaçamento horizontal dos controlos densos, que é o seletor
       de línguas. Não são os 24 px da ficha grande: com eles o botão media
       84 px (13+20+6+10+13 dá 62; 24+20+6+10+24 dá 84) e um seletor de 84 px
       só fecha o cabeçalho espanhol numa linha a partir dos 1420 px, o que
       partia o ponto de rutura de 1400 decidido na fase 23. Medido a
       14/08/2026, tabela no spec da fase 24. */
}

@media (max-width: 767px) {
    :root {
        --padding-lateral: 20px;
        --padding-vertical: 40px;
        --gap: 15px;

        --t-h1-heroi: 40px;
        --t-h2: 32px;
        --t-h2-cartao: 25px;
        --t-corpo-destaque: 18px;

        --cabecalho-altura: 148px;
    }
}


/* 3. Base ================================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    /* Corpo do kit: Poppins 18 px sobre branco. Desde a fase 17 a família é
       Poppins em todo o site, como manda o guia de marca 2026. */
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    line-height: 1.5;
    /* 18 / 27, medido */
    color: var(--preto);
    background: var(--branco);
    overscroll-behavior: none;
    /* body_overscroll_behavior do kit */
}

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

img {
    height: auto;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 400;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
}

/* Texto que só os leitores de ecrã ouvem. É o que o Elementor chama
   elementor-screen-only, e onde vivem os nomes das redes sociais. */
.so-para-leitores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--azul-borda);
    outline-offset: 2px;
}

/* A ligação de salto: escondida até receber o foco pelo teclado, como no site
   atual. Encontrada na comparação da fase 2. */
.salto-conteudo {
    position: absolute;
    left: -9999px;
    z-index: 100001;
    padding: 12px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    color: var(--azul-realce);
    background: var(--branco);
    text-decoration: none;
}

.salto-conteudo:focus {
    left: 0;
    top: 0;
}

@media (prefers-reduced-motion: reduce) {

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


/* 4. Grelha ===============================================================
   Moldura 1425 a 1440 px, conteúdo 1305 px, 60 px de padding lateral que passa
   a 20 no telemóvel, e 120 px de padding vertical que passa a 40.            */

/* O site atual reparte o espaçamento por dois contentores: o de fora leva o
   lateral e o de dentro leva o vertical. É por isso que a 768 px o padding
   lateral passa a 25 e o vertical não muda. Reproduz-se igual. */
.seccao {
    padding-inline: var(--padding-lateral);
}

.conteudo {
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;
    padding-block: var(--padding-vertical);
}

.seccao--cinza {
    background: var(--cinza-claro);
}

@media (min-width: 768px) and (max-width: 1024px) {
    .seccao {
        padding-inline: 25px;
    }
}

/* Escondido nas três larguras, como no site atual. Não é erro: é conteúdo que
   está escrito e desligado. Achados G12 (Embaixadores) e G17. */
.escondido-sempre {
    display: none;
}


/* 5. Cabeçalho ============================================================
   Fundo #00428C (Porto Blue), padding 10px 60px, 95 px de altura, conteúdo 1305 px.
   O Elementor imprime duas cópias, uma fixa e outra a reservar o espaço.
   Aqui é uma só, com position: sticky.                                       */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--azul);
    padding: 10px var(--padding-lateral);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
}

/* Os saltos de ancora aterravam com o titulo debaixo do cabecalho fixo
   (DF10 da fase 9). */
main [id] {
    scroll-margin-top: 120px;
}

/* Fase 11, pedido do Luís: fixo em todas as larguras, mas dinâmico. Ao
   rolar, o site.js põe .cabecalho--compacto: no telemóvel a fila branca do
   CTA recolhe e fica só a barra azul de ~75 px; no computador o padding
   encolhe e a sombra reforça. Resolve também o logótipo a descer sem o
   header, que só acontecia com o cabeçalho estático. */
.cabecalho {
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.cabecalho--compacto {
    padding-block: 5px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
    main [id] {
        scroll-margin-top: 90px;
    }

    .cabecalho__acoes {
        max-height: 90px;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.25s ease;
    }

    /* FASE 31, 15/08/2026 (achado T2): esta regra estava ao contrário, e era
       ela que fazia os dois botões de inscrição que o Luís viu.

       Como era: a barra via-se no topo e **desaparecia ao rolar**. No topo da
       homepage o herói já tem o seu botão, e por isso ficavam dois iguais a
       394 px um do outro; a partir dos 600 px de rolagem não havia botão
       nenhum à vista em quase 9800 px de página.

       Como fica: no topo da homepage a barra está escondida, porque o herói
       trata do assunto, e **aparece ao rolar**, que é para o que serve uma
       barra fixa. Nas outras páginas, que não têm botão no herói, continua a
       ver-se desde cima.

       A exceção: enquanto o banner de cookies estiver de pé, ele tapa o herói,
       e aí a barra volta ao topo mesmo na homepage. É a garantia que a fase 27
       foi buscar, e não se perde. A marca vem do PHP, no <body>, para a decisão
       já estar tomada quando a página pinta.

       min-height 0 porque a regra do cabeçalho móvel põe min-height 94px, que
       ganharia ao max-height. */
    .pagina--home:not(.cookies-por-escolher) .cabecalho:not(.cabecalho--compacto) .cabecalho__acoes {
        max-height: 0;
        min-height: 0;
        opacity: 0;
    }

    /* FASE 31, segunda passagem, 15/08/2026: **a barra de inscrição desce para o
       fundo do ecrã.** Pedido do Luís depois de a ver ao vivo: colada ao
       cabeçalho compacto empilhava 114 px de mobília no topo, cortava o contador
       ao meio, e punha um botão de conversão dentro de um sítio que é para
       marca, língua e menu.

       Em baixo é onde está o polegar, que num telemóvel é a zona mais fácil de
       alcançar. E o cabeçalho volta a ser cabeçalho.

       Continua a aparecer pela mesma regra de antes: só quando o cabeçalho
       compacta, ou seja quando o botão do herói já saiu do ecrã. */
    .cabecalho--compacto .cabecalho__acoes {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Abaixo do banner de cookies (1000) e do painel do menu (99999). Se
           dois quiserem o fundo do ecrã, quem manda é o consentimento. */
        z-index: 900;
        max-height: none;
        padding: 8px var(--padding-lateral);
        /* A barra de gestos dos telemóveis sem botão físico. Onde não existe,
           o valor é zero e não se nota. */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        background: var(--azul);
        box-shadow: 0 -4px 20px rgba(0, 7, 45, 0.25);
    }

    /* Com o menu aberto, o ecrã é do menu. */
    .menu-aberto .cabecalho--compacto .cabecalho__acoes {
        display: none;
    }

    /* O banner de cookies também mora no fundo, e não podem chocar: enquanto
       ele estiver de pé, a barra não entra. O visitante escolhe primeiro. */
    .cookies-por-escolher .cabecalho--compacto .cabecalho__acoes {
        display: none;
    }

    /* Compacto sem cortes (fase 12): a margem de -31 px herdada do site
       atual (G26) cortava o logotipo quando a fila do CTA recolhia. No
       estado compacto anula-se a margem e o logotipo encolhe para caber
       inteiro numa barra de ~63 px. */
    .cabecalho--compacto .cabecalho__interior {
        margin-bottom: 0;
        padding-top: 6px;
        row-gap: 0;
    }

    .cabecalho__logo img {
        transition: width 0.25s ease, height 0.25s ease;
    }

    .cabecalho--compacto .cabecalho__logo img {
        width: 118px;
        height: 45px;
    }

    /* Toque imediato no menu e no seletor de línguas: sem atraso de duplo
       toque. O botão do seletor traz o seu na própria regra, fase 24. */
    .menu-botao,
    .menu-telemovel__ligacao,
    .idiomas__ligacao {
        touch-action: manipulation;
    }

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

@media (prefers-reduced-motion: reduce) {

    .cabecalho,
    .cabecalho__acoes {
        transition: none;
    }
}

.cabecalho__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;
}

.cabecalho__marca {
    display: flex;
    align-items: center;
}

.cabecalho__logo {
    display: block;
    line-height: 0;
}

.cabecalho__logo img {
    width: 197px;
    height: 75px;
    object-fit: contain;
}

/* Fase 23. O conjunto FC Porto + Fundação FC Porto ao lado do logótipo da
   Corrida. Abaixo do ponto de rutura o cabeçalho fica exatamente como estava,
   sem terceiro elemento a apertar a barra.

   Três coisas medidas mandam nos números daqui, e nenhuma se adivinha a olho.

   Primeira: o SVG tem o logótipo centrado num viewBox de 340,57 × 207,29 muito
   maior do que ele, com zona de proteção à volta. O `img` renderiza a caixa
   toda, não a tinta. A 60 px de caixa o elemento ocupa 99 px de largura e o
   logótipo que se vê fica com 77 × 31 px.

   O separador vertical de 1 px que o spec pedia saiu por decisão do Luís a
   13/08, depois de ver a captura: sem ele fica mais limpo, e o SVG oficial já
   traz um risco entre o FC Porto e a Fundação.

   Segunda: a caixa não pode crescer mais. O menu espanhol é o mais comprido
   das três línguas e o cabeçalho só dispõe de 1305 px de conteúdo, mesmo num
   monitor de 1920. Com 75 px de caixa o espanhol passava para segunda linha a
   1440 e a 1920. Com 60 px sobram 30 px de folga em espanhol, 93 em português
   e 165 em inglês.

   Terceira, e é a que muda o spec: o ponto de rutura são 1400 px e não os 1024
   da tabela do spec. Medida a altura do cabeçalho de 1025 a 1920 px, com e sem
   o conjunto, o cabeçalho já parte em duas linhas sozinho entre os 1025 e os
   1200. Acrescentar o conjunto empurrava esse limite para cima e partia o
   cabeçalho onde ele estava inteiro: a 1280 px em português, a 1280 e 1366 em
   espanhol (e 1366 × 768 é das resoluções de portátil mais usadas), e a 1025
   em espanhol chegava a criar uma terceira linha, com 187 px de cabeçalho.
   Encolher o logótipo até caber exigia 22 px de altura de tinta, ilegível.
   A 1400 px cabe numa linha só nas três línguas. Decisão levada ao Luís a
   13/08 com a tabela das medições. Tudo em provas/fase23-heroi-cabecalho.md. */
.cabecalho__coorganizacao {
    display: none;
}

@media (min-width: 1400px) {
    .cabecalho__coorganizacao {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: 12px;
    }

    /* Fase 29 (A2): o desenho entra por fundo e não por <img>, porque uma
       imagem escondida por `display: none` é descarregada na mesma. Declarado
       aqui dentro, só é pedido a partir dos 1400 px, que é onde se vê. O
       `aspect-ratio` é o do viewBox (340,57 × 207,29) e mantém os 99 × 60 px
       medidos na fase 23, sem salto de layout. */
    .cabecalho__fcporto {
        display: block;
        flex: 0 0 auto;
        height: 60px;
        aspect-ratio: 340.57 / 207.29;
        /* Fase 29 (C1): este fica no ficheiro solto, e **não** vai à pilha dos
           parceiros de propósito. O cabeçalho está em todas as páginas, e a
           pilha são 256 KB: numa página sem secção de parceiros seria trocar
           64 KB por 256. Na homepage, onde a pilha vem à mesma, custa uma
           segunda cópia deste desenho, e é o preço de não penalizar as outras
           oito páginas. */
        background-image: url("/wp-content/uploads/2026/07/CORRIDA_DO_DRAGAO_SVG_BLUE_FCPORTO_FCPORTOFOUNDATION-1.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        filter: brightness(0) invert(1);
    }
}

.cabecalho__navegacao {
    display: flex;
    align-items: center;
}

.cabecalho__acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Menu do computador. Poppins 16 px peso 600, espaçamento de letra
   1 px, padding 13px 5px, tudo branco, incluindo o item da página atual. */
.menu__lista {
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu__ligacao {
    display: block;
    padding: 13px 5px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 1px;
    color: var(--branco);
    text-decoration: none;
}

.menu__ligacao:hover {
    color: var(--azul-borda);
}

/* O item da página atual não muda de aspeto nenhum no computador. */
.menu__ligacao--atual {
    color: var(--branco);
}

/* Seletor de línguas, fase 24.

   Até à fase 23 eram duas bandeiras soltas, com a imagem a 20 x 30 px. A fase
   26 pôs-lhes um alvo de 44 px e deixou escrito que o desenho era desta fase.

   Três problemas morrem aqui, e nenhum deles era o alvo tátil: o visitante não
   sabia em que língua estava, uma bandeira representa um país e não uma língua
   (a espanhola serve vinte países), e as duas bandeiras custavam 88 px de uma
   barra que não os tem. Com 62 px, o cabeçalho espanhol volta a fechar numa
   linha a 1400 px, que é o ponto de rutura do conjunto FC Porto da fase 23.

   Nenhuma medida aqui é escrita à mão: saem todas das fichas de :root. */
.cabecalho__idiomas {
    display: flex;
    align-items: center;
}

.idiomas {
    position: relative;
}

/* O botão fechado. O list-style e o ::-webkit-details-marker matam o
   triângulo que o browser põe sozinho no <summary>. */
.idiomas__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--botao-alvo-min);
    min-height: var(--botao-alt-p);
    padding-inline: var(--botao-padding-x-p);
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 600;
    line-height: 1.2;
    color: var(--branco);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--botao-raio);
    cursor: pointer;
    list-style: none;
    user-select: none;
    touch-action: manipulation;
}

.idiomas__botao::-webkit-details-marker {
    display: none;
}

.idiomas__botao:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* O anel de foco da fase 26, separado do hover de propósito: quem navega por
   teclado recebe anel e não uma troca de cor que pode não notar. */
.idiomas__botao:focus-visible {
    outline: 3px solid var(--azul-borda);
    outline-offset: 2px;
}

.idiomas__seta {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.idiomas[open] .idiomas__seta {
    transform: rotate(180deg);
}

/* O painel. Flutua por cima da página em todas as larguras menos entre os 768
   e os 1024, onde o cabeçalho o cortaria: ver a exceção mais abaixo. */
.idiomas__painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100001;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--branco);
    border-radius: var(--botao-raio-icone);
    box-shadow: 0 12px 32px rgba(0, 7, 45, 0.28);
}

.idiomas__item {
    display: block;
}

/* A linha da lista e a da língua atual partilham a mesma caixa: 44 px de
   altura, que é o degrau P do sistema, e o alvo tátil vem de graça. */
.idiomas__ligacao,
.idiomas__atual {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--botao-alt-p);
    padding-inline: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 1.2;
    color: var(--preto);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
}

.idiomas__ligacao:hover {
    background: var(--cinza-claro);
}

.idiomas__ligacao:focus-visible {
    outline: 3px solid var(--azul-borda);
    outline-offset: -3px;
}

/* A bandeira dentro da lista, decisão do Luís de 14/08 depois de ver o painel
   a funcionar. Sozinhas eram o problema, ao lado do nome são um atalho para o
   olho. Vão a 24 x 16, que é o 3:2 do viewBox de 36 x 24 dos SVG: o site antigo
   esticava-as a 20 x 30 e era isso que as fazia parecer mal.

   O risco de 1 px é o que separa a bandeira do fundo branco do painel, e evita
   que a parte clara de cada uma se dissolva na borda. */
.idiomas__bandeira {
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 7, 45, 0.15);
}

/* A língua atual não é ligação: é onde o visitante está. */
.idiomas__atual {
    font-weight: 600;
    cursor: default;
    box-shadow: inset 3px 0 0 var(--azul-borda);
}

.cabecalho__idiomas--telemovel {
    display: none;
}

/* Botão do menu. Só existe no telemóvel e no tablet.
   O ícone mede 40 px e o botão não tem cantos redondos entre 768 e 1024, e
   passa a 30 px com raio de 12 px até 767. Achado H08.

   Fase 26: passa de 45 x 50 a 48 x 48, que é o degrau médio do sistema. Os
   45 x 50 cumpriam o alvo tátil, mas os 50 px de altura eram uma quarta
   altura num sistema de três. São dois pixéis que ninguém vê.

   Fica de fora da pílula por ser um controlo só de ícone, e guarda o raio de
   12 px, que passa a ser o único valor para este tipo de controlo.
   O z-index é maior do que o do painel para o botão continuar a poder fechar
   o menu quando o painel branco ocupa o ecrã. Achado H11. */
.menu-botao {
    display: none;
    position: relative;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    width: var(--botao-alt-m);
    height: var(--botao-alt-m);
    padding: 0;
    background: var(--azul);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.menu-botao svg {
    width: 40px;
    height: 40px;
}

@media (max-width: 767px) {
    .menu-botao {
        border-radius: var(--botao-raio-icone);
    }

    .menu-botao svg {
        width: 30px;
        height: 30px;
    }
}

.menu-botao__fechar {
    display: none;
    fill: var(--branco);
}

.menu-botao[aria-expanded="true"] .menu-botao__abrir {
    display: none;
}

.menu-botao[aria-expanded="true"] .menu-botao__fechar {
    display: block;
}

/* Tablet, de 768 a 1024 px. O Elementor faz o menu virar botão já aqui, pelo
   elementor-nav-menu--dropdown-tablet do widget.

   A fase 1 tirou estes valores dos campos _tablet da base de dados, porque a
   fase 0 só tinha medido a 1440 e a 375. Medidos agora no site em produção a
   768 px, a 11 de agosto de 2026, e não batiam: o cabeçalho fechava em 173 e o
   original mede 178. Ficam aqui os medidos. Achado L01. */
@media (max-width: 1024px) {
    .menu {
        display: none;
    }

    .menu-botao {
        display: flex;
    }

    .cabecalho {
        padding: 0 25px;
    }

    .cabecalho__interior {
        padding: 19.99px 15px;
        row-gap: 15px;
    }
}

/* Tablet, de 768 a 1024 px. Fase 27: o cabeçalho volta a uma linha só.

   O que estava aqui até 14 de agosto de 2026 era o clone fiel do site atual,
   pela decisão D01: o interior com 1150 px de largura fixa numa moldura de
   974, os três blocos a 64%, 33% e 33% desses 1150, e `overflow: hidden` a
   cortar o que passava fora. Achado R01.

   Três coisas o mataram, e estão medidas em `provas/fase27-cta-primeiro-ecra.md`:

   1. o cabeçalho ficava com 187 px, contra 95 acima dos 1024, e eram esses
      92 px que impediam o botão do herói de caber no primeiro ecrã a
      1024 × 640, nas três línguas;
   2. o botão do menu ficava aos 850 px de um ecrã de 768, ou seja fora do
      ecrã: nessa largura o visitante não tinha menu nenhum ao alcance. Era o
      achado 24-B, e morre aqui;
   3. o `overflow: hidden` obrigava o painel do seletor de línguas a abrir em
      fluxo nesta faixa, e só nesta, empurrando o cabeçalho para baixo.

   Clonar um defeito que deixa o visitante sem menu não serve ninguém. A D01
   deixa de valer nesta faixa, por decisão do Luís de 14 de agosto de 2026.

   Fica a uma linha, com a marca à esquerda e, à direita, o seletor de línguas,
   o botão de inscrição e o botão do menu. Medido: 115 px nas três línguas, que
   são os 19,99 px de espaçamento de cima e de baixo, herdados do bloco de
   cima, mais os 75 px do logótipo.

   O `flex-wrap` continua a ser o `wrap` da regra base, de propósito: o painel
   do menu de telemóvel é item deste mesmo contentor e precisa de descer para
   uma linha própria quando abre. Os quatro blocos da barra somam 549 px no
   pior caso, que é o espanhol, e a moldura mais apertada desta faixa tem
   688 px, por isso não chegam a partir sozinhos.

   As regras de `.menu-botao` que aqui viviam desapareceram todas. Montavam um
   botão de 60 × 66,4 px pela descida da linha de base da Poppins, e agora vale
   a regra base, que é o quadrado de `--botao-alt-m` do sistema da fase 26.    */
@media (min-width: 768px) and (max-width: 1024px) {
    .cabecalho__interior {
        gap: 16px;
    }

    .cabecalho__marca {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* O botão do menu fecha a barra, à direita do botão de inscrição. */
    .cabecalho__navegacao {
        flex: 0 0 auto;
        order: 3;
    }

    .cabecalho__acoes {
        flex: 0 0 auto;
        order: 2;
    }

    /* O painel do menu ocupa uma linha própria por baixo da barra. Sem isto
       entrava na mesma linha dos outros e ficava espremido. */
    .menu-telemovel {
        order: 4;
        flex: 0 0 100%;
    }

    .cabecalho__idiomas--telemovel {
        display: none;
    }

    .cabecalho__idiomas--computador {
        display: flex;
    }
}

@media (max-width: 767px) {
    .cabecalho__idiomas--telemovel {
        display: flex;
    }

    .cabecalho__idiomas--computador {
        display: none;
    }
}

@media (max-width: 767px) {

    /* Fase 24: o overflow: hidden saiu. Existia só para a margem negativa de
       baixo contar (achado G26), e essa margem também saiu, aqui ao lado.
       Sem ele o painel do seletor de línguas pode flutuar por cima da página
       em vez de ser cortado pela borda do cabeçalho. */
    .cabecalho {
        padding: 0;
    }

    .cabecalho__interior {
        padding: 15px 0 0;
        row-gap: 10px;
    }

    /* Fase 24: a marca deixa de ter 60% e passa a ficar com o que sobrar.
       Medido a 14/08/2026, e foi preciso: com as três colunas em percentagem
       fixa (60, 15 e 20) mais um seletor que agora mede o seu conteúdo, o
       inglês a 320 px somava exatamente 320 px e o botão do menu caía para uma
       segunda linha, com o cabeçalho a passar de 148 para 190. O código da
       língua inglesa é 1 px mais largo do que o português, e era esse píxel que
       decidia.

       Com `flex: 1 1 auto` a marca absorve a diferença em vez de a empurrar
       para o vizinho: o seletor e o botão do menu pedem o que precisam, e o
       que sobra é do logótipo. A 320 px sobram 188, e o logótipo precisa de
       167. O `min-width: 0` é o que permite a um item de flex encolher abaixo
       do seu conteúdo, que é o que faz a absorção funcionar. */
    .cabecalho__marca {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 10px;
    }

    .cabecalho__logo img {
        width: 157px;
        height: 60px;
    }

    /* Fase 24: a coluna passa a medir o conteúdo. Tinha 15% de largura, ou
       seja 56,3 px a 375, e as duas bandeiras mediam 88: transbordavam 31,7 px
       para dentro da caixa do logótipo, e não se via porque o logótipo acaba
       antes. Era sorte e não desenho. Achado 24-A. */
    .cabecalho__idiomas--telemovel {
        flex: 0 0 auto;
        justify-content: flex-end;
        align-items: center;
    }

    /* Fase 24: também deixa de ser percentagem, pela mesma razão da marca. O
       botão do menu mede 48 px e o espaçamento à direita 20: são 68, e é isso
       que a coluna pede.

       FASE 31, 15/08/2026 (achado T1): **a coluna pedia 68 e estava a ficar com
       52.** O botão de 48 px transbordava 8 px para cada lado da sua própria
       coluna, e os 8 px da esquerda caíam **por cima da pílula das línguas**.
       Não se via, porque o desenho do X só começa 1 px depois de a pílula
       acabar; o que se sobrepunha era a zona de toque. E como o botão do menu
       tem `z-index: 100000`, ganhava sempre: um dedo nos últimos 8 px do botão
       das línguas abria o menu. Medido a 360, 390 e 412, e igual nas nove
       páginas.

       O `min-width` obriga a coluna a reservar o que o botão precisa, e o
       `margin-left` abre 8 px de intervalo entre os dois controlos, que é o que
       o critério 2.5.8 do WCAG pede a alvos vizinhos. Custa 24 px à coluna do
       logótipo, que a 360 px tem 245 para um logótipo de 157: sobra. */
    .cabecalho__navegacao {
        flex: 0 0 auto;
        justify-content: flex-end;
        padding-right: 20px;
        min-width: calc(var(--botao-alt-m) + 20px);
        margin-left: 8px;
    }

    /* Fase 24: os 94 px saíram, e a conta que os sustentava também.
       Vinham do achado G26: no site antigo havia ali dentro um segundo widget
       com as bandeiras do computador que, a esta largura, ficava com 0 px de
       largura e empilhava duas imagens invisíveis, 95,6 px ao todo. A fase 1
       declarou a altura medida em vez de repetir as imagens.

       Medido a 14/08/2026: o bloco tinha 94 px e o botão 56, logo 38 vazios,
       dos quais 31 já eram cortados pela margem negativa do interior. Sobravam
       7 px à vista. Agora o bloco pede a altura do botão pela ficha e os 7 px
       ficam declarados como o que sempre foram: o espaço por baixo da fila.

       O cabeçalho continua a fechar nos mesmos 148 px a 375. Isso é critério
       de aceitação desta fase, não é esperança. */
    .cabecalho__acoes {
        width: 100%;
        min-height: var(--botao-alt-g);
        padding-bottom: 7px;
        align-items: flex-start;
        gap: 0;
    }
}


/* 6. Menu de telemóvel ====================================================
   Achado H07, medido a 10/08/2026 em auditoria/espelho/medido/home-fase2.md.

   São dois comportamentos, não um:

   768 a 1024 px  painel branco com a altura do seu conteúdo, que abre por
                  baixo da linha do logótipo e empurra o resto para baixo.
                  Itens com padding 25px 0.
   até 767 px     o mesmo painel, mas com 100vh de altura e os itens centrados
                  na vertical e na horizontal. Como abre aos ~70 px do topo e
                  ocupa a altura toda do ecrã, o que se vê é o ecrã branco.
                  Itens com padding 25px 20px.

   O item da página onde estás fica branco sobre branco, ou seja invisível.
   É assim no site atual e clona-se assim. Achado G21.                        */

.menu-telemovel {
    display: none;
    width: 100%;
    background: var(--branco);
    z-index: 99999;
}

.menu-telemovel[hidden] {
    display: none;
}

@media (max-width: 1024px) {
    .menu-telemovel:not([hidden]) {
        display: block;
    }

    .menu-telemovel__ligacao {
        padding: 25px 0;
    }
}

@media (max-width: 767px) {
    /* FASE 31, 15/08/2026 (achado T4): era `justify-content: center`, e num
       ecrã alto isso empurrava a primeira ligação para baixo do meio. Medido a
       412 × 700: **110 px de branco** entre o topo do painel e o «Home», e no
       telemóvel do Luís, que é mais alto, quase metade do ecrã.

       Passa a começar em cima. As seis ligações ocupam 480 px e o painel tem o
       ecrã inteiro menos o cabeçalho, por isso continuam a caber com folga; o
       `overflow-y: auto` é a rede para quando não couberem, que era o que o
       `hidden` de antes não fazia (cortava, sem deixar rolar). */
    .menu-telemovel:not([hidden]) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100vh;
        padding-top: 24px;
        overflow-y: auto;
    }

    .menu-telemovel__lista {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu-telemovel__ligacao {
        padding: 25px 20px;
        text-align: center;
    }
}

.menu-telemovel__ligacao {
    display: block;
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--cinza-menu);
    text-decoration: none;
}

/* O painel do menu de telemovel e branco: o atual em branco ficava invisivel
   (DF02 da fase 9). No desktop, sobre a barra azul, continua branco. */
.menu-telemovel__ligacao--atual {
    color: var(--azul-realce);
}

/* =========================================================================
   FASE 31, terceira passagem, 15/08/2026: o menu de telemóvel ganha desenho.
   Pedido do Luís: «o menu ficou igual, melhora o design e a animação, com a
   página selecionada e com efeitos».

   O que havia: seis palavras iguais, a atual só a mudar de cor. Sem entrada,
   sem resposta ao toque, sem hierarquia.

   **Nada aqui é inventado de raiz.** O gesto de entrada é o mesmo do herói
   (`heroi-linha`: sobe 16 px e aparece), a curva é a mesma que o site usa em
   todo o lado, `cubic-bezier(0.22, 0.8, 0.3, 1)`, e as cores são as três
   fichas da marca: o azul escuro do texto, o `--azul-realce` da página atual e
   o `--azul-borda`, que é o azul vivo que o site já usa para marcar o que está
   ativo nos botões.
   ========================================================================= */

/* A barra por baixo da página atual. A cor sozinha não chega: quem não
   distingue bem os azuis via seis palavras iguais. Agora há forma além de cor,
   que é o que o critério 1.4.1 do WCAG pede. */
.menu-telemovel__ligacao--atual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 36px;
    height: 3px;
    background: var(--azul-borda);
    border-radius: 3px;
    transform: translateX(-50%);
}

/* Resposta ao toque. Sem isto, tocar numa palavra não dá sinal nenhum de que
   o toque entrou, e num telemóvel esse meio segundo de dúvida é tudo. */
.menu-telemovel__ligacao:active {
    color: var(--azul-realce);
    transform: scale(0.96);
}

@media (prefers-reduced-motion: no-preference) {
    .menu-telemovel__ligacao {
        transition: color 0.15s ease, transform 0.12s ease;
    }

    /* A entrada: as seis sobem em fila indiana, 50 ms entre cada uma. É o
       mesmo movimento do herói, e dura menos de meio segundo no total. */
    .menu-telemovel:not([hidden]) .menu-telemovel__item {
        animation: menu-entra 0.42s cubic-bezier(0.22, 0.8, 0.3, 1) both;
    }

    /* O prefixo repete-se de propósito: a regra de cima usa a forma curta
       `animation:`, que **repõe o atraso a zero**, e tem mais especificidade do
       que um `.menu-telemovel__item:nth-child()` sozinho. Sem isto as seis
       entravam todas ao mesmo tempo, medido. */
    .menu-telemovel:not([hidden]) .menu-telemovel__item:nth-child(1) { animation-delay: 0.04s; }
    .menu-telemovel:not([hidden]) .menu-telemovel__item:nth-child(2) { animation-delay: 0.09s; }
    .menu-telemovel:not([hidden]) .menu-telemovel__item:nth-child(3) { animation-delay: 0.14s; }
    .menu-telemovel:not([hidden]) .menu-telemovel__item:nth-child(4) { animation-delay: 0.19s; }
    .menu-telemovel:not([hidden]) .menu-telemovel__item:nth-child(5) { animation-delay: 0.24s; }
    .menu-telemovel:not([hidden]) .menu-telemovel__item:nth-child(6) { animation-delay: 0.29s; }
}

@keyframes menu-entra {
    from {
        transform: translateY(16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Quando o menu abre, a logótipo recebe esta classe. É o fragmento de código
   «Menu», post 3927, que o site atual injecta em todas as páginas. */
.logo-fixa {
    position: fixed;
    top: 0;
    left: 0;
    width: 60%;
    padding: 15px;
}


/* 7. Botões ===============================================================
   Botão «Inscreve-te já» do cabeçalho: 160x51, fundo branco, texto azul da
   marca, borda de 2 px em #00A9FF, raio 61 px, padding 16px 32px.
   No telemóvel ocupa a largura toda, sem cantos redondos, padding 24 px.     */

.botao-inscricao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--botao-alt-g);
    max-width: 100%;
    padding: 8px var(--botao-padding-x);
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 600;
    line-height: 1.2;
    color: var(--azul);
    text-align: center;
    text-decoration: none;
    background: var(--branco);
    border: 2px solid var(--azul-borda);
    border-radius: var(--botao-raio);
    white-space: normal;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Fase 17C, pedido do Luís: os botões do clone não tinham estado de hover
   nenhum. Todos passam a Porto Blue com texto branco ao passar o rato, a cor
   de ação da marca, legível sobre claros e sobre o Marine. A cor muda mesmo
   com o movimento reduzido; só a transição e o salto é que são motion. */
.botao-inscricao:hover {
    color: var(--branco);
    background: var(--azul-realce);
}

/* Botão das páginas, que é outro widget e tem outros valores: Poppins
   16/15 peso 600, padding 16px 32px, raio 61 px, borda 3px sólida em #00A9FF.
   Claro: fundo branco e texto azul. Escuro: fundo azul e texto branco.

   No site atual a borda era #82B8E6 e a do cabeçalho #208DE9; a fase 17
   uniu as duas no azul claro #00A9FF do «2026» do logótipo.
   São dois widgets diferentes. Achado H10.

   A borda são 3 px, e não os 2,4 que a fase 2 tinha escrito. Os 2,4 eram o que
   o browser desenha para uma borda de 2 px num ecrã a 1,25, e não o que o site
   declara: as cinco páginas com botões declaram todas 3 px, e só os do
   cabeçalho é que são 2. Achado L06. */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--botao-alt-m);
    max-width: 100%;
    padding: 8px var(--botao-padding-x);
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* Fase 26: era `nowrap`. Com espaçamento maior, um botão que não quebra
       linha passa dos 335 px do contentor a 375 e empurra a página para o
       lado. Onde bate primeiro é nas línguas: «Baixar regulamento» tem 21
       caracteres e «Descargar el reglamento» tem 23. É por isto que o degrau
       é `min-height` e não `height`: quem quebra cresce, em vez de cortar. */
    white-space: normal;
    border: 3px solid #00A9FF;
    border-radius: var(--botao-raio);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Fase 17C: hover dos dois botões, ver a nota do .botao-inscricao. */
.botao--claro:hover,
.botao--escuro:hover {
    color: var(--branco);
    background: var(--azul-realce);
}

/* Fase 26: o foco de teclado passa a ter anel próprio, e deixa de ser um
   clone do hover. Antes o `:focus-visible` aplicava a mesma troca de cor, e
   quem navega por teclado não recebia sinal nenhum de onde estava.

   O anel é o azul claro do «2026» do logótipo, que se vê sobre o branco dos
   botões claros e sobre o Marine dos escuros. O afastamento de 2 px impede
   que ele se confunda com a borda de 3 px, que já é da mesma cor. */
.botao:focus-visible,
.botao-inscricao:focus-visible,
.consentimento__botao:focus-visible,
.menu-botao:focus-visible {
    outline: 3px solid var(--azul-borda);
    outline-offset: 2px;
}

/* Fase 24: a `.bandeira` saiu desta lista porque deixou de existir. O anel do
   seletor de línguas é o mesmo, e está declarado ao pé do próprio seletor. */

/* Fase 26: aqui viviam as duas consultas de media que encolhiam o espaçamento
   do botão no tablet (10px 12.8px) e outra vez no telemóvel (9.5px 12.8px).
   Eram elas que davam os 40 e os 41 px de altura, e o achado L05 que as
   justificava media o site antigo. Com `min-height` e um espaçamento único
   deixam de ter razão de existir: a altura já não depende do espaçamento. */

.botao--claro {
    color: var(--azul);
    background: var(--branco);
}

.botao--escuro {
    color: var(--branco);
    background: var(--azul);
}

/* Fase 51: a variante secundaria. Faltava ao sistema, e foi por isso que as
   acoes secundarias do comunicado cairam em ligacoes sublinhadas (achados
   A51-01 e A51-02, e a I52 ja o tinha dito da Ellipse). Mesma pilula, mesma
   borda, mesmo foco; so perde o fundo. Uma acao e um botao; um sublinhado so
   vive dentro de um paragrafo. */
.botao--fantasma {
    color: var(--azul);
    background: transparent;
}

.botao--fantasma-claro {
    color: var(--branco);
    background: transparent;
}

.botao--fantasma:hover,
.botao--fantasma-claro:hover {
    color: var(--branco);
    background: var(--azul-realce);
}

/* O icone que diz o que a acao faz: abrir fora, ou descarregar. */
.botao__icone-acao {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Fase 26: o CTA principal. É o único botão do site com o degrau grande, e é
   assim que se distingue dos secundários sem mudar de cor nem de letra.

   A largura resolve o problema 2 da análise: «Inscreve-te já» aparecia a 375
   no cabeçalho, a 335 no herói e a 145 no corpo, três pesos visuais para a
   mesma ação. A 100% do contentor as três passam a 335 px a 375 de ecrã, que
   é o que o herói já media.

   A classe não se escreve à mão em página nenhuma: o componente botao.php
   põe-na sozinho a quem tiver EVENTO_LINK por destino. */
.botao--principal {
    min-height: var(--botao-alt-g);
}

@media (max-width: 767px) {
    .botao--principal {
        display: flex;
        width: 100%;
    }
}

.botao__icone {
    display: flex;
    flex: 0 0 auto;
}

.botao__icone svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (max-width: 767px) {

    /* Fase 26, decisão do Luís a 13/08: o botão do cabeçalho deixa de ser uma
       faixa branca de raio 0 colada por baixo da barra azul. Era a única peça
       do site com aquela forma, e é a mais vista, porque está nas 33 páginas.
       Passa a pílula de 56 px, como o resto do sistema.

       O achado L01 morre aqui. Dizia que o botão media 67 px e não 94, e que
       os 94 eram do bloco que o segurava. Com `min-height` o problema deixa de
       existir: a altura é declarada, e não calculada a partir do espaçamento. */
    .botao-inscricao {
        display: flex;
        width: 100%;
    }
}


/* 8. Rodapé ===============================================================
   Fundo #00072D (Marine Blue), padding 80px 60px, 560 px de altura, conteúdo 1305 px.
   Título de coluna em Poppins 700 18 px, o resto em Poppins 400 16 px.
   As ligações a 60% de branco.                                              */

.rodape {
    padding: 80px var(--padding-lateral);
    background: var(--preto);
    color: var(--branco);
}

.rodape__interior {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;
}

.rodape__topo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

/* Bloco da marca: 332 px medidos, com 30 px entre o logótipo e os contactos.
   A base de dados diz 35% do conteúdo, o que daria 456, mas as colunas de
   ligações não encolhem e empurram-no até aos 332 que o browser mostra.
   Usa-se o valor medido, que é o que manda. */
.rodape__marca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px 60px;
    flex: 0 1 332px;
}

.rodape__logo {
    width: 216px;
    height: 59px;
}

.rodape__contactos {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.rodape__contacto {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 400;
    line-height: 16px;
    color: var(--branco);
}

.rodape__contacto img {
    width: 25px;
    height: 25px;
}

.rodape__contacto a {
    text-decoration: none;
}

/* As três colunas de ligações, alinhadas à direita, com 50 px entre elas.
   Medidas a 1440: o bloco tem 949 px e as colunas 285, 142 e 237, que são
   exatamente 30%, 15% e 25% de 949. As alturas mínimas vêm do espelho. */
.rodape__colunas {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 50px;
}

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

.rodape__coluna--legais {
    width: 30%;
    gap: 20px;
    min-height: 150px;
}

.rodape__coluna--paginas {
    width: 15%;
    gap: var(--gap);
    min-height: 229px;
}

/* Os 186 px são medidos, achado H06. São eles, com os 229 da coluna do meio,
   que dão os 229 px de altura da linha de cima do rodapé. */
.rodape__coluna--redes {
    width: 25%;
    gap: 20px;
    min-height: 186px;
}

.rodape__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    flex-shrink: 0;
}

.rodape__titulo {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    color: var(--branco);
}

.rodape__ligacao {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 400;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    /* Alvo de toque a 24 px sem mudar o aspeto (DF20 da fase 9). */
    display: inline-block;
    padding-block: 4px;
}

.rodape__ligacao--destaque {
    font-weight: 500;
}

.rodape__ligacao:hover {
    color: var(--branco);
}

/* Redes sociais: três círculos de 40 px e símbolo branco. No site atual o
   círculo era #252525 sobre o rodapé #141414, um degrau subtil. Com o rodapé
   Marine o mesmo Marine desaparecia (fase 17C): o círculo passa a Porto Blue,
   a cor de realce, e acende no azul claro ao passar o rato. */
.rodape__redes {
    display: flex;
    align-items: center;
    gap: 13px;
}

.rodape__rede {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--azul-realce);
    border-radius: 50%;
    color: var(--branco);
    transition: background-color 0.25s ease;
}

.rodape__rede:hover {
    background: var(--azul-borda);
}

/* Fase 18: a linha legal curta do pacote de 12/08/2026, entre as colunas e a
   base do rodapé. */
.rodape__linha-legal {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-mini);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

.rodape__rede svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* O rodapé do rodapé.
   Os 121 px de altura do original são 33 de conteúdo, 64 de padding e 24 do
   intervalo que sobra por baixo, porque o contentor tem um segundo filho de
   altura zero. Achado H06: é aqui que estavam os 85 px que faltavam. */
.rodape__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 32px 0;
    margin-bottom: var(--gap);
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 16px;
    color: rgba(255, 255, 255, 0.6);
}

.rodape__base a {
    text-decoration: none;
}

.rodape__criado {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Em bloco, para a imagem não deixar por baixo o espaço da linha de base. */
.rodape__criado img {
    display: block;
    width: 102px;
    height: 33px;
}

/* A caixa da linha das ligações mede 17 px, e não os 16 que o site declara.
   Não é engano da medição nem escala do ecrã: no site atual o contentor de cada
   ligação está em Source Sans Pro e a ligação está em Poppins, e a linha fica
   com a subida de uma e a descida da outra. Dá 16,61, que o browser arredonda
   para 17 tanto a 1440 como a 375. Aqui há uma família só por caixa, e por isso
   é preciso declarar a altura medida. Achado R02.

   A 1440 isto não muda nada, porque as três colunas têm alturas mínimas que
   absorvem a diferença. A 375, onde essas alturas mínimas são zero, são 9 px
   por rodapé.                                                                 */
.rodape__ligacao,
.rodape__contacto {
    line-height: 17px;
}

/* Os dois blocos de contacto têm 278 px fixos abaixo dos 1.024 px, e nessas
   larguras passam por fora da coluna que os segura, que mede 215 no tablet.
   Está declarado assim nos nove posts, confirmado na captura original.

   A linha mede 27,06: 25 da imagem, que assenta na linha de base, mais a
   descida do texto que vem a seguir. Aqui a imagem é filha directa de uma caixa
   flexível e por isso a caixa mede os 25 da imagem, e não os 27,06. Declara-se
   a altura medida. Achado R04.                                                 */
@media (max-width: 1024px) {
    .rodape__contacto {
        width: 278px;
        flex: 0 0 auto;
        min-height: 27.0625px;
        align-items: center;
    }
}

/* Tablet, de 768 a 1024 px. A fase 1 tirou estes valores dos campos _tablet da
   base de dados. Medidos agora no site em produção: o rodapé mede 395 px, e o
   clone fechava em 459.

   58 de espaçamento em cima, 229 da linha de cima, 15 de intervalo e 93 da
   base. As três colunas medem 30%, 15% e 25% do bloco que as segura, e esse
   bloco tem 65% do conteúdo, com o da marca a ficar com 32%.                   */
@media (min-width: 768px) and (max-width: 1024px) {
    .rodape {
        padding: 0 25px;
    }

    .rodape__interior {
        padding: 58px 15px 0;
        gap: 15px;
    }

    .rodape__topo {
        gap: 15px;
    }

    .rodape__marca {
        flex: 0 0 32%;
        min-width: 0;
        gap: 15px;
    }

    /* O logótipo passa de 216 px para 135,112. Está declarado assim, ao milésimo. */
    .rodape__logo {
        width: 135.112px;
        height: auto;
    }

    .rodape__contactos {
        gap: 24px;
    }

    .rodape__colunas {
        flex: 0 0 65%;
        min-width: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 15px 35px;
    }

    /* min-width: 0 para as percentagens valerem: sem isso as colunas não
       encolhem abaixo do texto mais comprido e descem para a linha de baixo. */
    .rodape__coluna {
        min-width: 0;
    }

    .rodape__coluna--legais {
        width: 30%;
        gap: 15px;
    }

    .rodape__coluna--paginas {
        width: 15%;
        gap: 15px;
    }

    .rodape__coluna--redes {
        width: 25%;
        gap: 15px;
    }

    /* A lista de páginas tem 180 px fixos dentro de uma coluna de 65,6, e por
       isso passa por cima da coluna das redes sociais. É assim no site atual.
       Achado R03. */
    .rodape__lista {
        width: 180px;
    }

    /* A base: 22,72 de espaçamento em cima e em baixo, 33 de conteúdo e os 15
       do intervalo que sobra por baixo. */
    .rodape__base {
        padding: 22.72px 0;
        margin-bottom: 15px;
        gap: 10px;
    }
}

/* No telemóvel o rodapé mede 826 px: 20 de espaçamento, 23,2 em cima do
   interior, o bloco da marca com 182, as colunas empilhadas com 410, 15 de
   intervalo e a base com 106. As alturas mínimas das colunas são de computador
   e não valem aqui. Medido a 11/08/2026, contra os 728 que o clone tinha.      */
@media (max-width: 767px) {
    .rodape {
        padding: 20px;
    }

    .rodape__interior {
        padding: 23.2px 15px 0;
        gap: 15px;
    }

    .rodape__topo {
        flex-direction: column;
        gap: 50px;
    }

    .rodape__marca {
        flex-basis: auto;
        width: 100%;
        gap: 20px;
    }

    /* O logótipo passa a ocupar a linha toda: 305 de largura por 83,8 de alto. */
    .rodape__logo {
        width: 100%;
        height: auto;
    }

    .rodape__contactos {
        gap: 24px;
    }

    .rodape__colunas {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: column;
        gap: 40px;
    }

    .rodape__coluna--legais,
    .rodape__coluna--paginas,
    .rodape__coluna--redes {
        width: 100%;
        min-height: 0;
        gap: 15px;
    }

    /* A coluna das páginas é a única com 25 px entre o título e a lista. */
    .rodape__coluna--paginas {
        gap: 25px;
    }

    .rodape__lista {
        width: auto;
    }

    /* A base empilha em duas linhas com 10 px entre elas, e o «Criado por» fica
       centrado. O texto encolhe para 13 px, que é o único sítio do rodapé onde
       isso acontece. */
    .rodape__base {
        flex-wrap: wrap;
        gap: 10px;
        padding: 17.54px 0;
        margin-bottom: 15px;
        font-size: 13px;
        line-height: 13px;
    }

    .rodape__direitos {
        width: 100%;
    }

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


/* 9. Consentimento ========================================================
   Banner próprio, a substituir o CookieYes. Três botões com o mesmo peso
   visual, como manda a secção 7 da especificação.

   O aspeto dos botões é o que o site atual já lhes dá pelo CSS do
   personalizador do tema, post 3723: texto e borda #282733 no original,
   #00072D desde a fase 17, fundo
   transparente, padding 10px 15px. Achado G04.                               */

.consentimento {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 20px;
    background: var(--branco);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
}

/* FASE 31, 15/08/2026 (achado T3): com o menu de telemóvel aberto, o banner
   tapava as três últimas ligações e não havia como lá chegar sem primeiro
   despachar os cookies. Recolhe enquanto o menu ocupa o ecrã e volta quando ele
   fecha. **Não é uma dispensa de consentimento:** ninguém aceitou nem rejeitou
   nada, nada de terceiros carrega entretanto, e o banner reaparece inteiro. É
   primo do achado 23-C, que a fase 27 fechou para o botão de inscrição e que
   para o menu ficou por ver, porque ninguém abre o menu numa medição
   automática. */
.menu-aberto .consentimento {
    display: none;
}

.consentimento[hidden] {
    display: none;
}

.consentimento__caixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;
}

.consentimento__texto {
    flex: 1 1 380px;
}

.consentimento__titulo {
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo-destaque);
    font-weight: 600;
    color: #00072D;
}

.consentimento__texto p {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 1.5;
    color: #00072D;
}

.consentimento__opcoes {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.consentimento__opcoes[hidden] {
    display: none;
}

.consentimento__opcao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    color: #00072D;
    cursor: pointer;
}

/* Fase 18: o inventário resumido dentro do painel Personalizar. */
.consentimento__inventario {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    line-height: 1.5;
    color: #00072D;
}

.consentimento__inventario a {
    color: var(--azul-realce);
}

/* Fase 27: duas filas em vez de três botões empilhados. O Personalizar ocupa a
   linha de cima e o Rejeitar e o Aceite tudo ficam lado a lado, do mesmo
   tamanho ao pixel, que é o que a lei obriga entre esses dois.

   A fase 26 tinha-os empilhado pela mesma razão: a 375 px os três somavam
   351 px mais 24 de intervalo e quebravam de linha sozinhos, de forma desigual,
   o que dava pesos visuais diferentes a botões que têm de ser iguais. A grelha
   dá a mesma igualdade sem gastar 156 px de altura: gasta 98.

   O `minmax(0, 1fr)` e não `1fr`: a largura mínima de um item de grelha é o seu
   conteúdo, e sem isto o «Aceite tudo» saía do ecrã a 375 px.

   Medido a 375 px: o banner desce de 387 px, que eram 58% do ecrã de um
   iPhone SE, para 321 px, que são 48%. Alvos de 335 × 44 e 163 × 44, nenhum
   abaixo do mínimo da fase 26.                                                */
.consentimento__botoes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
}

.consentimento__botao[data-consentimento="personalizar"] {
    grid-column: 1 / -1;
}

/* Os três com exatamente o mesmo aspeto. Rejeitar não é mais discreto do que
   Aceitar: é o que a lei exige e o que a especificação manda.

   Fase 26: e agora é verdade também em telemóvel. A 375 px os três somavam
   351 px mais 24 de intervalo e quebravam de linha sozinhos, de forma
   desigual, o que dava pesos visuais diferentes a botões que a lei manda
   iguais. Empilhados a 100% ficam rigorosamente iguais. */
.consentimento__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--botao-alt-p);
    max-width: 100%;
    padding: 8px var(--botao-padding-x);
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 600;
    line-height: 1.2;
    color: #00072D;
    text-align: center;
    background: transparent;
    border: 1px solid #00072D;
    border-radius: var(--botao-raio);
    cursor: pointer;
}

.consentimento__botao:hover {
    background: rgba(0, 7, 45, 0.08);
}

/* Vem depois da regra base de propósito: senão o `display: inline-flex`
   ganhava-lhe e o «Guardar escolhas» aparecia quando não devia. */
.consentimento__botao[hidden] {
    display: none;
}

@media (max-width: 767px) {

    /* Fase 27: 16 px em vez de 20 em cima e em baixo. São 8 px de ecrã num
       telemóvel onde o banner já ocupa metade. */
    .consentimento {
        padding: 16px 20px;
    }

    .consentimento__botao {
        width: 100%;
    }
}

/* Fase 27: de 768 px para cima o banner deixa de ser uma barra no fundo e passa
   a um cartão no canto inferior direito.

   A razão é geometria, não gosto: a coluna de texto do herói vive à esquerda, e
   uma barra de largura inteira tapa-lhe sempre o botão. Medido a 1024 × 640,
   a barra deixava 472 px de ecrã útil para um botão que acaba aos 589. O
   cartão, com 420 px à direita, não lhe toca, e o botão passa a estar visível
   na primeira visita a 768, 1024, 1440 e 1920, nas três línguas.

   O canto é o direito e não o esquerdo pela mesma razão: à esquerda voltava a
   tapar. Os 42vw travam-no nas larguras mais apertadas desta faixa.

   O `flex: 0 0 auto` no texto é preciso porque a `.consentimento__caixa` passa
   a coluna: sem ele o bloco de texto estica e abre um vazio a meio do cartão.

   Dentro do cartão os botões mantêm as duas filas, e o Rejeitar e o Aceite tudo
   continuam do mesmo tamanho ao pixel.                                        */
@media (min-width: 768px) {
    .consentimento {
        left: auto;
        right: 20px;
        bottom: 20px;
        width: min(420px, 42vw);
        padding: 20px;
        border-radius: 16px;
        box-shadow: 0 18px 48px rgba(0, 7, 45, 0.28);
    }

    .consentimento__caixa {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .consentimento__texto {
        flex: 0 0 auto;
    }
}

/* O botão permanente para rever a escolha, como o que existe hoje. */
.consentimento-rever {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #00072D;
    background: var(--branco);
    border: 1px solid #00072D;
    border-radius: 50%;
    cursor: pointer;
}

.consentimento-rever[hidden] {
    display: none;
}

/* FASE 31, segunda passagem: com a barra de inscrição no fundo do ecrã, este
   botão ficava por baixo dela. Sobe o que a barra mede mais a folga de origem.
   **Tem de vir depois da regra acima**: mesma especificidade, ganha a última. */
@media (max-width: 767px) {
    .consentimento-rever {
        bottom: calc(32px + var(--botao-alt-g) + env(safe-area-inset-bottom, 0px));
    }
}


/* 10. Página 404 ==========================================================
   Estado 404 e este texto, medidos no site atual.                            */

.erro-404 {
    text-align: center;
}

.erro-404__titulo {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--t-h2);
}

.erro-404__texto {
    margin-top: var(--gap);
}


/* 11. Página de teste da fase 1 ===========================================
   Não faz parte do site. Serve só para medir as fundações.                   */

.teste-escala {
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}

.teste-cores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-top: var(--gap);
}

.teste-cor {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 320px;
    font-size: var(--t-pequeno);
}

.teste-cor__amostra {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.teste-cor__nome {
    font-family: monospace;
}

.teste-cor__onde {
    color: var(--cinza-rede);
}


/* =========================================================================
   FASE 2: A HOMEPAGE
   =========================================================================

   Todos os números daqui para baixo vêm de
   auditoria/espelho/medido/home-fase2.md, medidos no site em produção a 10 de
   agosto de 2026, com as fontes já carregadas. O que não vem de lá está
   justificado em auditoria/ACHADOS.md.

   Índice
   12. Blocos de texto que se repetem
   13. Herói
   14. Marquee
   15. Contador
   16. Secções de duas colunas
   17. Carrossel
   18. Galeria
   19. T-shirt
   20. Vídeo
   21. Parceiros
   22. Contacto e formulário
   23. Chamada final
   ========================================================================= */


/* 12. Blocos de texto que se repetem ======================================= */

/* «∗ sobre o evento ∗», «∗ REGULAMENTO ∗», «∗ Parceiros ∗».
   Poppins 16/16, espaçamento de letra 1,6 px, maiúsculas. */
.sobrescrito {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--preto);
}

.sobrescrito--claro {
    color: var(--branco);
}

.sobrescrito--centrado {
    text-align: center;
}

/* H2 principal: Poppins 700 48/52,8, que passa a 32/35,2 no telemóvel. */
.titulo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h2);
    font-weight: 700;
    line-height: 1.1;
    color: var(--preto);
}

.titulo span {
    color: var(--azul-realce);
}

.titulo--centrado {
    text-align: center;
}

.titulo--claro {
    color: var(--branco);
}

/* «Entra em contacto connosco» e a chamada final têm entrelinha 1,2. */
.titulo--contacto {
    line-height: 1.2;
    color: var(--preto-h2-home);
}

.seccao--final .titulo {
    line-height: 1.2;
}

/* «VÍDEO 2025». O espelho da fase 0 leu 32 px, mas o browser calcula 48/52,8,
   igual aos outros H2. Manda o medido ao vivo. Achado H12. */
.titulo--cartao {
    line-height: 1.1;
}

/* Corpo de texto: Poppins 18/27.
   Cada parágrafo leva 14,4 px de margem por baixo, incluindo o último. É o que
   o editor de texto do site atual faz, medido em todos os parágrafos da
   página, e é o que fecha as alturas das secções. */
.corpo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    font-weight: 400;
    line-height: 27px;
    color: var(--preto-percursos);
}

.corpo p {
    margin-bottom: 14.4px;
}

.corpo--claro {
    color: var(--branco);
}

/* Larguras próprias de cada bloco de texto, medidas uma a uma. No site atual
   são larguras fixas dos widgets, não percentagens do contentor. */
.seccao--sobre .titulo {
    width: 500px;
}

.seccao--sobre .corpo {
    width: 475px;
}

.seccao--resultados .titulo {
    width: 600px;
}

.titulo--cartao {
    width: 600px;
}

.titulo--contacto {
    width: 306px;
}

.seccao--final .titulo {
    width: 715px;
}

.seccao--final .corpo {
    width: 700px;
}

@media (max-width: 1024px) {

    .seccao--sobre .titulo,
    .seccao--sobre .corpo,
    .seccao--resultados .titulo,
    .titulo--cartao,
    .titulo--contacto,
    .seccao--final .titulo {
        width: auto;
        max-width: 100%;
    }

    /* O parágrafo da chamada final não passa a automático: passa a 597 px.
       Está declarado assim nas cinco páginas que têm esta secção, e é o que
       lhe dá as linhas certas a 768. Achado L05. */
    .seccao--final .corpo {
        width: 597px;
        max-width: 100%;
    }
}


/* 13. Herói ===============================================================
   Redesenhado na fase 11, com autorização do Luís a 11/08/2026.

   A assinatura é o muro azul diagonal: nasce colado ao cabeçalho, desce até
   ao fundo da secção e abre para a direita, deixando a fotografia em
   destaque. O muro é um ::before com clip-path, e o texto vive na coluna da
   esquerda, mais estreita do que o muro no seu ponto mais apertado: fica
   contido por construção, em todas as larguras. A escada de recuos
   acompanha a diagonal, que abre no mesmo sentido. */

.heroi {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(640px, 84vh, 900px);
    /* Cor de fundo primeiro: se a foto faltar, o herói continua de pé
       (F11-A; o -scaled chegou a faltar no staging por o manifesto não ter
       sido regenerado antes de publicar). */
    background-color: var(--azul);
    background-image: url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-1620x1080.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Degraus da foto (DF07): 1620 no telemóvel, 2048 no tablet e desktop,
   -scaled de 2560 nos ecrãs grandes.

   Fase 29 (A3): os degraus passam a ser dois, largura e densidade de ecrã.
   A medição de 15/08 mostrou 303 KB a serem servidos a uma caixa de 1440 px de
   um ecrã de densidade simples, que não precisa de mais de 1440. Com o
   `image-set` esse ecrã pede 1536 ou 2048, e quem tem densidade dupla continua
   a receber exatamente o mesmo ficheiro que recebia. **Ninguém fica pior.**

   A conta que decide qual serve, e que não é a largura do ecrã: a foto é 3:2 e
   a caixa tem 640 px de altura mínima, por isso o `cover` escala pela altura em
   ecrãs estreitos. Num telemóvel de 390 px a foto aparece com cerca de 960 px
   de largura, e é por isso que o telemóvel **não** desce para a variante de
   768: não estava a mais, e ficaria desfocada. Fica no 1620 de sempre.

   Os pesos: 768 são 46 KB, 1536 são 136, 1620 são 147, 2048 são 211, o -scaled
   de 2560 são 303. */
@media (min-width: 768px) {
    .heroi {
        background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-1536x1024.webp") 1x,
                                            url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-2048x1365.webp") 2x);
        background-image: image-set(url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-1536x1024.webp") 1x,
                                    url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-2048x1365.webp") 2x);
    }
}

/* FASE 29, segunda passagem, 15/08/2026: **tentei subir este degrau dos 1440
   para os 1537 e desfiz, porque a medição me desmentiu.**

   O raciocínio era: a 1440 px a caixa mede 1440 de largura, a variante de 1536
   cobre-a, logo pedir a de 2048 era desperdício de 75 KB. Errado, e o erro
   estava na altura: a caixa do herói **não** tem os 756 px do `min-height`,
   tem **1111**, porque o conteúdo a estica. Com uma foto 3:2 numa caixa dessas,
   o `cover` escala pela altura e não pela largura: a de 1536 apareceria com
   1666 px de largura, ou seja **esticada 8,5%**.

   E havia um segundo estrago que só a medição mostrou: mover o degrau também
   fazia a densidade dupla a 1440 descer de 2560 para 2048.

   Fica aos 1440, e fica escrito para não se voltar a tentar. */
@media (min-width: 1440px) {
    .heroi {
        background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-2048x1365.webp") 1x,
                                            url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-scaled.webp") 2x);
        background-image: image-set(url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-2048x1365.webp") 1x,
                                    url("/wp-content/uploads/2025/06/@sergio_henriques_photography2024090804170-1-scaled.webp") 2x);
    }
}

/* O muro: estreito em cima (46%), largo em baixo (68%), a diagonal do
   desenho original sem os problemas da rotação. */
.heroi::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 46% 0, 68% 100%, 0 100%);
    background: linear-gradient(178deg, rgba(0, 37, 93, 0.96) 0%, rgba(0, 22, 69, 0.88) 55%, rgba(0, 7, 45, 0.94) 100%);
}

.heroi__interior {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;
    padding-inline: var(--padding-lateral);
}

/* A coluna de texto: 38% é menos do que os 46% do muro no topo, por isso
   nunca sai de dentro dele, mesmo com a escada de recuos. */
.heroi__painel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    width: 38%;
    min-width: 320px;
    max-width: 560px;
    /* A fita do marquee sobe 150 px pelo herói adentro, e a reserva de fundo
       existe para que ela nunca passe por cima do que está no painel.

       Fase 15: eram 260 px, porque quem estava exposto era o botão, o último
       elemento do painel. Fase 23: o último elemento passou a ser a faixa de
       patrocinadores, que já faz de escudo ao botão, e 260 px deixaram o herói
       com 1148 px de altura a 1440, dos quais 260 eram muro vazio. Passam a
       220, e o número é medido e não arredondado: com 200 a folga entre a base
       da faixa e o topo da fita descia a 16 px a 1920, apertado de mais para
       uma fita rodada e com desfoque. Com 220 a folga mínima é de 36 px, nas
       três línguas e nas seis larguras medidas. */
    padding-block: 32px 220px;
}

.heroi__widget {
    width: 100%;
}

/* Todo o conteúdo parte do mesmo eixo para manter uma leitura uniforme. */
.heroi__caixa--recuo-30,
.heroi__caixa--recuo-60,
.heroi__caixa--recuo-80 {
    padding-left: 0;
}

.heroi__caixa--recuo-110 {
    padding: 16px 0 0;
}

.heroi__titulo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h1-heroi);
    font-weight: 700;
    line-height: 1.18;
    text-transform: uppercase;
    color: var(--branco);
    text-shadow: 0 2px 24px rgba(0, 7, 45, 0.35);
}

.heroi__subtitulo,
.heroi__data {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 29px;
    font-weight: 700;
    line-height: 40px;
    text-transform: uppercase;
    color: var(--branco);
}

.heroi__texto {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo-destaque);
    font-weight: 700;
    line-height: 30px;
    color: var(--branco);
}

/* Fase 23. A faixa de patrocinadores, sexto widget do herói, debaixo do botão.

   Os cinco SVG partilham o mesmo viewBox com o logótipo centrado, e a regra do
   spec é a que respeita a preparação do designer: mesma altura de caixa para
   todos, sem acertos manuais. GOLD a 100%, SILVER a 70%, e --escala aplica de
   uma vez os 80% do tablet e os 60% do telemóvel.

   --faixa-caixa começou nos 93 px, que davam ao New Balance os 40 px de tinta
   combinados. O Luís viu a captura a 13/08 e mandou aumentar, o GOLD e também
   os SILVER, que estavam pequenos de mais. Passou a 140 px, o que dá 62 px de
   tinta ao New Balance e 39 ao Vitalis. Aumentar a faixa não mexe no botão:
   ela vive por baixo dele e o painel enche de cima para baixo, o que está
   medido nas duas corridas do verificador.

   Nota medida, para quem vier a seguir: a fração da caixa que é tinta vai de
   10,5% no Dream Media, que é uma palavra deitada de 10:1, a 42,8% no New
   Balance. Os logótipos não saem todos do mesmo tamanho aparente, e isso é da
   forma de cada marca, não de um defeito dos ficheiros nem do CSS. */
.heroi__caixa--faixa {
    padding: 28px 0 0;
    /* A faixa sai da coluna de texto, e é geometria e não gosto: cada `img`
       ocupa a caixa inteira do SVG, e as caixas são todas da mesma largura,
       por isso três logótipos SILVER lado a lado precisam de mais do que os
       450 px do painel. Os 66vw travam-na a tempo de ela ficar sempre em cima
       do muro escuro, que nesta altura do herói tem cerca de 65% da largura.
       Medido nas sete larguras em provas/fase23-heroi-cabecalho.md. */
    width: min(560px, 66vw);
}

.heroi-faixa {
    --faixa-caixa: 155px;
    --escala: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
}

.heroi-faixa__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 12 px e não 28: os SVG já trazem a sua zona de proteção dentro da caixa,
       e um intervalo maior só empurrava a linha SILVER para duas filas. */
    gap: 12px;
}

/* Fase 29 (A1): a faixa serve os mesmos ficheiros da secção dos escalões, e é
   o filtro que os põe brancos. Antes havia dois ficheiros por logótipo, com a
   mesma geometria e só a cor diferente, e a homepage descarregava os dois: 5
   pedidos e 81 KB para nada. O `brightness(0) invert(1)` transforma qualquer
   cor sólida em branco puro, e foi verificado ao pixel contra os ficheiros
   brancos antigos: zero pixéis diferentes nos cinco. Ver
   provas/fase29-medicao.md e ferramentas/fase29-peso/ensaio-filtro.js. */
.heroi-faixa__logo {
    display: block;
    height: calc(var(--faixa-caixa) * var(--escala));
    /* Fase 29 (C1): era um <img> e passou a fundo, para vir da pilha dos
       parceiros como a secção dos escalões. Sem o `<img>` a dar a proporção, é
       o `aspect-ratio` do viewBox que a dá, e é o mesmo nos 18. */
    aspect-ratio: 340.57 / 207.29;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(0) invert(1);
}

.heroi-faixa__linha--silver .heroi-faixa__logo {
    height: calc(var(--faixa-caixa) * var(--escala) * 0.7);
}

/* Entrada: o muro desliza e as linhas sobem, uma a uma. Quem pede menos
   movimento não vê nada disto. */
@media (prefers-reduced-motion: no-preference) {
    .heroi::before {
        animation: heroi-muro 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) both;
    }

    .heroi__widget {
        animation: heroi-linha 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both;
    }

    .heroi__widget:nth-child(1) {
        animation-delay: 0.25s;
    }

    .heroi__widget:nth-child(2) {
        animation-delay: 0.35s;
    }

    .heroi__widget:nth-child(3) {
        animation-delay: 0.45s;
    }

    .heroi__widget:nth-child(4) {
        animation-delay: 0.55s;
    }

    .heroi__widget:nth-child(5) {
        animation-delay: 0.65s;
    }

    /* Fase 23: sem esta linha o sexto widget herdava a animação sem atraso e
       entrava antes dos outros cinco. */
    .heroi__widget:nth-child(6) {
        animation-delay: 0.75s;
    }
}

@keyframes heroi-muro {
    from {
        transform: translateX(-12%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes heroi-linha {
    from {
        transform: translateY(16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Tablet: o muro abre mais, a coluna cresce com ele. */
@media (min-width: 768px) and (max-width: 1024px) {
    .heroi::before {
        clip-path: polygon(0 0, 58% 0, 82% 100%, 0 100%);
    }

    .heroi__painel {
        width: 52%;
        min-width: 0;
    }

    /* Fase 23: tudo a 80% no tablet, GOLD e SILVER pela mesma escala. */
    .heroi-faixa {
        --escala: 0.8;
    }
}

/* Fase 27. Janelas baixas: o herói aperta o ritmo vertical para o botão caber
   no primeiro ecrã. Não é uma faixa de larguras, é uma faixa de alturas, e é
   por isso que a consulta é por `max-height` e não por `max-width`.

   Os 768 px por baixo protegem o telemóvel, que tem regras próprias mais
   abaixo e onde o botão já cabia: a 375 × 667 a base está nos 559.

   **Não há limite por cima, e é medido.** Com um teto de 1024 px o 1366 × 640
   e o 1440 × 640 continuavam a falhar por 8 px, e um ecrã de 1366 × 768, que é
   das resoluções de portátil mais usadas, dá cerca de 640 px de janela útil
   depois da moldura do browser. Sem teto, passam.

   As janelas altas não são tocadas: a 1440 × 780 e a 1920 × 940 fica tudo
   idêntico, incluindo a reserva de 220 px do fundo do painel, que a fase 23
   mediu para a fita do marquee não passar por cima da faixa de patrocinadores.
   Essa reserva não se mexe aqui, e por isso repete-se no `padding-block`.

   Medido a 14/08/2026, já com o cabeçalho desta fase: a base do botão desce de
   668 para 589 a 1024 × 640, com 51 px de folga; e para 625 a 1200 × 640 e 569
   a 1366 e 1440 × 640.

   FASE 36, 17/08/2026: o degrau único dos 720 px passou a dois, e o que aqui
   está é um superconjunto do que a fase 27 fazia. Quem estava abaixo dos 720
   continua a receber exactamente as mesmas cinco declarações; o que mudou é
   que passam a apanhar-se também as janelas de portátil, que é onde vive a
   maioria dos visitantes de computador e onde nada disto disparava.

   Porque é que são dois degraus e não um: o monitor externo do Luís tem 970 px
   de altura, e um degrau só aos 900 px não lhe tocava sequer. O aperto leve vai
   até aos 1000 para o apanhar, e deixa o H1 quieto, que num monitor grande a
   diferença entre 54 e 46 px nota-se. O aperto por inteiro fica nos 900.

   **Os degraus novos são de computador, dos 1025 px para cima, e este bloco dos
   720 fica intacto para os tablets.** Não é arrumação, é uma correção medida: a
   primeira tentativa levou o aperto leve até aos 768 px de largura, e a 820 ×
   900 a faixa subiu para onde o muro é mais estreito e passou a sair dele em
   19,8 px, contra os 7,5 que já saía. Um defeito antigo que eu ia agravar.
   Nos tablets, portanto, tudo como estava.

   A reserva de 220 px do fundo do painel repete-se aqui de propósito, como a
   fase 27 já fazia: é ela que impede a fita do marquee de passar por cima da
   faixa de patrocinadores, foi medida na fase 23, e não se mexe sem remedir.
   Medido depois desta fase: a folga da fita ficou nos mesmos 83,2 px.         */
@media (min-width: 768px) and (max-height: 720px) {
    .heroi__painel {
        gap: 20px;
        padding-block: 20px 220px;
    }

    .heroi__titulo {
        font-size: 46px;
    }

    .heroi__texto {
        line-height: 27px;
    }

    .heroi__caixa--recuo-110 {
        padding-top: 8px;
    }
}

@media (min-width: 1025px) and (max-height: 1000px) {
    .heroi__painel {
        gap: 20px;
        padding-block: 20px 220px;
    }

    .heroi__caixa--recuo-110 {
        padding-top: 8px;
    }
}

@media (min-width: 1025px) and (max-height: 900px) {
    .heroi__titulo {
        font-size: 46px;
    }

    .heroi__texto {
        line-height: 27px;
    }
}

/* Fase 36. A faixa de patrocinadores passa a uma linha só nas janelas de
   portátil. Proposta ao Luís com as capturas dos seus dois ecrãs e escolhida
   por ele a 17/08/2026.

   O problema: o herói media 1111 px e não mudava com a altura da janela, de 730
   a 1305 px medidos. A faixa acabava sempre aos 986, e por isso ficava abaixo
   da dobra em todos os portáteis. Não é largura, é altura, e o que confundia
   era a escala do Windows: o portátil do Luís a 125% dá 1536 × 772.

   Porquê uma linha em vez de encolher as duas: encolher em duas linhas obrigava
   a caixa a descer aos 93 px, que é exactamente o tamanho que o Luís mandou
   aumentar a 13/08 por ser pequeno de mais. Numa linha só a caixa fica em 126 px
   e ainda se poupa mais altura, porque desaparece a linha inteira de baixo.

   O tecto de largura não é gosto, é o muro azul: a sonda
   ferramentas/fase36/muro-e-largura.js mediu cerca de 716 px de muro à altura
   da faixa a 1536, contra os 560 que ela usava. Os min(700px, 46vw) travam-na
   com pelo menos 32 px de folga até à diagonal, nas seis larguras medidas.

   As duas travas de --faixa-caixa são precisas as duas, e a segunda custou uma
   corrida: com só a altura, a 1440 os quatro logótipos não cabiam na linha, a
   linha SILVER quebrava, e o herói crescia outra vez (faltavam 29 px). A
   largura decide se cabem; a altura decide quanto espaço há.

   Fica de fora, e está escrito: janelas de 632 e 664 px de altura continuam sem
   espaço para a faixa. Melhoram de 266 e 234 px em falta para 78 e 46, mas não
   cabem, e cabê-las obrigaria a encolher abaixo do que o Luís aprovou.

   Medido em produção depois de publicar, em provas/fase36-heroi-janelas.md.   */
@media (min-width: 1025px) and (max-height: 900px) {
    .heroi__caixa--faixa {
        padding-top: 16px;
        width: min(700px, 46vw);
    }

    .heroi-faixa {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        --faixa-caixa: clamp(105px, min(16.5vh, 8.2vw), 145px);
    }
}

/* Telemóvel: o muro ocupa a largura toda com a diagonal em baixo, o texto
   centra, e a foto fica em destaque na faixa inferior. */
@media (max-width: 767px) {
    .heroi {
        min-height: 600px;
        align-items: flex-start;
        background-position: center bottom;
    }

    .heroi::before {
        clip-path: polygon(0 0, 100% 0, 100% 72%, 0 88%);
    }

    .heroi__painel {
        width: 100%;
        min-width: 0;
        max-width: none;
        gap: 15px;
        align-items: center;
        text-align: center;
        /* No telemóvel a fita do marquee está escondida (display: none, mais
           abaixo), por isso não há nada de que a reserva tenha de proteger.
           Eram 200 px de muro vazio; passam a 60. */
        padding-block: 40px 60px;
    }

    .heroi__caixa--recuo-30,
    .heroi__caixa--recuo-60,
    .heroi__caixa--recuo-80 {
        padding-left: 0;
    }

    .heroi__caixa--recuo-110 {
        padding: 8px 0 0;
    }

    .heroi__subtitulo,
    .heroi__data {
        font-size: 17px;
        line-height: 24px;
    }

    .heroi__texto {
        line-height: 27px;
    }

    .heroi__caixa--recuo-110 .botao {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Fase 23: 60% no telemóvel, GOLD centrado e os três SILVER por baixo,
       a acompanhar o painel do herói, que já centra nesta largura. */
    .heroi-faixa {
        --escala: 0.55;
        align-items: center;
        gap: 14px;
    }

    .heroi-faixa__linha {
        justify-content: center;
    }

    /* No telemóvel o muro ocupa a largura toda e a faixa acompanha o painel. */
    .heroi__caixa--faixa {
        padding: 20px 0 0;
        width: 100%;
    }
}


/* 14. Marquee =============================================================
   Secções 0259ae9 e 101a942. O CSS é o do widget HTML do site atual, copiado
   tal e qual, incluindo os 60 segundos da volta e o translateX de 10% a -100%.

   180 px de altura sem contar a rotação: 40 px de padding em cima e em baixo
   mais os 100 px fixos do .marquee.                                          */

/* As faixas rodadas 2 graus alargam a caixa e davam 2 a 3 px de scroll
   lateral em todas as larguras (DF14 da fase 9). O clip no main corta o
   excesso sem criar um contentor de scroll, e o sticky do cabecalho vive
   fora do main, por isso nao e afetado. */
main {
    overflow-x: clip;
}

.marquee-faixa {
    display: flex;
    align-items: center;
    width: 100%;
}

.marquee-faixa__interior {
    width: 100%;
}

.marquee-faixa__caixa {
    padding: 40px 0;
    width: 100%;
}

.marquee-faixa--um {
    margin-top: -150px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: rotate(-2deg);
}

/* Fase 17C. No site atual a fita nascia de duas sombras interiores, um brilho
   azul-claro sobre um véu preto, e com o Marine por baixo a mistura ótica dava
   um azul que não é de nenhuma cor do guia (pergunta do Luís, 11/08). Passa a
   superfície Marine sólida, como o resto das superfícies da marca. */
.marquee-faixa--dois {
    margin: -20px 0 40px;
    background-color: var(--azul);
    transform: rotate(2deg);
}

.marquee {
    padding: 0;
    overflow: hidden;
    height: 100px;
}

/* O GIF do arraste tem 309 px e era esticado a 472 no tablet, ficava
   pixelizado (DF18 da fase 9). Mostra-se no tamanho natural, centrado. */
.ancoras__arraste img {
    max-width: 309px;
    width: 100%;
    height: auto;
    margin-inline: auto;
    display: block;
}

.track {
    width: auto;
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 60s linear infinite;
}

.track span {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--t-marquee);
    line-height: 90px;
    color: #fff;
    opacity: 1;
    margin-right: 40px;
    text-transform: uppercase;
    top: 5px;
    position: relative;
}

.track img {
    border-radius: 12px;
}

@keyframes scroll-left {
    0% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@media (max-width: 767px) {

    /* O primeiro marquee não existe no telemóvel. Medido na fase 0. */
    .marquee-faixa--um {
        display: none;
    }

    .marquee-faixa--dois {
        margin: -10px 0 20px;
    }

    .marquee-faixa__caixa {
        padding: 0;
    }

    .marquee {
        padding-top: 20px;
    }

    .track span {
        top: -5px;
    }

    .track img {
        top: -20px;
    }
}


/* 15. Contador ============================================================
   Secção 2ebde95. Dois contadores lado a lado, Poppins 700 48/48.
   Os dias a preto, o resto a azul da marca.                                  */

.contador-faixa {
    margin-top: -40px;
    background: var(--cinza-claro);
}

.contador-faixa__interior {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    padding: 100px 0 50px;
}

.contador-faixa__linha {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* Era 0 e os dois grupos ficavam colados, "68 DIAS08 H" (DF16 da
       fase 9). O site atual mostra um intervalo claro entre eles. */
    gap: 48px;
    flex-wrap: wrap;
    width: 100%;
}

.contador {
    font-family: 'Poppins', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
}

.contador--preto {
    color: var(--preto);
}

.contador--azul {
    color: var(--azul-realce);
}

.contador__item {
    display: inline-block;
    margin-right: 5px;
}

@media (max-width: 767px) {
    .contador-faixa {
        margin-top: 0;
        padding-inline: var(--padding-lateral);
    }

    .contador-faixa__interior {
        padding: 40px 0;
    }

    /* Os dias ficam a 48 px e as horas, minutos e segundos passam a 27. */
    .contador--azul {
        font-size: 27px;
        line-height: 27px;
    }
}


/* 16. Secções de duas colunas =============================================
   Secções a0cff7b (sobre o evento), 2729db1 (regulamento) e ad6f9bb
   (resultados). A mesma armação, com as colunas trocadas e larguras próprias. */

.seccao--sobre,
.seccao--tshirt,
.seccao--parceiros {
    background: var(--branco);
}

.seccao--regulamento {
    background: var(--cinza-claro);
}

.seccao--video {
    background: var(--cinza-claro);
}

.seccao--contacto {
    background: var(--cinza-claro);
}

.seccao--sobre>.conteudo {
    padding-block: 60px 120px;
}

.seccao--tshirt>.conteudo {
    padding-block: 40px 120px;
}

@media (max-width: 767px) {

    .seccao--sobre>.conteudo,
    .seccao--tshirt>.conteudo {
        padding-block: var(--padding-vertical);
    }
}

/* Fase 29 (B2): o mesmo que na secção final, e pelo mesmo motivo. */
.seccao--resultados {
    background-color: var(--azul);
    background-position: center center;
    background-size: cover;
}

.seccao--resultados[data-fundo="pronto"] {
    background-image: url("/wp-content/uploads/2025/06/Background-Image.webp");
}

.duas-colunas {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0 48px;
}

.duas-colunas__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
    width: 571px;
}

.duas-colunas__imagens {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 686px;
}

.duas-colunas__imagem-grande {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.duas-colunas__imagens-pequenas {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
}

.duas-colunas img {
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

/* Medidas de cada uma, do espelho. */
.seccao--sobre .duas-colunas__imagem-grande img {
    width: 418px;
    height: 561px;
}

.seccao--sobre .duas-colunas__imagens-pequenas img {
    width: 240px;
    height: 274px;
}

.seccao--regulamento .duas-colunas__imagem-grande img {
    width: 429px;
    height: 520px;
}

.seccao--regulamento .duas-colunas__imagens-pequenas img {
    width: 247px;
    height: 229px;
}

.duas-colunas--resultados .duas-colunas__texto {
    width: 653px;
}

.duas-colunas--resultados .duas-colunas__imagens {
    width: 522px;
}

.duas-colunas--resultados .duas-colunas__imagem-grande img {
    width: 522px;
    height: 455px;
}

@media (max-width: 1024px) {

    .duas-colunas__texto,
    .duas-colunas__imagens,
    .duas-colunas--resultados .duas-colunas__texto,
    .duas-colunas--resultados .duas-colunas__imagens {
        width: auto;
        flex: 1 1 0;
    }
}

@media (max-width: 767px) {
    .duas-colunas {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gap);
    }

    /* Esticados, senão uma palavra comprida do H2 empurra a coluna para fora
       do ecrã e cria barra de deslocamento horizontal. */
    .duas-colunas__texto {
        align-items: stretch;
    }

    .duas-colunas__texto,
    .duas-colunas__imagens,
    .duas-colunas--resultados .duas-colunas__texto,
    .duas-colunas--resultados .duas-colunas__imagens {
        width: 100%;
    }

    .duas-colunas__imagens {
        flex-direction: column;
    }

    .duas-colunas__imagens-pequenas {
        flex-direction: row;
    }

    .duas-colunas img,
    .seccao--sobre .duas-colunas__imagem-grande img,
    .seccao--sobre .duas-colunas__imagens-pequenas img,
    .seccao--regulamento .duas-colunas__imagem-grande img,
    .seccao--regulamento .duas-colunas__imagens-pequenas img,
    .duas-colunas--resultados .duas-colunas__imagem-grande img {
        width: 100%;
        height: auto;
    }

    /* «Relembra conquistas» é o único H2 a 34 px no telemóvel. */
    .seccao--resultados .titulo {
        font-size: 34px;
        line-height: 37.4px;
    }
}


/* 17. Carrossel ===========================================================
   Substitui os seis Swiper 8, como manda a secção 6 da especificação:
   scroll-snap do CSS mais setas. Funciona com o dedo, com o rato, com o
   teclado e sem JavaScript. O andamento automático é comportamento do site
   atual e está no site.js.                                                   */

.carrossel {
    position: relative;
}

.carrossel__pista {
    display: flex;
    gap: var(--espaco);
    overflow-x: auto;
    /* Fase 46: o overflow-x: auto punha o eixo vertical em auto. Com o
       scale(1.05) do logotipo ao passar o rato, a pista ganhava 4 px de
       sobra e a roda do rato ficava presa nela, e nao na pagina. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carrossel__pista::-webkit-scrollbar {
    display: none;
}

/* Galeria em modo fita (fase 11): sem snap, que luta com o andamento
   continuo, e sem setas, que deixam de fazer sentido. */
.carrossel--fita .carrossel__pista {
    scroll-snap-type: none;
}

.carrossel--fita .carrossel__seta {
    display: none;
}

.carrossel__slide {
    flex: 0 0 calc((100% - (var(--por-ecra) - 1) * var(--espaco)) / var(--por-ecra));
    scroll-snap-align: start;
}

/* As setas só se veem quando o rato está por cima ou quando têm o foco. */
.carrossel__seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--branco);
    background: rgba(0, 7, 45, 0.5);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.2s;
}

.carrossel:hover .carrossel__seta,
.carrossel__seta:focus-visible {
    opacity: 1;
}

.carrossel__seta[disabled] {
    display: none;
}

.carrossel__seta svg {
    width: 22px;
    height: 22px;
}

.carrossel__seta--anterior {
    left: 8px;
}

.carrossel__seta--seguinte {
    right: 8px;
}

@media (max-width: 1024px) {
    .carrossel__pista {
        gap: var(--espaco-telemovel);
    }

    .carrossel__slide {
        flex-basis: calc((100% - (var(--por-ecra-tablet) - 1) * var(--espaco-telemovel)) / var(--por-ecra-tablet));
    }
}

@media (max-width: 767px) {
    .carrossel__slide {
        flex-basis: calc((100% - (var(--por-ecra-telemovel) - 1) * var(--espaco-telemovel)) / var(--por-ecra-telemovel));
    }
}


/* 18. Galeria =============================================================
   Secção 98be5ac. Nove fotografias quadradas, seis à vista no computador,
   quatro no tablet e duas no telemóvel, sem espaço entre elas.               */

.galeria {
    background: var(--cinza-claro);
}

/* A imagem fica em linha, e não em bloco, tal como no site atual. São esses
   7,8 px do espaço da linha de base que dão os 245 px de altura da faixa em
   vez dos 237 da imagem. Copia-se o que se vê. */
.galeria__imagem {
    width: 100%;
    height: auto;
    border-radius: 0;
}


/* 19. T-shirt =============================================================
   Secção 15687fd6.                                                           */

.tshirt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.seccao--tshirt .titulo {
    width: 1174px;
    max-width: 100%;
}

.tshirt__imagens {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 1109px;
    max-width: 100%;
}

.tshirt__cartaz {
    flex: 1 1 auto;
}

.tshirt__cartaz img {
    display: block;
    width: 824px;
    max-width: 100%;
    height: 925px;
    object-fit: cover;
    border-radius: 12px;
}

.tshirt__camisolas {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
}

/* Eram tres camisolas de 275; com a de 2025 no historico (pedido do Luis,
   fase 10) sao quatro de 224, que fecham com a altura do teaser ao lado. */
.tshirt__camisolas img {
    display: block;
    width: 224px;
    height: 224px;
    border-radius: 12px;
}

.tshirt__acoes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
}

/* Teaser da T-shirt 2026 (fase 10, DF11, decisao do Luis): a arte de 2026
   ainda nao existe, por isso a camisola aparece escurecida com a pergunta
   por cima. O texto e HTML, pronto para as linguas. */
.tshirt__cartaz--teaser {
    position: relative;
}

.tshirt__teaser {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    text-align: center;
    padding: 24px;
    /* Fase 47: a camada tem a largura da imagem e nao a do cartaz. Acima dos
       1280 px o cartaz tem 875 px e a imagem 824, encostada a esquerda, e o
       «?» ficava 25 px a direita do eixo da T-shirt. */
    right: auto;
    width: 824px;
    max-width: 100%;
}

.tshirt__teaser-rotulo {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--branco);
    margin: 0;
}

.tshirt__teaser-ponto {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 240px;
    line-height: 1;
    color: var(--branco);
    text-shadow: 0 0 60px rgba(0, 169, 255, 0.9), 0 0 140px rgba(0, 169, 255, 0.5);
}

.tshirt__teaser-pergunta {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.6;
    color: var(--branco);
    max-width: 520px;
    margin: 0;
}

@media (max-width: 767px) {
    .tshirt__teaser {
        gap: 16px;
    }

    .tshirt__teaser-rotulo {
        font-size: 16px;
    }

    .tshirt__teaser-ponto {
        font-size: 130px;
    }

    .tshirt__teaser-pergunta {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .tshirt__imagens {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .tshirt__cartaz img {
        width: 100%;
        height: auto;
    }

    .tshirt__camisolas {
        flex-direction: row;
        width: 100%;
    }

    /* min-width: 0 deixa as tres camisolas encolher a serio; sem isso a
       ultima saia 3 px fora do ecra a 320 e a 375 (DF15 da fase 9). */
    .tshirt__camisolas img {
        width: 100%;
        height: auto;
        flex: 1 1 0%;
        min-width: 0;
    }
}


/* 20. Vídeo ===============================================================
   Secção bc18699. O bloco do vídeo mede 16 por 9. A fachada mostra a capa e o
   iframe só nasce ao clique, achado E05 e secção 6 da especificação.         */

/* Os três blocos da secção estão a 50 px uns dos outros, não a 24. */
.seccao--video>.conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.video-textos {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    width: 100%;
}

.video-textos__esquerda {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 897px;
}

.video-textos__direita {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 384px;
}

/* «A emoção está de volta» é 26/39, destacada do corpo (era Race Sport). */
.video-textos__esquerda .corpo {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 39px;
    color: var(--preto);
}

/* «Há coisas que não se explicam» é o único parágrafo em Poppins da página,
   com 1.150 px de largura e centrado. */
.video-remate {
    width: 1150px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo-destaque);
    line-height: 30px;
    text-align: center;
    color: var(--preto);
}

.video-remate p {
    margin-bottom: 14.4px;
}

.video {
    width: 100%;
}

.video__fachada {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    background: #000;
    border: 0;
    cursor: pointer;
}

.video__capa {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
}

.video__play svg {
    width: 100%;
    height: 100%;
}

.video__play-fundo {
    fill: #212121;
    fill-opacity: 0.8;
}

.video__play-seta {
    fill: #fff;
}

.video__fachada:hover .video__play-fundo {
    fill: #f00;
    fill-opacity: 1;
}

.video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

@media (max-width: 1024px) {

    .video-textos__esquerda,
    .video-textos__direita {
        width: auto;
        flex: 1 1 0;
    }
}

@media (max-width: 767px) {

    /* No telemóvel os blocos do vídeo e da chamada final ficam a 15 px uns dos
       outros, e não a 50. Medido. */
    .seccao--video>.conteudo,
    .seccao--final>.conteudo {
        gap: var(--gap);
    }

    .video-textos {
        flex-direction: column;
    }

    .video-textos__esquerda,
    .video-textos__direita {
        width: 100%;
    }

    .video-remate {
        font-size: var(--t-corpo);
        line-height: 27px;
    }
}


/* 21. Parceiros ===========================================================
   Secção 60ce2a4. Cinco escalões, 18 logótipos, cada um numa caixa de 150 px
   de altura com fundo #F1F1F1. Os logótipos não são imagens: são fundos de
   divs com role="img", tal como no site atual.                               */

/* O cabeçalho da secção tem intervalos de 15 px, não de 24, e o título e o
   parágrafo têm largura própria. Medido. */
.seccao--parceiros>.conteudo {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.seccao--parceiros .titulo {
    width: 1000px;
    max-width: 100%;
}

/* 1.171,1 medidos. Usa-se 1.172 para o parágrafo caber numa linha só, como
   no original, que o preenche quase até ao fim. */
.seccao--parceiros .corpo {
    width: 1172px;
    max-width: 100%;
}

.escaloes {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.escalao {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.escalao__cabeca {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
}

.escalao__titulo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo-grande);
    font-weight: 700;
    line-height: 36px;
    color: var(--preto-percursos);
}

.escalao__logo {
    height: 150px;
    background-color: #F1F1F1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

@media (max-width: 767px) {
    .escaloes {
        gap: 40px;
        margin-top: var(--gap);
    }
}


/* 22. Contacto e formulário ===============================================
   Secção 779826b6. Substitui o Gravity Forms, formulário 1.                  */

.contacto {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.contacto__esquerda {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 50px;
    width: 509px;
}

.contacto__texto {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* Os dois itens ficam a 12 px um do outro, nas três larguras. O site atual não
   usa intervalo: põe 6 px por baixo do primeiro e 6 por cima do segundo, e dá
   no mesmo. A fase 2 tinha aqui o --gap do site, que dava 24. Achado N04. */
.contacto__lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contacto__item a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.contacto__icone {
    display: flex;
    flex: 0 0 auto;
}

.contacto__texto-item {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    line-height: 27px;
    color: var(--cinza-email);
}

.contacto__formulario {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 764px;
}

/* O formulário, medido: grelha de 12 colunas com intervalo 16 px na horizontal.

   Na vertical, o site atual declara 40 px, mas as linhas da grelha do Gravity
   Forms ficam 15 px mais curtas do que os campos e os campos transbordam. O
   que se vê entre um campo e o seguinte são 25 px, medidos pela posição real
   de cada um: 0, 98,6, 197,2, 295,8 e 608,8. Vale o que se vê.

   Por baixo do último campo o Gravity Forms deixa 38,4 px. Como este modelo
   não tem a margem negativa da última linha, ficam 38,4 − 15 = 23,4. A fase 2
   tinha escrito 23 e faltavam-lhe 0,4 px. Achado N03. */
.formulario__campos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 25px 16px;
    padding-bottom: 23.4px;
}

.formulario__campo--largo {
    grid-column: span 12;
}

/* Fase 18B: a aceitação e o botão deixaram de flutuar lado a lado (9+3 do
   Gravity Forms) e empilham: texto de privacidade, caixa, botão por baixo. */
.formulario__campo--aceitacao {
    grid-column: span 12;
    border: 0;
    padding: 0;
    margin: 0;
}

.formulario__campo--enviar {
    grid-column: span 12;
    display: flex;
    align-items: flex-start;
}

/* No site atual as etiquetas eram invisíveis e só os leitores de ecrã as
   ouviam. A fase 18 (especificação RGPD de 12/08/2026) tornou-as visíveis:
   cada campo identifica-se e diz se é obrigatório ou opcional. Só a
   armadilha continua escondida, que é o papel dela. */
.formulario__armadilha {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.formulario__etiqueta {
    display: block;
    margin-bottom: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    font-weight: 600;
    color: var(--preto);
}

/* Fase 29 (E3): era `--cinza-rede`, #69727d, e sobre o cinzento do campo
   (#f1f1f1) dava 4,32:1 contra os 4,5 que o WCAG 1.4.3 exige a texto pequeno.
   Faltava muito pouco, e por isso o tom novo tambem e pouco mais escuro: passa
   a 4,74:1. A ficha `--cinza-rede` fica como esta, porque noutros sitios assenta
   sobre branco e ai ja cumpre; o que se corrige e este uso. */
.formulario__obrigatorio {
    font-weight: 400;
    font-size: var(--t-mini);
    color: #5c646e;
}

/* O aviso de privacidade do pacote legal, imediatamente antes do botão. */
.formulario__privacidade {
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    line-height: 1.55;
    color: var(--preto);
}

.formulario__privacidade a {
    color: var(--azul-realce);
}

/* Cada campo mede 74 px: 32 de entrelinha, 40 de espaçamento interior e 2 das
   duas bordas. A área de texto tem 288 px de altura mínima.

   A borda são 1 px, não 0,8. A fase 2 escreveu 0,8 porque foi o que a medição
   deu, e era o mesmo engano do achado L06: num ecrã com escala o browser
   desenha 1 px com 0,8 de largura calculada. O que a página declara é 1 px, e
   medido outra vez a escala 1 o campo dá 74. Achado N03. */
.formulario__entrada {
    display: block;
    width: 100%;
    padding: 20px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 32px;
    color: #00072D;
    background: var(--branco);
    border: 1px solid #F1F1F1;
    border-radius: 12px;
}

.formulario__entrada::placeholder {
    color: #888599;
}

.formulario__entrada--area {
    resize: vertical;
    height: 288px;
    min-height: 288px;
}

.formulario__aceitacao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.formulario__caixa {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #00428C;
    flex: 0 0 auto;
}

.formulario__aceitacao-texto {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    line-height: 20.02px;
    color: #00072D;
}

/* O #CC3366 destas duas ligações não está em lado nenhum do kit, e na página
   /contacto/ as mesmas ligações saem a preto. Achado G19, adiado. */
/* Era #CC3366, um vermelho fora da paleta (DF22 da fase 9). O padding
   vertical alarga o alvo de toque sem mexer na linha (DF20). */
/* Fase 29 (E4): o sublinhado nao e enfeite, e a unica coisa que diz que ali
   ha uma ligacao. O azul de realce sobre o texto azul-escuro do paragrafo tem
   2,02:1 de diferenca entre as duas cores, e o WCAG 1.4.1 pede 3:1 quando a cor
   e o unico sinal. Com sublinhado deixa de ser o unico sinal, e por isso a cor
   nao muda: e a correcao que menos mexe no que se ve. */
.formulario__aceitacao-texto a {
    color: var(--azul-realce);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding-block: 4px;
}

/* Fase 26: o `input[type=submit]` do site antigo tinha entrelinha 16 em vez de
   15, e essa diferença de 1 px era tudo o que separava este botão dos outros:
   dava-lhe 54 px em vez de 53. Não era decisão nenhuma, era herança. Passa a
   ser um .botao tamanho M como os outros, e só guarda a largura, porque um
   botão de envio a toda a largura do cartão é o que se espera de um
   formulário em telemóvel. Achado N03 fechado. */
.formulario__enviar {
    width: 100%;
}

@media (max-width: 1024px) {

    /* Todos os intervalos desta secção passam a 15 px fora do computador: o
       da linha, o da coluna esquerda e o do bloco de texto. A fase 2 tinha
       deixado 32 na linha e 50 na coluna. Achado N04. */
    .contacto {
        gap: 15px;
    }

    .contacto__esquerda {
        gap: 15px;
    }

    .contacto__formulario {
        gap: 15px;
    }
}

@media (max-width: 767px) {

    /* O email e a morada passam a 16/24 e os ícones a 20 px, e é por isso que
       a lista mede 60 e não 66. Achado N04. */
    .contacto__texto-item {
        font-size: var(--t-pequeno);
        line-height: 24px;
    }

    .contacto__icone svg {
        width: 20px;
        height: 20px;
    }

    /* A coluna esquerda passa à largura toda e a do formulário fica nos 544 px
       declarados, que a moldura corta. Achado N04. */
    .contacto {
        flex-direction: column;
    }

    .contacto__esquerda {
        width: 100%;
    }

    .contacto__formulario {
        width: 544px;
        max-width: 100%;
    }

    .formulario__campo--aceitacao,
    .formulario__campo--enviar {
        grid-column: span 12;
    }
}


/* 23. Chamada final =======================================================
   Secção 50f5efe. Fundo azul da marca por cima de Background-Image2.webp.    */

/* Fase 29 (B2): o fundo entra quando a secção se aproxima, e não à entrada da
   página. São 116 KB que estavam a ser pagos em todas as páginas do site para
   uma secção que está sempre no fim. A cor azul fica declarada de origem, por
   isso quem chegar antes da imagem vê a secção inteira e não um buraco, e quem
   tiver o JavaScript desligado recebe o fundo pelo <noscript> do layout. */
.seccao--final {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--azul);
    background-position: center center;
    background-size: cover;
}

.seccao--final[data-fundo="pronto"] {
    background-image: url("/wp-content/uploads/2025/06/Background-Image2.webp");
}

.seccao--final>.conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

/* O intervalo entre o H2 e o parágrafo é 24 px nas três larguras, e não o
   --gap do site, que passa a 15 abaixo dos 1.024. Medido no site atual em
   /percursos/ às três larguras: 24, 24 e 24. Achado L05, que vale também para
   a homepage e para as Informações, porque a secção é a mesma. */
.final {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    text-align: center;
}


/* 24. Tablet, de 768 a 1024 px ============================================
   A fase 1 tinha avisado, no achado I03, que estes valores vinham da base de
   dados e não de medição, e que se confirmavam na comparação de cada página.
   Confirmaram-se agora, medidos no site em produção a 768 px, e não batiam
   certo. Ficam aqui os medidos.

   A moldura mede 753 px (o browser tira 15 para a barra), a secção leva
   25 px de cada lado e o contentor de dentro leva 58 px em cima e em baixo
   mais 15 de cada lado. Sobram 673 px de conteúdo. O intervalo é 15 px.      */

@media (min-width: 768px) and (max-width: 1024px) {

    :root {
        --gap: 15px;
    }

    .conteudo {
        padding: 58px 15px;
    }

    .seccao--sobre>.conteudo,
    .seccao--tshirt>.conteudo {
        padding-block: 58px;
    }

    /* O cabeçalho e o rodapé desta largura estão agora nas secções 5 e 8, ao pé
       do resto das duas peças, com os valores medidos no site em produção a
       11/08/2026. Achado L01. */
    .botao-inscricao {
        padding: 12px 32px;
    }

    /* As secções de duas colunas empilham: a linha embrulha e cada coluna
       ocupa os 673 px todos. */
    .duas-colunas {
        flex-wrap: wrap;
        gap: 15px;
    }

    .duas-colunas__texto,
    .duas-colunas__imagens,
    .duas-colunas--resultados .duas-colunas__texto,
    .duas-colunas--resultados .duas-colunas__imagens {
        width: 100%;
        flex: 1 1 100%;
    }

    /* As imagens de dentro continuam lado a lado, sem embrulhar. */
    .duas-colunas__imagens {
        flex-wrap: nowrap;
    }

    .seccao--sobre .duas-colunas__imagem-grande img,
    .seccao--sobre .duas-colunas__imagens-pequenas img,
    .seccao--regulamento .duas-colunas__imagem-grande img,
    .seccao--regulamento .duas-colunas__imagens-pequenas img,
    .duas-colunas--resultados .duas-colunas__imagem-grande img {
        width: 100%;
        height: auto;
    }

    /* Vídeo: os blocos ficam a 15 px, e os dois textos continuam lado a lado. */
    .seccao--video>.conteudo {
        gap: 15px;
    }

    .video-textos {
        flex-wrap: nowrap;
        gap: var(--gap);
    }

    /* Contacto: as duas colunas passam a 544 px fixos e, numa linha de 673,
       empilham. A fase 2 pôs aqui largura de 100%, e as duas ficavam mais
       largas do que são: o H2 «Entra em contacto connosco» cabia em duas
       linhas em vez de três. Achado N04. */
    .contacto {
        flex-wrap: wrap;
        gap: 15px;
    }

    .contacto__esquerda,
    .contacto__formulario {
        width: 544px;
        max-width: 100%;
        flex: 0 0 auto;
    }

    /* Chamada final */
    .seccao--final>.conteudo {
        gap: 15px;
    }

    /* Herói: 922 px, com o painel a ocupar a largura toda e a rotação de 15
       graus mantida. Medido. */
    /* O herói do tablet vive agora no bloco 13, com o muro em clip-path. */

    /* Contador: o contentor de dentro leva 58 px em cima e em baixo. */
    .contador-faixa {
        margin-top: -40px;
        padding-inline: 25px;
    }

    .contador-faixa__interior {
        padding: 58px 15px;
    }

    /* As imagens guardam a altura e a largura passa a flexível. Medidas uma a
       uma a 768: a coluna pequena fica com 36% e a grande com o resto. */
    .duas-colunas__imagens {
        min-height: 300px;
    }

    .duas-colunas__imagens-pequenas {
        flex: 0 0 36%;
    }

    .seccao--sobre .duas-colunas__imagem-grande img {
        width: 100%;
        height: 550px;
    }

    .seccao--sobre .duas-colunas__imagens-pequenas img {
        width: 100%;
        height: 269px;
    }

    .seccao--regulamento .duas-colunas__imagem-grande img {
        width: 100%;
        height: 520px;
    }

    .seccao--regulamento .duas-colunas__imagens-pequenas img {
        width: 100%;
        height: 223px;
    }

    .duas-colunas--resultados .duas-colunas__imagem-grande img {
        width: 100%;
        height: 455px;
    }

    /* T-shirt: cartaz 493 x 925 e camisolas de 164. */
    .tshirt__imagens {
        width: 100%;
    }

    .tshirt__cartaz img {
        width: 100%;
        height: 925px;
    }

    .tshirt__camisolas {
        flex: 0 0 164px;
    }

    .tshirt__camisolas img {
        width: 100%;
        height: 164px;
    }
}


/* =========================================================================
   FASE 3: A PÁGINA DE INFORMAÇÕES
   =========================================================================

   Os números daqui para baixo vêm de duas fontes, as duas do site em produção:
   - auditoria/espelho/medido/informacoes.md, medido no browser a 1440 px
   - as regras que o post 3874 imprime na própria página, lidas na captura de
     10 de agosto de 2026 em auditoria/captura-original/informacoes.html

   As dezasseis secções são todas iguais por dentro. É sempre a mesma escada:

     secção          espaçamento 60 px, fundo branco ou #F1F1F1 alternado
       .conteudo     1.305 px de largura, 60 px em cima e em baixo
         .assunto            coluna, centrada, 50 px de intervalo
           .assunto__cabeca  coluna, 24 px de intervalo    → o H2
           .assunto__texto   o texto                        → 24 px
           .assunto__bloco   50 px de espaçamento em cima   → mais texto

   Índice
   25. Herói das páginas
   26. Menu de âncoras
   27. Secções de assunto
   28. Tablet e telemóvel
   ========================================================================= */


/* 25. Herói das páginas ===================================================
   Secção 600524ac. Sem o painel rodado da homepage: é uma faixa com a imagem
   de fundo, o azul da marca por cima a 50% e o H1 em cima disso.

   A altura são 40vh, que é o que dá os 360 px medidos num ecrã de 900 px de
   altura. Não se troca por um valor fixo, porque o valor fixo era inventado.  */

.heroi-pagina {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 40vh;
    padding: 80px;
    background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/Image-Container_desktop_15-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/Image-Container_desktop_15-scaled.webp") 2x);
    background-image: image-set(url("/wp-content/uploads/2025/06/Image-Container_desktop_15-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/Image-Container_desktop_15-scaled.webp") 2x);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* O véu azul. No site atual é o background overlay do contentor, a 50%. */
.heroi-pagina::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--azul);
    opacity: 0.5;
}

/* 943 px medidos, alinhado à esquerda dentro da moldura. */
.heroi-pagina__interior {
    position: relative;
    width: 943px;
    max-width: 100%;
}

/* Poppins 700 54 px com entrelinha 3,2rem, que são 51,2 px. Maiúsculas. */
.heroi-pagina__titulo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h1-heroi);
    font-weight: 700;
    line-height: 3.2rem;
    text-transform: uppercase;
    color: var(--branco);
}


/* 26. Menu de âncoras =====================================================
   Secção bc18699, 128 px de altura. É o widget nested-carousel: onze assuntos,
   oito à vista no computador e dois a partir de 1.024 px, cada um numa cápsula
   branca com borda de 2 px do azul da marca e raio de 60.

   O intervalo entre cápsulas são 10 px, medido no CSS da página.              */

.conteudo--ancoras {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
}

/* 1.120 px, encostado à esquerda dos 1.305 do conteúdo. É o que o CSS da
   página manda: o contentor tem largura fixa dentro de um pai que estica. */
.ancoras {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 1120px;
    max-width: 100%;
}

.carrossel--ancoras {
    width: 100%;
}

/* A cápsula de cada assunto. Fase 10 (DF12): os alvos tinham 27 px de altura
   e texto de 14; passam a ~48 px com texto de 16, legiveis e tocaveis.

   Fase 26: medidas as 24 cápsulas, dão todas 48 px de altura, que é já o
   degrau médio do sistema, e a mais estreita tem 123 px. Passam o alvo tátil
   sem se lhes tocar. Só o raio era um valor solto: os 60 px passam à ficha.
   Não muda nada à vista, porque a 48 px de altura os dois raios desenham a
   mesma pílula. */
.ancoras__item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 18px;
    background: var(--branco);
    border: 2px solid var(--azul-realce);
    border-radius: var(--botao-raio);
    text-align: center;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Fase 17C: a cápsula inverte ao passar o rato, como os botões. */
.ancoras__item:hover {
    background: var(--azul-realce);
}

.ancoras__item:hover a {
    color: var(--branco);
}

/* Poppins 14/15 peso 600, como o browser calcula no site atual. O CSS da
   página declara Source Sans Pro: são famílias diferentes e a divergência
   está no achado J02. Manda o medido, como manda o método. */
.ancoras__item a {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--azul-realce);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}

/* No desktop as onze pills cabem em duas filas centradas: acabou a pill
   cortada na margem sem setas a vista (DF12 da fase 9). No tablet e no
   telemovel o carrossel de arrastar continua, com o GIF a explicar. */
@media (min-width: 1025px) {

    /* Fase 14: as filas de pills alinham a esquerda, pelas mesmas margens do
       cartao azul da Data (medido: os cartoes comecam padding-lateral para
       dentro da margem do conteudo). */
    .ancoras {
        width: 100%;
        padding-inline: var(--padding-lateral);
        box-sizing: border-box;
    }

    .carrossel--ancoras .carrossel__pista {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px 12px;
        max-width: none;
        overflow: visible;
        scroll-snap-type: none;
    }

    .carrossel--ancoras .carrossel__slide {
        flex: 0 0 auto;
    }

    .carrossel--ancoras .carrossel__seta {
        display: none;
    }
}

/* As setas deste carrossel são as do site atual: fora da pista, 13 px, sem
   fundo nem borda, na cor «Accent» do kit, que é o único sítio onde ela
   aparece em todo o site. */
.carrossel--ancoras .carrossel__seta {
    width: auto;
    height: auto;
    padding: 5px;
    color: var(--accent);
    background: none;
    border-radius: 100px;
    opacity: 1;
}

.carrossel--ancoras .carrossel__seta svg {
    width: 13px;
    height: 13px;
}

.carrossel--ancoras .carrossel__seta--anterior {
    left: -26px;
}

.carrossel--ancoras .carrossel__seta--seguinte {
    right: -26px;
}

/* O GIF do «arraste»: só existe a partir de 1.024 px para baixo, ocupa metade
   da largura e está centrado. O site.js esconde-o ao fim de 10 segundos. */
.ancoras__arraste {
    display: none;
}


/* 27. Secções de assunto ==================================================
   Doze secções com a mesma escada por dentro, e a décima terceira escondida.  */

/* Todas as secções de assunto, mais o menu de âncoras e a chamada final,
   cortam o que sai fora. É esse `overflow: hidden` que segura o menu de
   âncoras quando ele sangra 120vw no tablet, sem criar barra horizontal. */
.seccao--informacao {
    overflow: hidden;
}

/* Fase 10 (DF12): as doze seccoes tinham 60 px de padding, 50 de intervalo,
   34 no titulo e 50 no bloco, quase tudo ar: a pagina media 6772 px para
   trinta linhas de texto. Compacta-se para menos de metade sem tocar no
   texto nem na ordem visual. */
.seccao--informacao>.conteudo {
    padding-block: 32px;
}

/* No site atual eram dois cinzentos distintos, #F8F8F8 aqui e #F9F9F9 na
   homepage. Desde a fase 17 são o mesmo Off White #F1F1F1 do guia. */
.seccao--cinza-info {
    background: var(--cinza-informacoes);
}

/* O menu de âncoras leva 60 em cima e 30 em baixo, e a secção do Secretariado
   que vem logo a seguir leva 30 em cima e 60 em baixo. */
.seccao--ancoras>.conteudo {
    padding-block: 32px 16px;
}

.seccao--depois-ancoras>.conteudo {
    padding-block: 16px 32px;
}

.assunto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.assunto__cabeca {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
}

/* H2 de assunto: Poppins 700 48 px, entrelinha 1,1em, azul da marca, com
   34 px de espaçamento em cima que vêm do contentor do widget. */
.assunto__titulo {
    width: 100%;
    padding-top: 0;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h2);
    font-weight: 700;
    line-height: 1.1em;
    color: var(--azul-realce);
    text-align: start;
}

/* O corpo desta página é 24 px, não 18 como no resto do site. É a única
   página com este tamanho, e é ele que dá as alturas das secções. */
.assunto__texto {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo-grande);
    font-weight: 400;
    line-height: 1.5em;
    color: var(--preto);
    text-align: start;
}

/* Os 14,4 px por parágrafo são os mesmos da homepage, e é com eles que as
   alturas das doze secções fecham ao pixel. */
.assunto__texto p {
    margin-bottom: 14.4px;
}

/* As listas do editor de texto do site atual: 15 px de margem em volta, posta
   pelo CSS próprio do widget, e 5 px em cima e em baixo de cada item.
   O recuo e o ponto são os do browser, porque a reset.css do tema não ficou
   na captura. Achado J05. */
.assunto__texto ul {
    margin: 15px;
    padding-left: 40px;
    list-style: disc;
}

.assunto__texto li {
    padding: 5px 0;
}

.assunto__texto li p {
    margin-bottom: 0;
}

/* O bloco de texto que vem depois do título: 50 px de espaçamento em cima,
   além dos 50 de intervalo. Nas secções onde o texto é filho direto não há
   bloco, e por isso essas secções são 50 px mais baixas. */
.assunto__bloco {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-top: 8px;
}

/* O bloco do Voluntariado tem 30 px de intervalo e encosta à esquerda. */
.assunto__bloco--voluntariado {
    gap: 30px;
    align-items: flex-start;
}

/* Onde estava um bloco de 2025, fica a caixa vazia. Na fase 10 deixa de
   reservar altura: o ar da pagina foi compactado de proposito (DF12). */
.assunto__bloco--desativado {
    padding-top: 0;
}

/* Fase 11, redesenho autorizado pelo Luis: os dez assuntos em grelha de
   cartoes, e a Data em cartao azul de destaque. Os ids, as ancoras e o
   texto ficam tal e qual. */

.assuntos-grelha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;
    padding: 8px var(--padding-lateral) 64px;
}

.assuntos-grelha .seccao--informacao,
.assuntos-grelha .seccao--cinza-info {
    background: var(--cinza-informacoes);
    border: 1px solid rgba(0, 7, 45, 0.08);
    border-radius: 16px;
    overflow: visible;
}

.assuntos-grelha>.seccao--informacao>.conteudo {
    padding: 28px 28px 32px;
}

.assuntos-grelha .assunto {
    gap: 12px;
    align-items: flex-start;
}

.assuntos-grelha .assunto__titulo {
    font-size: 28px;
    padding-top: 0;
}

.assuntos-grelha .assunto__texto {
    font-size: 18px;
    line-height: 1.55;
}

.assuntos-grelha .assunto__bloco {
    padding-top: 4px;
}

.assuntos-grelha .assunto__bloco--desativado {
    display: none;
}

/* O cartao da Data e o primeiro da pagina e leva o azul da marca: e a
   informacao que quem visita mais procura. */
#data {
    background: var(--azul);
    border-radius: 16px;
    overflow: hidden;
}

#data>.conteudo {
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;
    padding: 32px 36px;
}

#data .assunto {
    gap: 10px;
    align-items: flex-start;
}

#data .assunto__titulo {
    color: var(--branco);
    padding-top: 0;
}

#data .assunto__texto {
    color: var(--branco);
    font-size: 20px;
}

/* O cartao da Data vive dentro da faixa cinza das ancoras, com folga. */
.seccao--depois-ancoras#data {
    width: calc(100% - 2 * var(--padding-lateral));
    max-width: calc(var(--conteudo) - 2 * var(--padding-lateral));
    margin: 0 auto 40px;
}

@media (max-width: 767px) {
    .assuntos-grelha {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-bottom: 40px;
    }

    .assuntos-grelha>.seccao--informacao>.conteudo {
        padding: 22px 20px 26px;
    }

    .assuntos-grelha .assunto__titulo {
        font-size: 24px;
    }

    #data>.conteudo {
        padding: 24px 20px;
    }

    #data .assunto__texto {
        font-size: 18px;
    }
}

/* Fase 11: reveals ao rolar e micro-interacoes. Tudo dentro do
   prefers-reduced-motion, e sem JavaScript nada disto existe. */
@media (prefers-reduced-motion: no-preference) {
    .revela {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .revela--visto {
        opacity: 1;
        transform: none;
    }

    /* Fase 17C: os botões e as cápsulas sobem 2 px ao passar o rato. A troca
       de cor vive fora deste bloco; só o movimento é motion. */
    .botao:hover,
    .botao-inscricao:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 7, 45, 0.25);
    }

    /* Fase 26: resposta ao toque. Em telemóvel não há hover, e sem isto o
       dedo carrega e não acontece nada até a página mudar. Vive dentro do
       prefers-reduced-motion porque é movimento, como a subida do hover. */
    .botao:active,
    .botao-inscricao:active,
    .consentimento__botao:active {
        transform: scale(0.98);
    }

    .ancoras__item:hover {
        transform: translateY(-2px);
    }

    .ancoras__item {
        transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .assuntos-grelha .seccao--informacao {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .assuntos-grelha .seccao--informacao:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 7, 45, 0.10);
    }

    .escalao__logo {
        transition: transform 0.25s ease;
    }

    .carrossel--parceiros .carrossel__slide:hover .escalao__logo {
        transform: scale(1.05);
    }
}

/* A chamada final desta página tem o corpo a 20/30, e não a 18/27. */
.corpo--final-20 {
    font-size: var(--t-corpo-destaque);
    line-height: 30px;
}

/* A faixa da galeria encosta ao rodapé com 10 px de margem negativa. */
.galeria--colada {
    margin-bottom: -10px;
}


/* 28. Tablet e telemóvel ==================================================
   Os valores são os `_tablet` e `_mobile` do post 3874, que é a outra metade
   do espelho. Confirmam-se na comparação, como o achado I03 manda.            */

@media (min-width: 768px) and (max-width: 1024px) {

    /* O espaçamento vertical sai da secção e passa para o contentor de dentro,
       58 px em cima e em baixo mais 15 de cada lado, tal como nas outras
       páginas. A secção fica com 25 px de cada lado e nada em cima. */
    .seccao--informacao>.conteudo,
    .seccao--ancoras>.conteudo,
    .seccao--depois-ancoras>.conteudo {
        padding: 32px 15px;
    }

    .assunto {
        gap: 15px;
    }

    .assunto__bloco {
        flex-direction: column;
    }

    /* O herói perde o espaçamento vertical e fica só com os 25 px laterais. */
    .heroi-pagina {
        padding: 0 25px;
    }

    /* O menu de âncoras passa a dois assuntos à vista e sangra para fora da
       moldura, com a conta de largura que o CSS próprio da secção faz. */
    .conteudo--ancoras {
        gap: 15px;
    }

    .ancoras {
        width: 120vw;
        max-width: none;
        margin-right: calc((100vw - 60vw) / -2);
    }

    /* E aparece o GIF do arraste, com metade da largura e centrado. */
    .ancoras__arraste {
        display: block;
        width: 100%;
        text-align: center;
    }

    .ancoras__arraste img {
        width: 50%;
        height: auto;
    }
}

@media (max-width: 767px) {

    /* Herói: 30vh e 40 px em cima e em baixo, com outra imagem de fundo e o
       véu azul mais carregado, a 70%. O título fica centrado e a 30 px. */
    .heroi-pagina {
        min-height: 30vh;
        padding: 40px 20px;
        background-image: url("/wp-content/uploads/2025/06/Image-3.webp");
        background-position: center center;
    }

    .heroi-pagina::before {
        opacity: 0.7;
    }

    .heroi-pagina__interior {
        width: 100%;
        text-align: center;
    }

    .heroi-pagina__titulo {
        font-size: 30px;
        line-height: 2.3rem;
    }

    /* As secções: 40 px em cima e em baixo. O menu de âncoras leva 40 e 20, e
       o Secretariado que vem a seguir leva 20 e 40. */
    .seccao--informacao>.conteudo {
        padding-block: 40px;
    }

    .seccao--ancoras>.conteudo {
        padding-block: 40px 20px;
    }

    .seccao--depois-ancoras>.conteudo {
        padding-block: 20px 40px;
    }

    /* O intervalo entre blocos passa de 50 para 25, e os blocos perdem os
       50 px de espaçamento em cima. */
    .conteudo--ancoras {
        gap: 0;
    }

    .assunto {
        gap: 25px;
    }

    .assunto__bloco {
        padding-top: 0;
    }

    .assunto__bloco--desativado {
        padding-top: 0;
    }

    /* H2 a 24 px com 15 de espaçamento em cima, e corpo a 18. */
    .assunto__titulo {
        padding-top: 15px;
        font-size: 24px;
    }

    .assunto__texto {
        font-size: var(--t-corpo);
    }

    /* O menu de âncoras puxa 30 px para a esquerda e fica sem setas. */
    .ancoras {
        width: 100%;
        margin-left: -30px;
    }

    .carrossel--ancoras .carrossel__seta {
        display: none;
    }

    .ancoras__arraste {
        display: block;
        width: 100%;
        text-align: center;
    }

    .ancoras__arraste img {
        width: 50%;
        height: auto;
    }

    /* A chamada final passa a 16 px, como o resto da página encolhe. */
    .corpo--final-20 {
        font-size: var(--t-pequeno);
        line-height: 24px;
    }
}


/* =========================================================================
   FASE 4: PERCURSOS, PERCURSO DE 10 KM E CAMINHADA DE 5 KM
   =========================================================================

   Os números daqui para baixo vêm de duas fontes, as duas do site em produção
   e lidas a 10 de agosto de 2026:
   - auditoria/espelho/medido/percursos-fase4.md, medido no browser nas três
     páginas e nas três larguras
   - o CSS que os posts 2393, 2381 e 2290 imprimem na própria página, lido nas
     capturas de auditoria/captura-original/

   As três páginas são a mesma escada:

     .heroi-pagina        imagem de fundo, 40vh, 80 px de espaçamento
       .heroi-percurso    coluna encostada à esquerda, 20 px de intervalo
     .seccao--percursos   120 px em cima e em baixo, 60 aos lados
       .conteudo          1.305 px
         percursos          sobrescrito, H2, corpo e dois cartões, a 24 px
         10 km e 5 km       .percurso-cabeca e .percurso-duas, a 50 px
     .seccao--destaques   só nas duas páginas de percurso, quatro colunas
     .seccao--final       a mesma da homepage e das Informações
     .galeria--colada     a mesma das Informações

   Índice
   29. Herói das três páginas
   30. Mapas do ridewithgps, com fachada ao clique
   31. /percursos/, os dois cartões
   32. /percurso-10km/ e /caminhada-5km/
   33. Tablet e telemóvel
   ========================================================================= */


/* 29. Herói das três páginas ==============================================
   Secção 600524ac, a mesma das Informações por fora e diferente por dentro:
   leva um subtítulo por baixo do H1 e não tem véu azul nenhum.               */

/* O contentor destas três páginas só declara a imagem de fundo, e nunca o
   background_overlay_background que as Informações têm. Sem essa chave o
   Elementor não desenha véu. Achado L02. */
.heroi-pagina--percursos::before,
.heroi-pagina--10km::before,
.heroi-pagina--5km::before {
    content: none;
}

.heroi-pagina--percursos {
    background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/percursos_desktop-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/percursos_desktop-scaled.webp") 2x);
    background-image: image-set(url("/wp-content/uploads/2025/06/percursos_desktop-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/percursos_desktop-scaled.webp") 2x);
    background-position: center center;
}

.heroi-pagina--10km {
    background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/Image-Container_desktop_16-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/Image-Container_desktop_16-scaled.webp") 2x);
    background-image: image-set(url("/wp-content/uploads/2025/06/Image-Container_desktop_16-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/Image-Container_desktop_16-scaled.webp") 2x);
}

.heroi-pagina--5km {
    background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/5km_desktop-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/5km_desktop-scaled.webp") 2x);
    background-image: image-set(url("/wp-content/uploads/2025/06/5km_desktop-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/5km_desktop-scaled.webp") 2x);
}


/* Contentor 563c9611: coluna encostada à esquerda, 20 px de intervalo. */
.heroi-percurso {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

/* O H1 é o mesmo do herói das Informações em família, tamanho, peso, caixa e
   cor. O que muda é a entrelinha, 3rem, e a largura fixa de 814 px, que é a
   que faz o título quebrar onde quebra. */
.heroi-percurso__titulo {
    width: 814px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h1-heroi);
    font-weight: 700;
    line-height: 3rem;
    text-transform: uppercase;
    color: var(--branco);
}

/* A caminhada leva 3,5rem. É a única diferença de tipografia entre as duas
   páginas de percurso. */
.heroi-percurso__titulo--5km {
    line-height: 3.5rem;
}

/* Poppins 40/48, o maior corpo de texto do site. A entrelinha é 1,2
   vezes o tamanho, e não um número fixo: no telemóvel o tamanho cai para 20 e
   a entrelinha acompanha, para 24. */
.heroi-percurso__subtitulo {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--branco);
}

.heroi-percurso__subtitulo p {
    margin-bottom: 14.4px;
}


/* 30. Mapas do ridewithgps, com fachada ao clique =========================
   Decisão D16. O site atual embebe um <iframe> do ridewithgps.com que carrega
   em todas as visitas. Aqui a capa é nossa e o <iframe> só nasce ao clique,
   tal como o vídeo do YouTube da fase 2.

   A caixa é a do site atual, que a página imprime na classe `.map`:
   450 px de altura em /percursos/, 700 nas duas páginas de percurso, e 400 px
   abaixo de 768, com 459 e 359 px de largura.

   O bloco do mapa mede mais 7,8 px do que a caixa (457,8 contra 450, medido):
   é o espaço que um elemento em linha deixa por baixo da linha de base. Por
   isso a fachada e o iframe ficam ambos em linha, e não em bloco.            */

.mapa {
    width: 100%;
}

.mapa__fachada {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    background: var(--cinza-claro);
    border: 0;
    cursor: pointer;
}

.mapa iframe {
    display: inline-block;
    width: 100%;
    border: 0;
}

.mapa--cartao .mapa__fachada,
.mapa--cartao iframe {
    height: 450px;
}

.mapa--pagina .mapa__fachada,
.mapa--pagina iframe {
    height: 700px;
}

/* A capa é a captura do próprio embed, larga (2610x1400 desde a fase 10,
   DF04), e aparece inteira e centrada: `contain` e não `cover`, para o
   percurso não ficar cortado. Na caixa larga do desktop encaixa sem faixas. */
.mapa__capa {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mapa__marca {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    background: var(--azul);
    border-radius: 100px;
}

.mapa__marca svg {
    width: 32px;
    height: 32px;
    fill: var(--branco);
}

.mapa__fachada:hover .mapa__marca {
    background: var(--azul-borda);
}


/* 31. /percursos/, os dois cartões ========================================
   Secção bc18699: sobrescrito, H2, corpo e a linha dos dois cartões, tudo a
   24 px de distância, dentro dos 1.305 px do conteúdo.                       */

.seccao--percursos {
    overflow: hidden;
}

.conteudo--percursos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* No site atual o H2 destas três páginas era #111111, distinto do #141414.
   Desde a fase 17 é o mesmo Marine Blue do resto do site. */
.titulo--percurso {
    color: var(--preto-percursos);
}

/* «Escolhe o teu desafio», 1.000 px. */
.titulo--desafio {
    width: 1000px;
    max-width: 100%;
}

/* O corpo desta página é Poppins 20/28, e é a única do site com esta
   combinação. As páginas de cada percurso usam Poppins a 24. */
.corpo--percursos {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}

/* Contentor a9e06a6: 80 px entre os dois cartões. */
.percursos-cartoes {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    align-self: stretch;
}

/* min-width: 0 para o cartão poder encolher abaixo da largura do mapa. Sem
   isso os 459 px do mapa a 768 empurravam o segundo cartão para baixo, e no
   site atual eles ficam lado a lado até aos 767. */
.percursos-cartao {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
}

/* O H2 de cada cartão: Poppins 700 32/32, azul da marca. */
.titulo--percurso-cartao {
    font-size: var(--t-h2-cartao);
    line-height: 1;
    color: var(--azul-realce);
}

/* O botão fica centrado, numa linha só sua. */
.percursos-cartao__botao {
    display: flex;
    justify-content: center;
}

/* Os botões «Ver os detalhes» têm o ícone depois do texto, com 12 px pelo
   meio: no HTML o ícone vem primeiro e o CSS inverte a linha. */
.botao--icone-direita {
    flex-direction: row-reverse;
    gap: 12px;
}



/* 32. /percurso-10km/ e /caminhada-5km/ ===================================
   As duas são a mesma página. Secção bc18699 com dois blocos a 50 px, mais a
   secção 6a0d72a com os quatro destaques.                                    */

.conteudo--percurso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

/* Contentor 3a32e4d: sobrescrito, H2, primeiro parágrafo e mapa, a 24 px. */
.percurso-cabeca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

/* O H2 dos 10 km ocupa 75% da moldura; o da caminhada, 1.000 px. */
.titulo--percurso-pagina {
    width: 75%;
}

.titulo--percurso-5km {
    width: 1000px;
    max-width: 100%;
}

/* O primeiro parágrafo é 24/33,6 e o resto do corpo é 24/36. São duas
   entrelinhas para o mesmo tamanho, e é mesmo assim no site atual. */
.corpo--intro {
    font-size: var(--t-corpo-grande);
    line-height: 33.6px;
    text-align: center;
}

/* Nos 10 km o parágrafo ocupa 60% da moldura; na caminhada não tem largura. */
.corpo--intro-10km {
    width: 60%;
}

/* O negrito deste parágrafo é azul da marca. */
.corpo--intro strong {
    color: var(--azul-realce);
}

.corpo--percurso {
    font-size: var(--t-corpo-grande);
    line-height: 36px;
}

/* Contentor e639c70: imagem a 35% e texto a 60%, com 70 px pelo meio e 50 px
   de espaçamento em cima. */
.percurso-duas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    width: 100%;
    padding-top: 50px;
}

.percurso-duas__imagem {
    width: 35%;
}

.percurso-duas__texto {
    width: 60%;
}

/* A imagem é 452x505 e aparece a 455x450, cortada pelo meio. Em bloco, para
   não deixar por baixo os 7 px da linha de base: o widget do site atual mede
   450, exatamente a altura da imagem. */
.percurso-duas__imagem img {
    display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center center;
}

/* Secção 6a0d72a: quatro colunas com 110 px entre elas e 120 px por baixo.
   É a única secção destas páginas que não tem espaçamento em cima. */
.seccao--destaques {
    padding-block: 0 120px;
}

.destaques {
    display: flex;
    gap: 110px;
    width: 100%;
    max-width: var(--conteudo);
    margin-inline: auto;
}

/* min-width: 0 pela mesma razão dos cartões: no tablet a coluna mede 75,8 px,
   menos do que a palavra mais comprida do texto, e sem isto a coluna não
   encolhia até lá. */
.destaques__item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
}

.destaques__item img {
    align-self: center;
}

.corpo--destaque {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}


/* 33. Tablet e telemóvel ================================================== */

/* O `.map` do site atual troca aos 768 px, e não aos 767 como o resto do
   site. Fica na sua própria consulta, tal e qual. */
@media (max-width: 768px) {

    .mapa--cartao .mapa__fachada,
    .mapa--cartao iframe {
        width: 459px;
        max-width: 100%;
        height: 400px;
    }

    .mapa--pagina .mapa__fachada,
    .mapa--pagina iframe {
        width: 359px;
        max-width: 100%;
        height: 400px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    /* O herói passa a 943 px e sangra para fora da moldura de 703. É assim no
       site atual, e é isso que lhe dá a barra horizontal. Achado L03. */
    .heroi-percurso {
        width: 943px;
        max-width: none;
        gap: 15px;
    }

    .conteudo--percurso {
        gap: 15px;
    }

    /* As duas colunas empilham, sem intervalo entre elas. */
    .percurso-duas {
        flex-direction: column;
        gap: 0;
    }

    /* A secção dos destaques guarda os 60 px laterais, e é a única. */
    .seccao--destaques {
        padding-inline: 60px;
    }
}

@media (max-width: 767px) {

    /* Ao contrário das Informações, estas três páginas não trocam de imagem no
       telemóvel nem baixam para 30vh: é a mesma imagem, puxada 450 px para a
       esquerda, e continuam com 40vh. */
    .heroi-pagina--percursos,
    .heroi-pagina--10km,
    .heroi-pagina--5km {
        min-height: 40vh;
        background-position: -450px 0;
    }

    .heroi-pagina--percursos {
        background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/percursos_desktop-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/percursos_desktop-scaled.webp") 2x);
    background-image: image-set(url("/wp-content/uploads/2025/06/percursos_desktop-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/percursos_desktop-scaled.webp") 2x);
    }

    .heroi-pagina--10km {
        background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/Image-Container_desktop_16-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/Image-Container_desktop_16-scaled.webp") 2x);
    background-image: image-set(url("/wp-content/uploads/2025/06/Image-Container_desktop_16-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/Image-Container_desktop_16-scaled.webp") 2x);
    }

    .heroi-pagina--5km {
        background-image: -webkit-image-set(url("/wp-content/uploads/2025/06/5km_desktop-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/5km_desktop-scaled.webp") 2x);
    background-image: image-set(url("/wp-content/uploads/2025/06/5km_desktop-2048x427.webp") 1x,
                                url("/wp-content/uploads/2025/06/5km_desktop-scaled.webp") 2x);
    }

    .heroi-percurso {
        gap: 15px;
    }

    /* Era 24 px, o H1 mais pequeno das nove paginas no telemovel, contra 32
       a 40 nas restantes (DF21 da fase 9): sobe para 32 e alinha na escala. */
    .heroi-percurso__titulo {
        width: 100%;
        font-size: 32px;
        line-height: 2.4rem;
        text-align: center;
    }

    /* Em /percursos/ o H1 é maior: 36 px com 2,3rem. */
    .heroi-percurso__titulo--percursos {
        font-size: 36px;
        line-height: 2.3rem;
    }

    .heroi-percurso__titulo--5km {
        line-height: 2.1rem;
    }

    .heroi-percurso__subtitulo {
        width: 100%;
        font-size: 20px;
        text-align: center;
    }

    /* O sobrescrito ganha uma cápsula de 7 por 24, sem fundo nem borda. */
    .sobrescrito--capsula {
        padding: 7px 24px;
        border-radius: 100px;
    }

    /* Os H2 passam a 25 px, com 15 px de espaçamento em cima. */
    .titulo--desafio,
    .titulo--percurso-pagina,
    .titulo--percurso-5km {
        width: 100%;
        padding-top: 15px;
        font-size: 25px;
    }

    .corpo--intro-10km {
        width: 100%;
    }

    .corpo--percurso {
        font-size: var(--t-corpo);
        line-height: 27px;
        text-align: center;
    }

    /* Os dois cartões empilham. */
    .percursos-cartao {
        flex: 1 1 100%;
    }

    .conteudo--percurso {
        gap: 25px;
    }

    /* As duas colunas ficam a 40 px, sem espaçamento em cima, e a imagem passa
       para o fim, com 300 px de altura. */
    .percurso-duas {
        flex-direction: column;
        gap: 40px;
        padding-top: 0;
    }

    .percurso-duas__imagem {
        order: 99999;
        width: 100%;
    }

    .percurso-duas__texto {
        width: 100%;
    }

    .percurso-duas__imagem img {
        height: 300px;
    }

    /* A chamada final leva 15 px entre o texto e o botão, e não 50. A fase 2
       já tinha escrito esta regra, mas escreveu-a antes da regra base, e por
       isso ela nunca chegou a aplicar-se. Achado L05. */
    .seccao--final>.conteudo {
        gap: var(--gap);
    }

    /* Os quatro destaques empilham, a 40 px, com 40 px de espaçamento. */
    .seccao--destaques {
        padding: 0 40px 40px;
    }

    .destaques {
        flex-wrap: wrap;
        gap: 40px;
    }

    .destaques__item {
        flex: 1 1 100%;
    }
}


/* =========================================================================
   FASE 5: SOBRE E CONTACTO
   =========================================================================

   Os números daqui para baixo vêm de duas fontes, as duas do site em produção:
   - auditoria/espelho/medido/contacto-e-sobre-fase5.md, medido nas três
     larguras a 11 de agosto de 2026
   - as regras que os posts 2170 e 2200 imprimem na própria página, lidas na
     captura de 10 de agosto de 2026

   As duas páginas partilham a secção do formulário e a chamada final com a
   homepage, e a galeria com todas. O que é próprio delas é pouco, e está aqui.

   Índice
   34. Herói de /sobre/
   35. Sobre a corrida, e a marca de água
   35B. Fase 30: a /sobre/ ganha assunto (números, organização, contacto leve)
   36. A abertura de /contacto/
   37. O que muda na secção do formulário nestas duas páginas
   38. Avisos do formulário, peça nova
   39. Tablet e telemóvel
   ========================================================================= */


/* 34. Herói de /sobre/ ====================================================
   O mesmo contentor 600524ac das Informações, com a mesma imagem e o mesmo véu
   azul a 50%. O que muda é o que está lá dentro: o H1 tem largura própria e
   leva um subtítulo por baixo, que é um H2.                                  */

/* Contentor 563c9611: coluna encostada à esquerda, 10 px de intervalo. */
.heroi-sobre {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

/* Poppins 700 54 com entrelinha 3,2rem, maiúsculas e 400 px de largura: são
   esses 400 que fazem «União e conquistas.» quebrar em duas linhas. */
.heroi-sobre__titulo {
    width: 400px;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h1-heroi);
    font-weight: 700;
    line-height: 3.2rem;
    text-transform: uppercase;
    color: var(--branco);
}

/* Poppins 40 com entrelinha 1em, que dá 40 px certos, e 54% da largura
   do herói. Nas páginas de percurso o mesmo lugar tem entrelinha 1,2. */
.heroi-sobre__subtitulo {
    width: 54%;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--branco);
}


/* 35. Sobre a corrida, e a marca de água ==================================
   Secção bc18699. Duas caixas a 50 px uma da outra: em cima o vídeo com o H2,
   em baixo o texto. O «A CORRIDA» está fora do fluxo e não conta para nada.   */

/* O `overflow: hidden` é do site atual, e é ele que segura a marca de água
   quando ela sangra para fora no tablet. */
.seccao--sobre-corrida {
    overflow: hidden;
}

.conteudo--sobre-corrida {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

/* Contentor 3a32e4d: o vídeo e o H2 a 24 px um do outro, nas três larguras.
   É `relative` porque é ele que serve de referência à marca de água. */
.sobre-corrida__topo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

/* «SOBRE A CORRIDA»: Poppins 700 48/52,8 no azul da marca, com 34 px de
   espaçamento em cima que vêm do invólucro do widget. */
.titulo--sobre-corrida {
    width: 100%;
    padding-top: 34px;
    color: var(--azul-realce);
}

/* «A CORRIDA»: Poppins 700 150/165 com 10% de opacidade (no site atual era
   Race Sport, a #1C2B8C1A). Absoluto em top 705px / left 1px, e não aparece em mais lado
   nenhum do site. */
.sobre-corrida__marca {
    position: absolute;
    top: 705px;
    left: 1px;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 150px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    /* Fase 29 (E5): fica no sussurro de sempre, e é decisão escrita.

       O que se passou: a 0,1 isto dá 1,19:1 sobre branco, e o Lighthouse
       desconta. Cheguei a subir para 0,55, que dá 3,04:1 e é o mínimo do
       critério 1.4.3 para texto grande, e a captura mostrou que ficava pior:
       a marca d'água deixava de ser sussurro e passava a disputar com o título
       «SOBRE A CORRIDA», que se lia por cima dela. Não há tom entre os dois:
       ou cumpre o critério, ou é sussurro.

       **Porque se volta atrás:** isto é decoração, tem `aria-hidden="true"` e
       não diz nada a ninguém. O WCAG isenta expressamente texto decorativo da
       regra de contraste, por isso **não era defeito**; quem descontava era a
       ferramenta, não o site. Trocar um aviso falso por um problema real de
       leitura do título seria mau negócio.

       O custo: a /sobre/ fica em 96 no Lighthouse em vez de 100. É uma linha
       para voltar a subir, se um dia se decidir ao contrário. */
    color: rgba(0, 66, 140, 0.1);
}

/* Contentor e639c70: 50 px de espaçamento em cima, e mais nada. */
.sobre-corrida__texto {
    width: 100%;
    padding-top: 50px;
}

/* O corpo desta secção é centrado. No site atual era #141414 contra o #111111
   dos percursos; desde a fase 17 é tudo Marine Blue. Ligações no azul da marca. */
.corpo--sobre-corrida {
    text-align: center;
    color: var(--preto);
}

.corpo--sobre-corrida a {
    color: var(--azul-realce);
}


/* 35B. Fase 30: a /sobre/ ganha assunto ===================================
   Spec: docs/superpowers/specs/2026-08-14-fase30-sobre-design.md
   Auditoria: auditoria/AUDITORIA-SOBRE.md, achados 30-A, 30-B e 30-C.

   A página não foi esquecida no desenho, foi esquecida no briefing: de cinco
   secções, uma era sobre a corrida. Entram duas secções próprias (os números e
   quem organiza), sai o formulário que era da /contacto/, e o texto que já lá
   estava ganha medida e hierarquia.

   A regra de alinhamento que esta fase impõe à página, e que antes não existia
   (a auditoria contou três secções com dois alinhamentos ao calhas):
     títulos de secção        centrados
     prosa de leitura         à esquerda, dentro da --medida-leitura
     textos curtos de chamada centrados                                       */

/* --- 30-C. A hierarquia deixa de ser um empate ---------------------------
   O H1 estava a 54 px e os H2 das secções a 48: seis pixéis não são
   hierarquia. Sobe para 72, que dá 24 de distância e uma razão de 1,5.

   Mexe-se aqui e não na ficha --t-h1-heroi, que é a de todos os heróis do
   site: as outras páginas não são desta fase.

   Os 400 px de largura sobem para 560 porque a 72 px «União e conquistas.»
   já não cabia em duas linhas, e a entrelinha passa de 3,2rem (que eram 51,2,
   menos do que o próprio corpo da letra) para 1,05em. */
.heroi-sobre__titulo {
    width: 560px;
    font-size: 72px;
    line-height: 1.05;
}

/* --- 30-A. A coluna de leitura -------------------------------------------
   Os quatro parágrafos não tinham largura máxima nenhuma: acompanhavam o
   contentor e iam de 34 caracteres por linha a 375 px até 134 a 1440.

   E estavam centrados, que a 134 caracteres é o pior caso possível: numa linha
   tão longa o olho já custa a encontrar o início da seguinte, e sem uma margem
   esquerda fixa perde-a de vez. Passam a alinhar à esquerda dentro da coluna,
   que continua centrada na página.

   A última linha, «Corre por ti. Corre por todos nós.», é uma chamada e não
   prosa: essa fica centrada, pela regra acima. */
.corpo--sobre-corrida {
    max-width: var(--medida-leitura);
    margin-inline: auto;
    text-align: left;
}

.corpo--sobre-corrida> :last-child {
    text-align: center;
}

/* --- A faixa de números --------------------------------------------------
   Os quatro argumentos da página estavam enterrados a meio de parágrafos de
   134 caracteres, que é onde ninguém os lê. Passam a abrir a página.

   Quatro colunas iguais na secretária e duas no telemóvel: com quatro em linha
   a 375 px cada número ficava com 78 px de largura e partia-se em duas linhas. */
.seccao--numeros {
    background: var(--cinza-claro);
}

.numeros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 24px;
}

.numeros__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* O valor no azul de realce, que é o mesmo do «SOBRE A CORRIDA» logo abaixo.

   O degrau é o do cartão (32 px, 25 no telemóvel) e não o do H2 (48). Com 48
   o «10 km e 5 km» media 280 px e não cabia numa coluna de 304, quanto mais
   nas de 148 do tablet: o número mais comprido é que manda no tamanho. */
.numeros__valor {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h2-cartao);
    font-weight: 700;
    line-height: 1.1;
    color: var(--azul-realce);
}

.numeros__rotulo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    font-weight: 400;
    line-height: 1.4;
    color: var(--preto);
}

/* --- Quem organiza -------------------------------------------------------
   Os dois logótipos já viviam no escalão ORGANIZAÇÃO da homepage e nunca
   apareciam na /sobre/, que é precisamente a página onde deviam estar.

   Ao contrário da homepage, que os desenha como background-image em divs com
   role="img" para clonar o site atual (achado E03), aqui são <img> com alt a
   sério: é conteúdo novo e não há original nenhum para copiar. */
/* Dois cartões enquanto houver 360 px para cada um, e um só quando não houver.
   Com `repeat(2, 1fr)` fixo, a 768 px cada coluna ficava com 332 e o texto caía
   para 33 caracteres por linha, que é o defeito 30-A outra vez, ao contrário.
   O `auto-fit` decide pela medida e não pelo nome da largura.

   O `min(360px, 100%)` não é enfeite: com `minmax(360px, 1fr)` seco, a 375 px
   de ecrã a coluna ficava com os 360 dentro de um contentor de 335 e sangrava
   25 px para fora. Medido. */
.organizacao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 50px;
}

.organizacao__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

/* Os dois SVG têm o mesmo viewBox, 340,57 × 207,29, e por isso parecia que a
   mesma largura lhes dava a mesma presença. Não dá, e é a armadilha da fase 23
   outra vez: o desenho lá dentro não ocupa a mesma área.

   Medido com ferramentas de fase 30 (medir-svg.js, o getBBox da mancha):
     Global Sport   mancha 146 × 106   43,0% da largura, 51,0% da altura
     FC Porto+Found mancha 267 × 107   78,4% da largura, 51,7% da altura

   As alturas batem certo, as larguras não. Por isso igualam-se pela ALTURA:
   com 140 px de caixa, os dois desenhos ficam com 72 px de mancha e a mesma
   presença. Com 240 px de largura, o da Global Sport aparecia a 43% do
   tamanho do outro, e via-se. */
.organizacao__logo {
    width: auto;
    max-width: 100%;
    height: 140px;
}

.organizacao__texto {
    max-width: 46ch;
    margin-inline: auto;
}

/* --- A faixa de contacto, agora sem formulário ---------------------------
   O formulário desta página era o da /contacto/, campos iguais, e era ele o
   achado 30-B: o «Enviar mensagem» media 1305 px a 1440 contra os 168 do
   «Inscreve-te já», a ação principal do site inteiro.

   Saiu, e no lugar fica o texto, o email, a morada e um botão que leva à
   /contacto/. O botão é o degrau médio do sistema da fase 26, e não se lhe
   abre exceção nenhuma: a hierarquia contra o CTA principal faz-se pela
   altura (48 contra 56) e por o principal ser o único a ocupar a linha toda
   no telemóvel. */
.contacto--sem-formulario {
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.contacto--sem-formulario .contacto__esquerda {
    width: auto;
    max-width: var(--medida-leitura);
    gap: 24px;
}

/* O «Entra em contacto connosco» está declarado com 306 px de largura, que era
   o que fazia sentido quando tinha um formulário de 764 px ao lado. Sem ele, a
   coluna passou a ter 670 e o título continuava a partir-se em três linhas
   dentro de um terço do espaço. Solta-se, e só aqui: a homepage e a /contacto/
   ainda têm o formulário ao lado e ficam como estão. */
.contacto--sem-formulario .titulo--contacto {
    width: auto;
}

.contacto--sem-formulario .contacto__accao {
    flex: 0 0 auto;
}

/* --- O título da galeria -------------------------------------------------
   Eram nove fotos que apareciam do nada, cortadas, coladas ao rodapé, sem
   título nenhum. A auditoria chamou-lhe acidente visual, e era: não parecia
   uma secção, parecia uma sobra. Com título passa a ser prova social.

   O espaçamento é próprio porque a .galeria não tem contentor nem padding:
   é uma faixa que sangra de um lado ao outro do ecrã. */
.galeria__titulo {
    padding: var(--padding-vertical) var(--padding-lateral) 40px;
}


/* --- A fase 30 no tablet e no telemóvel ----------------------------------
   Quatro números em linha só cabem acima dos 1024: a 768 a coluna ficava com
   148 px e o «10 km e 5 km» partia-se ao meio. Passam a duas linhas de dois. */
@media (max-width: 1024px) {
    .numeros {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    /* Os dois cartões da organização já empilham sozinhos pelo `auto-fit`.
       Aqui só encolhe o intervalo, como o resto do site no telemóvel. */
    .organizacao {
        gap: 40px;
    }

    /* A faixa de contacto passa a coluna, e o botão fica encostado à esquerda
       com a largura do seu texto. É de propósito que não ocupa a linha toda:
       essa é a assinatura do CTA principal desde a fase 26, e é ela que os
       distingue no telemóvel, onde antes mediam os dois 335 px. */
    .contacto--sem-formulario {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .contacto--sem-formulario .contacto__esquerda {
        width: 100%;
    }
}


/* 36. A abertura de /contacto/ ============================================
   Secção bc18699. É a única página do site sem herói: o H1 vive aqui dentro,
   a 48 px, sem maiúsculas e a preto.                                         */

/* Os três blocos ficam a 24 px uns dos outros nas três larguras. */
.conteudo--abertura {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.titulo--abertura {
    width: 100%;
    padding-top: 34px;
    text-align: center;
}

/* O parágrafo de abertura é o único do site em Poppins 22/33. A largura é a
   natural do texto, porque o contentor centra os blocos em vez de os esticar. */
.corpo--abertura {
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    line-height: 33px;
    text-align: center;
    color: var(--preto);
}

/* A chamada final de /contacto/ é a única em Poppins. O tamanho, 20/30, é o
   mesmo das Informações e vem do `.corpo--final-20`. */
.corpo--final-poppins {
    font-family: 'Poppins', sans-serif;
}


/* 37. O que muda na secção do formulário nestas duas páginas ==============
   A secção 779826b6 é a mesma da homepage. São quatro diferenças, e todas
   estão declaradas em cada página.                                           */

/* 1. O H2 ocupa 80% da coluna em /contacto/ e 60% nas outras duas. */
.pagina--contacto .titulo--contacto {
    width: 80%;
}

/* 2. O parágrafo ao lado já era Poppins em /contacto/; desde a fase 17 é
      Poppins nas três. A regra fica, inofensiva e clara. */
.pagina--contacto .contacto__texto .corpo {
    font-family: 'Poppins', sans-serif;
}

/* 3. No site atual o email e a morada eram #141414 aqui e #252525 na
      homepage; desde a fase 17 é tudo Marine Blue #00072D. */
.pagina--sobre .contacto__texto-item,
.pagina--contacto .contacto__texto-item {
    color: var(--preto);
}

/* 4. Os campos do formulário têm 12 px de espaçamento em cima e em baixo, e
      não 20: são 58 px de altura contra os 74 da homepage. O mesmo formulário,
      declarado de duas maneiras. Achado N02. */
.pagina--sobre .formulario__entrada,
.pagina--contacto .formulario__entrada {
    padding: 12px 24px;
}


/* 38. Avisos do formulário, peça nova =====================================
   Não existem no site atual: só aparecem depois de alguém carregar em Enviar,
   e por isso não mexem em medição nenhuma. O envio está desligado até haver
   credenciais de SMTP no servidor, decisão D21.                              */

.formulario__aviso {
    margin-bottom: 24px;
    padding: 16px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 24px;
    color: #00072D;
    background: var(--branco);
    border-left: 3px solid var(--azul-realce);
    border-radius: 12px;
}

.formulario__aviso--bom {
    border-left-color: #1C8C3B;
}

.formulario__aviso a {
    color: var(--azul-realce);
}

.formulario__erro {
    display: block;
    padding-top: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    line-height: 20px;
    color: #C02B0A;
}


/* 39. Tablet e telemóvel ================================================== */

@media (max-width: 1024px) {

    /* Fora do computador o H2 de /contacto/ deixa de ter os 80% e passa a
       ocupar a coluna toda, como o das outras páginas. */
    .pagina--contacto .titulo--contacto {
        width: auto;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    /* O herói de /sobre/ passa a 943 px e sangra para fora da moldura de 703,
       tal como o das três páginas de percurso. É o mesmo contentor e o mesmo
       achado L03: a barra horizontal de 848 px vem daqui. */
    .heroi-sobre {
        width: 943px;
        max-width: none;
        gap: 15px;
    }

    /* O intervalo entre as duas caixas passa a 15 px. O de dentro do bloco do
       vídeo fica nos 24, porque a página não lhe mexe. */
    .conteudo--sobre-corrida {
        gap: 15px;
    }
}

@media (max-width: 767px) {

    /* O herói de /sobre/ troca de imagem, sobe para 70vh e carrega o véu para
       70%, ao contrário das Informações, que descem para 30vh. */
    .heroi-pagina--sobre {
        min-height: 70vh;
        background-image: url("/wp-content/uploads/2025/06/Image-3.webp");
        background-position: center center;
    }

    .heroi-sobre {
        align-items: center;
        gap: 15px;
    }

    /* Fase 30, achado 30-C: 36 px contra os 32 dos H2 eram quatro pixéis de
       distância, ou seja empate. Sobem para 44, que dão doze. */
    .heroi-sobre__titulo {
        width: 100%;
        font-size: 44px;
        line-height: 1.1;
        text-align: center;
    }

    .heroi-sobre__subtitulo {
        width: 100%;
        font-size: 24px;
        text-align: center;
    }

    /* As duas caixas de «Sobre a corrida» ficam a 25 px, e o texto perde os
       50 px de espaçamento em cima. */
    .conteudo--sobre-corrida {
        gap: 25px;
    }

    .sobre-corrida__texto {
        padding-top: 0;
    }

    /* O H2 passa a 32 px com 15 de espaçamento em cima, e não 34. */
    .titulo--sobre-corrida {
        padding-top: 15px;
    }

    /* A marca de água encolhe para 43 px com entrelinha 1,5 e sobe para os
       191 px, com 663 px de largura declarada que a moldura corta. */
    .sobre-corrida__marca {
        top: 191px;
        left: 0;
        width: 663px;
        max-width: 100%;
        font-size: 43px;
        line-height: 1.5;
    }

    /* O H1 de /contacto/ é 38 px, e não os 32 dos outros H2 do telemóvel. */
    .titulo--abertura {
        font-size: 38px;
    }

    /* O parágrafo de abertura desce para 18/27. */
    .corpo--abertura {
        font-size: var(--t-corpo);
        line-height: 27px;
    }

    /* Em /contacto/ o parágrafo ao lado do formulário passa a 16/24 e puxa
       10 px para cima o que vem a seguir. */
    .pagina--contacto .contacto__texto .corpo {
        margin-bottom: -10px;
        font-size: var(--t-pequeno);
        line-height: 24px;
    }

    /* Em /sobre/ o email e a morada ficam a 18/27, e não descem para 16/24
       como na homepage e em /contacto/. Só o ícone encolhe. Achado N05. */
    .pagina--sobre .contacto__texto-item {
        font-size: var(--t-corpo);
        line-height: 27px;
    }

    /* E a secção do formulário leva 60 px em cima e 40 em baixo, e não 40 e 40
       como todas as outras secções do site no telemóvel. Achado N05. */
    .pagina--sobre .seccao--contacto>.conteudo {
        padding-block: 60px 40px;
    }
}


/* =========================================================================
   FASE 6: AS DUAS PÁGINAS LEGAIS
   =========================================================================

   `/politica-de-privacidade/` e `/termos-e-condicoes/`. São a mesma página com
   textos diferentes: os posts 1184 e 1022 declaram exatamente as mesmas regras,
   só com outros identificadores de contentor.

   Os números daqui para baixo vêm de duas fontes, as duas do site em produção:
   - auditoria/espelho/medido/paginas-legais-fase6.md, medido nas três larguras
     a 11 de agosto de 2026 em `/politica-de-privacidade/`, que é a que funciona
   - as regras que os dois posts imprimem na própria página, lidas na captura de
     10 de agosto de 2026

   `/termos-e-condicoes/` está partida em produção e não se mede lá: constrói-se
   com os valores da gémea, que é a decisão D17.

   Estas duas páginas não usam a grelha do site, e é de propósito. O espaçamento
   lateral do texto é 60, 60 e 40, quando o resto do site faz 60, 25 e 20. E o
   vertical é 60, 60 e 20, quando o resto faz 120, 120 e 40. São peças próprias.

   Índice
   40. Herói das páginas legais
   41. O texto corrido
   42. Tablet e telemóvel
   ========================================================================= */


/* 40. Herói das páginas legais ============================================
   Fase 18, pedido do Luís a 12/08/2026: as legais tinham «péssimo design,
   UX e UI». O véu lavado a 49% do site atual (G07) morreu: o herói passa a
   superfície Marine sólida, como as outras superfícies da marca, com o H1
   branco e a etiqueta da versão no azul claro do «2026».                     */

.heroi-legal {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 60px;
    background: var(--azul);
}

.heroi-legal__interior {
    position: relative;
    width: 100%;
    max-width: 1160px;
    padding-block: 72px;
}

.heroi-legal__titulo {
    width: fit-content;
    max-width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--branco);
}

.heroi-legal__versao {
    margin-top: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--azul-borda);
}


/* 41. O corpo das legais ==================================================
   Fase 18: grelha com índice fixo à esquerda e artigo com medida de leitura
   à direita. O texto antigo era uma parede de 1440 px de largura sem um
   único H2; o novo tem secções com âncoras, cartões de contacto e tabela
   de cookies com rolamento próprio no telemóvel.                             */

.seccao--legal {
    padding-inline: 60px;
}

.legal-grelha {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px 64px;
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-block: 56px 80px;
}

/* O índice. Fica colado por baixo do cabeçalho fixo enquanto se rola. */
.legal-indice {
    min-width: 0;
}

.legal-indice__dobra {
    position: sticky;
    top: calc(var(--cabecalho-altura) + 24px);
}

.legal-indice__titulo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--azul-realce);
    list-style: none;
    cursor: default;
}

.legal-indice__titulo::-webkit-details-marker {
    display: none;
}

/* No computador o índice está sempre aberto e o título não é clicável;
   no telemóvel volta a ser (regra lá em baixo). O site.js fecha a dobra
   ao carregar quando o ecrã é estreito. */
@media (min-width: 1025px) {
    .legal-indice__titulo {
        pointer-events: none;
    }
}

.legal-indice__lista {
    margin-top: 14px;
    padding-left: 0;
    list-style: none;
    border-left: 2px solid var(--cinza-claro);
}

.legal-indice__lista li+li {
    margin-top: 2px;
}

.legal-indice__lista a {
    display: block;
    padding: 6px 0 6px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    line-height: 1.4;
    color: var(--preto);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.legal-indice__lista a:hover {
    color: var(--azul-realce);
    border-left-color: var(--azul-realce);
}

/* O artigo, com medida de leitura em vez da parede de 1440 px. */
.legal {
    min-width: 0;
    max-width: 780px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 400;
    line-height: 1.65;
    color: var(--preto);
}

.legal__seccao {
    padding-block: 20px 8px;
}

.legal__seccao+.legal__seccao {
    border-top: 1px solid var(--cinza-claro);
}

.legal__seccao:first-child {
    padding-top: 0;
}

/* As âncoras do índice param por baixo do cabeçalho fixo, não atrás dele. */
.legal__seccao[id] {
    scroll-margin-top: calc(var(--cabecalho-altura) + 24px);
}

.legal__titulo {
    margin-bottom: 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--azul);
}

.legal h3 {
    margin: 18px 0 8px;
    font-size: var(--t-corpo);
    font-weight: 600;
    color: var(--azul);
}

.legal p {
    margin-bottom: 12px;
}

.legal strong {
    font-weight: 700;
}

.legal ul {
    margin: 0 0 12px;
    padding-left: 22px;
}

.legal li {
    margin-bottom: 6px;
}

.legal a {
    color: var(--azul-realce);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal a:hover {
    color: var(--azul-borda);
}

/* O cartão de identificação e contacto, que se repete nos fins de página. */
.legal .legal-cartao {
    padding: 20px 24px;
    background: var(--cinza-claro);
    border-left: 3px solid var(--azul-realce);
    border-radius: 0 12px 12px 0;
    line-height: 1.8;
}

/* A tabela do inventário de cookies, com rolamento próprio no telemóvel. */
.legal-tabela-moldura {
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.legal-tabela {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--t-etiqueta);
    line-height: 1.45;
}

.legal-tabela th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    color: var(--branco);
    background: var(--azul);
}

.legal-tabela td {
    padding: 10px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--cinza-claro);
}

.legal-tabela tbody tr:nth-child(even) td {
    background: var(--cinza-claro);
}


/* 42. As legais no tablet e no telemóvel ================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .heroi-legal {
        padding: 0 25px;
    }

    .heroi-legal__interior {
        padding-block: 58px;
    }

    .seccao--legal {
        padding-inline: 25px;
    }

    /* O índice sobe para cima do artigo e perde o sticky. */
    .legal-grelha {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 40px 64px;
    }

    .legal-indice__dobra {
        position: static;
    }
}

@media (max-width: 767px) {
    .heroi-legal {
        padding: 0 20px;
    }

    .heroi-legal__interior {
        padding-block: 40px;
    }

    .heroi-legal__titulo {
        font-size: 28px;
        text-align: center;
        margin-inline: auto;
    }

    .heroi-legal__versao {
        text-align: center;
    }

    .seccao--legal {
        padding-inline: 20px;
    }

    .legal-grelha {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-block: 28px 48px;
    }

    /* No telemóvel o índice é uma caixa que abre e fecha. */
    .legal-indice__dobra {
        position: static;
        padding: 14px 16px;
        background: var(--cinza-claro);
        border-radius: 12px;
    }

    .legal-indice__titulo {
        cursor: pointer;
    }

    .legal-indice__titulo::after {
        content: " +";
    }

    .legal-indice__dobra[open] .legal-indice__titulo::after {
        content: " −";
    }

    .legal-indice__lista {
        border-left-color: var(--branco);
    }

    .legal__titulo {
        font-size: 20px;
    }
}


/* 40. Fase 12: alinhamentos do rodape, setas das ancoras, afinacoes ========
   Pedidos do Luis a 11/08/2026 depois de rever o staging da fase 11. */

/* Rodape: as tres colunas alinham pelo topo com espacamentos iguais. Caem os
   min-height medidos do site atual (H06), que criavam alturas fantasma, e a
   coluna sem titulo ganha o padding que alinha as suas ligacoes com as das
   colunas com titulo. */
.rodape {
    padding: 64px var(--padding-lateral) 36px;
}

.rodape__interior {
    gap: 40px;
}

.rodape__topo {
    justify-content: space-between;
    gap: 40px var(--gap);
}

.rodape__colunas {
    gap: 64px;
}

.rodape__coluna--legais {
    width: auto;
    min-height: 0;
    gap: 14px;
    padding-top: 35px;
}

.rodape__coluna--paginas {
    width: auto;
    min-height: 0;
    gap: 14px;
}

.rodape__coluna--redes {
    width: auto;
    min-height: 0;
    gap: 14px;
}

.rodape__lista {
    gap: 10px;
}

@media (max-width: 767px) {
    .rodape {
        padding: 44px 25px 28px;
    }

    /* FASE 31, segunda passagem: a barra de inscrição vive por cima do fundo do
       ecrã e tapava a última linha do rodapé, o «Criado por». Ganha por baixo a
       altura dela mais folga.

       **Isto tem de ser a última palavra sobre o `padding` do `.rodape`**, e
       custou duas tentativas a acertar: há **cinco** regras de `.rodape`
       espalhadas pelo ficheiro, e com a mesma especificidade ganha sempre a que
       vem por último. É espaço fixo e não salta, porque não depende de a barra
       estar ou não à vista. */
    .rodape {
        padding-bottom: calc(28px + var(--botao-alt-g) + 24px + env(safe-area-inset-bottom, 0px));
    }

    .rodape__interior {
        padding: 0;
        gap: 28px;
    }

    .rodape__topo {
        flex-direction: column;
        gap: 28px;
    }

    .rodape__marca {
        flex: 1 1 auto;
    }

    .rodape__colunas {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 28px 40px;
    }

    .rodape__coluna--legais {
        padding-top: 0;
    }
}

/* Fase 13: no telemovel e no tablet as pills andam em fita continua (pedido
   do Luis: rodam e o toque pausa, por isso continuam clicaveis). Cai o
   sangramento de 120vw que as fazia parecer cortadas, a caixa ganha
   respiracao, e as setas so aparecem se a fita nao estiver ativa. */
@media (max-width: 1024px) {
    .ancoras {
        width: 100%;
        max-width: none;
        margin-right: 0;
    }

    .conteudo--ancoras {
        padding-inline: 20px;
    }

    .carrossel--ancoras .carrossel__pista {
        padding-block: 6px;
    }

    .carrossel--ancoras .carrossel__slide {
        flex: 0 0 auto;
    }

    /* Fase 14: em fita, as pontas desvanecem em vez de cortarem a pill a
       seco na margem, que era o que incomodava no telemovel. */
    .carrossel--ancoras.carrossel--fita .carrossel__pista {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }

    .carrossel--ancoras:not(.carrossel--fita) .carrossel__seta {
        display: flex;
        width: 36px;
        height: 36px;
        padding: 0;
        background: var(--branco);
        border: 2px solid var(--azul);
        color: var(--azul);
        opacity: 1;
    }

    .carrossel--ancoras:not(.carrossel--fita) .carrossel__seta--anterior {
        left: 2px;
    }

    .carrossel--ancoras:not(.carrossel--fita) .carrossel__seta--seguinte {
        left: auto;
        right: 2px;
    }

    /* FASE 31, 15/08/2026 (achado T5): estas setas saem do telemóvel.

       O que faziam: ficavam por cima da fita de âncoras, dentro dela. A da
       esquerda ocupava de 2 a 38 px e a primeira âncora começava aos 30, e
       **o toque ia para a seta**. À direita o mesmo, com 28 px.

       **Só acontecia a quem tem «menos movimento» ligado no telemóvel**, que é
       a única situação em que a fita não se forma e estas setas aparecem. É
       gente que costuma ter mais necessidades de acessibilidade, e não menos.

       Porque se tiram em vez de se afastarem: uma goteira de cada lado resolve
       na posição inicial e deixa de resolver mal a fita desliza, porque as
       âncoras voltam a passar por baixo. Testado. E não se perde nada: **a
       fita continua a deslizar com o dedo**, que é como toda a gente a usa no
       telemóvel, e as âncoras continuam todas alcançáveis. */
    .carrossel--ancoras:not(.carrossel--fita) .carrossel__seta {
        display: none;
    }
}

/* Respiracao coerente da faixa de ancoras no desktop. */
.seccao--ancoras>.conteudo {
    padding-block: 28px 20px;
}


/* =========================================================================
   43. A página /contacto/, fase 18B (pedido do Luís, 12/08/2026)
   Era a única página sem herói: abria na fachada do vídeo sem play, o H1
   vinha escondido por baixo, os contactos eram duas linhas soltas e a
   aceitação flutuava ao lado do botão. Passa a: herói como as interiores,
   cartões de contacto, redes sociais, formulário em cartão branco, e o
   vídeo com play depois do formulário.
   ========================================================================= */

/* Fase 29 (A4): esta página carregava a mesma fotografia duas vezes, 427 KB no
   herói em `-scaled` e 209 KB na capa do vídeo em 1620, num total de 636 KB
   para uma imagem só. A densidade simples passa a usar a variante de 1620, que
   é a mesma da capa: o browser descarrega um ficheiro e usa-o nos dois sítios.
   A densidade dupla continua a receber o `-scaled`, e aí as duas continuam a
   ser pedidas, como era. Medido em provas/fase29-medicao.md, secção 2c. */
.heroi-pagina--contacto {
    background-image: -webkit-image-set(url("/wp-content/uploads/2026/07/Corridadodragaofull_RR-81-1620x1080.webp") 1x,
                                        url("/wp-content/uploads/2026/07/Corridadodragaofull_RR-81-scaled.webp") 2x);
    background-image: image-set(url("/wp-content/uploads/2026/07/Corridadodragaofull_RR-81-1620x1080.webp") 1x,
                                url("/wp-content/uploads/2026/07/Corridadodragaofull_RR-81-scaled.webp") 2x);
    background-position: center 30%;
}

/* O H1 desta página é frase, não grito: sem maiúsculas, como sempre foi. */
.heroi-pagina__titulo--frase {
    text-transform: none;
    line-height: 1.2;
}

.heroi-contacto__texto {
    margin-top: 18px;
    max-width: 680px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo-destaque);
    line-height: 1.6;
    color: var(--branco);
}

.heroi-contacto__texto p {
    margin-bottom: 4px;
}

/* Os contactos passam a cartões clicáveis. */
.pagina--contacto .contacto__item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--branco);
    border: 1px solid var(--cinza-claro);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pagina--contacto .contacto__item+.contacto__item {
    margin-top: 12px;
}

.pagina--contacto .contacto__item a:hover {
    border-color: var(--azul-realce);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 7, 45, 0.08);
}

/* As redes sociais na coluna dos contactos, gémeas das do rodapé. */
.contacto__redes {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-left: 0;
    list-style: none;
}

.contacto__rede {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--azul-realce);
    border-radius: 50%;
    color: var(--branco);
    transition: background-color 0.25s ease;
}

.contacto__rede:hover {
    background: var(--azul-borda);
}

.contacto__rede svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* O formulário num cartão branco, destacado do fundo Off White. */
.pagina--contacto .formulario {
    padding: 32px;
    background: var(--branco);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 7, 45, 0.08);
}

/* O vídeo, mais estreito e centrado, entre o formulário e a chamada final. */
.conteudo--video-contacto {
    max-width: 960px;
    margin-inline: auto;
    padding: 0 60px 100px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .pagina--contacto .formulario {
        padding: 24px;
    }

    .conteudo--video-contacto {
        padding: 0 25px 60px;
    }
}

@media (max-width: 767px) {

    /* A capa do herói no telemóvel é a variante leve da mesma fotografia,
       senão a regra genérica do herói trocava-a por outra imagem. */
    .heroi-pagina--contacto {
        background-image: url("/wp-content/uploads/2026/07/Corridadodragaofull_RR-81-1620x1080.webp");
    }

    .heroi-contacto__texto {
        font-size: var(--t-corpo);
    }

    .pagina--contacto .formulario {
        padding: 20px;
    }

    .conteudo--video-contacto {
        padding: 0 20px 40px;
    }
}

/* 46. Formulário de voluntariado, fase 38 =================================
   A secção #voluntario era uma âncora vazia e escondida, e passa a ser onde
   vive o formulário de candidatura, entre as perguntas frequentes e a chamada
   final. O cartão da grelha não mexe um pixel: a grelha das dez fichas continua
   com cinco filas.

   Fica no fim do ficheiro de propósito, e não junto ao formulário de contacto
   da secção 22. Neste CSS de seis mil linhas uma regra nova não se põe onde faz
   sentido ler, põe-se onde ganha: o `.formulario__entrada--area` da secção 22
   fixa 288 px de altura, e a daqui precisa de o desfazer.                     */

.seccao--voluntario {
    background: var(--cinza-informacoes);
}

/* 900 px e não os 1.305 do conteúdo. É «a toda a largura» por oposição aos
   458,9 px úteis do cartão, que era o que travava as duas colunas; esticar os
   campos até 1.305 dava entradas de 640 px, que ninguém preenche de olho no
   princípio e no fim da linha. A 900 as duas colunas medem 442, o dobro dos
   220 que o cartão permitia. A ficha --leitura (670) é para texto corrido e
   não serve a um formulário de duas colunas. */
.conteudo--voluntario {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* O mesmo cartão branco da /contacto/, com os mesmos valores. */
.formulario--voluntariado {
    padding: 32px;
    background: var(--branco);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 7, 45, 0.08);
}

/* As duas colunas do computador. Os cinco primeiros campos a span 6, e a
   Morada sozinha na sua linha porque fica ímpar. Abaixo de 768 px voltam todos
   a uma coluna, mais abaixo. */
.formulario__campo--metade {
    grid-column: span 6;
}

/* A área de texto da motivação tem 8 linhas e não os 288 px fixos do
   formulário de contacto: quem escreve porque quer ser voluntário escreve mais
   do que um pedido de informação, mas menos do que uma carta. O `rows` do HTML
   é que manda a altura, e por isso ela desaparece daqui. */
.formulario--voluntariado .formulario__entrada--area {
    height: auto;
    min-height: 0;
}

/* O fieldset da disponibilidade. Sem borda nem espaçamento próprios: quem dá a
   caixa é o cartão, e o fieldset está cá pelo que ele faz a um leitor de ecrã,
   que é anunciar a pergunta antes das opções. */
.formulario__grupo {
    grid-column: span 12;
    border: 0;
    padding: 0;
    margin: 0;
}

/* O <legend> não herda o display do <label>, e sem isto o «(Obrigatório)» que
   vem a seguir ao texto ficava colado por baixo em vez de ao lado. */
.formulario__legenda {
    padding: 0;
    float: none;
    width: 100%;
}

.formulario__ajuda {
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    line-height: 1.55;
    color: #5c646e;
}

.formulario__opcoes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Alvo de toque de 44 px, que é a regra da fase 26. Os 44 saem da caixa: 20 px
   de altura mais 12 de espaçamento em cima e em baixo no texto, que é o que se
   toca de facto. */
.formulario__opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.formulario__opcao-texto {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 20px;
    color: #00072D;
    padding-block: 12px;
    cursor: pointer;
}

/* O seletor de data do Chrome nasce mais alto do que os outros campos por
   causa do ícone do calendário. Iguala-se pela entrelinha dos restantes. */
.formulario--voluntariado input[type="date"] {
    min-height: 74px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .formulario--voluntariado {
        padding: 24px;
    }
}

@media (max-width: 767px) {

    /* Uma coluna no telemóvel, como o ponto 4 do pedido manda. */
    .formulario__campo--metade {
        grid-column: span 12;
    }

    .formulario--voluntariado {
        padding: 20px;
    }
}


/* 47. Tabela de tamanhos ==================================================
   Nasceu na fase 40 com uma tabela so. A fase 41 pos tres (homem, mulher e
   crianca) e a fase 42 meteu-as dentro de cartoes. Aqui fica o que e comum as
   tres: o contentor que desliza e a propria tabela. O cartao, a coluna de
   abertura e o resto do guia estao na seccao 48.                            */

/* Rede de seguranca, nao a solucao principal: medido nas quatro larguras, as
   tabelas de homem e mulher cabem sem cortar. A de crianca tem cinco colunas
   e desliza nos ecras mais estreitos, de proposito, em vez de cortar. */
.tabela-tamanhos__scroll {
    overflow-x: auto;
    /* Fase 41: sem isto o contentor cresce ate ao conteudo e nunca chega a
       deslizar, porque um filho de flex nao encolhe abaixo do conteudo. */
    width: 100%;
    min-width: 0;
    /* FASE 42: a barra tem de se VER. A tabela de crianca tem cinco colunas e
       desliza no telemovel; sem barra visivel, o corte a direita le-se como
       defeito e nao como «ha mais para o lado». A barra do sistema e por cima
       do conteudo e so aparece enquanto se rola, que e tarde de mais.

       Nao se pinta o degrade classico de sombra no contentor porque as filas
       tem fundo proprio (o xadrez) e tapavam-no. */
    scrollbar-width: thin;
    scrollbar-color: var(--azul-realce) #E4E8EF;
}

.tabela-tamanhos__scroll::-webkit-scrollbar {
    height: 8px;
}

.tabela-tamanhos__scroll::-webkit-scrollbar-track {
    background: #E4E8EF;
    border-radius: 4px;
}

.tabela-tamanhos__scroll::-webkit-scrollbar-thumb {
    background: var(--azul-realce);
    border-radius: 4px;
}

/* FASE 42: `separate` e nao `collapse`, porque as filas passaram a ter fundo
   alternado e as pontas arredondadas, e o `collapse` ignora o raio nas
   celulas. As linhas de separacao passam a ser o proprio xadrez. */
.tabela-tamanhos {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 1.4;
    color: var(--preto);
}

.tabela-tamanhos th,
.tabela-tamanhos td {
    padding: 13px 14px;
    text-align: left;
}

/* FASE 41: o `white-space: nowrap` que aqui estava desde a fase 40 servia
   uma tabela de tres colunas curtas. Com quatro e cinco colunas de intervalos
   («111,75 a 122 cm») obrigava a tabela a 465 px de largura minima e punha
   tres barras de scroll horizontal no telemovel.

   Agora a celula pode quebrar linha, mas o NUMERO NUNCA SE SEPARA DA UNIDADE:
   o `&nbsp;` entre «89» e «cm» esta no HTML, e e o que cumpre a instrucao do
   pacote de «garantir leitura sem quebra de numeros». */
.tabela-tamanhos td,
.tabela-tamanhos tbody th {
    hyphens: none;
    overflow-wrap: normal;
}

.tabela-tamanhos thead th {
    padding-top: 4px;
    padding-bottom: 10px;
    font-size: var(--t-mini);
    font-weight: 600;
    color: #5C646E;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #E4E8EF;
    white-space: nowrap;
}

/* A coluna do tamanho e a que se procura. Fica no azul de realce, a negrito e
   um degrau acima do resto da tabela, para se varrer a coluna com os olhos
   sem ler o resto. */
.tabela-tamanhos tbody th {
    font-size: var(--t-corpo);
    font-weight: 700;
    color: var(--azul-realce);
    white-space: nowrap;
}

/* O xadrez. Substitui as linhas de separacao da fase 41: numa tabela de cinco
   colunas de intervalos, seguir a fila com os olhos e o que custa. */
.tabela-tamanhos tbody tr:nth-child(odd) th,
.tabela-tamanhos tbody tr:nth-child(odd) td {
    background: #F5F8FC;
}

.tabela-tamanhos tbody tr th:first-child {
    border-radius: 10px 0 0 10px;
}

.tabela-tamanhos tbody tr td:last-child {
    border-radius: 0 10px 10px 0;
}


/* 48. Guia de tamanhos, fase 41, redesenhado na fase 42 ====================
   A fase 41 pos o conteudo certo na pagina e o Luis viu o resultado: «parece
   texto solto sem arte». Tinha razao, e o defeito era de suporte e nao de
   conteudo. Tres coisas estavam mal:

   1. A seccao vivia numa coluna de leitura de 670 px dentro de um contentor
      de 1305, e deixava metade do ecra vazia ao lado das tabelas.
   2. As tabelas estavam nuas por cima do fundo cinzento, quando o resto desta
      pagina inteira sao cartoes.
   3. O CTA do fim eram tres linhas soltas, onde as outras seccoes tem cartao.

   Nenhuma palavra mudou. O que mudou foi a caixa a volta.                  */

/* A ancora de compatibilidade do #tamanhos da fase 40. Nao ocupa espaco e
   nao se ve: existe so para uma ligacao partilhada a 3/09 nao morrer. */
.ancora-antiga {
    display: block;
    height: 0;
    overflow: hidden;
}

/* `clip` e nao `hidden`, e a diferenca nao e cosmetica: a .seccao--informacao
   traz `overflow: hidden`, e um antepassado com `hidden` e um contentor de
   scroll, o que mata o `position: sticky` da coluna de abertura sem dar erro
   nenhum. Medido: a coluna ficava a -606 px enquanto se rolava a tabela de
   crianca. O `clip` continua a cortar o que sai, que era para o que o `hidden`
   la estava, mas nao cria contentor de scroll. E o mesmo que o <main> do site
   ja faz desde a fase 12. */
.seccao--guia {
    overflow: clip;
}

.conteudo--guia {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Uma coluna ate aos 1100 px, duas a partir dai. Os 1100 sao o ponto em que a
   coluna de abertura e as tabelas cabem lado a lado sem nenhuma delas apertar:
   400 px de texto mais 56 de intervalo deixam 749 para as tabelas, e a de
   crianca, que e a larga, precisa de 620. */
.guia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

.guia__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.guia__titulo {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h2);
    font-weight: 700;
    line-height: 1.1;
    color: var(--azul-realce);
}

/* O corpo desta pagina e de 24 px, que e o que da as alturas das secoes
   antigas. Numa coluna de 400 px, 24 px partem a linha a cada cinco palavras:
   aqui manda a medida de leitura e nao a heranca. */
.guia__texto {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    line-height: 1.55;
    color: var(--preto);
}

.guia__texto p {
    margin: 0 0 12px;
}

.guia__texto p:last-child {
    margin-bottom: 0;
}

/* O aviso de que as medidas sao do corpo e nao da T-shirt. E a regra
   editorial numero um do pacote, e por isso nao e uma nota de rodape: fica em
   cartao proprio, com icone, e a partir dos 1100 px cola-se ao topo com a
   coluna toda enquanto se rolam as tres tabelas. */
.guia__aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 0 0;
    padding: 16px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 500;
    line-height: 1.5;
    color: var(--preto);
    background: var(--branco);
    border-left: 4px solid var(--azul-borda);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 7, 45, 0.06);
}

.guia__aviso-icone {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--azul-realce);
}

.guia__aviso-icone svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Tres atalhos para a tabela que interessa. Sao a mesma capsula do menu de
   ancoras do topo da pagina, com o mesmo raio e a mesma borda de 2 px: quem
   ja usou aquele menu reconhece estes. */
.guia__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.guia__atalho {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 600;
    line-height: 1;
    color: var(--azul-realce);
    text-decoration: none;
    background: transparent;
    border: 2px solid var(--azul-realce);
    border-radius: 60px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.guia__atalho:hover,
.guia__atalho:focus-visible {
    color: var(--branco);
    background: var(--azul-realce);
}

.guia__atalho:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}

.guia__tabelas {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* --- O cartao de cada tabela ------------------------------------------
   A pagina inteira sao cartoes: os dez assuntos da grelha, o formulario de
   voluntariado, a chamada final. As tabelas eram a unica coisa a flutuar. */

.cartao-tamanhos {
    overflow: hidden;
    background: var(--branco);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 7, 45, 0.08);
    /* Para o salto de ancora nativo nao esconder a cabeca do cartao debaixo do
       cabecalho fixo. O site.js tem o seu proprio deslocamento; isto e para
       quando o JavaScript nao corre. */
    scroll-margin-top: 130px;
}

.cartao-tamanhos__cabeca {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    color: var(--branco);
    background: var(--azul);
}

.cartao-tamanhos__icone {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--azul-borda);
}

.cartao-tamanhos__icone svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cartao-tamanhos__rotulo {
    min-width: 0;
}

.cartao-tamanhos__titulo {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo-destaque);
    font-weight: 700;
    line-height: 1.2;
    color: var(--branco);
}

/* Quantos tamanhos e de qual a qual. Sai da propria tabela e responde a
   pergunta antes de a tabela ser lida. */
.cartao-tamanhos__gama {
    margin: 3px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.78);
}

/* Os 10 px de lado deixam o xadrez das filas respirar dentro do cartao: com
   os 14 px de espacamento das celulas, o texto fica a 24 px da borda. */
.cartao-tamanhos__corpo {
    padding: 12px 10px 20px;
}

/* A nota da idade, imediatamente abaixo da tabela de crianca, dentro do mesmo
   cartao. O pacote exige-a «visualmente destacada», e e a unica nota do bloco
   com fundo proprio: a idade engana, e a medida e que manda. */
.tamanhos__nota {
    margin: 16px 14px 0;
    padding: 12px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 1.5;
    font-weight: 600;
    color: var(--preto);
    background: #FFF4E5;
    border-left: 3px solid #C87A00;
    border-radius: 8px;
}

/* --- O acordeao -------------------------------------------------------
   <details> puro, como o indice das paginas legais e o seletor de linguas:
   abre e fecha sem JavaScript nenhum, responde ao teclado de origem e nasce
   fechado, que e o que o ponto 7 do pacote pede. */

.guia__faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.dobra {
    background: var(--branco);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 7, 45, 0.08);
}

.dobra__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    min-height: 56px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    font-weight: 600;
    line-height: 1.35;
    color: var(--preto);
    cursor: pointer;
    list-style: none;
}

.dobra__pergunta::-webkit-details-marker {
    display: none;
}

/* O sinal de abrir e fechar. Desenhado em CSS, sem imagem nem icone novo. */
.dobra__pergunta::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--azul-realce);
    border-bottom: 2px solid var(--azul-realce);
    transform: rotate(45deg) translate(-2px, -2px);
}

.dobra[open] .dobra__pergunta::after {
    transform: rotate(-135deg) translate(-4px, -4px);
}

.dobra__resposta {
    padding: 0 20px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    line-height: 1.55;
    color: var(--preto);
}

.dobra__resposta p {
    margin: 0;
}

/* O anel de foco do teclado, o mesmo que a fase 26 pos nos botoes. */
.dobra__pergunta:focus-visible {
    outline: 2px solid var(--azul-realce);
    outline-offset: 2px;
    border-radius: 14px;
}

/* --- O CTA do fim -----------------------------------------------------
   Em cartao azul, que e a linguagem desta pagina e da chamada final do site.
   Na fase 41 eram tres linhas soltas por cima do cinzento. */

.guia__final {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 28px;
    color: var(--branco);
    background: var(--azul);
    border-radius: 24px;
}

.guia__final-texto {
    min-width: 0;
}

.guia__final-titulo {
    margin: 0 0 8px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-h2-cartao);
    font-weight: 700;
    line-height: 1.15;
    color: var(--branco);
}

.guia__final p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.guia__final .botao {
    flex: 0 0 auto;
}

/* O atalho do heroi, fase 42. Pedido do Luis: a capsula «Guia de Tamanhos»
   existe no menu de ancoras, mas vive dentro de um carrossel de onze e passa
   despercebida. Aqui e a unica coisa clicavel do primeiro ecra alem do menu. */
.heroi-pagina__acao {
    margin-top: 24px;
}

@media (min-width: 900px) {
    .guia__final {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        padding: 40px 48px;
    }
}

/* Abaixo dos 1100 px e uma coluna so, e a coluna nao pode ocupar os 1185 px
   uteis do contentor: quatro colunas de tabela esticadas por essa largura
   deixam metade de cada celula em branco e a fila deixa de se seguir com os
   olhos. Trava-se nos 780, que e onde a tabela de crianca fica cheia. */
@media (max-width: 1099px) {

    .guia,
    .guia__final {
        max-width: 780px;
        margin-inline: auto;
    }
}

@media (min-width: 1100px) {
    .guia {
        grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
        gap: 56px;
    }

    /* A coluna de abertura acompanha as tabelas. Os 130 px sao o cabecalho
       fixo (95) mais folga. */
    .guia__intro {
        position: sticky;
        top: 130px;
    }
}

/* --- O bloco da T-shirt na Home, fase 41 ------------------------------- */

/* O texto novo do bloco, entre o H2 e os dois botoes. */
.corpo--tshirt {
    max-width: var(--medida-leitura);
    margin-inline: auto;
    text-align: center;
}

/* Os dois botoes lado a lado no computador, empilhados no telemovel. O
   .tshirt__acoes ja era uma coluna centrada; passa a linha quando ha
   espaco. */
@media (min-width: 768px) {
    .tshirt__acoes {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {

    /* O pacote exige leitura a 320 px, e e ai que quatro e cinco colunas de
       intervalos apertam. Medido na fase 41: a 16 px as tabelas de homem e
       mulher davam 325 px numa caixa de 280 e obrigavam a deslizar. A 14 px
       passam a caber inteiras.

       Nao e «reduzir o texto ao ponto de dificultar a leitura», que o ponto 3
       do pacote proibe: 14 px e a mesma ficha das etiquetas dos formularios do
       site, --t-etiqueta. */
    .tabela-tamanhos {
        font-size: var(--t-etiqueta);
    }

    /* FASE 42: a coluna do tamanho fica no mesmo degrau do resto da tabela.
       No computador sobe um degrau para se varrer com os olhos; no telemovel
       cada pixel dessa coluna e largura que falta as outras quatro. */
    .tabela-tamanhos tbody th {
        font-size: var(--t-etiqueta);
    }

    /* Os 8 px de lado sao o minimo que deixa o xadrez ler-se como fila. Com os
       14 px do computador, as tabelas de homem e de mulher passavam de 285 para
       325 px e deslizavam num ecra de 375 onde antes cabiam. */
    .tabela-tamanhos th,
    .tabela-tamanhos td {
        padding: 10px 8px;
    }

    .guia__titulo {
        font-size: var(--t-h2-cartao);
    }

    .cartao-tamanhos__cabeca {
        padding: 16px 18px;
        gap: 12px;
    }

    .cartao-tamanhos__corpo {
        padding: 10px 4px 18px;
    }

    .tamanhos__nota {
        margin-inline: 8px;
    }

    .guia__final-titulo {
        font-size: var(--t-corpo-grande);
    }
}


/* 49. Estado das inscricoes esgotadas, fase 43 ============================
   As inscricoes esgotaram (EVENTO_INSCRICOES_ABERTAS a false). Cada CTA de
   inscricao passa a um selo de estado, e o heroi da /informacoes/ ganha a
   pilula da Direcao A. Nada disto e clicavel: e estado, nao acao, e o desenho
   diz isso, sem a borda azul-borda de 3px que nos botoes significa «carrega».  */

/* O selo que substitui os 24 CTAs. Herda .botao (forma e tamanho) e troca o
   que o faz parecer accionavel: fora a borda viva, dentro um contorno discreto,
   cursor normal e um ponto que sinaliza estado. */
.botao--esgotado {
    gap: 10px;
    color: var(--azul);
    background: var(--cinza-claro);
    border: 1.5px solid #CFD6E2;
    /* 16/09, pedido do Luis: o selo volta a levar a plataforma da Global Sport,
       por isso sai o cursor: default. Feito no servidor, trazido para aqui a 23/09. */
}

.botao--esgotado .botao__ponto {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--azul-realce);
}

/* O selo no cabecalho, sobre o fundo Marine Blue. Claro para se ler, discreto
   para nao parecer um botao a pedir clique. */
.botao-inscricao--esgotado {
    color: var(--branco);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
}

/* A pilula de anuncio no heroi, a Direcao A. Sobre o veu azul do heroi, o
   azul-borda do «2026» do logotipo da o realce. */
.heroi-pagina__estado {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 8px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-pequeno);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--branco);
    background: rgba(0, 169, 255, 0.16);
    border: 1px solid rgba(0, 169, 255, 0.45);
    border-radius: 40px;
}

.heroi-pagina__estado-ponto {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--azul-borda);
}

/* O agradecimento por baixo da pilula no heroi, fase 43. So aparece com as
   inscricoes esgotadas, entre o H1 e o atalho do guia de tamanhos. */
.heroi-pagina__estado-texto {
    max-width: 460px;
    margin: 14px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    line-height: 1.5;
    color: var(--branco);
}


/* A frase curta do banner só existe no telemóvel (secção 41). */
.consentimento__corpo-curto {
    display: none;
}

/* 41. I65, 25/09/2026: banner de cookies e rodapé no telemóvel ============
   Duas correções pedidas pelo Luís para o site inteiro, só abaixo dos 768 px.
   Do computador para cima nada muda.

   B. O banner ocupava 323 px a 375 x 812, 39,8% do ecrã. A meta é ficar
   abaixo dos 20%. O texto não muda nem se esconde: o título passa a correr
   na mesma linha do texto, a letra desce para 14 px e o texto longo dá lugar a uma frase curta com a ligação «Saber mais» (decisão do Luís, 25/09) e os três botões ficam
   numa fila só, os três do mesmo tamanho (o Rejeitar e o Aceite tudo
   continuam iguais ao pixel, como a lei pede). Com o Personalizar aberto o
   banner pode crescer, mas nunca passa do ecrã: rola por dentro. */
@media (max-width: 767px) {
    .consentimento {
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .consentimento__caixa {
        gap: 8px;
    }

    .consentimento__texto {
        flex: 1 1 100%;
        font-size: 14px;
        line-height: 1.4;
    }

    .consentimento__titulo,
    .consentimento__texto p {
        display: inline;
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
    }

    .consentimento__titulo::after {
        content: " ";
    }

    .consentimento__texto .consentimento__corpo {
        display: none;
    }

    .consentimento__texto .consentimento__corpo-curto {
        display: inline;
    }

    .consentimento__corpo-curto a {
        color: var(--azul-realce);
        font-weight: 600;
        white-space: nowrap;
    }

    .consentimento__botoes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .consentimento__botao[data-consentimento="personalizar"] {
        grid-column: auto;
    }

    /* Com o Personalizar aberto, esse botão sai e a fila volta a duas colunas. */
    .consentimento__botoes:has([data-consentimento="personalizar"][hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consentimento__botao--guardar {
        grid-column: 1 / -1;
    }

    .consentimento__botao {
        padding-inline: 6px;
        font-size: 13px;
    }
}

/* C. Ligações do rodapé com alvo de toque de 44 px, contra os 17 a 25 que
   tinham. As listas perdem o intervalo de 10 px porque a caixa de cada ligação
   já traz o ar à volta do texto. As redes sociais passam de 40 a 44. */
@media (max-width: 767px) {
    /* A coluna legal não tem lista: as ligações vivem direto na coluna. */
    .rodape__lista,
    .rodape__coluna--legais {
        gap: 0;
    }

    .rodape__ligacao,
    .rodape__contacto a,
    .rodape__base a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
        padding-block: 0;
    }

    .rodape__rede {
        width: 44px;
        height: 44px;
    }
}


/* 50. Comunicado da nova data, fase 49 (28/09/2026) =======================
   A pagina /comunicado-nova-data/ (e EN e ES) e o destaque da homepage.
   O unico momento grande e a mudanca de data: o «18» riscado e o «17» no
   azul do «2026» do logotipo. Tudo o resto fica quieto, com os tokens que o
   site ja tem: Marine, Porto Blue, 16 px de raio dos cartoes, Poppins.
   Sem animacoes, por isso nada a desligar em prefers-reduced-motion.        */

/* O heroi: titulo a esquerda, data a direita, colunas desiguais. */
.comunicado-heroi {
    padding-inline: var(--padding-lateral);
    background: var(--azul);
    color: var(--branco);
}

.comunicado-heroi__interior {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    gap: 64px;
    max-width: 1160px;
    margin-inline: auto;
    padding-block: 88px 96px;
}

.comunicado-heroi__etiqueta {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--azul-borda);
}

.comunicado-heroi__titulo {
    max-width: 620px;
    margin-top: 16px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(32px, 1.6vw + 24px, 48px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--branco);
    text-wrap: balance;
}

.comunicado-data {
    padding-left: 48px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    font-family: 'Poppins', sans-serif;
}

.comunicado-data__antes {
    font-size: var(--t-corpo);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.64);
}

.comunicado-data__antes s,
.destaque-comunicado__antes {
    text-decoration-line: line-through;
    text-decoration-color: var(--azul-borda);
    text-decoration-thickness: 2px;
}

.comunicado-data__agora {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}

.comunicado-data__dia {
    font-size: clamp(112px, 8vw + 40px, 184px);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--azul-borda);
}

.comunicado-data__resto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--t-corpo-destaque);
    font-weight: 600;
    line-height: 1.3;
    color: var(--branco);
}

.comunicado-data__semana {
    font-size: var(--t-pequeno);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* O corpo: coluna de leitura de 670 px e resumo fixo ao lado. */
.comunicado {
    padding-inline: var(--padding-lateral);
    background: var(--branco);
}

.comunicado__grelha {
    display: grid;
    grid-template-columns: minmax(0, 670px) minmax(0, 344px);
    justify-content: space-between;
    align-items: start;
    gap: 64px;
    max-width: 1160px;
    margin-inline: auto;
    padding-block: 80px 112px;
}

.comunicado__assinantes {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(0, 7, 45, 0.1);
}

.comunicado__assinantes-rotulo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-etiqueta);
    line-height: 1.4;
    color: var(--cinza-rede);
}

.comunicado__logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 16px;
}

.comunicado__logo {
    display: block;
    width: auto;
    height: 72px;
}

.comunicado__logos-filete {
    width: 1px;
    height: 48px;
    background: rgba(0, 7, 45, 0.2);
}

.comunicado__corpo {
    font-family: 'Poppins', sans-serif;
    font-size: var(--t-corpo);
    font-weight: 400;
    line-height: 1.7;
    color: var(--preto);
}

.comunicado__corpo p {
    margin-bottom: 20px;
    text-wrap: pretty;
}

/* O primeiro paragrafo diz tudo; abre um degrau acima. */
.comunicado__corpo p:first-child {
    font-size: 21px;
    font-weight: 500;
    line-height: 1.6;
}

.comunicado__corpo .comunicado__fecho {
    margin-top: 36px;
    margin-bottom: 0;
    padding-left: 20px;
    border-left: 4px solid var(--azul-borda);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--azul-realce);
}

.comunicado__resumo {
    position: sticky;
    top: calc(var(--cabecalho-altura) + 32px);
    padding: 32px;
    border-radius: 16px;
    background: var(--cinza-claro);
    font-family: 'Poppins', sans-serif;
}

.comunicado__resumo-titulo {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--azul);
}

.comunicado__factos {
    margin-top: 12px;
}

.comunicado__facto {
    padding-block: 14px;
}

.comunicado__facto+.comunicado__facto {
    border-top: 1px solid rgba(0, 7, 45, 0.1);
}

.comunicado__facto dt {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--azul-realce);
}

.comunicado__facto dd {
    margin: 4px 0 0;
    font-size: var(--t-pequeno);
    line-height: 1.5;
    color: var(--preto);
}

.comunicado__acoes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
}

/* O botao do reembolso vive dentro do item Devolucao, logo abaixo do texto. */
.comunicado__facto-acao {
    margin-top: 12px;
}

/* O destaque da homepage: cartao Marine na faixa cinzenta do contador. */
.destaque-comunicado {
    padding: 8px var(--padding-lateral) 72px;
    background: var(--cinza-claro);
}

.destaque-comunicado__interior {
    max-width: var(--conteudo);
    margin-inline: auto;
}

.destaque-comunicado__cartao {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) auto;
    align-items: center;
    gap: 56px;
    padding: 48px 56px;
    border-radius: 16px;
    background: var(--azul);
    font-family: 'Poppins', sans-serif;
    color: var(--branco);
}

.destaque-comunicado__data {
    display: flex;
    flex-direction: column;
    padding-right: 48px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.destaque-comunicado__antes {
    font-size: var(--t-pequeno);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.64);
}

.destaque-comunicado__dia {
    margin-block: 12px 8px;
    font-size: 128px;
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--azul-borda);
}

.destaque-comunicado__resto {
    display: flex;
    flex-direction: column;
    font-size: var(--t-pequeno);
    font-weight: 600;
    line-height: 1.4;
}

.destaque-comunicado__logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding-left: 48px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.destaque-comunicado__logos img {
    display: block;
    width: auto;
    height: 64px;
    filter: brightness(0) invert(1);
}

.destaque-comunicado__etiqueta {
    font-size: var(--t-etiqueta);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--azul-borda);
}

.destaque-comunicado__titulo {
    max-width: 640px;
    margin-top: 12px;
    font-size: var(--t-h2-cartao);
    font-weight: 700;
    line-height: 1.15;
    color: var(--branco);
    text-wrap: balance;
}

.destaque-comunicado__resumo {
    max-width: 560px;
    margin-block: 16px 28px;
    font-size: var(--t-corpo);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    text-wrap: pretty;
}

.destaque-comunicado__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

/* Tablet: o resumo da pagina desce para baixo do texto. */
@media (max-width: 1024px) {
    .comunicado__grelha {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        padding-block: 64px 88px;
    }

    .comunicado__resumo {
        position: static;
        max-width: 670px;
    }

    .destaque-comunicado__cartao {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 40px;
        padding: 40px;
    }

    .destaque-comunicado__data {
        padding-right: 32px;
    }

    .destaque-comunicado__dia {
        font-size: 104px;
    }

    .destaque-comunicado__logos {
        grid-column: 2;
        flex-direction: row;
        justify-content: flex-start;
        gap: 24px;
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .destaque-comunicado__logos img {
        height: 48px;
    }
}

/* Telemovel: tudo numa coluna; a data passa para cima do titulo. */
@media (max-width: 767px) {
    .comunicado-heroi__interior {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding-block: 56px 64px;
    }

    .comunicado-data {
        padding-left: 0;
        padding-top: 28px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .comunicado__grelha {
        padding-block: 48px 72px;
    }

    .comunicado__logo {
        height: 56px;
    }

    .comunicado__logos {
        gap: 20px;
    }

    .comunicado__corpo p:first-child {
        font-size: 19px;
    }

    .comunicado__corpo .comunicado__fecho {
        font-size: 20px;
    }

    .comunicado__resumo {
        padding: 24px;
    }

    .destaque-comunicado {
        padding-bottom: 48px;
    }

    .destaque-comunicado__cartao {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 28px 24px 32px;
    }

    .destaque-comunicado__data {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "dia antes"
            "dia resto";
        align-items: center;
        column-gap: 16px;
        padding-right: 0;
        padding-bottom: 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .destaque-comunicado__antes {
        grid-area: antes;
        align-self: end;
    }

    .destaque-comunicado__dia {
        grid-area: dia;
        margin: 0;
        font-size: 88px;
    }

    .destaque-comunicado__resto {
        grid-area: resto;
        align-self: start;
    }

    .destaque-comunicado__logos {
        grid-column: 1;
        padding-top: 20px;
    }

    .destaque-comunicado__logos img {
        height: 40px;
    }

    .destaque-comunicado__titulo {
        font-size: 24px;
    }

    .destaque-comunicado__resumo {
        font-size: var(--t-pequeno);
    }
}


/* 51. Fase 51: alvos de toque, medida das legais (auditoria v4) ============
   Medido em auditoria-v4/AUDITORIA.md, nas tres linguas e a 375 px. Fica no
   fim de proposito: cada regra corrige a de origem sem se lhe mexer, e diz
   qual achado resolve. O piso e o da fase 26, 44 px.                         */

/* A51-03: a capsula das ancoras das Informacoes media 48 px mas so o texto
   (20 px de altura) era clicavel; um toque na margem nao fazia nada. A
   ligacao passa a ser a capsula inteira. A altura a vista nao muda (44 da
   ligacao mais 4 da borda, os mesmos 48). */
.ancoras__item {
    padding: 0;
}

.ancoras__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: var(--botao-raio);
}

/* A51-04: o botao de rever cookies tinha 40x40. */
.consentimento-rever {
    width: 44px;
    height: 44px;
}

/* A51-05: no indice das legais, o «Nesta pagina» (que no telemovel abre e
   fecha a lista) tinha 21 px, e cada entrada 32. */
.legal-indice__titulo {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.legal-indice__lista a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 8px;
}

/* A51-06: os contactos (email e morada) tinham 24 a 27 px de altura, e as
   redes do Contacto 40x40. O aspeto nao muda, so a area de toque. */
.contacto__item a {
    min-height: 44px;
}

.contacto__rede {
    width: 44px;
    height: 44px;
}

/* A51-07: o artigo das legais tinha linhas de 94 caracteres. 68ch fica no
   intervalo legivel (45 a 75). */
.legal {
    max-width: 68ch;
}

/* A51-09: o logotipo e os icones das redes herdavam o sublinhado do
   browser. Nao se via, mas era sublinhado por defeito onde nao ha texto. */
.cabecalho__logo,
.rodape__rede,
.contacto__rede {
    text-decoration: none;
}

/* A51-01, telemovel: os dois botoes do destaque a toda a largura, para
   ficarem iguais em todas as linguas (em ES o segundo partia em duas linhas
   com uma largura diferente do primeiro). */
@media (max-width: 767px) {
    .destaque-comunicado__acoes .botao {
        width: 100%;
    }
}


/* 52. Fase 51, propostas aprovadas pelo Luis a 28/09/2026 (I75) ===========
   A51-04: o botao flutuante de rever cookies tapava texto enquanto se rolava,
   em 37 das 39 paginas no telemovel. Sai abaixo de 768 px. Retirar o
   consentimento continua a um toque em todas as paginas pelo «Gerir cookies»
   do rodape (39 de 39, medido), que e o que a Politica de Cookies ja descreve
   nas tres linguas. No computador fica, porque la nao tapa nada.
   A51-08: as linhas longas passam a coluna de leitura da fase 30 (670 px),
   que a fase 30 deixou escrita a espera destas paginas.                      */
@media (max-width: 767px) {
    .consentimento-rever {
        display: none;
    }
}

/* Parceiros (alinhado a esquerda): 125 caracteres por linha em ES. */
.seccao--parceiros .corpo {
    width: auto;
    max-width: var(--medida-leitura);
}

/* Percursos (centrado): 125 caracteres por linha a 20 px. Texto centrado
   precisa de linhas um pouco mais longas e equilibradas: a 670 px partia em
   linhas desiguais com palavras soltas. 760 px da 73 caracteres, dentro do
   intervalo, e o balance reparte as palavras por igual (paragrafos de ate
   quatro linhas, abaixo do limite de seis do Chromium). */
.corpo--percursos p {
    max-width: 760px;
    margin-inline: auto;
    text-wrap: balance;
}

/* A nota de privacidade dos formularios (96 a 115 caracteres a 14 px) fica
   como estava: a 72ch passava de 3 para 4 linhas com «Privacidade.» sozinho,
   e numa nota curta ao lado do formulario 3 linhas leem-se melhor. */