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

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');





@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&display=swap');





:root {

    --blu-scuro: #2c3e50;

    --oro-spei: #1B7B2C; 

    --testo-nav: #003366; 

    --bianco: #ffffff;

}



/* --- RESET TOTALE --- */

* {

    box-sizing: border-box; /* Impedisce al padding di rompere le larghezze */

}



body, html {

    margin: 0;

    padding: 0;

    width: 100%;

    min-height: 100%;

    font-family: 'Montserrat', sans-serif;

    background-color: #ffffff;

}



/* --- TOP BAR --- */

.top-bar {

    background-color: var(--blu-scuro);

    color: white;

    padding: 10px 5%;

    display: flex;

    width: 100%;

    justify-content: flex-start;

    gap: 30px;

    font-size: 14px;

    position: relative;

    z-index: 101;

}



.top-bar a {

    color: white;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 8px;

}



/* --- NAVBAR --- */

.navbar {

    background-color: var(--bianco);

    padding: 15px 5%;

    display: flex;

    width: 100%; /* Forza l'estensione su tutta la larghezza */

    justify-content: space-between; /* Spinge Logo a sinistra e Link a destra */

    align-items: center;

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

    position: sticky;

    top: 0;

    z-index: 10005 !important;

}

/* Nasconde la firma su Desktop */

.mobile-signature {

    display: none;

}

/* Contenitore per dare prospettiva 3D */

.logo-container {

    perspective: 1000px;

}



.logo-spin {

    width: 60px; /* Regola in base alle tue esigenze */

    height: auto;

    border-radius: 50%; /* Essendo un logo a cerchio, enfatizza l'effetto moneta */

    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

    display: block;

}



/* Animazione quando si passa il mouse sopra (Hover) */

.logo-link:hover .logo-spin {

    transform: rotateY(360deg); /* Gira su se stesso sull'asse verticale */

}



/* Opzionale: un leggero riflesso tipo moneta durante il giro */

.logo-link:hover .logo-spin {

    filter: brightness(1.2);

}

.logo-container img { 

    height: 60px; 

    display: block;

}



.nav-links {

    display: flex;

    list-style: none;

    gap: 25px;

    margin: 0;

    padding: 0;

}



.nav-links li a {

    text-decoration: none;

    color: var(--testo-nav) !important; /* Colore base blu */

    font-weight: 600;

    font-size: 16px;

    transition: 0.3s;

}



/* Colore per Home (active) e Hover */

.nav-links li a:hover, 

.nav-links li a.active { 

    color: var(--oro-spei) !important; 

}



/* --- VIDEO BACKGROUND --- */

.video-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    

    background: #000;

}



.video-background video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* --- CONTENUTO CENTRALE --- */

.content {

    position: relative; 

    z-index: 2;

    padding: 5%;

    color: white;

    /*text-align: left;*/

}



.content h1, 

.content h2, 

.content h3 { 

    opacity: 0; 

    transform: translateY(30px); /* Partono 30px più in basso */

    transition: opacity 1s ease-out, transform 1s ease-out; /* Transizione fluida */

}



.content h1 { 

    font-size: 4rem; 

    text-transform: uppercase; 

    margin: 0; 

    line-height: 1.1;

    

 }



.content h2 { 

    font-size: 1.8rem; 

    margin: 15px 0 15px 5px;

    text-transform: uppercase;

    font-weight: 650;

    letter-spacing: 0; /* Dà respiro e un aspetto premium */





 }



.content h3 {

     font-size: 1.2rem;

     font-weight: 580; 

     margin: 0;

     margin-left: 6px; 

     margin-top: 15px;

     text-transform: none; 

    }



.content.start-animation h1,

.content.start-animation h2,

.content.start-animation h3 {

    opacity: 1;

    transform: translateY(0); /* Tornano alla posizione originale */

}



/* --- SEZIONE AZIENDA --- */

   .azienda-section {

    position: relative;

    z-index: 10; /* Deve essere maggiore del video */

    background-color: #f7faf8;; /* Sfondo solido per coprire il video */

    padding: 80px 0;

    width: 100%;

}



.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 ;

    border-radius: 20px;

}



.mini-title {

    font-size: 14px;

    letter-spacing: 2px;

    color: #000;

    margin-bottom: 30px;

    font-family: 'Montserrat', sans-serif;

    font-weight: 700

}



/* Lineetta verde sotto il titolo per richiamare il logo */

.mini-title::after {

    content: '';

    display: block;

    width: 40px;

    height: 3px;

    background-color: #1B7B2C;

    margin-top: 8px;

}



.azienda-grid {

    display: flex;

    gap: 50px;

    

}



.azienda-text {

    flex: 1; line-height: 1.8; color: #333;

}



.azienda-text p {

    margin-bottom: 20px;

}



.hero {

    position: relative;

    width: 100%;

    height: 100vh; /* Occupa tutto lo schermo */

    display: flex;

    align-items: center;

    justify-content: flex-start;

    overflow: hidden; /* Evita che il video "esca" dai bordi */

}



.tecnici-section {

    background-color: #1B7B2C; /* Verde esatto del tuo logo */

    padding: 100px 0;

    width: 100%;

    text-align: center;

    position: relative;

    z-index: 10;

}



.container-small {

    max-width: 1000px; /* Più stretto per replicare lo stile dell'immagine */

    margin: 0 auto;

    padding: 0 8%;

}



