/* ==========================================================================
   Forza Barcelona — sezioni della home
   Dipende dai token di app.css. Caricato solo dalla home.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — carosello a tutto schermo
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--nit); overflow: hidden; isolation: isolate;
}

.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); pointer-events: none; }
.hero-slide[data-active] { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 9s linear; }
.hero-slide[data-active] img { transform: scale(1); }

/* Velatura: leggibilità del testo + stacco per le card agenda, che risalgono
   sopra il fondo dell'hero con margin-top negativo (vedi .agenda-grid).
   Con foto vere al posto dei segnaposto scuri serve una base molto più densa. */
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(6,2,1,.95) 0%,
      rgba(6,2,1,.88) 16%,
      rgba(6,2,1,.66) 34%,
      rgba(6,2,1,.36) 54%,
      rgba(6,2,1,.12) 74%,
      rgba(6,2,1,.34) 100%);
}

/* Rail delle cinque barre lungo il fianco sinistro: lo stemma che tiene la pagina */
.hero-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; display: flex; align-items: stretch; gap: 5px; padding-left: 14px; opacity: .5; }
.hero-rail i { display: block; width: 3px; border-radius: var(--r-pill); background: linear-gradient(to bottom, transparent, var(--or) 35%, var(--or) 65%, transparent); }
.hero-rail i:nth-child(odd) { opacity: .45; }
@media (max-width: 900px) { .hero-rail { display: none; } }

.hero-content {
  position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gut) clamp(9rem, 16vw, 12rem); color: var(--blanc);
}
.hero-copy { max-width: min(1020px, 74vw); }
@media (max-width: 900px) { .hero-copy { max-width: 100%; } }
.hero h1 { text-shadow: 0 6px 34px rgba(0,0,0,.45); }
.hero h1 em { font-style: normal; color: var(--or); }
.hero-sub { margin: 1.2rem 0 1.9rem; font-size: clamp(1rem, 1.4vw, 1.18rem); color: rgba(255,255,255,.8); max-width: 46ch; }

.hero-ctrl {
  position: absolute; left: 0; right: 0; bottom: clamp(6.2rem, 12vw, 8.4rem);
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: flex; align-items: center; gap: 1.4rem;
}
.hero-dots { display: flex; gap: 8px; align-items: center; }
.hero-dots button {
  width: 26px; height: 5px; padding: 0; border: 0; cursor: pointer; border-radius: var(--r-pill);
  background: rgba(255,255,255,.32);
  transition: background .3s var(--ease), width .3s var(--ease);
}
.hero-dots button[aria-current="true"] { background: var(--or); width: 52px; }
.hero-dots button:hover { background: rgba(255,255,255,.65); }
.hero-count { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .16em; color: rgba(255,255,255,.55); }
.hero-count b { color: var(--blanc); }

/* --------------------------------------------------------------------------
   AGENDA — card dei prossimi eventi, in vetro, sovrapposte alla hero
   -------------------------------------------------------------------------- */
.agenda { background: var(--os); padding: 0 0 var(--sec-y); }
.agenda-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.4rem);
  margin-top: clamp(-6.5rem, -9vw, -5rem); position: relative; z-index: 5;
}
.agenda-grid--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 1100px) { .agenda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .agenda-grid--flat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .agenda-grid--flat { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .agenda-grid { grid-template-columns: 1fr; margin-top: -4.5rem; } }

.mcard {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--nit);
  border-radius: var(--r-lg); background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--glass-brd);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--glass-brd); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mcard { background: rgba(255,255,255,.95); }
}

/* --- Temi delle card partita: stesso schema delle tre card di "Resultados"
   (granate = último partido · bianco = últimos resultados · grigio maglia = clasificación).
   Il tema arriva dal dato della squadra (config/content/fixtures.js). --- */
.mcard--granate, .mcard--pissarra { color: var(--blanc); }
.mcard--granate { background: linear-gradient(150deg, var(--granate) 0%, var(--granate-fosc) 100%); }
.mcard--pissarra { background: linear-gradient(150deg, var(--pissarra) 0%, var(--pissarra-fosc) 100%); }

