/* ==========================================================================
   "Created by": pulsante in rilievo che invita a toccarlo, e finestra "Vuoi anche tu il tuo sito?"
   ========================================================================== */
.creato { position: relative; margin: 44px 0 4px; text-align: center; }
/* Nuvoletta sopra il pulsante: invita a toccarlo, galleggia piano. */
.creato__invito {
	position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 1; white-space: nowrap;
	padding: 6px 12px; border-radius: 999px; pointer-events: none;
	font: 800 12px/1 var(--lc-sans, system-ui, sans-serif); letter-spacing: .02em; color: #1a1917;
	background: linear-gradient(180deg, #f6d48a, #e0a93c); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 6px 14px -6px rgb(122 80 13 / .7);
	transform: translateX(-50%); animation: creato-galleggia 2.6s ease-in-out infinite;
}
.creato__invito::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #e0a93c; }
.creato__invito span { display: inline-block; animation: creato-scintilla 1.8s ease-in-out infinite; }
@keyframes creato-galleggia { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
@keyframes creato-scintilla { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.35) rotate(45deg); opacity: .7; } }
.creato__btn {
	--base:
		inset 0 1px 0 rgb(255 255 255 / .22),
		inset 0 -2px 0 rgb(0 0 0 / .35),
		0 2px 3px rgb(21 20 19 / .3),
		0 14px 26px -12px rgb(21 20 19 / .65);
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 9px 9px 20px; border-radius: 999px;
	color: #e9e4dc; text-decoration: none;
	font: 600 12px/1 var(--lc-sans, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase;
	background: linear-gradient(180deg, #47443f 0%, #2a2826 55%, #1a1917 100%);
	box-shadow: var(--base), 0 0 0 0 rgb(214 168 76 / .5);
	transition: transform .25s cubic-bezier(.3, 1.35, .5, 1);
	animation: creato-alone 2.4s ease-out infinite;
	-webkit-tap-highlight-color: transparent;
}
/* Un filo di luce dorata gira intorno al pulsante. */
@property --creato-giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.creato__btn::before {
	content: ""; position: absolute; inset: 0; z-index: 0; padding: 2px; border-radius: inherit; pointer-events: none;
	background: conic-gradient(from var(--creato-giro), rgb(240 197 111 / 0) 0deg 240deg, rgb(240 197 111 / .9) 300deg, #fff3cf 330deg, rgb(240 197 111 / .9) 345deg, rgb(240 197 111 / 0) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: creato-giro 2.8s linear infinite;
}
@keyframes creato-giro { to { --creato-giro: 360deg; } }
.creato__btn strong { font-size: 14.5px; font-weight: 800; letter-spacing: .04em; text-transform: none; color: #ecbd62; text-shadow: 0 1px 0 rgb(0 0 0 / .4); }
.creato__btn:hover { color: #fff; transform: translateY(-2px); }
.creato__btn:active { transform: translateY(1px) scale(.97); }
.creato__btn:focus-visible { outline: 2px solid #ecbd62; outline-offset: 3px; }
/* Un riflesso di luce che passa ogni tanto */
.creato__btn::after {
	content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: 0; width: 34%; pointer-events: none;
	background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / .24) 50%, rgb(255 255 255 / 0));
	transform: translateX(-180%) skewX(-18deg);
	animation: creato-luce 3.6s ease-in-out 1s infinite;
}
.creato__freccia {
	display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	color: #1a1917; background: linear-gradient(180deg, #f0c56f, #b98a24);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 2px 5px rgb(0 0 0 / .4);
	transition: transform .35s cubic-bezier(.3, 1.35, .5, 1);
}
.creato__btn:hover .creato__freccia { transform: rotate(45deg); }
@keyframes creato-alone {
	0% { box-shadow: var(--base), 0 0 0 0 rgb(226 176 76 / .7); }
	70%, 100% { box-shadow: var(--base), 0 0 0 14px rgb(226 176 76 / 0); }
}
/* La freccina ogni tanto fa un piccolo salto. */
.creato__freccia { animation: creato-salto 3.2s cubic-bezier(.3, 1.4, .5, 1) 1s infinite; }
@keyframes creato-salto { 0%, 70%, 100% { transform: none; } 78% { transform: translate(2px, -3px) rotate(12deg) scale(1.12); } 86% { transform: none; } }
@keyframes creato-luce {
	0%, 55% { transform: translateX(-180%) skewX(-18deg); }
	85%, 100% { transform: translateX(420%) skewX(-18deg); }
}

/* ---------- La finestra ---------- */
html.lc-creato-aperta { overflow: hidden; }
.creato-finestra {
	width: 100%; max-width: 100%; max-height: 100%; margin: auto 0 0; padding: 0; border: 0;
	background: transparent; color: var(--lc-ink, #262523); overflow: visible;
	font-family: var(--lc-sans, system-ui, sans-serif); text-align: start; line-height: 1.5;
}
.creato-finestra:not([open]) { display: none; }
.creato-finestra::backdrop { background: rgb(21 20 19 / .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.creato-finestra[open] { animation: creato-sali .45s cubic-bezier(.2, .9, .25, 1); }
.creato-finestra[open]::backdrop { animation: creato-sfuma .3s ease-out; }
@keyframes creato-sali { from { opacity: 0; transform: translateY(60px); } }
@keyframes creato-sfuma { from { opacity: 0; } }
.creato-finestra__foglio {
	max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
	border-radius: 28px 28px 0 0; background: var(--lc-surface, #f1efeb);
	box-shadow: 0 -24px 60px -20px rgb(0 0 0 / .55);
	padding-bottom: env(safe-area-inset-bottom);
}

/* Testata scura, con un riflesso di brace */
.creato-finestra__testa {
	position: relative; padding: 28px 22px 22px; border-radius: 28px 28px 0 0; color: #f3efe8;
	background:
		radial-gradient(120% 130% at 100% 0%, rgb(192 58 20 / .38), rgb(192 58 20 / 0) 55%),
		radial-gradient(90% 120% at 0% 100%, rgb(201 154 63 / .22), rgb(201 154 63 / 0) 60%),
		linear-gradient(160deg, #36332f, #1b1a18);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
}
.creato-finestra__chiudi {
	position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center;
	border: 0; border-radius: 50%; cursor: pointer; color: #f3efe8;
	background: rgb(255 255 255 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
}
.creato-finestra__chiudi:hover { background: rgb(255 255 255 / .2); }
.creato-finestra__occhiello { margin: 0 52px 10px 0; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #ecbd62; }
.creato-finestra__titolo { margin: 0 0 10px; font: 800 27px/1.1 var(--lc-sans, system-ui, sans-serif); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.creato-finestra__intro { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: rgb(243 239 232 / .82); }
.creato-finestra__punti { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.creato-finestra__punti li { position: relative; padding-inline-start: 30px; font-size: 14px; font-weight: 700; color: #f3efe8; }
.creato-finestra__punti li::before {
	content: ""; position: absolute; left: 0; top: -1px; width: 21px; height: 21px; border-radius: 50%;
	background: linear-gradient(180deg, #f0c56f, #b98a24); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4);
}
.creato-finestra__punti li::after {
	content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 9px;
	border: solid #1a1917; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}

/* Modulo */
.creato-modulo { padding: 20px 22px 24px; }
.creato-modulo[hidden] { display: none; }
.creato-modulo__guida { margin: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--lc-muted, #55524d); }
.creato-modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.creato-modulo__riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 10px; }
.creato-modulo__campo { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--lc-muted, #55524d); }
.creato-modulo__campo input, .creato-modulo__campo textarea {
	width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px;
	font: 500 16px/1.4 var(--lc-sans, system-ui, sans-serif); color: var(--lc-ink, #262523);
	background: var(--lc-bg, #e6e4e0); box-shadow: var(--lc-incavo, inset 0 2px 5px rgb(38 37 35 / .14));
	-webkit-appearance: none; appearance: none; transition: box-shadow .2s;
}
.creato-modulo__campo textarea { resize: vertical; min-height: 104px; }
.creato-modulo__campo input:focus, .creato-modulo__campo textarea:focus { outline: none; box-shadow: var(--lc-incavo, inset 0 2px 5px rgb(38 37 35 / .14)), 0 0 0 2px var(--lc-gold, #7a500d); }
.creato-modulo__aiuto { font-size: 12.5px; font-weight: 700; color: var(--lc-errore-testo, #7a2410); }
.creato-modulo__aiuto[hidden] { display: none; }
.creato-modulo [aria-invalid="true"] { box-shadow: var(--lc-incavo, inset 0 2px 5px rgb(38 37 35 / .14)), 0 0 0 2px var(--lc-ember, #c03a14) !important; }
.creato-modulo__consenso { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--lc-muted, #55524d); }
.creato-modulo__consenso input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--lc-ember, #c03a14); border-radius: 6px; }
.creato-modulo__consenso input[aria-invalid="true"] { outline: 2px solid var(--lc-ember, #c03a14); outline-offset: 2px; box-shadow: none !important; }
.creato-modulo__esito { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--lc-errore-testo, #7a2410); background: rgb(192 58 20 / .1); }
.creato-modulo__esito[hidden] { display: none; }
.creato-modulo__invia {
	width: 100%; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
	font: 800 16.5px/1 var(--lc-sans, system-ui, sans-serif);
	background: linear-gradient(180deg, var(--lc-ember-light, #d4471d), var(--lc-ember, #c03a14) 55%, #a9310f);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -2px 0 rgb(0 0 0 / .14), 0 2px 3px rgb(110 28 6 / .3), 0 14px 30px -12px rgb(192 58 20 / .75);
	text-shadow: 0 1px 0 rgb(0 0 0 / .18); transition: transform .15s;
}
.creato-modulo__invia:active { transform: translateY(1px) scale(.99); }
.creato-modulo__invia:disabled { opacity: .7; cursor: progress; }
.creato-modulo__link { margin: 14px 0 0; text-align: center; font-size: 14px; }
.creato-modulo__link a { color: var(--lc-gold, #7a500d); font-weight: 700; }

/* Grazie */
.creato-finestra__grazie { padding: 30px 22px 28px; text-align: center; outline: none; }
.creato-finestra__grazie[hidden] { display: none; }
.creato-finestra__spunta {
	display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; color: #fff;
	background: linear-gradient(180deg, #2f9a5c, #1e6e3f);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 12px 24px -10px rgb(30 110 63 / .7);
	animation: creato-spunta .6s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes creato-spunta { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.creato-finestra__grazie-titolo { margin: 0 0 6px; font: 800 24px/1.15 var(--lc-sans, system-ui, sans-serif); letter-spacing: -.02em; color: var(--lc-strong, #151413); }
.creato-finestra__grazie p { margin: 0 0 18px; color: var(--lc-muted, #55524d); }

@media (min-width: 720px) {
	.creato-finestra { width: min(560px, calc(100% - 40px)); margin: auto; }
	.creato-finestra__foglio { border-radius: 28px; box-shadow: 0 40px 90px -30px rgb(0 0 0 / .6); }
	.creato-finestra[open] { animation-name: creato-entra; }
	@keyframes creato-entra { from { opacity: 0; transform: translateY(20px) scale(.97); } }
	.creato-finestra__titolo { font-size: 31px; }
	.creato-finestra__testa { padding: 32px 30px 26px; }
	.creato-modulo { padding: 24px 30px 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.creato__btn, .creato__btn::after, .creato__btn::before, .creato__invito, .creato__invito span, .creato__freccia, .creato-finestra[open], .creato-finestra[open]::backdrop, .creato-finestra__spunta { animation: none !important; }
}
/* La ® del nome, piccola e in alto come un marchio registrato */
.creato__marchio { font-size: .6em; line-height: 0; vertical-align: .62em; margin-left: 1px; font-weight: 700; }