.title-white {

    color: #ffffff;

    font-size: 38px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 40px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.description-white {

    color: #ffffff;

    font-size: 18px;

    line-height: 1.7;

    font-weight: 400;

    max-width: 900px;

    margin: 0 auto;

}



/* --- SEZIONE PRODOTTI E CARD TECNICHE --- */

.prodotti-section {

    background-color: #ffffff; /* Bianco pulito per far risaltare le card */

    padding: 100px 0;

    width: 100%;

}



.cards-grid {

    display: flex;

    justify-content: space-between;

    gap: 30px;

    align-items: stretch;

}



.card {

    background-color: #ffffff;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Ombra leggera di base */

    overflow: hidden;

    width: calc(33.33% - 20px); /* Card su tre colonne con gap */

    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animazione fluida */

    border: 1px solid #f0f0f0; /* Bordo sottile e chiaro */

    display: flex;

    flex-direction: column;

}



/* Animazione al passaggio del mouse */

.card:hover {

    transform: translateY(-8px); /* Leggera elevazione */

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Ombra più pronunciata */

    border-color: #e0e0e0; /* Bordo leggermente più scuro */

}



.card-image {

    height: 250px;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #f9f9f9; /* Sfondo leggero per le immagini */

}



.card-image img {

    max-height: 90%;

    max-width: 90%;

    object-fit: contain; /* Adatta l'immagine senza tagliarla */

    transition: transform 0.5s ease; /* Animazione zoom dell'immagine */

}



/* Leggero zoom dell'immagine all'hover */

.card:hover .card-image img {

    transform: scale(1.05);

}



.card-details {

    padding: 25px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.card-title {

    color: var(--testo-nav);

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 20px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.technical-data {

    list-style: none;

    padding: 0;

    margin: 0;

    font-size: 15px;

    line-height: 1.6;

    color: #555;

}



.technical-data li {

    margin-bottom: 8px;

    padding-bottom: 8px;

    border-bottom: 1px solid #f0f0f0; /* Linea di divisione tra i dati */

}



.technical-data li:last-child {

    border-bottom: none; /* Rimuove la linea dall'ultimo elemento */

    margin-bottom: 0;

}



.technical-data li strong {

    color: #333;

    font-weight: 600;

}

.btn-card {

    display: block;

    width: 100%;

    background-color: #1B7B2C; /* Il tuo verde logo */

    color: white;

    text-align: center;

    padding: 12px;

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;

    border-radius: 5px;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: background 0.3s ease;

    

    /* Spinge il bottone sempre in fondo alla card */

    margin-top: auto; 

}



.btn-card:hover {

    background-color: #145E21; /* Verde scuro al passaggio del mouse */

}





.zigzag-section {

    background-color: #0D2613; /* Verde Scuro Notte */

    padding: 100px 0;

    width: 100%;

    overflow: hidden; /* Evita scroll orizzontali indesiderati */

}



.zigzag-row {

    display: flex;

    align-items: center;

    width: 100%;

    margin-bottom: 120px;

}



.zigzag-row:last-child {

    margin-bottom: 0;

}



/* Gestione Alternanza */

.zigzag-row { flex-direction: row; }

.zigzag-row:nth-child(even) { flex-direction: row-reverse; }



/* Testo: Padding calcolato per allinearsi al resto del sito */

.zigzag-text {

    flex: 1;

    padding: 0 8% 0 10%; /* Spazio generoso per non appiccicarsi all'immagine */

}



.zigzag-row:nth-child(even) .zigzag-text {

    padding: 0 10% 0 8%;

}



/* Immagine: Occupa lo spazio fino al bordo schermo */

.zigzag-image {

    flex: 1.3;

    height: 550px; /* Altezza fissa controllata */

}



.zigzag-image img {

    width: 100%;

    height: 100%;

    object-fit: cover; /* L'immagine riempie il vano senza deformarsi */

    display: block;

}



/* Arrotondamento Selettivo (Solo angoli interni) */









/* Stili Testo */

.mini-title-green {

    color: #1B7B2C;

    font-size: 14px;

    letter-spacing: 2px;

    margin-bottom: 15px;

}



.title-white {

    color: white;

    font-size: 38px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 25px;

    text-transform: uppercase;

}



.description-light {

    color: #e0e0e0;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 35px;

}





.zigzag-image img, 

.zigzag-image video {

    width: 100%;

    height: 100%;

    object-fit: cover; /* Mantiene il video a tutto schermo senza distorcerlo */

    display: block;

}



.contatti-section {

    background-color: #f7faf8; /* Verde chiarissimo tendente al bianco */

    padding: 100px 0;

    width: 100%;

    display: flex;

    justify-content: center;

}



.container-contatti {

    max-width: 1200px;

    width: 90%;

    background-color: white;

    padding: 60px;

    position: relative; /* Per l'angolo */

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

}



/* L'angolo marcato in alto a sinistra */

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

   CORNICE A 4 ANGOLI (Focus Frame)

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



/* 1. Il livello invisibile per gli angoli di sinistra */

.corner-accent {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none; /* FONDAMENTALE: fa passare i click del mouse verso il form sottostante */

    z-index: 10;

}



/* 2. Angolo ALTO A SINISTRA */

.corner-accent::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 80px;

    height: 80px;

    border-top: 6px solid #0D2613;

    border-left: 6px solid #0D2613;

}



/* 3. Angolo BASSO A SINISTRA */

.corner-accent::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 80px;

    height: 80px;

    border-bottom: 6px solid #0D2613;

    border-left: 6px solid #0D2613;

}



/* 4. Angolo ALTO A DESTRA */

.container-contatti::before {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 80px;

    height: 80px;

    border-top: 6px solid #0D2613;

    border-right: 6px solid #0D2613;

    pointer-events: none;

}



/* 5. Angolo BASSO A DESTRA (sostituisce quello che ti ho dato prima) */

.container-contatti::after {

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    width: 80px;

    height: 80px;

    border-bottom: 6px solid #0D2613;

    border-right: 6px solid #0D2613;

    pointer-events: none;

}

/* L'angolo marcato in basso a destra (generato senza toccare l'HTML) */

.container-contatti::after {

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    width: 80px;  /* Stessa larghezza dell'angolo in alto */

    height: 80px; /* Stessa altezza dell'angolo in alto */

    border-bottom: 6px solid #0D2613; /* Bordo sotto */

    border-right: 6px solid #0D2613;  /* Bordo a destra */

    pointer-events: none; /* Evita che il bordo blocchi eventuali click accidentali */

}

.contatti-grid {

    display: flex;

    gap: 80px;

}



/* Stili Info Sinistra */

.contatti-info {

    flex: 1;

}



.title-green-contatti {

    color: #1B7B2C;

    font-size: 42px;

    margin-bottom: 40px;

    font-weight: 700;

}



.info-block {

    margin-bottom: 25px;

}



.info-block span {

    display: block;

    font-size: 12px;

    font-weight: 700;

    color: #888;

    letter-spacing: 1px;

    margin-bottom: 5px;

}



.info-block a {

    color: #333;

    text-decoration: none;

    font-weight: 500;

    transition: color 0.3s;

}



.info-block a:hover {

    color: #1B7B2C;

}



/* Stili Form Destra */

.contatti-form {

    flex: 1.5;

}



.form-group {

    margin-bottom: 20px;

}



.form-row {

    display: flex;

    gap: 20px;

}



.contatti-form label {

    display: block;

    font-size: 14px;

    color: #555;

    margin-bottom: 8px;

}



.contatti-form input, 

.contatti-form textarea {

    width: 100%;

    padding: 12px 0;

    border: none;

    border-bottom: 1px solid #ddd;

    background: transparent;

    outline: none;

    font-family: inherit;

    transition: border-color 0.3s;

}



.contatti-form input:focus, 

.contatti-form textarea:focus {

    border-bottom: 2px solid #1B7B2C;

}



.contatti-form textarea {

    height: 100px;

    resize: none;

}



/*SEZIONE SCHEDA TECNICA PRODOTTO (Zero Conflitti)

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



.scheda-tecnica-container {

   display: flex;

    width: 100%;

    background-color: #ffffff;

    margin: 0; /* Rimuove eventuali margini esterni */

    padding: 0;

    border: none;

    /* Rimuoviamo min-height: 100vh se le sezioni devono stare attaccate 

       indipendentemente dall'altezza dello schermo */

    min-height: auto; 

    position: relative;

    overflow: visible;

}



/* --- COLONNA SINISTRA: STICKY --- */

.scheda-tecnica-sticky {

    width: 40%;

    position: sticky;

    top: 80px; 

    height: calc(100vh - 80px); 

    background-color: #ffffff; 

    display: flex;

    align-items: flex-start; /* Fondamentale: spinge il contenuto in alto */

    justify-content: center;

    padding-top: 80px; /* UGUALE alla colonna destra */

    padding-right: 2rem;

    padding-bottom: 2rem;

    padding-left: 2rem;

    box-sizing: border-box;

    margin: 0;      /* Prova un valore piccolissimo per allineamento perfetto.                           Il titolo a destra ha un suo margine/padding superiore.                               Dobbiamo azzerare quello a sinistra. * /* Assicurati che il padding non influenzi l'altezza totale */

}





.scheda-tecnica-image-wrapper {

 width: 100%;

    height: auto; /* RIMOSSO height: 100% */

    display: flex;

    align-items: flex-start; /* RIMOSSO align-items: center */

    justify-content: center;

    /* Un piccolo trucco: il testo ha sempre una piccola "interlinea" trasparente sopra le lettere. 

       Questo margine negativo compensa quei millimetri per un allineamento ottico perfetto. */

    margin-top: -5px;  

}



.scheda-tecnica-image-wrapper img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    /* Stessa ombra delle tue card per coerenza visiva */

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    border-radius: 10px; 

    background-color: var(--bianco);

    padding: 20px;

}



/* --- COLONNA DESTRA: SCROLL --- */

.scheda-tecnica-scroll {

    width: 60%;

    padding: 80px 8%; 

    box-sizing: border-box;

    background-color: #ffffff;

    margin: 0;

}



.scheda-tecnica-kicker {

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--oro-spei); /* Verde del tuo brand */

    text-transform: uppercase;

    display: inline-block;

    margin-top: 0 !important; /* Evita che il testo scenda */

    padding-top: 0;

    line-height: 1;

}



.scheda-tecnica-kicker::after {

    content: '';

    display: block;

    width: 40px;

    height: 3px;

    background-color: var(--oro-spei);

    margin-top: 8px;

}



.scheda-tecnica-title {

    font-size: 38px;

    color: var(--testo-nav); /* Blu scuro del tuo brand */

    font-weight: 700;

    margin: 8px 0 12px 0;

    line-height: 1.2;

    text-transform: uppercase;

}



.scheda-tecnica-tagline {

    font-size: 18px;

    font-style: italic;

    color: #555;

    margin-bottom: 30px;

}



.scheda-tecnica-desc {

    font-size: 16px;

    line-height: 1.8;

    color: #333;

}



.scheda-tecnica-divider {

    border: none;

    border-top: 1px solid #f0f0f0;

    margin: 25px 0;

}



.scheda-tecnica-h3 {

    font-size: 22px;

    color: var(--testo-nav);

    margin-bottom: 14px;

    text-transform: uppercase;

    font-weight: 700;

}



/* --- GRID VERSIONI --- */

