/* ==========================================================================================
   KSM — le sezioni delle pagine interne. VERSIONE FINALE (plugin ksm-sito 1.7.0, 8 ottobre 2026).
   Base «d2» (editoriale e colorato) con gli innesti di «d1» (fedeltà alla home): comparsa che non
   nasconde mai nulla se lo script non gira, hover solo dove c'è un puntatore vero, sotto-menu in
   linea sul telefono, fasce chiare più basse, alto contrasto di Windows, tetto alle foto piccole.
   Va caricato DOPO home.css e pagina.css (usa i loro colori e i loro caratteri: Manrope
   variabile e Playfair 700, ospitati da noi; nessuna risorsa esterna, nessun url() relativo).
   Il contratto HTML di ogni tipo è in sito8/design/DESIGN.md: il costruttore PHP lo segue alla lettera.

   Il principio: una pagina non è un foglio bianco ma una successione di PANNELLI arrotondati
   (come la cornice della home) di colore diverso che si alternano a ogni schermata:
   blu notte → chiaro → cielo → fotografia → blu notte …  Fra un pannello e l'altro resta il
   cielo della pagina, come attorno alla cornice della home.

   Regole che questo foglio rispetta (brand v1, WCAG 2.2 AAA):
   - il giallo-lime è SOLO fondo, punto o filo; mai testo su chiaro (come testo, solo su Blu 3 o
     più scuro: 7,2:1 e oltre);
   - contrasto del testo ≥ 7:1 (≥ 4,5:1 solo per il testo grande: ≥ 24 px o ≥ 18,66 px grassetto);
   - nessun testo poggia direttamente sul cielo della pagina: sta sempre dentro un pannello;
   - il contenuto si legge senza JavaScript (il movimento è un miglioramento, mai un requisito);
   - prefers-reduced-motion spegne ogni movimento; nessun movimento automatico dura più di 5 secondi
     (i punti luminosi pulsano 2 volte da 2 s e restano accesi; le figure galleggiano una volta, 5 s):
     nessuna animazione è infinita, quindi non serve un pulsante «pausa» (C-04, 9/10/2026). Il resto
     del movimento (comparse, parallasse, linea dei passi) è comandato dallo scorrimento.
   ========================================================================================== */

