/* =========================================================
   BITSIDEAS — Selector de idioma
   ========================================================= */
.lang{position:relative;z-index:70}

.lang__btn{
  display:flex;align-items:center;gap:8px;
  height:40px;padding:0 12px 0 10px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--font);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  transition:border-color .3s var(--ease),color .3s var(--ease),
             background .3s var(--ease),transform .35s var(--ease-out);
}
.lang__btn:hover{border-color:var(--accent-500);color:var(--accent-600);transform:translateY(-2px)}
.lang.is-open .lang__btn{border-color:var(--accent-500);color:var(--accent-600)}

/* Globo que gira despacio y se acelera al interactuar */
.lang__globe{width:19px;height:19px;flex:0 0 auto;overflow:visible}
.lang__globe circle,.lang__globe path,.lang__globe ellipse{
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
}
.lang__mer{transform-origin:12px 12px;animation:langSpin 12s var(--ease) infinite}
.lang__btn:hover .lang__mer,.lang.is-open .lang__mer{animation-duration:3.2s}
@keyframes langSpin{0%,100%{rx:4}50%{rx:10.2}}

.lang__code{line-height:1}
.lang__caret{
  width:13px;height:13px;flex:0 0 auto;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease-out);
}
.lang.is-open .lang__caret{transform:rotate(180deg)}

/* ---------------- Lista ---------------- */
.lang__list{
  position:absolute;top:calc(100% + 10px);right:0;min-width:186px;
  padding:7px;border-radius:16px;
  background:var(--bg-elev);border:1px solid var(--line);
  box-shadow:0 16px 34px rgba(43,39,51,.16), 0 38px 80px rgba(43,39,51,.14);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);transform-origin:100% 0;
  transition:opacity .26s var(--ease),transform .4s var(--ease-out),visibility .26s;
}
.lang.is-open .lang__list{opacity:1;visibility:visible;transform:none}

.lang__opt{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:11px;text-align:left;
  font-family:var(--font-body);font-size:.9rem;color:var(--ink-2);
  opacity:0;transform:translateX(10px);
  transition:opacity .3s var(--ease),transform .4s var(--ease-out),
             background .22s var(--ease),color .22s var(--ease);
}
.lang.is-open .lang__opt{opacity:1;transform:none}
.lang.is-open .lang__opt:nth-child(2){transition-delay:.06s}
.lang__opt:hover{background:color-mix(in srgb,var(--accent-500) 11%,transparent);color:var(--ink)}

/* Bandera del idioma */
.lang__tag{
  width:34px;height:26px;flex:0 0 auto;border-radius:6px;overflow:hidden;
  display:grid;place-items:center;position:relative;
  box-shadow:0 1px 3px rgba(43,39,51,.22), inset 0 0 0 1px rgba(43,39,51,.10);
  transition:transform .4s var(--ease-out),box-shadow .35s var(--ease);
}
.lang__flag{width:100%;height:100%;display:block}
.lang__opt:hover .lang__tag{
  transform:scale(1.08) rotate(-3deg);
  box-shadow:0 4px 10px rgba(43,39,51,.28), inset 0 0 0 1px rgba(43,39,51,.14);
}
.lang__opt b{display:block;font-family:var(--font);font-weight:600;font-size:.9rem;color:var(--ink)}
.lang__opt small{display:block;font-size:.76rem;color:var(--muted)}

/* Idioma activo */
.lang__opt[aria-current="true"]{background:color-mix(in srgb,var(--accent-500) 9%,transparent)}
.lang__opt[aria-current="true"] .lang__tag{
  box-shadow:0 2px 6px rgba(43,39,51,.24), inset 0 0 0 1.5px var(--accent-500);
}
.lang__opt[aria-current="true"]::after{
  content:"";width:7px;height:7px;margin-left:auto;border-radius:50%;
  background:var(--accent-500);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-500) 22%,transparent);
}

/* ---------------- Sobre la cabecera transparente ---------------- */
.header:not(.is-stuck) .lang__btn{
  border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.9);
}
.header:not(.is-stuck) .lang__btn:hover,
.header:not(.is-stuck) .lang.is-open .lang__btn{
  border-color:var(--accent-400);color:#fff;background:rgba(255,255,255,.1);
}

@media (max-width:900px){
  .lang__list{right:auto;left:50%;transform:translate(-50%,-8px) scale(.96);transform-origin:50% 0}
  .lang.is-open .lang__list{transform:translate(-50%,0)}
  .lang__btn{padding:0 10px 0 8px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .lang__mer{animation:none}
  .lang__list,.lang__opt,.lang__caret{transition:none}
}