/* ==========================================================================
   V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Cinematic Web Showcase Patch (ES)
   ==========================================================================
   Layer ADDITIVO sopra la V6 (che resta attiva e fornisce il motore scroll:
   --v6-scroll globale, --v6-sp per sezione, classi v6-live/v6-lit).
   Obiettivi: fix popup Contattaci, barra di lettura e torna-su piu evidenti,
   parallax realmente percepibile, reveal cinematici, componenti showcase per
   i nuovi blocchi contenuto (split legno, dashboard viva, linee CAD disegnate
   dallo scroll) che dimostrano le capacita web/app dello studio.

   PRINCIPI (invariati dalla V6)
   - namespace v61 (classi v61-, gate html.es-v61 aggiunto SOLO dal JS V6.1):
     senza JS questo foglio e quasi tutto dormiente, nessun contenuto nascosto;
   - lo scroll e l'unico master clock: nessun keyframe infinito decorativo;
     tutti i movimenti sono funzioni di --v6-sp / --v6-scroll o transizioni
     one-shot legate all'ingresso in viewport;
   - decorazioni: pointer-events:none, aria-hidden; contenuti sempre sopra;
   - reduced-motion: struttura statica completa (sez. 12).
   Rollback: eliminare questo file + v6-1-cinematic-showcase.js + blocco
   enqueue V6.1 (la V6 riprende identica da sola).

   INDICE
   01. Variabili V6.1
   02. P0 — Popup/form Contattaci (dimensioni, X, mobile, iframe compatto)
   03. Barra di lettura potenziata (visibile, glow tecnico sobrio)
   04. Torna-su potenziato (anello leggibile, stati chiari)
   05. Parallax amplificato (override ampiezze V6, presenza media)
   06. Reveal cinematici (smascheramento figure, ingresso deciso)
   07. Componenti showcase: v61-split, v61-fig-cap, v61-draw, v61-chips
   08. Dashboard viva (.v61-app): interfaccia dimostrativa scroll-driven
   09. Sezione banda legno (.v61-band) + rifiniture contenuti
   10. Guardie mobile/touch
   11. Contenuti garantiti / z-index
   12. Riduzione movimento (kill-switch totale V6.1)
   13. Ridichiarazione variabili di sicurezza
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Variabili
   -------------------------------------------------------------------------- */
