.elementor-1171 .elementor-element.elementor-element-b9f71f3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1171 .elementor-element.elementor-element-b9f71f3:not(.elementor-motion-effects-element-type-background), .elementor-1171 .elementor-element.elementor-element-b9f71f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00000000;}.elementor-1171 .elementor-element.elementor-element-9c09dec{--display:flex;--justify-content:center;}.elementor-1171 .elementor-element.elementor-element-9c09dec:not(.elementor-motion-effects-element-type-background), .elementor-1171 .elementor-element.elementor-element-9c09dec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1171 .elementor-element.elementor-element-b06c929{text-align:start;}.elementor-1171 .elementor-element.elementor-element-b06c929 img{width:35%;}.elementor-1171 .elementor-element.elementor-element-15458a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1171 .elementor-element.elementor-element-3001cf8{--display:flex;--justify-content:center;}.elementor-1171 .elementor-element.elementor-element-3001cf8:not(.elementor-motion-effects-element-type-background), .elementor-1171 .elementor-element.elementor-element-3001cf8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-1171 .elementor-element.elementor-element-b9e4a42 .elementor-icon-wrapper{text-align:end;}.elementor-1171 .elementor-element.elementor-element-b9e4a42.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-4044f87 );}.elementor-1171 .elementor-element.elementor-element-b9e4a42.elementor-view-framed .elementor-icon, .elementor-1171 .elementor-element.elementor-element-b9e4a42.elementor-view-default .elementor-icon{color:var( --e-global-color-4044f87 );border-color:var( --e-global-color-4044f87 );}.elementor-1171 .elementor-element.elementor-element-b9e4a42.elementor-view-framed .elementor-icon, .elementor-1171 .elementor-element.elementor-element-b9e4a42.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-4044f87 );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-93091fd */<style>
:root {
  --bg:         #0b0708;
  --surface:    #130d0f;
  --surface2:   #1a1214;
  --bord:       #7a2535;
  --bord-light: #9e3347;
  --gold:       #c9a86c;
  --cream:      #ede5d8;
  --text:       #e2d8cc;
  --muted:      #7a6b6e;
  --line:       rgba(255,255,255,0.07);
  --font-d:     'Cormorant Garamond', serif;
  --font-b:     'Jost', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

::selection { background: var(--bord); color: var(--cream); }

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1000;
}

/* Bottoni condivisi */
.btn-primary {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--bord);
  padding: 14px 32px;
  text-decoration: none;
  cursor: none;
  transition: background 0.3s;
  display: inline-block;
}
.btn-primary:hover { background: var(--bord-light); }

.btn-ghost {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  cursor: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.3s;
}
.btn-ghost::after {
  content: '';
  width: 28px; height: 1px;
  background: var(--muted);
  transition: width 0.3s, background 0.3s;
}
.btn-ghost:hover { color: var(--cream); }
.btn-ghost:hover::after { width: 44px; background: var(--cream); }

/* Etichetta sezione (linea + testo) */
.sec-label {
  font-family: var(--font-b);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bord);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sec-label::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--bord);
  flex-shrink: 0;
}

/* Animazioni reveal (scroll-triggered via JS) */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
}
.reveal-left.visible { opacity: 1; transform: none; }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
}
.reveal-right.visible { opacity: 1; transform: none; }

/* Ritardi staggerati */
.d1 { transition-delay: 0.1s !important; }
.d2 { transition-delay: 0.2s !important; }
.d3 { transition-delay: 0.3s !important; }
.d4 { transition-delay: 0.4s !important; }
</style>


<div id="cursor"></div>
<div id="cursor-ring"></div>

<style>
#cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--bord);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width 0.3s cubic-bezier(.16,1,.3,1),
              height 0.3s cubic-bezier(.16,1,.3,1),
              background 0.3s;
}
#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(122,37,53,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width 0.4s cubic-bezier(.16,1,.3,1),
              height 0.4s cubic-bezier(.16,1,.3,1),
              opacity 0.3s;
}
/* Trasformazione su hover link/button */
body:has(a:hover) #cursor,
body:has(button:hover) #cursor {
  width: 6px; height: 6px;
  background: var(--gold);
}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring {
  width: 52px; height: 52px;
  border-color: var(--gold);
}
</style>

