/* ==========================================================================
   Educazione Fisica per Tutti — foglio di stile unico del tema.

   Il sito di partenza era costruito con Elementor: stessa identita' (blu #004AAD,
   sezioni con occhiello + titolo, card, testimonianze, FAQ) ma con centinaia di
   regole generate e wrapper annidati. Qui la stessa lettura viene ottenuta con
   pochi token e un pugno di componenti riusati ovunque: meno peso, meno CLS,
   e soprattutto un solo posto dove cambiare colore, raggio o spaziatura.

   Ordine: 1 token · 2 base · 3 tipografia · 4 impianto · 5 bottoni · 6 form
           7 header · 8 hero · 9 sezioni · 10 card · 11 catalogo · 12 scheda
           13 blog · 14 FAQ · 15 newsletter · 16 carrello · 17 footer · 18 utility
   ========================================================================== */

/* ---------- 1. Token ---------- */

:root {
    /* Il blu del marchio e' l'unico colore forte: tutto il resto e' neutro,
       cosi' quando compare (pulsante, prezzo, link) significa davvero qualcosa. */
    --blu: #004AAD;
    --blu-scuro: #00398A;
    --blu-chiaro: #EAF1FC;
    --blu-tenue: #F4F8FE;

    /* Verde riservato al gratuito: meta' del catalogo e' fatto di materiali
       gratis, sono il primo passo dell'imbuto e devono saltare all'occhio. */
    --verde: #0B7A5A;
    --verde-chiaro: #E6F5F0;
    --ambra: #9A6200;
    --ambra-chiaro: #FDF4E3;
    --rosso: #B42318;

    --inchiostro: #101828;
    --testo: #344054;
    --tenue: #667085;
    --bordo: #E4E8EF;
    --bordo-forte: #CFD6E2;
    --sfondo: #FFFFFF;
    --sfondo-alt: #F7F9FC;

    /* Scala tipografica fluida: niente media query per i corpi di testo,
       il titolo si adatta da 320px a 1440px senza scalini. */
    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-base: 1.0625rem;
    --t-lg: clamp(1.125rem, 0.45vw + 1rem, 1.25rem);
    --t-h4: clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem);
    --t-h3: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
    --t-h2: clamp(1.75rem, 2vw + 1.2rem, 2.625rem);
    --t-h1: clamp(2.125rem, 3.2vw + 1.25rem, 3.5rem);

    /* Passo di 4px: tutte le distanze sono multipli, per questo il ritmo
       verticale resta coerente anche mettendo insieme componenti diversi. */
    --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
    --s9: 5.5rem;

    --r-sm: 8px;
    --r: 14px;
    --r-lg: 20px;
    --r-full: 999px;

    /* Ombre appena accennate: la gerarchia la fanno bordo e sfondo, l'ombra
       serve solo a staccare cio' che galleggia davvero (menu, drawer, sticky). */
    --ombra-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --ombra: 0 4px 16px rgba(16, 24, 40, .07);
    --ombra-lg: 0 16px 48px rgba(16, 24, 40, .13);

    --contenitore: 1200px;
    --stretto: 760px;
    --header-h: 108px;

    --transizione: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* l'ancora non finisce sotto l'header fisso */
    scroll-padding-top: calc(var(--header-h) + var(--s4));
}

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: 'Inter var', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--sfondo-alt); }

a { color: var(--blu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blu-scuro); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Un solo stile di focus per tutto il sito, visibile su qualsiasi sfondo.
   :focus-visible e non :focus, altrimenti l'anello comparirebbe anche al clic. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--blu);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::selection { background: var(--blu-chiaro); color: var(--blu-scuro); }

/* ---------- 3. Tipografia ---------- */

h1, h2, h3, h4, h5 {
    margin: 0 0 var(--s3);
    color: var(--inchiostro);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.021em;
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); letter-spacing: -0.031em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.026em; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; color: var(--inchiostro); }
small { font-size: var(--t-sm); }

/* Occhiello: la piccola etichetta maiuscola sopra il titolo di sezione.
   Il sito di partenza la usava ovunque, e' un tratto identitario da tenere. */
