/* =========================================================================
   LAVASECCO POINT — SISTEMA
   Design system del sito: token, reset, tipografia, primitive.
   I componenti e le sezioni stanno in css/sito.css.
   -------------------------------------------------------------------------
   L'IDEA (v6)
   Fino alla v5 il sito era una parete di sportelli: superfici contigue,
   spigoli vivi, raggio zero ovunque. Il committente l'ha trovato troppo
   secco, e dalla v6 le regole diventano queste:

     1. raggio 5 px. Ogni riquadro -- bottone, campo, scheda, pannello,
        fotografia -- ha gli angoli arrotondati di 5 px (--raggio). Restano
        a spigolo vivo solo le superfici che toccano il bordo della finestra
        (testata, fasce a tutta larghezza, fotografia dell'hero): un angolo
        tondo contro il bordo dello schermo sembra un errore di taglio.
     2. schede staccate, non celle contigue. Le griglie non condividono piu'
        i fili: ogni scheda ha il suo bordo e fra una e l'altra c'e' un
        vuoto (--fuga). Con gli angoli tondi due celle a contatto
        lascerebbero dei piccoli triangoli bianchi agli incroci.
     3. niente ombre a riposo. La profondita' si fa con il colore; solo le
        schede che si possono toccare si sollevano appena al passaggio del
        mouse (--ombra-su), per dire "questa si apre".

   Le eccezioni sono dichiarate: il pallino di stato (cerchio), l'anello di
   focus e il telefono disegnato, che ha gli angoli di un telefono.
   -------------------------------------------------------------------------
   INDICE
     1. Token
     2. Reset
     3. Tipografia
     4. Layout: contenitori e griglia
     5. Bottoni
     6. Moduli
     7. Link, liste, tabelle
     8. Utilita' e movimento
   ========================================================================= */

/* =========================================================================
   1. TOKEN
   ========================================================================= */

