@import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap');

@font-face {
  font-family: 'Amsterdam Two';
  src: url('font/amsterdam-two-ttf.woff2') format('woff2'), /* Formato preferito */
       url('font/amsterdam-two-ttf.woff') format('woff'),   /* Fallback */
       url('font/amsterdam-two-ttf.tff') format('truetype'); /* Fallback ulteriore */
  font-weight: normal;
  font-style: normal;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Belleza', sans-serif; /* Nuovo font per il corpo */
    line-height: 1.6;
    color: #333333; /* Colore testo principale */
    font-size: 1.2em; /* Aumenta ulteriormente la dimensione base del testo */
    overflow-x: hidden; /* Impedisce scroll orizzontale indesiderato */
}

section {
    padding: 60px 20px;
    min-height: 100vh; /* Assicura che ogni sezione occupi almeno l'intera altezza dello schermo */
    display: flex;
    align-items: center; /* Centra il contenuto verticalmente */
    justify-content: center;
}

.content {
    display: flex;
    align-items: center; /* Allinea verticalmente testo e immagine/pulsante */
    justify-content: center; /* Centro le due colonne */
    gap: 40px; /* Aggiungo spazio tra le colonne */
    max-width: 1200px; /* Limita la larghezza massima */
    margin: 0 auto; /* Centra il contenitore */
    width: 100%;
}

/* Font per i titoli */
h1 {
    font-family: 'Amsterdam Two', cursive; /* Nuovo font per h1 */
    color: #5E7A5E; /* Colore primario per i titoli */
    line-height: 1.5; /* Aumentata ancora interlinea */
}

h2 {
    font-family: 'Amsterdam Two', cursive; /* Applica Amsterdam Two anche a h2 */
    color: #5E7A5E; /* Colore primario per i titoli */
    line-height: 1.5; /* Aumentata ancora interlinea */
}

/* Dimensioni titoli (più grandi) */
h1 {
    font-size: 4em; /* Ridotta dimensione */
    margin-bottom: 0.3em;
}

h2 {
    font-size: 3em; /* Ridotta dimensione */
    margin-bottom: 0.8em; /* Aumentato ulteriormente margine inferiore */
}

/* Titolo Servizi (è un h2) */
.services-title {
     font-size: 3em; /* Ridotta dimensione (coerente con h2) */
     margin-bottom: 60px; /* Aumentato margine inferiore */
}

/* Titoli singoli servizi (h3) */
.service-item h3 {
    font-family: 'Belleza', sans-serif; /* Usa il font del corpo */
    font-weight: bold; /* Metti in grassetto */
    color: #5E7A5E; /* UColore 2 -> Verde Titoli */
    font-size: 1.3em; /* Dimensione ulteriormente ridotta */
     margin-bottom: 0.5em; /* Aggiunge un po' di spazio sotto l'h3 */
}

/* Background alternati */
.section-bg1 {
    background-color: #FFFBF5; /* Colore 1 (bianco sporco) */
}

.section-bg2 {
    background-color: #5E7A5E; /* Colore 2 -> Verde Titoli */
    color: white; /* Testo default bianco per bg2 */
}

/* Override colore titoli e link per bg2 */
.section-bg2 h1,
.section-bg2 h2 {
    color: white; /* Titoli bianchi su bg2 */
}

/* Link bianchi generici per bg2 (es. Biografia) - Verranno sovrascritti se necessario */
.section-bg2 a {
    color: white;
}
.section-bg2 a:hover {
    color: #f0f0f0; /* Leggermente grigio su hover */
}

/* Stili per testo e immagine */
.text-content {
    flex: 1; /* Occupa lo spazio disponibile */
    padding: 20px;
}

/* Allineamento specifico per testo sezione home */
#home .text-content {
    text-align: right;
}

/* Prevent main title from wrapping */
#home h1 {
    white-space: nowrap;
}

.image-content {
    flex: 1; /* Occupa lo spazio disponibile */
    padding: 20px;
    display: flex;
    flex-direction: column; /* Impila immagine e pulsante */
    justify-content: center;
    align-items: center;
}

/* Alternanza immagine */
.image-right {
    order: 1; /* Mette l'immagine a destra per default */
}

/* Aggiungo regole specifiche per il layout del titolo nella sezione Libri */
#libri .content {
    flex-wrap: wrap; /* Permette al titolo di andare sopra */
}

#libri .content h2 {
    width: 100%; /* Occupa tutta la larghezza */
    text-align: center; /* Centra il testo del titolo */
    margin-bottom: 0.4em; /* Riduci margine inferiore specifico */
}

section:nth-child(even) .image-right {
     order: -1; /* Mette l'immagine a sinistra nelle sezioni pari */
}

/* Stile Squircle base per le immagini (rimuovo clip-path e border-radius generico) */
.squircle {
    width: 400px;
    height: 400px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Aggiunta ombra libro */
    /* Rimuovo clip-path */
    /* clip-path: url(#squircleClip); */
    /* Rimuovo border-radius generico */
    /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; */
}

/* Border-radius specifici per ogni immagine principale */
#home .squircle {
    border-radius: 60% 40% 30% 70% / 50% 50% 50% 50%;
}

#biografia .squircle {
    border-radius: 40% 60% 70% 30% / 50% 50% 50% 50%;
}

