/* ══════════════════════════════════════════════════════════════════════
   Plezuro — stile della pagina.
   Linguaggio visivo ripreso da Aigocy (grigio chiaro, pannelli arrotondati,
   card «a rilievo», etichette a pillola) e portato sui colori del marchio.
   --tinta è il colore del cartoncino scelto nella prova: cambia l'alone
   dell'apertura, la card, la copertina sul telefono e le icone dei passi.
   I movimenti nuovi (3/11/2026) partono solo quando la parte si vede
   (.is-vivo, .is-visto) e spariscono tutti con «riduci movimento».
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: "Urbanist";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url(../fonts/urbanist-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Urbanist";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url(../fonts/urbanist-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --tinta {
	syntax: "<color>";
	inherits: true;
	initial-value: #D8413A;
}

:root {
	--fondo: #EDECEC;
	--pannello: #F8F8F8;
	--bianco: #FFFFFF;
	--inchiostro: #09090B;
	--inchiostro-2: #3F3F46;
	--tenue: #71717A;
	--filo: #E4E4E7;
	--notte: #0B0B0D;
	--notte-2: #18181B;
	--rosso: #D8413A;
	--tinta: #D8413A;

	--r-xl: 40px;
	--r-lg: 24px;
	--r-md: 16px;
	--margine: 8px;
	--larghezza: 1240px;

	--om-card: 0 7.77px 16px rgba(0, 0, 0, .06), 0 3px 3px rgba(0, 0, 0, .1), inset 0 -8px 0 rgba(0, 0, 0, .05), inset 0 4px 0 rgba(255, 255, 255, .6);
	--om-card-scura: 0 7.77px 16px rgba(0, 0, 0, .25), 0 3px 3px rgba(0, 0, 0, .3), inset 0 -8px 0 #111, inset 0 4px 0 rgba(255, 255, 255, .06);
	--om-scuro: inset 0 -3px 0 #080808, inset 0 1px 0 rgba(255, 255, 255, .3), 0 2.77px 2.21px rgba(0, 0, 0, .12), 0 3px 3px rgba(0, 0, 0, .14), 0 12.5px 10px rgba(0, 0, 0, .13), 0 22px 18px rgba(0, 0, 0, .14);
	--om-chiaro: inset 0 -3px 0 #E9E9E9, inset 0 1px 0 rgba(255, 255, 255, .7), 0 2.77px 2.21px rgba(0, 0, 0, .12), 0 3px 3px rgba(0, 0, 0, .14);

	--facile: cubic-bezier(.2, .7, .2, 1);
	transition: --tinta .6s var(--facile);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--fondo);
	color: var(--inchiostro);
	font: 400 16px/1.6 "Urbanist", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
s { text-decoration: none; }
.ic { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }

.salta { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--inchiostro); color: #fff; border-radius: 99px; }
.salta:focus { top: 16px; }

.contenitore { width: min(100% - 48px, var(--larghezza)); margin-inline: auto; }

/* ── pezzi ricorrenti ─────────────────────────────────────────────────── */
.etichetta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 5px 12px 6px;
	border-radius: 8px;
	background: var(--bianco);
	box-shadow: var(--om-chiaro);
	color: var(--rosso);
	font-size: 14px; font-weight: 500; line-height: 1.3;
}
.etichetta s { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etichetta--scura { background: #1D1D20; color: #FF6B5F; box-shadow: inset 0 -2px 0 #0A0A0B, inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .3); }
.etichetta--centro { display: flex; width: max-content; margin-inline: auto; }

.titolo-sez {
	margin-top: 20px;
	font-size: clamp(36px, 5.2vw, 64px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -.035em;
	color: var(--inchiostro-2);
}
.titolo-sez .tenue { color: #A1A1AA; }
.titolo-sez--centro { text-align: center; }
.titolo-sez--chiaro { color: #FAFAFA; }
.testo-sez { margin-top: 20px; max-width: 46ch; color: var(--tenue); font-size: 17px; }
.testo-sez--centro { margin-inline: auto; text-align: center; }
.testo-sez--chiaro { color: #A1A1AA; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 24px;
	border-radius: 99px;
	font-size: 15px; font-weight: 600;
	transition: transform .25s var(--facile), box-shadow .25s var(--facile);
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--scuro { position: relative; overflow: hidden; isolation: isolate; background: var(--notte-2); color: #fff; box-shadow: var(--om-scuro); }
.btn--scuro::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%);
	transform: translateX(-110%);
	transition: transform .8s var(--facile);
}
.btn--scuro:hover::after { transform: translateX(110%); }
.btn--chiaro { background: var(--bianco); color: var(--inchiostro); box-shadow: var(--om-chiaro); }

.pillola {
	display: inline-flex; align-items: center;
	padding: 4px 12px; border-radius: 99px;
	border: 1px solid #D4D4D8;
	font-size: 13px; font-weight: 600; color: var(--inchiostro-2);
}

.sez { padding-block: clamp(80px, 11vw, 140px); }
.pannello {
	margin-inline: var(--margine);
	border-radius: var(--r-xl);
	background: var(--pannello);
}

/* ── testata ──────────────────────────────────────────────────────────── */
.testa {
	position: fixed; inset: 20px 0 auto; z-index: 50;
	display: flex; justify-content: center;
	padding-inline: 16px;
	pointer-events: none;
}
.testa__barra {
	position: relative;
	display: flex; align-items: center; gap: 28px;
	padding: 8px 8px 8px 22px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 6px 20px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .08);
	pointer-events: auto;
	transition: background .4s, box-shadow .4s;
}
.testa.is-scorsa .testa__barra { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 32px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .08); }
/* l'avanzamento della lettura: un filo nel colore della card sotto la barra */
.testa__barra::after {
	content: ""; position: absolute; left: 26px; right: 26px; bottom: 1px; height: 2px;
	border-radius: 2px; background: var(--tinta); pointer-events: none;
	transform: scaleX(var(--avanza, 0)); transform-origin: left;
}
.testa__logo img { width: auto; height: 20px; }
.testa__voci { display: flex; gap: 22px; font-size: 15px; font-weight: 500; }
.testa__voci a { position: relative; color: var(--inchiostro-2); transition: color .2s; }
.testa__voci a:hover, .testa__voci a[aria-current="true"] { color: var(--rosso); }
.testa__cta { min-height: 42px; padding: 10px 20px; font-size: 14px; }
.testa__menu { display: none; width: 42px; height: 42px; border-radius: 50%; background: var(--notte-2); box-shadow: var(--om-scuro); position: relative; }
.testa__menu span { position: absolute; left: 13px; right: 13px; height: 1.6px; background: #fff; border-radius: 2px; transition: transform .3s var(--facile), top .3s var(--facile); }
.testa__menu span:first-child { top: 17px; }
.testa__menu span:last-child { top: 24px; }
.testa__menu[aria-expanded="true"] span:first-child { top: 20.5px; transform: rotate(45deg); }
.testa__menu[aria-expanded="true"] span:last-child { top: 20.5px; transform: rotate(-45deg); }

/* ── apertura ─────────────────────────────────────────────────────────── */
.apre {
	position: relative;
	margin: var(--margine);
	min-height: min(92svh, 900px);
	display: grid; place-items: center;
	padding: 140px 24px 120px;
	border-radius: var(--r-lg);
	background: linear-gradient(180deg, #E3E5EA 0%, #F1F2F4 55%, #ECECEE 100%);
	overflow: hidden;
	isolation: isolate;
}
.apre__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* L'alone: tre anelli sfocati nel colore della card, come il render di Aigocy. */
.apre__onda { position: absolute; border-radius: 50%; }
.apre__onda--1 {
	width: 1100px; height: 1100px; right: -520px; top: -360px;
	background: radial-gradient(circle at 50% 50%, transparent 56%, color-mix(in srgb, var(--tinta) 85%, #000) 58.5%, var(--tinta) 60%, #FFF 63.5%, color-mix(in srgb, var(--tinta) 70%, #fff) 66%, transparent 72%);
	filter: blur(14px);
	transform: rotate(-18deg) scaleX(.86);
	opacity: .95;
	animation: deriva 18s ease-in-out infinite alternate;
}
.apre__onda--2 {
	width: 760px; height: 760px; right: -120px; top: -260px;
	background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 55%, transparent) 0%, transparent 62%);
	filter: blur(60px);
	opacity: .55;
}
.apre__onda--3 {
	width: 900px; height: 900px; left: -520px; bottom: -620px;
	background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, transparent 60%);
	filter: blur(30px);
}
/* l'alone segue il puntatore (--px, --py da -1 a 1, li scrive plezuro.js) */
.apre__onda--1 { translate: calc(var(--px, 0) * -40px) calc(var(--py, 0) * -26px); transition: translate 1.2s var(--facile); }
.apre__onda--2 { translate: calc(var(--px, 0) * 60px) calc(var(--py, 0) * 40px); transition: translate 1.5s var(--facile); }
.apre__onda--3 { translate: calc(var(--px, 0) * 30px) calc(var(--py, 0) * 24px); transition: translate 1.8s var(--facile); }
@keyframes deriva {
	from { transform: rotate(-18deg) scaleX(.86); }
	to { transform: rotate(-8deg) scaleX(.9) translateY(30px); }
}

.apre__in { position: relative; max-width: 1180px; text-align: center; }
.apre__titolo {
	margin-top: 26px;
	font-size: clamp(40px, 6.6vw, 96px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.045em;
	background: linear-gradient(180deg, #52525B 0%, #18181B 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	text-wrap: balance;
}
.apre__riga { display: block; }
@media (min-width: 1081px) { .apre__riga { white-space: nowrap; } }
.apre__sotto { max-width: 600px; margin: 30px auto 0; color: var(--inchiostro-2); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; }
.apre__bottoni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* La capsula nel titolo: una mini card che emette, con due tessere che girano. */
.capsula {
	position: relative;
	display: inline-block;
	width: 1.9em; height: .82em;
	border-radius: 99px;
	background: var(--tinta);
	margin: 0 .16em 0 0;
	box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .14), inset 0 3px 0 rgba(255, 255, 255, .25), 0 18px 30px color-mix(in srgb, var(--tinta) 40%, transparent);
	vertical-align: .02em;
	-webkit-text-fill-color: initial;
}
.capsula__card, .capsula__ico {
	position: absolute;
	display: grid; place-items: center;
	background: #fff;
	border-radius: .1em;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .14), inset 0 -3px 0 rgba(0, 0, 0, .06);
	color: var(--inchiostro);
}
.capsula__card { width: .78em; height: .48em; left: .26em; top: .17em; transform: rotate(-9deg); color: var(--tinta); }
.capsula__card .ic { width: .26em; height: .26em; stroke-width: 2.4; }
.capsula__ico { width: .4em; height: .4em; }
.capsula__ico .ic { width: .2em; height: .2em; stroke-width: 2.2; }
.capsula__ico--qr { right: .2em; top: -.22em; transform: rotate(12deg); animation: galleggia 5s ease-in-out infinite; }
.capsula__ico--rubrica { right: .55em; bottom: -.24em; transform: rotate(-14deg); animation: galleggia 6s ease-in-out -2s infinite; color: var(--tinta); }
@keyframes galleggia { 50% { translate: 0 -.06em; } }
.capsula { rotate: calc(var(--px, 0) * 6deg); transition: rotate .9s var(--facile); }

/* entrata dell'apertura: i pezzi salgono uno dopo l'altro, la capsula rimbalza */
.js .apre__in > *, .js .doc__testa > :not(.apre__fondo) { animation: entra 1s var(--facile) both; }
.js .apre__in > :nth-child(2), .js .doc__testa > :nth-child(3) { animation-delay: .12s; }
.js .apre__in > :nth-child(3), .js .doc__testa > :nth-child(4) { animation-delay: .28s; }
.js .apre__in > :nth-child(4), .js .doc__testa > :nth-child(5) { animation-delay: .42s; }
.js .apre .capsula { animation: capsula 1.1s .55s cubic-bezier(.3, 1.5, .5, 1) both; }
.js .apre__scorri { animation: entra 1s .7s var(--facile) both; }
@keyframes entra { from { opacity: 0; transform: translateY(28px); } }
@keyframes capsula { from { opacity: 0; transform: scale(.3) rotate(-14deg); } }

.apre__scorri {
	position: absolute; left: 50%; bottom: 0; translate: -50% 0;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 44px 14px;
	border-radius: 24px 24px 0 0;
	background: var(--fondo);
	font-size: 15px; font-weight: 500;
}
.apre__scorri .ic { width: 16px; height: 16px; color: var(--rosso); animation: scendi 1.8s ease-in-out infinite; }
@keyframes scendi { 50% { translate: 0 3px; } }

/* ── il prodotto ──────────────────────────────────────────────────────── */
.prova { padding-top: clamp(64px, 8vw, 100px); }
.prova__griglia { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 48px; }
.prova__lato { display: grid; gap: 20px; }

.demo {
	position: relative;
	display: flex; flex-direction: column;
	min-height: 600px;
	padding: 28px;
	border-radius: var(--r-lg);
	background: radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--tinta) 30%, #0B0B0D) 0%, #0B0B0D 60%);
	box-shadow: var(--om-card-scura);
	color: #FAFAFA;
	overflow: hidden;
}
.demo__testa { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; position: relative; z-index: 2; }
.demo__frase { margin-top: 12px; max-width: 30ch; color: #A1A1AA; font-size: 15px; }
.demo__didascalia { position: relative; z-index: 2; margin-top: 10px; text-align: center; color: #A1A1AA; font-size: 14px; min-height: 1.6em; }
.demo__invito { margin-top: 6px; color: #71717A; font-size: 14px; }
.solo-tocco { display: none; }
@media (hover: none), (pointer: coarse) {
	.solo-mouse { display: none; }
	.solo-tocco { display: inline; }
}

/* i comandi della prova: i quattro momenti (con la barra che si riempie) e la pausa */
.demo__comandi { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 36px; }   /* il telefono sfora il palco di 22px */
.demo__momenti { display: flex; gap: 4px; padding: 5px; border-radius: 99px; background: #1A1A1D; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 #050505; }
.demo__momento { position: relative; min-height: 32px; padding: 7px 14px 8px; border-radius: 99px; color: #A1A1AA; font-size: 13px; font-weight: 600; line-height: 1.2; transition: color .25s, background .25s; }
@media (hover: hover) { .demo__momento:hover { color: #fff; } }
.demo__momento[aria-pressed="true"] { background: #2A2A2F; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.demo__momento::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
	border-radius: 2px; background: var(--tinta);
	transform: scaleX(0); transform-origin: left;
}
.demo__momento[aria-pressed="true"]::after { transform: none; }
.demo.is-auto .demo__momento[aria-pressed="true"]::after { animation: riempi var(--durata, 2s) linear both; }
@keyframes riempi { from { transform: scaleX(0); } }
.demo__pausa { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: #1A1A1D; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 #050505; transition: transform .2s; }
@media (hover: hover) { .demo__pausa:hover { transform: scale(1.06); } }
.demo__pausa .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.demo__pausa .ic + .ic, .demo:not(.is-auto) .demo__pausa .ic:first-child { display: none; }
.demo:not(.is-auto) .demo__pausa .ic + .ic { display: block; fill: currentColor; }

/* l'onda del colore appena scelto */
.demo__onda { position: absolute; z-index: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; opacity: .45; pointer-events: none; animation: onda-colore 1.2s var(--facile) forwards; }
@keyframes onda-colore { to { transform: scale(44); opacity: 0; } }

.tinte { display: flex; gap: 8px; padding: 6px; border-radius: 99px; background: #1A1A1D; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 #050505; }
.tinte__b {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--c);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .25);
	transition: transform .25s var(--facile), box-shadow .25s;
}
.tinte__b:hover { transform: scale(1.1); }
.tinte__b[aria-pressed="true"] { box-shadow: 0 0 0 2px #1A1A1D, 0 0 0 4px #fff, inset 0 -3px 0 rgba(0, 0, 0, .2); }

/* il palco: card a sinistra, telefono a destra */
.palco { position: relative; flex: 1; min-height: 420px; margin-top: 8px; }
.palco__luce {
	position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; translate: -50% -50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--tinta) 32%, transparent) 0%, transparent 62%);
	filter: blur(20px);
}
.cartoncino {
	position: absolute; left: 6%; top: 34%;
	width: 250px; aspect-ratio: 85 / 55;
	perspective: 900px;
	transition: transform 1.1s var(--facile);
	transform: translate(0, 0);
	z-index: 1;
}
.cartoncino__faccia {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	padding: 18px 20px;
	border-radius: 12px;
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .22) 0%, transparent 50%),
		var(--tinta);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 -2px 0 rgba(0, 0, 0, .15) inset, 0 2px 0 color-mix(in srgb, var(--tinta) 70%, #000), 0 30px 50px rgba(0, 0, 0, .45);
	transform: rotateX(calc(18deg + var(--iy, 0deg))) rotateY(calc(22deg + var(--ix, 0deg))) rotateZ(-10deg);
	transition: transform 1.1s var(--facile);
	color: #fff;
}
/* la card si prende col mouse (o si tocca col dito) e si porta sul telefono */
.js .cartoncino { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.demo:not([data-passo="0"]) .cartoncino { cursor: pointer; }
.demo.is-mira[data-passo="0"] .cartoncino__faccia { transition-duration: .35s; }
.demo.is-presa .cartoncino { cursor: grabbing; transition: none; z-index: 3; }
.demo.is-presa .cartoncino__faccia { transform: rotateX(8deg) rotateY(10deg) rotateZ(-4deg) scale(1.05); transition-duration: .35s; }
.cartoncino.is-stampa .cartoncino__faccia { animation: ristampa .9s var(--facile); }
@keyframes ristampa { 50% { scale: 1.07; } to { rotate: y 360deg; } }
.cartoncino__nome { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.cartoncino__ruolo { margin-top: 2px; font-size: 10.5px; opacity: .85; }
.cartoncino__basso { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.cartoncino__nfc .ic { width: 22px; height: 22px; stroke-width: 2; }

.tel {
	position: absolute; right: 8%; top: 50%; translate: 0 -50%;
	width: 220px; aspect-ratio: 9 / 19;
	padding: 7px;
	border-radius: 38px;
	background: linear-gradient(145deg, #3A3A3F, #121214 45%, #2B2B30);
	box-shadow: inset 0 0 0 1.5px #4A4A50, 0 40px 60px rgba(0, 0, 0, .5);
	z-index: 2;
}
.tel__vetro { position: relative; height: 100%; border-radius: 31px; background: #000; overflow: hidden; }
.tel__isola { position: absolute; left: 50%; top: 9px; translate: -50% 0; width: 66px; height: 19px; border-radius: 99px; background: #000; z-index: 5; }
.tel__barra { position: absolute; inset: 11px 20px auto; display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; z-index: 4; color: #fff; transition: color .4s; }
.tel__batt { width: 18px; height: 9px; border-radius: 3px; border: 1px solid currentColor; opacity: .7; }
.tel__spento { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 70px; background: linear-gradient(180deg, #1B1B1F, #0B0B0D); transition: opacity .5s; }
.tel__ora { font-size: 46px; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.tel__data { margin-top: 6px; font-size: 11px; color: #A1A1AA; }

.tel__ui {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center;
	background: #F6F6F7; color: var(--inchiostro);
	opacity: 0; transform: translateY(24px);
	transition: opacity .5s var(--facile), transform .6s var(--facile);
}
.ui__cop { position: relative; width: 100%; height: 108px; background: linear-gradient(150deg, color-mix(in srgb, var(--tinta) 75%, #fff), var(--tinta)); }
.ui__marchio { position: absolute; left: 50%; bottom: -26px; translate: -50% 0; display: grid; place-items: center; width: 92px; height: 52px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.ui__marchio img { width: 100%; height: auto; }
.ui__nome { margin-top: 34px; font-size: 16px; font-weight: 700; }
.ui__ruolo { font-size: 10px; color: var(--tenue); }
.ui__salva { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 7px 14px; border-radius: 99px; background: var(--notte-2); color: #fff; font-size: 10.5px; box-shadow: inset 0 -2px 0 #000; transition: background .3s; }
.ui__salva .ic { width: 12px; height: 12px; }
.ui__salva b { font-weight: 600; }
.ui__salva-b { display: none; }
.ui__rapide { display: flex; gap: 8px; margin-top: 10px; }
.ui__rapide i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ui__rapide .ic { width: 14px; height: 14px; }
.ui__righe { display: grid; gap: 6px; width: calc(100% - 20px); margin-top: 12px; }
.ui__righe span { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.ui__righe .ic { width: 13px; height: 13px; color: var(--tenue); }
.ui__righe em { display: grid; font-style: normal; font-size: 9.5px; line-height: 1.25; }
.ui__righe b { font-size: 8px; font-weight: 500; color: var(--tenue); }

.onde { position: absolute; left: 45%; top: 47%; width: 10px; height: 10px; z-index: 1; pointer-events: none; }
.onde i { position: absolute; inset: 0; border: 2px solid var(--tinta); border-radius: 50%; opacity: 0; }

/* i quattro momenti della prova (data-passo sul .demo) */
.demo[data-passo="1"] .cartoncino,
.demo[data-passo="2"] .cartoncino,
.demo[data-passo="3"] .cartoncino { transform: translate(28%, -6%); }
.demo[data-passo="1"] .cartoncino__faccia,
.demo[data-passo="2"] .cartoncino__faccia,
.demo[data-passo="3"] .cartoncino__faccia { transform: rotateX(8deg) rotateY(10deg) rotateZ(-4deg); }
.demo[data-passo="1"] .onde i, .demo.is-vicina .onde i { animation: onda 1.4s ease-out infinite; }
.demo[data-passo="1"] .onde i:nth-child(2), .demo.is-vicina .onde i:nth-child(2) { animation-delay: .45s; }
.demo[data-passo="1"] .onde i:nth-child(3), .demo.is-vicina .onde i:nth-child(3) { animation-delay: .9s; }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(14); opacity: 0; } }
.demo[data-passo="2"] .tel__ui,
.demo[data-passo="3"] .tel__ui { opacity: 1; transform: none; }
.demo[data-passo="2"] .tel__spento,
.demo[data-passo="3"] .tel__spento { opacity: 0; }
.demo[data-passo="2"] .tel__barra,
.demo[data-passo="3"] .tel__barra { color: #fff; }
.demo[data-passo="3"] .ui__salva { background: #16A34A; }
/* con la scheda aperta il bottone invita al tocco */
.demo[data-passo="2"] .ui__salva { cursor: pointer; animation: invita 1.6s ease-in-out infinite; }
@keyframes invita { 50% { box-shadow: inset 0 -2px 0 #000, 0 0 0 5px color-mix(in srgb, var(--tinta) 40%, transparent); } }
.demo[data-passo="3"] .ui__salva-a { display: none; }
.demo[data-passo="3"] .ui__salva-b { display: inline; }

/* i due riquadri accanto */
.riquadro {
	position: relative;
	display: flex; flex-direction: column;
	padding: 28px;
	border-radius: var(--r-lg);
	background: var(--pannello);
	box-shadow: var(--om-card);
	overflow: hidden;
}
.riquadro__testo { color: var(--tenue); font-size: 15px; max-width: 36ch; }
.riquadro__titolo { margin-top: auto; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.riquadro__titolo + .riquadro__testo { margin-top: 8px; }
.riquadro__piede { margin-top: 4px; color: var(--tenue); font-size: 14px; }
.riquadro__piede b { color: var(--inchiostro); font-weight: 600; }
.numerone {
	margin-top: auto; align-self: flex-end;
	display: flex; align-items: baseline; gap: 8px;
	font-size: clamp(110px, 12vw, 168px); font-weight: 300; line-height: .9; letter-spacing: -.06em;
	background: linear-gradient(180deg, #D4D4D8, #F4F4F5);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.numerone small { font-size: 22px; font-weight: 500; letter-spacing: 0; color: #A1A1AA; -webkit-text-fill-color: #A1A1AA; }

.riquadro__ill { position: relative; height: 130px; display: flex; align-items: center; justify-content: center; gap: 46px; margin-bottom: 18px; }
.mini-tel, .mini-card { display: grid; place-items: center; background: #fff; box-shadow: var(--om-chiaro); color: var(--inchiostro); }
.mini-tel { width: 64px; height: 108px; border-radius: 16px; }
.mini-tel .ic { width: 28px; height: 28px; stroke-width: 1.4; }
.mini-card { width: 96px; height: 62px; border-radius: 10px; background: var(--tinta); color: #fff; transform: rotate(-8deg); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 10px 20px color-mix(in srgb, var(--tinta) 35%, transparent); }
.mini-card .ic { width: 24px; height: 24px; stroke-width: 2; }
.onde--statiche { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.onde--statiche i { opacity: 0; animation: onda 2.4s ease-out infinite; border-color: color-mix(in srgb, var(--tinta) 60%, #fff); }
.onde--statiche i:nth-child(2) { animation-delay: .8s; }
.onde--statiche i:nth-child(3) { animation-delay: 1.6s; }

/* ── come funziona ────────────────────────────────────────────────────── */
.come__griglia { display: grid; grid-template-columns: minmax(260px, 1fr) 2.2fr; gap: 48px; align-items: start; }
.come__testa { position: sticky; top: 120px; }
.frecce { display: flex; gap: 10px; margin-top: 36px; }
.frecce__b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bianco); box-shadow: var(--om-chiaro); transition: transform .2s, opacity .2s; }
.frecce__b:first-child .ic { transform: rotate(180deg); }
.frecce__b:hover { transform: translateY(-2px); }
.frecce__b:disabled { opacity: .4; cursor: default; transform: none; }
.frecce { align-items: center; }
.frecce__conta { margin-left: 8px; color: #A1A1AA; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.frecce__conta b { color: var(--inchiostro); font-weight: 600; }
.frecce__barra { position: relative; display: block; max-width: 220px; height: 3px; margin-top: 20px; border-radius: 3px; background: #E4E4E7; overflow: hidden; }
.frecce__barra i { position: absolute; inset: 0; border-radius: inherit; background: var(--tinta); transform: scaleX(var(--quota, .2)); transform-origin: left; transition: transform .45s var(--facile); }

.passi {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 340px);
	gap: 20px;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding: 20px 8px 28px;
	margin: -20px -8px -28px;
	scrollbar-width: none;
}
.passi::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .passi { cursor: grab; } }
.passi.is-tirato { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.passo {
	scroll-snap-align: start;
	display: flex; flex-direction: column;
	min-height: 400px;
	padding: 28px;
	border-radius: var(--r-lg);
	background: #F2F2F3;
	box-shadow: var(--om-card);
}
.passo__ico {
	display: grid; place-items: center;
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--tinta); color: #fff;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), inset 0 2px 0 rgba(255, 255, 255, .25), 0 12px 26px color-mix(in srgb, var(--tinta) 45%, transparent);
}
.passo__ico .ic { width: 24px; height: 24px; }
.passo__ico { transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.passo.is-attivo .passo__ico { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.passo__n { transition: color .4s; }
.passo.is-attivo .passo__n { color: var(--inchiostro-2); }
.passo__titolo { margin-top: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--filo); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.passo__testo { margin-top: 16px; color: var(--tenue); font-size: 15px; }
.passo__piede { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.passo__n { font-size: 52px; font-weight: 500; line-height: .8; letter-spacing: -.04em; color: #A1A1AA; }
.passo__n i { font-style: normal; color: #D4D4D8; }

/* ── vantaggi (bento) ─────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 56px; }
.bento__c {
	grid-column: span 5;
	display: flex; flex-direction: column;
	min-height: 360px;
	padding: 28px 32px 32px;
	border-radius: var(--r-xl);
	background: #F2F2F3;
	box-shadow: var(--om-card);
	overflow: hidden;
}
.bento__c--largo { grid-column: span 7; }
.bento__titolo { margin-top: auto; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.bento__testo { margin-top: 8px; max-width: 42ch; color: var(--tenue); font-size: 15px; }

.ill-campi { position: relative; display: grid; gap: 12px; margin: 8px 0 28px; }
.campo { display: flex; align-items: center; gap: 10px; }
.campo i { flex: 1; max-width: 330px; height: 30px; border-radius: 8px; background: #E9E9EB; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .06); }
.campo--corto i { max-width: 250px; }
.campo i { display: flex; align-items: center; padding-inline: 12px; overflow: hidden; }
.campo em { color: #A1A1AA; font-size: 13px; font-style: normal; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.campo--scrive em { color: var(--inchiostro-2); }
.is-scrive .campo--scrive em::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--tinta); animation: cursore .9s steps(1) infinite; }
@keyframes cursore { 50% { opacity: 0; } }
.pillola-ui { transition: box-shadow .3s; }
.is-scrive .campo--scrive .pillola-ui { box-shadow: var(--om-chiaro), 0 0 0 2px color-mix(in srgb, var(--tinta) 45%, transparent); }
.pillola-ui { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #fff; box-shadow: var(--om-chiaro); font-size: 13px; font-weight: 600; }
.pillola-ui .ic { width: 15px; height: 15px; color: var(--tenue); }
.avviso-ui {
	position: absolute; right: 0; bottom: -14px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 12px;
	background: var(--notte-2); color: #fff;
	font-size: 13px; font-weight: 600;
	box-shadow: var(--om-scuro);
	transition: opacity .4s var(--facile), transform .55s cubic-bezier(.3, 1.5, .5, 1);
}
.ill-campi.is-attesa .avviso-ui { opacity: 0; transform: translateY(10px) scale(.94); }
.avviso-ui s { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); }

.ill-tessere { position: relative; display: flex; justify-content: center; gap: 14px; margin: 26px 0 32px; }
.ill-tessere::before { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 18px; translate: 0 -50%; border-radius: 6px; background: #E4E4E7; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .06); z-index: 0; }
.ill-tessere span { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 16px; background: #fff; box-shadow: var(--om-chiaro), 0 10px 20px rgba(0, 0, 0, .06); }
.ill-tessere .ic { width: 30px; height: 30px; stroke-width: 1.5; }
.ill-tessere span:last-child { color: #16A34A; }
.ill-tessere span { z-index: 1; }
.ill-tessere::after { content: ""; position: absolute; left: -10%; top: 50%; z-index: 0; width: 34px; height: 6px; translate: 0 -50%; border-radius: 3px; background: var(--tinta); opacity: 0; }
.ill-tessere.is-vivo::after { animation: scorre 3.6s var(--facile) infinite; }
.ill-tessere.is-vivo span { animation: accendi 3.6s var(--facile) infinite; }
.ill-tessere.is-vivo span:nth-child(2) { animation-delay: .5s; }
.ill-tessere.is-vivo span:nth-child(3) { animation-delay: 1s; }
@keyframes accendi {
	0%, 34%, 100% { transform: none; }
	12% { transform: translateY(-8px); box-shadow: var(--om-chiaro), 0 18px 28px color-mix(in srgb, var(--tinta) 28%, transparent); }
}
@keyframes scorre { 0% { left: -10%; opacity: 0; } 8% { opacity: 1; } 40% { left: 100%; opacity: 0; } 100% { left: 100%; opacity: 0; } }

.ill-ventaglio { position: relative; height: 150px; margin-bottom: 24px; }
.ill-ventaglio span {
	position: absolute; left: 50%; top: 18px;
	width: 170px; height: 108px; margin-left: -85px;
	border-radius: 12px;
	background: var(--c);
	box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .13), inset 0 2px 0 rgba(255, 255, 255, .25), 0 14px 26px rgba(0, 0, 0, .12);
	transition: transform .5s var(--facile);
}
.ill-ventaglio span:nth-child(1) { transform: rotate(-16deg) translate(-34px, 6px); }
.ill-ventaglio span:nth-child(2) { transform: rotate(9deg) translate(30px, 2px); }
.ill-ventaglio__su { --c: var(--tinta); transform: rotate(-3deg); }
.bento__c:hover .ill-ventaglio span:nth-child(1) { transform: rotate(-22deg) translate(-48px, 8px); }
.bento__c:hover .ill-ventaglio span:nth-child(2) { transform: rotate(15deg) translate(44px, 4px); }
.ill-ventaglio.is-vivo .ill-ventaglio__su { animation: fluttua 4s ease-in-out infinite; }
@keyframes fluttua { 50% { translate: 0 -8px; } }

.ill-invio { position: relative; height: 170px; margin-bottom: 24px; }
.fumetto { position: absolute; left: 4%; top: 30px; display: grid; gap: 8px; width: 190px; padding: 18px 20px; border-radius: 22px 22px 22px 6px; background: #fff; box-shadow: var(--om-chiaro), 0 12px 24px rgba(0, 0, 0, .06); }
.fumetto i { height: 6px; border-radius: 3px; background: var(--inchiostro-2); }
.fumetto i:nth-child(2) { width: 78%; }
.fumetto i:nth-child(3) { width: 52%; background: var(--tinta); }
.condividi { position: absolute; right: 6%; top: 0; width: 210px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--om-chiaro), 0 12px 24px rgba(0, 0, 0, .06); }
.condividi__testa { display: flex; align-items: center; gap: 10px; }
.condividi__tondo { width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); }
.condividi__testa i { flex: 1; height: 8px; border-radius: 4px; background: #E4E4E7; }
.condividi__icone { display: flex; gap: 8px; margin-top: 14px; }
.condividi__icone b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #F4F4F5; }
.condividi__icone .ic { width: 17px; height: 17px; }
.ill-invio.is-vivo .fumetto i { transform-origin: left; animation: righe 4.8s var(--facile) infinite; }
.ill-invio.is-vivo .fumetto i:nth-child(2) { animation-delay: .15s; }
.ill-invio.is-vivo .fumetto i:nth-child(3) { animation-delay: .3s; }
.ill-invio.is-vivo .condividi__icone b { animation: scegli 4.8s var(--facile) infinite; }
.ill-invio.is-vivo .condividi__icone b:nth-child(2) { animation-delay: .35s; }
.ill-invio.is-vivo .condividi__icone b:nth-child(3) { animation-delay: .7s; }
.ill-invio.is-vivo .condividi__icone b:nth-child(4) { animation-delay: 1.05s; }
.ill-invio.is-vivo .spunta-ui { animation: arriva 4.8s cubic-bezier(.3, 1.5, .5, 1) infinite; }
@keyframes righe { from { transform: scaleX(0); } 22%, to { transform: none; } }
@keyframes scegli { 0%, 26%, 100% { background: #F4F4F5; color: var(--inchiostro); transform: none; } 7%, 18% { background: var(--tinta); color: #fff; transform: translateY(-3px); } }
@keyframes arriva { 0%, 36% { opacity: 0; transform: scale(.5); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }
.spunta-ui { position: absolute; right: 2%; bottom: 0; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: #fff; box-shadow: var(--om-chiaro), 0 10px 20px rgba(0, 0, 0, .08); color: #16A34A; }

/* ── la scheda (snodo) ────────────────────────────────────────────────── */
.snodo { position: relative; display: grid; grid-template-columns: 1fr 220px 1fr; gap: 20px; align-items: center; margin-top: 64px; }
.snodo__fili { position: absolute; inset: 12% 22%; border: 1px solid #D4D4D8; border-radius: 24px; z-index: 0; }
.snodo__fili::before { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; border-top: 1px solid #D4D4D8; }
.snodo__col { position: relative; z-index: 1; display: grid; gap: 20px; }
.voce { padding: 22px 24px; border-radius: var(--r-lg); background: #F2F2F3; box-shadow: var(--om-card); }
.voce__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--notte-2); color: #fff; box-shadow: var(--om-scuro); }
.voce__ico .ic { width: 18px; height: 18px; }
.voce h3 { margin-top: 16px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.voce p { margin-top: 4px; color: var(--tenue); font-size: 14.5px; }
.snodo__centro { position: relative; z-index: 1; display: grid; place-items: center; }
.snodo__centro::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: conic-gradient(from 0deg, #D8413A, #EA8B3A, #F2A93B, #4FB0D0, #875C96, #6B7480, #D8413A); filter: blur(46px); opacity: .45; animation: gira 14s linear infinite; }
.snodo__tessera { position: relative; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 36px; background: var(--notte-2); box-shadow: var(--om-scuro), 0 30px 60px rgba(0, 0, 0, .25); }
.snodo__anello { width: 96px; height: 96px; }
@keyframes gira { to { transform: rotate(360deg); } }
/* i fili si disegnano dal centro; le voci si accendono a turno (plezuro.js) */
.js .snodo__fili { clip-path: inset(0 50%); transition: clip-path 1.4s var(--facile) .2s; }
.js .snodo.is-visto .snodo__fili { clip-path: inset(-2px); }
.snodo.is-vivo .snodo__anello { animation: gira 40s linear infinite; }
.snodo__tessera.is-batte { animation: batte .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes batte { 40% { scale: 1.06; } }
.js .voce.svela { transition: opacity .8s var(--facile), transform .8s var(--facile), box-shadow .4s var(--facile); }
.voce.is-acceso { box-shadow: var(--om-card), 0 0 0 2px color-mix(in srgb, var(--tinta) 55%, transparent), 0 18px 40px color-mix(in srgb, var(--tinta) 16%, transparent); }
.voce__ico { transition: background .4s, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.voce.is-acceso .voce__ico { background: var(--tinta); transform: rotate(-8deg) scale(1.08); }

/* ── foto (nuovo) ─────────────────────────────────────────────────────── */
.fascia-foto { padding-top: clamp(64px, 8vw, 110px); }
.foto-grande { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: #D4D4D8; box-shadow: var(--om-card); aspect-ratio: 16 / 7; }
.foto-grande img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.js .foto-grande img { transform: scale(1.12) translateY(var(--sposta, 0%)); will-change: transform; }
.foto-grande::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(9, 9, 11, .62)); pointer-events: none; }
.foto-grande__dida { position: absolute; left: clamp(20px, 4vw, 48px); right: 20px; bottom: clamp(20px, 4vw, 44px); z-index: 1; display: grid; gap: 4px; color: #fff; }
.foto-grande__titolo { font-size: clamp(26px, 3.6vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
.foto-grande__testo { font-size: clamp(15px, 1.4vw, 18px); color: rgba(255, 255, 255, .82); }

/* ── materiali (nuovo) ────────────────────────────────────────────────── */
.mat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.mat__v { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-lg); background: #F2F2F3; box-shadow: var(--om-card); }
.mat__prova { display: grid; place-items: center; height: 150px; margin-bottom: 22px; border-radius: 18px; background: #E7E7E9; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .06); }
.mat__card {
	display: flex; flex-direction: column; justify-content: space-between;
	width: 156px; aspect-ratio: 85.6 / 54; padding: 12px 14px;
	border-radius: 9px;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 12px 22px rgba(0, 0, 0, .16);
	position: relative; overflow: hidden;
	transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-6deg);
	transition: transform .7s var(--facile);
}
/* col mouse sopra la card si inclina e il riflesso la attraversa */
.mat__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .5), transparent 55%); opacity: 0; transition: opacity .4s; }
.mat__prova.is-piega .mat__card { transition-duration: .15s; }
.mat__prova.is-piega .mat__card::after { opacity: .8; }
.mat__nome { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.mat__segno { align-self: flex-end; }
.mat__segno .ic { width: 18px; height: 18px; }
.mat__prova--pvc .mat__card { background: linear-gradient(140deg, color-mix(in srgb, var(--tinta) 70%, #fff), var(--tinta)); color: #fff; }
.mat__prova--metallo .mat__card { background: linear-gradient(120deg, #2a2a2d, #1d1d1f 40%, #3a3a3e 60%, #1d1d1f); color: #D4D4D8; }
.mat__prova--legno .mat__card { background: repeating-linear-gradient(100deg, #dcc08e 0 7px, #d3b47e 7px 9px, #e0c695 9px 15px), #dcc08e; color: #5a3d1c; }
.mat__prova--carta .mat__card { width: 150px; aspect-ratio: 85 / 55; border-radius: 2px; background: #FBFBF9; color: var(--inchiostro); box-shadow: 0 1px 0 #E4E4E7, 0 12px 22px rgba(0, 0, 0, .12); }
.mat__titolo { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.mat__testo { margin-top: 8px; color: var(--tenue); font-size: 14.5px; }
.mat__dati { display: grid; gap: 8px; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 500; color: var(--inchiostro-2); }
.mat__dati li { display: flex; align-items: center; gap: 8px; }
.mat__dati .ic { width: 17px; height: 17px; color: var(--tenue); }

/* ── per chi (nuovo) ──────────────────────────────────────────────────── */
.chi__griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.chi__v { display: flex; flex-direction: column; border-radius: var(--r-lg); background: #F2F2F3; box-shadow: var(--om-card); overflow: hidden; }
.chi__foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #D4D4D8; transition: transform 1s var(--facile); }
.chi__v:hover .chi__foto { transform: scale(1.05); }
.chi__in { padding: 22px 24px 26px; }
.chi__titolo { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.chi__testo { margin-top: 6px; color: var(--tenue); font-size: 15px; }

/* ── confronto (scuro) ────────────────────────────────────────────────── */
.scuro {
	position: relative;
	margin: var(--margine);
	border-radius: var(--r-xl);
	background: var(--notte);
	color: #FAFAFA;
	overflow: hidden;
	isolation: isolate;
}
.scuro__fascio { position: absolute; left: 50%; top: 0; width: 760px; height: 560px; translate: -50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 75%); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); filter: blur(4px); z-index: -1; }
.scuro__linguetta { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 300px; height: 14px; border-radius: 16px 16px 0 0; background: var(--fondo); }

.tabella { max-width: 980px; margin: 56px auto 0; border-radius: var(--r-lg); background: #121214; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px rgba(0, 0, 0, .3); overflow: hidden; }
.tabella__riga { display: grid; grid-template-columns: 1fr 1fr; }
.tabella__riga + .tabella__riga { border-top: 1px solid rgba(255, 255, 255, .06); }
.tabella__riga > span { display: flex; align-items: flex-start; gap: 12px; padding: 20px 28px; font-size: 16px; line-height: 1.45; }
.tabella__riga > span + span { border-left: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .025); }
.tabella__riga--testa > span { padding-block: 18px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #71717A; }
.tabella__riga--testa b { color: #fff; }
.tabella__no { color: #71717A; }
.tabella__no .ic { width: 18px; height: 18px; margin-top: 2px; color: #52525B; }
.tabella__si { color: #FAFAFA; }
.tabella__si .ic { width: 18px; height: 18px; margin-top: 2px; padding: 2px; border-radius: 50%; background: var(--tinta); color: #fff; stroke-width: 2.6; }
/* le righe entrano una dopo l'altra e le spunte scattano */
.tabella__riga:nth-child(2) { --i: 1; }
.tabella__riga:nth-child(3) { --i: 2; }
.tabella__riga:nth-child(4) { --i: 3; }
.tabella__riga:nth-child(5) { --i: 4; }
.tabella__riga:nth-child(6) { --i: 5; }
.tabella__riga:nth-child(7) { --i: 6; }
.tabella.is-in .tabella__riga:not(.tabella__riga--testa) { animation: riga .7s var(--facile) both; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
.tabella.is-in .tabella__si .ic { animation: scatta .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 450ms); }
@keyframes riga { from { opacity: 0; transform: translateY(16px); } }
@keyframes scatta { from { transform: scale(0) rotate(-45deg); } }
.tabella__riga > span { transition: background .3s, color .3s; }
.tabella__riga:not(.tabella__riga--testa):hover > .tabella__si { background: color-mix(in srgb, var(--tinta) 14%, transparent); }
.tabella__riga:not(.tabella__riga--testa):hover > .tabella__no { color: #52525B; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .2); }

/* ── domande ──────────────────────────────────────────────────────────── */
.domande__griglia { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.domande__griglia .btn { margin-top: 32px; }
.faq { display: grid; gap: 12px; interpolate-size: allow-keywords; }
/* apertura morbida dove il browser lo sa fare (::details-content); altrove si apre di colpo */
.faq__v::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s var(--facile), content-visibility .45s allow-discrete; }
.faq__v[open]::details-content { block-size: auto; }
.faq__v { border-radius: 20px; background: var(--pannello); box-shadow: var(--om-card); }
.faq__v summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px 24px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; list-style: none; transition: padding .45s var(--facile), color .2s; }
.faq__v summary:hover { color: var(--rosso); }
.faq__v[open] summary { padding-bottom: 16px; }
.faq__v summary::-webkit-details-marker { display: none; }
.faq__segno { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fff; box-shadow: var(--om-chiaro); transition: transform .3s var(--facile), background .3s, color .3s; }
.faq__segno .ic { width: 16px; height: 16px; }
.faq__v[open] .faq__segno { transform: rotate(45deg); background: var(--notte-2); color: #fff; }
.faq__v p { padding: 0 24px 26px; color: var(--tenue); font-size: 16px; max-width: 60ch; }

/* ── chiusura ─────────────────────────────────────────────────────────── */
.coda {
	position: relative;
	margin: var(--margine);
	min-height: 520px;
	display: grid; place-items: center;
	padding: 100px 24px;
	border-radius: var(--r-xl);
	background: linear-gradient(160deg, #D5D8DF 0%, #E8E9EC 60%);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}
.coda__fondo { position: absolute; inset: 0; z-index: -1; }
.coda .apre__onda--1 { right: auto; left: 30%; top: 10%; width: 1300px; height: 1300px; }
.coda .apre__onda--2 { right: -200px; top: auto; bottom: -300px; }
.coda__titolo { font-size: clamp(38px, 6vw, 80px); font-weight: 600; line-height: 1.02; letter-spacing: -.045em; color: var(--inchiostro); }
.coda__testo { max-width: 46ch; margin: 22px auto 34px; color: var(--inchiostro-2); font-size: 17px; }

/* ── piede ────────────────────────────────────────────────────────────── */
.piede { padding: 100px 0 32px; }
.piede__alto { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 24px; }
.piede__tessera { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--notte-2); box-shadow: var(--om-scuro); }
.piede__anello { width: 46px; height: 46px; }
.piede__titolo { margin-top: 24px; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.piede__sotto { margin-top: 10px; max-width: 46ch; color: var(--tenue); font-size: 15px; }
.piede__pillole { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.pillola-link { display: inline-flex; align-items: center; gap: 14px; padding: 10px 10px 10px 22px; border-radius: 16px; background: var(--pannello); box-shadow: var(--om-card); font-size: 15px; font-weight: 600; transition: transform .25s var(--facile); }
.pillola-link:hover { transform: translateY(-2px); }
.pillola-link span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--notte-2); color: #fff; }
.pillola-link .ic { width: 15px; height: 15px; }
.piede__basso { width: min(100% - 48px, var(--larghezza)); margin: 80px auto 0; padding-top: 28px; border-top: 1px solid #D9D9DC; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; }
.piede__voci { display: flex; flex-wrap: wrap; gap: 22px; }
.piede__voci a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.piede__legale { color: var(--tenue); }
.piede__su { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.piede__su .ic { width: 15px; height: 15px; }

/* ── luce che segue il puntatore sopra i riquadri ─────────────────────── */
.bento__c, .voce, .mat__v, .passo, .chi__v, .doc__corpo section { position: relative; }
:is(.riquadro, .bento__c, .voce, .mat__v, .passo, .chi__v, .doc__corpo section)::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tinta) 9%, transparent), transparent 65%);
	opacity: 0; transition: opacity .4s;
}
@media (hover: hover) and (pointer: fine) {
	:is(.riquadro, .bento__c, .voce, .mat__v, .passo, .chi__v, .doc__corpo section):hover::after { opacity: 1; }
}

/* ── informative (privacy e cookie) ───────────────────────────────────── */
.doc__testa {
	position: relative;
	margin: var(--margine);
	padding: 150px 24px 84px;
	border-radius: var(--r-lg);
	background: linear-gradient(180deg, #E3E5EA 0%, #F1F2F4 55%, #ECECEE 100%);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}
.doc__testa .apre__onda--1 { width: 900px; height: 900px; right: -560px; top: -420px; }
.doc__testa .apre__onda--2 { width: 600px; height: 600px; right: -160px; top: -300px; }
.doc__titolo {
	margin-top: 22px;
	font-size: clamp(48px, 7vw, 96px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.045em;
	background: linear-gradient(180deg, #52525B 0%, #18181B 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}
.doc__sotto { max-width: 56ch; margin: 22px auto 0; color: var(--inchiostro-2); font-size: clamp(16px, 1.4vw, 18px); text-wrap: balance; }
.doc__data { margin-top: 18px; color: var(--tenue); font-size: 14px; }

.doc__griglia { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; padding-block: clamp(48px, 7vw, 96px); }
.doc__indice { position: sticky; top: 110px; padding: 22px 14px 14px; border-radius: var(--r-lg); background: var(--pannello); box-shadow: var(--om-card); }
.doc__indice-titolo { padding-inline: 10px; color: var(--tenue); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.doc__indice ol { display: grid; gap: 2px; margin-top: 10px; counter-reset: voce; }
.doc__indice a { display: flex; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--inchiostro-2); font-size: 15px; font-weight: 500; line-height: 1.3; transition: background .2s, color .2s; }
.doc__indice a::before { counter-increment: voce; content: counter(voce, decimal-leading-zero); color: #A1A1AA; font-variant-numeric: tabular-nums; }
.doc__indice a:hover, .doc__indice a[aria-current="true"] { background: var(--bianco); color: var(--rosso); box-shadow: var(--om-chiaro); }

.doc__corpo { display: grid; gap: 16px; max-width: 780px; }
.doc__corpo section { padding: 32px 36px 34px; border-radius: var(--r-lg); background: var(--pannello); box-shadow: var(--om-card); }
.doc__corpo h2 { color: var(--inchiostro); font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.doc__corpo p { margin-top: 14px; color: var(--inchiostro-2); font-size: 16.5px; line-height: 1.65; }
.doc__corpo b { color: var(--inchiostro); font-weight: 600; }
.doc__corpo a { color: var(--rosso); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc__dati, .doc__tabella { display: grid; gap: 8px; margin-top: 18px; }
.doc__dati li, .doc__tabella li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px; border-radius: 12px; background: var(--bianco); box-shadow: var(--om-chiaro); font-weight: 500; }
.doc__dati li { justify-content: flex-start; }
.doc__dati span { min-width: 110px; color: var(--tenue); }
.doc__tabella span { color: var(--inchiostro-2); }
.doc__tabella b { display: inline-flex; align-items: center; gap: 6px; color: #16A34A; }
.doc__tabella b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.doc__elenco { display: grid; gap: 10px; margin-top: 16px; }
.doc__elenco li { position: relative; padding-left: 22px; color: var(--inchiostro-2); font-size: 16.5px; }
.doc__elenco li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta); }

/* ── comparsa allo scorrere ───────────────────────────────────────────── */
.js .svela { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--facile), transform .8s var(--facile); }
.js .svela.is-in { opacity: 1; transform: none; }

/* ── schermi medi ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.testa__voci { gap: 16px; font-size: 14px; }
	.testa__barra { gap: 18px; }
	.prova__griglia { grid-template-columns: 1fr; }
	.prova__lato { grid-template-columns: 1fr 1fr; }
	.come__griglia { grid-template-columns: 1fr; gap: 36px; }
	.come__testa { position: static; }
	.bento__c, .bento__c--largo { grid-column: span 6; }
	.snodo { grid-template-columns: 1fr 1fr; }
	.snodo__centro { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; }
	.snodo__fili { display: none; }
	.domande__griglia { grid-template-columns: 1fr; gap: 40px; }
	.mat { grid-template-columns: 1fr 1fr; }
	.chi__griglia { grid-template-columns: 1fr 1fr; }
	.chi__v:last-child { grid-column: 1 / -1; }
	.chi__v:last-child .chi__foto { aspect-ratio: 21 / 9; }
	.doc__griglia { grid-template-columns: 1fr; gap: 24px; }
	.doc__indice { position: static; }
	.doc__indice ol { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
	.doc__corpo { max-width: none; }
}

/* ── telefono ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.testa { inset-block-start: 12px; }
	.testa__barra { width: 100%; justify-content: space-between; padding: 6px 6px 6px 18px; }
	.testa__menu { display: block; }
	.testa__cta { display: none; }
	.testa__voci {
		position: absolute; left: 0; right: 0; top: calc(100% + 8px);
		flex-direction: column; gap: 0;
		padding: 8px; border-radius: 24px;
		background: rgba(255, 255, 255, .96);
		box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
		font-size: 17px;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .25s, transform .25s var(--facile), visibility .25s;
	}
	.testa__voci a { display: block; padding: 14px 16px; border-radius: 14px; }
	.testa__voci a:hover { background: #F4F4F5; }
	.testa.is-aperto .testa__voci { opacity: 1; visibility: visible; transform: none; }
	.contenitore { width: calc(100% - 32px); }
	.apre { padding: 120px 16px 110px; min-height: 0; }
	.apre__onda--1 { width: 760px; height: 760px; right: -460px; top: -200px; }
	.prova__lato { grid-template-columns: 1fr; }
	.demo { padding: 22px 18px; min-height: 560px; }
	.palco { min-height: 400px; }
	.cartoncino { left: 0; top: 8%; width: 190px; }
	.cartoncino__nome { font-size: 19px; }
	.tel { right: 2%; top: 58%; width: 180px; }
	.demo[data-passo="1"] .cartoncino,
	.demo[data-passo="2"] .cartoncino,
	.demo[data-passo="3"] .cartoncino { transform: translate(18%, 14%); }
	.onde { left: 50%; top: 40%; }
	.bento__c, .bento__c--largo { grid-column: 1 / -1; min-height: 0; padding: 24px; border-radius: var(--r-lg); }
	.avviso-ui { position: static; justify-self: start; margin-top: 4px; }
	.ill-invio { height: 190px; }
	.fumetto { left: 0; top: 70px; width: 160px; }
	.condividi { right: 0; width: 190px; }
	.snodo { grid-template-columns: 1fr; }
	.tabella__riga { grid-template-columns: 1fr; }
	.tabella__riga > span + span { border-left: 0; border-top: 1px dashed rgba(255, 255, 255, .06); }
	.tabella__riga--testa { display: none; }
	.tabella__riga > span { padding: 16px 20px; font-size: 15px; }
	.passi { grid-auto-columns: 82%; }
	.foto-grande { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
	.foto-grande img { object-position: 62% 50%; }
	.mat, .chi__griglia { grid-template-columns: 1fr; }
	.chi__v:last-child .chi__foto { aspect-ratio: 3 / 2; }
	.piede__basso { flex-direction: column; text-align: center; }
	.piede__voci { justify-content: center; }
	.demo__comandi { gap: 8px; }
	.demo__momento { padding: 7px 10px 8px; font-size: 12.5px; }
	.demo__momento::after { left: 10px; right: 10px; }
	.doc__testa { padding: 120px 16px 64px; }
	.doc__corpo section { padding: 24px 20px 26px; }
	.doc__corpo p, .doc__elenco li { font-size: 16px; }
}

@media (max-width: 420px) {
	.cartoncino { width: 160px; }
	.tel { width: 160px; }
	.ill-campi .pillola-ui { font-size: 12px; padding: 5px 9px; }
	.avviso-ui { font-size: 12px; }
	.demo__comandi { margin-top: 16px; }
	.demo__momenti { gap: 2px; padding: 4px; }
	.demo__momento { padding: 7px 8px 8px; font-size: 12px; }
	.demo__momento::after { left: 8px; right: 8px; }
	.demo__pausa { width: 34px; height: 34px; }
}

/* ── movimento ridotto ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	html { scroll-behavior: auto; }
	.js .svela { opacity: 1; transform: none; }
	.js .foto-grande img { transform: none; }
	.js .snodo__fili { clip-path: none; }
}