/* NOW — custom.css
   Solo ciò che Tailwind (tailwind.css compilato) non copre: font self-hosted, componenti ripetuti,
   animazioni CSS, placeholder mid-fidelity. */

/* ---------- Font self-hosted ----------
   Epic (GC EpicPro) per i titoli, Golos Text variabile per il corpo.
   Epic esiste in un solo peso (Extra Bold): la stessa faccia è dichiarata
   su tutta la scala 100-900, così il browser non genera mai un finto
   grassetto e i titoli restano identici a qualunque font-weight.
   La gerarchia dei titoli la fanno dimensione e colore. */
@font-face {
  font-family: 'Epic';
  src: url('../fonts/epic.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Golos: due tagli dello stesso variabile (latin + latin extended);
   il secondo si scarica solo se in pagina compaiono quei caratteri. */
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-text-var.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  src: url('../fonts/golos-text-var-ext.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Token: assets/css/tokens.css (generato da _dev/design-system/tokens.json) */

/* ============================================================
   BUTTON (atomo) · Figma: Button, Style = Primary | Inverse | Ghost | Dark
   Pillola, label Golos 14px maiuscola (t-label), icona finale opzionale (.freccia).
   Primary: Life Green + testo ink (7,7:1), su scuro e su chiaro; in hover si solleva con l'ombra piena
            e passa il riflesso olografico. Inverse: Soft White, solo su scuro. Ghost: prende il colore
            del contesto, hover verde. Dark: Black Box, per fondi verdi e chiari.
   Stati: hover, focus-visible (anello currentColor), disabilitato (.is-disabled o [disabled]).
   ============================================================ */
.btn-primary,
.btn-invert,
.btn-ghost,
.btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.75rem;
  font-weight: 600; font-size: var(--text-sm);                       /* 14px: minimo assoluto dei testi */
  text-transform: uppercase; letter-spacing: var(--tracking-label);   /* max ~0.8px: Golos largo non serve di più */
  border: 1px solid transparent; border-radius: var(--radius-full);   /* CTA a pillola (i campi restano su radius-md) */
  white-space: nowrap;                                                /* 02/10/2026: le CTA non vanno mai a capo */
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
@media (max-width: 400px) {
  .btn-primary, .btn-invert, .btn-ghost, .btn-dark { padding-left: 1.25rem; padding-right: 1.25rem; letter-spacing: .04em; }
}
.btn-primary {
  background-color: var(--color-accent); color: var(--color-accent-on); border-color: var(--color-accent);
  background-image: var(--gradient-holo-sheen); background-size: 260% 100%; background-position: 100% 0;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-position .75s var(--ease-out), color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.btn-primary:hover { background-position: 0 0; transform: translate(-2px, -2px); box-shadow: var(--shadow-offset); }
.btn-invert  { background: var(--color-sand-50); color: var(--color-night-850); border-color: var(--color-sand-50); }
.btn-invert:hover { background: transparent; color: var(--color-sand-50); transform: translate(-2px, -2px); box-shadow: var(--shadow-offset-light); }
.btn-ghost   { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: var(--color-accent); color: var(--color-accent-on); border-color: var(--color-accent); }
.btn-dark    { background: var(--color-night-850); color: var(--color-sand-50); border-color: var(--color-night-850); }
.btn-dark:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-offset); }
@media (prefers-reduced-motion: reduce) { .btn-primary { transition: none; } }

/* Due CTA impilate su telefono: stessa larghezza, quella della più lunga (02/10/2026) */
@media (max-width: 639px) {
  .cta-coppia { display: grid !important; grid-template-columns: minmax(0, 1fr); justify-items: stretch; width: max-content; max-width: 100%; }
  .cta-coppia > a, .cta-coppia > button { width: 100%; }
  .cta-coppia--centro { margin-left: auto; margin-right: auto; }
}

/* Stato disabilitato (es. piano non disponibile per la durata scelta) */
.is-disabled { opacity: .35; filter: grayscale(1); pointer-events: none; }

.btn-primary:focus-visible, .btn-invert:focus-visible, .btn-ghost:focus-visible, .btn-dark:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- Placeholder immagini (mid-fidelity) ---------- */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgb(var(--rgb-night-850) / .07) 12px 13px),
    var(--color-sand-100);
  color: var(--color-grey-800);   /* testo scurissimo: niente grigi intermedi */
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  padding: 1rem;
  border-radius: var(--radius-lg);
}
.ph-dark {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgb(var(--rgb-sand-50) / .07) 12px 13px),
    var(--color-night-750);
  color: var(--color-grey-50);   /* bianco pieno: niente grigi intermedi */
}
/* dentro contenitori già arrotondati il raggio lo decide il wrapper */
.rounded-none > .ph, [class*="overflow-hidden"] > .ph { border-radius: inherit; }

/* ---------- Carosello coach ---------- */
.btn-freccia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  background: transparent; color: inherit;
  font-size: var(--text-base-plus); line-height: 1;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.btn-freccia:hover { background: var(--color-green-500); color: var(--color-night-850); border-color: var(--color-green-500); }
/* scroller senza barra visibile (lo scroll resta: swipe, trackpad, frecce) */
.scroll-nascosto { scrollbar-width: none; }
.scroll-nascosto::-webkit-scrollbar { display: none; }

/* ---------- Trama superfici scure ----------
   dark-pattern.webp (raster dell'SVG, alpha pre-dosata ~42%): velo di trama
   sui blocchi bg-ink. Come background sta sempre sotto i contenuti; nella
   hero è un div dedicato sopra canvas e veli, sotto claim e ruota. */
.trama-dark {
  background-image: url('../img/dark-pattern.webp');
  background-size: cover;
  background-position: center;
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-block; animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Carousel servizi (hero) ---------- */
.carousel-servizi { overflow: hidden; }
.carousel-track { animation: carousel 55s linear infinite; }
.carousel-track > a { margin-right: 1rem; } /* niente gap: il -50% resta esatto */
/* pausa solo con il cursore su una card (non sull'intero contenitore) */
.carousel-servizi:has(.carousel-track > a:hover) .carousel-track,
.carousel-servizi:focus-within .carousel-track { animation-play-state: paused; }
@keyframes carousel { to { transform: translateX(-50%); } }

/* Variante "ruota" (attivata da carousel-ruota.js): le card sono posizionate
   in assoluto lungo un arco via transform. Senza JS resta la striscia.
   La ruota è girabile col drag: cursore grab, scroll verticale libero sul
   touch (pan-y), niente selezione o drag nativo dei link durante il gesto. */
.carousel-servizi.is-ruota { overflow: visible; height: 15rem; touch-action: pan-y; cursor: grab; }
.carousel-servizi.is-ruota.is-grabbing { cursor: grabbing; }
.carousel-servizi.is-ruota .carousel-track > a { user-select: none; -webkit-user-drag: none; }
@media (min-width: 640px)  { .carousel-servizi.is-ruota { height: 19rem; } }
@media (min-width: 1024px) { .carousel-servizi.is-ruota { height: 21rem; } }
.carousel-servizi.is-ruota .carousel-track {
  animation: none;
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel-servizi.is-ruota .carousel-track > a {
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  transform-origin: top center;
  will-change: transform, opacity;
}
/* Sfumatura sul fondo del blocco ruota: le card che scendono oltre la hero
   svaniscono invece di essere tagliate vive (attiva solo in modalità ruota). */
.ruota-fade:has(.is-ruota) {
  -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, var(--color-black) 82%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ---------- Hero adattiva in altezza (mobile) ----------
   Insieme alle spaziature in svh di index.php: da iPhone SE/6 al Pro Max
   la hero (claim + CTA + ruota) sta in un viewport. */
@media (max-width: 639px) {
  /* la ruota scala con l'altezza dello schermo */
  .carousel-servizi.is-ruota { height: clamp(14rem, 32svh, 16.5rem); }
  /* 02/10/2026: card più grandi (una in primo piano, le vicine rimpicciolite da carousel-ruota.js) */
  .carousel-servizi.is-ruota .carousel-track > a { width: 13rem; }
  /* nastro "Coming soon" più piccolo sulle card della ruota */
  .carousel-servizi .card-stripe { top: 2.05rem; right: -2.85rem; width: 11rem; padding: .2rem 0; font-size: .6875rem; letter-spacing: .05em; border-width: 1px; }
}
@media (max-width: 639px) and (max-height: 700px) {
  /* telefoni bassi: card più compatte, lead compatto (ma sempre visibile),
     fade della ruota che parte più in basso (card frontale integra) */
  .carousel-track > a, .carousel-servizi.is-ruota .carousel-track > a { width: 11.5rem; }
  .hero-lead { max-width: 21rem; }
  .ruota-fade:has(.is-ruota) {
    -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, var(--color-black) 88%, transparent 100%);
  }
}

/* Placeholder foto servizio: pattern brand + duotone nel colore del pilastro (--acc).
   Sostituire con assets/img/servizi/{slug}.jpg appena disponibili gli scatti. */
.ph-servizio {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--acc, var(--color-green-500)) 38%, var(--color-night-850)), rgb(var(--rgb-night-850) / .92)),
    url('../img/pattern-tile.svg') left top / 120px auto repeat var(--color-night-850);
}

/* ---------- Hamburger ---------- */
.nav-burger, .nav-burger::before, .nav-burger::after {
  content: ''; display: block; width: 20px; height: 2px; background: currentColor; transition: transform var(--duration-base) ease;
}
.nav-burger { position: relative; }
.nav-burger::before { position: absolute; top: -6px; }
.nav-burger::after  { position: absolute; top: 6px; }
[aria-expanded="true"] .nav-burger { background: transparent; }
[aria-expanded="true"] .nav-burger::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Glow titolo hero ----------
   drop-shadow (non text-shadow): le parole splittate da GSAP stanno in box
   overflow:hidden che taglierebbero un text-shadow; il filter viene applicato
   dopo il clipping, quindi il glow segue solo i pixel visibili. */
.title-glow {
  filter: drop-shadow(0 0 14px rgb(var(--rgb-green-500) / .28))
          drop-shadow(0 0 44px rgb(var(--rgb-green-500) / .14));
}

/* ---------- Anti scroll orizzontale ----------
   Rete di sicurezza globale: nessun elemento (ruota, alone hero, marquee)
   può creare scorrimento laterale della pagina. */
html, body { overflow-x: clip; }
/* 02/10/2026: testo dei paragrafi uniforme a 17px (= text-base) */
body { font-size: var(--text-base); }

/* ---------- Smooth scroll per gli anchor interni ----------
   scroll-behavior lo attiva la classe Tailwind su <html> (head.php);
   scroll-padding compensa l'header fisso: il target atterra sotto di esso,
   non nascosto dietro. */
html { scroll-padding-top: 5.5rem; }

/* ---------- Split text (GSAP) ---------- */
[data-split] .word, [data-split-hero] .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-split] .word > span, [data-split-hero] .word > span { display: inline-block; will-change: transform; }

/* ---------- Banda orari: tonalità del pilastro attivo ----------
   :has() legge quale calendario è visibile e il fondo dark vira leggermente
   verso il suo colore: verde per Performance, acqua per Fitness.
   Senza :has() resta ink: puro progressive enhancement. */
.cal-tinta { position: relative; background: var(--color-night-850); transition: background-color .5s ease; }
/* velo del pattern brand (lo stesso della hero): leggerissimo, dissolve
   scendendo (mask). Parallasse solo desktop: il pattern resta fermo mentre
   la pagina scorre (background-attachment: fixed, ignorato su iOS → statico). */
.banda-pattern { position: relative; background: var(--color-night-850); }
.cal-tinta::before,
.banda-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('../img/pattern-tile.svg') center top / 240px auto repeat;
  opacity: .07;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 0%, rgb(var(--rgb-black) / .4) 55%, transparent 90%);
          mask-image: linear-gradient(to bottom, var(--color-black) 0%, rgb(var(--rgb-black) / .4) 55%, transparent 90%);
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .cal-tinta::before, .banda-pattern::before { background-attachment: fixed; }
}
.cal-tinta:has([data-cal-panel="performance"]:not([hidden])) { background: var(--color-green-950); }
.cal-tinta:has([data-cal-panel="fitness"]:not([hidden]))     { background: var(--color-teal-950); }

/* ---------- Chip filtro calendario ----------
   Logica "accesa/spenta": la selezionata è una cella del calendario (shade
   chiara della disciplina + testo scurito + bordo pieno), le non attive sono
   outline scure e silenziose sul fondo dark. Differenza inequivocabile. */
.chip-cal {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .5rem 1.125rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-night-500);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: transparent;
  color: var(--color-grey-50);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.chip-cal:hover { border-color: var(--c, var(--color-sand-50)); }
.chip-cal[aria-pressed="true"] {
  background: var(--c-bg, var(--color-sand-50));
  border-color: var(--c, var(--color-night-850));
  color: var(--c-txt, var(--color-night-850));
}

/* ---------- Tab centrate (pagina Orari) ----------
   Due sole voci, centrate: l'attiva è più grande, piena e sottolineata dalla
   riga nel colore del pilastro (--tab-acc); l'inattiva più piccola e defilata.
   Il passaggio è fluido: transizione su dimensione, colore e riga. */
.tab-clean {
  position: relative;
  padding-bottom: .625rem;
  font-family:var(--font-display);
  font-size: clamp(1rem, 4.2vw, 1.375rem);   /* 02/10/2026: più grandi */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;    /* stesso tracking dei titoli in Epic */
  color: var(--color-grey-50);
  transition: font-size var(--duration-medium) ease, color var(--duration-medium) ease;
}
.tab-clean::after {                 /* riga sotto: cresce dal centro */
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 100%; height: 3px;
  border-radius: var(--radius-full);
  background: var(--tab-acc, var(--color-green-500));
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--duration-medium) ease;
}
.tab-clean[aria-selected="true"] {
  font-size: clamp(1.25rem, 5.6vw, 2rem);
  font-weight: 900;
  color: var(--color-sand-50);
}
.tab-clean[aria-selected="true"]::after { transform: translateX(-50%) scaleX(1); }
.tab-clean[aria-selected="false"]:hover::after { transform: translateX(-50%) scaleX(.45); }
@media (prefers-reduced-motion: reduce) { .tab-clean, .tab-clean::after { transition: none; } }

/* Card piano non disponibile: "true ghost" — la card piena sparisce e resta
   un'outline scura che arretra nel fondo; tutti i testi in bianco sporco. */
.card-piano { transition: background var(--duration-moderate) ease, box-shadow var(--duration-moderate) ease; }
.card-piano.is-fantasma {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-night-500);
}
.card-piano.is-fantasma, .card-piano.is-fantasma * { color: var(--color-grey-50); }

/* ---------- Tooltip ⓘ ----------
   Icona piccola in linea + bolla scura sopra. Si apre in hover e focus da
   tastiera (solo CSS); sul touch ci pensa main.js con aria-expanded. */
.tip { position: relative; display: inline-flex; }
.tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem; height: 1.125rem;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-full);
  font-size: .6875rem; font-weight: 700; font-style: italic;
  line-height: 1;
  color: inherit; background: transparent;
  cursor: help;
}
.tip-bubble {
  position: absolute;
  bottom: calc(100% + .625rem);
  left: 50%;
  transform: translate(-58%, 4px);
  width: min(17rem, 74vw);
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-night-850); color: var(--color-sand-50);
  font-size: var(--text-xs); font-weight: 400; line-height: 1.5;
  letter-spacing: normal; text-transform: none;
  box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
  z-index: 30;
}
.tip-bubble::after {          /* freccina, allineata all'icona */
  content: '';
  position: absolute;
  top: 100%; left: 58%;
  border: 6px solid transparent;
  border-top-color: var(--color-night-850);
  transform: translateX(-50%);
}
.tip:hover .tip-bubble,
.tip:focus-within .tip-bubble,
.tip-btn[aria-expanded="true"] + .tip-bubble {
  opacity: 1; pointer-events: auto;
  transform: translate(-58%, 0);
}
@media (prefers-reduced-motion: reduce) { .tip-bubble { transition: none; } }

/* ---------- Accordion <details> ---------- */
details.acc summary { cursor: pointer; list-style: none; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary .acc-icon { transition: transform var(--duration-base) ease; }
details.acc[open] summary .acc-icon { transform: rotate(45deg); }

/* ---------- Timetable ----------
   Ogni slot porta la shade della propria disciplina in --disc (da orari.json):
   bordo sinistro pieno + velo di colore. Verdi = Performance, acqua = Fitness. */
.slot {
  border-left: 4px solid var(--disc, var(--color-green-500));
  background: var(--disc-bg, transparent);
  transition: opacity var(--duration-base) ease, transform var(--duration-base) ease, background var(--duration-base) ease;
}
.slot:hover { background: var(--disc-bg-hover, var(--disc-bg)); }
/* Nome disciplina nella shade (scurita con ink per restare leggibile su paper) */
.slot-disc { color: var(--disc-txt, var(--color-night-850)); }
.slot.is-hidden { opacity: .12; pointer-events: none; }

/* ---------- Riduzione movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .carousel-track { animation: none; }
  .carousel-servizi { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html { scroll-behavior: auto; }
}

/* ---------- Foto ottimizzate (immagine() in inc/funzioni.php) ----------
   <picture> non deve creare un box suo: le classi stanno sull'<img>. */
picture.foto { display: contents; }

/* ---------- Hero home: trama statica sotto il WebGL ----------
   Si vede subito (e resta da sola se WebGL non parte: GPU software, Save-Data,
   prefers-reduced-motion). Stesso tile da 340px dello shader, ancorato in basso
   a sinistra come gl_FragCoord: quando il canvas entra in dissolvenza i glifi
   combaciano. */
#hero-canvas::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/pattern-tile.svg') left bottom / 340px auto repeat;
  opacity: .32;
}
#hero-canvas canvas { position: relative; opacity: 0; transition: opacity 1.2s ease; }
#hero-canvas canvas.is-pronto { opacity: 1; }

