/* =============================================================
   G.S. CASTANESE — foglio di stile
   Impianto ispirato ai siti dei club professionistici:
   barra risultati persistente, mega-menu, home editoriale,
   pannelli media full-bleed, partner wall, footer esteso.
   Identità cromatica dallo stemma: verde su nero con bias verde.
   ============================================================= */

/* --- 1. TOKEN ------------------------------------------------ */
:root{
  color-scheme: dark;

  --verde:        #0FA468;
  --verde-chiaro: #2ED38C;
  --verde-cupo:   #0A6B45;
  --verde-notte:  #05291C;

  --nero:   #06100B;
  --nero-2: #0A1610;
  --nero-3: #101F17;
  --linea:  #1B2F25;
  --linea-2:#2A4635;

  --calce:  #F2F6F3;
  --salvia: #94A99D;
  --salvia-scuro:#60746A;

  --ambra:  #F2B705;
  --rosso:  #E0453C;

  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --testo:   "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(18px, 4.5vw, 60px);
  --max:    1360px;

  --t-fast: .2s cubic-bezier(.4,0,.2,1);
  --t:      .42s cubic-bezier(.22,.8,.26,1);
  --t-slow: .85s cubic-bezier(.16,1,.3,1);
}

/* --- 2. BASE ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--nero); color:var(--calce);
  font-family:var(--testo); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.bloccato{ overflow:hidden; }

h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; line-height:.92;
  letter-spacing:.005em; text-transform:uppercase; text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--verde-chiaro); outline-offset:3px; }
::selection{ background:var(--verde); color:#04120B; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--nero); }
::-webkit-scrollbar-thumb{ background:var(--linea-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--verde-cupo); }

/* --- 3. UTILITY ---------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.num{ font-variant-numeric:tabular-nums; }

.sez{ padding-block:clamp(52px, 7vw, 92px); }
.sez--alt{ background:var(--nero-2); border-block:1px solid var(--linea); }

/* Testata di sezione: titolo a sinistra, "vedi tutto" a destra, filo sotto */
.testata{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; padding-bottom:18px; margin-bottom:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--linea);
}
.testata h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); }
.occhiello{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:10px;
  font-size:10.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--verde-chiaro);
}
.occhiello::before{ content:""; width:7px; height:7px; background:var(--verde); transform:skewX(-18deg); }
.testata p{ margin-top:12px; max-width:56ch; color:var(--salvia); font-size:.95rem; }

.vedi{
  display:inline-flex; align-items:center; gap:9px; padding-bottom:3px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--calce); border-bottom:1px solid var(--linea-2); transition:all var(--t-fast);
}
.vedi:hover{ color:var(--verde-chiaro); border-color:var(--verde-chiaro); }
.vedi:hover .frecc{ transform:translateX(4px); }
.frecc{ transition:transform var(--t-fast); display:inline-block; }

/* Pulsanti ---------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:14px 26px; font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; overflow:hidden; isolation:isolate;
  border:1px solid var(--verde); color:#04120B; background:var(--verde);
  clip-path:polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  transition:color var(--t-fast), border-color var(--t-fast);
}
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--calce);
  transform:translateX(-101%); transition:transform var(--t); }
.btn:hover::after{ transform:translateX(0); }
.btn:hover .frecc{ transform:translateX(4px); }
.btn--ghost{ background:transparent; color:var(--calce); border-color:var(--linea-2); }
.btn--ghost::after{ background:var(--verde); }
.btn--ghost:hover{ color:#04120B; border-color:var(--verde); }
.btn--nero{ background:#04120B; border-color:#04120B; color:var(--calce); }
.btn--nero::after{ background:var(--calce); }
.btn--nero:hover{ color:#04120B; }

/* Chip categoria ---------------------------------------------- */
.chip{
  display:inline-block; padding:5px 10px; font-size:9.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; background:var(--verde); color:#04120B;
}
.chip--muto{ background:var(--linea-2); color:var(--calce); }
.chip--ambra{ background:var(--ambra); color:#04120B; }

.grana{
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.045;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================
   4. PANNELLO MEDIA
   Segnaposto grafico al posto della fotografia: strisce della
   maglia, alone verde e filigrana dello stemma. Quando il club
   fornisce le foto basta passare `img` nei dati.
   ============================================================= */
.media{
  position:relative; overflow:hidden; background:
    radial-gradient(130% 100% at 72% 18%, rgba(15,164,104,.34), transparent 62%),
    linear-gradient(165deg, #0C1C14 0%, #050F0A 100%);
  isolation:isolate;
}
.media::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.028) 34px 68px);
}
.media__crest{
  position:absolute; right:-6%; bottom:-18%; width:62%; opacity:.1; z-index:-1;
}
.media__num{
  position:absolute; left:-2%; bottom:-14%; font-family:var(--display); font-weight:800;
  font-size:min(42vw, 230px); line-height:.8; color:rgba(255,255,255,.055);
  font-variant-numeric:tabular-nums; z-index:-1;
}
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media--16x9{ aspect-ratio:16/9; }
.media--4x5{ aspect-ratio:4/5; }
.scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,10,7,.92) 0%, rgba(4,10,7,.5) 38%, transparent 72%);
}

/* =============================================================
   5. BARRA UTILITÀ + NAVIGAZIONE + MEGA MENU
   ============================================================= */
.util{
  display:none; background:#040C08; border-bottom:1px solid var(--linea);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--salvia-scuro);
}
.util .wrap{ display:flex; align-items:center; justify-content:space-between; height:36px; gap:20px; }
.util b{ color:var(--salvia); font-weight:600; }
.util nav{ display:flex; gap:20px; }
.util a{ transition:color var(--t-fast); }
.util a:hover{ color:var(--verde-chiaro); }
@media (min-width:900px){ .util{ display:block; } }

