/* ── Hide Astra default header ── */
.ast-primary-header-bar,.main-header-bar,.site-header,#masthead,
.ast-above-header-bar,.ast-below-header-bar{display:none!important;}
body{padding-top:78px!important;}
@media(max-width:900px){body{padding-top:62px!important;}}

/* ═══ VALERO CUSTOM HEADER ═══ */
#vlhdr{position:fixed;top:0;left:0;right:0;z-index:999999;
background:#6B1E2E;border-bottom:3px solid #C9A961;
box-shadow:0 4px 24px rgba(74,19,32,.6);height:78px;
font-family:Montserrat,sans-serif;
transition:height .35s ease,background .35s ease;}
#vlhdr.scrolled{height:62px;background:rgba(74,19,32,.97);
backdrop-filter:blur(14px);box-shadow:0 8px 32px rgba(74,19,32,.8);}
#vlhdr .hi{max-width:1280px;margin:0 auto;padding:0 28px;
height:100%;display:flex;align-items:center;
justify-content:space-between;gap:16px;}

/* Logo */
.vl-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;transition:opacity .2s;}
.vl-logo:hover{opacity:.85;}
.vl-logo img{height:46px;width:auto;display:block;object-fit:contain;
filter:invert(1) brightness(1.1);transition:filter .3s,height .3s;}
#vlhdr.scrolled .vl-logo img{height:38px;}
.vl-logo:hover img{filter:invert(1) sepia(.5) hue-rotate(330deg) saturate(2.5);}

