/* Stile della città 3D (citta.html): forme della v0.3, colori premium della v0.6. Palette e regole in ARCHITETTURA.md.
   Animazioni solo con transform/opacity; caratteri locali in vendor/caratteri. */

/* --- Caratteri locali (OFL) --- */
@font-face {
  font-family: "Manrope";
  src: url("../vendor/caratteri/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../vendor/caratteri/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../vendor/caratteri/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette giorno (v0.3): fondi chiari caldi, testo verde-grafite, accenti verde Minilab */
  --fondo: #F5EFE4;      /* bianco caldo */
  --fondo-2: #EBE1CF;    /* salvia chiarissimo */
  --cielo: #E4D5BC;      /* azzurro-verde tenue */
  --muro: #FFFFFF;
  --muro-2: #E3DACB;
  --menta: #7A1E2C;      /* verde accento leggibile: testi, pulsante principale (testo bianco 5,3:1) */
  --verde-scuro: #5A1420;
  --luce: #B8924A;
  --lume: #5A1420;       /* contorno di focus e link al passaggio */
  --inchiostro: #14110F; /* testo principale verde-grafite (circa 14:1) */
  --testo-medio: #3A322B;
  --secondario: #66594B; /* testo secondario (circa 6:1 sul fondo) */
  --avviso: #B42318;     /* solo errori del modulo */
  /* Vetro chiaro: bianco trasparente con sfocatura dove regge, altrimenti quasi pieno */
  --vetro: rgba(255, 255, 255, .55);
  --vetro-pieno: rgba(255, 255, 255, .92);
  --bordo-vetro: rgba(122, 30, 44, .16);
  --riflesso: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%);
  --ombra: 0 22px 50px -28px rgba(40, 28, 10, .35);
  /* Misure */
  --testata: 4.25rem;
  --barra-sotto: 0rem;
  --raggio: 1.25rem;
  --p: 0;
  --curva: cubic-bezier(.22, 1, .36, 1);
  /* Caratteri */
  --testo: "Manrope", system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--testata) + 1rem); scroll-padding-bottom: calc(var(--barra-sotto) + 1rem); background: var(--fondo); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font: 400 1rem/1.65 var(--testo);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--barra-sotto);
}
img { max-width: 100%; }
/* Scorrimento morbido (Lenis). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; font-weight: 400; }
p { margin: 0 0 1em; }
a { color: var(--menta); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--lume); }
small { font-size: .8em; color: var(--secondario); }

/* Focus sempre visibile, anche sopra la scena. */
:focus-visible {
  outline: 2px solid var(--lume);
  outline-offset: 3px;
  border-radius: 6px;
}
[tabindex="-1"]:focus { outline: none; }

.salta-al-contenuto {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--menta);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
}
.salta-al-contenuto:focus { top: 1rem; }

/* Micro-etichette mono maiuscole (stile editoriale). */
.etichetta {
  font: 400 .72rem/1.4 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--menta);
  margin: 0 0 1rem;
}

/* --- Pulsanti a pillola --- */
.pulsante, #cta-preventivo, .azioni button, .azioni #accedi, #salta, .chiudi-menu {
  font: 600 .92rem/1.2 var(--testo);
  letter-spacing: .01em;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: .7rem 1.25rem;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: background-color 250ms, border-color 250ms, color 250ms, box-shadow 250ms, transform 250ms var(--curva);
}
/* Principale: menta piena con bagliore. */
.pulsante, #cta-preventivo {
  background: var(--menta);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(122, 30, 44, .35), 0 10px 32px -10px rgba(184, 146, 74, .6);
}
.pulsante:hover, #cta-preventivo:hover {
  background: var(--verde-scuro);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(122, 30, 44, .5), 0 12px 40px -8px rgba(184, 146, 74, .75);
  transform: translateY(-1px);
}
/* Secondari: contorno sottile, fondo appena acceso. */
.azioni button, .azioni #accedi, #salta, .chiudi-menu {
  background: rgba(20, 17, 15, .04);
  border-color: rgba(20, 17, 15, .2);
  color: var(--inchiostro);
}
.azioni button:hover, .azioni #accedi:hover, #salta:hover, .chiudi-menu:hover,
.azioni button[aria-expanded="true"] { border-color: var(--menta); background: rgba(122, 30, 44, .1); }
.pulsante-secondario {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .6rem 1.15rem;
  border: 1px solid var(--bordo-vetro);
  border-radius: 999px;
  background: rgba(20, 17, 15, .04);
  color: var(--inchiostro);
  text-decoration: none;
  transition: border-color 250ms, background-color 250ms;
}
.pulsante-secondario:hover { border-color: var(--menta); background: rgba(122, 30, 44, .1); color: var(--inchiostro); }

/* --- Vetro chiaro: bianco quasi pieno ovunque; sfocatura vera solo su schermi larghi in modalità 3D --- */
.didascalia, .scheda, .passi li, #modulo-preventivo, .menu, #caricamento {
  background: var(--riflesso), var(--vetro-pieno);
  border: 1px solid var(--bordo-vetro);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 900px) {
    html[data-livello="3d"] :is(.didascalia, .scheda, #caricamento, .menu, #testata .azioni) {
      background: var(--riflesso), var(--vetro);
      -webkit-backdrop-filter: blur(16px) saturate(1.3);
      backdrop-filter: blur(16px) saturate(1.3);
    }
    /* Sul vetro trasparente le micro-etichette usano il verde più scuro: restano leggibili sopra finestre e tetti. */
    html[data-livello="3d"] .didascalia .etichetta { color: var(--lume); }
  }
}