.nav{
  position:sticky; top:0; z-index:100; background:rgba(6,16,11,.94);
  backdrop-filter:blur(16px); border-bottom:1px solid var(--linea);
  transition:box-shadow var(--t);
}
.nav.compatta{ box-shadow:0 20px 44px -30px #000; }
.nav .wrap{ display:flex; align-items:center; gap:22px; height:var(--h,88px); transition:height var(--t); }
.nav.compatta .wrap{ --h:66px; }

.marchio{ display:flex; align-items:center; gap:13px; flex:none; }
.marchio .crest{ width:auto; height:clamp(40px,4.6vw,54px); transition:height var(--t); }
.nav.compatta .marchio .crest{ height:40px; }
.marchio-testo{ display:none; line-height:1; }
.marchio-testo strong{ display:block; font-family:var(--display); font-size:1.26rem;
  letter-spacing:.02em; text-transform:uppercase; }
.marchio-testo span{ display:block; font-size:9px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--salvia-scuro); margin-top:3px; }
@media (min-width:580px){ .marchio-testo{ display:block; } }

/* voci di primo livello */
.menu{ display:none; align-items:center; gap:2px; margin-left:auto; height:100%; }
.menu > li{ height:100%; display:flex; align-items:center; }
.menu button, .menu a.voce{
  position:relative; height:100%; display:flex; align-items:center; gap:7px;
  padding:0 16px; font-size:11.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--salvia); transition:color var(--t-fast);
}
.menu button::after, .menu a.voce::after{
  content:""; position:absolute; left:16px; right:16px; bottom:0; height:2px;
  background:var(--verde); transform:scaleX(0); transform-origin:left; transition:transform var(--t);
}
.menu li:hover button, .menu button[aria-expanded="true"], .menu a.voce:hover,
.menu a.voce[aria-current="page"]{ color:var(--calce); }
.menu li:hover button::after, .menu button[aria-expanded="true"]::after,
.menu a.voce:hover::after, .menu a.voce[aria-current="page"]::after{ transform:scaleX(1); }
.caret{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform var(--t-fast); }
.menu button[aria-expanded="true"] .caret{ transform:rotate(225deg) translateY(-2px); }
@media (min-width:1080px){ .menu{ display:flex; } .nav-azioni{ display:flex; } }

.nav-azioni{ display:none; gap:10px; flex:none; margin-left:10px; }
.nav-azioni .btn{ padding:11px 18px; font-size:10.5px; }

/* pannello mega-menu */
.mega{
  position:absolute; left:0; right:0; top:100%; background:var(--nero-2);
  border-bottom:1px solid var(--linea); box-shadow:0 30px 60px -36px #000;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.mega.aperto{ opacity:1; visibility:visible; transform:none; }
.mega .wrap{ display:grid; gap:clamp(24px,4vw,56px); padding-block:clamp(28px,3.4vw,44px);
  grid-template-columns:1fr; height:auto; }
@media (min-width:900px){ .mega .wrap{ grid-template-columns:1.1fr 1fr 1.3fr; } }
.mega h4{ font-size:10.5px; font-family:var(--testo); font-weight:700; letter-spacing:.22em;
  color:var(--salvia-scuro); margin-bottom:16px; }
.mega-link{ display:block; padding:9px 0; font-family:var(--display); font-size:1.5rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--calce);
  border-bottom:1px solid var(--linea); transition:color var(--t-fast), padding-left var(--t-fast); }
.mega-link:hover{ color:var(--verde-chiaro); padding-left:8px; }
.mega-nota{ font-size:.86rem; color:var(--salvia); }
.mega-promo{ border:1px solid var(--linea); padding:20px; background:var(--nero-3); }
.mega-promo .media{ margin-bottom:16px; }

/* hamburger + sipario */
.hamburger{
  margin-left:auto; display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:44px; height:44px; border:1px solid var(--linea-2); transition:border-color var(--t-fast);
}
.hamburger:hover{ border-color:var(--verde); }
.hamburger i{ display:block; width:19px; height:1.5px; background:var(--calce);
  transition:transform var(--t), opacity var(--t-fast); }
.hamburger.aperto i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.aperto i:nth-child(2){ opacity:0; }
.hamburger.aperto i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (min-width:1080px){ .hamburger{ display:none; } }

/* menu a tutta pagina, ad accordion */
.sipario{
  position:fixed; inset:0; z-index:95; background:var(--nero);
  clip-path:inset(0 0 100% 0); transition:clip-path var(--t-slow);
  visibility:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.sipario.aperto{ clip-path:inset(0 0 0 0); visibility:visible; }
.sipario__in{
  min-height:100%; display:flex; flex-direction:column;
  padding:calc(var(--h-mob, 60px) + env(safe-area-inset-top) + 20px)
          max(var(--gutter), env(safe-area-inset-right))
          calc(28px + env(safe-area-inset-bottom))
          max(var(--gutter), env(safe-area-inset-left));
}
.acc__g{ border-bottom:1px solid var(--linea); }
.acc__t{
  width:100%; min-height:62px; display:flex; align-items:center; gap:14px;
  font-family:var(--display); font-size:1.9rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.02em; color:var(--calce); text-align:left;
  opacity:0; transform:translateY(16px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,.8,.26,1), color var(--t-fast);
  transition-delay:calc(var(--i,0) * 50ms);
}
.sipario.aperto .acc__t{ opacity:1; transform:none; }
.acc__t .ic{ color:var(--verde); width:.72em; height:.72em; }
.acc__p{
  margin-left:auto; width:13px; height:13px; position:relative; flex:none;
}
.acc__p::before, .acc__p::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:var(--salvia);
  transition:transform var(--t), background var(--t-fast);
}
.acc__p::after{ transform:rotate(90deg); }
.acc__t[aria-expanded="true"] .acc__p::before{ background:var(--verde); }
.acc__t[aria-expanded="true"] .acc__p::after{ transform:rotate(0); background:var(--verde); }
.acc__c{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows var(--t);
}
.acc__t[aria-expanded="true"] + .acc__c{ grid-template-rows:1fr; }
.acc__c > *{ min-height:0; }
.acc__c a{
  display:flex; align-items:center; min-height:50px; padding-left:36px;
  font-size:.95rem; color:var(--salvia); transition:color var(--t-fast);
}
.acc__c a:first-child{ padding-top:2px; }
.acc__c a:last-child{ padding-bottom:14px; }
.acc__c a:active, .acc__c a:hover{ color:var(--verde-chiaro); }

