/* ═══════════════════════════════════════════════════════════════════════════
   I DOCUMENTI: informativa, condizioni, nomina a responsabile.
   ═══════════════════════════════════════════════════════════════════════════
   Sono pagine che la gente non vuole leggere, e proprio per questo vanno
   composte meglio del resto del sito, non peggio. Tre scelte deliberate:

   - UNA COLONNA STRETTA. 68 caratteri circa. Un documento legale impaginato a
     tutta larghezza si perde riga dopo riga, ed e' cosi' che nascono le
     informative che nessuno finisce.
   - L'INDICE E' A FIANCO, e segue. Su un testo di venti paragrafi il problema
     non e' leggerlo dall'inizio: e' ritrovare il punto che serve. Su telefono
     torna in cima, chiuso.
   - IL RIASSUNTO IN CIMA, in chiaro. Non sostituisce il testo — la parte che
     vale e' sotto — ma chi legge solo quello deve comunque uscirne sapendo le
     tre cose importanti. Un'informativa che si capisce solo se sei un avvocato
     e' una che non informa, e il GDPR chiede il contrario.
   ═══════════════════════════════════════════════════════════════════════════ */

.lg-corpo { background: var(--carta, #fff); }

.lg-testata {
  background: var(--inchiostro, #16211f);
  color: #fff;
  padding: 26px 0 40px;
}
.lg-testata .marchio img { height: 28px; filter: brightness(0) invert(1); opacity: .92; }
.lg-testata h1 {
  font-family: var(--titolo, sans-serif);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.12; margin: 26px 0 10px; text-wrap: balance;
}
.lg-testata .lg-quando { margin: 0; color: rgba(255,255,255,.62); font-size: 14px; }

.lg-guscio {
  display: grid; grid-template-columns: 240px minmax(0, 68ch);
  gap: 56px; justify-content: center;
  padding: 46px 0 80px;
}
@media (max-width: 1000px) {
  .lg-guscio { grid-template-columns: minmax(0, 68ch); gap: 0; }
}

/* ── L'indice ────────────────────────────────────────────────────────────── */
.lg-indice { position: sticky; top: 22px; align-self: start; font-size: 14px; line-height: 1.45; }
.lg-indice h2 {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue, #6f7b78); margin: 0 0 12px; font-weight: 700;
}
.lg-indice ol { list-style: none; margin: 0; padding: 0; counter-reset: v; }
.lg-indice li { counter-increment: v; margin: 0 0 9px; }
.lg-indice a {
  display: block; color: var(--inchiostro-2, #3f4b48); text-decoration: none;
  padding-left: 26px; position: relative;
}
.lg-indice a::before {
  content: counter(v) "."; position: absolute; left: 0;
  color: var(--tenue, #6f7b78); font-variant-numeric: tabular-nums;
}
.lg-indice a:hover { color: var(--verde-cupo, #279683); }
@media (max-width: 1000px) {
  .lg-indice {
    position: static; margin: 0 0 34px; padding: 18px 20px;
    border: 1px solid var(--bordo, #e6e4dd); border-radius: 14px; background: var(--crema, #faf8f3);
  }
  .lg-indice ol { columns: 2; column-gap: 24px; }
  .lg-indice li { break-inside: avoid; }
}

/* ── Il testo ────────────────────────────────────────────────────────────── */
.lg-testo { font-size: 16.5px; line-height: 1.72; color: var(--inchiostro-2, #3f4b48); }
.lg-testo h2 {
  font-family: var(--titolo, sans-serif); font-size: 23px; line-height: 1.25;
  color: var(--inchiostro, #16211f); margin: 46px 0 14px; scroll-margin-top: 22px;
  text-wrap: balance;
}
.lg-testo h2:first-child { margin-top: 0; }
.lg-testo h3 {
  font-size: 16.5px; color: var(--inchiostro, #16211f); margin: 26px 0 8px; font-weight: 700;
}
.lg-testo p { margin: 0 0 15px; }
.lg-testo ul { margin: 0 0 15px; padding-left: 20px; }
.lg-testo li { margin: 0 0 8px; }
.lg-testo a { color: var(--verde-cupo, #279683); }
.lg-testo strong { color: var(--inchiostro, #16211f); }

/* Il riassunto in cima: si legge prima, e si vede che e' un'altra cosa. */
.lg-sunto {
  border-left: 3px solid var(--verde, #33B5A5);
  background: var(--verde-nebbia, #f2fbf9);
  border-radius: 0 14px 14px 0;
  padding: 20px 22px; margin: 0 0 34px;
}
.lg-sunto h2 {
  font-family: inherit; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--verde-scuro, #1c6d60); margin: 0 0 10px; font-weight: 700;
}
.lg-sunto p:last-child, .lg-sunto ul:last-child { margin-bottom: 0; }

/* Una riga che vale la pena non perdere in mezzo al resto. */
.lg-nota {
  border: 1px solid var(--bordo, #e6e4dd); border-radius: 12px;
  background: var(--crema, #faf8f3); padding: 15px 18px; margin: 0 0 15px;
  font-size: 15.5px;
}

/* ── Le tabelle: cosa raccogliamo, perche', per quanto ───────────────────── */
.lg-tabella { overflow-x: auto; margin: 0 0 22px; }
.lg-tabella table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.55; }
.lg-tabella th, .lg-tabella td {
  text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--bordo, #e6e4dd);
}
.lg-tabella th {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tenue, #6f7b78); font-weight: 700; border-bottom-width: 1.5px;
}
.lg-tabella td:first-child { color: var(--inchiostro, #16211f); font-weight: 600; }
/* La spiegazione sotto il nome del dato: stesso posto, peso minore. */
.lg-sotto { display: block; margin-top: 2px; font-weight: 400; color: var(--inchiostro-2, #3f4b48); }
.lg-tabella tr:last-child td { border-bottom: 0; }

/* Su telefono una tabella a quattro colonne non ci sta: diventa un elenco di
   schede, con l'intestazione davanti a ogni valore. */
@media (max-width: 620px) {
  .lg-tabella thead { display: none; }
  .lg-tabella tr {
    display: block; padding: 14px 0; border-bottom: 1px solid var(--bordo, #e6e4dd);
  }
  /* L'etichetta va SOPRA il valore, non a fianco. A fianco serviva una griglia
     a due colonne, e una cella con due righe di testo — il dato e la sua
     spiegazione — si spezzava mettendo la seconda riga sotto l'etichetta
     invece che sotto la prima. Impilate non c'e' niente da incolonnare. */
  .lg-tabella td { display: block; padding: 2px 0 9px; border: 0; }
  .lg-tabella td:last-child { padding-bottom: 0; }
  .lg-tabella td::before {
    content: attr(data-th); display: block; margin-bottom: 1px;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tenue, #6f7b78); font-weight: 700;
  }
}

/* ── Stampa ─────────────────────────────────────────────────────────────────
   Questi documenti si stampano davvero: la nomina a responsabile finisce in un
   raccoglitore, e chi la archivia deve avere il testo, non il menu. */
@media print {
  .lg-testata { background: #fff; color: #000; padding: 0 0 18px; }
  .lg-testata .marchio img { filter: none; }
  .lg-testata h1 { font-size: 26px; margin: 14px 0 6px; }
  .lg-testata .lg-quando { color: #444; }
  .lg-indice, .piede, .piede-legale, .os-ck, .os-ck-riapri, .cta-fissa, #testata { display: none !important; }
  .lg-guscio { display: block; padding: 0; }
  .lg-testo { font-size: 11pt; line-height: 1.5; color: #000; }
  .lg-testo h2 { font-size: 14pt; margin: 20px 0 8px; page-break-after: avoid; }
  .lg-testo a { color: #000; text-decoration: underline; }
  .lg-sunto, .lg-nota { background: none; border: 1px solid #999; border-radius: 0; }
  .lg-tabella table { font-size: 9.5pt; }
  .lg-tabella tr { page-break-inside: avoid; }
}