/* ============================================================================
   home.css — solo la home. Si carica dopo base.css, eventi.css, adesioni.css

   Le regole sono quelle del disegno approvato (base-25), copiate com'erano.
   Tutto sta sotto «.home», la classe del <body> della home: i nomi del
   disegno — .foto, .riga, .elenco, .video — in altre pagine vestono altre
   cose, e senza quel prefisso si pesterebbero i piedi.

   Tre differenze volute dal disegno, decise da Simone il 5 ottobre 2026:
   - i titoli con le grazie (Fraunces) sono scritti con i caratteri del sito;
   - il menu e il piede sono quelli delle altre pagine;
   - gli eventi e le adesioni usano i riquadri delle loro pagine.
   ============================================================================ */

/* ---------------- misure dei titoli e dei bottoni, come nel disegno ------- */
.home h2{font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.08}
.home h3{font-size:1.35rem;letter-spacing:-.015em;line-height:1.25}
/* gli occhielli — «Le iniziative», «La rete»… — in home non sono in grassetto
   (Simone, 5 ottobre) */
.home .occhiello{margin-bottom:1.1rem;font-weight:400}
/* Il trattino davanti alla scrittina. Era un rettangolino alto 2px con gli
   angoli tondi: sugli schermi con lo zoom di sistema al 125% o al 150% quei
   2px diventano 2,5 o 3 punti dello schermo, e il browser li arrotondava ora
   a 2 ora a 3 secondo l'altezza a cui capitava il blocco — in «I sostenitori»
   e in «Contatti» usciva più grosso. Lo spessore di un BORDO invece il
   browser lo fissa una volta sola, uguale per tutti, prima di sapere dove
   finirà: stesso trattino in ogni blocco. */
.home .occhiello::before{height:0;background:none;border-radius:0;border-top:2px solid var(--verde)}
.home main .bottone{height:52px;padding:0 1.7rem;font-size:.94rem;font-weight:500;
  transition:transform .15s,box-shadow .15s}