.sipario__piede{ margin-top:auto; padding-top:30px; }
.sipario__social{
  display:flex; align-items:center; gap:10px; min-height:48px; margin-top:18px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--salvia);
}
.sipario__social .ic{ color:var(--verde); }
.sip-match{
  border:1px solid var(--linea); background:var(--nero-2); padding:16px 18px;
}
.sip-match .et{ font-size:9.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--verde-chiaro); }
.sip-match .sfida{ display:flex; align-items:center; gap:10px; margin-top:12px;
  font-family:var(--display); font-size:1.15rem; font-weight:800; text-transform:uppercase; }
.sip-match .quando{ margin-top:10px; font-size:.82rem; color:var(--salvia); }

/* =============================================================
   6. HERO — l'apertura della home.
   A tutta pagina: lo stemma è il soggetto, il testo sta in basso
   a sinistra, la scheda della prossima partita sborda sotto.
   ============================================================= */
.hero{
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  min-height:clamp(540px, 78vh, 760px);
  padding-bottom:clamp(90px, 11vw, 130px);
  background:
    radial-gradient(120% 90% at 78% 28%, rgba(15,164,104,.4), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(10,107,69,.5), transparent 62%),
    linear-gradient(170deg, #0A1811 0%, #04100A 100%);
  border-bottom:1px solid var(--linea);
}
.hero__strisce{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 78px, rgba(255,255,255,.022) 78px 158px);
  mask-image:linear-gradient(180deg, transparent, #000 16%, #000 76%, transparent);
}
.hero__crest{
  position:absolute; right:-10%; top:46%; translate:0 -50%;
  width:min(58vw, 660px); opacity:.12; pointer-events:none; will-change:transform;
}
.hero .wrap{ position:relative; z-index:2; width:100%; }

.hero__sopra{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
  border:1px solid var(--linea-2); font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--salvia);
}
.pill b{ color:var(--verde-chiaro); font-weight:700; }

.hero h1{ font-size:clamp(3.2rem, 11vw, 9rem); letter-spacing:-.005em; }
.hero h1 .riga{ display:block; overflow:hidden; }
.hero h1 .riga > span{ display:block; transform:translateY(105%); }
.hero h1 em{ font-style:normal; color:var(--verde); }
.caricato .hero h1 .riga > span{
  transform:none; transition:transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.1s + var(--i) * .09s);
}
.hero__sotto{ margin-top:24px; max-width:50ch; color:var(--salvia); font-size:1.02rem;
  opacity:0; transform:translateY(14px); }
.caricato .hero__sotto{ opacity:1; transform:none; transition:all .75s ease .5s; }
.hero__cta{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap;
  opacity:0; transform:translateY(14px); }
.caricato .hero__cta{ opacity:1; transform:none; transition:all .75s ease .62s; }

/* =============================================================
   7. PROSSIMA PARTITA — un solo modulo, simmetrico,
   a cavallo fra hero e contenuto.
   ============================================================= */
.prossima{ position:relative; z-index:3; margin-top:clamp(-110px, -9vw, -70px); }
.prossima__card{ background:var(--nero-2); border:1px solid var(--linea);
  box-shadow:0 40px 80px -52px #000; }

.prossima__capo{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px clamp(18px,2.6vw,32px); border-bottom:1px solid var(--linea);
  background:var(--nero-3);
}
.prossima__capo .et{ font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--verde-chiaro); }
.prossima__capo .quando{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--salvia); }

.prossima__sfida{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(10px,3vw,40px); padding:clamp(26px,4vw,44px) clamp(18px,2.6vw,32px);
}
.sq{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.sq__nome{ font-family:var(--display); font-size:clamp(1.05rem,2.6vw,1.9rem);
  font-weight:800; text-transform:uppercase; line-height:1; }
.sq__cond{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--salvia-scuro); }
.vs{ font-family:var(--display); font-size:clamp(1.3rem,3.4vw,2rem); color:var(--salvia-scuro); }

.prossima__piede{
  display:grid; grid-template-columns:1fr; gap:1px; background:var(--linea);
  border-top:1px solid var(--linea);
}
@media (min-width:860px){ .prossima__piede{ grid-template-columns:1fr 1fr auto; } }
.pp-cella{ background:var(--nero-2); padding:18px clamp(18px,2.6vw,32px);
  display:flex; align-items:center; gap:13px; }
.pp-cella svg{ flex:none; color:var(--verde); }
.pp-cella strong{ display:block; font-size:.9rem; font-weight:600; }
.pp-cella span{ display:block; font-size:.8rem; color:var(--salvia); }

.cd{ display:flex; gap:clamp(8px,1.6vw,16px); }
.cd-c{ text-align:center; min-width:46px; }
.cd-c b{ display:block; font-family:var(--display); font-weight:800; font-size:1.9rem;
  line-height:1; font-variant-numeric:tabular-nums; }
.cd-c span{ display:block; margin-top:3px; font-size:8.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--salvia-scuro); }
.cd-s{ font-family:var(--display); font-size:1.5rem; color:var(--verde); line-height:1.15; }

/* mini scudo */
.scudo{
  width:clamp(46px,7vw,72px); height:clamp(46px,7vw,72px); flex:none; display:grid; place-items:center;
  font-family:var(--display); font-size:clamp(.85rem,1.8vw,1.2rem); font-weight:800;
  background:var(--nero-3); border:1px solid var(--linea-2); color:var(--salvia);
  clip-path:polygon(50% 0,100% 0,100% 70%,50% 100%,0 70%,0 0);
}
.scudo--noi{ background:var(--verde); border-color:var(--verde); color:#04120B; }
.scudo--ignoto{ border-style:dashed; }
.scudo--p{ width:30px; height:30px; font-size:.68rem; }

/* =============================================================
   7b. ULTIMI RISULTATI — cinque schede identiche in fila
   ============================================================= */
.risultati{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea);
  grid-auto-flow:column; grid-auto-columns:minmax(168px,1fr); overflow-x:auto; }
