/* 円相 enso.css (orden VV, 24-oct-2026): login ensō 3D y el intro único, compartidos por la entrada única (index.html) y OMEGA nuevo.
   Antes vivían en nuevo.css; se movieron aquí sin cambios para que el portal clásico no cargue los estilos globales de OMEGA nuevo. */
/* 円相 Login 3D (23-oct-2026, orden I). 28-oct-2026 (aprobado por Alejandro): el halo ocupa casi toda la pantalla, centrado; el formulario
   va en vidrio translúcido en el centro del halo; la marca (円相 · ENSŌ / OMEGA / SISTEMA OPERATIVO DE MEDIOS) abajo a la derecha. */
.le { position: fixed; inset: 0; background: #05060A; color: #E9E6DF; font-family: Outfit, system-ui, sans-serif; overflow: hidden; z-index: 50; }
.le-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.le-fijo { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.le-enso { width: min(90vh, max(94vw, 430px)); filter: drop-shadow(0 0 28px rgba(255,46,77,.45)); }
.le-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0,0,0,.72) 100%); }
.le-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(circle, rgba(46,230,214,.5), transparent 55%); }
.le-flash.on { opacity: 1; transition: opacity .12s; }
.le-ui { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.le-card { position: relative; width: min(340px, 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: 0; padding: 26px 24px 20px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 40%, rgba(46,230,214,.03));
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(46,230,214,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 60px rgba(46,230,214,.08), 0 30px 80px rgba(0,0,0,.45);
  transition: opacity .7s, transform .7s, filter .7s; margin: auto; }
.le-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(46,230,214,.55), rgba(46,230,214,0) 35%, rgba(255,46,77,0) 65%, rgba(255,46,77,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.le-card.out { opacity: 0; transform: scale(.92); filter: blur(6px); pointer-events: none; }
.le-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.le-head-k { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .35em; color: #FF2E4D; }
.le-head-s { font-family: Syncopate, sans-serif; font-weight: 700; font-size: 8px; letter-spacing: .3em; color: #9AA1B5; }
.le-marca { position: absolute; right: max(28px, env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; pointer-events: none; }
.le-kana { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .45em; margin-right: -.45em; color: #FF2E4D; }
.le-h { margin: 0; font-family: Cinzel, serif; font-weight: 600; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: .14em; margin-right: -.14em; color: #FF2E4D; text-shadow: 0 0 26px rgba(255,46,77,.55); }
.le-sub { font-family: Syncopate, sans-serif; font-weight: 700; font-size: 8.5px; letter-spacing: .36em; margin-right: -.36em; color: #2EE6D6; }
.le-form { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.le-form label { display: flex; flex-direction: column; gap: 7px; }
.le-form label > span { font-family: Syncopate, sans-serif; font-weight: 700; font-size: 8.5px; letter-spacing: .24em; color: #9AA1B5; }
.le-form input { height: 46px; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(5,6,10,.42); color: #E9E6DF; padding: 0 14px; font: 400 15px Outfit, sans-serif; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.le-form input::placeholder { color: #5d6475; }
.le-form input:focus { border-color: rgba(46,230,214,.7); box-shadow: 0 0 0 3px rgba(46,230,214,.16); background: rgba(5,6,10,.6); }
.le-code { font-size: 22px !important; letter-spacing: .3em; text-align: center; }
.le-go { height: 50px; border: 0; border-radius: 12px; background: #2EE6D6; color: #05060A; font: 600 15px Outfit, sans-serif; letter-spacing: .04em; cursor: pointer; box-shadow: 0 0 30px rgba(46,230,214,.35); transition: box-shadow .2s, transform .2s; margin-top: 4px; }
.le-go:hover { box-shadow: 0 0 46px rgba(46,230,214,.6); transform: translateY(-1px); } .le-go:disabled { opacity: .6; cursor: wait; transform: none; }
.le-go:focus-visible, .le-link:focus-visible, .le-foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.le-foot, .le-txt { font-size: 12.5px; color: #9AA1B5; line-height: 1.5; text-align: center; } .le-foot a { color: #2EE6D6; } .le-txt { text-align: left; margin: 0; }
.le-txt b { color: #E9E6DF; } .le-txt code { display: block; margin-top: 6px; word-break: break-all; color: #E9E6DF; }
.le-paso { margin: 0; font-family: Syncopate, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .2em; color: #2EE6D6; } .le-paso span { font-family: 'Noto Sans JP', sans-serif; margin-right: 8px; }
.le-qr { display: grid; place-items: center; padding: 10px; border-radius: 10px; background: #fff; } .le-qr img { width: 180px; height: 180px; }
.le-link { min-height: 40px; border: 0; background: none; color: #9AA1B5; font: 500 13px Outfit, sans-serif; cursor: pointer; }
.le-tag { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); left: max(28px, env(safe-area-inset-left, 0px)); font-family: Syncopate, sans-serif; font-size: 8.5px; letter-spacing: .3em; color: #3A4052; }
@media (max-width: 640px) { .le-card { padding: 22px 18px 16px; width: min(300px, 100%); } .le-marca { right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .le-h { font-size: 26px; } .le-kana { font-size: 9.5px; } .le-sub { font-size: 7px; letter-spacing: .3em; margin-right: -.3em; } .le-tag { display: none; } }
@media (prefers-reduced-motion: reduce) { .le-card, .le-flash { transition: none; } }

/* 映像 Intro único (orden H1) */
.oi { position: fixed; inset: 0; z-index: 60; background: #05060A; transition: opacity .4s ease; }
.oi.out { opacity: 0; pointer-events: none; }
.oi video { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; } /* orden R: video completo, sin recortes */
.oi .oi-fondo { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.2); transform: translateZ(0); }
.oi .oi-skip, .oi .oi-snd { z-index: 2; }
.oi .oi-skip, .oi .oi-snd { position: absolute; bottom: max(22px, env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(46,230,214,.4); background: rgba(5,6,10,.6); color: #E9E6DF; font: 500 14px Outfit, sans-serif; cursor: pointer; backdrop-filter: blur(8px); }
.oi .oi-skip { right: max(22px, env(safe-area-inset-right, 0px)); } .oi .oi-snd { left: max(22px, env(safe-area-inset-left, 0px)); color: #2EE6D6; }
.oi .oi-skip:hover, .oi .oi-snd:hover { border-color: #2EE6D6; }

/* Todas las reglas del intro van bajo .oi para no tocar el intro de carga del portal clásico (styles.css, #om-intro). Hay reglas viejas de .oi-skip para su intro anterior (invisible hasta .can-skip, fija arriba en celular).
   Dentro del intro nuevo manda esto: «Saltar» siempre visible abajo a la derecha. */
.oi { z-index: 3000; }
.oi .oi-skip { position: absolute; top: auto; left: auto; bottom: max(22px, env(safe-area-inset-bottom, 0px)); right: max(22px, env(safe-area-inset-right, 0px)); opacity: 1; pointer-events: auto; }
.le { z-index: 2500; }
.le-err { color: #FF6B81; margin: 0; }
/* 人機 Login con el ser vivo de fondo (3-nov, solo OMEGA): tarjeta a la derecha en computador y abajo en celular, como el recorrido aprobado */
.le-ser { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #04050A; pointer-events: none; }
.le-conser .le-vig { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
/* 門 Entrada en dos pasos (3-nov): paso 1 = el ser al centro y un solo botón; la marca de la esquina se esconde hasta el paso 2 */
.le-paso1 .le-ui { justify-content: center !important; align-items: flex-end !important; padding: 0 16px calc(7vh + env(safe-area-inset-bottom, 0px)) !important; }
.le-paso1 .le-marca, .le-paso1 .le-tag { opacity: 0; pointer-events: none; }
.le-marca, .le-tag { transition: opacity .5s ease; }
.le-puerta { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: le-sube .6s cubic-bezier(.2,.8,.2,1) both; }
.le-p-h { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .5em; padding-left: .5em; color: #FF2E4D; text-shadow: 0 0 22px rgba(255,46,77,.55); }
.le-p-kana { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; letter-spacing: .4em; color: #8A97A3; }
.le-puerta .le-p-go { width: auto; min-width: 220px; padding: 12px 34px; margin-top: 8px; border-radius: 999px; }
.le-p-sub { font-size: 12px; letter-spacing: .12em; color: #8A97A3; }
.le-volver { display: block; margin: 10px auto 0; }
.le-conser .le-card { animation: le-entra .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes le-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes le-entra { from { opacity: 0; transform: translateX(24px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .le-puerta, .le-conser .le-card { animation: none; } }
@media (max-height: 760px) and (min-width: 600px) { .le-paso1 .le-ui { padding-bottom: 14px !important; } .le-puerta { gap: 6px; } .le-p-kana { display: none; } .le-p-h { font-size: 22px; } .le-puerta .le-p-go { padding: 10px 30px; margin-top: 2px; } }
@media (min-width: 900px) { .le-conser .le-ui { justify-content: flex-end; padding-right: max(5vw, 16px); } .le-conser .le-card { margin: auto 0 auto auto; } }
@media (max-width: 899px) { .le-conser .le-ui { align-items: flex-end; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .le-conser .le-card { margin: auto auto 0; } }
@media (max-height: 700px) and (min-width: 900px) { .le-conser .le-marca { display: none; } }