.hdr{position:fixed; top:0; left:0; right:0; z-index:50; background:var(--black); padding-top:env(safe-area-inset-top, 0px); box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hdr .in{height:66px; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.logo{font-family:var(--display); font-size:1.3rem; letter-spacing:.06em; color:var(--white); text-decoration:none; white-space:nowrap}
.logo b{font-weight:400; color:var(--blue)}
.logo-imagen{display:block;max-width:180px;max-height:52px;object-fit:contain}
.hdr nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1.8rem; align-items:center}
.hdr nav li{position:relative}
.hdr nav a{font-family:var(--display); color:var(--white); text-decoration:none; font-size:.92rem; letter-spacing:.04em; display:block; line-height:66px; transition:opacity .2s}
.hdr nav > ul > li > a:hover{opacity:.7}
.hdr .sub{display:none; position:absolute; top:100%; left:-1rem; min-width:230px; background:var(--white); border-top:3px solid var(--blue); padding:.7rem 0; box-shadow:0 2px 5px rgba(0,0,0,.1); flex-direction:column}
.hdr li.has-sub:hover .sub,.hdr li.has-sub:focus-within .sub{display:flex}
.hdr .sub a{color:var(--text); font-size:.78rem; line-height:1.4; padding:.55rem 1.4rem}
.hdr .sub a:hover{background:rgba(0,0,0,.04); opacity:1}
@media (max-width:820px){
  .hdr .sub{display:none!important}
  .hdr nav ul{gap:1rem}
  .hdr nav a{font-size:.8rem}
}
@media (max-width:560px){
  .logo{font-size:1rem}
  .hdr nav ul{gap:.7rem}
  .hdr nav a{font-size:.7rem}
}