/* ── Header compartido ──
   Fuente canónica: catalogo.html
   Usado por: index.html, catalogo.html
*/
.site-header{
  position:fixed;inset:0 0 auto;z-index:50;
  border-bottom:1px solid transparent;transition:.25s ease;color:#fff;
}
.site-header.scrolled{
  background:rgba(255,255,255,.96);
  color:var(--navy);
  border-color:var(--line);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.nav{
  height:86px;display:flex;align-items:center;justify-content:space-between;gap:26px;
}
.brand{
  display:flex;align-items:center;gap:13px;font-weight:900;
}
.brand img{
  width:54px;height:54px;object-fit:contain;background:#fff;border-radius:14px;padding:4px;
}
.brand-text{
  font-size:1rem;
  line-height:1.1;
}
.brand small{
  display:block;font-size:.625rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.72;
}
.nav-links{
  display:flex;align-items:center;gap:28px;font-size:.92rem;font-weight:750;
}
.nav-links a{position:relative;}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--red);transition:.2s;
}
.nav-links a:hover::after,
.nav-links a.active::after{right:0;}
.menu-toggle{
  display:none;border:0;background:transparent;color:inherit;font-size:1.8rem;cursor:pointer;
}

/* ── responsive ── */
@media (max-width:980px){
  .nav-links{
    display:none;position:absolute;top:86px;left:20px;right:20px;
    background:#fff;color:var(--navy);padding:24px;border-radius:16px;
    box-shadow:0 18px 45px rgba(7,26,51,.10);flex-direction:column;align-items:stretch;
  }
  .nav-links.open{display:flex;}
  .menu-toggle{display:block;}
}
@media (max-width:640px){
  .brand{gap:8px;}
  .brand-text{
    display:block;
    min-width:0;
    max-width:calc(100vw - 150px);
    line-height:1.1;
    white-space:normal;
    font-size:.875rem;
  }
  .brand-text small{
    display:block;
    margin-top:3px;
    font-size:.5625rem;
    letter-spacing:.08em;
    white-space:nowrap;
  }
}