/* ---------- Pausa animazioni (partials/pausa-animazioni.php + main.js) ----------
   .movimento-off su <html>: ferma tutto ciò che si muove da solo. */
.movimento-off .marquee-track,
.movimento-off .carousel-track,
.movimento-off .video-track { animation-play-state: paused !important; }
.btn-movimento {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-night-600);
  background: rgb(var(--rgb-night-850) / .9); color: var(--color-grey-50);
  backdrop-filter: blur(4px);
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.btn-movimento:hover { background: var(--color-green-500); color: var(--color-night-850); border-color: var(--color-green-500); }
.btn-movimento .icona-play { display: none; }
.btn-movimento[aria-pressed="true"] .icona-play { display: block; }
.btn-movimento[aria-pressed="true"] .icona-pausa { display: none; }
/* con "riduci movimento" di sistema non c'è niente da fermare */
@media (prefers-reduced-motion: reduce) { .btn-movimento { display: none; } }

/* ---------- Galleria disciplina (partials/galleria.php) ----------
   Nastro di foto alla stessa altezza (16 / 20 / 24 rem), larghezza dalla foto.
   Il padding a destra vale un gap: così -50% sposta esattamente un gruppo + un gap
   e il giro riparte senza scatti. */
.galleria-fila { position: relative; overflow: hidden; outline: none; }
/* anello di focus sopra le foto (il nastro animato starebbe sopra un outline normale) */
.galleria-fila:focus-visible::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 3px solid var(--color-teal-500); }
.galleria-track {
  display: flex; gap: 1rem; width: max-content; margin: 0; padding: 0 1rem 0 0; list-style: none;
  animation: galleria-scorri var(--durata, 60s) linear infinite;
}
.galleria-track > li { flex: none; height: 16rem; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-sand-200); }
.galleria-track img { display: block; height: 100%; width: auto; max-width: none; object-fit: cover; }
@media (min-width: 640px)  { .galleria-track > li { height: 20rem; } }
@media (min-width: 1024px) { .galleria-track > li { height: 24rem; } }
@keyframes galleria-scorri { to { transform: translateX(-50%); } }
/* ferma: sopra col mouse, focus da tastiera, fuori schermo (main.js), pausa del sito */
.galleria-fila:hover .galleria-track,
.galleria-fila:focus-within .galleria-track,
.galleria-fila.is-fuori .galleria-track,
.movimento-off .galleria-track { animation-play-state: paused; }
/* 1–2 foto: niente nastro, foto centrate (scorribili a mano se non ci stanno) */
.galleria-fila.is-ferma { overflow-x: auto; }
.galleria-fila.is-ferma .galleria-track { animation: none; margin-inline: auto; padding: 0 1rem; }
/* riduci movimento: nastro fermo, si scorre a mano; via le copie del giro infinito */
@media (prefers-reduced-motion: reduce) {
  .galleria-fila { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
  .galleria-track { animation: none; padding: 0 1rem; }
  .galleria-track > li { scroll-snap-align: start; }
  .galleria-track > .galleria-copia { display: none; }
}

/* ---------- Mega menu: chiuso con Esc (main.js) ---------- */
.mega-chiuso .mega-pannello { visibility: hidden !important; opacity: 0 !important; }

/* ---------- Form prova: card, campi, chip, esito, trappola anti-bot (form-prova.php, form.js) ----------
   Card chiara (anche sopra il blocco scuro di form-sezione). Bordi dei campi #857E70 (3,9:1 sul bianco). */
.form-card { background: var(--color-sand-25); color: var(--color-night-850); border: 1px solid var(--color-sand-150); border-radius: var(--radius-3xl); padding: 1.5rem; box-shadow: var(--shadow-float); }
@media (min-width: 640px) { .form-card { padding: 2.25rem; } }
/* 05/10/2026: il form non esce mai dalla card, a nessuna larghezza e con qualsiasi ingrandimento del testo
   (anche quello dei browser dentro Instagram/Facebook su Android, che ingrandisce i caratteri senza
   cambiare i rem). La colonna del form non si allarga più per il bottone (minmax(0, 1fr)); è il bottone
   ad adattarsi: form.js prova, nell'ordine, spaziatura più stretta, padding minimo, senza freccia e
   solo come ultima risorsa lo manda a capo. Il testo resta sempre 14px. */
.form-card { container-type: inline-size; }
@media (max-width: 399px) { .form-card { padding: 1.25rem; } }
.form-prova { grid-template-columns: minmax(0, 1fr); }
.form-prova > * { min-width: 0; }
.form-prova [type="submit"] { max-width: 100%; }
.form-prova [type="submit"].cta-1 { padding-inline: .875rem; gap: .375rem; letter-spacing: .02em; }
.form-prova [type="submit"].cta-2 { padding-inline: .75rem; letter-spacing: 0; }
.form-prova [type="submit"].cta-3 > [aria-hidden="true"] { display: none; }
.form-prova [type="submit"].cta-4 { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.3; }
@media (scripting: none) { .form-prova [type="submit"] { white-space: normal; text-wrap: balance; text-align: center; } }
/* CAMPO (02/10/2026, design system): un solo componente per il form del sito (card chiara) e per il
   percorso guidato (dialog scuro). I colori sono semantici: li decide la modalità del contenitore
   (.form-card = data-tema="chiaro", .trova-dlg = data-tema="scuro"). */
.campo label { display: block; margin-bottom: .45rem; font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.campo input, .campo textarea {
  width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-card); color: var(--color-fg); font-size: var(--text-control);
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.campo input { height: 3.5rem; padding: 0 1.1rem; }
.campo textarea { padding: .9rem 1.1rem; min-height: 9rem; max-height: 24rem; resize: vertical; field-sizing: content; }
.campo input:hover, .campo textarea:hover { border-color: var(--color-border-hover); }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 32%, transparent); }
.campo input[aria-invalid="true"] { border-color: var(--color-error-field); border-width: 2px; }
.form-chip { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-chip legend { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.form-chip label { position: relative; display: inline-flex; cursor: pointer; }
.form-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form-chip span {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: var(--radius-full); border: 1px solid var(--color-sand-600);
  font-size: var(--text-sm-plus); font-weight: 500; transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.form-chip label:hover span { border-color: var(--color-night-850); }
.form-chip input:checked + span { background: var(--color-night-850); border-color: var(--color-night-850); color: var(--color-grey-50); }
.form-chip span svg { color: var(--color-green-800); }
.form-chip input:checked + span svg { color: var(--color-green-500); }
.form-chip input:focus-visible + span { outline: 3px solid var(--color-green-800); outline-offset: 2px; }
/* 05/10/2026: su schermi stretti le scelte riempiono la riga (niente righe a zig-zag): ogni chip si allarga
   quanto serve, quindi una per riga se non ci stanno in due, oppure due o tre righe piene e pari.
   La misura è quella della card (container query su .form-card), non dello schermo. */
@container (max-width: 34rem) {
  .form-chip > .flex-wrap > label { flex: 1 1 auto; }
  .form-chip > .flex-wrap span { width: 100%; justify-content: center; text-align: center; }
}
.form-card p, .form-card legend, .form-card .campo label, .form-aggiungi { text-wrap: pretty; }
/* "Aggiungi un messaggio" (02/10/2026): apre il campo facoltativo del form (form.js) */
.form-aggiungi { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; padding: .25rem 0; font-weight: 600; text-align: left; color: var(--color-fg); }
.form-aggiungi-ico { flex: none; }
.form-aggiungi[hidden] { display: none; }
.form-aggiungi-ico { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); color: var(--color-fg-accent); transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); }
.form-aggiungi-ico svg { width: .9rem; height: .9rem; }
.form-aggiungi:hover .form-aggiungi-ico { background: var(--color-night-850); border-color: var(--color-night-850); color: var(--color-grey-50); }
.form-aggiungi:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
.form-esito { display: flex; gap: .75rem; align-items: flex-start; border-radius: var(--radius-lg); padding: 1rem 1.25rem; font-weight: 600; margin-bottom: 1.25rem; }
.form-esito.is-ok { background: var(--color-green-75); color: var(--color-night-850); border: 1px solid var(--color-green-350); margin-bottom: 0; padding: 1.5rem; font-size: var(--text-base-plus); }
.form-esito.is-ok::before { content: ''; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--color-green-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5' stroke='%2317211D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.1rem no-repeat; }
.form-esito.is-errore { background: var(--color-clay-50); color: var(--color-night-850); border: 1px solid var(--color-clay-350); }
.form-esito:focus { outline: 2px solid var(--color-green-800); outline-offset: 3px; }
.form-errore { margin-top: .5rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-error-fg); }
.form-errore::before { content: '⚠ '; }
.form-trappola { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pagine legali (partials/policy.php) ---------- */
.policy--testo h2 { margin-top: 2.5rem; font-family:var(--font-display); font-size: var(--text-lg); text-transform: uppercase; letter-spacing: .03em; }
.policy--testo p, .policy--testo ul { margin-top: 1rem; line-height: 1.65; }
.policy--testo ul { list-style: disc; padding-left: 1.25rem; }
.policy--testo li + li { margin-top: .5rem; }
.policy--testo a { text-decoration: underline; text-underline-offset: 4px; color: var(--color-green-800); }

/* Loader "anello": gli stili sono INLINE in partials/head.php (02/10/2026), così valgono già al
   primo disegno, prima che arrivi questo file (prima si vedeva per un attimo la O enorme, nera su bianco). */

/* ---------- Badge "Anteprima" (solo con il cookie now_anteprima, fino al lancio) ---------- */
.anteprima-badge { white-space: nowrap;
  position: fixed; left: 50%; bottom: 1rem; z-index: 9000; transform: translateX(-50%);
  max-width: calc(100vw - 2rem); padding: .5rem 1rem; border-radius: var(--radius-full);
  background: var(--color-sand-50); color: var(--color-night-850); font-size: var(--text-sm); font-weight: 600;
  box-shadow: var(--shadow-2); text-align: center;
}
.anteprima-badge a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Card disciplina (partials/card-disciplina.php): ruota hero + pagine pilastro ---------- */
.card-disc-foto { border-radius: calc(1.5rem - 1px) calc(1.5rem - 1px) 0 0; }
.card-disc-nome { font-size: var(--text-lg); }
/* nella ruota della hero le card sono più piccole: nome più compatto, frase solo da sm */
.carousel-servizi .card-disc-nome { font-size: var(--text-control); }
.carousel-servizi .card-disc-testo { display: none; }
@media (min-width: 640px) {
  .carousel-servizi .card-disc-nome { font-size: var(--text-base-plus); }
  .carousel-servizi .card-disc-testo { display: block; }
}
/* "Coming soon" come nastro diagonale nell'angolo in alto a destra della foto */
.card-stripe {
  /* geometria: il centro della banda sta a ~53px dall'angolo su entrambi i lati, così il
     tratto visibile (≈150px) contiene tutta la scritta anche sulle card piccole della ruota */
  position: absolute; top: 2.85rem; right: -3.15rem; z-index: 2;
  width: 14rem; padding: .3rem 0 .3rem .06em; transform: rotate(45deg);   /* 01/10: centro banda a ~62px dall'angolo, testo centrato nel tratto visibile */
  /* RIBBON (atomo) · Figma: Ribbon / Coming soon. Nastro olografico col filo bianco */
  background: var(--gradient-holo-stripe); background-size: 220% 100%; animation: stripe-holo 6s ease-in-out infinite alternate;
  color: var(--color-night-850); border-top: 2px solid rgb(var(--rgb-white) / .85); border-bottom: 2px solid rgb(var(--rgb-white) / .85);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.2;
  text-align: center; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  box-shadow: var(--shadow-1);
  pointer-events: none;
}
@keyframes stripe-holo { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .card-stripe { animation: none; } }
.movimento-off .card-stripe { animation-play-state: paused; }
/* tooltip dentro le card scure: bolla chiara */
.card-disc .tip-bubble { background: var(--color-sand-50); color: var(--color-night-850); }
.card-disc .tip-bubble::after { border-top-color: var(--color-sand-50); }

/* Card intera cliccabile (pagine pilastro): il link "Scopri di più" allarga la sua area a
   tutta la card con ::after. Un solo link (niente doppioni per screen reader), il tooltip ⓘ
   resta sopra e cliccabile. L'anello di focus si disegna sulla card intera. */
.card-disc .card-link { outline: none; }
.card-disc .card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-2xl); }
.card-disc .card-link:focus-visible::after { outline: 3px solid currentColor; outline-offset: 3px; }
.card-disc .tip { z-index: 2; }
.card-disc:has(.card-link) { cursor: pointer; }

/* Pallino di stato: acceso a intermittenza = prova gratuita disponibile (colore dell'area);
   fermo e grigio = in arrivo / su prenotazione. Si ferma con "Pausa animazioni" e
   con "riduci movimento" (resta acceso). */
.stato-punto { flex: none; width: .5rem; height: .5rem; border-radius: var(--radius-full); background: var(--color-grey-500); }
.stato-punto.is-live { background: currentColor; animation: stato-luce 1.8s ease-in-out infinite; }
@keyframes stato-luce {
  0%, 100% { opacity: .35; box-shadow: 0 0 0 0 transparent; }
  50%      { opacity: 1;   box-shadow: 0 0 .5rem .15rem currentColor; }
}
.movimento-off .stato-punto.is-live { animation: none; }
@media (prefers-reduced-motion: reduce) { .stato-punto.is-live { animation: none; } }

/* Nastro verde della home: discipline con la loro icona, in Golos (il font dei testi) */
.marquee-discipline .marquee-track { animation-duration: 70s; }
.marquee-discipline .marquee-voce { display: inline-flex; align-items: center; gap: .6rem; margin-right: 2.25rem; vertical-align: middle; }

/* ---------- Riquadri home con foto (index.php, sezione 5) ----------
   La foto sta sotto il testo (z 0) e sfuma con una maschera verso la zona del testo:
   il testo resta sempre sul colore pieno del riquadro (contrasti invariati). */
.box-foto { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.box-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-lazy) ease; }
a.group:hover .box-foto img { transform: scale(1.04); }

/* prova gratuita: telefono = foto leggera sotto tutto; da md foto piena a destra */
.box-foto--prova { opacity: .3; -webkit-mask-image: linear-gradient(to top, var(--color-black), transparent 85%); mask-image: linear-gradient(to top, var(--color-black), transparent 85%); }
.box-foto--prova img { object-position: center 45%; }   /* 01/10: foto di gruppo Summer Games */   /* 01/10: atleta col manubrio sopra la testa (SG38) */
@media (min-width: 768px) {
  .box-foto--prova { left: auto; width: 56%; opacity: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .5) 25%, var(--color-black) 55%);
            mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .5) 25%, var(--color-black) 55%); }
}

/* orari (01/10/2026): foto sul lato destro, piena, che sfuma verso il testo a sinistra.
   Telefono: foto leggera sotto tutto (il testo occupa tutta la larghezza). */
.box-foto--orari { opacity: .28; }
.box-foto--orari img { object-position: 45% 35%; }   /* 01/10: coach che scrive il WOD alla lavagna */
@media (min-width: 768px) {
  .box-foto--orari { left: 44%; opacity: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .55) 35%, var(--color-black) 70%);
            mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .55) 35%, var(--color-black) 70%); }
  .box-foto--orari img { filter: brightness(.82); }
  .box-foto--orari img { object-position: 40% 35%; }
}

/* membership: bicromia — foto in bianco e nero fusa (multiply) nel verde, sul lato destro.
   Due maschere intersecate: sfuma verso il testo (sinistra) e verso il basso, così la
   freccia e "Scopri i piani" restano sul verde pieno. Telefono: più leggera. */
.box-foto--membership { mix-blend-mode: multiply; opacity: .5;
  /* 02/10/2026: foto su tutto il riquadro, sfumata in diagonale dall'angolo in alto a sinistra
     (titolo) all'angolo in basso a destra: niente più bordo netto della foto */
  -webkit-mask-image: linear-gradient(to bottom right, transparent 30%, rgb(var(--rgb-black) / .45) 55%, var(--color-black) 85%);
          mask-image: linear-gradient(to bottom right, transparent 30%, rgb(var(--rgb-black) / .45) 55%, var(--color-black) 85%); }
