/* =========================================================================
   PULSE — il foglio di stile delle pagine che NON sono la discesa.

   La discesa (index.html) si porta dentro il suo stile, perche' e' un pezzo
   unico col 3D. Tutto il resto del sito sta qui, e deve sembrare la stessa
   casa: fondo nero, UN SOLO colore (l'oro #C9A96E), testo bianco grande,
   pochissima roba per pagina.

   LE MISURE VENGONO DA TONI, che ci vede poco:
   - il corpo del testo e' 21px, e sotto i 20 non si scende mai;
   - il testo secondario e' #cbc5b9 su #08080a, cioe' 11,7 a 1 (misurato; 12,2 e' sul nero puro): non e'
     "grigio su nero", e' bianco sporco;
   - l'oro #C9A96E su nero da' 8,9 a 1, quindi si puo' usare anche per le
     parole e non solo per le righe;
   - i link hanno una riga sotto SEMPRE, non solo quando ci passi sopra: il
     colore da solo non e' un segnale se non lo vedi bene.

   TUTTO AL CENTRO (05/09, richiesta di Toni: «mi piacerebbe avere le scritte
   centrali»). La prima versione teneva la colonna a sinistra come un
   documento; adesso la colonna sta in mezzo alla pagina e i titoli, gli
   attacchi e le risposte sono centrati. Le righe che sono TABELLE (i
   mestieri con il loro conto) restano nome a sinistra e numero a destra:
   una tabella centrata riga per riga diventa un mucchio frastagliato.

   IL FILO. Sulle pagine interne non c'e' il 3D (non serve: serve la
   coerenza). Al suo posto c'e' UN PEZZO DI FILO D'ORO che scende dall'alto
   fino a sopra il titolo, con la punta accesa, come se arrivasse dalla
   discesa. Sta nello spazio vuoto sopra il titolo e non attraversa mai le
   parole.

   IL MENU E' LO STESSO DELLA DISCESA: il nome a sinistra, le pagine e le
   tre lingue a destra, e SEGUE mentre si scende (05/09). Su schermo stretto
   le voci non ci stanno in una riga e diventano un tasto «Menu» che apre
   l'elenco a tutto schermo, a 28px.

   NIENTE CARATTERI DA INTERNET. Il sito vecchio caricava due font da
   Google: una pagina che dipende da un CDN e' una pagina che un giorno si
   apre con un altro carattere. Qui si usano quelli che il computer ha gia',
   gli stessi della discesa.
   ========================================================================= */
:root{
  --oro:#c9a96e;
  --oro-scuro:#6c5a33;
  --nero:#08080a;
  --bianco:#f4f1ea;
  --secondo:#cbc5b9;
  --riga:#2a2723;
  --bordo:#6c6154;
  --sans:ui-sans-serif,"Segoe UI",system-ui,sans-serif;
  /* L'ALTEZZA DELLA BARRA FISSA. La misura pulse2.js e la riscrive qui a ogni
     cambio di misura (le voci che vanno a capo, il tasto «Menu»): tutto cio'
     che deve stare sotto la barra legge questa. Il valore e' il ripiego
     senza JavaScript, misurato a 1440 (78 di barra + 1 di riga sotto). */
  --cima-alt:79px;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--nero); color:var(--bianco);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:21px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:var(--oro) }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--oro); outline-offset:3px;
}

/* ---- la barra in cima: il nome, e dove si va ---- */
/* LA BARRA SEGUE ANCHE QUI (05/09, Toni: «se vado nella roadmap o altrove,
   quella card invece di scendere con il resto rimane in alto, vorrei che
   scendesse»). Prima era `position:relative`: stava in cima al documento e
   spariva scorrendo, e per tornare a «Entra» dalla fine della roadmap si
   risaliva tutto. Adesso e' fissa, come nella discesa.
   E' SOLIDA DAL PRIMO PIXEL, non dopo mezza schermata come nella discesa:
   li' sotto c'e' il 3D e la prima schermata deve restare leggera; qui sotto
   c'e' solo testo, e il titolo sta subito sotto la barra. Una barra
   trasparente su un testo che scorre mette parole sotto parole, e Toni ci
   vede poco. Fondo nero PIENO (non un velo sfocato come nella discesa: un
   velo lascia intravedere il testo che passa dietro) e una riga sotto, la
   stessa delle voci.
   NIENTE backdrop-filter e niente transform su .cima, apposta: farebbero da
   riferimento ai figli fissi, e l'elenco a tutto schermo del telefono si
   schiaccerebbe dentro la barra (guasto gia' pagato nella discesa). */
.cima{
  position:fixed; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  font-family:var(--sans);
  background:var(--nero); border-bottom:1px solid var(--riga);
}
.cima-marchio{
  font-size:20px; font-weight:700; letter-spacing:.30em; text-transform:uppercase;
  color:var(--oro); text-decoration:none; padding:.3rem 0; white-space:nowrap;
}
/* L'ORDINE DELLE VOCI e' lo stesso in tutte le pagine, in cima e nel piede:
   Entra, Scarica, Domande, A che punto siamo, Roadmap — dall'azione alla
   lettura (05/09, Toni: «per primo Entra»). Sta nell'HTML, non qui. */
.cima-nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.3rem 1.6rem }
.cima-nav a{
  font-size:20px; color:var(--secondo); text-decoration:none; letter-spacing:.05em;
  padding:.35rem .1rem; border-bottom:1px solid transparent; white-space:nowrap;
}
.cima-nav a:hover,.cima-nav a:focus{ color:var(--bianco); border-bottom-color:var(--oro) }
.cima-nav a[aria-current]{ color:var(--oro); border-bottom-color:var(--oro) }
.cima-nav .cima-entra{ color:var(--oro) }
/* LE TRE LINGUE: IT, EN, FR (05/09, Toni: «dobbiamo mettere anche il sito
   IT, EN, FR»). Stanno NELLA BARRA e non nel piede, per tre ragioni: la
   barra adesso segue dappertutto, quindi la lingua e' sempre a un clic;
   la discesa un piede non ce l'ha; e chi arriva dall'estero la cerca in
   alto a destra, dove la mette ogni sito. Stanno DENTRO l'elenco
   (.cima-nav) apposta: su schermo stretto finiscono nel menu a tutto
   schermo come ultima riga, senza un secondo tasto in barra.
   Sono PAGINE VERE (en/ e fr/, fatte da lo script che traduce il sito), non
   un interruttore che cambia le parole al volo. La lingua corrente e' oro
   con la riga sotto, la stessa regola della pagina corrente: quello che e'
   «qui» e' oro. La scelta si ricorda (lingua.js). */
.cima-lingue{
  display:flex; gap:.9rem; align-items:baseline;
  margin-left:.4rem; padding-left:1.6rem; border-left:1px solid var(--bordo);
}
.cima-lingue a{ letter-spacing:.1em; font-weight:600 }
.cima-tasto,.cima-chiudi{ display:none }

/* IL PUNTO IN CUI LE VOCI DIVENTANO UN TASTO «MENU» era 900px; con le tre
   lingue la riga e' piu' lunga (misurata: 965px a 1000 di schermo, in
   italiano) ed era passato a 1040. Il 05/09 sera e' entrata la sesta voce,
   «Chi siamo», ed e' stato RIMISURATO con Playwright (nome + 1rem di
   spazio + le voci in una riga + i due bordi clamp(1.2rem,4vw,3rem)):
   la riga sta in una barra sola solo da 1096px in italiano, 1081 in
   inglese e 1182 in francese («Qui sommes-nous» e' la voce piu' lunga
   delle tre lingue, e il foglio e' uno solo). Sotto i 1220 scatta il
   tasto: 1182 piu' i 17px di una barra di scorrimento verticale, che il
   browser conta nella larghezza dello schermo ma toglie alla pagina,
   piu' un dito di margine. Cambiare questo numero vuol dire rimisurare
   nelle TRE lingue, non in una. */