@media (min-width:980px){ .risultati{ grid-auto-columns:1fr; overflow:visible; } }
.ris{ background:var(--nero-2); padding:16px 18px; display:flex; flex-direction:column; gap:11px;
  transition:background var(--t-fast); }
.ris:hover{ background:var(--nero-3); }
.ris__g{ display:flex; align-items:center; gap:8px; font-size:9.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--salvia-scuro); }
.ris__r{ display:flex; align-items:center; gap:9px; font-size:.84rem; }
.ris__r b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ris__r.noi b{ color:var(--verde-chiaro); font-weight:700; }
.ris__r i{ margin-left:auto; font-style:normal; font-family:var(--display); font-size:1.25rem;
  font-weight:800; font-variant-numeric:tabular-nums; }
.ris__nota{ margin-top:auto; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ambra); }

/* =============================================================
   7c. ARTICOLO IN EVIDENZA
   ============================================================= */
.primo{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--linea);
  border:1px solid var(--linea); margin-bottom:clamp(18px,2.2vw,28px); }
@media (min-width:880px){ .primo{ grid-template-columns:1.25fr 1fr; } }
.primo__media{ position:relative; background:var(--nero); min-height:300px; overflow:hidden; }
.primo__media .media{ position:absolute; inset:0; transition:transform var(--t); }
.primo:hover .primo__media .media{ transform:scale(1.04); }
.primo__testo{ background:var(--nero-2); padding:clamp(24px,3.4vw,44px);
  display:flex; flex-direction:column; justify-content:center; gap:16px; }
.primo__testo h3{ font-size:clamp(1.5rem,3vw,2.4rem); transition:color var(--t-fast); }
.primo:hover h3{ color:var(--verde-chiaro); }
.primo__testo p{ color:var(--salvia); font-size:.95rem; }
.primo__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--salvia-scuro); }
/* =============================================================
   8. GRIGLIA NOTIZIE
   ============================================================= */
/* Tre colonne piene: gli articoli sono 3 in home e 6 in archivio,
   così nessuna riga resta con una colonna vuota. */
.griglia-news{ display:grid; gap:clamp(18px,2.2vw,28px); grid-template-columns:1fr; }
@media (min-width:761px){ .griglia-news{ grid-template-columns:repeat(3,1fr); } }
.news{ display:flex; flex-direction:column; gap:14px; }
.news .media{ transition:transform var(--t); }
.news .media-box{ overflow:hidden; }
.news:hover .media{ transform:scale(1.04); }
.news__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--salvia-scuro); }
.news h3{ font-size:1.32rem; transition:color var(--t-fast); }
.news:hover h3{ color:var(--verde-chiaro); }
.news p{ font-size:.9rem; color:var(--salvia); }
.news__fondo{ margin-top:auto; padding-top:4px; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--salvia-scuro); transition:color var(--t-fast); }
.news:hover .news__fondo{ color:var(--verde-chiaro); }
.news:hover .frecc{ transform:translateX(4px); }

/* =============================================================
   9. PARTITE
   ============================================================= */
.fixtures{ border:1px solid var(--linea); background:var(--nero-2); }
.gara{
  display:grid; grid-template-columns:62px 1fr auto; align-items:center;
  gap:clamp(12px,2.2vw,26px); padding:16px clamp(14px,2.4vw,26px);
  border-bottom:1px solid var(--linea); transition:background var(--t-fast);
}
.gara:last-child{ border-bottom:0; }
.gara:hover{ background:var(--nero-3); }
.gara__g{ font-family:var(--display); font-size:1.35rem; font-weight:800; color:var(--salvia-scuro);
  line-height:1; font-variant-numeric:tabular-nums; }
.gara__g span{ display:block; font-family:var(--testo); font-size:8.5px; font-weight:700;
  letter-spacing:.18em; margin-top:4px; }