.box-foto--membership img { object-position: 35% 60%; filter: grayscale(1) contrast(1.05) brightness(1.7); transform: scale(1.22); transform-origin: 40% 65%; }
a.group:hover .box-foto--membership img { transform: scale(1.27); }
/* foto per pagina (box-membership-{pagina}.jpg): già verticali e inquadrate, zoom leggero */
.box-foto--membership.box-foto--pagina img { object-position: 50% 40%; transform: scale(1.04); transform-origin: 70% 60%; }
a.group:hover .box-foto--membership.box-foto--pagina img { transform: scale(1.09); }
@media (min-width: 768px) { .box-foto--membership { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .box-foto img { transition: none; } a.group:hover .box-foto img { transform: none; } }

/* ---------- Recensioni (home) ----------
   Taglio a ~7 righe solo con JS attivo (classe .recensioni--js messa da main.js):
   senza script le recensioni si leggono intere. La sfumatura in fondo segnala che continua. */
.recensioni--js .recensione-testo.is-tagliata {
  max-height: calc(1.6em * 7 + 1.5rem);   /* 7 righe + spazio tra paragrafi */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 70%, transparent);
          mask-image: linear-gradient(to bottom, var(--color-black) 70%, transparent);
}
.recensione-altro:focus-visible { outline: 2px solid var(--color-night-850); outline-offset: 3px; border-radius: 4px; }
#recensioni-scroll:focus-visible { outline: 2px solid var(--color-green-800); outline-offset: 4px; border-radius: var(--radius-xl); }

/* ---------- Bordi sfumati delle file orizzontali (.fila-sfumata) ----------
   Recensioni, coach e reel: le card non vengono tagliate di netto sul bordo ma sfumano
   nel colore della sezione (--fondo). Veli sopra la fila, non mask-image (le mask in
   Chrome si comportano male con backdrop-filter e con le trasformazioni).
   main.js nasconde il velo sinistro a inizio fila e il destro a fine fila
   (.a-inizio / .a-fine); sui nastri che scorrono da soli restano sempre tutti e due. */
.fila-sfumata { --fondo: var(--color-sand-50); --sfuma: 2.5rem; position: relative; }
.fila-sfumata--ink { --fondo: var(--color-night-850); }
.fila-sfumata::before, .fila-sfumata::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 3; width: var(--sfuma);
  pointer-events: none; transition: opacity var(--duration-medium) ease;
}
.fila-sfumata::before { left: 0;  background: linear-gradient(to right, var(--fondo), transparent); }
.fila-sfumata::after  { right: 0; background: linear-gradient(to left,  var(--fondo), transparent); }
.fila-sfumata.a-inizio::before, .fila-sfumata.a-fine::after { opacity: 0; }
@media (min-width: 640px)  { .fila-sfumata { --sfuma: 4.5rem; } }
@media (min-width: 1024px) { .fila-sfumata { --sfuma: 7rem; } }
/* 02/10/2026: su telefono niente sfumature ai lati (le file si scorrono col dito) */
@media (max-width: 767px) { .fila-sfumata::before, .fila-sfumata::after { display: none; } }

/* ---------- File di reel video (partials/reel-fila.php) ----------
   Da md: nastro in loop (due metà uguali, translateX -50%; il padding a destra vale un gap).
   Sotto md e con "riduci movimento": scroller a scatti, copie nascoste. */
.video-fila { overflow: hidden; outline: none; }
.video-track {
  display: flex; align-items: flex-start; gap: 1rem; width: max-content; margin: 0; padding: .75rem 1rem 2.25rem 0; list-style: none;
  animation: video-scorri var(--durata, 60s) linear infinite;
}
.video-card { flex: none; width: 13rem; }
@media (min-width: 1024px) { .video-card { width: 15rem; } .video-track { gap: 1.25rem; padding-right: 1.25rem; } }
/* sfalsamento verticale alternato, come una griglia di feed */
.video-card:nth-child(even) { transform: translateY(1.5rem); }
@keyframes video-scorri { to { transform: translateX(-50%); } }
.video-fila:hover .video-track,
.video-fila:focus-within .video-track,
.video-fila.is-fuori .video-track { animation-play-state: paused; }
.video-fila .reel:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
/* 1–3 video: fermi e centrati */
.video-fila.is-ferma { overflow-x: auto; }
.video-fila.is-ferma .video-track { animation: none; margin-inline: auto; padding-left: 1rem; }
@media (max-width: 767px) {
  .video-fila { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none; }
  .video-fila::-webkit-scrollbar { display: none; }
  .video-track { animation: none; padding-left: 1rem; }
  .video-card { scroll-snap-align: start; }
  .video-copia { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .video-fila { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
  .video-track { animation: none; padding-left: 1rem; }
  .video-card { scroll-snap-align: start; }
  .video-copia { display: none; }
}

/* ---------- Trova la tua disciplina (partials/trova.php + assets/js/trova.js) ----------
   Riquadro in home e percorso a tutto schermo (<dialog>), tutto in dark mode.
   Scelta attiva = fondo green + testo ink (7,7:1). Superfici: ink #17211D,
   pannello #1B2621, card #1E2A24, bordi edge #2C3833. */
.trova-banner, .trova-kids { background-color: var(--color-night-800); }
.trova--js .trova-senza-js { display: none; }
.trova-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
@media (min-width: 640px) { .trova-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } }
.trova-opt {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .25rem; min-height: 6rem;
  padding: 1rem 1rem 1.125rem; text-align: left; border-radius: var(--radius-xl);
  border: 1px solid var(--color-night-600); background: var(--color-night-750); color: var(--color-grey-50);
  transition: transform var(--duration-medium) var(--ease-spring), background var(--duration-base), border-color var(--duration-base), color var(--duration-base);
}
.trova-opt:hover { transform: translateY(-3px); border-color: var(--color-green-500); }
.trova-opt:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
.trova-opt-ico { color: var(--color-green-500); margin-bottom: .5rem; }
.trova-opt-t { font-weight: 600; line-height: 1.25; }

.trova-opt-ck {
  position: absolute; right: .75rem; top: .75rem; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full);
  display: grid; place-items: center; border: 1.5px solid currentColor; opacity: .5;
}
.trova-opt-ck svg { width: .8rem; height: .8rem; opacity: 0; }
.trova-opt[aria-pressed="true"] { background: var(--color-green-500); border-color: var(--color-green-500); color: var(--color-night-850); }
.trova-opt[aria-pressed="true"] .trova-opt-ico { color: var(--color-night-850); }
.trova-opt[aria-pressed="true"] .trova-opt-ck { opacity: 1; background: var(--color-night-850); border-color: var(--color-night-850); color: var(--color-green-500); }
.trova-opt[aria-pressed="true"] .trova-opt-ck svg { opacity: 1; }
.trova-opt[aria-pressed="true"] .trova-opt-ico svg { animation: trova-pop .5s var(--ease-spring); }
@keyframes trova-pop { 40% { transform: scale(1.18) rotate(-6deg); } }
[data-trova-apri][aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* dialog a tutto schermo */
.trova-dlg {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; color: var(--color-grey-50); overflow-y: auto; overscroll-behavior: contain;
  /* 02/10/2026: pattern leggero con le O sullo sfondo, così la barra in basso (piena) si stacca */
  background: linear-gradient(rgb(var(--rgb-night-850) / .86), rgb(var(--rgb-night-850) / .86)), url('../img/pattern-tile.svg') left top / 340px auto repeat, var(--color-night-850);
}
.trova-dlg::backdrop { background: rgb(var(--rgb-night-950) / .7); }
.trova-dlg[open] { animation: trova-apri .45s var(--ease-out); }
@keyframes trova-apri { from { opacity: 0; transform: translateY(24px); } }
html.trova-aperto { overflow: hidden; }
.trova-dlg-top {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: .75rem max(1rem, calc((100vw - 80rem) / 2 + 2rem)); background: rgb(var(--rgb-night-850) / .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-night-600);
}
.trova-circ {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); display: grid; place-items: center;
  border: 1px solid var(--color-night-600); background: var(--color-night-750); color: var(--color-grey-50); transition: transform var(--duration-medium), background var(--duration-base), color var(--duration-base);
}
.trova-circ:hover { transform: scale(1.06); background: var(--color-green-500); border-color: var(--color-green-500); color: var(--color-night-850); }
.trova-circ:focus-visible, .trova-link:focus-visible, .trova-sum:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
.trova-circ[disabled] { opacity: .3; pointer-events: none; }
.trova-pbar { display: flex; align-items: center; gap: 1rem; max-width: 34rem; width: 100%; justify-self: center;
  font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.trova-pbar > span:first-child { white-space: nowrap; }
.trova-segs { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: .375rem; }
.trova-segs i { position: relative; height: .3rem; border-radius: var(--radius-full); background: var(--color-night-600); overflow: hidden; }
.trova-segs i::after { content: ''; position: absolute; inset: 0; background: var(--color-green-500); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-spring); }
.trova-segs i.is-fatta::after { transform: none; }

.trova-dlg-main {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start;
  max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 8rem;
}
@media (min-width: 1024px) { .trova-dlg-main { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2.5rem; padding: 2.5rem 2rem 4rem; } }
.trova-panel { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
@media (min-width: 1024px) { .trova-panel { min-height: 34rem; padding: 2.25rem; border: 1px solid var(--color-night-600); border-radius: var(--radius-3xl); background: var(--color-night-800); } }
.trova-step { display: flex; flex-direction: column; gap: 1.25rem; animation: trova-in .5s var(--ease-out); }
.trova-step.is-indietro { animation-name: trova-in-indietro; }
@keyframes trova-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes trova-in-indietro { from { opacity: 0; transform: translateX(-32px); } }
.trova-step h2:focus { outline: none; }
.trova-scelte { display: flex; flex-direction: column; gap: .625rem; }
.trova-scelta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.1rem 1.25rem;
  text-align: left; border: 1px solid var(--color-night-600); border-radius: var(--radius-lg); background: var(--color-night-750); color: var(--color-grey-50);
  font-size: var(--text-base-plus); font-weight: 600; line-height: 1.3;
  transition: transform var(--duration-medium) var(--ease-spring), background var(--duration-base), border-color var(--duration-base), color var(--duration-base);
}
.trova-scelta:hover { transform: translateX(6px); border-color: var(--color-green-500); }
.trova-scelta:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
.trova-scelta .pallino { flex: none; position: relative; width: 1.35rem; height: 1.35rem; border-radius: var(--radius-full); border: 1.5px solid currentColor; opacity: .55; }
.trova-scelta .pallino::after { content: ''; position: absolute; inset: 3px; border-radius: var(--radius-full); background: currentColor; transform: scale(0); transition: transform var(--duration-moderate) var(--ease-spring); }
.trova-scelta[aria-checked="true"] { background: var(--color-green-500); border-color: var(--color-green-500); color: var(--color-night-850); }
.trova-scelta[aria-checked="true"] .pallino { opacity: 1; }
.trova-scelta[aria-checked="true"] .pallino::after { transform: none; }
.trova-cura {
  display: flex; gap: .875rem; align-items: center; padding: .875rem 1.125rem .875rem .875rem; border-radius: var(--radius-lg);
  background: var(--color-night-750); border: 1px solid var(--color-night-600); color: var(--color-grey-50); animation: trova-in .4s ease;
}
.trova-cura-ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background: var(--color-green-500); color: var(--color-night-850); }
.trova-cura-ico svg { width: 1.25rem; height: 1.25rem; }
.trova-nav { display: none; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
@media (min-width: 1024px) { .trova-nav { display: flex; } }
.trova-link { display: inline-flex; gap: .5rem; align-items: center; padding: .6rem .25rem; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgb(var(--rgb-green-500) / .6); }
.trova-link:hover { text-decoration-color: var(--color-green-500); color: var(--color-green-500); }
.trova-dlg .btn-primary[disabled] { opacity: .35; pointer-events: none; }

/* passo contatti: la richiesta parte dal percorso */
.trova-form { display: flex; flex-direction: column; gap: 1.1rem; }
.trova-campi { display: grid; gap: 1rem; }
@media (min-width: 640px) { .trova-campi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trova-campi .campo.is-intera { grid-column: 1 / -1; } }
.trova-check { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--text-sm-plus); }
.trova-check input { margin-top: .2rem; width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--color-green-500); }
.trova-check a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--rgb-green-500) / .7); }
.trova-check input[aria-invalid="true"] { outline: 2px solid var(--color-clay-400); outline-offset: 2px; }
.trova-esito { padding: .9rem 1.1rem; border-radius: var(--radius-lg); background: var(--color-clay-950); border: 1px solid var(--color-clay-700); font-weight: 600; }
.trova-esito:focus { outline: 2px solid var(--color-clay-400); outline-offset: 3px; }
.trova-fatto { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding-block: 1rem; }
.trova-fatto-ico { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-full); background: var(--color-green-500); color: var(--color-night-850); animation: trova-pop .6s var(--ease-spring); }
.trova-fatto-ico svg { width: 2.25rem; height: 2.25rem; }
/* sui passi contatti/inviata non serve la barra "Avanti" su mobile: resta solo il riepilogo */
.trova-dlg.is-contatti .trova-barra .btn-primary { display: none; }

/* caricamento tra l'ultima domanda e il risultato: anello del logo (come il loader del sito) */
.trova-carica { align-items: center; justify-content: center; text-align: center; min-height: 22rem; gap: 1.75rem; }
.trova-anello { width: 5.5rem; height: auto; color: var(--color-green-500); }
.trova-anello .ring { transform-box: fill-box; transform-origin: 50% 50%; animation: now-spin 1.6s var(--ease-loader) .6s infinite; }
.trova-anello .half { animation: now-form .65s var(--ease-pop) both; }
.trova-anello .h1 { --dx: -60px; }
.trova-anello .h2 { --dx: 60px; }
.trova-carica-frase { font-family:var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: 1.1rem; min-height: 1.5em; }
.trova-carica-frase.is-nuova { animation: trova-frase .45s var(--ease-out); }
@keyframes trova-frase { from { opacity: 0; transform: translateY(8px); } }

/* "Mi interessa" ↔ "Nella scheda" */
.trova-add {
  display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem .6rem .6rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-night-500); background: transparent; color: var(--color-grey-50); font-weight: 600; font-size: var(--text-sm-plus);
  transition: background var(--duration-base), border-color var(--duration-base), color var(--duration-base), transform var(--duration-medium) var(--ease-spring);
}
.trova-add:hover { border-color: var(--color-green-500); transform: translateY(-2px); }
.trova-add:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
.trova-add-ico { position: relative; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--radius-full); background: var(--color-night-600); color: var(--color-green-500); }
.trova-add-ico svg { width: .95rem; height: .95rem; }
.trova-add-ico .ok, .trova-add-on { display: none; }
.trova-add[aria-pressed="true"] { background: var(--color-green-500); border-color: var(--color-green-500); color: var(--color-night-850); }
.trova-add[aria-pressed="true"] .trova-add-ico { background: var(--color-night-850); animation: trova-pop .5s var(--ease-spring); }
.trova-add[aria-pressed="true"] .trova-add-ico .piu, .trova-add[aria-pressed="true"] .trova-add-off { display: none; }
.trova-add[aria-pressed="true"] .trova-add-ico .ok, .trova-add[aria-pressed="true"] .trova-add-on { display: inline; }
.trova-add.is-grande { padding: .75rem 1.4rem .75rem .75rem; font-size: var(--text-control); text-transform: uppercase; letter-spacing: .05em; }
.trova-alt-card.is-addon { border-style: dashed; }

/* carrello della scheda */
.trova-carrello { margin-top: .75rem; padding-top: 1rem; border-top: 1.5px dashed var(--color-night-600); }
.trova-carrello-t { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .6rem; }
.trova-carrello ul { display: flex; flex-direction: column; gap: .4rem; }
.trova-carrello li { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem .7rem; border-radius: var(--radius-md); background: var(--color-night-750); font-weight: 600; animation: trova-in .35s ease; }
.trova-carrello-ico { display: grid; place-items: center; }
.trova-togli { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); color: var(--color-grey-50); opacity: .7; }
.trova-togli:hover { opacity: 1; background: var(--color-night-600); }
.trova-togli:focus-visible { outline: 2px solid var(--color-green-500); outline-offset: 2px; opacity: 1; }
.trova-togli svg { width: .9rem; height: .9rem; }

/* scheda (riepilogo) */
.trova-scheda {
  position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; overflow: hidden;
  border: 1px solid var(--color-night-600); border-radius: var(--radius-2xl); background: var(--color-night-800);
}
@media (min-width: 1024px) { .trova-scheda { position: sticky; top: 5.5rem; } }
.trova-scheda-testa { display: flex; align-items: center; gap: .75rem; padding-bottom: 1.1rem; border-bottom: 1.5px dashed var(--color-night-600); }
.trova-righe { margin: 0; }
.trova-righe > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .7rem 0; border-bottom: 1px solid var(--color-night-600); font-size: var(--text-sm-plus); }
.trova-righe dt { opacity: .75; }
.trova-righe dd { margin: 0; min-width: 0; font-weight: 600; }
.trova-righe dd.is-vuota { font-weight: 400; opacity: .35; }
.trova-righe dd.is-nuova { animation: trova-flash 1s ease; }
@keyframes trova-flash { 0% { background: var(--color-night-650); transform: translateX(6px); } 100% { background: transparent; transform: none; } }
.trova-timbro {
  margin-left: auto; flex: none; padding: .25rem .65rem; border: 2px solid var(--color-green-500); border-radius: var(--radius-md); font-size: var(--text-xs);
  font-family:var(--font-display); font-weight: 900; text-transform: uppercase; color: var(--color-green-500);
  transform: rotate(-12deg) scale(2); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-spring), opacity var(--duration-base);
}
.trova-scheda.is-fatta .trova-timbro { transform: rotate(-12deg) scale(1); opacity: 1; }

