/* Generato: base del motore + tema del sito. Non modificare a mano:
   il tema si cambia in assets/css/tema.css, la base in tools/_base-riferimento.css. */

/* =====================================================================
   Motore Moesano Web — foglio di stile di base
   ---------------------------------------------------------------------
   Questo file NON si carica da solo: viene copiato in testa allo
   style.css di ogni sito, sotto il blocco di token del cliente.
   Il cliente cambia i token; la meccanica resta questa, collaudata.

   Tutto ciò che caratterizza un sito (colori, caratteri, raggi, spessori,
   maiuscole, ornamenti) passa da una variabile. Cambiando solo il blocco
   :root si ottengono impaginazioni che non si somigliano.

   Indice
     1. Reset e base          6. Testata e navigazione
     2. Tipografia            7. Hero
     3. Impaginazione         8. Sezioni
     4. Bottoni               9. Moduli
     5. Utility              10. Piè di pagina, barra mobile, stampa
   ===================================================================== */


/* ══════════════════════════════════════════════ 1. Reset e base ═══ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-testata) + 1rem);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* rete di sicurezza: niente barra orizzontale */
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }

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

:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Chi ha chiesto meno animazioni non deve subirne nessuna. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--marca); color: var(--su-marca);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.salta:focus { left: 0; }


/* ═══════════════════════════════════════════════ 2. Tipografia ═══ */

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: var(--peso-titoli);
  line-height: 1.15;
  letter-spacing: var(--sp-titoli);
  text-wrap: balance;
  margin: 0 0 .6em;
  /* Il tedesco fa parole che a 320px non ci stanno in nessun modo:
     «Übergangspflege», «Dienstleistungen», «Tagesstruktur». Senza
     questa riga il titolo esce dallo schermo e trascina con sé tutta
     la pagina — trovato il 14.08.2026 sul sito 23, in tedesco, dove
     l'italiano della stessa pagina stava dentro senza problemi.
     `anywhere` invece di `break-word` perché break-word non conta
     nel calcolo della larghezza minima del contenuto, e quindi non
     impedisce lo sfondamento. La sillabazione fa il resto dove il
     browser sa come. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--testo-forte); }

.prosa { font-size: var(--t-md); line-height: 1.75; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 1.8em; font-size: var(--t-lg); }
.prosa h3 { margin-top: 1.5em; font-size: var(--t-md); }
.prosa a { color: var(--accento-testo); text-decoration: underline; }
.prosa a:hover { text-decoration-thickness: 2px; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prosa li + li { margin-top: .45em; }
.prosa figure { margin: 2rem 0; }
.prosa figcaption { font-size: var(--t-sm); color: var(--testo-tenue); margin-top: .6rem; }
.prosa blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--accento);
  font-family: var(--font-titoli); font-size: var(--t-md); font-style: italic;
}
.prosa blockquote cite { display: block; margin-top: .7rem; font-size: var(--t-sm); font-style: normal; color: var(--testo-tenue); }
.prosa .nota {
  background: var(--fondo-2); border-radius: var(--r-md);
  padding: 1.1rem 1.3rem; font-size: var(--t-sm); border-left: 3px solid var(--accento);
}

.prosa--legale { font-size: var(--t-base); }
.prosa--legale h2 { font-size: var(--t-md); margin-top: 2.2em; }

.occhiello {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accento-testo); margin: 0 0 .8rem;
}


/* ════════════════════════════════════════════ 3. Impaginazione ═══ */

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap--stretto { width: min(100% - 2.4rem, var(--wrap-stretto)); }

.sez { padding-block: var(--sp-7); }
.sez--intro { padding-block: var(--sp-6); }

.sez__testa { max-width: 46rem; margin-bottom: var(--sp-5); }
.sez__titolo { margin: 0 0 .5rem; }
.sez__sotto { color: var(--testo-tenue); font-size: var(--t-md); margin: 0; }
.sez__nota { margin-top: var(--sp-4); font-size: var(--t-sm); color: var(--testo-tenue); }
.sez__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-5); }

/* Toni: alternano il fondo delle sezioni senza toccare l'HTML. */
.t-chiaro { background: var(--fondo-2); }
.t-marca  { background: var(--marca); color: var(--su-marca); }
.t-marca .sez__sotto, .t-marca .sez__nota { color: color-mix(in srgb, var(--su-marca) 78%, transparent); }
.t-marca .occhiello { color: color-mix(in srgb, var(--su-marca) 80%, transparent); }
.t-accento { background: var(--accento); color: var(--su-accento); }

.titolo-pagina { margin: 0 0 .6rem; }
.titolo-pagina__sotto { color: var(--testo-tenue); font-size: var(--t-md); margin: 0; }
.sez--titolo-pagina { padding-block: var(--sp-6) var(--sp-4); }


/* ════════════════════════════════════════════════ 4. Bottoni ═══ */

.btn {
  --btn-fondo: transparent; --btn-testo: var(--testo); --btn-bordo: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px;                       /* area di tocco minima */
  padding: .7rem 1.35rem;
  background: var(--btn-fondo); color: var(--btn-testo);
  border: var(--bordo-btn) solid var(--btn-bordo); border-radius: var(--r-btn);
  font-family: var(--font-btn); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--sp-btn); text-transform: var(--maiuscole-btn);
  text-decoration: none; text-align: center;
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione), transform var(--transizione);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icona { flex: none; }

.btn--primario { --btn-fondo: var(--accento); --btn-testo: var(--su-accento); --btn-bordo: var(--accento); }
.btn--primario:hover { --btn-fondo: var(--accento-scuro); --btn-bordo: var(--accento-scuro); }

.btn--marca { --btn-fondo: var(--marca); --btn-testo: var(--su-marca); --btn-bordo: var(--marca); }

.btn--fantasma { --btn-testo: var(--testo); --btn-bordo: var(--bordo-forte); }
.btn--fantasma:hover { --btn-fondo: var(--fondo-2); --btn-bordo: var(--accento); --btn-testo: var(--accento-testo); }

.btn--chiaro { --btn-fondo: var(--bianco); --btn-testo: var(--testo); --btn-bordo: var(--bianco); }

.btn--grande { padding: .95rem 2rem; font-size: var(--t-base); }

.t-marca .btn--fantasma { --btn-testo: var(--su-marca); --btn-bordo: color-mix(in srgb, var(--su-marca) 45%, transparent); }
.t-marca .btn--fantasma:hover { --btn-fondo: color-mix(in srgb, var(--su-marca) 12%, transparent); --btn-testo: var(--su-marca); }


/* ════════════════════════════════════ 5. Testata e navigazione ═══ */

.testata {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  border-bottom: 1px solid var(--bordo);
}

/* ATTENZIONE — la sfocatura sta su uno pseudo-elemento, NON su .testata.
   Motivo: backdrop-filter (come transform e filter) rende l'elemento il
   BLOCCO DI CONTENIMENTO dei suoi discendenti in position:fixed. Con la
   sfocatura sulla testata, il pannello del menu mobile — che è fixed e
   deve coprire lo schermo — veniva dimensionato sulla testata e usciva
   largo 375 px e alto 119 invece di occupare tutta la finestra.
   Spostandola qui, .testata torna a non creare contenimento e il menu si
   comporta come deve. */
.testata::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.testata__riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--h-testata);
}

.marchio {
  display: flex; flex-direction: column; justify-content: center; gap: .1rem;
  text-decoration: none; flex: none; min-height: 44px;   /* area di tocco */
}
.marchio__nome {
  font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-marchio);
  letter-spacing: var(--sp-marchio); text-transform: var(--maiuscole-marchio);
  color: var(--marca); line-height: 1.05;
  /* ⚠ IL NOME NON VA A CAPO. Reso comprimibile il marchio (per non
     mandare a capo la riga), «Mazzoni falegnameria» ha cominciato a
     spezzarsi su due righe: la riga non andava più a capo, ma la
     TESTATA passava lo stesso da 76 a 108px. Il difetto si era solo
     spostato. Quando lo spazio manca il nome si scrive più piccolo —
     vedi `.marchio--lungo` — non su due righe. */
  white-space: nowrap;
}
.marchio__sotto {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--testo-tenue);
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav__lista { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
/* Il riempimento verticale porta la voce di menu a 44 px di altezza:
   è la misura minima perché un dito la prenda al primo colpo, e sui
   portatili con schermo tattile il menu si usa col dito. */
.nav__lista a {
  text-decoration: none; font-size: var(--t-sm); font-weight: 600;
  padding: .75rem 0; min-height: 44px; display: inline-flex; align-items: center;
  position: relative; white-space: nowrap;
}
.nav__lista a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .5rem; height: 2px;
  background: var(--accento); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transizione);
}
.nav__lista a:hover::after, .nav__lista a[aria-current]::after { transform: scaleX(1); }
.nav__lista a[aria-current] { color: var(--accento-testo); }

.nav__azioni { display: flex; align-items: center; gap: .6rem; }
/* Un numero di telefono non deve mai andare a capo in mezzo alle cifre:
   spezzato è illeggibile e non si riconosce più come numero. */
.nav__azioni .btn { padding: .55rem 1.1rem; min-height: 40px; white-space: nowrap; }

.lingue { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.lingue a {
  display: block; padding: .35rem .5rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-decoration: none; color: var(--testo-tenue); border-radius: var(--r-sm);
}
.lingue a:hover { background: var(--fondo-2); color: var(--testo); }
.lingue a.is-attiva { color: var(--accento-testo); background: var(--fondo-2); }

.apri-menu { display: none; }

/* Testo che resta per chi usa un lettore di schermo ma non occupa spazio.
   Serve per non perdere il nome accessibile di un pulsante quando
   l'etichetta va nascosta per ragioni di larghezza. */
.solo-lettore {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); border: 0;
}

/* ATTENZIONE — la testata a 320 px.
   È la larghezza più stretta prevista dai test, e ci arrivano davvero
   gli iPhone SE e i telefoni piccoli con il carattere ingrandito. Con il
   marchio alla misura piena più il pulsante «Menu» scritto per esteso la
   riga misurava 357 px dentro una finestra di 320: il testo veniva
   tagliato dal `overflow-x: hidden` del body, che è una rete di
   sicurezza contro la barra di scorrimento, non un modo di far stare le
   cose. Qui sotto il marchio si rimpicciolisce e del pulsante resta
   l'icona, con l'etichetta che continua a esistere per i lettori di
   schermo. */
@media (max-width: 420px) {
  .marchio { min-width: 0; }
  .marchio__nome { font-size: var(--t-md); }
  .marchio__sotto { font-size: 9.5px; letter-spacing: .1em; }
  .apri-menu__testo {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; white-space: nowrap;
    clip-path: inset(50%); border: 0;
  }
  .apri-menu { padding: .5rem .35rem; min-width: 44px; justify-content: center; }
}

/* ═══ LA TESTATA STA SU UNA RIGA SOLA. SEMPRE. ═══════════════════════
   Prima qui c'era il contrario: `flex-wrap: wrap`, messo per impedire
   che il pulsante principale finisse fuori schermo. Toglieva un difetto
   e ne metteva uno peggiore — la riga andava a capo, il marchio restava
   solo sulla prima riga e il menu scivolava sulla seconda, disallineato.
   Misurato il 14.08.2026 su MesolRicambi: **andava a capo a otto
   larghezze su nove**, da 1001 a 1920, e la testata passava da 75 a
   111px su ogni pagina. Su Tavasci e Santana lo stesso.

   La regola giusta non è «vada a capo» né «sbordi»: è **stringersi per
   gradi**, e lasciar cadere per primo quello che serve meno. In ordine,
   scendendo di larghezza:

     oltre 1500px   tutto, con le spaziature piene
     1200–1500      spaziature strette, pulsante del telefono compatto
     1001–1200      il numero di telefono esce dalla testata (resta nella
                    testata mobile, nell'eroe, nel piè di pagina e nella
                    barra fissa), voci più fitte
     fino a 1000    menu a scomparsa

   Il numero è la prima cosa a cadere perché è l'unica che sul sito
   compare altre tre volte. Il pulsante principale non cade mai. */
@media (min-width: 1001px) {
  .testata__riga { flex-wrap: nowrap; }

  /* Il marchio deve poter STRINGERSI, non solo esistere.
     Con `flex: 0 0 auto` un nome lungo si prende tutto lo spazio che
     vuole: «Capanna Righetti Fibbioli» arrivava a 441px e mandava la
     navigazione a capo a QUALUNQUE larghezza, fino a 1920 — mancavano
     sette pixel. */
  .marchio { flex: 0 1 auto; min-width: 0; }
  .nav { flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; min-width: 0; }
  .nav__lista { flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
  /* Le voci non si spezzano in mezzo a una parola: se proprio manca lo
     spazio si stringe la spaziatura, non si sillaba «Assisten-za». */
  .nav__lista a { white-space: nowrap; }
}

/* Fascia larga ma non larghissima: si recupera spazio. */
@media (min-width: 1001px) and (max-width: 1500px) {
  .nav { gap: 1rem; }
  .nav__lista { gap: .95rem; }
  .nav__azioni { gap: .4rem; }
  .nav__azioni .btn { padding: .55rem .8rem; }
}

/* Fascia stretta dei portatili: il telefono diventa la sola icona. */
@media (min-width: 1001px) and (max-width: 1240px) {
  .nav__lista { gap: .8rem; font-size: .95em; }
  .nav__azioni .btn--fantasma span { display: none; }
  .nav__azioni .btn--fantasma { padding: .55rem .6rem; }
}

/* Sotto i 1140px il numero esce del tutto dalla testata: sta già
   nell'eroe, nel piè di pagina e nella barra fissa in basso. */
@media (min-width: 1001px) and (max-width: 1140px) {
  .nav__azioni .btn--fantasma[href^="tel:"] { display: none; }
  .nav__lista { gap: .7rem; }
  .marchio__sotto { display: none; }
}

/* ⚠ SETTE VOCI O PIÙ: il telefono esce dalla testata a QUALUNQUE
   larghezza. Con otto voci e due pulsanti la riga non basta nemmeno a
   1860px, e il menu — allineato a destra — traboccava all'indietro
   stampandosi SOPRA il marchio. Non sfondava a destra, quindi nessun
   controllo se ne accorgeva: si vedeva e basta.
   Fra le due cose che potevano uscire, esce il numero: compare altre
   tre volte nella stessa pagina, mentre ogni voce di menu è una pagina
   che altrimenti non si raggiunge. */
@media (min-width: 1001px) {
  .testata--fitta .nav__azioni .btn--fantasma[href^="tel:"] { display: none; }
  .testata--fitta .nav__lista { gap: 1.05rem; }
  /* Quando non basta togliere il telefono: via anche il sottotitolo del
     marchio, voci più fitte e un filo più piccole. È l'ultimo gradino
     prima del menu a scomparsa. */
  .testata--stretta .marchio__sotto { display: none; }
  .testata--stretta .nav__lista { gap: .85rem; font-size: .95em; }
  .testata--stretta .nav__azioni .btn { padding: .6rem .95rem; }
  .testata--stretta .lingue { gap: .35rem; }
}

/* ⚠ QUI C'ERA UNA «RETE DI SICUREZZA» CHE FACEVA DANNO.
   `overflow: hidden` sul menu doveva impedirgli di scrivere sopra il
   marchio. Il risultato era che TAGLIAVA le voci: sul tedesco della
   Residenza delle Rose la prima voce si leggeva «rt» invece di
   «Start». Una voce tagliata è peggio di una voce sovrapposta, perché
   sembra un errore di programmazione anziché di spazio.
   Il menu non si taglia: si stringe, e se non basta si chiude nel
   pulsante. */
@media (min-width: 1001px) {
  .nav { min-width: 0; }
  .nav__lista { min-width: 0; }
}

/* Le lingue lunghe. Le etichette tedesche sono più larghe delle
   italiane di un buon quinto — «Dienstleistungen» contro «Servizi»,
   «Unsere Geschichte» contro «La nostra storia» — e la stessa testata
   che in italiano sta comoda, in tedesco supera di una dozzina di
   pixel. Sopra i 1200px, dove il menu a scomparsa non c'è più, le
   testate marcate strette si stringono ancora. */
@media (min-width: 1201px) {
  .testata--stretta .nav__lista { gap: .68rem; font-size: .89em; }
  .testata--stretta .nav { gap: .8rem; }
  .testata--stretta .lingue { gap: .25rem; }
  .testata--stretta .lingue a { padding: .3rem .4rem; }
  .testata--stretta .nav__azioni { gap: .35rem; }
  .testata--stretta .nav__azioni .btn { padding: .58rem .85rem; font-size: calc(var(--t-sm) * .95); }
}

/* ⚠ I SITI PIÙ CARICHI USANO IL MENU A SCOMPARSA ANCHE FINO A 1200px.
   A 1001px il contenitore utile è 963px: per La Cascata — otto voci,
   due lingue e un pulsante — il menu resta più largo di novantanove
   pixel anche dopo aver tolto telefono e sottotitolo, e si stampa sopra
   il marchio. Stringere ancora vorrebbe dire voci da otto pixel: si
   leggono male e si toccano peggio.
   Meglio la struttura giusta: in quella fascia questi siti mostrano il
   pulsante del menu, come già fanno sotto i 1000px. Sono le stesse
   regole del formato compatto, ristrette a `.testata--stretta`. */
@media (min-width: 1001px) and (max-width: 1200px) {
  .testata--stretta .apri-menu {
    display: inline-flex; align-items: center; gap: .55rem;
    background: none; border: 0; padding: .5rem; min-height: 44px;
    font-size: var(--t-sm); font-weight: 600;
  }
  .testata--stretta .apri-menu__barre,
  .testata--stretta .apri-menu__barre::before,
  .testata--stretta .apri-menu__barre::after {
    display: block; width: 22px; height: 2px; background: currentColor;
    transition: transform var(--transizione), opacity var(--transizione);
  }
  .testata--stretta .apri-menu__barre { position: relative; }
  .testata--stretta .apri-menu__barre::before,
  .testata--stretta .apri-menu__barre::after { content: ''; position: absolute; left: 0; }
  .testata--stretta .apri-menu__barre::before { top: -7px; }
  .testata--stretta .apri-menu__barre::after { top: 7px; }
  .testata--stretta .apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
  .testata--stretta .apri-menu[aria-expanded="true"] .apri-menu__barre::before { transform: translateY(7px) rotate(45deg); }
  .testata--stretta .apri-menu[aria-expanded="true"] .apri-menu__barre::after { transform: translateY(-7px) rotate(-45deg); }

  .testata--stretta .nav {
    position: fixed; inset: var(--h-testata) 0 0; z-index: 90;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    flex-wrap: nowrap; gap: 0; padding: 1.4rem 1.2rem 6rem;
    background: var(--fondo); border-top: 1px solid var(--bordo);
    overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--transizione), visibility var(--transizione);
  }
  .testata--stretta .nav.is-aperto { transform: none; visibility: visible; }
  .testata--stretta .nav__lista {
    flex-direction: column; align-items: stretch; gap: 0;
    flex-wrap: nowrap; overflow: visible; font-size: 1em;
  }
  .testata--stretta .nav__lista li + li { border-top: 1px solid var(--bordo); }
  .testata--stretta .nav__lista a { display: block; padding: .95rem .2rem; font-size: var(--t-md); }
  .testata--stretta .nav__lista a::after { display: none; }
  .testata--stretta .nav__azioni { flex-direction: column; align-items: stretch; gap: .7rem; margin-top: 1.6rem; }
  .testata--stretta .nav__azioni .btn { width: 100%; }
  /* Nel pannello il numero torna, ED È IL NUMERO, non solo l'icona:
     la regola della fascia stretta nasconde l'etichetta per far stare il
     pulsante nella testata, ma dentro il pannello a tutta larghezza
     lasciava un rettangolo vuoto con una cornetta in mezzo. */
  .testata--stretta .nav__azioni .btn--fantasma[href^="tel:"] { display: inline-flex; }
  .testata--stretta .nav__azioni .btn--fantasma span { display: inline; }
  .testata--stretta .lingue { order: -1; justify-content: center; margin-bottom: .4rem; }
  .testata--stretta .marchio__sotto { display: block; }
}

