/* ==========================================================================
   Bahay Italia — foglio di stile unico
   Impianto della home preso da documenti/layout.png (mockup approvato).
   I colori sono quelli campionati dal logo, con i contrasti verificati.
   Il giallo non fa mai da colore del testo: e' sempre riempimento.
   ========================================================================== */

/* --- 1. Token ------------------------------------------------------------ */

:root {
  /* marchio */
  --blu-logo:        #003060;
  --blu-azione:      #0A4178;
  --blu-pastello:    #DCE9F7;
  --blu-pastello-2:  #EDF4FC;

  --giallo:          #FCC000;
  --giallo-pastello: #FFF3D1;

  --rosso:           #E42E2E;
  --rosso-pastello:  #FCE0E0;

  --verde:           #11783F;
  --verde-pastello:  #DCEDE3;

  /* neutri, con una punta di blu */
  --fondo:           #F4F7FB;
  --superficie:      #FFFFFF;
  --superficie-2:    #FBFCFE;
  --bordo:           #DCE5F0;
  --testo:           #1B2B3D;
  --testo-tenue:     #5A7189;

  /* tinte delle carte comunita': pastelli diversi per riconoscerle a colpo
     d'occhio, sempre dietro un'illustrazione, mai dietro del testo.
     Campionate dal fondo delle illustrazioni stesse, cosi' la fascia e il
     ritaglio non fanno cucitura ai lati. */
  --tinta-ph: #CCE4F5;
  --tinta-bd: #C2E5E5;
  --tinta-in: #FDE4CA;
  --tinta-lk: #E8CFF6;
  --tinta-pe: #FCD3C7;

  --ombra-bassa:  0 1px 2px rgba(27, 43, 61, .06);
  --ombra-media:  0 6px 24px -12px rgba(0, 48, 96, .28);
  --ombra-alta:   0 18px 48px -24px rgba(0, 48, 96, .38);

  --raggio-s: 8px;
  --raggio-m: 14px;
  --raggio-l: 22px;
  --raggio-pillola: 999px;

  /* Il mockup e' un disegno largo: la colonna sta sul 93% di uno schermo da
     1500px, come li'. Piu' stretta di cosi' il menu a sette voci va a capo. */
  --colonna: 1400px;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

/* Tema scuro. Vale in due casi: quando il sistema lo chiede e l'utente non ha
   scelto diversamente, e quando l'utente lo sceglie a mano. Le due regole sono
   identiche di proposito: cambiarne una sola e' il modo classico di rompere
   l'interruttore del tema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --blu-azione:      #7EB4EA;
    --blu-pastello:    #12293F;
    --blu-pastello-2:  #101F2E;
    --giallo:          #FDE28A;
    --giallo-pastello: #2C2517;
    --rosso:           #ED9696;
    --rosso-pastello:  #2E1B1B;
    --verde:           #76A78C;
    --verde-pastello:  #16281E;

    --fondo:        #0E1722;
    --superficie:   #17222F;
    --superficie-2: #1C2836;
    --bordo:        #253546;
    --testo:        #E6ECF3;
    --testo-tenue:  #93A6BA;

    /* Le tinte restano quelle chiare anche al buio: l'illustrazione della
       carta e' un'immagine su fondo chiaro, e una fascia scura sotto la
       lascerebbe galleggiare come un rettangolo incollato. */

    --ombra-bassa: 0 1px 2px rgba(0, 0, 0, .4);
    --ombra-media: 0 6px 24px -12px rgba(0, 0, 0, .6);
    --ombra-alta:  0 18px 48px -24px rgba(0, 0, 0, .7);

    color-scheme: dark;
  }
}

:root[data-tema="scuro"] {
  --blu-azione:      #7EB4EA;
  --blu-pastello:    #12293F;
  --blu-pastello-2:  #101F2E;
  --giallo:          #FDE28A;
  --giallo-pastello: #2C2517;
  --rosso:           #ED9696;
  --rosso-pastello:  #2E1B1B;
  --verde:           #76A78C;
  --verde-pastello:  #16281E;

  --fondo:        #0E1722;
  --superficie:   #17222F;
  --superficie-2: #1C2836;
  --bordo:        #253546;
  --testo:        #E6ECF3;
  --testo-tenue:  #93A6BA;

  /* Le tinte restano quelle chiare anche al buio: l'illustrazione della
     carta e' un'immagine su fondo chiaro, e una fascia scura sotto la
     lascerebbe galleggiare come un rettangolo incollato. */

  --ombra-bassa: 0 1px 2px rgba(0, 0, 0, .4);
  --ombra-media: 0 6px 24px -12px rgba(0, 0, 0, .6);
  --ombra-alta:  0 18px 48px -24px rgba(0, 0, 0, .7);

  color-scheme: dark;
}

/* --- 2. Base ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.16;
  letter-spacing: -.014em;
  font-weight: 700;
  color: var(--testo);
}

h1 { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.4rem); letter-spacing: -.026em; color: var(--blu-logo); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); letter-spacing: -.02em; color: var(--blu-logo); }
h3 { font-size: 1.1rem; }

/* Nel tema scuro il blu del logo non si legge sul fondo: i titoli tornano
   al colore del testo. */
:root[data-tema="scuro"] h1, :root[data-tema="scuro"] h2 { color: var(--testo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) h1,
  :root:not([data-tema="chiaro"]) h2 { color: var(--testo); }
}

.accento { color: var(--rosso); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

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

hr { border: 0; border-top: 1px solid var(--bordo); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--blu-azione);
  outline-offset: 2px;
  border-radius: 4px;
}

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0;
  background: var(--superficie); color: var(--testo);
  padding: .75rem 1.25rem; z-index: 100; border-radius: 0 0 var(--raggio-s) 0;
}
.salta-al-contenuto:focus { left: 0; }

/* Visibile solo ai lettori di schermo: serve per i titoli di sezione che nel
   disegno non ci sono ma che tengono in piedi la struttura del documento. */
.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- 3. Impaginazione ---------------------------------------------------- */

.contenitore {
  width: 100%;
  max-width: var(--colonna);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3.5vw, 2rem);
}

.contenitore-stretto { max-width: 760px; }

.sezione { padding-block: clamp(2.5rem, 5.5vw, 4.5rem); }
.sezione-compatta { padding-block: clamp(2rem, 4vw, 3rem); }

.sezione-pastello   { background: var(--blu-pastello-2); }
.sezione-superficie { background: var(--superficie); }

.griglia { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.griglia-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.centrato { text-align: center; }
.misura { max-width: 62ch; }
.misura-centrata { max-width: 62ch; margin-inline: auto; }

.intestazione-sezione { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.intestazione-sezione p { color: var(--testo-tenue); font-size: 1.06rem; }

/* --- 4. Icone ------------------------------------------------------------ */

.icona { display: block; flex: 0 0 auto; }

/* --- 5. Testata ---------------------------------------------------------- */

.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.testata-riga {
  display: grid;
  /* minmax(0, 1fr) e non 1fr: con 1fr la colonna del menu non puo' scendere
     sotto il suo contenuto e la testata sfonda invece di adattarsi. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  /* Alta abbastanza da far respirare il logo: il marchio e' la cosa piu'
     importante della testata e non deve stare stretto. */
  min-height: 96px;
}

/* Sopra i 1080px menu e azioni stanno direttamente nella riga: il pannello
   che li contiene sparisce dal layout e il menu resta centrato. */
.testata-pannello { display: contents; }

.marchio {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-decoration: none; color: var(--testo);
}
/* Il marchio e' la cosa piu' importante della testata e non si rimpicciolisce
   mai fino a sparire: 60px su schermo largo, 46px sul telefono. Il payoff che
   stava qui sotto e' stato tolto il 29/08/2026 — a 10px non si leggeva, e
   togliendolo il logo ha lo spazio per essere grande davvero. Adesso sta nel
   fondo pagina. */
.marchio-segno {
  height: 68px; width: auto; display: block;
}

/* Il marchio non si comprime, il menu si': se lo spazio manca, a cedere
   devono essere le spaziature delle voci, non i pulsanti di destra. */
.marchio { flex: 0 0 auto; }
.navigazione { min-width: 0; }
.azioni-testata { flex: 0 0 auto; }

/* Manca ancora la versione del logo per fondo scuro: nel frattempo, dove lo
   sfondo e' scuro, il marchio sta su una pastiglia chiara. */
:root[data-tema="scuro"] .marchio-segno,
.fondo .marchio-segno {
  background: #FFFFFF; padding: 4px 8px; border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .marchio-segno {
    background: #FFFFFF; padding: 4px 8px; border-radius: 10px;
  }
}

.navigazione {
  display: flex; align-items: center; justify-content: center;
  gap: .1rem;
  /* Le voci vanno a capo invece di sfondare: le stringhe non sono lunghe
     uguali in tutte le lingue e un breakpoint fisso non puo' saperlo. In
     italiano restano su una riga, in tagalog la testata si alza. */
  flex-wrap: wrap;
  row-gap: .05rem;
}
.navigazione a.voce {
  /* Misure strette di partenza, non generose: il contenitore e' largo al
     massimo --colonna (1400px), quindi oltre quella soglia lo spazio non
     cresce piu'. Tenere le voci larghe qui voleva dire che in tagalog il menu
     andava a capo *sugli schermi grandi* e non su quelli piccoli, che e'
     esattamente il contrario di quello che uno si aspetta. */
  padding: .45rem .45rem; border-radius: var(--raggio-s);
  color: var(--testo); text-decoration: none; font-size: .9rem; font-weight: 500;
  white-space: nowrap;
}
.navigazione a.voce:hover { background: var(--blu-pastello); color: var(--blu-azione); }
.navigazione a.voce[aria-current="page"] {
  background: var(--blu-pastello); color: var(--blu-azione); font-weight: 600;
}

.azioni-testata { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }

.apri-menu {
  display: none;
  background: none; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: .45rem; cursor: pointer; color: var(--testo);
}
.icona-menu-chiudi { display: none; }
.testata[data-menu="aperto"] .icona-menu-apri  { display: none; }
.testata[data-menu="aperto"] .icona-menu-chiudi { display: block; }

/* --- 6. Bottoni ---------------------------------------------------------- */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.3rem;
  border-radius: var(--raggio-pillola);
  border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease;
}
.bottone:hover { transform: translateY(-1px); }
.bottone:active { transform: translateY(0); }

.bottone-primario { background: var(--blu-azione); color: #fff; box-shadow: var(--ombra-media); }
.bottone-primario:hover { background: var(--blu-logo); }

.bottone-secondario {
  background: var(--superficie); color: var(--blu-azione); border-color: var(--blu-azione);
}
.bottone-secondario:hover { background: var(--blu-pastello); }

.bottone-tenue { background: var(--blu-pastello); color: var(--blu-azione); }
.bottone-tenue:hover { filter: brightness(.97); }

/* Sta sempre su fondo blu scuro, in entrambi i temi: colori fissi. */
.bottone-chiaro { background: #FFFFFF; color: #0A4178; }
.bottone-chiaro:hover { background: #DCE9F7; }

.bottone-grande { padding: .9rem 1.7rem; font-size: 1rem; }
.bottone-pieno { width: 100%; }

/* Il tema scuro schiarisce il blu d'azione: sopra ci vuole testo scuro. */
:root[data-tema="scuro"] .bottone-primario { color: #06121F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .bottone-primario { color: #06121F; }
}

.gruppo-bottoni { display: flex; flex-wrap: wrap; gap: .75rem; }

.bottone-icona {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--bordo); border-radius: var(--raggio-pillola);
  background: var(--superficie); color: var(--testo); cursor: pointer;
}
.bottone-icona:hover { border-color: var(--blu-azione); color: var(--blu-azione); }

/* Nel tema chiaro si offre la luna (passa a scuro), nel tema scuro il sole. */
.icona-tema-chiaro { display: none; }
:root[data-tema="scuro"] .icona-tema-scuro  { display: none; }
:root[data-tema="scuro"] .icona-tema-chiaro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .icona-tema-scuro  { display: none; }
  :root:not([data-tema="chiaro"]) .icona-tema-chiaro { display: block; }
}

.collegamento-freccia {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .95rem; text-decoration: none;
}
.collegamento-freccia:hover { text-decoration: underline; }
.collegamento-freccia:hover .icona { transform: translateX(3px); }
.collegamento-freccia .icona { transition: transform .16s ease; }

/* --- 7. Etichette e chip ------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .26rem .7rem;
  border-radius: var(--raggio-pillola);
  background: var(--blu-pastello); color: var(--blu-azione);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
}
.chip-giallo { background: var(--giallo-pastello); color: var(--testo); }
.chip-verde  { background: var(--verde-pastello);  color: var(--verde); }
.chip-rosso  { background: var(--rosso-pastello);  color: var(--rosso); }

.sopratitolo {
  display: block; margin-bottom: .7rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--blu-azione);
}

/* Elenco con la spunta verde, usato nella scheda dell'apertura e in Bahay Pro */
.elenco-spunte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem; font-size: .92rem;
}
.elenco-spunte li { display: flex; align-items: flex-start; gap: .55rem; }
.elenco-spunte .icona { color: var(--verde); margin-top: .12rem; }

/* --- 8. Schede ----------------------------------------------------------- */

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  box-shadow: var(--ombra-bassa);
}
.scheda h3 { margin-bottom: .4rem; }
.scheda p  { color: var(--testo-tenue); font-size: .97rem; }
.scheda-rilievo { border-color: var(--blu-azione); box-shadow: var(--ombra-alta); }

/* --- 9. Apertura --------------------------------------------------------- */

