/* ==========================================================================
   uniteam: menu.css, menu nuovo (giro 2, 19 set 2026)
   Richiesta del titolare: «Sistema il menu, deve avere un design migliore».
   Lo iniettano build.py (statiche) e render.php (PHP) come terzo foglio, dopo
   ux.css e richiesta.css (id uniteam-menu-css). Parte MENU.

   Il markup è quello del mirror (header Elementor 6626, menu ElementsKit
   26d18fa) e non si tocca lato server: qui si ridisegna sopra.

   Due livelli, così il menu funziona anche se menu.js non parte:
     A. solo CSS, sempre: topbar più discreta, riga del logo più bassa, voci in
        testo normale con stato attivo e passaggio del mouse, PREVENTIVO coi
        pulsanti del sito, header che resta in cima scorrendo (sticky), barra
        compatta con hamburger tondo sotto i 1025 px. La tendina e il pannello
        mobile di ElementsKit restano quelli di oggi (degrado).
     B. con menu.js: tendina «Parco auto» con le categorie
        (html.ut-menu-tendina-js), pannello mobile nuovo (html.ut-menu-pannello-js),
        ombra dell'header fisso (html.ut-menu-fisso).

   Header fisso senza salti di layout: il contenitore dell'header è sticky con
   top negativo (topbar + taglio). Resta nel flusso, quindi niente spazio da
   riservare né CLS: scorrendo escono la topbar e i primi 12 px della riga, e la
   parte visibile (--ut-menu-alto) resta in cima. menu.js aggiunge solo ombra e
   un translateY del contenuto (niente layout).

   Indice
     1. Token e segnale per menu.js
     2. Header che resta in cima
     3. Topbar
     4. Riga del logo (desktop)
     5. Voci del menu (desktop)
     6. PREVENTIVO (desktop)
     7. Tendina «Parco auto» (menu.js)
     8. Tendina di ElementsKit senza menu.js (degrado)
     9. Pannello mobile (menu.js)
    10. Barre laterali sticky sotto l'header
    11. Finestre aperte e movimento ridotto
    12. Regole per larghezza, in fondo e in ordine decrescente

   Specificità: il kit impone (0,1,1) su button e a; lo stile Elementor del
   widget 26d18fa arriva a (0,5,2); ux.css usa !important sul pulsante mobile.
   Ogni regola qui sotto li supera per specificità o per ordine.
   Testi visibili: niente trattini (li scrive menu.js).
   ========================================================================== */


/* ==========================================================================
   1. Token
   ========================================================================== */
