/* ==========================================================================
   Sfalsato — stile editoriale tecnico di nichidesign.it
   Riprende 1:1 il sito progettato in Lovable («nichidesign Lovable 2»).
   ========================================================================== */

/* ——— Token ——— */
:root {
	/* palette Ink wash, la stessa del portfolio PDF: niente nero */
	--sf-sfondo: #ffffff;       /* Carta */
	--sf-velo: #d6e4e4;
	--sf-cenere: #cbcbcb;
	--sf-cenere-30: #efefef;
	--sf-inchiostro: #4a4a4a;   /* tutto il testo */
	--sf-secondario: #4e5f72;   /* testo secondario = Polvere profondo */
	--sf-superficie: var(--sf-cenere-30);
	--sf-filetto: var(--sf-cenere);
	--sf-polvere: #6d8196;
	--sf-polvere-profondo: #4e5f72;
	--sf-teal: #1a6b6b;
	--sf-teal-profondo: #0f4a4a;
	--sf-errore: #b91c1c;
	/* ruoli che nel tema scuro cambiano (vedi «Tema scuro» in fondo) */
	--sf-carta: #ffffff;                          /* schede e moduli */
	--sf-su-teal: #ffffff;                        /* testo e icone sui pieni teal */
	--sf-lavagna: #4a4a4a;                        /* fondo del blocco di codice */
	--sf-vetro: rgb(255 255 255 / 0.95);          /* barre traslucide */
	--sf-velo-vetro: rgb(214 228 228 / 0.88);     /* velo sulle foto dei progetti */
	--sf-puntini: rgb(255 255 255 / 0.9);         /* puntini della tela in Home */
	color-scheme: light;
	/* caratteri */
	--sf-titoli: "Barlow", ui-sans-serif, system-ui, sans-serif;
	--sf-testo: "Inter", ui-sans-serif, system-ui, sans-serif;
	--sf-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	/* misure */
	--sf-larghezza: 1280px;
	--sf-margine: 24px;
	--sf-header: 75px;   /* altezza reale dell'header, bordo compreso */
}
@media (min-width: 1024px) {
	:root { --sf-margine: 40px; }
}

/* ——— Base ——— */
html { scroll-behavior: smooth; }
body {
	background: var(--sf-sfondo);
	color: var(--sf-inchiostro);
	font-family: var(--sf-testo);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sf-titoli);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var(--sf-inchiostro);
	margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
::selection { background: var(--sf-teal); color: var(--sf-su-teal); }

.sf-contenitore {
	width: 100%;
	max-width: var(--sf-larghezza);
	margin-inline: auto;
	padding-inline: var(--sf-margine);
}
.sf-mono { font-family: var(--sf-mono); text-transform: uppercase; letter-spacing: 0.1em; }
@media (max-width: 767px) { .sf-solo-desktop { display: none !important; } }

/* ——— Header ——— */
.sf-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sf-sfondo);
	border-bottom: 1px solid var(--sf-filetto);
}
.admin-bar .sf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sf-header { top: 46px; } }
/* sotto i 600 px la barra di WordPress scorre via con la pagina: l'header deve restare attaccato al bordo */
@media (max-width: 600px) { .admin-bar .sf-header { top: 0; } }
@media (max-width: 767px) { :root { --sf-header: 73px; } }
.sf-header__riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 16px;
}
.sf-marchio { display: flex; align-items: center; gap: 10px; }
.sf-marchio img { width: 36px; height: 36px; object-fit: contain; }
.sf-marchio span { font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 639px) { .sf-marchio span { display: none; } }

.sf-menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.sf-menu a {
	font-family: var(--sf-testo);
	font-weight: 500;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sf-inchiostro);
	transition: color 0.2s ease;
}
.sf-menu a:hover,
.sf-menu .current-menu-item > a,
.sf-menu .current_page_item > a,
.sf-menu .current-menu-ancestor > a { color: var(--sf-teal); }
.sf-nav { display: none; }
/* il menu completo entra solo quando c'è spazio: sotto i 1100 px resta il panino */
@media (min-width: 1100px) { .sf-nav { display: block; } }