:root {
	--v61-gold: #d6a84f;
	--v61-gold-hi: #e9c87e;
	--v61-gold-deep: #a77c39;
	--v61-navy: #0a1f3c;
	--v61-navy-2: #0e2a50;
	--v61-navy-3: #14406b;
	--v61-blue: #1b5fa8;
	--v61-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* --------------------------------------------------------------------------
   02. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — P0: Popup/form Contattaci
   PROBLEMI (segnalati dal CEO e riscontrati nel CSS DB):
   - .es-cmodal__box ha overflow:hidden + border-radius 14: la X (38px a
     top:8/right:10) viene CLIPPATA dall'angolo arrotondato;
   - X sotto il touch target minimo (38px < 44px);
   - il JS DB fa scrollIntoView sul form dentro l'iframe: il testo iniziale
     resta tagliato sopra.
   FIX (zero-DB):
   - overflow del box visibile + clipping spostato sull'iframe (radius);
   - X ridisegnata 46px, ancorata FUORI dall'angolo, sempre interamente
     visibile, focus ring, hover; il box resta centrato: con height <= 92vh
     il bordo superiore e sempre a >= 4vh dal viewport; larghezza box
     100vw-36px => margine laterale 18px > sporgenza X (15px oltre il
     border-box): la X non esce MAI dallo schermo, su nessuna larghezza
     (rilievo review V6.1: la versione precedente a 100vw-28px la tagliava
     di 1px tra 601 e 749px);
   - dentro l'iframe (il JS V6.1 vi gira con la classe es-v61-frame) la
     pagina /contatti/ viene compattata: restano solo le sezioni col form,
     nessun testo tagliato (sez. 02b);
   - ESC chiude (listener nel JS V6.1 che riusa il percorso di chiusura DB).
   Rollback: rimuovere la sezione (torna il popup attuale).
   -------------------------------------------------------------------------- */
html.es-v61 .es-cmodal__box {
	overflow: visible !important;
	width: min(720px, calc(100vw - 36px)) !important;
	height: min(88vh, 840px) !important;
}
html.es-v61 .es-cmodal__frame {
	border-radius: 13px; /* il clipping dei contenuti passa dall'iframe */
	background: #f6f8fb;
}
html.es-v61 .es-cmodal__x {
	top: -16px !important;
	right: -16px !important;
	width: 46px !important;
	height: 46px !important;
	font-size: 24px !important;
	background: linear-gradient(180deg, var(--v61-navy-3, #14406b), var(--v61-navy, #0a1f3c)) !important;
	border: 1.5px solid rgba(233, 200, 126, 0.85) !important;
	color: #fff !important;
	box-shadow:
		0 6px 20px rgba(3, 8, 18, 0.55),
		0 0 0 3px rgba(10, 31, 60, 0.35) !important;
	z-index: 3;
}
html.es-v61 .es-cmodal__x:hover {
	background: linear-gradient(180deg, #1b5fa8, var(--v61-navy-3, #14406b)) !important;
	border-color: var(--v61-gold-hi, #e9c87e) !important;
}
html.es-v61 .es-cmodal__x:focus-visible {
	outline: 2.5px solid var(--v61-gold-hi, #e9c87e);
	outline-offset: 2px;
}
@media (max-width: 600px) {
	html.es-v61 .es-cmodal__box {
		width: calc(100vw - 16px) !important;
		height: min(92vh, 760px) !important;
	}
	html.es-v61 .es-cmodal__x {
		top: -14px !important;
		right: -6px !important;
		width: 44px !important;
		height: 44px !important;
	}
}

/* 02b — dentro l'iframe del popup (html.es-v61-frame, classe dal JS V6.1):
   la pagina /contatti/ diventa un modulo compatto: restano solo le sezioni
   che contengono il form (marcate v61-has-form dal JS), spaziature ridotte,
   nessun indicatore/banner duplicato. Il contenuto NON e perso: e la pagina
   /contatti/ completa che resta raggiungibile normalmente. */
html.es-v61-frame .es .s.v61-no-form {
	display: none !important;
}
html.es-v61-frame .es .s.v61-has-form {
	padding-block: 26px !important;
}
html.es-v61-frame .site-header,
html.es-v61-frame .site-footer,
html.es-v61-frame #es-cookie-bar,
html.es-v61-frame a.generate-back-to-top,
html.es-v61-frame #es-v6-progress {
	display: none !important;
}


/* --------------------------------------------------------------------------
   03. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Barra di lettura potenziata
   Piu spessa, piu contrastata, glow tecnico sobrio + marcatore di quota
   sull'estremita (compositor-only: translateX su --es-vw). Nessuna
   pulsazione: resta un riflesso di stato dello scroll.
   contain passa a layout+style (il paint containment della V6 ritagliava
   qualunque glow — rilievo review V6).
   -------------------------------------------------------------------------- */
html.es-v61 #es-v6-progress {
	height: 5px;
	contain: layout style;
}
html.es-v61 #es-v6-progress::before {
	height: 100%;
	background: linear-gradient(180deg, rgba(14, 42, 80, 0.30), rgba(14, 42, 80, 0.16));
	box-shadow: inset 0 -1px 0 rgba(233, 200, 126, 0.14);
}
html.es-v61 #es-v6-progress .v6p-bar {
	height: 5px;
	background: linear-gradient(90deg,
		var(--v61-gold-deep, #a77c39),
		var(--v61-gold, #d6a84f) 42%,
		var(--v61-gold-hi, #e9c87e) 68%,
		var(--v61-blue, #1b5fa8) 100%);
	box-shadow:
		0 0 10px rgba(214, 168, 79, 0.55),
		0 1px 5px rgba(3, 8, 18, 0.35);
}
/* marcatore di quota sull'estremita (elemento del CONTENITORE: non viene
   scalato dallo scaleX della barra); translateX = compositor-only */
html.es-v61 #es-v6-progress::after {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	width: 3px;
	height: 9px;
	border-radius: 2px;
	background: var(--v61-gold-hi, #e9c87e);
	box-shadow: 0 0 12px 2px rgba(233, 200, 126, 0.75);
	transform: translateX(calc(var(--v6-scroll, 0) * var(--es-vw, 100vw)));
	will-change: transform;
}
@media (max-width: 1024px) {
	html.es-v61 #es-v6-progress,
	html.es-v61 #es-v6-progress .v6p-bar {
		height: 3.5px;
	}
	html.es-v61 #es-v6-progress::after {
		height: 7px;
		top: -1.5px;
	}
}


/* --------------------------------------------------------------------------
   04. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Torna-su potenziato
   Anello di progresso conico a doppio livello (nucleo nitido + traccia
   leggibile), bordo e icona piu chiari, stati hover/focus/active evidenti.
   Pilotato da --v3-progress (scritta dal JS V6): riflesso di stato, nessuna
   animazione autonoma. Specificita superiore alle regole V3 (html.es-v61).
   -------------------------------------------------------------------------- */
html.es-v61 a.generate-back-to-top.generate-back-to-top {
	overflow: visible;
	border: 1.5px solid rgba(233, 200, 126, 0.55) !important;
	box-shadow:
		0 10px 26px rgba(3, 8, 18, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	color: var(--v61-gold-hi, #e9c87e) !important;
}
html.es-v61 a.generate-back-to-top.generate-back-to-top::before {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 18px;
	padding: 3.5px;
	background: conic-gradient(
		var(--v61-gold-hi, #e9c87e),
		var(--v61-gold, #d6a84f) calc(var(--v3-progress, 0) * 200deg),
		var(--v61-blue, #1b5fa8) calc(var(--v3-progress, 0) * 360deg),
		rgba(255, 255, 255, 0.22) calc(var(--v3-progress, 0) * 360deg));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}
html.es-v61 a.generate-back-to-top.generate-back-to-top:hover,
html.es-v61 a.generate-back-to-top.generate-back-to-top:focus-visible {
	box-shadow:
		0 0 0 2px rgba(233, 200, 126, 0.6),
		0 12px 30px rgba(3, 8, 18, 0.5),
		0 0 22px rgba(214, 168, 79, 0.4);
	color: #ffffff !important;
}
html.es-v61 a.generate-back-to-top.generate-back-to-top:focus-visible {
	outline: 2px solid var(--v61-gold-hi, #e9c87e);
	outline-offset: 3px;
}
html.es-v61 a.generate-back-to-top.generate-back-to-top:active {
	transform: scale(0.94);
}


/* --------------------------------------------------------------------------
   05. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Parallax amplificato
   La V6 era troppo timida (rilievo CEO). Ampiezze quasi raddoppiate + zoom
   progressivo del media legato allo scroll + griglia in CONTROCORRENTE
   (la profondita si percepisce per moto relativo). Sempre e solo funzioni
   di --v6-sp, gate .v6-live (mai layer promossi fuori viewport), coperture
   garantite: inset -8% del media + scale >= 1.04 coprono l'escursione 64px.
   Presenza media piu forte: gli hero non sono piu "sfondi timidi".
   -------------------------------------------------------------------------- */
html.es-v61.es-v6-motion .v6-live .v6-media {
	transform:
		translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * 64px), 0)
		scale(calc(1.05 + var(--v6-sp, 0.5) * 0.06));
	will-change: transform;
}
html.es-v61.es-v6-motion .v6-live .v6-grid {
	transform: translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * -26px), 0);
	will-change: transform;
}
html.es-v61.es-v6-motion .v6-live .v6-veil {
	transform: translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * 12px), 0);
}
/* media hero piu presenti (immagini protagoniste, velo garantisce il testo) */
html.es-v61 .es .s.hero .v6-media {
	--v6-mo: 0.52 !important;
}
html.es-v61 .es .s.cta .v6-media,
html.es-v61 .es .s.bridge .v6-media {
	--v6-mo: 0.38 !important;
}
/* la topline di quota diventa piu marcata */
html.es-v61 .v6-topline {
	height: 2px;
	box-shadow: 0 0 8px rgba(214, 168, 79, 0.35);
}


/* --------------------------------------------------------------------------
   06. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Reveal cinematici
   Le figure si SMASCHERANO entrando (clip-path one-shot agganciato al
   motore reveal es-rv del DB, senza doppi motori). La transition e dichiarata
   sullo stato base COMPLETA di opacity/transform (le proprieta del DB):
   sostituisce, non tronca, la transition del Customizer.
   Senza JS la classe es-rv non esiste: nessun contenuto nascosto.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html.es-v61.es-v6-motion .es .s:not(.hero) .es-fig.es-rv {
		clip-path: inset(11% 8% 11% 8% round 22px);
		transition:
			opacity 0.7s ease,
			transform 0.85s var(--v61-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
			clip-path 1.15s var(--v61-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) 0.05s;
	}
	html.es-v61.es-v6-motion .es .s:not(.hero) .es-fig.es-rv.es-rv-in {
		clip-path: inset(0 0 0 0 round 0px);
	}
	/* card: ingresso piu deciso e percepibile (38px + micro-scala).
	   La transition include ANCHE box-shadow/border-color: questa regola
	   batte per specificita la '.es .card{transition:...}' del DB e senza
	   queste voci l'hover delle card scatterebbe secco (rilievo review V6.1) */
	html.es-v61.es-v6-motion .es .card.es-rv,
	html.es-v61.es-v6-motion .es .es-mod.es-rv {
		transform: translateY(38px) scale(0.965);
		transition:
			opacity 0.75s ease,
			transform 0.95s var(--v61-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
			box-shadow 0.3s ease,
			border-color 0.3s ease;
	}
	html.es-v61.es-v6-motion .es .card.es-rv.es-rv-in,
	html.es-v61.es-v6-motion .es .es-mod.es-rv.es-rv-in {
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   07. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Componenti showcase (blocchi patch)
   Stili per i nuovi blocchi contenuto consegnati in PATCH-CONTENUTI-V6-1.md.
   Se le patch non sono applicate, questi selettori non matchano nulla.
   -------------------------------------------------------------------------- */
/* split panel: due colonne che scorrono in controfase (profondita reale) */
.es .v61-split {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
}
html.es-v61.es-v6-motion .s.v6-live .v61-split > .v61-l {
	transform: translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * -24px), 0);
}
html.es-v61.es-v6-motion .s.v6-live .v61-split > .v61-r {
	transform: translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * 24px), 0);
}
/* figura con caption tecnica (riusa il frame .es-fig del design system DB) */
.es .v61-fig-cap {
	display: block;
	margin-top: 10px;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--v61-gold-deep, #a77c39);
	font-weight: 700;
}
.es .s.dark .v61-fig-cap {
	color: var(--v61-gold-hi, #e9c87e);
}
/* rapporto figura orizzontale per le nuove immagini (l'es-fig del DB e
   pensato anche tall: qui fissiamo il formato 16/9 delle foto V6.1) */
.es .es-fig.v61-wide {
	aspect-ratio: 16 / 9;
	min-height: 220px;
}
/* linee CAD disegnate DALLO SCROLL: pathLength=1 garantito dal JS V6.1.
   Il tratto si estende mentre la sezione attraversa il viewport. */
html.es-v61 .v61-draw path,
html.es-v61 .v61-draw line,
html.es-v61 .v61-draw polyline,
html.es-v61 .v61-draw circle {
	stroke-dasharray: 1;
	stroke-dashoffset: 0; /* base: disegnato (no-JS/no-motion = tutto visibile) */
}
html.es-v61.es-v6-motion .s.v6-live .v61-draw path,
html.es-v61.es-v6-motion .s.v6-live .v61-draw line,
html.es-v61.es-v6-motion .s.v6-live .v61-draw polyline {
	stroke-dashoffset: clamp(0, calc(1 - (var(--v6-sp, 0) - 0.08) * 2.2), 1);
}
/* chip di servizio (riusa .chip del DB dove esiste; variante scura) */
.es .v61-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}
.es .v61-chips .v61-chip {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid rgba(167, 124, 57, 0.45);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	color: inherit;
	background: rgba(214, 168, 79, 0.07);
	white-space: nowrap;
}
.es .s.dark .v61-chips .v61-chip {
	border-color: rgba(233, 200, 126, 0.4);
	background: rgba(233, 200, 126, 0.08);
}


/* --------------------------------------------------------------------------
   08. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Dashboard viva (.v61-app)
   Pannello "interfaccia" dimostrativo delle capacita web/app: finestra con
   chrome tecnico, KPI, barre che CRESCONO con lo scroll, linea dati che si
   disegna, leggera prospettiva 3D pilotata da --v6-sp. Tutto deterministico:
   a scroll fermo il pannello e fermo. Decorazioni aria-hidden nel markup.
   -------------------------------------------------------------------------- */
.es .v61-app {
	position: relative;
	border: 1px solid rgba(233, 200, 126, 0.35);
	border-radius: 16px;
	background: linear-gradient(180deg, #0e2a50, #0a1f3c 70%);
	box-shadow: 0 26px 60px rgba(3, 8, 18, 0.45);
	overflow: hidden;
	transform-origin: center 70%;
}
html.es-v61.es-v6-motion .s.v6-live .v61-app {
	transform:
		perspective(1100px)
		rotateX(calc((0.5 - var(--v6-sp, 0.5)) * 7deg))
		translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * -14px), 0);
	will-change: transform;
}
.es .v61-app__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: rgba(4, 12, 28, 0.55);
	border-bottom: 1px solid rgba(233, 200, 126, 0.22);
	font-family: Rajdhani, Consolas, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(233, 200, 126, 0.9);
}
.es .v61-app__bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(233, 200, 126, 0.35);
	font-style: normal;
}
.es .v61-app__bar i:first-child {
	background: rgba(27, 95, 168, 0.75);
}
.es .v61-app__body {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 16px;
	padding: 16px;
}
.es .v61-app__kpis {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.es .v61-kpi {
	border: 1px solid rgba(122, 143, 170, 0.28);
	border-radius: 10px;
	padding: 10px 12px;
	background: rgba(10, 31, 60, 0.55);
}
.es .v61-kpi .t {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(157, 176, 199, 0.95);
}
.es .v61-kpi .v {
	display: block;
	margin-top: 2px;
	font-family: Rajdhani, Consolas, monospace;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--v61-gold-hi, #e9c87e);
}
/* barre: scaleY funzione dello scroll (ogni barra ha la sua altezza --h) */
.es .v61-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 108px;
	padding: 6px 4px 0;
}
.es .v61-bars i {
	flex: 1;
	height: 100%;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, rgba(233, 200, 126, 0.85), rgba(167, 124, 57, 0.55));
	transform: scaleY(var(--hb, 0.7)); /* base: valore finale (no-JS/statico) */
	transform-origin: bottom;
	font-style: normal;
}
.es .v61-bars i:nth-child(2n) {
	background: linear-gradient(180deg, rgba(90, 156, 222, 0.85), rgba(27, 95, 168, 0.55));
}
.es .v61-bars i:nth-child(1) { --hb: 0.55; }
.es .v61-bars i:nth-child(2) { --hb: 0.8; }
.es .v61-bars i:nth-child(3) { --hb: 0.42; }
.es .v61-bars i:nth-child(4) { --hb: 0.95; }
.es .v61-bars i:nth-child(5) { --hb: 0.66; }
.es .v61-bars i:nth-child(6) { --hb: 0.88; }
.es .v61-bars i:nth-child(7) { --hb: 0.5; }
/* con motion: l'altezza finale --hb viene raggiunta progressivamente con lo
   scroll della sezione (clamp 0.08..--hb) */
