/* Solo token, mai colori letterali: la palette vive in tokens.css (FF07 lo verifica). */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  /* Gli hero a tutta larghezza usano 100vw, che include la barra di scorrimento: senza
     questo clip il body scorrerebbe in orizzontale di quei 15 px (→M2). `clip`, non
     `hidden`: non crea un contenitore di scorrimento, quindi `position: sticky` resta vivo. */
  overflow-x: clip;
  background: var(--carta);
  color: var(--inchiostro);
  font: var(--t-m)/1.55 var(--font-testo);
}
/* Montserrat per cio' che si legge a colpo d'occhio (titoli, nav, bottoni, etichette);
   il font di sistema per il testo corrente: legge meglio e non pesa. E' la coppia del marchio. */
h1, h2, h3, h4, .btn, .nav__voci a, .marchio, legend, .tessera__n, .etichetta { font-family: var(--font-titoli); }
/* La colonna del contenuto e' larga quanto la nav (--colonna): il bordo sinistro del
   testo sta sotto il logo, e una form lunga ha lo spazio per affiancare i campi invece di
   impilarli. Il testo corrente si tiene stretto da solo (.intro: in caratteri, non in pixel). */
main { max-width: var(--colonna); margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
/* I link prendono l'accento del tema: il blu di default del browser non e' un token. */
a { color: var(--accento-scuro); }
a:hover { color: var(--accento); }
h1 { font-size: var(--t-2xl); line-height: 1.15; margin: 0 0 var(--sp-3); text-wrap: balance; font-weight: 700; }
h2 { font-size: var(--t-l); margin: var(--sp-8) 0 var(--sp-3); font-weight: 700; }
h3 { font-weight: 600; }
/* Le etichette maiuscole del marchio: leggero letter-spacing, mai su testo lungo (→10 §3). */
.etichetta { text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-xs); font-weight: 600;
             color: var(--inchiostro-tenue); }
.intro { color: var(--inchiostro-tenue); max-width: 62ch; margin: 0 0 var(--sp-6); }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .92em; }

/* --- nascosto ma nel DOM: skip link, honeypot, testo per screen reader ---
   NIENTE offset negativi (left: -9999px): in una pagina RTL (arabo, ADR-0001) allargano
   il documento di 10.000 px e il browser mostra una pagina vuota. Il ritaglio a 1px non
   dipende dalla direzione del testo. */
.skip, .sr, .esca { position: absolute; width: 1px; height: 1px; overflow: hidden;
                    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; width: auto; height: auto; clip: auto; clip-path: none;
              inset-inline-start: var(--sp-4); top: var(--sp-2); z-index: 10; background: var(--superficie);
              padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); }
/* Il honeypot (→S4) NON usa display:none: alcuni bot lo riconoscono e saltano il campo. */

/* --- testata e navigazione --------------------------------------------- */
.intestazione { border-bottom: 1px solid var(--linea); background: var(--superficie);
                /* una riga sottile nel colore del pubblico corrente: dice «con chi stiamo parlando» */
                box-shadow: inset 0 3px 0 var(--accento-vivo); }
/* La testata e' una griglia a tre colonne, per tutti i pubblici: il logo a sinistra, le
   voci AL CENTRO (in orizzontale e rispetto all'altezza del logo), e a destra i comandi di
   servizio (lingua, tema, chi sei, esci) sopra l'azione principale. Quando le voci sono
   tante (lo staff ne ha tredici) vanno a capo restando centrate, nella loro colonna: i
   comandi non si spostano. */
.nav { max-width: var(--colonna); margin: 0 auto; padding: var(--sp-3) var(--sp-4);
       display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
       grid-template-areas: "marchio voci servizio" "marchio voci cta";
       column-gap: var(--sp-6); row-gap: var(--sp-2); align-items: center; }
.marchio { grid-area: marchio; display: inline-flex; align-items: center; text-decoration: none; color: var(--inchiostro); }
.marchio img { height: 84px; width: auto; max-width: 100%; display: block; }   /* il logo cambia colore col pubblico: logo-<pubblico>.png */
/* I sei file del logo (cliente, fattorino, azienda, chiaro e scuro) hanno la STESSA tela: 333×86,
   il disegno alto 70 px con 8 di margine, allineato a sinistra. Prima il verde e il blu erano
   330×94 e l'arancio 322×86: alla stessa altezza il logo di «Lavora con noi» usciva piu' piccolo
   e la colonna piu' stretta, e il menu si spostava di 20 px passando da una pagina all'altra.
   E la FORMA e' una sola: il verde e il blu si ricavano dall'arancio cambiando il colore della
   «F» (erano due esportazioni diverse, larghe 306 e 317 px alla stessa altezza, e la «F» saltava
   di 11 px). Chi rifa' un logo rifa' l'arancio e ne ricava gli altri (test_loghi). */
/* Sul tema scuro il logo e' la variante «-scuro» (la scritta grigia portata al chiaro, il
   colore del marchio intatto), non un filtro: `brightness(1.9)` schiariva anche il colore, e
   l'arancio del marchio usciva giallo, il blu ciano. Due <img> e non un <picture>: il
   tema si sceglie anche a mano (data-theme), e una media query non lo sa. */
.marchio .marchio__scuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marchio .marchio__chiaro { display: none; }
  :root:not([data-theme="light"]) .marchio .marchio__scuro { display: block; } }
:root[data-theme="dark"] .marchio .marchio__chiaro { display: none; }
:root[data-theme="dark"] .marchio .marchio__scuro { display: block; }
.nav__servizio { grid-area: servizio; display: flex; justify-content: flex-end; align-items: center;
                 gap: var(--sp-2); min-width: 0; }
.nav__voci { grid-area: voci; display: flex; flex-wrap: wrap; justify-content: center; align-self: center;
             gap: var(--sp-1) var(--sp-6); min-width: 0; }
.nav__cta { grid-area: cta; justify-self: end; }
/* Chi e' entrato non ha il «Richiedi»: i comandi di servizio restano soli a destra, a
   meta' altezza, invece di stare appesi in alto sopra una cella vuota. */
.nav:not(:has(.nav__cta)) .nav__servizio { grid-row: 1 / span 2; }
.nav__cta-corta { display: none; }
/* Una voce non si spezza a meta': «Dove / siamo» su due righe non si legge come una voce. */
.nav__voci a { white-space: nowrap; }
.nav__voci a { color: var(--inchiostro); text-decoration: none; padding: var(--sp-1) 0;
               border-bottom: 2px solid transparent; transition: var(--transizione);
               font-size: var(--t-s); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* --- I SETTE STATI (→09 §E) -------------------------------------------- */

/* 2. hover — solo col puntatore. Su touch non esiste, quindi niente di importante
      puo' vivere solo qui. */
@media (hover: hover) {
  .nav__voci a:hover { border-bottom-color: var(--linea); }
  .btn:hover { background: var(--linea); }
  .btn--primario:hover { background: var(--accento-scuro); }
}

/* 3. focus visibile — :focus-visible, non :focus, che sporcherebbe anche i click col mouse.
      Mai outline:none senza un sostituto: e' il tasto Tab che diventa inutilizzabile. */
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 3px; }

/* 4. premuto — conferma il click prima che risponda il server. */
.btn:active { transform: translateY(1px); }

/* 5. corrente — "sei qui". Colore PIU' forma (→E5): chi non distingue i colori vede
      comunque la sottolineatura. */
.nav__voci a[aria-current="page"] { border-bottom-color: var(--accento); font-weight: 600; }

/* 6. disabilitato */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* 7. in attesa — l'indicatore HTMX. Doppio click = doppio ordine se il bottone resta
      cliccabile: hx-disabled-elt lo spegne, questo lo dice. */
.attesa { display: none; color: var(--inchiostro-tenue); font-size: var(--t-s); }
.htmx-request .attesa, .htmx-request.attesa { display: inline; }

/* --- bottoni ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
       padding: var(--sp-2) var(--sp-4); border: 2px solid var(--linea); min-height: 40px;
       border-radius: 999px; background: var(--superficie); color: var(--inchiostro);
       font: 600 var(--t-s)/1.2 var(--font-titoli); text-transform: uppercase; letter-spacing: .04em;
       text-decoration: none; cursor: pointer; transition: var(--transizione); }
.btn--primario { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.btn--muto { color: var(--inchiostro-tenue); border-color: transparent; text-transform: none; letter-spacing: 0; }
/* Il bottone «a filo» del marchio: bianco su una foto colorata, si riempie al passaggio. */
.btn--filo { background: transparent; border-color: currentColor; color: inherit; }
/* L'azione che toglie qualcosa (cancellare un account, spegnere gli assistenti) si riconosce
   prima di premerla. Il colore e' quello dello stato critico, non un rosso scelto qui (→FE4):
   il bottone esisteva in io.html senza una riga di CSS, e sembrava un bottone qualunque. */
.btn--errore { background: var(--superficie); border-color: var(--critico); color: var(--critico); }
@media (hover: hover) { .btn--filo:hover { background: var(--superficie); color: var(--inchiostro); } }

/* --- flash: uno solo, nel layout base (→F1) ----------------------------- */
.flash { max-width: var(--colonna); margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-4);
         border-radius: var(--raggio); border: 1px solid var(--linea);
         display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.flash--ok { background: var(--accento-tenue); border-color: var(--ok); }
.flash--errore { background: var(--superficie); border-color: var(--critico); color: var(--critico); }
.flash--avviso { background: var(--superficie); border-color: var(--attenzione); }
.flash__x { background: none; border: 0; font-size: var(--t-l); cursor: pointer; color: inherit; }