/* Nav */
.vl-nav{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px;}
.vl-nav>li{position:relative;}
.vl-nav>li>a{display:block;color:rgba(255,255,255,.88);font-size:11px;font-weight:700;
letter-spacing:1.5px;text-transform:uppercase;padding:9px 13px;
text-decoration:none;border-radius:2px;white-space:nowrap;
font-family:Montserrat,sans-serif;
transition:color .2s,background .2s;}
.vl-nav>li>a:hover,.vl-nav>li.active>a{color:#C9A961;background:rgba(201,169,97,.12);}
.vl-nav>li.hd>a::after{content:” ▾”;font-size:8px;opacity:.65;}

/* Dropdown */
.vl-drop::before{content:””;position:absolute;top:-25px;left:0;right:0;height:25px;}
.vl-drop{position:absolute;top:calc(100% + 12px);left:0;
background:#fff;border-radius:3px;
box-shadow:0 16px 48px rgba(0,0,0,.18);
border-top:3px solid #C9A961;min-width:215px;padding:6px 0;
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:all .25s ease;z-index:1000000;pointer-events:none;}
.vl-nav>li:hover .vl-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.vl-drop a{display:flex!important;align-items:center!important;gap:10px!important;
padding:11px 18px!important;color:#2D2D2D!important;font-size:11px!important;
font-weight:700!important;letter-spacing:1px!important;
text-transform:uppercase!important;text-decoration:none!important;
background:transparent!important;border-radius:0!important;
border-bottom:1px solid rgba(0,0,0,.06);
font-family:Montserrat,sans-serif!important;
transition:background .18s,color .18s!important;}
.vl-drop a:last-child{border-bottom:none!important;}
.vl-drop a:hover{background:#F9F4EE!important;color:#6B1E2E!important;}
.vl-drop a .di{font-size:16px;flex-shrink:0;}
.vl-drop .sep{border-top:2px solid #f0e8d5!important;margin-top:4px;
color:#6B1E2E!important;font-weight:800!important;}

/* Right */
.vl-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.vl-ico{display:flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:50%;
color:rgba(255,255,255,.88);text-decoration:none;font-size:18px;
background:rgba(255,255,255,.1);transition:all .2s;
border:1px solid rgba(255,255,255,.08);}
.vl-ico:hover{background:rgba(201,169,97,.2);color:#C9A961;border-color:rgba(201,169,97,.3);}
.vl-wa{display:flex;align-items:center;gap:8px;background:#25D366;
color:#fff!important;font-family:Montserrat,sans-serif!important;
font-weight:700!important;font-size:10.5px;letter-spacing:1.5px;
text-transform:uppercase;padding:10px 18px;border-radius:3px;
text-decoration:none!important;white-space:nowrap;
transition:background .25s,transform .2s;
box-shadow:0 3px 12px rgba(37,211,102,.35);}
.vl-wa:hover{background:#1da855!important;transform:translateY(-1px);}

/* Burger */
.vl-burger{display:none;flex-direction:column;gap:5px;
background:none;border:none;cursor:pointer;padding:7px;flex-shrink:0;}
.vl-burger span{display:block;width:23px;height:2px;background:#fff;
transition:all .3s ease;border-radius:2px;transform-origin:center;}
.vl-burger.on span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.vl-burger.on span:nth-child(2){opacity:0;transform:scaleX(0);}
.vl-burger.on span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* Mobile menu */
.vl-mob{display:none;position:fixed;top:78px;left:0;right:0;bottom:0;
background:rgba(74,19,32,.98);backdrop-filter:blur(14px);
z-index:999998;padding:20px 20px 60px;
flex-direction:column;gap:0;overflow-y:auto;
border-top:2px solid rgba(201,169,97,.3);}
.vl-mob.on{display:flex;}
@media(max-width:900px){.vl-mob{top:62px;}}
.vl-mob a{display:block;color:rgba(255,255,255,.9);
font-family:Montserrat,sans-serif;font-weight:700;
font-size:.95rem;letter-spacing:2px;text-transform:uppercase;
padding:15px 4px;text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.07);transition:color .2s,padding-left .2s;}
.vl-mob a:hover{color:#C9A961;padding-left:8px;}
.vl-mob a.sub{padding-left:20px!important;font-size:.8rem!important;
letter-spacing:1.5px!important;font-weight:600!important;
color:rgba(201,169,97,.8)!important;}
.vl-mob a.sub:hover{color:#C9A961!important;padding-left:28px!important;}
.vl-mob a.mwa{margin-top:20px;background:#25D366;
padding:16px 20px!important;border-radius:3px!important;
text-align:center;border-bottom:none!important;
color:#fff!important;box-shadow:0 4px 16px rgba(37,211,102,.35);}

/* Responsive breakpoints */
@media(max-width:1100px){
.vl-nav>li>a{font-size:10px;padding:8px 10px;}
#vlhdr .hi{padding:0 20px;}}
@media(max-width:900px){
.vl-nav,.vl-wa,.vl-ico{display:none!important;}
.vl-burger{display:flex!important;}}
@media(max-width:480px){
#vlhdr .hi{padding:0 14px;}
.vl-logo img{height:36px;}}

🛒
👤
📱 WhatsApp

(function(){
if(document.getElementById(“vlhdr-init”)) return;
var s=document.createElement(“span”);s.id=”vlhdr-init”;document.body.appendChild(s);
var h=document.getElementById(“vlhdr”);
var b=document.getElementById(“vlBurger”);
var m=document.getElementById(“vlMob”);
if(!h||!b||!m) return;
window.addEventListener(“scroll”,function(){
h.classList[window.pageYOffset>50?”add”:”remove”](“scrolled”);
},{passive:true});
b.addEventListener(“click”,function(){
var open=m.classList.toggle(“on”);
b.classList.toggle(“on”);
b.setAttribute(“aria-expanded”,open?”true”:”false”);
b.setAttribute(“aria-label”,open?”Close menu”:”Open menu”);
document.body.style.overflow=open?”hidden”:””;
});
m.querySelectorAll(“a”).forEach(function(a){
a.addEventListener(“click”,function(){
m.classList.remove(“on”);b.classList.remove(“on”);
b.setAttribute(“aria-expanded”,”false”);
document.body.style.overflow=””;
});
});
document.addEventListener(“keydown”,function(e){
if(e.key===”Escape”&&m.classList.contains(“on”)){
m.classList.remove(“on”);b.classList.remove(“on”);
b.setAttribute(“aria-expanded”,”false”);document.body.style.overflow=””;
}
});
})();