/* ===========================================================================
   Professional Gallery (12/10/2026; fino al 14/10 «Trainer Gallery»): la gallery
   dei professionisti dell'app e la pagina di ognuno col modulo «Contatta».
   Dal 14/10, dal mockup del cliente (professional-gallery-mockup.html, copia in
   .backup/2026-10-14-prima-della-professional-gallery/): nell'hero la frase grande
   a sinistra e il blocco «Sei un professionista?», e la sezione «Perché BULB» fra
   la fascia nera e la gallery. Stile sempre questo, non quello del mockup.

   Layout generale della landing evento BULB Celebrate (pages/celebrate.css):
   grigio #F5F4F1 (dal 19/10, il «bianco grigino» della hero del mockup; prima
   #CACACA, e i riquadri bianchi sul grigio ora hanno il bordo del mockup,
   --ce-bordo-bianco), nero #0D0C0F, rosso #C4032F, rosa #F58BA6, angoli vivi,
   titoli maiuscoli Black con la parte sottile sotto, etichette spaziate fra
   parentesi quadre, bottoni squadrati. Token, testata, bottoni, titoli, hero,
   modulo, chiusura e footer sono COPIATI da celebrate.css: se cambiano lì, vanno
   riportati qui a mano.

   Le schede dei trainer sono quelle della gallery a scorrimento delle landing v2
   (pages/fitness-lover.css + sv-base.css «Gallery trainer dall'app»): fondo
   #1D1A1F, foto 4:5, nome a 17px, specializzazioni in maiuscolo spaziato grigio
   #B4B3B4, bordo rosso al passaggio del mouse. Dal 12/10 sera ad angoli dritti,
   come bottoni e riquadri della Celebrate (richiesta dell'utente).

   Gallery: filtri in una colonna a sinistra (da telefono e tablet un pannello che
   entra da sinistra), tre schede per riga, caricate a blocchi mentre si scorre
   (tools/trainer-gallery.js).

   Caratteri dai ruoli: --font-display, --font-sans, --font-mono.

   Scostamenti voluti (gli stessi della Celebrate): testo rosso piccolo sul
   grigio #A80230; segnaposto #757478 (sul grigio #555458); etichette a 12px.
   Testata: il marchio porta a bulbspace.it, a destra i due bottoni del menu
   «Testata — Trainer Gallery» (gli stessi dell'hero: il primo rosso); da
   telefono marchio e bottoni su una riga, niente burger. La testata è fissa in
   alto: «Sfoglia i trainer» si vede sempre.
   =========================================================================== */

:root {
  --ce-rosso: #C4032F;
  --ce-rosso-testo: #A80230;
  --ce-rosa: #F58BA6;
  --ce-nero: #0D0C0F;
  --ce-grigio: #F5F4F1;
  --ce-grigio-medio: #9A9A9C;
  --ce-bianco: #FFFFFF;
  --ce-bordo-bianco: rgba(0,0,0,.1);
  --ce-linea: rgba(13,12,15,.14);
  --ce-linea-chiara: rgba(255,255,255,.14);
  /* La scheda delle landing v2. */
  --tg-scheda: #1D1A1F;
  --tg-scheda-testo: #B4B3B4;

  --bg: var(--ce-grigio);
  --bg-alt: var(--ce-grigio);
  --bg-deep: var(--ce-nero);
  --surface: var(--ce-bianco);
  --ink: var(--ce-nero);
  --ink-soft: #2B2A2E;
  --ink-mute: #4A494D;
  --accent: var(--ce-rosso);
  --accent-dark: var(--ce-rosso-testo);
  --accent-hot: var(--ce-rosso);
  --border: var(--ce-linea);
  --border-soft: var(--ce-linea);
  --placeholder: #757478;
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --container: 1320px;
}
html:root { --gutter: 40px; scroll-padding-top: 80px; }
@media (max-width: 980px) { html:root { --gutter: 22px; } }
@media (max-width: 640px) { html:root { --gutter: 16px; } }

body { background: var(--ce-grigio); color: var(--ce-nero); }
a:hover { text-decoration: none; }

/* Testo solo per gli screen reader (il nome dei gruppi di filtri nel <legend>,
   l'avviso «Link copiato»). Il tema non ha questa regola: sulle landing arriva col
   foglio del plugin Bulb Integration, che qui non si carica. È quella di WordPress. */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}

/* --- Microtesti spaziati e parentesi quadre --------------------------------- */
.tg-mono {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: var(--mono-tracking); text-transform: uppercase;
}
.tg-parentesi::before { content: "[ " / ""; }
.tg-parentesi::after { content: " ]" / ""; }
.eyebrow {
  font-size: 12px; letter-spacing: var(--mono-tracking);
  color: var(--ce-rosso-testo);
}
.eyebrow::before, .eyebrow::after { color: inherit; font-weight: inherit; letter-spacing: 0; }
.eyebrow::before { margin-right: .6em; }
.eyebrow::after { margin-left: .6em; }

/* --- Testata: grigio velato, marchio nero, i tre bottoni --------------------- */
.site-header {
  background: rgba(245,244,241,.94); /* --ce-grigio velato */
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ce-linea);
}
/* L'altezza è --nav-h: la usa anche lo spazio della testata fissa da telefono. */
html:root { --nav-h: 64px; }
.nav { height: var(--nav-h); gap: 14px; justify-content: flex-start; }
.site-header .brand-logo { height: 26px; width: 26px; object-fit: contain; filter: brightness(0); }
.nav-claim {
  font-family: var(--font-display); font-size: 24px; font-weight: 400;
  letter-spacing: .01em; text-transform: none; color: var(--ce-rosso);
}
.nav-links { margin-left: auto; gap: 8px; }
.nav-links a {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 11px 16px; border: 1px solid var(--ce-nero);
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--ce-nero); line-height: 1.15;
  transition: background .2s, color .2s, border-color .2s;
}
.nav-links a:hover { background: var(--ce-nero); color: var(--ce-bianco); }
/* Il primo bottone («Sfoglia i trainer», come nell'hero) è rosso pieno. */
.nav-links a:first-child { background: var(--ce-rosso); border-color: var(--ce-rosso); color: var(--ce-bianco); }
.nav-links a:first-child:hover { background: var(--ce-nero); border-color: var(--ce-nero); }
.nav-links a.active::after { content: none; }

