/* ==========================================================================
   Duo Motion, pagina Privacy e cookie (privacy.html)
   ========================================================================== */

.legal-head{padding-block:calc(var(--nav-h) + clamp(70px,12vh,140px)) clamp(40px,6vh,70px)}
.legal-head .title{margin:24px 0 26px;font-size:clamp(52px,9vw,140px)}
.legal-date{margin-top:24px;font:600 12px/1.4 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}

.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start;padding-bottom:clamp(90px,14vh,160px)}

/* indice laterale: la voce della sezione che stai leggendo si accende */
.legal-toc{position:sticky;top:calc(var(--nav-h) + 24px)}
.legal-toc-t{display:block;margin-bottom:18px;font:600 12px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.legal-toc a{position:relative;display:block;padding:8px 0 8px 18px;font-size:14.5px;line-height:1.4;color:var(--text-secondary);transition:color .3s,transform .5s var(--ease-out)}
.legal-toc a::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--grad);transform:scaleY(0);transition:transform .5s var(--ease-out)}
.legal-toc a:hover,.legal-toc a[aria-current="true"]{color:#fff}
.legal-toc a[aria-current="true"]{transform:translateX(4px)}
.legal-toc a:hover::before,.legal-toc a[aria-current="true"]::before{transform:none}

.legal-body{max-width:760px}
.legal-body section{margin-bottom:clamp(56px,8vh,88px);scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal-body h2{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;font:800 clamp(26px,3vw,38px)/1.12 var(--f-display);letter-spacing:-.02em}
.legal-body h2 .n{flex:none;font:600 12px/1 var(--f-label);letter-spacing:.14em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.legal-body h3{margin:26px 0 8px;font:700 17px/1.3 var(--f-display);color:#fff}
.legal-body p,.legal-body li{font-size:16.5px;line-height:1.72;color:var(--text-secondary)}
.legal-body p + p{margin-top:14px}
.legal-body strong{font-weight:600;color:#fff}
.legal-body a{color:#fff;text-decoration:underline;text-decoration-color:rgba(139,92,246,.7);text-underline-offset:3px;transition:text-decoration-color .3s}
.legal-body a:hover{text-decoration-color:#fff}
.legal-body ul{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.legal-body ul li{position:relative;padding-left:24px}
.legal-body ul li::before{content:"";position:absolute;left:2px;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(109,108,247,.6)}

/* dati ancora da completare prima di pubblicare */
.todo{padding:0 6px;border:1px dashed rgba(250,204,21,.65);border-radius:6px;background:rgba(250,204,21,.12);color:#FDE68A}

/* finalità e tabella dei cookie */
.legal-table{width:100%;margin-top:22px;border-collapse:collapse;font-size:15px}
.legal-table th{padding:0 16px 12px 0;border-bottom:1px solid var(--line-strong);text-align:left;font:600 11px/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.legal-table td{padding:15px 16px 15px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55;color:var(--text-secondary)}
.legal-table td:first-child{font-weight:600;color:#fff}
.legal-table code{font:600 14px/1.4 var(--f-display);color:#fff;white-space:nowrap}
.legal-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

@media (max-width:900px){
  .legal{grid-template-columns:1fr;gap:48px}
  .legal-toc{position:static}
}
/* telefono: ogni riga della tabella diventa una scheda con le etichette */
@media (max-width:640px){
  .legal-table thead{display:none}
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:100%}
  .legal-table tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .legal-table td{padding:4px 0;border:0}
  .legal-table td::before{content:attr(data-label);display:block;font:600 10.5px/1.5 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
  .legal-body p,.legal-body li{font-size:16px}
}