/* =========================================================
   LANG-SWITCH — botón ES / EN tipo slide (header)
   Se carga DESPUÉS de styles.css. No depende de sus variables:
   toma el color del texto del nav (currentColor) y usa un acento propio.
   Personalízalo con --ls-accent-1 / --ls-accent-2 (ej. los colores de tu .btn.p).
   ========================================================= */

/* Grupo derecho del nav: toggle + botón "Ver planes" */
.nav-actions{
  display:flex;
  align-items:center;
  gap:.9rem;
}

.lang-switch{
  --ls-pad:4px;
  --ls-w:46px;
  --ls-h:32px;
  position:relative;
  isolation:isolate;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  padding:var(--ls-pad);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  background:color-mix(in srgb, currentColor 9%, transparent);
  border:1px solid rgba(255,255,255,.2);
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  user-select:none;
}

/* Perilla que se desliza */
.lang-switch__thumb{
  position:absolute;
  z-index:-1;
  top:var(--ls-pad);
  left:var(--ls-pad);
  width:calc((100% - var(--ls-pad) * 2) / 2);
  height:calc(100% - var(--ls-pad) * 2);
  border-radius:999px;
  background:linear-gradient(135deg, var(--ls-accent-1, #4f8cff), var(--ls-accent-2, #7c3aed));
  box-shadow:0 6px 16px rgba(99,102,241,.45);
  transition:transform .32s cubic-bezier(.34,1.35,.5,1), box-shadow .25s ease;
}
.lang-switch[data-current="en"] .lang-switch__thumb{
  transform:translateX(100%);
}
.lang-switch:hover .lang-switch__thumb{
  box-shadow:0 8px 20px rgba(99,102,241,.6);
}

.lang-switch__opt{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:var(--ls-w);
  height:var(--ls-h);
  border-radius:999px;
  color:inherit;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  opacity:.65;
  transition:color .25s ease, opacity .25s ease;
}
.lang-switch__opt:hover{ opacity:1; }
.lang-switch__opt.is-active{
  color:#fff;
  opacity:1;
  cursor:default;
}
.lang-switch__opt:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

@media (max-width:480px){
  /* si el logo + toggle + botón no caben en una línea, el grupo baja sin desbordar */
  nav{ flex-wrap:wrap; row-gap:.6rem; }
  .nav-actions{ gap:.45rem; margin-left:auto; }
  .nav-actions .btn{ white-space:nowrap; padding:.5rem .9rem; font-size:.82rem; }
  .lang-switch{ --ls-w:34px; --ls-h:26px; --ls-pad:3px; }
  .lang-switch__opt{ font-size:.7rem; letter-spacing:.04em; }
}
@media (max-width:360px){
  .nav-actions .btn{ padding:.45rem .7rem; font-size:.78rem; }
  .lang-switch{ --ls-w:30px; }
}

@media (prefers-reduced-motion:reduce){
  .lang-switch__thumb,
  .lang-switch__opt{ transition:none; }
}