/* --- Bottoni: squadrati, maiuscolo spaziato --------------------------------- */
.btn {
  gap: 14px; border-radius: 0; padding: 20px 30px;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 13px; letter-spacing: var(--mono-tracking); text-transform: uppercase;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.btn-primary { background: var(--ce-rosso); color: var(--ce-bianco); }
.btn-primary:hover { background: var(--ce-nero); color: var(--ce-bianco); transform: translateY(-2px); }
.btn-primary::after { content: none; }
.btn-linea { background: transparent; color: inherit; border: 1px solid currentColor; }
.btn-linea:hover { background: var(--ce-nero); color: var(--ce-bianco); border-color: var(--ce-nero); }
.btn-bianco { background: var(--ce-bianco); color: var(--ce-rosso); }
.btn-bianco:hover { background: var(--ce-nero); color: var(--ce-bianco); }
.btn-sm { padding: 12px 20px; font-size: 12px; }
.tg-bottoni { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Titoli di sezione -------------------------------------------------------- */
.tg-h2 {
  font-family: var(--font-display); font-size: clamp(44px, 7vw, 112px);
  font-weight: 900; line-height: .88; letter-spacing: -.02em; text-transform: uppercase;
}
.tg-h2 em, .tg-hero-titolo em, .tg-chiusura-titolo em, .tg-prof-nome em {
  display: block; font-style: normal; font-weight: 300;
}
.tg-testa {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap; margin-bottom: 48px;
}
.tg-testa-titolo { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tg-testa > p { font-size: 17px; line-height: 1.6; max-width: 420px; text-wrap: pretty; }

/* --- In alto (la gallery): come l'hero della Celebrate ----------------------- */
section.tg-hero {
  padding: 0 !important;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(88svh - 64px);
}
.tg-hero-sx {
  background: var(--ce-grigio); padding: 48px 40px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: 40px; border-right: 1px solid var(--ce-linea);
}
/* In alto il sopratitolo, la frase grande (il titolo della pagina, h1) e il testo. */
.tg-hero-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.tg-hero-lead {
  font-family: var(--font-display); font-size: 28px; font-weight: 400;
  line-height: 1.2; letter-spacing: -.01em; text-transform: none; max-width: 420px; text-wrap: balance;
}
.tg-hero-lead b, .tg-hero-lead strong { font-weight: 800; }
.tg-hero-testo { font-size: 18px; line-height: 1.55; max-width: 400px; text-wrap: pretty; }
.tg-hero-testo b { font-weight: 700; }
/* In basso il bottone e, dopo una riga sottile, il blocco per i professionisti
   («Sei un professionista?», una riga, il link alla landing trainer). */
.tg-hero-azioni { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; align-self: stretch; }
.tg-hero-pro {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  align-self: stretch; max-width: 400px; padding-top: 20px; border-top: 1px solid var(--ce-linea);
}
.tg-hero-pro-titolo { font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.tg-hero-nota { font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.tg-hero-pro a {
  display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700;
  color: var(--ce-rosso-testo); text-decoration: underline; text-underline-offset: 3px;
}
.tg-hero-pro a:hover { color: var(--ce-nero); text-decoration: underline; }
.tg-hero-pro a svg { flex-shrink: 0; transition: transform .2s; }
.tg-hero-pro a:hover svg { transform: translateX(3px); }
.tg-hero-dx {
  container-type: inline-size;
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--ce-bianco); padding: 48px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(ellipse at 18% 78%, #FF9BB4 0%, #E8637F 22%, transparent 52%),
    radial-gradient(ellipse at 64% 58%, #5C0014 0%, transparent 45%),
    linear-gradient(100deg, #F07A95 0%, #B8243F 36%, #3A030C 66%, #050304 100%);
}
.tg-hero-dx::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0px, rgba(255,255,255,.10) 14px, rgba(0,0,0,.18) 28px, rgba(255,255,255,0) 42px);
  mix-blend-mode: overlay;
}
.tg-hero-dx::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%);
}
.tg-hero-tag {
  position: absolute; top: 48px; right: 48px; max-width: 14em; text-align: right;
  font-family: var(--font-display); font-size: 24px; font-weight: 300; line-height: 1.2;
}
/* Il titolo grande: la parola più lunga (--tg-em, larghezza in em dal template,
   sv_tg_em_titolo()) deve stare sul rosso senza andare a capo a metà
   («PROFESSIONISTA.»). La prima regola resta per i browser senza container query. */
.tg-hero-titolo {
  font-family: var(--font-display); font-size: clamp(50px, 8.4vw, 150px);
  font-size: min(150px, 8.4vw, calc(100cqi / var(--tg-em, 8)));
  font-weight: 900; line-height: .86; letter-spacing: -.02em; text-transform: uppercase;
}
.tg-hero-sotto {
  font-family: var(--font-display); font-size: clamp(16px, 2.2vw, 36px);
  font-weight: 500; line-height: 1.15; max-width: 18em; margin-top: .5em; text-wrap: balance;
}
.tg-hero-base {
  grid-column: 1 / -1;
  /* Tante colonne uguali quante caselle (un'etichetta vuota toglie la sua). */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--ce-nero); color: var(--ce-bianco);
}
.tg-hero-base > div, .tg-hero-base > a {
  padding: 24px 40px; border-right: 1px solid var(--ce-linea-chiara);
  display: flex; flex-direction: column; gap: 6px;
}
.tg-hero-base > :last-child { border-right: none; }
.tg-hero-k { color: var(--ce-grigio-medio); }
.tg-hero-v { font-family: var(--font-display); font-size: 40px; font-weight: 900; line-height: 1; }
.tg-hero-badge { background: var(--ce-rosso); align-items: center; justify-content: center; text-align: center; }
/* La casella rossa porta dove porta il bottone dell'hero (alla gallery). */
a.tg-hero-badge { color: var(--ce-bianco); transition: background .2s, color .2s; }
a.tg-hero-badge:hover { background: var(--ce-bianco); color: var(--ce-rosso-testo); }
a.tg-hero-badge:focus-visible { outline: 2px solid var(--ce-bianco); outline-offset: -6px; }

/* --- Perché BULB (14/10): titolo, quattro riquadri (rosso, nero, due bianchi) e
   una riga col numero dei professionisti e il bottone; poi la gallery. --------- */
.tg-perche { background: var(--ce-grigio); padding: 120px 0 0; }
.tg-perche .tg-testa-titolo { flex: 1 1 560px; min-width: 0; container-type: inline-size; }
.tg-perche .tg-testa > p { flex: 0 1 400px; }
/* Più piccolo dei titoli di sezione, e misurato sulla parola più lunga (--tg-em). */
.tg-perche .tg-h2 {
  font-size: clamp(36px, 4.6vw, 72px);
  font-size: min(72px, max(36px, 4.6vw), calc(100cqi / var(--tg-em, 8)));
  line-height: .92;
}
.tg-perche-mosaico { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; }
.tg-perche-mosaico:has(> :only-child), .tg-perche-coppia:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.tg-perche-lato { display: grid; grid-template-rows: auto 1fr; gap: 14px; min-width: 0; }
.tg-perche-coppia { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; min-width: 0; }
.tg-perche-voce { display: flex; flex-direction: column; gap: 24px; padding: 40px; min-width: 0; }
.tg-perche-voce h3 {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  line-height: 1.2; letter-spacing: -.005em; text-wrap: balance;
}
.tg-perche-desc { font-size: 16px; line-height: 1.55; max-width: 560px; text-wrap: pretty; }
.tg-perche-fondo { display: flex; flex-direction: column; gap: 16px; }
/* Il riquadro rosso: l'etichetta in alto, la scritta enorme e il testo in fondo. */
.tg-perche-rosso { background: var(--ce-rosso); color: var(--ce-bianco); justify-content: space-between; min-height: 460px; }
.tg-perche-grande {
  font-family: var(--font-display); font-size: clamp(110px, 12vw, 180px);
  font-weight: 900; line-height: .85; letter-spacing: -.03em; white-space: nowrap;
}
.tg-perche-nero { background: var(--ce-nero); color: var(--ce-bianco); }
.tg-perche-nero .tg-perche-num { color: var(--ce-grigio-medio); }
.tg-perche-nero h3 { font-size: 28px; }
.tg-perche-nero .tg-perche-desc { color: #D9D9DB; }
.tg-perche-bianco { background: var(--ce-bianco); color: var(--ce-nero); box-shadow: inset 0 0 0 1px var(--ce-bordo-bianco); }
.tg-perche-bianco .tg-perche-num { color: var(--ce-rosso-testo); }
/* Le città dei professionisti, grandi e sottili, ognuna verso la gallery filtrata. */
.tg-perche-citta {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 34px); font-weight: 300; line-height: 1.2;
}
.tg-perche-citta a { display: inline-flex; align-items: center; gap: 10px; color: var(--ce-bianco); }
.tg-perche-citta a::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; background: var(--ce-rosso); }
.tg-perche-citta a:hover { color: var(--ce-bianco); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.tg-perche-citta a:focus-visible { outline: 2px solid var(--ce-rosa); outline-offset: 4px; }
/* Le discipline in vista, a casella; l'ultima, nera, dice quante altre ci sono. */
.tg-perche-discipline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tg-perche-discipline a, .tg-perche-altre {
  display: inline-block; padding: 8px 12px; border: 1px solid var(--ce-nero);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase;
  color: var(--ce-nero); transition: background .2s, color .2s;
}
.tg-perche-discipline a:hover, .tg-perche-altre { background: var(--ce-nero); color: var(--ce-bianco); }
.tg-perche-discipline a:focus-visible { outline: 2px solid var(--ce-rosso); outline-offset: 2px; }
/* L'ultimo riquadro: etichetta, il segno grande, titolo e testo in fondo. */
.tg-perche-quarto { justify-content: space-between; }
.tg-perche-segno { font-family: var(--font-display); font-size: 120px; font-weight: 300; line-height: .7; color: var(--ce-rosso); }
.tg-perche-quarto .tg-perche-fondo { gap: 10px; }
/* La riga in fondo: quanti professionisti, e il bottone verso la gallery. */
.tg-perche-chiusa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--ce-linea);
}
.tg-perche-chiusa p {
  font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 300; line-height: 1.2; text-wrap: balance;
}
.tg-perche-chiusa b, .tg-perche-chiusa strong { font-weight: 800; }