#formazione .squircle {
    border-radius: 70% 30% 60% 40% / 50% 50% 50% 50%;
}

/* Rimuovo lo stile squircle specifico per #libri */
/*
#libri .squircle {
    border-radius: 30% 70% 40% 60% / 50% 50% 50% 50%;
}
*/

/* Stile per la copertina del libro */
.book-cover {
    width: auto; /* Larghezza automatica per mantenere proporzioni */
    max-width: 380px; /* Aumentata larghezza massima */
    height: auto; /* Altezza automatica */
    max-height: 570px; /* Aumentata altezza massima */
    object-fit: contain; /* Mostra l'intera immagine senza tagliarla */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Aggiunge un po' di ombra */
    border-radius: 5px; /* Angoli leggermente arrotondati */
    margin-bottom: 15px; /* Aggiungo spazio sotto l'immagine */
}

/* Stile per i pulsanti generici */
.btn {
    display: inline-block; /* Permette padding e margini */
    padding: 10px 20px; /* Spaziatura interna */
    border: none; /* Nessun bordo */
    border-radius: 5px; /* Angoli arrotondati */
    text-decoration: none; /* Nessuna sottolineatura */
    font-family: 'Belleza', sans-serif; /* Usa il font del corpo */
    font-size: 1em; /* Dimensione font relativa al body */
    cursor: pointer; /* Cursore a manina */
    transition: background-color 0.3s ease; /* Transizione hover */
}

/* Stile specifico per il pulsante Amazon */
.btn-amazon {
    background-color: #FFFBF5; /* Beige di section-bg1 */
    color: #5E7A5E !important; /* Testo verde, forzato */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Aggiunta ombra */
}

.btn-amazon:hover {
    background-color: #f0f0f0; /* Come icone social on hover */
}

/* Stili per la sezione Servizi */
#servizi {
    display: flex; /* Ripristinato flex */
    flex-direction: column; /* Contenuto in colonna */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra orizzontalmente i figli (titolo/griglia) */
    min-height: auto; /* Altezza basata sul contenuto, non 100vh */
    padding: 80px 20px; /* Aumentato padding verticale */
}

.services-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Griglia responsiva */
    grid-template-columns: repeat(2, 1fr); /* Sempre due colonne */
    gap: 50px; /* Aumentato spazio tra gli elementi */
    max-width: 700px; /* Ridotta larghezza massima per layout 2 colonne */
    margin: 0 auto; /* Centra la griglia */
    width: 100%; /* Assicura che usi lo spazio disponibile */
}

.service-item {
    text-align: center;
}

/* Stile base per le immagini squircle dei servizi */
.service-squircle {
    width: 250px;  /* Aumentata dimensione icona */
    height: 250px; /* Aumentata dimensione icona */
    object-fit: cover; 
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Aggiunta ombra libro */
    /* border-radius verrà definito sotto specificamente */
}

/* Stile per le descrizioni dei servizi */
.service-description {
    font-size: 0.9em;
    color: #666;
    max-width: 250px; /* Limita larghezza per leggibilità */
    margin: 0 auto 10px auto; /* Centra e aggiunge margine sotto */
}

/* Rimuovo la regola generica per .service-item img che è ora coperta da .service-squircle */
/*
.service-item img {
    margin-bottom: 15px;
    width: 150px; 
    height: 150px;
    object-fit: cover; 
}
*/

/* Border-radius specifici per le immagini dei servizi */
#servizi .service-item:nth-child(1) .service-squircle {
    border-radius: 55% 45% 40% 60% / 60% 50% 50% 40%;
}
#servizi .service-item:nth-child(2) .service-squircle {
    border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
}
#servizi .service-item:nth-child(3) .service-squircle {
    border-radius: 60% 40% 55% 45% / 40% 50% 50% 60%;
}
#servizi .service-item:nth-child(4) .service-squircle {
    border-radius: 40% 60% 45% 55% / 50% 40% 60% 50%;
}

.btn-show-more {
    display: none;
}

