/**
 * Stile delle pagine legali.
 *
 * Non riusa il foglio della pagina principale: quello e' generato dentro
 * direzione-d5.html insieme a hero, chat e griglie, e a queste pagine serve un
 * decimo di quella roba. Qui ci sono i token del sito (stessi colori, stessi
 * caratteri) e il minimo per un documento lungo da leggere.
 */

:root{
  --shell:#f4f1e8;
  --shell-2:#ebe7dc;
  --white:#fffef9;
  --ink:#17312d;
  --ink-2:#435b56;
  --muted:#5e6f6a;
  --cobalt:#1f4be2;
  --foam:#cde4d7;
  --coral:#ef6a4c;
  --rule:rgba(23,49,45,.18);
  --rule-strong:rgba(23,49,45,.34);
  --display:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --gutter:clamp(1rem,4vw,4.75rem);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--shell);color:var(--ink);font-family:var(--sans);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);
  padding:.7rem 1rem;border-radius:0 0 8px 0;z-index:50;
}
.skip-link:focus{left:0}

/* ------------------------------------------------------------------ barra */
.nav{
  position:sticky;top:0;z-index:20;background:rgba(244,241,232,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
}
.nav__in{
  max-width:1440px;margin:0 auto;padding:0 var(--gutter);min-height:72px;
  display:flex;align-items:center;gap:1rem;
}
.brand{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.045em;
}
/* nella barra il marchio e' un collegamento: l'area di clic deve essere presa
   davvero, non essere alta quanto le lettere (29px misurati prima) */
.nav .brand{min-height:44px}
.brand__mark{
  width:22px;height:22px;border-radius:6px;background:var(--cobalt);flex:0 0 22px;
  background-image:
    linear-gradient(var(--white) 0 0),
    linear-gradient(var(--white) 0 0);
  background-size:8px 3px,3px 8px;
  background-position:center,center;
  background-repeat:no-repeat;
}
.brand__vert{
  position:relative;padding-left:.55rem;margin-left:.5rem;
  font-family:var(--sans);font-size:.75em;font-weight:500;letter-spacing:.02em;
  color:var(--muted);white-space:nowrap;
}
.brand__vert::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:1.05em;background:var(--rule-strong);
}
.langs{
  margin-left:auto;display:flex;align-items:center;
  border:1px solid var(--rule-strong);border-radius:999px;padding:2px;
}
.langs button{
  min-width:42px;min-height:42px;border:0;border-radius:999px;background:transparent;
  cursor:pointer;font-family:var(--sans);font-size:.72rem;font-weight:600;
  color:var(--muted);padding:0 .7rem;
}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.langs button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* Su schermo stretto la pagina principale rimpicciolisce marchio e pulsanti;
   qui la regola non era stata riportata e a 375px il gruppo lingue usciva di 4px
   dallo schermo, facendo scorrere la pagina di lato. */
@media(max-width:620px){
  .nav__in{gap:.7rem;min-height:64px}
  .brand{font-size:1rem}
  .brand__mark{width:20px;height:20px;flex:0 0 20px}
  .langs button{min-width:40px;min-height:40px;padding:0 .55rem}
}

/* Come nella pagina principale: con tre lingue il gruppo misura 138px e sotto
   i 340px il qualificatore deve cedere il posto, o la barra esce dallo schermo. */
@media(max-width:340px){
  .nav .brand__vert{display:none}
}

/* ---------------------------------------------------------------- documento */
main{
  max-width:768px;                 /* ~75 caratteri per riga: misura da lettura */
  margin:0 auto;padding:clamp(2.5rem,6vw,5rem) var(--gutter) clamp(3rem,8vw,6rem);
}
.doc__eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cobalt);margin:0 0 .9rem;
}
h1{
  font-family:var(--display);font-weight:500;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(2.1rem,5vw,3.2rem);margin:0 0 1rem;
}
.doc__meta{
  color:var(--muted);font-size:.86rem;margin:0 0 2.5rem;
  padding-bottom:1.6rem;border-bottom:1px solid var(--rule);
}
h2{
  font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(1.3rem,2.6vw,1.7rem);margin:2.8rem 0 .9rem;
}
h3{
  font-family:var(--sans);font-weight:600;font-size:1rem;
  margin:1.8rem 0 .5rem;letter-spacing:0;
}
p,li{color:var(--ink-2)}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.35rem}
li{margin-bottom:.45rem}
strong{color:var(--ink);font-weight:600}
a{color:var(--cobalt)}
a:hover{color:var(--ink)}

