/* Stile di Minilab dalla v0.6 ("leggero", colori premium nero/oro/avorio/bordeaux).
   Pagina principale e pagine semplici. La città 3D (citta.html) usa ancora stile.css.
   Un solo carattere (Manrope); animazioni solo con transform/opacity e, dove il browser lo sa fare,
   legate allo scorrimento in puro CSS (nessun JavaScript che gira a ogni fotogramma). */

@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;
}

:root {
  /* Giorno "premium": avorio e beige, nero caldo, oro, bordeaux (come una carta di credito di lusso).
     Il verde resta solo nella mascotte. Mai la tavolozza del Game Boy originale. */
  --fondo: #F5EFE4;       /* avorio */
  --fondo-2: #EBE1CF;     /* beige */
  --muro: #FFFCF6;        /* bianco caldo delle schede */
  --oro: #B8924A;         /* solo decorazioni (linee, pixel, barre) */
  --accento: #7A1E2C;     /* bordeaux: etichette e link (circa 9:1 sul fondo) */
  --lume: #5A1420;
  --inchiostro: #14110F;  /* nero caldo */
  --testo-medio: #3A322B;
  --secondario: #66594B;  /* circa 5,8:1 sul fondo */
  --avviso: #A3201A;
  --pulsante: #14110F;    /* pulsante principale nero con testo champagne */
  --su-pulsante: #F3E6C4;
  --pulsante-sopra: #7A1E2C;
  --bordo: rgba(20, 17, 15, .12);
  --bordo-forte: #8C7F70; /* campi del modulo (3:1) */
  --campo: #FFFCF6;
  --tocco: rgba(184, 146, 74, .13);
  --vetro: rgba(255, 252, 246, .8);
  --ombra: 0 24px 60px -32px rgba(40, 28, 10, .4);
  --alone: rgba(184, 146, 74, .2);
  /* Riquadro "invertito": di giorno nero con l'oro */
  --inv-fondo: #14110F;
  --inv-testo: #F3EDE2;
  --inv-secondario: #B9AD9A;
  --inv-accento: #D4B26A;
  --inv-su-accento: #14110F;
  /* Si parte col carattere di sistema (zero byte); Manrope arriva solo se la rete è buona (classe "carattere", home.js / tema.js). */
  --testo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --curva: cubic-bezier(.22, 1, .36, 1);
  --largo: 76rem;
  --margine: clamp(1rem, 4vw, 2.5rem);
  --raggio: 1.25rem;
  color-scheme: light;
}

html.carattere { --testo: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

html[data-tema="notte"] {
  /* Notte (19-7): nero caldo e oro; il riquadro invertito diventa bordeaux */
  --fondo: #0E0C0A;
  --fondo-2: #1A1612;
  --muro: #17130F;
  --oro: #C9A55C;
  --accento: #D4B26A;
  --lume: #E8CF94;
  --inchiostro: #F3EDE2;
  --testo-medio: #D8CFC0;
  --secondario: #A89B88;
  --avviso: #FF9B8F;
  --pulsante: #D4B26A;
  --su-pulsante: #14110F;
  --pulsante-sopra: #E8CF94;
  --bordo: rgba(212, 178, 106, .16);
  --bordo-forte: #7D7060;
  --campo: #120F0C;
  --tocco: rgba(212, 178, 106, .1);
  --vetro: rgba(14, 12, 10, .82);
  --ombra: 0 24px 60px -30px rgba(0, 0, 0, .9);
  --alone: rgba(212, 178, 106, .12);
  --inv-fondo: #3A0E17;
  --inv-secondario: #D2B9A8;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font: 400 1rem/1.6 var(--testo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--accento); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--lume); }
small { font-size: .8em; color: var(--secondario); }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--lume); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

/* --- Pezzi comuni --- */
.salta-al-contenuto { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1.1rem; border-radius: .7rem; background: var(--accento); color: var(--su-pulsante); font-weight: 700; text-decoration: none; transition: top .2s; }
.salta-al-contenuto:focus { top: 1rem; }
.etichetta { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accento); }
.punto { width: .5rem; height: .5rem; background: var(--oro); box-shadow: 0 0 0 3px var(--tocco); } /* pixel quadrato, lampeggia come un cursore */
.sottotitolo { max-width: 38rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--secondario); }
.aiuto { margin: .4rem 0 0; font-size: .9rem; color: var(--secondario); }

