/* ════ STILE VETRO (prova 30/10): carta a quadretti, luci che si muovono, vetro ovunque ════ */

/* sezioni: luci sfocate dietro al vetro (niente quadretti, decisione di Andrea 2/11/2026) */
.sez, .apertura, .palco { isolation: isolate; }
.luci { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.luci::before { content: none; }
.luci i { position: absolute; width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; border-radius: 50%; filter: blur(50px); opacity: .5; animation: vaga 20s ease-in-out infinite alternate; }
.luci i:nth-child(1) { background: radial-gradient(circle, rgba(223,255,0,.5), transparent 65%); left: 4%; top: 22%; }
.luci i:nth-child(2) { background: radial-gradient(circle, rgba(241,240,233,.22), transparent 65%); right: 4%; top: 4%; animation-duration: 25s; animation-delay: -7s; }
.luci i:nth-child(3) { background: radial-gradient(circle, rgba(223,255,0,.3), transparent 65%); left: 46%; bottom: -10%; animation-duration: 29s; animation-delay: -13s; }
@keyframes vaga { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,-4vh) scale(1.15); } 100% { transform: translate(-4vw,5vh) scale(.92); } }

.sez--carta .luci i:nth-child(1), .palco .luci i:nth-child(1) { background: radial-gradient(circle, rgba(223,255,0,.8), transparent 65%); opacity: .6; }
.sez--carta .luci i:nth-child(2), .palco .luci i:nth-child(2) { background: radial-gradient(circle, rgba(166,166,159,.5), transparent 65%); }
.sez--carta .luci i:nth-child(3), .palco .luci i:nth-child(3) { background: radial-gradient(circle, rgba(223,255,0,.5), transparent 65%); }
.palco .luci { position: absolute; }
.palco__scena { isolation: isolate; }

/* etichetta di sezione: una pillola di vetro con la parola in giallo */
.kicker:not([data-particelle]) { padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid rgba(241,240,233,.14); background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--paper); }
.kicker:not([data-particelle])::before { width: 22px; height: 22px; content: ""; border-radius: 999px; box-sizing: border-box; border: 7px solid var(--signal); background: var(--signal); color: var(--ink); box-shadow: 0 0 18px rgba(223,255,0,.5); }
.sez--carta .kicker:not([data-particelle]) { border-color: rgba(11,11,11,.12); background: rgba(255,255,255,.6); color: var(--ink); }

/* testata: vetro chiaro sulle sezioni chiare, scuro su quelle scure + barra gialla di avanzamento */
.testa.su { background: linear-gradient(180deg, rgba(20,20,20,.7), rgba(20,20,20,.5)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
.testa.chiara { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(241,240,233,.55)) !important; border-bottom-color: rgba(11,11,11,.08) !important; }
.testa.chiara .logo img { filter: invert(1) hue-rotate(180deg) brightness(.2) contrast(1.4); }
.testa.chiara .menu a, .testa.chiara .lingue a:not([aria-current]) { color: rgba(11,11,11,.7); }
.testa.chiara .apri-menu { color: var(--ink); border-color: rgba(11,11,11,.14); background: rgba(255,255,255,.6); }
.avanza { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; transform-origin: left; transform: scaleX(var(--k, 0)); background: linear-gradient(90deg, rgba(223,255,0,.4), var(--signal)); box-shadow: 0 0 12px rgba(223,255,0,.7); pointer-events: none; }

/* card: vetro vero, con riflesso e una luce che segue il mouse */
.card { background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.025) 55%, rgba(255,255,255,.05)); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04), 0 30px 60px -34px rgba(0,0,0,.9); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 30%) var(--my, -10%), rgba(223,255,0,.16), transparent 60%); opacity: .9; transition: opacity .4s; z-index: 0; }
.card > * { position: relative; z-index: 1; }
.sez--carta .card:not(.card--gialla), .palco .card:not(.card--gialla) { background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.42)); border-color: rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 30px 60px -30px rgba(11,11,11,.3); }
.sez--carta .card::before { background: radial-gradient(300px circle at var(--mx, 30%) var(--my, -10%), rgba(223,255,0,.32), transparent 60%); }
.card--gialla { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 30px 70px -24px rgba(223,255,0,.65) !important; }
.card--gialla::before { background: radial-gradient(300px circle at var(--mx, 30%) var(--my, -10%), rgba(255,255,255,.45), transparent 60%); }