.gara__nomi{ font-size:.98rem; }
.gara__nomi b{ font-weight:600; }
.gara__nomi .noi{ color:var(--verde-chiaro); font-weight:700; }
.gara__quando{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--salvia-scuro); margin-top:5px; }
.gara__marcatori{ margin-top:6px; font-size:.84rem; color:var(--salvia); }
.gara__nota{ margin-top:6px; font-size:.82rem; color:var(--ambra); }
.gara__esito{ display:flex; align-items:center; gap:13px; justify-self:end; }
.punteggio{ font-family:var(--display); font-size:1.6rem; font-weight:800; letter-spacing:.05em;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.stato{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--linea-2); padding:7px 12px; white-space:nowrap; color:var(--verde-chiaro); }
.stato--sosp{ color:var(--ambra); border-color:#5A4512; }

.esito{ display:inline-grid; place-items:center; width:19px; height:19px; flex:none;
  font-size:9.5px; font-weight:700; color:#04120B; }
.esito--V{ background:var(--verde); }
.esito--N{ background:var(--salvia-scuro); color:var(--calce); }
.esito--P{ background:var(--rosso); color:#fff; }
.esito--S{ background:var(--ambra); }

/* =============================================================
   10. CLASSIFICA — tabella classica
   ============================================================= */
.tab-box{ overflow-x:auto; border:1px solid var(--linea); background:var(--nero-2);
  -webkit-overflow-scrolling:touch; }
table.cl{ width:100%; border-collapse:collapse; }
table.cl--piena{ min-width:760px; }
table.cl th{
  position:sticky; top:0; z-index:1; background:var(--nero-3);
  padding:13px 8px; text-align:right; white-space:nowrap;
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--salvia-scuro); border-bottom:1px solid var(--linea);
}
table.cl th:nth-child(1){ text-align:center; width:46px; }
table.cl th:nth-child(2){ text-align:left; }
table.cl td{
  padding:0 8px; height:52px; text-align:right; white-space:nowrap;
  font-size:.92rem; font-variant-numeric:tabular-nums; color:var(--salvia);
  border-bottom:1px solid var(--linea);
}
table.cl tbody tr:last-child td{ border-bottom:0; }
table.cl tbody tr{ transition:background var(--t-fast); }
table.cl tbody tr:hover{ background:var(--nero-3); }

.cl-n{ text-align:center !important; font-family:var(--display); font-size:1.15rem;
  font-weight:700; color:var(--salvia-scuro); }
.cl-sq{ text-align:left !important; }
.cl-sq span{ display:flex; align-items:center; gap:11px; color:var(--calce); font-weight:500; }
.cl-pt{ font-family:var(--display); font-size:1.35rem; font-weight:800; color:var(--calce);
  padding-right:14px !important; }
.dr-pos{ color:var(--verde-chiaro); }
.dr-neg{ color:#C9736D; }

tr.noi{ background:rgba(15,164,104,.12) !important;
  box-shadow:inset 3px 0 0 var(--verde); }
tr.noi td{ color:var(--calce); }
tr.noi .cl-n{ color:var(--verde-chiaro); }
tr.noi .cl-sq span{ font-family:var(--display); font-size:1.22rem; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; }
tr.noi .cl-pt{ color:var(--verde-chiaro); }

/* forma: ultime cinque, dalla più recente */
.forma{ display:flex; gap:4px; justify-content:flex-end; }
.forma .esito{ width:18px; height:18px; font-size:9px; cursor:default; }

/* mini scudo dentro la tabella */
.scudo--t{ width:26px; height:26px; font-size:.6rem; }

/* =============================================================
   11. SQUADRA
   ============================================================= */
.filtri{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:28px; }
.filtri button{
  padding:9px 18px; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--salvia); border:1px solid var(--linea-2);
  transition:all var(--t-fast);
}
.filtri button:hover{ color:var(--calce); border-color:var(--salvia-scuro); }
.filtri button[aria-pressed="true"]{ background:var(--verde); border-color:var(--verde); color:#04120B; }

.rosa{ display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%,210px), 1fr)); }
.gioc{ display:block; }
.gioc .media-box{ overflow:hidden; position:relative; }
.gioc .media{ transition:transform var(--t); }
.gioc:hover .media{ transform:scale(1.05); }
.gioc__n{
  position:absolute; right:10px; top:4px; z-index:2; font-family:var(--display); font-weight:800;
  font-size:4.6rem; line-height:1; color:rgba(242,246,243,.16); font-variant-numeric:tabular-nums;
  transition:color var(--t);
}
.gioc:hover .gioc__n{ color:rgba(46,211,140,.55); }
.gioc__under{ position:absolute; left:10px; top:10px; z-index:2; }
.gioc__info{ padding-top:13px; border-top:2px solid var(--verde); margin-top:0; }
.gioc__ruolo{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--verde-chiaro); margin-bottom:6px; }
.gioc__nome{ font-family:var(--display); line-height:.95; }
.gioc__nome span{ display:block; font-size:.88rem; font-weight:600; color:var(--salvia);
  letter-spacing:.06em; text-transform:uppercase; }
.gioc__nome strong{ display:block; font-size:1.6rem; font-weight:800; text-transform:uppercase; }
.gioc__dati{ display:flex; gap:14px; margin-top:10px; font-size:10px; color:var(--salvia-scuro);
  letter-spacing:.08em; text-transform:uppercase; }
.gioc__dati b{ color:var(--calce); font-weight:700; font-variant-numeric:tabular-nums; }

/* binario orizzontale in home */
.binario{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px, 230px);
  gap:clamp(14px,1.8vw,22px); overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.binario > *{ scroll-snap-align:start; }

/* =============================================================
   12. PALMARÈS / STORIA / NUMERI
   ============================================================= */
.numeri{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,190px),1fr)); }
.numero{ background:var(--nero); padding:clamp(24px,3.4vw,38px) clamp(18px,2.4vw,28px); }
.numero b{ display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,6vw,4rem); line-height:.9; color:var(--verde); font-variant-numeric:tabular-nums; }
.numero span{ display:block; margin-top:10px; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--salvia); }
.numero em{ display:block; margin-top:7px; font-style:normal; font-size:.84rem; color:var(--salvia-scuro); }

.split{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; } }
.split__media{ background:var(--nero); min-height:320px; position:relative; }
.split__media .media{ position:absolute; inset:0; }
.split__testo{ background:var(--nero); padding:clamp(26px,4vw,52px); display:flex;
  flex-direction:column; justify-content:center; gap:18px; }

.timeline{ display:flex; flex-direction:column; }
.tl{ display:grid; grid-template-columns:92px 1fr; gap:clamp(14px,3vw,36px);
  padding:24px 0; border-top:1px solid var(--linea); }
.tl:last-child{ border-bottom:1px solid var(--linea); }
.tl-anno{ font-family:var(--display); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800;
  color:var(--verde); line-height:1; font-variant-numeric:tabular-nums; }
.tl h3{ font-size:1.3rem; margin-bottom:7px; }
.tl p{ color:var(--salvia); max-width:64ch; font-size:.93rem; }

.scheda-lista{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,230px),1fr)); }
.scheda{ background:var(--nero-2); padding:24px 22px; }
.scheda span{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde-chiaro); margin-bottom:7px; }
.scheda strong{ display:block; font-family:var(--display); font-size:1.32rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; }
.scheda em{ display:block; margin-top:9px; font-style:normal; font-size:.84rem; color:var(--salvia-scuro); }

/* =============================================================
   13. BANDA CTA + PARTNER WALL
   ============================================================= */
.banda{ position:relative; overflow:hidden; background:var(--verde); color:#04120B;
  padding:clamp(40px,6vw,76px) 0; }
.banda::before{ content:""; position:absolute; inset:-40% -10%;
  background:repeating-linear-gradient(118deg, rgba(0,0,0,.07) 0 38px, transparent 38px 100px); }