/* mobile: barra in basso + tendina */
.trova-barra, .trova-velo { display: none; }
@media (max-width: 1023px) {
  .trova-barra {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; align-items: center; gap: .75rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); background: var(--color-night-700); border-top: 1px solid rgb(var(--rgb-green-500) / .35);
    box-shadow: 0 -18px 40px -12px rgb(var(--rgb-black) / .75);
  }
  .trova-barra .btn-primary { flex: none; padding-inline: 1.25rem; }
  .trova-sum { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .25rem 0; color: var(--color-grey-50); }
  .trova-dlg.is-tendina .trova-chev { transform: rotate(180deg); }
  .trova-velo { display: block; position: fixed; inset: 0; z-index: 10; background: rgb(var(--rgb-black) / .5); opacity: 0; pointer-events: none; transition: opacity var(--duration-moderate); }
  .trova-dlg.is-tendina .trova-velo { opacity: 1; pointer-events: auto; }
  .trova-scheda {
    position: fixed; left: 0; right: 0; bottom: var(--barra, 4.75rem); z-index: 11; max-height: calc(100dvh - 10rem); overflow-y: auto;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; border-bottom: 0; transform: translateY(calc(100% + var(--barra, 4.75rem)));
    transition: transform var(--duration-slower) var(--ease-sheet); visibility: hidden;
  }
  .trova-dlg.is-tendina .trova-scheda { transform: none; visibility: visible; }
}

/* risultato */
.trova-ris { display: grid; gap: 1.25rem; }
.trova-ris-card { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--color-night-600); border-radius: var(--radius-2xl); background: var(--color-night-750); color: var(--color-grey-50); }
@media (min-width: 640px) { .trova-ris-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.trova-ris-media { position: relative; min-height: 12rem; background: var(--color-night-700); }
@media (min-width: 640px) { .trova-ris-media { min-height: 16rem; } }
.trova-ris-media video, .trova-ris-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trova-ris-corpo { padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.trova-tag { display: inline-flex; padding: .3rem .7rem; border-radius: var(--radius-full); border: 1px solid var(--color-night-500); font-size: var(--text-sm); }
.trova-alt { display: grid; gap: .75rem; }
@media (min-width: 640px) { .trova-alt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trova-alt-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--color-night-600); border-radius: var(--radius-lg); background: var(--color-night-800); }
@media (prefers-reduced-motion: reduce) {
  .trova-step, .trova-dlg[open], .trova-cura, .trova-righe dd.is-nuova, .trova-opt[aria-pressed="true"] .trova-opt-ico svg, .trova-fatto-ico,
  .trova-anello .ring, .trova-anello .half, .trova-carica-frase.is-nuova, .trova-add-ico, .trova-carrello li { animation: none !important; }
  .trova-add { transition: none !important; }
  .trova-opt, .trova-scelta, .trova-scheda, .trova-timbro { transition: none !important; }
}

/* ---------- Pagina Contatti (contatti.php, 30/09/2026) ---------- */
.contatti-foto { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .contatti-foto { aspect-ratio: 5 / 6; } }
.contatti-foto picture, .contatti-foto img { display: block; height: 100%; width: 100%; }

.contatti-canale {
  display: flex; flex-direction: column; height: 100%; padding: 1.5rem; border-radius: var(--radius-2xl); border: 1px solid var(--color-night-600); background: var(--color-night-800);
  transition: transform var(--duration-medium) var(--ease-spring), border-color var(--duration-base);
}
.contatti-canale:hover { transform: translateY(-4px); border-color: var(--color-green-500); }
.contatti-canale:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
.contatti-social {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: var(--radius-full); border: 1px solid var(--color-sand-600);
  font-weight: 600; font-size: var(--text-sm-plus); transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.contatti-social:hover { background: var(--color-night-850); border-color: var(--color-night-850); color: var(--color-grey-50); }
.contatti-social:focus-visible { outline: 3px solid var(--color-green-800); outline-offset: 2px; }
/* sotto sm i canali diventano righe compatte: icona · nome + valore · freccia */
@media (max-width: 639px) {
  .contatti-canale { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--radius-xl); }
  .contatti-canale .cc-ico { grid-row: 1 / 3; }
  .contatti-canale .cc-tit { margin: 0 !important; font-size: var(--text-control); }
  .contatti-canale .cc-nota { display: none; }
  .contatti-canale .cc-val { grid-column: 2; margin: 0 !important; font-size: var(--text-sm-plus); }
  .contatti-canale .cc-cta { grid-column: 3; grid-row: 1 / 3; padding: 0 !important; margin: 0 !important; font-size: var(--text-lg); }
  .contatti-canale .cc-cta-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) { .contatti-canale { transition: none; } }

/* ============================================================
   TEAM (pagina rifatta il 30/09/2026) — team.php + assets/js/team.js
   ============================================================ */
.team-hero-foto { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .team-hero-foto { aspect-ratio: 5 / 6; } }
.team-hero-foto picture, .team-hero-foto img { display: block; height: 100%; width: 100%; }

/* filtro: chip come nel form, versione scura */
.team-filtri { display: flex; flex-wrap: wrap; gap: .5rem; }
.team-filtro {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1.05rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-night-600); background: var(--color-night-800); color: var(--color-grey-50); font-weight: 600; font-size: var(--text-sm-plus); line-height: 1.2;
  transition: background var(--duration-base), border-color var(--duration-base), color var(--duration-base), transform var(--duration-medium) var(--ease-spring);
}
.team-filtro svg { color: var(--color-green-500); }
.team-filtro:hover { border-color: var(--color-green-500); transform: translateY(-2px); }
.team-filtro[aria-pressed="true"] { background: var(--color-green-500); border-color: var(--color-green-500); color: var(--color-night-850); }
.team-filtro[aria-pressed="true"] svg { color: var(--color-night-850); }
.team-filtro:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }

/* griglia e card */
.team-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .team-griglia { gap: 1.25rem; } }
@media (min-width: 1024px) { .team-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.team-griglia > [hidden] { display: none; }
.coach-card {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius-2xl); border: 1px solid var(--color-night-600); background: var(--color-night-800);
  transition: transform var(--duration-slow) var(--ease-spring), border-color var(--duration-base);
}
.coach-card { cursor: pointer; }
.coach-card:hover, .coach-card:focus-within { transform: translateY(-4px); border-color: var(--color-green-500); }
.coach-foto { position: relative; height: 100%; width: 100%; overflow: hidden; }
.coach-foto picture, .coach-foto img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: 50% 20%; }
.coach-card .coach-foto img { transition: transform var(--duration-slowest) var(--ease-out); }
.coach-card:hover .coach-foto img { transform: scale(1.04); }
.coach-card .coach-foto { position: absolute; inset: 0; z-index: -2; }
.coach-card-velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(var(--rgb-night-950) / .95) 0%, rgb(var(--rgb-night-950) / .55) 38%, rgb(var(--rgb-night-950) / 0) 65%); }
.coach-card-ico { position: absolute; top: .75rem; left: .75rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.coach-card-ico > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: rgb(var(--rgb-night-850) / .85); color: var(--color-green-500); border: 1px solid var(--color-night-600); backdrop-filter: blur(6px); }
.coach-card-info { position: absolute; inset: auto 0 0 0; padding: 1rem; }
@media (min-width: 640px) { .coach-card-info { padding: 1.5rem; } .coach-card-ico { top: 1rem; left: 1rem; } }
.coach-card-apri {
  margin-top: .9rem; display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-grey-50);
}
.coach-card-apri svg { color: var(--color-green-500); transition: transform var(--duration-medium); }
.coach-card:hover .coach-card-apri svg { transform: translateX(4px); }
.coach-card-apri::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* tutta la card è cliccabile */
.coach-card-apri:focus-visible { outline: none; }
.coach-card:has(.coach-card-apri:focus-visible) { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
@media (max-width: 639px) {
  .coach-card h3 { font-size: min(1.25rem, 4.6vw); }
  .coach-card .coach-ph-nota { display: none; }
  .coach-card-ico > span { width: 1.75rem; height: 1.75rem; }
  .coach-card-ico svg { width: .875rem; height: .875rem; }
  .coach-card-disc { display: none; } .coach-card-apri span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* segnaposto foto: iniziale grande a contorno */
.coach-ph { display: grid; place-items: center; background-color: var(--color-night-850); }
.coach-ph-lettera {
  font-family:var(--font-display); font-weight: 900; font-size: clamp(6rem, 22vw, 13rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 2px rgb(var(--rgb-green-500) / .55); transform: translateY(-12%);
}
.coach-ph-nota {
  position: absolute; top: .75rem; right: .75rem; padding: .3rem .7rem; border-radius: var(--radius-full); border: 1px dashed var(--color-sand-600);
  font-size: var(--text-2xs); font-weight: 600; color: var(--color-grey-300); background: rgb(var(--rgb-night-850) / .85);
}
@media (min-width: 640px) { .coach-ph-nota { top: 1rem; right: 1rem; } }

/* riquadro "il team cresce" al posto dei segnaposto */
.coach-attesa {
  display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; padding: 1.5rem; border-radius: var(--radius-2xl);
  border: 1px dashed var(--color-sand-600); background: transparent;
}
@media (max-width: 639px) { .coach-attesa { grid-column: 1 / -1; aspect-ratio: auto; padding: 1.25rem; } }

/* scheda coach (dialog) */
.coach-dlg {
  width: min(64rem, calc(100% - 2rem)); max-width: none; max-height: calc(100% - 2rem); margin: auto; padding: 0;
  border: 1px solid var(--color-night-600); border-radius: var(--radius-4xl); background: var(--color-night-850); color: var(--color-grey-50); overflow: hidden; overscroll-behavior: contain;
}
.coach-dlg::backdrop { background: rgb(var(--rgb-night-950) / .75); backdrop-filter: blur(4px); }
.coach-dlg[open] { animation: trova-apri .4s var(--ease-out); }
html.coach-aperto { overflow: hidden; }
.coach-dlg-box { display: grid; max-height: calc(100dvh - 2rem); overflow-y: auto; }
@media (min-width: 768px) { .coach-dlg-box { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.coach-dlg-foto { aspect-ratio: 4 / 3; height: auto; }
@media (min-width: 768px) { .coach-dlg-foto { aspect-ratio: auto; height: auto; min-height: 100%; position: sticky; top: 0; max-height: calc(100dvh - 2rem); } }
.coach-dlg-info { position: relative; padding: 2rem 1.5rem 2.5rem; }
@media (min-width: 768px) { .coach-dlg-info { padding: 3.5rem 3rem 3rem; } }
.coach-dlg-x { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 767px) {
  .coach-dlg { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
  .coach-dlg-box { display: block; max-height: 100dvh; height: 100%; }
  .coach-dlg-x { position: fixed; top: 1rem; right: 1rem; z-index: 2; background: rgb(var(--rgb-night-850) / .9); }
}
@media (prefers-reduced-motion: reduce) {
  .team-filtro, .coach-card, .coach-card .coach-foto img, .coach-card-apri svg { transition: none; }
  .coach-dlg[open] { animation: none; }
}
.coach-dlg-foto .coach-ph-nota { right: auto; left: 1rem; top: 1rem; }

/* ---------- Hero con foto quadrata o verticale (partials/hero-bg.php, 01/10/2026) ----------
   Telefono: foto sotto tutto, leggera. Desktop: attaccata al bordo destro, alta quanto l'hero,
   larga in proporzione (mai oltre il 62%), sfuma a sinistra e in basso. */
.hero-bg-lato-foto { position: absolute; inset: 0; opacity: .32; }
.hero-bg-lato-foto picture, .hero-bg-lato-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-bg-lato-velo { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-night-850) 0%, rgb(var(--rgb-night-850) / .2) 60%, rgb(var(--rgb-night-850) / 0) 100%); }
@media (min-width: 1024px) {
  .hero-bg-lato-foto {
    left: auto; width: auto; height: 100%; aspect-ratio: calc(var(--hero-ratio, 1) * 1.15); max-width: 62%; opacity: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .5) 28%, var(--color-black) 62%), linear-gradient(to top, transparent 0, var(--color-black) 30%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .5) 28%, var(--color-black) 62%), linear-gradient(to top, transparent 0, var(--color-black) 30%);
            mask-composite: intersect;
  }
  .hero-bg-lato-velo { background: linear-gradient(to right, var(--color-night-850) 0%, rgb(var(--rgb-night-850) / .55) 45%, rgb(var(--rgb-night-850) / 0) 70%); }
}

/* Team: foto dell'hero che si alternano (4 foto, 5 s ciascuna, dissolvenza) — 01/10/2026 */
.team-hero-slide { position: absolute; inset: 0; }
.team-hero-slide picture, .team-hero-slide img { display: block; height: 100%; width: 100%; object-fit: cover; }
.team-hero-slide + .team-hero-slide { opacity: 0; animation: team-dissolvi 20s linear infinite; animation-delay: calc(var(--i) * 5s - 5s); }
.team-hero-slide:first-child { position: relative; height: 100%; }
@keyframes team-dissolvi { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .team-hero-slide + .team-hero-slide { animation: none; opacity: 0; } }
.movimento-off .team-hero-slide + .team-hero-slide { animation: none; opacity: 0; }

/* ============================================================
   STORIA (rifatta il 01/10/2026) — storia.php
   ============================================================ */
.storia-anno-fondo {
  position: absolute; right: -2vw; bottom: -4vw; z-index: 0; pointer-events: none; user-select: none;
  font-family:var(--font-display); font-weight: 900; line-height: .8; font-size: clamp(8rem, 30vw, 26rem);
  color: transparent; -webkit-text-stroke: 1.5px rgb(var(--rgb-green-500) / .14);
}
.storia-hero-foto { aspect-ratio: 4 / 3; }
@media (max-width: 639px) { .storia-hero-foto { aspect-ratio: 4 / 5; } }   /* 02/10/2026: più alta su telefono */
@media (min-width: 1024px) { .storia-hero-foto { aspect-ratio: 1 / 1; max-height: calc(100vh - 12rem); min-height: 26rem; width: auto; margin-left: auto; } }
.storia-hero-foto picture, .storia-hero-foto img { display: block; height: 100%; width: 100%; }

/* capitoli */
.storia-cap-anno {
  font-family:var(--font-display); font-weight: 900; line-height: 1; white-space: nowrap;
  font-size: clamp(2.75rem, 9vw, 4.25rem); letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 1px var(--color-green-500);
}
@media (min-width: 1024px) { .storia-cap-anno { font-size: clamp(2.5rem, 4.4vw, 4.25rem); } }
.storia-cap-riga { display: block; width: 2.5rem; height: 2px; margin: 1.25rem 0 1rem; border-radius: 2px; background: var(--color-green-500); }
.storia-fig { margin: 0; min-width: 0; }
.storia-fig-foto { overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--color-night-600); }
.storia-fig-foto picture, .storia-fig-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.storia-fig figcaption { margin-top: .6rem; font-size: var(--text-sm); color: var(--color-grey-50); }
.storia-fig--alta .storia-fig-foto { aspect-ratio: 4 / 5; }
.storia-fig--larga .storia-fig-foto { aspect-ratio: 16 / 9; }
.storia-fig--striscia .storia-fig-foto { aspect-ratio: 21 / 9; }
@media (max-width: 639px) { .storia-fig--alta .storia-fig-foto { aspect-ratio: 4 / 3; } .storia-fig--striscia .storia-fig-foto { aspect-ratio: 16 / 9; } }

/* mosaici: 3 o 4 foto, su telefono due colonne semplici */
.storia-mosaico { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.storia-mosaico .storia-fig-foto { aspect-ratio: 1 / 1; }
.storia-mosaico .storia-m-1 { grid-column: 1 / -1; }
.storia-mosaico .storia-m-1 .storia-fig-foto { aspect-ratio: 16 / 10; }
.storia-mosaico--4 .storia-m-4 { grid-column: 1 / -1; }
.storia-mosaico--4 .storia-m-4 .storia-fig-foto { aspect-ratio: 16 / 7; }
@media (min-width: 768px) {
  .storia-mosaico { gap: 1rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .storia-mosaico--4 .storia-m-1 { grid-column: 1 / 5; grid-row: 1 / 3; display: flex; flex-direction: column; }
  .storia-mosaico--4 .storia-m-1 .storia-fig-foto { flex: 1; }
  .storia-mosaico--4 .storia-m-1 .storia-fig-foto { aspect-ratio: auto; height: 100%; min-height: 24rem; }
  .storia-mosaico--4 .storia-m-2 { grid-column: 5 / 7; }
  .storia-mosaico--4 .storia-m-3 { grid-column: 5 / 7; }
  .storia-mosaico--4 .storia-m-4 { grid-column: 1 / 7; }
  .storia-mosaico--4 .storia-m-4 .storia-fig-foto { aspect-ratio: 21 / 7; }
  .storia-mosaico--3 .storia-m-1 { grid-column: 1 / 7; }
  .storia-mosaico--3 .storia-m-1 .storia-fig-foto { aspect-ratio: 16 / 8; }
  .storia-mosaico--3 .storia-m-2 { grid-column: 1 / 4; }
  .storia-mosaico--3 .storia-m-3 { grid-column: 4 / 7; }
  .storia-mosaico--3 .storia-m-2 .storia-fig-foto, .storia-mosaico--3 .storia-m-3 .storia-fig-foto { aspect-ratio: 4 / 3; }
}

/* ============================================================
   AREE (home, 01/10/2026) — partials/community.php + assets/js/aree.js
   Per chi è NOW → Performance → Fitness → Wellness
   ============================================================ */
.aree-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .75rem; aspect-ratio: 6 / 5; }
@media (min-width: 640px) { .aree-collage { gap: 1rem; } }
.aree-foto { position: relative; min-height: 0; overflow: hidden; border-radius: var(--radius-2xl); background: var(--color-sand-100); }
.aree-foto picture, .aree-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aree-foto--alta { grid-row: 1 / 3; }
.aree-disc { display: flex; flex-wrap: wrap; gap: .4rem; }
.aree-disc li { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: var(--radius-full); border: 1px solid var(--color-sand-200); background: rgb(var(--rgb-white) / .6); font-size: var(--text-sm); font-weight: 600; }
.aree-soon { font-weight: 500; color: var(--color-grey-800); opacity: .85; }
/* 02/10/2026: sottolineatura continua anche sotto la freccia (prima si interrompeva) */
.aree-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-sm-plus); text-decoration: none;
  padding-bottom: .3rem; background: linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat; }