/* --- Testata: logo in alto a sinistra, azioni a destra (sul telefono in basso) --- */
#testata {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--testata);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 max(1.25rem, env(safe-area-inset-right)) 0 max(1.25rem, env(safe-area-inset-left));
  background: linear-gradient(rgba(245, 239, 228, .85), rgba(245, 239, 228, 0));
  pointer-events: none;
}
#testata > * { pointer-events: auto; }
#logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--inchiostro);
  text-decoration: none;
  font: 600 1.05rem/1 var(--testo);
  letter-spacing: .04em;
  min-height: 44px;
}
#logo img { width: 22px; height: 29px; }
.azioni { display: flex; gap: .5rem; align-items: center; }
@media (min-width: 701px) {
  /* Pillola piena (stesso vetro chiaro dei pannelli): i testi che scorrono sotto non si sovrappongono ai pulsanti.
     In 3D su schermi da 900 px in su la regola del vetro sfocato qui sopra la rende trasparente e sfocata. */
  .azioni { padding: .3rem; border-radius: 999px; border: 1px solid var(--bordo-vetro); background: var(--vetro-pieno); }
  .azioni button, .azioni #accedi { background: transparent; border-color: transparent; }
}

/* Telefono: barra a pillola in basso, vicino al pollice; "Richiedi preventivo" al centro. */
@media (max-width: 700px) {
  :root { --barra-sotto: calc(4.75rem + env(safe-area-inset-bottom)); --mascotte-sotto: 6rem; --testata: 3.75rem; }
  .azioni {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .3rem;
    padding: .3rem;
    background: var(--vetro-pieno);
    border: 1px solid var(--bordo-vetro);
    border-radius: 999px;
    box-shadow: 0 12px 40px -12px rgba(40, 28, 10, .3);
  }
  /* Nel codice l'ordine è Servizi, Accedi, Preventivo (quello degli schermi larghi); qui il preventivo va al centro. */
  #apri-servizi { order: 1; }
  .azioni #cta-preventivo { order: 2; }
  #accedi { order: 3; }
  .azioni > * { padding-left: .4rem; padding-right: .4rem; font-size: .88rem; white-space: nowrap; }
  .azioni #cta-preventivo { font-size: .85rem; }
  #testata { background: linear-gradient(rgba(245, 239, 228, .95) 40%, rgba(245, 239, 228, 0)); }
  .azioni button, .azioni #accedi { border-color: transparent; background: transparent; padding-left: .95rem; padding-right: .95rem; }
  /* Mentre si scrive nel modulo la barra si toglie di mezzo (con la tastiera aperta coprirebbe il campo). */
  html.scrive .azioni { display: none; }
}
/* Schermi strettissimi (o caratteri ingranditi): la pillola resta dentro lo schermo. */
@media (max-width: 360px) {
  .azioni { grid-template-columns: auto minmax(0, 1fr) auto; }
  .azioni > * { padding-left: .6rem; padding-right: .6rem; font-size: .8rem; }
  .azioni button, .azioni #accedi { padding-left: .6rem; padding-right: .6rem; }
  .azioni #cta-preventivo { min-width: 0; font-size: .8rem; }
  .azioni #cta-preventivo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Scena fissa dietro a tutto --- */
#scena {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cielo) 0%, #F1E9DC 55%, var(--fondo) 100%);
  pointer-events: none;
}
#scena canvas, #scena .strati { pointer-events: auto; }
.skyline-statica {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 45vh;
  object-fit: cover;
  object-position: 50% 100%;
  display: none;
  opacity: .85;
}
/* Statico e senza JavaScript: cielo a gradiente e profilo della città in fondo. */
html:not(.js) #scena,
html[data-livello="statico"] #scena {
  background: linear-gradient(180deg, var(--cielo) 0%, #F1E9DC 60%, var(--fondo-2) 100%);
}
html:not(.js) .skyline-statica,
html[data-livello="statico"] .skyline-statica { display: block; }
/* Livello strati (strati.js): stili qui e non nel JavaScript, così nessuno stile in linea (CSP rigorosa). */
.strati svg { display: block; }
.strati svg.strati-largo { overflow: visible; }
.strati svg.strati-nuvole { position: absolute; inset: 0; }
.strati .insegna { pointer-events: auto; cursor: pointer; }
.strati-impulso { stroke-dasharray: 9 91; stroke-dashoffset: 100; animation: strati-flusso 3s linear infinite; }
.strati-impulso:nth-child(2) { animation-duration: 3.7s; animation-delay: -1.3s; }
.strati-impulso:nth-child(3) { animation-duration: 4.4s; animation-delay: -2.6s; }
@keyframes strati-flusso { to { stroke-dashoffset: 0; } }
.strati-ferme .strati-impulso { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .strati-impulso { animation: none; stroke-opacity: 0; } }
/* In 3D la mascotte è nella scena: l'overlay HTML resta nascosto. */
html[data-livello="3d"] #mascotte { display: none; }