.mcard--granate .mcard-cat, .mcard--pissarra .mcard-cat { background: rgba(0,0,0,.22); }
.mcard--granate .mcard-when, .mcard--pissarra .mcard-when { color: var(--blanc); }
.mcard--granate .mcard-when .hour, .mcard--pissarra .mcard-when .hour { color: rgba(255,255,255,.62); }
.mcard--granate .mcard-vs, .mcard--pissarra .mcard-vs { color: rgba(255,255,255,.7); }
.mcard--granate .mcard-venue, .mcard--pissarra .mcard-venue {
  color: rgba(255,255,255,.66); border-top-color: rgba(255,255,255,.18);
}
.mcard--granate .mcard-venue svg, .mcard--pissarra .mcard-venue svg { fill: rgba(255,255,255,.7); }
.mcard--granate .mcard-venue a:hover, .mcard--pissarra .mcard-venue a:hover { color: var(--blanc); border-color: var(--blanc); }
.mcard--granate .mcard-comp, .mcard--pissarra .mcard-comp { color: var(--or-clar); }
.mcard--granate .mcard-count, .mcard--pissarra .mcard-count { border-top-color: rgba(255,255,255,.18); }
.mcard--granate .cd-lab, .mcard--pissarra .cd-lab { color: rgba(255,255,255,.55); }
.mcard--granate .cd-unit b, .mcard--pissarra .cd-unit b { color: var(--blanc); }
.mcard--granate .cd-unit i, .mcard--pissarra .cd-unit i { color: rgba(255,255,255,.5); }
.mcard--granate .cd-sep, .mcard--pissarra .cd-sep { color: rgba(255,255,255,.45); }
/* Lo scudo neutro dell'avversario è chiaro: su fondo scuro va schiarito il contorno */
.mcard--granate .mcard-side img[src$="escudo-rival.svg"],
.mcard--pissarra .mcard-side img[src$="escudo-rival.svg"] { opacity: .9; }

/* Clasificación: stesso grigio maglia delle card futsal */
.rcard.rcard--table, .section--os .rcard.rcard--table {
  background: linear-gradient(150deg, var(--pissarra) 0%, var(--pissarra-fosc) 100%); color: var(--blanc);
}
.rcard--table .rcard-title { color: rgba(255,255,255,.72); }
.rcard--table .ttable th { color: rgba(255,255,255,.5); border-bottom-color: rgba(255,255,255,.2); }
.rcard--table .ttable td { border-bottom-color: rgba(255,255,255,.12); }
.rcard--table .ttable tr.is-us td { background: rgba(255,255,255,.12); }
.rcard--table .ttable tr.is-us td:first-child { box-shadow: inset 3px 0 0 var(--or); }

.mcard-cat {
  background: var(--granate); color: var(--blanc); padding: .66rem 1.15rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .06em; line-height: 1.2;
  display: flex; align-items: baseline; justify-content: space-between; gap: .7rem;
}
.mcard-cat > span:first-child { min-width: 0; }
.mcard-cat .comp { flex: none; color: rgba(255,255,255,.62); font-size: .64rem; letter-spacing: .08em; }
.mcard-body { padding: .95rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }

.mcard-when {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .8rem; letter-spacing: .05em; color: var(--granate);
  display: flex; align-items: baseline; gap: .5rem;
}
.mcard-when b { font-size: .96rem; }
.mcard-when .hour { color: var(--gris); }

.mcard-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.mcard-side { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.mcard-side img { width: 54px; height: 54px; object-fit: contain; }
.mcard-side span { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: .76rem; line-height: 1.15; letter-spacing: -.01em; }
.mcard-vs { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--or); letter-spacing: .02em; }
.mcard-venue {
  margin-top: auto; padding-top: .7rem; margin-bottom: 0; border-top: 1px solid rgba(6,2,1,.08);
  font-size: .8rem; color: var(--gris); display: flex; align-items: center; gap: .45rem;
}
.mcard-venue a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(141,132,128,.45); transition: color .2s var(--ease), border-color .2s var(--ease); }
.mcard-venue a:hover { color: var(--granate); border-color: var(--granate); }
.mcard-venue svg { width: 14px; height: 14px; fill: var(--or); flex: none; }
/* Categoria/competizione: riga propria sotto il campo, in granate */
.mcard-comp {
  margin: .25rem 0 0; padding-left: 1.15rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .74rem; letter-spacing: .06em; color: var(--granate);
}