.aree-link:hover span { transform: translateX(3px); }
.aree-link span { display: inline-block; transition: transform var(--duration-base); }
.aree-passo + .aree-passo { border-top: 1px solid var(--color-sand-200); }

/* modalità a scorrimento (classe aggiunta da aree.js) */
/* 05/10/2026: il palco occupa tutto lo schermo (top 0). Lo spazio per l'header è un padding che segue
   l'header: scendendo l'header si nasconde (main.js → html.header-nascosto) e il contenuto sale con lui,
   invece di lasciare una fascia vuota in alto e il contenuto schiacciato in basso (segnalato da mobile). */
.aree--scroll .aree-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.aree--scroll .aree-cornice { --aree-hdr: 4.5rem; display: flex; flex-direction: column; height: 100%; padding-top: calc(var(--aree-hdr) + 1.25rem); padding-bottom: 1.25rem; transition: padding-top .3s ease; }
html.header-nascosto .aree--scroll .aree-cornice { --aree-hdr: 0rem; }
.aree-nav:not([hidden]) { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
/* barre in alto: solo la barra colorata, il nome compare passando col mouse (title); il nome dell'area
   è già nell'occhiello del passo, con la O del logo */
.aree-nav-voce { flex: 1 1 0; min-width: 4.5rem; padding: .6rem 0 .3rem; text-align: left; font-size: 0; color: var(--color-grey-800); white-space: nowrap; cursor: pointer; transition: color var(--duration-slow); }
.aree-nav-barra { display: block; height: 4px; border-radius: var(--radius-full); background: var(--color-sand-200); position: relative; overflow: hidden; }
.aree-nav-voce:hover .aree-nav-barra { background: var(--color-sand-300); }
/* 02/10/2026: riempimento legato allo scroll (--p da 0 a 1, aggiornato da aree.js); la sfumatura
   va dal colore dell'area (--c) a quello della successiva (--c2) e si scopre man mano (clip-path) */
.aree-nav-barra::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c, var(--color-night-850)), var(--c2, var(--color-night-850)));
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.aree-nav-voce:not(.is-attiva):not(.is-passata) { color: var(--color-grey-600); }
.aree-nav-voce.is-attiva, .aree-nav-voce.is-passata { color: var(--ct, var(--color-night-850)); }
.aree-nav-voce.is-passata { opacity: .75; }
@media (max-width: 639px) {
  .aree-nav:not([hidden]) { gap: .35rem; }
  .aree-nav-voce { min-width: 0; }
}
.aree-nav-voce:focus-visible { outline: 3px solid var(--color-green-800); outline-offset: 3px; border-radius: var(--radius-xs); }
.aree--scroll .aree-passi { position: relative; flex: 1; min-height: 0; }
.aree--scroll .aree-passo { position: absolute; inset: 0; padding: 1rem 0 0; border: 0; align-content: center; visibility: hidden; transition: visibility 0s var(--duration-slowest); }
.aree--scroll .aree-passo.is-attivo { visibility: visible; transition: none; z-index: 1; }
.aree--scroll .aree-testo { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-slower), transform var(--duration-slowest) var(--ease-out); }
.aree--scroll .is-passato .aree-testo { transform: translateY(-28px); }
.aree--scroll .is-attivo .aree-testo { opacity: 1; transform: none; transition-delay: .1s; }
.aree--scroll .aree-foto { opacity: 0; transform: scale(1.06); clip-path: inset(10% 10% 10% 10% round var(--radius-2xl)); transition: opacity .5s, transform .9s var(--ease-out), clip-path var(--duration-lazy) var(--ease-out); }
.aree--scroll .is-attivo .aree-foto { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--radius-2xl)); }
.aree--scroll .is-attivo .aree-foto:nth-child(2) { transition-delay: .08s; }
.aree--scroll .is-attivo .aree-foto:nth-child(3) { transition-delay: .16s; }
.aree--scroll .aree-collage { aspect-ratio: auto; height: min(64vh, 38rem); }
.aree--scroll .aree-sensori:not([hidden]) { margin-top: -50svh; }
/* 05/10/2026: 45svh per passo (prima 75): ogni passo cambia con una "strisciata" sola; con 75 lo schermo
   restava fermo troppo a lungo e qualcuno pensava che il sito si fosse bloccato */
.aree--scroll .aree-sensori > div { height: 45svh; }
.aree--scroll .aree-sensori > div:last-child { height: 70svh; }   /* l'ultimo passo resta un attimo prima di sbloccare */
/* e mentre si scorre dentro un passo la foto si muove appena (--pp da aree.js): lo schermo non è mai fermo */
.aree--scroll .aree-foto img { transform: translate3d(0, calc((var(--pp, .5) - .5) * -7%), 0) scale(1.09); will-change: transform; }
/* telefono e tablet (02/10/2026): il testo prende lo spazio che gli serve, le foto si adattano a
   quello che resta (prima, su schermi bassi, testo e barre si sovrapponevano) */
@media (max-width: 1023px) {
  .aree--scroll .aree-passo { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding-top: .75rem; }   /* 05/10: centrato nello spazio, niente vuoto sotto */
  .aree--scroll .aree-testo { flex: none; }
  .aree--scroll .aree-testo p { margin-top: .6rem; }
  .aree--scroll .aree-testo h2 { font-size: 1.4rem; }
  .aree--scroll .aree-disc { margin-top: .7rem; gap: .3rem; }
  .aree--scroll .aree-disc li { padding: .25rem .65rem; }
  .aree--scroll .aree-testo .mt-7 { margin-top: .9rem; }
  .aree--scroll .aree-collage { flex: 1 1 0; min-height: 7rem; max-height: 42svh; height: auto; aspect-ratio: auto; }
}
/* telefono (02/10/2026): la categoria si legge una volta sola (occhiello del passo); in alto solo le
   barre colorate, senza etichette tagliate. Titoli più grandi, una foto sola e grande. */
@media (max-width: 639px) {
  .aree--scroll .aree-cornice { padding-top: calc(var(--aree-hdr) + .75rem); }
  .aree--scroll .aree-passo { padding-top: .5rem; gap: .85rem; }
  /* chip delle discipline più compatte: Fitness sta su due righe e la foto resta grande */
  .aree--scroll .aree-disc { gap: .25rem; }
  .aree--scroll .aree-disc li { padding: .2rem .55rem; font-size: var(--text-xs); gap: .35rem; }
  .aree--scroll .aree-disc li svg { width: .875rem; height: .875rem; }
  .aree--scroll .aree-testo h2 { font-size: 1.7rem; line-height: 1.05; }
  .aree--scroll .aree-collage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-height: 52svh; }
  .aree--scroll .aree-collage .aree-foto:not(.aree-foto--alta) { display: none; }
  .aree--scroll .aree-foto--alta { grid-row: auto; }
}
@media (max-width: 1023px) and (max-height: 720px) {
  .aree--scroll .aree-testo h2 { font-size: 1.4rem; }
  .aree--scroll .aree-collage { gap: .5rem; }
  .aree--scroll .aree-foto { border-radius: var(--radius-lg); }
}

/* ============================================================
   MEMBERSHIP (01/10/2026) — membership.php + assets/js/membership.js
   ============================================================ */
.mb-fiducia { display: flex; flex-wrap: wrap; gap: .6rem; }
.mb-fiducia li { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .95rem; border-radius: var(--radius-full); border: 1px solid var(--color-night-600); background: rgb(var(--rgb-night-850) / .75); backdrop-filter: blur(6px); font-size: var(--text-sm-plus); }
.mb-fiducia b { color: var(--color-grey-50); }
.mb-fiducia-ico { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: var(--radius-full); background: var(--color-green-500); color: var(--color-night-850); }

/* selettore durata a pillola */
.mb-durate { position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .25rem; padding: .35rem; border-radius: var(--radius-full); border: 1px solid var(--color-night-600); background: var(--color-night-900); }
.mb-durate-cursore { position: absolute; top: .35rem; bottom: .35rem; left: 0; width: 0; border-radius: var(--radius-full); background: var(--color-green-500); opacity: 0; pointer-events: none; }
.mb-durate.is-pronto .mb-durate-cursore { opacity: 1; transition: transform var(--duration-slower) var(--ease-out), width var(--duration-slower) var(--ease-out); }
.mb-durata { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.25rem; border-radius: var(--radius-full); font-family:var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-sm-plus); color: var(--color-grey-50); line-height: 1; white-space: nowrap; transition: color var(--duration-moderate); }
.mb-durata-sconto { padding: .2rem .45rem; border-radius: var(--radius-full); background: rgb(var(--rgb-green-500) / .16); font-family:var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--color-green-500); transition: color var(--duration-moderate), background var(--duration-moderate); }
.mb-durata[aria-selected="true"] .mb-durata-sconto { background: rgb(var(--rgb-night-850) / .14); }
.mb-durate:not(.is-pronto) .mb-durata[aria-selected="true"] { background: var(--color-green-500); }
.mb-durata[aria-selected="true"], .mb-durata[aria-selected="true"] .mb-durata-sconto { color: var(--color-night-850); }
.mb-durata:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
@media (max-width: 639px) { .mb-durate { border-radius: var(--radius-2xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-durate-cursore { display: none; } .mb-durata[aria-selected="true"] { background: var(--color-green-500); } }

/* card scure con foto in testa */
.mb-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--color-night-600); background: var(--color-night-800); color: var(--color-grey-50);
  transition: transform var(--duration-slow) var(--ease-spring), border-color var(--duration-medium), box-shadow var(--duration-slow); }
.mb-card:hover { transform: translateY(-4px); border-color: var(--color-night-500); box-shadow: var(--shadow-4); }
.mb-card-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mb-card-foto picture, .mb-card-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-lazy) var(--ease-out); }
.mb-card:hover .mb-card-foto img { transform: scale(1.05); }
.mb-card-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-night-800) 0%, rgb(var(--rgb-night-800) / .35) 45%, rgb(var(--rgb-night-800) / 0) 75%); }
.mb-card-corpo { position: relative; display: flex; flex: 1; flex-direction: column; margin-top: -2.5rem; padding: 0 1.5rem 1.75rem; }
/* BADGE olografico (atomo) · Figma: Badge / Holo. "Più scelto": pillola iridescente col bordo bianco da adesivo */
.mb-card-badge { position: absolute; top: .9rem; right: .9rem; z-index: 2; padding: .3rem .8rem; border-radius: var(--radius-full);
  background: var(--gradient-holo-stripe); background-size: 220% 100%; animation: stripe-holo 6s ease-in-out infinite alternate;
  border: 2px solid var(--color-grey-50); box-shadow: var(--shadow-1); transform: rotate(4deg);
  color: var(--color-night-850); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
@media (prefers-reduced-motion: reduce) { .mb-card-badge { animation: none; } }
.movimento-off .mb-card-badge { animation-play-state: paused; }

.mb-nome { font-size: var(--text-xl); line-height: 1.1; }
.mb-riga { font-size: var(--text-base); line-height: 1.4; }
.mb-prezzo .prezzo { font-size: 3rem; }
.prezzo-giorno { color: var(--color-green-500); }

/* Regular: in evidenza */
.mb-card.is-top { border-color: var(--color-green-500); box-shadow: var(--shadow-glow-accent); }
@media (min-width: 1024px) { .mb-card.is-top { transform: translateY(-.75rem); } .mb-card.is-top:hover { transform: translateY(-1rem); } }
/* piano non disponibile per la durata scelta */
.mb-card.is-fantasma { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-night-500); border-color: transparent; }
.mb-card.is-fantasma .mb-card-foto { opacity: .25; filter: grayscale(1); }
.mb-card.is-fantasma.is-top { transform: none; }

/* recensioni vicino ai prezzi */

@media (prefers-reduced-motion: reduce) {
  .mb-card, .mb-card-foto img, .mb-durate.is-pronto .mb-durate-cursore { transition: none; }
}
@media (max-width: 639px) {
  .mb-card-foto { aspect-ratio: 21 / 9; }
  /* 02/10/2026: piani nell'ordine naturale (Small → Wellness), la progressione resta chiara */
  /* durate su una riga sola: quattro caselle uguali, sconto sotto l'etichetta */
  .mb-durate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; border-radius: var(--radius-xl); gap: .2rem; }
  .mb-durate-cursore { border-radius: var(--radius-lg); }
  .mb-durata { flex-direction: column; gap: .3rem; min-height: 3.6rem; padding: .45rem .2rem; border-radius: var(--radius-lg); font-size: var(--text-xs); letter-spacing: .02em; }
  .mb-durata-sconto { padding: .1rem .4rem; font-size: var(--text-2xs); }
}

/* ---------- Recensioni "forti" (home, 01/10/2026) — partials/recensioni.php ----------
   Momento Life Green + due nastri di card che scorrono in direzioni opposte. */

.rec-nastri { display: grid; gap: 1.25rem; }
.rec-fila--unica { display: none; }
@media (max-width: 767px) { .rec-fila--unica { display: block; } .rec-fila--nastro { display: none; } }
.rec-fila { overflow: hidden; outline: none; }   /* 02/10: niente sfumatura ai lati, le card arrivano al bordo */
.rec-fila:focus-visible { outline: 3px solid var(--color-night-850); outline-offset: -3px; }
.rec-track { display: flex; align-items: stretch; gap: 1.25rem; width: max-content; margin: 0; padding: 0 1.25rem 0 0; list-style: none; animation: rec-scorri var(--durata, 60s) linear infinite; }
.rec-fila--inversa .rec-track { animation-name: rec-scorri-inverso; }
@keyframes rec-scorri { to { transform: translateX(-50%); } }
@keyframes rec-scorri-inverso { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* 02/10: col mouse il nastro non si ferma più al passaggio, solo al clic (main.js, .is-ferma; altro clic riparte);
   con la tastiera si ferma quando la fila è a fuoco */
.rec-fila:focus-visible .rec-track, .rec-fila.is-ferma .rec-track, .rec-fila.is-fuori .rec-track, .movimento-off .rec-track { animation-play-state: paused; }
.rec-card { position: relative; display: flex; flex-direction: column; width: 21rem; padding: 1.5rem; border-radius: var(--radius-2xl); background: var(--color-sand-50); color: var(--color-night-850);
  box-shadow: var(--shadow-paper); transition: transform var(--duration-moderate) var(--ease-spring); }
.rec-fila--inversa .rec-card:nth-child(odd), .rec-fila:not(.rec-fila--inversa) .rec-card:nth-child(even) { transform: rotate(-.6deg); }
.rec-card:hover { transform: translateY(-4px) rotate(0); }
.rec-virgolette { width: 2.25rem; height: 1.8rem; color: var(--color-green-500); }
.rec-testo { margin-top: 1rem; font-size: var(--text-base); line-height: 1.5; font-weight: 500; }
.rec-testo p + p { margin-top: .6rem; }
.rec-firma { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.25rem; }
.rec-avatar { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background: var(--color-night-850); color: var(--color-green-500); font-family:var(--font-display); font-weight: 900; }
@media (max-width: 767px) {
  /* 02/10/2026: carosello a scorrimento con il dito che avanza anche da solo (main.js);
     padding sopra e sotto così l'ombra delle card non viene tagliata */
  .rec-fila { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none; -webkit-mask-image: none; mask-image: none;
    position: relative; padding: .75rem 0 2.5rem; margin: -.75rem 0 -2.5rem; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  .rec-fila::-webkit-scrollbar { display: none; }
  .rec-track { animation: none !important; padding-left: 1rem; }
  .rec-track { align-items: flex-start; }
  .rec-card { width: 18rem; scroll-snap-align: start; transform: none !important; }
  .rec-copia { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-fila { overflow-x: auto; scrollbar-width: thin; }
  .rec-track { animation: none !important; padding-left: 1rem; }
  .rec-copia { display: none; }
  .rec-card { transition: none; }
}

/* ---------- Pagine pilastro (01/10/2026) — partials/pilastro.php ---------- */
.pil-chip { display: flex; flex-wrap: wrap; gap: .5rem; }
.pil-chip li > a, .pil-chip li > span { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .45rem .95rem; border-radius: var(--radius-full); border: 1px solid var(--color-night-600); background: rgb(var(--rgb-night-850) / .75); backdrop-filter: blur(6px); font-weight: 600; font-size: var(--text-sm-plus); color: var(--color-grey-50); }
.pil-chip li > a { transition: border-color var(--duration-base), transform var(--duration-medium) var(--ease-spring); }
.pil-chip li > a:hover { border-color: currentColor; transform: translateY(-2px); }
.pil-chip li > a:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
.pil-chip small { font-size: var(--text-sm); font-weight: 500; color: var(--color-grey-50); opacity: .85; }
.pil-perchi { display: flex; align-items: flex-start; gap: .9rem; height: 100%; padding: 1.25rem 1.4rem; border-radius: var(--radius-xl); border: 1px solid var(--color-sand-200); background: rgb(var(--rgb-white) / .6); }
.pil-perchi-ico { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; margin-top: .1rem; border-radius: var(--radius-full); color: var(--color-night-850); }
.pil-passi { counter-reset: none; }
.pil-passo { position: relative; padding: 1.5rem; border-radius: var(--radius-2xl); border: 1px solid var(--color-night-600); background: var(--color-night-800); }
.pil-passo::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc, var(--color-green-500)); }
.pil-passo-n { display: block; font-family:var(--font-display); font-weight: 900; font-size: 4rem; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--acc, var(--color-green-500)); }
.storia-fig-foto--chiara { border-color: var(--color-sand-200); }
@media (prefers-reduced-motion: reduce) { .pil-chip li > a { transition: none; } }