.scheda-tecnica-versions {

    display: flex;

    gap: 20px;

    margin-bottom: 50px;

}



.scheda-tecnica-vcard {

    flex: 1;

    padding: 25px;

    background-color: var(--bianco);

    border-radius: 10px;

    border: 1px solid #f0f0f0;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.scheda-tecnica-vcard:hover {

    transform: translateY(-5px);

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

    border-color: #e0e0e0;

}



.scheda-tecnica-vcard h4 {

    margin: 0 0 15px 0;

    font-size: 16px;

    color: var(--oro-spei);

    text-transform: uppercase;

}



.scheda-tecnica-vcard p {

    margin: 0;

    line-height: 1.6;

    font-size: 15px;

    color: #555;

}



.scheda-tecnica-note {

    font-size: 13px;

    color: #888;

    display: block;

    margin-top: 10px;

}



/* --- BENTO BOX SPECIFICHE --- */

.scheda-tecnica-bento {

    display: flex;

    gap: 20px;

    background-color: #f7faf8;

    padding: 30px;

    padding-bottom: 40px;

    border-radius: 10px;

}

.scheda-tecnica-bento {

    margin-bottom: 40px !important; 

}



/* Se una lista di modelli si trova subito dopo un Bento Box, forziamo la spinta dall'alto */

.scheda-tecnica-bento + .scheda-tecnica-model-list {

    margin-top: 40px !important;

}



.scheda-tecnica-bitem {

    flex: 1;

}



.scheda-tecnica-bitem h4 {

    margin: 0 0 15px 0;

    font-size: 16px;

    color: var(--testo-nav);

    text-transform: uppercase;

}



.scheda-tecnica-bitem ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.scheda-tecnica-bitem ul li {

    padding: 10px 0;

    border-bottom: 1px solid #e0e0e0;

    font-size: 15px;

    color: #333;

    font-weight: 500;

}



.scheda-tecnica-bitem ul li:last-child {

    border-bottom: none;

}

/* --- ZEBRA STRIPING: SEZIONI PRODOTTO ALTERNATE --- */



/* Applica il verde salvia a tutte le sezioni pari (la 2°, la 4°, ecc.) */

.scheda-tecnica-container:nth-child(even) {

    background-color: #E6F0E8; 

}



/* Rende trasparenti le colonne interne in modo che il verde di sfondo si veda su tutta la fascia */

.scheda-tecnica-container:nth-child(even) .scheda-tecnica-sticky,

.scheda-tecnica-container:nth-child(even) .scheda-tecnica-scroll {

    background-color: transparent;

}



/* Per creare profondità, forziamo gli elementi interni (l'immagine, le card, i bento box) 

   a rimanere di un bianco puro. Così sembreranno "galleggiare" sul nuovo sfondo verde.

*/

.scheda-tecnica-container:nth-child(even) .scheda-tecnica-image-wrapper img,

.scheda-tecnica-container:nth-child(even) .scheda-tecnica-vcard,

.scheda-tecnica-container:nth-child(even) .scheda-tecnica-bento,

.scheda-tecnica-container:nth-child(even) .scheda-tecnica-mrow {

    background-color: #ffffff;

    border-color: #ffffff;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); /* Ombra leggermente più ampia per staccarli dal fondo */

}



/* Il badge interno deve cambiare colore per non confondersi con lo sfondo */

.scheda-tecnica-container:nth-child(even) .mrow-badge {

    background-color: #ffffff;

    

}

/* --- STILI CAROSELLO FOTOGRAFICO --- */

.carousel-wrapper {

    position: relative;

    width: 100%;

    height: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;

    margin-top: -25px;

}



.carousel-slide {

    display: none; /* Nasconde tutte le foto di default */

    width: 100%;

    

    align-items: center;

    justify-content: center;

}



.carousel-slide.active {

    display: flex; /* Mostra solo la foto attiva */

    align-items: center; /* Forza l'allineamento in alto della slide */

    justify-content: center;

}



.carousel-slide img {

    max-width: 80%;

    max-height: 90%;

    object-fit: contain;

    background-color: var(--bianco);

    padding: 10px 20px 40px 20px;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

}



/* Frecce di navigazione */

.carousel-prev, .carousel-next {

    cursor: pointer;

    position: absolute;

    top: 50%;

    

    transform: translateY(-50%);

    width: auto;

    color: var(--oro-spei);

    font-weight: bold;

    font-size: 28px;

    transition:color 0.3s ease;

    border-radius: 5px;

    z-index: 10;

    border: none;

}



.carousel-prev { left: -10px; }

.carousel-next { right: -10px; }



.carousel-prev:hover, .carousel-next:hover {

    color: var(--testo-nav);

}



/* Puntini in basso */

.carousel-dots {

    position: absolute;

    bottom: 10px;

    width: 100%;

    text-align: center;

    z-index: 10;

}



.dot {

    cursor: pointer;

    height: 10px;

    width: 10px;

    margin: 0 5px;

    background-color: #ccc;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.3s ease;

}



.dot.active, .dot:hover {

    background-color: var(--oro-spei);

}

.about-modern-section {

    padding: 25px 5% 100px 5%;

    background-color: var(--bianco);

    overflow: hidden; /* Evita che i decori escano dallo schermo */

}



.about-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 1200px;

    margin: 0 auto;

    gap: 150px; /* Spazio tra testo e immagine */

}



/* --- COLONNA TESTI --- */

.about-text-content {

    flex: 1;

    max-width: 550px;

}



.about-kicker {

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #888;

    text-transform: uppercase;

    margin-bottom: 20px;

    display: inline-block;

}



.about-text-content h2 {

    font-size: 48px;

    color: var(--testo-nav);

    line-height: 1.2;

    margin-bottom: 30px;



    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 800; /* Usa un peso molto alto */

    letter-spacing: -0.03em;

}



/* Effetto Evidenziatore CSS-Only */

.highlight-text {

    position: relative;

    z-index: 1;

    white-space: nowrap;

}



.highlight-text::after {

    content: '';

    position: absolute;

    bottom: 6px; /* Posizione rispetto al testo */

    left: -2%;

    width: 104%;

    height: 14px; /* Spessore del tratto */

    background-color: rgba(39, 78, 55, 0.2); /* Usa il tuo verde (oro-spei) ma semi-trasparente */

    border-radius: 10px;

    z-index: -1;

    transform: rotate(-2deg); /* Lo inclina leggermente come un colpo di pennarello reale */

}



.about-text-content p {

    font-size: 18px;

    color: #555;

    line-height: 1.7;

    margin-bottom: 40px;

}



/* Bottone Call to Action */

.btn-about {

    display: inline-block;

    background-color: var(--oro-spei); /* Verde aziendale */

    color: var(--bianco);

    padding: 16px 35px;

    border-radius: 8px;

    font-weight: 600;

    font-size: 16px;

    text-decoration: none;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    box-shadow: 0 10px 20px rgba(39, 78, 55, 0.2); /* Ombra morbida verde */

}



.btn-about:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 25px rgba(39, 78, 55, 0.3);

}



/* --- COLONNA VISIVA (COMPOSIZIONE BLOBS) --- */

.about-visual-content {

    flex: 1;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 500px;

}



/* Forma verde sul retro */

.blob-background {

    position: absolute;

    width: 85%;

    height: 85%;

    background-color: var(--oro-spei); /* Verde aziendale */

    /* I valori complessi di border-radius creano la forma organica! */

    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

    bottom: -5%;

    left: -10%;

    z-index: 0;

    /* Animazione per farla "respirare" */

    animation: morphBlob 10s ease-in-out infinite alternate;

}



/* Pattern a puntini (Generato via CSS senza immagini!) */



/* Contenitore Immagine Principale */

.image-blob-mask {

    position: relative;

    z-index: 2;

    width: 90%;

    height: 450px;

    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

    overflow: hidden;

    box-shadow: 0 20px 40px rgba(0,0,0,0.15);

    /* Animazione che si muove al contrario del background */

    animation: morphImage 12s ease-in-out infinite alternate;

}



.image-blob-mask img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* --- LE ANIMAZIONI KEYFRAMES --- */

@keyframes morphBlob {

    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

    50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }

    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

}



@keyframes morphImage {

    0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

    50%  { border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; }

    100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

}

/* --- RESPONSIVE AZIENDA --- */

