/* ============================================================
   CUKE — pagine legali a pagina intera (privacy e regolamento).
   Stessa lingua grafica del sito del token: font ricavato dagli SVG
   originali per i titoli, Inter per i testi lunghi, fasce viola con
   scritte ciano, riquadri bianchi con testo nero, sfondo con le palme.
   ============================================================ */

@font-face{font-family:'CUKE Display';src:url('CUKEDisplay.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Lilita One';src:url('lilita-one-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --ciano:#00FFFF; --mint:#5CDFF2; --viola:#957FFF; --viola-s:#6F5DC4;
  --mauve:#BB9CB7; --giallo:#FEC207; --nero:#0d0b12;
  --s1:clamp(4px,.45vw,7px);  --s2:clamp(7px,.8vw,12px);
  --s3:clamp(12px,1.25vw,20px); --s4:clamp(18px,1.9vw,30px);
  --s5:clamp(26px,2.7vw,44px); --s6:clamp(36px,3.8vw,60px);
  --tit:'CUKE Display','Lilita One',Impact,sans-serif;
  --testo:'Inter','Helvetica Neue',Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:clamp(74px,8vh,104px)}
body{
  font-family:var(--testo);color:var(--nero);
  /* sfondo: i due livelli originali del sito alla loro risoluzione,
     il giallo a pois con i ritagli delle palme sopra il cielo */
  background-color:#FEC61E;
  background-image:url('sfondo_giallo.webp'),url('sfondo_cielo.webp');
  background-position:center bottom,center bottom;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
  background-attachment:fixed,fixed;
  -webkit-text-size-adjust:100%;
}

/* ---------- barra in alto, sempre visibile ---------- */
.barra{
  position:sticky;top:0;z-index:20;
  background:var(--ciano);
  border-bottom:clamp(4px,.4vw,7px) solid var(--viola-s);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:var(--s2) clamp(14px,3vw,40px);
}
.barra .logo{width:clamp(78px,8vw,124px);height:auto;display:block}
.menu{display:flex;flex-wrap:wrap;gap:clamp(6px,.7vw,11px)}
.menu a{
  font-family:var(--tit);font-size:clamp(11px,1.02vw,16px);letter-spacing:.03em;line-height:1;
  text-transform:uppercase;text-decoration:none;
  color:var(--ciano);background:var(--viola-s);
  padding:clamp(7px,.9vh,12px) clamp(10px,1.1vw,18px);
  border-left:clamp(4px,.35vw,6px) solid var(--ciano);
  box-shadow:clamp(3px,.3vw,5px) clamp(3px,.3vw,5px) 0 rgba(149,127,255,.9);
  transition:transform .14s ease, box-shadow .14s ease;
}
.menu a:hover{transform:translate(-2px,-2px);box-shadow:clamp(6px,.55vw,9px) clamp(6px,.55vw,9px) 0 rgba(149,127,255,.9)}
.menu a[aria-current="page"]{background:var(--viola);color:#fff}

/* ---------- il foglio: una pagina intera, non una finestrella ---------- */
.foglio{
  width:min(1100px,92vw);margin:0 auto;
  background:var(--ciano);
  padding:var(--s5) clamp(18px,3.4vw,58px) var(--s6);
  box-shadow:0 0 0 clamp(4px,.4vw,7px) var(--viola-s);
  margin-top:clamp(20px,3.4vh,44px);margin-bottom:clamp(28px,5vh,70px);
}

/* ---------- testa del documento ---------- */
.occhiello{
  display:inline-block;font-family:var(--tit);text-transform:uppercase;
  font-size:clamp(10px,1vw,15px);letter-spacing:.1em;color:#fff;
  background:var(--mauve);padding:clamp(3px,.45vh,7px) clamp(9px,.9vw,15px);
  border-left:clamp(4px,.35vw,6px) solid var(--mint);
}
h1 span{display:block}
h1{
  font-family:var(--tit);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,4.4vw,64px);line-height:1.04;
  color:var(--ciano);background:var(--viola-s);
  margin-top:var(--s2);padding:clamp(6px,.9vh,13px) clamp(14px,1.6vw,28px) clamp(9px,1.2vh,17px);
  border-left:clamp(7px,.6vw,11px) solid var(--ciano);
  box-shadow:clamp(5px,.5vw,9px) clamp(5px,.5vw,9px) 0 rgba(92,223,242,.55);
}
.sotto{
  font-family:var(--tit);text-transform:uppercase;
  font-size:clamp(12px,1.2vw,19px);line-height:1.34;color:#fff;
  background:rgba(187,156,183,.92);margin-top:var(--s3);
  padding:clamp(10px,1.3vh,17px) clamp(13px,1.3vw,22px);
  border-left:clamp(5px,.45vw,8px) solid var(--mint);
  border-bottom:clamp(5px,.45vw,8px) solid var(--mint);
}
.sotto mark{background:var(--ciano);color:var(--viola-s);padding:0 .14em}

/* ---------- avviso bozza ---------- */
.avviso{
  font-family:var(--tit);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(11px,1.05vw,16px);line-height:1.35;
  background:var(--viola);color:#fff;
  margin-top:var(--s4);padding:clamp(11px,1.4vh,18px) clamp(13px,1.3vw,22px);
  border-left:clamp(5px,.45vw,8px) solid var(--viola-s);
  box-shadow:clamp(4px,.4vw,7px) clamp(4px,.4vw,7px) 0 rgba(111,93,196,.35);
}

/* ---------- indice ---------- */
.indice{margin-top:var(--s5);background:rgba(255,255,255,.97);padding:var(--s3) var(--s4);
  border-left:clamp(5px,.45vw,8px) solid var(--viola-s)}
.indice p{font-family:var(--tit);text-transform:uppercase;font-size:clamp(12px,1.1vw,17px);color:var(--viola-s);letter-spacing:.05em}
.indice ol{list-style:none;margin:var(--s2) 0 0;padding-left:0;columns:2;column-gap:var(--s4)}
.indice li{margin:.25em 0;break-inside:avoid}
.indice a{font-family:var(--tit);text-transform:uppercase;font-size:clamp(11px,.95vw,14.5px);color:var(--nero);text-decoration:none;border-bottom:2px solid var(--viola)}
.indice a:hover{color:var(--viola-s)}

/* ---------- il corpo del documento ---------- */
.testo{margin-top:var(--s5)}
.testo h2{
  font-family:var(--tit);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.85vw,30px);line-height:1.1;
  color:var(--ciano);background:var(--viola-s);
  margin:var(--s5) 0 var(--s3);
  padding:clamp(7px,.9vh,13px) clamp(12px,1.3vw,22px);
  border-left:clamp(6px,.5vw,9px) solid var(--ciano);
  box-shadow:clamp(4px,.4vw,7px) clamp(4px,.4vw,7px) 0 rgba(92,223,242,.5);
  scroll-margin-top:clamp(80px,9vh,120px);
}
.testo h2:first-child{margin-top:0}
.testo h3{
  font-family:var(--tit);font-weight:400;text-transform:uppercase;
  font-size:clamp(13px,1.25vw,20px);line-height:1.18;letter-spacing:.03em;
  color:#fff;background:rgba(187,156,183,.95);
  margin:var(--s4) 0 0;padding:clamp(6px,.8vh,11px) clamp(11px,1.2vw,19px);
  border-left:clamp(5px,.45vw,8px) solid var(--mint);
  scroll-margin-top:clamp(80px,9vh,120px);
}
.testo h3+p,.testo h3+ul,.testo h3+ol{margin-top:var(--s1)}
.testo p,.testo ul,.testo ol{
  background:rgba(255,255,255,.97);
  font-size:clamp(13.5px,1.02vw,16px);line-height:1.62;
  padding:clamp(11px,1.3vh,17px) clamp(13px,1.3vw,22px);
  border-left:clamp(4px,.35vw,6px) solid var(--mint);
  margin-top:var(--s2);
}
.testo ul,.testo ol{padding-left:clamp(30px,3vw,46px)}
.testo li{margin:.42em 0}
.testo li>strong:first-child{color:var(--viola-s)}
.testo strong{font-weight:600;color:#241d33}
.testo a{color:var(--viola-s);font-weight:600}
.testo p+p{margin-top:var(--s1)}

/* i campi ancora da compilare: impossibile non vederli */
mark.dacompletare{
  display:inline-block;background:var(--giallo);color:#3f2d00;
  font-family:var(--testo);font-weight:600;font-size:.94em;
  padding:1px 7px;border:2px dashed var(--viola-s);
}

/* ---------- piede ---------- */
.piede{
  width:min(1100px,92vw);margin:0 auto clamp(30px,5vh,70px);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(10px,1.4vw,22px);
  font-family:var(--tit);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(10px,.95vw,16px);color:var(--viola-s);
  background:var(--ciano);padding:var(--s3) var(--s4);
  border-left:clamp(5px,.45vw,8px) solid var(--viola-s);
}
.piede .social{display:flex;gap:clamp(10px,1vw,17px);align-items:center}
.piede .social a{display:block;line-height:0;transition:transform .14s ease}
.piede .social a:hover{transform:translateY(-3px) scale(1.08)}
.piede .social img{width:clamp(19px,1.55vw,28px);height:auto;display:block}
.piede a{color:var(--viola-s);text-decoration:none}
.piede a:hover{text-decoration:underline}
.piede .marchio{font-family:var(--tit)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  body{background-image:url('sfondo_giallo_mobile.webp'),url('sfondo_cielo_mobile.webp')}
  .barra{padding:var(--s2) 14px}
  .foglio{width:100%;margin-top:0;padding:var(--s4) 16px var(--s5);box-shadow:none;border-top:5px solid var(--viola-s)}
  h1{font-size:clamp(28px,9vw,46px)}
  .indice ol{columns:1}
  .piede{width:100%;flex-direction:column;gap:var(--s2);text-align:center}
}