.occhiello {
    display: inline-block;
    margin: 0 0 var(--s3);
    color: var(--blu);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sommario {
    max-width: 62ch;
    color: var(--tenue);
    font-size: var(--t-lg);
    line-height: 1.6;
}

/* Testo che arriva dall'editor (descrizioni prodotto, articoli, pagine legali):
   non possiamo controllarne il markup, quindi lo normalizziamo qui. */
.prosa > :first-child { margin-top: 0; }
.prosa > :last-child { margin-bottom: 0; }
.prosa h2 { margin-top: var(--s6); font-size: var(--t-h3); }
.prosa h3 { margin-top: var(--s5); font-size: var(--t-h4); }
.prosa ul, .prosa ol { margin: 0 0 var(--s4); padding-left: 1.35em; }
.prosa li { margin-bottom: var(--s2); }
.prosa li::marker { color: var(--blu); }
.prosa img { border-radius: var(--r); margin: var(--s5) 0; }
.prosa a { font-weight: 550; }
.prosa blockquote {
    margin: var(--s5) 0;
    padding: var(--s2) 0 var(--s2) var(--s5);
    border-left: 3px solid var(--blu);
    color: var(--inchiostro);
    font-size: var(--t-lg);
}
.prosa table { width: 100%; border-collapse: collapse; margin: var(--s5) 0; font-size: var(--t-sm); }
.prosa th, .prosa td { padding: var(--s3); border: 1px solid var(--bordo); text-align: left; }
.prosa th { background: var(--sfondo-alt); color: var(--inchiostro); }
/* le tabelle larghe scorrono da sole invece di allargare la pagina */
.prosa .tabella-scroll { overflow-x: auto; }

/* ---------- 4. Impianto ---------- */

.contenitore {
    width: 100%;
    max-width: var(--contenitore);
    margin-inline: auto;
    padding-inline: var(--s5);
}

.contenitore-stretto { max-width: var(--stretto); }

.sezione { padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.sezione-alt { background: var(--sfondo-alt); }
.sezione-blu { background: var(--blu-tenue); }
.sezione-compatta { padding-block: var(--s7); }

/* Intestazione di sezione centrata: occhiello, titolo, sommario. */
.sez-testa { max-width: 68ch; margin: 0 auto var(--s7); text-align: center; }
.sez-testa .sommario { margin-inline: auto; }
.sez-testa--sx { margin-inline: 0; text-align: left; }
.sez-testa--sx .sommario { margin-inline: 0; }

/* Griglia a colonne uguali che si adatta senza breakpoint: le card scendono
   a capo da sole quando non entrano piu' nella larghezza minima. */
.griglia {
    display: grid;
    gap: var(--s5);
    grid-template-columns: repeat(auto-fill, minmax(var(--min-col, 280px), 1fr));
}
.griglia-2 { --min-col: 340px; }
.griglia-3 { --min-col: 300px; }
.griglia-4 { --min-col: 240px; }

.due-colonne {
    display: grid;
    gap: clamp(var(--s5), 5vw, var(--s8));
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

/* ---------- 5. Bottoni ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 0.8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--blu);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background var(--transizione), border-color var(--transizione),
                color var(--transizione), transform var(--transizione);
}
.btn:hover { background: var(--blu-scuro); color: #fff; transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-2 {
    background: #fff;
    border-color: var(--bordo-forte);
    color: var(--inchiostro);
}
.btn-2:hover { background: var(--sfondo-alt); border-color: var(--blu); color: var(--blu); }

.btn-fantasma { background: transparent; color: var(--blu); padding-inline: var(--s3); }
.btn-fantasma:hover { background: var(--blu-chiaro); color: var(--blu-scuro); }

.btn-chiaro { background: #fff; color: var(--blu); }
.btn-chiaro:hover { background: var(--blu-chiaro); color: var(--blu-scuro); }

.btn-grande { padding: 1rem 1.9rem; font-size: var(--t-base); }
.btn-piena { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
}

/* Freccia che scivola all'hover: unico vezzo animato, e solo sui link-azione. */
.btn .freccia { transition: transform var(--transizione); }
.btn:hover .freccia { transform: translateX(3px); }

/* ---------- 6. Form ---------- */

.campo { display: block; margin-bottom: var(--s4); }
.campo > span, .etichetta {
    display: block;
    margin-bottom: var(--s2);
    color: var(--inchiostro);
    font-size: var(--t-sm);
    font-weight: 600;
}

.input, .campo input:not([type="checkbox"]):not([type="radio"]),
.campo select, .campo textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: var(--t-sm);
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
.input:focus, .campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--blu);
    box-shadow: 0 0 0 3px var(--blu-chiaro);
    outline: none;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo select { appearance: none; padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 16px;
}

.consenso {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--tenue);
}
.consenso input { margin-top: .25em; flex: none; accent-color: var(--blu); }

.aiuto { margin-top: var(--s2); color: var(--tenue); font-size: var(--t-xs); }
.errore { color: var(--rosso); font-size: var(--t-sm); }

/* Trappola per i bot: fuori schermo ma non display:none, che alcuni bot saltano. */
.trappola {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.avviso {
    padding: var(--s4);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--blu);
    border-radius: var(--r-sm);
    background: var(--blu-tenue);
    font-size: var(--t-sm);
}
.avviso-ok { border-left-color: var(--verde); background: var(--verde-chiaro); }
.avviso-ko { border-left-color: var(--rosso); background: #FEF3F2; }

/* ---------- 7. Header ---------- */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--bordo);
}
/* il bordo compare solo quando la pagina e' scrollata: header piu' pulito in cima */
.header:not(.e-scrollato) { border-bottom-color: transparent; }
.header.e-scrollato { box-shadow: var(--ombra-sm); }

.header-barra {
    display: flex;
    align-items: center;
    gap: var(--s5);
    min-height: var(--header-h);
    max-width: var(--contenitore);
    margin-inline: auto;
    padding-inline: var(--s5);
}

.marchio { flex: none; display: flex; align-items: center; }
/* Il marchio ha il testo dell'associazione dentro l'immagine: sotto gli 80px
   diventa illeggibile, per questo l'header e' piu' alto della norma. */
.marchio img { height: 84px; width: auto; background: none; }

.nav { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }

/* inline-flex e non inline: dentro la tendina il link non e' un flex item e
   resterebbe inline, dove il padding verticale non conta — finiva piu' in alto
   dei fratelli. Cosi' tutte le voci hanno la stessa scatola, ovunque stiano. */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    color: var(--testo);
    font-size: var(--t-sm);
    font-weight: 550;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transizione), background var(--transizione);
}
.nav-link:hover { color: var(--blu); background: var(--blu-tenue); }
.nav-link[aria-current="page"] { color: var(--blu); font-weight: 650; }
.nav-link svg { flex: none; }
/* la freccetta ruota quando la tendina e' aperta: dice che c'e' altro sotto */
.nav-voce:hover .nav-link svg,
.nav-voce:focus-within .nav-link svg { transform: rotate(180deg); }
.nav-link svg { transition: transform var(--transizione); }

/* Tendina delle categorie: si apre su hover da desktop e su clic da tastiera. */
.nav-voce { position: relative; }
.nav-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    padding: var(--s3);
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--ombra-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transizione), transform var(--transizione), visibility var(--transizione);
}
.nav-voce:hover .nav-menu,
.nav-voce:focus-within .nav-menu {
    opacity: 1; visibility: visible; transform: none;
}
.nav-menu a {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    color: var(--testo);
    font-size: var(--t-sm);
    text-decoration: none;
}
.nav-menu a:hover { background: var(--blu-tenue); color: var(--blu); }
.nav-menu .conteggio { color: var(--tenue); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

.header-azioni { display: flex; align-items: center; gap: var(--s2); flex: none; }

.icona-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--testo);
    transition: background var(--transizione), color var(--transizione);
}
.icona-btn:hover { background: var(--blu-tenue); color: var(--blu); }

.pallino {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px; height: 18px;
    padding-inline: 4px;
    border-radius: var(--r-full);
    background: var(--blu);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pallino[hidden] { display: none; }

.hamburger { display: none; }

/* Barra dei vantaggi sotto l'header: sostituisce i sigilli finti del sito
   vecchio con fatti verificabili (materiali reali, download immediato, IVA inclusa). */
.usp {
    background: var(--blu);
    color: #fff;
    font-size: var(--t-xs);
    letter-spacing: .01em;
}
.usp ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2) var(--s6);
    max-width: var(--contenitore);
    margin-inline: auto;
    padding: var(--s3) var(--s5);
    list-style: none;
}
.usp li { display: flex; align-items: center; gap: var(--s2); }
.usp svg { flex: none; opacity: .85; }

@media (max-width: 1080px) {
    .nav { display: none; }
    .hamburger { display: grid; }
}
@media (max-width: 760px) {
    :root { --header-h: 74px; }
    .marchio img { height: 52px; }
    .header-azioni .btn { display: none; }
    .usp li:nth-child(n+3) { display: none; }
}

/* Pannello mobile: scorre da destra, occupa quasi tutto lo schermo. */
.pannello {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 200;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: var(--ombra-lg);
    transform: translateX(101%);
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
    overscroll-behavior: contain;
}
.pannello.e-aperto { transform: none; }
.pannello-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--bordo);
}
.pannello-testa h2 { margin: 0; font-size: var(--t-h4); }
.pannello-corpo { flex: 1; overflow-y: auto; padding: var(--s4) var(--s5); }
.pannello-piede { padding: var(--s5); border-top: 1px solid var(--bordo); background: var(--sfondo-alt); }

.chiudi {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--bordo);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--testo);
    font-size: 20px;
    line-height: 1;
}
.chiudi:hover { background: var(--sfondo-alt); color: var(--inchiostro); }

/* ---------- Menu mobile ----------
   Non e' l'elenco del desktop rimpicciolito: su un telefono il pollice ha
   bisogno di bersagli grandi, e chi arriva qui di solito sa gia' cosa cerca.
   Quindi prima la ricerca, poi le sezioni, poi le categorie come pastiglie
   (si leggono a colpo d'occhio e mostrano quanti materiali contengono). */

.menu-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--bordo);
}
.menu-testa img { height: 46px; width: auto; background: none; }

.menu-cerca { position: relative; margin-bottom: var(--s5); }
.menu-cerca input {
    width: 100%;
    padding: 0.85rem 0.95rem 0.85rem 2.7rem;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--r-sm);
    background: var(--sfondo-alt);
    font-size: var(--t-base);
}
.menu-cerca input:focus { background: #fff; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-chiaro); outline: none; }
.menu-cerca svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--tenue); pointer-events: none; }

.menu-titolo {
    margin: var(--s6) 0 var(--s3);
    color: var(--tenue);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.menu-voce {
    display: flex;
    align-items: center;
    gap: var(--s4);
    /* 56px di altezza: la misura minima perche' un pollice non sbagli bersaglio */
    min-height: 56px;
    padding: var(--s2) var(--s3);
    margin-inline: calc(var(--s3) * -1);
    border-radius: var(--r);
    color: var(--inchiostro);
    font-size: var(--t-lg);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transizione), color var(--transizione);
}
.menu-voce:active, .menu-voce:hover { background: var(--blu-tenue); color: var(--blu); }
.menu-voce[aria-current="page"] { color: var(--blu); background: var(--blu-tenue); }
.menu-voce .ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--blu-chiaro);
    color: var(--blu);
}
.menu-voce .freccia-voce { margin-left: auto; color: var(--bordo-forte); flex: none; }

/* Categorie come pastiglie: entrano tutte in due schermate di pollice,
   contro le otto righe che occuperebbero incolonnate. */
