/* ═══════════════════════════════════════════════════════════════════════════
   ORMION · puerta de acceso
   Lienzo: fotografía del canto graduado + campo de líneas + velo + pulso.
   Columna de acceso: regla de pasos con índice rojo, tarjeta de calibración,
   correo → código de seis casillas → sala abierta.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --grafito:#0E1116; --blanco:#FFFFFF; --instrumental:#EDEFF1; --acero:#5B6472; --calibra:#DA291C;
  --hairline:#E3E6E9; --acero-suave:#8A94A2; --hairline-inv:#23282F;
  --display:"Instrument Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --texto:"IBM Plex Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px;
  --radio:2px; --gut:clamp(20px,5vw,64px);
  --t-lead:clamp(1.0625rem,1.35vw,1.1875rem);
  --t-body:1.0625rem; --t-micro:.8125rem; --t-rotulo:.6875rem;
  --wm-otp:30.16px;              /* 120 px de ancho */
  --acc:currentColor;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;background:var(--grafito);color:var(--blanco);
  font-family:var(--texto);font-weight:400;font-size:var(--t-body);line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--blanco);color:var(--grafito)}
:focus-visible{outline:2px solid var(--blanco);outline-offset:3px;border-radius:1px}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.015em;margin:0}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.rot{font-family:var(--display);font-weight:500;font-size:var(--t-rotulo);line-height:1.45;letter-spacing:.10em;text-transform:uppercase;color:var(--acero-suave);font-variant-numeric:tabular-nums;margin:0}
.escala--inv{height:9px;background:repeating-linear-gradient(90deg,var(--blanco) 0 1px,transparent 1px 13px);opacity:.30}
.micro{font-size:var(--t-micro);line-height:1.55;color:var(--acero-suave);font-weight:300}

/* ═══ WORDMARK ORM-G07 (trazado) ═══ */
.wmk{display:inline-block;line-height:1;color:var(--blanco)}
.wmk svg{display:block;height:.724em;width:auto;fill:currentColor}
.wmk .wm-i{fill:var(--acc,currentColor)}
.wmk--otp{font-size:var(--wm-otp)}

/* ═══ estructura de la puerta ═══ */
.puerta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);min-height:100svh}

/* ── columna de acceso ─────────────────────────────────────────────────── */
.acceso{position:relative;display:flex;flex-direction:column;justify-content:center;padding:var(--s24) var(--gut);border-right:1px solid var(--hairline-inv)}
.acceso__in{width:100%;max-width:432px;margin-inline:auto}
.acceso__marca{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-bottom:var(--s12);text-decoration:none}
.acceso__lema{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:-.015em;color:var(--acero-suave)}

/* la regla de pasos: la escala se repite, el índice es único y avanza.
   Es el ÚNICO rojo de esta pantalla. */
.regla{position:relative;margin-bottom:var(--s8)}
.regla .escala--inv{width:100%}
.regla__idx{position:absolute;top:-4px;left:var(--p,16.666%);width:1px;height:17px;background:var(--calibra);transform:translateX(-.5px);transition:left .6s var(--ease),opacity .3s var(--ease)}
.regla__x{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px}
.regla__x span{text-align:center;transition:color .4s var(--ease)}
.regla__x .is-here{color:var(--blanco)}
.puerta.con-error .regla__idx{opacity:0}

/* la caja: marcas de calibración fuera, tarjeta dentro */
.caja{position:relative}
.tick{position:absolute;width:12px;height:12px;z-index:2;opacity:0;transition:opacity .8s var(--ease) .5s}
body.listo .tick{opacity:.55}
.tick::before,.tick::after{content:"";position:absolute;background:var(--acero)}
.tick::before{width:12px;height:1px}
.tick::after{width:1px;height:12px}
.tick--tl{top:-14px;left:-14px} .tick--tl::before{top:0;left:0} .tick--tl::after{top:0;left:0}
.tick--tr{top:-14px;right:-14px} .tick--tr::before{top:0;right:0} .tick--tr::after{top:0;right:0}
.tick--bl{bottom:-14px;left:-14px} .tick--bl::before{bottom:0;left:0} .tick--bl::after{bottom:0;left:0}
.tick--br{bottom:-14px;right:-14px} .tick--br::before{bottom:0;right:0} .tick--br::after{bottom:0;right:0}

