#intro{
  padding-top: 45vh;
  position: relative;
  overflow: clip;
}

#intro .bg-svg{
  position: absolute;
  top: -25px;
  left: -50px; /* ← questo crea il taglio */

  z-index: 0;
  pointer-events: none;
}


#intro .bg-svg svg{
  width: clamp(350px, 302px + 15vw, 590px);
  height: auto;

  transform: rotate(36deg); /* verso destra */
  transform-origin: 50% 50%;

  color: rgba(0,0,0,.18);
  filter: grayscale(1);
  opacity: .35;
}

#intro .contenitore{
  position: relative;
  z-index: 1;
}


#intro .contenitore header h1{
  font-size: clamp(22px, 7.2px + 4.625vw, 96px);
}

@media (max-width: 768px){
  #intro .bg-svg{
    opacity: .18;
    top: -60px;
    left: -60px;
  }

  #intro .bg-svg svg{
    width: 360px;
  }
}

/* desktop */
@media only screen and (min-width: 768px){
  #intro .contenitore .contenuto{
    padding-left: 30%;
  }
}

/* -------------------------------------------------------
   MAPPA DEL SITO
   ------------------------------------------------------- */

#mappa-del-sito{
  padding: clamp(2.5rem, 2rem + 2vw, 5rem) 0;
}

#mappa-del-sito .contenitore{
  max-width: 1100px; /* se già lo gestisci altrove, puoi rimuovere */
}

#mappa-del-sito header{
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2.25rem);
}

#mappa-del-sito header h1,
#mappa-del-sito header h2{
  margin: 0 0 .45rem 0;
  line-height: 1.05;
}

#mappa-del-sito header .lead{
  margin: 0 0 .75rem 0;
  max-width: 70ch;
  opacity: .92;
}

#mappa-del-sito header p:not(.lead){
  margin: 0;
  max-width: 70ch;
  opacity: .78;
}

#mappa-del-sito .note{
  margin: 0 0 1rem 0;
  opacity: .75;
}

/* Lista principale */
#mappa-del-sito ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Livello 1: le macro-voci */
#mappa-del-sito > .contenitore > .contenuto > ul{
  display: grid;
  gap: .45rem;
}

#mappa-del-sito > .contenitore > .contenuto > ul > li{
  border-bottom: 1px solid var(--border, rgba(0,0,0,.12));
  padding: .7rem 0;
}

#mappa-del-sito > .contenitore > .contenuto > ul > li:last-child{
  border-bottom: none;
}

/* Link */
/* -------------------------------------------------------
   LINK + ICONA SVG
   ------------------------------------------------------- */

#mappa-del-sito a{
  display: inline-flex;
  align-items: center;
  gap: .6rem;

  text-decoration: none;
  color: inherit;

  padding: .35rem .25rem;
  border-radius: .65rem;

  transition: transform .16s ease, background-color .16s ease;
}

/* Icona arrow */
#mappa-del-sito .icon-arrow{
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;

  opacity: .45;
  transform: translateX(0);
  transition: transform .16s ease, opacity .16s ease;
}

/* Hover / focus */
#mappa-del-sito a:hover{
  background: var(--chip, rgba(0,0,0,.06));
  transform: translateX(2px);
}

#mappa-del-sito a:hover .icon-arrow{
  opacity: .75;
  transform: translateX(3px);
}

#mappa-del-sito a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  background: var(--chip, rgba(0,0,0,.06));
}



/* Livello 2: sotto-liste (Servizi / Portfolio) */
#mappa-del-sito li > ul{
  margin-top: .55rem;
  padding-left: 1.1rem;

  display: grid;
  gap: .25rem;
}

/* Puntino “soft” prima dei link figli */
#mappa-del-sito li > ul > li{
  position: relative;
  padding-left: .7rem;
}

#mappa-del-sito li > ul > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: .35rem;
  height: .35rem;
  border-radius: 999px;
  background: currentColor;
  opacity: .25;
}

/* I link figli un pelo più “leggeri” */
#mappa-del-sito li > ul a{
  opacity: .9;
}

#mappa-del-sito li > ul a::after{
  opacity: .35;
}

/* Responsive: su schermi ampi, fai respirare i gruppi */
@media (min-width: 900px){
  #mappa-del-sito > .contenitore > .contenuto > ul{
    gap: .6rem;
  }
  #mappa-del-sito > .contenitore > .contenuto > ul > li{
    padding: .8rem 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #mappa-del-sito a,
  #mappa-del-sito a::after{
    transition: none;
  }
  #mappa-del-sito a:hover{
    transform: none;
  }
  #mappa-del-sito a:hover::after{
    transform: translateY(-1px);
  }
}