@media (max-width: 1000px) {
  .apri-menu {
    display: inline-flex; align-items: center; gap: .55rem;
    background: none; border: 0; padding: .5rem; min-height: 44px;
    font-size: var(--t-sm); font-weight: 600;
  }
  .apri-menu__barre, .apri-menu__barre::before, .apri-menu__barre::after {
    display: block; width: 22px; height: 2px; background: currentColor;
    transition: transform var(--transizione), opacity var(--transizione);
  }
  .apri-menu__barre { position: relative; }
  .apri-menu__barre::before, .apri-menu__barre::after { content: ''; position: absolute; left: 0; }
  .apri-menu__barre::before { top: -7px; }
  .apri-menu__barre::after { top: 7px; }
  .apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
  .apri-menu[aria-expanded="true"] .apri-menu__barre::before { transform: translateY(7px) rotate(45deg); }
  .apri-menu[aria-expanded="true"] .apri-menu__barre::after { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: fixed; inset: var(--h-testata) 0 0; z-index: 90;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 1.4rem 1.2rem 6rem;
    background: var(--fondo); border-top: 1px solid var(--bordo);
    overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--transizione), visibility var(--transizione);
  }
  .nav.is-aperto { transform: none; visibility: visible; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista li + li { border-top: 1px solid var(--bordo); }
  .nav__lista a { display: block; padding: .95rem .2rem; font-size: var(--t-md); }
  .nav__lista a::after { display: none; }
  .nav__azioni { flex-direction: column; align-items: stretch; gap: .7rem; margin-top: 1.6rem; }
  .nav__azioni .btn { width: 100%; }
  .lingue { order: -1; justify-content: center; margin-bottom: .4rem; }
}



/* Nomi lunghi: il motore aggiunge `marchio--lungo` quando il nome del
   cliente supera i venti caratteri.

   Non è una scelta estetica, è aritmetica. «Macelleria
   Bernasconi-Fumagalli» sono trentuno caratteri e a corpo pieno occupa
   più di 440px: accanto a un menu di cinque voci e a due pulsanti non
   ci sta nemmeno a 1920px, e la navigazione va a capo su ogni pagina
   del sito.

   E non basta rendere il marchio comprimibile: quando una riga flex ha
   `flex-wrap: wrap`, il browser preferisce **andare a capo** piuttosto
   che restringere i suoi elementi. Lo spazio va quindi tolto alla
   fonte, riducendo il corpo del nome. */
@media (min-width: 1001px) {
  .marchio--lungo .marchio__nome { font-size: var(--t-base); letter-spacing: .01em; }
  .marchio--lungo .marchio__sotto { font-size: calc(var(--t-xs) * .9); }
  /* Sopra i ventisei caratteri un gradino solo non basta. */
  .marchio--lunghissimo .marchio__nome { font-size: var(--t-sm); letter-spacing: 0; }
  .marchio--lunghissimo .marchio__sotto { font-size: calc(var(--t-xs) * .82); letter-spacing: .08em; }
}
/* Sui portatili si stringe anche il marchio corto: è lì che lo spazio
   scarseggia per davvero. */
@media (min-width: 1001px) and (max-width: 1240px) {
  .marchio__nome { font-size: var(--t-base); }
  .marchio--lungo .marchio__nome { font-size: var(--t-sm); }
  .marchio--lunghissimo .marchio__nome { font-size: calc(var(--t-sm) * .92); }
}
/* Nella fascia stretta il sottotitolo è la prima cosa sacrificabile:
   ripete quasi sempre il comune, che sta anche nel piè di pagina. */
@media (min-width: 1001px) and (max-width: 1360px) {
  .marchio--lungo .marchio__sotto { display: none; }
}

/* ═══════════════════════════════════════════════════ 6. Hero ═══ */

.hero { position: relative; isolation: isolate; }

.hero__dentro { padding-block: var(--sp-8) var(--sp-7); max-width: 54rem; }
.hero__occhiello {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 1rem; color: var(--accento-testo);
}
.hero__titolo { font-size: var(--t-3xl); margin: 0 0 1rem; }
.hero__testo { font-size: var(--t-md); color: var(--testo-tenue); max-width: 40rem; margin: 0; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-5); }

.hero__fatti {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  font-size: var(--t-sm); color: var(--testo-tenue);
}
.hero__fatti li { display: flex; align-items: center; gap: .45rem; }
.hero__fatti li.is-aperto { color: var(--verde-ok); font-weight: 600; }

/* Sul fondo scuro dell'hero il verde "aperto" va schiarito: quello usato
   sul chiaro finirebbe sotto la soglia di contrasto e sparirebbe. */
.hero--tipografico .hero__fatti li.is-aperto,
.hero--foto .hero__fatti li.is-aperto { color: var(--verde-ok-chiaro, #8FD9AE); }

/* Variante tipografica: nessuna fotografia, il peso lo porta il testo. */
.hero--tipografico { background: var(--hero-fondo); color: var(--hero-testo); }
.hero--tipografico .hero__testo { color: color-mix(in srgb, var(--hero-testo) 78%, transparent); }
.hero--tipografico .hero__occhiello { color: color-mix(in srgb, var(--hero-testo) 82%, transparent); }
.hero--tipografico .hero__fatti { color: color-mix(in srgb, var(--hero-testo) 75%, transparent); }
.hero--tipografico .btn--fantasma { --btn-testo: var(--hero-testo); --btn-bordo: color-mix(in srgb, var(--hero-testo) 42%, transparent); }

/* Il pulsante principale si INVERTE sull'hero pieno.
   Senza questo, un tema in cui il colore d'accento coincide con il fondo
   dell'hero (il caso più comune: entrambi il colore di marca) produce un
   pulsante dello stesso colore dello sfondo, cioè invisibile — e la
   chiamata all'azione più importante della pagina sparisce. */
.hero--tipografico .btn--primario {
  --btn-fondo: var(--hero-btn-fondo, var(--hero-testo));
  --btn-testo: var(--hero-btn-testo, var(--hero-fondo));
  --btn-bordo: var(--hero-btn-fondo, var(--hero-testo));
}
.hero--tipografico .btn--primario:hover { filter: brightness(1.06); }
.hero--tipografico::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: var(--hero-trama-op, 0);
  background-image: var(--hero-trama, none); background-size: var(--hero-trama-dim, 60px 60px);
}

/* ── Variante con fotografia ──────────────────────────────────────────
   La velatura non è un effetto grafico: è quello che tiene leggibile il
   testo sopra una fotografia che non conosciamo.

   La versione precedente era un gradiente da 28% a 62% di nero. Sembra
   tanto, e non basta: su una foto luminosa — neve, cielo bianco, un
   muro intonacato al sole — nella parte alta il bianco su bianco arriva
   a 1:1. Non si era mai visto solo perché fino al 14.08.2026 nessun
   sito usava una hero fotografica.

   Adesso gli strati sono due, e servono a due cose diverse:

     · il VELO (`::before`) è **uniforme** e dipinto in `--hero-fondo`,
       cioè nel colore scuro di marca del sito. È lui a garantire il
       contrasto: se la foto fosse tutta bianca, il testo starebbe
       comunque su `mix(hero-fondo, bianco, 1 - opacità)`. Quel colore
       si calcola, e `contrasti.py` lo calcola davvero e boccia il tema
       se scende sotto 4.5:1. Il caso peggiore è quindi un numero, non
       una speranza.
     · il GRADIENTE (`::after`) aggiunge buio in basso, dove sta il
       testo. Serve alla profondità, e siccome può solo scurire, non
       tocca la garanzia di cui sopra.

   Dipingere il velo nel colore di marca invece che in nero ha anche un
   effetto voluto: la fotografia entra nella tavolozza del sito invece
   di stonarci contro. */
.hero--foto { color: #fff; background: var(--hero-fondo); }
/* ⚠ `overflow: hidden` NON è decorazione. La fotografia dell'eroe si
   allarga pianissimo (animazione `respiro`), e una `scale` maggiore di 1
   sborda dal suo riquadro: senza il ritaglio la pagina scorreva di lato
   di qualche pixel — pochi, quindi invisibili a occhio e ben visibili a
   chi misura. Trovato il 19.08.2026 al banco delle nove larghezze. */
.hero--foto .hero__sfondo { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero--foto .hero__sfondo img { width: 100%; height: 100%; object-fit: cover; }

/* ① il velo che garantisce il contrasto — uniforme, colore di marca */
.hero--foto::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--hero-fondo);
  opacity: var(--hero-velo, .72);
}
/* ② il gradiente che dà profondità — può solo aggiungere buio */
.hero--foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
              rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .1) 45%, rgb(0 0 0 / .42) 100%);
}
.hero--foto .hero__dentro { padding-block: var(--sp-8); min-height: 62svh; display: flex; flex-direction: column; justify-content: flex-end; }
.hero--foto .hero__testo, .hero--foto .hero__fatti { color: rgb(255 255 255 / .94); }
.hero--foto .hero__occhiello { color: rgb(255 255 255 / .95); }
.hero--foto .btn--fantasma { --btn-testo: #fff; --btn-bordo: rgb(255 255 255 / .5); }
.hero--foto .btn--fantasma:hover { --btn-fondo: rgb(255 255 255 / .14); }
/* Sulla fotografia il colore d'accento va spesso a finire su un'ombra:
   il pulsante principale diventa bianco, che si stacca da qualsiasi foto. */
.hero--foto .btn--primario { --btn-fondo: #fff; --btn-testo: var(--marca); --btn-bordo: #fff; }

/* Sul telefono l'hero non deve spingere la chiamata all'azione sotto la
   piega: si accorcia il respiro verticale, non il testo. */
@media (max-width: 700px) {
  .hero__dentro { padding-block: var(--sp-6) var(--sp-5); }
  .hero--foto .hero__dentro { padding-block: var(--sp-7) var(--sp-5); min-height: 56svh; }
}


/* ═══════════════════════════════════════════════ 7. Sezioni ═══ */

/* — punti (griglia di riquadri con icona) */
.punti { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.punti--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.punti--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.punti--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.punto {
  background: var(--fondo-scheda); border: 1px solid var(--bordo);
  border-radius: var(--r-lg); padding: var(--sp-4);
  transition: border-color var(--transizione), transform var(--transizione), box-shadow var(--transizione);
}
.punto:hover { border-color: var(--accento); transform: translateY(-2px); box-shadow: var(--ombra-1); }
.punto__icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1rem;
  border-radius: var(--r-icona); background: var(--accento-tenue); color: var(--accento-testo);
}
.punto__titolo { font-size: var(--t-md); margin: 0 0 .45rem; }
.punto__testo { font-size: var(--t-sm); color: var(--testo-tenue); margin: 0; }
.punto__link {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  min-height: 44px;   /* area di tocco: è il link che porta alla pagina */
  font-size: var(--t-sm); font-weight: 600; color: var(--accento-testo); text-decoration: none;
}
.punto__link:hover { text-decoration: underline; }
.t-marca .punto { background: color-mix(in srgb, var(--su-marca) 8%, transparent); border-color: color-mix(in srgb, var(--su-marca) 18%, transparent); }
.t-marca .punto__testo { color: color-mix(in srgb, var(--su-marca) 75%, transparent); }
.t-marca .punto__icona { background: color-mix(in srgb, var(--su-marca) 14%, transparent); color: var(--su-marca); }

/* — duo (testo + immagine) */
.duo { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .sez--duo-inv .duo__testo { order: 2; }
}
.duo__foto { margin: 0; }
.duo__foto img { border-radius: var(--r-lg); width: 100%; }
.duo__foto figcaption { margin-top: .7rem; font-size: var(--t-sm); color: var(--testo-tenue); }

.lista-spunte, .lista-punti { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.lista-spunte li { display: flex; gap: .65rem; align-items: flex-start; }
.lista-spunte li + li { margin-top: .65rem; }
.lista-spunte .icona { flex: none; margin-top: .28em; color: var(--accento-testo); }

/* — elenco su due colonne */
.elenco-doppio {
  columns: 2; column-gap: var(--sp-5); list-style: none; margin: 0; padding: 0;
}
.elenco-doppio li {
  display: flex; gap: .55rem; align-items: flex-start;
  break-inside: avoid; padding: .4rem 0; font-size: var(--t-sm);
}
.elenco-doppio .icona { flex: none; margin-top: .3em; color: var(--accento-testo); }
@media (max-width: 640px) { .elenco-doppio { columns: 1; } }

/* — voci (menu, listino, camere) */
.gruppo-voci + .gruppo-voci { margin-top: var(--sp-6); }
.gruppo-voci__titolo {
  font-size: var(--t-lg); margin: 0 0 .3rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--accento-tenue);
}
.gruppo-voci__testo { color: var(--testo-tenue); font-size: var(--t-sm); margin: .6rem 0 0; }
.voci { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 780px) { .voci { grid-template-columns: 1fr 1fr; gap: 1.1rem var(--sp-5); } }
/* Il nome della voce e il prezzo stanno sulla stessa riga finché ci
   stanno. A 320px, con un nome tedesco lungo e un prezzo che non si
   spezza, la riga sfondava: `flex-wrap` la manda a capo invece di
   portarsi via la pagina. */
.voce__testa { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.voce__nome { font-size: var(--t-base); font-family: var(--font-testo); font-weight: 700; margin: 0; }
.voce__testa::before {
  content: ''; order: 1; flex: 1;
  border-bottom: 1px dotted var(--bordo-forte); transform: translateY(-.25em);
}
.voce__prezzo { order: 2; font-weight: 700; color: var(--accento-testo); white-space: nowrap; }
.voce__testo { font-size: var(--t-sm); color: var(--testo-tenue); margin: .25rem 0 0; }

/* — numeri */
.numeri {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-4); list-style: none; margin: 0; padding: 0; text-align: center;
}
.numeri__n { display: block; font-family: var(--font-titoli); font-size: var(--t-2xl); line-height: 1; color: var(--accento-testo); }
.t-marca .numeri__n { color: var(--su-marca); }
.numeri__et { display: block; margin-top: .45rem; font-size: var(--t-sm); color: var(--testo-tenue); }
.t-marca .numeri__et { color: color-mix(in srgb, var(--su-marca) 76%, transparent); }

/* — passi */
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: p; }
@media (min-width: 820px) { .passi { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.passo { display: flex; gap: 1rem; align-items: flex-start; }
.passo__n {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accento); color: var(--su-accento);
  font-family: var(--font-titoli); font-size: var(--t-md); font-weight: 700;
}
.passo__titolo { font-size: var(--t-md); margin: .3rem 0 .35rem; }
.passo p { font-size: var(--t-sm); color: var(--testo-tenue); margin: 0; }

/* — citazione */
.citazione { margin: 0; text-align: center; }
.citazione p {
  font-family: var(--font-titoli); font-size: var(--t-xl); font-style: italic;
  line-height: 1.35; margin: 0;
}
.citazione cite { display: block; margin-top: 1.2rem; font-size: var(--t-sm); font-style: normal; color: var(--testo-tenue); }

/* — cta */
.sez--cta { padding-block: var(--sp-6); background: var(--marca); color: var(--su-marca); }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.cta__titolo { margin: 0 0 .3rem; font-size: var(--t-xl); }
.cta__testo { margin: 0; color: color-mix(in srgb, var(--su-marca) 80%, transparent); max-width: 34rem; }
.cta__azioni { display: flex; flex-wrap: wrap; gap: .8rem; }
.sez--cta .btn--primario { --btn-fondo: var(--su-marca); --btn-testo: var(--marca); --btn-bordo: var(--su-marca); }
.sez--cta .btn--primario:hover { --btn-fondo: #fff; --btn-bordo: #fff; }
.sez--cta .btn--fantasma { --btn-testo: var(--su-marca); --btn-bordo: color-mix(in srgb, var(--su-marca) 45%, transparent); }

/* — avviso */
.sez--avviso { padding-block: var(--sp-4); }
.avviso {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--avviso-fondo); border-left: 4px solid var(--avviso-bordo);
  border-radius: var(--r-md); padding: 1rem 1.2rem; margin: 0; font-size: var(--t-sm);
}
.avviso .icona { flex: none; margin-top: .15em; color: var(--avviso-bordo); }

/* — tabella */
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabella { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 28rem; }
.tabella th, .tabella td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--bordo); }
.tabella thead th { background: var(--fondo-2); font-weight: 700; white-space: nowrap; }
.tabella tbody th { font-weight: 600; }

/* — galleria */
.galleria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .7rem; list-style: none; margin: 0; padding: 0;
}
.galleria__cella {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3;
}
.galleria__cella img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.galleria__cella:hover img { transform: scale(1.04); }

/* Visore a schermo intero */
.visore {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgb(0 0 0 / .92); padding: 1rem;
}
.visore img { max-width: 100%; max-height: 86svh; object-fit: contain; border-radius: var(--r-sm); }
.visore__chiudi, .visore__prec, .visore__succ {
  position: absolute; background: rgb(255 255 255 / .12); color: #fff;
  border: 0; border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center;
}
.visore__chiudi { top: 1rem; right: 1rem; font-size: 1.6rem; line-height: 1; }
.visore__prec { left: 1rem; }
.visore__succ { right: 1rem; }
.visore__conta { position: absolute; bottom: 1.2rem; color: rgb(255 255 255 / .8); font-size: var(--t-sm); }

/* — faq */
.faq { border-top: 1px solid var(--bordo); }
.faq__voce { border-bottom: 1px solid var(--bordo); }
.faq__voce summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem .2rem; cursor: pointer; list-style: none;
  font-family: var(--font-titoli); font-size: var(--t-md); font-weight: var(--peso-titoli);
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary .icona { flex: none; transition: transform var(--transizione); color: var(--accento-testo); }
.faq__voce[open] summary .icona { transform: rotate(180deg); }
.faq__risposta { padding: 0 .2rem 1.2rem; color: var(--testo-tenue); font-size: var(--t-base); }

/* — mappa
   Tinta in palette: l'iframe viene scolorito e sopra ci si mette uno
   strato del colore di marca in mix-blend-mode:color, che sostituisce la
   tinta lasciando intatte le luminanze — strade, edifici e acqua restano
   distinguibili. `isolation` tiene il blend dentro il riquadro.
   Lo strato ha pointer-events:none: la mappa resta trascinabile. */
.mappa {
  position: relative; isolation: isolate;
  aspect-ratio: 16 / 9; max-height: 30rem;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--fondo-2); border: 1px solid var(--bordo);
}
@media (max-width: 700px) { .mappa { aspect-ratio: 4 / 3; } }

/* L'iframe è più alto del riquadro e viene ritagliato in basso: fuori
   resta la barra che OpenStreetMap incolla nell'embed («Report a problem
   · © OpenStreetMap contributors · Make a Donation…»), che è lunga,
   disordinata e in inglese. L'attribuzione richiesta dalla licenza resta,
   pulita, nel credito qui sotto. */
.mappa iframe {
  position: absolute; inset: 0 0 auto 0;
  width: 100%; height: calc(100% + 32px); border: 0;
  filter: var(--mappa-filtro, grayscale(.85) contrast(1.04) brightness(1.03));
}
.mappa__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--mappa-tinta, var(--marca));
  mix-blend-mode: color;
  opacity: var(--mappa-tinta-op, .55);
}

/* Il credito è l'unico obbligo della licenza ODbL: piccolo, in basso a
   destra, leggibile. Sta sopra al velo, non ne viene tinto. */
.mappa__credito {
  position: absolute; right: 0; bottom: 0; margin: 0; z-index: 2;
  padding: .18rem .5rem; border-radius: var(--r-sm) 0 0 0;
  background: color-mix(in srgb, var(--bianco) 88%, transparent);
  font-size: 11px; line-height: 1.5;
}
.mappa__credito a { color: var(--testo-tenue); text-decoration: none; }
.mappa__credito a:hover { text-decoration: underline; }

.mappa__link { margin-top: var(--sp-4); }

/* — fascia della mappa in fondo alla pagina
   Bassa e a tutta larghezza: chiude ogni pagina con «dove siamo» senza
   rubare mezzo schermo. La scheda con indirizzo e pulsante sta sopra la
   mappa, allineata alla colonna del sito. */