.home main .bottone:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(18,20,58,.18)}
.home main .bottone.mini{height:42px;padding:0 1.2rem;font-size:.85rem}
.home main .bottone.bianco{background:#fff;color:var(--ink);border-color:#fff}
.home .misura{max-width:36rem}
.home .piede{margin-top:0}

/* ---------------- la testata sopra la copertina ---------------------------
   In cima è trasparente, con le scritte bianche e il marchio chiaro; appena
   si scorre («giu») torna quella di tutte le pagine. «viva» la mette il
   programma: senza, la testata resta in cima e non segue, così non capita
   mai di avere scritte bianche sopra un fondo bianco.
   «sopra» c'è solo se il primo blocco è la copertina: se in redazione la si
   sposta o la si spegne, la testata è quella normale di tutte le pagine. */
.home .testata img.marchio.chiaro{display:none}
.home.sopra .testata{position:absolute;left:0;right:0;top:0;background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;
  transition:background .25s,border-color .25s}
.home.sopra.viva .testata{position:fixed}
.home.sopra .testata .dentro{height:76px}
.home.sopra .testata img.marchio{height:46px}
.home.sopra .testata img.marchio.chiaro{display:block}
.home.sopra .testata img.marchio:not(.chiaro){display:none}
.home.sopra .apri-menu{background:transparent;border-color:rgba(255,255,255,.55)}
.home.sopra .apri-menu span{background:#fff}
@media(min-width:941px){
  .home.sopra .testata .menu{color:rgba(255,255,255,.86)}
  .home.sopra .testata .menu a:hover{color:#fff}
  .home.sopra .testata .bottone.evidenza{background:#fff;color:var(--ink);border-color:#fff}
  /* La regola qui sopra delle voci — al passaggio del mouse scrivono in
     bianco — valeva anche per «Area formativa», che è un collegamento del
     menu: sulla pastiglia bianca la scritta spariva (Simone, 20 ottobre
     2026). Al passaggio diventa verde con la scritta bianca, come gli altri
     pulsanti che portano alla scuola (base.css). */
  .home.sopra .testata .menu a.bottone.evidenza:hover{color:#fff;background:var(--verde);border-color:var(--verde)}
  /* «Area soci» sopra la fotografia: vuota, con bordo e scritta bianchi;
     al passaggio bianca piena (31 ottobre 2026) */
  .home.sopra .testata .menu a.bottone.area-soci{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
  .home.sopra .testata .menu a.bottone.area-soci:hover,.home.sopra .testata .menu a.bottone.area-soci:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
}
/* posata: scorrendo, o con il menu del telefono aperto */
.home.sopra.giu .testata,.home.sopra.menu-aperto .testata{background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--filo)}
.home.sopra.giu .testata img.marchio.chiaro,.home.sopra.menu-aperto .testata img.marchio.chiaro{display:none}
.home.sopra.giu .testata img.marchio:not(.chiaro),.home.sopra.menu-aperto .testata img.marchio:not(.chiaro){display:block}
.home.sopra.giu .apri-menu,.home.sopra.menu-aperto .apri-menu{background:#fff;border-color:var(--filo)}
.home.sopra.giu .apri-menu span,.home.sopra.menu-aperto .apri-menu span{background:var(--ink)}
@media(min-width:941px){
  .home.sopra.giu .testata .menu{color:var(--grigio)}
  .home.sopra.giu .testata .menu a:hover{color:var(--ink)}
  .home.sopra.giu .testata .bottone.evidenza{background:var(--ink);color:#fff;border-color:var(--ink)}
  /* la stessa cosa a testata posata: anche qui verde */
  .home.sopra.giu .testata .menu a.bottone.evidenza:hover{color:#fff;background:var(--verde);border-color:var(--verde)}
  /* «Area soci» a testata posata: come in tutte le pagine */
  .home.sopra.giu .testata .menu a.bottone.area-soci{background:#fff;color:var(--ink);border-color:var(--ink)}
  .home.sopra.giu .testata .menu a.bottone.area-soci:hover,.home.sopra.giu .testata .menu a.bottone.area-soci:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
}

/* ---------------- copertina ---------------- */
.home .copertina{position:relative;min-height:82vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;
  background:var(--ink)}
.home .copertina .sfondo{position:absolute;inset:0}
.home .copertina .sfondo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) brightness(.8) contrast(1.35)}
.home .copertina .sfondo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 68% 30%,rgba(18,20,58,.20) 0%,rgba(18,20,58,.72) 55%,rgba(18,20,58,.95) 100%),linear-gradient(180deg,rgba(18,20,58,.66),rgba(18,20,58,.30) 42%,rgba(18,20,58,.96))}
.home .copertina .dentro{position:relative;padding-top:9rem;padding-bottom:5.5rem;width:100%}
.home .copertina .marchio{width:min(210px,38vw);height:auto;margin-bottom:2rem}
/* Il titolo è in Fraunces, come nel disegno (Simone, 7 ottobre 2026): prima
   riga dritta, non in grassetto; seconda riga in corsivo leggero. Per un
   giorno è stato in Space Grotesk e Inter corsivo, i caratteri del resto
   del sito. Misure e distanze sono quelle del disegno. */
.home .copertina h1{font-family:"Fraunces",Georgia,serif;font-weight:400;letter-spacing:-.005em;line-height:1.06;
  font-size:clamp(2.2rem,5.2vw,3.7rem);color:#fff;font-optical-sizing:auto}
.home .copertina h1 span{font-style:italic;font-weight:300}
.home .copertina .ente{margin-top:1.6rem;font-size:.76rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--verde)}
.home .copertina .claim{margin-top:.5rem;font-size:.95rem;letter-spacing:.03em;color:#C9CCE0}
/* il credito della fotografia: piccolo, in basso a destra, non obbligatorio */
.home .copertina .credito{position:absolute;right:26px;bottom:1rem;font-size:.7rem;color:rgba(255,255,255,.55)}
.home .copertina .credito a:hover{color:#fff;text-decoration:underline}

/* ---------------- vetrina del prodotto ---------------- */
.home .vetrina{background:linear-gradient(180deg,var(--nebbia) 0%,#fff 62%);padding:0 0 1.5rem}
.home .vt-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:3.6rem;align-items:center}
.home .vetrina .schermo{margin-top:-4.5rem;position:relative}
.home .vt-testo h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.home .vt-testo > p{margin-top:1.2rem}
.home .vetrina .pulsanti{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.home .vetrina .metriche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem;margin-top:2.6rem;max-width:26rem}
.home .vetrina .metrica b{display:block;font-family:var(--display);font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.home .vetrina .metrica span{font-size:.85rem;color:var(--grigio)}
@media(max-width:940px){.home .vt-griglia{grid-template-columns:minmax(0,1fr);gap:2.4rem}.home .vetrina .schermo{margin-top:-3rem}}

/* --------- il prodotto, disegnato ---------
   Tutto sotto .schermo: «spunta», «barra», «indirizzo» sono nomi che usa
   anche il modulo dei contatti, e senza quel prefisso lo sformavano. */
.home .schermo{background:#fff;border:1px solid var(--filo);border-radius:20px;box-shadow:0 26px 60px -20px rgba(18,20,58,.28);overflow:hidden}
.home .schermo .barra{display:flex;align-items:center;gap:.45rem;padding:.75rem .9rem;border-bottom:1px solid var(--filo);background:var(--nebbia)}
.home .schermo .pallino{width:9px;height:9px;border-radius:50%;background:var(--nebbia-2)}
.home .schermo .indirizzo{margin-left:.6rem;font-size:.72rem;color:var(--grigio);background:#fff;border:1px solid var(--filo);border-radius:100px;padding:.2rem .8rem}
.home .schermo .filmato{aspect-ratio:16/9;background:#0C0E2B;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.home .schermo .filmato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home .schermo .filmato::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,43,.28) 0%,rgba(12,14,43,.16) 45%,rgba(12,14,43,.72) 100%)}
.home .schermo .filmato .play,.home .schermo .filmato .tempo{position:relative;z-index:2}
.home .schermo .play{width:60px;height:60px;border-radius:50%;background:rgba(12,14,43,.42);backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center}
.home .schermo .play::after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.home .schermo .filmato .tempo{position:absolute;left:16px;bottom:14px;font-size:.74rem;color:rgba(255,255,255,.92);font-family:var(--display);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.home .schermo .avanzamento{height:4px;background:var(--nebbia-2);position:relative}
.home .schermo .avanzamento i{position:absolute;inset:0 42% 0 0;background:var(--verde)}
.home .schermo .corpo-schermo{padding:1.1rem 1.2rem .95rem}
.home .schermo .corpo-schermo h4{font-size:1.02rem;margin-bottom:.15rem}
.home .schermo .corpo-schermo .sotto{font-size:.8rem;color:var(--grigio);margin-bottom:.9rem}
.home .schermo .lista-lezioni{display:grid;gap:.7rem}
.home .schermo .lez{display:flex;align-items:center;gap:.65rem;font-size:.83rem;padding:.55rem .75rem;border:1px solid var(--filo);border-radius:9px}
.home .schermo .lez.fatta{color:var(--grigio)}
.home .schermo .spunta{width:17px;height:17px;border-radius:50%;flex:none;border:1.5px solid var(--filo)}
.home .schermo .lez.fatta .spunta{background:var(--verde);border-color:var(--verde);position:relative}
.home .schermo .lez.fatta .spunta::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.home .schermo .lez.ora{border-color:var(--verde);box-shadow:0 0 0 3px rgba(0,164,78,.1)}
.home .schermo .lez em{margin-left:auto;font-style:normal;font-size:.74rem;color:var(--grigio)}

/* ---------------- formazione ---------------- */
.home .formazione{padding:5.5rem 0;background:var(--bianco);scroll-margin-top:60px}
.home .f-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.8rem}
.home .tre{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.home .carta{background:var(--nebbia);border:1px solid var(--filo);border-radius:var(--r);padding:1.8rem;position:relative;transition:transform .18s,box-shadow .18s}
.home .carta:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(18,20,58,.22)}
.home .carta .num{font-family:var(--display);font-size:1.08rem;font-weight:700;letter-spacing:.05em;margin-bottom:1.5rem;display:block;line-height:1}
.home .tre .carta:nth-child(1) .num{color:var(--rosso)}
.home .tre .carta:nth-child(2) .num{color:var(--ink)}
.home .tre .carta:nth-child(3) .num{color:var(--verde)}
.home .carta h3{margin-bottom:.5rem}
.home .carta p{font-size:.95rem;color:var(--grigio)}
.home .carta .tag{display:inline-block;margin-top:1.2rem;font-size:.74rem;font-weight:500;padding:.28rem .7rem;border-radius:100px;background:#fff;border:1px solid var(--filo);color:var(--grigio)}
.home .carta.finale{background:var(--ink);border-color:var(--ink);color:#fff}
.home .carta.finale .num{color:var(--verde)}
.home .carta.finale p{color:#A9AECD}
.home .carta.finale .tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.home .riga-porta{margin-top:1.8rem;font-size:.96rem;color:var(--grigio)}
.home .riga-porta a{color:var(--ink);font-weight:500;border-bottom:2px solid var(--verde)}

/* ---------------- in evidenza («Breaking news») ----------------
   Non è nel disegno. Fondo arancione — quello dei collegamenti del sito — e
   il testo su un riquadro chiaro: il bianco scritto sull'arancione non
   arriva al contrasto che serve (2,9 a 1), il blu sul bianco sì. */
.home .in-evidenza{background:#E8830A;padding:2.6rem 0;scroll-margin-top:60px}
.home .ev-carta{display:flex;align-items:center;gap:1.8rem;background:#fff;border-radius:var(--r);
  padding:1.6rem 1.9rem;box-shadow:0 14px 34px -18px rgba(18,20,58,.45)}
.home .ev-carta-foto{flex:none;width:190px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--nebbia-2)}
/* l'immagine si vede TUTTA, in proporzione, senza tagli (Simone, 6 ottobre):
   quella della condivisione di un numero è più larga del riquadro, e una
   locandina è più alta. Lo spazio che avanza resta del grigio chiaro. */
.home .ev-carta-foto img{width:100%;height:100%;object-fit:contain}
.home .ev-carta-testo{flex:1;min-width:0}
.home .ev-etichetta{display:inline-block;font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:100px;
  padding:.28rem .8rem;margin-bottom:.7rem}
.home .ev-carta h2{font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.2}
.home .ev-carta p{margin-top:.45rem;color:var(--grigio);font-size:.98rem}
.home .ev-carta .bottone{flex:none}
@media(max-width:800px){
  .home .in-evidenza{padding:1.8rem 0}
  .home .ev-carta{flex-direction:column;align-items:flex-start;gap:1.1rem;padding:1.3rem}
  .home .ev-carta-foto{width:100%}
  .home .ev-carta .bottone{width:100%}
}

/* ---------------- iniziative: i riquadri sono di eventi.css ---------------- */
.home .iniziative{scroll-margin-top:60px}
.home .iniziative .ini h3{font-size:1.2rem}

/* ---------------- adesioni: il blocco è di adesioni.css -------------------
   Lì la sezione ha meno aria, perché sta sotto la banda della pagina: in
   home torna alle misure del disegno. */
.home .adesioni{padding:5.5rem 0;scroll-margin-top:60px}
.home .adesioni .ad-griglia{margin-top:2.4rem}
.home .adesioni .rinnovo h3{font-size:1.15rem}

/* ---------------- calzolerie ---------------- */
.home .calzolerie{background:var(--ink);color:#fff;padding:4.2rem 0;scroll-margin-top:60px}
/* con la fotografia di fondo: la stessa cura della copertina. La fotografia
   sta FUORI dal flusso, così l'altezza della fascia resta quella di prima. */
.home .calzolerie.con-foto,.home .in-evidenza.con-sfondo{position:relative;overflow:hidden}
.home .calzolerie .sfondo,.home .in-evidenza .sfondo,.home .frase .sfondo{position:absolute;inset:0}
.home .calzolerie .sfondo img,.home .in-evidenza .sfondo img,.home .frase .sfondo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) brightness(.8) contrast(1.35)}
.home .calzolerie .sfondo::after,.home .in-evidenza .sfondo::after,.home .frase .sfondo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 68% 30%,rgba(18,20,58,.20) 0%,rgba(18,20,58,.72) 55%,rgba(18,20,58,.95) 100%),linear-gradient(180deg,rgba(18,20,58,.66),rgba(18,20,58,.30) 42%,rgba(18,20,58,.96))}
.home .calzolerie.con-foto .cz-griglia,.home .in-evidenza.con-sfondo .dentro{position:relative}
/* in evidenza: la fascia resta ARANCIONE anche con la fotografia (Simone,
   6 ottobre). La fotografia è in grigio e sopra ha una velina arancione: si
   intravede, e il colore del blocco non cambia. */
.home .in-evidenza .sfondo img{filter:grayscale(1) contrast(1.25)}
.home .in-evidenza .sfondo::after{background:linear-gradient(90deg,rgba(232,131,10,.90),rgba(232,131,10,.74) 50%,rgba(232,131,10,.90));mix-blend-mode:normal}
.home .cz-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.home .calzolerie h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.home .calzolerie p.sotto{color:#A9AECD;margin-top:.9rem}
.home .calzolerie .cerca{display:flex;gap:.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:.4rem .4rem .4rem 1.2rem;align-items:center}
.home .calzolerie .cerca input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-family:var(--testo);font-size:1rem;height:46px}
.home .calzolerie .cerca input::placeholder{color:#9AA0C0}
.home .calzolerie .cerca:focus-within{border-color:rgba(255,255,255,.6)}
.home .calzolerie .cerca .bottone{flex:none}
@media(max-width:900px){.home .cz-griglia{grid-template-columns:minmax(0,1fr);gap:1.8rem}}

/* ---------------- notizie ---------------- */
.home .notizie{padding:5.5rem 0;scroll-margin-top:60px}
.home .notizie .pill{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .7rem;border-radius:100px}
.home .notizie .n-capo{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:1.1rem}
.home .notizie .n-capo .occhiello{display:flex}
.home .notizie .giornale{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3.4rem;margin-top:2.4rem}
.home .notizie .giornale.solo{grid-template-columns:minmax(0,1fr);max-width:44rem}
.home .notizie .pezzo .foto{display:block;position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--nebbia-2);margin-bottom:1.2rem}
/* L'immagine si vede TUTTA, rimpicciolita finché entra nel riquadro, senza
   tagli e senza deformarsi (Simone, 5 ottobre): le copertine degli articoli
   hanno forme diverse — locandine, marchi, fotografie — e riempiendo il
   riquadro quelle larghe o alte venivano tagliate. Lo spazio che avanza
   resta del grigio chiaro del riquadro. */
.home .notizie .pezzo .foto img{width:100%;height:100%;object-fit:contain}
/* il verde scuro: con la scritta bianca il verde del marchio non arriva al
   contrasto che serve a un testo così piccolo (vedi eventi.css) */
.home .notizie .pezzo .foto .pill{position:absolute;left:.9rem;top:.9rem;z-index:2;margin:0;background:#007337;color:#fff}
.home .notizie .pezzo h3{font-size:1.55rem;margin-bottom:.6rem}
.home .notizie .pezzo h3 a:hover{color:#007337}
.home .notizie .pezzo p{font-size:1rem}
.home .notizie .pezzo .data{display:block;margin-top:.9rem;font-size:.82rem;color:var(--grigio)}
.home .notizie .elenco-notizie{display:flex;flex-direction:column}
.home .notizie .riga{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--filo)}
.home .notizie .riga:first-child{padding-top:0}
.home .notizie .riga h4{font-family:var(--display);font-size:1.12rem;font-weight:500;letter-spacing:-.012em;line-height:1.35}
.home .notizie .riga:hover h4{color:#007337}
.home .notizie .quando-n{font-size:.8rem;color:var(--grigio);white-space:nowrap}
@media(max-width:900px){.home .notizie .giornale{grid-template-columns:minmax(0,1fr);gap:2rem}}

/* ---------------- la frase ----------------
   Nel disegno era in Fraunces corsivo leggero: qui è Inter corsivo leggero. */
.home .frase{background:var(--ink);color:#fff;padding:2.25rem 0;text-align:center}
/* 9 ottobre 2026: la fascia più bassa del 15%, togliendo dai margini sopra e sotto (erano 3.2rem) */
.home .frase p{margin:0;font-family:var(--testo);font-style:italic;font-weight:300;font-size:clamp(1.2rem,2.5vw,1.7rem);line-height:1.4;color:#E2E4F0}
.home .filo-tricolore{display:block;width:78px;height:3px;border-radius:3px;margin:0 auto 1.5rem;background:linear-gradient(90deg,var(--rosso) 0 33.3%,#FFFFFF 33.3% 66.6%,var(--verde) 66.6% 100%)}

/* ---------------- istituzionale + sostenitori ---------------- */
.home .istituzionale{padding:3.6rem 0}
.home .ist-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.home .ist{display:block;border:1px solid var(--filo);border-radius:var(--r);padding:1.4rem;background:#fff;transition:border-color .15s,transform .15s}
.home .ist:hover{border-color:var(--verde);transform:translateY(-2px)}
.home .ist h3{font-size:1.08rem;margin-bottom:.35rem}
.home .ist p{font-size:.9rem;color:var(--grigio)}
.home .sostenitori{background:var(--nebbia);padding:3.6rem 0}
.home .s-testa{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}
.home .sostenitori h2{font-size:1.8rem}
.home .s-testa p{margin-top:.7rem}
/* I riquadri degli sponsor: le STESSE misure per livello della Newsletter
   (newsletter.css, punto 8). Sono ricopiate qui perché la home non carica
   quel foglio: se là cambiano, vanno cambiate anche qui. */
/* AL MASSIMO TRE PER RIGA (Simone, 6 ottobre): la fila non può essere più
   larga di tre riquadri del suo livello con i due spazi in mezzo, così il
   quarto va a capo, centrato. Sul telefono ce ne stanno quanti ne entrano
   nello schermo — due o tre, secondo il livello — e gli altri vanno a capo. */
.home .loghi{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
  max-width:calc(var(--largo) * 3 + 2rem);margin-left:auto;margin-right:auto}
.home .loghi + .loghi{margin-top:1rem}
.home .liv-platino{--largo:200px;--alto:116px;--nome:1rem}
.home .liv-oro    {--largo:172px;--alto:102px;--nome:.95rem}
.home .liv-argento{--largo:150px;--alto:92px; --nome:.9rem}
.home .liv-bronzo {--largo:128px;--alto:78px; --nome:.82rem}
.home .pastiglia{flex:none;width:var(--largo);height:var(--alto);background:#fff;border:1px solid var(--filo);
  border-radius:12px;display:flex;align-items:center;justify-content:center;padding:.45rem;transition:transform .15s}
.home a.pastiglia:hover{transform:translateY(-2px)}
.home .loghi img{width:100%;height:100%;object-fit:contain}
.home .senza-logo{font-family:var(--display);font-weight:600;color:var(--ink);font-size:var(--nome,.9rem);
  line-height:1.25;text-align:center;overflow-wrap:break-word;hyphens:auto}

/* ---------------- telefono ---------------- */
/* ---------------- la promozione di uno sponsor ----------------
   Non è nel disegno: è fatta con i suoi pezzi — il riquadro bianco col filo,
   la fotografia delle notizie, il bottone.
   TUTTE UGUALI DI FORMA: fotografia a sinistra, testo a destra, altezza
   fissa. Titolo su due righe al massimo, testo su quattro: quello che sfora
   si tronca. Così nella finestra, scorrendo, niente cambia misura. */
.home .promozione{padding:3.6rem 0;scroll-margin-top:60px}
.home .promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);height:400px;
  border:1px solid var(--filo);border-radius:var(--r);overflow:hidden;background:#fff}
.home .promo-foto{background:var(--nebbia-2);min-height:0}
.home .promo-foto img{width:100%;height:100%;object-fit:cover}
.home .promo-testo{padding:2.2rem 2.4rem;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;min-height:0;overflow:hidden}
.home .promo-testo h2{font-size:clamp(1.4rem,2.4vw,1.8rem);line-height:1.15;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.home .promo-testo p.grigio{margin-top:.8rem;font-size:.98rem;line-height:1.6;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.home .promo-firma{margin-top:1rem;font-family:var(--display);font-weight:600;font-size:.95rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.home .promo-firma::before{content:"— ";color:var(--verde)}
.home .promo-testo .bottone{margin-top:1.3rem;flex:none;max-width:100%}
/* il titolo: due punti in meno (Simone, 7 ottobre 2026) */
.home .promo-testo h2{font-size:clamp(1.23rem,calc(2.4vw - 2pt),1.64rem)}
/* Lo sconto riservato ai soci: una riga a sé, in un riquadro verde chiaro.
   La finestra ha un'altezza fissa, quindi il posto dello sconto si prende
   dal testo e dai margini: con lo sconto il testo ha meno righe. Sul PC lo
   sconto sta su una riga; dove la colonna è stretta va a capo. */
.home .promo-testo > *{flex:none}
.home .promo-sconto{margin:.8rem 0 0;padding:.5rem .85rem;border-radius:10px;background:#E8F6EE;border:1px solid #BFE5CF;
  display:flex;flex-direction:column;gap:.1rem;max-width:100%}
.home .promo-sconto small{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#007337}
.home .promo-sconto b{font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.25;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .promo.con-sconto .promo-testo{padding-top:1.6rem;padding-bottom:1.6rem}
.home .promo.con-sconto p.grigio{-webkit-line-clamp:2;line-clamp:2}
@media(max-width:999px){
  .home .promo-sconto b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .home .promo.con-sconto p.grigio{-webkit-line-clamp:1;line-clamp:1}
}
@media(max-width:800px){
  /* in colonna: fotografia sopra, testo sotto, sempre la stessa altezza */
  .home .promo{grid-template-columns:minmax(0,1fr);grid-template-rows:170px minmax(0,1fr);height:540px}
  .home .promo-testo{padding:1.3rem 1.3rem 1.5rem;justify-content:flex-start}
  .home .promo-testo .occhiello{margin-bottom:.7rem}
  .home .promo-testo p.grigio{font-size:.94rem}
  .home .promo.con-sconto{grid-template-rows:140px minmax(0,1fr)}
  .home .promo.con-sconto .promo-testo{padding-top:1.3rem;padding-bottom:1.5rem}
  .home .promo-sconto{margin-top:.6rem;padding:.4rem .7rem}
  .home .promo-sconto b{font-size:.96rem;-webkit-line-clamp:3;line-clamp:3}
  .home .promo.con-sconto p.grigio{-webkit-line-clamp:2;line-clamp:2}
  .home .promo-testo .bottone{margin-top:1rem}
}

/* la finestra delle promozioni: una alla volta, una sopra l'altra nello
   stesso posto; si vede solo quella «in-vista» */
.home.promo-in-finestra .promozione{display:none}
.home .promo-finestra{border:0;padding:0;background:transparent;width:min(960px,calc(100vw - 2rem));
  max-width:none;max-height:none;overflow:visible}
.home .promo-finestra::backdrop{background:rgba(9,10,26,.78)}
.home .promo-lista{display:grid}
.home .promo-lista .promo{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.home .promo-lista .promo.in-vista{opacity:1;visibility:visible;transition:opacity .45s}
.home .promo-chiudi{position:absolute;top:.7rem;right:.7rem;z-index:2;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--filo);background:#fff;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 0 .12rem}
.home .promo-chiudi:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* i comandi, sotto il riquadro: frecce, pallini, pausa */
.home .promo-comandi{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:.9rem}
.home .promo-comandi[hidden]{display:none}
.home .promo-prima,.home .promo-dopo{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.7rem;line-height:1;display:flex;align-items:center;
  justify-content:center;padding:0 0 .18rem}
.home .promo-prima:hover,.home .promo-dopo:hover{background:rgba(255,255,255,.32)}
.home .promo-pallini{display:flex;gap:.2rem}
/* il pallino è piccolo, ma il suo pulsante è largo abbastanza per un dito */
.home .promo-pallini button{width:26px;height:44px;border:none;background:transparent;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.home .promo-pallini button::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4)}
.home .promo-pallini button[aria-current]::before{background:#fff;transform:scale(1.25)}
.home .promo-pausa{height:36px;padding:0 1rem;border-radius:100px;border:1px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;font:500 .82rem var(--testo);cursor:pointer;min-width:5.6rem}
.home .promo-pausa:hover{background:rgba(255,255,255,.14)}
.home .promo-pausa[hidden]{display:none}
.home .promo-comandi button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.home .promo-lista .promo{transition:none}}

/* le miniature delle promozioni, sotto i loghi degli sponsor: ferme, in fila */
.home .promo-mini-testa{margin:2.6rem 0 1rem;text-align:center;font-size:.72rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.home .promo-miniature{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.home .promo-mini{display:flex;align-items:center;gap:.9rem;width:300px;max-width:100%;background:#fff;
  border:1px solid var(--filo);border-radius:12px;padding:.6rem;transition:border-color .15s,transform .15s}
.home .promo-mini:hover{border-color:var(--verde);transform:translateY(-2px)}
.home .promo-mini-foto{flex:none;width:92px;height:64px;border-radius:8px;overflow:hidden;background:var(--nebbia-2)}
.home .promo-mini-foto img{width:100%;height:100%;object-fit:cover}
.home .promo-mini-testo{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.home .promo-mini-testo b{font-family:var(--display);font-weight:600;font-size:.92rem;line-height:1.25;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.home .promo-mini-testo small{font-size:.78rem;color:var(--grigio);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.home .promo-mini{width:100%}}

/* ---------------- il separatore: lo stesso della Newsletter ----------------
   Il marchio in mezzo e un filo per parte (newsletter.css, «il separatore»).
   Su fondo bianco (Simone, 5 ottobre): una fascia chiara fra i due blocchi grigi. */
.home .separa{background:#fff;padding:1.4rem 0}
.home .separatore{display:flex;align-items:center;gap:1.4rem}
.home .separatore::before,.home .separatore::after{content:"";flex:1;height:1px;background:var(--filo)}
.home .separatore img{flex:none;width:170px;height:auto}
/* dopo la fascia bianca il filo in cima ai contatti non serve: lo stacco lo fa il colore */
.home .separa + .ass-contatti{border-top:none}
@media(max-width:700px){
  .home .separatore{gap:.9rem}
  .home .separatore img{width:132px}
}

/* ---------------- i contatti: il blocco è di associazione.css ----------------
   I titoli tornano alle misure che hanno nella pagina dell'Associazione:
   senza, prenderebbero quelle grandi dei titoli della home. */
.home .ass-contatti{scroll-margin-top:60px}
.home .ass-contatti h2{font-size:1.8rem}
/* in home il titolo dei contatti è la scrittina verde, come negli altri blocchi */
.home .ass-contatti .occhiello{display:flex;margin-bottom:1.6rem}
.home .modulo-riquadro h2.modulo-titolo{font-size:1.5rem;line-height:1.2}
.home .ass-contatti .bottone{height:48px;padding:0 1.5rem;font-size:.92rem;font-weight:400}
@media(max-width:700px){.home .ass-contatti h2{font-size:1.5rem}}

/* il menu del telefono, chiuso, ha un filo in cima: sopra la fotografia non si deve vedere */
@media(max-width:940px){
  .home.sopra:not(.giu):not(.menu-aperto) .menu{border-top-color:transparent;background:transparent;box-shadow:none}
}
@media(max-width:700px){
  .home .copertina{min-height:78vh}
  /* gli «a capo» del disegno valgono per lo schermo largo: qui il testo va a capo da solo */
  .home .copertina .claim br{display:none}
  /* il credito in basso finirebbe sotto lo schermo della vetrina: qui sta sotto il testo */
  .home .copertina .credito{position:static;margin-top:1.2rem}
  .home .copertina .dentro{padding-top:7rem;padding-bottom:3.6rem}
  .home .formazione,.home .adesioni,.home .notizie{padding:3.4rem 0}
  .home .calzolerie{padding:3rem 0}
  .home .f-testa{margin-bottom:2rem}
  .home .notizie .giornale{margin-top:1.8rem}
  .home .notizie .pezzo h3{font-size:1.3rem}
  .home .notizie .riga{gap:1rem}
  .home .sostenitori h2{font-size:1.5rem}
  /* Gli sponsor sul telefono: non più misure fisse, ma una parte della
     larghezza dello schermo — così ce ne stanno sempre lo stesso numero per
     riga, su un telefono stretto come su uno largo, e non resta mai una
     colonna di riquadri uno sotto l'altro. Platino e oro DUE per riga,
     argento e bronzo TRE; dentro la coppia il livello più basso è un po' più
     piccolo, così la gerarchia si legge ancora. L'altezza segue la larghezza
     con le proporzioni di sempre. */
  .home .loghi{max-width:calc(var(--largo) * 3 + 1.5rem);gap:.75rem}
  /* mai più grandi che sul computer: su uno schermo a metà strada
     tornerebbero enormi */
  .home .loghi .pastiglia{height:auto;max-width:var(--largo)}
  .home .liv-platino .pastiglia{width:calc((100% - .75rem) / 2);aspect-ratio:200/116}
  .home .liv-oro .pastiglia{width:calc((100% - .75rem) / 2 * .9);aspect-ratio:172/102}
  .home .liv-argento .pastiglia{width:calc((100% - 1.5rem) / 3);aspect-ratio:150/92}
  .home .liv-bronzo .pastiglia{width:calc((100% - 1.5rem) / 3 * .88);aspect-ratio:128/78}
  .home .liv-platino{--nome:.92rem} .home .liv-oro{--nome:.86rem}
  .home .liv-argento{--nome:.74rem} .home .liv-bronzo{--nome:.68rem}
}
@media (prefers-reduced-motion:reduce){
  .home .testata,.home .carta,.home .ist,.home main .bottone{transition:none}
}

/* --- la freccia che riporta in cima (Simone, 7 ottobre 2026) ---------------
   «inizio» è la prima schermata: finché se ne vede un pezzo la freccia resta
   nascosta, poi compare. La salita è dolce, salvo per chi ha chiesto al suo
   dispositivo meno movimento. */
.home-inizio{position:absolute;top:0;left:0;width:1px;height:70vh;pointer-events:none}
html:has(body.home){scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html:has(body.home){scroll-behavior:auto}}

/* --- «Cerca calzoleria»: accanto alla freccia, porta al blocco della ricerca --- */
.vai-cerca{position:fixed;right:calc(1.2rem + 46px + .6rem);bottom:1.2rem;z-index:25;display:inline-flex;align-items:center;gap:.5rem;
  height:46px;padding:0 1.15rem;border-radius:100px;background:var(--ink);color:#fff;border:2px solid #fff;
  font-family:var(--testo);font-size:.9rem;font-weight:500;white-space:nowrap;
  box-shadow:0 6px 20px rgba(18,20,58,.22);transition:opacity .2s,transform .2s,background .15s}
.vai-cerca:hover,.vai-cerca:focus-visible{background:#2A2D6B;color:#fff}
.vai-cerca:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.vai-cerca.nascosto{opacity:0;transform:translateY(.6rem);pointer-events:none}
@media(max-width:700px){.vai-cerca{right:calc(.9rem + 46px + .5rem);bottom:.9rem}}
@media print{.vai-cerca{display:none}}

/* ---------------- lo slideshow (Simone, 7 ottobre 2026) ----------------
   Tre fotografie alla volta sul PC, due sul tablet, una sul telefono: tutte
   in 4:3. Senza programmi la fila si scorre col dito; i comandi li accende
   slideshow.js. La finestra della fotografia grande è quella di eventi.css. */
.home .slideshow{padding:4.5rem 0;background:#fff;scroll-margin-top:60px}
.home .slideshow h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.4rem}
.home .sl-cornice{position:relative;margin-top:1.8rem}
.home .slideshow .dentro > .sl-cornice:first-child{margin-top:0}
.home .sl-fila{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r)}
.home .sl-fila::-webkit-scrollbar{display:none}
.home .sl-fila:focus-visible{outline:2px solid var(--verde);outline-offset:4px}
.home .sl-fila ul{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;gap:1.2rem;
  grid-auto-columns:calc((100% - 2 * 1.2rem) / 3)}
.home .sl-fila li{scroll-snap-align:start;min-width:0}
.home .sl-fila figure{margin:0}
.home .sl-apri{display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--nebbia-2)}
/* la fotografia si vede INTERA, in proporzione, dentro il riquadro 4:3 (Simone,
   7 ottobre 2026: non devono essere tagliate). Quello che avanza resta chiaro. */
.home .sl-apri img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s}
.home .sl-apri:hover img{transform:scale(1.03)}
.home .sl-apri:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
/* la descrizione: due righe al massimo, e il posto c'è anche dove manca, così
   la fila non salta */
.home .sl-fila figcaption{margin-top:.7rem;font-size:.92rem;line-height:1.45;color:var(--grigio);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home .sl-freccia{position:absolute;top:calc((100% - 3rem) / 2);transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--filo);background:#fff;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(18,20,58,.4);display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.home .sl-freccia.prec{left:-.6rem}
.home .sl-freccia.succ{right:-.6rem}
.home .sl-freccia[hidden],.home .sl-comandi[hidden]{display:none}
.home .sl-freccia:hover{border-color:var(--verde)}
.home .sl-comandi{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1.3rem}
.home .sl-pallini{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center}
.home .sl-pallini button{width:10px;height:10px;border-radius:50%;border:none;padding:0;background:#C9CCDA;cursor:pointer}
.home .sl-pallini button.qui{background:var(--verde);width:22px;border-radius:100px}
.home .sl-pausa{width:32px;height:32px;border-radius:50%;border:1px solid var(--filo);background:#fff;cursor:pointer;position:relative;flex:none}
.home .sl-pausa::before,.home .sl-pausa::after{content:"";position:absolute;top:10px;width:3px;height:10px;background:var(--ink);border-radius:1px}
.home .sl-pausa::before{left:10px}
.home .sl-pausa::after{right:10px}
.home .sl-pausa.ferma::before{left:12px;top:9px;width:0;height:0;background:none;border-radius:0;
  border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.home .sl-pausa.ferma::after{display:none}
@media(max-width:980px){
  .home .sl-fila ul{grid-auto-columns:calc((100% - 1.2rem) / 2)}
}
@media(max-width:640px){
  .home .slideshow{padding:3rem 0}
  .home .sl-fila ul{grid-auto-columns:100%;gap:.8rem}
  .home .sl-freccia.prec{left:.4rem}
  .home .sl-freccia.succ{right:.4rem}
}

/* ---------------- la promozione: il testo si legge TUTTO (Simone, 7 ottobre 2026) ----------------
   Fino a 400 caratteri, senza puntini. La finestra resta alta uguale per
   tutte le promozioni, ma più alta di prima: 560 sul PC, quasi tutto lo
   schermo sul telefono. Il testo non ha più un numero di righe: prende il
   posto che gli serve, e se lo schermo è basso la colonna si scorre. Queste
   regole vengono dopo quelle sopra e le correggono. */
.home .promo{height:min(560px,calc(100vh - 7.5rem))}
.home .promo-testo,.home .promo.con-sconto .promo-testo{padding:1.6rem 2.4rem;overflow-y:auto;justify-content:safe center}
.home .promo-testo p.grigio,.home .promo.con-sconto p.grigio{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible;
  font-size:.95rem;line-height:1.55;margin-top:.9rem}
@media(max-width:800px){
  .home .promo,.home .promo.con-sconto{height:min(700px,calc(100dvh - 7rem));grid-template-rows:130px minmax(0,1fr)}
  .home .promo-testo,.home .promo.con-sconto .promo-testo{padding:1.2rem 1.3rem 1.4rem;justify-content:flex-start}
  .home .promo-testo p.grigio,.home .promo.con-sconto p.grigio{font-size:.92rem;line-height:1.5;margin-top:.7rem}
}

/* il pulsante della promozione: più basso, come quelli della redazione (Simone, 7 ottobre 2026) */
.home .promo-testo .bottone{height:40px;padding:0 1.2rem;font-size:.88rem}

/* ---------------- la frase: testo più piccolo, e la fotografia di fondo ----------------
   Due punti in meno (Simone, 7 ottobre 2026). Dietro può avere una fotografia,
   trattata come quella della ricerca delle calzolerie: l'altezza non cambia. */
.home .frase p{font-size:clamp(1.07rem,calc(2.5vw - 2pt),1.54rem)}
.home .frase.con-foto{position:relative;overflow:hidden}
.home .frase.con-foto .dentro{position:relative}