/* ══════════════════════════════════════════════════════════════
   FRANCISCA SALGADO — golfe amador
   Fraunces variável (display, opsz 9–144) + Manrope variável (corpo)
   Paleta: relva, linho e brasa.
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;src:url('../fonts/fraunces-italic.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/manrope.woff2') format('woff2')}

:root{
  --papel:#F7F5EE;
  --superficie:#EFEBDF;
  --relva-clara:#DCE7DA;
  --tinta:#12281E;
  --tinta-fraca:#5B6E62;
  --relva:#1B6B47;
  --relva-viva:#2E9C6A;
  --linha:rgba(27,107,71,.20);
  --linha-forte:rgba(27,107,71,.40);
  --brasa:#CF5230;
  --ouro:#B3861F;
  --ph-fundo:#E8E4D7;
  --mistura:multiply;
  --grao:.05;
  --sombra:0 26px 64px -32px rgba(18,40,30,.5);

  --larg:min(1440px,100% - clamp(3rem,10vw,9rem));
  --sec:clamp(2.4rem,4vw,4.2rem);
  --curva:cubic-bezier(.22,.61,.36,1);
  --curva-f:cubic-bezier(.76,0,.24,1);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --corpo:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}

html[data-tema="escuro"]{
  --papel:#091411;
  --superficie:#10211A;
  --relva-clara:#162E24;
  --tinta:#E3EDE5;
  --tinta-fraca:#89A295;
  --relva:#4FC28B;
  --relva-viva:#6FD9A4;
  --linha:rgba(79,194,139,.22);
  --linha-forte:rgba(79,194,139,.44);
  --brasa:#FF8058;
  --ouro:#DCB552;
  --ph-fundo:#132A21;
  --mistura:screen;
  --grao:.07;
  --sombra:0 26px 64px -32px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.sem-rolar{overflow:hidden}

body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--corpo);font-weight:400;
  font-size:clamp(1rem,.93rem + .3vw,1.09rem);
  line-height:1.62;overflow-x:hidden;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  transition:background-color .6s var(--curva),color .6s var(--curva);
}
/* `height:auto` aqui é defesa, não estética: os <img> deste sítio levam os
   atributos width e height para o navegador reservar o espaço certo, e sem
   esta linha é esse height que manda quando a largura encolhe — a imagem sai
   esticada. Quem precisa mesmo de altura fixa põe-na na sua própria classe,
   que ganha por especificidade. */
img,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--relva);outline-offset:4px}

.env{width:var(--larg);margin-inline:auto}
.num{font-variant-numeric:tabular-nums}

.saltar{position:fixed;top:-100px;left:1rem;z-index:300;background:var(--relva);color:var(--papel);
        padding:.7rem 1.1rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.saltar:focus{top:1rem}

/* ── tipografia ─────────────────────────────────────────── */
.d{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.022em;
   font-variation-settings:'opsz' 120;text-wrap:balance;margin:0}
.d--l{font-size:clamp(2.25rem,5.6vw,5rem)}
.d--m{font-size:clamp(1.65rem,3.2vw,2.75rem);line-height:1.06;font-variation-settings:'opsz' 60}

.rot{font-size:.69rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;
     color:var(--tinta-fraca);margin:0;display:flex;align-items:center;gap:.8rem}
.rot::before{content:"";width:1.9rem;height:1px;background:var(--relva);flex:none}
.rot--so::before{display:none}
.rot--claro{color:inherit;opacity:.82}

.txt{max-width:58ch;color:var(--tinta-fraca);margin:0 0 1rem}
.txt:last-child{margin-bottom:0}
.txt strong{color:var(--tinta);font-weight:700}
.lig{color:var(--relva);border-bottom:1px solid var(--linha-forte);transition:border-color .3s var(--curva)}
.lig:hover{border-color:var(--relva)}

/* Sinal de que a ligação sai daqui. Vale para os botões-cápsula e para as
   ligações dentro de texto; fica de fora quem já tem seta própria — as fichas
   oficiais, os cartões de apoio — através do data-sem-seta. */
a[target="_blank"]:not([data-sem-seta])::after{
  content:"↗";font-size:.82em;margin-left:.34em;display:inline-block;
  transform:translateY(-.06em);opacity:.75;
  transition:transform .3s var(--curva),opacity .3s var(--curva)}
a[target="_blank"]:not([data-sem-seta]):hover::after{transform:translate(.1em,-.16em);opacity:1}
/* dentro do botão-cápsula a seta tem de ficar por cima do preenchimento */
.cap[target="_blank"]::after{position:relative;z-index:1}

/* ── botões cápsula ─────────────────────────────────────── */
.cap{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
     padding:.66rem 1.2rem;border:1px solid var(--linha-forte);border-radius:999px;
     font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;
     color:var(--tinta);white-space:nowrap;position:relative;overflow:hidden;
     transition:color .35s var(--curva),border-color .35s var(--curva)}
.cap::before{content:"";position:absolute;inset:0;background:var(--relva);border-radius:inherit;
             transform:translateY(101%);transition:transform .45s var(--curva)}
.cap:hover{color:var(--papel);border-color:var(--relva)}
.cap:hover::before{transform:translateY(0)}
.cap > *{position:relative;z-index:1}
.cap--cheio{background:var(--relva);border-color:var(--relva);color:var(--papel)}
.cap--cheio::before{background:var(--tinta)}
.cap--ico{padding:.5rem;width:2.2rem;height:2.2rem}
.cap--fino{padding:.42rem .85rem;font-size:.63rem;border-color:var(--linha)}
.ico{width:15px;height:15px;position:relative;z-index:1}

/* ── grão de película ───────────────────────────────────── */
.grao{position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:var(--grao);
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      animation:grao 1.2s steps(3) infinite;mix-blend-mode:var(--mistura)}
@keyframes grao{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}

/* ── cursor ─────────────────────────────────────────────── */
.cur{position:fixed;top:0;left:0;z-index:250;pointer-events:none;opacity:0;
     transition:opacity .3s var(--curva);mix-blend-mode:var(--mistura)}
body.tem-cur .cur{opacity:1}
.cur__p{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--relva);
        transform:translate(-50%,-50%)}
.cur__a{position:absolute;width:38px;height:38px;border-radius:50%;border:1px solid var(--linha-forte);
        transform:translate(-50%,-50%) scale(1);transition:transform .35s var(--curva),background-color .35s var(--curva)}
body.cur-mag .cur__a{transform:translate(-50%,-50%) scale(1.85);background:color-mix(in srgb,var(--relva) 12%,transparent)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ── pré-carregamento ───────────────────────────────────── */
.carga{position:fixed;inset:0;z-index:400;background:var(--papel);display:grid;place-items:center;
       transition:opacity .7s var(--curva),visibility .7s}
.carga.fora{opacity:0;visibility:hidden}
.carga__in{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.carga__n{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 120;
          font-size:clamp(1.9rem,6.4vw,4.2rem);letter-spacing:-.02em;line-height:1;overflow:hidden}
.carga__n i{display:inline-block;transform:translateY(105%);animation:sobe .9s var(--curva) forwards;font-style:normal}
@keyframes sobe{to{transform:translateY(0)}}
.carga__c{font-size:.7rem;font-weight:800;letter-spacing:.3em;color:var(--tinta-fraca)}
.carga__barra{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--linha)}
.carga__barra i{display:block;height:100%;width:0;background:var(--relva);transition:width .25s linear}

/* ── nav ────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;transition:transform .5s var(--curva)}
/* O cabeçalho não se esconde. Escondê-lo ao rolar poupava uns pixels e tirava
   o menu — e o nome da atleta — de quem estava a meio de uma página comprida. */
.nav__in{width:var(--larg);margin-inline:auto;display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
         padding-block:1.05rem;transition:padding .4s var(--curva)}
.nav.colada .nav__in{padding-block:.6rem}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;
            background:color-mix(in srgb,var(--papel) 74%,transparent);
            backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
            border-bottom:1px solid transparent;opacity:0;transition:opacity .4s var(--curva),border-color .4s var(--curva)}
.nav.colada::after{opacity:1;border-bottom-color:var(--linha)}

/* Enquanto está por cima da fotografia do hero, o cabeçalho é branco. Assim
   que cola ao topo ganha o fundo claro e volta às cores da casa. */