.banda .wrap{ position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap; }
.banda h2{ font-size:clamp(1.9rem,5vw,3.6rem); max-width:18ch; }
.banda p{ margin-top:12px; max-width:48ch; font-size:.96rem; color:#06301F; }

.partner-tier + .partner-tier{ margin-top:32px; }
.partner-tier h4{ font-family:var(--testo); font-size:9.5px; font-weight:700; letter-spacing:.22em;
  color:var(--salvia-scuro); margin-bottom:14px; }
.partner-muro{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,150px),1fr)); }
.partner-el{ background:var(--nero-2); min-height:88px; display:grid; place-items:center;
  padding:16px; text-align:center; font-family:var(--display); font-size:1.05rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--salvia-scuro);
  transition:color var(--t-fast), background var(--t-fast); }
.partner-el:hover{ color:var(--verde-chiaro); background:var(--nero-3); }
.partner-tier--primo .partner-el{ min-height:130px; font-size:1.4rem; }

/* =============================================================
   14. FORM + FOOTER
   ============================================================= */
.form-riga{ display:flex; gap:9px; flex-wrap:wrap; margin-top:22px; }
.form-riga input{ flex:1 1 240px; padding:14px 16px; background:var(--nero-2); color:var(--calce);
  border:1px solid var(--linea-2); font:inherit; font-size:.9rem; transition:border-color var(--t-fast); }
.form-riga input::placeholder{ color:var(--salvia-scuro); }
.form-riga input:focus{ border-color:var(--verde); outline:none; }
.esito-form{ margin-top:12px; font-size:.85rem; min-height:1.2em; color:var(--verde-chiaro); }

.mappa{ position:relative; min-height:300px; border:1px solid var(--linea); background:var(--nero-2);
  overflow:hidden; display:grid; place-items:center; }
.mappa::before{ content:""; position:absolute; inset:0; opacity:.45;
  background:repeating-linear-gradient(0deg, transparent 0 39px, var(--linea) 39px 40px),
             repeating-linear-gradient(90deg, transparent 0 39px, var(--linea) 39px 40px); }
.mappa-pin{ position:relative; text-align:center; }
.mappa-pin .punto{ width:15px; height:15px; margin:0 auto 13px; background:var(--verde);
  border-radius:50%; box-shadow:0 0 0 0 rgba(15,164,104,.55); animation:pulsa 2.4s infinite; }
@keyframes pulsa{ 70%{ box-shadow:0 0 0 24px rgba(15,164,104,0); } 100%{ box-shadow:0 0 0 0 rgba(15,164,104,0); } }
.mappa-pin strong{ font-family:var(--display); font-size:1.25rem; text-transform:uppercase; }
.mappa-pin span{ display:block; font-size:.83rem; color:var(--salvia); margin-top:4px; }

.due-col{ display:grid; gap:clamp(22px,4vw,46px); grid-template-columns:1fr; }
@media (min-width:860px){ .due-col{ grid-template-columns:1fr 1fr; } }

.piede{ border-top:1px solid var(--linea); background:#040C08; padding-top:clamp(44px,5vw,70px); }
.piede-griglia{ display:grid; gap:clamp(26px,3.4vw,44px); grid-template-columns:1fr; padding-bottom:42px; }
@media (min-width:700px){ .piede-griglia{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .piede-griglia{ grid-template-columns:1.7fr 1fr 1fr 1fr; } }
.piede h4{ font-family:var(--testo); font-size:9.5px; font-weight:700; letter-spacing:.22em;
  color:var(--salvia-scuro); margin-bottom:15px; }
.piede li + li{ margin-top:9px; }
.piede li a, .piede address{ font-size:.88rem; color:var(--salvia); font-style:normal;
  transition:color var(--t-fast); }
.piede li a:hover{ color:var(--verde-chiaro); }
.piede-marchio{ display:flex; gap:16px; align-items:flex-start; }
.piede-marchio p{ margin-top:10px; color:var(--salvia); font-size:.87rem; max-width:38ch; }
.piede-basso{ border-top:1px solid var(--linea); padding-block:20px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:10.5px;
  letter-spacing:.1em; color:var(--salvia-scuro); }

/* =============================================================
   15. AVVISI SUI DATI SEGNAPOSTO
   ============================================================= */
.avviso{
  border:1px solid var(--linea-2); border-left:3px solid var(--ambra); background:var(--nero-2);
  padding:15px 18px; margin-bottom:26px; font-size:.86rem; color:var(--salvia); line-height:1.6;
}
.avviso strong{ color:var(--calce); }
.avviso code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.85em;
  background:var(--nero-3); padding:2px 6px; color:var(--verde-chiaro); }
.fonte-nota{ font-size:.86rem; color:var(--salvia); }
.fonte-nota a{ color:var(--verde-chiaro); border-bottom:1px solid var(--verde-cupo); }
.fonte-nota a:hover{ border-bottom-color:var(--verde-chiaro); }

/* =============================================================
   16. VISTE + RIVELAZIONI
   ============================================================= */
[data-vista]{ display:none; }
[data-vista].attiva{ display:block; animation:entra .45s cubic-bezier(.22,.8,.26,1) both; }
@keyframes entra{ from{ opacity:0; transform:translateY(12px); } }

.js [data-rivela]{ opacity:0; transform:translateY(22px); }
.js [data-rivela].visibile{ opacity:1; transform:none;
  transition:opacity .65s ease, transform .75s cubic-bezier(.22,.8,.26,1);
  transition-delay:calc(var(--d,0) * 65ms); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js [data-rivela]{ opacity:1 !important; transform:none !important; }
  .sipario a{ opacity:1 !important; transform:none !important; }
}

/* il logo ufficiale sostituisce lo stemma disegnato */
img.crest{ width:auto; object-fit:contain; }

/* =============================================================
   17. ICONE
   Set unico, tratto 1.8, stessa famiglia visiva in tutto il sito.
   ============================================================= */
.ic{ width:1em; height:1em; flex:none; stroke:currentColor; fill:none;
     stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ic--g{ width:1.25em; height:1.25em; }
.occhiello .ic{ color:var(--verde); }

/* =============================================================
   18. CREDITO FOTOGRAFICO
   ============================================================= */
.credito{
  position:absolute; right:0; bottom:0; z-index:3;
  padding:5px 9px; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(242,246,243,.72); background:rgba(4,10,7,.72); backdrop-filter:blur(4px);
}

/* =============================================================
   19. BARRA DI AVANZAMENTO LETTURA
   ============================================================= */
.progresso{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(0); transform-origin:left; background:var(--verde);
  transition:transform .1s linear;
}

/* =============================================================
   20. RIFINITURE
   ============================================================= */
/* le schede si sollevano appena al passaggio */
.ris, .news, .gioc, .primo{ transition:transform var(--t), background var(--t-fast); }
.ris:hover, .news:hover, .gioc:hover{ transform:translateY(-3px); }

/* la foto resta nitida, lo zoom è contenuto */
.media-box, .primo__media{ overflow:hidden; background:var(--nero-3); }

/* overlay statistiche sulla scheda giocatore */
.gioc__velo{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:14px;
  background:linear-gradient(to top, rgba(4,10,7,.94), transparent);
  display:flex; gap:16px; opacity:0; transform:translateY(8px);
  transition:opacity var(--t), transform var(--t);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--salvia);
}
.gioc:hover .gioc__velo{ opacity:1; transform:none; }
.gioc__velo b{ color:var(--verde-chiaro); font-weight:700; }

/* la riga risultato invita alla cronaca */
a.ris::after{
  content:"Cronaca ↗"; position:absolute; right:14px; top:14px;
  font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--verde-chiaro);
  opacity:0; transition:opacity var(--t-fast);
}
a.ris{ position:relative; }
a.ris:hover::after{ opacity:1; }