@media (max-width: 768px) {

    .azienda-section {

        padding: 50px 8%;

    }

    

    .azienda-grid {

        flex-direction: column;

        gap: 0;

    }

    

    .azienda-grid font-size {

        font-size: 16px;

    }



    .scheda-tecnica-model-list {

        padding-top: 0 !important;

        padding-bottom: 0 !important;

        display: flex;

        flex-direction: column;

        gap: 10px; /* Spazio minimo tra le card */

    }



    .scheda-tecnica-mrow {

        display: block !important; /* <--- LA MAGIA È QUI */

        flex-direction: column;

        align-items: flex-start;

        border: 2.1px solid #1B7B2C !important; /* Linea verde spessa */

        border-radius: 8px;

        padding: 10px 15px !important; /* Riduce lo spazio interno */

        margin-bottom: 5px !important; 

        background-color: #fff;

    }

    

    .mrow-header {

       

        display: block !important;

        

        /* 1. Disattiviamo il 100% che blocca i margini negativi e forziamo l'estensione */

        width: auto !important; 

        align-self: stretch !important; 

        

        /* 2. MARGINI NEGATIVI: "Tirano" la linea a destra e a sinistra fuori dallo spazio interno (-15px) per farle toccare il bordo verde */

        margin: 0 -15px 12px -15px !important; 

        

        /* 3. PADDING COMPENSATIVO: Spinge il testo nuovamente in dentro per non farlo sbattere sul bordo verde. 

           (18px a sinistra = i 15px di prima + i 3px per l'allineamento ottico che avevamo calcolato) */

        padding: 0 15px 12px 18px !important; 

        

        /* 4. La linea divisoria */

        border-top: none !important;

        border-right: none !important;

        border-left: none !important;

        border-bottom: 1.2px solid #1B7B2C !important;

    }

        

    

    

    .mrow-body {

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

    }

    .mrow-header h4 {

    margin: 0 0 5px 0px !important;

    font-size: 1.1rem;

    }



    .mrow-body p {

        margin: 0 !important; /* Toglie il margine del paragrafo */

        line-height: 1.2; /* Rende il testo più compatto */

    }

    .mrow-body p.mrow-position {

        /* Azzera lo spazio sopra il titoletto "Massima competitività" */

        margin: 0 0 2px 0 !important; 

        padding: 0 !important;

    }



    /* Compatta anche il badge se necessario */

    .mrow-badge {

        margin: 0 0 25px 0 !important; 

        padding: 2px 0 0 0 !important;

        font-size: 0.8rem !important;

        display: inline-block !important;

    }





    

    /* --- RESPONSIVE BOTTONE HERO (MOBILE) --- */

    .btn-hero {

        /* Espande il bottone al 100% della larghezza disponibile per facilitare il "tap" col pollice */

        width: 100%;

        justify-content: flex-start; /* Centra perfettamente il testo e l'icona */

        

        /* Proporzioni ottimizzate per schermi piccoli */

        padding: 16px 20px; /* Mantiene un'altezza comoda per il dito (min 44px raccomandati) */

        font-size: 15px; /* Testo leggermente ridotto per non risultare ingombrante */

        margin-top: 25px; /* Distanza proporzionata dal testo superiore */

    padding-left: 10px !important;

    }

    

    /* Riduciamo leggermente lo spostamento all'hover visto che su mobile non c'è il mouse, 

       ma serve se l'utente tiene premuto (active state) */

    .btn-hero:hover {

        transform: translateY(-2px);

    }

    .valori-main-title { font-size: 32px; }

    .valori-pillars-grid, .valori-dual-gallery { grid-template-columns: 1fr; }

    .valori-final-content { padding: 20px 20px; }

    .valori-cta-box h2 { font-size: 28px; }





    .valori-section {

        padding-bottom: 30px; /* Spazio minimo su smartphone */

    }



    .progress-wrap {

        right: 20px;

        bottom: 20px;

        height: 45px;

        width: 45px;

    }

    .progress-wrap i {

        line-height: 45px;

        height: 45px;

        width: 45px;

        font-size: 18px;

    }

    .prodotto-card {

        border-left: none !important;

        border-bottom: none !important;

        

        /* 2. Aggiungiamo un'ombra leggera per dare profondità (UX tip) */

        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

        

        /* 3. Arrotondiamo leggermente gli angoli per un look più moderno */

        border-radius: 8px;

        

        /* 4. Spaziatura tra le card */

        margin-bottom: 25px;

        padding: 20px;

        

        /* 5. Centriamo il contenuto per il pollice */

        text-align: center;

    }



    /* 6. Sistemiamo il titolo Prodotti che era troppo a sinistra */

    .prodotti-container h2, 

    .prodotti-section-title {

        padding-left: 20px;

        margin-bottom: 30px;

    }



    /* Regola mirata SOLO per il titoletto dentro la sezione prodotti */

    .prodotti-section .mini-title {

        margin-left: 39px; /* Aumenta questo numero (prova 28px, 30px o 35px) finché non tocca la linea immaginaria della foto */

    }

    .mini-title {

    margin-left: 20px;

    padding-left: 0; /* Azzera eventuali padding in conflitto */

    }



    /* 2. Allinea il testo aziendale sotto al titoletto */

    .azienda-text {

        padding-left: 20px;}



    .footer-container {

        display: grid !important; /* Manteniamo grid ma a colonna singola */

        grid-template-columns: 1fr !important; 

        justify-items: center; /* Centra le colonne nella griglia */

        text-align: center;

        gap: 40px;

    }

    .footer-about {

        align-items: center !important; /* Annulla il flex-start del desktop */

        text-align: center !important;

        width: 100%;

    }



    /* 2. Centra il contenuto di ogni singola colonna */

    .footer-col {

        display: flex;

        flex-direction: column;

        align-items: center; /* Centra logo, testi e icone */

        text-align: center;

        width: 100%;

    }



    /* 3. Rimuovi margini laterali che potrebbero spingere a sinistra */

    .footer-about p {

        margin-left: auto;

        margin-right: auto;

        max-width: 300px; /* Evita che il testo diventi troppo largo su mobile */

    

        text-align: center !important; /* Annulla il text-align: left del desktop */



    }



    /* 4. Forza le icone social al centro */

    .footer-social {

        display: flex !important;

        justify-content: center !important;

        align-items: center;

        gap: 20px;

        width: 100%;

        margin: 15px 0 0 0;

        padding: 0;

    }



    /* 5. Centra il logo */

    .footer-logo {

        margin-bottom: 20px;

        display: flex !important;;

       

        justify-content: center !important;

        width: 100%;

    }



    .footer-logo img {

        margin: 0 auto !important;

    }

    .zigzag-section {

        

       padding-top: 20px !important;  /* Taglia lo spazio vuoto in alto */

        padding-bottom: 0 !important; 

    }



    .zigzag-row:last-child {

        margin-bottom: 0 !important; /* Rimuove il margine finale dell'ultima riga */

    }

    /* --- FIX ALTEZZA VIDEO HERO MOBILE --- */

    .hero {

        height: 70vh !important; /* Riduce l'altezza all'80% dello schermo */

    }

    .valori-pillars-grid {

        /* Forza la griglia a mostrare 1 sola colonna che occupa il 100% dello spazio */

        grid-template-columns: 1fr !important; 

        gap: 25px !important; 

    }



    .valori-pillar-card {

        width: 100% !important; 

        /* Regoliamo il padding interno per non sprecare spazio prezioso ai lati su mobile */

        padding: 30px 20px !important; 

        /* Centriamo il testo e le icone per un look più pulito in colonna singola */

        text-align: center;

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .valori-pillars-grid {

        /* Forza la griglia a mostrare 1 sola colonna che occupa il 100% dello spazio */

        grid-template-columns: 1fr !important; 

        gap: 25px !important; 

    }



    .valori-pillar-card {

        width: 100% !important; 

        /* Regoliamo il padding interno per non sprecare spazio prezioso ai lati su mobile */

        padding: 30px 20px !important; 

        /* Centriamo il testo e le icone per un look più pulito in colonna singola */

        text-align: center;

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .about-text-content {

        display: flex;

        flex-direction: column;

        align-items: center; /* Centra gli elementi come il titoletto e il bottone */

        text-align: center;  /* Centra il testo all'interno dei blocchi */

    }

    

    .about-text-content h2,

    .about-text-content p,

    .about-kicker {

        text-align: center !important;

    }

    .about-text-content .mini-title {

        margin-left: 0 !important;

        display: inline-block;

        

    }



    /* LA MAGIA: usa i margini automatici per bilanciare la lineetta verde */

    .about-text-content .mini-title::after {

        margin-left: auto !important;

        margin-right: auto !important;

    }

    .valori-final-block {

        display: flex !important;

        flex-direction: column !important;

        height: auto !important;

        max-height: none !important; /* Rimuove il limite di altezza che taglia il testo */

        background-color: #003366 !important;

        margin-bottom: 50px !important;

    }



    /* 2. L'immagine deve stare SOPRA e occupare solo una parte dello schermo */

    .valori-final-img {

        width: 100% !important;

        height: 300px !important; /* Decidi tu l'altezza della foto (es. 250px o 300px) */

        position: relative !important;

        flex: none !important;

    }



    .valori-final-img img {

        position: relative !important;

        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;

    }



    /* 3. Il testo deve stare SOTTO l'immagine, mai sovrapposto */

    .valori-final-content {

        width: 100% !important;

        position: relative !important;

        padding: 40px 25px !important;

        background-color: #003366 !important; /* Blu aziendale */

        text-align: center !important;

        flex: none !important;

        display: block !important;

    }



    /* 4. Colore testi per leggibilità */

    .valori-final-content h2 {

        color: var(--oro-spei) !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

    } 

    .valori-final-content h3{

        color: var(--oro-spei) !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

    }

    .valori-final-content p {

        color: #ffffff !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

    }



    /* 5. Centra il divisore */

    .valori-divider {

        margin: 20px auto !important;

        width: 50px !important;

        background-color: rgba(255,255,255,0.3) !important;

    }

    .about-modern-section {

        padding-top: 0 !important; 

        margin-top: -15px !important; /* Il valore negativo "tira su" la sezione */

    }



    /* 2. Compatta il contenitore del testo */

    .about-text-content {

        margin-top: 0 !important;

        padding-top: 0 !important;

    }



    /* 3. Riduce lo spazio tra il titoletto e il titolo grande */

    .about-text-content .mini-title {

        margin-bottom: -5px !important;

    }



    /* 4. Rimuove il border-radius dalla foto (come richiesto) */

    .image-blob-mask, 

    .image-blob-mask img {

        border-radius: 0 !important;

        animation: none !important; /* Consigliato: ferma l'animazione se togli il raggio */

    }

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

   ANIMAZIONE CROSSFADE (Comune)

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

@keyframes fadeAutomaticoMobile {

    0%   { opacity: 1; } /* Visibile per i primi 3 secondi */

    40%  { opacity: 1; } 

    50%  { opacity: 0; } /* Si dissolve velocemente a metà ciclo */

    90%  { opacity: 0; } /* Trasparente per mostrare la foto sotto (altri 3s) */

    100% { opacity: 1; } /* Riappare chiudendo il loop */

}



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

   COMPORTAMENTO SOLO SU MOBILE (Sotto i 768px)

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

@media (max-width: 768px) {

    .valori-dual-gallery {

        /* Distruggiamo la griglia su mobile e usiamo un contenitore relativo */

        display: block !important; 

        position: relative;

        height: 300px; /* Altezza ottimale per la foto singola su smartphone */

        overflow: hidden;

        

        margin-bottom: 60px;

    }



    .valori-dual-gallery img {

        /* Sovrapponiamo perfettamente le immagini */

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    /* Assegniamo l'animazione SOLO alla foto superiore su mobile */

    .valori-dual-gallery .mobile-fade-top {

        /* Un ciclo da 6 secondi totali (3 visibile + 3 invisibile) */

        animation: fadeAutomaticoMobile 6s infinite ease-in-out;

    }

}

}

    



.counters-section {

    background-color:#f7faf8;

    padding: 80px 0;

    width: 100%;

}



.counters-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 5%;

    display: grid;

    /* 4 colonne su desktop */

    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

}



.counters-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



.counters-icon-wrapper {

    position: relative;

    width: 90px;

    height: 90px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 25px;

}



/* Cerchio grigio chiaro sfalsato tipico del design richiesto */

.counters-icon-wrapper::before {

    content: '';

    position: absolute;

    width: 70px;

    height: 70px;

    background-color: #f4f7f9; /* Grigio chiarissimo per lo sfondo dell'icona */

    border-radius: 50%;

    top: 0;

    right: 0;

    z-index: 1;

}



.counters-icon-wrapper i {

    font-size: 38px;

    color: var(--oro-spei); /* Usa il tuo verde #1B7B2C */

    z-index: 2;

    transform: translate(-8px, 8px); /* Effetto profondità rispetto al cerchio */

}



.counters-text {

    color: var(--testo-nav); /* Usa il tuo blu scuro #003366 */

    font-size: 1.25rem;

    font-weight: 700;

    line-height: 1.3;

    margin: 0;

    max-width: 200px; /* Evita che il testo si allarghi troppo */

}



.scheda-tecnica-model-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.scheda-tecnica-mrow {

    display: flex;

    align-items: center;

    background-color: var(--bianco);

    border: 1px solid #f0f0f0;

    border-radius: 10px;

    padding: 20px;

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

    transition: transform 0.2s ease, border-color 0.2s ease;

}



.scheda-tecnica-mrow:hover {

    transform: translateX(5px); /* Leggero spostamento a destra per interattività */

    border-color: var(--oro-spei); /* Si illumina del tuo verde all'hover */

}



.mrow-header {

    flex: 0 0 150px; /* Larghezza fissa per la colonna del nome modello */

    border-right: 1px solid #f0f0f0;

    padding-right: 20px;

    margin-right: 20px;

}



.mrow-header h4 {

    margin: 0 0 8px 0;

    font-size: 18px;

    color: var(--testo-nav);

}



.mrow-badge {

    display: inline-block;

    background-color: #f7faf8;

    color: var(--oro-spei);

    font-size: 12px;

    font-weight: 700;

    padding: 4px 8px;

    border-radius: 4px;

    text-transform: uppercase;

}



.mrow-body {

    flex: 1;

}



.mrow-position {

    margin: 0 0 5px 0;

    font-size: 15px;

    color: var(--testo-nav);

}



.mrow-target {

    margin: 0;

    font-size: 14px;

    color: #666;

    line-height: 1.5;

}



/* --- BOTTONE HERO ANIMATO --- */

.btn-hero {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    background-color: var(--oro-spei); /* Il verde aziendale */

    color: var(--bianco);

    padding: 15px 35px;

    margin-top: 30px;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    border-radius: 8px; /* Arrotondamento moderno */

    text-transform: uppercase;

    letter-spacing: 1px;

    /* Ombra per staccarlo dallo sfondo in sughero */

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

/* --- MODIFICHE PER ANIMAZIONE DI INGRESSO --- */

    opacity: 0;                /* Inizialmente invisibile */

    transform: translateX(-100px); /* Parte da 100px a sinistra */

    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.content.start-animation .btn-hero {

    opacity: 1;

    transform: translateX(0); /* Torna nella sua posizione originale */

}

/* Effetto Hover*/

.btn-hero:hover {

    background-color: #145E21; /* Verde leggermente più scuro */

    transform: translateY(-5px); /* Il bottone si "solleva" */

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* L'ombra si espande */

    color: var(--bianco);

}



/* Animazione specifica per la freccia all'interno del bottone */

.btn-hero i {

    transition: transform 0.3s ease;

}



.btn-hero:hover i {

    transform: translateX(6px); /* La freccia scivola verso destra invitando al click */

}

/* --- FORMATTAZIONE TESTO CONTATORI --- */

.counters-text {

    color: var(--testo-nav); /* Il tuo blu scuro */

    font-size: 1.25rem; /* Dimensione base del testo */

    font-weight: 600;

    line-height: 1.3;

    margin: 0;

    max-width: 250px;

}



.counters-plus {

    color: var(--oro-spei); /* Il verde aziendale per il "+" */

    font-size: 1.8rem; /* Un po' più grande per dare enfasi */

    font-weight: 800;

    margin-right: 2px;

}



.counters-number {

    font-size: 1.8rem; /* Il numero è grande e in evidenza */

    font-weight: 800;

    display: inline-block;

    /* Fissiamo una larghezza minima per i numeri più grandi, 

       evita che il testo "balli" orizzontalmente durante lo shuffle */

    min-width: 65px; 

    text-align: left;

}



/* Testo descrittivo sotto i numeri (e testo della 4° card) */

.counters-suffix {

    font-size: 1.15rem; /* Leggermente ingrandito per maggiore leggibilità */

    font-weight: 700; /* Riportato in grassetto (Bold) come l'originale */

    color: var(--testo-nav); /* Forza il colore blu scuro aziendale */

    display: block;

    margin-top: 5px;

}

.main-footer {

    /* Sfondo blu scuro aziendale per "ancorare" la pagina */

    background-color: var(--blu-scuro); 

    color: rgba(255, 255, 255, 0.8); /* Testo bianco leggermente trasparente per eleganza */

    padding: 80px 0 0 0; /* Padding superiore generoso, zero inferiore (gestito dalla barra bottom) */

    font-size: 15px;

    line-height: 1.6;

}



.footer-container {

    /* Usiamo Grid per una disposizione pulita e moderna in 4 colonne */

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 40px;

    align-items: flex-start;

    max-width: 100%; /* Coerente con il resto del sito */

    margin: 0;

    padding: 0 2% 0 20px;

}



.footer-col {

    display: flex;

    flex-direction: column;

}



/* --- TITOLI DELLE COLONNE (Verdi) --- */

.footer-col h4 {

    color: var(--oro-spei); /* Verde aziendale per i titoli */

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase; /* Stile moderno e pulito */

    letter-spacing: 1.5px;

    margin-bottom: 25px;

    position: relative;

    padding-bottom: 10px;

}



/* Lineetta verde sotto il titolo per richiamare lo stile del sito */

.footer-col h4::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 30px;

    height: 2px;

    background-color: var(--oro-spei);

}



/* --- STILI LISTE E LINK --- */

.footer-col ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-col ul li {

    margin-bottom: 12px;

}



.footer-col ul li a {

    text-decoration: none;

    color: rgba(255, 255, 255, 0.8);

    transition: all 0.3s ease;

    display: inline-block;

}



/* Effetto Hover sui Link: cambiano in verde e si spostano leggermente */

.footer-col ul li a:hover {

    color: var(--oro-spei);

    transform: translateX(5px);

}



/* --- COLONNA ABOUT E SOCIAL --- */

.footer-logo img {

    height: 70px; /* Ingrandiamo un po' l'altezza */

    width: 70px;  /* FORZIAMO la larghezza a essere quadrata (uguale all'altezza) */

    

    /* === IL SEGRETO DEL CERCHIO === */

    border-radius: 50%; /* Crea il cerchio perfetto */

    object-fit: contain; /* Importante per far sì che il logo non si distorca all'interno del cerchio */

    

    /* === STACCO DALLO SFONDO SCURO === */

    background-color: #ffffff; /* Sfondo bianco puro (#ffffff) per far risaltare il logo */

    padding: 10px; /* Spazio interno per non far toccare il logo ai bordi del cerchio */

    

    /* Stili esistenti aggiornati */

    margin-bottom: 20px;

    display: block;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Un'ombra leggera per dare profondità */

}

.footer-logo {

    display: flex;

    justify-content: flex-start; /* Centra orizzontalmente */

    margin-bottom: 20px;

}



.footer-about p {

    text-align: left; /* Assicura che il testo parta da sinistra */

    margin-bottom: 25px;

}

.footer-about {

    display: flex;

    flex-direction: column;

    align-items: flex-start; /* Forza tutti i figli (logo, p, social) a sinistra */

    padding-left: 0;         /* Azzera eventuali padding ereditati */

    margin-left: 0;          /* Azzera eventuali margini ereditati */

    max-width: 300px;

}



.footer-social {

    display: flex;

    gap: 15px;

    justify-content: flex-start; /* <-- Spinge anche i pallini social a sinistra sotto il testo */

}



.footer-social a {

    color: rgba(255, 255, 255, 0.6);

    font-size: 18px;

    transition: color 0.3s ease, transform 0.3s ease;

}

.footer-social a:first-child {

    margin-left: 0;

    padding-left: 0;

}



.footer-social a:hover {

    color: var(--oro-spei);

    transform: scale(1.1); /* Leggero zoom all'hover */

}



/* --- COLONNA CONTATTI --- */

.footer-contact p {

    margin-bottom: 15px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

}



.footer-contact p i {

    color: var(--oro-spei); /* Icone verdi */

    margin-top: 4px; /* Allineamento ottico con il testo */

}



.footer-contact a {

    color: rgba(255, 255, 255, 0.8);

    text-decoration: none;

    transition: color 0.3s ease;

}



.footer-contact a:hover {

    color: var(--oro-spei);

}



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

   BARRA INFERIORE (Copyright)

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

.footer-bottom {

    background-color: rgba(0, 0, 0, 0.2); /* Sfondo leggermente più scuro del footer */

    padding: 25px 0;

    margin-top: 60px; /* Spazio dalla griglia sopra */

    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Linea di divisione quasi invisibile */

}



.footer-bottom p {

    margin: 0;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.5);

    text-align: center;

}

#map, 

.leaflet-container { 

    border-radius: 0 !important; 

}

/* --- SEZIONE AZIENDA --- */

.valori-section {

    background-color: #ffffff;

    padding: 80px 0 0 0;

    width: 100%;

    overflow: hidden;

}



/* --- HEADER INTRO --- */

.valori-header {

    display: flex;

    align-items: center;

    gap: 60px;

    margin-bottom: 80px;

}



.valori-header-text {

    flex: 1;

}



.valori-main-title {

    font-size: 42px;

    color: var(--testo-nav);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 25px;

}



.valori-lead {

    font-size: 18px;

    color: #555;

    line-height: 1.8;

}



.valori-header-img {

    flex: 1.2;

}



.valori-header-img img,

.valori-header-img video {

    width: 100%;

    height: 400px;

    object-fit: cover;

    border-radius: 10px;

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

    display: block; /* Evita fastidiosi spazi vuoti sotto il video */

}



/* --- I 4 PILASTRI --- */

.valori-pillars-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-bottom: 80px;

}