.sf-header__azioni { display: flex; align-items: center; gap: 8px; }
.sf-panino {
	display: grid;
	place-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--sf-filetto);
	border-radius: 0;
	cursor: pointer;
}
.sf-panino span { display: block; width: 16px; height: 1.5px; background: var(--sf-inchiostro); transition: transform 0.2s, opacity 0.2s; }
.sf-panino[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sf-panino[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sf-panino[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (min-width: 1100px) { .sf-panino { display: none; } }

.sf-menu-mobile { border-top: 1px solid var(--sf-filetto); background: var(--sf-sfondo); }
.sf-menu-mobile .sf-contenitore { display: flex; flex-direction: column; gap: 4px; padding-block: 16px; }
.sf-menu-mobile .sf-menu { flex-direction: column; align-items: stretch; gap: 4px; }
.sf-menu-mobile .sf-menu a { display: block; padding: 12px 8px; }
.sf-menu-mobile .btn-primary { margin-top: 12px; }
@media (min-width: 1100px) { .sf-menu-mobile { display: none !important; } }
/* tra 768 e 1099 px il bottone contatti sta già nell'header: nel menu a panino non serve */
@media (min-width: 768px) { .sf-menu-mobile .btn-primary { display: none; } }

/* ——— Intestazione di pagina ——— */
.sf-intestazione {
	position: relative;
	overflow: hidden;
	height: 160px;
	background: var(--sf-superficie);
	border-bottom: 1px solid var(--sf-filetto);
}
.sf-intestazione__testo { display: flex; height: 100%; flex-direction: column; justify-content: center; }
.sf-intestazione__etichetta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sf-teal);
}
.sf-intestazione__etichetta span { width: 6px; height: 6px; border-radius: 50%; background: var(--sf-teal); }
.sf-intestazione__briciole { margin-top: 12px; font-size: 0.75rem; color: var(--sf-secondario); }
.sf-intestazione__briciole a { color: var(--sf-secondario); transition: color 0.2s; }
.sf-intestazione__briciole a:hover { color: var(--sf-teal); }
.sf-intestazione__briciole span[aria-hidden] { margin-inline: 0.5rem; }
.sf-intestazione__filigrana {
	position: absolute;
	right: 40px;
	bottom: -24px;
	pointer-events: none;
	font-family: var(--sf-titoli);
	font-weight: 700;
	font-size: clamp(4.5rem, 11.5vw, 9.5rem);
	line-height: 1;
	color: var(--sf-inchiostro);
	opacity: 0.06;
	filter: blur(4px);
	white-space: nowrap;
}
@media (max-width: 767px) {
	.sf-intestazione { height: 130px; }
	.sf-intestazione__filigrana { font-size: clamp(3.25rem, 17vw, 5.5rem); bottom: -12px; right: 16px; }
}

/* ——— Footer (identico a Lovable) ——— */
.sf-footer { border-top: 1px solid var(--sf-filetto); background: var(--sf-cenere-30); }
.sf-footer > .sf-contenitore { padding-block: 56px; }
.sf-footer__griglia { display: grid; gap: 40px; }
@media (min-width: 768px) {
	.sf-footer__griglia { grid-template-columns: 5fr 4fr 3fr; }
}
.sf-footer__marchio { display: flex; align-items: center; gap: 10px; }
.sf-footer__marchio img { width: 36px; height: 36px; object-fit: contain; border-radius: 2px; }
.sf-footer__nome { font-size: 0.875rem; font-weight: 500; }
.sf-footer__ruolo { font-size: 0.75rem; color: var(--sf-secondario); }
.sf-footer__descrizione { margin-top: 12px; max-width: 280px; font-size: 0.85rem; line-height: 1.7; color: var(--sf-secondario); }
.sf-footer__luogo { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--sf-secondario); }
.sf-footer__colonna h3 {
	font-family: var(--sf-mono);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sf-secondario);
}
.sf-footer__colonna ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 0.875rem; }
.sf-footer__colonna a { display: inline-flex; align-items: center; gap: 8px; color: var(--sf-inchiostro); transition: color 0.2s; }
.sf-footer__colonna a:hover { color: var(--sf-teal); }
.sf-footer__colonna a.sf-footer__secondario { color: var(--sf-secondario); }
.sf-footer__base {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--sf-filetto);
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 0.75rem;
	color: var(--sf-secondario);
}
@media (min-width: 640px) {
	.sf-footer__base { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   Bottoni — effetto BLINDATO (21/9/2026): colore che scorre da sinistra,
   sollevamento in diagonale con il blocco sfalsato, freccia che avanza.
   ========================================================================== */
.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 2px;
	font-family: var(--sf-testo);
	font-weight: 600;
	font-size: 0.8rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
	background-color: var(--btn-fondo);
	background-image: linear-gradient(var(--btn-scorre), var(--btn-scorre));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: var(--btn-testo);
	box-shadow: 0 0 0 0 var(--btn-blocco);
	transition:
		background-size 0.5s cubic-bezier(0.7, 0, 0.2, 1),
		color 0.3s ease 0.1s,
		border-color 0.3s ease,
		transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1),
		box-shadow 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
:is(.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro) svg {
	transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
:is(.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro):is(:hover, :focus-visible) {
	background-size: 100% 100%;
	color: var(--btn-testo-hover);
	transform: translate(-4px, -4px);
	box-shadow: 8px 8px 0 0 var(--btn-blocco);
}
:is(.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro):is(:hover, :focus-visible) svg {
	transform: translateX(4px);
}
:is(.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro):active {
	transform: translate(0, 0);
	box-shadow: 0 0 0 0 var(--btn-blocco);
	transition-duration: 0.1s;
}
:is(.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro):focus-visible {
	outline: 2px solid var(--btn-blocco);
	outline-offset: 4px;
}
/* Principale: teal, scorre il teal profondo, blocco Velo */
.btn-primary {
	--btn-fondo: var(--sf-teal);
	--btn-scorre: var(--sf-teal-profondo);
	--btn-testo: var(--sf-su-teal);
	--btn-testo-hover: var(--sf-su-teal);
	--btn-blocco: var(--sf-velo);
	border: none;
}
/* Secondario: bordo inchiostro; si riempie di Velo, testo e bordo teal, blocco Cenere */
.btn-secondary {
	--btn-fondo: transparent;
	--btn-scorre: var(--sf-velo);
	--btn-testo: var(--sf-inchiostro);
	--btn-testo-hover: var(--sf-teal);
	--btn-blocco: var(--sf-cenere);
	border: 1px solid var(--sf-inchiostro);
}
.btn-secondary:is(:hover, :focus-visible) { border-color: var(--sf-teal); }
/* Sui pannelli scuri */
.btn-chiaro {
	--btn-fondo: #fff;
	--btn-scorre: #d6e4e4;
	--btn-testo: #4a4a4a;
	--btn-testo-hover: #4a4a4a;
	--btn-blocco: rgb(255 255 255 / 0.35);
	border: none;
}
.btn-bordo-chiaro {
	--btn-fondo: transparent;
	--btn-scorre: #fff;
	--btn-testo: #fff;
	--btn-testo-hover: #4a4a4a;
	--btn-blocco: rgb(255 255 255 / 0.35);
	border: 1px solid #fff;
}
@media (prefers-reduced-motion: reduce) {
	.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro { transition: background-size 0.01s, color 0.01s; }
	:is(.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro):is(:hover, :focus-visible) { transform: none; box-shadow: none; }
	:is(.btn-primary, .btn-secondary, .btn-chiaro, .btn-bordo-chiaro):is(:hover, :focus-visible) svg { transform: none; }
}

/* ==========================================================================
   Grammatica del portfolio PDF — classi da usare nelle pagine Elementor
   ========================================================================== */

/* Titolo a due righe: .sf-titolo (pulito) · .sf-titolo--filetti (filetto teal + puntini, solo per l'apertura) */
.sf-titolo { font-family: var(--sf-titoli); text-transform: uppercase; color: var(--sf-inchiostro); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sf-titolo > * { display: block; line-height: 1.15; }
.sf-titolo > :first-child { font-weight: 600; letter-spacing: 0.04em; }
.sf-titolo > :not(:first-child) { font-weight: 400; letter-spacing: 0.08em; }
.sf-titolo--apertura { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sf-titolo--filetti { border-top: 1.5px solid var(--sf-teal); }
.sf-titolo--filetti > * { padding-block: 0.18em; border-bottom: 1.5px dotted var(--sf-polvere); }

.sf-occhiello { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sf-teal); }
.sf-codice { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; }
.sf-etichetta { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; }
.sf-didascalia > * { display: block; }
.sf-didascalia__etichetta { margin-top: 4px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sf-didascalia__sotto { font-weight: 300; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* Schede numeriche col filetto teal */
.sf-numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.sf-numeri li { border-top: 6px solid var(--sf-teal); background: var(--sf-cenere-30); padding: 24px 8px; text-align: center; }
.sf-numeri--bianche li { background: var(--sf-carta); }
.sf-numeri__etichetta { font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; }
.sf-numeri__valore { margin-top: 12px; font-family: var(--sf-titoli); font-weight: 600; font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; }

/* Barra dei metadati con icone e divisori */
.sf-meta { display: grid; grid-template-columns: 1fr; border-block: 1px solid var(--sf-cenere); margin: 0; }
.sf-meta > div { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; }
.sf-meta > div + div { border-top: 1px solid var(--sf-cenere); }
.sf-meta svg { flex-shrink: 0; margin-top: 2px; }
.sf-meta dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sf-secondario); }
.sf-meta dd { margin: 2px 0 0; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
@media (min-width: 640px) {
	.sf-meta { grid-template-columns: repeat(var(--colonne, 3), 1fr); }
	.sf-meta > div { padding-inline: 16px; }
	.sf-meta > div:first-child { padding-left: 0; }
	.sf-meta > div + div { border-top: none; border-left: 1px solid var(--sf-cenere); }
}

/* Elenco a filetti puntinati */
.sf-puntini { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .sf-puntini--4 { grid-template-columns: repeat(4, 1fr); } }
.sf-puntini li { border-bottom: 1px dotted var(--sf-polvere); padding: 10px 0; font-size: 0.9rem; }

/* Barra teal sul bordo della sezione */
.sf-barra-bordo { position: relative; }
.sf-barra-bordo::before { content: ""; position: absolute; top: 18%; bottom: 18%; left: 0; width: 8px; background: var(--sf-teal); }

/* Bordo che si disegna in senso orario (alto, destra, basso, sinistra) */
.bordo-orario { position: relative; }
.bordo-orario .bo-lato { position: absolute; background: var(--sf-teal); pointer-events: none; transition: width 0.15s ease, height 0.15s ease; }
.bordo-orario .bo-alto { top: 0; left: 0; height: 1px; width: 0; }
.bordo-orario .bo-destra { top: 0; right: 0; width: 1px; height: 0; }
.bordo-orario .bo-basso { bottom: 0; right: 0; height: 1px; width: 0; }
.bordo-orario .bo-sinistra { bottom: 0; left: 0; width: 1px; height: 0; }
.bordo-orario:is(:hover, :focus-visible) .bo-alto { width: 100%; transition: width 0.3s linear 0s; }
.bordo-orario:is(:hover, :focus-visible) .bo-destra { height: 100%; transition: height 0.3s linear 0.3s; }
.bordo-orario:is(:hover, :focus-visible) .bo-basso { width: 100%; transition: width 0.3s linear 0.6s; }
.bordo-orario:is(:hover, :focus-visible) .bo-sinistra { height: 100%; transition: height 0.3s linear 0.9s; }
@media (prefers-reduced-motion: reduce) { .bordo-orario .bo-lato { transition: none !important; } }

/* Pannello di chiusura con il blocco che sporge */
.sf-chiusura { padding-block: 64px; }
@media (min-width: 1024px) { .sf-chiusura { padding-block: 80px; } }
.sf-chiusura__cornice { position: relative; }
.sf-chiusura__blocco { display: none; position: absolute; top: 14%; bottom: 14%; left: -24px; right: 45%; background: var(--sf-polvere); }
@media (min-width: 768px) { .sf-chiusura__blocco { display: block; } }
.sf-chiusura__pannello { position: relative; overflow: hidden; background: var(--sf-polvere-profondo); padding: 56px 32px; }
@media (min-width: 768px) { .sf-chiusura__pannello { margin-left: 80px; padding: 64px 56px; } }
.sf-chiusura__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; mix-blend-mode: multiply; filter: grayscale(1); pointer-events: none; }
.sf-chiusura__titolo { position: relative; font-family: var(--sf-titoli); text-transform: uppercase; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.15; color: #fff; }
.sf-chiusura__titolo span { display: block; }
.sf-chiusura__titolo span:first-child { font-weight: 600; letter-spacing: 0.04em; }
.sf-chiusura__titolo span + span { font-weight: 400; letter-spacing: 0.06em; }
.sf-chiusura__testo { position: relative; margin-top: 20px; max-width: 36rem; color: rgb(255 255 255 / 0.9); }
.sf-chiusura__azioni { position: relative; margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Superfici */
.sf-fondo-cenere { background: var(--sf-cenere-30); }
.sf-fondo-scuro { background: var(--sf-polvere-profondo); color: #fff; }

/* ==========================================================================
   Sezioni e componenti delle pagine
   ========================================================================== */
.sf-sezione { padding-block: 64px; }
@media (min-width: 1024px) { .sf-sezione { padding-block: 80px; } }
.sf-sezione--filetto { border-top: 1px solid var(--sf-filetto); }
.sf-testo-grande { font-size: 1.125rem; line-height: 1.65; }
.sf-testo-secondario { color: var(--sf-secondario); line-height: 1.65; }
.sf-link-freccia {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sf-teal);
}
.sf-link-freccia:hover { text-decoration: underline; }
.sf-link-freccia svg { transition: transform 0.25s; }
.sf-link-freccia:hover svg { transform: translateX(3px); }

/* Due colonne 7/5 con i numeri in basso a destra */
.sf-griglia-7-5 { display: grid; gap: 48px; }
@media (min-width: 1024px) {
	.sf-griglia-7-5 { grid-template-columns: 7fr 5fr; gap: 64px; }
	.sf-griglia-7-5 > :last-child { align-self: end; }
}

/* ——— Hero della home: foto a destra sfumata, testo a sinistra ——— */
.sf-hero { position: relative; overflow: hidden; background: var(--sf-sfondo); }
@media (min-width: 768px) { .sf-hero { min-height: 90vh; } }
.sf-hero__foto-mobile { height: 40vh; }
.sf-hero__foto-mobile img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .sf-hero__foto-mobile { display: none; } }
.sf-hero__foto { display: none; }
@media (min-width: 768px) {
	.sf-hero__foto { display: block; position: absolute; inset: 0 0 0 40%; pointer-events: none; }
	.sf-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
	.sf-hero__foto::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 220px;
		background: linear-gradient(to right, var(--sf-sfondo) 0%, color-mix(in srgb, var(--sf-sfondo) 85%, transparent) 30%, transparent 100%);
	}
}
.sf-hero__testo { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 48px 24px; }
@media (min-width: 768px) { .sf-hero__testo { width: 55%; min-height: 90vh; padding: 0 0 0 8%; } }
.sf-hero__titolo {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1.5px solid var(--sf-teal);
	font-family: var(--sf-titoli);
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.05;
	text-transform: uppercase;
}
.sf-hero__titolo span { display: block; }
.sf-hero__titolo span:first-child { font-weight: 600; letter-spacing: 0.02em; }
.sf-hero__titolo span + span { font-weight: 400; letter-spacing: 0.04em; }
.sf-hero__intro { margin-top: 24px; max-width: 420px; color: var(--sf-secondario); }
.sf-hero__intro strong { font-weight: 400; color: var(--sf-inchiostro); }
.sf-hero__azioni { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.sf-hero__settori { margin-top: 32px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sf-secondario); }

/* ——— Schede dei servizi (con il bordo in senso orario) ——— */
.sf-schede-servizi { display: grid; gap: 16px; list-style: none; margin: 48px 0 0; padding: 0; }
@media (min-width: 640px) { .sf-schede-servizi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sf-schede-servizi { grid-template-columns: repeat(4, 1fr); } }
.sf-scheda-servizio { display: flex; height: 100%; flex-direction: column; border-top: 6px solid var(--sf-teal); background: var(--sf-cenere-30); padding: 24px; }
.sf-scheda-servizio .sf-codice { color: var(--sf-teal); }
.sf-scheda-servizio h3 { margin-top: 8px; font-size: 1.25rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
.sf-scheda-servizio p { margin-top: 12px; flex: 1; font-size: 0.9375rem; line-height: 1.6; }
.sf-scheda-servizio .sf-link-freccia { margin-top: 20px; font-size: 0.72rem; }

/* ——— Card progetto con la didascalia a tre livelli ——— */
.sf-progetti { display: grid; gap: 48px 24px; margin-top: 48px; }
@media (min-width: 640px) { .sf-progetti { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sf-progetti { grid-template-columns: repeat(3, 1fr); } }
.sf-progetto a { display: block; }
.sf-progetto__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sf-velo); }
.sf-progetto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.sf-progetto a:hover .sf-progetto__foto img { transform: scale(1.04); }
.sf-progetto .sf-didascalia { margin-top: 12px; transition: color 0.2s; }
.sf-progetto a:hover .sf-didascalia { color: var(--sf-teal); }
.sf-progetto__desc { margin-top: 12px; font-size: 0.9375rem; line-height: 1.6; }
.sf-riga-link { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--sf-cenere); text-align: right; }

/* Elementor: i widget HTML delle pagine Sfalsato non devono aggiungere margini */
.sf-pagina .elementor-widget-html { margin-bottom: 0 !important; }
.sf-pagina .e-con { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; }

/* Elementor carica dopo e impone img { height: auto }: le foto che devono riempire il riquadro vincono così */
.sf-hero__foto-mobile { overflow: hidden; }
.sf-pagina .sf-hero__foto-mobile img,
.sf-pagina .sf-hero__foto img,
.sf-pagina .sf-progetto__foto img,
.sf-pagina .sf-chiusura__foto { height: 100%; max-width: none; }

/* ——— Profilo ——— */
.sf-competenze { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 768px) { .sf-competenze { grid-template-columns: repeat(2, 1fr); } }
.sf-competenza { border-top: 6px solid var(--sf-teal); background: var(--sf-carta); padding: 28px; }
.sf-competenza__testa { display: flex; align-items: center; justify-content: space-between; }
.sf-competenza .sf-codice { color: var(--sf-teal); }
.sf-competenza h3 { margin-top: 8px; font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sf-competenza .sf-puntini { margin-top: 16px; }

.sf-strumenti { background: var(--sf-polvere-profondo); color: #fff; }
.sf-strumenti .sf-occhiello { color: #fff; }
.sf-strumenti h2 { margin-top: 12px; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; text-transform: uppercase; }
.sf-strumenti h2 span { display: block; }
.sf-strumenti h2 span:first-child { font-weight: 600; letter-spacing: 0.04em; }
.sf-strumenti h2 span + span { font-weight: 400; letter-spacing: 0.08em; }
.sf-strumenti__righe { margin-top: 40px; border-top: 1px solid rgb(255 255 255 / 0.25); }
.sf-strumenti__riga { display: grid; gap: 12px; padding-block: 24px; border-bottom: 1px solid rgb(255 255 255 / 0.25); }
@media (min-width: 768px) { .sf-strumenti__riga { grid-template-columns: 3fr 9fr; align-items: center; } }
.sf-strumenti__riga p:first-child { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; }
.sf-strumenti__riga p + p { font-size: 1.05rem; color: rgb(255 255 255 / 0.9); }

/* Linea del tempo: si disegna quando entra nello schermo (classe is-visible messa dal JS) */
.sf-timeline { position: relative; margin-top: 48px; }
.sf-timeline__linea { position: absolute; left: 11px; top: 0; width: 1px; height: 0; background: var(--sf-cenere); transition: height 1.2s ease-out; }
.sf-timeline.is-visible .sf-timeline__linea { height: 100%; }
.sf-timeline__voce { position: relative; padding-left: 44px; padding-bottom: 48px; }
.sf-timeline__voce:last-child { padding-bottom: 0; }
.sf-timeline__punto {
	position: absolute; left: 0; top: 2px; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--sf-carta); border: 2px solid var(--sf-teal);
	opacity: 0; transform: scale(0.6);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	transition-delay: var(--ritardo);
}
.sf-timeline__punto::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-teal); }
.sf-timeline.is-visible .sf-timeline__punto { opacity: 1; transform: scale(1); }
.sf-timeline__voce > :not(.sf-timeline__punto) {
	opacity: 0; transform: translateY(16px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	transition-delay: var(--ritardo);
}
.sf-timeline.is-visible .sf-timeline__voce > :not(.sf-timeline__punto) { opacity: 1; transform: none; }
.sf-timeline__voce .sf-codice { color: var(--sf-teal); margin-bottom: 8px; }
.sf-timeline__voce h3 { margin-bottom: 8px; font-size: clamp(1.1rem, 2vw, 1.375rem); text-transform: uppercase; letter-spacing: 0.04em; }
.sf-timeline__voce p:last-child { max-width: 520px; font-size: 0.9375rem; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) {
	.sf-timeline__linea { height: 100%; transition: none; }
	.sf-timeline__punto, .sf-timeline__voce > :not(.sf-timeline__punto) { opacity: 1; transform: none; transition: none; }
}

.sf-certificazioni { display: grid; gap: 16px; list-style: none; margin: 48px 0 0; padding: 0; }
@media (min-width: 768px) { .sf-certificazioni { grid-template-columns: repeat(3, 1fr); } }
.sf-certificazioni li { display: flex; align-items: flex-start; gap: 16px; border-top: 6px solid var(--sf-teal); background: var(--sf-carta); padding: 24px; }
.sf-pagina .sf-certificazioni img { width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.sf-certificazioni p { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sf-secondario); }
.sf-certificazioni h3 { margin-top: 4px; font-family: var(--sf-testo); font-size: 0.875rem; font-weight: 600; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.06em; }

/* ——— Servizi ——— */
.sf-servizio { border-top: 1px solid var(--sf-filetto); scroll-margin-top: 96px; }
.sf-servizio--alterno { background: var(--sf-cenere-30); }
.sf-servizio__griglia { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) {
	.sf-servizio__griglia { grid-template-columns: 1fr 1fr; gap: 64px; }
	.sf-servizio--immagine-sinistra .sf-servizio__testo { order: 2; }
}
.sf-servizio__testo .sf-titolo { margin-top: 12px; }
.sf-servizio__testo > p { margin-top: 24px; line-height: 1.65; }
.sf-servizio__testo .sf-meta { margin-top: 32px; }
.sf-servizio__foto { overflow: hidden; background: var(--sf-velo); }
.sf-pagina .sf-servizio__foto img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
.sf-servizio figcaption { margin-top: 12px; }
.sf-servizio__consegne { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--sf-cenere); }
.sf-servizio__consegne .sf-puntini { margin-top: 16px; }

.sf-modi { display: grid; gap: 40px; list-style: none; margin: 48px 0 0; padding: 32px 0 0; border-top: 1px solid var(--sf-cenere); }
@media (min-width: 768px) { .sf-modi { grid-template-columns: repeat(3, 1fr); } }
.sf-modi p:last-child { margin-top: 16px; font-size: 0.9375rem; line-height: 1.65; }

/* ——— Servizi (rivista il 22/9/2026) ——— */
/* indice dei quattro servizi nell'apertura */
.sf-indice-servizi .sf-etichetta { padding-bottom: 12px; border-bottom: 1px solid var(--sf-cenere); color: var(--sf-secondario); }
.sf-indice-servizi ul { list-style: none; margin: 0; padding: 0; }
.sf-indice-servizi a {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px dotted var(--sf-polvere);
	transition: padding 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.sf-indice-servizi .sf-codice { grid-row: span 2; color: var(--sf-teal); }
.sf-indice-servizi__nome { font-family: var(--sf-titoli); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em; transition: color 0.2s; }
.sf-indice-servizi__sotto { grid-column: 2; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sf-secondario); }
.sf-indice-servizi__freccia { grid-column: 3; grid-row: 1 / span 2; color: var(--sf-polvere); transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), color 0.2s; }
.sf-indice-servizi a:is(:hover, :focus-visible) { padding-left: 8px; }
.sf-indice-servizi a:is(:hover, :focus-visible) .sf-indice-servizi__nome,
.sf-indice-servizi a:is(:hover, :focus-visible) .sf-indice-servizi__freccia { color: var(--sf-teal); }
.sf-indice-servizi a:is(:hover, :focus-visible) .sf-indice-servizi__freccia { transform: translateX(4px) rotate(90deg); }
.sf-indice-servizi a:focus-visible { outline: 2px solid var(--sf-teal); outline-offset: 2px; }
/* «Cosa consegno» come etichette dentro la colonna del testo */
.sf-consegne { margin-top: 28px; }
.sf-consegne .sf-etichetta { color: var(--sf-secondario); }
.sf-consegne__lista { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.sf-consegne__lista li { padding: 6px 12px; border: 1px solid var(--sf-cenere); border-radius: 2px; background: var(--sf-carta); font-size: 0.8rem; color: var(--sf-inchiostro); }
.sf-servizio--alterno .sf-consegne__lista li { background: var(--sf-carta); }
/* come collaboriamo: tre schede con icona e bordo che si disegna */
.sf-modi { gap: 16px; padding-top: 0; border-top: 0; }
.sf-modo { position: relative; padding: 28px 24px 32px; background: var(--sf-cenere-30); border-top: 6px solid var(--sf-teal); }
.sf-modo__icona { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; background: var(--sf-teal); color: var(--sf-su-teal); }
.sf-modo .sf-didascalia__etichetta { text-decoration: none; font-family: var(--sf-titoli); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.03em; }

/* ——— Progetti: filtri ——— */
.sf-filtri { position: sticky; top: var(--sf-header); z-index: 10; border-bottom: 1px solid var(--sf-filetto); background: var(--sf-vetro); backdrop-filter: blur(6px); }
.admin-bar .sf-filtri { top: calc(var(--sf-header) + 32px); }
@media (max-width: 782px) { .admin-bar .sf-filtri { top: calc(var(--sf-header) + 46px); } }
@media (max-width: 600px) { .admin-bar .sf-filtri { top: var(--sf-header); } }
.sf-filtri__lista { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 4px; }
.sf-filtri button {
	padding: 16px 0;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	font-family: var(--sf-testo);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sf-secondario);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.sf-filtri button:hover { color: var(--sf-inchiostro); background: none; }
.sf-filtri button[aria-selected="true"] { color: var(--sf-teal); border-bottom-color: var(--sf-teal); }
.sf-progetto[hidden] { display: none; }
.sf-progetti--pagina { margin-top: 0; }

/* ——— Contatti (rifatta il 22/9/2026) ——— */
.sf-contatti__griglia { display: grid; gap: 48px; }
/* su telefono: titolo → modulo → recapiti; su computer il modulo sta a destra e resta visibile */
@media (min-width: 1024px) {
	.sf-contatti__griglia { grid-template-columns: 5fr 6fr; grid-template-areas: "apertura modulo" "info modulo"; column-gap: 72px; row-gap: 0; align-items: start; }
	.sf-contatti__apertura { grid-area: apertura; }
	.sf-contatti__info { grid-area: info; }
	.sf-contatti__modulo { grid-area: modulo; position: sticky; top: calc(var(--sf-header) + 24px); }
}
.sf-contatti__intro { margin-top: 28px; max-width: 520px; }
.sf-contatti__etichetta { margin-top: 48px; padding-bottom: 12px; border-bottom: 1px solid var(--sf-cenere); color: var(--sf-secondario); }
/* recapiti in righe: icona, nome, valore, azione */
.sf-recapiti { list-style: none; margin: 0; padding: 0; }
.sf-recapito { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px dotted var(--sf-polvere); }
.sf-recapito__icona { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--sf-velo); color: var(--sf-teal); transition: background 0.3s, color 0.3s; }
.sf-recapito__testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-recapito__nome { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sf-secondario); }
.sf-recapito__valore { font-size: 1rem; color: var(--sf-inchiostro); overflow-wrap: anywhere; }
/* tutta la riga è cliccabile (il link si allarga sulla riga), tranne il pulsante Copia che sta sopra */
.sf-recapito a.sf-recapito__valore::after { content: ""; position: absolute; inset: 0; }
.sf-recapito__freccia { color: var(--sf-polvere); transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), color 0.2s; }
.sf-recapito:not(.sf-recapito--fermo):hover .sf-recapito__icona { background: var(--sf-teal); color: var(--sf-su-teal); }
.sf-recapito:not(.sf-recapito--fermo):hover .sf-recapito__valore { color: var(--sf-teal); }
.sf-recapito:hover .sf-recapito__freccia { transform: translate(3px, -3px); color: var(--sf-teal); }
.sf-recapito a.sf-recapito__valore:focus-visible { outline: none; }
.sf-recapito:has(a.sf-recapito__valore:focus-visible) { outline: 2px solid var(--sf-teal); outline-offset: 4px; }
.sf-copia {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid var(--sf-cenere);
	border-radius: 2px;
	background: var(--sf-carta);
	color: var(--sf-inchiostro);
	font-family: var(--sf-testo);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sf-copia:is(:hover, :focus, :active) { background: var(--sf-carta); color: var(--sf-teal); border-color: var(--sf-teal); text-decoration: none; }
.sf-copia:focus-visible { outline: 2px solid var(--sf-teal); outline-offset: 2px; }
.sf-copia svg { display: block; }
.sf-copia__fatto { display: none; }
.sf-copia.is-copiato { background: var(--sf-teal); border-color: var(--sf-teal); color: var(--sf-su-teal); }
.sf-copia.is-copiato:is(:hover, :focus) { background: var(--sf-teal); color: var(--sf-su-teal); }
.sf-copia.is-copiato .sf-copia__icona { display: none; }
.sf-copia.is-copiato .sf-copia__fatto { display: block; }
/* cosa succede dopo */
.sf-passi { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.sf-passi li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px dotted var(--sf-polvere); }
.sf-passi .sf-codice { color: var(--sf-teal); padding-top: 3px; }
.sf-passi p { color: var(--sf-secondario); font-size: 0.95rem; }
.sf-passi strong { font-weight: 600; color: var(--sf-inchiostro); }

/* Modulo Contact Form 7 nello stile Sfalsato */
.sf-modulo { border-top: 6px solid var(--sf-teal); background: var(--sf-carta); padding: 24px; }
@media (min-width: 768px) { .sf-modulo { padding: 32px; } }
.sf-modulo .wpcf7-form { display: grid; gap: 20px; }
.sf-modulo .wpcf7-form > p { margin: 0; }
.sf-modulo__due { display: grid; gap: 20px; }
@media (min-width: 640px) { .sf-modulo__due { grid-template-columns: 1fr 1fr; } }
.sf-modulo label { display: block; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; }
.sf-modulo label .sf-obbligo { color: var(--sf-teal); }
.sf-modulo .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.sf-modulo input[type="text"],
.sf-modulo input[type="email"],
.sf-modulo select,
.sf-modulo textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--sf-cenere);
	border-radius: 0;
	background: var(--sf-carta);
	font-family: var(--sf-testo);
	font-size: 0.875rem;
	color: var(--sf-inchiostro);
	outline: none;
	transition: border-color 0.2s;
}
.sf-modulo :is(input, select, textarea):focus { border-color: var(--sf-teal); }
.sf-modulo .wpcf7-acceptance label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 0.875rem; text-transform: none; letter-spacing: 0; color: var(--sf-secondario); }
.sf-modulo .wpcf7-acceptance a { color: var(--sf-inchiostro); }
.sf-modulo .wpcf7-list-item { margin: 0; }
.sf-modulo .wpcf7-not-valid-tip { margin-top: 6px; font-weight: 400; font-size: 0.8rem; text-transform: none; letter-spacing: 0; color: var(--sf-errore); }
.sf-modulo .wpcf7-response-output { margin: 0 !important; padding: 12px 16px !important; border-width: 1px !important; font-size: 0.875rem; }
.sf-modulo .wpcf7-submit { justify-self: start; border: none; }
.sf-modulo .wpcf7-spinner { margin: 0 0 0 12px; }

