/* ═══════════════════════════════════════════════════════════════════════════
   LA PANTALLA DE ENTRADA
   ═══════════════════════════════════════════════════════════════════════════
   Va encima de todo, tapando el programa entero. No es un cuadro flotante ni
   un cajón: es una puerta, y una puerta no deja ver lo que hay detrás.

   La cara de ahora la escogió Erick el 2026-09-25 en la hoja de diseño (la
   "E2, la tarjeta que flota"): el mismo Arco dorado de Inicio moviéndose
   detrás, una VITRINA con el ícono del programa, su nombre en letra de
   serifa, una raya dorada y "Le damos la bienvenida", y debajo una tarjeta
   de vidrio que flota. Una sola columna centrada, en el teléfono y en la
   computadora. "Entrar" es de vidrio dorado; Face ID, Touch ID o Windows
   Hello van debajo, en un botón más corto que dice cuál es.

   LOS COLORES SON LOS DEL ARCO DORADO (negro y oro). Si la puerta estrena
   otro fondo de la galería, el vidrio sirve igual, pero el oro no: hay que
   darle a ese fondo su propia paleta (--acento, --oro, --oro-claro), como
   se pensó para la portada ("cada fondo trae su paleta").

   Es oscura SIEMPRE, esté el programa en claro o en oscuro: por eso redefine
   aquí mismo los colores de la casa, y todo lo que va adentro (casillas,
   avisos, la invitación) los hereda sin que haya que tocarlo uno por uno. */

.entrada {
  --ink: #f7f8fb;
  --muted: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .13);
  --card: #17140f;
  --canvas: #050506;
  --teal: #19b3ac;
  --red: #ff6b6b;
  --orange: #f0a33a;
  --oro: #e8c47f;
  --oro-claro: #f4dfb3;
  --acento: #e8c47f;                 /* el de este fondo: el oro del arco */
  --pozo: rgba(10, 8, 4, .32);       /* el hundido de las casillas */
  --suave: cubic-bezier(.22, .9, .25, 1);
  --rebote: cubic-bezier(.26, 1.6, .42, 1);
  position: fixed;
  z-index: 200;                      /* por encima del cajón, que va en 100 */
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  color: var(--ink);
  color-scheme: dark;
  background: var(--canvas);
  animation: entrada-aparece var(--dur-3) var(--ease-abrir) both;
}

@keyframes entrada-aparece { from { opacity: 0; } to { opacity: 1; } }

.entrada.cerrando { animation: entrada-aparece var(--dur-2) ease reverse both; }

/* Al arrancar entra de golpe: aparecer despacito dejaría ver la planilla por
   detrás durante la animación. Y mientras se decide si hay que ponerla, el
   programa no se enseña — y el fondo ya es el de la puerta, para que en el
   teléfono no dé un fogonazo blanco antes de que aparezca. */