:root {

  /* ---- Colore ----------------------------------------------------------
     La v4 era un sito bianco e nero con il verde del marchio a macchie: le
     superfici scure erano inchiostro (#232323), i grigi erano grigi neutri.
     Ma il marchio non e' grigio e i negozi nemmeno: le pareti dei Point
     sono verdi, l'insegna e' verde, gli armadietti sono verdi.

     Qui il nero se ne va del tutto. Al suo posto c'e' una tinta sola -- il
     verde dell'insegna, #009a9c, lo stesso valore che il sito online usa da
     sempre -- declinata dal fondo piu' profondo (verde-950: testata, piede,
     manifesto) al velo piu' chiaro (verde-50: etichette). Anche i grigi del
     testo sono verdi desaturati: --inchiostro non e' piu' un nero, e'
     l'ultimo gradino della stessa scala.

     L'AMBRA #f5a623 e' il secondo colore e ha un lavoro solo: chiamare
     all'azione. Sta sui bottoni primari, sull'etichetta del servizio piu'
     richiesto, sulla riga del totale dentro allo schermo del totem, sulla
     spia dell'armadietto che si apre, sulla fascia della promozione e sui
     prezzi quando stanno su fondo scuro. Se comparisse per decorazione
     avrebbe gia' smesso di funzionare.

     Contrasti misurati (WCAG 2.1), su carta bianca e su carta-2:
       inchiostro      13.91  12.58
       inchiostro-2     8.69   7.86
       inchiostro-3     5.20   4.70   <- meta, didascalie, etichette
       verde-scuro      5.90   5.33   <- link, prezzi, stelle
       verde-800        7.80   7.05   <- testo dentro l'etichetta chiara
       ambra-testo      6.33   5.72   <- l'ambra quando deve essere testo
     e sulle due superfici scure:
       bianco su verde-900           11.46
       ambra  su verde-900            5.65
       ambra  su verde-950            7.07
       inchiostro sopra l'ambra       6.86   <- il bottone primario

     Due divieti, e sono aritmetici, non di gusto:
       il VERDE PIENO non e' mai testo su fondo chiaro (3.44) e non porta
       mai testo addosso (4.04 con l'inchiostro, 3.44 col bianco). E' un
       riempimento, una spia, un filo: dove serve del testo si scende a
       verde-800 o verde-900.
       l'AMBRA non e' mai testo su fondo chiaro (2.03). O e' fondo, con
       l'inchiostro sopra, o e' testo su fondo verde scuro. Per scriverla
       sulla carta esiste --ambra-testo, che e' la stessa tinta portata a
       6.33 abbassandone la luminosita'.
     ---------------------------------------------------------------------- */

  --verde:         #009a9c;   /* insegna, spie, riempimenti. MAI testo      */
  --verde-chiaro:  #00b0b2;   /* passaggio del mouse sui riempimenti verdi  */
  --verde-600:     #008587;   /* gradino intermedio della scala             */
  --verde-scuro:   #007072;   /* link, prezzi, stelle: 5.90 / 5.33          */
  --verde-800:     #005c5e;   /* testo su fondo chiaro, superfici medie     */
  --verde-900:     #04413f;   /* superficie scura: sezioni, fasce, video    */
  --verde-950:     #01302f;   /* superficie piu' profonda: testata e piede  */
  --verde-50:      #eaf6f4;   /* velo: fondo dell'etichetta, righe alterne  */
  --verde-100:     #c2e6e6;   /* bordo dell'etichetta                       */
  --verde-notte:   #04413f;   /* alias storico, usato dalla fascia business */
  --verde-velo:    rgba(0, 154, 156, .14);

  /* Il verde salvia del marchio (era --verde in v4). Come l'ambra: solo
     fondo, con l'inchiostro sopra (5.03). */
  --salvia:        #57ab8b;

  /* ---- Ambra: il colore dell'azione ----------------------------------- */
  --ambra:         #f5a623;   /* rgb(245,166,35): CTA, evidenza, prezzi     */
  --ambra-chiara:  #ffb943;   /* passaggio del mouse sul bottone primario   */
  --ambra-scura:   #d98c00;   /* filo e bordo, mai testo su carta (3.16)    */
  --ambra-testo:   #8a5300;   /* l'ambra quando deve essere letta: 6.33     */
  --ambra-velo:    rgba(245, 166, 35, .16);

  /* ---- Neutri, che neutri non sono: sono verdi desaturati ------------- */
  --inchiostro:    #14312f;   /* testo                                      */
  --inchiostro-2:  #37504d;   /* testo secondario                           */
  --inchiostro-3:  #5c716e;   /* meta, didascalie, etichette                */

  --carta:         #ffffff;   /* fondo principale                           */
  --carta-2:       #eef5f3;   /* fondo alternativo, sezioni pari            */
  --bianco:        #ffffff;   /* superficie delle celle                     */

  /* La superficie piena del sito e' il VERDE DELL'INSEGNA, #009a9c, per
     scelta del committente: testata, piede, binario, manifesto, app, fascia
     business, barra cookie e barra su telefono sono tutti quel colore, come
     le fasce del sito online.

     Va detto per intero, perche' e' una deroga alla regola che governa tutto
     il resto del foglio: su #009a9c il bianco sta a 3.44 : 1 e l'inchiostro
     a 4.04, cioe' sotto il 4.5 che WCAG AA chiede al testo piccolo (sopra
     invece il 3 : 1 dei corpi grandi, che qui sono la maggioranza). Il testo
     su queste superfici e' quindi BIANCO PIENO -- niente bianchi velati, che
     scenderebbero a 2.9 -- e i corpi minori sono in peso 500/600.

     Dove il testo piccolo e' la sostanza (le ore sulla targa, i numeri del
     disegno) resta il verde profondo della scala, che con il bianco sta a
     11.46 e con il giallo a 7.07. */
  --fondo-scuro:   var(--verde);
  --fondo-scuro-2: var(--verde);

  /* Unica eccezione, dal 23/09/2026: il manifesto («La tua lavanderia non
     chiude») viene subito dopo la sezione app, e due fasce dello stesso
     verde una dopo l'altra si leggevano come una sola. Il committente ha
     scartato una striscia di separazione («brutta»): il manifesto prende
     quindi il verde profondo della scala, e lo stacco lo fa il colore. */
  --fondo-notte:   var(--verde-900);

  --linea:         #cfe0dc;   /* hairline: e' lei che separa, non l'ombra   */
  --linea-chiara:  #e4efec;   /* hairline dentro le celle                   */
  --linea-scura:   rgba(255, 255, 255, .18);  /* hairline su fondo scuro    */

  /* Stati. Il verde di conferma non e' quello del marchio: sarebbe
     indistinguibile dall'interfaccia. */
  --ok:            #16704a;   /* 6.09 / 5.44 */
  --attesa:        #8a5300;   /* 6.33 / 5.72 — e' --ambra-testo            */
  --errore:        #a8241c;   /* 7.16 / 6.39 */

  /* ---- Tipografia ------------------------------------------------------
     Due famiglie, due ruoli, nessuna sovrapposizione.

     Archivo      tutto cio' che si legge come lingua: titoli, testo, bottoni.
                  Grottesco industriale da segnaletica, tiene i corpi enormi
                  senza sfaldarsi e resta leggibile a 15 px.
     Azeret Mono  tutto cio' che si legge come dato: etichette, numeri di
                  passo, orari, codici di ritiro, distanze. E' l'unica voce
                  "da macchina" del sito, e il suo disegno squadrato e' la
                  cosa piu' vicina al lettering del logo.

     Se un testo non e' un dato, non e' in mono. Vale anche al contrario.
     ---------------------------------------------------------------------- */

  --f-testo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-dato:  "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scala fluida. I salti sono grandi di proposito: la gerarchia si legge
     dal corpo prima che dal peso. */
  --t-mega:  clamp(2.85rem, 8vw,   7rem);     /* hero, manifesto            */
  --t-xxl:   clamp(2.15rem, 5.2vw, 4.5rem);   /* titolo di sezione          */
  --t-xl:    clamp(1.7rem,  3.1vw, 2.6rem);   /* titolo di blocco           */
  --t-lg:    clamp(1.25rem, 1.9vw, 1.6rem);   /* h3                         */
  --t-lead:  clamp(1.06rem, 1.15vw, 1.25rem); /* occhiello di sezione       */
  --t-testo: 1.0625rem;                        /* 17 px                     */
  --t-sm:    .9375rem;                         /* 15 px                     */
  --t-xs:    .8125rem;                         /* 13 px                     */
  --t-dato:  .75rem;                           /* 12 px, mono maiuscolo     */

  /* Interlinee: strette sui titoli (i corpi grandi hanno bisogno di meno
     aria fra le righe), larghe sul testo corrente. */
  --lh-mega:  .89;
  --lh-tit:  1.04;
  --lh-testo: 1.62;

  /* Crenatura: negativa sui titoli, altrimenti i corpi grandi sembrano
     sparsi; positiva e ampia sulle etichette in mono maiuscolo. */
  --cr-mega:  -.035em;
  --cr-tit:   -.025em;
  --cr-dato:   .14em;

  /* ---- Spaziatura ------------------------------------------------------
     Scala su base 4. Sotto s5 serve per i dettagli, sopra s7 per il ritmo
     verticale delle sezioni. */
  --s1:  4px;   --s2:  8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;   --s6: 32px;   --s7: 48px;  --s8: 64px;
  --s9: 96px;   --s10: 128px; --s11: 176px;

  --sezione:  clamp(64px, 8.5vw, 136px);  /* padding verticale di sezione   */

  /* ---- Layout ---------------------------------------------------------- */
  --max:     1360px;   /* contenuto                                         */
  --misura:  62ch;     /* lunghezza massima di riga leggibile               */
  --margine: clamp(20px, 4.2vw, 60px);
  --header:  68px;

  /* ---- Bordi ----------------------------------------------------------- */
  --filo:        1px solid var(--linea);
  --filo-chiaro: 1px solid var(--linea-chiara);
  --filo-scuro:  1px solid var(--linea-scura);
  --filo-forte:  1px solid var(--inchiostro);

  /* ---- Angoli e distacchi (v6) -----------------------------------------
     Un valore solo per tutti i riquadri, come chiesto dal committente: 5 px.
     --raggio-s serve ai pezzi piccoli (caselle di spunta, codici), dove 5 px
     su 20 farebbero gia' un cerchio. --fuga e' il vuoto fra due schede di
     una griglia: e' lui, adesso, a separarle. */
  --raggio:      5px;
  --raggio-s:    3px;
  --fuga:        clamp(10px, 1.2vw, 16px);
  --ombra-su:    0 14px 30px -18px rgba(1, 48, 47, .45);

  /* ---- Movimento -------------------------------------------------------
     Una sola curva per tutto il sito: parte decisa e si posa. Tre durate.
     Nessuna animazione in ciclo continuo, da nessuna parte. */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --veloce: 150ms;
  --medio:  300ms;
  --lento:  620ms;
}

