/* ==========================================================================
   HOME v2 · tre atti: IL QUADRO (accensione e diario dal 1999),
   LA NOTTURNA (la carta di notte, a tutto schermo), IL GARAGE (tutto il resto).
   ========================================================================== */
:root{--alto:calc(100svh - 58px - var(--top))}

/* ---------------- ATTO 1 · IL QUADRO ---------------- */
.atto-quadro{padding:0;overflow:visible}
.atto-quadro::after{display:none}
.q-palco{position:sticky;top:calc(var(--top) + 58px);height:var(--alto);min-height:31rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.5rem,1.8vh,1.3rem);padding:.8rem var(--gutter) 1rem;overflow:hidden;isolation:isolate;z-index:1}
.q-palco::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 45%,rgba(11,12,14,.25),rgba(11,12,14,.94) 72%)}
.q-palco .cr-strada{opacity:.55}
.q-testa{display:grid;gap:.35rem;text-align:center;justify-items:center}
.q-testa .cr-h1{justify-content:center;font-size:clamp(2.3rem,10vw,6.4rem);white-space:nowrap;flex-wrap:nowrap}
.atto-quadro .quadro{width:min(100%,1000px,calc((var(--alto) - 260px) * 2.27));max-width:none;flex:none}
.atto-quadro .cr-comandi{justify-content:center}
.tft-m1{fill:#8FB7C9;font:700 18px var(--f-display);letter-spacing:.12em;text-anchor:middle;transition:fill .6s}
.tft-m2{fill:#F4EFE3;font:700 23px var(--f-display);letter-spacing:.1em;text-anchor:middle;transition:fill .6s}
.cruscotto[data-stato="spento"] .tft-m1,.cruscotto[data-stato="spento"] .tft-m2{fill:#2f343a}
.odo{transition:opacity .45s}
.odo.spento{opacity:.18}
.tft-trip-r{opacity:.1;transition:opacity .6s}
.tft-trip-r.on{opacity:1}
/* le schede del diario scorrono sopra (telefono) o accanto (computer) al quadro */
.q-scorre{position:relative;z-index:2;margin-top:calc(-1 * var(--alto));padding:calc(var(--alto) + 2svh) var(--gutter) 34svh;display:grid;gap:44svh;justify-items:center;pointer-events:none}
.diario{list-style:none;margin:0;padding:0;display:grid;gap:44svh;width:100%;justify-items:center}
.voce-card{pointer-events:auto;width:100%;max-width:31rem;background:rgba(12,14,17,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #2c3137;border-radius:14px;padding:1.05rem 1.15rem 1.15rem;color:#EEE8DA;box-shadow:0 18px 40px rgba(0,0,0,.45);display:grid;gap:.5rem;transition:border-color .4s,transform .4s}
.voce.attiva .voce-card{border-color:var(--mezzeria);box-shadow:0 0 0 1px rgba(242,182,27,.25),0 18px 40px rgba(0,0,0,.45)}
.voce-card time{font:700 .8rem/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--mezzeria)}
.voce-card h3{font-size:clamp(1.35rem,3.6vw,1.75rem);color:#fff}
.voce-card blockquote{margin:0;font:italic 400 1.06rem/1.6 var(--f-read);border-left:3px solid var(--mezzeria);padding-left:.85rem;overflow-wrap:break-word}
.voce-card .fonte{font:500 .74rem/1.3 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:#A9A395}
.voce-card .btn{justify-self:start;margin-top:.3rem;font-size:.9rem;padding:.65rem .95rem}
.voce-card .leggi{color:#D9D2C3;font-size:1.04rem}
.voce-card .leggi strong{color:#fff}
.q-intro .cr-citazione{margin:0}
.scorri-giu{font:700 .78rem/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--mezzeria)}
.storia-t h2,.storia-t h3{font-size:clamp(1.6rem,4.6vw,2.3rem);color:#fff}
.q-fine .btns{gap:.6rem}
@media (min-width:1000px){
  .q-palco{align-items:flex-start;padding-left:calc(var(--gutter) + 1vw)}
  .q-testa{text-align:left;justify-items:start}
  .q-testa .cr-h1{justify-content:flex-start;font-size:clamp(3rem,6.2vw,6.4rem)}
  .atto-quadro .quadro{width:min(54vw,1000px,calc((var(--alto) - 250px) * 2.27))}
  .atto-quadro .cr-comandi{justify-content:flex-start}
  .q-scorre{padding-left:calc(60vw + 1.5rem);gap:26svh;justify-items:start}
  .diario{gap:26svh;justify-items:start}
  .voce-card{max-width:min(31rem,36vw)}
}

/* ---------------- ATTO 2 · LA NOTTURNA ---------------- */
.atto-notte{position:relative;background:#0d1820;color:#EEE8DA}
.n-palco{position:sticky;top:calc(var(--top) + 58px);height:var(--alto);min-height:28rem;overflow:hidden;z-index:1;background:#0d1820}
.n-cielo{position:absolute;inset:0;background:linear-gradient(180deg,#04060a 0%,#0a1520 30%,#0d1820 60%)}
canvas.n-carta{position:absolute;left:0;display:block;will-change:transform;transition:none}
.n-vignetta{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,6,10,.9) 0%,rgba(4,6,10,0) 20%,rgba(4,6,10,0) 78%,rgba(4,6,10,.55) 100%)}
.n-tappe{list-style:none;margin:calc(-1 * var(--alto)) 0 0;padding:0 0 46svh;position:relative;z-index:2;pointer-events:none}
.n-tappa{min-height:105svh;display:flex;align-items:flex-end;justify-content:center;padding:0 12px 5svh}
.n-tappa:first-child{min-height:125svh}
.n-card{pointer-events:auto;width:100%;max-width:31rem;background:rgba(8,11,14,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(242,182,27,.25);border-radius:14px;padding:1.05rem 1.15rem 1.2rem;box-shadow:0 18px 40px rgba(0,0,0,.5);display:grid;gap:.7rem}
.n-card .occhiello{color:var(--mezzeria)}
.n-card h2{font-size:clamp(1.7rem,5.2vw,2.6rem);line-height:.95;color:#fff}
.n-card .leggi{color:#D9D2C3;font-size:1.03rem}
.n-card .leggi strong,.n-card .leggi b{color:#fff}
.n-card .legenda-scie a{color:#EEE8DA}
.n-emblema{display:grid;grid-template-columns:minmax(7rem,9.5rem) minmax(0,1fr);gap:1rem;align-items:start}
.n-emblema .sagoma{max-width:none}
.n-emblema .sagoma .timbro{width:44%;right:-.6rem;bottom:.6rem}
.n-emblema .leggi{font-size:.98rem}
.n-passione img{border-radius:10px;width:100%;aspect-ratio:16/8;object-fit:cover}
.n-citazione .n-card{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;max-width:46rem;text-align:center;justify-items:center}
.n-cit{margin:0;font:italic 400 clamp(1.35rem,4.2vw,2.35rem)/1.38 var(--f-read);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 28px rgba(0,0,0,.9)}
.n-cit cite{display:block;margin-top:.9rem;font:700 1rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--mezzeria);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.n-citazione{align-items:center}
@media (min-width:900px){
  .n-tappa{justify-content:flex-start;align-items:center;padding:0 var(--gutter) 4svh}
  .n-card{max-width:29rem}
  .n-citazione{justify-content:center}
}

/* ---------------- ATTO 3 · IL GARAGE ---------------- */
.garage{background:var(--asfalto);color:var(--su-asfalto);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem)}
.garage-occ{color:var(--su-asfalto-2);margin-bottom:1.2rem}
.bento{display:grid;gap:12px;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense}
.t{grid-column:span 12;background:#1d2126;border:1px solid #2c3137;border-radius:18px;overflow:hidden;position:relative;color:#EEE8DA;padding:clamp(1.1rem,2.4vw,1.6rem);display:grid;gap:.8rem;align-content:start;transition:transform .25s,border-color .25s}
.t:hover{border-color:#4a5058}
.t .occhiello{color:#A9A395}
.t h2,.t h3{color:#fff}
.t .leggi{color:#D9D2C3;font-size:1.02rem}
.t .leggi strong,.t .leggi b{color:#fff}
.t .btn-linea{color:#EEE8DA}
/* interruttori: modalita' di guida */
.t-modi h2,.t-modi h3,.t-modi p:not(.occhiello):not(.nota-modi){font-size:clamp(1.7rem,4vw,2.6rem);line-height:.95;color:#fff;font-family:var(--f-display);text-transform:uppercase}
.modi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:.6rem}
.modo{display:flex;align-items:center;gap:.8rem;text-align:left;background:#121418;border:1px solid #2c3137;border-radius:12px;padding:.9rem 1rem;color:#C9C3B6;font:700 1.08rem/1.1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .25s}
.modo .led{flex:none;width:12px;height:12px;border-radius:50%;background:#2a3a30;box-shadow:none;transition:all .25s}
.modo[aria-pressed="true"]{color:#fff;border-color:var(--spia-verde);background:#14201a}
.modo[aria-pressed="true"] .led{background:var(--spia-verde);box-shadow:0 0 12px var(--spia-verde)}
.nota-modi{font:500 .78rem/1.3 var(--f-ui);color:#8d8a82}
/* servizi */
.t-servizi{grid-template-columns:1fr}
.t-servizi ol{list-style:none;margin:.4rem 0 1rem;padding:0;display:grid;gap:1rem;counter-reset:s}
.t-servizi li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem}
.t-servizi li>*{grid-column:2}
.t-servizi li::before{grid-column:1;grid-row:1/span 3;counter-increment:s;content:counter(s);font:700 2.4rem/1 var(--f-display);color:transparent;-webkit-text-stroke:1px var(--mezzeria)}
.t-servizi li p{font:400 1rem/1.55 var(--f-read);color:#D9D2C3}
.t-servizi li strong{color:#fff}
.t-servizi img{border-radius:12px;width:100%;aspect-ratio:4/3;object-fit:cover}
.t-servizi h2,.t-servizi h3{font-size:clamp(1.6rem,3.8vw,2.3rem);line-height:1}
/* tessere con foto */
.t-foto,.t-manifesto,.t-vicino{padding:0;min-height:22rem;align-content:end}
.t-foto>img,.t-manifesto>img,.t-vicino>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.t-foto:hover>img,.t-manifesto:hover>img,.t-vicino:hover>img{transform:scale(1.05)}
.t-foto::after,.t-manifesto::after,.t-vicino::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,0) 25%,rgba(10,11,13,.82) 72%,rgba(10,11,13,.95))}
.t-c{position:relative;z-index:1;padding:clamp(1.1rem,2.4vw,1.5rem);display:grid;gap:.5rem}
.t-c h3{font-size:clamp(1.35rem,3vw,1.75rem)}
.t-c p,.t-c .leggi{font:400 1rem/1.5 var(--f-read);color:#E6E0D3}
.t-c .btn{justify-self:start;font-size:.88rem;padding:.6rem .9rem}
.t-manifesto h3{font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1}
.t-vicino h2{font-size:clamp(2rem,6vw,3.6rem);line-height:.95}
/* libretto (FAQ) e IA */
.t-faq .titolo-faq h2,.t-faq .titolo-faq h3{font-size:clamp(1.8rem,4vw,2.6rem)}
.t-faq .faq{max-width:none}
.t-faq details{background:#121418;border-color:#2c3137}
.t-faq summary{color:#fff;font-size:1.1rem}
.t-ia{background:linear-gradient(135deg,#1d2126,#22262c);border-style:dashed}
.t-ia h3{font-size:1.4rem}
/* blog */
.t-blog .articoli{grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
.t-blog .art{background:#121418;border-color:#2c3137}
.t-blog .art h3{color:#fff}
.t-blog .art p{color:#A9A395}
.t-blog .art .in-arrivo{background:#1d2126;border-color:#2c3137;color:#A9A395}
.t-blog .titolo-sez{margin-bottom:.4rem}
.t-blog .titolo-sez h2,.t-blog .titolo-sez h3{font-size:clamp(1.8rem,4vw,2.6rem)}
@media (min-width:760px){
  .t-foto,.t-manifesto{grid-column:span 6}
  .t-ia{grid-column:span 6}
  .t-faq{grid-column:span 6}
}
@media (min-width:1100px){
  .t-modi{grid-column:span 7}
  .t-servizi{grid-column:span 5}
  .t-foto{grid-column:span 3;min-height:26rem}
  .t-manifesto{grid-column:span 4;min-height:24rem}
  .t-vicino{grid-column:span 12;min-height:22rem}
  .t-faq{grid-column:span 7}
  .t-ia{grid-column:span 5}
  .t-blog{grid-column:span 12}
  .t-blog .articoli{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------------- movimento ridotto o niente script: tutto in colonna, fermo ---------------- */
html:not(.js) .q-palco,:root[data-movimento="ridotto"] .q-palco{position:relative;top:0;height:auto;min-height:0;padding-block:2rem}
html:not(.js) .q-scorre,:root[data-movimento="ridotto"] .q-scorre{margin-top:0;padding:1rem var(--gutter) 3rem;gap:1rem;justify-items:center}
html:not(.js) .diario,:root[data-movimento="ridotto"] .diario{gap:1rem;justify-items:center}
:root[data-movimento="ridotto"] .q-scorre,:root[data-movimento="ridotto"] .diario{padding-left:var(--gutter)}
@media (prefers-reduced-motion:reduce){
  :root:not([data-movimento="pieno"]) .q-palco{position:relative;top:0;height:auto;min-height:0;padding-block:2rem}
  :root:not([data-movimento="pieno"]) .q-scorre{margin-top:0;padding:1rem var(--gutter) 3rem;gap:1rem;justify-items:center}
  :root:not([data-movimento="pieno"]) .diario{gap:1rem;justify-items:center}
}
/* telefono: il titolo va a capo invece di uscire dallo schermo (testo grande compreso) */
@media (max-width:999px){
  .q-testa{max-width:100%}
  .q-testa .cr-h1{flex-wrap:wrap;white-space:normal;font-size:clamp(2rem,9.6vw,4.4rem)}
}
.n-card .leggi,.voce-card .leggi,.t .leggi{overflow-wrap:break-word}
.atto-notte,.atto-quadro{max-width:100%}
/* v2b: correzioni dopo il collaudo */
@media (min-width:1000px){.atto-quadro .quadro{margin-inline:0}}
/* telefono: display del quadro piu' leggibile (lo SVG inquadra solo il centro, vedi quadro2.js) */
@media (max-width:640px){
  .tft-m1{font-size:24px}
  .tft-m2{font-size:30px}
  .tft-trip,.tft-trip-n,.tft-trip-v{font-size:22px}
  .qd-lbl{font-size:30px}
  .qd-sotto{display:none}
}
/* scritte chiare su fondo scuro anche nel tema giorno */
.voce-card .occhiello,.q-fine .occhiello{color:#C9C3B6}
.t-blog .art time{color:#FF8A6A}
.t .ia,.t-blog .art .ia{color:#C9C3B6}
.nota-modi{color:#A9A395}
/* testo sopra le foto: velo piu' deciso */
.t-foto::after,.t-manifesto::after,.t-vicino::after,.t-umbria::after{background:linear-gradient(180deg,rgba(10,11,13,.05) 0%,rgba(10,11,13,.55) 38%,rgba(10,11,13,.9) 62%,rgba(10,11,13,.97))}
.t-c h3,.t-c h2,.t-c p,.t-c .leggi{text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* Umbria in moto: la foto del panorama torna nel garage */
.t-umbria{padding:0;min-height:20rem;align-content:end}
.t-umbria>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-umbria h2{font-size:clamp(1.8rem,5vw,3rem);line-height:.95}
@media (min-width:1100px){.t-umbria{grid-column:span 12}}
.garage-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.garage-testa .garage-occ{margin:0}
.garage-testa .btn{font-size:.85rem;padding:.55rem .85rem;color:#EEE8DA}
/* notturna al telefono: la scena sta in alto, la scheda in basso e non la copre */
@media (max-width:899px){
  .n-tappa{padding-bottom:3svh}
  .n-card{max-height:none}
  .n-card .taglia{max-height:7.6em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .n-card .taglia.aperto{max-height:none;-webkit-mask-image:none;mask-image:none}
  .n-card .leggi-tutto{justify-self:start;background:none;border:0;padding:0;font:700 .8rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--mezzeria);cursor:pointer}
  .n-emblema{grid-template-columns:5.5rem minmax(0,1fr);gap:.8rem}
  .n-emblema .sagoma .timbro{display:none}
  .n-passione{display:none}
}
@media (min-width:900px){.n-card .leggi-tutto{display:none}}
@media (max-width:360px){.n-emblema{grid-template-columns:1fr}.n-emblema .sagoma{max-width:7rem}}
/* v2c: telefono, quadro intero (niente ritaglio) con il display a caratteri grandi */
@media (max-width:640px){
  .tft-m1{font-size:30px;letter-spacing:.04em}
  .tft-m2{font-size:38px;letter-spacing:.03em}
  .tft-trip,.tft-trip-v{font-size:28px}
  .tft-trip-n{display:none}
  .tft-ora{font-size:30px}
}
/* citazioni sopra la carta al telefono: un alone scuro dietro il testo */
@media (max-width:899px){.n-citazione .n-card{background:radial-gradient(ellipse at center,rgba(4,6,10,.82) 0%,rgba(4,6,10,.6) 55%,rgba(4,6,10,0) 80%);padding:1.4rem .9rem}}