/* Conto alla rovescia al fischio d'inizio */
.mcard-count { border-top: 1px solid rgba(6,2,1,.08); padding-top: .7rem; }
.mcard-count .cd-lab {
  display: block; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .62rem; letter-spacing: .18em; color: var(--gris); margin-bottom: .45rem;
}
.mcard-count .cd-grid { display: flex; align-items: baseline; gap: .3rem; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 2.1rem; }
.cd-unit b {
  font-family: var(--display); font-weight: 800; font-size: 1.12rem; line-height: 1;
  letter-spacing: -.02em; color: var(--granate); font-variant-numeric: tabular-nums;
}
.cd-unit i {
  font-style: normal; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: .54rem; letter-spacing: .12em; color: var(--gris); margin-top: .25rem;
}
.cd-sep { font-family: var(--display); font-weight: 700; color: var(--or); line-height: 1; transform: translateY(-.15rem); }
.mcard-count.is-live .cd-grid { display: none; }
.mcard-count.is-live .cd-lab { color: var(--granate); font-size: .8rem; margin-bottom: 0; }

/* Card patrocinadores: stesso vetro, registro scuro */
.scard {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg);
  background: var(--glass-dark); color: var(--blanc);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--glass-dark-brd);
}
/* Fascia orizzontale sotto le card partita: bassa e larga quanto il contenuto */
.scard--wide {
  margin-top: clamp(.9rem, 1.6vw, 1.4rem); position: relative; z-index: 5;
  flex-direction: row; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .55rem clamp(1rem, 2.4vw, 1.8rem);
}
.scard--wide .scard-cat { padding: 0; margin: 0; background: none; flex: none; align-self: center; }
.scard--wide .scard-grid {
  --logo-k: .34;
  padding: 0; flex: 1; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: clamp(1.4rem, 3vw, 2.8rem);
}
@media (max-width: 760px) {
  .scard--wide { flex-direction: column; align-items: stretch; gap: .8rem; padding: 1rem 1.1rem 1.2rem; }
  .scard--wide .scard-cat { text-align: center; }
  .scard--wide .scard-grid { --logo-k: .3; gap: 1.2rem; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .scard { background: rgba(10,4,3,.94); }
}
.scard-cat {
  padding: .66rem 1.15rem; background: rgba(255,255,255,.05);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .06em; color: var(--or);
}
.scard-grid { padding: .9rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; flex: 1; align-content: center; }
.scard-grid a {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: calc(var(--w) * var(--logo-k) * 1px);
  transition: transform .25s var(--ease);
}
.scard-grid a:hover { transform: translateY(-2px); }
/* Loghi in bianco pieno sul fondo scuro: i file sono PNG trasparenti normalizzati,
   quindi brightness(0)+invert(1) dà una silhouette bianca pulita. */
.scard-grid img { width: 100%; height: auto; filter: brightness(0) invert(1); opacity: .92; transition: opacity .25s var(--ease); }
.scard-grid a:hover img { opacity: 1; }
.scard-grid img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   EL CLUB — testo + numeri
   -------------------------------------------------------------------------- */
.club-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .club-split { grid-template-columns: 1fr; } }
.club-copy p + p { margin-top: 1rem; }
.club-copy .btn { margin-top: 1.8rem; }

/* Blocco granate con i numeri in oro: fa pendant con la card "Último partido"
   e con lo schema colori delle card partita. */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255,255,255,.14); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
}
.stat {
  background: linear-gradient(150deg, var(--granate) 0%, var(--granate-fosc) 100%);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
}
.section--os .stat { background: linear-gradient(150deg, var(--granate) 0%, var(--granate-fosc) 100%); }
.stat-num { font-size: clamp(2.4rem, 4.6vw, 3.4rem); color: var(--or-clar); letter-spacing: -.035em; }
.stat-lab {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .7rem; letter-spacing: .18em; color: rgba(255,255,255,.72); margin-top: .55rem;
}