/* Il tema chiaro e' una scelta, non un default: il sito non ha versione
   scura perche' le sue superfici scure (header, manifesto, footer) sono
   gia' parte della composizione e invertirle la distruggerebbe. */
:root { color-scheme: light; }

/* =========================================================================
   2. RESET
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Un'ancora non deve finire sotto all'header fisso */
  scroll-padding-top: calc(var(--header) + var(--s5));
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--f-testo);
  font-size: var(--t-testo);
  line-height: var(--lh-testo);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* La cifra tabulare tiene allineate le colonne di numeri (orari, prezzi,
     giorni) senza doverlo chiedere caso per caso. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* L'attributo hidden batte qualsiasi display dichiarato nel foglio di stile.
   Senza questa riga un .avviso[hidden] resterebbe visibile — .avviso ha
   display:flex e vince sul display:none del browser — e le pagine con i
   moduli mostrerebbero riquadri d'errore vuoti prima di ogni invio. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Focus: sempre visibile, mai solo al tab. Due pixel di teal fuori dal
   bordo, che si vedono sia su carta sia su fondo scuro. */
:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--ambra); color: var(--inchiostro); }

/* =========================================================================
   3. TIPOGRAFIA
   ========================================================================= */

h1, h2, h3, h4 {
  font-family: var(--f-testo);
  font-weight: 600;
  line-height: var(--lh-tit);
  letter-spacing: var(--cr-tit);
  text-wrap: balance;
}