/* pulsanti: vetro e luce */
.btn--giallo { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px -14px rgba(223,255,0,.75); }
.btn--vetro { background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); border-color: rgba(255,255,255,.18); }
.etichette li { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* WhatsApp in basso: pillola di vetro scuro con luccichio (come la versione che ti piaceva) */
.barra-mobile { background: transparent !important; border: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; gap: 10px; }
.barra-mobile .btn--wa { position: relative; overflow: hidden; flex: 1 1 auto !important; justify-content: flex-start; gap: 12px; min-height: 60px !important; padding: 7px 22px 7px 7px !important; border-radius: 999px; color: var(--paper); font-size: 16px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%), rgba(14,14,14,.5); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 20px 50px -14px rgba(0,0,0,.65), 0 12px 40px -8px rgba(223,255,0,.5); }
.barra-mobile .btn--wa svg { width: 46px !important; height: 46px !important; padding: 11px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 6px 18px -6px rgba(37,211,102,.9); }
.barra-mobile .btn--wa span { font-size: 16px; }
.barra-mobile .btn--wa::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg); animation: luccica 5s ease-in-out infinite; pointer-events: none; }
@keyframes luccica { 0%, 60% { left: -60%; } 100% { left: 140%; } }
.barra-mobile .btn--giallo { flex: 0 0 auto !important; min-height: 60px !important; padding: 0 20px; border-radius: 999px; }

/* sul computer il pulsante WhatsApp in basso a destra diventa la stessa pillola di vetro */
.wa-tondo { background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%), rgba(14,14,14,.55); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); padding: 6px 20px 6px 6px; height: 58px; color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 20px 50px -14px rgba(0,0,0,.65), 0 12px 40px -8px rgba(223,255,0,.45); }
.wa-tondo svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #25d366; color: #fff; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) { .luci i, .barra-mobile .btn--wa::before { animation: none !important; } }
@media (max-width: 640px) { .luci i { width: 80vw; height: 80vw; filter: blur(40px); } }

