/* ============================================================
   HEADER — estilos (extraídos de partials/header.html). Scoped bajo .wsx-header.
   ============================================================ */
.wsx-header{
  --bg:rgba(5,13,26,.95); --bg-solid:#070F1E;
  --text:#F0F4F8; --muted:#9FB4C6; --dim:#5B7184;
  --teal:#038F8F; --cyan:#00E5FF; --green:#2FE6A8;
  --line:rgba(0,229,255,.14); --line-soft:rgba(255,255,255,.08);
  --grad-cta:linear-gradient(135deg,var(--cyan) 0%,var(--green) 100%);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; color:var(--text); line-height:1.4;
  position:fixed; top:0; left:0; right:0; width:100%; z-index:1000;
  background:var(--bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft); box-shadow:0 6px 26px -14px rgba(0,0,0,.7);
}
/* tema claro: redefine los tokens locales del header */
:root[data-theme="light"] .wsx-header{
  --bg:rgba(247,250,252,.95); --bg-solid:#FFFFFF;
  --text:#0A1628; --muted:#4A6070; --dim:#7E93A6;
  --line:rgba(2,98,98,.18); --line-soft:rgba(10,22,40,.08);
}
.wsx-header *{box-sizing:border-box}
.wsx-header a{color:inherit;text-decoration:none}
.wsx-header img{display:block}
.wsx-header .wrap{max-width:1300px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* logo — wordmark recoloreado a blanco para contraste sobre la barra navy */
.wsx-header .brand{display:flex;align-items:center;flex:none}
.wsx-header .logo-wordmark{height:30px;width:auto;filter:brightness(0) invert(1) drop-shadow(0 1px 5px rgba(0,229,255,.30))}
.wsx-header .logo-round{height:42px;width:42px;border-radius:50%;display:none}
/* tema claro: wordmark teal original (sin invertir) */
:root[data-theme="light"] .wsx-header .logo-wordmark{filter:none}

/* primary nav */
.wsx-header nav.main{display:flex;align-items:center;gap:2px}
.wsx-header .nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px 11px;border-radius:10px;
  color:var(--muted);font-weight:600;font-size:14px;transition:.2s;cursor:pointer;white-space:nowrap}
.wsx-header .nav-link:hover{color:var(--text);background:rgba(0,229,255,.06)}
.wsx-header .nav-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;transition:.25s}
.wsx-header .has-dd{position:relative}
.wsx-header .has-dd:hover .nav-link svg{transform:rotate(180deg)}
.wsx-header .dd{position:absolute;top:calc(100% + 10px);left:0;background:var(--bg-solid);
  border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 30px 70px -22px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:20}
.wsx-header .has-dd:hover .dd{opacity:1;visibility:visible;transform:none}
.wsx-header .dd.mega{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;min-width:540px}
.wsx-header .dd .dd-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);padding:4px 12px 8px;grid-column:auto}
.wsx-header .dd a{display:block;padding:9px 12px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:500;transition:.18s;white-space:nowrap}
.wsx-header .dd a:hover{color:var(--text);background:rgba(0,229,255,.08)}

/* right cluster */
.wsx-header .right{display:flex;align-items:center;gap:12px;flex:none}
.wsx-header .speak{display:flex;align-items:center;gap:8px;padding-right:12px;border-right:1px solid var(--line-soft)}
.wsx-header .speak .lbl{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.wsx-header .speak .lbl svg{width:14px;height:14px;stroke:var(--cyan);fill:none;stroke-width:2}
.wsx-header .flags{display:flex;align-items:center;gap:5px}
.wsx-header .flags a{display:block;line-height:0;border-radius:3px;overflow:hidden;opacity:.7;transition:.2s;border:1px solid transparent}
.wsx-header .flags a:hover{opacity:1;border-color:var(--cyan);transform:translateY(-1px)}
.wsx-header .flags img{width:22px;height:16px;object-fit:cover}

/* theme toggle */
.wsx-header .btn-theme{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;flex:none;transition:.2s}
.wsx-header .btn-theme:hover{background:rgba(0,229,255,.08);border-color:var(--cyan)}
.wsx-header .btn-theme svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

/* buttons */
.wsx-header .btn-hire{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px solid rgba(255,255,255,.22);
  color:var(--text);font-weight:700;font-size:13px;padding:9px 14px;border-radius:999px;cursor:pointer;font-family:inherit;transition:.25s;white-space:nowrap}
:root[data-theme="light"] .wsx-header .btn-hire{border-color:rgba(2,98,98,.35)}
.wsx-header .btn-hire:hover{border-color:var(--green);color:var(--green)}
.wsx-header .btn-hire svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.wsx-header .btn-cal{display:inline-flex;align-items:center;gap:6px;background:var(--grad-cta);color:#02201d;
  font-weight:700;font-size:13px;padding:10px 16px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;
  box-shadow:0 10px 26px -12px rgba(0,229,255,.6);transition:.25s;white-space:nowrap}
.wsx-header .btn-cal:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(47,230,168,.7)}
.wsx-header .btn-cal svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}

/* hamburger */
.wsx-header .burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex:none}
.wsx-header .burger span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;border-radius:2px;transition:.3s}
.wsx-header.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.wsx-header.open .burger span:nth-child(2){opacity:0}
.wsx-header.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* selector de idioma — dropdown compacto (siempre visible, no desborda) */
.wsx-header .lang{position:relative;flex:none}
.wsx-header .lang-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--text);font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap}
.wsx-header .lang-btn:hover{border-color:var(--cyan);background:rgba(0,229,255,.06)}
.wsx-header .lang-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.wsx-header .lang-dd{right:0;left:auto;min-width:190px}
.wsx-header .lang-dd a{display:flex;align-items:center;gap:10px}
.wsx-header .lang-dd img{width:20px;height:15px;border-radius:2px;flex:none}
.wsx-header .lang-dd a[aria-current]{color:var(--text);background:rgba(0,229,255,.08)}

/* mobile drawer */
.wsx-header .drawer{display:none}
@media(max-width:1240px){
  .wsx-header nav.main,.wsx-header .right .lang,.wsx-header .right .btn-hire,.wsx-header .right .btn-cal{display:none}
  .wsx-header .burger{display:block}
  .wsx-header .logo-wordmark{display:none}
  .wsx-header .logo-round{display:block}
  .wsx-header .drawer{display:block;max-height:0;overflow:hidden;transition:max-height .35s ease;background:var(--bg-solid);border-top:1px solid var(--line-soft)}
  .wsx-header.open .drawer{max-height:85vh;overflow:auto}
  .wsx-header .drawer .inner{padding:10px 24px 26px}
  .wsx-header .drawer .d-link{display:block;padding:13px 4px;color:var(--text);font-size:16px;font-weight:600;border-bottom:1px solid var(--line-soft)}
  .wsx-header .drawer .d-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);padding:16px 4px 4px}
  .wsx-header .drawer .d-sub a{display:block;padding:9px 12px;color:var(--muted);font-size:14px}
  .wsx-header .drawer .d-speak{display:flex;align-items:center;gap:10px;padding:18px 4px 6px;color:var(--muted);font-size:14px}
  .wsx-header .drawer .d-speak .flags{margin-left:auto}
  .wsx-header .drawer .d-cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
  .wsx-header .drawer .btn-hire,.wsx-header .drawer .btn-cal{display:inline-flex;flex:1;justify-content:center}
}