.tarjeta{
  position:relative;z-index:1;
  background:rgba(255,255,255,.035);
  border:1px solid var(--hairline-inv);
  border-radius:var(--radio);
  padding:clamp(1.6rem,5vw,2.25rem);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* escala superior de la tarjeta: se repite al componerse */
.tarjeta::before{content:"";position:absolute;top:-1px;left:0;right:0;height:7px;
  background:repeating-linear-gradient(90deg,var(--hairline-inv) 0 1px,transparent 1px 13px);
  transform:scaleX(0);transform-origin:50% 50%;transition:transform 1s var(--ease) .22s}
body.listo .tarjeta::before{transform:scaleX(1)}

.pasos{position:relative;height:0;transition:height .5s var(--ease)}
.paso{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;gap:var(--s4);
  opacity:0;visibility:hidden;transform:translateX(18px);
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility 0s .42s}
.paso.es-previo{transform:translateX(-18px)}
.paso.es-activo{opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--ease) .08s,transform .5s var(--ease) .08s,visibility 0s}
.paso h2{font-size:1.625rem;line-height:1.15;letter-spacing:-.022em}
.paso .sub{color:var(--acero-suave);font-size:.9688rem;line-height:1.58;font-weight:300}
.paso .sub b{color:var(--blanco);font-weight:500}

