/* ==========================================================================
   NAVIGAZIONE UNICA — VetratePremium
   --------------------------------------------------------------------------
   Estratto dal blocco <style> di index.html, dove viveva da solo. Finche'
   stava la', la barra completa esisteva soltanto sulle pagine in cui quel
   blocco era stato copiato a mano: 268 forme diverse su 921 pagine, e 178
   pagine con due soli link — logo e telefono — cioe' nessuna navigazione.

   TRE ERRORI DI SELETTORE, corretti qui. Erano nell'originale e sono la
   ragione per cui il menu a tendina dei prodotti non si apriva mai:

     .cn-links>li:hover.cn-mega     mancava lo spazio: significava "un li in
                                    hover CHE HA la classe cn-mega", ma
                                    .cn-mega e' un FIGLIO del li. La regola
                                    non corrispondeva a nulla e il pannello
                                    restava visibility:hidden per sempre.
     .cn-links>li>a.arr             stessa cosa: .arr e' uno <span> DENTRO
     .cn-links>li:hover>a.arr       l'<a>, non l'<a>.

   Verificato nel browser prima e dopo: prima visibility hidden e opacity 0
   con il puntatore sopra, dopo il pannello si apre.
   ========================================================================== */

/* ------------------------------------------------------------- la barra */
#corpNav{position:fixed;top:0;left:0;width:100%;z-index:910;height:64px;
  background:rgba(3,3,3,.88);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:.5px solid rgba(255,255,255,.10);
  transition:background .3s,box-shadow .3s,top .3s}

/* Dove c'e' la striscia dorata in cima la nav le lascia posto; dove non
   c'e', sale a filo. Prima era fisso a 32px e sulle pagine senza striscia
   lasciava una fascia vuota. */
body:has(.vp-barra) #corpNav{top:32px}

#corpNav.scrolled{background:rgba(3,3,3,.97);box-shadow:0 2px 32px rgba(0,0,0,.7)}
#corpNav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(196,168,74,.55) 50%,transparent 95%)}

.cn-inner{display:flex;align-items:center;gap:8px;height:64px;max-width:1280px;
  margin:0 auto;padding:0 24px}