.entrada.de-golpe { animation: none; }
html[data-puerta="pendiente"] #app { visibility: hidden; }
html[data-puerta="pendiente"],
html[data-puerta="pendiente"] body { background: #050506; }

/* ── El cielo: el Arco dorado de Inicio ──────────────────────────────────
   Fijo a la pantalla, detrás de todo. En el teléfono es la MISMA escena de la
   portada (portada.css y portada-fondos.css la dibujan): al entrar, el fondo
   sigue igual y solo cambia lo de encima. En la computadora la foto se
   recorta a lo ancho, y la luz del arco va en un dibujo que usa el mismo
   recorte (slice = cover), así calza en cualquier tamaño de ventana. */
.entrada-cielo {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  overflow: hidden;
  background: #050506;
  pointer-events: none;
}
.entrada-cielo-tel { display: none; }
.entrada-cielo-ancho { position: absolute; inset: 0; }
.entrada-cielo-deriva {
  position: absolute;
  inset: -24px;
  will-change: transform;
  animation: entrada-deriva 34s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}
@keyframes entrada-deriva { from { transform: translate3d(-16px, 14px, 0); } to { transform: translate3d(16px, -14px, 0); } }
.entrada-cielo-deriva img,
.entrada-cielo-deriva svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.entrada-cielo-deriva img { object-fit: cover; }
.entrada-cielo-deriva svg { fill: none; overflow: visible; }
.entrada-cielo-luz { will-change: opacity; animation: entrada-respira 7s ease-in-out infinite alternate; }
.entrada-cielo-luz path { stroke: #f2c77a; stroke-width: 6; stroke-linecap: round; opacity: .5; }
@keyframes entrada-respira { from { opacity: .22; } to { opacity: .9; } }
.entrada-cielo-destello { will-change: transform; }
.entrada-cielo-destello path { stroke-linecap: round; stroke-dasharray: 60 3000; stroke-dashoffset: 60; animation: entrada-corre 8s cubic-bezier(.4, 0, .2, 1) infinite; }
.entrada-cielo-destello .halo { stroke: rgba(235, 200, 130, .34); stroke-width: 3; opacity: .45; }
.entrada-cielo-destello .nucleo { stroke: #ffffff; stroke-width: .8; }
@keyframes entrada-corre { 0% { stroke-dashoffset: 60; } 48%, 100% { stroke-dashoffset: -1000; } }

/* ── La vitrina ──────────────────────────────────────────────────────────── */
.entrada-vitrina {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
  animation: entrada-vitrina var(--dur-3) var(--ease-abrir) both;
}
@keyframes entrada-vitrina { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.entrada.de-golpe .entrada-vitrina { animation-delay: 40ms; }

.entrada-vitrina-icono {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 17px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 44px rgba(235, 200, 130, .16);
}
.entrada-vitrina-icono img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* El filo de oro, como los medallones, y un reflejo que lo cruza de vez en cuando. */
.entrada-vitrina-icono::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from -40deg, #fff4d8, #e2b86c 16%, #8c6a33 36%, #d9b06a 54%, #fbe7bd 68%, #a67c3d 84%, #fff4d8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
}
.entrada-vitrina-icono::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -40%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translate3d(-72%, 0, 0);
  animation: entrada-reflejo 11s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
}
@keyframes entrada-reflejo { 0% { transform: translate3d(-72%, 0, 0); } 10%, 100% { transform: translate3d(72%, 0, 0); } }

/* La serifa sale del propio aparato: Didot en el iPhone y la Mac, Georgia en
   Windows. Nada se baja de afuera (el programa no depende de terceros). */
.entrada-vitrina-nombre {
  margin: 16px 0 0;
  font-family: "Didot", "Bodoni 72", "Bodoni Moda", "Playfair Display", "Iowan Old Style", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.entrada-vitrina-raya {
  display: block;
  width: 44px;
  height: 1.5px;
  margin: 15px 0 13px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(232, 196, 127, 0), var(--oro), rgba(232, 196, 127, 0));
}

.entrada-vitrina-lema {
  margin: 0;
  color: rgba(244, 223, 179, .86);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* ── La tarjeta de vidrio ─────────────────────────────────────────────────
   El mismo vidrio de las tarjetas de Inicio. Aquí el desenfoque sí hace
   algo: detrás pasa la foto moviéndose. */
.entrada-tarjeta {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 24px 20px 20px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022));
  -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(1.08);
  backdrop-filter: blur(16px) saturate(160%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    inset 0 0 0 .5px rgba(255, 255, 255, .12),
    inset 0 0 20px rgba(255, 255, 255, .04),
    0 8px 26px rgba(0, 0, 0, .24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  animation: entrada-tarjeta var(--dur-3) var(--ease-abrir) both;
}
/* El canto de luz: brilla arriba a la izquierda y abajo a la derecha. */
.entrada-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .2) 26%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .14) 72%, rgba(255, 255, 255, .62) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.entrada-tarjeta input,
.entrada-tarjeta button { text-shadow: none; }
@keyframes entrada-tarjeta { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Sin desenfoque (navegador viejo) el vidrio se vuelve macizo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entrada-tarjeta { background: rgba(20, 18, 14, .82); }
}

/* La marca chiquita queda para quien lee la pantalla en voz alta; la cara es
   la vitrina. */
.entrada .entrada-marca {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.entrada-tarjeta h1 { margin: 0 0 8px; font-family: "Didot", "Bodoni 72", "Bodoni Moda", "Playfair Display", "Iowan Old Style", Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1.12; letter-spacing: 0; }
.entrada-tarjeta > p { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.entrada-tarjeta > h1 + p { text-wrap: pretty; }
.entrada-tarjeta > h1:has(+ .entrada-campo),
.entrada-tarjeta > h1:has(+ .entrada-biometria),
.entrada-tarjeta > h1:has(+ .entrada-aviso),
.entrada-tarjeta > h1:has(+ .entrada-nota) { margin-bottom: 18px; }

.entrada-campo { display: block; margin-bottom: 14px; }
.entrada-campo span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .72); }
/* Las casillas son un hundido oscuro en el vidrio, que se enciende de oro al tocarlo. */
.entrada-campo input {
  width: 100%;
  height: 54px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background-color: var(--pozo);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .34), inset 0 0 0 .5px rgba(255, 255, 255, .16);
  color: var(--ink);
  font: inherit;
  /* 16 y no menos: por debajo, el iPhone acerca la pantalla de un tirón al
     tocar la casilla y ya no se vuelve a alejar solo. */
  font-size: 16px;
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease;
}
.entrada-campo input:focus {
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(232, 196, 127, .8), 0 0 0 3px rgba(232, 196, 127, .16);
}
/* En la de entrar, cada casilla lleva su dibujito: la persona y el candado.
   Van en la hoja de estilo para no tocar las casillas ni lo que las prueba. */