.menu-cat { display: flex; flex-wrap: wrap; gap: var(--s2); }
.menu-cat a {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--bordo);
    border-radius: var(--r-full);
    background: #fff;
    color: var(--testo);
    font-size: var(--t-sm);
    font-weight: 550;
    text-decoration: none;
}
.menu-cat a:active, .menu-cat a:hover { border-color: var(--blu); background: var(--blu-tenue); color: var(--blu); }
.menu-cat .conteggio {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--r-full);
    background: var(--sfondo-alt);
    color: var(--tenue);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.menu-social { display: flex; gap: var(--s3); margin-top: var(--s4); }
.menu-social a {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--bordo);
    border-radius: var(--r-sm);
    color: var(--tenue);
}
.menu-social a:hover { border-color: var(--blu); color: var(--blu); background: var(--blu-tenue); }

/* Le voci entrano in sequenza mentre il pannello scivola: da' l'idea che il
   menu si stia "aprendo" invece di comparire tutto insieme. Sotto
   prefers-reduced-motion la regola globale le porta a durata zero. */
.pannello [data-scaglione] {
    opacity: 0;
    transform: translateX(14px);
}
.pannello.e-aperto [data-scaglione] {
    animation: menuEntra 320ms cubic-bezier(.2, .7, .3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 38ms + 90ms);
}
@keyframes menuEntra {
    to { opacity: 1; transform: none; }
}

.velo {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transizione), visibility var(--transizione);
}
.velo.e-aperto { opacity: 1; visibility: visible; }

/* Il corpo non deve scorrere dietro a un pannello aperto. */
body.e-bloccato { overflow: hidden; }

/* ---------- 8. Hero ---------- */

.hero {
    position: relative;
    padding-block: clamp(var(--s7), 7vw, var(--s9));
    background: linear-gradient(180deg, var(--blu-tenue) 0%, #fff 100%);
    overflow: hidden;
}
.hero-griglia {
    display: grid;
    gap: clamp(var(--s5), 5vw, var(--s8));
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.hero h1 { margin-bottom: var(--s4); }
.hero .sommario { margin-bottom: var(--s6); }
.hero-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); }

.hero-figura {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--ombra-lg);
    aspect-ratio: 4 / 3;
}
.hero-figura img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero fotografico ----------
   Foto a tutta larghezza con una velatura blu sopra. La velatura non e'
   decorazione: senza, il testo bianco su una foto di palestra passerebbe da
   leggibile a illeggibile a seconda di dove cade il soggetto. Il gradiente
   e' piu' fitto a sinistra, dove sta il testo, e si apre a destra per non
   spegnere del tutto l'immagine. */
