/* Reset e Base */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    scroll-behavior: smooth;

}



:root {

    --primary: #0052cc;

    --secondary: #00b4d8;

    --dark: #1e293b;

    --light: #f8fafc;

    --gray: #64748b;

}



body {

    background-color: var(--light);

    color: var(--dark);

    line-height: 1.6;

}



.contenitore {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

}



/* Overlays trasparenti per dare massima visibilità alle immagini di sfondo */

.sfondo-overlay {

    background: rgba(15, 23, 42, 0.40); /* Velo scuro leggero */

    width: 100%;

    height: 100%;

    padding: 80px 0;

}



.sfondo-overlay-chiaro {

    background: rgba(248, 250, 252, 0.65); /* Velo chiaro leggero */

    width: 100%;

    height: 100%;

    padding: 80px 0;

}



/* Allineamento Logo in cima alla pagina */

.brand {

    display: flex;

    align-items: center;

    gap: 15px;

}



.logo-sito {

    width: auto;

    height: 50px;

    box-shadow: none;

    border-radius: 0;

}



/* ==========================================================================

   PRIMA PARTE: DESCRIZIONE CON FOTO 1 SFONDO 

   ========================================================================== */

.sfondo-foto1 {

    background: linear-gradient(rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.2)), url('foto1.jpg') no-repeat center center;

    background-size: cover;

    background-attachment: fixed; /* Effetto parallasse */

}



.sezione-descrizione {

    color: #ffffff;

}



.brand span {

    font-size: 24px;

    color: #00e5ff; 

    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);

}



.sezione-descrizione nav {

    margin-bottom: 40px;

}



nav a {

    text-decoration: none;

    color: #ffffff;

    margin-right: 25px;

    font-weight: 600;

    transition: color 0.3s;

    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);

}



nav a:hover {

    color: var(--secondary);

}



.sezione-descrizione h1 {

    font-size: 46px;

    color: #ffffff;

    margin-bottom: 20px;

    max-width: 800px;

    text-shadow: 2px 2px 8px rgba(0,0,0,0.9);

}



.sezione-descrizione p {

    font-size: 20px;

    color: #ffffff;

    margin-bottom: 40px;

    max-width: 750px;

    text-shadow: 1px 1px 5px rgba(0,0,0,0.9);

}



/* Pulsanti */

.bottoni {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}



.bottone-principale, .bottone-secondario {

    display: inline-block;

    padding: 14px 32px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: 600;

    transition: transform 0.2s, background 0.3s;

    border: none;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

}



.bottone-principale { background: var(--primary); color: white; }

.bottone-principale:hover { background: #0041a3; transform: translateY(-2px); }

.bottone-secondario { background: rgba(0, 0, 0, 0.4); color: white; border: 2px solid white; }

.bottone-secondario:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }



/* ==========================================================================

   SECONDA PARTE: SEZIONE BIANCA CON FOTO 2 SFONDO

   ========================================================================== */

.sfondo-foto2 {

    background: url('foto2.jpg') no-repeat center center;

    background-size: cover;

    background-attachment: fixed;

}



.sezione-bianca h2 {

    text-align: center;

    font-size: 36px;

    margin-bottom: 10px;

    color: var(--dark);

    text-shadow: 0 1px 2px rgba(255,255,255,0.8);

}



.sezione-bianca h2::after {

    content: '';

    display: block;

    width: 60px;

    height: 4px;

    background-color: var(--primary);

    margin: 10px auto 0;

    border-radius: 2px;

}



.sottotitolo {

    text-align: center;

    color: #334155; 

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 50px;

}



.griglia {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    margin-bottom: 60px;

}



.scheda {

    background: rgba(255, 255, 255, 0.96); 

    padding: 40px 30px;

    border-radius: 8px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

    text-align: center;

    border: 1px solid #cbd5e1;

    position: relative;

}



.scheda h3 {

    margin-bottom: 15px;

    font-size: 22px;

    color: var(--dark);

}



.scheda p {

    color: #475569;

    font-size: 15px;

}



.etichetta {

    position: absolute;

    top: 15px;

    right: 15px;

    background: #22c55e;

    color: white;

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

}



.nota {

    margin-top: 15px;

    font-weight: bold;

    color: var(--primary);

}



/* ==========================================================================

   TERZA PARTE: CONTATTI CON FOTO 3 SFONDO (Finale)

   ========================================================================== */

.sfondo-foto3 {

    background: linear-gradient(rgba(30, 41, 59, 0.3), rgba(30, 41, 59, 0.3)), url('foto3.jpg') no-repeat center center;

    background-size: cover;

}



.modulo-e-info {

    display: flex;

    gap: 50px;

    flex-wrap: wrap;

    align-items: center;

}



.testo-contatti {

    flex: 1;

    min-width: 300px;

}



.testo-contatti h2 {

    font-size: 36px;

    margin-bottom: 15px;

    color: #ffffff;

    text-shadow: 2px 2px 6px rgba(0,0,0,0.9);

}



.testo-contatti p {

    color: #ffffff;

    font-size: 17px;

    margin-bottom: 30px;

    text-shadow: 1px 1px 4px rgba(0,0,0,0.9);

}



.lista-contatti {

    list-style: none;

}



.lista-contatti li {

    margin-bottom: 15px;

    font-size: 18px;

    color: #ffffff;

    text-shadow: 1px 1px 4px rgba(0,0,0,0.9);

}



.lista-contatti strong {

    color: #00e5ff;

    margin-right: 8px;

}



/* Form Modulo sopra la foto */

.modulo {

    flex: 1;

    min-width: 300px;

    background: rgba(255, 255, 255, 0.96);

    padding: 40px;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.4);

}



.modulo label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: var(--dark);

}



.modulo button {

    width: 100%;

    background: var(--primary);

    color: white;

    padding: 14px;

    border: none;

    border-radius: 6px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.3s;

}



.modulo button:hover {

    background: #0041a3;

}



/* Footer Bottom */

.footer-bottom {

    text-align: center;

    margin-top: 50px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.4);

    color: #ffffff;

    font-size: 14px;

    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);

}



/* ==========================================================================

   RESPONSIVE DESIGN (Ottimizzazione Mobile)

   ========================================================================== */

@media (max-width: 768px) {

    .sfondo-overlay, .sfondo-overlay-chiaro {

        padding: 40px 0;

    }



    .sezione-descrizione nav {

        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 10px;

    }



    nav a { margin: 0 10px; }

    .sezione-descrizione { text-align: center; }

    .bottoni { justify-content: center; }

    .sezione-descrizione h1 { font-size: 28px; }

    .sezione-descrizione p { font-size: 16px; }

    .sezione-bianca h2 { font-size: 28px; }

    .modulo-e-info { flex-direction: column; gap: 30px; }

    .modulo { padding: 25px; }

    

    .brand {

        flex-direction: column;

        gap: 8px;

    }

    

    .sfondo-foto1, .sfondo-foto2 {

        background-attachment: scroll;

    }

}