/* Hello mette le didascalie in corsivo e in #333: nello stile Sfalsato sono dritte e del colore del testo */
.sf-pagina figcaption { font-style: normal; font-size: inherit; margin-block: 12px 0; color: inherit; }
.sf-modulo .wpcf7-form > br, .sf-modulo__due > br { display: none; }
.sf-modulo { box-shadow: 12px 12px 0 0 var(--sf-velo); border: 1px solid var(--sf-cenere); border-top: 6px solid var(--sf-teal); }
.sf-modulo__titolo { margin-bottom: 24px; font-family: var(--sf-titoli); font-weight: 600; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.sf-facoltativo { margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--sf-secondario); font-size: 0.75rem; }
.sf-modulo ::placeholder { color: var(--sf-polvere); opacity: 1; }
.sf-scelte { margin: 0; padding: 0; border: 0; min-width: 0; }
.sf-scelte legend { padding: 0; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; }
.sf-scelte .wpcf7-form-control-wrap { margin-top: 10px; }
.sf-scelte .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-scelte .wpcf7-list-item { margin: 0; }
.sf-scelte .wpcf7-list-item label { position: relative; display: block; font-weight: 400; font-size: 0.85rem; text-transform: none; letter-spacing: 0; cursor: pointer; }
.sf-scelte input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-scelte .wpcf7-list-item-label { display: block; padding: 9px 14px; border: 1px solid var(--sf-cenere); border-radius: 2px; background: var(--sf-carta); color: var(--sf-inchiostro); transition: border-color 0.2s, background 0.2s, color 0.2s; }
.sf-scelte label:hover .wpcf7-list-item-label { border-color: var(--sf-teal); color: var(--sf-teal); }
.sf-scelte input:checked + .wpcf7-list-item-label { background: var(--sf-teal); border-color: var(--sf-teal); color: var(--sf-su-teal); }
.sf-scelte input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--sf-teal); outline-offset: 2px; }
.sf-modulo .wpcf7 form.sent .wpcf7-response-output { border-color: var(--sf-teal) !important; background: var(--sf-velo); color: var(--sf-inchiostro); }
.sf-modulo .wpcf7 form:is(.invalid, .unaccepted, .failed, .spam) .wpcf7-response-output { border-color: var(--sf-errore) !important; color: var(--sf-errore); }
.sf-modulo .wpcf7-not-valid { border-color: var(--sf-errore) !important; }

