/* ==========================================================================
   MIRA - Foglio di stile unico

   UN FILE SOLO PER DUE FAMIGLIE DI PAGINE, e la ragione non è il numero di
   richieste: è che i colori, la scala tipografica e i passi di spaziatura
   devono essere gli stessi ovunque, e due file con due :root coincidono il
   primo giorno e divergono il giorno che qualcuno ritocca un colore da una
   parte sola. È lo stesso argomento di mira/web/robot.py per l'elenco delle
   pagine indicizzabili: una fonte, tante letture.

   LE DUE FAMIGLIE SONO E RESTANO DUE.
   - IL SITO (home, concessionari, privacy, termini, area riservata) parla a
     chi non ci conosce ancora: fasce a tutta larghezza, testata con il menu,
     chiusura con le colonne. Marcata `class="sito"` sul body.
   - I DOCUMENTI (proposta, scheda impianto, link non valido) sono l'offerta
     commerciale di un concessionario, si aprono da un link nella mail e si
     stampano. Colonna stretta, niente navigazione, niente comandi sulla
     carta. Marcati `class="documento"` sul body.

   LE DUE CLASSI SUL BODY NON SONO DECORAZIONE: sono l'unica cosa che tiene
   separati cinque nomi che le due famiglie usano entrambe con significati
   diversi — `.testata`, `.titolo`, `.apertura`, `.contenuto`, `.chiusura`.
   Sul sito `.testata` è la barra con il logo e il menu; su una proposta è la
   riga con le date e il pulsante di condivisione. Senza le due classi la
   proposta erediterebbe il bordo e il fondo bianco della barra del sito, e la
   home il margine da 680px della colonna di un documento.

   Le cinque regole in doppio sono l'unico punto di attrito fra i due mondi.
   Sono segnate qui sotto una per una con la sigla ⟂ CONTESA: chi arriva con
   un export nuovo del design system deve riportare il prefisso `.sito ` su
   quei cinque selettori e su nient'altro. Tutti gli altri nomi sono disgiunti
   e non hanno bisogno di prefisso.

   LE REGOLE DEL SITO SONO QUELLE CONSEGNATE, nella loro forma compatta e non
   riscritte in casa. Riespanderle e ricommentarle sarebbe stato lavoro con un
   rischio di trascrizione e nessun guadagno: così un export nuovo si
   confronta riga per riga con quello che c'è, invece di doverlo ritradurre.
   Le regole dei documenti sono le nostre, con i commenti che avevano.

   NESSUNA CDN, E ADESSO NEMMENO PER IL FONT. Ogni dominio in più è un punto
   in cui la pagina può rompersi per motivi che non dipendono da noi, ed è un
   terzo che vede l'indirizzo IP di chi apre l'offerta. Lato arrivava da Google
   Fonts, cioè da un server negli Stati Uniti, e ogni visita ci mandava
   l'indirizzo IP del visitatore prima che avesse acconsentito a qualcosa: è il
   trasferimento su cui i tribunali tedeschi hanno già condannato, ed era
   l'unica ragione per cui questo sito avrebbe avuto bisogno di un banner.
   Adesso i woff2 stanno in mira/web/statici/font/ e li serviamo noi. Il
   guadagno vero non è la velocità, è che la frase «questo sito non contatta
   nessun terzo» diventa vera e la privacy policy può scriverla.
   ========================================================================== */

/* ---------- Lato, ospitato in proprio --------------------------------------
   CINQUE TAGLI, E OGNUNO PERCHÉ UNA REGOLA QUI SOTTO LO CHIEDE. Google Fonts
   ne serviva quattro; l'elenco è stato rifatto leggendo le regole, non
   ricopiando la vecchia URL.
     300  .sito .apertura — il sommario di ogni fascia
     400  body, .corpo, .chiusura__* — il testo corrente
     700  .occhiello, .menu a, .btn, .richiamo — etichette e pulsanti
     900  .targa, .sito .titolo — i due livelli di testata
     400 corsivo  .corpo em — il titolo del libro su /concessionari
   Il corsivo non c'era e non è un peso in più su ogni visita: un @font-face si
   scarica solo quando una regola lo incontra davvero, quindi lo paga la sola
   pagina che ha un <em>. Senza, il browser inclinava il tondo di suo, che è la
   finta che si nota proprio sul nome di un libro.

   DUE FILE PER TAGLIO, latin e latin-ext, con lo unicode-range che li divide.
   Non è pignoleria: l'italiano vive tutto dentro latin (à è ì ò ù ci stanno,
   sono sotto U+00FF), quindi latin-ext non si scarica quasi mai — resta lì per
   un nome proprio straniero, e allora arriva solo quel file. Sono gli stessi
   ritagli che serviva Google, presi dal suo stesso CSS: nessuna conversione da
   TTF, nessuna perdita, nessun byte in più di quelli che il browser già
   scaricava.

   font-display:swap ovunque, come prima: il testo si legge subito con il font
   di sistema e cambia quando Lato è arrivato. Adesso è un'attesa di rete
   locale, non transatlantica.

   LA CODA DI RIPIEGO NEI TOKEN RESTA E CONTA ANCORA. Non serve più contro
   Google irraggiungibile, serve contro un woff2 che non è finito nel commit. */
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/statici/font/lato-300-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/statici/font/lato-300-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/statici/font/lato-400-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/statici/font/lato-400-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/statici/font/lato-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lato';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/statici/font/lato-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/statici/font/lato-700-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/statici/font/lato-700-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url('/statici/font/lato-900-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url('/statici/font/lato-900-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- token: la fonte unica ----------------------------------------
   I nomi sono quelli del design system. Prima i documenti avevano i propri
   (--mirada-navy, --mirada-yellow, …) con gli stessi identici otto valori:
   due vocabolari per una tavolozza sola, cioè la divergenza in attesa di
   succedere. Sono stati riscritti su questi, e nessun valore è cambiato. */
:root{
--navy:#1B2A4A;--giallo:#F5A623;--ciano:#00BCD4;--ciano-chiaro:#E0F7FA;
--scuro:#0D1B2A;--grigio-fondo:#F4F6F8;--grigio-medio:#B0BEC5;--bianco:#fff;
--navy-80:#495471;--navy-60:#767F95;--giallo-scuro:#D98D0C;--grigio-linea:#DDE2E7;

--font:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
--fs-targa:clamp(38px,6.2vw,76px);--fs-h1:clamp(28px,3.2vw,40px);
--fs-body-lg:19px;--fs-body:17px;--fs-small:15px;--fs-caption:13px;--fs-overline:12px;

--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-11:192px;
--page-max:1160px;--page-narrow:760px;--page-margin:24px;
--control-h:48px;--radius:2px;--dur:160ms;--ease:cubic-bezier(.2,0,0,1);
}
@media(min-width:900px){:root{--page-margin:48px}}
@media(prefers-reduced-motion:reduce){:root{--dur:0ms}}

/* ---------- base comune ---------------------------------------------------
   Vale per tutte e due le famiglie. Chi legge una proposta e chi legge la
   home devono trovare lo stesso corpo di testo e lo stesso nero.

   LA CATENA DI RIPIEGO DOPO LATO non è decorativa e non è quella dell'export.
   Prima serviva contro Google Fonts irraggiungibile; adesso che i woff2 sono
   nostri quel caso non esiste più, ma il ripiego conta uguale per un caso
   peggiore perché silenzioso — un file font che non è finito nel commit, o una
   cartella /statici/font/ non copiata sulla VPS. In quel caso la pagina deve
   restare leggibile con il font di sistema invece di cadere su un serif di
   default, che è il modo in cui il guasto si vede senza spiegarsi. -apple-system e
   BlinkMacSystemFont in testa alla coda erano già nel foglio dei documenti e
   restano: sono il modo di chiedere il font di sistema vero, non un font
   qualsiasi che gli somiglia. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 var(--fs-body)/1.6 var(--font);color:var(--navy);background:var(--bianco);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
::selection{background:var(--giallo);color:var(--navy)}

/* Il segno del fuoco da tastiera. L'outline trasparente accanto all'ombra non
   è ridondanza: box-shadow non viene disegnato nelle modalità a contrasto
   forzato, dove invece l'outline torna visibile e prende il colore di
   sistema. Senza quella riga, chi naviga in quella modalità perderebbe del
   tutto il segno di dove si trova. */
a:focus-visible,button:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(0,188,212,.45)}

/* Chi ha chiesto meno animazioni non deve trovarne. La riga sui token qui
   sopra azzera le durate del sito; questa copre le transizioni dei documenti,
   che sono scritte in chiaro e non passano da --dur. */
@media (prefers-reduced-motion: reduce){*{transition:none!important}}


/* ==========================================================================
   IL SITO
   Regole del design system, come consegnate. Vedi la nota in testa: le sole
   modifiche sono il prefisso `.sito ` sui cinque selettori contesi.
   ========================================================================== */

/* ---------- impaginazione ---------- */
.fascia{padding:var(--sp-9) var(--page-margin)}
.fascia--hero{padding-block:var(--sp-11)}

/* ---------- la fascia d'apertura con la foto -------------------------------
   Le due hero non sono decorazione: la superficie pubblicitaria porta il nostro
   logo, quindi la foto è la dimostrazione del servizio. Tutto quello che segue
   serve a non coprirla mentre ci si scrive sopra.

   L'IMMAGINE È UN ELEMENTO, NON UN background-image, e la differenza non è
   accademica. Un background non ha alt, non ha srcset, non è un elemento che
   il browser possa scoprire mentre analizza il markup e quindi parte tardi.
   Qui invece è un <img> dentro un <picture>: prende srcset, prende
   loading="eager", ed è la prima cosa che parte.

   POSIZIONATA IN ASSOLUTO E RITAGLIATA CON cover, con l'altezza della fascia
   dichiarata qui sotto: su schermo stretto la foto deve TAGLIARE e non
   rimpicciolirsi. Un'immagine intera scalata su un telefono diventa una
   striscia alta 195px in cui il cartello non si riconosce più, cioè l'esatto
   contrario del motivo per cui la foto c'è.

   IL FONDO BIANCO SOTTO L'IMMAGINE non è un dettaglio: è quello che si vede se
   la foto non carica. Bianco e non un colore scelto per stare bene con la
   foto, perché il testo è navy e deve restare leggibile proprio nel caso in cui
   la foto non c'è. Il velo sopra è bianco pure lui, quindi il degrado è
   continuo: senza immagine resta esattamente la pagina di prima.

   isolation:isolate crea un contesto di sovrapposizione locale, così i tre
   z-index qui sotto (foto 0, velo 1, testo 2) valgono fra loro e non entrano
   in gara con il resto della pagina — la testata e il "torna su" hanno i
   propri. overflow:hidden perché l'immagine ritagliata non sbordi negli angoli
   durante il ridimensionamento. */
/* IL PADDING SCENDE DA --sp-11 A --sp-9 rispetto alla hero senza foto, e non è
   una limatura estetica: con 192px sopra e sotto più una colonna di testo
   stretta la fascia arrivava a 996px, cioè quasi un intero schermo di portatile
   occupato dalla sola apertura. min-height garantisce che resti una fascia
   ampia anche quando il testo è corto; il padding non deve aggiungerci sopra
   mezzo schermo quando il testo è lungo. */
.fascia--foto{position:relative;isolation:isolate;overflow:hidden;background:var(--bianco);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--sp-9);min-height:clamp(460px,44vw,600px)}
.fascia__foto{position:absolute;inset:0;z-index:0;display:block}
.fascia__foto img{width:100%;height:100%;object-fit:cover;object-position:62% center}
/* width:100% NON È RIDONDANTE, ed è costato un giro di misure per capirlo.
   .contenuto porta margin-inline:auto per centrarsi, e in un contenitore flex
   in colonna un margine automatico sull'asse trasversale batte lo stiramento
   predefinito: l'elemento smette di occupare tutta la larghezza, si stringe
   sul contenuto e si centra. Il risultato era una colonna di testo larga 522px
   piantata in mezzo alla fascia, cioè esattamente sopra l'impianto, invece che
   allineata a sinistra come tutte le altre fasce. Con la larghezza dichiarata
   il margine automatico torna a fare la sola cosa che gli si chiede, cioè
   centrare la colonna da 1160px dentro la fascia. */
.fascia--foto > .contenuto,
.fascia--foto > .contenuto--stretto{position:relative;z-index:2;width:100%}

/* LA COLONNA DEL TESTO SI FERMA PRIMA DELL'IMPIANTO, e il conto sotto non è
   una precauzione generica: è geometria del ritaglio.
   Con object-position centrato, cover fa coincidere il centro della foto con
   il centro dello schermo. Sulla home il cartello comincia al 49,9% della
   larghezza della foto, cioè praticamente al suo centro — quindi il suo bordo
   sinistro cade sempre intorno al 50% dello schermo, a 1024 come a 1920. Non è
   una coincidenza fortunata, è una proprietà del ritaglio centrato, e ci si
   può appoggiare.
   Da lì la regola: il testo deve finire al 46% della finestra, con quattro
   punti di margine prima dell'impianto. La sottrazione toglie il bordo
   sinistro di .contenuto, che non è fisso — è il margine di pagina sugli
   schermi medi e metà dello spazio avanzato oltre i 1160px su quelli larghi,
   che è esattamente quello che fa il max(). Il risultato è che il testo
   comincia allineato a tutte le altre fasce e finisce dove comincia la foto,
   a qualunque larghezza, senza un elenco di breakpoint da tenere aggiornato. */
.fascia__testo{max-width:calc(46vw - max(var(--page-margin), (100vw - var(--page-max))/2))}

/* SOPRA UNA FOTO SI USA IL NAVY PIENO, non le sue due diluizioni.
   Il design system scrive l'occhiello in --navy-60 e il sommario in --navy-80:
   sono grigi-blu tenui, e su un fondo piatto e chiarissimo funzionano perché
   il fondo non ha niente da dire. Su una fotografia velata il fondo non è
   piatto e non è chiarissimo, e le due diluizioni crollano — misurate, il
   sommario passava da 6.95:1 sul grigio della fascia sotto a 2.57:1 sopra la
   pensilina. Il navy pieno sulle stesse identiche condizioni sta fra 6 e 9.

   NON È UN'ECCEZIONE AL DESIGN SYSTEM MA LA SUA APPLICAZIONE: il colore del
   testo resta quello, navy, ed è il velo di trasparenza che salta. Una tinta
   scelta per il contrasto contro il bianco non è una tinta scelta per il
   contrasto contro una strada.

   L'occhiello vale la pena dirlo: in --navy-60 sul bianco della pagina sta a
   4.01:1, cioè sotto il 4.5 anche dove non c'è nessuna foto. È una scelta del
   design system consegnato e non la tocco qui — ma dentro la hero non deve
   peggiorare, e con il navy pieno non peggiora.

   VALE A TUTTE LE LARGHEZZE perché a tutte le larghezze il testo sta sopra la
   foto. Non è scontato: per un giro questa regola è stata sotto un min-width,
   quando sui telefoni il testo scendeva sotto l'immagine sul bianco, e lì le
   diluizioni andavano benissimo. Adesso che sta sopra la foto anche lì, il
   navy pieno serve anche lì.

   IL PREFISSO .sito NON È DECORATIVO, ed è la ragione per cui la prima stesura
   non funzionava: `.apertura` è uno dei cinque nomi contesi, e `.sito
   .apertura` più in basso nel foglio ha la stessa specificità di
   `.fascia--foto .apertura`. A parità vince chi viene dopo, e quella regola
   viene dopo — il sommario restava --navy-80 e continuava a misurare 4.20:1.
   Con il prefisso la specificità sale di una classe e l'ordine non conta più. */