:root {
	--s-notte: #0b2f5e;
	--s-blu4: #0f3a73;
	--s-blu3: #144889;
	--s-blu2: #1f5fb0;
	--s-blu1: #3a86d6;
	--s-cielo1: #9cc8f2;
	--s-cielo2: #5b97de;
	--s-cielo-chiaro: #d6e8fa;
	--s-neutro: #eef4fa;
	--s-lime: #d7f24a;
	--s-ink: #0d2748;
	--s-ink2: #2b4a6f;           /* testo secondario SU BIANCO PURO (schede, riferimenti) */
	--s-ink-testo: #1a3558;      /* testo secondario sulle fasce chiare, neutre e sul cielo (lavaggi compresi: ≥ 7:1) */
	--s-filo: #d5e2f0;
	--s-raggio: clamp(18px, 2vw, 30px);
	--s-pad-v: clamp(40px, 5.4vw, 92px);
	--s-pad-h: var(--ksm-margine, clamp(20px, 3.4vw, 56px));
	--s-gap: clamp(12px, 1.5vw, 22px);
	--s-largo: 1240px;
	--s-ease: cubic-bezier(.22, .72, .2, 1);
	/* la griglia della home (84 px) al 3%: al 3,5% l'incrocio di due righe sotto una lettera lime da 13 px faceva 6,8:1 */
	--s-griglia:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 84px 84px,
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 84px 84px;
	--s-griglia-chiara:
		linear-gradient(rgba(20, 72, 137, .045) 1px, transparent 1px) 0 0 / 84px 84px,
		linear-gradient(90deg, rgba(20, 72, 137, .045) 1px, transparent 1px) 0 0 / 84px 84px;
	--s-crinale-lontano: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 260%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23dcebfa%22 stop-opacity=%22.38%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%239cc8f2%22 stop-opacity=%22.16%22/%3E%3Cstop offset=%221%22 stop-color=%22%235b97de%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M0,260 L0,110 L35,83 L70,97 L104,80 L139,65 L174,83 L209,81 L243,83 L278,98 L313,128 L348,104 L383,68 L417,56 L452,56 L487,61 L522,76 L557,89 L591,87 L626,64 L661,75 L696,96 L730,106 L765,98 L800,120 L835,136 L870,146 L904,179 L939,178 L974,136 L1009,78 L1043,67 L1078,55 L1113,29 L1148,35 L1183,44 L1217,44 L1252,41 L1287,80 L1322,94 L1357,82 L1391,78 L1426,97 L1461,117 L1496,140 L1530,175 L1565,166 L1600,110 L1600,260 Z%22 fill=%22url(%23g)%22/%3E%3C/svg%3E");
	--s-crinale-medio: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 260%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%238fbcea%22 stop-opacity=%22.46%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%233a86d6%22 stop-opacity=%22.30%22/%3E%3Cstop offset=%221%22 stop-color=%22%230f3a73%22 stop-opacity=%22.0%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M0,260 L0,133 L29,99 L57,109 L86,125 L114,126 L143,115 L171,120 L200,104 L229,102 L257,125 L286,158 L314,184 L343,167 L371,145 L400,126 L429,95 L457,89 L486,119 L514,129 L543,129 L571,145 L600,182 L629,215 L657,215 L686,214 L714,189 L743,148 L771,116 L800,128 L829,144 L857,132 L886,124 L914,118 L943,108 L971,100 L1000,112 L1029,141 L1057,145 L1086,128 L1114,144 L1143,157 L1171,160 L1200,137 L1229,132 L1257,110 L1286,75 L1314,90 L1343,153 L1371,190 L1400,209 L1429,203 L1457,198 L1486,189 L1514,172 L1543,165 L1571,158 L1600,133 L1600,260 Z%22 fill=%22url(%23g)%22/%3E%3C/svg%3E");
	--s-crinale-vicino: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 260%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%230b2f5e%22 stop-opacity=%22.92%22/%3E%3Cstop offset=%221%22 stop-color=%22%23082448%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M0,260 L0,204 L25,185 L50,184 L75,171 L100,168 L125,165 L150,172 L175,172 L200,154 L225,176 L250,216 L275,247 L300,248 L325,243 L350,237 L375,216 L400,206 L425,204 L450,195 L475,183 L500,176 L525,201 L550,216 L575,212 L600,202 L625,185 L650,169 L675,160 L700,174 L725,194 L750,189 L775,184 L800,198 L825,209 L850,226 L875,223 L900,228 L925,227 L950,224 L975,229 L1000,243 L1025,224 L1050,185 L1075,155 L1100,156 L1125,155 L1150,160 L1175,187 L1200,200 L1225,202 L1250,204 L1275,224 L1300,218 L1325,196 L1350,187 L1375,181 L1400,206 L1425,220 L1450,230 L1475,239 L1500,232 L1525,213 L1550,214 L1575,220 L1600,204 L1600,260 Z%22 fill=%22url(%23g)%22/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ 1. il pannello */
.ksm-sezioni {
	max-width: 1640px; margin: var(--s-gap) auto 0;
	display: grid; gap: var(--s-gap);
}
.ksm-s {
	/* tema di base = «chiaro»; i temi sono più sotto, in base a data-sfondo */
	--t-fg: var(--s-ink); --t-fg2: var(--s-ink2); --t-titolo: var(--s-blu4);
	--t-occhiello: var(--s-blu3); --t-link: var(--s-blu3); --t-filo: var(--s-filo);
	--t-focus: var(--s-ink); --t-card: #fff; --t-cerchio-bg: var(--s-blu3); --t-cerchio-fg: var(--s-lime);
	position: relative; isolation: isolate; overflow: hidden;
	border-radius: var(--s-raggio);
	padding: var(--s-pad-v) var(--s-pad-h);
	color: var(--t-fg);
	background: #fff;
	box-shadow: 0 22px 56px rgba(8, 36, 84, .20);
	font-size: 1.125rem; line-height: 1.65; overflow-wrap: break-word; /* AC-12 (9/10/2026): le misure del testo in rem (16 px = 1rem: al 100% identiche; seguono la dimensione scelta nel browser) */
}
.ksm-s__dentro { position: relative; z-index: 2; max-width: var(--s-largo); margin: 0 auto; }
.ksm-s :focus-visible { outline: 3px solid var(--t-focus); outline-offset: 3px; }
/* home.css dà a ogni :focus-visible un raggio di 6 px: sulle pillole lo si riporta al loro (l'anello segue la forma) */
.ksm-s :is(.ksm-bottone-lime, .ksm-bottone-vetro, .ksm-s-selettore__voce a, .ksm-s-scheda__titolo a):focus-visible,
.ksm-cornice-fascia :is(.ksm-bottone-lime, .ksm-bottone-vetro):focus-visible, .ksm-home .ksm-sotto-bottone:focus-visible { border-radius: 999px; }
.ksm-s .ksm-s-selettore__voce[data-taglia="grande"] a:focus-visible { border-radius: 24px; }
.ksm-s .ksm-s-faq__voce summary:focus-visible { border-radius: 22px; }
.ksm-s .ksm-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- i temi (data-sfondo) ------------------------------------------------------------ */
/* notte: la cornice della home, ma con un bagliore celeste lontano dal testo */
.ksm-s[data-sfondo="notte"] {
	--t-fg: #fff; --t-fg2: #fff; --t-titolo: #fff; --t-occhiello: var(--s-lime); --t-link: #fff;
	--t-filo: rgba(255, 255, 255, .30); --t-focus: var(--s-lime); --t-card: rgba(255, 255, 255, .08);
	--t-cerchio-bg: rgba(255, 255, 255, .07); --t-cerchio-fg: var(--s-lime);
	background:
		var(--s-griglia),
		radial-gradient(ellipse 46% 62% at var(--gx, 88%) var(--gy, 12%), rgba(58, 134, 214, var(--glow-a, .34)), transparent 72%),
		radial-gradient(ellipse 46% 60% at var(--hx, 0%) var(--hy, 108%), rgba(31, 95, 176, calc(var(--glow-a, .34) * .7)), transparent 72%),
		linear-gradient(140deg, #0f3d78 0%, var(--s-blu4) 56%, var(--s-notte) 100%);
	border: 1px solid rgba(255, 255, 255, .34);
	box-shadow: 0 30px 80px rgba(8, 36, 84, .35), inset 0 0 0 6px rgba(255, 255, 255, .05);
}
/* blu: un passo più vivo della notte (il bagliore è più largo e più chiaro), ma il FONDO sotto il testo non è mai più chiaro di #0f3d78:
   il lime piccolo (13 px) vi sta a 7,2:1 anche sulla riga di griglia che lo attraversa */
.ksm-s[data-sfondo="blu"] {
	--t-fg: #fff; --t-fg2: #fff; --t-titolo: #fff; --t-occhiello: var(--s-lime); --t-link: #fff;
	--t-filo: rgba(255, 255, 255, .34); --t-focus: var(--s-lime); --t-card: rgba(255, 255, 255, .10);
	--t-cerchio-bg: rgba(255, 255, 255, .09); --t-cerchio-fg: var(--s-lime);
	background:
		var(--s-griglia),
		radial-gradient(ellipse 34% 60% at var(--gx, 100%) var(--gy, 50%), rgba(91, 151, 222, calc(var(--glow-a, .34) * .8)), transparent 72%),
		linear-gradient(120deg, #0f3d78 0%, #0f3b75 100%);
	border: 1px solid rgba(255, 255, 255, .34);
	box-shadow: 0 30px 80px rgba(8, 36, 84, .30), inset 0 0 0 6px rgba(255, 255, 255, .05);
}
/* cielo: il cielo della home, schiarito perché ci stia l'inchiostro (≥ 9:1) */
.ksm-s[data-sfondo="cielo"] {
	--t-fg: var(--s-ink); --t-fg2: var(--s-ink); --t-titolo: var(--s-ink); --t-occhiello: var(--s-ink); --t-link: var(--s-notte);
	--t-filo: rgba(255, 255, 255, .85); --t-focus: var(--s-ink); --t-card: rgba(255, 255, 255, .62);
	--t-cerchio-bg: var(--s-blu3); --t-cerchio-fg: var(--s-lime);
	background:
		var(--s-griglia-chiara),
		radial-gradient(ellipse 46% 70% at var(--gx, 90%) var(--gy, 0%), rgba(255, 255, 255, .85), transparent 64%),
		radial-gradient(ellipse 56% 80% at var(--hx, 0%) var(--hy, 100%), rgba(91, 151, 222, .30), transparent 72%),
		linear-gradient(180deg, #d9eafb 0%, #b9d9f6 100%);
	border: 1px solid rgba(255, 255, 255, .7);
}
/* chiaro e neutro: le fasce di lettura. MAI bianco piatto (il committente: «fa schifo il bianco»):
   un fondo celeste pallido, un lavaggio d'azzurro vivo da un lato, un fiato di lime dall'altro e la
   griglia della brand. L'inchiostro vi sta sopra a più di 11:1. */
.ksm-s[data-sfondo="chiaro"] {
	--t-fg2: var(--s-ink-testo); --t-link: var(--s-notte); --t-occhiello: var(--s-ink);
	background:
		var(--s-griglia-chiara),
		radial-gradient(ellipse 58% 72% at var(--gx, 100%) var(--gy, 0%), rgba(91, 151, 222, .36), transparent 68%),
		radial-gradient(ellipse 42% 56% at var(--hx, 0%) var(--hy, 100%), rgba(215, 242, 74, .26), transparent 72%),
		linear-gradient(180deg, #eaf3fd 0%, #dbe9f9 100%);
}
.ksm-s[data-sfondo="neutro"] {
	--t-card: #fff; --t-fg2: var(--s-ink-testo); --t-link: var(--s-notte); --t-occhiello: var(--s-ink);
	background:
		var(--s-griglia-chiara),
		radial-gradient(ellipse 52% 70% at var(--gx, 0%) var(--gy, 0%), rgba(91, 151, 222, .22), transparent 68%),
		radial-gradient(ellipse 46% 62% at var(--hx, 100%) var(--hy, 100%), rgba(156, 200, 242, .40), transparent 70%),
		var(--s-neutro);
}
/* lime: un'unica striscia di accento per pagina; testo inchiostro (11,9:1) */
.ksm-s[data-sfondo="lime"] {
	--t-fg: var(--s-ink); --t-fg2: var(--s-ink); --t-titolo: var(--s-ink); --t-occhiello: var(--s-ink); --t-link: var(--s-ink);
	--t-filo: rgba(13, 39, 72, .35); --t-focus: var(--s-ink); --t-cerchio-bg: var(--s-ink); --t-cerchio-fg: var(--s-lime);
	background:
		radial-gradient(ellipse 40% 90% at 100% 0%, rgba(255, 255, 255, .55), transparent 70%),
		linear-gradient(120deg, #d7f24a 0%, #d0ef3e 100%);
}
.ksm-s:is([data-sfondo="chiaro"], [data-sfondo="neutro"], [data-sfondo="cielo"], [data-sfondo="lime"]) { box-shadow: 0 22px 56px rgba(8, 36, 84, .22); }

/* ------------------------------------------------------------------ 2. gli elementi comuni */
.ksm-s__intro { max-width: 52rem; margin: 0 0 clamp(26px, 3.4vw, 48px); }
.ksm-s__occhiello {
	display: inline-flex; align-items: center; gap: 14px; margin: 0 0 clamp(14px, 1.6vw, 22px);
	font-size: .8125rem; line-height: 1.4; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
	color: var(--t-occhiello);
}
.ksm-s__occhiello::before {
	content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%;
	background: var(--s-lime); border: 2px solid var(--s-blu3); box-sizing: border-box;
}
.ksm-s[data-sfondo="notte"] .ksm-s__occhiello::before, .ksm-s[data-sfondo="blu"] .ksm-s__occhiello::before { border: 0; width: 10px; height: 10px; box-shadow: 0 0 8px 1px rgba(215, 242, 74, .40); }   /* l'alone del punto non deve arrivare sotto la prima lettera (il lime piccolo vi perderebbe contrasto) */
.ksm-s[data-sfondo="cielo"] .ksm-s__occhiello::before { border-color: var(--s-ink); }
.ksm-s[data-sfondo="lime"] .ksm-s__occhiello::before { background: var(--s-ink); border-color: var(--s-ink); }

.ksm-s__titolo, .ksm-s h2 {
	font-family: "KSM Playfair", Georgia, "Times New Roman", serif; font-weight: 700;
	font-size: clamp(1.875rem, 3.7vw, 3.625rem); line-height: 1.1; letter-spacing: -.012em;
	margin: 0 0 .5em; color: var(--t-titolo); text-wrap: balance;
}
.ksm-s em { font-style: normal; }
.ksm-s__titolo em { color: inherit; }
/* la parola in evidenza: sul blu è lime; sul chiaro è un evidenziatore lime dietro l'inchiostro */
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s__titolo em,
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-striscia__frase em,
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-citazione__testo em { color: var(--s-lime); }
.ksm-s:is([data-sfondo="chiaro"], [data-sfondo="neutro"], [data-sfondo="cielo"]) :is(.ksm-s__titolo, .ksm-s-striscia__frase, .ksm-s-citazione__testo) em {
	background: linear-gradient(transparent 58%, rgba(215, 242, 74, .92) 58% 94%, transparent 94%);
	padding: 0 .1em; margin: 0 -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ksm-s__testo { max-width: 40rem; }
.ksm-s__testo p { margin: 0 0 1.1em; color: var(--t-fg2); }
.ksm-s__testo p:last-child { margin-bottom: 0; }
.ksm-s__testo .ksm-s__lead, .ksm-s__lead { font-size: clamp(1.25rem, 1.7vw, 1.5625rem); line-height: 1.5; color: var(--t-fg); }
.ksm-s a:not([class]) { color: var(--t-link); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ksm-s__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: clamp(24px, 3vw, 40px); }

/* ---- i pulsanti: il primario è .ksm-bottone-lime, il secondario .ksm-bottone-vetro; sul chiaro
   si trasformano da soli (il lime sul bianco non si vede: diventa Blu 3 con la freccia lime) ---- */
.ksm-s :is(.ksm-bottone-lime, .ksm-bottone-vetro) { color: #fff; }
.ksm-s .ksm-bottone-lime { color: var(--s-ink) !important; }
.ksm-s:is([data-sfondo="chiaro"], [data-sfondo="neutro"], [data-sfondo="cielo"]) .ksm-bottone-lime {
	background: var(--s-blu3); color: #fff !important; box-shadow: 0 12px 30px rgba(15, 58, 115, .30);
}
.ksm-s:is([data-sfondo="chiaro"], [data-sfondo="neutro"], [data-sfondo="cielo"]) .ksm-bottone-lime .ksm-freccia { background: var(--s-lime); color: var(--s-ink); border-color: transparent; }
.ksm-s:is([data-sfondo="chiaro"], [data-sfondo="neutro"], [data-sfondo="cielo"]) .ksm-bottone-lime:hover { background: var(--s-blu4); }
.ksm-s:is([data-sfondo="chiaro"], [data-sfondo="neutro"], [data-sfondo="cielo"]) .ksm-bottone-vetro {
	background: rgba(255, 255, 255, .55); color: var(--s-blu4); border: 2px solid var(--s-blu3);
}
.ksm-s:is([data-sfondo="chiaro"], [data-sfondo="neutro"], [data-sfondo="cielo"]) .ksm-bottone-vetro .ksm-freccia { background: var(--s-blu3); color: #fff; }
.ksm-s:is([data-sfondo="chiaro"], [data-sfondo="neutro"], [data-sfondo="cielo"]) .ksm-bottone-vetro:hover { background: #fff; }
.ksm-s[data-sfondo="lime"] .ksm-bottone-lime { background: var(--s-ink); color: #fff !important; }
.ksm-s[data-sfondo="lime"] .ksm-bottone-lime .ksm-freccia { background: var(--s-lime); color: var(--s-ink); border-color: transparent; }
.ksm-s[data-sfondo="lime"] .ksm-bottone-vetro { background: transparent; color: var(--s-ink); border: 2px solid var(--s-ink); }
/* i movimenti dei pulsanti valgono solo qui dentro: la home (apertura «perfetta», R01) non cambia */
:is(.ksm-s, .ksm-cornice-fascia) :is(.ksm-bottone-lime, .ksm-bottone-vetro) { transition: transform .25s var(--s-ease), background-color .25s ease, box-shadow .25s ease; }
:is(.ksm-s, .ksm-cornice-fascia) :is(.ksm-bottone-lime, .ksm-bottone-vetro):hover .ksm-freccia svg { translate: 3px 0; }
:is(.ksm-s, .ksm-cornice-fascia) .ksm-freccia svg { transition: translate .25s var(--s-ease); }

/* il pulsante di vetro dentro i pannelli blu e nell'apertura: vetro SCURO (bianco ≥ 7:1 anche sul bagliore) */
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-bottone-vetro, .ksm-interna .ksm-fascia .ksm-bottone-vetro {
	background: rgba(6, 26, 60, .42); border: 1px solid rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-bottone-vetro:hover, .ksm-interna .ksm-fascia .ksm-bottone-vetro:hover { background: rgba(6, 26, 60, .62); }

/* ---- il cerchio con l'icona (come nella home) ---- */
.ksm-s .ksm-cerchio {
	display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
	background: var(--t-cerchio-bg); color: var(--t-cerchio-fg); border: 1.5px solid var(--t-filo);
}
.ksm-s .ksm-cerchio svg { width: 26px; height: 26px; }
.ksm-s .ksm-cerchio svg, .ksm-s .ksm-cerchio svg * { stroke: currentColor; }

/* ---- il punto luminoso (etichette, linee del tempo): due pulsazioni da 2 s e resta acceso ---- */
.ksm-punto {
	display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 0 16px 4px rgba(255, 255, 255, .5);
	transition: background-color .4s ease, box-shadow .4s ease;
}
.ksm-acceso > .ksm-punto, .ksm-acceso .ksm-punto, .ksm-visibile.ksm-s-striscia__filo .ksm-punto {
	background: var(--s-lime);
	box-shadow: 0 0 0 5px rgba(215, 242, 74, .22), 0 0 22px 6px rgba(215, 242, 74, .62);
	animation: ksm-pulsa 2s ease-out 2;
}
@keyframes ksm-pulsa {
	0%   { box-shadow: 0 0 0 0 rgba(215, 242, 74, .65), 0 0 18px 4px rgba(215, 242, 74, .55); }
	60%  { box-shadow: 0 0 0 16px rgba(215, 242, 74, 0), 0 0 26px 8px rgba(215, 242, 74, .7); }
	100% { box-shadow: 0 0 0 5px rgba(215, 242, 74, .22), 0 0 22px 6px rgba(215, 242, 74, .62); }
}
.ksm-s__occhiello.ksm-visibile::before, .ksm-visibile > .ksm-s__occhiello::before { animation: ksm-pulsa-occhiello 1.6s ease-out 2; }
@keyframes ksm-pulsa-occhiello { 0% { box-shadow: 0 0 0 0 rgba(215, 242, 74, .8); } 70% { box-shadow: 0 0 0 12px rgba(215, 242, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(215, 242, 74, 0); } }

.ksm-s-vetro__scheda, .ksm-s-livello, .ksm-s-scheda, .ksm-s-vetro__scheda, .ksm-s-livello, .ksm-s-scheda { transition: transform .35s var(--s-ease), box-shadow .35s ease, border-color .35s ease; }

/* ------------------------------------------------------------------ 3. comparsa allo scorrimento */
/* Un elemento .ksm-rivela parte nascosto SOLO se lo script ha acceso «ksm-anima» sull'html (movimento
   permesso + IntersectionObserver disponibile) e non l'ha ancora mostrato. Senza JS, con «riduci
   movimento», con la pausa o se qualcosa si rompe a metà: tutto è visibile. Mai il contrario. */
.ksm-rivela {
	transition: opacity .8s var(--s-ease) calc(var(--i, 0) * 90ms), translate .8s var(--s-ease) calc(var(--i, 0) * 90ms),
		scale .8s var(--s-ease) calc(var(--i, 0) * 90ms), transform .35s var(--s-ease), box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
html.ksm-anima .ksm-rivela:not(.ksm-visibile) { opacity: 0; translate: 0 34px; }
html.ksm-anima .ksm-rivela[data-rivela="sinistra"]:not(.ksm-visibile) { translate: -52px 0; }
html.ksm-anima .ksm-rivela[data-rivela="destra"]:not(.ksm-visibile) { translate: 52px 0; }
html.ksm-anima .ksm-rivela[data-rivela="zoom"]:not(.ksm-visibile) { translate: 0 0; scale: .93; }

/* ------------------------------------------------------------------ 4. le fotografie */
.ksm-foto {
	position: relative; margin: 0; border-radius: 24px;
	background: linear-gradient(135deg, var(--s-blu2), var(--s-blu4));
	box-shadow: 0 26px 60px rgba(8, 36, 84, .34);
}
.ksm-foto__quadro {
	position: relative; overflow: hidden; border-radius: inherit;
	aspect-ratio: var(--ratio, 3 / 2); isolation: isolate;
}
.ksm-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.ksm-foto[data-proporzione="1:1"] { --ratio: 1 / 1; }
.ksm-foto[data-proporzione="4:5"] { --ratio: 4 / 5; }
.ksm-foto[data-proporzione="3:4"] { --ratio: 3 / 4; }
.ksm-foto[data-proporzione="4:3"] { --ratio: 4 / 3; }
.ksm-foto[data-proporzione="3:2"] { --ratio: 3 / 2; }
.ksm-foto[data-proporzione="16:10"] { --ratio: 16 / 10; }
.ksm-foto[data-proporzione="16:9"] { --ratio: 16 / 9; }
.ksm-foto[data-proporzione="21:9"] { --ratio: 21 / 9; }
.ksm-foto__didascalia { margin: 10px 4px 0; font-size: .875rem; line-height: 1.5; color: var(--t-fg2); }
/* il riquadro di vetro attorno alla foto (apertura e cornice) */
.ksm-foto--vetro {
	padding: clamp(6px, .7vw, 10px); border-radius: 30px; background: linear-gradient(160deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .08));
	border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 34px 80px rgba(3, 16, 40, .5);
}
.ksm-foto--vetro .ksm-foto__quadro { border-radius: 22px; }
/* il leggero parallasse: l'immagine è più alta del quadro del 20% e scivola con --p (-1…1).
   --p la scrive sezioni.js SOLO sugli elementi che la leggono (questo e i visual/crinali/aloni più sotto),
   mai sul pannello, e solo quando il parallasse è acceso (desktop col mouse, ≥ 700 px, senza «riduci
   movimento» né «risparmia dati»): allora html ha .ksm-parallasse e quegli elementi vanno su un livello
   proprio, così lo spostamento non ridipinge la pagina (C-05, MOV-03, 9/10/2026). */
.ksm-foto--parallasse .ksm-foto__quadro img {
	position: absolute; left: 0; top: -10%; width: 100%; height: 120%;
	translate: 0 calc(var(--p, 0) * var(--k, -5) * 1%);
}
html.ksm-parallasse :is(.ksm-foto--parallasse .ksm-foto__quadro img, .ksm-s-cornice__visual, .ksm-s-vetro__decoro, .ksm-s-vetro__alone, .ksm-s-striscia__anello,
	.ksm-s-citazione__segno, .ksm-s-cta__figura img, .ksm-crinale i, .ksm-fascia__visual, .ksm-s-striscia__visual) { will-change: translate; }
.ksm-foto--zoom .ksm-foto__quadro img { transition: scale .8s var(--s-ease); }

/* l'etichetta «Illustrazione generata con Ai» (trasparenza, EU AI Act art. 50): angolo in alto a
   destra, piccola, su fondo scuro quasi pieno (bianco ≥ 8:1 anche su una foto chiarissima) */
.ksm-s-ai {
	position: absolute; z-index: 4; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 7px;
	max-width: calc(100% - 24px);
	padding: 5px 11px 5px 9px; border-radius: 999px; font-size: .6875rem; line-height: 1.3; font-weight: 600; letter-spacing: .03em;
	color: #fff; background: rgba(7, 24, 52, .88); border: 1px solid rgba(255, 255, 255, .34);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ksm-s-ai::before {
	content: ""; flex: none; width: 9px; height: 9px; background: var(--s-lime);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.ksm-foto--vetro .ksm-s-ai { top: calc(clamp(6px, .7vw, 10px) + 10px); right: calc(clamp(6px, .7vw, 10px) + 10px); }

/* il riquadro-foto PROGETTATO (al posto del tratteggio): il brand, pronto a riempirsi.
   Niente testo visibile: la descrizione sta solo nei data-attributi. */
.ksm-segnaposto {
	position: relative; display: block; overflow: hidden; margin: 0; border-radius: 24px; isolation: isolate;
	aspect-ratio: var(--ratio, 3 / 2);
	background:
		var(--s-griglia),
		radial-gradient(ellipse 60% 55% at 50% 38%, rgba(91, 151, 222, .65), transparent 70%),
		linear-gradient(150deg, var(--s-blu2) 0%, var(--s-blu4) 62%, var(--s-notte) 100%);
	border: 1px solid rgba(255, 255, 255, .42);
	box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .06), 0 26px 60px rgba(8, 36, 84, .30);
}
.ksm-segnaposto[data-proporzione="1:1"] { --ratio: 1 / 1; }
.ksm-segnaposto[data-proporzione="4:5"] { --ratio: 4 / 5; }
.ksm-segnaposto[data-proporzione="4:3"] { --ratio: 4 / 3; }
.ksm-segnaposto[data-proporzione="3:2"] { --ratio: 3 / 2; }
.ksm-segnaposto[data-proporzione="16:10"] { --ratio: 16 / 10; }
.ksm-segnaposto[data-proporzione="16:9"] { --ratio: 16 / 9; }
.ksm-segnaposto[data-proporzione="21:9"] { --ratio: 21 / 9; }
.ksm-segnaposto::before {            /* le orbite */
	content: ""; position: absolute; left: 50%; top: 40%; width: 74%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 0;
	background: repeating-radial-gradient(circle at center, transparent 0 9%, rgba(255, 255, 255, .13) 9% 9.4%);
	-webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); mask-image: radial-gradient(circle, #000 20%, transparent 68%);
}
.ksm-segnaposto::after {             /* il crinale in basso */
	content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1;
	background: var(--s-crinale-medio) 30% 100% / auto 100% repeat-x, var(--s-crinale-vicino) 0 100% / auto 66% repeat-x;
}
.ksm-segnaposto__punto {              /* il punto luminoso al centro, come nelle etichette della home */
	position: absolute; left: 50%; top: 40%; z-index: 2; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .10), 0 0 34px 12px rgba(255, 255, 255, .55);
}
/* C-06 (9/10/2026): il riquadro esce SOLO in anteprima, e porta scritto il nome dello spazio e la foto da produrre (per l'amministratore) */
.ksm-segnaposto__nome {
	position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 12px;
	font-size: .8125rem; line-height: 1.4; font-weight: 600; color: #fff; background: rgba(7, 24, 52, .9); border: 1px dashed rgba(255, 255, 255, .6);
}

/* i visual 3D (rotazione-NN.webp) sono ritagli dai mockup: portano con sé un alone rettangolare. Come nella
   home si sfumano ai bordi con una maschera; quando arriveranno gli originali a fondo
   trasparente la maschera si toglie togliendo la classe. */
.ksm-visual { -webkit-mask-image: radial-gradient(ellipse 47% 48% at 50% 54%, #000 56%, transparent 100%); mask-image: radial-gradient(ellipse 47% 48% at 50% 54%, #000 56%, transparent 100%); }

/* con il media a sinistra il testo sta a destra: i bagliori vanno sotto il media */
.ksm-s[data-lato="sinistra"] { --gx: 8%; --gy: 20%; --hx: 0%; --hy: 100%; }

/* ------------------------------------------------------------------ 5. CORNICE (come la home) */
.ksm-s-cornice__griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 5vw, 84px); }
.ksm-s-cornice[data-lato="sinistra"] .ksm-s-cornice__media { order: -1; }
.ksm-s-cornice__media { position: relative; }
.ksm-s-cornice__visual { /* il visual 3D traslucido, a fondo trasparente */
	display: block; width: min(100%, 560px); margin: 0 auto; height: auto;
	translate: 0 calc(var(--p, 0) * -22px);
}
.ksm-s-cornice__alone {              /* l'alone celeste dietro il visual */
	position: absolute; z-index: -1; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
	background: radial-gradient(circle, rgba(91, 151, 222, .72) 0%, rgba(58, 134, 214, .30) 42%, transparent 70%);
}
.ksm-s-cornice__etichette { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ksm-s-cornice__etichette li {
	display: flex; align-items: center; gap: 12px; font-size: .75rem; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase;
}
.ksm-s-cornice__etichette li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(255, 255, 255, .55); flex: none; }

/* ------------------------------------------------------------------ 6. VETRO */
.ksm-s-vetro { overflow: hidden; }
/* VC-17, vB-16 (9/10/2026): il visual non sta più dietro le schede (la terza lo tagliava a metà: «una collisione»), ma accanto al
   titolo, in una colonna sua, sopra le schede */
.ksm-s-vetro__testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(20px, 3vw, 48px); margin: 0 0 clamp(26px, 3.4vw, 48px); }
.ksm-s-vetro__testa > .ksm-s__intro { margin-bottom: 0; }
.ksm-s-vetro__decoro { position: relative; z-index: 1; pointer-events: none; width: clamp(150px, 17vw, 250px); margin: 0 0 -10px; translate: 0 calc(var(--p, 0) * 14px); }
.ksm-s-vetro__decoro img { display: block; width: 100%; height: auto; }
.ksm-s-vetro__alone { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.ksm-s-vetro__alone--1 { width: 38vw; aspect-ratio: 1; left: -8%; top: -18%; background: radial-gradient(circle, rgba(58, 134, 214, .34), transparent 66%); translate: calc(var(--p, 0) * 40px) calc(var(--p, 0) * 30px); } /* v1.7: era .5; sotto il sottotitolo l'inchiostro scendeva a 6,7:1 (§24) */
.ksm-s-vetro__alone--2 { width: 30vw; aspect-ratio: 1; right: 14%; bottom: -24%; background: radial-gradient(circle, rgba(215, 242, 74, .38), transparent 66%); translate: calc(var(--p, 0) * -50px) calc(var(--p, 0) * -20px); }
.ksm-s-vetro__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); position: relative; z-index: 2; }
.ksm-s-vetro__scheda {
	display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.2vw, 34px);
	border-radius: 24px; color: var(--t-fg);
	background: linear-gradient(160deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .50));
	border: 1px solid rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 18px 44px rgba(15, 58, 115, .16), inset 0 1px 0 #fff;
}
.ksm-s-vetro__titolo { margin: 6px 0 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; font-weight: 800; color: var(--s-ink); }
.ksm-s-vetro__scheda p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--s-ink); }
/* sul blu notte gli aloni chiari del cielo non servono (e schiarirebbero il testo) */
.ksm-s-vetro:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-vetro__alone { display: none; }
/* il visual di sfondo sta SOLO dietro il vetro chiaro (cielo): dietro il vetro scuro il bianco non reggerebbe 7:1 */
.ksm-s-vetro:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-vetro__decoro { display: none; }
.ksm-s-vetro:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-vetro__scheda { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .32); box-shadow: none; }
.ksm-s-vetro:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-vetro__titolo, .ksm-s-vetro:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-vetro__scheda p { color: #fff; }
.ksm-s-vetro:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-cerchio { background: rgba(255, 255, 255, .06); }
/* VA-17 (9/10/2026): la scheda con un collegamento — il titolo non è sottolineato (tre sottolineati e uno no sembrava un errore): tutta la
   scheda è il collegamento e lo dice la riga «Leggi di più», come nelle schede */
.ksm-s-vetro__scheda--link { position: relative; }
.ksm-s .ksm-s-vetro__titolo a { color: inherit; text-decoration: none; }
.ksm-s-vetro__titolo a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 24px; }
.ksm-s-vetro__titolo a:focus-visible { outline: none; }
.ksm-s-vetro__scheda:has(.ksm-s-vetro__titolo a:focus-visible) { outline: 3px solid var(--t-focus); outline-offset: 4px; }
.ksm-s-vetro__vai { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .96875rem; color: var(--s-blu3); }
.ksm-s-vetro__vai .ksm-freccia { width: 32px; height: 32px; background: var(--s-blu3); color: #fff; border: 0; transition: background-color .3s ease, translate .3s var(--s-ease); }
.ksm-s-vetro__vai .ksm-freccia svg { width: 16px; height: 16px; }
.ksm-s-vetro:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-vetro__vai { color: #fff; }
.ksm-s-vetro:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-vetro__vai .ksm-freccia { background: var(--s-lime); color: var(--s-ink); }
@media (hover: hover) { .ksm-s-vetro__scheda--link:hover .ksm-s-vetro__vai .ksm-freccia { background: var(--s-lime); color: var(--s-ink); translate: 4px 0; } }

/* ------------------------------------------------------------------ 7. TESTO (la fascia chiara BREVE)
   Struttura: __colonna › __testa (occhiello + titolo) + __corpo (testo, evidenza, pulsanti).
   Senza foto: la testa sta a sinistra e il corpo a destra (la fascia resta BASSA: titolo e testo
   affiancati, non uno sopra l'altro). Con foto: testa e corpo si impilano nella colonna, la foto accanto. */
.ksm-s-testo__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4.5vw, 76px); align-items: center; }
.ksm-s-testo--con-foto .ksm-s-testo__griglia { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
.ksm-s-testo[data-lato="sinistra"] .ksm-s-testo__media { order: -1; }
.ksm-s-testo__colonna { position: relative; }
.ksm-s-testo:not(.ksm-s-testo--con-foto) .ksm-s-testo__colonna { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4.4vw, 72px); align-items: start; }
.ksm-s-testo:not(.ksm-s-testo--con-foto) .ksm-s__titolo { margin-bottom: 0; }
.ksm-s-testo__testa { position: relative; }
.ksm-s-testo__testa::before { /* il filo di colore a sinistra del titolo */
	content: ""; position: absolute; left: calc(-1 * clamp(14px, 1.6vw, 26px)); top: .2em; bottom: .2em; width: 4px; border-radius: 4px;
	background: linear-gradient(180deg, var(--s-blu1), var(--s-lime)); opacity: .9;
}
.ksm-s-testo--con-foto .ksm-s-testo__testa + .ksm-s-testo__corpo { margin-top: clamp(14px, 1.6vw, 22px); }
.ksm-s-testo__media { position: relative; }
/* C-06: un visual 3D del repertorio al posto della foto che manca (decorativo, sfumato ai bordi come nella home) */
.ksm-s-testo__visual { display: block; width: min(100%, 500px); height: auto; margin: 0 auto; }
.ksm-s-evidenza {
	margin: clamp(22px, 2.4vw, 34px) 0 0; padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 34px); border-radius: 22px;
	font-family: "KSM Playfair", Georgia, serif; font-weight: 700; font-size: clamp(1.3125rem, 2vw, 1.8125rem); line-height: 1.3; color: #fff;
	background: var(--s-griglia), radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 134, 214, .5), transparent 70%), linear-gradient(140deg, var(--s-blu3), var(--s-blu4) 70%, var(--s-notte));
	box-shadow: 0 22px 50px rgba(8, 36, 84, .28); position: relative;
}
.ksm-s-evidenza::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 5px; border-radius: 0 5px 5px 0; background: var(--s-lime); }
.ksm-s-evidenza em { font-style: normal; color: var(--s-lime); }
.ksm-s-testo--doppia .ksm-s-testo__colonna { grid-template-columns: minmax(0, 1fr); }
.ksm-s-testo--doppia .ksm-s__testo { columns: 2 22rem; column-gap: clamp(28px, 4vw, 64px); max-width: none; }
.ksm-s-testo--doppia .ksm-s__testo p { break-inside: avoid-column; }

/* ------------------------------------------------------------------ 8. STRISCIA (blu, a tutta larghezza, una frase forte) */
.ksm-s-striscia { padding-block: clamp(48px, 6.6vw, 112px); }
.ksm-s-striscia__dentro { max-width: 1280px; }
.ksm-s-striscia__frase {
	margin: 0; max-width: 17em; text-wrap: balance;
	font-family: "KSM Playfair", Georgia, "Times New Roman", serif; font-weight: 700;
	font-size: clamp(2.25rem, 6vw, 6.25rem); line-height: 1.04; letter-spacing: -.02em; color: var(--t-titolo);
}
.ksm-s-striscia__sotto { margin: clamp(20px, 2.4vw, 34px) 0 0; max-width: 36rem; font-size: clamp(1.1875rem, 1.6vw, 1.5rem); line-height: 1.5; color: var(--t-fg2); }
.ksm-s-striscia[data-allinea="centro"] .ksm-s-striscia__dentro { text-align: center; }
.ksm-s-striscia[data-allinea="centro"] :is(.ksm-s-striscia__frase, .ksm-s-striscia__sotto) { margin-left: auto; margin-right: auto; }
.ksm-s-striscia[data-allinea="centro"] .ksm-s__cta { justify-content: center; }
/* la striscia con una foto accanto (Journal: l'apertura di ogni tema; cambio di argomento). vB-09 (9/10/2026): era alta una schermata
   (foto 4:5 da 620 px e un vuoto blu a sinistra): ora foto 4:3, meno margine, frase più piccola → ~500 px a 1440 */
.ksm-s-striscia--foto { padding-block: clamp(34px, 4.2vw, 68px); }
.ksm-s-striscia--foto .ksm-s-striscia__dentro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4.5vw, 76px); align-items: center; }
.ksm-s-striscia--foto .ksm-s-striscia__frase { font-size: clamp(1.875rem, 3.6vw, 3.625rem); }
/* vB-07: la riga di raccordo fra due pannelli di una ricerca: breve, e più piccola di una frase d'apertura */
.ksm-s-striscia--raccordo { padding-block: clamp(34px, 4.2vw, 68px); }
.ksm-s-striscia--raccordo .ksm-s-striscia__frase { font-size: clamp(1.75rem, 3.4vw, 3.25rem); max-width: 21em; }
.ksm-s-striscia--raccordo.ksm-s-striscia--foto .ksm-s-striscia__frase { font-size: clamp(1.75rem, 3.2vw, 3rem); }
.ksm-s-striscia__media { position: relative; }
.ksm-s-striscia__filo {          /* il filo con i punti luminosi che chiude la striscia */
	display: flex; align-items: center; gap: 0; margin-top: clamp(30px, 3.6vw, 56px); max-width: 760px;
}
.ksm-s-striscia__filo::before { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--s-lime), rgba(255, 255, 255, .2)); border-radius: 2px; }
.ksm-s-striscia__filo .ksm-punto { margin-left: -1px; }
.ksm-s-striscia__anello {         /* il cerchio luminoso di fondo, che scivola con lo scorrimento */
	position: absolute; z-index: 0; right: -8%; top: 50%; width: min(52vw, 760px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
	translate: calc(var(--p, 0) * -60px) calc(-50% + var(--p, 0) * 50px);
	background:
		repeating-radial-gradient(circle at center, transparent 0 15%, rgba(255, 255, 255, .10) 15% 15.3%),
		radial-gradient(circle, rgba(91, 151, 222, .18), transparent 66%);
	-webkit-mask-image: radial-gradient(circle, #000 32%, transparent 70%); mask-image: radial-gradient(circle, #000 32%, transparent 70%);
}
.ksm-s[data-sfondo="lime"] .ksm-s-striscia__anello { background: repeating-radial-gradient(circle at center, transparent 0 15%, rgba(13, 39, 72, .14) 15% 15.4%); }
.ksm-s[data-sfondo="lime"] .ksm-s-striscia__filo::before { background: linear-gradient(90deg, var(--s-ink), rgba(13, 39, 72, .15)); }

/* ------------------------------------------------------------------ 9b. SEGNAPOSTO-FOTO (la sezione: il riquadro progettato a tutta larghezza) */
.ksm-s-segnaposto-foto { padding: 0; background: none; box-shadow: none; border: 0; }
.ksm-s-segnaposto-foto .ksm-segnaposto { border-radius: var(--s-raggio); }
@media (max-width: 640px) { .ksm-s-segnaposto-foto .ksm-segnaposto { --ratio: 4 / 3; } }

/* ------------------------------------------------------------------ 9. FOTO-BANDA (a tutta larghezza, con parallasse) */
.ksm-s-foto-banda { max-width: var(--largo-max, none); width: 100%; margin-inline: auto; padding: 0; min-height: clamp(320px, 50vw, 720px); background: var(--s-blu4); display: grid; align-items: end; border: 1px solid rgba(255, 255, 255, .4); }
.ksm-s-foto-banda__fig { position: absolute; inset: 0; margin: 0; border-radius: 0; box-shadow: none; background: var(--s-blu4); }
.ksm-s-foto-banda__fig .ksm-foto__quadro { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.ksm-s-foto-banda::after {       /* il velo che tiene leggibile la didascalia e dà il colore del brand */
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(11, 47, 94, .22) 0%, rgba(11, 47, 94, 0) 28%, rgba(8, 36, 84, .5) 100%),
		radial-gradient(ellipse 70% 90% at 0% 100%, rgba(31, 95, 176, .38), transparent 70%);
}
.ksm-s-foto-banda__didascalia {
	position: relative; z-index: 3; margin: 0 var(--s-pad-h) clamp(18px, 2.6vw, 40px); padding: clamp(18px, 2vw, 30px) clamp(20px, 2.4vw, 36px);
	max-width: 36rem; border-radius: 24px; color: #fff;
	background: linear-gradient(160deg, rgba(9, 30, 64, .90), rgba(9, 30, 64, .82));
	border: 1px solid rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 24px 60px rgba(3, 16, 40, .4);
}
.ksm-s-foto-banda__titolo { display: block; margin: 0 0 8px; font-family: "KSM Playfair", Georgia, serif; font-weight: 700; font-size: clamp(1.375rem, 2.4vw, 2.25rem); line-height: 1.15; }
.ksm-s-foto-banda__testo { margin: 0; font-size: 1.03125rem; line-height: 1.55; color: #eef4fb; }
.ksm-s-foto-banda .ksm-s-ai { top: 16px; right: 16px; }

/* ------------------------------------------------------------------ 10. PASSI (numeri grandi + linea del tempo con punti luminosi) */
.ksm-s-passi__lista {
	--prog: 1; list-style: none; margin: 0; padding: 0; position: relative;
	display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); counter-reset: passo;
}
html.ksm-anima .ksm-s-passi__lista { --prog: 0; }
.ksm-s-passi__lista::before, .ksm-s-passi__lista::after { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; border-radius: 2px; }
.ksm-s-passi__lista::before { background: rgba(255, 255, 255, .24); }
.ksm-s-passi__lista::after { background: linear-gradient(90deg, var(--s-lime), #fff); transform-origin: 0 50%; transform: scaleX(var(--prog)); box-shadow: 0 0 14px rgba(215, 242, 74, .6); }
.ksm-s-passo { position: relative; padding-top: 50px; counter-increment: passo; display: flex; flex-direction: column; }
.ksm-s-passo .ksm-punto { position: absolute; left: 0; top: 0; z-index: 2; }
.ksm-s-passo__numero {
	display: block; margin: 0 0 16px; font-family: "KSM Playfair", Georgia, serif; font-weight: 700; line-height: .9;
	font-size: clamp(4.25rem, 8vw, 8.25rem); letter-spacing: -.03em; color: var(--s-lime); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}
.ksm-s-passo__scheda {
	padding: clamp(18px, 1.8vw, 26px); border-radius: 22px; flex: 1;
	background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .30);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ksm-s-passo__titolo { margin: 0 0 8px; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.25; font-weight: 800; color: #fff; }
.ksm-s-passo__scheda p { margin: 0; font-size: 1.03125rem; line-height: 1.6; color: #fff; }
.ksm-s-passo__scheda { transition: transform .35s var(--s-ease), border-color .35s ease; }

/* ------------------------------------------------------------------ 11. CONFRONTO («oggi» contro «con KSM») */
.ksm-s-confronto__griglia { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; position: relative; }
.ksm-s-confronto__colonna { padding: clamp(24px, 3vw, 46px); position: relative; }
.ksm-s-confronto__colonna--prima {
	background: #e1ebf6; color: var(--s-ink); border-radius: 28px 0 0 28px; margin-block: clamp(14px, 2vw, 30px);
	border: 1px solid #cddcec; border-right: 0;
}
.ksm-s-confronto__colonna--dopo {
	color: #fff; border-radius: 28px;
	background: var(--s-griglia), radial-gradient(ellipse 50% 60% at 100% 0%, rgba(58, 134, 214, .40), transparent 70%), linear-gradient(140deg, #134380, var(--s-blu4) 60%, var(--s-notte));
	box-shadow: 0 34px 80px rgba(8, 36, 84, .38), inset 0 0 0 1px rgba(255, 255, 255, .3);
	margin-left: -1px;
}
.ksm-s-confronto__etichetta { display: inline-block; margin: 0 0 14px; font-size: .8125rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ksm-s-confronto__colonna--prima .ksm-s-confronto__etichetta { color: var(--s-ink2); }
.ksm-s-confronto__colonna--dopo .ksm-s-confronto__etichetta { color: var(--s-lime); }
.ksm-s-confronto__titolo { margin: 0 0 18px; font-family: "KSM Playfair", Georgia, serif; font-weight: 700; font-size: clamp(1.5625rem, 2.6vw, 2.375rem); line-height: 1.15; }
.ksm-s-confronto__colonna--prima .ksm-s-confronto__titolo { color: var(--s-blu4); }
.ksm-s-confronto__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ksm-s-confronto__elenco li { position: relative; padding-left: 44px; font-size: 1.09375rem; line-height: 1.5; }
.ksm-s-confronto__elenco li::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%;
	background-repeat: no-repeat; background-position: center; background-size: 15px;
}
.ksm-s-confronto__colonna--prima li { color: var(--s-ink2); }
.ksm-s-confronto__colonna--prima li::before { background-color: #c5d6e8; }
.ksm-s-confronto__colonna--dopo li { color: #fff; }
.ksm-s-confronto__colonna--dopo li::before { background-color: var(--s-lime); box-shadow: 0 0 16px rgba(215, 242, 74, .55); }
/* VA-07, VC-10, RQ-09 (9/10/2026): il segno davanti alle righe lo decide la colonna (data-icona, dal renderer), non il lato: prima la sinistra
   aveva sempre la ✕ e la destra la ✓ («We do» con le ✕, «We do not» con le ✓). no = ✕ (il problema) · si = ✓ (la risposta, ciò che si fa)
   · limite = − in un cerchio vuoto (ciò che non si fa, dove ci si ferma) · neutro = un punto (due elenchi alla pari) */
.ksm-s-confronto__colonna--prima[data-icona="no"] li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b4a6f' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ksm-s-confronto__colonna--prima[data-icona="si"] li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b4a6f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ksm-s-confronto__colonna--prima[data-icona="limite"] li::before { background-color: transparent; border: 2px solid #2b4a6f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b4a6f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.ksm-s-confronto__colonna--prima[data-icona="neutro"] li::before { background-image: radial-gradient(circle, #144889 0 4.5px, transparent 5px); background-size: 100% 100%; }
.ksm-s-confronto__colonna--dopo[data-icona="si"] li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2748' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ksm-s-confronto__colonna--dopo[data-icona="no"] li::before { background-color: transparent; box-shadow: none; border: 2px solid rgba(255, 255, 255, .85); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ksm-s-confronto__colonna--dopo[data-icona="limite"] li::before { background-color: transparent; box-shadow: none; border: 2px solid rgba(255, 255, 255, .85); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.ksm-s-confronto__colonna--dopo[data-icona="neutro"] li::before { background-color: rgba(255, 255, 255, .08); box-shadow: none; border: 1.5px solid rgba(255, 255, 255, .55); background-image: radial-gradient(circle, var(--s-lime) 0 4.5px, transparent 5px); background-size: 100% 100%; }
/* «alla pari» (tutto ciò che non è problema → risposta): niente freccia, due riquadri interi della stessa altezza, staccati (VA-11) */
.ksm-s-confronto--pari .ksm-s-confronto__griglia { gap: clamp(16px, 2vw, 28px); }
.ksm-s-confronto--pari .ksm-s-confronto__colonna--prima { border-radius: 28px; margin-block: 0; border-right: 1px solid #cddcec; }
.ksm-s-confronto--pari .ksm-s-confronto__colonna--dopo { margin-left: 0; }
/* problema → risposta: il riquadro del problema è alto quanto il SUO testo, centrato sulla risposta (vB-18: era stirato, 180 px vuoti) */
.ksm-s-confronto:not(.ksm-s-confronto--pari) .ksm-s-confronto__colonna--prima { align-self: center; }
.ksm-s-confronto__freccia {
	position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center; background: var(--s-lime); color: var(--s-ink); box-shadow: 0 0 0 8px rgba(255, 255, 255, .9), 0 12px 30px rgba(8, 36, 84, .3);
}
.ksm-s-confronto__freccia svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ 12. LIVELLI (la scala, come gradini) */
.ksm-s-livelli__scala { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; align-items: end; }
.ksm-s-livello {
	--cap: var(--s-cielo1); position: relative; min-height: calc(210px + var(--i, 0) * 58px); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
	padding: 24px 22px 24px; color: #fff; border-radius: 22px 22px 10px 10px; overflow: hidden;
	background: var(--s-griglia), linear-gradient(180deg, var(--s-blu3), var(--s-blu4) 60%, var(--s-notte));
	border-top: 7px solid var(--cap);
	box-shadow: 0 24px 50px rgba(8, 36, 84, .26);
}
.ksm-s-livello::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; background: linear-gradient(180deg, rgba(255, 255, 255, .13), transparent); z-index: 0; }
.ksm-s-livello > * { position: relative; z-index: 1; }
.ksm-s-livello:nth-child(1) { --cap: #9cc8f2; } .ksm-s-livello:nth-child(2) { --cap: #7fb2ea; } .ksm-s-livello:nth-child(3) { --cap: #8fd6d0; }
.ksm-s-livello:nth-child(4) { --cap: #b9e57a; } .ksm-s-livello:nth-child(5) { --cap: #c6ec5c; } .ksm-s-livello:nth-child(6) { --cap: #d0f04f; }
.ksm-s-livello:nth-child(n+7), .ksm-s-livello:last-child { --cap: var(--s-lime); }
.ksm-s-livello__sigla { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; font-family: "KSM Playfair", Georgia, serif; font-weight: 700; font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: 1; color: var(--cap); text-shadow: 0 0 24px color-mix(in srgb, var(--cap) 45%, transparent); }
.ksm-s-livello__nome { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.25; font-weight: 800; }
.ksm-s-livello__cosa { margin: 0; font-size: 1rem; line-height: 1.55; color: #fff; } /* v1.7: era #eaf1fb, 6,8:1 sul gradino più chiaro quando sotto c'è anche il limite (§24) */

/* ------------------------------------------------------------------ 13. CITAZIONE (la frase d'oro) */
.ksm-s-citazione { padding-block: clamp(56px, 7vw, 116px); }
.ksm-s-citazione__figura { margin: 0; position: relative; max-width: 1100px; margin-inline: auto; }
.ksm-s-citazione__segno {
	position: absolute; z-index: 0; left: -.04em; top: -.52em; font-family: "KSM Playfair", Georgia, serif; font-weight: 700;
	font-size: clamp(8.75rem, 22vw, 21.25rem); line-height: 1; pointer-events: none; user-select: none;
	color: rgba(255, 255, 255, .6); translate: calc(var(--p, 0) * 30px) 0;
}
.ksm-s[data-sfondo="notte"] .ksm-s-citazione__segno, .ksm-s[data-sfondo="blu"] .ksm-s-citazione__segno { color: rgba(255, 255, 255, .13); }
.ksm-s-citazione__testo {
	position: relative; z-index: 1; margin: 0; font-family: "KSM Playfair", Georgia, serif; font-weight: 700; text-wrap: balance;
	font-size: clamp(1.875rem, 4.6vw, 4.5rem); line-height: 1.14; letter-spacing: -.015em; color: var(--t-titolo);
}
.ksm-s-citazione__fonte { position: relative; z-index: 1; margin: clamp(22px, 2.6vw, 38px) 0 0; display: flex; align-items: center; gap: 16px; font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-fg); }
.ksm-s-citazione__fonte::before { content: ""; width: 56px; height: 3px; border-radius: 3px; background: var(--t-fg); flex: none; }
/* VA-10 (9/10/2026): la citazione stava a sinistra con la metà destra vuota e il segno «“» più a sinistra del testo: ora è centrata,
   il segno sopra, sul suo asse */
.ksm-s-citazione__figura { text-align: center; max-width: 1000px; }
.ksm-s-citazione__segno { left: 0; right: 0; text-align: center; }
.ksm-s-citazione__fonte, .ksm-s-citazione .ksm-s__cta { justify-content: center; }

/* ------------------------------------------------------------------ 14. SCHEDE (che si sollevano) */
.ksm-s-schede__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.ksm-s-scheda {
	position: relative; display: flex; flex-direction: column; overflow: hidden; height: 100%;
	background: #fff; color: var(--s-ink); border: 1px solid var(--s-filo); border-radius: 26px;
	box-shadow: 0 12px 30px rgba(15, 58, 115, .10);
}
.ksm-s-scheda::before { content: ""; position: absolute; z-index: 3; left: 0; top: 0; height: 6px; width: 100%; background: linear-gradient(90deg, var(--s-blu1), var(--s-lime)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--s-ease); }
.ksm-s-scheda:focus-within { border-color: var(--s-blu1); }
.ksm-s-scheda:focus-within::before { transform: scaleX(1); }
.ksm-s-scheda .ksm-foto { border-radius: 0; box-shadow: none; }
.ksm-s-scheda .ksm-foto__quadro, .ksm-s-scheda .ksm-segnaposto { --ratio: 16 / 11; border-radius: 0; }
.ksm-s-scheda .ksm-segnaposto { box-shadow: none; border: 0; }
.ksm-s-scheda .ksm-foto__quadro img { transition: scale .8s var(--s-ease); }
/* C-06, VA-05, VC-12 (9/10/2026): la testa con la sola icona era un rettangolo blu di 180-340 px («sembra una foto mancante»): ora è una
   fascia bassa (88 px, 72 sul telefono) con l'icona a sinistra */
.ksm-s-scheda__icona {
	display: flex; align-items: center; height: 88px; padding: 0 clamp(20px, 2vw, 28px); color: var(--s-lime);
	background: var(--s-griglia), radial-gradient(ellipse 50% 120% at 100% 0%, rgba(91, 151, 222, .45), transparent 70%), linear-gradient(140deg, var(--s-blu3), var(--s-blu4) 70%, var(--s-notte));
}
.ksm-s-scheda__icona .ksm-cerchio { width: 56px; height: 56px; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); }
.ksm-s-scheda__icona .ksm-cerchio svg { width: 26px; height: 26px; }
/* C-06: la testa con un visual 3D del repertorio (al posto della foto che manca): decorativa, sul blu della marca */
.ksm-s-scheda__visual {
	position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: hidden;
	background: var(--s-griglia), radial-gradient(ellipse 55% 60% at 50% 50%, rgba(91, 151, 222, .5), transparent 72%), linear-gradient(140deg, var(--s-blu3), var(--s-blu4) 70%, var(--s-notte));
}
.ksm-s-scheda__visual img { display: block; width: auto; height: 104%; max-width: 100%; object-fit: contain; transition: scale .8s var(--s-ease); }
.ksm-s-scheda__corpo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: clamp(20px, 2vw, 28px); }
.ksm-s-scheda__etichetta { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--s-blu3); }
.ksm-s-scheda__titolo { margin: 0; font-family: "KSM Playfair", Georgia, serif; font-weight: 700; font-size: clamp(1.3125rem, 1.8vw, 1.625rem); line-height: 1.2; color: var(--s-blu4); }
.ksm-s .ksm-s-scheda__titolo a { color: inherit; text-decoration: none; } /* v1.7: con .ksm-s davanti vince su «.ksm-s a:not([class])»: sui fondi blu e notte il titolo di una scheda bianca usciva bianco su bianco (§24) */
.ksm-s-scheda__titolo a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* tutta la scheda è il link */
.ksm-s-scheda__titolo a:focus-visible { outline: none; }
.ksm-s-scheda:has(.ksm-s-scheda__titolo a:focus-visible) { outline: 3px solid var(--s-ink); outline-offset: 4px; }
.ksm-s-scheda__testo { margin: 0; font-size: 1.03125rem; line-height: 1.6; color: var(--s-ink2); }
.ksm-s-scheda__vai { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .96875rem; color: var(--s-blu3); }
.ksm-s-scheda__vai .ksm-freccia { width: 34px; height: 34px; background: var(--s-blu3); color: #fff; border: 0; transition: background-color .3s ease, translate .3s var(--s-ease); }
.ksm-s-scheda__vai .ksm-freccia svg { width: 17px; height: 17px; }
/* VC-07, VA-15 (9/10/2026): il badge di stato sta in fondo alla scheda: i titoli di una fila partono tutti alla stessa altezza */
.ksm-s-scheda__corpo > .ksm-s__stato { margin-top: auto; padding-top: 4px; }
.ksm-s-scheda__corpo > .ksm-s__stato + .ksm-s-scheda__vai { margin-top: 0; }
/* VC-11: cinque schede a tre colonne (3+2) lasciavano una cella vuota: l'ultima, se è una scheda d'icona o senza immagine, occupa le due */
@media (min-width: 900px) {
	:is(.ksm-s-schede__lista, .ksm-s-vetro__lista)[data-colonne="3"] > li:last-child:nth-child(3n+2):is(.ksm-s-vetro__scheda, :has(> .ksm-s-scheda > .ksm-s-scheda__icona), :has(> .ksm-s-scheda[data-media="no"])) { grid-column: span 2; }
}

/* ---- le schede del Journal (vB-10, vB-11, RQ-13, 9/10/2026): niente etichetta del tema ripetuta (il renderer non la scrive più), titolo al
   massimo su quattro righe (tre sul telefono), schede alternate chiare e blu (la colonna bianca di undici schede non c'è più), e dopo le
   prime quattro il <details> «Mostra tutte le N» (senza JavaScript) */
.ksm-s-schede[data-formato="ricerca"] .ksm-s-scheda__titolo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; font-size: clamp(1.1875rem, 1.5vw, 1.375rem); }
.ksm-s-schede[data-formato="ricerca"] .ksm-s-schede__lista > li:nth-child(even) .ksm-s-scheda {
	color: #fff; border-color: rgba(255, 255, 255, .3);
	background: var(--s-griglia), radial-gradient(ellipse 60% 70% at 100% 0%, rgba(58, 134, 214, .35), transparent 70%), linear-gradient(150deg, #134380, var(--s-blu4) 60%, var(--s-notte));
}
.ksm-s-schede[data-formato="ricerca"] .ksm-s-schede__lista > li:nth-child(even) :is(.ksm-s-scheda__titolo, .ksm-s-scheda__testo, .ksm-s-scheda__vai) { color: #fff; }
.ksm-s-schede[data-formato="ricerca"] .ksm-s-schede__lista > li:nth-child(even) .ksm-s-scheda__vai .ksm-freccia { background: var(--s-lime); color: var(--s-ink); }
.ksm-s-schede__altre { margin-top: clamp(16px, 2vw, 30px); }
.ksm-s-schede__mostra {
	display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px 8px 22px; border-radius: 999px; cursor: pointer; list-style: none;
	font-weight: 700; font-size: 1rem; line-height: 1.3; color: #fff; background: var(--s-blu3); box-shadow: 0 12px 30px rgba(15, 58, 115, .30);
	transition: background-color .25s ease;
}
.ksm-s-schede__mostra::-webkit-details-marker { display: none; }
.ksm-s-schede__mostra:hover { background: var(--s-blu4); }
.ksm-s-schede__mostra:focus-visible { outline: 3px solid var(--t-focus); outline-offset: 3px; border-radius: 999px; }
.ksm-s-schede__mostra-icona { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--s-lime); color: var(--s-ink); transition: rotate .35s var(--s-ease); }
.ksm-s-schede__mostra-icona svg { width: 18px; height: 18px; }
.ksm-s-schede__altre[open] > .ksm-s-schede__mostra { margin-bottom: clamp(16px, 2vw, 30px); }
.ksm-s-schede__altre[open] .ksm-s-schede__mostra-icona { rotate: 45deg; }
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-schede__mostra { background: var(--s-lime); color: var(--s-ink); }
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-schede__mostra-icona { background: var(--s-ink); color: var(--s-lime); }

/* ------------------------------------------------------------------ 15. FAQ */
.ksm-s-faq__elenco { display: grid; gap: 12px; max-width: 920px; margin: 0 auto; }
/* da 900 px in su la FAQ sta BASSA: il titolo a sinistra, le domande a destra (come la fascia di testo) */
@media (min-width: 900px) {
	.ksm-s-faq .ksm-s__dentro { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4.4vw, 72px); align-items: start; }
	.ksm-s-faq .ksm-s__intro { margin: 0; max-width: none; text-align: left; }
	.ksm-s-faq__elenco { max-width: none; margin: 0; }
	/* VA-12, vB-18 (9/10/2026): accanto alle domande la colonna del titolo restava vuota per ~500 px: il titolo accompagna lo scorrimento.
	   «overflow: clip» (non hidden) taglia lo stesso agli angoli ma non fa del pannello un contenitore di scorrimento, che fermerebbe lo sticky */
	.ksm-s-faq { overflow: clip; }
	.ksm-s-faq .ksm-s__intro { position: sticky; top: clamp(18px, 3vw, 40px); }
}
.ksm-s-faq__voce {
	border-radius: 22px; color: var(--s-ink);
	background: linear-gradient(160deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .54)); border: 1px solid rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(15, 58, 115, .12);
	transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ksm-s-faq__voce[open] { background: #fff; box-shadow: 0 24px 56px rgba(15, 58, 115, .24); border-color: #fff; }
.ksm-s-faq__voce summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none;
	padding: 22px 26px; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.35; font-weight: 800;
}
.ksm-s-faq__voce summary::-webkit-details-marker { display: none; }
.ksm-s-faq__icona { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--s-blu3); color: #fff; transition: rotate .35s var(--s-ease), background-color .3s ease; }
.ksm-s-faq__icona svg { width: 20px; height: 20px; }
.ksm-s-faq__voce[open] .ksm-s-faq__icona { rotate: 45deg; background: var(--s-ink); }
.ksm-s-faq__voce summary:hover .ksm-s-faq__icona { background: var(--s-ink); }
.ksm-s-faq__risposta { padding: 0 26px 26px; max-width: 46rem; font-size: 1.09375rem; line-height: 1.65; color: var(--s-ink); animation: ksm-apri .4s var(--s-ease); }
.ksm-s-faq__risposta p { margin: 0 0 1em; } .ksm-s-faq__risposta p:last-child { margin: 0; }
@keyframes ksm-apri { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
.ksm-s-faq:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-faq__voce { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .3); box-shadow: none; color: #fff; }
.ksm-s-faq:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-faq__voce[open] { background: rgba(255, 255, 255, .06); }
.ksm-s-faq:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-faq__risposta { color: #fff; }
.ksm-s-faq:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-faq__icona { background: var(--s-lime); color: var(--s-ink); }

/* ------------------------------------------------------------------ 16. RIFERIMENTI (le fonti, in fondo) */
.ksm-s-riferimenti { padding-block: clamp(44px, 6vw, 88px); }
.ksm-s-riferimenti__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); counter-reset: rif; }
.ksm-s-riferimento { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--t-filo); counter-increment: rif; }
.ksm-s-riferimento::before {
	content: counter(rif); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	font-size: .875rem; font-weight: 800; background: var(--s-blu3); color: #fff;
}
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-riferimento::before { background: var(--s-lime); color: var(--s-ink); }
.ksm-s-riferimento__titolo { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 1.0625rem; line-height: 1.4; color: var(--t-link); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ksm-s-riferimento__titolo:hover { text-decoration-thickness: 3px; }
.ksm-s-riferimento__titolo svg { width: 15px; height: 15px; flex: none; align-self: center; }
.ksm-s-riferimento__ente { display: block; margin-top: 3px; font-size: .9375rem; line-height: 1.45; color: var(--t-fg2); }
/* VA-08 (G5, 9/10/2026): una fonte sola (Longevità) stava in un pannello alto 480 px, più di metà vuoto: con una voce il pannello si
   stringe in altezza e la voce prende tutta la riga. Con due o più voci non cambia nulla. */
.ksm-s-riferimenti:has(.ksm-s-riferimento:only-child) { padding-block: clamp(24px, 3vw, 44px); }
.ksm-s-riferimenti__lista:has(> .ksm-s-riferimento:only-child) { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------ 17. CTA (la chiusura blu) */
.ksm-s-cta { padding-bottom: calc(var(--s-pad-v) + clamp(34px, 6vw, 96px)); }
.ksm-s-cta__griglia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(24px, 4vw, 70px); }
.ksm-s-cta .ksm-s__titolo { font-size: clamp(2.125rem, 4.8vw, 4.75rem); max-width: 12em; }
.ksm-s-cta__figura { position: relative; }
.ksm-s-cta__figura img { display: block; width: min(100%, 560px); margin: 0 auto; height: auto; translate: 0 calc(var(--p, 0) * -26px); }
.ksm-s-cta__figura::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 96%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(91, 151, 222, .72), rgba(58, 134, 214, .28) 44%, transparent 70%); }
/* vB-18 (9/10/2026): la chiusura senza figura (le montagne le disegna il crinale) lasciava vuota la metà destra: il testo si centra */
.ksm-s-cta--senza-figura .ksm-s-cta__griglia { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.ksm-s-cta--senza-figura :is(.ksm-s__titolo, .ksm-s__testo) { margin-inline: auto; }
.ksm-s-cta--senza-figura .ksm-s__cta { justify-content: center; }

/* i crinali (apertura, chiusura, piè di pagina): tre strati che si muovono a velocità diverse */
.ksm-crinale { position: absolute; inset: auto 0 0 0; height: clamp(90px, 13vw, 200px); z-index: 1; pointer-events: none; overflow: hidden; }
.ksm-crinale i { position: absolute; inset: 0 -4% 0 -4%; background-repeat: repeat-x; background-position: 0 100%; background-size: auto 100%; }
.ksm-crinale i:nth-child(1) { background-image: var(--s-crinale-lontano); translate: calc(var(--p, 0) * 36px) 0; }
.ksm-crinale i:nth-child(2) { background-image: var(--s-crinale-medio); translate: calc(var(--p, 0) * -22px) 0; top: 12%; }
.ksm-crinale i:nth-child(3) { background-image: var(--s-crinale-vicino); translate: calc(var(--p, 0) * 12px) 0; top: 38%; }

/* ------------------------------------------------------------------ 18. SELETTORE «Che cosa fai?» (Professional) */
.ksm-s-selettore__lista { list-style: none; margin: 0 -7px; padding: 0; display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 14px 0; }
.ksm-s-selettore__voce { padding: 0 7px; }
.ksm-s-selettore__voce { grid-column: span 12; }
.ksm-s-selettore__voce[data-taglia="grande"] { grid-column: span 15; }
.ksm-s-selettore__voce[data-taglia="piccolo"] { grid-column: span 24; }
.ksm-s-selettore__voce[data-taglia="minimo"] { grid-column: 47 / -1; align-self: center; }
.ksm-s-selettore__voce a {
	display: flex; align-items: center; gap: 14px; height: 100%; text-decoration: none; color: #fff;
	border-radius: 24px; font-weight: 700; line-height: 1.25;
	background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .34);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: transform .3s var(--s-ease), border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.ksm-s-selettore__nome { flex: 1; min-width: 0; overflow-wrap: normal; word-break: normal; }
/* AC-16 (9/10/2026): con la spaziatura del testo di WCAG 1.4.12 (lettere +0,12 em) «Physiotherapist» non stava più nella pillola e toccava
   il cerchio della freccia: nelle pillole la parola può andare a capo dove serve (a spaziatura normale ci sta, e non cambia nulla) */
.ksm-s-selettore__voce:is([data-taglia="medio"], [data-taglia="piccolo"]) .ksm-s-selettore__nome { overflow-wrap: anywhere; }
.ksm-s-selettore__voce .ksm-freccia { width: 38px; height: 38px; flex: none; background: rgba(255, 255, 255, .14); border-color: transparent; transition: background-color .3s ease, color .3s ease, translate .3s var(--s-ease); }
.ksm-s-selettore__voce .ksm-freccia svg { width: 18px; height: 18px; }
/* grande: medico, clinica, studio, SPA */
.ksm-s-selettore__voce[data-taglia="grande"] a { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 24px 22px 22px; min-height: 176px; font-size: clamp(1.1875rem, 1.55vw, 1.4375rem); }
.ksm-s-selettore__voce[data-taglia="grande"] .ksm-s-selettore__nome { flex: 1 1 auto; hyphens: auto; }
.ksm-s-selettore__voce[data-taglia="grande"] .ksm-s-selettore__piede { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; }
/* medio: le professioni sanitarie */
.ksm-s-selettore__voce[data-taglia="medio"] a { padding: 14px 14px 14px 22px; min-height: 68px; border-radius: 999px; font-size: 1.0625rem; }
/* piccolo: preparatore atletico / personal trainer */
.ksm-s-selettore__voce[data-taglia="piccolo"] a { padding: 11px 12px 11px 20px; min-height: 56px; border-radius: 999px; font-size: 1rem; font-weight: 600; background: transparent; border-color: rgba(255, 255, 255, .34); }
.ksm-s-selettore__voce[data-taglia="piccolo"] .ksm-freccia { width: 32px; height: 32px; }
/* minimo: estetista — quasi non si deve vedere, ma il contrasto resta AAA (testo #fff su blu notte: 12:1) */
.ksm-s-selettore__voce[data-taglia="minimo"] a { padding: 7px 8px 7px 15px; min-height: 40px; border-radius: 999px; font-size: .84375rem; font-weight: 500; background: transparent; border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-end; width: max-content; margin-left: auto; }
.ksm-s-selettore__voce[data-taglia="minimo"] .ksm-s-selettore__nome { flex: none; }
.ksm-s-selettore__voce[data-taglia="minimo"] .ksm-freccia { width: 24px; height: 24px; }
.ksm-s-selettore__voce[data-taglia="minimo"] .ksm-freccia svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ 19-bis. L'IMPIANTO delle pagine interne (AC-05, 9/10/2026, G3)
   pagina/foglio.php: la testata (il banner) sta FUORI da <main>; apertura (h1) e corpo stanno DENTRO. La cornice blu però
   avvolge ancora testata e apertura: è dentro <main> e risale DIETRO la testata. Una griglia a tre righe (testata, apertura,
   resto): testata e <main> partono tutte e due dalla riga 1; <main> e la cornice sono «subgrid», quindi la riga 1 è alta quanto
   la testata e la cornice ne prende le misure senza conoscerle. La testata sta 1 px dentro (il bordo della cornice), come
   quando ne era figlia. Aspetto identico a prima: tests/prova_impianto.py lo confronta coi pixel. Le quattro regole dei pulsanti
   qui sotto sono quelle che la testata riceveva come discendente di .ksm-cornice-fascia (§ 1, § 5, § 23), con la stessa
   specificità (:where). Senza subgrid (browser di prima del 2023) la testata sta sopra la cornice, sul suo stesso blu. */
.ksm-impianto { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
.ksm-impianto > .ksm-testata { grid-area: 1 / 1 / 2 / 2; width: calc(100% - 2px); max-width: 1638px; margin: 1px auto 0; }
.ksm-impianto__main { grid-area: 1 / 1 / 4 / 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; min-width: 0; }
.ksm-impianto__main > .ksm-cornice { grid-row: 1 / 3; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
.ksm-impianto__apertura { grid-row: 2; min-width: 0; }
.ksm-impianto__resto { grid-row: 3; min-width: 0; }
.ksm-impianto > :where(.ksm-testata) :is(.ksm-bottone-lime, .ksm-bottone-vetro):focus-visible { border-radius: 999px; }
.ksm-impianto > :where(.ksm-testata) :is(.ksm-bottone-lime, .ksm-bottone-vetro) { transition: transform .25s var(--s-ease), background-color .25s ease, box-shadow .25s ease; }
.ksm-impianto > :where(.ksm-testata) :is(.ksm-bottone-lime, .ksm-bottone-vetro):hover .ksm-freccia svg { translate: 3px 0; }
.ksm-impianto > :where(.ksm-testata) .ksm-freccia svg { transition: translate .25s var(--s-ease); }
@media (hover: hover) { .ksm-impianto > :where(.ksm-testata) .ksm-bottone-lime:hover { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
	.ksm-impianto > :where(.ksm-testata) *, .ksm-impianto > :where(.ksm-testata) *::before { animation: none !important; transition: none !important; }
	.ksm-impianto > :where(.ksm-testata) .ksm-bottone-lime:hover { transform: none; }
}
@supports not (grid-template-rows: subgrid) {
	.ksm-impianto, .ksm-impianto__main, .ksm-impianto__main > .ksm-cornice { display: block; }
	.ksm-impianto > .ksm-testata { width: 100%; max-width: 1640px; margin: 0 auto; padding-bottom: 18px; background: var(--s-notte, #082448); border: 1px solid rgba(255, 255, 255, .5); border-bottom: 0; border-radius: clamp(18px, 2vw, 30px) clamp(18px, 2vw, 30px) 0 0; }
	.ksm-impianto__main > .ksm-cornice { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* ------------------------------------------------------------------ 19. L'APERTURA delle pagine interne (la fascia blu col titolo) */
/* Resta lei: cornice blu col bordino e la griglia, il quadro celeste, occhiello lime, titolo sottile.
   In più: foto o visual nel riquadro di vetro, i pulsanti, i crinali in basso. */
.ksm-interna .ksm-cornice-fascia {
	padding-bottom: 0; position: relative;
	background:
		var(--s-griglia),
		radial-gradient(ellipse 42% 46% at 80% 58%, rgba(58, 134, 214, .58), transparent 74%),
		radial-gradient(ellipse 46% 56% at 0% 100%, rgba(31, 95, 176, .36), transparent 72%),
		radial-gradient(ellipse 70% 90% at 75% 52%, var(--s-blu3) 0%, var(--s-blu4) 70%, var(--s-notte) 100%);
}
/* il velo sotto la testata: logo, menu, lingue e pulsante di vetro restano sopra un blu scuro (≥ 7:1) */
.ksm-interna .ksm-cornice-fascia::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: max(200px, 13vw); pointer-events: none; background: linear-gradient(180deg, rgba(8, 34, 78, .72) 0%, rgba(8, 34, 78, .58) 55%, rgba(8, 34, 78, 0) 100%); }
.ksm-interna .ksm-fascia {
	position: relative; z-index: 2; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 4.5vw, 80px); align-items: center;
	padding: clamp(30px, 4.6vw, 76px) var(--ksm-margine) clamp(110px, 13vw, 210px);
}
.ksm-interna .ksm-fascia--con-media { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
.ksm-interna .ksm-fascia__testi { max-width: 760px; }
.ksm-interna .ksm-fascia-sopra {
	display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 2vw, 26px);
	font-size: .875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--s-lime);
}
.ksm-interna .ksm-fascia-sopra::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--s-lime); box-shadow: 0 0 14px 4px rgba(215, 242, 74, .55); flex: none; }
.ksm-interna .ksm-fascia h1 { font-size: clamp(2.25rem, 5vw, 5.125rem); font-weight: 300; line-height: 1.05; letter-spacing: -.018em; margin: 0; max-width: 14em; text-wrap: balance; }
.ksm-interna .ksm-fascia-sotto { font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.55; max-width: 38em; margin: clamp(18px, 2vw, 28px) 0 0; color: #fff; }
.ksm-interna .ksm-fascia-meta { font-size: .9375rem; margin: 18px 0 0; color: #e6eefa; opacity: 1; }
.ksm-interna .ksm-fascia__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: clamp(26px, 3vw, 44px); }
.ksm-interna .ksm-fascia__media { position: relative; }
.ksm-interna .ksm-fascia__media::before { content: ""; position: absolute; z-index: -1; inset: -8% -6%; border-radius: 50%; background: radial-gradient(ellipse, rgba(91, 151, 222, .55), transparent 68%); }
.ksm-interna .ksm-fascia__visual { display: block; width: min(100%, 540px); margin: 0 auto; height: auto; translate: 0 calc(var(--p, 0) * -24px); }
/* la scheda di vetro «In breve» (facoltativa) */
.ksm-interna .ksm-fascia__breve {
	justify-self: end; width: min(100%, 420px); padding: clamp(22px, 2.4vw, 34px); border-radius: 24px;
	background: linear-gradient(160deg, rgba(7, 30, 70, .80), rgba(7, 30, 70, .64)); border: 1px solid rgba(255, 255, 255, .42);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ksm-interna .ksm-fascia__breve h2 { margin: 0 0 14px; font-family: inherit; font-size: .875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--s-lime); }
.ksm-interna .ksm-fascia__breve ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ksm-interna .ksm-fascia__breve li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.03125rem; line-height: 1.5; }
.ksm-interna .ksm-fascia__breve li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: .5em; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(255, 255, 255, .55); }
/* l'apertura NON ha una comparsa d'ingresso: c'è già al primo disegno (nessun lampo, nessun ritardo
   del titolo); il suo movimento è il parallasse dei crinali e della foto, comandato dallo scorrimento. */

/* ------------------------------------------------------------------ 20. IL SOTTO-MENU DELLA TESTATA (Turismo Sanitario ▾ → Cybersicurezza) */
/* Schema «disclosure» (WAI-ARIA APG): il testo è un link vero alla pagina, il pulsante accanto apre
   l'elenco. Il tuo puntatore sulla voce lo apre (e il clic che segue NON lo richiude); la tastiera usa
   Invio, Spazio o Freccia giù, Esc chiude e riporta il fuoco al pulsante; al tocco il pulsante alterna.
   SENZA JavaScript il pulsante non c'è e l'elenco si apre con :hover e :focus-within. */
.ksm-navigazione li { position: relative; }
/* C-01 (giro di correzioni del 9/10): la freccetta NON occupa spazio nella riga del menu. Nella prima stesura stava
   accanto alla voce (26 px + 6 di spazio): il menu si allargava di 32 px, in inglese ogni voce si spostava di 16 px
   rispetto alla v1.6 e in italiano la testata andava su due righe a 1366 e 1440 px — l'apertura «perfetta» (R01) non
   era più quella. Ora sopra i 1100 px la voce è un blocco come le altre (stessa altezza, stessa larghezza della v1.6:
   tests/confronta_testata_v16.py) e la freccetta sta SOTTO la voce, centrata, fuori dal flusso: dove nella v1.6 c'era
   la sottolineatura a puntini, adesso c'è il segno che sotto c'è un elenco. Sotto i 1100 px (la striscia che scorre,
   § 22) torna accanto alla voce, dove lo spazio non manca. */
.ksm-ha-sotto { display: block; }
.ksm-sotto-bottone {
	appearance: none; -webkit-appearance: none; position: absolute; z-index: 1; left: 50%; top: calc(100% + 10px); translate: -50% 0;
	display: grid; place-items: start center; flex: none; width: 32px; height: 24px; margin: 0; padding: 3px 0 0;
	border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
	transition: background-color .2s ease;
}
/* l'area del tocco: 44 × 44 px, verso il basso (sopra c'è la voce, che resta tutta sua) */
.ksm-sotto-bottone::after { content: ""; position: absolute; inset: 0 -6px -20px; }
.ksm-sotto-bottone:hover { background: rgba(255, 255, 255, .16); }
.ksm-sotto-bottone svg { width: 15px; height: 15px; transition: rotate .25s var(--s-ease); }
.ksm-ha-sotto.ksm-aperto > .ksm-sotto-bottone svg { rotate: 180deg; }
.ksm-ha-sotto.ksm-ramo-attivo > a { color: var(--s-lime); border-bottom-color: var(--s-lime); }
.ksm-ha-sotto.ksm-ramo-attivo > .ksm-sotto-bottone { color: var(--s-lime); }
/* il ponte per il puntatore, dalla voce all'elenco: comincia sotto la sottolineatura (i 10 px di padding e filo sono
   ancora il link, e il clic lì deve portare alla pagina) e passa SOTTO la freccetta, che resta cliccabile (z-index 1) */
.ksm-ha-sotto::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 10px); height: 34px; }
/* l'elenco: «.ksm-navigazione ul» di home.css lo metterebbe in riga, quindi si riporta in colonna; si apre SOTTO la
   freccetta (mai sopra: col fuoco sulla freccetta, l'anello del fuoco resta visibile, WCAG 2.4.11) */
.ksm-navigazione .ksm-sottomenu {
	position: absolute; z-index: 40; top: calc(100% + 42px); left: 50%; translate: -50% 8px; min-width: 270px; margin: 0; padding: 8px; list-style: none;
	display: grid; gap: 2px; justify-content: stretch;
	border-radius: 22px; color: #fff; text-align: left;
	background: linear-gradient(160deg, rgba(14, 55, 112, .98), rgba(9, 36, 78, .98)); border: 1px solid rgba(255, 255, 255, .34);
	box-shadow: 0 28px 70px rgba(2, 12, 30, .55), inset 0 0 0 4px rgba(255, 255, 255, .04);
	opacity: 0; visibility: hidden; transition: opacity .22s ease, translate .22s var(--s-ease), visibility 0s linear .22s;
}
.ksm-sottomenu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* il ponte per il puntatore (l'ultimo tratto: il resto è .ksm-ha-sotto::after) */
.ksm-ha-sotto.ksm-aperto > .ksm-sottomenu { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
html:not(.ksm-js) .ksm-ha-sotto:is(:hover, :focus-within) > .ksm-sottomenu { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
html:not(.ksm-js) .ksm-sotto-bottone { display: none; }
.ksm-navigazione .ksm-sottomenu a {
	display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 15px; border-bottom: 0; font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; color: #fff;
	transition: background-color .2s ease;
}
.ksm-navigazione .ksm-sottomenu a:hover { background: rgba(255, 255, 255, .14); border-bottom: 0; }
.ksm-navigazione .ksm-sottomenu a[aria-current="page"] { color: var(--s-lime); background: rgba(255, 255, 255, .07); }
.ksm-sottomenu .ksm-sotto-icona { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .34); color: var(--s-lime); flex: none; }
.ksm-sottomenu .ksm-sotto-icona svg { width: 17px; height: 17px; }
.ksm-sottomenu small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: #dbe7f6; white-space: normal; }
.ksm-navigazione .ksm-sottomenu :focus-visible { outline: 3px solid var(--s-lime); outline-offset: -3px; }

/* ------------------------------------------------------------------ 21. il piè di pagina e il pulsante «pausa movimento» */
.ksm-home .ksm-piede {
	position: relative; overflow: hidden; max-width: 1640px; margin: var(--s-gap) auto 0; padding: clamp(40px, 5vw, 70px) var(--s-pad-h) clamp(28px, 3vw, 40px);
	border-radius: var(--s-raggio); color: #fff; text-align: left;
	background: var(--s-griglia), linear-gradient(160deg, var(--s-blu4), var(--s-notte));
	border: 1px solid rgba(255, 255, 255, .26);
}
.ksm-home .ksm-piede > * { position: relative; z-index: 2; max-width: var(--s-largo); margin-inline: auto; }
.ksm-home .ksm-piede p { margin: 0; font-size: .9375rem; color: #e6eefa; }
.ksm-home .ksm-piede a { color: #fff; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.ksm-piede__righe { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; }
/* 1.11.0 (SG-1): il sigillo nella riga in fondo, di fronte al © (al telefono va a capo, sotto). La cornice bianca e i 56 px sono in home.css
   (.ksm-sigillo--piede); qui la riga che porta alla pagina che lo spiega: bianca e sottolineata come gli altri collegamenti del piè, alta
   44 px come le voci della mappa (bersaglio AAA). */
.ksm-piede__sigillo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
.ksm-home .ksm-piede .ksm-piede__sigillo-riga { margin: 0; font-size: .875rem; }
.ksm-piede__sigillo-riga a { display: inline-flex; align-items: center; min-height: 44px; }
/* VA-14 (9/10/2026): il piè era «© e tre link» in 130 px: ora il logo bianco, la mappa del sito (le voci del menu), Professional area e le
   pagine legali quando ci sono, poi la riga ©. I link restano sottolineati; ogni link è alto 44 px (bersaglio AAA) */
.ksm-piede__griglia {
	display: grid; grid-template-columns: minmax(170px, .75fr) minmax(0, 2.25fr); gap: clamp(24px, 4vw, 64px); align-items: start;
	padding-bottom: clamp(22px, 2.8vw, 36px); margin-bottom: clamp(18px, 2vw, 26px); border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.ksm-piede__marchio a { display: inline-block; border-radius: 8px; }
.ksm-piede__marchio img { display: block; width: clamp(150px, 13vw, 196px); height: auto; }
.ksm-piede__mappa { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 48px); }
.ksm-piede__menu[aria-labelledby="ksm-piede-sito"] { grid-template-columns: repeat(2, max-content); column-gap: clamp(20px, 3vw, 44px); }
.ksm-home .ksm-piede .ksm-piede__titolo { margin: 0 0 6px; font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--s-lime); }
.ksm-piede__menu { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; font-size: .96875rem; }
.ksm-piede__menu a { display: inline-flex; align-items: center; min-height: 44px; }
.ksm-home .ksm-piede .ksm-piede__nota { margin: 2px 0 0; max-width: 22em; font-size: .875rem; line-height: 1.5; }
@media (max-width: 899px) {
	.ksm-piede__griglia { grid-template-columns: minmax(0, 1fr); }
	.ksm-piede__mappa { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}

/* (C-04, 9/10/2026: il pulsante fisso «Pausa movimento» è stato tolto — copriva testi e bordi, stava in
   fondo all'ordine di tabulazione e si sommava alla pausa della home. Nessuna animazione dura oltre 5 s.)
   La pausa della ROTAZIONE della home resta la sua (home.php/home.js): nasce nascosta (`hidden`) e la mostra
   home.js quando parte, così senza JavaScript non c'è un pulsante che non fa nulla (AC-17). home.css le dà
   `display: grid`, che vincerebbe sull'attributo: qui lo si fa valere. */
.ksm-scena .ksm-pausa[hidden] { display: none; }

/* ------------------------------------------------------------------ 22. schermi stretti */
@media (max-width: 1100px) {
	/* la riga del menu scorre in orizzontale (home.css, com'era): una tendina verrebbe tagliata, quindi
	   il sotto-menu si apre IN LINEA, come una pillola subito dopo la voce, e lo script la porta in vista */
	.ksm-navigazione .ksm-sottomenu {
		position: static; translate: none; display: none; flex-direction: row; align-items: center; gap: 4px; min-width: 0; margin: 0 0 0 6px; padding: 0 4px;
		border-radius: 999px; box-shadow: none; background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .4);
		opacity: 1; visibility: visible; transition: none;
	}
	.ksm-sottomenu::before { display: none; }
	/* nella striscia la freccetta torna ACCANTO alla voce, nel flusso (qui lo spazio non manca: la riga scorre);
	   l'area del tocco è 44 × 44 e non entra nel link (comincia dove finisce la voce) né nella voce dopo (14 px) */
	.ksm-ha-sotto { display: flex; align-items: flex-start; gap: 6px; }
	/* la voce col sotto-menu è un flex (il suo link diventa un blocco) e le altre no: il suo testo e la sua sottolineatura
	   stavano 2 px più in alto delle altre. Allineate sulla linea di base, come nella striscia della v1.6 (9/10) */
	.ksm-navigazione > ul { align-items: baseline; }
	.ksm-ha-sotto::after { display: none; }
	.ksm-sotto-bottone { position: relative; left: auto; top: auto; translate: none; place-items: center; width: 26px; height: 26px; margin: -3px 0 0; padding: 0; border-radius: 50%; }
	.ksm-sotto-bottone::after { inset: -9px -12px -9px -6px; }
	.ksm-sotto-bottone svg { width: 16px; height: 16px; }
	.ksm-ha-sotto.ksm-aperto > .ksm-sottomenu, html:not(.ksm-js) .ksm-ha-sotto:is(:hover, :focus-within) > .ksm-sottomenu { display: flex; translate: none; }
	.ksm-navigazione .ksm-sottomenu a { padding: 3px 12px 5px; gap: 0; border-radius: 999px; }
	.ksm-sottomenu .ksm-sotto-icona, .ksm-sottomenu small { display: none; }
	.ksm-s-livelli__scala { gap: 8px; }
}
@media (max-width: 1100px) {
	.ksm-s-selettore__voce[data-taglia="grande"] { grid-column: span 30; }
	.ksm-s-selettore__voce { grid-column: span 20; }
	.ksm-s-selettore__voce[data-taglia="piccolo"] { grid-column: span 30; }
	.ksm-s-selettore__voce[data-taglia="minimo"] { grid-column: 31 / -1; }
}
@media (max-width: 899px) {
	.ksm-s { --glow-a: .15; }
	.ksm-s[data-lato="sinistra"] { --gx: 88%; --gy: 12%; --hx: 0%; --hy: 108%; }
	.ksm-interna .ksm-cornice-fascia { background: var(--s-griglia), radial-gradient(ellipse 80% 40% at 70% 86%, rgba(58, 134, 214, .40), transparent 74%), radial-gradient(ellipse 70% 90% at 75% 52%, var(--s-blu3) 0%, var(--s-blu4) 70%, var(--s-notte) 100%); }
	.ksm-s-vetro__lista, .ksm-s-schede__lista { --n: 2 !important; }
	.ksm-s-vetro__lista > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	/* il ritaglio sul telefono e sul tablet: la proporzione «m» sostituisce quella da desktop */
	.ksm-foto[data-proporzione-m="3:2"], .ksm-segnaposto[data-proporzione-m="3:2"] { --ratio: 3 / 2; }
	.ksm-foto[data-proporzione-m="4:3"], .ksm-segnaposto[data-proporzione-m="4:3"] { --ratio: 4 / 3; }
	.ksm-foto[data-proporzione-m="16:10"], .ksm-segnaposto[data-proporzione-m="16:10"] { --ratio: 16 / 10; }
	.ksm-foto[data-proporzione-m="1:1"], .ksm-segnaposto[data-proporzione-m="1:1"] { --ratio: 1 / 1; }
	.ksm-s-striscia--foto .ksm-s-striscia__dentro { grid-template-columns: minmax(0, 1fr); }
	.ksm-interna .ksm-fascia--con-media, .ksm-s-cornice__griglia, .ksm-s-testo--con-foto .ksm-s-testo__griglia, .ksm-s-cta__griglia { grid-template-columns: minmax(0, 1fr); }
	.ksm-s-testo:not(.ksm-s-testo--con-foto) .ksm-s-testo__colonna { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.ksm-s-cornice[data-lato="sinistra"] .ksm-s-cornice__media, .ksm-s-testo[data-lato="sinistra"] .ksm-s-testo__media { order: 0; }
	.ksm-interna .ksm-fascia__breve { justify-self: stretch; width: 100%; }
	.ksm-s-cta__figura { width: min(100%, 360px); margin-inline: auto; }   /* larghezza esplicita: con «auto» la figura si restringe al contenuto e un'immagine «lazy» non carica mai */
	.ksm-s-vetro__decoro { width: clamp(110px, 22vw, 170px); } /* VC-17: accanto al titolo, più piccolo (prima: 80vw dietro le schede, al 45%) */
	.ksm-s-schede__lista > li:last-child:nth-child(odd):is(:has(> .ksm-s-scheda > .ksm-s-scheda__icona), :has(> .ksm-s-scheda[data-media="no"])) { grid-column: 1 / -1; } /* VC-11, a due colonne */
	/* i passi: la linea del tempo diventa verticale */
	.ksm-s-passi__lista { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-left: 40px; }
	.ksm-s-passi__lista::before, .ksm-s-passi__lista::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
	.ksm-s-passi__lista::after { transform-origin: 50% 0; transform: scaleY(var(--prog)); background: linear-gradient(180deg, var(--s-lime), #fff); }
	.ksm-s-passo { padding-top: 0; }
	.ksm-s-passo .ksm-punto { left: -40px; top: 8px; }
	.ksm-s-passo__numero { font-size: clamp(3.375rem, 15vw, 5rem); }
	/* il confronto: una colonna sull'altra */
	.ksm-s-confronto__griglia { grid-template-columns: minmax(0, 1fr); }
	.ksm-s-confronto__colonna--prima { border-radius: 24px; border-right: 1px solid #cddcec; margin-block: 0; padding-bottom: 46px; }
	.ksm-s-confronto__colonna--dopo { margin-left: 0; border-radius: 24px; padding-top: 52px; }
	.ksm-s-confronto__freccia { position: relative; left: auto; top: auto; translate: 0 0; rotate: 90deg; justify-self: center; margin: -30px 0 -30px; width: 52px; height: 52px; }
	/* senza freccia (alla pari) i due riquadri non lasciano lo spazio per lei */
	.ksm-s-confronto--pari .ksm-s-confronto__colonna--prima { padding-bottom: clamp(24px, 3vw, 46px); }
	.ksm-s-confronto--pari .ksm-s-confronto__colonna--dopo { padding-top: clamp(24px, 3vw, 46px); }
	.ksm-s-confronto:not(.ksm-s-confronto--pari) .ksm-s-confronto__colonna--prima { align-self: stretch; }
	/* i livelli: barre che crescono in larghezza */
	.ksm-s-livelli__scala { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	/* vB-15 (9/10/2026): sul telefono e sul tablet le schede dei livelli sono tutte larghe uguali (la scalinata di larghezze 215/265/330 px
	   sembrava un errore d'impaginazione); la scala resta nelle tacche. AC-16: il lavaggio chiaro a sinistra, sotto il nome, scende a .06
	   (con .13 il bianco del nome era a 6,94:1, ora sopra 7:1) */
	.ksm-s-livello { min-height: 0; width: 100%; border-radius: 14px 22px 22px 14px; border-top: 0; border-left: 8px solid var(--cap); padding: 20px 22px; }
	.ksm-s-livello::before { inset: 0 auto 0 0; width: 90px; height: auto; background: linear-gradient(90deg, rgba(255, 255, 255, .06), transparent); }
	.ksm-s-livello__sigla { font-size: 2.5rem; }
	/* il selettore */
	.ksm-s-selettore__voce[data-taglia="grande"] { grid-column: span 30; }
	.ksm-s-selettore__voce { grid-column: span 20; }
	.ksm-s-selettore__voce[data-taglia="piccolo"] { grid-column: span 30; }
	.ksm-s-selettore__voce[data-taglia="minimo"] { grid-column: 31 / -1; }
	.ksm-s-riferimenti__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.ksm-s { font-size: 1.0625rem; }
	.ksm-s :is(.ksm-bottone-lime, .ksm-bottone-vetro), .ksm-fascia__cta :is(.ksm-bottone-lime, .ksm-bottone-vetro) { white-space: normal; max-width: 100%; text-align: left; justify-content: space-between; }
	.ksm-s-vetro__lista, .ksm-s-schede__lista { --n: 1 !important; grid-template-columns: minmax(0, 1fr); }
	.ksm-s-vetro__decoro { display: none; }
	.ksm-s-vetro__scheda { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; padding: 20px 20px 22px; }
	.ksm-s-vetro__scheda .ksm-cerchio { grid-row: 1 / span 2; width: 54px; height: 54px; }
	.ksm-s-vetro__titolo { margin: 2px 0 0; }
	.ksm-s-vetro__vai { grid-column: 2; margin-top: 6px; }
	.ksm-s-scheda__icona { height: 72px; }
	.ksm-s-scheda__visual { aspect-ratio: 16 / 10; }
	/* il Journal sul telefono: schede compatte (titolo su tre righe, sintesi su due) */
	.ksm-s-schede[data-formato="ricerca"] .ksm-s-scheda__titolo { -webkit-line-clamp: 3; line-clamp: 3; }
	.ksm-s-schede[data-formato="ricerca"] .ksm-s-scheda__testo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
	.ksm-s-schede[data-formato="ricerca"] .ksm-s-scheda__corpo { padding: 16px 18px 18px; gap: 6px; }
	.ksm-s-passo__numero { margin-bottom: 8px; }
	.ksm-s-scheda .ksm-foto__quadro, .ksm-s-scheda .ksm-segnaposto { --ratio: 16 / 10; }
	.ksm-s-scheda__corpo { padding: 18px 20px 20px; gap: 8px; }
	.ksm-s-foto-banda { min-height: clamp(380px, 112vw, 520px); }
	.ksm-s-foto-banda__didascalia { margin-inline: 12px; margin-bottom: 14px; }
	.ksm-s-striscia__anello { opacity: .35; }
	.ksm-s-selettore__lista { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ksm-s-selettore__voce, .ksm-s-selettore__voce[data-taglia] { grid-column: auto; }
	.ksm-s-selettore__voce[data-taglia="grande"] a { flex-direction: row; align-items: center; min-height: 92px; padding: 18px 16px 18px 20px; gap: 14px; }
	.ksm-s-selettore__voce[data-taglia="grande"] .ksm-s-selettore__piede { width: auto; flex: 1; }
	.ksm-s-selettore__voce[data-taglia="minimo"] a { margin-left: auto; }
	.ksm-s-testo__testa::before { left: -12px; }
	.ksm-interna .ksm-fascia h1 { font-size: clamp(2.125rem, 10vw, 2.875rem); }
	.ksm-interna .ksm-fascia { padding-bottom: 120px; }
	.ksm-s-passo__scheda { padding: 18px; }
	.ksm-s-cornice__etichette { display: none; }
	.ksm-s-evidenza { font-size: 1.3125rem; }
	.ksm-s-confronto__elenco li { font-size: 1.03125rem; }
	.ksm-s-citazione { padding-top: 96px; }
	.ksm-s-citazione__segno { font-size: 6.5rem; left: 0; top: -62px; }
}

/* ------------------------------------------------------------------ 23. hover, movimento d'ambiente, movimento ridotto, pausa, alto contrasto, stampa */
/* hover: il sollevamento solo dove c'è un puntatore vero (sul telefono l'hover «appiccicoso» lascerebbe le schede alzate) */
@media (hover: hover) {
	:is(.ksm-s, .ksm-cornice-fascia) .ksm-bottone-lime:hover { transform: translateY(-3px); }
	.ksm-s-vetro__scheda:hover { transform: translateY(-9px); box-shadow: 0 34px 70px rgba(15, 58, 115, .28), inset 0 1px 0 #fff; border-color: #fff; }
	.ksm-s-passo:hover .ksm-s-passo__scheda { transform: translateY(-6px); border-color: rgba(215, 242, 74, .7); }
	.ksm-s-livello:hover { transform: translateY(-8px); box-shadow: 0 36px 70px rgba(8, 36, 84, .38); }
	.ksm-s-scheda:hover { transform: translateY(-12px); border-color: var(--s-blu1); box-shadow: 0 36px 72px rgba(15, 58, 115, .26); }
	.ksm-s-scheda:hover::before { transform: scaleX(1); }
	.ksm-s-scheda:hover .ksm-foto__quadro img { scale: 1.07; }
	.ksm-s-scheda:hover .ksm-s-scheda__vai .ksm-freccia { background: var(--s-lime); color: var(--s-ink); translate: 4px 0; }
	.ksm-s-selettore__voce a:hover { transform: translateY(-6px); border-color: var(--s-lime); box-shadow: 0 22px 44px rgba(3, 16, 40, .4), 0 0 0 1px rgba(215, 242, 74, .5); background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)); }
	.ksm-s-selettore__voce a:hover .ksm-freccia { background: var(--s-lime); color: var(--s-ink); translate: 3px 0; }
	/* l'estetista non si schiarisce (il contrasto non scende): si sottolinea soltanto */
	.ksm-s-selettore__voce[data-taglia="minimo"] a:hover { transform: none; box-shadow: none; background: transparent; border-color: #fff; text-decoration: underline; text-underline-offset: 3px; }
}
.ksm-s-scheda:focus-within { transform: translateY(-6px); }

/* il movimento d'ambiente: SOLO nei pannelli in vista (.ksm-in-vista, messa dallo script), SOLO con
   «ksm-anima» (movimento permesso). Le figure traslucide galleggiano UNA volta (±10 px, 5 s in tutto)
   quando il pannello entra in vista, poi stanno ferme: nessuna animazione infinita, niente che si muova
   da solo oltre 5 s (WCAG 2.2.2), quindi nessun pulsante «pausa» da cercare (C-04, 9/10/2026; prima
   era infinita, 10 e 14 s a giro). Parte e finisce nella posizione di riposo: nessuno scatto. */
@keyframes ksm-galleggia { 0%, 100% { transform: none; } 50% { transform: translate3d(0, -10px, 0) rotate(.5deg); } }
html.ksm-anima .ksm-in-vista :is(.ksm-s-cornice__visual, .ksm-s-cta__figura img, .ksm-fascia__visual) { animation: ksm-galleggia 5s ease-in-out 1; }
html.ksm-anima .ksm-in-vista .ksm-s-cornice__alone { animation: ksm-galleggia 4.4s ease-in-out .6s 1; }

/* movimento ridotto: niente comparse, niente animazioni, niente spostamenti (lo script non aggiunge «ksm-anima») */
@media (prefers-reduced-motion: reduce) {
	.ksm-rivela { transition: none; }
	.ksm-s *, .ksm-s *::before, .ksm-s *::after, .ksm-cornice-fascia *, .ksm-cornice-fascia *::before, .ksm-crinale i { animation: none !important; transition: none !important; }
	.ksm-s-vetro__scheda:hover, .ksm-s-scheda:hover, .ksm-s-scheda:focus-within, .ksm-s-livello:hover, .ksm-s-passo:hover .ksm-s-passo__scheda,
	.ksm-s-selettore__voce a:hover, :is(.ksm-s, .ksm-cornice-fascia) .ksm-bottone-lime:hover { transform: none; }
	.ksm-s-scheda:hover .ksm-foto__quadro img { scale: 1; }
	.ksm-s-passi__lista { --prog: 1 !important; }
}
/* (C-04, 9/10/2026: il pulsante globale «Pausa movimento» e le sue regole [data-ksm-fermo] non ci sono più:
   le animazioni sono finite, ≤ 5 s, e il resto del movimento è comandato dallo scorrimento) */

/* alto contrasto di Windows (forced-colors): i fondi diventano quelli di sistema, quindi ogni riquadro porta un filo
   e le decorazioni senza significato spariscono */
@media (forced-colors: active) {
	.ksm-s, .ksm-s-scheda, .ksm-s-vetro__scheda, .ksm-s-passo__scheda, .ksm-s-livello, .ksm-s-faq__voce, .ksm-s-selettore__voce a, .ksm-s-riferimento,
	.ksm-s-confronto__colonna, .ksm-foto, .ksm-segnaposto, .ksm-s-ai, .ksm-s-foto-banda__didascalia, .ksm-sottomenu, .ksm-fascia__breve { border: 1px solid CanvasText; }
	.ksm-bottone-lime, .ksm-bottone-vetro { border: 1px solid ButtonText; }
	.ksm-crinale, .ksm-s-vetro__alone, .ksm-s-vetro__decoro, .ksm-s-striscia__anello, .ksm-s-cornice__alone, .ksm-s-cta__figura::before, .ksm-s-citazione__segno, .ksm-fascia__media::before { display: none; }
	.ksm-s__titolo em, .ksm-punto, .ksm-s-passo__numero { forced-color-adjust: none; }
	.ksm-cerchio svg, .ksm-freccia svg { color: CanvasText; }
	/* il logo è bianco su trasparente: su un fondo di sistema chiaro sparirebbe, quindi gli si tiene sotto il suo blu */
	.ksm-marchio { forced-color-adjust: none; background: #0f3a73; padding: 6px 12px; border-radius: 12px; }
}
@media print {
	.ksm-rivela { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; }
	.ksm-sotto-bottone, .ksm-crinale { display: none !important; }
	.ksm-s { break-inside: avoid; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	/* AC-13 (9/10/2026): l'apertura (cornice blu con testata, logo bianco, titolo) perdeva lo sfondo e il testo bianco spariva: in stampa
	   tengono il loro blu (la proprietà si eredita: vale anche per la testata dentro l'impianto e per il piè); la navigazione, le lingue
	   e i pulsanti in stampa non servono */
	.ksm-cornice, .ksm-impianto, .ksm-piede { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.ksm-navigazione, .ksm-lingue, .ksm-lingue-scelta, .ksm-menu-scorri, .ksm-testata-destra, .ksm-fascia__cta, .ksm-s__cta, .ksm-pausa { display: none !important; }
	/* 1.11.0: sulla carta il sigillo non si clicca: quello della testata si toglie come la navigazione (e la testata riprende il suo spazio in alto) */
	.ksm-testata-sigillo { display: none !important; }
	.ksm-testata--con-sigillo { padding-top: clamp(18px, 2.2vw, 36px); }
}

/* ==========================================================================================
   24. AGGIUNTE DEL COSTRUTTORE PHP (plugin 1.7.0, 8/10/2026) — solo ciò che il contratto HTML di DESIGN §5
   non copriva e che il renderer emette: badge di stato, elenco nel testo, rinvii alle fonti, canali di
   contatto, scheletro (anteprima), pannelli di una ricerca, figura stretta della chiusura, ancore.
   Stessi token e stesse regole del resto del foglio: lime mai come testo su chiaro, testo ≥ 7:1.
   Documentate in fondo a DESIGN.md, «Correzioni del costruttore».
   ========================================================================================== */

/* il salto a un'ancora scorre piano (tranne con «riduci movimento» o con la pausa) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.ksm-ancora { display: block; width: 0; height: 0; overflow: hidden; }

/* il badge dello stato vero di un servizio: pastiglia chiara con inchiostro (≥ 12:1 su ogni pannello, anche sul blu notte);
   lo stato lo dice il PUNTINO (pieno lime · pieno blu · cerchio vuoto · cerchio tratteggiato), mai solo il colore del testo */
.ksm-s__stato { margin: 0; }
.ksm-s-stato {
	display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px;
	font-size: .78125rem; font-weight: 700; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase;
	color: var(--s-ink); background: #eef4fa; border: 1px solid #b8cde3;
}
.ksm-s-stato::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.ksm-s-stato--attivo::before { background: var(--s-lime); border: 2px solid var(--s-ink); }
.ksm-s-stato--prova::before { background: var(--s-blu3); }
.ksm-s-stato--in-preparazione::before { border: 2px solid var(--s-blu3); background: transparent; }
.ksm-s-stato--in-arrivo::before { border: 2px dashed var(--s-blu3); background: transparent; }
.ksm-s-passo__scheda .ksm-s__stato, .ksm-s-livello .ksm-s__stato { margin-top: 12px; }
/* VA-15, vB-19 (9/10/2026): nei passi il badge sta in fondo alla scheda (tutti alla stessa quota); nel confronto su una riga sua, non in coda
   al testo dove andava a capo a caso */
.ksm-s-passo__scheda { display: flex; flex-direction: column; }
.ksm-s-passo__scheda > .ksm-s__stato { margin-top: auto; padding-top: 12px; }
.ksm-s-confronto__elenco .ksm-s-stato { display: flex; width: fit-content; margin: 8px 0 0; }
.ksm-s__intro .ksm-s__stato { margin: -.2em 0 clamp(14px, 1.6vw, 22px); }

/* un elenco dentro il testo breve e il sottotitolo di un articolo */
.ksm-s__elenco { list-style: none; margin: 1.1em 0 0; padding: 0; display: grid; gap: 10px; max-width: 40rem; }
.ksm-s__elenco li { position: relative; padding-left: 28px; color: var(--t-fg2); line-height: 1.55; }
.ksm-s__elenco li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--s-blu3); box-shadow: 0 0 0 4px rgba(20, 72, 137, .14); }
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s__elenco li::before { background: var(--s-lime); box-shadow: 0 0 0 4px rgba(215, 242, 74, .2); }
/* senza titolo (i pannelli dell'articolo di una ricerca): una colonna sola, larga. Con «.ksm-s-testo.» davanti la regola pesa quanto «.ksm-s-testo:not(.ksm-s-testo--con-foto) …» di sopra e, venendo dopo, vince: scritta senza, il testo restava nella prima delle due colonne (482 px su 1240) */
.ksm-s-testo.ksm-s-testo--solo-corpo .ksm-s-testo__colonna { grid-template-columns: minmax(0, 1fr); }
.ksm-s-testo--solo-corpo .ksm-s__testo, .ksm-s-testo--solo-corpo .ksm-s__testo--articolo { max-width: 46rem; }
.ksm-s__sottotitolo {
	margin: 1.5em 0 .45em; font-family: "KSM Playfair", Georgia, "Times New Roman", serif; font-weight: 700;
	font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; color: var(--t-titolo); text-wrap: balance;
}
.ksm-s__testo--articolo > :first-child { margin-top: 0; }
.ksm-s__testo--articolo .ksm-s-evidenza { margin-top: 1.4em; max-width: 40rem; }
.ksm-s__fonte { font-size: .96875rem; color: var(--t-fg2); border-left: 4px solid var(--s-blu3); padding-left: 14px; }

/* i rinvii «[1]» alle fonti in fondo */
.ksm-s__rinvio { line-height: 0; }
.ksm-s__rinvio a { font-size: .78em; font-weight: 800; text-decoration: none; color: var(--t-link); padding: 0 .12em; border-radius: 4px; }
.ksm-s__rinvio a:hover { text-decoration: underline; }
.ksm-s-link {
	display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--t-link);
	text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.ksm-s-link .ksm-freccia { width: 30px; height: 30px; }
.ksm-s-link .ksm-freccia svg { width: 15px; height: 15px; }
.ksm-s-riferimento__certezza { font-weight: 700; }
/* un titolo con un indirizzo lungo (le fonti delle ricerche lo portano intero) va a capo ovunque serva: a 390 px sporgeva dal pannello e veniva tagliato */
.ksm-s-riferimento > div { min-width: 0; }
.ksm-s-riferimento__titolo, .ksm-s-riferimento__ente { overflow-wrap: anywhere; }
.ksm-s-riferimento:target { background: color-mix(in srgb, var(--s-lime) 30%, transparent); border-radius: 12px; }

/* confronto: la riga ha un titolo (in grassetto) e un testo; sotto, una nota. Il collegamento del titolo segue il colore della colonna (la «dopo» è blu scuro: il colore di sistema dei link, inchiostro, vi sarebbe invisibile) */
.ksm-s-confronto__colonna--dopo a:not([class]) { color: #fff; }
.ksm-s-confronto__colonna--prima a:not([class]) { color: var(--s-blu4); }
.ksm-s-confronto__voce { display: block; font-weight: 800; }
.ksm-s-confronto__voce a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ksm-s-confronto__nota { margin: clamp(22px, 2.6vw, 36px) 0 0; max-width: 46rem; font-size: 1.0625rem; color: var(--t-fg2); }
/* sul telefono le due colonne si impilano e la nota finisce sotto l'ombra lunga della colonna scura (34 px di scarto + 80 di sfocatura): a 22 px il fondo era a 6,5:1. Lì l'ombra si accorcia (18 + 36) e la nota scende oltre */
@media (max-width: 899px) {
	.ksm-s-confronto__colonna--dopo { box-shadow: 0 18px 36px rgba(8, 36, 84, .32), inset 0 0 0 1px rgba(255, 255, 255, .3); }
	.ksm-s-confronto__nota { margin-top: 64px; }
}

/* livelli: la sigla senza numeri è una scala di tacche che sale; il limite è detto sotto, per primo (onestà) */
.ksm-s-livello__tacche { display: block; width: 1em; height: 1em; }
.ksm-s-livello__limite { margin: 4px 0 0; font-size: .9375rem; line-height: 1.5; color: #fff; border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 8px; }
.ksm-s-livello__limite strong { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; margin-right: 4px; }

/* la foto-banda: un pulsante dentro la didascalia di vetro */
.ksm-s-foto-banda__didascalia .ksm-s__cta { margin-top: 16px; }

/* la scheda di una persona (Chi siamo): il ritratto è alto */
.ksm-s-scheda--persona .ksm-foto__quadro { --ratio: 4 / 5; }
.ksm-s-scheda__etichetta + .ksm-s__stato { margin-top: -2px; } /* (il badge delle schede sta ora in fondo: §14) */

/* i canali di contatto: riquadri di vetro con icona, come le schede del vetro */
.ksm-s-contatti__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.ksm-s-contatto {
	display: flex; align-items: center; gap: 18px; padding: clamp(20px, 2vw, 30px); border-radius: 24px; color: var(--s-ink);
	background: linear-gradient(160deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .50)); border: 1px solid rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(15, 58, 115, .16), inset 0 1px 0 #fff;
}
.ksm-s-contatto__testo { display: grid; gap: 4px; min-width: 0; }
.ksm-s-contatto__etichetta { font-size: .78125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ink); }
.ksm-s-contatto__valore { font-family: "KSM Playfair", Georgia, serif; font-weight: 700; font-size: clamp(1.1875rem, 1.7vw, 1.5rem); line-height: 1.3; color: var(--s-ink); overflow-wrap: anywhere; }
a.ksm-s-contatto__valore { text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-s-contatto { color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .32); box-shadow: none; }
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) :is(.ksm-s-contatto__etichetta, .ksm-s-contatto__valore) { color: #fff; }
/* VA-09 (G5, 9/10/2026): «Come raggiungerci» con un solo canale era una carta larga 1240 px con una riga e il vuoto a destra.
   Dai 900 px il titolo sta a sinistra e i canali a destra (la stessa griglia della FAQ); un canale solo resta largo una carta.
   Quando arrivano telefono e sede (dati del committente), i canali tornano a riempire la colonna. */
.ksm-s-contatti__lista:has(> .ksm-s-contatto:only-child) { grid-template-columns: minmax(0, 520px); }
@media (min-width: 900px) {
	.ksm-s-contatti .ksm-s__dentro { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4.4vw, 72px); align-items: center; }
	.ksm-s-contatti .ksm-s__intro { margin: 0; max-width: none; }
}

/* lo scheletro (SOLO anteprima dell'amministratore): la forma del pannello, nessuna parola */
.ksm-s-scheletro { min-height: clamp(160px, 22vw, 280px); box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--t-fg) 28%, transparent); outline-offset: -10px; }
.ksm-s-scheletro .ksm-s__dentro { padding-block: clamp(10px, 2vw, 24px); }
.ksm-s-scheletro__barre i { display: block; height: 18px; margin: 14px 0; border-radius: 10px; background: var(--t-fg); opacity: .13; }
.ksm-s-scheletro__barre i:nth-child(1) { width: 38%; height: 30px; } .ksm-s-scheletro__barre i:nth-child(2) { width: 82%; } .ksm-s-scheletro__barre i:nth-child(3) { width: 64%; }
/* VC-18 (9/10/2026): lo scheletro dice QUALE parte manca (solo l'amministratore lo vede) */
.ksm-s-scheletro__nome { display: inline-block; margin: 0 0 4px; padding: 6px 14px; border-radius: 999px; font-size: .875rem; font-weight: 700; line-height: 1.4; color: var(--t-fg); border: 1.5px dashed currentColor; }

/* i visual dentro una striscia o una chiusura */
.ksm-s-striscia__visual { display: block; width: min(100%, 440px); height: auto; margin: 0 auto; translate: 0 calc(var(--p, 0) * -18px); }
.ksm-s-cta__figura img.ksm-visual--figura {
	display: block; width: auto; max-width: 100%; height: clamp(300px, 34vw, 452px); margin: 0 auto; /* VA-16: 452 px è la sua altezza vera: mai ingrandita */
	/* la figura del Gemello è un ritaglio con un alone rettangolare: si sfuma ai bordi come i visual */
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}

@media (forced-colors: active) {
	.ksm-s-stato, .ksm-s-contatto { border: 1px solid CanvasText; }
	.ksm-s-livello__tacche { forced-color-adjust: none; }
}
@media (max-width: 899px) {
	.ksm-s-cta__figura img.ksm-visual--figura { height: clamp(240px, 56vw, 340px); }
}

/* ------------------------------------------------------------------ 25. REVISIONE (8/10/2026, revisore del renderer) */
/* Più di cinque passi (il contratto ne prevede da 3 a 5): in colonne da 1/6…1/8 i titoli si spezzavano a metà parola e i numeri andavano a capo.
   La linea del tempo diventa verticale — le stesse regole del telefono — a ogni larghezza. */
.ksm-s-passi--lungo .ksm-s-passi__lista { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-left: 40px; max-width: 780px; }
.ksm-s-passi--lungo .ksm-s-passi__lista::before, .ksm-s-passi--lungo .ksm-s-passi__lista::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
.ksm-s-passi--lungo .ksm-s-passi__lista::after { transform-origin: 50% 0; transform: scaleY(var(--prog)); background: linear-gradient(180deg, var(--s-lime), #fff); }
.ksm-s-passi--lungo .ksm-s-passo { padding-top: 0; }
.ksm-s-passi--lungo .ksm-s-passo .ksm-punto { left: -40px; top: 8px; }
.ksm-s-passi--lungo .ksm-s-passo__numero { font-size: clamp(3.375rem, 15vw, 5rem); margin-bottom: 8px; }

/* ------------------------------------------------------------------ 26. CERCA (9/10/2026, G-1: la pagina Search, schede del Grafo, un tipo alla volta) */
/* Le schede dei tipi sono collegamenti (una scelta = una pagina, funziona senza JavaScript), a pillola come il selettore «Che cosa fai?»:
   la scelta è piena (notte su chiaro, 12:1), le altre a contorno. L'estetica è l'ultima, più piccola e staccata a destra (DEC-03), con
   l'inchiostro pieno (contrasto AAA invariato). Ogni bersaglio è alto almeno 44 px. Il campo e il pulsante esistono SOLO dentro il tipo scelto. */
.ksm-s-cerca__tipi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ksm-s-cerca .ksm-s-cerca__tipo a {
	display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; border-radius: 999px;
	font-size: 1.0625rem; font-weight: 600; line-height: 1.25; text-decoration: none; color: var(--s-ink);
	background: rgba(255, 255, 255, .78); border: 1.5px solid rgba(13, 39, 72, .30); box-shadow: 0 6px 18px rgba(8, 36, 84, .08);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ksm-s-cerca .ksm-s-cerca__tipo a[aria-current="page"] { background: var(--s-notte); border-color: var(--s-notte); color: #fff; box-shadow: 0 10px 26px rgba(8, 36, 84, .28), inset 0 -3px 0 var(--s-lime); }
.ksm-s-cerca .ksm-s-cerca__tipo[data-discreto] { margin-left: auto; }
.ksm-s-cerca .ksm-s-cerca__tipo[data-discreto] a { min-height: 44px; padding: 8px 16px; font-size: .875rem; font-weight: 500; background: transparent; box-shadow: none; border-width: 1px; }
.ksm-s-cerca .ksm-s-cerca__tipo[data-discreto] a[aria-current="page"] { background: var(--s-notte); color: #fff; }
.ksm-s .ksm-s-cerca__tipo a:focus-visible { border-radius: 999px; }
.ksm-s-cerca__scegli { margin: clamp(22px, 2.6vw, 34px) 0 0; max-width: 46rem; color: var(--t-fg2); }
.ksm-s-cerca__pannello {
	margin-top: clamp(24px, 3vw, 40px); padding: clamp(22px, 2.8vw, 40px); border-radius: 24px;
	background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 44px rgba(8, 36, 84, .14);
}
.ksm-s .ksm-s-cerca__nome { margin: 0 0 18px; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.2; font-weight: 800; color: var(--s-ink); }
.ksm-s-cerca__etichetta { display: block; margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: var(--s-ink); }
.ksm-s-cerca__riga { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.ksm-s-cerca__campo {
	flex: 1 1 18rem; min-width: 0; min-height: 54px; padding: 12px 22px; border-radius: 999px; font: inherit; font-size: 1.0625rem;
	color: var(--s-ink); background: #fff; border: 2px solid var(--s-ink2); -webkit-appearance: none; appearance: none;
}
.ksm-s-cerca__campo::-webkit-search-cancel-button { cursor: pointer; }
.ksm-s .ksm-s-cerca__campo:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; border-color: var(--s-ink); }
.ksm-s-cerca__invia {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px 0 20px; border-radius: 999px;
	font: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer; color: var(--s-ink); background: var(--s-lime); border: 2px solid var(--s-ink);
}
.ksm-s-cerca__lente { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.ksm-s-cerca__lente svg { width: 20px; height: 20px; }
.ksm-s .ksm-s-cerca__invia:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; border-radius: 999px; }
.ksm-s-cerca__esito { margin-top: 20px; }
.ksm-s-cerca__stato { margin: 0; max-width: 46rem; padding-left: 16px; border-left: 3px solid var(--s-lime); color: var(--s-ink-testo); }
.ksm-s-cerca__risultati { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ksm-s-cerca__scheda { padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--s-filo); }
.ksm-s-cerca .ksm-s-cerca__scheda a { font-weight: 700; color: var(--s-notte); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ksm-s-cerca__scheda p { margin: 6px 0 0; font-size: 1rem; color: var(--s-ink2); }
@media (min-width: 900px) { .ksm-s-cerca__risultati { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: hover) {
	.ksm-s-cerca .ksm-s-cerca__tipo a:not([aria-current="page"]):hover { background: #fff; border-color: var(--s-blu3); }
	.ksm-s-cerca .ksm-s-cerca__tipo[data-discreto] a:not([aria-current="page"]):hover { background: transparent; border-color: var(--s-ink); text-decoration: underline; text-underline-offset: 3px; }
	.ksm-s-cerca__invia:hover { background: #cbe63c; }
}
@media (max-width: 640px) {
	.ksm-s-cerca__tipi ul { gap: 10px; }
	.ksm-s-cerca .ksm-s-cerca__tipo a { padding: 10px 18px; font-size: 1rem; }
	.ksm-s-cerca .ksm-s-cerca__tipo[data-discreto] { margin-left: 0; flex-basis: 100%; display: flex; justify-content: flex-end; }
	.ksm-s-cerca__invia { flex: 1 1 100%; }
}
@media (forced-colors: active) {
	.ksm-s-cerca .ksm-s-cerca__tipo a, .ksm-s-cerca__campo, .ksm-s-cerca__invia { border: 1px solid CanvasText; }
	.ksm-s-cerca .ksm-s-cerca__tipo a[aria-current="page"] { border-width: 3px; }
}
@media print { .ksm-s-cerca__modulo { display: none; } }

/* ------------------------------------------------------------------ 27. MODULO CONTATTO (10/10/2026, 1.8.0: il modulo di Contatti verso Odoo) */
/* La stessa scheda bianca del pannello di Search, su un fondo chiaro. Contrasti misurati (WCAG 2.2 AAA, ≥ 7:1): inchiostro su bianco 15:1,
   testo secondario 9,1:1, errore #8f1a1a su bianco 9,0:1 e sul suo lavaggio 8,2:1, inchiostro sul lime 11,9:1. L'errore non è solo un colore
   (1.4.1): il suo testo sta sopra il campo, il campo prende un bordo più spesso, e il riepilogo in cima li elenca coi collegamenti.
   Ogni bersaglio è alto almeno 44 px; le caselle 24 px con l'etichetta cliccabile accanto. */
.ksm-s-modulo__pannello {
	margin-top: clamp(24px, 3vw, 40px); padding: clamp(22px, 2.8vw, 44px); border-radius: 24px; max-width: 52rem;
	background: #fff; border: 1px solid var(--s-filo); box-shadow: 0 18px 44px rgba(8, 36, 84, .14); color: var(--s-ink);
}
.ksm-s-modulo__modulo { display: grid; gap: 22px; }
.ksm-s-modulo__campo { display: grid; gap: 8px; }
.ksm-s-modulo__etichetta { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--s-ink); }
.ksm-s-modulo__facoltativo { font-weight: 500; color: var(--s-ink2); }
.ksm-s-modulo__aiuto { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--s-ink2); }
.ksm-s-modulo__riga, .ksm-s-modulo__testo {
	width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 18px; border-radius: 14px; font: inherit; font-size: 1.0625rem; line-height: 1.5;
	color: var(--s-ink); background: #fff; border: 2px solid var(--s-ink2); -webkit-appearance: none; appearance: none;
}
.ksm-s-modulo__testo { min-height: 11rem; resize: vertical; }
.ksm-s .ksm-s-modulo__riga:focus-visible, .ksm-s .ksm-s-modulo__testo:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; border-color: var(--s-ink); }
.ksm-s-modulo__campo--errore .ksm-s-modulo__riga, .ksm-s-modulo__campo--errore .ksm-s-modulo__testo { border-color: #8f1a1a; border-width: 3px; }
.ksm-s-modulo__errore { margin: 0; padding-left: 12px; border-left: 4px solid #8f1a1a; font-size: 1rem; font-weight: 600; line-height: 1.45; color: #8f1a1a; }
.ksm-s-modulo__informativa { padding: 16px 18px; border-radius: 14px; background: #f3f7fc; border: 1px solid var(--s-filo); }
.ksm-s-modulo__informativa p { margin: 0 0 .6em; font-size: 1rem; line-height: 1.55; color: var(--s-ink); }
.ksm-s-modulo__informativa p:last-child { margin-bottom: 0; }
.ksm-s-modulo__scelta { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: start; }
.ksm-s-modulo__scelta .ksm-s-modulo__errore { grid-column: 1 / -1; }
.ksm-s-modulo__scelta input[type="checkbox"] { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--s-notte); cursor: pointer; }
.ksm-s-modulo__scelta label { min-height: 28px; font-size: 1.0625rem; line-height: 1.45; color: var(--s-ink); cursor: pointer; }
.ksm-s .ksm-s-modulo__scelta input[type="checkbox"]:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; }
.ksm-s-modulo__riga-invia { margin: 4px 0 0; }
.ksm-s-modulo__invia {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px;
	font: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer; color: var(--s-ink); background: var(--s-lime); border: 2px solid var(--s-ink);
}
.ksm-s .ksm-s-modulo__invia:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; }
.ksm-s-modulo__avviso { margin: 0 0 24px; padding: 16px 20px; border-radius: 14px; background: #fdf1f1; border: 2px solid #8f1a1a; color: var(--s-ink); }
.ksm-s-modulo__avviso p { margin: 0; font-weight: 700; line-height: 1.45; }
.ksm-s-modulo__avviso ul { margin: 10px 0 0; padding-left: 1.2em; }
.ksm-s-modulo__avviso a { color: #7a1515; font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ksm-s-modulo__grazie { border-left: 6px solid var(--s-lime); }
.ksm-s .ksm-s-modulo__grazie-titolo { margin: 0 0 10px; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.2; font-weight: 800; color: var(--s-ink); }
.ksm-s-modulo__grazie p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--s-ink); }
/* L'esca: fuori dallo schermo (non display:none, che alcuni programmi riconoscono e saltano). aria-hidden e tabindex -1 nel markup. */
.ksm-s-modulo__esca { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (forced-colors: active) {
	.ksm-s-modulo__riga, .ksm-s-modulo__testo, .ksm-s-modulo__invia, .ksm-s-modulo__avviso { border: 2px solid CanvasText; }
	.ksm-s-modulo__errore { border-left-color: CanvasText; }
}
@media print { .ksm-s-modulo__modulo { display: none; } }

/* ------------------------------------------------------------------ 28. LA BETA CANDIDATE (18/10/2026, 1.9.0): foto verticali, galleria, «Disponibile a breve»
   Le foto del committente sono VERTICALI, 2:3 (1024 × 1536), e non si ritagliano in 3:2 (si perderebbe più di metà dell'altezza, e con lei
   le teste). Sul computer la foto sta accanto al testo in una colonna di circa un terzo, alternata a sinistra e a destra (data-lato); la 1
   accanto all'apertura. Sul telefono va SOPRA il testo, a tutta larghezza, in 4:5 con object-fit: cover e il fuoco al 50% 30% (le teste
   stanno in alto): il fuoco lo porta la foto (--fx, --fy), la proporzione il data-proporzione-m. */
.ksm-foto[data-proporzione="2:3"], .ksm-segnaposto[data-proporzione="2:3"] { --ratio: 2 / 3; }
.ksm-interna .ksm-fascia--verticale { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; }
.ksm-interna .ksm-fascia--verticale .ksm-fascia__media { width: 100%; max-width: 380px; justify-self: end; }
.ksm-s-testo--verticale.ksm-s-testo--con-foto .ksm-s-testo__griglia { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.ksm-s-testo--verticale.ksm-s-testo--con-foto[data-lato="sinistra"] .ksm-s-testo__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ksm-s-testo--verticale .ksm-s-testo__media { max-width: 380px; width: 100%; justify-self: center; }
.ksm-s-testo--verticale .ksm-s__testo { max-width: 46rem; }
/* la galleria: le foto che avanzano, in fila prima del pulsante */
.ksm-s-galleria__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 36px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 320px)); justify-content: center; }
.ksm-s-galleria__voce { margin: 0; }
.ksm-s-galleria .ksm-s__cta { justify-content: center; }
/* la scritta «Illustrazione generata con Ai» SOTTO la foto (DEC-14), non sopra come sulle foto orizzontali: nelle foto verticali i volti
   stanno in alto, e la scritta in un angolo li coprirebbe */
:is(.ksm-s-galleria, .ksm-s-testo--verticale, .ksm-fascia--verticale) .ksm-foto .ksm-s-ai { position: static; margin: 10px 0 0; }
:is(.ksm-s-galleria, .ksm-s-testo--verticale) .ksm-foto { display: flex; flex-direction: column; align-items: flex-start; }
/* il quadro prende tutta la larghezza della foto: con il parallasse l'immagine è assoluta e non dà larghezza al quadro, che con
   «flex-start» si stringerebbe a zero (trovato dalla misura del telefono sul segnaposto di «Cliniche aderenti», 18/10/2026) */
:is(.ksm-s-galleria, .ksm-s-testo--verticale) .ksm-foto .ksm-foto__quadro { align-self: stretch; }
/* «Disponibile a breve»: un servizio che si comprerà in Odoo ma il cui indirizzo non c'è ancora (D15). Non è un collegamento e non sembra
   premibile: bordo tratteggiato, niente freccia, niente ombra; il testo ha il contrasto pieno del testo della sezione (≥ 7:1). */
.ksm-bottone-in-arrivo {
	display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; cursor: default;
	padding: 12px clamp(22px, 2vw, 34px); font-size: clamp(16px, 1.2vw, 19px); font-weight: 500;
	color: var(--t-fg, #0d2748); background: transparent; border: 2px dashed currentColor;
}
.ksm-s:is([data-sfondo="notte"], [data-sfondo="blu"]) .ksm-bottone-in-arrivo, .ksm-interna .ksm-fascia .ksm-bottone-in-arrivo { color: #fff; }
@media (max-width: 899px) {
	.ksm-foto[data-proporzione-m="4:5"], .ksm-segnaposto[data-proporzione-m="4:5"] { --ratio: 4 / 5; }
	.ksm-interna .ksm-fascia--verticale, .ksm-s-testo--verticale.ksm-s-testo--con-foto .ksm-s-testo__griglia,
	.ksm-s-testo--verticale.ksm-s-testo--con-foto[data-lato="sinistra"] .ksm-s-testo__griglia { grid-template-columns: minmax(0, 1fr); }
	.ksm-interna .ksm-fascia--verticale .ksm-fascia__media { order: -1; max-width: none; justify-self: stretch; }
	.ksm-s-testo--verticale .ksm-s-testo__media { order: -1 !important; max-width: none; }
	.ksm-s-galleria__lista { grid-template-columns: minmax(0, 1fr); }
	.ksm-s-galleria .ksm-foto img, .ksm-s-testo--verticale .ksm-foto img, .ksm-fascia--verticale .ksm-foto img { object-position: 50% 30%; }
	.ksm-bottone-in-arrivo { white-space: normal; }
}

/* ------------------------------------------------------------------ 1.12.0 (23/10/2026): le carte con le voci, e le schede degli studi */
/* le voci di una carta (il CV: le esperienze, la formazione, le lingue): un elenco breve sotto il testo, coi punti della marca */
.ksm-s-scheda__voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ksm-s-scheda__voci li { position: relative; padding-left: 22px; font-size: 1.03125rem; line-height: 1.55; color: var(--s-ink2); }
.ksm-s-scheda__voci li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--s-blu3); }
/* la scheda di uno studio: rivista e autori sotto il titolo, la nota in un riquadro, disegno e partecipanti e la fonte in fondo */
.ksm-s-schede[data-formato="studio"] .ksm-s-scheda__titolo { font-size: clamp(1.1875rem, 1.5vw, 1.375rem); }
.ksm-s-scheda__rivista { margin: 0; font-size: .96875rem; font-weight: 600; line-height: 1.45; color: var(--s-blu3); }
.ksm-s-scheda__applicazione { padding-left: 14px; border-left: 3px solid var(--s-blu1); }
.ksm-s-scheda__nota { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--s-neutro); font-size: .96875rem; line-height: 1.55; color: var(--s-ink); }
.ksm-s-scheda__disegno { margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--s-filo); font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--s-ink2); }
.ksm-s-scheda__fonte { margin: 0; }
.ksm-s .ksm-s-scheda__fonte a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 1rem; color: var(--s-blu3);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.ksm-s .ksm-s-scheda__fonte a:hover { color: var(--s-blu4); text-decoration-thickness: 2px; }
.ksm-s .ksm-s-scheda__fonte a:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 3px; border-radius: 4px; }
.ksm-s-scheda__fonte svg { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------------ 25. le pagine legali (1.13.0, 23/10/2026: D19-MOD, IUB-1)
   Il testo delle politiche di iubenda (privacy, cookie, termini), preso dal server e pulito (legali/ksm-legali.php): solo titoli, paragrafi,
   elenchi, tabelle e collegamenti, senza classi. Una colonna di lettura (al più 70 caratteri larghi: WCAG 1.4.8), inchiostro su chiaro
   (≥ 11:1), titoli più piccoli di quelli delle sezioni (qui sono tanti e di fila: quelli da 58 px sarebbero un muro), collegamenti
   sottolineati, gli indirizzi lunghi che vanno a capo (nessuno scorrimento di lato a 390 px). */
.ksm-s-legale .ksm-s__dentro { max-width: 46rem; }
.ksm-s-legale__documento { font-size: 1.0625rem; line-height: 1.65; color: var(--t-fg); overflow-wrap: break-word; }
.ksm-s-legale__documento :is(h2, h3, h4, h5, h6) {
	font-family: "KSM Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; letter-spacing: 0;
	line-height: 1.3; color: var(--t-titolo); margin: 1.9em 0 .55em; text-wrap: balance;
}
.ksm-s-legale__documento h2 {
	font-family: "KSM Playfair", Georgia, "Times New Roman", serif; font-weight: 700;
	font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.15; margin-top: 0;
}
.ksm-s-legale__documento h3 { font-size: clamp(1.3125rem, 1.8vw, 1.5625rem); }
.ksm-s-legale__documento h4 { font-size: 1.1875rem; }
.ksm-s-legale__documento :is(h5, h6) { font-size: 1.0625rem; }
.ksm-s-legale__documento p { margin: 0 0 1em; color: var(--t-fg); }
.ksm-s-legale__documento :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.4em; }
.ksm-s-legale__documento ul { list-style: disc; }
.ksm-s-legale__documento li { margin: 0 0 .45em; }
.ksm-s-legale__documento li::marker { color: var(--s-blu3); }
.ksm-s-legale__documento a { color: var(--t-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.ksm-s-legale__documento a:hover { text-decoration-thickness: 3px; }
.ksm-s-legale__documento hr { border: 0; border-top: 2px solid var(--t-filo); margin: 2em 0; }
.ksm-s-legale__documento :is(span, strong, b) { overflow-wrap: anywhere; }
.ksm-s-legale__documento table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; display: block; overflow-x: auto; }
.ksm-s-legale__documento :is(th, td) { border: 1px solid var(--t-filo); padding: .5em .7em; text-align: left; vertical-align: top; }
/* il riquadro d'indice di iubenda («Sommario»): un filo a sinistra, per vederlo come indice */
.ksm-s-legale__documento #iub-table-of-content-wrapper { border-left: 4px solid var(--s-blu3); padding-left: 18px; margin: 1.6em 0 2em; }
.ksm-s-legale__documento #iub-table-of-content-wrapper :is(h3, h4) { margin-top: 0; }
/* la nota «copia del …» e la riserva (senza testo: il collegamento a iubenda) */
.ksm-s-legale__nota, .ksm-s-legale__riserva {
	margin: 0 0 1.6em; padding: 16px 20px; border-radius: 14px; background: #fff; border: 2px solid var(--s-blu3); color: var(--t-fg);
}
.ksm-s-legale__riserva p { margin: 0 0 .8em; }
.ksm-s-legale__riserva p:last-child { margin-bottom: 0; }
.ksm-s-legale__nota a, .ksm-s-legale__riserva a {
	display: inline-flex; align-items: center; min-height: 44px; color: var(--s-notte); font-weight: 700;
	text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; overflow-wrap: anywhere;
}
@media (forced-colors: active) {
	.ksm-s-legale__nota, .ksm-s-legale__riserva { border-color: CanvasText; }
	.ksm-s-legale__documento #iub-table-of-content-wrapper { border-left-color: CanvasText; }
}

/* I pulsanti fissi del widget di iubenda (1.13.0, IUB-1): accessibilità in basso a sinistra, preferenze sui cookie in basso a destra,
   intorno ai 40 px a 16 px dal bordo, sopra la pagina. Misurati in prova (prova_legali_browser.py): coprivano in parte l'elemento col
   fuoco quando il Tab scende (WCAG 2.4.12, AAA) e, in fondo alla pagina al telefono, gli ultimi collegamenti del piè.
   scroll-padding-bottom fa fermare al browser l'elemento col fuoco sopra la loro fascia; il piè finisce più in alto della fascia.
   Solo se il widget è nella pagina (la costante vuota lo toglie, e con lui queste due regole). */
html:has(script[src^="https://embeds.iubenda.com/widgets/"]) { scroll-padding-bottom: 72px; }
html:has(script[src^="https://embeds.iubenda.com/widgets/"]) .ksm-piede { padding-bottom: 88px; }