/* tabella dei fornitori: su schermo stretto diventa un elenco di schede */
.tbl{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.92rem}
.tbl th,.tbl td{
  text-align:left;vertical-align:top;padding:.7rem .8rem;border-bottom:1px solid var(--rule);
}
.tbl thead th{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:600;border-bottom:1px solid var(--rule-strong);
}
.tbl td{color:var(--ink-2)}
@media(max-width:640px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--rule);border-radius:12px;padding:.5rem .2rem;margin-bottom:.9rem;background:var(--white)}
  .tbl td{border:0;padding:.35rem .8rem}
  .tbl td::before{
    content:attr(data-l);display:block;font-size:.66rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.1rem;
  }
}

/* ---- i buchi che deve riempire Mirko: devono darsi nell'occhio, e sparire
        insieme quando sono stati riempiti ---- */
.todo{
  background:#fff3cd;border-bottom:2px solid var(--coral);
  padding:.05em .35em;border-radius:3px;color:var(--ink);font-weight:600;
}
.nota{
  margin:1.6rem 0;padding:1rem 1.15rem;border-left:3px solid var(--coral);
  background:var(--white);border-radius:0 10px 10px 0;
  font-size:.9rem;color:var(--ink-2);
}
.nota strong{display:block;margin-bottom:.25rem;color:var(--ink)}

/* ------------------------------------------------------------------- piede */
footer{
  background:var(--ink);color:#dbe6e2;
  padding:2.2rem var(--gutter);
}
.footer__in{
  max-width:1440px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;font-size:.8rem;
}
footer .brand{color:var(--white)}
footer .brand__vert{color:#9fb0ab}
footer .brand__vert::before{background:rgba(255,255,255,.28)}
.footer__nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center}
.footer__nav a{color:#c2d0cc;text-decoration:underline;text-underline-offset:3px;
  min-height:44px;display:inline-flex;align-items:center}
.footer__nav a:hover{color:var(--white)}
.footer__year{color:#8fa39e;white-space:nowrap}

@media print{
  .nav,.skip-link{display:none}
  body{background:#fff;color:#000}
  p,li,td{color:#000}
  footer{background:#fff;color:#000;border-top:1px solid #999}
  .footer__nav a,footer .brand{color:#000}
  a[href^="http"]::after,a[href^="mailto"]::after{content:' (' attr(href) ')';font-size:.85em;color:#555}
  main{max-width:none}
}

/* ---------------------------------------------- la revoca del consenso ----
   L'informativa promette che il consenso si puo' revocare quando si vuole.
   Darlo costa un clic: toglierlo deve costarne uno, non una mail — art. 7(3).
   Sta dentro il documento e non in fondo alla pagina perche' e' li' che si
   legge la promessa. */
.revoca{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  margin-top:1.1rem;
}
.revoca button{
  font:inherit;font-size:.92rem;
  padding:.55rem 1rem;border-radius:999px;
  border:1px solid var(--rule,#dcdcd4);background:var(--white,#fff);color:inherit;
  cursor:pointer;transition:background .18s ease,border-color .18s ease;
}
.revoca button:hover{border-color:var(--cobalt,#1f4be2);color:var(--cobalt,#1f4be2)}
.revoca button:focus-visible{outline:2px solid var(--cobalt,#1f4be2);outline-offset:2px}
.revoca [data-revoca-esito]{font-size:.9rem;color:var(--ink-2,#5e6f6a)}

@media(prefers-reduced-motion:reduce){ .revoca button{transition:none} }