.apertura {
  background:
    radial-gradient(920px 520px at 76% -14%, var(--blu-pastello) 0%, transparent 62%),
    var(--superficie);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.apertura-griglia {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.apertura h1 { margin-bottom: 1rem; }

.apertura-promessa {
  font-size: clamp(1rem, .94rem + .35vw, 1.15rem);
  color: var(--testo-tenue);
  max-width: 44ch;
  margin-bottom: 1.6rem;
}

.app-stato {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.6rem; font-size: .88rem; color: var(--testo-tenue);
}

.apertura-figura { position: relative; }
.onda { width: 100%; height: auto; display: block; }

/* La scheda sta in basso a destra, non a mezza altezza: piu' in alto
   coprirebbe i volti della fotografia, ed e' proprio quello che la foto deve
   mostrare. */
.scheda-galleggiante {
  position: absolute; right: 0; bottom: 0;
  width: min(300px, 50%);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--ombra-alta);
}
.scheda-galleggiante-titolo {
  margin: 0 0 .8rem; font-weight: 700; font-size: 1rem; line-height: 1.3;
  color: var(--blu-logo);
}
:root[data-tema="scuro"] .scheda-galleggiante-titolo { color: var(--testo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .scheda-galleggiante-titolo { color: var(--testo); }
}

.bandiere-titolo {
  margin: .95rem 0 .45rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--testo-tenue);
}
.fila-bandiere { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }

.bandiera {
  border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 2px var(--superficie), 0 1px 3px rgba(27, 43, 61, .25);
}

/* --- 10. Le sei funzioni ------------------------------------------------- */

.griglia-funzioni {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
}
.funzione { display: flex; align-items: flex-start; gap: .8rem; }
.funzione-icona {
  flex: 0 0 auto; width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--raggio-m);
  background: var(--blu-pastello); color: var(--blu-azione);
}
.funzione h3 { font-size: .98rem; margin: 0 0 .2rem; color: var(--blu-logo); }
.funzione p  { font-size: .87rem; color: var(--testo-tenue); margin: 0; line-height: 1.45; }

:root[data-tema="scuro"] .funzione h3 { color: var(--testo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .funzione h3 { color: var(--testo); }
}

/* --- 11. Comunita' ------------------------------------------------------- */

.comunita-griglia {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
}
.comunita-intro p { color: var(--testo-tenue); font-size: .98rem; max-width: 34ch; }

.carte-comunita {
  list-style: none; margin: 0; padding: 0 0 .85rem;
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.carte-comunita::-webkit-scrollbar { height: 8px; }
.carte-comunita::-webkit-scrollbar-thumb { background: var(--bordo); border-radius: 99px; }

.carta-comunita {
  flex: 0 0 clamp(178px, 14vw, 196px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  overflow: hidden;
  box-shadow: var(--ombra-bassa);
}
.carta-illustrazione {
  width: 100%; height: 130px; object-fit: contain; object-position: center bottom;
  padding-top: .5rem;
}
.carta-ph .carta-illustrazione { background: var(--tinta-ph); }
.carta-bd .carta-illustrazione { background: var(--tinta-bd); }
.carta-in .carta-illustrazione { background: var(--tinta-in); }
.carta-lk .carta-illustrazione { background: var(--tinta-lk); }
.carta-pe .carta-illustrazione { background: var(--tinta-pe); }

.carta-corpo {
  display: grid; justify-items: center; text-align: center; gap: .25rem;
  padding: 0 .9rem 1rem; margin-top: -26px;
}
.carta-corpo .bandiera {
  width: 46px; height: 46px; margin-bottom: .35rem;
  box-shadow: 0 0 0 3px var(--superficie), var(--ombra-bassa);
}
.carta-comunita h3 { margin: 0; font-size: 1.02rem; }
.carta-lingue { margin: 0; font-size: .78rem; color: var(--testo-tenue); line-height: 1.35; }
.carta-comunita .chip { margin-top: .4rem; }

/* --- 12. I numeri delle comunità ----------------------------------------- */
/* Stavano nel pannello «Bahay Pro», tolto dalla home l'1/09/2026 insieme a
   tutto il B2B. I numeri no: sono le persone di cui parla il sito, e stanno
   sotto le carte delle comunità, a tutta larghezza. */

.comunita-numeri {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--bordo);
}
.comunita-numeri h3 {
  font-size: 1.15rem; margin-bottom: 1.1rem; text-align: center; color: var(--blu-logo);
}
:root[data-tema="scuro"] .comunita-numeri h3 { color: var(--testo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .comunita-numeri h3 { color: var(--testo); }
}

.griglia-numeri {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 0;
}
.numero {
  display: grid; justify-items: center; text-align: center; gap: .1rem;
  padding-inline: .75rem;
}
.numero:nth-child(even) { border-left: 1px solid var(--bordo); }
.numero-icona { color: var(--blu-azione); margin-bottom: .35rem; }
.numero-valore {
  font-size: clamp(1.35rem, 1.1rem + .7vw, 1.7rem); font-weight: 700;
  line-height: 1.1; color: var(--blu-azione);
}
.numero-unita { font-size: .7em; }
.numero-etichetta { font-size: .84rem; font-weight: 600; }
.numero-nota { font-size: .74rem; color: var(--testo-tenue); line-height: 1.35; }

/* La fonte in chiaro e' la stessa promessa che facciamo sulle procedure. */
.nota-fonte {
  margin-top: 1.2rem; font-size: .74rem; line-height: 1.45;
  color: var(--testo-tenue); text-align: center;
}

/* --- 13. Banda di chiusura ----------------------------------------------- */

.fascia-chiusura-contenitore { padding-bottom: clamp(2rem, 4vw, 3rem); }

.fascia-chiusura {
  background: var(--blu-logo); border-radius: var(--raggio-l);
  padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.5rem, 3vw, 2.25rem);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1rem 1.25rem;
}
.cuore-tricolore { display: block; flex: 0 0 auto; }
.fascia-chiusura-testo { flex: 1 1 340px; }
.fascia-chiusura-titolo { margin: 0; color: #fff; font-weight: 700; font-size: 1.1rem; }
.fascia-chiusura-sottotitolo { margin: 0; color: #B9D2EC; font-size: .9rem; }

/* --- 14. Passi numerati (pagina «come funziona») ------------------------- */

.passi { counter-reset: passo; display: grid; gap: 1.25rem; }
.passo { position: relative; padding-left: 3.5rem; }
.passo::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--giallo); color: #1B2B3D;
  font-weight: 700; font-size: 1rem;
}
.passo h3 { margin-bottom: .25rem; }
.passo p { color: var(--testo-tenue); margin: 0; }

/* --- 15. Piani (pagina «prezzi») ---------------------------------------- */

.piano { display: flex; flex-direction: column; height: 100%; }
.piano .prezzo {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.1; margin: .35rem 0 .1rem;
}
.piano .prezzo small { font-size: .95rem; font-weight: 500; color: var(--testo-tenue); }
.piano ul {
  list-style: none; margin: 1.1rem 0 1.5rem; padding: 0;
  display: grid; gap: .55rem; font-size: .95rem;
}
.piano ul li { display: flex; gap: .55rem; align-items: flex-start; }
.piano ul li::before { content: "✓"; color: var(--verde); font-weight: 700; flex: 0 0 auto; }
.piano .bottone { margin-top: auto; }

.nastro {
  position: absolute; top: -1px; right: 1.25rem;
  background: var(--giallo); color: #1B2B3D;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 0 0 var(--raggio-s) var(--raggio-s);
}
.piano-rilievo { position: relative; }

/* --- 16. Moduli ---------------------------------------------------------- */

.campo { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.campo label { font-weight: 600; font-size: .93rem; }
.campo .aiuto { font-size: .85rem; color: var(--testo-tenue); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"],
.campo input[type="month"],
.campo select,
.campo textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  color: var(--testo);
  font: inherit; font-size: .97rem;
}
.campo textarea { min-height: 130px; resize: vertical; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--blu-azione);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blu-azione) 22%, transparent);
}

.campo-consenso {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .9rem; color: var(--testo-tenue);
}
.campo-consenso input { margin-top: .3rem; }

.avviso {
  border-radius: var(--raggio-s);
  padding: .85rem 1rem; margin-bottom: 1.25rem;
  font-size: .95rem; border: 1px solid transparent;
}
.avviso-ok     { background: var(--verde-pastello); border-color: var(--verde); color: var(--testo); }
.avviso-errore { background: var(--rosso-pastello); border-color: var(--rosso); color: var(--testo); }
.avviso-nota   { background: var(--giallo-pastello); border-color: var(--giallo); color: var(--testo); }

/* --- 17. Selettore di lingua e tema -------------------------------------- */

.selettore { position: relative; }

.selettore-bottone {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio-pillola);
  background: var(--superficie); color: var(--testo);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.selettore-bottone:hover { border-color: var(--blu-azione); }
.selettore-bottone .icona-chevron { transition: transform .16s ease; }
.selettore[data-aperto="si"] .icona-chevron { transform: rotate(180deg); }

.selettore-elenco {
  position: absolute; right: 0; top: calc(100% + .4rem);
  min-width: 190px; padding: .35rem;
  background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: var(--raggio-m);
  box-shadow: var(--ombra-alta);
  list-style: none; margin: 0;
  display: none; z-index: 60;
}
.selettore[data-aperto="si"] .selettore-elenco { display: block; }

.selettore-elenco a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .7rem; border-radius: var(--raggio-s);
  color: var(--testo); text-decoration: none; font-size: .93rem;
}
.selettore-elenco a:hover { background: var(--blu-pastello); }
.selettore-elenco a[aria-current="true"] { font-weight: 700; color: var(--blu-azione); }
.icona-scelta { color: var(--blu-azione); }

/* --- 18. Fondo pagina ---------------------------------------------------- */