.club-claim {
  margin-top: 1.4rem; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: -.02em; color: var(--granate);
}

/* --------------------------------------------------------------------------
   NOTICIAS
   -------------------------------------------------------------------------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2vw, 1.8rem); }
@media (max-width: 950px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } }

.ncard {
  text-decoration: none; color: inherit; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--glass-brd);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ncard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--glass-brd); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ncard { background: var(--blanc); }
}
.ncard-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--nit-2); }
.ncard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ncard:hover .ncard-img img { transform: scale(1.05); }
.ncard-tag {
  position: absolute; left: .9rem; bottom: .9rem; background: var(--granate); color: var(--blanc);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .66rem; letter-spacing: .1em; padding: .35rem .8rem; border-radius: var(--r-pill);
}
.ncard-body { padding: 1.2rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.ncard-date { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: .7rem; letter-spacing: .14em; color: var(--gris); }
.ncard h3 { transition: color .22s var(--ease); }
.ncard:hover h3 { color: var(--granate); }
.ncard p { font-size: .94rem; color: var(--gris-fosc); }

/* --------------------------------------------------------------------------
   CATEGORÍAS 26/27
   -------------------------------------------------------------------------- */
.cats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 700px) { .cats-grid { grid-template-columns: 1fr; } }

.catcard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 380px; padding: 1.7rem; text-decoration: none; color: var(--blanc); overflow: hidden;
  background: var(--nit-2); border-radius: var(--r-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.catcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.catcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.catcard:hover img { transform: scale(1.06); }
.catcard::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,2,1,.92) 8%, rgba(69,20,22,.32) 55%, rgba(6,2,1,.1) 100%);
  transition: background .35s var(--ease);
}
.catcard:hover::after { background: linear-gradient(to top, rgba(162,45,48,.9) 8%, rgba(69,20,22,.45) 60%, rgba(6,2,1,.14) 100%); }
.catcard > * { position: relative; z-index: 2; }
.catcard .wcard-plate { position: relative; z-index: 2; align-self: flex-start; display: flex; flex-direction: column; }
.catcard .bars { margin-bottom: .7rem; }
.catcard h3 { font-size: clamp(1.35rem, 2.3vw, 1.7rem); }
.catcard-meta { font-size: .88rem; color: rgba(255,255,255,.72); margin-top: .35rem; }

/* --------------------------------------------------------------------------
   RESULTADOS Y CLASIFICACIÓN — tab per squadra
   -------------------------------------------------------------------------- */
.tabs-bar {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
  border-bottom: 1px solid rgba(6,2,1,.1); padding-bottom: .9rem;
}
.tab-btn {
  display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
  padding: .6rem 1.1rem; border: 0; cursor: pointer; border-radius: var(--r);
  background: var(--os); color: var(--gris-fosc); text-align: left;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.section--os .tab-btn { background: var(--blanc); }
.tab-btn:hover { background: rgba(162,45,48,.08); color: var(--granate); }
.tab-btn[aria-selected="true"] { background: var(--granate); color: var(--blanc); }
/* Stessa gerarchia delle card categorie: in evidenza la parola che distingue
   la squadra, non "Fútbol" né "Amateur A" che si ripetono su ogni tab. */
.tab-kind {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .56rem; letter-spacing: .16em; opacity: .72;
}
.tab-group {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.05;
}
.tab-name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .58rem; letter-spacing: .16em; opacity: .72;
}
.tab-comp {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .16em; color: var(--or); margin: 0 0 1.2rem;
}

.results-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.24fr) minmax(0, .92fr); gap: clamp(1.2rem, 2.4vw, 1.8rem); }
@media (max-width: 1050px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .results-grid { grid-template-columns: 1fr; } }