/* --- Titoli display -----------------------------------------------------
   .mega e' il corpo piu' grande del sito: hero e manifesto. Peso 600, non
   700: a quelle dimensioni il 700 chiude le contro-forme e diventa un
   blocco nero. */
.mega {
  font-size: var(--t-mega);
  line-height: var(--lh-mega);
  letter-spacing: var(--cr-mega);
  font-weight: 600;
  text-wrap: balance;
}
.titolo   { font-size: var(--t-xxl); }
.titolo-s { font-size: var(--t-xl); }
.titolo-xs{ font-size: var(--t-lg); }

/* Il teal dentro un titolo evidenzia la parola che porta il concetto.
   Una sola parola per titolo, mai due. */
/* La parola sottolineata dei titoloni. Il giallo non puo' essere il colore
   del testo (2.03 sul bianco), ma puo' essere la riga che ci passa sotto:
   il testo resta inchiostro a 13.91 e il secondo colore del marchio compare
   nell'elemento piu' grande della pagina. */
.mega em, .titolo em {
  font-style: normal;
  color: inherit;
  background: linear-gradient(var(--ambra), var(--ambra)) 0 88% / 100% .16em no-repeat;
  padding: 0 .04em;
}

/* --- Etichetta in mono --------------------------------------------------
   L'occhiello sopra i titoli, le voci dei dati, i numeri di passo. Sempre
   maiuscolo, sempre crenato: e' la "targhetta" del sistema. */
