/* Font ospitati qui (sottoinsieme latin): nessuna richiesta a Google, nessun dato dei visitatori a terzi. */
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/fraunces-italic-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/fraunces-normal-400-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/public-sans-400-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bianco: #fff;
  --nero: #000;
  --giallo: #edbe22;      /* il giallo dei loro stampati */
  --ocra: #7a5400;        /* testo e link su bianco (contrasto 7:1) */
  --fucsia: #b8135f;      /* titoli di sezione e del riquadro "Un esempio" (6,4:1 sul bianco, 5,5:1 sul pietra e sul rosa) */
  --fucsia-scuro: #8a0d46; /* fucsia per testo piccolo sul giallo (5,4:1; il fucsia normale lì fa 3,6:1) */
  --rosa: #f9eaf1;        /* sfondo della sezione team: il fucsia molto chiaro */
  --pietra: #f1efe9;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Public Sans', system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bianco); color: var(--nero); font: 400 1.0625rem/1.6 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--ocra); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ocra); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.1; margin: 0 0 .5em; }

.salta { position: absolute; left: -999px; }
.salta:focus { left: 1rem; top: 1rem; background: var(--bianco); padding: .5rem 1rem; z-index: 2; }

/* L'ala del logo è una maschera: prende il colore del testo intorno. */
.ala, .ala-grande {
  display: inline-block; background: currentColor;
  -webkit-mask: url(/assets/ala.webp) center / contain no-repeat;
  mask: url(/assets/ala.webp) center / contain no-repeat;
}

.testata { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); background: var(--giallo); }
.marchio { display: flex; align-items: center; gap: .6rem; color: var(--nero); text-decoration: none; font: 700 1.3rem var(--serif); letter-spacing: -.01em; }
.marchio .ala { width: 2.2rem; height: 1.5rem; }
.testata nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.testata nav a { white-space: nowrap; }
.testata nav a { color: var(--fucsia-scuro); text-decoration: none; font-weight: 600; }
.testata nav a:hover { text-decoration: underline; }
@media (max-width: 40rem) {
  .testata { padding-block: .6rem; row-gap: .35rem; }
  .testata nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .85rem; font-size: .88rem; }
}

.apertura { position: relative; overflow: hidden; background: var(--giallo); padding: clamp(4rem, 12vw, 9rem) var(--gutter) clamp(4rem, 10vw, 7rem); text-align: center; }
.apertura-testo { position: relative; z-index: 1; max-width: 60rem; margin: 0 auto; }
.apertura h1 { font-size: clamp(2.8rem, 8.5vw, 7.5rem); font-weight: 900; font-variation-settings: 'opsz' 144; letter-spacing: -.025em; line-height: 1; text-wrap: balance; }
.apertura p { max-width: 36rem; margin-inline: auto; font-size: 1.2rem; }
.apertura .azioni { justify-content: center; }
.parola { display: inline-block; }
.ala-grande { position: absolute; left: 50%; top: 50%; width: min(90vw, 56rem); aspect-ratio: 351 / 243; translate: -50% -50%; color: var(--nero); opacity: .08; }

.azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.bottone { display: inline-block; padding: .8rem 1.4rem; background: var(--nero); color: var(--bianco); font-weight: 600; text-decoration: none; border-radius: 2rem; }
.bottone:hover { background: var(--ocra); }
.bottone.secondario { background: transparent; color: var(--nero); box-shadow: inset 0 0 0 2px var(--nero); }
.bottone.secondario:hover { background: var(--nero); color: var(--bianco); }

.blocco { padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); max-width: 72rem; margin-inline: auto; }
.blocco > h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.due-colonne { display: grid; gap: 1rem 4rem; grid-template-columns: minmax(0, 1fr); }
.due-colonne > div { max-width: 40rem; }
.blocco h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 52rem) { .due-colonne { grid-template-columns: 16rem minmax(0, 1fr); } }
.blocco + .blocco { border-top: 1px solid var(--pietra); }
.partecipa { background: var(--pietra); }