/* Tabellino dell'ultima partita */
.rcard.rcard--last, .section--os .rcard.rcard--last {
  background: linear-gradient(150deg, var(--granate) 0%, var(--granate-fosc) 100%); color: var(--blanc);
}
.rcard.rcard--last .rcard-title { color: rgba(255,255,255,.72); }
.lm-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .4rem; }
.lm-head .rcard-title { margin: 0; }
.lm-date { margin: 0 0 1.3rem; font-size: .78rem; color: rgba(255,255,255,.66); }
.lm-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.lm-side { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.lm-side img { width: 52px; height: 52px; object-fit: contain; }
.lm-side span { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: .74rem; line-height: 1.15; }
.lm-nums {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: .4rem;
}
.lm-nums i { font-style: normal; color: rgba(255,255,255,.45); font-size: .6em; }
.outcome {
  display: inline-block; padding: .3rem .85rem; border-radius: var(--r-pill);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .66rem; letter-spacing: .14em; flex: none;
}
.outcome--win { background: var(--blanc); color: var(--granate); }
.outcome--draw { background: var(--or); color: var(--nit); }
.outcome--loss { background: var(--pissarra); color: var(--blanc); }
.lm-sub {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .64rem; letter-spacing: .16em; color: rgba(255,255,255,.55); margin: 0 0 .6rem;
  padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16);
}
.lm-scorers { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lm-scorers li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: rgba(255,255,255,.6); }
.lm-scorers li.is-us { color: var(--blanc); font-weight: 600; }
.lm-min { font-family: var(--display); font-weight: 700; font-size: .74rem; min-width: 2.2rem; color: rgba(255,255,255,.8); }
.lm-ball { width: 15px; height: 15px; flex: none; color: currentColor; }

.rcard { border-radius: var(--r-lg); background: var(--os); padding: clamp(1.2rem, 2.2vw, 1.7rem); }
.section--os .rcard { background: var(--blanc); }
.rcard-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .16em; color: var(--gris-fosc); margin: 0 0 1.1rem;
}

.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.rlist li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem;
  padding: .75rem .2rem; border-bottom: 1px solid rgba(6,2,1,.07);
}
.rl-main { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.rl-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .7rem; min-width: 0; }
.rl-side { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; min-width: 0; }
.rl-side img { width: 38px; height: 38px; object-fit: contain; }
.rl-name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .68rem; letter-spacing: -.01em; line-height: 1.2; color: var(--gris);
}
.rl-name.is-us { color: var(--nit); }
.rl-badge {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-pill);
  font-family: var(--display); font-weight: 800; font-size: .78rem; color: var(--blanc); flex: none;
}
.rl-badge--win { background: var(--granate); }
.rl-badge--draw { background: var(--or); color: var(--nit); }
.rl-badge--loss { background: var(--pissarra); }
.rlist li:last-child { border-bottom: 0; }
.rl-date {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .68rem; letter-spacing: .1em; color: var(--gris);
}
.rl-score {
  font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em;
  padding: .2rem .7rem; border-radius: var(--r-pill); color: var(--blanc); white-space: nowrap;
  align-self: center; margin-top: .35rem;
}
.rl-score--win { background: var(--granate); }
.rl-score--draw { background: var(--or); color: var(--nit); }
.rl-score--loss { background: var(--pissarra); }

.table-scroll { overflow-x: auto; }
.ttable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ttable th {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .64rem; letter-spacing: .14em; color: var(--gris); text-align: left;
  padding: 0 .6rem .7rem; border-bottom: 1px solid rgba(6,2,1,.1);
}
.ttable td { padding: .62rem .6rem; border-bottom: 1px solid rgba(6,2,1,.06); }
.ttable tr:last-child td { border-bottom: 0; }
.ttable .ta-c { text-align: center; }
.ttable tr.is-us td { background: rgba(162,45,48,.07); font-weight: 700; }
.ttable tr.is-us td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); box-shadow: inset 3px 0 0 var(--granate); }
.ttable tr.is-us td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ttable td b { font-family: var(--display); font-weight: 800; }

/* --------------------------------------------------------------------------
   CATEGORÍAS in home — card orizzontali larghe, foto di squadra
   -------------------------------------------------------------------------- */