.valori-pillar-card {

    background-color: #f7faf8;

    padding: 40px 30px;

    border-radius: 10px;

    border-top: 4px solid transparent;

    transition: all 0.3s ease;

}



.valori-pillar-card:hover {

    border-top-color: var(--oro-spei);

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.05);

    background-color: #ffffff;

}



.valori-icon {

    font-size: 38px;

    color: var(--oro-spei); /* Mantiene il verde aziendale */

    display: block;

    margin-bottom: 20px;

    opacity: 0.9;

    transition: transform 0.4s ease, color 0.4s ease;

}



/* Micro-interazione visiva al passaggio del mouse sulla card */

.valori-pillar-card:hover .valori-icon {

    transform: scale(1.15) translateY(-5px); /* Leggero zoom e spostamento in alto */

    color: var(--testo-nav); /* Opzionale: cambia colore nel blu aziendale all'hover */

}



.valori-pillar-card h3 {

    font-size: 20px;

    color: var(--testo-nav);

    margin-bottom: 15px;

}



.valori-pillar-card p {

    font-size: 15px;

    color: #666;

    line-height: 1.6;

    margin: 0;

}



/* --- GALLERIA DOPPIA --- */

.valori-dual-gallery {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-bottom: 100px;

}



.valori-dual-gallery img {

    width: 100%;

    height: 350px;

    object-fit: cover;

    border-radius: 10px;

}



