/* Il sito di localmoe.it: bianco, etereo, la richiesta al centro; la squadra di robottini come identità. */
:root {
  --fondo: #fbfcff;
  --fondo-2: #f3f6fd;
  --inchiostro: #0b1020;
  --testo: #3d465c;
  --tenue: #6b7489;
  --riga: rgba(15, 23, 42, .08);
  --carta: rgba(255, 255, 255, .74);
  --cielo: #4fb3ff;
  --lilla: #8b6cff;
  --rosa: #ff7ab6;
  --menta: #2fd3a6;
  --pesca: #ff9a6b;
  --grad: linear-gradient(92deg, #2f9bff 0%, #7a63ff 52%, #ff6fae 100%);
  --ombra: 0 1px 2px rgba(16, 24, 64, .04), 0 12px 40px -12px rgba(40, 60, 140, .18);
  --ombra-forte: 0 2px 4px rgba(16, 24, 64, .05), 0 30px 80px -24px rgba(50, 60, 160, .32);
  --r: 22px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Roboto", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--inchiostro); line-height: 1.08; letter-spacing: -.03em; margin: 0; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contenitore { width: min(1160px, calc(100% - 32px)); margin-inline: auto; }
.nascosto { display: none !important; }
:focus-visible { outline: 3px solid rgba(79, 179, 255, .55); outline-offset: 2px; border-radius: 10px; }

/* ---------- pulsanti ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 700; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn-nero { background: var(--inchiostro); color: #fff; box-shadow: 0 8px 24px -10px rgba(11, 16, 32, .6); }
.btn-nero:hover { background: #1c2340; }
.btn-chiaro { background: #fff; color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); }
.btn-chiaro:hover { box-shadow: inset 0 0 0 1px rgba(79, 179, 255, .45), var(--ombra); }
.btn-tenue { background: rgba(15, 23, 42, .05); color: var(--inchiostro); }
.btn-tenue:hover { background: rgba(15, 23, 42, .09); }
.btn svg { width: 18px; height: 18px; }

/* ---------- striscia delle donazioni ---------- */
.dona-striscia { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 48px 9px 16px; font-size: 14px; color: #2c3350; background: linear-gradient(90deg, #eaf5ff, #f1ecff 50%, #ffeef6); border-bottom: 1px solid var(--riga); text-align: center; }
.dona-striscia .cuore { color: var(--rosa); flex: none; }
.dona-striscia button.link { border: 0; background: none; padding: 0; font-weight: 800; color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.dona-striscia .chiudi { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--tenue); font-size: 20px; line-height: 1; }
.dona-striscia .chiudi:hover { background: rgba(15, 23, 42, .06); }

/* ---------- testata ---------- */
.testata { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); background: rgba(251, 252, 255, .72); border-bottom: 1px solid transparent; transition: border-color .2s; }
.testata.scorsa { border-bottom-color: var(--riga); }
.testata .contenitore { display: flex; align-items: center; gap: 18px; height: 68px; }
.marchio { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 21px; letter-spacing: -.03em; color: var(--inchiostro); text-decoration: none; }
.marchio .testina { width: 38px; height: 38px; }
.menu { display: flex; gap: 4px; margin-inline: auto; }
.menu a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 650; font-size: 15px; color: #2c3350; }
.menu a:hover { background: rgba(15, 23, 42, .05); }
.testata .azioni { display: flex; gap: 8px; }
.menu-tasto { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(15, 23, 42, .05); cursor: pointer; }
.menu-tasto span, .menu-tasto span::before, .menu-tasto span::after { display: block; width: 18px; height: 2px; margin: auto; background: var(--inchiostro); border-radius: 2px; position: relative; content: ""; }
.menu-tasto span::before { position: absolute; top: -6px; }
.menu-tasto span::after { position: absolute; top: 6px; }

/* ---------- il cielo dietro ---------- */
.cielo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cielo .nube { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: deriva 22s ease-in-out infinite alternate; }
.cielo .n1 { width: 520px; height: 420px; left: -120px; top: -60px; background: #bfe3ff; }
.cielo .n2 { width: 480px; height: 420px; right: -140px; top: 40px; background: #ded3ff; animation-delay: -6s; }
.cielo .n3 { width: 420px; height: 320px; left: 30%; top: 360px; background: #ffd9e9; opacity: .45; animation-delay: -12s; }
.cielo .n4 { width: 300px; height: 260px; right: 18%; top: 420px; background: #c8f5e6; opacity: .45; animation-delay: -3s; }
.cielo .puntini { position: absolute; inset: 0; background-image: radial-gradient(rgba(60, 80, 160, .16) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%); }
.cielo .forma { position: absolute; opacity: .7; animation: galleggia 9s ease-in-out infinite; }
@keyframes deriva { to { transform: translate(40px, 30px) scale(1.08); } }
@keyframes galleggia { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); } }

/* ---------- eroe con la richiesta ---------- */
.eroe { position: relative; padding: 64px 0 56px; text-align: center; }
.eroe > .contenitore { position: relative; z-index: 1; }
.eroe .etichetta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--riga); font-size: 14px; font-weight: 650; color: #2c3350; }
.eroe .etichetta b { padding: 2px 9px; border-radius: 999px; background: var(--inchiostro); color: #fff; font-size: 12px; letter-spacing: .04em; }
.eroe h1 { margin: 22px auto 14px; font-size: clamp(38px, 6.6vw, 76px); font-weight: 900; }
.eroe h1 > span { display: block; }
.eroe .sotto { margin: 0 auto 112px; max-width: 46ch; font-size: clamp(16px, 2vw, 19px); color: var(--testo); }

.banco { position: relative; max-width: 760px; margin: 0 auto; }
.banco .sul-banco { position: absolute; left: 50%; top: -88px; width: 112px; transform: translateX(-50%); z-index: 2; }
.banco .vola-sx { position: absolute; left: -108px; top: -30px; width: 92px; }
.banco .vola-dx { position: absolute; right: -96px; top: 40px; width: 78px; }
.richiesta { position: relative; z-index: 1; text-align: left; background: rgba(255, 255, 255, .86); border-radius: 28px; padding: 18px 18px 14px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .07), var(--ombra-forte); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .2s; }
.richiesta:focus-within { box-shadow: inset 0 0 0 1.5px rgba(79, 179, 255, .55), 0 0 0 6px rgba(79, 179, 255, .12), var(--ombra-forte); }
.richiesta textarea { display: block; width: 100%; min-height: 96px; max-height: 260px; resize: none; border: 0; outline: 0; background: transparent; font-size: 18px; line-height: 1.5; color: var(--inchiostro); padding: 6px 6px 10px; }
.richiesta textarea::placeholder { color: #8a93a8; }
.richiesta-piede { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tipi { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.tipo { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(15, 23, 42, .045); font-size: 14px; font-weight: 650; color: #2c3350; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.tipo svg { width: 16px; height: 16px; }
.tipo:hover { background: rgba(15, 23, 42, .08); }
.tipo[aria-pressed="true"] { background: #fff; color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px rgba(122, 99, 255, .55), 0 4px 14px -6px rgba(122, 99, 255, .5); }
.invia { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--inchiostro); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .18s, background .18s, opacity .18s; }
.invia:hover { background: #222a4a; transform: translateY(-1px); }
.invia:disabled { opacity: .35; cursor: default; transform: none; }
.invia svg { width: 22px; height: 22px; }
.nota-gratis { margin: 18px 0 0; font-size: 14px; color: var(--tenue); display: flex; justify-content: center; gap: 8px 16px; flex-wrap: wrap; }
.nota-gratis span { display: inline-flex; align-items: center; gap: 6px; }
.nota-gratis svg { width: 16px; height: 16px; color: var(--menta); }
.esempi { margin: 22px auto 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; max-width: 760px; }
.esempio { border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--riga); font-size: 14px; color: #2c3350; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.esempio:hover { box-shadow: inset 0 0 0 1px rgba(79, 179, 255, .5), var(--ombra); transform: translateY(-1px); }

/* ---------- sezioni ---------- */
.sezione { padding: 96px 0; position: relative; overflow-x: clip; }
.sezione .titolo { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sezione .titolo .occhiello { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.sezione .titolo h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 900; }
.sezione .titolo p { margin: 14px auto 0; max-width: 56ch; font-size: 18px; }

/* ---------- vetrina a scorrimento ---------- */
.giostra { position: relative; }
.giostra-binario { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px max(16px, calc((100% - 1000px) / 2)) 30px; scrollbar-width: none; }
.giostra-binario::-webkit-scrollbar { display: none; }
.lastra { flex: 0 0 min(1000px, 88%); scroll-snap-align: center; position: relative; border-radius: 30px; padding: 28px; background: linear-gradient(160deg, var(--c1, #eaf5ff), var(--c2, #f4efff)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), var(--ombra); display: grid; grid-template-columns: 1fr 1.7fr; gap: 28px; align-items: center; min-height: 440px; overflow: hidden; }
.lastra .racconto .tipo-lavoro { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 800; color: #2c3350; }
.lastra h3 { margin: 16px 0 10px; font-size: clamp(26px, 3vw, 36px); font-weight: 900; }
.lastra .racconto p { margin: 0 0 18px; }
.lastra .dati { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: #2c3350; }
.lastra .dati b { display: block; font-size: 22px; color: var(--inchiostro); letter-spacing: -.02em; }
.schermi { position: relative; padding-right: 40px; }
.finestra { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -28px rgba(30, 40, 110, .45), inset 0 0 0 1px rgba(15, 23, 42, .06); }
.finestra .barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f6f7fb; border-bottom: 1px solid var(--riga); }
.finestra .barra i { width: 9px; height: 9px; border-radius: 50%; background: #dde1ec; }
.finestra .barra .indirizzo { margin-left: 10px; flex: 1; height: 18px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga); font-size: 11px; line-height: 18px; padding: 0 8px; color: var(--tenue); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.finestra img { width: 100%; height: auto; aspect-ratio: 1200 / 656; object-fit: cover; object-position: top; }
.telefono { position: absolute; right: 0; bottom: -18px; width: 27%; border-radius: 26px; padding: 6px; background: #0b1020; box-shadow: 0 30px 50px -20px rgba(11, 16, 32, .55); }
.telefono img { border-radius: 20px; width: 100%; height: auto; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; }
.console .schermo img { height: 100%; }
.giostra-comandi { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.giostra-comandi .freccia { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); cursor: pointer; display: grid; place-items: center; }
.giostra-comandi .freccia svg { width: 20px; height: 20px; }
.puntini-giostra { display: flex; gap: 8px; }
.puntini-giostra button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.puntini-giostra button::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #c8cfe0; transition: width .25s, background .25s; }
.puntini-giostra button[aria-current="true"]::after { width: 24px; background: var(--inchiostro); }

/* ---------- come funziona ---------- */
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.passo { position: relative; padding: 24px 22px 26px; border-radius: var(--r); background: var(--carta); box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.passo .chi { width: 92px; height: 92px; margin: -6px 0 10px -4px; }
.passo .numero { position: absolute; top: 20px; right: 22px; font-weight: 900; font-size: 15px; color: #b5bdd0; }
.passo h3 { font-size: 21px; margin-bottom: 8px; }
.passo p { margin: 0; font-size: 15.5px; }
.passo .nome { font-weight: 800; }
.fasi-esempio { margin: 40px auto 0; max-width: 720px; padding: 22px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); }
.fasi-esempio h3 { font-size: 16px; margin-bottom: 14px; color: var(--tenue); font-weight: 750; letter-spacing: 0; }

/* le fasi del lavoro: le frasi semplici che vede il cliente */
.fasi { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fase { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: var(--tenue); transition: background .3s, color .3s; }
.fase .faccina { width: 40px; height: 40px; border-radius: 50%; background: var(--fondo-2); display: grid; place-items: center; overflow: hidden; }
.fase .faccina svg { width: 46px; margin-top: 6px; }
.fase .ora { font-size: 13px; color: #6b7489; font-variant-numeric: tabular-nums; }
.fase.fatta { color: var(--testo); }
.fase.fatta .ora::before { content: "✓ "; color: var(--menta); font-weight: 900; }
.fase.ora-in-corso { background: linear-gradient(90deg, rgba(79, 179, 255, .1), rgba(139, 108, 255, .08)); color: var(--inchiostro); font-weight: 700; }
.fase.ora-in-corso .faccina { background: #fff; box-shadow: 0 0 0 2px rgba(79, 179, 255, .4); }
.fase.ora-in-corso .ora { color: var(--lilla); }
.fase.dopo { opacity: .55; }
.lavorando { display: inline-flex; gap: 3px; }
.lavorando i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: salta 1.2s infinite; }
.lavorando i:nth-child(2) { animation-delay: .15s; }
.lavorando i:nth-child(3) { animation-delay: .3s; }
@keyframes salta { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- invito alla sala giochi ---------- */
.gioca { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.gioca .testo h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 900; margin: 12px 0 14px; }
.gioca .testo p { font-size: 18px; margin: 0 0 22px; }
.elenco-giochi { display: grid; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.elenco-giochi li { display: flex; align-items: center; gap: 12px; font-weight: 650; color: var(--inchiostro); }
.elenco-giochi li span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #0f1530; color: #7ff3ff; font-size: 14px; font-weight: 900; }
.console { position: relative; margin: 0 auto; width: min(420px, 100%); padding: 22px 22px 70px; border-radius: 40px 40px 56px 56px; background: linear-gradient(170deg, #ffffff, #e7ecfb); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06), inset 0 -8px 20px rgba(80, 100, 180, .12), var(--ombra-forte); }
.console .schermo { border-radius: 22px; overflow: hidden; background: #0b1030; aspect-ratio: 4 / 4.4; box-shadow: inset 0 0 0 4px #1a2250; }
.console .schermo img { width: 100%; height: 100%; object-fit: cover; }
.console .tasti { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-between; align-items: center; padding: 0 44px; }
.console .croce { width: 46px; height: 46px; position: relative; }
.console .croce::before, .console .croce::after { content: ""; position: absolute; background: #c7cfe6; border-radius: 6px; }
.console .croce::before { left: 15px; top: 0; width: 16px; height: 46px; }
.console .croce::after { top: 15px; left: 0; height: 16px; width: 46px; }
.console .ab { display: flex; gap: 10px; }
.console .ab i { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); box-shadow: 0 4px 10px -4px rgba(122, 99, 255, .7); }
.console .mascotte-console { position: absolute; width: 96px; right: -34px; top: -54px; }

/* ---------- siti ospitati e modificabili ---------- */
.ospitati { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.ospitati h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 900; margin: 12px 0 14px; }
.ospitati p { font-size: 18px; }
.punti { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.punti li { display: flex; gap: 12px; align-items: flex-start; }
.punti li svg { flex: none; width: 24px; height: 24px; color: var(--lilla); margin-top: 2px; }
.mini-editor { border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra-forte); overflow: hidden; }
.mini-editor .barra { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--riga); font-weight: 750; color: var(--inchiostro); font-size: 14px; }
.mini-editor .barra .stato { margin-left: auto; font-size: 12px; font-weight: 700; color: #0b8a68; }
.mini-editor .campi { padding: 16px; display: grid; gap: 12px; }
.campo label { display: block; font-size: 12px; font-weight: 750; color: var(--tenue); margin-bottom: 4px; }
.campo input, .campo textarea { width: 100%; border: 0; border-radius: 12px; padding: 10px 12px; background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--riga); outline: 0; font-size: 15px; color: var(--inchiostro); }
.campo input:focus, .campo textarea:focus { box-shadow: inset 0 0 0 1.5px rgba(79, 179, 255, .6); background: #fff; }
.mini-editor .foto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini-editor .foto i { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg, #ffd9b8, #ff9a6b); }
.mini-editor .foto i:nth-child(2) { background: linear-gradient(135deg, #cfe9ff, #4fb3ff); }
.mini-editor .foto i:nth-child(3) { background: linear-gradient(135deg, #e7dcff, #8b6cff); }
.mini-editor .foto i:nth-child(4) { background: rgba(15, 23, 42, .04); box-shadow: inset 0 0 0 1.5px dashed rgba(15, 23, 42, .15); display: grid; place-items: center; font-style: normal; font-size: 22px; color: var(--tenue); }

/* ---------- domande ---------- */
.domande { max-width: 780px; margin: 0 auto; display: grid; gap: 10px; }
.domande details { border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga); }
.domande summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; font-weight: 750; color: var(--inchiostro); position: relative; font-size: 17px; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--tenue); border-bottom: 2.5px solid var(--tenue); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.domande details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.domande details p { margin: 0; padding: 0 20px 18px; }

/* ---------- finale e piede ---------- */
.finale { text-align: center; }
.finale .riquadro { position: relative; overflow: hidden; border-radius: 36px; padding: 64px 24px; background: linear-gradient(140deg, #eaf5ff, #efe9ff 50%, #ffeef6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), var(--ombra); }
.finale h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 900; margin: 6px 0 14px; }
.finale p { font-size: 18px; margin: 0 auto 26px; max-width: 46ch; }
.finale .squadra { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 8px; }
.finale .squadra > div { width: 84px; }
.finale .squadra > div:nth-child(2) { width: 120px; }
.piede { padding: 48px 0 36px; border-top: 1px solid var(--riga); font-size: 15px; }
.piede .contenitore { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.piede h4 { margin: 0 0 10px; color: var(--inchiostro); font-size: 14px; }
.piede ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.piede a { text-decoration: none; color: var(--testo); }
.piede a:hover { color: var(--inchiostro); text-decoration: underline; }
.piede .firma { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--riga); color: var(--tenue); font-size: 14px; }

/* ---------- finestre (accesso, donazioni) ---------- */
dialog.finestrella { width: min(440px, calc(100% - 24px)); border: 0; border-radius: 28px; padding: 0; background: #fff; color: var(--testo); box-shadow: var(--ombra-forte); }
dialog.finestrella::backdrop { background: rgba(20, 26, 60, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.finestrella .dentro { padding: 28px 26px 24px; position: relative; }
.finestrella .chiudi-finestra { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .05); cursor: pointer; font-size: 20px; color: var(--tenue); }
.finestrella .testa { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.finestrella .testa .chi { width: 64px; flex: none; }
.finestrella h2 { font-size: 24px; }
.finestrella .testa p { margin: 2px 0 0; font-size: 15px; }
.schede { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--fondo-2); margin-bottom: 16px; }
.schede button { border: 0; border-radius: 999px; min-height: 40px; background: transparent; font-weight: 750; cursor: pointer; color: var(--tenue); }
.schede button[aria-selected="true"] { background: #fff; color: var(--inchiostro); box-shadow: var(--ombra); }
.modulo { display: grid; gap: 12px; }
.modulo .btn { width: 100%; min-height: 48px; margin-top: 4px; }
.modulo .errore { min-height: 1.2em; margin: 0; font-size: 14px; color: #d0396f; }
.modulo .piccolo { font-size: 13px; color: var(--tenue); margin: 0; }

/* ---------- assistenza ---------- */
.assistenza { position: fixed; right: 18px; bottom: 18px; z-index: 40; }
.assistenza .apri { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra-forte); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.assistenza .apri svg { width: 60px; margin-top: 8px; }
.assistenza .fumetto-saluto { position: absolute; right: 74px; bottom: 14px; white-space: nowrap; padding: 8px 14px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); font-size: 14px; font-weight: 650; color: var(--inchiostro); animation: entra .4s ease both; }
.assistenza .pannello { position: absolute; right: 0; bottom: 78px; width: min(360px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra-forte); overflow: hidden; animation: entra .25s ease both; }
.pannello .capo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(90deg, #eaf5ff, #f1ecff); }
.pannello .capo .chi { width: 44px; height: 44px; border-radius: 50%; background: #fff; overflow: hidden; display: grid; place-items: center; }
.pannello .capo .chi svg { width: 50px; margin-top: 8px; }
.pannello .capo b { color: var(--inchiostro); display: block; line-height: 1.2; }
.pannello .capo small { color: var(--menta); font-weight: 700; }
.pannello .capo button { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); cursor: pointer; font-size: 18px; }
.pannello .discorso { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 8px; align-content: start; }
.bolla { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.bolla.sua { background: var(--fondo-2); color: var(--inchiostro); border-bottom-left-radius: 6px; }
.bolla.mia { justify-self: end; background: var(--inchiostro); color: #fff; border-bottom-right-radius: 6px; }
.pannello .rapide { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.pannello .rapide button { border: 0; border-radius: 999px; padding: 6px 12px; font-size: 13px; background: #fff; box-shadow: inset 0 0 0 1px rgba(122, 99, 255, .35); color: #4b3fb0; cursor: pointer; }
.pannello form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--riga); }
.pannello form input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 10px 14px; background: var(--fondo-2); outline: 0; }
.pannello form button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--inchiostro); color: #fff; cursor: pointer; display: grid; place-items: center; }
.pannello form button svg { width: 18px; height: 18px; }
@keyframes entra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- personaggi ---------- */
.p { overflow: visible; }
.p .p-corpo { animation: fluttua 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.p .p-ombra { animation: ombra 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.p .p-occhi { animation: batti 5.2s infinite; transform-box: fill-box; transform-origin: center; }
.p .p-antenna { animation: pulsa 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.p .p-braccio-d { animation: saluta 3.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 10%; }
.p .p-elica { animation: elica .5s linear infinite; transform-box: fill-box; transform-origin: center; }
.p .p-fuoco { animation: fiamma .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.p .p-flash { animation: lampeggia 4s infinite; }
.p .p-cuore { animation: pulsa 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.p-pixi .p-corpo { animation-duration: 3.6s; }
.p-lampo .p-corpo { animation: decolla 3s ease-in-out infinite; }
@keyframes fluttua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ombra { 0%, 100% { transform: scaleX(1); opacity: .12; } 50% { transform: scaleX(.86); opacity: .08; } }
@keyframes batti { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes saluta { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-28deg); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(-26deg); } }
@keyframes elica { 0% { transform: scaleX(1); } 50% { transform: scaleX(.35); } 100% { transform: scaleX(1); } }
@keyframes fiamma { from { transform: scaleY(.85); } to { transform: scaleY(1.12); } }
@keyframes lampeggia { 0%, 88%, 100% { fill: #fff6c9; } 90% { fill: #ffffff; filter: drop-shadow(0 0 6px #fff3a0); } }
@keyframes decolla { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

/* ---------- comparse allo scorrere ---------- */
.js .compare { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .compare.visto { opacity: 1; transform: none; }

/* ---------- avviso dell'anteprima ---------- */
.prova { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; z-index: 35; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); font-size: 12px; font-weight: 700; color: var(--tenue); }

/* ---------- la tua area ---------- */
body.fermo { overflow: hidden; }
.nome-utente { align-self: center; padding: 0 6px; font-weight: 750; color: var(--inchiostro); }
.area { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: start; padding: 26px 0 96px; }
.area.sala-chiusa { grid-template-columns: minmax(0, 1fr); }
.area.sala-chiusa .sala { display: none; }
.area:not(.sala-chiusa) .gioca-tasto { display: none; }
.area-centro { min-width: 0; }
.area-fuori { max-width: 560px; margin: 0 auto; padding: 72px 16px; text-align: center; }
.area-fuori .chi { width: 124px; margin: 0 auto 12px; }
.area-fuori h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 900; margin-bottom: 12px; }
.area-fuori p { font-size: 18px; margin: 0; }
.area-fuori .pulsanti { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.saluto { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 18px; }
.saluto h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 900; }
.rimaste { margin: 8px 0 0; }
.rimaste b { color: var(--inchiostro); }
.richiesta.piccola textarea { min-height: 72px; font-size: 17px; }
.errore-richiesta { min-height: 1.4em; margin: 10px 6px 0; color: #c22f63; font-weight: 650; }
.blocco { margin-top: 30px; }
.blocco > h2 { font-size: 24px; font-weight: 850; margin-bottom: 14px; }
.blocco > .tenue { margin: -6px 0 16px; color: var(--tenue); }
.blocco { scroll-margin-top: 90px; }
/* il tuo account: chi sei, e le poche cose che si possono fare, una per riga */
.conto { display: grid; gap: 10px; max-width: 640px; }
.conto-chi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); }
.conto-chi .faccina { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--fondo-2); display: grid; place-items: center; overflow: hidden; }
.conto-chi .faccina svg { width: 50px; margin-top: 6px; }
.conto-chi b { display: block; color: var(--inchiostro); font-size: 17px; }
.conto-chi small { color: var(--tenue); font-size: 14px; word-break: break-all; }
.conto-voce { border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga); }
.conto-voce summary { list-style: none; cursor: pointer; padding: 15px 50px 15px 18px; font-weight: 750; color: var(--inchiostro); position: relative; min-height: 48px; }
.conto-voce summary::-webkit-details-marker { display: none; }
.conto-voce summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid var(--tenue); border-bottom: 2.5px solid var(--tenue); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.conto-voce[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.conto-voce > p { margin: 0; padding: 0 18px 12px; color: var(--testo); }
.conto-voce > .modulo, .conto-voce > .btn { margin: 0 18px 16px; }
.conto-voce > .btn { margin-bottom: 8px; }
.conto-voce > p.errore { min-height: 1.2em; padding-bottom: 10px; font-size: 14px; color: #d0396f; }
.conto-voce .modulo .btn { width: auto; justify-self: start; }
.conto-voce .modulo .btn.fatto { background: #0a6e52; color: #fff; box-shadow: none; }
.conto-voce.pericolo summary { color: #b02a55; }
.btn-rosso { background: #c22f63; color: #fff; box-shadow: 0 8px 24px -12px rgba(194, 47, 99, .7); }
.btn-rosso:hover { background: #a82555; }
.modulo .piccolo a { color: inherit; font-weight: 700; }
.conto-elenco { margin: 0; padding: 0 18px 6px 36px; display: grid; gap: 8px; color: var(--testo); }
.conto-elenco b { color: var(--inchiostro); }
.conto-voce > p a { font-weight: 700; color: var(--inchiostro); }
.nota-dati { margin: 8px 6px 0; font-size: 13px; color: var(--tenue); }
.lavoro > .fila-pulsanti { margin-top: 12px; }

/* l'iscrizione: cosa teniamo, detto prima di entrare, e la casella che lo conferma */
.finestrella .dentro { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.campo .aiuto { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: var(--tenue); }
.campo .aiuto .link, button.link { border: 0; background: none; padding: 0; font: inherit; font-weight: 750; color: #4b3fb0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.patto { padding: 14px 14px 12px; border-radius: 16px; background: linear-gradient(180deg, #f3f8ff, #f6f2ff); box-shadow: inset 0 0 0 1px rgba(122, 99, 255, .22); }
.patto > b { display: block; color: var(--inchiostro); font-size: 14.5px; margin-bottom: 6px; }
.patto ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; color: var(--testo); }
.patto ul b { color: var(--inchiostro); }
.spunta { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga); font-size: 14px; line-height: 1.4; color: var(--inchiostro); cursor: pointer; }
.spunta input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #5b4fd6; cursor: pointer; }
.spunta a { color: inherit; font-weight: 750; }

/* in prima pagina: quello che teniamo e quello che no, a colpo d'occhio */
.patto-grande { border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra-forte); padding: 10px; display: grid; gap: 4px; }
.patto-grande .riga { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; }
.patto-grande .riga svg, .patto-grande .riga i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; }
.patto-grande .riga.si { background: #f0fbf6; }
.patto-grande .riga.si svg { color: #0a8a66; }
.patto-grande .riga.no { background: #fdf3f6; }
.patto-grande .riga.no i { background: #f8dbe5; color: #b02a55; font-size: 17px; line-height: 1; }
.patto-grande .riga.no b { text-decoration: line-through; text-decoration-color: rgba(176, 42, 85, .5); }
.patto-grande b { display: block; color: var(--inchiostro); font-size: 16px; line-height: 1.25; }
.patto-grande small { color: var(--tenue); font-size: 13.5px; }

/* il robottino: per parlare con una persona c'è WhatsApp, assistenza e preventivi */
.pannello .whatsapp { padding: 10px 12px 12px; border-top: 1px solid var(--riga); background: #f3fbf6; }
.pannello .whatsapp small { display: block; margin: 0 2px 8px; font-size: 12.5px; font-weight: 700; color: #0a6e52; }
.pannello .whatsapp div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pannello .whatsapp a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 6px 10px; border-radius: 14px; background: #128c5e; color: #fff; font-weight: 750; font-size: 14px; line-height: 1.15; text-align: center; text-decoration: none; }
.pannello .whatsapp a:hover { background: #0e7850; }
.pannello .whatsapp svg { flex: none; width: 18px; height: 18px; }
.elenco-richieste { display: grid; gap: 16px; }
.vuoto { padding: 26px 22px; border-radius: var(--r); background: var(--carta); box-shadow: inset 0 0 0 1px var(--riga); text-align: center; }
.vuoto .chi { width: 84px; margin: 0 auto 8px; }
.vuoto b { color: var(--inchiostro); }
.vuoto p { margin: 4px 0 0; color: var(--tenue); }
.lavoro { padding: 18px 18px 14px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); transition: box-shadow .5s; scroll-margin-top: 90px; }
.lavoro.evidenzia { box-shadow: inset 0 0 0 2px rgba(122, 99, 255, .55), var(--ombra-forte); }
.lavoro > header { display: flex; align-items: center; gap: 12px; }
.lavoro .icona { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--fondo-2); color: var(--inchiostro); }
.lavoro .icona svg { width: 22px; height: 22px; }
.testa-lavoro { flex: 1; min-width: 0; }
.testa-lavoro b { display: block; color: var(--inchiostro); line-height: 1.25; }
.testa-lavoro small { font-size: 13px; color: var(--tenue); }
.bollino { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: rgba(15, 23, 42, .06); color: #2c3350; }
.stato-lavoro .bollino { background: rgba(122, 99, 255, .12); color: #4b3fb0; }
.stato-pronto .bollino { background: rgba(47, 211, 166, .16); color: #0a6e52; }
.stato-rifiutata .bollino { background: rgba(255, 138, 76, .14); color: #9a4310; }
.lavoro .cosa { margin: 12px 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; overflow-wrap: anywhere; }
.lavoro .cosa.aperta { display: block; -webkit-line-clamp: unset; }
.coda-info { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(90deg, #eaf5ff, #f4efff); color: #2c3350; font-size: 15px; }
.coda-info b { color: var(--inchiostro); }
.coda-info .faccina { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.coda-info .faccina svg { width: 46px; margin-top: 6px; }
.consegna { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: center; margin-top: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(140deg, #ecfaf4, #f1ecff); }
.consegna-foto { display: block; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 34px -20px rgba(30, 40, 110, .55); }
.consegna-foto img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .4s; }
.consegna-foto:hover img { transform: scale(1.03); }
.consegna-azioni { display: grid; gap: 6px; }
.consegna-azioni > b { font-size: 19px; color: var(--inchiostro); }
.tenue-piccolo { font-size: 14px; color: var(--tenue); }
.fila-pulsanti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fila-pulsanti .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* i tuoi siti */
.mio-sito { border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); overflow: hidden; }
.mio-sito + .mio-sito { margin-top: 16px; }
.mio-sito-capo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 14px 18px; border-bottom: 1px solid var(--riga); }
.mio-sito-capo b { font-size: 17px; color: var(--inchiostro); }
.mio-sito-capo a, .mio-sito-capo .via { font-size: 13px; color: var(--tenue); }
.stato-salva { margin-left: auto; font-size: 13px; font-weight: 700; color: #0a6e52; }
.stato-salva.da-salvare { color: #a5501e; }
.mio-sito-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px; }
.campi-sito { display: grid; gap: 12px; align-content: start; }
.campi-sito textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.foto-campo { display: flex; align-items: center; gap: 12px; }
.foto-piccola { flex: none; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #ffd9b8, #ff9a6b) center / cover; box-shadow: inset 0 0 0 1px var(--riga); }
.scegli-foto { min-height: 40px; font-size: 14px; }
.campi-sito .salva { justify-self: start; min-width: 120px; }
.anteprima-sito { align-self: start; position: sticky; top: 90px; border-radius: 18px; overflow: hidden; background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--riga); }
.anteprima-sito .foto { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #ffd9b8, #ff9a6b) center / cover; }
.anteprima-sito .testo { padding: 16px 16px 14px; }
.anteprima-sito h3 { font-size: 22px; font-weight: 900; margin-bottom: 6px; overflow-wrap: anywhere; }
.anteprima-sito p { margin: 0 0 10px; font-size: 15px; overflow-wrap: anywhere; }
.anteprima-sito ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: #2c3350; overflow-wrap: anywhere; }
.anteprima-sito ul b { color: var(--inchiostro); }
.anteprima-sito small { display: block; padding: 8px 16px; border-top: 1px solid var(--riga); background: #fff; font-size: 12px; color: var(--tenue); }

/* la sala giochi */
.sala { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 26px; background: linear-gradient(170deg, #ffffff, #edf1fc); box-shadow: inset 0 0 0 1px var(--riga), var(--ombra-forte); }
.sala-capo { display: flex; align-items: center; gap: 10px; }
.sala-capo .chi { flex: none; width: 54px; }
.sala-capo b { display: block; font-size: 17px; color: var(--inchiostro); }
.sala-capo small { display: block; font-size: 13px; line-height: 1.3; color: var(--tenue); }
.sala-chiudi { flex: none; margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .05); cursor: pointer; font-size: 19px; color: var(--tenue); }
.sala-scelta { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: rgba(15, 23, 42, .05); }
.sala-scelta button { min-height: 36px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 14px; font-weight: 750; color: var(--tenue); white-space: nowrap; }
.sala-scelta button[aria-selected="true"] { background: #fff; color: var(--inchiostro); box-shadow: var(--ombra); }
.sala-schermo { position: relative; width: 100%; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #0b1030; box-shadow: inset 0 0 0 3px #1a2250; }
.sala-schermo iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #0b1030; }
.sala-copertina { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; background: radial-gradient(ellipse at 50% 30%, #1d2a6e, #0b1030 70%); }
.sala-copertina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sala-copertina .nome-gioco { position: relative; font-size: 26px; font-weight: 900; letter-spacing: .02em; color: #fff; text-shadow: 0 0 18px rgba(127, 243, 255, .7); }
.sala-copertina .btn { position: relative; background: #fff; color: var(--inchiostro); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); }
.sala-piede { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--tenue); }
.sala-piede .btn { flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; }
.sala.grande { position: fixed; inset: 0; z-index: 60; top: 0; justify-content: center; align-items: center; border-radius: 0; padding: 16px; background: rgba(244, 247, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sala.grande .sala-capo, .sala.grande .sala-scelta, .sala.grande .sala-piede { width: min(640px, 100%); }
.sala-apri { position: fixed; right: 94px; bottom: 26px; z-index: 39; display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--inchiostro); color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(11, 16, 32, .6); }
.sala-apri svg, .gioca-tasto svg { width: 20px; height: 20px; }
.area.sala-chiusa ~ .sala-apri { display: inline-flex; }
body:not(.dentro) .sala-apri { display: none !important; }
.invita { animation: invita 1.4s ease 2; }
@keyframes invita { 0%, 100% { transform: none; } 20% { transform: translateY(-4px) rotate(-3deg); } 40% { transform: translateY(0) rotate(3deg); } 60% { transform: translateY(-2px); } }

/* l'avviso del lavoro pronto */
.avviso-pronto { position: fixed; left: 50%; top: 14px; z-index: 70; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 8px 8px 10px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra-forte); transform: translate(-50%, -150%); transition: transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.avviso-pronto.su { transform: translate(-50%, 0); }
.avviso-pronto .chi { flex: none; width: 50px; }
.avviso-pronto div { min-width: 0; }
.avviso-pronto b { display: block; color: var(--inchiostro); }
.avviso-pronto span { font-size: 13px; color: var(--tenue); }
.avviso-pronto .btn { min-height: 40px; padding: 0 16px; }
.chiudi-avviso { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .05); cursor: pointer; font-size: 18px; color: var(--tenue); }

/* ---------- privacy e termini ---------- */
.legale { max-width: 780px; padding: 48px 0 80px; }
.legale-testa { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.legale-testa .chi { flex: none; width: 96px; }
.legale-testa .occhiello { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.legale-testa h1 { margin: 6px 0 6px; font-size: clamp(32px, 5vw, 48px); font-weight: 900; }
.legale-testa p { margin: 0; color: var(--tenue); font-size: 14px; }
.legale section { padding: 22px 24px; margin-bottom: 14px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--riga); }
.legale h2 { font-size: 21px; font-weight: 850; margin-bottom: 8px; }
.legale p { margin: 0 0 10px; }
.legale p:last-child { margin-bottom: 0; }
.legale ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legale b { color: var(--inchiostro); }
.legale a:not(.btn) { color: #3b5bdb; }

/* ---------- schermi stretti ---------- */
@media (max-width: 1100px) {
  .area { grid-template-columns: minmax(0, 1fr); }
  .area.sala-chiusa .sala { display: flex; }
  .area .gioca-tasto { display: inline-flex !important; }
  .sala { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(440px, 100%); border-radius: 26px 0 0 26px; overflow-y: auto; transform: translateX(105%); transition: transform .32s ease, visibility 0s linear .32s; visibility: hidden; }
  .sala.aperta, .sala.grande { transform: none; visibility: visible; transition: transform .32s ease, visibility 0s; }
  .sala-apri { display: inline-flex; }
}
@media (max-width: 760px) {
  .nome-utente { display: none; }
  .saluto { flex-wrap: wrap; align-items: flex-start; }
  .mio-sito-corpo, .consegna { grid-template-columns: 1fr; }
  .anteprima-sito { position: static; }
  .sala { border-radius: 0; }
  .sala-apri { left: 16px; right: auto; bottom: 24px; }
}
@media (max-width: 980px) {
  .passi { grid-template-columns: 1fr 1fr; }
  .lastra { grid-template-columns: 1fr; min-height: 0; }
  .gioca, .ospitati { grid-template-columns: 1fr; gap: 36px; }
  .banco .vola-sx, .banco .vola-dx { display: none; }
}
@media (max-width: 760px) {
  .menu { display: none; position: absolute; left: 12px; right: 12px; top: 64px; flex-direction: column; padding: 8px; border-radius: 20px; background: #fff; box-shadow: var(--ombra-forte); }
  .menu.aperto { display: flex; }
  .menu a { padding: 12px 14px; }
  .menu-tasto { display: grid; place-items: center; }
  .testata .azioni { margin-left: auto; }
  .testata .azioni .btn-tenue { display: none; }
  .eroe { padding-top: 92px; }
  /* sul telefono il robottino sta sopra la barra, non sulle parole scritte dentro */
  .banco .sul-banco { width: 92px; top: -92px; }
  .richiesta { border-radius: 24px; padding: 14px 14px 12px; }
  .richiesta textarea { font-size: 17px; min-height: 110px; }
  .tipo { font-size: 13px; padding: 0 10px; }
  .sezione { padding: 72px 0; }
  .passi { grid-template-columns: 1fr; }
  .lastra { padding: 20px; border-radius: 24px; }
  .schermi { padding-right: 24px; }
  .piede .contenitore { grid-template-columns: 1fr; }
  .dona-striscia { font-size: 13px; justify-content: flex-start; text-align: left; }
  .console .mascotte-console { right: -4px; top: -60px; width: 84px; }
  .prova { top: 74px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .compare { opacity: 1; transform: none; }
}

/* ---------- come funziona: il piccolo server che costruisce i progetti ---------- */
.officina { margin: 0 auto 36px; max-width: 760px; padding: 22px 22px 16px; border-radius: 28px; background: linear-gradient(160deg, #eef6ff, #f6f1ff 60%, #fff1f7); box-shadow: inset 0 0 0 1px var(--riga), var(--ombra); }
.officina svg { width: 100%; height: auto; }
.officina figcaption { margin-top: 8px; text-align: center; font-size: 15px; color: var(--testo); }
.officina .of-scorre { animation: of-scorre 1.2s linear infinite; }
.officina .of-occhio { animation: of-occhio 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.officina .of-luce { animation: of-luce 1.6s ease-in-out infinite; }
.officina .of-luce.l2 { animation-delay: .4s; }
.officina .of-luce.l3 { animation-delay: .8s; }
.officina .of-entra { animation: of-fluttua 5s ease-in-out infinite; }
.officina .of-esce { animation: of-fluttua 5s ease-in-out infinite; animation-delay: -1.2s; }
.officina .of-esce.e2 { animation-delay: -2.4s; }
.officina .of-esce.e3 { animation-delay: -3.4s; }
@keyframes of-scorre { to { stroke-dashoffset: -24; } }
@keyframes of-occhio { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes of-luce { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes of-fluttua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.racconto-lavoro { max-width: 720px; margin: 0 auto 44px; display: grid; gap: 12px; font-size: 17px; }
.racconto-lavoro p { margin: 0; }
.racconto-lavoro b { color: var(--inchiostro); }
/* le pagine scritte: passi, tappe, invito */
.legale .passi-semplici, .legale .tappe { display: grid; gap: 12px; }
.legale .passi-semplici b, .legale .tappe b { display: block; color: var(--inchiostro); }
.legale .tappe li.adesso b { color: #4b3fb0; }
.legale .ora-qui { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: #efeaff; color: #4b3fb0; font-size: 12.5px; font-weight: 750; font-style: normal; }
.legale .invito { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.legale .invito p { margin: 0; font-weight: 750; color: var(--inchiostro); font-size: 18px; }

/* ---------- l'editor del progetto consegnato ---------- */
dialog.editore { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--fondo-2); color: var(--testo); }
dialog.editore[open] { display: grid; grid-template-rows: auto 1fr; }
.editore-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #fff; box-shadow: inset 0 -1px 0 var(--riga); }
.editore-barra .ed-titolo { color: var(--inchiostro); font-size: 17px; margin-right: 4px; }
.editore-barra select { min-height: 40px; border: 0; border-radius: 12px; padding: 0 12px; background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--riga); max-width: 190px; }
.ed-modi { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fondo-2); }
.ed-modi button { border: 0; min-height: 36px; padding: 0 14px; border-radius: 999px; background: transparent; font-weight: 700; color: var(--tenue); cursor: pointer; }
.ed-modi button[aria-pressed="true"] { background: #fff; color: var(--inchiostro); box-shadow: var(--ombra); }
.ed-stato { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--tenue); min-width: 70px; text-align: right; }
.ed-stato.ok { color: #0a6e52; }
.ed-stato.errore { color: #c22f63; max-width: 46ch; text-align: left; }
.editore-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
#ed-vista { width: 100%; height: 100%; border: 0; background: #fff; }
.ed-pannello { padding: 18px 16px; background: #fff; box-shadow: inset 1px 0 0 var(--riga); overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.ed-pannello > b { color: var(--inchiostro); font-size: 17px; }
.ed-pannello p { margin: 0; font-size: 15px; }
.ed-pannello textarea { width: 100%; border: 0; border-radius: 14px; padding: 12px; background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--riga); outline: 0; font-size: 16px; line-height: 1.5; resize: vertical; }
.ed-pannello textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(79, 179, 255, .6); }
.ed-file { color: var(--tenue); font-size: 14px !important; word-break: break-all; }
.ed-carica .btn, .ed-azioni .btn { width: 100%; cursor: pointer; }
.ed-colori { display: grid; gap: 8px; }
.ed-colori label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--fondo-2); font-weight: 650; color: var(--inchiostro); cursor: pointer; }
.ed-colori input { width: 44px; height: 36px; border: 0; padding: 0; background: none; cursor: pointer; }
@media (max-width: 820px) {
  .editore-corpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ed-pannello { box-shadow: inset 0 1px 0 var(--riga); max-height: 42dvh; }
  .editore-barra .ed-titolo { display: none; }
  .ed-modi { order: 5; width: 100%; overflow-x: auto; }
  .ed-modi button { flex: 1; padding: 0 8px; }
  .ed-stato { order: 6; margin-left: 0; text-align: left; width: 100%; }
}

/* ---------- la festa: «Gratis il primo mese», il distintivo dorato sul riquadro della richiesta ---------- */
.festa { position: absolute; right: -58px; top: -86px; width: 148px; height: 148px; z-index: 3; transform: rotate(9deg); pointer-events: none; }
.festa-sigillo { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(196, 122, 5, .38)) drop-shadow(0 2px 3px rgba(74, 42, 0, .25)); animation: festa-dondola 3.6s ease-in-out infinite; transform-origin: 50% 50%; font-family: inherit; }
.festa-stella { animation: festa-brilla 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.festa-stella.s2 { animation-delay: -.6s; }
.festa-stella.s3 { animation-delay: -1.2s; }
.festa-robot { position: absolute; z-index: 1; width: 50px; }
.festa-robot.r1 { left: -30px; top: 30px; transform: rotate(-22deg); }
.festa-robot.r2 { left: 48px; top: -44px; width: 54px; transform: rotate(-4deg); }
.festa-robot.r3 { right: -34px; top: 34px; transform: rotate(18deg); }
/* il cappellino della festa, a righe, con il pompon */
.festa-robot::before { content: ""; position: absolute; z-index: 3; left: 50%; top: -15px; width: 20px; height: 22px; transform: translateX(-50%) rotate(-6deg); background: repeating-linear-gradient(135deg, #ff7ab6 0 5px, #ffd24a 5px 10px, #7cc7ff 10px 15px); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.festa-robot::after { content: ""; position: absolute; z-index: 4; left: 50%; top: -20px; width: 9px; height: 9px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #ff7ab6; }
.coriandolo { position: absolute; z-index: 0; width: 8px; height: 12px; border-radius: 2px; animation: festa-coriandolo 2.8s ease-in-out infinite; }
.coriandolo.c1 { left: -22px; top: -8px; background: #ff7ab6; transform: rotate(24deg); }
.coriandolo.c2 { left: 14px; top: -30px; background: #7cc7ff; width: 9px; height: 9px; border-radius: 50%; animation-delay: -.5s; }
.coriandolo.c3 { right: 4px; top: -26px; background: #ffd24a; transform: rotate(-30deg); animation-delay: -1s; }
.coriandolo.c4 { right: -28px; top: 4px; background: #8be3c4; width: 9px; height: 9px; border-radius: 50%; animation-delay: -1.5s; }
.coriandolo.c5 { left: -36px; bottom: 30px; background: #b79cff; transform: rotate(50deg); animation-delay: -2s; }
.coriandolo.c6 { right: -40px; bottom: 28px; background: #ff9f6b; transform: rotate(-12deg); animation-delay: -2.4s; }
@keyframes festa-dondola { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
@keyframes festa-brilla { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes festa-coriandolo { 0%, 100% { translate: 0 0; opacity: 1; } 50% { translate: 0 9px; opacity: .65; } }
/* con il distintivo nell'angolo, il razzo vola un po' più in basso */
.banco:has(.festa) .vola-dx { top: 104px; }
@media (max-width: 900px) {
  .festa { right: -6px; top: -94px; width: 112px; height: 112px; }
  .festa-robot { width: 38px; }
  .festa-robot.r1 { left: -22px; top: 24px; }
  .festa-robot.r2 { left: 36px; top: -34px; width: 40px; }
  .festa-robot.r3 { display: none; }
  .festa-robot::before { width: 16px; height: 18px; top: -12px; }
  .festa-robot::after { top: -16px; width: 7px; height: 7px; margin-left: -5px; }
  .coriandolo.c4, .coriandolo.c6 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .festa-sigillo, .festa-stella, .coriandolo { animation: none; }
}

/* ---------- la pagina dei servizi: il logo e tutto quello che ci gira intorno, su preventivo ---------- */
.legale.servizi { max-width: 1040px; }
.servizi-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.servizio { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--riga); transition: transform .2s ease, box-shadow .2s ease; scroll-margin-top: 96px; }
.servizio:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--riga), var(--ombra-forte); }
.servizio-segno { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #e8f1ff, #f1e9ff); color: #4b3fb0; }
.servizio-segno svg { width: 24px; height: 24px; }
.servizio h2 { margin: 4px 0 0; font-size: 20px; }
.servizio p { margin: 0; color: var(--tenue); font-size: 15px; }
.servizio ul { margin: 4px 0 10px; padding-left: 18px; gap: 4px; font-size: 15px; }
.servizio .btn { margin-top: auto; align-self: flex-start; }
.legale.servizi > section { max-width: 780px; }
@media (max-width: 900px) { .servizi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .servizi-griglia { grid-template-columns: 1fr; } }
/* sotto un lavoro consegnato: quello che gli sta intorno, su preventivo */
.consegna-intorno { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--riga); font-size: 15px; }
.consegna-intorno span { flex: 1 1 260px; color: var(--inchiostro); font-weight: 600; }
.consegna-intorno .tutti-servizi { font-size: 14px; font-weight: 650; color: #3b5bdb; }

/* ---------- la macchina: verde libera, rosso al lavoro su un progetto, giallo a riposo ---------- */
.macchina { display: inline-flex; align-items: center; gap: 10px; margin: 16px auto 0; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px var(--riga); font-size: 14.5px; color: #2c3350; text-align: left; }
.macchina b { color: var(--inchiostro); }
.macchina .luce { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #9aa3b5; }
.macchina[data-stato="libera"] .luce { background: #19c37d; box-shadow: 0 0 0 4px rgba(25, 195, 125, .18); animation: luce-viva 2.2s ease-in-out infinite; }
.macchina[data-stato="impegnata"] .luce { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .18); animation: luce-viva 1.4s ease-in-out infinite; }
.macchina[data-stato="riposo"] .luce { background: #f5a524; box-shadow: 0 0 0 4px rgba(245, 165, 36, .18); }
@keyframes luce-viva { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.rimaste + .macchina { margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .macchina .luce { animation: none; } }

/* la frase d'effetto sotto il titolo della home */
.eroe .sotto { max-width: 52ch; }
.eroe .sotto .effetto { display: block; margin-bottom: 8px; font-size: clamp(20px, 2.8vw, 27px); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, #2f6bff, #8a5cff 55%, #e052a0); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* su uno schermo basso il riquadro della richiesta resta in vista: l'etichetta in cima lascia il posto (lo dice già il distintivo dorato) */
@media (max-height: 860px) and (min-width: 901px) { .eroe .etichetta { display: none; } }
/* «Una macchina AI dedicata a te», in Come funziona */
.racconto-lavoro.dedicata { margin-bottom: 0; padding: 30px 32px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga), var(--ombra-forte); }
.racconto-lavoro.dedicata h2 { margin: 0 0 4px; font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; background: linear-gradient(90deg, #2f6bff, #8a5cff 55%, #e052a0); -webkit-background-clip: text; background-clip: text; color: transparent; }