/* ============================================================
   header.css — Header enterprise del ecommerce (Interfaz 2026)
   Mega menú (hover) · buscador global · sticky/shrink · responsive.
   Vanilla CSS (sin Tailwind/build). Prefijo .hx- para no colisionar.
   ============================================================ */
:root{
  --hx-bg: rgba(10,10,12,.82);
  --hx-bg-solid:#0c0c0e;
  --hx-panel:#141418;
  --hx-panel2:#191920;
  --hx-line:#26262e;
  --hx-line2:#33333d;
  --hx-txt:#f0f0ee;
  --hx-mut:#a2a29e;
  --hx-faint:#6f6f6b;
  --hx-red:#e50914;
  --hx-red2:#ff3b43;
  --hx-glow:rgba(229,9,20,.18);
  --hx-ok:#2ecc79;
  --hx-h: 116px;   /* alto total desktop (util+main+nav) */
  --hx-radius:14px;
  --hx-shadow:0 10px 34px rgba(0,0,0,.5);
  /* alto reservado para el header fixed. Default en CSS = 0 CLS desde el
     primer paint; header.js lo ajusta al valor exacto en runtime. */
  --nav-h: 169px;
}
@media (max-width: 860px){ :root{ --nav-h: 135px; } }

/* ocultar navbar viejo si quedara algún residuo */
.navbar{display:none !important}

.hx{position:fixed;top:0;left:0;right:0;z-index:1000;font-family:'Barlow',system-ui,-apple-system,sans-serif;
  background:var(--hx-bg);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--hx-line);color:var(--hx-txt);
  transition:box-shadow .25s ease, background .25s ease}
.hx.hx--stuck{box-shadow:0 8px 30px rgba(0,0,0,.45);background:rgba(9,9,11,.92)}
.hx *{box-sizing:border-box}
.hx a{color:inherit;text-decoration:none}
.hx-wrap{max-width:1320px;margin:0 auto;padding:0 22px}

/* ---------- barra utilitaria (fina) ---------- */
.hx-util{border-bottom:1px solid var(--hx-line);font-size:12.5px;color:var(--hx-mut);
  transition:height .25s ease,opacity .2s ease;height:34px;overflow:hidden}
.hx-util .hx-wrap{display:flex;align-items:center;justify-content:space-between;height:34px}
.hx-util-left{display:flex;gap:20px;align-items:center}
.hx-util-left b{color:var(--hx-txt);font-weight:600}
.hx-util a:hover{color:#fff}
.hx-util-right{display:flex;gap:18px;align-items:center}
.hx-util-right .hx-tel{color:var(--hx-red2);font-weight:700}

/* ---------- barra principal ---------- */
.hx-main{transition:padding .25s ease}
.hx-main .hx-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;padding:14px 0;transition:padding .25s ease}
.hx-logo{display:flex;align-items:center;height:42px;transition:height .25s ease}
.hx-logo img{height:100%;width:auto;display:block}

/* ---------- buscador global ---------- */
.hx-search{position:relative;max-width:720px;width:100%;justify-self:center}
.hx-search-box{display:flex;align-items:center;gap:10px;height:50px;background:var(--hx-panel);
  border:1.5px solid var(--hx-line2);border-radius:12px;padding:0 8px 0 16px;transition:.18s}
.hx-search-box:focus-within{border-color:var(--hx-red);box-shadow:0 0 0 4px var(--hx-glow)}
.hx-search-ico{color:var(--hx-faint);flex:0 0 auto;display:flex}
.hx-search input{flex:1;background:none;border:0;outline:0;color:var(--hx-txt);font-size:15.5px;font-family:inherit;min-width:0}
.hx-search input::placeholder{color:var(--hx-faint)}
.hx-search-clear{display:none;background:none;border:0;color:var(--hx-faint);cursor:pointer;font-size:18px;padding:4px 6px}
.hx-search.has-val .hx-search-clear{display:block}
.hx-search-go{flex:0 0 auto;background:var(--hx-red);color:#fff;border:0;height:38px;padding:0 16px;border-radius:9px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:14px;cursor:pointer;transition:.15s}
.hx-search-go:hover{background:var(--hx-red2)}

/* dropdown de resultados */
.hx-sd{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--hx-panel);
  border:1px solid var(--hx-line2);border-radius:14px;box-shadow:var(--hx-shadow);
  overflow:hidden;display:none;max-height:70vh;overflow-y:auto}
