/* ============================================
   MOBILE.CSS - Ottimizzazione responsive per tutti gli schermi mobile
   ============================================ */
/* ========== ANIMAZIONI KEYFRAMES ========== */
@keyframes button-shine {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  100% {
    transform: translateX(150%) skewX(-20deg);
  }
}


/* ========== BASE E CONTAINER (Tutti i mobile) ========== */
@media screen and (max-width: 820px) {

  html {
    position: static !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
  }

  body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    font-size: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }
  
  /* Rimuovi spostamenti del body: manteniamo l'header veramente fixed */
  body.home-page,
  body.servizi-page,
  body.contatti-page {
    transform: none !important;
  }

  /* Rafforza header fixed su mobile e in cima a tutti */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    backdrop-filter: saturate(120%) blur(2px);
  }

  /* Compensa lo spazio dell'header sul contenuto principale */
  .main-container,
  .home,
  .main-container-sezione2 {
    padding-top: 100px !important; /* allinea subito sotto l'header fisso */
  }
  
  /* FORZA: Il body termina subito dopo il footer */
  body::after {
    content: none !important;
    display: none !important;
  }

  /* Pulsante telefono mobile-only sulla pagina contatti */
  .call-mobile-button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #18202d !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    border-radius: 40px !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
    font-weight: 600 !important;
    width: fit-content !important;
    margin: 6px auto 14px auto !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .call-mobile-button i {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    color: #ffffff !important;
  }
  .call-mobile-button:active {
    transform: scale(0.96) !important;
  }
  /* Effetto luce anche sul pulsante telefono */
  .call-mobile-button::before {
    content: '' !important;
    position: absolute !important;
    top: -20% !important;
    bottom: -20% !important;
    left: -50% !important;
    width: 50% !important;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent) !important;
    transform: translateX(-150%) skewX(-20deg) !important;
    animation: button-shine 3.2s linear infinite !important;
    pointer-events: none !important;
    will-change: transform !important;
  }
  /* Animazione colore cornetta esistente nella pagina contatti */
  @keyframes phone-color-shift {
    0% { color: #003D82; }
    50% { color: #00A3E0; }
    100% { color: #003D82; }
  }
  .contatti-page .phone-anim {
    animation: phone-color-shift 3s ease-in-out infinite !important;
    transition: color 0.3s ease !important;
  }
  .contatti-page .phone-link {
    color: #18202d !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }
  .contatti-page .phone-link:active { opacity: 0.7 !important; }
  /* Nascondi su desktop */
  @media screen and (min-width: 821px) {
    .call-mobile-button { display: none !important; }
  }

  main {
    flex: 1 0 auto !important;
    min-height: auto !important;
    overflow: visible !important; /* niente scroll dentro main */
    width: 100% !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
    position: relative !important;
  }

  .main-container {
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* ELIMINA TUTTI I CONTENITORI E FORZA LAYOUT A COLONNA */
  .main-container, 
  .home, 
  .main-container-sezione2,
  .main-container-sezione3,
  .main-container-sezione4,
  .main-container-sezione5,
  section,
  .hero-section,
  .sezione-1,
  .sezione-2,
  .sezione-3,
  .sezione-4,
  .sezione-5 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    position: static !important; /* Cambiato da relative a static */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    text-align: center !important;
  }

  .home {
    padding-top: 0 !important; /* reset padding on mobile home so hero can move up */
  }
  
  /* Nuovo/Usato: lascia spazio sotto l'header fisso per non coprire il titolo */
  .main-container-sezione2 {
    padding-top: 100px !important; /* copre header (70-85px) + piccolo margine */
  }
  
  .hero-section {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Hero section come flex container per controllo ordine elementi */
  body.servizi-page .hero-section {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* FORZA TUTTI GLI ELEMENTI HERO AD ESSERE LIBERI DAI CONTENITORI */
  .hero-section * {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  
  /* Ordine elementi nella pagina Servizi: H1 prima, tagline dopo - MASSIMA PRIORITÀ */
  @media screen and (max-width: 820px) {
    body.servizi-page .hero-section {
      display: flex !important;
      flex-direction: column !important;
    }
    
    body.servizi-page .hero-section .hero-tagline,
    body.servizi-page .hero-tagline {
      order: 2 !important;
    }
    
    body.servizi-page .hero-section .h1-hero,
    body.servizi-page .h1-hero {
      order: 1 !important;
    }
  }

  /* ========== HEADER RESPONSIVE CON HAMBURGER ========== */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 70px !important;
    padding: 15px 20px !important;
    background: rgba(16, 23, 34, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Nessuna compensazione: l'header resta a top fisso su tutte le pagine */
  body.home-page .header,
  body.servizi-page .header,
  body.contatti-page .header {
    transform: none !important;
  }

  .sfondo-header {
    display: none !important;
  }

  /* Logo responsive - a sinistra */
  .logo {
    position: relative !important;
    width: clamp(90px, 25vw, 120px) !important;
    height: clamp(30px, 8vw, 40px) !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1001 !important;
  }

  .header-logo-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* ===============================================
     NUOVO MENU HAMBURGER - Design Moderno
     =============================================== */
  
  /* Nascondi menu desktop su mobile */
  .menu {
    display: none !important;
  }
  
  /* Bottone Hamburger - Stile Minimalista */
  .mobile-menu-btn {
    position: fixed;
    top: 17px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1a2332 0%, #2d3e50 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .mobile-menu-btn:active {
    transform: scale(0.92);
  }
  
  .mobile-menu-btn .bar {
    width: 26px;
    height: 2.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Animazione X quando aperto */
  .mobile-menu-btn.open .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }
  
  .mobile-menu-btn.open .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
  }
  
  .mobile-menu-btn.open .bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }
  
  /* Panel Menu - Slide da sinistra */
  .mobile-menu-panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: linear-gradient(180deg, #0f1620 0%, #1a2332 50%, #243447 100%);
    z-index: 10001;
    padding: 100px 25px 40px 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }
  
  .mobile-menu-panel.open {
    left: 0;
  }
  
  /* Overlay scuro */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  
  .mobile-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Link del menu */
  .mobile-menu-panel a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    padding: 16px 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
    transition: all 0.25s ease;
  }
  
  .mobile-menu-panel a:active {
    background: rgba(130, 173, 225, 0.2);
    border-left-color: #82ADE1;
    transform: translateX(5px);
  }
  
  /* Link "Chi Siamo" nascosto ma presente nel DOM */
  .mobile-menu-panel a[href*="chi-siamo"] {
    display: none;
  }
  
  /* Blocca scroll body quando menu aperto */
  body.menu-open {
    overflow: hidden;
  }

  /* ========== HERO SECTION RESPONSIVE ========== */
  .hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 0 !important; /* RIMOSSO PADDING per permettere al titolo di salire */
    margin-top: -50px !important; /* Alza tutta la sezione */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    z-index: 10 !important;
  }

  /* TUTTI GLI ELEMENTI DI TESTO IN COLONNA */
  h1, h2, h3, h4, h5, h6 {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  margin-bottom: 60px !important;
  }

  /* Se vuoi anche più spazio tra le sezioni, puoi aggiungere: */
  section, .sezione-1, .sezione-2, .sezione-3, .sezione-4, .sezione-5 {
  margin-bottom: 60px !important;
  }

  /* OVERRIDE SPECIFICO PER MAIN E HOME */
  main.home,
  .main-container .home,
  main,
  section,
  .hero-section,
  .sezione-1,
  .sezione-2,
  .sezione-3,
  .sezione-4,
  .sezione-5 {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }

  /* Hero titoli responsive - MASSIMA PRIORITÀ (Home & Servizi uniformati) */
  .h1-hero,
  h1.h1-hero,
  .hero-section .h1-hero,
  body.home-page .h1-hero,
  body.servizi-page .h1-hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 28px !important; /* Ridotto da 32px a 28px per mantenere 2 righe */
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 0 0 0 0 !important; /* Nessun offset extra: già compensato dal padding-top del contenitore */
    padding: 3px !important;
    left: auto !important;
    right: auto !important;
    margin-top: 10px !important; /* leggero respiro sotto l'header fisso */
    bottom: auto !important;
    transform: none !important;
    word-wrap: break-word !important;
    display: block !important;
    color: #18202d !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase !important; /* tutto maiuscolo su mobile */
  }
  
  .hero-line-1, 
  .h1-hero .hero-line-1 {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    font-size: 28px !important; /* Ridotto da 32px a 28px */
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 2px 0 0 0 !important; /* margine minimo tra le righe */
    padding: 0 !important;
    color: #18202d !important;
    opacity: 1 !important;
    visibility: visible !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    text-transform: uppercase !important;
  }

  .hero-line-2,
  .hero-line-3,
  .h1-hero .hero-line-2,
  .h1-hero .hero-line-3 {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    font-size: 28px !important; /* Ridotto da 32px a 28px */
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    color: #18202d !important; /* BLU SCURO per "lavatrici" */
    opacity: 1 !important;
    visibility: visible !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    text-transform: uppercase !important;
  }

  /* Tagline responsive - CELESTE, sotto l'H1 (Home & Servizi uniformati) */
  .hero-tagline,
  p.hero-tagline,
  .hero-section .hero-tagline,
  .home .hero-tagline,
  body.home-page .hero-tagline,
  body.servizi-page .hero-tagline {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(16px, 4.5vw, 20px) !important; /* Aumentato per migliore leggibilità */
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 5px auto 20px auto !important; /* 5px dall'H1 */
    padding: 0 5% !important; /* Aumentato padding laterale */
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    color: #82ADE1 !important; /* CELESTE */
    font-weight: 600 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    white-space: normal !important; /* Permette il wrap del testo */
    overflow: visible !important; /* Mostra tutto il testo */
    text-overflow: clip !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .tagline-bold,
  .hero-tagline .tagline-bold {
    font-weight: 700 !important;
    color: #18202d !important; /* BLU SCURO per "entro 24h" */
    white-space: normal !important;
    font-size: inherit !important; /* Eredita la dimensione dalla tagline */
  }

  /* Pulsante mobile-only nuovo - sotto la tagline */
  .home .hero-cta-mobile {
    display: block !important;
    background-color: #18202d !important;
  position: relative !important;
  overflow: hidden !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
    font-size: clamp(13px, 3.2vw, 15px) !important;
    font-weight: 600 !important;
    margin-top: 25px !important; /* Riportato alla posizione precedente */
    margin-bottom: 10px !important; /* Ridotto a 10px per avvicinare l'H2 sotto */
    width: 75% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
  }

  .home .hero-cta-mobile:hover {
    background-color: #0d1116 !important;
    transform: translateY(-2px) !important;
  }

  /* Pulsante "Scopri le lavatrici disponibili" sotto le icone - visibile solo su mobile */
  .cta-lavatrici-mobile {
    display: block !important;
    background-color: transparent !important;
    color: #18202d !important;
    text-decoration: none !important;
    border: 2px solid #18202d !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
    font-size: clamp(13px, 3.2vw, 15px) !important;
    font-weight: 600 !important;
    margin: 40px auto 20px auto !important; /* abbassato di 10px base */
    width: 75% !important;
    text-align: center !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease !important;
  }

  /* Offset aggiuntivo SOLO nella home per abbassare di altri 10px */
  .home .cta-lavatrici-mobile {
    margin-top: 40px !important; /* ALZATO di altri 5px (da 45px a 40px) */
  }

  .cta-lavatrici-mobile:hover {
    background-color: #18202d !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
  }

  /* Effetto luce - CTA mobile (tutte le pagine) */
  .hero-cta-mobile {
    position: relative !important;
    overflow: hidden !important;
  }
  .hero-cta-mobile::before {
    content: '' !important;
    position: absolute !important;
    top: -20% !important;
    bottom: -20% !important;
    left: -50% !important;
    width: 50% !important;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent) !important;
    transform: translateX(-150%) skewX(-20deg) !important;
    animation: button-shine 3s linear infinite !important;
    pointer-events: none !important;
    will-change: transform !important;
  }

  /* Titolo sezione-1 nella hero-section (mobile only) */
  .home .hero-section .h2-sezione-1 {
    display: block !important; /* Forza la visualizzazione */
    margin-top: -120px !important; /* ALZATO di altri 10px (da -110px a -120px) */
    margin-left: 5px !important; /* SPOSTATO di altri 2px a destra (da 3px a 5px) */
    margin-bottom: 20px !important;
    order: 1 !important;
  }
  
  /* Sezione-1 con spazio sopra per l'H2 che viene dalla hero */
  .home .sezione-1 {
    margin-top: -90px !important; /* Compensazione per l'H2 sopra */
    padding-top: 150px !important; /* Aumentato spazio per permettere al titolo di salire più in alto */
  }
  
  /* Nascondi il titolo nella sezione-1 su mobile (viene mostrato nella hero) */
  .home .sezione-1 .h2-sezione-1 {
    display: none !important;
  }

  /* Testo sezione-1 più grande e compatto su mobile */
  .home .testo-sezione-1 {
    font-size: clamp(15px, 3.6vw, 18px) !important;
    line-height: 1.5 !important;
    width: 95% !important;
    max-width: 95% !important;
    margin: -60px auto 20px auto !important; /* Alzato di 10px (era -50px, ora -60px) */
    padding: 0 2.5% !important;
    text-align: center !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }

  /* Testo sezione-5 organizzato come sezione-1 */
  .home .testo-sezione-5,
  .home .testo-sezione-5-right {
    font-size: clamp(11px, 3.2vw, 18px) !important;
    line-height: 1.4 !important;
    width: 95% !important;
    max-width: 95% !important;
    margin: -8px auto 20px auto !important; /* base: stessa distanza del testo sezione-1 dal titolo */
    padding: 0 2.5% !important;
    text-align: center !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }

  /* Sezione 5: unisci visivamente i due paragrafi (nessuno spazio tra loro) */
  .home .sezione-5 .testo-sezione-5 {
    margin-bottom: 0 !important; /* elimina spazio sotto il primo blocco */
  }
  .home .sezione-5 .testo-sezione-5-right {
    margin-top: 0 !important;  /* elimina spazio sopra il secondo blocco */
  }

  /* CTA Hero responsive - PULSANTE BLU (SINISTRA) - NASCOSTO SU MOBILE */
  .home .hero-cta,
  .home a.hero-cta {
    display: none !important;
  }

  /* CTA Hero responsive - PULSANTE DESTRO (TESTO SEMPLICE) - NASCOSTO SU MOBILE */
  .home .hero-cta-text-only,
  .home a.hero-cta-text-only {
    display: none !important;
  }

  /* Rimuovi gli stili del button interno e forza centratura */
  .home .hero-cta-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  .home .hero-cta-text {
    color: inherit !important;
    font-size: inherit !important;
    display: inline !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* NOTA: Questi stili generici sono commentati per evitare interferenze con i pulsanti HOME
  .hero-cta,
  a.hero-cta {
    color: #ffffff !important;
  }

  .hero-cta-text-only,
  a.hero-cta-text-only {
    color: #18202d !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 2px solid #82ADE1 !important;
    border-radius: 6px !important;
  }
  */

  /* Stili generici per hero-cta-button (non home) */
  .hero-cta-button:not(.home .hero-cta-button) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 3px !important;
    background: #82ADE1 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  
  .hero-cta-text:not(.home .hero-cta-text) {
    position: relative !important;
    display: block !important;
    color: #ffffff !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    font-weight: 600 !important;
  }

  /* ========== ELEMENTI GRAFICI E DECORATIVI ========== */
  #furgoneSezione1,
  .furgone-animato,
  .rettangolo-sezione-1,
  .rettangolo-sezione-2,
  .rettangolo-sezione-3,
  .rettangolo-sezione-4,
  .rettangolo-sezione-5,
  .rettangolo-1,
  .rettangolo-2,
  .rettangolo-3,
  .foto-header,
  .pallino-1,
  .pallino-2,
  .pallino-3,
  .pallino-4 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Immagini e icone responsive */
  img, svg {
    max-width: 100% !important;
    height: auto !important;
  }
  /* ========== SEZIONI DI TESTO RESPONSIVE ========== */
  .h2-sezione-1,
  .h2-sezione-2,
  .h2-sezione-3,
  .titolo-sezione-4,
  .titolo-sezione-5,
  .titolo-sezione-1,
  .titolo-sezione-2,
  .titolo-sezione-3,
  h2 {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 25px 0 2px 0 !important;
    padding: 0 15px !important;
    left: 0 !important;
    top: auto !important;
    transform: none !important;
    color: #82ADE1 !important; /* Celeste brand */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    word-wrap: break-word !important;
  }

  .testo-sezione-1,
  .testo-sezione-2,
  .testo-sezione-3,
  .testo-sezione-4,
  .testo-sezione-5,
  .testo-sezione-5-right,
  .paragrafo-sezione-3,
  p {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 2px 0 20px 0 !important;
    padding: 0 15px !important;
    left: 0 !important;
    top: auto !important;
    transform: none !important;
    color: #18202d !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Regole specifiche per sezione-5 - abbassa titolo "Una storia di competenza" */
  .sezione-5 .h2-sezione-5 {
    margin-top: 69px !important; /* Alzato di 10px (da 79px a 69px) */
  }
  
  .sezione-5 .testo-sezione-5 {
    margin-top: 26px !important; /* Alzato di 6px (da 32px a 26px) */
  }

  /* Versione unica del testo sezione 4 (servizi) solo su mobile */
  .sezione-4 .testo-sezione-4 .testo-desktop { display: none !important; }
  .sezione-4 .testo-sezione-4 .testo-mobile-unico { 
    display: block !important; /* block invece di inline per applicare margin */
    margin-top: -25px !important; /* era -30px -> abbassato di 5px */
  }

  /* Nascondi i testi desktop della sezione-5 su mobile - usa slider cards invece */
  .sezione-5 .testo-sezione-5,
  .sezione-5 .testo-sezione-5-right,
  .sezione-5 .rettangolo-sezione-5 {
    display: none !important;
  }

  /* Alza l'intero paragrafo sezione-4 (incluso <strong>) su mobile */
  .sezione-4 .testo-sezione-4 {
    margin-top: -3px !important; /* alza di 5px rispetto al default 2px (quindi -3px) */
  }

  /* Colore blu scuro per l'intero testo unificato in mobile */
  .sezione-4 .testo-sezione-4 .testo-mobile-unico,
  .sezione-4 .testo-sezione-4 .testo-mobile-unico *,
  .sezione-4 .testo-sezione-4 .testo-mobile-unico span {
    color: #18202d !important; /* blu scuro brand su tutto il blocco */
  }

  /* Aumenta spazio sotto la sezione-4 (video) su mobile per distanziare dal footer */
  .sezione-4 {
    margin-bottom: 20px !important; /* era 10px -> aumentato di altri 10px */
  }

  /* ========== CAROSELLI E GALLERIE ========== */
  .carosello-foto1,
  .carosello-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  .foto-carosello {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
  }

  /* ========== CARD E CONTENITORI ========== */
  .card-container,
  .service-card,
  .product-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  /* ========== NUOVO/USATO: CARD PRODOTTI RIDOTTE E QUADRATE (SOLO MOBILE) ========== */
  .products-grid {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px 20px 12px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; /* colonne fluide */
    gap: 14px !important; /* spazio tra le card ridotto */
    z-index: 5 !important;
  }

  /* Card compatte e quadrate */
  .product-card {
    aspect-ratio: 1 / 1 !important; /* rende la card quadrata */
    padding: 0 !important; /* rimuove padding interno per massimizzare spazio contenuto */
    border-radius: 14px !important; /* leggermente più piccola rispetto ai 20px desktop */
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important; /* ombra più delicata */
    overflow: hidden !important;
  }

  /* Evita effetto scale sul hover (inutile su mobile) */
  .product-card:hover:not(.expanded) {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  }

  /* Immagine riempie la card */
  .product-image {
    position: absolute !important;
    inset: 0 !important; /* top/right/bottom/left:0 */
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important; /* già gestito dal parent */
    background: #ffffff !important;
  }

  .product-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* riempie, può tagliare leggermente ma mantiene appeal */
    object-position: center !important;
    background: #ffffff !important;
  }

  /* Overlay informativo compatto dentro la card */
  .hero-tagline {
    font-size: clamp(16px, 4vw, 22px) !important;
    font-weight: 400 !important;
    color: #18202d !important;
    margin: 50px 0 0 0 !important; /* Abbassata di 50px */
    padding: 0 !important;
    text-align: center !important;
    opacity: 1 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 10 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    height: auto !important;
    visibility: visible !important;
  }

  /* Nasconde dettagli espansi nelle card compatte (si aprono comunque al click) */
  .product-details-expanded {
    display: none !important;
  }

  /* Stato espanso su mobile: fullscreen adattato */
  .product-card.expanded {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95vw !important;
    max-width: 600px !important;
    height: 90vh !important;
    max-height: 90vh !important;
    aspect-ratio: auto !important; /* lascia libertà ai contenuti */
    overflow-y: auto !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
    padding: 0 !important;
  }

  .product-card.expanded .product-image {
    position: relative !important;
    width: 100% !important;
    height: 40vh !important; /* area immagine ingrandita */
  }

  .product-card.expanded .product-info {
    position: relative !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 16px 18px 10px 18px !important;
  }

  .product-card.expanded .product-details-expanded {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    padding: 0 18px 30px 18px !important;
    overflow: visible !important;
  }

  .product-gallery {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 colonne su mobile dentro expanded */
    gap: 10px !important;
  }

  .product-gallery img {
    height: 120px !important;
  }

  /* X chiusura card: nascosto nelle card compatte, visibile solo quando espanse */
  .product-close-btn {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .product-card.expanded .product-close-btn {
    display: block !important; /* forza la visualizzazione nello stato espanso */
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important; /* fixed per rimanere sempre visibile in alto a destra */
    width: 30px !important;
    height: 30px !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10001 !important; /* sopra tutto il contenuto */
    background: transparent !important; /* nessuno sfondo */
    border: none !important;
    border-radius: 0 !important; /* nessun cerchio */
    color: #82ADE1 !important; /* celeste brand */
    box-shadow: none !important; /* nessuna ombra */
    cursor: pointer !important;
  }

  /* Overlay e blocco scroll quando è aperta la modale di contatto */
  body.contact-modal-open {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none !important;
    overscroll-behavior: contain !important; /* evita rimbalzi sullo scroll mobile */
    pointer-events: none !important; /* BLOCCA TUTTO il body */
  }

  .hero-cta-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 68px auto 0 auto !important; /* Abbassato di 50px */
    padding: 18px 0 !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #003D82 !important;
    border-radius: 40px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    text-align: center !important;
    text-decoration: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 10 !important;
    transition: background 0.2s, color 0.2s !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    will-change: background, color !important;
  }

  .lightbox-overlay.active {
    display: flex !important;
  }

  .lightbox-content {
    position: relative !important;
    max-width: 90vw !important;
    max-height: 75vh !important;
    background: transparent !important; /* nessun contenitore visibile */
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    touch-action: manipulation !important; /* abilita pinch-zoom e pan */
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important; /* spazio tra immagine e indicatori */
  }

  /* Wrapper immagine per consentire zoom e pan */
  .lightbox-img-wrapper {
    width: 100% !important;
    max-height: 62vh !important;
    overflow: auto !important; /* abilita scroll se immagine zoomata */
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .lightbox-img {
    width: 100% !important;
    height: auto !important;
    max-height: 62vh !important;
    object-fit: contain !important;
    border-radius: 18px !important; /* angoli arrotondati sulla foto stessa */
    background: transparent !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important; /* ombra sulla foto */
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important; /* disabilita gestione nativa per controllare via JS */
    transition: none !important; /* rimuovi transizione per zoom più fluido */
    transform-origin: center center !important;
  }

  /* Indicatori pallini sotto la foto */
  .lightbox-indicators {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 0 !important;
    flex-shrink: 0 !important;
    z-index: 30002 !important;
  }

  .lightbox-indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(130, 173, 225, 0.4) !important; /* celeste trasparente */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .lightbox-indicator.active {
    width: 10px !important;
    height: 10px !important;
    background: #82ADE1 !important; /* celeste brand */
    box-shadow: 0 0 8px rgba(130, 173, 225, 0.6) !important;
  }

  /* Pulsanti lightbox: solo X chiusura visibile */
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    position: absolute !important;
    background: transparent !important; /* nessuno sfondo */
    border: none !important;
    color: #82ADE1 !important; /* celeste brand */
    width: 36px !important;
    height: 36px !important;
    border-radius: 0 !important; /* nessun cerchio */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    box-shadow: none !important; /* nessuna ombra */
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    z-index: 30001 !important;
  }

  .lightbox-close:hover,
  .lightbox-prev:hover,
  .lightbox-next:hover {
    opacity: 0.7 !important;
    transform: scale(1.1) !important;
  }

  /* X chiusura: in alto a destra del contenitore bianco */
  .lightbox-close { 
    top: 10px !important; 
    right: 10px !important;
  }

  /* Frecce prev/next: nascoste (usiamo swipe e pallini) */
  .lightbox-prev,
  .lightbox-next { 
    display: none !important;
  }

  .lightbox-prev:hover {
    transform: scale(1.05) !important;
  }

  .lightbox-next:hover {
    transform: scale(1.05) !important;
  }

  /* Migliora scroll interno per contenuti lunghi in expanded */
  .product-description-full p,
  .product-description-full li {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.4 !important;
  }

  .product-contact-btn {
    padding: 10px 26px !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    border-radius: 24px !important;
  }

  /* Evita overflow orizzontale casuale */
  .product-card *,
  .products-grid * {
    max-width: 100% !important;
  }

  /* ========== BOTTONI E ELEMENTI INTERATTIVI ========== */
  .hero-cta-button {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 48px !important;
    padding: clamp(10px, 2.5vw, 15px) clamp(20px, 5vw, 30px) !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    margin: clamp(8px, 2vw, 12px) auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-cta-text {
    font-size: clamp(15px, 4vw, 18px) !important;
  }

  /* ========== FORZA VISIBILITA' DEGLI ELEMENTI CHIAVE ========== */
  
  /* NASCONDI pulsanti CTA desktop su mobile per tutte le pagine */
  .hero-cta,
  .hero-cta-text-only {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* ========== NASCONDI FURGONE SU MOBILE ========== */
  #furgoneSezione1,
  .furgone-animato {
    display: none !important;
  }

  /* ========== TITOLI BEN VISIBILI ========== */

  /* Mantieni la foto sotto i testi */
  .foto-header {
    position: relative !important;
    z-index: 1 !important;
  }

  /* ========== CONTENITORI BLOCCANTI: FLATTEN O RIMUOVI ========== */
  .rettangolo-sezione-1,
  .rettangolo-sezione-5 {
    display: none !important;
  }

  /* Rendi i wrapper fluidi su mobile */
  [class*="rettangolo"],
  [class*="container"],
  [class*="wrapper"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
  }

  /* ========== ICONE E GALLERIE ========== */
  .home .icone-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 0 !important;
    margin-left: -3px !important; /* SPOSTATO a sinistra di 3px */
    margin: 0 !important;
  }

  .home .sezione-4 .icona-wrapper {
    display: flex !important;
    flex-direction: column !important; /* Icona sopra il testo */
    align-items: center !important; /* Centra orizzontalmente */
    justify-content: flex-start !important;
    gap: 6px !important; /* Spazio verticale tra icona e testo */
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important; /* Larghezza naturale */
    text-align: center !important; /* Centra eventuali elementi inline */
  }

  /* Nascondi le icone desktop su mobile */
  .home .icona-base,
  .home .icona-hover {
    display: none !important;
  }

  /* Mostra le icone mobile */
  .home .icona-mobile {
    display: block !important;
    width: clamp(20px, 5vw, 35px) !important;
    height: auto !important;
  }

  /* Icona smartphone più grande */
  .home .sezione-4 .icona-wrapper:nth-child(3) .icona-mobile {
    /* +0.5px rispetto alla dimensione base */
    width: calc(clamp(20px, 5vw, 35px) + 0.5px) !important;
  }

  /* Nascondi i testi delle altre icone su mobile */
  
  /* Mostra il testo di tutte e tre le icone */
  .home .sezione-4 .icona-wrapper:nth-child(1) .icona-testo,
  .home .sezione-4 .icona-wrapper:nth-child(2) .icona-testo,
  .home .sezione-4 .icona-wrapper:nth-child(3) .icona-testo {
    display: block !important;
    font-size: clamp(14px, 3.5vw, 18px) !important;
    text-align: center !important; /* Centra il testo sotto l'icona */
    margin: 0 !important;
  }

  /* Allinea il testo del terzo wrapper con il secondo */
  .home .sezione-4 .icona-wrapper:nth-child(3) {
    padding-left: 0 !important; /* Rimuove offset a sinistra */
  }

  /* Testo della terza icona su una riga */
  .home .sezione-4 .icona-wrapper:nth-child(3) .icona-testo {
    white-space: nowrap !important;
  }

  /* CTA dentro icona-wrapper sezione 4 (mobile): adattamento layout verticale */
  .home .sezione-4 .icona-wrapper .sezione4-cta {
    position: static !important; /* rimuove absolute del desktop */
    left: auto !important;
    top: auto !important;
    margin: 44px auto 0 auto !important; /* Abbassato di altri 20px (da 24px a 44px) */
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important; /* come hero-cta-mobile */
    height: auto !important;
    display: flex !important; /* mantiene flex per il bottone interno */
    transform: none !important;
  }
  .home .sezione-4 .icona-wrapper .sezione4-cta .hero-cta-button {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 50px !important;
    background: var(--sima-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 28px !important; /* come hero-cta-mobile */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; /* come hero-cta-mobile */
  }
  .home .sezione-4 .icona-wrapper .sezione4-cta .hero-cta-text {
    font-size: clamp(13px, 3.2vw, 15px) !important; /* come hero-cta-mobile */
    font-weight: 600 !important;
    color: #ffffff !important;
  }
  .home .sezione-4 .icona-wrapper .sezione4-cta:hover .hero-cta-button {
    background: var(--sima-hover) !important;
    transform: translateY(-2px) !important;
  }

  /* Effetto luce - CTA "Le nostre lavatrici" (mobile) */
  .mobile-only-cta .hero-cta-button::before {
    content: '' !important;
    position: absolute !important;
    top: -20% !important;
    bottom: -20% !important;
    left: -50% !important;
    width: 50% !important;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent) !important;
    transform: translateX(-150%) skewX(-20deg) !important;
    animation: button-shine 3s linear infinite !important;
    animation-delay: 0.5s !important;
    pointer-events: none !important;
    will-change: transform !important;
  }

  /* Nascondi il terzo wrapper su mobile - ora mostriamo tutti e 3 */

  .home .icona-testo {
    position: static !important;
    margin-top: 0 !important;
    font-size: clamp(11px, 2.8vw, 14px) !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  /* ========== TIPOGRAFIA FLUIDA ========== */
  .h2-sezione-1,
  .h2-sezione-4 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 0 clamp(8px, 2.5vw, 16px) !important;
    margin: clamp(12px, 3.5vw, 20px) 0 !important;
    margin-left: -3px !important; /* SPOSTATO a sinistra di 3px */
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* Regola specifica per h2-sezione-1 nella pagina servizi - rimuovi bold e abbassa di 30px */
  .servizi-page .sezione-1 .h2-sezione-1 {
    font-weight: 300 !important; /* Peso normale come h2-sezione-4 */
    transform: translateY(30px) !important; /* Abbassa di 30px */
  }

  .h2-sezione-5 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: translateY(-10px) !important; /* Sposta su di 10px */
    width: 100% !important;
    padding: 0 clamp(8px, 2.5vw, 16px) !important;
    margin-top: 59px !important; /* Alzato di 20px rispetto agli 79px originali */
    margin-bottom: 0 !important;
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* ========== STORY SLIDER MOBILE (Sezione 5) ========== */
  .story-slider-mobile {
    display: block !important;
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 clamp(12px, 3vw, 20px) !important;
  }

  .story-cards-container {
    position: relative !important;
    width: 92% !important; /* Più larga */
    max-width: 380px !important; /* Dimensione massima aumentata */
    aspect-ratio: 3 / 2.5 !important; /* Più alta per contenere tutto il testo */
    overflow: hidden !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto !important; /* Centra la card */
  }

  .story-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: clamp(18px, 4.5vw, 26px) !important; /* Padding ridotto */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    overflow-y: hidden !important; /* Nasconde scroll */
  }

  .story-card.active {
    opacity: 1 !important;
    transform: translateX(0) !important;
    z-index: 1 !important;
  }

  .story-card-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(12px, 3.5vw, 15px) !important; /* Ridotto ulteriormente */
    line-height: 1.5 !important;
    color: var(--sima-text-main) !important;
    text-align: left !important;
    margin: 0 !important;
  }

  /* Riduce lo spazio del <br> nella prima card */
  .story-card-text br {
    display: block !important;
    content: "" !important;
    margin-bottom: -8px !important; /* Riduce lo spazio tra i paragrafi */
  }

  /* ==================== SERVIZI: riallinea contenuti su mobile ==================== */
  @media screen and (max-width: 820px) {
    /* Centra i blocchi principali (senza toccare le card) */
    body.servizi-page .h1-hero,
    body.servizi-page .hero-tagline,
    body.servizi-page .h2-hero-servizi,
    body.servizi-page .sezione-1,
    body.servizi-page .sezione-4,
    body.servizi-page .sezione-5 {
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Rimuovi offset residuo sulla prima riga dell'H1 */
    body.servizi-page .h1-hero .hero-line-1 {
      left: 0 !important;
    }

    /* Garantisci padding simmetrico ai paragrafi principali */
    body.servizi-page .testo-sezione-1,
    body.servizi-page .testo-sezione-4,
    body.servizi-page .hero-tagline {
      padding-left: 4.5vw !important;
      padding-right: 4.5vw !important;
    }

    /* Sposta leggermente a sinistra titoli e testi (escluso slider/card) */
    body.servizi-page .h1-hero,
    body.servizi-page .hero-tagline,
    body.servizi-page .h2-hero-servizi,
    body.servizi-page .hero-cta-mobile,
    body.servizi-page .hero-cta,
    body.servizi-page .hero-cta-text-only,
    body.servizi-page .h2-sezione-4,
    body.servizi-page .testo-sezione-4 {
      transform: translateX(-7px) !important;
    }
    
    /* Alza il pulsante "Richiedi assistenza" solo nella pagina servizi */
    body.servizi-page .hero-cta-mobile {
      margin-top: -10px !important; /* ALZATO di 10px solo nella pagina servizi */
    }
  }

  /* ==================== HOME: sposta i titoli a sinistra su mobile ==================== */
  @media screen and (max-width: 820px) {
    body.home-page .h1-hero,
    body.home-page .h2-sezione-1,
    body.home-page .h2-sezione-4,
    body.home-page .h2-sezione-5 {
      transform: translateX(-7px) !important;
    }
    /* Sezione 5 titolo ("Una storia di competenza..."): spostalo 2px più a destra rispetto alla regola generale */
    body.home-page .sezione-5 .h2-sezione-5 {
      transform: translateX(-5px) !important; /* -7px -> -5px (2px più a destra) */
      margin-top: 5px !important; /* ABBASSATO di 5px (da 0px a 5px) */
    }
  }

  .story-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
    position: relative !important;
    z-index: 102 !important; /* Dots sopra a tutto */
  }

  .story-dot {
    width: 12px !important; /* Aumentato da 10px */
    height: 12px !important; /* Aumentato da 10px */
    border-radius: 50% !important;
    background: #D9D9D9 !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    display: block !important; /* Forza la visualizzazione */
    opacity: 1 !important; /* Assicura che sia visibile */
  }

  .story-dot.active {
    background: #1a2332 !important; /* Colore più scuro e visibile */
    transform: scale(1.2) !important; /* Ingrandisce leggermente il dot attivo */
  }

  /* Nascondi slider su desktop */
  @media screen and (min-width: 821px) {
    .story-slider-mobile {
      display: none !important;
    }
  }

  /* ==================== SERVIZI SLIDER MOBILE ==================== */
  .servizi-slider-mobile {
    display: block !important;
    margin: clamp(20px, 5vw, 30px) 0 !important;
    margin-top: -50px !important;
    padding: 0 clamp(10px, 4vw, 20px) !important;
    width: 100% !important;
    position: relative !important;
    z-index: 100 !important; /* Mette lo slider sopra agli altri elementi */
  }

  .servizi-cards-container {
    position: relative !important;
    width: 92% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    aspect-ratio: 3 / 2.5 !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    touch-action: pan-y !important; /* Permette lo scroll verticale */
    cursor: grab !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    z-index: 101 !important; /* Container sopra a tutto */
  }
  
  .servizi-cards-container:active {
    cursor: grabbing !important;
  }

  .servizi-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: clamp(18px, 4.5vw, 26px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    overflow-y: hidden !important;
    pointer-events: none !important; /* Le card non intercettano i touch */
  }

  .servizi-card.active {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: none !important; /* Anche la card attiva non intercetta - il container gestisce tutto */
  }

  .servizi-card-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(12px, 3.5vw, 15px) !important;
    line-height: 1.5 !important;
    color: var(--sima-text-main) !important;
    text-align: left !important;
    margin: 0 !important;
    pointer-events: none !important; /* Il testo non intercetta i touch */
    user-select: none !important; /* Previene selezione testo durante lo swipe */
  }

  .servizi-card-text br {
    margin-bottom: -8px !important;
  }

  .servizi-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
    position: relative !important;
    z-index: 102 !important; /* Dots sopra a tutto */
  }

  .servizi-dot {
    width: 12px !important; /* Aumentato da 10px */
    height: 12px !important; /* Aumentato da 10px */
    border-radius: 50% !important;
    background: #D9D9D9 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    display: block !important; /* Forza la visualizzazione */
    opacity: 1 !important; /* Assicura che sia visibile */
  }

  .servizi-dot.active {
    background: #1a2332 !important; /* Colore più scuro e visibile */
    transform: scale(1.2) !important; /* Ingrandisce leggermente il dot attivo */
  }

  /* Nascondi slider servizi su desktop */
  @media screen and (min-width: 821px) {
    .servizi-slider-mobile {
      display: none !important;
    }
  }

  /* Nascondi elementi desktop della sezione-1 su mobile SOLO nella pagina Servizi */
  .servizi-page .sezione-1 .rettangolo-sezione-1,
  .servizi-page .sezione-1 .testo-sezione-1,
  .servizi-page .sezione-1 .icona-assistenza-animata {
    display: none !important;
  }

  .hero-tagline {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: clamp(8px, 2.5vw, 14px) 0 !important;
    font-size: clamp(12px, 3.6vw, 16px) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 0 clamp(8px, 3vw, 16px) !important;
  }

  p,
  li,
  a {
    font-size: clamp(13px, 3.6vw, 16px) !important;
    line-height: 1.6 !important;
  }

  /* Sblocca min-height/overflow dei contenitori principali su mobile */
  .main-container,
  .home,
  section,
  .hero-section,
  .sezione-1,
  .sezione-4,
  .sezione-5 {
    min-height: unset !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Text box wrapper: niente clipping su mobile */
  .text-box-wrapper {
    overflow: visible !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  /* Garantire wrapping e visibilità dei testi */
  .h1-hero,
  h1.h1-hero,
  .hero-section .h1-hero,
  .home .h1-hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(28px, 7vw, 38px) !important; /* H1 ottimizzato per mobile */
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 10px 0 0 0 !important; /* nessun offset extra oltre il padding del contenitore */
    padding: 3px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    word-wrap: break-word !important;
    display: block !important;
    color: #18202d !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase !important; /* tutto maiuscolo su mobile home */
    white-space: normal !important;
    overflow: visible !important;
    filter: none !important;
  }
  /* (RIMOSSO BLOCCO ERRATO DUPLICATO CHE CAUSAVA ERRORE DI SINTASSI) */

  /* Riduci spazio verticale tra i due H1 di nuovo-usato */
  .h1-nuovo-usato-left { margin-bottom: 6px !important; }
  .h1-nuovo-usato-right { margin-top: 0 !important; }

  /* Nuovo/Usato: mostra il nuovo H1 mobile in due righe e nascondi i due H1 desktop */
  .h1-nuovo-usato-mobile {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 10px 0 !important; /* original spacing */
    top: -30px !important; /* alzato di 30px */
    padding: 3px !important;
    text-align: center !important;
    color: #18202d !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }
  .h1-nuovo-usato-mobile .hero-line-1,
  .h1-nuovo-usato-mobile .hero-line-2 {
    display: block !important;
    font-size: clamp(22px, 6.4vw, 36px) !important; /* ridotto ulteriormente */
    line-height: 1.2 !important;
    margin: 2px 0 !important;
    color: #18202d !important;
  }
  
  /* Seconda riga celeste */
  .h1-nuovo-usato-mobile .hero-celeste {
    color: #82ADE1 !important;
  }
  
  /* Mantieni ciascuna riga su una sola linea per coerenza con gli altri titoli */
  .h1-nuovo-usato-mobile .hero-line-1,
  .h1-nuovo-usato-mobile .hero-line-2 { white-space: nowrap !important; }

  /* Nascondi i due H1 originali su mobile */
  .h1-nuovo-usato-left,
  .h1-nuovo-usato-right { display: none !important; }

  /* Sezione 4: forza prima riga su una sola linea */
  .home .h2-sezione-4 .h2s4-line1 {
    white-space: nowrap !important;
    display: inline-block !important;
  }

  /* CTA "Le nostre lavatrici" - visibile solo su mobile */
  .mobile-only-cta {
    display: block !important;
  }

  /* Titolo hero Servizi (nuovo): colore brand e più spazio sotto */
  .h2-hero-servizi {
    display: block !important; /* visibile SOLO su mobile: sovrascrive l'hide desktop */
    color: #82ADE1 !important;
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.25 !important;
    margin: clamp(12px, 3.5vw, 20px) 0 clamp(18px, 6vw, 30px) 0 !important; /* aumenta gap col testo sotto */
    text-align: center !important;
    padding: 0 clamp(8px, 2.5vw, 16px) !important;
  }

  /* Hero H1: forza la prima riga su una sola linea (mobile) */
  .h1-hero .hero-line-1 {
    white-space: nowrap !important;
    display: block !important;
  }

  /* Icone font awesome e stelle - più piccole e più vicine */
  .social-footer i,
  .fab {
    font-size: clamp(16px, 4.5vw, 24px) !important;
  }
  
  .social-footer {
    gap: 4px !important;
    display: flex !important;
    justify-content: flex-start !important;
  }
  
  .social-link-footer {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .star-icon-footer {
    width: clamp(10px, 3.5vw, 14px) !important;
    height: auto !important;
  }

  /* ========== BLOCCA SCRIPT LEGALBLINK SU MOBILE ========== */
  /* Nasconde completamente qualsiasi elemento o overlay iniettato da LegalBlink */
  [id*="lb"],
  [id*="legal"],
  [id*="cookie"],
  [class*="lb-"],
  [class*="legalblink"],
  [class*="cookie-banner"],
  [class*="cookie-consent"],
  div[style*="z-index: 9999"],
  div[style*="position: fixed"][style*="bottom: 0"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* ========== FOOTER RESPONSIVE ========== */
  .footer {
    position: relative !important; /* NON absolute */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important; /* RESET left: 50% */
    top: 0 !important; /* RESET top: 1800-2951px - QUESTO ERA IL PROBLEMA! */
    right: auto !important;
    bottom: auto !important;
    transform: none !important; /* RESET translateX(-50%) */
    display: block !important;
    overflow: visible !important;
    max-width: 100vw !important;
    height: auto !important; /* RESET height: 350-400px */
    flex-shrink: 0 !important;
    contain: none !important;
    margin-bottom: 0 !important; /* Evita gap extra esterno */
    padding-bottom: 5px !important; /* Spazio finale di 5px dopo il testo */
    min-height: 0 !important;
  }
  
  /* BLOCCA qualsiasi elemento dopo il footer */
  .footer ~ * {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Impedisci qualsiasi elemento dopo il footer di creare spazio */
  .footer::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .footer-inner::after,
  .footer-mobile-content::after,
  .footer-mobile-design::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Footer inner: solo logo centrato nel mobile */
  .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-left,
  .footer-right {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Nascondi il logo animato desktop nel footer mobile */
  .logo-footer-link {
    display: none !important;
  }

  /* Logo video mobile nel footer */
  .logo-footer-mobile-container {
    display: block !important;
    width: 100% !important;
    max-width: 200px !important;
    margin: 5px 0 30px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    margin-left: -43px !important; /* Spostato a sinistra di altri 3px (era -40px) */
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* Spostamenti specifici per ogni pagina */
  .home-page .logo-footer-mobile-container {
    margin-left: -70px !important;
  }

    .servizi-page .logo-footer-mobile-container {
      margin-left: -61px !important;
    }

  .body-sezione2 .logo-footer-mobile-container {
    margin-left: -48px !important;
  }

  .logo-footer-mobile-video {
    width: 50% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
  }

  /* Nascondi l'immagine fallback PNG */
  .logo-footer-mobile-fallback {
    display: none !important;
  }

  /* Fallback immagine nascosta di default */

  /* Forza trasparenza anche sul parent */
  .footer-mobile-only {
    background: transparent !important;
  }

  .footer-mobile-only::before,
  .footer-mobile-only::after {
    display: none !important; /* Rimuovi eventuali pseudo-elementi che creano sfondi */
  }

  /* Sezione recensioni Google sopra le colonne */
  .footer-mobile-reviews-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 50px auto 30px auto !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    position: relative !important;
    top: -100px !important; /* Abbassato di altri 5px (era -105px) */
    left: 105px !important; /* Sposta a destra di 105px (ulteriori +5px) */
    width: auto !important; /* Permette calcolo dinamico e clipping delle stelle */
    padding: 0 !important;
  }

  .footer-mobile-reviews-section .footer-mobile-review-text {
    font-size: clamp(13.8px, 3.7vw, 16.6px) !important; /* leggera crescita */
    color: #00A3E0 !important; /* Celeste sempre */
    text-decoration: none !important;
    margin: 0 0 10px 0 !important;
    font-weight: 500 !important;
    line-height: 1.18 !important; /* ridotto per compattare le due righe */
    display: inline-block !important;
    text-align: left !important; /* "conta" sotto "La" */
    position: relative !important;
  }

  .footer-mobile-reviews-section .footer-mobile-stars {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important; /* vincola dentro la stessa larghezza del parent inline-block */
    max-width: 100% !important;
    gap: clamp(3px, 1.5vw, 8px) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-mobile-reviews-section .footer-mobile-stars span {
    color: #FFD700 !important;
    font-size: clamp(21px, 5.8vw, 27px) !important; /* leggero ajuste per non sbordare */
    line-height: 1 !important;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    text-align: center !important;
  }

  /* Allineamenti per pagina: piccole differenze di misura e spazi */
  .home-page .footer-mobile-reviews-section .footer-mobile-review-text { font-size: clamp(14px, 3.75vw, 16.8px) !important; }
  .home-page .footer-mobile-reviews-section { width: max-content !important; }
  .home-page .footer-mobile-reviews-section .footer-mobile-stars { gap: clamp(2px, 0.9vw, 5px) !important; }
  .home-page .footer-mobile-reviews-section .footer-mobile-stars span { font-size: clamp(15px, 4.2vw, 20px) !important; }
  .home-page .footer-mobile-reviews-section { left: 95px !important; } /* sposta tutto (testo+stelle) 10px a sinistra */
  .home-page .footer-mobile-reviews-section .footer-mobile-stars { transform: translateX(-17px) !important; } /* ulteriori -2px: totale 17px a sinistra rispetto al testo */

  .servizi-page .footer-mobile-reviews-section .footer-mobile-review-text { font-size: clamp(14px, 3.85vw, 17px) !important; }
  .servizi-page .footer-mobile-reviews-section { width: max-content !important; }
  .servizi-page .footer-mobile-reviews-section .footer-mobile-stars { gap: clamp(2px, 0.9vw, 5px) !important; }
  .servizi-page .footer-mobile-reviews-section .footer-mobile-stars span { font-size: clamp(15px, 4.2vw, 20px) !important; }
  .servizi-page .footer-mobile-reviews-section .footer-mobile-stars { transform: translateX(-17px) !important; }
  
  /* Sposta la colonna Contatti del footer solo su pagina servizi mobile */
  .servizi-page .footer-mobile-column-left {
    transform: translateX(0) !important;
  }

  .body-sezione2 .footer-mobile-reviews-section .footer-mobile-review-text { font-size: clamp(13.8px, 3.7vw, 16.4px) !important; }
  .body-sezione2 .footer-mobile-reviews-section { width: max-content !important; }
  .body-sezione2 .footer-mobile-reviews-section .footer-mobile-stars { gap: clamp(2px, 0.9vw, 5px) !important; }
  .body-sezione2 .footer-mobile-reviews-section .footer-mobile-stars span { font-size: clamp(15px, 4.2vw, 20px) !important; }
  .body-sezione2 .footer-mobile-reviews-section .footer-mobile-stars { transform: translateX(-3px) !important; }

  .contatti-page .footer-mobile-reviews-section .footer-mobile-review-text {
    font-size: clamp(13.8px, 3.65vw, 16.4px) !important;
    display: inline-block !important;
    text-align: left !important;
    transform: translateX(-8px) !important; /* sposta il testo leggermente a sinistra per mettere 'conta' sotto 'La' */
  }
  .contatti-page .footer-mobile-reviews-section { width: max-content !important; }
  .contatti-page .footer-mobile-reviews-section .footer-mobile-stars { gap: clamp(2px, 0.9vw, 5px) !important; }
  .contatti-page .footer-mobile-reviews-section .footer-mobile-stars span { font-size: clamp(15px, 4.2vw, 20px) !important; }
  .contatti-page .footer-mobile-reviews-section .footer-mobile-stars { transform: translateX(-15px) !important; }

  /* Prevenzione overflow stelle oltre larghezza del testo */
  .footer-mobile-reviews-section .footer-mobile-stars { overflow: hidden !important; }

  /* Spostamento specifico del logo footer SOLO per la pagina contatti (mobile) */
  .contatti-page .logo-footer-link {
    display: none !important;
  }

  /* Abbassa il footer nella pagina contatti per distanziarlo dal pulsante "Invia Richiesta" (mobile) */
  .contatti-page .footer {
    margin-top: 20px !important; /* Distanza dal pulsante invia */
  }

  /* Spostamento specifico del logo footer SOLO per la pagina nuovo-usato (mobile) */
  .body-sezione2 .logo-footer-link {
    transform: translateX(-238px) !important; /* ulteriori -22px (altri -7px) solo su nuovo-usato */
  }

  /* Abbassa il footer nella pagina nuovo-usato per far vedere il video oblò (mobile) */
  .body-sezione2 .footer {
    margin-top: 200px !important; /* Crea spazio per il video oblò */
  }

  .logo-footer-rect {
    width: clamp(120px, 35vw, 150px) !important; /* Responsive invece di 150px fisso */
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  .logo-footer-video {
    width: clamp(120px, 35vw, 150px) !important; /* Responsive invece di 150px fisso */
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  /* Layout mobile del footer sotto il logo */
  .footer-mobile-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: clamp(10px, 3vw, 20px) !important;
    row-gap: clamp(16px, 4.5vw, 26px) !important;
    align-items: flex-start !important;
    justify-items: flex-start !important;
    width: 100% !important;
    margin-top: clamp(0px, 2vw, 16px) !important;
    padding: 0 clamp(10px, 3vw, 20px) !important;
    position: relative !important;
    top: 0 !important; /* rimuove il "buco" finale */
  }

  .footer-mobile-col-1,
  .footer-mobile-col-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .footer-mobile-col-1 {
    margin-right: 0 !important;
    padding-right: 0 !important;
    margin-left: -14px !important;
  }

  .footer-mobile-col-2 {
    margin-left: 0 !important;
  }

  /* Annulla il margine negativo applicato ai testi nella colonna Orari */
  .footer-mobile-col-2 .footer-mobile-title,
  .footer-mobile-col-2 .footer-mobile-text,
  .footer-mobile-col-2 .footer-mobile-link {
    margin-left: 0 !important;
  }

  /* Sposta solo il titolo "Orari" 10px a destra */
  .footer-mobile-col-2 .footer-mobile-title {
    margin-left: 10px !important;
  }

  .footer-mobile-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(14px, 3.5vw, 16px) !important;
    font-weight: 600 !important;
    color: var(--sima-text-main) !important;
    margin: 0 0 clamp(8px, 2vw, 12px) 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .footer-mobile-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    margin: 0 !important;
    padding: clamp(2px, 0.5vw, 3px) 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-align: left !important;
    align-self: flex-start !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .footer-mobile-link {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    color: var(--sima-text-main) !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    align-self: flex-start !important;
    text-decoration: none !important;
    display: block !important;
    white-space: nowrap !important;
  }

  .footer-mobile-link:first-of-type {
    margin-top: clamp(8px, 2.5vw, 10px) !important; /* Responsive invece di 10px fisso */
  }

  .footer-mobile-link-middle {
    margin-top: -30px !important; /* Alza "Cookie Policy" di 30px */
  }

  .footer-mobile-link:last-of-type {
    margin-top: -18px !important; /* Alza "Aggiorna preferenze cookie" di 18px */
  }

  .footer-mobile-link:hover {
    text-decoration: underline !important;
  }

  .footer-mobile-design {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    color: var(--sima-text-main) !important;
    margin: clamp(15px, 5vw, 20px) 0 0 0 !important;
    padding: 0 0 0 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    width: auto !important;
    align-self: flex-start !important;
    margin-left: 80px !important; /* Spostato di 80px a destra */
    white-space: nowrap !important; /* Forza su una riga */
    display: block !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: -30px !important; /* Alzato di 30px */
  }

  /* Se la versione visibile è quella inline, spostala anch'essa di 80px */
  .design-credit {
    margin-left: 80px !important;
    text-align: left !important;
    width: auto !important;
    white-space: nowrap !important; /* Forza su una riga */
    display: block !important;
  }
  
  /* BLOCCO TOTALE: Termina il sito qui */
  .footer-mobile-design::after {
    content: none !important; /* none invece di '' */
    display: none !important; /* none invece di block */
  }

  /* Sposta tutti i testi del footer a sinistra di 30px nel mobile */
  .footer-mobile-content .footer-mobile-title,
  .footer-mobile-content .footer-mobile-text,
  .footer-mobile-content .footer-mobile-link {
    margin-left: 5px !important; /* Spostato a destra di 5px */
  }

  /* ========== FOOTER MOBILE INDIPENDENTE ========== */
  .footer-mobile-only {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    overflow: visible !important;
    position: relative !important;
  }

  .footer-mobile-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(8px, 3vw, 15px) !important;
    row-gap: clamp(16px, 4.5vw, 26px) !important;
    width: 100% !important;
    position: relative !important;
    top: -150px !important;
    margin-bottom: -150px !important;
  }

  .footer-mobile-column-left,
  .footer-mobile-column-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin-top: 20px !important; /* Abbassate di 20px */
  }

  .footer-mobile-column-left {
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Spostamento specifico solo per la home page */
  .home-page .footer-mobile-column-left {
    margin-left: -14px !important;
  }

  /* Spostamento specifico solo per la pagina contatti */
  .contatti-page .footer-mobile-column-left {
    margin-left: 20px !important;
  }

  .footer-mobile-column-right {
    margin-left: 50px !important;
    padding-left: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Allinea tutti gli elementi della colonna sinistra con il titolo */
  .footer-mobile-column-left .footer-mobile-heading,
  .footer-mobile-column-left .footer-mobile-info,
  .footer-mobile-column-left .footer-mobile-linkitem,
  .footer-mobile-column-left .footer-mobile-credit {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
  }

  /* Allinea tutti gli elementi della colonna destra con il titolo */
  .footer-mobile-column-right .footer-mobile-heading,
  .footer-mobile-column-right .footer-mobile-info {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
  }

  /* ===== Alignment tweaks for mobile footer columns ===== */
  /* Move right-column lines so they visually align with corresponding left-column lines */
  .footer-mobile-column-right .footer-mobile-info:nth-of-type(2) {
    /* 9:00 - 18:00 -> align with Scandicci (second line of left address) */
    position: relative !important;
    top: -9px !important; /* Abbassato di 3px */
  }

  .footer-mobile-column-right .footer-mobile-info:nth-of-type(3) {
    /* Emergenze -> align with Tel. line */
    position: relative !important;
    top: -9px !important; /* -6px - 3px = -9px */
  }

  .footer-mobile-column-right .footer-mobile-info:nth-of-type(4) {
    /* H24/7 -> align with info@assistenzalavanderie.it */
    position: relative !important;
    top: -7px !important; /* Alzato di ulteriori 2px */
  }

  /* move instagram icon to align with P.IVA (left column 4th line) */
  .footer-mobile-column-right .footer-mobile-instagram {
    position: relative !important;
    top: -22px !important; /* Alzata di altri 10px */
  }

  /* Footer headings and infos (base styles) */
  .footer-mobile-heading {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(16px, 4vw, 18px) !important;
    font-weight: 600 !important;
    color: var(--sima-text-main) !important;
    margin: 0 0 clamp(8px, 2vw, 12px) 0 !important;
    padding: 0 !important;
  }

  .footer-mobile-info {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(13px, 3.2vw, 15px) !important;
    color: var(--sima-text-main) !important;
    margin: 0 !important;
    padding: clamp(2px, 0.5vw, 3px) 0 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }

  .footer-mobile-linkitem {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(13px, 3.2vw, 15px) !important;
    color: var(--sima-text-main) !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: clamp(2px, 0.5vw, 3px) 0 !important;
    transition: opacity 0.3s ease !important;
  }

  .footer-mobile-linkitem:hover {
    opacity: 0.7 !important;
  }

  /* Abbassa Privacy Policy di 5px */
  .footer-mobile-linkitem:nth-of-type(1) {
    position: relative !important;
    top: 5px !important;
  }

  /* Abbassa Cookie Policy di 5px */
  .footer-mobile-linkitem:nth-of-type(2) {
    position: relative !important;
    top: -15px !important; /* -20px + 5px = -15px */
  }

  .footer-mobile-inline {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: clamp(2px, 0.5vw, 3px) 0 !important;
  }

  .footer-mobile-info-inline {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(13px, 3.2vw, 15px) !important;
    color: var(--sima-text-main) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  .footer-mobile-linkitem-inline {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(13px, 3.2vw, 15px) !important;
    color: var(--sima-text-main) !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 0.3s ease !important;
  }

  .footer-mobile-linkitem-inline:hover {
    opacity: 0.7 !important;
  }

  .footer-mobile-credit {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    color: #00A3E0 !important; /* Celeste */
    margin: clamp(8px, 2vw, 10px) 0 20px 0 !important;
    padding: 0 !important;
    opacity: 0.7 !important;
    width: 100% !important;
    text-align: center !important;
    position: relative !important;
    top: -20px !important; /* Abbassato di altri 50px (era -70px) */
  }

  .footer-mobile-credit a {
    color: inherit !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    opacity: inherit !important;
  }

  .footer-mobile-credit a:hover {
    text-decoration: none !important;
    opacity: 1 !important;
  }

  .footer-mobile-instagram {
     display: block !important;
     width: 24px !important;
     height: 24px !important;
     color: #00A3E0 !important;
     margin: 56px 0 0 0 !important; /* Abbassata di altri 40px (era 16px) */
     padding: 0 !important;
     transition: opacity 0.3s ease !important;
  }

  .footer-mobile-instagram:hover {
    opacity: 0.7 !important;
  }

  .footer-mobile-instagram svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .footer-mobile-review-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: clamp(13px, 3.2vw, 15px) !important;
    font-weight: 600 !important;
    color: #00A3E0 !important;
    text-transform: uppercase !important;
    margin: clamp(12px, 3vw, 16px) 0 2px 0 !important; /* gap 2px sopra le stelle */
    padding: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    position: relative !important;
    top: -35px !important; /* -40px + 5px = -35px */
    text-decoration: none !important; /* Rimuove sottolineatura del link */
    display: inline-block !important;
  }

  /* Mantieni lo stesso stile al passaggio del mouse */
  .footer-mobile-review-text:hover,
  .footer-mobile-review-text:focus,
  .footer-mobile-review-text:visited {
    color: #00A3E0 !important;
    text-decoration: none !important;
  }

  /* Spostamento specifico solo per la pagina contatti */
  .contatti-page .footer-mobile-review-text {
    margin-left: 0 !important; /* Allinea con H24/7 */
    white-space: normal !important; /* Permette l'a capo */
    text-align: center !important; /* Centra il testo */
    display: block !important;
    top: -37px !important; /* -40px + 3px = -37px */
  }

  .footer-mobile-stars {
    font-size: clamp(16px, 4vw, 20px) !important;
    color: #FFD700 !important;
    letter-spacing: 2px !important;
    margin: 0 0 0 -4px !important;
    padding: 0 !important;
    line-height: 1 !important;
    position: relative !important;
    top: -53px !important; /* -48px - 5px = -53px (home, servizi, sezione4) */
    left: 19px !important; /* Spostate a destra di 19px */
  }

  /* Spostamento specifico solo per la pagina contatti */
  .contatti-page .footer-mobile-stars {
    margin-left: 16px !important;
    left: 2px !important; /* -4px + 6px = 2px */
    top: -55px !important; /* -58px + 3px = -55px */
  }

  /* ---------------- PAGINA NUOVO-USATO (mobile) ---------------- */
  /* Allinea "La tua opinione conta" a sinistra di 6px e sposta stelle a destra di 7px solo in nuovo-usato */
  .body-sezione2 .footer-mobile-review-text {
    margin-left: -6px !important;
  }
  .body-sezione2 .footer-mobile-stars {
    margin-left: 16px !important; /* +5px */
    left: -4px !important; /* 6px - 10px = -4px */
    top: -53px !important; /* Alzate di 5px anche in nuovo-usato */
  }

  .footer-links,
  .footer-info,
  .footer-hours,
  .social-footer,
  .google-reviews-footer-container {
    position: relative !important;
    width: 100% !important;
    margin: clamp(4px, 1.2vw, 8px) 0 !important;
    padding: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  /* Nascondi il numero 4.8 nel mobile */
  .rating-number-footer {
    display: none !important;
  }

  /* Testo "Recensioni" sopra le stelle */
  .reviews-text-footer {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 3.2vw, 14px);
    color: var(--sima-text-main);
    margin-bottom: 4px;
  }

  /* Allinea le stelle a sinistra */
  .reviews-stars-footer {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 3px !important;
  }

  /* Righe di testo del footer più compatte e più piccole */
  .footer-info-line {
    margin: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
    padding-left: 5px !important;
    padding-bottom: 0 !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: clamp(12px, 3vw, 14px) !important;
  }
  
  /* Forza la prima linea (indirizzo) a stare su una riga */
  .footer-info .footer-info-line {
    display: block !important;
  }
  
  .footer-info .footer-info-line::first-line {
    white-space: nowrap !important;
  }

  /* Forza l'indirizzo su una riga nel mobile */
  .address-line {
    white-space: nowrap !important;
    display: inline-block !important;
  }
  
  /* Link email della stessa dimensione del testo */
  .footer-info-line a,
  .footer-info-line .footer-website {
    font-size: clamp(12px, 3vw, 14px) !important;
    display: inline-block !important;
    margin-left: -10px !important;
    white-space: nowrap !important;
  }
  
  .footer-info-line br {
    line-height: 1.3 !important;
  }
  
  /* Nascondi solo il link del sito web, non tutto il paragrafo */
  .footer-info .footer-website[href*="www.assistenzalavanderie.it"] {
    display: none !important;
  }

  /* Contatti a sinistra, orari a destra */
  .footer-left { grid-column: 1 / 2 !important; }
  .footer-right { 
    grid-column: 2 / 3 !important;
    padding-left: 20px !important;
  }

  /* Social e recensioni sotto, su tutta larghezza */
  .footer-social-reviews { grid-column: 1 / -1 !important; }
  .footer-links { grid-column: 1 / -1 !important; }

  /* Nascondi footer-links desktop nel mobile, mostra inline sotto P.IVA */
  .footer-links {
    display: none !important;
  }

  /* Links inline sotto P.IVA, allineati */
  .footer-links-inline {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    margin-top: 2px !important;
    padding-left: 5px !important;
    padding-top: 0 !important;
  }

  .footer-link {
    font-size: clamp(12px, 3vw, 14px) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    line-height: 1.3 !important;
  }

  .design-credit {
    font-size: clamp(12px, 3vw, 14px) !important;
    margin-top: clamp(2px, 0.5vw, 3px) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    color: var(--sima-text-main) !important;
    line-height: 1 !important;
  }

  .footer-column-title {
    font-size: clamp(15px, 4vw, 18px) !important;
    margin-bottom: clamp(6px, 1.6vw, 10px) !important;
    font-weight: 600 !important;
  }

  /* Nascondi completamente la sezione contatti, link privacy, orari, emergenze,
     recensioni e icone social nel mobile */
  .footer-info,
  .footer-links-inline,
  .footer-links,
  .footer-hours,
  .footer-emergency,
  .social-footer,
  .google-reviews-footer-container,
  .reviews-text-footer,
  .reviews-stars-footer,
  .footer-social-reviews,
  .footer-right {
    display: none !important;
  }

  /* Forza eventuali titoli nella sezione contatti a non occupare spazio */
  .footer-info .footer-column-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* ========== MODALE E OVERLAY ========== */
  .modal,
  .overlay {
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  .modal-content {
    width: 90% !important;
    max-width: 400px !important;
    padding: 20px !important;
  }

  /* ========== LEGALBLINK MODAL CENTRATO ========== */
  /* Centra soltanto i modali delle preferenze cookie */
  div[id*="lb-cs"][id*="modal"],
  div[id*="lb-cs"][class*="modal"],
  div[id*="lb_cs"][id*="modal"],
  div[id*="lb_cs"][class*="modal"],
  div[class*="lb-cs"][id*="modal"],
  div[class*="lb-cs"][class*="modal"],
  div[class*="lb_cs"][id*="modal"],
  div[class*="lb_cs"][class*="modal"],
  .lb-cs-modal,
  .lb-cs-container[class*="modal"] {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
    margin: 0 !important;
    width: min(90vw, 640px) !important;
  }

  /* Overlay del modal */
  div[class*="lb-cs-overlay"],
  div[id*="lb-cs-overlay"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99998 !important;
    background: rgba(0, 0, 0, 0.5) !important;
  }

  /* Blocca lo scroll del body quando il modal è aperto */
  body.lb-cs-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* ========== UTILITY ========== */
  /* Nascondi elementi decorativi pesanti su mobile */
  .decorative-element,
  .background-animation {
    display: none !important;
  }

  /* Spaziatura verticale */
  section {
    padding: 30px 0 !important;
  }

  /* Testo responsive */
  p, span, div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ========== NUOVO/USATO - COMING SOON (mobile) ========== */
  .coming-soon-nuovo-usato {
    margin: 20px auto 12px auto !important;
    text-align: center !important;
    padding: 0 14px !important;
  }
  .coming-soon-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(18px, 5.2vw, 24px) !important;
    text-transform: uppercase !important;
    margin: 0 0 8px 0 !important;
    
    /* Gradiente da blu scuro a celeste con sfumatura */
    background: linear-gradient(90deg, #003D82 0%, #00A3E0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .coming-soon-subtitle {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
    text-transform: uppercase !important;
    line-height: 1.45 !important;
    color: var(--sima-text-main) !important;
    margin: 0 !important;
  }

  /* Nuovo/Usato: gestisci video desktop vs mobile */
  /* Nascondi il video desktop su mobile */
  .body-sezione2 .hero-video-oblo {
    display: none !important;
  }

  /* Mostra e posiziona il video mobile */
  .body-sezione2 .hero-video-oblo-mobile {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 500px !important; /* abbassato di altri 20px rispetto ai 480px */
    width: 40% !important; /* ridotto di molto su mobile */
    z-index: 1 !important;
    display: block !important;
  }

  /* Nascondi le card prodotti su Nuovo/Usato anche in mobile */
  .body-sezione2 .products-grid,
  .body-sezione2 .product-card,
  .body-sezione2 .product-card-content {
    display: none !important;
  }

  /* Link touch-friendly */
  a {
    min-height: 44px !important;
    display: inline-block !important;
    padding: 8px 12px !important;
  }

  /* ========== ANIMAZIONI RIDOTTE SU MOBILE ========== */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
/* <-- RIMOSSO CHIUSURA EXTRA '}' CHE CREAVA ERRORE DI SINTASSI */

/* ============================================
   BREAKPOINT: Smartphone piccoli (max 375px)
   ============================================ */
@media screen and (max-width: 375px) {
  html, body {
    font-size: 14px !important;
  }

  .main-container, 
  .home, 
  .main-container-sezione2,
  .main-container-sezione3,
  .main-container-sezione4,
  .main-container-sezione5 {
    padding: 85px 4vw 0 4vw !important;
  }

  /* Nuovo/Usato: aumenta spazio dall'header fisso (smartphone piccoli) */
  body.body-sezione2 .main-container-sezione2 {
    padding-top: calc(85px + 40px) !important; /* +40px extra */
  }

  .header {
    min-height: 75px !important;
    padding: 6px 12px !important;
  }

  .logo {
    width: 90px !important;
    height: 32px !important;
  }

  .menu {
    gap: 5px 8px !important;
  }

  .testo-menu1, 
  .testo-menu3, 
  .testo-menu4, 
  .testo-menu6 {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }

  .h1-hero, 
  .hero-line-1, 
  .hero-line-2, 
  .hero-line-3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .hero-cta:not(.home .hero-cta),
  .hero-cta-text-only:not(.home .hero-cta-text-only) {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .hero-cta-button:not(.home .hero-cta-button) {
    font-size: 14px !important;
    padding: 10px 18px !important;
  }

  .testo-sezione-1,
  .testo-sezione-2,
  .testo-sezione-3,
  .testo-sezione-4,
  .testo-sezione-5,
  .testo-sezione-5-right {
    font-size: 14px !important;
  }

  .titolo-sezione-1,
  .titolo-sezione-2,
  .titolo-sezione-3,
  .titolo-sezione-4,
  .titolo-sezione-5 {
    font-size: 20px !important;
  }

  .footer {
    padding: 20px 12px !important;
  }

  .footer-link {
    font-size: 13px !important;
  }

  .footer-column-title {
    font-size: 15px !important;
  }
}

/* ============================================
   BREAKPOINT: Smartphone medi (376px - 480px)
   ============================================ */
@media screen and (min-width: 376px) and (max-width: 480px) {
  html, body {
    font-size: 15px !important;
  }

  .main-container, 
  .home, 
  .main-container-sezione2,
  .main-container-sezione3,
  .main-container-sezione4,
  .main-container-sezione5 {
    padding: 88px 4.5vw 0 4.5vw !important;
  }

  /* Nuovo/Usato: aumenta spazio dall'header fisso (smartphone medi) */
  body.body-sezione2 .main-container-sezione2 {
    padding-top: calc(88px + 40px) !important; /* +40px extra */
  }

  .header {
    min-height: 78px !important;
  }

  .logo {
    width: 110px !important;
    height: 38px !important;
  }

  .testo-menu1, 
  .testo-menu3, 
  .testo-menu4, 
  .testo-menu6 {
    font-size: 13.5px !important;
  }

  .h1-hero, 
  .hero-line-1, 
  .hero-line-2, 
  .hero-line-3 {
    font-size: 22px !important;
  }

  .hero-cta:not(.home .hero-cta),
  .hero-cta-text-only:not(.home .hero-cta-text-only) {
    font-size: 15px !important;
  }

  .titolo-sezione-1,
  .titolo-sezione-2,
  .titolo-sezione-3,
  .titolo-sezione-4,
  .titolo-sezione-5 {
    font-size: 24px !important;
  }
}

/* ============================================
   BREAKPOINT: Smartphone grandi (481px - 640px)
   ============================================ */
@media screen and (min-width: 481px) and (max-width: 640px) {
  .main-container, 
  .home, 
  .main-container-sezione2,
  .main-container-sezione3,
  .main-container-sezione4,
  .main-container-sezione5 {
    padding: 92px 5vw 0 5vw !important;
  }

  /* Nuovo/Usato: aumenta spazio dall'header fisso (smartphone grandi) */
  body.body-sezione2 .main-container-sezione2 {
    padding-top: calc(92px + 40px) !important; /* +40px extra */
  }

  .header {
    min-height: 82px !important;
  }

  .logo {
    width: 130px !important;
    height: 45px !important;
  }

  .h1-hero, 
  .hero-line-1, 
  .hero-line-2, 
  .hero-line-3 {
    font-size: 26px !important;
  }

  .titolo-sezione-1,
  .titolo-sezione-2,
  .titolo-sezione-3,
  .titolo-sezione-4,
  .titolo-sezione-5 {
    font-size: 28px !important;
  }
}

/* ============================================
   BREAKPOINT: Tablet piccoli (821px - 1366px) - NON applicare a mobile!
   ============================================ */
@media screen and (min-width: 821px) and (max-width: 1366px) {
  .main-container, 
  .home, 
  .main-container-sezione2,
  .main-container-sezione3,
  .main-container-sezione4,
  .main-container-sezione5 {
    padding: 95px 6vw 0 6vw !important;
  }

  /* Nuovo/Usato: aumenta spazio dall'header fisso (tablet piccoli) */
  body.body-sezione2 .main-container-sezione2 {
    padding-top: calc(95px + 40px) !important; /* +40px extra */
  }

  .header {
    min-height: 85px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 12px 30px !important;
  }

  .logo {
    width: 150px !important;
    height: 50px !important;
    margin: 0 !important;
  }

  .menu {
    margin: 0 !important;
    justify-content: flex-end !important;
  }

  .testo-menu1, 
  .testo-menu3, 
  .testo-menu4, 
  .testo-menu6 {
    font-size: 15px !important;
    padding: 6px 14px !important;
  }

  .h1-hero, 
  .hero-line-1, 
  .hero-line-2, 
  .hero-line-3 {
    font-size: 30px !important;
  }

  .hero-video-container,
  .foto-header {
    max-width: 550px !important;
  }

  .titolo-sezione-1,
  .titolo-sezione-2,
  .titolo-sezione-3,
  .titolo-sezione-4,
  .titolo-sezione-5 {
    font-size: 32px !important;
  }

  .testo-sezione-1,
  .testo-sezione-2,
  .testo-sezione-3,
  .testo-sezione-4,
  .testo-sezione-5,
  .testo-sezione-5-right {
    font-size: 17px !important;
  }
}

/* ========== PAGINA CONTATTI MOBILE ========== */
@media screen and (max-width: 820px) {
  /* Layout mobile: tutto in colonna singola */
  .contatti-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: -50px !important; /* Avvicina al titolo di 50px */
  }
  
  /* Info section prima (contatti + mappa) */
  .info-section {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  /* Form dopo */
  .form-section {
    order: 2 !important;
    width: 100% !important;
  }
  
  /* Mostra i contatti diretti ma centrali */
  .contact-info-side {
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    background: transparent !important;
    border-radius: 8px !important;
  }
  
  .contact-info-side h3 {
    display: none !important; /* Nascondi il titolo "Contatti diretti" */
  }
  
  .contact-info-side .info-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 12px 0 !important;
    font-size: clamp(14px, 3.5vw, 16px) !important;
  }
  
  .contact-info-side .info-item i {
    font-size: 20px !important;
    color: #82ADE1 !important;
  }
  
  /* Mappa rettangolare più piccola */
  .map-container {
    width: 100% !important;
    height: 180px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  .map-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
  }
  
  /* H1 Contatti: maiuscolo, centrato, molto più grande e celeste */
  .h1-contatti {
    position: relative !important; /* Sovrascrivi absolute */
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    text-transform: uppercase !important;
    text-align: center !important;
    font-size: clamp(40px, 10vw, 60px) !important; /* Molto più grande */
    margin: 20px auto 20px auto !important; /* riduci offset: già compensato dal padding-top */
    padding: 3px !important;
    color: #82ADE1 !important; /* Celeste brand */
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }
  
  /* Pulsanti dipartimenti tutti affiancati */
  .department-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  
  .dept-btn {
    flex: 1 !important;
    font-size: clamp(12px, 3.5vw, 17px) !important; /* Font ancora più grande */
    padding: 12px 6px !important; /* Padding aumentato */
    white-space: nowrap !important;
    min-width: 0 !important;
  }
}

/* Fine mobile.css */

/* ==================================================================
   Fix: hide mobile-only footer on desktop for ALL pages
   This prevents duplicate footer info appearing on desktop
   while keeping the mobile footer visible on mobile devices.
   ==================================================================*/
@media screen and (min-width: 821px) {
  .footer-mobile-only {
    display: none !important;
  }
}

/* ========== ANIMAZIONI (fuori dalla media query per compatibilità) ========== */
@keyframes color-wave {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.5) saturate(1.8) hue-rotate(10deg);
  }
}

@keyframes color-shift {
  0%, 100% {
    color: #003D82 !important;
  }
  50% {
    color: #00A3E0 !important;
  }
}