/* ════ HERO: il viaggio di un contatto, impaginato come una rivista ════ */
.viaggio { padding: clamp(24px, 2.6vw, 38px) !important; border-radius: 30px !important; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 55%, rgba(223,255,0,.05)) !important; border: 1px solid rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 40px 80px -40px rgba(0,0,0,.9) !important; }
.viaggio__testa { display: flex; justify-content: space-between; align-items: center; font: 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid rgba(241,240,233,.14); }
.viaggio__live { display: inline-flex; align-items: center; gap: 8px; color: var(--signal); }
.viaggio__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: polso 2s infinite; }
.viaggio ol { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: block; --i: 0; }
.viaggio ol::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: rgba(241,240,233,.14); }
.viaggio li { display: grid !important; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(241,240,233,.08) !important; border-radius: 0 !important; background: none !important; font-weight: 400 !important; }
.viaggio li:last-of-type { border-bottom: 0 !important; }
.viaggio__n { font: 11px var(--mono); letter-spacing: .1em; color: rgba(241,240,233,.35); transition: color .4s; }
.viaggio li b { white-space: nowrap; font-size: clamp(26px, 2.5vw, 38px); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(241,240,233,.35); transition: color .5s var(--ease), -webkit-text-stroke-color .5s, transform .6s var(--ease); transform-origin: left center; }
.viaggio em { font-style: normal; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .45; transition: opacity .4s, color .4s; text-align: right; max-width: 17ch; justify-self: end; line-height: 1.35; }
.viaggio li.acceso b { color: var(--paper); -webkit-text-stroke-color: transparent; transform: translateX(6px); }
.viaggio li.acceso .viaggio__n, .viaggio li.acceso em { color: var(--signal); opacity: 1; }
.viaggio li.passato b { color: rgba(241,240,233,.55); -webkit-text-stroke-color: transparent; }
.viaggio__punto { position: absolute; left: -2px; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(223,255,0,.15), 0 0 22px 4px rgba(223,255,0,.7); transform: translateY(calc(var(--y, 20px) - 5px)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.viaggio__piede { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(241,240,233,.14); font-size: 15px; color: var(--muted); }
.viaggio__piede b { color: var(--signal); font-weight: 700; }
@media (max-width: 640px) { .viaggio li b { font-size: 26px; } .viaggio__testa { font-size: 10px; letter-spacing: .14em; } .viaggio em { font-size: 10px; letter-spacing: .08em; } .viaggio li { grid-template-columns: 28px 1fr auto; } }

/* niente quadretti da nessuna parte: restano solo le luci */
.luci::before { display: none !important; }

/* ════ AI SYSTEMS: la costellazione degli agenti ════ */
.costellazione { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.costellazione__svg { width: 100%; height: auto; display: block; overflow: visible; }
.costellazione__alone { opacity: .35; animation: respira 6s ease-in-out infinite; transform-origin: 320px 320px; }
@keyframes respira { 50% { opacity: .6; transform: scale(1.06); } }
.costellazione__orbita { fill: none; stroke: rgba(241,240,233,.1); stroke-width: 1; }
.raggio { fill: none; stroke: rgba(241,240,233,.12); stroke-width: 1.2; }
.raggio__luce { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 6px rgba(223,255,0,.9)); }
.nodo__vetro { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.2); stroke-width: 1; transition: fill .5s, stroke .5s; }
.nodo__alone { fill: rgba(223,255,0,0); transition: fill .6s; }
.nodo__ico { fill: none; stroke: rgba(241,240,233,.75); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.nodo__ico .pieno { fill: currentColor; stroke: none; }
.nodo__nome { font: 600 14px var(--sans); letter-spacing: -.01em; fill: rgba(241,240,233,.55); transition: fill .4s; }
.nodo.attivo .nodo__vetro { fill: var(--signal); stroke: var(--signal); }
.nodo.attivo .nodo__alone { fill: rgba(223,255,0,.16); }
.nodo.attivo .nodo__ico { stroke: var(--ink); }
.nodo.attivo .nodo__nome { fill: var(--paper); }
.cuore__sfera { filter: drop-shadow(0 0 30px rgba(223,255,0,.55)); }
.cuore__saetta { fill: var(--ink); }
.cuore__testo { font: 700 17px var(--sans); letter-spacing: -.02em; fill: var(--ink); }
.cuore__onda { fill: none; stroke: var(--signal); stroke-width: 1.5; opacity: 0; transform-origin: 320px 320px; }
.cuore.arriva .cuore__onda { animation: onda 1.4s ease-out; }
.cuore.arriva .cuore__onda--2 { animation-delay: .25s; }
@keyframes onda { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.cuore { transform-origin: 320px 320px; transition: transform .4s var(--ease); }
.cuore.arriva { transform: scale(1.04); }
.costellazione__riga { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 8px auto 0; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 15px; min-height: 48px; }
.costellazione__riga b { font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.costellazione__riga span { color: var(--paper); }
.costellazione__riga em { font-style: normal; color: var(--muted); font-size: 13px; }
.costellazione__riga.cambia > * { animation: entra-nome .5s var(--ease) both; }
.costellazione__nota { margin: 14px 0 0; font: 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(241,240,233,.35); }
@media (max-width: 640px) { .nodo__nome { font-size: 19px; } .cuore__testo { font-size: 20px; } .costellazione__riga { font-size: 14px; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .costellazione__alone, .cuore__onda { animation: none !important; } }

/* ════ EDITORIALE (30/10 sera): tipografia da rivista, numeri di sezione, parole che salgono ════ */
main { counter-reset: capitolo; }
.testo-sez { max-width: none; display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); column-gap: var(--s5); align-items: end; margin-bottom: var(--s6); counter-increment: capitolo; position: relative; padding-top: 22px; }
.testo-sez::before { content: "N° " counter(capitolo, decimal-leading-zero); position: absolute; top: 0; right: 0; font: 11px var(--mono); letter-spacing: .2em; color: rgba(241,240,233,.4); }
.testo-sez::after { content: ""; position: absolute; top: 7px; left: 0; right: 70px; height: 1px; background: linear-gradient(90deg, rgba(241,240,233,.2), rgba(241,240,233,.05)); }
.sez--carta .testo-sez::before { color: rgba(11,11,11,.4); } .sez--carta .testo-sez::after { background: linear-gradient(90deg, rgba(11,11,11,.18), rgba(11,11,11,.04)); }
.testo-sez .kicker { grid-column: 1 / -1; justify-self: start; margin-top: 22px; }
.testo-sez h2 { grid-column: 1; font-size: clamp(42px, 6.4vw, 104px); letter-spacing: -.055em; line-height: .92; margin-top: var(--s4); }
.testo-sez .lead { grid-column: 2; margin: 0; padding-bottom: 10px; font-size: clamp(17px, 1.3vw, 20px); }
.apertura h1 { font-size: clamp(52px, 8.2vw, 138px); letter-spacing: -.06em; line-height: .88; }
.apertura--pagina h1 { font-size: clamp(52px, 9vw, 150px); }
.fascia h2 { font-size: clamp(48px, 8vw, 132px); letter-spacing: -.06em; line-height: .9; max-width: 14ch; }
.dato h2 { font-size: clamp(40px, 5.6vw, 88px); letter-spacing: -.055em; line-height: .92; }
@media (max-width: 900px) {
  .testo-sez { grid-template-columns: 1fr; margin-bottom: var(--s5); }
  .testo-sez .lead { grid-column: 1; margin-top: var(--s3); padding: 0; }
  .testo-sez h2 { font-size: clamp(40px, 11vw, 64px); }
  .apertura h1, .apertura--pagina h1 { font-size: clamp(46px, 13.5vw, 72px); }
  .fascia h2 { font-size: clamp(44px, 12vw, 72px); }
}

/* parole che salgono quando il titolo entra */
.parola { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.parola > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--w, 0) * 45ms + 80ms); }
.titolo-su .parola > span { transform: none; }

/* nastro di parole giganti che scorre con lo scroll */
.nastro { overflow: hidden; padding: clamp(28px, 4vw, 60px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.nastro__riga { display: flex; gap: .45em; white-space: nowrap; font-size: clamp(64px, 11vw, 190px); font-weight: 700; letter-spacing: -.06em; line-height: .9; will-change: transform; }
.nastro__riga span { color: transparent; -webkit-text-stroke: 1.5px rgba(241,240,233,.28); }
.nastro__riga span:nth-child(4n+1) { color: var(--paper); -webkit-text-stroke: 0; }
.nastro__riga b { color: var(--signal); font-weight: 700; -webkit-text-stroke: 0; }

/* firma gigante in fondo alla pagina */
.piede__gigante { margin: var(--s5) 0 0; font-size: clamp(64px, 15.5vw, 260px); font-weight: 700; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(241,240,233,.18); white-space: nowrap; overflow: hidden; user-select: none; }
.piede__gigante b { color: var(--signal); -webkit-text-stroke: 0; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .parola > span { transform: none !important; transition: none; } }
.piede__gigante { grid-column: 1 / -1; }
.apertura:not(.apertura--pagina) h1 { font-size: clamp(46px, 5.8vw, 104px); }
.due .testo-sez, .chi .testo-sez { grid-template-columns: 1fr; }
.due .testo-sez .lead, .chi .testo-sez .lead { grid-column: 1; margin-top: var(--s3); }
.due .testo-sez h2 { font-size: clamp(40px, 4.6vw, 76px); }
.piede__gigante { font-size: min(12.4vw, 170px); overflow: visible; }
@media (max-width: 900px) { .apertura:not(.apertura--pagina) h1 { font-size: clamp(42px, 11.5vw, 64px); } }

/* ════ CAPITOLI A TUTTA PAGINA: Pensiamo. / Testiamo. / Realizziamo. ════ */
.capitolo { height: 230vh; position: relative; --k: 0; }
.capitolo--carta { background: var(--paper); color: var(--ink); }
.capitolo--notte { background: var(--ink); color: var(--paper); }
.capitolo--giallo { background: var(--signal); color: var(--ink); }
.capitolo__scena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--pad); isolation: isolate; }
.capitolo__scena .luci { z-index: -1; }
.capitolo--giallo .luci i { background: radial-gradient(circle, rgba(255,255,255,.7), transparent 65%) !important; }
.capitolo__n { font: 12px var(--mono); letter-spacing: .22em; text-transform: uppercase; opacity: .55; margin: 0 0 2vh; }
.capitolo__n span { opacity: .8; }
.capitolo__parola { margin: 0; font-size: clamp(64px, 15.5vw, 300px); line-height: .86; letter-spacing: -.065em; font-weight: 700; position: relative; white-space: nowrap;
  transform: scale(calc(1.18 - var(--k) * .18)); transition: transform .1s linear; }
.capitolo__parola span { color: transparent; -webkit-text-stroke: 2px currentColor;
  background: linear-gradient(90deg, currentColor calc(var(--k) * 140% - 20%), transparent calc(var(--k) * 140% - 20%)); -webkit-background-clip: text; background-clip: text; }
.capitolo--carta .capitolo__parola span { -webkit-text-stroke-color: rgba(11,11,11,.85); }
.capitolo--notte .capitolo__parola span { -webkit-text-stroke-color: rgba(241,240,233,.75); }
.capitolo__lente { position: absolute; top: 50%; left: 0; width: clamp(110px, 15vw, 260px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 2;
  transform: translate(calc(var(--k) * 70vw + 6vw), -50%);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), rgba(255,255,255,.08) 42%, rgba(223,255,0,.18) 70%, rgba(223,255,0,.05));
  -webkit-backdrop-filter: blur(4px) saturate(220%) contrast(1.15); backdrop-filter: blur(4px) saturate(220%) contrast(1.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset -10px -14px 30px rgba(11,11,11,.12), 0 30px 60px -20px rgba(11,11,11,.35), 0 0 60px rgba(223,255,0,.35); }
.capitolo--giallo .capitolo__lente { box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset -10px -14px 30px rgba(11,11,11,.15), 0 30px 60px -20px rgba(11,11,11,.4); }
.capitolo__sotto { margin: 4vh 0 0; font-size: clamp(18px, 1.8vw, 28px); font-weight: 700; letter-spacing: -.02em; opacity: calc(var(--k) * 2 - .6); transform: translateY(calc((1 - var(--k)) * 20px)); }
.capitolo__dopo { padding-top: var(--s5); }
.capitolo__punti { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); }
.sez--carta .capitolo__punti { border-color: rgba(11,11,11,.14); }
.capitolo__punto { padding: 26px 22px 30px 0; border-right: 1px solid var(--line); }
.sez--carta .capitolo__punto { border-color: rgba(11,11,11,.1); }
.capitolo__punto:last-child { border-right: 0; }
.capitolo__punto + .capitolo__punto { padding-left: 22px; }
.capitolo__pn { display: block; font-size: clamp(40px, 4vw, 64px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1px currentColor; opacity: .5; margin-bottom: 18px; }
.capitolo__punto h3 { font-size: clamp(19px, 1.5vw, 24px); }
.capitolo__punto p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.sez--carta .capitolo__punto p { color: rgba(11,11,11,.6); }
.capitolo__strumenti { margin-top: var(--s4); }
@media (max-width: 900px) {
  .capitolo { height: 200vh; }
  .capitolo__parola { font-size: clamp(54px, 15vw, 120px); }
  .capitolo__punti { grid-template-columns: 1fr 1fr; }
  .capitolo__punto { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 12px 22px 0 !important; }
  .sez--carta .capitolo__punto { border-color: rgba(11,11,11,.1); }
}
@media (max-width: 640px) { .capitolo__punti { grid-template-columns: 1fr; } .capitolo__lente { width: 90px; } }
@media (prefers-reduced-motion: reduce) { .capitolo { height: auto; } .capitolo__scena { position: relative; height: 80vh; } .capitolo { --k: 1 !important; } }
/* colori espliciti: currentColor con testo trasparente diventava invisibile */
.capitolo--carta, .capitolo--giallo { --tinta: #0b0b0b; } .capitolo--notte { --tinta: #f1f0e9; }
.capitolo__parola span { -webkit-text-stroke: 2px var(--tinta) !important; background-image: linear-gradient(90deg, var(--tinta) calc(var(--k) * 140% - 20%), transparent calc(var(--k) * 140% - 20%)); }
.capitolo--notte .capitolo__parola span { -webkit-text-stroke-color: rgba(241,240,233,.8) !important; }
.capitolo__pn { -webkit-text-stroke: 1px var(--paper); }
.sez--carta .capitolo__pn { -webkit-text-stroke-color: var(--ink); }

/* ════ APERTURA nello stile dei capitoli: titolo gigante che si riempie riga per riga, lente che attraversa ════ */
.eroe { position: relative; background: var(--ink); color: var(--paper); margin-top: -72px; }
.eroe__scena { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 110px var(--pad) 60px; position: relative; overflow: hidden; isolation: isolate; }
.eroe__titolo { margin: 0; font-size: clamp(48px, 9.4vw, 172px); line-height: .88; letter-spacing: -.065em; font-weight: 700; display: flex; flex-direction: column; align-items: center; }
.eroe__riga { display: block; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(241,240,233,.55);
  background: linear-gradient(90deg, var(--paper) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
  animation: riempi 1.1s cubic-bezier(.65,0,.35,1) forwards; animation-delay: calc(.35s + var(--r) * .32s); }
.eroe__riga--y { -webkit-text-stroke-color: rgba(223,255,0,.6); background-image: linear-gradient(90deg, var(--signal) 50%, transparent 50%); }
@keyframes riempi { to { background-position: 0 0; -webkit-text-stroke-color: transparent; } }
.eroe__lente { top: 46%; transform: none; left: -20%; animation: attraversa 2.6s cubic-bezier(.65,0,.35,1) .3s forwards, galleggia 7s ease-in-out 3s infinite alternate; }
@keyframes attraversa { from { left: -20%; } to { left: 72%; } }
@keyframes galleggia { from { transform: translate(0,-50%); } to { transform: translate(-6vw,-58%); } }
.eroe__lente { transform: translateY(-50%); }
.eroe__sotto { margin: 4vh 0 0; font-size: clamp(17px, 1.5vw, 23px); color: var(--muted); max-width: 40ch; opacity: 0; animation: compari .8s var(--ease) 2.2s forwards; }
.eroe__sotto strong { color: var(--paper); }
.eroe__azioni { justify-content: center; margin-top: 3.5vh; opacity: 0; animation: compari .8s var(--ease) 2.45s forwards; }
.eroe__fiducia { justify-content: center; margin-top: 4vh; opacity: 0; animation: compari .8s var(--ease) 2.7s forwards; }
@keyframes compari { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .eroe__titolo { font-size: clamp(40px, 12.5vw, 64px); } .eroe__riga { white-space: normal; } .eroe__lente { width: 90px; } }
@media (prefers-reduced-motion: reduce) { .eroe__riga { animation: none; background-position: 0 0; -webkit-text-stroke-color: transparent; } .eroe__sotto, .eroe__azioni, .eroe__fiducia { animation: none; opacity: 1; } .eroe__lente { animation: none; left: 70%; } }

/* i punti 01-04 sotto i capitoli si compongono uno dopo l'altro */
.capitolo__punto.rivela { opacity: 1 !important; transform: none !important; }
.capitolo__punto .capitolo__pn { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.65,0,.35,1); }
.capitolo__punto h3, .capitolo__punto p { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.capitolo__punto::before { content: ""; display: block; height: 2px; width: 0; background: var(--signal); margin: -1px 0 24px; transition: width .9s cubic-bezier(.65,0,.35,1); }
.sez--carta .capitolo__punto::before { background: var(--ink); }
.capitolo__punto.visto .capitolo__pn { clip-path: inset(0 0 0 0); transition-delay: calc(var(--i, 0) * .22s + .15s); -webkit-text-stroke-color: var(--signal); }
.sez--carta .capitolo__punto.visto .capitolo__pn { -webkit-text-stroke-color: var(--ink); }
.capitolo__punto.visto::before { width: 100%; transition-delay: calc(var(--i, 0) * .22s); }
.capitolo__punto.visto h3 { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .22s + .45s); }
.capitolo__punto.visto p { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .22s + .6s); }
.capitolo__punti { border-top: 0 !important; }
.capitolo__punto .capitolo__pn { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .capitolo__punto * , .capitolo__punto::before { clip-path: none !important; opacity: 1 !important; transform: none !important; width: 100% !important; } }
.eroe__titolo { font-size: clamp(44px, min(8.2vw, 12.5vh), 160px); } .eroe__scena { padding-top: 96px; } @media (max-width: 640px) { .eroe__titolo { font-size: clamp(40px, 12vw, 60px); line-height: .92; } }

/* giallo sulle sezioni chiare: solo un'ombra morbida dietro, niente bordo */
:is(.sez--carta, .capitolo--carta, .palco) .y { text-shadow: 0 2px 6px rgba(11,11,11,.18), 0 8px 24px rgba(11,11,11,.16); }
.parola { padding: .12em .2em .3em; margin: -.12em -.2em -.3em; }
/* caroselli mobile legati allo scroll: si muovono con transform, non con lo scroll orizzontale */
@media (max-width: 640px) {
  .scorri-mobile.legato { overflow: hidden !important; scroll-snap-type: none !important; }
  .scorri-mobile.legato > * { transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
}

/* ════ TI SUONA FAMILIARE: i sintomi a tutta riga, si accendono e poi vengono barrati ════ */
.sintomi__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sintomo { display: grid; grid-template-columns: 70px 1fr minmax(0, 30%); align-items: center; gap: 24px; padding: clamp(18px, 2.4vw, 34px) 0; border-bottom: 1px solid var(--line); }
.sintomo__n { font: 12px var(--mono); letter-spacing: .2em; color: var(--muted); }
.sintomo__parola { position: relative; justify-self: start; font-size: clamp(38px, 6.6vw, 112px); font-weight: 700; letter-spacing: -.055em; line-height: .95;
  color: transparent; -webkit-text-stroke: 1.5px rgba(241,240,233,.35); transition: color .7s var(--ease), -webkit-text-stroke-color .7s; }
.sintomo__riga { position: absolute; left: -2%; right: -2%; top: 54%; height: clamp(5px, .6vw, 10px); background: var(--signal); border-radius: 99px; transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.65,0,.35,1) .55s; box-shadow: 0 0 24px rgba(223,255,0,.5); }
.sintomo__testo { color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s; }
.sintomo.acceso .sintomo__parola { color: var(--paper); -webkit-text-stroke-color: transparent; }
.sintomo.acceso .sintomo__testo { opacity: 1; transform: none; }
.sintomo.barrato .sintomo__riga { transform: scaleX(1); }
.sintomo.barrato .sintomo__parola { color: rgba(241,240,233,.38); transition-delay: .6s; }
.sintomo.acceso .sintomo__n { color: var(--signal); }
.sintomi__fine { margin-top: var(--s5); }
.sintomi__fine p { margin: 0; font-size: clamp(38px, 5.4vw, 92px); font-weight: 700; letter-spacing: -.055em; line-height: .95; }
.sintomi__fine .sintomi__nota { font-size: clamp(16px, 1.3vw, 20px); font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--muted); margin-top: var(--s3); max-width: 46ch; }
@media (max-width: 900px) {
  .sintomo { grid-template-columns: 1fr; gap: 8px; }
  .sintomo__n { order: -1; }
  .sintomo__parola { font-size: clamp(34px, 10.5vw, 60px); }
}
@media (prefers-reduced-motion: reduce) { .sintomo__parola { color: var(--paper); -webkit-text-stroke-color: transparent; } .sintomo__testo { opacity: 1; transform: none; } }
/* la barra segue ogni riga anche quando la parola va a capo */
.sintomo__riga { display: none; }
.sintomo__parola { display: inline; justify-self: start; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--signal), var(--signal)) 0 58% / 0% clamp(5px, .55vw, 9px) no-repeat; transition: color .7s var(--ease), -webkit-text-stroke-color .7s, background-size .8s cubic-bezier(.65,0,.35,1) .55s; }
.sintomo.barrato .sintomo__parola { background-size: 100% clamp(5px, .55vw, 9px); }
.sintomo > .sintomo__parola { display: block; }
.sintomo__parola { font-size: clamp(36px, 5.6vw, 96px); }
@media (max-width: 900px) { .sintomo__parola { font-size: clamp(32px, 9.5vw, 56px); } }
.sintomo__p { line-height: 1.02; }
.sintomo__p .sintomo__parola { display: inline; }
.sintomo { grid-template-columns: 60px 1fr minmax(0, 24%); }

