/* i18n — selector de idioma ES | EN (lo monta assets/i18n.js).
   Pastilla segmentada de cristal, como la barra: el activo lleva el violeta del CTA
   y la «pulga» se desliza con la misma curva que el indicador de .cab-nav. */

/* columna derecha de la barra: [ES|EN][☰] — la rejilla logo | menú | ☰ no cambia */
.cab-acciones{justify-self:end;display:flex;align-items:center;gap:12px;min-width:0}
.cab-acciones .cab-menu{margin:0}

.idioma{--alto:42px;--seg:46px;--pad:4px;
  position:relative;display:inline-grid;grid-template-columns:repeat(2,var(--seg));align-items:stretch;flex:none;
  height:var(--alto);padding:var(--pad);border-radius:999px;isolation:isolate;
  background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .015)) ,rgb(12 9 24 / .55);
  border:1px solid rgb(157 123 255 / .26);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),inset 0 -1px 0 rgb(0 0 0 / .3),0 10px 26px -16px rgb(0 0 0 / .9);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
/* filete entre los dos: queda debajo de la pulga, así sólo se ve el lado apagado */
.idioma::before{content:"";position:absolute;left:50%;top:32%;bottom:32%;width:1px;margin-left:-.5px;z-index:-2;
  background:linear-gradient(180deg,transparent,rgb(201 184 255 / .35),transparent)}
.idioma-pulga{position:absolute;z-index:-1;top:var(--pad);bottom:var(--pad);left:var(--pad);width:var(--seg);border-radius:999px;
  background:linear-gradient(90deg,#6b2bff,#5a24e0);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 0 0 1px rgb(157 123 255 / .5),0 6px 18px -6px rgb(107 43 255 / .95),0 0 22px -6px rgb(124 77 255 / .8);
  transition:transform .55s cubic-bezier(.65,0,.2,1.2)}
.idioma-pulga::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgb(255 255 255 / .18),transparent 55%);pointer-events:none}
.idioma[data-activo="en"] .idioma-pulga{transform:translateX(100%)}
.idioma button{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;cursor:pointer;border-radius:999px;
  font:600 11.5px/1 var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.16em;text-indent:.16em;color:#8d89a6;
  -webkit-tap-highlight-color:transparent;transition:color .35s ease}
.idioma button:hover{color:#e8e4ff}
.idioma button[aria-pressed="true"]{color:#fff;text-shadow:0 1px 6px rgb(30 0 90 / .5)}
.idioma button:focus-visible{outline:2px solid #c9b8ff;outline-offset:2px}
.idioma button:active{transform:scale(.94)}

/* barra compacta (móvil) */
@media (max-width:640px){
  .cab-acciones{gap:8px}
  .idioma-barra{--alto:38px;--seg:39px;--pad:3px}
  .idioma button{font-size:10.5px}
}
@media (max-width:360px){ .idioma-barra{--seg:34px} }

/* dentro del menú ☰: en su pie, al lado de los legales. En escritorio el de la barra basta. */
.menu-movil .idioma-menu{--alto:38px;--seg:44px;--pad:3px}
/* el selector del menú se ve siempre (ya no está en la barra) */
.menu-movil .mm-pie .idioma-menu{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  .idioma-pulga,.idioma button{transition:none}
}

/* titular en inglés: «Built to the scale / of your [palabra]» en dos líneas fijas.
   Con 11.5ch, «operations.» no cabía junto a «of your» y el titular se recolocaba en
   cada giro (la palabra «scale» saltaba de línea). «of your» va unido con un espacio
   duro y el ancho deja sitio a la palabra más larga: el corte ya no depende de la palabra. */
@media (min-width:641px){ html[lang="en"] .hero h1{max-width:8.4em} }

/* ES|EN dentro de la pastilla del menú */
.cab-nav .idioma-barra{margin-left:6px;--alto:36px;--seg:40px}
.cab-nav .idioma-barra::after{content:"";position:absolute;left:-6px;top:22%;bottom:22%;width:1px;background:rgb(255 255 255 / .12)}
/* botón Iniciar sesión con astronauta */
.cab-login{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 6px;border-radius:999px;color:#fff;font:600 14.5px/1 "Inter",sans-serif;white-space:nowrap;
  background:linear-gradient(180deg,rgb(107 43 255 / .28),rgb(60 25 140 / .22));border:1px solid rgb(157 123 255 / .4);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 10px 26px -14px rgb(107 43 255 / .9);
  transition:border-color .3s,background .3s,transform .3s}
.cab-login:hover{border-color:#a98bff;background:linear-gradient(180deg,rgb(107 43 255 / .45),rgb(60 25 140 / .35))}
.cab-login .astro{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#2a1670,#0c0820);box-shadow:inset 0 0 0 1px rgb(169 139 255 / .35)}
.cab-login .astro svg{width:28px;height:28px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cab-login:hover .astro svg{transform:translateY(-2px) rotate(-10deg)}
@media (prefers-reduced-motion:no-preference){.cab-login .astro svg{animation:astro-flota 4s ease-in-out infinite}}
@keyframes astro-flota{50%{transform:translateY(-1.5px) rotate(4deg)}}
@media (max-width:640px){.cab-login{padding:0 4px;height:44px}.cab-login span:last-child{display:none}.cab-login .astro{width:34px;height:34px}}

/* fila de idioma en el panel del ☰ */
.mm-idioma{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 8px 0 20px;border-radius:18px;border:1px solid rgb(255 255 255 / .08);background:rgb(255 255 255 / .03);color:#e8e7ee;font:600 15px/1 "Inter",sans-serif}
.mm-idioma .idioma{--alto:40px;--seg:46px}
.mm-pie .idioma{display:none}