.fondo {
  background: var(--blu-logo);
  color: #E6ECF3;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
}
.fondo a { color: #C9DDF3; text-decoration: none; }
.fondo a:hover { text-decoration: underline; }
.fondo h4 {
  color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .9rem;
}
.fondo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.fondo .marchio { color: #fff; }
.fondo .marchio-segno { height: 56px; }
.fondo-payoff {
  margin: .9rem 0 0;
  font-size: 1.05rem; font-weight: 600; line-height: 1.45;
  color: #FFFFFF; max-width: 22ch;
}

.fondo-griglia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.fondo-riassunto { margin-top: 1rem; font-size: .92rem; color: #9FBBD8; max-width: 34ch; }

/* ── I nostri canali ─────────────────────────────────────────────────────
   Bollini tondi e non icone nude: nel fondo, dove tutto e' testo allineato a
   sinistra, quattro segni sparsi si leggerebbero come decorazione invece che
   come pulsanti. Il bordo li tiene insieme come una fila sola.

   `.fondo ul` e' una griglia con gap: qui serve una fila che va a capo, e
   `display: flex` sul figlio piu' specifico la ottiene senza toccare l'altra
   regola. */
/* ── La fascia dei canali, sopra la testata ──────────────────────────────
   Una riga sua, alta poco: in testata le quattro icone finivano in mezzo al
   menu e riempivano una riga gia' piena. Qui non tolgono niente a nessuno e
   restano anche sul telefono, perche' sono una fila corta allineata a destra
   e non un menu che va a capo.

   Il fondo e' il blu del marchio: la fascia si legge come una cosa del sito
   e non come un pezzo di pagina, e sotto ci sta la testata bianca. */
.fascia-canali {
  background: var(--blu-logo);
  color: #C9DDF3;
}

.fascia-canali .contenitore {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .75rem;
  min-height: 34px;
}

.fascia-canali-invito {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}

/* Sul telefono resta solo la fila: la scritta mangerebbe mezza riga per
   dire una cosa che le icone dicono da sole. */
@media (max-width: 600px) {
  .fascia-canali-invito { display: none; }
}

.fascia-canali .canali-fila { gap: .15rem; }

.fascia-canali .canale-bollo {
  width: 30px; height: 30px;
  border: 0; border-radius: 7px;
  color: #C9DDF3;
}

.fascia-canali .canale-bollo:hover,
.fascia-canali .canale-bollo:focus-visible {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .12);
}

.fondo-canali { margin-top: 1.75rem; }

/* La fila vale per tutti e due i posti; quello che cambia e' il bollo. */
ul.canali-fila {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.canale-bollo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #C9DDF3;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.canale-bollo:hover,
.canale-bollo:focus-visible {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, .10);
  text-decoration: none;   /* .fondo a:hover sottolinea: qui non c'e' testo */
}
@media (prefers-reduced-motion: reduce) {
  .canale-bollo { transition: none; }
}

.fondo-avvertenza { margin-top: 2.5rem; font-size: .85rem; color: #9FBBD8; max-width: 78ch; }

.fondo-nota {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .85rem; color: #9FBBD8;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* --- 19. Avvertenza editoriale ------------------------------------------- */

/* La data di ultima verifica e' una promessa verso l'utente: si vede. */
.verificato {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; color: var(--testo-tenue);
}

/* --- 20. Adattamento agli schermi ---------------------------------------- */

@media (min-width: 760px) {
  .comunita-griglia { grid-template-columns: minmax(220px, 268px) minmax(0, 1fr); }
  /* A tutta larghezza i quattro numeri stanno su una riga sola. */
  .comunita-numeri .griglia-numeri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .griglia-funzioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fondo-griglia { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

@media (min-width: 1150px) {
  .griglia-funzioni { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Fra i 1240 e i 1400px il menu ci sta ancora, ma stretto: si accorciano le
   spaziature. (Il payoff sotto il logo non c'e' piu': vedi sezione 5.)
   Dal 30/08/2026 le voci sono nove, e in tagalog sono molto piu' lunghe che
   in italiano: qui si stringe abbastanza da tenerle su una riga anche li'.
   Se un giorno non bastasse, la testata va a capo invece di sfondare — la
   regola resta quella. */
@media (max-width: 1400px) {
  .navigazione a.voce { font-size: .85rem; padding: .4rem .38rem; }
  .azioni-testata .bottone { padding: .55rem .85rem; font-size: .88rem; }
  .azioni-testata { gap: .35rem; }
  .marchio-segno { height: 54px; }
  .testata-riga { gap: .6rem; min-height: 84px; }
}

/* Sotto i 1240px il menu diventa un pannello a scomparsa. */
@media (max-width: 1239px) {
  .testata-riga { grid-template-columns: 1fr auto; position: relative; min-height: 72px; }
  .apri-menu { display: inline-flex; justify-self: end; }

  .testata-pannello {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .5rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    padding: .75rem clamp(1rem, 3.5vw, 2rem) 1.25rem;
    box-shadow: var(--ombra-media);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .testata[data-menu="aperto"] .testata-pannello { display: flex; }

  .navigazione { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .azioni-testata { flex-wrap: wrap; justify-content: flex-start; padding-top: .5rem; }
  .azioni-testata .bottone { flex: 1 1 auto; }
}

@media (max-width: 900px) {
  .apertura-griglia { grid-template-columns: 1fr; }
  .apertura-figura { order: -1; }
  .apertura h1 { max-width: none; }

  .scheda-galleggiante {
    position: static; width: min(420px, 100%);
    margin: -2.5rem auto 0;
  }
}

@media (max-width: 560px) {
  .griglia-funzioni { grid-template-columns: minmax(0, 1fr); }
  /* Il logo si accorcia ma non sparisce mai. */
  .marchio-segno { height: 46px; }
  .numero:nth-child(even) { border-left: 0; }
  .numero { padding-inline: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bottone:hover { transform: none; }
}

@media print {
  .testata, .fondo, .apri-menu { display: none; }
  body { background: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOME OPERATIVA — evidenza, scadenze, notizie, blog, forum
   Aggiunte del 28/08/2026. La home mostra prima quello che cambia.
   ══════════════════════════════════════════════════════════════════════ */

/* L'apertura non sparisce, si comprime: serve a chi arriva la prima volta,
   e non deve occupare tutto lo schermo a chi torna per leggere. */
.apertura-compatta { padding-block: clamp(1.5rem, 3.5vw, 2.75rem); }
.apertura-compatta h1 { font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.6rem); }
.apertura-compatta .apertura-promessa { font-size: 1rem; max-width: 46ch; }
.apertura-compatta .onda { max-width: 560px; margin-inline: auto; }
.apertura-compatta .scheda-galleggiante { display: none; }

/* Avviso di sviluppo: brutto di proposito, cosi non si dimentica. */
.avviso-sviluppo {
  margin-block: 1rem;
  padding: .55rem .9rem;
  border: 1px dashed var(--giallo);
  background: var(--giallo-pastello);
  border-radius: var(--raggio-s);
  font-size: .82rem;
  color: var(--testo);
}
.avviso-sviluppo code { font-size: .95em; }

/* ── Intestazioni delle fasce ──────────────────────────────────────── */
.intestazione-fascia {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.titolo-fascia {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  margin: 0;
}
.titolo-fascia .icona { color: var(--blu-azione); }
.testo-fascia {
  margin: .35rem 0 0;
  color: var(--testo-tenue);
  font-size: .92rem;
  max-width: 62ch;
}
.fascia-vuota { color: var(--testo-tenue); font-size: .92rem; }

/* ── Carte di contenuto ────────────────────────────────────────────── */
/* 300px e non 230: da quando la copertina porta **dentro** il titolo
   (12/09/2026), su uno schermo largo le carte diventavano cinque per fila e
   quel titolo scendeva sotto i dieci pixel, cioe' una macchia. Quattro per
   fila e' il punto in cui l'immagine dice ancora qualcosa. */
.griglia-carte {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Tre per riga, e tre davvero: con `auto-fit` su uno schermo largo ne
   entravano quattro, e sei articoli lasciavano una riga da due — sembrava
   mancasse un pezzo. Tre colonne fisse fanno due file piene, e le carte
   diventano piu' larghe: la copertina porta il titolo dentro, e piu' grande
   e' piu' si legge. Sotto i 900px scende a due, sul telefono a una. */
.griglia-carte-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .griglia-carte-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .griglia-carte-3 { grid-template-columns: 1fr; } }

.carta-contenuto {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  overflow: hidden;
  box-shadow: var(--ombra-bassa);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.carta-contenuto:hover {
  box-shadow: var(--ombra-media);
  transform: translateY(-2px);
  border-color: var(--blu-azione);
}

/* Al posto della foto una fascia tinta con l'icona della categoria: meglio
   un segno disegnato che una foto di repertorio presa a caso. */
.carta-contenuto-fascia {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  background: var(--blu-pastello);
  color: var(--blu-azione);
}
.carta-contenuto-grande .carta-contenuto-fascia { min-height: 132px; }

/* Con un'immagine la fascia diventa l'immagine, **intera**: il rapporto e'
   quello della copertina (1200x630), non un'altezza fissa.
   Fino al 12/09/2026 qui c'era `height: 132px`, e con la copertina disegnata
   voleva dire tagliarne una striscia centrale — cioe' buttare via il titolo
   che ci sta scritto sopra. Il rapporto fisso tiene comunque le carte
   allineate nella griglia, che era la ragione dell'altezza fissa. */
.carta-contenuto-fascia.e-foto { padding: 0; height: auto; min-height: 0; aspect-ratio: 1200 / 630; }
.carta-contenuto-fascia.e-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tinta-permessi     .carta-contenuto-fascia { background: var(--blu-pastello); }
.tinta-cittadinanza .carta-contenuto-fascia { background: var(--verde-pastello); color: var(--verde); }
.tinta-lavoro       .carta-contenuto-fascia { background: var(--giallo-pastello); color: var(--testo); }
.tinta-famiglia     .carta-contenuto-fascia { background: var(--rosso-pastello); color: var(--rosso); }
.tinta-salute       .carta-contenuto-fascia { background: var(--verde-pastello); color: var(--verde); }
.tinta-guide        .carta-contenuto-fascia { background: var(--blu-pastello-2); }
.tinta-storie       .carta-contenuto-fascia { background: var(--rosso-pastello); color: var(--rosso); }

.carta-contenuto-corpo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .9rem 1rem 1rem;
  flex: 1;
}
.carta-contenuto-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: .76rem;
  color: var(--testo-tenue);
}
.chip-categoria { background: var(--blu-pastello); color: var(--blu-azione); }
.carta-contenuto-titolo { margin: 0; font-size: 1rem; line-height: 1.35; }
.carta-contenuto-grande .carta-contenuto-titolo { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
.carta-contenuto-titolo a { color: inherit; }
.carta-contenuto-titolo a:hover { color: var(--blu-azione); }
.carta-contenuto-sommario {
  margin: 0;
  font-size: .88rem;
  color: var(--testo-tenue);
  line-height: 1.5;
}
.carta-contenuto-grande .carta-contenuto-sommario { font-size: .97rem; }

/* Riga in fondo alla carta: la data di verifica e l'avviso di lingua sono
   promesse verso chi legge, non decorazioni. Restano sempre visibili. */
.carta-contenuto-pieno {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  margin: auto 0 0;
  padding-top: .55rem;
  border-top: 1px solid var(--bordo);
  font-size: .74rem;
  color: var(--testo-tenue);
}
.carta-contenuto-pieno:empty { display: none; }
.carta-contenuto-pieno .verificato,
.carta-contenuto-pieno .avviso-lingua {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}
.carta-contenuto-pieno .verificato .icona { color: var(--verde); }
.carta-contenuto-pieno .avviso-lingua { color: var(--blu-azione); }

/* ── Evidenza + scadenze ───────────────────────────────────────────── */
.evidenza-griglia {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
.evidenza-principale .titolo-fascia,
.evidenza-scadenze  .titolo-fascia { margin-bottom: .7rem; }
.evidenza-scadenze .testo-fascia { margin-bottom: .9rem; }

.elenco-scadenze { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.scadenza {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem .8rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}
.scadenza-conto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 48px;
  padding: .3rem .1rem;
  border-radius: var(--raggio-s);
  background: var(--blu-pastello);
  color: var(--blu-azione);
  line-height: 1.05;
}
.scadenza-conto strong { font-size: 1.15rem; }
.scadenza-unita { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; }
/* Sotto la settimana il conto diventa rosso: e un avviso, non un'etichetta. */
.scadenza-vicina { background: var(--rosso-pastello); color: var(--rosso); }
.scadenza-testo { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.scadenza-testo a { font-size: .9rem; font-weight: 600; color: inherit; line-height: 1.35; }
.scadenza-testo a:hover { color: var(--blu-azione); }
.scadenza-data { font-size: .74rem; color: var(--testo-tenue); }

/* ── Forum ─────────────────────────────────────────────────────────── */
.forum-conteggio { display: block; margin-top: .2rem; font-size: .82rem; }
.elenco-topic { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.topic {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .9rem;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}
.topic-icona {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--blu-pastello);
  color: var(--blu-azione);
}
.topic-testo { display: flex; flex-direction: column; gap: .18rem; min-width: 0; flex: 1; }
.topic-titolo { font-size: .95rem; font-weight: 600; color: inherit; line-height: 1.35; }
.topic-titolo:hover { color: var(--blu-azione); }
.topic-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  font-size: .76rem;
  color: var(--testo-tenue);
}
.chip-mini { padding: .05rem .4rem; font-size: .68rem; }
.topic-risposte {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  min-width: 54px;
  line-height: 1.1;
}
.topic-risposte strong { font-size: 1.05rem; color: var(--blu-azione); }
.topic-risposte span { font-size: .68rem; color: var(--testo-tenue); }

/* ── Adattamento alle larghezze piccole ────────────────────────────── */
@media (max-width: 900px) {
  .evidenza-griglia { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .intestazione-fascia { align-items: flex-start; }
  .topic-risposte { display: none; }
  .scadenza-conto { min-width: 42px; }
  .apertura-compatta .onda { max-width: 100%; }
}

/* --- 22. Elenchi e schede dei contenuti ---------------------------------- */
/* Aggiunte il 29/08/2026 con le pagine pubbliche di /notizie e /blog.
   Le carte, le griglie e i chip sono quelli che gia' esistono: qui c'e' solo
   l'impaginazione dell'elenco, dell'articolo e dei due blocchi in fondo. */

.elenco-testa { margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
.elenco-testa h1 { margin: 0 0 .4rem; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
.elenco-occhiello {
  margin: 0; max-width: 62ch;
  color: var(--testo-tenue); font-size: clamp(.98rem, .95rem + .2vw, 1.1rem);
}

.elenco-ricerca { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 560px; }
.elenco-ricerca input {
  flex: 1 1 auto; min-width: 0;
  padding: .7rem .9rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio-pillola);
  background: var(--superficie); color: var(--testo); font: inherit; font-size: .97rem;
}
.elenco-ricerca input:focus {
  outline: none; border-color: var(--blu-azione);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blu-azione) 22%, transparent);
}

.elenco-categorie { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: var(--raggio-pillola);
  border: 1px solid var(--bordo); background: var(--superficie);
  color: var(--testo); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.chip-filtro:hover { border-color: var(--blu-azione); color: var(--blu-azione); }
.chip-filtro.e-attiva { background: var(--blu-azione); border-color: var(--blu-azione); color: #fff; }
.chip-conto { font-weight: 400; font-size: .78rem; opacity: .75; }

.elenco-conteggio { margin: 0 0 1rem; color: var(--testo-tenue); font-size: .88rem; }
.elenco-vuoto {
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-m); color: var(--testo-tenue);
}
.elenco-vuoto p { margin: 0 0 .8rem; }
.elenco-vuoto p:last-child { margin-bottom: 0; }

.pagine { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pagine-voce {
  min-width: 2.4rem; text-align: center; padding: .45rem .6rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  background: var(--superficie); color: var(--testo);
  text-decoration: none; font-size: .9rem; font-weight: 600;
}
.pagine-voce:hover { border-color: var(--blu-azione); color: var(--blu-azione); }
.pagine-voce.e-attiva { background: var(--blu-azione); border-color: var(--blu-azione); color: #fff; }

/* --- Scheda dell'articolo ------------------------------------------------ */

.briciole {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin-bottom: 1.2rem; font-size: .85rem; color: var(--testo-tenue);
}
.briciole a { color: var(--testo-tenue); text-decoration: none; }
.briciole a:hover { color: var(--blu-azione); text-decoration: underline; }

.articolo {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-m); padding: clamp(1.2rem, 4vw, 2.75rem);
}

.articolo-testa { margin-bottom: 1.5rem; }
.articolo-categoria { margin: 0 0 .6rem; }
.articolo-categoria a {
  display: inline-block; padding: .18rem .7rem;
  border-radius: var(--raggio-pillola);
  background: var(--blu-pastello); color: var(--blu-azione);
  text-decoration: none; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

.articolo h1 { margin: 0 0 .8rem; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.18; }
.articolo-sommario {
  margin: 0 0 1rem; max-width: 62ch;
  font-size: clamp(1.02rem, 1rem + .3vw, 1.18rem); line-height: 1.55;
  color: var(--testo-tenue);
}
.articolo-riga-dati {
  display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem;
  font-size: .84rem; color: var(--testo-tenue);
}
.articolo-lingua { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }

.articolo-scadenza {
  display: inline-flex; align-items: baseline; gap: .4rem; margin: 0 0 1.2rem;
  background: var(--giallo-pastello); border: 1px solid var(--giallo);
  border-radius: var(--raggio-pillola); padding: .25rem .9rem;
  font-size: .88rem; font-weight: 600; color: var(--testo);
}

.articolo-immagine { margin: 0 0 1.6rem; }
.articolo-immagine img {
  width: 100%; height: auto; display: block;
  border-radius: var(--raggio-s); background: var(--blu-pastello-2);
}

.articolo-corpo { font-size: clamp(1rem, .98rem + .2vw, 1.08rem); line-height: 1.72; }
.articolo-corpo > *:first-child { margin-top: 0; }
.articolo-corpo h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); margin: 2rem 0 .6rem; }
.articolo-corpo h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); margin: 1.5rem 0 .45rem; }
.articolo-corpo p { margin: 0 0 1.1rem; }
.articolo-corpo ul, .articolo-corpo ol { margin: 0 0 1.1rem 1.4rem; }
.articolo-corpo li { margin-bottom: .4rem; }
.articolo-corpo a { color: var(--blu-azione); }
.articolo-corpo img { max-width: 100%; height: auto; border-radius: var(--raggio-s); }
.articolo-corpo figure { margin: 0 0 1.2rem; }
/* Le schermate di altri siti hanno il fondo bianco e senza bordo si
   confondono con la pagina: il filetto dice dove finisce lo scatto. */
.articolo-corpo figure img { border: 1px solid var(--bordo); background: var(--superficie); }
.articolo-corpo figcaption { font-size: .84rem; color: var(--testo-tenue); margin-top: .4rem; }
.articolo-corpo blockquote {
  margin: 0 0 1.2rem; padding: .9rem 1.2rem;
  border-left: 3px solid var(--blu-azione); background: var(--blu-pastello-2);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
}
.articolo-corpo pre {
  overflow-x: auto; padding: .9rem 1rem; border-radius: var(--raggio-s);
  background: var(--blu-pastello-2); font-size: .88rem;
}
/* Una tabella larga scorre dentro di se': la pagina non scorre mai in orizzontale. */
.articolo-corpo table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; font-size: .93rem; }
.articolo-corpo th, .articolo-corpo td { border: 1px solid var(--bordo); padding: .55rem .75rem; text-align: left; }
.articolo-corpo th { background: var(--blu-pastello-2); font-weight: 700; }

.articolo-fondo { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--bordo); }
.articolo-verifica {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 1.2rem;
  font-size: .88rem; color: var(--verde); font-weight: 600;
}
/* «Segnala un aggiornamento»: sta subito sotto la data della verifica, e
   chiuso deve pesare poco — chi legge sta leggendo, non segnalando. */
.segnala { margin: 0 0 1.4rem; }
.segnala-apri {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; font-weight: 600; color: var(--blu-azione);
  cursor: pointer; list-style: none; padding: .25rem 0;
}
.segnala-apri::-webkit-details-marker { display: none; }
.segnala-apri:hover { text-decoration: underline; }
.segnala[open] .segnala-apri { margin-bottom: .7rem; }
.segnala-corpo {
  padding: 1rem 1.1rem; border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); background: var(--fondo);
}
.segnala-intro { margin: 0 0 1rem; font-size: .9rem; color: var(--testo-tenue); }
.segnala-tipi { border: 0; padding: 0; margin: 0 0 1rem; }
.segnala-tipi legend {
  padding: 0; margin-bottom: .5rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--testo-tenue);
}
.segnala-tipo {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-bottom: .4rem; font-size: .92rem; cursor: pointer;
}
.segnala-tipo input { margin-top: .2rem; flex: 0 0 auto; }
.segnala-modulo .campo-etichetta { font-weight: 600; font-size: .93rem; }
.segnala-modulo .campo-aiuto { font-size: .84rem; color: var(--testo-tenue); }
.segnala-modulo textarea { min-height: 96px; }
.segnala-azioni { margin: 0 0 .7rem; }
.segnala-nota { margin: 0; font-size: .83rem; color: var(--testo-tenue); }
/* Il campo esca: invisibile a chi legge, non a un programma che compila
   tutto quello che trova nel modulo. */
.segnala-esca {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.articolo-senza-fonti {
  margin: 0 0 1.2rem; padding: .8rem 1rem;
  background: var(--giallo-pastello); border: 1px solid var(--giallo);
  border-radius: var(--raggio-s); font-size: .88rem; color: var(--testo);
}
.articolo-fonti h2 { font-size: 1rem; margin: 0 0 .6rem; }
.articolo-fonti ul { margin: 0 0 1.2rem; padding-left: 1.2rem; font-size: .9rem; line-height: 1.6; }
.articolo-fonti li { margin-bottom: .45rem; }
.articolo-fonti .tenue { color: var(--testo-tenue); font-size: .85em; }
.articolo-disclaimer {
  margin: 0; font-size: .82rem; line-height: 1.55; color: var(--testo-tenue);
}

/* --- Collegati e «ti potrebbe interessare» ------------------------------- */

.blocco-collegati, .blocco-interessa { margin-top: clamp(2rem, 4vw, 3rem); }
.blocco-collegati .titolo-fascia, .blocco-interessa .titolo-fascia { margin-bottom: .3rem; }
.blocco-collegati .testo-fascia { margin-bottom: 1rem; }
/* Il secondo blocco e' un ripiego automatico e si vede che pesa meno. */
.blocco-interessa { opacity: .92; }
.blocco-interessa .titolo-fascia { font-size: 1.05rem; margin-bottom: 1rem; }

/* --- 23. Pagina Servizi -------------------------------------------------- */

.griglia-servizi {
  display: grid; gap: clamp(.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.carta-servizio {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-m); padding: clamp(1.1rem, 2.2vw, 1.6rem);
  display: grid; gap: .5rem; align-content: start;
  box-shadow: var(--ombra-bassa);
}
/* Quello che non c'e' ancora pesa meno, ma resta leggibile: non e' un
   segreto, e' un impegno con una data. */
.carta-servizio.e-in-arrivo { background: var(--superficie-2); border-style: dashed; }

.carta-servizio-icona { margin: 0; color: var(--blu-azione); line-height: 1; }
.carta-servizio.e-in-arrivo .carta-servizio-icona { color: var(--testo-tenue); }
.carta-servizio-titolo { margin: 0; font-size: 1.08rem; }
.carta-servizio-testo { margin: 0; color: var(--testo-tenue); font-size: .94rem; line-height: 1.55; }
.carta-servizio-stato { margin: .2rem 0 0; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }

/* Una carta che dichiara un servizio attivo ci porta dentro. Il link vero e'
   «Apri», ma il suo ::after copre tutta la carta: cosi' si puo' cliccare
   ovunque — sulla pastiglia «Attivo» compresa, che e' il punto in cui la
   gente clicca davvero. La pastiglia resta un'etichetta: dice lo stato, e lo
   stato non si preme. */
.carta-servizio.e-cliccabile { position: relative; transition: box-shadow .15s ease, border-color .15s ease; }
.carta-servizio.e-cliccabile:hover { box-shadow: var(--ombra-media); border-color: var(--blu-azione); }
.carta-servizio.e-cliccabile:focus-within { outline: 2px solid var(--blu-azione); outline-offset: 3px; }

.carta-servizio-vai { font-weight: 600; text-decoration: none; white-space: nowrap; margin-left: auto; }
.carta-servizio-vai:hover { text-decoration: underline; }
.carta-servizio-vai::after { content: ''; position: absolute; inset: 0; }

.fascia-app {
  display: flex; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.fascia-app-testo { flex: 1 1 380px; }
.fascia-app-testo .testo-fascia { max-width: 56ch; }
.fascia-app-store { display: flex; gap: .6rem; flex-wrap: wrap; }
.fascia-app-stato { margin: 0; }

.griglia-prezzi {
  display: grid; gap: 1rem; margin: 1.2rem 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.carta-prezzo {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-m); padding: clamp(1.1rem, 2.2vw, 1.6rem);
  display: grid; gap: .35rem; align-content: start;
}
.carta-prezzo-rilievo { border-color: var(--blu-azione); box-shadow: var(--ombra-media); }
.carta-prezzo-nome { margin: 0; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--blu-azione); }
.carta-prezzo-cifra { margin: 0; font-size: 1.25rem; font-weight: 700; }
.carta-prezzo-testo { margin: 0; color: var(--testo-tenue); font-size: .92rem; }

.prezzi-nota { margin: 0; font-size: .9rem; color: var(--testo-tenue); }
.prezzi-nota a { color: var(--blu-azione); }

/* --- Badge degli store --------------------------------------------------- */
/* Il badge nero e' la forma che Google e Apple impongono nelle loro linee
   guida. Qui i simboli sono ridisegnati per vedere la resa in locale: prima
   di pubblicare vanno sostituiti con gli originali. */

.badge-store-fila { display: flex; gap: .7rem; flex-wrap: wrap; }

.badge-store {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .55rem 1.05rem .55rem .9rem;
  background: #000; color: #fff; text-decoration: none;
  border: 1px solid #000; border-radius: 10px;
  min-width: 168px;
}
.badge-store:hover { background: #1B2B3D; border-color: #1B2B3D; }
/* Senza indirizzo non e' un link: si vede che non si puo' premere. */
.badge-store.e-spento { opacity: .55; cursor: default; }

.badge-store-segno { display: flex; color: #fff; }
.badge-store-testo { display: grid; line-height: 1.15; }
.badge-store-sopra {
  font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; opacity: .82;
}
.badge-store-nome { font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; }

.nota-badge {
  margin: .8rem 0 0; font-size: .8rem; line-height: 1.5;
  color: var(--testo-tenue); max-width: 56ch;
}

.carta-prezzo-avvertenza {
  margin: .2rem 0 0; font-size: .78rem; font-weight: 600;
  color: var(--testo); background: var(--giallo-pastello);
  border-radius: var(--raggio-pillola); padding: .1rem .6rem; justify-self: start;
}

/* Sul tema scuro il badge nero si confonde col fondo: gli si da' un bordo
   appena percettibile, cosi' si vede che e' un oggetto. */
:root[data-tema="scuro"] .badge-store { border-color: rgba(255, 255, 255, .28); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .badge-store { border-color: rgba(255, 255, 255, .28); }
}

/* --- 24. Pagine statiche -------------------------------------------------- */

.statica-testa { margin-bottom: 1.4rem; }
.statica-testa h1 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }

.statica-avvertenza {
  margin: 0 0 1.6rem; padding: .7rem 1rem;
  background: var(--superficie-2); border: 1px solid var(--bordo);
  border-left: 3px solid var(--blu-azione); border-radius: var(--raggio-s);
  font-size: .86rem; color: var(--testo-tenue);
}

/* Il corpo riusa .articolo-corpo, che ha gia' titoli, elenchi e tabelle.
   Qui solo quello che serve a un testo lungo di sole parole. */
.statica-corpo h2 { margin-top: 2.2rem; }
.statica-corpo h2:first-child { margin-top: 0; }
.statica-corpo h3 { margin-top: 1.4rem; font-size: 1.05rem; }
.statica-corpo table { font-size: .9rem; }
.statica-corpo code {
  background: var(--blu-pastello-2); padding: .1rem .35rem;
  border-radius: 4px; font-size: .92em;
}

/* --- 25. Account, area personale e moduli guidati ------------------------ */

.contenitore-medio { max-width: 980px; }

/* La scheda bianca dove stanno accesso, registrazione e recupero password:
   un modulo corto al centro, senza niente intorno che distragga. */
.scheda-account {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-l); padding: clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: var(--ombra-media);
}
.scheda-account h1 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); }
.scheda-account-piede { margin: .9rem 0 0; font-size: .92rem; color: var(--testo-tenue); }

.occhiello { color: var(--testo-tenue); margin: 0 0 1.4rem; }

/* Due campi affiancati che diventano uno sopra l'altro quando non ci stanno.
   minmax(0, 1fr) e non 1fr: in tagalog le etichette sono piu' lunghe e con
   1fr la griglia sfonda invece di cedere. */
.campo-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 1rem; }

.titolo-sezione { margin: 2.2rem 0 .9rem; font-size: 1.15rem; }

/* Un pulsante che e' un link: per le azioni secondarie (togli, cancella,
   salva ed esci) dove un bottone pieno peserebbe troppo. */
.bottone-testo {
  background: none; border: 0; padding: .4rem .2rem;
  color: var(--blu-azione); font: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.bottone-testo:hover { color: var(--blu-logo); }

/* --- Elenco delle pratiche ----------------------------------------------- */

.elenco-pratiche { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.pratica {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  justify-content: space-between;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-m); padding: .9rem 1.1rem;
}
.pratica-testo { min-width: min(100%, 240px); flex: 1 1 auto; }
.pratica-titolo { margin: 0 0 .25rem; font-weight: 600; }
.pratica-titolo a { text-decoration: none; }
.pratica-meta { margin: 0; font-size: .85rem; color: var(--testo-tenue); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pratica-azioni { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* --- Le carte dei moduli disponibili ------------------------------------- */

.griglia-moduli {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.carta-modulo {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-m); padding: 1.2rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.carta-modulo h3 { margin: 0; font-size: 1.1rem; }
.carta-modulo-testo { margin: 0; color: var(--testo-tenue); font-size: .93rem; }
.carta-modulo-fonte { margin: 0; font-size: .8rem; color: var(--testo-tenue); }
.carta-modulo .bottone { margin-top: auto; align-self: flex-start; }

/* Uno «strumento» non e' un modulo: risponde a una domanda invece di
   produrre un foglio da consegnare. Sta nello stesso elenco perche' e' li'
   che la gente lo cerca, ma il filo verde in cima dice che e' un'altra cosa
   senza che nessuno debba leggere una spiegazione. */
.carta-strumento { border-top: 3px solid var(--verde); }

.nota-privacy {
  margin: 2rem 0 0; padding: .8rem 1rem;
  background: var(--blu-pastello-2); border-radius: var(--raggio-s);
  font-size: .85rem; color: var(--testo-tenue);
}

/* --- Il wizard ------------------------------------------------------------ */

.passi-barra { margin-bottom: 1.2rem; }
.passi-conteggio { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--testo-tenue); }
.passi-progresso { height: 6px; background: var(--blu-pastello); border-radius: var(--raggio-pillola); overflow: hidden; }
.passi-progresso span { display: block; height: 100%; background: var(--blu-azione); border-radius: inherit; }

.campo-modulo { margin-bottom: 1.6rem; }
.campo-modulo label { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.campo-modulo .aiuto { margin: 0 0 .15rem; line-height: 1.45; }

.campo-errato input, .campo-errato textarea, .campo-errato select { border-color: var(--rosso); }
.campo-errore { margin: .1rem 0 0; color: var(--rosso); font-size: .85rem; font-weight: 600; }

/* Le scelte sono pulsanti larghi, non una tendina: si leggono tutte insieme
   e si premono col pollice. */
.scelte { display: grid; gap: .5rem; }
.scelte-corte { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }

.scelta {
  display: flex; gap: .65rem; align-items: flex-start;
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: .7rem .85rem; background: var(--superficie);
  font-weight: 500; font-size: .95rem; cursor: pointer;
}
.scelta:hover { border-color: var(--blu-azione); }
.scelta input { margin-top: .2rem; flex: 0 0 auto; }
.scelta-attiva { border-color: var(--blu-azione); background: var(--blu-pastello-2); }

/* ── Le scelte che si guardano ─────────────────────────────────────────
   Il taglio di un curriculum non si sceglie leggendo il suo nome: si
   sceglie vedendolo. Ogni opzione porta dentro il foglio disegnato davvero,
   rimpicciolito con `transform: scale()` — l'iframe resta largo quanto una
   pagina A4 e viene ridotto, se no il documento si impaginerebbe stretto e
   l'anteprima mostrerebbe una cosa diversa da quella che esce stampata. */
.scelte-anteprima { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.scelte-anteprima .scelta { flex-direction: column; align-items: stretch; }
/* Misura fissa e scala fissa, e devono corrispondere: 794 x .235 = 187,
   1123 x .235 = 264. Con una larghezza in percentuale il riquadro e la
   pagina dentro si sfaserebbero, e l'anteprima uscirebbe tagliata o con un
   bordo bianco che cambia a ogni larghezza di finestra. */
.foglietto {
  display: block; margin: .6rem auto 0; width: 187px; height: 264px;
  overflow: hidden; border: 1px solid var(--bordo); border-radius: 4px;
  background: #fff; pointer-events: none;
}
.foglietto iframe {
  width: 794px; height: 1123px; border: 0; display: block;
  transform: scale(.235); transform-origin: 0 0;
}

.gruppo-persona {
  border: 1px solid var(--bordo); border-radius: var(--raggio-m);
  padding: 1.1rem; margin: 0 0 1.2rem; background: var(--superficie);
}
.gruppo-persona legend { font-weight: 700; padding: 0 .4rem; }
.bottone-togli { color: var(--rosso); }

.passi-azioni {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-top: 1.6rem;
}
.passi-azioni form { margin: 0; }

/* --- Anteprima e riepilogo ------------------------------------------------ */

.riepilogo {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-m); padding: 1.1rem 1.2rem; margin-bottom: 1rem;
}
.riepilogo-incompleto { border-color: var(--rosso); }
.riepilogo-avvertenze { background: var(--giallo-pastello); border-color: var(--giallo); }
.riepilogo-avvertenze ul { margin: 0; padding-left: 1.2rem; font-size: .92rem; }
.riepilogo-avvertenze li { margin-bottom: .4rem; }

.riepilogo-testa {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
  justify-content: space-between; margin-bottom: .7rem;
}
.riepilogo-testa h2 { margin: 0; font-size: 1.05rem; }
.riepilogo-persona { margin: 1rem 0 .4rem; font-size: .95rem; color: var(--testo-tenue); }

.riepilogo-campi { margin: 0; }
.riepilogo-riga {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: .3rem .9rem; padding: .45rem 0; border-top: 1px solid var(--bordo);
  font-size: .93rem;
}
.riepilogo-riga:first-child { border-top: 0; }
.riepilogo-riga dt { color: var(--testo-tenue); margin: 0; }
.riepilogo-riga dd { margin: 0; font-weight: 600; }
.riepilogo-riga-manca dd { color: var(--rosso); }
.riepilogo-vuoto { color: var(--testo-tenue); font-weight: 400; font-style: italic; }

.elenco-documenti { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .93rem; }
.elenco-documenti li { margin-bottom: .45rem; }

.chiusura { margin-top: 1.6rem; text-align: center; }
.chiusura .bottone[disabled] { opacity: .45; pointer-events: none; }
.chiusura .aiuto { margin-top: .6rem; }

.scheda-fatto {
  text-align: center; background: var(--superficie);
  border: 1px solid var(--verde); border-radius: var(--raggio-l);
  padding: clamp(1.4rem, 4vw, 2.4rem); margin-bottom: 1.4rem;
}
.scheda-fatto-icona { color: var(--verde); margin: 0 0 .4rem; }
.scheda-fatto h1 { margin: 0 0 .4rem; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }

.chip-blu { background: var(--blu-pastello); color: var(--blu-azione); }

/* Il tema scuro: le superfici bianche fisse qui sopra usano gia' le
   variabili, quindi non serve ripeterle. Solo i fondi pastello, che al buio
   diventano macchie chiare. */
:root[data-tema="scuro"] .scelta-attiva,
:root[data-tema="scuro"] .nota-privacy { background: rgba(126, 180, 234, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .scelta-attiva,
  :root:not([data-tema="chiaro"]) .nota-privacy { background: rgba(126, 180, 234, .12); }
}

/* Il chip «Obbligatorio» dei moduli: neutro di proposito. Il rosso resta il
   colore dell'errore, e un modulo dove nove campi su dieci sono obbligatori
   non deve sembrare una schermata piena di allarmi. */
.chip-neutro {
  background: var(--superficie-2); color: var(--testo-tenue);
  border: 1px solid var(--bordo);
}

/* L'icona della schermata «pratica pronta»: il centraggio non si eredita
   perche' l'svg e' inline dentro un paragrafo largo quanto la scheda. */
.scheda-fatto-icona { line-height: 1; }
/* .icona e display:block: dentro un paragrafo centrato resterebbe a
   sinistra, perche' un blocco non si centra col text-align. */
.scheda-fatto-icona .icona { margin: 0 auto; }

/* La fotografia del curriculum, chiesta nella stessa schermata del download.
   Dentro un riquadro suo perche' e' un'altra cosa dal tasto: il tasto scarica
   sempre, questa e' una scelta in piu' — e dev'essere leggibile come tale,
   se no sembra che senza foto non si scarichi. */
.allega-foto {
  margin: 1rem auto 0; max-width: 42ch; text-align: left;
  background: var(--superficie-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio-m); padding: 1rem;
}
.allega-foto-titolo {
  margin: 0 0 .3rem; font-weight: 700;
}
.allega-foto .aiuto { margin: 0 0 .8rem; }
/* Il campo file: a tutta larghezza, se no su un telefono il nome del file
   lungo spinge il bottone fuori dal riquadro. */
.allega-foto input[type="file"] {
  display: block; width: 100%; max-width: 100%; margin-bottom: .9rem;
  font: inherit; color: var(--testo);
}
.allega-foto .bottone { width: 100%; }

.senza-foto { margin: .7rem 0 0; }

/* --- 26. Articolo largo ------------------------------------------------- */

/* 760px (contenitore-stretto) sono giusti per una pagina legale, non per una
   guida di ottomila battute: la colonna diventa lunghissima e l'articolo
   sembra il doppio. A 940px il testo sta ancora sotto le ~90 battute per riga,
   che e' il limite oltre il quale l'occhio perde la riga. */
.contenitore-articolo { max-width: 940px; }

/* Del muro degli abbonati non resta niente: tolto il 26/09/2026 con la
   decisione che gli utenti non pagano. Questa regola sola sopravvive perche'
   la classe e' ancora nel markup, spenta da `$tagliato = false`: l'ultimo
   paragrafo di un testo troncato sfumerebbe, per far vedere che continua. */
.articolo-corpo-tagliato > *:last-child {
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent);
          mask-image: linear-gradient(180deg, #000 35%, transparent);
}

/* --- 27. Banner dei cookie ------------------------------------------------ */

/* Sta in fondo e non copre il testo: una richiesta, non un muro. Chi non
   sceglie continua a leggere, e il banner resta li' finche' decide. */
.consenso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  padding-right: clamp(2.6rem, 4vw, 2.6rem); /* spazio per la X */
  background: var(--superficie);
  border-top: 1px solid var(--bordo);
  box-shadow: 0 -8px 30px -18px rgba(0, 48, 96, .5);
  font-size: .92rem;
}
.consenso[hidden] { display: none; }
.consenso-testo { flex: 1 1 min(100%, 38rem); }
.consenso-testo p { margin: 0; color: var(--testo-tenue); }
.consenso-titolo { font-weight: 700; color: var(--testo); margin-bottom: .2rem !important; }

/* I tre bottoni stanno sulla stessa riga e hanno la stessa dimensione:
   rifiutare deve costare un clic quanto accettare. Il primario e' colorato,
   ma non e' piu' grande. */
.consenso-azioni { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.consenso-azioni .bottone { white-space: nowrap; }

/* «Rifiuta tutto» ha la stessa evidenza grafica di «Accetta tutto»: stesso
   riquadro, stesso peso, stessa ombra. Le linee guida del Garante del 10
   giugno 2021 chiedono proprio questo — un rifiuto meno visibile
   dell'accettazione non e' una scelta libera. Resta il colore a distinguerli,
   perche' due bottoni identici uno accanto all'altro si cliccano per sbaglio. */
.consenso-azioni [data-consenso="necessari"].bottone {
  border-width: 2px;
  box-shadow: var(--ombra-media);
}

/* Le caselle per categoria. Sono la parte che rende il consenso specifico:
   statistiche e pubblicita' sono due finalita' diverse e si spuntano a parte. */
.consenso-scelte {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin-top: .7rem;
}
.consenso-voce {
  display: flex; gap: .5rem; align-items: flex-start;
  flex: 1 1 min(100%, 17rem);
  font-size: .86rem; line-height: 1.4; color: var(--testo-tenue);
  cursor: pointer;
}
.consenso-voce input { margin-top: .18rem; flex: 0 0 auto; }
.consenso-voce strong { display: block; color: var(--testo); font-weight: 600; }
/* I necessari sono spuntati e bloccati: si vede che ci sono e si vede che
   non si tolgono, invece di far finta che siano una scelta. */
.consenso-voce-fissa { cursor: default; opacity: .85; }

/* La X vale come rifiuto, e per questo e' un bottone vero con la sua
   etichetta per chi usa un lettore di schermo — non una decorazione. */
.consenso-x {
  position: absolute; top: .35rem; right: .5rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; padding: .2rem .45rem;
  color: var(--testo-tenue); border-radius: .4rem;
}
.consenso-x:hover, .consenso-x:focus-visible { color: var(--testo); background: var(--fondo); }

/* --- 28. Banner interni -------------------------------------------------- */

/* La nostra pubblicita' sul nostro sito: piani, BAHAY+, avvisi. Non e'
   AdSense, e si vede che non lo e' — porta il nostro nome e i nostri colori,
   perche' una promozione travestita da contenuto brucia la fiducia su cui
   questo sito campa. */
.riquadro {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem;
  align-items: center; justify-content: space-between;
  border-radius: var(--raggio-m);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin: 1.6rem 0;
}
.riquadro-testo { flex: 1 1 min(100%, 26rem); }
.riquadro-occhiello {
  margin: 0 0 .25rem; font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; opacity: .8;
}
.riquadro-titolo { margin: 0 0 .3rem; font-size: 1.15rem; font-weight: 700; }
.riquadro-corpo  { margin: 0; font-size: .95rem; opacity: .9; }
.riquadro-azione { margin: 0; }
.riquadro-immagine { flex: 0 0 auto; }
.riquadro-immagine img { display: block; max-width: 140px; height: auto; border-radius: var(--raggio-s); }

.riquadro-blu    { background: var(--blu-logo);      color: #fff; }
.riquadro-verde  { background: var(--verde-pastello); color: var(--testo); border: 1px solid var(--verde); }
.riquadro-chiaro { background: var(--superficie);     color: var(--testo); border: 1px solid var(--bordo); }
/* Il giallo fa da riempimento con testo scuro sopra: come colore del testo
   arriva a 1,9:1 su bianco e non si legge. */
.riquadro-giallo { background: var(--giallo-pastello); color: var(--testo); border: 1px solid var(--giallo); }

/* ── Il pulsante prende il colore della sua famiglia ─────────────────────
   Sul riquadro verde il pulsante restava blu scuro, accanto a un titolo che
   e' blu-nerissimo: due scuri a un centimetro l'uno dall'altro non staccano,
   e il pulsante si legge come un pezzo di testo in grassetto invece che come
   la cosa da premere.

   Il verde d'azione su bianco fa 5,6:1, quindi il testo dentro resta
   leggibile. Il giallo no — su quello il pulsante resta blu, perche' il
   giallo come fondo di un tasto col testo bianco non si legge (1,9:1). */
.riquadro-verde .bottone-primario {
  background: var(--verde);
  border-color: var(--verde);
  color: #FFFFFF;
}

.riquadro-verde .bottone-primario:hover,
.riquadro-verde .bottone-primario:focus-visible {
  background: #0C6233;
  border-color: #0C6233;
}

/* --- 22. Commenti sotto gli articoli ------------------------------------- */
/* Stanno dentro il contenitore stretto dell'articolo e devono sembrare la
   coda della lettura, non un'altra pagina: stesso fondo, un filetto sopra. */

.commenti {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--bordo);
}
.commenti h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); margin-bottom: 1rem; }
.commenti-vuoto { color: var(--testo-tenue); }

.commenti-elenco,
.commenti-risposte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.commenti-elenco { margin-bottom: 1.5rem; }

.commento {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  padding: .9rem 1.05rem;
}
/* Il proprio commento in attesa: giallo di riempimento, mai giallo di testo. */
.commento.e-in-attesa { background: var(--giallo-pastello); border-color: var(--giallo); }

.commento-testa {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .35rem; font-size: .86rem;
}
.commento-autore { font-weight: 600; }
.commento-quando { color: var(--testo-tenue); }
.commento-corpo  { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.commento-azioni { margin: .5rem 0 0; }

/* Le risposte rientrano di poco: un livello solo, e si deve capire a colpo
   d'occhio che e' una risposta, non un commento nuovo. */
.commenti-risposte {
  margin-top: .9rem; padding-left: clamp(.75rem, 2vw, 1.5rem);
  border-left: 2px solid var(--bordo);
}

.commento-modulo { display: flex; flex-direction: column; gap: .6rem; }
.commento-modulo textarea {
  width: 100%; padding: .7rem .85rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio-m);
  background: var(--superficie); color: var(--testo);
  font: inherit; line-height: 1.55; resize: vertical;
}
.commento-modulo textarea:focus-visible { outline: 2px solid var(--blu-azione); outline-offset: 1px; }
.commento-modulo .bottone { align-self: flex-start; }
.commento-nota { margin: 0; font-size: .8rem; color: var(--testo-tenue); line-height: 1.45; }
.commento-risposta-a {
  margin: 0; font-size: .85rem; color: var(--testo-tenue);
  display: flex; gap: .5rem; align-items: center;
}

.collegamento-tenue {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--blu-azione); text-decoration: underline;
}

.commenti-invito {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  color: var(--testo-tenue);
}

/* --- 23. Forum ----------------------------------------------------------- */
/* Le righe delle discussioni riusano le classi del blocco in home (.topic,
   .topic-icona, .topic-meta, .topic-risposte): e' la stessa cosa in due
   posti, e deve avere lo stesso aspetto. Qui sotto solo quello che manca. */

.forum-testa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 1rem 0;
}
.forum-testa .elenco-conteggio { margin: 0; }

.forum-regole {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--bordo);
  font-size: .82rem; color: var(--testo-tenue); line-height: 1.5;
}

.discussione {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  padding: clamp(1rem, 2.5vw, 1.6rem);
  margin-bottom: 1.5rem;
}
.discussione-testa h1 { margin-bottom: .4rem; }
.discussione-dati {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0 0 1rem; font-size: .84rem; color: var(--testo-tenue);
}
.discussione-corpo { line-height: 1.65; overflow-wrap: anywhere; }

.risposte { margin-top: 1.5rem; }
.risposte h2 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); margin-bottom: 1rem; }

/* La risposta della redazione si vede prima di leggerla: sotto una domanda
   su un permesso, sapere chi risponde conta quanto la risposta. */
.commento.e-ufficiale {
  border-color: var(--verde);
  border-left-width: 3px;
  background: var(--verde-pastello);
}

/* ── La Comunità vestita da forum (18/09/2026) ──────────────────────
   Prima questa pagina aveva la forma di un archivio di articoli. Tre pezzi la
   cambiano: le stanze in cima, il numero delle risposte grosso e a sinistra,
   la colonna di chi scrive accanto a ogni messaggio.

   Vale la regola del back-office e dell'app: **l'icona dice l'area, il colore
   dice lo stato**. La tinta del tondo e delle tessere e' sempre la stessa
   (pastello blu), il giallo e il verde dicono soltanto se qualcuno ha
   risposto — se le sezioni avessero un colore ciascuna, il verde di «Salute»
   e il verde di «qualcuno ha risposto» vorrebbero dire due cose diverse.

   Le classi sono nuove e non toccano `.topic`, che e' il blocco «ultime dalla
   comunita'» in home: li' sono cinque righe di assaggio, qui e' il forum. */

.forum-stanze {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.2rem;
}
.forum-stanza {
  flex: 1 1 148px;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .6rem .7rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--blu-azione);
  border-radius: var(--raggio-s);
  color: inherit;
  text-decoration: none;
}
.forum-stanza:hover { border-color: var(--blu-azione); box-shadow: var(--ombra-bassa); }
.forum-stanza.e-attiva { background: var(--blu-pastello); border-color: var(--blu-azione); }
/* Una stanza senza discussioni non si nasconde — c'e', e si puo' essere i
   primi a scriverci — ma non promette niente: bordo spento e testo tenue. */
.forum-stanza.e-vuota { border-left-color: var(--bordo); }
.forum-stanza.e-vuota .forum-stanza-nome,
.forum-stanza.e-vuota .forum-stanza-conto { color: var(--testo-tenue); }
.forum-stanza-icona { color: var(--blu-azione); line-height: 0; margin-bottom: .15rem; }
.forum-stanza-nome { font-size: .86rem; font-weight: 600; line-height: 1.3; }
.forum-stanza-conto { font-size: .72rem; color: var(--testo-tenue); }

.forum-filtri { display: flex; flex-wrap: wrap; gap: .4rem; }

.forum-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.forum-riga {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem .9rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}
.forum-riga-testo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.forum-riga-titolo { font-size: .95rem; font-weight: 600; color: inherit; line-height: 1.35; }
.forum-riga-titolo:hover { color: var(--blu-azione); }
.forum-riga-meta {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin: 0;
  font-size: .76rem; color: var(--testo-tenue);
}

/* Il conteggio delle risposte: la prima cosa che si legge di una riga.
   Zero non e' un numero neutro, e' qualcuno che sta ancora aspettando. */
.forum-conto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto;
  min-width: 62px;
  padding: .4rem .2rem;
  border-radius: var(--raggio-s);
  line-height: 1.1;
}
.forum-conto strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.forum-conto span { font-size: .66rem; }
/* Giallo di riempimento con testo scuro sopra, mai giallo di testo: il giallo
   su bianco arriva a 1,9:1 (vedi la palette in CLAUDE.md). */
.forum-conto.e-attesa { background: var(--giallo-pastello); color: var(--testo); }
.forum-conto.e-risposto { background: var(--verde-pastello); color: var(--verde); }

.forum-letture {
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 auto; min-width: 54px; line-height: 1.1;
  color: var(--testo-tenue);
}
.forum-letture strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.forum-letture span { font-size: .66rem; }

/* ── Un messaggio: chi parla a sinistra, quello che dice a destra ──── */
.messaggio {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  /* La fascia di chi scrive e' disegnata sul riquadro, non sulla colonna: una
     colonna «alta quanto la riga» si ferma dove finisce il testo e lascia un
     gradino grigio prima del fondo della carta. Cosi' invece la fascia c'e'
     sempre e per tutta l'altezza, qualunque cosa ci sia dentro. */
  background: linear-gradient(to right, var(--blu-pastello-2) 0 132px, var(--superficie) 132px);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  overflow: hidden;
}
.messaggio-apre { margin-bottom: 1.5rem; }
.messaggio-chi {
  /* `height: 100%` e non la sola distensione della griglia: senza, quando il
     messaggio e' piu' alto della colonna la fascia grigia si ferma a meta' e
     sembra un rettangolo incollato invece di una colonna. */
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1rem .7rem;
  text-align: center;
  border-right: 1px solid var(--bordo);
}
.messaggio-tondo {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blu-pastello);
  color: var(--blu-azione);
  font-size: .9rem; font-weight: 700;
}
.messaggio-nome { font-size: .82rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.messaggio-quando { font-size: .72rem; color: var(--testo-tenue); }
.messaggio-testo { padding: clamp(.9rem, 2vw, 1.4rem); min-width: 0; }
.messaggio-testo .discussione-testa h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }

/* La risposta della redazione e la propria in attesa: gli stessi due segni
   che aveva `.commento`, portati sulla forma nuova. */
/* Qui la fascia sparisce apposta: il colore del riquadro dice gia' che cos'e'
   quella risposta, e due fondi diversi nello stesso riquadro sarebbero due
   segnali per una cosa sola. */
.messaggio.e-ufficiale { border-color: var(--verde); background: var(--verde-pastello); }
.messaggio.e-ufficiale .messaggio-chi { border-right-color: var(--verde); }
.messaggio.e-in-attesa { border-color: var(--giallo); background: var(--giallo-pastello); }
.messaggio.e-in-attesa .messaggio-chi { border-right-color: var(--giallo); }

.commenti-elenco .messaggio + .messaggio { margin-top: .6rem; }

/* Il posto dove si scrive. Tratteggiato quando non ha ancora risposto
   nessuno: si vede che e' vuoto, e si vede che e' un posto. */
.risposta-zona { margin-top: 1.2rem; }
.risposta-zona.e-vuota {
  padding: clamp(.9rem, 2vw, 1.3rem);
  background: var(--superficie-2);
  border: 1px dashed var(--bordo);
  border-radius: var(--raggio-m);
}
.risposta-invito { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.55; }

@media (max-width: 560px) {
  /* A colonna sola la fascia diventa una riga in cima: il gradiente verticale
     non avrebbe piu' senso, e la riga si colora da se'. */
  .messaggio { grid-template-columns: 1fr; background: var(--superficie); }
  .messaggio-chi {
    flex-direction: row; justify-content: flex-start; text-align: left;
    padding: .6rem .8rem;
    background: var(--blu-pastello-2);
    border-right: 0; border-bottom: 1px solid var(--bordo);
  }
  .messaggio.e-ufficiale { background: var(--verde-pastello); }
  .messaggio.e-in-attesa { background: var(--giallo-pastello); }
  .messaggio.e-ufficiale .messaggio-chi,
  .messaggio.e-in-attesa .messaggio-chi { background: transparent; }
  .messaggio.e-ufficiale .messaggio-chi { border-bottom-color: var(--verde); }
  .messaggio.e-in-attesa .messaggio-chi { border-bottom-color: var(--giallo); }
  .messaggio-tondo { width: 32px; height: 32px; font-size: .78rem; }
  .forum-letture { display: none; }
}

.commento-modulo label { font-size: .88rem; font-weight: 600; }
.commento-modulo input[type="text"],
.commento-modulo select {
  width: 100%; padding: .6rem .8rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio-m);
  background: var(--superficie); color: var(--testo); font: inherit;
}

/* --- Il luogo di un articolo -------------------------------------------- */

/* Verde e non blu: il blu e' gia' la categoria, e due pastiglie dello stesso
   colore accanto si leggono come una cosa sola. Qui servono distinte, perche'
   rispondono a due domande diverse — «di che parla» e «dove vale». */
.chip-luogo {
  background: var(--verde-pastello); color: var(--verde);
  text-decoration: none;
}
a.chip-luogo:hover { background: var(--verde); color: var(--superficie); }
.chip-luogo svg { flex: 0 0 auto; }

/* La riga dei filtri di luogo, sotto quella delle categorie. */
.elenco-luoghi {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 0 0 1.4rem;
}
.elenco-luoghi-etichetta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo-tenue); margin-right: .2rem;
}

/* Il livello si vede senza doverlo leggere: la regione piena, la provincia
   con il bordo, il comune pieno e piu' scuro. E' l'unico modo per capire a
   colpo d'occhio che «Milano» compare due volte per due cose diverse. */
.chip-filtro-regione   { border-style: solid; }
.chip-filtro-provincia { border-style: dashed; }
.chip-filtro-comune    { border-color: var(--verde); }
.chip-filtro-comune:hover { border-color: var(--verde); color: var(--verde); }
.chip-filtro-comune.e-attiva {
  background: var(--verde); border-color: var(--verde); color: #fff;
}

/* Nella testata dell'articolo la pastiglia sta in riga con la categoria. */
.articolo-categoria { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }

@media (max-width: 560px) {
  .elenco-luoghi-etichetta { width: 100%; margin-bottom: .1rem; }
}

/* --- Sito chiuso per manutenzione ---------------------------------------- */

/* La vede solo lo staff. Gialla e non rossa: non e' un guasto, e' una cosa che
   qualcuno ha acceso apposta — ma va notata a ogni pagina, perche' il rischio
   non e' chiudere il sito, e' dimenticarselo chiuso. */
.fascia-manutenzione {
  position: sticky; top: 0; z-index: 60;
  padding: .55rem 1rem; text-align: center;
  background: var(--giallo-pastello); color: var(--testo);
  border-bottom: 2px solid var(--giallo);
  font-size: .9rem; line-height: 1.45;
}
.fascia-manutenzione a { color: var(--blu-azione); font-weight: 600; }

/* L'anteprima di una sezione spenta usa la stessa fascia della manutenzione —
   stesso posto, stesso giallo, stesso peso — perché dicono la stessa cosa:
   «quello che vedi non è quello che vede la gente». Cambia solo il bordo, così
   quando ci sono tutte e due si distinguono. */
.fascia-anteprima { border-bottom-color: var(--blu-azione); }


/* --- Avviso in sovrimpressione ------------------------------------------- */

/* Un riquadro solo, al centro, con lo sfondo scurito. Le misure sono strette
   apposta: un avviso che riempie lo schermo di un telefono sembra un errore
   dell'app, e la prima cosa che si cerca e' la X. */
.avviso-popup {
  width: min(30rem, calc(100vw - 2rem));
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--bordo);
  border-radius: 16px;
  background: var(--superficie);
  color: var(--testo);
  box-shadow: 0 18px 50px rgba(0, 48, 96, .22);
}
.avviso-popup::backdrop { background: rgba(14, 23, 34, .45); }