.dato {
  font-family: var(--f-dato);
  font-size: var(--t-dato);
  font-weight: 500;
  letter-spacing: var(--cr-dato);
  text-transform: uppercase;
  line-height: 1.4;
  /* Verde scuro e non grigio: l'occhiello e' l'etichetta che apre ogni
     sezione, e su carta e' il posto piu' economico in cui far tornare il
     colore del marchio. 5.90 : 1. */
  color: var(--verde-scuro);
  font-variant-numeric: tabular-nums;
}
.dato--verde { color: var(--verde-scuro); }
.dato--chiaro { color: var(--bianco); }

/* --- Testo -------------------------------------------------------------- */
p { max-width: var(--misura); }

.occhiello {                     /* paragrafo introduttivo di sezione       */
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--inchiostro-2);
  max-width: 54ch;
}
.testo-2  { color: var(--inchiostro-2); }
.testo-3  { color: var(--inchiostro-3); }
.testo-sm { font-size: var(--t-sm); }
.testo-xs { font-size: var(--t-xs); }

strong, b { font-weight: 600; }

/* =========================================================================
   4. LAYOUT
   ========================================================================= */

.contenuto {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--margine);
}
.contenuto--stretto { max-width: 780px; }

.sezione { padding-block: var(--sezione); }
.sezione--corta { padding-block: clamp(44px, 5vw, 80px); }

/* Fondi. Sono quattro e bastano: carta, velo verde, bianco, verde scuro. */
.su-tenue    { background: var(--carta-2); }
.su-velo     { background: var(--verde-50); }
.su-bianco    { background: var(--bianco); }
.su-verde    { background: var(--fondo-scuro-2); color: var(--bianco); }
/* Sul verde dell'insegna il bianco velato non regge: gia' il bianco pieno
   sta a 3.44, e un .86 scenderebbe a 2.66. Su queste superfici il testo
   secondario non si schiarisce, si alleggerisce di peso. */
.su-verde .occhiello,
.su-verde .testo-2 { color: var(--bianco); }
.su-verde .dato    { color: var(--bianco); }
.su-verde a        { color: var(--bianco); }

/* --- Testata di sezione -------------------------------------------------
   Occhiello in mono, titolo, sommario. Sempre allineata a sinistra: il
   testo centrato costringe l'occhio a ricalcolare il margine a ogni riga. */
.testata { margin-bottom: clamp(36px, 4.6vw, 72px); }
.testata .dato { display: block; margin-bottom: var(--s4); }
.testata h2 { font-size: var(--t-xxl); max-width: 18ch; }
.testata .occhiello { margin-top: var(--s5); }

/* Filo orizzontale sopra la testata: e' il segno che apre ogni sezione e
   la lega alla griglia. */
/* Il filo che apre ogni sezione e' verde: e' il segno del marchio ripetuto
   dodici volte in una pagina, ed e' un tratto, non un testo (3.44 contro il
   3:1 richiesto). */
.testata--filo { border-top: 1px solid var(--verde); padding-top: var(--s5); }
.su-verde .testata--filo { border-top-color: rgba(255, 255, 255, .3); }

/* --- Griglia ------------------------------------------------------------
   Dodici colonne su desktop, quattro su telefono. Le sezioni che ne hanno
   bisogno la usano; le altre stanno in colonna singola. */