/* --- I trainer: filtri a sinistra, risultati a destra ------------------------------ */
.tg-elenco { background: var(--ce-grigio); padding: 120px 0; }
.tg-esplora {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px; align-items: start;
  padding-top: 32px; border-top: 1px solid var(--ce-linea);
}

/* La colonna dei filtri scorre con la pagina (fino al 12/10 sera era ferma, con uno
   scorrimento suo che passava sopra i numeri: tolto su richiesta dell'utente). */
.tg-filtri { min-width: 0; }
.tg-filtri-modulo { display: flex; flex-direction: column; }
.tg-filtri-testa { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; }
.tg-filtri-titolo {
  font-family: var(--font-display); font-size: 28px; font-weight: 900;
  line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}
.tg-filtri-chiudi { display: none; }
.tg-filtri-corpo { display: flex; flex-direction: column; }

.tg-cerca { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; }
.tg-cerca > span { color: var(--ink-mute); }
.tg-cerca input {
  width: 100%; min-width: 0; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid #77767A; padding: 10px 0 12px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--ce-nero);
}
/* Sul grigio il segnaposto del modulo (#757478) farebbe 2.8:1: qui più scuro. */
.tg-cerca input::placeholder { color: #555458; opacity: 1; }
.tg-cerca input:focus { outline: none; border-bottom-color: var(--ce-rosso); box-shadow: 0 1px 0 var(--ce-rosso); }
.tg-cerca input:focus-visible { outline: 2px solid var(--ce-rosso); outline-offset: 4px; }

/* Un gruppo per filtro, apribile (<details>): le scelte a casella, quante ne restano a
   destra. Sede e lingua partono chiusi; accanto al nome, quante scelte ha il gruppo. */
.tg-gruppo { border-top: 1px solid var(--ce-linea); min-width: 0; }
.tg-gruppo-testa {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0; cursor: pointer; list-style: none; user-select: none;
}
.tg-gruppo-testa::-webkit-details-marker { display: none; }
.tg-gruppo-testa .tg-mono { color: var(--ink-mute); }
.tg-gruppo-testa:hover .tg-mono { color: var(--ce-nero); }
.tg-gruppo-testa:focus-visible { outline: 2px solid var(--ce-rosso); outline-offset: 2px; }
/* La freccia, a destra: giù da chiuso, su da aperto. */
.tg-gruppo-testa::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 1.5px solid var(--ce-nero); border-bottom: 1.5px solid var(--ce-nero);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
.tg-gruppo[open] > .tg-gruppo-testa::after { transform: translateY(2px) rotate(-135deg); }
.tg-gruppo-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--ce-rosso); color: var(--ce-bianco); font-size: 12px; font-weight: 700;
}
.tg-gruppo-n[hidden] { display: none; }
.tg-gruppo fieldset { border: 0; margin: 0; padding: 0 0 18px; min-width: 0; }
.tg-opzioni { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .tg-gruppo-testa::after { transition: none; } }
.tg-opzioni [hidden] { display: none; }
.tg-opzione {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 7px 0; cursor: pointer; font-size: 15px; line-height: 1.3; color: var(--ce-nero);
}
.tg-opzione input { width: 18px; height: 18px; margin: 0; accent-color: var(--ce-rosso); cursor: pointer; }
.tg-opzione-nome small { display: block; font-size: 12px; color: var(--ink-mute); }
.tg-opzione-n { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px; color: var(--ink-mute); }
.tg-opzione:hover .tg-opzione-nome { text-decoration: underline; text-underline-offset: 3px; }
.tg-opzione:has(input:checked) .tg-opzione-nome { font-weight: 700; }
.tg-opzione:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.tg-opzione:has(input:disabled) input { cursor: not-allowed; }
.tg-altre {
  margin-top: 6px; padding: 6px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--ce-rosso-testo); text-decoration: underline; text-underline-offset: 3px;
}
.tg-altre:hover { color: var(--ce-nero); }