/* Media Query per schermi più piccoli (es. mobile) */
@media (max-width: 768px) {
    .content {
        flex-direction: column; /* Contenuto in colonna su mobile */
        text-align: center;
        gap: 20px; /* Riduco lo spazio su mobile */
        width: 100%; /* Assicura che non ecceda */
        max-width: 100%; /* Sovrascrive max-width desktop */
        padding-left: 15px; /* Padding laterale mobile */
        padding-right: 15px;
        box-sizing: border-box; /* Include padding nella larghezza */
    }

    /* Rimuovo regole ordine generale mobile */
    /*
    .image-content {
        order: -1; 
        margin-bottom: 20px;
    }
    .image-right, section:nth-child(even) .image-right {
        order: -1; 
    }
    */
    /* Imposto ordine specifico per Biografia su mobile */
    #biografia .text-content { order: 1; }
    #biografia .image-content { order: 2; margin-bottom: 20px; } /* Verificato corretto */

    /* Ordine per le altre sezioni su mobile - RIMUOVO order specifico per #home */
    /* Lasciamo l'ordine naturale (testo, immagine o viceversa come da HTML) 
       Per #home (immagine a dx desktop), ora testo sarà sopra per flex-direction column */
    #home .image-content { margin-bottom: 20px; } /* Mantengo solo margine */

    .squircle {
        width: 250px;
        height: 250px;
    }

    .services-grid {
       grid-template-columns: 1fr 1fr; /* Two columns on mobile */
       gap: 20px; /* Reduced gap for mobile */
       max-width: 95%; /* Ensure it fits within screen width */
       /* margin: 0 auto; Will be centered by parent */
    }

    h1 {
        font-size: 2.5em; /* Ridotta dimensione mobile */
        line-height: 1.7; /* Aumentata interlinea su mobile */
    }
    h2, .services-title {
        font-size: 2em; /* Ridotta dimensione mobile */
        line-height: 1.7; /* Aumentata interlinea su mobile */
    }
    .service-item h3 {
        font-size: 1.1em; /* Dimensione ulteriormente ridotta anche per mobile */
    }

    /* Stile per la copertina del libro su mobile */
    .book-cover {
        max-width: 280px; /* Aumentata dimensione mobile */
        max-height: 420px; /* Aumentata dimensione mobile */
    }

    /* Rimuovo l'override dell'ordine per #libri su mobile */
    /* Imposto ordine esplicito per #libri su mobile */
      #libri .image-content {
          order: 0 !important; /* Immagine/Pulsante secondo */
      }
      #libri .text-content {
           order: 1 !important; /* Recensioni terze */
     }
  
      /* Assicura che anche lo swiper sia contenuto */
    .reviews-swiper {
        max-width: 100%;
        width: 100%;
    }

    /* Riduco dimensione service-squircle su mobile */
    .service-squircle {
        width: 150px; /* Reduced size */
        height: 150px; /* Reduced size */
    }

    /* Riduci dimensione font recensioni su mobile */
    .reviews-swiper blockquote p {
        font-size: 0.9em !important; /* Ridotto ancora */
        text-align: left !important; /* Allinea a sinistra */
    }

    /* Adatta stile card recensioni su mobile */
    .reviews-swiper blockquote {
        width: 95%; /* Allarga card */
        padding: 20px; /* Padding uniforme mobile */
        /* text-align: center; - Rimosso globalmente, p è left, footer è center */
    }
    .reviews-swiper blockquote::before {
        /* position: absolute; Rimosso */
        /* top: 10px; Rimosso */
        /* left: 15px; Rimosso */
        display: block; /* Virgoletta sopra il testo */
        text-align: left; /* Allinea virgoletta a sx */
        margin-bottom: 10px; /* Spazio sotto virgoletta */
        /* line-height: 1; Rimosso */
        font-size: 3.5em; /* Riduci leggermente virgoletta su mobile */
        /* Mantiene colore e opacità */
        font-family: Georgia, serif;
        color: white;
        opacity: 0.6;
    }

    .reviews-swiper blockquote p {
        font-size: 0.9em !important; /* Ridotto ancora */
        text-align: left !important; /* Allinea a sinistra */
        margin-top: 15px; /* Assicura nessun margine sopra */
        margin-left: -40px !important;
    }

    /* Modifiche specifiche timeline per mobile */
    /* Ripristino layout a colonna standard per .content */
    #formazione .content {
        padding-left: 15px; 
        padding-right: 15px;
        flex-direction: column; 
        align-items: center; 
    }
    /* Rimuovo order specifico */
    #formazione .text-content {
        margin-bottom: 15px; 
        width: 100%; 
        overflow: visible; 
        order: initial; 
    }
    #formazione .timeline-navigation-wrapper { 
        order: initial; 
        margin-bottom: 20px; /* Ripristino margine */
    }

    /* Stile Mobile Timeline: Elenco Verticale */
    .timeline-container {
        display: block; 
        /* overflow: hidden; Rimosso */
        padding-top: 0; 
        padding-bottom: 0;
        margin-top: 0; 
        /* position: relative; Non più necessario */
        min-height: auto; /* Altezza automatica */
    }

    .timeline-item {
        /* display: block !important; Rimosso */
        width: 100%;
        flex: none; 
        margin-right: 0;
        padding-top: 50px;
        padding-bottom: 30px;
        box-sizing: border-box;
        position: relative; 
        margin-bottom: 20px;
        overflow: hidden; /* Necessario per transizione max-height */
        max-height: 1000px; /* Valore molto grande per stato visibile */
        opacity: 1;
        visibility: visible;
        transition: max-height 0.6s ease, opacity 0.4s ease, visibility 0s linear 0s, padding 0.6s ease, margin 0.6s ease; /* Transizione + opacità/visibilità/padding/margin */
    }
    /* Mostra i primi 3 item */
    .timeline-item:nth-child(-n+3) {
        display: block; /* Non serve !important se il default hide è forzato */
    }
    /* Applica effetto fade al terzo item visibile (se non espanso) */
    /* Selettore corretto: controlla se il container NON ha la classe */
    .timeline-container:not(.timeline-expanded) .timeline-item:nth-child(3) {
        position: relative;
    }
    /* Selettore corretto per ::after */
    .timeline-container:not(.timeline-expanded) .timeline-item:nth-child(3)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px; /* Altezza della sfumatura */
        background: linear-gradient(to bottom, transparent, #FFFBF5 80%); /* Sfumatura verso colore sfondo bg1 */
        pointer-events: none; /* Non blocca click */
        z-index: 3; /* Sopra contenuto item */
    }

    /* Mostra il pulsante Mostra Tutto SOLO su mobile */
    #show-more-timeline {
        display: block; 
    }

    /* Quando espanso, NASCONDI la sfumatura */
    .timeline-expanded .timeline-item:nth-child(3)::after {
        display: none;
    }

    /* Nascondo linea e cerchio su mobile */
    .timeline-item::before, 
    .timeline-item::after { 
       display: none;
    }
    
    /* Contenuto occupa tutta la larghezza */
    .timeline-content {
        margin-left: 0; 
        height: auto; 
        min-height: auto; /* Altezza automatica */
        margin-bottom: 0;
        padding-top: 0; 
        border: none; /* Rimuovo bordo */
        background-color: transparent; /* Rimuovo sfondo */
        padding: 0; /* Rimuovo padding */
        box-shadow: none !important;
    }

    /* Anno centrato sopra il contenuto */
    .timeline-year {
        left: 50%; 
        top: 10px; /* Più vicino al top dell'item */
        transform: translateX(-50%); 
        z-index: 2; 
        position: absolute; 
    }

    /* Nascondo bottoni desktop E mobile con più specificità */
    #formazione .timeline-desktop-btn,
    .timeline-buttons-mobile {
        display: none;
    }

    /* Rimuovere stili specifici per mobile che potrebbero confliggere */
    #libri .image-content, 
    #libri .text-content { 
         order: initial; 
    } 
    .section-title-centered { 
        text-align: center;
    } 

    /* Stili per "Mostra Tutto" Timeline Mobile */
    .btn-show-more {
        display: none; /* Nascosto di default */
        margin: 20px auto 0; /* Spazio sopra, centrato */
        padding: 10px 20px; /* Padding come .btn */
        font-family: 'Belleza', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 5px; /* Stondatura */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Ombra */
        font-size: 1em;
        background-color: #5E7A5E; /* Verde Titoli */
        color: #FFFBF5 !important; /* Testo bianco sporco */
        border: 1px solid #5E7A5E;
    }
    .btn-show-more i {
        margin-left: 5px;
    }
    .btn-show-more:hover {
        background-color: #4a614a; /* Verde più scuro */
        color: #FFFBF5 !important;
        border: 1px solid #4a614a;
    }

    /* Nascondi item dal 4° in poi usando max-height + opacity, se non espanso */
    .timeline-container:not(.timeline-expanded) .timeline-item:nth-child(n+4) {
        /* display: none !important; Rimosso */
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        padding-top: 0; /* Rimuovi padding quando collassato */
        padding-bottom: 0;
        margin-bottom: 0;
        transition: max-height 0.6s ease, opacity 0.4s ease 0.2s, visibility 0s linear 0.6s, padding 0.6s ease, margin 0.6s ease; /* Delay su opacity/visibility al collasso */
    }

    .preventivo-form-container {
        width: 90% !important;
        max-width: 90% !important;
    }
}

