/* La puerta (§6.2): bienvenida en azul noche, pensada primero para el celular.
   Rediseño "sala de control" del 2026-09-30 (pedido de Benji, referencia einar.ar): el logo manda,
   el fondo es una rejilla con pulsos de luz que suben hacia la cima y todo entra escalonado. */
.puerta {
  --puerta-logo: clamp(12.75rem, 63vw, 19rem);   /* mismo ancho que usa el preloader aquí: el logo vuela sin cambiar de tamaño */
  --paso: clamp(3.25rem, 11vw, 5.5rem);          /* separación de las líneas de la rejilla */
  background: var(--noche); color: var(--claro-sobre-noche);
}
.puerta__main {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  padding: 3.5rem var(--gutter) max(1.25rem, env(safe-area-inset-bottom));
}

/* Fondo: cinco capas quietas y seis pulsos. Solo se animan transform y opacity. */
.puerta__fondo {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(78% 44% at 50% 31%, rgba(37, 127, 204, .22), transparent 72%),
    linear-gradient(180deg, var(--noche) 0%, var(--noche) 46%, #0D1926 100%);
}
.puerta__fondo > * { position: absolute; }
.fondo__niebla {   /* claridad difusa que entra por arriba a la derecha */
  top: -28%; right: -42%; width: 110vmax; height: 80vmax;
  background: radial-gradient(closest-side, rgba(127, 182, 232, .13), rgba(127, 182, 232, .04) 55%, transparent 74%);
}
.fondo__rejilla {
  inset: 0;
  background: linear-gradient(90deg, rgba(127, 182, 232, .095) 1px, transparent 1px) 50% 0 / var(--paso) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 52%); mask-image: linear-gradient(180deg, transparent 4%, #000 52%);
}
/* Pulsos: un trazo de luz que sube por una línea de la rejilla, desde detrás de la cordillera hasta media
   pantalla (se apaga antes de llegar al logo). --col dice por cuál línea (0 es la del centro-derecha). */
.fondo__pulso {
  bottom: 0; left: calc(50% + (var(--col) - .5) * var(--paso)); width: 1px; height: 24vh;
  background: linear-gradient(0deg, transparent, rgba(127, 182, 232, .5) 76%, rgba(232, 238, 244, .95));
  opacity: 0; will-change: transform;
  animation: pulso-sube var(--dur) linear var(--espera) infinite;
}
.fondo__pulso::after {
  content: ''; position: absolute; top: -1px; left: -1px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--claro-sobre-noche); box-shadow: 0 0 9px 2px rgba(127, 182, 232, .65);
}
@keyframes pulso-sube {
  0% { transform: translateY(24vh); opacity: 0; }
  18% { opacity: .9; }
  58% { opacity: .55; }
  100% { transform: translateY(-21vh); opacity: 0; }
}
.fondo__polvo {   /* motas quietas, como polvo en un haz de luz */
  inset: 0; opacity: .8;
  background:
    radial-gradient(1px 1px at 11% 17%, rgba(232, 238, 244, .55) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 41%, rgba(232, 238, 244, .35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 12%, rgba(232, 238, 244, .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 33%, rgba(232, 238, 244, .3) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 52%, rgba(232, 238, 244, .4) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 63%, rgba(232, 238, 244, .35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 39% 8%, rgba(232, 238, 244, .4) 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 22%, rgba(232, 238, 244, .3) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 71%, rgba(232, 238, 244, .3) 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 79%, rgba(232, 238, 244, .3) 50%, transparent 51%);
}
.fondo__cordillera { left: 50%; bottom: 0; width: max(100%, 56rem); max-width: none; height: auto; transform: translateX(-50%); }
.fondo__vineta { inset: 0; background: radial-gradient(130% 88% at 50% 36%, transparent 52%, rgba(0, 0, 0, .46) 100%); }

/* Encuadre de visor: cuatro esquinas finas y dos datos en la parte alta. */
.puerta__marco { position: absolute; inset: .875rem; z-index: -1; pointer-events: none; }
.puerta__marco i { position: absolute; width: .8rem; height: .8rem; border: 0 solid rgba(232, 238, 244, .36); }
.puerta__marco i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.puerta__marco i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.puerta__marco i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.puerta__marco i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.marco__dato {
  position: absolute; top: .3rem;
  font: 500 .625rem/1 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: #7F93A7; white-space: nowrap;
}
.marco__dato--izq { left: 1.4rem; }
.marco__dato--der { right: 1.4rem; }

.puerta__panel { width: 100%; max-width: 23.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* El logo, protagonista: grande, con un aura que respira detrás y un brillo que cruza la M. */
.puerta__marca { position: relative; display: grid; place-items: center; }
.puerta__panel .logo { position: relative; width: var(--puerta-logo); transition: transform 560ms var(--ease-boveda); }   /* parte lento: primero se despeja la pantalla */
.puerta__aura {
  position: absolute; left: 50%; top: 40%; width: 185%; aspect-ratio: 1; pointer-events: none;
  transform: translate(-50%, -50%); transition: opacity var(--dur-3) var(--ease);
}
.puerta__aura::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 127, 204, .36) 0%, rgba(37, 127, 204, .13) 33%, transparent 64%);
  animation: aura-respira 7s ease-in-out infinite;
}
@keyframes aura-respira { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.con-pre:not(.pre-fuera) .puerta__aura { opacity: 0; }   /* mientras el logo del preloader está al centro, su halo es el único */
.puerta__panel .logo__m { filter: drop-shadow(0 10px 26px rgba(37, 127, 204, .5)); }
.logo__brillo { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 860 / 1063; pointer-events: none; }
.brillo__haz { animation: brillo-m 9s var(--ease-emph) 1.9s infinite; }
@keyframes brillo-m { 0% { transform: translateX(0); } 13%, 100% { transform: translateX(1900px); } }

.puerta__lema {
  margin-top: 1.15rem;
  font: 500 .6875rem/1 var(--f-texto); font-style: italic; letter-spacing: .4em; text-indent: .4em; text-transform: uppercase;
  color: var(--suave-sobre-noche);
}

/* Ingreso: rótulo entre dos filetes y el botón. Sin caja: nada compite con el logo. */
.puerta__form { width: 100%; margin-top: clamp(2rem, 1rem + 4.5vh, 3.25rem); }
.puerta__bienvenida {
  display: flex; align-items: center; gap: .85rem; margin-bottom: 1.15rem;
  font: 600 .6875rem/1.3 var(--f-texto); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  color: var(--claro-sobre-noche);
}
.puerta__bienvenida::before, .puerta__bienvenida::after { content: ''; flex: 1; height: 1px; }
.puerta__bienvenida::before { background: linear-gradient(90deg, transparent, rgba(127, 182, 232, .5)); }
.puerta__bienvenida::after { background: linear-gradient(90deg, rgba(127, 182, 232, .5), transparent); }

.puerta__entrar {
  position: relative; overflow: hidden; width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 0 0 1px rgba(127, 182, 232, .2),
    0 16px 34px -12px rgba(37, 127, 204, .78),
    0 0 44px -8px rgba(37, 127, 204, .38);
}
.puerta__entrar:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 0 0 1px rgba(127, 182, 232, .34),
    0 20px 40px -12px rgba(37, 127, 204, .88),
    0 0 56px -6px rgba(37, 127, 204, .5);
}
.puerta__entrar:active { transform: scale(.985); }
.puerta__entrar::before {   /* destello que cruza el botón cada tanto */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .3) 50%, transparent 68%);
  transform: translateX(-115%);
  animation: destello-boton 7s var(--ease-emph) 2.6s infinite;
}
@keyframes destello-boton { 0% { transform: translateX(-115%); } 15%, 100% { transform: translateX(115%); } }
.puerta__entrar svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-1) var(--ease); }
.puerta__entrar:hover svg { transform: translateX(3px); }