.nav--sobre-foto:not(.colada) .marca__t,
.nav--sobre-foto:not(.colada) .nav__links a{color:#FFF}
.nav--sobre-foto:not(.colada) .marca__b{color:#FFF}
.nav--sobre-foto:not(.colada) .nav__links a{opacity:.82}
.nav--sobre-foto:not(.colada) .nav__links a:hover,
.nav--sobre-foto:not(.colada) .nav__links a[aria-current="page"]{opacity:1}
.nav--sobre-foto:not(.colada) .nav__links a::after{background:#FFF}
.nav--sobre-foto:not(.colada) .cap:not(.cap--cheio){color:#FFF;border-color:rgba(255,255,255,.42)}
.nav--sobre-foto:not(.colada) .cap:not(.cap--cheio):hover{background:rgba(255,255,255,.16)}
.nav--sobre-foto:not(.colada) .ham{border-color:rgba(255,255,255,.42)}
.nav--sobre-foto:not(.colada) .ham i{background:#FFF}

.marca{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
.marca__t{font-family:var(--display);font-weight:600;font-variation-settings:'opsz' 14;
          font-size:1.02rem;letter-spacing:.02em}
.marca__b{width:1.35rem;height:1.35rem;flex:none;color:var(--relva)}
.nav__links{display:flex;gap:clamp(.9rem,2.1vw,1.9rem);margin-left:auto}
.nav__links a{font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;
              color:var(--tinta-fraca);position:relative;padding-block:.2rem}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--relva);
                     transform:scaleX(0);transform-origin:right;transition:transform .4s var(--curva)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--tinta)}
.nav__links a[aria-current="page"]::after,.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__fer{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.nav__links + .nav__fer{margin-left:0}
.nav__fer .cap{padding:.48rem .82rem;font-size:.65rem}

.ham{display:none;width:2.6rem;height:2.6rem;border:1px solid var(--linha-forte);border-radius:999px;
     background:none;cursor:pointer;padding:0;align-items:center;justify-content:center;gap:.32rem;
     flex-direction:column;transition:border-color .3s var(--curva)}
.ham i{display:block;width:1rem;height:1.5px;background:currentColor;border-radius:2px;
       transition:transform .35s var(--curva),opacity .25s var(--curva)}
.ham:hover{border-color:var(--relva)}
.ham[aria-expanded="true"] i:first-child{transform:translateY(.205rem) rotate(45deg)}
.ham[aria-expanded="true"] i:last-child{transform:translateY(-.205rem) rotate(-45deg)}

.menu{display:none}
.menu__l{display:flex;flex-direction:column;gap:.2rem}
.menu__l a{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 40;
           font-size:clamp(1.9rem,8.5vw,2.7rem);line-height:1.2;color:var(--tinta);
           padding:.2rem 0;transition:color .3s var(--curva)}
.menu__l a[aria-current="page"],.menu__l a:hover{color:var(--relva)}
.menu__b{align-self:flex-start;margin-top:2rem}

@media (max-width:1020px){
  .nav__links{display:none}
  .ham{display:flex}
  .nav__cta{display:none}
  .nav--aberto .nav__in{position:relative;z-index:2}
  .menu{display:block;position:fixed;inset:0;z-index:1;
        padding:clamp(5.5rem,16vh,8rem) 0 clamp(2rem,6vh,4rem);
        background:var(--papel);overflow-y:auto;overscroll-behavior:contain}
  .menu__in{width:var(--larg);margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start}
  .menu[hidden]{display:none}
}

/* ── HERO ───────────────────────────────────────────────── */
/* A fotografia ocupa o ecrã inteiro e o nome vive por cima dela. Era um
   retrato pequeno numa caixa ao lado do nome, sobre fundo claro: arrumado,
   e sem impacto nenhum. Uma página de atleta abre com a atleta. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
      justify-content:flex-end;padding:clamp(6rem,14vh,10rem) 0 clamp(1.6rem,4vh,3rem);
      overflow:hidden;isolation:isolate;background:#0B1512}
.hero__f{position:absolute;inset:0;margin:0;z-index:-1;isolation:isolate}
.hero__img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover;display:block;border:0;
           /* a jogadora está no terço esquerdo da fotografia: sem isto, num
              ecrã largo o corte deixava-a de fora e ficava só o arvoredo */
           object-position:34% 20%}
@media (min-width:900px){.hero__img{object-position:28% 16%}}

/* Escurece de baixo para cima. Sem isto o nome branco desaparece contra o céu.
   Vive dentro da <figure>, e não no <section>, para o crédito lhe poder ficar
   por cima — a <figure> está numa camada abaixo do conteúdo, e um filho não
   sobe acima da camada do pai por muito z-index que leve. */
.hero__f::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(6,14,11,.92) 0%,rgba(6,14,11,.72) 28%,
             rgba(6,14,11,.28) 58%,rgba(6,14,11,.42) 100%)}

/* O crédito é obrigatório e não pode roubar a fotografia: fica no canto de
   baixo, do lado oposto ao conteúdo, no mesmo tom do resto. */
.hero__cred{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1.6rem,4vh,3rem);
            font-size:.52rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
            color:#FFF;opacity:.55;text-align:right;max-width:13rem;z-index:2;
            text-shadow:0 1px 4px rgba(0,0,0,.5)}
@media (max-width:900px){
  .hero__cred{left:clamp(1rem,3vw,2rem);right:auto;bottom:.7rem;text-align:left;max-width:none;opacity:.45}
}

.hero__in{width:var(--larg);margin-inline:auto;position:relative;
          display:flex;flex-direction:column;align-items:flex-start}
.hero .rot--claro{color:rgba(255,255,255,.72)}
.hero .rot--claro::before{background:rgba(255,255,255,.5)}

.nome{font-family:var(--display);font-weight:400;margin:.7rem 0 0;line-height:.88;
      font-size:clamp(3rem,11.5vw,11.5rem);letter-spacing:-.04em;color:#FFF;
      font-variation-settings:'opsz' 144;display:flex;flex-wrap:wrap;user-select:none}
.nome__p{display:inline-flex}
.nome__l{display:inline-block;transform:translateY(110%);opacity:0;will-change:transform}
.nome__e{width:.22em}
body.pronto .nome__l{transform:translateY(0);opacity:1;
  transition:transform 1.05s var(--curva),opacity .7s var(--curva);
  transition-delay:calc(var(--i) * 48ms)}

.hero__frase{font-family:var(--display);font-weight:300;font-style:italic;
             font-size:clamp(1.1rem,2vw,1.75rem);line-height:1.3;
             max-width:34ch;margin:clamp(1rem,2.4vw,1.9rem) 0 0;
             font-variation-settings:'opsz' 40;text-wrap:balance;color:rgba(255,255,255,.88)}

.hero__pe{width:100%;margin:clamp(1.6rem,4vh,3rem) 0 0;display:flex;align-items:center;
          justify-content:space-between;gap:1rem clamp(1rem,3vw,2rem);flex-wrap:wrap}
.hero__pe-d{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.8rem);margin-left:auto}
@media (max-width:620px){.hero__pe-d .rolar{display:none}}
.prox{display:inline-flex;align-items:center;gap:.9rem;padding:.72rem 1.2rem;border-radius:999px;
      border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
      backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#FFF;
      transition:border-color .35s var(--curva),background-color .35s var(--curva)}
.prox:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.2)}
.prox__p{display:inline-flex;align-items:center;gap:.5rem;font-size:.65rem;font-weight:800;
         text-transform:uppercase;letter-spacing:.17em;color:var(--brasa);white-space:nowrap}