.esito { padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); margin: var(--sp-2) 0; }
.esito--ok { background: var(--accento-tenue); }
.esito--errore { color: var(--critico); border: 1px solid var(--critico); }

/* --- contenuti ---------------------------------------------------------- */
.griglia { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.scheda { background: var(--superficie); border: 1px solid var(--linea);
          border-radius: var(--raggio); padding: var(--sp-4); box-shadow: var(--ombra); }
.scheda h2 { margin-top: 0; font-size: var(--t-m); }
/* Chi consegna nella zona (catalogo/_inventario.html): una scheda per chi ha scelto di
   comparire, le iniziali nel colore del suo pubblico — verde il fattorino, blu l'azienda — su
   fondo tenue, cosi' il contrasto regge in tutti e due i temi. */
.zona { margin: var(--sp-8) 0; }
.zona__schede { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-3);
                grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.zona__scheda { --tinta: var(--fattorino); --tinta-fondo: var(--fattorino-tenue);
                display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start;
                background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                padding: var(--sp-4); }
.zona__scheda--azienda { --tinta: var(--azienda); --tinta-fondo: var(--azienda-tenue); }
.zona__sigla { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
               background: var(--tinta-fondo); color: var(--tinta); font-family: var(--font-titoli);
               font-weight: 700; font-size: var(--t-m); letter-spacing: .02em; }
.zona__testo { display: grid; gap: var(--sp-1); min-width: 0; }
.zona__testo h3 { margin: 0; font-size: var(--t-m); overflow-wrap: anywhere; }
.zona__testo p { margin: 0; }
.zona__chi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--t-s); }
.zona__verificato { display: inline-flex; align-items: center; gap: 2px; color: var(--ok); font-size: var(--t-xs); }
.zona__verificato svg { width: 14px; height: 14px; }
.zona__servizi { gap: var(--sp-1); margin: var(--sp-1) 0 0; }
.zona__servizi li { font-size: var(--t-xs); padding: 2px var(--sp-2); border: 1px solid var(--linea);
                    border-radius: 999px; background: var(--carta); }
.zona__vuota { background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--raggio);
               padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.zona__vuota p { margin: 0; }
/* Testo e schermata affiancati (le pagine che mostrano il prodotto): due colonne dove ci
   stanno, una sotto l'altra sul telefono — prima il testo, poi l'immagine, qualunque sia
   l'ordine nel sorgente su schermo largo. La schermata sta in una cornice leggera: e' il
   prodotto, non un'illustrazione, e si deve capire dove finisce. */
.mostra { display: grid; gap: var(--sp-6); align-items: center; margin: var(--sp-8) 0; }
.mostra h2 { margin-top: 0; }
.mostra > div { max-width: 62ch; }
@media (min-width: 860px) {
  .mostra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .mostra--testa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 0; }
  /* Il telefono ha la sua misura: una colonna «auto» prenderebbe quella naturale dell'immagine. */
  .mostra--telefono { grid-template-columns: minmax(0, 1fr) 280px; }
  .mostra--telefono:has(> .schermo:first-child) { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 859px) { .mostra > .schermo { order: 2; } }
.schermo { margin: 0; border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden;
           background: var(--superficie); box-shadow: var(--ombra); }
.schermo img { display: block; width: 100%; height: auto; }
.schermo--telefono { width: min(100%, 280px); justify-self: center; border-radius: 28px;
                     border: 6px solid var(--inchiostro); }
/* Le piattaforme dei plugin (/scarica-i-plugin/): una scheda per piattaforma, il logo a colori
   su un riquadro chiaro della stessa misura per tutte (come nel pie'), cosi' si legge anche col
   tema scuro e nessun marchio sembra piu' importante degli altri. */
.piattaforme { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
               margin: 0 0 var(--sp-8); }
.piattaforma { display: grid; gap: var(--sp-2); align-content: start; }
.piattaforma ul { margin: 0; padding-inline-start: var(--sp-4); display: grid; gap: var(--sp-1); font-size: var(--t-s); }
.piattaforma .meta { margin: 0; }
.piattaforma__logo { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 64px;
                     padding: var(--sp-2) var(--sp-4); border-radius: var(--raggio); background: var(--su-nero); color: var(--nero); }
.piattaforma__logo img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.piattaforma__logo--api svg { width: 30px; height: 30px; }
.piattaforma__logo--api span { font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-l); letter-spacing: .04em; }
.sintesi { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.tessera { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
           padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; min-width: 120px; }
.tessera__n { font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.elenco { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.elenco li { background: var(--superficie); border: 1px solid var(--linea);
             border-radius: var(--raggio); padding: var(--sp-3); }
/* Un elenco di schede brevi (i servizi, le categorie del catalogo) si legge in colonne: tre
   a tutta larghezza, due su un tablet, una su un telefono — senza media query. */
.elenco--colonne { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-3); }
.elenco--colonne li p { margin-bottom: 0; }
.vuoto { background: var(--superficie); border: 1px dashed var(--linea);
         border-radius: var(--raggio); padding: var(--sp-6); text-align: center; }
.riga { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-4) 0; }
/* minmax(0, 1fr) e non 1fr: una colonna di griglia non scende sotto la larghezza minima
   del suo contenuto, e la larghezza minima di una <select> e' la sua OPZIONE PIU' LUNGA.
   «Consegna urgente in giornata (buste, pacchi, regali, inviti)» rendeva la form di
   /iniziamo/ larga 480px dentro un telefono da 390: il modulo che porta i soldi usciva
   dallo schermo, e nessuno se n'era accorto perche' sul portatile ci sta. L'ha trovato
   qa_ux.py --only overflow (→M2), che e' esattamente il motivo per cui gira in CI. */
.modulo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); max-width: 380px; }
input, select { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--linea);
                border-radius: var(--raggio); background: var(--superficie);
                color: var(--inchiostro); font: inherit; min-height: 40px; max-width: 100%; }
/* Il testo dell'opzione si taglia con i puntini invece di allargare la pagina. */
select { width: 100%; text-overflow: ellipsis; }

/* La tabella scorre DENTRO il suo contenitore: il body non scorre mai in orizzontale (→M2). */
.tabella { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.tabella th, .tabella td { text-align: start; padding: var(--sp-2) var(--sp-3);
                           border-bottom: 1px solid var(--linea); white-space: nowrap; }
/* Una tabella che si legge come testo (il listino di /prezzi/): due colonne, nomi lunghi. Va a
   capo invece di scorrere: su un telefono scorrere di lato per leggere un prezzo e' una pagina rotta. */
.tabella--prosa { display: table; }
.tabella--prosa th, .tabella--prosa td { white-space: normal; }
.num { text-align: end; font-variant-numeric: tabular-nums; }

.pillola { font-size: var(--t-xs); padding: 2px var(--sp-2); border-radius: 999px;
           border: 1px solid var(--linea); }
.pillola--pagato { background: var(--accento-tenue); border-color: var(--ok); }
.pillola--bozza { border-color: var(--attenzione); }
.pillola--annullato { border-color: var(--critico); color: var(--critico); }
/* Esiti generici (anteprime, import): stato semantico, non pubblico (FE4). */
.pillola--ok { border-color: var(--ok); }
.pillola--critico { border-color: var(--critico); color: var(--critico); }
/* Lo stepper della consegna: dove siamo, cosa e' passato, cosa manca (→F7, stessa mappa). */
/* `.passi` esisteva gia' (il «come funziona in 3 passi» del sito): questo e' un'altra cosa. */
/* I cartellini dei colli (4): due per riga a schermo e su A4; sulla stampante di etichette
   uno per pagina da 100 x 150 mm (pagina con nome). «cartellino» e non «etichetta»: quella e'
   gia' la scritta maiuscola del marchio, e i colli ne ereditavano il corpo minuscolo.
   Nero su bianco sempre: la stampa e i lettori non conoscono il tema scuro. */
.cartellini { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0; }
.cartellino { display: grid; gap: var(--sp-2); border: 1px solid var(--stampa-inchiostro); border-radius: var(--raggio);
              padding: var(--sp-3); background: var(--stampa-fondo); color: var(--stampa-inchiostro); }
.cartellino .meta { color: var(--stampa-inchiostro); }
.cartellino__testa { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--t-s); }
.cartellino__conta { font-family: var(--font-titoli); }
.cartellino__a { display: grid; }
.cartellino__a strong { font-size: var(--t-l); }
.cartellino__barre { width: 100%; height: 56px; image-rendering: pixelated; }
.cartellino__piede { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: center; }
.cartellino__codice { font-family: var(--font-titoli); letter-spacing: 0.04em; font-size: var(--t-m); }
.cartellino__qr img { display: block; }
.manifesto__tappa { break-inside: avoid; margin-block: var(--sp-4); }
.manifesto__firme { margin-top: var(--sp-3); }
@page etichetta { size: 100mm 150mm; margin: 4mm; }
@media print {
  .nav, .pie, .flash, .solo-schermo, .btn { display: none !important; }
  body { background: var(--stampa-fondo); }
  .cartellino { break-inside: avoid; }
  .cartellini--termica { display: block; margin: 0; }
  .cartellini--termica .cartellino { page: etichetta; break-after: page; border: 0; min-height: 138mm; align-content: space-between; }
  .cartellini--termica .cartellino__barre { height: 22mm; }
}

/* La cronologia: righe fitte, la piu' recente in cima. */
.elenco--storia li { border-inline-start: 3px solid var(--linea); border-radius: 0 var(--raggio) var(--raggio) 0; }
.elenco--storia s { color: var(--inchiostro-tenue); }
.tappe { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: var(--sp-4) 0; }
.tappa { font-size: var(--t-xs); padding: 2px var(--sp-2); border-radius: 999px;
         border: 1px solid var(--linea); color: var(--inchiostro-tenue); }