/* --- RIGHE ALTERNATE (Stile ZigZag Sicuro) --- */

.valori-feature-wrapper {

  

    /* Usiamo un verde salvia desaturato più presente (#e9f0eb) */

    background: linear-gradient(180deg, #f2f5f3 0%, #e9f0eb 50%, #f2f5f3 100%);

    padding: 120px 0;

    /* Aggiungiamo un bordo sottile per definire i confini */

    border-top: 1px solid #dee5e0;

    border-bottom: 1px solid #dee5e0;

    width: 100%;

    max-width: 100vw;

    border-radius: 20px;

    margin-bottom: 20px;



}



    





.valori-feature-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;

    margin-bottom: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 90%;          /* Lasciamo un piccolo margine del 5% per lato per il testo */

    max-width: 1400px;   /* Opzionale: impedisce che su schermi enormi il testo sia troppo lontano dalla foto */

    margin: 0 auto 80px auto; /* Centra la riga dentro il wrapper */

    gap: 50px;

}

/* Rimuove il margine solo dall'ultima riga dentro il wrapper */

.valori-feature-row:last-child {

    margin-bottom: 0;

}

.valori-feature-text, .valori-feature-img {

    flex: 1;

}



.valori-feature-row:nth-child(even) {

    direction: rtl; /* Inverte l'ordine */

}



