/* Boosted v4 · bozza E — pagina «Gestionali e applicazioni» (gestionali.html + pagine/gestionali.js).
   Usa e.css (colori, cromo, titoli che salgono), tasti/tasti.css (il metallo) e parti/menu.css (testata e menu).
   Le schermate d'esempio sono HTML/CSS e devono sembrare app vere: dentro ai telefoni 1em = larghezza del telefono / 25,
   tipografia di sistema, righe fitte, stati veri. Il gestionale d'esempio è neutro con un solo colore per gli stati (il lilla);
   WhatsApp, Safari, iOS e il foglio di calcolo hanno i loro colori.
   Si muove solo con transform, opacity e clip-path. Movimento ridotto e html.fermo = stato finale. Mobile first. */

.gs-simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
main { display: block; }
main h3 { margin: 0; }
:root { --molla: cubic-bezier(0.34, 1.5, 0.64, 1); }

/* small «Esempio» pill: the screens are examples, with invented names */
.etichetta-esempio {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--lilla-chiaro);
  background: rgba(8, 9, 10, 0.55); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35);
}

/* ── Apertura ───────────────────────────────────────────── */
.gs-eroe {
  position: relative; display: grid; gap: 64px;
  padding: calc(var(--testa) + env(safe-area-inset-top) + 36px) var(--g) 24px;
  isolation: isolate; overflow-x: clip;
}
.gs-eroe__luce {
  position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 30%;
  width: 150vw; max-width: 1400px; aspect-ratio: 1.3; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 40% 50%, rgba(139, 111, 184, 0.30), rgba(139, 111, 184, 0) 70%),
    radial-gradient(closest-side at 66% 44%, rgba(201, 169, 233, 0.13), rgba(201, 169, 233, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) { html:not(.fermo) .gs-eroe__luce { animation: gs-respira 9s ease-in-out infinite alternate; } }
@keyframes gs-respira { to { transform: translate(-50%, -50%) scale(1.08); opacity: 0.8; } }
.gs-eroe__sopra { font-size: 14.5px; color: var(--sec); margin-bottom: 18px; }
.gs-eroe__titolo { font-size: clamp(44px, 12.4vw, 132px); line-height: 0.98; font-weight: 760; letter-spacing: -0.034em; text-wrap: balance; max-width: 9em; }
.gs-eroe__sotto { margin-top: 22px; max-width: 30em; color: var(--sec); font-size: clamp(17px, 4.5vw, 20px); line-height: 1.5; }
.gs-eroe__azione { margin-top: 30px; display: grid; gap: 14px; justify-items: start; }
.gs-eroe__azione .cta { width: 100%; justify-content: space-between; }
.gs-eroe__nota { font-size: 14.5px; line-height: 1.5; color: var(--sec); max-width: 30em; }
.gs-eroe__vista { position: relative; display: grid; justify-items: center; padding-top: 42px; }
.gs-eroe__vista > .etichetta-esempio { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.gt.gt--eroe { --w: min(80vw, 318px); }
html.js .sale { transform: translateY(44px); }
html.js.pronto .sale { transform: none; transition: transform 1100ms var(--curva) 350ms; }
@media (min-width: 768px) { .gs-eroe__azione .cta { width: auto; min-width: 330px; } }
@media (min-width: 1024px) {
  .gs-eroe { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 80px; min-height: 100svh; padding-top: calc(var(--testa) + 24px); padding-bottom: 48px; }
  .gs-eroe__titolo { font-size: clamp(64px, 6.3vw, 112px); }
  .gs-eroe__vista { padding-top: 40px; }
  .gt.gt--eroe { --w: min(330px, calc((100svh - 150px) / 2.06)); }
}

/* ── Sezioni ────────────────────────────────────────────── */
.gs-sez { position: relative; padding: 96px var(--g) 0; }
.gs-in { max-width: 1296px; margin: 0 auto; }
.gs-titolo { font-size: clamp(40px, 10.6vw, 88px); line-height: 1; font-weight: 760; letter-spacing: -0.03em; text-wrap: balance; max-width: 11em; }
.gs-paragrafi { margin-top: 24px; display: grid; gap: 14px; max-width: 34em; }
.gs-cose { font-size: clamp(19px, 5vw, 23px); line-height: 1.4; font-weight: 620; letter-spacing: -0.015em; }
.gs-frase { color: var(--sec); font-size: 17px; line-height: 1.6; }
.gs-frase--chiara { color: var(--testo); }
.gs-vista { position: relative; display: grid; justify-items: center; padding-top: 42px; }
.gs-vista > .etichetta-esempio { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.gs-due { display: grid; gap: 40px; }

.gs-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 14px;
  color: var(--testo); font-weight: 650; font-size: 16.5px; line-height: 1.4;
  /* a real underline: on two lines it stays under each line, never through the words */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(201, 169, 233, 0.6);
  transition: color 200ms ease-out, text-decoration-color 200ms ease-out;
}
.gs-link svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--lilla); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--curva); }
.gs-link:active { color: var(--lilla); }
.gs-link:active svg { transform: translateX(3px); }
@media (hover: hover) { .gs-link:hover { color: var(--lilla-chiaro); text-decoration-color: currentColor; } .gs-link:hover svg { transform: translateX(3px); } }

