/* generado por prospeccion/2026-10-28_imperio-cabecera-build.mjs desde index.html (portada D) */
header.hd{--f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--paper:#efebe3;--line:#d3cdc1;--gut:clamp(16px,3.6vw,56px);--f-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.16,1,.3,1);--ink:#151515;--dim:#857f75}
header.hd .mono{text-transform:none}
header.hd img{display: block; max-width: 100%; height: auto;}
header.hd a{color: inherit;}
header.hd button,header.hd input{font: inherit; color: inherit;}
header.hd .mono{font: 400 12px/1.55 var(--f-mono); letter-spacing: 0.02em;}
header.hd .sr{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;}
header.hd{position: sticky; top: 0px; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line);}
header.hd .hd-in{display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); padding: 10px var(--gut); min-height: 72px;}
header.hd .logo{display: block; flex: 0 0 auto;}
header.hd .logo img{height: 52px; width: auto;}
header.hd .nav{display: flex; gap: clamp(14px, 1.7vw, 26px); font: 500 15px/1 var(--f-sans);}
header.hd .nav a{text-decoration: none; position: relative; padding: 6px 0px;}
header.hd .nav a::after{content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: currentcolor; transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease);}
header.hd .nav a:hover::after{transform: scaleX(1);}
header.hd .srch{display: flex; align-items: center; flex: 1 1 260px; max-width: 360px; margin-left: auto; border-bottom: 1.5px solid var(--ink); min-width: 0px;}
header.hd .srch input{flex: 1 1 0%; min-width: 0px; border: 0px; background: none; padding: 8px 0px; font: 400 14px/1.2 var(--f-sans); outline: none;}
header.hd .srch input::placeholder{color: var(--dim);}
header.hd .srch button{border: 0px; background: none; padding: 8px 0px 8px 10px; cursor: pointer; font: 500 12px/1 var(--f-mono); letter-spacing: 0.04em; white-space: nowrap;}
header.hd .lang{display: flex; gap: 2px; font: 400 11.5px/1 var(--f-mono);}
header.hd .lang button{border: 0px; background: none; padding: 6px 5px; cursor: pointer; color: var(--dim);}
header.hd .lang button[aria-pressed="true"]{color: var(--ink); text-decoration: underline; text-underline-offset: 4px;}
header.hd .shop{flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); text-decoration: none; padding: 11px 18px; font: 500 14px/1 var(--f-sans); transition: background 0.3s;}
header.hd .shop:hover{background: rgb(0, 0, 0);}
header.hd .shop span{font: 400 12px var(--f-mono);}
header.hd .menu-b{display: none; border: 1px solid var(--ink); background: none; padding: 10px 12px; cursor: pointer; font: 500 12px/1 var(--f-mono); letter-spacing: 0.04em;}
header.hd .drawer{display: none;}
@media (max-width: 1180px){header.hd .nav{display: none;}}
@media (max-width: 1180px){header.hd .menu-b{display: block;}}
@media (max-width: 900px){header.hd .srch,header.hd .lang{display: none;}}
@media (max-width: 900px){header.hd .hd-in{min-height: 60px;}}
@media (max-width: 900px){header.hd .logo img{height: 42px;}}
@media (max-width: 900px){header.hd .menu-b{margin-left: auto;}}
@media (max-width: 900px){header.hd .drawer{display: block; position: fixed; inset: 60px 0px auto; background: var(--paper); border-bottom: 2px solid var(--ink); padding: 10px var(--gut) 22px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .3s var(--ease); z-index: 59;}}
@media (max-width: 900px){header.hd .drawer.open{opacity: 1; visibility: visible; transform: none;}}
@media (max-width: 900px){header.hd .drawer nav{display: grid;}}
@media (max-width: 900px){header.hd .drawer nav a{text-decoration: none; font: 500 30px/1 var(--f-sans); letter-spacing: -0.03em; padding: 12px 0px; border-bottom: 1px solid var(--line);}}
@media (max-width: 900px){header.hd .drawer .srch{display: flex; max-width: none; margin: 20px 0px 0px;}}
@media (max-width: 900px){header.hd .drawer .lang{display: flex; margin-top: 16px;}}
@media (max-width: 640px){header.hd .shop{padding: 10px 12px; font-size: 13px;}}
@media (max-width: 640px){header.hd .shop span{display: none;}}
header.hd .hd-in{min-height: 84px;}
header.hd .logo img{height: 64px; width: auto;}
header.hd .gen{position: relative;}
header.hd .gen-b,header.hd .gen-bm{border: 1.5px solid var(--ink); background: none; padding: 10px 14px; cursor: pointer; font: 500 14px/1 var(--f-sans); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; transition: background 0.3s, color 0.3s;}
header.hd .gen-b i,header.hd .gen-bm i{font-style: normal; font-size: 11px; transition: transform .3s var(--ease);}
header.hd .gen-b[aria-expanded="true"]{background: var(--ink); color: var(--paper);}
header.hd .gen-b[aria-expanded="true"] i{transform: rotate(180deg);}
header.hd .gen-p{position: absolute; left: 0px; top: calc(100% + 16px); width: min(860px,calc(100vw - 2*var(--gut))); background: var(--paper); border: 1.5px solid var(--ink); box-shadow: rgba(0, 0, 0, 0.45) 0px 30px 60px -30px; padding: 22px 24px 16px; z-index: 70;}
header.hd .gen-cols{display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 18px;}
header.hd .gen-cols b{display: block; font: 500 11.5px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); padding-bottom: 8px; border-bottom: 1px solid var(--ink); margin-bottom: 8px;}
header.hd .gen-cols a{display: block; text-decoration: none; font: 400 15px/1.25 var(--f-sans); padding: 5px 0px;}
header.hd .gen-cols a:hover{text-decoration: underline; text-underline-offset: 3px;}
header.hd .gen-ft{display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--dim);}
header.hd .gen-ft a{color: var(--ink);}
header.hd .srch.box{border: 1.5px solid var(--ink); padding: 0px 4px 0px 12px; max-width: 400px; flex: 1 1 300px; transition: background 0.3s;}
header.hd .srch.box input{padding: 10px 0px;}
header.hd .srch.box button{padding: 10px 8px;}
header.hd .hd-m{display: none;}
header.hd .drawer{inset: var(--hdh,60px) 0 auto 0;}
header.hd .gen-m summary{font: 500 30px/1 var(--f-sans); letter-spacing: -0.03em; padding: 12px 0px; border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;}
header.hd .gen-m summary::-webkit-details-marker{display: none;}
header.hd .gen-m summary::after{content: "▾"; font-size: 16px;}
header.hd .gen-m[open] summary::after{content: "▴";}
header.hd .drawer .gen-cols{grid-template-columns: repeat(2, minmax(0px, 1fr)); padding: 14px 0px 6px;}
@media (max-width: 1180px){header.hd .gen-cols{grid-template-columns: repeat(3, minmax(0px, 1fr));}}
@media (max-width: 900px){header.hd .gen{display: none;}}
@media (max-width: 900px){header.hd .hd-in{min-height: 66px;}}
@media (max-width: 900px){header.hd .logo img{height: 46px;}}
@media (max-width: 900px){header.hd .hd-m{display: flex; gap: 8px; padding: 0 var(--gut) 10px;}}
@media (max-width: 900px){header.hd .hd-m .srch.box{display: flex; flex: 1 1 0%; max-width: none; margin: 0px;}}
@media (max-width: 900px){header.hd .gen-bm{padding: 0px 12px; font-size: 13px;}}
@media (max-width: 900px){header.hd .drawer .srch.box{display: flex;}}