.tg-filtri-piede {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid var(--ce-linea);
}
.tg-azzera {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--ce-rosso-testo); text-decoration: underline; text-underline-offset: 3px;
}
.tg-azzera:hover { color: var(--ce-nero); text-decoration: underline; }
.tg-azzera[hidden] { display: none; }
/* Con lo script, su schermo grande si filtra subito: il bottone serve solo nel pannello. */
@media (min-width: 981px) { .tg-filtri.is-vivo .tg-filtri-mostra { display: none; } }
.tg-velo[hidden] { display: none; }

/* La testa dei risultati: quanti sono, i filtri scelti (si tolgono con un clic). */
.tg-risultati { min-width: 0; }
.tg-risultati-testa { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; min-height: 44px; margin-bottom: 24px; }
.tg-apri-filtri { display: none; }
.tg-apri-n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--ce-rosso); color: var(--ce-bianco); font-size: 12px; letter-spacing: 0;
}
.tg-apri-n[hidden] { display: none; }
.tg-conteggio {
  font-family: var(--font-display); font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em;
}
.tg-attivi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tg-attivi:empty { display: none; }
.tg-attivo {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--ce-nero); color: var(--ce-bianco);
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s;
}
.tg-attivo span { font-size: 16px; line-height: 1; }
.tg-attivo:hover, .tg-attivo:focus-visible { background: var(--ce-rosso); color: var(--ce-bianco); }
.tg-attivo:focus-visible { outline: 2px solid var(--ce-nero); outline-offset: 2px; }

