/* ——— Sezione TRASFORMAZIONE ——— */


.trasformazione {


  background: #35392a;          /* oliva scuro (coerente sito) */


  color: #fff;


  padding: 10vh 5vw;


  position: relative;


  overflow: visible;


}





/* background decorativo (alberi/texture matita) — opzionale */


.trasformazione-bg {


  background-size: cover;


  position: absolute;


  inset: 0;


  opacity: 5%;


  z-index: 1;


  pointer-events: none;


}





/* layout contenuti */


.trasformazione-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;


}





/* colonna testo */


.trasformazione-text {


  flex: 1;


  font-size: 1.2rem;


  line-height: 1.6;


  text-align: left;


}





.trasformazione-text h2 {


  font-family: 'Playfair Display', serif;


  font-size: 2.5rem;


  margin-bottom: 1rem;


  color: #fff;


  line-height: 1.2;


  letter-spacing: -0.3px;


}





/* Evidenziazioni locali (mantiene coerenza con resto del sito) */


.trasformazione-text .highlight {


  background: #a87344;          /* beige-ramé */


  padding: 0 0.2em;


  border-radius: 0.2em;


}





.trasformazione-text .highlight-full {


  background: linear-gradient(0deg, rgba(162,115,68,0.28) 0%, rgba(162,115,68,0.28) 100%);


  box-decoration-break: clone;


  -webkit-box-decoration-break: clone;


  padding: 0 .15em;


  border-radius: .15em;


}





.trasformazione-text .underline {


  text-decoration: underline;


  text-decoration-thickness: 2px;


  text-underline-offset: 3px;


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


}





/* colonna immagine */


.trasformazione-img {


  flex: 1;


  max-width: 520px;


}





.trasformazione-img img {


  width: 100%;


  height: auto;


  display: block;


  /* niente border-radius per rispettare PNG trasparente “ritagliato” */


}





/* Fade-in (scoped) */


.trasformazione [data-fade] {


  opacity: 0;


  transform: translateY(40px);


  transition: all 1s ease-out;


}


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


  opacity: 1;


  transform: translateY(0);


}





/* —— Mobile: immagine PRIMA, testo DOPO —— */


@media (max-width: 900px) {


  .trasformazione-container {


    flex-direction: column;


    gap: 4vh;


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


  }





  .trasformazione-img {


    order: 1;                 /* immagine PRIMA */


    max-width: 640px;


    width: 100%;


    margin: 0 auto;


  }





  .trasformazione-text {


    order: 2;                 /* testo DOPO */


    text-align: left;


  }





  .trasformazione-text h2 {


    font-size: 2rem;


    font-family: 'Playfair Display', serif;


    font-weight: 600;


    line-height: 1.2;


    letter-spacing: -0.5px;


  }


}





/* Tablet piccolo */


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


  .trasformazione-container { gap: 32px; }


}