/* ============================================================
   Lliga SIESPORTS · Fase de clausura
   Marca: verd #86be56 · crema #f0ead6
   ============================================================ */
:root{
  --verd:#86be56;
  --crema:#f0ead6;
  --crema-logo:#fefbeb;   /* crema exacte del logotip */

  /* derivats, necessaris per al contrast de lectura */
  --verd-fosc:#4c7430;
  --verd-nit:#2c4519;
  --tinta:#25291f;
  --tinta-suau:#6d6f63;

  --paper:#ffffff;
  --linia:#ddd7c2;
  --linia-forta:#c6bfa6;

  --guany:#dcecc9;
  --derrota:#e8e2cd;
  --programat:#fdfaf0;

  --radi:14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:4.2rem; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

body{
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-variation-settings:'wdth' 100;
  background:var(--crema);
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--verd-nit); outline-offset:2px; }

/* ---------- Botons ---------- */
.boto{
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:.84rem; font-weight:700; line-height:1;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  padding:.62rem 1.15rem; border-radius:999px;
  border:1.5px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.boto-ple{ background:var(--crema-logo); color:var(--verd-nit); }
.boto-ple:hover{ background:#fff; }
.boto-buit{ border-color:rgba(254,251,235,.65); color:var(--crema-logo); }
.boto-buit:hover{ background:rgba(254,251,235,.16); border-color:var(--crema-logo); }
.boto-clar{ border-color:rgba(254,251,235,.35); color:var(--crema-logo); }
.boto-clar:hover{ background:rgba(254,251,235,.12); }

/* ---------- Portada ---------- */
.portada{
  background:var(--verd);
  border-bottom:6px solid var(--verd-nit);
}
.portada-cos{
  max-width:1240px; margin:0 auto;
  padding:1.9rem 1.2rem 2rem;
  display:grid; gap:1.15rem 1.5rem;
  grid-template-columns:auto 1fr;
  align-items:center;
}
.marca{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-decoration:none; grid-row:span 2;
}
.marca-plat{
  width:104px; height:104px; border-radius:50%;
  background:var(--crema-logo);
  display:grid; place-items:center;
  box-shadow:0 0 0 5px rgba(44,69,25,.16);
}
.marca-plat img{ width:86px; height:86px; display:block; }
.marca-nom{
  font-size:.78rem; font-weight:800; letter-spacing:.14em;
  color:var(--crema-logo); font-variation-settings:'wdth' 108;
}
.portada-text{ align-self:end; min-width:0; }
.portada-text h1{
  font-size:clamp(1.9rem,6vw,3.2rem); font-weight:800;
  line-height:.98; letter-spacing:-.03em; color:#fff;
  font-variation-settings:'wdth' 118;
}
.portada-text p{
  margin-top:.45rem; font-size:.94rem; color:#f2fbe8; max-width:44ch;
}
.accions{ display:flex; flex-wrap:wrap; gap:.5rem; align-self:start; }

@media (max-width:720px){
  .portada-cos{ grid-template-columns:1fr; justify-items:start; }
  .marca{ grid-row:auto; flex-direction:row; gap:.7rem; }
  .marca-plat{ width:70px; height:70px; box-shadow:0 0 0 4px rgba(44,69,25,.16); }
  .marca-plat img{ width:58px; height:58px; }
}

/* ---------- Navegació ---------- */
.navegacio{
  position:sticky; top:0; z-index:10;
  background:var(--crema); border-bottom:1px solid var(--linia-forta);
  display:flex; align-items:center; gap:.45rem;
  padding:.65rem 1.2rem; overflow-x:auto;
}
.navegacio a{
  text-decoration:none; white-space:nowrap;
  font-weight:700; font-size:.84rem; color:var(--verd-nit);
  padding:.4rem .95rem; border:1.5px solid var(--linia-forta); border-radius:999px;
  transition:background .15s ease,border-color .15s ease;
}
.navegacio a:hover{ background:var(--guany); border-color:var(--verd); }
.progres{
  margin-left:auto; padding-left:1rem; white-space:nowrap;
  font-size:.78rem; color:var(--tinta-suau); font-variant-numeric:tabular-nums;
}

/* ---------- Quadrants ---------- */
main{ max-width:1240px; margin:0 auto; padding:1.7rem 1.2rem 3rem; }

.estat{
  text-align:center; padding:3rem 1rem;
  color:var(--tinta-suau); font-size:.95rem; line-height:1.65;
}
.estat.error{ color:#8c3a26; }
.estat small{ display:block; margin-top:.7rem; opacity:.75; }

.grup{ margin-top:2.5rem; }
.grup:first-child{ margin-top:.3rem; }
.grup-titol{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:.8rem; flex-wrap:wrap; }
.grup-titol h2{
  font-size:1.4rem; font-weight:800; letter-spacing:-.02em;
  color:var(--verd-nit); font-variation-settings:'wdth' 115;
}
.grup-titol .compte{ font-size:.8rem; color:var(--tinta-suau); font-variant-numeric:tabular-nums; }
.grup-titol .regla{ flex:1 1 3rem; height:3px; background:var(--verd); border-radius:2px; }

.marc{
  overflow-x:auto; background:var(--paper);
  border:1px solid var(--linia-forta); border-radius:var(--radi);
}
table{ border-collapse:collapse; width:100%; font-size:.76rem; }
th,td{ border:1px solid var(--linia); padding:.42rem .5rem; text-align:center; white-space:nowrap; }
thead th{ background:var(--verd-fosc); color:#fff; font-weight:700; }
thead th.rival{
  max-width:112px; min-width:82px; white-space:normal;
  font-size:.66rem; line-height:1.2; font-weight:600;
  vertical-align:bottom; padding:.5rem .3rem;
}
th.col-equip,td.equip{ position:sticky; left:0; text-align:left; min-width:158px; font-weight:700; }
td.equip{ background:var(--paper); box-shadow:1px 0 0 var(--linia-forta); }
thead th.col-equip{ background:var(--verd-fosc); z-index:2; box-shadow:1px 0 0 var(--verd-nit); }
td.estad{ color:var(--tinta-suau); font-variant-numeric:tabular-nums; }
td.punts{ font-weight:800; color:var(--verd-nit); font-variant-numeric:tabular-nums; }
td.posicio{ font-weight:700; color:var(--tinta-suau); font-variant-numeric:tabular-nums; }

td.diagonal{
  background:var(--verd-nit);
  background-image:linear-gradient(135deg,transparent 46%,rgba(240,234,214,.28) 46% 54%,transparent 54%);
}
td.resultat{ font-weight:600; font-variant-numeric:tabular-nums; }
td.resultat.guany{ background:var(--guany); }
td.resultat.derrota{ background:var(--derrota); }
td.programat{ background:var(--programat); font-size:.68rem; color:var(--verd-nit); font-weight:600; }
td.espera{ background:var(--programat); font-size:.66rem; color:var(--verd-fosc); font-weight:700; }
td.sensedata{ background:var(--paper); color:#b3ad99; font-size:.68rem; }

.llegenda{ display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:.7rem; font-size:.72rem; color:var(--tinta-suau); }
.llegenda span{ display:inline-flex; align-items:center; gap:.4rem; }
.llegenda i{ width:.9rem; height:.9rem; border-radius:3px; border:1px solid var(--linia-forta); display:inline-block; }

/* ---------- Peu ---------- */
.peu{ background:var(--verd-nit); color:#e6efdc; margin-top:2.2rem; }
.peu-cos{
  max-width:1240px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:2.5rem;
  padding:2.3rem 1.2rem 1.7rem;
}
.peu-bloc{ flex:1 1 16rem; }
.peu-bloc h2{ font-size:.8rem; font-weight:800; letter-spacing:.12em; color:var(--verd); margin-bottom:.75rem; }
.puntuacio{ list-style:none; font-size:.86rem; line-height:1.95; }
.puntuacio b{
  display:inline-grid; place-items:center;
  width:1.45rem; height:1.45rem; margin-right:.5rem;
  border-radius:50%; background:rgba(134,190,86,.22); color:var(--verd);
  font-size:.75rem; font-variant-numeric:tabular-nums;
}
.nota{ margin-top:.8rem; font-size:.74rem; color:#9fb18d; }
.accions-peu{ gap:.5rem; }

.peu-final{
  border-top:1px solid rgba(255,255,255,.14);
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:1.1rem 1.2rem 2.3rem; font-size:.76rem; color:#9fb18d;
}