/* Ottimizzazione x Pc portatili */

@media screen and (min-width: 1100px) and (max-width: 1550px) {
    .card {
        max-width: 80%;       /* Un buon compromesso per il 13 pollici */
        padding: 50px 80px;   /* Padding generoso ma non eccessivo come i 150px originali */
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: -40px;
        border-radius: 50px;
    }

    .colonna1, .colonna2 {
        padding: 40px;        /* Spazio interno bilanciato */
    }

    .colonna2 p {
        margin-bottom: 40px;
    }

    .cardtesto1 {
        display: grid;
        grid-template-columns: 7fr 3fr; 
        margin-top: 100px;
        align-items: center;
    }

    .colonna3 {
        /* Sostituiamo i 400px/300px con valori dinamici */
        padding-left: 20%;  
        padding-right: 15%;
        /* Se vuoi mantenere l'effetto "molto centrato", usa max-width invece di padding fissi */
    }

    .colonna4 {
        height: 100%;
    }

    .cardtesto2 {
        display: grid;
        grid-template-columns: 4fr 6fr; 
        margin-top: 100px;
        margin-bottom: 100px;
        align-items: center;
    }

    .colonna5 {
        height: 100%;
    }

    .colonna6 {
        /* Trasformiamo i 400px/300px fissi in percentuali fluide */
        /* Su MacBook Air (13"), il 10% e l'8% garantiscono eleganza senza schiacciare il testo */
        padding-left: 20%;
        padding-right: 15%; 
    }

    .fascia {
        display: grid;
        /* Proporzioni originali ma con gap più gestibile */
        grid-template-columns: 1.2fr 0.8fr 1.2fr; 
        gap: 40px; 
        padding: 80px 8%; /* 8% è perfetto per il MacBook Air */
        justify-content: center; 
        align-items: start;
        font-size: 16px;
    }

    .colonna8 {
        padding-left: 40px; /* Ridotto da 100px a 40px */
        border-left: 0px ; 
    }

    .colonna9 {
        padding-left: 40px; /* Ridotto da 100px a 40px */
        border-left: 0px;
    }

    h5 {
        font-size: 28px;
    }

    .cardtesto3 {
        display: grid;
        grid-template-columns: 7fr 3fr; 
        margin-top: 100px;
        align-items: center;
    }

    .colonna10 {
        /* Invece di 400px, usiamo il 15% per dare aria senza schiacciare.
           Il padding-right è minore perché c'è già il gap della griglia e l'immagine. */
        padding-left: 20%; 
        padding-right: 15%;
    }

    .colonna11 {
        height: 100%; 
        min-height: 500px; /* Assicura che l'immagine abbia una bella presenza */
    }

    .box-beige {
        background-color: #EAE2D8;
        max-width: 80%;
        padding: 100px 150px 100px 150px;
        margin: 0 auto;
        text-align: start;
        display: grid;
        grid-template-columns: 1fr 1.8fr; /* Sinistra stretta, destra larga */
        color:#4A4B4D;
        border-radius: 50px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        margin-top: -500px; 
        position: relative;
        z-index: 10;
        gap: 50px;
    }

    .faq-section {
        margin: 150px 300px;
        font-family: "Poppins", sans-serif;
        color: #4A4B4D;
      }

      .recensioni p {
        max-width: 80%;
      }


    .sezione-form-contatti {
        background-color: #F9F7F2; /* Il colore crema del tuo sfondo */
        padding: 150px 100px;
        font-family: 'Poppins', sans-serif; /* O il font che hai usato in XD */
    }
    
    .form-wrapper {
        max-width: 1200px; /* Allineato al tuo footer */
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.2fr 1fr; /* La colonna sinistra è leggermente più larga */
        gap: 100px;
        align-items: start;
    }

    .sezionepost {
        display: flex;
        max-height: 270px;
        width: 100%;
    }
}



/* Ottimizzazione x Ipad */