/* --- Testi verticali laterali (solo schermi larghi) --- */
.laterale { display: none; }
@media (min-width: 1100px) {
  .laterale { display: block; }
  .laterale p {
    position: fixed;
    top: 50%;
    z-index: 2;
    margin: 0;
    writing-mode: vertical-rl;
    font: 400 .66rem/1 var(--mono);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--secondario);
    pointer-events: none;
  }
  .laterale-sx { left: 1.4rem; transform: translateY(-50%) rotate(180deg); }
  .laterale-sx span { color: var(--menta); }
  .laterale-sx { transition: opacity 400ms; }
  /* Lascia il lato sinistro alla mascotte quando compare. */
  html:not([data-livello="3d"])[data-tappa="mascotte"] .laterale-sx,
  html:not([data-livello="3d"])[data-tappa="servizi"] .laterale-sx { opacity: 0; }
  .laterale-dx { right: 1.4rem; transform: translateY(-50%); display: flex; align-items: center; gap: 1rem; }
  .traccia { position: relative; display: block; width: 1px; height: 16vh; background: rgba(20, 17, 15, .16); }
  .traccia span {
    position: absolute;
    inset: 0;
    background: var(--menta);
    box-shadow: 0 0 8px var(--luce);
    transform-origin: 50% 0;
    transform: scaleY(0); /* regista.js scrive qui l'avanzamento, solo su questo elemento */
  }
}
/* Nome della tappa corrente (data-tappa è scritto dal regista). */
.tappa-nome::before { content: "01 · Intro"; }
html[data-tappa="viale"] .tappa-nome::before { content: "02 · Il viale"; }
html[data-tappa="uffici"] .tappa-nome::before { content: "03 · Gli uffici"; }
html[data-tappa="salita"] .tappa-nome::before { content: "04 · La salita"; }
html[data-tappa="mascotte"] .tappa-nome::before { content: "05 · L'incontro"; }
html[data-tappa="servizi"] .tappa-nome::before { content: "06 · Servizi"; }
html[data-livello="statico"] .laterale-dx, html:not(.js) .laterale-dx { display: none; }

/* --- Binario della storia --- */
#percorso { position: relative; z-index: 1; }
section[data-tappa] {
  position: relative;
  padding: calc(var(--testata) + 2rem) max(1.25rem, 6vw) 3rem;
}
/* Nei livelli animati le sezioni della storia sono alte e lasciano passare i clic alle insegne. */
html.js:not([data-livello="statico"]) section[data-tappa] { pointer-events: none; }
html.js:not([data-livello="statico"]) section[data-tappa] > * { pointer-events: auto; }
html.js:not([data-livello="statico"]) #intro { min-height: 100vh; min-height: 100svh; }
html.js:not([data-livello="statico"]) #viale { min-height: 150vh; min-height: 150svh; }
html.js:not([data-livello="statico"]) #uffici { min-height: 120vh; min-height: 120svh; }
html.js:not([data-livello="statico"]) #salita { min-height: 110vh; min-height: 110svh; }
html.js:not([data-livello="statico"]) #incontro { min-height: 110vh; min-height: 110svh; }