.sito .fascia--foto .occhiello,
.sito .fascia--foto .apertura{color:var(--navy)}

/* IL VELO È IN CSS E NON NELL'IMMAGINE, per due ragioni che valgono entrambe.
   La prima è pratica: la densità si regola ricaricando la pagina invece di
   rigenerare due file in quattro varianti. La seconda è che il file resta
   pulito e riusabile — la stessa foto serve altrove senza portarsi dietro uno
   schiarimento deciso per un testo che lì non c'è.

   SFUMATO E NON UNIFORME. Un velo pieno alza il contrasto ovunque e spegne la
   foto: si vedrebbe una fotografia slavata, e tanto valeva non metterla. Qui è
   denso nel terzo sinistro — dove ci sono strada e cielo, cioè le superfici
   uniformi su cui il testo si appoggia bene — e si dissolve prima di arrivare
   sull'impianto, che resta a piena saturazione. La densità esatta non è
   scelta a occhio: è quella che serve per stare sopra 4.5:1, misurata in
   pagina e annotata nel blocco del contrasto più sotto.

   BIANCO E NON NERO, cioè velo CHIARO. Un velo scuro avrebbe imposto testo
   bianco, e il testo bianco avrebbe cambiato il registro di tutta la pagina:
   la scala tipografica del design system è navy su chiaro, e una hero che
   inverte i colori chiede a chi scorre di ritarare l'occhio due volte. */
.fascia--foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.68) 30%,
    rgba(255,255,255,.44) 48%,
    rgba(255,255,255,.10) 66%,
    rgba(255,255,255,0)   80%)}

/* SU TELEFONO IL RITAGLIO SPOSTA IL CENTRO A DESTRA, e il numero è calcolato,
   non provato a occhio. Con cover su un contenitore più stretto di 2:1 la
   scala la detta l'altezza, quindi si vede una finestra larga W/(2H) della
   foto. A 390 punti su una fascia da ~500 se ne vede il 39%.
   Sulla home il cartello sta fra il 49,9% e il 75,2% della larghezza — è largo
   il 25,3%, quindi in quella finestra ci sta, ma solo se la finestra è al
   posto giusto: centrata al 50% la taglierebbe a metà. Perché il cartello
   resti intero servono valori di object-position fra il 58% e l'84%; 72% è il
   centro di quell'intervallo, cioè il punto più lontano da tutti e due i modi
   di sbagliare. Verificato a 360, 390 e 430.
   Sulla pensilina il soggetto è più largo e più centrale e il 72% le sta bene
   uguale, quindi la regola è una sola: due valori diversi sarebbero due cose
   da tenere allineate per un guadagno che non si vede.

   L'ALTEZZA SI ACCORCIA, E NON PER ESTETICA. Con i 96px di padding della fascia
   e una targa che va a cinque righe si arrivava a ~700px, e più è alta più la
   finestra sulla foto si stringe: a 700px se ne vedrebbe il 28%, contro un
   cartello che ne occupa il 25,3% — starebbe dentro per due punti percentuali,
   cioè non starebbe dentro. Accorciare la fascia allarga il campo visivo.

   LA DISPOSIZIONE NON CAMBIA, CAMBIA LA SFUMATURA. Il testo resta sopra la foto
   anche qui; quello che cambia è che la colonna non si restringe più — 390
   punti meno i margini fanno 342 e la targa a 38px se li prende tutti, una
   colonna al 46% sarebbe due parole per riga — e il velo si allunga verso
   destra per accompagnarla.

   IL VERSO DEL VELO RESTA DA SINISTRA A DESTRA, e questa è la cosa che conta.
   Per un giro qui c'era una sfumatura verticale, dall'alto in basso, e non
   funzionava: le righe basse — "Dal 2020. Vocale dal 2026." sulla home, la
   coda del sommario su concessionari — cadevano nella zona già dissolta, sopra
   il guardrail e l'asfalto, e misuravano 2.5-2.7:1. Il difetto non era la
   sovrapposizione ma l'asse: orizzontale, ogni riga attraversa la stessa
   sfumatura dal denso al chiaro, e nessuna riga finisce nel punto scoperto.
   Misurato sulle tre larghezze, il minimo passa da 2.54:1 a 6.19:1.

   LE DENSITÀ SONO PIÙ ALTE CHE SU SCHERMO LARGO (0.82 contro 0.70 a sinistra,
   0.60 contro 0.44 a metà) perché il testo arriva molto più a destra: là si
   ferma al 46% della finestra, qui tocca il bordo. È lo stesso velo tirato più
   in lungo, non un velo diverso.

   IL LOGO SULL'IMPIANTO PUÒ CADERE SOTTO IL TESTO, ed è una scelta presa
   sapendo cosa costa. Su uno schermo da 390 punti le due cose non stanno
   insieme — o si legge il claim o si legge il logo — e fra le due vince il
   claim; il logo è comunque già nella testata. Su schermo largo non c'è da
   scegliere: il testo si ferma prima e l'impianto resta intero a piena
   saturazione.
   Con le foto del 27 settembre 2026, che portano il logo in alto sul
   pannello, a 390 punti sulla home il logo cade sopra il titolo, subito sotto
   il filetto, e si legge; SU /concessionari IL LOGO DELLA PENSILINA CADE SOTTO
   IL TITOLO, "il tuo listino", PER SCELTA. È stato visto negli scatti e
   accettato con la regola qui sopra: chi lo ritrova non lo corregga
   spostando il ritaglio senza rifare quella scelta. */
@media(max-width:719px){
  .fascia--foto{padding-block:var(--sp-8);min-height:clamp(420px,120vw,520px)}
  .fascia__foto img{object-position:72% center}
  .fascia__testo{max-width:none}
  .fascia--foto::after{background:linear-gradient(to right,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.78) 35%,
    rgba(255,255,255,.60) 60%,
    rgba(255,255,255,.34) 80%,
    rgba(255,255,255,.12) 100%)}
}
.fascia--stretta{padding-block:var(--sp-7)}
.fascia--grigia{background:var(--grigio-fondo);border-top:1px solid var(--grigio-linea)}
.fascia--blu{background:var(--navy);color:var(--bianco)}
.fascia--scura{background:var(--scuro);color:var(--bianco)}
.sito .contenuto{max-width:var(--page-max);margin-inline:auto}          /* ⟂ CONTESA */
.contenuto--stretto{max-width:var(--page-narrow);margin-inline:auto}