.hero-foto {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(320px, 42vw, 460px);
    padding-block: clamp(var(--s7), 6vw, var(--s9));
    background: var(--blu-scuro);
    overflow: hidden;
    isolation: isolate;
}
.hero-foto > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(0, 57, 138, .94) 0%, rgba(0, 74, 173, .86) 45%, rgba(0, 74, 173, .62) 100%);
}
.hero-foto .occhiello { color: #fff; opacity: .85; }
.hero-foto h1 { color: #fff; max-width: 20ch; }
.hero-foto .sommario { color: rgba(255, 255, 255, .88); }
.hero-foto .briciole { padding-top: 0; margin-bottom: var(--s5); }
.hero-foto .briciole a,
.hero-foto .briciole li,
.hero-foto .briciole [aria-current="page"] { color: rgba(255, 255, 255, .75); }
.hero-foto .briciole a:hover { color: #fff; }
.hero-foto .briciole li + li::before { color: rgba(255, 255, 255, .45); }

/* La parola in corsivo dentro al titolo: e' il tratto tipografico del sito
   di partenza, l'unico punto in cui compare una grazia. Serve a dare un
   accento senza cambiare colore. */
.accento {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Riquadri dei recapiti: icona in tondo, etichetta, dato. */
.recapito {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    background: #fff;
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
.recapito:hover { border-color: var(--bordo-forte); box-shadow: var(--ombra); }
.recapito .tondo {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px; height: 48px;
    border-radius: var(--r-full);
    background: var(--blu);
    color: #fff;
}
.recapito .etichetta-rec {
    display: block;
    margin-bottom: 2px;
    color: var(--blu);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.recapito .dato { color: var(--inchiostro); font-size: var(--t-lg); font-weight: 600; line-height: 1.35; }
.recapito .dato a { color: inherit; text-decoration: none; }
.recapito .dato a:hover { color: var(--blu); text-decoration: underline; }
.recapito .nota { margin: var(--s2) 0 0; color: var(--tenue); font-size: var(--t-sm); }

/* Riprova sociale sotto il titolo: numeri veri, non contatori animati finti. */
.hero-prova {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5) var(--s7);
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid var(--bordo);
}
.hero-prova div { min-width: 90px; }
.hero-prova dt { color: var(--inchiostro); font-size: var(--t-h3); font-weight: 700; line-height: 1.1; }
.hero-prova dd { margin: var(--s1) 0 0; color: var(--tenue); font-size: var(--t-xs); }

/* ---------- 9. Card generiche ---------- */

.card {
    display: flex;
    flex-direction: column;
    padding: var(--s5);
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    background: #fff;
    transition: border-color var(--transizione), box-shadow var(--transizione), transform var(--transizione);
}
.card:hover { border-color: var(--bordo-forte); box-shadow: var(--ombra); }
.card h3 { font-size: var(--t-h4); }
.card p { color: var(--tenue); font-size: var(--t-sm); }
.card > :last-child { margin-top: auto; padding-top: var(--s4); }

.card-icona {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    margin-bottom: var(--s4);
    border-radius: var(--r-sm);
    background: var(--blu-chiaro);
    color: var(--blu);
}

/* Passi numerati "Da dove inizio?": il numero e' decorativo, la sequenza
   la comunica gia' l'ordine della lista, quindi resta fuori dallo screen reader. */
.passi { counter-reset: passo; }
.passo { position: relative; padding-left: calc(var(--s8) + var(--s2)); }
.passo::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute;
    left: 0; top: 0;
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--r-full);
    background: var(--blu);
    color: #fff;
    font-size: var(--t-lg);
    font-weight: 700;
}
.passo h3 { margin-bottom: var(--s2); font-size: var(--t-h4); }
.passo p { margin: 0; color: var(--tenue); font-size: var(--t-sm); }

/* Testimonianze: virgolette discrete, niente stelle finte. */
.testimonianza { display: flex; flex-direction: column; gap: var(--s4); }
.testimonianza blockquote {
    margin: 0;
    color: var(--testo);
    font-size: var(--t-sm);
    line-height: 1.7;
}
.testimonianza blockquote::before { content: "\201C"; color: var(--blu); font-size: 2rem; line-height: 0; vertical-align: -0.35em; margin-right: 2px; }
.testimonianza figcaption { display: flex; align-items: center; gap: var(--s3); margin-top: auto; }
.iniziale {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: var(--r-full);
    background: var(--blu-chiaro);
    color: var(--blu);
    font-weight: 700;
    font-size: var(--t-sm);
}
.testimonianza .nome { color: var(--inchiostro); font-weight: 650; font-size: var(--t-sm); }
.testimonianza .ruolo { color: var(--tenue); font-size: var(--t-xs); }

/* ---------- 9b. Cronologia, formatori, galleria ---------- */

/* Cronologia dell'associazione: una linea sola, verticale su mobile e
   orizzontale da tablet in su. Le tacche sono sulla linea, non accanto:
   la lettura resta ancorata anche quando i testi hanno lunghezze diverse. */
.cronologia {
    display: grid;
    gap: var(--s6);
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.crono-voce {
    position: relative;
    padding-top: var(--s6);
    border-top: 2px solid var(--bordo);
}
.crono-voce::before {
    content: "";
    position: absolute;
    top: -9px; left: 0;
    width: 16px; height: 16px;
    border: 3px solid #fff;
    border-radius: var(--r-full);
    background: var(--blu);
    box-shadow: 0 0 0 1px var(--bordo-forte);
}
.crono-anno {
    display: block;
    margin-bottom: var(--s2);
    color: var(--blu);
    font-size: var(--t-h4);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.crono-voce p { margin: 0; color: var(--tenue); font-size: var(--t-sm); }

/* Schede dei formatori. Niente foto: non sappiamo con certezza quale volto
   corrisponda a quale nome, e attribuirne uno sbagliato a una persona reale
   sarebbe peggio che non metterlo. Le iniziali fanno lo stesso lavoro. */
.formatore { gap: var(--s4); }
.formatore-testa { display: flex; align-items: center; gap: var(--s4); }
.formatore .iniziale { width: 52px; height: 52px; font-size: var(--t-base); }
.formatore h3 { margin: 0 0 2px; font-size: var(--t-base); }
.formatore .ruolo { color: var(--blu); font-size: var(--t-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.formatore .bio { margin: 0; color: var(--tenue); font-size: var(--t-sm); }
.formatore .bio ul { margin: var(--s2) 0 0; padding-left: 1.2em; }
.formatore .bio li { margin-bottom: var(--s1); }

/* Galleria a mosaico: la prima immagine occupa due colonne e due righe,
   cosi' la griglia non sembra un foglio di provini tutti uguali. */
.galleria-mosaico {
    display: grid;
    gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.galleria-mosaico figure {
    position: relative;
    margin: 0;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--sfondo-alt);
}
.galleria-mosaico img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
}
.galleria-mosaico figure:hover img { transform: scale(1.04); }
@media (min-width: 720px) {
    .galleria-mosaico { grid-template-columns: repeat(4, 1fr); }
    .galleria-mosaico figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* ---------- 10. Catalogo ---------- */

.prodotto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    background: #fff;
    overflow: hidden;
    transition: border-color var(--transizione), box-shadow var(--transizione), transform var(--transizione);
}
.prodotto-card:hover { border-color: var(--bordo-forte); box-shadow: var(--ombra); transform: translateY(-2px); }

.prodotto-foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--sfondo-alt);
    overflow: hidden;
}
.prodotto-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.4, 0, .2, 1); }
.prodotto-card:hover .prodotto-foto img { transform: scale(1.03); }
.prodotto-foto--vuota { display: grid; place-items: center; color: var(--bordo-forte); }

.prodotto-corpo { display: flex; flex-direction: column; flex: 1; gap: var(--s2); padding: var(--s4); }
.prodotto-cat { color: var(--tenue); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.prodotto-nome { margin: 0; font-size: var(--t-base); font-weight: 650; line-height: 1.35; }
.prodotto-nome a { color: var(--inchiostro); text-decoration: none; }
/* tutta la card e' cliccabile, ma il link resta uno solo per gli screen reader */
.prodotto-nome a::after { content: ""; position: absolute; inset: 0; }
.prodotto-card:hover .prodotto-nome a { color: var(--blu); }
.prodotto-estratto {
    margin: 0;
    color: var(--tenue);
    font-size: var(--t-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prodotto-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-top: auto;
    padding-top: var(--s3);
}
.prezzo { color: var(--inchiostro); font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.prezzo-barrato { margin-left: var(--s2); color: var(--tenue); font-size: var(--t-sm); font-weight: 400; text-decoration: line-through; }
.prezzo-gratis { color: var(--verde); }

/* I pulsanti dentro la card devono stare sopra il link a tutta area. */
.prodotto-piede .btn, .prodotto-azione { position: relative; z-index: 1; }

.etichetta {
    position: absolute;
    top: var(--s3); left: var(--s3);
    z-index: 1;
    padding: 4px 10px;
    border-radius: var(--r-full);
    background: var(--inchiostro);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.etichetta-gratis { background: var(--verde); }
.etichetta-corso { background: var(--blu); }
.etichetta-quota { background: var(--ambra); }
.etichetta-sconto { background: var(--rosso); }

.pillola {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 3px 10px;
    border-radius: var(--r-full);
    background: var(--sfondo-alt);
    color: var(--tenue);
    font-size: var(--t-xs);
    font-weight: 600;
}
.pillola-blu { background: var(--blu-chiaro); color: var(--blu); }
.pillola-verde { background: var(--verde-chiaro); color: var(--verde); }

/* Barra filtri del catalogo: sempre visibile, con i conteggi.
   Sul sito vecchio i filtri erano nascosti in un pannello laterale. */
.filtri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s6);
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--bordo);
}
.filtro {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--r-full);
    background: #fff;
    color: var(--testo);
    font-size: var(--t-sm);
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transizione);
}
.filtro:hover { border-color: var(--blu); color: var(--blu); }
.filtro[aria-current="true"], .filtro.e-attivo {
    background: var(--blu); border-color: var(--blu); color: #fff;
}
.filtro .conteggio { opacity: .65; font-variant-numeric: tabular-nums; }

.catalogo-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    margin-bottom: var(--s4);
}
.risultati { color: var(--tenue); font-size: var(--t-sm); }