@media (max-width:1220px){
  .cima{ padding-top:.75rem; padding-bottom:.75rem }   /* sul telefono la barra fissa mangia schermo: 70px invece di 85 */
  .cima-tasto{
    display:inline-block; font:inherit; font-family:var(--sans);
    font-size:20px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--bianco); background:none; border:2px solid var(--bordo);
    padding:.45rem 1rem; cursor:pointer;
  }
  /* l'elenco a tutto schermo: cinque righe grandi, e un tasto per chiudere */
  .cima-nav{
    display:none; position:fixed; inset:0; z-index:6;
    background:rgba(8,8,10,.97);
    flex-direction:column; align-items:center; justify-content:center;
    gap:1.3rem; padding:2rem;
  }
  .cima.aperta .cima-nav{ display:flex }
  .cima-nav a{ font-size:28px; letter-spacing:.06em; border-bottom:1px solid var(--oro-scuro); padding:.3rem .2rem }
  .cima-lingue{ border-left:0; padding-left:0; margin:1rem 0 0; gap:1.8rem }
  .cima-chiudi{
    display:inline-block; margin-top:1.6rem; font:inherit; font-family:var(--sans);
    font-size:20px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--secondo); background:none; border:2px solid var(--bordo);
    padding:.55rem 1.4rem; cursor:pointer;
  }
}

/* ---- il corpo della pagina: una colonna in mezzo ---- */
/* LA COLONNA E' LARGA 46rem (736 px) E STA AL CENTRO. I paragrafi dentro
   non superano i 34rem (544 px), cioe' circa 60 lettere per riga a 21px:
   sotto le 50 il testo si spezzetta, sopra le 75 l'occhio perde il capo
   della riga successiva. Le righe di separazione sono larghe UGUALE alla
   colonna: se fossero larghe quanto la pagina sembrerebbero un'altra
   griglia. */
/* IN TESTA C'E' L'ALTEZZA DELLA BARRA PIU' I 7,6rem DI PRIMA: la barra e'
   fissa e non occupa piu' spazio nel documento, quindi lo spazio glielo
   lascia main. Il risultato a schermo e' identico a prima (titolo a 248px
   a 1440), solo che la barra resta. Senza questo, il primo titolo della
   roadmap finiva sotto la barra. */
main{
  position:relative; z-index:1;
  max-width:46rem; margin:0 auto;
  padding:calc(var(--cima-alt) + 7.6rem) clamp(1.2rem,4vw,3rem) 4.5rem;
  text-align:center;
}
/* UN'ANCORA NON FINISCE SOTTO LA BARRA. Quando la pagina salta a un punto
   (faq.html#discord, una voce della roadmap portata in vista, un campo
   raggiunto col tabulatore) il browser lo mette al bordo alto dello
   schermo, che adesso e' coperto: scroll-margin-top lo tiene sotto la
   barra con un dito d'aria. Vale per le ancore, i titoli, le voci e tutto
   cio' che prende il fuoco. */
main :is([id],a,button,input,summary,h1,h2,li,.voce,.giorno){
  scroll-margin-top:calc(var(--cima-alt) + 1rem);
}
/* IL PEZZO DI FILO sopra il titolo: sta nei 7,6rem di spazio in testa alla
   colonna, entra sfumando dal buio e finisce con la punta accesa. E'
   assoluto dentro main e parte da SOTTO la barra fissa (top:--cima-alt),
   come se uscisse da dietro: cosi' non incrocia mai le voci del menu. */
.filo{
  position:absolute; top:var(--cima-alt); left:50%; margin-left:-1.5px;
  width:3px; height:5.4rem; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(201,169,110,0) 0%, rgba(201,169,110,.9) 55%, rgba(201,169,110,.9) 100%);
  box-shadow:0 0 12px rgba(201,169,110,.45);
}
.filo::after{
  content:""; position:absolute; left:50%; bottom:-6px;
  width:11px; height:11px; margin-left:-5.5px; border-radius:50%;
  background:#f3dfae; box-shadow:0 0 14px 4px rgba(201,169,110,.6);
}
.occhiello{
  font-family:var(--sans);
  font-size:20px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--oro); font-weight:600; margin:0 0 1.1rem;
}
h1{
  font-size:clamp(2.6rem,7vw,4.4rem); line-height:1.05; font-weight:400;
  letter-spacing:-.015em; margin:0 auto 1.4rem; text-wrap:balance; max-width:14em;
}
.attacco{
  color:var(--secondo); font-size:23px; margin:0 auto 2.8rem; max-width:34rem;
  text-wrap:pretty;
}
main p{ max-width:34rem; margin-left:auto; margin-right:auto }
.centro{ text-align:center }

/* ---- le voci: una domanda, una risposta. Niente accordion: si legge
        tutto, e quello che si vede non va cliccato per esistere. ---- */
.voci{ margin:0; padding:0; list-style:none }
.voci li{ padding:1.8rem 0; border-top:1px solid var(--riga) }
.voci li:last-child{ border-bottom:1px solid var(--riga) }
.voci h2{
  font-size:clamp(1.5rem,3.4vw,2rem); font-weight:400; margin:0 auto .55rem;
  line-height:1.2; text-wrap:balance;
}
.voci p{ margin:0 auto; color:var(--secondo); max-width:34rem; text-wrap:pretty }

/* ---- i numeri grossi ---- */
.numeri{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem 3rem;
  margin:0 0 2.2rem; padding:0; list-style:none;
}
.numeri li{ min-width:7rem }
.numeri b{
  display:block; font-size:clamp(2.6rem,6vw,3.6rem); font-weight:400;
  color:var(--oro); line-height:1;
}
.numeri span{
  display:block; margin-top:.35rem; color:var(--secondo);
  font-family:var(--sans); font-size:20px;
}

/* ---- il modulo (entra, parola d'ordine) ---- */
form{ margin:0 auto 2rem; max-width:24rem }
.campo{ display:block; margin:0 0 1.4rem; text-align:left }
.campo span{
  display:block; margin-bottom:.45rem;
  font-family:var(--sans); font-size:20px; color:var(--secondo);
}
.campo input{
  display:block; width:100%; font:inherit; font-size:21px;
  padding:.75rem .9rem; color:var(--bianco);
  background:#111014; border:2px solid #453e33; border-radius:2px;
}
.campo input:focus{ border-color:var(--oro); outline:none }
.tasto{
  display:inline-block; font:inherit; cursor:pointer;
  font-family:var(--sans);
  font-size:20px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:1rem 2.4rem; text-decoration:none;
  color:var(--oro); background:none; border:2px solid var(--oro);
  transition:background .25s, color .25s;
}
.tasto:hover,.tasto:focus{ background:var(--oro); color:var(--nero) }
.dopo{ color:var(--secondo); margin-top:1.8rem }

/* ---- il secondo tasto, e il blocco «Registrati» di entra.html (05/09) ----
   Due tasti nella stessa pagina non possono essere uguali, se no non si
   capisce qual e' l'azione principale. Entra resta oro, l'unico colore del
   sito. Registrati ha la STESSA forma e la STESSA misura (si vede che e' un
   tasto), ma la parola e' bianca (#f4f1ea sul nero, 17,7 a 1) e il bordo e'
   bianco sporco: si legge benissimo, e non e' quello acceso. Il blocco sta
   sotto una riga sottile, come le voci delle altre pagine. */