.mappa-pie { position: relative; isolation: isolate; }
.mappa-pie .mappa {
  aspect-ratio: auto; height: clamp(200px, 24vh, 260px); max-height: none;
  border-radius: 0; border: 0; border-top: 1px solid var(--bordo);
}
.mappa-pie__scheda {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  left: max(1.2rem, calc((100% - var(--wrap)) / 2));
  max-width: 21rem; padding: 1.05rem 1.25rem;
  background: color-mix(in srgb, var(--bianco) 93%, transparent);
  border: 1px solid var(--bordo); border-radius: var(--r-md);
  box-shadow: var(--ombra-1);
}
.mappa-pie__nome {
  margin: 0 0 .2rem; font-family: var(--font-titoli); font-size: var(--t-md);
  font-weight: var(--peso-titoli); color: var(--testo);
}
.mappa-pie__indirizzo {
  margin: 0 0 .8rem; font-style: normal; font-size: var(--t-sm); color: var(--testo-tenue);
}
.mappa-pie__scheda .btn { --btn-fondo: var(--accento); --btn-testo: var(--su-accento); --btn-bordo: var(--accento); }
.mappa-pie__scheda .btn:hover { --btn-fondo: var(--accento-scuro); --btn-bordo: var(--accento-scuro); }

/* Sul telefono la scheda non copre la mappa: le sta sotto. */
@media (max-width: 760px) {
  .mappa-pie .mappa { height: 190px; }
  .mappa-pie__scheda {
    position: static; transform: none; max-width: none; border-radius: 0;
    border-inline: 0; border-top: 0; text-align: center; box-shadow: none;
    background: var(--fondo-2);
  }
  .mappa-pie__scheda .btn { width: 100%; }
}

/* A chi ha chiesto più contrasto la mappa si serve nei colori originali:
   sono più leggibili di qualunque tinta di marca. */
@media (prefers-contrast: more) {
  .mappa iframe { filter: none; }
  .mappa__velo { display: none; }
}

/* — schede (blog) */
.schede { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.schede--elenco { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.scheda {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--fondo-scheda); border: 1px solid var(--bordo); border-radius: var(--r-lg);
  transition: border-color var(--transizione), transform var(--transizione);
}
.scheda:hover { border-color: var(--accento); transform: translateY(-2px); }
.scheda__foto { display: block; aspect-ratio: 16 / 10; }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda__corpo { padding: var(--sp-4); display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.scheda__data { font-size: var(--t-xs); color: var(--testo-tenue); margin: 0; letter-spacing: .04em; }
.scheda__titolo { font-size: var(--t-md); margin: 0; }
.scheda__titolo a { text-decoration: none; }
.scheda__titolo a:hover { color: var(--accento-testo); }
.scheda__testo { font-size: var(--t-sm); color: var(--testo-tenue); margin: 0; }
.scheda__leggi { margin: auto 0 0; padding-top: .7rem; font-size: var(--t-sm); font-weight: 600; }
.scheda__leggi a { display: inline-flex; align-items: center; gap: .35rem; color: var(--accento-testo); text-decoration: none; }

/* — articolo */
.articolo__testa { padding-block: var(--sp-6) var(--sp-4); }
.articolo__meta { font-size: var(--t-sm); color: var(--testo-tenue); display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.articolo__meta a { color: var(--accento-testo); }
.articolo__titolo { font-size: var(--t-2xl); margin: 0 0 .8rem; }
.articolo__sommario { font-size: var(--t-md); color: var(--testo-tenue); margin: 0; }
.articolo__copertina { margin: 0 0 var(--sp-5); }
.articolo__copertina img { width: 100%; border-radius: var(--r-lg); }
.articolo__corpo { padding-bottom: var(--sp-6); }
.tag { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.tag li {
  font-size: var(--t-xs); padding: .3rem .75rem; border-radius: var(--r-pill);
  background: var(--fondo-2); color: var(--testo-tenue);
}

/* — contatti */
.contatti { display: grid; gap: var(--sp-6); }
@media (min-width: 940px) { .contatti { grid-template-columns: 1fr 1.15fr; gap: var(--sp-7); } }
.contatti__intro { color: var(--testo-tenue); margin-bottom: var(--sp-4); }
.recapiti { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
/* `min-width: 0` sui figli, e i valori che possono spezzarsi.
   Senza queste due righe un indirizzo e-mail lungo — è bastato
   `info@residenzadellerose.ch` — non si spezza mai, fissa la larghezza
   minima della colonna dei recapiti e a 320px spinge fuori la pagina.
   Trovato il 14.08.2026 sul sito 23, e riguarda qualunque cliente con
   un dominio lungo. */
.recapito { display: flex; gap: .9rem; align-items: flex-start; min-width: 0; }
.recapito__icona {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--r-icona); background: var(--accento-tenue); color: var(--accento-testo);
}
.recapito__corpo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.recapito__et { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--testo-tenue); }
.recapito__val {
  font-size: var(--t-md); font-weight: 600; font-style: normal; text-decoration: none;
  overflow-wrap: anywhere;
}
/* Telefono ed e-mail sulla pagina contatti: sono i due link che si
   toccano più spesso da telefono, e devono essere alti 44 px. */
a.recapito__val { display: inline-flex; align-items: center; min-height: 44px; }
a.recapito__val:hover { color: var(--accento-testo); text-decoration: underline; }
.recapito__val--orari { font-size: var(--t-sm); font-weight: 400; display: grid; gap: .2rem; }
.riga-orario { display: flex; gap: 1rem; justify-content: space-between; max-width: 22rem; }
.riga-orario.is-chiuso { color: var(--testo-tenue); }
.contatti__arrivare { margin-top: var(--sp-5); font-size: var(--t-sm); color: var(--testo-tenue); }
.contatti__arrivare h3 { font-size: var(--t-base); color: var(--testo); }

/* — esito (grazie, 404) */
.esito { text-align: center; padding-block: var(--sp-7); }
.esito__segno {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto var(--sp-4);
  border-radius: 50%; background: var(--accento-tenue); color: var(--accento-testo);
}
.esito__codice { font-family: var(--font-titoli); font-size: var(--t-3xl); color: var(--accento-tenue); margin: 0 0 .5rem; line-height: 1; }
.esito__titolo { margin: 0 0 .8rem; }
.esito__testo { font-size: var(--t-md); margin: 0 auto; max-width: 34rem; }
.esito__nota { font-size: var(--t-sm); color: var(--testo-tenue); margin: 1rem auto 0; max-width: 34rem; }
.esito__azioni { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: var(--sp-5); }
.esito__mappa { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; list-style: none; margin: var(--sp-6) 0 0; padding: 0; font-size: var(--t-sm); }
.vuoto { color: var(--testo-tenue); text-align: center; padding-block: var(--sp-6); }


/* ═══════════════════════════════════════════════ 8. Moduli ═══ */

.modulo { margin: 0; }
.modulo__griglia { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
.campo { display: flex; flex-direction: column; gap: .35rem; grid-column: span 6; }
.campo--meta { grid-column: span 3; }
.campo--terzo { grid-column: span 2; }
@media (max-width: 620px) { .campo--meta, .campo--terzo { grid-column: span 6; } }

.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo__obb { color: var(--errore); }

.campo input, .campo select, .campo textarea {
  width: 100%; padding: .75rem .9rem; min-height: 46px;
  background: var(--bianco); color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: var(--r-md);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--accento-tenue);
}
.campo--errore input, .campo--errore select, .campo--errore textarea { border-color: var(--errore); }
.campo__errore { color: var(--errore); font-size: var(--t-sm); margin: 0; }

.campo--consenso { margin-top: 1.2rem; }
.consenso { display: flex; gap: .7rem; align-items: flex-start; }
.consenso input { width: 24px; height: 24px; min-height: 0; flex: none; margin-top: .18em; accent-color: var(--accento); }
.consenso label { font-weight: 400; font-size: var(--t-sm); cursor: pointer; padding-block: .35rem; }

.modulo__nota { font-size: var(--t-xs); color: var(--testo-tenue); margin: 1.1rem 0 1.3rem; }
.modulo__errore-generale {
  background: var(--errore-tenue); color: var(--errore-testo);
  border-left: 4px solid var(--errore); border-radius: var(--r-md);
  padding: .9rem 1.1rem; margin: 0 0 1.4rem; font-size: var(--t-sm); font-weight: 600;
}

/* Campo esca: fuori dallo schermo, ma non display:none (i bot lo saltano). */
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ═════════════════════════════ 9. Piè di pagina e barra mobile ═══ */

.pie { background: var(--pie-fondo); color: var(--pie-testo); padding-block: var(--sp-6) 0; margin-top: var(--sp-7); }
.pie__griglia { display: grid; gap: var(--sp-5); }
@media (min-width: 780px) { .pie__griglia { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); } }

.pie__nome { font-family: var(--font-titoli); font-size: var(--t-lg); margin: 0 0 .3rem; color: var(--pie-titolo); }
.pie__claim { font-size: var(--t-sm); letter-spacing: .04em; margin: 0 0 1rem; color: color-mix(in srgb, var(--pie-testo) 82%, transparent); }
.pie__testo { font-size: var(--t-sm); color: color-mix(in srgb, var(--pie-testo) 74%, transparent); margin: 0; }
.pie__titolo { font-size: var(--t-base); margin: 0 0 1rem; color: var(--pie-titolo); }
.pie__nota { font-size: var(--t-xs); color: color-mix(in srgb, var(--pie-testo) 66%, transparent); margin-top: .9rem; }

.orari-lista { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.orari-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.orari-lista li.is-chiuso { color: color-mix(in srgb, var(--pie-testo) 58%, transparent); }
.orari-lista__ore { text-align: right; white-space: nowrap; }

.pie__indirizzo { font-style: normal; font-size: var(--t-sm); margin: 0 0 1rem; line-height: 1.7; }
.pie__contatti { list-style: none; margin: 0 0 1.2rem; padding: 0; font-size: var(--t-sm); display: grid; gap: .5rem; }
.pie__contatti li { display: flex; align-items: center; gap: .5rem; }
.pie__contatti a { text-decoration: none; }
.pie__contatti a:hover { text-decoration: underline; }

.social { display: flex; gap: .5rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--pie-testo) 12%, transparent);
  transition: background var(--transizione);
}
.social a:hover { background: color-mix(in srgb, var(--pie-testo) 24%, transparent); }

.pie__coda {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; align-items: center;
  margin-top: var(--sp-6); padding-block: 1.3rem;
  border-top: 1px solid color-mix(in srgb, var(--pie-testo) 16%, transparent);
  font-size: var(--t-xs); color: color-mix(in srgb, var(--pie-testo) 70%, transparent);
}
.pie__coda p { margin: 0; }
.pie__legale { display: flex; flex-wrap: wrap; gap: .5rem; }
/* I crediti fotografici: obbligatori per le licenze CC BY, quindi
   sempre leggibili — ma non sono un messaggio del cliente, quindi
   discreti. Un gradino sotto il resto del piè di pagina. */
.pie__crediti {
  margin: .9rem 0 0; font-size: var(--t-xs);
  color: color-mix(in srgb, var(--pie-testo) 66%, transparent);
}
.pie__crediti a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.pie__crediti span { margin-inline: .3rem; }

.pie__legale a { text-decoration: none; }
.pie__legale a:hover { text-decoration: underline; }

/* WhatsApp */
.whatsapp {
  position: fixed; right: 1rem; bottom: calc(var(--h-barra) + 1rem); z-index: 90;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; box-shadow: var(--ombra-2);
  transition: transform var(--transizione);
}
.whatsapp:hover { transform: scale(1.06); }
@media (min-width: 780px) { .whatsapp { right: 1.6rem; bottom: 1.6rem; } }

/* Barra fissa sul telefono */
.barra-mobile {
  position: fixed; inset: auto 0 0; z-index: 95;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--bordo); box-shadow: 0 -4px 20px rgb(0 0 0 / .07);
}
.barra-mobile__stato { font-size: var(--t-xs); font-weight: 600; color: var(--testo-tenue); text-decoration: none; }
.barra-mobile__stato.is-aperto { color: var(--verde-ok); }
.barra-mobile__cta {
  /* 44 px, non 42: è il pulsante più toccato di tutto il sito. */
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.2rem;
  background: var(--accento); color: var(--su-accento); border-radius: var(--r-btn);
  font-size: var(--t-sm); font-weight: 700; text-decoration: none; white-space: nowrap;
}
@media (min-width: 780px) { .barra-mobile { display: none; } }
@media (max-width: 779px) { body { padding-bottom: var(--h-barra); } }

/* A menu aperto la barra in basso sparisce: altrimenti resta a galleggiare
   sopra le voci di navigazione e sembra un pezzo di pagina rimasto indietro. */
body:has(.nav.is-aperto) .barra-mobile,
body:has(.nav.is-aperto) .whatsapp { display: none; }


/* ═════════════════════════════════════════════════ 10. Stampa ═══ */

@media print {
  .testata, .pie__legale, .barra-mobile, .whatsapp, .modulo, .mappa, .salta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sez { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ══════════════════════════════════════════ 11. Aree di tocco ═══ */
/* Il brief chiede 44x44 px come area minima toccabile, ed è la misura
   che rende un link prendibile al primo colpo con il pollice. I
   pulsanti (.btn) e le voci di menu ce l'hanno già; qui si sistemano i
   link che restavano alti 13-23 px — quelli del piè di pagina, i
   recapiti e la barra fissa del telefono. Si alza solo l'AREA, non il
   testo: la riga di testo resta della misura di prima.
   Fa eccezione il credito «© OpenStreetMap» sulla mappa, che la licenza
   vuole discreto: là si arriva a 24 px, che è il minimo di WCAG 2.2 AA
   per gli elementi non in linea. */

.pie__contatti a,
.pie__legale a,
.barra-mobile__stato,
a.recapito__val,
.punto__link,
.lingue a {
  display: inline-flex; align-items: center; min-height: 44px;
}

.lingue a { justify-content: center; min-width: 44px; }

.mappa__credito a { display: inline-flex; align-items: center; min-height: 24px; padding-inline: .35rem; }

/* Il collegamento all'informativa dentro la frase del consenso resta in
   linea nel testo — è l'eccezione prevista da WCAG — ma guadagna
   abbastanza spazio verticale da non essere una feritoia. */
.consenso a { padding-block: .35rem; }


/* ═══════════════════════════════════ 11. Calendario ed eventi ═══
   Il modulo `eventi`: elenco degli appuntamenti, scheda del singolo e
   modulo d'iscrizione. Le regole stanno qui e non nel tema perché la
   meccanica è la stessa per tutti; il colore lo mettono i token.

   La scheda di un evento è una RIGA, non un riquadro: un calendario si
   legge in verticale, e sedici riquadri affiancati costringono a
   cercare la data invece di scorrerla. Il quadratino con giorno e mese
   sta a sinistra e allinea tutto — è la colonna che l'occhio segue. */

.ev-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }

.ev__link {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1rem 1.2rem;
  background: var(--fondo-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: var(--transizione);
  min-height: 44px;
}
.ev__link:hover, .ev__link:focus-visible {
  border-color: var(--accento);
  box-shadow: var(--ombra-1);
  transform: translateY(-1px);
}

.ev__data {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 3.6rem; padding: .45rem .2rem;
  background: var(--marca); color: var(--su-marca);
  border-radius: var(--r-sm);
  line-height: 1;
}
.ev__giorno { font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-lg); }
.ev__mese {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; margin-top: .22em; opacity: .85;
}

.ev__corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.ev__tipo {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--accento-testo);
}
.ev__titolo {
  font-family: var(--font-titoli); font-weight: var(--peso-titoli);
  font-size: var(--t-md); color: var(--testo-forte);
  overflow-wrap: anywhere;
}
.ev__meta { font-size: var(--t-sm); color: var(--testo-tenue); overflow-wrap: anywhere; }

.ev__coda { flex: none; display: flex; align-items: center; gap: .7rem; }
.ev__stato {
  font-size: var(--t-xs); font-weight: 700;
  padding: .28rem .6rem; border-radius: var(--r-pill);
  background: var(--fondo-2); color: var(--testo-tenue);
  white-space: nowrap;
}
.ev__stato--aperto { background: var(--verde-ok); color: #fff; }
.ev__freccia { color: var(--testo-tenue); display: flex; }
.ev__link:hover .ev__freccia { color: var(--accento); }

.ev--passato .ev__data { background: var(--fondo-2); color: var(--testo-tenue); }
.ev--passato .ev__titolo { color: var(--testo-tenue); }

.ev-vuoto {
  margin: 0; padding: 1.6rem 1.4rem;
  background: var(--fondo-scheda); border: 1px dashed var(--bordo-forte);
  border-radius: var(--r-md); color: var(--testo-tenue);
}

/* Sotto i 600px la riga diventa due: il quadratino della data resta in
   alto a sinistra e lo stato scende sotto il titolo. Tenerli in fila su
   un telefono schiaccia il titolo in una colonna di due parole. */
@media (max-width: 600px) {
  .ev__link { flex-wrap: wrap; gap: .8rem 1rem; padding: .9rem 1rem; }
  .ev__corpo { flex-basis: calc(100% - 4.6rem); }
  .ev__coda { flex-basis: 100%; justify-content: space-between; }
}

/* ── Scheda del singolo evento ─────────────────────────────────── */

.sez--hero-evento {
  padding-block: var(--sp-6) var(--sp-5);
  background: var(--fondo-2);
  border-bottom: 1px solid var(--bordo);
}
.ev-scheda__titolo { font-size: var(--t-3xl); margin-bottom: .5em; }

.ev-scheda__fatti {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-size: var(--t-sm);
}
.ev-scheda__fatti li { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ev-scheda__fatti .icona { color: var(--accento); flex: none; }

.ev-scheda__ritrovo { margin: 0 0 1.2rem; font-size: var(--t-sm); }

.ev-scheda__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin: 0; }
.ev-scheda__termine { font-size: var(--t-sm); color: var(--testo-tenue); }

.ev-scheda__chiuso {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0;
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  background: var(--avviso-fondo, var(--fondo-scheda));
  border: 1px solid var(--avviso-bordo, var(--bordo));
  font-size: var(--t-sm);
}
.ev-scheda__chiuso .icona { flex: none; margin-top: .15em; }

/* ── Modulo d'iscrizione ───────────────────────────────────────── */

.modulo__gruppo { border: 0; padding: 0; margin: 0 0 1.8rem; min-width: 0; }
.modulo__gruppo legend {
  padding: 0; margin-bottom: .7rem;
  font-family: var(--font-titoli); font-weight: var(--peso-titoli);
  font-size: var(--t-md); color: var(--testo-forte);
}
.modulo__aiuto { font-size: var(--t-sm); color: var(--testo-tenue); margin: 0 0 .8rem; }
.modulo__unico {
  margin: 0; padding: .9rem 1.1rem;
  background: var(--fondo-scheda); border: 1px solid var(--bordo);
  border-radius: var(--r-md); font-size: var(--t-sm);
}
.campo__aiuto { font-size: var(--t-xs); color: var(--testo-tenue); margin: 0; }

/* Le caselle degli eventi: bersagli grandi, perché si spuntano col
   pollice su un telefono mentre si tiene in mano qualcos'altro. */
.scelte { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.scelta { display: flex; align-items: flex-start; gap: .8rem;
  padding: .8rem 1rem; background: var(--fondo-scheda);
  border: 1px solid var(--bordo); border-radius: var(--r-md);
  transition: var(--transizione); min-width: 0;
}
.scelta:hover { border-color: var(--bordo-forte); }
.scelta:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); }
.scelta:has(input:focus-visible) { outline: 3px solid var(--accento); outline-offset: 2px; }
.scelta input { width: 24px; height: 24px; flex: none; margin-top: .12em; accent-color: var(--accento); }
.scelta label { display: flex; flex-direction: column; gap: .12rem; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.scelta__titolo { font-weight: 600; overflow-wrap: anywhere; }
.scelta__meta { font-size: var(--t-sm); color: var(--testo-tenue); font-weight: 400; overflow-wrap: anywhere; }

/* Marchio con stemma + nome accanto (tema.logo_con_nome).
   ⚠ Prima il sottotitolo andava a capo sotto TUTTO il blocco, con
   `flex-basis: 100%`: la testata diventava alta due righe e il menu si
   ritrovava schiacciato in alto. Adesso stemma e testo sono due colonne
   affiancate, e il sottotitolo sta sotto al solo nome — dove ha senso e
   dove non alza niente. */
.marchio:has(.marchio__img + .marchio__nome) {
  flex-direction: row; align-items: center; gap: .7rem;
  flex-wrap: nowrap; min-width: 0;
}
.marchio:has(.marchio__img + .marchio__nome) .marchio__img { flex: none; }
.marchio:has(.marchio__img + .marchio__nome) .marchio__nome,
.marchio:has(.marchio__img + .marchio__nome) .marchio__sotto { min-width: 0; }
/* Il testo del marchio si impila in una colonna sua, accanto allo stemma:
   è una griglia perché servono due righe dentro una sola cella del flex. */
.marchio:has(.marchio__img + .marchio__nome) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center; column-gap: .7rem; row-gap: 0;
}
.marchio:has(.marchio__img + .marchio__nome) .marchio__img { grid-row: 1 / 3; }
.marchio:has(.marchio__img + .marchio__nome) .marchio__nome { align-self: end; line-height: 1; }
.marchio:has(.marchio__img + .marchio__nome) .marchio__sotto { align-self: start; margin-top: .18rem; }
/* Senza sottotitolo lo stemma non deve occupare due righe fantasma. */
.marchio:has(.marchio__img + .marchio__nome):not(:has(.marchio__sotto)) {
  grid-template-rows: auto;
}
.marchio:has(.marchio__img + .marchio__nome):not(:has(.marchio__sotto)) .marchio__img { grid-row: 1; }
@media (max-width: 560px) {
  .marchio:has(.marchio__img + .marchio__nome) .marchio__sotto { display: none; }
  .marchio:has(.marchio__img + .marchio__nome) { grid-template-rows: auto; }
  .marchio:has(.marchio__img + .marchio__nome) .marchio__img { grid-row: 1; }
  .marchio:has(.marchio__img + .marchio__nome) .marchio__nome { align-self: center; }
}