/* ——— Scheda del singolo progetto ——— */
.sf-scheda-progetto__sottotitolo { font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sf-scheda-progetto__foto { overflow: hidden; background: var(--sf-velo); }
.sf-pagina .sf-scheda-progetto__foto img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.sf-scheda-progetto__contenuto { margin-top: 40px; }
.sf-scheda-progetto__nav { border-bottom: 1px solid var(--sf-filetto); }
.sf-scheda-progetto__nav-griglia { display: grid; }
@media (min-width: 640px) { .sf-scheda-progetto__nav-griglia { grid-template-columns: 1fr 1fr; } }
.sf-scheda-progetto__vai { display: flex; align-items: center; gap: 16px; padding-block: 32px; transition: color 0.2s; }
.sf-scheda-progetto__vai:hover { color: var(--sf-teal); }
.sf-scheda-progetto__vai svg { flex-shrink: 0; transition: transform 0.25s; }
.sf-scheda-progetto__vai:hover svg { transform: translateX(-4px); }
.sf-scheda-progetto__vai--dx { justify-content: flex-end; text-align: right; }
.sf-scheda-progetto__vai--dx:hover svg { transform: translateX(4px); }
@media (min-width: 640px) {
	.sf-scheda-progetto__vai:first-child { border-right: 1px solid var(--sf-cenere); padding-right: 32px; }
	.sf-scheda-progetto__vai--dx { padding-left: 32px; }
}
@media (max-width: 639px) { .sf-scheda-progetto__vai:first-child { border-bottom: 1px solid var(--sf-cenere); } }

/* Dettagli del progetto (contenuto convertito dalle vecchie schede) */
.sf-dettagli__testo { max-width: 42rem; line-height: 1.7; }
.sf-dettagli__testo p + p { margin-top: 12px; }
.sf-dettagli__testo ul { margin: 12px 0 0; padding-left: 1.2em; }
.sf-dettagli__titolo { margin: 32px 0 12px; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sf-dettagli__testo > .sf-dettagli__titolo:first-child { margin-top: 0; }
.sf-dettagli__punti { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.sf-dettagli__punti li { display: flex; gap: 16px; border-top: 6px solid var(--sf-teal); background: var(--sf-carta); padding: 20px; }
.sf-dettagli__punti .sf-codice { color: var(--sf-teal); }
.sf-dettagli__punti strong { display: block; font-family: var(--sf-titoli); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.sf-dettagli__punti p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.6; }
.sf-galleria { display: grid; gap: 40px 24px; margin-top: 56px; }
@media (min-width: 768px) { .sf-galleria { grid-template-columns: 1fr 1fr; } }
.sf-galleria__foto { overflow: hidden; background: #fff; }
.sf-pagina .sf-galleria__foto img { width: 100%; height: auto; display: block; }
.sf-galleria figure { margin: 0; }

/* ==========================================================================
   Gabbia su misura dei progetti (tavole come nel portfolio PDF)
   ========================================================================== */
.sf-pagina .sf-scheda-progetto__foto--intera img { aspect-ratio: auto; object-fit: contain; }
.sf-tavole { display: grid; gap: 40px; margin-top: 48px; }
.sf-tavola { margin: 0; }
.sf-tavola__immagine { overflow: hidden; background: var(--sf-velo); }
.sf-pagina .sf-tavola__immagine img { display: block; width: 100%; height: auto; }
/* pannello bianco con respiro: per le grafiche disegnate su fondo bianco (palette, font, UI kit) */
.sf-tavola--pannello .sf-tavola__immagine { background: #fff; border: 1px solid var(--sf-cenere); padding: clamp(16px, 4vw, 48px); }
.sf-tavola--pannello-stretto .sf-tavola__immagine { padding: clamp(8px, 2vw, 24px); }
/* due tavole affiancate */
.sf-tavole--due { grid-template-columns: 1fr; }
@media (min-width: 768px) { .sf-tavole--due { grid-template-columns: 1fr 1fr; } }
/* trittico: tre immagini verticali intere, su Velo */
.sf-trittico { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 40px); align-items: end; background: var(--sf-velo); padding: clamp(24px, 5vw, 72px) clamp(16px, 6vw, 96px); }
.sf-pagina .sf-trittico img { display: block; width: 100%; height: auto; }
.sf-trittico + figcaption { margin-top: 12px; }
/* intestazione di una tavola: codice + titolo pulito a due righe */
.sf-gabbia__testa { display: grid; gap: 24px; }
@media (min-width: 1024px) { .sf-gabbia__testa { grid-template-columns: 5fr 7fr; align-items: end; } }
.sf-gabbia__testa > p { max-width: 36rem; line-height: 1.65; color: var(--sf-secondario); }

/* Tavole larghe (palette, font, UI kit): su telefono scorrono in orizzontale a una misura leggibile */
@media (max-width: 767px) {
	.sf-tavola--scorre .sf-tavola__immagine { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
	.sf-pagina .sf-tavola--scorre .sf-tavola__immagine img { width: auto; max-width: none; height: 200px; }
	.sf-pagina .sf-tavola--scorre.sf-tavola--alta .sf-tavola__immagine img { height: 320px; }
	.sf-tavola--scorre figcaption::after {
		content: "Scorri →";
		display: block;
		margin-top: 6px;
		font-size: 0.7rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--sf-teal);
	}
}
.sf-tavole { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .sf-tavole--due { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-tavola { min-width: 0; }

/* Capitolo del progetto: testo e immagine affiancati, alternati */
.sf-capitolo { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) {
	.sf-capitolo { grid-template-columns: 5fr 7fr; gap: 64px; }
	.sf-capitolo--inverso { grid-template-columns: 7fr 5fr; }
	.sf-capitolo--inverso > .sf-capitolo__testo { order: 2; }
}
.sf-capitolo__testo .sf-titolo { margin-top: 12px; }
.sf-capitolo__testo > p:not(.sf-occhiello) { margin-top: 24px; line-height: 1.7; }
.sf-capitolo__testo .sf-puntini { grid-template-columns: 1fr; margin-top: 24px; }
.sf-capitolo figure { margin: 0; min-width: 0; }
.sf-scheda-progetto__foto--intera { border: 1px solid var(--sf-cenere); }
.sf-pagina img.sf-chiusura__foto { height: 100%; max-width: none; }
.sf-scheda-progetto__foto--piccola { background: var(--sf-velo); padding: clamp(24px, 5vw, 64px); display: flex; justify-content: center; }
.sf-pagina .sf-scheda-progetto__foto--piccola img { width: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; }

/* Hello Elementor colora di magenta (#c36) ogni bottone in hover e focus: i bottoni «leggeri» non devono prenderlo */
.sf-filtri button:is(:hover, :focus, :active),
.sf-panino:is(:hover, :focus, :active),
.sf-tema:is(:hover, :focus, :active) {
	background: none;
	background-color: transparent;
	text-decoration: none;
}
.sf-filtri button:is(:hover, :focus) { color: var(--sf-inchiostro); }
.sf-filtri button[aria-selected="true"]:is(:hover, :focus, :active) { color: var(--sf-teal); }
.sf-filtri button:focus-visible { outline: 2px solid var(--sf-teal); outline-offset: 2px; box-shadow: none; }

/* ——— Animazione dei filtri Progetti ——— */
.sf-filtri--animati .sf-filtri__lista { position: relative; }
.sf-filtri--animati button[aria-selected="true"] { border-bottom-color: transparent; }
.sf-filtri__linea {
	position: absolute;
	left: 0;
	height: 2px;
	background: var(--sf-teal);
	pointer-events: none;
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.25, 1), width 0.5s cubic-bezier(0.65, 0, 0.25, 1), top 0.3s ease;
}
.sf-filtri > .sf-contenitore { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-filtri__conta { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sf-secondario); }
.sf-filtri__conta span { display: inline-block; min-width: 2ch; font-family: var(--sf-titoli); font-size: 1.25rem; letter-spacing: 0.02em; color: var(--sf-teal); animation: sf-conta 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sf-conta { from { opacity: 0; transform: translateY(-60%); } to { opacity: 1; transform: none; } }
@media (max-width: 639px) { .sf-filtri__conta { display: none; } }

.sf-progetto.sf-esce { transition: opacity 0.25s ease, transform 0.25s ease; opacity: 0; transform: scale(0.94); }
.sf-progetto.sf-entra { animation: sf-entra-card 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ritardo-entrata, 0ms) both; }
/* entrata: l'immagine si mette a fuoco come un obiettivo */
.sf-progetto.sf-entra .sf-progetto__foto img { animation: sf-fuoco 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--ritardo-entrata, 0ms) both; }
@keyframes sf-fuoco { from { filter: blur(14px); transform: scale(1.08); opacity: 0.4; } to { filter: blur(0); transform: scale(1); opacity: 1; } }
@keyframes sf-entra-card { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.sf-filtri__linea, .sf-filtri__conta span { transition: none; animation: none; }
}
/* tre tavole affiancate */
@media (min-width: 768px) { .sf-tavole--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } }
/* tavola lunga: fette di una presentazione verticale rimontate senza spazi */
.sf-tavola-lunga { max-width: 880px; margin: 48px auto 0; }
.sf-tavola-lunga__fette { border: 1px solid var(--sf-cenere); background: #fff; }
.sf-pagina .sf-tavola-lunga__fette img { display: block; width: 100%; height: auto; }
/* tavola lunga a tutto schermo: da bordo a bordo della finestra */
.sf-tavola-lunga--piena { max-width: none; margin: 48px 0 0; }
.sf-tavola-lunga--piena .sf-tavola-lunga__fette { border: 0; }
.sf-tavola-lunga--piena figcaption { margin-top: 12px; }
/* copertina a tutto schermo */
.sf-copertina-piena { margin: 40px 0 0; }
.sf-pagina .sf-copertina-piena img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Pulsante «torna su» — su tutte le pagine (stesso effetto dei bottoni blindati)
   ========================================================================== */
.sf-su {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 40;
	width: 48px;
	height: 48px;
	padding: 0;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	translate: 0 12px;
	transition-property: background-size, color, transform, box-shadow, opacity, translate, visibility;
}
.sf-su.is-visibile { opacity: 1; visibility: visible; translate: 0 0; }
/* Hello Elementor colorerebbe di magenta il fondo durante lo scorrimento */
.sf-su:is(:hover, :focus, :active) { background-color: var(--btn-fondo); }
.sf-su:is(:hover, :focus-visible) svg { transform: translateY(-3px); }
@media (max-width: 767px) { .sf-su { right: 16px; bottom: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .sf-su { translate: 0 0; } .sf-su:is(:hover, :focus-visible) svg { transform: none; } }

/* ==========================================================================
   Prima schermata della Home — «Dal disegno al codice» (proposta C, scelta il 22/9/2026)
   ========================================================================== */

/* ——— C · Dal disegno al codice: la stessa scheda in tre fasi ——— */
.sf-hero-c { position: relative; overflow: hidden; background: var(--sf-sfondo); }
.sf-hero-c__griglia { display: grid; gap: 40px; padding-block: 48px; }
@media (min-width: 960px) {
	.sf-hero-c__griglia { grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; min-height: calc(100vh - var(--sf-header)); padding-block: 40px; }
}
.sf-hero-c__titolo { margin-top: 20px; padding-top: 16px; border-top: 1.5px solid var(--sf-teal); font-family: var(--sf-titoli); text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 1.02; color: var(--sf-inchiostro); }
.sf-hero-c__titolo span { display: block; font-weight: 400; letter-spacing: 0.03em; transition: color 0.4s; }
.sf-hero-c__titolo span.is-attiva { font-weight: 600; letter-spacing: 0; color: var(--sf-inchiostro); }
.sf-hero-c__titolo span:not(.is-attiva) { color: var(--sf-cenere); }
.sf-demo__schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sf-demo__scheda {
	position: relative;
	padding: 10px 0 12px;
	border: 0;
	border-top: 2px solid var(--sf-cenere);
	background: none;
	text-align: left;
	font-family: var(--sf-testo);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sf-secondario);
	cursor: pointer;
}
.sf-demo__scheda:is(:hover, :focus, :active) { background: none; color: var(--sf-inchiostro); }
.sf-demo__scheda:focus-visible { outline: 2px solid var(--sf-teal); outline-offset: 2px; }
.sf-demo__scheda span { color: var(--sf-teal); margin-right: 6px; }
.sf-demo__scheda::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--sf-teal); }
.sf-demo__scheda[aria-selected="true"] { color: var(--sf-inchiostro); }
.sf-demo__scheda[aria-selected="true"]::before { animation: sf-avanza var(--sf-durata, 4.2s) linear forwards; }
.sf-demo--ferma .sf-demo__scheda[aria-selected="true"]::before { animation: none; width: 100%; }
@keyframes sf-avanza { to { width: 100%; } }
.sf-demo__tela {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: var(--sf-cenere-30);
	background-image: radial-gradient(var(--sf-cenere) 1px, transparent 1px);
	background-size: 16px 16px;
	display: grid;
	place-items: center;
	overflow: hidden;
}
/* su telefono il 4:3 taglia wireframe e scheda: la tela prende l'altezza della fase più alta
   (le tre fasi stanno nella stessa cella, quindi l'altezza non cambia al passaggio tra le fasi) */
@media (max-width: 639px) {
	.sf-demo__tela { aspect-ratio: auto; padding-block: 40px 32px; }
}
.sf-demo__fase { grid-area: 1 / 1; width: min(78%, 420px); opacity: 0; translate: 0 10px; transition: opacity 0.5s ease, translate 0.5s ease; pointer-events: none; }
.sf-demo__fase.is-attiva { opacity: 1; translate: 0 0; pointer-events: auto; }
/* fase 1: wireframe con la cornice di selezione */
.sf-wire { position: relative; background: var(--sf-carta); border: 1px dashed var(--sf-polvere); padding: 14px; }
.sf-wire__foto { aspect-ratio: 16 / 9; border: 1px solid var(--sf-cenere); background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--sf-cenere) 50%, transparent calc(50% + 0.5px)), linear-gradient(to top left, transparent calc(50% - 0.5px), var(--sf-cenere) 50%, transparent calc(50% + 0.5px)); }
.sf-wire__riga { height: 8px; background: var(--sf-cenere); margin-top: 12px; }
.sf-wire__riga--titolo { height: 14px; width: 55%; background: var(--sf-polvere); margin-top: 16px; }
.sf-wire__riga--corta { width: 70%; }
.sf-wire__bottone { width: 38%; height: 26px; border: 1px solid var(--sf-polvere); margin-top: 16px; }
.sf-wire__maniglia { position: absolute; width: 8px; height: 8px; background: var(--sf-carta); border: 1.5px solid var(--sf-teal); }
.sf-wire__maniglia:nth-of-type(1) { top: -5px; left: -5px; }
.sf-wire__maniglia:nth-of-type(2) { top: -5px; right: -5px; }
.sf-wire__maniglia:nth-of-type(3) { bottom: -5px; left: -5px; }
.sf-wire__maniglia:nth-of-type(4) { bottom: -5px; right: -5px; }
.sf-wire__misura { position: absolute; top: -26px; left: 50%; translate: -50% 0; padding: 2px 6px; background: var(--sf-teal); color: var(--sf-su-teal); font-size: 0.65rem; font-family: var(--sf-mono); }
/* fase 2: codice */
.sf-codice-blocco { margin: 0; padding: 20px 22px; background: var(--sf-lavagna); color: #fff; font-family: var(--sf-mono); font-size: clamp(0.66rem, 0.95vw, 0.8rem); line-height: 1.75; white-space: pre; overflow: hidden; border-radius: 2px; }
.sf-codice-blocco .t { color: #1dbfaa; }
.sf-codice-blocco .a { color: #d6e4e4; }
.sf-codice-blocco .s { color: #cbcbcb; }
.sf-codice-blocco .r { display: block; opacity: 0; }
.sf-demo__fase.is-attiva .sf-codice-blocco .r { animation: sf-riga 0.25s ease forwards; }
@keyframes sf-riga { to { opacity: 1; } }
/* fase 3: la scheda vera, lo stesso componente del sito */
.sf-card-demo { background: var(--sf-carta); box-shadow: 10px 10px 0 0 var(--sf-velo); }
.sf-pagina .sf-card-demo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.sf-card-demo__corpo { padding: 16px 18px 20px; }
.sf-card-demo__corpo .sf-codice { color: var(--sf-teal); }
.sf-card-demo__titolo { margin-top: 6px; font-family: var(--sf-titoli); font-weight: 600; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; }
.sf-card-demo__testo { margin-top: 6px; font-size: 0.85rem; color: var(--sf-secondario); }
.sf-card-demo .btn-primary { margin-top: 14px; padding: 10px 16px; font-size: 0.7rem; }
@media (prefers-reduced-motion: reduce) {
	.sf-demo__fase { transition: none; }
	.sf-demo__fase.is-attiva .sf-codice-blocco .r { animation: none; opacity: 1; }
}

/* ==========================================================================
   Movimento «alla Studio Polpo» (22/9/2026) — attivo solo con body.sf-movimento
   ========================================================================== */
/* 1 · header che diventa traslucido quando si scorre */
.sf-movimento .sf-header { transition: background-color 0.3s, backdrop-filter 0.3s; }
.sf-movimento .sf-header.is-scorrendo { background-color: color-mix(in srgb, var(--sf-sfondo) 82%, transparent); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
/* 2 · gli elementi entrano sfumando dal basso, in sequenza */
.sf-entra { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--sf-ritardo, 0s); }
.sf-entra.is-dentro { opacity: 1; transform: none; }
/* 3 · parallasse: la foto scorre dentro la sua cornice */
.sf-movimento .sf-progetto__foto img,
.sf-movimento .sf-chiusura__foto { scale: 1.14; will-change: translate; }
/* 4 · velo verde sui progetti al passaggio del mouse — su TUTTO il sito (Julian, 22/9) */
.sf-progetto__foto { position: relative; }
.sf-progetto__foto::after {
	content: "Vedi il progetto  →";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--sf-velo-vetro);
	color: var(--sf-teal);
	font-family: var(--sf-testo);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.sf-progetto a:is(:hover, :focus-visible) .sf-progetto__foto::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.sf-entra { opacity: 1; transform: none; transition: none; }
	.sf-movimento .sf-progetto__foto img, .sf-movimento .sf-chiusura__foto { scale: 1; translate: none !important; }
}

/* ——— Dashboard SEO illustrata (Servizi · SEO & Analytics, 22/9/2026) ——— */
.sf-dash { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; font-family: var(--sf-testo); fill: var(--sf-inchiostro); }
.sf-dash .sf-dash__barra { font-size: 12px; fill: var(--sf-secondario); letter-spacing: 0.02em; }
.sf-dash .sf-dash__etichetta { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; }
.sf-dash .sf-dash__numero { font-family: var(--sf-titoli); font-size: 32px; font-weight: 600; }
.sf-dash .sf-dash__delta { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.sf-dash .sf-dash__asse { font-size: 11px; fill: var(--sf-secondario); }
.sf-dash .sf-dash__testo { font-size: 14px; }
.sf-dash .sf-dash__pos { font-family: var(--sf-titoli); font-size: 17px; font-weight: 600; }
.sf-dash .sf-dash__su { font-size: 11px; font-weight: 600; fill: var(--sf-teal); }
/* stato di partenza, prima che la sezione entri nello schermo */
.sf-dash--anima .sf-dash__linea,
.sf-dash--anima .sf-dash__area { clip-path: inset(0 100% 0 0); }
.sf-dash--anima .sf-dash__punto, .sf-dash--anima .sf-dash__onda { opacity: 0; }
.sf-dash--anima .sf-dash__barra-pos { transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--da)); }
.sf-dash--anima .sf-dash__su { opacity: 0; }
.sf-dash--anima .sf-dash__kpi { opacity: 0; transform: translateY(8px); }
/* in movimento */
.sf-dash.is-attiva .sf-dash__kpi { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
.sf-dash.is-attiva .sf-dash__kpi:nth-of-type(2) { transition-delay: 0.08s; }
.sf-dash.is-attiva .sf-dash__linea--imp { clip-path: inset(0 0 0 0); transition: clip-path 2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.sf-dash.is-attiva .sf-dash__linea--clic,
.sf-dash.is-attiva .sf-dash__area { clip-path: inset(0 0 0 0); transition: clip-path 2s cubic-bezier(0.4, 0, 0.2, 1) 0.45s; }
.sf-dash.is-attiva .sf-dash__punto { opacity: 1; transition: opacity 0.3s ease 2.4s; }
.sf-dash.is-attiva .sf-dash__onda { transform-box: fill-box; transform-origin: center; animation: sf-dash-onda 2s ease-out 2.5s infinite; }
.sf-dash.is-attiva .sf-dash__barra-pos { transform: scaleX(var(--a)); transition: transform 1.4s cubic-bezier(0.3, 1.2, 0.5, 1) calc(1.2s + var(--i, 0) * 0.25s); }
.sf-dash.is-attiva .sf-dash__su { opacity: 1; transition: opacity 0.4s ease calc(2.4s + var(--i, 0) * 0.25s); }
.sf-dash__live { animation: sf-dash-live 1.6s ease-in-out infinite; }
@keyframes sf-dash-onda { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
@keyframes sf-dash-live { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
	.sf-dash * { animation: none !important; transition: none !important; }
}

/* ——— Editor + anteprima illustrati (Servizi · Front-end, 22/9/2026) ——— */
.sf-fe { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; font-family: var(--sf-testo); fill: var(--sf-inchiostro); }
.sf-fe .sf-fe__tab { font-size: 12px; fill: var(--sf-secondario); }
.sf-fe .sf-fe__num { font-family: var(--sf-mono); font-size: 11px; fill: #8a8a8a; text-anchor: end; }
.sf-fe .sf-fe__num { transform: translateX(14px); }
.sf-fe .sf-fe__riga { font-family: var(--sf-mono); font-size: 12.5px; fill: #fff; }
.sf-fe .sf-fe__riga .t { fill: #1dbfaa; }
.sf-fe .sf-fe__riga .a { fill: #d6e4e4; }
.sf-fe .sf-fe__riga .s { fill: #cbcbcb; }
.sf-fe .sf-fe__mini { font-family: var(--sf-titoli); font-size: 10px; font-weight: 700; }
.sf-fe .sf-fe__titolo { font-family: var(--sf-titoli); font-size: 19px; font-weight: 600; letter-spacing: 0.03em; }
.sf-fe .sf-fe__titolo--leggero { font-weight: 400; }
.sf-fe .sf-fe__etichetta { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; fill: var(--sf-secondario); }
.sf-fe .sf-fe__punteggio { font-family: var(--sf-titoli); font-size: 17px; font-weight: 600; fill: var(--sf-teal); }
.sf-fe .sf-fe__voce { font-size: 10.5px; fill: var(--sf-secondario); }
.sf-fe__cursore { animation: sf-lampeggia 1.1s steps(1) infinite; }
/* stato di partenza */
.sf-fe--anima .sf-fe__riga { clip-path: inset(0 100% 0 0); }
.sf-fe--anima .sf-fe__parte { opacity: 0; transform: translateY(10px); }
.sf-fe--anima .sf-fe__arco { stroke-dashoffset: var(--c); }
/* in movimento: il codice si scrive riga per riga, la pagina si costruisce di pari passo */
.sf-fe.is-attiva .sf-fe__riga { clip-path: inset(0 0 0 0); transition: clip-path 0.3s steps(12, end) calc(var(--i) * 0.16s); }
.sf-fe.is-attiva .sf-fe__parte { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.sf-fe.is-attiva .sf-fe__parte[style*="--p:0"] { transition-delay: 0.7s; }
.sf-fe.is-attiva .sf-fe__parte[style*="--p:1"] { transition-delay: 1.35s; }
.sf-fe.is-attiva .sf-fe__scheda { transition-delay: calc(1.85s + var(--k) * 0.12s); }
.sf-fe.is-attiva .sf-fe__arco { stroke-dashoffset: var(--v); transition: stroke-dashoffset 1.3s cubic-bezier(0.4, 0, 0.2, 1) calc(3s + var(--k) * 0.15s); }
@media (prefers-reduced-motion: reduce) {
	.sf-fe * { animation: none !important; transition: none !important; }
}
.sf-fe .sf-fe__tab--attiva { fill: #fff; }

/* ——— Tavola UX illustrata (Servizi · UX/UI Design, 22/9/2026) ——— */
.sf-ux { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; font-family: var(--sf-testo); fill: var(--sf-inchiostro); }
.sf-ux .sf-ux__barra { font-size: 12px; fill: var(--sf-secondario); }
.sf-ux .sf-ux__play { font-size: 11px; font-weight: 600; fill: #fff; letter-spacing: 0.04em; }
.sf-ux .sf-ux__nome { font-size: 11px; font-weight: 600; fill: var(--sf-secondario); letter-spacing: 0.04em; }
.sf-ux .sf-ux__jn { font-family: var(--sf-titoli); font-size: 11px; font-weight: 700; }
.sf-ux .sf-ux__titolo { font-family: var(--sf-titoli); font-size: 15px; font-weight: 600; }
.sf-ux .sf-ux__misura { font-family: var(--sf-mono); font-size: 10px; fill: #fff; }
.sf-ux .sf-ux__etichetta { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; fill: var(--sf-secondario); }
.sf-ux .sf-ux__nota { font-size: 13px; }
.sf-ux .sf-ux__chip { font-size: 12px; font-weight: 600; }
.sf-ux__cursore { opacity: 0; }
/* stato di partenza */
.sf-ux--anima .sf-ux__postit, .sf-ux--anima .sf-ux__schermata, .sf-ux--anima .sf-ux__verifica { opacity: 0; transform: translateY(10px); }
.sf-ux--anima .sf-ux__ui, .sf-ux--anima .sf-ux__selezione, .sf-ux--anima .sf-ux__nodo { opacity: 0; }
.sf-ux--anima .sf-ux__link { clip-path: inset(-12px 100% -12px -12px); }
/* in movimento: ricerca → wireframe → flusso cliccato → interfaccia finita → verifiche */
.sf-ux.is-attiva .sf-ux__postit, .sf-ux.is-attiva .sf-ux__schermata, .sf-ux.is-attiva .sf-ux__verifica { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.sf-ux.is-attiva .sf-ux__schermata { transition-delay: calc(0.3s + var(--k) * 0.25s); }
.sf-ux.is-attiva .sf-ux__nodo { opacity: 1; transition: opacity 0.2s ease calc(1.9s + var(--k) * 0.95s); }
.sf-ux.is-attiva .sf-ux__link { clip-path: inset(-12px -12px -12px -12px); transition: clip-path 0.6s ease calc(1.95s + var(--k) * 0.95s); }
.sf-ux.is-attiva .sf-ux__ui { opacity: 1; transition: opacity 0.6s ease calc(1.95s + var(--k) * 0.95s); }
.sf-ux.is-attiva .sf-ux__selezione { opacity: 1; transition: opacity 0.4s ease 4.3s; }
.sf-ux.is-attiva .sf-ux__verifica { transition-delay: calc(4.6s + var(--k) * 0.15s); }
.sf-ux.is-attiva .sf-ux__cursore { animation: sf-ux-cursore 3.2s cubic-bezier(0.45, 0, 0.25, 1) 1.2s both; }
.sf-ux.is-attiva .sf-ux__clic { transform-box: fill-box; transform-origin: center; animation: sf-ux-clic 3.2s linear 1.2s both; }
@keyframes sf-ux-cursore {
	0% { opacity: 0; transform: translate(150px, 200px); }
	6% { opacity: 1; transform: translate(150px, 210px); }
	20%, 26% { opacity: 1; transform: translate(144px, 334px); }
	50%, 56% { opacity: 1; transform: translate(430px, 236px); }
	80%, 88% { opacity: 1; transform: translate(622px, 338px); }
	100% { opacity: 0; transform: translate(680px, 420px); }
}
@keyframes sf-ux-clic {
	0%, 19% { opacity: 0; transform: scale(0.3); }
	20% { opacity: 1; transform: scale(0.3); }
	27% { opacity: 0; transform: scale(2.2); }
	49% { opacity: 0; transform: scale(0.3); }
	50% { opacity: 1; transform: scale(0.3); }
	57% { opacity: 0; transform: scale(2.2); }
	79% { opacity: 0; transform: scale(0.3); }
	80% { opacity: 1; transform: scale(0.3); }
	87%, 100% { opacity: 0; transform: scale(2.2); }
}
@media (prefers-reduced-motion: reduce) {
	.sf-ux * { animation: none !important; transition: none !important; }
}

/* ——— Tavola di marca illustrata (Servizi · Visual Design, 22/9/2026) ——— */
.sf-vi { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; font-family: var(--sf-testo); fill: var(--sf-inchiostro); }
.sf-vi .sf-vi__barra { font-size: 12px; fill: var(--sf-secondario); }
.sf-vi .sf-vi__etichetta { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; fill: var(--sf-secondario); }
.sf-vi .sf-vi__logo { font-family: var(--sf-titoli); font-size: 34px; font-weight: 600; letter-spacing: 0.04em; }
.sf-vi .sf-vi__logo--leggero { font-weight: 400; letter-spacing: 0.12em; fill: var(--sf-polvere-profondo); }
.sf-vi .sf-vi__nome { font-size: 11px; font-weight: 600; }
.sf-vi .sf-vi__hex { font-family: var(--sf-mono); font-size: 10px; fill: var(--sf-secondario); }
.sf-vi .sf-vi__aa { font-family: var(--sf-titoli); font-size: 58px; font-weight: 600; }
.sf-vi .sf-vi__aa--testo { font-family: var(--sf-testo); font-weight: 400; font-size: 52px; }
.sf-vi .sf-vi__app-testo { font-family: var(--sf-titoli); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; fill: #fff; }
.sf-vi .sf-vi__copertina { font-family: var(--sf-titoli); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.sf-vi .sf-vi__copertina--leggero { font-weight: 400; }
.sf-vi .sf-vi__post { font-family: var(--sf-titoli); font-size: 19px; font-weight: 600; }
.sf-vi .sf-vi__post--leggero { font-weight: 400; }
/* stato di partenza */
.sf-vi--anima .sf-vi__costruzione > g { stroke-dashoffset: 1; }
.sf-vi--anima .sf-vi__marchio { opacity: 0; transform: scale(0.9); }
.sf-vi__marchio { transform-box: fill-box; transform-origin: center; }
.sf-vi--anima .sf-vi__logotipo { clip-path: inset(-10px 100% -10px -10px); }
.sf-vi--anima .sf-vi__campione, .sf-vi--anima .sf-vi__tipo { opacity: 0; transform: translateY(12px); }
.sf-vi--anima .sf-vi__app { opacity: 0; transform: translateY(18px) rotate(-2deg); }
.sf-vi__app { transform-box: fill-box; transform-origin: center; }
/* in movimento: costruzione → marchio → logotipo → palette → caratteri → applicazioni */
.sf-vi.is-attiva .sf-vi__costruzione > g { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s ease calc(var(--k) * 0.18s); }
.sf-vi.is-attiva .sf-vi__marchio { opacity: 1; transform: none; transition: opacity 0.5s ease 1.5s, transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 1.5s; }
.sf-vi.is-attiva .sf-vi__logotipo { clip-path: inset(-10px -10px -10px -10px); transition: clip-path 0.7s steps(11, end) 1.9s; }
.sf-vi.is-attiva .sf-vi__campione, .sf-vi.is-attiva .sf-vi__tipo { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.sf-vi.is-attiva .sf-vi__campione { transition-delay: calc(2s + var(--k) * 0.12s); }
.sf-vi.is-attiva .sf-vi__tipo { transition-delay: calc(2.6s + var(--k) * 0.15s); }
.sf-vi.is-attiva .sf-vi__app { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); transition-delay: calc(3s + var(--k) * 0.2s); }
@media (prefers-reduced-motion: reduce) {
	.sf-vi * { animation: none !important; transition: none !important; }
}

/* ——— Più colore in Home (22/9/2026): Velo e teal al posto dei grigi, nella palette Ink wash ——— */
.sf-fondo-velo { background: var(--sf-velo); }
.sf-fondo-velo .sf-numeri__valore { color: var(--sf-teal); }
.sf-fondo-velo .sf-numeri li { background: var(--sf-carta); }
/* prima schermata: tela Velo con i puntini bianchi, parola attiva in teal */
.sf-demo__tela { background-color: var(--sf-velo); background-image: radial-gradient(var(--sf-puntini) 1.2px, transparent 1.2px); }
.sf-hero-c__titolo span.is-attiva { color: var(--sf-teal); }
/* schede servizi: bianche, con icona teal */
.sf-scheda-servizio { background: var(--sf-carta); border: 1px solid var(--sf-cenere); border-top: 6px solid var(--sf-teal); }
.sf-scheda-servizio__testa { display: flex; align-items: center; justify-content: space-between; }
.sf-scheda-servizio__icona { display: grid; place-items: center; width: 48px; height: 48px; background: var(--sf-teal); color: var(--sf-su-teal); transition: background 0.3s; }
.sf-scheda-servizio:is(:hover, :focus-visible) .sf-scheda-servizio__icona { background: var(--sf-teal-profondo); }
.sf-scheda-servizio h3 { margin-top: 20px; }

/* ==========================================================================
   Tema scuro (24/9/2026) — «Ink wash di notte»: niente nero, un inchiostro
   blu-ardesia preso dal Polvere profondo. Si attiva con html[data-tema="scuro"]
   (script in testa alla pagina + bottone sole/luna nell'header).
   Regola della palette: sui fondi scuri il teal diventa l'accento chiaro #1dbfaa.
   ========================================================================== */
html[data-tema="scuro"] {
	--sf-sfondo: #1c2228;
	--sf-carta: #252d35;
	--sf-cenere-30: #222930;
	--sf-velo: #1f3639;
	--sf-cenere: #3b4651;
	--sf-inchiostro: #e3e8ea;
	--sf-secondario: #a8b5c2;
	--sf-polvere: #8394a6;
	--sf-polvere-profondo: #34414e;
	--sf-teal: #1dbfaa;
	--sf-teal-profondo: #72d9ca;
	--sf-su-teal: #10262a;
	--sf-errore: #f08a8a;
	--sf-lavagna: #13181d;
	--sf-vetro: rgb(28 34 40 / 0.94);
	--sf-velo-vetro: rgb(31 54 57 / 0.9);
	--sf-puntini: rgb(255 255 255 / 0.07);
	color-scheme: dark;
}
/* il blocco sfalsato dietro la chiusura: in chiaro è Polvere, di notte più quieto */
html[data-tema="scuro"] .sf-chiusura__blocco { background: #4a5a6b; }
/* le foto dentro i pannelli scuri: il multiply sul fondo più cupo le spegnerebbe */
html[data-tema="scuro"] .sf-chiusura__foto { opacity: 0.45; }
/* la filigrana dell'intestazione resta appena percepibile */
html[data-tema="scuro"] .sf-intestazione__filigrana { opacity: 0.08; }

/* Le illustrazioni SVG dei Servizi sono tavole chiare, come le immagini: dentro tengono la palette del giorno */
html[data-tema="scuro"] :is(.sf-dash, .sf-fe, .sf-ux, .sf-vi) {
	--sf-sfondo: #ffffff;
	--sf-carta: #ffffff;
	--sf-cenere-30: #efefef;
	--sf-velo: #d6e4e4;
	--sf-cenere: #cbcbcb;
	--sf-inchiostro: #4a4a4a;
	--sf-secondario: #4e5f72;
	--sf-polvere: #6d8196;
	--sf-polvere-profondo: #4e5f72;
	--sf-teal: #1a6b6b;
	--sf-teal-profondo: #0f4a4a;
	--sf-su-teal: #ffffff;
}

/* Il cambio di tema è istantaneo: niente transizioni di colore a metà strada */
.sf-cambio-tema *, .sf-cambio-tema *::before, .sf-cambio-tema *::after { transition: none !important; }

/* ——— Bottone sole/luna nell'header (stessa cornice del panino) ——— */
.sf-tema {
	display: grid;
	place-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--sf-filetto);
	border-radius: 0;
	color: var(--sf-inchiostro);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
/* Hello colorerebbe il testo di bianco in focus: dopo il clic l'icona torna inchiostro */
.sf-tema:is(:focus, :active) { color: var(--sf-inchiostro); }
.sf-tema:is(:hover, :focus-visible) { color: var(--sf-teal); border-color: var(--sf-teal); }
.sf-tema:focus-visible { outline: 2px solid var(--sf-teal); outline-offset: 2px; }
.sf-tema svg { display: block; transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.sf-tema:hover svg { transform: rotate(-20deg); }
/* di giorno si vede la luna (passa al buio), di notte il sole */
.sf-tema__sole { display: none !important; }
html[data-tema="scuro"] .sf-tema__sole { display: block !important; }
html[data-tema="scuro"] .sf-tema__luna { display: none !important; }
@media (prefers-reduced-motion: reduce) { .sf-tema svg { transition: none; } }