body {
    background: #fdf2f2; 
    font-family: 'Montserrat', sans-serif;
    color: #5a4a4a; 
    line-height: 1.8;
    margin: 0;
    padding: 0;
}

#titolo_principale {
    color: #a67c7c;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 2.5rem; 
    text-align: center;
    margin-top: 5px;   
    margin-bottom: 5px; 
    letter-spacing: -1px;
}

.prova, #id1 {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 16px;   /* Leggermente più piccolo */
    max-width: 600px;
    margin: 5px auto;  /* Spazio ridotto tra foto e testo */
    color: #7a6a6a;
    line-height: 1.4;  /* Righe più vicine */
}

#foto_principale {
    display: block;
    margin: 5px auto;  /* Spazio ridotto al minimo sopra e sotto */
    width: 280px;      /* Era 350px */
    height: 350px;     /* Era 450px: questo farà salire i link finali */
    object-fit: cover;
    border: 10px solid white; /* Bordo leggermente più sottile */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

#foto_principale:hover {
    transform: scale(1.02) rotate(1deg); /* Un piccolo movimento creativo */
}


h1 {
    font-family: 'Playfair Display', serif;
    text-align: center;
    color: #d4a5a5;
    margin: 40px;
}

h2 {
    font-family: 'La Belle Aurore', cursive; /* Il font "scritto a mano" */
    color: #a67c7c;
    font-size: 2rem;
    margin-left: 10%;
    margin-top: 60px;
}


a {
    color: #d4a5a5;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

a:hover {
    border-bottom: 1px solid #d4a5a5;
    color: #a67c7c;
}


* {
    box-sizing: border-box;
}

p strong {
    color: #a67c7c;
    font-family: 'Playfair Display', serif;
    font-style: italic;
}
.audio-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    background: white;
    padding: 8px 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #f4dada;
    font-size: 12px;
}

#playBtn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #a67c7c;
}
/* Centra tutto il contenuto */
.main-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px 20px; /* Portato a 0 lo spazio sopra */
}S

/* Crea i blocchi (testo a sinistra, foto a destra) */
.presentazione-box {
    display: flex;
    align-items: center;
    gap: 60px; /* Spazio tra testo e immagine */
    margin-bottom: 100px; /* Distanza tra una sezione e l'altra */
}

/* con "reverse", la foto va a sinistra e il testo a destra */
.presentazione-box.reverse {
    flex-direction: row-reverse;
}

.testo-intro {
    flex: 1; 
}


.foto-secondaria {
width: 380px;         
height: 500px;       
    
object-fit: cover;    /* ritaglia la foto senza deformarla */
object-position: top; 

/* Effetto Polaroid */
border: 12px solid white;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
border-radius: 2px;
}

.reveal-box {
display: none;
background: #ffffff;
padding: 15px;
margin-top: 15px;
border-radius: 8px;
border: 1px dashed #d4a5a5;
font-size: 0.9rem;
color: #8d7a7a;
}

/* centra i link in fondo alla pagina */
.link-footer {
text-align: center;
margin-top: 10px;  /* Cambiato da 80px a 10px! */
padding: 5px 0;    /* Cambiato da 40px a 5px */
border-top: 1px solid #f4dada;
}

/* effetto al passaggio del mouse sui link interattivi */
.trigger {
color: #a67c7c;
border-bottom: 1px dashed #d4a5a5;
cursor: help;
font-weight: bold;
}

.presentazione-box {
display: flex;
align-items: center;
gap: 50px;
margin-bottom: 100px;
padding: 20px 0;
}

.presentazione-box.reverse {
flex-direction: row-reverse;
}

.testo-intro {
flex: 1;
}

.image-box {
flex: 1;
display: flex;
justify-content: center;
}


.foto-secondaria {
width: 100%;
max-width: 400px;
height: auto;
border: 12px solid white;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border-radius: 2px;
transition: transform 0.3s ease;
}

.foto-secondaria:hover {
transform: rotate(-1deg) scale(1.02);
}

#visione p, .presentazione-box:nth-of-type(4) p {
    font-style: italic;
    color: #8d7a7a;
    font-size: 1.1rem;
    line-height: 1.9;
}

.sezione-spazi {
    width: 100%;
    padding: 60px 0;
    margin-bottom: 40px;
    text-align: center; 
}

.testo-centrato {
    max-width: 800px; /* Impedisce al testo di allargarsi troppo */
    margin: 0 auto;   /* Centra il blocco nella pagina */
}

.testo-centrato h2 {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 2.2rem;
color: #a67c7c;
margin-bottom: 25px;
}

.testo-centrato p {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
line-height: 1.8;
color: #7a6a6a;
margin-bottom: 20px;
}

.testo-centrato em {
color: #d4a5a5; /* Colore rosa per evidenziare i concetti chiave */
font-style: normal;
font-weight: 600;
}
/* Forza la home a essere compatta */
.landing-page {
display: flex;
flex-direction: column;
justify-content: flex-start; /* Allinea dall'alto invece che dal centro */
align-items: center;
min-height: 100vh;
padding-top: 10px;
}

.intro-scritta {
margin-top: 5px !important; /* Incolla il testo alla foto */
}