.pulsante, .pulsante-secondario {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .6rem 1.2rem;
  border-radius: .7rem; border: 1px solid transparent;
  font: 650 .95rem/1.2 var(--testo); text-decoration: none; cursor: pointer;
  transition: transform .25s var(--curva), background-color .25s, border-color .25s, box-shadow .25s;
}
/* Il pulsante principale è un "tasto" da console: bordo oro sotto, si abbassa quando lo premi. */
.pulsante { background: var(--pulsante); color: var(--su-pulsante); box-shadow: 0 3px 0 var(--oro), 0 10px 28px -14px rgba(40, 28, 10, .7); }
.pulsante:active { transform: translateY(3px); box-shadow: 0 0 0 var(--oro); }
.pulsante:hover { color: var(--su-pulsante); background: var(--pulsante-sopra); transform: translateY(-1px); }
.pulsante-secondario { background: transparent; color: var(--inchiostro); border-color: var(--bordo-forte); }
.pulsante-secondario:hover { color: var(--inchiostro); border-color: var(--accento); background: var(--tocco); }
.pulsante-grande { min-height: 52px; padding: .8rem 1.5rem; font-size: 1rem; }
.pulsante:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* --- Testata a pillola (fissa, vetro) --- */
#testata { position: fixed; inset: .75rem 0 auto; z-index: 50; padding: 0 var(--margine); pointer-events: none; }
.pillola {
  pointer-events: auto;
  max-width: var(--largo); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.6rem; padding: .45rem .5rem .45rem 1rem;
  border: 1px solid var(--bordo); border-radius: 1rem;
  background: var(--vetro);
  box-shadow: var(--ombra);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (min-width: 900px) { .pillola { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); } }
}
/* Senza sfocatura (telefoni: costa troppo) la testata è piena, così il testo sotto non si intravede. */
@media (max-width: 899px) { .pillola { background: var(--muro); } }
#logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--inchiostro); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; }
.nav-principale { display: flex; gap: .25rem; margin: 0 auto; }
.nav-principale a { padding: .5rem .8rem; border-radius: .6rem; color: var(--testo-medio); font-size: .95rem; font-weight: 550; text-decoration: none; }
.nav-principale a:hover { color: var(--inchiostro); background: var(--tocco); }
.azioni { display: flex; align-items: center; gap: .4rem; }
.interruttore-tema {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid transparent; border-radius: .7rem; background: transparent; color: var(--inchiostro); cursor: pointer;
}
.interruttore-tema:hover { border-color: var(--bordo); color: var(--accento); }
.interruttore-tema svg { grid-area: 1 / 1; overflow: visible; }
.interruttore-tema .sole, .interruttore-tema .luna { transform-origin: 12px 12px; transition: opacity .4s, transform .6s 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; }

/* Tendine (Accedi, Menu): <details> funziona anche senza JavaScript; navigazione.js aggiunge Esc e clic fuori. */
.tendina { position: relative; }
.tendina > summary, .accedi {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--bordo-forte); border-radius: .7rem; list-style: none; cursor: pointer;
  font-weight: 650; font-size: .95rem; color: var(--inchiostro); user-select: none;
}
.accedi { text-decoration: none; }
.tendina > summary::-webkit-details-marker { display: none; }
.tendina > summary:hover, .tendina[open] > summary, .accedi:hover { border-color: var(--accento); background: var(--tocco); }
.pannello {
  position: absolute; right: 0; top: calc(100% + .6rem); width: min(20rem, calc(100vw - 2rem));
  padding: 1.1rem; border: 1px solid var(--bordo); border-radius: 1rem;
  background: var(--muro); box-shadow: var(--ombra); z-index: 2; /* sopra il pulsante fisso del preventivo */
  animation: scende .3s var(--curva);
}
@keyframes scende { from { opacity: 0; transform: translateY(-6px); } }
.pannello .etichetta { margin: 0 0 .5rem; }
.pannello ul + .etichetta { margin-top: 1rem; }
.pannello a { display: block; padding: .65rem .75rem; border-radius: .6rem; color: var(--inchiostro); text-decoration: none; font-weight: 600; }
.pannello a span { display: block; font-weight: 400; font-size: .85rem; color: var(--secondario); }
.pannello a:hover { background: var(--tocco); }
.pannello .aiuto, #piede .aiuto { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--bordo); font-size: .82rem; }
#menu-telefono { display: none; }
.hamburger { display: grid; gap: 5px; width: 18px; }
.hamburger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--curva); }
#menu-telefono[open] .hamburger i:first-child { transform: translateY(3.5px) rotate(45deg); }
#menu-telefono[open] .hamburger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* --- Sezioni --- */
main { display: block; }
.sezione, .eroe, .manifesto, .fiducia { max-width: var(--largo); margin: 0 auto; padding-left: var(--margine); padding-right: var(--margine); }
.sezione { padding-top: clamp(4.5rem, 10vw, 8rem); }
.testa-sezione { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sezione h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 22ch; }