/* NUOVA Media Query per layout #libri su schermi medi */
@media (max-width: 992px) {
    /* Impila contenuto sezione libri */
    section#libri .content { /* Aumentata specificità */
        display: flex; /* Assicura display: flex */
        flex-direction: column;
        text-align: center; 
        gap: 30px;
    }
    /* Imposto ordine specifico per Libri con più specificità */
    section#libri .text-content { /* Aumentata specificità */
        order: 1; /* Testo prima */
        width: 100%; 
        max-width: 100%; 
        padding: 0; 
    }
    section#libri .image-content { /* Aumentata specificità */
        order: 2; /* Immagine dopo */
        width: 100%; 
        max-width: 100%; 
        padding: 0; 
        margin-bottom: 20px; 
    }
    /* Adatta dimensione copertina */
    #libri .book-cover { /* Manteniamo specificità normale qui */
        max-width: 320px; /* Aumentata dimensione tablet */
        max-height: 480px; /* Aumentata dimensione tablet */
    }
    /* Assicura che lo swiper sia contenuto */
    #libri .reviews-swiper, /* Applico a #libri per specificità */
    .reviews-swiper { /* Regola generale per altri eventuali swiper */
        max-width: 100%;
        width: 100%;
    }
    /* Aumenta interlinea titoli su tablet */
    h1 {
        line-height: 1.6; /* Aumentata interlinea su tablet */
    }
}

/* SVG Clip Path per lo Squircle (da mettere nell'HTML o CSS) */
/* Se messo qui, assicurati che il browser lo supporti */
/* Esempio: lo metteremo nell'HTML per maggiore compatibilità */

/* Aggiungi questo SVG all'interno del body in index.html (o in fondo prima di </body>) */
/* <svg width="0" height="0" style="position:absolute; z-index: -1;">
  <defs>
    <clipPath id="squircleClip" clipPathUnits="objectBoundingBox">
      <path d="M 0.5,0 C 0.1,0 0,0.1 0,0.5 C 0,0.9 0.1,1 0.5,1 C 0.9,1 1,0.9 1,0.5 C 1,0.1 0.9,0 0.5,0 Z" />
    </clipPath>
  </defs>
</svg> */