.tasto-secondo{ color:var(--bianco); border-color:var(--secondo) }
.tasto-secondo:hover,.tasto-secondo:focus{ background:var(--bianco); color:var(--nero) }
.nuovo{
  max-width:34rem; margin:2.8rem auto 0; padding-top:2.2rem;
  border-top:1px solid var(--riga);
}
.nuovo h2{
  font-size:clamp(1.5rem,3.4vw,2rem); font-weight:400; margin:0 auto 1.2rem;
  line-height:1.2; text-wrap:balance;
}
.nuovo .dopo{ margin-top:1.4rem }

/* ---- l'elenco dei mestieri, nella pagina di stato: e' una tabella,
        quindi nome a sinistra e conto a destra, dentro la colonna centrata ---- */
h2.famiglia{
  font-size:clamp(1.6rem,3.6vw,2.1rem); font-weight:400; margin:2.8rem 0 .7rem;
  color:var(--oro);
}
.mestieri{ margin:0 0 1rem; padding:0; list-style:none; text-align:left }
.mestieri li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem;
  padding:.8rem 0; border-top:1px solid var(--riga);
}
.mestieri li:last-child{ border-bottom:1px solid var(--riga) }
.mestieri .chi{ color:var(--oro); font-size:20px; font-family:var(--sans) }
.mestieri .conto{
  margin-left:auto; color:var(--secondo); font-size:20px;
  font-family:var(--sans); white-space:nowrap;
}

/* ---- la roadmap: i filtri, e le voci giorno per giorno ---- */
/* I QUATTRO FILTRI SONO INTERRUTTORI. Acceso = oro pieno con la scritta
   nera (8,6 a 1), spento = bordo grigio e scritta chiara (12,2 a 1). Non si
   abbassa l'opacita' di quello spento: una parola sbiadita per Toni e' una
   parola che non c'e'. */
.filtri{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin:0 0 2.6rem; padding:0;
}
.filtro{
  font:inherit; font-family:var(--sans); font-size:20px; letter-spacing:.04em;
  cursor:pointer; padding:.5rem 1.1rem; border-radius:999px;
  background:none; border:2px solid var(--bordo); color:var(--secondo);
  transition:background .2s, color .2s, border-color .2s;
}
.filtro b{ font-weight:700; margin-right:.3rem }
.filtro[aria-pressed="true"]{ background:var(--oro); border-color:var(--oro); color:var(--nero) }

.giorno{ margin:0 0 2.6rem; text-align:left }
.giorno h2{
  text-align:center; font-size:clamp(1.5rem,3.4vw,1.9rem); font-weight:400;
  color:var(--oro); margin:0 0 .7rem; line-height:1.2;
}
.giorno h2 small{
  display:block; font-family:var(--sans); font-size:20px; letter-spacing:.05em;
  color:var(--secondo); margin-top:.15rem;
}
/* OGNI VOCE E' UN <details>: chiusa mostra la riga sola (etichetta, titolo,
   ora), aperta mostra la nota. E' l'unico posto del sito dove si clicca per
   leggere, e c'e' scritto nell'attacco. Il segno «+» a destra lo dice anche
   a chi non legge l'attacco. */
.voce{ border-top:1px solid var(--riga) }
.voce:last-child{ border-bottom:1px solid var(--riga) }
.voce summary{
  list-style:none; cursor:pointer;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1rem;
  padding:.9rem 0; font-size:22px; line-height:1.35;
}
.voce summary::-webkit-details-marker{ display:none }
.voce summary:hover .t{ color:var(--oro) }
/* le etichette hanno tutte la stessa larghezza (7.2rem, quanto «DA FARE»
   con la sua spaziatura), cosi' i titoli partono tutti dalla stessa colonna */
.voce .tag{
  flex:none; font-family:var(--sans); font-size:20px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--oro);
  min-width:7.2rem; text-align:center;
}
.voce .tag.dafare,.voce .tag.idee{ color:var(--secondo) }
.voce .tag.male{ color:var(--nero); background:var(--oro); padding:0 .45rem }
.voce .t{ flex:1 1 18rem; color:var(--bianco) }
.voce .ora{ flex:none; margin-left:auto; font-family:var(--sans); font-size:20px; color:var(--secondo) }
.voce .piu{ flex:none; font-family:var(--sans); font-size:24px; color:var(--oro); width:1.2rem; text-align:right }
.voce[open] .piu{ transform:rotate(45deg); display:inline-block }
/* su schermo stretto la riga si spezza in due APPOSTA: sopra l'etichetta,
   l'ora e il segno «+»; sotto il titolo per tutta la larghezza. Lasciata
   al ritorno a capo naturale, il «+» finiva da solo su una terza riga. */
@media (max-width:600px){
  .voce .tag{ order:0; min-width:0; text-align:left }
  .voce .ora{ order:1 }
  .voce .piu{ order:2 }
  .voce .t{ order:3; flex-basis:100%; font-size:21px }
}
.nota{ padding:.2rem 0 1.5rem; max-width:40rem }
.nota .meta{ font-family:var(--sans); font-size:20px; color:var(--oro); margin:0 0 .7rem; max-width:none }
.nota .breve{ margin:0 0 .7rem; color:var(--bianco); max-width:none }
.nota .testo{ color:var(--secondo); white-space:pre-wrap; overflow-wrap:anywhere }

/* ---- il piede ---- */
footer{
  position:relative; z-index:1;
  border-top:1px solid var(--riga);
  padding:1.8rem clamp(1.2rem,4vw,3rem) 2.8rem;
  color:var(--secondo); text-align:center;
}
footer nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.8rem; margin-bottom:1rem }
footer nav a{
  font-family:var(--sans); font-size:20px;
  color:var(--bianco); text-decoration:none;
  border-bottom:1px solid var(--oro-scuro); padding-bottom:.15rem;
}
footer nav a:hover,footer nav a:focus{ color:var(--oro); border-bottom-color:var(--oro) }
footer p{ margin:0 auto; font-size:20px; max-width:34rem }

@media (prefers-reduced-motion:reduce){
  .tasto,.filtro{ transition:none }
}

/* =========================================================================
   LE TRE PAGINE ENTRATE IL 05/09 SERA: «Chi siamo» (chi_siamo.html),
   «Lavora con noi» (lavora.html) e l'area riservata (entrato.html, quello
   che si vede dopo essere entrati). Vengono dai tre mockup approvati da
   Toni (Scatti/chi_siamo.html, Scatti/lavora.html, Scatti/area_unita.html)
   e lo stile che avevano dentro sta qui sotto, spostato e non ridisegnato.

   NIENTE DI QUELLO CHE STA SOPRA E' STATO TOCCATO. Le classi che nei
   mockup avevano lo STESSO NOME di una gia' in uso qui, o lo stesso nome
   fra un mockup e l'altro, sono state rinominate nella pagina nuova, mai
   sovrascritte: una classe che ne sovrascrive un'altra rompe una pagina
   che oggi funziona, e il guasto compare altrove.
       .voci (faq)        -> .conto-voci, .conto-voci-corte  (area riservata)
       .voce (roadmap)    -> .bollo-voce                     (l'anello)
       .tasto.spento      -> .tasto-spento   (.tasto:hover riempirebbe d'oro un tasto spento)
       .fatti             -> .chi-fatti (chi siamo)  e .celle (area riservata)
       .legenda           -> .chi-legenda, .lavora-legenda, .conto-legenda
       .quando            -> .chi-quando (chi siamo)  e .bollo-quando (area)
       .etichetta (lavora)-> .bozza      (l'area riservata tiene .etichetta)
       .num (lavora)      -> .tondo      (l'area ha i suoi .num, scopati)
       .pagina / .r       -> .conto-pagina / .fascia
   Ogni pagina porta una classe sul <main> (.chi, .lavora, .riservata) e le
   regole sui TAG (h2, h3, section, code) stanno sotto quella classe: un
   `h2{color:oro}` nudo avrebbe colorato d'oro le domande della faq.
   Le classi UGUALI a quelle di sopra (.cima, .filo, .occhiello, .attacco,
   .numeri, .tasto, .tasto-secondo, .dopo, .segnaposto fra le due pagine)
   NON sono state ricopiate: si usano quelle.
   I TESTI CHE IL CSS SCRIVEVA DA SOLO («Tu sei qui», «il tuo, oggi»,
   «Conviene» in content:"...") ora vengono da un attributo data-* nella
   pagina (content:attr(...)): il foglio e' uno per tre lingue, e una
   parola dentro il CSS non la traduce nessuno.
   ========================================================================= */
