/* ═══════════════════════════════════════════════════════════════════════
   Il foglio di stile dei documenti — informativa sulla privacy e termini di
   servizio — condiviso dalle cinque lingue (/privacy, /en/privacy, …).

   ⚠️ Era dentro privacy.html e termini.html, identico riga per riga. È uscito
   il 05/10/2026 quando i documenti sono diventati dieci: dieci copie dello
   stesso stile divergono al primo ritocco. La vetrina ha il suo foglio
   (stile.css), e le variabili di colore qui sono una seconda copia delle
   sue: se cambiano là, cambiano anche qui.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Variabili colore: chiaro di serie, scuro sotto ---------- */
/* Stesse variabili di index.html, cosi' i due documenti restano coerenti
   nei due temi senza duplicare scelte di colore. */
:root {
  --colore-primario: #006D7A;      /* ottanio, colore del marchio */
  --colore-su-primario: #ffffff;
  --colore-sfondo: #ffffff;
  --colore-superficie: #f3f6f7;
  --colore-bordo: #dfe6e8;
  --colore-testo: #16232a;
  --colore-testo-attenuato: #52646c;
  --ombra-scheda: 0 1px 2px rgba(16, 32, 38, 0.08);
  --altezza-nav: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --colore-primario: #5fd3e0;
    --colore-su-primario: #00363d;
    --colore-sfondo: #10171a;
    --colore-superficie: #182226;
    --colore-bordo: #2b383d;
    --colore-testo: #eaf1f2;
    --colore-testo-attenuato: #a9bac0;
    --ombra-scheda: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* mai scorrimento orizzontale, nemmeno per arrotondamenti */
}

body {
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

a { color: var(--colore-primario); }

/* Stessa larghezza "stretta" usata in index.html per i blocchi di testo:
   qui il documento e' lungo, quindi la colonna resta stretta su tutta la
   pagina invece di allargarsi come le sezioni con la griglia. */
.contenitore { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.contenitore-stretto { max-width: 1000px; }
/* ⚠️ **Solo verticale, e la scorciatoia `padding` qui è vietata.**
   Questo `div` porta anche `.contenitore`, che dà i 20px ai lati. Le due
   classi hanno la stessa specificità, quindi `padding: 48px 0 64px` vinceva
   e **riazzerava i lati**: sul desktop non si notava — il `max-width` tiene
   comunque il testo lontano dal bordo — ma sul telefono l'informativa
   andava a sbattere contro il vetro, lettere tagliate comprese. */
.pagina-documento { padding-top: 48px; padding-bottom: 64px; }

@media (min-width: 900px) {
  .pagina-documento { padding-top: 72px; padding-bottom: 96px; }
}

/* ---------- Barra di navigazione ---------- */
.barra-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--colore-sfondo);
  border-bottom: 1px solid var(--colore-bordo);
}

.barra-nav-interno {
  display: flex;
  align-items: center;
  justify-content: space-between; /* il marchio a sinistra, le lingue a destra */
  height: var(--altezza-nav);
}

.marchio-nav {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--colore-testo-attenuato);
}

.marchio-nav .c-piena { font-weight: 700; color: var(--colore-primario); }
.marchio-nav .rino { font-weight: 900; font-style: italic; color: var(--colore-primario); }

/* ---------- Titoli del documento ---------- */
h1 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.sottotitolo-pagina {
  color: var(--colore-testo-attenuato);
  font-size: 1.05rem;
  margin: 0 0 28px;
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--colore-primario);
  margin: 44px 0 12px;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 20px 0 6px;
}

p { margin: 0 0 14px; }

ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

li { margin-bottom: 8px; }

/* ---------- Riquadro in apertura: il punto di forza del documento ---------- */
.riquadro-forza {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-left: 4px solid var(--colore-primario);
  border-radius: 14px;
  box-shadow: var(--ombra-scheda);
  padding: 22px 24px;
  margin-bottom: 36px;
}

.riquadro-forza p {
  margin: 0;
  font-size: 1.05rem;
}

/* ---------- Voci dei destinatari dei dati ---------- */
.voce-destinatario {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 14px;
  box-shadow: var(--ombra-scheda);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.voce-destinatario .nome {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.voce-destinatario p { margin: 0; font-size: 0.95rem; color: var(--colore-testo-attenuato); }

hr {
  border: none;
  border-top: 1px solid var(--colore-bordo);
  margin: 40px 0;
}

.aggiornamento {
  color: var(--colore-testo-attenuato);
  font-size: 0.9rem;
}

.torna-home {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
}


/* ---------- Blocchi del documento: titolo a sinistra, testo a destra ------
   ⚠️ Prima era una colonna stretta centrata: su un monitor largo restavano
   due dita di testo in mezzo al vuoto, e la pagina non somigliava piu' al
   resto del sito. Ora ogni sezione affianca il proprio titolo, la larghezza
   e' occupata e la riga di lettura resta corta perche' e' la colonna del
   testo a essere stretta, non la pagina.
   ⚠️ Niente `span` sulle righe: le righe si contano, non si abbondano —
   su index.html un `span 99` aveva prodotto duemila pixel di bianco. */
.blocco-doc {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 16px 56px;
  grid-auto-rows: min-content;
  align-items: start;
  margin-bottom: 40px;
}
.blocco-doc > h2 { grid-column: 1; grid-row: 1; margin: 0; }
.blocco-doc > *:not(h2) { grid-column: 2; }
.blocco-doc h3:first-of-type { margin-top: 0; }

@media (max-width: 860px) {
  .blocco-doc { display: block; margin-bottom: 32px; }
  .blocco-doc > h2 { margin-bottom: 12px; }
}

/* ---------- Piè di pagina ---------- */
footer {
  border-top: 1px solid var(--colore-bordo);
  padding: 28px 20px 44px;
  text-align: center;
  color: var(--colore-testo-attenuato);
  font-size: 0.85rem;
}

/* ---------- Le lingue ----------
   ⚠️ Restano visibili anche sul telefono, a differenza dei link: chi arriva
   da un gruppo tedesco su una pagina italiana deve trovare la sua lingua
   senza aprire niente. Sono sigle e non nomi («DE», non «Deutsch»): cinque
   nomi per esteso non stanno accanto al marchio su 360 px.
   Nessun reindirizzamento automatico sulla lingua del browser: Google
   legge le pagine da un indirizzo americano, e chi viene rimandato in base
   all'intestazione vede una pagina e indicizza l'altra. Ognuno sceglie qui,
   e `hreflang` nell'intestazione dice ai motori quale pagina è per chi. */
.lingue-nav {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lingue-nav a {
  display: block;
  padding: 6px 7px;
  border-radius: 7px;
  color: var(--colore-testo-attenuato);
  text-decoration: none;
}

.lingue-nav a:hover { color: var(--colore-primario); background: var(--colore-superficie); }

/* La lingua in cui si sta leggendo: non è un link, è uno stato. */
.lingue-nav [aria-current="page"] {
  color: var(--colore-primario);
  background: var(--colore-bordo); /* ripiego per i browser senza color-mix() */
  background: color-mix(in srgb, var(--colore-primario) 14%, transparent);
}