/* Contenitore recensioni - RIMOSSO STILE SCROLL */
/*
.reviews-container {
    max-height: 400px; 
    overflow-y: auto; 
    padding-right: 15px; 
    margin-top: 20px; 
    border-left: 3px solid #E0E0E0; 
    padding-left: 15px; 
}
*/

/* Stili per il contenitore Swiper */
.reviews-swiper {
    width: 100%; /* Occupa la larghezza del contenitore padre (.text-content) */
    max-width: 600px; /* Limita la larghezza massima del carosello */
    margin: 20px auto 0; /* Centra il carosello e aggiunge margine sopra */
    padding-bottom: 50px; /* Spazio sotto per la paginazione e i bottoni */
    position: relative; /* Necessario per posizionare navigazione/paginazione */
}

/* Stile per ogni slide (e quindi blockquote) */
.reviews-swiper .swiper-slide {
    /* Manteniamo lo stile della blockquote precedente */
    margin-bottom: 0; /* Rimuovo il margine inferiore specifico della blockquote */
    display: flex; /* Per centrare la blockquote se necessario */
    justify-content: center;
    align-items: center;
}

.reviews-swiper blockquote {
    margin-bottom: 0; /* Rimuoviamo margine */
    /* padding: 25px; Rimosso padding generale */
    /* padding-left: 35px; Rimosso padding specifico */
    background-color: rgba(255, 255, 255, 0.1); /* Sfondo leggermente bianco trasparente su verde */
    border: none; /* Rimuovo bordi precedenti */
    border-left: 6px solid white; /* Bordo sinistro BIANCO */
    border-radius: 8px; /* Arrotondamento Proposta 2 (applica a tutti gli angoli) */
    width: 90%; /* Larghezza della citazione all'interno dello slide */
    box-sizing: border-box;
    position: relative; /* Necessario per posizionare ::before */
    padding: 30px 40px 30px 80px; /* Padding Proposta 2 (sinistro aumentato a 80px) */
    /* text-align: center; Rimosso, testo giustificato nel p */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombra Proposta 2 */
}

/* Modifico ::before per la virgoletta decorativa (Proposta 2) */
.reviews-swiper blockquote::before {
    content: '\201C'; /* Virgoletta iniziale */
    font-family: Georgia, serif;
    font-size: 4em;
    color: white; /* Virgoletta BIANCA */
    opacity: 0.6;
    position: absolute;
    top: 10px;
    left: 20px; /* Posizione spostata ancora a sinistra */
    line-height: 1;
    /* Rimuovo proprietà vecchia linea */
    /* bottom: 15px; */
    /* width: 5px; */
    /* background-color: #5E7A5E; */
    /* border-radius: 3px; */
}

.reviews-swiper blockquote p {
    margin-bottom: 20px; /* Aumento spazio (Proposta 2) */
    font-size: 1.1em; /* Dimensione testo (Proposta 2) */
    text-align: justify; /* Giustifica il testo della citazione */
}

.reviews-swiper blockquote footer {
    text-align: right; /* Centro anche il footer (Proposta 2) -> MODIFICATO a DESTRA */
    font-style: italic; /* Corsivo (Proposta 2) */
    font-size: 0.9em;
    color: #f0f0f0; /* Footer leggermente grigio su verde */
}

/* Stili per Paginazione Swiper (pallini) */
.reviews-swiper .swiper-pagination-bullet {
    background-color: white; /* Pallini bianchi */
    opacity: 0.5;
}

.reviews-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: white; /* Pallino attivo bianco */
}

/* Stili per Bottoni Navigazione Swiper (frecce) */
.reviews-swiper .swiper-button-next,
.reviews-swiper .swiper-button-prev {
    /* color: #5E7A5E; */
    /* --swiper-navigation-size: 30px; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* position: absolute; */
    /* z-index: 100; */
    /* padding: 10px; */
    /* background-color: rgba(200, 200, 200, 0.5); */ /* Sfondo temporaneo per debug */
    display: none; /* Nascondi definitivamente le frecce */
}

/*
.reviews-swiper .swiper-button-prev {
    left: 10px; 
}

.reviews-swiper .swiper-button-next {
    right: 10px; 
}

.reviews-swiper .swiper-button-next:after, 
.reviews-swiper .swiper-button-prev:after {
    
}
*/

/* Stile per la copertina del libro */
.book-cover {
    width: auto; /* Larghezza automatica per mantenere proporzioni */
    max-width: 380px; /* Aumentata larghezza massima */
    height: auto; /* Altezza automatica */
    max-height: 570px; /* Aumentata altezza massima */
    object-fit: contain; /* Mostra l'intera immagine senza tagliarla */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Aggiunge un po' di ombra */
    border-radius: 5px; /* Angoli leggermente arrotondati */
    margin-bottom: 15px; /* Aggiungo spazio sotto l'immagine */
}

/* Stili Timeline Orizzontale */

/* Modifico .content specifico per #formazione per dare spazio */
#formazione .content {
    max-width: none; 
    flex-wrap: nowrap; /* Impedisco che vada a capo */
    padding-left: 20px; /* Riduco padding laterale */
    padding-right: 20px;
    align-items: center; /* Allineo bottoni e timeline verticalmente */
    justify-content: space-between; /* Spazio tra bottoni e contenuto */
}