/* ---------- tipografia ---------- */
.occhiello{font:700 var(--fs-overline)/1.2 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--navy-60);margin-bottom:var(--sp-6)}
.fascia--blu .occhiello,.fascia--scura .occhiello{color:var(--grigio-medio)}
.filetto{width:56px;height:4px;background:var(--giallo);margin-bottom:var(--sp-6)}
.targa{font:900 var(--fs-targa)/1.06 var(--font);letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.sito .titolo{font:900 var(--fs-h1)/1.2 var(--font);letter-spacing:-.01em;max-width:46ch;text-wrap:balance}   /* ⟂ CONTESA */
.sito .apertura{font:300 var(--fs-body-lg)/1.6 var(--font);color:var(--navy-80);max-width:64ch;margin-top:var(--sp-5)}   /* ⟂ CONTESA */
.fascia--blu .apertura,.fascia--scura .apertura{color:var(--bianco)}
.corpo{font:400 var(--fs-body)/1.6 var(--font);color:var(--navy-80);max-width:64ch;margin-top:var(--sp-5)}
.fascia--blu .corpo,.fascia--scura .corpo{color:var(--bianco)}
.corpo em{font-style:italic}
.fascia--hero .apertura{margin-top:var(--sp-7)}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
min-height:var(--control-h);padding:0 var(--sp-5);border:1px solid transparent;border-radius:var(--radius);
font:700 var(--fs-small)/1 var(--font);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--primario{background:var(--giallo);color:var(--navy);border-color:var(--giallo)}
.btn--primario:hover{background:var(--giallo-scuro);border-color:var(--giallo-scuro)}
.btn--bianco{background:var(--bianco);color:var(--navy);border-color:var(--bianco);min-height:56px;padding:0 var(--sp-6);font-size:var(--fs-body)}
.btn--bianco:hover{background:var(--giallo);border-color:var(--giallo)}
.btn--grande{min-height:56px;padding:0 var(--sp-6);font-size:var(--fs-body)}
.btn--ghost{background:transparent;color:var(--navy);padding:0 var(--sp-2)}
.btn--ghost:hover{color:var(--giallo-scuro)}
.richiamo{display:inline-block;margin-top:var(--sp-6);font:700 var(--fs-small)/1 var(--font);letter-spacing:.08em;text-transform:uppercase}
.richiamo:hover{color:var(--giallo-scuro)}
.richiamo--chiaro{color:var(--giallo)}
.richiamo--chiaro:hover{color:var(--bianco)}

/* IL PULSANTE NON VA A CAPO. "Affidaci il tuo inventario" è in maiuscoletto
   con .08em di spaziatura fra le lettere, e a 17px misura più dei 342px di
   colonna che restano su un telefono da 390: si spezzava in due righe, con
   "INVENTARIO" da solo sotto. Un pulsante su due righe non è solo brutto —
   smette di leggersi come un comando e comincia a leggersi come una frase.

   TRE LEVE, E SI TOCCA LA PIÙ MITE. Il testo non si accorcia: è la promessa
   della pagina e la decide chi scrive, non il foglio di stile. Delle altre due
   si usano insieme, e nessuna fino in fondo:
   - il corpo torna a --fs-small, che NON è un rimpicciolimento arbitrario ma
     la misura che .btn ha di suo: è .btn--grande a portarlo a 17px, e --grande
     è una scelta che ha senso dove c'è spazio. Sotto i 480 non ce n'è.
   - il padding orizzontale scende da --sp-6 a --sp-4. L'altezza resta 56px,
     quindi il bersaglio da toccare resta abbondante: si stringono i fianchi,
     non l'area utile.
   white-space:nowrap è quello che rende l'esito non negoziabile. Senza, un
   giorno che qualcuno allunga il testo il pulsante tornerebbe a spezzarsi in
   silenzio; con, deborda in modo visibile e chi lo vede lo aggiusta.

   IL CONFINE È MISURATO, NON SCELTO A OCCHIO, e la misura da guardare non è
   quella con Lato. Con font-display:swap la prima cosa che si vede è il testo
   nel font di ripiego, che è più largo del 2% scarso: le due larghezze del
   pulsante, misurate in pagina, sono
       17px, padding 32  →  343px con Lato, 350px di ripiego
       17px, padding 16  →  311px con Lato, 318px di ripiego
       15px, padding 16  →  282px con Lato, 284px di ripiego
   e la colonna disponibile è la larghezza dello schermo meno 48 di margini.
   Contro il ripiego, quindi, la forma grande vuole 398px di schermo e la
   piccola ne vuole 332. Il confine sta a 420: sopra, la forma grande ha 23px
   di margine anche nel caso peggiore; sotto, si passa alla piccola, che a 360
   ne ha 28. Nessuno dei due lati passa vicino allo zero, ed è il punto —
   scegliendo 390 come confine il pulsante sarebbe sopravvissuto con Lato e
   sarebbe debordato nel mezzo secondo prima che Lato arrivi, cioè il difetto
   che si vede solo con la rete lenta e non si riproduce mai in ufficio.

   COSÌ 430 NON PERDE NIENTE: è la larghezza dei telefoni grandi, la forma
   grande ci sta comoda, e non c'era ragione di rimpicciolire una cosa che
   funzionava. Si accorcia dove la colonna è davvero stretta e lì soltanto.

   IN UNA REGOLA A PARTE e non dentro .btn--grande, che è riga di design
   system: chi arriva con un export nuovo lo confronta e non trova sorprese. */
.btn{white-space:nowrap}
@media(max-width:420px){
  .btn--grande{padding:0 var(--sp-4);font-size:var(--fs-small)}
}

/* ---------- testata ---------- */
.sito .testata{border-bottom:1px solid var(--grigio-linea);background:var(--bianco);position:relative;padding-inline:var(--page-margin)}   /* ⟂ CONTESA */
.testata__barra{max-width:var(--page-max);margin-inline:auto;height:80px;display:flex;align-items:center;gap:var(--sp-6)}
.testata__logo{display:block}
.testata__logo img{height:26px;width:auto}
.menu{display:flex;gap:var(--sp-5);margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.menu a{font:700 var(--fs-overline)/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid transparent;padding-bottom:2px}
.menu a:hover,.menu a[aria-current]{border-bottom-color:var(--giallo)}
.hamburger{display:none;margin-left:auto;width:var(--control-h);height:var(--control-h);padding:0 12px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.hamburger span{display:block;height:2px;background:var(--navy);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.testata[data-aperto] .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.testata[data-aperto] .hamburger span:nth-child(2){opacity:0}
.testata[data-aperto] .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1080px){
  .hamburger{display:flex}
  .testata__barra{flex-wrap:wrap;height:auto;min-height:80px;align-items:center}
  .menu{display:none;flex:0 0 auto;order:3;width:100%;flex-direction:column;gap:0;margin-left:0;
    padding-bottom:var(--sp-4);border-top:1px solid var(--grigio-linea)}
  .testata[data-aperto] .menu{display:flex}
  .menu a{display:flex;align-items:center;min-height:var(--control-h);border-bottom:1px solid var(--grigio-linea);padding-bottom:0}
}

/* IL LOGO SI RESTRINGE PRIMA CHE LA BARRA SI SPEZZI.
   Il flex-wrap qui sopra serve al menu aperto, che deve andare a capo su una
   riga sua; ma faceva anche una cosa che nessuno voleva — sotto i 400px il
   logo da 267px più il gap da 32 più l'hamburger da 48 più i due margini da 24
   fanno 395, e a 360 e 390 pixel era l'hamburger a essere spinto su una riga
   propria, sotto il logo. Il comando di apertura del menu finiva staccato
   dall'identità, la barra passava da 80 a 106 pixel di altezza e il primo
   schermo perdeva 26 pixel su telefoni dove è già poco.

   La cura è sul logo e non sul wrap: 20px di altezza sotto i 480 fanno 205px
   di larghezza, e 205+24+48+48 = 325 sta dentro i 360 con margine. Sotto i
   360 — telefoni piccoli veri, un iPhone SE in orizzontale ridotto — scende
   ancora a 18px. Il gap scende con lui: fra due elementi soli non deve
   riservare lo spazio che riservava fra logo e menu esteso.

   NON È UN max-width SUL LOGO ma un'altezza: l'immagine è larga 1015 e alta
   99, e vincolarla in altezza è l'unico modo di tenerla proporzionata senza
   fidarsi che nessuno cambi mai il file. È la stessa scelta di
   .intestazione__logo per i loghi dei concessionari.

   flex:0 0 auto sull'hamburger perché non si comprima: è un bersaglio da
   toccare con il pollice, e 48px è la misura minima, non un suggerimento. */
@media(max-width:480px){
  .testata__barra{gap:var(--sp-5)}
  .testata__logo img{height:20px}
  .hamburger{flex:0 0 auto}
}
@media(max-width:359px){
  .testata__barra{gap:var(--sp-4)}
  .testata__logo img{height:18px}
}

/* ---------- riga di servizio ---------- */
.servizio{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;justify-content:space-between}
.servizio p{flex:1 1 480px;color:var(--navy-80)}

/* ---------- chiusura ---------- */
.sito .chiusura{background:var(--scuro);color:var(--bianco);padding-inline:var(--page-margin)}   /* ⟂ CONTESA */
.chiusura__colonne{display:flex;flex-wrap:wrap;gap:var(--sp-7);padding-block:var(--sp-8);align-items:flex-start;max-width:var(--page-max);margin-inline:auto}
.chiusura__marchio{flex:1 1 280px;min-width:280px}
.chiusura__marchio img{height:24px;width:auto}
.chiusura__frase{font:400 var(--fs-small)/1.6 var(--font);max-width:46ch;margin:var(--sp-5) 0 var(--sp-3)}
.chiusura__frase a{color:var(--bianco);border-bottom:1px solid var(--navy-60)}
.chiusura__dato{font:400 var(--fs-caption)/1.7 var(--font);color:var(--grigio-medio)}
.chiusura__colonna{flex:1 1 180px;min-width:180px;display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.chiusura__titolo{font:700 var(--fs-overline)/1.2 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--grigio-medio);margin-bottom:var(--sp-2)}
.chiusura__colonna a{font:400 var(--fs-small)/1.6 var(--font);color:var(--bianco)}
.chiusura__colonna a:hover{color:var(--giallo)}
.chiusura__mail{color:var(--giallo)!important}
.chiusura__legale{border-top:1px solid rgba(255,255,255,.16);padding-block:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;max-width:var(--page-max);margin-inline:auto;font:400 var(--fs-caption)/1.7 var(--font);color:var(--grigio-medio)}
.chiusura__legale a{color:var(--bianco)}

/* ---------- torna su ---------- */
.mail{color:var(--giallo);border-bottom:1px solid rgba(245,166,35,.4)}
.mail:hover{border-bottom-color:var(--giallo)}
.mail--scuro{color:var(--navy);border-bottom-color:var(--giallo)}
.mail--scuro:hover{color:var(--giallo-scuro);border-bottom-color:var(--giallo-scuro)}
.torna-su{position:fixed;right:var(--page-margin);bottom:var(--page-margin);width:var(--control-h);height:var(--control-h);
display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--bianco);
border:0;border-radius:var(--radius);cursor:pointer;font-size:22px;line-height:1;z-index:20;
opacity:0;transform:translateY(8px);pointer-events:none;
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.torna-su[data-visibile]{opacity:1;transform:none;pointer-events:auto}
.torna-su:hover{background:var(--giallo);color:var(--navy)}

/* La pagina dell'area riservata. Una fascia sola, il testo che dice cos'è la
   pagina e il ritorno alla home. Non ha classi proprie perché non ha elementi
   propri — sono le stesse fasce e la stessa tipografia di tutte le altre. */

/* ---------- le due pagine legali ----------------------------------------
   PRIVACY E TERMINI HANNO UN BLOCCO LORO, e le altre pagine no. Il resto del
   sito è fatto di fasce corte con un titolo e due paragrafi, e ogni paragrafo
   si porta la sua classe; qui i blocchi sono ottanta, e ottanta class="corpo"
   scritte a mano sono ottanta occasioni di dimenticarne una. Il testo di un
   documento legale si trascrive, e la trascrizione deve poter essere
   meccanica.

   TRE REGOLE E NESSUN TOKEN NUOVO. L'h2 è il titoletto di sezione, non il
   titolo di una fascia, quindi prende --fs-body-lg in nero pieno e non
   --fs-h1: sotto l'h1 della pagina, sopra il corpo, e la gerarchia si legge
   senza contare le dimensioni.

   LA MISURA DI RIGA È QUELLA DEL SITO, 64ch come .corpo. La colonna è larga
   760px, ma sessanta caratteri sono il punto oltre il quale l'occhio perde la
   riga successiva, e undici sezioni di testo legale sono il posto peggiore
   dove farglielo fare.

   SOTTO L'h2 NON C'È UN LIVELLO, ed è bene saperlo prima di averne bisogno.
   L'h2 sta a --fs-body-lg con peso 900, cioè quattro punti sopra il corpo:
   fra i due non ci sta un terzo livello che si distingua a colpo d'occhio. I
   due documenti di oggi non hanno sottosezioni e la pagina non ne inventa, ma
   il giorno che un testo legale ne avesse servirà un h3, e la sua scala si
   sceglie allora guardando quel testo. Deciderla adesso vorrebbe dire tararla
   su una gerarchia immaginata, e una scala scelta al buio si scopre sbagliata
   quando il testo è già pubblicato. */
.legale h2{font:900 var(--fs-body-lg)/1.3 var(--font);letter-spacing:-.01em;margin-top:var(--sp-7)}
.legale h2:first-child{margin-top:0}
.legale p{font:400 var(--fs-body)/1.6 var(--font);color:var(--navy-80);max-width:64ch;margin-top:var(--sp-4)}
.legale__data{font:400 var(--fs-caption)/1.7 var(--font);color:var(--navy-60);margin-top:var(--sp-5)}
/* LA TESTATA DELLE PAGINE LEGALI NON E' UNA HERO DA VETRINA, e fino al 6
   ottobre 2026 lo era: /privacy e /termini usavano .fascia--hero, il cui
   padding-block di --sp-11 (192px) sotto la data si sommava al padding
   superiore della .fascia del testo (--sp-9, 96px). Fra "Ultimo
   aggiornamento" e il primo paragrafo restavano 288px vuoti, misurati sulle
   due pagine a schermo largo e da telefono -- lo screenshot di Riccardo diceva
   circa 300. La hero alta ha senso in home, dove sotto c'e' un'altra fascia e
   la testata e' il messaggio; qui la testata e' il titolo di un documento, e
   il testo deve cominciare subito sotto. UNA REGOLA PER LE TRE PAGINE LEGALI
   (privacy, termini, informativa del concessionario): la testata si chiude
   senza padding sotto, e la fascia del testo che la segue apre con --sp-7
   (48px), lo stesso respiro che separa una sezione dall'altra (.legale h2).
   La hero delle altre pagine non cambia. */
.fascia--hero-legale{padding-bottom:0}
.fascia--hero-legale + .fascia{padding-top:var(--sp-7)}
/* LE TABELLE DEI TESTI LEGALI, dal 6 ottobre 2026: l'informativa di Media
   System ne ha due (finalita' e basi giuridiche, tempi di conservazione), e
   privacy e termini nessuna. Il testo e' quello dei paragrafi, allineato a
   sinistra e in alto -- una cella lunga accanto a una corta si legge
   dall'inizio, non dal mezzo --, e un filo fra le righe che dice dove finisce
   una voce. Sul telefono le due colonne restano: la prima e' corta per natura
   (il nome del dato), e una tabella spezzata in schede perderebbe il
   confronto per cui il testo l'ha scelta. */
.legale__tabella{width:100%;max-width:72ch;border-collapse:collapse;margin-top:var(--sp-4);
  font:400 var(--fs-body)/1.5 var(--font);color:var(--navy-80)}
.legale__tabella th{font-weight:900;color:var(--navy);text-align:left;vertical-align:bottom;
  padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;border-bottom:2px solid var(--grigio-linea)}
.legale__tabella td{text-align:left;vertical-align:top;
  padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;border-bottom:1px solid var(--grigio-linea)}
.legale__tabella td:first-child{width:38%}
@media(max-width:560px){.legale__tabella{font-size:var(--fs-caption)}}


/* ==========================================================================
   I DOCUMENTI
   Proposta, scheda impianto, link non valido. Identità visiva MiradaOnline,
   standard 2020, con i colori adesso presi dai token qui sopra.

   SI PARTE DAL TELEFONO. Molte proposte si aprono dalla mail sul cellulare,
   quindi le regole di base sono quelle per lo schermo stretto e le media
   query aggiungono, non correggono. Il verso opposto lascerebbe il caso più
   frequente in balìa di quello più raro.
   ========================================================================== */

/* Il fondo grigio e la colonna verticale che tiene il footer in fondo alla
   finestra anche quando il contenuto non arriva a riempirla. Serve alle
   pagine corte — il link non valido — dove altrimenti la fascia scura
   galleggia a metà schermo con il grigio del fondo sotto, e sembra che la
   pagina si sia interrotta. */
.documento {
    background: var(--grigio-fondo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* I LINK DEI DOCUMENTI RESTANO SOTTOLINEATI, al contrario di quelli del sito.
   Non è incoerenza: sul sito i link sono voci di menu, pulsanti e richiami,
   cioè elementi che si riconoscono dalla forma; qui sono parole in mezzo a
   una frase — "Guarda questa ubicazione", un indirizzo di posta, il ritorno
   alla proposta — e una parola cliccabile che non è sottolineata, dentro un
   documento, non si distingue da una parola qualsiasi. */
.documento a {
    text-decoration: underline;
    text-decoration-color: var(--ciano);
    text-underline-offset: 3px;
}

/* --- intestazione ------------------------------------------------------- */

/* In testa c'è l'identità del concessionario, nei due rami: il suo logo se
   logo_path è valorizzata, il suo nome composto se non lo è. Le due varianti
   occupano la stessa fascia e la stessa altezza, così la pagina è la stessa
   pagina in entrambi i casi.
   min-height riserva lo spazio: il logo arriva dal database e le sue
   dimensioni non si conoscono, quindi non si possono dichiarare width e
   height nell'HTML come si faceva con il nostro. Senza questa riga il
   contenuto salterebbe in giù quando l'immagine arriva. */
.intestazione {
    background: var(--bianco);
    padding: 22px 20px 18px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intestazione__logo {
    display: block;
    /* Vincolato in altezza e non in larghezza: un logo di un terzo può essere
       una banda lunga o un quadrato, e limitare il solo lato lungo lascerebbe
       il secondo caso alto il doppio della fascia. Con width e height a auto
       l'immagine non si deforma mai, qualunque proporzione abbia. */
    max-height: 56px;
    max-width: 70%;
    width: auto;
    height: auto;
}

/* IL FONDO SCURO, PER I LOGHI CHIARI. Un marchio bianco — che è una consegna
   comunissima, spesso l'unica che un grafico manda — sulla fascia bianca qui
   sopra sparirebbe del tutto: nessun errore, nessuna immagine rotta, una testa
   vuota, scoperta dal concessionario che apre la sua prima proposta.
   NON SI CHIEDE UN SECONDO FILE e non lo si chiede a una persona: il comando di
   caricamento MISURA il logo e scrive concessionari.logo_fondo, cioè su quale
   fondo va posato. La ragione delle due letture — l'inchiostro su trasparenza,
   il fondo quando il file ne ha uno opaco — sta in mira/identita/logo.py.
   NAVY E NON NERO: è il colore del sistema, lo stesso della chiusura, e una
   fascia nera in testa a un documento altrimenti chiaro si legge come un
   errore di stampa. Il logo del concessionario ci sta sopra come sta sopra il
   bianco nell'altro ramo, e la banda gialla sotto separa uguale. */
.intestazione--scuro {
    background: var(--scuro);
}

/* E IL NOME COMPOSTO DEVE SEGUIRE IL FONDO, altrimenti il ramo senza logo di
   un concessionario dichiarato scuro sarebbe navy su navy: lo stesso difetto
   da cui questa classe difende, spostato di un ramo. Oggi non capita — chi non
   ha logo non ha nemmeno logo_fondo — ma capiterebbe il giorno che qualcuno
   togliesse un logo lasciando la colonna, ed è una riga. */
.intestazione--scuro .intestazione__nome {
    color: var(--bianco);
}

/* Il nostro logo in testa, che compare su una pagina sola: quella del link
   non valido, che è nostra e non di un concessionario. Qui le dimensioni
   native si conoscono e conviene dichiararle in larghezza: è una banda molto
   larga, e vincolarla in altezza come un logo sconosciuto la farebbe uscire
   dalla fascia.
   LA MISURA È CAMBIATA DA 210 A 193 e la resa non è cambiata di un pixel. Il
   file di prima era 1105x184 con un margine trasparente tutto intorno; quello
   del design system è lo stesso disegno ritagliato al vivo, 1015x99. Il
   segno, che in entrambi i casi è largo 1015 unità, occupava 210·1015/1105 =
   193px prima e ne occupa 193 adesso. Chi ritocca questo numero ritocchi
   anche i 230px del blocco a 640px e i 103px della firma in chiusura: sono la
   stessa proporzione applicata tre volte. */
.intestazione__logo--mirada {
    width: 193px;
    max-width: 60%;
    max-height: none;
}

/* Il ramo senza logo: il nome alla misura di un logo, non una riga di testo.
   Peso 900 e lettere leggermente distanziate perché si legga come un marchio
   composto e non come il titolo che qualcuno ha messo lì in attesa
   dell'immagine vera. Nessun text-transform: il nome si scrive come sta scritto
   nel database, e mettere in maiuscolo il nome di una società altrui è una
   decisione tipografica che non tocca a noi. */
.intestazione__nome {
    margin: 0;
    text-align: center;
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: var(--navy);
}

/* La banda in testa al contenuto, che separa l'identità di chi firma da quello
   che firma.

   GIALLA E NON CIANO. È l'altro colore del logo e non compare in nessun altro
   punto della pagina, quindi qui fa da accento invece che da ripetizione. Il
   ciano è già il colore delle superfici piene — la banda del meteo, il pulsante
   grande, i fili della punta di diamante — e una riga ciano sotto una testa
   bianca si leggeva come il bordo inferiore dell'intestazione, cioè come un
   pezzo dell'elemento di sopra, non come lo stacco fra due cose diverse. Il
   navy avrebbe fatto lo stesso, e peggio: è il colore del testo.
   La banda del meteo resta ciano, perché è un'altra cosa: quella è una
   superficie che parla, questa è un segno che divide. */
.banda {
    height: 6px;
    background: var(--giallo);
}

/* --- contenuto ---------------------------------------------------------- */

/* Cresce per spingere il footer in fondo; il margine automatico continua a
   centrare la colonna, che dentro un flex verticale funziona come prima. */
.documento .contenuto {   /* ⟂ CONTESA */
    flex: 1 0 auto;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    padding: 28px 18px 44px;
}

.documento .titolo {   /* ⟂ CONTESA */
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--navy);
    margin: 0 0 6px;
}

/* La riga sotto il titolo: le date a sinistra, la condivisione a destra.
   Il margine di sotto sta qui e non più sulla data, perché adesso è la riga
   intera a staccarsi da quello che segue.
   Va a capo sugli schermi stretti, e allora il pulsante scende sotto la data
   restando a destra: meglio due righe che una data troncata. */
.documento .testata {   /* ⟂ CONTESA */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 0 0 26px;
}

/* LA RIGA DEI DATI È UN'INTESTAZIONE, NON UNA DIDASCALIA, da quando porta il
   numero d'offerta. Era 0.92rem in peso 300 al 75% di opacità, cioè scritta
   per farsi leggere solo da chi la cercava; ma è la riga con cui il prospect
   e l'agente si riferiscono allo stesso documento al telefono, e deve
   trovarsi al primo sguardo. Sale a 1rem in peso 400 a piena opacità: un
   gradino, non un salto — sopra resta il titolo a 1.6rem in 900.
   IL NUMERO VA IN 700 E IL RESTO NO: è il dato che si cerca, le due date sono
   il contorno. Non c'è un peso 500 fra i cinque tagli di Lato che serviamo,
   quindi la gerarchia si fa con 400 e 700 e non inventando una misura che il
   browser dovrebbe simulare.
   FLEX CON GAP E NON PUNTI MEDI FRA LE VOCI: su un telefono la riga va a capo,
   e con i separatori scritti nel testo andava a capo dove capitava, anche in
   mezzo a una data. Il nowrap sulla voce tiene insieme "Emessa il 18 agosto
   2026", il gap fa il lavoro che facevano i punti. */
.date {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--navy);
}
.date__voce {
    white-space: nowrap;
}
.date__numero {
    font-weight: 700;
}

/* --- condivisione ------------------------------------------------------- */

/* L'altezza minima è fissata sul contenitore e non solo sul pulsante: il
   pulsante nasce `hidden` e lo scopre il JavaScript, e senza questa riga la
   testa della pagina si assesterebbe davanti agli occhi di chi sta già
   leggendo. */
.condividi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 34px;
    /* Resta a destra anche quando va a capo. Senza, sullo schermo di un
       telefono — dove la data occupa due righe e il pulsante scende sulla
       terza — la riga nuova contiene un elemento solo, e justify-content non
       ha più niente da distanziare: il pulsante tornerebbe a sinistra, sotto
       l'inizio della data, dove sembra l'inizio di una frase. */
    margin-left: auto;
}

/* VESTITO COME LA PAGINA, NON COME IL BROWSER. La prima versione aveva
   contorno grigio e fondo bianco, cioè l'aspetto di un pulsante di sistema
   capitato lì dentro. Qui prende la lingua che la pagina parla già altrove:
   il fondo ciano chiaro della punta di diamante, il corpo minuto in maiuscoletto
   spaziato di .riga__scelta e di .meteo__luogo, il raggio di 3px che hanno
   tutti i riquadri. Chi lo guarda non deve chiedersi da dove sia arrivato.

   RESTA IL SECONDO PULSANTE DELLA PAGINA, e si vede: il fondo pieno in ciano e
   la larghezza intera sono dell'interesse tardivo, che è l'azione principale
   della sua pagina. Questo è tinto appena, piccolo, e sta in una riga di
   servizio. Due comandi con lo stesso peso direbbero che contano uguale.

   Il bersaglio è 34px e non i 44 che si consigliano per un'azione principale:
   è la misura che la riga delle date può ospitare senza che il pulsante la
   domini, ed è la stessa scelta che il testo dichiara — questo comando non è
   la cosa per cui la pagina esiste. Lo spazio orizzontale è generoso proprio
   per compensare. */
.condividi__pulsante {
    padding: 8px 14px;
    border: none;
    border-radius: 3px;
    background: var(--ciano-chiaro);
    color: var(--navy);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    min-height: 34px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

/* Sotto il dito e sotto la tastiera diventa ciano pieno con il testo bianco:
   è il ciano che la pagina usa per le sue superfici piene, dalla banda del
   meteo al pulsante grande. */
.condividi__pulsante:hover,
.condividi__pulsante:focus-visible {
    background: var(--ciano);
    color: var(--bianco);
}

/* Il riscontro della copia, nello stesso maiuscoletto del pulsante: sono due
   pezzi della stessa riga e devono leggersi come tali. È testo dentro un
   role="status", quindi lo sente anche chi la pagina non la vede — il colore
   da solo non direbbe niente a chi non lo distingue, e un'icona di spunta non
   si può leggere ad alta voce.
   In navy e non in ciano, benché il ciano sia il colore dei nostri
   maiuscoletti: su fondo grigio chiaro, in corpo minuto, il ciano non arriva
   al contrasto che serve a leggere una conferma. Un'etichetta decorativa se lo
   può permettere, un messaggio che dice se una cosa è successa no. */
.condividi__esito {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.condividi__esito--visibile {
    opacity: 1;
}

/* --- avviso di offerta scaduta ------------------------------------------ */

.avviso {
    background: var(--bianco);
    border-left: 4px solid var(--giallo);
    border-radius: 3px;
    padding: 16px 18px;
    margin: 0 0 26px;
}

.avviso__titolo {
    margin: 0 0 6px;
    font-weight: 700;
}

.avviso__testo {
    margin: 0;
    font-size: 0.95rem;
}

/* --- apertura: la logica del piano -------------------------------------- */

.documento .apertura {   /* ⟂ CONTESA */
    background: var(--bianco);
    border-radius: 3px;
    padding: 18px 20px;
    margin: 0 0 26px;
    /* Le tre righe che seguono spengono la tipografia che il design system dà
       alla sua `.apertura`, che è un paragrafo di testa e non un riquadro.
       Senza, il testo di questo quadro arriverebbe in peso 300 a 19px dentro
       una colonna da 64 caratteri. */
    font: 400 var(--fs-body)/1.6 var(--font);
    color: var(--navy);
    max-width: none;
}

.documento .apertura p {
    margin: 0;
    font-size: 1.02rem;
}

/* --- righe -------------------------------------------------------------- */

/* LA MAPPA DELLA COPERTURA, fra il testo del pianificatore e i riquadri.
   Rapporto fissato a 8:5 perche' e' quello con cui il server la chiede
   (640x400): qui non si ritaglia e non si deforma, si riserva lo spazio che
   l'immagine occupera' -- altrimenti la pagina si allunga di colpo quando
   arriva, sotto il dito di chi sta gia' leggendo. E' la stessa ragione per cui
   la mappa della scheda impianto ha un rapporto dichiarato.

   SE L'IMMAGINE NON ARRIVA IL RIQUADRO RESTA VUOTO, ed e' voluto che si veda
   poco: fondo del colore della pagina e nessun bordo, cosi' un 404 di Google
   non lascia un rettangolo grigio in mezzo alla proposta. */
.copertura {
    margin: 0 0 26px;
    border-radius: 3px;
    overflow: hidden;
}

.copertura__mappa {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

/* IL NUMERO DEL PIN, in cima al riquadro e prima di tutto il resto: e' un
   rimando, e un rimando si legge per primo o non serve. Tondo e pieno come il
   pin che gli corrisponde sulla mappa, cosi' l'occhio li appaia senza doverci
   pensare -- e' l'unica cosa che lega le due viste.

   IL NAVY E NON IL CIANO: e' lo stesso colore dei pin, che sulla mappa e' navy
   perche' il giallo del marchio su una mappa stradale -- gialla anche lei nelle
   strade principali -- si perderebbe. Due colori diversi fra il pin e il suo
   numero renderebbero il rimando piu' faticoso di quanto valga. */
.riga__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 0 8px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--bianco);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.righe {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.riga {
    background: var(--bianco);
    border-radius: 3px;
    padding: 18px 20px;
    margin: 0 0 14px;
}

/* La punta di diamante si distingue senza gridare: un fondo appena tinto e un
   filo di ciano sul lato. Niente banner, niente colore pieno — l'occhio la
   trova, la pagina non cambia tono. */
.riga--punta {
    background: var(--ciano-chiaro);
    border-left: 4px solid var(--ciano);
}

.riga__scelta {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ciano);
}

.riga__titolo {
    margin: 0 0 2px;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--navy);
}

.riga__luogo {
    margin: 0;
    font-size: 0.95rem;
}

/* IL MOCKUP DEL CARTELLO. height: auto e display: block perche' LE PROPORZIONI
   LE DECIDE L'IMMAGINE E NON QUESTO FOGLIO: dal 27 agosto 2026 la miniatura e'
   quadrata, perche' il compositore la ritaglia attorno al cartello in un
   quadrato, ma la fotografia in cui il ritaglio non ci sta arriva qui con le
   proporzioni sue. Un rapporto fisso scritto qui ritaglierebbe quelle. Se
   l'immagine non c'e' questo blocco non esiste affatto: nel template sta dentro
   un if, e non c'e' nessuna regola qui che riservi lo spazio.

   SU SCHERMO STRETTO STA SOPRA E A LARGHEZZA PIENA, che e' questa regola. Sul
   telefono il riquadro e' largo circa 350 pixel: affiancata al testo la
   miniatura ne avrebbe centoquaranta, e a quella misura il nome del prospect --
   che e' l'unica ragione per cui quell'immagine e' li' -- non si legge piu'.
   Meglio sopra e grande che accanto e illeggibile. */
.riga__cartello {
    display: block;
    /* IL RIFERIMENTO DELL'ETICHETTA SOVRAPPOSTA: e' questo blocco e non il
       riquadro, cosi' "SIMULAZIONE" sta nell'angolo dell'immagine anche quando
       l'immagine e' larga meno della colonna. */
    position: relative;
    text-decoration: none;
    color: inherit;
    margin: 0 0 12px;
}

.riga__mockup {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* DA 640 PIXEL IN SU LA MINIATURA STA ACCANTO AI DATI, come la fotografia di un
   annuncio: prima occupava tutta la larghezza e pesava quanto tutto il resto del
   riquadro messo insieme.

   DUECENTOQUARANTA PIXEL, ED E' UNA MISURA GUARDATA E NON SCELTA. Quando fu
   misurata, il cartello occupava un quinto della larghezza della miniatura --
   il resto era la strada, che e' quello che lo rende credibile -- e a 160 pixel
   di colonna il nome non si leggeva, a 200 si intuiva, A 240 SI LEGGEVA.

   IL QUINTO ORA E' IL 42%, perche' la miniatura si ritaglia attorno al
   cartello, E I 240 PIXEL RESTANO: sono la misura a cui la quota del ritaglio e'
   stata tarata guardando, quindi le due decisioni si tengono per mano. Chi
   cambia questa colonna rimette in discussione quella quota, che sta in
   mira/mockup/regole_grafica.json e non qui.

   DUE COLONNE E UNA RIGA SOLA, perche' i figli diretti del riquadro sono due:
   la miniatura e .riga__dati, che contiene tutto il resto. Fino al 28 agosto
   2026 i paragrafi erano tutti figli diretti e l'immagine occupava tutte le
   righe con grid-row: 1 / -1: la sua altezza veniva distribuita fra quelle
   righe, e MISURATO NEL BROWSER la prima traccia valeva 261 pixel -- tutta
   l'altezza della miniatura -- con dentro l'etichetta della punta di diamante,
   alta 253 pixel, e il titolo spinto a 283, cioe' sotto il bordo inferiore
   dell'immagine. A destra restava una colonna vuota.

   CON UN SOLO ELEMENTO IN SECONDA COLONNA NON C'E' NIENTE DA DISTRIBUIRE: la
   riga e' alta quanto il piu' alto dei due, e align-items: start tiene tutti e
   due in cima. Non si conta piu' niente, e il numero di paragrafi -- che cambia
   da un cartello all'altro perche' quasi tutti sono facoltativi -- ha smesso di
   essere un problema invece di essere gestito. */
@media (min-width: 640px) {
    .riga--con-cartello {
        display: grid;
        grid-template-columns: 240px 1fr;
        column-gap: 18px;
        align-items: start;
    }
    .riga--con-cartello > .riga__cartello {
        margin: 0;
    }
}

/* L'ETICHETTA STA SULL'IMMAGINE, NELL'ANGOLO IN ALTO A SINISTRA, dal 28 agosto
   2026. Prima era un blocco sopra la miniatura e GALLEGGIAVA IN UN'AREA SUA:
   una parolina in alto a sinistra, staccata da cio' che etichettava, che a
   colpo d'occhio sembrava l'intestazione del riquadro invece della didascalia
   di un'immagine.

   RESTA SOPRA E NON SOTTO, ed e' la decisione di prima che non cambia: li'
   legge come etichetta di cio' che si sta guardando, mentre sotto leggerebbe
   come postilla legale. Cambia solo che adesso e' ATTACCATA -- sovrapposta
   all'angolo invece che appoggiata sopra -- e in cambio non si porta via una
   riga di altezza.

   IL FONDO SERVE E NON E' UN VEZZO: sotto ci passa una fotografia, e nero su
   cielo chiaro o su asfalto scuro sono due leggibilita' diverse. Un velo chiaro
   con il testo navy tiene tutti e due i casi senza dover sapere cosa c'e'
   sotto.

   PIU' PICCOLA E PIU' CHIARA DEL TESTO ATTORNO, ma non invisibile: e' una
   qualificazione di quello che si sta guardando, non un'informazione
   commerciale. Maiuscoletto spaziato come l'etichetta della punta di diamante,
   che e' l'altra etichetta di questa pagina. */
.riga__etichetta {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    padding: 2px 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--navy);
}

/* COS'E' IL CARTELLO, con le parole del concessionario: "Cartello bifacciale".
   Sta fra l'indirizzo e la durata perche' e' una proprieta' della struttura e
   non dell'offerta, e si legge come una didascalia del luogo. Piu' leggero del
   testo attorno: e' una precisazione, non un'informazione commerciale — dal 24
   agosto 2026 e' l'unico posto in cui la pagina dice che le facce sono due,
   perche' prima lo dicevano due blocchi. */
.riga__tipo {
    margin: 4px 0 0;
    font-size: 0.88rem;
    font-weight: 300;
    opacity: 0.75;
}

/* Il cartello che nel frattempo un altro ha confermato (voce 16, 24 settembre
   2026). Pieno e non attenuato come la categoria qui sopra: e' l'unica riga del
   riquadro che cambia cosa il prospect puo' fare. */
.riga__preso {
    margin: 8px 0 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--navy);
}

.riga__motivazione {
    margin: 12px 0 0;
    font-size: 0.97rem;
}

.riga__prezzo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--grigio-medio);
}

/* La stampa è staccata dall'esposizione ma non ha una riga di separazione
   propria: sono due voci dello stesso conto, non due blocchi. */
.riga__prezzo--stampa {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
    font-size: 0.9rem;
    opacity: 0.85;
}

.riga__voce {
    font-weight: 300;
}

.riga__importo {
    font-weight: 700;
    white-space: nowrap;
}

/* --- totale ------------------------------------------------------------- */

.totale {
    background: var(--bianco);
    border-radius: 3px;
    padding: 18px 20px;
    margin: 0 0 26px;
    text-align: right;
}

.totale__voce {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.65;
}

.totale__importo {
    margin: 2px 0 0;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--ciano);
}

