/* ==================================================================
   HOME AGENTI — grafica (anteprima, seconda versione del 22/10/2026)

   IL MONDO VISIVO VIENE DAL VIDEO: il fondale d'argilla e il blu della
   casa scelta sono campionati dai fotogrammi.

   ALTERNANZA SCURO / CHIARO (richiesta del committente): due sezioni
   scure di fila non si staccano. Ogni sezione dichiara .scuro o .chiaro
   e i componenti leggono i colori dalle variabili, cosi' la stessa
   scheda sta bene su tutti e due i fondi.

   NOI SEMPRE IN EVIDENZA: in ogni confronto la colonna degli altri e'
   spenta (grigia, con la crocetta), la nostra e' accesa (bordo arancio,
   segno di spunta). Mai il rosso, mai un nome di concorrente.
   ================================================================== */
:root {
  --argilla: #c6c0bb;
  --argilla-chiara: #dcd6d0;
  --calce: #ece8e3;
  --carta: #f6f3ef;
  --inchiostro: #0f1b3d;
  --inchiostro-2: #3a4563;
  --blu: #1e3a8a;
  --blu-casa: #203058;
  --anello: #3870a8;
  --notte: #0a1020;
  --notte-2: #0d1528;
  --luce: #f2efe9;
  --arancio: #e7591f;
  --arancio-testo: #c2410c;
  --arancio-btn: #c2410c;
  --molla: cubic-bezier(.32, .72, 0, 1);
  --uscita: cubic-bezier(.22, 1, .36, 1);
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --sez: clamp(104px, 12vw, 180px);
  --bordo-pagina: max(calc((100vw - 1220px) / 2 + 44px), 18px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-optical-sizing: auto;
  color: var(--inchiostro); background: var(--calce);
  -webkit-font-smoothing: antialiased; letter-spacing: -.011em;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(231, 89, 31, .28); color: inherit; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- i due mondi: ogni componente legge da qui ---- */
.chiaro {
  --t: var(--inchiostro); --t2: var(--inchiostro-2); --muto: rgba(15, 27, 61, .42);
  --g-bg: rgba(15, 27, 61, .04); --g-bd: rgba(15, 27, 61, .07);
  --n-bg: var(--carta); --n-in: inset 0 1px 0 #fff; --n-om: 0 30px 60px -44px rgba(15, 27, 61, .45);
  --linea: rgba(15, 27, 61, .09); --eti-bg: rgba(15, 27, 61, .07); --eti-c: var(--blu);
  --acc: var(--arancio-testo); --evid: rgba(231, 89, 31, .24);
  background: var(--calce); color: var(--t);
}
.scuro {
  --t: var(--luce); --t2: rgba(242, 239, 233, .72); --muto: rgba(242, 239, 233, .42);
  --g-bg: rgba(255, 255, 255, .035); --g-bd: rgba(255, 255, 255, .08);
  --n-bg: linear-gradient(180deg, #141e3c, #0e1630); --n-in: inset 0 1px 0 rgba(255, 255, 255, .07); --n-om: 0 40px 70px -40px rgba(0, 0, 0, .7);
  --linea: rgba(255, 255, 255, .08); --eti-bg: rgba(255, 255, 255, .07); --eti-c: #c9d6ff;
  --acc: #ff8a57; --evid: rgba(231, 89, 31, .34);
  background: var(--notte); color: var(--t);
}
.scuro--blu { background: var(--inchiostro); }
.chiaro--carta { background: var(--carta); --n-bg: #fff; }
.chiaro--argilla { background: var(--argilla-chiara); }

/* grana fisica, ferma: mai sul contenuto che scorre */
.grana {
  position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- l'isola: la barra galleggia e porta sempre la richiesta ---- */
.isola {
  position: fixed; z-index: 70; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  padding: 7px 7px 7px 20px; border-radius: 999px;
  background: rgba(250, 248, 245, .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(15, 27, 61, .08), 0 18px 40px -22px rgba(15, 27, 61, .45);
  color: var(--inchiostro);
}
.isola > a:first-child { flex: none; }   /* sul telefono la barra stringe: senza questo il logo spariva */
.isola__logo { height: 30px; width: auto; max-width: none; }
.isola nav { display: flex; gap: 20px; font-size: .9rem; font-weight: 500; }
.isola nav a { text-decoration: none; opacity: .72; transition: opacity .3s var(--molla); }
.isola nav a:hover { opacity: 1; }

/* ---- il bottone con l'isola dentro ---- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 7px 7px 7px 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--arancio-btn); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 16px 34px -16px rgba(194, 65, 12, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .5s var(--molla), background .3s var(--molla), box-shadow .5s var(--molla);
}
.btn__ic { width: 40px; height: 40px; border-radius: 999px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, .16); transition: transform .55s var(--molla), background .3s var(--molla); }
.btn__ic svg { width: 16px; height: 16px; }
.btn:hover { background: #ad3a0a; box-shadow: 0 20px 40px -16px rgba(194, 65, 12, .85), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn:hover .btn__ic { transform: translate(3px, -2px) scale(1.07); background: rgba(255, 255, 255, .24); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--t, var(--inchiostro)); outline-offset: 4px; }
.btn--piccolo { padding: 5px 5px 5px 18px; font-size: .9rem; gap: 10px; }
.btn--piccolo .btn__ic { width: 32px; height: 32px; }

.vai { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 1rem; color: inherit; }
.vai__ic { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px currentColor; transition: transform .55s var(--molla); }
.vai__ic svg { width: 14px; height: 14px; }
.vai:hover .vai__ic { transform: translateX(4px); }

.etichetta {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  background: var(--eti-bg, rgba(15, 27, 61, .07)); color: var(--eti-c, var(--blu));
}
.etichetta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--arancio); }

/* L'EVIDENZIATORE del sito precedente: arancio, fascia dal 62% al 92%
   dell'altezza della riga, che si stende da sinistra all'entrata. */
.evid {
  color: var(--acc, var(--arancio-testo)); padding: 0 .06em;
  background: linear-gradient(180deg, transparent 62%, var(--evid, rgba(231, 89, 31, .24)) 62%, var(--evid, rgba(231, 89, 31, .24)) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  transition: background-size 1.3s var(--uscita) .25s;
}
.evid.in, .in .evid { background-size: 100% 100%; }

/* ---- impalcatura ---- */
.dentro { position: relative; max-width: 1220px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 44px); }
.sezione { position: relative; padding: var(--sez) 0; overflow: clip; }
/* Ogni sezione taglia cio' che esce dai lati: le schede che entrano da
   destra o da sinistra partono spostate di 140px e, senza taglio,
   allargavano la pagina sul telefono. CLIP, non hidden: hidden
   sgancerebbe i palchi fermi (sticky) delle sezioni legate allo scroll. */
main > section { overflow: clip; }
.titolo { margin: 22px 0 0; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; max-width: 18ch; text-wrap: balance; color: var(--t); }
.corpo { display: grid; gap: 18px; }
/* margine azzerato con :where() (peso zero): con «p.corpo» la regola pesava
   piu' di .rifiuto e degli altri margini voluti, e il paragrafo sotto il
   confronto della categoria finiva attaccato alle schede */
:where(.corpo p, p.corpo) { margin: 0; }
.corpo p, p.corpo { font-size: clamp(1.05rem, 1.25vw, 1.18rem); line-height: 1.62; max-width: 60ch; color: var(--t2); text-wrap: pretty; }
.corpo strong { color: var(--t); font-weight: 700; }

/* il doppio bordo: una lastra dentro un vassoio */
.guscio { padding: 6px; border-radius: 30px; background: var(--g-bg); box-shadow: 0 0 0 1px var(--g-bd); }
.nucleo { position: relative; height: 100%; border-radius: 24px; padding: clamp(24px, 2.6vw, 36px); background: var(--n-bg); box-shadow: var(--n-in), var(--n-om); color: var(--t); }

/* ---- I SEGNI DEL CONFRONTO: spenti per gli altri, accesi per noi ---- */
.segno { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; }
.segno svg { width: 13px; height: 13px; }
.segno--no { background: var(--g-bg); box-shadow: inset 0 0 0 1px var(--linea); color: var(--muto); }
.segno--si { background: var(--arancio); color: #fff; box-shadow: 0 6px 16px -6px rgba(231, 89, 31, .8); }
.elenco-segni { list-style: none; margin: 0; padding: 0; display: grid; }
.elenco-segni li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--linea); font-size: 1.04rem; line-height: 1.5; }
.elenco-segni li:first-child { border-top: 0; padding-top: 0; }
.spento .nucleo { background: transparent; box-shadow: none; }
.spento h3, .spento li { color: var(--muto); }
.spento li span:last-child { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-decoration-thickness: 1px; }
.acceso { background: rgba(231, 89, 31, .1) !important; box-shadow: 0 0 0 1.5px rgba(231, 89, 31, .55), 0 40px 80px -40px rgba(231, 89, 31, .45) !important; }
.acceso h3 { color: var(--acc); }
.acceso li { color: var(--t); font-weight: 500; }
.bollino { position: absolute; top: -12px; right: 22px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--arancio); box-shadow: 0 10px 22px -10px rgba(231, 89, 31, .9); z-index: 2; }

/* ==================================================================
   ENTRATE
   .rivela per il testo: dal basso, pesante.
   .carta per le schede: in 3D, da una direzione diversa ogni volta
   (sinistra, destra, sotto, sopra), assegnata dal JS. In piu' le
   schede si inclinano seguendo il mouse.
   ================================================================== */
.rivela { opacity: 0; transform: translateY(40px); filter: blur(10px); transition: opacity .9s var(--uscita), transform 1.15s var(--uscita), filter .9s var(--uscita); transition-delay: calc(var(--i, 0) * 80ms); }
.rivela.in { opacity: 1; transform: none; filter: none; }
.carta {
  --x: 0px; --y: 70px; --rx: 22deg; --ry: 0deg;
  opacity: 0; transform: perspective(1100px) translate3d(var(--x), var(--y), 0) rotateX(var(--rx)) rotateY(var(--ry));
  transition: opacity .9s var(--uscita), transform 1.3s var(--uscita); transition-delay: calc(var(--i, 0) * 110ms);
}
.carta[data-dir="sinistra"] { --x: -140px; --y: 0px; --rx: 0deg; --ry: 34deg; }
.carta[data-dir="destra"] { --x: 140px; --y: 0px; --rx: 0deg; --ry: -34deg; }
.carta[data-dir="sopra"] { --x: 0px; --y: -90px; --rx: -30deg; --ry: 0deg; }
.carta[data-dir="sotto"] { --x: 0px; --y: 110px; --rx: 30deg; --ry: 0deg; }
.carta.in { --x: 0px; --y: 0px; --rx: 0deg; --ry: 0deg; opacity: 1; }
.carta > .nucleo { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .6s var(--molla); }
.carta > .nucleo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--luce-on, 0); transition: opacity .4s var(--molla); background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .14), transparent 60%); }