.avviso-popup-chiudi-riga { display: flex; justify-content: flex-end; margin: -.6rem -.4rem 0 0; }
.avviso-popup-chiudi {
  border: 0; background: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; padding: .1rem .35rem;
  color: var(--testo-tenue);
}
.avviso-popup-chiudi:hover { color: var(--testo); }

.avviso-popup-occhiello {
  margin: 0 0 .25rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blu-azione);
}
.avviso-popup-titolo { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.3; }
.avviso-popup-testo  { margin: 0; color: var(--testo-tenue); line-height: 1.55; }

.avviso-popup-azioni {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-top: 1.25rem;
}

/* Il colore lo da' una riga in cima, come per i riquadri: il fondo resta
   bianco perche' sotto ci va del testo da leggere. */
.avviso-popup-blu    { border-top: 4px solid var(--blu); }
.avviso-popup-giallo { border-top: 4px solid var(--giallo); }
.avviso-popup-verde  { border-top: 4px solid var(--verde); }
.avviso-popup-chiaro { border-top: 4px solid var(--bordo); }


/* --- Conversazioni ------------------------------------------------------- */

/* Due colori e due allineamenti: quello che scriviamo noi e quello che scrive
   la persona. Non e' decorazione — in un filo lungo, chi ha detto cosa e' la
   prima cosa che si cerca. */