/* Eroe: titolo grande a sinistra, illustrazione CSS a destra */
.eroe {
  min-height: min(100svh, 56rem);
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(2rem, 5vw, 4rem);
  padding-top: 7.5rem; padding-bottom: 3rem;
  position: relative;
  isolation: isolate; /* tiene l'alone (z-index -1) sopra lo sfondo della pagina */
}
.eroe::before {
  /* alone verde morbido dietro al titolo: un gradiente, niente immagini */
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 80%;
  background: radial-gradient(50% 55% at 30% 40%, var(--alone), transparent 70%), radial-gradient(26% 34% at 78% 38%, rgba(122, 30, 44, .1), transparent 70%);
  pointer-events: none;
}
.eroe h1 { font-size: clamp(2.6rem, 7.2vw, 5.9rem); line-height: .98; letter-spacing: -.045em; margin-bottom: .35em; }
.accento { color: var(--accento); }
.eroe-sotto { max-width: 34rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--testo-medio); margin-bottom: 2rem; }
.eroe-azioni { display: flex; flex-wrap: wrap; gap: .75rem; }

.eroe-visivo { position: relative; aspect-ratio: 1 / 1.05; max-width: 28rem; width: 100%; justify-self: end; }
.carta { position: absolute; border: 1px solid var(--bordo); border-radius: 1.4rem; background: var(--muro); box-shadow: var(--ombra); }
.carta-3 { inset: 2% 20% 30% 0; transform: rotate(-7deg); background: var(--fondo-2); }
.carta-2 { inset: 8% 6% 22% 10%; transform: rotate(-3deg); padding: 1.4rem; display: grid; align-content: start; gap: .7rem; }
.carta-2 i { display: block; height: .7rem; border-radius: 1rem; background: var(--fondo-2); }
.carta-2 i:nth-child(1) { width: 60%; } .carta-2 i:nth-child(2) { width: 85%; } .carta-2 i:nth-child(3) { width: 45%; }
.carta-1 { inset: 22% 0 0 18%; padding: 1.3rem; border-top: 3px solid var(--oro); display: grid; align-content: start; gap: .8rem; }
.carta-testa { display: flex; align-items: center; gap: .6rem; padding-bottom: .8rem; border-bottom: 1px solid var(--bordo); }
.carta-testa b { font-size: 1rem; letter-spacing: -.02em; }
.carta-testa em { margin-left: auto; font-style: normal; font-size: .75rem; font-weight: 700; color: var(--accento); padding: .2rem .55rem; border-radius: 1rem; background: var(--tocco); }
.riga { display: flex; justify-content: space-between; font-size: .9rem; color: var(--secondario); }
.riga strong { color: var(--inchiostro); font-size: 1.05rem; }
.grafico { display: flex; align-items: end; gap: 6%; height: 4.5rem; padding-top: .4rem; }
.grafico i { flex: 1; background: repeating-linear-gradient(to top, var(--oro) 0 6px, transparent 6px 8px); transform-origin: bottom; } /* barre a blocchetti, come in un gioco a 8 bit */
.grafico i:nth-child(1) { height: 35%; } .grafico i:nth-child(2) { height: 55%; } .grafico i:nth-child(3) { height: 42%; }
.grafico i:nth-child(4) { height: 70%; } .grafico i:nth-child(5) { height: 58%; } .grafico i:nth-child(6) { height: 82%; } .grafico i:nth-child(7) { height: 96%; }
.avviso-pronto { font-size: .82rem; font-weight: 650; color: var(--accento); }