/* ============================================================
   STICKER "OLOGRAFICI" (01/10/2026) — sticker() in inc/funzioni.php
   Verde NOW iridescente (conic che ruota + riflesso che passa), bordo bianco da adesivo
   fustellato, ombra da adesivo appena sollevato. Fermi con riduci movimento / Pausa animazioni.
   ============================================================ */
@property --holo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sticker {
  --s: 7.5rem; position: absolute; z-index: 3; display: block; width: var(--s); height: var(--s); padding: .3rem; border-radius: var(--radius-full);
  background: var(--color-grey-50); color: var(--color-night-850);
  box-shadow: var(--shadow-sticker);
  transition: transform .5s var(--ease-spring);
}
.sticker:hover { transform: scale(1.05); }
/* filetto interno (02/10/2026: al posto della scritta ad anello) */
.sticker-filetto { position: absolute; inset: calc(var(--s) * .1); border-radius: var(--radius-full); border: 1px solid rgb(var(--rgb-night-850) / .35); pointer-events: none; }
.sticker-holo {
  position: absolute; inset: .3rem; border-radius: var(--radius-full); overflow: hidden;
  background: var(--gradient-holo-conic);
  animation: sticker-holo 9s linear infinite;
}
.sticker-holo::before { /* grana leggera da adesivo stampato */
  content: ""; position: absolute; inset: 0; opacity: .18; mix-blend-mode: multiply;
  background-image: radial-gradient(rgb(var(--rgb-night-850) / .5) .6px, transparent .7px); background-size: 4px 4px;
}
.sticker-holo::after { /* riflesso che attraversa la superficie */
  content: ""; position: absolute; inset: -40%; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 38%, rgb(var(--rgb-white) / .95) 48%, rgb(var(--rgb-white) / .2) 54%, transparent 62%);
  animation: sticker-riflesso 5.5s var(--ease-in-out) infinite;
}
@keyframes sticker-holo { to { --holo: 360deg; } }
@keyframes sticker-riflesso { 0%, 35% { transform: translateX(-60%); } 75%, 100% { transform: translateX(60%); } }
.sticker-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; }
.sticker-grande { font-family:var(--font-display); font-weight: 900; font-size: calc(var(--s) * .26); letter-spacing: -.02em; }
.sticker-piccolo { margin-top: .3rem; max-width: 62%; font-family:var(--font-body); font-weight: 700; font-size: calc(var(--s) * .088); letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; }
.sticker-piccolo--solo { margin-top: 0; max-width: 66%; font-family:var(--font-display); font-weight: 900; font-size: calc(var(--s) * .105); letter-spacing: .02em; line-height: 1.05; }
.sticker-ico { display: block; width: calc(var(--s) * .26); height: calc(var(--s) * .26); }
.sticker-ico svg { width: 100%; height: 100%; }
/* posizione: angolo in alto a destra di una foto (come i vecchi bollini) */
.sticker--angolo { top: -1.25rem; right: -.75rem; }
@media (min-width: 1024px) { .sticker--angolo { --s: 8.5rem; top: 1.25rem; right: -2rem; } }

@media (prefers-reduced-motion: reduce) { .sticker-holo, .sticker-holo::after { animation: none; } .sticker { transition: none; } }
.movimento-off .sticker-holo, .movimento-off .sticker-holo::after { animation-play-state: paused; }

/* Banner orari delle pagine pilastro (01/10/2026) — partials/orari-banner.php */
.ob { transition: border-color var(--duration-medium), transform var(--duration-slow) var(--ease-spring); }
.ob:hover { border-color: var(--color-green-500); transform: translateY(-3px); }
.ob:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 4px; }
.ob-foto { position: absolute; inset: 0; z-index: 0; opacity: .25; pointer-events: none; }
.ob-foto picture, .ob-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; }
@media (min-width: 1024px) {
  .ob-foto { left: 45%; opacity: .9; -webkit-mask-image: linear-gradient(to right, transparent, var(--color-black) 60%); mask-image: linear-gradient(to right, transparent, var(--color-black) 60%); }
  .ob-foto img { filter: brightness(.6); }
}

@media (prefers-reduced-motion: reduce) { .ob { transition: none; } }

/* Riquadro membership della home: riflesso olografico come le CTA verdi (passa da solo ogni tanto e al passaggio del mouse) */
.box-membership-luce { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.box-membership-luce::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; transform: skewX(-18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgb(var(--rgb-green-50) / .55) 45%, rgb(var(--rgb-holo-mint-250) / .35) 55%, transparent); mix-blend-mode: soft-light;
  animation: box-luce 7s var(--ease-in-out) infinite; }
@keyframes box-luce { 0%, 55% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(420%); } }
a.group:hover .box-membership-luce::after { animation-duration: 1.6s; }
.box-membership-glow { box-shadow: 0 0 0 1px rgb(var(--rgb-holo-mint-250) / .35) inset; }   /* 02/10/2026: tolto l'alone verde esterno */
@media (prefers-reduced-motion: reduce) { .box-membership-luce::after { animation: none; display: none; } }
.movimento-off .box-membership-luce::after { animation-play-state: paused; }

/* Recensioni: verde meno piatto (01/10/2026) — base sfumata più profonda + pattern NOW a "O" in trasparenza + texture */
.rec-forte { background: var(--gradient-green-deep); }
.rec-forte::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--color-green-50); opacity: .14;   /* 01/10: pattern che schiarisce, non scurisce */
  -webkit-mask: url('../img/pattern-tile.svg') center top / 240px auto repeat; mask: url('../img/pattern-tile.svg') center top / 240px auto repeat; }
.rec-forte::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('../img/dark-pattern.webp') center / cover; opacity: .1; mix-blend-mode: screen; }

/* ---------- Pagina Orari (01/10/2026): un'unica banda verde scuro → turchese scuro ---------- */
.orari-banda { background: var(--gradient-orari-band); overflow: hidden; }
.orari-banda:has([data-cal-panel="performance"]:not([hidden])) { background: var(--gradient-orari-band-performance); }
.orari-banda:has([data-cal-panel="fitness"]:not([hidden]))     { background: var(--gradient-orari-band-fitness); }
.orari-banda::before { opacity: .09; -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 0%, rgb(var(--rgb-black) / .55) 45%, rgb(var(--rgb-black) / .25) 100%); mask-image: linear-gradient(to bottom, var(--color-black) 0%, rgb(var(--rgb-black) / .55) 45%, rgb(var(--rgb-black) / .25) 100%); }
.orari-mood { position: absolute; inset: 0 0 auto 0; height: 38rem; pointer-events: none; }
.orari-mood-foto { position: absolute; top: 0; bottom: 0; width: 36%; mix-blend-mode: luminosity; opacity: .28; }
.orari-mood-foto picture, .orari-mood-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.orari-mood-foto--sx { left: 0; -webkit-mask-image: radial-gradient(120% 90% at 0% 30%, var(--color-black) 25%, transparent 75%); mask-image: radial-gradient(120% 90% at 0% 30%, var(--color-black) 25%, transparent 75%); }
.orari-mood-foto--sx img { object-position: 50% 30%; }   /* camminata sulle mani al muro */
.orari-mood-foto--dx { right: 0; -webkit-mask-image: radial-gradient(120% 90% at 100% 30%, var(--color-black) 25%, transparent 75%); mask-image: radial-gradient(120% 90% at 100% 30%, var(--color-black) 25%, transparent 75%); }
.orari-mood-foto--dx img { object-position: 55% 30%; }
@media (max-width: 767px) { .orari-mood { height: 24rem; } .orari-mood-foto { width: 55%; opacity: .2; } }

/* Calendario desktop: bordi puliti (niente linee esterne tagliate dagli angoli arrotondati) */
.cal-griglia { border-collapse: separate; border-spacing: 0; }
.cal-griglia th, .cal-griglia td { border: 0 !important; border-right: 1px solid var(--color-sand-200) !important; border-bottom: 1px solid var(--color-sand-200) !important; }
.cal-griglia thead th { border-right-color: rgb(var(--rgb-sand-50) / .12) !important; border-bottom: 0 !important; }
.cal-griglia tr > :last-child { border-right: 0 !important; }
.cal-griglia tbody tr:last-child > * { border-bottom: 0 !important; }

/* Riquadro "prima lezione" a metà riga (box-prova-membership.php): foto a destra che sfuma */
.box-foto--prova-mb img { object-position: 50% 30%; }   /* membership: quattro atleti abbracciati */
.box-foto--prova-mezza { opacity: .28; }
.box-foto--prova-mezza img { object-position: 60% 40%; }
@media (min-width: 768px) {
  .box-foto--prova-mezza { left: 40%; opacity: 1; -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .5) 35%, var(--color-black) 70%); mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .5) 35%, var(--color-black) 70%); }
  .box-foto--prova-mezza img { filter: brightness(.7); }
}

/* "Coming soon" accanto al nome del corso (menu, footer): pillola che va a capo da sola se non ci sta */
.menu-soon { display: inline-flex; align-items: center; white-space: nowrap; border: 1px solid var(--color-night-600); border-radius: var(--radius-full);
  padding: .05rem .45rem; font-size: var(--text-sm); line-height: 1.4; color: var(--color-grey-50); border-color: rgb(var(--rgb-grey-50) / .28); }

/* ============================================================
   PAGINE DISCIPLINA (rifatte il 02/10/2026) — partials/disciplina.php
   ============================================================ */
/* fa per te se…: frasi grandi con spunta nel colore dell'area */
.dis-perchi { display: grid; gap: 0; border-top: 1px solid var(--color-sand-200); }
.dis-perchi li { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.4rem 0; border-bottom: 1px solid var(--color-sand-200);
  font-size: var(--text-lg); line-height: 1.4; font-weight: 600; color: var(--color-night-850); }
@media (min-width: 640px) { .dis-perchi li { font-size: 1.5rem; padding: 1.75rem 0; } }
.dis-perchi-ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex-shrink: 0; margin-top: .1rem; border-radius: var(--radius-full); color: var(--color-night-850); }
/* 02/10/2026: su teal (Fitness) spunte e icone bianche, l'inchiostro non si vedeva */
.dis-perchi-ico.bg-teal, .dis-ben-ico.bg-teal, .pil-perchi-ico.bg-teal { color: var(--color-grey-50); }

/* cosa ti porti a casa (02/10/2026): card scure con icona nel colore dell'area, alone e icona
   grande in filigrana in basso a destra */
.dis-ben { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 14rem;
  padding: 1.75rem; border-radius: var(--radius-3xl); background: var(--color-night-850); color: var(--color-sand-50); transition: transform var(--duration-slow) var(--ease-spring); }
@media (min-width: 640px) { .dis-ben { padding: 2.25rem; } }
@media (min-width: 1024px) { .dis-ben { min-height: 19rem; } }
.dis-ben::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc) 34%, transparent) 0%, transparent 55%); }
.dis-ben:hover { transform: translateY(-4px); }
.dis-ben-ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-full); }
.dis-ben-fondo { position: absolute; right: -1.5rem; bottom: -1.5rem; z-index: -1; width: 9.5rem; height: 9.5rem; color: var(--acc); opacity: .1;
  transition: transform var(--duration-slowest) var(--ease-out), opacity .4s; }
.dis-ben:hover .dis-ben-fondo { transform: scale(1.08); opacity: .16; }
@media (prefers-reduced-motion: reduce) { .dis-ben, .dis-ben-fondo { transition: none; } .dis-ben:hover { transform: none; } }

/* con foto di sfondo: foto scurita, sfumatura verso il basso per il testo, alone dell'area sopra */
.dis-ben--foto { min-height: 20rem; }
@media (min-width: 1024px) { .dis-ben--foto { min-height: 24rem; } }
.dis-ben-foto { position: absolute; inset: 0; z-index: -2; }
.dis-ben-foto picture, .dis-ben-foto img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: transform var(--duration-lazy) var(--ease-out); }
.dis-ben--foto:hover .dis-ben-foto img { transform: scale(1.05); }
.dis-ben--foto::before { display: none; }
.dis-ben--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc) 38%, transparent) 0%, transparent 55%),
              linear-gradient(to top, var(--color-night-850) 0%, rgb(var(--rgb-night-850) / .92) 34%, rgb(var(--rgb-night-850) / .35) 68%, rgb(var(--rgb-night-850) / 0) 100%); }

/* il programma: card scure con foto */
.dis-prog { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--color-night-600); background: var(--color-night-800); }
.dis-prog-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.dis-prog-foto picture, .dis-prog-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-lazy) var(--ease-out); }
.dis-prog:hover .dis-prog-foto img { transform: scale(1.05); }
.dis-prog-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-night-800) 0%, rgb(var(--rgb-night-800) / 0) 55%); }
.dis-prog-corpo { padding: 1.25rem 1.5rem 1.75rem; }
.dis-prog-quando { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--text-sm); font-weight: 600; }

/* affiliazione CrossFit: anno gigante a contorno, badge su pastiglia chiara, sticker */
.dis-aff-anno { position: absolute; right: -2vw; bottom: -5vw; z-index: -1; pointer-events: none; user-select: none;
  font-family:var(--font-display); font-weight: 900; line-height: .8; font-size: clamp(9rem, 32vw, 28rem);
  color: transparent; -webkit-text-stroke: 1.5px rgb(var(--rgb-night-850) / .16); }
.dis-aff-badge { display: inline-flex; border-radius: var(--radius-3xl); background: var(--color-sand-50); padding: 1.75rem 2.25rem; box-shadow: var(--shadow-float);
  transform: rotate(-3deg); transition: transform .4s var(--ease-spring); }
.dis-aff-badge:hover { transform: rotate(0deg) scale(1.03); }
.dis-aff-badge:focus-visible { outline: 3px solid var(--color-night-850); outline-offset: 4px; }
@media (min-width: 640px) { .dis-aff-badge { padding: 2.25rem 3rem; } }
.sticker--aff { --s: 6.5rem; top: -2.25rem; right: -2.5rem; }
@media (min-width: 1024px) { .sticker--aff { --s: 8rem; top: -3rem; right: -3.5rem; } }

/* la lezione tipo: linea del tempo (verticale fino al tablet, orizzontale da lg) */
.dis-tempi { display: grid; gap: 2rem; }
.dis-tempo { position: relative; padding-left: 2.5rem; }
.dis-tempo::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1rem; height: 1rem; border-radius: var(--radius-full); background: var(--acc); box-shadow: 0 0 0 5px rgb(var(--rgb-black) / .04); }
.dis-tempo:not(:last-child)::after { content: ""; position: absolute; left: .45rem; top: 1.6rem; bottom: -2rem; width: 2px; background: var(--color-sand-200); }
.dis-tempo-n { font-family:var(--font-display); font-weight: 900; font-size: var(--text-sm); letter-spacing: .05em; }
@media (min-width: 1024px) {
  .dis-tempi { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 2rem; }
  .dis-tempo { padding-left: 0; padding-top: 2.25rem; }
  .dis-tempo::before { top: 0; }
  .dis-tempo:not(:last-child)::after { left: 1.6rem; right: -1.6rem; top: .45rem; bottom: auto; width: auto; height: 2px; }
}

/* PILLOLA OLOGRAFICA LEGGERA (02/10/2026): "Prima prova gratuita" nel percorso guidato ed
   etichetta "CrossFit Parco Dora" nella hero della home. Stesso verde iridescente degli sticker,
   molto schiarito, con un pallino che pulsa (niente spunta: si confondeva con "Nella scheda"). */
.pill-holo { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  border-radius: var(--radius-full); padding: .3rem .85rem .3rem .7rem; color: var(--color-night-850); font-size: var(--text-sm); font-weight: 700; line-height: 1.2;
  background: var(--gradient-holo-soft); animation: sticker-holo 9s linear infinite;
  box-shadow: 0 0 0 1px rgb(var(--rgb-white) / .55) inset; }
.pill-holo::after { content: ""; position: absolute; inset: -40%; z-index: -1; mix-blend-mode: soft-light; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgb(var(--rgb-white) / .9) 50%, transparent 60%); animation: sticker-riflesso 5.5s var(--ease-in-out) infinite; }
.pill-holo-punto { position: relative; width: .5rem; height: .5rem; flex: none; border-radius: var(--radius-full); background: var(--color-green-800); }
.pill-holo-punto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-green-800); animation: pill-pulsa 1.8s ease-out infinite; }
@keyframes pill-pulsa { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pill-holo, .pill-holo::after, .pill-holo-punto::after { animation: none; } }
.movimento-off .pill-holo, .movimento-off .pill-holo::after, .movimento-off .pill-holo-punto::after { animation-play-state: paused; }
/* etichetta della hero home: un filo più grande */
.pill-holo--hero { font-family:var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-2xs);
  padding: .42rem calc(.95rem - .08em) .3rem .95rem; color: var(--color-holo-mint-100); border: 1px solid transparent; box-shadow: none;
  /* 02/10/2026: più discreta: vetro scuro con solo il bordo olografico */
  background: linear-gradient(rgb(var(--rgb-night-850) / .72), rgb(var(--rgb-night-850) / .72)) padding-box,
              var(--gradient-holo-ring) border-box;
  backdrop-filter: blur(6px); }