/* --- Intro: "Minilab" enorme e sottile, barre verticali di luce dietro --- */
#intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  overflow: hidden;
  --t: 0;
}
.intro-titolo { position: relative; isolation: isolate; }
/* Alone caldo dietro il titolo, come sole del mattino (gradiente, nessun filtro costoso). */
.intro-titolo::before {
  content: "";
  position: absolute;
  inset: -30% -18%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 248, 228, .95), rgba(255, 241, 201, .55) 55%, rgba(255, 241, 201, 0));
  pointer-events: none;
}
.intro-titolo h1 {
  font: 400 clamp(5rem, 26vw, 17rem)/.82 var(--serif);
  letter-spacing: -.035em;
  margin: 0 0 .12em;
  color: var(--inchiostro);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .intro-titolo h1 {
    background: linear-gradient(180deg, var(--inchiostro) 30%, var(--menta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.payoff {
  font: 300 clamp(1.05rem, 2.6vw, 1.4rem)/1.45 var(--testo);
  letter-spacing: .01em;
  color: var(--inchiostro);
  margin: 0 auto;
  max-width: 34rem;
  text-shadow: 0 1px 14px rgba(245, 239, 228, .95);
}
/* Alone chiaro come il payoff: l'etichetta piccola resta leggibile anche sopra la città. */
#intro .etichetta { margin-bottom: 1.4rem; text-shadow: 0 0 10px var(--fondo), 0 1px 3px var(--fondo); }

/* Indicazione "Scorri per entrare" con filo di luce che scende. */
.scorri {
  position: absolute;
  left: 50%;
  bottom: calc(var(--barra-sotto) + 1.75rem);
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  font: 400 .7rem/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--inchiostro);
  text-shadow: 0 0 10px var(--fondo), 0 1px 3px var(--fondo);
}
.scorri i { display: block; width: 1px; height: 2.75rem; overflow: hidden; background: rgba(20, 17, 15, .15); position: relative; }
.scorri i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, var(--menta));
  transform: translateY(-100%);
}
html[data-livello="statico"] .scorri, html:not(.js) .scorri { display: none; }
/* Schermi bassi (telefono in orizzontale, telefoni piccoli): "Scorri" coprirebbe titolo e payoff. */
@media (max-height: 620px) { .scorri { display: none; } }
/* Telefono in orizzontale: il titolo si misura anche sull'altezza, così titolo, etichetta e payoff stanno nello schermo. */
@media (orientation: landscape) and (max-height: 500px) {
  .intro-titolo h1 { font-size: clamp(3.5rem, min(26vw, 32vh), 17rem); font-size: clamp(3.5rem, min(26vw, 32svh), 17rem); }
  #intro .etichetta { margin-bottom: .6rem; }
}

/* Raggi di sole (solo CSS): fasci chiari che scendono in diagonale dall'alto. */
.luci {
  position: absolute;
  top: -15%;
  left: -15%;
  right: -15%;
  height: 120%;
  z-index: 0;
  transform: rotate(12deg);
  transform-origin: 70% 0;
  pointer-events: none !important;
}
.luci i {
  --x: 50%; --w: 8vw; --h: 80%; --o: .8;
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  opacity: var(--o);
  background: radial-gradient(farthest-side at 50% 0, rgba(255, 255, 255, .9), rgba(255, 246, 214, .4) 55%, rgba(255, 246, 214, 0));
}
.luci i:nth-child(1) { --x: 8%; --w: 6vw; --h: 68%; --o: .55; }
.luci i:nth-child(2) { --x: 20%; --w: 11vw; --h: 94%; --o: .8; }
.luci i:nth-child(3) { --x: 32%; --w: 4vw; --h: 58%; --o: .5; }
.luci i:nth-child(4) { --x: 50%; --w: 16vw; --h: 100%; --o: 1; }
.luci i:nth-child(5) { --x: 65%; --w: 5vw; --h: 74%; --o: .6; }
.luci i:nth-child(6) { --x: 78%; --w: 10vw; --h: 88%; --o: .75; }
.luci i:nth-child(7) { --x: 91%; --w: 5vw; --h: 62%; --o: .5; }
@media (max-width: 700px) {
  .luci i:nth-child(n) { --w: 20vw; }
  .luci i:nth-child(4) { --w: 34vw; }
  .luci i:nth-child(odd):not(:nth-child(5)) { display: none; }
}

/* Arrivo in avanti e movimento con lo scorrimento (--t va da 0 a 1 durante la tappa intro, p 0 → 0,12). */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-livello="statico"]) #intro { --t: min(1, calc(var(--p) * 8.3)); }
  html.js:not([data-livello="statico"]) .intro-titolo h1 { animation: arriva 1600ms var(--curva) both; }
  html.js:not([data-livello="statico"]) #intro .etichetta { animation: sale 900ms 500ms var(--curva) both; }
  html.js:not([data-livello="statico"]) .payoff { animation: sale 1000ms 700ms var(--curva) both; }
  html.js:not([data-livello="statico"]) .scorri { animation: compare 800ms 1400ms ease-out both; }
  html.js:not([data-livello="statico"]) .scorri i::after { animation: filo 2.2s 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
  html.js:not([data-livello="statico"]) .luci i { animation: accendi 1800ms var(--curva) both, respira 5s 2s ease-in-out infinite alternate; }
  html.js:not([data-livello="statico"]) .luci i:nth-child(2n) { animation-delay: 250ms, 2.6s; }
  html.js:not([data-livello="statico"]) .luci i:nth-child(3n) { animation-delay: 500ms, 3.3s; }
  /* Fuori dall'intro raggi e filo non si vedono: in pausa, così il browser non ridisegna per niente. */
  html[data-tappa]:not([data-tappa="intro"]) .luci i,
  html[data-tappa]:not([data-tappa="intro"]) .scorri i::after { animation-play-state: paused; }
  html.js:not([data-livello="statico"]) .intro-titolo {
    transform: translateY(calc(var(--t) * -6vh)) scale(calc(1 + var(--t) * .5));
    opacity: calc(1 - var(--t) * 1.1);
    will-change: transform, opacity;
  }
  html.js:not([data-livello="statico"]) .luci,
  html.js:not([data-livello="statico"]) .scorri span { opacity: calc(1 - var(--t) * 1.4); }
}
@keyframes arriva {
  from { transform: scale(.62) translateY(6%); opacity: .2; }
  to { transform: none; opacity: 1; }
}
@keyframes sale {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes compare { from { opacity: 0; } }
@keyframes filo {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}
@keyframes accendi {
  from { opacity: 0; transform: scaleY(.3); }
  to { opacity: var(--o); transform: none; }
}
@keyframes respira {
  from { opacity: var(--o); }
  to { opacity: calc(var(--o) * .55); }
}
.luci i { transform-origin: 50% 0; }

/* --- Didascalie della storia: pannelli di vetro che restano in vista mentre si scorre --- */
.didascalia {
  max-width: 30rem;
  padding: 1.6rem 1.75rem 1.75rem;
  position: relative;
}
/* Filo di luce sul bordo alto del pannello. */
.didascalia::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.75rem;
  width: 3rem;
  height: 1px;
  background: var(--menta);
  box-shadow: 0 0 12px var(--luce);
}
.didascalia h2 { font: 400 clamp(2rem, 5vw, 2.9rem)/1.02 var(--serif); letter-spacing: -.01em; color: var(--inchiostro); margin-bottom: .6rem; }
.didascalia p:not(.etichetta) { margin: 0; color: var(--testo-medio); font-size: 1.02rem; }
html.js:not([data-livello="statico"]) .didascalia { position: sticky; top: 26vh; }
#uffici .didascalia, #incontro .didascalia { margin-left: auto; }
@media (min-width: 1100px) {
  #viale .didascalia, #salita .didascalia { margin-left: 2.5rem; }
  #uffici .didascalia, #incontro .didascalia { margin-right: 2.5rem; }
}
@media (max-width: 700px) {
  .didascalia { padding: 1.25rem 1.3rem 1.35rem; }
  html.js:not([data-livello="statico"]) .didascalia { top: calc(var(--testata) + .5rem); }
  #uffici .didascalia, #incontro .didascalia { margin-left: 0; }
}

/* --- Contenuti: servizi, come lavoriamo, contatti --- */
#servizi, #come-lavoriamo, #contatti {
  position: relative;
  padding: 6rem max(1.25rem, 6vw);
  background: var(--fondo);
}
/* I servizi stanno sopra la città: le schede di vetro lasciano intravedere la scena. */
#servizi { background: linear-gradient(rgba(245, 239, 228, 0), rgba(245, 239, 228, .55) 10rem, rgba(245, 239, 228, .8)); }
#come-lavoriamo { background: radial-gradient(80% 60% at 85% 0%, rgba(184, 146, 74, .12), rgba(245, 239, 228, 0) 70%), var(--fondo-2); }
#contatti { background: radial-gradient(70% 50% at 10% 100%, rgba(184, 146, 74, .12), rgba(245, 239, 228, 0) 70%), var(--fondo); border-top: 1px solid rgba(122, 30, 44, .08); }
.contenuto { max-width: 70rem; margin: 0 auto; }
.contenuto > h2 { font: 400 clamp(2.6rem, 8vw, 5rem)/.95 var(--serif); letter-spacing: -.02em; color: var(--inchiostro); margin-bottom: 1rem; }
.sottotitolo { color: var(--secondario); font-size: 1.1rem; max-width: 36rem; }
/* Su schermi larghi lo spazio a sinistra resta alla mascotte. */
@media (min-width: 701px) {
  html.js:not([data-livello="statico"]) #servizi .contenuto { padding-left: clamp(0rem, 12vw, 9rem); }
}