/* ── Fila dei marchi (blocco `loghi`) ───────────────────────────
   Un logo non è una fotografia: va su bianco, dentro un riquadro che
   gli lascia aria e lo tiene in riga con gli altri anche quando uno è
   quadrato e il successivo è lungo il triplo. `object-fit: contain` con
   un'altezza fissa è quello che li rende confrontabili; senza, la
   pagina degli sponsor è una scala. */
.loghi {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  /* ⚠ Non `auto-fill`: su un contenitore largo metteva cinque marchi in
     fila e il sesto restava solo su una riga sua, che si legge come una
     dimenticanza. Con tre colonne sei marchi fanno due righe piene, e
     quattro ne fanno due da due. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .loghi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .loghi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.logo {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--r-md);
  min-height: 118px; display: flex; align-items: center; justify-content: center;
  padding: 1.1rem 1.3rem;
}
.logo__link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 44px;
  transition: var(--transizione);
}
.logo__link:hover { transform: scale(1.04); }
.logo__img { max-height: 74px; width: auto; max-width: 100%; object-fit: contain; background: transparent; }

/* Colonna «altre pagine» nel piede: le voci che non stanno nel menu. */
.pie__pagine { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pie__pagine a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-size: var(--t-sm);
}
.pie__pagine a:hover { text-decoration: underline; }


/* ═══════════════════════════ 12. Menu a tendina con le fotografie ═══
   Sopra le cinque voci una barra di navigazione smette di essere una
   mappa e diventa un elenco da leggere. Qui le voci si raggruppano, e
   il gruppo apre un pannello con una miniatura per pagina: chi arriva
   vede *che cosa* sta per aprire, non solo come si chiama.

   Il pannello è largo quanto la testata e non quanto la voce: le voci
   sono quattro o cinque, con una fotografia ciascuna, e in una colonna
   stretta diventerebbero illeggibili. */

.nav__voce { position: static; }

.nav__apri {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; padding: .75rem 0; min-height: 44px;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: inherit; cursor: pointer; position: relative;
  white-space: nowrap;
}
.nav__apri::after {
  content: ''; position: absolute; left: 0; right: 1.1rem; bottom: .5rem; height: 2px;
  background: var(--accento); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transizione);
}
.nav__apri:hover::after,
.nav__apri[aria-expanded="true"]::after,
.nav__apri[data-attivo]::after { transform: scaleX(1); }
.nav__apri[data-attivo] { color: var(--accento-testo); }
.nav__freccia { display: inline-flex; transition: transform var(--transizione); }
.nav__apri[aria-expanded="true"] .nav__freccia { transform: rotate(180deg); }

/* [hidden] perde contro un `display` esplicito: senza questa riga il
   pannello resterebbe visibile e sarebbe nascosto solo agli screen
   reader. */
.pannello[hidden] { display: none; }

@media (min-width: 1001px) {
  .pannello {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--fondo-scheda);
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra-2);
    z-index: 95;
  }
  .pannello__dentro {
    display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 1.6rem 2.6rem; padding-block: 1.5rem 1.7rem;
  }
  /* Senza testo introduttivo la colonna sinistra non serve, e le schede
     si prendono tutta la larghezza. */
  .pannello__dentro:not(:has(.pannello__testa)) { grid-template-columns: 1fr; }

  .pannello__testa { align-self: start; padding-right: 1.4rem; border-right: 1px solid var(--bordo); }
  .pannello__occhiello {
    font-family: var(--font-titoli); font-size: var(--t-lg); font-weight: var(--peso-titoli);
    color: var(--testo-forte); margin: 0 0 .4rem; line-height: 1.1;
  }
  .pannello__testo { font-size: var(--t-sm); color: var(--testo-tenue); margin: 0; }

  /* ⚠ DUE COLONNE, NON QUATTRO. Con `auto-fit` le quattro schede si
     mettevano in fila su 190 px l'una: la miniatura, il titolo e la
     riga di descrizione non ci stavano, e le descrizioni si stampavano
     una sull'altra. Una scheda con una fotografia dentro vuole 300 px
     buoni; a due colonne li ha, e due righe di schede si leggono meglio
     di una riga schiacciata. */
  .pannello__voci {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem .9rem;
  }

  /* L'apertura: il pannello scende e le schede lo seguono a scaglioni.
     Il ritardo è piccolo — 28 ms l'una — perché un menu si usa, non si
     guarda: sopra i 60 ms si sente l'attesa. */
  .anim .pannello.is-aperto { animation: pannello-giu 240ms cubic-bezier(.22,.61,.36,1) both; }
  .anim .pannello.is-aperto .pannello__voci > li {
    animation: scheda-su 300ms cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(60ms + var(--i, 0) * 28ms);
  }
  .anim .pannello.is-aperto .pannello__testa {
    animation: scheda-su 280ms cubic-bezier(.22,.61,.36,1) both;
  }
}

@keyframes pannello-giu {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes scheda-su {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* La scheda di una pagina dentro il pannello. */
.scheda-menu {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem; border-radius: var(--r-md);
  text-decoration: none; min-height: 44px;
  transition: background var(--transizione), transform var(--transizione);
}
.scheda-menu:hover, .scheda-menu:focus-visible { background: var(--fondo-2); }
.scheda-menu.is-corrente { background: var(--accento-tenue); }

.scheda-menu__foto {
  flex: none; width: 76px; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--r-sm); background: var(--fondo-2);
}
.scheda-menu__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.scheda-menu:hover .scheda-menu__foto img { transform: scale(1.07); }

/* ⚠ `white-space: nowrap` arriva per eredità da `.nav__lista a`, che ce
   l'ha per non far spezzare le voci del menu principale. Dentro la
   scheda però la descrizione è una frase: senza questa riga restava su
   una riga sola, la scheda si allargava oltre lo schermo e il testo
   spariva sotto il bordo del cassetto. */
.scheda-menu, .scheda-menu__corpo, .scheda-menu__titolo, .scheda-menu__desc {
  white-space: normal;
}
.scheda-menu__corpo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.scheda-menu__titolo {
  display: flex; align-items: center; gap: .3rem;
  font-weight: 600; font-size: var(--t-sm); color: var(--testo-forte);
  overflow-wrap: anywhere;
}
.scheda-menu__titolo .icona {
  flex: none; opacity: 0; transform: translateX(-4px); color: var(--accento);
  transition: opacity var(--transizione), transform var(--transizione);
}
.scheda-menu:hover .scheda-menu__titolo .icona,
.scheda-menu:focus-visible .scheda-menu__titolo .icona { opacity: 1; transform: none; }
.scheda-menu__desc {
  font-size: var(--t-xs); color: var(--testo-tenue); line-height: 1.42;
  overflow-wrap: anywhere;
}

/* ── Il pannello sul telefono: una fisarmonica dentro il cassetto ── */
@media (max-width: 1000px) {
  .nav__apri {
    width: 100%; justify-content: space-between;
    padding: .95rem .2rem; font-size: var(--t-md);
  }
  .nav__apri::after { display: none; }
  .pannello { padding-bottom: .6rem; }
  .pannello__testa { display: none; }
  /* ⚠ `.nav__lista a { display: block }` è la regola del cassetto, e
     vince sulla scheda del pannello perché è più specifica: la scheda
     perdeva il flex, le due parti si impilavano e la miniatura si
     prendeva tutta la larghezza dello schermo. Una fotografia da 76 px
     diventava alta trecento. */
  .nav__lista .scheda-menu,
  .testata--stretta .nav__lista .scheda-menu { display: flex; padding: .5rem .2rem; }
  .pannello__voci { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
  .pannello__dentro { width: auto; padding: 0; }
  .scheda-menu__foto { width: 64px; }
  .scheda-menu__titolo { font-size: var(--t-base); }
  .nav__lista li + li { border-top: 1px solid var(--bordo); }
  /* Le voci del cassetto entrano una dopo l'altra: sono poche, e il
     movimento dice da dove viene il pannello. */
  .anim .nav.is-aperto .nav__lista > li {
    animation: voce-dentro 280ms cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
}
@keyframes voce-dentro {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════ 13. Movimento ═══
   Regole d'uso, e non sono opinioni:
   · si muove quello che ENTRA, non quello che c'è già;
   · una cosa sola per volta e in una direzione sola;
   · 400–600 ms, mai di più: sopra si aspetta;
   · niente movimento su quello che serve subito (avvisi, errori, moduli);
   · e sotto `prefers-reduced-motion` sparisce tutto — la regola sta in
     testa a questo file e vale anche qui. */

/* Lo stato di partenza vale SOLO con il JavaScript acceso (`.js`): senza,
   la sezione resterebbe invisibile per sempre. */
.anim.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.anim.js [data-reveal].is-visto { opacity: 1; transform: none; will-change: auto; }

/* I figli di una sezione entrano a scaglioni dietro alla sezione. */
.anim.js [data-reveal] [data-scala] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 560ms cubic-bezier(.22,.61,.36,1) var(--ritardo, 0ms),
              transform 560ms cubic-bezier(.22,.61,.36,1) var(--ritardo, 0ms);
}
.anim.js [data-reveal].is-visto [data-scala] { opacity: 1; transform: none; }

/* L'eroe non aspetta di essere visto: è già davanti. Entra al carico. */
.anim .hero__occhiello,
.anim .hero__titolo,
.anim .hero__testo,
.anim .hero__azioni,
.anim .hero__fatti { animation: hero-su 760ms cubic-bezier(.22,.61,.36,1) both; }
.anim .hero__titolo { animation-delay: 70ms; }
.anim .hero__testo  { animation-delay: 150ms; }
.anim .hero__azioni { animation-delay: 220ms; }
.anim .hero__fatti  { animation-delay: 300ms; }
@keyframes hero-su {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* La fotografia dell'eroe si allarga pianissimo: venti secondi per il 6%.
   Serve a togliere l'impressione di cartolina, non a farsi notare. */
.anim .hero--foto .hero__sfondo img {
  animation: respiro 26s ease-out both;
}
@keyframes respiro {
  from { transform: scale(1.005); }
  to   { transform: scale(1.065); }
}

/* Un tratto che si scrive sotto i titoli di sezione quando arrivano. */
.anim.js [data-reveal] .sez__titolo::after { transform: scaleX(0); transform-origin: left;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1) 180ms; }
.anim.js [data-reveal].is-visto .sez__titolo::after { transform: scaleX(1); }

/* I numeri grandi si contano da soli: lo fa il JavaScript, qui c'è solo
   la larghezza fissa che impedisce alla riga di ballare mentre sale. */
.numeri__n, .numero__n { font-variant-numeric: tabular-nums; }


/* ═══════════════════════ 14. Rifiniture di superficie ═══
   Le cose che si notano solo quando mancano. */

/* Il piede non deve staccarsi dal contenuto con una fascia di pagina
   vuota: su una pagina che finisce con una sezione scura quello stacco
   si legge come un blocco bianco piantato in mezzo. Lo stacco diventa
   un token, così un tema può azzerarlo. */
.pie { margin-top: var(--pie-stacco, var(--sp-7)); }

/* ⚠ TUTTO QUESTO BLOCCO STA SOTTO `.anim`, e non è pignoleria: sono
   ottantanove siti già consegnati e collaudati. Una rifinitura che
   migliora questo sito non deve cambiare da sola l'aspetto degli altri
   il giorno in cui qualcuno ripropaga il motore. Chi la vuole accende
   `tema.animazioni` in config/sito.php. */

/* Bottoni: il rialzo era secco, ora ha un'ombra che lo accompagna, e
   una luce che passa una volta sola. */
.anim .btn { position: relative; overflow: hidden; isolation: isolate; }
.anim .btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 35%,
              rgb(255 255 255 / .22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 620ms cubic-bezier(.22,.61,.36,1);
}
.anim .btn:hover::before { transform: translateX(120%); }
.anim .btn--primario:hover { box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accento) 65%, transparent); }
.anim .btn:hover { transform: translateY(-2px); }

/* Le schede si sollevano appena, e l'ombra cresce con loro. */
.anim .punto, .anim .voce, .anim .faq__voce {
  transition: transform var(--transizione), box-shadow var(--transizione),
              border-color var(--transizione);
}
.anim .punto:hover { transform: translateY(-3px); box-shadow: var(--ombra-1); }

/* La galleria: la foto si allarga dentro la cella, la cella sta ferma. */
.anim .galleria__cella { overflow: hidden; }
.anim .galleria__cella img { transition: transform 620ms cubic-bezier(.22,.61,.36,1); }
.anim .galleria__cella:hover img { transform: scale(1.06); }

/* La testata si posa sul contenuto quando si comincia a scorrere. */
.anim .testata { transition: box-shadow var(--transizione), background var(--transizione); }
.anim .testata.is-scesa { box-shadow: 0 2px 20px -8px rgb(0 0 0 / .28); }

/* Il pulsante che riporta in cima. Compare solo dopo due schermate, ed
   è l'unica cosa che si aggiunge alla pagina scorrendo. Anche questo
   sotto `.anim`: sugli altri siti il JavaScript non lo crea nemmeno. */
.anim .su {
  position: fixed; right: 1.1rem; bottom: calc(var(--h-barra) + 1.1rem); z-index: 80;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--bordo); border-radius: 50%;
  background: var(--fondo-scheda); color: var(--testo);
  box-shadow: var(--ombra-1); cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity var(--transizione), transform var(--transizione);
}
.anim .su.is-visibile { opacity: 1; transform: none; pointer-events: auto; }
.anim .su:hover { background: var(--accento); color: var(--su-accento); border-color: var(--accento); }
@media (min-width: 1001px) { .anim .su { bottom: 1.4rem; } }

/* La barra in basso: la seconda strada a sinistra, e l'entrata dal basso
   quando si è passato l'eroe. Senza JavaScript resta visibile da subito —
   è un pulsante, non un effetto. */
.barra-mobile__sec { display: inline-flex; align-items: center; gap: .4rem; color: var(--testo); }
.barra-mobile__sec .icona { color: var(--accento); flex: none; }
.anim.js .barra-mobile {
  transform: translateY(105%);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.anim.js .barra-mobile.is-dentro { transform: none; }

/* =====================================================================
   Sci Club Rorè — tema
   ---------------------------------------------------------------------
   Dopo averlo modificato:  ../_motore/aggiorna-css.sh 90-sciclubrore

   IL ROSSO DEL LOGO NON È IL ROSSO DEL SITO, ed è una scelta.
   #E3001B è il colore campionato dal loro logo storico: è saturo al
   massimo, e su una superficie grande — un pulsante, una fascia, un
   filetto ripetuto trenta volte in una pagina — affatica l'occhio in
   pochi secondi. Un marchio lo si guarda per un attimo; una pagina la si
   legge per minuti.
   Quindi il rosso pieno resta nel marchio, che è loro e non si tocca, e
   il sito usa una BRACE — #B8352E — che è lo stesso rosso portato giù di
   saturazione e di luce. Accanto non c'è più il grigio freddo: il fondo
   è una panna calda, e le sezioni alterne un ghiaccio appena azzurrato.
   Il risultato è che il rosso si vede DI PIÙ pur essendo meno acceso,
   perché non gareggia con il fondo.

   IDEA GRAFICA. Una guida di montagna stampata bene: fondo caldo, molta
   aria, titoli in Archivo largo e compatto, un solo tratto di colore per
   sezione. Angoli appena addolciti, perché è un club di ragazzi e non uno
   studio notarile, ma niente bolle: le forme restano dritte.
   ===================================================================== */

:root {

  /* ── Colori di marca ────────────────────────────────────────────── */
  /* La brace: il rosso del club, sceso di saturazione fino a stare su
     una superficie grande senza vibrare. */
  --brace:        #B8352E;
  --brace-scuro:  #942620;
  --brace-testo:  #8A231D;   /* 6.4:1 sulla panna: il testo vuole più buio */
  --brace-tenue:  #FAEDEA;
  /* Il notturno: un nero che tende al blu, non al grigio. Su una foto di
     neve un nero neutro sembra sporco. */
  --notte:        #131A21;
  --notte-2:      #1F2B36;
  --ardesia:      #4E5E6C;
  /* La carta: panna calda, non bianco freddo. */
  --panna:        #FAF7F3;
  --panna-2:      #F1ECE4;
  --ghiaccio:     #EAEFF3;
  --bianco:       #FFFFFF;
  /* Il verde delle iscrizioni aperte: bosco, non semaforo. */
  --pino:            #2A6B4C;
  --pino-chiaro:     #9AD9B8;
  --verde-ok:        var(--pino);
  --verde-ok-chiaro: var(--pino-chiaro);
  --errore:       #9E3A34;
  --errore-testo: #7A2620;
  --errore-tenue: #FBEDEB;

  /* ── Ruoli ──────────────────────────────────────────────────────── */
  --marca:         var(--notte);
  --su-marca:      #EDF1F4;
  --accento:       var(--brace);
  --accento-scuro: var(--brace-scuro);
  --accento-testo: var(--brace-testo);
  --accento-tenue: var(--brace-tenue);
  --su-accento:    #FFFFFF;

  --fondo:        var(--panna);
  --fondo-2:      var(--panna-2);
  --fondo-scheda: var(--bianco);
  --testo:        #23303B;
  --testo-forte:  #131C24;
  --testo-tenue:  var(--ardesia);
  --bordo:        #E0D9CF;
  --bordo-forte:  #BFB5A8;

  --hero-fondo:  var(--notte);
  --hero-testo:  #F3F6F8;
  /* La trama dell'hero è una pista battuta: righe verticali sottili,
     come i solchi che lascia il gatto delle nevi. Sotto la fotografia
     non si legge come decorazione, si legge come materia. */
  --hero-trama: repeating-linear-gradient(90deg,
                  rgb(255 255 255 / .5) 0 1px, transparent 1px 14px);
  --hero-trama-dim: 14px 100%;
  --hero-trama-op: .07;
  /* ⚠ `--hero-velo` è un'OPACITÀ, non una sfumatura: il motore la mette
     su uno strato pieno del colore `--hero-fondo`. Scritta come
     `linear-gradient(...)` diventa un valore non valido per `opacity`,
     che vale 1 — cioè uno strato coprente al 100%, con la fotografia
     dell'eroe sotto, invisibile. È successo qui il 19.08.2026, e non
     l'ha visto nessuno strumento: `contrasti.py` non riusciva a leggere
     il numero, ricadeva sul valore predefinito e dichiarava un
     contrasto che in pagina non c'era. Si è visto aprendo il browser. */
  --hero-velo: .64;

  --pie-fondo:  var(--notte);
  --pie-testo:  #C4CDD5;
  --pie-titolo: #FFFFFF;
  /* ⚠ Lo stacco fra contenuto e piede era 5,2 rem di fondo pagina. Su una
     pagina che finisce con una fascia scura si leggeva come un blocco
     bianco piantato lì in mezzo — ed era su TUTTE le pagine. Qui è zero:
     il piede comincia dove finisce il contenuto, e lo stacco lo fa il suo
     riempimento interno. */
  --pie-stacco: 0;

  --avviso-fondo: var(--brace-tenue);
  --avviso-bordo: var(--brace);

  /* La mappa nel grigio della roccia, con un velo del rosso di marca. */
  --mappa-filtro:   grayscale(.9) contrast(1.05) brightness(1.03);
  --mappa-tinta:    var(--notte);
  --mappa-tinta-op: .42;

  /* ── Tipografia ─────────────────────────────────────────────────── */
  --font-titoli: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-testo:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-btn:    var(--font-titoli);

  --peso-titoli:  700;
  --sp-titoli:    -.022em;
  /* Il marchio è scritto come sullo stemma: maiuscolo e distanziato. */
  --peso-marchio: 700;
  --sp-marchio:   .1em;
  --maiuscole-marchio: uppercase;

  --maiuscole-btn: uppercase;
  --sp-btn:        .06em;
  --bordo-btn:     1.5px;

  --t-xs:   clamp(.78rem, .76rem + .1vw,  .84rem);
  --t-sm:   clamp(.88rem, .86rem + .12vw, .95rem);
  --t-base: clamp(1rem,   .98rem + .16vw, 1.06rem);
  --t-md:   clamp(1.08rem, 1.02rem + .3vw, 1.22rem);
  --t-lg:   clamp(1.4rem, 1.22rem + .7vw,  1.85rem);
  --t-xl:   clamp(1.85rem, 1.5rem + 1.5vw, 2.7rem);
  --t-2xl:  clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
  --t-3xl:  clamp(2.7rem, 2rem + 3.6vw,   4.6rem);

  /* ── Spaziature e forme ─────────────────────────────────────────── */
  --sp-1: .35rem;  --sp-2: .7rem;   --sp-3: 1.1rem;  --sp-4: 1.6rem;
  --sp-5: 2.4rem;  --sp-6: 3.6rem;  --sp-7: 5.2rem;  --sp-8: 7rem;

  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-btn: 4px;
  --r-icona: 8px; --r-pill: 999px;

  /* Ombre più basse e più larghe: un'ombra corta e scura sembra un
     ritaglio incollato, una lunga e tenue sembra un foglio appoggiato. */
  --ombra-1: 0 1px 2px rgb(19 26 33 / .04), 0 8px 24px -8px rgb(19 26 33 / .10);
  --ombra-2: 0 10px 32px -12px rgb(19 26 33 / .18), 0 28px 60px -24px rgb(19 26 33 / .16);

  --wrap: 1180px;
  --wrap-stretto: 750px;
  --h-testata: 76px;
  --h-barra: 60px;

  /* Una curva sola per tutto il sito: parte svelta e si posa piano, che è
     il modo in cui si muovono le cose che hanno un peso. */
  --transizione: 240ms cubic-bezier(.22, .61, .36, 1);
}

/* ── Caratteri, ospitati qui ──────────────────────────────────────── */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/archivo.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}

/* ── Ritocchi propri di questo sito ───────────────────────────────── */

/* Il filetto sotto la testata: sottile, non una fascia. Tre pixel di
   rosso pieno su tutta la larghezza erano la cosa più rumorosa della
   pagina, e comparivano su ogni schermata. */
.testata { border-bottom: 1px solid var(--bordo); }
.testata::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--brace) 0%, var(--brace) 22%, transparent 60%);
  opacity: .9;
}
.testata { position: sticky; }

/* Lo stemma nella testata: quadrato, alto quanto due righe di testo. */
.marchio__img { height: 42px; width: auto; transition: transform var(--transizione); }
.marchio:hover .marchio__img { transform: rotate(-3deg) scale(1.04); }
.marchio__nome { color: var(--testo-forte); }
.marchio__sotto { color: var(--testo-tenue); letter-spacing: .14em; }

/* Occhielli: minuscoli, distanziati come le scritte sui cartelli di
   pista, e con un trattino davanti invece che in rosso pieno. */
.occhiello, .sez__testa .occhiello {
  color: var(--brace-testo);
  letter-spacing: .15em;
  font-weight: 700;
  display: flex; align-items: center; gap: .5rem;
}
.occhiello::before {
  content: ''; width: 18px; height: 2px; background: currentColor;
  flex: none; opacity: .75;
}
.hero .hero__occhiello { color: #F0A9A2; letter-spacing: .17em; }
.hero .hero__occhiello::before { background: currentColor; }

/* Il filetto sotto i titoli di sezione: un tratto solo, uguale ovunque. */
.sez__titolo::after {
  content: ''; display: block;
  width: 44px; height: 3px; margin-top: .6rem; border-radius: 2px;
  background: var(--brace);
}
.sez--cta .cta__titolo::after,
.hero .hero__titolo::after { content: none; }

/* I numeri grandi: è la cifra a fare il colore. */
.numeri__n, .numero__n { color: var(--brace-testo); }

/* I passi numerati. */
.passo__n { background: var(--brace); color: #fff; }

/* Le schede degli eventi. Il quadratino della data prende il notturno, e
   diventa brace quando le iscrizioni sono aperte: scorrendo il calendario
   si vede al volo dove si può ancora entrare, senza leggere una parola. */
.ev__link:hover { box-shadow: var(--ombra-1); }
.ev__data { transition: transform var(--transizione); }
.ev__link:hover .ev__data { transform: translateY(-2px) rotate(-2deg); }
.ev__link:hover .ev__freccia { transform: translateX(3px); }
.ev__freccia { transition: transform var(--transizione), color var(--transizione); }

/* La fila degli sponsor: riquadri quasi senza bordo, che si sollevano al
   passaggio. Sei cornici marcate sembrano sei pulsanti.
   ⚠ I marchi restano A COLORI. Il grigio-che-si-accende è un effetto che
   sta bene su una vetrina di clienti, ma questi sono gli sponsor di una
   società di volontari: mostrarli spenti finché non ci passi sopra è un
   modo di ringraziare a metà. */
.sez--loghi .logo { border-color: transparent; background: var(--bianco); box-shadow: var(--ombra-1); }
.sez--loghi .logo { transition: transform var(--transizione), box-shadow var(--transizione); }
.sez--loghi .logo:hover { box-shadow: var(--ombra-2); transform: translateY(-3px); }

/* La fascia di richiamo: non più un rettangolo scuro pieno, ma il
   notturno con una luce calda in un angolo — così non sembra un buco
   nella pagina. */
.sez--cta {
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--brace) 26%, transparent) 0%, transparent 55%),
    var(--notte);
  position: relative; overflow: hidden;
}
.sez--cta::after {
  content: ''; position: absolute; right: -6%; bottom: -60%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .06) 0%, transparent 70%);
  pointer-events: none;
}
.cta__titolo { max-width: 22ch; }

/* Il modulo: campi su carta bianca dentro una pagina panna, così si
   vede dove si scrive. */
.campo input, .campo select, .campo textarea { background: var(--bianco); }

/* ── I due campi che il browser disegna da sé ─────────────────────
   `select` e `input[type=date]` sono gli unici comandi che, lasciati
   stare, arrivano con l'aspetto del sistema operativo: una freccetta
   grigia di Windows in mezzo a campi disegnati, e su Mac addirittura un
   rilievo azzurro. In un modulo curato si notano subito, perché sono gli
   unici pezzi che non appartengono al sito. */

/* La tendina. `appearance: none` spegne il disegno di sistema, e la
   punta la rimettiamo noi: è LO STESSO tracciato dell'icona «giu» del
   menu (`m6 9.5 6 6 6-6`, tratto 1.7), non un triangolino qualunque —
   è quello che rende la tendina del modulo parente della tendina della
   navigazione invece che una cosa capitata lì.
   ⚠ Dentro un `url(data:…)` il colore non può essere una variabile: il
   #6A7480 e il #B8352E qui sotto sono `--testo-tenue` e `--brace`
   scritti a mano, e vanno rifatti se cambia la tavolozza. */
.campo select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.8rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236A7480' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
}
.campo select:hover { border-color: var(--brace); }
.campo select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B8352E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
}
/* Finché non si è scelto niente il testo è un invito, non un valore:
   va grigio come i segnaposto degli altri campi. */
.campo select:has(option[value=""]:checked) { color: var(--testo-tenue); }
.campo select option { color: var(--testo); }

/* La data. Il calendarietto che si apre appartiene al browser e non si
   può ridipingere — quello è cromo del sistema, in nessun sito al mondo
   è diverso. Quello che si può fare, e qui si fa, è il campo: glifo
   nostro, spaziatura nostra, e il bersaglio che apre il calendario
   allargato a tutta la parte destra invece di essere un'iconcina di
   dodici pixel.
   ⚠ Il colore del glifo è scritto a mano dentro l'SVG perché un
   `url(data:…)` non legge le variabili CSS: se un giorno cambia
   `--testo-tenue`, va cambiato anche il #6A7480 qui sotto. */
.campo input[type="date"] {
  position: relative;
  appearance: none; -webkit-appearance: none;
  padding-right: 2.9rem;
}
/* ⚠ IL GLIFO SOLO DOVE SI PUÒ SPEGNERE QUELLO DEL BROWSER.
   `::-webkit-calendar-picker-indicator` esiste su Chrome, Edge e Safari,
   e non su Firefox — che il suo calendarietto lo disegna comunque e non
   lo lascia toccare. Dipingendo il nostro senza chiedere permesso, su
   Firefox si sarebbero viste DUE icone, la nostra e la sua, una accanto
   all'altra. Con `@supports selector(...)` il blocco lo legge solo chi
   sa spegnere la propria: gli altri tengono la loro, che è comunque
   coerente perché è l'unica. */
@supports selector(::-webkit-calendar-picker-indicator) {
  .campo input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236A7480' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95rem center;
  }
  .campo input[type="date"]::-webkit-calendar-picker-indicator {
    /* Invisibile ma vivo: sta sopra al nostro glifo e si prende il clic,
       così apre il calendario del browser senza bisogno di JavaScript. */
    opacity: 0; cursor: pointer;
    position: absolute; right: 0; top: 0; width: 3.2rem; height: 100%;
    margin: 0; padding: 0;
  }
}
.campo input[type="date"]:hover { border-color: var(--brace); }
/* Safari incolonna i pezzi della data con un font suo: questo li rimette
   in riga con il resto del modulo. */
.campo input[type="date"]::-webkit-datetime-edit { padding: 0; line-height: 1.2; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brace) 18%, transparent);
}

/* Il piede: la riga di colore torna qui, dove non disturba la lettura. */
.pie { border-top: 3px solid var(--brace); }

/* ── Rifiniture di secondo giro ───────────────────────────────────── */

/* L'eroe delle pagine interne è più basso di quello della home. In home
   la fotografia è il messaggio; su «Calendario» il messaggio sono le
   date, e settecento pixel di montagna prima di arrivarci sono un
   pedaggio. */
body:not(.p-home) .hero--foto .hero__dentro {
  min-height: 42svh;
  padding-block: var(--sp-7) var(--sp-6);
}
@media (max-width: 700px) {
  body:not(.p-home) .hero--foto .hero__dentro { min-height: 34svh; }
}

.hero--foto::after {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .10) 45%, rgb(0 0 0 / .42) 100%);
}
.hero--foto { position: relative; }
/* ⚠ QUI C'ERA UNA SFUMATURA CHIARA in fondo alla fotografia, alta
   quattordici pixel, che doveva ammorbidire il passaggio verso la
   sezione seguente. Faceva il contrario: sulla home sotto l'eroe c'è la
   fascia scura del prossimo appuntamento, e quella velatura bianca si
   vedeva come un alone sporco sopra la neve. La fotografia adesso
   finisce dove finisce — netta, che su un taglio orizzontale a tutta
   pagina è la cosa giusta. */

/* I fatti in fondo all'eroe: separati da un filetto, non appiccicati al
   testo. Sono un'altra cosa rispetto al paragrafo che li precede. */
.hero--foto .hero__fatti {
  margin-top: var(--sp-4); padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / .18);
}

/* La riga dei pulsanti dell'eroe: il primo pesa, il secondo accompagna. */
.hero--foto .btn--primario { box-shadow: 0 10px 30px -12px rgb(0 0 0 / .6); }

/* Le schede dei punti: la cornice si scalda al passaggio e l'icona si
   colora. Prima si muoveva solo la scheda, e l'icona restava spenta. */
.punto { border-radius: var(--r-lg); }
.punto__icona { transition: background var(--transizione), color var(--transizione), transform var(--transizione); }
.punto:hover { border-color: color-mix(in srgb, var(--brace) 30%, var(--bordo)); }
.punto:hover .punto__icona {
  background: var(--brace); color: #fff; transform: rotate(-4deg) scale(1.06);
}
.punto__link { transition: gap var(--transizione), color var(--transizione); display: inline-flex; gap: .35rem; }
.punto:hover .punto__link { gap: .6rem; }

/* I passi numerati: la pallina cresce quando la sezione entra. */
.passo__n { transition: transform var(--transizione), box-shadow var(--transizione); }
.passo:hover .passo__n { transform: scale(1.08); box-shadow: 0 6px 16px -6px var(--brace); }

/* Le domande frequenti: la freccia gira, e la voce aperta si scalda. */
.faq__voce[open] { border-color: color-mix(in srgb, var(--brace) 28%, var(--bordo)); }
.faq__voce summary { transition: color var(--transizione); }
.faq__voce summary:hover { color: var(--brace-testo); }

/* Le tabelle: righe alternate appena accennate, e l'intestazione nel
   notturno invece che nel rosso — sei tabelle con la testa rossa erano
   sei bandiere nella stessa pagina. */
.sez--tabella thead th { background: var(--notte); color: var(--su-marca); }
.sez--tabella tbody tr { transition: background var(--transizione); }
.sez--tabella tbody tr:hover { background: var(--brace-tenue); }

/* Il richiamo finale: i pulsanti chiari sul notturno, non il rosso su
   scuro che vibra. */
.sez--cta .btn--primario {
  --btn-fondo: var(--panna); --btn-testo: var(--notte); --btn-bordo: var(--panna);
}
.sez--cta .btn--primario:hover { --btn-fondo: #fff; --btn-bordo: #fff; }

/* ═══════════════════════ Terzo giro — 19 agosto 2026 ═══
   Solo per questo sito: la cartella è sua, e queste regole non devono
   arrivare a nessun altro. */

/* ── Lo stemma ────────────────────────────────────────────────────
   ⚠ Il riquadro grigio che si vedeva dietro non era del file: è la
   regola `img { background: var(--fondo-2) }` del motore, che serve a
   dare un colore alla casella mentre la fotografia carica. Su un marchio
   con lo sfondo trasparente diventa un rettangolo, e si nota. */
.marchio__img { background: transparent; height: 58px; }
.marchio { padding-block: .25rem; }

.pie__stemma { display: inline-block; }
.pie__stemma img { width: 64px; height: 64px; background: transparent; }
.pie__stemma { transition: transform var(--transizione); }
.pie__stemma:hover { transform: rotate(-3deg) scale(1.05); }

/* ── La fascia degli sponsor che scorre ───────────────────────────
   Sta sotto la testata e scorre via con la pagina: una striscia che si
   muove e resta sempre davanti agli occhi è una distrazione, non un
   ringraziamento. */
.fascia-sponsor {
  display: flex; align-items: center; gap: 1.4rem;
  background: var(--bianco);
  border-bottom: 1px solid var(--bordo);
  padding: .45rem clamp(.8rem, 3vw, 1.6rem);
  overflow: hidden;
}
.fascia-sponsor__et {
  flex: none; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--testo-tenue);
  padding-right: 1.2rem; border-right: 1px solid var(--bordo);
}
/* La pista è la finestra; dentro corrono due nastri identici. */
.fascia-sponsor__pista {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  display: flex; width: 100%;
  /* Le due estremità sfumano nel bianco: senza, i marchi appaiono e
     spariscono di netto contro il bordo e sembra un ritaglio. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
/* ⚠ `min-width: 100%` NON È DECORAZIONE: È QUELLO CHE CHIUDE L'ANELLO.
   Il nastro è stampato due volte e trasla di -100% della PROPRIA
   larghezza. Se una copia è più stretta della finestra — e con sei
   marchi su uno schermo largo lo era — le due copie insieme non
   arrivano a coprirla: a metà giro si apriva un buco bianco lungo
   mezzo schermo, e i marchi sparivano per qualche secondo. Obbligando
   ogni copia a essere larga almeno quanto la finestra, due copie fanno
   sempre il doppio della finestra e il buco non può esistere.
   `space-around` poi distribuisce lo spazio che avanza invece di
   lasciarlo tutto in coda, e va usato LUI e non `space-between`: lascia
   mezzo spazio anche alle due estremità, così dove una copia finisce e
   l'altra comincia mezzo più mezzo fa uno spazio intero, uguale a tutti
   gli altri. Con `space-between` i due marchi della giuntura si
   toccherebbero. `gap` resta la distanza MINIMA, per lo schermo stretto. */
.fascia-sponsor__nastro {
  display: flex; align-items: center; gap: clamp(1.6rem, 2.6vw, 2.6rem);
  justify-content: space-around;
  list-style: none; margin: 0; padding: 0;
  flex: none; min-width: 100%;
}
.fascia-sponsor__nastro > li { flex: none; }
.fascia-sponsor__nastro img {
  height: 30px; width: auto; max-width: 130px; object-fit: contain;
  background: transparent;
  filter: grayscale(1); opacity: .68;
  transition: filter var(--transizione), opacity var(--transizione);
}
/* ⚠ Qui il grigio ci sta, e sulla pagina «Sponsor» no: là il marchio è il
   contenuto, qui è una firma in coda a una riga. Al passaggio torna a
   colori, e la corsa si ferma. */
.fascia-sponsor a:hover img,
.fascia-sponsor a:focus-visible img { filter: none; opacity: 1; }
.fascia-sponsor a { display: inline-flex; align-items: center; min-height: 44px; }

/* ⚠ La durata segue la LUNGHEZZA del nastro. Il nastro adesso contiene
   tre passate invece di una: con i 46 s di prima avrebbe corso tre volte
   più veloce, e una fascia di marchi che sfreccia non si legge. */
.anim .fascia-sponsor__nastro { animation: nastro 110s linear infinite; }
.anim .fascia-sponsor:hover .fascia-sponsor__nastro,
.anim .fascia-sponsor:focus-within .fascia-sponsor__nastro { animation-play-state: paused; }
@keyframes nastro {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .anim .fascia-sponsor__nastro { animation: none; }
  /* Fermo, il secondo nastro sarebbe l'elenco stampato due volte. */
  .fascia-sponsor__nastro[aria-hidden="true"] { display: none; }
  .fascia-sponsor__pista { overflow-x: auto; }
}
@media (max-width: 560px) {
  .fascia-sponsor__et { display: none; }
  .fascia-sponsor__nastro img { height: 24px; max-width: 104px; }
}

/* ── L'eroe che cambia fotografia ─────────────────────────────────
   Le diapositive stanno una sopra l'altra e si scambiano con una
   dissolvenza lunga: il taglio secco su una fotografia a tutta pagina
   si legge come un errore di caricamento.
   ⚠ Si dissolve l'OPACITÀ e basta. La tentazione è far scorrere anche
   la foto di lato, ma su uno sfondo che sta dietro a un titolo il
   movimento orizzontale rende il testo illeggibile per un secondo. */
.hero__foto { position: absolute; inset: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero--giostra .hero__foto {
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(.4, 0, .2, 1);
}
.hero--giostra .hero__foto.is-attiva { opacity: 1; }
/* Senza JavaScript resta la prima, ferma: è quella con `is-attiva`
   stampata dal PHP. */

/* Il respiro tocca solo la diapositiva in vista, altrimenti tutte e
   cinque restano ingrandite e il primo fotogramma della successiva
   arriva già a fine corsa. */
.anim .hero--giostra .hero__sfondo img { animation: none; }
.anim .hero--giostra .hero__foto.is-attiva img { animation: respiro 26s ease-out both; }

/* I pallini in basso a destra: dicono quante sono e a che punto siamo,
   e si possono premere. Sono piccoli di proposito — è uno sfondo, non
   una galleria. */
.hero__pallini {
  position: absolute; right: clamp(1rem, 4vw, 2.4rem); bottom: 1.2rem; z-index: 3;
  display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none;
}
.hero__pallino {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.hero__pallino::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(255 255 255 / .45);
  outline: 1px solid rgb(255 255 255 / .35); outline-offset: 1px;
  transition: background var(--transizione), transform var(--transizione);
}
.hero__pallino:hover::before { background: rgb(255 255 255 / .8); }
.hero__pallino[aria-current="true"]::before {
  background: #fff; transform: scale(1.35);
}
@media (max-width: 560px) { .hero__pallini { bottom: .9rem; } }

/* ── Rifiniture del telefono ──────────────────────────────────────
   Il titolo dell'eroe porta un `<br>` scritto a mano, che su schermo
   largo spezza le due righe nel punto giusto. Sotto i 620 px quel taglio
   diventa un guaio: la riga corta e poi una parola sola in fondo. Lì
   comanda il testo, non il segno. */
@media (max-width: 620px) {
  .hero__titolo br { display: none; }
  /* La sfumatura ai lati della fascia era tarata su uno schermo largo:
     su 375 px si mangiava mezzo marchio. */
  .fascia-sponsor__pista {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
  }
}

/* ═════════════════════════ Le finestre (dialog) ═══
   Sul telefono la finestra è un foglio che sale dal basso e occupa quasi
   tutto: su 375 px una scheda centrata con i margini lascia una colonna
   di testo da trecento pixel, e un modulo con dieci campi lì dentro è
   peggio della pagina intera. Da 700 px in su diventa una scheda al
   centro, perché lì lo spazio c'è. */

.finestra {
  border: 0; padding: 0; background: transparent;
  max-width: none; max-height: none; width: 100%; height: 100%;
  margin: 0; inset: 0;
  overscroll-behavior: contain;
}
.finestra::backdrop { background: rgb(12 17 22 / .62); }
.anim .finestra::backdrop { animation: velo-entra 260ms ease-out both; }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }

.finestra__scheda {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column;
  max-height: 92svh;
  background: var(--fondo);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--ombra-2);
  overflow: hidden;
}
.anim .finestra[open] .finestra__scheda {
  animation: foglio-su 320ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes foglio-su {
  from { transform: translateY(28px); opacity: .6; }
  to   { transform: none; opacity: 1; }
}

.finestra__testa {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 1.6rem);
  border-bottom: 1px solid var(--bordo);
  background: var(--fondo-scheda);
  flex: none;
}
/* Sul telefono la maniglia dice che il foglio si può trascinare via —
   e infatti si può, con lo sfioramento verso il basso. */