.pill-holo--hero::after { opacity: .35; }

/* Riquadro CrossFit Kids nel percorso guidato (02/10/2026): pronto per la foto box-kids.jpg */
.trova-kids-foto { position: absolute; inset: 0 0 auto 0; height: 13rem; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 30%, transparent); mask-image: linear-gradient(to bottom, var(--color-black) 30%, transparent); }
.trova-kids-foto picture, .trova-kids-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trova-kids--foto .trova-kids-corpo { padding-top: 9.5rem; }
@media (min-width: 768px) {
  .trova-kids-foto { inset: 0 0 0 auto; width: 52%; height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .55) 35%, var(--color-black) 70%); mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .55) 35%, var(--color-black) 70%); }
  .trova-kids--foto .trova-kids-corpo { padding-top: 2rem; max-width: 56%; }
}
@media (min-width: 1024px) { .trova-kids--foto .trova-kids-corpo { padding-top: 2.5rem; padding-bottom: 2.5rem; } }

/* Esperimento 02/10/2026: la "O" spezzata del logo, piccola e ruotata di 45°, davanti agli occhielli
   delle pagine disciplina (Is it for me?, What you get…). Colore = quello del testo (mask).
   Per toglierla: eliminare la classe .occhiello-o da partials/disciplina.php. */
.occhiello-o { display: inline-flex; align-items: center; gap: .5em; }
.occhiello-o::before { content: ""; flex: none; width: 1.3em; height: .83em; background-color: currentColor; transform: translateY(-.08em) rotate(-25deg);
  -webkit-mask: url('../img/o-icona.svg') center / contain no-repeat; mask: url('../img/o-icona.svg') center / contain no-repeat; }

/* Percorso guidato (02/10/2026): matite per cambiare una risposta o il contenuto della scheda,
   maniglia della tendina (telefono), barra dei passi nascosta per Kids, messaggi mai sotto la barra */
.trova-modifica { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: -.3rem -.2rem 0 0; border-radius: var(--radius-full); color: var(--color-grey-50); opacity: .8; transition: background var(--duration-base), color var(--duration-base), opacity var(--duration-base); }
.trova-modifica:hover, .trova-modifica:focus-visible { opacity: 1; background: rgb(var(--rgb-green-500) / .16); color: var(--color-green-500); outline: none; }
.trova-modifica svg { width: 1rem; height: 1rem; }
.trova-modifica[hidden] { display: none; }
.trova-modifica--testo { width: auto; height: auto; gap: .35rem; display: inline-flex; padding: .2rem .55rem; margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; }
.trova-maniglia { display: none; }
.trova-dlg.is-kids .trova-segs { display: none; }
.trova-cura { scroll-margin-bottom: calc(var(--barra, 4.75rem) + 1.25rem); }
@media (max-width: 1023px) {
  .trova-dlg-main { padding-bottom: calc(var(--barra, 4.75rem) + 4rem); }
  .trova-maniglia { display: block; width: 3rem; height: .3rem; margin: -.4rem auto .9rem; border-radius: var(--radius-full); background: var(--color-night-400); }
  .trova-scheda-testa { touch-action: none; cursor: grab; }
  .trova-scheda.is-trascinata { transition: none; }
}

/* 02/10/2026: frecce delle CTA come chevron arrotondati (niente più "→" con la stanghetta) */
.freccia { display: inline-block; flex: none; width: min(.9em, 1.05rem); height: min(.9em, 1.05rem); vertical-align: -.1em; }
@media (max-width: 639px) { .freccia { width: min(.85em, .95rem); height: min(.85em, .95rem); } }

/* Membership (02/10/2026): pattern più visibile dietro le card su telefono, così le card si staccano */
@media (max-width: 1023px) {
  .banda-pattern::before { opacity: .14; -webkit-mask-image: none; mask-image: none; }
  .banda-pattern .mb-card { box-shadow: var(--shadow-4); }
}
/* tessera associativa: riquadro in evidenza */
.mb-tessera { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem;
  padding: 1.5rem; border-radius: var(--radius-3xl); border: 1px solid rgb(var(--rgb-green-500) / .45);
  background: radial-gradient(120% 140% at 0% 0%, rgb(var(--rgb-green-500) / .22), transparent 55%), var(--color-night-800); }
@media (min-width: 640px) { .mb-tessera { padding: 1.75rem 2.25rem; flex-wrap: nowrap; } }
/* la tessera (02/10/2026, versione "fancy"): formato carta di credito, olografica, con chip, NFC,
   riflesso che passa, pattern delle O in filigrana; si inclina in 3D al passaggio del mouse */
.mb-tessera-scena { flex: none; perspective: 900px; }
.mb-tessera-carta { position: relative; overflow: hidden; width: 13rem; aspect-ratio: 1.586; border-radius: .9rem; color: var(--color-night-850);
  background:
    url('../img/pattern-tile.svg') right -20px top -10px / 120px auto no-repeat,
    var(--gradient-holo-card);
  background-blend-mode: soft-light, normal;
  animation: sticker-holo 10s linear infinite, tessera-galleggia 6s ease-in-out infinite;
  box-shadow: 0 22px 40px -18px rgb(var(--rgb-black) / .85), 0 0 0 1px rgb(var(--rgb-white) / .6) inset, 0 -10px 30px -10px rgb(var(--rgb-green-500) / .35) inset;
  transform: rotate(-7deg) rotateY(-10deg); transform-style: preserve-3d; transition: transform var(--duration-slowest) var(--ease-spring); }
.mb-tessera:hover .mb-tessera-carta { transform: rotate(-2deg) rotateY(14deg) rotateX(6deg) translateY(-4px); }
@keyframes tessera-galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.mb-tessera-riflesso { position: absolute; inset: -40%; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 38%, rgb(var(--rgb-white) / .95) 47%, rgb(var(--rgb-white) / .25) 53%, transparent 62%);
  animation: sticker-riflesso 5s var(--ease-in-out) infinite; }
/* contenuto (02/10/2026): logo e "Tessera socio" in alto, stagione grande a contorno, riga per il
   nome del socio, ente che la rilascia in basso. Stile stampato: tutto allineato a sinistra su una griglia. */
.mb-tessera-logo { position: absolute; left: .9rem; top: .85rem; height: .9rem; width: auto; filter: brightness(0) saturate(100%); opacity: .9; }
.mb-tessera-etichetta { position: absolute; right: .9rem; top: .95rem; font-family:var(--font-display); font-weight: 900; font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; }
.mb-tessera-stagione { position: absolute; left: .9rem; top: 2.05rem; font-size: .5rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.mb-tessera-anno { position: absolute; left: .82rem; top: 2.75rem; font-family:var(--font-display); font-weight: 900; font-size: 2.35rem; line-height: .85; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 1.2px var(--color-night-850); }
.mb-tessera-nome { position: absolute; left: .9rem; bottom: 1.45rem; font-size: .5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.mb-tessera-riga { position: absolute; left: .9rem; right: .9rem; bottom: 2.25rem; border-top: 1px dotted rgb(var(--rgb-night-850) / .7); }
.mb-tessera-socio { position: absolute; left: .9rem; right: .9rem; bottom: .5rem; font-size: .5rem; font-weight: 700; letter-spacing: .02em; opacity: .8; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .mb-tessera-carta, .mb-tessera-riflesso { animation: none; } .mb-tessera-carta { transition: none; } }
.movimento-off .mb-tessera-carta, .movimento-off .mb-tessera-riflesso { animation-play-state: paused; }
.mb-tessera-prezzo { flex: none; display: flex; align-items: baseline; gap: .25rem; color: var(--color-green-500); }
.mb-tessera-prezzo span { font-size: 2.6rem; line-height: 1; }
.mb-tessera-prezzo small { font-size: var(--text-control); font-weight: 600; color: var(--color-grey-50); }
@media (prefers-reduced-motion: reduce) { .mb-tessera-carta { animation: none; } }
.movimento-off .mb-tessera-carta { animation-play-state: paused; }
@media (max-width: 639px) {
  .mb-tessera > .min-w-0 { order: 3; flex-basis: 100%; }
  .mb-tessera-prezzo { order: 2; margin-left: auto; }
}

/* Membership (14/10/2026): ingressi singoli sempre visibili sotto le card */
.mb-ingressi { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius-2xl);
  border: 1px solid rgb(var(--rgb-white) / .12); background: rgb(var(--rgb-white) / .04); }
.mb-ingressi-t { font-weight: 600; }
.mb-ingressi-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.mb-ingressi-lista li { display: inline-flex; align-items: baseline; gap: .6rem; padding: .45rem .9rem; border-radius: var(--radius-full); background: var(--color-night-700); }
.mb-ingressi-lista span { color: var(--color-grey-100); }
.mb-ingressi-lista b { font-family: var(--font-display); font-weight: 900; color: var(--color-green-500); font-size: 1.125rem; }
.mb-ingressi-link { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--color-green-500); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 639px) {
  .mb-ingressi { flex-direction: column; align-items: flex-start; }
  .mb-ingressi-lista { flex-direction: column; width: 100%; }
  .mb-ingressi-lista li { justify-content: space-between; }
  .mb-ingressi-link { margin-left: 0; }
}
/* Membership (14/10/2026): "Prima di iscriverti", domanda piccola + risposta grande + dettaglio */
.mb-info-griglia { display: grid; gap: 1rem; }
.mb-info-voce { display: flex; flex-direction: column; gap: .9rem; padding: 1.25rem; border-radius: var(--radius-2xl);
  background: var(--color-night-800); border: 1px solid rgb(var(--rgb-white) / .08); }
@media (min-width: 640px) { .mb-info-voce { flex-direction: row; gap: 1.25rem; padding: 1.75rem; } }
@media (min-width: 1024px) { .mb-info-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .mb-info-voce { flex-direction: column; } }
.mb-info-ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  background: rgb(var(--rgb-green-500) / .14); color: var(--color-green-500); }
@media (min-width: 640px) { .mb-info-ico { width: 3rem; height: 3rem; } }
.mb-info-dom { font-size: var(--text-sm-plus); font-weight: 600; color: var(--color-grey-100); }
.mb-info-risp { margin-top: .35rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; line-height: 1.15; letter-spacing: .01em; }
.mb-info-det { margin-top: .6rem; color: var(--color-grey-100); opacity: .85; text-wrap: pretty; }

/* Fumetto Instagram dei reel (02/10/2026) e nastro fermo mentre è aperto */
.video-fila.is-fermata .video-track { animation-play-state: paused !important; }
.reel-fumetto { position: fixed; z-index: 70; width: min(17rem, calc(100vw - 24px)); padding: 1.25rem 1.25rem 1.1rem; border-radius: var(--radius-xl);
  background: var(--color-sand-50); color: var(--color-night-850); box-shadow: var(--shadow-5); animation: reel-fumetto .35s var(--ease-spring); }
@keyframes reel-fumetto { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.reel-fumetto-x { position: absolute; top: .55rem; right: .55rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); }
.reel-fumetto-x:hover { background: rgb(var(--rgb-night-850) / .08); }
.reel-fumetto-x svg { width: 1rem; height: 1rem; }
.reel-fumetto-t { padding-right: 1.75rem; font-family:var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; line-height: 1.15; }
.reel-fumetto-s { margin-top: .5rem; font-size: var(--text-sm-plus); color: var(--color-grey-800); }
.reel-fumetto-cta { margin-top: 1rem; width: 100%; padding-left: 1rem; padding-right: 1rem; }
@media (prefers-reduced-motion: reduce) { .reel-fumetto { animation: none; } }

/* Banner newsletter verde (02/10/2026): pattern delle O in bianco, leggero */
.nl-verde::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('../img/pattern-tile.svg') center / 240px auto repeat;
  filter: brightness(0) invert(1); opacity: .16; }
.nl-verde .form-esito.is-errore { background: var(--color-sand-50); }

/* Pagina di ringraziamento del form (02/10/2026) */
.prova-grazie { position: relative; isolation: isolate; overflow: hidden; margin: -.25rem; padding: 1.75rem 1.5rem; border-radius: var(--radius-2xl); color: var(--color-night-850);
  background: var(--gradient-green-bright); scroll-margin-top: 6rem; }
@media (min-width: 640px) { .prova-grazie { padding: 2.5rem; } }
.prova-grazie::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('../img/pattern-tile.svg') right -40px top -30px / 260px auto repeat;
  filter: brightness(0) invert(1); opacity: .14; }
.prova-grazie:focus { outline: none; }
.prova-grazie[hidden] { display: none; }
.prova-grazie-check { display: block; width: 4rem; height: 4rem; margin-bottom: 1.25rem; }
.prova-grazie-check svg { width: 100%; height: 100%; fill: none; stroke: var(--color-night-850); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.prova-grazie-check circle { fill: var(--color-sand-50); stroke: none; transform-origin: center; animation: grazie-pop .5s var(--ease-spring) both; }
.prova-grazie-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: grazie-tratto .45s .35s ease-out forwards; }
@keyframes grazie-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes grazie-tratto { to { stroke-dashoffset: 0; } }
.prova-grazie-passi { margin-top: 1.75rem; display: grid; gap: .6rem; }
.prova-grazie-passi li { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--radius-lg); background: rgb(var(--rgb-sand-50) / .9);
  animation: grazie-su .5s var(--ease-out) both; }
.prova-grazie-passi li:nth-child(2) { animation-delay: .1s; } .prova-grazie-passi li:nth-child(3) { animation-delay: .2s; }
@keyframes grazie-su { from { opacity: 0; transform: translateY(12px); } }
.prova-grazie-passi b { display: block; font-weight: 700; }
.prova-grazie-passi span:not(.prova-grazie-n) { display: block; margin-top: .15rem; font-size: var(--text-sm-plus); color: var(--color-grey-800); }
.prova-grazie-n { flex: none; font-family:var(--font-display); font-weight: 900; font-size: 1.35rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--color-night-850); padding-top: .1rem; }
.prova-grazie-porta { margin-top: 1.5rem; }
.prova-grazie-porta ul { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.prova-grazie-porta li { padding: .35rem .8rem; border-radius: var(--radius-full); border: 1.5px solid var(--color-night-850); font-size: var(--text-sm); font-weight: 700; }
.prova-grazie .btn-ghost { border-color: var(--color-night-850); color: var(--color-night-850); }
@media (prefers-reduced-motion: reduce) { .prova-grazie-check circle, .prova-grazie-check path, .prova-grazie-passi li { animation: none; stroke-dashoffset: 0; } }

/* aree: CTA sotto la foto su telefono (02/10/2026) */
.aree-cta-sotto { display: none; }
@media (max-width: 639px) {
  .aree-cta { display: none; }
  .aree-cta-sotto { display: block; flex: none; }
  .aree--scroll .aree-cta-sotto { opacity: 0; transition: opacity var(--duration-slower) var(--duration-fast); }
  .aree--scroll .is-attivo .aree-cta-sotto { opacity: 1; }
}
@media (max-width: 639px) { .trova-opt { min-height: 5.25rem; } }   /* 02/10/2026: opzioni senza sottotitolo, compatte */

/* Banner cross-sell CrossFit Kids nelle pagine disciplina (02/10/2026) */
.kids-cross { background-color: var(--color-night-800); }
.kids-cross-corpo { padding: 1.5rem; }
@media (min-width: 640px) { .kids-cross-corpo { padding: 2.5rem; } }
.kids-cross-foto { position: absolute; inset: 0 0 auto 0; height: 15rem; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 35%, transparent); mask-image: linear-gradient(to bottom, var(--color-black) 35%, transparent); }
.kids-cross-foto picture, .kids-cross-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.kids-cross--foto .kids-cross-corpo { padding-top: 12rem; }
@media (min-width: 768px) {
  .kids-cross-foto { inset: 0 0 0 auto; width: 50%; height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .6) 30%, var(--color-black) 65%); mask-image: linear-gradient(to right, transparent 0, rgb(var(--rgb-black) / .6) 30%, var(--color-black) 65%); }
  .kids-cross--foto .kids-cross-corpo { padding-top: 2.5rem; max-width: 56%; }
  .kids-cross { min-height: 22rem; display: flex; align-items: center; }
}
@media (min-width: 1024px) { .kids-cross-corpo { padding: 3rem; } }
.trova-kids-foto img { object-position: 58% 40%; }   /* 02/10: bambino e bambina con i manubri */

/* 02/10/2026: NAV DESKTOP "IMPILLOLATA". Una pillola contenitore con bordo sottile; ogni voce è
   una pillola: al passaggio si accende appena, la pagina attiva è verde piena.
   Il pannello del mega menu resta agganciato all'header: .nav-voce--mega::after fa da ponte
   invisibile tra la voce e il pannello, così scendendo col mouse il menu non si chiude. */