/* "IVA esclusa" accanto al prezzo, in ciano più chiaro: sta lì per essere
   letto, non per essere nascosto, ma non compete con l'importo. */
.totale__iva {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    /* Il --ciano-chiaro è pensato per i fondi: su bianco non si legge.
       Qui serve lo stesso ciano schiarito quanto basta a stare sotto
       l'importo senza sparire. */
    color: #4DD0E1;
}

/* I due parziali sopra il totale: esposizione e stampa, quando la stampa
   costa. Stanno sopra e non sotto perché si leggono come i due addendi di cui
   il numero grande è la somma, ed è l'ordine di qualunque documento di spesa.

   La scala regge perché questo è un quarto livello e non un secondo: il blocco
   aveva già un'etichetta piccola in maiuscoletto, l'importo a 2.1rem e la nota
   minuta. Queste due righe stanno fra l'etichetta e la nota — 0.9rem, navy
   smorzato — quindi non competono con l'unico numero che deve dominare.
   Guardate a cinque spazi prima di scriverle, che è la scala in cui servono. */
.totale__parziale {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin: 0 0 4px;
    font-size: 0.9rem;
    color: var(--navy);
    opacity: 0.75;
}

/* min-width sull'importo e non sulla voce: incolonna i due numeri a destra
   qualunque lunghezza abbiano le due parole, così le cifre si confrontano in
   verticale invece di ballare. In em e non in px perché la misura deve seguire
   il corpo del testo, che a 640px cresce. */