.tappa--fatta { border-color: var(--ok); }
.tappa--ora { border-color: var(--accento); color: var(--inchiostro); font-weight: 600; }
/* Una scheda di dati: etichetta sopra, valore sotto, in colonne che si adattano. */
.dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0; }
.dati dt { font-size: var(--t-s); color: var(--inchiostro-tenue); }
.dati dd { margin: 0; }
/* Il testo di un contratto: si legge, non si interpreta come HTML (Jinja lo scappa). */
.testo-contratto { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                   padding: var(--sp-3) var(--sp-4); white-space: pre-wrap; max-height: 28rem; overflow-y: auto; }
.pannello { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
            padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.pannello summary { cursor: pointer; font-family: var(--font-titoli); }
.pillola--avviso { border-color: var(--attenzione); }
.pillola--errore { border-color: var(--critico); color: var(--critico); }

/* Chi ha chiesto meno movimento non deve subirlo. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Sul telefono (→M2, M7): in alto logo e comandi, sotto le voci che scorrono DENTRO la nav
   (non il body) e l'azione principale accorciata, che resta sempre in vista. Niente colonne
   di parole spezzate: ogni voce resta intera e tappabile. */
@media (max-width: 720px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3);
         grid-template-areas: "marchio servizio" "voci cta"; }
  .marchio img { height: 52px; }
  .nav__voci { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: var(--sp-4);
               justify-content: flex-start;
               padding-bottom: var(--sp-1); scrollbar-width: none; }
  .nav__voci::-webkit-scrollbar { display: none; }
  .lingue__nome { display: none; }
  .nav__cta-lunga { display: none; }
  .nav__cta-corta { display: inline; }
  /* Da entrati, senza «Richiedi»: i comandi stanno in alto accanto al logo e le voci prendono
     tutta la riga sotto. */
  .nav:not(:has(.nav__cta)) .nav__servizio { grid-row: auto; }
  .nav:not(:has(.nav__cta)) .nav__voci { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .btn { min-height: 40px; }
  .eroe .riga .btn { width: 100%; }
}

/* --- catalogo pubblico (pagine ereditate da WordPress) ------------------ */
.briciole { font-size: var(--t-s); color: var(--inchiostro-tenue); margin-bottom: var(--sp-4); }
.briciole a { color: inherit; }
.cta { background: var(--accento-tenue); border: 1px solid var(--linea); border-radius: var(--raggio);
       padding: var(--sp-4) var(--sp-6); margin: var(--sp-6) 0; }
.cta h2 { margin-top: 0; }
.meta { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.nube { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.nube li a { display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--linea);
             border-radius: 999px; background: var(--superficie); text-decoration: none;
             color: var(--inchiostro); min-height: 32px; }
.nube li a:hover { border-color: var(--accento); }
/* L'HTML importato risponde al design system, non al tema di WordPress. */
.prosa img { max-width: 100%; height: auto; }
.prosa table { display: block; overflow-x: auto; border-collapse: collapse; }
.prosa th, .prosa td { border-bottom: 1px solid var(--linea); padding: var(--sp-2) var(--sp-3); }
.prosa h2, .prosa h3 { margin-top: var(--sp-6); }

/* --- documenti legali (catalogo/legale.html) ---------------------------------- */
/* Un testo lungo che si legge davvero: righe da ~70 caratteri, l'indice accanto e fermo sul
   desktop (in testa sul telefono), i titoli che non finiscono sotto il bordo quando ci si
   arriva da un'ancora. I tre documenti stanno in una fila: si passa dall'uno all'altro. */
.legale__documenti ul { list-style: none; margin: 0 0 var(--sp-4); padding: 0;
                        display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.legale__documenti a { display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--linea);
                       border-radius: 999px; font-size: var(--t-s); text-decoration: none; color: var(--inchiostro); }
.legale__documenti a:hover { border-color: var(--accento); }
.legale__documenti a[aria-current] { border-color: var(--accento); background: var(--accento-tenue); font-weight: 600; }
.legale__testa h1 { margin-bottom: var(--sp-1); }
.legale__testa .meta { margin-top: 0; }
.legale__dati { max-width: 70ch; margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
                border-inline-start: 4px solid var(--accento); border-radius: var(--raggio); background: var(--superficie); }
.legale__dati h2 { margin: 0 0 var(--sp-1); font-size: var(--t-m); }
.legale__dati p { margin: 0; }
.legale__corpo { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.legale__indice h2 { margin: 0 0 var(--sp-2); color: var(--inchiostro-tenue); }
.legale__indice ol { margin: 0; padding-inline-start: var(--sp-5); font-size: var(--t-s); display: grid; gap: var(--sp-2); }
.legale__indice a { color: var(--inchiostro); text-decoration: none; }
.legale__indice a:hover { color: var(--accento-scuro); text-decoration: underline; }
.prosa--legale { max-width: 70ch; min-width: 0; overflow-wrap: anywhere; }
.prosa--legale h2 { scroll-margin-top: var(--sp-4); font-size: var(--t-l); }
.prosa--legale h2:first-child { margin-top: 0; }
.prosa--legale h3 { font-size: var(--t-m); }
@media (min-width: 60rem) {
  .legale__corpo { grid-template-columns: 15rem minmax(0, 70ch); align-items: start; }
  .legale__indice { position: sticky; top: var(--sp-4); max-height: calc(100vh - 2 * var(--sp-4)); overflow-y: auto;
                    padding-inline-end: var(--sp-3); border-inline-end: 1px solid var(--linea); }
}

/* --- mappa del sito (pagine/sitemap.html) ------------------------------------- */
/* Quattro gruppi in griglia, poi servizi e regioni in colonne che si riempiono dall'alto: una
   regione non si spezza fra due colonne, cosi' le sue province restano sotto il suo nome. */
.mappa-sito__gruppi { display: grid; gap: var(--sp-4) var(--sp-6); margin: var(--sp-6) 0;
                      grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.mappa-sito__gruppo h2 { margin: 0 0 var(--sp-2); font-size: var(--t-m); }
.mappa-sito__gruppo ul, .mappa-sito__colonne, .mappa-sito__regione ul { list-style: none; margin: 0; padding: 0; }
.mappa-sito__gruppo li, .mappa-sito__colonne li, .mappa-sito__regione li { padding: 2px 0; }
.mappa-sito__colonne { columns: 16rem; column-gap: var(--sp-6); }
.mappa-sito__regioni { columns: 14rem; column-gap: var(--sp-6); margin-top: var(--sp-4); }
.mappa-sito__regione { break-inside: avoid; margin-bottom: var(--sp-4); }
.mappa-sito__regione h3 { margin: 0 0 var(--sp-1); font-size: var(--t-m); }
.mappa-sito__regione li { font-size: var(--t-s); }

/* --- form di richiesta --------------------------------------------------- */
/* La form lunga usa tutta la colonna, e i campi si AFFIANCANO: uno per riga fa una form
   lunghissima, e la lunghezza e' cio' che fa abbandonare una form. `.campi` e' una riga di
   campi che va a capo da sola quando lo spazio finisce — flex e non una griglia a colonne
   fisse, cosi' su un telefono i campi tornano uno per riga senza una media query, e un
   campo puo' pesare piu' di un altro: `--largo` per un indirizzo o una scelta dalle voci
   lunghe, `--corto` per un CAP, un peso, una temperatura. `.campo` tiene insieme etichetta,
   controllo, errore e nota: se si separano, in una riga l'errore finisce sotto il campo
   sbagliato. */
.modulo--largo { max-width: none; gap: var(--sp-3); }
/* ...ma il bottone resta un bottone: largo mille pixel non si legge come un'azione. */
.modulo--largo > .btn { justify-self: start; }
.campi { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: flex-start; }
.campi > * { flex: 1 1 12rem; min-width: 0; margin: 0; }
.campi > .campo--largo { flex: 2 1 20rem; }
.campi > .campo--corto { flex: 1 1 7rem; }
/* Un CAP largo mezza pagina dice «scrivi tanto»: da tablet in su un campo corto ha un tetto.
   Sul telefono no — li' ogni campo e' una riga, ed e' giusto che la riempia. */
@media (min-width: 561px) { .campi > .campo--corto { max-width: 14rem; } }
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); align-content: start; }
.campo .campo-errore { margin: 0; }
/* Le scelte brevi (privato/azienda, si'/no) stanno su una riga, non una sotto l'altra. */
.scelte { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
/* min-width: 0 perche' un fieldset, di suo, non scende sotto il suo contenuto (→M2). */
.modulo fieldset { min-width: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4); }
.modulo legend { padding: 0 var(--sp-2); color: var(--inchiostro-tenue); }
/* Una casella e la sua frase: la casella nel margine, il testo che scorre accanto come testo.
   Non flex: in un flex ogni pezzo della frase (testo, link, <small>) diventa una colonna, e
   «Ho letto l'informativa privacy e acconsento…» usciva in tre colonne strette. */
.scelta { display: block; position: relative; padding-inline-start: 1.75em; line-height: 1.4; }
.scelta > input[type="checkbox"], .scelta > input[type="radio"] {
  position: absolute; inset-inline-start: 0; top: .15em; margin: 0; padding: 0; min-height: 0;
  width: 1.1em; height: 1.1em; }
/* Dopo `.scelta`, non prima: a parita' di specificita' vince l'ultima, e le scelte «su una
   riga» uscivano una sotto l'altra. */
.scelta--riga { display: inline-block; margin-inline-end: var(--sp-4); }
textarea { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--linea); border-radius: var(--raggio);
           background: var(--superficie); color: var(--inchiostro); font: inherit; }