/* L'ordine (casuale / per nome), a destra in cima ai risultati. */
.tg-ordina { order: 10; margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.tg-ordina > span { color: var(--ink-mute); }
.tg-ordina select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1px solid var(--ce-nero); border-radius: 0; background-color: transparent;
  padding: 10px 34px 10px 12px; color: var(--ce-nero);
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  background-image: linear-gradient(45deg, transparent 50%, var(--ce-nero) 50%), linear-gradient(135deg, var(--ce-nero) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.tg-ordina select:focus-visible { outline: 2px solid var(--ce-rosso); outline-offset: 2px; }
.tg-ordina option { text-transform: none; }

/* In fondo: «Mostra altri trainer» (lo script lo fa da solo, scorrendo). */
.tg-carica { display: flex; justify-content: center; padding-top: 32px; }
.tg-carica[hidden] { display: none; }

/* --- Le schede: quelle della gallery delle landing, ad angoli dritti --------------- */
.tg-griglia {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
/* Sulla pagina di un trainer, senza la colonna dei filtri: quattro per riga. */
.tg-griglia-altri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-voce[hidden] { display: none; }
/* Le schede aggiunte scorrendo entrano piano. */
.tg-voce.is-nuova { animation: tg-entra .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes tg-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tg-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--tg-scheda); color: var(--ce-bianco);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.tg-card:hover { color: var(--ce-bianco); box-shadow: 0 0 0 1px var(--ce-rosso); transform: translateY(-2px); }
.tg-card:focus-visible { outline: 2px solid var(--ce-rosso); outline-offset: 3px; }
.tg-card-media {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(160deg, #2B2A2E, var(--tg-scheda));
}
/* I ritratti dell'app sono foto libere: il viso sta quasi sempre nella metà alta. */
.tg-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tg-card-corpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.tg-card-nome {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  line-height: 1.2; letter-spacing: 0; color: var(--ce-bianco);
}
.tg-card-meta { font-size: 13px; line-height: 1.4; color: var(--tg-scheda-testo); }
.tg-card-tag {
  margin-top: 6px;
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px;
  line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--tg-scheda-testo);
}
@media (prefers-reduced-motion: reduce) {
  .tg-card { transition: none; }
  .tg-card:hover { transform: none; }
  .tg-voce.is-nuova { animation: none; }
}

.tg-vuoto {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 48px 0; border-top: 1px solid var(--ce-linea);
}
.tg-vuoto[hidden] { display: none; }
.tg-vuoto-titolo { font-family: var(--font-display); font-size: 28px; font-weight: 900; text-transform: uppercase; }

/* --- Condividi ---------------------------------------------------------------------- */
.tg-condividi { display: flex; flex-direction: column; gap: 12px; }
.tg-elenco .tg-condividi { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ce-linea); }
.tg-condividi-titolo { color: var(--ink-mute); }
.tg-condividi-voci { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tg-condividi-voci [hidden] { display: none; }
.tg-condividi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--ce-nero); background: transparent; color: var(--ce-nero); cursor: pointer;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.tg-condividi-btn:hover { background: var(--ce-nero); color: var(--ce-bianco); }
.tg-condividi-btn:focus-visible { outline: 2px solid var(--ce-rosso); outline-offset: 2px; }
.tg-condividi-btn.is-fatto { background: var(--ce-rosso); border-color: var(--ce-rosso); color: var(--ce-bianco); }

/* --- La pagina del trainer ------------------------------------------------------------ */
.tg-prof { background: var(--ce-grigio); padding: 40px 0 96px; }
.tg-indietro {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 36px;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: var(--mono-tracking); text-transform: uppercase; color: var(--ce-nero);
}
.tg-indietro svg { transform: scaleX(-1); transition: transform .2s; }
.tg-indietro:hover { color: var(--ce-rosso-testo); }
.tg-indietro:hover svg { transform: scaleX(-1) translateX(3px); }
.tg-prof-layout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px; align-items: start;
}
.tg-prof-foto {
  aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(160deg, #2B2A2E, var(--tg-scheda));
}
.tg-prof-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tg-prof-testa, .tg-contatta-sx { container-type: inline-size; }
.tg-prof-testa { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 8px; }
/* Il nome nel titolo: la parola più lunga (--tg-car, dal template) deve stare
   nella colonna senza andare a capo a metà. 0.72em è la larghezza media di una
   lettera maiuscola nel Black del titolo, con margine. */
.tg-prof-nome {
  font-family: var(--font-display); font-size: clamp(48px, 7.4vw, 124px);
  font-size: min(124px, 7.4vw, calc(100cqi / (var(--tg-car, 8) * .72)));
  font-weight: 900; line-height: .88; letter-spacing: -.02em; text-transform: uppercase;
  overflow-wrap: anywhere; align-self: stretch;
}
.tg-h2-nome { font-size: min(112px, 7vw, calc(100cqi / (var(--tg-car, 8) * .72))); align-self: stretch; }
.tg-prof-citta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
}
.tg-prof-citta svg { color: var(--ce-rosso); }
/* Instagram del professionista (dal 17/10): sotto la città, nella stessa riga. */
.tg-prof-instagram { margin: 0; max-width: 100%; font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.tg-prof-citta + .tg-prof-instagram { margin-top: -14px; }
.tg-prof-instagram a {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  color: inherit; text-decoration: none; overflow-wrap: anywhere;
}
.tg-prof-instagram a:hover { color: var(--ce-rosso); text-decoration: underline; text-underline-offset: 4px; }
.tg-prof-instagram svg { flex: none; color: var(--ce-rosso); }
/* «Scrivi a … su Instagram» con un nome lungo non sta in una riga da telefono: va a
   capo invece di uscire dallo schermo. */
.tg-prof-testa .tg-bottoni { max-width: 100%; }
.tg-prof-testa .tg-bottoni .btn { max-width: 100%; white-space: normal; text-align: left; }
.tg-prof-testa .tg-bottoni .btn svg { flex: none; }
.tg-pastiglie { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tg-pastiglie li {
  padding: 8px 12px; background: var(--ce-bianco); border: 1px solid var(--ce-bordo-bianco);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.tg-prof-testa .tg-condividi { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--ce-linea); align-self: stretch; }

/* Bio e fatti: la fascia nera, come «La giornata» della Celebrate. */
.tg-info { background: var(--ce-nero); color: var(--ce-bianco); padding: 112px 0; }
.tg-info-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 72px; }
.tg-info .eyebrow { color: var(--ce-rosa); display: inline-block; margin-bottom: 24px; }
.tg-bio-testo { font-size: 18px; line-height: 1.7; color: #D9D9DB; max-width: 720px; }
.tg-bio-testo p { margin: 0 0 1em; }
.tg-fatti { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--ce-linea-chiara); }
.tg-fatto { padding: 22px 0; border-bottom: 1px solid var(--ce-linea-chiara); }
.tg-fatto dt { color: var(--ce-rosa); margin-bottom: 10px; }
.tg-fatto dd { margin: 0; }
.tg-fatto ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tg-fatto li { font-family: var(--font-display); font-size: 18px; font-weight: 500; }

/* Il modulo: come l'iscrizione della Celebrate. */
.tg-contatta { background: var(--ce-grigio); padding: 120px 0; }
.tg-contatta-layout {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 72px; align-items: start;
}
.tg-contatta-sx { position: sticky; top: 100px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.tg-contatta-sx > p { font-size: 17px; line-height: 1.6; max-width: 440px; text-wrap: pretty; }
.tg-modulo { background: var(--ce-bianco); padding: 40px; border: 1px solid var(--ce-bordo-bianco); }
.tg-modulo-nota { margin-top: 20px; font-size: 13px; line-height: 1.6; color: #6B6A6E; }

/* Il modulo WPForms sul bianco: campi a riga sotto, etichette spaziate.
   Tutto !important: il foglio di WPForms è accodato dopo quello del tema. */
.tg-modulo .wpforms-container .wpforms-field-container { gap: 20px 16px !important; }
.tg-modulo .wpforms-container .wpforms-field-name,
.tg-modulo .wpforms-container .wpforms-field-email { grid-column: auto !important; }
.tg-modulo .wpforms-container .wpforms-field-textarea { grid-column: 1 / -1 !important; }
.tg-modulo .wpforms-container .wpforms-field-label {
  font-family: var(--font-mono) !important; font-weight: var(--mono-weight) !important;
  font-size: 12px !important; letter-spacing: var(--mono-tracking) !important;
  text-transform: uppercase !important; color: #4A494D !important; margin-bottom: 8px !important;
}
.tg-modulo .wpforms-container .wpforms-required-label { color: var(--ce-rosso) !important; }
.tg-modulo .wpforms-container input[type="text"],
.tg-modulo .wpforms-container input[type="email"],
.tg-modulo .wpforms-container input[type="tel"],
.tg-modulo .wpforms-container textarea {
  background-color: transparent !important; border: 0 !important;
  border-bottom: 1px solid #BDBDBF !important; border-radius: 0 !important;
  padding: 10px 0 12px !important; box-shadow: none !important;
  font-family: var(--font-sans) !important; font-size: 17px !important; font-weight: 500 !important;
  color: var(--ce-nero) !important;
}
.tg-modulo .wpforms-container textarea {
  border: 1px solid #BDBDBF !important; padding: 12px 14px !important;
  min-height: 140px !important; resize: vertical; line-height: 1.5 !important;
}
.tg-modulo .wpforms-container input:focus,
.tg-modulo .wpforms-container textarea:focus { border-color: var(--ce-rosso) !important; box-shadow: none !important; }
.tg-modulo .wpforms-container input.wpforms-error,
.tg-modulo .wpforms-container textarea.wpforms-error { border-color: var(--ce-rosso) !important; background-color: rgba(196,3,47,.05) !important; }
.tg-modulo .wpforms-container .wpforms-error,
.tg-modulo .wpforms-container label.wpforms-error,
.tg-modulo .wpforms-container .wpforms-error-container { color: var(--ce-rosso-testo) !important; font-size: 13px !important; }
.tg-modulo .wpforms-container fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tg-modulo .wpforms-field-checkbox label {
  font-size: 15px !important; line-height: 1.5 !important; color: var(--ce-nero) !important;
}
.tg-modulo .wpforms-field-checkbox input[type="checkbox"] { width: 18px !important; height: 18px !important; accent-color: var(--ce-rosso); }
.tg-modulo .wpforms-container .wpforms-submit-container { margin-top: 4px; }
.tg-modulo .wpforms-container button.wpforms-submit {
  width: 100% !important; border-radius: 0 !important; padding: 22px !important;
  background: var(--ce-rosso) !important; color: var(--ce-bianco) !important;
  font-family: var(--font-mono) !important; font-weight: var(--mono-weight) !important;
  font-size: 14px !important; letter-spacing: var(--mono-tracking) !important;
}
.tg-modulo .wpforms-container button.wpforms-submit::after { content: none; }
.tg-modulo .wpforms-container button.wpforms-submit:hover { background: var(--ce-nero) !important; transform: none; }

/* Dopo l'invio: «Fatto.» sul rosso, al posto del modulo. */
.tg-modulo:has(.wpforms-confirmation-container-full) { padding: 0; background: var(--ce-rosso); }
.tg-modulo:has(.wpforms-confirmation-container-full) .tg-modulo-nota { display: none; }
.tg-modulo .wpforms-confirmation-container-full {
  background: var(--ce-rosso) !important; border: 0 !important; border-radius: 0 !important;
  color: var(--ce-bianco) !important; padding: 48px 40px !important; margin: 0 !important;
}
.tg-modulo .tg-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tg-modulo .tg-ok, .tg-modulo .tg-ok p, .tg-modulo .tg-ok span { color: var(--ce-bianco) !important; }
.tg-modulo .tg-ok .eyebrow { color: var(--ce-bianco); font-size: 12px; text-transform: uppercase; }
.tg-modulo .tg-ok-titolo {
  font-family: var(--font-display); font-size: clamp(48px, 6vw, 88px);
  font-weight: 900; line-height: .9; text-transform: uppercase;
}
.tg-modulo .tg-ok-testo { font-size: 17px; line-height: 1.6; max-width: 460px; }

/* Altri trainer della stessa città. */
.tg-altri { background: var(--ce-bianco); padding: 112px 0; }
.tg-altri .tg-h2 { font-size: clamp(36px, 4.6vw, 72px); }

/* --- Chiusura rossa ------------------------------------------------------------------ */
.tg-chiusura { background: var(--ce-rosso); color: var(--ce-bianco); padding: 120px 0 0; overflow: hidden; }
.tg-chiusura .container { container-type: inline-size; }
/* Misurato sulla parola più lunga (--tg-em): «PROFESSIONISTA?» da telefono. */
.tg-chiusura-titolo {
  font-family: var(--font-display); font-size: clamp(48px, 9vw, 150px);
  font-size: min(150px, max(48px, 9vw), calc(100cqi / var(--tg-em, 8)));
  font-weight: 900; line-height: .86; letter-spacing: -.02em; text-transform: uppercase;
}
.tg-chiusura-piede {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;
  margin-top: 48px; padding-bottom: 80px;
}
.tg-chiusura-piede p { font-size: 18px; line-height: 1.6; max-width: 480px; }

/* --- Footer della pagina: una riga nera ----------------------------------------------- */
.site-footer-pagina { background: var(--ce-nero); color: var(--ce-grigio-medio); padding: 28px 0 40px; }
.foot-pagina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: center; }
.foot-pagina-col { font-family: var(--font-display); font-size: 15px; }
.foot-pagina-col:nth-child(2) {
  text-align: center; font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; letter-spacing: var(--mono-tracking); text-transform: uppercase;
}
.foot-pagina-col:nth-child(2)::before { content: "[ " / ""; }
.foot-pagina-col:nth-child(2)::after { content: " ]" / ""; }
.foot-pagina-col:last-child { text-align: right; }
.foot-pagina-logo { display: inline; }
.foot-pagina-logo img { display: inline-block; width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 10px; }
.site-footer-pagina .foot-bottom { margin-top: 16px; color: var(--ce-grigio-medio); }
.site-footer-pagina a { color: var(--ce-grigio-medio); }
.site-footer-pagina a:hover { color: var(--ce-bianco); }

/* --- Schermi medi --------------------------------------------------------------------- */
/* Con la colonna dei filtri accanto, sotto i 1100px tre schede sarebbero strette. */
@media (max-width: 1100px) and (min-width: 981px) {
  .tg-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .tg-griglia-altri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Tablet e telefono (una colonna sotto i 980px, come la Celebrate) ----------------- */
@media (max-width: 980px) {
  section.tg-hero { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .tg-hero-sx { order: 2; padding: 40px 22px; border-right: none; }
  .tg-hero-dx { min-height: 64svh; padding: 112px 22px 36px; }
  .tg-hero-tag { top: 28px; right: 22px; font-size: 18px; }
  .tg-hero-titolo { font-size: min(80px, 11.5vw, calc(100cqi / var(--tg-em, 8))); }
  .tg-hero-lead { font-size: 24px; }
  .tg-hero-base { order: 3; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tg-hero-base > div, .tg-hero-base > a { padding: 18px 22px; }
  .tg-hero-badge { grid-column: 1 / -1; }

  /* Perché BULB: il riquadro rosso sopra, gli altri sotto. */
  .tg-perche { padding: 80px 0 0; }
  .tg-perche-mosaico { grid-template-columns: minmax(0, 1fr); }
  .tg-perche-rosso { min-height: 0; }
  .tg-perche-voce { padding: 32px 28px; }

  .tg-elenco, .tg-contatta { padding: 80px 0; }
  .tg-info, .tg-altri { padding: 80px 0; }
  .tg-prof-layout, .tg-info-layout, .tg-contatta-layout { grid-template-columns: 1fr; gap: 40px; }
  .tg-prof-foto { max-width: 520px; }
  .tg-contatta-sx { position: static; }
  .tg-modulo { padding: 28px 20px; }

  .foot-pagina { grid-template-columns: 1fr; gap: 12px; }
  .foot-pagina-col, .foot-pagina-col:nth-child(2), .foot-pagina-col:last-child { text-align: left; }

  /* I filtri diventano un pannello che entra da sinistra, sopra la testata, col
     velo dietro; si apre col bottone «Filtri», che resta in vista in cima ai
     risultati. Chiuso è nascosto anche per il Tab (visibility). */
  .tg-esplora { grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: 0; }
  .tg-filtri {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    width: min(420px, 100%); max-height: none;
    background: var(--ce-grigio); overflow: hidden;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .35s cubic-bezier(.16,1,.3,1), visibility .35s;
  }
  /* Aprendo la visibilità cambia subito (il fuoco va sulla X appena si apre);
     chiudendo, aspetta la fine dello scorrimento. */
  .tg-filtri.is-aperto {
    transform: none; visibility: visible; box-shadow: 0 0 48px rgba(13,12,15,.35);
    transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s;
  }
  .tg-filtri-modulo { height: 100%; }
  .tg-filtri-testa { padding: 12px 22px; border-bottom: 1px solid var(--ce-linea); }
  .tg-filtri-chiudi {
    display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
    border: 1px solid var(--ce-nero); background: transparent; color: var(--ce-nero);
  }
  .tg-filtri-chiudi:hover { background: var(--ce-nero); color: var(--ce-bianco); }
  .tg-filtri-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px; }
  .tg-filtri-piede { padding: 12px 22px; border-top: 1px solid var(--ce-linea); background: var(--ce-grigio); }
  .tg-velo { position: fixed; inset: 0; z-index: 65; background: rgba(13,12,15,.55); }
  body.tg-pannello-aperto { overflow: hidden; }
  .tg-apri-filtri { display: inline-flex; padding: 11px 14px; }
  .tg-risultati-testa {
    position: sticky; top: 64px; z-index: 5;
    margin: 0 0 16px; padding: 10px 0;
    background: var(--ce-grigio); border-bottom: 1px solid var(--ce-linea);
  }
  .tg-conteggio { font-size: 18px; }
  /* La barra in cima ai risultati resta bassa: le etichette dei filtri scelti su
     una riga che scorre di lato; «Azzera» è già in fondo al pannello. */
  .tg-attivi {
    order: 20; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .tg-attivi::-webkit-scrollbar { display: none; }
  .tg-attivi li { flex: 0 0 auto; }
  .tg-risultati-testa [data-tg-azzera-testa] { display: none; }

  /* Testata: i bottoni restano in riga accanto al marchio, niente burger. */
  .site-header#main-nav .nav-links {
    display: flex !important; position: static; inset: auto; flex-direction: row;
    align-items: stretch; gap: 6px; margin-left: auto;
    background: none; border: 0; box-shadow: none; padding: 0; max-height: none; overflow: visible;
  }
  .site-header#main-nav .nav-links > a { padding: 9px 12px !important; font-size: 12px !important; border-bottom: 1px solid var(--ce-nero); }
  .site-header#main-nav .nav-links > a:first-child { border-bottom-color: var(--ce-rosso); }
  .site-header#main-nav .nav-burger { display: none !important; }
}

@media (max-width: 760px) {
  .tg-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 640px) {
  /* sv-responsive.css ferma tutti gli h1 a 40px: questi sono titoli del layout (il
     titolo grande è un h1 solo se la frase a sinistra è vuota). */
  .tg-hero .tg-hero-titolo { font-size: min(80px, 11.5vw, calc(100cqi / var(--tg-em, 8))) !important; }
  .tg-hero .tg-hero-lead { font-size: 22px !important; }
  .tg-prof .tg-prof-nome { font-size: min(72px, 13vw, calc(100cqi / (var(--tg-car, 8) * .72))) !important; }
  .tg-h2-nome { font-size: min(64px, 12vw, calc(100cqi / (var(--tg-car, 8) * .72))); }
  .tg-hero-sx { padding: 36px 16px; }
  .tg-hero-dx { padding: 96px 16px 32px; }
  .tg-hero-tag { right: 16px; }
  /* I numeri in righe: a tre colonne «PROFESSIONISTI» non ci sta. */
  .tg-hero-base { grid-template-columns: 1fr; }
  .tg-hero-base > div, .tg-hero-base > a {
    padding: 14px 16px; flex-direction: row; justify-content: space-between; align-items: center;
    border-right: none; border-bottom: 1px solid var(--ce-linea-chiara);
  }
  .tg-hero-base > :last-child { border-bottom: none; }
  .tg-hero-v { font-size: 30px; }

  /* Perché BULB: tutto in colonna, riquadri coi 16px della pagina. */
  .tg-perche .tg-testa-titolo, .tg-perche .tg-testa > p { flex-basis: 100%; }
  .tg-perche-coppia { grid-template-columns: minmax(0, 1fr); }
  .tg-perche-voce { padding: 28px 16px; gap: 20px; }
  .tg-perche-voce h3, .tg-perche-nero h3 { font-size: 22px; }
  .tg-perche-segno { font-size: 96px; }
  .tg-perche-chiusa { margin-top: 40px; }
  .tg-perche-chiusa .btn { width: 100%; white-space: normal; text-align: center; }
  .tg-modulo { padding: 24px 16px; }
  .tg-modulo .wpforms-confirmation-container-full { padding: 36px 16px !important; }
  .tg-chiusura-piede .btn { width: 100%; white-space: normal; text-align: center; }

  /* L'ordine: senza etichetta, il menu basta da solo (il nome resta per gli
     screen reader). */
  .tg-ordina > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
  }
  /* Bottone «Filtri», numero e ordine su una riga sola. */
  .tg-risultati-testa { gap: 8px; }
  .tg-apri-filtri { padding: 9px 10px; gap: 8px; }
  .tg-conteggio { font-size: 16px; }
  .tg-ordina select { padding: 9px 26px 9px 9px; letter-spacing: .04em; background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; }

  /* Il pannello dei filtri a tutto schermo, coi 16px di margine della pagina. */
  .tg-filtri { width: 100%; }
  .tg-filtri-testa, .tg-filtri-corpo, .tg-filtri-piede { padding-left: 16px; padding-right: 16px; }
  .tg-filtri-mostra { flex: 1; justify-content: center; }
  .tg-risultati-testa { gap: 8px 12px; }

  /* Due schede per riga anche sul telefono, più compatte. */
  .tg-card-corpo { padding: 12px 12px 14px; gap: 4px; }
  .tg-card-nome { font-size: 15px; }
  .tg-card-meta { font-size: 12px; }
  .tg-card-tag { font-size: 12px; letter-spacing: .04em; }

  /* Testata: marchio e i due bottoni su una riga; sugli schermi più stretti il
     testo va a capo. */
  .site-header#main-nav .nav { gap: 10px; }
  .site-header#main-nav .nav-links { gap: 4px; flex: 1 1 auto; justify-content: flex-end; }
  .site-header#main-nav .nav-links > a {
    flex: 0 1 auto; padding: 8px 10px !important;
    font-size: 12px !important; letter-spacing: .04em !important; white-space: normal;
  }
  .tg-condividi-btn span { display: none; }
}