/* Stile condiviso dalle pagine legali (privacy, cookie, termini).
   Sta in un file a parte, non dentro a ogni pagina, per due motivi:
   il carattere pesa 48 KB e ripeterlo tre volte sarebbe uno spreco, e
   un ritocco alla grafica va fatto una volta sola invece che in tre punti. */

@font-face{
  font-family:'Inter'; font-weight:300 800; font-display:swap;
  src:url(media/inter.woff2) format('woff2');
}

:root{
  /* stessa palette del sito: le pagine legali non sono un mondo a parte */
  --sfondo:      #ECF2F6;
  --ambra:       #2739FF;
  --ambra-scura: #1F2ED6;
  --blu:         #020E26;
  --grigio-testo:#4A5568;
  --bordo:       rgba(2,14,38,.12);
  --notte:       #020E26;
  --chiaro:      #FFFFFF;
  --chiaro-muto: #9FB0C4;
  --max: 820px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-padding-top:90px; }
body{
  background:var(--sfondo); color:var(--blu);
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--ambra-scura); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--ambra); }
a:focus-visible{ outline:3px solid var(--ambra); outline-offset:3px; border-radius:4px; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0 0 18px; padding-left:22px; }
li{ margin-bottom:8px; }

.avvolgi{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ---------- barra ---------- */
.barra{
  position:sticky; top:0; z-index:50;
  background:rgba(236,242,246,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bordo);
}
.barra-int{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 24px; max-width:1200px; margin:0 auto;
}
.marchio{ display:flex; align-items:center; gap:11px; flex-shrink:0; white-space:nowrap; text-decoration:none; color:var(--blu); }
.marchio-testo{ font-weight:700; font-size:22px; letter-spacing:.20em; }
.marchio-tag{ font-weight:500; font-size:18px; letter-spacing:0; color:var(--grigio-testo); }
@media (max-width:640px){ .marchio-tag{ display:none; } }
.torna{
  font-size:15px; font-weight:500; color:var(--grigio-testo); text-decoration:none;
}
.torna:hover{ color:var(--blu); }

/* ---------- testo ---------- */
.testata{ padding:64px 0 34px; }
.occhiello{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ambra-scura); margin:0 0 14px;
}
h1{
  font-size:clamp(1.9rem,4vw,2.6rem); font-weight:700;
  letter-spacing:-.018em; line-height:1.12; margin:0 0 16px; text-wrap:balance;
}
.aggiornata{ font-size:15px; color:var(--grigio-testo); margin:0; }

main{ padding-bottom:80px; }
h2{
  font-size:1.32rem; font-weight:600; line-height:1.3;
  margin:42px 0 12px; letter-spacing:-.01em;
}
h3{ font-size:1.06rem; font-weight:600; margin:26px 0 8px; }
p{ margin:0 0 16px; }

/* riquadro per le informazioni che il proprietario deve ancora compilare:
   volutamente vistoso, così non finisce online per distrazione */
.da-completare{
  background:#FFF4D6; border:1px solid #E0B84A; border-left:4px solid #C79A22;
  border-radius:10px; padding:16px 20px; margin:0 0 22px;
  font-size:15.5px; color:#4A3A0B;
}
.da-completare strong{ display:block; margin-bottom:6px; }
.da-completare code{
  background:rgba(0,0,0,.07); padding:1px 6px; border-radius:4px;
  font-size:14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* riquadro neutro, per mettere in evidenza un concetto chiave */
.nota{
  background:#fff; border:1px solid var(--bordo); border-left:4px solid var(--ambra);
  border-radius:10px; padding:18px 22px; margin:0 0 22px;
}
.nota p:last-child{ margin-bottom:0; }

/* tabella dei cookie / dei dati */
.tabella-avvolgi{ overflow-x:auto; margin:0 0 22px; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px; background:#fff; }
th,td{ border:1px solid var(--bordo); padding:11px 14px; text-align:left; vertical-align:top; }
th{ background:#E1E9F0; font-weight:600; }

/* ---------- piede ---------- */
.piede{ background:var(--notte); color:var(--chiaro); padding:44px 0 30px; }
.piede a{ color:#DCE7F0; }
.piede-righe{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:18px; font-size:15px; }
.piede-basso{
  border-top:1px solid rgba(255,255,255,.14); padding-top:18px;
  font-size:13.5px; color:var(--chiaro-muto);
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
}
.piede-basso p{ margin:0; }