/* Schede servizi: vetro con numerazione mono. */
.schede {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  counter-reset: scheda;
}
.scheda {
  counter-increment: scheda;
  position: relative;
  padding: 1.5rem 1.5rem 1.6rem;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  transition: border-color 300ms, transform 400ms var(--curva), box-shadow 300ms;
}
.scheda::before {
  content: counter(scheda, decimal-leading-zero);
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--menta);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(122, 30, 44, .12);
}
.scheda h3 { font: 400 1.75rem/1.05 var(--serif); color: var(--inchiostro); margin: 1.6rem 0 .5rem; }
.scheda p { margin: 0; color: var(--testo-medio); font-size: .98rem; }
.scheda:hover { border-color: rgba(122, 30, 44, .45); transform: translateY(-3px); }
.scheda.evidenziata { border-color: var(--lume); transform: translateY(-4px); box-shadow: 0 0 0 3px rgba(184, 146, 74, .3), 0 0 40px -6px rgba(184, 146, 74, .5); }

/* Passi del metodo: numeri mono, titoli serif. */
.passi {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  counter-reset: passo;
}
.passi li { counter-increment: passo; padding: 1.5rem; }
.passi li::before {
  content: counter(passo, decimal-leading-zero) " /";
  display: block;
  font: 400 .72rem/1 var(--mono);
  letter-spacing: .18em;
  color: var(--menta);
  margin-bottom: 1.2rem;
}
.passi h3 { font: 400 1.6rem/1.05 var(--serif); }
.passi p { margin: 0; color: var(--secondario); }

.contatti-rapidi {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* --- Modulo preventivo --- */
#modulo-preventivo { max-width: 42rem; padding: 1.75rem; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.facoltativo { font-weight: 400; color: var(--secondario); }
.campo input, .campo select, .campo textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem; /* evita lo zoom automatico su iPhone */
  color: var(--inchiostro);
  background: #fff;
  border: 1px solid #8C7F70; /* bordo dei campi visibile (3:1) */
  border-radius: .8rem;
  padding: .7rem .85rem;
  min-height: 46px;
  transition: border-color 200ms, box-shadow 200ms;
}
.campo select option { background: #fff; color: var(--inchiostro); }
.campo textarea { resize: vertical; min-height: 7.5rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--menta); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--menta); box-shadow: 0 0 0 3px rgba(122, 30, 44, .2); }
.campo [aria-invalid="true"] { border-color: var(--avviso); }
.errore { margin: .35rem 0 0; color: var(--avviso); font-size: .95rem; }
.errore:empty { display: none; }
/* Allegati: l'input file invisibile copre tutta la zona (clic, tastiera e trascinamento nativi). */
.zona-allegati {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 6rem;
  padding: 1rem;
  border: 1.5px dashed #8C7F70;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .75);
  text-align: center;
  color: var(--testo-medio);
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms;
}
.zona-allegati:hover, .zona-allegati.sopra { border-color: var(--menta); background: rgba(122, 30, 44, .08); }
.zona-allegati:focus-within { border-color: var(--menta); box-shadow: 0 0 0 3px rgba(122, 30, 44, .2); outline: 2px solid var(--lume); outline-offset: 3px; }
.zona-allegati.errata { border-color: var(--avviso); }
.zona-allegati strong { color: var(--inchiostro); font-weight: 600; }
.zona-allegati .scegli { color: var(--menta); text-decoration: underline; text-underline-offset: .2em; }
.campo .zona-allegati input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.aiuto { margin: .35rem 0 0; font-size: .9rem; color: var(--secondario); }
.elenco-allegati { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.elenco-allegati[hidden] { display: none; }
.elenco-allegati li { display: flex; align-items: center; gap: .6rem; padding: .3rem .35rem .3rem .85rem; border: 1px solid var(--bordo-vetro); border-radius: .8rem; background: #fff; }
.nome-allegato { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--inchiostro); }
.peso-allegato { flex: none; font-size: .85rem; color: var(--secondario); }
.togli-allegato { flex: none; min-height: 44px; padding: .4rem 1rem; font: 600 .9rem/1.2 var(--testo); color: var(--inchiostro); background: rgba(20, 17, 15, .04); border: 1px solid rgba(20, 17, 15, .2); border-radius: 999px; cursor: pointer; transition: border-color 250ms, background-color 250ms; }
.togli-allegato:hover { border-color: var(--menta); background: rgba(122, 30, 44, .1); }
html:not(.js) .campo-allegati { display: none; }
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.invio { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.6rem; }
.informativa { margin: 0; flex: 1 1 14rem; font-size: .9rem; color: var(--secondario); }
.esito, .nota {
  margin: 1.2rem 0 0;
  padding: .95rem 1.1rem;
  border-radius: .9rem;
  background: rgba(122, 30, 44, .08);
  border: 1px solid var(--menta);
  color: var(--inchiostro);
}
/* Senza JavaScript il modulo non invia nulla (per ora): resta solo l'invito a scriverci. */

/* --- Piè di pagina con firma grande --- */
#piede {
  position: relative;
  z-index: 1;
  padding: 3rem max(1.25rem, 6vw) 3.5rem;
  background: var(--fondo);
  border-top: 1px solid rgba(122, 30, 44, .1);
  color: var(--secondario);
  font-size: .95rem;
  overflow: hidden;
}
#piede p { margin: 0 0 .5rem; }
#piede strong { color: var(--inchiostro); font-weight: 600; }
#piede .firma {
  font: 400 clamp(4.5rem, 20vw, 13rem)/.8 var(--serif);
  letter-spacing: -.04em;
  color: rgba(122, 30, 44, .12);
  margin: 0 0 2rem;
  user-select: none;
}
#versione { font: 400 .78rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--secondario); }