.griglia {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s5);
}
@media (max-width: 860px) {
  .griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Celle --------------------------------------------------------------
   La primitiva ricorrente: un rettangolo bianco con il suo filo e i suoi
   angoli da 5 px, staccato dai vicini dalla fuga. Fino alla v5 le celle
   condividevano i fili (trucco del gap colorato); con gli angoli tondi
   quel trucco lascia dei triangoli agli incroci, quindi ogni cella si
   disegna da sola. */
.celle {
  display: grid;
  gap: var(--fuga);
}
.cella {
  background: var(--bianco);
  border: var(--filo);
  border-radius: var(--raggio);
  padding: clamp(24px, 2.6vw, 40px);
}
.cella--carta { background: var(--carta-2); }

/* =========================================================================
   5. BOTTONI
   -------------------------------------------------------------------------
   Rettangolari con angoli da 5 px, alti 52 px, etichetta in Archivo 600.
   Quattro varianti con ruoli fissi:
     .b--point   AMBRA piena, testo inchiostro (6.86). SOLO per "trova un
                 Point" e per l'azione principale di una pagina: e' l'unico
                 elemento ambra della schermata, se ne compaiono due non ne
                 funziona piu' nessuno. Il verde pieno non puo' fare questo
                 lavoro perche' non regge testo addosso (4.04).
     .b--scuro   verde profondo (#01302f), testo bianco. Azione primaria
                 neutra, e l'unica che si legge anche sopra a una fascia verde.
     .b--filo    solo bordo, in verde-800. Azione secondaria.
     .b--chiaro  bianco pieno. Azione primaria sopra un fondo scuro.
   ========================================================================= */

.b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 0 var(--s6);
  border: 1px solid transparent;
  border-radius: var(--raggio);
  font-family: var(--f-testo);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--veloce) var(--curva),
              color var(--veloce) var(--curva),
              border-color var(--veloce) var(--curva),
              transform var(--veloce) var(--curva);
}
.b:active { transform: translateY(1px); }
.b svg { flex: none; }

.b--point  { background: var(--ambra); color: var(--inchiostro); }
.b--point:hover  { background: var(--ambra-chiara); }

/* Verde profondo, non il verde delle fasce: il bottone deve staccarsi
   ANCHE quando sta dentro a una fascia verde (bianco su verde-950: 11.46). */
.b--scuro  { background: var(--verde-950); color: var(--bianco); }
.b--scuro:hover  { background: var(--verde-800); }

.b--filo   { border-color: var(--verde-800); color: var(--verde-800); }
.b--filo:hover   { background: var(--verde-800); color: var(--bianco); }

.b--chiaro { background: var(--bianco); color: var(--inchiostro); }
.b--chiaro:hover { background: var(--carta-2); }

/* Sopra un fondo scuro il bordo dell'azione secondaria deve schiarirsi,
   altrimenti sparisce. Le tre superfici scure del sito che ospitano bottoni
   sono il fondo inchiostro, la fotografia dell'hero e la barra cookie: la
   barra non ha la classe .su-verde perche' non e' una sezione, e va
   quindi elencata a parte. */
.su-verde .b--filo,
.hero__foto .b--filo,
.barra-cookie .b--filo {
  border-color: rgba(255, 255, 255, .45);
  color: var(--bianco);
}
.su-verde .b--filo:hover,
.barra-cookie .b--filo:hover { background: var(--bianco); color: var(--inchiostro); }

.b--grande { min-height: 60px; padding: 0 var(--s7); font-size: var(--t-testo); }
.b--piena  { width: 100%; }

.b[disabled], .b.sta-caricando { pointer-events: none; opacity: .55; }

/* Rotellina di attesa. E' l'unica animazione in ciclo del sito ed esiste
   solo mentre una chiamata di rete e' in volo. */
.b.sta-caricando::after {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;                      /* eccezione dichiarata: e' un cerchio */
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* Link con freccia: la terza azione, quella che non merita un bottone. */
.freccia {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--inchiostro);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 3px;
  transition: border-color var(--veloce) var(--curva), color var(--veloce) var(--curva);
}
.freccia:hover { border-bottom-color: var(--inchiostro); }
.freccia svg { transition: transform var(--medio) var(--curva); }
.freccia:hover svg { transform: translateX(4px); }
.su-verde .freccia { color: var(--bianco); border-bottom-color: rgba(255,255,255,.3); }
.su-verde .freccia:hover { border-bottom-color: var(--bianco); }

/* =========================================================================
   6. MODULI
   ========================================================================= */

.campo { margin-bottom: var(--s5); }

.campo > label,
.etichetta {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--f-dato);
  font-size: var(--t-dato);
  font-weight: 500;
  letter-spacing: var(--cr-dato);
  text-transform: uppercase;
  color: var(--inchiostro-2);
}

