/* ==========================================================================
   Pagine settore di krw-tech.com: scheletro comune + il mondo di ogni mestiere.
   Dal 2026-09-18. Token dal theme.json; regole in ../../DESIGN.md.
   Si carica solo sulle pagine che contengono `krw-set-` (functions.php).
   ========================================================================== */

:root {
	--set-navy: var(--wp--preset--color--navy, #1a2d58);
	--set-notte: var(--wp--preset--color--navy-scuro, #132244);
	--set-linea: var(--wp--preset--color--navy-testo, #7ea6e8);
	--set-arancio: var(--wp--preset--color--arancio, #ff6900);
	--set-arancio-scuro: var(--wp--preset--color--arancio-chiaro, #ff7a1f);
	--set-arancio-testo: var(--wp--preset--color--arancio-testo, #c75200);
	--set-sfondo: var(--wp--preset--color--sfondo, #f4f6fa);
	--set-bordo: var(--wp--preset--color--bordo, #dbe1ec);
	--set-testo: var(--wp--preset--color--testo, #1a2338);
	--set-tenue: var(--wp--preset--color--testo-tenue, #65708c);
	--set-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	--set-uscita: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- scheletro ---------- */

.krw-set-contenitore {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* Il layout "constrained" di WordPress mette un block-gap fra i figli del contenuto:
   fra due sezioni a tutta larghezza diventerebbe una striscia bianca. */
.krw-set-apertura,
.krw-set-sezione { margin-block: 0; }

.krw-set-sezione {
	padding-block: clamp(4rem, 8vw, 6.5rem);
	background: #fff;
}

.krw-set-sezione--chiara { background: var(--set-sfondo); }

.krw-set-testa {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.krw-set-testa h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.krw-set-testa p { margin: 0; color: var(--set-tenue); font-size: 1.0625rem; max-width: 36em; }

.krw-set-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .875rem 1.75rem;
}

.krw-set-link {
	font-weight: 700;
	font-size: .9375rem;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.krw-set-link::after { content: " \2193"; }

/* ---------- apertura: il foglio da disegno ---------- */

.krw-set-apertura {
	position: relative;
	isolation: isolate;
	color: #fff;
	background-color: var(--set-notte);
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 6.5rem);
	overflow: hidden;
}

/* La griglia del tavolo da disegno sta su uno strato dietro, non nello sfondo della sezione:
   dentro `background-image` il detector del gate componeva il testo sul trasparente del
   gradiente e misurava contrasti falsi (1:1 sul bianco del titolo). Il fondo resta navy pieno. */
.krw-set-apertura::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(126, 166, 232, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(126, 166, 232, .07) 1px, transparent 1px),
		linear-gradient(rgba(126, 166, 232, .14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(126, 166, 232, .14) 1px, transparent 1px);
	background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
	background-position: -1px -1px;
}

.krw-set-apertura__griglia {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.krw-set-apertura h1 {
	color: #fff;
	margin: 1.25rem 0 0;
	font-size: clamp(2.25rem, 4.6vw, 3.625rem);
	line-height: 1.06;
	letter-spacing: -.025em;
	text-wrap: balance;
}

.krw-set-apertura__sotto {
	margin: 1.5rem 0 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: #d6e0f3;
	max-width: 32em;
}

.krw-set-apertura .krw-set-azioni { margin-top: 2.25rem; }
.krw-set-apertura .krw-set-link { color: #fff; }

.krw-set-apertura__nota {
	margin: .875rem 0 0;
	font-size: .875rem;
	color: var(--set-linea);
}

/* ---------- la tavola quotata ---------- */

.krw-tavola {
	position: relative;
	margin: 0;
	padding: clamp(.75rem, 1.6vw, 1.125rem);
	border: 1px solid rgba(126, 166, 232, .5);
	outline: 1px solid rgba(126, 166, 232, .18);
	outline-offset: 6px;
	background: rgba(17, 31, 64, .72);
}

.krw-tavola svg,
.krw-disegno svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.krw-tavola .t-filo,
.krw-disegno .t-filo { fill: none; stroke: #e9eefb; stroke-width: 1.1; }
.krw-tavola .t-filo--tenue,
.krw-disegno .t-filo--tenue { stroke-opacity: .55; stroke-width: 1; }
.krw-tavola .t-pieno,
.krw-disegno .t-pieno { fill: #e9eefb; }
.krw-tavola .t-pieno--tenue,
.krw-disegno .t-pieno--tenue { fill: #e9eefb; fill-opacity: .45; }
.krw-tavola .t-arancio,
.krw-disegno .t-arancio { fill: var(--set-arancio); }
.krw-tavola .t-tratteggio,
.krw-disegno .t-tratteggio { fill: url(#krw-tratteggio); }
.krw-tavola .t-quota,
.krw-disegno .t-quota { fill: none; stroke: var(--set-arancio-scuro); stroke-width: 1; }
.krw-tavola .t-scritta,
.krw-disegno .t-scritta {
	font-family: var(--set-mono);
	font-size: 10px;
	letter-spacing: .08em;
	fill: var(--set-arancio-scuro);
	text-transform: uppercase;
}
.krw-tavola .t-sigla circle,
.krw-disegno .t-sigla circle { fill: var(--set-arancio); }
.krw-tavola .t-sigla text,
.krw-disegno .t-sigla text {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 11px;
	font-weight: 700;
	fill: var(--set-notte);
	text-anchor: middle;
	dominant-baseline: central;
}
.krw-tavola .t-richiamo,
.krw-disegno .t-richiamo { stroke: var(--set-arancio); stroke-width: 1; fill: none; }

/* Il disegno si traccia una volta sola, da uno stato gia' visibile a fine corsa.
   Le scritte delle quote NON si animano: su un <text> SVG l'opacita' animata in Chrome
   restava a 0 anche a fine corsa (misurato: computed 1, pixel vuoti). */
@media (prefers-reduced-motion: no-preference) {
	.krw-tavola .t-filo,
	.krw-tavola .t-quota,
	.krw-disegno .t-filo,
	.krw-disegno .t-quota {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
		animation: krw-traccia 1.1s var(--set-uscita) both;
		animation-delay: var(--r, 0ms);
	}
	.krw-tavola .t-pieno,
	.krw-tavola .t-pieno--tenue,
	.krw-tavola .t-tratteggio,
	.krw-tavola .t-arancio,
	.krw-disegno .t-pieno,
	.krw-disegno .t-pieno--tenue,
	.krw-disegno .t-tratteggio,
	.krw-disegno .t-arancio {
		animation: krw-appare .6s var(--set-uscita) both;
		animation-delay: calc(var(--r, 0ms) + 350ms);
	}
	.krw-tavola .t-sigla,
	.krw-disegno .t-sigla {
		transform-box: fill-box;
		transform-origin: center;
		animation: krw-sigla .45s var(--set-uscita) both;
		animation-delay: calc(900ms + var(--r, 0ms));
	}
}

@keyframes krw-traccia { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes krw-appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes krw-sigla { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* ---------- il cartiglio ---------- */

.krw-cartiglio {
	border-collapse: collapse;
	font-family: var(--set-mono);
	font-size: .75rem;
	line-height: 1.35;
	color: #fff;
	background: var(--set-notte);
}

.krw-cartiglio th,
.krw-cartiglio td {
	border: 1px solid rgba(126, 166, 232, .55);
	padding: .45rem .7rem;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.krw-cartiglio th {
	color: var(--set-linea);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .6875rem;
	white-space: nowrap;
	width: 1%;
}

.krw-cartiglio td strong { color: var(--set-arancio-scuro); font-weight: 600; }

/* Il cartiglio sta SOTTO il disegno, allineato a destra dentro il foglio, non sopra.
   Posato sul disegno in assoluto copriva la fascia E appena il foglio si stringeva (1024 px,
   2026-09-18): il disegno scala, il cartiglio no. In flusso regge a ogni larghezza. */
.krw-tavola svg { aspect-ratio: 600 / 400; }

.krw-tavola .krw-cartiglio {
	width: auto;
	margin: .5rem 0 0 auto;
}

.krw-tavola .krw-cartiglio th,
.krw-tavola .krw-cartiglio td { white-space: nowrap; }

/* ---------- sigle (le lettere della legenda) ---------- */

.krw-sigla {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--set-arancio);
	color: var(--set-notte);
	font-weight: 700;
	font-size: .875rem;
	line-height: 1;
}

/* ---------- la legenda ---------- */

.krw-legenda {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 5vw, 4.5rem);
}

.krw-legenda li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.125rem;
	padding: 1.625rem 0 1.75rem;
	border-top: 1px solid var(--set-bordo);
}

.krw-legenda h3 { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.25; }
.krw-legenda p { margin: 0; color: var(--set-tenue); }

/* ---------- il sito d'esempio ---------- */

.krw-esempio {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.krw-esempio h2 { margin: 0 0 1.125rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.krw-esempio__testo > p { color: var(--set-tenue); margin: 0; }

.krw-esempio__prove {
	list-style: none;
	margin: 1.75rem 0 2rem;
	padding: 0;
	display: grid;
	gap: .875rem;
}

.krw-esempio__prove li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .875rem;
	align-items: start;
}

.krw-esempio__prove .krw-sigla { width: 1.5rem; height: 1.5rem; font-size: .75rem; margin-top: .125rem; }

.krw-esempio__nota { margin: 1.125rem 0 0 !important; font-size: .8125rem; }

.krw-dispositivi {
	position: relative;
	margin: 0;
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.krw-schermo {
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--rilievo, 0 18px 40px rgba(26, 45, 88, .12));
}

.krw-schermo__barra {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: .625rem .875rem;
	background: #eef1f7;
	border-bottom: 1px solid var(--set-bordo);
}

.krw-schermo__barra i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #c9d1e0;
}

.krw-schermo__barra span {
	margin-left: .75rem;
	padding: .15rem .75rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--set-bordo);
	font-family: var(--set-mono);
	font-size: .6875rem;
	color: var(--set-tenue);
}

.krw-vista { position: relative; }
.krw-vista img { display: block; width: 100%; height: auto; }

.krw-telefono {
	position: absolute;
	right: clamp(-.5rem, -1vw, 0rem);
	bottom: 0;
	width: 31%;
	border-radius: 26px;
	border: 7px solid #0f1b36;
	background: #0f1b36;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 24px 48px rgba(0, 0, 0, .2);
}

.krw-telefono .krw-vista img { border-radius: 19px; }

.krw-vista .krw-sigla {
	position: absolute;
	width: 1.625rem;
	height: 1.625rem;
	font-size: .8125rem;
	box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, .22);
	transform: translate(-50%, -50%);
}

/* ---------- il collaudo ---------- */

.krw-set-sezione--scura {
	background: var(--set-navy);
	color: #fff;
}

.krw-collaudo-griglia {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.krw-collaudo-griglia h2 { color: #fff; margin: 0 0 1.125rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.krw-collaudo-griglia > div > p { color: #d6e0f3; margin: 0; }

.krw-collaudo {
	background: #fff;
	color: var(--set-testo);
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 24px 56px rgba(0, 0, 0, .28);
}

.krw-collaudo__testa {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .875rem 1.5rem;
	border-bottom: 2px solid var(--set-navy);
	font-family: var(--set-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--set-navy);
}

.krw-collaudo__voce {
	margin: 0;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--set-bordo);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: .875rem;
	align-items: center;
}

.krw-collaudo .krw-sigla { width: 1.5rem; height: 1.5rem; font-size: .75rem; }

.krw-collaudo__domanda { margin: 0; font-weight: 600; line-height: 1.35; }
.krw-collaudo__domanda small { display: block; font-weight: 400; color: var(--set-tenue); font-size: .8125rem; margin-top: .125rem; }

.krw-collaudo__scelta {
	display: inline-flex;
	border: 1px solid var(--set-bordo);
	border-radius: 999px;
	padding: 3px;
	background: var(--set-sfondo);
}

.krw-collaudo__scelta label { position: relative; cursor: pointer; }

.krw-collaudo__scelta input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.krw-collaudo__scelta span {
	display: block;
	min-width: 3.25rem;
	padding: .45rem .9rem;
	border-radius: 999px;
	text-align: center;
	font-size: .875rem;
	font-weight: 700;
	color: var(--set-tenue);
	transition: background-color 160ms var(--set-uscita), color 160ms var(--set-uscita);
}

.krw-collaudo__scelta input:checked + span { background: var(--set-navy); color: #fff; }
.krw-collaudo__scelta input[value="0"]:checked + span { background: #fff; color: var(--set-navy); box-shadow: inset 0 0 0 1.5px var(--set-navy); }
.krw-collaudo__scelta input:focus-visible + span { outline: 2px solid var(--set-arancio-testo); outline-offset: 2px; }

@media (hover: hover) {
	.krw-collaudo__scelta label:hover span { color: var(--set-navy); }
}

.krw-collaudo__esito {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	padding: 1.375rem 1.5rem 1.5rem;
}

.krw-timbro {
	display: grid;
	place-items: center;
	width: 6.25rem;
	height: 6.25rem;
	border: 2px solid var(--set-arancio-testo);
	outline: 1px solid var(--set-arancio-testo);
	outline-offset: 3px;
	border-radius: 50%;
	color: var(--set-arancio-testo);
	font-family: var(--set-mono);
	text-align: center;
	line-height: 1.1;
	transform: rotate(-8deg);
}

.krw-timbro b { display: block; font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; }
.krw-timbro small { display: block; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; }

.krw-collaudo__esito[data-stato="vuoto"] .krw-timbro { opacity: .35; }

.krw-collaudo__messaggio p { margin: 0 0 .875rem; }
.krw-collaudo__messaggio .wp-element-button { display: inline-block; }

/* ---------- revisioni ---------- */

.krw-revisioni {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.krw-revisioni th {
	font-family: var(--set-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--set-tenue);
	text-align: left;
	padding: 0 1.25rem .75rem 0;
	border-bottom: 2px solid var(--set-navy);
}

.krw-revisioni td {
	padding: 1.375rem 1.5rem 1.5rem 0;
	border-bottom: 1px solid var(--set-bordo);
	vertical-align: top;
	color: var(--set-tenue);
}

.krw-revisioni td strong { display: block; color: var(--set-navy); font-size: 1.125rem; margin-bottom: .375rem; }

.krw-revisioni .krw-rev {
	width: 4.5rem;
	font-family: var(--set-mono);
	font-size: .8125rem;
	color: var(--set-navy);
	white-space: nowrap;
}

.krw-revisioni .krw-corretto { color: var(--set-testo); }

.krw-revisioni .krw-corretto::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 2px;
	margin: .7rem 0 .95rem;
	background: var(--set-arancio);
}

/* ---------- note (regole della professione) ---------- */

.krw-note {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 5vw, 4.5rem);
	align-items: start;
}

.krw-note h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }

.krw-note__foglio {
	border: 1px solid var(--set-bordo);
	background: #fff;
	padding: 1.5rem 1.75rem 1.25rem;
}

.krw-note__foglio > p:first-child {
	margin: 0 0 1rem;
	font-family: var(--set-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--set-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.krw-note__foglio ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .875rem; }
.krw-note__foglio li::marker { font-family: var(--set-mono); color: var(--set-navy); font-size: .875rem; }
.krw-note__fonte { margin: 1.25rem 0 0; font-size: .8125rem; color: var(--set-tenue); }
/* misura massima: il gate conta i caratteri per riga (sotto 80), e il foglio a 7fr ne dava 88-107 */
.krw-note__foglio ol { max-width: 38rem; }
.krw-note__fonte { max-width: 30rem; }

/* ---------- capitolato ---------- */

.krw-capitolato {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(1.5rem, 4vw, 3rem);
}

.krw-capitolato__colonna {
	border-top: 2px solid var(--set-navy);
	padding-top: 1.25rem;
}

.krw-capitolato__colonna h3 {
	margin: 0 0 .75rem;
	font-family: var(--set-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--set-navy);
}

.krw-capitolato ul { list-style: none; margin: 0; padding: 0; }

.krw-capitolato li {
	position: relative;
	padding: .875rem 0 .875rem 2rem;
	border-bottom: 1px solid var(--set-bordo);
}

.krw-capitolato li::before {
	content: "";
	position: absolute;
	left: .125rem;
	top: 1.3rem;
	width: .8rem;
	height: .45rem;
	border-left: 2px solid var(--set-arancio-testo);
	border-bottom: 2px solid var(--set-arancio-testo);
	transform: rotate(-45deg);
}

.krw-capitolato__colonna--escluso { border-top-color: var(--set-bordo); }
.krw-capitolato__colonna--escluso li { color: var(--set-tenue); }

.krw-capitolato__colonna--escluso li::before,
.krw-capitolato__colonna--escluso li::after {
	content: "";
	position: absolute;
	left: .1rem;
	top: 1.4rem;
	width: .9rem;
	height: 2px;
	border: 0;
	background: var(--set-tenue);
	transform: rotate(45deg);
}

.krw-capitolato__colonna--escluso li::after { transform: rotate(-45deg); }

/* ---------- domande ---------- */

.krw-domande {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 5vw, 4.5rem);
	align-items: start;
}

.krw-domande h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.krw-domande__elenco { display: grid; gap: .75rem; }
.krw-domande__elenco details { background: #fff; }
.krw-domande__elenco summary { font-weight: 700; color: var(--set-navy); cursor: pointer; }
.krw-domande__elenco details p { margin: .75rem 0 0; color: var(--set-tenue); }

/* ---------- chiusura ---------- */

.krw-chiusura {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: end;
}

.krw-chiusura h2 { color: #fff; margin: 0 0 1rem; font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.krw-chiusura p { color: #d6e0f3; margin: 0 0 2rem; max-width: 34em; }
.krw-chiusura .krw-set-link { color: #fff; }
.krw-chiusura .krw-set-link::after { content: none; }
.krw-chiusura .krw-cartiglio { width: 100%; font-size: .8125rem; }

/* ---------- telefono e tablet ---------- */

@media (max-width: 960px) {
	.krw-set-apertura__griglia,
	.krw-esempio,
	.krw-collaudo-griglia,
	.krw-note,
	.krw-domande,
	.krw-chiusura,
	.krw-set-testa {
		grid-template-columns: minmax(0, 1fr);
	}
	.krw-set-testa { align-items: start; }
	.krw-legenda { grid-template-columns: minmax(0, 1fr); }
	.krw-capitolato { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.krw-tavola .krw-cartiglio {
		width: 100%;
		margin-top: .75rem;
	}
	.krw-tavola .krw-cartiglio td { white-space: normal; }
	.krw-tavola .t-scritta { display: none; }
	.krw-collaudo__voce {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: .625rem;
	}
	.krw-collaudo__scelta { grid-column: 2; justify-self: start; }
	.krw-collaudo__esito { grid-template-columns: minmax(0, 1fr); }
	.krw-revisioni thead { display: none; }
	.krw-revisioni, .krw-revisioni tbody, .krw-revisioni tr, .krw-revisioni td { display: block; width: auto; }
	.krw-revisioni tr { padding: 1.25rem 0; border-bottom: 1px solid var(--set-bordo); }
	.krw-revisioni td { padding: 0; border: 0; }
	.krw-revisioni .krw-rev { margin-bottom: .5rem; }
	.krw-telefono { width: 38%; }
}

/* ---------- colori dentro le sezioni scure ----------
   Il tema scrive `.krw-scuro p, .krw-scuro li { color: #fff }` (0,1,1): qui serve una
   specificita' piu' alta, altrimenti la scheda bianca del collaudo ha il testo bianco. */
.krw-scuro .krw-set-apertura__sotto { color: #d6e0f3; }
.krw-scuro .krw-set-apertura__nota { color: var(--set-linea); }
.krw-scuro .krw-collaudo-griglia > div > p,
.krw-scuro .krw-chiusura p { color: #d6e0f3; }
.krw-scuro .krw-collaudo p,
.krw-scuro .krw-collaudo li { color: var(--set-testo); }
.krw-scuro .krw-collaudo__domanda small { color: var(--set-tenue); }
.krw-scuro .krw-collaudo a:not(.wp-element-button) { color: var(--set-navy); }

/* ---------- cosa comprende il controllo gratuito (accanto al collaudo) ---------- */
.krw-collaudo__offerta {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(126, 166, 232, .35);
}
.krw-scuro .krw-collaudo__offerta-titolo {
	margin: 0 0 1rem;
	font-weight: 700;
	color: #fff;
}
.krw-collaudo__offerta ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.krw-scuro .krw-collaudo__offerta li { position: relative; padding-left: 1.5rem; color: #d6e0f3; }
.krw-collaudo__offerta li::before {
	content: "";
	position: absolute;
	left: .15rem;
	top: .55rem;
	width: .65rem;
	height: .35rem;
	border-left: 2px solid var(--set-arancio-scuro);
	border-bottom: 2px solid var(--set-arancio-scuro);
	transform: rotate(-45deg);
}
.krw-scuro .krw-collaudo__offerta p:last-child { margin: 0; font-size: .875rem; color: var(--set-linea); }

/* sul telefono il mockup del computer e' troppo piccolo per le sigle: resta la B sul telefono */
@media (max-width: 640px) {
	.krw-sigla--mockup { display: none; }
}

/* =====================================================================
   Mondo "impresa edile" (2026-09-19): cartello di cantiere, rete arancione,
   confronto prima/dopo del sito. Regole in ../../DESIGN.md.
   ===================================================================== */

/* La griglia da tavolo e' dello studio tecnico: il cantiere sta sul navy pieno */
.krw-set-apertura--cantiere::before { display: none; }

.krw-cartello {
	margin: 0;
	justify-self: center;
	width: min(100%, 30rem);
	display: grid;
	justify-items: center;
}

.krw-cartello__tavola {
	position: relative;
	z-index: 1;
	width: 100%;
	background: #fff;
	color: var(--set-testo);
	border: 3px solid #0d1830;
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 28px 56px rgba(0, 0, 0, .35);
	transform: rotate(-1deg);
}

.krw-scuro .krw-cartello__testa,
.krw-cartello__testa {
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .7rem 1rem .6rem;
	background: var(--set-navy);
	color: #fff;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.krw-cartello__testa span {
	font-family: var(--set-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--set-arancio-scuro);
}

.krw-cartello__righe { margin: 0; }

.krw-cartello__righe div {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: .75rem;
	align-items: baseline;
	padding: .55rem 1rem;
	border-top: 1px solid var(--set-bordo);
}

.krw-cartello__righe div:first-child { border-top: 0; }

.krw-cartello__righe dt {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--set-tenue);
}

.krw-cartello__righe dd {
	margin: 0;
	font-weight: 600;
	line-height: 1.35;
	color: var(--set-navy);
}

.krw-cartello__righe dd strong { color: var(--set-arancio-testo); }

.krw-cartello__pali {
	display: flex;
	justify-content: space-between;
	width: 62%;
	height: 4.5rem;
	margin-top: -.25rem;
}

.krw-cartello__pali span {
	width: 10px;
	border-radius: 2px;
	background: linear-gradient(90deg, #7d879b, #d7dde8 45%, #8c96aa);
}

/* La rete arancione da cantiere: due fili di bordo e la maglia a rombi, sfumata ai lati */
.krw-rete {
	position: relative;
	z-index: 2;
	width: 118%;
	height: 4.25rem;
	margin-top: -1.25rem;
	background:
		linear-gradient(var(--set-arancio), var(--set-arancio)) top / 100% 3px no-repeat,
		linear-gradient(var(--set-arancio), var(--set-arancio)) bottom / 100% 3px no-repeat,
		repeating-linear-gradient(45deg, transparent 0 9px, rgba(255, 105, 0, .85) 9px 11px),
		repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255, 105, 0, .85) 9px 11px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Il cartello si compila una riga alla volta, una volta sola */
@media (prefers-reduced-motion: no-preference) {
	.krw-cartello__righe div { animation: krw-riga .5s var(--set-uscita) both; }
	.krw-cartello__righe div:nth-child(2) { animation-delay: 70ms; }
	.krw-cartello__righe div:nth-child(3) { animation-delay: 140ms; }
	.krw-cartello__righe div:nth-child(4) { animation-delay: 210ms; }
	.krw-cartello__righe div:nth-child(5) { animation-delay: 280ms; }
	.krw-cartello__righe div:nth-child(6) { animation-delay: 350ms; }
}

@keyframes krw-riga { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Nella chiusura: il cartello senza pali, rete e inclinazione */
.krw-cartello--piccolo { justify-self: stretch; width: 100%; }
.krw-cartello--piccolo .krw-cartello__tavola { transform: none; box-shadow: none; border-width: 2px; }
.krw-cartello--piccolo .krw-cartello__testa { font-size: 1.125rem; }

/* ---------- confronto prima/dopo ---------- */

/* Il confronto va a tutta larghezza: sotto, le note e il telefono. Il "dopo" sta a SINISTRA e
   il "prima" a destra, al contrario dell'uso: a meta' cursore le due meta' che parlano sono il
   titolo del sito nuovo e le news e il fax del vecchio (provato il 2026-09-19, al contrario si
   vedevano il margine grigio e la sola foto del tetto). */
.krw-confronto-griglia {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
}

.krw-confronto__sotto {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.krw-confronto { margin: 0; }

.krw-confronto__vista {
	--taglio: 50%;
	position: relative;
	overflow: hidden;
}

.krw-confronto__vista > img { display: block; width: 100%; height: auto; }

.krw-confronto__sopra {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--taglio));
}

.krw-confronto__sopra img { display: block; width: 100%; height: 100%; object-fit: cover; }

.krw-confronto__linea {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--taglio);
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
	pointer-events: none;
}

.krw-confronto__maniglia {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.75rem;
	height: 2.75rem;
	margin: -1.375rem 0 0 -1.375rem;
	border-radius: 50%;
	background: var(--set-arancio);
	box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0, 0, 0, .25);
}

.krw-confronto__maniglia::before,
.krw-confronto__maniglia::after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -6px;
	border: 6px solid transparent;
}

.krw-confronto__maniglia::before { left: 5px; border-right-color: var(--set-notte); }
.krw-confronto__maniglia::after { right: 5px; border-left-color: var(--set-notte); }

.krw-confronto__etichetta {
	position: absolute;
	top: .75rem;
	padding: .3rem .6rem;
	border-radius: 3px;
	font-family: var(--set-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	pointer-events: none;
}

.krw-confronto__etichetta--dopo { left: .75rem; background: var(--set-arancio); color: var(--set-notte); }
.krw-confronto__etichetta--prima { right: .75rem; background: rgba(13, 24, 48, .88); color: #fff; }

/* Il cursore vero e' un range trasparente su tutta la schermata: si trascina ovunque e si usa
   con le frecce. Il fuoco da tastiera si vede sulla maniglia. */
.krw-confronto__cursore {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
}

.krw-confronto__vista:has(.krw-confronto__cursore:focus-visible) .krw-confronto__maniglia {
	outline: 3px solid var(--set-navy);
	outline-offset: 4px;
}

.krw-confronto figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--set-tenue); }

.krw-confronto__note h3 { margin: 0 0 1rem; font-size: 1.25rem; }

.krw-confronto__note ol {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2rem;
}

.krw-confronto__note li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
}

.krw-confronto__note li small { display: block; margin-top: .2rem; color: var(--set-tenue); font-size: .875rem; }
.krw-confronto__note .krw-sigla { width: 1.5rem; height: 1.5rem; font-size: .75rem; margin-top: .1rem; }

.krw-telefono--libero {
	position: static;
	width: min(100%, 13rem);
	margin: 0 auto;
}

@media (max-width: 960px) {
	.krw-confronto__sotto,
	.krw-confronto__note ol { grid-template-columns: minmax(0, 1fr); }
	.krw-telefono--libero { width: min(62%, 13rem); }
}

@media (max-width: 640px) {
	.krw-cartello__righe div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
	.krw-cartello__testa { font-size: 1.25rem; }
	.krw-confronto__maniglia { width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; }
}

/* =====================================================================
   Mondo "ristorante" (2026-09-19): il coperto visto dall'alto col telefono
   accanto al piatto, il confronto sul telefono (menù in PDF e menù come
   pagina), il collaudo come comanda appesa alla stecca. Regole in DESIGN.md.
   ===================================================================== */

/* Il tavolo e' il navy pieno: niente griglia da disegno */
.krw-set-apertura--coperto::before { display: none; }

.krw-disegno { margin: 0; }
.krw-coperto svg { aspect-ratio: 600 / 520; }

/* Lo schermo del telefono e' l'unica cosa "accesa" sul tavolo: fondo bianco, testo navy.
   Le scritte sono decorative (aria-hidden): il contenuto sta in <title> e <desc>. */
.krw-disegno .t-cucitura { fill: none; stroke: #e9eefb; stroke-opacity: .28; stroke-width: 1; stroke-dasharray: 3 5; }
.krw-disegno .t-corpo { fill: #0c1630; }
.krw-disegno .t-schermo { fill: #fff; }
.krw-disegno .t-scr { font-family: var(--wp--preset--font-family--sans, sans-serif); fill: var(--set-navy); }
.krw-disegno .t-scr--nome { font-size: 12px; font-weight: 700; }
.krw-disegno .t-scr--piatto { font-size: 9.5px; font-weight: 600; }
.krw-disegno .t-scr--desc { font-size: 6.8px; fill: var(--set-tenue); }
.krw-disegno .t-scr--mini { font-size: 7.5px; }
.krw-disegno .t-scr--tab { font-size: 7.5px; fill: var(--set-tenue); }
.krw-disegno .t-scr--attiva { font-weight: 700; fill: var(--set-navy); }
.krw-disegno .t-scr--allergeni { font-family: var(--set-mono); font-size: 6.8px; fill: var(--set-arancio-testo); }
.krw-disegno .t-scr--bottone { font-size: 8.5px; font-weight: 700; text-anchor: middle; }
.krw-disegno .t-riga { stroke: var(--set-bordo); stroke-width: .8; }
.krw-disegno .t-sottolinea { stroke: var(--set-arancio); stroke-width: 2; }
.krw-disegno .t-aperto { fill: #2a8a57; }
.krw-disegno .t-bottone { fill: none; stroke: var(--set-navy); stroke-width: 1.1; }
.krw-disegno .t-bottone--pieno { fill: var(--set-arancio); stroke: none; }
.krw-disegno .t-foto { fill: url(#krw-tratteggio-scuro); stroke: #c9d1e0; stroke-width: .8; }
.krw-disegno .t-indicatore { stroke: #c9d1e0; stroke-width: 3; stroke-linecap: round; }

/* ---------- confronto sul telefono ---------- */

.krw-esempio--telefono { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.krw-esempio__prove small { display: block; margin-top: .15rem; color: var(--set-tenue); font-size: .875rem; }

.krw-confronto--telefono { justify-self: center; width: min(100%, 21rem); }
.krw-confronto--telefono figcaption { text-align: center; }

.krw-telefono--confronto {
	position: static;
	width: 100%;
	border-width: 9px;
	border-radius: 38px;
}

.krw-telefono--confronto .krw-confronto__vista { border-radius: 29px; }
.krw-telefono--confronto .krw-confronto__etichetta { top: 1.25rem; }
.krw-telefono--confronto .krw-confronto__etichetta--dopo { left: 1rem; }
.krw-telefono--confronto .krw-confronto__etichetta--prima { right: 1rem; }

/* ---------- la comanda ---------- */

/* La stecca della cucina: il foglietto ci sta infilato sotto */
.krw-comanda-stecca {
	position: relative;
	padding-top: .75rem;
	max-width: 34rem;
	width: 100%;
	justify-self: center;
}

.krw-comanda-stecca::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: -1.75rem;
	right: -1.75rem;
	height: 1.25rem;
	border-radius: 4px;
	background: linear-gradient(180deg, #eef1f6 0%, #b3bccb 55%, #d5dbe4 100%);
	box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

/* Il foglietto: bianco, righe tratteggiate, bordo strappato in fondo. Ombra da documento su
   scrivania come il verbale, NON `filter: drop-shadow`: il detector del gate misura il testo
   dentro un filtro sui pixel e dava 10 contrasti falsi (1,1:1) su testo navy su bianco
   (provato il 2026-09-19). L'ombra larga copre comunque anche i denti dello strappo. */
.krw-comanda {
	position: relative;
	background: #fff;
	color: var(--set-testo);
	border-radius: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 24px 56px rgba(0, 0, 0, .28);
}

.krw-comanda::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 7px;
	background: #fff;
	-webkit-mask: conic-gradient(from -45deg at bottom, #000 90deg, #0000 0) 0 0 / 14px 100%;
	mask: conic-gradient(from -45deg at bottom, #000 90deg, #0000 0) 0 0 / 14px 100%;
}

.krw-comanda .krw-collaudo__testa {
	padding-top: 1.5rem;
	border-bottom: 1.5px dashed var(--set-navy);
}

.krw-comanda .krw-collaudo__voce { border-bottom-style: dashed; }

/* Nella chiusura: la comanda piccola del prossimo passo */
.krw-comanda--piccola { width: min(100%, 26rem); justify-self: end; }

/* (0,3,0): nella chiusura batte `.krw-scuro .krw-chiusura p` (0,2,1), che darebbe testo chiaro e margine */
.krw-scuro .krw-comanda .krw-comanda__testa,
.krw-comanda__testa {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 1rem 1.25rem .75rem;
	border-bottom: 1.5px dashed var(--set-navy);
	font-family: var(--set-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--set-navy);
}

.krw-comanda__righe { list-style: none; margin: 0; padding: .25rem 1.25rem 1.25rem; }

.krw-scuro .krw-comanda__righe li,
.krw-comanda__righe li {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: .75rem;
	align-items: baseline;
	padding: .65rem 0;
	border-bottom: 1px dashed var(--set-bordo);
	color: var(--set-testo);
	font-weight: 600;
}

.krw-comanda__righe li > span:first-child {
	font-family: var(--set-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--set-tenue);
}

.krw-comanda__righe strong { color: var(--set-arancio-testo); }

@media (max-width: 960px) {
	.krw-esempio--telefono { grid-template-columns: minmax(0, 1fr); }
	.krw-comanda--piccola { justify-self: start; }
}

@media (max-width: 640px) {
	.krw-comanda-stecca::before { left: -.75rem; right: -.75rem; }
}

/* =====================================================================
   Mondo "centro estetico" (2026-09-19): il listino da banco, con la durata di
   ogni trattamento disegnata come una barra; il collaudo e' la scheda cliente
   della prima visita. Regole in DESIGN.md.
   ===================================================================== */

.krw-set-apertura--listino::before { display: none; }

.krw-listino { margin: 0; justify-self: center; width: min(100%, 28rem); }

.krw-listino__foglio {
	position: relative;
	background: #fff;
	color: var(--set-testo);
	border-radius: 14px;
	padding-bottom: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 28px 56px rgba(0, 0, 0, .35);
}

/* La foto della cabina in cima, segnata col tratteggio come le foto della tavola. Nessun testo
   sopra: il detector compone il testo sul gradiente e misura contrasti falsi. */
.krw-listino__foto {
	position: relative;
	height: 4.75rem;
	border-radius: 14px 14px 0 0;
	background: repeating-linear-gradient(135deg, #eef1f7 0 7px, #d9e0ec 7px 8px);
}

/* Il tema forza il bianco su p e li dentro .krw-scuro (0,1,1) e nella chiusura anche margine e
   colore (0,2,1): qui tutto passa da (0,2,0) per i margini e (0,3,0) per i colori. */
.krw-listino .krw-listino__testa,
.krw-listino .krw-listino__stato,
.krw-listino .krw-listino__categoria,
.krw-listino .krw-listino__prenota { margin: 0; max-width: none; }

.krw-listino .krw-listino__testa {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 1rem 1.25rem .7rem;
	border-bottom: 2px solid var(--set-navy);
}

.krw-scuro .krw-listino .krw-listino__testa { color: var(--set-navy); }
.krw-listino__testa span:first-child { font-weight: 700; font-size: 1.375rem; line-height: 1.1; }
.krw-listino__testa span:last-child {
	font-family: var(--set-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--set-tenue);
}

.krw-listino .krw-listino__stato {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.25rem;
	font-size: .875rem;
}

.krw-scuro .krw-listino .krw-listino__stato { color: var(--set-tenue); }
.krw-listino__stato i { width: .5rem; height: .5rem; border-radius: 50%; background: #2a8a57; }

.krw-listino .krw-listino__categoria {
	position: relative;
	padding: .85rem 1.25rem .3rem;
	font-family: var(--set-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.krw-scuro .krw-listino .krw-listino__categoria,
.krw-listino .krw-listino__categoria { color: var(--set-arancio-testo); }

.krw-listino__voci { list-style: none; margin: 0; padding: 0; }

.krw-scuro .krw-listino .krw-listino__voci li,
.krw-listino .krw-listino__voci li {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 5.75rem 2.75rem;
	gap: .75rem;
	align-items: center;
	padding: .55rem 1.25rem;
	border-top: 1px solid var(--set-bordo);
	color: var(--set-navy);
}

.krw-listino__nome { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.krw-listino__nome small { display: block; font-weight: 400; font-size: .75rem; color: var(--set-tenue); }

.krw-listino__durata {
	font-family: var(--set-mono);
	font-size: .75rem;
	color: var(--set-navy);
}

/* La barra della durata: 90 minuti = barra piena. Si riempie una volta sola. */
.krw-listino__durata i {
	position: relative;
	display: block;
	height: 4px;
	margin-bottom: .35rem;
	border-radius: 2px;
	background: #e6ebf3;
	overflow: hidden;
}

.krw-listino__durata i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--set-arancio);
	transform-origin: left center;
	transform: scaleX(var(--min, .5));
}

@media (prefers-reduced-motion: no-preference) {
	.krw-listino__durata i::after { animation: krw-durata 1s var(--set-uscita) both; animation-delay: .25s; }
	.krw-listino__voci li:nth-child(2) .krw-listino__durata i::after { animation-delay: .35s; }
}

@keyframes krw-durata { from { transform: scaleX(0); } }

.krw-listino__prezzo {
	font-family: var(--set-mono);
	font-size: .8125rem;
	font-weight: 700;
	text-align: right;
	color: var(--set-navy);
}

.krw-listino .krw-listino__prenota {
	position: relative;
	margin: 1rem 1.25rem 0;
	padding: .7rem 1rem;
	border-radius: 10px;
	background: var(--set-arancio);
	font-weight: 700;
	font-size: .9375rem;
	text-align: center;
}

.krw-scuro .krw-listino .krw-listino__prenota { color: var(--set-notte); }

/* Le sigle stanno sul bordo del listino, a meta' fuori: rimandano alla legenda A-F */
.krw-listino .krw-sigla--bordo,
.krw-listino .krw-sigla--destra {
	position: absolute;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	font-size: .75rem;
	transform: translateY(-50%);
	box-shadow: 0 0 0 3px #fff;
}

.krw-listino .krw-sigla--bordo { left: -.75rem; }
.krw-listino .krw-sigla--destra { right: -.75rem; }
.krw-listino .krw-listino__prenota .krw-sigla--bordo { left: -2rem; }

/* Nella chiusura: il listino piccolo del prossimo passo */
.krw-listino--piccolo { justify-self: end; width: min(100%, 26rem); }
.krw-listino--piccolo .krw-listino__foglio { box-shadow: none; }
.krw-scuro .krw-listino--piccolo .krw-listino__voci li,
.krw-listino--piccolo .krw-listino__voci li { grid-template-columns: minmax(0, 1fr) auto; }
.krw-listino--piccolo .krw-listino__prezzo { font-size: .875rem; color: var(--set-arancio-testo); }

/* ---------- la scheda cliente (collaudo) ----------
   ⚠️ `.krw-scheda` e' la card del tema (style.css, con fondo proprio sulle fasce scure):
   qui il nome e' `.krw-scheda-cliente`, altrimenti il collaudo esce trasparente. */

.krw-scheda-cliente { border-radius: 12px; }

.krw-scuro .krw-scheda-cliente .krw-scheda-cliente__chi,
.krw-scheda-cliente__chi {
	display: flex;
	gap: .75rem;
	align-items: baseline;
	margin: 0;
	padding: .75rem 1.5rem;
	border-bottom: 1px solid var(--set-bordo);
	color: var(--set-navy);
	font-weight: 600;
}

.krw-scheda-cliente__chi span {
	font-family: var(--set-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--set-tenue);
}

/* Il margine rigato della scheda: una linea fra le sigle e le domande */
.krw-scheda-cliente .krw-collaudo__voce { position: relative; }

.krw-scheda-cliente .krw-collaudo__voce::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3.4375rem;
	border-left: 1px solid rgba(199, 82, 0, .35);
}

@media (max-width: 960px) {
	.krw-listino--piccolo { justify-self: start; }
}

@media (max-width: 640px) {
	.krw-scuro .krw-listino .krw-listino__voci li,
	.krw-listino .krw-listino__voci li { grid-template-columns: minmax(0, 1fr) 4.5rem 2.5rem; gap: .5rem; }
	.krw-scuro .krw-listino--piccolo .krw-listino__voci li,
	.krw-listino--piccolo .krw-listino__voci li { grid-template-columns: minmax(0, 1fr) auto; }
	.krw-listino .krw-sigla--destra { right: -.6rem; }
}

/* =====================================================================
   Pagina "tutta Italia" (2026-09-19): la cartina sul foglio da disegno, col
   percorso dei sei passaggi da Vercelli a te; la vetrina dei quattro siti
   d'esempio. Regole in DESIGN.md.
   ===================================================================== */

/* La cartina usa il foglio della tavola (filetto, contro-filetto, griglia della sezione).
   Contorno da Natural Earth 1:50m (pubblico dominio), proiezione conica conforme. Il cartiglio
   sta sotto, come nella tavola: nel mare fra Sardegna e Sicilia non c'era spazio. */
.krw-cartina { justify-self: center; width: min(100%, 29rem); }
.krw-tavola.krw-cartina svg { aspect-ratio: 480 / 560; }
/* `th { width: 1% }` del cartiglio allarga la tabella a tutto il foglio: qui si stringe sul contenuto */
.krw-cartina .krw-cartiglio th { width: auto; }
.krw-disegno .t-percorso { stroke-width: 1.6; }
.krw-disegno .t-buco { fill: var(--set-notte); }

.krw-legenda__nota { margin: 1.75rem 0 0; max-width: 40em; color: var(--set-tenue); font-size: .9375rem; }
/* la nota sotto la vetrina corre a tutta larghezza: misura massima per il gate (sotto 80 caratteri) */
.krw-vetrina + .krw-esempio__nota { max-width: 32rem; margin-top: 2rem !important; }

/* ---------- la vetrina dei siti d'esempio ---------- */

.krw-vetrina {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Cinque siti: i primi due grandi, gli altri tre in fila sotto */
.krw-vetrina__voce { grid-column: span 2; }
.krw-vetrina__voce:nth-child(-n+2) { grid-column: span 3; }

.krw-vetrina__voce h3 { margin: 1.25rem 0 .35rem; font-size: 1.25rem; }
.krw-vetrina__voce > p { margin: 0; color: var(--set-tenue); }

.krw-vetrina .krw-vetrina__link {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-top: .875rem;
}

.krw-vetrina__link a {
	font-weight: 700;
	font-size: .9375rem;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

@media (max-width: 960px) {
	.krw-vetrina { grid-template-columns: minmax(0, 1fr); }
	.krw-vetrina__voce,
	.krw-vetrina__voce:nth-child(-n+2) { grid-column: auto; }
}

/* =====================================================================
   Pagina "parrucchieri" (2026-09-19): l'agenda del salone, con le colonne di
   chi lavora e una prenotazione arrivata dal sito; il collaudo e' la scheda
   colore, con una ciocca che si colora a ogni si'. Regole in DESIGN.md.
   ===================================================================== */

.krw-set-apertura--agenda::before { display: none; }

.krw-agenda { position: relative; margin: 0; justify-self: center; width: min(100%, 31rem); padding: 1.25rem 0 3.25rem; }

.krw-agenda__foglio {
	position: relative;
	background: #fff;
	color: var(--set-testo);
	border-radius: 14px;
	padding-bottom: 2.75rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 28px 56px rgba(0, 0, 0, .35);
}

/* Il tema forza il bianco su p e li dentro .krw-scuro (0,1,1) e nella chiusura anche margine e
   colore (0,2,1): margini a (0,2,0), colori a (0,3,0), come nel listino. */
.krw-agenda .krw-agenda__testa,
.krw-agenda .krw-agenda__stato,
.krw-agenda .krw-agenda__messaggio,
.krw-agenda .krw-agenda__prossimo { margin: 0; max-width: none; }

.krw-agenda .krw-agenda__testa {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 1rem 1.25rem .7rem;
	border-bottom: 2px solid var(--set-navy);
}

.krw-scuro .krw-agenda .krw-agenda__testa { color: var(--set-navy); }
.krw-agenda__testa span:first-child { font-weight: 700; font-size: 1.375rem; line-height: 1.1; }
.krw-agenda__testa span + span {
	font-family: var(--set-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--set-tenue);
}

.krw-agenda .krw-agenda__stato {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.25rem;
	font-size: .875rem;
}

.krw-scuro .krw-agenda .krw-agenda__stato { color: var(--set-tenue); }
.krw-agenda__stato i { width: .5rem; height: .5rem; border-radius: 50%; background: #2a8a57; }

/* La griglia: una colonna per chi lavora, una riga per ogni mezz'ora. Le righe delle ore
   attraversano tutta la griglia, gli appuntamenti ci stanno sopra. */
.krw-agenda__griglia {
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem repeat(3, minmax(0, 1fr));
	grid-template-rows: auto repeat(8, 2.125rem);
	column-gap: .375rem;
	margin: 0 1rem;
	border-top: 1px solid var(--set-bordo);
}

.krw-agenda__chi {
	grid-row: 1;
	position: relative;
	padding: .5rem .3rem .45rem;
	font-weight: 700;
	font-size: .875rem;
	color: var(--set-navy);
}

.krw-agenda__riga { grid-column: 1 / -1; border-top: 1px dashed var(--set-bordo); }

.krw-agenda__ora {
	grid-column: 1;
	padding-top: .3rem;
	font-family: var(--set-mono);
	font-size: .75rem;
	line-height: 1;
	color: var(--set-tenue);
}

.krw-agenda__app {
	position: relative;
	z-index: 1;
	margin: 3px 0 2px;
	padding: .3rem .45rem;
	border-radius: 6px;
	background: #edf2fb;
	color: var(--set-navy);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.25;
}

.krw-agenda__app small { display: block; font-size: .75rem; font-weight: 400; color: #4f5a75; }

.krw-agenda__app--sito { background: #fff4ea; box-shadow: inset 0 0 0 1.5px var(--set-arancio); }
.krw-agenda__app--sito b { display: block; margin-top: .2rem; font-family: var(--set-mono); color: #a84400; }
.krw-agenda__app--sito em {
	display: inline-block;
	margin-top: .3rem;
	padding: .1rem .4rem;
	border-radius: 4px;
	background: var(--set-arancio);
	color: var(--set-notte);
	font-style: normal;
	font-size: .75rem;
	font-weight: 700;
}

/* Il messaggio WhatsApp arrivato dal sito: entra una volta, poi il blocco arancio in agenda */
.krw-agenda .krw-agenda__messaggio {
	position: absolute;
	left: -1.25rem;
	bottom: 0;
	z-index: 2;
	width: min(80%, 19.5rem);
	padding: .7rem .9rem .8rem;
	border-radius: 14px 14px 14px 4px;
	background: #dcf8c6;
	font-size: .8125rem;
	line-height: 1.4;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

.krw-scuro .krw-agenda .krw-agenda__messaggio { color: #16301b; }
.krw-agenda__messaggio small {
	display: block;
	margin-bottom: .2rem;
	font-family: var(--set-mono);
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #2f5c38;
}

/* La foto di un lavoro fermata sull'agenda, come una polaroid */
.krw-agenda__foto {
	position: absolute;
	right: -1.1rem;
	top: -1.4rem;
	z-index: 2;
	width: 5.75rem;
	padding: .35rem .35rem 1.2rem;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
	transform: rotate(5deg);
}

.krw-agenda__foto svg { display: block; width: 100%; height: auto; }

/* Le sigle: sul bordo sinistro (a meta' fuori) o nell'angolo dell'oggetto */
.krw-agenda .krw-sigla {
	position: absolute;
	z-index: 3;
	width: 1.5rem;
	height: 1.5rem;
	font-size: .75rem;
	box-shadow: 0 0 0 3px #fff;
}

.krw-agenda .krw-sigla--bordo { left: -.75rem; top: 50%; transform: translateY(-50%); }
.krw-agenda .krw-sigla--angolo { right: -.55rem; top: -.55rem; }
.krw-agenda .krw-sigla--nome { position: relative; display: inline-grid; margin-left: .4rem; vertical-align: middle; width: 1.375rem; height: 1.375rem; }
.krw-agenda .krw-agenda__messaggio .krw-sigla--bordo { box-shadow: 0 0 0 3px #dcf8c6; }

@media (prefers-reduced-motion: no-preference) {
	.krw-agenda .krw-agenda__messaggio { animation: krw-arriva .55s var(--set-uscita) .35s both; }
	.krw-agenda__app--sito { animation: krw-arriva .6s var(--set-uscita) 1.05s both; }
}

@keyframes krw-arriva { from { opacity: 0; transform: translateY(.6rem) scale(.97); } }

/* Nella chiusura: l'agenda piccola col prossimo passo */
.krw-agenda--piccola { justify-self: end; width: min(100%, 26rem); padding: 0; }
.krw-agenda--piccola .krw-agenda__foglio { box-shadow: none; padding-bottom: 0; }
.krw-agenda--piccola .krw-agenda__testa { border-bottom-width: 1.5px; }
.krw-agenda .krw-agenda__prossimo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin: .75rem 1rem 1rem;
	padding: .7rem .85rem;
	border-radius: 8px;
	background: #fff4ea;
	box-shadow: inset 0 0 0 1.5px var(--set-arancio);
	font-weight: 700;
	font-size: .9375rem;
}

.krw-scuro .krw-agenda .krw-agenda__prossimo { color: var(--set-navy); }
.krw-agenda__prossimo small { display: block; font-weight: 400; font-size: .8125rem; color: var(--set-tenue); }
.krw-agenda__prossimo b { font-family: var(--set-mono); font-size: .875rem; color: #a84400; }

/* ---------- la scheda colore (collaudo) ----------
   Sei ciocche, una per domanda: diventano del colore dei capelli quando la risposta e' si'.
   Solo CSS, con :has(); lo script del collaudo resta quello di tutte le pagine. */

.krw-scheda-colore { border-radius: 12px; }

.krw-scuro .krw-scheda-colore .krw-scheda-colore__chi,
.krw-scheda-colore__chi {
	display: flex;
	gap: .75rem;
	align-items: baseline;
	margin: 0;
	padding: .75rem 1.5rem;
	border-bottom: 1px solid var(--set-bordo);
	color: var(--set-navy);
	font-weight: 600;
}

.krw-scheda-colore__chi span {
	font-family: var(--set-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--set-tenue);
}

.krw-scheda-colore__ciocche {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .625rem;
	padding: 1rem 1.5rem 1.6rem;
	border-bottom: 1px solid var(--set-bordo);
}

.krw-ciocca {
	--c: #7d5230;
	position: relative;
	height: 3.5rem;
	border-radius: 3px 3px 12px 12px;
	background: #f2f4f8;
	box-shadow: inset 0 0 0 1px var(--set-bordo);
	transition: background-color .45s var(--set-uscita), box-shadow .45s var(--set-uscita);
}

.krw-ciocca::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: .45rem;
	border-radius: 3px 3px 0 0;
	background: var(--set-navy);
}

.krw-scheda-colore .krw-ciocca .krw-sigla {
	position: absolute;
	left: 50%;
	bottom: -.75rem;
	width: 1.5rem;
	height: 1.5rem;
	font-size: .75rem;
	transform: translateX(-50%);
	box-shadow: 0 0 0 3px #fff;
}

.krw-ciocca--a { --c: #3b2a20; }
.krw-ciocca--b { --c: #5a3a24; }
.krw-ciocca--c { --c: #7d5230; }
.krw-ciocca--d { --c: #a0703f; }
.krw-ciocca--e { --c: #c49a5e; }
.krw-ciocca--f { --c: #e0c893; }

.krw-scheda-colore:has(input[name="p-a"][value="1"]:checked) .krw-ciocca--a,
.krw-scheda-colore:has(input[name="p-b"][value="1"]:checked) .krw-ciocca--b,
.krw-scheda-colore:has(input[name="p-c"][value="1"]:checked) .krw-ciocca--c,
.krw-scheda-colore:has(input[name="p-d"][value="1"]:checked) .krw-ciocca--d,
.krw-scheda-colore:has(input[name="p-e"][value="1"]:checked) .krw-ciocca--e,
.krw-scheda-colore:has(input[name="p-f"][value="1"]:checked) .krw-ciocca--f {
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

@media (max-width: 960px) {
	.krw-agenda--piccola { justify-self: start; }
}

@media (max-width: 640px) {
	.krw-agenda { padding-top: 1.5rem; }
	.krw-agenda__griglia { grid-template-columns: 2.35rem repeat(3, minmax(0, 1fr)); column-gap: .25rem; margin: 0 .6rem; }
	.krw-agenda__app { padding: .25rem .3rem; }
	.krw-agenda .krw-agenda__messaggio { left: -.4rem; width: 86%; }
	.krw-agenda__foto { right: -.4rem; width: 4.75rem; }
	.krw-scheda-colore__ciocche { gap: .4rem; padding: .9rem 1rem 1.5rem; }
}