.vuoto {
    padding: var(--s8) var(--s5);
    border: 1px dashed var(--bordo-forte);
    border-radius: var(--r);
    text-align: center;
    color: var(--tenue);
}

/* ---------- 11. Briciole ---------- */

.briciole { padding-block: var(--s4); font-size: var(--t-sm); }
.briciole ol { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.briciole li { display: flex; align-items: center; gap: var(--s2); color: var(--tenue); }
.briciole li + li::before { content: "/"; color: var(--bordo-forte); }
.briciole a { color: var(--tenue); text-decoration: none; }
.briciole a:hover { color: var(--blu); text-decoration: underline; }
.briciole [aria-current="page"] { color: var(--inchiostro); }

/* ---------- 12. Scheda prodotto ---------- */

.scheda { display: grid; gap: clamp(var(--s5), 4vw, var(--s8)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); align-items: start; }

.galleria { position: sticky; top: calc(var(--header-h) + var(--s4)); }
.galleria-principale {
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--sfondo-alt);
    aspect-ratio: 4 / 3;
}
.galleria-principale img { width: 100%; height: 100%; object-fit: cover; }
.galleria-mini { display: flex; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.galleria-mini button {
    width: 76px; height: 62px;
    padding: 0;
    border: 1px solid var(--bordo);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: none;
    transition: border-color var(--transizione);
}
.galleria-mini button:hover { border-color: var(--bordo-forte); }
.galleria-mini button[aria-current="true"] { border-color: var(--blu); box-shadow: 0 0 0 2px var(--blu-chiaro); }
.galleria-mini img { width: 100%; height: 100%; object-fit: cover; }

.scheda-info > * + * { margin-top: var(--s4); }
.scheda-info h1 { margin: 0; }
.scheda-prezzo { display: flex; align-items: baseline; gap: var(--s3); }
.scheda-prezzo .prezzo { font-size: var(--t-h3); }

.specifiche { display: grid; gap: var(--s3); margin: 0; padding: var(--s5); border: 1px solid var(--bordo); border-radius: var(--r); background: var(--sfondo-alt); }
.specifiche div { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--t-sm); }
.specifiche dt { color: var(--tenue); }
.specifiche dd { margin: 0; color: var(--inchiostro); font-weight: 600; text-align: right; }

.rassicurazioni { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--tenue); }
.rassicurazioni li { display: flex; align-items: flex-start; gap: var(--s3); }
.rassicurazioni svg { flex: none; margin-top: .2em; color: var(--verde); }

/* ---------- 13. Blog ---------- */

.articolo-card { overflow: hidden; padding: 0; }
.articolo-card .prodotto-foto { aspect-ratio: 16 / 9; }
.articolo-corpo { display: flex; flex-direction: column; flex: 1; gap: var(--s2); padding: var(--s5); }
.articolo-data { color: var(--tenue); font-size: var(--t-xs); }
.articolo-card h3 { margin: 0; font-size: var(--t-h4); }
.articolo-card h3 a { color: var(--inchiostro); text-decoration: none; }
.articolo-card:hover h3 a { color: var(--blu); }