/* Aggiungo regola specifica per altezza sezione Formazione */
#formazione {
    min-height: auto; /* Altezza basata sul contenuto */
    padding-top: 60px; /* Mantiene padding top */
    padding-bottom: 20px; /* Ridotto padding bottom della sezione */
    padding-left: 20px; /* Mantiene padding laterale */
    padding-right: 20px;
}

#formazione .text-content {
    flex: 1; /* Permetto al contenuto di occupare lo spazio centrale */
    width: auto; /* Larghezza automatica */
    position: relative; 
    overflow: hidden; /* RIPRISTINATO */
}

.timeline-container {
    position: relative; 
    margin: 30px 0 10px; /* Ridotto margin bottom del container */
    padding: 20px 0; 
    padding-top: 60px; /* Spazio sopra per gli anni */
    display: flex; 
    overflow-x: auto; 
    overflow-y: hidden; 
    padding-bottom: 5px; /* Ridotto ulteriormente padding inferiore */
    width: 100%; 

    /* Nascondi scrollbar per browser moderni */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE e Edge vecchio */
}

/* Nascondi scrollbar per Webkit (Chrome, Safari, Edge nuovo, Opera) */
.timeline-container::-webkit-scrollbar {
    display: none;
}

.timeline-item {
    padding: 0 15px; 
    position: relative; 
    background-color: inherit;
    flex: 0 0 250px; 
    margin-right: 20px; 
    padding-top: 60px; /* Aumento ancora spazio sopra */
}

/* Linea orizzontale (::before) posizionata sopra il contenuto */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 45px; /* Sposto linea ancora più in basso */
    left: -10px; /* Deborda per connettersi */
    right: -10px; /* Deborda per connettersi */
    height: 3px;
    background-color: #5E7A5E;
    z-index: 0;
}

/* Cerchio sulla linea (::after) */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    left: 50%;
    top: 45px; /* Sposto cerchio ancora più in basso */
    transform: translateX(-50%) translateY(-50%); /* Centra sulla linea */
    background-color: #FFFBF5; 
    border: 3px solid #5E7A5E; 
    border-radius: 50%;
    z-index: 1; /* Sopra la linea */
}

/* Contenuto degli item (sotto linea/cerchio) */
.timeline-content {
    padding: 10px 15px; 
    position: relative;
    border-radius: 6px;
    background-color: rgba(253, 251, 248, 0.9);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Font rimangono piccoli */
.timeline-content h3, .timeline-content h4 {
    font-size: 1.0em; /* Ridotto */
    margin-bottom: 4px;
}
.timeline-content h4 {
     font-size: 0.9em; /* Ridotto */
     margin-top: 8px; 
}
.timeline-content p {
    font-size: 0.85em; /* Ridotto */
    margin-bottom: 6px;
}
.timeline-content small {
    font-size: 0.75em; /* Assicura dimensione */
    font-style: italic; /* Assicura corsivo */
}

/* Anno sulla timeline (sopra tutto) */
.timeline-year {
    position: absolute;
    width: 55px; 
    height: 26px;
    line-height: 26px;
    text-align: center;
    background-color: #5E7A5E;
    color: #FFFBF5;
    border-radius: 13px;
    font-weight: bold;
    font-size: 0.8em; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 2;
    top: 0px; /* Rimane in alto */
}

/* Modifico la media query generale per gestire la sezione formazione */
@media (max-width: 768px) {
    /* Ripristino layout a colonna standard per .content */
    #formazione .content {
        padding-left: 15px; 
        padding-right: 15px;
        flex-direction: column; 
        align-items: center; 
    }
    /* Rimuovo order specifico */
    #formazione .text-content {
        margin-bottom: 15px; 
        width: 100%; 
        overflow: visible; 
        order: initial; 
    }
    #formazione .timeline-navigation-wrapper { 
        order: initial; 
        margin-bottom: 20px; /* Ripristino margine */
    }

    /* Stile Mobile Timeline: Elenco Verticale */
    .timeline-container {
        display: block; 
        /* overflow: hidden; Rimosso */
        padding-top: 0; 
        padding-bottom: 0;
        margin-top: 0; 
        /* position: relative; Non più necessario */
        min-height: auto; /* Altezza automatica */
    }

    .timeline-item {
        /* display: block !important; Rimosso */
        width: 100%;
        flex: none; 
        margin-right: 0;
        padding-top: 50px;
        padding-bottom: 30px;
        box-sizing: border-box;
        position: relative; 
        margin-bottom: 20px;
        overflow: hidden; /* Necessario per transizione max-height */
        max-height: 1000px; /* Valore molto grande per stato visibile */
        opacity: 1;
        visibility: visible;
        transition: max-height 0.6s ease, opacity 0.4s ease, visibility 0s linear 0s, padding 0.6s ease, margin 0.6s ease; /* Transizione + opacità/visibilità/padding/margin */
    }
    /* Mostra i primi 3 item */
    .timeline-item:nth-child(-n+3) {
        display: block; /* Non serve !important se il default hide è forzato */
    }
    /* Applica effetto fade al terzo item visibile (se non espanso) */
    /* Selettore corretto: controlla se il container NON ha la classe */
    .timeline-container:not(.timeline-expanded) .timeline-item:nth-child(3) {
        position: relative;
    }
    /* Selettore corretto per ::after */
    .timeline-container:not(.timeline-expanded) .timeline-item:nth-child(3)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px; /* Altezza della sfumatura */
        background: linear-gradient(to bottom, transparent, #FFFBF5 80%); /* Sfumatura verso colore sfondo bg1 */
        pointer-events: none; /* Non blocca click */
        z-index: 3; /* Sopra contenuto item */
    }

    /* Mostra il pulsante Mostra Tutto SOLO su mobile */
    #show-more-timeline {
        display: block; 
    }

    /* Quando espanso, NASCONDI la sfumatura */
    .timeline-expanded .timeline-item:nth-child(3)::after {
        display: none;
    }

    /* Nascondo linea e cerchio su mobile */
    .timeline-item::before, 
    .timeline-item::after { 
       display: none;
    }
    
    /* Contenuto occupa tutta la larghezza */
    .timeline-content {
        margin-left: 0; 
        height: auto; 
        min-height: auto; /* Altezza automatica */
        margin-bottom: 0;
        padding-top: 0; 
        border: none; /* Rimuovo bordo */
        background-color: transparent; /* Rimuovo sfondo */
        padding: 0; /* Rimuovo padding */
    }

    /* Anno centrato sopra il contenuto */
    .timeline-year {
        left: 50%; 
        top: 10px; /* Più vicino al top dell'item */
        transform: translateX(-50%); 
        z-index: 2; 
        position: absolute; 
    }

    /* Nascondo bottoni desktop E mobile con più specificità */
    #formazione .timeline-desktop-btn,
    .timeline-buttons-mobile {
        display: none;
    }

    /* Ripristino regole generali mobile (se necessario) */
    /* La regola generale per .content è già column, quindi dovrebbe andare bene */
    /* .content { ... }  */

    /* Rimuovere stili specifici per mobile che potrebbero confliggere */
    #libri .image-content, 
    #libri .text-content { 
         order: initial; 
    } 
    .section-title-centered { 
        text-align: center;
    }
}