input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s4);
  background: var(--bianco);
  border: 1px solid var(--linea);
  color: var(--inchiostro);
  font-size: var(--t-testo);
  transition: border-color var(--veloce) var(--curva);
  /* Il raggio va dichiarato esplicitamente: iOS mette il suo ai campi, e
     deve restare quello del resto del sito. */
  border-radius: var(--raggio);
  -webkit-appearance: none;
  appearance: none;
}
textarea { padding: var(--s3) var(--s4); min-height: 120px; line-height: 1.5; }

input:hover, select:hover, textarea:hover { border-color: var(--inchiostro-3); }
input:focus, select:focus, textarea:focus { border-color: var(--inchiostro); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--errore); }
input::placeholder { color: var(--inchiostro-3); }

/* La freccia del select e' disegnata qui: quella di sistema cambia forma
   a ogni piattaforma e rompe l'allineamento con gli altri campi. */
select {
  padding-right: var(--s8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2314181a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
}

/* Campo per i codici di ritiro: mono, spaziato, maiuscolo a video. Il
   codice sullo scontrino e' minuscolo, ma letto in mono maiuscolo si
   confonde molto meno fra 0/O e 1/l. */
.campo-codice {
  font-family: var(--f-dato);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  min-height: 64px;
}

.aiuto { margin-top: var(--s2); font-size: var(--t-xs); color: var(--inchiostro-3); }

.errore-campo {
  display: none;
  margin-top: var(--s2);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--errore);
}
.errore-campo.si-vede { display: block; }

/* Casella di spunta: disegnata a mano per restare coerente, con gli angoli
   piccoli (--raggio-s): 5 px su un quadrato da 20 la farebbero sembrare un
   pulsante di opzione. */
.spunta { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; }
.spunta input {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  border: 1px solid var(--inchiostro-3);
  background: var(--bianco);
  border-radius: var(--raggio-s);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background var(--veloce) var(--curva), border-color var(--veloce) var(--curva);
}
.spunta input:checked {
  background: var(--inchiostro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='m1 5 3.4 3.4L11 1.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--inchiostro);
}
.spunta span { font-size: var(--t-sm); color: var(--inchiostro-2); }

/* Il campo esca dei moduli: invisibile ma non display:none, che alcuni bot
   riconoscono, e fuori dal percorso di tabulazione. */
.esca {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Avvisi -------------------------------------------------------------
   Barra colorata a sinistra invece di un riquadro pieno: si legge subito
   ma non spezza la pagina in due. */
.avviso {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--bianco);
  border: var(--filo);
  border-left: 3px solid var(--inchiostro-3);
  border-radius: var(--raggio);
  font-size: var(--t-sm);
}
.avviso p { margin: 0; max-width: none; }
.avviso p + p { margin-top: var(--s2); }
.avviso svg { flex: none; margin-top: 2px; }
.avviso--ok      { border-left-color: var(--ok);      color: var(--ok); }
.avviso--attesa  { border-left-color: var(--attesa);  color: var(--attesa); }
.avviso--errore  { border-left-color: var(--errore);  color: var(--errore); }
.avviso--info    { border-left-color: var(--verde);    color: var(--inchiostro-2); }
.avviso--ok p, .avviso--attesa p, .avviso--errore p { color: inherit; }
.avviso a { color: inherit; }

/* =========================================================================
   7. LINK, LISTE, TABELLE
   ========================================================================= */

a { color: var(--verde-scuro); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Elenco puntato tipografico: il segno e' un trattino, non un pallino. */
.elenco li {
  position: relative;
  padding-left: var(--s5);
  margin-bottom: var(--s2);
  font-size: var(--t-sm);
  color: var(--inchiostro-2);
}
.elenco li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 10px; height: 1px;
  background: var(--verde);
}

/* Due colonne quando le voci sono molte e corte — gli elenchi di capi delle
   schede servizio. Sotto i 600 px torna a una sola: due colonne di quattro
   parole ciascuna su telefono sono due colonne di a-capo. */
.elenco--2 { columns: 2; column-gap: var(--s7); }
.elenco--2 li { break-inside: avoid; }
@media (max-width: 600px) { .elenco--2 { columns: 1; } }

/* Elenco di voci separate da filo: il pattern di riga del sito. */
.righe { border-top: var(--filo); }
.righe > li { border-bottom: var(--filo); padding: var(--s4) 0; }

/* --- Testo lungo --------------------------------------------------------
   Informative privacy e cookie: pagine che si leggono davvero solo se il
   ritmo verticale e' regolare. Unico posto del sito dove i titoli
   distanziano invece di aprire una sezione. */
.testo-lungo h2 {
  margin: var(--s8) 0 var(--s4);
  padding-top: var(--s4);
  border-top: var(--filo);
  font-size: var(--t-lg);
}
.testo-lungo h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.testo-lungo h3 { margin: var(--s6) 0 var(--s3); font-size: 1.05rem; }
.testo-lungo p { margin-bottom: var(--s4); color: var(--inchiostro-2); }
.testo-lungo ul { margin: 0 0 var(--s4); }
.testo-lungo li {
  position: relative;
  margin-bottom: var(--s2);
  padding-left: var(--s5);
  color: var(--inchiostro-2);
}
.testo-lungo li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 10px; height: 1px;
  background: var(--verde);
}
.testo-lungo code {
  font-family: var(--f-dato);
  font-size: .82em;
  background: var(--carta-2);
  padding: 1px 5px;
  border-radius: var(--raggio-s);
}
.testo-lungo table { margin-bottom: var(--s4); }

