/* =====================================================================
   FusanyaPro — Selector de idioma (31 oct 2026, orden de Julio)
   Fuera la píldora de texto «EN | ES»: un ÍCONO de globo que al
   tocarlo despliega un menú con banderitas y el nombre del idioma
   (English · Español, con banderas en imagen SVG), estilo el
   selector del sitio de la Iglesia. Cada opción enlaza a la MISMA
   página en el otro idioma.
   Vive en la barra, dentro del menú hamburguesa (móvil) y dentro del
   menú hamburguesa de escritorio (.desk-menu, mismos estilos de fila)
   y en la esquina del login. Lógica: /lang-menu.js
   ===================================================================== */
.lang-wrap { position:relative; display:inline-flex; }
.lang-globe {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:34px; height:34px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:transparent;
  color:#fff; cursor:pointer; font:inherit; flex:0 0 auto;
  -webkit-tap-highlight-color:transparent;
}
.lang-globe svg { width:18px; height:18px; flex:0 0 auto; }
.lang-globe .lang-cur { display:none; }
.lang-dd {
  position:absolute; right:0; top:calc(100% + 10px); z-index:90;
  min-width:196px; padding:8px; border-radius:18px;
  background:rgba(11,11,17,.98); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:2px; text-align:left;
}
.lang-dd[hidden] { display:none; }
.lang-dd .lang-opt {
  display:flex; align-items:center; gap:11px;
  min-height:48px; padding:12px 13px; border-radius:12px;
  text-decoration:none; color:#fff; font-weight:600; font-size:.98rem; line-height:1.2;
}
.lang-dd .lang-opt:hover { background:rgba(255,255,255,.07); }
/* Banderas como IMAGEN SVG, no emoji (Julio, 31 oct 11:42): Windows
   no pinta los emojis de banderas y en PC se veían solo las
   iniciales «US»/«DO». Imagen 4:3, esquinas redondeadas, alineada
   con el texto, en los tres contextos (barra, menú móvil y menú de
   escritorio) y en el login. */
img.flag {
  width:22px; height:16.5px; border-radius:3px; object-fit:cover;
  display:inline-block; flex:0 0 auto; vertical-align:-3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.lang-dd .lang-opt.on { background:rgba(248,145,22,.15); }
.lang-dd .lang-opt.on::after {
  content:"✓"; margin-left:auto; color:#f89116; font-weight:800;
}

/* Dentro del menú hamburguesa: fila completa, toque cómodo */
.mobile-menu .lang-wrap, .desk-menu .lang-wrap { display:block; }
.mobile-menu .lang-globe, .desk-menu .lang-globe {
  width:100%; height:auto; min-height:50px; padding:12px 15px;
  border-radius:16px; justify-content:flex-start;
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);
}
.mobile-menu .lang-globe .lang-cur, .desk-menu .lang-globe .lang-cur { display:inline; font-weight:700; font-size:1rem; }
.mobile-menu .lang-globe::after, .desk-menu .lang-globe::after {
  content:"›"; margin-left:auto; font-size:1.35rem; line-height:1;
  color:#f89116; transform:rotate(90deg); transition:transform .25s ease;
}
.mobile-menu .lang-wrap.open .lang-globe::after, .desk-menu .lang-wrap.open .lang-globe::after { transform:rotate(-90deg); }
.mobile-menu .lang-dd, .desk-menu .lang-dd {
  position:static; margin-top:8px; min-width:0; box-shadow:none;
}

/* Login: la esquina conserva su posición; se neutraliza la píldora vieja */
.lang-wrap.lang-corner {
  position:absolute; top:16px; right:16px; z-index:5;
  display:inline-flex; border:none; background:none;
  border-radius:0; overflow:visible;
}
@media (max-width:400px){ .lang-wrap.lang-corner { top:12px; right:12px; } }

/* En móvil la barra no duplica el selector: vive en el menú hamburguesa */
@media (max-width:879px){ header.site .bar > .lang-wrap { display:none; } }