/* Sara · la grafica del sito (dal prototipo v11 della regia, 1/10/2026).
   È lo stile del prototipo (prototipo-v11/index.src.html), uguale: cambiano solo i percorsi dei caratteri
   (ora file in /assets/font/), manca la riga di diagnosi dell'anteprima della regia (.motore), e c'è .ora-punto
   (scena 2: l'ora e il suo punto sulla stessa riga, chiesto dalla regia il 1/10).
   Senza JavaScript: senza-js.css. iOS 15 (niente unità cqw): senza-cqw.css, fatto da strumenti/senza-cqw.mjs. */
/* caratteri del sito: nessun server esterno, nessun lampo di caratteri sbagliati */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/font/instrument-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: block; src: url(/assets/font/instrument-serif-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: block; src: url(/assets/font/geist-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: block; src: url(/assets/font/geist-mono-latin-wght-normal.woff2) format("woff2"); }
/* La home di Sara: la prima schermata con il robottino che dorme e il pulsante del film; il film si guarda con il play,
   alla sua velocità, con le scritte dentro la scena e lo schermo del telefono che segue il video. Un solo aspetto scuro. */
:root {
  color-scheme: dark;
  --notte: #06050f;
  --inchiostro: #eef0fb;
  --tenue: #c3c7dd;
  --smorzato: #8a8fae;
  --linea: rgb(255 255 255 / 0.12);
  --luce: #7b74ff;
  --luce-testo: #b3b8ff;
  --grad: linear-gradient(100deg, #5b97ff 0%, #8a7dff 48%, #b774ff 100%);
  --titoli: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --testo: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --svh: 1svh; --lvh: 1lvh;
}
@supports not (height: 1svh) { :root { --svh: 1vh; --lvh: 1vh; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--notte); color: var(--inchiostro); font: 400 16px/1.5 var(--testo); -webkit-font-smoothing: antialiased; overflow-x: clip; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--luce); outline-offset: 3px; border-radius: 10px; }
em { font-style: italic; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- tenda di apertura ---------- */
.tenda { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--notte); clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1); }
.tenda.via { clip-path: inset(0 0 100% 0); pointer-events: none; }
.tenda-cuore { display: grid; gap: clamp(28px, 6vh, 56px); }
/* la sigla: prima le quattro iniziali una sotto l'altra, poi ognuna si apre nella sua parola */
.sigla { display: grid; gap: 0.02em; font: 400 clamp(54px, 15.5vw, 132px)/0.94 var(--titoli); letter-spacing: -0.015em; }
.sigla-riga { display: flex; align-items: baseline; white-space: nowrap; }
.sigla .iniziale { display: inline-block; font-style: italic; margin-right: 0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(0.35em); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sigla .resto { display: inline-block; color: var(--inchiostro); clip-path: inset(-0.2em 100% -0.3em 0); transform: translateX(-0.18em); transition: clip-path 0.95s cubic-bezier(0.65, 0, 0.2, 1), transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sigla.su .iniziale { opacity: 1; transform: none; }
.sigla-riga.aperta .resto { clip-path: inset(-0.2em -0.1em -0.3em 0); transform: none; }
.sigla-riga:nth-child(2) .iniziale { transition-delay: 0.09s; } .sigla-riga:nth-child(3) .iniziale { transition-delay: 0.18s; } .sigla-riga:nth-child(4) .iniziale { transition-delay: 0.27s; }
.tenda-piede { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.led { width: 10px; height: 10px; border-radius: 50%; background: #9d8bff; box-shadow: 0 0 14px 2px rgb(140 120 255 / 0.9); animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: 0.45; } }   /* 9/10 sera: solo l'opacità (l'ombra animata ridisegnava la testata a ogni fotogramma) */
.tenda-linea { width: 100%; height: 1px; background: var(--linea); overflow: hidden; }
.tenda-linea i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.35s ease-out; }
.tenda-numero { font: 400 12px/1 var(--mono); letter-spacing: 0.18em; color: var(--smorzato); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }

/* ---------- testata ---------- */
.testata { position: fixed; z-index: 20; top: 0; left: 0; right: 0; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.testata.nascosta { opacity: 0; transform: translateY(-10px); }
.testata.nascosta > * { pointer-events: none; }
.testata > * { pointer-events: auto; }
/* sopra le sezioni la testata ha un fondo, così non si sovrappone ai testi */
.testata::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(6 5 15 / 0.86); box-shadow: 0 1px 0 var(--linea); opacity: 0; transition: opacity 0.35s ease; }
.testata.sopra::before { opacity: 1; }
@media (min-width: 900px) { .testata::before { background: rgb(6 5 15 / 0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
.marchio { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 500 19px/1 var(--testo); letter-spacing: -0.02em; }
.marchio .led { width: 8px; height: 8px; }
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--grad); color: #0b0a1f; font: 600 14px/1 var(--testo); text-decoration: none; cursor: pointer; }
.pulsante-vetro { background: rgb(255 255 255 / 0.08); color: var(--inchiostro); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.testata .pulsante { min-height: 38px; padding: 0 15px; font-size: 13px; }
.film-barra { position: fixed; z-index: 21; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.film-barra i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.testata-destra { display: flex; align-items: center; gap: 14px; }
.salta { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); text-decoration: none; padding: 12px 0; transition: opacity 0.4s; white-space: nowrap; }
.salta.via { opacity: 0; pointer-events: none; }

/* ---------- il film ---------- */
.film { position: relative; height: calc(2 * var(--alto, 100svh)); }
.palco { position: sticky; top: 0; height: 100vh; height: var(--alto, 100svh); overflow: hidden; background: var(--notte); }
.ambiente { position: absolute; inset: -10%; width: 120%; height: 120%; filter: blur(22px) brightness(0.42) saturate(1.2); opacity: 0; transition: opacity 0.6s; }
/* 11/10: il quadro è un mondo a sé (isolation): quello che c'è dentro (lo schermo del telefono, la sua cornice, la tela
   del robottino) non può più finire sopra i veli, le scritte e i comandi del film. Prima il robottino ridisegnato restava
   chiaro sopra il velo scuro in basso (e sul bordo dello schermo si vedeva la differenza), e copriva il tasto per riprendere. */
.quadro { position: absolute; container-type: inline-size; isolation: isolate; }
/* i sei video uno sopra l'altro: quello nuovo entra sopra (in dissolvenza o di colpo), quello vecchio si toglie dopo */
.strati { position: absolute; inset: 0; isolation: isolate; transition: filter 0.35s ease; }
.strato { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition-property: opacity; transition-timing-function: ease-in-out; pointer-events: none; background: transparent; }
.strato.su { opacity: 1; }
.palco.in-pausa .strati { filter: brightness(0.62) saturate(0.9); }
/* se la parte dopo del film sta ancora arrivando: un giro sottile al centro */
.palco.carica::after { content: ""; position: absolute; z-index: 7; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / 0.2); border-top-color: #fff; animation: gira 0.9s linear infinite; pointer-events: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.strato::-webkit-media-controls, .strato::-webkit-media-controls-start-playback-button, .strato::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }
.tocco-film { position: absolute; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 3; transform: translateX(-50%); min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--grad); color: #0b0a1f; font: 600 16px/1 var(--testo); box-shadow: 0 10px 40px rgb(0 0 0 / 0.5); cursor: pointer; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.velo { position: absolute; inset: 0; pointer-events: none; }
.velo-alto { background: linear-gradient(to bottom, rgb(6 5 15 / 0.92) 0%, rgb(6 5 15 / 0.66) 18%, rgb(6 5 15 / 0) 42%); opacity: 0; }
.velo-basso { background: linear-gradient(to top, rgb(6 5 15 / 0.94) 0%, rgb(6 5 15 / 0.7) 16%, rgb(6 5 15 / 0) 38%); opacity: 0; transform: translateY(calc(-1 * var(--copre, 0px))); }
.velo-titolo { background: radial-gradient(90% 60% at 50% 46%, rgb(6 5 15 / 0.84), rgb(6 5 15 / 0.6)); opacity: 1; transition: opacity 1s ease; }
.velo-titolo.via { opacity: 0; }
.vignetta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 90% at 50% 48%, transparent 55%, rgb(6 5 15 / 0.55)); }
.grana { position: absolute; inset: -50%; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; animation: grana 0.9s steps(6) infinite; }
@keyframes grana { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -3%); } 60% { transform: translate(-3%, -6%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); } }

/* disegno sul telefono del video: lo schermo vero, dentro la cornice nera (misurato sui fotogrammi del film il 9/10 sera:
   x 267-727, y 434-1457 su 1080x1920; angoli di 44px). Prima copriva anche la cornice e in basso restava fuori una striscia. */
.schermo { position: absolute; left: 24.72%; top: 22.6%; width: 42.69%; height: 53.33%; border-radius: 4.1cqw; pointer-events: none; }
.luce-fredda { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgb(205 225 255 / 0.36), rgb(160 190 255 / 0.1) 60%, transparent); mix-blend-mode: screen; opacity: 0; }
.accensione { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(90% 60% at 50% 30%, rgb(190 180 255 / 0.5), transparent 70%); opacity: 0; mix-blend-mode: screen; }
.blocco { position: absolute; left: 7%; right: 7%; top: 3.2%; text-align: center; transition: opacity 0.5s; }
.ora { font: 600 12cqw/1 var(--testo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 5cqw rgb(150 130 255 / 0.55); }
.data { margin-top: 1.2cqw; font: 500 2.7cqw/1.2 var(--testo); transition: opacity 0.4s; color: rgb(255 255 255 / 0.85); }
.notifiche { position: absolute; left: 5.5%; right: 5.5%; top: 26%; display: flex; flex-direction: column; gap: 0.9cqw; transition: top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); margin: 0; padding: 0; list-style: none; }
.notifica { display: none; grid-template-columns: 1fr auto; column-gap: 1.5cqw; padding: 1.1cqw 1.9cqw 1.3cqw; border-radius: 2.4cqw; background: rgb(24 20 54 / 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); color: #fff; font-size: max(10px, 2.1cqw); line-height: 1.18; transition: filter 0.4s; }
.notifica.su { display: grid; animation: arriva 0.55s cubic-bezier(0.2, 1.35, 0.4, 1) both; }
@keyframes arriva { from { opacity: 0; transform: translateY(-3cqw) scale(0.96); } }
.notifica b { font-weight: 600; }
.notifica time { color: rgb(255 255 255 / 0.62); text-align: right; white-space: nowrap; }
.notifica span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(255 255 255 / 0.9); }
.notifiche.risposti { top: 4%; }
.notifiche.risposti time, .notifiche.risposti b { display: none; }
.notifiche.risposti .notifica span { grid-row: 1; }
.notifica .risposto { grid-column: 1 / -1; margin-top: 0.4cqw; font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ora { transition: font-size 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.12s; }
.blocco.piccolo .ora { font-size: 8.2cqw; }
.blocco.piccolo .data { opacity: 0; }
.schermo.pieno .notifiche { top: 16.5%; }
.schermo .notifiche.risposti { top: 3%; }          /* scena 10: l'ora non c'è più, la lista sale e lascia spazio al robottino */
.etichetta-esempio { align-self: flex-end; font: 500 max(9px, 1.8cqw)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); list-style: none; }
.blocco-esempio { top: 60%; }

.avviso { position: absolute; left: 5%; right: 5%; top: 5%; padding: 2.4cqw 2.6cqw 2.8cqw; border-radius: 3cqw; background: rgb(22 18 52 / 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 3cqw 8cqw rgb(0 0 0 / 0.4); color: #fff; font-size: max(10px, 2.5cqw); line-height: 1.25; opacity: 0; transform: translateY(-3cqw) scale(0.97); transition: opacity 0.45s, transform 0.55s cubic-bezier(0.2, 1.3, 0.4, 1); pointer-events: none; }
.avviso.su { opacity: 1; transform: none; pointer-events: auto; }
.avviso-testa { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; color: rgb(255 255 255 / 0.72); }
.avviso-testa b { color: #fff; font-weight: 600; }
.avviso-testo { margin-top: 1cqw; font-weight: 600; }
.avviso-domanda { margin-top: 1cqw; color: rgb(255 255 255 / 0.85); }
.scelte { display: flex; gap: 3cqw; margin-top: 2.2cqw; }
.parola { flex: 1; position: relative; min-height: max(40px, 8.6cqw); border-radius: 999px; border: 0; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); color: #fff; font: 700 max(14px, 3.3cqw)/1 var(--testo); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.parola::after { content: ""; position: absolute; inset: -9px -1.5cqw; }
.parola.sara { background: var(--grad); box-shadow: none; color: #0b0a1f; }
.parola.scelta { box-shadow: 0 0 0 2px #fff, 0 0 5cqw rgb(170 140 255 / 0.9); }
/* invito al tocco: un «dito» che preme a turno i due pulsanti, e un cartellino sotto l'avviso */
.parola::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgb(255 255 255 / 0.9); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.35); opacity: 0; pointer-events: none; }
.avviso.invita .parola::before { animation: dito 2.4s ease-out infinite; }
.avviso.invita .parola.io::before { animation-delay: 1.2s; }
@keyframes dito { 0% { opacity: 0; transform: scale(1.7); } 12% { opacity: 0.95; transform: scale(1); } 22% { opacity: 0.95; transform: scale(0.8); } 45% { opacity: 0; transform: scale(2.3); } 100% { opacity: 0; transform: scale(2.3); } }
.invito { position: absolute; left: 50%; top: 41%; display: flex; align-items: center; gap: 1.6cqw; padding: 1.5cqw 2.8cqw 1.5cqw 2.2cqw; border-radius: 999px; background: #fff; color: #120f2e; font: 600 max(12px, 2.8cqw)/1.15 var(--testo); white-space: nowrap; box-shadow: 0 2cqw 6cqw rgb(0 0 0 / 0.45); opacity: 0; transform: translate(-50%, 1.5cqw); transition: opacity 0.45s, transform 0.55s cubic-bezier(0.2, 1.3, 0.4, 1); pointer-events: none; }
.invito::before { content: ""; position: absolute; left: 50%; top: -1.2cqw; width: 2.6cqw; height: 2.6cqw; margin-left: -1.3cqw; background: #fff; transform: rotate(45deg); border-radius: 0.5cqw 0 0 0; }
.invito.su { opacity: 1; transform: translate(-50%, 0); }
/* 11/10: sui telefoni più piccoli, se la scritta non ci sta nemmeno rimpicciolita, va su due righe (sara.js, posaInvito) */
.invito.a-capo { width: 92%; white-space: normal; justify-content: center; text-align: center; border-radius: 3cqw; }
.invito.a-capo .punto { flex-shrink: 0; }
.invito .punto { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--luce); animation: pulsa 1.6s ease-in-out infinite; }

.pannello { position: absolute; display: grid; place-items: center; text-align: center; border-radius: 1.4cqw; color: #fff; font: 600 max(10px, 2.7cqw)/1.1 var(--testo); letter-spacing: -0.01em; text-shadow: 0 0 3cqw rgb(170 150 255 / 0.95); opacity: 0; transition: opacity 0.18s steps(2); pointer-events: none; }
.pannello.acceso { opacity: 1; background: radial-gradient(closest-side, rgb(150 130 255 / 0.28), transparent); }
.p-1 { left: 13.6%; width: 20.4%; top: 34.6%; height: 7.3%; }
.p-2 { left: 35.8%; width: 22.2%; top: 33.3%; height: 8.2%; }
.p-3 { left: 60.2%; width: 25.5%; top: 32.6%; height: 8.3%; }

.schede { position: absolute; left: max(4%, calc(var(--vis-l, 0px) + 14px)); right: max(4%, calc(var(--vis-r, 0px) + 14px)); top: max(29%, var(--sotto8, 0px)); display: flex; justify-content: space-between; gap: 4%; pointer-events: none; }
.scheda { width: 46%; padding: 2.4cqw 2.8cqw; border-radius: 3cqw; background: rgb(20 16 48 / 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(190 170 255 / 0.35), 0 0 8cqw rgb(120 100 255 / 0.35); color: #fff; font-size: max(10px, 3cqw); line-height: 1.2; opacity: 0; transform: translateY(3cqw) scale(0.94); transition: opacity 0.4s, transform 0.6s cubic-bezier(0.2, 1.3, 0.4, 1); }
.scheda-dx { margin-top: 7%; }
.schede.su .scheda { opacity: 1; transform: none; }
.scheda strong { display: block; font-weight: 700; }
.scheda small { display: block; margin-top: 1cqw; font-size: max(9px, 0.78em); color: #cfc9ff; }
.scheda .spunta { display: inline-grid; place-items: center; width: 4.4cqw; height: 4.4cqw; margin-bottom: 1.4cqw; border-radius: 50%; background: var(--grad); color: #0b0a1f; font-size: 2.6cqw; font-weight: 800; }

/* ---------- le scritte dentro la scena ---------- */
.testi { position: absolute; inset: 0; pointer-events: none; }
.scena { position: absolute; left: 20px; right: 20px; opacity: 0; will-change: transform, opacity, filter; pointer-events: none; }
/* le scritte non devono mai coprire i tocchi sul telefono del film: si toccano solo i pulsanti della scena visibile */
.scena.attiva a, .scena.attiva button { pointer-events: auto; }
.scena[data-pos="alto"] { top: calc(env(safe-area-inset-top, 0px) + 92px); }
.scena[data-pos="basso"] { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); translate: 0 calc(-1 * var(--copre, 0px)); }
.scena h1, .scena h2 { margin: 0; font: 400 clamp(38px, 11.2vw, 50px)/0.98 var(--titoli); letter-spacing: -0.012em; text-wrap: balance; }
.scena h2 em, .scena h1 em { font-style: italic; }
.parolina { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.14em 0.26em 0.12em; margin: -0.06em -0.14em -0.26em -0.12em; }
.parolina > span { display: inline-block; transform: translateY(135%); will-change: transform; }
/* scena 2: l'ora e il suo punto restano sulla stessa riga (ogni parola è un blocco a sé, e tra due blocchi si può andare a capo) */
.ora-punto { white-space: nowrap; }
/* il colore sfumato si dipinge anche sulle punte delle lettere in corsivo che escono dalla loro scatola */
.parolina > span.grad { padding: 0 0.12em 0.24em 0.1em; margin: 0 -0.12em -0.24em -0.1em; }
.scena .riga { margin: 12px 0 0; max-width: 26rem; font: 400 17px/1.45 var(--testo); color: var(--tenue); opacity: 0; }
.scena .riga q { quotes: "«" "»"; color: var(--inchiostro); }
/* le parole che contano: in bianco pieno e più marcate; l'evidenziatore solo per la frase più importante */
.scena .riga strong, .dopo strong { color: var(--inchiostro); font-weight: 600; }
.evidenza { color: var(--inchiostro); font-weight: 600; background: linear-gradient(transparent 60%, rgb(123 116 255 / 0.42) 60%, rgb(123 116 255 / 0.42) 94%, transparent 94%) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.08em; }
.bolle { display: grid; gap: 8px; margin-top: 16px; max-width: 19rem; opacity: 0; }
.bolla { justify-self: start; max-width: 88%; padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: rgb(255 255 255 / 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); font-size: 14px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s; }
.bolla.sara { justify-self: end; border-radius: 16px 16px 5px 16px; background: linear-gradient(110deg, rgb(91 151 255 / 0.85), rgb(160 118 255 / 0.85)); color: #fff; box-shadow: none; }
.bolla.su { opacity: 1; transform: none; }
/* 11/10: l'etichetta «esempio» del film è la stessa pillola bianca dappertutto (scene 6, 8, 9 e 10; prima qui era una
   scritta grigia in maiuscoletto) */
.esempio-piccolo { justify-self: start; padding: 3px 7px; border-radius: 5px; background: rgb(255 255 255 / 0.92); color: #2a2840; font: 700 11px/1 var(--testo); letter-spacing: 0.02em; }
.scheda { position: relative; }
.scheda .esempio-piccolo { position: absolute; top: 0; right: 2.6cqw; transform: translateY(-55%); padding: 0.5cqw 1.1cqw; border-radius: 1cqw; font-size: max(9px, 1.9cqw); }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; opacity: 0; }
.azioni .pulsante { min-height: 48px; padding: 0 22px; font-size: 15px; }

/* primo schermo: la scena del titolo */
.apertura { top: 0; bottom: 0; left: 0; right: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding: 0 22px; opacity: 1; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease; }
.apertura .parolina > span { transform: none; }
.apertura.via { opacity: 0; transform: translateY(-26px); filter: blur(6px); }
.apertura.via a, .apertura.via button { pointer-events: none; }
.apertura .occhiello { margin: 0 0 18px; font: 500 11.5px/1.6 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--tenue); }
.apertura .occhiello b { color: var(--inchiostro); font-weight: 500; }
.apertura h1 { font-size: clamp(50px, 14.4vw, 84px); line-height: 0.96; max-width: none; }
.apertura .riga { margin: 18px auto 0; max-width: 20rem; font-size: 16.5px; color: #d3d6ea; opacity: 1; }
.apertura .scegli { margin: 22px 0 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--smorzato); }
.apertura .porte { display: flex; justify-content: center; gap: 8px; width: min(100%, 360px); }
.apertura .porta { flex: 1; min-height: 46px; padding: 0 10px; font-size: 14px; }
.apertura .prova { margin: 16px 0 0; font: 500 13px/1.4 var(--testo); color: var(--inchiostro); }
.scorri { transition: opacity 0.5s; } .scorri.via { opacity: 0; }
.scorri { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); width: 22px; height: 36px; margin-left: -11px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.4); pointer-events: none; }
.scorri::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: scorri 1.8s ease-in-out infinite; }
@keyframes scorri { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* il pulsante del film */
.play { position: relative; margin-top: 24px; min-height: 58px; padding: 0 22px 0 12px; gap: 12px; font-size: 16px; box-shadow: 0 14px 46px rgb(120 100 255 / 0.42); }
.play-icona { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0b0a1f; }
.play-icona::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.play .durata { padding: 5px 8px; border-radius: 999px; background: rgb(11 10 31 / 0.16); font: 600 11px/1 var(--mono); letter-spacing: 0.06em; }
.play::after { content: ""; position: absolute; inset: -7px; border-radius: inherit; box-shadow: 0 0 0 1.5px rgb(175 160 255 / 0.55); animation: onda 2.6s ease-out infinite; pointer-events: none; }
@keyframes onda { 0% { opacity: 0.9; transform: scale(0.97); } 70%, 100% { opacity: 0; transform: scale(1.1); } }
.play.carica .play-icona { background: conic-gradient(#0b0a1f calc(var(--carico, 0) * 360deg), rgb(11 10 31 / 0.28) 0); }
.play.carica .play-icona::before { opacity: 0.5; }
/* i comandi del film: le scene in alto come le storie di Instagram, la pausa e «Salta il film» */
.comandi { position: absolute; z-index: 6; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 0; opacity: 0; transform: translateY(-8px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
.comandi.su { opacity: 1; transform: none; }
.comandi.su button { pointer-events: auto; }
.capitoli { display: flex; gap: 5px; }
.capitolo { flex: 1; padding: 10px 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.capitolo i { position: relative; display: block; height: 2.5px; border-radius: 2px; background: rgb(255 255 255 / 0.24); overflow: hidden; }
.capitolo i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: left; transform: scaleX(var(--q, 0)); }
.comandi-riga { display: flex; align-items: center; justify-content: space-between; }
.comando { display: inline-grid; place-items: center; min-width: 44px; min-height: 42px; padding: 0 2px; border: 0; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.comandi-sx { display: flex; align-items: center; gap: 4px; }
.comando.audio svg { width: 23px; height: 23px; overflow: visible; }
.comando.audio .cassa { fill: #fff; }
.comando.audio .onde, .comando.audio .x { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.comando.audio .x, .comando.audio.muto .onde { display: none; }
.comando.audio.muto .x { display: inline; }
.comando.audio.muto .cassa { opacity: 0.7; }
/* il telefono tiene il suono spento: la cassa barrata e un'onda che invita al tocco */
.comando.audio.bloccato .onde { display: none; }
.comando.audio.bloccato .x { display: inline; }
.comando.audio.bloccato { position: relative; }
.comando.audio.bloccato::after { content: ""; position: absolute; inset: 6px 4px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.7); animation: onda 1.8s ease-out infinite; pointer-events: none; }
.comando.pausa span { display: block; width: 13px; height: 15px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.comando.pausa.ferma span { width: 0; height: 0; margin-left: 4px; border-right: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
/* 11/10: «Salta la presentazione» è un pulsante e si vede (prima era una scritta piccola in maiuscoletto: chi voleva
   leggere non capiva che si poteva toccare) */
.salta-film { min-height: 38px; padding: 0 15px; border-radius: 999px; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 13.5px/1 var(--testo); letter-spacing: 0; color: #fff; transition: background 0.25s ease; }
.salta-film:hover, .salta-film:focus-visible { background: rgb(255 255 255 / 0.18); }
/* 15/10: «Salta la presentazione» c'è solo se la presentazione resta ferma o non si carica (sara.js); le tacche delle scene
   non ancora viste non si toccano */
.salta-film[hidden] { display: none !important; }
.capitolo:disabled { cursor: default; }
/* 15/10 · «Oppure leggi» c'è solo per chi ha già visto tutta la presentazione (sara.js) */
.leggi-prima[hidden] { display: none !important; }
/* 15/10 · solo con «?prova» nell'indirizzo: la scritta che dice se i video arrivano a pezzi o interi */
.scritta-prova { position: fixed; z-index: 100; left: 8px; top: 8px; margin: 0; padding: 5px 9px; border-radius: 8px; background: #ffd23f; color: #000; font: 600 12px/1.3 var(--mono); pointer-events: none; }
.riprendi { position: absolute; z-index: 5; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(14 11 34 / 0.6); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.38), 0 18px 60px rgb(0 0 0 / 0.5); cursor: pointer; }
.riprendi::before { content: ""; margin-left: 6px; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
/* alla scena 9: sotto il cartellino, il tempo che resta prima che scelga Sara */
.invito { padding-bottom: 2.4cqw; }
.invito .conto { position: absolute; left: 14%; right: 14%; bottom: 0.75cqw; height: 0.4cqw; border-radius: 1cqw; background: rgb(18 15 46 / 0.12); overflow: hidden; }
.invito .conto i { display: block; height: 100%; background: var(--luce); transform-origin: left; transform: scaleX(var(--k, 0)); }
.riguarda { flex-basis: 100%; justify-self: start; margin-top: 4px; padding: 10px 0; border: 0; background: none; color: var(--tenue); font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-align: left; }
.riguarda span { display: inline-block; margin-right: 6px; }

/* la quarta porta e la quarta carta: Sara su misura */
.carta-misura { background: linear-gradient(160deg, rgb(123 116 255 / 0.13), rgb(255 255 255 / 0.02) 60%); }
/* i pulsanti per scrivere a Sara: oggi Telegram (dal 2/10 WhatsApp resta nascosto finché non ha il suo link) */
.scrivile-dove { margin: 26px 0 10px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--smorzato); }
.due-canali { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 440px; }
.pulsante.canale { min-height: 56px; font-size: 16px; }
.pulsante.canale span { opacity: 0.7; }
.qr-canali { display: none; }
.foglio-sara .due-canali { grid-template-columns: 1fr; }   /* 11/10: un tasto solo (Telegram), largo quanto il pannello */
.nota-canali { margin: 16px 0 0; color: var(--smorzato); font-size: 13.5px; line-height: 1.5; max-width: 440px; }
.nota-canali a { color: var(--tenue); }
/* la chat d'esempio accanto: un telefono con il primo messaggio vero di Sara */
.telefono-chat { width: 100%; max-width: 380px; justify-self: center; border-radius: 34px; overflow: hidden; background: #0d0b1f; box-shadow: inset 0 0 0 1px var(--linea), 0 40px 100px -30px rgb(0 0 0 / 0.9), 0 0 80px -20px rgb(123 116 255 / 0.35); }
.tc-testa { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--linea); font-size: 15px; }
.tc-testa .led { width: 8px; height: 8px; }
.tc-testa span:last-child { margin-left: auto; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--smorzato); }
.tc-corpo { display: grid; gap: 10px; padding: 22px 18px 26px; min-height: 300px; align-content: end; }
.tc-corpo .esempio-piccolo { justify-self: center; margin-bottom: 6px; }
.tc-bolla { max-width: 84%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4; }
.tc-bolla.tu { justify-self: end; border-radius: 18px 18px 6px 18px; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.tc-bolla.lei { justify-self: start; border-radius: 18px 18px 18px 6px; background: linear-gradient(110deg, rgb(91 151 255 / 0.9), rgb(160 118 255 / 0.9)); color: #fff; }
.tc-scrive { justify-self: start; display: flex; gap: 5px; padding: 12px 14px; border-radius: 18px; background: rgb(255 255 255 / 0.07); }
.tc-scrive i { width: 7px; height: 7px; border-radius: 50%; background: var(--tenue); animation: scrive 1.2s ease-in-out infinite; }
.tc-scrive i:nth-child(2) { animation-delay: 0.15s; } .tc-scrive i:nth-child(3) { animation-delay: 0.3s; }
@keyframes scrive { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.finale-cuore .due-canali { margin-top: 30px; }
/* il pannello «Parla con Sara»: dal basso sul telefono, al centro sul computer */
.foglio-sara { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--inchiostro); overflow: hidden; }
.foglio-sara::backdrop { background: rgb(4 3 12 / 0.74); }
.fs-cuore { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 20px calc(26px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: #0e0c22; box-shadow: 0 -30px 80px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.1); animation: foglio-sale 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes foglio-sale { from { transform: translateY(100%); } }
.fs-cuore .occhiello { margin: 0 0 10px; }
.fs-titolo { margin: 0; font: 400 44px/1 var(--titoli); letter-spacing: -0.01em; }
.fs-titolo em { font-style: italic; }
.fs-riga { margin: 14px 0 0; max-width: 30rem; color: var(--tenue); font-size: 16px; line-height: 1.55; }
.fs-riga strong { color: var(--inchiostro); font-weight: 600; }
/* 6/10: il tasto in attesa (Fasi 1 e 2): niente Telegram, niente QR, questo testo */
.fs-attesa { margin: 18px 0 0; max-width: 30rem; color: var(--inchiostro); font-size: 17px; line-height: 1.5; }
.fs-chiudi { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.07); cursor: pointer; }
.fs-chiudi::before, .fs-chiudi::after { content: ""; position: absolute; left: 14px; right: 14px; top: 21px; height: 2px; border-radius: 2px; background: var(--tenue); transform: rotate(45deg); }
.fs-chiudi::after { transform: rotate(-45deg); }
html.foglio-aperto { overflow: hidden; }
@media (max-width: 899px) {
  .apertura .porte { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 330px); }
}

/* il finale: tre scene che chi legge riconosce */
.scene-vere { list-style: none; margin: 26px 0 6px; padding: 0; display: grid; gap: 12px; max-width: 34rem; }
.scene-vere li { position: relative; padding-left: 20px; color: var(--tenue); font-size: 18px; line-height: 1.5; }
.scene-vere li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.scene-vere q { quotes: "«" "»"; color: var(--inchiostro); font-style: italic; }
.finale-cuore .nota-canali + .nota-canali { margin-top: 6px; }

/* ---------- dopo il film: il foglio che sale sopra il film, con le sezioni che vendono prima della chiamata ---------- */
.dopo { position: relative; z-index: 2; margin-top: calc(-1 * var(--alto, 100svh)); min-height: var(--alto, 100svh); background: var(--notte); border-radius: 28px 28px 0 0; box-shadow: 0 -28px 70px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.09); }
.dopo .parolina > span { transform: none; will-change: auto; }
.velo-sipario { background: var(--notte); opacity: 0; }
.salto { position: fixed; inset: 0; z-index: 15; background: var(--notte); opacity: 0; pointer-events: none; transition: opacity 0.55s ease; }
.salto.su { opacity: 1; transition-duration: 0.3s; }
.sezione { position: relative; padding: clamp(88px, 14vw, 168px) 20px 0; }
.cuore { position: relative; max-width: 1120px; margin: 0 auto; }
.dopo .occhiello { margin: 0 0 18px; font: 500 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--luce-testo); }
.titolo { margin: 0; max-width: 15ch; font: 400 clamp(42px, 11.6vw, 92px)/0.98 var(--titoli); letter-spacing: -0.015em; text-wrap: balance; }
.titolo-lungo { max-width: 21ch; font-size: clamp(34px, 8.8vw, 70px); line-height: 1.03; }
.corpo { margin: 22px 0 0; max-width: 34rem; font: 400 17px/1.6 var(--testo); color: var(--tenue); }
.sottotitolo { margin: 60px 0 18px; font: 500 11.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--smorzato); }
.segnaposto { margin: 18px 0 0; font: 500 12px/1.5 var(--mono); color: #d9b86c; }

/* le tre Sara */
.carte { display: grid; gap: 14px; margin-top: 44px; }
.carta { position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 22px 24px; border-radius: 22px; background: linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.02)); box-shadow: inset 0 0 0 1px var(--linea); text-decoration: none; overflow: hidden; }
.carta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s; }
.carta:hover::before, .carta:focus-visible::before { opacity: 1; }
.carta .filo { position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: var(--grad); transform-origin: left; opacity: 0.85; }
.carta .canali { display: flex; flex-wrap: wrap; gap: 6px; }
.carta .canali span { padding: 6px 10px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--tenue); box-shadow: inset 0 0 0 1px var(--linea); }
@media (hover: hover) { .carta { transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .carta:hover { translate: 0 -4px; } }
.carta .domanda { font: 500 11px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--smorzato); }
.carta h3 { margin: 4px 0 0; font: 400 40px/1 var(--titoli); letter-spacing: -0.01em; }
.carta h3 em { font-style: italic; }
.carta p { margin: 0; color: var(--tenue); font-size: 16px; line-height: 1.55; }
.carta .vai { margin-top: 8px; font: 600 15px/1 var(--testo); color: var(--inchiostro); }
.carta .vai::before { content: "→ "; color: var(--luce-testo); }
.note { display: grid; gap: 12px; margin-top: 30px; max-width: 42rem; color: var(--tenue); font-size: 16px; line-height: 1.55; }
.note p { margin: 0; }
.note b, .nota-forte b { color: var(--inchiostro); font-weight: 600; }

/* il problema e le tre strade */
.strade { display: grid; gap: 12px; }
.strada { padding: 22px; border-radius: 20px; background: rgb(255 255 255 / 0.028); box-shadow: inset 0 0 0 1px var(--linea); }
.strada h4 { margin: 0 0 8px; font: 600 18px/1.3 var(--testo); color: #d3d6e8; }
.strada p { margin: 0; color: var(--smorzato); font-size: 16px; line-height: 1.55; }
.strada-sara { padding: 28px 24px; background: linear-gradient(160deg, rgb(123 116 255 / 0.2), rgb(123 116 255 / 0.04) 62%); box-shadow: inset 0 0 0 1px rgb(170 160 255 / 0.42), 0 24px 70px -24px rgb(123 116 255 / 0.55); }
.strada-sara h4 { margin-bottom: 12px; font: 400 36px/1 var(--titoli); color: var(--inchiostro); }
.strada-sara h4 em { font-style: italic; }
.strada-sara p { color: var(--tenue); font-size: 17px; }
.nota-forte { margin: 30px 0 0; max-width: 42rem; color: var(--tenue); font-size: 16px; line-height: 1.55; }

/* la prova: offerta e passi */
.sezione-offerta { overflow-x: clip; }
.sezione-offerta::before { content: ""; position: absolute; left: 50%; top: 18%; width: min(1100px, 150vw); height: 70%; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(123 116 255 / 0.14), transparent); pointer-events: none; }
.bivio { display: grid; gap: 12px; margin-top: 38px; }
.bivio-lato { padding: 26px 24px; border-radius: 22px; background: rgb(255 255 255 / 0.035); box-shadow: inset 0 0 0 1px var(--linea); }
.bivio-quando { margin: 0 0 12px; font: 400 30px/1 var(--titoli); font-style: italic; color: var(--inchiostro); }
.bivio-lato p:last-child { margin: 0; color: var(--tenue); font-size: 16px; line-height: 1.6; }
.passi, .elenco-chiamata { counter-reset: passo; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linea); }
.elenco-chiamata { margin-top: 40px; }
.passi li, .elenco-chiamata li { counter-increment: passo; position: relative; padding: 20px 0 20px 54px; border-top: 1px solid var(--linea); color: var(--tenue); font-size: 16px; line-height: 1.55; }
.passi li::before, .elenco-chiamata li::before { content: counter(passo, decimal-leading-zero); position: absolute; left: 0; top: 21px; font: 500 12px/1.5 var(--mono); letter-spacing: 0.1em; color: var(--luce-testo); }
.passi b, .elenco-chiamata b { display: block; margin-bottom: 2px; color: var(--inchiostro); font-weight: 600; font-size: 17px; }
.azione { display: grid; justify-items: start; gap: 12px; margin-top: 40px; }
.pulsante-grande { min-height: 56px; padding: 0 28px; font-size: 16px; }
.sotto-pulsante { margin: 0; font-size: 14px; line-height: 1.45; color: var(--smorzato); }

/* fa per te / non fa per te */
.perchi { display: grid; gap: 12px; margin-top: 44px; }
.perchi-lato { padding: 26px 24px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--linea); }
.perchi-lato.si { background: rgb(123 116 255 / 0.08); }
.perchi-lato h3 { margin: 0 0 16px; font: 400 30px/1 var(--titoli); }
.perchi-lato.no h3 { font-style: italic; color: #d3d6e8; }
.perchi-lato ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.perchi-lato li { position: relative; padding-left: 32px; color: var(--tenue); font-size: 16px; line-height: 1.5; }
.perchi-lato li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/20px var(--testo); text-align: center; }
.perchi-lato.si li::before { content: "✓"; background: var(--grad); color: #0b0a1f; }
.perchi-lato.no li::before { content: "✕"; background: rgb(255 255 255 / 0.08); color: var(--smorzato); }

/* le regole */
.regole { margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.regole li { padding: 18px 0; border-bottom: 1px solid var(--linea); font: 400 clamp(24px, 6.2vw, 34px)/1.15 var(--titoli); color: var(--inchiostro); }
.limite { max-width: 46rem; margin-top: 38px; padding: 26px 24px; border-radius: 22px; background: rgb(255 255 255 / 0.035); box-shadow: inset 0 0 0 1px var(--linea); }
.limite h3 { margin: 0 0 12px; font: 400 30px/1 var(--titoli); font-style: italic; }
.limite p { margin: 0; color: var(--tenue); font-size: 16px; line-height: 1.6; }

/* la chat di prova */
.cuore-due { display: grid; gap: 44px; }
.chat { width: 100%; max-width: 460px; border-radius: 26px; overflow: hidden; background: #0d0b1f; box-shadow: inset 0 0 0 1px var(--linea), 0 30px 90px -30px rgb(0 0 0 / 0.85); }
.chat-testa { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--linea); font-size: 15px; }
.chat-testa .led { width: 8px; height: 8px; }
.chat-stato { margin-left: auto; padding: 5px 9px; border-radius: 999px; font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--luce-testo); box-shadow: inset 0 0 0 1px rgb(170 160 255 / 0.35); }
.chat-ia { margin: 0; padding: 10px 18px; background: rgb(123 116 255 / 0.13); font: 500 13px/1.4 var(--testo); color: var(--luce-testo); }
.chat-corpo { display: grid; align-content: center; justify-items: start; gap: 20px; min-height: 280px; padding: 40px 22px 32px; }
.chat-spenta { margin: 0; color: var(--tenue); font-size: 16px; line-height: 1.55; }
.chat-privacy { margin: 0; padding: 14px 18px 16px; border-top: 1px solid var(--linea); color: var(--smorzato); font-size: 12.5px; line-height: 1.45; }
.chat-privacy a { color: var(--tenue); }
.segnaposto-in { font: 500 12px/1.5 var(--mono); color: #d9b86c; }

/* perché esiste Sara: la storia di Giorgio */
.storia { display: grid; gap: 30px; }
.storia-testo, .storia-testa { max-width: 40rem; }
.storia-testa .titolo { margin-bottom: 0; }
.lettera { margin: 0; padding: 0; border: 0; display: grid; gap: 16px; font: 400 18px/1.62 var(--testo); color: var(--tenue); }
.lettera p { margin: 0; text-wrap: pretty; }
.promessa, .corpo, .strada p, .carta p { text-wrap: pretty; }
.lettera .attacco { font: 400 clamp(24px, 6.4vw, 32px)/1.2 var(--titoli); color: var(--inchiostro); }
.firma { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.firma-nome { display: grid; gap: 3px; }
.firma-nome b { margin-bottom: 4px; }
.firma-nome b { font: 400 30px/1 var(--titoli); font-style: italic; color: var(--inchiostro); font-weight: 400; }
.firma-nome span { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--smorzato); }
.firma-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 16px 2px rgb(140 120 255 / 0.7); }
.promessa { margin: 22px 0 0; padding: 18px 20px; border-radius: 18px; background: rgb(123 116 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(170 160 255 / 0.3); color: var(--inchiostro); font-size: 16px; line-height: 1.55; }
/* chi c'è dietro */
.foto-giorgio { margin: 0; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; max-height: 62svh; border-radius: 26px; overflow: hidden; }
.foto-giorgio { position: relative; background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.foto-giorgio img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 54% 40%; }
.foto-giorgio::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 70% at 100% 20%, rgb(123 116 255 / 0.22), transparent 60%), linear-gradient(to top, rgb(6 5 15 / 0.35), transparent 30%); mix-blend-mode: screen; }
.foto-segnaposto { display: grid; place-items: center; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; padding: 24px; border-radius: 26px; background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.035) 0 12px, transparent 12px 24px); box-shadow: inset 0 0 0 1px var(--linea); text-align: center; font: 500 12px/1.5 var(--mono); color: #d9b86c; }

/* domande */
.domande { margin-top: 38px; border-top: 1px solid var(--linea); }
.domande details { border-bottom: 1px solid var(--linea); }
.domande summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 0; list-style: none; cursor: pointer; font: 500 18px/1.35 var(--testo); color: var(--inchiostro); -webkit-tap-highlight-color: transparent; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 1.5px solid var(--luce-testo); border-bottom: 1.5px solid var(--luce-testo); transform: translateY(-3px) rotate(45deg); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.domande details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.domande details p { max-width: 44rem; margin: 0 0 14px; color: var(--tenue); font-size: 16px; line-height: 1.6; }
.domande details p:last-child { margin-bottom: 24px; }

/* il modulo */
.modulo { display: grid; gap: 20px; padding: 28px 22px; border-radius: 26px; background: rgb(255 255 255 / 0.035); box-shadow: inset 0 0 0 1px var(--linea); }
.campo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo > span, .campo legend { padding: 0; font: 500 14px/1.2 var(--testo); color: var(--inchiostro); }
.campo input { width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--linea); color: var(--inchiostro); font: 400 16px/1.2 var(--testo); }
.campo input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--luce); }
.campo small { color: var(--smorzato); font-size: 13px; line-height: 1.4; }
.errore-testo { color: #ffb3bd; font-size: 13px; }
.campo.errore input { box-shadow: inset 0 0 0 1.5px #ff8f9c; }
.scelta-sara { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta-sara legend { width: 100%; margin-bottom: 10px; float: left; }
.scelta-sara label { position: relative; }
.scelta-sara input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.scelta-sara span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); color: var(--tenue); font-size: 15px; }
.scelta-sara input:checked + span { background: var(--grad); color: #0b0a1f; box-shadow: none; font-weight: 600; }
.scelta-sara input:focus-visible + span { outline: 2px solid var(--luce); outline-offset: 2px; }
.scelta-sara.errore span { box-shadow: inset 0 0 0 1.5px #ff8f9c; }
.scelta-sara .errore-testo { width: 100%; }
.consenso { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; color: var(--tenue); font-size: 13px; line-height: 1.5; }
.consenso > span { flex: 1; min-width: 0; }
.consenso input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--luce); }
.consenso .errore-testo { flex-basis: 100%; }
.modulo .pulsante-grande { width: 100%; }
.modulo .sotto-pulsante { margin-top: -8px; text-align: center; }
.esito-modulo { margin: 0; min-height: 1.2em; color: var(--luce-testo); font-size: 14px; line-height: 1.45; }

/* piede */
.piede { margin-top: clamp(88px, 14vw, 168px); padding: 56px 20px calc(48px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); }
.piede-cuore { display: grid; gap: 12px; }
.piede-marchio { display: flex; align-items: center; gap: 9px; margin: 0; font: 500 22px/1 var(--testo); letter-spacing: -0.02em; }
.piede-marchio .led { width: 8px; height: 8px; }
.piede-sigla { margin: 0; color: var(--tenue); font-size: 14px; line-height: 1.5; }
.piede-sigla b { color: var(--inchiostro); font-weight: 600; }
.piede-link { margin: 4px 0 0; font-size: 14px; }

/* ---------- computer e schermi in orizzontale ---------- */
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  .ambiente { opacity: 1; }
  .testata { padding: 22px 32px; }
  .scena { left: max(40px, 6vw); right: auto; width: min(34vw, 520px); }
  .scena[data-pos] { top: 50%; bottom: auto; transform: translateY(-50%); }
  .scena h2 { font-size: clamp(48px, 5.4vw, 88px); }
  .scena .riga { font-size: 18px; }
  .apertura { left: max(40px, 6vw); right: auto; width: min(46vw, 660px); justify-items: start; text-align: left; padding: 0; }
  .apertura.via { transform: translateY(-26px); }
  .apertura h1 { font-size: clamp(72px, 7.2vw, 128px); max-width: none; }
  .apertura .riga { margin: 20px 0 0; font-size: 19px; max-width: 30rem; }
  .apertura .porte { justify-content: flex-start; width: auto; }
  .apertura .porta { flex: none; padding: 0 18px; }
  .velo-titolo { background: linear-gradient(90deg, rgb(6 5 15 / 0.9) 0%, rgb(6 5 15 / 0.62) 42%, rgb(6 5 15 / 0.12) 72%, rgb(6 5 15 / 0) 100%); }
  .velo-alto, .velo-basso { display: none; }
  /* i bordi del quadro sfumano nella luce intorno: niente taglio netto tra il film e lo sfondo */
  /* 11/10: a sinistra la sfumatura è più lunga (sul computer si vedeva il bordo del video, una riga più scura): lì nel
     video c'è solo il fondo; a destra resta corta, perché il robottino arriva quasi al bordo */
  .strati { -webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.3) 6%, rgb(0 0 0 / 0.72) 12%, rgb(0 0 0 / 0.94) 17%, #000 21%, #000 91%, transparent); mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.3) 6%, rgb(0 0 0 / 0.72) 12%, rgb(0 0 0 / 0.94) 17%, #000 21%, #000 91%, transparent); }
  .comandi { padding: 18px 32px 0; }
  .play { margin-top: 30px; }
  .qr-canali { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 18px; margin-top: 22px; }
  .qr-canali figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
  .qr-canali .qr { display: block; width: 116px; height: 116px; padding: 8px; border-radius: 14px; background: #fff; }
  .qr-canali .qr svg { display: block; width: 100%; height: 100%; }
  .qr-canali figcaption { font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--smorzato); }
  .qr-canali p { margin: 0; color: var(--smorzato); font-size: 13.5px; line-height: 1.5; max-width: 12rem; }
  .fs-cuore { left: 50%; top: 50%; right: auto; bottom: auto; width: min(600px, 92vw); padding: 44px 44px 38px; border-radius: 30px; transform: translate(-50%, -50%); animation: foglio-appare 0.4s ease; }
  @keyframes foglio-appare { from { opacity: 0; transform: translate(-50%, -46%); } }
  .fs-titolo { font-size: 60px; }
  .carte { grid-template-columns: repeat(2, 1fr); }
  .sezione { padding-inline: 40px; }
  .piede { padding-inline: 40px; }
  .strade { grid-template-columns: repeat(3, 1fr); }
  .strada-sara { grid-column: 1 / -1; padding: 36px 34px; }
  .strada-sara h4 { font-size: 46px; }
  .strada-sara p { max-width: 46rem; font-size: 18px; }
  .bivio, .perchi { grid-template-columns: 1fr 1fr; }
  .cuore-due { grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
  .storia { grid-template-columns: minmax(280px, 0.8fr) 1.2fr; grid-template-rows: auto 1fr; align-items: start; column-gap: 80px; row-gap: 30px; }
  .storia-testa { grid-column: 2; grid-row: 1; }
  .storia-testo { grid-column: 2; grid-row: 2; }
  .storia .foto-giorgio { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 110px; max-height: none; }
  .corpo { font-size: 18px; }
}
/* ---------- telefono: niente vetro sfocato sopra il film in movimento (all'iPhone costa ogni fotogramma), fondi pieni ---------- */
@media (max-width: 899px) and (orientation: portrait), (max-width: 559px) {
  .notifica, .avviso, .bolla, .scheda, .pulsante-vetro, .salta-film { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .salta-film { background: rgb(20 16 48 / 0.55); }
  .notifica { background: rgb(22 18 50 / 0.9); }
  .avviso { background: rgb(20 16 48 / 0.95); }
  .bolla { background: rgb(38 32 78 / 0.9); }
  .bolla.sara { background: linear-gradient(110deg, rgb(91 151 255), rgb(160 118 255)); }
  .scheda { background: rgb(20 16 48 / 0.95); }
  .pulsante-vetro { background: rgb(24 22 52 / 0.82); }
  .grana { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grana, .led, .scorri::after, .avviso.invita .parola::before, .invito .punto, .play::after, .play.carica .play-icona::after { animation: none; }
  .tenda { transition: opacity 0.4s; }
  .tenda.via { clip-path: none; opacity: 0; }
  .sigla .iniziale, .sigla .resto { transition: none; opacity: 1; transform: none; clip-path: none; }
}
@media (min-width: 1200px) { .carte { grid-template-columns: repeat(4, 1fr); } }
/* 1/10: quello che non si vede non prende il fuoco della tastiera */
.comandi { visibility: hidden; transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s; }
.comandi.su { visibility: visible; transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s; }
.testata.nascosta { visibility: hidden; transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s; }
.apertura.via { visibility: hidden; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease, visibility 0s linear 0.9s; }
.scena:not(.attiva) { visibility: hidden; }
.capitolo { padding: 11px 0; }
.fs-cuore { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 900px) { .fs-cuore { max-height: 92vh; max-height: 92dvh; } }
@media (pointer: coarse) { .qr-canali { display: none !important; } }
/* se un pezzo del film non arriva: un avviso con «Riprova» */
.guasto { position: absolute; z-index: 8; left: 50%; top: 50%; width: min(86%, 340px); transform: translate(-50%, -50%); padding: 22px 22px 20px; border-radius: 22px; background: rgb(14 11 34 / 0.92); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 20px 60px rgb(0 0 0 / 0.5); text-align: center; color: var(--inchiostro); font: 400 16px/1.45 var(--testo); }
.guasto p { margin: 0 0 14px; }
.guasto[hidden] { display: none; }

/* ================= versione 12 (2/10): Sara si candida ================= */
.apertura h1 em { display: block; }
/* 15/10 (Giorgio: la presentazione non si salta): come dal 3/10, finché non si sceglie e non si vede la presentazione c'è
   solo il primo schermo e non si scende. La classe la mette il JavaScript e la toglie alla fine della presentazione, o se
   non si carica o resta ferma («Salta la presentazione»). Senza JavaScript la classe non c'è e si vede tutto. */
html.da-scegliere .dopo { display: none !important; }
html.da-scegliere .film { height: var(--alto, 100svh) !important; }
html.da-scegliere .scorri { display: none !important; }
/* 11/10 · «Oppure leggi»: dal 15/10 c'è solo per chi ha già visto tutta la presentazione */
.leggi-prima { position: absolute; right: 16px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgb(108 92 255 / 0.24); box-shadow: inset 0 0 0 1px rgb(190 180 255 / 0.6); color: #fff; font: 600 11.5px/13px var(--testo); text-decoration: none; white-space: nowrap; transition: opacity 0.4s ease; }
/* 11/10 sera (dalla revisione esterna): si vede che è un link (viola, non grigio come il cartellino accanto) e si tocca
   anche intorno; sul telefono, sopra, solo fin dove comincia la zona di «Sara su misura» */
.leggi-prima::after { content: ""; position: absolute; inset: -5px -10px -8px; }
.leggi-prima span { display: inline-block; animation: leggi-giu 1.8s ease-in-out infinite; }
@keyframes leggi-giu { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.apertura.via .leggi-prima { opacity: 0; pointer-events: none; }
.apertura.senza-leggi .leggi-prima { display: none; }
@media (prefers-reduced-motion: reduce) { .leggi-prima span { animation: none; } }
/* sul computer sta sotto il telefono del film, sul pavimento, al centro (sara.js scrive --leggi-x): fuori dal flusso e
   lontano dalla colonna del testo, così si vede anche sui portatili con lo schermo basso */
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) { .leggi-prima { left: var(--leggi-x, 75%); right: auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 7px 14px; font-size: 13px; line-height: 15px; } .leggi-prima::after { inset: -10px -12px; } }
@media (orientation: landscape) and (max-height: 560px) { .leggi-prima { display: none; } }   /* telefono girato: non c'è posto, si scende col dito */
/* ================= versione 11 (1/10 sera): le domande ================= */
.domanda { margin: 30px 0 0; max-width: 30rem; font: italic 400 clamp(26px, 6.6vw, 36px)/1.18 var(--titoli); color: var(--inchiostro); text-wrap: balance; }
.domanda + .corpo { margin-top: 18px; }
.conclusione { margin: 30px 0 0; max-width: 34rem; padding-left: 18px; border-left: 2px solid var(--luce); font: 500 19px/1.5 var(--testo); color: var(--inchiostro); }
.modi { display: grid; gap: 18px; margin-top: 4px; max-width: 40rem; }
.modi p { margin: 0; color: var(--tenue); font-size: 17px; line-height: 1.6; }
.modi b { color: var(--inchiostro); font-weight: 600; }
#sara .nota-forte { margin-top: 26px; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) { .domanda { font-size: clamp(32px, 3vw, 44px); } .modi p { font-size: 18px; } }
/* ================= versione 10 (1/10) ================= */
html[data-chi="vendita"] [data-per="appuntamenti"], html:not([data-chi="vendita"]) [data-per="vendita"] { display: none !important; }
.sr-solo { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* la tenda: il nome e una linea, poi via (al massimo 0,6 s; senza JavaScript sparisce da sola) */
.tenda { transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1); animation: tenda-via 0.4s ease 5s forwards; }
@keyframes tenda-via { to { opacity: 0; visibility: hidden; } }

.tenda-marchio { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 500 34px/1 var(--testo); letter-spacing: -0.02em; }
.tenda-marchio .led { width: 10px; height: 10px; }
.tenda-piede { grid-template-columns: 1fr; }
/* primo schermo: titolo in alto, la scelta in basso sotto il pollice */
.scorri { display: none; }
.apertura { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 76px) 18px calc(env(safe-area-inset-bottom, 0px) + 14px); }
.testa-apertura { display: grid; justify-items: center; }
.apertura h1 { font-size: clamp(42px, 12.2vw, 84px); }
.apertura .riga { margin: 14px auto 0; max-width: 22.5rem; font-size: 16px; color: #dfe1f2; }
.scelta-film { display: grid; gap: 10px; width: min(100%, 420px); }
.invito-film { margin: 0; font: 500 13.5px/1.4 var(--testo); color: var(--inchiostro); }
.due-play { display: grid; gap: 10px; }
.play.scelta { margin: 0; width: 100%; min-height: 62px; justify-content: flex-start; gap: 12px; padding: 8px 16px 8px 10px; border-radius: 20px; text-align: left; background: rgb(16 13 40 / 0.86); color: var(--inchiostro); box-shadow: inset 0 0 0 1px rgb(170 160 255 / 0.5), 0 14px 40px rgb(60 40 180 / 0.28); }
.play.scelta::after { display: none; }
.play.scelta .play-icona { flex: none; background: var(--grad); }
.play.scelta .play-icona::before { border-left-color: #0b0a1f; }
.play.scelta.carica .play-icona { background: conic-gradient(#b3b8ff calc(var(--carico, 0) * 360deg), rgb(255 255 255 / 0.14) 0); }
/* 15/10 sera: mentre il film arriva, un arco gira intorno al cerchio: anche quando la rete non ha ancora dato niente si vede
   che sta caricando (prima, a zero, il cerchio sembrava fermo) */
.play.carica .play-icona { position: relative; }
.play.carica .play-icona::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #b3b8ff; animation: gira 0.9s linear infinite; pointer-events: none; }
.play-testo { display: grid; gap: 3px; }
.play-testo b { font: 600 17px/1.2 var(--testo); }
.play-testo small { font: 400 13px/1.3 var(--testo); color: var(--tenue); }
@media (hover: hover) { .play.scelta:hover { box-shadow: inset 0 0 0 1.5px rgb(190 180 255 / 0.9), 0 14px 46px rgb(80 60 220 / 0.4); } }
.altre-sara { margin: 0; font-size: 13.5px; line-height: 1.3; color: var(--tenue); }
.altre-sara a { display: inline-block; padding: 12px 2px; color: var(--inchiostro); font-weight: 600; text-decoration: none; }
/* 5.2: la riga piccola ha due voci, «Segui degli studenti? Sara Coach» e «Hai un'altra idea? Sara su misura». Va a capo solo
   fra le due (sul telefono una sotto l'altra, senza il puntino); i link restano grandi da toccare senza alzare la riga. */
.altre-sara .altra { display: inline-block; white-space: nowrap; }
.altre-sara .altra a { position: relative; display: inline; padding: 0 2px; }
.altre-sara .altra a::after { content: ""; position: absolute; inset: -12px -8px; }
/* 11/10 (dalla revisione esterna): sul telefono le due righe stanno una sopra l'altra e la zona da toccare di «Sara su
   misura» copriva metà di «Sara Coach» (toccando Coach si apriva Su misura). Ognuna ora si ferma a metà dello spazio fra
   le due righe, e lo spazio è un po' più largo */
@media (max-width: 899px) and (orientation: portrait), (max-width: 559px) {
  .altre-sara .sep { display: none; }
  .altre-sara .altra { display: block; }
  .altre-sara .altra ~ .altra { margin-top: 12px; }   /* «~»: fra le due c'è il punto «·» (nascosto), e «+» non le prendeva */
  .altre-sara .altra a::after { inset: -6px -10px; }
}
@media (max-width: 899px) and (orientation: portrait), (max-width: 559px) {
  .velo-titolo { background: linear-gradient(180deg, rgb(6 5 15 / 0.9) 0%, rgb(6 5 15 / 0.62) 30%, rgb(6 5 15 / 0.12) 47%, rgb(6 5 15 / 0.5) 62%, rgb(6 5 15 / 0.94) 100%); }
}
@media (max-width: 899px) and (max-height: 720px) {
  .apertura { padding-top: calc(env(safe-area-inset-top, 0px) + 66px); }
  .apertura h1 { font-size: clamp(38px, 10.6vw, 46px); }
  .apertura .riga { margin-top: 10px; font-size: 15px; line-height: 1.42; }
  .play.scelta { min-height: 56px; }
  .scelta-film { gap: 8px; }
}
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  .apertura { justify-content: center; align-items: flex-start; padding: 0; }
  .testa-apertura { justify-items: start; }
  .apertura h1 { font-size: clamp(64px, 6.2vw, 100px); }
  .apertura .riga { margin: 20px 0 0; font-size: 19px; max-width: 30rem; }
  .scelta-film { margin-top: 38px; width: min(100%, 640px); }
  .due-play { grid-template-columns: 1fr 1fr; }
}
/* 3/10: sui computer con lo schermo basso il titolo saliva fino al marchio «sara» in alto. Lì il primo schermo lascia
   libera la fascia del marchio, e il titolo si rimpicciolisce quanto serve perché tutto stia nello schermo
   (il conto: il titolo ha al massimo quattro righe, il resto del primo schermo è alto circa 330px, 300px sotto i 700px) */
@media (min-width: 900px) and (max-height: 860px) {
  .apertura { padding: 72px 0 18px; }
  .apertura h1 { font-size: clamp(46px, min(6.2vw, calc((var(--alto, 100svh) - 422px) / 3.84)), 100px); }
}
@media (min-width: 900px) and (max-height: 700px) {
  .apertura .occhiello { margin-bottom: 12px; }
  .apertura .riga { margin-top: 14px; font-size: 17px; }
  .scelta-film { margin-top: 24px; }
  .apertura h1 { font-size: clamp(46px, min(6.2vw, calc((var(--alto, 100svh) - 387px) / 3.84)), 100px); }
}
/* finestre strette e basse insieme (sotto i 960px di larghezza): la colonna è stretta e il resto va più a capo */
@media (min-width: 900px) and (max-width: 959px) and (max-height: 700px) {
  .apertura h1 { font-size: 46px; }
}
/* 11/10 sera (dalla revisione esterna e dalle prove a misure strane). Il primo schermo deve starci sempre, coi due pulsanti
   e i link sotto il pollice:
   - telefoni stretti (320px: iPhone SE vecchi, o «zoom schermo» acceso): la sigla su una riga, le righe lunghe vanno a capo
     invece di allargare la colonna oltre lo schermo;
   - telefoni bassi (iPhone SE in Safari, 375×553) e telefoni girati: se non ci sta, sara.js toglie la presentazione sotto
     il titolo (.stretta) e, se non basta, la riga sopra i pulsanti (.strettissima);
   - telefono girato: sigla piccola, titolo su tre righe, pulsanti più bassi e senza la spiegazione piccola, e in basso il
     posto per il cartellino «Sara è un'intelligenza artificiale». */
.scelta-film { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 379px) { .apertura .occhiello { font-size: 10px; letter-spacing: 0.12em; } }
@media (max-width: 359px) {
  .altre-sara .altra { white-space: normal; }
  .altre-sara .altra a { white-space: nowrap; }
}
.apertura.stretta .riga { display: none; }
.apertura.strettissima .invito-film { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .apertura { left: max(28px, 5vw, calc(env(safe-area-inset-left, 0px) + 14px)); width: min(52vw, 560px); padding: 64px 0 calc(env(safe-area-inset-bottom, 0px) + 42px); }
  .apertura .occhiello { margin-bottom: 8px; font-size: 10px; letter-spacing: 0.14em; }
  .apertura .riga { margin-top: 8px; font-size: 14.5px; line-height: 1.4; max-width: none; }
  .scelta-film { margin-top: 14px; gap: 6px; width: 100%; }
  .invito-film { font-size: 12.5px; line-height: 1.35; }
  .due-play { gap: 8px; }
  .play.scelta { min-height: 46px; padding: 5px 12px 5px 7px; border-radius: 16px; }
  .play.scelta .play-icona { width: 32px; height: 32px; }
  .play-testo small { display: none; }
  .play-testo b { font-size: 15.5px; }
  .altre-sara { font-size: 12.5px; }
  /* le due righe una sotto l'altra, con le zone da toccare che non si sovrappongono (come sul telefono dritto) */
  .altre-sara .sep { display: none; }
  .altre-sara .altra { display: block; }
  .altre-sara .altra ~ .altra { margin-top: 10px; }
  .altre-sara .altra a::after { inset: -5px -10px; }
}
/* le sezioni: la scelta della versione */
.sezione-versione { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
@media (min-width: 900px) { .sezione-versione { padding-top: 104px; } }
.versione { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.versione > p:first-child { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--smorzato); }
.versione-scelte { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px var(--linea); }
.versione-scelte button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--tenue); font: 500 14.5px/1 var(--testo); cursor: pointer; }
.versione-scelte button[aria-pressed="true"] { background: var(--inchiostro); color: #0b0a1f; font-weight: 600; }
.sezione-problema { padding-top: clamp(64px, 10vw, 120px); }
.mestieri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; }
.mestieri span { margin-right: 4px; font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--smorzato); }
.mestieri button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.07); color: var(--tenue); box-shadow: inset 0 0 0 1px var(--linea); font: 500 14.5px/1 var(--testo); cursor: pointer; }
.mestieri button[aria-pressed="true"] { background: var(--grad); color: #0b0a1f; box-shadow: none; font-weight: 600; }
.note-es { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 42rem; }
.note-es li { position: relative; padding-left: 28px; color: var(--tenue); font-size: 16px; line-height: 1.5; }
.note-es li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--luce-testo); font-weight: 700; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  .vedi { grid-template-columns: 380px 380px; gap: 32px; align-items: start; }
  .vedi-uno { grid-template-columns: 380px minmax(0, 30rem); align-items: center; gap: 48px; }
}
/* domande: sei in vista, le altre col pulsante */
.domande details.in-piu { display: none; }
.altre-domande { margin-top: 18px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--linea); color: var(--inchiostro); font: 600 14.5px/1 var(--testo); cursor: pointer; }
.altre-domande[hidden] { display: none; }
/* tutte le Sara */
.sezione-tutte { padding-top: clamp(64px, 10vw, 110px); }
.tutte { display: grid; gap: 10px; }
.tutte button { display: grid; gap: 4px; justify-items: start; min-height: 64px; padding: 14px 18px; border: 0; border-radius: 18px; background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px var(--linea); color: var(--inchiostro); text-align: left; cursor: pointer; }
.tutte b { font: 600 16px/1.2 var(--testo); }
.tutte span { color: var(--smorzato); font-size: 14px; }
@media (hover: hover) { .tutte button:hover { box-shadow: inset 0 0 0 1px rgb(170 160 255 / 0.55); } }
@media (min-width: 900px) { .tutte { grid-template-columns: repeat(4, 1fr); } }
/* il pannello: la riga per Coach e Su misura */
.foglio-sara [data-motivo-solo] { display: none; }
/* 11/10 · il tasto pronto da accendere (Fase 3). Col pannello in attesa si vede solo il testo dell'attesa; acceso
   (data-stato="acceso" in index.html e il link di Telegram in config.js) la riga per la versione, il tasto di Telegram e,
   sul computer, il codice QR. Fuori dal pannello, vicino ai tasti, «Si apre Telegram» compare solo quando è acceso. */
.foglio-sara[data-stato="attesa"] .solo-acceso { display: none !important; }
.foglio-sara[data-stato="acceso"] .fs-attesa { display: none; }
/* 11/10 sera (dalla revisione esterna): dovunque nella pagina, quello che promette una risposta subito c'è solo con Sara
   accesa (.solo-acceso); al suo posto, finché è in attesa, la versione onesta (.solo-attesa) */
html:not(.sara-accesa) .solo-acceso { display: none !important; }
html.sara-accesa .solo-attesa { display: none !important; }
.foglio-sara[data-motivo="coach"] .fs-riga:not([data-motivo-solo="coach"]), .foglio-sara[data-motivo="misura"] .fs-riga:not([data-motivo-solo="misura"]) { display: none !important; }
.foglio-sara[data-motivo="coach"] [data-motivo-solo="coach"], .foglio-sara[data-motivo="misura"] [data-motivo-solo="misura"] { display: block; }
/* ===== 6/10 · il banner «Sara è un'intelligenza artificiale» (docs/RINNOVO-2026-10-06.md, 5.8) =====
   Sempre visibile, in ogni pagina, anche durante il film. Non si chiude e non copre testi e tasti: lascia lo spazio sotto. */
.banner-ai { position: fixed; z-index: 19; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 16px; background: rgb(6 5 15 / 0.97); box-shadow: 0 -1px 0 var(--linea); }
.banner-ai-testo { font: 500 13.5px/1.25 var(--testo); color: var(--inchiostro); }
.banner-ai .banner-ai-tasto { flex: none; min-height: 40px; padding: 0 16px; font-size: 14px; }
/* sui telefoni stretti (360) la frase resta su una riga: un poco più piccola, e il tasto un poco più stretto */
@media (max-width: 379px) { .banner-ai .banner-ai-testo { font-size: 12px; } .banner-ai .banner-ai-tasto { padding: 0 12px; font-size: 13.5px; } }
/* sul primo schermo e durante il film: discreto, in un angolo, senza tasto */
.banner-ai.angolo { left: 16px; right: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 4px 10px; border-radius: 999px; background: rgb(6 5 15 / 0.8); box-shadow: inset 0 0 0 1px var(--linea); }
.banner-ai.angolo .banner-ai-testo { font-size: 11.5px; line-height: 13px; color: var(--tenue); }
.banner-ai.angolo .banner-ai-tasto { display: none; }
.testata-ai { display: none; }
@media (max-width: 899px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  html.da-scegliere body { padding-bottom: 0; }
  .scena[data-pos="basso"] { bottom: calc(38px + env(safe-area-inset-bottom, 0px)); }
  .apertura { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
}
@media (min-width: 900px) {
  /* sul computer: nella testata; durante il film, quando la testata si nasconde, discreto in un angolo */
  .testata-ai { display: inline; font: 500 13px/1 var(--testo); color: var(--tenue); }
  .banner-ai { display: none; }
  .banner-ai.angolo { display: flex; left: 32px; bottom: 24px; }
  /* nelle altre pagine (privacy, 404): dentro la testata, che resta fissa in alto (pagine.css), come nella home */
  .banner-ai.banner-pagina { display: flex; position: static; gap: 14px; padding: 0; background: none; box-shadow: none; }
  .banner-pagina .banner-ai-testo { font: 500 13px/1 var(--testo); color: var(--tenue); }
  .banner-ai.banner-pagina .banner-ai-tasto { min-height: 38px; padding: 0 15px; font-size: 13px; }
}
@media (max-width: 899px) {
  html.con-barra .testata .apri-sara { opacity: 0; pointer-events: none; }
}
/* la foto di Giorgio, sul telefono, più piccola: la lettera arriva prima */
@media (max-width: 899px) { .foto-giorgio { max-width: 250px; } }
/* scritte piccole un po' più grandi, e meno grassetti */
.dopo .occhiello, .sottotitolo, .scrivile-dove { font-size: 12.5px; }
.lettera strong, .lettera .evidenza { font-weight: inherit; color: inherit; background: none; }
@media (prefers-reduced-motion: reduce) { .tenda { transition: opacity 0.3s; } .ce-scrive i { animation: none; } }

/* ===== Fase 2 · la home (docs/RINNOVO-2026-10-06.md, 5.2) =====
   La candidatura: una lettera vera, firmata, nella stessa grafica del sito (le carte come «Se ti convinco», i caratteri
   e i colori di sempre). Poi «Cosa faccio per te» e «Le mie regole». */
.lettera-sara { position: relative; display: grid; gap: 16px; margin: 38px 0 0; max-width: 42rem; padding: 30px 24px 28px; border-radius: 22px; background: rgb(255 255 255 / 0.035); box-shadow: inset 0 0 0 1px var(--linea); font: 400 17px/1.62 var(--testo); color: var(--tenue); }
.lettera-sara::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--grad); opacity: 0.7; }
.lettera-sara p { margin: 0; text-wrap: pretty; }
.lettera-sara b { color: var(--inchiostro); font-weight: 600; }
.lettera-sara .ls-saluto { margin-bottom: -2px; font: 400 30px/1.1 var(--titoli); font-style: italic; color: var(--inchiostro); }
.lettera-sara .ls-congedo { margin-top: 10px; }
.lettera-sara .ls-firma { margin-top: -10px; font: 400 58px/1 var(--titoli); font-style: italic; letter-spacing: -0.01em; }
.lettera-sara .ls-firma .grad { padding: 0 0.1em 0.12em 0; }
.lettera-sara .ls-ps { margin-top: 6px; padding-top: 16px; border-top: 1px dashed var(--linea); font-size: 15.5px; line-height: 1.55; }
.mansioni { margin: 0; padding: 0; list-style: none; max-width: 40rem; border-bottom: 1px solid var(--linea); }
.mansioni li { position: relative; padding: 15px 0 15px 26px; border-top: 1px solid var(--linea); color: var(--tenue); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.mansioni li::before { content: ""; position: absolute; left: 2px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px 1px rgb(140 120 255 / 0.55); }
.link-pagina { margin: 22px 0 0; }
.link-pagina a { color: var(--inchiostro); font-weight: 600; font-size: 16px; text-decoration: underline; text-decoration-color: rgb(179 184 255 / 0.5); text-underline-offset: 5px; }
.link-pagina a::after { content: "  →"; color: var(--luce-testo); }
.link-pagina a:hover { text-decoration-color: var(--luce-testo); }
.mie-regole { counter-reset: regola; margin: 38px 0 0; padding: 0; list-style: none; max-width: 44rem; border-bottom: 1px solid var(--linea); }
.mie-regole li { counter-increment: regola; position: relative; padding: 22px 0 22px 54px; border-top: 1px solid var(--linea); color: var(--tenue); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.mie-regole li::before { content: counter(regola, decimal-leading-zero); position: absolute; left: 0; top: 27px; font: 500 12px/1.5 var(--mono); letter-spacing: 0.1em; color: var(--luce-testo); }
.mie-regole b { display: block; margin-bottom: 6px; font: 400 clamp(26px, 6.6vw, 34px)/1.1 var(--titoli); color: var(--inchiostro); }
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  .lettera-sara { margin-top: 48px; padding: 48px 56px 40px; font-size: 18px; }
  .lettera-sara::before { left: 56px; right: 56px; }
  .lettera-sara .ls-saluto { font-size: 36px; }
  .lettera-sara .ls-firma { font-size: 68px; }
  .mansioni li, .mie-regole li { font-size: 18px; }
}

/* il segnaposto visibile per i testi da approvare (blocca la pubblicazione: controlla.mjs --lancio) */
.da-chiedere { color: #ffd479; background: rgb(255 212 121 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 212 121 / 0.35); border-radius: 6px; padding: 0 0.25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }