/* ============================================================================
   Conmutador de idioma — rotulo de neon
   ----------------------------------------------------------------------------
   Se auto-configura: lang.js lee el <link rel="alternate" hreflang> que la
   pagina ya trae. Si no hay par en el otro idioma, no aparece nada.

   Tres piezas:
     .ilang        el rotulo fijo, con encendido de tubo de neon al llegar
     .ilang-bar    la barra que sugiere el idioma del navegador (no redirige)
     .ilang-morph  el barrido de transformacion al cambiar de idioma

   Accesibilidad: con prefers-reduced-motion no parpadea, no barre y no se
   mueve — el rotulo aparece encendido y fijo, y el cambio es instantaneo.
   ========================================================================== */

:root {
  --ilang-neon: #33C19C;
  --ilang-neon-soft: rgba(51, 193, 156, .55);
  --ilang-ink: #0E1417;
}

/* ── El rotulo ───────────────────────────────────────────────────────────── */
/* absolute, no fixed: vive justo debajo del nav, dentro del hero, y el scroll
   lo deja atras. Un conmutador de idioma se usa al llegar, no a media pagina. */
.ilang {
  position: absolute;
  top: 92px;
  right: 26px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 5px;
  border-radius: 5px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ilang-neon);
  background: rgba(14, 20, 23, .82);
  border: 1px solid var(--ilang-neon-soft);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  /* el neon: halo del texto + halo del tubo por fuera y por dentro */
  text-shadow: 0 0 4px var(--ilang-neon), 0 0 11px var(--ilang-neon-soft);
  box-shadow: 0 0 7px rgba(51, 193, 156, .45),
              0 0 20px rgba(51, 193, 156, .24),
              inset 0 0 7px rgba(51, 193, 156, .14);
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease;
}

.ilang:hover,
.ilang:focus-visible {
  transform: translateY(-1px);
  background: rgba(14, 20, 23, .92);
  box-shadow: 0 0 10px rgba(51, 193, 156, .55),
              0 0 28px rgba(51, 193, 156, .34),
              inset 0 0 10px rgba(51, 193, 156, .22);
}

.ilang:focus-visible { outline: 2px solid var(--ilang-neon); outline-offset: 3px; }

/* el globo terraqueo, mas tenue que el texto */
.ilang svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .85; }

/* el idioma al que se va, resaltado; el actual, apagado */
.ilang .ilang-off { color: rgba(242, 246, 245, .38); text-shadow: none; font-weight: 600; }
.ilang .ilang-sep { color: rgba(242, 246, 245, .28); text-shadow: none; }

/* ── Entrada: un fundido limpio, sin parpadeo ────────────────────────────── */
@keyframes ilang-entrar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ilang.is-entrando { animation: ilang-entrar .55s cubic-bezier(.22, 1, .36, 1) both; }
.ilang.is-fijo     { opacity: 1; }

/* ── La barra de sugerencia ──────────────────────────────────────────────── */
.ilang-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1190;
  background: rgba(14, 20, 23, .96);
  border-top: 1.5px solid var(--ilang-neon-soft);
  box-shadow: 0 -2px 24px rgba(51, 193, 156, .18);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.ilang-bar.is-visible { transform: translateY(0); }

.ilang-bar .ilang-bar-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  color: #F2F6F5;
}
.ilang-bar a {
  color: var(--ilang-neon);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--ilang-neon-soft);
  text-shadow: 0 0 6px var(--ilang-neon-soft);
}
.ilang-bar a:hover { border-bottom-color: var(--ilang-neon); }
.ilang-bar button {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(242, 246, 245, .28);
  color: rgba(242, 246, 245, .75);
  font-size: 1.1rem;
  line-height: 1;
  padding: 5px 11px;
  border-radius: 4px;
  cursor: pointer;
}
.ilang-bar button:hover { border-color: var(--ilang-neon-soft); color: #F2F6F5; }

/* ── El barrido de transformacion ────────────────────────────────────────── */
.ilang-morph {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
}

/* la cortina: barre de izquierda a derecha al salir, y termina de salir al entrar */
.ilang-morph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
              rgba(14, 20, 23, 0)   0%,
              rgba(14, 20, 23, .55) 12%,
              rgba(14, 20, 23, .96) 32%,
              rgba(14, 20, 23, .96) 68%,
              rgba(14, 20, 23, .55) 88%,
              rgba(14, 20, 23, 0)   100%);
  transform: translateX(-125%);
  will-change: transform;
}

/* la linea de luz que va al frente del barrido */
.ilang-morph::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
              rgba(51,193,156,0) 0%, var(--ilang-neon) 22%,
              var(--ilang-neon) 78%, rgba(51,193,156,0) 100%);
  box-shadow: 0 0 18px 6px rgba(51, 193, 156, .5),
              0 0 60px 18px rgba(51, 193, 156, .2);
  transform: translateX(-60px);
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes ilang-barrer-sale {
  from { transform: translateX(-125%); }
  to   { transform: translateX(0%); }
}
@keyframes ilang-linea-sale {
  0%   { transform: translateX(-60px); opacity: 0; }
  18%  { opacity: .9; }
  100% { transform: translateX(101vw); opacity: 1; }
}
@keyframes ilang-barrer-entra {
  from { transform: translateX(0%); }
  to   { transform: translateX(125%); }
}
@keyframes ilang-linea-entra {
  0%   { transform: translateX(0); opacity: 1; }
  72%  { opacity: .75; }
  100% { transform: translateX(101vw); opacity: 0; }
}

.ilang-morph.sale  { opacity: 1; }
.ilang-morph.sale::before  { animation: ilang-barrer-sale .62s cubic-bezier(.76, 0, .24, 1) forwards; }
.ilang-morph.sale::after   { animation: ilang-linea-sale .62s cubic-bezier(.76, 0, .24, 1) forwards; }

.ilang-morph.entra { opacity: 1; }
.ilang-morph.entra::before { animation: ilang-barrer-entra .72s cubic-bezier(.16, 1, .3, 1) forwards; }
.ilang-morph.entra::after  { animation: ilang-linea-entra .72s cubic-bezier(.16, 1, .3, 1) forwards; }

/* el contenido llega asentandose, como si se recompusiera */
@keyframes ilang-asentar {
  from { opacity: 0; transform: translateY(12px) scale(.994); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
body.ilang-llegando main,
body.ilang-llegando header,
body.ilang-llegando .hero { animation: ilang-asentar .78s cubic-bezier(.16, 1, .3, 1) .06s both; }

/* ── Movil ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ilang { top: 74px; right: 14px; font-size: .68rem; padding: 5px 10px 4px; }
  .ilang-bar .ilang-bar-in { font-size: .86rem; padding: 11px 15px; }
}

/* ── Sin animacion: se respeta y punto ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ilang,
  .ilang.is-encendiendo,
  .ilang.is-fijo { animation: none !important; opacity: 1; transition: none; }
  .ilang:hover, .ilang:focus-visible { transform: none; }
  .ilang-bar { transition: none; }
  .ilang-morph { display: none !important; }
  body.ilang-llegando main,
  body.ilang-llegando header,
  body.ilang-llegando .hero { animation: none !important; }
}

/* Impresion: el rotulo y la barra no van al papel */
@media print { .ilang, .ilang-bar, .ilang-morph { display: none !important; } }