/* campo con etiqueta flotante */
.campo{position:relative}
.campo input{
  width:100%;height:60px;padding:1.5rem .9rem .5rem;
  font-family:var(--texto);font-size:1rem;color:var(--blanco);
  background:rgba(0,0,0,.32);border:1px solid var(--hairline-inv);border-radius:var(--radio);outline:none;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.campo label{position:absolute;left:.92rem;top:1.05rem;font-size:1rem;color:var(--acero-suave);
  pointer-events:none;transform-origin:0 0;transition:transform .22s var(--ease),color .22s var(--ease)}
.campo input:focus{border-color:var(--blanco);background:rgba(0,0,0,.5)}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label{transform:translateY(-.74rem) scale(.72);color:var(--acero-suave)}
.campo.con-error input{border-color:#7A2C26}
.campo input:-webkit-autofill{-webkit-text-fill-color:var(--blanco);-webkit-box-shadow:0 0 0 60px #14181F inset}

/* casillas del código */
.codigo{display:flex;gap:clamp(6px,2.2vw,10px);justify-content:space-between}
.codigo input{
  width:100%;min-width:0;height:clamp(56px,15vw,64px);
  font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,4.6vw,1.45rem);
  font-variant-numeric:tabular-nums;text-align:center;color:var(--blanco);
  background:rgba(0,0,0,.32);border:1px solid var(--hairline-inv);border-radius:var(--radio);outline:none;padding:0;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.codigo input[data-lleno]{border-color:var(--acero);background:rgba(255,255,255,.05)}
.codigo input:focus{border-color:var(--blanco);background:rgba(0,0,0,.5)}
.codigo.con-error input{border-color:#7A2C26}
.codigo.con-error{animation:tiron .34s var(--ease)}
@keyframes tiron{0%,100%{transform:translateX(0)}22%{transform:translateX(-5px)}62%{transform:translateX(4px)}}

.bt{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.005em;
  padding:14px 22px;border-radius:var(--radio);border:1px solid var(--blanco);
  background:var(--blanco);color:var(--grafito);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease)}
.bt:hover{background:transparent;color:var(--blanco)}
.bt svg{transition:transform .3s var(--ease)}
.bt:hover svg{transform:translateX(3px)}
.bt[disabled]{cursor:default}
.bt.ocupado{color:rgba(14,17,22,.45)}
.bt.ocupado svg{opacity:0}
.bt.ocupado::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:38%;
  background:rgba(14,17,22,.45);animation:barrido 1s var(--ease) infinite}
@keyframes barrido{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}

.acciones{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.enlace{background:none;border:0;padding:0;cursor:pointer;font-family:var(--texto);font-size:.875rem;
  color:var(--blanco);text-decoration:underline;text-decoration-color:var(--hairline-inv);text-underline-offset:3px}
.enlace:hover{text-decoration-color:var(--blanco)}
.enlace[disabled]{color:var(--acero-suave);cursor:default;text-decoration:none}
.reloj{font-variant-numeric:tabular-nums}
.aviso{min-height:1.15rem;font-size:.85rem;line-height:1.35;color:#E9A19A;margin-top:-.6rem}
.aviso:empty{min-height:0}
.aviso.neutro{color:var(--acero-suave)}

/* acceso concedido */
.marca-ok{width:44px;height:44px}
.marca-ok line{stroke:var(--blanco);stroke-width:1;stroke-dasharray:44;stroke-dashoffset:44;animation:trazar .7s var(--ease) forwards}
.marca-ok line:nth-child(2){animation-delay:.16s}
.marca-ok rect{fill:var(--blanco);opacity:0;animation:aparece .5s var(--ease) .6s forwards}
@keyframes trazar{to{stroke-dashoffset:0}}
@keyframes aparece{to{opacity:1}}
.avance{margin-top:var(--s2);height:2px;background:var(--hairline-inv);overflow:hidden}
.avance span{display:block;height:100%;width:0;background:var(--blanco);animation:avanza 2.6s linear .2s forwards}
@keyframes avanza{to{width:100%}}

.garantia{display:flex;align-items:flex-start;gap:var(--s3);margin-top:var(--s8)}
.garantia .escala--inv{width:34px;flex:none;margin-top:7px}
.pie-acceso{margin-top:var(--s4);font-size:var(--t-micro);color:var(--acero-suave);font-weight:300}
.pie-acceso a{color:var(--blanco);text-decoration:none;border-bottom:1px solid var(--hairline-inv)}
.pie-acceso a:hover{border-bottom-color:var(--blanco)}
.demo{margin-top:var(--s3);font-size:var(--t-micro);line-height:1.5;color:var(--acero-suave);font-weight:300;opacity:.82}
.volver{display:inline-block;margin-top:var(--s6);font-family:var(--display);font-size:13px;font-weight:500;color:var(--acero-suave);text-decoration:none}
.volver:hover{color:var(--blanco)}

/* ── columna de atmósfera ──────────────────────────────────────────────────
   Orden de capas: fotografía → campo de líneas → velo → pulso → texto.
   El velo va por encima del campo: si no, las líneas cruzan el texto. */
.atmos{position:relative;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.atmos__img{position:absolute;inset:0;z-index:-4}
.atmos__img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.campo-lineas{position:absolute;left:0;right:0;bottom:0;height:76%;width:100%;z-index:-3;pointer-events:none}
.campo-lineas g{stroke:#B6C2CE}
.atmos__velo{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,var(--grafito) 0%,rgba(14,17,22,.58) 22%,rgba(14,17,22,.16) 52%,rgba(14,17,22,.46) 100%),
  linear-gradient(0deg,var(--grafito) 6%,rgba(14,17,22,.90) 30%,rgba(14,17,22,.42) 58%,rgba(14,17,22,0) 80%)}
.onda{position:absolute;left:0;right:0;bottom:0;height:38%;width:100%;z-index:-1;pointer-events:none}
.onda path,.onda use{fill:none;stroke-linecap:round}
.onda .lecho{stroke:rgba(255,255,255,.24);stroke-width:1.2}
.onda .pulso{stroke:var(--blanco);stroke-width:1.8;stroke-dasharray:58 1000;stroke-dashoffset:1058;animation:recorrido 13s linear infinite}
@keyframes recorrido{0%{stroke-dashoffset:1058;opacity:0}10%{opacity:.95}78%{opacity:.95}94%,100%{stroke-dashoffset:0;opacity:0}}

.atmos__txt{position:relative;padding:var(--s24) clamp(28px,4vw,64px) clamp(40px,6vh,72px);max-width:34rem}
.atmos__txt h2{font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.18;letter-spacing:-.012em;max-width:18ch}
.atmos__txt .claim{margin-top:var(--s4);font-size:15px;line-height:1.62;color:var(--acero-suave);font-weight:300;max-width:44ch}
.atmos__lista{margin-top:var(--s8);border-top:1px solid var(--hairline-inv)}
.atmos__lista li{padding-block:var(--s3);border-bottom:1px solid var(--hairline-inv);font-size:14.5px;font-weight:300;color:var(--blanco);display:flex;gap:var(--s3);align-items:flex-start}
.atmos__lista li .escala--inv{width:20px;flex:none;margin-top:8px}
.atmos__rem{margin-top:var(--s8);font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.015em;color:var(--blanco)}

@media (max-width:1000px){
  .puerta{grid-template-columns:1fr}
  .acceso{border-right:0;border-bottom:1px solid var(--hairline-inv);padding-block:var(--s16)}
  .atmos{min-height:78svh}
}
@media (max-width:520px){
  .codigo{gap:5px}
  .acceso__in{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .paso{transition:none}
  .pasos{transition:none}
  .regla__idx{transition:none}
  .tarjeta::before{transition:none;transform:scaleX(1)}
  .tick{transition:none}
  .onda .pulso{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
  .marca-ok line{animation:none;stroke-dashoffset:0}
  .marca-ok rect{animation:none;opacity:1}
  .avance span{animation:none;width:100%}
  .codigo.con-error{animation:none}
  .bt.ocupado::after{animation:none}
}