/* ==================================================================
   1 · L'APERTURA SULLO SCROLL (A01)
   ================================================================== */
.scrub { position: relative; height: calc(var(--corsa, 2674px) + 100svh); background: var(--argilla); }
.scrub__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scrub__tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scrub__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(236, 232, 227, .93) 0%, rgba(236, 232, 227, .78) 27%, rgba(236, 232, 227, 0) 56%); }
.capitoli { position: absolute; left: max(5vw, 28px); bottom: 12svh; width: min(37rem, 41vw); height: 0; z-index: 4; }
.cap { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.cap--primo { opacity: 1; visibility: visible; }
.cap h1, .cap .dichiara { margin: 18px 0 0; font-weight: 700; letter-spacing: -.038em; line-height: 1.02; font-size: clamp(2.3rem, 4.4vw, 4.4rem); color: var(--inchiostro); text-wrap: balance; }
.cap .dichiara { font-size: clamp(2rem, 3.8vw, 3.7rem); margin-top: 0; }
.cap h1 .evid { opacity: var(--r2, .35); background-size: calc(var(--sott, 0) * 100%) 100%; transition: none; }
.cap p { margin: 16px 0 0; font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.45; font-weight: 500; color: #26324f; max-width: 34ch; }
.cap .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.cap .nota { font-size: .95rem; margin-top: 12px; color: var(--inchiostro-2); max-width: 44ch; }
.cap .motivi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cap--fine { bottom: -6svh; }
.cap--fine .dichiara { font-size: min(2.35vw, 4.3svh, 2.4rem); line-height: 1.08; letter-spacing: -.03em; }
.cap--fine p { margin-top: 12px; }
.cap--fine .azioni { margin-top: 20px; }

/* LE SCHEDE IN ORBITA: piu' grandi e piene, restano piu' a lungo */
.orbita { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.orbita__via { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.satellite {
  position: absolute; left: 0; top: 0; opacity: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 24px 8px 8px; border-radius: 999px; white-space: nowrap;
  background: #fbfaf8;
  box-shadow: 0 0 0 1px rgba(15, 27, 61, .1), 0 26px 50px -20px rgba(15, 27, 61, .6), inset 0 1px 0 #fff;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 700; letter-spacing: -.02em; color: var(--inchiostro);
  will-change: transform, opacity;
}
.satellite__ic { width: 50px; height: 50px; border-radius: 999px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #2a3e70, var(--blu-casa)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 4px rgba(231, 89, 31, .18); }
.satellite__ic svg { width: 24px; height: 24px; }

.binario { position: absolute; right: max(3vw, 22px); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; justify-items: center; z-index: 4; }
.binario i { width: 6px; height: 6px; border-radius: 99px; background: rgba(15, 27, 61, .25); transition: height .6s var(--molla), background .4s var(--molla); }
.binario i.fatto { background: rgba(15, 27, 61, .55); }
.binario i.on { height: 26px; background: var(--arancio); }
.binario b { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: rgba(15, 27, 61, .6); margin-top: 6px; font-variant-numeric: tabular-nums; }
.invito { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4; display: grid; justify-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(15, 27, 61, .7); transition: opacity .6s var(--molla); }
.invito i { width: 1px; height: 38px; background: rgba(15, 27, 61, .2); position: relative; overflow: hidden; }
.invito i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--inchiostro); animation: scendi 1.8s var(--molla) infinite; }
@keyframes scendi { to { top: 100%; } }

/* ==================================================================
   2 · A02, LE PAROLE DEGLI AGENTI: un mazzo di carte
   La sezione si ferma, le frasi arrivano una alla volta ognuna da una
   direzione diversa, quelle gia' lette arretrano in profondita'.
   ================================================================== */
/* clip e non hidden: l'alone largo 900px allargava la pagina sul telefono,
   e hidden avrebbe sganciato il palco fermo */
.voci { position: relative; overflow: clip; }
.voci::before { content: ""; position: absolute; width: 900px; height: 900px; left: -300px; top: -380px; pointer-events: none; background: radial-gradient(circle, rgba(30, 58, 138, .42), transparent 62%); }
.voci__corsa { position: relative; height: calc(100svh + 8 * 46svh); }
.voci__palco { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: clip; }
.voci__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; width: 100%; padding-top: 50px; }
/* tre righe e non cinque: la colonna e' larga ~480px, e a 3.6rem con il
   tetto di 18ch il titolo andava a capo ogni due parole (24/10/2026) */
.voci__testa .titolo { font-size: clamp(1.9rem, min(3vw, 5.4svh), 3rem); max-width: none; }
.voci__testa .intro { margin: 22px 0 0; max-width: 44ch; font-size: 1.06rem; line-height: 1.55; color: var(--t2); }
.voci__conta { display: flex; align-items: baseline; gap: 8px; margin-top: 30px; font-variant-numeric: tabular-nums; }
.voci__conta b { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; color: var(--arancio); line-height: 1; }
.voci__conta span { font-size: 1rem; font-weight: 600; color: var(--muto); }
.voci__barra { margin-top: 14px; height: 3px; width: min(260px, 60%); border-radius: 3px; background: var(--linea); overflow: hidden; }
.voci__barra i { display: block; height: 100%; background: var(--arancio); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.mazzo { position: relative; height: min(430px, 54svh); perspective: 1500px; transform-style: preserve-3d; }
.voce { position: absolute; inset: 0; margin: 0; padding: 7px; border-radius: 34px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 90px -50px rgba(0, 0, 0, .9); opacity: 0; will-change: transform, opacity; transform-origin: 50% 60%; }
.voce__lastra { height: 100%; border-radius: 28px; padding: clamp(28px, 3.4vw, 50px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: linear-gradient(165deg, #1a2547, #0f1631 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); overflow: hidden; position: relative; }
.voce__lastra::before { content: "\201C"; position: absolute; right: 26px; top: -30px; font-size: 15rem; line-height: 1; font-weight: 800; color: rgba(231, 89, 31, .12); pointer-events: none; }
.voce__n { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--arancio); }
.voce blockquote { margin: 0; font-size: clamp(1.5rem, min(2.7vw, 4.6svh), 2.6rem); line-height: 1.18; font-weight: 600; letter-spacing: -.03em; color: var(--luce); text-wrap: balance; position: relative; }
.voce figcaption { font-size: .85rem; font-weight: 500; color: rgba(242, 239, 233, .45); letter-spacing: .02em; }
.voce--ultima { background: rgba(231, 89, 31, .1); box-shadow: 0 0 0 1.5px rgba(231, 89, 31, .55), 0 60px 90px -40px rgba(231, 89, 31, .45); }
.voce--ultima .voce__lastra { background: linear-gradient(165deg, #2a1f2a, #151629 70%); }
.voci__chiusa { padding-top: clamp(40px, 6vw, 80px); padding-bottom: var(--sez); display: grid; gap: 20px; }
.voci__chiusa p { margin: 0; font-size: 1.15rem; line-height: 1.5; color: var(--t2); max-width: 46ch; }
.voci__chiusa .grande { font-size: clamp(2.6rem, 6.2vw, 5.8rem); line-height: .98; letter-spacing: -.045em; font-weight: 800; color: var(--luce); max-width: 16ch; text-wrap: balance; }
.voci__chiusa .grande span { color: var(--arancio); }

/* ==================================================================
   3 · A04, IL MECCANISMO (chiaro)
   ================================================================== */
.diviso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.diviso__fermo { position: sticky; top: 112px; }
.diviso__fermo .titolo { font-size: clamp(2rem, min(3.5vw, 6.2svh), 3.4rem); }
.diviso__scorre { display: grid; gap: clamp(40px, 5vw, 64px); }
.diagnosi { margin-top: 34px; }
.diagnosi .nucleo { display: grid; padding: 0; overflow: hidden; }
.diagnosi__riga { padding: 22px 26px; }
.diagnosi__riga + .diagnosi__riga { border-top: 1px solid var(--linea); }
.diagnosi__k { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muto); }
.diagnosi__riga p { margin: 8px 0 0; font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.38; font-weight: 500; color: var(--t2); }
.diagnosi__riga--causa { background: linear-gradient(90deg, rgba(231, 89, 31, .13), rgba(231, 89, 31, 0) 85%); }
.diagnosi__riga--causa .diagnosi__k { color: var(--acc); }
.diagnosi__riga--causa p { color: var(--t); font-weight: 700; }

/* IL FIUME: a monte chi ha un motivo, a valle la coda */
.fiume .nucleo { padding: clamp(26px, 3vw, 40px); }
.fiume__assi { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muto); }
.fiume__corso { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; padding-top: 34px; }
.fiume__corso::before, .fiume__corso::after { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 2px; border-radius: 2px; }
.fiume__corso::before { background: var(--linea); }
.fiume__corso::after { background: linear-gradient(90deg, var(--arancio), #ff9a6b); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.fiume__punto { position: absolute; top: 2px; left: calc(8px + (100% - 30px) * var(--p, 0)); width: 14px; height: 14px; border-radius: 50%; background: var(--arancio); box-shadow: 0 0 0 6px rgba(231, 89, 31, .18), 0 0 24px rgba(231, 89, 31, .7); z-index: 2; }
.tappa { position: relative; opacity: .38; transition: opacity .6s var(--molla); }
.tappa.on { opacity: 1; }
.tappa::before { content: ""; position: absolute; top: -32px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--n-bg); box-shadow: inset 0 0 0 2px var(--muto); }
.tappa.on::before { box-shadow: inset 0 0 0 2px var(--arancio); }
.tappa__chi { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--eti-bg); color: var(--eti-c); }
.tappa--noi .tappa__chi { background: var(--arancio); color: #fff; }
.tappa h3 { margin: 12px 0 0; font-size: 1.12rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }
.tappa p { margin: 6px 0 0; font-size: .95rem; line-height: 1.45; color: var(--t2); }
.coda { display: flex; gap: 5px; margin-top: 12px; }
.coda i { width: 22px; height: 22px; border-radius: 7px; background: var(--g-bg); box-shadow: inset 0 0 0 1px var(--muto); transform: scale(.4); opacity: 0; transition: transform .5s var(--molla), opacity .4s var(--molla); transition-delay: calc(var(--k) * 90ms); }
.tappa.on .coda i { transform: none; opacity: 1; }

/* le alternative SPENTE, e la nostra ACCESA in fondo */
.alternative { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alternativa .nucleo { padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-content: start; }
.alternativa .segno { grid-row: span 3; }
.alternativa h3 { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; color: var(--t2); }
.alternativa p { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--muto); }
.a-valle { justify-self: start; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muto); padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); }
.alternativa--noi { grid-column: 1 / -1; }
.alternativa--noi .nucleo { padding: 26px 28px; }
.alternativa--noi h3 { color: var(--acc); font-size: 1.25rem; }
.alternativa--noi p { color: var(--t); font-size: 1.12rem; font-weight: 500; }
.alternativa--noi .a-valle { color: #fff; background: var(--arancio); box-shadow: none; }
.sentenza { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.038em; font-weight: 700; color: var(--t); text-wrap: balance; }

/* ==================================================================
   4 · A05, IL FISSO (scuro): il conto, con noi accesi
   ================================================================== */
.conto { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(44px, 5vw, 70px); align-items: stretch; }
.conto .nucleo { display: grid; gap: 22px; align-content: start; }
.conto h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.025em; font-weight: 700; }
.mesi { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.mese { display: grid; gap: 7px; justify-items: center; }
.mese i { width: 100%; aspect-ratio: 1 / 1.25; border-radius: 7px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.mese i::after { content: ""; position: absolute; inset: 0; transform: translateY(101%); transition: transform .55s var(--molla); background: linear-gradient(180deg, #8d93a8, #5d6480); }
.acceso .mese i::after { background: linear-gradient(180deg, #ff9a6b, var(--arancio)); }
.mese.pagato i::after { transform: none; }
.mese b { font-size: 10px; font-weight: 600; color: var(--muto); letter-spacing: .05em; }
.onesta { margin-top: 18px; }
.onesta .nucleo { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.onesta__ic { width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; background: rgba(231, 89, 31, .14); color: var(--acc); }
.onesta__ic svg { width: 22px; height: 22px; }
.onesta p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--t2); max-width: 70ch; }
.onesta strong { color: var(--t); }

/* ==================================================================
   LE BANDE DELLA RICHIESTA
   ================================================================== */
.banda { padding: clamp(72px, 9vw, 130px) 0; }
.banda .guscio { border-radius: 40px; padding: 8px; }
.banda .nucleo { border-radius: 32px; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(28px, 4vw, 60px); padding: clamp(32px, 5vw, 68px); }
.banda h2 { margin: 18px 0 0; font-size: clamp(1.9rem, 3.7vw, 3.2rem); line-height: 1.04; letter-spacing: -.038em; font-weight: 700; text-wrap: balance; }
.banda p { margin: 16px 0 0; font-size: 1.1rem; line-height: 1.55; color: var(--t2); max-width: 42ch; }
.banda .azioni { display: grid; gap: 18px; justify-items: start; }
.chi-chiama { display: flex; align-items: center; gap: 14px; }
.chi-chiama img { width: 58px; height: 58px; border-radius: 999px; object-fit: cover; object-position: center 40%; box-shadow: 0 0 0 3px var(--carta), 0 0 0 4px rgba(15, 27, 61, .12); }
.chi-chiama span { font-size: .95rem; line-height: 1.35; color: var(--t2); }
.chi-chiama strong { display: block; color: var(--t); }

/* ==================================================================
   5 · A03, LA CATEGORIA (scuro)
   ================================================================== */
.categoria__testa { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(44px, 5vw, 72px); align-items: stretch; }
.confronto .nucleo { display: grid; gap: 18px; align-content: start; }
.confronto h3 { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.confronto li { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.32; letter-spacing: -.02em; }
.rifiuto { margin-top: clamp(36px, 4vw, 56px); }
/* LA FRASE CHE SI ACCENDE LETTERA PER LETTERA (o parola per parola) */
.parole { margin: clamp(70px, 9vw, 130px) 0 0; font-size: clamp(2.3rem, 5.6vw, 5.2rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; max-width: 20ch; text-wrap: balance; }
.parole .pz { color: color-mix(in srgb, var(--t) 16%, transparent); transition: color .3s var(--molla), text-shadow .5s var(--molla); }
.parole .pz.on { color: var(--t); }
.parole .pz.on.acc { color: var(--acc); }
.scuro .parole .pz.on.acc { text-shadow: 0 0 28px rgba(231, 89, 31, .45); }
.parole .parola { display: inline-block; white-space: nowrap; }

/* ==================================================================
   6 · A06, I MOTIVI (chiaro, argilla): il binario orizzontale
   ================================================================== */
.motivi-sez__testa { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.binario-h { position: relative; height: var(--binario-h, auto); }
.binario-h__palco { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.binario-h__testa { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-inline: var(--bordo-pagina); margin-bottom: clamp(18px, 3svh, 30px); }
.binario-h__testa h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -.03em; font-weight: 700; }
.binario-h__conta { font-size: .9rem; font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.binario-h__conta b { color: var(--acc); }
.pista { display: flex; gap: 16px; padding-inline: var(--bordo-pagina); will-change: transform; }
.motivo { flex: none; width: clamp(290px, 27vw, 380px); }
.motivo .nucleo { overflow: hidden; height: min(52svh, 420px); min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.motivo .nucleo > * { position: relative; }
.motivo__ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; color: var(--blu-casa); background: linear-gradient(160deg, #fff, #e9e4de); box-shadow: inset 0 0 0 1px rgba(15, 27, 61, .07), 0 14px 30px -18px rgba(15, 27, 61, .5); }
.motivo__ic svg { width: 46px; height: 46px; }
.motivo__ombra { position: absolute !important; right: -34px; bottom: -30px; width: 230px; height: 230px; color: var(--blu-casa); opacity: .055; pointer-events: none; }
.motivo__ombra svg { width: 100%; height: 100%; }
.motivo h3 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.motivo p { margin: 10px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--t2); }
.pista__avanzamento { margin: 28px var(--bordo-pagina) 0; height: 3px; border-radius: 3px; background: var(--linea); overflow: hidden; }
.pista__avanzamento i { display: block; height: 100%; background: var(--arancio); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* LE SCHEDE SI COSTRUISCONO CON LO SCROLL (24/10/2026). home.js scrive su
   ogni .motivo cinque avanzamenti da 0 a 1: --mg la cornice, --mi il
   riquadro dell'icona, --md il disegno dei tratti (icona e filigrana),
   --mt il titolo, --mp la descrizione. Senza JS, o con il movimento
   ridotto, valgono 1: la scheda e' gia' intera. */
.motivo { opacity: var(--mg, 1); transform: translate3d(0, calc((1 - var(--mg, 1)) * 46px), 0) scale(calc(.94 + .06 * var(--mg, 1))); transform-origin: 50% 100%; }
.motivo__ic { transform: scale(calc(.55 + .45 * var(--mi, 1))) rotate(calc((1 - var(--mi, 1)) * -14deg)); opacity: var(--mi, 1); }
.motivo .tratto { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--md, 1)); }
.motivo__ic [stroke-dasharray]:not(.tratto), .motivo__ombra [stroke-dasharray]:not(.tratto) { opacity: var(--md, 1); }
.motivo__ic [fill="#e7591f"], .motivo__ombra [fill="#e7591f"] { fill-opacity: var(--mf, 1); }
/* la scheda con la scena (js/scene-motivi.js) al posto dell'icona: la
   scena e' la costruzione, quindi niente riquadro e niente filigrana */
.motivo__scena { display: block; width: 100%; height: auto; max-height: 56%; margin: -6px 0 0; color: var(--blu-casa); overflow: visible; }
.motivo__scena text { font-family: var(--font); }
.motivo__ombra { opacity: calc(.055 * var(--mo, 1)) !important; }
.motivo h3 { opacity: var(--mt, 1); transform: translate3d(0, calc((1 - var(--mt, 1)) * 22px), 0); }
.motivo p { opacity: var(--mp, 1); transform: translate3d(0, calc((1 - var(--mp, 1)) * 14px), 0); }
.tre-righe { display: grid; gap: 6px; margin-top: clamp(20px, 3vw, 40px); }
.tre-righe p { margin: 0; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -.038em; font-weight: 700; color: var(--t); }
.tre-righe p:last-child { color: var(--acc); }

/* ==================================================================
   7 · A07, COME FUNZIONA (scuro)
   ================================================================== */
.come .diviso__fermo .corpo { margin-top: 26px; }
.passi { position: relative; display: grid; grid-auto-rows: 1fr; gap: 14px; padding-left: 44px; list-style: none; margin: 0; }
.passi::before, .passi::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; }
.passi::before { background: var(--linea); }
.passi::after { background: var(--arancio); transform-origin: 50% 0; transform: scaleY(var(--fill, 0)); box-shadow: 0 0 14px rgba(231, 89, 31, .6); }
.passo { position: relative; }
.passo::before { content: ""; position: absolute; left: -38px; top: 28px; width: 14px; height: 14px; border-radius: 50%; background: var(--notte); box-shadow: inset 0 0 0 2px var(--muto); transition: box-shadow .4s var(--molla), background .4s var(--molla); z-index: 1; }
.passo.on::before { background: var(--arancio); box-shadow: 0 0 0 5px rgba(231, 89, 31, .2); }
.passo .nucleo { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 24px 26px; }
.passo__n { font-size: .85rem; font-weight: 700; letter-spacing: .08em; color: var(--acc); font-variant-numeric: tabular-nums; padding-top: 3px; }
.passo p { margin: 0; font-size: 1.06rem; line-height: 1.52; color: var(--t2); }
.passo p strong { color: var(--t); }
.passo--link .nucleo { background: var(--arancio-btn); color: #fff; text-decoration: none; align-items: center; }
.passo--link .passo__n { color: #fff; opacity: .8; }

/* ==================================================================
   8 · IL TELEFONO (chiaro): la conversazione avanza con lo scroll
   ================================================================== */
.chat-sez__palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.chat-sez--fisso { height: 230svh; padding: 0; }
.chat-sez--fisso .chat-sez__ancora { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: 64px; }
.chat-sez--fisso .chat-sez__ancora > .dentro { width: 100%; }
.chat-sez .titolo { font-size: clamp(1.9rem, min(3.3vw, 5.6svh), 3.1rem); }
.punti { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.punti li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 1.02rem; line-height: 1.5; color: var(--t2); }
.punti li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--arancio); margin-top: .55em; }
.punti strong { color: var(--t); }
.modello { margin-top: 20px; font-size: .92rem; line-height: 1.5; color: var(--t2); padding: 14px 16px; border-radius: 16px; background: rgba(15, 27, 61, .04); }
.modello b { display: inline-block; margin-right: 8px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.didascalia { margin-top: 10px; font-size: .82rem; color: #6b7389; }
.telefono-binario { justify-self: center; }
.telefono { justify-self: center; position: relative; width: min(340px, 82vw); height: min(660px, 82svh); padding: 10px; border-radius: 52px; background: linear-gradient(160deg, #1c2236, #0b0f1b); box-shadow: 0 0 0 1px rgba(15, 27, 61, .2), 0 60px 90px -50px rgba(15, 27, 61, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
.telefono__schermo { position: relative; height: 100%; border-radius: 43px; overflow: hidden; display: flex; flex-direction: column; background: #efe7dd; }
.telefono__tacca { position: absolute; top: 9px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 99px; background: #0b0f1b; z-index: 3; }
.chat__testa { display: flex; align-items: center; gap: 10px; padding: 46px 14px 12px; background: #f7f3ee; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.chat__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; background: #8b93a7; }
.chat__chi { display: grid; line-height: 1.2; }
.chat__chi b { font-size: .95rem; }
.chat__chi span { font-size: .75rem; color: #6b7389; }
.chat__dal { margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--blu-casa); padding: 4px 9px; border-radius: 99px; }
.chat__corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; overflow: hidden; justify-content: flex-end; }
/* I pezzi non ancora arrivati NON occupano spazio: con la sola opacita'
   a zero spingevano in alto (e fuori dallo schermo) il primo messaggio. */
.bolla, .scrive { display: none; }
.bolla { max-width: 88%; padding: 8px 10px 5px; border-radius: 14px; font-size: .78rem; line-height: 1.4; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); color: #1b2333; }
.bolla.su { display: block; animation: arriva .5s var(--molla) both; }
.scrive.su { display: flex; animation: arriva .35s var(--molla) both; }
@keyframes arriva { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.bolla--esce { align-self: flex-end; background: #d9fdd3; border-bottom-right-radius: 4px; }
.bolla--entra { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.bolla__ora { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: .64rem; color: #6b7389; }
.spunte { width: 16px; height: 10px; color: #8b93a7; transition: color .4s var(--molla); }
.letto .spunte { color: #34b7f1; }
.scrive { align-self: flex-start; gap: 4px; padding: 11px 13px; border-radius: 14px; background: #fff; }
.scrive i { width: 6px; height: 6px; border-radius: 50%; background: #8b93a7; animation: puntini 1.2s infinite; }
.scrive i:nth-child(2) { animation-delay: .15s; } .scrive i:nth-child(3) { animation-delay: .3s; }
@keyframes puntini { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.avviso { position: absolute; top: 46px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: 0 18px 30px -16px rgba(15, 27, 61, .55); font-size: .82rem; font-weight: 600; color: #1b2333; opacity: 0; transform: translateY(-16px); transition: opacity .45s var(--molla), transform .55s var(--molla); }
.avviso.su { opacity: 1; transform: none; }
.avviso__ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #25d366; color: #fff; }
.avviso__ic svg { width: 15px; height: 15px; }
.chat__scrivi { display: flex; align-items: center; gap: 8px; padding: 10px 12px 16px; background: #f7f3ee; }
.chat__scrivi span { flex: 1; padding: 9px 14px; border-radius: 99px; background: #fff; font-size: .78rem; color: #8b93a7; }
.chat__scrivi i { width: 34px; height: 34px; border-radius: 50%; background: #128c7e; }

/* ==================================================================
   9 · LE RECENSIONI: una giostra in 3D (al posto dei riquadri a
   pagamento di Trustpilot) + i casi e i dati verificabili
   ================================================================== */
/* titolo e riquadro Trustpilot sulla STESSA riga. In flex il titolo
   chiedeva tutta la sua larghezza su una riga sola e il riquadro andava a
   capo sotto: con due colonne il titolo si piega e il riquadro gli sta accanto. */
.recensioni__testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px clamp(28px, 4vw, 64px); }
.recensioni__testa .tp-riepilogo { margin-bottom: 6px; }
/* ---- I COLORI E IL MARCHIO DI TRUSTPILOT ----
   Le recensioni devono essere riconoscibili come Trustpilot (richiesta del
   committente): quadratini verdi con la stella bianca, logo verde con la
   scritta, verde scuro per i collegamenti (#00704a: 5,9:1 sul bianco; il
   verde pieno sul bianco si fermerebbe a 2,6:1). */
:root { --tp-verde: #00b67a; --tp-verde-scuro: #00704a; --tp-nero: #191919; --tp-grigio: #dcdce6; --tp-font: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.tp-stelle { display: inline-flex; gap: 2px; }
.tp-stelle i { width: 22px; height: 22px; display: grid; place-items: center; background: var(--tp-grigio); }
.tp-stelle i svg { width: 80%; height: 80%; fill: #fff; }
.tp-stelle--grandi { gap: 3px; }
.tp-stelle--grandi i { width: 34px; height: 34px; }
.tp-logo { display: inline-flex; align-items: center; gap: .16em; font-family: var(--tp-font); font-weight: 700; font-size: 1.35rem; letter-spacing: -.04em; line-height: 1; color: var(--tp-nero); white-space: nowrap; }
.tp-logo svg { width: 1.18em; height: 1.18em; margin-top: -.14em; }
.tp-logo--piccolo { font-size: .95rem; }
.tp-riepilogo { display: grid; justify-items: center; gap: 9px; padding: 22px 32px 20px; border-radius: 22px; background: #fff; color: var(--tp-nero); text-decoration: none; text-align: center; box-shadow: 0 0 0 1px rgba(25, 25, 25, .08), 0 30px 60px -40px rgba(15, 27, 61, .5); transition: transform .5s var(--molla), box-shadow .5s var(--molla); }
.tp-riepilogo:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0, 182, 122, .45), 0 34px 60px -36px rgba(0, 112, 74, .45); }
.tp-giudizio { font-family: var(--tp-font); font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.tp-base { font-family: var(--tp-font); font-size: .9rem; color: #4d4d4d; }
.tp-base u { text-underline-offset: 3px; }
.recensione__testa-tp { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.giostra { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.giostra__pista { position: relative; height: 380px; perspective: 1600px; transform-style: preserve-3d; touch-action: pan-y; cursor: grab; }
.giostra__pista:active { cursor: grabbing; }
/* passaggio piu' corto della pausa: con un cambio ogni 2 s la scheda
   deve stare ferma almeno un secondo e mezzo */
.recensione { position: absolute; left: 50%; top: 0; width: min(440px, 84vw); height: 100%; margin-left: calc(min(440px, 84vw) / -2); transition: transform .55s var(--molla), opacity .45s var(--molla), filter .45s var(--molla); will-change: transform; }
.recensione .nucleo { display: flex; flex-direction: column; gap: 16px; background: #fff; }
.recensione__titolo { margin: -4px 0 0; font-size: 1.15rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: var(--t); }
/* pre-line: gli a capo della recensione restano dove li ha messi il cliente */
.recensione__testo { margin: -6px 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--t2); flex: 1; overflow: hidden; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.recensione__testo.vuoto { font-style: italic; color: var(--muto); border: 1.5px dashed var(--linea); border-radius: 14px; padding: 14px; display: block; }
.recensione__chi { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linea); }
.recensione__iniz { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--tp-font); font-weight: 700; color: var(--tp-nero); background: #e5e5ec; }
.recensione__chi b { display: block; font-size: 1rem; }
.recensione__chi small { font-size: .82rem; color: var(--t2); }
.recensione__chi a { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--tp-verde-scuro); text-underline-offset: 3px; }
.giostra__comandi { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 26px; }
.tondo { width: 52px; height: 52px; border-radius: 999px; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--n-bg); box-shadow: 0 0 0 1px var(--g-bd), 0 14px 30px -16px rgba(15, 27, 61, .5); transition: transform .4s var(--molla); }
.tondo:hover { transform: scale(1.06); }
.tondo svg { width: 18px; height: 18px; }
.puntini { display: flex; gap: 6px; }
.puntini i { width: 7px; height: 7px; border-radius: 99px; background: var(--linea); transition: width .5s var(--molla), background .3s var(--molla); }
.puntini i.on { width: 26px; background: var(--tp-verde); }
.recensioni__nota { margin: 22px auto 0; text-align: center; font-size: .9rem; color: var(--t2); max-width: 62ch; }
.raccogli { margin: 26px auto 0; max-width: 440px; text-align: center; font-size: .92rem; }
.raccogli a { font-weight: 600; color: var(--tp-verde-scuro); }
/* I CASI (24/10/2026): prima erano cinque frasi in una scheda, con il
   numero nascosto nel testo. Ora il risultato sta davanti, grande, e il
   contesto sotto; il caso piu' forte e' la scheda scura che occupa due
   righe. Sopra, i tre fatti verificabili in una striscia. */
.casi__intro { margin: 18px 0 0; max-width: 62ch; font-size: 1.1rem; line-height: 1.55; color: var(--t2); }
.fiducia { list-style: none; margin: clamp(34px, 4vw, 54px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.fiducia li { display: grid; align-content: start; gap: 6px; padding: 22px clamp(14px, 2.2vw, 30px); border-left: 1px solid var(--linea); }
.fiducia li:first-child { border-left: 0; padding-left: 0; }
.fiducia b { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--t); }
.fiducia span { font-size: .95rem; line-height: 1.45; color: var(--t2); }
.fiducia a { font-weight: 600; color: var(--tp-verde-scuro); text-underline-offset: 3px; }
/* il 180 in risalto: colonna piu' larga, numero grande e arancio che sale
   da 0 con lo scroll (home.js); «Oltre» piccolo sopra */
.fiducia { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); align-items: end; }
.fiducia__primo b { display: grid; gap: 2px; }
.fiducia__primo small { font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: var(--t2); }
.fiducia .fiducia__conta { display: block; font-size: clamp(3.6rem, 7vw, 6.2rem); font-weight: 800; letter-spacing: -.055em; line-height: .88; color: var(--arancio); font-variant-numeric: tabular-nums; }
.casi-griglia { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 48px); }
.esito .nucleo { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: clamp(22px, 2.4vw, 32px); }
.esito__n { margin: 0; font-size: clamp(1.1rem, 1.45vw, 1.3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--t); }
.esito__n b { display: block; margin-bottom: 8px; font-size: clamp(3rem, 4.6vw, 4.4rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--arancio); font-variant-numeric: tabular-nums; }
.esito__n small { font-size: .82em; font-weight: 600; color: var(--t2); }
.esito__c { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--t2); }
.esito__firma { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--tp-verde-scuro); text-decoration: none; }
.esito__firma i { flex: none; width: 18px; height: 18px; display: grid; place-items: center; background: var(--tp-verde); color: #fff; font-style: normal; font-size: 11px; line-height: 1; }
.esito__firma:hover { text-decoration: underline; text-underline-offset: 3px; }
.esito--grande { grid-row: span 2; }
.esito--grande .nucleo { justify-content: flex-end; background: linear-gradient(160deg, #22356a, #0f1631 75%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.esito--grande .esito__n { font-size: clamp(1.4rem, 2vw, 1.8rem); color: #f2efe9; }
.esito--grande .esito__n b { font-size: clamp(5rem, 8vw, 7.5rem); color: #ff8a57; }
.esito--grande .esito__c { font-size: 1.06rem; color: rgba(242, 239, 233, .74); max-width: 34ch; }
.esito__tag { align-self: flex-start; margin-bottom: auto; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff9a6b; background: rgba(231, 89, 31, .16); }
/* le grafiche delle schede (js/casi.js) */
.esito__grafica { display: block; width: 100%; height: auto; overflow: visible; }
.esito__puntini { margin: 6px 0 2px; }
.esito__puntini circle { fill: var(--t); opacity: .1; transform-box: fill-box; transform-origin: center; transition: opacity .25s, fill .3s, transform .45s cubic-bezier(.2, 1.7, .4, 1); }
.esito__puntini circle.on { opacity: .42; }
.esito__puntini circle.inc { fill: var(--arancio); opacity: 1; transform: scale(2); }
.esito__puntini circle.app { fill: none; stroke: var(--arancio); stroke-width: 1.3; opacity: 1; transform: scale(1.8); }
.esito__legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .74rem; font-weight: 600; color: var(--t2); }
.esito__legenda span { display: inline-flex; align-items: center; gap: 5px; }
.esito__legenda i { width: 7px; height: 7px; border-radius: 50%; background: var(--t); opacity: .42; }
.esito__legenda i.l-i { background: var(--arancio); opacity: 1; }
.esito__legenda i.l-a { background: none; box-shadow: inset 0 0 0 1.5px var(--arancio); opacity: 1; }
.esito__tempo { margin-top: 14px; }
.esito__tempo .t-linea { fill: none; stroke: rgba(242, 239, 233, .38); stroke-width: 2; stroke-linecap: round; }
.esito__tempo .t-vendita { fill: none; stroke: #ff8a57; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.esito__tempo .t-segno { fill: #ff8a57; stroke: #0f1631; stroke-width: 3; }
.esito__tempo text { font-family: var(--font); font-weight: 600; letter-spacing: .01em; }
.esito__tempo .t-segno-t { font-size: 10px; fill: #f2efe9; }
.esito__tempo .t-mese { font-size: 9px; fill: rgba(242, 239, 233, .55); letter-spacing: .14em; text-transform: uppercase; }
.esito__tempo .t-vend { font-size: 9.5px; fill: #ff9a6b; }
.esito__palazzina { width: 120px; margin: -4px 0 4px; fill: none; stroke: var(--blu-casa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.esito__palazzina .p-tetto { stroke: var(--arancio); stroke-width: 2.4; }
.esito__palazzina rect { fill: var(--blu-casa); stroke: none; }
.esito__case { max-width: 240px; margin: 4px 0 2px; }
.esito__case .c-casa { fill: rgba(32, 48, 88, .06); stroke: var(--blu-casa); stroke-width: 1.5; stroke-linejoin: round; }
.esito__case .c-luce { fill: var(--arancio); }
/* i numeri entrano con un colpo, piu' leggero dei timbri della garanzia */
.esito.in .esito__n b { animation: colpo .55s .3s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes colpo {
  0% { opacity: 0; transform: translateY(-14px) scale(1.7); filter: blur(6px); }
  45% { opacity: 1; transform: translateY(0) scale(.94); filter: blur(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  72% { transform: scale(1.03); }
  100% { opacity: 1; transform: none; filter: none; }
}
.esito__n b { transform-origin: 0 80%; }
.ridotto .esito.in .esito__n b { animation: none; }
.casi__riga { margin: 16px 0 0; padding: 18px 20px; border-radius: 16px; background: rgba(15, 27, 61, .05); font-size: 1rem; line-height: 1.5; font-weight: 600; }
@media (max-width: 860px) {
  .fiducia { grid-template-columns: 1fr; }
  .fiducia .fiducia__conta { font-size: 4.2rem; }
  .fiducia li { border-left: 0; border-top: 1px solid var(--linea); padding: 16px 0; }
  .fiducia li:first-child { border-top: 0; }
  .casi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .esito--grande { grid-row: auto; grid-column: 1 / -1; }
  .esito--grande .nucleo { min-height: 300px; }
  .esito .nucleo { padding: 18px; }
  .esito__n b { font-size: 2.8rem; }
}

/* ==================================================================
   10 · LA GARANZIA, legata allo scroll
   Il palco si ferma. Un anello in prospettiva si raddrizza mentre il
   contatore corre fino a 1.500; finito il pacchetto parte il secondo
   giro, arancio, e «Tu paghi» resta a 0 €. Poi i tre timbri, poi il
   sigillo che gira e la casa che si accende.
   ================================================================== */
.garanzia { background: radial-gradient(120% 80% at 50% 40%, #16234a 0%, var(--notte) 70%); }
.g-corsa { position: relative; height: calc(100svh + 360svh); }
.g-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 96px 0 34px; }
.g-cielo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 70%, transparent 84%); mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 70%, transparent 84%); }
.g-testa { position: relative; text-align: center; padding-inline: 20px; }
.g-titolo { margin: 16px auto 0; max-width: 22ch; font-size: clamp(1.8rem, min(3.4vw, 5.6svh), 3.2rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; color: var(--luce); text-wrap: balance; }
.g-scena { position: relative; display: grid; place-items: center; min-height: 0; }
.g-anello { --lato: min(46svh, 430px, 74vw); position: relative; width: var(--lato); height: var(--lato); transform: perspective(1000px) rotateX(var(--inc, 62deg)) scale(var(--sc, .82)); transform-style: preserve-3d; will-change: transform; }
.g-anello svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-binario { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; }
.g-giro1 { fill: none; stroke: url(#gGiro1); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(120, 160, 255, .55)); }
.g-giro2 { fill: none; stroke: url(#gGiro2); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 14px rgba(231, 89, 31, .8)); }
.g-binario2 { fill: none; stroke: rgba(231, 89, 31, .14); stroke-width: 10; opacity: var(--b2, 0); }
.g-tacca { stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.g-tacca-t { fill: rgba(242, 239, 233, .55); font-size: 13px; font-weight: 600; font-family: var(--font); text-anchor: middle; dominant-baseline: middle; }
.g-sigillo { fill: rgba(242, 239, 233, .8); font-size: 15px; font-weight: 700; letter-spacing: 4.2px; font-family: var(--font); opacity: var(--sig, 0); }
.g-sigillo-g { transform-origin: 200px 200px; transform: rotate(var(--rot, 0deg)); }
.g-centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; transform: rotateX(calc(var(--inc, 62deg) * -1)); }
.g-numero { display: grid; justify-items: center; gap: 4px; opacity: var(--num, 1); transition: opacity .4s var(--molla); }
.g-numero b { font-size: clamp(2.8rem, min(7vw, 9svh), 6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.g-numero span { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: rgba(242, 239, 233, .6); }
.g-casa { position: absolute; width: 36%; aspect-ratio: 1; display: grid; place-items: center; opacity: var(--casa, 0); transform: scale(calc(.6 + var(--casa, 0) * .4)); color: var(--arancio); filter: drop-shadow(0 0 26px rgba(231, 89, 31, .8)); }
.g-casa svg { width: 100%; height: 100%; }
.g-paghi { position: absolute; left: calc(50% + var(--lato-sc, 230px) + 30px); top: 50%; transform: translateY(-50%) translateX(calc((1 - var(--pa, 0)) * 40px)); opacity: var(--pa, 0); display: grid; gap: 4px; padding: 18px 22px; border-radius: 22px; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.g-paghi span { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: rgba(242, 239, 233, .6); }
.g-paghi b { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1; }
.g-paghi small { font-size: .82rem; color: rgba(242, 239, 233, .6); }
.g-didascalie { position: relative; height: 104px; padding-inline: 20px; }
.g-didascalie::before { content: ""; position: absolute; left: 50%; top: -40px; width: min(1000px, 110vw); height: 190px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(8, 13, 28, .92), rgba(8, 13, 28, 0)); }
.g-d { position: absolute; left: 50%; top: 0; width: min(820px, 92vw); margin: 0; transform: translateX(-50%); text-align: center; font-size: clamp(1.25rem, 2.3vw, 1.9rem); line-height: 1.4; font-weight: 700; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 18px rgba(8, 13, 28, .95); opacity: 0; }
/* bianco su arancio pieno: 5,2:1. L'arancio su fascia arancio non si leggeva */
.g-forte { color: #fff; background: var(--arancio-btn); padding: .02em .32em .06em; border-radius: .28em; text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 0 10px 26px -10px rgba(231, 89, 31, .8); }
.g-timbri { display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap; width: min(1000px, 96vw); }
/* I TIMBRI (24/10/2026): non crescono piano, sbattono. Ognuno cala dall'alto
   sfocato e grande, colpisce il foglio in un quarto di secondo con un
   piccolo rimbalzo, lascia un'onda d'inchiostro; home.js da' alla scena
   uno scossone a ogni colpo. Tornando indietro spariscono e basta. */
.g-timbro { --r: -4deg; position: relative; display: inline-block; padding: 8px 16px; border-radius: 12px; font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; color: #ff9a6b; box-shadow: inset 0 0 0 2.5px rgba(231, 89, 31, .85); background: rgba(231, 89, 31, .08); opacity: 0; transform: rotate(var(--r)); transition: opacity .15s linear; }
.g-timbro:nth-child(2) { --r: 3deg; }
.g-timbro:nth-child(3) { --r: -2deg; }
.g-timbro::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(231, 89, 31, .9); opacity: 0; pointer-events: none; }
.g-timbro.su { opacity: 1; animation: timbra .52s cubic-bezier(.5, 0, .75, 0) both; }
.g-timbro.su::after { animation: inchiostro .7s .22s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes timbra {
  0% { opacity: 0; transform: translateY(-38px) scale(2.7) rotate(calc(var(--r) * 3.5)); filter: blur(10px); }
  45% { opacity: 1; transform: translateY(0) scale(.9) rotate(var(--r)); filter: blur(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  70% { transform: scale(1.05) rotate(var(--r)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--r)); filter: none; }
}
@keyframes inchiostro { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45, 1.9); } }
.g-scena.scossa { animation: scossa .32s cubic-bezier(.3, .7, .4, 1); }
@keyframes scossa { 0% { transform: translate(0, 0); } 25% { transform: translate(-4px, 3px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-1px, 1px); } 100% { transform: translate(0, 0); } }
/* respiro fra la parte animata e le due schede: prima partivano attaccate */
.g-dopo { padding-top: clamp(56px, 7vw, 110px); padding-bottom: var(--sez); }
.g-dopo .patto { margin-top: 0; }
.patto { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.patto .nucleo { display: grid; gap: 18px; align-content: start; }
.patto h3 { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--eti-c); }
.patto p { margin: 0; font-size: 1.04rem; line-height: 1.6; color: var(--t2); }
/* la scheda della garanzia: la sola accesa, con il bordo arancio */
.patto--si { background: rgba(231, 89, 31, .1); box-shadow: 0 0 0 1.5px rgba(231, 89, 31, .55), 0 60px 90px -40px rgba(231, 89, 31, .45); }
.patto--si .nucleo { background: linear-gradient(165deg, #2a1f2a, #151629 70%); padding: clamp(26px, 3.2vw, 44px); }
.patto--si h3 { color: #ff9a6b; }
.patto__testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.patto__sigillo { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #ff8a57, var(--arancio)); box-shadow: 0 0 0 6px rgba(231, 89, 31, .16), 0 14px 30px -12px rgba(231, 89, 31, .8); }
.patto__sigillo svg { width: 26px; height: 26px; }
.patto .patto__gancio { font-size: 1rem; color: rgba(242, 239, 233, .62); }
.patto .promessa { font-size: clamp(1.55rem, 2.5vw, 2.25rem); line-height: 1.16; font-weight: 800; letter-spacing: -.03em; color: var(--luce); text-wrap: balance; }
.promessa__forte { color: #ff8a57; }
.patto__timbri { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.patto__timbri li { padding: 7px 13px; border-radius: 10px; font-size: .86rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #ff9a6b; background: rgba(231, 89, 31, .08); box-shadow: inset 0 0 0 2px rgba(231, 89, 31, .8); transform: rotate(-2deg); }
.patto__timbri li:nth-child(2) { transform: rotate(1.5deg); }
.patto__timbri li:nth-child(3) { transform: rotate(-1deg); }
.patto__verifica { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.patto__k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 233, .55); }
.patto__verifica p { color: var(--luce); font-weight: 500; }
.esiti { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.esiti > div { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; }
.esiti b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.esiti span { font-size: .92rem; line-height: 1.4; }
.esiti__si { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(242, 239, 233, .82); }
.esiti__si b { color: var(--luce); }
.esiti__no { background: rgba(231, 89, 31, .14); box-shadow: inset 0 0 0 1.5px rgba(231, 89, 31, .7); color: #ffd2bd; }
.esiti__no b { color: #ff8a57; }
.patto__spunte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.patto__spunte li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 1.02rem; line-height: 1.45; font-weight: 600; color: var(--luce); }
.patto__spunte li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: rgba(231, 89, 31, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a57' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* cosa non garantiamo: un'etichetta per riga, si legge in colonna */
.patto--non h3 { color: var(--acc); }
.limiti { margin: 0; display: grid; }
.limiti > div { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid var(--linea); }
.limiti > div:first-child { border-top: 0; padding-top: 0; }
.limiti dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); padding-top: .3em; }
.limiti dd { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--t); }
.patto__chiusa em { font-style: italic; color: var(--t2); }
@media (max-width: 860px) {
  .esiti { grid-template-columns: 1fr; }
  .limiti > div { grid-template-columns: 1fr; gap: 4px; }
}
.g-dopo .vai { margin-top: 30px; color: var(--luce); }

/* ==================================================================
   11 · A10, LE QUATTRO DOMANDE IN ORBITA (chiaro)
   La sezione si ferma; quattro pianeti girano attorno al nucleo e quello
   che arriva davanti apre la sua risposta. Sotto gli 860px e a
   movimento ridotto: niente orbita, le quattro risposte tutte aperte.
   ================================================================== */
.domande__corsa { position: relative; height: calc(100svh + 4 * 62svh); }
.domande__palco { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: 60px; }
.domande__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 80px); align-items: center; width: 100%; }
.sistema { position: relative; aspect-ratio: 1 / .82; width: 100%; max-width: 560px; justify-self: center; }
.sistema__orbite { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sistema__orbite ellipse { fill: none; stroke: rgba(15, 27, 61, .14); stroke-width: 1.2; stroke-dasharray: 3 6; }
.sistema__orbite ellipse:first-child { stroke: rgba(231, 89, 31, .35); stroke-dasharray: none; }
.sistema__nucleo { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; background: radial-gradient(circle at 35% 30%, #34508f, var(--blu-casa) 60%, #121d3d); box-shadow: 0 30px 60px -20px rgba(15, 27, 61, .7), inset 0 2px 0 rgba(255, 255, 255, .2), 0 0 0 10px rgba(32, 48, 88, .08), 0 0 0 22px rgba(32, 48, 88, .04); }
.sistema__nucleo b { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.sistema__nucleo span { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; opacity: .75; }
.pianeta { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap; background: #fff; color: var(--inchiostro); font-size: .92rem; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 0 0 1px rgba(15, 27, 61, .08), 0 18px 34px -18px rgba(15, 27, 61, .55); will-change: transform; transition: background .4s var(--molla), color .4s var(--molla), box-shadow .4s var(--molla); }
.pianeta__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--inchiostro); background: rgba(15, 27, 61, .07); font-variant-numeric: tabular-nums; }
.pianeta { gap: 0; padding: 6px; }
.pianeta__t { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .6s var(--molla), opacity .35s var(--molla), margin .6s var(--molla); }
.pianeta.on { padding-right: 18px; background: var(--arancio-btn); color: #fff; box-shadow: 0 0 0 6px rgba(231, 89, 31, .18), 0 24px 44px -16px rgba(194, 65, 12, .8); }
.pianeta.on .pianeta__t { max-width: 360px; opacity: 1; margin-left: 10px; }
.pianeta.on .pianeta__n { background: rgba(255, 255, 255, .2); color: #fff; }
.domande__lato .titolo { font-size: clamp(1.9rem, min(3.3vw, 5.6svh), 3.1rem); }
.risposte { position: relative; margin-top: 26px; height: var(--alt-risposte, auto); }
.risposta { position: absolute; left: 0; right: 0; top: 0; transition: opacity .55s var(--molla), transform .75s var(--molla); opacity: 0; transform: perspective(1000px) translate3d(0, 30px, 0) rotateX(-12deg); pointer-events: none; }
.risposta.on { opacity: 1; transform: none; pointer-events: auto; }
.risposta h3 { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -.028em; font-weight: 700; text-wrap: balance; }
.risposta p { margin: 14px 0 0; font-size: 1.02rem; line-height: 1.62; color: var(--t2); }
.risposta p strong { color: var(--t); }
.domande__conta { margin-top: 18px; font-size: .9rem; font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; }
.domande__conta b { color: var(--acc); }

/* ==================================================================
   12 · A11, LA RICHIESTA FINALE con i due soci
   ================================================================== */
.finale .guscio { border-radius: 40px; padding: 8px; }
.finale__carta { border-radius: 32px !important; padding: 0 !important; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); overflow: hidden; background: var(--carta); }
.soci { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--notte); min-height: 560px; }
.socio { position: relative; margin: 0; overflow: hidden; }
.socio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transition: transform 1.2s var(--uscita); }
.socio:hover img { transform: scale(1.04); }
.socio figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(10, 16, 32, .64); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--luce); font-size: .84rem; line-height: 1.35; }
.socio figcaption b { display: block; font-size: 1rem; margin-bottom: 2px; }
.finale__testo { padding: clamp(30px, 4.5vw, 64px); display: grid; gap: 18px; align-content: center; }
.finale__testo .etichetta { justify-self: start; }
.finale__testo h2 { margin: 6px 0 0; font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; text-wrap: balance; }
.finale__motto { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--acc); }
.finale__testo p { margin: 0; font-size: 1.06rem; line-height: 1.55; color: var(--t2); }
.tre { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: t; }
.tre li { display: grid; grid-template-columns: auto 1fr; gap: 14px; font-size: 1.04rem; line-height: 1.5; color: var(--t2); }
.tre li::before { counter-increment: t; content: counter(t); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 700; color: #fff; background: var(--blu-casa); }
.finale__testo .forte { font-weight: 700; color: var(--t); }
.finale__testo .azioni { margin-top: 6px; }
.ultima { margin: clamp(90px, 12vw, 170px) auto 0; max-width: 22ch; text-align: center; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.06; letter-spacing: -.042em; font-weight: 800; text-wrap: balance; }

/* ---- pie' di pagina ---- */
.piede { background: var(--notte); color: rgba(242, 239, 233, .72); padding: 80px 0 34px; font-size: .95rem; }
.piede__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 34px; }
.piede img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.piede h4 { margin: 0 0 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 233, .5); }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede a { text-decoration: none; }
.piede a:hover { color: var(--luce); }
.piede__fondo { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .82rem; color: rgba(242, 239, 233, .45); }
.piede__fondo a { text-decoration: underline; }

/* ==================================================================
   SCHERMI STRETTI E TELEFONO
   ================================================================== */
@media (max-width: 1080px) { .alternative { grid-template-columns: 1fr; } }
@media (max-width: 860px), (max-aspect-ratio: 9/10) {
  .isola { gap: 12px; padding-left: 14px; top: 10px; }
  .isola nav { display: none; }
  .isola__logo { height: 26px; }
  .isola .btn { white-space: nowrap; }
  .scrub__velo { background: linear-gradient(0deg, rgba(236, 232, 227, .95) 0%, rgba(236, 232, 227, .82) 32%, rgba(236, 232, 227, 0) 60%); transition: opacity .6s var(--molla); }
  .alla-fine .scrub__velo { opacity: 0; }
  .capitoli { left: 20px; right: 20px; width: auto; bottom: 6svh; }
  .cap h1 { font-size: clamp(2rem, 8.4vw, 2.7rem); }
  .cap .dichiara { font-size: clamp(1.8rem, 7.6vw, 2.5rem); }
  .cap p { font-size: 1.02rem; }
  .cap .nota { font-size: .9rem; }
  .cap--fine { bottom: auto; top: calc(78px - 94svh); }
  .cap--fine .dichiara { font-size: min(6.4vw, 3.5svh, 2.1rem); }
  .satellite { font-size: .98rem; padding: 6px 16px 6px 6px; gap: 10px; white-space: normal; max-width: calc(100vw - 28px); line-height: 1.2; }
  .satellite__ic { width: 38px; height: 38px; }
  .satellite__ic svg { width: 19px; height: 19px; }
  .binario, .invito { display: none; }
}
@media (max-width: 860px) {
  .btn { white-space: normal; line-height: 1.2; }
  .isola .btn { white-space: nowrap; }
  .alternative, .conto, .confronto, .patto, .prove__griglia, .diviso, .categoria__testa, .motivi-sez__testa, .chat-sez__palco, .piede__griglia, .finale__carta, .domande__griglia { grid-template-columns: 1fr; }
  .diviso__fermo { position: static; }
  .banda .nucleo { grid-template-columns: 1fr; }
  .recensioni__testa { grid-template-columns: 1fr; }
  .recensioni__testa .tp-riepilogo { justify-self: start; }
  /* voci: il mazzo resta, in colonna */
  .voci__griglia { grid-template-columns: 1fr; gap: 22px; padding-top: 60px; }
  .voci__testa .intro { display: none; }
  .voci__conta { margin-top: 14px; }
  .voci__conta b { font-size: 2rem; }
  .mazzo { height: min(360px, 46svh); }
  .fiume__corso { grid-template-columns: 1fr; gap: 26px; padding-top: 0; padding-left: 34px; }
  .fiume__corso::before, .fiume__corso::after { left: 8px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .fiume__corso::after { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  .fiume__punto { left: 2px; top: calc(2px + (100% - 30px) * var(--p, 0)); }
  .tappa::before { top: 4px; left: -32px; }
  .fiume__assi { display: none; }
  /* motivi: il binario orizzontale resta anche qui, schede a 4/5 dello schermo */
  .motivo { width: min(80vw, 330px); }
  .motivo .nucleo { height: min(50svh, 400px); min-height: 0; padding: 22px; }
  .motivo__ic { width: 60px; height: 60px; border-radius: 18px; }
  .motivo__ic svg { width: 36px; height: 36px; }
  .motivo h3 { font-size: 1.3rem; }
  .motivo p { font-size: 1rem; }
  .binario-h__testa h3 { font-size: 1.15rem; }
  .pista { gap: 12px; }
  /* conversazione: il testo scorre, poi il telefono finto resta FERMO al
     centro su un binario di 210svh mentre arrivano i messaggi */
  .chat-sez--fisso { height: auto; }
  .chat-sez--fisso .chat-sez__ancora { position: static; height: auto; padding: var(--sez) 0; }
  .telefono-binario { height: 210svh; margin-top: 26px; }
  .telefono { position: sticky; top: calc((100svh - min(600px, 76svh)) / 2 + 26px); height: min(600px, 76svh); }
  .giostra__pista { height: 400px; }
  .soci { min-height: 420px; }
  .mese b { font-size: 10px; }
  /* niente testo sotto i 12px sul telefono */
  .etichetta, .diagnosi__k, .tappa__chi, .a-valle, .bollino, .confronto h3, .patto h3, .modello b, .binario-h__conta, .g-paghi span, .chat__dal { font-size: 12px; }
  /* garanzia: il palco resta fermo ma si compone in colonna */
  .g-palco { padding-top: 78px; }
  .g-anello { --lato: min(62vw, 34svh); }
  .g-paghi { left: 50%; top: auto; bottom: 10px; transform: translate(-50%, calc((1 - var(--pa, 0)) * 20px)); padding: 10px 16px; grid-template-columns: auto auto; align-items: center; column-gap: 12px; }
  .g-paghi b { font-size: 1.8rem; }
  .g-paghi small { display: none; }
      .g-didascalie { height: 120px; }
  /* domande: l'orbita resta AGGANCIATA in alto e gira mentre le quattro
     risposte, tutte aperte, scorrono sotto. .domande__lato diventa
     «contents» cosi' titolo, orbita e risposte stanno nella stessa griglia
     e l'orbita puo' restare ferma per tutta la lunghezza delle risposte. */
  .domande__corsa { height: auto; }
  .domande__palco { position: static; height: auto; padding: var(--sez) 0; display: block; }
  .domande__griglia { gap: 0; }
  .domande__lato { display: contents; }
  .domande__lato > .etichetta { order: 1; justify-self: start; }
  .domande__lato > .titolo { order: 2; }
  /* justify-self STRETCH: col «center» del computer il riquadro, che ha
     dentro solo pezzi assoluti, si stringeva a 0px e i pianeti finivano
     tutti nello stesso punto, uno sopra l'altro */
  .sistema { --cima: 62px; order: 3; position: sticky; top: var(--cima); z-index: 5; align-self: start; justify-self: stretch; width: auto; max-width: none; aspect-ratio: auto; height: 180px; margin: 14px calc(-1 * clamp(18px, 4vw, 44px)) 0; background: var(--carta); }
  /* Agganciata in alto, la fascia allunga il suo fondo pieno fino al bordo
     dello schermo, DIETRO la barra: niente striscia di testo che scorre fra
     barra e orbita, un blocco solo (richiesta del committente). Solo da
     agganciata (.agganciato, dal JS): prima coprirebbe il titolo. */
  .sistema::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--cima); background: var(--carta); opacity: 0; pointer-events: none; transition: opacity .3s var(--molla); }
  .sistema.agganciato::before { opacity: 1; }
  /* sotto la fascia NIENTE riga ne' ombra (facevano «distacco»): una
     sfumatura morbida dal colore della fascia al trasparente, cosi' le
     risposte ci scivolano sotto. Anche questa solo da agganciata. */
  .sistema::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; background: linear-gradient(180deg, var(--carta), rgba(246, 243, 239, 0)); opacity: 0; pointer-events: none; transition: opacity .3s var(--molla); }
  .sistema.agganciato::after { opacity: 1; }
  .sistema__nucleo { width: auto; height: 34%; }
  .sistema__nucleo b { font-size: 1.8rem; }
  .sistema__nucleo span { font-size: 12px; letter-spacing: 0; text-transform: none; opacity: .85; }
  .domande__conta { display: none; }
  .risposte { order: 5; height: auto !important; display: grid; gap: 14px; margin-top: 6px; }
  .risposta { position: static; opacity: 1; transform: none; pointer-events: auto; scroll-margin-top: 270px; }
  .risposta.on > .nucleo { box-shadow: 0 0 0 1.5px rgba(231, 89, 31, .6), var(--n-om); }
}

/* ==================================================================
   MOVIMENTO RIDOTTO: tutto fermo e in fila. Nessun contenuto dipende
   da un movimento per essere raggiungibile.
   ================================================================== */
.ridotto .scrub { height: auto; }
.ridotto .scrub__palco { position: relative; height: auto; min-height: 100svh; }
.ridotto .capitoli { position: relative; left: auto; bottom: auto; width: auto; height: auto; padding: 120px max(5vw, 20px) 60px; display: grid; gap: 34px; max-width: 46rem; }
.ridotto .cap { position: relative; top: auto; bottom: auto; opacity: 1; visibility: visible; transform: none; filter: none; }
.ridotto .cap .motivi { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ridotto .cap .motivi span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .75); font-weight: 600; }
.ridotto .cap h1 .evid { opacity: 1; background-size: 100% 100%; }
.ridotto .scrub__velo { background: rgba(236, 232, 227, .86); }
.ridotto .binario, .ridotto .invito, .ridotto .orbita, .ridotto .sistema, .ridotto .domande__conta, .ridotto .g-cielo { display: none; }
.ridotto .rivela, .ridotto .carta { opacity: 1; transform: none; filter: none; transition: none; }
.ridotto .evid { background-size: 100% 100%; transition: none; }
.ridotto .invito i::after, .ridotto .scrive i { animation: none; }
.ridotto .voci__corsa { height: auto; }
.ridotto .voci__palco { position: static; height: auto; padding: var(--sez) 0 0; }
.ridotto .mazzo { height: auto; display: grid; gap: 14px; }
.ridotto .voce { position: relative; inset: auto; opacity: 1; transform: none !important; }
.ridotto .binario-h { height: auto !important; }
.ridotto .binario-h__palco { position: static; height: auto; }
.ridotto .pista { flex-wrap: wrap; transform: none !important; }
.ridotto .chat-sez--fisso { height: auto; }
.ridotto .chat-sez--fisso .chat-sez__ancora { position: static; height: auto; padding: var(--sez) 0; }
.ridotto .g-corsa { height: auto; }
.ridotto .g-palco { position: static; height: auto; display: block; padding: var(--sez) 0 40px; }
.ridotto .g-scena { display: none; }
.ridotto .g-didascalie { height: auto; display: grid; gap: 14px; }
.ridotto .g-d { position: static; transform: none; opacity: 1; margin: 0 auto; }
.ridotto .g-timbro { opacity: 1; transform: none; filter: none; animation: none !important; }
.ridotto .g-timbro::after { display: none; }
.ridotto .domande__corsa { height: auto; }
.ridotto .domande__palco { position: static; height: auto; padding: var(--sez) 0; }
.ridotto .risposte { height: auto !important; display: grid; gap: 14px; }
.ridotto .risposta { position: static; opacity: 1; transform: none; }

/* ==================================================================
   IL MENU (23/10/2026)
   Sopra gli 860px le pagine stanno nella barra. Sotto, nella barra
   restano logo, richiesta e il bottone del menu: due linee che ruotando
   diventano una X. Il menu e' un pannello a tutto schermo in vetro scuro;
   le voci salgono una alla volta da dietro una maschera.
   L'isola (z 70) resta SOPRA il pannello (z 66): la X per chiudere e'
   lo stesso bottone che l'ha aperto, nello stesso punto.
   ================================================================== */
.menu-btn { display: none; position: relative; width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; cursor: pointer; background: var(--inchiostro); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); transition: background .4s var(--molla), transform .4s var(--molla); }
.menu-btn:active { transform: scale(.94); }
.menu-btn:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #fff; transition: transform .55s var(--molla), top .55s var(--molla); }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 25px; }
.menu-aperto .menu-btn { background: var(--arancio-btn); }
.menu-aperto .menu-btn span:first-child { top: 21px; transform: rotate(45deg); }
.menu-aperto .menu-btn span:last-child { top: 21px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 66; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; padding: 92px 22px calc(26px + env(safe-area-inset-bottom)); overflow-y: auto; color: var(--luce);
  background: radial-gradient(120% 70% at 80% 0%, rgba(30, 58, 138, .55), transparent 60%), rgba(8, 13, 28, .9);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  opacity: 0; transition: opacity .45s var(--molla); }
.menu.aperto { opacity: 1; }
.menu[hidden] { display: none; }
.menu__voci { display: grid; }
.menu__voce { display: block; overflow: hidden; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.menu__riga { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; transform: translateY(110%); transition: transform .75s var(--molla); transition-delay: calc(var(--k, 0) * 55ms); }
.menu.aperto .menu__riga { transform: none; }
.menu__n { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--arancio); font-variant-numeric: tabular-nums; }
.menu__t { font-size: clamp(1.75rem, 8.4vw, 2.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--luce); }
.menu__qui { margin-left: auto; align-self: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: rgba(242, 239, 233, .6); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); white-space: nowrap; }
.menu__voce[aria-current="page"] .menu__t { color: #ff9a6b; }
.menu__voce--proprietari .menu__t { font-size: clamp(1.25rem, 5.6vw, 1.7rem); color: rgba(242, 239, 233, .8); }
.menu__fondo { display: grid; gap: 16px; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--molla) .35s, transform .7s var(--molla) .35s; }
.menu.aperto .menu__fondo { opacity: 1; transform: none; }
.menu__fondo .btn { justify-content: space-between; white-space: normal; }
.menu__tel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu__tel a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; text-decoration: none; font-size: .95rem; color: rgba(242, 239, 233, .75); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.menu__tel b { color: var(--luce); font-size: 1rem; }

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .isola { gap: 8px; padding: 6px 6px 6px 14px; max-width: calc(100vw - 16px); }
  .isola .btn--piccolo { padding-left: 14px; }
}
@media (max-width: 340px) { .isola__resto { display: none; } }
@media (min-width: 861px) { .menu { display: none !important; } }
/* telefoni bassi: il menu deve stare tutto in vista, senza scorrere */
@media (max-width: 860px) and (max-height: 720px) {
  .menu { padding-top: 78px; gap: 16px; }
  .menu__riga { padding: 8px 0; }
  .menu__t { font-size: clamp(1.45rem, 7vw, 2.1rem); }
  .menu__voce--proprietari .menu__t { font-size: 1.2rem; }
  .menu__fondo { gap: 10px; }
  .menu__tel a { padding: 9px 12px; }
}

/* ==================================================================
   IL BOLLINO «ReaLink» CHE SI FIONDA SU «NOI» (23/10/2026)
   Arriva dall'alto a sinistra, grande, ruotato e sfocato, come se fosse
   lanciato dalla colonna degli altri; atterra schiacciandosi, rimbalza,
   si assesta. All'impatto un'onda arancio e la scheda che sobbalza.
   Parte una volta sola, quando la scheda «Noi» e' entrata (JS: .atterra).
   ================================================================== */
.bollino--atterra { --da-x: -520px; --da-y: -240px; font-size: 13px; padding: 8px 16px; opacity: 0; }
.atterra .bollino--atterra { animation: fionda 1s cubic-bezier(.2, .9, .25, 1.2) both; }
.atterra .bollino--atterra::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 2px var(--arancio); opacity: 0; animation: onda .8s .56s cubic-bezier(.2, .7, .3, 1) both; pointer-events: none; }
/* senza «both»: finito il sobbalzo la scheda torna a inclinarsi col mouse */
.atterra > .nucleo { animation: urto .5s .55s cubic-bezier(.3, .7, .4, 1); }
@keyframes fionda {
  0% { opacity: 0; transform: translate(var(--da-x), var(--da-y)) rotate(-38deg) scale(2.6); filter: blur(8px); }
  14% { opacity: 1; }
  56% { transform: translate(0, 0) rotate(8deg) scale(.8, .7); filter: blur(0); }
  70% { transform: translate(0, -8px) rotate(-5deg) scale(1.18); }
  85% { transform: translate(0, 0) rotate(2deg) scale(.96); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes onda { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6, 3.4); } }
@keyframes urto { 0%, 100% { transform: perspective(900px) translateY(0); } 30% { transform: perspective(900px) translateY(7px) rotateZ(.4deg); } 60% { transform: perspective(900px) translateY(-3px) rotateZ(-.2deg); } }
@media (max-width: 860px) { .bollino--atterra { --da-x: -62vw; --da-y: -200px; } }

/* ==================================================================
   DOMANDE SUL TELEFONO: i pianeti mostrano SOLO il numero.
   La domanda per esteso sul pianeta acceso attraversava il nucleo e gli
   altri pianeti (difetto visto dal committente); la domanda c'e' gia'
   per intero come titolo della risposta qui sotto.
   ================================================================== */
@media (max-width: 860px) {
  /* la pillola arancio con la domanda intera sul pianeta acceso (com'era
     prima), ma l'orbita e' calcolata perche' stia SOTTO il nucleo e sotto
     i pianeti laterali: niente piu' sovrapposizioni */
  .pianeta { font-size: .86rem; }
  .pianeta.on .pianeta__t { max-width: 0; opacity: 0; margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pianeta.on.aperto { padding-right: 16px; }
  .pianeta.on.aperto .pianeta__t { max-width: calc(100vw - 96px); opacity: 1; margin-left: 9px; }
  .pianeta__n { width: 34px; height: 34px; font-size: .82rem; }
}

.ridotto .bollino--atterra { opacity: 1; animation: none; }
.ridotto .atterra > .nucleo { animation: none; }
.ridotto .menu, .ridotto .menu__riga, .ridotto .menu__fondo { transition: none; }

/* ---- logo Trustpilot ufficiale (file del committente) ---- */
.tp-logo-img { height: 30px; width: auto; }
.tp-logo-img--piccolo { height: 21px; }
.tp-simbolo { display: inline-block; width: 22px; height: 22px; border-radius: 5px; vertical-align: -5px; margin-right: 8px; }

/* ---- le 18 citta' principali nel pie' di pagina (come nel sito pubblicato) ---- */
.piede__citta { margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 14px; }
.piede__citta > span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: rgba(242, 239, 233, .5); }
.piede__citta > div { display: flex; flex-wrap: wrap; gap: 8px; }
.piede__citta a { padding: 6px 12px; border-radius: 999px; font-size: .88rem; text-decoration: none; color: rgba(242, 239, 233, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: color .3s var(--molla), box-shadow .3s var(--molla); }
.piede__citta a:hover { color: var(--luce); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.piede__citta .piede__tutte { color: #ff9a6b; box-shadow: inset 0 0 0 1px rgba(231, 89, 31, .45); }