.hx-search.open .hx-sd{display:block;animation:hxIn .16s ease}
@keyframes hxIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hx-sd-group{padding:8px 0;border-top:1px solid var(--hx-line)}
.hx-sd-group:first-child{border-top:0}
.hx-sd-h{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 4px;
  font-family:'Barlow Condensed',sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-faint)}
.hx-sd-item{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;transition:background .12s}
.hx-sd-item:hover,.hx-sd-item.hx-active{background:var(--hx-panel2)}
.hx-sd-thumb{width:40px;height:40px;border-radius:8px;object-fit:contain;background:#fff;flex:0 0 auto}
.hx-sd-ph{width:40px;height:40px;border-radius:8px;background:var(--hx-panel2);display:flex;align-items:center;justify-content:center;color:var(--hx-faint);flex:0 0 auto;font-size:16px}
.hx-sd-body{flex:1;min-width:0}
.hx-sd-name{font-size:14.5px;color:var(--hx-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-sd-name mark{background:none;color:var(--hx-red2);font-weight:700}
.hx-sd-sub{font-size:12px;color:var(--hx-mut)}
.hx-sd-price{font-size:13.5px;color:var(--hx-txt);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hx-sd-price.q{color:var(--hx-mut);font-weight:500;font-size:12.5px}
.hx-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;margin:2px 4px 2px 0;border-radius:999px;
  background:var(--hx-panel2);border:1px solid var(--hx-line);font-size:13px;color:var(--hx-mut);cursor:pointer;transition:.15s}
.hx-chip:hover{border-color:var(--hx-red);color:#fff}
.hx-sd-empty{padding:4px 16px 14px}
.hx-sd-empty h5{font-family:'Barlow Condensed',sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-faint);margin:10px 0 8px}

/* ---------- acciones derecha ---------- */
.hx-actions{display:flex;align-items:center;gap:4px}
.hx-act{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;color:var(--hx-txt);cursor:pointer;padding:8px 12px;border-radius:10px;transition:.15s;min-width:62px}
.hx-act:hover{background:var(--hx-panel2)}
.hx-act svg{stroke:currentColor}
.hx-act-l{font-size:11px;color:var(--hx-mut);font-weight:500}
.hx-act:hover .hx-act-l{color:var(--hx-txt)}
.hx-badge{position:absolute;top:2px;right:8px;background:var(--hx-red);color:#fff;font-size:10px;font-weight:800;
  min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-variant-numeric:tabular-nums}
.hx-badge:empty,.hx-badge[data-n="0"]{display:none}
.hx-act--cta{background:var(--hx-red);color:#fff;flex-direction:row;gap:7px;padding:11px 16px}
.hx-act--cta:hover{background:var(--hx-red2)}
.hx-act--cta .hx-act-l{color:#fff;font-weight:700;font-family:'Barlow Condensed',sans-serif;letter-spacing:.04em;text-transform:uppercase;font-size:14px}

/* dropdown panels (cuenta/favoritos/comparar) */
.hx-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:280px;background:var(--hx-panel);
  border:1px solid var(--hx-line2);border-radius:12px;box-shadow:var(--hx-shadow);padding:8px;display:none;z-index:1002}
.hx-act.open .hx-pop{display:block;animation:hxIn .15s ease}
.hx-pop a,.hx-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:8px;
  background:none;border:0;color:var(--hx-txt);font-size:14px;cursor:pointer;text-align:left;font-family:inherit}
.hx-pop a:hover,.hx-pop button:hover{background:var(--hx-panel2)}
.hx-pop-empty{padding:18px 14px;color:var(--hx-mut);font-size:13.5px;text-align:center}
.hx-pop-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px}
.hx-pop-item:hover{background:var(--hx-panel2)}
.hx-pop-item img{width:38px;height:38px;border-radius:6px;object-fit:contain;background:#fff}
.hx-pop-item .n{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-pop-item .x{color:var(--hx-faint);cursor:pointer;background:none;border:0;font-size:15px;width:auto;padding:2px 6px}

/* ---------- barra de categorías / mega menú ---------- */
.hx-nav{border-top:1px solid var(--hx-line);transition:height .25s ease,opacity .2s ease}
.hx-nav .hx-wrap{display:flex;align-items:stretch;gap:2px;height:46px}
.hx-navitem{position:relative;display:flex;align-items:center}
.hx-navitem>a{display:flex;align-items:center;gap:7px;height:100%;padding:0 15px;color:var(--hx-txt);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:14.5px;
  border-bottom:2px solid transparent;transition:.15s}
.hx-navitem>a .cr{color:var(--hx-red)}
.hx-navitem:hover>a{color:#fff;border-bottom-color:var(--hx-red)}
.hx-navitem .hx-navcaret{opacity:.5;transition:transform .18s}
.hx-navitem:hover .hx-navcaret{transform:rotate(180deg);opacity:1}
.hx-nav-spacer{flex:1}
.hx-nav-right{display:flex;align-items:center;gap:2px}
.hx-nav-right a{display:flex;align-items:center;gap:6px;padding:0 13px;height:100%;color:var(--hx-mut);font-size:13.5px;transition:.15s}
.hx-nav-right a:hover{color:#fff}
.hx-nav-right a.hot{color:var(--hx-red2);font-weight:600}

/* panel mega */
.hx-mega{position:absolute;top:100%;left:0;background:var(--hx-panel);border:1px solid var(--hx-line2);
  border-top:2px solid var(--hx-red);border-radius:0 0 16px 16px;box-shadow:var(--hx-shadow);
  padding:22px;min-width:760px;display:none;opacity:0;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease;z-index:1001}
.hx-navitem:hover .hx-mega,.hx-navitem:focus-within .hx-mega,.hx-mega.open{display:grid;opacity:1;transform:none}
.hx-mega{grid-template-columns:1.6fr 1fr;gap:24px}
.hx-mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 20px;align-content:start}
.hx-mega-col h4{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hx-red);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--hx-line)}
.hx-mega-col a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;color:var(--hx-mut);font-size:14px;transition:.12s}
.hx-mega-col a:hover{color:#fff;padding-left:4px}
.hx-mega-col a .cnt{font-size:11.5px;color:var(--hx-faint);font-variant-numeric:tabular-nums}
.hx-mega-col a:hover .cnt{color:var(--hx-red2)}
.hx-mega-side{display:flex;flex-direction:column;gap:14px}
.hx-mega-card{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--hx-line);
  min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  background-size:cover;background-position:center;color:#fff}
.hx-mega-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.15))}
.hx-mega-card>*{position:relative}
.hx-mega-card h5{margin:0 0 3px;font-size:17px;font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em}
.hx-mega-card p{margin:0 0 10px;font-size:12.5px;color:#d8d8d8}
.hx-mega-card .vt{align-self:flex-start;background:var(--hx-red);color:#fff;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:7px;font-family:'Barlow Condensed',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.hx-mega-brands{display:flex;flex-wrap:wrap;gap:6px}
.hx-mega-brands a{font-size:12px;color:var(--hx-mut);background:var(--hx-panel2);border:1px solid var(--hx-line);
  padding:5px 10px;border-radius:7px;transition:.12s}
.hx-mega-brands a:hover{border-color:var(--hx-red);color:#fff}
.hx-mega-brands .bl{width:100%;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hx-faint);border:0;background:none;padding:2px 0}

/* ---------- estado shrink (scroll) ---------- */
.hx--shrink .hx-util{height:0;opacity:0;border-color:transparent}
.hx--shrink .hx-main .hx-wrap{padding:8px 0}
.hx--shrink .hx-logo{height:34px}
.hx--shrink .hx-search-box{height:44px}
.hx--shrink .hx-nav .hx-wrap{height:40px}

/* ---------- móvil ---------- */
.hx-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0}
.hx-burger span{display:block;width:22px;height:2px;background:var(--hx-txt);margin:0 auto;transition:.2s;border-radius:2px}
.hx-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hx-burger.active span:nth-child(2){opacity:0}
.hx-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hx-m-only{display:none}

/* drawer móvil (reusa ids que espera router.js: mobileMenu / mobileMenuOverlay) */
.hx-drawer{position:fixed;top:0;left:0;bottom:0;width:min(84vw,360px);background:var(--hx-bg-solid);
  z-index:1100;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;border-right:1px solid var(--hx-line);padding:18px 0}
.hx-drawer.open{transform:none}
.hx-drawer-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1099;opacity:0;visibility:hidden;transition:.28s}
.hx-drawer-ov.open{opacity:1;visibility:visible}
.hx-drawer h4{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hx-red);padding:14px 22px 6px;margin:0}
.hx-drawer a{display:block;padding:11px 22px;color:var(--hx-txt);font-size:15px;border-bottom:1px solid var(--hx-line)}
.hx-drawer a:active{background:var(--hx-panel2)}