.valori-feature-row:nth-child(even) .valori-feature-text {

    direction: ltr; /* Mantiene il testo leggibile a sinistra */

}



.valori-feature-text h2 {

    font-size: 32px;

    color: var(--testo-nav);

    margin-bottom: 20px;

}



.valori-feature-text p {

    font-size: 16px;

    color: #555;

    line-height: 1.8;

}



.valori-feature-img img {

    width: 100%;

    height: 400px;

    object-fit: cover;

    border-radius: 2%;

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

}



/* --- BLOCCO FINALE PERSONALIZZAZIONE --- */

.valori-final-block {

    display: flex;

    align-items: stretch;

    background-color: var(--blu-scuro);

   

    overflow: hidden;

    margin-bottom: 100px;

    max-height: 450px; /* <-- Limita l'altezza totale del blocco. Puoi alzare o abbassare questo valore (es. 380px o 450px) */

}



.valori-final-img {

    flex: 1;

    position: relative;

}



.valori-final-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.valori-final-content {

    flex: 1;

    padding: 40px 60px;

    color: #ffffff;

    display: flex;

    flex-direction: column;

    justify-content: center; /* Centra perfettamente il testo a livello verticale */

    overflow: hidden;

}



.valori-final-content h2 { font-size: 32px; margin-bottom: 10px; color: var(--oro-spei); }

.valori-final-content h3 { font-size: 24px; margin-bottom: 5px; color: var(--oro-spei); }

.valori-final-content p { color: rgba(255,255,255,0.8); line-height: 1.7; }



.valori-divider {    height: 1px;

    background-color: rgba(255,255,255,0.2);

    margin: 25px 0;

}



/* --- CALL TO ACTION FINALE --- */

.valori-cta-wrapper {

    background-color: #ffffff;

    padding: 0 0 80px 0;

    text-align: center;

}



.valori-cta-box {

    max-width: 800px;

    margin: 0 auto;

}



.valori-cta-box h4 {

    color: var(--oro-spei);

    letter-spacing: 2px;

    font-size: 14px;

    margin-bottom: 15px;

}



.valori-cta-box h2 {

    font-size: 36px;

    color: var(--testo-nav);

    margin-bottom: 25px;

}



.valori-cta-box p {

    font-size: 18px;

    color: #555;

    line-height: 1.6;

    margin-bottom: 35px;

}



/* --- EFFETTO SCROLL REVEAL (Animazione) --- */

.valori-reveal {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.8s ease, transform 0.8s ease;

}



.valori-reveal.active {

    opacity: 1;

    transform: translateY(0);

}

.progress-wrap {

    position: fixed;

    right: 30px;

    bottom: 30px;

    height: 50px;

    width: 50px;

    cursor: pointer;

    display: block;

    border-radius: 50px;

    box-shadow: inset 0 0 0 2px rgba(27, 123, 44, 0.2); /* Sfondo traccia (Verde trasparente) */

    z-index: 10000;

    opacity: 0; /* Nascosto quando si è in cima */

    visibility: hidden;

    transform: translateY(15px); /* Leggermente abbassato quando nascosto */

    transition: all 400ms linear;

    background-color: var(--bianco);

}



/* Classe che viene aggiunta via JS quando si scorre in giù */

