/* ==========================================================================
   Informativa privacy e informativa cookie — linguaggio v3 della home
   (mockup di Domenico, 30/09/2026). Testata semplice come le pagine interne,
   indice in una card; il testo in card calde sulla fascia, un punto per card.
   Solo token di style.css · misure desktop in calc(N * var(--u)) · nessuna
   animazione oltre a .rivela (una volta).
   ========================================================================== */

.pagina-legale main p,.pagina-legale main li,.pagina-legale main td{text-wrap:pretty}

/* ---------- 1 · Testata ---------- */
.legale-testata{display:grid;grid-template-columns:minmax(0,1fr) calc(440 * var(--u));gap:calc(80 * var(--u));align-items:center;
  padding-top:calc(70 * var(--u));padding-bottom:calc(70 * var(--u))}
.legale-testata .pagina-testata__testo{max-width:calc(700 * var(--u))}
.legale-testata .pagina-testata__sotto+.pagina-testata__sotto{margin-top:calc(12 * var(--u))}
.legale-rif{display:grid;gap:2px;margin-top:calc(26 * var(--u));padding-top:calc(18 * var(--u));border-top:1px solid var(--bordo);max-width:calc(560 * var(--u))}
.legale-rif p{font-size:max(14px,calc(14.5 * var(--u)));line-height:1.6;color:var(--testo-tenue)}

/* indice: card calda, voci separate da una riga, numeri in corsivo verde */
.legale-indice{position:relative;z-index:2;background:var(--carta);border-radius:calc(18 * var(--u));box-shadow:var(--ombra);
  padding:calc(28 * var(--u)) calc(32 * var(--u)) calc(18 * var(--u))}
.legale-indice ol,.legale-indice ul{margin-top:calc(10 * var(--u))}
.legale-indice li+li{border-top:1px solid var(--bordo)}
.legale-indice a{display:flex;align-items:baseline;gap:calc(14 * var(--u));padding:calc(9 * var(--u)) 0;text-decoration:none;
  font-family:var(--titoli-testo);font-weight:430;font-size:max(15.5px,calc(17 * var(--u)));line-height:1.3;color:var(--inchiostro);transition:color .2s ease}