@media screen and (max-width: 1024px) and (orientation: portrait) {

    .card {
        max-width: 90%;
        padding: 80px 90px;
        grid-template-columns: 1fr; /* Colonna singola */
        margin-top: -20px;
        gap: 20px;
        
    }

    .colonna1, .colonna2 {
        padding: 20px;
    }

    /* 2. SEZIONI TESTO + IMMAGINE (cardtesto 1, 2, 3) */
    /* Invertiamo l'ordine se necessario per avere sempre immagine sopra o sotto */
    .cardtesto1, .cardtesto2, .cardtesto3 {
        grid-template-columns: 1fr; /* Stack verticale */
        margin-top: 50px;
        text-align: start;
    }

    .colonna3, .colonna6, .colonna10 {
        padding: 40px 10%; /* Riduciamo i padding laterali enormi */
    }

    .colonna11 {
        min-height: 300px; /* Riduciamo l'altezza dell'immagine su tablet */
    }

    /* 3. FASCIA A 3 COLONNE: Diventa a colonna singola o 2+1 */
    .fascia {
        grid-template-columns: 1fr; 
        gap: 30px;
        padding: 50px 5%;
        text-align: center;
    }

    .colonna8, .colonna9 {
        padding-left: 0;
        border-left: none;
    }

    /* 4. BOX BEIGE: Molto importante per l'iPad */
    .box-beige {
        max-width: 92%;
        padding: 70px 100px;
        margin-top: -200px; /* Riduciamo il margine negativo o uscirà dallo schermo */
        gap: 30px;
    }

    /* 5. FAQ E RECENSIONI */
    .faq-section {
        margin: 15%; /* Riduciamo drasticamente i margini laterali (erano 300px!) */
    }

    .recensioni p {
        max-width: 98%;
        margin: 0 auto;
    }

    /* 6. FORM CONTATTI */
    .sezione-form-contatti {
        padding: 100px 10%;
    }

    .form-wrapper {
        gap: 50px;
    }

    /* 7. POST */
    .sezionepost {
        max-height: 200px;
    }

    h5 {
        font-size: 24px;
    }

    nav {
        /* Riduciamo il padding laterale da 190px a circa il 5% */
        padding: 20px 5%;
    }



    /* 2. HERO SECTION */
    .herosection {
        /* Riduciamo il padding e l'altezza eccessiva (900px sono troppi per un iPad) */
        padding: 0 5%;
        height: 800px; 
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centra verticalmente il contenuto */
    }

    .hero-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px; /* Crea spazio uniforme senza usare margini complessi */
        width: 100%;
    }

    h1 {
        font-size: 2.5rem; /* Ridimensionamento dinamico */
    }

    h2 {
        font-size: 35px; /* Da 45px originale */
    }

    h3 {
        font-size: 32px; /* Da 40px originale */
    }

    /* 3. VOCI MENU (Sotto la Hero) */
    .vocimenù {
        /* Trasformiamo i 190px in un padding fluido */
        padding: 20px 5% 60px 5%;
        /* Se le voci sono troppe, permettiamo loro di andare a capo se necessario */
        flex-wrap: wrap; 
        justify-content: center;
        gap: 20px;
    }

    /* 4. TESTI GENERALI */
    p, ul, li {
        font-size: 16px; /* Leggermente più piccolo per leggibilità su tablet */
    }

    footer {
        padding: 80px 5%; 
    }

    /* 2. Gestione griglia: passiamo a una colonna */
    .sectionfooter {
        grid-template-columns: 1fr; /* Una colonna sola per non schiacciare i testi */
        gap: 50px;                 /* Riduciamo il gap enorme di 200px */
        text-align: center;        /* Centriamo il testo per un look più pulito su tablet */
    }

    /* 3. Reset dei padding interni */
    .colonnafooter1 {
        padding-left: 0;           /* Togliamo il padding fisso da 70px */
    }

    /* 4. Linea orizzontale */
    footer hr {
        margin: 40px 0;            /* Riduciamo lo spazio sopra e sotto la linea */
    }

    /* 5. Footer finale */
    .chiusurafooter {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}



/* Ottimizzazione smartphone */