[data-entrada="entrar"] .entrada-campo input {
  padding-left: 46px;
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 20px 20px;
}
[data-entrada="entrar"] .entrada-campo input[name="correo"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); }
[data-entrada="entrar"] .entrada-campo input[name="correo"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4dfb3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); }
[data-entrada="entrar"] .entrada-campo input[name="clave"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
[data-entrada="entrar"] .entrada-campo input[name="clave"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4dfb3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }

/* El ojito para ver lo que se escribe. Una contraseña larga escrita a ciegas
   en un teléfono se equivoca sola. */
.entrada-secreto { position: relative; }
.entrada-secreto input { padding-right: 46px; }
.entrada-secreto button {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.entrada-secreto button svg { width: 20px; height: 20px; }
.entrada-secreto button:hover { color: var(--oro-claro); }

/* Los botones de la puerta. El principal es de VIDRIO DORADO (lo pidió Erick:
   "más brillante, como vidrio, un poco transparente"): brilla la mitad de
   arriba como un reflejo, la luz se junta abajo como en un vidrio grueso, el
   filo es de oro, un brillo lo cruza de vez en cuando, y deja ver un poco de
   lo que hay detrás. El otro es vidrio claro. */
.entrada-tarjeta .button { width: 100%; justify-content: center; height: 54px; margin-top: 8px; border-radius: 16px; font-size: 16.5px; }
.entrada .button.primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 252, 240, .52) 0%, rgba(255, 248, 228, .14) 46%, rgba(255, 248, 228, 0) 51%),
    radial-gradient(120% 95% at 50% 118%, rgba(255, 222, 160, .7), rgba(255, 222, 160, 0) 64%),
    linear-gradient(180deg, rgba(242, 212, 152, .58), rgba(218, 176, 104, .52));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(255, 228, 176, .55),
    0 10px 28px rgba(196, 146, 64, .26),
    0 0 22px rgba(235, 200, 130, .2);
  color: #fffaf0;
  font-weight: 650;
  text-shadow: 0 1px 2px rgba(60, 40, 10, .6);
}
.entrada .button.primary::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 1.4px;
  border-radius: inherit;
  background: conic-gradient(from -60deg, #fff4d8, #e2b86c 16%, #8c6a33 36%, #d9b06a 54%, #fbe7bd 68%, #a67c3d 84%, #fff4d8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .95;
  pointer-events: none;
}
.entrada .button.primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translate3d(-70%, 0, 0);
  animation: entrada-brillo 7s cubic-bezier(.4, 0, .2, 1) 2s infinite;
  pointer-events: none;
}
@keyframes entrada-brillo { 0% { transform: translate3d(-70%, 0, 0); } 12%, 100% { transform: translate3d(70%, 0, 0); } }
.entrada .button.primary:not(:disabled):hover {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(255, 232, 186, .65),
    0 12px 32px rgba(196, 146, 64, .34),
    0 0 30px rgba(235, 200, 130, .36);
}
.entrada .button.primary:not(:disabled):active { transform: scale(.97); }
.entrada .button.outline {
  border: 0;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: var(--ink);
}
.entrada .button.outline:not(:disabled):hover { background: rgba(255, 255, 255, .18); }