[aria-invalid="true"] { border-color: var(--critico); }
.campo-errore { color: var(--critico); font-size: var(--t-s); margin: calc(-1 * var(--sp-1)) 0 0; }
/* →FE4: il critico e' una classe, cosi' la semantica del colore sta in un posto solo. */
.critico { color: var(--critico); }
.nube--scelte { gap: var(--sp-2) var(--sp-4); }
/* Il selettore delle province: campo di ricerca e scelte in cima, poi le regioni.
   Gli strumenti esistono solo col JavaScript (classe `js` dallo script pre-paint di
   base.html): senza, filtrerebbero niente. */
.province__strumenti { display: none; }
.js .province__strumenti { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.province__strumenti input[type="search"] { max-width: 22rem; }
.nube--chip { gap: var(--sp-2); }
.nube--chip:empty { display: none; }
/* Un'etichetta che si toglie: la parola c'e' sempre, la crocetta e' in piu' (→FF18). */
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px;
        padding: var(--sp-1) var(--sp-3); border: 1px solid var(--linea); border-radius: 999px;
        background: var(--superficie); color: var(--inchiostro); font: inherit;
        font-size: var(--t-s); cursor: pointer; }
.chip:hover { border-color: var(--accento); }
.chip:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.chip__x { color: var(--inchiostro-tenue); font-size: var(--t-m); line-height: 1; }
.attenzione { color: var(--attenzione); }
.faq { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
       padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq summary:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
/* I gruppi della FAQ, uno per pubblico: un segno del suo colore (--tinta, come le schede della
   zona) e non l'accento, che resta quello della pagina (lo decide viste.pagina sul body). Ogni
   gruppo chiude con la cosa da fare. `scroll-margin` perche' ci si arriva dai link in cima. */
.faq-gruppo { --tinta: var(--cliente); margin-top: var(--sp-6); padding-inline-start: var(--sp-4);
              border-inline-start: 4px solid var(--tinta); scroll-margin-top: var(--sp-4); }
.faq-gruppo--fattorino { --tinta: var(--fattorino); }
.faq-gruppo--azienda { --tinta: var(--azienda); }
.faq-gruppo h2 { margin-top: 0; scroll-margin-top: var(--sp-4); }
.faq-altro, .assistenza-email { margin: var(--sp-8) 0 var(--sp-4); padding: var(--sp-4) var(--sp-6);
              background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); }
.faq-altro h2, .assistenza-email h2 { margin-top: 0; }
.faq-altro .riga, .assistenza-email .riga { margin-bottom: 0; }
/* Una scheda con un gesto in fondo: il bottone sta sulla stessa riga in tutte le schede. */
.scheda--azione { display: flex; flex-direction: column; }
.scheda--azione .riga { margin: auto 0 0; padding-top: var(--sp-3); }

/* --- vetrina: hero e blocchi per pubblico ----------------------------------
   Il linguaggio del marchio: una foto a tutta larghezza con un velo nel colore del
   pubblico (arancio = cliente, verde = fattorino, blu = azienda), testo bianco,
   la effe del logo, un bottone «a filo». `--tinta` la decide il modificatore del blocco. */
.eroe { --tinta: var(--eroe-cliente); position: relative; isolation: isolate; color: var(--su-eroe);
        margin: 0 calc(50% - 50vw) var(--sp-8); padding: clamp(48px, 9vw, 112px) var(--sp-4);
        text-align: center; overflow: hidden; }
/* In cima alla pagina l'eroe tocca la testata: il padding di <main> lasciava una striscia
   di fondo fra la nav e la foto, che sembrava una pagina caricata a meta'. */
main > .eroe:first-child { margin-top: calc(-1 * var(--sp-6)); }
.eroe--fattorino { --tinta: var(--eroe-fattorino); }
.eroe--azienda { --tinta: var(--eroe-azienda); }
.eroe__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.eroe::before { content: ""; position: absolute; inset: 0; z-index: -1;
                background: color-mix(in srgb, var(--tinta) 85%, transparent); }
.eroe__dentro { max-width: 760px; margin: 0 auto; display: grid; gap: var(--sp-4); justify-items: center; }
.eroe h1, .eroe h2 { margin: 0; font-size: clamp(var(--t-xl), 4.5vw, var(--t-3xl)); line-height: 1.1; color: inherit; }
.eroe .intro { color: inherit; margin: 0; max-width: 60ch; font-size: var(--t-l); }
.eroe .riga { margin: var(--sp-2) 0 0; justify-content: center; }
.eroe .btn--primario { background: var(--superficie); border-color: var(--superficie); color: var(--inchiostro); }
.eroe .meta { color: inherit; }
.eroe__effe { width: 64px; height: 60px; opacity: .95; }
.eroe--compatto { padding: clamp(32px, 6vw, 64px) var(--sp-4); margin-bottom: var(--sp-6); }
/* Due blocchi per pubblico uno sotto l'altro sono UNA fascia, non due: la striscia di pagina
   fra il verde e il blu li faceva leggere come un errore di impaginazione. */
.eroe:has(+ .eroe) { margin-bottom: 0; }
.btn--grande { padding: var(--sp-3) var(--sp-6); font-size: var(--t-m); min-height: 48px; }
/* I tre passi: colonne numerate, non un elenco puntato. Il numero e' il filo del racconto,
   quindi si vede — e la riga d'accento sopra separa i passi dalle promesse, che stanno
   subito sotto e prima si confondevano con loro. */
.passi { list-style: none; padding: 0; margin: 0 0 var(--sp-8); display: grid; gap: var(--sp-6);
         counter-reset: passo; }
.passi > li { counter-increment: passo; padding-top: var(--sp-3); border-top: 3px solid var(--accento); }
.passi > li::before { content: counter(passo); display: block; font-family: var(--font-titoli);
                      font-size: var(--t-xl); font-weight: 700; line-height: 1; color: var(--accento);
                      margin-bottom: var(--sp-2); }
@media (min-width: 760px) { .passi { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }
/* Le stesse cifre in colonna: qui i passi sono cose da fare, non un racconto in tre tempi. */
.passi--elenco { gap: var(--sp-3); margin-bottom: var(--sp-6); }
@media (min-width: 760px) { .passi--elenco { grid-template-columns: 1fr; } }
.scheda h3 { margin-top: 0; font-size: var(--t-m); }
.scheda--icona { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-3); align-items: start; }
.icona { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
         background: var(--accento-vivo); }
.icona img { width: 34px; height: 34px; display: block; }
/* «Perche' noi»: le quattro promesse del marchio, con le icone arancio originali. Ognuna e'
   una tessera: prima erano quattro colonne di testo sospese nel bianco, e il titolo in
   maiuscoletto stretto andava a capo a meta' parola («NEPPURE I GRANDI / CARICHI»). */
.promesse { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; text-align: center;
            margin: 0 0 var(--sp-8); }
/* Colonne dichiarate e non `auto-fit`: le promesse sono quattro, e auto-fit lasciava una
   tessera orfana su una riga sua a meta' delle larghezze. 1 / 2 / 4, mai 3. */
@media (min-width: 480px) { .promesse { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .promesse { grid-template-columns: repeat(4, 1fr); } }
.promesse > div { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                  padding: var(--sp-6) var(--sp-4); display: grid; gap: var(--sp-2); align-content: start; }
.promesse img { width: 95px; height: 64px; display: block; margin: 0 auto; }
.promesse h3 { font-size: var(--t-m); letter-spacing: 0; margin: 0; text-wrap: balance; }
.promesse p { margin: 0; color: var(--inchiostro-tenue); font-size: var(--t-s); text-wrap: pretty; }
/* Blocco per pubblico dentro la pagina: due colonne, testo + azione, tinta ai bordi. */
.pubblico { border-inline-start: 6px solid var(--tinta); background: var(--superficie); border-radius: var(--raggio);
            padding: var(--sp-4) var(--sp-6); box-shadow: var(--ombra); }
.pubblico--fattorino { --tinta: var(--fattorino-vivo); }
.pubblico--azienda { --tinta: var(--azienda-vivo); }
.pubblico h2 { margin-top: 0; }

/* --- pie' di pagina del marchio -------------------------------------------
   Il marchio a sinistra, tre colonne di link e i plugin; sotto, una striscia sola. I link non
   sono sottolineati finche' non ci si passa sopra: in un blocco dove tutto e' un link, la
   sottolineatura non distingue niente e fa solo rumore. */
.pie { background: var(--nero); color: var(--su-nero); margin-top: var(--sp-8); }
.pie a { color: inherit; text-decoration: none; }
.pie a:hover, .pie a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.pie a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.pie__dentro { max-width: var(--colonna); margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-6);
               display: grid; gap: var(--sp-6) var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie__marchio { grid-column: 1 / -1; }
@media (min-width: 760px) { .pie__dentro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pie__dentro { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
                             .pie__marchio { grid-column: auto; } }
/* Il logo alla sua misura vera (330×94): piu' grande sarebbe un PNG ingrandito, cioe' sfocato. */
.pie__logo { display: inline-block; }
.pie__logo img { display: block; height: 84px; width: auto; max-width: 100%; }   /* come nella testata */
.pie__testo { color: inherit; opacity: .75; font-size: var(--t-s); line-height: 1.5; margin: var(--sp-3) 0 0; max-width: 30ch; }
.pie h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-3); opacity: .65; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); font-size: var(--t-s); }
.pie ul a { opacity: .85; display: inline-block; padding-block: 2px; }
.pie ul a:hover, .pie ul a:focus-visible { opacity: 1; }
/* Il network: una riga sotto la descrizione, non una colonna di nomi in maiuscolo che si
   leggevano come titoli. */