/* pulsanti principali: liquid glass bianco, non colorati */
.azioni .btn--wa, .azioni .btn--giallo { position: relative; overflow: hidden; color: #fff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08) 55%, rgba(255,255,255,.14)) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 -10px 18px -10px rgba(255,255,255,.25), 0 14px 34px -16px rgba(0,0,0,.7) !important; }
.azioni .btn--wa::before, .azioni .btn--giallo::before { content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 46%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none; }
.azioni .btn--wa:hover, .azioni .btn--giallo:hover { background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 55%, rgba(255,255,255,.2)) !important; transform: translateY(-2px); }
.azioni .btn--wa svg { fill: #fff; }
.sez--carta .azioni .btn--wa, .sez--carta .azioni .btn--giallo, .capitolo--carta .azioni .btn { color: var(--ink) !important; border-color: rgba(11,11,11,.14) !important; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)) !important; }
.sez--carta .azioni .btn--wa svg { fill: var(--ink); }
.azioni .btn--wa::before, .azioni .btn--giallo::before { left: 0; right: 0; top: 0; height: 100%; border-radius: inherit; background: radial-gradient(120% 80% at 30% -20%, rgba(255,255,255,.28), transparent 60%); }
.azioni .btn--wa, .azioni .btn--giallo { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important; }
/* riempimento con background-size (Safari disegnava pieno all'inizio con le posizioni negative del gradiente) */
.capitolo__parola span { background-image: linear-gradient(var(--tinta), var(--tinta)) !important; background-repeat: no-repeat !important; background-position: 0 0 !important;
  background-size: calc(max(0, var(--k) * 1.25 - .1) * 100%) 100% !important; }