/* ═══════════════════════════════════════════════════════════
   Pagine legali (termini, privacy, cookie). Si appoggia a style.css:
   qui c'e' solo la tipografia del testo lungo, l'indice, le schede
   dei trattamenti e le tabelle che sul telefono diventano schede.
   ═══════════════════════════════════════════════════════════ */
.leg-hero{padding:clamp(40px,7vw,80px) 0 clamp(24px,3.5vw,40px)}
.leg-hero h1{font-size:clamp(34px,5vw,56px)}
.leg-agg{margin-top:16px;font-size:14px;color:var(--ink-soft)}
.leg-agg b{color:var(--ink)}
.leg-corpo{padding:0 0 clamp(48px,7vw,90px)}
.leg-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}

/* indice: di lato sul computer, in cima (e chiuso) sul telefono */
.leg-indice{position:sticky;top:104px;max-height:calc(100vh - 124px);overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 12px;box-shadow:var(--shadow-card);font-size:14px}
.leg-indice summary{cursor:pointer;list-style:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--purple);padding:2px 0 8px;position:relative}
.leg-indice summary::-webkit-details-marker{display:none}
.leg-indice summary::after{content:"+";position:absolute;right:0;top:-4px;font-size:20px;transition:transform .25s}
.leg-indice[open] summary::after{transform:rotate(45deg)}
.leg-indice ol{list-style:none}
.leg-indice a{display:block;padding:5px 0;color:var(--ink-soft);line-height:1.35}
.leg-indice a:hover{color:var(--ink)}
@media(max-width:920px){.leg-grid{grid-template-columns:1fr;gap:26px}.leg-indice{position:static;max-height:none}}

/* il testo */
.legale{max-width:76ch;min-width:0}
.legale h2{font-size:clamp(24px,2.6vw,32px);margin:52px 0 14px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:90px}
.legale > h2:first-of-type{margin-top:36px}
.legale h3{margin:28px 0 10px;font-size:clamp(18px,1.5vw,21px);scroll-margin-top:90px}
.legale p{margin:0 0 14px;color:var(--ink-soft)}
.legale b,.legale strong{color:var(--ink)}
.legale ul,.legale ol{margin:0 0 16px;padding-left:22px;color:var(--ink-soft)}
.legale li{margin-bottom:8px;padding-left:4px}
.legale li::marker{color:var(--purple);font-weight:600}
.legale a:not(.btn){text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.legale code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.84em;background:var(--lav);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere;color:var(--ink)}

/* riquadro "in breve" e riquadro dei dati del titolare */
.leg-breve{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--magenta);border-radius:12px;
  padding:20px 22px 8px;margin:0 0 8px;box-shadow:var(--shadow-card)}
.leg-breve > p:first-child{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--purple);margin-bottom:10px}

/* una scheda per trattamento: righe etichetta / testo */
.leg-scheda{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 12px;margin:0 0 18px;box-shadow:var(--shadow-card)}
.leg-scheda h3{margin-top:0}
.leg-scheda dl{display:grid;grid-template-columns:160px minmax(0,1fr);gap:10px 18px;margin:0 0 8px;font-size:15.5px;line-height:1.6}
.leg-scheda dt{font-weight:600;color:var(--ink)}
.leg-scheda dd{color:var(--ink-soft);margin:0;min-width:0}
.leg-scheda dd p{margin:0 0 8px;font-size:inherit}
.leg-scheda dd ul{margin:0 0 6px}
@media(max-width:600px){.leg-scheda{padding:18px 16px 10px}.leg-scheda dl{grid-template-columns:1fr;gap:0}.leg-scheda dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}.leg-scheda dd{margin-bottom:12px}}

/* tabelle: sul telefono ogni riga diventa una scheda con le etichette */
.leg-tab{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;margin:0 0 20px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card)}
.leg-tab th,.leg-tab td{text-align:left;vertical-align:top;padding:11px 13px;border-bottom:1px solid var(--line)}
.leg-tab tr:last-child td{border-bottom:0}
.leg-tab th{background:var(--lav);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.leg-tab td{color:var(--ink-soft)}
.leg-tab td:first-child{color:var(--ink);font-weight:600}
@media(max-width:700px){
  .leg-tab,.leg-tab tbody,.leg-tab tr,.leg-tab td{display:block;width:100%}
  .leg-tab thead{display:none}
  .leg-tab tr{border-bottom:1px solid var(--line);padding:10px 0}
  .leg-tab tr:last-child{border-bottom:0}
  .leg-tab td{border:0;padding:3px 16px}
  .leg-tab td::before{content:attr(data-t);display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
}

/* il modulo di recesso, da copiare */
.leg-modulo{background:var(--lav);border:1px dashed rgba(168,24,24,.35);border-radius:12px;padding:18px 20px 6px;margin:0 0 18px;font-size:15.5px}
.leg-modulo p{color:var(--ink)}

/* in fondo: le altre pagine legali */
.leg-altre{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
@media(max-width:560px){.leg-altre .btn{width:100%}}