/* ============================================================
   Egoki — Header compartido (estilo "isla" translúcida, nav en
   píldoras conectadas tipo metaball). Se inyecta en todas las
   páginas mediante egoki-header.js.
   - Transparente e integrado con el fondo por defecto.
   - Al hacer scroll pasa a un panel esmerilado claro.
   - Logo automático según el fondo (claro/oscuro).
   ============================================================ */
:root{
  --egk-navy:#001535; --egk-ink:#0a1f45; --egk-gold:#DFA902; --egk-gold-deep:#8A6300;
  --egk-cream:#FBFAF6; --egk-line:#E6E9F0;
}
.egk-header,.egk-header *{box-sizing:border-box}
.egk-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; gap:16px;
  padding:16px clamp(16px,3.4vw,40px);
  color:var(--egk-ink); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease, color .3s ease;
}
.egk-header.egk-chrome-light{ color:#fff; }
/* Sin fondo (páginas oscuras): el fondo dinámico se ve a través del header; al hacer scroll solo compacta un poco */
.egk-header.egk-scrolled{ padding-top:10px; padding-bottom:10px; }
/* Páginas claras (egk-solid): al hacer scroll aparece un panel esmerilado claro para mantener legible el header */
.egk-header.egk-solid.egk-scrolled{
  background:rgba(251,250,246,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 8px 30px -20px rgba(0,21,53,.5);
}
.egk-header a{ text-decoration:none; }
.egk-header .egk-brand,.egk-header .egk-acct{ color:inherit; }
.egk-header a:focus-visible,.egk-header button:focus-visible{ outline:3px solid var(--egk-gold); outline-offset:3px; border-radius:10px; }

/* ---- izquierda: marca + divisor + buscar ---- */
.egk-left{ display:flex; align-items:center; gap:14px; flex:none; }
.egk-brand{ display:flex; align-items:center; }
.egk-brand img{ height:38px; width:auto; display:block; }
.egk-brand .egk-logo--ondark{ display:none; }
.egk-header.egk-chrome-light .egk-brand .egk-logo--onlight{ display:none; }
.egk-header.egk-chrome-light .egk-brand .egk-logo--ondark{ display:block; }
.egk-divider{ width:1px; height:28px; background:currentColor; opacity:.28; flex:none; }
.egk-iconbtn{ width:44px; height:44px; display:grid; place-items:center; border:0; background:none; color:inherit; cursor:pointer; border-radius:12px; transition:background .2s; }
.egk-iconbtn:hover{ background:rgba(125,125,125,.14); }
.egk-iconbtn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.9; }

.egk-spacer{ flex:1 1 auto; }

/* ---- nav en píldoras conectadas (efecto goo) ---- */
.egk-pills{ position:relative; display:flex; align-items:center; flex:none; }
.egk-goo{ position:absolute; inset:0; z-index:0; pointer-events:none; filter:url(#egk-goo); }
.egk-goo i{ position:absolute; top:0; left:0; height:44px; background:#fff; border-radius:999px; }
.egk-nav{ position:relative; z-index:1; display:flex; align-items:center; gap:6px; }
.egk-pill{ position:relative; display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border-radius:999px; color:var(--egk-ink); font-weight:600; font-size:.9rem; letter-spacing:.01em; white-space:nowrap; transition:color .2s ease, background-color .2s ease; }
/* hover, foco y página actual: relleno navy + texto blanco (siempre legible, para todas las píldoras) */
.egk-pill:hover,.egk-pill:focus-visible,.egk-pill.egk-active{ background:var(--egk-navy); color:#fff; }

/* ---- derecha: acceso + idioma ---- */
.egk-right{ display:flex; align-items:center; gap:14px; flex:none; }
.egk-login{ font-weight:600; font-size:.92rem; color:inherit; white-space:nowrap; padding:6px 2px; transition:opacity .2s; }
.egk-login:hover{ opacity:.72; }
.egk-cta{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px; border-radius:999px; background:var(--egk-gold); color:var(--egk-navy); font-weight:600; font-size:.9rem; white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease; }
.egk-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(223,169,2,.75); }
.egk-lang{ position:relative; }
.egk-langbtn{ display:flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; border:0; background:none; color:inherit; font-weight:600; font-size:.92rem; cursor:pointer; transition:opacity .2s; }
.egk-langbtn:hover{ opacity:.72; }
.egk-langbtn .egk-chev{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; transition:transform .2s; }
.egk-lang.egk-open .egk-chev{ transform:rotate(180deg); }
.egk-langmenu{ position:absolute; top:calc(100% + 8px); right:0; min-width:186px; background:#fff; border:1px solid var(--egk-line); border-radius:12px; box-shadow:0 20px 54px -26px rgba(0,21,53,.4); padding:6px; display:none; z-index:20; }
.egk-lang.egk-open .egk-langmenu{ display:block; }
.egk-langmenu a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:8px; color:var(--egk-navy); font-size:.95rem; font-weight:500; }
.egk-langmenu a:hover{ background:var(--egk-cream); }
.egk-langmenu a .code{ color:#6a7794; font-size:.78rem; font-weight:700; }
.egk-langmenu a.on{ color:var(--egk-gold-deep); font-weight:700; }

/* ---- hamburguesa (móvil) ---- */
.egk-burger{ display:none; width:46px; height:46px; border:0; background:none; color:inherit; cursor:pointer; border-radius:12px; }
.egk-burger span{ display:block; width:24px; height:2px; margin:5px auto; background:currentColor; border-radius:2px; transition:.3s; }

/* ---- buscador desplegable ---- */
.egk-searchbar{ position:fixed; top:0; left:0; right:0; z-index:1001; display:none; align-items:center; gap:14px; padding:18px clamp(16px,3.4vw,40px); background:rgba(251,250,246,.96); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 10px 34px -22px rgba(0,21,53,.55); }
.egk-searchbar.egk-open{ display:flex; }
.egk-searchbar svg{ width:24px; height:24px; stroke:var(--egk-navy); fill:none; stroke-width:1.9; flex:none; }
.egk-searchbar input{ flex:1; border:0; background:none; font-size:1.3rem; font-family:'Fraunces',Georgia,serif; color:var(--egk-navy); padding:8px 0; }
.egk-searchbar input:focus{ outline:none; }
.egk-searchbar .egk-close{ border:0; background:none; color:var(--egk-navy); font-size:1.6rem; line-height:1; cursor:pointer; min-width:44px; min-height:44px; }

/* ---- panel móvil ---- */
.egk-scrim{ position:fixed; inset:0; background:rgba(0,8,24,.5); z-index:1002; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.egk-scrim.egk-open{ opacity:1; visibility:visible; }
.egk-panel{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:#fff; z-index:1003; padding:24px; box-shadow:-20px 0 60px -30px rgba(0,21,53,.5); transform:translateX(100%); transition:transform .35s cubic-bezier(.22,.61,.36,1); overflow-y:auto; }
.egk-panel.egk-open{ transform:none; }
.egk-panel .egk-panel-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.egk-panel .egk-panel-top img{ height:38px; }
.egk-panel .egk-close{ border:0; background:none; font-size:1.9rem; line-height:1; color:var(--egk-navy); cursor:pointer; min-width:48px; min-height:48px; }
.egk-panel a.egk-mlink{ display:block; color:var(--egk-navy); font-size:1.15rem; font-weight:600; padding:14px 0; border-bottom:1px solid var(--egk-line); }
.egk-panel .egk-mcta{ display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin-top:20px; border-radius:999px; background:var(--egk-gold); color:var(--egk-navy); font-weight:600; }
.egk-panel .egk-mlang{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.egk-panel .egk-mlang a{ padding:8px 12px; border:1px solid var(--egk-line); border-radius:8px; font-weight:600; font-size:.86rem; color:var(--egk-navy); }
.egk-panel .egk-mlang a.on{ background:var(--egk-gold); border-color:var(--egk-gold); }

@media (max-width:1024px){
  .egk-pills,.egk-lang{ display:none; }
  .egk-burger{ display:block; }
}
@media (prefers-reduced-motion:reduce){
  .egk-header,.egk-panel,.egk-scrim,.egk-pill,.egk-langmenu{ transition:none !important; }
}