.entrada-aviso {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(236, 37, 53, .14);
  box-shadow: inset 0 0 0 1px rgba(236, 37, 53, .30);
  color: #ffb1ad;
  font-size: 13px;
  line-height: 1.45;
}
.entrada-aviso svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* "Esta es su planilla de verdad." No es un error, pero es lo más importante
   de la tarjeta. Ámbar que ya nace claro (#f9c157): el de la marca rebajado
   da mostaza (ver la skill del vidrio). */
.entrada-tarjeta > .entrada-ojo {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 12px;
  background: color-mix(in srgb, #f9c157 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f9c157 38%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.entrada-ojo svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #f9c157; }

.entrada-abajo { margin: 8px 0 -12px; text-align: center; }
/* En la de entrar, "Olvidé mi contraseña" va debajo de la tarjeta, suelto. */
.entrada-abajo.afuera { position: relative; z-index: 1; margin: 10px 0 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.entrada-abajo.afuera button { text-decoration: none; color: rgba(255, 255, 255, .72); }
.entrada-abajo.afuera button:hover { color: var(--oro-claro); }
/* Alto de dedo: "Olvidé mi contraseña" es justo lo que se toca con prisa. */
.entrada-abajo button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .25);
  text-underline-offset: 4px;
  cursor: pointer;
}
.entrada-abajo button:hover { color: var(--ink); }

/* ── Face ID, Touch ID, Windows Hello ──────────────────────────────────────
   Debajo de Entrar, más corto y centrado, con su moneda (la de los
   medallones) y el nombre de lo que tiene el aparato: antes era una moneda
   sola en una esquina y no se sabía para qué era. */
.entrada-biometria {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: fit-content;
  max-width: 100%;
  height: 50px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px 0 7px;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 .5px rgba(255, 236, 200, .3), 0 8px 22px rgba(0, 0, 0, .26);
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--suave), box-shadow .35s ease, filter var(--dur-2) ease;
}
.entrada-biometria:not(:disabled):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 .5px rgba(255, 236, 200, .45), 0 10px 26px rgba(0, 0, 0, .3), 0 0 20px rgba(235, 200, 130, .22); }
.entrada-biometria:not(:disabled):active { transform: scale(.97); transition: transform .4s var(--rebote); }
.entrada-biometria:disabled { cursor: default; filter: saturate(.7) brightness(.9); }
.entrada-moneda {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 22%, rgba(255, 240, 214, .2), rgba(255, 240, 214, .05) 52%, rgba(12, 9, 4, .26) 100%);
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .26), inset 0 1.5px 2px rgba(255, 244, 222, .16), 0 5px 12px rgba(0, 0, 0, .3);
  color: #f0d6a0;
  transition: transform .55s var(--suave);
}
.entrada-moneda::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1.3px;
  border-radius: 50%;
  background: conic-gradient(from -40deg, #fff4d8, #e2b86c 16%, #8c6a33 36%, #d9b06a 54%, #fbe7bd 68%, #a67c3d 84%, #fff4d8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
}
.entrada-moneda svg { position: relative; z-index: 1; width: 20px; height: 20px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.entrada-biometria:not(:disabled):hover .entrada-moneda { transform: scale(1.08); transition: transform .6s var(--rebote); }

/* La "o" entre Entrar y la cara o la huella, entre dos hilos de oro. */
.entrada-o {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}
.entrada-o::before,
.entrada-o::after { content: ""; flex: 1; height: .5px; background: linear-gradient(90deg, rgba(232, 196, 127, 0), rgba(232, 196, 127, .4)); }
.entrada-o::after { background: linear-gradient(90deg, rgba(232, 196, 127, .4), rgba(232, 196, 127, 0)); }

/* Pasados los 7 días: por qué pide la contraseña. */
.entrada-nota {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.entrada-nota svg { flex: none; color: var(--oro); }

/* El ofrecimiento, recién entrado. */
.entrada-biometria-sello {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 22%, rgba(255, 240, 214, .2), rgba(255, 240, 214, .05) 52%, rgba(12, 9, 4, .26) 100%);
  box-shadow: inset 0 0 0 1.4px rgba(232, 196, 127, .75), inset 0 -7px 14px rgba(0, 0, 0, .26), 0 0 40px rgba(235, 200, 130, .22);
  color: #f0d6a0;
}
.entrada-tarjeta[data-entrada="biometria"] .button b svg { width: 18px; height: 18px; }

/* ── El código de rescate ────────────────────────────────────────────────
   Se enseña UNA vez. Tiene que verse como lo que es: un papel que hay que
   guardar, no un mensaje que se cierra sin leer. */
.entrada-tarjeta.ancha { max-width: 520px; }

.rescate-papel {
  margin: 0 0 18px;
  padding: 20px 18px;
  border: 2px dashed color-mix(in srgb, var(--acento) 42%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--acento) 5%, transparent);
  text-align: center;
}
.rescate-papel code {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--ink);
  word-spacing: .2em;
  user-select: all;
}
.rescate-papel small { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; text-wrap: balance; }