/* Stile per centrare titoli di sezione specifici */
.section-title-centered {
    text-align: center;
    width: 100%; /* Assicura che occupi tutta la larghezza per centrare */
}

/* Wrapper per titolo e bottoni timeline */
.timeline-navigation-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra il titolo */
    margin-bottom: 20px; /* Spazio prima della timeline */
}

/* Nascondo contenitore bottoni mobile per default (desktop) */
.timeline-buttons-mobile {
    display: none;
}

.timeline-btn {
    background-color: #5E7A5E;
    color: #FFFBF5;
    border: none;
    border-radius: 50%; 
    width: 40px; /* Leggermente più grandi */
    height: 40px;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2px; 
    flex-shrink: 0; /* Impedisco che si restringano */
}

.timeline-btn:hover {
    background-color: #4a614a;
}

.timeline-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Stili Footer */
footer#contatti {
    min-height: auto; /* Altezza automatica, non full screen */
    padding: 60px 20px 40px; /* Aumentato padding top, mantenuto padding laterale e bottom */
    text-align: center; /* Centra tutto il contenuto */
}

.footer-content h2 {
    margin-bottom: 1.2em; /* Aumentato margine inferiore specifico per il titolo footer */
    font-size: 3.5em; /* Dimensione titolo footer */
}

.social-links {
    margin-bottom: 25px;
}

.social-link {
    display: inline-flex; /* Usa Flexbox per allineamento interno */
    align-items: center; /* Allinea icona e testo verticalmente */
    margin: 0 15px;
    color: white; /* Link social bianco */
    text-decoration: none;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.social-link i {
    margin-right: 8px; /* Spazio tra icona e testo */
    color: white; /* Icone social bianche */
    font-size: 1.3em; /* Icone leggermente più grandi */
}

.social-link:hover,
.social-link:hover i {
    color: #f0f0f0; /* Leggermente grigio su hover */
}

.contact-info {
    margin-bottom: 25px;
    font-size: 1em;
}

.contact-info p {
    margin-bottom: 5px;
}

.contact-info a {
    color: white; /* Link email bianco */
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
    color: #f0f0f0; /* Sottolineatura e leggermente grigio su hover */
}

.copyright {
    font-size: 0.9em;
    color: #f0f0f0; /* Copyright leggermente grigio */
}

/* Adattamenti Footer per Mobile */
@media (max-width: 768px) {
    .footer-content h2 {
        font-size: 2em; /* Ridotta dimensione mobile (coerente con h2) */
    }
    .social-link {
        margin: 0 10px; /* Riduco spazio laterale */
        font-size: 1em;
    }
    .social-link i {
        font-size: 1.2em;
    }
}

/* Stile specifico per il pulsante Preventivo */
.btn-preventivo {
    background-color: #5E7A5E; /* Verde Titoli */
    color: #FFFBF5 !important; /* Testo bianco sporco */
    border: 1px solid #5E7A5E;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top: 30px; /* Spazio sopra il pulsante */
    padding: 12px 25px;
}

.btn-preventivo:hover {
    background-color: #4a614a; /* Verde più scuro */
    color: #FFFBF5 !important;
    border: 1px solid #4a614a;
}

/* Contenitore Form Preventivo */
.preventivo-form-container {
    max-width: 800px !important; /* Aumentato (di nuovo) */
    margin: 30px auto 0; /* Spazio sopra, centrato */
    padding: 30px;
    /* background-color: #F8F6F3; */ /* Rimosso colore solido */
    background-color: rgba(253, 251, 248, 0.9); /* Bianco sporco con trasparenza */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden; /* Per transizione altezza */
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, opacity 0.5s ease-out, background-color 0.3s ease;
    max-height: 1000px; /* Altezza massima quando visibile */
    opacity: 1;
    color: #5E7A5E; /* Colore testo default nel form (per fallback) */
    width: 60%;
}

/* Stato Nascosto del Form */
.preventivo-form-container.form-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    opacity: 0;
    border: none;
    box-shadow: none;
}