.pie__network { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
                margin-top: var(--sp-4); font-size: var(--t-s); }
.pie__network span { flex-basis: 100%; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
.pie__network a { font-family: var(--font-titoli); font-weight: 600; }
/* I plugin: i loghi a colori su tessere chiare, perche' su nero non si leggono. `.pie` davanti
   perche' `.pie ul a` (link di testo, inline e un po' spenti) non vinca sulle tessere. */
.pie .pie__plugin { gap: var(--sp-1); margin-bottom: var(--sp-3); }
.pie .pie__plugin a { display: flex; opacity: 1; align-items: center; justify-content: center; height: 40px; max-width: 10rem;
                 padding: var(--sp-1) var(--sp-2); background: var(--su-nero); border-radius: var(--raggio); }
.pie .pie__plugin a:hover, .pie .pie__plugin a:focus-visible { box-shadow: 0 0 0 2px var(--accento-vivo); }
.pie__plugin img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.pie .pie__plugin a.pie__api { justify-content: flex-start; gap: var(--sp-2); color: var(--nero); }
.pie__api svg { width: 20px; height: 20px; flex: none; }
.pie__api span { display: grid; line-height: 1.1; text-align: start; }
.pie__api strong { font-family: var(--font-titoli); font-size: var(--t-s); letter-spacing: .04em; }
.pie__api small { font-size: var(--t-xs); white-space: nowrap; }
/* Una striscia di link piccoli non e' una superficie grande: il «vivo» con testo chiaro stava a
   3,49:1 (la QA del 24 l'ha misurato). Fondo d'accento e il suo testo, AA in tutti e due i temi.
   Link legali e P.IVA stanno sulla stessa riga: erano due fasce, una arancio e una nera. */
.pie__riga { background: var(--accento); color: var(--su-accento); }
.pie__riga .pie__dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                          gap: var(--sp-2) var(--sp-6); padding: var(--sp-3) var(--sp-4); }
.pie__legali { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-family: var(--font-titoli);
               font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pie__fine { margin: 0; font-size: var(--t-xs); }
@media (max-width: 640px) { .eroe h1 { font-size: var(--t-xl); } .scheda--icona { grid-template-columns: 48px 1fr; } }
/* Il cambio lingua sta nella testata, piccolo: e' un'impostazione, non un'azione. Una
   tendina (<details>) con bandiera e nome: il bottone chiuso e' alto quanto il tema. */
.lingue { position: relative; margin: 0; }
.lingue summary { list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2);
                  min-height: 40px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--linea);
                  border-radius: 999px; cursor: pointer; font-size: var(--t-s); color: var(--inchiostro);
                  background: var(--superficie); }
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary::after { content: ""; width: .45em; height: .45em; border: solid currentColor;
                         border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.lingue[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
@media (hover: hover) { .lingue summary:hover { border-color: var(--accento); } }
.bandiera { width: 21px; height: 14px; border-radius: 2px; flex: none; display: block;
            box-shadow: 0 0 0 1px var(--linea); }
.lingue__menu { position: absolute; inset-inline-end: 0; top: calc(100% + var(--sp-1)); z-index: 20;
                min-width: 12rem; margin: 0; padding: var(--sp-1); display: grid; gap: 2px;
                background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                box-shadow: var(--ombra); }
.lingue__menu button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 40px;
                       padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--raggio);
                       background: transparent; color: var(--inchiostro); font: inherit; text-align: start;
                       cursor: pointer; }
.lingue__menu button:hover, .lingue__menu button:focus-visible { background: var(--accento-tenue); }
.lingue__menu button[aria-current="true"] { font-weight: 700; }
.lingue__nota { margin: var(--sp-1) 0 0; padding: var(--sp-2) var(--sp-3) var(--sp-1); max-width: 16rem;
                border-top: 1px solid var(--linea); font-size: var(--t-xs); color: var(--inchiostro-tenue); }
/* Il tema: un'icona tonda, una per stato (data-stato lo scrive app.js). Compare solo con la
   classe `js` (script pre-paint di base.html), perche' senza JavaScript non farebbe niente. */
.tema { display: none; }
.js .tema { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
            border: 1px solid var(--linea); border-radius: 50%; background: var(--superficie);
            color: var(--inchiostro); cursor: pointer; }
@media (hover: hover) { .js .tema:hover { border-color: var(--accento); } }
/* L'account: lo stesso cerchio del tema. Fuori, l'omino porta all'accesso; dentro,
   l'iniziale apre la tendina (come la lingua: <details>, senza JavaScript). L'email, che prima
   stava in testata e rubava spazio alle voci, sta in cima alla tendina. */
.conto { position: relative; margin: 0; }
.conto__tondo { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
                border: 1px solid var(--linea); border-radius: 50%; background: var(--superficie);
                color: var(--inchiostro); cursor: pointer; list-style: none; text-decoration: none; }
.conto__tondo::-webkit-details-marker { display: none; }
@media (hover: hover) { .conto__tondo:hover { border-color: var(--accento); } }
.conto__omino { width: 22px; height: 22px; display: block; }
.conto__iniziale { font: 700 var(--t-m)/1 var(--font-titoli); }
.conto[open] .conto__tondo { border-color: var(--accento); }
.conto__menu { position: absolute; inset-inline-end: 0; top: calc(100% + var(--sp-1)); z-index: 20;
               min-width: 14rem; max-width: min(20rem, calc(100vw - 2 * var(--sp-4))); margin: 0;
               padding: var(--sp-1); display: grid; gap: 2px; background: var(--superficie);
               border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); }
.conto__chi { margin: 0; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--linea);
              font-size: var(--t-s); color: var(--inchiostro-tenue); overflow-wrap: anywhere; }
.conto__menu a, .conto__menu button { display: flex; align-items: center; width: 100%; min-height: 40px;
                                      padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--raggio);
                                      background: transparent; color: var(--inchiostro); font: inherit;
                                      text-align: start; text-decoration: none; cursor: pointer; }
.conto__menu form { margin: 0; border-top: 1px solid var(--linea); padding-top: 2px; }
.conto__menu a:hover, .conto__menu a:focus-visible,
.conto__menu button:hover, .conto__menu button:focus-visible { background: var(--accento-tenue); }
.tema__icona { width: 20px; height: 20px; display: none; }
.tema:not([data-stato]) .tema__icona--auto, .tema[data-stato="auto"] .tema__icona--auto,
.tema[data-stato="light"] .tema__icona--light, .tema[data-stato="dark"] .tema__icona--dark { display: block; }

/* --- «Oggi»: lo schermo di chi consegna (→6.1) ----------------------------
   Regole diverse dal resto del sito, per un motivo diverso: qui si legge in piedi, con una
   mano sola, spesso al sole. Testo grande, bersagli grandi (≥ 56px: il pollice non e' un
   mouse), una colonna sola e nessuna tabella. Il bottone del passo resta appiccicato in
   basso, dove il pollice arriva senza cambiare presa.
   Niente colori nuovi: il verde e' quello del pubblico «fattorino», e il grigio distingue
   il ritiro dalla consegna — la semantica di --ok e --errore resta agli stati (→FE4). */
.incarichi { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-3); }
.incarico { background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra);
            border-inline-start: 6px solid var(--tinta); }
.incarico--ritiro { --tinta: var(--inchiostro-tenue); }
.incarico--consegna { --tinta: var(--accento-vivo); }
.incarico a { display: grid; gap: var(--sp-1); padding: var(--sp-4); min-height: 56px;
              text-decoration: none; color: inherit; }
.incarico a:hover .incarico__chi, .incarico a:focus-visible .incarico__chi { text-decoration: underline; }
.incarico__fase { font-family: var(--font-titoli); font-size: var(--t-xs); text-transform: uppercase;
                  letter-spacing: .08em; color: var(--tinta); }
.incarico__chi { font-size: var(--t-l); line-height: 1.2; }
.incarico__dove { color: var(--inchiostro-tenue); }
.incarico .meta { font-size: var(--t-s); }
.giorno { align-items: center; justify-content: space-between; gap: var(--sp-2); }
.fatte { margin-top: var(--sp-6); text-align: center; }

.incarico__titolo { margin-bottom: var(--sp-2); }
.incarico__titolo .meta { display: block; font-family: var(--font-testo); font-size: var(--t-s);
                          font-weight: 400; color: var(--inchiostro-tenue); }
.scheda--dove { text-align: center; }
.dove__chi { font-size: var(--t-l); font-weight: 600; margin: 0 0 var(--sp-1); }
.dove__riga { font-size: var(--t-m); margin: 0 0 var(--sp-3); }
.scheda--istruzioni p { font-size: var(--t-m); }
.elenco--colli code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* flex e non block: col block il bottone perdeva la centratura di `.btn`, e l'etichetta
   stava in alto in una pillola da 56 px. */
.btn--largo { display: flex; width: 100%; min-height: 56px; font-size: var(--t-m); }
/* Il passo sta in fondo allo schermo, non in fondo alla pagina: chi cammina non scrolla. */
.passo { position: sticky; bottom: var(--sp-2); z-index: 2; margin: var(--sp-6) 0 var(--sp-2); }
.btn--passo { min-height: 64px; font-size: var(--t-l); box-shadow: var(--ombra); }
.storto { margin-top: var(--sp-4); }
.storto summary { min-height: 44px; display: flex; align-items: center; cursor: pointer;
                  color: var(--inchiostro-tenue); font-family: var(--font-titoli); }