html.es-v61.es-v6-motion .s.v6-live .v61-bars i {
	transform: scaleY(clamp(0.08, calc((var(--v6-sp, 0) - 0.05) * 2 * var(--hb, 0.7)), var(--hb, 0.7)));
}
.es .v61-app__foot {
	padding: 0 16px 14px;
	font-size: 0.8rem;
	color: rgba(157, 176, 199, 0.9);
}
@media (max-width: 700px) {
	.es .v61-app__body {
		grid-template-columns: 1fr;
	}
}


/* --------------------------------------------------------------------------
   09. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Banda legno + rifiniture
   -------------------------------------------------------------------------- */
/* lista di punti tecnici a due colonne per i blocchi legno/videosorveglianza */
.es .v61-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 22px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.es .v61-points li {
	position: relative;
	padding-left: 22px;
	font-size: 0.95rem;
	line-height: 1.5;
}
.es .v61-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 12px;
	height: 2px;
	background: var(--v61-gold, #d6a84f);
	box-shadow: 3px 0 0 rgba(27, 95, 168, 0.7);
}
/* sezioni scure: il DB colora p/h ma non le liste custom → colore esplicito */
.es .s.dark .v61-points li {
	color: #dbe6f3;
}
.es .s.dark .v61-points li strong {
	color: #ffffff;
}
@media (max-width: 700px) {
	.es .v61-points {
		grid-template-columns: 1fr;
	}
}
/* nota tecnica prudente (fotovoltaico, videosorveglianza) */
.es .v61-note {
	margin-top: 16px;
	padding: 14px 16px;
	border-left: 3px solid var(--v61-gold, #d6a84f);
	border-radius: 0 10px 10px 0;
	background: rgba(214, 168, 79, 0.07);
	font-size: 0.92rem;
}
.es .s.dark .v61-note {
	background: rgba(233, 200, 126, 0.08);
	color: #dbe6f3;
}


/* --------------------------------------------------------------------------
   10. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Guardie mobile/touch
   Effetti presenti ma dimezzati; niente tilt 3D del pannello app su touch.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px), (hover: none) {
	html.es-v61.es-v6-motion .v6-live .v6-media {
		transform:
			translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * 32px), 0)
			scale(calc(1.04 + var(--v6-sp, 0.5) * 0.04));
	}
	html.es-v61.es-v6-motion .v6-live .v6-grid {
		transform: translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * -14px), 0);
	}
	html.es-v61.es-v6-motion .s.v6-live .v61-split > .v61-l {
		transform: translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * -12px), 0);
	}
	html.es-v61.es-v6-motion .s.v6-live .v61-split > .v61-r {
		transform: translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * 12px), 0);
	}
	html.es-v61.es-v6-motion .s.v6-live .v61-app {
		transform: translate3d(0, calc((var(--v6-sp, 0.5) - 0.5) * -8px), 0);
	}
	.es .v61-split {
		grid-template-columns: 1fr;
	}
}


/* --------------------------------------------------------------------------
   11. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Contenuti garantiti / z-index
   I componenti v61 vivono DENTRO .w (gia sopra i layer .v6-bg della V6).
   Il popup resta a z 100000 (contesto DB): sopra barra (99991), header
   (99990), cookie (99985), torna-su e qualunque layer V6/V6.1.
   -------------------------------------------------------------------------- */
.es .v61-split,
.es .v61-app,
.es .v61-points,
.es .v61-note {
	position: relative;
	z-index: 1;
}


/* --------------------------------------------------------------------------
   12. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Riduzione movimento
   Il JS non aggiunge es-v6-motion (gia V6); cintura totale V6.1: tutto
   statico, barre al valore finale, linee disegnate, figure senza maschera.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.es-v61 .v6-live .v6-media,
	html.es-v61 .v6-live .v6-grid,
	html.es-v61 .v6-live .v6-veil,
	html.es-v61 .v61-split > .v61-l,
	html.es-v61 .v61-split > .v61-r,
	html.es-v61 .v61-app,
	html.es-v61 .v61-bars i {
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}
	html.es-v61 .v61-bars i {
		transform: scaleY(var(--hb, 0.7)) !important; /* valore finale, fermo */
	}
	html.es-v61 .v61-draw path,
	html.es-v61 .v61-draw line,
	html.es-v61 .v61-draw polyline,
	html.es-v61 .v61-draw circle {
		stroke-dashoffset: 0 !important;
	}
	html.es-v61 .es .es-fig.es-rv,
	html.es-v61 .es .es-fig.es-rv.es-rv-in {
		clip-path: none !important;
	}
	html.es-v61 #es-v6-progress::after {
		transform: translateX(calc(var(--v6-scroll, 0) * var(--es-vw, 100vw))); /* stato, non animazione */
		will-change: auto;
	}
	/* completezza cintura (rilievo review V6.1): anche il micro-scale
	   :active del torna-su resta fermo sotto reduced-motion */
	html.es-v61 a.generate-back-to-top.generate-back-to-top:active {
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   13. V6.1-CINEMATIC-SHOWCASE-2026-07-06 — Ridichiarazione di sicurezza
   (lezione QA V3: un renderer puo scartare la prima regola del foglio)
   -------------------------------------------------------------------------- */
html {
	--v61-gold: #d6a84f;
	--v61-gold-hi: #e9c87e;
	--v61-gold-deep: #a77c39;
	--v61-navy: #0a1f3c;
	--v61-navy-2: #0e2a50;
	--v61-navy-3: #14406b;
	--v61-blue: #1b5fa8;
	--v61-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}