.finestra__testa::before {
  content: ''; position: absolute; top: .4rem; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 2px; background: var(--bordo-forte);
}
.finestra__titolo { font-size: var(--t-lg); margin: 0; flex: 1 1 auto; }
.finestra__titolo::after { content: none; }
.finestra__chiudi {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--bordo); border-radius: 50%;
  background: var(--fondo); color: var(--testo); cursor: pointer;
  transition: var(--transizione);
}
.finestra__chiudi:hover { background: var(--brace); color: #fff; border-color: var(--brace); }

.finestra__corpo {
  padding: 1.2rem clamp(1rem, 4vw, 1.6rem) 1.4rem;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.finestra__intro { margin: 0 0 1.2rem; color: var(--testo-tenue); font-size: var(--t-sm); }
.finestra__piede {
  flex: none; padding: .7rem clamp(1rem, 4vw, 1.6rem);
  border-top: 1px solid var(--bordo); background: var(--fondo-scheda);
  font-size: var(--t-sm); text-align: center;
}
.finestra__piede a {
  color: var(--testo-tenue);
  /* 44 px di area anche qui: era alto diciassette, cioè una feritoia. */
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .6rem;
}

/* Dentro la finestra il modulo non ha bisogno del titolo grande né del
   pulsante gigante: il titolo ce l'ha la finestra. */
.finestra .modulo__gruppo:first-of-type { margin-top: 0; }
.finestra .modulo .btn--grande { width: 100%; justify-content: center; }

@media (min-width: 700px) {
  .finestra__scheda {
    inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: min(100% - 3rem, 46rem);
    max-height: 88svh;
    border-radius: var(--r-lg);
  }
  .finestra__testa::before { display: none; }
  .anim .finestra[open] .finestra__scheda {
    animation: scheda-entra 300ms cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes scheda-entra {
    from { transform: translate(-50%, -46%) scale(.97); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  }
  .finestra .modulo .btn--grande { width: auto; }
}

/* Quando la finestra è aperta la pagina dietro non deve scorrere. */
body.finestra-aperta { overflow: hidden; }

/* Le tessere come schede da premere: sono tre e hanno un prezzo, e il
   prezzo è la cosa che si sta scegliendo. Una tendina lo nasconde. */
.scelte--tessere { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.scelta--tessera { align-items: flex-start; }
.scelta--tessera label { gap: .15rem; }
.scelta__prezzo {
  font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-md);
  color: var(--brace-testo); line-height: 1.1;
}
.scelta--tessera input { margin-top: .2em; }

/* La data di nascita serve solo per la tessera di un ragazzo: il campo
   compare quando serve. Senza JavaScript resta visibile — un campo in
   più non ha mai fatto male a nessuno. */
.js [data-solo-ragazzo] { display: none; }
.js .modulo--socio:has(#s-t-ragazzo:checked) [data-solo-ragazzo] { display: flex; }

/* L'esito dell'invio dentro la finestra. */
.finestra__esito { text-align: center; padding: 1.4rem .5rem 1rem; }
.finestra__esito .icona { color: var(--pino); margin: 0 auto .8rem; display: block; }
.finestra__esito h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.finestra__esito p { color: var(--testo-tenue); margin-bottom: 1.2rem; }

/* ── Il pulsante «iscriviti» DENTRO la riga dell'evento ───────────
   Prima stava fuori dal riquadro, appoggiato a destra: due rettangoli
   con due bordi per una cosa sola, e in mezzo un vuoto che non era né
   dell'uno né dell'altro. Adesso il riquadro è la voce `.ev` e dentro
   ci stanno tutti e due — il link a sinistra, il pulsante a destra,
   divisi da un filetto. Un bordo solo, e la riga si prende la larghezza
   che prima buttava via.

   ⚠ Il pulsante resta comunque FUORI dal <a>: un link dentro un link
   non è HTML valido e i browser lo smontano come vogliono. Sono due
   elementi affiancati che sembrano una cosa sola, non una annidata
   nell'altra. */
.ev { position: relative; display: flex; flex-direction: column; }

.ev:has(.ev__iscriviti) {
  background: var(--fondo-scheda);
  border: 1px solid color-mix(in srgb, var(--brace) 34%, var(--bordo));
  border-radius: var(--r-md);
  transition: border-color var(--transizione), box-shadow var(--transizione),
              transform var(--transizione);
}
/* Dentro la scheda il link non è più una scheda: niente bordo, niente
   fondo, niente ombra — se no sono due riquadri uno dentro l'altro. */
.ev:has(.ev__iscriviti) .ev__link,
.ev:has(.ev__iscriviti) .ev__link:hover,
.ev:has(.ev__iscriviti) .ev__link:focus-visible {
  background: none; border-color: transparent; border-radius: 0;
  box-shadow: none; transform: none;
}
/* Il sollevamento passa alla scheda intera: si muove la riga, non un
   pezzo di riga. */
.ev:has(.ev__link:hover),
.ev:has(.ev__link:focus-visible) {
  border-color: var(--brace);
  box-shadow: var(--ombra-1);
  transform: translateY(-1px);
}
.ev__iscriviti { padding: .5rem 1.05rem; font-size: var(--t-xs); }

@media (min-width: 780px) {
  .ev:has(.ev__iscriviti) { flex-direction: row; align-items: stretch; gap: 0; }
  .ev:has(.ev__iscriviti) .ev__link {
    flex: 1 1 auto; min-width: 0;
    border-right: 1px solid var(--bordo);
  }
  .ev:has(.ev__iscriviti) .ev__iscriviti {
    flex: none; align-self: center; margin: 0 1.1rem;
  }
  /* Senza pulsante la riga resta com'era: il link È la scheda. */
  .ev:not(:has(.ev__iscriviti)) { flex-direction: row; align-items: center; }
  .ev:not(:has(.ev__iscriviti)) .ev__link { flex: 1 1 auto; min-width: 0; }
}
/* Sotto i 600 px la base manda `.ev__coda` a capo su una riga tutta
   sua, perché lì di solito c'è il bollino dei posti. Quando il bollino
   non c'è resta la sola freccina, che si prende una riga intera per
   dire una cosa che il pulsante rosso sotto dice meglio: sparisce. */
@media (max-width: 600px) {
  .ev:has(.ev__iscriviti) .ev__coda:not(:has(.ev__stato)) { display: none; }
}
/* Sul telefono il pulsante scende sotto, ma sempre DENTRO al bordo:
   largo quanto la scheda meno il suo respiro, non quanto lo schermo. */
@media (max-width: 779px) {
  .ev:has(.ev__iscriviti) .ev__link { padding-bottom: .35rem; }
  .ev:has(.ev__iscriviti) .ev__iscriviti {
    align-self: stretch; justify-content: center; text-align: center;
    margin: 0 1.1rem 1.05rem;
  }
}

/* Il ponte fra la voce di menu e il pannello. Fra il fondo del titolo e
   il bordo della testata c'è una striscia che non appartiene a nessuno
   dei due: attraversandola il puntatore usciva dal gruppo. Questo
   pseudo-elemento la copre, è invisibile e non prende clic. */
@media (min-width: 1001px) {
  /* ⚠ NIENTE `position: relative` QUI. Il pannello è dentro questa voce
     ed è `position: absolute` con `left: 0; right: 0`: il suo riferimento
     dev'essere la TESTATA, che è larga tutta la pagina. Rendendo
     posizionata anche la voce, il pannello si è ancorato a lei e si è
     ritrovato largo 72 px e alto mille — una colonna verticale invisibile
     invece di una tendina. Il ponte non ne ha bisogno: sta su
     `.nav__apri`, che è già posizionato dalla base. */
  .nav__voce--gruppo .nav__apri::before {
    content: ''; position: absolute; left: -.6rem; right: -.6rem; top: 100%;
    height: 1.6rem; pointer-events: auto;
  }
  /* Il ponte serve solo quando il pannello è aperto: sempre acceso
     coprirebbe la voce successiva e il menu diventerebbe scivoloso. */
  .nav__voce--gruppo .nav__apri[aria-expanded="false"]::before { display: none; }
}

/* ── I pulsanti in fondo alle sezioni ─────────────────────────────
   Erano allineati a sinistra sotto un blocco centrato: su schermo largo
   restavano appesi in un angolo. Il pulsante di chiusura di una sezione
   sta dove finisce lo sguardo, cioè al centro. */
.sez--loghi .sez__azioni,
.sez--eventi .sez__azioni,
.sez--numeri .sez__azioni,
.sez--punti .sez__azioni { justify-content: center; }

/* ── Il fantasma su fondo scuro ───────────────────────────────────
   ⚠ `btn--fantasma:hover` della base porta `--btn-fondo: var(--fondo-2)`,
   che è la panna: giusto su una pagina chiara, ma sulla fascia scura di
   richiamo il pulsante diventava un rettangolo bianco pieno. L'eroe
   aveva già la sua regola; alla fascia mancava. */
.sez--cta .btn--fantasma:hover,
.sez--cta .btn--fantasma:focus-visible {
  --btn-fondo: rgb(255 255 255 / .14);
  --btn-testo: #fff;
  --btn-bordo: rgb(255 255 255 / .65);
}

/* ── Il bollino dei posti che stanno finendo ──────────────────────
   Non è più «iscrizioni aperte» — quello lo dice il pulsante — ma
   «ancora 3 posti», che è un'informazione e va letta come un avviso. */
.ev__stato--pochi {
  background: var(--brace-tenue); color: var(--brace-testo);
  border: 1px solid color-mix(in srgb, var(--brace) 30%, transparent);
}
/* Il quadratino della data resta brace quando ci si può iscrivere: adesso
   il segnale è il pulsante, non più il bollino verde. */
.ev:has(.ev__iscriviti) .ev__data { background: var(--brace); color: #fff; }
/* Il bordo brace adesso è della SCHEDA, non del link che ci sta dentro:
   sta con le altre regole della riga, più sopra. Qui c'era la vecchia
   riga che lo dava al link, e — scritta dopo — rimetteva il bordo
   proprio dove era appena stato tolto. */

/* ═══════════════════════════ Il calendario del mese ═══
   Su schermo largo sta a fianco dell'elenco: due modi di guardare le
   stesse date, uno per chi chiede «che cosa c'è», l'altro per chi chiede
   «il 14 c'è qualcosa?». Sotto i 1000 px va sopra l'elenco, perché su un
   telefono la lista è quella che si legge davvero. */

.cal-duo { display: grid; gap: var(--sp-5); }
@media (min-width: 1000px) {
  .cal-duo {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: var(--sp-5) var(--sp-6);
    align-items: start;
  }
  /* Il calendario resta in vista mentre si scorre l'elenco: è una mappa,
     e una mappa che scappa via non serve a niente. */
  .cal { position: sticky; top: calc(var(--h-testata) + 1.2rem); }
}

.cal {
  background: var(--fondo-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--r-lg);
  padding: 1rem 1rem 1.1rem;
}

.cal__barra { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.cal__mese-corrente {
  flex: 1 1 auto; margin: 0; text-align: center;
  font-family: var(--font-titoli); font-weight: var(--peso-titoli);
  font-size: var(--t-md); color: var(--testo-forte);
  text-transform: capitalize;
}
.cal__passo {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--bordo); border-radius: 50%;
  background: var(--fondo); color: var(--testo); cursor: pointer;
  transition: var(--transizione);
}
.cal__passo:hover:not(:disabled) { background: var(--brace); color: #fff; border-color: var(--brace); }
.cal__passo:disabled { opacity: .35; cursor: default; }
.cal__passo[data-cal="prec"] .icona { transform: rotate(180deg); }
/* Senza JavaScript i mesi ci sono tutti e la barra non comanda niente:
   sparisce, e restano i titoli di ogni mese. */
.cal__barra { display: none; }
.js .cal__barra { display: flex; }

.cal__titolo {
  margin: 0 0 .5rem; text-align: center; text-transform: capitalize;
  font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: var(--t-md);
}
.js .cal__titolo { display: none; }          /* lo dice la barra */
.js .cal__mese:not(.is-attivo) { display: none; }
.cal__mese + .cal__mese { margin-top: 1.4rem; }

.cal__griglia {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.cal__intestazione {
  text-align: center; font-size: var(--t-xs); font-weight: 700;
  color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: .3rem;
}
.cal__vuota { aspect-ratio: 1; }
.cal__giorno {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--r-sm); font-size: var(--t-sm);
  color: var(--testo); text-decoration: none;
  min-height: 34px;
}
.cal__giorno.is-passato { color: color-mix(in srgb, var(--testo-tenue) 55%, transparent); }
.cal__giorno.is-oggi { outline: 2px solid var(--brace); outline-offset: -2px; font-weight: 700; }

.cal__giorno--pieno {
  background: var(--brace-tenue); color: var(--brace-testo); font-weight: 700;
  transition: var(--transizione);
}
.cal__giorno--pieno:hover, .cal__giorno--pieno:focus-visible {
  background: var(--brace); color: #fff; transform: translateY(-1px);
}
.cal__punti { display: flex; gap: 2px; }
.cal__punti i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; }


/* La riga dell'elenco a cui il calendario ha appena portato: si accende
   per un attimo, così si capisce dove si è arrivati. */
.ev.is-puntata .ev__link {
  border-color: var(--brace);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brace) 22%, transparent);
}
.anim .ev.is-puntata .ev__link { animation: puntata 1600ms ease-out both; }
@keyframes puntata {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brace) 45%, transparent); }
  30%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brace) 22%, transparent); }
  100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brace) 0%, transparent); }
}

@media (max-width: 999px) {
  .cal { padding: .9rem .8rem 1rem; }
  .cal__giorno { min-height: 40px; font-size: var(--t-base); }
}

/* Gli appuntamenti da mettere nel telefono, in fondo alla conferma. */
.finestra__esito-ics { display: grid; gap: .5rem; margin: 0 0 1.2rem; }
.finestra__esito-nota { margin: 0 0 .2rem !important; font-size: var(--t-sm); }
.finestra__esito-ics .btn { width: 100%; justify-content: center; }
.btn--piccolo { padding: .5rem 1rem; font-size: var(--t-xs); }


/* ═══════════════ Le date della finestra, tre per volta ═══
   ⚠ `.scelta` è `display: flex`: l'attributo `hidden` da solo NON la
     nasconde, perché un display esplicito nel foglio batte il valore
     che `hidden` porta con sé. Serve dirlo, e serve dirlo forte. */
.scelta[hidden] { display: none !important; }

.scelte-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-top: .7rem;
}
.scelte-nav[hidden] { display: none !important; }
.scelte-nav__passo {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .4rem .85rem;
  background: var(--bianco); color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transizione), color var(--transizione),
              background var(--transizione);
}
.scelte-nav__passo:hover:not(:disabled) { border-color: var(--brace); color: var(--brace); }
/* Spento e non sparito: un pulsante che si volatilizza all'ultima
   pagina fa saltare la barra e sposta l'altro sotto il dito. */
.scelte-nav__passo:disabled { opacity: .38; cursor: default; }
.scelte-nav__passo:first-child .icona { transform: scaleX(-1); }
.scelte-nav__stato {
  margin: 0; font-size: var(--t-xs); color: var(--testo-tenue);
  text-align: center; font-variant-numeric: tabular-nums;
}

/* La dissolvenza fra una terna e l'altra: breve, e solo sulla lista —
   la barra sotto deve restare ferma, se no si muove tutta la finestra. */
.anim .scelte.is-sfogliata { animation: scelte-entra 240ms ease-out both; }
@keyframes scelte-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .anim .scelte.is-sfogliata { animation: none; }
}






/* ═══════════════════ La seggiovia sulla fascia scura ═══
   Tre seggiole appese a un cavo, che attraversano la fascia di
   richiamo in un minuto e mezzo. Bianche al 30%, senza clic: si
   notano la seconda volta che si guarda la pagina, non la prima —
   che è la misura giusta per una decorazione.
   Senza JavaScript (niente classe `anim`) non compare nulla. */