.storto .scheda { margin-top: var(--sp-3); }
.storto h2 { font-size: var(--t-m); margin-top: 0; }
/* I campi prendono tutta la riga: una `select` larga quanto le sue opzioni faceva
   scivolare l'intera pagina di lato sul telefono (misurato: 404px su uno schermo da 375). */
.storto select, .storto textarea, .storto input { width: 100%; max-width: 100%; min-height: 48px; }
/* --- la spunta dei colli con la fotocamera (→6.2) ------------------------- */
.scanner { margin: var(--sp-4) 0; }
.scanner__video { width: 100%; max-width: 100%; border-radius: var(--raggio); background: var(--nero);
                  aspect-ratio: 4 / 3; object-fit: cover; }
.conti { font-family: var(--font-titoli); font-size: var(--t-l); margin: 0 0 var(--sp-2); }
/* NB: non «esito»: quella classe e' gia' il messaggio di flash, e due significati sullo
   stesso nome fanno un colore che cambia quando cambia l'altra pagina. */
.lettura { min-height: 1.6em; margin: var(--sp-2) 0; font-weight: 600; }
.lettura--ok { color: var(--ok); }
.lettura--avviso { color: var(--attenzione); }
.collo { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; padding: var(--sp-2) 0; }
.collo--fatto code { text-decoration: line-through; }
.collo--fatto { color: var(--inchiostro-tenue); }
.collo [data-collo-stato] { margin-inline-start: auto; }

/* `hidden` vince su tutto. Un attributo della piattaforma perde contro qualsiasi regola
   d'autore che imposti `display` — e' cosi' che il bottone «inquadra le etichette» si
   vedeva su un telefono che non sa leggere i codici. Vale per l'intero sito, non solo qui. */
[hidden] { display: none !important; }
/* --- la firma col dito (→6.3) --------------------------------------------- */
.firma { margin: var(--sp-4) 0; }
/* `touch-action: none` o il dito fa scorrere la pagina invece di disegnare. */
/* Il fondo e' quello della stampa, non quello della pagina: si vede mentre si firma
   esattamente cio' che verra' salvato, anche con l'app in tema scuro. */
.firma__tela { width: 100%; height: auto; aspect-ratio: 600 / 260; touch-action: none;
               background: var(--stampa-fondo); border: 2px dashed var(--linea); border-radius: var(--raggio); }
/* --- la coda locale (→6.4) ------------------------------------------------
   Sta in alto e non si nasconde: e' la risposta a «l'ho premuto, e' partito?». */
.coda { background: var(--superficie); border-inline-start: 6px solid var(--attenzione);
        border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4);
        font-size: var(--t-s); }
.coda ul { list-style: none; padding: 0; margin: var(--sp-1) 0 0; display: grid; gap: var(--sp-1); }
.coda__attesa { margin: 0; font-weight: 600; }
.coda--ok { color: var(--ok); }
.coda--no { color: var(--critico); }
/* Un collo letto ma non ancora confermato dal server: «in attesa», non «fatto». */
.collo--attesa { opacity: .75; }
.collo--attesa code { text-decoration: underline dotted; }
/* --- la lingua e le icone di chi consegna (→6.5) --------------------------
   Le lingue in alto, grandi quanto un pollice: chi apre l'app la prima volta e non legge
   l'italiano non deve scorrere fino al piede per trovarle. */
.lingue-oggi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.lingue-oggi .btn { min-height: 44px; }
/* Un'icona non sostituisce mai la parola: le sta accanto. Da sola sarebbe un indovinello,
   e un indovinello in una lingua che non e' la tua e' un errore che aspetta. */
.icona { font-style: normal; font-size: 1.1em; line-height: 1; }
/* Dentro un bottone o accanto alla fase, l'icona e' un'emoji che sta davanti alla parola, non
   il cerchio da 56 px delle schede (`.icona` piu' su, stesso nome): senza questo «Chiedi aiuto»
   diventava una pillola alta 95 px col cerchio verde sopra l'etichetta. */
.btn .icona, .incarico__fase .icona { display: inline; width: auto; height: auto;
                                      background: none; border-radius: 0; color: inherit; }
.capito { background: var(--accento-tenue); border-radius: var(--raggio); padding: var(--sp-3); }
.capito label { display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: 600; }
.capito input { min-width: 24px; min-height: 24px; }
/* --- chiedere aiuto (→6.6) ------------------------------------------------
   I motivi sono bersagli grandi: si premono con i guanti, al freddo, di corsa. */
.motivi { border: 0; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-2); }
.motivi legend { font-family: var(--font-titoli); font-weight: 600; margin-bottom: var(--sp-2); }
.motivo { display: flex; gap: var(--sp-3); align-items: center; min-height: 56px;
          background: var(--superficie); border-radius: var(--raggio); padding: var(--sp-2) var(--sp-4);
          box-shadow: var(--ombra); }
.motivo input { min-width: 24px; min-height: 24px; }
/* «Mi sento in pericolo» non e' un motivo come gli altri: si vede prima di leggerlo. */
.motivo--urgente { border-inline-start: 6px solid var(--critico); }
.aiuto--urgente { border-inline-start: 4px solid var(--critico); padding-inline-start: var(--sp-2); }
.aiuto__risposta { background: var(--accento-tenue); border-radius: var(--raggio);
                   padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0 0; }
/* La traduzione automatica (10): si vede che e' una traduzione, e l'originale resta sotto. */
.tradotto { border-inline-start: 3px solid var(--linea); padding-inline-start: var(--sp-2); margin: var(--sp-2) 0; }
.tradotto details { margin-top: var(--sp-1); }
/* La chat della consegna (18): i propri messaggi da un lato, quelli degli altri dall'altro. */
.chat { list-style: none; padding: 0; margin: var(--sp-2) 0; display: grid; gap: var(--sp-2); }
.chat__messaggio { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                   padding: var(--sp-2) var(--sp-3); max-inline-size: 85%; }
.chat__messaggio--mio { justify-self: end; background: var(--accento-tenue); }
.chat__messaggio p { margin: var(--sp-1) 0 0; }
/* La mappa per comune (18, ADR-0005): un disegno nostro, coi colori dei token. */
.mappa { margin: var(--sp-3) 0; }
.mappa__svg { inline-size: 100%; block-size: auto; background: var(--superficie); border: 1px solid var(--linea);
              border-radius: var(--raggio); }
.mappa__punto circle { fill: var(--accento); fill-opacity: .75; stroke: var(--superficie); stroke-width: 2; }
.mappa__punto--fatte circle { fill: var(--inchiostro-tenue); }
.mappa__punto--punto circle, .mappa__punto--arrivo circle { fill: var(--inchiostro); }
.mappa__punto text { font-size: 12px; fill: var(--inchiostro); paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; }
.mappa__segno { display: inline-block; inline-size: .8em; block-size: .8em; border-radius: 50%; background: var(--accento); }
.mappa__segno--fatte { background: var(--inchiostro-tenue); }
.mappa__segno--punto, .mappa__segno--arrivo { background: var(--inchiostro); }
/* --- la pagina di chi aspetta (→7.1) -------------------------------------- */
.scheda--stato { text-align: center; }
.stato-grande { font-family: var(--font-titoli); font-size: var(--t-l); margin: 0 0 var(--sp-1); }
.tappe--pubbliche { list-style: none; padding: 0; display: grid; gap: var(--sp-1); margin: var(--sp-4) 0; }
.tappe--pubbliche li { padding-inline-start: var(--sp-5); position: relative; color: var(--inchiostro-tenue); }
.tappe--pubbliche li::before { content: "○"; position: absolute; inset-inline-start: 0; }
.tappe--pubbliche .tappa--fatta::before { content: "●"; color: var(--accento); }
.tappe--pubbliche .tappa--qui { color: var(--inchiostro); font-weight: 700; }
.tappe--pubbliche .tappa--qui::before { content: "●"; color: var(--accento); }
.storia { color: var(--inchiostro-tenue); font-size: var(--t-s); }
/* La finestra di arrivo (→7.3): grande quando c'e', assente quando non si puo' dire. */
.finestra { text-align: center; }
.finestra__ore { font-family: var(--font-titoli); font-size: var(--t-l); margin: 0 0 var(--sp-1); }
.non-recente { border-inline-start: 4px solid var(--attenzione); padding-inline-start: var(--sp-3); }
/* --- gli indicatori (→8.2): pochi numeri grandi, col loro periodo sopra --- */
.numeri { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-4);
          grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.numeri li { background: var(--superficie); border-radius: var(--raggio); padding: var(--sp-4);
             box-shadow: var(--ombra); display: grid; gap: var(--sp-1); }
.numero { font-family: var(--font-titoli); font-size: var(--t-xl); line-height: 1; }
/* --- la console delle eccezioni (→9.1) ------------------------------------ */
.sintesi li a { text-decoration: none; color: inherit; display: grid; gap: var(--sp-1); }
.sintesi--tardi { border-inline-start: 6px solid var(--critico); }
.caso--tardi { border-inline-start: 4px solid var(--critico); padding-inline-start: var(--sp-2); }
.casi { margin-top: var(--sp-4); }

/* Il marchio di chi spedisce (15): pagina del link e anteprima. Il colore arriva dalla
   tavolozza dei token (data-marchio); senza colore, l'intestazione e' una scheda normale.
   `.mittente` e non `.marchio`: `.marchio` e' il NOSTRO logo nella nav, e con lo stesso nome
   questa scheda dava al logo della nav bordo, sfondo e padding, e la nav dava al logo del
   mittente un'altezza fissa e il filtro del tema scuro. */