.articolo-testa { max-width: var(--stretto); margin: 0 auto var(--s7); text-align: center; }
.articolo-corpo-testo { max-width: var(--stretto); margin-inline: auto; }
.articolo-copertina { max-width: var(--stretto); margin: 0 auto var(--s7); border-radius: var(--r-lg); overflow: hidden; }

/* ---------- 14. FAQ ---------- */

.faq { max-width: var(--stretto); margin-inline: auto; }
.faq details {
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    background: #fff;
    margin-bottom: var(--s3);
    transition: border-color var(--transizione);
}
.faq details[open] { border-color: var(--blu); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    color: var(--inchiostro);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    flex: none;
    width: 11px; height: 11px;
    border-right: 2px solid var(--blu);
    border-bottom: 2px solid var(--blu);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--transizione);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .risposta { padding: 0 var(--s5) var(--s5); color: var(--tenue); font-size: var(--t-sm); }

/* ---------- 15. Newsletter ---------- */

.nl {
    padding: clamp(var(--s6), 5vw, var(--s8));
    border-radius: var(--r-lg);
    background: var(--blu);
    color: #fff;
}
.nl h2, .nl h3 { color: #fff; }
.nl p { color: rgba(255, 255, 255, .82); }
.nl-griglia { display: grid; gap: clamp(var(--s5), 4vw, var(--s7)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; }

.nl-form { display: grid; gap: var(--s3); }
.nl-riga { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* :not([type=checkbox]) e' obbligatorio: senza, il width:100% prende anche la
   casella del consenso, che diventa larga quanto il form e spinge il testo
   fuori dallo schermo — su mobile la pagina finiva per scorrere in orizzontale. */
.nl-form input:not([type="checkbox"]), .nl-form select {
    width: 100%;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: var(--t-sm);
}
.nl-form input::placeholder { color: rgba(255, 255, 255, .6); }
.nl-form input:not([type="checkbox"]):focus, .nl-form select:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .16);
    box-shadow: none;
    outline: 2px solid rgba(255, 255, 255, .5);
    outline-offset: 1px;
}
/* la tendina si apre sul bianco, quindi le opzioni tornano scure */
.nl-form select option { color: var(--inchiostro); }
.nl-form .consenso { color: rgba(255, 255, 255, .8); }
.nl-form .consenso a { color: #fff; }
.nl-form .consenso input { accent-color: #fff; }
.nl-esito { display: none; }
.nl.e-inviato .nl-form { display: none; }
.nl.e-inviato .nl-esito { display: block; }

/* La newsletter compare anche in versione compatta nel footer. */
.nl-compatta { padding: 0; background: none; border-radius: 0; }
.nl-compatta .nl-form input { border-color: rgba(255, 255, 255, .22); }

/* ---------- 16. Carrello ---------- */

.riga-carrello {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    gap: var(--s4);
    padding-block: var(--s4);
    border-bottom: 1px solid var(--bordo);
}
.riga-carrello img { width: 68px; height: 56px; object-fit: cover; border-radius: var(--r-sm); }
.riga-carrello h4 { margin: 0 0 var(--s1); font-size: var(--t-sm); font-weight: 600; }
.riga-carrello h4 a { color: var(--inchiostro); text-decoration: none; }
.riga-carrello .meta { color: var(--tenue); font-size: var(--t-xs); }
.riga-carrello .prezzo { font-size: var(--t-sm); }
.rimuovi { border: 0; background: none; padding: 0; color: var(--tenue); font-size: var(--t-xs); text-decoration: underline; }
.rimuovi:hover { color: var(--rosso); }

.totali { display: grid; gap: var(--s2); margin-bottom: var(--s4); font-size: var(--t-sm); }
.totali div { display: flex; justify-content: space-between; gap: var(--s4); }
.totali .totale { padding-top: var(--s3); border-top: 1px solid var(--bordo); color: var(--inchiostro); font-size: var(--t-lg); font-weight: 700; }

/* ---------- 17. Footer ---------- */

.footer { margin-top: var(--s9); background: var(--inchiostro); color: rgba(255, 255, 255, .72); }
.footer-alto {
    display: grid;
    gap: var(--s7) var(--s6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    padding-block: var(--s8);
}
.footer-marchio { grid-column: span 2; max-width: 340px; }
@media (max-width: 720px) { .footer-marchio { grid-column: span 1; } }
.footer-marchio img { height: 54px; width: auto; margin-bottom: var(--s4); background: none; }
.footer h3 {
    margin-bottom: var(--s4);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.footer nav { display: grid; gap: var(--s3); }
.footer a { color: rgba(255, 255, 255, .72); font-size: var(--t-sm); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer address { font-style: normal; font-size: var(--t-sm); line-height: 1.8; }
.footer-dati { margin-top: var(--s4); font-size: var(--t-xs); color: rgba(255, 255, 255, .5); }

.social { display: flex; gap: var(--s3); }
.social a {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-sm);
    color: rgba(255, 255, 255, .8);
    transition: all var(--transizione);
}
.social a:hover { background: var(--blu); border-color: var(--blu); color: #fff; }

.footer-basso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding-block: var(--s5);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--t-xs);
}
.pagamenti { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pagamenti span {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-sm);
    font-size: 11px;
    letter-spacing: .02em;
}

/* ---------- 17b. Piani dei corsi ----------
   Tre schede a confronto, quella di mezzo in evidenza. Il prezzo sta in un
   riquadro di colore invertito: e' il dato che si cerca per primo, e cosi'
   lo si trova senza leggere il resto. */
.piani {
    display: grid;
    gap: var(--s5);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.piano {
    display: flex;
    flex-direction: column;
    padding: var(--s6) var(--s5);
    border-radius: var(--r-lg);
    background: var(--blu);
    color: #fff;
    text-align: center;
    transition: transform var(--transizione), box-shadow var(--transizione);
}
.piano:hover { transform: translateY(-4px); box-shadow: var(--ombra-lg); }

/* Il piano consigliato: fondo scuro e un filo piu' alto degli altri, come
   sulla pagina di partenza. Sotto i 900px la sporgenza si annulla, altrimenti
   in colonna sembrerebbe solo disallineato. */
.piano-evidenza { background: #0B2559; box-shadow: var(--ombra-lg); }
@media (min-width: 900px) {
    .piano-evidenza { padding-block: var(--s7); }
}

.piano h3 { color: #fff; margin-bottom: var(--s4); font-size: var(--t-h4); text-wrap: balance; }

.piano-prezzo {
    padding: var(--s4) var(--s3);
    margin-bottom: var(--s4);
    border-radius: var(--r);
    background: #0B2559;
    color: #fff;
    font-size: clamp(1.75rem, 2.4vw + 1rem, 2.375rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.piano-evidenza .piano-prezzo { background: var(--blu); }
.piano-prezzo small { display: block; margin-top: var(--s2); font-size: var(--t-xs); font-weight: 500; opacity: .8; }

.piano-nota { color: rgba(255, 255, 255, .82); font-size: var(--t-sm); }

.piano ul {
    margin: var(--s5) 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.piano li {
    padding: var(--s3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    font-size: var(--t-sm);
}
.piano li:last-child { border-bottom: 0; }
.piano .btn { margin-top: auto; }

/* ---------- 17c. Comparse allo scroll ----------
   Effetto di ingresso senza librerie: dove il browser supporta le animazioni
   guidate dallo scroll (Chrome, Edge) fa tutto il CSS, sul compositor, senza
   una riga di JavaScript. Altrove ci pensa un IntersectionObserver (vedi
   theme.js) che aggiunge .e-visibile. In entrambi i casi il contenuto e'
   gia' nel DOM: se le animazioni non partono, la pagina si legge lo stesso. */
@media (prefers-reduced-motion: no-preference) {

    [data-comparsa] {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 620ms cubic-bezier(.16, 1, .3, 1),
                    transform 620ms cubic-bezier(.16, 1, .3, 1);
    }
    [data-comparsa].e-visibile { opacity: 1; transform: none; }

    /* Ritardo progressivo fra elementi vicini: entrano a cascata invece che
       tutti insieme. Si ferma al sesto, oltre l'attesa si noterebbe. */
    [data-comparsa]:nth-child(2) { transition-delay: 70ms; }
    [data-comparsa]:nth-child(3) { transition-delay: 140ms; }
    [data-comparsa]:nth-child(4) { transition-delay: 210ms; }
    [data-comparsa]:nth-child(5) { transition-delay: 280ms; }
    [data-comparsa]:nth-child(n+6) { transition-delay: 350ms; }

    @supports (animation-timeline: view()) {
        /* Il browser sa fare da solo: si spegne la via JavaScript e si lega
           l'animazione alla posizione dell'elemento nella finestra. */
        [data-comparsa] {
            opacity: 1;
            transform: none;
            transition: none;
            animation: comparsa linear both;
            animation-timeline: view();
            animation-range: entry 8% cover 26%;
        }
    }

    @keyframes comparsa {
        from { opacity: 0; transform: translateY(26px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ---------- 18. Utility ---------- */

.solo-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Il salto al contenuto compare solo quando lo si raggiunge da tastiera. */
.salta {
    position: absolute;
    top: var(--s3); left: var(--s3);
    z-index: 300;
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    background: var(--blu);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--transizione);
}
.salta:focus { transform: none; color: #fff; }

.centro { text-align: center; }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }

.su {
    position: fixed;
    right: var(--s5); bottom: var(--s5);
    z-index: 90;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border: 1px solid var(--bordo);
    border-radius: var(--r-full);
    background: #fff;
    color: var(--testo);
    box-shadow: var(--ombra);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transizione), visibility var(--transizione);
}
.su.e-visibile { opacity: 1; visibility: visible; }
.su:hover { color: var(--blu); border-color: var(--blu); }

.banner-cookie {
    position: fixed;
    left: var(--s5); right: var(--s5); bottom: var(--s5);
    z-index: 250;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    max-width: 900px;
    margin-inline: auto;
    padding: var(--s5);
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--ombra-lg);
    font-size: var(--t-sm);
}
.banner-cookie .azioni { display: flex; gap: var(--s3); flex: none; }

/* Chi ha chiesto meno animazioni le riceve tutte spente: nessuna e' informativa. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .header, .footer, .usp, .su, .banner-cookie, .pannello, .velo, .nl { display: none !important; }
    body { color: #000; font-size: 11pt; }
    a { text-decoration: underline; }
    /* in stampa l'URL di un link e' l'unica cosa che resta */
    .prosa a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}