.tabella-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raggio); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
caption { text-align: left; }
th, td { padding: var(--s3) var(--s4); text-align: left; border-bottom: var(--filo); }
thead th {
  font-family: var(--f-dato);
  font-size: var(--t-dato);
  font-weight: 500;
  letter-spacing: var(--cr-dato);
  text-transform: uppercase;
  color: var(--inchiostro-2);
  border-bottom: var(--filo-forte);
  white-space: nowrap;
}
td.num { font-family: var(--f-dato); font-size: var(--t-sm); white-space: nowrap; }
tbody tr:hover { background: rgba(0, 154, 156, .05); }

/* =========================================================================
   8. UTILITA' E MOVIMENTO
   ========================================================================= */

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  left: var(--s4); top: -60px;
  z-index: 200;
  padding: var(--s3) var(--s5);
  background: var(--inchiostro);
  color: var(--bianco);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--raggio);
  transition: top var(--veloce) var(--curva);
}
.salta:focus { top: var(--s3); }

.filo-sopra { border-top: var(--filo); }
.filo-sotto { border-bottom: var(--filo); }
.nascosto[hidden] { display: none !important; }

/* --- Comparsa progressiva ----------------------------------------------
   Dodici pixel di scorrimento e una dissolvenza. Niente scale, niente
   rotazioni: il contenuto entra, non si esibisce.
   La classe .si-vede la mette js/main.js. Senza JavaScript, senza
   IntersectionObserver o con animazioni ridotte il contenuto resta
   visibile: mai nascondere testo dietro a un'animazione che puo' non
   partire. Da qui il .no-js sul <html>, tolto subito dallo script. */
.entra { opacity: 1; }
.js .entra {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}
.js .entra.si-vede { opacity: 1; transform: none; }

/* Sfalsamento: gli elementi di un gruppo entrano a 60 ms l'uno dall'altro.
   Oltre il quinto non serve, la percezione del ritardo si perde. */
.js .entra--2 { transition-delay: 60ms; }
.js .entra--3 { transition-delay: 120ms; }
.js .entra--4 { transition-delay: 180ms; }
.js .entra--5 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .entra { opacity: 1; transform: none; }
}

/* --- Stampa -------------------------------------------------------------
   Chi stampa questa pagina vuole quasi sempre l'indirizzo di un punto
   vendita o il riepilogo di un ordine. */
@media print {
  .sito-testata, .sito-pieta, .barra-cookie, .b, .salta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sezione { padding-block: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}