<script>
// ── 1. CURSOR CUSTOM ────────────────────────────────────────────────
const cursor = document.getElementById('cursor');
const ring   = document.getElementById('cursor-ring');
let mx = 0, my = 0, rx = 0, ry = 0;

document.addEventListener('mousemove', e => {
  mx = e.clientX; my = e.clientY;
  cursor.style.left = mx + 'px';
  cursor.style.top  = my + 'px';
});

// Anello con inerzia (lag effect)
(function animRing() {
  rx += (mx - rx) * 0.12;
  ry += (my - ry) * 0.12;
  ring.style.left = rx + 'px';
  ring.style.top  = ry + 'px';
  requestAnimationFrame(animRing);
})();


// ── 5. REVEAL ALLO SCROLL (IntersectionObserver) ────────────────────
const revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
const obs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      obs.unobserve(e.target);
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });

revealEls.forEach(el => obs.observe(el));

// ── 6. CONTATORI ANIMATI ─────────────────────────────────────────────
const counters = document.querySelectorAll('.counter');
const cObs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (!e.isIntersecting) return;
    const el     = e.target;
    const target = +el.dataset.target;
    const dur    = 1600; // ms
    const start  = performance.now();

    (function tick(now) {
      const p    = Math.min((now - start) / dur, 1);
      const ease = 1 - Math.pow(1 - p, 4); // easing quartico
      el.textContent = Math.round(ease * target);
      if (p < 1) requestAnimationFrame(tick);
    })(start);

    cObs.unobserve(el);
  });
}, { threshold: 0.5 });

counters.forEach(c => cObs.observe(c));


</script>
<!-- HTML -->
<nav id="navbar">
  <div class="nav-logo">
  <img src="https://vinidibbsas.com/wp-content/uploads/2026/04/logo_wRisorsa-3@4x.png">
</div>
  <ul class="nav-links">
    <li><a href="#about">Chi siamo</a></li>
    <li><a href="https://vinidibbsas.com/le-nostre-aziende/">Aziende</a></li>
    <li><a href="#services">Servizi</a></li>
    <li><a href="#process">Degustazioni</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>
  <a href="#cta" class="nav-cta">Contattaci</a>
</nav>

<style>
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 58px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.6s, padding 0.5s, backdrop-filter 0.6s;
}
nav.scrolled {
  background: rgba(11,7,8,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 18px 60px;
  border-bottom: 1px solid var(--line);
}
/* Logo container */
.nav-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
  padding: 0;
  margin: 0;
}

/* Link del logo */
.nav-logo a {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

/* Immagine logo */
.nav-logo img {
  height: 60px;          /* Altezza logo desktop */
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Hover elegante (opzionale ma professionale) */
.nav-logo img:hover {
  opacity: 0.85;
}

/* Tablet */
@media (max-width: 1024px) {
  .nav-logo {
    height: 50px;
  }

  .nav-logo img {
    height: 50px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .nav-logo {
    height: 42px;
  }

  .nav-logo img {
    height: 42px;
  }
}

/* Sticky header (se presente) */
.header.scrolled .nav-logo img {
  height: 48px;
}
.nav-logo span { color: var(--bord); }
.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
  cursor: none;
}
.nav-links a:hover { color: #ede5d8; }
.nav-cta {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ede5d8;
  text-decoration: none;
  padding: 10px 22px;
  border: 1px solid rgba(122,37,53,0.6);
  transition: background 0.3s, border-color 0.3s;
  cursor: none;
}
.nav-cta:hover { background: var(--bord); border-color: var(--bord); }
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-96ee207 */<style>
:root {
  --bg:         #0b0708;
  --surface:    #130d0f;
  --surface2:   #1a1214;
  --bord:       #7a2535;
  --bord-light: #9e3347;
  --gold:       #c9a86c;
  --cream:      #ede5d8;
  --text:       #e2d8cc;
  --muted:      #7a6b6e;
  --line:       rgba(255,255,255,0.07);
  --font-d:     'Cormorant Garamond', serif;
  --font-b:     'Jost', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

::selection { background: var(--bord); color: var(--cream); }

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1000;
}

/* Bottoni condivisi */
.btn-primary {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--bord);
  padding: 14px 32px;
  text-decoration: none;
  cursor: none;
  transition: background 0.3s;
  display: inline-block;
}
.btn-primary:hover { background: var(--bord-light); }

.btn-ghost {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  cursor: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.3s;
}
.btn-ghost::after {
  content: '';
  width: 28px; height: 1px;
  background: var(--muted);
  transition: width 0.3s, background 0.3s;
}
.btn-ghost:hover { color: var(--cream); }
.btn-ghost:hover::after { width: 44px; background: var(--cream); }

/* Etichetta sezione (linea + testo) */
.sec-label {
  font-family: var(--font-b);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bord);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sec-label::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--bord);
  flex-shrink: 0;
}

/* Animazioni reveal (scroll-triggered via JS) */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
}
.reveal-left.visible { opacity: 1; transform: none; }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
}
.reveal-right.visible { opacity: 1; transform: none; }

/* Ritardi staggerati */
.d1 { transition-delay: 0.1s !important; }
.d2 { transition-delay: 0.2s !important; }
.d3 { transition-delay: 0.3s !important; }
.d4 { transition-delay: 0.4s !important; }
</style>


<div id="cursor"></div>
<div id="cursor-ring"></div>

<style>
#cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--bord);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width 0.3s cubic-bezier(.16,1,.3,1),
              height 0.3s cubic-bezier(.16,1,.3,1),
              background 0.3s;
}
#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(122,37,53,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width 0.4s cubic-bezier(.16,1,.3,1),
              height 0.4s cubic-bezier(.16,1,.3,1),
              opacity 0.3s;
}
/* Trasformazione su hover link/button */
body:has(a:hover) #cursor,
body:has(button:hover) #cursor {
  width: 6px; height: 6px;
  background: var(--gold);
}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring {
  width: 52px; height: 52px;
  border-color: var(--gold);
}
</style>

<script>
// ── 1. CURSOR CUSTOM ────────────────────────────────────────────────
const cursor = document.getElementById('cursor');
const ring   = document.getElementById('cursor-ring');
let mx = 0, my = 0, rx = 0, ry = 0;

document.addEventListener('mousemove', e => {
  mx = e.clientX; my = e.clientY;
  cursor.style.left = mx + 'px';
  cursor.style.top  = my + 'px';
});

// Anello con inerzia (lag effect)
(function animRing() {
  rx += (mx - rx) * 0.12;
  ry += (my - ry) * 0.12;
  ring.style.left = rx + 'px';
  ring.style.top  = ry + 'px';
  requestAnimationFrame(animRing);
})();


// ── 5. REVEAL ALLO SCROLL (IntersectionObserver) ────────────────────
const revealEls = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
const obs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      obs.unobserve(e.target);
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });

revealEls.forEach(el => obs.observe(el));

// ── 6. CONTATORI ANIMATI ─────────────────────────────────────────────
const counters = document.querySelectorAll('.counter');
const cObs = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (!e.isIntersecting) return;
    const el     = e.target;
    const target = +el.dataset.target;
    const dur    = 1600; // ms
    const start  = performance.now();

    (function tick(now) {
      const p    = Math.min((now - start) / dur, 1);
      const ease = 1 - Math.pow(1 - p, 4); // easing quartico
      el.textContent = Math.round(ease * target);
      if (p < 1) requestAnimationFrame(tick);
    })(start);

    cObs.unobserve(el);
  });
}, { threshold: 0.5 });

counters.forEach(c => cObs.observe(c));


</script>
<!-- HTML -->
<nav id="navbar">
  <div class="nav-logo">
  <img src="https://vinidibbsas.com/wp-content/uploads/2026/04/logo_wRisorsa-3@4x.png">
</div>
  <ul class="nav-links">
    <li><a href="#about">Chi siamo</a></li>
    <li><a href="https://vinidibbsas.com/le-nostre-aziende/">Aziende</a></li>
    <li><a href="#services">Servizi</a></li>
    <li><a href="#process">Degustazioni</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>
  <a href="#cta" class="nav-cta">Contattaci</a>
</nav>

