/* ==========================================================================
   PEDALATIUM — Design System
   Light editorial + movimento · Blu Lazio / Verde Sabina
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Superfici */
  --paper:      #FBFAF7;
  --paper-2:    #F3F1EA;
  --paper-3:    #E9E6DC;
  --ink:        #0D1317;
  --ink-2:      #4A5862;
  --ink-3:      #8A949B;
  --line:       #E2DED3;
  --line-2:     #CFC9BB;

  /* Brand */
  --blu:        #0F4C81;
  --blu-2:      #0A3861;
  --blu-3:      #06263F;
  --blu-soft:   #E9F1F8;
  --verde:      #1F6B4A;
  --verde-soft: #E8F1EC;
  --ambra:      #B0812C;
  --ambra-soft: #F7F0DF;
  --rosso:      #B03A2E;

  /* Forma */
  --r:      10px;
  --r-sm:   6px;
  --r-pill: 999px;

  /* Ritmo */
  --pad:    clamp(1.25rem, 4vw, 3rem);
  --gap:    clamp(1.5rem, 3vw, 2.5rem);
  --sec:    clamp(4.5rem, 10vw, 9rem);
  --wrap:   1240px;
  --wrap-w: 1480px;
  --wrap-n: 820px;

  /* Ombre */
  --sh-1: 0 1px 2px rgba(13,19,23,.05), 0 4px 14px rgba(13,19,23,.05);
  --sh-2: 0 2px 6px rgba(13,19,23,.06), 0 18px 44px rgba(13,19,23,.10);
  --sh-3: 0 30px 80px rgba(13,19,23,.18);

  /* Moto */
  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease2: cubic-bezier(.65,0,.35,1);

  /* Tipo */
  --f-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
/* "hidden" deve nascondere anche gli elementi a cui un'altra regola dà display:flex o grid */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--blu); outline-offset:3px; border-radius:3px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- 3. Tipografia ------------------------------------------------------- */
.display,h1,h2,h3,h4{
  font-family:var(--f-sans);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.display{ font-size:clamp(3rem, 8.6vw, 7.25rem); font-weight:800; letter-spacing:-.045em; }
h1,.h1{ font-size:clamp(2.35rem, 6vw, 4.6rem); font-weight:800; letter-spacing:-.042em; }
h2,.h2{ font-size:clamp(1.9rem, 4.2vw, 3.25rem); letter-spacing:-.038em; }
h3,.h3{ font-size:clamp(1.3rem, 2.3vw, 1.75rem); letter-spacing:-.028em; line-height:1.18; }
h4,.h4{ font-size:1.0625rem; letter-spacing:-.015em; line-height:1.3; }

.eyebrow{
  display:inline-flex; align-items:flex-start; gap:.55rem;
  font-size:.7rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--blu);
}
/* il trattino si allinea alla PRIMA riga: se il testo va a capo (schermi
   stretti) non resta appeso in mezzo alle due righe */
.eyebrow::before{
  content:""; flex:none; width:1.75rem; height:1px; margin-top:.82em;
  background:currentColor; opacity:.5;
}
.eyebrow--plain::before{ display:none; }
.eyebrow--light{ color:rgba(255,255,255,.82); }

.lead{ font-size:clamp(1.0625rem,1.7vw,1.3rem); line-height:1.55; color:var(--ink-2); text-wrap:pretty; }
.muted{ color:var(--ink-2); }
.small{ font-size:.875rem; line-height:1.55; }
.tiny{ font-size:.78rem; line-height:1.5; letter-spacing:.01em; }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.serif{ font-family:var(--f-serif); font-weight:400; letter-spacing:-.01em; }