.mittente { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
           padding: .75rem 1rem; margin-bottom: 1rem; border-radius: var(--raggio, 8px);
           background: var(--superficie); border: 1px solid var(--linea); }
.mittente[data-marchio] { background: var(--marchio); border-color: var(--marchio); color: var(--su-marchio); }
.mittente[data-marchio] a { color: var(--su-marchio); }
.mittente__logo { max-height: 48px; max-width: 160px; width: auto; height: auto;
                 background: var(--su-marchio); border-radius: 4px; padding: 2px; }
.mittente__nome { margin: 0; font-weight: 700; font-size: 1.15rem; }
.mittente__sito { margin-inline-start: auto; }
.campione { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 3px;
            vertical-align: middle; background: var(--marchio); }

/* Le tappe di una programmazione ricorrente (19): l'ordine e' l'ordine del giro. */
.tappe-programmate { margin: var(--sp-2) 0; padding-inline-start: var(--sp-5); }
.tappe-programmate li { margin: var(--sp-1) 0; }
.riga--compatta { display: inline-flex; gap: var(--sp-1, .25rem); margin-inline-start: var(--sp-2); }

/* --- iscrizione (fattorino e azienda di trasporti) ---------------------------
   La form e' la cosa da fare sulla pagina: una scheda al centro, subito sotto l'hero, larga
   quanto serve a tre campi e non quanto la pagina. Il filo d'accento in alto la lega al
   pubblico (verde il rider, blu l'azienda) senza un colore letterale (→FE4). */
.iscrizione { max-width: 34rem; margin: 0 auto var(--sp-8); position: relative;
              background: var(--superficie); border: 1px solid var(--linea); border-top: 4px solid var(--accento);
              border-radius: var(--raggio); box-shadow: var(--ombra); padding: var(--sp-6); }
.iscrizione h2 { margin: 0 0 var(--sp-4); text-align: center; }
.iscrizione .modulo { max-width: none; gap: var(--sp-3); }
/* Il bottone occupa la riga: e' l'unica azione, e sul telefono si preme col pollice. */
.iscrizione .btn--primario { width: 100%; justify-content: center; }
.iscrizione__piede { text-align: center; margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
                     border-top: 1px solid var(--linea); }
@media (max-width: 560px) { .iscrizione { padding: var(--sp-4); } }
/* L'accesso (accedi.html) e' la stessa scheda, piu' stretta: due campi, non una registrazione.
   Sotto, le strade per chi un account non ce l'ha, larghe quanto la scheda. */
.accesso { max-width: 26rem; margin-top: var(--sp-4); margin-bottom: var(--sp-6); }
.accesso h1 { margin: 0 0 var(--sp-1); text-align: center; font-size: var(--t-2xl); }
.accesso__intro { margin: 0 0 var(--sp-4); text-align: center; color: var(--inchiostro-tenue); font-size: var(--t-s); }
.accesso__gia { margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio);
                background: var(--accento-tenue); font-size: var(--t-s); }
/* Le quattro porte per chi un account non ce l'ha. Larghe quanto la scheda dell'accesso
   qui sopra: erano 26rem sotto una scheda da 34, e sembravano una nota a pie' di pagina. */
.accesso__nuovo { max-width: 34rem; margin: 0 auto var(--sp-8); }
.accesso__nuovo h2 { font-size: var(--t-m); margin: 0 0 var(--sp-3); }
.porte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); font-size: var(--t-s); }
.porte > li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); align-items: start; }
.porte strong { display: block; margin-bottom: var(--sp-1); }
.porte p { margin: 0 0 var(--sp-1); }
.porte p:last-child { margin-bottom: 0; }
/* L'icona di una porta sta nel grigio del testo secondario, non nel cerchio d'accento: qui
   serve a distinguere le quattro righe, non a chiamare. `margin-top` per stare sulla prima
   riga del titolo invece che sopra. */
.porte__icona { color: var(--inchiostro-tenue); display: block; margin-top: .15em; }
/* Rider o azienda: due pagine (gli URL di WordPress), mostrate come un interruttore a due
   posizioni. Sono link, non bottoni di una form: cambiare vuol dire cambiare pagina. */
.commutatore { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); padding: var(--sp-1);
               margin-bottom: var(--sp-4); background: var(--carta); border: 1px solid var(--linea);
               border-radius: 999px; }
.commutatore a { display: flex; align-items: center; justify-content: center; min-height: 40px;
                 padding: var(--sp-1) var(--sp-3); border-radius: 999px; text-align: center;
                 font-family: var(--font-titoli); font-weight: 600; font-size: var(--t-s);
                 color: var(--inchiostro); text-decoration: none; }
.commutatore a:hover { background: var(--linea); }
.commutatore a[aria-current] { background: var(--accento); color: var(--su-accento); }
.commutatore a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
/* Passi che portano gia' il numero nel titolo («1. Apri l'account»): il contatore si tace. */
.passi--titolati > li::before { content: none; }
.passi--titolati h3 { margin: 0 0 var(--sp-1); font-size: var(--t-m); }
.passi--titolati p { margin: 0; color: var(--inchiostro-tenue); }

/* --- le icone disegnate (templates/_icone.html) ---------------------------
   Un tratto solo che prende il colore di chi lo contiene: dentro il cerchio d'accento e'
   il colore che sta SOPRA l'accento (bianco in chiaro, inchiostro in scuro), accanto a un
   titolo e' l'accento stesso. Nessun colore letterale, solo token (→FE4). */
.icona { color: var(--su-accento); }
.icona-svg { display: block; }
/* Un'icona accanto a un titolo: il titolo resta il titolo, l'icona sta a fianco e non
   occupa una riga sua. `flex-shrink: 0` o su un telefono si schiaccia a mezzaluna. */
.titolo-icona { display: flex; align-items: center; gap: var(--sp-3); }
.titolo-icona .icona-svg { color: var(--accento); flex: none; }
/* Le dodici schede dei servizi: piu' larghe delle 220px della griglia normale, perche' qui
   il cerchio da 56px si porta via un quarto della colonna. */
.griglia--servizi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.griglia--servizi .scheda h2 a { text-decoration: none; }
.griglia--servizi .scheda h2 a:hover { text-decoration: underline; }
/* Gli estratti ereditati da WordPress sono lunghi e diseguali (uno e' un paragrafo intero
   sulla legge degli oli esausti): quattro righe, poi si taglia. Il testo resta tutto
   nell'HTML — si taglia la vista, non il contenuto — e la scheda intera sta nella pagina
   del servizio, che e' dove si va a leggerla. */
.griglia--servizi .scheda p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
  overflow: hidden; margin-bottom: 0;
}
/* --- la pagina dei prezzi -------------------------------------------------
   La pastiglia e' la prima cosa che si legge: chi apre «Prezzi» cerca una cifra, non un
   paragrafo che la contiene. Fondo tenue dell'accento e testo scuro: AA in tutti e due i
   temi senza inventare un colore (→FE4).
   Non si chiama «cartellino»: quello esiste gia' ed e' l'etichetta stampata di un collo,
   col codice a barre e i suoi 100 x 150 mm. Due cose diverse, due nomi diversi. */
.pastiglia { display: inline-block; margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-3);
             border-radius: 999px; background: var(--accento-tenue); color: var(--accento-scuro);
             font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-s); }
/* Tre schede col cerchio: sotto le 19rem il testo accanto a un cerchio da 56px diventa una
   colonna di due parole, quindi si passa a una per riga (ci pensa `min(100%, …)`). */
.griglia--prezzi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
/* Schede di testo piu' larghe: sei stanno in tre colonne per due, non in quattro piu' due
   (/delivery-ready/). */
.griglia--larga { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.griglia--prezzi .scheda .btn { margin-top: var(--sp-2); }
/* Il bottone su una riga sua, largo quanto la scheda: accanto al cerchio gli restavano 68 px
   in meno, e «Iscriviti come fattorino» (251 px) andava a capo in una colonna da 250. La riga
   del testo prende lo spazio che avanza, quindi i tre bottoni stanno anche alla stessa altezza. */
.griglia--prezzi .scheda--icona { grid-template-rows: 1fr auto; }
.scheda__azione { grid-column: 1 / -1; margin: 0; }
/* I supplementi per distanza: tessere, non una frase con i punti e virgola. */
.nube--supplementi { gap: var(--sp-2); margin: 0 0 var(--sp-6); }
.nube--supplementi li { background: var(--superficie); border: 1px solid var(--linea);
                        border-radius: 999px; padding: var(--sp-1) var(--sp-4); font-size: var(--t-s); }
/* La colonna dei prezzi e' quella che si cerca: si vede. */
.tabella .num strong, .tabella td.num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- /mappa/: dove siamo --------------------------------------------------------
   Una barra con le schede e la ricerca sulla stessa riga, poi una vista alla volta. Senza
   JavaScript la barra delle schede non c'e' e le viste stanno una sotto l'altra. */
.dove__barra { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
               gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-4); }
.dove__barra .province__strumenti { margin: 0; flex: 1 1 16rem; max-width: 22rem; }
.dove__vista + .dove__vista { margin-top: var(--sp-6); }
.js .dove__vista + .dove__vista { margin-top: 0; }
/* Le schede: due bottoni in una pillola, come l'interruttore rider/azienda dell'iscrizione. */
.schede { display: none; }
.js .schede { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--superficie);
              border: 1px solid var(--linea); border-radius: 999px; }
