/* Encabezado */
html{scroll-behavior:smooth}
@property --p{syntax:'<number>';inherits:true;initial-value:0}
#cab{height:140px}
#hdr{--p:0;--pl:var(--p);--u0:.2844px;--du:.0066px;--h0:140;--h1:64;--bw0:640;--bw1:230;position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;height:calc((var(--h0) - var(--p)*(var(--h0) - var(--h1)))*1px);box-shadow:0 2px 14px rgba(0,0,0,calc(var(--p)*.15));transition:--p .5s cubic-bezier(.4,0,.2,1),background .25s}
#hdr.compacto{--p:1}
#hdr.con-panel{background:#E3E5E9}
#hdr.con-panel nav.menu>a:not(.activo):hover,#hdr.con-panel nav.menu>button:hover,#hdr.con-panel .acc:hover{background:rgba(0,0,0,.07)}
#hdr.con-panel nav.menu [aria-expanded="true"]:not(.activo){background:rgba(0,0,0,.1)}
#hdr.sin-anim,#hdr.sin-anim *{transition:none!important}
#hdr.medir-e,#hdr.medir-c{height:auto!important;transition:none!important}
#hdr.medir-c{--pl:1}
.cab-grid{display:grid;align-items:center;align-content:start;height:100%;column-gap:calc(22px - var(--pl)*8px);grid-template-columns:calc(580*var(--u0)) 1fr auto;grid-template-areas:"logo busq acc" "nav nav nav";padding-top:10px}
#hdr.medir-c .cab-grid{height:auto;grid-template-columns:auto 1fr auto auto;grid-template-areas:"logo nav busq acc";padding-top:6px;padding-bottom:6px}
.logo{grid-area:logo;display:flex;align-items:center;width:calc(580*var(--u0));height:calc(225*var(--u0));transform:translateY(calc(var(--p)*var(--ldy,0)*1px))}
.logo-caja{flex:none}
#hdr.medir-c .logo,#hdrM.medir-c .logo{width:auto;height:auto}
.logo-caja{display:block;--u:calc(var(--u0) - var(--pl)*var(--du));--bw:calc(580 - var(--pl)*450);--bh:calc(225 - var(--pl)*45);--ox:calc(var(--pl)*6);--oy:calc(var(--pl)*6);width:calc(var(--bw)*var(--u));height:calc(var(--bh)*var(--u));background-repeat:no-repeat;background-size:calc(580*var(--u)) calc(225*var(--u));background-position:calc(var(--ox)*var(--u)*-1) calc(var(--oy)*var(--u)*-1)}
.buscador{grid-area:busq;justify-self:center;display:flex;align-items:center;gap:10px;border:1px solid #CFD3D9;border-radius:30px;background:#fff;padding:calc(10px - var(--pl)*3px) calc(18px - var(--pl)*4px);width:calc((var(--bw0) + var(--p)*(var(--bw1) - var(--bw0)))*1px);transform:translate(calc(var(--p)*var(--bdx,0)*1px),calc(var(--p)*var(--bdy,0)*1px))}
#hdr.medir-e .buscador{width:640px;max-width:100%}
#hdr.medir-c .buscador{width:230px}
.buscador svg{width:18px;height:18px;stroke:var(--gris);fill:none;stroke-width:2;flex-shrink:0}
.buscador input{border:0;outline:0;width:100%;font:inherit;font-size:14px;background:transparent}
.acciones{grid-area:acc;justify-self:end;display:flex;align-items:center;gap:6px;transform:translate(calc(var(--p)*var(--adx,0)*1px),calc(var(--p)*var(--ady,0)*1px))}
.acc{display:flex;align-items:center;gap:8px;padding:8px calc(14px - var(--pl)*4px);font-size:calc(14px - var(--pl)*1px);position:relative}
.acc svg{width:24px;height:24px;stroke:var(--texto);fill:none;stroke-width:1.6}
.acc+.acc{border-left:1px solid var(--linea)}
.badge{position:absolute;top:2px;left:30px;background:var(--rojo);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.menu-cuenta{position:absolute;right:0;top:100%;background:#fff;border:1px solid var(--linea);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.14);min-width:200px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:30}
.menu-cuenta.abierto{opacity:1;visibility:visible;transform:none}
.menu-cuenta p{padding:8px 10px;font-size:13px;color:var(--gris);overflow:hidden;text-overflow:ellipsis}
.menu-cuenta button{width:100%;text-align:left;padding:9px 10px;border-radius:6px;font-size:14px}
.menu-cuenta button:hover{background:#F2F3F5}

nav.menu{grid-area:nav;justify-self:start;display:flex;align-items:center;gap:6px;padding:8px 0;transform:translate(calc(var(--p)*var(--ndx,0)*1px),calc(var(--p)*var(--ndy,0)*1px))}
nav.menu>a,nav.menu>button{display:flex;align-items:center;gap:8px;padding:8px calc(14px - var(--pl)*4px);font-size:calc(14px - var(--pl)*1px);border-radius:6px;white-space:nowrap}
nav.menu svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
nav.menu a.activo{background:var(--rojo);color:#fff;font-weight:500}
nav.menu>a:not(.activo):hover,nav.menu>button:hover{background:#F2F3F5}

/* Paneles que se despliegan al pasar el mouse */
#paneles{position:absolute;top:100%;left:0;right:0;background:#E3E5E9;overflow:hidden;height:0;opacity:0;visibility:hidden;box-shadow:0 16px 32px rgba(0,0,0,.18);transition:height .4s cubic-bezier(.4,0,.2,1),opacity .3s,visibility 0s .4s}
#paneles.abierto{opacity:1;visibility:visible;transition:height .4s cubic-bezier(.4,0,.2,1),opacity .3s,visibility 0s}
.panel{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.panel .wrap{padding-top:14px;padding-bottom:22px}
.panel.abierto{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
#pnlInicio a,#listaCat a{display:block;padding:9px 12px;border-radius:7px;font-size:14px}
#pnlInicio a:hover,#listaCat a:hover{background:rgba(0,0,0,.07)}
#pnlInicio a{width:max-content;min-width:230px}
#listaCat{column-count:3;column-gap:18px}
#listaCat a{break-inside:avoid}