.prose p + p,
.prose p + ul,
.prose ul + p{ margin-top:1.05em; }
.prose h3{ margin:2.2em 0 .7em; }
.prose h3:first-child{ margin-top:0; }
.prose ul{ display:grid; gap:.5rem; }
.prose ul li{ position:relative; padding-left:1.35rem; color:var(--ink-2); }
.prose ul li::before{
  content:""; position:absolute; left:.15rem; top:.7em;
  width:6px; height:6px; border-radius:50%; background:var(--blu); opacity:.55;
}
.prose strong{ color:var(--ink); font-weight:600; }
.prose a:not(.btn){ color:var(--blu); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:not(.btn):hover{ text-decoration-thickness:2px; }

/* --- 4. Layout ----------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:var(--wrap-w); }
.wrap--narrow{ max-width:var(--wrap-n); }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.section--paper2{ background:var(--paper-2); }
.section--ink{ background:var(--ink); color:#fff; }
.section--blu{ background:var(--blu); color:#fff; }

.grid{ display:grid; gap:var(--gap); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:960px){
  .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
}

.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3.5rem);
}
.sec-head__text{ max-width:44ch; }
.sec-head h2{ margin-top:.7rem; }
.sec-head .lead{ margin-top:1rem; }

/* --- 5. Icone ------------------------------------------------------------ */
.ico{
  width:1.25em; height:1.25em; flex:none;
  fill:none; stroke:currentColor; vertical-align:-.28em;
}
.ico--lg{ width:1.75em; height:1.75em; }
.ico--xl{ width:2.5rem; height:2.5rem; }
.icon-badge{
  display:grid; place-items:center; width:3rem; height:3rem;
  border-radius:var(--r-sm); background:var(--blu-soft); color:var(--blu);
  flex:none;
}
.icon-badge--verde{ background:var(--verde-soft); color:var(--verde); }
.icon-badge--ambra{ background:var(--ambra-soft); color:var(--ambra); }
.icon-badge--line{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.icon-badge .ico{ width:1.5rem; height:1.5rem; vertical-align:0; }

/* --- 6. Bottoni ---------------------------------------------------------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:transparent;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.4rem; border-radius:var(--r-sm);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:.9rem; font-weight:600; letter-spacing:-.01em;
  transition:transform .35s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); }
.btn .ico{ width:1.05rem; height:1.05rem; vertical-align:0; transition:transform .35s var(--ease); }
.btn:hover .ico--move{ transform:translateX(4px); }
.btn--primary{ --btn-bg:var(--blu); }
.btn--primary:hover{ --btn-bg:var(--blu-2); }
.btn--verde{ --btn-bg:var(--verde); }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--light:hover{ --btn-bd:var(--line-2); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-2); }
.btn--ghost:hover{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.btn--onimg{ --btn-bg:rgba(255,255,255,.14); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.4); backdrop-filter:blur(8px); }
.btn--onimg:hover{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }
.btn--lg{ padding:1.05rem 1.8rem; font-size:.98rem; }
.btn--sm{ padding:.55rem 1rem; font-size:.82rem; }
.btn--block{ width:100%; justify-content:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.92rem; color:var(--blu);
}
.link-arrow .ico{ transition:transform .35s var(--ease); }
.link-arrow:hover .ico{ transform:translateX(5px); }

/* --- 7. Tag / chip ------------------------------------------------------- */
.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .7rem; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  background:var(--paper-3); color:var(--ink-2);
}
.tag .ico{ width:.95rem; height:.95rem; vertical-align:0; }
.tag--blu{ background:var(--blu-soft); color:var(--blu); }
.tag--verde{ background:var(--verde-soft); color:var(--verde); }
.tag--ambra{ background:var(--ambra-soft); color:var(--ambra); }
.tag--live{ background:var(--rosso); color:#fff; }
.tag--live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:pulse 1.8s infinite;
}
.tag--onimg{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(8px); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* --- 8. Header ----------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto; z-index:80;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.header__in{
  display:flex; align-items:center; gap:1.5rem;
  height:74px; max-width:var(--wrap-w); margin-inline:auto; padding-inline:var(--pad);
}
.header.is-hidden{ transform:translateY(-100%); }
.header{ transition:transform .45s var(--ease), background .4s var(--ease), border-color .4s, color .4s; }

/* Sopra la foto: tutto bianco. Allo scroll: torna su carta. */
.header{ color:#fff; }
.header .logo__word span{ color:#9EC9EC; }
.header .logo__sub{ color:rgba(255,255,255,.62); }
.header .logo__mark{ background:rgba(255,255,255,.18); backdrop-filter:blur(8px); }
.header .nav__link:hover{ background:rgba(255,255,255,.15); }
.header .nav__link.is-active{ color:#fff; }
.header .nav__link.is-active::after{
  content:""; position:absolute; left:.78rem; right:.78rem; bottom:.2rem;
  height:2px; border-radius:2px; background:currentColor; opacity:.85;
}
.header .nav__link{ position:relative; }
.header .burger:hover{ background:rgba(255,255,255,.15); border-radius:var(--r-sm); }

.header.is-solid{
  background:rgba(251,250,247,.92); backdrop-filter:blur(16px) saturate(1.5);
  border-bottom-color:var(--line); color:var(--ink);
}
.header.is-solid .logo__word span{ color:var(--blu); }
.header.is-solid .logo__sub{ color:var(--ink-3); }
.header.is-solid .logo__mark{ background:var(--blu); backdrop-filter:none; }
.header.is-solid .nav__link:hover{ background:var(--paper-3); }
.header.is-solid .nav__link.is-active{ color:var(--blu); }

/* Logo */
.logo{ display:flex; align-items:center; gap:.65rem; flex:none; }
.logo__mark{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:var(--blu); color:#fff;
  transition:transform .5s var(--ease), background .3s;
}
.logo:hover .logo__mark{ transform:rotate(-14deg); }
.logo__mark .ico{ width:21px; height:21px; vertical-align:0; stroke-width:1.6; }
.logo__word{
  font-size:1.06rem; font-weight:800; letter-spacing:-.045em; line-height:1;
}
.logo__word b{ font-weight:800; }
.logo__word span{ color:var(--blu); }
.logo__sub{
  display:block; font-size:.53rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.24rem;
}

/* Nav */
.nav{ display:flex; align-items:center; gap:.15rem; margin-left:auto; }
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.55rem .78rem; border-radius:var(--r-sm);
  font-size:.855rem; font-weight:550; letter-spacing:-.005em;
  transition:background .2s, color .2s;
}
.nav__link .ico{ width:.85rem; height:.85rem; vertical-align:0; transition:transform .3s var(--ease); }
.nav__link:hover{ background:var(--paper-3); }
.nav__link.is-active{ color:var(--blu); }
.nav__item:hover > .nav__link .ico{ transform:rotate(180deg); }

.drop{
  position:absolute; top:calc(100% + .45rem); left:50%;
  transform:translate(-50%,10px);
  min-width:260px; padding:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink);
  box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  /* Ritardo alla chiusura: se il mouse esce per un attimo il pannello resta,
     e si fa in tempo a rientrarci. In apertura invece è immediato. */
  transition-delay:.35s;
}
/* Ponte invisibile sullo spazio fra la voce di menu e il pannello: senza,
   scendendo col mouse si attraversa un vuoto che non appartiene a nessuno dei
   due e il sottomenu si chiude. */
.drop::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:1.6rem;
}
.nav__item:hover .drop,
.nav__item:focus-within .drop{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  transition-delay:0s;
}
.drop__link{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .7rem; border-radius:var(--r-sm);
  font-size:.875rem; font-weight:500; color:var(--ink);
  transition:background .18s, color .18s;
}
.drop__link:hover{ background:var(--paper-2); color:var(--blu); }
.drop__link .ico{ width:1.1rem; height:1.1rem; color:var(--ink-3); vertical-align:0; transition:color .18s; }
.drop__link:hover .ico{ color:var(--blu); }
.drop__link small{ display:block; font-size:.72rem; color:var(--ink-3); font-weight:400; }

/* Mega menu gare */
.drop--mega{ min-width:min(680px, 88vw); left:auto; right:0; transform:translate(0,10px); padding:.75rem; }
.nav__item:hover .drop--mega,
.nav__item:focus-within .drop--mega{ transform:translate(0,0); transition-delay:0s; }
.mega{ display:grid; grid-template-columns:repeat(2,1fr); gap:.3rem; }
.mega__link{
  display:flex; gap:.85rem; align-items:center;
  padding:.6rem; border-radius:var(--r-sm);
  transition:background .18s;
}
.mega__link:hover{ background:var(--paper-2); }
.mega__img{
  width:56px; height:44px; border-radius:var(--r-sm); object-fit:cover; flex:none;
  filter:saturate(.85);
}
.mega__t{ font-size:.86rem; font-weight:650; letter-spacing:-.015em; line-height:1.2; }
.mega__d{ font-size:.73rem; color:var(--ink-3); margin-top:.15rem; }
.mega__foot{
  margin-top:.5rem; padding:.7rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}

.header__cta{ display:flex; align-items:center; gap:.5rem; flex:none; }
.burger{ display:none; padding:.5rem; border-radius:var(--r-sm); }
.burger .ico{ width:1.4rem; height:1.4rem; vertical-align:0; }

@media (max-width:1100px){
  .nav,.header__cta .btn--desk{ display:none; }
  .burger{ display:block; }
}

/* Menu mobile */
.mmenu{
  position:fixed; inset:0; z-index:90;
  background:var(--paper); padding:1.25rem var(--pad) 3rem;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.mmenu.is-open{ opacity:1; visibility:visible; transform:none; }
.mmenu__top{ display:flex; align-items:center; justify-content:space-between; height:52px; margin-bottom:1.5rem; }
.mmenu__group + .mmenu__group{ margin-top:1.75rem; padding-top:1.75rem; border-top:1px solid var(--line); }
.mmenu__label{
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.75rem; display:block;
}
.mmenu__link{
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 0; font-size:1.35rem; font-weight:700; letter-spacing:-.03em;
  border-bottom:1px solid var(--line);
}
.mmenu__link .ico{ width:1.15rem; height:1.15rem; color:var(--blu); vertical-align:0; }
.mmenu__link small{ display:block; font-size:.74rem; font-weight:400; letter-spacing:0; color:var(--ink-3); }
.mmenu__cta{ margin-top:2rem; display:grid; gap:.6rem; }

/* --- 9. Hero ------------------------------------------------------------- */
.hero{
  position:relative; min-height:min(92svh, 880px);
  display:flex; align-items:flex-end;
  padding-top:108px; padding-bottom:clamp(2.25rem,4vw,3.25rem);
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  animation:kb 24s var(--ease) infinite alternate;
}
@keyframes kb{ from{ transform:scale(1.04) } to{ transform:scale(1.14) translateY(-1.5%) } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(5,17,28,.66) 0%, rgba(5,17,28,.22) 26%, rgba(5,17,28,.62) 66%, rgba(5,17,28,.92) 100%),
    linear-gradient(96deg, rgba(5,17,28,.72) 0%, rgba(5,17,28,.3) 46%, rgba(5,17,28,0) 78%);
}
.hero__in{ width:100%; }
.hero .display{ margin-top:1rem; font-size:clamp(2.75rem, 7.1vw, 6rem); }
.hero .display em{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }
.hero__lead{ max-width:46ch; margin-top:1.2rem; color:rgba(255,255,255,.9); font-size:clamp(1rem,1.4vw,1.15rem); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.75rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 2.25rem; margin-top:2.1rem;
  padding-top:1.35rem; border-top:1px solid rgba(255,255,255,.22);
}
.hero__stat{ display:flex; align-items:baseline; gap:.5rem; }
.hero__stat b{ font-size:clamp(1.5rem,2.6vw,2.15rem); font-weight:800; letter-spacing:-.04em; line-height:1; }
.hero__stat span{ font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.7); }

.scroll-hint{
  position:absolute; right:var(--pad); bottom:clamp(2.5rem,5vw,4rem); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.scroll-hint i{ width:1px; height:44px; background:linear-gradient(rgba(255,255,255,.7), transparent); animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@media (max-width:900px){ .scroll-hint{ display:none } }

/* Hero pagine interne */
.phero{
  position:relative; color:#fff; overflow:hidden; isolation:isolate;
  padding-top:150px; padding-bottom:clamp(3rem,6vw,5rem);
  min-height:min(58svh, 520px); display:flex; align-items:flex-end;
}
.phero__bg{ position:absolute; inset:0; z-index:-2; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); }
.phero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,20,32,.66) 0%, rgba(6,20,32,.3) 45%, rgba(6,20,32,.8) 100%);
}
.phero h1{ margin-top:.9rem; }
.phero .lead{ color:rgba(255,255,255,.85); max-width:52ch; margin-top:1.1rem; }
.crumbs{ display:flex; gap:.5rem; align-items:center; font-size:.78rem; color:rgba(255,255,255,.66); }
.crumbs a:hover{ color:#fff; }
.crumbs span{ opacity:.5; }

/* --- 10. Marquee --------------------------------------------------------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--paper-2); padding-block:.9rem;
}
.marquee--ink{ background:var(--ink); color:#fff; border-color:rgba(255,255,255,.1); }
.marquee--blu{ background:var(--blu); color:#fff; border-color:transparent; }
.marquee__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__grp{ display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem; }
.marquee__grp span{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.marquee__grp .ico{ width:1rem; height:1rem; vertical-align:0; opacity:.6; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* --- 10bis. Muro sponsor --------------------------------------------------- */
.sponsors{
  display:grid; gap:1px; margin-top:.9rem;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.sponsors--sm{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.sponsor{
  display:grid; place-items:center; min-height:116px; padding:1.4rem 1.1rem;
  background:#fff; transition:background .35s var(--ease);
  /* la riga sottile la disegna ogni cella: così l'ultima riga incompleta
     non lascia caselle grigie vuote */
  box-shadow:0 0 0 1px var(--line);
}
.sponsors--sm .sponsor{ min-height:96px; padding:1.1rem .9rem; }
.sponsor img{
  max-width:100%; max-height:48px; width:auto; height:auto; object-fit:contain;
  transition:transform .45s var(--ease);
}
.sponsors--sm .sponsor img{ max-height:40px; }
.sponsor:hover{ background:var(--paper-2); }
.sponsor:hover img{ transform:scale(1.06); }

.sponsor-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  padding:clamp(1.4rem,2.6vw,2rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
}
.sponsor-cta .btn{ margin-left:auto; }
@media (max-width:640px){
  .sponsor-cta .btn{ margin-left:0; width:100%; justify-content:center; }
  .sponsors{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sponsors--sm{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* --- 11. Card gara ------------------------------------------------------- */
.race{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--r); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.race:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent; }
.race__media{ display:block; position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--paper-3); }
.race__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease); transform:scale(1.01);
}
.race:hover .race__media img{ transform:scale(1.07); }
.race__num{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  display:grid; place-items:center; min-width:2.1rem; height:2.1rem; padding-inline:.5rem;
  border-radius:var(--r-sm); background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  font-size:.78rem; font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.race__date{
  position:absolute; right:.85rem; top:.85rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:3.4rem; padding:.42rem 0; border-radius:var(--r-sm);
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px); color:var(--ink);
  line-height:1;
}
.race__date b{ font-size:1.22rem; font-weight:800; letter-spacing:-.04em; }
.race__date span{ font-size:.6rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); margin-top:.22rem; }
.race__body{ padding:1.35rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.race__place{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.race__place .ico{ width:.9rem; height:.9rem; vertical-align:0; }
.race__title{ margin-top:.6rem; font-size:1.28rem; font-weight:700; letter-spacing:-.032em; line-height:1.14; }
.race__sub{ margin-top:.35rem; font-size:.85rem; color:var(--ink-2); }
.race__tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1rem; }
.race__foot{
  margin-top:auto; padding-top:1.15rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.race__price{ font-size:.8rem; color:var(--ink-2); }
.race__price b{ font-size:1.05rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.race__go{
  display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:50%;
  border:1px solid var(--line-2); color:var(--ink);
  transition:background .3s, color .3s, border-color .3s, transform .35s var(--ease);
}
.race:hover .race__go{ background:var(--blu); border-color:var(--blu); color:#fff; transform:translateX(3px); }
.race__go .ico{ width:1rem; height:1rem; vertical-align:0; }
.stretch::after{ content:""; position:absolute; inset:0; z-index:3; }

/* --- 12. Statistiche ----------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
/* per le righe da tre riquadri: senza questo resterebbe una casella vuota */
.stats--3{ grid-template-columns:repeat(3,1fr); }
.stat{ background:var(--paper); padding:clamp(1.5rem,3vw,2.4rem) clamp(1rem,2vw,1.75rem); }
.section--ink .stat,.section--blu .stat{ background:transparent; }
.stat b{ display:block; font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:800; letter-spacing:-.05em; line-height:1; }
.stat span{ display:block; margin-top:.6rem; font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.section--ink .stat span,.section--blu .stat span{ color:rgba(255,255,255,.62); }
@media (max-width:760px){ .stats,.stats--3{ grid-template-columns:repeat(2,1fr) } .stats--3 .stat:last-child{ grid-column:1 / -1 } }

/* --- 13. Feature / passi ------------------------------------------------- */
.feat{ display:flex; gap:1.1rem; }
.feat__t{ font-size:1.02rem; font-weight:650; letter-spacing:-.02em; }
.feat__d{ margin-top:.4rem; font-size:.92rem; color:var(--ink-2); line-height:1.55; }
.feat--stack{ flex-direction:column; gap:1rem; }

.steps{ counter-reset:s; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.step{ counter-increment:s; background:var(--paper); padding:clamp(1.4rem,2.6vw,2rem); }
.step::before{
  content:"0" counter(s);
  display:block; font-size:.78rem; font-weight:800; letter-spacing:.1em; color:var(--blu); margin-bottom:.9rem;
}

/* --- 14. Tabelle --------------------------------------------------------- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.tbl{ min-width:560px; font-size:.9rem; }
/* tabelle di soli numeri (punteggi, bonus): poche colonne corte, quindi stanno
   dentro al telefono senza costringere a scorrere di lato */
.tbl--fit{ min-width:0; width:100%; }
.tbl th,.tbl td{ padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); }
.tbl thead th{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); background:var(--paper-2); white-space:nowrap;
}
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background .2s; }
.tbl tbody tr:hover{ background:var(--paper-2); }
.tbl td b{ font-weight:700; letter-spacing:-.01em; }
.tbl .is-now{ background:var(--blu-soft); }
.tbl .is-now:hover{ background:var(--blu-soft); }
.tbl .is-past{ color:var(--ink-3); }
.tbl .is-past td b{ font-weight:500; }
.tbl__price{ font-variant-numeric:tabular-nums; white-space:nowrap; }

@media (max-width:560px){
  /* nelle tabelle numeriche stringo le celle e lascio andare a capo le
     intestazioni, così le colonne entrano tutte nella larghezza del telefono */
  .tbl--fit{ font-size:.85rem; }
  .tbl--fit th,
  .tbl--fit td{ padding:.65rem .5rem; }
  .tbl--fit thead th{ white-space:normal; line-height:1.25; }
  /* email e parole lunghe vanno a capo invece di allargare la tabella
     (i numeri di telefono restano interi: hanno white-space:nowrap) */
  .tbl--fit td{ overflow-wrap:anywhere; }
}

/* Classifiche su telefono: le cinque colonne non ci stanno, quindi ogni riga
   diventa una scheda — posizione a sinistra, nome sopra, categoria e squadra
   sotto, punti a destra. Stessa lettura del podio, senza scorrere di lato. */
@media (max-width:640px){
  .tbl--cl{ min-width:0; width:100%; display:block; font-size:.9rem; }
  .tbl--cl thead{ display:none; }
  .tbl--cl tbody{ display:block; }
  .tbl--cl tr{
    display:grid;
    grid-template-columns:2.1rem auto minmax(0,1fr) auto;
    column-gap:0; row-gap:.15rem;
    padding:.8rem .9rem;
    border-bottom:1px solid var(--line);
  }
  .tbl--cl tbody tr:last-child{ border-bottom:0; }
  .tbl--cl td{ padding:0; border:0; }
  .tbl--cl td:nth-child(1){ grid-column:1; grid-row:1 / span 2; align-self:center; padding-right:.55rem; }
  .tbl--cl td:nth-child(2){ grid-column:2 / span 2; grid-row:1; line-height:1.3; }
  .tbl--cl td:nth-child(3){ grid-column:2; grid-row:2; font-size:.76rem; color:var(--ink-3); white-space:nowrap; }
  .tbl--cl td:nth-child(4){ grid-column:3; grid-row:2; font-size:.76rem; }
  .tbl--cl td:nth-child(5){ grid-column:4; grid-row:1 / span 2; align-self:center; padding-left:.7rem; }
  /* pallino di separazione fra categoria e squadra, senza spazi larghi */
  .tbl--cl td:nth-child(3)::after{ content:"·"; margin:0 .3rem; }
  .tbl--cl .tbl__empty{ display:block; padding:0; }
  .tbl--cl .tbl__empty td{ display:block; padding:2.5rem 1rem; text-align:center; }
  /* le righe che aprono una sezione (DONNE A, VET B…) restano a tutta larghezza */
  .tbl--cl tr.tbl__sec{ display:block; padding:0; border-bottom:0; }
  .tbl--cl tr.tbl__sec th{ display:block; position:static; }
}

/* --- 15. Prezzi / countdown --------------------------------------------- */
.pricebar{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  padding:clamp(1.25rem,2.4vw,1.75rem);
  background:var(--ink); color:#fff; border-radius:var(--r);
}
.pricebar__now b{ display:block; font-size:clamp(2rem,4vw,2.8rem); font-weight:800; letter-spacing:-.045em; line-height:1; }
.pricebar__now span{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.pricebar__next{ font-size:.86rem; color:rgba(255,255,255,.72); max-width:26ch; line-height:1.45; }
.pricebar__next b{ color:#fff; }
.pricebar .btn{ margin-left:auto; }
@media (max-width:640px){ .pricebar .btn{ margin-left:0; width:100% ; justify-content:center } }

.countdown{ display:flex; gap:.5rem; }
.cd{
  min-width:64px; padding:.7rem .5rem; border-radius:var(--r-sm);
  background:rgba(255,255,255,.09); text-align:center; border:1px solid rgba(255,255,255,.14);
}
.cd b{ display:block; font-size:1.55rem; font-weight:800; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.cd span{ display:block; margin-top:.35rem; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; opacity:.62; }
.countdown--light .cd{ background:var(--paper-2); border-color:var(--line); }

/* --- 16. Programma / timeline ------------------------------------------- */
.tl{ position:relative; display:grid; gap:0; }
.tl__day{
  font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--blu); padding:1.5rem 0 .85rem;
}
.tl__day:first-child{ padding-top:0; }
.tl__row{
  display:grid; grid-template-columns:78px 1fr; gap:1.25rem; align-items:baseline;
  padding:.85rem 0; border-top:1px solid var(--line);
}
.tl__h{ font-size:.98rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tl__t{ font-size:.94rem; color:var(--ink-2); }
.tl__t b{ color:var(--ink); font-weight:600; }

/* --- 17. Percorsi -------------------------------------------------------- */
.routes{ display:grid; gap:1rem; }
.route{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.25rem; align-items:center;
  padding:1.35rem; border:1px solid var(--line); border-radius:var(--r); background:#fff;
  transition:border-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.route:hover{ border-color:var(--line-2); box-shadow:var(--sh-1); transform:translateY(-2px); }
.route__t{ font-size:1.1rem; font-weight:700; letter-spacing:-.025em; }
.route__p{ margin-top:.35rem; font-size:.86rem; color:var(--ink-2); line-height:1.5; }
.route__nums{ display:flex; gap:1.6rem; }
.route__n b{ display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.035em; line-height:1; }
.route__n span{ display:block; margin-top:.3rem; font-size:.64rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.route__n .tbd{ font-size:1.05rem; color:var(--ink-3); font-weight:600; letter-spacing:0; }
@media (max-width:760px){
  .route{ grid-template-columns:auto 1fr; }
  .route__nums{ grid-column:1/-1; padding-top:.9rem; border-top:1px solid var(--line); }
}

/* --- 18. Accordion ------------------------------------------------------- */
.acc{ border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
.acc__item + .acc__item{ border-top:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; gap:1rem; text-align:left;
  padding:1.15rem 1.35rem; font-size:1rem; font-weight:650; letter-spacing:-.02em;
  transition:background .2s;
}
.acc__btn:hover{ background:var(--paper-2); }
.acc__btn .ico{ margin-left:auto; width:1.1rem; height:1.1rem; color:var(--ink-3); transition:transform .35s var(--ease); vertical-align:0; }
.acc__btn[aria-expanded="true"] .ico{ transform:rotate(180deg); color:var(--blu); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.acc__panel[data-open="true"]{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__inner > div{ padding:0 1.35rem 1.4rem; }

/* --- 19. Documenti / download ------------------------------------------- */
.docs{ display:grid; gap:.5rem; }
.doc{
  display:flex; align-items:center; gap:.9rem;
  padding:.95rem 1.1rem; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  transition:border-color .25s, background .25s, transform .3s var(--ease);
}
.doc:hover{ border-color:var(--blu); background:var(--blu-soft); transform:translateX(3px); }
.doc__t{ font-size:.92rem; font-weight:600; letter-spacing:-.01em; }
.doc__m{ font-size:.74rem; color:var(--ink-3); margin-top:.1rem; }
.doc .ico{ vertical-align:0; }
.doc__dl{ margin-left:auto; color:var(--ink-3); }
.doc:hover .doc__dl{ color:var(--blu); }

/* --- 20. Citazione ------------------------------------------------------- */
.quote{ position:relative; }
.quote__text{
  font-family:var(--f-serif); font-weight:400; font-style:italic;
  font-size:clamp(1.35rem, 3.1vw, 2.35rem); line-height:1.32; letter-spacing:-.02em;
  text-wrap:pretty;
}
.quote__by{
  display:flex; align-items:center; gap:.8rem; margin-top:1.8rem;
  font-size:.78rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.quote__by::before{ content:""; width:2.5rem; height:1px; background:var(--line-2); }
.section--ink .quote__by{ color:rgba(255,255,255,.6); }
.section--ink .quote__by::before{ background:rgba(255,255,255,.3); }

/* --- 21. Media / gallery ------------------------------------------------- */
.figure{ border-radius:var(--r); overflow:hidden; background:var(--paper-3); }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure--tall{ aspect-ratio:3/4; }
.figure--wide{ aspect-ratio:16/9; }
.figure--sq{ aspect-ratio:1; }
.figcap{ margin-top:.7rem; font-size:.78rem; color:var(--ink-3); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--r > *:first-child{ order:2; }
@media (max-width:900px){ .split{ grid-template-columns:1fr } .split--r > *:first-child{ order:0 } }

/* --- 22. Territorio ------------------------------------------------------ */
.terr{
  position:relative; border-radius:var(--r); overflow:hidden;
  min-height:340px; display:flex; align-items:flex-end; padding:1.5rem; color:#fff;
  isolation:isolate;
}
.terr img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .9s var(--ease); }
.terr::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(6,20,32,.05),rgba(6,20,32,.8)); }
.terr:hover img{ transform:scale(1.06); }
.terr__t{ font-size:1.3rem; font-weight:700; letter-spacing:-.03em; }
.terr__d{ font-size:.84rem; color:rgba(255,255,255,.78); margin-top:.3rem; }

/* --- 23. CTA band -------------------------------------------------------- */
.cta{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  border-radius:var(--r); padding:clamp(2.5rem,6vw,4.5rem);
}
.cta img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.cta::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(6,32,55,.92), rgba(6,32,55,.55)); }
.cta h2{ max-width:18ch; }
.cta .lead{ color:rgba(255,255,255,.82); max-width:44ch; margin-top:1rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }

/* --- 24. Contatti -------------------------------------------------------- */
.ctc{ display:flex; gap:1rem; padding:1.35rem; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.ctc__t{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.ctc__v{ margin-top:.45rem; font-size:1.02rem; font-weight:650; letter-spacing:-.02em; }
.ctc__v a:hover{ color:var(--blu); }
.ctc__n{ margin-top:.25rem; font-size:.84rem; color:var(--ink-2); }

.sos{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  padding:1.35rem 1.5rem; border-radius:var(--r);
  background:var(--rosso); color:#fff;
}
.sos b{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; }
.sos__l{ font-size:.7rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; opacity:.8; }

/* --- 25. Footer ---------------------------------------------------------- */
.footer{ background:var(--ink); color:#fff; padding-top:clamp(3.5rem,7vw,5.5rem); }
.footer a{ color:rgba(255,255,255,.7); transition:color .2s; }
.footer a:hover{ color:#fff; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3.5rem; }
.footer__brand .logo__word{ color:#fff; }
.footer__brand .logo__word span{ color:#7FB2DE; }
.footer__brand .logo__mark{ background:#fff; color:var(--blu); }
.footer__brand p{ margin-top:1.2rem; font-size:.9rem; color:rgba(255,255,255,.6); max-width:34ch; line-height:1.6; }
.footer__ttl{ font-size:.68rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:1.1rem; }
.footer__list{ display:grid; gap:.6rem; font-size:.9rem; }
.footer__soc{ display:flex; gap:.5rem; margin-top:1.6rem; }
.footer__soc a{
  display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); transition:background .25s, border-color .25s, transform .3s var(--ease);
}
.footer__soc a:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px); }
.footer__soc .ico{ width:1.05rem; height:1.05rem; vertical-align:0; }
.footer__bot{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
  padding:1.5rem 0 2rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem; color:rgba(255,255,255,.5);
}
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr; gap:2rem } }

/* --- 26. Barra SOS mobile ------------------------------------------------ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:1px; background:var(--line);
  border-top:1px solid var(--line);
}
.dock a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem;
  padding:.65rem .5rem calc(.65rem + env(safe-area-inset-bottom)); background:var(--paper);
  font-size:.64rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.dock a .ico{ width:1.15rem; height:1.15rem; vertical-align:0; color:var(--blu); }
.dock a.is-cta{ background:var(--blu); color:#fff; }
.dock a.is-cta .ico{ color:#fff; }
@media (max-width:760px){
  .dock{ display:flex; }
  body{ padding-bottom:64px; }
}

/* --- 27. Reveal ---------------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-24px); }
[data-reveal="right"]{ transform:translateX(24px); }
[data-reveal="zoom"]{ transform:scale(.96); }

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

/* --- 28. Utility --------------------------------------------------------- */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}.mt-6{margin-top:4rem}
.center{ text-align:center }
.flex{ display:flex }
.wrapf{ flex-wrap:wrap }
.aic{ align-items:center }
.jcb{ justify-content:space-between }
.gap-1{ gap:.5rem }.gap-2{ gap:1rem }.gap-3{ gap:1.5rem }
.hr{ height:1px; background:var(--line); border:0; }
.on-ink{ color:#fff }
.on-ink .muted,.on-ink .lead{ color:rgba(255,255,255,.72) }
.sticky-side{ position:sticky; top:100px; }
@media (max-width:900px){ .sticky-side{ position:static } }

/* --- 29. Chip di collegamento (albo d'oro) ------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem; border-radius:var(--r-pill);
  border:1px solid var(--line); background:#fff;
  font-size:.8rem; font-weight:550; letter-spacing:-.005em; color:var(--ink-2);
  transition:border-color .22s, background .22s, color .22s, transform .3s var(--ease);
}
.chip:hover{ border-color:var(--blu); background:var(--blu-soft); color:var(--blu); transform:translateY(-1px); }
.chip .ico{ width:.85rem; height:.85rem; vertical-align:0; opacity:.55; }
.chip:hover .ico{ opacity:1; }
.chip--off{ opacity:.5; pointer-events:none; border-style:dashed; }

.year-nav{ display:flex; flex-wrap:wrap; gap:.4rem; }
.year-nav a{
  padding:.5rem .85rem; border-radius:var(--r-sm); border:1px solid var(--line);
  font-size:.85rem; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  transition:background .2s, border-color .2s, color .2s;
}
.year-nav a:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.acc__btn .tag{ margin-left:.5rem; }

/* --- 30. Riga gara (calendario) ------------------------------------------ */
.race--row{ flex-direction:row; align-items:stretch; padding:0; overflow:hidden; }
.race--row .race__media{
  width:230px; flex:none; aspect-ratio:auto; align-self:stretch;
}
.race--row .race__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.race--row .race__body{
  flex-direction:row; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:1.35rem 1.5rem;
}
.race--row .race__main{ flex:1; min-width:250px; }
.race--row .race__when{ text-align:right; min-width:132px; }
.race--row .race__when b{
  display:block; font-size:1.45rem; font-weight:800; letter-spacing:-.04em; line-height:1;
}
.race--row .race__when span{ display:block; margin-top:.35rem; font-size:.78rem; color:var(--ink-3); }
.race--row .race__title{ margin-top:.5rem; font-size:1.15rem; }
@media (max-width:760px){
  .race--row{ flex-direction:column; }
  .race--row .race__media{ width:100%; height:170px; }
  .race--row .race__when{ text-align:left; }
}

/* --- 31. Tabelle lunghe: ricerca, filtri, intestazione fissa ------------- */
.tbar{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  margin-bottom:.85rem;
}
.tbar__field{
  position:relative; display:flex; align-items:center; gap:.55rem;
  padding:.6rem .9rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; flex:1; min-width:210px;
  transition:border-color .2s, box-shadow .2s;
}
.tbar__field:focus-within{ border-color:var(--blu); box-shadow:0 0 0 3px var(--blu-soft); }
.tbar__field .ico{ width:1.05rem; height:1.05rem; color:var(--ink-3); vertical-align:0; }
.tbar__field input,
.tbar__field select{
  border:0; outline:0; background:none; font:inherit; font-size:.9rem;
  width:100%; color:var(--ink); min-width:0;
}
.tbar__field select{ cursor:pointer; }
.tbar__field--sel{ flex:0 0 auto; min-width:0; }
.tbar__count{ font-size:.8rem; color:var(--ink-3); white-space:nowrap; margin-left:auto; }
.tbar__count b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
@media (max-width:560px){
  /* sul telefono il campo di ricerca si prende tutta la riga, così il testo
     dentro non viene tagliato; il conteggio va sotto */
  .tbar__field{ flex:1 0 100%; }
  .tbar__count{ margin-left:0; }
}

.tbl-wrap--tall{ max-height:min(70svh, 640px); overflow:auto; }
.tbl-wrap--tall thead th{ position:sticky; top:0; z-index:2; }
.tbl tr[hidden]{ display:none; }
.tbl__empty td{ text-align:center; color:var(--ink-3); padding:2.5rem 1rem; }
.tbl__pos{ font-variant-numeric:tabular-nums; font-weight:700; width:1%; white-space:nowrap; }
.tbl__na{ color:var(--ink-3); font-style:italic; }
.tbl mark{ background:var(--blu-soft); color:var(--blu); padding:0 .1em; border-radius:2px; }

/* Podio in cima alle graduatorie */
.podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.podium__item{
  display:flex; gap:1rem; align-items:center;
  padding:1.1rem 1.25rem; border:1px solid var(--line); border-radius:var(--r); background:#fff;
}
.podium__item:nth-child(1){ border-color:var(--ambra); background:var(--ambra-soft); }
.podium__rank{
  display:grid; place-items:center; width:2.4rem; height:2.4rem; flex:none;
  border-radius:50%; background:var(--paper-3); font-size:.95rem; font-weight:800;
}
.podium__item:nth-child(1) .podium__rank{ background:var(--ambra); color:#fff; }
.podium__n{ display:block; font-size:1rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.podium__m{ display:block; font-size:.8rem; color:var(--ink-2); margin-top:.15rem; }
.podium__p{ margin-left:auto; font-size:1.1rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
@media (max-width:820px){ .podium{ grid-template-columns:1fr } }

.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem}
h3 .ico{color:var(--blu);vertical-align:-.18em}

/* Intestazione di sezione dentro una classifica */
.tbl .tbl__sec th{
  background:var(--ink); color:#fff; text-align:left;
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.7rem 1.1rem;
}
.tbl-wrap--tall .tbl__sec th{ position:sticky; top:34px; z-index:1; }

/* --- 32. Niente scorrimento laterale ------------------------------------- */
/* Gli elementi di griglia e flex hanno min-width:auto: una tabella larga
   dentro una colonna impedisce alla colonna di restringersi, e la pagina
   scorre di lato. Questi min-width:0 lo evitano alla radice. */
.split > *,
.grid > *,
.routes > *,
.steps > *,
.race__body > *,
.sec-head > *,
.tbar > *,
.feat > *,
.ctc > *,
.route > *,
.podium__item > *,
.footer__top > *{ min-width:0; }

.tbl-wrap{ max-width:100%; }
.sec-head__text{ max-width:min(44ch, 100%); }
.marquee{ max-width:100vw; }

/* Parole lunghe (email, URL) che sfondano su schermi stretti */
.ctc__v, .doc__t, .footer__list, .prose a{ overflow-wrap:anywhere; }

/* Rete di sicurezza: su alcuni browser mobili overflow-x sul solo body non
   basta. `clip` blocca lo scorrimento laterale senza creare un contenitore
   di scroll, quindi position:sticky continua a funzionare. */
html{ overflow-x:clip; }

/* --- 33. Planimetria in pagina ------------------------------------------- */
.mapfig{ margin:0; }
.mapfig__btn{
  display:block; width:100%; padding:0; position:relative;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--paper-2); cursor:zoom-in;
  transition:border-color .3s, box-shadow .4s var(--ease);
}
.mapfig__btn:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); }
.mapfig__btn img{ width:100%; height:auto; display:block; }
.mapfig__hint{
  position:absolute; right:.75rem; bottom:.75rem;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .8rem; border-radius:var(--r-pill);
  background:rgba(13,19,23,.86); backdrop-filter:blur(6px); color:#fff;
  font-size:.75rem; font-weight:600; letter-spacing:-.005em;
}
.mapfig__hint .ico{ width:.95rem; height:.95rem; vertical-align:0; }
.mapfig figcaption{ margin-top:.8rem; font-size:.8rem; color:var(--ink-3); }

/* Legenda dei percorsi accanto alla mappa */
.legend{ display:grid; gap:.6rem; }
.legend__item{
  display:flex; align-items:center; gap:.8rem;
  padding:.8rem .95rem; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
}
.legend__dash{ width:26px; height:4px; border-radius:2px; flex:none; }
.legend__t{ font-size:.92rem; font-weight:650; letter-spacing:-.015em; }
.legend__d{ font-size:.78rem; color:var(--ink-2); margin-top:.1rem; }
.legend__n{ margin-left:auto; text-align:right; font-size:.78rem; color:var(--ink-2); white-space:nowrap; }
.legend__n b{ display:block; font-size:1rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); }

/* --- 34. Lightbox -------------------------------------------------------- */
.lb{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:rgba(8,12,16,.94); padding:clamp(.75rem,3vw,2rem);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lb.is-open{ opacity:1; visibility:visible; }
.lb__img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:var(--r-sm); background:#fff; cursor:zoom-in;
  transition:transform .35s var(--ease);
}
.lb.is-zoom{ place-items:start; overflow:auto; }
.lb.is-zoom .lb__img{ max-width:none; max-height:none; width:190%; cursor:zoom-out; }
.lb__bar{
  position:fixed; top:0; left:0; right:0; z-index:1;
  display:flex; align-items:center; gap:.75rem;
  padding:.9rem clamp(.75rem,3vw,1.5rem);
  background:linear-gradient(rgba(8,12,16,.9), transparent);
  color:#fff; font-size:.85rem; font-weight:600;
}
.lb__bar button{
  margin-left:auto; display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .95rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16); color:#fff; font-size:.8rem; font-weight:600;
}
.lb__bar button:hover{ background:#fff; color:var(--ink); }
.lb__bar .ico{ width:1rem; height:1rem; vertical-align:0; }

/* --- 35. Scheda percorso completa ---------------------------------------- */
.route--full{ display:block; padding:0; }
.route--full .route__head{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.25rem; align-items:center;
  padding:1.35rem;
}
.route--full .route__body{
  padding:1.25rem 1.35rem 1.35rem; border-top:1px solid var(--line); background:var(--paper-2);
}
@media (max-width:760px){
  .route--full .route__head{ grid-template-columns:auto 1fr; }
  .route--full .route__head .route__nums{ grid-column:1/-1; padding-top:.9rem; border-top:1px solid var(--line); }
}

/* Itinerario: catena di località */
.itin{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .1rem; }
.itin span{
  display:inline-flex; align-items:center;
  font-size:.83rem; color:var(--ink-2); letter-spacing:-.005em;
}
.itin span::after{
  content:"›"; margin:0 .5rem; color:var(--line-2); font-size:1rem; line-height:1;
}
.itin span:last-child::after{ content:none; }
.itin span:first-child,
.itin span:last-child{ font-weight:700; color:var(--ink); }
.itin__lab{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.6rem;
}
.route__links{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.1rem; }

/* --- 36. Mappa interattiva del percorso -------------------------------- */
.routemap{
  position:relative;
  height:clamp(320px, 52vh, 520px);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--paper-2);
  margin-top:.7rem;
  /* isola lo stacking context della mappa e forza il clip anche su iOS Safari,
     così tile e controlli Leaflet non sfondano sopra la dock in fondo */
  isolation:isolate;
  transform:translateZ(0);
  contain:paint;
}
.routemap .leaflet-container{ height:100%; width:100%; background:var(--paper-2); font-family:var(--f-sans); }
.routemap__wait{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--ink-3); font-size:.85rem; gap:.5rem;
}
.routemap__wait .ico{ width:1.4rem; height:1.4rem; }
.routemap.is-ready .routemap__wait{ display:none; }
.routemap__badge{
  position:absolute; left:.7rem; top:.7rem; z-index:600;
  display:flex; gap:.4rem; align-items:center;
  padding:.4rem .7rem; border-radius:var(--r-sm);
  background:rgba(251,250,247,.94); backdrop-filter:blur(4px);
  font-size:.76rem; font-weight:650; color:var(--ink); box-shadow:var(--sh-1);
}
.routemap__badge b{ font-weight:800; }
.routemap__badge span{ color:var(--ink-3); font-weight:500; }
.leaflet-control-attribution{ font-size:10px; background:rgba(251,250,247,.85)!important; }
.routemap .leaflet-bar a{ color:var(--ink); }

/* --- 37. La mia stagione -------------------------------------------------- */
.stagione__cerca{ position:relative; max-width:560px; }
.stagione__sugg{
  position:absolute; left:0; right:0; top:calc(100% - 1.4rem); z-index:30;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-2); overflow:hidden; max-height:22rem; overflow-y:auto;
}
.stagione__opz{
  display:flex; flex-direction:column; gap:.15rem; width:100%;
  padding:.7rem .9rem; text-align:left; background:none; border:0;
  border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .18s;
}
.stagione__opz:last-child{ border-bottom:0; }
.stagione__opz:hover,
.stagione__opz:focus-visible{ background:var(--blu-soft); }
.stagione__opz-n{ font-weight:650; font-size:.95rem; color:var(--ink); }
.stagione__opz-n b{ color:var(--blu); font-weight:800; }
.stagione__opz-m{ font-size:.76rem; color:var(--ink-3); }
.stagione__nulla{ padding:1rem; font-size:.88rem; color:var(--ink-2); margin:0; }

.stagione__vuoto{
  margin-top:2.5rem; padding:clamp(2rem,5vw,3.5rem); text-align:center;
  border:1px dashed var(--line); border-radius:var(--r); background:var(--paper-2);
}
.stagione__vuoto .lead{ margin-bottom:.4rem; }
.stagione__vuoto .small{ max-width:44ch; margin-inline:auto; }

.stagione__testa{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start;
  justify-content:space-between; margin-top:2.5rem;
}
.stagione__testa h2{ line-height:1.05; }

.stagione__lista{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.stagione__riga{
  display:grid; align-items:center; gap:1rem; background:#fff;
  grid-template-columns:3.4rem minmax(0,1fr) auto auto;
  padding:1rem 1.2rem; transition:background .25s var(--ease);
}
.stagione__riga:hover{ background:var(--paper-2); }
.stagione__pos{
  display:flex; align-items:center; justify-content:center;
  width:3.4rem; height:3.4rem; border-radius:50%; line-height:1;
  background:var(--paper-3); color:var(--ink);
  font-size:1.25rem; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.stagione__pos b{ font-weight:inherit; }
.stagione__pos i{ font-style:normal; font-size:.62em; transform:translateY(-.42em); }
.stagione__pos.is-podio{ background:var(--ambra-soft); color:var(--ambra); }
.stagione__c{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.stagione__c b{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.stagione__sez{ font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blu); }
.stagione__su{ font-size:.78rem; color:var(--ink-3); }
.stagione__gap{ display:flex; flex-direction:column; gap:.15rem; text-align:right; font-size:.76rem; white-space:nowrap; }
.stagione__su2{ color:var(--rosso); }
.stagione__gi{ color:var(--verde); }
.stagione__pti{ text-align:right; }
.stagione__pti b{ display:block; font-size:1.2rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stagione__pti span{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

@media (max-width:700px){
  .stagione__riga{
    grid-template-columns:2.9rem minmax(0,1fr) auto;
    column-gap:.8rem; row-gap:.4rem; padding:.9rem 1rem;
  }
  .stagione__pos{ width:2.9rem; height:2.9rem; font-size:1.05rem; grid-row:1 / span 2; }
  .stagione__c{ grid-column:2; grid-row:1; }
  .stagione__pti{ grid-column:3; grid-row:1; }
  .stagione__gap{
    grid-column:2 / span 2; grid-row:2;
    flex-direction:row; gap:.9rem; text-align:left;
  }
}

/* Simulatore */
.simul{
  margin-top:2.5rem; padding:clamp(1.4rem,3vw,2.2rem);
  background:var(--ink); color:#fff; border-radius:var(--r);
}
.simul__testa{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; }
.simul__testa .icon-badge{ background:rgba(255,255,255,.1); color:#fff; }
.simul__testa .muted{ color:rgba(255,255,255,.62); }
.simul__cmd{ margin-top:1.6rem; }
.simul__cmd .itin__lab{ color:rgba(255,255,255,.55); }
.simul__range{ display:flex; align-items:center; gap:1rem; }
.simul__range input[type=range]{
  flex:1; min-width:0; accent-color:#fff; height:1.5rem; cursor:pointer;
}
.simul__range output{
  min-width:3.4rem; text-align:right;
  font-size:1.5rem; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.simul__esiti{ display:grid; gap:1px; margin-top:1.4rem; background:rgba(255,255,255,.14); border-radius:var(--r-sm); overflow:hidden; }
.simul__esito{
  display:grid; grid-template-columns:1fr auto auto auto; gap:.4rem 1.2rem; align-items:center;
  padding:.95rem 1.1rem; background:var(--ink);
}
.simul__esito b{ font-size:.95rem; }
.simul__esito .muted{ color:rgba(255,255,255,.6); font-size:.85rem; grid-column:2 / -1; }
.simul__da{ font-size:.8rem; color:rgba(255,255,255,.55); white-space:nowrap; }
.simul__a{ font-size:.85rem; color:rgba(255,255,255,.85); white-space:nowrap; font-variant-numeric:tabular-nums; }
.simul__a i{ font-style:normal; font-size:1.25rem; font-weight:800; letter-spacing:-.03em; }
.simul__delta{ font-size:.76rem; font-weight:700; white-space:nowrap; }
.simul__delta.is-su{ color:#7FD1A4; }
.simul__delta.is-giu{ color:#F09A8E; }
.simul__delta.is-fermo{ color:rgba(255,255,255,.5); }
@media (max-width:700px){
  .simul__esito{ grid-template-columns:1fr auto; }
  .simul__esito b{ grid-column:1 / -1; }
  .simul__da{ grid-column:1; }
  .simul__a{ grid-column:2; text-align:right; }
  .simul__delta{ grid-column:1 / -1; }
}
.stagione__nota{ color:var(--ink-3); font-style:italic; }
.simul__a em{ font-style:normal; color:#7FD1A4; font-weight:700; }

/* --- 38. Tabella di marcia interattiva ----------------------------------- */
.marcia{ margin-top:.9rem; }
.marcia:not(.is-pronta){ min-height:6rem; }
.marcia__cmd{ padding:1.1rem 1.2rem; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); }
.marcia__scelte{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem; }
.marcia__v{
  min-width:2.9rem; padding:.5rem .35rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--ink-2); cursor:pointer;
  font:inherit; font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums;
  transition:background .2s, color .2s, border-color .2s;
}
.marcia__v:hover{ border-color:var(--blu); color:var(--blu); }
.marcia__v.is-on{ background:var(--blu); border-color:var(--blu); color:#fff; }
.marcia__sintesi{ margin:.9rem 0 0; font-size:.88rem; line-height:1.5; color:var(--ink-2); }
.marcia__sintesi b{ color:var(--ink); font-weight:700; }
.marcia__ok{ color:var(--verde); font-weight:600; }
.marcia__ko{ color:var(--rosso); font-weight:600; }
.marcia__t tbody tr.is-partenza td,
.marcia__t tbody tr.is-arrivo td{ background:var(--blu-soft); font-weight:700; }
.marcia__t tbody tr.is-cancello td{ background:var(--ambra-soft); }
.marcia__tag{
  display:inline-block; margin-left:.35rem; padding:.05rem .4rem; border-radius:var(--r-pill);
  background:var(--verde-soft); color:var(--verde);
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; vertical-align:.1em;
}
.marcia__tag.is-gpm{ background:var(--paper-3); color:var(--ink-2); }
.marcia__tag.is-cancello{ background:var(--ambra-soft); color:var(--ambra); }
.marcia__fuori b{ color:var(--rosso); }

/* --- 39. Quanto mi costa la stagione ------------------------------------- */
.costi__tipi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.5rem; }
.costi__tipo{
  padding:.85rem 1rem; text-align:left; cursor:pointer; font:inherit;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .2s, background .2s;
}
.costi__tipo b{ display:block; font-size:.98rem; font-weight:700; color:var(--ink); }
.costi__tipo span{ display:block; margin-top:.2rem; font-size:.76rem; color:var(--ink-3); line-height:1.4; }
.costi__tipo:hover{ border-color:var(--blu); }
.costi__tipo.is-on{ border-color:var(--blu); background:var(--blu-soft); }
.costi__tipo.is-on b{ color:var(--blu); }

.costi__gare{
  display:grid; gap:1px; margin-top:1.2rem; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.costi__g{
  display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem;
  background:#fff; cursor:pointer; transition:background .2s;
}
.costi__g:hover{ background:var(--paper-2); }
.costi__g.is-on{ background:var(--blu-soft); }
.costi__g input{ width:1.15rem; height:1.15rem; accent-color:var(--blu); cursor:pointer; flex:none; }
.costi__g-n{ flex:1; min-width:0; font-weight:650; }
.costi__g-p{ font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.costi__g.is-chiusa{ cursor:default; color:var(--ink-3); }
.costi__g.is-chiusa:hover{ background:#fff; }
.costi__g.is-chiusa .costi__g-n{ font-weight:500; }
.costi__g.is-chiusa .costi__g-p{ font-weight:600; font-size:.8rem; color:var(--ink-3); }
.costi__avviso{
  display:block; margin-top:.15rem; font-size:.74rem; font-weight:600; color:var(--ambra);
}
.costi__tot{ margin-top:1.2rem; }
.costi__vuoto{ margin:0; font-size:.9rem; color:var(--ink-3); }
.costi__riga{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  padding:1.1rem 1.3rem; background:var(--ink); color:#fff; border-radius:var(--r);
}
.costi__riga b{ font-size:1.05rem; }
.costi__nomi{ display:block; margin-top:.2rem; font-size:.78rem; color:rgba(255,255,255,.6); }
.costi__cifra{ font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; letter-spacing:-.04em; white-space:nowrap; }

/* --- 40. Comodità scheda gara: calendario e meteo ------------------------- */
[data-gara]{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:1.2rem; }
.meteo{
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .9rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
}
.meteo__ico{ font-size:1.35rem; line-height:1; }
.meteo__c{ display:flex; flex-direction:column; gap:.05rem; }
.meteo__c b{ font-size:.86rem; font-weight:700; letter-spacing:-.01em; }
.meteo__c span{ font-size:.74rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.meteo__fonte{ font-size:.66rem; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:520px){ .meteo__fonte{ display:none; } }

/* --- 41. Confronta i percorsi -------------------------------------------- */
.conf__cmd{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.conf__ord{ display:flex; gap:.4rem; flex-wrap:wrap; }
.conf__o{
  padding:.55rem .9rem; border:1px solid var(--line); border-radius:var(--r-pill);
  background:#fff; color:var(--ink-2); font:inherit; font-size:.84rem; font-weight:650; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.conf__o:hover{ border-color:var(--blu); color:var(--blu); }
.conf__o.is-on{ background:var(--blu); border-color:var(--blu); color:#fff; }
.conf__lista{
  display:grid; gap:1px; margin-top:1.1rem; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.conf__r{
  display:grid; align-items:center; gap:.3rem 1rem; padding:.9rem 1.15rem; background:#fff;
  grid-template-columns:minmax(9rem,13rem) minmax(0,1fr) auto;
  transition:background .2s;
}
.conf__r:hover{ background:var(--paper-2); }
.conf__n{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.conf__n b{ font-size:.95rem; font-weight:700; letter-spacing:-.01em; }
.conf__n span{ font-size:.76rem; color:var(--ink-3); }
.conf__bar{ display:block; height:.55rem; border-radius:var(--r-pill); background:var(--paper-3); overflow:hidden; }
.conf__bar i{ display:block; height:100%; border-radius:inherit; background:var(--blu); transition:width .5s var(--ease); }
.conf__r.is-mf .conf__bar i{ background:var(--verde); }
.conf__r.is-ct .conf__bar i{ background:var(--ambra); }
.conf__v{ font-size:1.02rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.conf__alt{ grid-column:2 / -1; font-size:.74rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .conf__r{ grid-template-columns:minmax(0,1fr) auto; }
  .conf__n{ grid-column:1; }
  .conf__v{ grid-column:2; }
  .conf__bar{ grid-column:1 / -1; }
  .conf__alt{ grid-column:1 / -1; }
}

/* --- 42. Le salite del percorso ------------------------------------------ */
.salite{ margin-top:.9rem; }
.salite__testa{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  padding:1rem 1.2rem; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
}
.salite__n{ display:flex; align-items:baseline; gap:.35rem; }
.salite__n > b{ font-size:1.9rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.salite__n > span{ font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.salite__s{ margin:0; flex:1; min-width:14rem; font-size:.88rem; color:var(--ink-2); line-height:1.5; }
.salite__s b{ color:var(--ink); font-weight:700; }

.salite__l{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.8rem; }
.salita{ padding:1rem 1.1rem 1.1rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.salita__t{ display:flex; align-items:center; gap:.8rem; }
.salita__i{
  display:grid; place-items:center; flex:none; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--ink); color:#fff; font-size:.85rem; font-weight:800;
}
.salita__t > div{ flex:1; min-width:0; }
.salita__t b{ display:block; font-size:.98rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.salita__km{ display:block; font-size:.76rem; color:var(--ink-3); margin-top:.1rem; }
.salita__d{
  flex:none; padding:.25rem .6rem; border-radius:var(--r-pill);
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--paper-3); color:var(--ink-2);
}
.salita__d.is-media{ background:var(--ambra-soft); color:var(--ambra); }
.salita__d.is-impegnativa{ background:#F3DFD6; color:#B8562F; }
.salita__d.is-dura,
.salita__d.is-durissima{ background:var(--rosso); color:#fff; }

.salita__svg{ display:block; width:100%; height:64px; margin:.85rem 0 .2rem; }

.salita__n{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem;
  padding-top:.7rem; border-top:1px solid var(--line);
}
.salita__n div{ text-align:center; }
.salita__n div b{
  display:block; font-size:1.02rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.salita__n div span{
  display:block; margin-top:.15rem; font-size:.64rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.salita__q{ margin:.6rem 0 0; font-size:.76rem; color:var(--ink-3); text-align:center; }

.salite__leg{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem;
  margin-top:.9rem; font-size:.72rem; color:var(--ink-3);
}
.salite__lc{ display:inline-flex; align-items:center; gap:.32rem; }
.salite__lc i{ width:.85rem; height:.6rem; border-radius:2px; display:inline-block; }
@media (max-width:520px){
  .salita__n{ grid-template-columns:repeat(2,1fr); gap:.7rem .4rem; }
}

/* --- 43. Video Facebook con caricamento al clic --------------------------- */
.videofb{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--ink);
}
.videofb__play{
  position:absolute; inset:0; width:100%; height:100%; padding:1.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem;
  border:0; background:none; color:#fff; font:inherit; text-align:center; cursor:pointer;
}
.videofb__play img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.videofb__vel{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,20,32,.35), rgba(6,20,32,.78));
}
.videofb__play:hover img{ transform:scale(1.04); }
.videofb__ico,
.videofb__t,
.videofb__n{ position:relative; }
.videofb__ico{
  display:grid; place-items:center; width:4.2rem; height:4.2rem; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3);
  transition:background .25s, transform .25s var(--ease);
}
.videofb__ico .ico{ width:1.5rem; height:1.5rem; vertical-align:0; }
.videofb__play:hover .videofb__ico{ background:var(--blu); border-color:var(--blu); transform:scale(1.06); }
.videofb__t{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; max-width:32ch; }
.videofb__n{ font-size:.74rem; color:rgba(255,255,255,.62); max-width:38ch; line-height:1.45; }
.videofb iframe{ position:absolute; inset:0; width:100%; height:100%; }
.videofb.is-carico{ background:#000; }

/* --- 44. Schede percorso richiudibili ------------------------------------ */
/* Ogni percorso è lungo (itinerario, profilo, mappa, salite, tabella di
   marcia): tenerli tutti aperti costringe a scorrere moltissimo per arrivare
   al Medio Fondo o alla cicloturistica. Aperti si comportano come prima. */
.route--acc > .route__head{
  width:100%; text-align:left; background:none; border:0; font:inherit; color:inherit;
  cursor:pointer; transition:background .2s;
  grid-template-columns:auto 1fr auto auto;
}
.route--acc > .route__head:hover{ background:var(--paper-2); }
.route--acc > .route__head:focus-visible{ outline:2px solid var(--blu); outline-offset:-3px; }
.route__tt{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.route--acc .route__t{ display:block; }
.route--acc .route__p{ display:block; margin:0; }
.route--acc .route__nums{ display:flex; }
.route--acc .route__n{ display:block; }
.route__apri{
  display:grid; place-items:center; flex:none; width:2.3rem; height:2.3rem;
  border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink-2);
  transition:transform .35s var(--ease), background .25s, color .25s, border-color .25s;
}
.route__apri .ico{ width:1.05rem; height:1.05rem; vertical-align:0; }
.route--acc > .route__head:hover .route__apri{ border-color:var(--blu); color:var(--blu); }
.route--acc > .route__head[aria-expanded="true"] .route__apri{
  transform:rotate(180deg); background:var(--blu); border-color:var(--blu); color:#fff;
}
.route--acc > .route__head[aria-expanded="true"]{ background:var(--paper-2); }
.route--acc .route__body{ border-top:1px solid var(--line); }

@media (max-width:760px){
  /* icona, titolo e freccetta sulla prima riga; i numeri sotto a tutta larghezza.
     Senza posizionarli a mano la freccetta finisce su una riga tutta sua. */
  .route--acc > .route__head{ grid-template-columns:auto 1fr auto; }
  .route--acc > .route__head > .icon-badge{ grid-column:1; grid-row:1; }
  .route--acc > .route__head > .route__tt{ grid-column:2; grid-row:1; }
  .route--acc > .route__head > .route__apri{ grid-column:3; grid-row:1; }
  .route--acc > .route__head > .route__nums{
    grid-column:1/-1; grid-row:2; padding-top:.9rem; border-top:1px solid var(--line);
  }
}
@media (max-width:430px){
  .route--acc .route__nums{ flex-wrap:wrap; gap:.5rem 1.1rem; }
}

/* --- 45. Confronto testa a testa ----------------------------------------- */
.sfida{ padding:clamp(1.3rem,3vw,2rem); background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.sfida__testa{ display:grid; grid-template-columns:auto 1fr auto; gap:1.1rem; align-items:center; }
.sfida__testa .btn{ white-space:nowrap; }
.sfida__cerca{ position:relative; margin-top:1.1rem; max-width:460px; }

.sfida__vs{
  display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center;
  margin-top:1.4rem; padding:1rem 1.1rem; background:var(--paper-2); border-radius:var(--r-sm);
}
.sfida__chi{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.sfida__chi b{ font-size:.98rem; font-weight:700; letter-spacing:-.01em; }
.sfida__chi span{ font-size:.74rem; color:var(--ink-3); }
.sfida__chi.is-io b{ color:var(--blu); }
.sfida__chi:last-child{ text-align:right; }
.sfida__vs-t{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.sfida__nulla{ margin-top:1.1rem; font-size:.9rem; color:var(--ink-2); }

.sfida__righe{
  display:grid; gap:1px; margin-top:.9rem; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
}
.sfida__riga{
  display:grid; grid-template-columns:minmax(0,1fr) 4.6rem 4.6rem auto;
  gap:.5rem .8rem; align-items:center; padding:.75rem 1rem; background:#fff;
}
.sfida__cl{ font-size:.88rem; font-weight:650; min-width:0; }
.sfida__cl span{ display:block; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blu); }
.sfida__p{ text-align:center; font-size:1.05rem; font-weight:800; letter-spacing:-.03em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.sfida__p span{ display:block; font-size:.7rem; font-weight:600; letter-spacing:0; color:var(--ink-3); }
.sfida__p.is-avanti{ color:var(--verde); }
.sfida__gap{ font-size:.78rem; font-weight:650; white-space:nowrap; text-align:right; color:var(--ink-2); }
.sfida__gap i{ font-style:italic; font-weight:500; color:var(--ink-3); }

.sfida__cmd{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:.9rem; }
.sfida__cmd label{ font-size:.85rem; font-weight:650; white-space:nowrap; }
.sfida__cmd input[type=range]{ flex:1; min-width:10rem; accent-color:var(--blu); cursor:pointer; }
.sfida__cmd output{ min-width:3rem; font-size:1.35rem; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }

.sfida__soglia{
  display:grid; gap:.2rem; margin-top:.6rem; padding:.85rem 1rem;
  border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-sm); background:var(--paper-2);
}
.sfida__soglia.is-si{ border-left-color:var(--verde); }
.sfida__soglia.is-no{ border-left-color:var(--rosso); }
.sfida__soglia b{ font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.sfida__sog-t{ font-size:.95rem; color:var(--ink); }
.sfida__sog-t b{ font-size:1em; letter-spacing:-.01em; text-transform:none; color:var(--verde); }
.sfida__soglia.is-no .sfida__sog-t b{ color:var(--rosso); }
.sfida__sog-n{ font-size:.76rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }

@media (max-width:700px){
  .sfida__testa{ grid-template-columns:auto 1fr; }
  .sfida__testa .btn{ grid-column:1/-1; justify-content:center; }
  .sfida__riga{ grid-template-columns:minmax(0,1fr) 3.6rem 3.6rem; }
  .sfida__gap{ grid-column:1/-1; text-align:left; }
}
.sfida__sep{ margin-top:.9rem; font-size:.82rem; color:var(--ink-2); line-height:1.55; }
.sfida__sep b{ color:var(--ink); font-weight:650; }

/* --- 46. Dopo la gara: foto, risultati, condivisione --------------------- */
.dopogara__foto,
.dopogara__cond{ padding:clamp(1.3rem,3vw,1.9rem); background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.dopogara__chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip--blu{ background:var(--blu); border-color:var(--blu); color:#fff; }
.chip--blu:hover{ background:var(--blu-scuro, #0B3A63); }
.chip.is-ok{ background:var(--verde-soft); border-color:var(--verde); color:var(--verde); }

/* --- 47. Tabelle numeriche su schermi molto stretti ---------------------- */
/* Sotto i 400 px una parola lunga in intestazione ("Cicloturista") non entra
   e la tabella comincia a scorrere di lato. Celle più strette e sillabazione:
   la pagina dichiara lang="it", quindi il browser spezza dove si deve. */
@media (max-width:400px){
  .tbl--fit{ font-size:.8rem; }
  .tbl--fit th,
  .tbl--fit td{ padding:.55rem .4rem; }
  .tbl--fit thead th{ hyphens:auto; overflow-wrap:break-word; }
}

/* --- 48. Risultati in tempo reale ---------------------------------------- */
.live{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.1rem; align-items:center;
  margin-bottom:1.6rem; padding:1.2rem 1.4rem;
  background:var(--ink); color:#fff; border-radius:var(--r);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.live:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.live__p{
  width:.7rem; height:.7rem; border-radius:50%; background:#7FD1A4;
  box-shadow:0 0 0 .3rem rgba(127,209,164,.22);
  animation:pulse 1.8s infinite;
}
.live__c{ min-width:0; }
.live__t{
  display:block; font-size:1.05rem; font-weight:800; letter-spacing:-.025em;
}
.live__d{
  display:block; margin-top:.3rem; font-size:.84rem; line-height:1.55;
  color:rgba(255,255,255,.7); max-width:62ch;
}
.live__go{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  padding:.6rem 1rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
  font-size:.85rem; font-weight:650;
  transition:background .25s, border-color .25s;
}
.live:hover .live__go{ background:#fff; border-color:#fff; color:var(--ink); }
.live__go .ico{ width:.95rem; height:.95rem; vertical-align:0; }
@media (max-width:700px){
  .live{ grid-template-columns:auto 1fr; gap:.8rem 1rem; }
  .live__go{ grid-column:1/-1; justify-content:center; }
}

/* --- 49. Avviso sulla scheda gara ---------------------------------------- */
/* Una comunicazione breve dell'organizzazione (percorso modificato, orari
   cambiati…), scritta dal pannello di gestione. */
.avviso{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:1rem 1.15rem; border-radius:var(--r-sm);
  background:#FFF6E0; border:1px solid #E9C979; color:var(--ink);
}
.avviso .ico{ flex:none; width:1.25rem; height:1.25rem; margin-top:.1rem; color:var(--ambra); vertical-align:0; }
.avviso p{ margin:0; font-size:.95rem; line-height:1.55; font-weight:500; }