.nav-pillola { display: flex; align-items: center; gap: .125rem; padding: .3125rem; border: 1px solid rgb(var(--rgb-grey-50) / .18); border-radius: var(--radius-full); background: rgb(var(--rgb-grey-50) / .03); }
.nav-voce { position: relative; display: flex; align-items: center; gap: .3rem; height: 2.375rem; padding: 0 .85rem; border-radius: var(--radius-full); white-space: nowrap;
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-grey-100); transition: background-color var(--duration-base) ease, color var(--duration-base) ease; }
@media (min-width: 1280px) { .nav-voce { padding: 0 1.15rem; font-size: var(--text-sm); } }
.nav-voce:hover, .group:hover > .nav-voce, .group:focus-within > .nav-voce { background: rgb(var(--rgb-grey-50) / .09); color: var(--color-grey-50); }
.nav-voce[aria-current] { background: var(--color-green-500); color: var(--color-night-850); }
.nav-voce[aria-current]:hover, .group:hover > .nav-voce[aria-current] { background: var(--color-green-400); color: var(--color-night-850); }
.nav-voce:focus-visible { outline: 2px solid var(--color-green-500); outline-offset: 2px; }
.nav-voce--mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.4rem; }
.nav-voce svg { transition: transform var(--duration-base) ease; }

/* 02/10/2026: nei riquadri cliccabili (orari, membership) la CTA è un bottone vero e proprio;
   passando su tutto il riquadro il bottone reagisce e la freccia avanza */
.box-cta { gap: .5rem; }
.box-cta .freccia { transition: transform var(--duration-base) ease; }
.group:hover .box-cta .freccia { transform: translateX(3px); }
.group:hover .box-cta.btn-invert { background: var(--color-green-500); border-color: var(--color-green-500); color: var(--color-night-850); }
.group:hover .box-cta.btn-dark { box-shadow: var(--shadow-offset); }

/* 02/10/2026: GLITCH sul titolo della home ("Not Only Workout"). main.js duplica il testo in due
   strati (verde e clay, aria-hidden) che per mezzo secondo saltano a fette e poi spariscono;
   il testo vero ha un piccolo sbandamento. Senza JS o con "riduci movimento": titolo fermo. */
[data-glitch] { position: relative; }
[data-glitch] .gl-base { display: block; }
[data-glitch] .gl-a, [data-glitch] .gl-b { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; }
[data-glitch] .gl-a { color: var(--color-green-500); }
[data-glitch] .gl-b { color: var(--color-clay-400); }
@keyframes hgl-a { 0% { opacity: 1; clip-path: inset(0 0 72% 0); transform: translate(-.06em, 0); } 18% { clip-path: inset(38% 0 36% 0); transform: translate(.05em, 0); } 36% { clip-path: inset(76% 0 4% 0); transform: translate(-.03em, 0); } 54% { clip-path: inset(14% 0 62% 0); transform: translate(.04em, 0); } 72% { opacity: 1; clip-path: inset(52% 0 22% 0); transform: translate(-.02em, 0); } 90%, 100% { opacity: 0; } }
@keyframes hgl-b { 0% { opacity: 1; clip-path: inset(62% 0 8% 0); transform: translate(.06em, 0); } 22% { clip-path: inset(8% 0 72% 0); transform: translate(-.05em, 0); } 44% { clip-path: inset(34% 0 42% 0); transform: translate(.03em, 0); } 66% { opacity: 1; clip-path: inset(82% 0 0 0); transform: translate(-.04em, 0); } 88%, 100% { opacity: 0; } }
@keyframes hgl-base { 0% { opacity: 0; } 8% { opacity: 1; transform: translateX(.02em) skewX(-8deg); } 26% { transform: translateX(-.015em) skewX(4deg); } 44% { opacity: .55; transform: none; } 54%, 100% { opacity: 1; transform: none; } }
html.is-loading [data-glitch] .gl-base { opacity: 0; }
[data-glitch]:not(.is-glitch) .gl-base { opacity: 0; }
.is-glitch .gl-base { animation: hgl-base .62s steps(1, end) both; }
.is-glitch .gl-a { animation: hgl-a .58s steps(1, end) both; }
.is-glitch .gl-b { animation: hgl-b .58s steps(1, end) .05s both; }

/* ============================================================
   WOD OF FAME (pagina wod-of-fame.php, 02/10/2026) — mood industrial: Black Box, trama
   cemento, targhette numerate, foto in bianco e nero che si accendono, righello a tacche.
   ============================================================ */
.wof-h1 { font-size: clamp(3.4rem, 15vw, 9rem); line-height: .84; }
.wof-specs { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--color-night-600); max-width: 40rem; }
.wof-specs > div { flex: 1 1 8rem; padding: 1rem 1.25rem 0 0; }
.wof-specs > div + div { border-left: 1px solid var(--color-night-600); padding-left: 1.25rem; }
.wof-specs dt { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-grey-50); }
.wof-specs dd { margin: .35rem 0 0; font-family:var(--font-display); font-weight: 900; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.wof-esempio { display: inline-block; font-size: var(--text-xs); font-weight: 600; color: var(--color-night-850); background: var(--color-clay-400); border-radius: var(--radius-full); padding: .3rem .8rem; }
/* targhetta numerata (come le etichette sull'attrezzatura) e categoria */
.wof-targa { position: absolute; z-index: 2; top: .75rem; left: .75rem; padding: .35rem .6rem; border-radius: var(--radius-sm); background: var(--color-night-850); color: var(--color-sand-50);
  border: 1px solid rgb(var(--rgb-grey-50) / .18); font-family:var(--font-display); font-weight: 900; font-size: var(--text-2xs); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.wof-cat { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: var(--radius-full); background: var(--color-green-500); color: var(--color-night-850);
  font-size: var(--text-2xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.wof-righello { display: block; height: .75rem; max-width: 22rem; border-bottom: 2px solid var(--color-green-500);
  background: repeating-linear-gradient(90deg, var(--color-green-500) 0 2px, transparent 2px 1.25rem) bottom / 100% .45rem no-repeat; }

/* WOD of the month */
.wofm-foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--color-night-600); aspect-ratio: 4 / 5; }
@media (min-width: 1024px) { .wofm-foto { aspect-ratio: 5 / 6; } }
.wofm-nastro { position: absolute; z-index: 2; left: 0; bottom: 1.5rem; padding: .7rem 1.1rem .7rem 1.5rem; background: var(--color-green-500); color: var(--color-night-850);
  font-family:var(--font-display); font-weight: 900; font-size: var(--text-sm); letter-spacing: .05em; text-transform: uppercase; }
.wofm-nastro b { font-weight: 900; }
.wofm-nome { font-size: clamp(2.4rem, 10.5vw, 4.2rem); line-height: .88; overflow-wrap: break-word; }
@media (min-width: 1024px) { .wofm-nome { font-size: min(3.9rem, 4.7vw); } }
.wofm-traguardo { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1; }
.wofm-frase { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--color-green-500); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; font-weight: 600; color: var(--color-grey-50); max-width: 30rem; }

/* il muro: griglia a misure miste (verticali, quadrate, orizzontali), si incastrano da sole */
.wofw-filtri { display: flex; flex-wrap: wrap; gap: .5rem; }
.wofw-filtri .chip-cal { --c: var(--color-green-500); --c-bg: var(--color-green-500); --c-txt: var(--color-night-850); }
.wofw-filtri .chip-cal span { font-variant-numeric: tabular-nums; opacity: .6; }
/* righe tutte della stessa altezza: le verticali/quadrate occupano 1 colonna, le orizzontali 2.
   Su 3 colonne 7 poster con 2 orizzontali riempiono 3 righe piene (dense riempie i buchi). */
.wofw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 15rem; grid-auto-flow: dense; gap: 1.25rem .75rem; }
@media (min-width: 768px) { .wofw { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 22rem; gap: 1.75rem 1rem; } }
@media (min-width: 1024px) { .wofw { grid-auto-rows: 27rem; gap: 2rem 1.25rem; } }
.wofw-item { display: flex; flex-direction: column; min-height: 0; }
.wofw-item--o { grid-column: span 2; }
@media (max-width: 767px) { .wofw-item:last-child { grid-column: span 2; } }
.wofw-item[hidden] { display: none; }
.wofw-foto { position: relative; flex: 1; min-height: 0; margin: 0; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--color-night-600); background: var(--color-night-700); outline: none; }
.wofw-foto:focus-visible { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
.wofw-foto picture, .wofw-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wofw-foto img { filter: grayscale(1) contrast(1.08) brightness(.92); transition: filter .5s ease, transform var(--duration-lazy) var(--ease-out); }
.wofw-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(var(--rgb-night-850) / .92)); pointer-events: none; }
.wofw-cat { position: absolute; z-index: 2; top: .75rem; right: .75rem; }
.wofw-testo { position: absolute; z-index: 2; inset: auto 0 0 0; display: grid; gap: .5rem; padding: 1rem 1rem 1.1rem; }
.wofw-traguardo { font-family:var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .92; color: var(--color-grey-50); font-size: clamp(1.3rem, 2.4vw, 2.1rem); }
.wofw-frase { display: block; font-size: var(--text-sm-plus); line-height: 1.35; color: var(--color-grey-50); overflow: hidden; }
.wofw-nome { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin: .65rem 0 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.wofw-nome .occhiello-o { color: var(--color-grey-50); }
.wofw-nome .occhiello-o::before { color: var(--color-green-500); background-color: var(--color-green-500); }
@media (hover: hover) {
  .wofw-foto:hover img, .wofw-foto:focus-visible img { filter: none; transform: scale(1.05); }
  .wofw-foto .wofw-frase { max-height: 0; opacity: 0; transition: max-height var(--duration-slower) var(--ease-out), opacity var(--duration-moderate); }
  .wofw-foto:hover .wofw-frase, .wofw-foto:focus-visible .wofw-frase { max-height: 6rem; opacity: 1; }
}
@media (hover: none) { .wofw-foto img { filter: none; } .wofw-frase { display: none; } }

/* come si entra */
.wofc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 768px) { .wofc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.wofc li { border-top: 3px solid var(--color-night-850); padding-top: 1.25rem; }
@media (min-width: 768px) { .wofc li { padding-right: 2rem; } .wofc li + li { padding-left: 2rem; border-left: 1px solid var(--color-sand-200); } }
.wofc-n { display: block; font-family:var(--font-display); font-weight: 900; font-size: 3.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--color-night-850); font-variant-numeric: tabular-nums; }
.wofc h3 { margin-top: 1rem; font-family:var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; letter-spacing: -.005em; }
.wofc p { margin-top: .6rem; color: var(--color-grey-700); max-width: 22rem; }

/* riquadro di richiamo in home (index.php, in fondo ai riquadri) */
.wof-box-foto { position: absolute; inset: 0 0 0 auto; width: 58%; z-index: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-black) 40%); mask-image: linear-gradient(90deg, transparent, var(--color-black) 40%); }
.wof-box-foto picture, .wof-box-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter .5s; }
.group:hover .wof-box-foto img { filter: none; }
@media (max-width: 767px) { .wof-box-foto { inset: 0 0 auto 0; width: 100%; height: 11rem; -webkit-mask-image: linear-gradient(180deg, var(--color-black) 30%, transparent); mask-image: linear-gradient(180deg, var(--color-black) 30%, transparent); } }

/* pagine di esito newsletter (02/10/2026): foto accanto al blocco verde */
.nle-foto { min-height: 16rem; aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .nle-foto { aspect-ratio: auto; height: 100%; min-height: 0; } }
.nle-foto picture, .nle-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nle-card { margin: 0; }

/* ============ PAGINA 404 (02/10/2026): "No rep." versione glitch ============ */
/* la foto: due copie colorate che sbandano ogni tanto (sdoppiamento RGB), una "fetta" che salta */
.nf-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 38rem; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--color-night-600); background: var(--color-night-700); }
@media (max-width: 1023px) { .nf-foto { aspect-ratio: 4 / 3; } }
.nf-foto-img { position: absolute; inset: 0; opacity: 0; }
.nf-foto-img.is-on { opacity: 1; }
.nf-foto-img picture, .nf-foto-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.nf-foto-g { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none; background: var(--g, none) 50% 50% / cover; z-index: 1; }
.nf-foto-g--a { filter: grayscale(1) brightness(.9) sepia(1) hue-rotate(90deg) saturate(6); }
.nf-foto-g--b { filter: grayscale(1) brightness(.9) sepia(1) hue-rotate(-20deg) saturate(4); }
@keyframes nf-fa { 0%, 70%, 100% { opacity: 0; transform: none; clip-path: inset(0); } 71% { opacity: .55; transform: translate(-10px, 0); clip-path: inset(20% 0 55% 0); }
  73% { transform: translate(8px, 0); clip-path: inset(58% 0 20% 0); } 75% { opacity: .55; transform: translate(-4px, 0); clip-path: inset(0 0 80% 0); } 76% { opacity: 0; } }
@keyframes nf-fb { 0%, 71%, 100% { opacity: 0; transform: none; clip-path: inset(0); } 72% { opacity: .5; transform: translate(10px, 0); clip-path: inset(40% 0 35% 0); }
  74% { transform: translate(-6px, 0); clip-path: inset(75% 0 5% 0); } 75.5% { opacity: 0; } }
.nf-foto-g--a { animation: nf-fa 6s steps(1, end) 2s infinite; }
.nf-foto-g--b { animation: nf-fb 6s steps(1, end) 2s infinite; }
@media (prefers-reduced-motion: reduce) { .nf-foto-g { animation: none !important; } }
.movimento-off .nf-foto-g { animation: none !important; }
/* 02/10/2026: dopo l'ultimo passo (Wellness) la sezione resta ferma ancora mezzo schermo, così
   la barra di Wellness si riempie del tutto prima che la sezione cominci a scorrere via */
.aree--scroll .aree-sensori:not([hidden])::after { content: ""; display: block; height: 50svh; }

/* 02/10/2026: testo iubenda incorporato (privacy, cookie). Font del sito; colonne della griglia
   iubenda che possono restringersi (prima il testo usciva dal riquadro); sotto i 1200px indice
   sopra e testo sotto, perché affiancati non ci stanno */
#iub-legalDoc, #iub-legalDoc * { font-family:var(--font-body); }
#iub-legalDoc .aside-main-wrapper > * { min-width: 0; }
@media (max-width: 1199px) {
  #iub-legalDoc .aside-main-wrapper { display: block; padding: 24px; }
  #iub-legalDoc .aside-main-wrapper aside { margin-bottom: 32px; }
}

/* Storia (02/10/2026): primo logo e confronto prima/dopo del box */
.storia-logo { margin-left: 0; margin-right: 0; width: 9rem; }
.storia-logo picture, .storia-logo img { display: block; width: 9rem; height: 9rem; border-radius: var(--radius-xl); rotate: -4deg; box-shadow: var(--shadow-3); }
.storia-logo figcaption { margin-top: .9rem; font-size: var(--text-xs); color: var(--color-grey-50); }
.storia-pd { margin: 0; }
.storia-pd-foto { position: relative; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--color-night-600); aspect-ratio: 3 / 2; user-select: none; }
.storia-pd-foto picture, .storia-pd-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.storia-pd-prima { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.storia-pd-linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: var(--color-green-500); pointer-events: none; }
.storia-pd-linea span { position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; translate: -50% -50%; border-radius: var(--radius-full); background: var(--color-green-500); box-shadow: var(--shadow-2); }
.storia-pd-linea span::before, .storia-pd-linea span::after { content: ""; position: absolute; top: 50%; width: .5rem; height: .5rem; border: solid var(--color-night-850); border-width: 0 0 2px 2px; }
.storia-pd-linea span::before { left: .7rem; translate: 0 -50%; rotate: 45deg; }
.storia-pd-linea span::after { right: .7rem; translate: 0 -50%; rotate: -135deg; }
.storia-pd-tag { position: absolute; top: 1rem; z-index: 1; padding: .35rem .7rem; border-radius: var(--radius-sm); background: rgb(var(--rgb-night-850) / .85); font-family:var(--font-display);
  font-weight: 900; font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-sand-50); pointer-events: none; }
.storia-pd-tag--prima { left: 1rem; } .storia-pd-tag--dopo { right: 1rem; color: var(--color-green-500); }
.storia-pd-range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.storia-pd-foto:has(.storia-pd-range:focus-visible) { outline: 3px solid var(--color-green-500); outline-offset: 3px; }
.storia-pd figcaption { margin-top: .6rem; font-size: var(--text-sm); color: var(--color-grey-50); }

/* form: nota Reformer senza prova gratuita (02/10/2026) */
.form-nota-reformer { display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem; padding: .75rem .9rem; border-radius: var(--radius-md);
  background: var(--color-clay-50); color: var(--color-clay-800); font-size: var(--text-sm-plus); line-height: 1.45; }
.form-nota-reformer[hidden] { display: none; }
.form-nota-reformer svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.form-chip .form-nota-reformer span { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; box-shadow: none; }

/* 02/10/2026: barre delle aree nascoste finché la sezione non arriva in cima (aree.js, .is-pronta) */
.aree--scroll .aree-nav { opacity: 0; transform: translateY(-6px); transition: opacity var(--duration-slow), transform var(--duration-slow); pointer-events: none; }
.aree--scroll .aree-nav.is-pronta, .aree--scroll .aree-nav:focus-within { opacity: 1; transform: none; pointer-events: auto; }

/* 12/10/2026: orari di apertura (footer, contatti). Con due fasce (es. sabato) il valore può andare
   su due righe: allineato a destra come le altre righe. */
.orari-valore { text-align: right; }