.cta__fune { display: none; }
.anim .cta__fune {
  display: block; position: absolute; left: 0; right: 0; top: 12px; height: 44px;
  pointer-events: none;
}
/* Il cavo: sfuma alle due estremità, come i marchi degli sponsor. */
.anim .cta__fune::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
              transparent, rgb(255 255 255 / .20) 8%,
              rgb(255 255 255 / .20) 92%, transparent);
}
.cta__seggiola {
  position: absolute; top: 0; left: -40px; width: 21px; height: 26px;
  color: rgb(255 255 255 / .32);
}
.cta__seggiola path {
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* ⚠ Durata e ritardi vanno insieme: 84 s di corsa e ritardi a un
   terzo l'uno dall'altro (−28 e −56) tengono le tre seggiole sempre
   equidistanti. I ritardi NEGATIVI fanno partire il giro a metà:
   all'apertura della pagina le seggiole sono già in linea, non in
   coda fuori dal bordo sinistro. */
.anim .cta__seggiola { animation: seggiovia 84s linear infinite; }
.anim .cta__seggiola:nth-child(2) { animation-delay: -28s; }
.anim .cta__seggiola:nth-child(3) { animation-delay: -56s; }
@keyframes seggiovia {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 80px)); }
}
@media (prefers-reduced-motion: reduce) {
  .anim .cta__fune { display: none; }
}

/* ═══════════════════ La traccia che si disegna ═══
   Il divisorio fra due sezioni dello stesso colore è già una traccia
   di sci (due solchi paralleli): adesso si disegna da sinistra a
   destra quando la sezione entra in pagina, come se qualcuno fosse
   appena passato. Prima del passaggio è ritagliata via con la
   `clip-path`; senza JavaScript la classe `is-visto` non arriva mai e
   la regola qui sotto nemmeno si applica — la traccia resta ferma e
   intera, com'era. */
.anim .sez[data-reveal]:not(.is-visto)::before {
  clip-path: inset(-2px 100% -2px -2px);
}
.anim .sez[data-reveal].is-visto::before {
  animation: scia-disegna 900ms cubic-bezier(.3, 0, .2, 1) 200ms both;
}
@keyframes scia-disegna {
  from { clip-path: inset(-2px 100% -2px -2px); }
  to   { clip-path: inset(-2px -2px -2px -2px); }
}
@media (prefers-reduced-motion: reduce) {
  .anim .sez[data-reveal]:not(.is-visto)::before { clip-path: none; }
  .anim .sez[data-reveal].is-visto::before { animation: none; }
}

/* ═══════════════════ Il parallasse dell'eroe ═══
   Scorrendo, la fotografia scende più piano della pagina: è la
   profondità di un fondale dietro un vetro. Tutto in CSS con la
   linea temporale dello scorrimento — niente JavaScript, niente
   ascoltatori di scroll: dove `animation-timeline` non è capita, la
   regola cade e non succede nulla.
   ⚠ Il fondale trasla al massimo del 14% dell'altezza dell'eroe,
     sempre MENO di quanto si è scorso: il bordo alto scoperto dalla
     traslazione resta sempre fuori dallo schermo, e non si vede mai
     il fondo scuro dietro. */
@supports (animation-timeline: scroll()) {
  /* ⚠ TUTTO PER ESTESO, niente scorciatoia `animation:`. Provato nel
     browser: con la scorciatoia la trasformazione non veniva applicata
     nemmeno a progresso pieno, con le proprietà singole sì. E lo zero
     del range VUOLE l'unità (`0px`): senza, la dichiarazione cade e il
     range torna «normal» — cioè tutta la pagina, cioè un parallasse
     che non si vede. */
  /* Traslando verso il basso, il fondale sporge di qualche decina di
     pixel SOTTO l'eroe: se la sezione dopo fosse trasparente, si
     vedrebbe la fotografia spuntare da sotto. `overflow: clip` la
     taglia al bordo — e a differenza di `hidden` non crea un
     contenitore di scorrimento. */
  .anim .hero--foto { overflow: clip; }
  .anim .hero--foto .hero__sfondo {
    animation-name: eroe-fondale;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: 0px 140vh;
  }
  @keyframes eroe-fondale {
    to { transform: translateY(14%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .anim .hero--foto .hero__sfondo { animation: none; }
  }
}


/* ═══════════════════ Le didascalie della galleria ═══
   Ce l'hanno solo le fotografie caricate dal pannello: le dodici di
   consegna restano riquadri puliti. La didascalia sta SOPRA
   l'immagine, in fondo, su una velatura scura che sale — così si legge
   su qualsiasi fotografia senza rubare spazio alla griglia. */
.galleria__cella { position: relative; }
.galleria__didascalia {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.6rem .8rem .6rem;
  font-size: var(--t-xs); line-height: 1.35; color: #fff; text-align: left;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .78));
  /* Due righe al massimo: una didascalia lunga non deve coprire mezza
     fotografia. Per intero si legge nell'ingranditore. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.visore__didascalia {
  margin: .6rem auto 0; max-width: 46rem; text-align: center;
  font-size: var(--t-sm); color: rgb(255 255 255 / .9);
}

/* ═══════════════════ La tessera nell'area soci ═══
   Ha la forma di una tessera vera — scura, con il marchio in alto e il
   bollo dello stato — perché è quello che uno si aspetta di trovare
   quando entra nella propria area a novembre: la risposta a «l'ho
   rinnovata?». */
.profilo__riga { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 860px) {
  .profilo__riga { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--sp-5); }
}

.tessera {
  background: var(--notte); color: var(--su-marca);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem 1.3rem;
  box-shadow: var(--ombra-2, 0 14px 40px -18px rgb(0 0 0 / .5));
  /* La trama obliqua è la stessa dell'eroe: due righe di neve battuta,
     appena visibili. Su un fondo scuro piatto la tessera sembrava un
     riquadro qualsiasi. */
  background-image: repeating-linear-gradient(
      115deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 9px);
}
.tessera--attesa  { background: var(--fondo-2); color: var(--testo); box-shadow: none;
                    border: 1px dashed var(--bordo-forte); background-image: none; }
.tessera--scaduta { background: var(--fondo-2); color: var(--testo); box-shadow: none;
                    border: 1px solid var(--bordo); background-image: none; }
.tessera--niente  { background: var(--fondo-scheda); color: var(--testo); box-shadow: none;
                    border: 1px solid var(--bordo); background-image: none; }

.tessera__testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: 1rem;
}
.tessera__marchio { display: flex; opacity: .8; }
.tessera__bollo {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  padding: .28rem .6rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .14);
}
.tessera--attiva .tessera__bollo { background: var(--verde-ok, #2A6B4C); color: #fff; }
.tessera--attesa .tessera__bollo,
.tessera--scaduta .tessera__bollo { background: var(--bordo); color: var(--testo); }

.tessera__chi {
  margin: 0; font-family: var(--font-titoli); font-weight: var(--peso-titoli);
  font-size: var(--t-lg); line-height: 1.15;
}
.tessera__tipo {
  margin: .15rem 0 0; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .09em; opacity: .72;
}

.tessera__giorni { margin: 1.1rem 0 .5rem; display: flex; align-items: baseline; gap: .45rem; }
.tessera__giorni strong {
  font-family: var(--font-titoli); font-size: var(--t-2xl); line-height: 1;
  /* nessuna animazione su questo: si anima la barra, non il numero */
  font-variant-numeric: tabular-nums;
  /* ⚠ `color: inherit` NON È RIDONDANTE. La base dà a ogni <strong> il
     colore del testo scuro; dentro una tessera scura il numero dei
     giorni — il pezzo più importante della carta — usciva nero su
     notte, cioè invisibile. Ci si accorge solo guardandola. */
  color: inherit;
}
.tessera strong { color: inherit; }
.tessera__giorni span { font-size: var(--t-xs); opacity: .75; }

.tessera__barra {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: rgb(255 255 255 / .16);
}
.tessera__barra span {
  display: block; height: 100%; border-radius: 3px;
  background: var(--verde-ok-chiaro, #8FD9AE);
  /* Si riempie da sola quando la tessera compare: è un numero che
     conta, e vederlo arrivare lo fa leggere. */
  transform-origin: left; 
}
.anim .sez--profilo.is-visto .tessera__barra span {
  animation: tessera-riempi 900ms cubic-bezier(.3, 0, .2, 1) 200ms both;
}
@keyframes tessera-riempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tessera__nota { margin: .7rem 0 0; font-size: var(--t-xs); opacity: .78; }
.tessera--niente .tessera__nota,
.tessera--attesa .tessera__nota,
.tessera--scaduta .tessera__nota { opacity: 1; color: var(--testo-tenue); }
.tessera__stato { margin: 0 0 .3rem; font-weight: 700; font-size: var(--t-md); }
.tessera__causale { margin: .5rem 0 0; font-size: var(--t-xs); color: var(--testo-tenue); }
.tessera .btn { margin-top: 1rem; width: 100%; justify-content: center; }
.tessera--attiva .btn { --btn-bordo: rgb(255 255 255 / .5); --btn-testo: #fff; }

@media (prefers-reduced-motion: reduce) {
  .anim .sez--profilo.is-visto .tessera__barra span { animation: none; }
}

/* ═══════════════════ La scheda di un evento ═══
   Due colonne: il racconto a sinistra, la scheda pratica a destra. La
   scheda è `sticky`, così scorrendo la descrizione il pulsante
   d'iscrizione resta a video invece di finire fuori schermo.

   ⚠ SUL TELEFONO L'ORDINE SI RIBALTA. Chi apre questa pagina da un
     messaggio nel gruppo dei genitori vuole sapere quando si parte e
     quanto costa: la scheda va prima, il racconto dopo. In HTML resta
     dopo — è l'ordine giusto per un lettore di schermo, che legge il
     titolo e poi il testo — e a spostarla è solo il CSS. */
.sez--evento-testa {
  padding-block: var(--sp-6) var(--sp-4);
  background: var(--fondo-2);
}
.sez--evento { padding-block: var(--sp-5) var(--sp-6); }

.evento { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
  .evento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21.5rem);
    gap: var(--sp-6);
    align-items: start;
  }
  /* 77 px è l'altezza vera della testata, che è `sticky`: sotto quel
     valore la scheda ci finirebbe dietro appena si scorre. La fascia
     degli sponsor non conta — quella scorre via con la pagina. */
  .evento__scheda { position: sticky; top: calc(77px + 1.2rem); }
  .evento--senza-testo { grid-template-columns: minmax(0, 34rem); justify-content: center; }
}
@media (max-width: 899px) {
  .evento__scheda { order: -1; }
}

.evento__corpo .testo-corpo { max-width: 40rem; }

.evento__scheda {
  background: var(--fondo-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  box-shadow: var(--ombra-1);
}

.evento__dati { margin: 0 0 1.2rem; display: grid; gap: .8rem; }
.evento__dati > div { display: grid; gap: .1rem; }
.evento__dati dt {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--testo-tenue);
}
.evento__dati dd { margin: 0; font-size: var(--t-sm); color: var(--testo-forte); }
.evento__pochi { color: var(--brace-testo); font-weight: 700; }

.evento__azioni { display: grid; gap: .5rem; }
.evento__azioni .btn { width: 100%; justify-content: center; }
.evento__termine {
  margin: .7rem 0 0; font-size: var(--t-xs); color: var(--testo-tenue);
  text-align: center;
}

/* Le due azioni piccole: sotto un filetto, in grigio, su una riga. Sono
   utili a chi le cerca e invisibili a chi no — che è quello che devono
   essere accanto a un pulsante d'iscrizione. */
.evento__minori {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--bordo);
}
.evento__minori a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-xs); font-weight: 700; color: var(--testo-tenue);
  text-decoration: none; min-height: 32px;
  transition: color var(--transizione);
}
.evento__minori a:hover { color: var(--brace); }
.evento__minori .icona { flex: none; }

.evento__scheda .ev-scheda__chiuso { margin-top: 1rem; }
.evento__scheda .ev-scheda__chiuso span { min-width: 0; }

/* ═══════════════════ La scala dei livelli ═══
   Un pendio che si inclina, quattro paletti sul tracciato e i colori
   delle piste. Sostituisce due tabelle da quattro righe: stessa
   informazione, metà dell'altezza, e l'ordine — che qui è il contenuto —
   si vede invece di doverlo dedurre dalle righe.

   ⚠ I QUATTRO COLORI SONO QUELLI DELLE PISTE, non della tavolozza del
     sito: bianco, blu, rosso, nero. Il rosso capita che sia lo stesso
     rosso di marca, ma è una coincidenza utile e non una scelta di
     tema — se un giorno il sito diventasse verde, questi quattro
     resterebbero dove sono, perché sono un codice che chi scia già
     conosce. */
.scala {
  --pista-1: var(--fondo-scheda);
  --pista-2: #2E6FB7;
  --pista-3: #B8352E;
  --pista-4: #1B222A;
  background: var(--fondo-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2.6vw, 1.9rem);
  overflow: hidden;
}

/* ── Il pendio ──────────────────────────────────────────────────── */
.scala__pendio { position: relative; margin: -.4rem -.4rem 1.4rem; }
.scala__pendio svg { display: block; width: 100%; height: clamp(96px, 15vw, 168px); }
.scala__paletti { position: absolute; inset: 0; pointer-events: none; }
.scala__neve  { fill: color-mix(in srgb, var(--brace) 5%, var(--fondo-2)); }
.scala__pista {
  fill: none; stroke: var(--notte); stroke-width: 3;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.scala__paletto {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  margin: -9px 0 0 -9px;                 /* il centro sul punto, non l'angolo */
  border: 2px solid var(--notte);
  background: var(--pista-1);
  box-shadow: 0 2px 6px rgb(0 0 0 / .18);
}
.scala__paletto--2 { background: var(--pista-2); border-color: var(--pista-2); }
.scala__paletto--3 { background: var(--pista-3); border-color: var(--pista-3); }
.scala__paletto--4 { background: var(--pista-4); border-color: var(--pista-4); }

/* Il disegno si fa da solo quando la sezione entra in pagina: la traccia
   avanza come uno che scende, e i paletti compaiono uno dopo l'altro man
   mano che li passa.
   `pathLength="1000"` nell'SVG normalizza la lunghezza del tracciato, e
   per questo qui si può scrivere 1000 invece di misurarla in JavaScript:
   cambiando la curva l'animazione continua a tornare da sola. */
.anim .sez--livelli.is-visto .scala__pista {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: pista-traccia 1500ms cubic-bezier(.4, 0, .2, 1) 120ms forwards;
}
.anim .sez--livelli.is-visto .scala__paletto {
  opacity: 0;
  animation: paletto-arriva 420ms cubic-bezier(.2, .9, .3, 1.4) var(--ritardo, 0ms) forwards;
}
.anim .sez--livelli.is-visto .scala__neve {
  opacity: 0; animation: sfuma-dentro-fermo 900ms ease-out 400ms forwards;
}
@keyframes pista-traccia   { to { stroke-dashoffset: 0; } }
@keyframes paletto-arriva  { from { opacity: 0; transform: translateY(-7px) scale(.4); }
                             to   { opacity: 1; transform: none; } }
@keyframes sfuma-dentro-fermo { to { opacity: 1; } }

/* ── Le due schede ──────────────────────────────────────────────── */
.scala__schede { display: flex; gap: .5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.scala__scheda {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1.05rem;
  background: var(--fondo-2); color: var(--testo);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 700; cursor: pointer;
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione);
}
.scala__scheda:hover { border-color: var(--brace); color: var(--brace); }
.scala__scheda.is-attiva {
  background: var(--notte); border-color: var(--notte); color: var(--su-marca);
}
.scala__scheda.is-attiva:hover { color: var(--su-marca); }
/* Con le schede accese il titolo del gruppo direbbe due volte la stessa
   parola. Senza JavaScript le schede non ci sono e il titolo serve. */
.scala__schede ~ .scala__gruppo .scala__gruppo-nome { display: none; }
.scala__gruppo-nome { font-size: var(--t-md); margin: 1.4rem 0 .8rem; }
.scala__gruppo[hidden] { display: none !important; }

/* ── I quattro gradi ────────────────────────────────────────────── */
.scala__voci {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem;
}
@media (min-width: 700px)  { .scala__voci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .scala__voci { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } }

.scala__voce {
  position: relative;
  padding: .95rem 1rem .95rem 1.15rem;
  background: var(--fondo-2);
  border-radius: var(--r-md);
  /* Il filetto di sinistra è il colore della pista: è la stessa
     informazione del paletto qui sopra, ripetuta dove si legge il
     testo — così il collegamento fra il disegno e le parole non ha
     bisogno di una legenda. */
  border-left: 4px solid var(--tinta, var(--bordo-forte));
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.scala__voce--1 { --tinta: var(--bordo-forte); }
.scala__voce--2 { --tinta: var(--pista-2); }
.scala__voce--3 { --tinta: var(--pista-3); }
.scala__voce--4 { --tinta: var(--pista-4); }
.scala__voce:hover { transform: translateY(-2px); box-shadow: var(--ombra-1); }

.scala__grado {
  margin: 0 0 .25rem;
  font-family: var(--font-titoli); font-weight: var(--peso-titoli);
  font-size: var(--t-md); color: var(--testo-forte);
}
/* Il numero del grado, piccolo e in coda al nome: dice «terzo di
   quattro» senza scriverlo. */
.scala__grado::after {
  content: counter(grado) '/4';
  margin-left: .5rem; font-family: var(--font-base); font-size: var(--t-xs);
  font-weight: 700; color: var(--testo-tenue); letter-spacing: .04em;
}
.scala__voci { counter-reset: grado; }
.scala__voce { counter-increment: grado; }
.scala__cosa { margin: 0; font-size: var(--t-sm); color: var(--testo-tenue); }

.scala__voce { opacity: 1; }
.anim .sez--livelli.is-visto .scala__voce {
  animation: grado-entra 420ms ease-out var(--ritardo, 0ms) both;
}
@keyframes grado-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.scala__nota {
  margin: 1.3rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--bordo);
  font-size: var(--t-sm); color: var(--testo-tenue);
}

@media (prefers-reduced-motion: reduce) {
  .anim .sez--livelli.is-visto .scala__pista,
  .anim .sez--livelli.is-visto .scala__paletto,
  .anim .sez--livelli.is-visto .scala__neve,
  .anim .sez--livelli.is-visto .scala__voce { animation: none; opacity: 1; }
  .anim .sez--livelli .scala__pista { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ═══════════════════ Il bonifico della tassa sociale ═══
   Due colonne: a sinistra quello che si copia, a destra quello che si
   inquadra. Sono i due modi di pagare — con le dita o con la fotocamera
   — e stanno accanto, non uno sotto l'altro, perché sono alternative e
   non passi. */
.bonifico {
  display: grid; gap: var(--sp-5);
  align-items: center;
  background: var(--fondo-scheda);
  border: 1px solid var(--bordo);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 3vw, 2.2rem);
}
@media (min-width: 760px) {
  .bonifico { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); }
}
.bonifico__voci { margin: 0 0 1.2rem; display: grid; gap: .9rem; }
.bonifico__voci dt {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--testo-tenue); margin-bottom: .15rem;
}
.bonifico__voci dd { margin: 0; font-size: var(--t-md); color: var(--testo-forte); }
/* L'IBAN si legge a gruppi di quattro e si copia con un dito: carattere
   a larghezza fissa, che è come lo stampano le banche, e niente a capo
   in mezzo a un gruppo di cifre. */
.bonifico__iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1rem, 2.4vw, 1.22rem); letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.bonifico__copia { align-self: start; }
.bonifico__nota { margin: 1.1rem 0 0; font-size: var(--t-sm); color: var(--testo-tenue); }

.bonifico__qr { margin: 0; text-align: center; }
.bonifico__qr img {
  width: clamp(150px, 40vw, 210px); height: auto;
  background: #fff;                     /* il QR vuole bianco sotto, sempre */
  border: 1px solid var(--bordo);
  border-radius: var(--r-md);
  padding: .55rem;
  /* ⚠ Un QR ridotto con l'interpolazione morbida diventa grigio ai bordi
     dei moduli e certi lettori lo rifiutano. `pixelated` tiene i
     quadratini quadrati. */
  image-rendering: pixelated;
}
.bonifico__qr figcaption {
  margin-top: .6rem; font-size: var(--t-xs); color: var(--testo-tenue);
  max-width: 15rem; margin-inline: auto;
}

/* ═══════════════════════ Il crinale sopra il piede ═══
   La stessa sagoma dello stemma — una catena di montagne — allargata a
   diventare la forma del sito. Due tracciati sfalsati danno la
   profondità: quello dietro più chiaro, quello davanti nel colore del
   piede, così il passaggio è graduale e non una linea. */
