.chitiaccompagna3 {


  background: #35392a;


  color: #fff;


  padding: 10vh 5vw;


  position: relative;


  overflow: visible;


}





.chitiaccompagna3-bg-trees {


  background: url("../svg/alberi-matita-trasparente.png") center center no-repeat;


  background-size: cover;


  position: absolute;


  inset: 0;


  opacity: 5%;


  z-index: 1;


  pointer-events: none;


}





.chitiaccompagna3-container {


  position: relative;


  z-index: 2;


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 5vw;


  max-width: 1200px;


  min-height: 700px;


  margin: 0 auto;


  flex-wrap: nowrap;


}





.chitiaccompagna3-text {


  flex: 1;


  font-size: 1.2rem;


  line-height: 1.6;


  text-align: left;


}





.chitiaccompagna3-text h2 {


  font-family: 'Playfair Display', serif;


  font-size: 2.5rem;


  margin-bottom: 1rem;


  color: #fff;


}





/* Evidenziazioni parole chiave */


.chitiaccompagna3-text .highlight {


  background: #a87344;


  padding: 0 0.2em;


  border-radius: 0.2em;


}


.chitiaccompagna3-text .underline {


  text-decoration: underline;


  text-decoration-thickness: 2px;


  text-underline-offset: 3px;


  text-decoration-color: #d29661; /* arancio mattone */


}





.chitiaccompagna3-img {


  flex: 1;


  max-width: 500px;


}





.chitiaccompagna3-img img {


  width: 100%;


  height: auto;


  border-radius: 1rem;


}





/* Fading scroll (scoped) */


.chitiaccompagna3 [data-fade] {


  opacity: 0;


  transform: translateY(40px);


  transition: all 1s ease-out;


}


.chitiaccompagna3 [data-fade].fade-in {


  opacity: 1;


  transform: translateY(0);


}





/* —— Mobile: IMMAGINE prima, TESTO dopo —— */


@media (max-width: 900px) {


  .chitiaccompagna3-container {


    flex-direction: column;


    gap: 4vh;


    min-height: unset; /* evita spazi vuoti su schermi piccoli */


  }





  .chitiaccompagna3-img {


    order: 1;                 /* immagine PRIMA */


    max-width: 640px;         /* un po' più grande su mobile se c'è spazio */


    width: 100%;


    margin: 0 auto;


  }





  .chitiaccompagna3-text {


    order: 2;                 /* testo DOPO */


    text-align: left;


  }





  .chitiaccompagna3-text h2 {


    font-size: 2rem;


    font-family: 'Playfair Display', serif;


    font-weight: 600;


    text-align: left;


    line-height: 1.2;


    letter-spacing: -0.5px;


  }


}





/* Tablet piccolo: spazio leggermente più compatto per evitare tagli */


@media (min-width: 901px) and (max-width: 1024px) {


  .chitiaccompagna3-container { gap: 32px; }


}