@media (min-width: 1024px) {
  .gs-sez { padding-top: 168px; }
  .gs-due { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
  .gs-due--rov > .gs-testo { order: 2; }
  .gs-testa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
  .gs-testa .gs-paragrafi { margin-top: 0; padding-bottom: 6px; }
}

/* ══ Il telefono delle schermate d'esempio ═══════════════════ */
.gt {
  --w: 280px;
  position: relative; flex: none; width: var(--w); height: calc(var(--w) * 2.06);
  padding: calc(var(--w) * 0.03); border-radius: calc(var(--w) * 0.165);
  background: linear-gradient(165deg, #3a3c43 0%, #17191c 18%, #0c0d0f 58%, #1c1e23 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.7), 0 44px 80px -30px rgba(0, 0, 0, 0.95);
  font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif; letter-spacing: -0.012em; text-align: left;
}
.gt__schermo {
  --u: calc(var(--w) / 25);
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--w) * 0.137);
  font-size: var(--u); line-height: 1.3; color: #F5F5F7; background: #000;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
.gt__schermo::before {
  content: ''; position: absolute; z-index: 40; top: calc(var(--u) * 1.05); left: 50%;
  width: calc(var(--u) * 7.4); height: calc(var(--u) * 2.15); margin-left: calc(var(--u) * -3.7); border-radius: 999px; background: #000;
}
.gt__stato {
  position: absolute; z-index: 35; top: 0; left: 0; right: 0; height: 4.2em;
  display: flex; align-items: center; justify-content: space-between; padding: 0.4em 2em 0 2.5em;
  pointer-events: none; color: #F5F5F7; transition: color 300ms ease-out;
}
.gt__stato b { font-size: 1.12em; font-weight: 600; letter-spacing: -0.01em; }
.gt__stato--chiaro { color: #000; }
.gt svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gt .gt__icone { width: 5.4em; height: 0.95em; fill: currentColor; stroke: none; }
.gt__barra { position: absolute; z-index: 45; bottom: 0.55em; left: 50%; width: 8.6em; height: 0.36em; margin-left: -4.3em; border-radius: 999px; background: rgba(255, 255, 255, 0.82); pointer-events: none; }
.gt__barra--scura { background: rgba(0, 0, 0, 0.75); }
.sfoca { filter: blur(0.22em); user-select: none; }

/* ══ Il gestionale d'esempio ═════════════════════════════════ */
.ap { background: #000; color: #F5F5F7; }
.ap__pagine { position: absolute; left: 0; right: 0; top: 4.2em; bottom: 0; overflow: hidden; }
.ap__pagina {
  position: absolute; inset: 0; padding: 0.15em 1.05em 6em; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(0.5em);
  transition: opacity 200ms ease-out, transform 300ms var(--curva), visibility 0s linear 200ms;
}
.ap__pagina.vista { opacity: 1; visibility: visible; transform: none; transition: opacity 280ms ease-out, transform 480ms var(--curva), visibility 0s; }
html:not(.js) .ap__pagine > .ap__pagina:first-child { opacity: 1; visibility: visible; transform: none; }

.ap__testa { padding-bottom: 0.15em; }
.ap__sopra { display: flex; align-items: center; justify-content: space-between; min-height: 2.4em; font-size: 0.8em; font-weight: 600; color: #8E8E93; }
.ap__io { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50%; background: #2C2C2E; color: #E5E5EA; font-size: 0.86em; font-weight: 650; letter-spacing: 0.02em; }
.ap__titolo { font-size: 2.05em; font-weight: 750; letter-spacing: -0.03em; line-height: 1.08; }
.ap__sotto { margin-top: 0.12em; font-size: 0.84em; color: #8E8E93; }
.ap__gruppo { display: flex; align-items: baseline; justify-content: space-between; margin: 1.15em 0.3em 0.45em; font-size: 0.78em; font-weight: 650; color: #8E8E93; }
.ap__tinta { color: #C9A9E9; font-weight: 600; }
.ap__lista { list-style: none; margin: 0; padding: 0; border-radius: 0.8em; background: #1C1C1E; overflow: hidden; }
.ap__riga { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.62em; min-height: 3.3em; padding: 0.4em 0.75em; }
.ap__riga + .ap__riga::before { content: ''; position: absolute; top: 0; left: 0.75em; right: 0; border-top: 1px solid #2C2C2E; }
.ap__lista--ore .ap__riga { height: 3.3em; }
.ap__lista--ore .ap__riga + .ap__riga::before { left: 4.1em; }
.ap__ora { min-width: 2.85em; font-size: 0.9em; font-weight: 650; font-variant-numeric: tabular-nums; }
.ap__corpo { min-width: 0; }
.ap__corpo b { display: block; font-size: 0.88em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap__corpo small { display: flex; align-items: center; gap: 0.28em; margin-top: 0.1em; font-size: 0.74em; color: #8E8E93; white-space: nowrap; overflow: hidden; }
.gt .ap__da { flex: none; width: 1.1em; height: 1.1em; }
.ap__stato { display: inline-flex; align-items: center; gap: 0.25em; font-style: normal; font-size: 0.7em; font-weight: 650; white-space: nowrap; color: #AEAEB2; padding: 0.32em 0.6em; border-radius: 1em; background: #2C2C2E; }
.gt .ap__stato svg { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.ap__stato--att { color: #EFE3FB; background: rgba(201, 169, 233, 0.22); }
.ap__ic { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 0.6em; background: #2C2C2E; color: #E5E5EA; }
.gt .ap__ic svg { width: 1.2em; height: 1.2em; }
.gt .ap__va { width: 0.95em; height: 0.95em; color: #5A5A5F; stroke-width: 2.4; }
.ap__segmenti { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 0.75em; padding: 0.16em; border-radius: 0.62em; background: #1C1C1E; font-size: 0.76em; font-weight: 600; color: #AEAEB2; }
.ap__segmenti span { display: grid; place-items: center; height: 2.3em; border-radius: 0.5em; }
.ap__segmenti .on { background: #3A3A3C; color: #F5F5F7; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.ap__fascia { display: flex; justify-content: space-between; margin: 0.95em 0.3em 0.5em; font-size: 0.78em; }
.ap__fascia b { font-weight: 650; }
.ap__cerca { display: flex; align-items: center; gap: 0.45em; height: 2.5em; margin-top: 0.7em; padding: 0 0.75em; border-radius: 0.7em; background: #1C1C1E; color: #8E8E93; font-size: 0.84em; }
.gt .ap__cerca svg { width: 1.1em; height: 1.1em; stroke-width: 2.2; }

/* the rows come in when the screen opens (.su); without JS everything is already there */
.ap__riga { transition: opacity 360ms ease-out, transform 560ms var(--curva); transition-delay: calc(var(--i, 0) * 70ms + 80ms); }
html.js .ap__pagina:not(.su) .ap__riga { opacity: 0; transform: translateY(0.7em); }

/* «Oggi»: a booking from the site lands in the list (.f2) */
.ap__lista--ore { clip-path: inset(0 0 0 0 round 0.8em); transition: clip-path 640ms var(--curva); }
html.js [data-pagina="oggi"]:not(.f2) .ap__lista--ore { clip-path: inset(0 0 3.3em 0 round 0.8em); }
html.js [data-pagina="oggi"]:not(.f2) .ap__riga--sotto { transform: translateY(-100%); }
html.js [data-pagina="oggi"]:not(.f2) .ap__riga--nuova { opacity: 0; transform: translateX(1.6em); }
[data-pagina="oggi"].f2 .ap__riga--sotto, [data-pagina="oggi"].f2 .ap__riga--nuova { transition-delay: 0ms; }
.ap__riga--nuova::after { content: ''; position: absolute; left: 0; top: 0.55em; bottom: 0.55em; width: 0.2em; border-radius: 0 0.2em 0.2em 0; background: #C9A9E9; }

/* the tab bar: six places, the label only under the open tab */
.ap__tab { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: 5.6em; background: rgba(22, 22, 24, 0.97); box-shadow: 0 -1px 0 #2A2A2D; }
.ap__voce {
  position: absolute; top: 0; left: 0; width: calc(100% / 6); height: 4em;
  display: grid; justify-items: center; align-content: center; gap: 0.2em;
  padding: 0; border: 0; background: none; color: #8E8E93; font: inherit; cursor: default;
  transform: translateX(calc((6 * (var(--i) + 0.5) / var(--n) - 0.5) * 100%));
  transition: transform 560ms var(--curva), color 200ms ease-out, opacity 300ms ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button.ap__voce { cursor: pointer; }
button.ap__voce:focus-visible { outline: 2px solid #C9A9E9; outline-offset: -2px; border-radius: 0.8em; }
.gt .ap__voce svg { width: 1.55em; height: 1.55em; stroke-width: 1.7; }
.ap__voce > span { font-size: 0.6em; font-weight: 650; white-space: nowrap; opacity: 0; transform: translateY(-0.3em); transition: opacity 200ms ease-out, transform 300ms var(--curva); }
.ap__voce.on, .ap__voce[aria-pressed="true"] { color: #F5F5F7; }
.ap__voce.on > span, .ap__voce[aria-pressed="true"] > span, .ap__tab--tutte .ap__voce > span { opacity: 1; transform: none; }
.ap__segno { position: absolute; top: 0.42em; left: 0; width: calc(100% / 6); height: 2.25em; transform: translateX(calc((6 * (var(--a) + 0.5) / var(--n) - 0.5) * 100%)); transition: transform 560ms var(--curva); pointer-events: none; }
.ap__segno::before { content: ''; position: absolute; left: 50%; top: 0; width: 3.5em; height: 100%; margin-left: -1.75em; border-radius: 1.2em; background: rgba(201, 169, 233, 0.18); }
@media (hover: hover) { button.ap__voce:hover { color: #D1D1D6; } }

/* ── Prenotazioni: la pianta della sala ── */
.sa { position: relative; height: 15em; margin-top: 0.15em; border-radius: 0.9em; background: #111113; box-shadow: inset 0 0 0 1px #2A2A2D; }
.sa__t { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 21%; display: grid; place-content: center; justify-items: center; border-radius: 0.55em; box-shadow: inset 0 0 0 0.11em #48484B; color: #8E8E93; text-align: center; line-height: 1.12; }
.sa__t--tondo { border-radius: 1.6em; }
.sa__t > * { position: relative; }
.sa__t b { font-size: 0.78em; font-weight: 700; }
.sa__t small { font-size: 0.58em; font-weight: 600; white-space: nowrap; }
.sa__t::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(201, 169, 233, 0.24); box-shadow: inset 0 0 0 0.11em rgba(201, 169, 233, 0.8); transition: opacity 300ms ease-out, transform 520ms var(--molla); transition-delay: calc(var(--k, 0) * 150ms + 200ms); opacity: 0; }
.sa__t[data-s="on"] { color: #F5F5F7; }
.sa__t[data-s="on"]::before { opacity: 1; }
html.js .ap__pagina:not(.su) .sa__t[data-s="on"]::before { opacity: 0; transform: scale(0.7); }
.sa__banco { position: absolute; left: 5%; width: 62%; bottom: 4.5%; display: grid; place-items: center; height: 2.6em; border-radius: 0.45em; background: #1C1C1E; font-size: 0.6em; color: #8E8E93; }
.sa__porta { position: absolute; right: 5%; bottom: 4.5%; display: grid; place-items: center; height: 2.6em; padding: 0 0.8em; border-radius: 0.45em; border: 1px dashed #48484B; font-size: 0.6em; color: #8E8E93; }
.sa__legenda { display: flex; gap: 1.1em; margin: 0.6em 0.3em 0.7em; font-size: 0.7em; color: #8E8E93; }
.sa__legenda span { display: inline-flex; align-items: center; gap: 0.4em; }
.sa__legenda i { width: 0.85em; height: 0.85em; border-radius: 0.22em; box-shadow: inset 0 0 0 0.13em #48484B; }
.sa__legenda i.on { background: rgba(201, 169, 233, 0.3); box-shadow: inset 0 0 0 0.13em rgba(201, 169, 233, 0.85); }

/* ── Ordini: la comanda in cucina ── */
.co { display: grid; gap: 0.55em; margin-top: 0.8em; }
.co__comanda { border-radius: 0.8em; background: #1C1C1E; padding: 0.6em 0.75em 0.65em; transition: opacity 420ms ease-out, transform 640ms var(--curva); transition-delay: 350ms; }
.co__comanda--nuova { box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.55); }
html.js .ap__pagina:not(.su) .co__comanda--nuova { opacity: 0; transform: translateY(-1.4em) scale(0.97); }
.co__comanda--dopo { opacity: 0.62; }
.co__testa { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5em; }
.co__testa b { font-size: 0.92em; font-weight: 700; white-space: nowrap; }
.co__testa span { font-size: 0.7em; color: #8E8E93; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co__piatti { list-style: none; margin: 0.45em 0 0; padding: 0.5em 0 0; border-top: 1px solid #2C2C2E; display: grid; gap: 0.32em; }
.co__piatti li { display: grid; grid-template-columns: 1.6em 1fr; font-size: 0.84em; line-height: 1.25; }
.co__piatti i { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.co__piatti small { display: block; font-size: 0.86em; color: #8E8E93; }
.co__tasti { margin-top: 0.6em; }
.co__tasti span { display: grid; place-items: center; height: 2.4em; border-radius: 0.6em; background: #F5F5F7; color: #000; font-size: 0.8em; font-weight: 700; }

/* ── Magazzino: la mozzarella passa a «Sta finendo» ── */
.ma__riga { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35em; }
.ma__riga--cala { background: rgba(201, 169, 233, 0.08); }
.ma__q { display: grid; justify-items: end; gap: 0.32em; }
.ma__q b { grid-area: 1 / 1; font-size: 0.84em; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity 300ms ease-out, transform 420ms var(--curva); transition-delay: 650ms; }
.ma__q i { grid-area: 2 / 1; position: relative; display: block; width: 4.2em; height: 0.38em; border-radius: 1em; background: #2C2C2E; overflow: hidden; }
.ma__q i::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #8E8E93; transform-origin: 0 50%; transform: scaleX(var(--q)); transition: transform 900ms var(--curva) 550ms; }
.ma__riga--cala .ma__q i::before { background: #C9A9E9; }
.ma__prima { opacity: 0; transform: translateY(-0.5em); }
html.js .ap__pagina:not(.su) .ma__prima { opacity: 1; transform: none; }
html.js .ap__pagina:not(.su) .ma__dopo { opacity: 0; transform: translateY(0.5em); }
html.js .ap__pagina:not(.su) .ma__riga--cala .ma__q i::before { transform: scaleX(0.82); }
.ma__stato { grid-column: 1 / -1; justify-self: start; transition: opacity 300ms ease-out, transform 480ms var(--molla); transition-delay: 1150ms; }
html.js .ap__pagina:not(.su) .ma__stato { opacity: 0; transform: scale(0.8); }
.ma__ordina { position: absolute; left: 1.05em; right: 1.05em; bottom: 6.1em; display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.6em 0.7em 0.6em 0.85em; border-radius: 0.9em; background: #2C2C2E; box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.55); transition: opacity 300ms ease-out, transform 520ms var(--curva); transition-delay: 1500ms; }
html.js .ap__pagina:not(.su) .ma__ordina { opacity: 0; transform: translateY(1.2em); }
.ma__ordina b { display: block; font-size: 0.82em; font-weight: 650; }
.ma__ordina small { display: block; font-size: 0.7em; color: #8E8E93; }
.ma__ordina i { flex: none; font-style: normal; font-size: 0.76em; font-weight: 700; color: #14101F; background: #C9A9E9; padding: 0.5em 1em; border-radius: 2em; }

/* ── Turni: la settimana, domenica scoperta ── */
.tu { display: grid; grid-template-columns: 4.5em repeat(7, minmax(0, 1fr)); gap: 0.24em; margin-top: 0.85em; }
.tu__g { display: grid; justify-items: center; align-content: end; font-size: 0.66em; font-weight: 650; color: #8E8E93; line-height: 1.15; padding-bottom: 0.3em; }
.tu__g small { font-size: 0.92em; font-weight: 500; }
.tu__g--oggi { color: #F5F5F7; }
.tu__g--dom { color: #E9DBFA; }
.tu__chi { display: grid; align-content: center; font-size: 0.72em; font-weight: 650; line-height: 1.12; }
.tu__chi small { font-size: 0.84em; font-weight: 500; color: #8E8E93; }
.tu__chi--manca { color: #E9DBFA; }
.tu__c { display: grid; place-items: center; height: 3.2em; border-radius: 0.5em; background: #2C2C2E; font-style: normal; font-size: 0.62em; font-weight: 700; color: #E5E5EA; transition: opacity 300ms ease-out; transition-delay: 150ms; }
.tu__c--oggi { background: #3A3A3C; color: #FFFFFF; }
.tu__c--no { background: transparent; box-shadow: inset 0 0 0 1px #2C2C2E; color: #5A5A5F; }
.tu__c--manca { background: rgba(201, 169, 233, 0.14); box-shadow: inset 0 0 0 0.16em #C9A9E9; color: #F4EAFF; transition: opacity 300ms ease-out, transform 520ms var(--molla); transition-delay: 800ms; }
html.js .ap__pagina:not(.su) .tu__c { opacity: 0; }
html.js .ap__pagina:not(.su) .tu__c--manca { transform: scale(0.6); }
.tu__legenda { margin: 0.65em 0.3em 0; font-size: 0.66em; color: #8E8E93; }
.tu__avviso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6em; margin-top: 0.85em; padding: 0.6em 0.7em; border-radius: 0.85em; background: #1C1C1E; }
.tu__avviso b, .cl__pannello b { display: block; font-size: 0.8em; font-weight: 650; }
.tu__avviso small, .cl__pannello small { display: block; font-size: 0.68em; color: #8E8E93; }
.tu__avviso i { font-style: normal; font-size: 0.74em; font-weight: 700; color: #14101F; background: #C9A9E9; padding: 0.5em 0.95em; border-radius: 2em; }
.tu__avviso { transition: opacity 300ms ease-out, transform 480ms var(--curva); transition-delay: 1100ms; }
html.js .ap__pagina:not(.su) .tu__avviso { opacity: 0; transform: translateY(0.8em); }

/* ── Incassi: la chiusura di ieri ── */
.in { margin-top: 0.8em; padding: 0.8em 0.85em 0.4em; border-radius: 0.85em; background: #1C1C1E; }
.in__sopra { font-size: 0.72em; font-weight: 600; color: #8E8E93; }
.in__totale { display: grid; margin-top: 0.3em; }
.in__totale small { font-size: 0.72em; color: #8E8E93; }
.in__totale b { font-size: 1.85em; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.in__barra { display: flex; height: 0.5em; margin: 0.65em 0 0.45em; border-radius: 1em; overflow: hidden; background: #2C2C2E; transform-origin: 0 50%; transition: transform 900ms var(--curva) 300ms; }
html.js .ap__pagina:not(.su) .in__barra { transform: scaleX(0.04); }
.in__carte { flex: 0 0 64%; background: #C9A9E9; }
.in__contanti { flex: 1; background: #6E6E73; margin-left: 2px; }
.in__riga { display: flex; justify-content: space-between; align-items: center; min-height: 2.3em; border-top: 1px solid #2C2C2E; font-size: 0.82em; }
.in__riga span { display: inline-flex; align-items: center; gap: 0.45em; }
.in__pt { width: 0.6em; height: 0.6em; border-radius: 50%; background: #6E6E73; }
.in__pt--carte { background: #C9A9E9; }
.in__giorni .ap__riga { grid-template-columns: 3.7em minmax(0, 1fr) auto; min-height: 2.75em; }
.in__g { font-size: 0.82em; font-weight: 650; }
.in__vuoto { grid-column: 2 / -1; font-size: 0.76em; color: #8E8E93; }
.in__mini { position: relative; display: block; height: 0.45em; border-radius: 1em; background: #2C2C2E; overflow: hidden; }
.in__mini i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #C9A9E9 0 64%, #6E6E73 64%); transform-origin: 0 50%; transform: scaleX(var(--c)); transition: transform 900ms var(--curva) 450ms; }
html.js .ap__pagina:not(.su) .in__mini i { transform: scaleX(0.04); }
.in__giorni .sfoca { font-size: 0.82em; font-weight: 650; }
.in__esporta { display: flex; align-items: center; gap: 0.45em; margin: 0.8em 0.3em 0; font-size: 0.82em; font-weight: 600; color: #C9A9E9; }
.gt .in__esporta svg { width: 1.15em; height: 1.15em; }

/* ══ Il problema: WhatsApp ═══════════════════════════════════ */
.gt--wa { --w: min(74vw, 300px); }
.wa { background: #000; color: #F5F5F7; }
.wa__app { position: absolute; inset: 0; padding: 4.2em 1em 0; transition: opacity 420ms ease-out; }
.wa__testa { display: flex; justify-content: space-between; align-items: center; padding-top: 0.2em; }
.wa__destra { display: flex; gap: 0.6em; }
.wa__tondo { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #1C1C1E; color: #F5F5F7; }
.gt .wa__tondo svg { width: 1.2em; height: 1.2em; }
.wa__tondo--verde { background: #21C063; color: #000; }
.gt .wa__tondo--verde svg { stroke-width: 2.6; }
.wa__titolo { margin-top: 0.15em; font-size: 2.05em; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; }
.wa__cerca { display: flex; align-items: center; gap: 0.45em; height: 2.4em; margin-top: 0.45em; padding: 0 0.75em; border-radius: 0.75em; background: #1C1C1E; color: #8E8E93; font-size: 0.88em; }
.gt .wa__cerca svg { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.wa__filtri { display: flex; gap: 0.45em; margin-top: 0.75em; font-size: 0.76em; font-weight: 600; white-space: nowrap; }
.wa__filtri span { padding: 0.45em 0.9em; border-radius: 2em; background: #1C1C1E; color: #B4B4B9; }
.wa__filtri .on { background: #0E3B28; color: #3EE08A; }
.wa__archivio { display: flex; align-items: center; gap: 1.2em; height: 2.7em; margin-top: 0.3em; padding-left: 0.85em; font-size: 0.9em; font-weight: 600; }
.gt .wa__archivio svg { width: 1.3em; height: 1.3em; color: #8E8E93; }
.wa__lista { list-style: none; margin: 0; padding: 0; }
.wa__chat { display: grid; grid-template-columns: 3.25em minmax(0, 1fr); gap: 0.75em; align-items: center; height: 4.3em; transition: transform 560ms var(--curva), opacity 320ms ease-out; }
.wa__chat.via { opacity: 0; }
.wa__av { display: grid; place-items: center; width: 3.25em; height: 3.25em; border-radius: 50%; background: #3A3A3C; color: #9A9AA0; overflow: hidden; }
.gt .wa__av svg { width: 1.95em; height: 1.95em; margin-top: 0.3em; }
.wa__av--io { background: #4A4A50; color: #C7C7CC; }
.gt .wa__av--io svg { width: 2.4em; height: 2.4em; margin-top: 0.75em; }
.wa__av img { width: 100%; height: 100%; object-fit: cover; }
.wa__corpo { min-width: 0; height: 100%; display: grid; align-content: center; gap: 0.16em; box-shadow: inset 0 -1px 0 #1E1E20; }
.wa__r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; }
.wa__r1 b { font-size: 0.98em; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa__r1 small { flex: none; font-size: 0.76em; color: #21C063; }
.wa__r1 .wa__letto { color: #8E8E93; }
.wa__r2 { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; color: #8E8E93; font-size: 0.86em; }
.wa__r2 > span { display: flex; align-items: center; gap: 0.25em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa__r2 i { flex: none; display: grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.45em; border-radius: 1em; background: #21C063; color: #000; font-style: normal; font-size: 0.8em; font-weight: 700; }
.gt .wa__spunte { flex: none; width: 1.2em; height: 0.75em; color: #53BDEB; stroke-width: 1.7; }
.wa__tab { position: absolute; left: 0; right: 0; bottom: 0; height: 5.5em; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0.55em 0.2em 0; background: rgba(14, 14, 15, 0.97); box-shadow: 0 -1px 0 #1E1E20; }
.wa__tab span { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.35em; font-size: 0.56em; color: #E5E5EA; white-space: nowrap; }
.gt .wa__tab svg { width: 2.75em; height: 2.75em; stroke-width: 1.6; }
.wa__tab .on { font-weight: 700; color: #FFFFFF; }
.gt .wa__tab .on svg { fill: currentColor; }
.wa__tab i { position: absolute; top: -0.25em; left: 58%; display: grid; place-items: center; min-width: 1.8em; height: 1.8em; padding: 0 0.4em; border-radius: 1em; background: #21C063; color: #000; font-style: normal; font-size: 0.95em; font-weight: 700; }
.wa__casa { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 0.6em; background: radial-gradient(130% 75% at 30% 0%, #3b2d63 0%, #1a1530 42%, #07070a 85%); opacity: 0; transition: opacity 520ms ease-out; }
.icona-locale { display: grid; place-items: center; width: 5.4em; height: 5.4em; border-radius: 1.25em; background: linear-gradient(150deg, #F4EAFF 0%, #C9A9E9 42%, #8B6FB8 100%); color: #1A1430; box-shadow: 0 0.9em 2.2em rgba(0, 0, 0, 0.55); opacity: 0; transform: scale(0.55); transition: transform 680ms var(--molla) 260ms, opacity 300ms ease-out 260ms; }
.gt .icona-locale svg { width: 3em; height: 3em; }
.wa__nome { font-size: 0.9em; font-weight: 600; opacity: 0; transition: opacity 320ms ease-out 480ms; }
.wa.casa .wa__app { opacity: 0; }
.wa.casa .wa__casa, .wa.casa .icona-locale, .wa.casa .wa__nome { opacity: 1; }
.wa.casa .icona-locale { transform: none; }

/* ══ Il metodo: la mappa del lavoro e quattro passi ══════════ */
.gs-metodo__sotto { margin-top: 20px; max-width: 30em; }
.gs-mappa { display: grid; gap: 40px; margin-top: 36px; }
.gs-mappa__vista { position: relative; display: grid; justify-items: center; padding-top: 42px; }
.gs-mappa__vista > .etichetta-esempio { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.gs-passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; counter-reset: passo; }
.gs-passi li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; counter-increment: passo; }
.gs-passi li::before {
  content: counter(passo); grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(201, 169, 233, 0.55); color: var(--lilla-chiaro); font-size: 15px; font-weight: 700;
}
.gs-passi__nome { padding-top: 5px; font-size: clamp(20px, 5.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.gs-passi p { margin-top: 6px; max-width: 30em; color: var(--sec); font-size: 16.5px; line-height: 1.55; }
@media (min-width: 1024px) {
  .gs-mappa { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; margin-top: 56px; }
  .gs-passi p { font-size: 17px; }
}

/* the spreadsheet of the work map: it comes up when it is on screen, then column D fills in */
.fo {
  position: relative; width: 100%; max-width: 560px;
  border-radius: 12px; overflow: hidden; background: #fff; color: #1F1F1F;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: clamp(10.5px, 2.9vw, 14px); letter-spacing: -0.005em; line-height: 1.25;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: opacity 520ms ease-out, transform 800ms var(--curva);
}
html.js .gs-mappa__vista:not(.visto) .fo { opacity: 0; transform: translateY(28px) scale(0.97); }
.fo__file { display: flex; align-items: center; gap: 0.7em; padding: 0.85em 1em 0.6em; }
.fo__doc { flex: none; width: 1.35em; height: 1.75em; border-radius: 0.2em; background: linear-gradient(#fff, #fff) 50% 62% / 62% 1px no-repeat, linear-gradient(#fff, #fff) 50% 78% / 62% 1px no-repeat, linear-gradient(#fff, #fff) 50% 70% / 1px 34% no-repeat, #1E8E3E; }
.fo__file b { font-size: 1.12em; font-weight: 600; }
.fo__file small { color: #5F6368; }
.fo__formula { display: flex; align-items: center; gap: 0.8em; padding: 0.4em 1em; border-top: 1px solid #E1E3E6; border-bottom: 1px solid #E1E3E6; color: #3C4043; }
.fo__cella { min-width: 2.6em; color: #5F6368; }
.fo__formula i { color: #5F6368; font-weight: 600; }
.fo__griglia { display: grid; grid-template-columns: 2.1em minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.1fr); }
.fo__griglia > * { display: flex; align-items: center; min-height: 2.5em; padding: 0.4em 0.5em; border-right: 1px solid #E2E3E3; border-bottom: 1px solid #E2E3E3; overflow-wrap: anywhere; }
.fo__griglia > b { font-weight: 700; }
.fo__lettera, .fo__n, .fo__angolo { justify-content: center; min-height: 1.9em; background: #F8F9FA; color: #5F6368; font-size: 0.9em; }
.fo__lettera--d { background: #D3E3FD; color: #0B57D0; font-weight: 600; }
.fo__nuovo { position: relative; background: #F3ECFB; color: #4A3B78; font-weight: 650; clip-path: inset(0 0 0 0); transition: clip-path 620ms var(--curva); transition-delay: calc(var(--i) * 170ms + 600ms); }
html.js .gs-mappa__vista:not(.visto) .fo__nuovo { clip-path: inset(0 100% 0 0); }
.fo__nuovo[style*="--i:0"] { box-shadow: inset 0 0 0 2px #1A73E8; }
.fo__fogli { display: flex; gap: 0.2em; padding: 0.4em 0.6em; background: #F8F9FA; color: #5F6368; }
.fo__fogli span { padding: 0.35em 0.85em; border-radius: 0.35em; }
.fo__fogli .on { background: #E1E9F7; color: #0B57D0; font-weight: 600; }

.lv__pagina { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background: #fff; }
.lv__rotolo { padding-top: 3.9em; will-change: transform; }
.lv__rotolo > img { display: block; width: 100%; height: auto; }
/* the real page cut in slices (1em = 560 px / 23.5): the card for computers and the fixed bar are left out */
.fetta { position: relative; overflow: hidden; }
.fetta img { position: absolute; left: 0; width: 100%; height: auto; }
/* Fu Ramen: the screenshot caught the fixed «Prenota il tavolo» button twice over the title; that stretch is skipped */
.fetta--fr-a { height: 51.11em; }
.fetta--fr-a img { top: 0; }
.fetta--fr-b { height: 96.39em; border-top: 2.6em solid #023A85; }
.fetta--fr-b img { top: -60.26em; }
.gt__stato--bianco { background: #fff; }
.gt__stato--blu { background: #013A83; }
.sf__barra { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 7.3em; padding: 0.55em 0.8em 0; background: rgba(248, 248, 248, 0.97); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); }
.sf__barra--sola { height: 5.7em; background: #F8F8F8; }
.sf__indirizzo { display: flex; align-items: center; gap: 0.55em; height: 2.6em; padding: 0 0.8em; border-radius: 0.8em; background: #E8E8EA; font-size: 0.84em; color: #000; }
.sf__indirizzo span:nth-child(2) { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf__aa { font-weight: 600; font-size: 0.92em; }
.gt .sf__indirizzo svg { flex: none; width: 1.1em; height: 1.1em; stroke-width: 2.2; }

/* ══ Le app per i clienti: i due lavori, uno accanto all'altro ═ */
.lv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 40px; }
.lv__lavoro { display: grid; gap: 22px; align-content: start; justify-items: center; }
.gt--lavoro { --w: min(42vw, 236px); }
.gs-lavori > .gs-in > .gs-link { margin-top: 28px; }

.lv__testo { justify-self: stretch; max-width: 34em; }
.lv__tipo { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--sec); }
.lv__nome { margin-top: 6px; font-size: clamp(20px, 5.4vw, 38px); font-weight: 750; letter-spacing: -0.022em; line-height: 1.1; }
.lv__frase { margin-top: 8px; color: var(--sec); font-size: 15px; line-height: 1.5; }
.lv__testo .gs-link { margin-top: 6px; font-size: 15.5px; }
@media (min-width: 768px) {
  .lv__tipo { font-size: 14px; }
  .lv__frase { font-size: 17px; line-height: 1.6; }
}
@media (min-width: 1024px) {
  .lv { gap: 72px; margin-top: 72px; }
  .lv__lavoro { justify-items: start; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 40px; }
  .gt--lavoro { --w: 270px; }
}

/* ══ Domande frequenti ═══════════════════════════════════════ */
.gs-faq__griglia { display: grid; gap: 32px; }
.gs-faq__lista { border-top: 1px solid var(--riga); }
.gs-faq__voce { border-bottom: 1px solid var(--riga); }
.gs-faq__voce summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: center; gap: 18px; min-height: 64px; padding: 14px 0; font-size: clamp(17px, 4.6vw, 20px); font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.gs-faq__voce summary::-webkit-details-marker { display: none; }
.gs-faq__voce summary i { position: relative; width: 20px; height: 20px; }
.gs-faq__voce summary i::before, .gs-faq__voce summary i::after { content: ''; position: absolute; left: 2px; right: 2px; top: 9px; height: 2px; border-radius: 2px; background: var(--lilla); transition: transform 300ms var(--curva); }
.gs-faq__voce summary i::after { transform: rotate(90deg); }
.gs-faq__voce[open] summary i::after { transform: rotate(0deg); }
.gs-faq__voce summary:active { color: var(--lilla-chiaro); }
@media (hover: hover) { .gs-faq__voce summary:hover { color: var(--lilla-chiaro); } }
.gs-faq__voce p { padding: 0 36px 24px 0; max-width: 40em; color: var(--sec); font-size: 17px; line-height: 1.6; }
@media (min-width: 1024px) { .gs-faq__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; } }

/* ══ Contatto: la chiusura di e.css, più la riga dell'email ══ */
.chiusura__posta { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.chiusura__posta .collegamento { margin-left: 0; display: inline-flex; align-items: center; min-height: 44px; background-position: 0 calc(100% - 11px); }
@media (max-width: 559px) {
  .chiusura__posta { flex-direction: column; align-items: flex-start; }
  .chiusura__punto { display: none; }
}

/* ══ Movimento ridotto, o «Ferma le animazioni»: lo stato finale ═ */
@media (prefers-reduced-motion: reduce) {
  html.js .sale { transform: none; }
}
html.fermo .sale { transform: none; }