/*
  KÖNNEN Supply Chain Solutions — sitio web
  Concepto, diseño y desarrollo: Rodolfo Zavala · 2026
  Créditos completos: /humans.txt
*/
/* ===== Language switcher (ES / EN) — shared across every page =====
   A real toggle switch (track + sliding knob) with the ES/EN labels as
   the click targets, driven by the wrapper's data-active (flipped in
   i18n.js). Lives in .header-utility, positioned above the main pill nav
   — layout/placement for that spot is in styles.css; this file only owns
   the switch itself so it renders the same wherever it's dropped. Its own
   dark pill background is what keeps it legible/noticeable regardless of
   whatever hero content happens to sit behind the transparent header. */
.lang-toggle{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px;
  padding:5px 11px; border-radius:999px;
  background:rgba(16,16,18,.7); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-family:var(--ff-mono, 'JetBrains Mono', monospace); font-size:11px;
  letter-spacing:.05em; text-transform:uppercase;
}
.lang-toggle-label{
  all:unset; cursor:pointer; color:var(--silver-2, #b4b4b8);
  transition:color .25s ease;
}
.lang-toggle-label.is-active{color:#fff; font-weight:600;}
.lang-toggle-label:not(.is-active):hover{color:#fff;}

.lang-toggle-track{
  position:relative; display:inline-block; flex-shrink:0; cursor:pointer;
  width:36px; height:19px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
  transition:background .2s ease;
}
.lang-toggle-track:hover{background:rgba(255,255,255,.24);}
.lang-toggle-thumb{
  position:absolute; top:1px; left:1px;
  width:15px; height:15px; border-radius:50%;
  background:var(--orange, #e87722);
  box-shadow:0 2px 6px rgba(232,119,34,.5);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.lang-toggle[data-active="en"] .lang-toggle-thumb{transform:translateX(17px);}

@media (prefers-reduced-motion: reduce){
  .lang-toggle-thumb{transition:none;}
}