.preventivo-form-container h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #5E7A5E; /* Colore titolo */
    font-family: 'Belleza', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    /* color: #555; Rimosso */
    color: #5E7A5E; /* Colore label */
    font-weight: bold;
    font-size: 0.9em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    /* border: 1px solid #ccc; Rimosso */
    border: 1px solid #d8d3ca; /* Bordo leggermente più scuro */
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Belleza', sans-serif;
    font-size: 1em;
    background-color: rgba(255, 255, 255, 0.95); /* Sfondo input quasi bianco */
    color: #333333; /* Colore testo input */
}

/* Placeholder color */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999; /* Grigio chiaro per placeholder */
    opacity: 1; /* Necessario per Firefox */
}

.form-group textarea {
    resize: vertical;
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%235E7A5E%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E'); /* Freccia verde */
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    background-size: .65em auto;
    padding-right: 30px;
}

/* Stile Pulsante Invio Form (Invertito) */
.btn-submit-preventivo {
    background-color: #5E7A5E; /* Sfondo verde */
    color: #FFFBF5 !important; /* Testo bianco sporco */
    border: 1px solid #5E7A5E;
    padding: 12px 25px;
    /* Rimuovo stili precedenti se presenti */
}

.btn-submit-preventivo:hover {
    background-color: #4a614a; /* Sfondo verde più scuro */
    color: #FFFBF5 !important;
    border: 1px solid #4a614a;
}

/* Stili per messaggi feedback form */
.feedback-message {
    padding: 15px;
    margin: 20px auto;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    max-width: 800px; /* Allineato alla larghezza max del form */
    width: 60%; /* Allineato alla larghezza del form */
    box-sizing: border-box;
}

.feedback-success {
    background-color: #dff0d8; /* Verde chiaro */
    color: #3c763d; /* Verde scuro */
    border: 1px solid #d6e9c6;
}

.feedback-error {
    background-color: #f2dede; /* Rosso chiaro */
    color: #a94442; /* Rosso scuro */
    border: 1px solid #ebccd1;
}

/* ===== Pagina Privacy & Cookie Policy ===== */

.legal-page {
    background-color: #FFFBF5;
    color: #333333;
    min-height: 100vh;
    display: block;
    padding: 60px 20px 80px;
}

.legal-page .legal-header {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: left;
}

.legal-page .legal-back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #5E7A5E;
    text-decoration: none;
    font-weight: bold;
}

.legal-page .legal-back-link:hover {
    color: #4a614a;
    text-decoration: underline;
}

.legal-page h1 {
    font-size: 3em;
    margin-bottom: 0.4em;
}

.legal-page .legal-updated {
    color: #666;
    font-size: 0.9em;
    font-style: italic;
}

.legal-page .legal-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.legal-page .legal-content h2 {
    font-size: 1.8em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

.legal-page .legal-content h2:first-of-type {
    margin-top: 0;
}

.legal-page .legal-content h3 {
    font-family: 'Belleza', sans-serif;
    font-weight: bold;
    color: #5E7A5E;
    font-size: 1.2em;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

.legal-page .legal-content p {
    margin-bottom: 1em;
}

.legal-page .legal-content ul {
    margin: 0 0 1em 1.4em;
}

.legal-page .legal-content li {
    margin-bottom: 0.5em;
}

.legal-page .legal-content a {
    color: #5E7A5E;
    text-decoration: underline;
}

.legal-page .legal-content a:hover {
    color: #4a614a;
}

.legal-page .legal-placeholder {
    background-color: #fff3cd;
    color: #856404;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
}

/* Link legali nel footer */
.legal-links {
    margin-bottom: 25px;
    font-size: 0.9em;
}

.legal-links a {
    color: white;
    text-decoration: underline;
}

.legal-links a:hover {
    color: #f0f0f0;
}

/* Checkbox privacy nel form preventivo */
.form-privacy {
    font-size: 0.85em;
}

.form-privacy label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: normal;
    color: #333333;
    cursor: pointer;
}

.form-privacy input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
    width: auto;
    cursor: pointer;
}

.form-privacy a {
    color: #5E7A5E;
    text-decoration: underline;
}

.form-privacy a:hover {
    color: #4a614a;
}

@media (max-width: 768px) {
    .legal-page h1 {
        font-size: 2.2em;
    }
    .legal-page .legal-content h2 {
        font-size: 1.5em;
    }
}