@media only screen and (min-width: 300px) 
                   and (max-width: 676px) {
    /* 1. HEADER & HAMBURGER (Senza cambiare HTML) */
    nav {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 15px !important;
    }
    .nav-cta { display: none; } /* Nasconde link call nella fascia azzurra */

    .vocimenù {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 20px !important;
        height: 80px;
        background: transparent;
        transition: all 0.4s ease;
        margin-bottom: 50px;
        margin-top: 0px;
    }

    p{
        font-size: 14px;
    }

    a{
        font-size: 14px;
    }

    /* Nascondiamo le voci testo di base */
    .vocimenù li:not(:nth-child(3)) {
        display: none;
    }

    /* Logo (3° li) a sinistra */
    .vocimenù li:nth-child(3) {
        order: -1;
        display: block !important;
    }
    .vocimenù li img {
        height: 45px !important;
    }

    /* Icona Hamburger tramite pseudo-elemento */
    .vocimenù::after {
        /* Creiamo la linea centrale */
        content: ""; 
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: white;
        
        /* Creiamo le altre due linee con le ombre */
        /* Sintassi: x y blur color */
        box-shadow: 0 -8px 0 white, 0 8px 0 white;
        
        vertical-align: middle;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* Menu APERTO Full Screen */
    .vocimenù.mobile-active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #4A4B4D; /* Colore scuro del tuo brand */
        flex-direction: column !important;
        justify-content: center !important;
        z-index: 9999;
        display: flex !important;
    }

    .vocimenù.mobile-active li {
        display: block !important;
        margin: 15px 0;
    }

    .vocimenù.mobile-active li a {
        color: white;
        font-size: 20px;
        border: none;
    }

    .vocimenù.mobile-active li a:hover {
        color: rgb(54, 54, 54);
        font-size: 16px;
        border: none;
    }

    .vocimenù::after {
        content: ""; 
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: white;
        box-shadow: 0 -8px 0 white, 0 8px 0 white; /* Le 3 linee */
        vertical-align: middle;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    /* 2. Stato Attivo: La "X" al centro in alto */
    .vocimenù.mobile-active::after {
        content: "✕";
        background-color: transparent; /* Nasconde la linea centrale dell'hamburger */
        box-shadow: none;              /* Rimuove le altre due linee */
        
        position: fixed;
        top: 100px;        /* Distanza dal bordo superiore */
        left: 80%;        /* Sposta l'inizio della X a metà larghezza */
        transform: translateX(-50%); /* La "tira indietro" del 50% per centrarla perfettamente */
        
        font-size: 20px;
        color: white;
        z-index: 10000;   /* Per essere sicuri che stia sopra il menu aperto */
    }

    .vocimenù li:nth-child(2) {
        display: none !important;
    }
    

    /* 2. LAYOUT CORPO PAGINA */
    .herosection {
        height: auto !important;
        padding: 110px 50px 150px 50px !important;
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
        url(IMG/LCF05060\ 2.jpg);
        background-size: cover;
        background-position: center;
        width: 100%;
    }

    h2 { font-size: 15px !important; }

    .p-hero {
        font-size: 16px !important;
        padding-bottom: 40px;
    }

    h1{
        font-size: 30px;
    }

    .herosection br {
        display: none !important;
    }

    .hero-buttons{
        display:flex;
        flex-direction: column;
    }


    /* Card IdentiTè */
    .card {
        margin-top: -20px !important;
        padding: 40px 20px !important;
        gap: 0px !important;

        /* 1. Centra le colonne della griglia */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        
        /* 2. Centra tutto il testo e le immagini all'interno */
        text-align: center !important;
    }
    
    .card img {
       height: 60px;

    }
    /* 3. Assicura che i bottoni all'interno non siano allineati a sinistra */
    .card a {
        margin: 0 auto !important;
        display: inline-block !important;
    }

    /* Sezioni Immagine + Testo */
    .cardtesto1, .cardtesto2, .cardtesto3 {
        grid-template-columns: 1fr;
    }

    /*.colonna3, .colonna6, .colonna10, .faq-section, {
        padding: 40px 60px;
        margin: 0 auto;
    }*/

    .fascia{
        padding: 70px 60px;
    }

    .colonna9, .colonna8 {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #4A4B4D;
        padding-top: 20px;
    }

        .box-beige {
            margin-top: -200px !important; /* Margine ridotto */
            display: flex !important;
            flex-direction: column !important;
            gap: 25px !important;
            padding: 60px 90px !important;
            max-width: 92% !important;
        }
    
        /* 1. Rendiamo col-info "invisibile" per spostare i suoi figli */
        .col-info {
            display: contents !important; 
        }
    
        /* 2. Assegniamo l'ordine esatto a ogni pezzo */
        .titolo-top {
            order: 1 !important;
        }
    
        .col-testo {
            order: 2 !important;
            padding: 0 !important;
        }
    
        .cta-bottom {
            order: 3 !important;
            padding-top: 25px;
            margin-top: 10px;
        }
    
        /* Reset stili interni per mobile */
        .cta-bottom p {
            max-width: 100% !important;
            margin-bottom: 10px !important;
        }
    
        .cta-bottom a {
            width: 100%;
            text-align: center;
            margin-top: 10px;
        }


    /* FAQ e Recensioni */

    
    .faq-section { margin: 100px 60px !important; }
    
    .recensioni { padding: 50px 50px !important;
   height: 800px;}

    /* Il contenitore che racchiude le due frecce */
.contenitore-frecce {
    display: flex;
    justify-content: center; /* Centra le frecce orizzontalmente */
    gap: 40px;               /* Spazio tra la freccia sinistra e quella destra */
    margin-top: 20px;        /* Spazio tra la fine della recensione e le frecce */
}

/* Stile per le singole frecce */
.freccia {
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    color: #ffffff;             /* Cambia il colore se serve */
    transition: transform 0.2s;
}

.freccia:hover {
    transform: scale(1.2);    /* Effetto ingrandimento al passaggio del mouse */
}


    /* Instagram Feed */
    .sezionepost {
        display: none;
}
   

    .colonna5, .immaginesfondo{
        display: none !important;
    }


a{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 15px;
    padding: 10px 20px 10px 20px;
    border-radius: 50px;
    border: 1px solid #4A4B4D;
    background-color: transparent;
    text-decoration: none;
    color: #4A4B4D;
    cursor: pointer;
    margin: 0px 15px 0px 15px;

}

.cta-bottom p{
    font-size: 16px;
    margin-top: 0px!important;
}

.colonna4 {
    padding-top: 30px;
}

.colonna7{
    margin-bottom: 20px;
}

.col-testo {
    margin-top: 0px!important;
}

.titolo-top h3{
    padding-bottom: 20px !important;
}

li{
    font-size: 14px;
}

h3{
    font-size: 28px;
}
}