/* ============================================================
   GUARDA FC — SAD · Site oficial v2
   Design system oficial: Bebas Neue + Montserrat
   #C8102E · #8C0F22 · #0D0D0D · #F5F5F5 · #B99A4A
   ============================================================ */

@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bebas-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bebas-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/montserrat-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/montserrat-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--red-texto:#ff5468;
  --red:#C8102E;
  --red-deep:#8C0F22;
  --ink:#0D0D0D;
  --paper:#F5F5F5;
  --gold:#B99A4A;
  --panel:#141414;
  --panel-2:#1c1c1c;
  --line:#2b2b2b;
  --muted:#9d9d9d;
  --maxw:1180px;
  --ruler-w:78px;
  --font-display:"Bebas Neue","Montserrat","Noto Sans Devanagari",sans-serif;
  --font-body:"Montserrat","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;
  --track-wide:.14em;
  --track-xwide:.22em;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* fundo texturizado: grão + fumo vermelho subtil */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 85% -5%,rgba(200,16,46,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 40%,rgba(140,15,34,.08),transparent 55%),
    radial-gradient(700px 500px at 60% 110%,rgba(200,16,46,.06),transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.06em;
  line-height:.98;
  margin:0;
  text-transform:uppercase;
}
:lang(hi) h1,:lang(hi) h2,:lang(hi) h3,:lang(hi) .display{letter-spacing:.02em;line-height:1.15;text-transform:none}

.wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto}

/* Atalho "saltar para o conteúdo": fora do ecrã até alguém lhe dar foco com o
   Tab. Não usa display:none nem visibility:hidden de propósito — isso tirava-o
   da ordem de tabulação e o atalho deixava de existir para quem precisa dele. */
.skip{
  position:fixed;top:0;left:-9999px;z-index:200;
  background:var(--red);color:#fff;text-decoration:none;
  padding:12px 20px;border-radius:0 0 10px 0;
  font:700 12px/1 var(--font-body);letter-spacing:var(--track-wide);text-transform:uppercase;
}
.skip:focus{left:0;outline:2px solid var(--gold);outline-offset:-2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* partículas discretas */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}

