/* Grimaldi Growth · livello di animazioni e simulazioni aggiunto alla bozza (prefisso gx-).
   Usa le variabili del sito (--notte, --viola, --corallo, --lavanda...). Dati delle simulazioni inventati. */

/* ---------- Barra di avanzamento in alto ---------- */
.gx-avanzamento { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; pointer-events: none; }
.gx-avanzamento i { display: block; height: 100%; background: linear-gradient(90deg, var(--viola), var(--corallo)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Hero: luce che segue il mouse ---------- */
.gx-luce { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(520px circle at var(--gx-x, 70%) var(--gx-y, 30%), rgba(255,122,89,.22), transparent 60%);
  mix-blend-mode: screen; transition: opacity .6s; }
.hero .hero-contenuto { position: relative; z-index: 1; }

/* ---------- Finestre delle simulazioni ---------- */
.gx-mock { position: relative; font-size: clamp(8.5px, .95vw, 12.5px); font-family: var(--font); color: #1e1240; }
.gx-finestra { background: #fff; border-radius: 1.4em; overflow: hidden; box-shadow: 0 2.4em 5em -1.6em rgba(30,18,64,.35), 0 0 0 1px rgba(30,18,64,.06); }
.gx-barra { display: flex; align-items: center; gap: .5em; padding: .9em 1.1em; background: #f1edf8; border-bottom: 1px solid #e4def0; }
.gx-barra i { width: .75em; height: .75em; border-radius: 50%; background: #d8d0ea; }
.gx-barra i:first-child { background: #ff8f73; } .gx-barra i:nth-child(2) { background: #ffc66e; } .gx-barra i:nth-child(3) { background: #7fd49a; }
.gx-url { margin-left: 1em; flex: 1; background: #fff; border-radius: 99em; padding: .35em 1em; font-size: .95em; color: #6b6189; }
.gx-didascalia { margin: 14px 0 0; font-size: .8rem; letter-spacing: .04em; color: var(--testo-tenue); text-align: center; }
.scuro .gx-didascalia { color: var(--testo-scuro-tenue); }

.gx-notifica { position: absolute; right: -1.2em; top: 18%; display: flex; align-items: center; gap: .9em; background: #fff; border-radius: 1.1em; padding: 1em 1.3em;
  box-shadow: 0 1.6em 3em -1em rgba(30,18,64,.35); opacity: 0; transform: translateY(1em) scale(.96); z-index: 5; font-size: 1.05em; }
.gx-notifica b { display: block; font-size: 1.05em; }
.gx-notifica small { display: block; color: #6b6189; font-size: .9em; }
.gx-n-icona { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: var(--corallo); color: #fff; font-weight: 700; flex-shrink: 0; }

.gx-cursore { position: absolute; left: 0; top: 0; width: 2.2em; z-index: 6; pointer-events: none; filter: drop-shadow(0 .3em .5em rgba(0,0,0,.25)); }
.gx-cursore path { fill: #1e1240; stroke: #fff; stroke-width: 1.5; }
.gx-clic { position: absolute; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; border: 2px solid var(--corallo); pointer-events: none; z-index: 6; }

/* ---------- Simulazione sito ---------- */
.gx-pagina { position: relative; background: #fffaf4; }
.gs-nav { display: flex; align-items: center; gap: 1.6em; padding: 1.1em 1.6em; font-size: 1em; color: #5c4a3b; }
.gs-logo { margin-right: auto; font-size: 1.25em; color: #3d2f24; letter-spacing: -.01em; }
.gs-logo em { font-style: normal; color: #b4643c; }
.gs-nav-btn { background: #3d2f24; color: #fff8ee; padding: .5em 1.1em; border-radius: 99em; font-weight: 600; }
.gs-hero { position: relative; height: 17em; overflow: hidden; }
.gs-paesaggio { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs-hero-testo { position: relative; padding: 2.2em 1.8em; max-width: 60%; }
.gs-occhiello { font-size: .8em; letter-spacing: .2em; text-transform: uppercase; color: #b4643c; font-weight: 600; }
.gs-hero-testo h4 { margin: .4em 0 .9em; font-size: 2em; line-height: 1.08; color: #3d2f24; letter-spacing: -.02em; font-weight: 600; }
.gs-cta { display: inline-block; background: #b4643c; color: #fff; padding: .75em 1.4em; border-radius: 99em; font-weight: 600; font-size: 1.05em; }
.gs-schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding: 1.4em 1.6em 1.8em; }
.gs-schede div { background: #fff; border: 1px solid #f0e3d3; border-radius: .9em; padding: 1em 1.1em; }
.gs-schede b { display: block; color: #3d2f24; }
.gs-schede small { color: #8a7562; }
.gs-modale { position: absolute; left: 22%; top: 12%; width: 56%; background: #fff; border-radius: 1.2em; padding: 1.4em 1.5em;
  box-shadow: 0 2em 4em -1em rgba(61,47,36,.45); opacity: 0; visibility: hidden; display: grid; gap: .65em; }
.gs-modale > b { font-size: 1.3em; color: #3d2f24; }
.gs-campo { border: 1px solid #ecdcc9; border-radius: .7em; padding: .45em .8em; min-height: 3.1em; }
.gs-campo small { display: block; font-size: .78em; color: #8a7562; }
.gs-campo span { font-weight: 600; color: #3d2f24; }
.gs-campo span::after { content: '|'; margin-left: 1px; color: #b4643c; opacity: 0; }
.gs-campo span.scrive::after { opacity: 1; }
.gs-invia { justify-self: start; background: #b4643c; color: #fff; padding: .7em 1.3em; border-radius: 99em; font-weight: 600; }
.gs-ok { position: absolute; inset: 0; border-radius: 1.2em; background: #fff; display: grid; place-items: center; font-size: 1.5em; font-weight: 600; color: #3a8a55; opacity: 0; }

/* ---------- Simulazione CRM ---------- */
.gc-app { display: grid; grid-template-columns: 9.5em 1fr; min-height: 27em; }
.gc-lato { background: #1e1240; color: #b9aedb; padding: 1.2em .9em; display: flex; flex-direction: column; gap: .35em; font-size: .95em; }
.gc-logo { width: 2em; margin: 0 0 1.2em .3em; }
.gc-logo path { fill: #f6f3fa; } .gc-logo path.v { fill: var(--corallo); }
.gc-lato span { padding: .55em .7em; border-radius: .6em; }
.gc-lato span.on { background: rgba(91,53,201,.45); color: #fff; }
.gc-corpo { background: #f6f3fa; padding: 1.2em 1.3em; }
.gc-testa { display: flex; align-items: center; gap: 1.6em; margin-bottom: 1.1em; }
.gc-testa > b { font-size: 1.4em; margin-right: auto; }
.gc-kpi small { display: block; font-size: .8em; color: #6b6189; }
.gc-kpi strong { font-size: 1.3em; color: var(--viola); font-variant-numeric: tabular-nums; }
.gc-tavola { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; }
.gc-col { background: #ece7f7; border-radius: .9em; padding: .7em; display: flex; flex-direction: column; gap: .6em; min-height: 19em; }
.gc-col > p { margin: 0 0 .1em; font-size: .85em; font-weight: 600; color: #4a4166; display: flex; justify-content: space-between; }
.gc-col > p em { font-style: normal; background: #fff; border-radius: 99em; padding: 0 .6em; color: var(--viola); }
.gc-col[data-gc-col="3"] { background: #ffe9e2; }
.gc-card { background: #fff; border-radius: .7em; padding: .65em .7em; display: grid; grid-template-columns: 1.9em 1fr; column-gap: .55em; box-shadow: 0 .3em .8em -.4em rgba(30,18,64,.25); position: relative; }
.gc-card i { grid-row: span 3; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .85em; background: #ece7f7; color: var(--viola); }
.gc-card b { font-size: .9em; line-height: 1.2; }
.gc-card small { font-size: .78em; color: #6b6189; line-height: 1.2; }
.gc-card span { font-size: .85em; font-weight: 700; color: #1e1240; }
.gc-mobile { z-index: 3; outline: 2px solid transparent; transition: outline-color .3s; }
.gc-mobile.attiva { outline-color: var(--corallo); }
.gc-vinta i, .gc-mobile.vinta i { background: var(--corallo); color: #fff; }

/* ---------- Storia: dal tavolo al gestionale ---------- */
.gx-storia { position: relative; height: 520vh; scroll-margin-top: calc(var(--altezza-header) + 56px); }
.gx-storia-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--altezza-header); }
.gx-storia-griglia { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.gx-storia h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.08; margin: 0 0 28px; }
.gx-storia h2 .tenue { color: var(--testo-scuro-tenue); font-weight: 300; }
.gx-passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gx-passi li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 12px 16px; border-left: 2px solid var(--bordo-scuro); opacity: .62; transition: opacity .45s, border-color .45s, background .45s; border-radius: 0 12px 12px 0; }
.gx-passi li b { color: var(--corallo); font-size: .95rem; padding-top: 3px; }
.gx-passi li h3 { margin: 0; font-size: 1.12rem; color: var(--lavanda); }
.gx-passi li p { margin: 2px 0 0; font-size: .95rem; color: var(--testo-scuro); max-height: 0; overflow: hidden; transition: max-height .5s; }
.gx-passi li.on { opacity: 1; border-color: var(--corallo); background: rgba(91,53,201,.18); }
.gx-passi li.on p { max-height: 4em; }
.gx-didascalia-storia { position: absolute; bottom: 18px; left: 0; right: 0; }

.gx-palco { position: relative; height: min(70vh, 50em); font-size: clamp(8px, .9vw, 13px); }

/* Portatile */
.gx-pc { position: absolute; right: 0; top: 2%; width: 42em; }
.gx-pc-schermo { position: relative; background: #fff; border: .7em solid #2a1b57; border-radius: 1.2em 1.2em .4em .4em; aspect-ratio: 16 / 10.2; overflow: hidden; display: grid; grid-template-columns: 8.5em 1fr; color: #1e1240; }
.gx-pc-base { height: 1.3em; margin: 0 -3em; background: linear-gradient(#3a2a6e, #1e1240); border-radius: 0 0 1.4em 1.4em; }
.gp-lato { background: #1e1240; color: #b9aedb; padding: 1em .7em; display: flex; flex-direction: column; gap: .2em; font-size: .9em; }
.gp-logo { width: 2.2em; height: 2.2em; border-radius: 50%; overflow: hidden; margin-bottom: 1em; }
.gp-logo img { width: 100%; height: 100%; display: block; }
.gp-lato span { padding: .5em .6em; border-radius: .5em; }
.gp-lato span.on { background: rgba(91,53,201,.5); color: #fff; }
.gp-corpo { background: #f7f5fb; padding: 1em 1.2em; overflow: hidden; }
.gp-testa { display: flex; align-items: baseline; gap: .8em; margin-bottom: .8em; }
.gp-testa b { font-size: 1.35em; }
.gp-testa small { color: #6b6189; }
.gp-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-bottom: .9em; }
.gp-kpi div { background: #fff; border-radius: .7em; padding: .6em .8em; border: 1px solid #ece7f7; }
.gp-kpi small { display: block; font-size: .78em; color: #6b6189; }
.gp-kpi strong { font-size: 1.45em; color: var(--viola); font-variant-numeric: tabular-nums; }
.gp-tabella { background: #fff; border-radius: .8em; border: 1px solid #ece7f7; overflow: hidden; }
.gp-riga { display: grid; grid-template-columns: 4em 1fr 3.2em 6em 7.6em; align-items: center; padding: 0 .9em; height: 2.55em; font-size: .9em; border-top: 1px solid #f1edf8; overflow: hidden; }
.gp-intesta { border-top: 0; height: 2.3em; font-size: .75em; letter-spacing: .08em; text-transform: uppercase; color: #6b6189; background: #faf8fd; }
.gp-riga em { font-style: normal; font-size: .85em; background: #ece7f7; color: #4a4166; padding: .15em .6em; border-radius: 99em; }
.gp-riga em.f-nfc { background: #fff0ea; color: #c4532f; }
.gp-riga u { text-decoration: none; font-size: .85em; font-weight: 600; padding: .15em .6em; border-radius: 99em; }
.gp-riga u.ok, .gp-riga u.s1 { background: #e3f5ea; color: #2e7d4f; }
.gp-riga u.att { background: #fff4d6; color: #9a6b00; }
.gp-riga u.s2 { background: #ece7f7; color: var(--viola); }
.gp-stato { position: relative; }
.gp-stato u.s2 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; white-space: nowrap; }
.gp-nuova { height: 0; background: #fff6f2; }
.gp-toast { position: absolute; right: 1em; top: 1em; display: flex; gap: .7em; align-items: center; background: #1e1240; color: #f6f3fa; border-radius: .9em; padding: .7em 1em; box-shadow: 0 1em 2em -.6em rgba(30,18,64,.6); opacity: 0; transform: translateY(-1em); font-size: .95em; }
.gp-toast small { display: block; color: #cfc6e8; font-size: .85em; }

/* Adesivo NFC */
.gx-adesivo { position: absolute; left: 21.5em; bottom: 2%; width: 9em; height: 9em; border-radius: 1.6em; background: #fff; color: #1e1240; display: grid; place-items: center; align-content: center; gap: .1em;
  box-shadow: 0 1.2em 2.4em -1em rgba(0,0,0,.5); z-index: 3; text-align: center; }
.gx-adesivo b { font-size: 1.6em; color: var(--viola); letter-spacing: .05em; }
.gx-adesivo small { font-size: .78em; color: #6b6189; line-height: 1.2; padding: 0 .8em; }
.gx-adesivo .onda { position: absolute; inset: -.6em; border-radius: 2em; border: 2px solid var(--corallo); opacity: 0; animation: gx-onda 2.4s infinite; }
.gx-adesivo .onda.o2 { animation-delay: 1.2s; }
@keyframes gx-onda { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

/* Telefono */
.gx-tel { position: absolute; left: 0; bottom: 0; width: 20em; aspect-ratio: 9 / 19; background: #120a2a; border-radius: 3em; padding: .75em; z-index: 4;
  box-shadow: 0 3em 5em -2em rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.12); }
.gx-tel-schermo { position: relative; height: 100%; border-radius: 2.3em; overflow: hidden; background: #0e0d0c; color: #f3ece0; -webkit-font-smoothing: antialiased; }
.gt-isola { position: absolute; top: .7em; left: 50%; width: 6em; height: 1.6em; margin-left: -3em; background: #120a2a; border-radius: 99em; z-index: 9; }
.gt-vista { position: absolute; inset: 0; padding: 3.2em 1.2em 1.2em; display: flex; flex-direction: column; opacity: 0; visibility: hidden; }
.gt-nfc { align-items: center; justify-content: center; text-align: center; gap: .8em; opacity: 1; visibility: visible; background: radial-gradient(circle at 50% 38%, #2b2620, #0e0d0c 70%); }
.gt-logo-xv { width: 7em; height: 7em; border-radius: 50%; }
.gt-nfc b { font-size: 1.3em; letter-spacing: .35em; text-transform: uppercase; }
.gt-nfc small { font-size: 1em; color: #b8ad9c; padding: 0 1em; line-height: 1.35; }
.gt-carica { width: 60%; height: .35em; border-radius: 99em; background: #2e2a26; overflow: hidden; margin-top: .6em; }
.gt-carica i { display: block; height: 100%; width: 100%; background: #c9b07a; transform: scaleX(0); transform-origin: 0 50%; }
/* Menù Xovem sfogliabile */
.gt-menu { padding: 2.9em .9em .9em; gap: .5em; background: #0e0d0c; }
.xv-testa { display: flex; align-items: center; gap: .35em; }
.xv-testa img { width: 2.2em; height: 2.2em; border-radius: 50%; margin-right: auto; }
.gt-lingua { position: relative; display: flex; border: 1px solid #6f6556; border-radius: 99em; padding: .15em; font-size: .78em; font-weight: 700; }
.gt-lingua i { position: relative; z-index: 1; font-style: normal; width: 2.3em; text-align: center; padding: .2em 0; }
.gt-lingua em { position: absolute; left: .15em; top: .15em; bottom: .15em; width: 2.3em; background: rgba(243,236,224,.2); border-radius: 99em; }
.xv-modo { display: flex; background: #1d1b19; border: 1px solid #3a352f; border-radius: 99em; padding: .15em; font-size: .78em; font-weight: 700; }
.xv-modo i { font-style: normal; padding: .2em .55em; border-radius: 99em; }
.xv-modo i.on { background: #2e2a26; }
.xv-libro { position: relative; width: 100%; aspect-ratio: 595 / 842; perspective: 70em; margin: .2em 0; }
.xv-pag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 0% 50%; backface-visibility: hidden; box-shadow: 0 .5em 1.2em rgba(0,0,0,.55); }
.xv-en { opacity: 0; }
.xv-nav { display: flex; align-items: center; justify-content: center; gap: 1.1em; font-size: .85em; }
.xv-nav i { font-style: normal; width: 2.1em; height: 2.1em; border-radius: 50%; border: 1px solid #3a352f; display: grid; place-items: center; }
.xv-nav b { font-variant-numeric: tabular-nums; }
.xv-bottoni { display: flex; justify-content: center; gap: .5em; font-size: .8em; }
.xv-bottoni span { border: 1px solid #3a352f; border-radius: 99em; padding: .3em .9em; }
.xv-bottoni .oro { background: #c9b07a; border-color: #c9b07a; color: #1a1610; font-weight: 700; }
.gt-prenota-btn { position: relative; background: #c9b07a; color: #1a1610; border-radius: 99em; text-align: center; padding: .55em; display: grid; place-items: center; font-size: .95em; font-weight: 700; }
.gx-tel .gt-prenota-btn span { grid-area: 1 / 1; position: static; white-space: nowrap; }
.gt-form { gap: .65em; background: #0e0d0c; }
.gt-form-titolo { font-size: 1.35em; color: #c9b07a; margin-bottom: .2em; }
.gt-campo { background: #1b1917; border: 1px solid #3a352f; border-radius: .8em; padding: .5em .8em; }
.gt-campo small { display: block; font-size: .78em; color: #9c917f; }
.gt-campo span { font-weight: 700; opacity: 0; }
.gt-conferma { margin-top: auto; background: #c9b07a; color: #1a1610; border-radius: 99em; text-align: center; padding: .85em; font-weight: 700; }
.gt-fatto { position: absolute; inset: 0; background: #0e0d0c; display: grid; place-content: center; text-align: center; gap: .3em; opacity: 0; }
.gt-fatto i { font-style: normal; width: 2.4em; height: 2.4em; margin: 0 auto .4em; border-radius: 50%; background: #c9b07a; color: #1a1610; display: grid; place-items: center; font-size: 1.6em; }
.gt-fatto b { font-size: 1.25em; }
.gt-fatto small { color: #9c917f; }
.gt-chat { background: #efe7dc; color: #1e1a14; gap: .8em; padding-top: 0; }
.gt-chat-testa { margin: 0 -1.2em .4em; padding: 3em 1.2em .8em; background: #2f7a5f; color: #fff; display: grid; grid-template-columns: 2.2em 1fr; column-gap: .6em; align-items: center; }
.gt-chat-logo { grid-row: span 2; width: 2.2em; height: 2.2em; border-radius: 50%; }
.gt-chat-testa small { font-size: .78em; opacity: .85; }
.gt-bolla { background: #fff; border-radius: 0 1em 1em 1em; padding: .8em .9em; font-size: .95em; line-height: 1.4; max-width: 88%; box-shadow: 0 .15em .3em rgba(0,0,0,.08); opacity: 0; }
.gt-stelle { display: block; color: #f2a93b; letter-spacing: .15em; margin: .3em 0; }
.gt-bolla u { display: block; text-decoration: none; text-align: center; color: #2f7a5f; font-weight: 700; border-top: 1px solid #efe7dc; padding-top: .5em; }

/* ---------- Pulsanti magnetici e schede impegni ---------- */
.bottone, .bottone-secondario { will-change: translate; }
.impegno { position: relative; overflow: hidden; }
.impegno::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--gx-x, 50%) var(--gx-y, 50%), rgba(91,53,201,.12), transparent 70%); }
.impegno:hover::after { opacity: 1; }

/* ---------- Telefono e tablet ---------- */
.servizio-ill { min-width: 0; }
.gx-mock { max-width: 100%; }
@media (max-width: 600px) {
  /* Il gestionale resta la composizione del desktop, colonna del menu e cerchietti compresi
     (Gianni, 28/10/2026): per starci in un telefono si rimpicciolisce tutta la finestra,
     non si togliono dei pezzi. Tutta la simulazione e' in em, quindi basta la base. */
  .gx-crm { font-size: clamp(6.2px, 1.85vw, 9.5px); }
  .gx-crm .gc-app { grid-template-columns: 8.4em 1fr; }
  .gx-crm .gc-lato { padding: 1em .6em; }
  .gx-crm .gc-corpo { padding: 1em .9em; }
  .gc-tavola { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4em; }
  .gc-col { padding: .4em; min-height: 17em; }
  .gc-card { padding: .55em .5em; column-gap: .45em; }
  .gc-testa { gap: .9em; }
  .gx-notifica { right: .4em; top: auto; bottom: -1.2em; }
}

/* Il palco del metodo e la riga che lo chiude: l'originale li nasconde sotto gli 861px, qui
   tornano con il loro montaggio (le patch allo script del sito sono in monta.py). */
@media (max-width: 860px) {
  .metodo .palco, .metodo .metodo-finale { display: block; }
  .metodo .palco { width: min(100%, 420px); }
  /* i fumetti volano a sinistra di una distanza fissa in pixel: su un palco piccolo uscirebbero
     dallo schermo, quindi partono piu' a destra (l'originale ha il left nel tag, serve important) */
  .metodo .fumetto { left: 44% !important; }
  /* la notifica non si rimpicciolisce con il palco: su schermo stretto coprirebbe la G */
  .metodo .notifica { right: 0; gap: 8px; padding: 10px 14px; }
  .metodo .notifica b { font-size: .85rem; }
  .metodo .notifica-icona { width: 28px; height: 28px; }
  /* fumetti e notifica escono di poco dal palco: su schermo stretto si tagliano al bordo */
  .metodo { overflow-x: clip; }
}

/* La G accanto al modulo: anche questa c'e' solo sul desktop, e sul telefono manca poco spazio */
@media (max-width: 900px) {
  .chiusura .chiusura-simbolo { display: block; width: 86px; margin-top: 36px; }
}
/* La storia resta la stessa del desktop anche su telefono (Gianni, 28/10/2026): pagina bloccata
   e racconto che avanza con lo scorrimento. Qui si stringe tutto per stare in una schermata. */
@media (max-width: 900px) {
  .gx-storia { height: 420vh; }
  .gx-storia-griglia { grid-template-columns: 1fr; gap: 12px; }
  .gx-storia h2 { font-size: clamp(1.4rem, 5.4vw, 2rem); margin-bottom: 12px; }
  .gx-passi { gap: 4px; }
  .gx-passi li { grid-template-columns: 32px 1fr; gap: 8px; padding: 6px 12px; }
  .gx-passi li b { font-size: .85rem; padding-top: 2px; }
  .gx-passi li h3 { font-size: .98rem; }
  .gx-passi li p { font-size: .85rem; }
  .gx-palco { height: min(38vh, 46em); font-size: clamp(4.6px, 1.4vw, 10px); max-width: 100%; }
  .xv-libro { width: 82%; margin: .2em auto; }
  .gx-didascalia-storia { bottom: 10px; font-size: .72rem; }
  .gx-notifica { right: .5em; }
}

/* Telefoni bassi (iPhone SE e simili): nella cornice bloccata, tolta l'altezza dell'intestazione
   e della barra delle aree, restano circa 530px. Si tengono i cinque passi e la scena, e si
   rinuncia alla riga di spiegazione del passo acceso: il titolo del passo dice gia' il suo. */
@media (max-width: 900px) and (max-height: 740px) {
  /* sotto l'intestazione c'e' anche la barra delle aree: la scena parte piu' in basso */
  .gx-storia-sticky { padding-top: calc(var(--altezza-header) + 22px); }
  .gx-storia h2 { font-size: 1.08rem; line-height: 1.15; margin-bottom: 6px; }
  .gx-passi { gap: 3px; }
  .gx-passi li { padding: 3px 10px; }
  .gx-passi li h3 { font-size: .88rem; }
  .gx-passi li.on p { max-height: 0; }
  .gx-palco { font-size: clamp(4px, 1.18vw, 10px); }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .gx-adesivo .onda { animation: none; }
  .gx-storia { height: auto; }
  .gx-storia-sticky { position: relative; height: auto; padding-block: 96px; }
}

/* ---------- Motion graphic: tre competenze, un'unica regia ---------- */
.gx-con-grafica { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: none; }
.gx-regia { position: relative; width: 100%; aspect-ratio: 460 / 400; container-type: inline-size; font-family: var(--font); }
.gx-regia-linee { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gx-regia .binario { fill: none; stroke: rgba(91,53,201,.16); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gx-regia .traccia { fill: none; stroke: var(--viola); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .6; }
.sfumato .gx-regia .binario, .scuro .gx-regia .binario { stroke: rgba(246,243,250,.16); }
.sfumato .gx-regia .traccia, .scuro .gx-regia .traccia { stroke: var(--testo-scuro); }
.gx-regia .impulso { fill: var(--corallo); opacity: 0; filter: drop-shadow(0 0 4px rgba(255,122,89,.9)); }
.gx-regia-voce { position: absolute; left: 0; top: var(--y); translate: 0 -50%; width: 33%; display: flex; align-items: center; gap: 2.4cqw; padding: 2.2cqw 2.6cqw;
  background: #fff; border-radius: 3.4cqw; color: var(--notte); font-size: 3.1cqw; font-weight: 600; line-height: 1.15;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(30,18,64,.35), 0 0 0 1px rgba(30,18,64,.06); transition: box-shadow .3s; }
.gx-regia-voce i { flex: none; width: 7.4cqw; height: 7.4cqw; border-radius: 2.2cqw; background: var(--lavanda-2); display: grid; place-items: center; }
.gx-regia-voce svg { width: 60%; height: 60%; fill: none; stroke: var(--viola); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gx-regia-voce svg .pieno { fill: var(--viola); stroke: none; }
.gx-regia-voce.attiva { box-shadow: 0 2cqw 5cqw -2cqw rgba(30,18,64,.35), 0 0 0 2px var(--corallo); }
.gx-regia-centro { position: absolute; left: 68.26%; top: 35.5%; width: 25.22%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 3cqw 7cqw -2cqw rgba(30,18,64,.45); }
.gx-regia-centro > svg { width: 44%; overflow: visible; }
.gx-regia-centro path { fill: var(--viola); }
.gx-regia-centro path.v { fill: var(--corallo); }
.gx-regia-centro .anello { position: absolute; inset: -9%; border-radius: 50%; border: 1.5px dashed rgba(91,53,201,.35); animation: gx-gira 22s linear infinite; }
.sfumato .gx-regia-centro .anello, .scuro .gx-regia-centro .anello { border-color: rgba(246,243,250,.35); }
.gx-regia-centro .onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--corallo); opacity: 0; }
@keyframes gx-gira { to { transform: rotate(360deg); } }
.gx-regia-esito { position: absolute; left: 58%; top: 72%; width: 40%; background: #fff; border-radius: 3cqw; padding: 2.2cqw 2.6cqw 1.6cqw;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(30,18,64,.35), 0 0 0 1px rgba(30,18,64,.06); }
.gx-regia-esito small { display: block; font-size: 2.5cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--testo-tenue); margin-bottom: .8cqw; }
.gx-regia-esito svg { display: block; width: 100%; overflow: visible; }
.gx-regia-esito .area { fill: rgba(91,53,201,.1); }
.gx-regia-esito .sp { fill: none; stroke: var(--viola); stroke-width: 2.4; stroke-linecap: round; }
.gx-regia-esito .punta { fill: var(--corallo); }

/* ---------- Vetrina delle realizzazioni in home ---------- */
.gx-vetrina-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.gx-vetrina h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.gx-vetrina .link-freccia { color: var(--lavanda); }
.gx-vetrina .link-freccia:hover span { transform: translateX(4px); }
.gx-vetrina-griglia { display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-rows: minmax(250px, auto); gap: 18px; }
.gx-t-menu { grid-row: span 2; }
.gx-tessera { position: relative; display: flex; flex-direction: column; gap: 18px; overflow: hidden; border-radius: var(--raggio); background: var(--notte-2);
  border: 1px solid var(--bordo-scuro); padding: 22px; color: var(--lavanda); text-decoration: none; transition: border-color .3s, translate .35s; }
.gx-tessera::after { content: '→'; position: absolute; right: 18px; bottom: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--bordo-scuro); color: var(--testo-scuro); transition: background .3s, color .3s, border-color .3s; }
.gx-tessera:hover { border-color: rgba(255,122,89,.55); translate: 0 -4px; }
.gx-tessera:hover::after { background: var(--corallo); border-color: var(--corallo); color: var(--notte); }
.gx-tessera-vis { position: relative; flex: 1; min-height: 140px; border-radius: var(--raggio-s); background: rgba(246,243,250,.04); overflow: hidden; }
.gx-tessera-testo b { display: block; font-size: 1.25rem; font-weight: 600; }
.gx-tessera-testo small { color: var(--testo-scuro-tenue); font-size: .95rem; }
/* menù: due pagine a ventaglio */
.gx-t-menu .gx-tessera-vis { min-height: 320px; }
.gx-t-menu img { position: absolute; top: 50%; left: 50%; width: 46%; aspect-ratio: 595 / 842; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.7);
  transition: rotate .6s cubic-bezier(.2,.8,.2,1), translate .6s cubic-bezier(.2,.8,.2,1); }
.gx-t-menu .t1 { translate: -88% -50%; rotate: -7deg; }
.gx-t-menu .t2 { translate: -12% -48%; rotate: 6deg; }
.gx-t-menu:hover .t1 { translate: -96% -52%; rotate: -11deg; }
.gx-t-menu:hover .t2 { translate: -4% -50%; rotate: 10deg; }
/* gestionali: KPI e righe */
.gx-t-gest .gx-tessera-vis { padding: 14px; display: grid; gap: 10px; align-content: start; }
.mini-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-kpi span { background: #fff; border-radius: 10px; padding: 8px 10px; }
.mini-kpi small { display: block; font-size: .7rem; color: var(--testo-tenue); }
.mini-kpi strong { font-size: 1.15rem; color: var(--viola); }
.mini-righe { display: grid; gap: 6px; }
.mini-righe i { height: 14px; border-radius: 5px; background: rgba(246,243,250,.14); }
.mini-righe i.nuova { background: rgba(255,122,89,.55); }
.gx-attiva .mini-righe i.nuova { animation: gx-riga 3.2s ease-in-out infinite; }
@keyframes gx-riga { 0%, 15% { transform: scaleY(0); opacity: 0; } 30%, 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: .4; } }
/* siti: schermata che scorre al passaggio del mouse */
.mini-browser { position: absolute; inset: 12px 12px 0; border-radius: 10px 10px 0 0; background: #fff; overflow: hidden; }
.mini-browser .pallini { display: flex; gap: 4px; padding: 7px 9px; background: #f1edf8; }
.mini-browser .pallini i { width: 7px; height: 7px; border-radius: 50%; background: #d8d0ea; }
.mini-browser img { display: block; width: 100%; transition: translate 7s ease-in-out; }
.gx-t-siti:hover .mini-browser img { translate: 0 calc(-100% + 120px); }
/* social: calendario che si riempie */
.mini-cal { position: absolute; inset: 16px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-content: center; }
.mini-cal i { aspect-ratio: 1; border-radius: 6px; background: rgba(246,243,250,.08); }
.mini-cal i.r { background: var(--viola); }
.mini-cal i.c { background: rgba(255,122,89,.75); }
.gx-attiva .mini-cal i.r, .gx-attiva .mini-cal i.c { animation: gx-cella .5s backwards cubic-bezier(.3,1.6,.5,1); }
.mini-cal i:nth-child(3) { animation-delay: .1s !important; } .mini-cal i:nth-child(5) { animation-delay: .2s !important; }
.mini-cal i:nth-child(8) { animation-delay: .3s !important; } .mini-cal i:nth-child(10) { animation-delay: .4s !important; } .mini-cal i:nth-child(12) { animation-delay: .5s !important; }
@keyframes gx-cella { from { transform: scale(0); } }
/* ads: ricerca e annuncio */
.gx-t-ads .gx-tessera-vis { padding: 16px; display: grid; gap: 10px; align-content: center; }
.mini-ricerca { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px; padding: 8px 12px; }
.mini-ricerca .lente { width: 10px; height: 10px; border: 2px solid var(--testo-tenue); border-radius: 50%; flex: none; }
.mini-ricerca i { height: 8px; width: 0; border-radius: 4px; background: var(--testo-tenue); }
.gx-attiva .mini-ricerca i { animation: gx-scrivi 3.6s steps(14) infinite; }
@keyframes gx-scrivi { 0% { width: 0; } 45%, 100% { width: 70%; } }
.mini-annuncio { background: rgba(246,243,250,.06); border: 1px solid var(--bordo-scuro); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.mini-annuncio small { font-size: .7rem; color: var(--testo-scuro-tenue); font-weight: 600; }
.mini-annuncio b { height: 10px; width: 80%; border-radius: 4px; background: var(--testo-scuro); }
.mini-annuncio i { height: 7px; border-radius: 4px; background: rgba(246,243,250,.18); }
.mini-annuncio i.corta { width: 60%; }
.gx-attiva .mini-annuncio { animation: gx-annuncio 3.6s ease infinite; }
@keyframes gx-annuncio { 0%, 45% { opacity: 0; transform: translateY(8px); } 55%, 100% { opacity: 1; transform: none; } }

/* ---------- Spot Hub, il prodotto per i locali ---------- */
.gx-spothub { position: relative; overflow: hidden; margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 64px);
  align-items: center; padding: clamp(28px, 4.5vw, 64px); border-radius: var(--raggio); background: var(--sfumato); color: var(--lavanda); }
.gx-spothub-fondo { padding-bottom: clamp(88px, 12vw, 168px); }
.gx-spothub-fondo .gx-spothub { margin-top: 0; }
.gx-etichetta { font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--corallo); }
.gx-spothub h3 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin: 10px 0 14px; color: var(--lavanda); }
.gx-spothub p { color: var(--testo-scuro); max-width: 52ch; font-size: 1.08rem; line-height: 1.55; }
.gx-spothub-lista { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; color: var(--testo-scuro); }
.gx-spothub-lista li { position: relative; padding-left: 22px; line-height: 1.4; }
.gx-spothub-lista li::before { content: ''; position: absolute; left: 0; top: .35em; width: 10px; height: 10px; border-radius: 3px 3px 3px 0; background: var(--corallo); }
.gx-spothub-lista b { color: var(--lavanda); font-weight: 600; }
.gx-spothub-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.gx-spothub .link-freccia { color: var(--lavanda); }
.gx-spothub-vis { position: relative; display: grid; place-items: center; min-height: 30em; font-size: clamp(11px, 1.05vw, 14px); }
.gx-spothub-adesivo { position: absolute; left: 0; bottom: 10%; width: 8.5em; height: 8.5em; border-radius: 1.5em; background: #fff; color: var(--notte); z-index: 2;
  display: grid; place-items: center; align-content: center; gap: .1em; text-align: center; box-shadow: 0 1.2em 2.4em -1em rgba(0,0,0,.55); rotate: -6deg; }
.gx-spothub-adesivo b { font-size: 1.5em; color: var(--viola); letter-spacing: .05em; }
.gx-spothub-adesivo small { font-size: .75em; color: var(--testo-tenue); line-height: 1.2; padding: 0 .8em; }
.gx-spothub-adesivo .onda { position: absolute; inset: -.6em; border-radius: 2em; border: 2px solid var(--corallo); opacity: 0; animation: gx-onda 2.4s infinite; }
.gx-spothub-adesivo .onda.o2 { animation-delay: 1.2s; }

@media (max-width: 900px) {
  .gx-con-grafica { grid-template-columns: 1fr; }
  .gx-regia { max-width: 440px; }
  .gx-vetrina-griglia { grid-template-columns: 1fr 1fr; }
  .gx-t-menu { grid-row: auto; grid-column: 1 / -1; }
  .gx-t-menu .gx-tessera-vis { min-height: 260px; }
  .gx-spothub { grid-template-columns: 1fr; }
  .gx-spothub-vis { min-height: 0; padding: 1em 0 1em 4em; }
}
@media (max-width: 600px) {
  .gx-vetrina-griglia { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .gx-spothub-lista { grid-template-columns: 1fr; }
  .gx-spothub-vis { padding-left: 3em; }
  .gx-spothub-adesivo { width: 7em; height: 7em; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-regia-centro .anello, .gx-spothub-adesivo .onda { animation: none; }
  .gx-attiva .mini-righe i.nuova, .gx-attiva .mini-cal i, .gx-attiva .mini-ricerca i, .gx-attiva .mini-annuncio { animation: none; }
  .mini-ricerca i { width: 70%; }
}

/* ---------- Chiusura "Parliamone": trama un po' più sfumata, così il simbolo risalta ---------- */
.sezione.chiusura .chiusura-trama { opacity: .02; }

/* ---------- Motion graphic Chi siamo: i quattro pezzi del simbolo ---------- */
.gx-pezzi { position: relative; width: 100%; aspect-ratio: 460 / 470; container-type: inline-size; font-family: var(--font); overflow-x: clip; }
.pz-sfondo { position: absolute; inset: 0; pointer-events: none; }
.pz-orbita { position: absolute; left: 50%; top: 43.4%; translate: -50% -50%; border-radius: 50%; border: 1px dashed rgba(246,243,250,.18); animation: gx-gira 40s linear infinite; }
.pz-orbita.o1 { width: 66cqw; height: 66cqw; }
.pz-orbita.o2 { width: 82cqw; height: 82cqw; border-style: solid; border-color: rgba(246,243,250,.07); animation-duration: 60s; animation-direction: reverse; }
.pz-orbita.o3 { width: 96cqw; height: 96cqw; border-color: rgba(246,243,250,.1); animation-duration: 90s; }
.pz-stella { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--lavanda); opacity: .2; animation: gx-brilla 3.2s ease-in-out infinite; }
@keyframes gx-brilla { 50% { opacity: .85; transform: scale(1.6); } }
.pz-onda { position: absolute; left: 50%; top: 43.4%; width: 64cqw; height: 64cqw; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--corallo); opacity: 0; pointer-events: none; }
.pz-svg { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; }
.pz-pezzo path { fill: var(--lavanda); }
.pz-pezzo.v path { fill: var(--corallo); }
.pz-pezzo text { font-size: 7.2px; font-weight: 600; letter-spacing: .16em; fill: var(--testo-scuro); }
.pz-pezzo.v text { fill: var(--corallo); }
.pz-payoff { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: 4.2cqw; font-weight: 300; color: var(--lavanda); }
.sfumato .pz-payoff { color: var(--lavanda); }
.pz-payoff span { display: inline-block; }
.pz-payoff .v { color: var(--corallo); font-weight: 600; }

/* ---------- Motion graphic Realizzazioni: dal progetto al lavoro finito ---------- */
.gx-cantiere { position: relative; width: 100%; aspect-ratio: 460 / 440; container-type: inline-size; font-family: var(--font); perspective: 1200px; }
.ct-griglia { position: absolute; inset: -4%; pointer-events: none;
  background-image: linear-gradient(rgba(246,243,250,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(246,243,250,.08) 1px, transparent 1px); background-size: 5.5cqw 5.5cqw;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.ct-fasi { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 5; display: flex; gap: 1cqw; margin: 0; padding: 1cqw; list-style: none;
  background: rgba(30,18,64,.55); border: 1px solid rgba(246,243,250,.14); border-radius: 99px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 2.9cqw; font-weight: 600; white-space: nowrap; }
.ct-fasi li { display: flex; align-items: center; gap: 1.2cqw; padding: .9cqw 2.6cqw; border-radius: 99px; color: var(--testo-scuro-tenue); transition: background .35s, color .35s; }
.ct-fasi li::before { content: ''; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: currentColor; opacity: .5; }
.ct-fasi li.fatto { color: var(--lavanda); }
.ct-fasi li.on { background: var(--lavanda); color: var(--notte); }
.ct-fasi li.on::before { background: var(--corallo); opacity: 1; }
.ct-palco { position: absolute; inset: 13% 0 0; transform-style: preserve-3d; }
.ct-schermo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.gx-cantiere:not(.gx-js) .ct-schermo + .ct-schermo { display: none; }
.ct-browser { width: 92%; background: #fff; border-radius: 2.4cqw; box-shadow: 0 4cqw 9cqw -3cqw rgba(0,0,0,.6); }
.ct-barra { display: flex; align-items: center; gap: 1cqw; padding: 1.5cqw 2cqw; background: #f1edf8; border-radius: 2.4cqw 2.4cqw 0 0; }
.ct-barra i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #d8d0ea; }
.ct-barra i:first-child { background: #ff8f73; } .ct-barra i:nth-child(2) { background: #ffc66e; } .ct-barra i:nth-child(3) { background: #7fd49a; }
.ct-barra span { flex: 1; margin-left: 1.6cqw; padding: .6cqw 2cqw; border-radius: 99px; background: #fff; font-size: 2.5cqw; color: #6b6189; }
.ct-area { position: relative; overflow: hidden; background: #faf8fd; }
.ct-browser .ct-area { aspect-ratio: 16 / 10.5; border-radius: 0 0 2.4cqw 2.4cqw; }
.ct-telefono { width: 36%; aspect-ratio: 9 / 19; padding: 1.6cqw; background: #120a2a; border-radius: 5cqw; box-shadow: 0 4cqw 9cqw -3cqw rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.12); }
.ct-telefono .ct-area { height: 100%; border-radius: 3.6cqw; background: #0e0d0c; }
.ct-vero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ct-telefono .ct-vero { object-fit: contain; object-position: center; padding: 6% 4%; }
.ct-scheletro { position: absolute; inset: 0; }
.sk { position: absolute; display: block; border: 1.5px dashed rgba(91,53,201,.5); border-radius: 1cqw; background: rgba(91,53,201,.06); transform-origin: 0 50%; }
.sk.nav { left: 4%; top: 5%; width: 92%; height: 7%; }
.sk.titolo { left: 6%; top: 22%; width: 44%; height: 7%; }
.sk.titolo.corto { top: 32%; width: 32%; }
.sk.testo { left: 6%; top: 44%; width: 40%; height: 10%; }
.sk.bottone { left: 6%; top: 59%; width: 18%; height: 7%; border-radius: 99px; border-color: rgba(255,122,89,.75); }
.sk.foto { left: 56%; top: 20%; width: 38%; height: 46%; }
.sk.scheda { top: 74%; width: 28%; height: 20%; }
.sk.s1 { left: 6%; } .sk.s2 { left: 36%; } .sk.s3 { left: 66%; }
.ct-telefono .sk { border-color: rgba(201,176,122,.6); background: rgba(201,176,122,.06); }
.sk.testa { left: 8%; top: 7%; width: 84%; height: 5%; }
.sk.pagina { left: 8%; top: 16%; width: 84%; height: 60%; }
.sk.riga { left: 30%; top: 80%; width: 40%; height: 3%; }
.sk.pulsante { left: 8%; top: 87%; width: 84%; height: 6%; border-radius: 99px; }
.ct-scansione { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--corallo); box-shadow: 0 0 12px 2px rgba(255,122,89,.7); opacity: 0; }
.ct-esito { position: absolute; right: -3%; bottom: -6%; display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 3cqw 1.4cqw 1.6cqw; border-radius: 99px;
  background: var(--notte); color: var(--lavanda); border: 1px solid rgba(246,243,250,.16); font-size: 3cqw; font-weight: 600; white-space: nowrap; box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.6); }
.ct-esito b { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; display: grid; place-items: center; background: var(--corallo); color: var(--notte); font-size: 2.6cqw; }
.ct-telefono .ct-esito { right: auto; left: 50%; translate: -50% 0; bottom: -5%; }

@media (max-width: 900px) {
  .gx-con-grafica .gx-pezzi, .gx-con-grafica .gx-cantiere { max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-orbita, .pz-stella { animation: none; }
}