.totale__parziale-importo {
    min-width: 7em;
    text-align: right;
    font-weight: 700;
}

/* LA POSTILLA DELLA STAMPA, allineata a destra sotto i due parziali e non a
   sinistra sotto il blocco: qualifica UNO di quei due numeri, e sta sotto la
   colonna in cui quel numero si legge. Piu' piccola dei parziali, come la nota
   del totale piu' sotto, perche' e' una precisazione e non una voce di spesa.

   Compare solo sul pluriennale, e la condizione la calcola query/proposte.py:
   il perche' sta li' e nel template. */
.totale__postilla {
    margin: 0 0 4px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--navy);
    opacity: 0.7;
}

/* La nota sotto l'importo, che lo qualifica: in corpo piccolo perché è una
   precisazione e non una voce di spesa. Diceva dove stava il costo di stampa
   finché la stampa era fuori dal totale; adesso dice quale dei tre numeri è
   l'importo dovuto e che sono tutti al netto di IVA. Il posto e la misura non
   cambiano, cambia la frase. */
.totale__nota {
    margin: 6px 0 0;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--navy);
    opacity: 0.7;
}

/* Cosa non è compreso nel totale. Stessa misura della nota qui sopra, perché
   sono due precisazioni dello stesso rango, e un nome suo perché dicono cose
   diverse: quella qualifica gli importi, questa dichiara una fornitura che non
   c'è dentro. Il margine è più stretto di quello della nota: le due righe si
   leggono come un blocco unico di piccolo corpo, non come due note separate. */
.totale__esclusioni {
    margin: 2px 0 0;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--navy);
    opacity: 0.7;
}

/* --- proposta senza righe ----------------------------------------------- */

.vuoto {
    background: var(--bianco);
    border-radius: 3px;
    padding: 18px 20px;
    margin: 0 0 26px;
}

.vuoto p {
    margin: 0 0 6px;
}

.vuoto p:last-child {
    margin-bottom: 0;
}

/* --- riapertura: il pulsante dell'interesse tardivo --------------------- */

.riapertura {
    margin: 0 0 26px;
    text-align: center;
}

.riapertura__form {
    margin: 0;
}

.pulsante {
    display: inline-block;
    width: 100%;
    max-width: 380px;
    padding: 15px 24px;
    border: none;
    border-radius: 3px;
    background: var(--ciano);
    color: var(--bianco);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    /* Bersaglio comodo da un pollice: la pagina si apre dal telefono. */
    min-height: 52px;
}

.pulsante:hover,
.pulsante:focus-visible {
    background: #00A5BA;
}

.riapertura__email {
    margin: 14px 0 0;
    font-size: 0.92rem;
}

/* --- firma -------------------------------------------------------------- */

/* LA FIRMA HA PERSO IL FILO SOPRA, e il filo è rimasto al piede del proponente.
   È la proposta sulla gerarchia fra i due blocchi: prima avevano lo stesso filo
   e la stessa misura, quindi si leggevano come due riquadri di pari peso, mentre
   uno è una persona che scrive e l'altro è la società che si obbliga.
   Un'etichetta sopra la firma — "FIRMATO DA", per simmetria con il PROPOSTA DI
   del piede — avrebbe fatto il contrario di quello che serve: in una lettera il
   congedo e il nome non hanno bisogno di essere presentati, e presentarli li
   avrebbe resi una voce di modulo.
   Così invece resta una sola interruzione visiva in fondo alla pagina, e cade
   dove c'è un vero cambio di voce: dalla persona al soggetto giuridico. Il
   totale è già un riquadro bianco con un bordo suo, quindi la firma non si
   incolla a quello che la precede. */
.firma {
    margin: 30px 0 0;
    font-size: 0.95rem;
}

/* Il congedo: peso normale, perché una formula di cortesia detta piano è più
   credibile di una in grassetto. Sopra ha aria, perché è il punto in cui il
   documento smette di elencare e qualcuno saluta. */
.firma__saluti {
    margin: 0;
    color: var(--navy);
}

/* Il nome è la firma: in grassetto e attaccato al congedo, come sotto una
   lettera. Il margine è piccolo di proposito — le due righe sono una cosa
   sola. */
.firma__nome {
    margin: 4px 0 0;
    font-weight: 700;
}

/* Il ringraziamento, e con lui l'appuntamento telefonico quando c'è. È una
   frase che qualcuno dice, come i saluti che la seguono, quindi sta a piena
   opacità e in peso normale: un grazie detto piano è più credibile di un
   grazie in grassetto, e vale lo stesso per la promessa che lo accompagna.
   Il margine è sotto e non sopra: questa riga apre la chiusura della lettera
   invece di seguire il nome, e ciò che deve separare è il congedo, non il
   blocco di sopra.
   Il nome della classe dice ringraziamento e non richiamo perché la riga c'è
   sempre, anche quando l'appuntamento non c'è: chiamarla firma__richiamo
   avrebbe descritto il ramo raro invece della riga. */
.firma__ringraziamento {
    margin: 0 0 14px;
    color: var(--navy);
}

.firma__email {
    margin: 2px 0 0;
    opacity: 0.8;
}

/* L'indirizzo dell'agente sulla proposta scaduta. A schermo non si vede,
   perché è già accanto al pulsante dell'interesse tardivo a pochi centimetri e
   ripeterlo sarebbe rumore. Sulla carta quel pulsante non c'è — la stampa non
   porta comandi — e senza questa riga il foglio di un'offerta scaduta
   resterebbe senza nessun modo di rispondere. La regola che lo riaccende sta
   nel blocco di stampa. */
.firma__email--solo-stampa {
    display: none;
}

/* --- il proponente ------------------------------------------------------ */

/* Chi fa la proposta, in calce al documento: ragione sociale, sede, partita
   IVA, recapiti. Sta dentro il contenuto e non nella chiusura, perché la
   chiusura in stampa non c'è; la nota completa è in _proponente.html.

   Il filo sopra è lo stesso della firma, e il blocco le sta subito sotto: si
   leggono come due parti della stessa chiusura del documento — chi lo firma,
   quale soggetto si obbliga — e non come due sezioni diverse. */
.proponente {
    margin: 26px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--grigio-medio);
}

/* "Proposta di" in occhiello, come gli altri soprattitoli del progetto: dice
   che cos'è il blocco in due parole, e senza di lui una ragione sociale in
   fondo al foglio potrebbe essere chiunque — il destinatario, per esempio. */
.proponente__voce {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy-60);
}

/* La denominazione è l'unica riga in peso pieno: è il dato che identifica il
   soggetto. Non è grande come un titolo, perché non apre niente: chiude. */
.proponente__nome {
    margin: 6px 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
}

/* Sede, partita IVA e recapiti: didascalia, come le righe di coda della firma.
   Stessa misura e stessa opacità, così il piede non compete con il piano. */
.proponente__dato {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--navy-80);
}

/* --- pagina del link non valido ----------------------------------------- */

.neutra {
    background: var(--bianco);
    border-radius: 3px;
    padding: 20px;
}

.neutra p {
    margin: 0 0 10px;
}

/* IL RIQUADRO DELLA RISERVA HA IL MARGINE DELL'AVVISO, dal 24 settembre 2026:
   e' lo stesso posto della pagina -- il suo gemello quando la riserva e'
   scaduta e' un .avviso -- e senza, sulla pratica di una societa' in
   'confermato', il titolo "Gli spazi che ha confermato" gli stava attaccato
   sotto. .neutra resta senza margine: gli altri riquadri stanno in fondo alla
   pagina, dove sotto non c'e' niente. */
.neutra--riserva {
    margin: 0 0 26px;
}

.neutra p:last-child {
    margin-bottom: 0;
}

/* DUE RIQUADRI DI FILA SONO DUE RIQUADRI, e senza questa regola si leggono come
   uno solo: .neutra non ha margine, quindi due scatole adiacenti si toccano e
   sullo schermo diventano una scatola sola con una spaziatura strana in mezzo.
   Si e' visto sul modulo del caricamento della visura, che ne ha due di fila --
   cosa serve e dove si prende, e cosa fare adesso -- e sono due argomenti
   diversi: chi cerca il secondo deve poter vedere dove finisce il primo.

   E' UN SELETTORE DI ADIACENZA E NON UN MARGINE SU .neutra, ed e' la differenza
   che conta: un margine in alto su ogni riquadro cambierebbe anche le pagine
   che ne hanno uno solo -- la pratica, il link non valido -- dove il riquadro
   e' gia' distanziato da cio' che gli sta sopra e un margine in piu' lo
   staccherebbe dal testo a cui appartiene. Cosi' la regola tocca solo il caso
   che ha il difetto. */
.neutra + .neutra {
    margin-top: 12px;
}

/* Il riquadro che dice perché un caricamento non è stato preso. Modificatore di
   .neutra e non una classe nuova: è la stessa scatola, e l'unica differenza è
   che questa va guardata. Il filetto giallo a sinistra è lo stesso segnale di
   .filetto in testa alle fasce, ruotato.

   NON È ROSSO, ED È UNA SCELTA: il rosso dice "ha sbagliato", e qui non ha
   sbagliato nessuno — un PDF si danneggia scaricandolo, una scansione esce
   grande. Il messaggio dice cosa fare, e il colore non deve dire un'altra
   cosa. */
.neutra--attenzione {
    border-left: 4px solid var(--giallo);
}

/* --- scheda dell'impianto ----------------------------------------------- */

/* La banda in testa al contenuto, dove sta il meteo quando c'è. Ciano pieno
   come la banda dello standard 2020, ma qui parla: dice dove siamo e, se il
   servizio ha risposto, che tempo fa. Esiste anche vuota di meteo, perché è
   prima di tutto l'apertura della scheda. */
.meteo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: var(--ciano);
    color: var(--bianco);
    border-radius: 3px;
    padding: 11px 16px;
    margin: 0 0 18px;
}

.meteo__luogo {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.meteo__ora {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 400;
    text-align: right;
}

/* Il rimando alla proposta. Chi è qui è dentro un percorso: in alto è un
   ritorno discreto, in fondo è un bersaglio grande, perché chi ha finito di
   leggere sta in fondo e non risale. */
.ritorno {
    margin: 0 0 16px;
    font-size: 0.92rem;
}

.ritorno--fondo {
    margin: 30px 0 0;
    text-align: center;
}

.ritorno__link {
    font-weight: 700;
}

/* PORTA IL PREFISSO .documento PUR NON ESSENDO UN NOME CONTESO, ed è l'unico
   caso in cui succede. Deve spegnere la sottolineatura che .documento a dà a
   tutti i link dei documenti, e per vincere su quella regola serve la stessa
   specificità: scritto come .ritorno__pulsante da solo perdeva, e il pulsante
   si ritrovava una riga sotto il testo dentro la sua cornice. */
.documento .ritorno__pulsante {
    display: inline-block;
    width: 100%;
    max-width: 380px;
    padding: 14px 22px;
    border: 2px solid var(--ciano);
    border-radius: 3px;
    background: var(--bianco);
    color: var(--navy);
    font-weight: 700;
    /* Non sottolineato benché sia un <a>: ha già la forma di un pulsante, e la
       riga sotto il testo lo farebbe sembrare un link dentro una cornice. */
    text-decoration: none;
    /* Bersaglio comodo da un pollice, come il pulsante dell'interesse. */
    min-height: 52px;
}

.documento .ritorno__pulsante:hover,
.documento .ritorno__pulsante:focus-visible {
    background: var(--ciano-chiaro);
}

.sezione {
    margin: 0 0 26px;
}

.sezione__titolo {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0.65;
}

.sezione__nota {
    margin: -4px 0 10px;
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--navy);
    opacity: 0.75;
}