.cats-wide { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.wcard {
  position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--blanc);
  border-radius: var(--r-lg); background: var(--nit-2); min-height: clamp(230px, 26vw, 340px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.wcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.wcard:hover img { transform: scale(1.04); }
.wcard::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,2,1,.58) 0%, rgba(6,2,1,.3) 40%, rgba(6,2,1,0) 74%, rgba(6,2,1,0) 100%);
  transition: background .35s var(--ease);
}
.wcard:hover::after { background: linear-gradient(100deg, rgba(162,45,48,.6) 0%, rgba(69,20,22,.32) 42%, rgba(6,2,1,0) 76%); }
.wcard-body {
  position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%;
  justify-content: flex-end; padding: clamp(1.3rem, 2.4vw, 2rem); max-width: 34rem;
}
/* Pannello dietro al solo testo: il nome resta leggibile su qualsiasi foto senza
   dover scurire tutta l'immagine con una sfumatura pesante. */
.wcard-plate {
  display: flex; flex-direction: column; align-items: flex-start;
  align-self: flex-start; border-radius: var(--r); padding: .95rem 1.35rem 1.1rem;
  background: rgba(6,2,1,.62);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wcard-plate { background: rgba(6,2,1,.82); }
}
.wcard-plate .bars { margin-bottom: .7rem; }
/* Titolo della card = la parola che distingue (Masculino / Femenino / Sala).
   "Fútbol" e "Amateur A" si ripetono su quasi tutte le card: restano righe di
   servizio, piccole e in oro, sopra e sotto il titolo. */
.wcard-kind {
  display: block; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .18em; color: var(--or); margin-bottom: .22rem;
}
.wcard-group {
  display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem); letter-spacing: -.015em; line-height: 1.05;
  color: var(--blanc); margin-bottom: .45rem;
}
.wcard-name {
  display: block; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .18em; color: var(--or); line-height: 1;
}
.wcard-meta { display: block; font-size: .82rem; color: rgba(255,255,255,.72); margin-top: .5rem; }
@media (max-width: 620px) { .wcard { min-height: 260px; } .wcard-body { max-width: none; } }

/* --------------------------------------------------------------------------
   SOCIAL — griglia Instagram
   -------------------------------------------------------------------------- */
.social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 900px) { .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .social-grid { grid-template-columns: 1fr; } }

/* Formato post Instagram: media 4:5 (il verticale nativo di IG, così le locandine
   non vengono tagliate) + anteprima breve del copy sotto. */
.sgrid-item {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  border-radius: var(--r-lg); background: var(--blanc);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(6,2,1,.07);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.section--os .sgrid-item { background: var(--blanc); }
.sgrid-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(6,2,1,.07); }
.sgrid-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nit-2); }
.sgrid-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sgrid-item:hover .sgrid-media img { transform: scale(1.04); }
.sgrid-ico {
  position: absolute; top: .7rem; right: .7rem; width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--blanc);
  background: rgba(6,2,1,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sgrid-ico svg { width: 18px; height: 18px; }
.sgrid-body { padding: .8rem .95rem .95rem; display: flex; flex-direction: column; flex: 1; }
.sgrid-caption {
  margin: 0; font-size: .68rem; line-height: 1.4; color: var(--gris-fosc);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --------------------------------------------------------------------------
   ESTADIO — fascia con foto del campo
   -------------------------------------------------------------------------- */
.stadium { position: relative; overflow: hidden; background: var(--nit); color: var(--blanc); isolation: isolate; }
.stadium-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.stadium::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(95deg, rgba(6,2,1,.84) 0%, rgba(6,2,1,.54) 48%, rgba(6,2,1,.12) 100%);
}
.stadium-inner {
  position: relative; z-index: 2; max-width: var(--wrap);
  padding-top: var(--sec-y); padding-bottom: var(--sec-y);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

/* Vista aerea del campo: cartellino in vetro sul lato destro */
.stadium-aerial {
  position: relative; width: clamp(190px, 21vw, 268px); border-radius: var(--r-lg); overflow: hidden;
  background: var(--glass-dark); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--glass-dark-brd);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  margin: 0;
}
.stadium-aerial img { width: 100%; height: auto; display: block; }
.stadium-aerial figcaption {
  padding: .7rem .9rem .8rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .62rem; letter-spacing: .16em; color: var(--or);
}
@media (max-width: 820px) {
  .stadium-inner { grid-template-columns: 1fr; }
  .stadium-aerial { width: min(268px, 60%); }
}
.stadium-inner h2 { max-width: 22ch; }

.stadium-data { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.5rem); margin: 1.8rem 0 2rem; }
.stadium-data dt {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .7rem; letter-spacing: .18em; color: var(--or); margin-bottom: .5rem;
}
.stadium-data dd { margin: 0; color: rgba(255,255,255,.82); line-height: 1.7; }