/* lo stemma respira una volta al caricamento */
@keyframes battito{ 0%{ transform:scale(.96); opacity:0 } 100%{ transform:none; opacity:1 } }
.caricato .marchio .crest{ animation:battito .7s cubic-bezier(.22,.8,.26,1) both; }

/* Quando l'occhiello porta un'icona, il quadratino è di troppo */
.occhiello:has(svg.ic)::before{ display:none; }

/* =============================================================
   21. MOBILE
   Il telefono è il primo schermo per un sito di calcio: qui si
   guarda il risultato la domenica sera. Tutto quello che sotto
   dipende dal passaggio del mouse viene reso sempre visibile,
   i bersagli tattili salgono a 44px e le liste lunghe diventano
   caroselli che scorrono col pollice.
   ============================================================= */

/* --- aree sicure (iPhone con notch / barra gesti) ------------ */
.wrap{
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}
.piede-basso{ padding-bottom:calc(20px + env(safe-area-inset-bottom)); }

/* --- l'hero segue l'altezza reale del browser mobile --------- */
.hero{ min-height:clamp(540px, 78vh, 760px); }
@supports (height: 100svh){
  .hero{ min-height:clamp(460px, 74svh, 760px); }
}

@media (max-width:1079px){
  /* i pannelli del mega-menu non servono: qui c'è l'accordion */
  .mega{ display:none; }

  .nav .wrap{ --h:60px; }
  .nav.compatta .wrap{ --h:56px; }
  .marchio .crest{ height:36px; }
  .nav.compatta .marchio .crest{ height:34px; }
  .marchio-testo strong{ font-size:1.05rem; }
  .marchio-testo span{ font-size:8px; letter-spacing:.22em; }
}