.progress-wrap.active-progress {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.progress-wrap i {

    position: absolute;

    text-align: center;

    line-height: 50px;

    font-size: 20px;

    color: var(--oro-spei); /* Freccia verde */

    left: 0;

    top: 0;

    height: 50px;

    width: 50px;

    cursor: pointer;

    display: block;

    z-index: 1;

    transition: all 400ms ease;

}



/* Effetto al passaggio del mouse */

.progress-wrap:hover {

    box-shadow: inset 0 0 0 2px rgba(0, 51, 102, 0.2); /* Traccia blu scuro */

}

.progress-wrap:hover i {

    color: var(--testo-nav); /* Freccia blu scuro */

    transform: translateY(-3px); /* La freccia si alza per invitare al click */

}



/* Stili del tratto SVG (il progresso) */

.progress-wrap svg path {

    fill: none;

}

.progress-wrap svg.progress-circle path {

    stroke: var(--oro-spei); /* Colore del progresso che si riempie */

    stroke-width: 4;

    box-sizing: border-box;

    transition: all 200ms linear;

}

/* --- RESPONSIVE MOBILE --- */

@media (max-width: 992px) {

    .top-bar { display: none; }

    

    .hamburger { 

        display: flex; 

        flex-direction: column; 

        gap: 5px; 

        cursor: pointer; 

        position: relative; 

        z-index: 10002 !important;

    }



    .hamburger span {

        width: 25px; 

        height: 3px;

        background-color: var(--testo-nav);

        transition: 0.3s;

    }



    .nav-links {

        position: fixed; 

        right: -100%; 

        top: 0;

        width: 70%; 

        height: 100vh; 

        background-color: white;

        flex-direction: column; 

        align-items: center;

        justify-content: center; 

        gap: 30px; 

        transition: 0.4s;

        box-shadow: -5px 0 15px rgba(0,0,0,0.2);

        z-index: 10001 !important;

    }



    .nav-links.active { right: 0; }

    .hamburger.active span:nth-child(1) {

        transform: rotate(45deg) translate(5px, 6px);

    }



    .hamburger.active span:nth-child(2) {

        opacity: 0; /* Nasconde la linea centrale */

    }



    .hamburger.active span:nth-child(3) {

        transform: rotate(-45deg) translate(5px, -6px);

    }

    .content { width: 90%; }

    .content h1 { font-size: 2.5rem; }

    .content h2 { font-size: 1.3rem; }



    .tecnici-section {

        padding: 70px 0;

    }

    

    .title-white {

        font-size: 28px;

    }



    .description-white {

        font-size: 16px;

        line-height: 1.6;

    }

   .cards-grid {

        flex-direction: column; /* Card in colonna singola su mobile */

        align-items: center;

        gap: 40px;

    }

    

    .card {

        width: 80%; /* Card più larghe su mobile */

        max-width: 400px;

    }

    .zigzag-row, 

    .zigzag-row:nth-child(even) {

        flex-direction: column !important; /* Forza l'incolonnamento */

        margin-bottom: 20px; /* Riduce lo spazio tra le sezioni su mobile */

    }



    .zigzag-text {

        flex: none;

        width: 100%;

        padding: 20px 8% 40px 8% !important; /* Padding uniforme per il testo */

        text-align: center; /* Centra il testo per un look più pulito su mobile */

    }



    .zigzag-image {

        flex: none;

        width: 100%;

        height: 300px; /* Altezza ridotta per il mobile */

    }



    .zigzag-image img, 

    .zigzag-image video {

        border-radius: 0 !important; /* Rimuove gli arrotondamenti interni su mobile */

    }



    /* Opzionale: Se vuoi che l'immagine appaia SEMPRE sotto il testo su mobile */

    .zigzag-text {

        order: 1;

    }

    .zigzag-image {

        order: 2;

    }

    .contatti-grid {

        flex-direction: column;

        gap: 40px;

    }

    .container-contatti {

        padding: 40px 25px;

    }

    .title-green-contatti {

        font-size: 32px;

    }



   .counters-container {

        grid-template-columns: repeat(2, 1fr); /* 2 colonne */

        gap: 60px 20px;

    }

    .scheda-tecnica-container {

        flex-direction: column;

    }



    .scheda-tecnica-sticky {

        width: 100%;

        height: auto;

        position: relative;

        top: 0;

        padding: 40px 5% 10px 5%;

    }



    .scheda-tecnica-image-wrapper img {

        max-width: 100%;

    }



    .scheda-tecnica-scroll {

        width: 100%;

        padding: 40px 8%;

    }



    .scheda-tecnica-versions {

        flex-direction: column;

    }



    .scheda-tecnica-bento {

        flex-direction: column;

        padding: 20px;

    }



    .footer-container {

        grid-template-columns: repeat(2, 1fr); /* 2 colonne su tablet */

        gap: 50px 30px;

    

    }



    /* --- SEZIONE AZIENDA --- */

    .valori-header { flex-direction: column; text-align: center; }

    .valori-pillars-grid { grid-template-columns: repeat(2, 1fr); }

    .valori-feature-row, .valori-feature-row:nth-child(even) {

        grid-template-columns: 1fr;

        direction: ltr;

        text-align: center;

    }

    .valori-final-block { flex-direction: column; }

    .valori-final-img { width: 100%; height: 300px; min-height: 300px; }

    .valori-header-img video {

    

    border-radius: 0;

    ; /* Evita fastidiosi spazi vuoti sotto il video */

}

    .mrow-header {

        padding-bottom: 0 !important; 

        margin-bottom: 8px !important; 

    }

    /* --- FIRMA MENU MOBILE --- */

    .mobile-signature {

        display: block !important;

        position: absolute; /* La scollega dagli altri link */

        bottom: 50px; /* La posiziona esattamente in basso, dove hai tracciato la linea rossa */

        

        /* Stile Tipografico Elegante */

        font-size: 25px; /* Più grande perché i corsivi "rendono" meno */

        color:var(--oro-spei); /* Il tuo verde scuro elegante */

        letter-spacing: 1px;

        opacity: 0.9;



        font-family: "Caveat", cursive;



    }

    /* --- FIX CENTRATURA HEADER VALORI (MOBILE) --- */

.valori-header-text {

    display: flex;

    flex-direction: column;

    align-items: center; /* Forza l'allineamento centrale di tutti gli elementi figli */

    text-align: center;

    width: 100%;

}



/* Rimuove la spinta verso destra del titoletto superiore */

.valori-header-text .mini-title {

    margin-left: 0 !important;

    padding-left: 0 !important;

    text-align: center;

    width: 100%;

}



/* LA MAGIA: Centra perfettamente la lineetta verde */

.valori-header-text .mini-title::after {

    margin: 10px auto 0 auto !important; 

}



/* Assicura che il paragrafo non abbia margini strani e resti al centro */

.valori-header-text .valori-lead {

    text-align: center !important;

    margin-left: auto;

    margin-right: auto;

    padding: 0 10px; /* Un pizzico di respiro ai lati */

}



}

    









@media (min-width: 993px) {

    .hamburger { display: none; }



    

}







@media (max-width: 480px) {

    .title-white {

        font-size: 22px;

    }

    

    .title-white br {

        display: none; /* Rimuove il "vai a capo" forzato su schermi molto piccoli */

    }

}



@media (max-width: 576px) {

   .counters-container {

        /* Manteniamo 2 colonne invece di 1 */

        grid-template-columns: repeat(2, 1fr); 

        gap: 40px 15px; /* Riduciamo leggermente il gap per schermi piccoli */

    }

    

    .counters-text {

        font-size: 1rem; /* Testo leggermente più piccolo per stare su una riga se possibile */

        padding: 0 5px;

    }



    .counters-icon-wrapper {

        width: 80px; /* Icone leggermente più piccole per risparmiare spazio */

        height: 80px;

        margin-bottom: 15px;

    }



    .counters-icon-wrapper::before {

        width: 60px;

        height: 60px;

    }

    .main-footer {

        padding: 60px 0 0 0;

    }



    .footer-container {

        grid-template-columns: 1fr; /* 1 colonna singola su mobile */

        gap: 40px;

        text-align: center; /* Testo centrato per un look più pulito su mobile */

    }



    /* Centriamo i titoli, la lineetta e i social su mobile */

    .footer-col h4::after {

        left: 50%;

        transform: translateX(-50%);

    }



    .footer-social {

        justify-content: center;

    }



    .footer-contact p {

        justify-content: center;

    }



    /* Rimuoviamo l'effetto traslazione laterale sull'hover su mobile */

    .footer-col ul li a:hover {

        transform: none;

    }

}



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

   PALETTE COLORI SCREW CAP

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

.color-palette-container {

    margin-top: 15px;

    padding-top: 15px;

    border-top: 1px dashed #e0e0e0; /* Una linea tratteggiata per separare i colori dal testo */

}



.color-palette-title {

    font-size: 13px !important;

    font-weight: 700;

    color: var(--oro-spei);

    margin: 0 10px 10px 0 !important;

    text-transform: uppercase;

    padding-bottom: 10px;

}



.color-palette {

    display: flex;

    flex-wrap: wrap; /* Permette ai cerchi di andare a capo se non c'è spazio */

    gap: 8px; /* Spazio tra un cerchietto e l'altro */

}



.color-dot {

    width: 24px;

    height: 24px;

    border-radius: 50%; /* Trasforma il quadrato in un cerchio perfetto */

    border: 1px solid #dcdcdc; /* FONDAMENTALE: un bordino grigio chiaro per non far sparire il colore bianco/crema sullo sfondo */

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    cursor: pointer;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



/* Micro-interazione per far capire che sono elementi dell'interfaccia */

.color-dot:hover {

    transform: scale(1.3); /* Il cerchietto si ingrandisce al passaggio del mouse */

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    z-index: 10;

}

#typewriter-title {

        display: block;

        min-height: 1.2em; 

    }

    

    /* 2. Il cursore lampeggiante */

    .cursor-blink {

        /* --- NUOVO CURSORE SIMULATO (PERFETTO) --- */

  

       /* --- CURSORE SIMULATO (CALIBRATO) --- */

    

        display: inline-block;

        width: 3px; 

        

        /* FIX ALTEZZA: 0.75em corrisponde esattamente all'altezza delle lettere maiuscole */

        height: 0.70em !important; 

        

        /* FIX ALLINEAMENTO: Poggia la base del rettangolo esattamente sulla linea di base delle lettere */

        vertical-align: baseline !important; 

        

        background-color: white; 

        margin-left: 5px;

        color: transparent !important; 

        animation: blink 0.8s step-end infinite;

        

        /* Opzionale: se dovesse servire un micro-aggiustamento in basso/alto */

         transform: translateY(13px); 

    }

                



    



    /* L'animazione on/off del cursore */

    @keyframes blink {

        0%, 100% { opacity: 1; }

        50% { opacity: 0; }

    }





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

   SCROLL INDICATOR ANIMATO

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

/* --- SCROLL INDICATOR (ALLINEATO A SINISTRA SOTTO I TESTI) --- */

.scroll-indicator {

    display: block; 

    width: 100%; /* Prende tutta la larghezza disponibile */

    text-align: left; /* Allinea la freccia a sinistra, seguendo i testi */

    

    /* Spaziatura: 30px di spazio dall'h3 sopra, 0 sotto */

    margin: 30px 0 0 0 !important; 

    

    font-size: 30px; 

    color: var(--bianco); 

    opacity: 0.8;

    cursor: pointer; 

    z-index: 10;

    

    /* Animazione di rimbalzo */

    animation: bounce 2s ease infinite; 

}



.scroll-indicator:hover {

    color: var(--oro-spei); /* Diventa verde al passaggio del mouse */

    opacity: 1;

}



/* --- ANIMAZIONE KEYFRAMES (Rimbalzo elegante) --- */

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-15px); /* Sale di 15px */

    }

    60% {

        transform: translateY(-7px); /* Rimbalzo più piccolo */

    }

}



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

   ANIMAZIONE CROSSFADE (Comune)

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

@keyframes fadeAutomaticoMobile {

    0%   { opacity: 1; } /* Visibile per i primi 3 secondi */

    40%  { opacity: 1; } 

    50%  { opacity: 0; } /* Si dissolve velocemente a metà ciclo */

    90%  { opacity: 0; } /* Trasparente per mostrare la foto sotto (altri 3s) */

    100% { opacity: 1; } /* Riappare chiudendo il loop */

}



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

   COMPORTAMENTO SOLO SU MOBILE (Sotto i 768px)

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

@media (max-width: 768px) {

    .valori-dual-gallery {

        /* Distruggiamo la griglia su mobile e usiamo un contenitore relativo */

        display: block !important; 

        position: relative;

        height: 300px; 

        overflow: hidden;

        margin-bottom: 60px;

        /* RIMOSSO IL BORDO ARROTONDATO DAL CONTENITORE */

        border-radius: 0 !important; 

    }



    .valori-dual-gallery img {

        /* Sovrapponiamo perfettamente le immagini */

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        object-fit: cover;

        /* RIMOSSO IL BORDO ARROTONDATO DALLE SINGOLE IMMAGINI */

        border-radius: 0 !important; 

    }



    /* Assegniamo l'animazione SOLO alla foto superiore su mobile */

    .valori-dual-gallery .mobile-fade-top {

        animation: fadeAutomaticoMobile 6s infinite ease-in-out;

    }

}