.legale-indice a:hover{color:var(--verde);text-decoration:underline;text-decoration-color:rgba(138,90,70,.35);text-underline-offset:4px}
.legale-indice__n{flex:none;min-width:1.3em;font-family:var(--titoli);font-style:italic;font-size:1.08em;color:var(--verde)}
/* senza numeri (pagina cookie): il segno a forma di microrganismo di .elenco */
.legale-indice ul a{position:relative;padding-left:26px}
.legale-indice ul a::before{content:"";position:absolute;left:3px;top:calc(9 * var(--u) + .5em);width:12px;height:7px;border-radius:5px;background:linear-gradient(#D9BFAE,#A6725D);transform:rotate(-25deg)}

/* ---------- 2 · Testo ---------- */
.legale-corpo{padding-top:calc(72 * var(--u));padding-bottom:calc(96 * var(--u))}
.legale-corpo .legale{display:grid;gap:calc(16 * var(--u));max-width:calc(880 * var(--u));margin:0 auto}

.legale .avviso-bozza{display:flex;align-items:flex-start;gap:12px;margin:0 0 calc(4 * var(--u));font-size:max(14.5px,calc(15 * var(--u)));line-height:1.55}
.legale .avviso-bozza .icona{width:20px;height:20px;margin-top:2px;color:var(--verde)}

.legale-punto{position:relative;background:var(--carta);border-radius:calc(18 * var(--u));box-shadow:var(--ombra);
  padding:calc(38 * var(--u)) calc(52 * var(--u)) calc(40 * var(--u))}
.legale-punto>*+*{margin-top:calc(14 * var(--u))}
.legale-punto h2{display:flex;align-items:center;gap:calc(16 * var(--u));margin:0 0 calc(22 * var(--u));scroll-margin-top:calc(38 * var(--u) + 20px);
  font-family:var(--titoli);font-weight:420;font-size:max(24px,calc(30 * var(--u)));line-height:1.12;color:var(--inchiostro)}
.legale-punto h2+*{margin-top:0}
.legale-punto__n{flex:none;display:grid;place-items:center;width:calc(48 * var(--u));height:calc(48 * var(--u));min-width:40px;min-height:40px;border-radius:50%;
  background:var(--verde-velo);font-family:var(--titoli);font-style:italic;font-size:max(20px,calc(23 * var(--u)));line-height:1;color:var(--verde)}

.legale-punto p,.legale-punto li{max-width:70ch;font-size:max(16px,calc(17 * var(--u)));line-height:1.7;color:var(--testo)}
.legale-punto p+p{margin-top:calc(12 * var(--u))}
.legale-punto strong{color:var(--inchiostro);font-weight:600}
.legale-punto a{color:var(--verde-scuro);text-decoration:underline;text-decoration-color:rgba(138,90,70,.35);text-decoration-thickness:1px;text-underline-offset:3px;
  overflow-wrap:anywhere;transition:text-decoration-color .2s ease}
.legale-punto a:hover{text-decoration-color:var(--verde)}
.legale-punto a[href^="tel:"]{white-space:nowrap;overflow-wrap:normal}  /* il numero non si spezza a metà */

/* elenchi: il segno a forma di microrganismo, come .elenco della home */
.legale-punto ul{display:grid;gap:calc(6 * var(--u));list-style:none;margin-left:0;margin-right:0;margin-bottom:0;padding:0}
.legale-punto li+li{margin-top:0}
.legale-punto ul li{position:relative;padding-left:26px}
.legale-punto ul li::before{content:"";position:absolute;left:3px;top:.72em;width:12px;height:7px;border-radius:5px;background:linear-gradient(#D9BFAE,#A6725D);transform:rotate(-25deg)}

/* la frase sui dati sulla salute: in evidenza, è quella che conta */
.legale-nota{padding:calc(14 * var(--u)) calc(18 * var(--u));border-left:2px solid var(--verde);border-radius:0 calc(10 * var(--u)) calc(10 * var(--u)) 0;background:var(--verde-velo)}
.legale-punto .legale-nota{max-width:none}

.legale-punto code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.86em;padding:1px 7px;border-radius:4px;background:var(--verde-velo);color:var(--verde-scuro);overflow-wrap:anywhere}

/* tabelle: una scheda chiara dentro la card */
.legale-punto table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--bordo);border-radius:calc(12 * var(--u));overflow:hidden;background:var(--crema);font-size:max(15px,calc(15.5 * var(--u)))}
.legale-punto th,.legale-punto td{text-align:left;vertical-align:top;padding:calc(14 * var(--u)) calc(18 * var(--u))}
.legale-punto thead th{background:var(--verde-velo);font-family:var(--testi);font-weight:600;font-size:max(13.5px,calc(14 * var(--u)));letter-spacing:.02em;line-height:1.35;color:var(--verde-scuro);
  border-bottom:1px solid var(--bordo-forte);white-space:nowrap}
.legale-punto td{font-size:max(15px,calc(15.5 * var(--u)));line-height:1.6;color:var(--testo);border-bottom:1px solid var(--bordo)}
.legale-punto th+th,.legale-punto td+td{border-left:1px solid var(--bordo)}
.legale-punto tbody tr:last-child td{border-bottom:0}
.legale-punto table+p{margin-top:calc(18 * var(--u))}
/* cookie: quattro colonne, «Di chi» stretta */
.legale-tabella--quattro td:nth-child(2){white-space:nowrap}

/* ---------- Adattamenti ---------- */
@media (max-width:1100px){
  .legale-testata{grid-template-columns:1fr;gap:34px}
  .legale-testata .pagina-testata__testo{max-width:680px}
  .legale-indice{max-width:640px}
  .legale-corpo .legale{max-width:820px}
}
@media (max-width:900px){
  .legale-punto{padding:32px 34px 34px}
}
@media (max-width:760px){
  .legale-testata{padding-top:40px;padding-bottom:40px;gap:28px}
  .legale-testata h1{font-size:40px}
  .legale-rif{margin-top:20px;padding-top:14px}
  .legale-rif p{font-size:14px}
  .legale-indice{padding:22px 20px 12px;border-radius:16px}
  .legale-indice a{font-size:16px;padding:9px 0}
  .legale-indice ul a::before{top:calc(9px + .5em)}

  /* il testo prende tutta la larghezza: card da bordo a bordo, separate da una striscia di fascia */
  .legale-corpo{padding:28px 0 48px}
  .legale-corpo .legale{gap:10px}
  .legale .avviso-bozza{margin:0 20px 6px;font-size:14.5px}
  .legale-punto{border-radius:0;box-shadow:none;padding:28px 20px 30px}
  .legale-punto h2{gap:12px;margin-bottom:16px;font-size:25px;scroll-margin-top:20px}
  .legale-punto__n{width:40px;height:40px;font-size:20px}
  .legale-punto p,.legale-punto li{font-size:16px;line-height:1.65}
  .legale-punto ul li{padding-left:24px}
  /* il riquadro «Dati sulla salute» sborda un poco nel margine della card: il testo resta largo come gli altri paragrafi (3 righe, non 4) */
  .legale-punto .legale-nota{margin-left:-10px;margin-right:-10px;padding:12px 10px 12px 12px}
  /* frase di legge lunga (Data Privacy Framework): un punto più piccola, così sta in 3 righe senza toccare il testo */
  .legale-punto .legale-lungo{font-size:15px}

  /* su telefono le tabelle diventano schede, una voce sotto l'altra (mai da far scorrere di lato) */
  .legale-punto table{border:0;border-radius:0;background:none;overflow:visible}
  .legale-punto table,.legale-punto tbody,.legale-punto tr,.legale-punto td{display:block;width:100%}
  .legale-punto thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legale-punto tr{background:var(--crema);border:1px solid var(--bordo);border-radius:10px;padding:8px 14px;margin-bottom:10px}
  .legale-punto td{border:0!important;padding:6px 0;font-size:15.5px}
  .legale-punto td::before{content:attr(data-etichetta);display:block;margin-bottom:1px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--verde-occhiello)}
  .legale-tabella--quattro td:nth-child(2){white-space:normal}
}