@font-face {
  font-family: 'QTOldGoudy-Bold';
  src: url('../fonts/QTOldGoudy-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'QTOldGoudy-Italic';
  src: url('../fonts/QTOldGoudy-Italic.otf') format('opentype');
}

@font-face {
  font-family: 'Lato-Light';
  src: url('../fonts/Lato-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Lato-Italic';
  src: url('../fonts/Lato-Italic.ttf') format('truetype');
}

/* Reset di base e impostazioni generali */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%; /* Assicura che html e body occupino l'intera altezza della viewport */
  min-height: 100vh; /* Garantisce che la pagina sia alta almeno quanto la viewport */
  position: relative;
  background-color: #f7ede0; /* Colore di sfondo base della pagina */
  overflow-x: hidden; /* Evita scrollbar orizzontali indesiderate */
}

/* Stile per il contenitore dell'immagine di background fissa */
.fixed-background-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100vh;
  width: 100%;
  height: auto;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

/* Stile per l'immagine SVG all'interno del contenitore fisso */
.fixed-background-container .bg-graphic {
  height: auto;
  width: auto;
  object-fit: none;
  object-position: center center;
}

/* Regole per il contenitore principale del contenuto */
.HP-cria {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Assicura che il contenuto possa essere alto almeno quanto la viewport */
  align-items: center; /* Centra orizzontalmente gli elementi flex children */
  gap: 16px; /* Spazio tra gli elementi flex children */
  padding: 48px 16px; /* Padding interno */
  position: relative; /* Necessario per z-index */
  z-index: 1; /* Assicura che il contenuto sia sopra lo sfondo fisso */
  background-color: transparent; /* DEVE ESSERE TRASPARENTE per mostrare l'SVG sottostante */
  width: 100%;
  max-width: 600px; /* Larghezza massima per replicare le proporzioni di LP.jpg */
  margin: 0 auto; /* Centra il contenitore principale sulla pagina */
  box-sizing: border-box; /* Assicura che padding non aggiunga larghezza extra */
  /* Rimosso height fissa e overflow: hidden per permettere lo scroll sul body */
}

/* Regole specifiche per gli elementi testuali (rimaste invariate) */
.HP-cria .GOOD-THINGS-TAKE {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "QTOldGoudy-Bold", serif;
  font-weight: 700;
  color: #df624a;
  font-size: 20px;
  text-align: center;
  letter-spacing: 1.80px;
  line-height: normal;
  word-break: break-word;
  hyphens: auto;
}

.HP-cria .text-wrapper {
  /* Ho rimosso width e margin-left/right fissi, usa align-self: center per centrare */
  width: auto; /* Permette al testo di adattarsi */
  margin-left: 0;
  margin-right: 0;
  font-family: "QTOldGoudy-Bold", serif;
  font-weight: 700;
  position: relative;
  color: #df624a;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  align-self: center; /* Centra l'underscore all'interno del flex container */
}

.HP-cria .div {
  position: relative;
  align-self: stretch;
  font-family: "QTOldGoudy-Bold", serif;
  font-weight: 700;
  color: #df624a;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* Gestione dello spazio sotto la mano - QUESTA ALTEZZA VA ANCORA AGGIUSTATA */
.HP-cria .space {
  height: 280px; /* Valore di partenza, da tweakare */
  position: relative;
  align-self: stretch;
  width: 100%;
}

.HP-cria .frame {
  display: flex;
  flex-direction: column;
  align-items: center; /* Modificato da flex-start a center per centrare il contenuto dei frame */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.HP-cria .creo-visioni-per {
  position: relative;
  align-self: stretch;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: "Lato-Light", sans-serif;
  font-weight: 300;
  color: #df624a;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  
}

.HP-cria .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  font-family: "QTOldGoudy-Italic", serif;
  font-weight: 400;
  font-style: italic;
  color: #df624a;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.HP-cria .space-2 {
  height: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.HP-cria .title {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "QTOldGoudy-Bold", serif;
  font-weight: 700;
  color: #df624a;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.HP-cria .subtitle {
  position: relative;
  align-self: stretch;
  font-family: "QTOldGoudy-Italic", serif;
  font-weight: 400;
  font-style: italic;
  color: #df624a;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.HP-cria .LET-s-TALK {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Lato-Italic", sans-serif;
  font-weight: 400;
  font-style: italic;
  color: #df624a;
  font-size: 16px;
  text-align: center;
  letter-spacing: 1.60px;
  line-height: normal;
}

.HP-cria .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-family: "Lato-Light", sans-serif;
  font-weight: 300;
  color: #df624a;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.HP-cria .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: center; /* Modificato da flex-start a center per centrare il contenuto dei frame */
  padding: 16px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.HP-cria .p-IVA {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Lato-Light", sans-serif;
  font-weight: 300;
  color: #df624a;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

/* Responsive Mobile Handling */
/*
@media (max-width: 480px) {
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }
}
*/

/*
.mobile-only {
  display: none;
}
*/

/* Immagini mobili */
/*
.hero-img,
.divider-1,
.divider-2 {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 20px auto;
}


@media (min-width: 480px) {
  .HP-cria .space,
  .HP-cria .space-2 {
    display: block;
  }
}
*/