/* La home del nuovo kliniksanktmoritz.ch — dal mockup del committente (2/10/2026).
   Caratteri ospitati da noi (niente Google Fonts: i dati dei visitatori non escono). */
@font-face { font-family: "KSM Manrope"; src: url("font/manrope-variabile.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "KSM Playfair"; src: url("font/playfair-display-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* MOV-08 (giro di correzioni del 9/10) — la riserva della TESTATA mentre KSM Manrope arriva. Lo script della testata
   decide «una riga o due» appena la testata è nella pagina, quando Manrope di solito non c'è ancora: misurava col
   carattere di sistema (su Linux DejaVu Sans, l'8 % più largo), diceva «due righe», e all'arrivo di Manrope la testata
   tornava su una e TUTTA l'apertura saliva di 55 px (CLS 0,18–0,20 in it a 1366/1440 e in en a 1280). Qui un carattere
   locale della famiglia di Arial (Arial, Helvetica, Liberation Sans, Arimo: stesse larghezze fra loro) portato alle
   misure di Manrope: largo il 102,5 % (misurato sulle etichette en e it del menu e del pulsante: scarto ≤ 2 px a riga),
   stessa salita e discesa (Manrope: 2132 e 600 su 2000; i valori qui sono divisi per size-adjust). Così la prima
   misura dà già il risultato di Manrope e la testata non salta. Nessun file scaricato (solo local()); a carattere
   arrivato non cambia nulla. */
@font-face { font-family: "KSM Manrope riserva"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"); size-adjust: 102.5%; ascent-override: 104%; descent-override: 29.3%; line-gap-override: 0%; }

:root {
	--ksm-cielo-1: #9cc8f2;
	--ksm-cielo-2: #5b97de;
	--ksm-blu-1: #3a86d6;
	--ksm-blu-2: #1f5fb0;
	--ksm-blu-3: #144889;
	--ksm-blu-4: #0f3a73;
	--ksm-lime: #d7f24a;
	--ksm-inchiostro: #0d2748;
	--ksm-vetro: rgba(255, 255, 255, .1);
	--ksm-vetro-forte: rgba(255, 255, 255, .16);
	--ksm-filo: rgba(255, 255, 255, .32);
	--ksm-testo-tenue: rgba(255, 255, 255, .82);
	--ksm-margine: clamp(20px, 3.4vw, 56px);
}

body.ksm-home {
	margin: 0;
	font-family: "KSM Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	background: linear-gradient(180deg, var(--ksm-cielo-1), var(--ksm-cielo-2) 60%, #7fb2ea);
	color: #fff;
	-webkit-font-smoothing: antialiased;
}
.ksm-home *, .ksm-home *::before, .ksm-home *::after { box-sizing: border-box; }
.ksm-home a { color: inherit; }
.ksm-home :focus-visible { outline: 3px solid var(--ksm-lime); outline-offset: 3px; border-radius: 6px; }
.ksm-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ksm-salta { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--ksm-lime); color: var(--ksm-inchiostro); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.ksm-salta:focus { left: 16px; }

.ksm-pagina { padding: clamp(10px, 1.6vw, 26px); overflow-x: clip; }
.ksm-cornice {
	position: relative;
	max-width: 1640px;
	margin: 0 auto;
	border-radius: clamp(18px, 2vw, 30px);
	border: 1px solid rgba(255, 255, 255, .5);
	box-shadow: 0 30px 80px rgba(8, 36, 84, .35), inset 0 0 0 6px rgba(255, 255, 255, .06);
	background:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 84px 84px,
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 84px 84px,
		radial-gradient(ellipse 60% 55% at 50% 42%, var(--ksm-blu-1) 0%, var(--ksm-blu-2) 45%, var(--ksm-blu-3) 78%, var(--ksm-blu-4) 100%);
	overflow: hidden;
}

/* ------------------------------------------------------------- testata */
.ksm-testata {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	padding: clamp(18px, 2.2vw, 36px) var(--ksm-margine) 0;
	position: relative;
	z-index: 4;
	font-family: "KSM Manrope", "KSM Manrope riserva", system-ui, -apple-system, "Segoe UI", sans-serif;   /* MOV-08: la riserva, in cima al file */
}
.ksm-marchio { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ksm-marchio-logo { height: clamp(34px, 3.3vw, 56px); width: auto; display: block; }
.ksm-marchio-segno { width: clamp(38px, 3.6vw, 60px); height: auto; }
.ksm-marchio-sigla { font-family: "KSM Playfair", Didot, "Bodoni 72", serif; font-weight: 700; font-size: clamp(38px, 4vw, 66px); line-height: 1; letter-spacing: -.02em; }
.ksm-marchio-nome { font-size: clamp(14px, 1.55vw, 26px); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; margin-left: 10px; }
/* v1.6: sette voci (entra «Turismo Sanitario»). Con lo spazio di prima (fino a 46 px) il menu
   spingeva lingue e pulsante fuori dalla cornice, che li tagliava (overflow: hidden) — e in
   italiano succedeva già con sei voci fra 1101 e 1180 px. Spazio più stretto qui, e il menu va
   sulla sua riga SOLO quando sulla stessa non ci sta (più sotto, «schermi stretti»). Misurato
   con tests/misura_testata.py. */
/* G-1 (9/10/2026): con l'ottava voce («Search», a lente) la home in italiano non sta più su una riga fra 1366 e 1536 px con questi
   spazi (misurati: sola lente −20 px a 1366, −13 a 1440, −3 a 1536). Gli spazi restano quelli della v1.6 e si stringono SOLO dove
   non ci sta, con la classe ksm-testata--stretta (la mette la misura della testata; più sotto, «schermi stretti»). */
.ksm-navigazione ul { display: flex; justify-content: center; gap: clamp(14px, 1.2vw, 30px); list-style: none; margin: 0; padding: 0; }
.ksm-navigazione a, .ksm-navigazione .ksm-presto { font-size: clamp(14px, 1.05vw, 17px); text-decoration: none; white-space: nowrap; padding-bottom: 8px; border-bottom: 2px solid transparent; }
.ksm-navigazione a:hover { border-bottom-color: rgba(255, 255, 255, .6); }
.ksm-navigazione a[aria-current="page"] { color: var(--ksm-lime); border-bottom-color: var(--ksm-lime); }
/* Una voce senza pagina: piena leggibilità (prima opacità .62 = 3,5:1, sotto AAA), si distingue
   da un link con la sottolineatura a puntini, e il lettore di schermo legge «(in preparazione)». */
.ksm-navigazione .ksm-presto { cursor: default; text-decoration: underline dotted; text-underline-offset: 6px; }
.ksm-testata-destra { display: flex; align-items: center; gap: 18px; }
.ksm-lingue { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.ksm-lingue a { text-decoration: none; opacity: .9; }
/* v1.7, giro di correzioni del 9/10 (AC-08, vB-14, VC-19, RQ-11; C-02): bersagli di almeno 44 × 44 px SENZA
   cambiare l'aspetto né la riga: un'area trasparente attorno al link (::after), mai spazio in più. Il cambio
   lingua («EN», 14 × 19 px) ce l'ha sempre: attorno ha solo vuoto (il pulsante di vetro è a 18 px). Le voci del
   menu e il sotto-menu ce l'hanno sui dispositivi a tocco (pointer: coarse): l'area sale SOPRA la voce (sotto
   c'è la freccetta del sotto-menu, con la sua area che scende) e non entra mai nella voce accanto.
   G-1 (giro di verifica del 9/10): a sinistra del cambio lingua ora c'è la lente di «Search», con la sua area. L'ultimo
   link delle lingue (oggi l'unico) la sua area la prende soprattutto a DESTRA, verso il pulsante: 17 px oltre il link (il
   pulsante è a 18), il resto a sinistra. Così fra lente e lingua bastano (44 − lente)/2 + (27 − lingua) px: lo controlla
   la misura della testata al tocco (home/testata.php, aree()), e se non ci stanno la testata va su due righe. */
.ksm-lingue a { position: relative; }
.ksm-lingue a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; }
.ksm-lingue li:last-child a::after { left: auto; right: -17px; width: max(calc(100% + 17px), 44px); translate: 0 -50%; }
/* 1.10.0 (K-NEXT-07): con cinque lingue il cambio lingua è una TENDINA: la sigla della lingua della pagina, con la freccetta,
   e l'elenco delle altre che si apre sotto (come il sotto-menu). La sigla ha l'area di tocco che aveva il link della lingua:
   44 × 44 px, sporgente soprattutto a destra (17 px, verso il pulsante). Nell'elenco aperto ogni lingua è alta 44 px. */
.ksm-lingue-scelta { position: relative; }
.ksm-lingue-scelta > summary {
	position: relative; display: flex; align-items: center; gap: 3px; cursor: pointer; list-style: none;
	text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: .08em; opacity: .9;
}
.ksm-lingue-scelta > summary::-webkit-details-marker { display: none; }
.ksm-lingue-scelta > summary svg { width: 14px; height: 14px; transition: rotate .2s ease; }
.ksm-lingue-scelta[open] > summary svg { rotate: 180deg; }
.ksm-lingue-scelta > summary::after { content: ""; position: absolute; top: 50%; right: -17px; width: max(calc(100% + 17px), 44px); height: max(100%, 44px); translate: 0 -50%; }
.ksm-lingue-scelta > .ksm-lingue {
	position: absolute; z-index: 45; top: calc(100% + 14px); left: -12px; flex-direction: column; gap: 2px; padding: 8px; min-width: 72px;
	border-radius: 18px; 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);
}
.ksm-lingue-scelta .ksm-lingue a { display: block; padding: 12px 14px; border-radius: 12px; text-align: center; opacity: 1; }
.ksm-lingue-scelta .ksm-lingue a:hover { background: rgba(255, 255, 255, .14); }
.ksm-lingue-scelta .ksm-lingue li a::after, .ksm-lingue-scelta .ksm-lingue li:last-child a::after { content: none; }
@media (pointer: coarse) {
	.ksm-navigazione > ul > li > a, .ksm-navigazione .ksm-sottomenu a { position: relative; }
	.ksm-navigazione > ul > li > a::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: max(100%, 44px); height: max(100%, 44px); translate: -50% 0; }
	.ksm-navigazione .ksm-sottomenu a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); translate: 0 -50%; }
}
/* C-02: il segno che la riga del menu continua (solo dove la riga scorre: ≤ 1100 px, più sotto). È decorativo
   (aria-hidden): chi usa la tastiera passa di voce in voce e la riga lo segue; al tocco fa scorrere la riga. */
.ksm-menu-scorri { display: none; }
/* G-1 (9/10/2026, «il grafo va in search su menù principale»): l'ottava voce, «Search», è una LENTE. Su UNA riga è sempre la
   sola lente, su tutte le pagine (giro di verifica del 9/10: con la scritta «dove c'è posto» la home e le pagine avevano menu
   diversi alla stessa larghezza); con DUE righe (lì il menu ha la sua riga) la scritta torna: classe ksm-testata--lente-piena,
   la mette la misura della testata (home/testata.php). Sotto i 1101 px la riga del menu scorre di lato (C-02) e la scritta
   c'è sempre. Senza script: scritta fra 1101 e 1439 px (menu sulla sua riga), sola lente da 1440 in su. La scritta nascosta
   resta il NOME del link («Search»): come .ksm-nascosto, mai display:none. L'area di tocco della lente (44 × 44) è centrata:
   sporge al più di 13,6 px per lato, meno dello spazio fra le voci (almeno 14 px), quindi non entra mai nella voce prima. */
.ksm-navigazione .ksm-voce-icona { display: inline-flex; vertical-align: -.2em; }
.ksm-navigazione .ksm-voce-icona svg { width: 1.2em; height: 1.2em; }
.ksm-navigazione .ksm-voce-icona + .ksm-voce-scritta { margin-left: .4em; }
.ksm-navigazione .ksm-voce-lente > a { position: relative; }
.ksm-navigazione .ksm-voce-lente > a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; }
@media (min-width: 1101px) {
	.ksm-testata--misurata:not(.ksm-testata--lente-piena) .ksm-voce-lente .ksm-voce-scritta { position: absolute !important; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1440px) {
	.ksm-testata:not(.ksm-testata--misurata) .ksm-voce-lente .ksm-voce-scritta { position: absolute !important; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ------------------------------------------------------------- il sigillo (1.11.0) */
/* SG-1 (21/10/2026; il committente: «controlla che le troppe cose non inficino la lettura del sigillo, per esempio potrebbe comparire in
   una cornice con sfondo bianco»). Il badge arriva dal server di verifica (KSM_Sito::sigillo) e qui si decide solo DOVE e QUANTO grande.
   La CORNICE BIANCA è il collegamento stesso: sfondo bianco pieno, angoli arrotondati, un filo di bianco attorno al badge. Sul blu della
   testata e del piè il badge (azzurro chiarissimo col filo verde) resta un oggetto a sé, e il fuoco (lime, home.css in cima) gira attorno
   al bianco. Il badge non si deforma mai e non sposta niente quando arriva: altezza fissa, larghezza dal rapporto fissato nell'HTML (width,
   height e aspect-ratio da KSM_Sito::SIGILLO_LARGHEZZA), e object-fit: contain se il server lo disegna più largo o più stretto. Bersaglio: la cornice è alta 52 px nella testata e 68 nel piè
   (almeno 44 × 44, WCAG 2.5.5). */
.ksm-sigillo {
	display: inline-flex; align-items: center; max-width: 100%; padding: 4px; border-radius: 12px; background: #fff; line-height: 0;
	text-decoration: none; box-shadow: 0 4px 16px rgba(3, 16, 40, .28);
}
.ksm-home .ksm-sigillo:focus-visible { border-radius: 12px; }   /* il fuoco di tutto il sito ha raggio 6: qui resta quello della cornice */
/* 44 px nella testata: la scritta principale del badge esce a 10 px (a 40 px era 9, e il nome della clinica sotto i 8). */
.ksm-sigillo__badge { display: block; width: auto; height: 44px; max-width: 100%; object-fit: contain; }
.ksm-sigillo--piede { padding: 6px; border-radius: 14px; }
.ksm-home .ksm-sigillo--piede:focus-visible { border-radius: 14px; }
.ksm-sigillo--piede .ksm-sigillo__badge { height: 56px; }
/* Nella TESTATA: una riga sua, sopra logo, menu, lingue e pulsante, allineata a destra (sopra il pulsante). La riga sotto non sa che c'è:
   il sigillo è fuori dal flusso (position: absolute) e la testata gli fa posto con lo spazio in alto. Così nessuna misura della riga
   cambia (la scelta «una riga o due» di testata.php, gli spazi stretti, la striscia del telefono): cambia solo quanto è in basso. */
.ksm-testata--con-sigillo { --ksm-sigillo-sopra: clamp(10px, 1vw, 16px); padding-top: calc(var(--ksm-sigillo-sopra) * 2 + 52px); }
.ksm-testata-sigillo { position: absolute; top: var(--ksm-sigillo-sopra, 12px); right: var(--ksm-margine); max-width: calc(100% - 2 * var(--ksm-margine)); line-height: 0; }

/* bottoni */
.ksm-bottone-vetro, .ksm-bottone-lime {
	display: inline-flex; align-items: center; gap: 18px;
	border-radius: 999px; text-decoration: none; white-space: nowrap;
	transition: transform .2s ease, background-color .2s ease;
}
.ksm-bottone-vetro {
	padding: 10px 10px 10px clamp(18px, 1.8vw, 32px);
	font-size: clamp(15px, 1.15vw, 19px);
	background: var(--ksm-vetro-forte);
	border: 1px solid var(--ksm-filo);
}
.ksm-bottone-lime {
	padding: 12px 12px 12px clamp(22px, 2vw, 34px);
	font-size: clamp(17px, 1.3vw, 21px); font-weight: 500;
	background: var(--ksm-lime); color: var(--ksm-inchiostro) !important;
	box-shadow: 0 10px 30px rgba(215, 242, 74, .25);
}
.ksm-bottone-vetro:hover, .ksm-bottone-lime:hover { transform: translateY(-1px); }
.ksm-freccia { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid currentColor; }
.ksm-bottone-vetro .ksm-freccia { border-color: transparent; background: rgba(255, 255, 255, .16); }
.ksm-bottone-lime .ksm-freccia { border-color: rgba(13, 39, 72, .35); }
.ksm-freccia svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------- eroe */
.ksm-eroe {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	padding: 0 var(--ksm-margine);
}
.ksm-parola {
	grid-column: 1 / -1; grid-row: 1;
	font-size: clamp(36px, 14.4vw, 252px);
	font-weight: 800; line-height: .8; letter-spacing: .012em;
	text-align: center; margin-top: clamp(14px, 1.6vw, 26px);
	position: relative; z-index: 1;
	text-shadow: 0 6px 40px rgba(10, 40, 90, .25);
}
.ksm-scena {
	grid-column: 2; grid-row: 1 / span 2;
	margin-top: clamp(60px, 7vw, 124px);
	position: relative; z-index: 2;
	aspect-ratio: 660 / 506;
	align-self: start;
}
.ksm-voce { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.ksm-voce.attiva { opacity: 1; pointer-events: auto; }
.ksm-voce img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.2); transform-origin: 50% 45%; }
/* Segnaposto ritagliati dai mockup: bordi sfumati di più, perché il ritaglio porta
   con sé fondo ed etichette. Le immagini vere (sfondo trasparente) non ne hanno bisogno. */
.ksm-provvisoria img { -webkit-mask-image: radial-gradient(ellipse 46% 47% at 50% 54%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 46% 47% at 50% 54%, #000 58%, transparent 100%); }
.ksm-etichetta {
	position: absolute; display: flex; align-items: center; gap: 12px;
	font-size: clamp(10px, .78vw, 13px); letter-spacing: .17em; line-height: 1.55;
	text-transform: uppercase; white-space: nowrap; color: #fff;
}
.ksm-etichetta::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(255, 255, 255, .55); flex: none; }
.ksm-etichetta span { position: relative; padding-left: 0; }
.ksm-destra-alto, .ksm-destra-medio, .ksm-destra-basso { left: 80%; }
.ksm-sinistra-alto, .ksm-sinistra-medio, .ksm-sinistra-basso { right: 80%; flex-direction: row-reverse; text-align: right; }
.ksm-destra-alto, .ksm-sinistra-alto { top: 24%; }
.ksm-destra-medio, .ksm-sinistra-medio { top: 50%; }
.ksm-destra-basso, .ksm-sinistra-basso { top: 70%; } /* più in basso coprirebbe il pulsante di pausa */
.ksm-pausa {
	position: absolute; right: 4%; bottom: 2%; z-index: 3;
	width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer; color: #fff;
	background: var(--ksm-vetro-forte); border: 1px solid var(--ksm-filo);
}
.ksm-pausa svg { width: 16px; height: 16px; }
.ksm-pausa.in-pausa svg { opacity: .5; }

.ksm-promessa { grid-column: 1; grid-row: 2; align-self: start; padding-top: clamp(6px, .9vw, 16px); position: relative; z-index: 3; }
.ksm-promessa h1 { font-size: clamp(36px, 3.5vw, 60px); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; margin: 0 0 18px; }
.ksm-promessa p { font-size: clamp(16px, 1.3vw, 21px); line-height: 1.42; margin: 0 0 30px; max-width: 22.5em; color: #fff; }

.ksm-gemello {
	grid-column: 3; grid-row: 2; justify-self: end; align-self: start;
	position: relative; z-index: 3;
	width: min(372px, 100%);
	margin-top: clamp(-30px, -1.4vw, -6px);
	padding: 34px 28px 26px;
	border-radius: 22px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05));
	border: 1px solid var(--ksm-filo);
	backdrop-filter: blur(6px);
	overflow: hidden;
}
.ksm-gemello > *:not(.ksm-gemello-figura) { position: relative; z-index: 1; }
.ksm-gemello-figura { position: absolute; right: -6px; bottom: 0; height: 100%; width: auto; max-width: none; z-index: 0; opacity: .92; pointer-events: none; }
.ksm-gemello h2 { font-size: clamp(16px, 1.2vw, 20px); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; line-height: 1.4; margin: 0 0 14px; max-width: 8.5em; }
.ksm-gemello-testo { font-size: 16px; line-height: 1.4; margin: 0 0 6px; max-width: 10.5em; }
.ksm-esempio { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--ksm-testo-tenue); margin: 0 0 8px; }
.ksm-metriche { list-style: none; margin: 0 0 18px; padding: 0; }
.ksm-metriche li { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.ksm-metrica-nome { display: block; font-size: 14px; }
.ksm-metriche strong { display: block; font-size: 19px; font-weight: 600; color: var(--ksm-lime); }
.ksm-cerchio { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ksm-filo); flex: none; }
.ksm-cerchio svg { width: 20px; height: 20px; color: var(--ksm-lime); }
/* VA-18 (giro di correzioni del 9/10, C-03: dell'apertura si tocca SOLO questo). Dalla v1.7 il pulsante del riquadro
   dice «Activate Your Digital Twin» / «Attiva il tuo Gemello Digitale» (era «See Your Twin» / «Guarda il tuo gemello»):
   col passo del pulsante della testata usciva dal riquadro (in it a 1920 px il bordo lo tagliava, 31 px oltre il
   contenuto; a 1440 la freccia finiva sulla mano della figura, il testo a ridosso del cerchio). Qui, solo in questo
   riquadro: stesso vetro, stessa freccia, stessi spazi, stessa altezza (64 px), e la pillola non supera la larghezza
   che aveva «See Your Twin» (≈ 250 px, 15,5 em): l'etichetta lunga va a capo DENTRO la pillola, su due righe
   bilanciate («Attiva il tuo / Gemello Digitale»), e la freccia torna dov'era, sul fianco della figura. Il corpo si
   ferma a 16 px perché due righe stiano nei 64 px del cerchio; un'etichetta corta resta su una riga. */
.ksm-gemello .ksm-bottone-vetro { max-width: min(100%, 15.5em); font-size: clamp(15px, 1.15vw, 16px); line-height: 1.25; white-space: normal; text-wrap: balance; }
.ksm-gemello .ksm-bottone-vetro .ksm-freccia { flex: none; }

.ksm-pilastri {
	grid-column: 1 / -1; grid-row: 3;
	display: grid; grid-template-columns: repeat(3, 1fr);
	list-style: none; margin: clamp(10px, 1vw, 18px) 0 0; padding: clamp(14px, 1.4vw, 22px) 0 clamp(22px, 2.2vw, 34px);
	position: relative; z-index: 3;
}
.ksm-pilastri li { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 6px 12px; }
.ksm-pilastri li + li { border-left: 1px solid rgba(255, 255, 255, .28); }
.ksm-cerchio-grande { width: clamp(56px, 4.6vw, 76px); height: clamp(56px, 4.6vw, 76px); background: rgba(255, 255, 255, .06); }
.ksm-cerchio-grande svg { width: 30px; height: 30px; color: #fff; }
.ksm-pilastri strong { display: block; font-size: clamp(17px, 1.4vw, 23px); font-weight: 400; }
.ksm-pilastri small { display: block; font-size: clamp(10px, .82vw, 13px); letter-spacing: .22em; text-transform: uppercase; color: var(--ksm-testo-tenue); margin-top: 6px; }

/* ------------------------------------------------------------- il testo sotto */
.ksm-contenuto {
	max-width: 1640px; margin: clamp(16px, 2vw, 28px) auto 0; padding: clamp(32px, 5vw, 72px) var(--ksm-margine);
	background: #fff; color: #102542; border-radius: clamp(18px, 2vw, 30px);
	font-size: 18px; line-height: 1.68; overflow-wrap: break-word;
}
.ksm-contenuto > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.ksm-contenuto a { color: #144889; }
.ksm-contenuto .wp-block-button__link { background: var(--ksm-inchiostro); color: #fff; padding: 14px 26px; border-radius: 999px; text-decoration: none; display: inline-block; }
.ksm-piede { text-align: center; font-size: 14px; color: var(--ksm-inchiostro); padding: 24px; }

@media (max-width: 1480px) {
	.ksm-destra-alto, .ksm-destra-medio, .ksm-destra-basso { left: 70%; }
	.ksm-sinistra-alto, .ksm-sinistra-medio, .ksm-sinistra-basso { right: 70%; }
}
/* Sotto i 1280 px fra l'immagine e il riquadro del gemello non c'è più posto: le etichette
   (decorative: il senso dell'immagine è nel suo alt) si tolgono invece di finire sotto il riquadro. */
@media (max-width: 1279px) {
	.ksm-etichetta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ksm-voce, .ksm-bottone-vetro, .ksm-bottone-lime { transition: none; }
}

/* ------------------------------------------------------------- schermi stretti */
/* v1.6: quando logo, menu, lingue e pulsante NON stanno su una riga, logo, lingue e pulsante
   restano sulla prima e il menu, intero e centrato, va sulla seconda. Chi decide è la MISURA,
   non una soglia: lo script subito dopo la testata (home/testata.php) somma le larghezze vere
   (logo + voci + lingue e pulsante + spazi) e mette .ksm-testata--due-righe solo se non ci
   stanno. Così una riga dove ci sta (anche a 1366 px, il portatile più diffuso, e sulle porte,
   che non hanno il pulsante) e due dove servono, anche con un nome allungato dal pannello o con
   le etichette de/es/fr quando arrivano. Revisione del 4/10: la prima stesura usava una soglia
   fissa a 1440 px, che a 1366 px mandava su due righe tutte le pagine, porte comprese.
   Senza script (o prima che giri) vale la soglia prudente: due righe fra 1101 e 1439 px.
   Sotto i 1101 px vale la regola di sempre, più sotto. */
@media (min-width: 1101px) {
	/* G-1 (giro di verifica del 9/10): gli spazi stretti, SOLO dove la riga altrimenti non ci sta (oggi la home in italiano fra
	   1366 e 1536 px): fra le voci 1,05vw invece di 1,2vw, fra logo, menu e lingue 18 px invece di 24 (fra le due righe restano
	   24). Il menu è centrato fra logo e lingue, che restano fermi; dove avanza posto (inglese, porte, pagine) gli spazi sono
	   quelli della v1.6. Lo misura tests/confronta_testata_v16.py. */
	.ksm-testata--stretta { column-gap: 18px; }
	.ksm-testata--stretta .ksm-navigazione > ul { gap: clamp(14px, 1.05vw, 30px); }
	.ksm-testata--due-righe { grid-template-columns: 1fr auto; }
	.ksm-testata--due-righe .ksm-navigazione { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 1101px) and (max-width: 1439px) {
	.ksm-testata:not(.ksm-testata--misurata) { grid-template-columns: 1fr auto; }
	.ksm-testata:not(.ksm-testata--misurata) .ksm-navigazione { grid-column: 1 / -1; grid-row: 2; }
}
/* G-1: senza script, da 1440 px la testata è su una riga con la sola lente: con otto voci la home in italiano ci sta solo
   con gli spazi stretti (+14 px a 1440), e senza la misura non si sa dove servono, quindi valgono ovunque. */
@media (min-width: 1440px) {
	.ksm-testata:not(.ksm-testata--misurata) { column-gap: 18px; }
	.ksm-testata:not(.ksm-testata--misurata) .ksm-navigazione > ul { gap: clamp(14px, 1.05vw, 30px); }
}
@media (max-width: 1100px) {
	.ksm-testata { grid-template-columns: 1fr auto; }
	.ksm-navigazione { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
	.ksm-navigazione ul { justify-content: flex-start; }
	/* C-02 (9/10): la riga resta quella di prima (R01), ma dice che continua. Lo script della testata mette
	   ksm-testata--scorre-dx / --scorre-sx: il bordo da cui la riga continua sfuma, e a destra c'è la freccia.
	   scroll-padding: una voce raggiunta con Tab si ferma fuori dalla sfumatura e dalla freccia. Senza script
	   la riga è quella della v1.6 (nessuna classe, nessun segno). */
	.ksm-navigazione { --sfuma-sx: 0px; --sfuma-dx: 0px; scroll-padding-inline: 40px 64px; }
	.ksm-testata--scorre-sx .ksm-navigazione { --sfuma-sx: 36px; }
	.ksm-testata--scorre-dx .ksm-navigazione { --sfuma-dx: 72px; }
	:is(.ksm-testata--scorre-sx, .ksm-testata--scorre-dx) .ksm-navigazione {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sfuma-sx), #000 calc(100% - var(--sfuma-dx)), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--sfuma-sx), #000 calc(100% - var(--sfuma-dx)), transparent 100%);
	}
	.ksm-menu-scorri {
		grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: start; position: relative; z-index: 2;
		place-items: center; width: 30px; height: 30px; margin-top: -5px; border-radius: 50%; cursor: pointer;
		color: #fff; background: rgba(9, 36, 78, .9); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 4px 14px rgba(3, 16, 40, .35);
	}
	.ksm-testata--scorre-dx .ksm-menu-scorri { display: grid; }
	.ksm-menu-scorri svg { width: 16px; height: 16px; rotate: -90deg; }
	.ksm-menu-scorri::after { content: ""; position: absolute; inset: -7px -8px -9px; }   /* 44 × 44 al tocco (dal bordo interno: 28 + 16), più verso il basso: sopra c'è il pulsante di vetro */
	.ksm-eroe { grid-template-columns: 1fr; }
	.ksm-parola { grid-row: 1; }
	.ksm-scena { grid-column: 1; grid-row: 2; margin: -6vw auto 0; width: min(560px, 92%); }
	.ksm-promessa { grid-row: 3; }
	.ksm-gemello { grid-column: 1; grid-row: 4; justify-self: stretch; width: 100%; margin: 28px 0 0; }
	.ksm-pilastri { grid-row: 5; grid-template-columns: 1fr; }
	.ksm-pilastri li { justify-content: flex-start; }
	.ksm-pilastri li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
	.ksm-etichetta { display: none; }
}
/* al tocco, nella riga che scorre: la riga è anche un contenitore che ritaglia (overflow), e ritaglierebbe le aree
   del tocco che salgono sopra le voci. Le si dà spazio dentro (padding) e lo si restituisce fuori (margine
   negativo): la riga non si sposta di un pixel e le aree restano intere, senza scorrimento verticale. */
/* Giro di verifica del 9/10 (WCAG 2.4.13): lo stesso vale per l'anello del fuoco, con OGNI puntatore. L'anello (3 px + 3 di
   distacco) esce di 6 px dal link, e la riga che scorre lo tagliava sopra e sotto (con mouse e tastiera si vedevano solo i due
   lati). 8 px dentro, restituiti fuori: la riga non si sposta. Al tocco valgono i valori qui sotto (le aree salgono di più). */
@media (max-width: 1100px) {
	.ksm-navigazione { padding: 8px; margin: -8px; }
}
@media (max-width: 1100px) and (pointer: coarse) {
	.ksm-navigazione { padding: 14px 4px 8px; margin: -14px -4px -8px; }
}
@media (max-width: 640px) {
	.ksm-marchio-nome { display: none; }
	.ksm-testata { grid-template-columns: 1fr; gap: 14px; }
	.ksm-testata-destra { grid-row: 2; justify-content: space-between; }
	.ksm-navigazione, .ksm-menu-scorri { grid-row: 3; }
	.ksm-testata-destra .ksm-bottone-vetro { padding-left: 18px; font-size: 15px; }
	.ksm-testata-destra .ksm-freccia { width: 34px; height: 34px; }
	.ksm-gemello-figura { opacity: .45; }
	.ksm-contenuto { font-size: 17px; }
}