.rescate-lista { margin: 0 0 18px; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.rescate-lista li + li { margin-top: 5px; }
.rescate-lista b { color: var(--ink); font-weight: 600; }

.rescate-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rescate-botones .button { margin-top: 0; }
/* En el teléfono, uno debajo del otro: "Descargar PDF" y "Crear la cuenta"
   juntos no caben en 375 px y empujaban la tarjeta fuera de la pantalla. */
@media (max-width: 479px) {
  .rescate-botones { grid-template-columns: minmax(0, 1fr); }
}

/* La casilla de "ya lo guardé": sin marcarla no se puede seguir. Es a
   propósito incómoda — es la única vez que ese código existe. */
.rescate-jura {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
}
.rescate-jura input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--acento); }

/* ── La invitación ────────────────────────────────────────────────────────
   Quien abre el enlace de una invitación ve la misma puerta, con sus pasos:
   bienvenida, datos de la empresa, su contraseña, su código y la custodia.
   Todo colgado de .entrada, como el resto de esta hoja. */
.entrada .entrada-tarjeta h1 { text-wrap: balance; overflow-wrap: anywhere; }
/* Un correo largo se parte en vez de empujar la tarjeta fuera de la pantalla. */
.entrada .entrada-tarjeta > p,
.entrada .rescate-papel small { overflow-wrap: anywhere; }
.entrada .entrada-campo input:disabled {
  border-style: dashed;
  background: color-mix(in srgb, var(--ink) 3%, var(--card));
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
}
.entrada .inv-opcional { margin-left: 4px; color: color-mix(in srgb, var(--muted) 70%, transparent); font-weight: 500; }
.entrada .inv-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.entrada .inv-pista { margin: -4px 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.entrada .inv-botones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; margin-top: 6px; }
.entrada .inv-botones .button { margin-top: 0; }
.entrada .inv-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sí o No a la custodia: dos tarjetas que se tocan enteras. */
.entrada .inv-opciones { display: grid; gap: 10px; min-width: 0; margin: 14px 0 12px; padding: 0; border: 0; }
.entrada .inv-opcion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}
.entrada .inv-opcion:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, transparent); }
.entrada .inv-opcion input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--acento); }
.entrada .inv-opcion b { display: block; color: var(--ink); font-size: 15px; font-weight: 650; }
.entrada .inv-opcion small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* La advertencia antes de crear la cuenta: tapa la tarjeta y obliga a leer. */
.entrada .inv-advertencia {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  animation: entrada-aparece var(--dur-2) ease both;
}
.entrada .inv-advertencia[hidden] { display: none; }
.entrada .inv-advertencia-caja {
  width: 100%;
  max-width: 380px;
  padding: 24px 22px 20px;
  border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line));
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--e4);
  text-align: center;
}
.entrada .inv-advertencia-ico {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--red) 11%, transparent);
  color: var(--red);
}
.entrada .inv-advertencia-ico svg { width: 24px; height: 24px; }
.entrada .inv-advertencia h2 { margin: 0 0 8px; color: var(--ink); font-size: 18px; font-weight: 700; }
.entrada .inv-advertencia p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

@media (max-width: 479px) {
  .entrada .inv-par { grid-template-columns: minmax(0, 1fr); }
}
/* Los teléfonos más angostos (320 px): menos relleno, los dos botones uno
   debajo del otro y el código un punto más chico, para que nada se salga. */