.schede [role="tab"] { min-height: 40px; padding: var(--sp-1) var(--sp-6); border: 0; border-radius: 999px;
                       background: transparent; color: var(--inchiostro); cursor: pointer;
                       font-family: var(--font-titoli); font-weight: 600; font-size: var(--t-s); }
.schede [role="tab"]:hover { background: var(--linea); }
.schede [role="tab"][aria-selected="true"] { background: var(--accento); color: var(--su-accento); }
.schede [role="tab"]:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
/* La mappa: la sagoma fatta dai comuni, un punto per provincia che porta alla sua pagina. */
.italia { margin: 0; max-width: 34rem; margin-inline: auto; }
.italia__svg { display: block; inline-size: 100%; block-size: auto; }
.italia__sagoma { fill: var(--linea); }
/* Il cerchio trasparente e' il bersaglio del dito: il punto disegnato, sul telefono, e' di
   otto pixel. Dove le province sono fitte i bersagli si sovrappongono, e vince l'ultimo. */
.italia__tocco { fill: transparent; }
.italia__punto { fill: var(--accento); stroke: var(--carta); stroke-width: 1.5; transition: r var(--transizione); }
.italia__provincia text { font-family: var(--font-titoli); font-size: 9px; font-weight: 700; fill: var(--inchiostro);
                          paint-order: stroke; stroke: var(--carta); stroke-width: 3px; pointer-events: none; }
.italia__provincia:hover .italia__punto, .italia__provincia:focus-visible .italia__punto { r: 9; fill: var(--accento-scuro); }
.italia__provincia:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
.italia__provincia:focus-visible .italia__punto { stroke: var(--inchiostro); stroke-width: 2; }
.italia__provincia.spenta { opacity: .15; }
.italia figcaption { text-align: center; }
/* L'elenco: le regioni in colonne invece che una per riga — venti titoli uno sotto l'altro
   facevano una pagina lunga tre schermi per centodieci nomi. */
.regioni { columns: 15rem; column-gap: var(--sp-6); }
.regioni__voce { break-inside: avoid; margin-bottom: var(--sp-4); }
.regioni__voce h2 { font-size: var(--t-m); margin: 0 0 var(--sp-1); }
.regioni__voce ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-3);
                    font-size: var(--t-s); }
.regioni__voce li a { display: inline-block; padding-block: 2px; }

/* --- il form dentro la pagina comune ---------------------------------------------
   Una scheda con il filo d'accento, come l'iscrizione: e' la cosa da fare sulla pagina. */
.richiesta-qui { background: var(--superficie); border: 1px solid var(--linea); border-top: 4px solid var(--accento);
                 border-radius: var(--raggio); box-shadow: var(--ombra); padding: var(--sp-6); margin: var(--sp-6) 0; }
.richiesta-qui > h2 { margin-top: 0; }
@media (max-width: 560px) { .richiesta-qui { padding: var(--sp-4); } }

/* --- /prezzi/: cosa fa il prezzo -----------------------------------------------
   Un elenco di fattori, ognuno con la sua parola in grassetto: si scorre cercando «urgenza». */
.fattori { list-style: none; padding: 0; display: grid; gap: var(--sp-3);
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.fattori li { background: var(--superficie); border: 1px solid var(--linea); border-inline-start: 4px solid var(--accento);
              border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4); }


/* --- /scarica-i-plugin/: il download in fondo a ogni scheda ------------------------ */
.piattaforma__scarica { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
                        margin: var(--sp-2) 0 0; }

/* --- accesso con un account esterno (_accesso_esterno.html, ADR-0007) ---------------------
   Bottoni a tutta larghezza, neutri e uguali fra loro: nessun fornitore sembra piu'
   importante degli altri, e il segno e' in un colore solo (currentColor). Sotto, la riga che
   separa dall'accesso con email e password. */
.esterni { margin: 0 0 var(--sp-4); }
.esterni__bottoni { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.esterno { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px;
           padding: var(--sp-2) var(--sp-4); border: 1px solid var(--linea); border-radius: var(--raggio);
           background: var(--superficie); color: var(--inchiostro); text-decoration: none; font-weight: 600; }
.esterno:hover { border-color: var(--accento); }
.esterno:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.esterno__segno { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
                  font-family: var(--font-titoli); font-weight: 800; font-size: var(--t-s); line-height: 1; }
.esterni__oppure { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 0;
                   color: var(--inchiostro-tenue); font-size: var(--t-s); }
.esterni__oppure::before, .esterni__oppure::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.esterno-attesa { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--raggio);
                  background: var(--accento-tenue); }
.esterno-attesa p { margin: 0; }
.esterno-attesa .meta { margin-top: var(--sp-1); }
.collegati { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); max-width: 40rem; }
.collegati li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
                padding: var(--sp-2) var(--sp-3); border: 1px solid var(--linea); border-radius: var(--raggio); }
.collegati small { display: block; }
/* L'avviso del browser di un'app: prima dei bottoni, perche' dopo il clic Google non torna. */
.esterni__avviso { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--raggio);
                   border-inline-start: 4px solid var(--attenzione); background: var(--superficie); font-size: var(--t-s); }
.esterni__avviso p { margin: 0; }
.esterni__avviso p + p { margin-top: var(--sp-1); }

/* --- la testata della console (_nav.html, pagine /admin/…) ------------------------------
   Una riga sola e bassa: chi lavora in console la guarda cento volte al giorno, e ogni
   pixel di testata e' un pixel di coda in meno sullo schermo. Logo piccolo, poi le voci per
   mestiere — «Console» diretta, le altre con la loro tendina — e a destra tema e account.
   Le voci NON scorrono dentro la striscia (come sul sito): una tendina dentro un contenitore
   che scorre verrebbe tagliata, quindi sul telefono vanno a capo. */
.intestazione--console .nav { grid-template-columns: auto minmax(0, 1fr) auto;
                              grid-template-areas: "marchio voci servizio";
                              padding-block: var(--sp-2); column-gap: var(--sp-4); row-gap: 0; }
.intestazione--console .marchio img { height: 34px; }
.intestazione--console .nav__voci { justify-content: flex-start; gap: var(--sp-1);
                                    flex-wrap: wrap; overflow: visible; }
.intestazione--console .nav__servizio { grid-row: 1; }
.voce-console, .gruppo-console > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 var(--sp-2);
  border: 1px solid transparent; border-radius: 999px; cursor: pointer; list-style: none;
  font: 600 var(--t-xs)/1 var(--font-titoli); text-transform: uppercase; letter-spacing: .04em;
  color: var(--inchiostro); text-decoration: none; white-space: nowrap; }
.intestazione--console .nav__voci a.voce-console { border-bottom: 1px solid transparent; padding: 0 var(--sp-2); }
.gruppo-console > summary::-webkit-details-marker { display: none; }
.gruppo-console > summary::after { content: ""; width: .4em; height: .4em; border: solid currentColor;
                                   border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); opacity: .5; }
.gruppo-console[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.voce-console .icona-svg, .gruppo-console > summary .icona-svg { color: var(--inchiostro-tenue); flex: none; }
@media (hover: hover) {
  .voce-console:hover, .gruppo-console > summary:hover { background: var(--superficie); border-color: var(--linea); }
}
/* «Sei qui»: la voce o il gruppo che contiene la pagina aperta, col colore del pubblico. */
.intestazione--console .nav__voci a.voce-console[aria-current="page"],
.gruppo-console:has([aria-current="page"]) > summary,
.gruppo-console[open] > summary { background: var(--accento-tenue); border-color: var(--accento); }
.voce-console[aria-current="page"] .icona-svg,
.gruppo-console:has([aria-current="page"]) > summary .icona-svg { color: var(--accento-scuro); }
.gruppo-console { position: relative; margin: 0; }
.gruppo-console__menu { position: absolute; inset-inline-start: 0; top: calc(100% + var(--sp-1)); z-index: 20;
                        min-width: 14rem; max-width: min(20rem, calc(100vw - 2 * var(--sp-4)));
                        margin: 0; padding: var(--sp-1); display: grid; gap: 2px;
                        background: var(--superficie); border: 1px solid var(--linea);
                        border-radius: var(--raggio); box-shadow: var(--ombra); }
.intestazione--console .gruppo-console__menu a { display: flex; align-items: center; min-height: 38px;
    padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--raggio); color: var(--inchiostro);
    text-decoration: none; font: 400 var(--t-s)/1.3 var(--font-testo); text-transform: none; letter-spacing: 0; }
.intestazione--console .gruppo-console__menu a:hover,
.intestazione--console .gruppo-console__menu a:focus-visible { background: var(--accento-tenue); }
.intestazione--console .gruppo-console__menu a[aria-current="page"] { font-weight: 700; background: var(--accento-tenue); }
@media (max-width: 720px) {
  .intestazione--console .nav { grid-template-areas: "marchio servizio" "voci voci"; row-gap: var(--sp-2); }
  .intestazione--console .marchio img { height: 30px; }
  .intestazione--console .nav__voci { overflow: visible; flex-wrap: wrap; padding-bottom: 0; }
}

/* --- il pie' della console (_pie_console.html) --------------------------------------------
   Una riga, chiara come la pagina e non nera come il pie' del sito: in console il pie' non
   chiude un racconto, dice solo dove si e' e dove si torna. */
.pie--console { background: var(--superficie); color: var(--inchiostro-tenue); border-top: 1px solid var(--linea);
                margin-top: var(--sp-6); }
.pie--console .pie__dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                             gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.pie--console .pie__legali { font-weight: 600; }