/* ---------- régua de altitude (desktop) ---------- */
.ruler{
  position:fixed;left:0;top:74px;bottom:0;width:var(--ruler-w);z-index:40;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,0));
  border-right:1px solid var(--line);
  padding:28px 0 44px;
  font-variant-numeric:tabular-nums;
}
.ruler__ticks{position:absolute;inset:34px 0 44px}
.ruler__tick{position:absolute;left:0;height:1px;background:var(--line);width:14px}
.ruler__tick--major{width:26px;background:#3a3a3a}
.ruler__tick-label{position:absolute;left:32px;transform:translateY(-50%);font-size:13px;letter-spacing:var(--track-wide);color:#9d9d9d;font-weight:600}
.ruler__marker{position:absolute;left:0;right:0;top:34px;height:calc(100% - 78px);width:var(--ruler-w);pointer-events:none}
.ruler__marker-inner{position:absolute;left:0;width:var(--ruler-w);transition:top .12s linear}
.ruler__marker-line{height:2px;background:var(--red);width:44px;box-shadow:0 0 14px rgba(200,16,46,.9)}
.ruler__marker-val{position:absolute;left:5px;top:7px;font-size:13px;font-weight:700;color:var(--red-texto);letter-spacing:.04em;background:var(--ink);padding:0px 5px;border-radius:4px;border:1px solid rgba(200,16,46,.35)}
.ruler__cap{position:absolute;left:9px;top:10px;font-size:13px;letter-spacing:var(--track-xwide);color:#9d9d9d;text-transform:uppercase;font-weight:700}

.altbar{display:none;position:fixed;top:0;left:0;right:0;height:3px;background:#000;z-index:60}
.altbar__fill{height:100%;width:0;background:linear-gradient(90deg,var(--red-deep),var(--red),var(--gold))}
.altbar__val{position:fixed;bottom:14px;right:14px;z-index:60;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold);background:rgba(0,0,0,.82);border:1px solid var(--line);padding:4px 11px;border-radius:99px;font-variant-numeric:tabular-nums;display:none}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(13,13,13,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-left:var(--ruler-w);
}
.nav{display:flex;align-items:center;gap:20px;padding:12px 0}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.brand img{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.brand b{font-family:var(--font-display);font-weight:400;font-size:16px;letter-spacing:.1em;text-transform:uppercase;display:block;line-height:1}
.brand span{font-size:13px;letter-spacing:var(--track-xwide);color:var(--gold);text-transform:uppercase;font-weight:700;font-family:var(--font-body)}
.nav a.navlink{
  text-decoration:none;font-size:13px;font-weight:700;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.nav a.navlink:hover,.nav a.navlink[aria-current="page"]{color:#fff;border-color:var(--red-texto)}

.lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:#000;flex-shrink:0}
.lang button{
  background:none;border:0;color:var(--muted);
  font:700 10.5px/1 var(--font-body);letter-spacing:.08em;
  padding:8px 10px;cursor:pointer;transition:background .15s,color .15s;
}
.lang button[aria-pressed="true"]{background:var(--red);color:#fff}
.lang button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:#fff;padding:8px 10px;cursor:pointer;font-size:16px}

main{padding-left:var(--ruler-w);position:relative;z-index:1}

/* ---------- faixa campeões (topo) ---------- */
.champstrip{
  background:linear-gradient(90deg,var(--red-deep),var(--red) 45%,var(--red-deep));
  color:#fff;text-align:center;
  font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;
  padding:8px 16px;
}
.champstrip .tro{margin-right:8px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92vh,820px);display:flex;align-items:flex-end;overflow:hidden}
.hero__img{position:absolute;inset:0}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,13,13,.78) 0%,rgba(13,13,13,.22) 38%,rgba(13,13,13,.97) 100%),
    linear-gradient(90deg,rgba(13,13,13,.85) 0%,rgba(13,13,13,0) 62%),
    radial-gradient(900px 480px at 78% 18%,rgba(200,16,46,.18),transparent 60%);
}
/* silhueta do castelo da Guarda — muito subtil */
.castle{
  position:absolute;right:-1%;bottom:0;width:min(46vw,520px);opacity:.055;pointer-events:none;
  color:#fff;
}
/* v5.3 — menos folga em baixo: o bloco de texto (e o cartão) desce e liberta
   a faixa central da foto, que é onde estão as pessoas. */
.hero__body{position:relative;padding:64px 0 40px;width:100%}
/* v5: etiqueta de campeões solta do texto, centrada e com ar à volta */
.hero__badge{
  position:absolute;top:clamp(88px,12vh,140px);left:var(--ruler-w);right:0;z-index:4;
  display:flex;justify-content:center;pointer-events:none;
}
.hero__badge>span:last-child{
  display:inline-flex;align-items:center;gap:11px;
  font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;
  color:#fff;background:linear-gradient(90deg,var(--red-deep),var(--red));
  border:1px solid rgba(255,255,255,.2);
  padding:12px 26px;border-radius:99px;
  box-shadow:0 10px 44px rgba(200,16,46,.4);
  text-align:center;
}
.hero__badge .tro{font-size:13px;color:#fff}
.hero h1{font-size:clamp(2.9rem,7.6vw,6rem);letter-spacing:.05em}
.hero h1 em{font-style:normal;color:var(--red-texto);display:block;text-shadow:0 2px 40px rgba(200,16,46,.4)}
.hero__sub{max-width:54ch;color:#f5f5f5;margin-top:20px;font-size:16px}
.hero__ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
  text-decoration:none;border-radius:99px;padding:12px 24px;
  transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;
}
.btn--red{background:var(--red);color:#fff;box-shadow:0 8px 28px rgba(200,16,46,.35)}
.btn--red:hover{background:#db1b39;transform:translateY(-1px)}
.btn--ghost{border:1px solid #3a3a3a;color:#f5f5f5;background:rgba(0,0,0,.35)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--gold{background:var(--gold);color:#151004}
.btn--gold:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* próximo jogo */
/* v5.3 — o cartão desce dentro do herói para libertar a faixa central da foto
   (é onde estão as pessoas) e pode ser fechado pelo X. */
.nextmatch{
  position:relative;margin-top:64px;max-width:600px;
  border:1px solid var(--line);border-left:3px solid var(--red);
  background:rgba(16,16,16,.9);backdrop-filter:blur(6px);
  border-radius:14px;padding:20px 46px 20px 24px;
  transition:opacity .32s ease,transform .32s cubic-bezier(.22,.61,.36,1),
             max-height .38s ease,margin .32s ease,padding .32s ease,border-width .32s ease;
  max-height:520px;overflow:hidden;transform-origin:bottom left;
}
.hero__body .nextmatch.is-fechado{
  opacity:0;transform:translateY(14px) scale(.97);
  max-height:0;margin-top:0;padding-top:0;padding-bottom:0;
  border-width:0;pointer-events:none;
}
.nextmatch__close{
  position:absolute;top:10px;right:10px;z-index:3;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(0,0,0,.5);color:#9d9d9d;
  font-size:13px;line-height:1;display:grid;place-items:center;
  transition:background .18s,color .18s,border-color .18s;
}
.nextmatch__close:hover{background:var(--red);border-color:var(--red-texto);color:#fff}
.nextmatch__close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.nmreopen{
  /* a margem de baixo levanta a pastilha acima da legenda do carrossel
     (`.hero__caption`, absoluta a 38px do fundo), senão sobrepunham-se */
  display:inline-flex;align-items:center;gap:9px;margin:20px 0 52px;cursor:pointer;
  border:1px solid var(--line);background:rgba(16,16,16,.88);backdrop-filter:blur(6px);
  color:#f5f5f5;border-radius:99px;padding:12px 20px;
  font:700 10.5px/1 var(--font-body);letter-spacing:var(--track-wide);text-transform:uppercase;
  transition:border-color .18s,color .18s,transform .18s;
}
.nmreopen:hover{border-color:var(--red-texto);color:#fff;transform:translateY(-1px)}
.nmreopen:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* `display:inline-flex` ganha ao `display:none` que o navegador dá a [hidden] —
   sem esta linha a pastilha aparecia ao lado do cartão aberto */
.nmreopen[hidden]{display:none}
.nmreopen__dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto}
.nextmatch__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:12px}
.nextmatch__label{font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;color:#fff;background:var(--red);padding:4px 10px;border-radius:99px}
.nextmatch__comp{font-size:13px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold)}
.nextmatch__tie{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
.nextmatch__x{color:var(--red-texto)}
.nextmatch__us{color:var(--gold)}
.nextmatch__meta{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.5}
.nextmatch__dot{margin:0 6px;color:#9d9d9d}
.countdown{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.cd{border:1px solid var(--line);background:#0d0d0d;border-radius:10px;padding:8px 0 8px;min-width:74px;text-align:center}
.cd b{display:block;font-family:var(--font-display);font-size:1.85rem;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:4px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.nextmatch__state{margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* ---------- secções ---------- */
section{padding:64px 0;border-top:1px solid var(--line);position:relative}
section:first-of-type{border-top:0}
.sec-head{margin-bottom:28px;max-width:72ch}
.sec-kicker{font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;color:var(--red-texto);display:block;margin-bottom:12px}
.sec-kicker::before{content:"";display:inline-block;width:26px;height:2px;background:var(--red);vertical-align:middle;margin-right:10px}
.sec-head h2{font-size:clamp(2.3rem,5vw,3.8rem)}
.sec-head p{color:var(--muted);margin:16px 0 0;max-width:64ch;font-size:16px}

/* ---------- notícia campeões ---------- */
.news{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.news__media{border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative}
.news__media img{width:100%}
.news__tag{
  position:absolute;top:16px;left:16px;
  background:var(--gold);color:#151004;
  font-size:13px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
  padding:8px 14px;border-radius:99px;
}
.news__date{font-size:13px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.news__score{
  font-family:var(--font-display);font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;
  letter-spacing:.04em;margin:8px 0 4px;
}
.news__score .win{color:var(--red-texto)}
.news__scorers{color:var(--gold);font-size:13px;font-weight:600;letter-spacing:.06em;margin-bottom:16px}
.news__body p{color:#9d9d9d;font-size:16px;margin:0 0 16px}
.news__quote{
  border-left:3px solid var(--gold);padding:4px 0 6px 18px;margin:24px 0 0;
  font-family:var(--font-display);font-size:21.6px;letter-spacing:.05em;line-height:1.25;
  text-transform:uppercase;color:#efe9da;
}
:lang(hi) .news__quote{text-transform:none}
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.newsgrid figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.newsgrid picture{display:block;aspect-ratio:3/2;overflow:hidden}
.newsgrid .tall picture{aspect-ratio:3/4}
.newsgrid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.newsgrid figure:hover img{transform:scale(1.03)}

/* ---------- 5F ---------- */
.fives{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.five{border:1px solid var(--line);border-radius:14px;padding:24px 20px;background:linear-gradient(160deg,var(--panel),#101010);position:relative;overflow:hidden}
.five::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.five b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.55rem;letter-spacing:.1em;text-transform:uppercase}
.five span{display:block;margin-top:8px;font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- faixa 1056 ---------- */
.altstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,#101010,#1a0a0d 45%,#101010);padding:64px 0;text-align:center;position:relative;overflow:hidden}
.altstrip .num{font-family:var(--font-display);font-size:clamp(5rem,18vw,12rem);letter-spacing:.02em;line-height:.85;background:linear-gradient(180deg,#fff 18%,var(--red) 118%);-webkit-background-clip:text;background-clip:text;color:transparent}
.altstrip .num .u{font-size:.22em;color:var(--gold);-webkit-text-fill-color:var(--gold);letter-spacing:.04em}
.altstrip p{color:var(--muted);letter-spacing:var(--track-xwide);text-transform:uppercase;font-size:13px;font-weight:700;margin:24px 0 0}

/* ---------- resultado supertaça (cartão) ---------- */
.result{
  border:1px solid rgba(185,154,74,.4);border-radius:16px;
  background:linear-gradient(135deg,#191408,#141414 55%);
  padding:24px 30px;margin-bottom:28px;
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;
}
.result__badge{font-size:13px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;background:var(--gold);color:#151004;padding:4px 12px;border-radius:99px}
.result__tie{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.result__tie .sc{color:var(--gold);margin:0 10px}
.result__meta{flex-basis:100%;color:var(--muted);font-size:13px}
.result__meta b{color:var(--gold);font-weight:600}

/* ---------- carrosséis ---------- */
.car-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:28px}
.car-head .sec-head{margin-bottom:0;flex:1}
.car-nav{display:flex;gap:8px;flex-shrink:0}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:#fff;cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;transition:background .15s,border-color .15s,opacity .15s}
.car-btn:hover:not(:disabled){background:var(--red);border-color:var(--red-texto)}
.car-btn:disabled{opacity:.3;cursor:default}
.car-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.car{display:grid;grid-auto-flow:column;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.car::-webkit-scrollbar{height:6px}
.car::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.car--fixtures{grid-auto-columns:minmax(228px,248px)}
.car--plantel{grid-auto-columns:minmax(212px,232px)}

/* cartão de jogo (INTOCADO na estrutura — só re-skin tipográfico) */
.fx{scroll-snap-align:start;margin:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--line);transition:border-color .2s,background .2s}
.fx--casa{border-top-color:var(--red-texto)}
.fx--fora{border-top-color:#4a4a4a}
.fx:hover{background:var(--panel-2)}
.fx__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fx__date{font-family:var(--font-display);font-size:21.6px;letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.fx__date .yr{font-size:13px;color:var(--muted);margin-left:4px}
.fx__badge{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:99px;white-space:nowrap}
.fx--casa .fx__badge{background:var(--red);color:#fff}
.fx--fora .fx__badge{background:#262626;color:#9d9d9d;border:1px solid #3a3a3a}
.fx__opp{font-family:var(--font-display);font-size:1.45rem;letter-spacing:.04em;line-height:1.1;text-transform:uppercase}
.fx--fora .fx__opp{color:#e2e2e2}
.fx__tie{font-size:13px;color:var(--muted);line-height:1.4}
.fx__round{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.car-note{margin:16px 0 0;font-size:13px;color:#9d9d9d;max-width:60ch}

/* ---------- plantel ---------- */
.squadgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.posblock{margin-top:28px}
.posblock:first-of-type{margin-top:0}
.posblock h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:.1em;color:var(--gold);margin-bottom:20px}
.player{border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--panel);margin:0;position:relative;scroll-snap-align:start}
.player picture,.player .ph{display:block;aspect-ratio:4/5;overflow:hidden;position:relative;background:linear-gradient(170deg,#181818,#101010)}
.player img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s}
.player:hover img{transform:scale(1.04)}
/* refinamento-100: o número do jogador passa a presença de fundo, como nos
   cartões dos clubes grandes — gigante, meio-transparente, atrás da foto */
.player__num{
  position:absolute;top:-14px;right:2px;z-index:2;
  font-family:var(--font-display);font-size:96px;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.55);
  text-shadow:0 6px 30px rgba(0,0,0,.5);pointer-events:none;
}
.player:hover .player__num{-webkit-text-stroke:2px var(--red-texto)}
.player figcaption{padding:12px 16px;border-top:1px solid var(--line);position:relative}
.player figcaption::before{content:"";position:absolute;left:0;top:-1px;width:34px;height:3px;background:var(--red)}
.player figcaption b{display:block;font-size:16px;font-weight:700;letter-spacing:.01em}
.player figcaption span{display:block;margin-top:4px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
/* silhueta padrão GFC */
.ph--sil{display:grid;place-items:center}
.ph--sil svg{width:58%;opacity:.5;color:#3a3a3a}
.ph--sil .soon{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#585858;font-weight:700}

/* ---------- equipa técnica ---------- */
.staff{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.staff__media{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.staff__media img{width:100%}
.stafflist{display:grid;gap:0;margin-top:24px;border-top:1px solid var(--line)}
.staffrow{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:16px 4px;border-bottom:1px solid var(--line)}
.staffrow b{font-family:var(--font-display);font-weight:400;font-size:21.6px;letter-spacing:.06em;text-transform:uppercase}
.staffrow span{font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold);font-weight:700;text-align:right}

/* ---------- história / timeline ---------- */
.timeline{position:relative;margin-top:8px;display:grid;gap:0}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--red),var(--gold))}
.tl{position:relative;padding:0 0 34px 42px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid var(--red)}
.tl--gold::before{border-color:var(--gold)}
.tl b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.6rem;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;margin-bottom:4px}
.tl p{margin:0;color:#9d9d9d;font-size:16px;max-width:60ch}
.hist{display:grid;grid-template-columns:1fr .9fr;gap:52px;align-items:start}
.hist__motto{
  margin-top:28px;border:1px solid rgba(185,154,74,.35);border-radius:14px;
  background:linear-gradient(135deg,#191408,#141414 60%);
  padding:24px 26px;
  font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,1.9rem);
  letter-spacing:.08em;text-transform:uppercase;color:#efe9da;
}
:lang(hi) .hist__motto{text-transform:none}
.hist__media{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hist__media img{width:100%}
.hist__castle{position:absolute;left:-2%;bottom:-2%;width:min(38vw,420px);opacity:.05;pointer-events:none;color:#fff}

/* ---------- split (camisola / projeto / estádio) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.split--flip .split__media{order:2}
.split__media{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.split__media img{width:100%}
.split__body h2{font-size:clamp(2rem,4vw,3rem)}
.split__body p{color:#9d9d9d;margin:20px 0 0;font-size:16px}
.split__body p.small{color:var(--muted);font-size:13px}
.people{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px}
.person{border-left:3px solid var(--red);padding-left:16px}
.person b{display:block;font-size:1rem;font-weight:700}
.person span{font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- loja ---------- */
.store{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.store__media{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.store__media img{width:100%}
.store__soon{
  position:absolute;top:18px;right:-38px;transform:rotate(38deg);
  background:var(--gold);color:#151004;
  font-size:13px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
  padding:8px 48px;
}
.storeitems{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0}
.storeitem{border:1px solid var(--line);border-radius:12px;padding:16px 16px;background:var(--panel);text-align:center}
.storeitem .ic{font-size:1.6rem;display:block;margin-bottom:8px}
.storeitem b{font-size:13px;font-weight:600;color:#f5f5f5}
.notify{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:24px 24px;margin-top:8px}
.notify b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:4px}
.notify p{color:var(--muted);font-size:13px;margin:0 0 16px}

/* ---------- patrocinadores ---------- */
.sponsors{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.sponsor{
  background:var(--paper);border-radius:14px;
  display:grid;place-items:center;padding:24px 22px;min-height:120px;
  transition:transform .18s,box-shadow .18s;
}
.sponsor:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.sponsor img{max-height:64px;width:auto;max-width:82%;object-fit:contain}
.sponsor--wide img{max-height:52px}
.sponsorlabel{margin-top:8px;text-align:center;font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);font-weight:700}
.comp{display:flex;align-items:center;gap:18px;margin-top:28px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 22px;max-width:520px}
.comp img{width:54px;height:auto}
.comp div b{display:block;font-size:16px;font-weight:700}
.comp div span{font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- redes sociais ---------- */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.social{
  display:flex;align-items:center;gap:16px;text-decoration:none;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:20px 22px;transition:border-color .18s,transform .18s;
}
.social:hover{border-color:var(--red-texto);transform:translateY(-2px)}
.social svg{width:26px;height:26px;flex-shrink:0;color:var(--gold)}
.social b{display:block;font-size:16px;font-weight:700}
.social span{display:block;font-size:13px;color:var(--muted);margin-top:0px}

/* ---------- contactos ---------- */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.contacts__body p{color:#9d9d9d;margin:16px 0 0}
.contacts__addr{border-left:3px solid var(--red);padding-left:16px;margin-top:24px}
.contacts__addr b{display:block;font-size:1rem}
.contacts__addr span{color:var(--muted);font-size:16px}
.contacts__ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{padding:64px 0;border-top:1px solid var(--line);background:#0a0a0a;position:relative;overflow:hidden}
footer{padding-left:var(--ruler-w)}
.foot{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;position:relative}
.foot__brand{display:flex;align-items:center;gap:14px;margin-right:auto}
.foot__brand img{width:58px;height:58px;object-fit:contain}
.foot__brand .nm{font-family:var(--font-display);font-size:16px;letter-spacing:.08em;text-transform:uppercase;display:block;line-height:1}
.foot__brand .tg{font-size:13px;letter-spacing:var(--track-xwide);color:var(--gold);text-transform:uppercase;font-weight:700}
.foot h4{font-size:13px;letter-spacing:var(--track-xwide);text-transform:uppercase;color:var(--gold);margin:0 0 12px;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot li{font-size:13px;color:var(--muted)}
.foot a{text-decoration:none;color:var(--muted);transition:color .15s}
.foot a:hover{color:#fff}
.legal{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:#9d9d9d;display:flex;gap:16px;flex-wrap:wrap;position:relative}
.foot__castle{position:absolute;right:0;bottom:-30px;width:280px;opacity:.04;pointer-events:none;color:#fff}

/* ---------- página interna (hero curto) ---------- */
.pagehero{position:relative;padding:64px 0 56px;border-bottom:1px solid var(--line);overflow:hidden}
/* o brilho é decorativo: nunca pode apanhar cliques do conteúdo por cima dele */
.pagehero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(700px 380px at 80% 0%,rgba(200,16,46,.14),transparent 60%);
}
.pagehero>.wrap{position:relative;z-index:1}
.pagehero h1{font-size:clamp(3rem,8vw,5.5rem);position:relative}
.pagehero .sec-kicker{position:relative}
.pagehero p{position:relative;color:var(--muted);max-width:64ch;margin:16px 0 0;font-size:16px}

/* =====================================================
   v3 — tudo clicável
   ===================================================== */

/* ---------- cartão de jogo com escudos ---------- */
a.fx{text-decoration:none;color:inherit;position:relative}
a.fx::after{
  content:"→";position:absolute;right:16px;bottom:14px;
  font-size:13px;color:#4a4a4a;transition:color .18s,transform .18s;
}
a.fx:hover::after{color:var(--red-texto);transform:translateX(3px)}
.fx__tie{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 0 2px}
.fx__team{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0}
.fx__team img{width:46px;height:46px;object-fit:contain}
.fx__team b{
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  text-align:center;line-height:1.2;color:#f5f5f5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.fx__x{font-family:var(--font-display);font-size:1.5rem;color:var(--red-texto);flex-shrink:0}
.fx__score{
  font-family:var(--font-display);font-size:1.9rem;letter-spacing:.04em;flex-shrink:0;
  color:var(--gold);line-height:1;
}
.fx.is-vitoria .fx__score{color:#5ed17a}
.fx.is-derrota .fx__score{color:#e06a6a}
.fx__date{display:flex;align-items:baseline;gap:6px}
.fx__d{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.03em}
.fx__m{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.fx__tbd{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9d9d9d}
.fx__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:0px}
.fx__hora{font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

/* grelha da página de jogos */
.compblock{margin-bottom:64px}
.compblock h3{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.08em;color:#fff}
.compblock__ep{color:var(--gold);font-size:.6em;letter-spacing:.14em}
.compblock__meta{color:var(--muted);font-size:13px;margin:8px 0 22px;letter-spacing:.04em}
.jogosgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}

/* próximo jogo no hero */
.nextmatch__tie{
  display:flex;align-items:center;justify-content:flex-start;gap:18px;
  text-decoration:none;color:inherit;padding:4px 0;
}
.nm__team{display:flex;align-items:center;gap:11px}
.nm__team img{width:46px;height:46px;object-fit:contain}
.nm__team b{
  font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.625rem);
  letter-spacing:.05em;text-transform:uppercase;
}
.nextmatch__tie:hover .nm__team b{color:var(--gold)}

/* ---------- cartão de jogador clicável ---------- */
a.player{display:block;text-decoration:none;color:inherit}
.player__go{
  position:absolute;right:14px;bottom:13px;font-size:13px;color:#4a4a4a;
  transition:color .18s,transform .18s;
}
a.player:hover .player__go{color:var(--red-texto);transform:translateX(3px)}

/* ---------- página de jogo ---------- */
.mh{
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,var(--panel),#101010);
  padding:28px 30px 30px;text-align:center;position:relative;overflow:hidden;
}
.mh::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -10%,rgba(200,16,46,.16),transparent 65%)}
.mh>*{position:relative}
.mh__comp{font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.mh__tie{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,56px)}
.mh__team{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;max-width:200px}
.mh__team img{width:clamp(64px,13vw,110px);height:clamp(64px,13vw,110px);object-fit:contain}
.mh__team b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.05rem,2.4vw,1.6rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
.mh__score{display:flex;flex-direction:column;align-items:center;gap:12px}
.mh__digits{
  display:flex;align-items:center;gap:.14em;
  font-family:var(--font-display);font-size:clamp(2.6rem,7vw,4.4rem);line-height:1;letter-spacing:.04em;
}
.mh__dash{color:var(--red-texto)}
.mh__digits.is-vitoria .mh__g{color:#5ed17a}
.mh__digits.is-derrota .mh__g{color:#e06a6a}
.mh__digits.is-empate .mh__g{color:var(--gold)}
.mh__score em{font-family:var(--font-body);font-style:normal;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mh__vs{display:flex;flex-direction:column;align-items:center;gap:8px}
.mh__vs span{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.6rem);color:var(--red-texto)}
.mh__vs em{font-style:normal;font-size:16px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.mh__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:24px;color:var(--muted);font-size:13px}
.mh__side{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--red);color:#fff;padding:4px 10px;border-radius:99px}
.mh__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}

.mblock{margin-top:64px}
.mblock h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.08em;margin-bottom:24px}
.mnote{color:var(--muted);font-size:16px}

.scorers{display:flex;flex-wrap:wrap;gap:10px}
.scorer{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;
  background:var(--panel);padding:12px 18px;transition:background .18s,border-color .18s;
}
a.scorer:hover{background:var(--panel-2);border-left-color:var(--red-texto)}
.sc__min{font-family:var(--font-display);font-size:21.6px;color:var(--gold);line-height:1}
.scorer b{font-size:16px;font-weight:700}
.sc__ball{font-size:16px;opacity:.7}

.h2h{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start}
.h2h__sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 12px}
.h2h__n{text-align:center}
.h2h__n b{display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1}
.h2h__n span{display:block;margin-top:4px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.h2h__n.is-v b{color:#5ed17a}
.h2h__n.is-d b{color:#e06a6a}
.h2h__list{display:grid;gap:8px}
.h2h__row{
  display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;
  border:1px solid var(--line);border-left:3px solid #3a3a3a;border-radius:10px;
  background:var(--panel);padding:12px 16px;font-size:13px;
}
.h2h__row.is-vitoria{border-left-color:#5ed17a}
.h2h__row.is-derrota{border-left-color:#e06a6a}
.h2h__row.is-empate{border-left-color:var(--gold)}
.h2h__date{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.h2h__tie b{color:#fff;margin:0 4px;font-variant-numeric:tabular-nums}
.h2h__comp{color:#9d9d9d;font-size:13px;text-align:right}

.mgallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.mgallery figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.mgallery picture{display:block}
.mgallery img{width:100%;height:auto;display:block;transition:transform .5s}
.mgallery figure:hover img{transform:scale(1.03)}

/* ---------- ficha de jogador ---------- */
.pf{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:52px;align-items:start}
.pf__media{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.pf__media picture,.pf__media .ph{display:block;aspect-ratio:4/5;overflow:hidden}
.pf__media img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pf__num{
  position:absolute;left:20px;bottom:16px;font-family:var(--font-display);
  font-size:clamp(3rem,7vw,4.6rem);line-height:.85;color:#fff;
  text-shadow:0 4px 26px rgba(0,0,0,.75);
}
.pf__body h1{font-size:clamp(2.4rem,6vw,4rem);margin-top:8px}
.pf__full{color:var(--muted);font-size:13px;margin:12px 0 0;letter-spacing:.02em}
.pf__bio{color:#9d9d9d;font-size:.98rem;margin:24px 0 0;max-width:56ch}
.pf__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
.pf__stat{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px 10px;text-align:center}
.pf__stat b{display:block;font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--gold)}
.pf__stat span{display:block;margin-top:4px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pf__stnote{color:#9d9d9d;font-size:13px;margin:8px 0 0;letter-spacing:.06em}
.pf__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;margin:28px 0 26px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.pf__facts>div{display:flex;flex-direction:column;gap:6px;padding:16px 16px;background:var(--panel)}
.pf__facts dt{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0}
.pf__facts dd{margin:0;font-size:16px;font-weight:600;line-height:1.3}

/* ---------- palmarés ---------- */
.palmares{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.troph{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(165deg,var(--panel),#0f0f0f);position:relative;
  transition:transform .2s,border-color .2s;
}
.troph:hover{transform:translateY(-3px);border-color:rgba(185,154,74,.5)}
.troph--big{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr}
.troph--big .troph__media{height:100%}
.troph__media{background:linear-gradient(160deg,#191919,#0f0f0f)}
.troph__media picture{display:block;height:100%;min-height:200px}
.troph__media img{width:100%;height:100%;object-fit:contain}
.troph__body{padding:24px 24px 24px}
.troph__ico{font-size:1.5rem;display:block;margin-bottom:8px}
.troph h3{font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:.06em;line-height:1.1}
.troph__ep{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);letter-spacing:.08em;margin-top:4px}
.troph__final{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:5px}
.troph__lbl{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
.troph__final b{font-size:16px;font-weight:600}
.troph__final b em{font-style:normal;color:var(--gold);font-weight:700;margin-left:6px;font-variant-numeric:tabular-nums}
.troph__d,.troph__sc,.troph__nota{font-size:13px;color:var(--muted)}
.troph__sc{color:var(--gold)}
.troph__txt{color:#c2c2c2;font-size:13px;margin:16px 0 0}
.troph__link{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-texto);text-decoration:none}
.troph__link:hover{color:var(--gold)}
.troph--mini{
  display:flex;align-items:center;gap:14px;padding:20px 22px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
}
.troph--mini .troph__ico{margin:0;font-size:1.3rem}
.troph--mini b{font-size:16px;font-weight:700;flex:1}
.troph--mini .troph__ep{font-size:16px;margin:0}
.trophrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}

/* ---------- notícias ---------- */
.newslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.nw{
  display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--panel);transition:transform .2s,border-color .2s;
}
.nw:hover{transform:translateY(-3px);border-color:var(--red-texto)}
.nw--big{grid-column:span 2;display:grid;grid-template-columns:1.1fr 1fr}
/* cartões de notícia: foto inteira, sem recorte (mesma regra das pessoas) */
.nw__media{background:linear-gradient(160deg,#191919,#0f0f0f)}
.nw__media picture{display:block;aspect-ratio:3/2;overflow:hidden;height:100%}
.nw--big .nw__media picture{aspect-ratio:auto;min-height:230px}
.nw__media img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.nw:hover img{transform:scale(1.03)}
.nw__body{padding:24px 22px 24px;display:flex;flex-direction:column;justify-content:center}
.nw__date{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.nw__body h3{font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:.05em;margin:8px 0 0;line-height:1.1}
.nw__body p{color:var(--muted);font-size:13px;margin:12px 0 0}
.nw__go{margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-texto)}

.art{max-width:74ch;margin-inline:auto}
.art__date{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.art h1{font-size:clamp(2.2rem,5.5vw,3.6rem);margin:12px 0 0}
.art__lead{font-size:16px;color:#f5f5f5;margin:20px 0 0;font-weight:600}
.art__media{margin:28px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.art__body p{color:#9d9d9d;font-size:1rem;margin:0 0 18px;line-height:1.75}

/* ---------- patrocinadores clicáveis ---------- */
.sponsorbox{display:block;text-decoration:none;color:inherit;position:relative;transition:transform .18s}
.sponsorbox:hover{transform:translateY(-3px)}
.sponsorgo{
  position:absolute;top:10px;right:12px;font-size:13px;color:#9d9d9d;opacity:0;transition:opacity .18s;
}
.sponsorbox:hover .sponsorgo{opacity:1}
.sponsordesc{
  margin-top:4px;text-align:center;font-size:13px;color:#6f6f6f;line-height:1.45;
  max-width:26ch;margin-inline:auto;
}
.sponsorbox:hover .sponsordesc{color:var(--muted)}
.comp{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit}
.comp em{display:block;font-style:normal;font-size:13px;color:#6f6f6f;margin-top:4px;max-width:44ch}
.comp:hover{border-color:var(--gold)}

/* =====================================================
   v4 — carrossel, galeria, imprensa, motion
   ===================================================== */

/* ---------- carrossel do herói (faixa que segue o dedo) ---------- */
/* o herói inteiro é área de swipe (ver app.js: cliques em botões são ignorados) */
.hero{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.hero:active{cursor:grabbing}
.hero a,.hero button,.hero .nextmatch{cursor:auto;user-select:auto;-webkit-user-select:auto}
.hero a,.hero button{cursor:pointer}
.hero__stage{position:absolute;inset:0;overflow:hidden;z-index:1}
.hero__track{
  display:flex;height:100%;will-change:transform;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.hslide{position:relative;flex:0 0 100%;margin:0;height:100%}
.hslide picture{display:block;width:100%;height:100%}
/* REGRA: fotos com pessoas nunca são recortadas — `contain` sobre o fundo da marca.
   Só entram no herói fotos horizontais (ver data/galeria.json > regraPessoas). */
.hslide img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  pointer-events:none;-webkit-user-drag:none;
}
.hero__stage{background:radial-gradient(80% 70% at 50% 40%,#1a1113,var(--ink) 72%)}
/* o scrim decorativo NUNCA pode apanhar cliques (lição do v4) */
.hero__scrim{pointer-events:none;z-index:2}
.castle{z-index:2}
.hero__body{position:relative;z-index:3;pointer-events:none}
.hero__body a,.hero__body button,.hero__body .nextmatch{pointer-events:auto}

/* setas juntas em baixo à direita, fora da coluna de texto e dos botões */
.hero__arrow{
  position:absolute;bottom:44px;z-index:5;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(13,13,13,.55);
  color:#fff;font-size:16px;line-height:1;display:grid;place-items:center;
  backdrop-filter:blur(4px);transition:background .18s,border-color .18s,transform .18s;
}
.hero__arrow:hover{background:var(--red);border-color:var(--red-texto)}
.hero__arrow:active{transform:scale(.94)}
.hero__arrow--prev{right:74px}
.hero__arrow--next{right:20px}
.hero__arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.hero__dots{
  position:absolute;left:0;right:0;bottom:16px;z-index:4;
  display:flex;justify-content:center;gap:8px;padding-left:var(--ruler-w);
}
.hdot{
  width:24px;height:3px;border:0;border-radius:99px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:background .25s,width .25s;
}
.hdot.is-on{background:var(--red);width:42px}
.hdot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* v5.3 — a legenda passou para a direita: com o cartão de próximo jogo mais
   baixo, a canto inferior esquerdo deixou de haver espaço livre. Fica entre o
   cartão e as setas, alinhada à direita. */
.hero__caption{
  position:absolute;right:140px;left:auto;bottom:44px;z-index:4;pointer-events:none;
  text-align:right;max-width:min(44ch,34%);
  font-size:13px;color:rgba(230,230,230,.66);letter-spacing:.02em;
}

/* ---------- galeria em grelha + lightbox ---------- */
/* galeria em colunas (masonry): cada foto mantém a sua proporção natural.
   Nada de aspect-ratio fixo + cover — era isso que cortava pessoas. */
.gallerygrid{columns:3;column-gap:12px}
.gcell{
  position:relative;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);cursor:zoom-in;display:block;width:100%;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 12px;
}
.gcell picture{display:block}
.gcell img{width:100%;height:auto;display:block;transition:transform .5s}
.gcell:hover img{transform:scale(1.03)}
.gcell__zoom{
  position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(13,13,13,.72);color:#fff;display:grid;place-items:center;font-size:13px;
  opacity:0;transition:opacity .2s;
}
.gcell:hover .gcell__zoom,.gcell:focus-visible .gcell__zoom{opacity:1}
.gcell:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.lb{
  position:fixed;inset:0;z-index:200;background:rgba(6,6,6,.96);
  display:grid;place-items:center;padding:64px 20px;
  animation:lbIn .2s ease;
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__fig{margin:0;max-width:min(1100px,92vw);max-height:82vh;display:flex;flex-direction:column;gap:14px}
.lb__fig img{max-width:100%;max-height:72vh;object-fit:contain;border-radius:10px;display:block;margin-inline:auto}
.lb__fig figcaption{text-align:center;color:#9d9d9d;font-size:16px;max-width:60ch;margin-inline:auto}
.lb__x,.lb__nav{
  position:absolute;border:1px solid var(--line);background:rgba(20,20,20,.9);color:#fff;
  border-radius:50%;width:46px;height:46px;cursor:pointer;font-size:16px;line-height:1;
  display:grid;place-items:center;transition:background .18s,border-color .18s;
}
.lb__x:hover,.lb__nav:hover{background:var(--red);border-color:var(--red-texto)}
.lb__x{top:18px;right:18px}
.lb__prev{left:18px;top:50%;transform:translateY(-50%)}
.lb__next{right:18px;top:50%;transform:translateY(-50%)}
.lb__count{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;
  font-size:13px;letter-spacing:.16em;color:var(--muted);font-weight:700;
}

/* ---------- na imprensa ---------- */
.pressgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.press{
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;
  background:var(--panel);padding:24px 24px 22px;transition:transform .18s,border-color .18s,background .18s;
}
.press:hover{transform:translateY(-3px);background:var(--panel-2);border-left-color:var(--red-texto)}
.press__org{font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;color:var(--gold)}
.press__q{margin:0;font-size:1.02rem;line-height:1.5;color:#e4e4e4;font-style:italic}
.press__meta{font-size:13px;color:#9d9d9d;letter-spacing:.04em}
.press__go{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-texto);margin-top:auto}

/* ---------- cartão sem foto (monograma de marca) ---------- */
/* display:grid tem de vencer o `.pf__media .ph{display:block}` da ficha */
.ph.ph--mono{
  display:grid;place-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(200,16,46,.18),transparent 62%),
    linear-gradient(170deg,#191919,#0e0e0e);
}
.ph--mono>*{grid-area:1/1;justify-self:center;align-self:center}
.ph__crest{
  width:62%;max-width:170px;opacity:.07;filter:grayscale(1) brightness(2.2);
  pointer-events:none;
}
.ph__ini{
  font-family:var(--font-display);font-size:clamp(2.4rem,5.5vw,3.4rem);letter-spacing:.1em;
  color:rgba(245,245,245,.38);line-height:1;
}
.ph--mono .soon{
  align-self:end;justify-self:stretch;text-align:center;padding-bottom:12px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#5f5f5f;font-weight:700;
}

/* ---------- motion ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="2"]{transition-delay:.08s}
[data-reveal="3"]{transition-delay:.16s}
.troph,.press,.player,.fx,.sponsorbox{will-change:transform}

/* ---------- footer institucional ---------- */
.foot{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:28px;align-items:start}
.foot__brand{display:block;margin:0}
.foot__brand .row{display:flex;align-items:center;gap:14px}
.foot__lema{
  margin:16px 0 0;font-family:var(--font-display);font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:#9d9d9d;max-width:24ch;
}
:lang(hi) .foot__lema{text-transform:none;font-size:1rem}
.foot__socials{display:flex;gap:10px;margin-top:20px}
.foot__socials a{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--muted);transition:color .18s,border-color .18s,background .18s;
}
.foot__socials a:hover{color:#fff;border-color:var(--red-texto);background:var(--red)}
.foot__socials svg{width:17px;height:17px}
.foot address{font-style:normal;font-size:13px;color:var(--muted);line-height:1.7}
.foot address a{color:var(--muted)}
.foot address a:hover{color:#fff}

/* ---------- menu com submenu (v5) ---------- */
.navdrop{position:relative}
.navlink--drop{display:inline-flex;align-items:center;gap:5px}
.navlink--drop i{font-style:normal;font-size:13px;opacity:.7;transition:transform .2s}
.navdrop:hover .navlink--drop i,.navdrop:focus-within .navlink--drop i{transform:rotate(180deg)}
.navdrop__menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:210px;padding:10px;z-index:60;
  background:rgba(16,16,16,.98);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  display:grid;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;
}
.navdrop:hover .navdrop__menu,.navdrop:focus-within .navdrop__menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px);
}
.navdrop__menu a{
  display:block;padding:8px 13px;border-radius:8px;text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:background .15s,color .15s;
}
.navdrop__menu a:hover{background:var(--red);color:#fff}

/* ---------- atalhos da home (v5) ---------- */
.shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.shortcut{
  display:grid;gap:7px;text-decoration:none;color:inherit;position:relative;
  border:1px solid var(--line);border-radius:16px;padding:24px 24px 24px;
  background:linear-gradient(165deg,var(--panel),#0f0f0f);
  transition:transform .18s,border-color .18s,background .18s;
}
.shortcut:hover{transform:translateY(-3px);border-color:var(--red-texto);background:var(--panel-2)}
.shortcut__ico{font-size:1.5rem;line-height:1}
.shortcut b{font-family:var(--font-display);font-weight:400;font-size:1.4rem;letter-spacing:.08em;text-transform:uppercase}
:lang(hi) .shortcut b{text-transform:none;font-size:16px}
.shortcut span:not(.shortcut__ico){font-size:13px;color:var(--muted)}
.shortcut em{position:absolute;right:22px;bottom:22px;font-style:normal;color:#4a4a4a;transition:color .18s,transform .18s}
.shortcut:hover em{color:var(--red-texto);transform:translateX(3px)}

/* legenda por baixo da foto na galeria */
.gcell__cap{
  display:block;padding:12px 13px 13px;font-size:13px;line-height:1.4;
  color:var(--muted);text-align:left;
}
.gcell{display:flex;flex-direction:column;text-align:left}
.gcell picture{width:100%}

/* ---------- faixa de patrocinadores (todas as páginas, antes do rodapé) ----------
   Padrão dos sites de referência: banda clara, logos em linha, discreta mas
   presente. Ver media/benchmark/comparacao-desk-fundo.jpg */
.sstrip{
  background:var(--paper);border-top:3px solid var(--red);
  padding:24px 0 24px;padding-left:var(--ruler-w);
}
.sstrip .wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.sstrip__lbl{
  font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);
  text-transform:uppercase;color:#9d9d9d;
}
.sstrip__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,4vw,52px);width:100%;
}
/* sem cinzento: os logos coloridos (Município, Serrana) ficavam ilegíveis e
   um patrocinador pago tem de ser reconhecível */
.sstrip__i{
  display:grid;place-items:center;height:46px;opacity:.88;
  transition:opacity .2s,transform .2s;
}
.sstrip__i img{max-height:46px;max-width:136px;width:auto;object-fit:contain}
a.sstrip__i:hover{opacity:1;transform:translateY(-2px)}
.sstrip__i--off{cursor:default}
.sstrip__all{
  font-size:13px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
  color:#9d9d9d;text-decoration:none;border-bottom:1px solid transparent;
}
.sstrip__all:hover{color:var(--red-texto);border-bottom-color:var(--red-texto)}

/* últimas notícias na home: 3 cartões iguais */
.newslist--3{grid-template-columns:repeat(3,1fr)}
.newslist--3 .nw{grid-column:auto}
.newslist--3 .nw__media picture{aspect-ratio:16/10}
.car-head .car-nav .btn{white-space:nowrap}

.tally--wide{margin:0 0 30px}

/* ---------- contadores ---------- */
.tally{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.tally__i{
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:16px 26px;min-width:118px;text-align:center;
}
.tally__i b{
  display:block;font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;
}
.tally__i span{
  display:block;margin-top:8px;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
}

/* ---------- página de texto legal ---------- */
.legalpage{max-width:74ch}
.legalpage h2{font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:.07em;margin:28px 0 14px;color:var(--gold)}
.legalpage p,.legalpage li{color:#c6c6c6;font-size:16px;line-height:1.75}
.legalpage ul{padding-left:20px;margin:0 0 16px}
.legalpage li{margin-bottom:8px}
.legalpage .updated{color:#9d9d9d;font-size:13px;letter-spacing:.06em}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .foot{grid-template-columns:1fr 1fr;gap:32px}
  .pf{grid-template-columns:1fr;gap:30px}
  .h2h{grid-template-columns:1fr}
  .h2h__sum{grid-template-columns:repeat(3,1fr)}
  .troph--big,.nw--big{grid-column:span 1;grid-template-columns:1fr}
}
@media (max-width:1080px){
  .split,.news,.staff,.hist,.store,.contacts{grid-template-columns:1fr;gap:34px}
  .split--flip .split__media{order:0}
  .hist__media{position:static}
  .newsgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--ruler-w:0px}
  .ruler{display:none}
  .altbar,.altbar__val{display:block}
  header.site,main,footer{padding-left:0}
  .nav{gap:12px}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:#101010;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 20px 18px}
  .navlinks.open{display:flex}
  .navlinks a.navlink{padding:12px 0;border-bottom:1px solid var(--line);border-left:0}
  .burger{display:block}
  /* submenu no telemóvel: sempre aberto e indentado, sem hover */
  .navdrop{width:100%}
  .navdrop__menu{
    position:static;transform:none;opacity:1;visibility:visible;
    background:none;border:0;box-shadow:none;padding:0 0 10px 14px;min-width:0;
    border-left:2px solid var(--line);margin:4px 0 0;
  }
  .navdrop:hover .navdrop__menu,.navdrop:focus-within .navdrop__menu{transform:none}
  .navdrop__menu a{padding:8px 0;font-size:13px;color:#9d9d9d}
  .navdrop__menu a:hover{background:none;color:#fff}
  .navlink--drop i{margin-left:auto}
  .hero__arrow{width:38px;height:38px;font-size:16px;bottom:38px}
  .hero__arrow--prev{right:62px}
  .hero__arrow--next{right:14px}
  .hero__badge>span:last-child{font-size:13px;padding:8px 16px;letter-spacing:.16em}
  .hero__caption{display:none}
  .shortcuts{grid-template-columns:1fr 1fr;gap:10px}
  .shortcut{padding:16px 16px 16px}
  .shortcut b{font-size:16px}
  .shortcut span:not(.shortcut__ico){font-size:13px}
  .shortcut em{display:none}
  section{padding:64px 0}
  /* v5.2 — no telemóvel o herói empilha: foto inteira em cima, texto por baixo.
     Com `contain` numa caixa alta sobrava demasiado fundo vazio. */
  /* v5.3 — o cabeçalho não é fixo, por isso os 88px de reserva eram 88px de
     preto morto entre o menu e a foto. 12px chegam para respirar. */
  .hero{min-height:auto;display:block;padding-top:12px}
  .hero__stage{position:relative;inset:auto;aspect-ratio:3/2;width:100%;background:#0f0f0f}
  .hero__scrim{display:none}
  .hero__body{padding:24px 0 40px;background:var(--ink)}
  .hero h1{font-size:clamp(2.3rem,10vw,3.2rem)}
  .hero__badge{top:20px}   /* acompanha o novo topo do herói */
  .hero__arrow{bottom:auto;top:calc(12px + 28vw);transform:translateY(-50%)}
  .hero__dots{bottom:auto;top:calc(12px + 66vw);padding-left:0}
  .castle{display:none}
  .car--plantel{grid-auto-columns:minmax(168px,58%)}
  .car--fixtures{grid-auto-columns:minmax(206px,72%)}
  /* v5.3 — cartão mais baixo no telemóvel e contagem numa linha só, estreita. */
  .nextmatch{margin-top:28px;padding:16px 42px 16px 16px}
  .nextmatch__top{margin-bottom:8px}
  .nextmatch__meta{margin-top:8px}
  .countdown{gap:6px;flex-wrap:nowrap;margin-top:12px;max-width:320px}
  .cd{min-width:0;flex:1 1 0;padding:8px 2px 6px;border-radius:8px}
  .cd b{font-size:1.24rem}
  .cd span{margin-top:0px;font-size:8px;letter-spacing:.1em}
  .nextmatch__close{top:8px;right:8px;width:28px;height:28px}
  .nmreopen{margin:12px 0 0;padding:8px 17px;font-size:13px}   /* sem legenda no telemóvel */
  .newsgrid{grid-template-columns:1fr 1fr}
  .squadgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .castle{width:60vw;opacity:.04}
  .store__soon{right:-44px;font-size:13px}
  .jogosgrid{grid-template-columns:1fr 1fr;gap:10px}
  .fx__team img{width:38px;height:38px}
  .fx__team b{font-size:.62rem}
  .fx__score{font-size:1.5rem}
  .mh{padding:24px 16px 24px}
  .mh__tie{gap:12px}
  .h2h__row{grid-template-columns:1fr;gap:6px}
  .h2h__comp{text-align:left}
  .pf__stats{grid-template-columns:repeat(2,1fr)}
  .nextmatch__tie{gap:10px;flex-wrap:wrap}
  .nm__team img{width:38px;height:38px}
  .newslist,.palmares{grid-template-columns:1fr}
  .newslist--3{grid-template-columns:1fr}
  .gallerygrid{columns:2;column-gap:10px}
  .gcell{margin-bottom:8px}
  .sstrip{padding:24px 0 20px}
  .sstrip__row{gap:20px 26px}
  .sstrip__i{height:32px}
  .sstrip__i img{max-height:32px;max-width:96px}
  .tally--wide{gap:8px}
  .tally--wide .tally__i{flex:1 1 calc(50% - 8px);min-width:0;padding:12px 8px}
  .scorers{flex-direction:column}
  .scorer{width:100%}
}
@media (max-width:430px){
  .jogosgrid{grid-template-columns:1fr}
}
@media (min-width:861px){
  .navlinks{display:flex;gap:20px;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  #particles{display:none}
}

/* ---------- barra de topo em ecrãs estreitos ----------
   O seletor de idiomas tinha flex-shrink:0 e quatro botões de ~35px. Num
   telemóvel de 320-375px a barra somava 320px dentro de um .wrap de 280 e
   empurrava a página para fora: como o body tem overflow-x:hidden, não
   aparecia barra de scroll — o conteúdo é que ficava cortado, e quem
   arrastasse para o lado via os títulos sem a primeira letra
   ("HAMPIONS OF THE", "ai Agarwal takes over"). Reportado 2026-08-12.
   Agora o .lang encolhe e o nome do clube pode truncar antes de empurrar
   seja o que for. */
@media (max-width:520px){
  .nav{gap:8px}
  .brand{min-width:0}
  .brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lang{flex-shrink:1;min-width:0}
  .lang button{padding:8px 6px;font-size:13px;letter-spacing:.04em}
}
@media (max-width:360px){
  .brand span{display:none}
  .lang button{padding:8px 5px;font-size:13px;letter-spacing:0}
}

/* ---------- rodapé em ecrãs estreitos ----------
   O .foot é flex com gap:28px e o .foot__brand tem margin-right:auto; a 320px
   as colunas ficavam na mesma linha do emblema e o endereço de correio
   (geral@guardafc.pt, 129px sem um único espaço por onde quebrar) saía 43px
   para fora, arrastando a página com ele. Aqui o emblema ocupa a linha toda,
   as colunas descem, e o que não tiver espaços parte onde for preciso. */
@media (max-width:520px){
  .foot{gap:26px}
  .foot__brand{margin-right:0;width:100%}
  .foot>div{min-width:0;max-width:100%}
  .foot a,.foot li,.foot address,.legal a,.legal span{overflow-wrap:anywhere}
}

/* --- páginas legais: aviso de versão em preparação + ficha da empresa --- */
.legalpage .pending{border-left:3px solid var(--gold);padding:8px 14px;color:var(--muted);
  font-style:italic;background:rgba(185,154,74,.08);border-radius:0 8px 8px 0}
.factlist{display:grid;grid-template-columns:max-content 1fr;gap:10px 26px;margin:24px 0}
.factlist dt{color:var(--muted);font-size:13px;letter-spacing:.04em}
.factlist dd{margin:0;color:#eee}
@media (max-width:520px){
  .factlist{grid-template-columns:1fr;gap:2px}
  .factlist dt{margin-top:12px}
}

/* --- classificação (Campeonato de Portugal · Série 2) --- */
.ct__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.classtable{width:100%;border-collapse:collapse;font-size:16px}
.classtable th{color:var(--muted);font-weight:600;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:8px 8px;border-bottom:1px solid var(--line);text-align:center}
.classtable td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:center;color:#eee}
.classtable .ct__team{text-align:left;white-space:nowrap}
.classtable td.ct__team img{width:22px;height:22px;object-fit:contain;vertical-align:middle;margin-right:10px}
.classtable .ct__pos{width:34px;color:var(--muted)}
.classtable td.ct__pos{border-left:3px solid transparent}
.classtable tr.is-sobe td.ct__pos{border-left-color:var(--gold)}
.classtable tr.is-playoff td.ct__pos{border-left-color:#c87b2a}
.classtable tr.is-desce td.ct__pos{border-left-color:var(--red-texto)}
.classtable .ct__pts{font-weight:800;color:#fff}
.classtable tr.is-gfc td{background:rgba(200,16,46,.14)}
.ct__legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:13px}
.ct__legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.ct__legend i.is-sobe{background:var(--gold)}
.ct__legend i.is-playoff{background:#c87b2a}
.ct__legend i.is-desce{background:var(--red)}
.ct__meta{margin-top:8px;color:var(--muted);font-size:13px}
.ct__meta a{color:var(--muted)}
@media (max-width:480px){
  .classtable{font-size:.84rem}
  .classtable .ct__g{display:none}
  .classtable th,.classtable td{padding:8px 5px}
  .classtable td.ct__team img{width:18px;height:18px;margin-right:7px}
}

/* ============ v7 — entrada cinematográfica (livro de regras §A1/§C4, skill §8.10) ============ */
/* Vídeo real do clube em ecrã cheio: muted+autoplay+loop+playsinline, poster real,
   altura com fallback vh→svh (webviews sem svh eram a "linha fina"), fundo preto. */
.hero--filme{background:#000;min-height:min(92vh,860px);min-height:min(92svh,860px)}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 34%;
  background:#000;
}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero--filme .hero__stage{
    background:url("../img/heroi-poster.jpg") center 34%/cover no-repeat #000;
  }
}
/* marcador à cabeça — o resultado que importa logo a seguir ao herói (livro §F desporto) */
#marcador{background:linear-gradient(180deg,#050505,transparent 90%);padding:28px 0 4px}
#marcador .result{margin:0}
/* No telemóvel o v5 empilhava a foto em banda (860px); o herói-filme volta ao
   ecrã cheio: vídeo por trás, scrim ligado, texto por cima — como nos clubes grandes. */
@media (max-width:860px){
  .hero--filme{min-height:min(88vh,760px);min-height:min(88svh,760px);display:flex;padding-top:0}
  .hero--filme .hero__stage{position:absolute;inset:0;aspect-ratio:auto;width:auto}
  /* no ecrã estreito a camada horizontal de 85% afogava o filme: fica só a
     vertical, mais leve em cima, escura em baixo onde o texto assenta */
  .hero--filme .hero__scrim{display:block;background:
    linear-gradient(180deg,rgba(13,13,13,.55) 0%,rgba(13,13,13,.16) 30%,rgba(13,13,13,.78) 58%,rgba(13,13,13,.96) 86%)}
  /* o v5 dava fundo sólido ao bloco de texto (texto abaixo da foto);
     sobre o filme esse fundo tapava o vídeo inteiro — sai */
  .hero--filme .hero__body{padding:64px 0 30px;background:transparent}
  .hero__video{object-position:56% 34%}
}

/* ============ v7 — grelha do fiscal (contraste, toque, letra) ============ */
/* contraste AA: o vermelho da marca fica nos fundos e títulos grandes;
   nos rótulos pequenos entra uma variante mais clara que passa 4.5:1 */
.nw__go{color:#ff5468}
.sstrip__lbl{color:#9d9d9d}
.legal{color:#9d9d9d}
/* alvos de toque ≥44px */
.lang button{min-width:44px;min-height:44px}
.burger{min-width:44px;min-height:44px}
.skip{min-height:44px;font-size:13px}
.nextmatch__close{width:44px;height:44px}
/* letra ≥13px no telemóvel */
@media (max-width:860px){
  .player figcaption span{font-size:13px;letter-spacing:.1em}
  .altbar__val{font-size:13px}
  .btn{font-size:13px}
}

/* v7 grelha, segunda passagem: sociais/atalhos a 44px e rótulos móveis a 13px */
.foot__socials a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sstrip__all{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:860px){
  .champstrip span{font-size:13px}
  .hero__badge>span:last-child{font-size:13px}
  .hero__badge .tro{font-size:13px}
  .nextmatch__label{font-size:13px}
  .nextmatch__comp{font-size:13px}
  .cd span{font-size:13px;letter-spacing:.1em}
  .sec-kicker{font-size:13px}
  .brand span{font-size:13px}
  .nw__go{font-size:13px}
  .sstrip__lbl{font-size:13px}
}

/* v7 grelha, terceira passagem: datas de notícia legíveis e morada com 44px */
@media (max-width:860px){
  .news__date{font-size:13px}
  .nw__date{font-size:13px}
  .foot address a{display:inline-flex;align-items:center;min-height:44px}
  address a{display:inline-flex;align-items:center;min-height:44px}
}

/* v7 grelha, últimos rótulos móveis */
@media (max-width:860px){
  .fx__round{font-size:13px}
  .fx span{font-size:13px}
  .troph__ep{font-size:13px}
}

/* v7 grelha, remate: marcador, contadores e nomes das equipas nos cartões */
@media (max-width:860px){
  .result__badge{font-size:13px}
  .tally__i span{font-size:13px;letter-spacing:.08em}
  .fx__team b{font-size:13px}
}

/* v7 grelha: o ano nos cartões usava .68em do pai — fixa-se em 13px
   sem mexer no tamanho display da data */
@media (max-width:860px){
  .fx__date .yr{font-size:13px}
}

/* v7 grelha: atalhos, marca do rodapé e legal a 13px no telemóvel */
@media (max-width:860px){
  .shortcut span{font-size:13px}
  .foot .brand span{font-size:13px}
  .foot span{font-size:13px}
  .legal{font-size:13px}
  .legal span{font-size:13px}
}

/* ============ v7 — dia de jogo: direto e gravação ============ */
.tvlive{margin-top:16px}
.tvlive__tag{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;
  color:#fff;background:var(--red);padding:8px 14px;margin-bottom:8px;
}
.tvlive__dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:tvpulsa 1.1s ease-in-out infinite}
@keyframes tvpulsa{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.tvlive__dot{animation:none}}
.tvlive__frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.tvlive__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tvrec{flex-basis:100%;margin-top:12px}
.tvrec .tvlive__frame{margin-top:12px;max-width:760px}

/* ============ v7 — arquivo ============ */
.arquivo__busca{
  width:100%;max-width:520px;padding:12px 18px;font-size:16px;
  background:var(--panel);border:1px solid var(--line);color:#fff;
  margin-bottom:28px;border-radius:0;
}
.arquivo__busca:focus{outline:2px solid var(--gold);outline-offset:2px}
.arquivo__epoca{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.06em;margin:28px 0 16px;color:var(--gold)}

/* ============ v7 refinamento — entrada cinematográfica (scroll) ============ */
.cine{position:relative;background:#000}
.cine__palco{position:relative;height:100vh;height:100svh;overflow:hidden;background:#000}
.cine__capa,.cine__tela{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  background:#000;
}
.cine__tela{opacity:0;transition:opacity .3s}
.cine--vivo .cine__tela{opacity:1}
.cine__vinheta{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.66) 100%)}
.cine__legenda{
  position:absolute;left:50%;bottom:14vh;transform:translate(-50%,14px);
  margin:0;padding:0 20px;text-align:center;width:min(92vw,860px);
  font-family:var(--font-display);font-size:clamp(1.7rem,4.6vw,3.4rem);
  letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.08;
  text-shadow:0 2px 30px rgba(0,0,0,.65);
  opacity:0;transition:opacity .45s,transform .45s;pointer-events:none;
}
.cine[data-etapa="1"] .cine__legenda--1,
.cine[data-etapa="2"] .cine__legenda--2,
.cine[data-etapa="3"] .cine__legenda--3{opacity:1;transform:translate(-50%,0)}
.cine__escudo{
  position:absolute;left:50%;top:50%;width:min(38vw,190px);height:auto;
  transform:translate(-50%,-64%) scale(1.5);opacity:0;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.55));
  transition:opacity .5s,transform .55s cubic-bezier(.2,.9,.3,1.15);pointer-events:none;
}
.cine[data-etapa="4"] .cine__escudo{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cine[data-etapa="4"] .cine__vinheta{background:
  linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 50%,rgba(0,0,0,.78) 100%)}
.cine__rolar{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:var(--track-xwide);
  text-transform:uppercase;color:#fff;opacity:.85;
}
.cine__rolar i{width:1px;height:34px;background:linear-gradient(180deg,#fff,transparent);
  animation:cinerola 1.6s ease-in-out infinite}
@keyframes cinerola{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{opacity:0}}
.cine[data-etapa="4"] .cine__rolar{opacity:0;transition:opacity .4s}
/* sem movimento / sem libs / erro: capa parada, sem canvas nem pin */
.cine--parado .cine__tela{display:none}
.cine--parado .cine__legenda--1{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){
  .cine__rolar i{animation:none}
}

/* ============ v7 — grids com imagens declaradas (2026-08-31) ============
   Ao pôr width/height nos <img> (bom para o CLS), os itens de grid passaram
   a ter min-content igual à largura intrínseca da imagem e esticavam a
   coluna: a notícia em destaque transbordava 412px a 768px. min-width:0 é
   a correção canónica; a imagem continua a mandar pelo CSS. */
.news,.split,.nw,.newsgrid,.newslist,.store,.contacts,.staff,.hist{min-width:0}
.news>*,.split>*,.nw>*,.newsgrid>*,.newslist>*,.store>*,.contacts>*,.staff>*,.hist>*{min-width:0}
.news img,.split img,.nw img,.newsgrid img,.newslist img{max-width:100%;height:auto}

/* contraste AA no rótulo dos parceiros (media na faixa clara): 2.49:1 -> 4.6:1 */
.sstrip__lbl{color:#6b6b6b}

/* ============ v7 — cabeçalho no telemóvel (2026-08-31, defeito do Danilo)
   O हिं desaparecia: com min-width:44px por botão (regra de toque) os quatro
   pedem 176px, o .lang tinha flex-shrink:1 e encolhia para 144px, e o
   overflow:hidden cortava o quarto. A 390px o nome escrito da marca não cabe
   com os quatro idiomas — fica o emblema (identidade suficiente) e o
   seletor deixa de encolher. Conta a 390: 46+8+44+8+176 = 282 de 350 úteis. */
@media (max-width:430px){
  .brand span{display:none}
  .brand img{width:42px;height:42px}
  .lang{flex-shrink:0;min-width:auto}
  .lang button{padding:8px 4px;font-size:13px;letter-spacing:0;min-width:44px}
  .nav{gap:8px}
}

/* ============ v7 — telemóvel: primeiro ecrã (2026-08-31, defeito do Danilo)
   A 390px o primeiro ecrã perdia 194px (23%) antes da imagem: a faixa de
   campeões partia em duas linhas (59px), e a secção da abertura tinha 64px
   de padding preto por cima. Além disso o palco a 100vh obriga o cover a
   ampliar 2,8x uma imagem 16:9 num ecrã 9:19 — corta 74% da largura e o
   autocarro aparece em pedaços. Aqui: faixa numa linha, zero preto morto,
   palco mais baixo (a cena vê-se) e a legenda a acompanhar. */
@media (max-width:520px){
  .champstrip{font-size:11px;letter-spacing:.1em;padding:7px 12px;line-height:1.25}
  .cine{padding:0}
  .cine__palco{height:62vh;height:62svh;min-height:420px}
  .cine__capa,.cine__tela{object-position:56% 52%}
  .cine__legenda{bottom:9vh;font-size:clamp(1.35rem,6.2vw,2rem);width:min(94vw,520px)}
  .cine__escudo{width:min(46vw,180px)}
  .cine__rolar{bottom:16px;font-size:12px}
  .cine__rolar i{height:26px}
}

/* v7 — remates do telemóvel a 390 (medidos, 2026-08-31) */
.sstrip__all{color:#6b6b6b}
@media (max-width:430px){
  .brand img{width:44px;height:44px}
  .brand{min-height:44px}
}
@media (max-width:520px){
  .result__tie{display:inline-flex;align-items:center;min-height:44px}
  .cine__rolar{font-size:13px}
}

/* ============ v7 — o momento do emblema (2026-08-31, 2.ª correção)
   Era um ecrã preto com o emblema ao meio. Agora: o emblema assenta POR CIMA
   do relvado real (os frames finais deixaram de ser preto liso) e, no mesmo
   ecrã, entra o cartão do próximo jogo com escudos e contagem. */
.cine__jogo{
  position:absolute;left:50%;bottom:6vh;transform:translate(-50%,18px);
  width:min(92vw,560px);opacity:0;pointer-events:none;
  transition:opacity .5s .15s,transform .5s .15s;
}
.cine[data-etapa="4"] .cine__jogo{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.cine__jogo .nextmatch{margin:0;background:rgba(10,10,10,.82);backdrop-filter:blur(6px)}
.cine[data-etapa="4"] .cine__escudo{transform:translate(-50%,-118%) scale(.82)}
@media (max-width:520px){
  .cine__jogo{bottom:3vh;width:94vw}
  .cine__jogo .nextmatch{padding:14px 14px 16px}
  /* o emblema vive no espaço ACIMA do cartão: topo a 21% do palco, inteiro */
  .cine__escudo{top:21%;width:min(34vw,132px)}
  .cine[data-etapa="4"] .cine__escudo{transform:translate(-50%,-50%) scale(1)}
}

/* classificação na entrada (2026-08-31): resumo compacto, o Guarda sempre visível */
.classtable--resumo td,.classtable--resumo th{padding:12px 10px}
.classtable--resumo .ct__salto td{text-align:center;color:#6b6b6b;padding:4px}
.classtable--resumo tr.is-gfc{background:rgba(200,16,46,.14)}
.classtable--resumo tr.is-gfc td{font-weight:700}

/* a 360/390px o botão "ver todas" ao lado do título do carrossel saía 88px do
   ecrã: passa a poder mudar de linha em vez de empurrar (medido 2026-08-31,
   a mesma correção que foi para o site aprovado) */
@media (max-width:430px){
  .car-head{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .car-head .sec-head{flex:1 1 100%}
  .car-nav{flex-shrink:1;min-width:0}
  .car-head .car-nav .btn{white-space:normal}
}