/* Il pin è decorativo e ha alt vuoto: quello che dice lo dice già il testo
   accanto, e un lettore di schermo che annuncia "immagine, pin" prima di un
   indirizzo è rumore.
   NE RESTA UNO SOLO, sulla riga dell'indirizzo, dal 29 agosto 2026: quello del
   titolo di sezione è sparito e con lui la regola .sezione__titolo--pin, che
   era l'unica cosa a usarlo. La misura base resta qui perché è la misura del
   file, e .pin--riga la riduce. */
.pin {
    display: block;
    flex: none;
    /* L'immagine è quadrata con la goccia al centro: il riquadro è un po' più
       largo del disegno, quindi si misura leggermente più grande di quanto
       sembrerà. */
    width: 24px;
    height: auto;
}

.pin--riga {
    width: 18px;
    /* Allineato alla prima riga del testo e non al centro del blocco: accanto
       a un indirizzo di due righe, il centro cadrebbe fra le due. */
    margin-top: 2px;
}

/* IL MOCKUP GRANDE NELLA SCHEDA. Stesse regole della fotografia dell'impianto
   qui sotto -- larghezza piena, altezza dalle proporzioni -- perche' sulla stessa
   pagina due immagini che si comportano in modo diverso si leggono come due
   generi di cosa. Le proporzioni le decide la fotografia dell'impianto su cui e'
   stato composto, e un rapporto fisso ne ritaglierebbe alcune. */
.mockup {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}

/* LA DICHIARAZIONE SOTTO IL MOCKUP. Stessa misura e stesso colore di quella nel
   riquadro della proposta -- 0,8rem, --navy-80, interlinea larga -- perche' e' la
   stessa frase e deve leggersi come la stessa cosa nelle due pagine. Attaccata
   all'immagine: e' una didascalia di quella figura, e a meta' strada dal blocco
   successivo l'occhio la attribuirebbe a quello. */
.mockup__dichiarazione {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--navy-80);
}

/* IL VISORE STREET VIEW. Stesso impianto della mappa qui sotto e per la stessa
   ragione: il rapporto e' deciso prima, o l'iframe arriva dopo il resto della
   pagina e la scheda si allunga di colpo sotto il dito di chi sta leggendo.
   Piu' alto della mappa — 3/2 invece di 4/3 — perche' qui dentro ci si guarda
   attorno e i comandi di Google stanno sui bordi. */
.panorama {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 3px;
    overflow: hidden;
    background: var(--grigio-medio);
}

/* IL RIPIEGO STA SOTTO L'IFRAME, CHE LO COPRE. Non e' nascosto con display:
   none, ed e' voluto: quando la pagina viene aperta dove gli iframe si tolgono
   — un client di posta — al posto del visore resta questa frase invece di un
   rettangolo grigio vuoto. Non c'e' modo di sapere prima dove la pagina verra'
   aperta, quindi si scrivono tutti e due e si lascia decidere a chi rende. */
.panorama__ripiego {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px;
    text-align: center;
    font-size: 0.92rem;
    color: var(--navy);
}

.panorama__telaio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* LA DATA DEL PANORAMA, e dice quello che abbiamo rilevato noi su quel punto,
   non quello che il visore sta mostrando: se il pano_ID non risponde piu',
   Google ripiega sulle coordinate dentro il browser di chi legge e da qui non
   si puo' sapere. La differenza e' nelle parole del template, e la ragione in
   servizi/streetview.py. */
.panorama__data {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--navy);
    opacity: 0.7;
}

.posizione__indirizzo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--bianco);
    border-radius: 3px;
    padding: 14px 16px;
    margin: 0 0 12px;
    font-size: 0.97rem;
}

/* La mappa in un contenitore con il rapporto già deciso: l'iframe arriva dopo
   il resto della pagina e senza questo la scheda si allungherebbe di colpo
   sotto il dito di chi sta leggendo. */
.mappa {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    overflow: hidden;
    background: var(--grigio-medio);
}

/* LA TELA DELLA MAPPA. Era un iframe fino al 28 agosto 2026; adesso e' un div
   che la Maps JavaScript API riempie, e le regole sono le stesse -- riempire il
   contenitore che ha gia' il rapporto deciso. */
.mappa__tela {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* IL CONTENUTO DELLA FINESTRA DEL PIN. Vive dentro un <template>, quindi queste
   regole si applicano solo quando Google lo copia dentro la sua InfoWindow: e'
   il motivo per cui non serve nasconderlo: un <template> non si vede mai.
   Corpo piu' piccolo del testo della scheda, perche' sta dentro un fumetto di
   Google che ha una larghezza sua e non la nostra. */
.mappa__scheda {
    font-family: var(--font);
    color: var(--navy);
    line-height: 1.45;
}

.mappa__scheda-titolo {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 700;
}

.mappa__scheda-riga {
    margin: 0;
    font-size: 0.86rem;
}

.posizione__mappa-link {
    margin: 10px 0 0;
    font-size: 0.92rem;
}

/* I dati tecnici: nome a sinistra, valore a destra, una riga per voce. Non è
   una tabella perché non è una tabella — sono coppie, e <dl> è la cosa che le
   descrive. */
.dati {
    margin: 0;
    background: var(--bianco);
    border-radius: 3px;
    padding: 6px 18px;
}

.dati__voce {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--grigio-fondo);
}

.dati__voce:last-child {
    border-bottom: none;
}

.dati__nome {
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--navy);
    opacity: 0.8;
}

.dati__valore {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.condizioni {
    background: var(--bianco);
    border-radius: 3px;
    padding: 16px 20px;
}

.condizioni__durata {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    opacity: 0.85;
}

.condizioni__iva {
    margin: 10px 0 0;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--navy);
    opacity: 0.7;
}

/* Il rimando dalla riga del piano alla sua scheda. Non è il quadro intero a
   essere cliccabile: un quadro-link ruba la selezione del testo e trasforma
   ogni tocco andato lungo in una navigazione. Un link dichiarato dice anche
   dove porta, che a un quadro non si può chiedere. */
.riga__scheda {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--grigio-medio);
    font-size: 0.92rem;
    font-weight: 700;
}

/* Sul quadro della punta il filo di separazione sparirebbe nel fondo tinto. */
.riga--punta .riga__scheda {
    border-top-color: var(--bianco);
}

/* --- chiusura ----------------------------------------------------------- */

.documento .chiusura {   /* ⟂ CONTESA */
    background: var(--scuro);
    color: var(--bianco);
    text-align: center;
    padding: 26px 20px 30px;
}

/* "powered by" e logo sulla stessa riga: sono una firma sola e vanno letti
   insieme. Il logo è più piccolo di prima perché qui non è l'identità della
   pagina — quella sta in testa ed è del concessionario — ma la sigla di chi
   ha fatto la macchina. */
.chiusura__firma {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
}

.chiusura__powered {
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--grigio-medio);
}

/* 103px e non più 112: stessa proporzione della nota su
   .intestazione__logo--mirada, applicata al ritaglio al vivo del logo nuovo.
   Il segno stampato resta largo quanto prima. */
.chiusura__logo {
    display: block;
    width: 103px;
    height: auto;
}

/* --- schermi larghi ----------------------------------------------------- */

