/* ============================================================
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:#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:14px 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:34px 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:10px;letter-spacing:var(--track-wide);color:#5b5b5b;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:11px;font-weight:700;color:var(--red);letter-spacing:.04em;background:var(--ink);padding:2px 5px;border-radius:4px;border:1px solid rgba(200,16,46,.35)}
.ruler__cap{position:absolute;left:9px;top:10px;font-size:9px;letter-spacing:var(--track-xwide);color:#4c4c4c;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:11px;font-weight:700;letter-spacing:.1em;color:var(--gold);background:rgba(0,0,0,.82);border:1px solid var(--line);padding:5px 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:19px;letter-spacing:.1em;text-transform:uppercase;display:block;line-height:1}
.brand span{font-size:9px;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:11px;font-weight:700;letter-spacing:var(--track-wide);
text-transform:uppercase;color:var(--muted);padding:6px 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)}
.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:11px;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:150px 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:11px;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:11px 26px;border-radius:99px;
box-shadow:0 10px 44px rgba(200,16,46,.4);
text-align:center;
}
.hero__badge .tro{font-size:14px;color:#fff}
.hero h1{font-size:clamp(2.9rem,7.6vw,6rem);letter-spacing:.05em}
.hero h1 em{font-style:normal;color:var(--red);display:block;text-shadow:0 2px 40px rgba(200,16,46,.4)}
.hero__sub{max-width:54ch;color:#d6d6d6;margin-top:20px;font-size:clamp(.95rem,1.5vw,1.1rem)}
.hero__ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{
display:inline-flex;align-items:center;gap:10px;
font-size:11.5px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
text-decoration:none;border-radius:99px;padding:13px 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:#e8e8e8;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:48px;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:#9a9a9a;
font-size:12px;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);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:#dcdcdc;border-radius:99px;padding:11px 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);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:14px}
.nextmatch__label{font-size:10px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;color:#fff;background:var(--red);padding:5px 10px;border-radius:99px}
.nextmatch__comp{font-size:10.5px;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)}
.nextmatch__us{color:var(--gold)}
.nextmatch__meta{margin-top:12px;font-size:.85rem;color:var(--muted);line-height:1.5}
.nextmatch__dot{margin:0 6px;color:#4c4c4c}
.countdown{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.cd{border:1px solid var(--line);background:#0d0d0d;border-radius:10px;padding:10px 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:5px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.nextmatch__state{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
/* ---------- secções ---------- */
section{padding:96px 0;border-top:1px solid var(--line);position:relative}
section:first-of-type{border-top:0}
.sec-head{margin-bottom:44px;max-width:72ch}
.sec-kicker{font-size:11px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;color:var(--red);display:block;margin-bottom:14px}
.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:.95rem}
/* ---------- 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:10px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
padding:7px 14px;border-radius:99px;
}
.news__date{font-size:11px;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.6rem);line-height:1;
letter-spacing:.04em;margin:10px 0 4px;
}
.news__score .win{color:var(--red)}
.news__scorers{color:var(--gold);font-size:.85rem;font-weight:600;letter-spacing:.06em;margin-bottom:18px}
.news__body p{color:#cfcfcf;font-size:.95rem;margin:0 0 14px}
.news__quote{
border-left:3px solid var(--gold);padding:6px 0 6px 18px;margin:22px 0 0;
font-family:var(--font-display);font-size:1.35rem;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:44px}
.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:26px 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:.85rem;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:11px;font-weight:700;margin:22px 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:26px 30px;margin-bottom:36px;
display:flex;flex-wrap:wrap;align-items:center;gap:22px;
}
.result__badge{font-size:10px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;background:var(--gold);color:#151004;padding:6px 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:.83rem}
.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:17px;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)}
.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:14px;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:18px 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)}
.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:1.35rem;letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.fx__date .yr{font-size:.68em;color:var(--muted);margin-left:4px}
.fx__badge{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:99px;white-space:nowrap}
.fx--casa .fx__badge{background:var(--red);color:#fff}
.fx--fora .fx__badge{background:#262626;color:#bcbcbc;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:.78rem;color:var(--muted);line-height:1.4}
.fx__round{font-size:9px;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:.8rem;color:#6a6a6a;max-width:60ch}
/* ---------- plantel ---------- */
.squadgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.posblock{margin-top:44px}
.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:14px;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)}
.player__num{
position:absolute;top:10px;right:14px;z-index:2;
font-family:var(--font-display);font-size:2.1rem;line-height:1;color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.65);
}
.player figcaption{padding:14px 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:.95rem;font-weight:700;letter-spacing:.01em}
.player figcaption span{display:block;margin-top:4px;font-size:9.5px;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:9px;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:26px;border-top:1px solid var(--line)}
.staffrow{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:15px 4px;border-bottom:1px solid var(--line)}
.staffrow b{font-family:var(--font-display);font-weight:400;font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase}
.staffrow span{font-size:10px;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:10px;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:6px}
.tl p{margin:0;color:#cfcfcf;font-size:.93rem;max-width:60ch}
.hist{display:grid;grid-template-columns:1fr .9fr;gap:52px;align-items:start}
.hist__motto{
margin-top:34px;border:1px solid rgba(185,154,74,.35);border-radius:14px;
background:linear-gradient(135deg,#191408,#141414 60%);
padding:22px 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:#c9c9c9;margin:20px 0 0;font-size:.95rem}
.split__body p.small{color:var(--muted);font-size:.85rem}
.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:10px;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:10.5px;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:26px 0}
.storeitem{border:1px solid var(--line);border-radius:12px;padding:18px 16px;background:var(--panel);text-align:center}
.storeitem .ic{font-size:1.6rem;display:block;margin-bottom:8px}
.storeitem b{font-size:.82rem;font-weight:600;color:#ddd}
.notify{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:22px 24px;margin-top:10px}
.notify b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:6px}
.notify p{color:var(--muted);font-size:.88rem;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:26px 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:10px;text-align:center;font-size:9.5px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);font-weight:700}
.comp{display:flex;align-items:center;gap:18px;margin-top:40px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 22px;max-width:520px}
.comp img{width:54px;height:auto}
.comp div b{display:block;font-size:.9rem;font-weight:700}
.comp div span{font-size:10px;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);transform:translateY(-2px)}
.social svg{width:26px;height:26px;flex-shrink:0;color:var(--gold)}
.social b{display:block;font-size:.92rem;font-weight:700}
.social span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
/* ---------- contactos ---------- */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.contacts__body p{color:#c9c9c9;margin:16px 0 0}
.contacts__addr{border-left:3px solid var(--red);padding-left:16px;margin-top:22px}
.contacts__addr b{display:block;font-size:1rem}
.contacts__addr span{color:var(--muted);font-size:.9rem}
.contacts__ctas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
/* ---------- footer ---------- */
footer{padding:64px 0 44px;border-top:1px solid var(--line);background:#0a0a0a;position:relative;overflow:hidden}
footer{padding-left:var(--ruler-w)}
.foot{display:flex;gap:40px;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:1.25rem;letter-spacing:.08em;text-transform:uppercase;display:block;line-height:1}
.foot__brand .tg{font-size:10px;letter-spacing:var(--track-xwide);color:var(--gold);text-transform:uppercase;font-weight:700}
.foot h4{font-size:10px;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:.88rem;color:var(--muted)}
.foot a{text-decoration:none;color:var(--muted);transition:color .15s}
.foot a:hover{color:#fff}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:.75rem;color:#5c5c5c;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:120px 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:.95rem}
/* =====================================================
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:14px;color:#4a4a4a;transition:color .18s,transform .18s;
}
a.fx:hover::after{color:var(--red);transform:translateX(3px)}
.fx__tie{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 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:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
text-align:center;line-height:1.2;color:#dcdcdc;
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);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:10px;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.fx__tbd{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6a6a6a}
.fx__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.fx__hora{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
/* grelha da página de jogos */
.compblock{margin-bottom:56px}
.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:.82rem;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:6px 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.75rem);
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);transform:translateX(3px)}
/* ---------- página de jogo ---------- */
.mh{
border:1px solid var(--line);border-radius:18px;
background:linear-gradient(160deg,var(--panel),#101010);
padding:34px 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:10.5px;font-weight:700;letter-spacing:var(--track-xwide);text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.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)}
.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:10px;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)}
.mh__vs em{font-style:normal;font-size:1.05rem;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:26px;color:var(--muted);font-size:.85rem}
.mh__side{font-size:9.5px;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:26px}
.mblock{margin-top:52px}
.mblock h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.08em;margin-bottom:22px}
.mnote{color:var(--muted);font-size:.9rem}
.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:13px 18px;transition:background .18s,border-color .18s;
}
a.scorer:hover{background:var(--panel-2);border-left-color:var(--red)}
.sc__min{font-family:var(--font-display);font-size:1.35rem;color:var(--gold);line-height:1}
.scorer b{font-size:.92rem;font-weight:700}
.sc__ball{font-size:.9rem;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:18px 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:5px;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:.85rem;
}
.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:.78rem;font-variant-numeric:tabular-nums}
.h2h__tie b{color:#fff;margin:0 4px;font-variant-numeric:tabular-nums}
.h2h__comp{color:#6a6a6a;font-size:.72rem;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:.88rem;margin:12px 0 0;letter-spacing:.02em}
.pf__bio{color:#cfcfcf;font-size:.98rem;margin:22px 0 0;max-width:56ch}
.pf__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px}
.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:6px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pf__stnote{color:#6a6a6a;font-size:.75rem;margin:10px 0 0;letter-spacing:.06em}
.pf__facts{
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1px;margin:30px 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:15px 16px;background:var(--panel)}
.pf__facts dt{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0}
.pf__facts dd{margin:0;font-size:.95rem;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:26px 24px 24px}
.troph__ico{font-size:1.5rem;display:block;margin-bottom:10px}
.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:6px}
.troph__final{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:5px}
.troph__lbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
.troph__final b{font-size:.95rem;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:.78rem;color:var(--muted)}
.troph__sc{color:var(--gold)}
.troph__txt{color:#c2c2c2;font-size:.88rem;margin:16px 0 0}
.troph__link{display:inline-block;margin-top:16px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);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:.9rem;font-weight:700;flex:1}
.troph--mini .troph__ep{font-size:1.15rem;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)}
.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:22px 22px 24px;display:flex;flex-direction:column;justify-content:center}
.nw__date{font-size:10px;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:10px 0 0;line-height:1.1}
.nw__body p{color:var(--muted);font-size:.88rem;margin:12px 0 0}
.nw__go{margin-top:16px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.art{max-width:74ch;margin-inline:auto}
.art__date{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.art h1{font-size:clamp(2.2rem,5.5vw,3.6rem);margin:14px 0 0}
.art__lead{font-size:1.1rem;color:#dcdcdc;margin:20px 0 0;font-weight:600}
.art__media{margin:32px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.art__body p{color:#c9c9c9;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:12px;color:#9a9a9a;opacity:0;transition:opacity .18s;
}
.sponsorbox:hover .sponsorgo{opacity:1}
.sponsordesc{
margin-top:6px;text-align:center;font-size:11.5px;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:11.5px;color:#6f6f6f;margin-top:5px;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:19px;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)}
.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:11.5px;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:56px 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:#c9c9c9;font-size:.9rem;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:20px;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)}
.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:11px;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)}
.press__org{font-size:10px;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:11px;color:#6a6a6a;letter-spacing:.04em}
.press__go{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);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:9px;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:40px;align-items:start}
.foot__brand{display:block;margin:0}
.foot__brand .row{display:flex;align-items:center;gap:14px}
.foot__lema{
margin:18px 0 0;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.06em;
text-transform:uppercase;color:#cfcfcf;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);background:var(--red)}
.foot__socials svg{width:17px;height:17px}
.foot address{font-style:normal;font-size:.88rem;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:9px;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:9px 13px;border-radius:8px;text-decoration:none;
font-size:11.5px;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:26px 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);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:1.1rem}
.shortcut span:not(.shortcut__ico){font-size:.85rem;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);transform:translateX(3px)}
/* legenda por baixo da foto na galeria */
.gcell__cap{
display:block;padding:11px 13px 13px;font-size:.78rem;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:26px 0 24px;padding-left:var(--ruler-w);
}
.sstrip .wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.sstrip__lbl{
font-size:9.5px;font-weight:700;letter-spacing:var(--track-xwide);
text-transform:uppercase;color:#8a8a8a;
}
.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:9.5px;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
color:#6a6a6a;text-decoration:none;border-bottom:1px solid transparent;
}
.sstrip__all:hover{color:var(--red);border-bottom-color:var(--red)}
/* ú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:34px}
.tally__i{
border:1px solid var(--line);border-radius:14px;background:var(--panel);
padding:18px 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:9.5px;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:38px 0 14px;color:var(--gold)}
.legalpage p,.legalpage li{color:#c6c6c6;font-size:.95rem;line-height:1.75}
.legalpage ul{padding-left:20px;margin:0 0 16px}
.legalpage li{margin-bottom:8px}
.legalpage .updated{color:#6a6a6a;font-size:.8rem;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:13px 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:6px 0 0;
}
.navdrop:hover .navdrop__menu,.navdrop:focus-within .navdrop__menu{transform:none}
.navdrop__menu a{padding:9px 0;font-size:11px;color:#8a8a8a}
.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:9.5px;padding:9px 16px;letter-spacing:.16em}
.hero__caption{display:none}
.shortcuts{grid-template-columns:1fr 1fr;gap:10px}
.shortcut{padding:18px 16px 16px}
.shortcut b{font-size:1.1rem}
.shortcut span:not(.shortcut__ico){font-size:.75rem}
.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:26px 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:10px}
.nextmatch__meta{margin-top:10px}
.countdown{gap:6px;flex-wrap:nowrap;margin-top:13px;max-width:320px}
.cd{min-width:0;flex:1 1 0;padding:7px 2px 6px;border-radius:8px}
.cd b{font-size:1.24rem}
.cd span{margin-top:2px;font-size:8px;letter-spacing:.1em}
.nextmatch__close{top:8px;right:8px;width:28px;height:28px}
.nmreopen{margin:14px 0 0;padding:10px 17px;font-size:10px} /* 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:9.5px}
.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:26px 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:10px}
.sstrip{padding:22px 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:14px 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:10px;letter-spacing:.04em}
}
@media (max-width:360px){
.brand span{display:none}
.lang button{padding:7px 5px;font-size:9.5px;letter-spacing:0}
}
/* ---------- rodapé em ecrãs estreitos ----------
O .foot é flex com gap:40px 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:10px 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:26px 0}
.factlist dt{color:var(--muted);font-size:.85rem;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:.92rem}
.classtable th{color:var(--muted);font-weight:600;font-size:.7rem;letter-spacing:.08em;
text-transform:uppercase;padding:10px 8px;border-bottom:1px solid var(--line);text-align:center}
.classtable td{padding:10px 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)}
.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:14px;color:var(--muted);font-size:.8rem}
.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:10px;color:var(--muted);font-size:.8rem}
.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}
}
/* ============================================================================
O MELHOR DA v7, TRAZIDO PARA O SITE APROVADO — 2026-08-31
----------------------------------------------------------------------------
Ordem do Danilo: "traz o melhor da v7 para dentro do site aprovado".
Não é gosto: é o que o fiscal mediu nos dois sites ao vivo, na mesma corrida.
Aprovado 50 médios, v7 6. Estas regras fecham a diferença sem mexer no
desenho — a página fica igual, deixa é de ter os defeitos.
Ficam de fora as regras que só a v7 tem elementos para usar (o filme de
abertura .cine*, a classificação resumida). Aqui não existem.
============================================================================ */
/* --- 1. o defeito grande: a notícia em destaque saía 762px do ecrã a 360px ---
Um item de grid nasce com min-width:auto, que vale o tamanho min-content.
Numa ![]()
com width:100% esse min-content é a LARGURA REAL do ficheiro
(1600px), por isso a coluna estica e o conteúdo é cortado. 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}
/* --- 2. contraste: o vermelho da marca fica nos fundos e nos títulos grandes;
nos rótulos pequenos entra a variante clara, que passa os 4.5:1 --- */
:root{--red-texto:#ff5468}
.nw__go{color:var(--red-texto)} /* 3.13:1 -> 5.6:1 sobre o painel escuro */
.news__score .win{color:var(--red-texto)}
.legal{color:#9d9d9d} /* 2.96:1 -> 7.7:1 sobre o preto do rodapé */
.sstrip__lbl{color:#6b6b6b} /* 3.17:1 -> 5.4:1 sobre a faixa clara */
.sstrip__all{color:#6b6b6b}
/* --- 3. alvos de toque: mínimo 44x44, que é o dedo médio --- */
.lang button{min-width:44px;min-height:44px}
.burger,#burger{min-width:44px;min-height:44px}
.skip{min-height:44px;font-size:13px}
.nextmatch__close{width:44px;height:44px}
.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}
/* --- 4. letra: nada abaixo de 13px no telemóvel --- */
@media (max-width:860px){
.news__date,.nw__date,.nw__go,.sstrip__lbl{font-size:13px}
.champstrip span,.hero__badge>span:last-child,.hero__badge .tro{font-size:13px}
.nextmatch__label,.nextmatch__comp,.sec-kicker,.brand span{font-size:13px}
.cd span{font-size:13px;letter-spacing:.1em}
.player figcaption span{font-size:13px;letter-spacing:.1em}
.altbar__val,.btn,.fx__round,.fx span,.troph__ep{font-size:13px}
.foot address a,address a{display:inline-flex;align-items:center;min-height:44px}
}
/* --- 5. cabeçalho a 430px: os quatro idiomas com 44px pedem 176px, e o nome
escrito da marca não cabe ao lado. Fica o emblema, que chega para identificar,
e o seletor deixa de encolher — era assim que o हिं desaparecia. --- */
@media (max-width:430px){
.brand span{display:none}
.brand img{width:44px;height:44px}
.brand{min-height:44px}
.lang{flex-shrink:0;min-width:auto}
.lang button{padding:8px 4px;font-size:13px;letter-spacing:0;min-width:44px}
.nav{gap:8px}
}
@media (max-width:520px){
.result__tie{display:inline-flex;align-items:center;min-height:44px}
}
/* --- 6. remates medidos depois da primeira passagem (2026-08-31) --- */
@media (max-width:860px){
/* setas do carrossel: 38x38 é menos do que um dedo */
.hero__arrow{width:44px;height:44px;min-width:44px;min-height:44px}
/* rodapé e linha legal: nada abaixo de 13px */
.legal,.legal span,.legal a{font-size:13px}
.foot__brand .tg,.foot h4{font-size:13px}
.sstrip__all{font-size:13px}
.foot p{font-size:13px}
}
/* a 360px o botão "ver todas" ao lado do título do carrossel saía 18px do
ecrã: passa a poder mudar de linha em vez de empurrar */
@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}
}
/* --- 7. últimos rótulos abaixo de 13px, apanhados a 390px (2026-08-31) --- */
@media (max-width:860px){
.tally__i span{font-size:13px;letter-spacing:.08em} /* "Troféus", "Supertaças"… */
.shortcut span:not(.shortcut__ico){font-size:13px} /* legendas dos atalhos */
.altstrip p{font-size:13px} /* a faixa da altitude */
}
/* --- 8. medidos no site AO VIVO, não em ficheiro local (2026-08-31) ---------
Lição desta ronda: uma corrida em file:// mede uma página incompleta, porque
o JavaScript não consegue ler os data/*.json e metade dos blocos nunca chega
a existir. Estes dois só apareceram quando o fiscal foi ao site publicado. */
/* as bolinhas do carrossel são traços de 24x3 de propósito — o desenho fica,
o que cresce é a área que o dedo acerta, num pseudo-elemento invisível */
/* O botão passa a ser o alvo de 44x44 — o traço é que é desenhado por dentro,
num ::after. Assim o dedo acerta e o desenho fica exactamente igual: um
pseudo-elemento invisível não chegava, porque o que se mede é a caixa do
botão. A fila compensa a largura com gap 0 (44 = 24 do traço + 20 de folga). */
.hdot{
width:44px;height:44px;background:transparent;
display:inline-flex;align-items:center;justify-content:center;
}
.hdot::after{
content:"";display:block;width:24px;height:3px;border-radius:99px;
background:rgba(255,255,255,.3);transition:background .25s,width .25s;
}
.hdot.is-on{background:transparent;width:44px}
.hdot.is-on::after{background:var(--red);width:42px}
.hero__dots{gap:0}
/* o nome curto da equipa nos cartões de jogo caía abaixo de 13px */
@media (max-width:860px){
.fx__team b{font-size:13px}
}
/* --- 9. o salto do primeiro ecrã (CLS 0.1011, tecto 0.1) -------------------
Medido: o cartão do próximo jogo nasce com 42px (só o rótulo) e passa a 262px
quando o JavaScript lhe põe os escudos e a contagem. Como o herói alinha o
texto por baixo, esse crescimento empurra o bloco todo 168px para cima — era
0,0975 dos 0,1011 de CLS, praticamente o salto inteiro.
Reserva-se a altura que ele vai mesmo ter. Se por algum motivo não houver
jogo marcado, a reserva é o tamanho de um cartão — não fica buraco estranho. */
.hero__body .nextmatch{min-height:262px}
@media (max-width:860px){
.hero__body .nextmatch{min-height:282px}
}
/* ============ entrada cinematográfica, trazida da v7 (2026-09-01) ============
Migrada peça a peça na missão gfc-migrar-v7-para-aprovado. Fica de fora,
de propósito, a "classificação na entrada" da v7: é secção nova e a ordem
proíbe acrescentar secções. */
/* ============ 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 ![]()
(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. */
/* Visivel desde o primeiro ecra. Antes nascia a opacity:0 e so acendia na etapa 4
(os ultimos 14% do scroll da abertura, ~3000px): quem abria a pagina nao via
contagem nenhuma, e no site aprovado ela estava a 847px. Com o acendimento por
etapas chegava a piscar — visivel a 0px, apagada a 400px, de volta a 900px. */
.cine__jogo{
position:absolute;left:50%;bottom:6vh;transform:translate(-50%,0);
width:min(92vw,560px);opacity:1;pointer-events:auto;
transition:opacity .5s .15s,transform .5s .15s;
}
/* ===== Contagem no CANTO, não ao meio (2026-09-01) =====
Ao meio do palco tapava o texto e a fotografia da abertura. No computador
passa para o canto superior esquerdo, encostada a seguir à régua da altitude,
estreita e discreta: fica no espaço morto do enquadramento e não cobre nada.
A linha longa da prova ("Campeonato de Portugal · Série B · Jornada 3") sai —
quem quiser o detalhe tem o cartão completo mais abaixo, na secção Dia de jogo. */
@media (min-width:901px){
.cine__jogo{
left:calc(var(--ruler-w) + 22px); right:auto; top:96px; bottom:auto;
transform:none; width:min(30vw,286px);
padding:12px 14px 14px; border-radius:6px;
}
.cine__jogo .nextmatch__top{gap:6px}
.cine__jogo .nextmatch__comp{display:none} /* linha da prova: longa demais para o canto */
.cine__jogo .nextmatch__meta{font-size:13px;margin-top:6px}
.cine__jogo .nextmatch__tie{gap:8px;margin-top:8px}
.cine__jogo .nm__team img{width:30px;height:30px}
.cine__jogo .nm__team b{font-size:13px}
.cine__jogo .countdown{gap:5px;margin-top:10px}
.cine__jogo .cd{min-width:0;flex:1 1 0;padding:6px 2px 5px;border-radius:6px}
.cine__jogo .cd b{font-size:18px}
.cine__jogo .cd span{font-size:9px;letter-spacing:.08em}
}
/* O cartao do proximo jogo (com a contagem) aparecia so na etapa 4 — os ultimos
14% do scroll da abertura, ou seja quase 3000px depois de abrir a pagina. No
site aprovado a contagem estava a 847px, a vista. Passa a acender na etapa 2
(a ~30% da abertura) e acompanha ate ao fim; o emblema continua a assentar so
na 4, que era o remate pretendido. 2026-09-01 */
/* O fundo escuro do cartao tinha de ir para o proprio .cine__jogo, nao para um
.nextmatch la dentro: o eco e feito com innerHTML, ou seja copia o CONTEUDO do
cartao e nao o elemento — o seletor .cine__jogo .nextmatch batia em 0 elementos
e o fundo nunca era pintado. Nao se via porque o cartao so acendia na etapa 4,
sobre o ultimo plano, que e escuro. Visivel desde o inicio, o texto ficava por
cima do relvado claro e era ilegivel. 2026-09-01 */
.cine__jogo{
background:rgba(10,10,10,.86);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.10);border-radius:8px;padding:14px 16px 16px;
}
.cine__jogo .nextmatch{margin:0;background:transparent}
.cine[data-etapa="4"] .cine__escudo{transform:translate(-50%,-118%) scale(.82)}
@media (max-width:520px){
/* Telemóvel: não há canto livre num ecrã estreito, por isso fica em baixo —
mas achatada. Sai a linha da prova e a data por extenso, ficando a etiqueta,
os dois emblemas e a contagem. Ocupa ~2/5 da altura que ocupava antes e
encosta ao fundo, deixando a fotografia respirar por cima. 2026-09-01 */
.cine__jogo{bottom:2vh;width:94vw;padding:10px 12px 12px;border-radius:6px}
.cine__jogo .nextmatch{padding:0}
.cine__jogo .nextmatch__comp{display:none}
.cine__jogo .nextmatch__meta{font-size:13px;margin-top:4px}
.cine__jogo .nextmatch__tie{margin-top:6px;gap:8px}
.cine__jogo .nm__team img{width:28px;height:28px}
.cine__jogo .nm__team b{font-size:13px}
.cine__jogo .countdown{margin-top:8px;gap:5px}
.cine__jogo .cd{padding:5px 2px 4px;border-radius:6px}
.cine__jogo .cd b{font-size:16px}
.cine__jogo .cd span{font-size:9px;letter-spacing:.06em}
/* 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)}
}
/* ============ blocos trazidos da referência (gfc-nivel-borehamwood, 2026-09-01) ============
Estudo em provas/estudo-borehamwood-2026-09-01.md. Copiámos a arrumação e o
ritmo do Boreham Wood, não o comércio (fora de scope). Valores já escritos na
escala do sistema: letra 13/16/18/26, espaços 4/8/12/16/24/32/48/64. */
/* --- cartões de jogo: próximo e último, com os dois emblemas --- */
.mcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.mcard{
background:var(--panel);border:1px solid var(--line);border-radius:4px;
padding:24px 16px 16px;display:flex;flex-direction:column;gap:16px;
position:relative;overflow:hidden;
}
.mcard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--red)}
.mcard--last::before{background:var(--gold)}
.mcard__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mcard__kind{
font-family:var(--font-display);font-size:16px;letter-spacing:var(--track-wide);
text-transform:uppercase;color:var(--paper);line-height:1;
}
.mcard__lado{
font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;
color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:4px 8px;
}
.mcard__tie{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.mcard__team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.mcard__team img{width:64px;height:64px;object-fit:contain}
.mcard__team b{
font-size:13px;line-height:1.3;color:var(--paper);font-weight:600;
overflow-wrap:anywhere;
}
.mcard__vs{
font-family:var(--font-display);font-size:18px;letter-spacing:var(--track-wide);
color:var(--muted);line-height:1;
}
.mcard__score{
font-family:var(--font-display);font-size:37px;line-height:1;color:var(--paper);
white-space:nowrap;
}
.mcard__meta{display:flex;flex-direction:column;gap:4px;text-align:center}
.mcard__when{font-size:13px;color:var(--paper)}
.mcard__comp{font-size:13px;color:var(--muted)}
.mcard__ctas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:auto}
.mcard__ctas .btn{min-height:44px;display:inline-flex;align-items:center}
.mcard--vazio{align-items:center;justify-content:center;color:var(--muted);font-size:16px}
/* --- classificação na entrada: compacta, o Guarda sempre visível --- */
.classtable--resumo{width:100%;border-collapse:collapse;font-size:13px}
.classtable--resumo th,.classtable--resumo td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left}
.classtable--resumo th{
font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);font-weight:600;
}
.classtable--resumo .ct__pos{width:36px;color:var(--muted);text-align:center}
.classtable--resumo .ct__pts{text-align:right;font-weight:700;color:var(--paper)}
.classtable--resumo .ct__team{display:flex;align-items:center;gap:8px;color:var(--paper)}
.classtable--resumo .ct__team img{width:24px;height:24px;object-fit:contain;flex:none}
.classtable--resumo tr.is-gfc{background:rgba(200,16,46,.14)}
.classtable--resumo tr.is-gfc .ct__pts{color:var(--red)}
.classtable--resumo .ct__salto td{text-align:center;color:var(--muted);padding:4px}
.ct__meta{margin-top:12px;font-size:13px;color:var(--muted)}
/* --- grelha de vídeos do clube --- */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.vid{
display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;
transition:border-color .18s ease,transform .18s ease;
}
.vid:hover,.vid:focus-visible{border-color:var(--red);transform:translateY(-2px)}
.vid__media{position:relative;display:block;aspect-ratio:16/9;background:#000}
.vid__media img{width:100%;height:100%;object-fit:cover;display:block}
.vid__play{
position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
width:56px;height:56px;border-radius:50%;background:rgba(200,16,46,.92);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
padding-left:4px;
}
.vid__body{display:flex;flex-direction:column;gap:4px;padding:16px}
.vid__body b{font-size:16px;line-height:1.35;color:var(--paper);font-weight:600}
.vid__meta{font-size:13px;color:var(--muted)}
/* --- patrocinadores: clube e prova, em blocos separados --- */
.sec-head--sub{margin-top:48px}
.sponsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;align-items:center}
.sponsgrid--prova{grid-template-columns:repeat(auto-fit,minmax(160px,220px));justify-content:center}
/* Placa CLARA por baixo dos logótipos, como a faixa .sstrip do rodapé já faz.
Medido a 2026-09-01: o logótipo do Grupo LuxEven é tinta preta e sobre o painel
escuro dava 1.03:1 de contraste — invisível. Sobre o claro passa a 100% da tinta
legível. Comparados os 7 logótipos nos dois fundos: 6 melhoram no claro e nenhum
piora (o JAA Market, que é um círculo branco, mantém o "JM Market" preto legível). */
.spons{
display:flex;align-items:center;justify-content:center;min-height:96px;padding:16px 20px;
background:var(--paper);border:1px solid var(--line);border-radius:4px;
transition:border-color .18s ease,transform .18s ease;
}
.spons:hover,.spons:focus-visible{transform:translateY(-2px)}
.spons:hover,.spons:focus-visible{border-color:var(--gold)}
.spons img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}
/* sem link oficial: fica o logótipo, sem ligação inventada (caso Next Player) */
.spons--nolink{cursor:default}
@media (max-width:600px){
.mcard__team img{width:48px;height:48px}
.mcard__score{font-size:26px}
.vid__play{width:48px;height:48px;font-size:16px}
.sponsgrid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}
/* etiqueta de tipo no cartão de notícia (gfc-nivel-borehamwood) */
.nw__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.nw__tipo{
font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;
padding:4px 8px;border-radius:2px;line-height:1;white-space:nowrap;
border:1px solid var(--line);color:var(--muted);
}
.nw__tipo--preview{border-color:var(--gold);color:var(--gold)}
.nw__tipo--report{border-color:var(--red);color:#ff5468}
.nw__tipo--club{border-color:var(--line);color:var(--muted)}
/* cartão promocional no menu (gfc-nivel-borehamwood): montra em vez de lista */
.navdrop__menu--card{display:flex;gap:16px;min-width:420px;padding:12px}
.navdrop__links{display:flex;flex-direction:column;min-width:150px}
.navcard{
display:flex;flex-direction:column;width:200px;border:1px solid var(--line);
border-radius:4px;overflow:hidden;text-decoration:none;flex:none;
transition:border-color .18s ease;
}
.navcard:hover,.navcard:focus-visible{border-color:var(--red)}
.navcard__media{display:block;aspect-ratio:16/10;overflow:hidden;background:#000}
.navcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.navcard__txt{display:flex;flex-direction:column;gap:4px;padding:12px}
.navcard__kicker{font-size:13px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--red)}
.navcard__txt b{font-size:16px;color:var(--paper);line-height:1.2}
@media (max-width:900px){
.navdrop__menu--card{display:block;min-width:0;padding:0}
.navcard{display:none}
}
/* Contagem regressiva dentro do cartão do próximo jogo (2026-09-01).
O site aprovado mostrava-a a 847px do topo — à vista logo. Na cópia o cartão
do herói passou para 4107px (a entrada cinematográfica ficou à frente) e o eco
dentro da abertura só ganha opacidade na etapa 4 do scroll: resultado, quem
chegava não via contagem nenhuma. Aqui fica no cartão de "Próximo jogo", que
aparece logo a seguir ao herói, e é alimentada pelo mesmo relógio (data-eco). */
.countdown--mcard{margin-top:0;justify-content:center;gap:8px}
.countdown--mcard .cd{min-width:62px;padding:8px 6px 6px;border-radius:8px}
.countdown--mcard .cd b{font-size:22px;line-height:1.1;display:block}
.countdown--mcard .cd span{font-size:13px;color:var(--muted)}
@media (max-width:600px){
.countdown--mcard{gap:6px;flex-wrap:nowrap;width:100%}
.countdown--mcard .cd{min-width:0;flex:1 1 0;padding:7px 2px 6px}
}
/* ============ pente fino visual (2026-09-01) ============ */
/* Nomes de equipa a transbordar do cartão de jogo. Medido a 390px:
"Alpendorada" pedia 114px numa caixa de 62px (26px de fora) e "Sertanense"
96px em 62px. A caixa é flex com min-width:0, mas o não tinha permissão
para quebrar, por isso derramava para cima do emblema do lado. */
.fx__team b{overflow-wrap:anywhere;hyphens:auto;max-width:100%}
.mcard__team b{overflow-wrap:anywhere;hyphens:auto;max-width:100%}
/* "Centrocampista" (ES) ficava 11px cortado na ficha do plantel a 390px:
pedia 146px e tinha 135px. O espaçamento entre letras é que não cabia —
aperta-se só nas etiquetas de posição longas, sem mexer no tamanho. */
.player figcaption span{overflow-wrap:anywhere;max-width:100%}
@media (max-width:430px){
.player figcaption span{letter-spacing:.06em}
}