.crinale { line-height: 0; margin-bottom: -1px; }
/* ⚠ IL FONDO DEL CRINALE VA INTONATO CON LA SEZIONE CHE STA SOPRA.
   Il tracciato disegna solo le montagne: tutto il resto del riquadro è
   trasparente e lascia vedere il fondo pagina, che è la panna chiara.
   Se l'ultima sezione era panna scura, fra le due nasceva una fascia
   più chiara alta una sessantina di pixel — una riga netta, proprio
   nel punto in cui il disegno doveva far sparire il passaggio. Il
   colore quindi lo eredita da chi lo precede, e il crinale resta
   l'unica cosa che si vede.
   `~` e non `+` perché fra il <main> e il crinale può esserci la
   mappa, e con l'adiacente la regola smetterebbe di valere il giorno
   in cui qualcuno accende la mappa in fondo. */
.crinale { background: var(--fondo); }
main:has(> .sez:last-child.t-chiaro) ~ .crinale { background: var(--fondo-2); }
.mappa-pie ~ .crinale { background: var(--fondo); }
.crinale svg { display: block; width: 100%; height: clamp(46px, 6vw, 90px); }
.crinale__dietro { fill: color-mix(in srgb, var(--notte) 62%, var(--fondo)); }
.crinale__avanti { fill: var(--pie-fondo); }
/* ⚠ Il crinale è fratello del PIEDE, non della sezione: sta fuori dal
   <main>. Quindi `.sez--cta + .crinale` non poteva funzionare — la
   sezione che precede sta dentro un altro elemento, e infatti dopo la
   fascia scura restava una striscia di pagina chiara con le montagne
   sopra. Si guarda dentro il main con `:has`, sull'ultima sezione. */
main:has(> .sez:last-child.t-chiaro) + .crinale .crinale__dietro {
  fill: color-mix(in srgb, var(--notte) 62%, var(--fondo-2));
}
/* Dopo una fascia già scura il crinale non serve: sarebbe un dente in
   mezzo a due neri. */
main:has(> .sez--cta:last-child) + .crinale,
main:has(> .sez--contatore:last-child) + .crinale { display: none; }
.pie { border-top: 0; }
main:has(> .sez--cta:last-child) + .crinale + .pie,
main:has(> .sez--contatore:last-child) + .crinale + .pie { border-top: 3px solid var(--brace); }

/* ═══════════════════════ Il conto alla rovescia ═══ */
.sez--contatore { padding-block: var(--sp-5); background: var(--notte); color: var(--su-marca); }
.contatore {
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 2.4rem);
  flex-wrap: wrap;
}
.contatore__cifra {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 5.6rem; padding: .7rem 1rem;
  background: var(--brace); border-radius: var(--r-lg); line-height: 1;
}
.contatore__n {
  font-family: var(--font-titoli); font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
.contatore__et, .contatore__ora {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: #fff; margin-top: .2rem;
}
.contatore__ora { font-size: var(--t-md); letter-spacing: .04em; margin: 0; }
.contatore__corpo { flex: 1 1 16rem; min-width: 0; }
.contatore__occhiello {
  margin: 0 0 .15rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: #F0A9A2;
}
.contatore__titolo { margin: 0 0 .2rem; font-size: var(--t-lg); color: #fff; }
.contatore__titolo::after { content: none; }
.contatore__meta { margin: 0; font-size: var(--t-sm); color: color-mix(in srgb, var(--su-marca) 82%, transparent); }
.contatore__azioni { flex: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.sez--contatore .btn--fantasma { --btn-testo: var(--su-marca); --btn-bordo: rgb(255 255 255 / .4); }
.sez--contatore .btn--fantasma:hover {
  --btn-fondo: rgb(255 255 255 / .14); --btn-testo: #fff; --btn-bordo: rgb(255 255 255 / .65);
}
@media (max-width: 700px) {
  .contatore { gap: 1rem; }
  .contatore__azioni { flex-basis: 100%; }
  .contatore__azioni .btn { flex: 1 1 auto; justify-content: center; }
}

/* ═══════════════════════ Più persone nel modulo ═══ */
.modulo__legenda {
  font-family: var(--font-titoli); font-weight: var(--peso-titoli);
  font-size: var(--t-md); color: var(--testo-forte); margin: 0 0 .7rem;
}
.persone { display: grid; gap: .9rem; }
.persona {
  border: 1px solid var(--bordo); border-radius: var(--r-md);
  padding: .9rem 1rem 1rem; margin: 0; background: var(--fondo-scheda);
}
.persona__testa {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: 0; margin-bottom: .6rem; float: none;
}
.persona__n {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--brace); color: #fff; border-radius: 50%;
  font-size: var(--t-xs); font-weight: 700;
}
.persona__et {
  flex: 1 1 auto; font-size: var(--t-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--testo-tenue);
}
.persona__via {
  flex: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--t-xs); color: var(--testo-tenue);
  text-decoration: underline; min-height: 44px; padding-inline: .4rem;
}
.persona__via:hover { color: var(--errore-testo); }
.persona__via[hidden] { display: none; }
.persone__azioni { margin: .8rem 0 .3rem; }

/* L'avviso «ho ricompilato i tuoi dati». */
.modulo__ricordo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  margin: 0 0 .9rem; padding: .6rem .9rem;
  background: var(--accento-tenue); border-radius: var(--r-md);
  font-size: var(--t-sm); color: var(--brace-testo);
}
.modulo__scorda {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--t-sm); font-weight: 700; color: var(--brace-testo);
  text-decoration: underline; min-height: 44px; padding-inline: .3rem;
}

/* ═══════════════════════ L'area di chi si è iscritto ═══ */

/* L'icona in alto a destra. Su schermo largo è solo l'icona con l'aria
   attorno; nel cassetto del telefono diventa una voce scritta, perché
   lì un'icona sola in mezzo a delle parole non si trova. */
.nav__io {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--bordo); border-radius: 50%;
  color: var(--testo); text-decoration: none;
  transition: var(--transizione);
}
.nav__io:hover { border-color: var(--brace); color: var(--brace-testo); }
.nav__io.is-dentro { background: var(--brace); border-color: var(--brace); color: #fff; }
.nav__io-et { display: none; }
@media (max-width: 1000px) {
  .nav__io {
    width: auto; height: auto; border-radius: var(--r-btn);
    justify-content: flex-start; padding: .8rem 1rem; min-height: 44px;
    font-size: var(--t-md); font-weight: 600;
  }
  .nav__io-et { display: inline; }
}

/* Il campo del codice: cifre grandi e staccate, come su ogni altra
   schermata di codice che la gente ha già visto. */
.campo--codice {
  font-family: var(--font-titoli); font-size: var(--t-xl); font-weight: 700;
  letter-spacing: .35em; text-align: center;
}

/* ── Il profilo ─────────────────────────────────────────────────── */
.sez--profilo { padding-block: var(--sp-6) var(--sp-5); }
.profilo__testa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap;
}
.profilo__titolo { font-size: var(--t-xl); margin: 0 0 .2rem; overflow-wrap: anywhere; }
.profilo__titolo::after { content: none; }
.profilo__sotto { margin: 0; color: var(--testo-tenue); font-size: var(--t-sm); }

.profilo__numeri {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem;
  max-width: 34rem;
}
.profilo__numeri li {
  background: var(--fondo-scheda); border: 1px solid var(--bordo);
  border-radius: var(--r-md); padding: .8rem 1rem; text-align: center;
}
.profilo__numeri strong {
  display: block; font-family: var(--font-titoli); font-size: var(--t-xl);
  font-weight: 700; color: var(--brace-testo); line-height: 1.1;
}
.profilo__numeri span { font-size: var(--t-xs); color: var(--testo-tenue); }

.prof-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.prof-riga {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--fondo-scheda); border: 1px solid var(--bordo);
  border-radius: var(--r-md); padding: .9rem 1.1rem;
}
.prof-riga__corpo { flex: 1 1 14rem; min-width: 0; }
.prof-riga__chi { margin: 0; font-weight: 700; color: var(--testo-forte); }
.prof-riga__che { margin: .1rem 0 0; font-size: var(--t-sm); }
.prof-riga__quando { margin: .1rem 0 0; font-size: var(--t-sm); color: var(--testo-tenue); }
.prof-riga__coda { flex: none; display: flex; gap: .4rem; flex-wrap: wrap; }
.prof-riga--passata { background: transparent; border-style: dashed; }
.prof-riga--passata .prof-riga__chi { color: var(--testo-tenue); }
.prof-nota { margin: 1rem 0 0; font-size: var(--t-sm); color: var(--testo-tenue); }

.pstato-pub {
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
  padding: .25rem .6rem; border-radius: var(--r-pill);
  background: var(--fondo-2); color: var(--testo-tenue);
}
.pstato-pub--confermata { background: var(--pino); color: #fff; }
.pstato-pub--rifiutata { background: var(--errore-tenue); color: var(--errore-testo); }
.pstato-pub--pagato { background: var(--brace-tenue); color: var(--brace-testo); }

/* Il menu dei calendari: si apre sotto al pulsante. */
.prof-riga__cal { position: relative; flex: none; }
.cal-scelte {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20;
  min-width: 14rem; padding: .3rem;
  background: var(--fondo-scheda); border: 1px solid var(--bordo);
  border-radius: var(--r-md); box-shadow: var(--ombra-2);
  display: grid; gap: .1rem;
}
.cal-scelte[hidden] { display: none; }
.cal-scelte a {
  display: flex; align-items: center; min-height: 44px; padding: .4rem .7rem;
  border-radius: var(--r-sm); text-decoration: none; font-size: var(--t-sm);
}
.cal-scelte a:hover { background: var(--fondo-2); }
@media (max-width: 560px) {
  .prof-riga__cal { flex-basis: 100%; }
  .prof-riga__cal .btn { width: 100%; justify-content: center; }
  .cal-scelte { left: 0; right: 0; }
}

/* ═══════════════════════ I filtri del calendario ═══ */
.ev-filtri {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem;
}
.pchip-pub {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .35rem .9rem;
  border: 1px solid var(--bordo); border-radius: var(--r-pill);
  background: var(--fondo-scheda); color: var(--testo);
  font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: var(--transizione);
}
.pchip-pub span {
  font-size: var(--t-xs); color: var(--testo-tenue);
  background: var(--fondo-2); border-radius: var(--r-pill); padding: 0 .4rem;
}
.pchip-pub:hover { border-color: var(--bordo-forte); }
.pchip-pub.is-attivo { background: var(--notte); border-color: var(--notte); color: #fff; }
.pchip-pub.is-attivo span { background: rgb(255 255 255 / .18); color: #fff; }
.ev[hidden] { display: none; }
.cal__giorno--pieno.is-fuori-filtro { background: var(--fondo-2); color: var(--testo-tenue); }
.cal__giorno--pieno.is-fuori-filtro .cal__punti { opacity: .3; }

/* ═══════════ Il quadratino della data come uno skipass ═══
   Un dettaglio piccolo, e per questo si nota solo chi scia: il bordo
   tratteggiato in basso e il forellino della clip. */
.ev__data { position: relative; overflow: hidden; }
.ev__data::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 3px; width: 12px; height: 3px; border-radius: 2px;
  background: currentColor; opacity: .35;
}
.ev__giorno { margin-top: -2px; }

/* ═══════════ I livelli con i colori delle piste ═══
   Blu, rosso, nero: chi scia li legge senza leggere. La pallina sta
   nella prima colonna delle due tabelle dei livelli. */
.p-livelli .sez--tabella tbody td:first-child { position: relative; padding-left: 2.1rem; }
.p-livelli .sez--tabella tbody td:first-child::before {
  content: ''; position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--bordo-forte); background: var(--fondo-scheda);
}
.p-livelli .sez--tabella tbody tr:nth-child(2) td:first-child::before { background: #2E6FB7; border-color: #2E6FB7; }
.p-livelli .sez--tabella tbody tr:nth-child(3) td:first-child::before { background: #B8352E; border-color: #B8352E; }
.p-livelli .sez--tabella tbody tr:nth-child(4) td:first-child::before { background: #1B222A; border-color: #1B222A; }

/* ═══════════ La traccia degli sci fra le sezioni ═══
   Due solchi paralleli, come quelli che restano sulla neve. Compare solo
   fra due sezioni dello stesso colore: fra due toni diversi il passaggio
   lo fa già il colore, e la traccia sarebbe rumore. */
.sez + .sez:not(.t-chiaro):not(.sez--cta):not(.sez--contatore):not(.sez--hero-evento)::before {
  content: ''; display: block; width: 74px; height: 10px;
  margin: 0 auto var(--sp-5);
  background:
    linear-gradient(90deg, transparent, var(--bordo-forte) 18%, var(--bordo-forte) 82%, transparent) 0 2px / 100% 1.5px no-repeat,
    linear-gradient(90deg, transparent, var(--bordo-forte) 18%, var(--bordo-forte) 82%, transparent) 0 7px / 100% 1.5px no-repeat;
  opacity: .55;
}
.sez--galleria + .sez::before, .sez--modulo + .sez::before { content: none; }

/* ═══════════════════════ La neve sull'eroe ═══
   ⚠ RADA DI PROPOSITO. Trenta fiocchi, lenti, solo dentro l'eroe e solo
   su schermo largo. Fatta fitta questa cosa fa «sito di Natale» e
   invecchia in tre settimane; fatta così si nota appena, ed è il punto.
   Sono due strati di gradienti radiali che scendono: nessuna immagine,
   nessun canvas, nessun JavaScript — solo due elementi che traslano, che
   il browser sposta senza ridisegnare niente.

   ⚠ E STA SU UN ELEMENTO SUO. La prima versione appoggiava i fiocchi su
   `.hero--foto::before` e su `.wrap::after`: due pseudo-elementi già
   occupati, il primo dal velo del contrasto (z-index -2, opacità .64) e
   il secondo dal contenitore del testo. Dandogli `z-index: 1` il velo
   passava DAVANTI al titolo: il testo restava leggibile ma spento, come
   sotto un vetro smerigliato. Adesso l'ordine è dichiarato e non si può
   sbagliare: velo (-2) · profondità (-1) · neve (0) · testo (1). */
.neve { display: none; }
@media (min-width: 780px) {
  .anim .hero--foto .neve {
    display: block; position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
  }
  .anim .hero--foto .neve::before,
  .anim .hero--foto .neve::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    background-repeat: repeat;
  }
  .anim .hero--foto .neve::before {
    background-image:
      radial-gradient(2px 2px at 12% 18%, rgb(255 255 255 / .8), transparent),
      radial-gradient(1.5px 1.5px at 34% 62%, rgb(255 255 255 / .6), transparent),
      radial-gradient(2px 2px at 58% 30%, rgb(255 255 255 / .7), transparent),
      radial-gradient(1.5px 1.5px at 77% 74%, rgb(255 255 255 / .55), transparent),
      radial-gradient(2px 2px at 91% 44%, rgb(255 255 255 / .65), transparent);
    background-size: 100% 320px;
    animation: neve 24s linear infinite;
  }
  .anim .hero--foto .neve::after {
    background-image:
      radial-gradient(1.5px 1.5px at 22% 40%, rgb(255 255 255 / .5), transparent),
      radial-gradient(1px 1px at 47% 80%, rgb(255 255 255 / .45), transparent),
      radial-gradient(1.5px 1.5px at 68% 14%, rgb(255 255 255 / .5), transparent),
      radial-gradient(1px 1px at 85% 58%, rgb(255 255 255 / .4), transparent);
    background-size: 100% 460px;
    animation: neve 38s linear infinite;
  }
}
/* Il testo davanti a tutto, dichiarato una volta e non per caso. */
.hero--foto .hero__dentro { position: relative; z-index: 1; }
@keyframes neve {
  from { background-position: 0 -320px; }
  to   { background-position: 40px 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .anim .hero--foto .neve::before,
  .anim .hero--foto .neve::after { animation: none; opacity: .35; }
}

/* ═══════════════════════ Passaggio fra le pagine ═══
   Una dissolvenza breve al cambio pagina: dà l'impressione dell'app e
   costa niente. I browser che non la conoscono semplicemente non fanno
   niente — nessuna riserva da scrivere. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sfuma-via 140ms ease-out both; }
::view-transition-new(root) { animation: sfuma-dentro 220ms ease-out both; }
@keyframes sfuma-via    { to   { opacity: 0; } }
@keyframes sfuma-dentro { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* La lista d'attesa: si distingue dalle iscrizioni aperte senza gridare. */
.ev__stato--attesa { background: var(--fondo-2); color: var(--testo); border: 1px solid var(--bordo-forte); }
.scelta--attesa { border-style: dashed; }
.scelta--attesa .scelta__meta strong { color: var(--brace-testo); }
.pstato-pub--attesa { background: var(--fondo-2); color: var(--testo); border: 1px solid var(--bordo-forte); }

/* La riga sotto a un recapito (il canale WhatsApp nei contatti): spiega
   che cos'è, in piccolo, senza rubare peso al collegamento sopra. */
.recapito__nota {
  display: block; margin-top: .25rem;
  font-size: var(--t-sm); color: var(--testo-tenue, var(--grigio, #5a5a5a));
  max-width: 34rem;
}

/* Le domande del corso: esistono sempre nel documento, si vedono solo
   quando nel modulo è spuntato un evento di tipo «corso» (il JavaScript
   mette `modulo--corso` sul form). La sezione dei termini per le uscite
   si vede con un'uscita spuntata (`modulo--uscita`). E con il SOLO corso
   spuntato (`modulo--solo-corso`) spariscono i livelli delle uscite,
   perché il corso ha il suo livello a cinque gradi.
   ⚠ Senza JavaScript (`html` senza `.js`) resta tutto visibile: il
     server pretende le domande del corso solo se il corso è fra gli
     eventi scelti. */
html.js .modulo--iscrizione:not(.modulo--corso)  .solo-corso  { display: none; }
html.js .modulo--iscrizione:not(.modulo--uscita) .solo-uscita { display: none; }
html.js .modulo--iscrizione.modulo--solo-corso   .non-corso   { display: none; }

/* I termini e condizioni dentro il modulo, sopra la casella che li
   accetta: un riquadro come sul loro modulo di prima, ma testo vero,
   che si può leggere con lo schermo piccolo e con un lettore. */
.termini {
  border: 1px solid var(--bordo); border-radius: var(--r-md);
  background: var(--fondo-scheda); padding: 1rem 1.2rem 1.1rem;
  margin: 1.4rem 0 .2rem; font-size: var(--t-sm); color: var(--testo);
}
.termini__titolo {
  font-family: var(--font-titoli); font-weight: var(--peso-titoli);
  font-size: var(--t-md); color: var(--testo-forte); margin: 0 0 .5rem;
}
.termini__sez { margin-top: .8rem; }
.termini__h { font-weight: 700; margin: 0 0 .25rem; color: var(--testo-forte); }
.termini p { margin: 0 0 .45rem; }
.termini p:last-child { margin-bottom: 0; }
.termini__nota { margin-top: .9rem; color: var(--testo-tenue); }
.termini__nota a { padding-block: .35rem; }

/* La conversazione pubblica (/risposta): i messaggi come schede, i suoi
   a sinistra, quelli del club a destra col fondo pieno. */
.filo { display: grid; gap: .9rem; }
.filo__msg { border: 1px solid var(--bordo, #E3DED5); border-radius: 12px; padding: .9rem 1.1rem; max-width: 44rem; background: var(--fondo-scheda); }
.filo__msg--club { margin-left: auto; background: var(--fondo-2); }
.filo__msg p { margin: 0; }
.filo__chi { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: var(--t-sm); color: var(--testo-tenue); margin-bottom: .35rem; }
.filo__et { font-style: italic; }
.filo__oggetto { font-weight: 600; margin: 0 0 .3rem; }
.filo__modulo { margin-top: 1.2rem; max-width: 44rem; }
.filo__esito { padding: .9rem 1.1rem; border-radius: 12px; background: var(--fondo-2); font-weight: 600; }