@media(max-width:1080px){
  .hx-nav .hx-wrap{overflow-x:auto;scrollbar-width:none}
  .hx-nav .hx-wrap::-webkit-scrollbar{display:none}
  .hx-mega{min-width:min(94vw,720px)}
}
@media(max-width:860px){
  .hx-util{display:none}
  .hx-nav{display:none}
  .hx-main .hx-wrap{grid-template-columns:auto auto 1fr;grid-template-areas:"burger logo actions" "search search search";gap:12px 10px;row-gap:12px}
  .hx-burger{display:flex;grid-area:burger}
  .hx-logo{grid-area:logo;height:32px}
  .hx-search{grid-area:search;max-width:none}
  .hx-actions{grid-area:actions;gap:0}
  .hx-act{min-width:auto;padding:8px}
  .hx-act-l,.hx-act--cta .hx-act-l{display:none}
  .hx-act--cta{padding:9px 10px}
  .hx-m-only{display:flex}
  .hx-d-only{display:none}
  .hx-search-go{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hx,.hx *{transition:none !important;animation:none !important}
}

/* favoritos / comparar — esquina persistente en la tarjeta */
.product-card-img{position:relative}
.pc-corner{position:absolute;top:10px;right:10px;z-index:4;display:flex;flex-direction:column;gap:7px;
  opacity:.92;transition:opacity .18s ease}
.product-card:hover .pc-corner{opacity:1}
.pc-corner-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(16,16,20,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;padding:0;
  box-shadow:0 3px 10px rgba(0,0,0,.28);transition:transform .14s ease,background .16s ease,color .16s ease,border-color .16s ease}
.pc-corner-btn:hover{transform:scale(1.1);background:rgba(16,16,20,.85)}
.pc-corner-btn.on{background:var(--hx-red);border-color:var(--hx-red);color:#fff}
.pc-corner-btn.pc-fav.on svg{fill:currentColor}
.pc-corner-btn.on{animation:pcPop .28s ease}
@keyframes pcPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
@media (max-width:640px){.pc-corner{top:7px;right:7px;gap:6px}.pc-corner-btn{width:31px;height:31px}}
@media (prefers-reduced-motion:reduce){.pc-corner-btn,.pc-corner-btn.on{animation:none;transition:none}}