/* entrar.css — la puerta. */

/* Nada de `overflow: hidden` aquí: en una pantalla de móvil el contenido de
 * la caja pasa de los 600 px y el botón «Entrar» se quedaba por debajo del
 * corte, sin scroll con el que llegar a él. */
.puerta {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center; justify-content: center;
  padding: var(--r5) var(--r4);
  isolation: isolate;
}
/* Fijos, no absolutos: si la caja crece más que la pantalla y hay que
 * desplazarse, el río se queda quieto detrás en vez de irse hacia arriba. */
.puerta-v {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) contrast(1.04) brightness(.72);
}
.puerta-velo {
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,13,16,.9), rgba(7,13,16,.62) 40%, rgba(7,13,16,.95)),
    radial-gradient(70% 60% at 50% 50%, transparent, rgba(7,13,16,.7));
}

.puerta-caja {
  width: min(430px, 100%);
  margin-block: auto;
  padding: var(--r6) clamp(var(--r4), 6vw, var(--r5));
  background: rgba(10, 18, 22, .82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra);
}

.puerta-marca {
  display: block; margin-bottom: var(--r5);
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 24;
  font-size: var(--t-md); color: var(--papel); text-decoration: none;
}
.puerta-marca em { font-style: normal; color: var(--ocre); }

.puerta-h1 {
  font-size: var(--t-xl);
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 60;
  color: var(--papel);
  margin: 0 0 var(--r3);
}
.puerta-lead {
  font-size: var(--t-sm); line-height: 1.6; color: var(--texto-2);
  margin: 0 0 var(--r5);
}

.puerta-f { display: flex; flex-direction: column; gap: var(--r2); }
.puerta-l {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.puerta-bt { justify-content: center; margin-top: var(--r2); }
.puerta-bt[disabled] { opacity: .5; cursor: progress; }

.campo-codigo {
  font-family: var(--mono); font-size: 1.5rem;
  letter-spacing: .42em; text-align: center;
  padding-left: .42em;
}

.puerta-nota {
  font-size: var(--t-xs); line-height: 1.55; color: var(--texto-3);
  margin: var(--r2) 0 0;
}
.puerta-nota b { color: var(--texto-2); font-weight: 500; }

.enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--brillo); text-decoration: underline;
  text-underline-offset: 2px;
}
.enlace:hover { color: var(--brillo-alto); }

.puerta-aviso:empty { display: none; }
.puerta-aviso {
  margin: var(--r4) 0 0; padding: var(--r3);
  font-size: var(--t-sm); line-height: 1.5;
  border-radius: var(--radio);
  background: rgba(156,66,50,.14);
  border: 1px solid rgba(156,66,50,.36);
  color: #e9b3a8;
}
.puerta-aviso[data-tono='bien'] {
  background: rgba(111,143,106,.14);
  border-color: rgba(111,143,106,.4);
  color: #b7d2b2;
}

.puerta-pie {
  margin: var(--r5) 0 0; padding-top: var(--r4);
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs); line-height: 1.6; color: var(--texto-3);
}
.puerta-pie a { color: var(--texto-2); }
.puerta-pie a:hover { color: var(--brillo); }