.temi { padding-left: 1.2rem; }
.temi li::marker { color: var(--ocra); }

.elenco { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: 44rem; }
.elenco li { padding: 1.25rem 0; border-bottom: 1px solid var(--pietra); }
.elenco li:first-child { padding-top: 0; }
.elenco h3 { font-size: 1.4rem; margin: .2rem 0 .4rem; }
.elenco h3 a { color: var(--nero); text-decoration: none; }
.elenco h3 a:hover { text-decoration: underline; }
.elenco p { margin: 0; }
time { color: #5b5660; font-size: .95rem; }

.notizia { padding: clamp(2rem, 6vw, 4rem) var(--gutter); max-width: 46rem; }
.notizia h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-top: .3rem; }
.notizia img { margin: 1rem 0 1.5rem; }
.testo { font-size: 1.125rem; line-height: 1.7; }
.indietro { margin-top: 0; }

.piede { padding: clamp(1.75rem, 3.5vw, 2.25rem) var(--gutter) 1rem; background: var(--nero); color: var(--bianco); }
.piede a { color: var(--giallo); }
.piede p { margin: 0 0 .4rem; }
.piede .social { margin-top: .6rem; }
.piede-griglia { max-width: 72rem; margin: 0 auto; font-size: .75rem; line-height: 1.6; display: grid; gap: 1.25rem 3rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.piede-marchio { display: flex; align-items: center; gap: .5rem; font: 700 1.3rem var(--serif); color: var(--giallo); }
.piede-marchio .ala { width: 2rem; height: 1.4rem; }
.piede-titolo { font: 700 .75rem var(--serif); color: var(--giallo); }
.social { display: flex; gap: .9rem;  }
.social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid rgb(237 190 34 / .4); border-radius: 50%; }
.social a:hover { background: var(--giallo); color: var(--nero); }
.legale { display: flex; flex-direction: column; gap: .35rem; }
.piede-fondo { max-width: 72rem; margin: 1.25rem auto 0; padding-top: .9rem; border-top: 1px solid rgb(255 255 255 / .15); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-size: .85rem; color: #b9b5bd; }
.piede-fondo p { margin: 0; }

/* Credito nei colori del brand Gianro Compagno (verde bosco, papel, melocotón): piccolo e discreto. */
.crediti { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.piede .crediti-gianro { display: inline-flex; align-items: baseline; gap: .45rem; padding: .35rem .85rem .4rem; background: #16241a; border: 1px solid #1f3524; border-radius: 2rem; color: #f4f1e6; text-decoration: none; line-height: 1.2; }
.crediti-gianro span { font-size: .75rem; color: #e9b384; }
.crediti-gianro strong { font: 700 1rem var(--serif); letter-spacing: -.01em; }
.crediti-gianro i { font-style: normal; color: #e9b384; }
.crediti-con { font-size: .8rem; }

.intro { max-width: 40rem; font-size: 1.15rem; }
.vantaggio { font-weight: 600; color: var(--ocra); }
.elenco .recapiti { margin-top: .4rem; color: #5b5660; }

.cornice-foto { background: var(--giallo); overflow: hidden; }
.foto-larga { display: block; width: 100%; max-height: 80vh; object-fit: cover; object-position: center 30%; }

.centrato { margin-inline: auto; text-align: center; }
.centrato > p { max-width: 38rem; margin-inline: auto; font-size: 1.15rem; }

.pilastri { margin: 2.5rem 0 0; display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pilastri > div { display: flex; flex-direction: column; align-items: center; }
.pilastri .ala { width: 3.5rem; height: 2.4rem; color: var(--giallo); margin-bottom: 1rem; }
.pilastri dt { font: 700 1.5rem var(--serif); margin-bottom: .4rem; }
.pilastri dd { margin: 0; max-width: 22rem; }

.manifesto { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(1rem, 2vw, 1.5rem); text-align: center; }
.manifesto h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.manifesto > p { max-width: 34rem; margin: 0 auto 2.5rem; font-size: 1.2rem; }
.catena { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; counter-reset: passo; }
.catena li { display: flex; flex-direction: column; align-items: center; gap: .4rem; counter-increment: passo; }
/* La linea gialla fra un passo e l'altro: è una sequenza, ogni passo porta al successivo. */
.catena li + li::before { content: ""; width: 3px; height: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: .6rem; background: var(--giallo); border-radius: 2px; }
.catena .passo { font: 900 clamp(2.6rem, 9vw, 6.5rem)/1 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.03em; }
.catena .passo::before { content: counter(passo); display: block; font: 600 .9rem var(--sans); letter-spacing: 0; color: var(--ocra); margin-bottom: .2rem; }
.catena .spiega { max-width: 28rem; font-size: 1.1rem; color: #3d3a40; }
.catena .arrivo .passo { background: var(--giallo); padding: 0 .2em .1em; border-radius: .15em; }
.esempio { max-width: 38rem; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 1.5rem 1.75rem; background: var(--pietra); border-radius: 1rem; text-align: left; }
.esempio p { margin: 0 0 .6rem; }
.esempio p:last-child { margin: 0; }
.esempio .esempio-titolo { margin: 0 0 .75rem; text-align: center; font: 700 1.35rem var(--serif); color: var(--fucsia); }
.esempio p:not(.esempio-titolo) { text-align: justify; hyphens: auto; }
.esempio p + .esempio-titolo { margin-top: 1.75rem; }
.frase { font-weight: 700; }
/* Giallo come sfondo, non come testo: il testo giallo su fondo chiaro non si legge (contrasto 1,7:1). */
.frase.positiva { background: var(--giallo); padding: .05em .3em; border-radius: .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.valori { overflow: hidden; padding: clamp(2rem, 5vw, 3.5rem) 0; background: var(--nero); color: var(--giallo); }
.nastro { display: flex; width: max-content; font: 400 clamp(1.8rem, 4.5vw, 3.4rem)/1.3 var(--serif); font-variation-settings: 'opsz' 144; white-space: nowrap; }
.nastro.inverso { color: var(--bianco); font-style: italic; }
.nastro span { padding-right: .5em; }
.nastro .ala { width: .8em; height: .55em; margin: 0 .35em; vertical-align: baseline; }

.vantaggi { list-style: none; padding: 0; margin: 2rem auto; max-width: 44rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); text-align: left; }
.vantaggi li { padding: 1.1rem 1.25rem; background: var(--bianco); border-radius: 1rem; font-weight: 600; }
.partecipa .azioni { justify-content: center; }

.team { list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: 64rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 1.5rem; }
.team li { width: 11rem; align-items: center; }
.team li { display: flex; flex-direction: column; gap: .2rem; }
.team img, .senza-foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: .6rem; }
.team .senza-foto { display: grid; place-items: center; background: var(--giallo); color: var(--nero); }
.senza-foto .ala { width: 45%; height: 35%; }
.team strong { font: 700 1.1rem var(--serif); }
.team span { color: #5b5660; font-size: .95rem; line-height: 1.4; }

.rete { list-style: none; padding: 0; margin: 0; max-width: 40rem; }
.rete li { padding: .6rem 0; border-bottom: 1px solid var(--pietra); }

/* ---------- Movimento ----------
   Tutto dentro no-preference: con "riduci movimento" il sito resta statico e completo.
   Comparse con IntersectionObserver (ovunque); effetti legati allo scroll solo dove il browser
   supporta animation-timeline, altrove restano fermi. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

@media (prefers-reduced-motion: no-preference) {
  .parola, .entra { animation: sale 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 100ms); }
  @keyframes sale { from { opacity: 0; transform: translateY(0.35em); } }

  .js .rivela { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rivela[data-visibile] { opacity: 1; transform: none; }

  .js .catena li { opacity: .12; transform: translateY(.15em); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .js .catena li[data-visibile] { opacity: 1; transform: none; }

  .nastro { animation: scorre 60s linear infinite; }
  .nastro.inverso { animation-direction: reverse; animation-duration: 75s; }
  @keyframes scorre { to { transform: translateX(-50%); } }
  .valori:hover .nastro { animation-play-state: paused; }

  @media (hover: hover) and (pointer: fine) {
    .bottone { transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
    .bottone:active { transform: scale(0.97); }
    .team li:hover img { transform: scale(1.04); }
  }

  @supports (animation-timeline: view()) {
    /* L'ala prende il volo mentre si lascia l'apertura. */
    .ala-grande { animation: vola linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes vola { to { transform: translate(35%, -45%) rotate(-14deg) scale(1.15); opacity: 0; } }

    /* La foto si apre fino ai bordi entrando nello schermo. */
    .foto-larga { animation: apre linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes apre { from { clip-path: inset(0 8% round 2rem); transform: scale(1.08); } to { clip-path: inset(0 0 round 0); transform: none; } }

    /* La testata prende un filo d ombra dopo i primi 120px. */
    .testata { animation: compatta linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    @keyframes compatta { to { box-shadow: 0 1px 0 rgb(0 0 0 / .15), 0 8px 24px rgb(0 0 0 / .06); } }

    /* La catena si accende seguendo lo scroll: parole, pensiero, credenza, azione. */
    .js .catena li { transition: none; opacity: 1; transform: none; animation: accende linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes accende { from { opacity: .12; transform: translateY(.15em); } }
  }
}

.categorie { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1rem; }
.categorie a { padding: .4rem .9rem; border-radius: 2rem; background: var(--pietra); color: var(--nero); text-decoration: none; font-weight: 600; font-size: .95rem; }
.categorie a:hover { background: var(--giallo); }
.categoria { margin-top: 3rem; padding-bottom: .5rem; border-bottom: 3px solid var(--giallo); scroll-margin-top: 5rem; }
.convenzioni { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.convenzioni li { padding: 1.25rem; border: 1px solid var(--pietra); border-radius: 1rem; }
.convenzioni h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.convenzioni p { margin: .3rem 0 0; }
.convenzioni .recapiti { color: #5b5660; font-size: .95rem; }
.legale-pagina h2 { font-size: 1.5rem; margin-top: 2rem; }
.aggiornato { color: #5b5660; font-size: .95rem; }

/* Team in bianco e nero: col mouse la foto si colora; su telefono (niente hover) si colora da sola
   poco dopo essere comparsa. Il colore cambia anche con "riduci movimento": non è un movimento. */
.team img { filter: grayscale(1); transition: filter 500ms ease, transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .team li:hover img { filter: none; } }
@media (hover: none) { .team li[data-visibile] img { filter: none; transition-delay: calc(var(--i, 0) * 120ms + 700ms); } }

.ig-griglia { list-style: none; padding: 0; margin: 2rem auto; max-width: 60rem; display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
.ig-griglia a { display: block; overflow: hidden; border-radius: .75rem; }
.ig-griglia img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ig-griglia a:hover img { transform: scale(1.05); } }

/* Titoli di sezione in fucsia: il tocco di colore accanto al giallo. Il titolo d'apertura resta nero. */
.blocco h2, .manifesto h2 { color: var(--fucsia); }
.team-sezione { background: var(--rosa); }
/* Stessa misura dei titoli di sezione (.blocco h2). Il selettore deve battere `.centrato > p`. */
.centrato > .slogan { max-width: none; margin: 2.5rem auto 0; font: 700 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--serif); color: var(--fucsia); }

/* I link interni (#team, #partecipa…) non devono finire sotto la testata fissa. */
[id] { scroll-margin-top: 5rem; }

/* Una parola del titolo d'apertura in fucsia: testo grande, sul giallo basta il 3:1 (qui 3,6:1). */
.apertura .accento { color: var(--fucsia); }

/* Pulsanti dell'apertura: principale fucsia → nero, secondario contornato → fucsia. */
.apertura .bottone { background: var(--fucsia); color: var(--bianco); }
.apertura .bottone:hover { background: var(--nero); }
.apertura .bottone.secondario { background: transparent; color: var(--nero); box-shadow: inset 0 0 0 2px var(--nero); }
.apertura .bottone.secondario:hover { background: var(--fucsia); color: var(--bianco); box-shadow: inset 0 0 0 2px var(--fucsia); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .apertura .bottone { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); }
}

/* Team su telefono: sempre due per riga, foto più piccole, così la sezione non diventa lunghissima. */
@media (max-width: 40rem) {
  .team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .team li { width: auto; }
  .team li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* l'ultimo, se è da solo, va al centro */
  .team img, .team .senza-foto { width: 6.5rem; margin-inline: auto; }
  .team strong { font-size: 1rem; }
  .team span { font-size: .85rem; }
}

.copia { margin-left: .4rem; padding: .15rem .6rem; border: 1px solid var(--nero); border-radius: 1rem; background: transparent; font: 600 .8rem var(--sans); cursor: pointer; }
.copia:hover { background: var(--nero); color: var(--bianco); }

/* Quattro pilastri: 4 colonne su desktop, 2×2 su telefono. */
@media (min-width: 64rem) { .pilastri { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 40rem) {
  .pilastri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .pilastri dt { font-size: 1.15rem; }
  .pilastri dd { font-size: .9rem; }
}

/* Pilastri allineati fra loro: icona, titolo e testo stanno su tre righe comuni a tutte le colonne
   (subgrid). Il titolo si appoggia in basso, così il testo parte alla stessa altezza anche quando
   un titolo va su due righe. */
.pilastri > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; align-items: start; row-gap: .4rem; }
.pilastri .ala { margin-bottom: .6rem; }
.pilastri dt { align-self: end; margin-bottom: 0; }

/* Iscrizione nel footer */
.piede-iscrizione code { font: 600 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bianco); word-break: break-all; }
.piede .copia { border-color: var(--giallo); color: var(--giallo); font-size: .7rem; }
.piede .copia:hover { background: var(--giallo); color: var(--nero); }
@media (min-width: 64rem) { .piede-griglia { grid-template-columns: 1.1fr .9fr 1.4fr .7fr; } }

/* Menu a scomparsa su telefono (solo con JavaScript attivo: senza, il menu resta visibile com'era). */
.menu-bottone { display: none; }
@media (max-width: 40rem) {
  .js .testata { flex-wrap: wrap; row-gap: 0; }
  .js .menu-bottone { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -8px; padding: 0; background: none; border: 0; cursor: pointer; }
  .menu-bottone span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--fucsia-scuro); transition: transform 200ms var(--ease-out), opacity 150ms ease; }
  .menu-bottone[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-bottone[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-bottone[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .js .testata nav { display: none; width: 100%; flex-direction: column; gap: 0; overflow: visible; padding: .25rem 0 .5rem; font-size: 1.15rem; }
  .js .testata.aperto nav { display: flex; }
  .js .testata nav a { padding: .75rem 0; border-top: 1px solid rgb(0 0 0 / .08); }
}

/* Tesseramento: il titolo più grande della sezione Perché iscriversi. */
.tesseramento { margin: 0 auto 2.5rem; }
.tesseramento-titolo { margin: 0; font: 900 clamp(2.6rem, 8vw, 5rem)/1 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.02em; color: var(--fucsia); text-transform: uppercase; }
.centrato > .tesseramento .tesseramento-testo, .tesseramento-testo { margin: .75rem auto 0; max-width: 34rem; font: 700 clamp(1.15rem, 2.6vw, 1.5rem)/1.3 var(--serif); }

/* Momenti insieme: foto in bianco e nero che si colorano, come il team. */
.momenti-griglia { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52rem) { .momenti-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.momenti-griglia li { overflow: hidden; border-radius: 1rem; }
.momenti-griglia img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); transition: filter 500ms ease, transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .momenti-griglia li:hover img { filter: none; transform: scale(1.04); } }
@media (hover: none) { .momenti-griglia li[data-visibile] img { filter: none; transition-delay: calc(var(--i, 0) * 120ms + 700ms); } }