:root{
  --tile:#111014;          /* il fondo delle tessere e delle celle */
  --caldo:#1a1508;         /* il fondo caldo dei riquadri in cornice d'oro */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
.sotto{ color:var(--secondo); text-wrap:pretty }
.segnaposto{
  display:inline-block; font-family:ui-monospace,Consolas,monospace; font-size:20px; font-weight:700;
  color:var(--nero); background:#f3dfae; padding:.35rem .9rem; border-radius:3px; letter-spacing:.02em;
}

/* ---- CHI SIAMO e LAVORA CON NOI: le cose che hanno in comune ---- */
.chi section{ margin:0 0 4.2rem }
.lavora section{ margin:0 0 4.4rem }
.chi h2,.lavora h2{
  font-size:clamp(1.6rem,3.6vw,2.2rem); font-weight:400; margin:0 0 .6rem;
  line-height:1.2; color:var(--oro); text-wrap:balance;
}
.chi .sotto{ margin:0 auto 1.4rem }
.lavora .sotto{ max-width:36rem; margin:0 auto 1.6rem }
.lavora .sotto-dopo{ margin-top:1.8rem }
/* le legende con i due campioni di bordo: pieno = c'e' / vale oggi,
   tratteggiato = non c'e' / non e' deciso */
.chi-legenda,.lavora-legenda{ font-family:var(--sans); font-size:20px; color:var(--secondo) }
.chi-legenda{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2.4rem; margin:1.2rem 0 0 }
/* in «Lavora con noi» le due righe stanno una sotto l'altra, allineate a
   sinistra e centrate come blocco: in fila andavano a capo sfalsate */
.lavora-legenda{
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  width:max-content; max-width:100%; margin:0 auto 1.2rem;
}
.chi-legenda span,.lavora-legenda span{ display:inline-flex; align-items:center; gap:.6rem; text-align:left }
.chi-legenda i,.lavora-legenda i{ flex:none; width:40px; height:26px; border-radius:3px; display:inline-block; background:var(--tile) }
.chi-legenda i.p,.lavora-legenda i.p{ border:2px solid var(--oro) }
.chi-legenda i.t,.lavora-legenda i.t{ border:2px dashed var(--bordo) }

/* ---- CHI SIAMO ---- */
.chi-numeri{ gap:1.6rem 2.6rem; margin-bottom:1.2rem }       /* i .numeri di stato.html, un po' piu' stretti */
/* C'E' / NON C'E': due colonne, la stessa forma del patto di «Lavora con noi» */
.due{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin:1.6rem auto 0; text-align:left }
.due .testa{ text-align:center; font-family:var(--sans); padding:.7rem .6rem; border-radius:4px }
.due .testa.si{ border:3px solid var(--oro); background:var(--caldo) }
.due .testa.no{ border:3px dashed var(--bordo) }
.due .testa .nome{ display:block; font-size:26px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); line-height:1.15 }
.due .testa .conto{ display:block; font-size:20px; color:var(--secondo); margin-top:.25rem }
.due ul{ list-style:none; margin:0; padding:0 }
.due li{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.7rem .9rem; background:var(--tile); border-radius:4px; margin:0 0 .7rem; font-size:22px; line-height:1.3;
}
.due .si li{ border:2px solid var(--oro) }
.due .no li{ border:2px dashed var(--bordo); color:var(--secondo) }
.due li b{ flex:none; font-family:var(--sans); font-size:24px; color:var(--oro); font-weight:700; min-width:1.6rem }
.due .no li b{ color:var(--secondo) }
.due li small{ display:block; font-family:var(--sans); font-size:20px; color:var(--secondo) }
/* sullo stretto le due colonne diventano una: OGNI TESTA SOPRA LA SUA LISTA
   (senza l'ordine, le due teste finivano tutte e due sopra la prima lista) */
@media (max-width:620px){
  .due{ grid-template-columns:1fr }
  .due .testa.si{ order:1 } .due ul.si{ order:2 } .due .testa.no{ order:3; margin-top:.6rem } .due ul.no{ order:4 }
}
/* le righe corte con un fatto: etichetta a sinistra, fatto a destra */
.chi-fatti{ margin:0; padding:0; list-style:none; text-align:left }
.chi-fatti li{
  display:grid; grid-template-columns:10rem 1fr; gap:.2rem 1rem; align-items:baseline;
  padding:.9rem 0; border-top:1px solid var(--riga);
}
.chi-fatti li:last-child{ border-bottom:1px solid var(--riga) }
.chi-fatti .k{ font-family:var(--sans); font-size:20px; color:var(--oro); letter-spacing:.04em }
.chi-fatti .v{ color:var(--bianco) }
.chi-fatti .v small{ display:block; font-family:var(--sans); font-size:20px; color:var(--secondo); margin-top:.15rem }
/* quando si paga: due righe, oggi e dopo, con la condizione dentro la frase */
.chi-quando{ margin:0 auto; padding:0; list-style:none; text-align:left; max-width:42rem }
.chi-quando li{
  display:grid; grid-template-columns:11rem 1fr; gap:.2rem 1rem;
  padding:.9rem 0; border-top:1px solid var(--riga);
}
.chi-quando li:last-child{ border-bottom:1px solid var(--riga) }
.chi-quando .k{ font-family:var(--sans); font-size:20px; color:var(--oro); letter-spacing:.04em }
.chi-quando .v{ color:var(--secondo); text-wrap:pretty }
@media (max-width:620px){
  .chi-fatti li,.chi-quando li{ grid-template-columns:1fr }
}
.tasti{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 1.4rem; margin:0 }
/* l'invito a «Lavora con noi», in cornice d'oro in fondo alla pagina */
.invito{
  max-width:40rem; margin:0 auto; padding:1.5rem 1.6rem 1.8rem;
  border:3px solid var(--oro); border-radius:4px; background:var(--caldo);
}
.invito h2{ margin-bottom:.5rem }
.invito p{ margin:0 auto 1.3rem; color:var(--bianco); font-size:22px }

/* ---- LAVORA CON NOI: la colonna e' piu' larga (60rem) per la tabella a
        tre colonne del patto ---- */
main.lavora{ max-width:60rem }
.bozza{
  display:inline-block; font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nero); background:var(--oro); padding:.25rem .9rem; margin:0 0 1.2rem;
}
/* IL PATTO: quattro frasi corte, una per riga, in cornice, prima della
   tabella. L'ultima e' la prova delle venti ore, staccata da una riga d'oro. */