/* Manifesto: frase grande che si "accende" parola per parola scorrendo (solo CSS, dove supportato) */
.manifesto { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.parole { margin: 0; max-width: 24ch; font-size: clamp(1.9rem, 5vw, 4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; }

.fiducia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1rem; }
.fiducia li { padding: 1.4rem 1.2rem 1.4rem 0; border-top: 1px solid var(--bordo); }
.fiducia strong { display: block; font-size: 1.05rem; letter-spacing: -.02em; }
.fiducia span { font-size: .92rem; color: var(--secondario); }

/* Servizi a riquadri ("bento") */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.scheda {
  position: relative; overflow: hidden;
  padding: clamp(1.4rem, 2.5vw, 2rem); min-height: 15rem;
  display: flex; flex-direction: column;
  border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--muro);
  transition: border-color .3s, transform .4s var(--curva), box-shadow .4s;
}
.scheda:hover { border-color: var(--oro); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--oro); } /* ombra "a gradino" da videogioco */
.scheda-larga { grid-column: span 2; }
.icona { width: 2.6rem; height: 2.6rem; margin-bottom: auto; padding: .45rem; border-radius: .8rem; background: var(--tocco); fill: none; stroke: var(--accento); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.scheda h3 { margin-top: 2.2rem; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.scheda p { margin: 0; max-width: 32rem; color: var(--secondario); }
.scheda.evidenziata { border-color: var(--accento); box-shadow: 0 0 0 3px var(--tocco); }
/* Riquadro dell'AI, il servizio principale: carta "nera e oro" anche di giorno (come una carta di credito di lusso). */
.scheda-ricca { background: radial-gradient(120% 140% at 100% 0%, rgba(212, 178, 106, .22), transparent 55%), linear-gradient(160deg, #1D1814, #0E0C0A); color: #F3EDE2; border-color: rgba(212, 178, 106, .45); }
.scheda-ricca .icona { background: rgba(212, 178, 106, .14); stroke: #D4B26A; }
.scheda-ricca p { color: #CFC3B0; }
.scheda-ricca :is(h3, p:not(.distintivo)) { max-width: 54%; }
.scheda-ricca .distintivo { color: #E9D3A2; }
.distintivo { position: absolute; top: 1.4rem; left: 5.2rem; margin: 0; padding: .25rem .7rem; border: 1px solid rgba(212, 178, 106, .5); border-radius: 2rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E9D3A2; }
html[data-tema="notte"] .scheda-ricca { background: radial-gradient(120% 140% at 100% 0%, rgba(122, 30, 44, .55), transparent 60%), linear-gradient(160deg, #241A14, #120E0B); }
/* Mini conversazione: domanda, risposta che si scrive, scintilla d'oro */
.mini-ai { position: absolute; right: 1.6rem; top: 50%; width: 38%; transform: translateY(-50%); display: grid; gap: .55rem; }
.mini-ai i { display: block; height: 1.7rem; border-radius: 1rem 1rem 1rem .3rem; background: rgba(243, 237, 226, .12); }
.mini-ai i:nth-child(1) { width: 70%; }
.mini-ai i:nth-child(2) { width: 88%; justify-self: end; border-radius: 1rem 1rem .3rem 1rem; background: linear-gradient(90deg, #8C6A2F, #E9D3A2 50%, #B8924A); opacity: .85; }
.mini-ai i:nth-child(3) { width: 55%; }
.mini-ai b { justify-self: end; width: 2.2rem; height: .5rem; border-radius: 1rem; background: repeating-linear-gradient(90deg, #D4B26A 0 .5rem, transparent .5rem .85rem); }
.link-freccia { margin-top: 1rem; font-weight: 700; text-decoration: none; }
.link-freccia span { display: inline-block; transition: transform .3s var(--curva); }
.link-freccia:hover span { transform: translateX(4px); }
#servizio-consulenza { grid-column: 1 / -1; min-height: 12rem; }

/* Metodo: quattro passi numerati con una linea che li unisce */
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: passo; }
.passi li { counter-increment: passo; position: relative; padding: 1.6rem 1.4rem 1.4rem 0; border-top: 2px solid var(--bordo); }
.passi li::before {
  content: "LIV. " counter(passo, decimal-leading-zero);
  display: block; margin-bottom: 1.6rem;
  font-size: .85rem; font-weight: 800; letter-spacing: .08em; color: var(--accento);
}
.passi li::after { content: ""; position: absolute; left: 0; top: -2px; width: 2.5rem; height: 2px; background: var(--oro); }
.passi h3 { font-size: 1.45rem; }
.passi p { margin: 0; color: var(--secondario); }

/* "Come lavoriamo": buco nero dorato che risucchia le app sparse; accanto i quattro passi in colonna. */
.metodo-griglia { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.passi-colonna { grid-template-columns: 1fr; gap: 0; }
.passi-colonna li { padding: 1.3rem 0; }
.passi-colonna li::before { margin-bottom: .7rem; }
.buco-nero {
  --r: min(12.5rem, 36vw);
  position: relative; width: 100%; max-width: 30rem; aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%; background: radial-gradient(circle, rgba(212, 178, 106, .12), transparent 68%);
}
.disco {
  position: absolute; inset: 12%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 6%, rgba(212, 178, 106, .8) 16%, transparent 30%, rgba(122, 30, 44, .75) 46%, transparent 60%, rgba(233, 211, 162, .7) 76%, transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 0 33%, #000 37% 56%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 33%, #000 37% 56%, transparent 70%);
}
.nucleo {
  position: absolute; inset: 36%; border-radius: 50%;
  background: radial-gradient(circle, #000 58%, #1C130D);
  box-shadow: 0 0 0 2px rgba(233, 211, 162, .6), 0 0 34px 8px rgba(212, 178, 106, .38), inset 0 0 18px #000;
}
.app {
  position: absolute; left: 50%; top: 50%; width: 3.3rem; height: 3.3rem; margin: -1.65rem 0 0 -1.65rem;
  display: grid; place-items: center; border-radius: .8rem;
  background: var(--muro); border: 1px solid var(--bordo); /* niente ombra sfocata: 8 elementi in movimento */
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
.app svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--accento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Angoli spostati di 22,5°: nessuna icona ferma proprio sotto, dove c'è la scritta d'uscita. */
.a1 { --a: 22.5deg; --i: 0; } .a2 { --a: 67.5deg; --i: 1; } .a3 { --a: 112.5deg; --i: 2; } .a4 { --a: 157.5deg; --i: 3; }
.a5 { --a: 202.5deg; --i: 4; } .a6 { --a: 247.5deg; --i: 5; } .a7 { --a: 292.5deg; --i: 6; } .a8 { --a: 337.5deg; --i: 7; }
.uscita {
  position: absolute; left: 50%; bottom: 0; margin: 0; transform: translateX(-50%); white-space: nowrap;
  padding: .55rem 1.1rem; border-radius: 2rem; font-size: .88rem; font-weight: 750; color: #14110F;
  background: linear-gradient(100deg, #8C6A2F, #E9D3A2 48%, #B8924A 70%, #8C6A2F);
  box-shadow: 0 12px 30px -12px rgba(184, 146, 74, .8);
}
@media (prefers-reduced-motion: no-preference) {
  .disco { animation: gira 10s linear infinite; }
  .app { animation: risucchio 8s linear infinite; animation-delay: calc(var(--i) * -1s); }
  .uscita { animation: galleggia 4s ease-in-out infinite; }
  /* Fuori dallo schermo si ferma tutto (classe messa da home.js): niente lavoro inutile per il telefono. */
  html.pronto .buco-nero:not(.in-vista) :is(.disco, .app, .uscita) { animation-play-state: paused; } /* "pronto" = home.js partito: se non parte, si anima e basta */
}
@keyframes risucchio {
  0% { transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(1); opacity: 0; }
  12% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: rotate(calc(var(--a) + 280deg)) translateX(0) rotate(calc(-1 * var(--a) - 280deg)) scale(.12); opacity: 0; }
}
@keyframes galleggia { 50% { transform: translate(-50%, -6px); } }

/* Tocchi "rich": oro metallizzato e vino, solo con gradienti (nessuna immagine). */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .eroe .accento { background: linear-gradient(100deg, #5A1420, #A3364A 45%, #7A1E2C 70%, #4A0F19); -webkit-background-clip: text; background-clip: text; color: transparent; }
  html[data-tema="notte"] .eroe .accento { background-image: linear-gradient(100deg, #B8924A, #F3E6C4 42%, #C9A55C 68%, #8C6A2F); }
}
.pulsante { border-color: rgba(184, 146, 74, .55); }
html[data-tema="notte"] .pulsante { background: linear-gradient(100deg, #B8924A, #E9D3A2 50%, #C9A55C); }
html[data-tema="notte"] .pulsante:hover { background: #E8CF94; }
.scheda::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--oro), transparent); opacity: .7; }
.fiducia strong::before { content: "◆"; margin-right: .45rem; font-size: .7em; color: var(--oro); vertical-align: .12em; }

/* Città 3D facoltativa: riquadro "invertito" */
.riquadro-citta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; padding: clamp(1.8rem, 5vw, 4rem);
  border-radius: calc(var(--raggio) * 1.4); background: var(--inv-fondo); color: var(--inv-testo);
  border: 1px solid var(--bordo);
}
.riquadro-citta::before {
  content: ""; position: absolute; inset: auto -10% -40% 30%; height: 90%;
  background: radial-gradient(closest-side, rgba(212, 178, 106, .22), transparent);
  pointer-events: none;
}
.citta-testo { position: relative; z-index: 1; max-width: 34rem; }
.riquadro-citta .etichetta { color: var(--inv-accento); }
.riquadro-citta p { color: var(--inv-secondario); }
.riquadro-citta .aiuto { margin-top: .9rem; color: var(--inv-secondario); }
.riquadro-citta .pulsante { margin-top: .6rem; background: var(--inv-accento); color: var(--inv-su-accento); box-shadow: 0 10px 32px -10px rgba(212, 178, 106, .45); }
.riquadro-citta .pulsante:hover { background: #E8CF94; color: var(--inv-su-accento); }
.citta-skyline { position: absolute; right: 0; bottom: 0; width: min(62%, 44rem); height: auto; opacity: .75; } /* skyline già nei colori v0.6: palazzi bordeaux e neri, finestre oro */

/* Contatti e modulo */
.contatti-griglia { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contatti-testo { position: sticky; top: 7rem; }
.contatti-rapidi { display: grid; gap: .6rem; margin-top: 1.8rem; }
.contatti-rapidi a { width: 100%; justify-content: space-between; }
.carta-modulo { padding: clamp(1.3rem, 3vw, 2.2rem); border: 1px solid var(--bordo); border-radius: calc(var(--raggio) * 1.2); background: var(--muro); box-shadow: var(--ombra); }
.campi-due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; margin-bottom: .35rem; font-weight: 650; font-size: .95rem; }
.facoltativo { font-weight: 400; color: var(--secondario); }
.campo input, .campo select, .campo textarea {
  display: block; width: 100%; min-height: 48px; padding: .7rem .85rem;
  font: inherit; font-size: 1rem; /* evita lo zoom automatico su iPhone */
  color: var(--inchiostro); background: var(--campo);
  border: 1px solid var(--bordo-forte); border-radius: .75rem;
  transition: border-color .2s, box-shadow .2s;
}
.campo select option { background: var(--campo); color: var(--inchiostro); }
.campo textarea { resize: vertical; min-height: 8rem; }
.campo :is(input, select, textarea):hover { border-color: var(--accento); }
.campo :is(input, select, textarea):focus { border-color: var(--accento); box-shadow: 0 0 0 3px var(--tocco); outline: 2px solid var(--lume); outline-offset: 2px; }
.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 var(--bordo-forte); border-radius: .8rem; background: var(--fondo);
  text-align: center; color: var(--testo-medio); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.zona-allegati:hover, .zona-allegati.sopra { border-color: var(--accento); background: var(--tocco); }
.zona-allegati:focus-within { border-color: var(--accento); box-shadow: 0 0 0 3px var(--tocco); outline: 2px solid var(--lume); outline-offset: 3px; }
.zona-allegati.errata { border-color: var(--avviso); }
.zona-allegati strong { color: var(--inchiostro); font-weight: 650; }
.zona-allegati .scegli { color: var(--accento); 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; }
.elenco-allegati { margin-top: .6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.elenco-allegati li { display: flex; align-items: center; gap: .6rem; padding: .3rem .35rem .3rem .85rem; border: 1px solid var(--bordo); border-radius: .8rem; background: var(--campo); }
.nome-allegato { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peso-allegato { flex: none; font-size: .85rem; color: var(--secondario); }
.togli-allegato { flex: none; min-height: 44px; padding: .4rem 1rem; font: 650 .9rem/1.2 var(--testo); color: var(--inchiostro); background: transparent; border: 1px solid var(--bordo-forte); border-radius: .7rem; cursor: pointer; }
.togli-allegato:hover { border-color: var(--accento); background: var(--tocco); }
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.4rem; }
.informativa { margin: 0; flex: 1 1 14rem; font-size: .88rem; color: var(--secondario); }
/* Invio senza JavaScript spento finché app.minilab.it non è online (ARCHITETTURA.md, v0.5). */
#modulo-preventivo[aria-busy="true"] button[type="submit"] { opacity: .6; cursor: progress; }
.esito, .nota { margin: 1.2rem 0 0; padding: .95rem 1.1rem; border-radius: .9rem; background: var(--tocco); border: 1px solid var(--accento); }
.esito p { margin: 0; }
.esito .codice-esito { margin-top: .5rem; }
.codice-esito strong, #codice-richiesta { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .03em; color: var(--accento); }
.azioni-esito { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.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); border-radius: .9rem; font-size: .95rem; }
.stato-invio .anello { width: 20px; height: 20px; border-width: 2px; }
.stato-invio .percentuale { font-size: .8rem; font-weight: 700; color: var(--accento); font-variant-numeric: tabular-nums; }
.stato-invio .barra { grid-column: 1 / -1; display: block; height: 3px; border-radius: 999px; overflow: hidden; background: var(--bordo); }
.stato-invio .barra span { display: block; width: 0; height: 100%; background: var(--accento); transition: width .2s linear; }

/* --- Piè di pagina con la firma grande --- */
#piede { margin-top: clamp(5rem, 10vw, 8rem); padding: clamp(3rem, 6vw, 4.5rem) var(--margine) 0; border-top: 1px solid var(--bordo); overflow: hidden; }
.piede-colonne, .piede-legale, .firma { max-width: var(--largo); margin-left: auto; margin-right: auto; }
.piede-colonne { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.piede-marchio p { color: var(--secondario); max-width: 18rem; }
.piede-marchio strong { color: var(--inchiostro); font-size: 1.2rem; }
#piede nav a { display: inline-block; padding: .3rem 0; color: var(--testo-medio); text-decoration: none; }
#piede nav a:hover { color: var(--accento); }
.piede-legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--bordo); font-size: .88rem; color: var(--secondario); }
.piede-legale p { margin: 0; }
.firma {
  margin-top: 1rem; margin-bottom: -.18em;
  font-size: clamp(5rem, 22vw, 19rem); font-weight: 800; letter-spacing: -.07em; line-height: .9;
  color: transparent; -webkit-text-stroke: 1px var(--oro); opacity: .55; user-select: none;
}

/* --- Comparsa allo scorrimento: solo CSS (animation-timeline), niente JavaScript a ogni fotogramma.
   Dove il browser non la supporta o con "riduci movimento" tutto è semplicemente già visibile. --- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .appare { animation: sali linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    .parole .parola { animation: accendi linear both; animation-timeline: view(); animation-range: cover 10% cover 40%; }
  }
  .carta-1 { animation: fluttua 7s ease-in-out infinite alternate; }
  .punto { animation: lampeggia 1.2s steps(1) infinite; }
  .grafico i { animation: cresce .9s var(--curva) both; }
  .grafico i:nth-child(2) { animation-delay: .06s; } .grafico i:nth-child(3) { animation-delay: .12s; } .grafico i:nth-child(4) { animation-delay: .18s; }
  .grafico i:nth-child(5) { animation-delay: .24s; } .grafico i:nth-child(6) { animation-delay: .3s; } .grafico i:nth-child(7) { animation-delay: .36s; }
}
@keyframes sali { from { opacity: 0; transform: translateY(28px); } }
@keyframes accendi { from { opacity: .18; } }
@keyframes fluttua { to { transform: translateY(-10px); } }
@keyframes gira { to { transform: rotate(1turn); } }
@keyframes lampeggia { 50% { opacity: .15; } }
@keyframes cresce { from { transform: scaleY(.1); } }

/* Anello di avvio (#avvio, stile in linea in index.html): gira solo mentre arriva QUESTO file.
   Appena c'è lo stile la pagina è leggibile: l'anello sparisce senza aspettare JavaScript. */
#avvio { opacity: 0; visibility: hidden; pointer-events: none; }
#avvio :is(p, a) { animation: none; }

/* Rete lenta, "risparmio dati" o telefono con poca memoria (data-rete="lenta", script di avvio e home.js):
   niente animazioni decorative, che costano batteria e lavoro al processore. */
html[data-rete="lenta"] :is(.disco, .app, .uscita, .carta-1, .punto, .grafico i) { animation: none; }
.solo-rete-lenta { display: none; }
html[data-rete="lenta"] .solo-rete-lenta { display: block; }

/* Cambio di tema con dissolvenza (tema.js) */
::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;
}

/* --- Schermi medi e telefoni --- */
@media (max-width: 1020px) {
  .nav-principale { display: none; }
  .pillola { justify-content: space-between; }
  #menu-telefono { display: block; }
  .eroe { grid-template-columns: 1fr; min-height: 0; padding-top: 7rem; }
  .eroe-visivo { justify-self: center; max-width: 22rem; aspect-ratio: 1 / .95; }
  .bento { grid-template-columns: 1fr 1fr; }
  .scheda-larga { grid-column: 1 / -1; }
  .passi:not(.passi-colonna) { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .metodo-griglia { grid-template-columns: 1fr; }
  .fiducia { grid-template-columns: 1fr 1fr; }
  .contatti-griglia { grid-template-columns: 1fr; }
  .contatti-testo { position: static; }
  .piede-colonne { grid-template-columns: 1fr 1fr; }
  .piede-marchio { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 5.5rem; scroll-padding-bottom: 6rem; } /* il fuoco non finisce sotto il pulsante fisso */
  body { padding-bottom: 5rem; } /* spazio per il pulsante del preventivo in basso */
  #testata { top: .5rem; }
  .pillola { gap: .4rem; padding-left: .8rem; min-height: 3.3rem; }
  .accedi { padding: .55rem .8rem; }
  .testo-menu { display: none; }
  #menu-telefono > summary { padding: .55rem .85rem; }
  /* Preventivo in basso, vicino al pollice; si toglie mentre si scrive nel modulo (classe "scrive" da modulo.js). */
  #cta-preventivo { position: fixed; left: 1rem; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); min-height: 52px; font-size: 1rem; box-shadow: 0 14px 34px -12px rgba(20, 17, 15, .55); }
  html.scrive #cta-preventivo { display: none; }
  .pannello { position: fixed; left: 1rem; right: 1rem; top: 4.6rem; width: auto; max-height: calc(100svh - 6rem); overflow-y: auto; }
  #menu-telefono .pannello > ul:first-child a { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
  .eroe-visivo { max-width: 17rem; }
  .eroe-azioni .pulsante-grande { flex: 1 1 100%; }
  .bento, .passi, .campi-due, .metodo-griglia { grid-template-columns: 1fr; }
  .scheda { min-height: 0; }
  .scheda h3 { margin-top: 1.4rem; }
  .mini-ai { display: none; }
  .scheda-ricca :is(h3, p:not(.distintivo)) { max-width: none; }
  .distintivo { position: static; align-self: flex-start; margin-bottom: 1rem; }
  .fiducia li { padding-right: .8rem; }
  .citta-skyline { position: relative; width: 120%; max-width: none; margin: 1.5rem -10% -2rem; }
  .riquadro-citta { padding-bottom: 0; }
  .piede-colonne { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 360px) {
  #logo span { display: none; }
}

/* --- Pagine semplici (in-arrivo, privacy, grazie, errore) --- */
.pagina-semplice main { max-width: 46rem; margin: 0 auto; padding: 8rem var(--margine) 3rem; }
.pagina-semplice .pillola { justify-content: space-between; }
.pagina-semplice h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.pagina-semplice h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.pagina-semplice .mini { display: block; width: 84px; height: auto; margin-bottom: 1.5rem; }
.pagina-semplice #piede { margin-top: 2rem; padding-bottom: 2rem; text-align: center; font-size: .9rem; color: var(--secondario); }
.azioni-pagina { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.da-completare { padding: .05rem .4rem; border-radius: .3rem; background: rgba(180, 35, 24, .1); color: var(--avviso); font-weight: 650; font-size: .9em; }