.puerta__wa {
  width: 100%; margin-top: .85rem; font-weight: 500;
  /* vidrio oscuro: los pulsos del fondo pasan por detrás sin cruzar el texto */
  background: rgba(13, 25, 38, .8); border-color: rgba(232, 238, 244, .17);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.puerta__pie { margin-top: 1.75rem; font-size: .75rem; letter-spacing: .06em; color: #7F93A7; text-align: center; text-wrap: balance; }

/* Pantallas angostas (Android de 360 px): las mayúsculas espaciadas deben caber en una línea */
@media (max-width: 379px) {
  .puerta__bienvenida { font-size: .65rem; letter-spacing: .2em; gap: .6rem; }
  .marco__dato { letter-spacing: .16em; }
}
@media (min-width: 768px) {
  .puerta__main { padding-top: 4rem; }
  .puerta__marco { inset: 1.25rem; }
  .puerta__marco i { width: 1rem; height: 1rem; }
  .marco__dato { top: .4rem; font-size: .6875rem; }
  .marco__dato--izq { left: 1.75rem; }
  .marco__dato--der { right: 1.75rem; }
}

/* Entrada escalonada (70 ms entre piezas): sube 14 px y aparece. Solo con JS; sin JS todo está a la vista.
   Mientras el preloader está en pantalla la entrada espera, y parte cuando empieza a salir. */
.js .puerta [data-entra] { animation: puerta-entra var(--dur-3) var(--ease) calc(var(--i, 0) * 70ms + 140ms) backwards; }
.con-pre:not(.pre-fuera) .puerta [data-entra] { animation-play-state: paused; }
@keyframes puerta-entra { from { opacity: 0; transform: translateY(14px); } }
/* El logo: si hubo preloader, llega volando desde él (preloader.js) y aquí espera oculto hasta que aterriza.
   Si no lo hubo (misma sesión), se dibuja solo: la M sube, la línea se traza y la palabra aparece. */
.con-pre:not(.pre-listo) .puerta__panel .logo { visibility: hidden; }
.js:not(.con-pre) .puerta__panel .logo__m { animation: pre-m var(--dur-3) var(--ease) 60ms backwards; }
.js:not(.con-pre) .puerta__panel .logo__linea { transform-origin: left center; animation: pre-linea 450ms var(--ease) 420ms backwards; }
.js:not(.con-pre) .puerta__panel .logo__palabra { animation: pre-palabra 450ms var(--ease) 540ms backwards; }

/* Entrada "Horizonte" (§7.7). La secuencia la marca puerta.js con clases en <body>. */
.entrar__normal, .entrar__ok { position: relative; display: inline-flex; align-items: center; gap: .6rem; }
.entrar__ok { display: none; }
.es-verificando .puerta__entrar { opacity: .85; cursor: progress; }
/* Si el pase tarda (conexión lenta), la flecha late: se está entrando. */
.es-verificando .entrar__normal svg { animation: verificando 900ms ease-in-out 300ms infinite; }
@keyframes verificando { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .35; transform: translateX(3px); } }

/* 1. Ingreso concedido: el botón lo confirma con "Bienvenido" y un visto que se dibuja. */
.es-concedido .puerta__main { pointer-events: none; }
.es-concedido .puerta__entrar { opacity: 1; }
.es-concedido .puerta__entrar::before, .es-concedido .brillo__haz { animation: none; }
.es-concedido .entrar__normal { display: none; }
.es-concedido .entrar__ok { display: inline-flex; animation: entrar-ok 280ms var(--ease) both; }
.entrar__ok path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.es-concedido .entrar__ok path { animation: check-trazo 320ms var(--ease) 100ms forwards; }

/* 2 y 3. Todo se desvanece menos el logo, que se desliza al centro (puerta.js le pone el transform). */
.es-despejando :is(.puerta__lema, .puerta__form, .puerta__wa, .puerta__pie, .puerta__fondo, .puerta__marco, .puerta__aura) {
  opacity: 0; animation: none; transition: opacity 280ms var(--ease-emph);
}

/* 4. El horizonte: nace sobre la línea del logo (misma posición y grosor) y se extiende de borde a borde. */
.horizonte {
  position: fixed; left: 0; right: 0; top: 50%; z-index: 10; pointer-events: none; visibility: hidden;
  background: var(--claro-sobre-noche);
  transform: translateY(-50%) scaleX(var(--escala, 1));
}
.horizonte.es-extendida {
  visibility: visible;
  box-shadow: 0 0 14px 1px rgba(127, 182, 232, .55);
  transition: transform 380ms var(--ease-emph), box-shadow 380ms var(--ease-emph);
}

@keyframes entrar-ok { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes check-trazo { to { stroke-dashoffset: 0; } }

/* Movimiento reducido: sin desplazamientos; el ingreso se confirma y la puerta se funde. */
.es-saliendo .puerta__main { opacity: 0; transition: opacity 250ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .fondo__pulso, .puerta__entrar::before, .logo__brillo { display: none; }
  .fondo__pulso, .puerta__entrar::before, .brillo__haz, .puerta__aura::before { animation: none; }
  .js .puerta [data-entra] { animation: pre-fade 280ms ease-out backwards; }
  .js:not(.con-pre) .puerta__panel :is(.logo__m, .logo__linea, .logo__palabra) { animation: pre-fade 280ms ease-out backwards; }
  .puerta__entrar svg { transition: none; }
  .puerta__entrar:hover svg, .puerta__entrar:active { transform: none; }
  .es-verificando .entrar__normal svg { animation: none; }
  .es-concedido .entrar__ok, .es-concedido .entrar__ok path { animation: none; stroke-dashoffset: 0; }
}