/* --- "Salta animazione": visibile solo durante la storia --- */
#salta {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(var(--barra-sotto) + 1rem);
  z-index: 25;
  font: 400 .75rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .6rem 1rem;
  background: rgba(245, 239, 228, .7);
}
@media (min-width: 1100px) { #salta { right: 4rem; } }
/* Sul telefono "Salta animazione" sta in alto a destra, lontano dalla barra del pollice. */
@media (max-width: 700px) {
  #salta { top: calc(.5rem + env(safe-area-inset-top)); bottom: auto; right: max(.75rem, env(safe-area-inset-right)); z-index: 31; font-size: .68rem; padding: .5rem .85rem; }
}
html:not(.js) #salta,
html[data-livello="statico"] #salta,
html[data-tappa="mascotte"] #salta,
html[data-tappa="servizi"] #salta { display: none; }

/* --- Indicatore di caricamento del 3D (compare solo dopo 300 ms) --- */
#caricamento {
  position: fixed;
  left: 50%;
  top: calc(var(--testata) + .5rem);
  z-index: 26;
  transform: translateX(-50%);
  width: min(21rem, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .35rem .8rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
}
#caricamento[hidden] { display: none; }
#caricamento img { grid-row: span 2; width: 24px; height: 32px; }
#caricamento .barra, .stato-invio .barra { height: 2px; background: rgba(20, 17, 15, .14); border-radius: 999px; overflow: hidden; }
#caricamento .barra span, .stato-invio .barra span { display: block; height: 100%; width: 0; background: var(--menta); box-shadow: 0 0 10px var(--luce); transition: width 200ms linear; }
#caricamento .percentuale, .stato-invio .percentuale { font: 400 .75rem var(--mono); color: var(--menta); }
/* Anello che gira (stesse regole dell'anello di avvio, in linea in index.html), piccolo accanto alla percentuale. */
#caricamento .anello { width: 16px; height: 16px; border-width: 2px; margin-right: -.4rem; }
#caricamento .messaggio { grid-column: 2 / 5; color: var(--inchiostro); font-size: .8rem; }
@media (prefers-reduced-motion: no-preference) {
  #caricamento img { animation: saltella 900ms ease-in-out infinite alternate; }
}
@keyframes saltella { to { transform: translateY(-3px); } }

/* --- Menu a scomparsa: servizi da sinistra, accessi da destra --- */
.menu {
  position: fixed;
  top: .5rem;
  bottom: .5rem;
  z-index: 50;
  width: min(24rem, calc(100vw - 2.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.4rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  visibility: hidden;
  transition: transform 420ms var(--curva), visibility 0s linear 420ms;
}
.menu-sinistra { left: .5rem; transform: translateX(calc(-100% - 1rem)); }
.menu-destra { right: .5rem; transform: translateX(calc(100% + 1rem)); }
.menu.aperto { transform: none; visibility: visible; transition: transform 420ms var(--curva), visibility 0s; }
.menu-testa {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .25rem 1rem;
  margin-bottom: 1.5rem;
}
.menu-testa .etichetta { grid-column: 1; grid-row: 1; margin: 0; }
.menu-testa .chiudi-menu { grid-column: 2; grid-row: 1 / span 2; padding: .55rem 1rem; }
.menu-testa h2 { grid-column: 1; grid-row: 2; margin: 0; font: 400 2.2rem/1 var(--serif); color: var(--inchiostro); }
.menu ul { list-style: none; margin: 0; padding: 0; counter-reset: voce; }
.menu li { counter-increment: voce; }
.menu li a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .85rem .25rem;
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(122, 30, 44, .1);
  min-height: 44px;
  transition: color 200ms, padding-left 300ms var(--curva);
}
.menu li a::before { content: counter(voce, decimal-leading-zero); font: 400 .68rem var(--mono); letter-spacing: .14em; color: var(--secondario); }
.menu li a:hover { color: var(--menta); padding-left: .6rem; }
.menu li a.evidente { color: var(--menta); font-weight: 600; }

#velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20, 17, 15, .35);
}
#velo[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #velo { animation: compare 250ms ease-out; }
}

/* Senza JavaScript i menu diventano normali elenchi in fondo alla pagina. */
html:not(.js) .menu {
  position: static;
  width: auto;
  max-width: 70rem;
  margin: 1rem auto;
  transform: none;
  visibility: visible;
  padding: 2rem max(1.25rem, 5vw);
}
html:not(.js) .chiudi-menu,
html:not(.js) #apri-servizi { display: none; }
html:not(.js) .azioni { grid-template-columns: 1fr; }

/* Livello statico: sezioni compatte, nessun effetto. */
html[data-livello="statico"] section[data-tappa] { padding-top: calc(var(--testata) + 1.5rem); padding-bottom: 1.5rem; }
html[data-livello="statico"] #intro { min-height: 70vh; }

/* "Riduci movimento": tutto compare subito. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
  .scheda:hover, .pulsante:hover, #cta-preventivo:hover { transform: none; }
}

/* Contrasto forzato (Windows): i bordi del vetro restano visibili. */
@media (forced-colors: active) {
  .didascalia, .scheda, .passi li, #modulo-preventivo, .menu, .azioni { border: 1px solid CanvasText; }
  .luci, .intro-titolo::before { display: none; }
}