@media (min-width: 640px) {
    /* Il corpo cresce di un punto. Vale per il testo che non ha una misura
       propria — quello del link non valido, quello della proposta senza
       righe — perché tutto il resto è in rem e si misura sulla radice. */
    .documento {
        font-size: 18px;
    }

    .intestazione {
        padding: 28px 24px 24px;
        min-height: 120px;
    }

    .intestazione__logo {
        max-height: 68px;
        max-width: 60%;
    }

    .intestazione__logo--mirada {
        width: 230px;
    }

    .intestazione__nome {
        font-size: 1.7rem;
    }

    .documento .contenuto {   /* ⟂ CONTESA */
        padding: 38px 24px 56px;
    }

    .documento .titolo {   /* ⟂ CONTESA */
        font-size: 2rem;
    }

    .meteo {
        padding: 13px 18px;
    }

    .riga,
    .documento .apertura,
    .totale,
    .vuoto,
    .neutra {
        padding: 22px 26px;
    }

    .totale__importo {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   STAMPA
   SI STAMPA PER PARLARNE CON QUALCUNO. Il titolare porta la proposta al socio
   o al commercialista, e sul telefono la stampa di sistema offre "salva come
   PDF": è lo stesso foglio, e per questo non serve un secondo pezzo di codice
   per fare il PDF.

   IL DOCUMENTO NON È LA PAGINA. Sullo schermo la pagina è un luogo dove si
   naviga: c'è una testa che dice di chi è, una banda con il tempo che fa, una
   mappa che si trascina, dei link che portano altrove. Sulla carta niente di
   tutto questo funziona — un iframe stampato è un rettangolo grigio, un link
   è una parola sottolineata che non porta da nessuna parte, il meteo di oggi
   invecchia il giorno dopo mentre il foglio resta nel cassetto per mesi.
   Quello che resta è il documento: chi propone, cosa, dove, per quanto e a
   quale prezzo.

   IL FONDO NON SI STAMPA, e non perché lo diciamo noi: i browser omettono
   fondi e immagini di sfondo se non glielo si chiede esplicitamente. Le regole
   qui sotto non si fidano di quel comportamento e dichiarano comunque i fondi,
   perché chi ha acceso "stampa grafica di sfondo" nelle sue impostazioni non
   deve ricevere un foglio diverso. Dove un riquadro deve continuare a leggersi
   come riquadro, al posto del fondo tinto c'è un filo grigio.

   IL SITO HA UN BLOCCO SUO, IN FONDO. Nessuno stampa una home, ma qualcuno
   stamperà la pagina dei termini il giorno che ci sarà scritto qualcosa, e
   una fascia navy a tutta pagina è una campitura d'inchiostro con sopra del
   testo bianco che sparisce.
   ========================================================================== */

@media print {

    /* Margini di pagina veri: senza, il testo arriva al bordo del foglio e
       molte stampanti tagliano l'ultima riga. */
    @page {
        margin: 16mm;
    }

    /* In punti e non in pixel: sulla carta il pixel non è un'unità. */
    body {
        background: var(--bianco);
        font-size: 10.5pt;
        line-height: 1.45;
    }

    /* --- i documenti ---------------------------------------------------- */

    /* Via l'impianto a colonna che tiene il footer in fondo alla finestra: su
       carta la finestra non c'è, e un min-height di 100vh diventa un foglio
       intero da riempire, cioè una pagina bianca in coda al documento. */
    .documento {
        display: block;
        min-height: 0;
        background: var(--bianco);
        font-size: 10.5pt;
    }

    /* La cornice del browser e tutto ciò che si può solo premere.
       - intestazione e banda: la testa con il logo se ne va, e con lei il filo
         giallo che la separava dal contenuto, che senza di lei non separa più
         niente. Chi firma torna in coda al foglio, in chiaro: il nome nella
         riga che la carta aggiunge, e per intero — ragione sociale, sede,
         partita IVA, recapiti — nel piede del proponente, che sta dentro il
         contenuto proprio per sopravvivere a questo elenco.
       - chiusura: fondo scuro e logo bianco, cioè una campitura d'inchiostro e
         un'immagine che su carta bianca sparisce.
       - meteo: il tempo di oggi non c'entra con un documento che si conserva.
       - mappa e link alla mappa: l'iframe stampa un rettangolo grigio e il
         link non è premibile. L'indirizzo dell'impianto resta scritto sopra, in
         lettere, ed è quello che serve a chi guarda il foglio.
       - ritorno, riga__scheda: navigazione fra pagine che sulla carta non
         esistono.
       - condividi: un comando.
       - riapertura: il blocco intero, non il solo pulsante. Tolto il pulsante,
         la riga che gli sta sotto comincia con "Oppure" e non ha più il
         termine di paragone: resterebbe un'alternativa a niente. L'indirizzo
         dell'agente non si perde, torna nella firma qui sotto — che sulla
         carta è il posto giusto, ed è anche il modo di non stamparlo due
         volte. */
    .intestazione,
    .banda,
    .documento .chiusura,
    .meteo,
    .mappa,
    .panorama,
    .panorama__data,
    .posizione__mappa-link,
    .ritorno,
    .riga__scheda,
    .riapertura,
    .condividi {
        display: none !important;
    }

    /* L'indirizzo dell'agente sull'offerta scaduta: a schermo è già accanto al
       pulsante, qui il pulsante non c'è. Vedi la nota su .firma__email. */
    .firma__email--solo-stampa {
        display: block;
    }

    /* La larghezza la decide il foglio, non noi: la colonna da 680px è fatta
       per la riga di lettura a schermo, e su A4 lascerebbe mezzo foglio
       bianco. */
    .documento .contenuto {   /* ⟂ CONTESA */
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* I quadri bianchi su fondo grigio sono un espediente dello schermo: sulla
       carta il fondo è già bianco. Restano separati da un filo. */
    .documento .apertura,   /* ⟂ CONTESA */
    .riga,
    .totale,
    .vuoto,
    .avviso,
    .condizioni,
    .neutra,
    .dati {
        background: transparent;
        border: 1px solid var(--grigio-medio);
        border-radius: 0;
    }

    /* La punta di diamante si distingue anche in bianco e nero: a schermo è un
       fondo appena tinto, che qui non stamperebbe, quindi diventa un filo più
       marcato sul lato. È la stessa gerarchia detta con l'inchiostro che c'è. */
    .riga--punta {
        border-left: 3px solid var(--navy);
    }

    .avviso {
        border-left: 3px solid var(--navy);
    }

    .riga--punta .riga__scheda {
        border-top-color: var(--grigio-medio);
    }

    /* UNA RIGA DI PROPOSTA NON SI SPEZZA FRA DUE FOGLI. Uno spazio con il
       titolo su una pagina e il prezzo su quella dopo è il modo più veloce di
       far leggere il prezzo sbagliato accanto al cartello sbagliato.
       Lo stesso vale per il totale, per la firma e per le sezioni della scheda
       impianto, che sono unità di senso e non blocchi di testo. */
    .riga,
    .totale,
    .firma,
    .proponente,
    .avviso,
    .documento .apertura,
    .sezione,
    .condizioni,
    .dati__voce {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Un titolo in fondo al foglio, con sotto il vuoto e la sua roba sulla
       pagina dopo, è un titolo che ha perso il suo oggetto. */
    .documento .titolo,
    .riga__titolo,
    .sezione__titolo {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* I link restano parole. Sottolineare quello che non si può premere è
       un invito che la carta non può mantenere; gli indirizzi di posta si
       leggono comunque, perché sono scritti per esteso nel testo. */
    a,
    .documento a {
        color: inherit;
        text-decoration: none;
    }

    /* LA RIGA CHE LA CARTA AGGIUNGE, ed è l'unica. Un foglio stampato non ha la
       barra dell'indirizzo né la scheda del browser: chi lo ritrova sul tavolo
       fra una settimana deve poter sapere da dove viene e di chi è. Sopra un
       filo, in corpo minore, perché è la nota a piè di pagina del documento e
       non una sua parte.

       NASCE QUI, NON IN PAGINA. Il testo sta nell'attributo data-coda del body
       e questa regola è l'unica cosa che lo fa esistere. Prima era un elemento
       nascosto da una regola di stile, ed è finito a schermo su un telefono che
       aveva in cache un foglio vecchio, senza quella regola: cioè il token
       della proposta in chiaro sotto gli occhi del cliente. Un dato riservato
       non si affida a un foglio di stile per restare nascosto — i fogli di
       stile arrivano in ritardo, arrivano vecchi, o non arrivano. Così il
       guasto peggiore è che non si stampi. */
    .documento::after {
        content: attr(data-coda);
        display: block;
        margin: 12mm 0 0;
        padding-top: 3mm;
        border-top: 1px solid var(--grigio-medio);
        font-size: 8.5pt;
        font-weight: 300;
        color: var(--navy);
    }

    /* --- il sito -------------------------------------------------------- */

    /* Navigazione e comandi: sulla carta non esistono. Con loro se ne va il
       logo bianco della chiusura, che su carta bianca è un rettangolo vuoto:
       il nome resta scritto in lettere nella frase che gli sta sotto. */
    .sito .testata,
    .torna-su,
    .chiusura__marchio img {
        display: none !important;
    }

    /* Le fasce perdono il fondo e restano separate da un filo. Il testo che
       era bianco su navy torna navy su bianco, altrimenti sparisce. */
    .fascia {
        padding: var(--sp-5) 0;
    }

    .fascia--grigia,
    .fascia--blu,
    .fascia--scura,
    .sito .chiusura {
        background: transparent;
        color: var(--navy);
        border-top: 1px solid var(--grigio-medio);
    }

    .fascia--blu .apertura,
    .fascia--scura .apertura,
    .fascia--blu .corpo,
    .fascia--scura .corpo,
    .fascia--blu .occhiello,
    .fascia--scura .occhiello,
    .chiusura__dato,
    .chiusura__titolo,
    .chiusura__legale {
        color: var(--navy);
    }

    .chiusura__colonna a,
    .chiusura__frase a,
    .chiusura__legale a,
    .chiusura__mail {
        color: var(--navy) !important;
        border-bottom: none;
    }

    .fascia--hero {
        padding-block: var(--sp-5);
    }

    /* LE HERO NON SI STAMPANO, per lo stesso motivo di mappa e banda meteo: una
       fotografia a piena pagina è una campitura d'inchiostro che su carta
       diventa un rettangolo scuro e illeggibile, e il claim che ci sta sopra
       non ha bisogno di lei per dire quello che dice. Via anche il velo — è
       un'altra campitura — e via l'altezza dichiarata, che senza foto sarebbe
       mezzo foglio bianco riservato a niente.
       Il testo resta dov'è: navy su bianco, cioè esattamente come tutte le
       altre fasce del foglio. */
    .fascia__foto,
    .fascia--foto::after {
        display: none !important;
    }

    .fascia--foto {
        min-height: 0;
        display: block;
        background: none;
    }

    /* La colonna del testo si fermava prima dell'impianto: senza impianto non
       ha più niente davanti a cui fermarsi, e su A4 lascerebbe due terzi di
       foglio bianchi. Stessa ragione della regola su .documento .contenuto —
       la larghezza sulla carta la decide il foglio. */
    .fascia__testo {
        max-width: none;
    }
}

/* ---------- conferma d'ordine ---------------------------------------------
   Le tre classi che la conferma d'ordine aggiunge, e sono tre perche' tutto il
   resto lo prende dal documento: righe, riga, totale e pulsante sono quelli
   della proposta, e i riquadri dei cartelli sono lo stesso oggetto visto in un
   altro momento della stessa trattativa.

   QUESTO E' IL PRIMO MODULO DELLA FAMIGLIA "documento", e prima di oggi non ce
   n'erano: l'unico controllo delle pagine pubbliche era un pulsante che manda un
   POST vuoto, quindi non esisteva nessuno stile di campo. Chi aggiungera' altri
   campi -- la maschera dei dati fiscali, le croci -- parta da qui e non da
   sito.css.
   ------------------------------------------------------------------------- */

/* La scelta della forma giuridica: tre caselle grandi come bersagli da pollice.

   LA LABEL AVVOLGE IL RADIO E IL TESTO, quindi tutta la casella e' cliccabile
   senza un `for` da tenere in sincrono con un `id`: un id sbagliato produce una
   casella che non si accende, e non se ne accorge nessuno finche' non prova a
   premerla dal telefono. */
.scelta {
    margin: 0 0 26px;
}

.scelta__voce {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bianco);
    border: 1px solid var(--grigio-linea);
    border-radius: 3px;
    padding: 16px 18px;
    margin: 0 0 10px;
    cursor: pointer;
}

/* Il segno della scelta fatta e' sul contenitore e non solo sul pallino: da
   mezzo metro il pallino non si vede, il fondo si'. :has() regge su tutti i
   browser che questa pagina incontra, e dove non reggesse la casella resta
   leggibile e il pallino dice comunque quale e' selezionata -- cioe' il ripiego
   e' la pagina di prima, non una pagina rotta. */
.scelta__voce:has(.scelta__radio:checked),
.scelta__voce:has(.scelta__casella:checked) {
    background: var(--ciano-chiaro);
    border-color: var(--ciano);
}

.scelta__voce:focus-within {
    border-color: var(--ciano);
}

/* La misura fissa e il margine in alto tengono il pallino allineato alla prima
   riga del testo e non al centro del blocco, che con due righe di spiegazione
   lo farebbe scendere a meta'. */
/* LA CASELLA DELLE CONDIZIONI (fase 4 minima, 24 settembre 2026) e' lo stesso
   segno del pallino, quadrato: stessa misura, stesso allineamento. */
.scelta__radio,
.scelta__casella {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--ciano);
}

.scelta__testo {
    display: block;
}

.scelta__etichetta {
    display: block;
    font-weight: 700;
    font-size: var(--fs-body);
}

.scelta__spiegazione {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-small);
    font-weight: 300;
    color: var(--navy-80);
}

/* Il blocco del richiamo sulla pagina della pratica scaduta. Il pulsante sta
   sopra la nota e non sotto: la nota dice cosa succede DOPO averlo premuto, e
   una condizione messa prima di un comando si legge come un ostacolo. */
.richiesta {
    margin: 0 0 30px;
}

.richiesta__nota {
    margin: 12px 0 0;
    font-size: var(--fs-small);
    font-weight: 300;
    color: var(--navy-80);
    max-width: 54ch;
}

/* LE DUE CORREZIONI SONO UN BLOCCO SOLO. Fanno lo stesso mestiere -- disdire
   la selezione, correggere la forma giuridica -- e prima erano separate da
   un'interlinea da sezione: distanti cosi' si leggevano come due argomenti
   diversi, e chi cercava quella che gli serviva doveva leggerle tutte e due.
   Lo stacco vero sta SOPRA il blocco, fra il pulsante di conferma e le
   correzioni; dentro, le due righe stanno vicine. */
.correzioni {
    margin: 26px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--grigio-linea);
}

.rinuncia {
    margin: 0;
}

.ripensamento {
    margin: 4px 0 0;
    font-size: var(--fs-small);
    color: var(--navy-80);
}

/* IL RICHIAMO DENTRO LA FRASE NON HA MARGINE SOPRA, dal 24 settembre 2026.
   .richiamo e' inline-block con margin-top --sp-6, che ha senso quando sta da
   solo sotto un paragrafo; dentro "Ha dichiarato di esercitare come ditta
   individuale. Non e' cosi'?" quel margine alzava tutta la riga su cui cadeva,
   e a 390 px fra "ditta" e "individuale" si apriva un buco di una riga e mezza.
   Senza il margine il collegamento va a capo come il testo che lo precede. */
.ripensamento .richiamo {
    margin-top: 0;
}

/* La casella di scelta dentro il riquadro del cartello. Sta in cima al
   riquadro e non in fondo: e' la cosa che si preme, e in fondo starebbe sotto
   il prezzo -- cioe' si leggerebbe come una conferma del prezzo invece che una
   scelta del cartello. */
.riga__scelta-casella {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    cursor: pointer;
}

.riga__casella {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    accent-color: var(--ciano);
}

.riga__scelta-testo {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--navy-80);
}

.selezione {
    margin: 0 0 8px;
}

/* La frase che spiega il pulsante spento. Nasce `hidden` nel template e la
   scopre lo script: senza JavaScript il pulsante non si spegne, quindi una
   frase che ne parla non ha niente da spiegare. */
.selezione__vuota {
    margin: 10px 0 0;
    font-size: var(--fs-small);
    color: var(--navy-80);
    max-width: 54ch;
}

/* Il pulsante spento deve SEMBRARE spento: senza questa regola resta ciano
   pieno e invita a premerlo, e chi lo preme senza effetto pensa che la pagina
   sia rotta. */
.pulsante:disabled {
    background: var(--grigio-medio);
    cursor: not-allowed;
}

.pulsante:disabled:hover {
    background: var(--grigio-medio);
}

/* La rinuncia: un rimando e non un bottone pieno. Niente e' una risposta
   legittima e deve essere raggiungibile, ma due bottoni identici affiancati su
   una scelta asimmetrica fanno premere quello sbagliato. */
.rinuncia__frase {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--navy-80);
}

/* Un <button> che deve leggersi come un rimando: il browser gli mette di suo un
   fondo, un bordo e un font di sistema, e qui vanno tolti tutti e tre. */
.richiamo--pulsante {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-small);
    color: var(--navy);
    text-decoration: underline;
    cursor: pointer;
}

/* Il documento di contratto dentro la pagina di conferma. Dal 24 settembre
   2026 e' uno per ordine (voce 1 di db/PROSSIMO_DROP.md), e con lui e' sparito
   il suo conto separato, .documento-contratto__conto: resta lo stacco sotto
   la lista dei cartelli, prima del conto dell'ordine. */
.documento-contratto {
    margin: 0 0 30px;
}

/* La riga di dettaglio sotto il totale: le due voci che lo compongono. Sta
   sotto e non sopra perche' il numero grosso e' quello che si cerca, e il
   dettaglio serve a chi lo verifica. */
.totale__dettaglio {
    margin: 6px 0 0;
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--navy-80);
}

/* Il conto della pagina di conferma: la stessa struttura del riquadro economico
   del modulo d'ordine, perche' questa pagina ne e' l'anteprima e non deve dire
   meno di lui.

   UNA TABELLA E NON TRE DIV IN FILA: sono voci con un importo a destra e una
   nota in mezzo, cioe' esattamente cio' per cui una tabella esiste. E su un
   telefono le tre colonne collassano, con la nota che va sotto la voce. */
.conto {
    width: 100%;
    border-collapse: collapse;
    background: var(--bianco);
    border-radius: 3px;
    margin: 0 0 8px;
}

.conto td {
    padding: 10px 14px;
    vertical-align: top;
    border-bottom: 1px solid var(--grigio-linea);
}

.conto tr:last-child td {
    border-bottom: none;
}

.conto__voce {
    font-weight: 700;
    font-size: var(--fs-small);
}

/* La nota e' la meta' del significato dell'importo -- "prima dell'adeguamento",
   "una tantum" -- e non e' una postilla da rimpicciolire fino a non leggerla.
   Piu' chiara della voce, non piu' piccola di quanto si legga da un telefono. */
.conto__nota {
    font-size: var(--fs-caption);
    font-weight: 300;
    color: var(--navy-80);
    max-width: 34ch;
}

.conto__importo {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    font-size: var(--fs-small);
}

.conto__somma td {
    border-top: 2px solid var(--navy);
    background: var(--grigio-fondo);
    font-size: var(--fs-body);
}

.conto__somma .conto__importo {
    font-weight: 900;
    color: var(--ciano);
}

/* Il secondo numero -- quello che si ripete -- non compete con il primo: e' il
   conto degli anni dopo, e chi legge deve trovare prima quanto paga adesso. */
.conto__ricorrente td {
    background: var(--grigio-fondo);
}

.conto__postilla {
    margin: 0 0 26px;
    font-size: var(--fs-caption);
    color: var(--navy-80);
    max-width: 62ch;
}

/* "una tantum" accanto alla stampa sulla riga del cartello: dice che quella
   voce non e' della stessa natura di quella sopra, ed e' la sola cosa che le
   distingue a colpo d'occhio. */
.riga__natura {
    font-style: normal;
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy-60);
}

@media (max-width: 560px) {
    /* Sul telefono la nota va sotto la voce invece di spremersi in una colonna
       di dieci caratteri: la riga diventa due righe, e l'importo resta a
       destra dove lo si cerca. */
    .conto, .conto tbody, .conto tr, .conto td {
        display: block;
        width: auto;
    }
    .conto tr {
        border-bottom: 1px solid var(--grigio-linea);
        padding: 8px 0;
    }
    .conto tr:last-child {
        border-bottom: none;
    }
    .conto td {
        border-bottom: none;
        padding: 2px 14px;
    }
    .conto__importo {
        text-align: left;
        padding-top: 4px;
    }
}

/* --- il modulo del caricamento della visura ------------------------------
   IL CAMPO DEL FILE E LA SUA ETICHETTA ERANO NATIVI fino al 17 settembre 2026,
   e il pulsante con loro: font di sistema, bordo grigio del browser, il campo
   piu' corto della riga di testo che lo spiega. Non era una mancanza di
   rifinitura. La pagina che chiede a un'azienda di caricare un documento della
   Camera di Commercio e' il punto del percorso in cui il cliente si chiede se
   sta mandando un PDF a chi dice di essere, e tre controlli che non
   assomigliano al resto del sito sono esattamente la cosa che gli fa chiudere
   la pagina. L'ha visto una persona aprendo il modulo.

   IL PULSANTE USA .pulsante, come la selezione e la forma: e' lo stesso gesto
   -- mandare un modulo -- e non ha bisogno di una classe sua. Qui sotto c'e'
   solo cio' che di .pulsante non si puo' riusare, cioe' il campo e l'etichetta,
   che nel wizard non esistevano ancora.
   ------------------------------------------------------------------------- */
/* LA CLASSE STA SU DUE MODULI E NON SU UNO: il modulo che carica il file e il
   comando "ce l'ho gia': la carico adesso" che ci porta dalla pagina della
   pratica. Hanno lo stesso mestiere -- un comando pieno sotto un riquadro di
   testo, che deve staccarsi da lui -- e due classi con lo stesso margine
   sarebbero due posti da correggere il giorno che quel margine cambia.

   IL TERZO MODULO NON CE L'HA, ed e' quello del ricaricamento: il suo comando
   e' un .richiamo, che il margine in alto lo porta da se'. Mettergliela
   sommerebbe i due margini, e sullo schermo si vedeva. */
