/* Boton de idioma ES / EN (layouts/_idioma.html). Pastilla con marca que se desliza. */
.lang-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: 34px;
    padding: 3px;
    border: 1px solid #e7e5e4;
    border-radius: 999px;
    background: #f5f5f4;
    flex-shrink: 0;
    isolation: isolate;
}
.lang-switch button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    /* responsive.css pone min-height: 44px a todo boton en el telefono: aqui el alto lo da la pastilla
       (si no, el texto quedaba mas abajo que la marca y la pastilla se veia chueca). */
    min-height: 0;
    height: 26px;
    padding: 0 8px;
    line-height: 1;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #78716c;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: color .2s ease;
}
.lang-switch button[aria-pressed="true"] { color: #ffffff; cursor: default; }
.lang-switch button:focus-visible { outline: 2px solid #8a4534; outline-offset: 2px; }
.lang-switch-knob {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: #8a4534;
    box-shadow: 0 1px 3px rgba(138, 69, 52, .35);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.lang-switch[data-lang="en"] .lang-switch-knob { transform: translateX(100%); }
.lang-switch.is-switching { pointer-events: none; }
@media (pointer: coarse) {
    /* 40 de alto (2 de borde + 3 + 32 + 3): la marca y los botones miden lo mismo. */
    .lang-switch { height: 40px; }
    .lang-switch button { height: 32px; min-width: 42px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .lang-switch-knob, .lang-switch button { transition: none; }
}