*{box-sizing:border-box}
body{margin:0;font-family:Arial,system-ui;background:#FFFBF5;color:#1E120C;line-height:1.6;overflow-x:hidden}
header{background:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E8DCC8;position:sticky;top:0;z-index:1000}
header img{height:42px} header .logo-marchio{width:420px;max-width:90%;height:auto}
nav{display:flex;gap:18px;align-items:center} 
nav a{color:#1E120C;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.5px} /* MODIFICATO QUI */
.hamburger{display:none;font-size:28px;background:none;border:0;cursor:pointer}
.hero{background:#FFFBF5;text-align:center;padding:36px 18px 42px;border-bottom:1px solid #E8DCC8}
.wrap{max-width:1100px;margin:0 auto;padding:22px 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:#fff;border-radius:14px;border:1px solid #E8DCC8;overflow:hidden;text-align:center;padding-bottom:10px;cursor:pointer}
.card img{width:100%;height:180px;object-fit:cover;background:#eee}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999}#lightbox.active{display:flex}#lightbox img{max-width:95%;max-height:95%;border-radius:12px}
footer{background:#1E120C;color:#fff;text-align:center;padding:26px 18px;font-size:13px;line-height:1.7}footer a{color:#C9A86A;text-decoration:none}
.wa{position:fixed;right:14px;bottom:14px;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;text-decoration:none;z-index:999}
@media(max-width:850px){
 .hamburger{display:block}
 nav{position:fixed;top:66px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:10px 0 20px;border-bottom:1px solid #E8DCC8;transform:translateY(-150%);transition:.25s;box-shadow:0 10px 20px rgba(0,0,0,.08)}
 nav.open{transform:translateY(0);display:flex}
 nav a{width:100%;padding:14px 22px;font-size:16px;border-bottom:1px solid #f5f0e8} /* MODIFICATO QUI */
 .grid{grid-template-columns:1fr 1fr}
 h1{font-size:26px!important}
 .hero .logo-marchio{width:300px; background-color: transparent;}
 
}
@media(max-width:520px){
 .grid{grid-template-columns:1fr}
 .card img{height:220px}
 .wrap{padding:18px 14px}
}
.logo-marchio{
  background: transparent !important;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero img.logo-marchio{
  width: min(90vw, 700px);
    background: transparent !important;
}

@media(max-width:850px){
 .logo-marchio{
   max-width: 92vw;
     background: transparent !important;
 }
}
/* EFFETTO SPARSO - lanciate a caso */
.grid.scattered{
  display:block;
  position:relative;
  min-height: 520px;
  padding: 30px 10px 60px;
}
.grid.scattered .card{
  position:absolute;
  width: 300px;
  max-width: 42vw;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: all .25s ease;
  cursor:pointer;
}
.grid.scattered .card:hover{
  transform: rotate(0deg) scale(1.05) !important;
  z-index: 10 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

/* posizioni a caso - desktop */
.grid.scattered .card:nth-child(1){ left:2%; top:10px; transform:rotate(-3deg); z-index:3; }
.grid.scattered .card:nth-child(2){ left:32%; top:45px; transform:rotate(2.5deg); z-index:2; }
.grid.scattered .card:nth-child(3){ left:60%; top:5px; transform:rotate(-1.5deg); z-index:4; }
.grid.scattered .card:nth-child(4){ left:12%; top:300px; transform:rotate(2deg); z-index:1; }
.grid.scattered .card:nth-child(5){ left:48%; top:280px; transform:rotate(-2.8deg); z-index:5; }

/* tablet */
@media(max-width:950px){
 .grid.scattered{ min-height:760px; }
 .grid.scattered .card{ max-width: 46%; width:280px; }
 .grid.scattered .card:nth-child(1){ left:2%; top:10px; }
 .grid.scattered .card:nth-child(2){ left:52%; top:30px; }
 .grid.scattered .card:nth-child(3){ left:5%; top:320px; }
 .grid.scattered .card:nth-child(4){ left:52%; top:360px; }
 .grid.scattered .card:nth-child(5){ left:22%; top:620px; }
}

/* telefono - torna lineare */
@media(max-width:600px){
 .grid.scattered{ display:grid; grid-template-columns:1fr; min-height:auto; padding:15px; gap:16px; }
 .grid.scattered .card{ position:relative; left:auto !important; top:auto !important; width:100%; max-width:100%; transform:none !important; }
}