.caricamento {
    margin: 26px 0 0;
}

.caricamento__campo {
    margin: 0 0 16px;
}

/* L'etichetta sta SOPRA il campo e non accanto: il campo del file e' largo e
   su un telefono una etichetta a fianco lo spingerebbe fuori dallo schermo. */
.caricamento__etichetta {
    display: block;
    margin: 0 0 6px;
    font-weight: 700;
    font-size: var(--fs-small);
}

.caricamento__file {
    display: block;
    width: 100%;
    max-width: 380px;
    padding: 10px 12px;
    border: 1px solid var(--grigio-linea);
    border-radius: 3px;
    background: var(--bianco);
    /* font: inherit E' LA RIGA CHE CONTA: senza, il campo scrive il nome del
       file col font di sistema del sistema operativo, e su Windows e' Segoe UI
       in mezzo al Lato di tutto il resto. */
    font: inherit;
    font-size: var(--fs-small);
    color: var(--navy);
}

.caricamento__file:focus-visible {
    border-color: var(--ciano);
    outline: none;
}

/* IL BOTTONE DENTRO IL CAMPO, che e' dove sta il "Choose File" del browser.
   Questo pseudo-elemento e' l'unico modo di vestirlo senza nascondere il campo
   dietro un <label> finto, che e' la strada che rompe la tastiera e i lettori
   di schermo.

   DOVE NON E' SUPPORTATO IL CAMPO RESTA NATIVO E FUNZIONA: e' una vestizione,
   non un pezzo del meccanismo. Chrome, Firefox e Safari lo supportano da anni;
   un browser che non lo conosce mostra il bottone di sistema dentro una
   cornice nostra, che e' peggio di cosi' e meglio di prima.

   LA SCRITTA DENTRO QUEL BOTTONE NON E' NOSTRA E RESTA COM'E': la mette il
   browser e la traduce con la propria lingua -- "Scegli file" su un browser
   italiano, "Choose File" su uno inglese -- e il CSS non la raggiunge.
   Cambiarla vorrebbe dire nascondere il campo dietro un <label> finto, cioe'
   la strada che rompe la tastiera. Un cliente italiano col browser in inglese
   legge una parola inglese, e la sua e' l'unica lingua che conta qui.

   SECONDARIO E NON CIANO: il comando che manda il modulo e' uno solo, ed e'
   "Carica la visura". Due pulsanti pieni uno sopra l'altro farebbero premere
   quello che apre la finestra dei file credendo di aver caricato. */
.caricamento__file::file-selector-button {
    margin: 0 12px 0 0;
    padding: 8px 14px;
    border: 1px solid var(--navy);
    border-radius: 3px;
    background: var(--bianco);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
}

.caricamento__file::file-selector-button:hover {
    background: var(--grigio-fondo);
}

/* --- la maschera dei dati, fase 3 del wizard ----------------------------- */

/* LE CASELLE DI TESTO NON AVEVANO UNA CLASSE, e fino al 21 settembre 2026 non
   servivano: il wizard chiedeva una radio (la forma giuridica), delle caselle da
   spuntare (i cartelli) e un file (la visura). Questa e' la prima schermata che
   chiede al cliente di SCRIVERE, e una casella nativa del browser in mezzo a
   questa pagina si riconosce a colpo d'occhio -- font di sistema, bordo grigio,
   altezza sua. E' lo stesso difetto che il 17 settembre 2026 si era visto sui
   comandi del caricamento, e si ripara nello stesso modo. */

.dati__sezione {
    margin: var(--sp-6) 0 0;
}

/* LE CASELLE VANNO A CAPO DA SOLE e non stanno in una griglia a colonne fisse:
   su un telefono una griglia a due colonne spinge il CAP sotto la provincia in
   un ordine che non e' quello di un indirizzo. Con il flusso, le corte si
   affiancano finche' c'e' posto e vanno a capo quando non ce n'e' piu'. */
.dati {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-4);
}

.dati__campo {
    margin: 0;
    flex: 1 1 100%;
}

/* TRE MISURE E NON UNA, e le decide mira/ordini/maschera.py insieme al campo:
   un CAP in una casella larga quanto la via e' una casella che sembra chiedere
   altro, e una provincia di due lettere in mezzo schermo si legge come un
   errore di chi ha fatto la pagina. */
.dati__campo--media {
    flex: 1 1 260px;
}

.dati__campo--corta {
    flex: 0 1 150px;
}

.dati__etichetta {
    display: block;
    margin: 0 0 6px;
    font-weight: 700;
    font-size: var(--fs-small);
}

/* DA DOVE VIENE LA PROPOSTA, e si vede senza leggerla: una casella gia' piena
   che non dichiara la sua origine si conferma senza guardarla, perche' sembra
   un dato nostro. Piccola e in maiuscoletto perche' accompagna l'etichetta e
   non la sostituisce. */
/* "DALLA VISURA" NON SI SPEZZA, dal 24 settembre 2026: nella casella piccola
   della Provincia, larga un terzo delle altre, andava a capo fra DALLA e
   VISURA, visto sul banco. Senza a capo dentro, quando non ci sta scende
   intera sotto il nome del campo, e si legge ancora come un'etichetta sola. */
.dati__fonte {
    white-space: nowrap;
    margin-left: 8px;
    font-size: var(--fs-overline);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy-60);
}

.dati__casella {
    display: block;
    width: 100%;
    min-height: var(--control-h);
    padding: 10px 12px;
    border: 1px solid var(--grigio-medio);
    border-radius: var(--radius);
    background: var(--bianco);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--navy);
}

.dati__casella:focus-visible {
    outline: 2px solid var(--ciano);
    outline-offset: 1px;
    border-color: var(--ciano);
}

.dati__aiuto {
    display: block;
    margin: 6px 0 0;
    font-size: var(--fs-small);
    color: var(--navy-80);
}

/* L'AVVERTENZA DEL CODICE FISCALE NON E' UN AIUTO COME GLI ALTRI, e non si
   legge come tale: dice che se quel dato e' sbagliato la firma non passera'. Il
   filetto giallo e' lo stesso di .neutra--attenzione, cioe' il segno che in
   questo sito vuol dire "questa riga cambia qualcosa". */
.dati__aiuto--forte {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 3px solid var(--giallo);
    color: var(--navy);
}

/* LA CASELLA CHE IL RIQUADRO HA NOMINATO, dal 23 settembre 2026. Nasce da una
   prova dal telefono: dopo un rifiuto la pagina torna in cima con il messaggio e
   la casella sta tre schermate sotto, quindi il messaggio porta un collegamento
   che salta li' -- e arrivati, la casella deve distinguersi dalle undici vicine,
   altrimenti il salto finisce su una schermata uguale a prima.

   IL GIALLO E NON UN ROSSO, e non e' un ripiego: in questa tavolozza il rosso
   non esiste, e il segno che vuol dire "questa riga cambia qualcosa" e' il
   filetto giallo -- lo portano .neutra--attenzione, che e' il riquadro del
   rifiuto stesso, e .dati__aiuto--forte. Introdurre un colore per un caso solo
   vorrebbe dire una tavolozza con una voce che nessun'altra regola usa.

   IL FILETTO E IL BORDO INSIEME, perche' da soli non bastano: il filetto si vede
   scorrendo ma non dice QUALE delle due caselle affiancate e', e il bordo dice
   quale ma su un telefono, a schermo pieno, non si nota arrivando. */
.dati__campo--errore {
    padding-left: 10px;
    border-left: 3px solid var(--giallo);
}

.dati__campo--errore .dati__casella {
    border-color: var(--giallo-scuro);
}

/* IL COLLEGAMENTO CHE SALTA ALLA CASELLA, dentro il riquadro del rifiuto. E' un
   .richiamo e non un componente nuovo -- stesso ruolo, stesso aspetto -- e
   l'unica cosa che si corregge e' il margine: .richiamo nasce con 32px sopra
   perche' di solito chiude una pagina, e qui sta attaccato alla frase che lo
   riguarda. */
.rifiuto__salta {
    margin: 4px 0 var(--sp-3);
}

.rifiuto__salta .richiamo {
    margin-top: 0;
}

/* IL MODULO DELLA MASCHERA NON CAMBIA IL FLUSSO, ed e' il motivo per cui questa
   regola e' una riga sola: `.documento .contenuto` non e' un contenitore flex,
   quindi il <form> che dal 22 settembre 2026 avvolge le sezioni e' un blocco
   come il contenuto che c'era prima e le sezioni si dispongono identiche. La
   riga serve a una cosa sola -- dare aria al pulsante, che sta in fondo attaccato
   all'ultima sezione e senza margine sembrerebbe appartenerle. */
.dati__modulo .pulsante {
    margin-top: var(--sp-7);
}

/* ==========================================================================
   LA DASHBOARD DEL CONCESSIONARIO, dal 6 ottobre 2026 (mira/dashboard/).
   Tutte le classi portano il prefisso dash- e nessuna regola qui tocca una
   classe che esisteva prima: le pagine di prima non cambiano di un pixel.
   Riusa dati, neutra, sezione, pulsante e titolo; aggiunge il menu, le azioni,
   le schede delle pratiche con i passi, la cronologia, gli spazi, i moduli e
   le due tabelle dell'art. 4.6. Telefono prima: la scheda e' una colonna, e
   le tabelle scorrono dentro il loro riquadro invece di allargare la pagina.
   ========================================================================== */

.dash-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-6);
}

.dash-menu__voce {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bianco);
    color: var(--navy);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.dash-menu__voce--attiva {
    background: var(--navy);
    color: var(--bianco);
}

.dash-esito {
    margin-bottom: var(--sp-6);
}

.dash-indietro {
    margin: 0 0 var(--sp-4);
    font-size: 0.92rem;
}

.dash-azioni,
.dash-pratiche,
.dash-spazi,
.dash-motivi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-azione {
    background: var(--bianco);
    border-left: 4px solid var(--giallo);
    border-radius: 3px;
    padding: 14px 18px;
    margin-bottom: 10px;
}

.dash-azione p {
    margin: 0;
}

.dash-azione__cosa {
    font-weight: 900;
    color: var(--navy);
}

.dash-azione__chi {
    font-weight: 700;
    margin-top: 2px;
}

.dash-azione__dettaglio {
    font-size: 0.92rem;
    opacity: 0.8;
    margin-top: 4px;
}

.dash-azione__link {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px !important;
    font-weight: 700;
}

.dash-scheda {
    margin-bottom: 10px;
}

.dash-scheda__link {
    display: block;
    background: var(--bianco);
    border-radius: 3px;
    padding: 14px 18px;
    color: inherit;
    text-decoration: none;
}

.dash-scheda__link:hover,
.dash-scheda__link:focus-visible {
    outline: 2px solid var(--ciano);
}

.dash-scheda__testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.dash-scheda__cliente {
    font-weight: 900;
    color: var(--navy);
}

.dash-scheda__sotto {
    display: block;
    font-size: 0.88rem;
    opacity: 0.8;
    margin-top: 2px;
}

.dash-stato {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--bianco);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.dash-passi {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.dash-passo {
    height: 6px;
    border-radius: 3px;
    background: var(--grigio-fondo);
}

.dash-passo--fatto {
    background: var(--ciano);
}

/* IL NOME DEL PASSO E' PER CHI LEGGE CON UNO SCREEN READER: a schermo la
   barra dice a che punto si e', e il nome sta nel title e qui. */
.dash-passo__nome {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dash-cronologia {
    list-style: none;
    margin: 0;
    padding: 6px 18px;
    background: var(--bianco);
    border-radius: 3px;
}

.dash-cronologia__passo {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid var(--grigio-fondo);
    position: relative;
    opacity: 0.55;
}

.dash-cronologia__passo:last-child {
    border-bottom: none;
}

.dash-cronologia__passo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    border: 2px solid var(--navy-60);
}

.dash-cronologia__passo--fatto {
    opacity: 1;
}

.dash-cronologia__passo--fatto::before {
    background: var(--ciano);
    border-color: var(--ciano);
}

.dash-cronologia__nome {
    font-weight: 700;
}

.dash-spazio {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    background: var(--bianco);
    border-radius: 3px;
    padding: 10px 18px;
    margin-bottom: 6px;
}

.dash-spazio__codice {
    font-weight: 700;
}

.dash-spazio__dove {
    flex: 1 1 200px;
    opacity: 0.8;
}

.dash-spazio__posa {
    font-size: 0.88rem;
    font-weight: 700;
}

.dash-contratto {
    margin-bottom: var(--sp-6);
}

.dash-contratto__titolo {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--navy);
}

.dash-contratto .dati {
    margin-bottom: 10px;
}

.dash-modulo {
    background: var(--bianco);
    border-radius: 3px;
    padding: 16px 18px;
    margin-top: 10px;
}

.dash-modulo__etichetta {
    display: block;
    margin-top: 14px;
    font-weight: 700;
    color: var(--navy);
}

.dash-modulo__etichetta:first-of-type {
    margin-top: 0;
}

.dash-modulo__nota {
    margin: 4px 0 0;
    font-size: 0.88rem;
    opacity: 0.8;
}

.dash-modulo__campo {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--grigio-medio);
    border-radius: 3px;
    font: inherit;
    background: var(--bianco);
    color: var(--scuro);
    box-sizing: border-box;
}

.dash-modulo .pulsante {
    margin-top: var(--sp-5);
}

.dash-citazione {
    margin: 0;
    padding: 14px 18px;
    background: var(--bianco);
    border-left: 4px solid var(--navy);
    border-radius: 3px;
    font-size: 0.92rem;
}

.dash-citazione p {
    margin: 0;
}

.dash-motivi li {
    margin-top: 4px;
}

.dash-motivi li::before {
    content: "– ";
}

.dash-scorre {
    overflow-x: auto;
    background: var(--bianco);
    border-radius: 3px;
}

.dash-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 560px;
}

.dash-tabella th,
.dash-tabella td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--grigio-fondo);
}

.dash-tabella th {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--navy);
}

.dash-tabella__riga--chiusa td {
    opacity: 0.6;
}

.dash-tabella__nota {
    font-size: 0.82rem;
    opacity: 0.8;
}

.dash-pulsante-link {
    margin-top: var(--sp-5);
    text-align: center;
    text-decoration: none;
}

/* DUE CONTESE CON REGOLE DI PRIMA, risolte qui senza toccarle. .dati e' anche
   il contenitore a caselle della maschera d'ordine, flex con a capo, e due
   voci corte finivano sulla stessa riga: nella dashboard ogni voce e' una
   riga. E .documento a sottolinea ogni link: la scheda intera e' un link, e
   sottolineata diventava un muro di testo. */
.dash-dati {
    display: block;
}

.documento .dash-scheda__link {
    text-decoration: none;
}