<style>
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 58px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.6s, padding 0.5s, backdrop-filter 0.6s;
}
nav.scrolled {
  background: rgba(11,7,8,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 18px 60px;
  border-bottom: 1px solid var(--line);
}
/* Logo container */
.nav-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
  padding: 0;
  margin: 0;
}

/* Link del logo */
.nav-logo a {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

/* Immagine logo */
.nav-logo img {
  height: 60px;          /* Altezza logo desktop */
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Hover elegante (opzionale ma professionale) */
.nav-logo img:hover {
  opacity: 0.85;
}

/* Tablet */
@media (max-width: 1024px) {
  .nav-logo {
    height: 50px;
  }

  .nav-logo img {
    height: 50px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .nav-logo {
    height: 42px;
  }

  .nav-logo img {
    height: 42px;
  }
}

/* Sticky header (se presente) */
.header.scrolled .nav-logo img {
  height: 48px;
}
.nav-logo span { color: var(--bord); }
.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
  cursor: none;
}
.nav-links a:hover { color: #ede5d8; }
.nav-cta {
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ede5d8;
  text-decoration: none;
  padding: 10px 22px;
  border: 1px solid rgba(122,37,53,0.6);
  transition: background 0.3s, border-color 0.3s;
  cursor: none;
}
.nav-cta:hover { background: var(--bord); border-color: var(--bord); }
</style>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9f71f3 *//* ── HEADER BASE ─────────────────────────────────────── */
#header {
  height: 100px;
  padding: 0 48px !important;
  background: transparent !important;
  border-bottom: 1px solid transparent;
  transition:
    height 0.4s cubic-bezier(.16,1,.3,1),
    background 0.5s cubic-bezier(.16,1,.3,1),
    border-color 0.4s,
    backdrop-filter 0.5s;
  z-index: 9990 !important;
}

/* Stato scrolled (classe aggiunta via JS) */
#header.bb-scrolled {
  height: 70px;
  background: rgba(11, 7, 8, 0.92) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--bord);
}

/* ── LOGO ────────────────────────────────────────────── */
#header .elementor-widget-image img {
  height: 50px;
  width: auto;
  transition: height 0.4s cubic-bezier(.16,1,.3,1);
}
#header.bb-scrolled .elementor-widget-image img {
  height: 35px;
}

/* ── BURGER ICON ─────────────────────────────────────── */
#header .elementor-widget-icon .elementor-icon svg {
  width: 30px;
  height: 30px;
  fill: white;
  transition: fill 0.3s;
  cursor: none;
}
#header .elementor-widget-icon:hover .elementor-icon svg {
  fill: var(--cream);
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 960px) {
  #header {
    padding: 0 20px !important;
  }
}
@media (max-width: 480px) {
  #header {
    padding: 0 20px !important;
    height: 60px;
  }
  #header.bb-scrolled {
    height: 52px;
  }
}

/* Elimina lo spacer che Elementor sticky crea automaticamente */
#header.elementor-sticky__spacer {
  display: none !important;
}

/* Forza l'header sempre visibile e a top 0 */
#header {
  visibility: visible !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  z-index: 9990 !important;
}

.admin-bar #header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar #header {
    top: 46px !important;
  }
}
@media (max-width: 1024px) {
  #header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  #header > .e-con {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Logo a sinistra */
  .elementor-element-9c09dec {
    flex: 1 !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /* Widget HTML (cursore ecc.) — non occupa spazio */
  .elementor-element-15458a9 {
    flex: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Hamburger a destra */
  .elementor-element-3001cf8 {
    flex: 0 !important;
    padding: 0 38px;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }
}

@media (max-width: 1024px) {
  .elementor-element-b06c929 img {
    height: 28px !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .elementor-element-b06c929 img {
    height: 22px !important;
    width: auto !important;
  }
}
#ast-scroll-top {
  background: #7a2535 !important;
  border: 1px solid #9e3347 !important;
  color: #ede5d8 !important;
  border-radius: 0 !important;
  transition: background 0.3s, border-color 0.3s !important;
}

#ast-scroll-top:hover {
  background: #9e3347 !important;
  border-color: #c9a86c !important;
}

#ast-scroll-top .ast-arrow-svg path {
  fill: #ede5d8 !important;
}/* End custom CSS */