.frase{
  max-width:42rem; margin:0 auto 2.6rem; padding:1.3rem 1.6rem;
  border:3px solid var(--oro); border-radius:4px; background:var(--caldo);
  font-size:24px; line-height:1.45; text-align:left; text-wrap:pretty;
}
.frase b{ color:var(--oro) }
.frase p{ margin:0; max-width:none }
.frase p+p{ margin-top:.9rem }
.frase .venti{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--oro-scuro); color:var(--bianco) }
/* IL CUORE: due colonne (oggi / se e quando), sette righe */
.patto{
  display:grid; grid-template-columns:11rem 1fr 1fr; gap:.8rem .9rem;
  align-items:stretch; margin:2.4rem auto 1.2rem; text-align:left;
}
.patto .testa{ text-align:center; font-family:var(--sans); padding:.9rem .8rem 1rem; border-radius:4px }
.patto .testa.oggi{ border:3px solid var(--oro); background:var(--caldo) }
.patto .testa.poi{ border:3px dashed var(--bordo) }
.patto .testa .nome{ display:block; font-size:26px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); line-height:1.15 }
.patto .testa .nome small{ display:block; font-size:20px; font-weight:600; letter-spacing:.04em; text-transform:none; color:var(--bianco); margin-top:.15rem }
.patto .testa .conto{ display:block; font-size:20px; color:var(--secondo); margin-top:.5rem }
.patto .testa .conto b{ display:block; font-size:40px; line-height:1; color:var(--bianco); font-weight:400; margin-bottom:.2rem }
/* le etichette stanno ATTACCATE alle celle (allineate a destra): l'occhio
   non attraversa mezzo schermo */
.patto .riga{
  display:flex; align-items:center; justify-content:flex-end; text-align:right;
  gap:.8rem; padding:.4rem .4rem .4rem 0; font-size:23px; line-height:1.25;
}
/* il numero nel tondo (era .num nel mockup: rinominato perche' l'area
   riservata ha dei .num suoi, senza cerchio) */