/* --------------------------------------------------------------------------
   Sottomenu categorie
   -------------------------------------------------------------------------- */
.team-menu { background: var(--nit-2); border-bottom: 1px solid rgba(184,161,113,.18); }
.team-menu-inner { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-top: .6rem; padding-bottom: .6rem; }
.team-menu-inner::-webkit-scrollbar { display: none; }
.team-menu a {
  flex: none; display: flex; flex-direction: column; gap: .12rem; padding: .5rem .9rem;
  border-radius: var(--r); text-decoration: none; color: rgba(255,255,255,.68);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.team-menu a:hover { background: rgba(255,255,255,.07); color: var(--blanc); }
.team-menu a[aria-current="page"] { background: var(--granate); color: var(--blanc); }
.tm-group { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: .54rem; letter-spacing: .16em; opacity: .7; }
.tm-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: .84rem; letter-spacing: -.02em; white-space: nowrap; }

/* --------------------------------------------------------------------------
   PLANTILLA — figurine giocatore
   -------------------------------------------------------------------------- */
.squad-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); }
@media (max-width: 1000px) { .squad-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .squad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pcard { border-radius: var(--r-lg); overflow: hidden; background: var(--nit-2); color: var(--blanc); }
.pcard-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.pcard-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover .pcard-photo img { transform: scale(1.04); }
.pcard-num {
  position: absolute; right: .6rem; bottom: .2rem;
  font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 6vw, 5rem); line-height: .8;
  letter-spacing: -.05em; color: rgba(255,255,255,.16);
}
.pcard-body { padding: .9rem 1rem 1.1rem; background: var(--nit); }
.pcard-name { margin: 0; display: flex; flex-direction: column; line-height: 1.05; }
.pcard-name span { font-size: .86rem; color: rgba(255,255,255,.62); }
.pcard-name b {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); letter-spacing: -.025em;
}
.pcard-role {
  margin: .45rem 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: .62rem; letter-spacing: .16em; color: var(--or);
}
/* Staff: registro neutro col colore della maglia 26/27 */
.pcard--staff .pcard-body { background: var(--pissarra-fosc); }
.pcard--staff .pcard-role { color: var(--or-clar); }
.squad-grid--staff { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .squad-grid--staff { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .squad-grid--staff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   BANDA CTA
   -------------------------------------------------------------------------- */
.cta-band { background: var(--granate); color: var(--blanc); position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; right: -12%; top: -70%; width: 62%; height: 240%;
  background: radial-gradient(ellipse at center, rgba(69,20,22,.34), rgba(69,20,22,0) 70%);
}
.cta-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  /* NB: solo padding-top/bottom — lo shorthand `padding` azzererebbe i gutter di .wrap */
  gap: clamp(1.5rem, 4vw, 3rem); padding-top: calc(var(--sec-y) * .72); padding-bottom: calc(var(--sec-y) * .72); flex-wrap: wrap;
}
.cta-band h2 { max-width: 16ch; }
.cta-band p { color: rgba(255,255,255,.82); margin-top: .9rem; max-width: 46ch; }
.cta-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.cta-actions .btn { background: var(--blanc); color: var(--granate); }
.cta-actions .btn:hover { background: var(--nit); color: var(--blanc); }
.cta-actions .btn--ghost { background: rgba(255,255,255,.12); color: var(--blanc); }
.cta-actions .btn--ghost:hover { background: var(--blanc); color: var(--granate); }

/* --------------------------------------------------------------------------
   Rivelazione allo scroll
   Progressive enhancement: la classe `js` la mette app.js. Senza JavaScript
   (o con reduced-motion) i contenuti restano visibili — mai nascosti a vuoto.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}