/* =============================================================================
   Landing di www.sportadmin.net (Views/Landing). Tutto sotto .sa-l: queste regole
   non toccano il gestionale. Mondo «Velocità»: notte blu, blu e ciano del logo,
   lime SOLO per il gratis e per ciò che è live; tagli inclinati di 12° come le
   scie del logo; Archivo corsivo stretto per i titoli.
   ============================================================================= */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/landing/archivo-latin-wdth-normal.woff2") format("woff2");
    font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/landing/archivo-latin-ext-wdth-normal.woff2") format("woff2");
    font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/landing/archivo-latin-wdth-italic.woff2") format("woff2");
    font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/landing/archivo-latin-ext-wdth-italic.woff2") format("woff2");
    font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.sa-l {
    --notte: #061233;
    --notte-2: #0b1d4a;
    --notte-3: #132a63;
    --blu: #1f4fff;
    --blu-scuro: #1638c4;
    --ciano: #19c3f5;
    --bianco: #ffffff;
    --ghiaccio: #eef3fb;
    --inchiostro: #0a1430;
    --grigio: #4f5b7a;
    --testo-notte: #c3cfee;
    --lime: #c8ff2e;
    --lime-scuro: #a6dc00;
    --incl: 12deg;
    --riga: min(1240px, 100% - 32px);
    --ombra: 0 18px 40px -18px rgba(3, 10, 32, .55), 0 4px 12px -6px rgba(3, 10, 32, .35);
    --facile: cubic-bezier(.16, 1, .3, 1);

    margin: 0;
    background: var(--bianco);
    color: var(--inchiostro);
    font-family: "Archivo", system-ui, sans-serif;
    font-stretch: 100%;
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    accent-color: var(--blu);
    caret-color: var(--blu);
    overflow-x: hidden;
}
:where(.sa-l) *, :where(.sa-l) *::before, :where(.sa-l) *::after { box-sizing: border-box; }
.sa-l ::selection { background: var(--lime); color: var(--notte); }
:where(.sa-l) img, :where(.sa-l) svg { display: block; max-width: 100%; }
:where(.sa-l) a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
:where(.sa-l) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(.sa-l) :where(ul, ol) { padding: 0; list-style: none; }
:where(.sa-l) button { font: inherit; color: inherit; }
.sa-l :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
html:has(.sa-l) { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-color: var(--blu) var(--notte); }
.sa-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sa-salta {
    position: absolute; left: 16px; top: -60px; z-index: 50; padding: .6rem 1rem;
    background: var(--lime); color: var(--notte); font-weight: 700; text-decoration: none;
}
.sa-salta:focus { top: 12px; }

/* ---------- Titoli ---------- */
.sa-titolo, .sa-h2 {
    font-style: italic; font-weight: 800; font-stretch: 70%; text-transform: uppercase;
    letter-spacing: -.005em; line-height: .9; text-wrap: balance;
}
.sa-titolo { font-size: clamp(3rem, 7.4vw, 6rem); }
.sa-titolo span { display: block; }
.sa-h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }

/* ---------- Pulsanti: parallelogrammi come le scie del logo ---------- */
.sa-btn {
    --fondo: var(--blu); --testo: var(--bianco);
    display: inline-flex; align-items: center; gap: .6rem;
    min-height: 3.25rem; padding: 0 1.6rem;
    background: var(--fondo); color: var(--testo);
    border: 2px solid transparent; text-decoration: none;
    font-weight: 750; font-stretch: 88%; font-size: 1.05rem; letter-spacing: .01em; text-transform: uppercase;
    transform: skewX(calc(var(--incl) * -1));
    transition: background-color .2s var(--facile), color .2s var(--facile), transform .25s var(--facile), box-shadow .25s var(--facile);
    cursor: pointer; white-space: nowrap;
}
.sa-btn > * { transform: skewX(var(--incl)); }
.sa-btn svg { width: 1.2rem; height: 1.2rem; transition: transform .25s var(--facile); }
.sa-btn:hover { box-shadow: 0 10px 24px -10px rgba(3, 10, 32, .6); transform: skewX(calc(var(--incl) * -1)) translateY(-2px); }
.sa-btn:hover svg { transform: skewX(var(--incl)) translateX(3px); }
.sa-btn:active { transform: skewX(calc(var(--incl) * -1)) translateY(0); box-shadow: none; }
.sa-btn--lime { --fondo: var(--lime); --testo: var(--notte); }
.sa-btn--lime:hover { --fondo: #d6ff5c; }
.sa-btn--notte { --fondo: var(--notte); --testo: var(--bianco); }
.sa-btn--notte:hover { --fondo: var(--notte-3); }
.sa-btn--bianco { --fondo: var(--bianco); --testo: var(--notte); }
.sa-btn--vuoto { --fondo: transparent; --testo: currentColor; border-color: currentColor; }
.sa-btn--vuoto:hover { --fondo: rgba(255, 255, 255, .08); }
.sa-btn--piccolo { min-height: 2.5rem; padding: 0 1.1rem; font-size: .9rem; }

.sa-link-accedi { font-weight: 650; text-decoration: none; padding: .4rem .2rem; }
.sa-link-accedi:hover { text-decoration: underline; color: var(--lime); }
.sa-link-accedi--grande { font-size: 1.05rem; }

/* ---------- Testata ---------- */
.sa-testata {
    position: sticky; top: 0; z-index: 30; color: var(--bianco);
    background: rgba(6, 18, 51, 0); transition: background-color .3s var(--facile), box-shadow .3s var(--facile);
}
.sa-testata.is-scorrendo { background: rgba(6, 18, 51, .94); backdrop-filter: blur(10px); box-shadow: 0 6px 24px -14px rgba(0, 0, 0, .7); }
.sa-testata__riga { width: var(--riga); margin: 0 auto; height: 72px; display: flex; align-items: center; gap: 2rem; }
.sa-marchio img { width: 174px; height: auto; }
.sa-nav { display: flex; gap: 1.75rem; margin-left: auto; font-weight: 600; font-size: .98rem; }
.sa-nav a { text-decoration: none; color: var(--testo-notte); padding: .4rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.sa-nav a:hover, .sa-nav a[aria-current] { color: var(--bianco); border-bottom-color: var(--ciano); }
.sa-testata__azioni { display: flex; align-items: center; gap: 1.1rem; }
/* La testata sta sopra l'apertura scura: in pagina deve partire dal suo fondo. */
.sa-testata + main { margin-top: -72px; }

/* ---------- Apertura ---------- */
.sa-apertura {
    position: relative; isolation: isolate; overflow: hidden;
    background:
        radial-gradient(70% 60% at 85% 20%, rgba(31, 79, 255, .45), transparent 70%),
        linear-gradient(180deg, var(--notte) 0%, #081843 100%);
    color: var(--bianco);
    padding: calc(72px + clamp(2.5rem, 6vw, 5rem)) 0 0;
}
.sa-apertura__scie { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sa-apertura__scie i {
    position: absolute; height: 10px; left: -10%; border-radius: 0;
    background: linear-gradient(90deg, transparent, var(--ciano) 55%, var(--blu));
    transform: skewX(calc(var(--incl) * -1)); opacity: .55;
    animation: sa-scia 1.4s var(--facile) both;
}
.sa-apertura__scie i:nth-child(-n+3) { left: -24px; --fine: calc((100vw - min(1240px, 100vw - 32px)) / 2 - 28px); }
.sa-apertura__scie i:nth-child(1) { top: 22%; width: var(--fine); animation-delay: .05s; }
.sa-apertura__scie i:nth-child(2) { top: calc(22% + 22px); width: calc(var(--fine) * .78); height: 6px; opacity: .35; animation-delay: .15s; }
.sa-apertura__scie i:nth-child(3) { top: calc(22% + 40px); width: calc(var(--fine) * .55); height: 4px; opacity: .25; animation-delay: .25s; }
.sa-apertura__scie i:nth-child(4) { top: 78%; left: auto; right: -6%; width: 34%; height: 8px; opacity: .3; background: linear-gradient(90deg, var(--blu), var(--ciano) 45%, transparent); animation-name: sa-scia-destra; animation-delay: .35s; }
@keyframes sa-scia { from { translate: -60% 0; opacity: 0; } }
@keyframes sa-scia-destra { from { translate: 60% 0; opacity: 0; } }

.sa-apertura__riga {
    width: var(--riga); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.sa-apertura__testo { display: grid; gap: 1.6rem; justify-items: start; }
.sa-apertura__sotto { color: var(--testo-notte); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 34rem; }
.sa-apertura__sotto b { color: var(--bianco); font-weight: 700; }
.sa-apertura__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .4rem; }

/* La fascia del gratis: l'unico posto, con il live, dove sta il lime. */
.sa-fascia-gratis {
    display: inline-flex; align-items: baseline; gap: .7rem;
    padding: .45rem 1.3rem .5rem 1.1rem; margin-left: .4rem;
    background: var(--lime); color: var(--notte);
    transform: skewX(calc(var(--incl) * -1));
    font-style: italic; font-weight: 700; font-stretch: 80%; text-transform: uppercase;
    font-size: clamp(1.25rem, 2.3vw, 1.9rem); line-height: 1;
    box-shadow: 0 14px 30px -14px rgba(200, 255, 46, .55);
}
.sa-fascia-gratis strong { font-weight: 900; font-size: 1.45em; letter-spacing: -.01em; }

/* ---------- Il torneo d'esempio ---------- */
.sa-demo {
    background: var(--bianco); color: var(--inchiostro);
    border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem;
    box-shadow: 0 40px 80px -30px rgba(0, 4, 20, .8), 0 10px 24px -12px rgba(0, 4, 20, .5);
    display: grid; gap: 1rem;
    position: relative;
}
.sa-demo::before, .sa-demo::after {
    content: ""; position: absolute; left: calc(100% - 8px); width: 60vw; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, var(--blu), var(--ciano) 30%, transparent 80%);
    transform: skewX(calc(var(--incl) * -1));
}
.sa-demo::before { top: 62%; height: 10px; opacity: .7; }
.sa-demo::after { top: calc(62% + 20px); height: 5px; opacity: .4; width: 40vw; }
.sa-demo__barra { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.sa-demo__tipo { display: inline-flex; background: var(--ghiaccio); border-radius: 999px; padding: 4px; }
.sa-demo__tipo button {
    display: inline-flex; align-items: center; gap: .45rem; border: 0; background: transparent; cursor: pointer;
    padding: .45rem .9rem; border-radius: 999px; font-weight: 650; font-size: .9rem; color: var(--grigio); white-space: nowrap;
    transition: background-color .2s, color .2s;
}
.sa-demo__tipo button svg { width: 1.05rem; height: 1.05rem; }
.sa-demo__tipo button:hover { color: var(--inchiostro); }
.sa-demo__tipo button.is-attivo { background: var(--notte); color: var(--bianco); }
.sa-demo__esempio { font-size: .78rem; font-weight: 650; color: var(--grigio); border: 1px solid #d5dcea; border-radius: 999px; padding: .15rem .6rem; }
.sa-demo__titolo { display: flex; align-items: center; justify-content: space-between; gap: .8rem; font-weight: 750; font-size: 1.05rem; font-stretch: 90%; }

.sa-live {
    display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .55rem; border-radius: 4px;
    background: var(--notte); color: var(--lime); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.sa-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: sa-pulsa 1.2s ease-in-out infinite; }
@keyframes sa-pulsa { 50% { opacity: .25; } }

.sa-tab { display: grid; grid-template-columns: 1fr 1fr .62fr; gap: 1.4rem; align-items: center; }
.sa-tab__col { display: grid; gap: .55rem; position: relative; }
.sa-tab__col:first-child { gap: .55rem; }
.sa-tab__col:first-child .sa-gara + .sa-tab__fase { display: none; }
.sa-tab__col:first-child .sa-gara:nth-of-type(2) { margin-top: 1.2rem; }
.sa-tab__fase { font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); }
.sa-tab__fase--piccola { margin-top: .9rem; }
.sa-gara {
    border: 1px solid #dde3ef; border-radius: 8px; overflow: hidden; background: var(--bianco);
    transition: border-color .3s, box-shadow .3s;
    position: relative;
}
/* I rami del tabellone: dalle semifinali alla finale. */
.sa-tab__col:first-child .sa-gara::after {
    content: ""; position: absolute; left: 100%; top: 50%; width: .7rem; border-top: 2px solid #c9d2e4;
}
.sa-tab__col:first-child::after {
    content: ""; position: absolute; right: -.7rem; top: 25%; bottom: 25%; border-right: 2px solid #c9d2e4;
}
.sa-tab__col--finale .sa-gara--finale::before {
    content: ""; position: absolute; right: 100%; top: 50%; width: .7rem; border-top: 2px solid #c9d2e4;
}
.sa-gara--piccola { opacity: .85; }
.sa-gara.is-live { border-color: var(--notte); box-shadow: 0 0 0 2px var(--lime), var(--ombra); }
.sa-gara__riga {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    padding: .42rem .65rem; font-size: .9rem; font-weight: 550;
}
.sa-gara__riga + .sa-gara__riga { border-top: 1px solid #eef1f7; }
.sa-gara__riga span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-gara__riga b { font-variant-numeric: tabular-nums; font-weight: 800; min-width: 1.6em; text-align: right; color: var(--grigio); }
.sa-gara__riga.is-vince { font-weight: 750; }
.sa-gara__riga.is-vince b { color: var(--inchiostro); }
.sa-gara__riga.is-vince span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .45rem; vertical-align: .12em; background: var(--blu); transform: skewX(calc(var(--incl) * -1)); }
.sa-gara.is-live b { color: var(--notte); background: var(--lime); border-radius: 3px; padding: 0 .3rem; }
.sa-gara__riga.is-vuota span { color: #9aa5bf; font-style: italic; font-weight: 450; }

.sa-campione {
    display: grid; justify-items: center; gap: .2rem; text-align: center;
    padding: 1rem .5rem; border-radius: 10px; background: var(--notte); color: var(--bianco);
    opacity: .25; transform: scale(.94); transition: opacity .5s var(--facile), transform .6s var(--facile);
}
.sa-campione svg { width: 2.4rem; height: 2.4rem; color: var(--ciano); }
.sa-campione span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-notte); }
.sa-campione strong { font-style: italic; font-weight: 800; font-stretch: 78%; font-size: 1.05rem; line-height: 1.05; text-transform: uppercase; }
.sa-campione.is-pronto { opacity: 1; transform: none; }
.sa-campione.is-festa svg { animation: sa-coppa .9s var(--facile); }
@keyframes sa-coppa { 30% { transform: translateY(-6px) rotate(-8deg) scale(1.15); } 60% { transform: rotate(6deg); } }

.sa-contatore { display: grid; gap: .5rem; padding-top: .85rem; border-top: 1px dashed #d5dcea; }
.sa-contatore__caselle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.sa-contatore__caselle i { height: 12px; background: var(--ghiaccio); transform: skewX(calc(var(--incl) * -1)); transition: background-color .35s var(--facile); }
.sa-contatore__caselle i.is-piena { background: var(--lime-scuro); }
.sa-contatore__caselle i.is-ora { background: var(--lime); box-shadow: 0 0 0 2px var(--notte); }
.sa-contatore p { font-size: .88rem; color: var(--grigio); }
.sa-contatore p b { color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.sa-contatore p span { color: var(--inchiostro); font-weight: 650; }

/* ---------- Gli sport ---------- */
.sa-sport {
    width: var(--riga); margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
    padding: 1.6rem 0 1.9rem; border-top: 1px solid rgba(195, 207, 238, .18);
    font-style: italic; font-weight: 700; font-stretch: 78%; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em;
}
.sa-sport li { display: inline-flex; align-items: center; gap: .55rem; }
.sa-sport svg { width: 1.6rem; height: 1.6rem; color: var(--ciano); }
.sa-sport__altri { color: var(--testo-notte); font-weight: 500; text-transform: none; font-stretch: 90%; }

/* ---------- Squadra / individuale ---------- */
.sa-due { padding: clamp(4.5rem, 9vw, 8rem) 0 0; }
.sa-due__titolo { width: var(--riga); margin: 0 auto clamp(2.5rem, 5vw, 4rem); color: var(--notte); }
.sa-due__campi { display: grid; grid-template-columns: 1fr 1fr; }
.sa-due__lato { display: grid; gap: 1rem; align-content: start; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem); }
.sa-due__lato h3 { font-style: italic; font-weight: 800; font-stretch: 72%; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: .95; }
.sa-due__lato > p { font-size: 1.1rem; max-width: 32rem; }
.sa-due__lato--squadra {
    background: var(--blu); color: var(--bianco);
    clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0 100%);
    padding-left: max(16px, (100vw - 1240px) / 2); padding-right: clamp(4rem, 7vw, 7rem);
}
.sa-due__lato--squadra > p { color: #e3e9ff; }
.sa-due__lato--singolo {
    background: var(--ghiaccio); margin-left: -4rem; padding-left: clamp(5rem, 9vw, 9rem);
    padding-right: max(16px, (100vw - 1240px) / 2);
}
.sa-due__icone { display: flex; gap: .7rem; margin-bottom: .4rem; }
.sa-due__icone svg { width: 2.4rem; height: 2.4rem; }
.sa-due__lato--squadra .sa-due__icone { color: var(--bianco); }
.sa-due__lato--singolo .sa-due__icone { color: var(--blu); }

.sa-elenco { display: grid; gap: .7rem; margin-top: .6rem; }
.sa-elenco li { position: relative; padding-left: 1.5rem; max-width: 34rem; }
.sa-elenco li::before {
    content: ""; position: absolute; left: 0; top: .55em; width: .8rem; height: .32rem;
    background: currentColor; opacity: .9; transform: skewX(calc(var(--incl) * -1));
}
.sa-due__lato--squadra .sa-elenco li::before { background: var(--bianco); }
.sa-due__lato--singolo .sa-elenco li::before, .sa-stagione .sa-elenco li::before { background: var(--blu); }

/* ---------- I quattro passi ---------- */
.sa-passi { width: var(--riga); margin: 0 auto; padding: clamp(5rem, 10vw, 8.5rem) 0; }
.sa-passi .sa-h2 { color: var(--notte); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sa-pista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; position: relative; }
.sa-pista::before {
    content: ""; position: absolute; left: 0; right: 0; top: 3.1rem; height: 0;
    border-top: 3px dashed #c6d1e8;
}
.sa-passo { display: grid; gap: .8rem; align-content: start; position: relative; }
.sa-passo__num {
    font-style: italic; font-weight: 900; font-stretch: 70%; font-size: 6rem; line-height: 1;
    color: var(--bianco); -webkit-text-stroke: 2px var(--blu);
    background: var(--bianco); justify-self: start; padding-right: .6rem;
}
.sa-passo:last-child .sa-passo__num { -webkit-text-stroke: 0; color: var(--blu); }
.sa-passo h3 { font-weight: 750; font-size: 1.3rem; font-stretch: 90%; line-height: 1.15; color: var(--notte); }
.sa-passo p { color: var(--grigio); }
.sa-mini { margin-top: .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 650; }
.sa-mini--passi span { padding: .25rem .55rem; border-radius: 4px; background: var(--ghiaccio); color: var(--grigio); }
.sa-mini--passi span.is-fatto { background: #dce6ff; color: var(--blu-scuro); }
.sa-mini--passi span.is-ora { background: var(--notte); color: var(--bianco); }
.sa-mini--live { background: var(--notte); color: var(--bianco); border-radius: 8px; padding: .55rem .75rem; gap: .55rem; justify-self: start; }
.sa-mini--live b { font-size: 1.5rem; font-style: italic; font-weight: 800; font-variant-numeric: tabular-nums; }
.sa-mini--live em { color: var(--testo-notte); font-style: normal; font-size: .75rem; }
.sa-mini--live small { color: var(--lime); font-variant-numeric: tabular-nums; font-size: .85rem; margin-left: .2rem; }
.sa-mini--coppa { justify-self: start; gap: .5rem; padding: .45rem .8rem .45rem .6rem; background: var(--ciano); color: var(--notte); transform: skewX(calc(var(--incl) * -1)); }
.sa-mini--coppa > * { transform: skewX(var(--incl)); }
.sa-mini--coppa svg { width: 1.4rem; height: 1.4rem; }
.sa-mini--coppa span { font-style: italic; font-weight: 800; text-transform: uppercase; font-size: .95rem; }

/* ---------- Dal campo a ovunque ---------- */
.sa-flusso { background: var(--blu); color: var(--bianco); padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; overflow: hidden; }
.sa-flusso::after {
    content: ""; position: absolute; right: -8%; top: -20%; bottom: -20%; width: 34%;
    background: var(--blu-scuro); transform: skewX(calc(var(--incl) * -1)); z-index: 0;
}
.sa-flusso__riga { width: var(--riga); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; position: relative; z-index: 1; }
.sa-flusso__testo { display: grid; gap: 1.3rem; }
.sa-flusso__testo p { color: #e3e9ff; font-size: 1.12rem; max-width: 34rem; }
.sa-flusso__catena { display: grid; gap: 1rem; position: relative; }
.sa-nodo {
    display: flex; align-items: center; gap: 1.1rem; position: relative;
    background: var(--notte); border-radius: 10px; padding: .85rem 1.1rem; box-shadow: var(--ombra);
}
.sa-nodo:nth-child(2) { margin-left: 2rem; }
.sa-nodo:nth-child(3) { margin-left: 4rem; }
.sa-nodo:nth-child(4) { margin-left: 6rem; }
.sa-nodo svg { width: 2.6rem; height: 2.6rem; flex: none; color: var(--ciano); }
.sa-nodo span:last-child { color: var(--testo-notte); }
.sa-nodo b { display: block; color: var(--bianco); font-weight: 750; font-size: 1.08rem; }
.sa-nodo--campo { background: var(--ciano); }
.sa-nodo--campo svg { color: var(--notte); }
.sa-nodo--campo span:last-child { color: #06334a; }
.sa-nodo--campo b { color: var(--notte); }

/* ---------- Prezzi ---------- */
.sa-prezzi { background: var(--ghiaccio); padding: clamp(5rem, 10vw, 8.5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.sa-prezzi__riga { width: var(--riga); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sa-prezzi__testo { display: grid; gap: 1.3rem; }
.sa-prezzi__testo .sa-h2 { color: var(--notte); }
.sa-prezzi__testo > p { color: var(--grigio); font-size: 1.12rem; max-width: 34rem; }
.sa-esempi { display: grid; gap: .55rem; margin-top: .4rem; max-width: 34rem; }
.sa-esempi button {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left;
    background: var(--bianco); border: 1px solid #d7dfee; border-radius: 8px; padding: .8rem 1rem; cursor: pointer;
    font-weight: 550; color: var(--inchiostro); transition: border-color .2s, box-shadow .2s, transform .2s var(--facile);
}
.sa-esempi button b { white-space: nowrap; font-weight: 800; color: var(--blu); font-variant-numeric: tabular-nums; }
.sa-esempi button:hover { border-color: var(--blu); transform: translateX(3px); }
.sa-esempi button[aria-pressed="true"] { border-color: var(--notte); box-shadow: inset 0 0 0 1px var(--notte); }

.sa-calcolo {
    background: var(--notte); color: var(--bianco); border-radius: 16px;
    padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: .9rem; box-shadow: var(--ombra);
    position: sticky; top: 96px;
}
.sa-calcolo__etichetta { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-notte); }
.sa-calcolo__gare { font-style: italic; font-weight: 900; font-stretch: 70%; font-size: clamp(4.5rem, 9vw, 6rem); line-height: .85; font-variant-numeric: tabular-nums; }
.sa-calcolo__cursore { width: 100%; height: 2.2rem; margin: .3rem 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sa-calcolo__cursore::-webkit-slider-runnable-track {
    height: 10px; transform: skewX(calc(var(--incl) * -1));
    background: linear-gradient(90deg, var(--lime) 0 3%, var(--notte-3) 3% 15.5%, #1c3a84 15.5% 31.2%, #24479e 31.2% 93.5%, #2c55b8 93.5%);
}
.sa-calcolo__cursore::-moz-range-track { height: 10px; background: linear-gradient(90deg, var(--lime) 0 3%, var(--notte-3) 3% 15.5%, #1c3a84 15.5% 31.2%, #24479e 31.2% 93.5%, #2c55b8 93.5%); }
.sa-calcolo__cursore::-webkit-slider-thumb {
    -webkit-appearance: none; width: 26px; height: 34px; margin-top: -12px;
    background: var(--bianco); border: 3px solid var(--blu); transform: skewX(calc(var(--incl) * -1)); border-radius: 3px;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7);
}
.sa-calcolo__cursore::-moz-range-thumb { width: 22px; height: 30px; background: var(--bianco); border: 3px solid var(--blu); border-radius: 3px; }
.sa-calcolo__cursore:focus-visible { outline-offset: 6px; }
.sa-calcolo__prezzo { display: grid; gap: .15rem; padding: 1rem 0 .4rem; border-top: 1px solid rgba(195, 207, 238, .2); }
.sa-calcolo__prezzo span { font-style: italic; font-weight: 800; font-stretch: 74%; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; text-transform: uppercase; }
.sa-calcolo__prezzo small { color: var(--testo-notte); font-size: .95rem; }
.sa-calcolo.is-gratis .sa-calcolo__prezzo span { color: var(--lime); }
.sa-calcolo__azione { justify-self: start; margin-top: .4rem; }

.sa-fasce { width: var(--riga); margin: clamp(3rem, 6vw, 4.5rem) auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.sa-fascia {
    display: grid; gap: .3rem; padding: 1.1rem 1.3rem 1.2rem; background: var(--bianco);
    border-bottom: 4px solid #d3dcef; transition: background-color .3s var(--facile), border-color .3s, color .3s, transform .3s var(--facile);
}
.sa-fascia span { font-size: .88rem; color: var(--grigio); font-weight: 600; }
.sa-fascia b { font-style: italic; font-weight: 800; font-stretch: 74%; font-size: 1.9rem; line-height: 1; color: var(--notte); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.sa-fascia--gratis { border-bottom-color: var(--lime); }
.sa-fascia--gratis b { justify-self: start; color: var(--notte); background: var(--lime); padding: .1rem .5rem .15rem; transform: skewX(calc(var(--incl) * -1)); }
.sa-fascia.is-attiva { background: var(--notte); border-bottom-color: var(--blu); transform: translateY(-4px); }
.sa-fascia.is-attiva span { color: var(--testo-notte); }
.sa-fascia.is-attiva b { color: var(--bianco); }
.sa-fascia--gratis.is-attiva { border-bottom-color: var(--lime); }
.sa-fascia--gratis.is-attiva { background: var(--lime); border-bottom-color: var(--notte); }
.sa-fascia--gratis.is-attiva span { color: #2b3a12; }
.sa-fascia--gratis.is-attiva b { color: var(--notte); background: transparent; padding: 0; transform: none; }
.sa-prezzi__nota { width: var(--riga); margin: 1rem auto 0; color: var(--grigio); font-size: .9rem; }

/* ---------- Enti (fascia nella home) ---------- */
.sa-enti { background: var(--notte); color: var(--bianco); position: relative; overflow: hidden; }
.sa-enti::before { content: ""; position: absolute; left: -6%; top: 0; bottom: 0; width: 22%; background: var(--notte-2); transform: skewX(calc(var(--incl) * -1)); }
.sa-enti__riga { width: var(--riga); margin: 0 auto; padding: clamp(4.5rem, 9vw, 7rem) 0; display: grid; gap: 1.4rem; justify-items: start; position: relative; }
.sa-enti__riga p { color: var(--testo-notte); font-size: 1.12rem; max-width: 46rem; }

/* ---------- Chiusura ---------- */
.sa-chiusura {
    background: var(--lime); color: var(--notte); text-align: left;
    padding: clamp(5rem, 10vw, 8rem) max(16px, (100% - 1240px) / 2); display: grid; gap: 1.4rem; justify-items: start;
}
.sa-chiusura { position: relative; overflow: hidden; isolation: isolate; }
.sa-chiusura__coppa {
    position: absolute; z-index: -1; right: max(16px, (100% - 1240px) / 2); top: 50%;
    width: clamp(14rem, 30vw, 26rem); height: auto; translate: 0 -50%; rotate: -12deg;
    color: var(--notte);
}
.sa-chiusura__scie { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.sa-chiusura__scie i { position: absolute; right: -4%; height: 14px; background: var(--notte); transform: skewX(calc(var(--incl) * -1)); }
.sa-chiusura__scie i:nth-child(1) { top: 30%; width: 46%; }
.sa-chiusura__scie i:nth-child(2) { top: calc(30% + 30px); width: 38%; height: 8px; opacity: .55; }
.sa-chiusura__scie i:nth-child(3) { top: calc(30% + 52px); width: 30%; height: 5px; opacity: .3; }
.sa-titolo--chiusura { font-size: clamp(3rem, 8vw, 6rem); }
.sa-chiusura > p { font-size: 1.2rem; font-weight: 550; max-width: 36rem; }
.sa-chiusura .sa-link-accedi:hover { color: var(--notte); }

/* ---------- Piede ---------- */
.sa-piede { background: var(--notte); color: var(--testo-notte); padding: 3.5rem 0 2rem; }
.sa-piede__riga { width: var(--riga); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.sa-piede__marchio { display: grid; gap: .9rem; max-width: 26rem; }
.sa-piede__marchio img { width: 174px; height: auto; }
.sa-piede__nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-content: start; font-weight: 600; }
.sa-piede__nav a { text-decoration: none; }
.sa-piede__nav a:hover { color: var(--bianco); text-decoration: underline; }
.sa-piede__nota { width: var(--riga); margin: 2.5rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(195, 207, 238, .15); font-size: .85rem; }

/* ---------- Pagina Enti e Federazioni ---------- */
.sa-apertura--enti { padding-bottom: 0; }
.sa-livelli { display: grid; gap: .7rem; }
.sa-livelli li {
    display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
    padding: 1.1rem 1.4rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(195, 207, 238, .16);
    transform: skewX(calc(var(--incl) * -1));
}
.sa-livelli li > * { transform: skewX(var(--incl)); }
.sa-livelli li:nth-child(2) { margin-left: 1.4rem; }
.sa-livelli li:nth-child(3) { margin-left: 2.8rem; }
.sa-livelli li:nth-child(4) { margin-left: 4.2rem; }
.sa-livelli b { font-style: italic; font-weight: 800; font-stretch: 72%; font-size: 1.7rem; text-transform: uppercase; line-height: 1; color: var(--bianco); min-width: 7.2rem; }
.sa-livelli span { color: var(--testo-notte); }

.sa-stagione { width: var(--riga); margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem); }
.sa-stagione .sa-h2 { color: var(--notte); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.sa-stagione__tempi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.sa-tempo { padding: 0 clamp(1.2rem, 3vw, 2.5rem); border-left: 1px solid #d3dcef; display: grid; gap: .4rem; align-content: start; }
.sa-tempo:first-child { padding-left: 0; border-left: 0; }
.sa-tempo h3 { font-style: italic; font-weight: 800; font-stretch: 74%; font-size: 1.6rem; text-transform: uppercase; color: var(--blu); line-height: 1; }
.sa-stagione__nota { margin-top: clamp(2.5rem, 5vw, 3.5rem); font-weight: 650; font-size: 1.15rem; color: var(--notte); }

.sa-demo-form { background: var(--ghiaccio); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.sa-demo-form__riga { width: var(--riga); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sa-demo-form__testo { display: grid; gap: 1.2rem; }
.sa-demo-form__testo .sa-h2 { color: var(--notte); }
.sa-demo-form__testo p { color: var(--grigio); font-size: 1.12rem; max-width: 30rem; }
.sa-form { background: var(--bianco); border-radius: 14px; padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; box-shadow: var(--ombra); }
.sa-form .sa-btn { grid-column: 1 / -1; justify-self: start; margin-top: .3rem; }
.sa-form__errori:empty, .sa-form__errori.validation-summary-valid { display: none; }
.sa-form__errori { grid-column: 1 / -1; color: #b3261e; font-weight: 600; }
.sa-campo { grid-column: 1 / -1; display: grid; gap: .35rem; }
.sa-campo--meta { grid-column: auto; }
.sa-campo label { font-weight: 700; font-size: .92rem; color: var(--notte); }
.sa-campo label small { font-weight: 500; color: var(--grigio); margin-left: .3rem; }
.sa-campo input, .sa-campo textarea, .sa-campo select {
    font: inherit; font-size: 1rem; color: var(--inchiostro); width: 100%;
    padding: .75rem .9rem; border: 1.5px solid #cdd6e8; border-radius: 8px; background: var(--bianco);
    transition: border-color .2s, box-shadow .2s;
}
.sa-campo textarea { resize: vertical; min-height: 6rem; }
.sa-campo input::placeholder, .sa-campo textarea::placeholder { color: #6b7591; transition: color .15s; }
/* L'esempio è solo un esempio: sparisce appena si clicca nel campo, non quando si comincia a scrivere. */
.sa-campo input:focus::placeholder, .sa-campo textarea:focus::placeholder { color: transparent; }
.sa-campo input:hover, .sa-campo textarea:hover { border-color: #9fb0d4; }
.sa-campo input:focus, .sa-campo textarea:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 4px rgba(31, 79, 255, .18); }
.sa-campo select:hover { border-color: #9fb0d4; }
.sa-campo select:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 4px rgba(31, 79, 255, .18); }
.sa-campo input.input-validation-error, .sa-campo select.input-validation-error { border-color: #b3261e; }
/* La spunta del consenso: casella e testo sulla stessa riga, il testo che va a capo da sé. */
.sa-campo--spunta label { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; color: var(--inchiostro); cursor: pointer; }
.sa-campo--spunta input { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; padding: 0; accent-color: var(--blu); }
.sa-campo__errore { color: #b3261e; font-size: .88rem; font-weight: 600; }
.sa-campo__errore:empty { display: none; }
.sa-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sa-esito { background: var(--notte); color: var(--bianco); border-radius: 14px; padding: 2.2rem; display: grid; gap: .6rem; justify-items: start; }
.sa-esito svg { width: 3rem; height: 3rem; color: var(--lime); }
.sa-esito h3 { font-style: italic; font-weight: 800; font-stretch: 74%; font-size: 2rem; text-transform: uppercase; line-height: 1; }
.sa-esito p { color: var(--testo-notte); }

/* ---------- Registrazione (segnaposto) ---------- */
.sa-apertura--breve { min-height: 78vh; display: grid; align-items: center; padding-bottom: clamp(3rem, 6vw, 5rem); }
.sa-breve { width: var(--riga); margin: 0 auto; display: grid; gap: 1.6rem; justify-items: start; }
/* Registrazione: l'apertura è breve, il form sta subito sotto. */
.sa-apertura--registrazione { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.sa-apertura--registrazione .sa-apertura__sotto a { color: var(--bianco); font-weight: 700; }

/* ---------- Schermi stretti ---------- */
@media (max-width: 1020px) {
    .sa-apertura__riga, .sa-flusso__riga, .sa-prezzi__riga, .sa-demo-form__riga { grid-template-columns: 1fr; }
    .sa-pista { grid-template-columns: 1fr 1fr; row-gap: 3rem; }
    .sa-pista::before { display: none; }
    .sa-fasce { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sa-calcolo { position: static; }
    .sa-stagione__tempi { grid-template-columns: 1fr; gap: 2.4rem; }
    .sa-tempo { padding: 0 0 0 1.2rem; border-left: 1px solid #d3dcef; }
    .sa-tempo:first-child { padding-left: 1.2rem; border-left: 1px solid #d3dcef; }
}
@media (max-width: 860px) {
    .sa-nav { display: none; }
    .sa-testata__azioni { margin-left: auto; }
    .sa-due__campi { grid-template-columns: 1fr; }
    .sa-due__lato--squadra { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%); padding: 3rem 16px 4.5rem; }
    .sa-due__lato--singolo { margin: -2.5rem 0 0; padding: 4.5rem 16px 3.5rem; }
}
@media (max-width: 640px) {
    .sa-l { font-size: 1rem; }
    .sa-testata__riga { gap: 1rem; height: 64px; }
    .sa-testata + main { margin-top: -64px; }
    .sa-marchio img { width: 112px; }
    .sa-testata__azioni { gap: .7rem; }
    .sa-link-accedi { font-size: .92rem; }
    .sa-testata .sa-btn--piccolo { padding: 0 .8rem; font-size: .8rem; min-height: 2.3rem; }
    .sa-apertura { padding-top: calc(64px + 2.2rem); }
    .sa-fascia-gratis { font-size: 1.3rem; }
    .sa-apertura__scie i:nth-child(-n+3) { display: none; }
    .sa-demo::before, .sa-demo::after { display: none; }
    .sa-chiusura__coppa { width: 8rem; top: auto; bottom: -1.2rem; right: 4px; translate: none; opacity: .85; }
    .sa-chiusura__scie { display: none; }
    .sa-demo { padding: .9rem; }
    .sa-demo__tipo button { padding: .4rem .7rem; font-size: .85rem; }
    .sa-demo__tipo button svg { display: none; }
    .sa-tab { grid-template-columns: 1fr 1fr; gap: 1rem .9rem; }
    .sa-tab__col--coppa { grid-column: 1 / -1; }
    .sa-campione { grid-auto-flow: column; justify-content: center; align-items: center; gap: .6rem; padding: .7rem; }
    .sa-campione svg { width: 1.8rem; height: 1.8rem; }
    .sa-gara__riga { font-size: .82rem; padding: .38rem .5rem; }
    .sa-sport { justify-content: flex-start; gap: .8rem 1.4rem; font-size: 1rem; }
    .sa-pista { grid-template-columns: 1fr; }
    .sa-passo__num { font-size: 4.5rem; }
    .sa-nodo:nth-child(n) { margin-left: 0; }
    .sa-fasce { grid-template-columns: 1fr 1fr; }
    .sa-fascia--gratis { grid-column: 1 / -1; }
    .sa-livelli li:nth-child(n) { margin-left: 0; }
    .sa-form { grid-template-columns: 1fr; }
    .sa-campo--meta { grid-column: 1 / -1; }
    .sa-apertura__azioni .sa-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .sa-l *, .sa-l *::before, .sa-l *::after { animation: none !important; transition: none !important; }
    html:has(.sa-l) { scroll-behavior: auto; }
}