.tondo{
  flex:none; font-family:var(--sans); font-weight:700; font-size:22px; color:var(--oro);
  width:2.2rem; height:2.2rem; border:2px solid var(--oro-scuro); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.cella{ background:var(--tile); border-radius:4px; padding:1rem 1.1rem 1.1rem; font-size:21px; line-height:1.45 }
.cella.oggi{ border:2px solid var(--oro) }
.cella.poi{ border:2px dashed var(--bordo) }
.cella b{ display:block; font-family:var(--sans); font-size:26px; line-height:1.2; margin:0 0 .4rem; font-weight:700 }
.cella.oggi b{ color:var(--oro) }
.cella.poi b{ color:var(--bianco) }
.cella span{ color:var(--secondo); display:block; text-wrap:pretty }
.cella .col{ display:none }
/* sullo stretto le tre colonne diventano una: le teste spariscono e ogni
   cella porta scritto da sola in che colonna stava */
@media (max-width:900px){
  .patto{ grid-template-columns:1fr; gap:.6rem }
  .patto .vuoto,.patto .testa{ display:none }
  .patto .riga{ justify-content:flex-start; text-align:left; padding:1.4rem 0 .2rem; border-top:1px solid var(--riga) }
  .cella .col{ display:block; font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 .35rem }
  .cella.oggi .col{ color:var(--oro) }
  .cella.poi .col{ color:var(--secondo) }
}
.prova{ max-width:36rem; margin:1.6rem auto 0; color:var(--secondo); text-wrap:pretty }
/* cosa manca ancora: quattro voci in un riquadro tratteggiato */
.manca{
  max-width:42rem; margin:0 auto; padding:1.1rem 1.5rem 1.2rem; text-align:left;
  border:2px dashed var(--bordo); border-radius:4px; font-family:var(--sans); font-size:20px; color:var(--secondo);
}
.manca ol{ margin:0; padding-left:1.5rem }
.manca li{ margin:.35rem 0; padding-left:.3rem }
.manca b{ color:var(--bianco) }
/* chi cerchiamo: una riga per mestiere */
.cerchiamo{ margin:0; padding:0; list-style:none; text-align:left }
.cerchiamo li{
  display:grid; grid-template-columns:2.4rem 1fr; gap:.2rem 1rem; align-items:start;
  padding:1.1rem 0; border-top:1px solid var(--riga);
}
.cerchiamo li:last-child{ border-bottom:1px solid var(--riga) }
.cerchiamo h3{ font-size:24px; font-weight:400; margin:.15rem 0 .3rem; line-height:1.25; color:var(--bianco) }
.cerchiamo h3 b{ color:var(--oro); font-weight:400 }
.cerchiamo p{ margin:0; color:var(--secondo); max-width:42rem; text-wrap:pretty }
.cerchiamo .adesso{
  display:inline-block; margin-top:.5rem; font-family:var(--sans); font-size:20px; letter-spacing:.06em;
  color:var(--oro); border:1px solid var(--oro-scuro); padding:.1rem .7rem; border-radius:999px;
}
.cerchiamo .adesso.no{ color:var(--secondo); border-color:var(--bordo) }
/* cosa devi sapere prima: etichetta e fatto */
.sapere{ margin:0 auto; padding:0; list-style:none; text-align:left; max-width:42rem }
.sapere li{
  display:grid; grid-template-columns:11rem 1fr; gap:.2rem 1rem;
  padding:.9rem 0; border-top:1px solid var(--riga);
}
.sapere li:last-child{ border-bottom:1px solid var(--riga) }
.sapere .k{ font-family:var(--sans); font-size:20px; color:var(--oro); letter-spacing:.04em }
.sapere .v{ color:var(--secondo); text-wrap:pretty }
@media (max-width:620px){ .sapere li{ grid-template-columns:1fr } }
/* i passi, numerati dal CSS */
.passi{ margin:1.4rem auto 0; padding:0; list-style:none; text-align:left; max-width:42rem; counter-reset:passo }
.passi li{
  display:grid; grid-template-columns:2.4rem 1fr; gap:1rem; align-items:baseline;
  padding:.9rem 0; border-top:1px solid var(--riga); counter-increment:passo;
}
.passi li:last-child{ border-bottom:1px solid var(--riga) }
.passi li::before{
  content:counter(passo); font-family:var(--sans); font-weight:700; font-size:22px; color:var(--oro);
  width:2.2rem; height:2.2rem; border:2px solid var(--oro-scuro); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.passi p{ margin:0; max-width:none; color:var(--secondo); text-wrap:pretty }

/* ---- L'AREA RISERVATA (entrato.html): la pagina non ha la colonna stretta
        delle altre. Ha una CORSIA a sinistra per il filo lungo (340px, il
        filo a 104px dal bordo) e il contenuto in mezzo, largo fino a
        1320px. Mostra la stessa schermata DUE VOLTE, come la vede chi paga
        e come la vede chi non paga, piu' l'admin accennato. ---- */
main.riservata{ max-width:none; padding:var(--cima-alt) 0 0; --corsia:340px; --filo-x:104px }
.riservata code{ font-family:ui-monospace,Consolas,monospace; font-size:20px; color:var(--bianco) }
.glifi{ position:absolute; width:0; height:0 }        /* l'svg con i simboli riusati dalle tessere */
.conto-pagina{ position:relative; max-width:1320px; margin:0 auto }
/* IL FILO LUNGO: lo stesso pezzo di filo delle pagine interne (.filo), ma
   qui non si ferma sopra il titolo: scende lungo tutta la pagina. Dove ha
   qualcosa da misurare si ingrossa (.misura). */
.filo-lungo{
  position:absolute; top:0; bottom:0; left:calc(var(--filo-x) - 1.5px); width:3px;
  z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,rgba(201,169,110,0) 0,rgba(201,169,110,.8) 6rem,rgba(201,169,110,.8) 100%);
  box-shadow:0 0 10px rgba(201,169,110,.35);
}
.fascia{ display:grid; grid-template-columns:var(--corsia) minmax(0,1fr); position:relative; z-index:1 }
.corsia{ position:relative }
.contenuto{ padding-right:clamp(1.2rem,3vw,2.5rem); text-align:center }
.contenuto>*{ max-width:58rem; margin-left:auto; margin-right:auto }
/* LA MISURA: il filo che si ingrossa all'altezza del confronto. Un tubo di
   10px: base spenta (grigio), sopra il tratto d'oro alto quanto il tempo
   gia' percorso. La lucciola e' oggi. Le tre parole stanno a sinistra del
   tubo, la data in cifre grandi a destra. Il punto di «oggi» e' la
   variabile --oggi, che nella pagina d'esempio vale 67,4% (62 giorni su
   92): quando la pagina sara' collegata la scrivera' il server. */
.misura{ position:absolute; top:0; bottom:0; left:var(--filo-x); width:0 }
.misura.demo{ --oggi:67.4% }
.misura .tubo{
  position:absolute; left:-5px; top:0; bottom:0; width:10px; border-radius:6px;
  background:linear-gradient(to right,#8a847a,#57534c 45%,#33312d);
}
.misura .tubo i{
  position:absolute; left:0; right:0; top:0; height:var(--oggi,0); display:block; border-radius:6px 6px 0 0;
  background:linear-gradient(to right,#f3dfae,#c9a96e 45%,#7d6339);
  box-shadow:0 0 18px 5px rgba(201,169,110,.4);
}
.misura.tutto .tubo i{ height:100%; border-radius:6px }
.misura .lucciola{
  position:absolute; top:var(--oggi,0); left:-11px; width:22px; height:22px; margin-top:-11px; border-radius:50%;
  background:#f7e8c3; border:2px solid var(--oro); box-shadow:0 0 18px 8px rgba(201,169,110,.55);
}
.misura .eti{
  position:absolute; right:22px; text-align:right; white-space:nowrap; line-height:1.1;
  font-family:var(--sans); font-size:20px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--oro); font-weight:700;
}
.misura .eti b{ display:block; font-family:var(--serif); font-size:27px; color:var(--bianco); font-weight:400; letter-spacing:0; text-transform:none; margin-top:.1rem }
.misura .eti.inizio{ top:0 }
.misura .eti.oggi{ top:var(--oggi,0); transform:translateY(-50%) }
.misura .eti.fine{ bottom:0 }
.misura .eti.spenta{ color:var(--secondo) }
.misura .cifre{
  position:absolute; left:26px; top:50%; transform:translateY(-50%);
  width:calc(var(--corsia) - var(--filo-x) - 32px); text-align:left; line-height:1;
  font-family:var(--sans);
}
.cifre .sopra{ display:block; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); font-weight:700; margin:0 0 .5rem }
.cifre .data{ display:block; font-family:var(--serif); font-size:62px; color:var(--bianco); line-height:1; white-space:nowrap }
.cifre .data.parola{ font-size:52px }
.cifre .data.inf,.celle b.inf{ font-size:96px; line-height:.8 }
.cifre .data small{ display:block; font-size:42px; margin-top:.2rem }
.cifre .giorni{ display:block; margin-top:1rem; font-size:20px; color:var(--secondo); letter-spacing:.04em }
.cifre .giorni b{ display:block; font-family:var(--serif); font-size:48px; color:var(--oro); font-weight:400; line-height:1; margin-bottom:.25rem }
.cifre .giorni b.grigio{ color:var(--secondo) }
/* IL BOLLO: il filo che si chiude in anello attorno al numero. Lo stato si
   vede come FORMA, senza leggere una parola: chi paga = anello d'oro per
   due terzi con la lucciola su oggi; chi non paga = anello grigio col
   lucchetto in mezzo. */
.bollo{ position:relative; width:196px; height:196px; margin:0 auto 1.1rem }
.bollo svg{ display:block; width:100%; height:100% }
.bollo .base{ fill:none; stroke:#3a362e; stroke-width:7 }
.bollo .arco{ fill:none; stroke:var(--oro); stroke-width:9; stroke-linecap:round; filter:drop-shadow(0 0 7px rgba(201,169,110,.6)) }
.bollo .arco.spento{ stroke:#5f5a52; filter:none }
.bollo .puntino{ fill:#f7e8c3; stroke:var(--oro); stroke-width:2; filter:drop-shadow(0 0 7px rgba(201,169,110,.85)) }
.bollo .dentro{
  position:absolute; inset:14%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; line-height:1;
}
.bollo .cifra{ font-family:var(--serif); font-size:62px; font-weight:400; color:var(--bianco); line-height:1 }
.bollo .cifra.grigia{ color:var(--secondo) }
.bollo-voce{ font-family:var(--sans); font-size:20px; letter-spacing:.08em; text-transform:uppercase; color:var(--oro); margin-top:.4rem }
.bollo-voce.spenta{ color:var(--secondo) }
.bollo .chiave{ width:44px; height:44px; margin-bottom:.2rem }
.filo-dice{ font-family:var(--sans); font-size:20px; color:var(--secondo); line-height:1.35; margin:.9rem 0 0 }
.filo-dice b{ color:var(--oro); font-weight:600 }
.filo-dice b.grigio{ color:var(--secondo) }
.bollo-riga{ display:none }        /* sul telefono l'anello e la data scendono qui (vedi sotto) */
/* LA SCHERMATA DEL CONFRONTO: alta quanto lo schermo sotto la barra */
.fascia.schermata{ min-height:calc(100vh - var(--cima-alt)) }
.schermata .contenuto{ display:flex; flex-direction:column; justify-content:center; padding-top:.9rem; padding-bottom:.9rem }
.separa{ border:0; border-top:2px solid var(--oro-scuro); margin:0 auto 1.4rem; width:100% }
/* L'ETICHETTA GRANDE DELLO STATO: nera su oro, la cosa piu' visibile della
   pagina dopo i riquadri. Il numero nel tondo nero non scende sotto i 20px. */
.etichetta{
  display:flex; align-items:center; justify-content:center; gap:1rem; width:100%;
  background:var(--oro); color:var(--nero); font-family:var(--sans); font-weight:700;
  font-size:clamp(22px,2vw,28px); letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem 1rem; margin:0 auto .8rem; line-height:1.2;
}
.etichetta .n{
  flex:none; width:1.7em; height:1.7em; border-radius:50%; background:var(--nero); color:var(--oro);
  display:flex; align-items:center; justify-content:center; letter-spacing:0; font-size:20px;
}
.riservata .stato{ font-family:var(--sans); font-size:24px; margin:0 auto .4rem; color:var(--bianco) }
.riservata .stato b{ color:var(--oro) }
/* IL CUORE: due colonne, sette righe */
.confronto{
  position:relative; display:grid; grid-template-columns:1fr 15rem 15rem;
  gap:.35rem 1rem; align-items:stretch; margin:1.7rem auto .6rem; text-align:left; width:100%;
}
.confronto .testa{ text-align:center; font-family:var(--sans); padding:.3rem 0 .4rem; border-bottom:2px solid var(--riga) }
.confronto .testa .nome{ display:block; font-size:24px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--oro) }
.confronto .testa .conto{ display:block; font-size:20px; color:var(--secondo); margin-top:.15rem }
.confronto .testa .conto b{ font-size:32px; line-height:1; color:var(--bianco); font-weight:400; display:block; margin-bottom:.1rem }
.confronto .vuoto{ border-bottom:2px solid var(--riga) }
.confronto .testa.qui{ border-bottom-color:var(--oro) }     /* la colonna dove sta il lettore, segnata anche sulla testa */
.confronto .riga{
  display:flex; align-items:center; justify-content:flex-end; text-align:right;
  gap:1rem; padding:.15rem 1rem .15rem 0; border-bottom:1px solid var(--riga); font-size:23px; line-height:1.2;
}
.confronto .riga .num{
  flex:none; font-family:var(--sans); font-weight:700; font-size:22px; color:var(--oro);
  width:2.2rem; height:2.2rem; border:2px solid var(--oro-scuro); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.confronto .riga small{ display:block; font-size:20px; color:var(--secondo); font-family:var(--sans) }
.tile{
  position:relative; height:3.55rem; background:var(--tile);
  border:2px solid #453e33; border-radius:4px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.tile svg.glifo{ width:48px; height:48px; stroke:var(--oro); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round }
.tile .spunta{ position:absolute; top:.25rem; right:.35rem; width:26px; height:26px }
.tile.chiusa svg.glifo{ stroke:var(--secondo); opacity:.55 }
.tile .mosaico{ position:absolute; inset:0; width:100%; height:100% }
.tile .lucchetto{ position:absolute; left:50%; top:50%; width:50px; height:50px; margin:-25px 0 0 -25px }
.tile.chiusa{ border-color:var(--oro-scuro) }
/* la cornice «TU SEI QUI» attorno a una colonna intera */
.cornice{
  position:absolute; top:-1.2rem; bottom:-.4rem; width:calc(15rem + 1.1rem);
  z-index:2; pointer-events:none;
  border:3px solid var(--oro); border-radius:8px; box-shadow:0 0 18px rgba(201,169,110,.35);
}
.cornice .tu{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; background:var(--oro); color:var(--nero); padding:.15rem .8rem; white-space:nowrap;
}
.cornice.su-gratis{ left:calc(100% - 31rem - .55rem) }
.cornice.su-abbonato{ left:calc(100% - 15rem - .55rem) }
.conto-legenda{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 2.2rem; font-family:var(--sans); font-size:20px; color:var(--secondo); margin:.2rem auto .4rem }
.conto-legenda span{ display:inline-flex; align-items:center; gap:.5rem }
.conto-legenda .campione{ width:38px; height:28px; border:2px solid #453e33; border-radius:3px; display:inline-block; position:relative; overflow:hidden; background:var(--tile) }
.conto-legenda .campione svg{ position:absolute; inset:0; width:100%; height:100% }
.riservata .sotto{ max-width:38rem; margin:0 auto }
.riservata .sotto b{ color:var(--bianco); font-weight:400 }
/* IL PANNELLO DI SERVIZIO: fino a quando, i quattro tagli, le sei voci */
.pannello .contenuto{ padding-top:2.6rem; padding-bottom:3.6rem }
.riservata .occhiello{ margin:0 auto .8rem }
.riservata h2{ font-size:clamp(1.9rem,3.8vw,2.6rem); font-weight:400; margin:0 auto .6rem; line-height:1.15; text-wrap:balance }
.riservata h3{ font-size:clamp(1.5rem,3vw,2rem); font-weight:400; margin:3rem auto .5rem; line-height:1.2 }
.riservata h3 .n{ font-family:var(--sans); font-weight:700; color:var(--oro); margin-right:.5rem }
/* i fatti in celle: numeri prima delle parole (era .fatti nel mockup) */
.celle{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin:1.6rem auto 1.1rem; padding:0; list-style:none; width:100% }
.celle li{ background:var(--tile); border:2px solid #453e33; border-radius:4px; padding:1.1rem .6rem 1.2rem }
.celle li.oro{ border-color:var(--oro) }
.celle b{ display:block; font-weight:400; font-size:clamp(2rem,3.6vw,3rem); line-height:1; color:var(--oro); white-space:nowrap }
.celle b.grigio{ color:var(--secondo) }
.celle b small{ font-size:24px; color:var(--secondo) }
.celle span{ display:block; margin-top:.5rem; font-family:var(--sans); font-size:20px; color:var(--secondo) }
.mock{ font-family:var(--sans); font-size:20px; color:var(--secondo); max-width:40rem; margin:.6rem auto 0 }
.mock b{ color:var(--bianco); font-weight:400 }
/* le pillole: cosa c'e' dietro ogni voce */
.pilla{
  display:inline-block; font-family:var(--sans); font-size:20px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  padding:.2rem .8rem; border-radius:999px; border:2px solid var(--bordo); color:var(--bianco); line-height:1.4;
}
.pilla.si{ background:var(--oro); border-color:var(--oro); color:var(--nero) }
.pilla.meta{ border-color:var(--oro); color:var(--oro) }
/* il tasto spento: bordo tratteggiato, parola bianca piena, e NON e' un
   .tasto, perche' .tasto:hover lo riempirebbe d'oro come se funzionasse */
.tasto-spento{
  display:inline-block; font:inherit; font-family:var(--sans);
  font-size:20px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:.9rem 2.2rem; text-decoration:none; background:none;
  border:2px dashed var(--bordo); color:var(--bianco); cursor:not-allowed;
}
.azione{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.8rem 1.2rem; margin:1.4rem auto 0 }
/* i quattro tagli */
.proposta{
  display:inline-block; font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nero); background:var(--oro); padding:.25rem .9rem; margin:0 0 1.6rem;
}
.tagli{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:0 auto 1.4rem; text-align:center; width:100% }
.taglio{ position:relative; background:var(--tile); border:2px solid #453e33; border-radius:4px; padding:1.3rem .8rem 1.5rem }
.taglio .n{
  position:absolute; top:-1rem; left:1rem; font-family:var(--sans); font-size:20px; font-weight:700;
  width:2rem; height:2rem; border-radius:50%; background:var(--nero); border:2px solid var(--oro); color:var(--oro);
  display:flex; align-items:center; justify-content:center;
}
.taglio .durata{ font-family:var(--sans); font-size:22px; letter-spacing:.06em; text-transform:uppercase; color:var(--secondo); margin:0 0 .4rem }
.taglio .durata b{ color:var(--bianco); font-size:34px; letter-spacing:0; margin-right:.3rem; font-weight:700 }
.taglio .prezzo{ font-size:44px; line-height:1; color:var(--oro); margin:0 0 .5rem; white-space:nowrap }
.taglio .prezzo small{ font-size:24px }
.taglio .mese{ font-family:var(--sans); font-size:20px; color:var(--secondo); margin:0 }
.taglio .mese b{ color:var(--bianco) }
.taglio .sconto{ font-family:var(--sans); font-size:20px; margin:.5rem 0 0; color:var(--secondo) }
.taglio .sconto b{ color:var(--nero); background:var(--oro); padding:.05rem .5rem; font-weight:700 }
.taglio .sconto.zero b{ background:none; color:var(--secondo); border:1px solid var(--bordo) }
.taglio.tuo{ border-color:var(--oro); box-shadow:0 0 14px rgba(201,169,110,.3) }
/* «il tuo, oggi» e «Conviene» sono fasce in fondo alla tessera (a cavallo
   del bordo alto pestavano il cerchietto col numero). La parola sta
   nell'attributo data-fascia della pagina, cosi' si traduce. */
.taglio.tuo,.taglio.meglio{ padding-bottom:3.3rem }
.taglio.tuo::after,.taglio.meglio::after{
  content:attr(data-fascia); position:absolute; left:0; right:0; bottom:0; white-space:nowrap;
  font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--oro); color:var(--nero); padding:.25rem .3rem; text-align:center;
}
.posto{
  max-width:40rem; margin:1.4rem auto 0; padding:1rem 1.3rem;
  border:2px dashed var(--bordo); border-radius:4px; color:var(--secondo); font-family:var(--sans); font-size:20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1rem;
}
.posto p{ margin:0; max-width:30rem; text-align:left }
.posto b{ color:var(--bianco) }
/* le sei voci pratiche (erano .voci nel mockup: .voci e' la lista della faq) */
.legenda-pille{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem; margin:0 auto 1.2rem; padding:0; list-style:none }
.legenda-pille li{ font-family:var(--sans); font-size:20px; color:var(--secondo) }
.legenda-pille .pilla{ margin-right:.4rem; vertical-align:middle }
.conto-voci{ margin:0; padding:0; list-style:none; text-align:left; width:100% }
.conto-voci>li{
  display:grid; grid-template-columns:2.6rem 1fr auto; column-gap:1rem; row-gap:.3rem;
  align-items:baseline; padding:1.2rem 0; border-top:1px solid var(--riga);
}
.conto-voci>li:last-child{ border-bottom:1px solid var(--riga) }
.conto-voci .num{ grid-row:1 / span 2; font-family:var(--sans); font-size:26px; font-weight:700; color:var(--oro); line-height:1 }
.conto-voci h4{ margin:0; font-size:26px; font-weight:400; line-height:1.2 }
.conto-voci h4 a{ text-decoration:underline; text-underline-offset:.15em }
.conto-voci .pilla{ grid-column:3; justify-self:end }
.conto-voci .cosa{ grid-column:2 / span 2; margin:0; color:var(--secondo); font-size:21px; max-width:42rem }
.conto-voci .cosa b{ color:var(--bianco); font-weight:400 }
.conto-voci .dati{ grid-column:2 / span 2; margin:.5rem 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem .9rem }
.conto-voci .dati li{ display:block; padding:.6rem .8rem; border:1px solid var(--riga); background:var(--tile) }
.conto-voci .dati span{ display:block; font-family:var(--sans); font-size:20px; color:var(--secondo); letter-spacing:.06em; text-transform:uppercase }
.conto-voci .dati b{ display:block; font-weight:400; font-size:24px; color:var(--bianco); margin-top:.1rem }
.conto-voci .dati b.oro{ color:var(--oro) }
/* le sei voci in una riga sola, nel secondo stato: sono le stesse */
.conto-voci-corte{ margin:0 0 1rem; padding:0; list-style:none; display:grid; grid-template-columns:1fr; gap:.6rem; width:100%; text-align:left }
.conto-voci-corte li{ display:flex; align-items:center; gap:.9rem; padding:.6rem 1rem; border:1px solid var(--riga); background:var(--tile); font-size:23px; white-space:nowrap }
.conto-voci-corte .num{ font-family:var(--sans); font-size:24px; font-weight:700; color:var(--oro) }
.conto-voci-corte .pilla{ margin-left:auto; font-size:20px; padding:.1rem .6rem }
/* l'admin, accennato */
.admin .contenuto{ padding-top:2.4rem; padding-bottom:3.6rem }
.admin .etichetta{ background:none; color:var(--oro); border:2px solid var(--oro-scuro) }
.admin .etichetta .n{ background:var(--oro); color:var(--nero) }
/* schermo stretto: la corsia si restringe a 44px, le parole e le cifre
   della corsia se ne vanno (i fatti stanno gia' nel pannello); l'anello e
   LA DATA scendono dentro la colonna, in riga, perche' la data non deve
   sparire */
@media (max-width:1100px){
  main.riservata{ --corsia:44px; --filo-x:22px }
  .misura .eti,.misura .cifre{ display:none }
  .misura .tubo{ left:-4px; width:8px }
  .bollo-riga{
    display:flex; align-items:center; justify-content:center; gap:1.2rem;
    flex-wrap:wrap; text-align:left; margin:1rem auto .2rem;
  }
  .bollo-riga .bollo{ width:132px; height:132px; margin:0; flex:none }
  .bollo-riga .bollo .cifra{ font-size:42px }
  .bollo-riga .bollo-voce{ font-size:20px; margin-top:.25rem }
  .bollo-riga .bollo .chiave{ width:30px; height:30px }
  .bollo-quando{ font-family:var(--sans); line-height:1.15; margin:0; max-width:none }
  .bollo-quando .sopra{ display:block; font-size:20px; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); font-weight:700; margin-bottom:.35rem }
  .bollo-quando .data{ display:block; font-family:var(--serif); font-size:46px; color:var(--bianco); line-height:1 }
  .bollo-quando .giorni{ display:block; margin-top:.4rem; font-size:20px; color:var(--secondo) }
}
@media (max-width:900px){
  .confronto{ grid-template-columns:1fr 1fr }
  .confronto .vuoto{ display:none }
  .confronto .riga{ grid-column:1 / -1; border-bottom:0; padding-bottom:0; justify-content:flex-start; text-align:left }
  /* la cornice grande se ne va (pesterebbe le scritte delle righe, che qui
     vanno a tutta larghezza): al suo posto la testa della colonna si
     accende e porta lei la fascia «tu sei qui» (dall'attributo data-tu) */
  .cornice{ display:none }
  .confronto .testa.qui{
    position:relative; border:3px solid var(--oro); border-bottom-width:3px;
    border-radius:6px 6px 0 0; background:rgba(201,169,110,.09); padding:.3rem .2rem 0;
  }
  .confronto .testa.qui::after{
    content:attr(data-tu); display:block; margin:.35rem -3px -3px;
    background:var(--oro); color:var(--nero); font-family:var(--sans); font-size:20px;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.1rem .2rem;
  }
  .tagli,.celle{ grid-template-columns:1fr 1fr; gap:1.4rem 1rem }
  /* a 390px le due celle «7 su 7» e «nessun minimo» sbordavano (misurato:
     5px in italiano, 33 in francese) perche' il numero grosso non andava a
     capo; e la pillola «Serveur oui · page non», che e' piu' lunga della
     nostra, spingeva fuori di 9px tutta la colonna delle sei voci. Qui le
     due cose vanno a capo, e la colonna puo' stringersi (minmax(0,1fr)). */
  .celle li{ min-width:0 }
  .celle b{ white-space:normal }
  .conto-voci>li{ grid-template-columns:2.2rem minmax(0,1fr) }
  .conto-voci .pilla{ grid-column:2; justify-self:start; margin-top:.2rem; white-space:normal; text-align:center }
  .conto-voci .num{ grid-row:1 }
  .conto-voci .cosa,.conto-voci .dati{ grid-column:2 }
  .conto-voci .dati{ grid-template-columns:1fr 1fr }
  /* le sei voci corte andavano fuori pagina (misurato: 658px di roba
     dentro 500px di schermo). Ora vanno a capo. */
  .conto-voci-corte li{ flex-wrap:wrap; white-space:normal; row-gap:.4rem }
  .conto-voci-corte .pilla{ margin-left:0 }
  .etichetta{ font-size:22px; letter-spacing:.08em }
}

/* =========================================================================
   IL DISCORD NELLA BARRA — proposta 3, scelta da Toni il 06/09/2026.
   Il MARCHIO e basta sul largo, la PAROLA sul telefono e nel piede.
   Perche' la piu' corta: la barra sta in una riga fino a 1220 px, e in
   FRANCESE ne usa gia' 1183 — restano 38 px. La proposta 1 ne chiedeva 129,
   la 2 centosessantadue: tutte e due mandavano la barra a due righe, e la 1
   anche in italiano. Questa ne chiede 80, e la parola non sparisce: si
   sposta dove lo spazio c'e'.
   ========================================================================= */
.cima-nav a.cima-discord{ display:inline-flex; align-items:center; gap:.3rem; color:var(--oro) }
.cima-nav a.cima-discord .logo{ width:26px; height:26px; flex:none }
.cima-nav a.cima-discord .fuori{ width:1em; height:1em; flex:none }
.cima-nav a.cima-discord .parola{ display:none }
@media (max-width:1220px){
  .cima-nav a.cima-discord .logo{ width:34px; height:34px }
  .cima-nav a.cima-discord .parola{ display:inline }
}
footer nav a.piede-fuori{ display:inline-flex; align-items:center; gap:.35rem }
footer nav a.piede-fuori .fuori{ width:1em; height:1em }