@media (max-width:760px){
  /* --- tipografia ------------------------------------------- */
  .hero h1{ font-size:clamp(2.7rem, 13vw, 4.4rem); }
  .hero__sotto{ font-size:.95rem; margin-top:20px; }
  .testata h2{ font-size:clamp(1.8rem, 8.5vw, 2.6rem); }
  .testata{ padding-bottom:14px; margin-bottom:22px; }

  /* lo stemma dell'hero si sposta in alto e si alleggerisce,
     così non finisce mai dietro al titolo */
  .hero__crest{ width:86vw; right:-26vw; top:30%; opacity:.09; }
  .hero{ padding-bottom:96px; }
  .hero__sopra{ gap:7px; margin-bottom:20px; }
  .pill{ padding:6px 11px; font-size:9px; letter-spacing:.16em; }

  /* --- bersagli tattili ------------------------------------- */
  .vedi{ min-height:44px; align-items:center; }
  .marchio{ min-height:44px; }
  .btn{ min-height:48px; padding:14px 22px; }
  .util a, .piede li a{ display:inline-flex; align-items:center; min-height:40px; }
  .filtri button{ min-height:44px; }

  /* --- prossima partita ------------------------------------- */
  .prossima__capo{ padding:13px 16px; gap:6px; }
  .prossima__capo .et{ font-size:9px; }
  .prossima__sfida{ padding:26px 14px; gap:8px; }
  .sq{ gap:10px; }
  .sq__nome{ font-size:1.02rem; line-height:1.1; }
  .scudo{ width:54px; height:54px; font-size:.78rem; }
  .prossima__piede{ grid-template-columns:1fr; }
  .pp-cella{ padding:15px 16px; }
  /* il countdown prende tutta la riga e si centra */
  .pp-cella:last-child{ justify-content:center; }
  .cd-c b{ font-size:2.1rem; }
  .cd-c{ min-width:52px; }

  /* --- caroselli: scorrono col pollice, a scatti ------------ */
  .risultati, .binario{ scroll-snap-type:x mandatory; scroll-padding-left:var(--gutter); }
  .binario{
    margin-inline:calc(max(var(--gutter), env(safe-area-inset-left)) * -1);
    padding-inline:max(var(--gutter), env(safe-area-inset-left));
    grid-auto-columns:minmax(168px, 44vw);
  }
  .risultati{ grid-auto-columns:minmax(156px, 56vw); }
  .ris{ scroll-snap-align:start; }
  /* barra di scorrimento sottile al posto di quella di sistema */
  .risultati::-webkit-scrollbar, .binario::-webkit-scrollbar,
  .tab-box::-webkit-scrollbar{ height:3px; }
  .risultati::-webkit-scrollbar-thumb, .binario::-webkit-scrollbar-thumb,
  .tab-box::-webkit-scrollbar-thumb{ background:var(--verde-cupo); }

  /* --- articolo in evidenza --------------------------------- */
  .primo__media{ min-height:0; aspect-ratio:16/10; }
  .primo__testo{ padding:22px 18px 26px; gap:13px; }
  .primo__testo h3{ font-size:1.45rem; }

  /* --- schede notizia --------------------------------------- */
  .news h3{ font-size:1.2rem; }
  .griglia-news{ gap:22px; }

  /* --- calendario ------------------------------------------- */
  .gara{ grid-template-columns:48px 1fr; gap:12px; padding:14px 16px; row-gap:10px; }
  .gara__esito{ grid-column:2; justify-self:start; }
  .gara__g{ font-size:1.15rem; }
  .gara__nomi{ font-size:.92rem; }

  /* --- classifica: vedi §21b per le colonne fisse ------------ */
  table.cl--piena{ min-width:640px; }
  table.cl th, table.cl td{ height:46px; font-size:.86rem; padding:0 6px; }
  table.cl th:nth-child(1), table.cl td:nth-child(1){
    position:sticky; left:0; z-index:2; width:38px; background:var(--nero-2);
  }
  table.cl th:nth-child(2), table.cl td:nth-child(2){
    position:sticky; left:38px; z-index:2; background:var(--nero-2);
    box-shadow:9px 0 10px -9px #000;
  }
  table.cl thead th:nth-child(1), table.cl thead th:nth-child(2){ background:var(--nero-3); z-index:3; }
  /* la riga della Castanese resta leggibile anche da ferma */
  tr.noi td:nth-child(1), tr.noi td:nth-child(2){ background:#0D2318; }
  tr.noi .cl-sq span{ font-size:1.05rem; }
  .cl-sq span{ gap:8px; }
  .scudo--t{ width:22px; height:22px; font-size:.52rem; }
  .forma .esito{ width:16px; height:16px; font-size:8px; }

  /* --- rosa -------------------------------------------------- */
  .rosa{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .gioc__n{ font-size:3.2rem; right:7px; }
  .gioc__nome strong{ font-size:1.25rem; }
  .gioc__nome span{ font-size:.78rem; }
  .gioc__info{ padding-top:10px; }

  /* --- storia, schede, partner ------------------------------ */
  .tl{ grid-template-columns:1fr; gap:6px; padding:20px 0; }
  .tl-anno{ font-size:1.5rem; }
  .split__media{ min-height:220px; }
  .split__testo{ padding:24px 18px; }
  .numeri{ grid-template-columns:repeat(2,1fr); }
  .numero{ padding:22px 18px; }
  .numero b{ font-size:2.4rem; }
  .partner-tier--primo .partner-el{ min-height:104px; font-size:1.15rem; }
  .banda{ padding:38px 0; }
  .banda h2{ font-size:2.1rem; }
  .due-col{ gap:40px; }
  .sez{ padding-block:46px; }
}

@media (max-width:400px){
  .marchio-testo span{ display:none; }
  .scudo{ width:48px; height:48px; }
  .cd-c b{ font-size:1.8rem; }
  .cd-c{ min-width:44px; }
  .cd{ gap:6px; }
}

/* --- niente mouse: tutto ciò che era in hover diventa fisso --- */
@media (hover: none){
  .gioc__velo{ opacity:1; transform:none; }
  a.ris::after{ opacity:1; }
  .ris:hover, .news:hover, .gioc:hover, .primo:hover .primo__media .media,
  .news:hover .media, .gioc:hover .media{ transform:none; }
  .news:active h3, .ris:active, .gioc:active{ opacity:.75; }
  /* la riga della tabella non ha stato hover: resta neutra */
  table.cl tbody tr:hover{ background:transparent; }
  tr.noi:hover{ background:rgba(15,164,104,.12) !important; }
}


/* =============================================================
   21b. CLASSIFICA SU SCHERMI STRETTI E TABLET
   La tabella scorre in orizzontale, ma posizione e nome squadra
   restano agganciati a sinistra: si confrontano i numeri senza
   perdere di vista a chi appartengono.
   ============================================================= */
@media (max-width:900px){
  table.cl th:nth-child(1), table.cl td:nth-child(1){
    position:sticky; left:0; z-index:2; width:38px; background:var(--nero-2);
  }
  table.cl th:nth-child(2), table.cl td:nth-child(2){
    position:sticky; left:38px; z-index:2; background:var(--nero-2);
    box-shadow:9px 0 10px -9px #000;
  }
  table.cl thead th:nth-child(1), table.cl thead th:nth-child(2){
    background:var(--nero-3); z-index:3;
  }
  tr.noi td:nth-child(1), tr.noi td:nth-child(2){ background:#0D2318; }
}

/* =============================================================
   22. CARTELLINI
   Un quadratino per sanzione, come sul referto: si contano a
   colpo d'occhio senza leggere un numero.
   ============================================================= */
.cart-box{ display:inline-flex; gap:3px; align-items:center; margin-left:auto; }
.cart{ display:block; width:7px; height:10px; }
.cart--g{ background:var(--ambra); }
.cart--r{ background:var(--rosso); }

/* conteggio dentro i filtri di reparto */
.filtri button em{
  font-style:normal; margin-left:7px; padding:1px 5px; font-size:9.5px;
  background:var(--linea-2); color:var(--salvia);
}
.filtri button[aria-pressed="true"] em{ background:rgba(0,0,0,.22); color:#04120B; }

/* il velo sulle foto ospita anche i cartellini */
.gioc__velo{ align-items:center; }

/* etichetta sopra la cifra quando non è un numero di maglia */
.gioc__n em{
  display:block; font-family:var(--testo); font-style:normal; font-size:8.5px;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  text-align:right; margin-bottom:-6px; color:rgba(242,246,243,.3);
}
.gioc:hover .gioc__n em{ color:rgba(46,211,140,.6); }

/* =============================================================
   23. STEMMA UFFICIALE
   Il PNG prende il posto del vettore di riserva: stesse misure,
   nessun salto di layout.
   ============================================================= */
img.crest{ width:auto; object-fit:contain; }
img.hero__crest{ height:auto; }
img.media__crest{ height:auto; }