:root {
  --ut-menu-css: 1;          /* menu.js lavora solo se il foglio c'è */
  --ut-menu-barra: 36px;     /* topbar */
  --ut-menu-riga: 84px;      /* riga del logo */
  --ut-menu-taglio: 12px;    /* parte della riga che esce quando è fissa */
  --ut-menu-alto: 72px;      /* riga meno taglio: header fisso visibile */
  /* Altezza dell'header fisso, cioè la parte che resta in cima alla finestra
     scorrendo: la usano scroll-padding-top e gli sticky del tema (§2, §10).
     Qui il valore del foglio; menu.js la rimisura e la scrive in linea su
     <html> quando l'header si compatta o cambia misura. Interfaccia per gli
     altri fogli e script: var(--ut-header-altezza, 72px). */
  --ut-header-altezza: var(--ut-menu-alto);
  --ut-menu-prev-l: 110px;   /* «Preventivo» mobile: larghezza fissa (§12) */
  --ut-menu-ink: var(--ut-ink, #040401);
  --ut-menu-voce: rgba(4, 4, 1, .78);
  --ut-menu-accento: var(--ut-accent, #FF3600);
  --ut-menu-accento-testo: var(--ut-accent-ink, #CC2E00);
  --ut-menu-navy: var(--ut-navy, #1B3B6F);
  --ut-menu-notte: var(--ut-navy-900, #0A142A);
  --ut-menu-fresco: var(--ut-surface-cool, #F0F4FA);
  --ut-menu-linea: var(--ut-line-cool, #E4E9F0);
  --ut-menu-testo-font: var(--ut-font-body, 'DM Sans', sans-serif);
  --ut-menu-titolo-font: var(--ut-font-head, 'Epilogue', sans-serif);
  --ut-menu-curva: cubic-bezier(.2, .7, .2, 1);
  /* icone disegnate con mask: si colorano col background-color */
  --ut-menu-ico-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ut-menu-ico-destra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ut-menu-ico-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M11.665 3.976 1.641 14 0 12.353 10.017 2.329H1.184V0h12.811v12.811h-2.33V3.976Z' fill='%23000'/%3E%3C/svg%3E");
  --ut-menu-freccia-bianca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M11.665 3.976 1.641 14 0 12.353 10.017 2.329H1.184V0h12.811v12.811h-2.33V3.976Z' fill='%23fff'/%3E%3C/svg%3E");
  --ut-menu-freccia-scura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M11.665 3.976 1.641 14 0 12.353 10.017 2.329H1.184V0h12.811v12.811h-2.33V3.976Z' fill='%23CC2E00'/%3E%3C/svg%3E");
  --ut-menu-freccia-arancio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M11.665 3.976 1.641 14 0 12.353 10.017 2.329H1.184V0h12.811v12.811h-2.33V3.976Z' fill='%23FF3600'/%3E%3C/svg%3E");
  --ut-menu-ico-asterisco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.2 2.3 12.6 12.6'%3E%3Cpath d='M12.383 8.578 15.5 10.349l-1.442 2.458-3.117-1.772v3.543H8.058v-3.543l-3.117 1.772-1.441-2.458 3.116-1.771L3.5 6.807l1.441-2.458 3.117 1.771V2.578h2.883V6.12l3.117-1.771 1.442 2.458-3.117 1.771Z' fill='%23000'/%3E%3C/svg%3E");
}


/* ==========================================================================
   2. Header che resta in cima
   Il contenitore di ElementsKit è figlio diretto del body: sticky lì vale per
   tutta la pagina. z-index sopra la barra laterale della scheda (9999) e sotto
   Complianz (99999), WhatsApp, cursore e finestre. Il preloader del tema
   (10000, prima nel DOM) sale di uno, così continua a coprire l'header mentre
   la pagina carica.
   ========================================================================== */
body .ekit-template-content-markup.ekit-template-content-header {
  position: sticky;
  top: calc(-1 * (var(--ut-menu-barra) + var(--ut-menu-taglio)));
  z-index: 10000;
}
body > .preloader {
  z-index: 10001;
}
/* ancore e scrollIntoView si fermano sotto l'header fisso */
html {
  scroll-padding-top: calc(var(--ut-header-altezza) + 16px);
}


/* ==========================================================================
   3. Topbar
   Da scritta che scorre a riga ferma e discreta: su desktop le quattro frasi
   (le altre quattro sono il doppione del giro) stanno ferme e centrate,
   separate dall'asterisco del marchio. Sotto i 1025 px scorrono ancora, più
   lente e sfumate ai bordi. Scorrendo la pagina la topbar esce da sola.
   ========================================================================== */
body .elementor-6626 .elementor-element.elementor-element-44cae27 {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --margin-top: 0px;
  --margin-bottom: 0px;
  background: var(--ut-menu-fresco);
}
body .elementor-6626 .elementor-element.elementor-element-f99fbd6 {
  margin: 0;
}
body .elementor-6626 .elementor-element-f99fbd6 .topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--ut-menu-barra);
  padding: 0;
  background: transparent;
}
body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  animation: none;
}
body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-family: var(--ut-menu-testo-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ut-menu-navy);
  white-space: nowrap;
}
body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span::after {
  content: none;
}
/* le quattro frasi una volta sola (da 1025 px in su non scorrono) */
body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span:nth-child(n+5) {
  display: none;
}
body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span:first-child::before {
  content: none;
}
/* separatore: l'asterisco del marchio, lo stesso dell'occhiello della fascia */
body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 22px;
  background: var(--ut-menu-accento);
  -webkit-mask: var(--ut-menu-ico-asterisco) center / contain no-repeat;
  mask: var(--ut-menu-ico-asterisco) center / contain no-repeat;
}


/* ==========================================================================
   4. Riga del logo (desktop; sotto i 1025 px regole in fondo)
   Da 143 px a 84: logo a 50 px d'altezza, voci al centro, PREVENTIVO a destra.
   ========================================================================== */
body .elementor-6626 .elementor-element.elementor-element-43ff1c0 {
  --margin-top: 0px;
  --margin-bottom: 0px;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(10, 20, 42, 0);
  transition: box-shadow .3s ease;
}
body .elementor-6626 .elementor-element.elementor-element-43ff1c0 > .e-con-inner {
  box-sizing: border-box;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1340px;
  height: var(--ut-menu-riga);
  margin: 0 auto;
  padding: 0 20px;
  transition: transform .3s var(--ut-menu-curva);
}
body .elementor-6626 .elementor-element-43ff1c0 .elementor-element.elementor-element-4b6cc83,
body .elementor-6626 .elementor-element-43ff1c0 .elementor-element.elementor-element-4360707 {
  --width: auto;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  flex: 0 0 auto;
  width: auto;
}
body .elementor-6626 .elementor-element-43ff1c0 .elementor-element.elementor-element-35a01c7 {
  --width: auto;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  align-items: center;
  padding: 0;
}
body .elementor-6626 .elementor-element-76d0580 .ata-site-logo a {
  display: block;
  border-radius: 6px;
}
body .elementor-6626 .elementor-element-76d0580 img.ata-site-logo-img {
  display: block;
  width: auto;
  height: 50px;
  max-width: none;
}
body .elementor-6626 .elementor-element-76d0580 .ata-site-logo a:focus-visible {
  outline: 2px solid var(--ut-menu-navy);
  outline-offset: 6px;
}

/* header fisso: ombra leggera, e il contenuto scende di metà taglio così
   resta centrato nella parte visibile (transform: nessun salto di layout) */
html.ut-menu-fisso body .elementor-6626 .elementor-element.elementor-element-43ff1c0 {
  box-shadow: 0 1px 0 rgba(10, 20, 42, .06), 0 12px 28px -14px rgba(10, 20, 42, .28);
}
html.ut-menu-fisso body .elementor-6626 .elementor-element.elementor-element-43ff1c0 > .e-con-inner {
  transform: translateY(calc(var(--ut-menu-taglio) / 2));
}


/* ==========================================================================
   5. Voci del menu (desktop)
   Testo normale (non più maiuscolo), 15 px, inchiostro al 78 %; passaggio
   del mouse e voce corrente: inchiostro pieno e barretta arancio sotto il
   testo, che cresce da sinistra. Stesso peso per tutte le voci: la voce
   corrente la segna menu.js dopo il primo disegno e un grassetto sposterebbe
   le altre. Il colore arancio non fa più da stato (su
   bianco 3,6:1, sotto AA).
   Tutto da 1025 px in su: sotto, con menu.js, le voci stanno nel pannello
   nuovo; senza menu.js il pannello nero di ElementsKit tiene i suoi colori
   (le voci scure di qui sparirebbero sul nero).
   ========================================================================== */
@media (min-width: 1025px) {
  body .elementor-6626 .elementor-element.elementor-element-26d18fa {
    --align-self: center;
    width: 100%;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa > .elementor-widget-container {
    margin: 0;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li {
    margin: 0 2px;
  }
  /* da 1025 px: il contenitore alto 55 px di Elementor e i link al 100 %
     lasciavano il testo in alto; qui la riga si centra da sola */
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-menu-container {
    height: auto;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav {
    height: auto;
    align-items: center;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a {
    height: auto;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a {
    position: relative;
    display: inline-block;
    padding: 12px 14px;
    font-family: var(--ut-menu-testo-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: lowercase;
    white-space: nowrap;
    color: var(--ut-menu-voce);
    transition: color .2s ease;
  }
  /* etichette dal solo CSS, così niente cambia dopo il primo disegno (niente
     CLS): «Parco Auto» → «Parco auto» (minuscolo più iniziale grande),
     «Faqs» → «Domande frequenti» (testo generato; il nome accessibile lo
     rimette menu.js con aria-label) */
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a::first-letter {
    text-transform: uppercase;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li.menu-item-4590 > a {
    display: inline-flex;
    align-items: center;
    font-size: 0;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li.menu-item-4590 > a::before {
    content: "Domande frequenti";
    font-size: 15px;
    line-height: 20px;
    text-transform: none;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a:hover,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a:focus,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a:active,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li:hover > a,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li.current-menu-item > a,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li.current-menu-ancestor > a,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a[aria-current="page"],
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a.ut-menu-sezione,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a[aria-expanded="true"] {
    color: var(--ut-menu-ink);
  }
  /* la barretta: sotto il testo, larga quanto il testo (e la freccina) */
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--ut-menu-accento);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .32s var(--ut-menu-curva);
    pointer-events: none;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a:hover::after,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li.current-menu-item > a::after,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li.current-menu-ancestor > a::after,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a[aria-current="page"]::after,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a.ut-menu-sezione::after {
    transform: scaleX(1);
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a:focus-visible {
    outline: 2px solid var(--ut-menu-navy);
    outline-offset: -2px;
    border-radius: 10px;
  }
  /* freccina di «Parco auto»: disegnata, non più il carattere dell'icona */
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a .elementskit-submenu-indicator {
    position: relative;
    top: auto;
    float: none;
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 0 0 6px;
    vertical-align: -1px;
    font-size: 0;
    color: inherit;
    background: currentColor;
    -webkit-mask: var(--ut-menu-ico-giu) center / contain no-repeat;
    mask: var(--ut-menu-ico-giu) center / contain no-repeat;
    transition: transform .25s var(--ut-menu-curva);
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a .elementskit-submenu-indicator::before {
    content: none;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a[aria-expanded="true"] .elementskit-submenu-indicator {
    transform: rotate(180deg);
  }
}


/* ==========================================================================
   6. PREVENTIVO (desktop)
   Pillola come i pulsanti del sito, col tondo e la freccia diagonale del tema
   che ruota passandoci sopra. Fondo #CC2E00: testo bianco a 15 px, 5,3:1
   (su #FF3600 sarebbe 3,6:1). Testo in minuscolo con l'iniziale grande, dal
   solo CSS: il markup dice «PREVENTIVO».
   ========================================================================== */
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 7px 0 20px;
  border-radius: var(--ut-r-pill, 100px);
  background: var(--ut-menu-accento-testo);
  color: #fff;
  font-family: var(--ut-menu-testo-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 6px 18px -8px rgba(204, 46, 0, .55);
  transition: background-color .25s ease, box-shadow .25s ease;
}
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button:hover,
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button:focus {
  background: var(--ut-menu-ink);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(4, 4, 1, .5);
}
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button:focus-visible {
  outline: 2px solid var(--ut-menu-navy);
  outline-offset: 3px;
}
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button-text {
  display: inline-block;
  text-transform: lowercase;
}
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button-text::first-letter {
  text-transform: uppercase;
}
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button-content-wrapper::after {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff var(--ut-menu-freccia-scura) center / 11px 11px no-repeat;
  transition: transform .35s var(--ut-menu-curva);
}
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button:hover .elementor-button-content-wrapper::after,
body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button:focus-visible .elementor-button-content-wrapper::after {
  transform: rotate(45deg);
}


/* ==========================================================================
   7. Tendina «Parco auto» (menu.js, da 1025 px in su)
   Sostituisce la tendina di tre voci: a sinistra le otto categorie su due
   colonne e «Tutto il parco auto», a destra l'offerta del mese sul blu della
   fascia del titolo. La crea menu.js dentro la voce, subito dopo il link, così
   il Tab ci entra nell'ordine giusto.
   ========================================================================== */
html.ut-menu-tendina-js .elementor-6626 .elementskit-navbar-nav > li > .elementskit-dropdown {
  display: none !important;
}
body .elementor-6626 .ut-tendina {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 30;
  width: 700px;
  /* ponte trasparente fra la voce (alta 44 px, centrata nella riga) e la
     scatola, che parte 8 px sotto la riga: il mouse passa senza chiuderla */
  padding-top: calc((var(--ut-menu-riga) - 44px) / 2 + 8px);
  transform: translateX(calc(-50% + var(--ut-tendina-dx, 0px)));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
body .elementor-6626 .ut-tendina.ut-tendina--aperta {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .18s ease;
}
body .elementor-6626 .ut-tendina .ut-tendina__scatola {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 20px;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 20, 42, .06), 0 28px 60px -20px rgba(10, 20, 42, .32);
  transform: translateY(-6px);
  transition: transform .26s var(--ut-menu-curva);
  text-align: left;
}
body .elementor-6626 .ut-tendina.ut-tendina--aperta .ut-tendina__scatola {
  transform: none;
}
body .elementor-6626 .ut-tendina .ut-tendina__sinistra {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 0 0;
}
body .elementor-6626 .ut-tendina .ut-tendina__occhiello {
  margin: 0 0 8px;
  padding: 0 12px;
  font-family: var(--ut-menu-testo-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ut-muted, #6E6E6E);
}
body .elementor-6626 .ut-tendina .ut-tendina__elenco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body .elementor-6626 .ut-tendina .ut-tendina__elenco > li {
  margin: 0;
  padding: 0;
}
body .elementor-6626 .ut-tendina a.ut-tendina__voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: var(--ut-menu-testo-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ut-menu-ink);
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
body .elementor-6626 .ut-tendina a.ut-tendina__voce::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: var(--ut-menu-accento-testo);
  -webkit-mask: var(--ut-menu-ico-destra) center / contain no-repeat;
  mask: var(--ut-menu-ico-destra) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .22s var(--ut-menu-curva);
}
body .elementor-6626 .ut-tendina a.ut-tendina__voce:hover,
body .elementor-6626 .ut-tendina a.ut-tendina__voce:focus-visible {
  background: var(--ut-menu-fresco);
  color: var(--ut-menu-ink);
}
body .elementor-6626 .ut-tendina a.ut-tendina__voce:hover::after,
body .elementor-6626 .ut-tendina a.ut-tendina__voce:focus-visible::after,
body .elementor-6626 .ut-tendina a.ut-tendina__voce[aria-current="page"]::after {
  opacity: 1;
  transform: none;
}
body .elementor-6626 .ut-tendina a.ut-tendina__voce[aria-current="page"] {
  background: var(--ut-accent-soft, rgba(255, 54, 0, .08));
  color: var(--ut-menu-accento-testo);
  font-weight: 600;
}
body .elementor-6626 .ut-tendina a:focus-visible {
  outline: 2px solid var(--ut-menu-navy);
  outline-offset: 1px;
}
/* «Tutto il parco auto»: in fondo alla colonna, separato da un filo */
body .elementor-6626 .ut-tendina a.ut-tendina__tutto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding: 14px 12px 4px;
  border-top: 1px solid var(--ut-menu-linea);
  border-radius: 0 0 12px 12px;
  font-family: var(--ut-menu-testo-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ut-menu-ink);
  text-decoration: none;
}
body .elementor-6626 .ut-tendina a.ut-tendina__tutto[aria-current="page"] {
  color: var(--ut-menu-accento-testo);
}
body .elementor-6626 .ut-tendina .ut-tendina__tondo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ut-menu-accento-testo);
  transition: transform .35s var(--ut-menu-curva), background-color .25s ease;
}
body .elementor-6626 .ut-tendina .ut-tendina__tondo::before {
  content: "";
  width: 11px;
  height: 11px;
  background: #fff;
  -webkit-mask: var(--ut-menu-ico-freccia) center / contain no-repeat;
  mask: var(--ut-menu-ico-freccia) center / contain no-repeat;
}
body .elementor-6626 .ut-tendina a:hover .ut-tendina__tondo,
body .elementor-6626 .ut-tendina a:focus-visible .ut-tendina__tondo {
  transform: rotate(45deg);
}
body .elementor-6626 .ut-tendina a.ut-tendina__tutto:hover .ut-tendina__tondo,
body .elementor-6626 .ut-tendina a.ut-tendina__tutto:focus-visible .ut-tendina__tondo {
  background: var(--ut-menu-ink);
}
/* l'offerta del mese sul blu della fascia del titolo */
body .elementor-6626 .ut-tendina a.ut-tendina__offerta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 100%;
  padding: 20px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background:
    linear-gradient(165deg, rgba(4, 10, 37, .05) 0%, rgba(4, 10, 37, .55) 100%),
    url(../wp-content/uploads/2026/03/Progetto-senza-titolo-26-768x384.jpg.webp) 70% 50% / cover no-repeat,
    var(--ut-menu-notte);
}
body .elementor-6626 .ut-tendina .ut-tendina__offerta-occhiello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ut-menu-testo-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
body .elementor-6626 .ut-tendina .ut-tendina__offerta-occhiello::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--ut-menu-accento);
  -webkit-mask: var(--ut-menu-ico-asterisco) center / contain no-repeat;
  mask: var(--ut-menu-ico-asterisco) center / contain no-repeat;
}
body .elementor-6626 .ut-tendina .ut-tendina__offerta-titolo {
  display: block;
  font-family: var(--ut-menu-titolo-font);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
}
body .elementor-6626 .ut-tendina .ut-tendina__offerta-vai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ut-menu-testo-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
body .elementor-6626 .ut-tendina .ut-tendina__offerta .ut-tendina__tondo {
  background: var(--ut-menu-accento);
}
body .elementor-6626 .ut-tendina a.ut-tendina__offerta:focus-visible {
  outline-offset: 3px;
}
body .elementor-6626 .ut-tendina a.ut-tendina__offerta[aria-current="page"] {
  box-shadow: inset 0 0 0 2px var(--ut-menu-accento);
}


/* ==========================================================================
   8. Tendina di ElementsKit senza menu.js (degrado): scatola bianca coi
   colori del sito al posto del riquadro arancio. Solo da 1025 px in su.
   ========================================================================== */
@media (min-width: 1025px) {
  html:not(.ut-menu-tendina-js) body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav .elementskit-submenu-panel {
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(10, 20, 42, .06), 0 24px 48px -18px rgba(10, 20, 42, .3);
  }
  html:not(.ut-menu-tendina-js) body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
    padding: 10px 14px;
    border-radius: 10px;
    font-family: var(--ut-menu-testo-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--ut-menu-ink);
  }
  html:not(.ut-menu-tendina-js) body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover,
  html:not(.ut-menu-tendina-js) body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus {
    background: var(--ut-menu-fresco);
    color: var(--ut-menu-ink);
  }
}


/* ==========================================================================
   9. Pannello mobile (menu.js, sotto i 1025 px)
   Un foglio blu del sito che entra da destra, a tutta altezza, con un velo
   sul resto (clic fuori = chiudi). Voci grandi in Epilogue, «Parco auto» che
   si apre sulle categorie, in fondo il preventivo e i contatti. Appeso al
   body: fuori dall'header sticky e fuori da qualunque transform.
   ========================================================================== */
.ut-menu-pannello {
  position: fixed;
  inset: 0;
  z-index: 2147482500; /* sopra WhatsApp e Complianz, sotto le finestre (2147483000) */
}
.ut-menu-pannello[hidden] {
  display: none;
}
.ut-menu-pannello .ut-menu-pannello__velo {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 37, .55);
  opacity: 0;
  transition: opacity .3s ease;
}
.ut-menu-pannello .ut-menu-pannello__foglio {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100% - 44px));
  padding: 0 24px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #fff;
  font-family: var(--ut-menu-testo-font);
  /* la foto è alta 420 px dall'alto del foglio: il velo diventa pieno
     (lo stesso navy del fondo) prima del suo bordo, a 400 px, con gli stop
     in pixel e non in percentuale, così a nessuna altezza del foglio resta
     la riga netta dove la foto finisce (prima: velo pieno solo al 62 %,
     linea visibile a 420 px sotto «Contattaci») */
  background:
    linear-gradient(180deg, rgba(10, 20, 42, .35) 0, rgba(10, 20, 42, .5) 150px, rgba(10, 20, 42, .78) 290px, var(--ut-menu-notte) 400px),
    url(../wp-content/uploads/2026/03/Progetto-senza-titolo-26-768x384.jpg.webp) 40% 0 / auto 420px no-repeat,
    var(--ut-menu-notte);
  box-shadow: -24px 0 60px -20px rgba(4, 10, 37, .6);
  transform: translateX(40px);
  opacity: 0;
  transition: transform .34s var(--ut-menu-curva), opacity .24s ease;
}
.ut-menu-pannello .ut-menu-pannello__foglio:focus {
  outline: none;
}
.ut-menu-pannello.ut-menu-pannello--aperto .ut-menu-pannello__velo {
  opacity: 1;
}
.ut-menu-pannello.ut-menu-pannello--aperto .ut-menu-pannello__foglio {
  transform: none;
  opacity: 1;
}
.ut-menu-pannello .ut-menu-pannello__testa {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}
.ut-menu-pannello a.ut-menu-pannello__logo {
  display: block;
  border-radius: 6px;
}
.ut-menu-pannello .ut-menu-pannello__logo img {
  display: block;
  width: auto;
  height: 38px;
  max-width: none;
  filter: brightness(0) invert(1);
}
.ut-menu-pannello button.ut-menu-pannello__chiudi {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .3s var(--ut-menu-curva);
}
.ut-menu-pannello button.ut-menu-pannello__chiudi:hover,
.ut-menu-pannello button.ut-menu-pannello__chiudi:focus {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
.ut-menu-pannello button.ut-menu-pannello__chiudi:hover {
  transform: rotate(90deg);
}
.ut-menu-pannello button.ut-menu-pannello__chiudi svg {
  width: 18px;
  height: 18px;
}
/* voci */
.ut-menu-pannello .ut-menu-voci {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ut-menu-pannello .ut-menu-voci > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ut-menu-pannello a.ut-menu-voce,
.ut-menu-pannello button.ut-menu-voce {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(255, 255, 255, .88);
  font-family: var(--ut-menu-titolo-font);
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: color .2s ease;
}
.ut-menu-pannello a.ut-menu-voce:hover,
.ut-menu-pannello button.ut-menu-voce:hover,
.ut-menu-pannello a.ut-menu-voce:focus,
.ut-menu-pannello button.ut-menu-voce:focus {
  background: none;
  color: #fff;
}
.ut-menu-pannello a.ut-menu-voce:focus-visible,
.ut-menu-pannello button.ut-menu-voce:focus-visible,
.ut-menu-pannello a:focus-visible,
.ut-menu-pannello button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 8px;
}
/* voce corrente: l'asterisco del marchio davanti, come nell'occhiello della fascia */
.ut-menu-pannello .ut-menu-voce[aria-current="page"],
.ut-menu-pannello .ut-menu-voce.ut-menu-sezione {
  color: #fff;
}
.ut-menu-pannello .ut-menu-voce[aria-current="page"]::before,
.ut-menu-pannello .ut-menu-voce.ut-menu-sezione::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: var(--ut-menu-accento);
  -webkit-mask: var(--ut-menu-ico-asterisco) center / contain no-repeat;
  mask: var(--ut-menu-ico-asterisco) center / contain no-repeat;
}
.ut-menu-pannello .ut-menu-voce .ut-menu-voce__giu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: transform .3s var(--ut-menu-curva), background-color .2s ease;
}
.ut-menu-pannello .ut-menu-voce .ut-menu-voce__giu::before {
  content: "";
  width: 13px;
  height: 13px;
  background: #fff;
  -webkit-mask: var(--ut-menu-ico-giu) center / contain no-repeat;
  mask: var(--ut-menu-ico-giu) center / contain no-repeat;
}
.ut-menu-pannello .ut-menu-voce[aria-expanded="true"] .ut-menu-voce__giu {
  transform: rotate(180deg);
  background: rgba(255, 255, 255, .16);
}
/* categorie del parco */
.ut-menu-pannello .ut-menu-parco {
  padding: 0 0 20px;
}
.ut-menu-pannello .ut-menu-parco[hidden] {
  display: none;
}
.ut-menu-pannello a.ut-menu-parco__tutto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 2px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.ut-menu-pannello a.ut-menu-parco__tutto::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ut-menu-accento) var(--ut-menu-freccia-bianca) center / 10px 10px no-repeat;
  transition: transform .35s var(--ut-menu-curva);
}
.ut-menu-pannello a.ut-menu-parco__tutto:hover::after {
  transform: rotate(45deg);
}
.ut-menu-pannello .ut-menu-parco__elenco {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ut-menu-pannello .ut-menu-parco__elenco > li {
  margin: 0;
  padding: 0;
}
.ut-menu-pannello a.ut-menu-parco__voce {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--ut-r-pill, 100px);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ut-menu-pannello a.ut-menu-parco__voce:hover,
.ut-menu-pannello a.ut-menu-parco__voce:focus {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.ut-menu-pannello a.ut-menu-parco__voce--offerta::before {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--ut-menu-accento);
  -webkit-mask: var(--ut-menu-ico-asterisco) center / contain no-repeat;
  mask: var(--ut-menu-ico-asterisco) center / contain no-repeat;
}
.ut-menu-pannello a.ut-menu-parco__voce[aria-current="page"] {
  border-color: #fff;
  background: #fff;
  color: var(--ut-menu-notte);
  font-weight: 600;
}
.ut-menu-pannello a.ut-menu-parco__tutto[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--ut-menu-accento);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* in fondo: preventivo e contatti */
.ut-menu-pannello .ut-menu-pannello__contatti {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
}
.ut-menu-pannello a.ut-menu-pannello__preventivo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 8px 0 24px;
  border-radius: var(--ut-r-pill, 100px);
  background: var(--ut-menu-accento);
  color: #fff;
  font-size: 19px; /* testo grande: bianco su #FF3600 passa AA (3,6:1 da 18,7 px in grassetto) */
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(255, 54, 0, .8);
  transition: background-color .25s ease;
}
.ut-menu-pannello a.ut-menu-pannello__preventivo::after {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 50%;
  background: #fff var(--ut-menu-freccia-arancio) center / 13px 13px no-repeat;
  transition: transform .35s var(--ut-menu-curva);
}
.ut-menu-pannello a.ut-menu-pannello__preventivo:hover,
.ut-menu-pannello a.ut-menu-pannello__preventivo:focus {
  background: var(--ut-menu-accento-testo);
  color: #fff;
}
.ut-menu-pannello a.ut-menu-pannello__preventivo:hover::after {
  transform: rotate(45deg);
}
.ut-menu-pannello .ut-menu-pannello__canali {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.ut-menu-pannello a.ut-menu-pannello__canale {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.ut-menu-pannello a.ut-menu-pannello__canale:hover,
.ut-menu-pannello a.ut-menu-pannello__canale:focus {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.ut-menu-pannello .ut-menu-pannello__canale svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.ut-menu-pannello .ut-menu-pannello__canale--wa svg {
  color: #25D366;
}
.ut-menu-pannello .ut-menu-pannello__canale--tel svg {
  color: #FF7A50;
}
.ut-menu-pannello .ut-menu-pannello__canale-testo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ut-menu-pannello .ut-menu-pannello__canale-nome {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.ut-menu-pannello .ut-menu-pannello__canale-numero {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}


/* ==========================================================================
   10. Sticky del tema sotto l'header
   Il tema ferma in cima alla finestra le barre laterali di archivi e scheda
   (top 20 px) e .sticky-column (top 30 px: l'indice di /faqs/, b825dfd,
   l'unico nelle pagine del sito, censite il 19 set 2026 a 1440, 1024, 768 e
   390 su statiche, archivi, filtri, schede e 404). Con l'header fisso finirebbero
   sotto. menu.js scrive --ut-menu-barra-top = min(20 + header, finestra −
   elemento − 20), cioè sotto l'header se ci stanno, altrimenti col fondo a
   20 px dal bordo (la stessa regola del modulo barra-sticky di ux.js, più
   l'header). Senza menu.js restano i valori di ux.js (archivi) o 20 px più
   l'header (scheda e indice).
   ========================================================================== */
body .page-fleets .fleets-sidebar.fleets-sidebar {
  top: var(--ut-menu-barra-top, var(--ut-barra-top, 20px));
}
body .page-fleets-single .car-single-sidebar.car-single-sidebar,
body .car-single-sidebar.car-single-sidebar {
  top: var(--ut-menu-barra-top, calc(20px + var(--ut-header-altezza)));
}
body .sticky-column.sticky-column {
  top: var(--ut-menu-barra-top, calc(20px + var(--ut-header-altezza)));
}


/* ==========================================================================
   11. Finestre aperte e movimento ridotto
   Le regole di html.ut-modale-aperta sono le stesse di ux.css e
   richiesta.css: ripetute qui per non dipendere dall'ordine dei fogli.
   ========================================================================== */
html.ut-modale-aperta,
html.ut-modale-aperta body {
  overflow: hidden !important;
}
/* Sul body quell'hidden lo rende un contenitore di scorrimento: l'header
   sticky smetterebbe di riferirsi alla finestra del browser e tornerebbe in
   cima al documento, fuori vista, dietro il velo (un salto visibile aprendo
   il pannello o una finestra a pagina scorsa). clip taglia allo stesso modo
   senza diventare un contenitore di scorrimento; lo scorrimento lo blocca già
   html. Chi non conosce clip tiene hidden. (0,2,2) contro (0,1,2) di ux.css e
   richiesta.css. */
html.ut-modale-aperta:root body {
  overflow: hidden !important;
  overflow: clip !important;
}
html.ut-modale-aperta .wa__btn_popup,
html.ut-modale-aperta .wa__popup_chat_box,
html.ut-modale-aperta #magic-cursor {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track {
    animation: none !important;
  }
  body .elementor-6626 .elementor-element.elementor-element-43ff1c0,
  body .elementor-6626 .elementor-element.elementor-element-43ff1c0 > .e-con-inner,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a::after,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a .elementskit-submenu-indicator,
  body .elementor-6626 .elementor-element.elementor-element-637ff42 .elementor-button-content-wrapper::after,
  body .elementor-6626 .ut-tendina,
  body .elementor-6626 .ut-tendina .ut-tendina__scatola,
  body .elementor-6626 .ut-tendina *,
  .ut-menu-pannello .ut-menu-pannello__velo,
  .ut-menu-pannello .ut-menu-pannello__foglio,
  .ut-menu-pannello *,
  body .elementor-6626 a.ut-preventivo-mobile,
  body .elementor-6626 button.elementskit-menu-hamburger {
    transition: none !important;
  }
  body .elementor-6626 .ut-tendina .ut-tendina__scatola,
  .ut-menu-pannello .ut-menu-pannello__foglio {
    transform: none;
  }
}


/* ==========================================================================
   12. Regole per larghezza, in fondo e in ordine decrescente
   ========================================================================== */

/* ---- da 1025 a 1180 px: voci un po' più strette ---- */
@media (min-width: 1025px) and (max-width: 1180px) {
  body .elementor-6626 .elementor-element.elementor-element-43ff1c0 > .e-con-inner {
    gap: 16px;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li {
    margin: 0;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a {
    padding-left: 11px;
    padding-right: 11px;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa .elementskit-navbar-nav > li > a::after {
    left: 11px;
    right: 11px;
  }
  body .elementor-6626 .elementor-element-76d0580 img.ata-site-logo-img {
    height: 46px;
  }
}

/* ---- fino a 1024 px: barra compatta (logo, Preventivo, hamburger) ---- */
@media (max-width: 1024px) {
  :root {
    --ut-menu-barra: 32px;
    --ut-menu-riga: 68px;
    --ut-menu-taglio: 0px;
    --ut-menu-alto: 68px;
  }
  html.ut-menu-fisso body .elementor-6626 .elementor-element.elementor-element-43ff1c0 > .e-con-inner {
    transform: none;
  }
  body .elementor-6626 .elementor-element.elementor-element-43ff1c0 > .e-con-inner {
    gap: 12px;
    padding: 0 24px;
  }
  /* topbar che scorre, lenta e sfumata ai bordi */
  body .elementor-6626 .elementor-element-f99fbd6 .topbar {
    justify-content: flex-start;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
  body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track {
    animation: scroll-left 36s linear infinite;
  }
  body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span {
    font-size: 10.5px;
  }
  body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span:nth-child(n+5) {
    display: inline-flex;
  }
  /* nel giro ogni frase porta il suo separatore, anche la prima: la cucitura
     fra le due metà resta uguale alle altre */
  body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span::before,
  body .elementor-6626 .elementor-element-f99fbd6 .topbar .topbar-track span:first-child::before {
    content: "";
    margin: 0 18px;
  }
  /* colonne: il logo prende il posto, il gruppo dei pulsanti va a destra.
     ux.css (0,5,0) con !important: qui si ripete con più specificità */
  body .elementor-6626 .elementor-element.elementor-element-43ff1c0 .elementor-element.elementor-element-4b6cc83.e-con {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
  }
  body .elementor-6626 .elementor-element.elementor-element-43ff1c0 .elementor-element.elementor-element-35a01c7.e-con {
    --width: auto;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px;
    width: auto !important;
    margin-left: auto !important;
  }
  body .elementor-6626 .elementor-element.elementor-element-43ff1c0 .elementor-element.elementor-element-35a01c7.e-con > .elementor-widget {
    width: auto;
    margin: 0 !important;
  }
  body .elementor-6626 .elementor-element-76d0580 img.ata-site-logo-img {
    height: 42px;
  }
  /* «Preventivo» compatto: lo crea ux.js (o menu.js se ux.js manca), dopo
     la prima pittura. Il suo posto è riservato da subito (niente CLS: prima
     il contenitore 35a01c7 si allargava verso sinistra all'arrivo del
     pulsante): con ut-js su <html> (lo mette la riga in linea della build
     prima dei fogli) e finché il pulsante manca, uno spazio vuoto largo
     quanto il pulsante. La larghezza è fissata dalla variabile, un poco sopra
     la misura del testo in DM Sans (109,1 px da 768, 105,1 sotto, 95,8 a
     400) e del ripiego di sistema (107,6, 103,6, 94,5): stessa larghezza
     prima e dopo l'arrivo del font. ::after con order −1 e non ::before, che
     Elementor usa per il velo dei contenitori (position absolute). */
  html.ut-js body .elementor-6626 .elementor-element.elementor-element-43ff1c0 .elementor-element.elementor-element-35a01c7.e-con:not(:has(> a.ut-preventivo-mobile))::after {
    content: "";
    position: static;
    order: -1;
    flex: 0 0 auto;
    width: var(--ut-menu-prev-l);
    height: 40px;
    pointer-events: none;
  }
  body .elementor-6626 .elementor-element-35a01c7 a.ut-preventivo-mobile {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: var(--ut-menu-prev-l);
    min-height: 42px;
    margin: 0;
    padding: 0 18px;
    border-radius: var(--ut-r-pill, 100px);
    background: var(--ut-menu-accento-testo);
    color: #fff;
    font-family: var(--ut-menu-testo-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px -8px rgba(204, 46, 0, .6);
    transition: background-color .25s ease;
  }
  body .elementor-6626 .elementor-element-35a01c7 a.ut-preventivo-mobile:hover,
  body .elementor-6626 .elementor-element-35a01c7 a.ut-preventivo-mobile:active,
  body .elementor-6626 .elementor-element-35a01c7 a.ut-preventivo-mobile:focus {
    background: var(--ut-menu-ink);
    color: #fff;
  }
  body .elementor-6626 .elementor-element-35a01c7 a.ut-preventivo-mobile:focus-visible {
    outline: 2px solid var(--ut-menu-navy);
    outline-offset: 3px;
  }
  /* hamburger: tondo chiaro con due linee, la seconda più corta */
  body .elementor-6626 .elementor-element.elementor-element-26d18fa button.elementskit-menu-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ut-menu-fresco);
    color: var(--ut-menu-ink);
    box-shadow: inset 0 0 0 1px var(--ut-menu-linea);
    transition: background-color .2s ease;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa button.elementskit-menu-hamburger:hover,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa button.elementskit-menu-hamburger:focus {
    background: var(--ut-menu-linea);
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa button.elementskit-menu-hamburger:focus-visible {
    outline: 2px solid var(--ut-menu-navy);
    outline-offset: 3px;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa button.elementskit-menu-hamburger > .ekit-menu-icon,
  body .elementor-6626 .elementor-element.elementor-element-26d18fa button.elementskit-menu-hamburger:hover > .ekit-menu-icon {
    display: block;
    width: 18px;
    height: 12px;
    font-size: 0;
    color: var(--ut-menu-ink);
    background:
      linear-gradient(currentColor, currentColor) left top / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) right bottom / 62% 2px no-repeat;
    border-radius: 1px;
  }
  body .elementor-6626 .elementor-element.elementor-element-26d18fa button.elementskit-menu-hamburger > .ekit-menu-icon::before {
    content: none;
  }
  /* col pannello nuovo quello di ElementsKit non si apre più: resta fuori
     schermo (x −100 %), ma i suoi link prenderebbero il Tab con un fuoco
     invisibile. Via dal Tab e dai lettori di schermo. */
  html.ut-menu-pannello-js body .elementor-6626 .elementor-element-26d18fa .elementskit-menu-offcanvas-elements {
    visibility: hidden !important;
  }
  /* senza menu.js (degrado) il pannello di ElementsKit si apre dentro
     l'header sticky (z-index 10000): aperto, l'header sale sopra Complianz
     (99999), come stava il pannello prima */
  html:not(.ut-menu-pannello-js) body .ekit-template-content-markup.ekit-template-content-header:has(.elementskit-menu-container.active) {
    z-index: 100000;
  }
}

/* ---- fino a 767 px ---- */
@media (max-width: 767px) {
  :root {
    --ut-menu-barra: 30px;
    --ut-menu-riga: 64px;
    --ut-menu-alto: 64px;
    --ut-menu-prev-l: 106px;
  }
  body .elementor-6626 .elementor-element.elementor-element-43ff1c0 > .e-con-inner {
    padding: 0 16px;
  }
  body .elementor-6626 .elementor-element-76d0580 img.ata-site-logo-img {
    height: 38px;
  }
  body .elementor-6626 .elementor-element-35a01c7 a.ut-preventivo-mobile {
    min-height: 40px;
    padding: 0 16px;
  }
  .ut-menu-pannello .ut-menu-pannello__foglio {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ut-menu-pannello .ut-menu-pannello__testa {
    height: 64px;
  }
}

/* ---- fino a 400 px ---- */
@media (max-width: 400px) {
  :root {
    --ut-menu-prev-l: 97px;
  }
  body .elementor-6626 .elementor-element.elementor-element-35a01c7.e-con {
    gap: 8px;
  }
  body .elementor-6626 .elementor-element-76d0580 img.ata-site-logo-img {
    height: 34px;
  }
  body .elementor-6626 .elementor-element-35a01c7 a.ut-preventivo-mobile {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }
  .ut-menu-pannello a.ut-menu-voce,
  .ut-menu-pannello button.ut-menu-voce {
    font-size: 23px;
    padding: 14px 0;
  }
  /* «Richiedi un preventivo» su una riga anche a 360: foglio un po' più
     largo, rientri e tondo più stretti; il testo resta a 19 px (bianco su
     #FF3600 passa AA solo come testo grande) */
  .ut-menu-pannello .ut-menu-pannello__foglio {
    width: calc(100% - 36px);
    padding-left: 18px;
    padding-right: 18px;
  }
  .ut-menu-pannello a.ut-menu-pannello__preventivo {
    gap: 10px;
    padding: 0 6px 0 20px;
  }
  .ut-menu-pannello a.ut-menu-pannello__preventivo::after {
    width: 36px;
    height: 36px;
    background-size: 12px 12px;
  }
}