/* ==========================================================================
   Cabecera Voluntarios Nómadas: barra superior (mensaje + idioma), menú,
   mega menú de adopciones y menú móvil. Se carga después de web.css.
   ========================================================================== */

/* ---------- Barra superior ---------- */
.hd-top{background:var(--purple-deep,#3E2466);color:#fff;font-size:13px;font-weight:600;position:relative;z-index:120}
.hd-top-in{max-width:var(--maxw,1240px);margin:0 auto;padding:0 clamp(16px,4vw,48px);min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hd-msg{display:flex;align-items:center;gap:8px;min-width:0;margin:0;line-height:1.3}
.hd-msg-k{color:var(--orange-soft,#FFDCC2);font-weight:800;white-space:nowrap}
.hd-msg-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.92)}
.hd-msg-a{color:#fff;font-weight:800;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--orange,#F8801E);text-decoration-thickness:2px;text-underline-offset:4px;margin-left:4px}
.hd-msg-a:hover{color:var(--orange-soft,#FFDCC2)}

/* Selector de idioma (se abre al pulsar, no al pasar el ratón) */
.hd-lang{position:relative;flex:none}
.hd-lang-t{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 8px;border-radius:8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.hd-lang-t:hover,.hd-lang.open .hd-lang-t{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.hd-lang-t:focus-visible{outline:2px solid var(--orange,#F8801E);outline-offset:2px}
.hd-flag{width:21px;height:14px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.hd-lang-t .hd-chev{width:14px;height:14px;transition:transform .2s}
.hd-lang.open .hd-lang-t .hd-chev{transform:rotate(180deg)}
.hd-lang-m{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:#fff;border-radius:14px;padding:6px;box-shadow:0 18px 44px rgba(43,33,56,.22);display:none;z-index:300}
.hd-lang.open .hd-lang-m{display:block}
.hd-lang-m a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--ink,#2B2138);font-weight:700;font-size:14px}
.hd-lang-m a:hover{background:var(--paper,#F6F1E9)}
.hd-lang-m a.on{background:var(--lilac,#E9DCF4);color:var(--purple-deep,#3E2466)}
.hd-lang-m a:focus-visible{outline:2px solid var(--purple,#7D4BAC);outline-offset:-2px}

/* ---------- Cabecera ---------- */
.hd{position:sticky;top:0;z-index:110;background:rgba(246,241,233,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hd.scrolled{border-bottom-color:var(--line,#E4DACB);background:rgba(246,241,233,.97)}
.hd-in{position:relative;max-width:var(--maxw,1240px);margin:0 auto;padding:14px clamp(16px,4vw,48px);display:flex;align-items:center;gap:24px}
.hd-brand{display:flex;align-items:center;gap:11px;flex:none}
.hd-logo{width:46px;height:46px;border-radius:13px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(43,33,56,.1)}
.hd-logo img{width:34px;height:34px;object-fit:contain}
.hd-name{font-family:var(--disp,'Baloo 2',sans-serif);font-weight:600;font-size:18px;line-height:1;color:var(--purple-deep,#3E2466);white-space:nowrap}
.hd-name b{color:var(--orange,#F8801E);font-weight:700}

.hd-nav{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.hd-drawer-top{display:none}
.hd-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.hd-l{display:flex;align-items:center;gap:6px;font-family:var(--sans,'Raleway',sans-serif);font-weight:700;font-size:15px;color:var(--ink,#2B2138);padding:10px 14px;border-radius:100px;background:none;border:0;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
.hd-l:hover{color:var(--purple,#7D4BAC);background:rgba(125,75,172,.08)}
.hd-l[aria-current],.hd-mega.is-cur>.hd-mega-t{color:var(--purple,#7D4BAC)}
.hd-l:focus-visible{outline:2px solid var(--orange,#F8801E);outline-offset:2px}
.hd-chev{width:16px;height:16px;flex:none}
.hd-mega-t .hd-chev{transition:transform .25s}
.hd-mega.open .hd-mega-t .hd-chev{transform:rotate(180deg)}

.hd-actions{display:flex;align-items:center;gap:8px;margin-left:8px}
.hd-login{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--ink,#2B2138);padding:10px 16px;border-radius:100px;box-shadow:inset 0 0 0 2px var(--line,#E4DACB);transition:background .2s,color .2s}
.hd-login svg{width:16px;height:16px}
.hd-login:hover{background:var(--ink,#2B2138);color:var(--paper,#F6F1E9)}
.hd-donar{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--disp,'Baloo 2',sans-serif);font-weight:600;font-size:14px;color:#fff;background:var(--orange,#F8801E);padding:11px 20px;border-radius:100px;box-shadow:0 8px 22px rgba(248,128,30,.3);transition:background .2s,transform .2s}
.hd-donar svg{width:15px;height:15px;fill:#fff}
.hd-donar:hover{background:var(--orange-deep,#C95F00);transform:translateY(-2px)}
.hd-mob{display:none}
.hd-overlay{display:none}

/* ---------- Mega menú (escritorio) ---------- */
.hd-mega{position:static}
.hd-panel{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);padding-top:6px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:130;width:min(900px,calc(100vw - 32px))}
.hd-panel-in{background:#fff;border:1px solid var(--line,#E4DACB);border-radius:24px;box-shadow:0 30px 70px rgba(43,33,56,.16);padding:26px;display:grid;grid-template-columns:1fr 1fr 1fr 230px;gap:22px}
@media (min-width:1081px){
  .hd-mega:hover .hd-panel,.hd-mega.open .hd-panel,.hd-mega:focus-within .hd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
.hd-col{display:flex;flex-direction:column}
.hd-col-h{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;color:var(--purple,#7D4BAC);margin:0 0 8px 10px}
.hd-col-h svg{width:16px;height:16px;fill:var(--orange,#F8801E)}
.hd-col a{padding:8px 10px;border-radius:10px;font-weight:700;font-size:14.5px;color:var(--ink,#2B2138);transition:background .15s,color .15s}
.hd-col a:hover{background:var(--lilac,#E9DCF4);color:var(--purple-deep,#3E2466)}
.hd-col a:focus-visible{outline:2px solid var(--purple,#7D4BAC);outline-offset:-2px}
.hd-cta{background:var(--purple-deep,#3E2466);color:#fff;border-radius:18px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;transition:background .2s}
.hd-cta:hover{background:var(--purple,#7D4BAC)}
.hd-cta-paw svg{width:30px;height:30px;fill:var(--orange,#F8801E);margin-bottom:6px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.hd-cta:hover .hd-cta-paw svg{transform:rotate(-14deg) scale(1.12)}
.hd-cta b{font-size:15.5px;line-height:1.25}
.hd-cta small{font-size:12.5px;opacity:.8;line-height:1.35}

/* ---------- Tablet y móvil ---------- */
@media (max-width:1080px){
  /* sin backdrop-filter: si no, el menú fijo quedaría atrapado dentro de la cabecera */
  .hd{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(246,241,233,.98)}
  .hd-in{padding:10px 16px;gap:12px}
  .hd-logo{width:42px;height:42px;border-radius:12px}
  .hd-logo img{width:30px;height:30px}
  .hd-name{font-size:17px}

  .hd-mob{display:flex;align-items:center;gap:8px;margin-left:auto}
  .hd-donar-sm{padding:9px 14px;font-size:13.5px;box-shadow:none}
  .hd-burger{width:44px;height:44px;border:0;border-radius:12px;background:rgba(125,75,172,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex:none}
  .hd-burger span{width:20px;height:2.4px;border-radius:2px;background:var(--purple-deep,#3E2466)}
  .hd-burger:focus-visible{outline:2px solid var(--orange,#F8801E);outline-offset:2px}

  .hd-overlay{display:block;position:fixed;inset:0;background:rgba(30,16,50,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:190}
  .hd-overlay.on{opacity:1;visibility:visible}

  .hd-nav{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);height:100dvh;background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;z-index:200;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,.84,.24,1);overflow-y:auto;overscroll-behavior:contain;box-shadow:-20px 0 60px rgba(30,16,50,.2);padding-bottom:env(safe-area-inset-bottom)}
  .hd-nav.open{transform:none}
  .hd-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 22px;border-bottom:1px solid var(--line,#E4DACB);position:sticky;top:0;background:#fff;z-index:2}
  .hd-x{width:42px;height:42px;border-radius:50%;border:0;background:var(--paper,#F6F1E9);color:var(--ink,#2B2138);display:grid;place-items:center;cursor:pointer}
  .hd-x svg{width:20px;height:20px}
  .hd-x:focus-visible{outline:2px solid var(--orange,#F8801E);outline-offset:2px}

  .hd-links{flex-direction:column;align-items:stretch;gap:0;padding:6px 0}
  .hd-links>li{border-bottom:1px solid var(--line,#E4DACB)}
  .hd-l{width:100%;justify-content:space-between;font-size:18px;padding:16px 22px;border-radius:0;color:var(--ink,#2B2138)}
  .hd-l:hover{background:var(--paper,#F6F1E9)}
  .hd-l[aria-current]{color:var(--purple,#7D4BAC)}
  .hd-mega-t .hd-chev{width:20px;height:20px;color:var(--purple,#7D4BAC)}

  /* Adopciones como acordeón */
  .hd-panel{position:static;transform:none;opacity:1;visibility:visible;width:auto;padding:0;max-height:0;overflow:hidden;transition:max-height .35s ease}
  .hd-mega.open .hd-panel{max-height:900px}
  .hd-panel-in{border:0;border-radius:0;box-shadow:none;background:var(--paper,#F6F1E9);padding:16px 22px 20px;grid-template-columns:1fr 1fr;gap:14px 16px}
  .hd-col-h{margin:0 0 4px}
  .hd-col a{padding:8px 0;font-size:15.5px;border-radius:0;color:var(--ink-soft,#5c5270)}
  .hd-col a:hover{background:none;color:var(--purple,#7D4BAC)}
  .hd-col:nth-child(3){grid-column:1 / -1;border-top:1px solid var(--line,#E4DACB);padding-top:12px}
  .hd-cta{grid-column:1 / -1;flex-direction:row;justify-content:center;padding:14px;border-radius:14px}
  .hd-cta-paw svg{width:20px;height:20px;margin:0}
  .hd-cta small{display:none}

  .hd-actions{flex-direction:column;align-items:stretch;gap:10px;margin:auto 0 0;padding:22px}
  .hd-actions .hd-login,.hd-actions .hd-donar{justify-content:center;padding:14px 18px;font-size:15.5px}
  body.hd-lock{overflow:hidden}
  body.hd-lock .hd{z-index:1000}
}

@media (max-width:700px){
  .hd-top{font-size:12.5px}
  .hd-top-in{min-height:38px;padding:0 12px 0 16px;gap:10px}
  .hd-msg-x{display:none}
  .hd-lang-n{display:none}
  .hd-lang-t{padding:0 6px 0 7px;gap:5px}
}
@media (max-width:520px){
  .hd-in>.hd-brand{min-width:0;gap:9px}
  .hd-in>.hd-brand .hd-name{display:flex;flex-direction:column;gap:1px;font-size:15.5px;line-height:1.05}
  .hd-donar-sm{padding:9px 13px;font-size:13px}
}
@media (max-width:350px){
  .hd-donar-sm svg{display:none}
}
@media (prefers-reduced-motion:reduce){.hd-nav,.hd-panel,.hd-overlay,.hd-lang-t .hd-chev,.hd-mega-t .hd-chev{transition:none}}