/* --------------------------------------------------------------- il logo */
.cn-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;margin-right:auto}
.cn-logo svg{width:36px;height:36px}
.cn-logo-text{display:flex;flex-direction:column;gap:1px}
.cn-logo-name{font-family:var(--font-h);font-size:1rem;font-weight:700;letter-spacing:.14em;color:#fff;line-height:1}
.cn-logo-name span{color:var(--gold,#c4a84a);font-weight:300;letter-spacing:.2em}
.cn-logo-tag{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(196,168,74,.72)}

/* ------------------------------------------------------------- le voci */
.cn-links{display:flex;gap:0;list-style:none;align-items:stretch;height:64px;margin:0;padding:0}
.cn-links>li{position:relative;display:flex;align-items:center}
.cn-links>li>a{display:flex;align-items:center;gap:4px;height:64px;padding:0 14px;
  font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s;white-space:nowrap;
  border-bottom:2px solid transparent}
.cn-links>li>a:hover,
.cn-links>li>a.on{color:var(--gold2,#dfc06a);border-bottom-color:var(--gold,#c4a84a)}

/* la freccetta: e' uno <span> dentro l'<a> */
.cn-links>li>a .arr{font-size:.6rem;margin-left:2px;transition:transform .2s;color:rgba(196,168,74,.5)}
.cn-links>li:hover>a .arr{transform:rotate(180deg)}

.cn-tel{font-size:.78rem;color:rgba(255,255,255,.62);white-space:nowrap;text-decoration:none;padding:0 10px}
.cn-tel:hover{color:var(--gold2,#dfc06a)}
.cn-cta{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;
  background:linear-gradient(135deg,#c4a84a,#dfc06a);color:#0b0a08;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;border-radius:2px;transition:filter .2s}
.cn-cta:hover{filter:brightness(1.08)}

/* -------------------------------------------------------- menu prodotti */
/* Ancorato a SINISTRA, non centrato. Centrandolo su "Prodotti" — che sta
   all'inizio della barra — un pannello da 860px usciva dallo schermo a
   sinistra: misurato, bordo sinistro a valore negativo. Allineato al bordo
   della voce resta dentro a qualunque larghezza utile. */
.cn-mega{position:absolute;top:64px;left:0;
  background:rgba(6,5,4,.97);backdrop-filter:blur(24px);
  border:1px solid rgba(196,168,74,.15);border-top:2px solid var(--gold,#c4a84a);
  border-radius:0 0 8px 8px;padding:28px 32px;
  width:max-content;max-width:min(980px,calc(100vw - 48px));
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .22s,transform .22s,visibility .22s;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;
  z-index:950;box-shadow:0 20px 60px rgba(0,0,0,.8)}

/* LO SPAZIO CHE MANCAVA */
.cn-links>li:hover .cn-mega,
.cn-links>li:focus-within .cn-mega,
.cn-has-mega.open .cn-mega{opacity:1;visibility:visible;transform:translateY(0)}

@media(max-width:1300px){
  .cn-mega{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.mega-col h5{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold,#c4a84a);padding-bottom:8px;border-bottom:1px solid rgba(196,168,74,.12);margin:0 0 10px}
.mega-col ul{list-style:none;display:grid;gap:3px;margin:0;padding:0}
.mega-col ul li a{font-size:.8rem;color:rgba(255,255,255,.55);padding:4px 0;
  display:flex;align-items:center;gap:5px;transition:color .18s;text-decoration:none}
.mega-col ul li a:hover,.mega-col ul li a.on{color:var(--gold2,#dfc06a)}
.mega-col ul li a::before{content:'\203A';color:rgba(196,168,74,.4);flex-shrink:0}

.mega-col--promo{border-left:1px solid rgba(196,168,74,.14);padding-left:22px}
.mega-col--promo p{font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.5);margin:0 0 12px}
.mega-cta{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold,#c4a84a);text-decoration:none;
  border-bottom:1px solid rgba(196,168,74,.4);padding-bottom:2px}
.mega-cta:hover{color:var(--gold2,#dfc06a)}

/* ------------------------------------------------------------ hamburger */
#cnHam{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;flex-shrink:0}
#cnHam span{display:block;height:1.5px;width:100%;background:var(--gold,#c4a84a);
  transition:transform .25s,opacity .2s}
#cnHam.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#cnHam.on span:nth-child(2){opacity:0}
#cnHam.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* -------------------------------------------------------- pannello mobile */
#cnMob{position:fixed;top:64px;left:0;right:0;bottom:0;z-index:900;
  background:rgba(6,5,4,.985);backdrop-filter:blur(18px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px 22px 42px;display:none}
body:has(.vp-barra) #cnMob{top:96px}
#cnMob.open{display:block}
#cnMob a{display:block;padding:13px 2px;font-size:.95rem;color:rgba(255,255,255,.82);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06);min-height:44px}
#cnMob a.on{color:var(--gold2,#dfc06a)}
.cn-mob-t{font-family:var(--font-h);font-size:1.1rem;color:var(--gold,#c4a84a);
  margin:20px 0 6px;letter-spacing:.04em}
.cn-mob-t:first-child{margin-top:4px}
.cn-mob-s{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(196,168,74,.6);margin:16px 0 2px}
.cn-mob-cta{margin-top:26px;text-align:center;background:linear-gradient(135deg,#c4a84a,#dfc06a);
  color:#0b0a08!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  font-size:.78rem;border-radius:2px;border-bottom:0!important;padding:15px 18px!important}
.cn-mob-tel{text-align:center;color:rgba(255,255,255,.6)!important;border-bottom:0!important;
  font-size:.9rem;margin-top:6px}

/* ------------------------------------------------------------ larghezze */
@media(max-width:1180px){
  .cn-links>li>a{padding:0 10px;font-size:.72rem}
  .cn-tel{display:none}
}
@media(max-width:1023px){
  .cn-links{display:none}
  .cn-cta{display:none}
  #cnHam{display:flex}
  .cn-logo-tag{display:none}
}

/* Il contenuto non deve finire sotto la barra fissa. Le pagine che gia'
   gestiscono il proprio margine non vengono toccate, perche' la regola
   agisce su body e non sul primo elemento. */
body{padding-top:64px}
body:has(.vp-barra){padding-top:96px}
body:has(#corpNav[hidden]){padding-top:0}

/* Rete di sicurezza: se una vecchia barra sopravvive da qualche parte, non
   deve comparire accanto a quella nuova. */
nav:not(#corpNav).nav,
nav:not(#corpNav).main-nav{display:none!important}