@media (max-width: 359px) {
  .entrada { padding: 16px; }
  .entrada-tarjeta { padding: 26px 20px 22px; }
  .entrada .inv-botones { grid-template-columns: minmax(0, 1fr); }
  .rescate-papel { padding: 18px 12px; }
  .rescate-papel code { font-size: 15px; letter-spacing: .03em; word-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .entrada, .entrada.cerrando { animation: none; }
}

html[data-movimiento="reducido"] .entrada,
html[data-movimiento="reducido"] .entrada.cerrando { animation: none; }

/* ═══════════ El acomodo: una columna, en el teléfono y en la computadora ═══════════
   Va al final a propósito: le gana a los ajustes angostos de arriba.

   La vitrina arriba y la tarjeta que flota debajo, centradas. Los márgenes
   automáticos de arriba y de abajo las centran cuando caben, y cuando no (la
   invitación, crear la cuenta) la puerta se desliza sin cortar nada, que es
   justo lo que hace falta para que Safari suba la casilla con el teclado. */
.entrada {
  display: flex;
  flex-direction: column;
  place-items: initial;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 28px) 18px calc(env(safe-area-inset-bottom) + 20px);
}
.entrada-vitrina { flex: none; margin-top: auto; padding-bottom: 28px; }
.entrada > :last-child { margin-bottom: auto; }

/* Teléfono: la misma escena de Inicio (sus capas, su vaivén y sus estrellas). */
@media (max-width: 480px) {
  .entrada-cielo-tel { display: block; }
  .entrada-cielo-ancho { display: none; }
  .entrada-tarjeta.ancha { max-width: none; }

  /* Con tarjeta larga, la vitrina se encoge para dejarle sitio. */
  .entrada:has(.entrada-tarjeta.ancha, [data-invitacion="empresa"], [data-entrada="crear"]) .entrada-vitrina { padding-bottom: 20px; }
  .entrada:has(.entrada-tarjeta.ancha, [data-invitacion="empresa"], [data-entrada="crear"]) .entrada-vitrina-icono { width: 48px; height: 48px; border-radius: 14px; }
  .entrada:has(.entrada-tarjeta.ancha, [data-invitacion="empresa"], [data-entrada="crear"]) .entrada-vitrina-nombre { margin-top: 12px; font-size: 24px; }
}

/* iPhone chicos (SE, 13 mini): todo un punto más compacto. */
@media (max-width: 480px) and (max-height: 700px) {
  .entrada { padding-top: calc(env(safe-area-inset-top) + 16px); }
  .entrada-vitrina { padding-bottom: 18px; }
  .entrada-vitrina-icono { width: 48px; height: 48px; border-radius: 14px; }
  .entrada-vitrina-nombre { margin-top: 12px; font-size: 24px; }
  .entrada-vitrina-raya { margin: 10px 0 9px; }
  .entrada-tarjeta { padding: 18px 18px 16px; }
  .entrada-tarjeta h1 { font-size: 24px; }
  .entrada-tarjeta > h1:has(+ .entrada-campo),
  .entrada-tarjeta > h1:has(+ .entrada-biometria),
  .entrada-tarjeta > h1:has(+ .entrada-nota) { margin-bottom: 12px; }
  .entrada-campo { margin-bottom: 10px; }
  .entrada-campo input { height: 50px; }
  .entrada-o { margin: 10px 0 8px; }
}

/* Computadora: la misma columna, más grande, sobre el arco a lo ancho. */
@media (min-width: 481px) {
  .entrada { padding: 48px 24px; }
  .entrada-vitrina { padding-bottom: 30px; }
  .entrada-vitrina-icono { width: 76px; height: 76px; border-radius: 21px; }
  .entrada-vitrina-nombre { margin-top: 18px; font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .entrada-vitrina, .entrada-tarjeta { animation: none; }
  .entrada-cielo-deriva, .entrada-cielo-luz, .entrada-cielo-destello path, .entrada-vitrina-icono::after, .entrada .button.primary::after { animation: none; }
}
html[data-movimiento="reducido"] .entrada-vitrina,
html[data-movimiento="reducido"] .entrada-tarjeta,
html[data-movimiento="reducido"] :is(.entrada-cielo-deriva, .entrada-cielo-luz, .entrada-cielo-destello path, .entrada-vitrina-icono::after, .entrada .button.primary::after) { animation: none; }