/* -------------------------------------------------------------------------------- */
 /* Impostazioni generali */
 /* -------------------------------------------------------------------------------- */
 :root {
     /* Colori */
     --colore-principale: #1b1f22;
     --colore-grigio: #666666;
     --colore-secondario: #739dd3;
     --colore-blu-scuro: #203478;
     --colore-verde: #84c242;
     --colore-verde-scuro: #277720;
     --colore-chiaro: #f5f5f5;
     --colore-blu: #16598f;
     --colore-arancione: #ff9400;
     --colore-arancione-scuro: #910000;
     /* Tipografia */
     --font-principale: 'bozon-regular', sans-serif;
     --font-secondario: 'bozon-demibold', serif;
     --font-titoli: 'fisterra-morte', sans-serif;

     /* Spaziature */
     --spaziatura-xs: 0.5rem;
     --spaziatura-sm: 1rem;
     --spaziatura-md: 2rem;
     --spaziatura-lg: 4rem;

     /* Altre proprietà UI */
     --raggio-bordo: 4px;
     --ombra-box: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 /* Tipografia */
 @font-face {
     font-family: "bozon-regular";
     src: url("../fonts/bozon-regular.otf") format("opentype");
 }

 @font-face {
     font-family: "bozon-demibold";
     src: url("../fonts/bozon-demi-bold.otf") format("opentype");
 }

 @font-face {
     font-family: "star-cartoon";
     src: url("../fonts/star-cartoon.otf") format("opentype");
 }

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

 body {
     font-family: var(--font-principale);
     /* height: 100vh;
     overflow: hidden; */
     background-image: url("../img/0-background.webp");
     background-attachment: fixed;
     background-size: cover;
     background-position: center;


     min-height: 100vh;
     overflow-x: hidden;
     /* Solo per nascondere scroll orizzontale se necessario */
 }

 /* -------------------------------------------------------------------------------- */
 /* ! Sistema Grid Globale */
 /* -------------------------------------------------------------------------------- */
 /* Container globale */
 .container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 2rem;
     width: 100%;
 }

 /* Grid 8 colonne */
 .grid {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     gap: 2rem;
 }

 /* Classi colonne */
 .col-1 {
     grid-column: span 1;
 }

 .col-2 {
     grid-column: span 2;
 }

 .col-3 {
     grid-column: span 3;
 }

 .col-4 {
     grid-column: span 4;
 }

 .col-5 {
     grid-column: span 5;
 }

 .col-6 {
     grid-column: span 6;
 }

 .col-7 {
     grid-column: span 7;
 }

 .col-8 {
     grid-column: span 8;
 }

 /* Responsive */
 /* @media (max-width: 768px) {
     .container {
         padding: 0 1rem;
     }

     .grid {
         grid-template-columns: repeat(4, 1fr);
         gap: 1rem;
     }

     .col-1,
     .col-2,
     .col-3,
     .col-4,
     .col-5,
     .col-6,
     .col-7,
     .col-8 {
         grid-column: span 4;
         /* Su mobile tutto a larghezza piena */
 /* }
 } */

 */
 /* -------------------------------------------------------------------------------- */
 /* ! Cursor*/
 /* -------------------------------------------------------------------------------- */

 /* RIMUOVE COMPLETAMENTE TUTTI I CURSORI DEFAULT */
 *,
 *::before,
 *::after {
     cursor: none !important;
 }

 * {
     cursor: none !important;
 }

 /* CURSORE PERSONALIZZATO - Solo per desktop */
 .cursor {
     position: fixed;
     width: 20px;
     height: 20px;
     background: var(--colore-grigio);
     border-radius: 50%;
     pointer-events: none;
     z-index: 10000;
     mix-blend-mode: difference;
     transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
     /* Nascondi di default */
     display: none;
 }

 /* Mostra cursore personalizzato SOLO su desktop */
 @media (hover: hover) and (pointer: fine) {
     .cursor {
         display: block;
     }

     /* Nascondi cursore nativo solo su desktop */
     button,
     a,
     [onclick],
     input,
     textarea,
     .carta-progetto-portfolio,
     .filtro,
     .pulsante-nav,
     .pulsante-cv {
         cursor: none;
     }
 }

 /* Stati del cursore - Solo su desktop */
 @media (hover: hover) and (pointer: fine) {
     .cursor.hover {
         width: 40px;
         height: 40px;
         background: rgba(255, 255, 255, 0.6);
     }

     .cursor.click {
         width: 15px;
         height: 15px;
         background: #ffffff;
     }
 }

 /* Ripristina cursore nativo su tablet e mobile */
 @media (hover: none) {

     button,
     a,
     [onclick],
     input,
     textarea,
     .carta-progetto-portfolio,
     .filtro,
     .pulsante-nav,
     .pulsante-cv {
         cursor: auto !important;
     }
 }

 .title {
     font-size: 3rem;
     margin-bottom: 50px;
 }

 .button {
     background: rgba(0, 0, 0, 0.8);
     color: white;
     border: none;
     padding: 15px 30px;
     border-radius: 25px;
     font-size: 18px;
     font-weight: bold;
     margin: 10px;
     transition: all 0.3s ease;
 }

 .button:hover {
     background: rgba(0, 0, 0, 0.9);
     transform: translateY(-2px);
 }

 .link {
     color: white;
     text-decoration: none;
     font-size: 24px;
     margin: 20px;
     display: inline-block;
     border-bottom: 2px solid transparent;
     transition: border-color 0.3s ease;
 }

 .link:hover {
     border-bottom-color: white;
 }

 .text-section {
     max-width: 800px;
     margin: 50px auto;
     line-height: 1.6;
     font-size: 18px;
 }

 /* -------------------------------------------------------------------------------- */
 /* ! Sezione Loop progetti */
 /* -------------------------------------------------------------------------------- */

 .sezione-loop {

     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     position: relative;
     overflow: hidden;
 }

 .contenitore-carosello {
     display: flex;
     animation: scorrimento 60s linear infinite;
     width: max-content;
 }

 .carta-progetto {
     position: relative;
     width: 60vw;
     max-width: auto;
     min-width: 300px;
     height: 97vh;
     border-radius: 20px;
     overflow: hidden;
     margin-right: 20px;
     flex-shrink: 0;
     transition: transform 0.3s ease;
 }

 /* .carta-progetto:hover {
     transform: scale(1.02);
 } */

 .carta-progetto img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .carta-progetto::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(180deg,
             rgba(27, 31, 34, 0.6) 0%,
             rgba(27, 31, 34, 0.6) 100%);
     pointer-events: none;
     border-radius: 20px;
 }

 @keyframes scorrimento {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 .floating-image {
     position: absolute;
     top: 10%;
     /* La tua preferenza */
     left: 50%;
     transform: translateX(-50%);
     width: 500px;
     /* La tua dimensione */
     height: 500px;
     /* La tua dimensione */
     border-radius: 50%;
     /* IMPORTANTE: per renderla rotonda */
     z-index: 999;

     /* ANIMAZIONE FLUTTUAZIONE CON GLOW - RIPRISTINATA */
     animation: floatGlow 3s ease-in-out infinite;

 }

 @keyframes floatGlow {

     0%,
     100% {
         transform: translateX(-50%) translateY(0px);
         /* CHIAVE: translateY per fluttuare */

     }

     50% {
         transform: translateX(-50%) translateY(-20px);
         /* CHIAVE: movimento verticale */

     }
 }


 /* -------------------------------------------------------------------------------- */
 /* ! Barra di Navigazione con Menu Espandibile */
 /* -------------------------------------------------------------------------------- */

 /* ============================================================================ */
 /* NAVBAR PRINCIPALE - NUOVO LAYOUT */
 /* ============================================================================ */

 .barra-navigazione {
     position: absolute;
     top: 70%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);
     border-radius: 30px;
     padding: 12px 24px;
     display: flex;
     align-items: center;
     gap: 40px;
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     z-index: 1000;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     width: 800px;
     justify-content: space-between;
     /* Larghezza fissa */
 }

 /* Quando il menu è aperto - NUOVO COMPORTAMENTO */
 .barra-navigazione.menu-aperto {
     justify-content: flex-start;
     gap: 20px;
 }

 /* Navbar fissa quando si scrolla */
 .barra-navigazione.fissa {
     position: fixed;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(102, 102, 102, 0.3);
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     backdrop-filter: blur(15px);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
 }

 /* ============================================================================ */
 /* 1. LOGO A SINISTRA */
 /* ============================================================================ */

 .logo-sinistra {
     color: var(--colore-principale);
     font-size: 30px;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-family: var(--font-titoli);
     text-align: center;
     font-weight: 700;
 }

 .logo-sinistra:hover {
     color: var(--colore-arancione);
     transform: translateY(-2px);
 }

 .barra-navigazione.fissa .logo-sinistra {
     color: var(--colore-chiaro);
 }

 .barra-navigazione.fissa .logo-sinistra:hover {
     color: var(--colore-arancione);
     transform: translateY(-2px);
 }

 /* NASCONDE il logo quando menu aperto */
 .barra-navigazione.menu-aperto .logo-sinistra {
     display: none;
 }

 /* ============================================================================ */
 /* 2. CONTATTI AL CENTRO (si sposta a sinistra quando menu aperto) */
 /* ============================================================================ */

 .pulsante-contatti {
     background: var(--colore-principale);
     color: white;
     border: none;
     padding: 12px 24px;
     border-radius: 25px;
     cursor: pointer;
     font-weight: 700;
     font-size: 30px;
     transition: all 0.3s ease;
     text-decoration: none;
     font-family: var(--font-titoli);
     text-transform: uppercase;
     letter-spacing: 1px;
     flex: 1;
     max-width: 200px;
     margin: 0 20px;
     white-space: nowrap;
 }

 .pulsante-contatti:hover {
     background: rgba(27, 31, 34, 0.8);
     color: var(--colore-arancione);
     transform: translateY(-2px);
 }

 /* Quando menu aperto, contatti va a sinistra */
 .barra-navigazione.menu-aperto .pulsante-contatti {
     background: rgba(27, 31, 34);
     color: white;
     border: none;
     padding: 12px 24px;
     border-radius: 25px;
     cursor: pointer;
     font-weight: 700;
     font-size: 30px;
     transition: all 0.3s ease;
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-titoli);
     position: relative;
     white-space: nowrap;
     flex: 0;
     margin: 0;
     margin-right: 20px;
     order: -1;
     /* Lo mette all'inizio */
 }

 .barra-navigazione.menu-aperto .pulsante-contatti:hover {
     color: var(--colore-arancione);
     transform: translateY(-2px);
 }

 /* ============================================================================ */
 /* 3. MENU A DESTRA (che si espande a sinistra) */
 /* ============================================================================ */

 .pulsante-menu {
     background: rgba(27, 31, 34);
     color: white;
     border: none;
     padding: 12px 24px;
     border-radius: 25px;
     cursor: pointer;
     font-weight: 700;
     font-size: 30px;
     transition: all 0.3s ease;
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-titoli);
     position: relative;
     white-space: nowrap;
 }

 .pulsante-menu:hover {
     background: rgba(27, 31, 34, 0.8);
     color: var(--colore-arancione);
     transform: translateY(-2px);
 }

 /* STATO ESPANSO - si allunga verso sinistra */
 .pulsante-menu.espanso {

     width: 500px;
     padding: 12px 30px;
     justify-content: space-between;
     /* L'espansione avviene verso sinistra grazie al transform-origin */
     transform-origin: right center;
 }

 /* Testo "MENU" */
 .testo-menu {

     display: block;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .pulsante-menu.espanso .testo-menu {

     display: none;
 }

 /* Menu items quando espanso */
 .menu-items {

     display: none;
     gap: 25px;
     align-items: center;
     flex: 1;
     justify-content: flex-start;

 }

 .pulsante-menu.espanso .menu-items {
     display: flex;
 }

 .menu-items a {
     color: white;
     text-decoration: none;
     font-family: var(--font-titoli);
     font-size: 30px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
     padding: 5px 10px;
     border-radius: 15px;
 }

 .menu-items a:hover {
     color: var(--colore-arancione, 0.8);
     transform: translateY(-2px);
 }

 .menu-items a i {
     font-size: 30px;
 }

 .fa-xmark {
     color: var(--colore-principale, 0.8);
     transform: translateY(-2px);
 }

 .fa-xmark:hover {
     color: var(--colore-arancione, 0.8);
     transform: translateY(-2px);
 }

 /* Pulsante chiudi X */
 .pulsante-chiudi-menu {
     background: rgba(255, 255, 255, 0.2);
     border: 2px solid rgba(255, 255, 255, 0.3);
     color: white;
     font-size: 16px;
     cursor: pointer;
     padding: 6px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: none;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     flex-shrink: 0;
 }

 /* ============================================================================ */
 /* HAMBURGER MENU - MOBILE */
 /* ============================================================================ */

 .hamburger-menu {
     display: none;
     flex-direction: column;
     cursor: pointer;
     padding: 10px;
     background: var(--colore-principale);
     border-radius: 10px;
     transition: all 0.3s ease;
 }

 .hamburger-line {
     width: 25px;
     height: 3px;
     background: white;
     margin: 3px 0;
     transition: all 0.3s ease;
     border-radius: 2px;
 }

 .hamburger-menu.active .hamburger-line:nth-child(1) {
     transform: rotate(45deg) translate(6px, 6px);
 }

 .hamburger-menu.active .hamburger-line:nth-child(2) {
     opacity: 0;
 }

 .hamburger-menu.active .hamburger-line:nth-child(3) {
     transform: rotate(-45deg) translate(6px, -6px);
 }

 /* ============================================================================ */
 /* MENU MOBILE FULLSCREEN */
 /* ============================================================================ */

 .menu-mobile {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background: rgba(27, 31, 34, 0.98);
     backdrop-filter: blur(10px);
     z-index: 2000;
     padding: 80px 40px 40px 40px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 40px;
     text-align: center;
 }

 .menu-mobile.active {
     display: flex;
 }

 .menu-mobile a,
 .menu-mobile button {
     color: white;
     text-decoration: none;
     font-family: var(--font-titoli);
     font-size: 2rem;
     font-weight: 700;
     padding: 15px 30px;
     border-radius: 15px;
     transition: all 0.3s ease;
     background: transparent;
     border: 2px solid transparent;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .menu-mobile a:hover,
 .menu-mobile button:hover {
     color: var(--colore-arancione);
     transform: translateY(-5px);
 }

 .menu-mobile .social-links {
     display: flex;
     gap: 30px;
     margin-top: 20px;
 }

 .menu-mobile .social-links a {
     font-size: 2rem;
     padding: 10px;
 }

 .chiudi-menu-mobile {
     position: absolute;
     top: 30px;
     right: 30px;
     color: white;
     font-size: 20px;
     cursor: pointer;
     padding: 10px;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
 }

 .chiudi-menu-mobile:hover {
     transform: rotate(90deg);
 }

 /* ============================================================================ */
 /* MODALE CONTATTI */
 /* ============================================================================ */

 .sovrapposizione-modale {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 2000;
     padding: 20px;
     backdrop-filter: blur(5px);
 }

 .sovrapposizione-modale.attiva {
     display: flex;
 }

 .finestra-modale {
     background: white;
     border-radius: 20px;
     max-width: 1000px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }

 .contenuto-modale {
     padding: 40px;
 }

 .intestazione-modale {
     grid-column: 1 / -1;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 30px;
     border-bottom: 1px solid #eee;
     margin-bottom: 30px;
 }

 .scheda-modale {
     padding: 12px 24px;
     background: var(--colore-principale);
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 600;
     font-size: 1rem;
     font-family: var(--font-titoli);
 }

 .pulsante-chiudi {
     background: transparent;
     color: var(--colore-principale);
     border: 2px solid var(--colore-principale);
     padding: 12px 24px;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 600;
     font-size: 1rem;
     transition: all 0.3s ease;
 }

 .pulsante-chiudi:hover {
     background: var(--colore-principale);
     color: white;
 }

 .sezione-immagine {
     display: flex;
     align-items: flex-start;
     justify-content: center;
 }

 .contenitore-immagine {
     width: 100%;
     max-width: 300px;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }

 .contenitore-immagine img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
 }

 .sezione-modulo h3 {
     font-size: 2rem;
     margin-bottom: 15px;
     color: var(--colore-principale);
     line-height: 1.3;
     font-family: var(--font-titoli);
 }

 .sezione-modulo p {
     color: var(--colore-principale);
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 1rem;
 }

 .gruppo-campo {
     margin-bottom: 25px;
 }

 .gruppo-campo label {
     display: block;
     margin-bottom: 8px;
     font-weight: 600;
     color: var(--colore-principale);
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .gruppo-campo input,
 .gruppo-campo textarea {
     width: 100%;
     padding: 15px;
     border: 2px solid #eee;
     border-radius: 10px;
     font-size: 1rem;
     font-family: var(--font-principale);
     transition: border-color 0.3s ease;
 }

 .gruppo-campo input:focus,
 .gruppo-campo textarea:focus {
     outline: none;
     border-color: var(--colore-secondario);
 }


 .pulsante-invio {
     background: var(--colore-principale);
     color: white;
     border: none;
     padding: 18px 30px;
     border-radius: 10px;
     cursor: pointer;
     font-weight: 600;
     font-size: 1rem;
     width: 100%;
     transition: all 0.3s ease;
     font-family: var(--font-titoli);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .pulsante-invio:hover {
     background: rgba(27, 31, 34, 0.8);
     transform: translateY(-2px);
 }

 .disclaimer {
     font-size: 0.9rem;
     color: #999;
     margin-top: 20px;
     line-height: 1.5;
 }

 /* -------------------------------------------------------------------------------- */
 /* ! Finestra modale contatti */
 /* -------------------------------------------------------------------------------- */


 .sovrapposizione-modale {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 2000;
     padding: 20px;
 }

 .sovrapposizione-modale.attiva {
     display: flex;
 }

 .finestra-modale {
     background: white;
     border-radius: 20px;
     max-width: 1000px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }

 /* Utilizzo del sistema grid nella modale */
 .contenuto-modale {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     gap: 20px;
     padding: 30px;
 }

 .intestazione-modale {
     grid-column: 1 / -1;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 20px;
     border-bottom: 1px solid #eee;
     margin-bottom: 20px;
 }

 .schede-modale {
     display: flex;
     gap: 20px;
 }

 .scheda-modale {
     padding: 10px 20px;
     background-color: var(--colore-chiaro);
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 500;
     transition: all 0.3s ease;
     font-size: 1rem;
 }

 .scheda-modale.attiva {
     background: var(--colore-principale);
     color: white;
     font-family: var(--font-primario);
 }

 .scheda-modale.attiva:hover {
     opacity: 0.6;
 }

 .pulsante-chiudi {
     background: var(--colore-principale);
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 500;
     font-family: var(--font-primario);
     font-size: 1rem;
 }

 .pulsante-chiudi:hover {
     opacity: 0.6;
 }

 /* Sezione immagine - con dimensioni controllate */
 .sezione-immagine {
     grid-column: span 3;
     display: flex;
     align-items: flex-start;
     justify-content: center;

     border-radius: 15px;

 }

 .contenitore-immagine {
     width: 100%;
     max-width: 350px;

     height: auto;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 .contenitore-immagine img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
 }

 /* Sezione modulo da compilare */
 .sezione-modulo {
     grid-column: span 5;
 }

 .sezione-modulo h3 {
     font-size: 2.2rem;
     margin-bottom: 15px;
     color: var(--colore-principale);
     line-height: 1.3;
     font-family: var(--font-titoli);
 }

 .sezione-modulo p {
     color: var(--colore-principale);
     font-family: var(--font-principale);
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 15px;
 }

 .gruppo-campo {
     margin-bottom: 20px;
 }

 .gruppo-campo label {
     display: block;
     margin-bottom: 8px;
     font-weight: 600;
     color: var(--colore-principale);
     font-size: 12px;
     font-family: var(--font-principale);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .gruppo-campo input,
 .gruppo-campo textarea {
     width: 100%;
     padding: 12px 15px;
     border: 2px solid #eee;
     border-radius: 8px;
     font-size: 14px;
     font-family: var(--font-principale);
     transition: border-color 0.3s ease;
     font-family: inherit;
     font-family: var(--font-primario);
 }

 .pulsante-invio {
     background: var(--colore-principale);
     color: white;
     border: none;
     padding: 15px 30px;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 600;
     font-size: 14px;
     width: 100%;
     transition: background 0.3s ease;
 }

 .pulsante-invio:hover {
     opacity: 0.6;
 }

 .disclaimer {
     font-size: 11px;
     color: #999;
     margin-top: 15px;
     line-height: 1.4;
 }

 /* ============================================================================ */
 /* CHECKBOX PRIVACY - VERSIONE SEMPLIFICATA */
 /* ============================================================================ */

 .privacy-checkbox {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-top: 15px;
     padding: 15px;
     background: rgba(0, 0, 0, 0.02);
     border-radius: 8px;
     border: 1px solid #eee;
 }

 .privacy-checkbox input[type="checkbox"] {
     width: 18px !important;
     height: 18px !important;
     margin: 0 !important;
     padding: 0 !important;
     flex-shrink: 0;
     accent-color: var(--colore-principale);
     cursor: pointer;
 }

 .privacy-label {
     font-size: 0.9rem !important;
     line-height: 1.4 !important;
     color: var(--colore-grigio) !important;
     cursor: pointer;
     margin-bottom: 0 !important;
     text-transform: none !important;
     letter-spacing: normal !important;
     font-weight: normal !important;
 }

 .privacy-label a {
     color: var(--colore-secondario);
     text-decoration: none;
     font-weight: 600;
 }

 .privacy-label a:hover {
     text-decoration: underline;
 }

 /* Evidenzia quando non selezionato e form inviato */
 .privacy-checkbox.error {
     border-color: #e74c3c;
     background: rgba(231, 76, 60, 0.05);
 }

 .privacy-checkbox.error .privacy-label {
     color: #e74c3c !important;
 }



 /* -------------------------------------------------------------------------------- */
 /* ! Sezione Su di Me */
 /* -------------------------------------------------------------------------------- */

 .sezione-su-di-me {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding: 120px 0 80px 0;
     /* Padding top per navbar fissa */
 }

 .contenuto-su-di-me {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     gap: 60px;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 40px;
     align-items: center;
 }

 /* Sezione testo (sinistra) */
 .testo-presentazione {
     grid-column: span 4;
     padding-right: 40px;
 }

 .testo-presentazione h2 {
     font-size: 3.5rem;
     color: var(--colore-principale);
     margin-bottom: 30px;
     font-family: var(--font-titoli);
     font-weight: 800;
     line-height: 1.1;
     text-transform: uppercase;
 }

 .testo-presentazione p {
     font-size: 1.1rem;
     color: var(--colore-principale);
     margin-bottom: 25px;
     line-height: 1.7;
     font-family: var(--font-principale);
 }

 .evidenziato {
     font-weight: 700;
     color: var(--colore-principale);
 }

 /* Sezione immagine e bottone (destra) */
 .sezione-immagine-cv {
     grid-column: span 4;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 .contenitore-immagine-profilo {
     width: 100%;
     max-width: 450px;
     height: auto;
     margin-bottom: 30px;
     position: relative;
 }

 .contenitore-immagine-profilo img {
     width: 120%;
     height: auto;
     border-radius: 15px;

     transition: transform 0.3s ease;
 }

 .contenitore-immagine-profilo:hover img {
     transform: translateY(-8px);
 }

 /* Bottone CV */
 .pulsante-cv {
     background: var(--colore-principale);
     color: white;
     border: none;
     padding: 18px 40px;
     border-radius: 50px;
     cursor: pointer;
     font-weight: 700;
     font-size: 1.1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     box-shadow: 0 8px 25px rgba(27, 31, 34, 0.3);
 }

 .pulsante-cv:hover {
     background: var(--colore-arancione);
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(27, 31, 34, 0.4);
 }

 .pulsante-cv i {
     font-size: 1.2rem;
 }

 /* -------------------------------------------------------------------------------- */
 /* ! Sezione Software Skills */
 /* -------------------------------------------------------------------------------- */

 .sezione-skills {
     min-height: 100vh;
     padding: 120px 0 80px 0;
     /* backdrop-filter: blur(5px); */
     position: relative;
 }

 .contenitore-skills {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 40px;
 }

 /* Intestazione sezione */
 .intestazione-skills {
     text-align: center;
     margin-top: -80px;
     margin-bottom: 80px;
 }

 .intestazione-skills h2 {
     font-size: 3.5rem;
     color: var(--colore-principale);
     margin-bottom: 20px;
     font-family: var(--font-titoli);
     font-weight: 800;
     text-transform: uppercase;
     line-height: 1.1;
 }

 /* Griglia skills usando il sistema grid a 8 colonne */
 .griglia-skills {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     gap: 40px;
     margin-bottom: 80px;
 }

 /* Ogni categoria occupa 4 colonne (2 per riga) */
 .categoria-skills {
     grid-column: span 4;
     background: rgba(27, 31, 34);
     border-radius: 20px;
     padding: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .categoria-skills:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 /* Titolo categoria */
 .categoria-skills h3 {
     font-size: 1.8rem;
     color: var(--colore-chiaro);
     margin-bottom: 25px;
     font-family: var(--font-titoli);
     font-weight: 800;
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .categoria-skills h3 i {
     font-size: 1.5rem;
     color: var(--colore-secondario);
 }

 /* Cards delle skills */
 .skills-cards {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .skill-card {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px;
     background: rgba(255, 255, 255, 0.6);
     border-radius: 15px;
     transition: all 0.3s ease;
     border-left: 4px solid transparent;
 }

 .skill-card:hover {
     background: rgba(255, 255, 255, 0.9);
     transform: translateX(5px);
 }

 /* Colori per livelli di competenza */
 .skill-card.avanzato {
     border-left-color: var(--colore-grigio);
 }

 .skill-card.intermedio {
     border-left-color: var(--colore-grigio);
 }

 .skill-card.base {
     border-left-color: var(--colore-grigio);
 }

 /* Icona skill */
 .skill-icon {
     width: 50px;
     height: 50px;
     background: var(--colore-principale);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .skill-icon i {
     font-size: 24px;
     color: white;
 }

 /* Informazioni skill */
 .skill-info {
     flex: 1;
 }

 .skill-info h4 {
     font-size: 1.1rem;
     color: var(--colore-principale);
     margin-bottom: 5px;
     font-family: var(--font-principale);
     font-weight: 600;
 }

 .skill-level {
     font-size: 0.9rem;
     color: var(--colore-grigio);
     margin-bottom: 10px;
     display: block;
     font-family: var(--font-principale);
 }

 /* Barre di progresso */
 .skill-bar {
     width: 100%;
     height: 6px;
     background: rgba(0, 0, 0, 0.1);
     border-radius: 3px;
     overflow: hidden;
 }

 .skill-progress {
     height: 100%;
     background: linear-gradient(90deg, var(--colore-secondario), var(--colore-blu));
     border-radius: 3px;
     transition: width 1s ease-in-out;
 }

 /* Animazione delle barre al caricamento */
 .skill-card.avanzato .skill-progress {
     background: var(--colore-principale);
 }

 .skill-card.intermedio .skill-progress {
     background: var(--colore-principale);
 }

 .skill-card.base .skill-progress {
     background: var(--colore-principale);
 }

 /* Sezione certificazioni */
 .certificazioni {
     text-align: center;
     background: rgba(27, 31, 34);
     border-radius: 20px;
     padding: 40px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(10px);
 }

 .certificazioni h3 {
     font-size: 2rem;
     color: var(--colore-chiaro);
     margin-bottom: 30px;
     font-family: var(--font-titoli);
     font-weight: 700;
 }

 .lista-certificazioni {
     display: flex;
     justify-content: center;
     gap: 40px;
     flex-wrap: wrap;
 }

 .certificazione {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 15px 25px;
     background: rgba(255, 255, 255, 0.6);
     border-radius: 25px;
     font-family: var(--font-principale);
     font-weight: 500;
     color: var(--colore-principale);
     transition: all 0.3s ease;
 }

 .certificazione:hover {
     background: var(--colore-chiaro);
     color: (var(--colore-principale));
     transform: translateY(-3px);
 }

 .certificazione i {
     font-size: 1.2rem;
     color: var(--colore-grigio);
 }

 .certificazione:hover i {
     color: var(--colore-principale);
 }

 /* -------------------------------------------------------------------------------- */
 /* ! Sezione Progetti - Sistema Grid 8 colonne */
 /* -------------------------------------------------------------------------------- */

 .sezione-progetti {
     min-height: 100vh;
     padding: 120px 0 80px 0;
     background-image: url("../img/0-background-nero.webp");
     backdrop-filter: blur(5px);
     position: relative;
 }

 .contenitore-progetti {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 40px;
 }

 /* Intestazione sezione */
 .intestazione-progetti {
     text-align: center;
     margin-bottom: 50px;
 }

 .intestazione-progetti h2 {
     font-size: 3.5rem;
     color: white;
     margin-bottom: 20px;
     font-family: var(--font-titoli);
     font-weight: 800;
     text-transform: uppercase;
     line-height: 1.1;
 }

 .intestazione-progetti p {
     font-size: 1.2rem;
     color: rgba(255, 255, 255, 0.8);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
     font-family: var(--font-principale);
 }

 /* Filtri progetti */
 .filtri-progetti {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 60px;
     flex-wrap: wrap;
 }

 .filtro {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border: 2px solid rgba(255, 255, 255, 0.3);
     padding: 12px 25px;
     border-radius: 25px;
     cursor: pointer;
     font-family: var(--font-principale);
     font-weight: 600;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     backdrop-filter: blur(10px);
 }

 .filtro:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.5);
     transform: translateY(-2px);
 }

 .filtro.attivo {
     background: var(--colore-arancione);
     border-color: var(--colore-arancione);
     color: white;
 }

 /* Container per la griglia */
 .container-griglia-progetti {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Sistema Grid SEMPLICE - DESKTOP: 3 progetti per riga */
 .griglia-progetti {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 /* Cards progetti - layout più semplice */
 .carta-progetto-portfolio {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     overflow: hidden;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     flex-direction: column;
     height: 450px;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .carta-progetto-portfolio:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
     border-color: rgba(255, 255, 255, 0.2);
 }

 /* Nasconde i progetti filtrati SENZA animazione fade */
 .carta-progetto-portfolio.nascosto {
     display: none;
 }

 .carta-progetto-portfolio.visibile {
     display: flex;
 }

 /* Immagine progetto */
 .carta-progetto-portfolio .immagine-progetto {
     position: relative;
     width: 100%;
     height: 280px;
     overflow: hidden;
     flex-shrink: 0;
 }

 .carta-progetto-portfolio .immagine-progetto img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .carta-progetto-portfolio:hover .immagine-progetto img {
     transform: scale(1.05);
 }

 /* Informazioni progetto */
 .carta-progetto-portfolio .info-progetto {
     padding: 25px;
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .carta-progetto-portfolio .info-progetto h3 {
     font-size: 1.3rem;
     color: white;
     margin-bottom: 8px;
     font-family: var(--font-titoli);
     font-weight: 700;
 }

 .carta-progetto-portfolio .info-progetto p {
     font-size: 0.95rem;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 15px;
     line-height: 1.5;
     font-family: var(--font-principale);
 }

 /* Tags progetto */
 .tag-progetto {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .tag {
     background: rgba(255, 255, 255, 0.1);
     color: rgba(255, 255, 255, 0.9);
     padding: 4px 12px;
     border-radius: 12px;
     font-size: 0.75rem;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-family: var(--font-principale);
 }



 /* -------------------------------------------------------------------------------- */
 /* !CHI SONO DAVVERO */
 /* -------------------------------------------------------------------------------- */

 /* ============================================================================ */
 /* SEZIONE CHI SONO DAVVERO */
 /* ============================================================================ */

 .sezione-chi-sono {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding: 120px 0 80px 0;
     position: relative;
 }

 /* Decorazione di sfondo */
 .sezione-chi-sono::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0.3;
     z-index: 0;
 }

 .contenuto-chi-sono {
     position: relative;
     z-index: 1;
 }

 /* Prima riga: Immagine + Titolo/Intro */
 .prima-riga {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     gap: 2rem;
     align-items: center;
     margin-bottom: 60px;
 }

 /* Seconda riga: Contenuto completo */
 .contenuto-completo {
     width: 100%;
 }

 /* ============================================================================ */
 /* IMMAGINE A SINISTRA */
 /* ============================================================================ */

 .sezione-immagine-personale {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
 }

 .contenitore-immagine-personale {
     width: 100%;
     max-width: 400px;
     height: 500px;
     margin-bottom: 30px;
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     background: linear-gradient(135deg, var(--colore-secondario), #667eea);
 }

 .contenitore-immagine-personale img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .contenitore-immagine-personale:hover img {
     transform: scale(1.05);
 }

 /* ============================================================================ */
 /* TESTO INTRO A DESTRA (solo titolo e intro) */
 /* ============================================================================ */

 .testo-intro {
     padding-left: 2rem;
 }

 .testo-intro h2 {
     font-size: clamp(2.5rem, 5vw, 3.5rem);
     color: var(--colore-principale);
     margin-bottom: 30px;
     font-family: var(--font-titoli);
     font-weight: 800;
     line-height: 1.1;
     text-transform: uppercase;
 }

 .testo-intro h2 .accent {
     color: var(--colore-grigio);
     position: relative;
 }

 .testo-intro h2 .accent::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 100%;
     height: 3px;
     background: var(--colore-grigio);
     border-radius: 2px;
 }

 .intro-text {
     font-size: 1.2rem;
     color: var(--colore-grigio);
     margin-bottom: 20px;
     font-style: italic;
 }

 .descrizione-principale {
     font-size: 1.1rem;
     color: var(--colore-principale);
     line-height: 1.7;
 }

 .evidenziato {
     font-weight: 700;
     color: var(--colore-principale);
     position: relative;
 }

 /* ============================================================================ */
 /* SEZIONI TEMATICHE E CURIOSITÀ (LARGHEZZA COMPLETA) */
 /* ============================================================================ */

 .sezioni-personali {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 30px;
     margin-bottom: 50px;
 }

 .sezione-tema {
     background: var(--colore-principale);
     padding: 25px;
     border-radius: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     border-left: 4px solid var(--colore-grigio);
     transition: all 0.3s ease;
 }

 .sezione-tema:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
 }

 .sezione-tema h3 {
     font-size: 1.3rem;
     color: var(--colore-chiaro);
     margin-bottom: 15px;
     font-family: var(--font-titoli);
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .sezione-tema h3 i {
     color: var(--colore-chiaro);
     font-size: 1.2rem;
 }

 .sezione-tema p {
     font-size: 0.95rem;
     color: var(--colore-chiaro);
     line-height: 1.6;
     margin: 0;
 }

 /* ============================================================================ */
 /* CURIOSITÀ E VALORI (LARGHEZZA COMPLETA) */
 /* ============================================================================ */

 .curiosita-section {
     background: var(--colore-principale);
     padding: 40px;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .curiosita-section h3 {
     font-size: 1.5rem;
     color: var(--colore-chiaro);
     margin-bottom: 20px;
     font-family: var(--font-titoli);
     font-weight: 700;
     text-align: center;
 }

 .curiosita-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 20px;
 }

 .curiosita-item {
     text-align: center;
     padding: 20px;
     background: var(--colore-chiaro);
     border-radius: 12px;
     transition: all 0.3s ease;
 }

 .curiosita-item:hover {
     background: var(--colore-grigio);
     color: white;
     transform: translateY(-3px);
 }

 .curiosita-item i {
     font-size: 2rem;
     color: var(--colore-grigio);
     margin-bottom: 10px;
     transition: color 0.3s ease;
 }

 .curiosita-item:hover i {
     color: white;
 }

 .curiosita-item h4 {
     font-size: 1.1rem;
     margin-bottom: 8px;
     font-family: var(--font-titoli);
     font-weight: 600;
 }

 .curiosita-item p {
     font-size: 0.9rem;
     margin: 0;
     opacity: 0.8;
 }


 /* -------------------------------------------------------------------------------- */
 /* !FOOTER PRINCIPALE  */
 /* -------------------------------------------------------------------------------- */

 .footer {
     background-image: url("../img/0-background-nero.webp");
     color: white;
     padding: 80px 0 0 0;
     position: relative;
     overflow: hidden;
 }

 /* ============================================================================ */
 /* SEZIONE PRINCIPALE DEL FOOTER - GRID CORRETTO */
 /* ============================================================================ */

 .footer-main {
     padding-bottom: 60px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
     /* 3 colonne: 25% 50% 25% */
     gap: 3rem;
     align-items: start;
 }

 /* ============================================================================ */
 /* 1. COLONNA SOCIAL E CONTATTI (SINISTRA) */
 /* ============================================================================ */

 .footer-social-column {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .footer-section h3 {
     font-family: var(--font-titoli);
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 20px;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--colore-chiaro);
 }

 /* Social Links */
 .social-links {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .social-link {
     display: flex;
     align-items: center;
     gap: 15px;
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     transition: all 0.3s ease;
     padding: 10px 15px;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
 }

 .social-link:hover {
     color: white;
     background: rgba(255, 255, 255, 0.1);
     transform: translateX(5px);
 }

 .social-link i {
     font-size: 1.2rem;
     width: 25px;
     text-align: center;
 }

 .social-link span {
     font-weight: 500;
 }

 /* Colore specifico per ogni social */
 .social-link.whatsapp:hover {
     background: rgba(37, 211, 102, 0.2);
 }

 .social-link.instagram:hover {
     background: rgba(225, 48, 108, 0.2);
 }

 .social-link.linkedin:hover {
     background: rgba(40, 103, 178, 0.2);
 }

 .social-link.behance:hover {
     background: rgba(5, 111, 255, 0.2);
 }

 /* Sezione Contatti Veloci */
 .quick-contact {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: 12px;
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.9rem;
 }

 .contact-item i {
     font-size: 1rem;
     color: var(--colore-chiaro);
     width: 20px;
 }

 /* ============================================================================ */
 /* CITAZIONE CENTRALE */
 /* ============================================================================ */

 .footer-quote {
     text-align: center;
     padding: 0 20px;
 }

 .quote-content {
     padding: 40px 30px;

     position: relative;
 }

 .quote-content::before {
     content: '"';
     font-size: 4rem;
     color: var(--colore-chiaro);
     position: absolute;
     top: -10px;
     left: 20px;
     font-family: Georgia, serif;
     opacity: 0.5;
 }

 .quote-text {
     font-size: 1.3rem;
     font-style: italic;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 15px;
     font-family: Georgia, serif;
 }

 .quote-author {
     font-size: 0.9rem;
     color: var(--colore-chiaro);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* ============================================================================ */
 /* SERVIZI E INFORMAZIONI */
 /* ============================================================================ */

 .footer-services {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .services-list {
     list-style: none;
 }

 .services-list li {
     padding: 8px 0;
     color: rgba(255, 255, 255, 0.8);
     transition: all 0.3s ease;
     cursor: pointer;
     border-left: 3px solid transparent;
     padding-left: 15px;
 }

 .services-list li:hover {
     color: white;
     border-left-color: var(--colore-chiaro);
     transform: translateX(5px);
 }

 .services-list li::before {
     content: '→';
     color: var(--colore-chiaro);
     margin-right: 8px;
     transition: transform 0.3s ease;
 }

 .services-list li:hover::before {
     transform: translateX(3px);
 }

 /* Informazioni Studio */
 .studio-info {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 15px;
     padding: 25px;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .studio-info h4 {
     color: var(--colore-chiaro);
     margin-bottom: 10px;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .studio-info p {
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.5;
 }

 /* ============================================================================ */
 /* SEZIONE BOTTOM - COPYRIGHT E LINK LEGALI (DENTRO CONTAINER) */
 /* ============================================================================ */

 .footer-bottom {
     padding: 30px 0;
     backdrop-filter: blur(10px);
 }

 .footer-bottom-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 2rem;
 }

 .copyright {
     color: rgba(255, 255, 255, 0.6);
     font-size: 0.9rem;
 }

 .legal-links {
     display: flex;
     gap: 30px;
     flex-wrap: wrap;
 }

 .legal-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     padding: 5px 10px;
     border-radius: 5px;
 }

 .legal-links a:hover {
     color: var(--colore-chiaro);
 }

 .back-to-top {
     background: var(--colore-grigio);
     color: var(--colore-principale);
     border: none;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
 }

 .back-to-top:hover {
     background: var(--colore-chiaro);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(115, 157, 211, 0.4);
 }


 /* -------------------------------------------------------------------------------- */
 /* ! Responsive */
 /* -------------------------------------------------------------------------------- */

 @media (max-width: 768px) {


     .griglia {
         grid-template-columns: repeat(4, 1fr);
         gap: 15px;
         padding: 0 15px;
     }

     .colonna-1,
     .colonna-2,
     .colonna-3,
     .colonna-4,
     .colonna-5,
     .colonna-6,
     .colonna-7,
     .colonna-8 {
         grid-column: span 4;
     }

     /* BARRA DI NAVIGAZIONE */

     /* NASCONDI ELEMENTI CHE NON DEVONO APPARIRE SU MOBILE */
     .floating-image {
         display: none !important;
     }

     .sezione-loop {
         display: none !important;
     }

     /* BARRA DI NAVIGAZIONE MOBILE - Layout corretto */
     .barra-navigazione {
         position: fixed;
         /* Fissa in alto */
         top: 20px;
         /* Margine dall'alto */
         left: 50%;
         transform: translateX(-50%);
         /* Centrata orizzontalmente */
         width: 95%;
         padding: 15px 25px;
         justify-content: space-between;
         /* Logo a sinistra, hamburger a destra */
         align-items: center;
         z-index: 1000;
         /* Sopra tutto */
         background: rgba(255, 255, 255, 0.5);
         backdrop-filter: blur(10px);
         border-radius: 30px;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     }

     /* LOGO SINISTRA - MANTIENI VISIBILE su mobile */
     .logo-sinistra {
         display: block !important;
         /* Forza la visualizzazione */
         color: var(--colore-principale);
         font-size: 24px;
         /* Leggermente più piccolo su mobile */
         font-family: var(--font-titoli);
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         transition: all 0.3s ease;
     }

     .logo-sinistra:hover {
         color: var(--colore-arancione);
         transform: translateY(-2px);
         /* Leggero effetto hover */
     }

     /* HAMBURGER - POSIZIONA A DESTRA */
     .hamburger-menu {
         display: flex !important;
         /* Forza la visualizzazione */
         flex-direction: column;
         cursor: pointer;
         padding: 12px;
         background: var(--colore-principale);
         border-radius: 10px;
         transition: all 0.3s ease;
         order: 2;
         /* Assicura che sia a destra */
     }

     .hamburger-menu:hover {
         background: var(--colore-arancione);
         transform: scale(1.05);
     }

     /* LINEE HAMBURGER con hover */
     .hamburger-line {
         width: 25px;
         height: 3px;
         background: white;
         margin: 3px 0;
         transition: all 0.3s ease;
         border-radius: 2px;
     }

     .hamburger-menu:hover .hamburger-line {
         background: var(--colore-principale);
     }

     /* ANIMAZIONE HAMBURGER quando attivo */
     .hamburger-menu.active .hamburger-line:nth-child(1) {
         transform: rotate(45deg) translate(6px, 6px);
     }

     .hamburger-menu.active .hamburger-line:nth-child(2) {
         opacity: 0;
     }

     .hamburger-menu.active .hamburger-line:nth-child(3) {
         transform: rotate(-45deg) translate(6px, -6px);
     }

     /* NASCONDI elementi desktop che non servono su mobile */
     .pulsante-contatti,
     .pulsante-menu {
         display: none !important;
     }

     /* NAVBAR FISSA - comportamento corretto su mobile */
     .barra-navigazione.fissa {
         position: fixed;
         top: 10px;
         /* Più vicina al bordo quando fissa */
         left: 50%;
         transform: translateX(-50%);
         background: rgba(102, 102, 102, 0.3);
         transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
         backdrop-filter: blur(15px);
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
     }

     .barra-navigazione.fissa .logo-sinistra {
         color: var(--colore-chiaro);
         font-size: 30px;
     }

     .barra-navigazione.fissa .logo-sinistra:hover {
         color: var(--colore-arancione);
     }

     .barra-navigazione.fissa .hamburger-menu {
         background: var(--colore-principale);
     }

     .barra-navigazione.fissa .hamburger-menu:hover {
         background: var(--colore-arancione);
     }

     /* SU DI ME */

     .contenuto-su-di-me {
         grid-template-columns: 1fr;
         gap: 50px;
         padding: 0 20px;
         text-align: center;
     }

     .testo-presentazione,
     .sezione-immagine-cv {
         grid-column: span 1;
     }

     .testo-presentazione {
         padding-right: 0;
         order: 2;
     }

     .sezione-immagine-cv {
         order: 1;
     }

     .testo-presentazione h2 {
         font-size: 2.2rem;
         margin-bottom: 25px;
     }

     .testo-presentazione p {
         font-size: 1rem;
         margin-bottom: 20px;
     }

     .contenitore-immagine-profilo {
         max-width: 300px;
         margin-bottom: 25px;
     }

     .pulsante-cv {
         padding: 15px 30px;
         font-size: 1rem;
     }

     /* SKILLS */

     .sezione-skills {
         padding: 100px 0 60px 0;
     }

     .contenitore-skills {
         padding: 0 20px;
     }

     /* Su mobile ogni categoria occupa tutta la larghezza */
     .griglia-skills {
         grid-template-columns: 1fr;
         gap: 25px;
         margin-bottom: 60px;
     }

     .categoria-skills {
         grid-column: span 1;
         padding: 25px;
     }

     .intestazione-skills h2 {
         font-size: 2.2rem;
         margin-bottom: 15px;
     }

     .intestazione-skills {
         margin-bottom: 50px;
     }

     .intestazione-skills p {
         font-size: 1rem;
     }

     .categoria-skills h3 {
         font-size: 1.5rem;
         margin-bottom: 20px;
     }

     .skill-card {
         padding: 15px;
         gap: 15px;
     }

     .skill-icon {
         width: 45px;
         height: 45px;
     }

     .skill-icon i {
         font-size: 20px;
     }

     .skill-info h4 {
         font-size: 1rem;
     }

     .lista-certificazioni {
         flex-direction: column;
         gap: 15px;
     }

     .certificazione {
         justify-content: center;
     }

     /* PROGETTI */

     .sezione-progetti {
         padding: 100px 0 60px 0;
     }

     .contenitore-progetti {
         padding: 0 20px;
     }

     .container-griglia-progetti {
         padding: 0 10px;
     }

     .griglia-progetti {
         grid-template-columns: 1fr !important;
         gap: 15px;
     }

     .carta-progetto-portfolio {
         height: 400px;
     }

     .carta-progetto-portfolio .immagine-progetto {
         height: 240px;
     }

     .carta-progetto-portfolio .info-progetto {
         padding: 20px;
     }

     .carta-progetto-portfolio .info-progetto h3 {
         font-size: 1.1rem;
     }

     .carta-progetto-portfolio .info-progetto p {
         font-size: 0.9rem;
     }

     .intestazione-progetti h2 {
         font-size: 2.2rem;
         margin-bottom: 15px;
     }

     .intestazione-progetti {
         margin-bottom: 40px;
     }

     .intestazione-progetti p {
         font-size: 1rem;
     }

     .filtri-progetti {
         margin-bottom: 40px;
         gap: 10px;
     }

     .filtro {
         padding: 10px 18px;
         font-size: 0.8rem;
     }

     /* CHI SONO DAVVERO */

     .prima-riga {
         grid-template-columns: repeat(4, 1fr);
         gap: 1.5rem;
         text-align: center;
         margin-bottom: 40px;
     }

     .col-4 {
         grid-column: span 4;
     }

     .sezione-chi-sono {
         padding: 100px 0 60px 0;
     }

     .testo-intro {
         padding-left: 0;
         order: 2;
     }

     .sezione-immagine-personale {
         order: 1;
         margin-bottom: 2rem;
     }

     .contenitore-immagine-personale {
         max-width: 300px;
         height: 400px;
     }

     .sezioni-personali {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
         margin-bottom: 30px;
     }

     .curiosita-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 15px;
     }

     /* FOOTER */

     .footer-grid {
         grid-template-columns: 1fr;
         /* 1 colonna su mobile */
         gap: 2rem;
         text-align: center;
     }

     .footer {
         padding: 60px 0 0 0;
     }

     .social-links {
         align-items: center;
     }

     .quote-text {
         font-size: 1.1rem;
     }

     .footer-bottom-content {
         flex-direction: column;
         text-align: center;
         gap: 15px;
     }

     .legal-links {
         justify-content: center;
     }

     .quick-contact {
         align-items: center;
     }

     .services-list li {
         align-items: center;
     }

     .section-spacing {
         height: 80px;
     }
 }

 /* Media Queries Responsive */
 @media (max-width: 1024px) {


     .contenitore-progetti {
         padding: 0 30px;
     }

     .container-griglia-progetti {
         padding: 0 15px;
     }

     .griglia-progetti {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }

     .carta-progetto-portfolio {
         height: 420px;
     }

     .carta-progetto-portfolio .immagine-progetto {
         height: 260px;
     }

     .intestazione-progetti h2 {
         font-size: 2.8rem;
     }

     .contenitore-skills {
         padding: 0 30px;
     }

     .griglia-skills {
         gap: 30px;
     }

     .intestazione-skills h2 {
         font-size: 2.8rem;
     }

     .nav {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: 1000;
     }

     /* BARRA DI NAVIGAZIONE */
     .barra-navigazione {
         width: 90%;
         padding: 12px 25px;
     }


     .logo-sinistra {
         font-size: 30px;
     }

     .barra-navigazione.menu-aperto {
         width: 800px
     }

     .pulsante-menu.espanso {
         width: 500px;
     }

     .contenuto-su-di-me {
         gap: 40px;
         padding: 0 30px;
     }

     .testo-presentazione {
         padding-right: 20px;
     }

     .testo-presentazione h2 {
         font-size: 2.8rem;
     }
 }

 @media (max-width: 480px) {

     /* BARRA DI NAVIGAZIONE  */
     .cursor {
         display: none !important;
     }

     /* ASSICURATI CHE SIANO NASCOSTI ANCHE SU SCHERMI MOLTO PICCOLI */
     .floating-image {
         display: none !important;
     }

     .cursor.hover {
         display: none !important;
     }

     .sezione-loop {
         display: none !important;
     }

     .barra-navigazione {
         padding: 12px 20px;
         width: 96%;
         /* La navbar è già fissa dall'impostazione base */
     }

     .logo-sinistra {
         font-size: 20px !important;
     }

     .hamburger-menu {
         padding: 10px;
     }

     .hamburger-line {
         width: 22px;
         height: 2px;
         margin: 3px 0;
     }

     .sezione-su-di-me {
         padding: 100px 0 60px 0;

     }

     .contenuto-su-di-me {
         gap: 35px;
         padding: 0 15px;
     }

     .testo-presentazione h2 {
         font-size: 1.8rem;
     }

     .contenitore-immagine-profilo {
         max-width: 250px;
     }

     /* SKILLS */

     .categoria-skills {
         padding: 20px;
     }

     .skill-card {
         flex-direction: column;
         text-align: center;
         gap: 10px;
     }

     .skill-info {
         width: 100%;
     }

     .certificazioni {
         padding: 30px 20px;
     }

     /* PROGETTI */

     .contenitore-progetti {
         padding: 0 15px;
     }

     .container-griglia-progetti {
         padding: 0 5px;
     }

     .griglia-progetti {
         grid-template-columns: 1fr !important;
         gap: 15px;
     }

     .carta-progetto-portfolio {
         height: 360px;
     }

     .carta-progetto-portfolio .immagine-progetto {
         height: 200px;
     }

     .carta-progetto-portfolio .info-progetto {
         padding: 15px;
     }

     .filtri-progetti {
         gap: 8px;
     }

     .filtro {
         padding: 8px 15px;
         font-size: 0.75rem;
     }

     .intestazione-progetti h2 {
         font-size: 1.8rem;
     }

     /* CHI SONO DAVVERO */

     .container {
         padding: 0 1rem;
     }

     .contenitore-immagine-personale {
         max-width: 250px;
         height: 350px;
     }

     .curiosita-grid {
         grid-template-columns: 1fr;
     }

     .sezioni-personali {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .sezione-tema {
         padding: 20px;
     }

     .curiosita-section {
         padding: 30px 20px;
     }

     /* FOOTER */

     .container {
         padding: 0 1rem;
     }

     .quote-content {
         padding: 25px 20px;
     }

     .quote-text {
         font-size: 1rem;
     }

     .social-link {
         padding: 8px 12px;
     }

     .legal-links {
         flex-direction: column;
         gap: 10px;
     }
 }