.conversazione { display: flex; flex-direction: column; gap: .85rem; margin: 1.2rem 0 1.6rem; }

.messaggio {
  max-width: 46rem;
  padding: .85rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: 14px;
  background: var(--superficie);
}
.messaggio-staff  { border-left: 4px solid var(--blu); }
.messaggio-utente { border-left: 4px solid var(--verde); align-self: flex-end; background: var(--fondo); }

.messaggio-chi {
  margin: 0 0 .35rem;
  font-size: .82rem; font-weight: 700; color: var(--testo-tenue);
  display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
}
.messaggio-chi .tenue { font-weight: 400; }
.messaggio-testo { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }

/* ── Verifica del compenso ────────────────────────────────────────────────
   Il risultato sta sopra il modulo: chi ha appena premuto il pulsante non
   deve scorrere all'indietro il modulo che ha appena compilato per trovare
   la risposta. Le tre cifre stanno in fila e vanno a capo sul telefono. */
.bottone-largo { width: 100%; justify-content: center; }

.vc-risultato { margin: 0 0 2.4rem; }
.vc-risultato h2 { margin: 0 0 .9rem; }
.vc-risultato h3 { margin: 1.8rem 0 .5rem; font-size: 1.02rem; }

.vc-confronto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.vc-cifra { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-s); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .1rem; }
.vc-cifra .vc-etichetta { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
.vc-cifra strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.vc-cifra .aiuto { font-size: .8rem; }

/* Il colore dice l'esito, non l'area: rosso solo quando c'e' qualcosa da
   guardare, verde quando torna. */
.vc-cifra-sotto { background: var(--rosso-pastello); border-color: var(--rosso); }
.vc-cifra-sopra, .vc-cifra-in_linea { background: var(--verde-pastello); border-color: var(--verde); }

.vc-cornice { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--superficie); }
.vc-tabella { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vc-tabella td { padding: .6rem .85rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.vc-tabella tr:last-child td { border-bottom: 0; }
.vc-tabella .vc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vc-tabella .vc-totale td { background: var(--blu-pastello-2); }

.vc-elenco { margin: .4rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.vc-conversione { margin-top: .6rem; }
.vc-disclaimer { margin-top: 1.6rem; }
.vc-disclaimer p { margin: 0 0 .5rem; }
.vc-disclaimer p:last-child { margin-bottom: 0; }

.vc-gruppo { border: 0; padding: 0; margin: 0 0 1.6rem; }
.vc-gruppo legend { padding: 0; font-weight: 700; font-size: .95rem; color: var(--blu-azione); margin-bottom: .6rem; }
/* Le due domande su tredicesima e TFR stanno attaccate al campo della paga,
   dentro una cornice loro: parlano di quella cifra li', non sono un extra
   come le maggiorazioni. */
.vc-incluso {
  margin: .2rem 0 1rem; padding: .8rem .9rem;
  background: var(--giallo-pastello); border-radius: var(--raggio-s);
}
.vc-incluso-domanda { margin: 0 0 .5rem; font-weight: 600; font-size: .95rem; }
.vc-incluso .aiuto { margin: .5rem 0 0; }
.vc-scorporo p { margin: 0 0 .5rem; }
.vc-scorporo p:last-child { margin-bottom: 0; }

/* Le ore in piu'. La percentuale sta **accanto all'etichetta** e non in una
   tabella in fondo: e' la ragione per cui il numero che esce non e' un'opinione
   nostra, e in fondo alla pagina non la leggerebbe nessuno. I campi sono
   stretti perche' ci si scrive un numero di due cifre: una casella larga
   quanto la riga invita a scriverci una frase. */
.campo-ore { display: grid; grid-template-columns: 1fr 6.5rem; gap: .3rem .9rem; align-items: baseline; margin-bottom: .9rem; }
.campo-ore label { margin: 0; }
.campo-ore input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.campo-ore .aiuto { grid-column: 1 / -1; margin: 0; }
.vc-percentuale {
  display: inline-block; margin-left: .4rem; padding: .05rem .45rem;
  border-radius: 999px; background: var(--verde-pastello); color: var(--verde);
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vc-straordinari { margin: 1.2rem 0; padding: .9rem 1rem; }
.vc-straordinari h3 { margin: 0 0 .6rem; font-size: 1rem; }
.vc-straordinari .aiuto { margin: .6rem 0 0; }
.vc-straordinari .avviso { margin: .8rem 0 0; }

.vc-spunta { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; font-size: .95rem; }
.vc-spunta input { margin-top: .25rem; flex: 0 0 auto; }

.vc-fonte { margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--bordo); font-size: .9rem; }
.vc-fonte h3 { margin: 0 0 .4rem; font-size: .95rem; }
.vc-fonte p { margin: 0 0 .4rem; }

/* ── La simulazione dello stipendio ──────────────────────────────────────
   Riusa quasi tutto della verifica (`vc-`): tabelle, cornici, gruppi del
   modulo, spunte. Qui c'e' solo quello che li' non serve — le due cifre
   grandi in cima.

   Sono **due e affiancate** apposta: quello che arriva in mano e quello che
   esce di tasca sono le due facce della stessa cifra pattuita, e la
   distanza fra loro e' la cosa che la pagina deve far vedere per prima.
   Sotto i 520 px vanno una sopra l'altra, con il netto per primo: su un
   telefono si legge la prima e basta, e chi apre questa pagina la apre
   quasi sempre per quella. */
.sc-facce { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin: 0 0 .9rem; }
.sc-faccia { border: 1px solid var(--bordo); border-radius: var(--raggio-s); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.sc-faccia .vc-etichetta { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
.sc-faccia strong { font-size: 1.9rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sc-faccia .aiuto { font-size: .82rem; margin: 0; }

/* Il verde e il blu qui non dicono «bene» e «male»: dicono due punti di
   vista diversi sulla stessa cifra. Restano pastelli con il testo scuro
   sopra, come vuole la palette. */
.sc-faccia-netto { background: var(--verde-pastello); border-color: var(--verde); }
.sc-faccia-costo { background: var(--blu-pastello); border-color: var(--blu-azione); }

.sc-partenza { margin: 0 0 1.1rem; font-size: .92rem; color: var(--testo-tenue); }
.sc-natura { margin: .7rem 0 .3rem; }
.sc-tasse { margin: 1rem 0 1.6rem; }
.sc-tasse p { margin: 0 0 .5rem; }
.sc-tasse p:last-child { margin-bottom: 0; }
.sc-fonte-due { margin-top: 1rem !important; padding-top: .9rem; border-top: 1px dashed var(--bordo); }
.sc-altra { margin-top: 1.4rem; font-size: .92rem; }

/* ── L'indice dei capitoli ───────────────────────────────────────────────
   Compare solo sugli articoli lunghi. Aperto, perche' un indice chiuso e' un
   indice che nessuno apre; su schermo stretto le voci vanno su due colonne,
   cosi' nove capitoli occupano cinque righe invece di nove e non spingono
   l'articolo fuori dalla prima schermata. */
.articolo-indice { margin: 0 0 1.6rem; border: 1px solid var(--bordo); border-left: 3px solid var(--blu-azione); border-radius: var(--raggio-s); background: var(--superficie-2); }
.articolo-indice > summary { cursor: pointer; padding: .6rem .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--testo-tenue); list-style: none; }
.articolo-indice > summary::-webkit-details-marker { display: none; }
.articolo-indice > summary::after { content: " ˜4"; color: var(--blu-azione); }
.articolo-indice[open] > summary::after { content: " ˜3"; }
.articolo-indice ol { margin: 0; padding: 0 .9rem .8rem 2.2rem; font-size: .93rem; columns: 2; column-gap: 1.4rem; }
.articolo-indice li { margin-bottom: .35rem; break-inside: avoid; }
.articolo-indice a { color: var(--blu-azione); text-decoration: none; }
.articolo-indice a:hover, .articolo-indice a:focus-visible { text-decoration: underline; }
@media (max-width: 520px) { .articolo-indice ol { columns: 1; } }

/* I capitoli hanno un'ancora: quando ci si salta sopra, il titolo non deve
   finire incollato al bordo di sopra. */
.articolo-corpo h2[id] { scroll-margin-top: 1.2rem; }

/* --- Il tasto per cambiare idea sui cookie ------------------------------- */

/* Sta in fondo alla pagina Cookie, e non è una scheda come le altre: è una
   cosa da fare, non da leggere. Bordo blu pieno invece del grigio, così si
   stacca dal testo che la precede senza gridare. */
.cookie-scelta {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--blu-azione);
  border-radius: var(--raggio-m);
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  align-items: center;
}
.cookie-scelta-titolo {
  flex: 1 1 100%;
  margin: 0; font-weight: 700; color: var(--testo);
}
.cookie-scelta-stato {
  flex: 1 1 min(100%, 26rem);
  margin: 0; color: var(--testo-tenue); font-size: .92rem; line-height: 1.5;
}
.cookie-scelta .bottone { flex: 0 0 auto; }

/* --- Sportelli: l'elenco, la scheda e la richiesta di appuntamento ------- */

.filtri-sportelli {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  margin: 0 0 1.2rem;
}
.filtri-sportelli .campo { flex: 1 1 14rem; margin-bottom: 0; }
.filtri-sportelli p { margin: 0; }

.lista-sportelli { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: 1rem; }
@media (min-width: 900px) { .lista-sportelli { grid-template-columns: 1fr 1fr; } }

.carta-sportello {
  border: 1px solid var(--bordo); border-radius: var(--raggio-m);
  background: var(--superficie); padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.carta-sportello h2 { font-size: 1.15rem; margin: .1rem 0 .3rem; }
.carta-sportello h2 a { color: var(--testo); text-decoration: none; }
.carta-sportello h2 a:hover { color: var(--blu-azione); }
.carta-sportello p { margin: 0; font-size: .9rem; }
.carta-sportello-fondo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: auto !important; padding-top: .8rem;
  border-top: 1px solid var(--bordo); font-size: .88rem; color: var(--testo-tenue);
}
.carta-sportello-fondo .bottone { margin-left: auto; }

/* Le stelline sono caratteri, non immagini: si vedono anche a rete lenta e
   restano leggibili quando la pagina si ingrandisce. */
.stelle { color: var(--giallo); letter-spacing: .05em; }
.sportello-voto {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 .6rem; font-size: .95rem;
}

.sportello-scheda h2 { font-size: 1.25rem; margin: 2rem 0 .8rem; }

.tabella-scorre { overflow-x: auto; }
.listino { width: 100%; border-collapse: collapse; font-size: .95rem; }
.listino th, .listino td {
  padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--bordo);
  vertical-align: top;
}
.listino th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--testo-tenue);
}
.listino-prezzo { font-weight: 700; white-space: nowrap; }

.sedi { display: grid; gap: .9rem; }
@media (min-width: 760px) { .sedi { grid-template-columns: 1fr 1fr; } }
.sede {
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: .9rem 1rem; background: var(--fondo);
}
.sede p { margin: 0 0 .3rem; font-size: .9rem; }
.sede p:last-child { margin-bottom: 0; }

.modulo-appuntamento { margin: 1rem 0 0; }
.modulo-appuntamento .campo-etichetta { font-weight: 600; font-size: .93rem; }
.modulo-appuntamento .campo-aiuto { font-size: .85rem; color: var(--testo-tenue); }

.recensioni { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.recensione {
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: .9rem 1rem; background: var(--superficie);
}
.recensione p { margin: 0 0 .5rem; }
.recensione p:last-child { margin-bottom: 0; }
.recensione-testa { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .9rem; }
.recensione-risposta {
  margin-top: .7rem; padding: .7rem .9rem;
  background: var(--fondo); border-left: 3px solid var(--blu-azione);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
}

.riquadro-b2b { margin-top: 2.4rem; }
.riquadro-b2b h2 { font-size: 1.1rem; margin: 0 0 .5rem; }

/* Le richieste agli sportelli: nell'area personale e nella pagina di chi le
   riceve. Una lista, non una tabella: si legge sul telefono. */
.richieste { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.richiesta {
  border: 1px solid var(--bordo); border-radius: var(--raggio-m);
  background: var(--superficie); padding: 1rem 1.1rem;
}
.richiesta p { margin: 0 0 .5rem; }
.richiesta-testa { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.richiesta-persona { font-size: .92rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.richiesta-nota {
  margin: .6rem 0; padding: .7rem .9rem; background: var(--fondo);
  border-left: 3px solid var(--bordo); border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
  font-size: .95rem;
}
.richiesta-azioni { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.richiesta-azioni p { margin: 0; }
/* La pratica che aspetta una mossa di chi legge si vede da lontano. */
.richiesta-fatta { border-left: 4px solid var(--giallo); }
.richiesta-nuova { border-left: 4px solid var(--blu-azione); }

.modulo-recensione { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--bordo); }
.stelle-scelta { display: grid; gap: .3rem; margin: .5rem 0 1rem; }
.stelle-scelta label {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .35rem .5rem; border-radius: var(--raggio-s);
}
.stelle-scelta label:hover { background: var(--fondo); }
.stelle-scelta span { color: var(--giallo); letter-spacing: .05em; }
.stelle-scelta .tenue { color: var(--testo-tenue); letter-spacing: 0; }

.prezzo-diverso { margin-top: .8rem; font-size: .92rem; }
.prezzo-diverso summary { cursor: pointer; color: var(--blu-azione); }
.prezzo-diverso form { margin-top: .7rem; }

.sportello-piede { margin-top: 2rem; }

/* «Queste date te le ricordiamo noi»: il riquadro in fondo agli articoli. */
.scadenze-articolo {
  margin: 2rem 0 1.4rem; padding: 1.1rem 1.2rem;
  background: var(--blu-pastello-2, var(--fondo));
  border: 1px solid var(--bordo); border-radius: var(--raggio-m);
}
.scadenze-articolo h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.scadenze-proposte { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; }
.scadenza-proposta {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  justify-content: space-between;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); padding: .85rem 1rem;
}
.scadenza-proposta > div { flex: 1 1 16rem; min-width: 0; }
.scadenza-proposta p { margin: 0 0 .25rem; }
.scadenza-proposta form { margin: 0; }
.scadenza-quando { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.scadenza-titolo { font-size: 1rem; }

/* --- Il link per correggere un articolo ----------------------------------- */
/* Lo vede solo chi ha il permesso di scriverlo. Si smorza apposta: e' uno
   strumento di lavoro dentro una pagina che appartiene a chi legge, e non
   deve competere con il titolo. */
.articolo-modifica {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .8rem 0 0; padding: .45rem .7rem;
  background: var(--giallo-pastello); border-radius: var(--raggio-s);
  font-size: .85rem;
}
.articolo-modifica a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; color: var(--blu-azione);
}

/* ── I livelli del lavoro domestico, con dentro le mansioni ────────────
   Erano otto lettere in una tendina. Una lettera non dice a nessuno che
   lavoro e': chi va a un colloquio il livello non lo sa, ed e' proprio
   quello che viene a cercare. Ogni scheda porta i profili dell'art. 9 del
   CCNL, e si sceglie riconoscendosi in una riga. */
.sc-livelli { border: 0; padding: 0; margin: 0 0 1.2rem; }
.sc-livelli legend { font-weight: 600; padding: 0; }
.sc-livello {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid var(--bordo); border-radius: 8px;
  padding: .7rem .85rem; margin-bottom: .5rem; cursor: pointer;
  background: var(--superficie);
}
.sc-livello:hover { border-color: var(--blu-azione); }
.sc-livello-scelto { border-color: var(--blu-azione); background: var(--blu-pastello-2); }
.sc-livello input { margin-top: .25rem; flex: 0 0 auto; }
.sc-livello-corpo { display: block; }
.sc-livello-nome { display: block; font-weight: 700; font-size: 1.02rem; }
.sc-livello-chi { display: block; font-size: .92rem; color: var(--testo-tenue); margin: .1rem 0 .35rem; }
.sc-livello-profili { display: block; font-size: .92rem; }
.sc-livello-profili span { display: block; padding-left: .9rem; text-indent: -.9rem; margin-bottom: .15rem; }
.sc-livello-profili span::before { content: '· '; color: var(--blu-azione); font-weight: 700; }

/* ── La giostra della fascia «in evidenza» ─────────────────────────────
   Una tappa per volta e i pallini sotto. I pallini sono <button> veri: si
   raggiungono con il tabulatore e hanno un'etichetta letta ad alta voce. */
.giostra { position: relative; }
.giostra-pallini {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .8rem;
}
.giostra-pallino {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid var(--blu-azione); background: transparent;
  cursor: pointer;
}
.giostra-pallino-attivo { background: var(--blu-azione); }
.giostra-freccia {
  border: 1px solid var(--bordo); background: var(--superficie);
  color: var(--blu-azione); border-radius: 50%;
  width: 30px; height: 30px; line-height: 1; font-size: 1.2rem;
  cursor: pointer; padding: 0;
}
.giostra-freccia:hover, .giostra-pallino:hover { border-color: var(--blu-logo); }
.giostra-freccia:focus-visible, .giostra-pallino:focus-visible {
  outline: 2px solid var(--blu-azione); outline-offset: 2px;
}

/* ── La dicitura di uno spazio venduto ─────────────────────────────────
   Piccola ma leggibile, sopra il titolo: deve vedersi prima di leggere il
   messaggio, se no si legge un consiglio e solo dopo si scopre che era una
   pubblicita'. Niente grigio chiarissimo: una dicitura che non si legge
   vale come non averla messa. */
.riquadro-pubblicita {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--testo-tenue); margin: 0 0 .35rem;
}
.riquadro-blu .riquadro-pubblicita { color: rgba(255, 255, 255, .78); }
.riquadro-comprato { border: 1px solid var(--bordo); }

/* ── L'annuncio: uno spazio venduto, con la sua immagine ───────────────
   29/09/2026. Non e' un riquadro con un logo di fianco: e' l'immagine
   dell'inserzionista, e la larghezza gliela da' il posto in cui sta —
   striscia in home e in fondo agli articoli, rettangolo negli elenchi.
   La dicitura sta **sopra** e si legge: un annuncio che sembra un consiglio
   nostro e' il danno peggiore che possiamo fare a questo sito. */
.annuncio { margin: 1.8rem 0; }
.annuncio-dicitura {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--testo-tenue); margin: 0 0 .4rem;
}
.annuncio-telo { display: block; border-radius: var(--raggio-s); }
.annuncio picture { display: block; }
.annuncio img {
  display: block; width: 100%; height: auto;
  border-radius: var(--raggio-s);
  border: 1px solid var(--bordo);
}
/* Il tetto e' la misura con cui l'annuncio si vede: oltre, l'immagine
   verrebbe ingrandita e sgranata. */
/* Il tetto sta sul blocco, non sull'immagine: se lo si mette sull'immagine
   la dicitura «Pubblicità» resta incollata al bordo della colonna mentre
   l'annuncio e' centrato, e si legge come se fosse di un'altra cosa. */
.annuncio-largo       { max-width: 1200px; margin-inline: auto; }
.annuncio-stretto     { max-width: 300px; }
.annuncio-stretto img { max-width: 300px; }

a.annuncio-telo:hover img { border-color: var(--bordo-forte, var(--blu-azione)); }
a.annuncio-telo:focus-visible {
  outline: 2px solid var(--blu-azione); outline-offset: 3px;
}

/* ── La conversazione dentro una richiesta ──────────────────────────────
   La stessa di «I tuoi messaggi», ma stretta: qui sta dentro una riga di
   elenco e non deve diventare la cosa più grossa della pagina. Si rientra
   da un lato, così si vede che è un pezzo della richiesta e non un blocco
   nuovo. (2 ottobre 2026) */
.conversazione-stretta { margin: .7rem 0 .9rem; gap: .5rem; padding-left: .6rem; border-left: 1px solid var(--bordo); }
.conversazione-stretta .messaggio { padding: .5rem .65rem; font-size: .92rem; }
.conversazione-stretta .messaggio-chi { font-size: .76rem; }

/* ══════════════════════════════════════════════════════════════════════
   LA TUA AREA — il quadro, le cose da fare, le carte delle sezioni
   (2 ottobre 2026)

   Nasce da una segnalazione precisa: «uno entra e qui tutto è allo stesso
   livello, stessi colori stessi font», e «la mia area è rimasta anonima».
   Prima erano otto titoli dello stesso peso in colonna, e nessuno diceva come
   stava la cosa che annunciava.

   La regola del colore è quella del back-office del 16/09, e per questo qui ci
   sono due canali separati:
     · l'ICONA e la sua TINTA dicono l'AREA  (documenti, pratiche, famiglia)
     · il COLORE del numero dice lo STATO    (tardi, aspetta te, fermo)
   Senza la separazione il verde direbbe due cose insieme — «sei nella sezione
   X» e «questo è a posto» — ed è l'errore che il 7/09 ha fatto scartare la
   terza direzione del mockup dell'app.

   Il giallo resta sempre riempimento con testo scuro sopra: su bianco arriva a
   1,9:1 e come colore di testo non si legge.
   ════════════════════════════════════════════════════════════════════════ */

.area-testa { margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.area-testa h1 { margin: 0 0 .3rem; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }

/* ── Il quadro: quattro numeri, ognuno una porta ───────────────────────
   Minimo basso apposta: a 400px stanno in due colonne invece di schiacciarsi
   in una fila sola. */
.quadro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin: 0 0 1.6rem;
}

.quadro-numero {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem .8rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  /* Il filetto a sinistra è il canale dello stato: è l'unico posto, insieme al
     numero, dove il colore dice come va. */
  border-left: 3px solid var(--bordo);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.quadro-numero:hover,
.quadro-numero:focus-visible { border-color: var(--blu); }

.quadro-icona {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.quadro-icona[data-tinta=blu]    { background: var(--blu-pastello);    color: var(--blu); }
.quadro-icona[data-tinta=verde]  { background: var(--verde-pastello);  color: var(--verde); }
.quadro-icona[data-tinta=giallo] { background: var(--giallo-pastello); color: #6B5200; }
.quadro-icona[data-tinta=rosso]  { background: var(--rosso-pastello);  color: var(--rosso); }
.quadro-icona[data-tinta=neutro] { background: var(--bordo);           color: var(--testo-tenue); }
.quadro-icona .icona { width: 20px; height: 20px; }

.quadro-testo { display: flex; flex-direction: column; min-width: 0; }

.quadro-valore {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.quadro-etichetta {
  font-size: .78rem;
  color: var(--testo-tenue);
  margin-top: .2rem;
  line-height: 1.3;
}

/* Quattro stati e nient'altro, come in back-office. */
.quadro-numero.e-zero   { border-left-color: var(--bordo); }
.quadro-numero.e-zero   .quadro-valore { color: var(--testo-tenue); }
.quadro-numero.e-fermo  { border-left-color: var(--blu); }
.quadro-numero.e-fermo  .quadro-valore { color: var(--blu); }
.quadro-numero.e-presto { border-left-color: #FCC000; }
.quadro-numero.e-presto .quadro-valore { color: #8A6A00; }
.quadro-numero.e-tardi  { border-left-color: var(--rosso); }
.quadro-numero.e-tardi  .quadro-valore { color: var(--rosso); }

/* ── Da fare, in ordine di urgenza ────────────────────────────────────
   Documenti, messaggi, appuntamenti e pratiche in una lista sola: quello che
   aspetta una persona non è diviso come il nostro menu. */
.da-fare { margin-bottom: 1.8rem; }

.da-fare-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.da-fare-riga {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: .8rem;
  align-items: center;
  padding: .7rem .85rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--bordo);
  border-radius: 12px;
}

.da-fare-riga.e-tardi       { border-left-color: var(--rosso); }
.da-fare-riga.e-presto      { border-left-color: #FCC000; }
.da-fare-riga.e-quando_vuoi { border-left-color: var(--bordo); }

.da-fare-quando {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--testo-tenue);
}
.da-fare-riga.e-tardi  .da-fare-quando { color: var(--rosso); }
.da-fare-riga.e-presto .da-fare-quando { color: #8A6A00; }

.da-fare-cosa { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.da-fare-cosa strong { font-size: .98rem; }
.da-fare-cosa .tenue { font-size: .84rem; }

.bottone-piccolo { padding: .3rem .7rem; font-size: .85rem; }

.tutto-a-posto {
  margin: 0;
  padding: .9rem 1rem;
  background: var(--verde-pastello);
  border-radius: 12px;
  color: var(--testo);
  line-height: 1.5;
}

/* ── Le carte delle sezioni ───────────────────────────────────────────
   Una per sezione, con l'icona della sua area e una riga che dice come sta. */
.area-carte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .6rem;
  margin: 0 0 1.8rem;
}

.area-carta {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem .85rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.area-carta:hover,
.area-carta:focus-visible { border-color: var(--blu); }

.area-carta-icona {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.area-carta[data-tinta=blu]    .area-carta-icona { background: var(--blu-pastello);    color: var(--blu); }
.area-carta[data-tinta=verde]  .area-carta-icona { background: var(--verde-pastello);  color: var(--verde); }
.area-carta[data-tinta=giallo] .area-carta-icona { background: var(--giallo-pastello); color: #6B5200; }
.area-carta[data-tinta=rosso]  .area-carta-icona { background: var(--rosso-pastello);  color: var(--rosso); }
.area-carta[data-tinta=neutro] .area-carta-icona { background: var(--bordo);           color: var(--testo-tenue); }

.area-carta-testo { display: flex; flex-direction: column; min-width: 0; gap: .15rem; }
.area-carta-titolo { font-weight: 700; font-size: .98rem; }
.area-carta-riga {
  font-size: .84rem;
  color: var(--testo-tenue);
  line-height: 1.35;
  /* Un titolo di pratica lungo non deve allargare la carta: va a capo. */
  overflow-wrap: anywhere;
}

/* ── Quello che adesso non si può fare ────────────────────────────────
   In grigio e in fondo: è un'informazione, non un allarme. Taciuta era un
   buco — uno cercava la sezione, non la trovava e concludeva che il sito è
   rotto. */
.area-spente { margin: 0 0 1.8rem; }
.area-spente ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.area-spente li {
  font-size: .88rem;
  color: var(--testo-tenue);
  line-height: 1.45;
  padding-left: .8rem;
  border-left: 2px solid var(--bordo);
}
.area-spente li strong { color: var(--testo); }

.area-cancella { margin-top: 2rem; }

@media (max-width: 520px) {
  /* Su un telefono la colonna del «quando» mangia la riga: va sopra. */
  .da-fare-riga { grid-template-columns: 1fr auto; }
  .da-fare-quando { grid-column: 1 / -1; }
}