.ponto{width:7px;height:7px;border-radius:50%;background:var(--brasa);flex:none;animation:pulsa 2.6s infinite}
@keyframes pulsa{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brasa) 60%,transparent)}
                 70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.prox__q{font-size:.82rem;font-weight:500;color:#FFF}
.prox__s{color:rgba(255,255,255,.8)}
.hero .prox__p{color:#8FD9AE}
@media (max-width:640px){.prox{flex-wrap:wrap;gap:.5rem .8rem}.prox__q{font-size:.75rem}}

.rolar{width:1px;height:clamp(40px,7vh,72px);background:rgba(255,255,255,.3);position:relative;overflow:hidden;flex:none}
.rolar i{position:absolute;inset:0;background:#FFF;transform:translateY(-100%);
         animation:desce 2.4s var(--curva) infinite}
@keyframes desce{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (max-width:640px){.rolar{display:none}}

/* ── placeholders ───────────────────────────────────────── */
.ph{position:relative;background:var(--ph-fundo);border:1px solid var(--linha);
    display:grid;place-items:center;overflow:hidden;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);
  background-size:48px 48px;background-position:center}
.ph::after{content:"";position:absolute;inset:12px;border:1px dashed var(--linha);pointer-events:none}
.ph__c{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.7rem;
       text-align:center;padding:1.5rem}
.ph__n{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 30;
       font-size:clamp(1.02rem,1.7vw,1.5rem);line-height:1.18;max-width:26ch;margin:0}
.ph__d{margin:0;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--relva)}
.ph__i{width:26px;height:26px;color:var(--relva);opacity:.75}
.ph--16{aspect-ratio:16/9}
.ph--43{aspect-ratio:3/4}
.ph--45{aspect-ratio:4/5}
.ph--1{aspect-ratio:1}
.ph--cheia{aspect-ratio:16/9;min-height:min(74svh,720px)}
@media (max-width:640px){.ph--cheia{aspect-ratio:4/5;min-height:0}}

/* ── secções ────────────────────────────────────────────── */
.sec{padding-block:var(--sec);position:relative}
.sec--fundo{background:var(--superficie)}
/* ── rankings, versão reduzida (página inicial) ─────────── */
/* Só o número, de onde vem, de quando é, e a ligação à ficha. O cartão
   inteiro vive na página de resultados; aqui era a mesma coisa escrita duas
   vezes no mesmo sítio. */
.rkbs{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.rkb{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
     padding:clamp(1.4rem,3vw,2.1rem);background:rgba(255,255,255,.045);
     box-shadow:0 0 0 1px rgba(255,255,255,.12);
     transition:background-color .45s var(--curva)}
.rkb:hover{background:rgba(255,255,255,.09)}
.rkb__r{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:#8FD9AE}
.rkb--europeu .rkb__r{color:#E4C36A}
.rkb__n{font-family:var(--display);font-weight:300;font-variation-settings:'opsz' 144;
        font-size:clamp(3.4rem,8vw,5.6rem);line-height:.95;letter-spacing:-.035em;color:#FFF;
        margin-block:.1em -.02em}
.rkb__n sup{font-size:.3em;vertical-align:.9em;margin-left:.06em}
.rkb__x{font-size:.86rem;color:rgba(255,255,255,.72)}
.rkb__e{margin-top:.7rem;font-size:.58rem;font-weight:700;text-transform:uppercase;
        letter-spacing:.14em;color:rgba(255,255,255,.45)}
.rkb__s{position:absolute;top:clamp(1.4rem,3vw,2.1rem);right:clamp(1.4rem,3vw,2.1rem);
        color:rgba(255,255,255,.5);transition:transform .4s var(--curva),color .4s var(--curva)}
.rkb:hover .rkb__s{color:#FFF;transform:translate(.2rem,-.2rem)}

/* Faixa escura, com o mapa de curvas por trás. O canvas vivia no hero, onde
   ficou tapado pela fotografia; aqui é que se vê — e dá à página um segundo
   momento visual, a meio, em vez de sete secções todas com o mesmo tom. */
.sec--escura{background:#0B1512;color:var(--papel);isolation:isolate;overflow:hidden}
.sec--escura .rot{color:#8FD9AE}
.sec--escura .rot::before{background:#8FD9AE}
.sec--escura .d,.sec--escura .txt{color:rgba(255,255,255,.9)}
.sec--escura .txt strong{color:#FFF}
.sec__campo{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.62;
            /* Esbate nas pontas, para a faixa não começar e acabar a corte. */
            -webkit-mask-image:linear-gradient(transparent,#000 16%,#000 74%,transparent);
                    mask-image:linear-gradient(transparent,#000 16%,#000 74%,transparent)}
.sec--curta{padding-block:calc(var(--sec) * .78)}

/* Duas secções seguidas somavam o espaço de baixo de uma ao de cima da outra
   — eram 317px de nada entre o fim de um assunto e o título do seguinte. Onde
   as duas têm o mesmo fundo não há sequer uma linha a justificá-lo, e o
   encontro colapsa para uma folga só. Onde o fundo muda, a faixa de cor já
   marca a mudança e chega menos ar. */
.sec + .sec{padding-top:calc(var(--sec) * .55)}
.sec--fundo + .sec:not(.sec--fundo),
.sec:not(.sec--fundo) + .sec--fundo{padding-top:var(--sec)}
.cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem 3rem;
     margin-bottom:clamp(2.2rem,4.5vw,4rem)}
.cab__t{display:flex;flex-direction:column;gap:1.1rem;max-width:min(100%,680px);flex:1 1 380px}
.cab__x{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;max-width:min(100%,42ch)}
.cab__bts{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}

.abre{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media (min-width:800px){.abre{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}}
.abre__f{margin:0;max-width:480px}
.abre__img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border:1px solid var(--linha)}
.abre__q{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;max-width:56ch}
.abre__q > p{margin:0}

/* revelação */
/* O `overflow:hidden` é a máscara de onde a linha sobe. Como os títulos têm
   line-height inferior a 1, a caixa é mais curta do que os glifos e a máscara
   cortava os descendentes da última linha — o «ç» e o «g» ficavam rentes.
   O padding alarga a máscara e a margem negativa devolve o espaço, por isso
   nada disto mexe no alinhamento. */
.ani{overflow:hidden;padding-block:.14em;margin-block:-.14em}
.ani > .ani__l{display:block;transform:translateY(105%);transition:transform 1s var(--curva);
               transition-delay:calc(var(--i) * 90ms)}
.vis .ani > .ani__l,.ani.vis > .ani__l{transform:translateY(0)}
.sobe-i{opacity:0;transform:translateY(24px);transition:opacity .9s var(--curva),transform .9s var(--curva)}
.vis .sobe-i,.sobe-i.vis{opacity:1;transform:none}

/* ── números / cartão de estatísticas ───────────────────── */
/* Grelhas de cartões: a moldura vive em cada cartão, por sombra, e não no
   fundo do contentor. Com o fundo no contentor, uma última fila incompleta
   deixava lá um retângulo de cor sólida onde não há cartão nenhum — e o
   número de cartões vem dos JSON, por isso a fila incompleta acontece. */
.nums{display:grid;gap:1px}
@media (min-width:620px){.nums{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.nums{grid-template-columns:repeat(4,1fr)}}
.numo{background:var(--papel);padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.35rem;
      box-shadow:0 0 0 1px var(--linha)}
.sec--fundo .numo{background:var(--superficie)}
.numo__v{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 90;
         font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:.92;letter-spacing:-.03em;
         font-variant-numeric:tabular-nums;color:var(--tinta)}
.numo__v sup{font-size:.4em;vertical-align:super;letter-spacing:0;margin-left:.08em;color:var(--relva)}
.numo__r{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--relva)}
.numo__n{font-size:.8rem;color:var(--tinta-fraca);margin:0;max-width:32ch}

/* ── lista de resultados ────────────────────────────────── */
.provas{border-top:1px solid var(--linha)}
.provas__vazio{padding:2rem 0;color:var(--tinta-fraca);font-size:.9rem}

.prova{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
       gap:.8rem clamp(1.1rem,2.6vw,2.6rem);
       padding:clamp(1rem,1.9vw,1.6rem) 0;border-bottom:1px solid var(--linha);position:relative;
       transition:color .4s var(--curva)}
.prova::before{content:"";position:absolute;inset:0 -1.5rem;background:var(--relva);z-index:-1;
               transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--curva-f)}
.prova.tocada{color:var(--papel)}
.prova.tocada::before{transform:scaleY(1);transform-origin:top}
.prova.tocada .prova__l,.prova.tocada .prova__q small,.prova.tocada .prova__data{
  color:color-mix(in srgb,var(--papel) 80%,transparent)}
.prova.tocada .selo{border-color:color-mix(in srgb,var(--papel) 55%,transparent);color:var(--papel)}
.prova.tocada .pos{background:color-mix(in srgb,var(--papel) 16%,transparent);
                   border-color:color-mix(in srgb,var(--papel) 45%,transparent);color:var(--papel)}
.prova.tocada .marcador{border-color:color-mix(in srgb,var(--papel) 40%,transparent);color:var(--papel)}

/* a posição, em caixa: 1 lê-se de longe, e o ouro só entra numa vitória */
.pos{display:grid;place-items:center;min-width:clamp(3.1rem,5.2vw,4rem);
     aspect-ratio:1;border:1px solid var(--linha-forte);border-radius:14px;
     font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 40;
     font-size:clamp(1.25rem,2.4vw,1.8rem);line-height:1;font-variant-numeric:tabular-nums;
     color:var(--tinta);background:var(--papel);flex:none;
     transition:background-color .4s var(--curva),border-color .4s var(--curva),color .4s var(--curva)}
.sec--fundo .pos{background:var(--superficie)}
.pos sup{font-size:.46em;vertical-align:super;letter-spacing:0;margin-left:.02em}
.pos--1{background:var(--relva);border-color:var(--relva);color:var(--papel)}
.pos--2{border-color:var(--linha-forte);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--relva) 22%,transparent)}
.pos--3{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ouro) 30%,transparent)}
.pos--sem{font-family:var(--corpo);font-size:.62rem;font-weight:800;letter-spacing:.1em;
          text-transform:uppercase;color:var(--tinta-fraca);border-style:dashed}

.prova__q{min-width:0;display:flex;flex-direction:column;gap:.28rem}
.prova__t{margin:0;font-size:clamp(1rem,1.45vw,1.2rem);font-weight:700;line-height:1.28}
.prova__l{margin:0;font-size:.82rem;color:var(--tinta-fraca);transition:color .4s var(--curva)}
.prova__l b{font-weight:600;color:inherit}
.prova__data{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em;
             color:var(--relva);transition:color .4s var(--curva)}
.prova__a{display:flex;align-items:center;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}
.prova__f{margin:.5rem 0 0;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em}
.prova__f a{color:var(--relva);border-bottom:1px solid transparent;transition:border-color .3s var(--curva)}
.prova__f a:hover{border-bottom-color:var(--relva)}
.prova.tocada .prova__f a{color:color-mix(in srgb,var(--papel) 88%,transparent)}

/* marcador: as voltas e o total, em fila, com o par a fechar */
.marcador{display:inline-flex;align-items:stretch;border:1px solid var(--linha);border-radius:10px;
          overflow:hidden;font-variant-numeric:tabular-nums;transition:border-color .4s var(--curva)}
.marcador i{font-style:normal;padding:.34rem .5rem;font-size:.78rem;font-weight:600;
            border-right:1px solid var(--linha);color:var(--tinta-fraca)}
.marcador b{padding:.34rem .6rem;font-size:.82rem;font-weight:800}
.marcador .par{padding:.34rem .55rem;font-size:.72rem;font-weight:800;letter-spacing:.02em;
               border-left:1px solid var(--linha);display:grid;place-items:center}
.par--sob{color:var(--relva-viva)}      /* abaixo do par */
.par--par{color:var(--tinta-fraca)}
.par--acima{color:var(--tinta-fraca)}
.prova.tocada .marcador i,.prova.tocada .marcador .par{border-color:color-mix(in srgb,var(--papel) 30%,transparent)}

.selo{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;
      padding:.32rem .58rem;border:1px solid currentColor;border-radius:999px;white-space:nowrap;
      color:var(--tinta-fraca);transition:color .4s var(--curva),border-color .4s var(--curva)}
.selo--wagr{color:var(--brasa)}
.selo--titulo{color:var(--ouro)}
.selo--selecao{color:var(--relva)}

@media (max-width:820px){
  .prova{grid-template-columns:auto minmax(0,1fr)}
  .prova__a{grid-column:1/-1;justify-content:flex-start}
  .prova::before{inset:0 -1rem}
}

/* filtros */
.filtros{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.filtro{display:inline-flex;align-items:center;gap:.45rem;font-family:inherit;
        font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
        color:var(--tinta-fraca);background:none;border:1px solid var(--linha);border-radius:999px;
        padding:.5rem 1rem;cursor:pointer;
        transition:color .3s var(--curva),border-color .3s var(--curva),background-color .3s var(--curva)}
.filtro:hover{color:var(--tinta);border-color:var(--linha-forte)}
.filtro--on{background:var(--relva);border-color:var(--relva);color:var(--papel)}
.filtro__n{font-variant-numeric:tabular-nums;opacity:.7;font-weight:600}

/* épocas */
.epoca{margin-top:clamp(2.6rem,6vw,4.6rem)}
.epoca:first-child{margin-top:0}
.epoca__cab{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
            padding-bottom:.9rem;border-bottom:2px solid var(--linha-forte)}
.epoca__ano{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 100;
            font-size:clamp(2.4rem,6vw,4.4rem);line-height:.9;letter-spacing:-.03em;margin:0;
            font-variant-numeric:tabular-nums}
.epoca__r{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
          color:var(--tinta-fraca);margin:0}
.epoca__r b{color:var(--relva)}

/* ── palmarès ───────────────────────────────────────────── */
.palm{display:grid;gap:1px}
@media (min-width:760px){.palm{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.palm{grid-template-columns:repeat(3,1fr)}}
.tit{background:var(--papel);padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.8rem;
     position:relative;overflow:hidden;box-shadow:0 0 0 1px var(--linha);
     transition:background-color .45s var(--curva)}
.sec--fundo .tit{background:var(--superficie)}
.tit:hover{background:var(--relva-clara)}
.tit__ano{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 90;
          font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:.9;letter-spacing:-.03em;
          font-variant-numeric:tabular-nums;color:var(--relva)}
.tit__t{margin:0;font-size:1.06rem;font-weight:700;line-height:1.32}
.tit__s{margin:0;font-size:.82rem;color:var(--tinta-fraca)}
.tit__b{position:absolute;top:clamp(1.3rem,3vw,2rem);right:clamp(1.3rem,3vw,2rem);
        width:1.5rem;height:1.5rem;color:var(--ouro);opacity:.85}

/* ── percurso / linha do tempo ──────────────────────────── */
.sobre{display:grid;gap:clamp(2rem,5vw,5rem)}
@media (min-width:900px){.sobre{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}}
.sobre__q{display:flex;flex-direction:column;gap:1.3rem}
.bio > p{margin:0}
.bio__linha{font-family:var(--display);font-weight:300;font-style:italic;
            font-size:clamp(1.28rem,2.4vw,1.8rem);line-height:1.32;
            font-variation-settings:'opsz' 40;color:var(--tinta);max-width:34ch}

.factos{margin:1rem 0 0;display:grid}
.factos > div{display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;gap:.4rem 1.4rem;
              padding:.85rem 0;border-top:1px solid var(--linha)}
.factos > div:last-child{border-bottom:1px solid var(--linha)}
.factos dt{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--relva)}
.factos dd{margin:0;font-size:.92rem}
@media (max-width:520px){.factos > div{grid-template-columns:1fr}}

.linha-t{list-style:none;margin:0;padding:0;position:relative}
.linha-t::before{content:"";position:absolute;left:.42rem;top:.6rem;bottom:.6rem;width:1px;background:var(--linha)}
.linha-t li{position:relative;padding:0 0 clamp(1.5rem,3vw,2.2rem) clamp(2rem,3.5vw,2.6rem)}
.linha-t li::before{content:"";position:absolute;left:0;top:.42rem;width:.85rem;height:.85rem;
                    border-radius:50%;border:2px solid var(--relva);background:var(--papel)}
.linha-t li:last-child{padding-bottom:0}
.linha-t li[data-marco="1"]::before{background:var(--relva)}
.linha-t__a{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em;
            color:var(--relva);margin-bottom:.32rem;font-variant-numeric:tabular-nums}
.linha-t__t{margin:0 0 .3rem;font-size:1.02rem;font-weight:700;line-height:1.34}
.linha-t__x{margin:0;font-size:.87rem;color:var(--tinta-fraca);max-width:56ch}

/* ── imprensa ───────────────────────────────────────────── */
.citacoes{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem)}
.cit{margin:0;border-left:2px solid var(--relva);padding-left:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.cit__t{font-family:var(--display);font-style:italic;font-weight:300;
        font-size:clamp(1.2rem,2.3vw,1.85rem);line-height:1.32;margin:0;color:var(--tinta);
        font-variation-settings:'opsz' 36}
.cit__f{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em;color:var(--relva)}

.dizem{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.dizem{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.saiu__l{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.saiu__l li{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;
            color:var(--tinta-fraca);border:1px solid var(--linha);border-radius:999px;padding:.42rem .85rem}

.pecas{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--linha)}
.peca{border-bottom:1px solid var(--linha)}
.peca a{display:grid;grid-template-columns:4.5rem minmax(7rem,auto) minmax(0,1fr) auto;gap:.3rem 1.1rem;
        align-items:center;padding:.7rem .2rem;transition:padding-left .3s var(--curva),color .3s var(--curva)}
/* A imagem de abertura de cada notícia, em pequeno. Numa lista de quarenta
   linhas é o que faz distinguir uma peça de outra sem ler o título todo. */
.peca__f{width:4.5rem;aspect-ratio:3/2;border-radius:7px;overflow:hidden;
         background:var(--superficie);box-shadow:0 0 0 1px var(--linha)}
.peca__f img{width:100%;height:100%;object-fit:cover;
             transition:transform .6s var(--curva)}
.peca a:hover .peca__f img{transform:scale(1.07)}
.peca a:hover{padding-left:.8rem;color:var(--relva)}
.peca__o{display:inline-flex;align-items:center;gap:.45rem;font-size:.65rem;font-weight:800;
         text-transform:uppercase;letter-spacing:.16em;color:var(--relva)}
.peca__o img{width:1.15rem;height:1.15rem;border-radius:50%;object-fit:contain;
             background:#FFF;padding:1px;flex:none}
.peca__t{font-size:.9rem;min-width:0;line-height:1.4}
/* A seta de «abre fora» vai dentro da célula da data. Como item solto da
   grelha, caía para uma linha só dela por baixo de tudo. */
.peca__a{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
         font-size:.72rem;color:var(--tinta-fraca);font-variant-numeric:tabular-nums}
.peca__s{font-style:normal;opacity:.6;transition:transform .3s var(--curva),opacity .3s var(--curva)}
.peca a:hover .peca__s{opacity:1;transform:translate(.15rem,-.15rem)}
@media (max-width:640px){
  /* No telemóvel a miniatura fica à esquerda, e o resto empilha ao lado. */
  .peca a{grid-template-columns:3.6rem minmax(0,1fr) auto;gap:.25rem .8rem;align-items:center}
  .peca__f{width:3.6rem}
  .peca__f{grid-row:1/3}
  .peca__t{grid-column:2/-1}
  .peca__o{grid-column:2}
}

.kit{display:grid;gap:clamp(1.5rem,4vw,4rem)}
@media (min-width:800px){.kit{grid-template-columns:1fr 1fr}}
.kit__l{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.kit__l li{padding:.85rem 0;border-bottom:1px solid var(--linha);font-size:.95rem;
           display:flex;gap:.8rem;align-items:baseline}
.kit__l li::before{content:"◇";color:var(--relva);font-size:.7rem;flex:none}

/* ── cartões de ranking ─────────────────────────────────── */
/* Os dois vivem numa caixa escura em qualquer dos temas: são fichas de outras
   entidades, e a diferença de fundo diz, sem legenda nenhuma, que aqueles
   números não foram calculados aqui. Muda só o acento entre um e outro. */
.rks{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
@media (min-width:900px){.rks{grid-template-columns:repeat(2,1fr)}}

.rk{--rk-tinta:#EAF3EC;--rk-fundo:#0C1D17;--rk-acento:#6FD9A4;
    --rk-linha:color-mix(in srgb,var(--rk-acento) 26%,transparent);
    background:var(--rk-fundo);color:var(--rk-tinta);border:1px solid var(--rk-linha);
    border-radius:20px;padding:clamp(1.4rem,3vw,2.1rem);
    display:flex;flex-direction:column;gap:clamp(1.1rem,2.2vw,1.5rem);
    position:relative;overflow:hidden}
.rk--europeu{--rk-acento:#E9C46A;--rk-fundo:#14180E}
.rk::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--rk-acento) 14%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--rk-acento) 14%,transparent) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 85% 0%,#000 10%,transparent 70%);
          mask-image:radial-gradient(120% 90% at 85% 0%,#000 10%,transparent 70%)}
.rk > *{position:relative;z-index:1}
.rk--vazio{display:grid;place-items:center;min-height:12rem;text-align:center}
.rk--vazio p{margin:0;font-size:.9rem;color:color-mix(in srgb,var(--rk-tinta) 66%,transparent)}

.rk__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:0}
.rk__id{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.rk__rot{margin:0;font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 34;
         font-size:clamp(1.02rem,1.9vw,1.3rem);line-height:1.16;letter-spacing:-.015em}
.rk__sub{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.02em;
         color:color-mix(in srgb,var(--rk-tinta) 62%,transparent)}
.rk__estado{flex:none;font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
            padding:.3rem .6rem;border-radius:999px;white-space:nowrap;
            border:1px solid var(--rk-linha);color:color-mix(in srgb,var(--rk-tinta) 70%,transparent)}
.rk__estado--vivo{color:var(--rk-acento);border-color:color-mix(in srgb,var(--rk-acento) 55%,transparent)}
.rk__estado--vivo::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--rk-acento);margin-right:.42rem;vertical-align:.06em;animation:pulsa 2.6s infinite}

.rk__grande{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.2rem;
            padding-block:clamp(.3rem,1.2vw,.8rem);border-block:1px solid var(--rk-linha)}
.rk__pos{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 120;
         font-size:clamp(3rem,7.5vw,5rem);line-height:.92;letter-spacing:-.04em;
         font-variant-numeric:tabular-nums}
.rk__pos sup{font-size:.34em;vertical-align:super;color:var(--rk-acento)}
.rk__pr{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em;color:var(--rk-acento)}
.rk__lado{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;
          font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.rk__lado i{font-style:normal;font-size:.57rem;font-weight:800;text-transform:uppercase;
            letter-spacing:.15em;color:color-mix(in srgb,var(--rk-tinta) 58%,transparent)}

.rk__l{margin:0;display:grid;gap:.9rem clamp(.8rem,2vw,1.4rem);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,84px),1fr))}
.rk__l dt{font-size:.57rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
          color:color-mix(in srgb,var(--rk-tinta) 58%,transparent);margin-bottom:.24rem;line-height:1.3}
.rk__l dd{margin:0;font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 40;
          font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1;letter-spacing:-.02em;
          font-variant-numeric:tabular-nums}

.rk__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
        margin-top:auto;padding-top:.2rem}
.rk__pe .cap{background:var(--rk-acento);border-color:var(--rk-acento);color:#08150F;font-size:.64rem}
.rk__pe .cap::before{background:var(--rk-tinta)}
.rk__pe .cap:hover{color:#08150F}
.rk__data{font-size:.62rem;color:color-mix(in srgb,var(--rk-tinta) 55%,transparent)}

/* ── fotografias ────────────────────────────────────────── */
.foto{width:100%;height:auto;display:block;border:1px solid var(--linha);background:var(--superficie)}

/* ── galeria ────────────────────────────────────────────── */
/* Mosaico: as horizontais ocupam duas colunas, as verticais uma. Com um
   número ímpar de fotografias nunca fica um buraco no fim, porque a grelha
   preenche com o que vier a seguir. */
.galeria{display:grid;gap:clamp(.8rem,1.8vw,1.4rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.galeria{grid-template-columns:repeat(4,1fr)}}
.gal{margin:0;position:relative;overflow:hidden;background:var(--superficie);
     border:1px solid var(--linha)}
.gal--largo{grid-column:span 2}
.gal img{width:100%;height:100%;object-fit:cover;display:block;
         transition:transform .7s var(--curva),filter .5s var(--curva)}
.gal--alto img{aspect-ratio:4/5}
.gal--largo img{aspect-ratio:3/2}
.gal:hover img{transform:scale(1.03)}
/* a legenda entra por cima, sobre um véu — a fotografia não perde altura
   por causa do texto, e o crédito continua legível */
.gal__l{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.4rem .9rem .75rem;
        font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:none;
        color:#F4F7F3;line-height:1.4;
        background:linear-gradient(transparent,rgba(6,20,14,.86));
        opacity:0;transform:translateY(8px);
        transition:opacity .45s var(--curva),transform .45s var(--curva)}
.gal:hover .gal__l,.gal:focus-within .gal__l{opacity:1;transform:none}
.gal__a{display:block;font-size:.6rem;font-weight:800;letter-spacing:.18em;
        color:var(--relva-viva);margin-bottom:.15rem}
/* no telemóvel não há hover: a legenda fica sempre à vista */
@media (hover:none),(pointer:coarse){.gal__l{opacity:1;transform:none}}
/* o crédito da imagem, posto pelo creditos.js, vive por baixo do véu */
.gal .credito-i{display:block;font-weight:600;opacity:.72;margin-top:.2rem}

/* ── vídeos ─────────────────────────────────────────────── */
.videos{display:grid;gap:clamp(1.2rem,3vw,2.4rem)}
@media (min-width:760px){.videos{grid-template-columns:repeat(2,1fr)}}
.vid{margin:0;display:flex;flex-direction:column;gap:.9rem}
.vid__bt{width:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
/* O botão de leitura fica no canto, e não ao centro: ao centro caía em cima
   da cara de quem está no vídeo. */
.vid__capa{position:relative;display:grid;place-items:center;aspect-ratio:16/9;
           padding:clamp(.9rem,2vw,1.3rem);
           border-radius:14px;background:var(--superficie);overflow:hidden;
           box-shadow:0 0 0 1px var(--linha);
           transition:box-shadow .45s var(--curva),transform .45s var(--curva)}
.vid__capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
               transition:transform .8s var(--curva)}
/* Escurece a capa o suficiente para o botão de leitura e o ano se lerem em
   cima de qualquer fotografia. */
.vid__capa::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(9,20,17,.42),rgba(9,20,17,.12) 45%,rgba(9,20,17,.34))}
.vid__bt:hover .vid__capa{transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--relva),0 18px 38px -22px rgba(18,40,30,.55)}
.vid__bt:hover .vid__capa img{transform:scale(1.04)}
.vid__ano{position:absolute;top:.85rem;left:1rem;z-index:1;font-size:.66rem;font-weight:800;
          letter-spacing:.18em;color:#FFF;opacity:.92;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vid__play{position:relative;z-index:1;display:grid;place-items:center;width:3.4rem;height:3.4rem;
           border-radius:50%;background:var(--relva);color:#FFF;
           box-shadow:0 6px 20px -6px rgba(0,0,0,.45);
           transition:transform .4s var(--curva)}
.vid__play .ic{width:1.25rem;height:1.25rem;margin-left:.12rem}
.vid__bt:hover .vid__play{transform:scale(1.12)}
.vid__cx{position:relative;aspect-ratio:16/9;border:1px solid var(--linha);overflow:hidden;background:#000}
.vid__cx iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* o .vid__q é um <figcaption>, e a regra geral dos créditos põe maiúsculas e
   corpo pequeno em todos eles — aqui é texto a sério, e tem de sair de lá */
.vid__q{display:flex;flex-direction:column;gap:.35rem;margin:0;
        text-transform:none;letter-spacing:normal;font-weight:400;
        font-size:1rem;color:var(--tinta)}
.vid__t{margin:0;font-size:1.02rem;font-weight:700;line-height:1.3}
.vid__x{margin:0;font-size:.86rem;color:var(--tinta-fraca);max-width:52ch}
.vid__c{margin:0;font-size:.63rem;font-weight:800;text-transform:uppercase;
        letter-spacing:.16em;color:var(--relva)}

/* ── parede de apoios ───────────────────────────────────── */
.apoios{display:flex;flex-direction:column;gap:clamp(2.2rem,5vw,3.6rem)}
.apoios__cab{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem}
.apoios__x{margin:0;font-size:.86rem;color:var(--tinta-fraca);max-width:56ch}
.apoios__l{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr))}
.apoios__g--destaque .apoios__l{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.apoios__g--destaque .apoio__cx{width:min(100%,250px);height:6.2rem}
.apoios__g--destaque .apoio__n{font-size:1.25rem}
.apoio{background:var(--papel);box-shadow:0 0 0 1px var(--linha);
       padding:clamp(1.2rem,2.4vw,1.7rem);display:flex;flex-direction:column;
       align-items:center;gap:.9rem;text-align:center;
       transition:background-color .4s var(--curva)}
.sec--fundo .apoio{background:var(--superficie)}
.apoio:hover{background:var(--relva-clara)}
/* O logótipo vive numa placa branca com altura fixa: quase todos são
   desenhados para fundo claro e ficariam invisíveis no tema escuro. */
/* Flex e não grelha: numa grelha de linha automática o `max-height:100%` da
   imagem resolve contra uma altura que ainda não existe, e o navegador
   ignora-o — o logótipo saía com o tamanho original. Com flex e uma altura
   definida na caixa, a percentagem tem contra o que medir. */
.apoio__cx{display:flex;align-items:center;justify-content:center;
           width:min(100%,190px);height:5rem;background:#FFF;
           border:1px solid var(--linha);border-radius:10px;padding:.65rem;
           transition:box-shadow .4s var(--curva)}
.apoio__cx--escuro{background:#16202B;border-color:#16202B}
.apoio__cx img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.apoio:hover .apoio__cx{box-shadow:0 8px 22px -12px rgba(18,40,30,.45)}
.apoio__n{font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 24;
          font-size:1.02rem;line-height:1.2;color:#12281E;letter-spacing:-.01em}
.apoio__x{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
          color:var(--tinta-fraca)}

/* ── ligações oficiais ──────────────────────────────────── */
.plats{display:grid;gap:.5rem}
.plat{display:flex;align-items:center;gap:.95rem;padding:1rem 1.15rem;
      border:1px solid var(--linha);border-radius:14px;background:var(--papel);
      transition:transform .4s var(--curva),border-color .4s var(--curva)}
.sec--fundo .plat{background:var(--superficie)}
.plat:hover{transform:translateX(6px);border-color:var(--relva)}
.plat__i{display:grid;place-items:center;width:2.35rem;height:2.35rem;flex:none;border-radius:50%;
         border:1px solid var(--linha);color:var(--relva);
         transition:background-color .4s var(--curva),color .4s var(--curva)}
.plat:hover .plat__i{background:var(--relva);color:var(--papel)}
.plat__q{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.plat__n{font-size:.95rem;font-weight:700}
.plat__s{font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-fraca)}
.plat__a{color:var(--relva);flex:none;display:grid;place-items:center}

/* a coluna da esquerda no «Percurso»: retrato por cima, ficha por baixo */
.sobre__f{display:flex;flex-direction:column;gap:1.4rem}
@media (min-width:900px){.sobre__f{position:sticky;top:clamp(6rem,12vh,8.5rem)}}

/* ── instagram ──────────────────────────────────────────── */
.ig__g{display:grid;gap:clamp(.8rem,2vw,1.4rem)}
@media (min-width:760px){.ig__g{grid-template-columns:repeat(3,1fr)}}
.ig__c{margin:0;display:flex;flex-direction:column;gap:.5rem}
.ig__p{width:100%;min-height:460px;border:1px solid var(--linha);background:var(--papel)}
.ig__foto{position:relative;display:block;overflow:hidden;border:1px solid var(--linha)}
.ig__foto img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s var(--curva)}
.ig__foto:hover img{transform:scale(1.04)}
.ig__cap{position:absolute;left:0;right:0;bottom:0;padding:2.2rem .85rem .7rem;
         font-size:.72rem;line-height:1.4;color:#F4F7F3;
         background:linear-gradient(transparent,rgba(6,20,14,.86));
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig__l{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--tinta-fraca)}
.ig__convite{margin-top:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;
             align-items:flex-start;gap:.8rem}
.ig__arroba{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 40;
            font-size:clamp(1.4rem,3vw,2.1rem);margin:0;letter-spacing:-.02em}

/* ── cartão de perfil do Instagram ──────────────────────── */
.igp{background:var(--papel);border:1px solid var(--linha-forte);border-radius:20px;
     padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;
     gap:clamp(1rem,2vw,1.3rem);align-self:start;position:relative;overflow:hidden}
.sec--fundo .igp{background:var(--superficie)}
/* o fio de cor da marca, no topo, sem lhe copiar o logótipo */
.igp::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#F9CE34,#EE2A7B 48%,#6228D7)}
.igp__cab{display:flex;align-items:center;gap:1rem}
.igp__f{width:clamp(56px,8vw,72px);height:clamp(56px,8vw,72px);border-radius:50%;flex:none;
        object-fit:cover;object-position:50% 32%;border:2px solid var(--linha-forte)}
.igp__id{display:flex;flex-direction:column;gap:.1rem;min-width:0}
/* O arroba não parte: «@francisca_salgado_» deixava o underscore final
   sozinho na linha de baixo, a parecer um traço perdido. Encolhe em vez de
   partir, que numa coluna estreita é o mal menor. */
.igp__a{margin:0;font-size:clamp(.82rem,1.5vw,1rem);font-weight:800;
        letter-spacing:-.015em;white-space:nowrap}
.igp__n{margin:0;font-size:.84rem;color:var(--tinta-fraca)}
.igp__c{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
        padding-block:clamp(.7rem,1.6vw,1rem);border-block:1px solid var(--linha);text-align:center}
.igp__c dd{margin:0;font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 40;
           font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1;letter-spacing:-.02em;
           font-variant-numeric:tabular-nums}
.igp__c dt{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em;
           color:var(--tinta-fraca);margin-top:.3rem}
.igp__b{margin:0;font-size:.9rem;line-height:1.55;color:var(--tinta-fraca)}
.igp__bt{align-self:flex-start}
.igp__vivo{position:absolute;top:1.1rem;right:1.1rem;font-size:.56rem;font-weight:800;
           text-transform:uppercase;letter-spacing:.14em;color:var(--relva)}

/* Uma fila só: o cartão de perfil e as publicações lado a lado, como itens
   iguais da mesma grelha. Os embeds do Instagram são muito mais altos do que
   o cartão, e em duas colunas sobrava branco por baixo dele. O
   `display:contents` desmancha os invólucros e deixa as publicações caírem
   directamente na grelha de cima, sem mudar o que o JavaScript escreve. */
.ig{display:grid;gap:clamp(1.2rem,2.6vw,1.8rem);align-items:start;grid-template-columns:1fr}
@media (min-width:900px){.ig{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:560px) and (max-width:899px){.ig{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ig__pubs{min-width:0;display:contents}
.ig__pubs .ig__g{display:contents}

/* ── reels de parceria ──────────────────────────────────── */
/* Carril em vez de grelha: os reels são verticais e são cinco — numa grelha
   sobrava sempre um sozinho na última fila. Assim deslizam, que é como se
   veem no telemóvel, e a fila fica sempre cheia. */
.reels{position:relative}
.reels__c{display:flex;gap:clamp(1rem,2.4vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;
          scrollbar-width:none;padding-block:.4rem 1rem;
          margin-inline:calc(-1 * clamp(1rem,3vw,2rem));
          padding-inline:clamp(1rem,3vw,2rem)}
.reels__c::-webkit-scrollbar{display:none}
.reel{margin:0;display:flex;flex-direction:column;gap:.85rem;
      flex:0 0 clamp(238px,24vw,286px);scroll-snap-align:start}

/* O rácio é o do reel mais a barra do Instagram por cima. Fixá-lo em vez de
   pôr uma altura em pixels mantém os cinco cartões alinhados em qualquer
   largura, que é o que faltava para isto parecer uma fila e não um monte. */
.reel__f{position:relative;aspect-ratio:9/18.5;border-radius:16px;overflow:hidden;
         background:var(--superficie);box-shadow:0 0 0 1px var(--linha);
         transition:box-shadow .45s var(--curva),transform .45s var(--curva)}
.reel:hover .reel__f{transform:translateY(-3px);box-shadow:0 0 0 1px var(--linha-forte),0 16px 34px -20px rgba(18,40,30,.5)}
.reel__f iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
/* Por baixo do iframe. Só se vê se o Instagram não desenhar. */
.reel__fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          padding:1.2rem;text-align:center;font-size:.66rem;font-weight:800;
          text-transform:uppercase;letter-spacing:.15em;color:var(--tinta-fraca)}
.reel__l{margin:0;display:flex;flex-direction:column;gap:.15rem;
         text-transform:none;letter-spacing:normal;font-weight:400;color:var(--tinta)}
.reel__m{font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 24;
         font-size:1.04rem;line-height:1.25;letter-spacing:-.01em;color:var(--tinta);
         border:0;transition:color .35s var(--curva)}
.reel:hover .reel__m{color:var(--relva)}
.reel__x{font-size:.66rem;font-weight:800;text-transform:uppercase;
         letter-spacing:.14em;color:var(--tinta-fraca)}

/* setas do carril */
.reels__n{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.4rem}
.reels__b{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
          border:1px solid var(--linha-forte);background:transparent;cursor:pointer;
          color:var(--tinta);transition:background-color .35s var(--curva),
          color .35s var(--curva),opacity .35s var(--curva)}
.reels__b:hover:not(:disabled){background:var(--relva);border-color:var(--relva);color:#FFF}
.reels__b:disabled{opacity:.28;cursor:default}
.reels__b .ic{width:1rem;height:1rem}
.reels__b[data-ir="-1"] .ic{transform:rotate(180deg)}
@media (max-width:640px){.reels__n{display:none}}

/* ── apoiar: abertura ───────────────────────────────────── */
/* A página abre com a fotografia ao lado do argumento, e não com um título
   sozinho: quem chega aqui está a decidir se investe, e a primeira coisa que
   tem de ver é a atleta. */
.apoio-abre{padding:clamp(6.5rem,13vh,9.5rem) 0 clamp(2rem,5vw,4rem);border-bottom:1px solid var(--linha)}
.apoio-abre__in{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
@media (min-width:860px){.apoio-abre__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.apoio-abre__q{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;min-width:0}
.apoio-abre__q .topo-p__t,.apoio-abre__q .topo-p__bt{margin-top:0}
.apoio-abre__f{margin:0;max-width:440px;justify-self:center}
.apoio-abre__f img{width:100%;height:auto;display:block;border:1px solid var(--linha);
                   background:var(--superficie)}

/* ── perguntas frequentes ───────────────────────────────── */
/* Uma lista de definições, que é o que isto é: pergunta e resposta. Sem
   acordeão — o que está escondido atrás de um clique não é lido por quem
   passa os olhos nem, muitas vezes, por quem indexa. */
.fq{display:grid;gap:1px;margin:0}
.fq__i{background:var(--papel);box-shadow:0 0 0 1px var(--linha);
       padding:clamp(1.3rem,2.6vw,1.9rem);display:grid;gap:.6rem;align-content:start}
@media (min-width:820px){
  .fq{grid-template-columns:repeat(2,1fr)}
  .fq__i{grid-template-columns:minmax(0,1fr);gap:.7rem}
}
.sec--fundo .fq__i{background:var(--superficie)}
.fq__i dt{font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 28;
          font-size:clamp(1.06rem,1.7vw,1.22rem);line-height:1.25;letter-spacing:-.012em;
          color:var(--tinta)}
.fq__i dd{margin:0;font-size:.9rem;line-height:1.6;color:var(--tinta-fraca);max-width:56ch}

/* Citação sozinha, entre secções. Uma frase escrita por outra pessoa vale
   mais nesta página do que qualquer adjetivo nosso — por isso ocupa a
   largura toda e não leva mais nada à volta. */
.cita{margin:0;display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.cita__t{margin:0;max-width:26ch;font-family:var(--display);font-weight:300;font-style:italic;
         font-variation-settings:'opsz' 96;font-size:clamp(1.6rem,4.2vw,3rem);
         line-height:1.15;letter-spacing:-.02em;color:var(--tinta);
         padding-block:.1em;margin-block:-.1em}
.cita__t::before{content:"“"}
.cita__t::after{content:"”"}
.cita__f{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em}
.cita__f a{color:var(--relva);transition:opacity .35s var(--curva)}
.cita__f a:hover{opacity:.65}

/* ── apoiar / patrocínios ───────────────────────────────── */
/* o formulário à esquerda, as ligações à direita */
.contacto{display:grid;gap:clamp(2rem,5vw,5rem)}
@media (min-width:900px){.contacto{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
/* Três cartões a par, e não três barras empilhadas. Empilhadas liam-se como
   degraus de preço por ordem crescente, que é o contrário do que são: são
   três maneiras diferentes de entrar, e nenhuma é maior do que a outra. */
.escadas{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr))}
.degrau{position:relative;overflow:hidden;background:var(--papel);
        padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column;
        align-items:flex-start;gap:.55rem;box-shadow:0 0 0 1px var(--linha);
        transition:background-color .45s var(--curva)}
.sec--fundo .degrau{background:var(--superficie)}
.degrau:hover{background:var(--relva-clara)}
/* O numeral fica atrás do texto, grande e quase apagado: dá ordem de leitura
   aos três cartões sem gastar uma linha a dizer «1, 2, 3». */
.degrau__i{position:absolute;top:-.12em;right:.1em;font-family:var(--display);
           font-weight:300;font-variation-settings:'opsz' 144;font-size:7rem;
           line-height:1;color:var(--relva);opacity:.07;pointer-events:none;user-select:none}
.degrau__e{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--relva)}
.degrau__n{margin:0;font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 32;
           font-size:clamp(1.28rem,2.2vw,1.55rem);line-height:1.15;letter-spacing:-.015em}
.degrau__x{margin:0;font-size:.88rem;line-height:1.55;color:var(--tinta-fraca);max-width:42ch}
.degrau__u{list-style:none;margin:.55rem 0 0;padding:0;display:flex;flex-direction:column;gap:.42rem;
           border-top:1px solid var(--linha);padding-top:.9rem;width:100%}
.degrau__u li{position:relative;padding-left:1.15rem;font-size:.82rem;line-height:1.45;color:var(--tinta)}
.degrau__u li::before{content:"";position:absolute;left:0;top:.52em;width:.42rem;height:.42rem;
                      border-radius:50%;background:var(--relva);opacity:.5}
.degrau__b{margin-top:auto;padding-top:1.1rem;font-size:.68rem;font-weight:800;
           text-transform:uppercase;letter-spacing:.14em;color:var(--relva);
           display:inline-flex;align-items:center;gap:.4rem}
.degrau__b::after{content:"→";transition:transform .35s var(--curva)}
.degrau:hover .degrau__b::after{transform:translateX(.28rem)}

/* ── formulário ─────────────────────────────────────────── */
.form{display:grid;gap:1rem}
.dupla{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.dupla{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-fraca)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:.95rem;color:var(--tinta);background:transparent;border:0;
  border-bottom:1px solid var(--linha);padding:.6rem 0;border-radius:0;width:100%;
  transition:border-color .35s var(--curva)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--relva)}
.campo textarea{min-height:120px;resize:vertical}
.campo input:user-invalid,.campo textarea:user-invalid{border-bottom-color:var(--brasa)}
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__pe{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.6rem}
.form__msg{margin:0;font-size:.82rem;color:var(--tinta-fraca)}
.form__msg.erro{color:var(--brasa)}
.form__nota{margin:.4rem 0 0;font-size:.76rem;color:var(--tinta-fraca)}
.form__nota a{color:var(--relva);border-bottom:1px solid var(--linha)}

/* ── créditos de imagem ─────────────────────────────────── */
.credito,figcaption{margin:.55rem 0 0;font-size:.63rem;font-weight:700;text-transform:uppercase;
                    letter-spacing:.14em;color:var(--tinta-fraca)}

/* ── rodapé ─────────────────────────────────────────────── */
.pe{padding:clamp(3rem,7vw,6rem) 0 2rem;border-top:1px solid var(--linha);overflow:hidden}
.pe__nome{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 144;
          font-size:clamp(2.6rem,13vw,12rem);line-height:.84;letter-spacing:-.045em;
          color:var(--tinta);opacity:.12;margin:0 0 clamp(2rem,5vw,4rem);white-space:nowrap}
.pe__g{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.pe__l{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pe__l a{font-size:.88rem;color:var(--tinta-fraca);transition:color .3s var(--curva);
         display:inline-flex;align-items:center;gap:.5rem}
.pe__l a:hover{color:var(--relva)}
.ic{width:1.15rem;height:1.15rem;fill:currentColor;display:block}
.ic--pe{width:.95rem;height:.95rem;flex:none}
.pe__f{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--linha);
       display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
       font-size:.72rem;color:var(--tinta-fraca)}
.pe__legal{display:flex;gap:1.2rem}
.pe__ck{font-size:inherit;color:inherit;padding:0;border-bottom:1px solid var(--linha)}

/* ── cookies ────────────────────────────────────────────── */
.ck{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:180;max-width:36rem;
    background:var(--papel);border:1px solid var(--linha-forte);border-radius:16px;
    padding:1.3rem 1.4rem;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:.9rem}
.ck[hidden]{display:none}
.ck__t{margin:0;font-size:.88rem;color:var(--tinta-fraca)}
.ck__t a{color:var(--relva);border-bottom:1px solid var(--linha)}
.ck__b{display:flex;flex-wrap:wrap;gap:.6rem}

/* ── páginas interiores ─────────────────────────────────── */
.topo-p{padding:clamp(6.5rem,13vh,9.5rem) 0 clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--linha)}
.topo-p .d--l{margin:1.2rem 0 0}
.topo-p__t{margin-top:1.4rem;max-width:54ch}
.topo-p__bt{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* ── menos movimento ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
  .nome__l,.ani > .ani__l{transform:none !important;opacity:1 !important}
  .sobe-i{opacity:1 !important;transform:none !important}
  .grao{animation:none}
}

/* ── convite para a outra língua ────────────────────────── */
/* Aparece a quem chega com o browser em inglês numa página portuguesa. Não
   reencaminha — oferece. Fecha-se uma vez e não volta. Fica em baixo à
   esquerda, do lado oposto ao banner dos cookies, para os dois não se
   taparem: o dos cookies fica à esquerda, este à direita, e num ecrã estreito
   este só nasce quando o outro já saiu. */
.convite-l{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
           display:flex;align-items:center;gap:.9rem;max-width:min(92vw,34rem);
           padding:.85rem 1rem .85rem 1.2rem;background:var(--papel);
           border:1px solid var(--linha);border-radius:16px;
           box-shadow:0 18px 40px -24px rgba(18,40,30,.55);
           animation:convite-entra .5s var(--curva) both}
@keyframes convite-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.convite-l p{margin:0;font-size:.86rem;line-height:1.4;color:var(--tinta)}
.convite-l .cap{flex:0 0 auto;white-space:nowrap}
.convite-l__x{flex:0 0 auto;width:1.7rem;height:1.7rem;display:grid;place-items:center;
              border:0;background:transparent;cursor:pointer;font-size:1.15rem;line-height:1;
              color:var(--tinta-fraca);border-radius:50%}
.convite-l__x:hover{background:var(--relva-clara);color:var(--tinta)}
@media (max-width:560px){
  .convite-l{flex-wrap:wrap;left:clamp(1rem,3vw,2rem)}
  .convite-l p{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.convite-l{animation:none}}

/* ── manifesto da página inicial ────────────────────────── */
/* A frase que diz quem ela é, em tamanho de cartaz. Substituiu uma secção
   inteira com retrato e três parágrafos — que era o segundo retrato da página
   e repetia o título da página do percurso. */
.manif{margin:1.2rem 0 clamp(2.4rem,5vw,3.6rem);max-width:20ch;
       font-family:var(--display);font-weight:300;font-variation-settings:'opsz' 144;
       font-size:clamp(2.1rem,6.2vw,4.6rem);line-height:1.04;letter-spacing:-.028em;
       color:var(--tinta);padding-block:.08em;margin-block-start:1.2rem}
@media (min-width:900px){.manif{max-width:24ch}}

/* «Saiu em» numa fila só, por baixo da citação, em vez de numa coluna ao lado */
.saiu--fila{margin-top:clamp(2.4rem,5vw,3.6rem);display:flex;flex-direction:column;
            align-items:center;gap:1rem;text-align:center}
.saiu--fila .rot{margin:0}
.saiu--fila ul{display:flex;flex-wrap:wrap;justify-content:center;
               gap:.5rem .7rem;margin:0;padding:0;list-style:none;max-width:64rem}
/* Símbolo e nome, em pastilha. A pastilha abre o sítio da casa numa janela
   nova — quem quiser confirmar que a peça existe vai lá ver. */
.saiu__l li > *{display:inline-flex;align-items:center;gap:.5rem;
                padding:.4rem .85rem .4rem .5rem;border-radius:999px;
                border:1px solid var(--linha);background:var(--papel);
                font-size:.66rem;font-weight:800;text-transform:uppercase;
                letter-spacing:.11em;color:var(--tinta-fraca);
                transition:border-color .35s var(--curva),color .35s var(--curva),
                           background-color .35s var(--curva)}
.sec--fundo .saiu__l li > *{background:var(--superficie)}
.saiu__l a:hover{border-color:var(--relva);color:var(--tinta);background:var(--relva-clara)}
.saiu__l img{width:1.35rem;height:1.35rem;border-radius:50%;object-fit:contain;
             background:#FFF;padding:1px;flex:none}

/* ── as portas para as outras páginas ───────────────────── */
/* Um índice, não uma galeria. Cada página é uma linha: número de ordem, nome
   em maiúsculas, uma frase, o número que a sustenta, uma miniatura e a seta.
   Em cartões grandes com fotografia isto lia-se como galeria de fotografias e
   ninguém percebia que eram caminhos — que é a única coisa que têm de ser. */
.portas{display:flex;flex-direction:column;border-top:1px solid var(--linha)}
.porta{position:relative;display:grid;align-items:center;gap:clamp(.9rem,2.4vw,2rem);
       grid-template-columns:auto minmax(0,1fr) auto;
       padding:clamp(1.1rem,2.4vw,1.6rem) 0;border-bottom:1px solid var(--linha);
       transition:background-color .4s var(--curva),padding-inline .4s var(--curva)}
@media (min-width:820px){
  .porta{grid-template-columns:auto minmax(0,1fr) auto 6.5rem auto}
}
/* Cada caminho tem a sua cor, e ela só aparece ao passar por cima: em repouso
   a lista lê-se como uma lista, e ao tocar cada linha diz «sou outra coisa».
   É o que distingue quatro entradas de um menu de quatro parágrafos. */
.porta{--cor:var(--relva)}
.porta:nth-child(1){--cor:#1B6B47}
.porta:nth-child(2){--cor:#A8791F}
.porta:nth-child(3){--cor:#2C5D8A}
.porta:nth-child(4){--cor:#8A3A52}
.porta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cor);
               transform:scaleY(0);transform-origin:top;transition:transform .45s var(--curva)}
.porta:hover::before{transform:scaleY(1)}
.porta:hover{background:color-mix(in srgb,var(--cor) 7%,transparent);
             padding-inline:clamp(.6rem,1.6vw,1.2rem)}
.porta__r,.porta__n b,.porta__i{color:var(--cor)}
.porta:hover .porta__i{background:var(--cor);border-color:var(--cor);color:#FFF}
.porta:hover .porta__s{background:var(--cor);border-color:var(--cor);color:#FFF;transform:translateX(.2rem)}
.porta__s{color:var(--cor)}
/* Ícone e número juntos, numa placa. Só o número não chegava para se perceber
   que aquilo era um menu — podia ser uma lista de qualquer coisa numerada. Com
   o desenho do assunto ao lado, lê-se logo o que há do outro lado. */
.porta__i{display:flex;align-items:center;gap:.55rem;flex:none;
          padding:.5rem .7rem;border-radius:12px;border:1px solid var(--linha);
          background:var(--papel);
          transition:background-color .4s var(--curva),border-color .4s var(--curva),
                     color .4s var(--curva)}
.sec--fundo .porta__i{background:var(--superficie)}
.porta__i .ic{width:1.35rem;height:1.35rem}
.porta__i b{font-family:var(--display);font-weight:300;font-variation-settings:'opsz' 40;
            font-size:1.12rem;line-height:1;opacity:.55}

.porta__q{display:flex;flex-direction:column;gap:.22rem;min-width:0}
.porta__r{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em}
.porta__t{font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 30;
          font-size:clamp(1.16rem,2.2vw,1.55rem);line-height:1.15;letter-spacing:-.018em;color:var(--tinta)}
.porta__x{font-size:.85rem;line-height:1.5;color:var(--tinta-fraca);max-width:52ch}
.porta__n{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
          color:var(--tinta-fraca);white-space:nowrap}
.porta__n b{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 30;
            font-size:1.4rem;letter-spacing:-.01em;margin-right:.3rem;vertical-align:-.08em}
.porta__f{display:none;width:6.5rem;height:4.4rem;border-radius:10px;overflow:hidden;
          background:var(--superficie);box-shadow:0 0 0 1px var(--linha)}
@media (min-width:820px){.porta__f{display:block}}
.porta__f img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
              transition:transform .7s var(--curva)}
.porta:hover .porta__f img{transform:scale(1.06)}
.porta__s{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
          border:1px solid var(--linha-forte);font-size:.95rem;flex:none;
          transition:background-color .4s var(--curva),color .4s var(--curva),
                     border-color .4s var(--curva),transform .4s var(--curva)}

@media (max-width:819px){
  .porta{grid-template-columns:auto minmax(0,1fr) auto}
  .porta__n{display:none}
}

/* ── botão flutuante de contacto ────────────────────────── */
/* Sempre à mão, em qualquer página. O contacto vivia no fim de uma página só;
   quem chegava a meio de outra tinha de o ir procurar, que é quando desiste.
   Fica no canto direito de baixo — o dos cookies fica à esquerda, e o convite
   da língua mudou-se para lá também, para os três nunca disputarem o mesmo
   canto. */
.fala{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:110;
      display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.fala__b{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.15rem;
         border-radius:999px;border:0;cursor:pointer;background:var(--relva);color:#FFF;
         font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
         box-shadow:0 12px 30px -12px rgba(18,40,30,.7);
         transition:transform .4s var(--curva),background-color .4s var(--curva)}
.fala__b:hover{transform:translateY(-2px)}
.fala__b .ic{width:1rem;height:1rem}
.fala--aberto .fala__b{background:var(--tinta)}
.fala__l{display:flex;flex-direction:column;gap:.4rem;align-items:flex-end;
         animation:fala-entra .32s var(--curva) both}
@keyframes fala-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fala__l[hidden]{display:none}
.fala__a{display:inline-flex;align-items:center;gap:.6rem;padding:.62rem .95rem;
         border-radius:999px;background:var(--papel);border:1px solid var(--linha);
         font-size:.78rem;color:var(--tinta);white-space:nowrap;
         box-shadow:0 10px 26px -16px rgba(18,40,30,.5);
         transition:border-color .35s var(--curva),background-color .35s var(--curva)}
.fala__a:hover{border-color:var(--relva);background:var(--relva-clara)}
.fala__a .ic{width:1rem;height:1rem;color:var(--relva);flex:none}
@media (max-width:520px){
  .fala__b span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .fala__b{padding:.95rem;border-radius:50%}
  .fala__b .ic{width:1.15rem;height:1.15rem}
  .fala__a span{font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){.fala__l{animation:none}}

/* O convite da língua muda-se para o canto esquerdo: o botão de contacto
   ocupa agora o direito, e o dos cookies já saiu quando este aparece. */
.convite-l{right:auto;left:clamp(1rem,3vw,2rem)}
@media (max-width:560px){.convite-l{right:clamp(1rem,3vw,2rem);bottom:5.5rem}}

/* ── a seguir (página de resultados) ────────────────────── */
.aseguir{display:flex;flex-direction:column;gap:1rem}
.aseguir__l{display:grid;gap:1px}
.prox-p{position:relative;display:grid;gap:.35rem 1.4rem;align-items:center;
        grid-template-columns:1fr;padding:clamp(1.2rem,2.6vw,1.7rem);
        background:var(--relva-clara);box-shadow:0 0 0 1px var(--linha)}
@media (min-width:760px){
  .prox-p{grid-template-columns:11rem minmax(0,1fr) auto;align-items:start}
  .prox-p .prova__f{grid-column:2/-1}
}
.prox-p__d{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--relva)}
.prox-p__q{min-width:0;display:flex;flex-direction:column;gap:.25rem}
.prox-p__t{margin:0;font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 28;
           font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.2;letter-spacing:-.015em}
.prox-p__l{margin:0;font-size:.85rem;color:var(--tinta-fraca)}
.prox-p__x{margin:.2rem 0 0;font-size:.82rem;line-height:1.5;color:var(--tinta-fraca);max-width:58ch}

/* ── âncoras dentro da página ───────────────────────────── */
/* O cabeçalho é fixo: sem isto, um link para #contacto punha o título da
   secção por baixo dele e quem carregava aterrava a meio do formulário. Num
   telemóvel, onde o cabeçalho ocupa mais do ecrã, era pior. */
[id]{scroll-margin-top:clamp(5.5rem,12vh,7.5rem)}

/* O mapa de curvas nas páginas interiores: por trás do cabeçalho de cada uma,
   fundo claro, discreto. Na inicial vive na faixa escura dos rankings. */
.topo-p{position:relative;isolation:isolate;overflow:hidden}
/* Nas páginas interiores o mapa entra pela direita e desaparece por baixo do
   título: o desenho é para se sentir, não para se ler por cima dele. */
.topo-p .sec__campo{opacity:.5;
  -webkit-mask-image:linear-gradient(102deg,transparent 4%,rgba(0,0,0,.35) 34%,#000 78%);
          mask-image:linear-gradient(102deg,transparent 4%,rgba(0,0,0,.35) 34%,#000 78%)}
.sec--fundo .sec__campo{opacity:.45;
  -webkit-mask-image:linear-gradient(102deg,transparent 6%,rgba(0,0,0,.3) 38%,#000 82%);
          mask-image:linear-gradient(102deg,transparent 6%,rgba(0,0,0,.3) 38%,#000 82%)}