/* ===== v0.4: tema notte (js/tema.js): stesse forme, colori scuri; il giorno resta com'era. ===== */
.interruttore-tema {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--bordo-vetro);
  background: var(--vetro-pieno);
  color: var(--inchiostro);
  cursor: pointer;
  transition: border-color 250ms, background-color 250ms, color 250ms;
}
.interruttore-tema[hidden] { display: none; }
.interruttore-tema:hover { border-color: var(--menta); color: var(--menta); }
.interruttore-tema svg { grid-area: 1 / 1; overflow: visible; }
.interruttore-tema .sole, .interruttore-tema .luna { transform-origin: 12px 12px; transition: opacity 400ms, transform 600ms var(--curva); }
.interruttore-tema .sole { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.interruttore-tema .luna { fill: currentColor; opacity: 0; transform: rotate(-60deg) scale(.5); }
html[data-tema="notte"] .interruttore-tema .sole { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-tema="notte"] .interruttore-tema .luna { opacity: 1; transform: none; }
@media (max-width: 700px) {
  #testata .interruttore-tema { margin: 0 auto 0 -.4rem; width: 40px; height: 40px; }
}
@media (max-width: 360px) { #testata .interruttore-tema { margin-left: -.6rem; width: 38px; height: 38px; } }
@media (max-width: 340px) {
  html.js:not([data-livello="statico"]):not([data-tappa="mascotte"]):not([data-tappa="servizi"]) #testata .interruttore-tema { visibility: hidden; }
}

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1s; animation-timing-function: ease-in-out; }
html.cambio-tema, html.cambio-tema *, html.cambio-tema *::before, html.cambio-tema *::after {
  transition: background-color 1s ease, color 1s ease, border-color 1s ease, fill 1s ease, stroke 1s ease, box-shadow 1s ease !important;
}

html[data-tema="notte"] {
  --fondo: #0E0C0A;
  --fondo-2: #1A1612;
  --cielo: #070504;
  --muro: #17130F;
  --muro-2: #221B14;
  --menta: #D4B26A;        --verde-scuro: #E8CF94;
  --luce: #FFD27A;
  --lume: #E8CF94;
  --inchiostro: #F3EDE2;
  --testo-medio: #D8CFC0;
  --secondario: #A89B88;   --avviso: #FF9B8F;
  --vetro: rgba(14, 12, 10, .5);
  --vetro-pieno: rgba(14, 12, 10, .92);
  --bordo-vetro: rgba(212, 178, 106, .18);
  --riflesso: linear-gradient(180deg, rgba(212, 178, 106, .07), rgba(212, 178, 106, 0) 45%);
  --ombra: 0 22px 50px -28px rgba(0, 0, 0, .8);
  --fondo-rgb: 14, 12, 10;
  --su-menta: #14110F;     --campo: #120F0C;
  --bordo-campo: #7D7060;   --tenue: rgba(243, 237, 226, .16);
  --tocco: rgba(212, 178, 106, .12);
  color-scheme: dark;
}
html[data-tema="notte"] :is(.pulsante, #cta-preventivo, .salta-al-contenuto),
html[data-tema="notte"] :is(.pulsante, #cta-preventivo):hover { color: var(--su-menta); }
html[data-tema="notte"] :is(.pulsante, #cta-preventivo) { box-shadow: 0 0 0 1px rgba(212, 178, 106, .4), 0 10px 32px -10px rgba(255, 210, 122, .45); }
html[data-tema="notte"] :is(#salta, .chiudi-menu, .pulsante-secondario, .togli-allegato) { background-color: rgba(243, 237, 226, .05); border-color: rgba(243, 237, 226, .24); }
html[data-tema="notte"] :is(.azioni button:hover, .azioni button[aria-expanded="true"], #salta:hover, .chiudi-menu:hover, .pulsante-secondario:hover, .togli-allegato:hover, .zona-allegati:hover, .zona-allegati.sopra) { background-color: var(--tocco); border-color: var(--menta); }
html[data-tema="notte"] #salta { background-color: rgba(var(--fondo-rgb), .7); }
html[data-tema="notte"] #testata { background: linear-gradient(rgba(var(--fondo-rgb), .85), rgba(var(--fondo-rgb), 0)); }
@media (max-width: 700px) {
  html[data-tema="notte"] #testata { background: linear-gradient(rgba(var(--fondo-rgb), .95) 40%, rgba(var(--fondo-rgb), 0)); }
  html[data-tema="notte"] .azioni { box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .7); }
}
html[data-tema="notte"] #scena,
html[data-tema="notte"][data-livello="statico"] #scena { background: linear-gradient(180deg, #050302 0%, #120B0A 58%, #17110D 100%); }
html[data-tema="notte"] .skyline-statica { opacity: 1; }
html[data-tema="notte"] :is(.traccia, .scorri i, #caricamento .barra, .stato-invio .barra) { background: var(--tenue); }
html[data-tema="notte"] .intro-titolo::before { background: radial-gradient(closest-side, rgba(var(--fondo-rgb), .7), rgba(var(--fondo-rgb), .3) 60%, rgba(var(--fondo-rgb), 0)); }
html[data-tema="notte"] .payoff { text-shadow: 0 1px 14px rgba(var(--fondo-rgb), .95); }
html[data-tema="notte"] #servizi { background: linear-gradient(rgba(var(--fondo-rgb), 0), rgba(var(--fondo-rgb), .6) 10rem, rgba(var(--fondo-rgb), .85)); }
html[data-tema="notte"] #come-lavoriamo { background: radial-gradient(80% 60% at 85% 0%, rgba(184, 146, 74, .16), rgba(var(--fondo-rgb), 0) 70%), var(--fondo-2); }
html[data-tema="notte"] #contatti { background: radial-gradient(70% 50% at 10% 100%, rgba(184, 146, 74, .16), rgba(var(--fondo-rgb), 0) 70%), var(--fondo); border-top-color: var(--bordo-vetro); }
html[data-tema="notte"] :is(.menu li a, #piede) { border-color: rgba(212, 178, 106, .14); }
html[data-tema="notte"] .scheda::before { border-color: rgba(212, 178, 106, .14); }
html[data-tema="notte"] .scheda:hover { border-color: rgba(212, 178, 106, .5); }
html[data-tema="notte"] :is(.campo input, .campo select, .campo textarea, .campo select option, .elenco-allegati li) { background-color: var(--campo); }
html[data-tema="notte"] :is(.campo input, .campo select, .campo textarea) { border-color: var(--bordo-campo); }
html[data-tema="notte"] :is(.campo input, .campo select, .campo textarea):is(:hover, :focus) { border-color: var(--menta); }
html[data-tema="notte"] .campo [aria-invalid="true"] { border-color: var(--avviso); }
html[data-tema="notte"] .zona-allegati { background-color: rgba(18, 15, 12, .75); border-color: var(--bordo-campo); }
html[data-tema="notte"] .zona-allegati:focus-within { border-color: var(--menta); }
html[data-tema="notte"] .zona-allegati.errata { border-color: var(--avviso); }
html[data-tema="notte"] :is(.esito, .nota) { background: var(--tocco); }
html[data-tema="notte"] #piede .firma { color: rgba(212, 178, 106, .1); }
html[data-tema="notte"] #velo { background: rgba(0, 0, 0, .55); }

html[data-tema="notte"] .luci i { display: none; }
html[data-tema="notte"] .luci::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.3px 1.3px at 20% 30%, #FFFFFF 40%, transparent) 0 0 / 190px 170px,
    radial-gradient(1px 1px at 70% 60%, rgba(243, 237, 226, .85) 40%, transparent) 0 0 / 230px 210px,
    radial-gradient(1.6px 1.6px at 45% 80%, rgba(243, 230, 196, .9) 40%, transparent) 0 0 / 310px 290px,
    radial-gradient(1.1px 1.1px at 85% 15%, rgba(212, 178, 106, .85) 40%, transparent) 0 0 / 150px 260px;
  -webkit-mask-image: linear-gradient(#000 20%, transparent 62%);
  mask-image: linear-gradient(#000 20%, transparent 62%);
  opacity: .9;
}
html[data-tema="notte"] .luci::after {
  content: "";
  position: absolute;
  top: 24%;
  left: 72%;
  width: clamp(40px, 5.5vw, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 38%, rgba(168, 155, 136, .4) 0 11%, transparent 12%),
    radial-gradient(circle at 40% 70%, rgba(168, 155, 136, .3) 0 6%, transparent 7%),
    radial-gradient(circle at 38% 36%, #FFFCF6, #EFE4CF 55%, #D2C3A8);
  box-shadow: 0 0 36px 6px rgba(240, 228, 207, .22), 0 0 110px 34px rgba(212, 178, 106, .08);
}
@media (max-width: 700px) { html[data-tema="notte"] .luci::after { top: 30%; left: 76%; } }
@media (prefers-reduced-motion: no-preference) {
  html.js[data-tema="notte"]:not([data-livello="statico"]) .luci::before { animation: brilla 4s ease-in-out infinite alternate; }
  html.js[data-tema="notte"]:not([data-livello="statico"]) .luci::after { animation: compare 1.6s var(--curva) both; }
  html[data-tema="notte"][data-tappa]:not([data-tappa="intro"]) .luci::before { animation-play-state: paused; }
}
@keyframes brilla { to { opacity: .55; } }
html[data-livello="3d"][data-tema="notte"] .luci { display: none; }
html[data-livello="strati"][data-tema="notte"] .luci::before { display: none; }
/* Anello di avvio (#avvio, stile in linea in index.html): sparisce con dissolvenza quando main.js parte (classe pronto);
   senza JavaScript appena arriva questo file; per sicurezza comunque dopo 30 s (la pagina sotto è già leggibile). */
html.pronto #avvio, html:not(.js) #avvio { opacity: 0; visibility: hidden; pointer-events: none; }
html.pronto #avvio :is(p, a), html:not(.js) #avvio :is(p, a) { animation: none; }
html.js:not(.pronto) #avvio { animation: via 0s 30s forwards; }
html.js:not(.pronto) #avvio p { animation: vedi 0s 6s forwards, via 0s 30s forwards; }
html.js:not(.pronto) #avvio a { animation: vedi 0s 20s forwards, via 0s 30s forwards; }
@keyframes via { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ===== v0.5: invio alla dashboard (modulo.js + invio.js) ===== */
/* Stato dell'invio: anello che gira (stesse regole dell'anello di avvio), testo, conto alla rovescia o %, barra degli allegati. */
.stato-invio { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem .8rem; margin: 1.2rem 0 0; padding: .8rem 1rem; border: 1px solid var(--bordo-vetro); border-radius: .9rem; color: var(--inchiostro); font-size: .95rem; }
.stato-invio[hidden], .stato-invio .barra[hidden], .azioni-esito[hidden], .azioni-esito [hidden], .codice-esito[hidden] { display: none; }
.stato-invio .anello { width: 20px; height: 20px; border-width: 2px; }
.stato-invio .barra { grid-column: 1 / -1; display: block; }
.esito p { margin: 0; }
.esito .codice-esito { margin-top: .5rem; }
.codice-esito strong { font: 400 .95rem var(--mono); letter-spacing: .04em; color: var(--menta); }
.azioni-esito { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.menu #indirizzo-ufficiale { margin-top: 1.4rem; font-size: .85rem; }
.menu #indirizzo-ufficiale[hidden] { display: none; }
.codice-esito strong, #codice-richiesta { white-space: nowrap; }
#modulo-preventivo[aria-busy="true"] button[type="submit"] { opacity: .6; cursor: progress; }